/* Quiet Surfaces · component styles. Every colour, font, space, radius, shadow, blur and duration comes from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* The display face is condensed with its width axis, which the generated type classes cannot carry. */
.display-large, .display-page, .display-title { margin: 0; text-wrap: balance; font-variation-settings: "wdth" 80, "opsz" 96; }
.display-lead { margin: 0; font-variation-settings: "wdth" 88, "opsz" 32; }

/* ---------- Surfaces ---------- */
.qs-surface { position: relative; padding: var(--qs-pad, var(--space-7)); color: var(--ink); border-radius: var(--radius-xl); }
.qs-surface--ground { background: var(--bg); }
.qs-surface--panel { --qs-pad: 16px 18px; border-radius: var(--radius-md); background: var(--glass); border: 1px solid var(--stroke); }
.qs-surface--glass { background: var(--sheet); backdrop-filter: blur(var(--blur-sheet)) saturate(1.9); -webkit-backdrop-filter: blur(var(--blur-sheet)) saturate(1.9); box-shadow: var(--shadow-sheet), inset 0 1px 0 var(--sheet-edge), inset 0 0 0 1px color-mix(in srgb, var(--sheet-edge) 30%, transparent); }
.qs-surface--tinted { color: var(--on-media); color-scheme: dark; background: var(--tint); box-shadow: var(--shadow-tinted); }
.qs-surface--tinted .qs-surface--panel { border: 0; border-radius: var(--radius-lg); color: var(--on-media); background: rgba(255, 255, 255, .075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.qs-surface--tinted .qs-link { color: var(--hi); }

/* Panels and notes: flat groups inside any surface */
.qs-note { margin: 0; padding: 14px 16px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.45; color: var(--ink-2); background: var(--glass); border: 1px solid var(--stroke); }
.qs-link { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; }

/* ---------- Sheet: a glass surface that rises over the page ---------- */
.qs-sheet { padding: 0; border: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: min(92dvh, 900px); overflow: hidden; border-radius: var(--radius-xl) var(--radius-xl) 0 0; color: var(--ink); background: var(--sheet); backdrop-filter: blur(var(--blur-sheet)) saturate(1.9); -webkit-backdrop-filter: blur(var(--blur-sheet)) saturate(1.9); box-shadow: var(--shadow-sheet), inset 0 1px 0 var(--sheet-edge), inset 0 0 0 1px color-mix(in srgb, var(--sheet-edge) 30%, transparent); }
.qs-sheet::backdrop { background: var(--backdrop); }
@media (min-width: 700px) { .qs-sheet { margin: auto; border-radius: var(--radius-xl); } }
@media (prefers-reduced-motion: no-preference) {
  .qs-sheet[open] { animation: qs-rise var(--duration-move, 420ms) var(--ease-standard, cubic-bezier(.2, .8, .2, 1)); }
  @keyframes qs-rise { from { transform: translateY(60px); opacity: 0; } }
}
.qs-sheet__scroll { max-height: min(92dvh, 900px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); scrollbar-width: thin; scrollbar-color: var(--track-strong) transparent; }
.qs-sheet__close { position: absolute; top: 14px; right: 14px; z-index: 7; }
.qs-sheet__head { position: relative; padding: 26px var(--space-7) 6px; }
.qs-sheet__title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 80, "opsz" 96; font-size: 36px; line-height: .95; letter-spacing: -.03em; }
.qs-sheet__intro { margin: 0; max-width: 40ch; padding-right: 40px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.qs-sheet__body { display: grid; gap: var(--space-4); padding: 14px var(--space-7) 24px; }

/* ---------- Toast ---------- */
.qs-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); z-index: 20; width: max-content; max-width: min(88vw, 420px); padding: 12px 18px; border-radius: var(--radius-md); text-align: center; font-size: 14px; line-height: 1.35; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--stroke); backdrop-filter: blur(var(--blur-control)) saturate(1.6); -webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.6); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity var(--duration-base, 250ms) ease, transform var(--duration-base, 250ms) ease; }
.qs-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Media: one image, video or illustration, cropped to fill its frame ---------- */
.qs-media { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: var(--qs-ratio, 4 / 3); border-radius: var(--qs-radius, var(--radius-xl)); background: var(--track); }
.qs-media--square { --qs-ratio: 1 / 1; }
.qs-media--wide { --qs-ratio: 16 / 9; }
.qs-media--portrait { --qs-ratio: 3 / 4; }
.qs-media--raised { box-shadow: var(--shadow-raised); }
.qs-media > img, .qs-media > video, .qs-media > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--media-focus, 50% 50%); }
.qs-media__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--scrim) 0%, rgba(3, 5, 16, .42) 32%, rgba(3, 5, 16, 0) 58%); }
.qs-media__caption { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); z-index: 1; color: var(--on-media); }

