/* VARÐA on a phone (≤ 900 px, where hub.js and map.js turn `small`): the map full-bleed, a compact header, and the
   panels in one bottom sheet that snaps to peek, half and full, with a tab each for the card, the projects and the
   cameras (js/hub/mobile.js drives it). Wider than that the sheet is only a wrapper, and none of this applies. */
.sheet { display: contents; }
.sheet-head, .find { display: none; }

@media (max-width: 900px) {
  html { overscroll-behavior: none; }
  .display { --top: calc(52px + env(safe-area-inset-top)); --tl-h: 40px; --bar-h: calc(var(--top) + var(--tl-h)); /* the header, and the timeline's row under it */
    --peek: calc(154px + env(safe-area-inset-bottom)); --half: 50dvh; --head-h: 63px; /* the head: its border, the grip, the tabs */
    --feeds-vis: calc(var(--head-h) + 46px + min(.82 * (100vw - 28px), 400px) * 9 / 16 + env(safe-area-inset-bottom)); /* the head and the strip of monitors */
    position: fixed; inset: 0; height: auto; min-height: 0; overflow: clip; } /* clip: a focused search can't scroll it */

  /* the map, centred in what the header and the sheet leave open; it moves only when the sheet settles */
  .stage { transform: translateY(calc((var(--bar-h) - var(--peek)) / 2)); transition: opacity .35s ease-out, transform .38s cubic-bezier(.2, .8, .2, 1); }
  .display:has(.sheet:is([data-snap="half"], [data-snap="full"])) .stage { transform: translateY(calc((var(--bar-h) - var(--half)) / 2)); }
  .no-gl .stage { transform: none !important; } /* no map to centre: the note stays put */
  .no-gl .gl-note { top: 32%; left: 10%; right: 10%; }

  /* the header: the emblem and the name, the resume, the way back to the front and the tour's ? (the front: the emblem
     and VARÐA, and the tour, over its own column, which carries the name) */
  .bar { z-index: 30; height: var(--top); gap: 6px; padding: env(safe-area-inset-top) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));
    background: #000; border-bottom: 1px solid var(--o-line); pointer-events: auto; }
  .sector, .clock, .cond, #radio, .org, .tl-label { display: none; }
  html.quiet .org { display: inline; }
  .who { font-size: min(19px, 4vw); margin-right: -1.6em; } /* narrower than it once was: beside the resume, the way back to the front and the ?, at 19 px the name ran under them */
  .resume { margin-left: auto; }
  .ident { gap: 9px; min-height: 44px; min-width: 0; overflow: hidden; }
  .mark { width: 28px; height: 28px; }
  .org { padding-right: 0; border-right: 0; font-size: 14px; letter-spacing: .22em; }
  .radio, .resume, .help { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 8px; letter-spacing: .06em; }
  .help { width: 34px; padding: 0; }
  .tour-go { position: relative; min-height: 34px; padding: 0 10px; } /* shown on the front only */
  .radio::after, .resume::after, .help::after, .tour-go::after { content: ""; position: absolute; inset: -5px -4px; } /* 44 px to a thumb */

  /* the timeline (hub.js adds .replay to the display): a row of its own under the header */
  .replay { position: absolute; z-index: 30; inset: var(--top) 0 auto; width: auto; height: var(--tl-h); margin: 0;
    padding: 0 calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left)); background: #000; border: 0; border-bottom: 1px solid var(--o-line); }
  .replay button { position: relative; }
  .replay button::after { content: ""; position: absolute; inset: -2px 0; }

  /* the sheet: a tab each, dragged by its head (or by its content from the top of a scroll), snapping as it settles */
  .sheet { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(100% - var(--bar-h)); display: flex; flex-direction: column;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: #000; border-top: 1px solid var(--o-line);
    transform: translateY(calc(100% - var(--peek))); transition: transform .34s cubic-bezier(.2, .8, .2, 1); }
  .sheet[data-snap="half"] { transform: translateY(calc(100dvh - var(--half) - var(--bar-h))); }
  .sheet[data-snap="full"] { transform: none; }
  .sheet.dragging { transition: none; }
  body.diving .sheet { opacity: 0; transition: opacity .25s; }
  .sheet-head { display: block; flex: none; touch-action: none; user-select: none; -webkit-user-select: none; }
  .grip { height: 16px; display: grid; place-items: center; cursor: grab; }
  .grip::before { content: ""; width: 38px; height: 4px; background: var(--o-line); }
  .sheet-tabs { display: flex; border-top: 1px solid var(--o-line); border-bottom: 1px solid var(--o-line); }
  .sheet-tabs button { flex: 1; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--o-dim); font: 700 12.5px/1 var(--cn); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
  .sheet-tabs button + button { border-left: 1px solid var(--o-line); }
  .sheet-tabs button[aria-selected="true"] { color: #fff; box-shadow: inset 0 -3px var(--o); }
  .sheet-tabs button:focus-visible { outline-offset: -3px; }

  /* the panels in it: one at a time, each as tall as the sheet shows */
  .sheet > :is(.index, .track, .feeds) { position: relative; inset: auto; z-index: auto; width: auto; min-height: 0; display: none; border: 0;
    max-height: calc(var(--peek) - var(--head-h) - env(safe-area-inset-bottom)); }
  .sheet[data-snap="half"] > :is(.index, .track, .feeds) { max-height: calc(var(--half) - var(--head-h) - env(safe-area-inset-bottom)); }
  .sheet[data-snap="full"] > :is(.index, .track, .feeds) { max-height: calc(100% - var(--head-h)); }
  .sheet[data-tab="track"] > .track, .sheet[data-tab="index"] > .index, .sheet[data-tab="feeds"] > .feeds { display: flex; }
  .panel > .tab { touch-action: none; }

  /* tracking */
  .t-body { padding: 10px 14px 16px; overscroll-behavior: contain; }
  .sheet[data-snap="peek"] .t-hex { display: none; }
  .t-name { font-size: 30px; white-space: normal; transform: none; }
  .t-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
  .go { min-height: 44px; padding: 0 14px; }
  .go kbd { display: none; }

  /* the projects: searchable */
  .find { display: block; flex: none; margin: 8px 10px 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--o-line); border-radius: 0; background: #000; color: #fff;
    font: 700 16px/1 var(--cn); letter-spacing: .05em; text-transform: uppercase; -webkit-appearance: none; appearance: none; } /* 16 px: iOS doesn't zoom in on it */
  .find::placeholder { color: var(--o-dim); opacity: 1; }
  .find:focus-visible { border-color: var(--o); outline: 1px solid var(--o); outline-offset: 0; }
  .list { overscroll-behavior: contain; }
  .row { min-height: 44px; padding: 6px 12px 5px; }
  .rows[data-none]::after { content: attr(data-none); display: block; padding: 14px 12px; font: 400 12px/1.3 var(--cn); text-transform: uppercase; letter-spacing: .05em; color: var(--o-dim); }
  .index .legend { display: none; } /* here a row goes in at a tap, and the card has the button */

  /* feeds: the monitor bank as a strip, a swipe per monitor; the whole screen is the door */
  .sheet > .feeds { top: auto; right: auto; align-items: flex-start; gap: 10px; padding: 12px 14px 14px; overflow: auto hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; }
  .sheet > .feeds::-webkit-scrollbar { display: none; }
  .feed { flex: 0 0 min(82%, 400px); scroll-snap-align: start; }
  .door span { opacity: 1; }
  .sheet[data-tab="feeds"]:is([data-snap="half"], [data-snap="full"]) { transform: translateY(calc(100% - var(--feeds-vis))); } /* half is as tall as the strip */
  .display:has(.sheet[data-tab="feeds"]:is([data-snap="half"], [data-snap="full"])) .stage { transform: translateY(calc((var(--bar-h) - var(--feeds-vis)) / 2)); }

  /* riding on the sheet's top edge: the view and the contact line */
  .sheet > .scopes { left: auto; right: calc(10px + env(safe-area-inset-right)); top: auto; bottom: calc(100% + 10px); transition: opacity .2s; }
  .scopes button { min-height: 44px; padding: 0 12px; }
  .sheet > .status { left: calc(12px + env(safe-area-inset-left)); right: 190px; top: auto; bottom: calc(100% + 17px); z-index: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    font-size: 11.5px; line-height: 1.3; white-space: normal; transition: opacity .2s; }
  .sheet[data-snap="full"] > :is(.scopes, .status) { opacity: 0; visibility: hidden; }
  .scale { display: none; }

  /* over the map: nothing. The banner covered the map on a phone; its news is in the list (the New tags) */
  .alert { display: none; }
  body[data-cond="emergency"] .display::after { z-index: 35; }

  /* entering: the beats */
  .sync { padding: calc(14px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)); }
  .ratio { font-size: 104px; }
  .sync-main { grid-template-columns: 1fr; gap: 18px; }
  .roll { font-size: 12.5px; }
  .roll li { grid-template-columns: 90px minmax(0, 1fr); }
  .card { padding-left: 8vw; }

  /* the front: the name and the sentence first, then the live map through a band, then the way in, three projects and
     how to reach me, one column scrolling under the bar. The map stays behind it and follows the band (hub.js keeps
     --band-y and --band-b to where the band is); a tap on the band opens the display too. */
  html.quiet .display { --tl-h: 0px; }
  html.quiet .stage { transform: translateY(var(--band-y, 0px)); transition: opacity .35s ease-out; } /* it moves with the scroll, not after it */
  .q-panel { top: var(--top); left: 0; right: 0; bottom: 0; width: auto; padding: 0; background: none; border: 0; overscroll-behavior: contain; scrollbar-width: none; }
  .q-top, .q-rest { display: block; background: #000; padding-inline: calc(18px + env(safe-area-inset-left)) calc(18px + env(safe-area-inset-right)); }
  .q-top { padding-block: 20px 16px; border-bottom: 1px solid var(--o-line); container-type: inline-size; } /* the name fills the column it's in */
  .q-band { display: block; flex: none; height: max(190px, 32dvh); cursor: pointer; }
  .q-rest { flex: 1 0 auto; display: flex; flex-direction: column; padding-block: 16px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--o-line); }
  .q-line { margin-top: 12px; font-size: 16.5px; }
  .q-acts { margin-top: 0; }
  .q-acts .go { min-height: 44px; }
  .q-head { flex-wrap: wrap; row-gap: 4px; margin-top: 24px; }
  .q-head p { text-align: left; }
  .q-row { margin-inline: -8px; padding-inline: 8px; }
  .q-contact { padding-top: 18px; }
  .q-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .q-foot { z-index: 7; left: calc(10px + env(safe-area-inset-left)); bottom: auto; top: var(--band-b, 50%); translate: 0 calc(-100% - 8px); width: auto; max-width: calc(100% - 20px); align-items: flex-start; gap: 6px; } /* at the foot of the band, over the panel so the chip takes its taps */
  .q-key { flex-direction: column; align-items: flex-start; justify-content: flex-start; font-size: 11.5px; line-height: 1.3; }
  .q-chip { padding: 9px 12px 8px 11px; font-size: 12px; }
  .q-chip .fine { display: none; }
  .q-chip .touch { display: inline; }
  html.quiet :is(.q-map, .q-lead) { display: none; }
  /* waking on a phone: the front drops away, the timeline slides in under the bar and the sheet rises into place */
  html.waking :is(.index, .feed, .track) { animation: none; }
  html.waking .q-panel { animation: q-sink .36s cubic-bezier(.55, 0, .85, .35) forwards; }
  html.waking .sheet { animation: q-rise .56s .18s cubic-bezier(.16, 1, .3, 1) both; }
  html.waking .replay { animation: q-drop .42s .1s cubic-bezier(.16, 1, .3, 1) both; }
  html.sleeping .sheet { animation: q-sink .26s cubic-bezier(.55, 0, .85, .35) forwards; }
  html.sleeping .replay { animation: q-gone .2s forwards; }
  html.returning .q-panel { animation: q-rise .5s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes q-sink { to { translate: 0 45%; opacity: 0; } }
  @keyframes q-rise { from { translate: 0 45%; opacity: 0; } }
  @keyframes q-drop { from { translate: 0 -100%; opacity: 0; } }

  /* the tour: across the foot of the screen in the sheet's place; the sheet comes back when it's done */
  .tour { z-index: 26; left: 0; right: 0; bottom: 0; max-width: none; border-width: 1px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .tour-body { gap: 6px; padding: 12px 16px 14px; }
  .tour-title { font-size: 26px; }
  .tour-text { min-height: 0; font-size: 15px; }
  body.touring .sheet { visibility: hidden; }
  body.touring .stage { transform: translateY(calc((var(--bar-h) - 224px) / 2)); } /* the map centres over the tour */
}
@media (max-width: 379px) { .org { display: none; } } /* the emblem holds the name; the lamp keeps its room */

/* a tablet upright: the header has room for the timeline */
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
  .display { --tl-h: 0px; }
  .replay { top: env(safe-area-inset-top); height: 52px; left: calc(150px + env(safe-area-inset-left)); right: calc(300px + env(safe-area-inset-right)); border: 0; background: none; }
}

