/* Generated by tools/sync_public_hub_ui.mjs from database-worker/public/orgs.html (its inline <style> block). Do not edit. */
* { box-sizing:border-box; }
  a { color:var(--gold); }

  /* ---- the page header: what this is, and the crosswalk's numbers ---- */
  .hero { padding:22px 24px 18px; margin:0 0 6px; border-radius:14px; border:1px solid var(--border);
          background:linear-gradient(120deg, color-mix(in srgb, var(--pro) 15%, var(--panel)) 0%,
                                              var(--panel) 60%); }
  .hero h1 { font-size:26px; line-height:1.15; margin:0 0 6px; letter-spacing:.2px; }
  .hero p { color:var(--muted); font-size:13.5px; max-width:760px; margin:0; }
  .stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
           margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--border); }
  .stat { display:flex; flex-direction:column-reverse; justify-content:flex-end; padding:2px 16px;
          border-left:1px solid var(--border); min-width:0; }
  .stat:first-child { border-left:0; padding-left:0; }
  .stat dd { margin:0; font-size:23px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; }
  .stat dt { margin-top:3px; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--faint); }

  /* ---- filter bar: stays in reach while the list scrolls ---- */
  .toolbar { position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; align-items:center;
             gap:10px 14px; padding:12px 0; margin:0 0 18px; background:var(--bg);
             border-bottom:1px solid var(--border); }
  .search { position:relative; flex:1 1 240px; max-width:360px; }
  .search svg { position:absolute; left:11px; top:50%; width:15px; height:15px; margin-top:-7.5px;
                color:var(--faint); pointer-events:none; }
  .search input { width:100%; min-height:36px; padding:7px 12px 7px 33px; font:inherit; font-size:13.5px;
                  background:var(--panel); color:var(--text); border:1px solid var(--control-border);
                  border-radius:999px; }
  .kinds { display:flex; flex-wrap:wrap; gap:6px; }
  .kinds button { font:inherit; font-size:12.5px; padding:4px 12px; min-height:30px; border-radius:999px;
                  border:1px solid var(--border-strong); background:var(--panel); color:var(--muted);
                  cursor:pointer; white-space:nowrap; }
  .kinds button:hover { color:var(--text); border-color:var(--control-border); }
  .kinds button .n { color:var(--faint); margin-left:5px; font-variant-numeric:tabular-nums; }
  .kinds button[aria-pressed="true"] { background:var(--gold-fill); border-color:var(--gold-fill);
                                       color:var(--on-gold); font-weight:600; }
  .kinds button[aria-pressed="true"] .n { color:inherit; }
  /* Review fix (minor): the Side group used to carry only an aria-label --
     invisible to a sighted reader, so its own "All" pill sat right beside
     the Kind group's "All" pill with nothing to tell them apart. A visible
     label, the same treatment people.html's own Sort group already uses. */
  .side-filter { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  /* Phones: the Side pills scroll inside their own row like the Kind pills,
     instead of stretching the page (a flex item's automatic minimum width
     is its content, so without min-width:0 the nowrap row widened the
     whole toolbar by ~35px at 390px). */
  @media (max-width:700px) {
    .side-filter { flex-basis:100%; min-width:0; }
    .side-filter .kinds { flex:1 1 100%; min-width:0; }
  }
  .side-label { font-size:12.5px; color:var(--muted); margin-right:1px; }
  .sort { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); flex-shrink:0; }
  .sort select { font:inherit; font-size:12.5px; min-height:30px; padding:4px 8px; background:var(--panel);
                 color:var(--text); border:1px solid var(--control-border); border-radius:6px; }
  @media (max-width:700px) {
    .toolbar { position:static; }
    .search { flex-basis:100%; max-width:none; }
    .kinds { flex-wrap:nowrap; overflow-x:auto; width:100%; scrollbar-width:none; }
    .kinds::-webkit-scrollbar { display:none; }
  }

  /* ---- a block: a titled stretch of the page ---- */
  .block { margin:0 0 30px; scroll-margin-top:70px; }
  .block > h2, .sec-head > h2 { display:flex; align-items:center; gap:12px; margin:0 0 6px; font-size:12px;
                letter-spacing:1.4px; text-transform:uppercase; color:var(--gold); }
  .block > h2::after, .sec-head > h2::after { content:""; flex:1; height:1px; background:var(--border); }
  .block > h2 .n, .sec-head > h2 .n { color:var(--faint); letter-spacing:.4px; font-weight:400; }
  /* a heading with a control at its end (All organizations + Sort) */
  .sec-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:0 0 12px; }
  .sec-head h2 { flex:1 1 260px; margin:0; }
  .lede { color:var(--muted); font-size:12.5px; margin:0 0 14px; }

  /* ---- families: one card each, the member it's known by on top ---- */
  .fam-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap:14px; }
  /* the lead's logo, and the rest of the family hanging off a line below it */
  .fam-card { display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:12px; align-items:start;
              align-content:start;   /* a card stretched to its row's height keeps its rows at the top */
              background:var(--panel); border:1px solid var(--border); border-radius:14px;
              padding:14px 16px 14px; scroll-margin-top:70px; }
  .fc-logo { grid-column:1; grid-row:1; display:flex; }
  .fc-title { grid-column:2; grid-row:1; align-self:center; min-width:0; }
  .fc-title h3 { margin:0; font-size:15px; line-height:1.25; }
  .fc-title h3 a { color:var(--text); text-decoration:none; }
  .fc-title h3 a:hover { color:var(--gold); text-decoration:underline; }
  .fc-meta { color:var(--muted); font-size:12px; margin-top:2px; }
  .fc-line { grid-column:1; grid-row:1 / span 2; justify-self:center; align-self:stretch; width:2px;
             margin-top:40px; background:var(--border); }
  .fc-members { grid-column:2; grid-row:2; list-style:none; margin:8px 0 0; padding:0; }
  .fc-members li { position:relative; }
  .fc-members li::before { content:""; position:absolute; left:-29px; top:50%; width:27px; height:2px;
                           margin-top:-1px; background:var(--border); }
  /* the line stops at the last member's branch */
  .fc-members li:last-child::after { content:""; position:absolute; left:-31px; top:calc(50% + 1px); bottom:0;
                                     width:2px; background:var(--panel); }
  .fc-members a { display:flex; align-items:center; gap:9px; min-height:34px; padding:4px 8px;
                  border-radius:8px; color:var(--text); text-decoration:none; font-size:12.5px; line-height:1.3; }
  .fc-members a:hover { background:var(--panel2); }
  .fc-members a:hover .nm { text-decoration:underline; }
  .fc-members .nm { flex:1; min-width:0; }
  .fc-members .k { display:inline-block; margin-left:4px; padding:0 6px; border-radius:4px; font-size:10.5px;
                   line-height:1.6; color:var(--muted); background:var(--panel2); white-space:nowrap; }

  .more-btn { display:block; margin:14px auto 0; font:inherit; font-size:12.5px; min-height:34px; padding:6px 18px;
              border-radius:999px; border:1px solid var(--control-border); background:var(--panel); color:var(--text);
              cursor:pointer; }
  .more-btn:hover { border-color:var(--gold); color:var(--gold); }

  /* ---- every organization: a tile each, grouped by kind ---- */
  .kind-group { margin:0 0 24px; }
  .kind-group h3 { margin:0 0 10px; font-size:11.5px; letter-spacing:.8px; text-transform:uppercase;
                   color:var(--faint); font-weight:600; }
  .kind-group h3 .n { font-weight:400; margin-left:4px; }
  .tiles { list-style:none; margin:0; padding:0; display:grid;
           grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:10px; }
  .tile { position:relative; display:flex; align-items:flex-start; gap:12px; padding:12px 14px;
          background:var(--panel); border:1px solid var(--border); border-radius:12px;
          transition:border-color .15s, box-shadow .15s, transform .15s; }
  .tile:hover { border-color:var(--gold); box-shadow:0 6px 18px rgba(0,0,0,.10); transform:translateY(-1px); }
  .t-body { min-width:0; flex:1; }
  .t-name { color:var(--text); text-decoration:none; font-weight:600; font-size:13.5px; line-height:1.3; }
  /* the whole tile opens the profile; the tile's own other links sit above this */
  .t-name::after { content:""; position:absolute; inset:0; border-radius:12px; }
  .t-name:focus-visible { outline:none; }
  .t-name:focus-visible::after { outline:2px solid var(--gold); outline-offset:2px; }
  .t-meta { color:var(--muted); font-size:12px; margin-top:2px; }
  .t-meta a { position:relative; z-index:1; color:var(--muted); }
  .t-meta a:hover { color:var(--gold); }
  .t-rev { margin-top:6px; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
           display:flex; align-items:center; flex-wrap:wrap; gap:0 8px; }
  .t-rev span { font-size:11px; font-weight:400; color:var(--faint); }
  /* lane CHARTS: the revenue-trend sparkline (app/sparkline.js), inline
     beside the latest-year figure it summarizes. */
  .t-rev .spark { flex-shrink:0; }
  .t-rev .spark:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .spark-none { color:var(--faint); font-size:11px; }
  .t-src { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px; }
  .t-src li { font-size:10.5px; padding:1px 8px; border-radius:999px; border:1px solid var(--border-strong);
              color:var(--muted); }

  /* ---- lane FIRMS: the Law firms tab's extra tile fields ---- */
  .tag { display:inline-block; font-size:10.5px; padding:1px 8px; border-radius:999px;
         border:1px solid var(--border-strong); color:var(--muted); white-space:nowrap; }
  .own-kind-badge { display:inline-block; font-size:10.5px; padding:1px 8px; border-radius:999px;
                     border:1px solid var(--gold); color:var(--gold); white-space:nowrap; }

  /* ---- states ---- */
  .state { color:var(--muted); font-size:13.5px; padding:10px 2px; }
  .state.error { color:var(--anti-text); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .state.error button, .state button { background:var(--panel2); color:var(--text); font:inherit;
    border:1px solid var(--control-border); border-radius:5px; padding:5px 12px; min-height:24px; cursor:pointer; }
  #page[hidden] { display:none; }

  a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
    outline:2px solid var(--gold); outline-offset:2px; }
  .vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
        clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  [hidden] { display:none !important; }
  @media (max-width:640px) {
    header.top, main, footer { padding-left:16px; padding-right:16px; }
    .hero { padding:18px 16px 14px; }
    .hero h1 { font-size:22px; }
    .stats { grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 0; }
    .stat, .stat:first-child { border-left:0; padding:0 8px 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important;
      animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .tile:hover { transform:none; }
  }