/* colours, sizes and speeds: css/tokens.css */

/* ── THE FIRST SCREEN'S STACKING: one rule, kept here (ping-pong round 3, 2026-10-14) ──────────────
   Layers, bottom to top:
     the desk ........ the landscape or the 3D Earth (0-2; #earth 25 when it is a window)
     on the desk ..... the glance 13-14, the edge strips 14-16, the top strip 16-19, the dock 20, weather 22
     panels .......... windows 29, .panel 30, pops and the order choice 34, the weather panel 35
     transient cards . the try card 45, calm cards 46 (install, bring your things, black and red),
                       the welcome 50, toast 60, "Updated" 70, a game invite 85
     covers .......... the bison 90, the screen saver 44 over the desk only, the camera 140
   1. A transient card never covers an open panel. While a panel, pop, the search list, the weather
      or the glance panel is open, the cards at the bottom wait (they come back when it closes) and the
      flags at the top right move to the top left. One card at a time: the welcome first.
   2. The top strip holds one thing at a time: while "Starting the 3D Earth…" is up, the order
      button waits; it appears when the Earth is ready (or could not start).
   3. On the 3D Earth the cards at the bottom sit above Meridian's foot (its scale bar and credits,
      meridian-simple.html #bottomStack: 14 px over Dew's gap, 58 on a phone, about 60 tall): --earth-foot.
   Shared/_Verktoy/ui-check.mjs checks rule 1: cards carry data-transient; panels are .panel,
   [data-panel] or role=dialog. tests/first-screen.test.mjs checks the rest. */
:root { --earth-foot: 72px; }
@media (max-width: 700px) { :root { --earth-foot: 128px; } }
body:has(#results:not([hidden]), .panel:not([hidden]), .pop:not([hidden]), #order-pop:not([hidden]), .gl-panel:not([hidden]), #weather.open, .ktp-open)
  :is(#first-run, #try-card, .calm-card, #order-btn) { visibility: hidden; }   /* menus and pops too: the camera's Photo/Video/3D scan sat under it (walk 2026-10-11) */
body:has(.gl-panel:not([hidden])) :is(#update-flag, #invite-flag) { right: auto; left: 20px; }
/* the "Install Dew as an app" card (js/install-app.js) rises in the same corner as the round order button (Meatballs); rule 8: the button waits until the card is closed */
body:has(#install-card) #order-btn { visibility: hidden; pointer-events: none; }
body:has(#first-run:not([hidden])) :is(#try-card, .calm-card) { display: none; }
body.earth-desk :is(#try-card, .calm-card) { bottom: calc(var(--dock-h) + var(--earth-foot)); }
/* while the welcome card sits above the dock, the 3D Earth's progress moves to the top so neither hides the other */
body:has(#first-run:not([hidden])) #earth-progress { bottom: auto; top: 14px; }
/* a narrow screen or a phone on its side has no room for both: the welcome card reaches the bottom-right corner, so the
   round order button waits until the card is closed (test_chips 375×812 and 812×375; rule 8) */
@media (max-width: 900px), (max-height: 480px) { body:has(#first-run:not([hidden])) #order-btn { visibility: hidden; pointer-events: none; } }
body:is(.earth-desk:not(.earth-ready, .earth-shown, .earth-failed), :has(#earth-progress:not([hidden]))) #order-btn { visibility: hidden; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: calc(15px * var(--ts))/1.45 var(--font); }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#landscape { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#landscape:active { cursor: grabbing; }

/* the dock at the bottom: the Dew ball, the one bar for searching and asking (it grows out of the
   ball and ends in the store button), then the clock and the way out */
#dock {
  position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: min(1100px, calc(100% - 320px));
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px 7px 56px; margin-left: 20px; border-radius: 999px;
  background: var(--dock-bg); border: 1px solid var(--rim); box-shadow: var(--sheen);
  backdrop-filter: blur(14px); z-index: 20;
  zoom: var(--dock-scale);
  transition: transform var(--mo-base) var(--mo-ease), opacity var(--mo-base);
}
.search-wrap { position: relative; flex: 1; min-width: 120px; }
/* the bar is two halves in one pill with a thin line between (this device | the web); the pill wears the look,
   the two fields inside are bare. Which is on the left is swapped in the page itself (js/search.js swapHalves). */
.search-pair {
  display: flex; align-items: stretch; width: 100%; min-width: 0; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(var(--tint), .06); overflow: hidden;
}
.search-pair:focus-within { border-color: var(--accent-text); background: rgba(var(--tint), .09); }
.search-line { flex: none; width: 1px; margin: 8px 0; background: var(--line); }
/* The field in use takes the room (js/search.js giveRoom marks it .has-room and the pair data-room): it grows, the
   others shrink to a mark, and the lines between slide aside with them. Every input in the pair does this, so a
   third or fourth field needs no new rule. Speed follows --mo-base, which is 0 under reduce motion. */
.search-pair { --search-min: 44px; --search-ms: calc(var(--mo-base) * .7); }
.search-pair > input {
  flex: 1 1 0; min-width: var(--search-min); width: 100%; padding: 9px 14px; border: 0; border-radius: 0;
  background: transparent; color: var(--text); font: inherit; outline: none;
  transition: flex-grow var(--search-ms) var(--mo-ease), padding var(--search-ms) var(--mo-ease), font-size var(--search-ms) var(--mo-ease);
}
.search-pair[data-room] > input { flex-grow: 0; padding-left: 4px; padding-right: 4px; text-align: center; }
.search-pair[data-room] > input.has-room { flex-grow: 1; padding-left: 14px; padding-right: 14px; text-align: start; }
.search-pair > input::placeholder { color: var(--muted); opacity: 1; }
/* The browser keeps about 13 px at the right of a search box for its clear button even while it is empty, and clips the placeholder there: in the Ask
   field of a phone "Spør" showed as "Spø" and "Sp" (FRONT-3). While the placeholder shows there is nothing to clear, so the button takes no room; it is back
   as soon as something is typed. */
.search-pair > input:placeholder-shown::-webkit-search-cancel-button { display: none; }
.search-pair > input[data-word-hidden]::placeholder { color: transparent; }   /* FRONT-3: the word does not fit even short; the pearl stands alone, the word is the aria-label */
@media (max-width: 760px) { .search-pair > input.has-room, .search-pair:not([data-room]) > input { padding-left: 10px; padding-right: 10px; } }   /* each field keeps its shorter words whole */
/* three or four fields side by side on a phone: the words are one short word each, so the room beside them is thinner */
@media (max-width: 760px) { .search-pair:not([data-room]) > input { padding-left: 4px; padding-right: 4px; text-align: center; } }
/* The Ask field's pearl (SP6): a small round ball at the field's left, drawn here so it wears the look. Dull with no AI on
   this machine, in the accent when one is ready, with a halo while it answers (data-ai on the field, set by js/search.js).
   A shrunk field keeps the pearl, centred, as its mark. */
.search-pair > #search-ask {
  --pearl: color-mix(in srgb, var(--muted) 60%, transparent); --halo: transparent;
  padding-left: 22px; text-align: start;
  background: radial-gradient(circle at 36% 32%, rgba(255,255,255,.7) 0 12%, var(--pearl) 48%, transparent 52%) no-repeat 7px 50% / 14px 14px,
              radial-gradient(circle, var(--halo) 0 40%, transparent 70%) no-repeat 3px 50% / 22px 22px;
}
.search-pair > #search-ask[data-ai="ready"] { --pearl: var(--accent); }
.search-pair > #search-ask[data-ai="busy"] { --pearl: var(--accent); --halo: color-mix(in srgb, var(--accent) 50%, transparent); }
.search-pair[data-room] > #search-ask:not(.has-room) { padding-left: 4px; background-position: 50% 50%, 50% 50%; }
/* four fields side by side on a phone: the words a little smaller and the pearl too, so each word shows whole (never "...") */
@media (max-width: 760px) {
  .search-pair > input:not(.has-room) { font-size: .8em; padding-left: 2px; padding-right: 2px; }
  .search-pair:not([data-room]) > #search-ask { padding-left: 15px; background-size: 9px 9px, 16px 16px; background-position: 3px 50%, 0 50%; }
}
/* where the question goes: a small line above the bar while the Ask field is in use (nothing is sent before Enter) */
.ask-where {
  position: absolute; bottom: calc(100% + 8px); right: 0; max-width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--line);
  font-size: calc(12px * var(--ts)); color: var(--text); box-shadow: 0 -6px 20px rgba(0,0,0,.3);
}
.ask-where[hidden], .ask-where .ask-setup[hidden] { display: none; }
.ask-where .ask-setup { min-height: 32px; }
/* a photo pasted or dropped on the bar, waiting for "where was this taken?" */
#search-photo { flex: none; display: flex; align-items: center; gap: 6px; max-width: 180px; padding: 3px 4px 3px 3px;
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--line); font-size: calc(12px * var(--ts)); }
#search-photo img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
#search-photo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#search-photo button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: calc(16px * var(--ts)); line-height: 1; }
#search-photo button:hover { color: var(--text); background: rgba(var(--tint), .1); }
.search-wrap.drop-here .search-pair { border-color: var(--accent-text); border-style: dashed; }
/* results open upwards, above the bar */
#results {
  position: absolute; bottom: calc(100% + 12px); left: 0; right: 0; margin: 0; padding: 6px;
  list-style: none; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--line);
  max-height: min(60vh, calc(100vh - var(--dock-h) - 20px)); max-height: min(60dvh, calc(100dvh - var(--dock-h) - 20px)); overflow: auto; box-shadow: 0 -12px 40px rgba(0,0,0,.4);
}
#results li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
/* the Windows programs (js/win-programs.js): the pinned ones in the dock, all of them in the Library */
#dock-pins { display: flex; gap: 2px; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dock-pin { flex: none; }
#dock-pins[hidden] { display: none; }
.dock-pin { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.dock-pin:hover, .dock-pin:focus-visible { background: rgba(var(--tint), .1); }
.dock-pin .wp-ic { font-size: 22px; line-height: 1; }
/* open now: a small dot under it, as on Windows' own taskbar (shape, not colour alone) */
.dock-pin { position: relative; }
.dock-pin.on::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 6px; height: 3px; margin-left: -3px; border-radius: 2px; background: currentColor; opacity: .8; }
.dock-gap { flex: none; width: 1px; margin: 8px 3px; background: rgba(var(--tint), .25); }
.dock-pin .wp-ic img { width: 26px; height: 26px; display: block; }
.wp-shelf { grid-column: 1 / -1; margin-top: 10px; }
.wp-shelf h3 { margin: 0 0 6px; font-size: calc(13px * var(--ts)); font-weight: 600; opacity: .75; }
.wp-shelf h3 small { font-weight: 400; }
.wp-note { margin: 0; opacity: .7; font-size: calc(13px * var(--ts)); }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.wp-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: center; min-width: 0; cursor: pointer; }
.wp-tile:hover, .wp-tile:focus-visible { background: rgba(var(--tint), .08); }
.wp-tile .wp-ic { height: 40px; font-size: 32px; line-height: 40px; }
.wp-tile .wp-ic img { width: 40px; height: 40px; display: block; }
/* a name shows whole on up to two lines; only a very long one ends in "…" (the whole name is its tooltip) */
.wp-name { font-size: calc(12px * var(--ts)); line-height: 1.25; max-width: 100%; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#results li .pic { width: 20px; height: 20px; object-fit: contain; display: block; }
#results li .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#results li .kind { color: var(--muted); font-size: calc(12px * var(--ts)); margin-left: auto; white-space: nowrap; }
#results li.active, #results li:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
#results li.group { cursor: default; padding: 8px 10px 2px; color: var(--muted); font-size: calc(11px * var(--ts)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
#results li.group:hover { background: none; }
#results li.hint { cursor: default; color: var(--muted); font-size: calc(12px * var(--ts)); }
#results li.hint:hover { background: none; }
.dock-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
/* NC3: once the bar's "Back to Windows" has been pressed it lives in the Dew menu; the first press asks, with a Yes beside it */
body.back-moved:not(.phone-app) #back { display: none; }
#back-yes[hidden], #back-note[hidden] { display: none; }
#back-note { position: absolute; right: 14px; bottom: calc(100% + 8px); margin: 0; max-width: min(320px, calc(100vw - 28px)); padding: 6px 12px;
  border-radius: 12px; background: var(--dock-bg); color: inherit; border: 1px solid var(--rim); box-shadow: var(--sheen); backdrop-filter: blur(14px);
  font-size: calc(13px * var(--ts)); line-height: 1.3; white-space: normal; text-align: center; }
/* "Try it on your phone" (kit/try-on-phone, js/try-on-phone-ui.js): the kit has no look of its own and reads these
   names, so the button and its card wear Dew's tokens, in every look; in the dock it is a ghost pill like its neighbour */
:root {
  --tryphone-bg: var(--glass-strong); --tryphone-ink: var(--text); --tryphone-ink-soft: var(--muted);
  --tryphone-line: var(--rim); --tryphone-accent: var(--accent-text); --tryphone-warn: var(--warn);
  --tryphone-radius: 14px; --tryphone-font: var(--font); --tryphone-z: 40;
}
/* The Decide chip and its card (kit/decide, js/decide.js, DW1.5): the kit has no look of its own and reads these names, so
   chip, card and menu wear Dew's tokens in every look. The chip is shown to William only, on the PC with the Claude folder. */
:root {
  --decide-bg: var(--glass-strong); --decide-bg-2: color-mix(in srgb, var(--glass-strong) 90%, var(--text) 10%);
  --decide-ink: var(--text); --decide-ink-soft: var(--muted); --decide-line: var(--rim);
  --decide-accent: var(--accent); --decide-accent-ink: var(--on-accent); --decide-warn: var(--warn);
  --decide-radius: 14px; --decide-font: var(--font); --decide-z: 60;
}
.decide-menu { position: fixed; z-index: 9100; display: flex; flex-direction: column; min-width: 12rem; padding: 4px;
  border-radius: 12px; background: var(--glass-strong); color: var(--text); border: 1px solid var(--rim);
  box-shadow: 0 10px 30px var(--shadow); font: calc(14px * var(--ts)) var(--font); }
.decide-menu-row { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: inherit;
  font: inherit; text-align: start; cursor: pointer; }
.decide-menu-row:hover, .decide-menu-row:focus-visible { background: color-mix(in srgb, var(--accent) 18%, transparent); outline: none; }
/* its card and tip float up out of the dock: the dock rises above the welcome and calm cards (z 45-50) while one is
   showing, so nothing covers a button of the card (nothing-covers-what-you-press.md) */
body:has(.ktp-open, .ktp-tip:not([hidden]), .ktp-menu:not([hidden])) #dock { z-index: 51; }
.dock-actions .ktp { font-size: calc(14px * var(--ts)); }
.dock-actions .ktp-pop { white-space: normal; }   /* the dock row keeps its words on one line; the card and tip wrap theirs */
.dock-actions .ktp-btn { background: transparent; border-radius: 999px; padding: 6px 14px; min-height: 40px; }
.dock-actions .ktp-btn:hover, .dock-actions .ktp-open .ktp-btn { background: rgba(var(--tint), .06); }
/* narrow screens: the dock is full (the search bar needs its room), so the button is its icon alone, 44px, the words kept for screen readers */
@media (max-width: 760px) {
  .dock-actions .ktp { flex: 0 0 auto; }
  .dock-actions .ktp-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .dock-actions .ktp-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* on a phone the search bar keeps its room: the button rises onto the dock's top edge at the right, like the install
   button (#get-dew) does at the left; the little (i) goes (the card the button opens already lists the same perks) */
@media (max-width: 480px) {
  .dock-actions .ktp { position: absolute; right: 6px; bottom: calc(100% - 5px); }
  .dock-actions .ktp-info { display: none; }
}
#clock { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
body.glance-on #clock { display: none; }   /* the round clock shows the time already (js/glance.js) */

.solid, .ghost { border-radius: 999px; padding: 8px 14px; border: 1px solid transparent; }
.solid { background: var(--solid-bg); color: var(--on-accent); font-weight: 600; }
.ghost { background: transparent; border-color: var(--line); }
.solid:hover { filter: brightness(1.08); }
a.solid { display: inline-block; text-decoration: none; }
.ghost:hover { background: rgba(var(--tint), .06); }

/* hot corners */
.corner {
  position: fixed; width: 150px; height: 64px; border: 0; background: transparent; z-index: 15;
  display: flex; padding: 12px;
}
.corner span {
  padding: 7px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line);
  transform: scale(.9); transition: transform .15s; white-space: nowrap; font-size: calc(13px * var(--ts));
}
/* the whole corner fades in, not just its label: a corner nobody can see is not "covered" by what lies over it, and a label that
   shows is on top and takes the click (nothing-covers-what-you-press.md; the volume and padlock buttons lay over "Messages") */
.corner { opacity: 0; transition: opacity .15s; }
.corner:hover, .corner:focus-visible, body.reveal-corners .corner { opacity: 1; }
.corner:hover, .corner:focus-visible { z-index: 18; }
.corner:hover span, .corner:focus-visible span, body.reveal-corners .corner span { transform: none; pointer-events: auto; }
.corner.tl { top: 0; left: 0; align-items: flex-start; justify-content: flex-start; }
.corner.tr { top: 0; right: 0; align-items: flex-start; justify-content: flex-end; }
.corner.bl { bottom: 0; left: 0; align-items: flex-end; justify-content: flex-start; }
.corner.br { bottom: 0; right: 0; align-items: flex-end; justify-content: flex-end; }
/* only a bent band along the very edge takes the mouse, never the block inside it, so a window's or a
   module's buttons near the corner keep their clicks (William, 2026-10-19: the Fighter's Leave and windows'
   Exit lay under the invisible corner blocks; nothing-covers-what-you-press.md) */
.corner { pointer-events: none; }
.corner::before, .corner::after { content: ""; position: absolute; pointer-events: auto; }
.corner::before { left: 0; right: 0; height: 12px; }
.corner::after { top: 0; bottom: 0; width: 12px; }
.corner.tl::before, .corner.tr::before { top: 0; }
.corner.bl::before, .corner.br::before { bottom: 0; }
.corner.tl::after, .corner.bl::after { left: 0; }
.corner.tr::after, .corner.br::after { right: 0; }

/* the system ball (the AI launcher), at the left end of the dock; the bar grows out of it */
#dock { --ball: 62px; --ball-x: -14px; --ring: 1.32; }   /* the ball's size and place, shared with its glow below; --ring: 1 + 20px / --ball */
#assistant {
  position: absolute; left: var(--ball-x); top: 50%; transform: translateY(-50%);
  width: var(--ball); height: var(--ball); border-radius: 50%; border: 1px solid var(--line); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 35% 30%, var(--ball-hi), var(--accent) 40%, var(--accent-2) 100%);
  color: var(--on-accent);
}
/* what is inside the ball (symbol and text logo): css/shell.css */
#assistant:hover { filter: brightness(1.1); }
/* The ball breathes: a ring swells out of it and fades while its glow turns from the accent to the
   second accent, and back, every 4 s. Drawn on two layers behind the ball that only grow and fade
   (transform and opacity), so the graphics card does it and nothing is redrawn while Dew sits
   still (no-waiting-no-stutter.md). ::after is the ring and the resting glow, ::before the deeper
   glow at the top of the breath (in the slanted shape ::before is the dock's glass, so there the
   glow just rests). */
#dock::after, html:not([data-shape="slant"]) #dock::before {
  content: ""; position: absolute; left: var(--ball-x); top: 50%; z-index: -1; pointer-events: none;
  width: var(--ball); height: var(--ball); margin-top: calc(var(--ball) / -2); border-radius: 50% !important;
}
#dock::after {
  background: var(--accent); opacity: .5;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: breathe-ring 4s ease-in-out infinite;
}
html:not([data-shape="slant"]) #dock::before {
  box-shadow: 0 10px 50px color-mix(in srgb, var(--accent-2) 45%, transparent); opacity: 0;
  animation: breathe-glow 4s ease-in-out infinite;
}
@keyframes breathe-ring { 50% { transform: scale(var(--ring)); opacity: 0; } }
@keyframes breathe-glow { 50% { opacity: 1; } }

