/* The Organizations list and organization pages (public-worker/src/pages/orgs.js), in the research hub's own look
 * (database-worker/public/orgs.html and org.html): a header panel with the organization's tile, an "on this page" bar,
 * titled blocks in a main column with the facts beside them, the family drawn as an org chart. Colours, spacing and
 * radii come from tokens.css, the shared pieces (facts list, tables, filter buttons) from site.css, the charts from
 * charts.css. Nothing here is inline in a page (the CSP allows no style attribute), loads a font, an image or a file
 * from another site, and nothing moves except a hover colour. */

/* ---- the organization tile: initials on a colour picked from the id (the hub's .lg), or the organization's logo ---- */
.lg { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-weight: 700;
  letter-spacing: .4px; line-height: 1; font-family: var(--font-sans); }
.lg.m0 { background: #1a6660; } .lg.m1 { background: #356487; } .lg.m2 { background: #5b3f8c; }
.lg.m3 { background: #2f6b3a; } .lg.m4 { background: #6b4f2a; } .lg.m5 { background: #3d4a5c; } .lg.m6 { background: #7a4a1c; }
.lg.s88 { width: 88px; height: 88px; border-radius: 14px; font-size: 30px; }
.lg.s36 { width: 36px; height: 36px; border-radius: 8px; font-size: 13px; }
.lg.s24 { width: 24px; height: 24px; border-radius: 6px; font-size: 10px; }

/* a logo on a tile (the hub's app/org-logos.css): white in both themes so a dark wordmark never vanishes into a dark page; a mark that is
   light on a transparent ground (tile "dark" in the release) sits on near-black. Pictures are same-origin files of /static/org-logos/. */
.lg:not(.mono) { background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .10); }
.lg.on-dark { background: #161616; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.lg img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.lg.mono { padding: 0; }
.lg:not(.mono).s88 { padding: 11px; }
.lg:not(.mono).s88.wide { width: auto; min-width: 88px; max-width: 260px; padding: 14px 18px; }
.lg:not(.mono).s36 { padding: 4px; }
.lg:not(.mono).s24 { padding: 2px; }

/* ---- the header panel ---- */
.org-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 22px; align-items: center;
  padding: 22px 24px 18px; margin: 0 0 12px; 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%); }
.org-hero.org-hero-list { grid-template-columns: minmax(0, 1fr); }
.org-hero h1 { font-size: 26px; line-height: 1.15; margin: 0; letter-spacing: .2px; }
.oh-lede { color: var(--muted); font-size: 14px; max-width: 76ch; margin: 8px 0 0; }
.hero-sub { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 8px 0 0; }
.chip { font-size: 12px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--border-strong);
  color: var(--muted); background: var(--panel); }
