/* ============================================================
   Phones and small tablets.

   The desktop layout assumes a wide HUD, a side rail and hover.
   None of the three exist on a phone, so every screen gets a
   deliberate small-width form here rather than a squeeze of the
   large one. Loaded last; it only ever adds.
   ============================================================ */

@media (max-width:760px){

  :root{ --hud-h:96px; }

  body{ font-size:16px; }
  .wrap{ padding:18px 15px 64px; }
  .prose{ font-size:16px; line-height:1.62; }
  .btn{ padding:11px 16px; }               /* 44px touch target */
  .btn.small{ padding:9px 12px; min-height:34px; }
  /* the heading and its button fight for the same line on a phone: let the
     button drop under the title instead of squeezing three words per line */
  .section-title{ flex-wrap:wrap; gap:8px 12px; }
  .section-title h2{ font-size:21px; flex:1 1 100%; }
  .section-title .rule-line{ display:none; }

  /* ---------------- HUD: two rows ---------------- */
  #hud{
    height:calc(var(--hud-h) + var(--safe-t));
    padding:var(--safe-t) 10px 0;
    flex-wrap:wrap; align-content:flex-start; gap:0;
  }
  .hud-left{ order:1; flex:1 1 auto; min-width:0; height:52px; gap:9px; }
  .hud-right{ order:2; flex:0 0 auto; min-width:0; height:52px; gap:10px; align-items:center; }
  #hud-tabs{
    order:3; flex:1 0 100%; height:44px; justify-content:flex-start;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
    border-top:1px solid var(--ink-500); margin:0 -10px; padding:0 6px;
    -webkit-overflow-scrolling:touch;
  }
  #hud-tabs::-webkit-scrollbar{ display:none; }
  .tab{ padding:13px 12px; font-size:11px; letter-spacing:.12em; flex:0 0 auto; }
  .hud-case strong{ max-width:min(42vw,190px); font-size:13.5px; }
  .hud-btn{ width:38px; height:38px; font-size:17px; }
  .meter{ gap:5px; }
  .meter-label{ display:none; }
  .meter-bar{ width:34px; height:4px; }
  .meter-val{ font-size:11px; min-width:0; }

  /* ---------------- field ---------------- */
  /* min-width:0 — without it the chip strip sizes the grid track to its own
     content and drags the whole field layout wider than the phone */
  .field{ grid-template-columns:minmax(0,1fr); height:100%; grid-template-rows:auto 1fr; }
  .field-nav, .field-main{ min-width:0; }
  .field-nav{
    display:flex; gap:7px; overflow-x:auto; overflow-y:hidden; padding:8px 10px;
    border-right:0; border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .field-nav::-webkit-scrollbar{ display:none; }
  .loc-btn{
    width:auto; flex:0 0 auto; white-space:nowrap; border-left:0;
    border:1px solid var(--line); border-radius:3px; background:var(--ink-700);
    padding:8px 13px; font-size:14px; text-align:center;
  }
  .loc-btn small{ display:none; }
  .loc-btn.active{ border-color:var(--blood); background:rgba(192,74,63,.14); color:#fff; }
  .loc-btn .cnt{ float:none; margin-left:7px; }
  .field-main{ min-height:0; }
  .scene-hold{ height:min(38vh,300px); }

  /* a marker is armed by the first tap and opened by the second, so a
     stray touch never costs fifteen minutes */
  .hotspot .ring{ width:40px; height:40px; }
  .hotspot .ring svg{ width:21px; height:21px; }
  .hotspot .lbl{
    display:block; left:50%; top:auto; bottom:calc(100% + 7px); transform:translateX(-50%);
    opacity:0; font-size:9.5px; padding:5px 8px; max-width:44vw; white-space:normal; text-align:center;
  }
  .hotspot.armed{ z-index:6; }
  .hotspot.armed .lbl{ opacity:1; }
  .hotspot.armed .ring{ background:var(--sodium); border-color:#fff; }
  .hotspot.armed .ring svg{ color:#12100a; }
  .hotspot .go{
    position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%);
    display:none; white-space:nowrap; border:1px solid var(--sodium); background:rgba(7,9,12,.94);
    color:var(--sodium); padding:6px 10px; font:600 9.5px/1 var(--sans); letter-spacing:.14em;
    text-transform:uppercase; cursor:pointer;
  }
  .hotspot.armed .go{ display:block; }
  /* the caption sits under the picture on a phone, so the wash that makes it
     readable over a photograph on a desktop would only darken the frame here */
  .scene-block .scene-hold::after{ display:none; }
  .scene-title{ position:static; padding:12px 15px 10px; }
  .scene-hold:hover .scene-title{ opacity:1; }
  .scene-title h2{ font-size:21px; text-shadow:none; }
  .scene-title p{ font-size:13.5px; text-shadow:none; }
  .finding{ padding:16px 15px 40px; }
  .finding-hd h3{ font-size:19px; }

  /* ---------------- interview ---------------- */
  .iv{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .iv-side{
    display:grid; grid-template-columns:92px 1fr; align-items:stretch;
    border-right:0; border-bottom:1px solid var(--line); height:auto; overflow:hidden;
  }
  .iv-pic{ position:relative; inset:auto; height:116px; overflow:hidden; }
  .iv-pic svg{ width:100%; height:auto; margin-top:-6px; }
  .iv-pic img.real-portrait{ width:100%; height:100%; object-fit:cover; }
  .iv-side .fade{ display:none; }
  .iv-side .who{ position:static; padding:11px 13px; background:none; }
  .iv-side h3{ font-size:18px; }
  .iv-side .role{ font-size:8.5px; }
  .composure{ margin-top:8px; }
  .iv-main{ padding:16px 15px 44px; min-height:0; }
  .topic-btn{ font-size:15px; padding:12px 13px; }
  .topic-btn .cost{ float:none; display:block; margin-bottom:3px; }
  .claim q{ font-size:15px; }
  .claim .acts .btn{ flex:1 1 auto; }
  .line p{ font-size:15.5px; }
  .ev-picker{ grid-template-columns:1fr; max-height:52vh; }
  .ev-pick{ padding:12px 11px; }

  /* ---------------- evidence · people ---------------- */
  .ev-grid{ grid-template-columns:1fr; }
  .ppl-grid{ grid-template-columns:1fr; }
  /* a narrower column on a phone; the picture still fills it, however
     tall the bio makes the card */
  .ppl-card .pic{ flex:0 0 84px; min-height:112px; }
  .ppl-card .info{ padding:11px 12px 11px 0; }
  .filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:none; }
  .filters::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; padding:10px 13px; min-height:34px; }

  /* ---------------- board ---------------- */
  /* the tray stays put, the pile scrolls under it; one column at the
     narrowest widths so a card is a real tap target, not a stamp */
  .board-tray{ padding:10px 12px 11px; }
  .tray-head{ margin-bottom:7px; gap:9px; flex-wrap:wrap; }
  .tray-note{ font-size:12.5px; }
  .tray-row{ flex-wrap:wrap; gap:8px; }
  .tray-slot{ flex:1 1 calc(50% - 20px); min-height:44px; padding:9px 10px; }
  .tray-slot .slot-name{ font-size:12.5px; }
  .tray-acts{ flex:1 0 100%; }
  .tray-acts .btn{ flex:1 1 auto; min-height:42px; justify-content:center; }
  .board-scroll{ padding:12px 12px 16px; -webkit-overflow-scrolling:touch; }
  .board-tools{ gap:9px; margin-bottom:11px; }
  .board-search{ flex:1 0 100%; padding:11px 12px; font-size:16px; }
  .board-chips{ overflow-x:auto; flex:1 0 100%; scrollbar-width:none; }
  .board-chips::-webkit-scrollbar{ display:none; }
  .board-chips .chip{ flex:0 0 auto; min-height:34px; }
  .board-grid{ grid-template-columns:1fr; gap:10px; }
  .bcard{ padding:13px 13px 14px; }
  .bc-top h5{ font-size:14.5px; }
  .bc-sum{ font-size:12.8px; -webkit-line-clamp:2; }
  .board-bar{ flex-wrap:wrap; gap:8px; padding:10px 12px calc(10px + var(--safe-b)); }
  .board-hint{ flex:1 0 100%; font-size:12.5px; }
  /* the how-to tail belongs on a wide screen; the tray says it on a phone */
  .board-hint .faint{ display:none; }
  .board-bar .btn{ flex:1 1 auto; padding:11px 10px; min-height:38px; }


  /* ---------------- case list ---------------- */
  .series-head{ margin-top:24px; gap:10px; }
  .series-name h3{ font-size:20px; }
  .series-blurb{ font-size:13.5px; }
  .series-facts{ gap:12px; margin-bottom:12px; }
  /* the sheet keeps its border on a phone but gives the words their width
     back: a folder with wide margins is a narrower folder */
  .series.set{ padding:14px 12px 12px; margin-top:22px; }
  .series-foot{ padding-top:12px; font-size:12.5px; }
  .series-foot .btn{ flex:1 1 100%; }
  .case-rest{ gap:11px; padding:12px 2px 2px; }
  .case-rest .case-no{ min-width:26px; }
  .case-rest-line{ font-size:12.8px; }
  .case-row{ gap:11px; padding:13px 2px 14px; flex-wrap:wrap; }
  .case-no{ flex:0 0 26px; font-size:11px; }
  /* The stamp is meant to sit on its own line down here — that is what the
     order and the indent below are for — but it only goes there if it is
     pushed. Left to itself it fits beside the title on a 390px screen and
     stays, and the text has a third of the row to live in: a title over
     two lines, a subtitle over three, and the figures broken one to a
     line. Claiming the whole line but for the file number is what sends
     it down and gives the words the width they were written for. */
  .case-body{ flex:1 1 calc(100% - 37px); }
  /* A file the story has not reached yet is five dashes and, once, a
     sentence: it does not need the room, and taking it leaves a hole
     across the middle of the row with the stamp stranded beyond it.
     Those rows keep the stamp where it was, on the line beside them. */
  .case-row.locked .case-body{ flex:1 1 auto; }
  .case-body > b{ font-size:17px; }
  .case-line{ font-size:12.8px; }
  /* Down on its own line, but still against the right edge: the states
     stay a column somebody can run an eye down, which is what they are
     for, without taking the words' width away to do it. */
  .case-state{ order:3; margin-left:auto; align-self:flex-start; }
  /* a phone gets the offer stacked: the button is the full width of the
     row rather than a target squeezed against a price */
  .offer{ gap:12px; padding:12px 13px 13px; }
  .offer-buy{ flex:1 1 100%; justify-content:space-between; }
  .case-foot .btn{ flex:1 1 auto; }

  /* ---------------- main menu ---------------- */
  .home-inner{ padding:calc(64px + var(--safe-t)) 16px 7vh; gap:18px; }
  .home-corner{ top:calc(12px + var(--safe-t)); right:12px; }
  .menu-item{ padding:14px 4px; gap:13px; }
  .menu-text b{ font-size:17.5px; }
  .menu-item.lead .menu-text b{ font-size:21px; }
  .menu-text span{ font-size:12.2px; }
  .menu-go{ opacity:1; }

  /* ---------------- service record ---------------- */
  .prof-who{ padding:13px 14px; }
  .prof-who .btn{ width:100%; }
  .stat-row{ grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; }
  .stat-tile{ padding:11px 12px; }
  .stat-tile b{ font-size:22px; }
  .prof-filters{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:4px; }
  .prof-filters::-webkit-scrollbar{ display:none; }
  .prof-filters .chip{ flex:0 0 auto; min-height:34px; }
  .run-head{ flex-wrap:wrap; gap:9px 12px; }
  .run-name{ flex:1 1 60%; }
  .run-name b{ font-size:17px; }
  .run-facts{ grid-template-columns:repeat(2,1fr); }

  /* ---------------- timeline ---------------- */
  .tl-table th{ padding:8px 5px; font-size:8.5px; letter-spacing:.1em; }
  .tl-table td{ padding:5px 4px; }
  .tl-who b{ font-size:13px; }
  .tl-who .avatar{ display:none; }
  .tl-table select{ font-size:16px; padding:9px 6px; min-width:104px; }  /* 16px: iOS will not zoom */
  .tl-hints li{ font-size:13.5px; }

  /* ---------------- accusation · verdict ---------------- */
  .acc-q h3, .acc-q h4{ font-size:18px; }
  .acc-opt{ padding:13px 14px; font-size:15px; }
  .chain-pool{ grid-template-columns:1fr; }
  .verdict-hd{ padding:30px 12px 20px; }
  .verdict-hd .stampbig{ font-size:14px; letter-spacing:.2em; padding:9px 16px; }
  .score-row{ gap:16px; }
  .score-box b{ font-size:27px; }

  /* ---------------- first screen: the file cover ---------------- */
  .cover-stage{ padding:3vh 12px 6vh; }
  .dossier-sheet{ padding:26px 20px 22px; }
  .dossier-tab{ left:20px; top:-25px; padding:7px 16px 8px; letter-spacing:.2em; }
  .dossier-head{ flex-direction:column; gap:3px; font-size:9.5px; letter-spacing:.17em; }
  .dossier-title{ letter-spacing:.04em; }
  .dossier-sub{ font-size:9px; letter-spacing:.22em; }
  .dossier-about{ font-size:13.5px; line-height:1.55; }
  .dossier-rule{ margin:18px 0 16px; }
  .dossier-ask{ font-size:22px; }
  /* ---------------- title · brief · case list ---------------- */
  .title-inner{ padding:26px 10px; }
  /* .62em of tracking does not fit a phone: the subtitle wrapped onto a second
     line with no room between them and read as one smeared word */
  .logo-sub{ letter-spacing:.34em; line-height:1.7; padding-left:.34em; }
  .title-blurb{ font-size:16px; margin-bottom:26px; }
  .title-actions .btn{ flex:1 1 44%; }
  .brief-hero{ height:200px; }
  .brief-hero .cap{ padding:18px 16px; }
  .brief-body{ gap:22px; }
  .case-grid{ grid-template-columns:1fr; }
  .case-card .art{ height:112px; }
  .art-grid{ grid-template-columns:1fr; }
  .pick-facts{ grid-template-columns:repeat(2,1fr); }
  .logo.small{ font-size:clamp(22px,7.6vw,40px); }

  /* ---------------- chrome ---------------- */
  #toaster{ left:10px; right:10px; bottom:calc(10px + var(--safe-b)); align-items:stretch; }
  .toast{ max-width:none; }
  .modal-scrim{ padding:10px; align-items:flex-end; }
  .modal{ width:100%; max-height:88vh; }
  .modal .panel-bd{ padding:16px; }
  .modal-actions{ padding:0 16px 14px; }
  .modal-actions .btn{ flex:1 1 auto; }
  /* the row is a <label>, so the whole strip is tappable; the controls
     themselves are still enlarged for a thumb */
  .set-row{ gap:12px; padding:13px 0; }
  .set-row input[type=checkbox]{ width:24px; height:24px; }
  .set-row input[type=range]{ height:30px; }

  /* ---------------- field manual ---------------- */
  .tut-rail{ padding:16px 14px 12px; }
  .tut-toc{ display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .tut-toc::-webkit-scrollbar{ display:none; }
  .tut-toc li{ flex:0 0 auto; }
  .tut-tocbtn{
    width:auto; white-space:nowrap; border-left:0; border:1px solid var(--line);
    border-radius:3px; background:var(--ink-700); padding:8px 12px; font-size:13.5px;
  }
  .tut-tocbtn.on{ border-color:var(--blood); background:rgba(192,74,63,.14); }
  .tut-railft{ margin-top:14px; }
  .tut-editions{ grid-template-columns:1fr 1fr; }
  .tut-head h1{ font-size:25px; }
  .tut-steps li{ font-size:15px; padding-left:34px; }
  .tut-demo-bd{ font-size:14px; }
  .tut-demo .panel-hd{ font-size:8.5px; letter-spacing:.12em; padding:10px 12px; }
  .tut-demo .panel-hd > span{ flex:1 0 100%; }
  .tut-demo-acts{ flex:1 0 100%; }
  .tut-demo-acts .btn{ flex:1 1 0; min-width:0; }
  .tut-actgrid{ grid-template-columns:1fr; }
  .tut-hudbar{ flex-wrap:wrap; gap:10px; }
  .tut-scorerow span{ flex:0 0 96px; font-size:12.5px; }
  .tut-foot .btn{ flex:1 1 auto; min-width:0; }
}

/* very narrow: drop the case title, keep the meters.

   And make the six tabs fit. The strip scrolls, but a scrolling strip
   with no visible bar reads as a strip that ends — and the tab hanging
   half off the right edge was ACCUSE, the one control the whole file
   builds towards. Tightening the letter-spacing buys back more room
   than the padding does and costs less: these are six short words in
   capitals, and .06em still holds them apart. */
@media (max-width:400px){
  .hud-case strong{ display:none; }
  .tab{ padding:13px 7px; font-size:10px; letter-spacing:.06em; }
}

/* touch devices of any width: no hover affordances to rely on */
@media (hover: none){
  .case-card:hover, .ev-card:hover, .ppl-card:hover, .art-card:hover{ transform:none; }
  .hotspot:hover .ring{ transform:none; }
  .scene-hold:hover .scene-title{ opacity:1; }
}

/* landscape phone: the two-row HUD would eat half the screen */
@media (max-height:520px) and (orientation:landscape){
  :root{ --hud-h:52px; }
  #hud{ flex-wrap:nowrap; height:calc(52px + var(--safe-t)); }
  #hud-tabs{ flex:1 1 auto; border-top:0; margin:0; height:auto; }
  .hud-left, .hud-right{ height:auto; }
  .scene-hold{ height:min(52vh,220px); }
  .iv-pic{ height:96px; }
}