#place-label {
  position: fixed; padding: 6px 10px; border-radius: 10px; background: var(--glass-strong);
  border: 1px solid var(--line); pointer-events: none; z-index: 12; font-size: calc(13px * var(--ts)); transform: translate(-50%, -140%);
}

/* the 3D Earth layer */
#earth { position: fixed; inset: 0; z-index: 25; background: var(--bg); }
#earth-frame { width: 100%; height: 100%; border: 0; display: block; }
#earth-bar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; }
#earth-bar button { box-shadow: 0 6px 24px rgba(0,0,0,.45); }
#earth-feedback { width: 38px; padding: 0; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--rim); }
#earth-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
body.in-earth #dock, body.in-earth .corner, body.in-earth #to-earth { display: none; }
/* the 3D Earth as the desktop (earth.js "desk" mode): it loads underneath the simple globe,
   which fades away once the Earth's first view is drawn */
body.earth-desk #landscape { z-index: 2; background: var(--bg); transition: opacity .8s ease; }
body.earth-desk #earth { z-index: 1; }
body.earth-desk #earth-bar, body.earth-desk #earth-loading, body.earth-desk #to-earth { display: none; }
body.earth-ready #landscape, body.earth-shown #landscape { opacity: 0; pointer-events: none; }
body.earth-desk.earth-failed #landscape { opacity: 0; pointer-events: none; }   /* the 3D Earth's "no network" card */
body.earth-ready #place-label, body.earth-shown #place-label { display: none; }
/* One Meridian 1c: once the 3D Earth is the desktop, Meridian's top row is the whole bar (the Dew ball,
   its search box, Store, Camera, clock, Leave). Dew's own bar steps aside but keeps working underneath:
   its buttons are pressed from Meridian's row, and its list of answers opens under Meridian's box
   (earth-ask.js places it). transform, zoom and the blur go: each would make the list's fixed place the bar's. */
body.earth-desk.earth-ready #dock { visibility: hidden; pointer-events: none; transform: none; zoom: 1; backdrop-filter: none; transition: none; }
/* the open Windows programs along the bottom while the globe is the desktop (win-programs.js renderBar):
   Meridian's Layers button, one per program, icon and name */
#win-bar { display: none; }
body.earth-desk.earth-ready #win-bar:not([hidden]) { display: flex; position: fixed; z-index: 26; left: 50%;
  transform: translateX(-50%); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 6px;
  max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
#win-bar button { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; height: 32px;
  padding: 0 10px 0 7px; border-radius: 6px; background: rgba(11,16,14,.62); border: 1px solid rgba(255,211,77,.5);
  color: rgb(255,211,77); backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.3);
  font: 13px system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; }
#win-bar button:hover, #win-bar button:focus-visible { background: rgba(11,16,14,.82); border-color: rgb(255,211,77); }
#win-bar .wb-rest { border-style: dashed; border-color: rgba(255,211,77,.35); color: rgba(255,211,77,.8); }   /* pinned, not open: dashed, the open ones are solid */
#win-bar .wb-ic { flex: none; width: 18px; height: 18px; display: grid; place-items: center; font-size: 14px; }
#win-bar .wb-ic img { width: 18px; height: 18px; }
#win-bar .wb-name { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* several windows of one program (js/win-list.js, win-programs.js wire): a small number on the button, and the list a click opens */
.wp-count { position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px;
  background: rgb(255,211,77); color: #1a1a1a; font: 700 10px/14px system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; pointer-events: none; }
#win-bar button { position: relative; }
#win-bar .wp-count { top: -5px; right: -5px; }
.wl-pop { position: fixed; z-index: 80; min-width: 220px; max-width: min(360px, calc(100vw - 16px)); box-sizing: border-box; padding: 6px; border-radius: 12px;
  background: var(--glass-strong, rgba(14,20,30,.96)); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(0,0,0,.45);
  overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; }
.wl-row { display: flex; align-items: center; gap: 10px; flex: none; min-height: 40px; width: 100%; padding: 4px 10px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; font: inherit; font-size: calc(14px * var(--ts, 1)); text-align: left; cursor: pointer; }
.wl-row:hover, .wl-row:focus-visible { background: rgba(var(--tint), .12); }
.wl-row:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.wl-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.wl-ic img { width: 22px; height: 22px; display: block; }
.wl-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-new { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 2px; position: sticky; bottom: -6px; background: var(--glass-strong, rgba(14,20,30,.96)); }   /* stays in sight when the list scrolls */
body.earth-desk.earth-ready #dock::before, body.earth-desk.earth-ready #dock::after { display: none; }
body.earth-desk.earth-ready #results { visibility: visible; pointer-events: auto; position: fixed; bottom: auto; right: auto;
  z-index: 30; zoom: var(--dock-scale); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
body.earth-desk.earth-ready :is(#dew-menu, #clock-pop, #camera-pop) { top: var(--earth-clear, 64px); bottom: auto;
  max-height: calc(100% - var(--earth-clear, 64px) - 16px); }
body.earth-desk.earth-ready #dew-menu { left: 12px; }
body.earth-desk.earth-ready { --order-up: max(72px, var(--earth-foot-clear, var(--earth-foot))); }   /* the round order button (Meatballs module/meatballs.css) sits above Meridian's clock, Feedback and scale bar as Meridian measures them (js/earth.js "foot"), and never under Dew's own bottom-right hot corner (64 px) */
body.earth-card :is(#order-btn, .ez-chip, .calm-card, #try-card) { visibility: hidden; pointer-events: none; }   /* a Meridian module card or window is open (js/earth.js "card") */
/* a short screen (a phone upright and small, or on its side): Meridian's column of round buttons on the right reaches down to where the
   round order button sits, so the button stands one column to the left of it, and its pop-up with it (OVERLAP-SWEEP-1, 320x568 and 812x375) */
@media (max-height: 640px) {
  body.earth-desk.earth-ready #order-btn { right: calc(var(--kv-right, 0px) + 64px); }
  body.earth-desk.earth-ready #order-pop { margin-right: 52px; }
}
body.earth-touch [data-chip] { visibility: hidden; }   /* a finger is on the globe (js/earth.js "touch") */
/* a full-window module (a game, Sherlock ...) is on screen (js/earth.js "module"): Dew's own buttons step aside so they can't
   take its touches; they come back when it closes or minimises (nothing/nobody is stranded: every module has Exit and Minimise) */
body.module-open :is(.corner, #wx-edge, .calm-card, #try-card, #first-run, #install-card, #order-btn, .ez-strip, .ez-chip, .ez-do, .gl-dialbox, .gl-widget) { visibility: hidden; pointer-events: none; }
@media (min-width: 761px) {   /* the Camera places itself over its dock button; here the button is in Meridian's row */
  body.earth-desk.earth-ready :is(#clock-pop, #camera-pop) { left: auto !important; right: 12px; }
}
#earth-progress {
  position: fixed; left: 50%; bottom: calc(var(--dock-h) + 8px); transform: translateX(-50%); z-index: 19; min-width: 260px;
  padding: 7px 14px 9px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(12px); font-size: calc(13px * var(--ts)); color: var(--muted); text-align: center; pointer-events: none;
}
#earth-progress b { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(var(--tint), .1); overflow: hidden; }
#earth-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; transform: scaleX(0); transition: transform .3s ease; }
#to-earth { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 8px); transform: translateX(-50%); z-index: 17; background: var(--glass); backdrop-filter: blur(12px); }

/* panels */
.panel {
  /* centred in the room above the dock */
  position: fixed; z-index: 30; left: 50%; top: calc(50% - var(--dock-h) / 2 + 8px); transform: translate(-50%, -50%);
  width: min(1100px, calc(100% - 48px)); height: min(720px, calc(100% - var(--dock-h) - 40px));
  display: flex; flex-direction: column;
  background: var(--glass-strong); border: 1px solid var(--rim); border-radius: var(--radius);
  box-shadow: var(--sheen), 0 30px 80px var(--shadow); backdrop-filter: blur(18px); overflow: hidden;
  animation: pop .14s ease-out;
}
.panel.small { width: min(560px, calc(100% - 48px)); height: auto; max-height: calc(100% - var(--dock-h) - 40px); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } }
/* a finger on the title bar flings the window away (js/fling.js), so the browser must not take it for a scroll */
.panel > header { touch-action: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px 12px 22px; border-bottom: 1px solid var(--line); }
.panel h2 { margin: 0; font-size: calc(18px * var(--ts)); font-weight: 650; font-family: var(--font-head); text-transform: var(--head-case); letter-spacing: var(--head-track); color: var(--head-colour); }
.panel-tools { margin-left: auto; color: var(--muted); font-size: calc(13px * var(--ts)); }
.close { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: calc(20px * var(--ts)); line-height: 1; }
.panel-tools + .close { margin-left: 8px; }
.close:hover { background: rgba(var(--tint), .08); }
.placeholder { padding: 22px; color: var(--muted); }
.placeholder .big { color: var(--text); font-size: calc(20px * var(--ts)); margin-top: 0; }
.kit-from-chats { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-from-chats button { min-height: 44px; }
.device-offer { margin: 0 22px 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); }
.device-offer p { margin: 0 0 12px; }
.placeholder input { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--tint), .06); color: var(--text); font: inherit; }