.chip a { color: inherit; }
.hero-links { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.hero-links a { color: var(--text); display: inline-flex; align-items: center; min-height: 24px; text-decoration: none;
  border-bottom: 1px dotted var(--muted); }
.hero-links a:hover { color: var(--gold); }

/* ---- "on this page": sticky, scrolls sideways by itself on a phone ---- */
.sectnav { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; margin: 0 0 16px;
  background: var(--bg); border-bottom: 1px solid var(--border); scrollbar-width: none; }
.sectnav::-webkit-scrollbar { display: none; }
.sectnav a { flex-shrink: 0; font-size: 13px; color: var(--muted); text-decoration: none; padding: 5px 12px; border-radius: 999px;
  min-height: 30px; display: inline-flex; align-items: center; }
.sectnav a:hover { color: var(--text); background: var(--panel2); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
@media (max-width: 920px) { .layout { grid-template-columns: minmax(0, 1fr); } }

/* ---- a block: a titled stretch of the page, not a boxed card ---- */
.block { margin: 0 0 30px; scroll-margin-top: 60px; }
.block > h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.block > h2::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.block .lede { margin: -4px 0 12px; }
.block .note { color: var(--muted); font-size: 13.5px; max-width: 76ch; margin: 8px 0; }
.block .chart-h { font-size: 13px; margin: 18px 0 6px; color: var(--muted); font-weight: 600; }
.side-col .block { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.side-col .block > h2 { font-size: 12px; margin-bottom: 10px; }
.side-col dl.facts { grid-template-columns: auto minmax(0, 1fr); font-size: 13px; margin: 0; }
.side-col dl.facts dd { overflow-wrap: anywhere; }
.side-col .table-wrap { margin: 8px 0; }
.aliases { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.aliases li { font-size: 12px; padding: 1px 8px; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--muted); }
.sources { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.sources li { padding: 4px 0; }
.sources b { color: var(--text); font-weight: 600; margin-right: 4px; }
.org-data { margin-top: 24px; color: var(--muted); font-size: 14px; }

/* ---- "every filing" and the families' "show every family": a disclosure with the hub's triangle ---- */
details.all { margin-top: 12px; }
details.all > summary { cursor: pointer; font-size: 13px; color: var(--gold); min-height: 28px; display: inline-flex; align-items: center;
  gap: 8px; list-style: none; }
details.all > summary::-webkit-details-marker { display: none; }
details.all > summary::before { content: ""; border-left: 5px solid currentColor; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; }
details.all[open] > summary::before { transform: rotate(90deg); }

/* ---- plain lists: model bills, dockets ---- */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); }
.rows li:first-child { padding-top: 0; }
.rows .when { flex-shrink: 0; width: 112px; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rows .what { min-width: 0; overflow-wrap: anywhere; }
.rows .what a { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--muted);
  display: inline-flex; align-items: center; min-height: 24px; }
.rows .what a:hover { color: var(--gold); }

/* ---- the family, drawn as an org chart ---- */
.fam { display: flex; flex-direction: column; align-items: center; }
.tier { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vline { width: 2px; height: 22px; background: var(--border-strong); }
.node { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--border); width: 250px; max-width: 100%; color: var(--text); text-decoration: none; }
a.node:hover { border-color: var(--gold); }
.node .nt { min-width: 0; }
.node .nm { display: block; font-weight: 600; font-size: 13px; line-height: 1.3; }
.node .rel { display: block; font-size: 12px; color: var(--muted); }
.node.self { border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); }
.mid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: 100%; }
.mid .lhs, .mid .rhs { display: flex; align-items: center; min-width: 0; }
.mid .lhs { justify-content: flex-end; }
.mid .side { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 0 1 250px; }
.mid .side .node { width: 100%; }
.mid .hline { width: 26px; height: 2px; background: var(--border-strong); flex-shrink: 0; }
.fam-group { margin-top: 18px; }
.fam-group h3 { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.fam-group .tier { justify-content: flex-start; }
@media (max-width: 700px) {
  .mid { display: flex; flex-direction: column; align-items: center; }
  .mid .lhs, .mid .rhs { flex-direction: column; width: 100%; }
  .mid .side { flex: none; width: 250px; max-width: 100%; }
  .mid .hline { width: 2px; height: 16px; }
}

/* ---- the list page: the filter bar, the type pills, the families, the tiles ---- */
.org-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 10px; }
.org-toolbar .search { flex: 1 1 240px; max-width: 360px; }
.org-toolbar .search input { width: 100%; min-height: 36px; padding: 7px 14px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--control-border); color: var(--text); font: inherit; font-size: 14px; }
.org-toolbar button { font: inherit; font-size: 13px; font-weight: 600; background: var(--gold-fill); color: var(--on-gold);
  border: 0; border-radius: 999px; padding: 7px 16px; min-height: 36px; cursor: pointer; }
.org-toolbar .reset { font-size: 13px; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.kinds a { font-size: 13px; padding: 4px 12px; min-height: 30px; display: inline-flex; align-items: center; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--muted); text-decoration: none; white-space: nowrap; }
.kinds a:hover { color: var(--text); border-color: var(--control-border); }
.kinds a[aria-current="true"] { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--on-gold); font-weight: 600; }

.fam-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; }
details.all > .fam-grid { margin-top: 12px; }
.fam-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.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: 12.5px; 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); }
.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: 13px; 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: block; font-size: 12px; color: var(--muted); }

.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; }
.tile:hover { border-color: var(--gold); }
.t-body { min-width: 0; flex: 1; }
.t-name { color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
/* the whole tile opens the page */
.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: 12.5px; margin-top: 2px; }
.t-ein { color: var(--faint); font-size: 12px; margin-top: 4px; }
.ein { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .org-hero { grid-template-columns: 1fr; padding: 18px 16px 14px; }
  .org-hero h1 { font-size: 22px; }
}