/* ============================================================================
   Praxis compact toolbar — tablet form (see praxis-toolbar-compact.js)
   ============================================================================
   Below 1024px the page toolbar keeps only the back button and the primary
   action; everything else moves into a Tools dropdown, the display-mode switch
   into its own icon-only dropdown, and the remaining display controls (sort,
   columns, chart settings) into an Options drawer.
   ========================================================================= */

/* The wrapper sits inside the toolbar, in line with the back button. It's
   empty until the script fills it, so it costs nothing when expanded. */
.tb-compact{ display:flex; align-items:center; gap:8px; }
.tb-compact:empty{ display:none; }
.tb-compact__menu{ position:relative; }
.tb-compact__btn{ gap:8px; }
.tb-compact__caret{ font-size:18px !important; margin-left:-2px; opacity:.7; }

/* Compact mode is driven by measurement, not a media query — the script sets
   this class when the toolbar's contents would no longer fit on one line. */
body.tb-is-compact .toolbar,
body.tb-is-compact .toolbar__inner{ flex-wrap:nowrap; gap:8px; }
body.tb-is-compact .toolbar__spacer{ display:none; }

/* Phone: the bar carries five controls once Display is out of Options, and at
   390px the fifth one ran off the right edge. The space comes back from the
   spacing rather than from a control — nothing here is dropped or hidden.
   The Tools caret goes because it is the one mark on the bar that carries no
   information: the button is already aria-haspopup="menu", and Options next to
   it has never had one. */
@media (max-width:520px){
  body.tb-is-compact .toolbar,
  body.tb-is-compact .toolbar__inner{ gap:6px; }
  .tb-compact{ gap:6px; }
  .tb-compact__btn{ gap:6px; }
  .tb-compact__caret{ display:none; }
  body.tb-is-compact .tbtn{ padding:0 8px; }
  body.tb-is-compact .tbtn--icon{ width:36px; padding:0; }
}
/* The smallest phones this page targets (~360px). The bar fitted here exactly,
   with nothing to spare, so the fifth control has to be paid for.

   It is paid for out of the leading icons on the captioned buttons, not out of
   any caption. A wrench for "Tools" and sliders for "Options" are decoration
   next to the word they sit beside — nobody reads the glyph — while the words
   are the only thing that tells two adjacent dropdowns of settings apart.
   Filters goes with them: it was held back at first as the primary control, but
   one icon among three bare captions reads as an oversight rather than as
   emphasis. Display keeps its icon because it has no caption: there, the icon
   is the state, and it is the only thing distinguishing it from the back
   button. Above this width all three captions keep their icons, so the rule is
   "all or none" at any given size rather than a standing exception. */
