/* ==========================================================================================================
   Thingvita v0.7 redesign: "glass and lifeline".
   A layer over style.css, so every screen keeps its markup and features. What it changes:
   - Controls float on glass above the content (after iOS 26 Liquid Glass): a floating capsule tab bar with a
     highlight that slides between tabs, a top bar that turns to glass as you scroll, glass sheets.
   - Shapes and motion after Material 3 Expressive: capsule buttons that squish and round when pressed, spring
     curves (Google's published web curves), bigger numbers.
   - Messages appear as a status pill at the top (like the Dynamic Island) instead of a toast at the bottom.
   - Skeleton loading, smooth "more details", scroll-driven effects, view transitions between screens.
   Everything is progressive: without a feature the app looks and works as before. Reduced motion, reduced
   transparency, more contrast and forced colours are all honoured at the end of this file.
   ========================================================================================================== */

:root {
  --bg: #f2f5f4; --surface-2: #f6f8f7; --surface-3: #e9eeec; --line: #e2e8e5; --line-2: #cfd8d4;
  --r-s: 12px; --r: 22px; --r-l: 30px; --r-xl: 36px;
  --hair: rgba(16, 32, 28, .07);
  --shadow-1: 0 0 0 1px var(--hair), 0 1px 2px rgba(16,32,28,.04), 0 4px 14px rgba(16,32,28,.05);
  --shadow-2: 0 0 0 1px var(--hair), 0 2px 6px rgba(16,32,28,.05), 0 14px 36px rgba(16,32,28,.10);
  --shadow-float: 0 1px 1px rgba(16,32,28,.05), 0 10px 30px rgba(16,32,28,.16), 0 24px 60px rgba(16,32,28,.10);
  /* glass: tinted from the surface, with a light rim on top, as Liquid Glass catches light */
  --glass: color-mix(in srgb, var(--surface) 68%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface) 84%, transparent);
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.35);
  --blur: blur(22px) saturate(1.8);
  /* Material 3 Expressive springs as web curves (m3.material.io/styles/motion/overview/specs) */
  --spring-fast: cubic-bezier(.42, 1.67, .21, .90); --spring: cubic-bezier(.38, 1.21, .22, 1); --spring-slow: cubic-bezier(.39, 1.29, .35, .98);
  --ease-fx: cubic-bezier(.31, .94, .34, 1);
  --accent-grad: linear-gradient(135deg, #12857b 0%, #0d6e66 55%, #0b5a54 100%);
  --t-3xl: 2.25rem;
  --tabbar-h: 68px;
}
:root[data-theme="dark"] {
  --bg: #0a100f; --surface: #121a18; --surface-2: #17201e; --surface-3: #1f2a27; --line: #232f2c; --line-2: #33413d;
  --hair: rgba(255,255,255,.07);
  --shadow-1: 0 0 0 1px var(--hair); --shadow-2: 0 0 0 1px var(--hair), 0 18px 40px rgba(0,0,0,.35);
  --shadow-float: 0 0 0 1px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.55);
  --glass: color-mix(in srgb, #18221f 62%, transparent); --glass-strong: color-mix(in srgb, #18221f 82%, transparent);
  --glass-rim: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.06);
  --accent-grad: linear-gradient(135deg, #6fe0d0 0%, #4fd1c0 55%, #36b8a7 100%);
  --card-border: transparent;
}

