/* LaunchDetect public globe — token names copied from docs/mockups/orbital-warning-v6.html
   and sites/stm token naming style, so a future theme merge is trivial. */
:root{
  --bg:#07090f; --panel:rgba(10,13,20,.92); --line:rgba(255,255,255,.10);
  --fg:#eef2f8; --muted:#98a4b8; --dim:#8a94a6;
  --accent:#ffb02e; --warn:#ff5a3c; --ok:#39d98a; --okband:rgba(57,217,138,.10);
  --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'Syne',system-ui,sans-serif;
  /* Header and status-strip heights. Every panel positioned below the strip
     derives its offset from these, so changing the strip cannot silently
     leave .head1/.left/.insp/.napkin overlapping it. */
  --hdr:52px; --strip:76px;
}
[data-theme=light]{
  --bg:#eef1f6; --panel:rgba(255,255,255,.96); --line:rgba(0,0,0,.14);
  --fg:#0b1220; --muted:#3f4a5c; --dim:#5b6577;
  --accent:#7a4a00; --warn:#b42c14; --ok:#0d6e40; --okband:rgba(13,110,64,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:13px}
#cesiumContainer{position:fixed;inset:0}
.cesium-viewer-bottom,.cesium-viewer-toolbar,.cesium-viewer-animationContainer,
.cesium-viewer-timelineContainer,.cesium-viewer-fullscreenContainer{display:none!important}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.tl .wrap:focus-within{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* Phase 82-04 (SELL-08): embed.html reuses this stylesheet + globe.js
   verbatim (same DOM ids -- globe.js's getElementById calls are not
   null-guarded), hiding every panel except a restyled `.left` aside used
   as the minimal status line, via this one class. No separate
   embed-specific CSS/JS to keep in sync with the full page. */
body.embed header,body.embed .world,body.embed .head1,
body.embed .insp,body.embed .tl,body.embed .napkin,body.embed .ops{display:none!important}
body.embed .left{position:fixed;left:12px;bottom:12px;top:auto;right:auto;width:auto;
  max-width:calc(100% - 24px);padding:10px 14px;font-size:11px}
body.embed .left details,body.embed .left .now{display:none}
body.embed .left h2{font-size:14px;margin:2px 0}

/* Phase 82-03 (SELL-04): ?og=1 mode for the og-image renderer -- hides
   every panel so the 1200x630 screenshot is just the framed globe/volume,
   with no camera animation (js/globe.js checks OG_MODE to fly instantly). */
body.og header,body.og .world,body.og .head1,body.og .left,
body.og .insp,body.og .tl,body.og .napkin,body.og .ops{display:none!important}

header{position:fixed;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:22px;
  padding:0 20px;background:var(--panel);border-bottom:1px solid var(--line);z-index:6}
.brand{font-weight:800}.brand span{color:var(--accent)}
.brand small{font-weight:400;color:var(--muted);margin-left:10px}
header nav{margin-left:auto;display:flex;gap:18px;align-items:center;color:var(--muted)}
header nav a.cta{color:var(--fg);border:1px solid var(--line);padding:6px 12px;border-radius:6px}
button.tgl{background:transparent;border:1px solid var(--line);color:var(--fg);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:12px}

.world{position:fixed;top:var(--hdr);left:0;right:0;height:var(--strip);display:grid;
  /* 6 metric columns + the follow box. Heights and offsets come from the
     --hdr/--strip variables (declared on :root) so the panels below the strip
     cannot drift out of sync with it again. */
  grid-template-columns:repeat(6,minmax(0,1fr)) 226px;background:var(--panel);
  border-bottom:1px solid var(--line);z-index:5;padding:7px 16px 0}
.w{padding:4px 10px 0 0;border-right:1px solid var(--line);margin-right:8px;min-width:0;
  display:flex;flex-direction:column;overflow:hidden}
/* Headings wrap to two lines instead of truncating. At 1280 a single line of
   "Launches with untracked debris" needs ~204px against a ~155px column, so
   nowrap guaranteed an ellipsis on half the strip (measured by
   test/header_layout.puppeteer.js). Two clamped lines fit at every width. */
.w .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;line-height:1.25;
  text-transform:uppercase;color:var(--muted);white-space:normal;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  min-height:22px}
.w .v{font-size:19px;font-weight:800;margin-top:1px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;line-height:1.15}
/* Secondary text sits on its OWN line inside the cell. Inline after the value
   it overflowed the cell and ran under the Follow input. */
.w .v small{display:block;font-size:10px;font-weight:400;color:var(--muted);
  margin-left:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w .v.red{color:var(--warn)}.w .v.amb{color:var(--accent)}
/* The countdown is a fixed-width 10-character string ("T-02:50:57"), which
   overflowed a 154px column at the 19px proportional size. Monospace at 16px
   fits every width and keeps the digits from jittering as they tick. */
.w .v.cd{font-family:var(--mono);font-size:16px;letter-spacing:-.02em;font-weight:700}
.w.click{cursor:pointer}.w.click:hover .k{color:var(--fg)}
.w .k u{text-decoration:underline dotted;text-underline-offset:2px}
/* Next-launch cell: the sub-label and Locate button share one compact line
   under the countdown so the strip keeps its fixed 60px height. */
/* Sub-label and Locate share one line; the label yields width to the button
   rather than sliding under it. */
.w .nl-row{display:flex;align-items:center;gap:6px;min-width:0;margin-top:1px}
.w .nl-sub{font-family:var(--mono);font-size:10px;color:var(--muted);
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w .nl-loc{flex:0 0 auto;font:10px var(--mono);
  background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:5px;
  padding:2px 7px;cursor:pointer}
.w .nl-loc:hover{border-color:var(--accent);color:var(--accent)}
.w .nl-loc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.w .nl-loc[hidden]{display:none}

.napkin{position:fixed;top:calc(var(--hdr) + var(--strip) + 6px);left:calc(16px + 5*(100% - 258px)/6 - 120px);width:420px;padding:14px;display:none;z-index:8}
.napkin.show{display:block}.napkin h4{margin:0 0 2px;font-size:14px}
.napkin p{margin:0 0 8px;font-size:11px;color:var(--muted);line-height:1.45}
.napkin table{font-size:11px;width:100%}
.napkin td:last-child,.napkin th:last-child{text-align:right}
.napkin tfoot td{font-weight:700;color:var(--fg);border-top:2px solid var(--line)}
.napkin .x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--muted);cursor:pointer}

.follow{padding-top:4px}.follow div{display:flex;gap:6px}
.follow input{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:6px;padding:7px 10px;font:12px var(--mono);min-width:0}
.follow button{background:var(--fg);color:var(--bg);border:0;border-radius:6px;padding:7px 10px;font:600 12px var(--sans);cursor:pointer}
.follow small{display:block;color:var(--dim);font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.panel{background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:12px;z-index:4}
.head1{position:fixed;top:calc(var(--hdr) + var(--strip) + 12px);left:16px;width:410px;padding:10px 14px;font-size:14px;line-height:1.4;font-weight:600;z-index:4}
.head1 b{color:var(--warn)}.head1 small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:4px}
.left{position:fixed;top:calc(var(--hdr) + var(--strip) + 120px);left:16px;width:410px;max-height:calc(100% - var(--hdr) - var(--strip) - 262px);overflow:auto;padding:14px 16px}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
/* single-event page (2026-08-30): the chip switcher is gone; one quiet link to history */
.prev-launches{font:11px var(--mono);color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line)}
.prev-launches:hover,.prev-launches:focus-visible{color:var(--fg)}
.evidence{margin-top:8px;font-size:11px;line-height:1.5;color:var(--dim)}
.evidence b{color:var(--muted);font-weight:600}