/* explorer */
.explorer { display: flex; flex: 1; min-height: 0; }
#places { width: 190px; padding: 12px; border-right: 1px solid var(--line); overflow: auto; flex: none; }
#places { padding: 10px 8px; }
.tree-row { display: flex; align-items: center; padding-left: calc(var(--depth, 0) * 14px); }
.tree-row .twist { flex: none; width: 22px; height: 30px; border: 0; background: transparent; color: var(--muted); padding: 0; font-size: calc(11px * var(--ts)); }
.tree-name { flex: 1; min-width: 0; padding: 7px 8px; border: 0; background: transparent; border-radius: 9px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-name.on, .tree-name:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tree-name[disabled] { opacity: .4; cursor: default; }
.tree-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 12px 0 4px; padding: 10px 4px 0 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: calc(13px * var(--ts)); }
.tree-head button { padding: 3px 9px; border-radius: 8px; font-size: calc(12px * var(--ts)); }
.explorer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px 18px; overflow: hidden; }
#crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--muted); }
#crumbs button { border: 0; background: transparent; padding: 4px 6px; border-radius: 8px; color: var(--text); }
#crumbs button:hover { background: rgba(var(--tint), .07); }
.readonly-note { margin: 6px 0 10px; font-size: calc(12px * var(--ts)); color: var(--muted); }
.entries { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; grid-auto-rows: max-content; padding-bottom: 12px; }
.entry { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; border: 1px solid transparent; background: rgba(var(--tint), .035); text-align: left; }
.entry > * { flex-shrink: 0; }
.entry:hover { border-color: var(--line); background: rgba(var(--tint), .06); }
.entry .thumb { flex: none; height: 92px; border-radius: 10px; display: grid; place-items: center; font-size: calc(38px * var(--ts)); background: rgba(var(--tint), .04); overflow: hidden; }
.entry .thumb img, .entry .thumb video { width: 100%; height: 100%; object-fit: cover; }
.entry .name { font-size: calc(13px * var(--ts)); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry .meta { font-size: calc(11px * var(--ts)); color: var(--muted); }
.entry .mark { position: absolute; top: 8px; right: 8px; font-size: calc(11px * var(--ts)); padding: 2px 6px; border-radius: 8px; background: rgba(0,0,0,.45); }
/* picking a file for a program (js/file-pick.js): the bar on top, fitting files pressable, the others greyed */
#panel-explorer.over-frame { z-index: 84 !important; }
.pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 12px; background: rgba(var(--tint), .06); }
.pick-bar[hidden], .pick-row [hidden] { display: none; }
.pick-bar p { margin: 0; flex: 1 1 200px; font-weight: 650; overflow-wrap: anywhere; }
/* on a phone the list of places sits above the files: while picking it gives way, so the files get room */
@media (max-width: 560px) {
  #panel-explorer.picking .explorer > #places { max-height: 22%; }
  #panel-explorer.picking #readonly-note, #panel-explorer.picking .nx-ai, #panel-explorer.picking .nx-split { display: none; }
  #panel-explorer.picking #entries { min-height: 220px; }
  #panel-explorer.picking .explorer-main { overflow: auto; }
}
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-row button { min-height: 44px; min-width: 44px; white-space: normal; }
.entry.misfit, .folders-list .misfit { opacity: .4; cursor: not-allowed; }
.entry.pickable:focus-visible, .folder-file:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#panel-explorer[data-road="cards"] :is(#notes-page, #readonly-note) { display: none; }
.folder-file { display: block; width: 100%; min-height: 44px; margin: 2px 0; padding: 6px 10px; text-align: left; border-radius: 10px; overflow-wrap: anywhere; white-space: normal; }
.empty { color: var(--muted); padding: 30px 0; grid-column: 1 / -1; }
#notes-page { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.note-head { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
/* links placed in a page or a folder (js/explorer.js) */
.note-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.note-links button, .entry.link .mark { border-radius: 999px; }
.note-links button { border: 1px solid var(--line); background: rgba(var(--tint), .06); color: var(--text); padding: 5px 12px; font: inherit; font-size: calc(13px * var(--ts)); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-links button:hover { background: rgba(var(--tint), .12); }
.entry.link .thumb { position: relative; }
.entry.link .thumb::after { content: "↗"; position: absolute; right: 8px; bottom: 6px; font-size: 14px; opacity: .7; }
.link-pick { position: absolute; inset: 0; z-index: 55; display: grid; place-items: start center; padding: 56px 16px 16px; background: rgba(0,0,0,.28); }
.lp-card { width: min(560px, 100%); max-height: calc(100% - 24px); display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass-strong); backdrop-filter: blur(18px); box-shadow: 0 18px 48px rgba(0,0,0,.4); }
.lp-head { display: flex; align-items: center; justify-content: space-between; }
.lp-head h3 { margin: 0; font-size: calc(17px * var(--ts)); }
#lp-q { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--tint), .05); color: var(--text); font: inherit; outline: none; }
.lp-list { overflow: auto; min-height: 120px; display: flex; flex-direction: column; gap: 2px; }
.lp-list button { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lp-list button .lp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-list button .lp-kind { color: var(--muted); font-size: calc(12px * var(--ts)); }
.lp-list button.on, .lp-list button:hover { background: rgba(var(--tint), .1); }
.lp-list .empty { color: var(--muted); padding: 10px; margin: 0; }
#note-title { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--text); font: 600 calc(20px * var(--ts))/1.3 var(--font-head, var(--font)); padding: 4px 2px; outline: none; }
#note-title:focus { border-bottom-color: var(--line); }
#note-delete { flex: none; font-size: calc(12px * var(--ts)); padding: 5px 10px; border-radius: 9px; }

/* below the line in Files & notes: the AI area (js/notes-ai.js) */
.nx-split { flex: none; height: 9px; cursor: row-resize; position: relative; border-top: 1px solid var(--line); touch-action: none; }
.nx-split::after { content: ""; position: absolute; left: 50%; top: 2px; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: rgba(var(--tint), .18); }
.nx-split:hover::after, .nx-split:focus-visible::after { background: var(--accent); }
.nx-ai { flex: none; display: flex; gap: 12px; min-height: 0; max-height: 55%; padding: 0 16px 12px; }
.explorer { min-height: 120px; }
.nx-ai[hidden] { display: none; }
.nx-ai.drop-here { outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 12px; }
.nx-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nx-context { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nx-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 260px; padding: 3px 4px 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: calc(12px * var(--ts)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-chip:not(:has(button)) { padding-right: 10px; }
.nx-chip button { flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; padding: 0; line-height: 1; }
.nx-chip button:hover { background: rgba(var(--tint), .12); }
.nx-left > .nx-pick { flex: none; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 6px 10px; gap: 4px 10px; }
.nx-left > .nx-pick .kpp-say { flex: 1 1 14em; text-align: left; }
.nx-chat { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.nx-msg { max-width: 85%; padding: 7px 12px; border-radius: 14px; white-space: pre-wrap; line-height: 1.45; }
.nx-msg.me { align-self: flex-end; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.nx-msg.dew { align-self: flex-start; background: rgba(var(--tint), .06); }
.nx-msg.thinking { color: var(--muted); }
.nx-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.nx-tools button { padding: 4px 10px; border-radius: 9px; font-size: calc(12px * var(--ts)); }
.nx-form { display: flex; gap: 8px; align-items: flex-end; }
#nx-input { flex: 1; resize: none; min-height: 40px; max-height: 120px; padding: 9px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--tint), .05); color: var(--text); font: inherit; outline: none; }
#nx-input:focus { border-color: var(--accent-text); }
.nx-model { color: var(--muted); font-size: calc(12px * var(--ts)); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nx-model button { padding: 3px 10px; border-radius: 8px; font-size: calc(12px * var(--ts)); }
.nx-progress { width: 160px; accent-color: var(--accent); }
.nx-viewer { flex: none; width: min(340px, 40%); position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--tint), .04); overflow: auto; }
.nx-viewer[hidden] { display: none; }
.nx-viewer h3 { margin: 0 28px 0 0; font-size: calc(15px * var(--ts)); overflow-wrap: anywhere; }
.nx-viewer .solid, .nx-viewer .ghost { align-self: flex-start; }
.nx-text.paper { background: #fff; color: #111; padding: 10px 12px; border-radius: 8px; }   /* the real colours, as printed */
.nx-close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; font-size: calc(18px * var(--ts)); line-height: 1; padding: 0; }
.nx-text { flex: 1; margin: 0; min-height: 60px; overflow: auto; font: calc(12px * var(--ts))/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
#notes { flex: 1; resize: none; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--tint), .04); color: var(--text); padding: 18px; font: calc(16px * var(--ts))/1.6 var(--font); outline: none; }
.hint { color: var(--muted); font-size: calc(13px * var(--ts)); margin: 0 0 8px; }
.toggle { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }

/* library */
.tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(var(--tint), .06); }
.tabs button { border: 0; background: transparent; padding: 6px 16px; border-radius: 999px; }
.tabs button.on { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.filters { display: flex; gap: 8px; padding: 12px 22px 0; flex-wrap: wrap; }
.filters button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 5px 12px; font-size: calc(13px * var(--ts)); }
.filters button.on { border-color: var(--accent-text); color: var(--accent-text); }
.tiles { flex: 1; overflow: auto; padding: 16px 22px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; align-content: start; }
.tile { position: relative; height: 150px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; text-align: left; padding: 0; background: #111a2c; }
.tile .art { position: absolute; inset: 0 0 44px 0; display: grid; place-items: center; font-size: calc(54px * var(--ts)); }
.tile .label { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 10px; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.tile .label b { display: block; font-size: calc(16px * var(--ts)); }
.tile .label small { color: #c5d0e8; }
.tile .state { position: absolute; top: 10px; right: 10px; font-size: calc(12px * var(--ts)); padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.5); }
.tile .state.installed { color: var(--ok); }
.tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .12s; }

/* detail (install box) */
#detail .body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
#detail .packs { display: flex; flex-direction: column; gap: 6px; }
#detail .packs label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(var(--tint), .04); }
#detail .packs small { color: var(--muted); margin-left: auto; }
#detail .actions { display: flex; gap: 8px; justify-content: flex-end; }
#detail .dev { font-size: calc(12px * var(--ts)); color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }

/* Look closer in place (js/look-closer.js, look-closer-in-place.md): the picture zooms where it is
   shown; the arrows wake near the sides on desktop, always show small on touch, and show on focus.
   The photo's own colours are left alone in every look. */
#detail:has(.lc):not(.placed) { width: min(1000px, calc(100% - 48px)); }
#detail .body.media { padding: 10px; flex: 1 1 auto; min-height: 0; }
/* A PDF from Files (js/explorer.js showPdf, SL4): the window's own reader fills the window */
#detail:has(.pdf-frame):not(.placed) { width: min(1000px, calc(100% - 48px)); }
#detail .pdf-frame { width: 100%; height: min(72vh, 720px); height: min(72dvh, 720px); border: 0; border-radius: 12px; background: #fff; }
#detail:not([data-mode="normal"]) .pdf-frame { height: 100%; min-height: 240px; }
.lc { position: relative; height: min(70vh, 680px); height: min(70dvh, 680px); overflow: hidden; border-radius: 12px; touch-action: none;
  background: rgba(var(--tint), .04); cursor: zoom-in; user-select: none; -webkit-user-select: none; outline-offset: -3px; }
#detail:not([data-mode="normal"]) .lc { height: 100%; min-height: 240px; }
.lc.zoomed { cursor: grab; }
.lc.grabbing { cursor: grabbing; }
.lc.video { cursor: default; touch-action: pan-y; }
.lc-pic { position: absolute; inset: 0; }
.lc-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; filter: none; }
.lc-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
audio.lc-media { inset: auto 16px 50% 16px; width: calc(100% - 32px); height: 54px; background: none; }
.lc-arrow, .lc-fill, .lc-where { position: absolute; opacity: 0; pointer-events: none; transition: opacity var(--mo-fast) ease; }
.lc-arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 34px; line-height: 1; display: grid; place-items: center; }
.lc-prev { left: 10px; }
.lc-next { right: 10px; }
.lc-fill { top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 18px; }
.lc-where { left: 50%; bottom: 10px; transform: translateX(-50%); max-width: calc(100% - 140px); padding: 4px 12px; border-radius: 99px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: calc(13px * var(--ts)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-arrow:hover, .lc-fill:hover { background: rgba(0, 0, 0, .72); }
/* desktop: wake near the side, the full-screen button and "3 of 29" while the mouse is over the picture */
.lc.near-prev .lc-prev, .lc.near-next .lc-next { opacity: 1; pointer-events: auto; }
.lc:hover .lc-fill, .lc:hover .lc-where, .lc.stepped .lc-where, .lc:focus-visible .lc-where { opacity: 1; pointer-events: auto; }
.lc-where { pointer-events: none !important; }
/* the keyboard finds them without a mouse */
.lc-arrow:focus-visible, .lc-fill:focus-visible { opacity: 1; pointer-events: auto; outline: 3px solid var(--accent); }
.lc-arrow:focus-visible ~ .lc-where, .lc-fill:focus-visible ~ .lc-where { opacity: 1; }
/* touch: always there, smaller; a swipe works too */
@media (hover: none), (pointer: coarse) {
  .lc-arrow, .lc-fill, .lc-where { opacity: 1; pointer-events: auto; }
  .lc-arrow { width: 36px; height: 48px; font-size: 26px; background: rgba(0, 0, 0, .38); }
  .lc-prev { left: 6px; } .lc-next { right: 6px; }
}
.lc:fullscreen { height: 100%; border-radius: 0; background: #000; }
/* right-click a picture: the actions, then Close (js/look-closer.js) */
.lc-menu { position: absolute; z-index: 5; display: grid; min-width: 12rem; padding: 4px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--solid); box-shadow: 0 8px 28px var(--shadow); }
.lc-menu button { text-align: left; padding: 10px 12px; min-height: 40px; border: 0; border-radius: 8px; background: none; color: var(--text, inherit); font: inherit; cursor: pointer; }
.lc-menu button:hover, .lc-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
.lc-menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

/* messaging centre (mock-up) */
.mc-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* the ⋯ menu: shape, unified and the install demo (the header keeps title, ⋯ and Close) */
.mc-more summary { padding: 4px 12px; border-radius: 10px; font-size: calc(18px * var(--ts)); line-height: 1.2; }
.mc-more .hub-pop { z-index: 20; width: 260px; }
.mc-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-tabs[hidden] { display: none; }
.mc-tabs { display: flex; gap: 4px; padding: 6px 12px 0; border-bottom: 1px solid var(--line); overflow-x: auto; flex: none; }
.mc-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-bottom: 0; background: transparent; padding: 7px 12px; border-radius: 10px 10px 0 0; color: var(--muted); white-space: nowrap; }
.mc-tabs button.on { background: rgba(var(--tint), .06); border-color: var(--line); color: var(--text); }
.mc-tabx { margin-left: 4px; padding: 0 4px; border-radius: 6px; }
.mc-tabx:hover { background: rgba(var(--tint), .1); }
.mc-body { position: relative; flex: 1; min-height: 0; }
#mc-stage { position: absolute; inset: 0; }
.mc-app { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 6px 0; border: 0; background: transparent; border-radius: 14px; transition: translate var(--mo-slow) var(--mo-ease), opacity var(--mo-base) var(--mo-ease), scale var(--mo-base) var(--mo-ease); }
.mc-app:not([data-placed]) { opacity: 0; }
#mc-stage.filtering .mc-app:not(.picked) { opacity: 0; scale: .7; pointer-events: none; transition: translate var(--mo-slow) var(--mo-ease), opacity var(--mo-fast) var(--mo-out), scale var(--mo-fast) var(--mo-out); }
.mc-x { position: absolute; left: 50%; top: 6px; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; display: grid; place-items: center; background: rgba(40, 46, 60, .62); color: #fff; font-size: calc(30px * var(--ts)); line-height: 1; opacity: 0; transition: opacity var(--mo-fast) var(--mo-ease); pointer-events: none; }
.mc-app.picked:hover .mc-x, .mc-app.picked:focus-visible .mc-x, .mc-app.picked:active .mc-x { opacity: 1; }
@media (hover: none) { .mc-app.picked .mc-x { opacity: 1; } }
/* not brought in yet: dimmed, still pressable (it says how to bring it in) */
.mc-app.off .mc-badge { opacity: .45; filter: grayscale(.6); }
/* MS-a: with a chat open, or under 900 px, the logos sit in one strip at the top */
#mc-strip { display: none; position: absolute; left: 8px; right: 8px; top: 2px; height: 48px; gap: 4px; overflow-x: auto; overflow-y: hidden; align-items: center; scrollbar-width: thin; }
#mc-stage.strip #mc-strip { display: flex; }
#mc-strip .mc-app { position: relative; transform: none; translate: none; width: 48px; height: 48px; padding: 0; flex: none; justify-content: center; opacity: 1; scale: 1; pointer-events: auto; animation: none; }
#mc-strip .mc-app :is(small, .mc-own, .mc-x) { display: none; }
#mc-strip .mc-badge.lg { width: 36px; height: 36px; font-size: calc(16px * var(--ts)); }
#mc-strip .mc-app.picked { outline: 2px solid var(--accent); outline-offset: -2px; }
.mc-app.picked small { color: var(--text); }
.mc-app:hover { background: rgba(var(--tint), .06); }
.mc-app small { font-size: calc(12px * var(--ts)); color: var(--muted); white-space: nowrap; }
.mc-app.landing { animation: mc-land .9s ease-out; }
@keyframes mc-land { from { opacity: 0; transform: translate(-50%, -160%) scale(.6); } 60% { opacity: 1; } }
.mc-count { position: absolute; top: 0; right: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff6b5c; color: #fff; font: 600 calc(11px * var(--ts))/18px var(--font); font-style: normal; text-align: center; }
.mc-row-side .mc-count { position: static; display: inline-block; }
.mc-own { position: absolute; bottom: 22px; right: 18px; font: 600 calc(9px * var(--ts))/1 var(--font); font-style: normal; padding: 2px 4px; border-radius: 5px; background: var(--accent); color: var(--on-accent); }
.mc-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #0b1220; font-weight: 700; font-size: calc(12px * var(--ts)); flex: none; }
.mc-badge.xs { width: 16px; height: 16px; font-size: calc(9px * var(--ts)); }
.mc-badge.sm { width: 34px; height: 34px; font-size: calc(15px * var(--ts)); }
.mc-badge img { width: 58%; height: 58%; filter: brightness(0) invert(1); }
.mc-badge img.full { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: none; }
.mc-badge.mc-pick { cursor: pointer; transition: scale var(--mo-fast) var(--mo-ease); }
.mc-badge.mc-pick:hover { scale: 1.12; }
.mc-badge.lg { width: 52px; height: 52px; font-size: calc(22px * var(--ts)); box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.mc-app.own .mc-badge.lg { box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 3px var(--accent); }
#mc-centre { position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: rgba(var(--tint), .035); border: 1px solid var(--line); transition: left var(--mo-slow) var(--mo-ease), top var(--mo-slow) var(--mo-ease), width var(--mo-slow) var(--mo-ease), height var(--mo-slow) var(--mo-ease), border-radius var(--mo-slow) var(--mo-ease); }
#mc-centre.round { border-radius: 28px; }
.mc-hint { margin: auto; padding: 18px; text-align: center; color: var(--muted); }
.mc-hint .big { color: var(--text); font-size: calc(20px * var(--ts)); margin: 0 0 6px; }
.mc-inbox-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 14px 6px; }
.mc-inbox-head small { color: var(--muted); font-size: calc(11px * var(--ts)); }
.mc-optbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 14px 8px; font-size: calc(12px * var(--ts)); color: var(--muted); }
.mc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: transparent; font-size: calc(12px * var(--ts)); }
.mc-chip.on { background: color-mix(in srgb, var(--c) 25%, transparent); }
.mc-list { overflow: auto; flex: 1; padding: 0 6px 6px; }
.mc-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-left: 3px solid var(--c); background: transparent; border-radius: 8px; text-align: left; margin-bottom: 2px; }
.mc-row:hover { background: rgba(var(--tint), .06); }
.mc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-row-main small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mc-row-side small { color: var(--muted); font-size: calc(11px * var(--ts)); }
.mc-chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mc-back { padding: 4px 10px; }
.mc-netpick { display: flex; gap: 4px; margin-left: auto; }
/* a phone: the network buttons show just their logo (named for screen readers), so the chat head stays one row */
@media (max-width: 560px) { .mc-chip-name { display: none; } .mc-netpick .mc-chip { padding: 3px; justify-content: center; } .mc-chat-head { padding: 4px 8px; } #mc-centre .mc-compose { padding: 4px 8px 6px; } #mc-centre .mc-via { margin-bottom: 4px; } }
.mc-msgs { flex: 1; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.mc-msg { max-width: 82%; padding: 7px 11px; border-radius: 14px; background: rgba(var(--tint), .07); border-left: 3px solid var(--c); white-space: pre-wrap; align-self: flex-start; }
.mc-msg.me { align-self: flex-end; background: color-mix(in srgb, var(--c) 22%, transparent); border-left: 0; border-right: 3px solid var(--c); }
.mc-msg.card { border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.mc-msg small { display: block; font: calc(11px * var(--ts))/1.3 var(--font); color: var(--muted); margin-top: 2px; }
.mc-msg.failed { outline: 1px solid #ffb35c; }
.mc-fail { margin-top: 6px; font: calc(12px * var(--ts))/1.3 var(--font); color: #ffb35c; }
.mc-fail button { padding: 3px 10px; margin-left: 4px; }
.mc-compose { border-top: 2px solid var(--c); padding: 8px 10px 10px; background: color-mix(in srgb, var(--c) 8%, transparent); }
.mc-via { font-size: calc(12px * var(--ts)); color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
/* MS-b: their last message came on a network that isn't in yet */
.mc-via.mc-why { color: var(--text); }
.mc-via.mc-why .mc-via-text { flex: 1; min-width: 0; }
.mc-via.mc-why .mc-small { margin-left: 4px; flex: none; }
.mc-send { display: inline-flex; align-items: center; gap: 4px; }
.mc-compose-row { display: flex; gap: 8px; }
.mc-compose input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: rgba(var(--tint), .06); color: var(--text); font-size: calc(15px * var(--ts)); outline: none; }
/* a phone on its side (812x375): the chat gets the height. The logos stand in a column beside the chats and step aside
   while a chat is open (the back arrow leads home); the "goes as ..." line moves up beside the name (js/messaging.js);
   bubbles are one line high with the time beside the words. On a touch screen every button stays 44 px (the rule above);
   a mouse gets slimmer bars. */
@media (max-height: 480px) {
  #panel-messages > header { padding-top: 4px; padding-bottom: 4px; }
  #mc-stage.short #mc-strip { left: 4px; right: auto; top: 4px; bottom: 4px; width: 56px; height: auto; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  #mc-stage.short.chatting #mc-strip { display: none; }
  #mc-stage.short .mc-inbox-head { padding-top: 4px; padding-bottom: 2px; }
  #mc-stage.short .mc-chat-head { padding: 2px 8px; flex-wrap: nowrap; }
  #mc-stage.short .mc-chat-head > b { flex: none; }
  #mc-stage.short .mc-chat-head .mc-via { flex: 1; min-width: 0; margin: 0 4px; font-size: calc(11px * var(--ts)); line-height: 1.2; }
  #mc-stage.short .mc-chat-head .mc-via-text { flex: 1; min-width: 0; }
  #mc-stage.short .mc-chat-head .mc-via .mc-small { flex: none; margin-left: 4px; }
  #mc-stage.short .mc-msgs { padding: 4px 10px; gap: 4px; }
  #mc-stage.short .mc-msg { padding: 4px 10px; }
  #mc-stage.short .mc-msg small { display: inline-block; margin: 0 0 0 8px; }   /* the time beside the words, not under them */
  #mc-stage.short #mc-centre .mc-compose { padding: 2px 8px 3px; }
  #mc-stage.short .mc-compose input { padding: 4px 12px; }
}
@media (max-height: 480px) and (pointer: fine) {
  #mc-stage.short .mc-chat-head .mc-back { min-height: 32px; padding-top: 2px; padding-bottom: 2px; }
  #mc-stage.short .mc-chat-head .mc-via .mc-small { min-height: 0; padding: 1px 10px; }
  #mc-stage.short .mc-compose-row :is(button, .mc-plus, input) { min-height: 36px; }
}
.mc-f-rounded { font-family: ui-rounded, "Segoe UI Variable Display", "Nunito", var(--font); }
.mc-f-narrow { font-family: "Segoe UI Variable Small", "Arial Narrow", var(--font); font-stretch: condensed; }
.mc-f-serif { font-family: Georgia, "Times New Roman", serif; }
#mc-frame { position: absolute; inset: 0; padding: 16px; }
.mc-frame-in { display: flex; gap: 16px; height: 100%; }
.mc-fake { flex: 1; border-radius: 14px; overflow: auto; background: color-mix(in srgb, var(--c) 10%, #0d1320); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.mc-fake-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--c) 30%, #0d1320); }
.mc-fake-row { display: flex; flex-direction: column; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.mc-fake-row small { color: var(--muted); }
.mc-frame-note { width: 280px; flex: none; color: var(--muted); font-size: calc(14px * var(--ts)); }
.mc-frame-note .toggle { color: var(--text); align-items: flex-start; }
#mc-dialog { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); max-height: calc(100% - 24px); overflow: auto; padding: 18px 20px; border-radius: 16px; background: #0f1626; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
#mc-dialog h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: calc(17px * var(--ts)); }
#mc-dialog ul { padding-left: 18px; color: var(--muted); }
#mc-dialog li b { color: #ffb35c; font-weight: 600; }
.mc-dialog-btns { display: flex; justify-content: flex-end; gap: 8px; }
.mc-inbox-head .mc-unified { margin-left: auto; font-size: calc(12px * var(--ts)); color: var(--muted); }
.mc-inbox-head { align-items: center; }
.mc-filter-name { display: inline-flex; align-items: center; gap: 8px; }
.mc-filter-name small { color: var(--c); }
.mc-small { padding: 3px 10px; font-size: calc(12px * var(--ts)); }
.mc-row-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mc-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-row-app { font: 600 calc(11px * var(--ts))/1 var(--font); font-style: normal; color: var(--c); white-space: nowrap; }
.mc-msg small .mc-badge, .mc-via .mc-badge { vertical-align: -3px; }
.mc-msg { position: relative; transition: opacity var(--mo-base) var(--mo-out), scale var(--mo-base) var(--mo-out); }
.mc-msg.gone, .mc-sys.gone { opacity: 0; scale: .9; }
.mc-sys { align-self: center; font-size: calc(12px * var(--ts)); color: var(--muted); padding: 2px 10px; border-radius: 999px; background: rgba(var(--tint), .05); }
.mc-timer { font-size: calc(12px * var(--ts)); color: var(--accent-text); }
.mc-quote { border-left: 2px solid var(--c, var(--accent)); padding: 2px 8px; margin-bottom: 4px; font-size: calc(12px * var(--ts)); color: var(--muted); background: rgba(var(--tint), .04); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-quote b { color: var(--text); }
.mc-quote-draft { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.mc-quote-draft span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mc-x-small { border: 0; background: transparent; font-size: calc(16px * var(--ts)); padding: 0 4px; }
.mc-deleted { font-style: italic; color: var(--muted); }
.mc-acts { position: absolute; top: -14px; right: 6px; display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: #18213a; border: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity var(--mo-fast) var(--mo-ease); }
.mc-msg.me .mc-acts { right: auto; left: 6px; }
.mc-msg:hover .mc-acts, .mc-msg:focus-within .mc-acts, .mc-msg.acts .mc-acts { opacity: 1; pointer-events: auto; }
.mc-acts button, .mc-emoji button { border: 0; background: transparent; padding: 2px 6px; border-radius: 7px; font-size: calc(13px * var(--ts)); }
.mc-acts button:hover, .mc-emoji button:hover { background: rgba(var(--tint), .1); }
.mc-emoji { display: flex; gap: 2px; margin-top: 4px; }
.mc-reacts { display: flex; gap: 4px; margin-top: 4px; }
.mc-reacts span { font-size: calc(12px * var(--ts)); padding: 1px 6px; border-radius: 999px; background: rgba(var(--tint), .08); }
.mc-poll { display: flex; flex-direction: column; gap: 4px; min-width: 200px; white-space: normal; }
.mc-poll-opt { position: relative; display: flex; justify-content: space-between; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent) var(--w), transparent var(--w)); text-align: left; }
.mc-poll-opt.on { border-color: var(--c); }
.mc-once { border: 1px dashed color-mix(in srgb, var(--c) 70%, transparent); background: transparent; padding: 6px 10px; border-radius: 10px; }
.mc-once.done { display: inline-block; color: var(--muted); }
.mc-photo { height: 220px; display: grid; place-items: center; font-size: calc(90px * var(--ts)); border-radius: 12px; background: linear-gradient(160deg, #3b6ea5, #8fc3e6 55%, #e9f2f7); margin-bottom: 10px; }
.mc-plus { width: 38px; padding: 0; font-size: calc(20px * var(--ts)); flex: none; transition: rotate var(--mo-base) var(--mo-ease); }
.mc-plus.on { rotate: 45deg; border-color: var(--c); }
.mc-flag { margin-left: 6px; border: 1px solid var(--line); background: rgba(var(--tint), .05); border-radius: 999px; padding: 1px 8px; font-size: calc(11px * var(--ts)); }
.mc-tray { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: thin; align-items: center; animation: mc-rise var(--mo-base) var(--mo-ease); }
.mc-tray .hint { flex: 0 1 260px; min-width: 180px; margin: 0; font-size: calc(12px * var(--ts)); }
@keyframes mc-rise { from { opacity: 0; translate: 0 8px; } }
.mc-tool { display: inline-flex; flex: none; flex-direction: column; align-items: center; gap: 1px; min-width: 66px; padding: 5px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--tint), .04); font-size: calc(18px * var(--ts)); }
.mc-tool small { font-size: calc(11px * var(--ts)); color: var(--muted); }
.mc-tool.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.mc-tray > .mc-tool:not(:has(small)) { font-size: calc(13px * var(--ts)); min-width: 0; }
.mc-pollform { display: flex; gap: 6px; flex: 1 0 auto; }
.mc-pollform input { flex: 1 1 110px; min-width: 90px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--tint), .06); color: var(--text); font: inherit; }
.mc-sched button { padding: 2px 8px; }

/* keep in touch */
.kit { display: flex; flex: 1; min-height: 0; }
#kit-list { width: 250px; padding: 12px; border-right: 1px solid var(--line); overflow: auto; flex: none; }
#kit-list button { display: flex; flex-direction: column; width: 100%; padding: 9px 12px; border: 0; background: transparent; border-radius: 10px; text-align: left; }
#kit-list button.on, #kit-list button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
#kit-list small { color: var(--muted); font-size: calc(12px * var(--ts)); }
#kit-list small.now { color: #ffb35c; }
#kit-list small.soon { color: var(--accent-text); }
#kit-main { flex: 1; min-width: 0; overflow: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
#kit-main > h2 { font-size: calc(22px * var(--ts)); }
.kit-card { padding: 14px 16px; border-radius: 14px; background: rgba(var(--tint), .04); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.kit-card h3 { margin: 0; font-size: calc(14px * var(--ts)); color: var(--muted); font-weight: 600; }
.kit-card ul { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.kit-card textarea, .kit-field input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--tint), .06); color: var(--text); font: inherit; outline: none; color-scheme: dark; }
.kit-card textarea { min-height: 64px; resize: vertical; }
.kit-card textarea:focus, .kit-field input:focus { border-color: var(--accent-text); }
.kit-suggest { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-style: italic; }
.kit-suggest span { flex: 1; }
.kit-suggest button { font-style: normal; }
.kit-row { display: flex; justify-content: flex-end; }
.kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.kit-grid h3, .kit-grid .kit-field:last-child { grid-column: 1 / -1; }
.kit-field { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--ts)); }
.kit-field > span { color: var(--muted); }
.kit-field small { color: var(--muted); font-size: calc(11px * var(--ts)); }
.kit-talk { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.kit-talk small { color: var(--muted); white-space: nowrap; width: 96px; flex: none; }
.kit-talk span { flex: 1; }
.kit-x { border: 0; background: transparent; color: var(--muted); font-size: calc(16px * var(--ts)); padding: 0 6px; border-radius: 6px; }
.kit-x:hover { background: rgba(var(--tint), .08); color: var(--text); }

/* marketplace — reuses the keep-in-touch layout; warm yellow from the logo drafts */
#panel-market { --mk: #f2c14e; }
#panel-market header:has(.mk-name:not([hidden])) .mk-name-fallback { display: none; }
.mk-name { display: flex; align-items: center; gap: 4px; }
.mk-name button { border: 0; background: transparent; color: var(--muted); font-size: calc(20px * var(--ts)); width: 28px; height: 28px; border-radius: 50%; }
.mk-name button:hover { background: rgba(var(--tint), .08); color: var(--text); }
.mk-slide { display: flex; align-items: center; gap: 8px; min-width: 150px; padding: 2px 6px; border-radius: 10px; outline: none; cursor: ns-resize; touch-action: pan-y; user-select: none; }
.mk-slide:focus-visible { box-shadow: 0 0 0 2px var(--mk); }
.mk-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #2a1d00;
  background: conic-gradient(from 20deg, var(--mk) 0 33%, #ff8a3d 0 66%, #4aa3ff 0); }
.mk-word { font-size: calc(18px * var(--ts)); font-weight: 700; color: var(--mk); white-space: nowrap; }
.mk-of { color: var(--muted); font-size: calc(11px * var(--ts)); white-space: nowrap; }
.mk-name .mk-suggest-name { font-size: calc(15px * var(--ts)); opacity: .55; }
.mk-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#mk-list { width: 270px; padding: 12px; border-right: 1px solid var(--line); overflow: auto; flex: none; }
#mk-list button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 7px 10px; border: 0; background: transparent; border-radius: 10px; text-align: left; }
#mk-list button > span:last-child, #mk-list button:not(.mk-item) { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
#mk-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mk-list button.on, #mk-list button:hover { background: rgba(242, 193, 78, .13); }
#mk-list small { color: var(--muted); font-size: calc(12px * var(--ts)); }
#mk-list small.now { color: #ffb35c; }
#mk-list small.soon { color: var(--mk); }
#mk-list img, .mk-rrow img, .mk-noimg { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; }
.mk-noimg { display: grid; place-items: center; background: rgba(var(--tint), .06); font-size: calc(20px * var(--ts)); }
#mk-main { flex: 1; min-width: 0; overflow: auto; padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
#mk-main > h2 { font-size: calc(22px * var(--ts)); }
#mk-main select, #mk-main input:not([type=checkbox]), .mk-fold input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--tint), .06); color: var(--text); font: inherit; outline: none; color-scheme: dark; }
#mk-main select:focus, #mk-main input:focus { border-color: var(--mk); }
#mk-main input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--mk); flex: none; }
.mk-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-photos figure { position: relative; margin: 0; }
.mk-photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; display: block; }
.mk-photos .kit-x { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.55); color: #fff; }
.mk-add { width: 96px; height: 96px; border-radius: 10px; border: 1px dashed var(--line); background: transparent; color: var(--muted); }
.mk-add:hover { border-color: var(--mk); color: var(--text); }
.mk-guide { font-size: calc(13px * var(--ts)); color: var(--muted); }
.mk-guide li::before { content: "○ "; }
.mk-guide li.done { color: var(--text); }
.mk-guide li.done::before { content: "● "; color: var(--mk); }
.mk-suggest { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: calc(13px * var(--ts)); }
.mk-suggest:empty { display: none; }
.mk-suggest span { flex: 1; min-width: 200px; padding: 8px 12px; border-radius: 10px; background: rgba(242,193,78,.1); }
.mk-check { display: flex; gap: 10px; align-items: center; padding: 3px 0; }
.mk-check small { color: var(--muted); font-size: calc(12px * var(--ts)); }
.mk-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mk-row > input, .mk-row > select { width: auto !important; flex: 1; min-width: 120px; }
.mk-end { justify-content: flex-end; }
.ghost.danger:hover { border-color: #ff7a6b; color: #ff7a6b; }
.mk-fold summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: calc(14px * var(--ts)); }
.mk-fold[open] summary { margin-bottom: 10px; }
.mk-count { margin: 0; font-size: calc(18px * var(--ts)); font-weight: 650; font-variant-numeric: tabular-nums; }
.mk-bids { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mk-bids span { color: var(--muted); font-size: calc(13px * var(--ts)); }
.mk-text { margin: 0; white-space: pre-wrap; font: calc(13px * var(--ts))/1.5 var(--font); padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.25); }
.mk-review { display: flex; flex-direction: column; gap: 6px; }
.mk-rrow { display: grid; grid-template-columns: 42px 2fr 1.3fr 1fr 110px auto; gap: 8px; align-items: center; }
.mk-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mk-tray label { position: relative; cursor: pointer; }
.mk-tray img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.mk-tray input { position: absolute; top: 8px; left: 8px; }
.mk-tray label:has(input:not(:checked)) img { opacity: .35; }

/* settings */
.settings { padding: 8px 22px 22px; }
.settings .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.settings .row:last-child { border-bottom: 0; }
.settings small { color: var(--muted); }
.settings select { background: rgba(var(--tint), .06); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font: inherit; }
.settings input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent-text); }

/* pie menu */
/* 2 × BOX in js/pie.js. White see-through glass: each slice fades from --pie-near to --pie-far
   (tokens.css), and what lies behind is blurred in the slices' own shape (#pie-frost). */
#pie { position: fixed; z-index: 83; width: 340px; height: 340px; transform: translate(-50%, -50%); pointer-events: none; }
#pie-catch { position: fixed; inset: 0; z-index: 83; background: transparent; }
#pie-frost { position: absolute; inset: 0; backdrop-filter: blur(10px) saturate(1.3); }
/* overflow stays visible: the label under the ring (.tip) is drawn below the viewBox */
#pie svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 18px var(--shadow)); }
#pie .near { stop-color: var(--pie-near); }
#pie .far { stop-color: var(--pie-far); }
#pie .slice { stroke: var(--pie-edge); stroke-width: 1.2; }
#pie .slice.on { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
#pie text { fill: var(--text); font: calc(13px * var(--ts)) var(--font); text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  filter: drop-shadow(0 0 1.5px var(--pie-halo)) drop-shadow(0 1px 3px var(--pie-halo)); }
/* icons are coloured already: a light halo would wash them out, so a small dark shadow in every look */
#pie text.ico { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
#pie .hub { fill: var(--pie-near); stroke: var(--pie-edge); }
/* resting in the middle of an inner menu: a ring fills, then it goes up a level (pie.js, UP_MS) */
#pie .going { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); animation: pie-going linear forwards; }
@keyframes pie-going { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { #pie .going { animation: none; stroke-dashoffset: 0; opacity: .6; } }
#pie .tip.sub { font-weight: 400; font-size: 85%; }
#pie .tip { font-weight: 600; paint-order: stroke; stroke: var(--glass-strong); stroke-width: 4px; stroke-linejoin: round; }
#pie-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(12px * var(--ts)); color: var(--text); text-shadow: 0 0 3px var(--pie-halo); text-align: center; width: 80px; }

/* the right-click menu drawn as a list (setting "Right-click menu", js/menu-list.js): the sheet catches presses
   that would otherwise vanish into a program's frame; the menus are glass like the round one */
.ml-sheet { position: fixed; inset: 0; z-index: 83; background: transparent; }
.ml-menu { position: fixed; min-width: 190px; max-width: min(320px, calc(100vw - 16px)); overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--line); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 10px 30px var(--shadow); color: var(--text); }
.ml-head { display: flex; flex-direction: column; padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px; font-size: calc(14px * var(--ts)); }
.ml-head span { color: var(--muted); font-size: 85%; }
.ml-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit;
  font-size: calc(14px * var(--ts)); text-align: start; cursor: pointer; }
.ml-row:hover, .ml-row:focus-visible, .ml-row[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 35%, transparent); outline: none; }
.ml-ico { width: 1.5em; text-align: center; flex: none; }
.ml-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ml-more { flex: none; opacity: .7; }

/* first run + toast */
/* the first visit: hints in place (js/first-hints.js). The layer lets every press through; each hint sits at its thing, the
   point of the ball's and the bar's hints aims down at it, and all of them fade after the first drag (.gone) */
#first-run { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#first-run .hint {
  position: fixed; margin: 0; max-width: min(300px, calc(100% - 16px)); padding: 7px 12px; border-radius: 12px; text-align: center;
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: 0 8px 24px var(--shadow);
  font-size: calc(13px * var(--ts)); line-height: 1.35; opacity: 0; transition: opacity .6s ease;
}
#first-run .hint:not(.gone):not(#hint-menu) { opacity: 1; }
#first-run .hint.gone { opacity: 0; }
#first-run #hint-menu.show { opacity: 1; }
#first-run .hint.tip::after {
  content: ""; position: absolute; left: var(--tip, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--glass-strong); border: solid var(--line); border-width: 0 1px 1px 0; transform: rotate(45deg);
}
#first-run #hint-globe { animation: hint-drag 2.6s ease-in-out infinite; }
@keyframes hint-drag { 0%, 100% { translate: -10px 0; } 50% { translate: 10px 0; } }
@media (prefers-reduced-motion: reduce) { #first-run #hint-globe { animation: none; } #first-run .hint { transition: none; } }
/* while the search list is open the dock (and the list inside it) rises above open panels, so
   typing over the Library still shows what you can start (William, 2026-10-10) */
body:has(#results:not([hidden])) #dock { z-index: 31; }
/* the calm card after a shared try: bottom left, above the dock; it never covers a window's buttons */
#try-card {
  position: fixed; z-index: 45; left: 14px; bottom: calc(var(--dock-h) + 14px); max-width: min(440px, calc(100% - 28px));
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px;
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: 0 12px 34px var(--shadow);
}
#try-card[hidden] { display: none; }
#try-card-art { font-size: 30px; line-height: 1; }
#try-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#try-card-what { color: var(--muted, inherit); opacity: .8; font-size: calc(12.5px * var(--ts)); }
#try-card button { white-space: nowrap; }
@media (max-width: 560px) { #try-card { left: 8px; right: 8px; max-width: none; flex-wrap: wrap; } #try-card div { flex: 1 1 60%; } }
/* calm offers on the right, apart from the try card: "Install as an app" (js/install-app.js),
   "Bring over your things" (js/carry-ui.js) — shared standard do-it-once.md */
.calm-card {
  position: fixed; z-index: 46; right: 14px; bottom: calc(var(--dock-h) + 14px); max-width: min(460px, calc(100% - 28px));
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 12px 14px; border-radius: 16px;
  background: var(--glass-strong); border: 1px solid var(--line); box-shadow: 0 12px 34px var(--shadow);
}
.calm-card .calm-art { font-size: 30px; line-height: 1; width: 40px; height: 40px; border-radius: 10px; flex: none; }
.calm-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.calm-card div span, .calm-card small { opacity: .8; font-size: calc(12.5px * var(--ts)); }
.calm-card button { white-space: nowrap; }
/* the evening's offer of black and red (js/looks.js): narrower, its four answers in one row under the words */
.red-offer { max-width: min(380px, calc(100% - 28px)); }
.red-offer div { flex-basis: calc(100% - 52px); }
/* Files & notes on a phone: the list of places above the page, so the page gets the whole width */
@media (max-width: 560px) {
  .explorer { flex-direction: column; }
  .explorer > #places { width: auto; max-height: 30%; border-right: 0; border-bottom: 1px solid var(--line); }
  .explorer > .explorer-main { padding: 10px 14px; }   /* (beats the 760px rules further down) */
}
@media (max-width: 560px) { .calm-card { left: 8px; right: 8px; max-width: none; } }
/* Get Dew on the website (js/downloads.js): your own system first, the others as links underneath */
.downloads .dl-size { color: var(--muted); font-size: calc(13px * var(--ts)); white-space: nowrap; }
.downloads .dl-main .install-help { margin-bottom: 4px; }
.downloads .dl-also { margin: 16px 0 0; }
.downloads .dl-also small { display: block; }
.downloads .dl-also a { color: var(--text); }
.downloads .dl-elsewhere { margin-top: 4px; opacity: .8; }
.downloads .dl-web:not(:empty) { margin-top: 16px; }
/* Ways to run Dew (js/rungs.js): four steps, the one you are on marked */
.rungs { padding: 8px 22px 12px; }
.rungs-title { margin: 0 0 8px; font-size: calc(15px * var(--ts)); }
.rungs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rung { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.rung.here { border-color: var(--accent, currentColor); background: var(--glass-strong); }
.rung-adds, .rung-limits, .rung-steps { flex: 1 1 100%; opacity: .85; font-size: calc(13px * var(--ts)); }
.rung-here, .rung-notyet { font-size: calc(12px * var(--ts)); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); }
.rung button { margin-top: 4px; }
.install-help { display: block; margin-top: 6px; opacity: .8; }
/* the QR of this page in the Install panel, on a computer (js/install-app.js phoneCode): small, white so a camera reads it */
.install-phone { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; }
.install-phone small { opacity: .8; }
.install-qr { width: 168px; max-width: 100%; padding: 8px; border-radius: 10px; background: #fff; line-height: 0; }
.install-qr svg { width: 100%; height: auto; display: block; }
#toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--dock-h) + 8px); transform: translateX(-50%);
  padding: 10px 16px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--line);
  pointer-events: none;   /* words only: a click goes through to what is beneath (nothing-covers-what-you-press.md) */
}
/* the note after Ctrl and + - 0 or a pinch stepped the text size (js/zoom-lock-ui.js): words and one button */
#zoom-note {
  position: fixed; z-index: 61; left: 50%; bottom: calc(var(--dock-h) + 8px); transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center; width: max-content; max-width: calc(100vw - 32px); padding: 8px 16px; border-radius: 12px; font-size: calc(14px * var(--ts));
  background: var(--glass-strong); border: 1px solid var(--line);
}
#zoom-note[hidden] { display: none; }
#zoom-note button { min-height: 32px; padding: 0 4px; }

/* the blue "Updated" banner and "Latest update" in Settings: Meridian's (js/update.js) */
#update-flag {
  position: fixed; z-index: 70; top: 16px; right: 20px; max-width: min(340px, calc(100vw - 40px));
  background: var(--accent); color: var(--on-accent); padding: 9px 13px; border-radius: 6px; cursor: pointer;
  font-size: calc(12px * var(--ts)); line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
#update-flag[hidden], #last-update[hidden] { display: none; }
#update-flag .uf-title { font-weight: 700; margin-bottom: 2px; }
/* "Go back" puts the earlier version back, the same way it came in (js/update.js) */
#update-flag .uf-back { margin-top: 6px; font: inherit; font-weight: 700; color: inherit; background: transparent; border: 1px solid currentColor;
  border-radius: 5px; padding: 4px 12px; min-height: 44px; min-width: 44px; cursor: pointer; }
#update-flag .uf-btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* the note with paragraphs and points (js/note-text.js): closed, the first lines; "See more" opens the rest */
#update-flag-text p, #last-update-text p { margin: 0 0 .5em; }
#update-flag-text ul, #last-update-text ul { margin: 0 0 .5em; padding-left: 1.2em; }
#update-flag-text > :last-child, #last-update-text > :last-child { margin-bottom: 0; }
#update-flag-text:not(.note-open), #last-update-text:not(.note-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
#update-flag-text:not(.note-open) .note-extra { display: none; }
#update-flag-text.note-open { max-height: 50vh; overflow: auto; }
#update-flag .uf-btns button[hidden] { display: none; }
#update-flag .uf-back:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
#update-flag .uf-back:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* a dot on the Dew ball until its menu is opened: something new arrived */
#assistant[data-update-dot]::after { content: ""; position: absolute; top: 10%; right: 10%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--on-accent); box-shadow: 0 0 0 2px var(--accent), 0 0 0 3px var(--on-accent); animation: dew-dot 2.2s ease-in-out infinite; }
@keyframes dew-dot { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { #assistant[data-update-dot]::after { animation: none; } }
html[data-motion="reduce"] #assistant[data-update-dot]::after { animation: none; }
/* what has been taken away by an update but is still held by older scripts stays out of sight */
[data-live-gone] { display: none !important; }
/* the 200 ms crossfade when motion is kept down */
::view-transition-group(root) { animation-duration: 200ms; }
/* a game invite (js/invite.js): the same banner in red, below "Updated" when both show; over a
   game's window (#app-frame 80) and the pay sheet, under the bison (#grave 90) */
#invite-flag {
  position: fixed; z-index: 85; top: 16px; right: 20px; max-width: min(340px, calc(100vw - 40px));
  background: #c62828; color: #fff; padding: 9px 13px; border-radius: 6px;
  font-size: calc(12px * var(--ts)); line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
#update-flag:not([hidden]) ~ #invite-flag { top: 84px; }
#invite-flag[hidden] { display: none; }
#invite-flag .if-title { font-weight: 700; margin-bottom: 2px; }
#invite-flag .if-btns { display: flex; gap: 8px; margin-top: 7px; }
#invite-flag button { font: inherit; font-weight: 700; border: 0; border-radius: 5px; padding: 6px 14px; min-height: 32px; cursor: pointer; }
#invite-join { background: #fff; color: #a01d1d; }
#invite-later { background: rgba(255,255,255,.18); color: #fff; }
#invite-flag button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* serious errors: the bison (js/grave.js), over everything, calm rather than alarming */
#grave { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(3,5,10,.82); backdrop-filter: blur(6px); }
#grave[hidden] { display: none; }
.grave-card { width: min(560px, 100%); max-height: 100%; overflow: auto; background: #10141c; color: #e8ecf2; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); text-align: center; animation: grave-in .25s ease-out; }
#grave-pic { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }
#grave-pic[hidden] { display: none; }
.grave-stand-in { padding: 20px 0 0; background: linear-gradient(#7fa6cf, #c9d6e2 70%, #b9a77f); }
.grave-stand-in svg { display: block; width: min(300px, 80%); height: auto; margin: 0 auto; }
.grave-stand-in[hidden] { display: none; }
#grave h2 { margin: 18px 20px 6px; font-size: calc(20px * var(--ts)); }
#grave-what { margin: 0 20px; font-size: calc(14px * var(--ts)); line-height: 1.5; color: #c9d0da; }
#grave-detail { margin: 10px 20px 0; padding: 8px 10px; max-height: 6em; overflow: auto; text-align: left; white-space: pre-wrap; font-size: 12px; background: rgba(255,255,255,.05); border-radius: 6px; color: #9aa4b2; }
.grave-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 20px 6px; }
.grave-row button { min-height: 40px; padding: 8px 18px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; background: rgba(255,255,255,.1); color: inherit; }
#grave-again { background: #0066cc; color: #fff; }
.grave-row button:hover { filter: brightness(1.15); }
#grave-note { margin: 4px 20px 18px; font-size: calc(12px * var(--ts)); color: #8b95a3; }
@keyframes grave-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .grave-card { animation: none; } }
#last-update {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: calc(100% - 24px); margin: 12px; text-align: left; cursor: pointer;
  background: #0066cc; color: #fff; border: none; border-radius: 6px; padding: 8px 11px; font: inherit; font-size: calc(12px * var(--ts)); line-height: 1.4;
}
#last-update:hover { background: #0a74e0; }
#last-update.queued { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
#last-update .lu-title { font-weight: 700; }
#last-update .lu-text { align-self: stretch; }
#last-update button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer; }
#last-update .lu-more { font-weight: 700; text-decoration: underline; min-height: 44px; min-width: 44px; padding: 6px 0; }
#last-update .lu-hint { font-size: calc(11px * var(--ts)); opacity: .75; min-height: 44px; padding: 6px 0; }
#last-update button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* while an update's new look goes in: colours and sizes ease across instead of jumping */
.dew-morph *:not(.dew-held), .dew-morph *::before, .dew-morph *::after {
  transition: color .7s, background-color .7s, border-color .7s, border-radius .7s, box-shadow .7s !important;
}
/* inside an open window the sizes ease too (the pieces glide by js/live-swap.js; everything else glides by position) */
.dew-morph .panel *:not(.dew-held), .dew-morph .panel *::before, .dew-morph .panel *::after {
  transition: color .7s, background-color .7s, border-color .7s, border-radius .7s, box-shadow .7s, opacity .7s,
    width .7s, height .7s, max-width .7s, min-width .7s, padding .7s, margin .7s, gap .7s, font-size .7s,
    grid-template-columns .7s, grid-template-rows .7s !important;
}

/* narrow desktop windows and tablets: the dock gets the room, the install offer steps back
   (it stays in the menu and Settings → About) so the search bar never squeezes to nothing */
@media (max-width: 1100px) {
  /* TD1: the offer still shows ("Try on your device" on phones and tablets), as a small pill rising onto the dock's top
     edge at the right, so the search bar keeps its room; hidden by the Settings switch it stays hidden */
  #try-full:not([hidden]) {
    position: absolute; right: 10px; bottom: calc(100% - 4px); padding: 6px 14px; min-height: 44px;
    font-size: calc(13px * var(--ts)); background: var(--dock-bg); border: 1px solid var(--rim); backdrop-filter: blur(14px);
  }
  #dock { width: calc(100% - 200px); }
  /* the round order button (Meatballs) sits above that pill, not over it (tests/chips.js found it at 768×1024); the Earth desktop has its own height (above) */
  body:not(.earth-ready):has(#try-full:not([hidden])) { --order-up: calc(var(--dock-h) + 54px); }
}
@media (max-width: 900px) {
  #dock { width: calc(100% - 40px); margin-left: 0; }
  /* the dock now runs nearly edge to edge, so the bottom corners wait above it, not under it
     (nothing-covers-what-you-press.md; on a tablet Library and Settings were under the dock) */
  .corner.bl, .corner.br { bottom: var(--dock-h); }
  /* and the cards that offer something (chips) sit above those corners, not over them (nothing-covers-what-you-press.md rule 8; tests/chips.js) */
  #try-card, .calm-card { bottom: calc(var(--dock-h) + 72px); }
}

/* small screens */
@media (max-width: 760px) {
  :root { --dock-h: 78px; }
  #dock { width: calc(100% - 20px); bottom: max(8px, env(safe-area-inset-bottom)); margin-left: 0; padding-left: 62px; gap: 8px; }
  #dock { --ball: 52px; --ball-x: 4px; --ring: 1.38; }
  #clock { display: none; }
  /* "Back to Windows" / "Leave" waits in the Dew menu (Leave) on a phone, so the search bar gets the room
     (looks pass 2026-10-09: the bar had squeezed to "Søk ‹") */
  #back { display: none; }
  .corner { width: 110px; }
  #places { width: 120px; }
  .nx-ai { flex-direction: column; }
  .nx-viewer { width: auto; max-height: 40%; }
  .mc-tools { gap: 6px; }
  /* window headers on a phone: tighter, and the window buttons never squeezed or pushed off the edge */
  .panel > header { gap: 6px; padding: 12px 6px 10px 12px; }
  .panel > header .win-btns { gap: 2px; }   /* – □ × and share, Looks: four finger-sized buttons (44 px) still fit beside a title and a tool */
  .panel > header > :is(.close, .win-btns) { flex-shrink: 0; }
  .panel > header > .panel-tools { min-width: 0; }
  /* the assistant's "What I did" is words, not a mark: beside the title and four window buttons it was squeezed under
     them (37 px wide at 375 px, test_finger_targets). On a phone it takes a line of its own below them, whole and finger-sized */
  #panel-assistant > header { flex-wrap: wrap; }
  #panel-assistant > header > .panel-tools { order: 9; flex: 1 0 100%; margin-left: 0; }
  #as-log-btn { white-space: nowrap; }
  .mc-tool { min-width: 64px; }
  .mc-frame-in { flex-direction: column; }
  .mc-frame-note { width: auto; }
  .kit { flex-direction: column; }
  #kit-list { width: auto; max-height: 30%; border-right: 0; border-bottom: 1px solid var(--line); }
  .kit-grid { grid-template-columns: 1fr; }
  #mk-list { width: auto; max-height: 30%; border-right: 0; border-bottom: 1px solid var(--line); }
  #panel-market > header { flex-wrap: wrap; }
  .mk-tools { order: 3; flex-basis: 100%; justify-content: flex-start; margin-left: 0; }
  .mk-name { flex: 1; min-width: 0; }
  .mk-slide { min-width: 0; }
  .mk-rrow { grid-template-columns: 42px 1fr 1fr; }
  .panel { width: calc(100% - 16px); height: auto; top: 8px; bottom: var(--dock-h); max-height: none; transform: translateX(-50%); }
  @keyframes pop { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  #dock::before, #dock::after { animation: none !important; }
  .panel { animation: none; }
}

/* the swipe zones at the edges (js/edge-zones.js): only a grey mark on the edge where each zone's
   swipes work, a bar on the sides and a bent one in the corners; pointing at it says what it
   opens (William, 2026-10-10: the tabs with icons lay over windows' buttons) */
.ez-chip { position: fixed; z-index: 16; display: none; pointer-events: none; }
body.edge-guide .ez-chip:not([hidden]) { display: block; }
.ez-chip .ez-do {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: rgba(var(--tint), .32); border-radius: 3px; pointer-events: auto; transition: background .15s;
}
.ez-chip .ez-do { cursor: grab; }   /* a mouse can take the mark and pull it in (js/edge-zones.js) */
.ez-chip .ez-do:active { cursor: grabbing; }
.ez-chip .ez-do::after { content: ""; position: absolute; inset: -6px; }   /* a little more to aim at than it shows */
.ez-chip .ez-do:hover, .ez-chip .ez-do:focus-visible { background: rgba(var(--tint), .6); }
/* sizes (William, 2026-10-17): a corner's two arms are one length, --ez-c, about an eleventh of the
   screen's width (on his 34-inch screen out to the Meridian logo); the left and right marks are two of
   those, the top and bottom marks four, all centred; short enough on low screens that marks never meet */
:root { --ez-c: clamp(26px, min(100vw / 11, 22vh), 360px); }
.ez-t, .ez-b { width: calc(4 * var(--ez-c)); height: 4px; left: 50%; transform: translateX(-50%); }
.ez-l, .ez-r { width: 4px; height: calc(2 * var(--ez-c)); top: 50%; transform: translateY(-50%); }
.ez-t { top: 2px; }
.ez-b { bottom: 2px; }
.ez-r { right: 2px; }
.ez-l { left: 2px; }                                  /* the weather's tab (#wx-edge) lies over its middle */
/* corners: the mark bends round the corner, the line drawn by the border; only the bent band takes the
   mouse, never the square inside it, so a window's buttons near the corner keep their clicks */
.ez-tl, .ez-tr, .ez-bl, .ez-br { width: var(--ez-c); height: var(--ez-c); }
.ez-tl .ez-do { clip-path: polygon(0 0, 100% 0, 100% 10px, 10px 10px, 10px 100%, 0 100%); }
.ez-tr .ez-do { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 10px) 100%, calc(100% - 10px) 10px, 0 10px); }
.ez-bl .ez-do { clip-path: polygon(0 0, 10px 0, 10px calc(100% - 10px), 100% calc(100% - 10px), 100% 100%, 0 100%); }
.ez-br .ez-do { clip-path: polygon(calc(100% - 10px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 10px), calc(100% - 10px) calc(100% - 10px)); }
.ez-tl { top: 2px; left: 2px; }
/* on the Earth desktop Meridian's Dew ball stands 158 px in from the left; the top-left mark's arms stop short of it, however wide the
   screen (OVERLAP-SWEEP-1: at 2560 px the arm ran out over the ball) */
body.earth-desk .ez-tl { width: min(var(--ez-c), 148px); height: min(var(--ez-c), 148px); }
.ez-tr { top: 2px; right: 2px; }
.ez-bl { bottom: 2px; left: 2px; }
.ez-br { bottom: 2px; right: 2px; }
:is(.ez-tl, .ez-tr, .ez-bl, .ez-br) .ez-do { background: transparent; border: 0 solid rgba(var(--tint), .32); border-radius: 0; }
:is(.ez-tl, .ez-tr, .ez-bl, .ez-br) .ez-do:is(:hover, :focus-visible) { background: transparent; border-color: rgba(var(--tint), .6); }
.ez-tl .ez-do { border-top-width: 4px; border-left-width: 4px; border-top-left-radius: 14px; }
.ez-tr .ez-do { border-top-width: 4px; border-right-width: 4px; border-top-right-radius: 14px; }
.ez-bl .ez-do { border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: 14px; }
.ez-br .ez-do { border-bottom-width: 4px; border-right-width: 4px; border-bottom-right-radius: 14px; }
body.edge-guide .corner span { display: none; }         /* the tabs say it already */
body.in-earth .ez-chip, body.in-earth .ez-strip { display: none !important; }
/* a finger never presses the corner tabs or the marks: the press goes to what is under them (a window's X);
   a zone opens by a swipe only (js/edge-zones.js, William 2026-10-15). A mouse keeps them clickable. */
body.edge-touch .corner, body.edge-touch .corner::before, body.edge-touch .corner::after, body.edge-touch .ez-chip .ez-do { pointer-events: none; }
/* small screens: the dock sits 8px above the bottom and covered the bent corner marks, so there
   they lie flat under it, and their extra aiming room never reaches up into the dock
   (nothing-covers-what-you-press.md, 2026-10-10); up to 900px, where the dock still runs nearly edge to edge and its ball
   stands in the corner (Shared/_Verktoy/check-overlaps.mjs found the bent mark under the ball at 768 and 812 px, 2026-10-31) */
@media (max-width: 900px) {
  .ez-bl, .ez-br { height: 5px; }
  :is(.ez-bl, .ez-br) .ez-do { border-radius: 2px; clip-path: none; }
  :is(.ez-bl, .ez-br) .ez-do::after { inset: 0 -6px -2px; }
}

/* thin strips along the edges catch a swipe in, also over the 3D Earth desktop */
.ez-strip { position: fixed; z-index: 14; touch-action: none; }
.ez-strip-l { left: 0; top: 0; bottom: 0; width: 6px; }
.ez-strip-r { right: 0; top: 0; bottom: 0; width: 6px; }
.ez-strip-t { top: 0; left: 0; right: 0; height: 6px; }
.ez-strip-b { bottom: 0; left: 0; right: 0; height: 6px; }
@media (pointer: coarse) {
  .ez-strip-l, .ez-strip-r { width: 16px; }
  .ez-strip-t, .ez-strip-b { height: 16px; }
}

/* what a swipe is about to open grows in at its zone; at full size letting go opens it */
#ez-preview {
  position: fixed; z-index: 35; pointer-events: none; padding: 10px 16px; border-radius: 16px;
  background: var(--glass-strong, var(--glass)); border: 1px solid var(--line); backdrop-filter: blur(12px);
  font-size: calc(15px * var(--ts)); white-space: nowrap;
  opacity: calc(.35 + .65 * var(--p, 0)); scale: calc(.7 + .3 * var(--p, 0));
}
#ez-preview.ready { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
#ez-preview[hidden] { display: none; }
#ez-preview.ez-at-tl { top: 24px; left: 24px; transform-origin: top left; }
#ez-preview.ez-at-t { top: 24px; left: 50%; translate: -50% 0; transform-origin: top; }
#ez-preview.ez-at-tr { top: 24px; right: 24px; transform-origin: top right; }
#ez-preview.ez-at-r { right: 24px; top: 50%; translate: 0 -50%; transform-origin: right; }
#ez-preview.ez-at-br { bottom: calc(var(--dock-h) + 24px); right: 24px; transform-origin: bottom right; }
#ez-preview.ez-at-b { bottom: calc(var(--dock-h) + 24px); left: 50%; translate: -50% 0; transform-origin: bottom; }
#ez-preview.ez-at-bl { bottom: calc(var(--dock-h) + 24px); left: 24px; transform-origin: bottom left; }
#ez-preview.ez-at-l { left: 24px; top: 50%; translate: 0 -50%; transform-origin: left; }

@media (max-width: 760px) {
  /* the clock widget starts below the top tabs (64px tall: at 48px the top-right one lay over the
     clock's "put away" button, platforms part 1), at a size that leaves the Earth in view */
  body .gl-widget { top: 66px; width: min(var(--gl-size, 230px), 46vw); }
}

/* ---- the screensaver (js/screensaver.js): a cover that takes every input, see-through while the
   3D Earth shows the Moon behind it, black while it changes over, black with the clock otherwise ---- */
#saver { position: fixed; inset: 0; margin: 0; border: 0; padding: 0; z-index: 44; background: #000; opacity: 0; transition: opacity .6s ease; cursor: none; touch-action: none; user-select: none; }
#saver.black { opacity: 1; }
#saver.quick { transition-duration: .25s; }
#saver .saver-clock { display: none; position: absolute; inset: 0; place-content: center; text-align: center; color: rgba(255,255,255,.5); transition: transform 3s ease; pointer-events: none; }
#saver.clock .saver-clock { display: grid; }
#saver .saver-clock b { font-weight: 200; font-size: clamp(56px, 13vw, 150px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
#saver .saver-clock span { margin-top: 12px; font-size: calc(17px * var(--ts, 1)); color: rgba(255,255,255,.38); }
/* while it shows, Dew's own parts step out of sight (only the Earth, the cover and its settings card stay) */
body.saver > :not(#earth):not(#saver):not(#part-card):not(#grave):not(.saver-explore) { visibility: hidden !important; }
body.saver #part-card { z-index: 46; }
/* and come back softly once it has landed */
body.saver-back > :not(#earth):not(#saver) { animation: saver-back .6s ease backwards; }
@keyframes saver-back { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #saver .saver-clock { transition: none; } }

/* fingers: the dock's round buttons and the small buttons near them grow to a finger's size on a
   touch screen or a phone-sized window (phone-tablet-desktop.md, ~40px; walk 2026-10-11 found 30–38px) */
@media (pointer: coarse) {
  .mc-chip, .mc-small, .mc-back, #mc-shape button, .mc-more summary, #mc-install { min-height: 44px; min-width: 44px; }
  .mc-more .hub-pop label { min-height: 44px; display: flex; align-items: center; }
  #mc-strip { height: 52px; }
}
/* phones: the ⋯ menu spans the window, clear of the edge-swipe strips */
@media (max-width: 760px) { .mc-more .hub-pop { position: fixed; left: 16px; right: 16px; width: auto; top: 64px; } }
/* phones: a window opened over another one is solid, so the one behind never shows through */
@media (max-width: 760px) {
  body:has(.panel:not([hidden]) ~ .panel:not([hidden])) .panel:not([hidden]) { background: var(--solid); backdrop-filter: none; }
}
/* fingers everywhere (platforms part 1, 2026-10-14): on a touch screen every button in a window, a
   card or a pop-up is at least 44px tall, and the round and square icon buttons 44px wide too.
   tests/test_finger_targets.py measures what a finger can hit on a phone and a tablet */
@media (pointer: coarse) {
  :is(.panel, #weather, .pop, .gl-card, .gl-panel, #first-run, #try-card) :is(button, select, [role=button], input[type=range]) { min-height: 44px; }
  /* the Marketplace's name chooser keeps its finger-sized arrows whole; the window buttons then take
     the next line, at the right as in every window */
  .mk-name { min-width: fit-content; }
  #panel-market > header .win-btns { margin-left: auto; }
  :is(.panel, #weather, .pop, .gl-card, .gl-panel) details > summary { padding-block: 12px; }
  .close, .win-btns button, .win-share, #weather .wx-close, .gl-widget .gl-away, .mk-prev, .mk-next, .mk-suggest-name, .mc-app, #lp-x, #as-log-btn { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  /* the look names (Iris, Jul) are short words in a row: a finger wide each */
  .seg.look-pick button { min-width: 44px; }
  /* a box to tick takes a press on its words too: the whole line is a finger tall */
  label:has(> input:is([type=checkbox], [type=radio])) { min-height: 44px; }
}
/* phones: with a window open, only a 32px sliver of the bottom corners was left between it and the
   dock, an unseen strip to touch by mistake; Library and Settings are in the dock and the Dew menu */
@media (pointer: coarse) and (max-width: 760px) {
  body:has(.panel:not([hidden])) :is(.corner.bl, .corner.br) { display: none; }
}
@media (pointer: coarse), (max-width: 760px) {
  #dock #store-btn, #dock #camera-btn { width: 44px; height: 44px; }
  .gl-widget .gl-away { width: 44px; height: 44px; }
}

/* with the 3D Earth as the desktop, the strip just above the dock is the Earth's own: its height
   readouts and its Feedback button live there. The calm cards wait above that strip
   (nothing-covers-what-you-press.md rule 6; the install card sat on Feedback, walk 2026-10-11) */
body.earth-desk .calm-card, body.earth-desk #try-card { bottom: calc(var(--dock-h) + 56px); }

/* Your folders in Files & notes (js/folders.js) */
.your-folders { margin: 6px 0 12px; padding: 10px 12px; border: 1px solid rgba(128,128,128,.3); border-radius: 12px; }
.your-folders.drop { outline: 2px dashed var(--accent, #8a2be2); }
.folders-title { margin: 0 0 2px; font-size: calc(14px * var(--ts)); }
.folders-line, .folders-empty, .folders-warn, .folders-error { margin: 2px 0 8px; font-size: calc(12px * var(--ts)); color: var(--muted); }
.folders-error { color: var(--danger, #b3261e); }
.folders-cards { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.folder { display: grid; gap: 4px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, currentColor 5%, transparent); }
.folder small { color: var(--muted); }
.folders-list { list-style: none; margin: 4px 0; padding: 0; max-height: 180px; overflow: auto; font-size: calc(12px * var(--ts)); }
.folders-list li { padding: 1px 0; overflow-wrap: anywhere; }
.folders-list .more { color: var(--muted); }
.folders-row { display: flex; gap: 8px; flex-wrap: wrap; }
.folder > button { justify-self: start; }

/* Dew's own window (installed with Window Controls Overlay, js/window-controls.js). The strip is a drag
   region, and a drag region swallows clicks, so everything that sits at the top is pushed below it. */
#wco-bar { display: none; }
@media (display-mode: window-controls-overlay) {
  :root { --wco-h: env(titlebar-area-height, 33px); }
  #wco-bar {
    display: flex; align-items: center; justify-content: flex-end; position: fixed; z-index: 90;
    left: env(titlebar-area-x, 0px); top: 0; width: env(titlebar-area-width, 100%); height: env(titlebar-area-height, 33px);
    -webkit-app-region: drag; app-region: drag; user-select: none;
  }
  #wco-bar button, #wco-bar a { -webkit-app-region: no-drag; app-region: no-drag; }
  #wco-clock { background: transparent; border: 0; color: var(--muted); font: inherit; font-size: calc(13px * var(--ts)); padding: 0 12px; height: 100%; font-variant-numeric: tabular-nums; }
  #wco-clock:hover { color: var(--text); }
  #clock { display: none; }                               /* the clock lives in the title bar now */
  .corner.tl, .corner.tr { top: var(--wco-h); }
  .ez-t { top: calc(var(--wco-h) + 8px); }
  .ez-tl, .ez-tr { top: calc(var(--wco-h) + 8px); }
  #earth-bar { top: calc(var(--wco-h) + 6px); }
  #update-flag, #invite-flag { top: calc(var(--wco-h) + 8px); }
  #update-flag:not([hidden]) ~ #invite-flag { top: calc(var(--wco-h) + 76px); }
  .panel { max-height: calc(100% - var(--wco-h) - var(--dock-h) - 24px); }
}

/* Dew as an app: connect the program on this machine (js/bridge.js) */
.rung-bridge{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rung-bridge .bridge-ask{display:flex;flex-direction:column;gap:8px;align-items:flex-start;max-width:42ch}
.rung-bridge .bridge-words{margin:0}
.rung-bridge .bridge-code{font:inherit;font-size:1.3em;letter-spacing:.2em;width:9ch;padding:6px 10px;text-align:center;color:inherit;background:transparent;border:1px solid currentColor;border-radius:8px}
.rung-bridge .bridge-say{min-height:1.2em}

/* The download sheet: this device first, every other device a row (js/download-sheet.js) */
.dl-sheet { padding: 8px 22px 16px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.dl-head { margin: 0 0 6px; font-size: calc(15px * var(--ts)); }
.dl-bigrow { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dl-big { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; text-decoration: none; }
.dl-sheet .dl-size { color: var(--muted); font-size: calc(13px * var(--ts)); white-space: nowrap; }
.dl-coming { font-size: calc(12px * var(--ts)); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); }
.dl-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dl-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.dl-sign { font-size: 20px; text-align: center; line-height: 1; }
.dl-text { display: flex; flex-direction: column; min-width: 0; }
.dl-sub { color: var(--muted); font-size: calc(12.5px * var(--ts)); overflow-wrap: anywhere; }
.dl-row .solid, .dl-row .ghost { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.dl-all { align-self: flex-start; min-height: 44px; text-align: left; }

/* "Tell me when": one line under a Coming row (js/download-wish.js) */
.dl-row .dl-tell { min-height: 44px; }
.dl-wish { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.dl-wish[hidden] { display: none; }
.dl-wish p { margin: 0; font-size: calc(13px * var(--ts)); overflow-wrap: anywhere; }
.dl-wish-count, .dl-wish-say { color: var(--muted); }
.dl-wish-row { display: flex; gap: 8px; align-items: center; }
.dl-wish-row input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.dl-wish > button { align-self: flex-start; min-height: 44px; }
.dl-this > .dl-tell { min-height: 44px; margin-top: 6px; }

/* the download page's own rows and install steps (js/downloads.js) */
.downloads .dl-other, .downloads .dl-howto { margin-top: 14px; }
.dl-how { border: 1px solid var(--line); border-radius: 12px; padding: 0 10px; margin-top: 6px; }
.dl-how summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.dl-how p { margin: 0 0 10px; }
/* a window being flung: it follows the finger and shrinks (js/fling.js) */
.panel.flinging { will-change: translate, scale, opacity; user-select: none; }

/* ---- SPD6-SPD9 (docs/speed-and-clutter-audit.md): fewer things at rest, and a dock that is there first ----
   Phone home at rest: the ball, a full-width search bar, the Library button and the glance dial (progressive-disclosure.md:
   3, at most 5). Everything hidden here stays reachable: the Dew menu, the round menu, Settings, the dial. */
/* the Camera is a row in the Dew menu (William, SPD-2); the button stays in the page for the Earth desktop's tray */
#dock #camera-btn { display: none; }
/* touch: no hot corners, no edge marks, no weather tab on the Android back-gesture edge (William, SPD-1; a mouse keeps them) */
body.edge-touch .corner, body.edge-touch .ez-chip { display: none !important; }
@media (pointer: coarse) { #wx-edge { display: none; } }
body.edge-touch #wx-edge { display: none; }
/* dead or doubled on a phone: the grey voice mark, the Try-on-a-phone button (the Dew menu's Get Dew row holds it) */
@media (pointer: coarse), (max-width: 760px) {
  #voice-mark[data-state="unavailable"], .dock-actions .ktp { display: none; }
}
/* a tablet, a narrow window or a laptop (up to 1360 px): the same button gives its room to the search bar, whose four words (Map, Here, Web, Ask) were cut short at 768, 1000 and 1280 */
@media (max-width: 1360px) { .dock-actions .ktp { display: none; } }
@media (max-width: 760px) {
  /* the dock keeps 16px off both sides, clear of the system's back-gesture edge, and the bar takes all that is left */
  #dock { width: calc(100% - 32px); bottom: max(10px, env(safe-area-inset-bottom)); padding-right: 8px; }
  #dock { --ball-x: 6px; }
  #dock .search-wrap { min-width: 190px; }
  #store-btn { width: 44px; height: 44px; }
}
/* the glance dial: clear of the notch and the gesture edge, its away button outside the face, never over it */
.gl-widget { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
@media (pointer: coarse) {
  .gl-widget .gl-away { top: -8px; right: -8px; }
}
/* a phone on its side: the dock is low and slim, the dial smaller, so the two never meet */
@media (max-height: 500px) and (max-width: 1000px) {
  :root { --dock-h: 62px; }
  #dock { --ball: 44px; padding-top: 5px; padding-bottom: 5px; padding-left: 54px; }
}
/* shell first (SPD9): the dock and the ball are in the first HTML; until js/main.js has joined them up their
   buttons wait, dimmed, and a press does nothing yet */
body.dew-booting #dock :is(#assistant, #store-btn, #clock, #try-full, #back, #search) { opacity: .5; pointer-events: none; }
body.dew-booting #dock { cursor: progress; }
/* SPD11: the shell frame at phone width is no busier than the loaded page: the install pill waits until main.js has
   decided (a phone that has seen the welcome keeps it away; a first visit gets it after the start) */
@media (max-width: 600px) { body.dew-booting #try-full { visibility: hidden; } }

/* SPD6: the one-time offer cards keep touch-size buttons (44 px) */
@media (pointer: coarse), (max-width: 760px) {
  .calm-card button { min-height: 44px; min-width: 44px; }
}

/* SPD6: on any touch screen (also a wide landscape phone) the dock buttons are 44 px */
@media (pointer: coarse) {
  #dock #store-btn { width: 44px; height: 44px; }
  #dock :is(#back, #try-full, #clock) { min-height: 44px; }
  #dock #clock { min-width: 44px; }   /* the time was 56×34 on a tablet and a phone on its side */
}

/* Where the clock sits (Settings > "Where the clock sits", right-click the clock; js/notices.js sets body[data-clock-place]).
   Bottom right is the default: the clock is the last thing on the dock's right, also with the round clock on and in the
   installed window (the title bar then shows none). Title bar: as in the window, bottom right elsewhere. Phones keep it hidden. */
@media (min-width: 761px) {
  body[data-clock-place="bottom-right"] #clock { display: inline-block; order: 1; }
  body[data-clock-place="bottom-right"] #wco-clock { display: none; }
  body[data-clock-place="hidden"] :is(#clock, #wco-clock) { display: none; }
}
@media (min-width: 761px) and (not (display-mode: window-controls-overlay)) {
  body[data-clock-place="titlebar"] #clock { display: inline-block; order: 1; }
}

/* ---- the family lock's padlock (js/lock.js, FM1): top right, in Meridian's row's place until the Earth is the desktop,
   then just under that row, where the clock widget starts (css/glance.css puts the widget below it). Round, 44 px: a
   finger finds it. Open padlock = unlocked, closed = locked (the shape says it, not only the colour). The Earth's
   row, the corner strips and every pop-up lie around it: it is above the strips (15) and chips (16) and below windows
   and pop-ups (30), so a window open there covers the padlock, never the other way. ---- */
#lock-btn {
  position: fixed; z-index: 17; right: 16px; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  top: max(16px, var(--earth-clear, 16px), calc(var(--wco-h, 0px) + 8px));
  display: grid; place-items: center; cursor: pointer; color: var(--muted);
  background: var(--glass-strong); border: 1px solid var(--rim); box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
#lock-btn svg { width: 24px; height: 24px; display: block; }
#lock-btn:hover, #lock-btn:focus-visible { color: var(--text); }
#lock-btn[data-state="on"] { color: var(--accent-text, var(--accent)); border-color: var(--accent); }
/* Open and not in use, the padlock is quiet (IDEA 592, FRONT-3): a small dim mark with no glass, rim or shadow, one layer deep. The button keeps its
   44 px, so the finger still finds it. Closed (data-state="on"), shut by a padlock, hovered, focused or pressed it is the clear round button above. */
#lock-btn[data-state="off"]:not([data-padlock="shut"]):not(:hover):not(:focus-visible):not(:active) {
  background: transparent; border-color: transparent; box-shadow: none; opacity: .55; }
#lock-btn[data-state="off"]:not([data-padlock="shut"]):not(:hover):not(:focus-visible):not(:active) svg { width: 18px; height: 18px; }
body.module-open #lock-btn, body.earth-touch #lock-btn { visibility: hidden; pointer-events: none; }
body:is(.in-earth, .earth-desk.earth-ready) #lock-btn { display: none; }   /* the full-screen Earth has its own row, and this button would lie under it anyway; the Meridian desktop carries the lock in its menu (MU2). Without Meridian (failed engine, simple globe) the button stays, so the lock is never out of reach */

/* ---- the volume button, the nature button and the mixer (js/volume.js, VB1-VB2): the padlock's neighbours, 44 px round, left of it
   in a row (volume next to the padlock, the nature note beside the volume). Same hide rules as the padlock. The mixer opens under
   them; the readout "Volume 45 %" fades in beside the row for about a second and lets every click through. ---- */
#volume-btn, #mixer-btn, #nature-btn {
  position: fixed; z-index: 17; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  top: max(16px, var(--earth-clear, 16px), calc(var(--wco-h, 0px) + 8px));
  display: grid; place-items: center; cursor: pointer; color: var(--muted);
  background: var(--glass-strong); border: 1px solid var(--rim); box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
#volume-btn { right: 68px; }
#mixer-btn { right: 120px; }   /* just behind the volume button (MIXER-QUICK) */
#nature-btn { right: 172px; }
#volume-btn svg, #mixer-btn svg, #nature-btn svg { width: 24px; height: 24px; display: block; }
#volume-btn:hover, #volume-btn:focus-visible, #mixer-btn:hover, #mixer-btn:focus-visible, #nature-btn:hover, #nature-btn:focus-visible { color: var(--text); }
#mixer-btn[aria-expanded="true"], #volume-btn[aria-expanded="true"] { color: var(--text); border-color: var(--accent); }
#nature-btn[data-state="on"] { color: var(--accent-text, var(--accent)); border-color: var(--accent); }
body.module-open :is(#volume-btn, #mixer-btn, #nature-btn, #volume-readout), body.earth-touch :is(#volume-btn, #mixer-btn, #nature-btn, #volume-readout) { visibility: hidden; pointer-events: none; }
body.in-earth :is(#volume-btn, #mixer-btn, #nature-btn, #volume-readout) { display: none; }
/* THREE-BUTTONS-OFF-1 (IDEA 664, William 2026-10-31): the three round sound buttons (music, mixer, volume) and the "Volume 45 %" note are OFF.
   The markup (index.html) and js/volume.js stay, so nothing breaks and the mixer still opens from Settings; sound lives in the panel's SOUND
   section and the speaker in the top bar. To bring them back: <html data-round-sound-buttons="on"> (one attribute, no other change). */
html:not([data-round-sound-buttons="on"]) :is(#volume-btn, #mixer-btn, #nature-btn, #volume-readout) { display: none; }
#volume-readout {
  position: fixed; z-index: 17; right: 228px; pointer-events: none; opacity: 0; transition: opacity .25s;
  top: calc(max(16px, var(--earth-clear, 16px), calc(var(--wco-h, 0px) + 8px)) + 10px);
  padding: 4px 12px; border-radius: 999px; font-size: 14px; line-height: 1.4; white-space: nowrap; color: var(--text);
  background: var(--glass-strong); border: 1px solid var(--rim);
}
#volume-readout.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #volume-readout { transition: none; } }
/* The mixer (MIXER-QUICK): columns. The main column stands at the left; SIX columns show beside it, the rest scroll sideways
   (.mx-cols is as wide as six columns, so six is exact at any panel width). A column: level, vertical slider, mute, name. */
#volume-mixer {
  position: fixed; z-index: 45; right: 16px; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 140px); overflow: auto;
  padding: 8px 12px 12px; border-radius: 16px; color: var(--text);
  background: var(--glass-strong); border: 1px solid var(--rim); box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
#volume-mixer[hidden] { display: none; }
#volume-mixer .mx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
#volume-mixer h2 { margin: 0; font-size: 16px; }
#volume-mixer .mx-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; }
#volume-mixer .mx-close:hover, #volume-mixer .mx-close:focus-visible { color: var(--text); }
#volume-mixer .mx-list { list-style: none; margin: 0; padding: 0; display: flex; }
#volume-mixer .mx-body { display: flex; align-items: stretch; gap: 6px; }
#volume-mixer .mx-main { flex: 0 0 auto; padding-right: 6px; border-right: 1px solid var(--rim); }
#volume-mixer .mx-cols { flex: 1 1 0; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 6px; }
#volume-mixer .mx-col { flex: 0 0 calc(100% / 6); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0; }
#volume-mixer .mx-main .mx-col { flex: 0 0 auto; width: 52px; }
#volume-mixer .mx-pct { font-size: 12px; color: var(--muted); min-height: 16px; font-variant-numeric: tabular-nums; }
#volume-mixer .mx-vslider { writing-mode: vertical-lr; direction: rtl; width: 44px; height: 132px; margin: 0; accent-color: var(--accent); cursor: pointer; }
#volume-mixer .mx-mute { width: 44px; height: 44px; max-width: 100%; border-radius: 50%; border: 1px solid var(--rim); background: transparent; cursor: pointer; font-size: 18px; color: var(--text); padding: 0; }
#volume-mixer .mx-mute[aria-pressed="true"] { border-color: #e5484d; }
#volume-mixer .mx-name { font-size: 12px; line-height: 1.2; text-align: center; max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#volume-mixer .mx-closed .mx-name { color: var(--muted); font-style: italic; }
#volume-mixer .mx-divider { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--rim); border-right: 1px solid var(--rim); margin: 0 4px; writing-mode: vertical-rl; font-size: 12px; color: var(--muted); }
#volume-mixer .mx-sub { margin: 12px 0 4px; font-size: 13px; color: var(--muted); }
#volume-mixer .mx-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
#volume-mixer .mx-devices, #volume-mixer .mx-feedback { margin-top: 8px; min-height: 44px; }
/* MIXER-QUICK step 5: where the sound goes and which microphone, only where the browser can say; the plain note about other programs */
#volume-mixer .mx-devs { margin-top: 8px; display: grid; gap: 6px; }
#volume-mixer .mx-dev { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
#volume-mixer .mx-dev span { flex: 0 0 92px; }
#volume-mixer .mx-dev select { flex: 1 1 auto; min-width: 0; min-height: 44px; font: inherit; font-size: 13px; color: var(--text); background: var(--glass-strong); border: 1px solid var(--rim); border-radius: 8px; padding: 0 8px; }
/* the first-visit hints step aside while the mixer is open, so none sits on a button of it */
body:has(#volume-mixer:not([hidden])) #first-run { opacity: 0; transition: opacity .15s; }
@media (max-width: 480px) { #volume-mixer { right: 8px; width: calc(100vw - 16px); padding: 6px 8px 10px; } #volume-mixer .mx-main .mx-col { width: 46px; } }

/* MX2: the "Explore the Moon" button on the screensaver, low and small until someone reaches for it; in the Moon view the same
   place holds "Back to Earth" and the cover lets every input through to the 3D Earth. 44 px to press; text on a dark pill at 4.5:1. */
.saver-explore {
  position: fixed; z-index: 45; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: calc(14px * var(--ts, 1)); cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, .62); border: 1px solid rgba(255, 255, 255, .4);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.saver-explore[hidden] { display: none; }
.saver-explore.show { opacity: .65; pointer-events: auto; cursor: pointer; }
.saver-explore:hover, .saver-explore:focus-visible { opacity: 1; }
.saver-explore:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#saver.exploring { pointer-events: none; cursor: auto; touch-action: auto; }
body:has(#saver.exploring) .saver-explore.show { opacity: .85; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .saver-explore { transition: none; } }
html[data-motion="reduce"] .saver-explore { transition: none; }

/* ---- The first screen hides its tools (William 2026-10-22, BACKLOG FV1-FV6) ---- */
/* FV2: the bar's "Back to Windows" flies into the menu from the second start (js/back-flight.js): a clone flies, the real button
   is not pressable meanwhile, then the note says where it lives, with OK. After the back-moved rule above so the flight can start
   from the button's place even when NC3 has hidden it. */
#back { max-width: 240px; }
body.back-flying:not(.phone-app) #back { display: inline-flex; visibility: hidden; pointer-events: none; }
body.back-flown:not(.phone-app) #back, body.back-noting:not(.phone-app) #back { display: none; }   /* gone from the bar once the note says so */
#back-ok { margin-left: 8px; min-height: 32px; }
.back-flight { position: fixed; pointer-events: none; z-index: 60; transform-origin: center; }
/* FV2b: the note stands beside the menu it names (js/main.js placeBackNote sets left, top and --arrow-x), with a small arrow
   at it: up at Meridian's menu on the Earth desktop, at the Dew ball on Dew's own desktop (.up: the note above the ball) */
#back-flown { position: fixed; z-index: 61; margin: 0; max-width: min(320px, calc(100vw - 24px)); padding: 6px 8px 6px 12px;
  border-radius: 12px; background: var(--dock-bg); color: var(--text); border: 1px solid var(--rim); box-shadow: var(--sheen);
  backdrop-filter: blur(14px); font-size: calc(13px * var(--ts)); line-height: 1.3; }
#back-flown::before { content: ""; position: absolute; left: var(--arrow-x, 50%); top: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: inherit; border: inherit; border-width: 1px 0 0 1px; transform: rotate(45deg); backdrop-filter: none; }
#back-flown.up::before { top: auto; bottom: -6px; border-width: 0 1px 1px 0; }
@media (pointer: coarse) { #back-ok { min-height: 44px; } }
/* FV3: the round order button (Meatballs) waits for the second start: "the meatball thing wont show on the first screen" */
body.first-start #order-btn { visibility: hidden; pointer-events: none; }
/* FV4: tools that wait for the mouse (js/near-reveal.js): hidden = no sight, no press; fades both ways (hiding waits for the fade,
   visibility flips after --mo-base; showing is at once). The setting off removes body.tools-shy, so every tool shows as before. */
body.tools-shy [data-near] { transition: opacity var(--mo-base, .26s), visibility 0s linear var(--mo-base, .26s); }
body.tools-shy [data-near]:not(.near-shown) { visibility: hidden; pointer-events: none; opacity: 0; }
body.tools-shy [data-near].near-shown { opacity: 1; transition-delay: 0s; }
/* FV6 (William: "I dont want it to have a white frame on it. rather I want the numbers to either have an outline or to change
   colours depending on the background ... keep it with the darkness setting. so if we request red, then we get that."): the dock
   clock keeps no border or background; the digits wear a halo in the opposite tone, and their colour is --text, which the shade
   slider turns red at its red end (js/looks.js RED_TOKENS). */
:root { --clock-halo: rgba(0, 0, 0, .85); }
html[data-theme="light"] { --clock-halo: rgba(255, 255, 255, .9); }
#clock { color: var(--text); border: 0; background: transparent;
  text-shadow: 0 0 2px var(--clock-halo), 0 1px 0 var(--clock-halo), 0 -1px 0 var(--clock-halo), 1px 0 0 var(--clock-halo), -1px 0 0 var(--clock-halo); }
html[data-contrast="high"] #clock { text-shadow: none; }

/* ---- padlocks (PA2; js/padlock-ui.js, js/padlock-gate.js, kit/padlock): the shared element wears Dew's own tokens ---- */
dew-padlock { --paper: var(--solid); --ink: var(--text); --accent-ink: var(--on-accent); }
.pad-ask { position: fixed; inset: 0; z-index: 9100; display: grid; place-items: center; padding: 16px; background: rgba(3,5,10,.6); }
.pad-ask-box { width: min(360px, 100%); box-sizing: border-box; padding: 18px 20px; border-radius: var(--radius, 14px); background: var(--solid); color: var(--text);
  border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.5); display: grid; gap: 10px; }
.pad-ask-box p { margin: 0; }
.pad-code { box-sizing: border-box; min-width: 0; width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; letter-spacing: .2em; }
.pad-row, .pad-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pad-form .pad-code { width: 11em; flex: 0 1 auto; }
.pad-msg { min-height: 1.2em; font-size: .9em; color: var(--muted); }
.pad-note { margin: 4px 0 0; color: var(--muted); }
.pad-switch { display: flex; width: fit-content; gap: 10px; align-items: center; cursor: pointer; }
.pad-switch + small { display: block; margin-top: 4px; }
.pad-list { margin: 4px 0 0; }
.pad-list .set-list-row { flex-wrap: wrap; gap: 8px; }
.pad-list .set-list-name small { display: block; color: var(--muted); }
.pad-mark { position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%;
  background: var(--solid); color: var(--text); border: 1px solid var(--line); pointer-events: none; z-index: 2; }
.pad-mark svg { width: 13px; height: 13px; display: block; }
.menu-item.pad-shut { position: relative; }
.menu-item.pad-shut .pad-mark { top: 50%; left: auto; right: 10px; transform: translateY(-50%); }
#lock-btn[data-padlock="shut"]::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 1px solid var(--solid); pointer-events: none; }
#lock-btn[data-padlock="shut"]::before { content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; z-index: 1; pointer-events: none;
  background: var(--on-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / contain no-repeat; }