/* Product Passport. Phone first, one column; built on the same tokens as Fendo and Picproved
   (Plus Jakarta Sans, 16px cards, 44px buttons, soft status colours, light by default with a dark switch). */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f3f5f4; --surface: #ffffff; --surface-2: #f7f9f8; --surface-3: #eaefed; --ink: #10201c; --ink-2: #33433e; --muted: #5a6964; --line: #e0e6e3; --line-2: #ccd5d1;
  /* Passport teal: sits between Picproved's green and Fendo's indigo. White text on it passes 4.5:1. */
  --accent: #0d6e66; --accent-hover: #0a5b54; --accent-text: #0b6a62; --on-accent: #ffffff; --accent-soft: #dcf1ee;
  --stamp: #8a5a12; --stamp-soft: #f8eedb;
  --ok: #157246; --ok-soft: #e0f3e8; --warn: #9a5800; --warn-soft: #fbefdc; --bad: #b42c22; --bad-soft: #fbe5e2; --info: #3b4a8f; --info-soft: #e8ebfa;
  --e-a: #00a651; --e-b: #50b848; --e-c: #bfd730; --e-d: #fff200; --e-e: #fdb913; --e-f: #f37021; --e-g: #ed1c24;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --r-s: 10px; --r: 16px; --r-l: 22px;
  --shadow-1: 0 1px 2px rgba(16,32,28,.04), 0 2px 10px rgba(16,32,28,.05); --shadow-2: 0 1px 3px rgba(16,32,28,.06), 0 8px 24px rgba(16,32,28,.1);
  --card-border: transparent; --wrap: 560px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-xs: .75rem; --t-sm: .8125rem; --t-base: .9375rem; --t-md: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.5rem; --t-2xl: 1.875rem;
  --ease: cubic-bezier(.2,.7,.2,1); --dur: .18s;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0c1312; --surface: #141d1b; --surface-2: #18221f; --surface-3: #212c29; --ink: #e8f0ed; --ink-2: #c3cfcb; --muted: #8fa09a; --line: #24302d; --line-2: #33413d;
  --accent: #4fd1c0; --accent-hover: #74dccd; --accent-text: #6fdccc; --on-accent: #06201c; --accent-soft: #143430;
  --stamp: #e8be74; --stamp-soft: #2f2614;
  --ok: #5fcf91; --ok-soft: #15301f; --warn: #f2ad4e; --warn-soft: #35270f; --bad: #ff8a7e; --bad-soft: #3a1b18; --info: #a9b5ff; --info-soft: #1e2340;
  --shadow-1: none; --shadow-2: none; --card-border: var(--line); color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--t-base)/1.5 var(--font); -webkit-font-smoothing: antialiased; min-height: 100dvh;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.015em; font-weight: 750; text-wrap: balance; }
h1 { font-size: var(--t-2xl); letter-spacing: -.03em; }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p { margin: 0; }
a { color: var(--accent-text); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .9em; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.hint { font-size: var(--t-sm); color: var(--muted); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)) var(--s6) max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: var(--s4); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* top bar */
header.bar { position: sticky; top: 0; z-index: 9; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding-top: env(safe-area-inset-top, 0px); }
header.bar .in { max-width: var(--wrap); margin: 0 auto; min-height: 58px; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 12px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.2rem; letter-spacing: -.03em; color: var(--ink); text-decoration: none; margin-inline-end: auto; min-height: 44px; }
.brand b { color: var(--accent-text); font-weight: 800; }
.brand svg { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.iconbtn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); flex: none; }
.iconbtn:hover { border-color: var(--line-2); }
.iconbtn svg { width: 20px; height: 20px; }
.back { margin-inline-end: auto; }