/* Treatment: soft, blurred into a quiet ground (scaled past its edges so the blur never shows a rim) */
.qs-media--soft > img, .qs-media--soft > video, .qs-media--soft > svg { filter: blur(var(--blur-soft)) saturate(1.3); transform: scale(1.12); }

/* Treatment: dissolve, fading into the surface below over its last 96px so there is no edge */
.qs-media--dissolve { --qs-dissolve: linear-gradient(to bottom, #000 calc(100% - 96px), rgba(0, 0, 0, .957) calc(100% - 84px), rgba(0, 0, 0, .844) calc(100% - 72px), rgba(0, 0, 0, .684) calc(100% - 60px), rgba(0, 0, 0, .5) calc(100% - 48px), rgba(0, 0, 0, .316) calc(100% - 36px), rgba(0, 0, 0, .156) calc(100% - 24px), rgba(0, 0, 0, .043) calc(100% - 12px), transparent calc(100% - 2px)); -webkit-mask-image: var(--qs-dissolve); mask-image: var(--qs-dissolve); }

/* Treatment: ambient, enlarged and blurred behind the whole page */
.qs-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.qs-ambient__layer { position: absolute; inset: -18%; opacity: 0; transition: opacity var(--duration-slow, 900ms) ease; filter: blur(var(--blur-ambient)) saturate(1.35); }
.qs-ambient__layer.is-on { opacity: 1; }
.qs-ambient__layer > * { width: 100%; height: 100%; display: block; object-fit: cover; }
.qs-ambient::after { content: ""; position: absolute; inset: 0; background: var(--veil); }

/* ---------- Chip: a small glass label over media ---------- */
.qs-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 13px; border-radius: var(--radius-pill); white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--on-media); background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(var(--blur-chip)) saturate(1.4); -webkit-backdrop-filter: blur(var(--blur-chip)) saturate(1.4); }
.qs-chip--solid { color: var(--on-media-ink); background: var(--on-media); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.qs-chip svg { width: 16px; height: 16px; flex: none; }

/* ---------- Icon button: a round control with one icon ---------- */
.qs-iconbtn { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: var(--glass); border: 1px solid var(--stroke); backdrop-filter: blur(var(--blur-chip)); -webkit-backdrop-filter: blur(var(--blur-chip)); transition: transform var(--duration-press, 150ms) ease, background var(--duration-base, 250ms) ease, color var(--duration-base, 250ms) ease; }
.qs-iconbtn:active { transform: scale(.92); }
.qs-iconbtn:disabled { opacity: .3; cursor: default; }
.qs-iconbtn svg { width: 22px; height: 22px; }
.qs-iconbtn--sm { width: 36px; height: 36px; }
.qs-iconbtn--sm svg { width: 16px; height: 16px; }
.qs-iconbtn--on-media { color: var(--on-media); border-color: rgba(255, 255, 255, .3); background: linear-gradient(140deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12)); backdrop-filter: blur(var(--blur-chip)) saturate(1.5); -webkit-backdrop-filter: blur(var(--blur-chip)) saturate(1.5); box-shadow: var(--shadow-control); }
.qs-iconbtn--on-media[aria-pressed="true"] { color: var(--on-media-ink); background: var(--on-media); border-color: transparent; }
.qs-iconbtn[aria-pressed="true"] svg { fill: currentColor; }
.qs-iconbtn--on-media:focus-visible { outline: 3px solid var(--on-media); outline-offset: 2px; }