/* A quiet aurora behind everything, so the glass has something to show through. */
body { padding-bottom: calc(var(--tabbar-h) + 34px + env(safe-area-inset-bottom, 0px)); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 40% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
              radial-gradient(50% 35% at 0% 100%, color-mix(in srgb, #e8be74 10%, transparent), transparent 70%), var(--bg); }
h1 { font-weight: 800; letter-spacing: -.035em; }
h2 { font-weight: 780; letter-spacing: -.022em; }
.eyebrow { letter-spacing: .09em; font-weight: 750; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* ---------- top bar: clear at the top, glass once content scrolls under it (scroll-driven, no JS) ---------- */
header.bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .2s; }
header.bar .in { min-height: 60px; }
header.bar .iconbtn { border: 0; background: var(--glass-strong); box-shadow: var(--glass-rim), 0 0 0 1px var(--hair); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: 50%; }
.brand { font-size: 1.25rem; }
.brand svg { border-radius: 10px; box-shadow: 0 4px 12px rgba(13,110,102,.25); }
header.bar h2 { font-weight: 780; letter-spacing: -.02em; }
@supports (animation-timeline: scroll()) {
  header.bar { animation: bar-glass linear both; animation-timeline: scroll(root); animation-range: 0 72px; }
  @keyframes bar-glass {
    from { background: transparent; box-shadow: none; }
    to { background: var(--glass); box-shadow: 0 1px 0 var(--hair); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
  }
}
@supports not (animation-timeline: scroll()) {
  header.bar { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
}

/* ---------- floating glass tab bar with a sliding highlight ---------- */
nav.tabs { inset: auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px; padding: 0; border: 0; border-radius: 999px;
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--glass-rim), var(--shadow-float); max-width: calc(var(--wrap) - 8px); margin: 0 auto; }
nav.tabs .in { padding: 6px; align-items: center; gap: 2px; }
nav.tabs a { min-height: 56px; padding: 6px 2px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; align-content: center; isolation: isolate;
  transition: color .2s var(--ease-fx), transform .35s var(--spring-fast); }
nav.tabs a svg { width: 23px; height: 23px; transition: transform .35s var(--spring-fast); }
nav.tabs a:active { transform: scale(.92); }
nav.tabs a[aria-current="page"] { color: var(--accent-text); }
nav.tabs a[aria-current="page"]:not(.scan)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  view-transition-name: tab-pill; }
nav.tabs a[aria-current="page"] svg { transform: translateY(-1px) scale(1.06); }
nav.tabs a.scan .disc { width: 58px; height: 58px; margin-top: 0; border-radius: 22px; background: var(--accent-grad); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent); transition: border-radius .4s var(--spring), transform .35s var(--spring-fast); }
nav.tabs a.scan:active .disc, nav.tabs a.scan[aria-current="page"] .disc { border-radius: 50%; }
nav.tabs a.scan:active { transform: none; } nav.tabs a.scan:active .disc { transform: scale(.9); }
nav.tabs .dot { top: 4px; box-shadow: 0 0 0 2px var(--surface); }

/* ---------- surfaces ---------- */
.card, .li, .tile, .icard, .kind, .passport, .demo { border-color: transparent; }
.card { border-radius: var(--r); padding: 18px; box-shadow: var(--shadow-1); }
.card.flat { box-shadow: 0 0 0 1px var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.callout { border-radius: 18px; padding: 14px 16px; }
.wrap { gap: 18px; }

/* ---------- buttons: capsules that squish and square off a little when pressed (M3 Expressive shape morph) ---------- */
.btn { border-radius: 999px; min-height: 50px; padding: 12px 20px; font-weight: 700; letter-spacing: -.005em; border-color: var(--line-2);
  transition: transform .35s var(--spring-fast), border-radius .35s var(--spring), background .2s, box-shadow .2s, border-color .2s; }
.btn:active { transform: scale(.96); border-radius: 16px; }
.btn.primary { background: var(--accent-grad); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn.primary:hover { background: var(--accent-grad); filter: brightness(1.06); }
.btn.soft { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.btn.small { min-height: 38px; padding: 7px 14px; border-radius: 999px; }
.btn.small:active { border-radius: 12px; }
.btn.tile { border-radius: 22px; min-height: 84px; background: var(--surface); border: 0; box-shadow: var(--shadow-1); }
.btn.tile:active { border-radius: 28px; }
.btn.tile svg { width: 24px; height: 24px; padding: 0; color: var(--accent-text); }
.iconbtn { border-radius: 50%; transition: transform .3s var(--spring-fast); }
.iconbtn:active { transform: scale(.9); }
/* chips become a connected group (M3 Expressive replaces segmented buttons with these) */
.chip { min-height: 42px; border: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2); transition: border-radius .35s var(--spring), background .2s, transform .3s var(--spring-fast); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; border-radius: 14px; }
input.in, select.in { border-radius: 16px; min-height: 50px; background: var(--surface-2); border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s; }
input.in:focus, select.in:focus { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); outline: none; }
.pill { padding: 4px 10px; font-weight: 750; }

/* ---------- home: the band becomes a living aurora with rounded foot, the demo card turns to glass ---------- */
.band { margin-top: calc(-60px - env(safe-area-inset-top, 0px)); padding-top: calc(60px + env(safe-area-inset-top, 0px) + var(--s5)); border-bottom: 0;
  border-radius: 0 0 var(--r-xl) var(--r-xl); gap: 18px; padding-bottom: 26px; isolation: isolate;
  background: radial-gradient(70% 55% at 85% 10%, rgba(95,227,207,.32), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(232,190,116,.22), transparent 70%), linear-gradient(165deg, #0f2a2e 0%, #11393a 55%, #0c2426 100%); }
:root[data-theme="dark"] .band { background: radial-gradient(70% 55% at 85% 10%, rgba(95,227,207,.20), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(232,190,116,.12), transparent 70%), linear-gradient(165deg, #081a19 0%, #0c2524 100%); box-shadow: 0 0 0 1px var(--hair); }
.band::after { content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; right: -120px; top: -80px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 180deg, rgba(95,227,207,.0), rgba(95,227,207,.28), rgba(232,190,116,.22), rgba(95,227,207,0)); filter: blur(40px); animation: aurora 14s ease-in-out infinite alternate; }
@keyframes aurora { to { transform: translate(-90px, 70px) rotate(140deg) scale(1.15); } }
.band h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); line-height: 1.04; letter-spacing: -.04em; }
.band h1 em { background: linear-gradient(90deg, #5fe3cf, #e8be74); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band .badge { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.band .btn.primary { background: linear-gradient(135deg, #7ff0de, #5fe3cf 60%, #46cdb9); color: #04211d; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 28px rgba(95,227,207,.28); }
.band .btn.line { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.demo { border-radius: 26px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 24px 60px rgba(0,0,0,.35);
  transform: perspective(900px) rotateX(4deg); transform-origin: 50% 100%; transition: transform .5s var(--spring); }
.demo:active { transform: perspective(900px) rotateX(0) scale(.98); }
.demo .top { background: transparent; padding: 14px 16px 12px; }
.demo .top .pic { border: 0; width: 46px; height: 46px; border-radius: 14px; }
.demo .grid { border-top: 0; padding: 0 10px 10px; gap: 6px; }
.demo .grid > span { border: 0; border-radius: 14px; background: var(--surface-2); padding: 10px 12px; }
.demo .go { border-top: 0; padding-top: 4px; }
.band .glance .ring { width: 64px; height: 64px; }
.band .glance .ring::before { inset: 7px; background: #10302f; }
.stats { padding: 16px 10px; }
.stats b { font-size: 1.75rem; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.how li::before { border-radius: 14px; background: var(--accent-grad); color: var(--on-accent); }
.how-art { border-radius: var(--r); box-shadow: var(--shadow-1); }
.sec-h { margin-top: 10px; }
.sec-h h2 { font-size: 1.3rem; }
.sec-h svg { width: 22px; height: 22px; padding: 3px; box-sizing: content-box; border-radius: 9px; background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Home tiles as a bento: the first tile is the hero number, the rest are compact. */
.tiles.four { grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { border-radius: var(--r); padding: 14px 16px 16px; gap: 0; box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.tile .v { font-size: 1.7rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
.tile .l { font-size: 12.5px; }
.tile .ti { width: 36px; height: 36px; border-radius: 12px; margin-bottom: 10px; }
.tiles.four .tile::after { content: ""; position: absolute; right: 0; top: 0; transform: translate(30%, -30%); width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); pointer-events: none; }
.tile.bad { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--bad) 35%, transparent), var(--shadow-1); }

/* Product cards and rows */
.igrid { gap: 12px; }
.icard { border-radius: var(--r); box-shadow: var(--shadow-1); padding-bottom: 14px; }
.icard .ipic { margin: 6px 6px 0; border-radius: 18px; }
.icard .t { padding: 10px 14px 0; letter-spacing: -.01em; }
.icard .s { padding: 2px 14px 0; }
.list { gap: 10px; }
.li { border-radius: var(--r); box-shadow: var(--shadow-1); padding: 12px 14px 12px 12px; min-height: 76px; }
.li .thumb { width: 54px; height: 54px; border-radius: 16px; }
.li .t { letter-spacing: -.01em; }
.list.plain .li { box-shadow: 0 0 0 1px var(--line); }

/* ---------- scanner: rounder viewfinder, glass tools, corners that breathe, mode chips that scroll ---------- */
.viewfinder { border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.viewfinder .frame { inset: 24% 11%; border-radius: 26px; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); animation: breathe-frame 2.6s ease-in-out infinite; }
.viewfinder .frame::before, .viewfinder .frame::after { border-radius: 26px; border-width: 4px; }
@keyframes breathe-frame { 50% { transform: scale(1.025); } }
.viewfinder .laser { height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--mint), transparent); box-shadow: 0 0 18px 3px rgba(95,227,207,.6); }
.viewfinder .msg { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 999px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.viewfinder .tools .iconbtn { background: rgba(0,0,0,.35); border: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.viewfinder.hit .frame { animation: hit .5s var(--spring-fast); }
@keyframes hit { 40% { transform: scale(.94); } }
.viewfinder:has(.off) { background: radial-gradient(80% 60% at 80% 0%, rgba(95,227,207,.22), transparent 70%), linear-gradient(160deg, #0f2a2e, #0c2426); }
/* the kinds of thing you can scan: one row of chips you can swipe (new scan types join the row automatically) */
.kinds { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 2px max(16px, env(safe-area-inset-left, 0px)) 4px; scrollbar-width: none; }
.kinds::-webkit-scrollbar { display: none; }
.kind { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px; font-size: var(--t-sm); font-weight: 700; color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); justify-items: start; text-align: left; white-space: nowrap; }
.kind svg { width: 22px; height: 22px; padding: 4px; box-sizing: content-box; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- loading: a skeleton of the passport filling in, with the checks ticking beside it ---------- */
.skel { display: grid; gap: 0; overflow: hidden; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-2); }
.skel .sh { position: relative; overflow: hidden; background: var(--surface-3); border-radius: 10px; }
.skel .sh::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); animation: skel 1.3s ease-in-out infinite; }
@keyframes skel { to { transform: translateX(100%); } }
.skel .s-hero { height: 176px; border-radius: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.skel .s-hero .spinner { width: 46px; height: 46px; border-width: 4px; border-color: color-mix(in srgb, var(--accent) 18%, transparent); border-top-color: var(--accent); }
.skel .s-body { padding: 18px; display: grid; gap: 10px; }
.skel .s-l1 { height: 12px; width: 38%; } .skel .s-l2 { height: 24px; width: 78%; } .skel .s-l3 { height: 12px; width: 55%; }
.skel .s-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 18px 18px; }
.skel .s-fact { height: 74px; border-radius: 16px; }
.skel .s-steps { padding: 16px 18px 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.skel .s-steps h2 { font-size: var(--t-md); }
.steps li { transition: color .3s; }
.steps li::before { transition: background .3s var(--ease-fx), border-color .3s, transform .4s var(--spring-fast); }
.steps li.done { color: var(--ink); }
.steps li.done::before { transform: scale(1.08); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 9px no-repeat; }

/* ---------- passport: taller hero that shrinks as you scroll, facts as rounded bento cells ---------- */
.passport { border-radius: var(--r-l); box-shadow: var(--shadow-2); }
.hero { height: 224px; }
.hero .plate { border-radius: 36px; }
.hero.pic .plate { width: 176px; height: 176px; border-radius: 40px; }
.hero .photobtn { border-radius: 999px; background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--glass-rim), 0 4px 14px rgba(0,0,0,.12); }
.passport .hero .plate { view-transition-name: hero-pic; }
@supports (animation-timeline: scroll()) {
  .passport .hero .plate { animation: pop .55s cubic-bezier(.2, .9, .3, 1.25) both, plate-shrink linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 220px; }
  @keyframes plate-shrink { to { transform: translateY(26px) scale(.82); } }
}
.passport .head { padding: 18px 18px 14px; }
.passport .head h1 { font-size: 1.6rem; letter-spacing: -.03em; }
.stamp { border-radius: 10px; top: 14px; right: 16px; background: color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.facts { gap: 8px; background: transparent; border-top: 0; padding: 4px 12px 12px; }
.fact { border-radius: 20px; background: var(--surface-2); padding: 14px; box-shadow: inset 0 0 0 1px var(--hair); transition: transform .35s var(--spring-fast), background .2s; }
button.fact:active { transform: scale(.97); }
.fact .v { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; }
.fact .k { letter-spacing: .07em; }
.energyblock { margin: 0 12px 12px; padding: 14px; border-top: 0; border-radius: 20px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hair); }
.meter { height: 10px; border-radius: 6px; }
.meter i { border-radius: 6px; background: var(--accent-grad); }
.meter.ok i { background: linear-gradient(90deg, #2ea866, var(--ok)); } .meter.warn i { background: linear-gradient(90deg, #e09a2c, var(--warn)); } .meter.bad i { background: linear-gradient(90deg, #e0584d, var(--bad)); }
.recall { border-radius: 18px; }
.labelstrip { border-radius: 18px; }

/* "More details" opens smoothly to its height where the browser can (interpolate-size), instantly elsewhere. */
:root { interpolate-size: allow-keywords; }
details.more::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--spring), content-visibility .4s allow-discrete; }
details.more[open]::details-content { block-size: auto; }
details.more summary { min-height: 52px; }
details.more summary svg { transition: transform .4s var(--spring-fast); }

/* ---------- sheets and dialogs: glass backdrop, deeper corners, spring in and out ---------- */
dialog.sheet { border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -10px 50px rgba(0,0,0,.18); touch-action: pan-y;
  transition: transform .45s var(--spring), opacity .2s, overlay .45s allow-discrete, display .45s allow-discrete; }
dialog.sheet[open] { animation: none; transform: none; opacity: 1; }
@starting-style { dialog.sheet[open] { transform: translateY(100%); opacity: 1; } }
dialog.sheet::backdrop { background: rgba(5,12,10,.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .3s, overlay .3s allow-discrete, display .3s allow-discrete; }
@starting-style { dialog.sheet[open]::backdrop { opacity: 0; } }
dialog.sheet .grab { width: 44px; height: 5px; margin: 10px auto -10px; background: color-mix(in srgb, var(--ink) 22%, transparent); cursor: grab; }
dialog.sheet.dragging { transition: none; }
dialog.tour { border-radius: var(--r-xl); }
dialog.tour::backdrop { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tour .dots i.on { background: var(--accent-grad); }

/* ---------- status pill at the top (Dynamic Island style), grows out of a dot ---------- */
.toast { top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto; display: flex; align-items: center; gap: 10px; padding: 11px 18px 11px 12px; border-radius: 999px;
  background: #0b0f0e; color: #f2f7f5; box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06); font-weight: 700; letter-spacing: -.005em; z-index: 60;
  animation: island .55s var(--spring) both; transform-origin: 50% 0; }
.toast::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: #5fe3cf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304211d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
  animation: island-dot .5s .12s var(--spring-fast) both; }
@keyframes island { from { transform: translateX(-50%) scale(.35, .6); opacity: 0; filter: blur(4px); } 60% { opacity: 1; filter: none; } }
@keyframes island-dot { from { transform: scale(0); } }
:root[data-theme="dark"] .toast { background: #000; box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1); }

/* ---------- view transitions between screens (Material "shared axis": old fades back, new rises in) ---------- */
::view-transition-old(root) { animation: vt-out .2s var(--ease-fx) both; }
::view-transition-new(root) { animation: vt-in .38s var(--spring) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
html.vt-back::view-transition-new(root) { animation-name: vt-in-back; }
@keyframes vt-in-back { from { opacity: 0; transform: translateY(-10px); } }
::view-transition-group(hero-pic) { animation-duration: .45s; animation-timing-function: var(--spring); }
::view-transition-group(tab-pill) { animation-duration: .45s; animation-timing-function: var(--spring); }
::view-transition-old(tab-pill), ::view-transition-new(tab-pill) { height: 100%; }
/* the bars stay put while the page changes under them */
header.bar { view-transition-name: topbar; } nav.tabs { view-transition-name: tabbar; }
::view-transition-old(topbar), ::view-transition-new(topbar), ::view-transition-old(tabbar), ::view-transition-new(tabbar) { animation: none; }
/* while a view transition runs, the old "rise in" class would double up */
html.vt #main.enter > * { animation: none; }

/* ---------- splash: matches the new band ---------- */
#splash { background: radial-gradient(70% 55% at 85% 10%, rgba(95,227,207,.28), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(232,190,116,.18), transparent 70%), linear-gradient(165deg, #0f2a2e, #0c2426); }

/* ---------- settings-like rows read as grouped lists ---------- */
.switch span { background: var(--line-2); }
.switch input:checked + span { background: var(--accent-grad); }
.switch span::after { transition: transform .4s var(--spring-fast), width .2s; }
.switch input:active + span::after { width: 28px; }
.switch input:checked:active + span::after { transform: translateX(14px); }

/* ---------- wide screens: the app sits in a phone-width column with breathing room ---------- */
@media (min-width: 720px) { :root { --wrap: 600px; } .band { border-radius: var(--r-xl); margin-top: 0; padding-top: var(--s6); } }

/* ---------- accessibility: honour what people ask their phone for ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--surface); --glass-strong: var(--surface); --blur: none; }
  dialog.sheet::backdrop, dialog.tour::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5,12,10,.6); }
}
@media (prefers-contrast: more) {
  :root { --hair: rgba(16,32,28,.35); --muted: #3d4a46; --line: #9aa8a3; }
  :root[data-theme="dark"] { --hair: rgba(255,255,255,.4); --muted: #c3cfcb; }
  .btn { border-width: 2px; }
}
@media (forced-colors: active) {
  nav.tabs, header.bar, .card, .li, .tile, .icard, .btn, .toast { border: 1px solid CanvasText; }
  nav.tabs a[aria-current="page"]::before { background: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .band::after { animation: none; }
  header.bar { animation: none; background: var(--glass); }
}

/* The skeleton fills the width (the old .loading centred its children). */
.skel.loading { justify-items: stretch; padding: 0; text-align: left; color: var(--ink); }
.skel .s-hero { width: 100%; }
/* Over the dark band at the top of Home, the logo's word is light; it turns dark as the glass bar slides in. */
@media (max-width: 719px) {
body:has(#main > .band:first-child) header.bar .brand { color: var(--on-band); }
body:has(#main > .band:first-child) header.bar .brand b { color: var(--mint); }
}
@supports (animation-timeline: scroll()) { @media (max-width: 719px) {
  body:has(#main > .band:first-child) header.bar .brand { animation: brand-ink linear both; animation-timeline: scroll(root); animation-range: 120px 220px; }
  body:has(#main > .band:first-child) header.bar .brand b { animation: brand-ink-b linear both; animation-timeline: scroll(root); animation-range: 120px 220px; }
  @keyframes brand-ink { to { color: var(--ink); } }
  @keyframes brand-ink-b { to { color: var(--accent-text); } }
  body:has(#main > .band:first-child) header.bar { animation-range: 140px 220px; }
} }

/* ---------- light mode contrast (v0.7.1) ----------
   Light glass over dark content (the hero band, photos) washed out the tab labels: the light glass is now denser,
   and labels use the strong ink. Muted text is a step darker so it clears 4.5:1 on the tinted page. */
:root:not([data-theme="dark"]) { --glass: color-mix(in srgb, #ffffff 86%, transparent); --glass-strong: color-mix(in srgb, #ffffff 92%, transparent); --muted: #4f5e59; }
:root:not([data-theme="dark"]) nav.tabs a { color: var(--ink-2); }
:root:not([data-theme="dark"]) nav.tabs a[aria-current="page"] { color: var(--accent-text); }
:root:not([data-theme="dark"]) nav.tabs { box-shadow: var(--glass-rim), 0 0 0 1px rgba(16,32,28,.08), var(--shadow-float); }

/* ---------- the website on a computer (960px and wider) ----------
   Not a stretched phone: a fixed glass sidebar on the left holds the brand's tabs and a "scan with your phone" QR
   code; the page gets a wider column, the home hero splits into text and a demo card, and grids gain columns. */
.deskqr { display: none; }
@media (min-width: 960px) {
  :root { --wrap: 880px; --side: 248px; }
  body { padding-bottom: 48px; padding-left: var(--side); }
  header.bar .in { max-width: calc(var(--wrap) + 32px); }
  nav.tabs { inset: 0 auto 0 0; width: var(--side); max-width: none; margin: 0; border-radius: 0; display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(84px + env(safe-area-inset-top, 0px)) 14px 18px; background: var(--glass-strong); box-shadow: 1px 0 0 var(--hair); }
  nav.tabs .in { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0; max-width: none; margin: 0; }
  nav.tabs a { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 10px 16px; font-size: var(--t-base); font-weight: 650; border-radius: 16px; }
  nav.tabs a svg { width: 22px; height: 22px; }
  nav.tabs a[aria-current="page"]:not(.scan)::before { border-radius: 16px; }
  nav.tabs a:active { transform: scale(.97); }
  /* Scan becomes the first, full-width button */
  nav.tabs a.scan { order: -1; margin-bottom: 12px; padding: 0; }
  nav.tabs a.scan .disc { width: 100%; height: 52px; border-radius: 999px; gap: 10px; display: flex; align-items: center; justify-content: center; font-weight: 750; font-size: var(--t-base); }
  nav.tabs a.scan .disc::before { content: "Scan something"; order: 2; }
  nav.tabs a.scan .disc svg { width: 22px; height: 22px; }
  nav.tabs a.scan:active .disc, nav.tabs a.scan[aria-current="page"] .disc { border-radius: 999px; }
  nav.tabs .dot { position: static; margin-left: auto; box-shadow: none; }
  .deskqr { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); font-size: var(--t-sm); }
  .deskqr b { display: block; font-size: var(--t-base); }
  .deskqr span { color: var(--muted); line-height: 1.4; display: block; margin-top: 2px; }
  .qrbox { background: #fff; border-radius: 14px; padding: 8px; box-shadow: inset 0 0 0 1px var(--line); aspect-ratio: 1; }
  .qrbox svg { display: block; width: 100%; height: auto; }
  .qrbox:empty { background: var(--surface-3); }
  /* page */
  .wrap { gap: 22px; padding-top: 8px; }
  .band { margin: 0; padding: 40px 40px 36px; border-radius: var(--r-xl); grid-template-columns: 1.15fr 1fr; column-gap: 36px; align-items: center; }
  .band > * { grid-column: 1; }
  .band > .demo { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
  .band h1 { font-size: 2.9rem; }
  .band .glance { grid-column: 1 / -1; }
  .band:has(.glance) { grid-template-columns: 1fr; }
  .band:has(.glance) > .btn.primary { justify-self: start; min-width: 280px; }
  .tiles.four { grid-template-columns: repeat(4, 1fr); }
  .igrid { grid-template-columns: repeat(4, 1fr); }
  .stats { padding: 22px; }
  .how { grid-template-columns: repeat(3, 1fr); }
  .viewfinder { max-height: 46vh; aspect-ratio: 16 / 9; }
  .viewfinder:has(.off) { aspect-ratio: 16 / 7; }
  .phonecard { grid-template-columns: 200px 1fr; align-items: center; gap: 24px; padding: 22px; }
  .phonecard h2 { font-size: 1.5rem; }
  .passport .hero { height: 260px; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts > .fact:last-child:nth-child(odd) { grid-column: auto; }
  .facts > .fact.wide { grid-column: 1 / -1; }
  dialog.sheet { margin: auto; border-radius: var(--r-xl); max-width: 560px; max-height: 86dvh; }
  @starting-style { dialog.sheet[open] { transform: translateY(24px) scale(.97); opacity: 0; } }
  .toast { left: calc(50% + var(--side) / 2); }
}
@media (min-width: 1280px) { :root { --wrap: 960px; --side: 272px; } }

/* Credits: one small, collapsed line at the foot of Settings */
details.credits { margin: 4px 0; }
details.credits summary { cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 2px; display: inline; }
details.credits summary::-webkit-details-marker { display: none; }
details.credits p { font-size: .8rem; margin-top: 6px; }

/* ---------- iPhone fit (v0.9.2) ----------
   iOS 26 Safari's floating address bar lifts fixed elements above it while the page scrolls on underneath, so the
   end of each page hid behind our tab bar. js/fit.js measures where the tab bar really is (--tab-clear) and the
   page keeps at least that much room under it; the tab bar slides away while scrolling down or typing. */
@media (max-width: 959px) {
  body { padding-bottom: max(calc(var(--tabbar-h) + 34px + env(safe-area-inset-bottom, 0px)), var(--tab-clear, 0px)); }
  /* A field you tab or scroll to stops above the tab bar and below the top bar, not under them. */
  html { scroll-padding: calc(72px + env(safe-area-inset-top, 0px)) 0 var(--tab-clear, 140px); }
  /* Nearer the bottom edge, as iOS 26's own tab bars sit, and clear of the notch side in landscape. */
  nav.tabs { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) - 8px));
    transition: transform .45s var(--spring), opacity .25s var(--ease-fx); }
  html.tabs-away nav.tabs, html.kb nav.tabs { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) { nav.tabs { transition: opacity .2s linear; } html.tabs-away nav.tabs, html.kb nav.tabs { transform: none; } }
/* Safari zooms the whole page in when a field under 16px is tapped, and leaves it zoomed. */
@media (pointer: coarse) { input.in, select.in, textarea, .in input { font-size: max(16px, 1em); } }