/* Libreria grafica · il guscio dell'app: base, barre di vetro che galleggiano sopra il contenuto, home, famiglie, elemento, cerca, impostazioni, guida.
   I componenti veri stanno in web/ds/ (la libreria); qui solo ciò che serve a mettere insieme le schermate. */
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 400 var(--t-body)/1.5 var(--font); overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; }
h1, h2, h3, p { margin: 0; } a { color: inherit; text-decoration: none; } svg { display: block; flex: none; } .ds-i { display: inline-block; }
:focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; border-radius: var(--r-s); } [tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--soft-2); }
html.kb-lock, html.kb-lock body { position: relative; }

/* ---- il guscio: alto quanto l'area VISIBILE (--app-h, scritta da viewport.js da innerHeight e visualViewport, non dalla variabile di Telegram) ---- */
#app { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100%); display: flex; flex-direction: column; background: var(--bg); overflow: hidden; isolation: isolate; }
#app::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 36% at 0% 0%, rgb(var(--accent-rgb) / calc(var(--stage-a) * .95)), transparent 72%), radial-gradient(60% 32% at 100% 5%, rgb(var(--accent-2-rgb) / calc(var(--stage-a) * .75)), transparent 72%),
    radial-gradient(90% 38% at 50% 104%, rgb(var(--accent-3-rgb) / calc(var(--stage-a) * .75)), transparent 72%); }
#view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* animation-fill-mode "backwards": con "forwards" una transform finita resterebbe il blocco contenitore dei figli fixed (verificato) */
.screen.push { animation: push var(--d3) var(--ease) backwards; } .screen.fade { animation: fade var(--d2) var(--ease) backwards; }
@keyframes push { from { opacity: 0; transform: translateX(28px); } } @keyframes fade { from { opacity: 0; } }

/* barra in alto: vetro sopra il contenuto che scorre */
.tb { position: absolute; top: 0; left: 0; right: 0; z-index: 8; min-height: calc(56px + var(--sat)); padding: var(--sat) calc(var(--sar) + 12px) 0 calc(var(--sal) + 16px); border-radius: 0 0 var(--r-l) var(--r-l); }
.tb.has-back { padding-left: calc(var(--sal) + 10px); }
.tb .logo { width: 34px; height: 34px; border-radius: calc(11px * var(--rs) + 3px); display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 18px -8px var(--glow-c), inset 0 1px 0 rgb(255 255 255 / .4); }
.tb .ds-topbar__title { letter-spacing: -.02em; }
.tt { position: relative; overflow: hidden; } .tt__i { position: absolute; inset: 0; display: grid; place-items: center; transition: transform var(--d3) var(--spring), opacity var(--d2); }
.tt .ds-i { filter: drop-shadow(0 0 calc(6px * var(--glow)) var(--glow-c)); color: var(--accent-text); }
.tt__moon { opacity: 0; transform: rotate(-70deg) scale(.4); } [data-theme="dark"] .tt__sun { opacity: 0; transform: rotate(70deg) scale(.4); } [data-theme="dark"] .tt__moon { opacity: 1; transform: none; }

.scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-top: calc(var(--sat) + 72px); }
.page { width: 100%; max-width: 640px; margin: 0 auto; display: grid; gap: var(--s4); align-content: start; padding: calc(var(--sat) + 56px + 14px) calc(var(--sar) + 16px) calc(var(--sab) + 108px) calc(var(--sal) + 16px); }
.screen--detail .page { padding-bottom: calc(var(--sab) + 104px); }

/* barra in basso */
#tabs { position: absolute; z-index: 20; left: 0; right: 0; bottom: calc(var(--sab) + 10px); margin: 0 auto; width: min(calc(100% - 24px), 520px); }
#app.no-tabs #tabs, html[data-kb] #tabs { display: none; }
.actbar { position: absolute; z-index: 20; left: 0; right: 0; bottom: calc(var(--sab) + 12px); margin: 0 auto; width: min(calc(100% - 24px), 616px); display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: calc(var(--r-xl) + 4px); }
.actbar .grow { flex: 1; } html[data-kb] .actbar { display: none; }