.chip{border:1px solid var(--line);border-radius:20px;padding:4px 10px;font:11px var(--mono);color:var(--muted);cursor:pointer}
.chip.on{border-color:var(--accent);color:var(--fg)}
.chip i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-right:6px;vertical-align:middle}
.chip.pulse{border-color:var(--warn);box-shadow:0 0 0 2px rgba(255,90,60,.25);animation:ldChipPulse 1.4s ease-in-out infinite}
@keyframes ldChipPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){.chip.pulse{animation:none}}

.sat-unavailable-note{position:fixed;bottom:10px;left:10px;z-index:6;background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:5px 10px;font:11px var(--mono);color:var(--dim)}
h2{font-size:17px;margin:0}.sub{color:var(--muted);font-size:12px;margin:2px 0 12px}

.now{border:1px solid var(--accent);border-radius:10px;padding:10px 12px;margin-bottom:14px;position:relative}
.now .mode{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.now .mode.pv{color:var(--warn)}
.now .clock{font:600 26px var(--mono);margin:2px 0 4px}
.now .what{color:var(--muted);line-height:1.45;font-size:12px}.now .what b{color:var(--fg)}
.now button{position:absolute;top:10px;right:10px;background:none;border:1px solid var(--line);color:var(--fg);border-radius:6px;padding:3px 8px;font:11px var(--sans);cursor:pointer;display:none}
.now.pv button{display:block}
h3{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}

.next{list-style:none;margin:0 0 14px;padding:0}
.next li{display:grid;grid-template-columns:64px 1fr auto;gap:8px;padding:7px 6px;border-top:1px solid var(--line);align-items:center;cursor:pointer;border-radius:6px}
.next li:hover{background:rgba(255,255,255,.03)}
.next li.sel{background:rgba(255,176,46,.08)}
.next .t{font:12px var(--mono);color:var(--muted)}
.next .n{font-weight:600}.next .n small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:1px}
.next .in{font:11px var(--mono);color:var(--accent);white-space:nowrap}
.next li.hot .in{color:var(--warn)}
.next li.ms .n{font-weight:400;color:var(--muted)}.next li.ms .in{color:var(--dim)}
.crew{display:inline-block;font:10px var(--mono);color:var(--warn);border:1px solid var(--warn);border-radius:3px;padding:0 4px;margin-left:6px;vertical-align:middle}
.next li.why-row{grid-template-columns:1fr;cursor:default;background:rgba(255,255,255,.03);border-top:0;padding-top:0}
.next li.why-row p{margin:0;font-size:11px;color:var(--muted);line-height:1.5}
#nextTruncNote{font-weight:400;color:var(--dim);text-transform:none;letter-spacing:0;margin-left:6px}
.life{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.life li{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--muted)}
.life li b{color:var(--fg);min-width:70px;font:11px var(--mono)}
.life li.pending{color:var(--dim);font-style:italic}
.since canvas.has-ir{border-color:var(--accent)}

