/* The Trans Data Initiative shared header bar (public/app/tdi-nav.js builds
 * the markup this styles). Included with a root-relative
 * <link rel="stylesheet" href="/app/tdi-nav.css"> on every signed-in hub
 * page and every section page -- section pages are always read under the
 * hub's own origin (proxied through it, or served by it directly), so the
 * root-relative path always reaches this same file regardless of which
 * section is on screen.
 *
 * Colour: only the shared tokens every one of these pages already defines
 * on :root (--bg, --panel, --text, --muted, --border, --pro, --gold), and
 * only red/teal/gold hues -- here that is --pro (teal, the current-section
 * mark) and --gold (focus rings, hover), matching every other page's
 * a:focus-visible rule. No colour is redeclared here: this file only reads
 * the host page's tokens, so it already follows light/dark and a pinned
 * theme the same way the rest of the page does.
 *
 * Every selector is anchored under .tdi-bar, at two classes or more, so it
 * wins ties against a host page's own generic element rules (several pages
 * style bare `button`/`input`/`a` tags) regardless of stylesheet order.
 */

.tdi-bar, .tdi-bar *, .tdi-bar *::before, .tdi-bar *::after {
  box-sizing: border-box;
}

.tdi-bar {
  /* The header's look (2026-09-25, the owner: "make the header ui a little
     prettier, with a more dynamic look"): the home hero's wash -- red into
     teal, the org pages' gradient -- kept faint so text contrast is the
     plain panel's, tinted by the current database's group hue (--tdi-accent,
     set per section by tdi-nav.js, the same group colours the home
     directory uses), with a slow red/gold/teal line along the bottom.
     Colours stay token-only: a page that lacks --anti or --blue (the 2026 ad
     tracker and polling pages come from other Workers) falls back to another
     shared token (--gold, --pro), never to a hard-coded value. */
  --tdi-accent: var(--pro);
  --tdi-red: var(--anti, var(--gold));
  --tdi-teal: var(--pro);
  --tdi-gold: var(--gold);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 9px 16px 10px;
  background:
    radial-gradient(40% 140% at 100% 0%,
      color-mix(in srgb, var(--tdi-accent) 22%, transparent), transparent 70%),
    linear-gradient(110deg,
      color-mix(in srgb, var(--tdi-red) 14%, var(--panel)) 0%,
      var(--panel) 42%,
      color-mix(in srgb, var(--tdi-teal) 13%, var(--panel)) 100%);
  border-bottom: 1px solid var(--border);
  font: 13px/1.3 "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  position: relative;
  /* above a section's own page content, so the open switcher menu (also
     positioned relative to this bar) is never drawn under it */
  z-index: 60;
  /* Cross-document view transitions (app/tokens.css's @view-transition
     rule): renders identically on every page that carries it, so naming it
     makes the browser treat the outgoing and incoming bar as one continuous
     element -- it stays on screen rather than fading out and back in with
     the rest of the page. Exactly one .tdi-bar exists per page, so one
     name is never ambiguous. Unsupported outside Chromium; inert there. */
  view-transition-name: tdi-bar;
}

/* the moving accent line along the bottom edge */
.tdi-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--tdi-red), var(--tdi-gold), var(--tdi-teal), var(--tdi-accent), var(--tdi-red));
  background-size: 300% 100%;
  animation: tdi-drift 18s linear infinite;
  opacity: .85;
}
@keyframes tdi-drift {
  from { background-position: 0% 0; }
  to   { background-position: 300% 0; }
}
/* per-section group hue (tdi-nav.js sets data-tdi-group): the same colours
   as the home page's directory groups */
.tdi-bar[data-tdi-group="laws"]     { --tdi-accent: var(--anti-text, var(--gold)); }
.tdi-bar[data-tdi-group="money"]    { --tdi-accent: var(--gold); }
.tdi-bar[data-tdi-group="opinion"]  { --tdi-accent: var(--pro); }
.tdi-bar[data-tdi-group="profiles"] { --tdi-accent: var(--blue, var(--pro)); }

/* shared motion for the bar's controls: a small lift on hover, never on
   focus alone, and none at all for readers who ask for less motion */