/* ---- Esplora ---- */
.hero { display: grid; gap: 12px; justify-items: start; padding-top: 2px; }
.hero__h1 { font-size: clamp(28px, 8.6vw, 36px); line-height: 1.05; } .hero__lead { max-width: 34ch; font-size: 16.5px; } .hero__stats { font-variant-numeric: tabular-nums; }
.searchbtn { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-radius: calc(var(--r-l) + 6px); color: var(--muted); font-weight: 500; } .searchbtn span { flex: 1; }
.feat { position: relative; display: grid; gap: 12px; padding: 14px; border-radius: var(--r-xl); } .feat__h { display: flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); }
.feat__body { display: grid; gap: 12px; } .feat__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .feat__name { display: grid; min-width: 0; } .feat__name strong { font-size: 16px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec { margin-top: 8px; font: 750 22px/1.2 var(--font); letter-spacing: -.02em; }
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cat { position: relative; display: grid; align-content: end; gap: 3px; min-height: 120px; padding: 14px; border-radius: var(--r-l); overflow: hidden; transition: transform var(--d2) var(--ease); }
.cat::after { content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--accent-rgb) / .34), transparent); pointer-events: none; }
.cat:active { transform: scale(.97); } .cat:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 3px; }
.cat__ic { width: 46px; height: 46px; margin-bottom: 10px; border-radius: var(--r-m); display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 22px -10px var(--glow-c), inset 0 1px 0 rgb(255 255 255 / .35); }
.cat[data-tone="1"] .cat__ic { background: linear-gradient(135deg, var(--accent-2), var(--accent)); } .cat[data-tone="2"] .cat__ic { color: var(--accent-text); background: var(--soft); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .32); }
.cat__name { font: 700 16px/1.2 var(--font); letter-spacing: -.012em; } .cat__n { font-size: 12.5px; color: var(--muted); }
.foot { text-align: center; padding-top: 6px; }

/* ---- una famiglia e le sue carte ---- */
.cat-head { display: grid; gap: 12px; } .cat-head__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pv { min-width: 240px; flex: 1; max-width: 340px; }
.els { display: grid; gap: 16px; }
.el { display: grid; gap: 12px; padding: 12px; border-radius: var(--r-xl); content-visibility: auto; contain-intrinsic-size: auto 320px;
  background: rgb(var(--glass-rgb) / calc(var(--glass-alpha) + .12)); border: 1px solid var(--glass-line); box-shadow: var(--shadow-1), inset 0 1px 0 var(--glass-hi); }
.el__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 0 6px; } .el__name { font: 700 16.5px/1.25 var(--font); letter-spacing: -.012em; min-width: 0; }
.el__stages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } .el__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: center; align-content: center; min-height: 96px; }
.ds-stage--start { justify-items: stretch; } .ds-stage--row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.el__tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px 0; font: 700 11px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .el__tag.is-day .ds-i { color: #D98A00; } .el__tag.is-night .ds-i { color: var(--accent-text); }
.el__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .el__tags { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; } .el__acts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.detail { display: grid; gap: 14px; } .detail__meta { display: flex; flex-wrap: wrap; gap: 8px; } .detail__code, .detail__rel { display: grid; gap: 10px; }
.code { margin: 0; padding: 14px 16px; max-height: 340px; overflow: auto; border-radius: var(--r-l); background: #0E1020; color: #E7E9F8; font: 500 12.5px/1.6 var(--mono); white-space: pre; tab-size: 2; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), var(--shadow-1); -webkit-overflow-scrolling: touch; }
.code:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; } .tk-t { color: #8FB4FF; } .tk-a { color: #D3A8FF; } .tk-s { color: #9BE3A8; } .tk-c { color: #8A90AE; font-style: italic; } .tk-p { color: #9DA3C4; }
.row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: var(--r-l); color: var(--text); background: rgb(var(--glass-rgb) / calc(var(--glass-alpha) + .1)); border: 1px solid var(--glass-line); box-shadow: var(--shadow-1); transition: transform var(--d1) var(--ease); }
.row:active { transform: scale(.985); } .row__ic { width: 42px; height: 42px; flex: none; border-radius: var(--r-m); display: grid; place-items: center; color: var(--accent-text); background: var(--soft); }
.row__main { flex: 1; min-width: 0; display: grid; } .row__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row__sub { font-size: 13px; color: var(--muted); } .row > .ds-i:last-child { color: var(--faint); }
.chips { margin: 0 calc(var(--sar) * -1 - 16px) 0 calc(var(--sal) * -1 - 16px); padding: 2px calc(var(--sar) + 16px) 4px calc(var(--sal) + 16px); } .res-count { padding-left: 4px; } .hint { display: grid; gap: 12px; padding-top: 4px; }
.empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 36px 12px; } .empty p { max-width: 34ch; }
.empty__mark { width: 78px; height: 78px; border-radius: calc(26px * var(--rs) + 6px); display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* ---- impostazioni ---- */
.live { position: sticky; top: 0; z-index: 4; display: grid; gap: 12px; padding: 12px; margin-top: -2px; box-shadow: var(--shadow-2); } .live__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live__card { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--r-l); } .live__bar { flex: 1; min-width: 80px; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.live__bar i { display: block; width: 62%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 calc(14px * var(--glow)) var(--glow-c); }
.set { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-xl); } .set__h { font: 700 12.5px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .set__t { font-weight: 650; } .set__slider { display: grid; gap: 4px; }
.sw-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.sw { aspect-ratio: 1; border-radius: 50%; background: var(--c); color: transparent; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .3), 0 8px 16px -8px var(--c); transition: transform var(--d2) var(--spring), box-shadow var(--d2); }
.sw:active { transform: scale(.9); } .sw[aria-pressed="true"] { color: var(--ck, #fff); transform: scale(1.06); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c), 0 0 calc(18px * var(--glow)) var(--c); }
.hexrow { display: flex; align-items: center; gap: 10px; } .hexrow .ds-input { flex: 1; } .hexrow input { text-transform: uppercase; font-family: var(--mono); letter-spacing: .04em; }
.sw-pick { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); box-shadow: var(--shadow-1); } .sw-pick .ds-i { filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5)); }
.sw-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ds-range--hue::-webkit-slider-runnable-track { background: linear-gradient(90deg, hsl(0 82% 58%), hsl(60 82% 58%), hsl(120 82% 58%), hsl(180 82% 58%), hsl(240 82% 58%), hsl(300 82% 58%), hsl(360 82% 58%)) !important; } .ds-range--hue::-moz-range-track { background: linear-gradient(90deg, hsl(0 82% 58%), hsl(60 82% 58%), hsl(120 82% 58%), hsl(180 82% 58%), hsl(240 82% 58%), hsl(300 82% 58%), hsl(360 82% 58%)); }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; } .kv span { color: var(--muted); }
.step { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; border-radius: var(--r-l); } .step__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.step__body { display: grid; gap: 8px; min-width: 0; justify-items: start; } .step__body .code { width: 100%; }