/* bottom tab bar */
nav.tabs { position: fixed; inset: auto 0 0 0; z-index: 10; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
nav.tabs .in { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; }
nav.tabs a { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 9px; min-height: 60px; text-decoration: none; color: var(--muted); font-size: var(--t-xs); font-weight: 650; position: relative; }
nav.tabs a svg { width: 24px; height: 24px; }
nav.tabs a[aria-current="page"] { color: var(--accent-text); }
nav.tabs a.scan .disc { width: 56px; height: 56px; border-radius: 18px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; margin-top: -22px; box-shadow: var(--shadow-2); }
nav.tabs a.scan .disc svg { width: 28px; height: 28px; }
nav.tabs .dot { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 750; }

/* cards and pieces */
.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r); padding: var(--s4); display: grid; gap: var(--s3); box-shadow: var(--shadow-1); min-width: 0; }
.card.flat { box-shadow: none; border-color: var(--line); }
.row { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: var(--s2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font-weight: 650; font-size: var(--t-base); text-decoration: none; text-align: center; transition: background var(--dur), border-color var(--dur); }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.danger { color: var(--bad); }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: var(--t-sm); border-radius: 10px; }
.btn.block { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.accent { background: var(--accent-soft); color: var(--accent-text); } .pill.stamp { background: var(--stamp-soft); color: var(--stamp); } .pill.info { background: var(--info-soft); color: var(--info); }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: var(--t-sm); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.callout { border-radius: var(--r); padding: var(--s3) var(--s4); display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm); }
.callout svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.callout.bad { background: var(--bad-soft); color: var(--bad); } .callout.warn { background: var(--warn-soft); color: var(--warn); } .callout.ok { background: var(--ok-soft); color: var(--ok); } .callout.info { background: var(--info-soft); color: var(--info); }
.callout b { color: inherit; }
.callout .t { color: var(--ink); }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }

/* forms */
label.f { display: grid; gap: 6px; font-weight: 650; font-size: var(--t-sm); }
input.in, select.in { width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); padding: 10px 12px; font: inherit; font-weight: 500; }
input.in::placeholder { color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 360px) { .grid2 { grid-template-columns: 1fr; } }

/* home */
.hero { border-radius: var(--r-l); padding: var(--s5); background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--accent) 22%, var(--surface)) 0%, var(--surface) 60%); border: 1px solid var(--card-border); box-shadow: var(--shadow-1); display: grid; gap: var(--s3); }
.hero h1 { font-size: 1.65rem; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.tile { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-1); border-radius: var(--r); padding: var(--s3) var(--s4); display: grid; gap: 2px; text-decoration: none; color: inherit; }
.tile .v { font-size: var(--t-xl); font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .l { font-size: var(--t-sm); color: var(--muted); font-weight: 600; }
.tile.bad .v { color: var(--bad); }

/* item list */
.list { display: grid; gap: var(--s2); }
.li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r); background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-1); text-decoration: none; color: inherit; min-height: 72px; }
.li .thumb { position: relative; width: 52px; height: 52px; border-radius: 12px; background: var(--surface-3); display: grid; place-items: center; flex: none; overflow: hidden; color: var(--accent-text); }
.li .thumb img, .passport .head .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.li .thumb svg { width: 26px; height: 26px; }
.li .t { font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.li .s { font-size: var(--t-sm); color: var(--muted); }
.li .chev { width: 18px; height: 18px; color: var(--muted); flex: none; }
svg.ic { width: 16px; height: 16px; vertical-align: -3px; flex: none; } svg.chev { width: 18px; height: 18px; color: var(--muted); flex: none; }
.row > .ic { width: 28px; height: 28px; color: var(--accent); flex: none; }
.group-h { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--s2); }
.empty { text-align: center; padding: var(--s6) var(--s4); display: grid; gap: var(--s3); justify-items: center; color: var(--muted); }
.empty > svg { width: 56px; height: 56px; color: var(--accent-text); opacity: .8; }