@media (max-width:400px){
  .tb-compact > .tb-compact__menu > .tb-compact__btn > .material-symbols-rounded,
  .tb-compact > .tb-compact__btn > .material-symbols-rounded,
  .tb-compact > [data-action="open-filter-drawer"] > .icon,
  .tb-compact > [data-action="add-filter"] > .icon{ display:none; }
}

  /* ---- Tools dropdown ---- */
  .tb-compact__pop{
    position:absolute; top:calc(100% + 6px); left:0; z-index:120;
    min-width:220px; max-width:min(320px, calc(100vw - 32px));
    display:flex; flex-direction:column; gap:2px; padding:6px;
    background:var(--px-surface); border-radius:12px; box-shadow:var(--px-overlay);
  }
  .tb-compact__pop[hidden]{ display:none; }
  /* The tools inside are the page's own buttons, restyled as menu rows so a
     row of pills reads as a list. */
  .tb-compact__pop > *{
    width:100% !important; height:auto !important; min-height:44px;
    justify-content:flex-start !important;
    border-radius:8px !important;
  }
  /* Everything except the primary action flattens to a plain row. Run keeps
     its own background: the blanket transparent fill used to erase its
     gradient but not its white text, leaving it white-on-white at 1.00:1 —
     invisible in light mode. Restyling the text instead would need a new
     accent that passes on white, where the gradient it already carries is
     verified (5.00:1 at the top stop, from the contrast fix in praxis-core).
     Dark is left to its own .tbtn--run soft treatment for the same reason. */
  .tb-compact__pop > *:not(.tbtn--run){
    box-shadow:none !important;
    background:transparent !important;
  }
  .tb-compact__pop > *:not(.tbtn--run):hover{ background:var(--px-hover-btn) !important; }
  /* .tb-menu wrappers hold their own trigger; let it fill the row. */
  .tb-compact__pop .tb-menu > .tbtn{ width:100%; justify-content:flex-start; }

  /* ---- Display-mode dropdown ------------------------------------------
     Its own control on the compact bar rather than the first section of
     Options: choosing a view is the most-repeated action on a results screen,
     and behind Options it was two taps deep, under a heading, below a column
     list. The trigger is the current mode's icon and nothing else — the bar has
     no room for a caption, and the word would only repeat what the icon says.
     The name is on aria-label and the tooltip, and every row in the open menu
     is icon + word, so nothing rests on icon recognition alone. */
  .tb-display__btn{ padding:0 !important; }
  /* Square like the back button beside it, so the bar reads as one row of
     controls rather than a pill with an odd square in it. */
  .tb-display__btn .tb-display__icon{ display:flex; align-items:center; justify-content:center; }
  .tb-display__btn .tb-display__icon > *{ width:20px; height:20px; font-size:20px; }
  .tb-display__btn[aria-expanded="true"]{ background:var(--px-chip); }
  /* Right-aligned: Display sits at the end of the bar next to Options, and a
     left-anchored popover there hangs off the edge of a phone. */
  .tb-display__pop{ left:auto; right:0; min-width:200px; }

  /* The strip becomes a vertical list, matching how it read inside Options.
     Its sliding thumb is absolutely positioned with a width and transform
     computed for the horizontal strip; restacked those numbers are meaningless
     and it renders as a stray pill smeared across the rows. The active row
     carries its own fill here, so the thumb is redundant. */
  .tb-display__pop .viewswitch{
    display:flex; flex-direction:column; gap:2px; width:100%;
    margin:0; padding:0; background:transparent; box-shadow:none;
  }
  .tb-display__pop .viewswitch__thumb{ display:none !important; }
  .tb-display__pop .viewswitch__btn{
    display:flex; align-items:center; justify-content:flex-start; gap:12px;
    width:100%; height:auto; min-height:44px; padding:0 12px;
    border-radius:8px; background:transparent; box-shadow:none;
  }
  .tb-display__pop .viewswitch__btn:hover{ background:var(--px-hover-btn); }
  .tb-display__pop .viewswitch__btn--active{
    background:var(--px-chip); color:var(--praxis-color-pink-60);
  }
  .tb-display__pop .viewswitch__btn .tb-viewlabel{
    font-size:.9375rem; font-weight:600; color:inherit;
  }

  /* ---- Options panel ---------------------------------------------------
     Fourth shape, and this time not an invention: it is the Filters drawer.

     It began as a bottom sheet from under the toolbar to the floor (77% of the
     viewport, 51% of it empty, tab strip clipped on a phone), became an
     anchored dropdown (too small for forty columns), then a flush full-height
     side sheet — square-cornered, edge-to-edge, no scrim. That last one was
     defensible on its own terms and wrong next to its neighbour: Filters, one
     button along on the same bar, opens a rounded card inset 24px from every
     edge over a dimmed page. Two panels opened from the same toolbar, doing the
     same kind of job, looked like they came from different products.

     So the geometry, radius, shadow, inset, scrim and slide are all taken from
     .filter-drawer below 1280px, deliberately by copy rather than by extending
     that class — praxis-filters.css belongs to the filter component and this
     file ships to pages that don't load it. If the drawer's shape changes,
     these numbers have to be changed with it.

     Phone and tablet get the same card at the same inset; min(480px, …) simply
     resolves to the full width minus gutters on a phone, which is what the
     Filters drawer does there too. */
  .tb-options{
    position:fixed; z-index:151;
    top:24px; right:24px; bottom:24px;
    width:min(480px, calc(100% - 48px));
    display:flex; flex-direction:column;
    background:var(--px-surface, var(--praxis-color-surface-default));
    color:var(--praxis-color-text-primary);
    border-radius:20px;
    /* Clips the header band and the scrolling body to the rounded corners. */
    overflow:hidden;
    box-shadow:0 24px 64px rgba(32,42,53,.24), 0 8px 24px rgba(32,42,53,.12);
    transform:translateX(calc(100% + 24px));
    transition:transform 320ms var(--praxis-ease-default);
  }
  .tb-options.is-open{ transform:none; }
  .tb-options[hidden]{ display:none; }
  /* Both shadows are built from light-mode navy and vanish over a dark page.
     Same substitutions praxis-filters.css makes for the drawer and its scrim. */
  body[data-theme="dark"] .tb-options{ box-shadow:var(--px-overlay); }

  /* Same scrim as the Filters drawer, at the same opacity. The panel was
     non-modal by design — the table stayed live behind it — but a card floating
     24px off every edge over an undimmed page reads as detached rather than as
     a layer, and the two panels on this bar should not disagree about whether
     the page behind them is available. Clicking it closes, which the panel
     already supported as tap-away. */
  .tb-options-scrim{
    position:fixed; inset:0; z-index:150;
    background:rgba(32,42,53,.5);
    opacity:0; transition:opacity 220ms ease;
  }
  .tb-options-scrim.is-open{ opacity:1; }
  .tb-options-scrim[hidden]{ display:none; }
  body[data-theme="dark"] .tb-options-scrim{ background:rgba(4,8,16,.62); }