/* ---- avvio ---- */
.splash { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg); transition: opacity var(--d3) var(--ease); } .splash.out { opacity: 0; pointer-events: none; }
.splash__mark { width: 84px; height: 84px; border-radius: 28px; display: grid; place-items: center; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 20px 50px -14px var(--glow-c), inset 0 1px 0 rgb(255 255 255 / .4); animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.93); opacity: .8; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- toast dell'app (glass), sopra la barra in basso e alzati sopra la tastiera ---- */
.toasts { position: fixed; z-index: 220; left: 0; right: 0; bottom: calc(var(--kb, 0px) + var(--sab) + 92px); display: grid; justify-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
#layer.sheet-open .toasts { bottom: auto; top: calc(var(--app-top, 0px) + var(--sat) + 12px); }
.toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; max-width: min(92vw, 420px); padding: 12px 16px; border-radius: var(--r-l); font: 650 14.5px/1.3 var(--font); color: var(--text);
  background: rgb(var(--glass-rgb) / calc(var(--glass-alpha) + .25)); border: 1px solid var(--glass-line); box-shadow: var(--shadow-2), 0 0 calc(22px * var(--glow)) var(--glow-c), inset 0 1px 0 var(--glass-hi); animation: toast-in var(--d3) var(--spring) backwards; }
.toast .ds-i { color: var(--ok); font-size: 20px; } .toast.error .ds-i { color: var(--err); } .toast span { min-width: 0; overflow-wrap: anywhere; }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity var(--d2), transform var(--d2); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.92); } }

@media (min-width: 720px) { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }


/* ---- sheets: a bottom sheet on phones, a centred dialog on wide screens.
   KEYBOARD: bottom is var(--kb): on iOS the keyboard covers the bottom of the layout viewport, so the sheet is lifted by what the keyboard covers.
   Where the window itself shrinks (Telegram on Android, simulated shrink) --kb is 0 and the sheet is already above the keyboard. */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; transition: opacity var(--d2) var(--ease); }
.scrim.on { opacity: 1; }
/* The page behind a sheet is blurred (native look, and it hides the page resizing behind the sheet when the keyboard comes). The scrim's opacity fades the blur in and out with it. Where the
   browser cannot blur, the scrim alone stays. If it stutters on a weak phone, lower --scrim-blur in tokens.css. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .scrim { -webkit-backdrop-filter: blur(calc(var(--blur-px) * .3)); backdrop-filter: blur(calc(var(--blur-px) * .3)); }
}
.scrim:not(.on), .sheet:not(.on) { pointer-events: none; }        /* while it slides out (or before it slides in) a tap goes through to the page */
.sheet { position: fixed; z-index: 41; left: 0; right: 0; bottom: var(--kb, 0px); display: flex; flex-direction: column;
  max-height: min(calc(var(--app-h, 100vh) - var(--sat) - var(--s4)), 720px); background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; border-top: 1px solid var(--glass-line);
  box-shadow: var(--shadow-3); padding-bottom: var(--sab); touch-action: pan-y; transform: translateY(100%);
  transition: transform var(--d3) var(--ease), bottom var(--d2) var(--ease); }
