/* Mobile drawer, phone card table, touch targets and print.
   Loaded last on purpose: these rules must win over the component
   styles they narrow, and a media query adds no specificity of its own. */
/* ---------- mobile top bar (hidden on desktop) ---------- */
.mobile-bar{ display:none; }
.nav-backdrop{ display:none; }

/* The sidebar carries the whole filter panel - eight facets, a search box, a
   date range and three chips. Stacking that above the content on a phone means
   scrolling past every control to reach the first number, so below 900px it
   becomes an off-canvas drawer behind a top bar instead. */
@media (max-width:900px){
  /* align-items:flex-start is right for the desktop row, but in a column it
     sizes .main to its content - which the 980px feed table then widens past
     the viewport. Stretch it back to the shell's width. */
  #shell{ flex-direction:column; align-items:stretch; }
  .mobile-bar{
    display:flex; align-items:center; gap:12px;
    position:sticky; top:var(--app-header-h,0px); z-index:40;
    padding:10px 14px; width:100%;
    background:var(--surface); border-bottom:1px solid var(--border);
  }
  .mobile-bar .mb-title{ font-family:var(--sans); font-weight:700; font-size:14px; color:var(--text-primary); }
  .mobile-bar .mb-count{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--text-secondary); }
  .mb-toggle{
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:40px; padding:0 12px; border:1px solid var(--border-strong);
    border-radius:var(--radius-sm); background:transparent; color:var(--text-primary);
    font-family:var(--sans); font-size:13px; cursor:pointer;
  }
  .mb-toggle svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; }

  .side{
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    width:min(320px,86vw); min-height:0;
    /* max-height/overflow are reset here on purpose: left at 100vh in a
       stacked layout they create a nested scroll region above the content. */
    max-height:none; height:100%; overflow-y:auto;
    border-right:1px solid var(--border); border-bottom:none;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:var(--shadow-drawer);
  }
  body.nav-open .side{ transform:translateX(0); }
  body.nav-open{ overflow:hidden; }
  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:50;
    background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }

  .side-filters{ padding:16px 16px 18px; }
  /* 4-across at this width bursts fixed-height buttons with labels like
     "Needs media review", so stay 2-across and let the button grow. */
  .seg-group.vertical{ grid-template-columns:1fr 1fr; }
  .seg-group.vertical .seg-btn{ height:auto; min-height:40px; padding:8px; line-height:1.25; }
  .main-inner{ padding:20px 16px 40px; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  /* Clear the sticky top bar when a nav link jumps to a section. */
  .sec{ scroll-margin-top:68px; }
}

@media (max-width:560px){
  .kpi-grid,.kpi-grid.compact{ grid-template-columns:1fr; }
  .stat-inline{ gap:18px; }
  /* At this width the Status/Est. reach columns are ~20-30px of actual
     content room - not enough for an uppercase, letter-spaced pill or a
     "(people)" header without wrapping. Letter-spacing and uppercase cost
     real pixels for no legibility gain at this size, so both are the first
     things to give up; the pill's own padding is the second. */
  table.feed thead th{ letter-spacing:0; }
  /* The pill's own padding/border cost more of this column's ~30px than its
     three-to-eight characters of text do. Below this width it drops the
     pill shape entirely and reads as bold coloured text instead - the
     colour-plus-text pairing (never colour alone) is what actually carries
     the meaning; the rounded-rect chrome around it was decorative. */
  .status-pill{ padding:0; border:none !important; background:none !important; border-radius:0; font-weight:700; letter-spacing:0; }
  .status-Reviewed{ color:var(--chart-hue); }
  /* Not --blue-01/--ink here: that token is a fixed dark navy in BOTH
     themes (by design, for text on the always-dark brand-blue footer), so
     as plain text on the page's own background it would be unreadable in
     dark mode. --series-primary already flips correctly between themes. */
  .status-Used{ color:var(--series-primary); }
  /* No amount of column-width tuning fits "LOCATION"/"USAGES"/"EST. REACH
     (PEOPLE)" on one line in ~30-40px - they wrap letter by letter, which
     is illegible, not "dynamically adjusting". The header's visible label
     shortens instead: the full word stays as this <th>'s real accessible
     name (a screen reader still announces "Location", not "Loc"), it is
     only visually clipped (the same technique as .visually-hidden, applied
     conditionally here rather than unconditionally) and replaced on-screen
     by the th's own data-short attribute via ::before. Nothing is hidden
     from anyone - the column itself, its data and its true name are all
     still there; only the on-screen word gets shorter. */
  table.feed thead th{ position:relative; }
  table.feed thead th .th-text{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
  }
  table.feed thead th::before{ content:attr(data-short); }
}