details{border-top:1px solid var(--line);padding-top:8px}
summary{cursor:pointer;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);list-style:none}
summary::after{content:' +';color:var(--dim)}details[open] summary::after{content:' −'}
.since{display:grid;grid-template-columns:120px 1fr;gap:10px;margin-top:10px}
.since canvas{width:120px;height:66px;border-radius:4px;border:1px solid var(--line)}
.since .s{font-size:12px;color:var(--muted);line-height:1.5}.since .s b{color:var(--fg)}.since .s .mono{color:var(--fg)}
.trust{margin-top:10px;font-size:11px;color:var(--dim);line-height:1.5}.trust b{color:var(--ok)}
.perm{margin-top:12px;display:flex;gap:6px;align-items:center;font:11px var(--mono);color:var(--dim)}
.perm b{flex:1;color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perm button{background:none;border:1px solid var(--line);color:var(--muted);border-radius:4px;padding:2px 6px;font:10px var(--mono);cursor:pointer}

.insp{position:fixed;right:16px;top:calc(var(--hdr) + var(--strip) + 14px);width:290px;padding:14px;display:none}
.insp.show{display:block}.insp h4{margin:0;font-size:15px}
.insp .id{font:11px var(--mono);color:var(--muted);margin:2px 0 10px}
.insp .kv{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;font-size:12px}
.insp .kv span:nth-child(odd){color:var(--muted);font:11px var(--mono)}
.insp .act{display:flex;gap:6px;margin-top:12px}
.insp .act a{flex:1;text-align:center;border:1px solid var(--line);border-radius:6px;padding:7px;font-weight:600;font-size:12px}
.insp .act a.p{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.insp .x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--muted);cursor:pointer}

.tl{position:fixed;left:16px;right:16px;bottom:16px;padding:10px 18px 8px;z-index:4}
.tl .head{display:flex;align-items:baseline;gap:14px;margin-bottom:2px;white-space:nowrap;overflow:hidden}
.tl .head b{font-size:13px}.tl .head span{font:11px var(--mono);color:var(--muted)}
.tl .key{margin-left:auto;display:flex;gap:14px;font:11px var(--mono);color:var(--muted)}
.key i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.key .z{width:14px;height:6px;border-radius:2px;background:rgba(255,90,60,.55)}
.tl .wrap{position:relative;height:78px}.tl svg{width:100%;height:78px;display:block;overflow:visible}
.tl input{position:absolute;left:0;right:0;top:30px;height:20px;width:100%;margin:0;opacity:0;cursor:ew-resize}