/* scanner */
.viewfinder { position: relative; border-radius: var(--r-l); overflow: hidden; background: #000; aspect-ratio: 3 / 4; max-height: 62vh; width: 100%; display: grid; place-items: center; }
.viewfinder video { width: 100%; height: 100%; object-fit: cover; }
.viewfinder .frame { position: absolute; inset: 22% 10%; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0,0,0,.38); pointer-events: none; }
.viewfinder .frame::before, .viewfinder .frame::after { content: ""; position: absolute; inset: 0; border-radius: 18px; border: 3px solid rgba(255,255,255,.95);
  -webkit-mask: linear-gradient(#000 0 0) top left / 28px 28px no-repeat, linear-gradient(#000 0 0) top right / 28px 28px no-repeat, linear-gradient(#000 0 0) bottom left / 28px 28px no-repeat, linear-gradient(#000 0 0) bottom right / 28px 28px no-repeat;
          mask: linear-gradient(#000 0 0) top left / 28px 28px no-repeat, linear-gradient(#000 0 0) top right / 28px 28px no-repeat, linear-gradient(#000 0 0) bottom left / 28px 28px no-repeat, linear-gradient(#000 0 0) bottom right / 28px 28px no-repeat; }
.viewfinder .laser { position: absolute; left: 14%; right: 14%; top: 50%; height: 2px; background: var(--accent); box-shadow: 0 0 12px 2px var(--accent); animation: laser 2.2s ease-in-out infinite; }
@keyframes laser { 0%, 100% { transform: translateY(-60px); opacity: .5 } 50% { transform: translateY(60px); opacity: 1 } }
.viewfinder .msg { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; color: #fff; font-weight: 650; font-size: var(--t-sm); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.viewfinder .off { color: #cfd8d5; text-align: center; padding: var(--s5); display: grid; gap: var(--s3); justify-items: center; }
.viewfinder .off svg { width: 48px; height: 48px; opacity: .8; }
.viewfinder .tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
.viewfinder .tools .iconbtn { background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.25); color: #fff; }
.viewfinder.hit .frame::before { border-color: var(--e-a); }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.kind { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-1); border-radius: 14px; padding: 10px; display: grid; gap: 4px; justify-items: center; text-align: center; font-size: var(--t-xs); font-weight: 650; color: var(--ink-2); }
.kind svg { width: 26px; height: 26px; color: var(--accent-text); }

/* passport card */
.passport { border-radius: var(--r-l); overflow: hidden; background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-2); }
.passport .head { padding: 46px var(--s4) var(--s4); display: grid; gap: var(--s3); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); position: relative; }
.passport .head .who { display: flex; gap: var(--s3); align-items: center; }
.passport .head .pic { position: relative; width: 72px; height: 72px; border-radius: 16px; background: var(--surface); display: grid; place-items: center; overflow: hidden; flex: none; border: 1px solid var(--line); color: var(--accent-text); }
.passport .head .pic svg { width: 36px; height: 36px; }
.passport .head h1 { font-size: var(--t-xl); }
.passport .mrz { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: clip; opacity: .8; }
.stamp { position: absolute; top: 12px; right: 14px; transform: rotate(8deg); border: 2px solid currentColor; color: var(--stamp); border-radius: 8px; padding: 2px 8px; font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.stamp.bad { color: var(--bad); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.fact { background: var(--surface); padding: var(--s3) var(--s4); display: grid; gap: 4px; align-content: start; min-width: 0; text-align: left; color: inherit; text-decoration: none; }
button.fact:hover { background: var(--surface-2); }
.fact .k { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fact .k svg { width: 16px; height: 16px; color: var(--accent-text); }
.fact .v { font-size: var(--t-lg); font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fact .s { font-size: var(--t-sm); color: var(--muted); line-height: 1.35; }
.fact.wide { grid-column: 1 / -1; }
.fact.bad .v { color: var(--bad); } .fact.ok .v { color: var(--ok); } .fact.warn .v { color: var(--warn); }
.meter { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.meter.warn i { background: var(--warn); } .meter.bad i { background: var(--bad); } .meter.ok i { background: var(--ok); }
.eclass { display: inline-flex; align-items: center; height: 28px; padding: 0 12px 0 10px; color: #fff; font-weight: 800; font-size: 1rem; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.eclass.A { background: var(--e-a) } .eclass.B { background: var(--e-b) } .eclass.C { background: var(--e-c); color: #222; text-shadow: none } .eclass.D { background: var(--e-d); color: #222; text-shadow: none } .eclass.E { background: var(--e-e); color: #222; text-shadow: none } .eclass.F { background: var(--e-f) } .eclass.G { background: var(--e-g) }
.score { display: inline-flex; align-items: baseline; gap: 2px; }
.score small { font-size: var(--t-sm); color: var(--muted); font-weight: 650; }
.recall { border-radius: 14px; padding: var(--s3); display: grid; gap: 6px; background: var(--bad-soft); }
.recall.possible { background: var(--surface-2); border: 1px solid var(--line); }
.recall a { font-weight: 700; }
.src { font-size: var(--t-xs); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.src span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 5px; vertical-align: 1px; }
.src span.miss::before { background: var(--line-2); } .src span.err::before { background: var(--warn); }
details.more { border-top: 1px solid var(--line); }
details.more summary { list-style: none; padding: var(--s3) var(--s4); font-weight: 700; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary svg { transform: rotate(90deg); }
details.more summary svg { width: 18px; height: 18px; transition: transform var(--dur); color: var(--muted); }
details.more .body { padding: 0 var(--s4) var(--s4); display: grid; gap: var(--s3); }
table.specs { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.specs td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.specs td:first-child { color: var(--muted); width: 45%; padding-right: 8px; }

/* sheet (bottom dialog) */
dialog.sheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: var(--wrap); max-height: 92dvh; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
dialog.sheet::backdrop { background: rgba(5,12,10,.5); }
dialog.sheet[open] { animation: up .24s var(--ease); }
@keyframes up { from { transform: translateY(30px); opacity: 0 } to { transform: none; opacity: 1 } }
dialog.sheet .in { padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--s4); }
dialog.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto -8px; }

.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 650; font-size: var(--t-sm); z-index: 50; box-shadow: var(--shadow-2); max-width: calc(100% - 32px); width: max-content; animation: toastin .2s var(--ease); }
@keyframes toastin { from { transform: translate(-50%, 12px); opacity: 0 } to { transform: translate(-50%, 0); opacity: 1 } }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.loading { display: grid; justify-items: center; gap: var(--s3); padding: var(--s6) 0; color: var(--muted); text-align: center; }
.steps { display: grid; gap: 6px; font-size: var(--t-sm); }
.steps li { list-style: none; display: flex; gap: 8px; align-items: center; }
.steps li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; }
.steps li.done::before { background: var(--ok); border-color: var(--ok); }
.steps { padding: 0; margin: 0; }
/* v0.3: home health ring, label strips, care symbols, QR handover, insurance report */
.ring { --p: 0; width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--surface-3) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.ring b { position: relative; font-size: var(--t-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.ring.warn { background: conic-gradient(var(--warn) calc(var(--p) * 1%), var(--surface-3) 0); } .ring.bad { background: conic-gradient(var(--bad) calc(var(--p) * 1%), var(--surface-3) 0); }
.labelstrip { display: grid; gap: 6px; padding: var(--s3); border-radius: 14px; background: var(--accent-soft); border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
.labelstrip .pill { background: var(--surface); }
.list.plain .li { box-shadow: none; border-color: var(--line); padding: var(--s2) var(--s3); }
.list.plain .li .thumb { width: 40px; height: 40px; border-radius: 10px; } .list.plain .li .thumb svg { width: 20px; height: 20px; }
.steps li.now::before { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.steps li.now b { color: var(--accent-text); }
.steps li { align-items: flex-start; flex-wrap: wrap; } .steps li > b { margin-right: 4px; }
.caregrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: var(--s2); }
.care { width: 100%; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; cursor: pointer; color: var(--ink); padding: 6px; }
.care svg { width: 100%; height: 100%; } .care.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.qr { width: min(260px, 70vw); margin: 0 auto; padding: 12px; background: #fff; border-radius: 16px; border: 1px solid var(--line); } .qr svg { display: block; width: 100%; height: auto; }
.scrollx { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .scrollx table.report { min-width: 520px; }
table.report th { text-align: left; font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; border-bottom: 1px solid var(--line-2); }
table.report td { padding: 7px 4px 7px 0; } table.report td:first-child { color: inherit; width: auto; font-weight: 650; }
table.report .mono { font-size: var(--t-xs); }
.tiles.four { grid-template-columns: 1fr 1fr; }
@media print { header.bar, nav.tabs, .noprint, .toast { display: none !important; } body, main { background: #fff; color: #000; padding: 0; } .card.print { box-shadow: none; border: 0; padding: 0; } .card.print a { color: inherit; text-decoration: none; } table.report { font-size: 11px; } .scrollx { overflow: visible; } .scrollx table.report { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* v0.4 UI polish, after Picproved / Fendo / Awayline: dark band hero with a live demo card, trust row, stat strip,
   numbered how-it-works, first-run tour with illustrations, install tip, section heads with icons. */
:root { --band: #0f2a2e; --band-2: #163d40; --on-band: #eef6f4; --on-band-2: #b5ccc8; --mint: #5fe3cf; --gold: #c99a3e; }
:root[data-theme="dark"] { --band: #071615; --band-2: #0f2624; --on-band: #e8f0ed; --on-band-2: #9fb3ae; }
.band { position: relative; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: var(--s6) max(16px, env(safe-area-inset-left, 0px)) var(--s5);
  background: linear-gradient(160deg, var(--band) 0%, var(--band-2) 100%); color: var(--on-band); border-bottom: 3px solid var(--gold); display: grid; gap: var(--s4); overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 75%); mask: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 75%); }
.band > * { position: relative; }
.band h1 { font-size: 2rem; line-height: 1.1; color: var(--on-band); }
.band h1 em { font-style: normal; color: var(--mint); }
.band .lede { color: var(--on-band-2); font-size: var(--t-base); }
.band .badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--on-band); font-size: var(--t-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; }
.band .badge svg { width: 14px; height: 14px; }
.band .btn.primary { background: var(--mint); border-color: var(--mint); color: #062421; }
.band .btn.primary:hover { background: #82ecdc; }
.band .btn.ghost { color: var(--on-band); }
.band .btn.line { background: transparent; border-color: rgba(255,255,255,.28); color: var(--on-band); }
.trust { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-xs); font-weight: 650; color: var(--on-band-2); }
.trust span { display: inline-flex; align-items: center; gap: 5px; }
.trust svg { width: 14px; height: 14px; color: var(--mint); }
/* the demo passport inside the hero: a real card, not a picture */
.demo { background: var(--surface); color: var(--ink); border-radius: var(--r-l); box-shadow: 0 18px 48px rgba(0,0,0,.28); overflow: hidden; display: grid; text-align: left; border: 0; padding: 0; width: 100%; }
.demo .top { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); }
.demo .top .pic { width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent-text); flex: none; }
.demo .top .pic svg { width: 24px; height: 24px; }
.demo .top b, .demo .top .eyebrow { display: block; line-height: 1.25; }
.demo .top .grow { min-width: 0; }
.demo .grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.demo .grid > span { padding: 10px 12px; display: grid; gap: 1px; border-right: 1px solid var(--line); }
.demo .grid > span:last-child { border-right: 0; }
.demo .grid .k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.demo .grid .v { font-weight: 780; font-size: var(--t-md); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.demo .go { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--s4); border-top: 1px solid var(--line); font-size: var(--t-sm); font-weight: 700; color: var(--accent-text); }
.demo .go svg { width: 18px; height: 18px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); text-align: center; }
.stats div { display: grid; gap: 2px; }
.stats b { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.stats span { font-size: var(--t-xs); color: var(--muted); font-weight: 650; line-height: 1.3; }
.how { display: grid; gap: var(--s3); counter-reset: how; margin: 0; padding: 0; }
.how li { list-style: none; display: grid; grid-template-columns: 36px 1fr; gap: 2px var(--s3); align-items: start; }
.how li::before { counter-increment: how; content: counter(how); grid-row: span 2; width: 36px; height: 36px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-weight: 800; }
.how li b { line-height: 1.3; padding-top: 1px; }
.how li span { font-size: var(--t-sm); color: var(--muted); }
.sec-h { display: flex; align-items: center; gap: 8px; margin-top: var(--s2); }
.sec-h svg { width: 20px; height: 20px; color: var(--accent-text); flex: none; }
.sec-h h2 { flex: 1; }
.sec-h a, .sec-h .hint { font-size: var(--t-sm); font-weight: 650; }
.sec-h a { text-decoration: none; }
.sec-h .linkbtn { background: none; border: 0; padding: 4px 0; font: inherit; font-size: var(--t-sm); font-weight: 650; color: var(--accent-text); cursor: pointer; }
/* home summary once things are saved */
.band .glance { display: flex; align-items: center; gap: var(--s3); }
.band .glance .ring::before { background: var(--band); }
.band .glance .ring b { color: var(--on-band); }
.band .glance .ring { background: conic-gradient(var(--mint) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.band .glance .ring.warn { background: conic-gradient(#f2ad4e calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.band .glance .ring.bad { background: conic-gradient(#ff8a7e calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.tile .ti { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 6px; }
.tile .ti svg { width: 18px; height: 18px; }
.tile.bad .ti { background: var(--bad-soft); color: var(--bad); }
/* lists made of buttons kept their centred text: line them up like the links */
button.li { width: 100%; text-align: left; font: inherit; }
.li .grow { display: grid; gap: 1px; }
/* passport: an odd last fact fills the row instead of leaving a grey hole */
.facts > .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.btns .btn { white-space: nowrap; }
/* illustrated empty states */
.empty .art { width: min(280px, 80%); aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; }
.empty .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.empty h2 { color: var(--ink); }
/* install tip (Fendo) */
.tip { display: flex; gap: var(--s3); align-items: flex-start; }
.tip .ic2 { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; flex: none; }
.tip .ic2 svg { width: 22px; height: 22px; }
.tip .x { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); border-radius: 8px; flex: none; }
.tip .x svg { width: 18px; height: 18px; }
/* first-run tour (all three apps open with one) */
dialog.tour { border: 0; padding: 0; width: min(420px, calc(100% - 24px)); max-height: calc(100dvh - 24px); border-radius: var(--r-l); background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgba(0,0,0,.35); overflow: auto; }
dialog.tour::backdrop { background: rgba(5,16,15,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
dialog.tour[open] { animation: up .28s var(--ease); }
.tour .art { aspect-ratio: 16 / 9; background: var(--band); position: relative; }
.tour .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour .art .mark { position: absolute; left: 16px; top: 16px; width: 52px; height: 52px; border-radius: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.tour .art .mark svg { width: 100%; height: 100%; border-radius: 15px; }
.tour .body { padding: var(--s5) var(--s5) var(--s4); display: grid; gap: var(--s3); }
.tour .eyebrow { color: var(--accent-text); }
.tour h2 { font-size: 1.55rem; letter-spacing: -.025em; }
.tour p { color: var(--ink-2); }
.tour ul.ticks { margin: 0; padding: 0; display: grid; gap: 6px; }
.tour ul.ticks li { list-style: none; display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: var(--t-sm); }
.tour ul.ticks svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
.tour .foot { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s5) var(--s5); }
.tour .dots { display: flex; gap: 6px; flex: 1; }
.tour .dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--line-2); transition: width var(--dur), background var(--dur); }
.tour .dots i.on { width: 22px; background: var(--accent); }
.tour .skip { color: var(--muted); font-weight: 650; font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 4px; }
/* camera off: calmer than a black box */
.viewfinder:has(.off) { background: linear-gradient(160deg, var(--band), var(--band-2)); aspect-ratio: 4 / 3; }
.how-art { border-radius: var(--r); overflow: hidden; background: var(--band); }
.how-art img { display: block; width: 100%; height: auto; }

/* Thingvita splash: the animated logo, once per browser session (js/splash.js), about 2.5 s, tap to skip. The
   draw-on uses pathLength="1" so every stroke animates from 1 to 0. Without JS it still fades out on its own. */
#splash { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; background: var(--band); color: var(--on-band); cursor: pointer; animation: sp-out .32s ease 2.4s forwards; }
#splash.out { animation: sp-out .28s ease forwards; }
@keyframes sp-out { to { opacity: 0; visibility: hidden } }
#splash .lockup { display: flex; align-items: center; gap: 16px; }
#splash .mark { width: 96px; height: 96px; border-radius: 22px; flex: none; }
#splash .word { font-size: 2.5rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--on-band); }
#splash .word b { font-weight: 800; color: var(--mint); }
#splash .tag { margin: 0; font-weight: 600; color: var(--on-band-2); text-align: center; }
.sp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sp-draw var(--d, 1s) cubic-bezier(.65, 0, .35, 1) var(--t, 0s) forwards; }
@keyframes sp-draw { to { stroke-dashoffset: 0 } }
.sp-pop { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; animation: sp-pop .5s cubic-bezier(.34, 1.56, .64, 1) var(--t, 0s) forwards; }
@keyframes sp-pop { to { transform: scale(1); opacity: 1 } }
.sp-rise { opacity: 0; transform: translateY(12px); animation: sp-rise .6s cubic-bezier(.2, .8, .2, 1) var(--t, 0s) forwards; }
@keyframes sp-rise { to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { #splash { display: none; } }

/* Three item actions as equal tiles: icon above a label that may wrap, so nothing is cut off on a narrow phone. */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.btn.tile { flex-direction: column; gap: 6px; min-height: 76px; padding: 10px 8px; white-space: normal; text-align: center; line-height: 1.2; font-size: var(--t-sm); }
.btn.tile svg { width: 22px; height: 22px; }

/* ---------- v0.5: product photos, category colours, the EU label scale and a little motion ---------- */
/* Each kind of thing has a colour (set in TONE in app.js). The soft tint is mixed from it, so light and dark both work. */
.tone-sky { --tone: #2f7fd0 } .tone-teal { --tone: #0d8a7e } .tone-coral { --tone: #d4572f } .tone-indigo { --tone: #4a54c4 }
.tone-violet { --tone: #8a4cc8 } .tone-amber { --tone: #c27a0a } .tone-green { --tone: #2f8a3e } .tone-gold { --tone: #b38a12 }
.tone-slate { --tone: #55657a } .tone-clay { --tone: #a0603a } .tone-rose { --tone: #c43d78 }
[class*="tone-"] { --tone-soft: color-mix(in srgb, var(--tone) 13%, var(--surface)); --tone-ink: var(--tone); }
:root[data-theme="dark"] [class*="tone-"] { --tone-soft: color-mix(in srgb, var(--tone) 24%, var(--surface)); --tone-ink: color-mix(in srgb, var(--tone) 55%, #fff); }

/* Thumbnails: the icon on its colour, or the photo on white (product shots are on white). */
.thumb[class*="tone-"], .demo .top .pic[class*="tone-"], .tile .ti[class*="tone-"] { background: var(--tone-soft); color: var(--tone-ink); }
.thumb.pic { background: #fff; border: 1px solid var(--line); }
.thumb img, .ipic img, .plate img { opacity: 0; transition: opacity .35s ease; }
.thumb img.ld, .ipic img.ld, .plate img.ld { opacity: 1; }
.thumb.pic img, .plate img { padding: 3px; }
.pic:has(img:not(.ld))::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%) var(--tone-soft); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 120% 0 } to { background-position: -80% 0 } }
.thumb .sbadge { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--info); box-shadow: 0 0 0 2px var(--surface); z-index: 2; }
.thumb .sbadge.bad { background: var(--bad); } .thumb .sbadge.warn { background: var(--warn); }
.li .thumb .sbadge svg { width: 12px; height: 12px; }
.photorow { display: flex; gap: var(--s3); align-items: center; }
.photorow .thumb { position: relative; width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; flex: none; }
.photorow .thumb svg { width: 30px; height: 30px; } .photorow .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photorow .btn { justify-self: start; }

/* The passport's hero: the photo on a white plate, or a category illustration, over the category colour. */
.hero { position: relative; height: 196px; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 100% at 15% 0%, color-mix(in srgb, var(--tone) 34%, transparent), transparent 62%), radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 60%), var(--tone-soft); }
.hero .ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--tone) 22%, transparent); transform: translate(-50%, -50%); z-index: -1; animation: breathe 7s ease-in-out infinite; }
.hero .r1 { width: 230px; height: 230px; } .hero .r2 { width: 340px; height: 340px; animation-delay: -3.5s; }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.06); opacity: .6 } }
.hero .plate { position: relative; width: 136px; height: 136px; border-radius: 30px; display: grid; place-items: center; overflow: hidden; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 80%, #fff), color-mix(in srgb, var(--tone) 85%, #000)); box-shadow: 0 14px 34px color-mix(in srgb, var(--tone) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  animation: pop .55s cubic-bezier(.2, .9, .3, 1.25) both; }
.hero .plate svg { width: 64px; height: 64px; stroke-width: 1.6; }
.hero.pic .plate { width: 168px; height: 168px; background: #fff; color: var(--tone); box-shadow: 0 14px 34px rgba(16,32,28,.16); }
.hero.pic .plate svg { opacity: .25; }
.hero .plate img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; z-index: 1; }
.hero .stamp { z-index: 2; }
.hero .photobtn { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: var(--t-sm); font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-1); cursor: pointer; z-index: 2; }
.hero .photobtn svg { width: 16px; height: 16px; }
@keyframes pop { from { transform: scale(.82) translateY(10px); opacity: 0 } }
.passport .head { padding: var(--s4); background: var(--surface); }
.passport .head .eyebrow { color: var(--tone-ink); }

/* The EU label's arrows, with this product's class pointed out on the right, as on the real label. */
.energyblock { display: flex; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line); }
.escale { display: grid; gap: 3px; margin-top: 8px; max-width: 230px; }
.er { display: flex; align-items: center; height: 17px; }
.er .bar { height: 100%; display: flex; align-items: center; padding-left: 6px; color: #fff; font-weight: 800; font-size: 11px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
.er .arr { margin-left: auto; height: 25px; margin-block: -4px; min-width: 46px; padding: 0 8px 0 16px; background: var(--ink); color: var(--surface); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); animation: point .6s .25s cubic-bezier(.2, .9, .3, 1.2) both; }
.er.on .bar { box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }
@keyframes point { from { transform: translateX(24px); opacity: 0 } }
.e-A { background: var(--e-a) } .e-B { background: var(--e-b) } .e-C { background: var(--e-c) } .e-D { background: var(--e-d) } .e-E { background: var(--e-e) } .e-F { background: var(--e-f) } .e-G { background: var(--e-g) }
.er .bar.e-C, .er .bar.e-D, .er .bar.e-E { color: #222; }
.eulabel { flex: none; width: 92px; display: grid; gap: 4px; justify-items: center; text-decoration: none; color: var(--muted); font-size: var(--t-xs); font-weight: 700; }
.eulabel img { width: 92px; height: 150px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--line); opacity: 0; transition: opacity .35s; }
.eulabel img.ld { opacity: 1; }
.eulabel span { display: inline-flex; align-items: center; gap: 4px; } .eulabel span svg { width: 14px; height: 14px; }
.eclass.sm { height: 22px; font-size: 13px; padding: 0 10px 0 7px; }

/* Each fact has its own colour chip. */
.fact .k svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; box-sizing: border-box; background: color-mix(in srgb, var(--fc, var(--accent)) 13%, var(--surface)); color: var(--fc, var(--accent-text)); }
:root[data-theme="dark"] .fact .k svg { background: color-mix(in srgb, var(--fc, var(--accent)) 24%, var(--surface)); color: color-mix(in srgb, var(--fc, var(--accent)) 55%, #fff); }
.fact[data-f="life"] { --fc: #0d8a7e } .fact[data-f="energy"], .fact[data-f="standby"] { --fc: #c27a0a } .fact[data-f="repair"], .fact[data-f="parts"] { --fc: #2f7fd0 }
.fact[data-f="recall"] { --fc: var(--ok) } .fact[data-f="recall"].bad { --fc: var(--bad) } .fact[data-f="warranty"] { --fc: #4a54c4 } .fact[data-f="carbon"] { --fc: #2f8a3e }
.fact[data-f="costyr"] { --fc: #55657a } .fact[data-f="resale"] { --fc: #c43d78 }

/* Home: recently added as photo cards. */
.igrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.icard { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-1); border: 1px solid var(--card-border); overflow: hidden; display: grid; align-content: start; text-decoration: none; color: inherit; padding-bottom: var(--s3); min-width: 0; }
.icard .ipic { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; color: var(--tone-ink);
  background: radial-gradient(80% 90% at 20% 0%, color-mix(in srgb, var(--tone) 26%, transparent), transparent 70%), var(--tone-soft); }
.icard .ipic::before { content: ""; position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--tone) 18%, transparent); }
.icard .ipic.pic { background: #fff; } .icard .ipic.pic::before { display: none; } .icard .ipic.pic > svg { opacity: .2; }
.icard .ipic > svg { width: 46px; height: 46px; stroke-width: 1.7; }
.icard .ipic img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; z-index: 1; }
.icard .flag { position: absolute; top: 8px; left: 8px; z-index: 2; }
.icard .t { padding: 10px 12px 0; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.icard .s { padding: 2px 12px 0; font-size: var(--t-sm); color: var(--muted); }

/* Motion: screens rise in, meters fill, taps press. All of it is off for people who ask for less motion. */
#main.enter > * { animation: rise .42s cubic-bezier(.2, .8, .2, 1) both; }
#main.enter > :nth-child(2) { animation-delay: .04s } #main.enter > :nth-child(3) { animation-delay: .08s } #main.enter > :nth-child(4) { animation-delay: .12s }
#main.enter > :nth-child(5) { animation-delay: .16s } #main.enter > :nth-child(n+6) { animation-delay: .2s }
@keyframes rise { from { transform: translateY(14px); opacity: 0 } }
.meter i { animation: fill 1s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fill { from { width: 0 } }
.li, .icard, .tile, .btn, .demo { transition: transform .12s ease, box-shadow .2s ease; }
.li:active, .icard:active, .tile:active, .btn:active, .demo:active { transform: scale(.98); }
@media (hover: hover) { .icard:hover, a.li:hover, button.li:hover, a.tile:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); } }
nav.tabs a.scan .disc { position: relative; }
nav.tabs a.scan .disc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); animation: halo 2.4s 1.5s ease-out 3; }
@keyframes halo { to { box-shadow: 0 0 0 14px transparent } }
/* The owner's own photos fill their frame (product shots sit on white and are shown whole). */
img.own { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; padding: 0 !important; }
/* 0.6: switch, tick lists, claim steps with buttons */
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
ul.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
ul.ticks li { display: flex; gap: 8px; align-items: flex-start; }
#claim .steps li .btn { margin-left: auto; min-height: 32px; padding: 4px 12px; }
#claim .steps li > .hint:last-child { flex-basis: 100%; }
.callout .btn { margin-top: 8px; }
.btns .btn.grow { flex: 1 1 auto; min-width: max-content; } /* three buttons wrap instead of overlapping */

/* v0.8.4: Nutri-Score as printed on packs (food), and the ingredients fold-out. */
.nscore { display: inline-flex; border-radius: 8px; overflow: hidden; height: 26px; align-items: center; background: var(--surface); }
.nscore i { font-style: normal; font-weight: 800; font-size: 12px; width: 20px; height: 22px; display: grid; place-items: center; color: #fff; opacity: .45; }
.nscore i.on { opacity: 1; width: 28px; height: 26px; font-size: 15px; border-radius: 7px; }
.nscore .nA { background: #038141 } .nscore .nB { background: #85bb2f } .nscore .nC { background: #fecb02; color: #222 } .nscore .nD { background: #ee8100 } .nscore .nE { background: #e63e11 }
.labelstrip details.ingr summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.labelstrip details.ingr p { margin: 6px 0 0; }