/* a phone on its side: the timeline moves up into the header, the sheet docks to the right, and the map centres in
   what's left of it */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
  .display { --top: calc(46px + env(safe-area-inset-top)); --tl-h: 0px; --peek: calc(96px + env(safe-area-inset-bottom)); --half: 64dvh; --sheet-w: min(380px, 46vw);
    --feeds-vis: calc(var(--head-h) + 46px + min(.82 * (var(--sheet-w) - 28px), 400px) * 9 / 16 + env(safe-area-inset-bottom)); }
  .replay { top: env(safe-area-inset-top); height: 46px; left: calc(150px + env(safe-area-inset-left)); right: calc(300px + env(safe-area-inset-right)); border: 0; background: none; }
  .sheet { left: auto; width: calc(var(--sheet-w) + env(safe-area-inset-right)); border-left: 1px solid var(--o-line); }
  .stage { transform: translateY(calc(var(--bar-h) / 2)); }
  .display:has(.sheet:is([data-snap="half"], [data-snap="full"])) .stage,
  .display:has(.sheet[data-tab="feeds"]:is([data-snap="half"], [data-snap="full"])) .stage { transform: translate(calc(var(--sheet-w) / -2), calc(var(--bar-h) / 2)); }
  .sheet > .status { right: 180px; }
  .alert { right: auto; width: min(480px, calc(100% - var(--sheet-w) - 30px)); }
  /* the front on its side: down the left, the map and its key to the right of it */
  .q-panel { right: auto; width: min(430px, 52vw); background: #000; border-right: 1px solid var(--o-line); }
  .q-band { display: none; }
  .q-top, .q-rest { border: 0; }
  html.quiet .stage { transform: translate(calc(min(430px, 52vw) / 2), calc(var(--top) / 2)); }
  .q-foot { top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); left: calc(min(430px, 52vw) + 12px); translate: none; }
  body.touring .stage { transform: translate(calc(var(--sheet-w) / -2), calc(var(--bar-h) / 2)); }
  .tour { top: var(--top); left: auto; width: calc(var(--sheet-w) + env(safe-area-inset-right)); border-width: 0 0 0 1px; overflow-y: auto; } /* where the sheet docks */
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .stage, .sheet, .sheet > :is(.scopes, .status) { transition: none; }
}