@media (prefers-reduced-motion: reduce){
  .tb-options, .tb-options-scrim{ transition:none; }
}

/* ---- panel header: title, count, close ----
   .filter-drawer__head's proportions: 16px in, 4px under, title at --t-xl/700,
   and no rule beneath it — the hairline belongs to the toolbar row below, which
   is where the search sits here too. */
/* Top-aligned, not centred. Both panels declare padding-top:16px, but the close
   button is 36px against a 30px title line, so centring the row pushed the title
   3px down and the measured gap to 19px. The Filters modal now lands on a true
   16px, and these two are meant to read as the same header. The button keeps its
   36px target and simply hangs 6px lower than the title. */
.tb-options__head{
  flex-shrink:0; display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  padding:16px 16px 4px;
}
/* Same size and weight as .filter-drawer__head h2, but coloured from
   --praxis-color-text-primary rather than the neutral scale that rule uses.
   praxis-filters.css inverts the neutrals inside .filter-drawer for dark mode;
   this panel is a sibling of that subtree, so it would have taken the light
   value and rendered near-black on navy. */
.tb-options__title{
  margin:0; flex:1; min-width:0;
  font-size:var(--praxis-type-size-xl); font-weight:700;
  color:var(--praxis-color-text-primary);
}
.tb-options__close{
  width:36px; height:36px; flex-shrink:0; display:grid; place-items:center;
  border:0; background:transparent; border-radius:var(--praxis-radius-sm);
  color:var(--praxis-color-text-primary); cursor:pointer;
}
.tb-options__close:hover{ background:var(--px-hover-btn); color:var(--praxis-color-text-primary); }
.tb-options__close:focus-visible{ outline:2px solid var(--praxis-color-teal-50); outline-offset:-2px; }
.tb-options__close .material-symbols-rounded{ font-size:22px; }

/* ---- search ----
   The answer to "there could be many many columns". Appears only once the
   panel holds enough rows to be worth searching (the script decides), so a
   three-item panel doesn't get a search box it doesn't need. */
/* Defined here rather than borrowed: this component ships to four pages and
   .visually-hidden only exists on one of them. */