.sheet.on { transform: none; }
/* ---- sheets with a text field (class has-field, set by ui.js). js/sheetlift.js decides WHEN; this is how they move (references/ui-pitfalls.md K14 to K19).
   While a field has the focus it sets html.kb-lift (+ --lift-full, the window's height with no keyboard), and when the keyboard starts to rise --lift-kb (the height it covers).
   The sheet is then placed from the TOP of the window: #layer becomes a box at top: 0 with a px height, the sheet sits at the bottom of it (position: absolute; bottom: <kb px>).
   Nothing depends on where the bottom of the window is, so the window shrinking under the sheet changes nothing (iOS lays position: fixed out against a layout viewport that follows
   the new height one frame late: a handover to `bottom: 0` flashed the sheet 308 px low). Nothing animated contains a percentage. The sheet keeps its height (its bottom padding is
   frozen at the value it had on focus) and so rises as one piece.
   WHY `bottom` AND NOT `transform`: iOS moves its native text caret when the page LAYS OUT. A transform runs on the compositor and lays nothing out, so the caret stayed behind and
   then jumped. `bottom` is a layout animation of one small box: cheap, and the caret follows the sheet to within 2 px.
   UP: the lower envelope of the keyboard's motion, measured on an iPhone in three openings: never ahead of it, at most 5 px behind (its 11 px shadow strip hides that).
   DOWN (the keyboard hides, the sheet stays open): the keyboard needs ~165 ms, nearly linear; the sheet takes 120 ms so that it is always ahead of it.
   BELOW the sheet: the keyboard has rounded top corners and the page shows through them. Before the window shrinks that is the page under the sheet's shadow: the sheet's own colour is
   painted 24 px below it (the first shadow). After it shrinks it is what Telegram paints under the page: tg.js paintBelow() gives that the sheet's colour for as long as the lift lasts. */
@media (max-width: 719.98px) {
  html.kb-lift #layer { position: fixed; top: 0; left: 0; right: 0; height: var(--lift-full, 100vh); }
  html.kb-lift .sheet.has-field { position: absolute; top: auto; bottom: var(--lift-kb, 0px); padding-bottom: var(--lift-pad, var(--sab));
    max-height: min(calc(var(--lift-full, 100vh) - var(--lift-want, 0px) - var(--sat, 0px) - var(--s3)), 720px);
    box-shadow: 0 24px 0 0 var(--surface), var(--shadow-3);
    transition: transform var(--d3) var(--ease), bottom 420ms cubic-bezier(.26, .8, .16, .96); }
  html.kb-lift-down .sheet.has-field { transition: transform var(--d3) var(--ease), bottom 120ms linear; }
  html.kb-lift-snap .sheet.has-field, html.kb-lift .sheet.has-field.instant { transition: none; }     /* the change of placement itself must not animate */
}
/* startViewport({ sheetMode: 'top' }): the alternative that needs no keyboard arithmetic at all. A sheet with a field hangs from the top of the screen, where the field is visible with
   or without a keyboard, so WebKit has nothing to scroll and nothing moves when the keyboard comes. Fine for short forms; a tall sheet should scroll inside. */
html.kb-top .sheet.has-field { top: calc(var(--sat, 0px) + var(--s3)); bottom: auto; border-radius: var(--r-xl); transform: translateY(-115%); }
html.kb-top .sheet.has-field.on { transform: none; }
html.kb-top .sheet.has-field .sheet-grip { display: none; }
.sheet.instant { transition: none; transform: none; opacity: 0; }       /* leaving while the keyboard is up: gone at once, no slide over a screen that is changing size */
.sheet-grip { padding: 10px 0 2px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.sheet-grip i { width: 40px; height: 4px; border-radius: 2px; background: var(--border); opacity: .6; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s5) var(--s2) calc(var(--sal) + var(--s5)); }
.sheet-head h2 { font-size: var(--t-body); font-weight: 700; min-width: 0; }
.sheet-body { overflow: auto; min-height: 0; display: grid; gap: var(--s4); align-content: start; padding: var(--s2) calc(var(--sar) + var(--s5)) var(--s5) calc(var(--sal) + var(--s5));
  overscroll-behavior: contain; scroll-padding: var(--s6) 0; }
.sheet-foot { display: grid; gap: var(--s2); padding: var(--s2) calc(var(--sar) + var(--s5)) var(--s4) calc(var(--sal) + var(--s5)); }
@media (min-width: 720px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: calc(var(--app-top, 0px) + var(--app-h, 100vh) / 2); width: min(480px, 92vw); border-radius: var(--r-xl); padding-bottom: 0; opacity: 0;   /* centred in the VISIBLE area, keyboard or not */
    transform: translate(-50%, -46%) scale(.97); transition: transform var(--d3) var(--ease), opacity var(--d2); }
  .sheet.on { transform: translate(-50%, -50%); opacity: 1; }
  .sheet-grip { display: none; }
}