.ops{position:fixed;top:60px;right:20px;width:320px;padding:14px;display:none;z-index:7}
.ops.show{display:block}.ops h4{margin:0 0 4px;font-size:14px}
.ops p{margin:0 0 8px;font-size:12px;color:var(--muted);line-height:1.4}
.ops ul{margin:0;padding:0;list-style:none;font-size:12px}
.ops li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.ops li b{display:block;color:var(--fg)}.ops li small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.ops .go{flex:none;border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-weight:600;font-size:12px;color:var(--fg)}
.ops li:first-child .go{background:var(--accent);color:#000;border-color:var(--accent)}
/* Light theme's --accent (#7a4a00) is a dark brown meant to sit ON the light
   body background, not to have black text sit ON it — black-on-#7a4a00 is
   2.81:1, below AA 4.5:1 for normal text. White text on that same brown
   background is 7.38:1. Dark theme's --accent (#ffb02e) already passes with
   black text, so this is a light-theme-only override. */
[data-theme=light] .ops li:first-child .go{color:#fff}

.noscript-banner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--fg);font-family:var(--sans);padding:24px;text-align:center;z-index:9999}

@media (max-width:1100px){
  /* 2026-08-30: this used to be `.left,.insp{display:none}` plus a two-cell
     strip, which deleted the page's main content on every tablet and phone.
     Narrow-but-not-phone widths now just tighten the grid; the phone block
     below owns the small-screen layout. */
  .world{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:min-content}
  .insp{max-width:min(290px,calc(100vw - 32px))}
  /* backdrop-filter:blur() over the Cesium WebGL canvas renders panels as
     near-opaque dark instead of the intended translucent theme color at
     narrow viewport widths (confirmed: the map tile underneath is the
     correctly-colored light-theme gray, not black — this is a rendering
     artifact of blur-sampling a WebGL canvas at this canvas resolution, not
     an alpha-math or backdrop-color issue). A solid opaque panel color
     sidesteps the blur sampling entirely and always renders correctly. */
  .panel{backdrop-filter:none}
  :root{--panel:#0a0d14}
  [data-theme=light]{--panel:#ffffff}
  .head1{width:calc(100vw - 32px);max-width:410px}
}

/* ---------------------------------------------------------------------------
   Phones and small tablets (2026-08-30).

   The previous rule below 1100px hid `.left` and `.insp` outright and dropped
   the strip to two cells, so a phone got NO event panel, NO NEXT list, no
   permalink and no next-launch countdown -- the page's actual content. It
   also left four controls under the 44x44 touch minimum and overlapped the
   brand with the strip. Measured by test/mobile_layout.puppeteer.js.

   Layout here: header, a horizontally scroll-snapped strip that keeps ALL
   metrics reachable, the headline, the globe, a compact timeline, and the
   event panel as a bottom sheet with its own scroll.
--------------------------------------------------------------------------- */
@media (max-width:760px){
  :root{--hdr:46px; --strip:78px}

  header{height:var(--hdr);gap:10px;padding:0 10px}
  .brand{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:15px}
  .brand small{margin-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}
  header nav{gap:8px}
  /* 44x44 minimum touch targets. */
  button.tgl{min-width:44px;min-height:44px;padding:4px 10px}
  header nav a.cta{min-height:44px;display:flex;align-items:center;padding:0 12px}

  /* All six metrics stay available via horizontal scroll-snap instead of
     being hidden. The page itself must not scroll sideways -- only this. */
  .world{grid-template-columns:none;display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 10px 0;gap:0}
  .world::-webkit-scrollbar{display:none}
  .w,.w.click{flex:0 0 47%;scroll-snap-align:start;margin-right:10px;padding-right:10px}
  /* The countdown is the most time-sensitive figure, and in a scroll-snap
     strip anything past the second cell is off-screen on load. */
  #wNextLaunchWrap{order:-1}
  .w:nth-child(n+3){display:flex}      /* was: hidden below 1100px */
  /* .w is a flex COLUMN, so in a fixed-height strip the value shrank to
     height 0 and vanished (measured, not guessed). Nothing in the cell may
     flex-shrink. */
  .w .k{flex:none;min-height:20px;font-size:9px}
  .w .v{flex:none;font-size:17px;line-height:1.2}
  .w .v small{flex:none}
  .w .nl-row{flex:none}
  .w .v.cd{font-size:15px}
  .follow{flex:0 0 92%;scroll-snap-align:start;padding-top:2px}
  .follow input{min-height:44px}
  .follow button{min-height:44px;padding:0 14px}
  .nl-loc{min-height:32px;padding:4px 10px}

  /* The headline and the event sheet together covered almost the whole
     screen, leaving no map and no readable indicators (reported 2026-08-31).
     Both are collapsed by default on a phone and expand on tap. */
  .head1{position:fixed;top:calc(var(--hdr) + var(--strip) + 6px);left:8px;right:8px;
    width:auto;max-width:none;font-size:12.5px;padding:8px 34px 8px 11px;line-height:1.3;
    cursor:pointer;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;
    -webkit-box-orient:vertical}
  /* The provenance sub-line is a block child, and inside a -webkit-box it
     painted a sliver below the clamped panel. Collapsed it is simply hidden;
     expanded it comes back. */
  .head1 small{display:none}
  .head1.open small{display:block;margin-top:4px}
  .head1.open{-webkit-line-clamp:unset;display:block;max-height:60vh;overflow:auto}
  .head1::after{content:'▾';position:absolute;top:6px;right:10px;color:var(--muted);font-size:12px}
  .head1.open::after{content:'▴'}

  /* Event panel becomes a bottom sheet with its own scroll, sitting above the
     timeline. It is the main content and must never be display:none again. */
  /* Collapsed the sheet shows only its handle + title row; expanded it takes
     a bounded slice and scrolls internally. The globe keeps the middle of the
     screen either way. */
  .left{display:block;position:fixed;left:8px;right:8px;bottom:calc(var(--tl-h) + 14px);
    top:auto;width:auto;max-height:3.6em;overflow:hidden;-webkit-overflow-scrolling:touch;
    padding:8px 12px 10px;z-index:6;transition:max-height .18s ease}
  .left.open{max-height:52vh;overflow:auto}
  .left::before{content:'';display:block;width:36px;height:4px;border-radius:2px;
    background:var(--line);margin:0 auto 7px}
  .left .sheet-peek{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    font:12px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden}
  .left .sheet-peek b{color:var(--fg);font:600 13px var(--sans);overflow:hidden;text-overflow:ellipsis}
  .left .sheet-peek i{color:var(--accent);font-style:normal}
  .left.open .sheet-peek{display:none}
  .left .sheet-toggle{position:absolute;top:0;left:0;right:0;height:3.6em;
    background:none;border:0;cursor:pointer;z-index:1}
  .left h2{font-size:16px;margin:0}
  .left h2{font-size:17px}
  .left h3{margin-top:10px}
  .next li{padding:8px 0}

  /* Compact timeline; the scrubber gets a real touch height. */
  .tl{--tl-h:74px;left:8px;right:8px;bottom:8px;padding:8px 10px 6px}
  .tl .key{display:none}
  .tl .head{font-size:11px}
  .tl .wrap{height:46px}
  #scrub{height:44px}

  /* Geometry only -- visibility stays governed by `.insp.show`. Setting
     display:block here made the inspector open on page load. */
  .insp{left:8px;right:8px;top:auto;bottom:calc(var(--tl-h) + 14px);
    width:auto;max-height:42vh;overflow:auto;z-index:9}
  .insp.show{display:block}
  .napkin{left:8px;right:8px;width:auto;top:auto;bottom:calc(var(--tl-h) + 14px);max-height:52vh;overflow:auto}
  .ops{left:8px;right:8px;width:auto;top:calc(var(--hdr) + 6px);max-height:70vh;overflow:auto}
}

/* --tl-h is referenced by the sheet offsets above; declare a default so the
   calc() resolves at every width, not only inside the phone block. */
:root{--tl-h:74px}

@media (max-width:560px){
  /* The tagline is the first thing to go when the brand and the nav collide. */
  .brand small{display:none}
}


/* Touch-target minimums for ANY coarse pointer, keyed off the input device
   rather than the viewport width -- an iPad at 768px is a touch device but
   sits above the phone breakpoint, and its controls were 19-30px tall
   (WCAG 2.2 target-size; measured by test/mobile_layout.puppeteer.js). */
@media (pointer:coarse){
  button,
  a.cta,
  input,
  [role="button"]{min-height:44px}
  button.tgl{min-width:44px}
  .w.click{min-height:44px}
  .nl-loc{min-height:44px;padding:0 12px}
  .follow input,.follow button{min-height:44px}
  /* Small inline affordances get their hit area grown without changing how
     they look, so the panel layout is unaffected. */
  .prev-launches,
  .perm button,
  .insp .x,
  .napkin .x{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .perm button{min-width:44px}
  .insp .x,.napkin .x{min-width:44px}
  #scrub{height:44px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}