.tb-options__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Sits where .filter-drawer__toolbar does, and carries the same hairline —
   inset from the edges rather than bled to them, which is what stops the card's
   rounded corners from being cut by a full-width rule. */
.tb-options__search{
  flex-shrink:0; position:relative;
  padding:4px 16px 16px;
}
.tb-options__search::after{
  content:""; position:absolute; left:16px; right:16px; bottom:0; height:1px;
  background:var(--praxis-color-border-default);
}
.tb-options__search[hidden]{ display:none; }
/* .filter-search's metrics — 40px, 12px in, 40px of room for the icon, 600
   weight — on theme-aware colours, for the reason given on the title above. */
.tb-options__search input{
  width:100%; height:40px; padding:0 40px 0 12px;
  border:1px solid var(--praxis-color-border-default);
  border-radius:var(--praxis-radius-md, 8px);
  background:var(--px-surface-2, var(--px-surface));
  color:var(--praxis-color-text-primary);
  font-family:inherit; font-size:var(--praxis-type-size-base); font-weight:600;
  outline:none;
}
.tb-options__search input::placeholder{ color:var(--praxis-color-text-secondary); font-weight:500; }
.tb-options__search input:focus{ border-color:var(--praxis-color-teal-50); box-shadow:0 0 0 2px var(--praxis-color-teal-50); }
.tb-options__search .material-symbols-rounded{
  position:absolute; right:28px; top:calc(50% - 6px); transform:translateY(-50%);
  font-size:20px; color:var(--praxis-color-text-secondary); pointer-events:none;
}
.tb-options__empty{
  padding:18px 16px; margin:0; text-align:center;
  font-size:.8125rem; color:var(--praxis-color-text-secondary);
}
.tb-options__empty[hidden]{ display:none; }

/* No top padding: a sticky heading with top:0 stops at the scrollport edge, so
   any padding above it is a strip the rows scroll through in the open — 6px of
   half a checkbox riding above "COLUMNS". The headings carry their own 8px of
   top padding, so nothing is lost by taking it off the container. */
.tb-options__body{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:0 8px 24px; display:flex; flex-direction:column; gap:2px;
}
.tb-options__panel{ display:flex; flex-direction:column; gap:4px; }
.tb-options__panel[hidden]{ display:none; }
.tb-options__panel + .tb-options__panel{ margin-top:8px; }
/* The search hides rows with the `hidden` attribute, but the layout rules
   below set display on these same elements and would win over the UA's
   [hidden] rule on specificity alone. Restore it explicitly. */
.tb-options__body .viewswitch__btn[hidden],
.tb-options__body .sortmenu__opt[hidden],
.tb-options__body .colmenu__row[hidden],
.tb-options__body .colmenu__group[hidden],
.tb-options__body [data-tb-row][hidden],
.tb-options__body [data-tb-group][hidden]{ display:none !important; }
/* Sticky, because with a long column list the heading you need is the one that
   has just scrolled off. Sections stay expanded rather than collapsing into an
   accordion: NN/g's finding is that accordions cut visibility and add
   interaction cost, and search is the better answer to length. */
.tb-options__sechead{
  position:sticky; top:0; z-index:2; margin:0;
  /* Full-bleed white: the heading sits inside the body's 8px padding, so a
     background only as wide as the text box leaves a gutter down each side for
     rows to scroll through. Pulled out to the panel edges and padded back in,
     the band is solid all the way across. */
  margin-left:-8px; margin-right:-8px;
  padding:8px 16px 6px;
  background:var(--px-surface, var(--praxis-color-surface-default));
  border-bottom:1px solid var(--praxis-color-border-default);
  font-size:.75rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--praxis-color-text-secondary);
}
/* Sentence case, weight for emphasis rather than caps. */
.tb-options__label{
  font-size:.8125rem; font-weight:700; color:var(--praxis-color-text-secondary); padding:6px 0 0 8px;
}
/* The page's own "Sort Results By:" caption travels in with the sort menu and
   would sit directly under a heading that already says Sort by. Likewise the
   column list's own filter box — the panel search covers every section, and
   two search fields in one panel is a worse problem than none. */