/* ---------- feed table: always a real <table>, never stacked cards ----------
   An earlier pass converted this to stacked label/value cards below a
   breakpoint (to keep the "no scrollbars anywhere but the page body" rule
   intact - the table's real rendered width, driven by several nowrap
   columns, measures ~1203px regardless of viewport). That conversion is
   deliberately removed: the table stays a table at every width. The
   consequence is honest, not hidden - `.tablewrap{overflow-x:auto}` in
   table.css is a real, permanent horizontal scrollbar below ~1203px of
   available content width, the one other exception to that rule alongside
   the sidebar's vertical scroll. renderTable() still writes a `data-label`
   attribute per cell; nothing reads it anymore now that the ::before rule
   is gone, but it is harmless to leave and documents each column's header
   at the markup level. */

/* .mapgrid sets a height and an aspect-ratio. Once max-width:100% binds on
   a phone the ratio is ignored and the tiles go oblong, so drop the height
   here and let the ratio size it. Kept at its own, narrower, original
   700px - it is a phone-only distortion fix unrelated to the table
   breakpoint above, and widening it too would change how the map reads at
   tablet/laptop widths for no reason. */
@media (max-width:700px){
  .mapgrid{ height:auto; width:100%; }
  /* The feed table's percentage columns hold at every width without
     scrolling, but the Status/Usages/Est. reach columns (7/6/7% of a very
     narrow .main) have little enough room that the default 14px/10px cell
     padding and 13px/12.5px type start crowding wrapped content. Tightening
     both here is pure headroom, not a layout mechanism - the table would
     still fit without this, just closer to the edge of comfortable. */
  table.feed thead th{ padding:8px 6px; font-size:9.5px; }
  table.feed tbody td{ padding:8px 6px; font-size:12px; }
  .t-story{ font-size:13px; }
}

/* ---------- touch ----------
   Pointer-coarse rather than a width query: a small touch laptop and a large
   phone both need the bigger target, and neither is defined by width. */
@media (pointer:coarse){
  .side-nav a{ min-height:44px; }
  .seg-btn,.ms-btn{ min-height:44px; }
  .user-block-toggle,.user-menu-item,.filters-collapse-toggle{ min-height:44px; }
  .ms-opt{ min-height:40px; align-items:center; }
  .ms-actions button,.map-clear,.chip-reset{ min-height:36px; padding-block:6px; }
  .af-chip{ min-height:32px; padding:6px 10px; }
  .toggle-mini button,.trend-legend button{ min-height:36px; padding-inline:12px; }
  .icon-btn{ width:44px; height:44px; }
  /* .dist-row/.catlist no longer exist post-Step-2 (both are .bl-row now,
     see charts.css) - this rule silently matched nothing until renamed. */
  .bl-row.is-clickable,.consent-key .krow,.legend-rows .lrow.clickable{ min-height:40px; }
  /* Hover transforms stick after a tap on touch, which reads as a stuck tile. */
  .tile:hover{ transform:none; }
}

/* ---------- print ----------
   No dedicated print button any more (removed with the sidebar's Print view
   button), but a viewer can still print with Ctrl/Cmd+P - without this,
   that would emit the sidebar, the dark palette and a clipped table. */
@media print{
  #appHeader,.mobile-bar,.nav-backdrop,.side,.side-nav,#loadMoreRow,.map-clear,.toggle-mini,.trend-legend button{ display:none !important; }
  :root{ color-scheme:light; }
  body{ background:var(--paper); }
  #shell{ display:block; }
  .main-inner{ padding:0; max-width:none; }
  .viz-card,.kpi{ box-shadow:none; break-inside:avoid; }
  .sec{ break-inside:avoid; padding:16px 0; }
  .tablewrap{ overflow:visible; box-shadow:none; }
  table.feed{ min-width:0; font-size:10px; }
  table.feed tbody tr{ break-inside:avoid; }
  a[href]::after{ content:none; }
}