.tdi-bar .tdi-brand,
.tdi-bar .tdi-switcher-btn,
.tdi-bar .tdi-ask-btn,
.tdi-bar .tdi-me,
.tdi-bar .tdi-investigations-link,
.tdi-bar .tdi-search input[type="search"],
.tdi-bar .tdi-search-btn {
  transition: transform .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .2s ease, background-color .15s ease;
}
.tdi-bar .tdi-brand:hover,
.tdi-bar .tdi-switcher-btn:hover,
.tdi-bar .tdi-ask-btn:hover,
.tdi-bar .tdi-me:hover,
.tdi-bar .tdi-investigations-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--tdi-accent) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .tdi-bar::after { animation: none; }
  .tdi-bar .tdi-brand, .tdi-bar .tdi-switcher-btn, .tdi-bar .tdi-ask-btn,
  .tdi-bar .tdi-me, .tdi-bar .tdi-investigations-link,
  .tdi-bar .tdi-search input[type="search"], .tdi-bar .tdi-search-btn {
    transition-duration: .01ms;
  }
  .tdi-bar .tdi-brand:hover, .tdi-bar .tdi-switcher-btn:hover,
  .tdi-bar .tdi-ask-btn:hover, .tdi-bar .tdi-me:hover,
  .tdi-bar .tdi-investigations-link:hover { transform: none; }
}

/* ---- the current database, beside the switcher: a colour dot + its name */
.tdi-bar .tdi-here {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  background: color-mix(in srgb, var(--tdi-accent) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--tdi-accent) 45%, var(--border));
}
.tdi-bar .tdi-here::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tdi-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdi-accent) 25%, transparent);
}

.tdi-bar .tdi-vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tdi-bar a:focus-visible,
.tdi-bar button:focus-visible,
.tdi-bar input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- brand: "Trans Data Initiative", to the chooser */
/* The way back to the hub: a bordered button with a home icon, like the old
   "← Trans Data Initiative" link it replaced. As plain bold text it read as
   a title, and the owner reported the hub navigation "missing" (2026-09-23). */
.tdi-bar .tdi-brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  white-space: nowrap;
  padding: 3px 11px 3px 3px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.tdi-bar .tdi-brand svg { flex: none; }
/* the gradient tile holding the home icon: the org pages' red-gold-teal */
.tdi-bar .tdi-brand .tdi-mark {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  background: linear-gradient(135deg, var(--tdi-red) 0%, var(--tdi-gold) 50%, var(--tdi-teal) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}
.tdi-bar .tdi-switcher-menu li.tdi-menu-home {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 4px;
}
.tdi-bar .tdi-brand:hover {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--tdi-accent) 60%, var(--border));
}

/* ---- section switcher: disclosure button + link list ---- */
.tdi-bar .tdi-switcher {
  position: relative;
}
.tdi-bar .tdi-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 5px 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.tdi-bar .tdi-switcher-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.tdi-bar .tdi-switcher-btn[aria-expanded="true"] {
  color: var(--gold);
  border-color: var(--gold);
}
.tdi-bar .tdi-switcher-btn svg {
  transition: transform .12s ease;
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .tdi-bar .tdi-switcher-btn svg { transition-duration: .01ms; }
}
.tdi-bar .tdi-switcher-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.tdi-bar .tdi-switcher-menu {
  /* [hidden] already beats a plain class in the cascade (equal-looking
     rules aside, the UA style for [hidden] is display:none), but a !important
     here matches the site-wide convention (FIX_BRIEF's shared fixes) so a
     later, more specific rule can never re-show it by accident. */
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  z-index: 61;
}
.tdi-bar .tdi-switcher-menu[hidden] {
  display: none !important;
}
.tdi-bar .tdi-switcher-menu li {
  margin: 0;
}
.tdi-bar .tdi-switcher-menu a {
  display: block;
  min-height: 24px;
  padding: 7px 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  border-radius: 5px;
  white-space: nowrap;
}
.tdi-bar .tdi-switcher-menu a:hover {
  background: var(--bg);
  color: var(--gold);
}
.tdi-bar .tdi-switcher-menu a[aria-current="page"] {
  color: var(--pro);
  font-weight: 700;
  position: relative;
  padding-left: 20px;
}
.tdi-bar .tdi-switcher-menu a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pro);
}

/* ---- Ask: opens the per-database drawer (or, on the litigation page or a
   page with no current database, goes straight there instead -- see
   triggerAsk() in tdi-nav.js). The drawer itself lives outside .tdi-bar
   (appended to <body>, like the command palette's own overlay), so its
   chrome is styled by app/ask-client.css, not here -- see that file's own
   header comment. */
.tdi-bar .tdi-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 5px 13px;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  /* a gradient ring: the panel fill clipped to the padding box, the
     red-gold-teal gradient showing through the transparent border */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(120deg, var(--tdi-red), var(--tdi-gold), var(--tdi-teal)) border-box;
  border-radius: 999px;
  cursor: pointer;
}
.tdi-bar .tdi-ask-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.tdi-bar .tdi-ask-btn svg {
  flex: none;
}