/* ---------- Floating action button ---------- */
.qs-fab { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(19px + env(safe-area-inset-bottom, 0px)); z-index: 5; width: 52px; height: 52px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--accent); border: 1px solid var(--sheet-edge); background: linear-gradient(140deg, color-mix(in srgb, var(--glass-strong) 70%, transparent), color-mix(in srgb, var(--glass) 55%, transparent)), color-mix(in srgb, var(--bg) 40%, transparent); backdrop-filter: blur(var(--blur-control)) saturate(1.8); -webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.8); box-shadow: var(--shadow-fab); transition: transform var(--duration-press, 150ms) ease; }
.qs-fab:active { transform: scale(.94); }
.qs-fab svg { width: 25px; height: 25px; }
.qs-fab__count { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--on-accent); background: var(--accent); }
.qs-fab__count[hidden] { display: none; }

/* ---------- Button ---------- */
.qs-btn { height: 54px; padding: 0 22px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--ink); background: var(--glass); border: 1px solid var(--stroke); transition: transform var(--duration-press, 150ms) ease, background var(--duration-base, 250ms) ease; }
.qs-btn:active { transform: scale(.97); }
.qs-btn svg { width: 16px; height: 16px; flex: none; }
.qs-btn--primary { color: var(--bg); background: var(--ink); border-color: transparent; }
.qs-btn--block { display: flex; width: 100%; }

/* ---------- Field: one text input and its button ---------- */
.qs-field { display: flex; gap: var(--space-3); }
.qs-input { flex: 1; min-width: 0; height: 54px; padding: 0 20px; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 16px; color: var(--ink); background: var(--glass); border: 1px solid var(--stroke); }
.qs-input::placeholder { color: var(--ink-2); }
.qs-field .qs-btn { flex: none; }

/* ---------- Liquid glass: controls floating on a tinted surface ---------- */
.qs-surface--tinted .qs-iconbtn, .qs-surface--tinted .qs-btn[aria-pressed="true"] { color: var(--on-media); border: 1px solid rgba(255, 255, 255, .26); background: linear-gradient(140deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .13)); backdrop-filter: blur(var(--blur-control)) saturate(1.8) brightness(1.08); -webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.8) brightness(1.08); box-shadow: var(--shadow-glass); }
.qs-surface--tinted .qs-btn--primary { color: var(--tint); background: var(--on-media); box-shadow: var(--shadow-primary); }
.qs-surface--tinted .qs-btn--primary[aria-pressed="true"] { color: var(--on-media); }

/* ---------- Viewer: media opened into a tinted surface (the far end of a shared-element move) ---------- */
.qs-viewer { position: fixed; inset: 0; z-index: 10; display: grid; align-content: center; justify-items: center; gap: var(--space-5); padding: var(--space-7); color: var(--on-media); color-scheme: dark; background: var(--tint); }
.qs-viewer[hidden] { display: none; }
.qs-viewer__stage { width: min(100%, 440px); }
.qs-viewer__caption { width: min(100%, 440px); }
.qs-viewer__close { position: absolute; top: 14px; right: 14px; }

/* ---------- Continuity: how a shared element travels ---------- */
::view-transition-group(qs-shared) { animation-duration: var(--duration-move, 420ms); animation-timing-function: var(--ease-standard, cubic-bezier(.2, .8, .2, 1)); }
::view-transition-old(qs-shared), ::view-transition-new(qs-shared) { width: 100%; height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--duration-base, 250ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01ms !important; }
}