.tb-options__body .toolbar__sortlabel,
.tb-options__body .colmenu__search{ display:none; }
.tb-options__body .colmenu__grouplabel{
  font-size:.8125rem; font-weight:700; color:var(--praxis-color-text-secondary); padding:6px 8px 2px;
}

/* Display mode: a vertical list of icon + label rather than an icon strip. */
.tb-options__body .viewswitch{
  display:flex; flex-direction:column; gap:2px; width:100%;
  background:transparent; box-shadow:none; padding:0;
}
/* The switcher's sliding indicator is absolutely positioned, and its width and
   transform are computed for the horizontal strip in the toolbar. Restacked as
   a vertical list those numbers are meaningless: it rendered as a stray pale
   pill floating across the rows — most visibly as a smear through the sticky
   DISPLAY MODE heading, which looked like the heading was transparent. The
   active row already carries its own fill here, so the thumb is redundant. */
.tb-options__body .viewswitch__thumb{ display:none !important; }
.tb-options__body .viewswitch__btn{
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  width:100%; height:auto; min-height:48px; padding:0 12px;
  border-radius:10px; background:transparent; box-shadow:none;
}
.tb-options__body .viewswitch__btn:hover{ background:var(--px-hover-btn); }
.tb-options__body .viewswitch__btn--active{
  background:var(--px-chip); color:var(--praxis-color-pink-60);
}
.tb-options__body .viewswitch__btn .tb-viewlabel{
  font-size:.9375rem; font-weight:600; color:inherit;
}
/* The moved controls were laid out for a horizontal bar; stack them.
   (The "Sort Results By:" caption is hidden above — the section heading says
   it. Styling it here as well would just override that.) */
.tb-options__body .sortmenu,
.tb-options__body .viewswitch{ width:100%; }

/* Sort: a trigger plus its own absolutely-positioned dropdown. Nested inside a
   scrolling popover that dropdown gets clipped by the scroll container, and a
   menu opening a menu is the wrong shape here anyway. Inside Options it
   flattens — the trigger goes and its options become the list, matching how
   Display mode reads two sections above.

   Done in CSS, deliberately: the options keep their own click handlers so
   choosing one still sorts, and #sortPop keeps its `hidden` attribute, so when
   the viewport grows and the control is handed back to the toolbar it returns
   as a closed dropdown rather than a list stuck open. */
.tb-options__body .sortmenu{ position:static; }
.tb-options__body .sortbtn{ display:none; }
.tb-options__body .sortmenu__pop{
  display:flex !important; flex-direction:column; gap:2px;
  /* z-index:auto alongside position:static — see the note on .colmenu__pop in
     search-page.html. A leftover popover z-index can outrank the sticky section
     heading the moment its host becomes a flex item. */
  position:static; z-index:auto; width:100%; min-width:0; inset:auto;
  background:transparent; border:0; border-radius:0; box-shadow:none; padding:0;
}
.tb-options__body .sortmenu__opt{ min-height:44px; height:auto; padding:0 12px; border-radius:10px; font-size:.9375rem; }


.tb-options__body > *{ flex-shrink:0; }

/* A moved-in panel brings its own card chrome — surface, border, shadow, its
   own title and collapse chevron. Inside the drawer that reads as a card in a
   card, and the section label above it already names it. Flatten it. */
.tb-options__body #fieldsPanel,
.tb-options__body #chartPanel,
.tb-options__body #explorePanel{
  background:transparent !important; box-shadow:none !important; border:0 !important;
  border-radius:0 !important; padding:0 !important; width:100% !important;
  max-width:none !important; min-width:0 !important; position:static !important;
}
/* Their own headers duplicate the drawer's section label. */
.tb-options__body :is(#fieldsPanel, #chartPanel, #explorePanel)
  :is(.fields__head, .panel__head, .exp-head, [class$="__head"]):first-child{ display:none; }