/* ---- search: a plain GET form to /search ---- */
.tdi-bar .tdi-search {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 200px;
  min-width: 140px;
  max-width: 420px;
  /* the entity listbox (below) is positioned relative to this */
  position: relative;
}
.tdi-bar .tdi-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 24px;
  padding: 5px 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  /* the field's edge is a control boundary (WCAG 1.4.11, 3:1): --control-border
     (tokens.css), not the decorative --border, which measured about 1.3:1 */
  border: 1px solid var(--control-border, var(--border-strong));
  border-right: 0;
  border-radius: 999px 0 0 999px;
  padding-left: 14px;
  /* iOS Safari otherwise renders a type=search input with its own rounded
     chrome that ignores border-radius entirely */
  -webkit-appearance: none;
  appearance: none;
}
.tdi-bar .tdi-search input[type="search"]::placeholder {
  color: var(--muted);
}
.tdi-bar .tdi-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 24px;
  padding: 5px 9px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--control-border, var(--border-strong));
  border-radius: 0 999px 999px 0;
  cursor: pointer;
}
.tdi-bar .tdi-search-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ---- entity combobox: the listbox popup wireCombobox() (tdi-nav.js) fills
   in as a reader types -- org/person/bill/case/action/clinic suggestions
   that jump straight to a record, ahead of the plain keyword results
   /search itself shows. Positioned like the switcher's own menu. */
.tdi-bar .tdi-search-listbox {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  z-index: 62;
}
.tdi-bar .tdi-search-listbox[hidden] {
  display: none !important;
}
.tdi-bar .tdi-opt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.tdi-bar .tdi-opt.active,
.tdi-bar .tdi-opt:hover {
  background: var(--bg);
}
.tdi-bar .tdi-opt-type {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--pro);
}
.tdi-bar .tdi-opt-title {
  color: var(--text);
  font-weight: 600;
}
.tdi-bar .tdi-opt-sub {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 11.5px;
}

/* ---- the signed-in person (team host only): initials + @username, to
   /me. The initials' colours are set inline by tdi-nav.js (the org-logo
   palette), so this file still reads only the shared tokens. */
.tdi-bar .tdi-me {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 2px 11px 2px 2px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.tdi-bar .tdi-me:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.tdi-bar .tdi-me[aria-current="page"] {
  border-color: var(--pro);
}
.tdi-bar .tdi-me .tdi-av {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}
.tdi-bar .tdi-me .tdi-av img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.tdi-bar .tdi-me.tdi-me-new .tdi-av {
  background: var(--pro);
  color: var(--bg);
  font-size: 14px;
}
.tdi-bar .tdi-me .tdi-me-name {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tdi-bar .tdi-me[hidden] {
  display: none !important;
}

/* ---- 320px: the bar wraps to as many rows as it needs. The person's chip
   moves up beside the switcher. The Ask button drops its text label -- the
   icon alone, still with its own accessible name from the button's own
   `title` (the label itself is still present in the DOM, never removed,
   just visually hidden, so nothing about the button's accessible name
   changes) -- and shares the search box's own row instead of wrapping onto
   a THIRD row of its own: brand + switcher (a long section name plus
   "Sections") already use nearly the full 320px row on their own, with no
   room left for anything else at any width, so a full-width search box
   was never actually competing with THEM for space -- only with the now
   much narrower icon-only Ask button, which easily leaves the search box
   comfortable room (its own base rule's min-width:140px) beside it. */
@media (max-width: 480px) {
  .tdi-bar .tdi-search {
    order: 3;
  }
  .tdi-bar .tdi-ask-btn {
    order: 3;
  }
  .tdi-bar .tdi-me {
    order: 2;
  }
  .tdi-bar .tdi-ask-btn span {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .tdi-bar .tdi-ask-btn {
    padding-left: 8px;
    padding-right: 8px;
  }
}
/* Personal research tools share the compact header's wrapping behavior. */
.tdi-bar .tdi-investigations-link { color:inherit; font:inherit; font-size:12px; padding:5px 8px; min-height:28px; display:inline-flex; align-items:center; text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:5px 11px; background:var(--bg); }
.tdi-bar .tdi-investigations-link:hover, .tdi-bar .tdi-investigations-link[aria-current="page"] { color:var(--gold); }
.tdi-bar .tdi-investigations-link:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* the search box: glows in the section's hue while it has focus */
.tdi-bar .tdi-search:focus-within input[type="search"],
.tdi-bar .tdi-search:focus-within .tdi-search-btn {
  border-color: color-mix(in srgb, var(--tdi-accent) 70%, var(--control-border, var(--border)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdi-accent) 18%, transparent);
}
.tdi-bar .tdi-ask-btn:hover {
  color: var(--gold);
}
/* the current-database chip only fits beside everything else on wider bars */
@media (max-width: 720px) {
  .tdi-bar .tdi-here { display: none; }
}