/* GauID field app (mobile). Built from the reference design, measured at its own pixel grid.
   The reference is 802 px wide; --px is one reference pixel on the current screen, so every number
   below is a measurement taken straight from the reference and the layout scales with the screen. */
body.field {
  --px: calc(min(100vw, 480px) / 802);
  --f-bg: #faf8f3;
  --f-card: #ffffff;
  --f-ink: #06121c;
  --f-body: #4d616f;
  --f-muted: #586a77;
  --f-line: #dadee2;
  --f-green-1: #073b3c;
  --f-green-2: #052c30;
  --f-lime: #dff9ac;
  --f-lime-bright: #d8f968;
  --f-link: #0b4b3a;
  --f-cream: #fbf3dc;
  --f-soft: #eef2ee;
  --f-btn: #0a3b33;
  --f-btn-off: #dfe1e6;
  --f-btn-off-ink: #72808c;
  --f-tab-off: #425d6a;
  --f-outline: #0b2430;
  background: #ebe8df;
  color: var(--f-ink);
  font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] body.field {
  --f-bg: #0d1512; --f-card: #14201b; --f-ink: #eaf1ed; --f-body: #a9bbb1; --f-muted: #93a69b; --f-line: #26362d;
  --f-soft: #1a2a23; --f-cream: #2c2616; --f-link: #7be0b0; --f-btn: #cfeb90; --f-btn-off: #1f2c26; --f-btn-off-ink: #6f8277;
  --f-tab-off: #93a69b; --f-outline: #cfd8d3; --f-lime: #cdeb8b; background: #070c0a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.field {
    --f-bg: #0d1512; --f-card: #14201b; --f-ink: #eaf1ed; --f-body: #a9bbb1; --f-muted: #93a69b; --f-line: #26362d;
    --f-soft: #1a2a23; --f-cream: #2c2616; --f-link: #7be0b0; --f-btn: #cfeb90; --f-btn-off: #1f2c26; --f-btn-off-ink: #6f8277;
    --f-tab-off: #93a69b; --f-outline: #cfd8d3; --f-lime: #cdeb8b; background: #070c0a;
  }
}
:root[data-theme="dark"] body.field .cta:not(:disabled):not(.cta-line) { color: #14210a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.field .cta:not(:disabled):not(.cta-line) { color: #14210a; } }

.field .shell { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--f-bg); position: relative; padding-bottom: calc(190 * var(--px) + env(safe-area-inset-bottom)); overflow-x: clip; }
.field [hidden] { display: none !important; }
.field h1, .field h2, .field h3, .field p { margin: 0; }
.field svg.i { width: 1em; height: 1em; }

/* ---------- hero ---------- */
.fhero {
  position: relative; overflow: hidden; height: calc(497 * var(--px)); color: #fff;
  border-radius: 0 0 calc(56 * var(--px)) calc(56 * var(--px));
  background: linear-gradient(180deg, var(--f-green-1) 0%, var(--f-green-2) 100%);
}
.ftop { position: absolute; z-index: 4; left: calc(34 * var(--px)); right: calc(34 * var(--px)); top: calc(20 * var(--px)); height: calc(80 * var(--px)); display: flex; align-items: center; }
.fbrand { display: flex; align-items: center; color: inherit; text-decoration: none; }
.fbrand .logo { height: calc(84 * var(--px)); width: auto; display: block; }
.fbrand strong { margin-left: calc(12 * var(--px)); font-size: calc(35 * var(--px)); font-weight: 700; letter-spacing: -.01em; }
.online { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); margin-left: calc(30 * var(--px)); font-size: calc(23 * var(--px)); font-weight: 500; color: #dff0c6; }
.online i { width: calc(18 * var(--px)); height: calc(18 * var(--px)); border-radius: 50%; background: #9fb3ad; }
.online[data-state="online"] i { background: #b9f568; }
.online[data-state="error"] i { background: #ff9a8f; }
.menu-btn { margin-left: auto; width: calc(60 * var(--px)); height: calc(60 * var(--px)); margin-right: calc(-12 * var(--px)); margin-top: calc(-8 * var(--px)); border: 0; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; font-size: calc(47.2 * var(--px)); }
.menu-btn svg.i { stroke-width: 1.7; }
.fhero-art { position: absolute; z-index: 2; left: calc(423 * var(--px)); top: 0; width: calc(379 * var(--px)); height: auto; pointer-events: none; }
.fhero-copy { position: absolute; z-index: 3; left: calc(42 * var(--px)); top: calc(134 * var(--px)); right: 0; }
.fhero h1 { font-size: calc(53.4 * var(--px)); line-height: calc(61 * var(--px)); letter-spacing: -.012em; font-weight: 800; white-space: nowrap; }
.field .fhero-copy > p { margin-top: calc(10 * var(--px)); font-size: calc(22.8 * var(--px)); line-height: calc(30 * var(--px)); color: rgba(255, 255, 255, .92); font-weight: 400; }
.fpill { display: inline-flex; align-items: center; gap: calc(14 * var(--px)); margin-top: calc(17 * var(--px)); height: calc(47 * var(--px)); padding: 0 calc(21 * var(--px)); border-radius: calc(14 * var(--px)); border: calc(1.5 * var(--px)) solid #22484b; background: rgba(255, 255, 255, .035); font-size: calc(19.5 * var(--px)); color: #fff; font-weight: 500; }
.fpill b { font-weight: 500; font-variant-numeric: tabular-nums; }
.fpill svg.i { color: #c9f27a; font-size: calc(30.8 * var(--px)); stroke-width: 1.6; }

/* ---------- card ---------- */
.field main { position: relative; z-index: 5; }
.view { padding: 0 calc(40 * var(--px)); }
.fcard { position: relative; background: var(--f-card); border-radius: calc(26 * var(--px)); padding: calc(30 * var(--px)) calc(40 * var(--px)) calc(24 * var(--px)); box-shadow: 0 calc(8 * var(--px)) calc(34 * var(--px)) rgba(10, 40, 40, .09), 0 0 0 1px rgba(10, 40, 40, .03); }
.fcard.start { margin-top: calc(-108 * var(--px)); }
.fcard h2 { font-size: calc(38.6 * var(--px)); line-height: calc(46 * var(--px)); font-weight: 800; letter-spacing: -.012em; color: var(--f-ink); }
.fcard .sub { margin-top: calc(6 * var(--px)); font-size: calc(24.0 * var(--px)); line-height: calc(32 * var(--px)); color: var(--f-body); font-weight: 400; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(22 * var(--px)); margin-top: calc(19 * var(--px)); }
.tile { display: grid; justify-items: center; align-content: center; gap: calc(12 * var(--px)); height: calc(180 * var(--px)); border-radius: calc(26 * var(--px)); cursor: pointer; font: inherit; font-size: calc(24.6 * var(--px)); color: var(--f-ink); text-align: center; padding: 0; transition: transform .1s; }
.tile:active { transform: scale(.98); }
.tile b { font-weight: 600; }
.tile-ic { display: grid; place-items: center; font-size: calc(78.1 * var(--px)); line-height: 1; }
.tile-lime { background: var(--f-lime); border: 0; color: #0b1a14; }
.tile-line { background: var(--f-card); border: calc(2 * var(--px)) solid #e1e4e5; }
.field .caption { text-align: center; margin-top: calc(11 * var(--px)); font-size: calc(17.5 * var(--px)); line-height: calc(24 * var(--px)); color: var(--f-muted); }
.tile:focus-visible, .cta:focus-visible, .tab:focus-visible, .menu-btn:focus-visible, .acard:focus-visible { outline: 3px solid var(--f-link); outline-offset: 2px; box-shadow: none; }

.slot { margin-top: calc(22 * var(--px)); min-height: calc(88 * var(--px)); border: calc(1.8 * var(--px)) dashed #c5cbd0; border-radius: calc(14 * var(--px)); display: grid; align-items: center; }
.slot-empty { display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--px)); color: var(--f-muted); font-size: calc(21.1 * var(--px)); }
.slot-empty svg.i { font-size: calc(43.1 * var(--px)); stroke-width: 1.4; }
.slot-file { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(16 * var(--px)); padding: calc(10 * var(--px)) calc(14 * var(--px)); }
.slot-file img, .slot-file video { width: calc(68 * var(--px)); height: calc(68 * var(--px)); border-radius: calc(12 * var(--px)); object-fit: cover; background: var(--f-soft); display: block; }
.slot-name { font-size: calc(19.5 * var(--px)); color: var(--f-ink); overflow-wrap: anywhere; line-height: 1.35; }
.slot-remove { width: calc(46 * var(--px)); height: calc(46 * var(--px)); border-radius: 50%; border: 0; background: var(--f-soft); color: var(--f-ink); display: grid; place-items: center; cursor: pointer; font-size: calc(26.7 * var(--px)); }

.cta { display: block; width: 100%; height: calc(71 * var(--px)); margin-top: calc(19 * var(--px)); border-radius: calc(14 * var(--px)); border: 0; font: inherit; font-size: calc(24.2 * var(--px)); font-weight: 600; letter-spacing: -.005em; background: var(--f-btn); color: #fff; cursor: pointer; transition: background .15s, transform .1s; }
.cta:active:not(:disabled) { transform: scale(.985); }
.cta:disabled { background: var(--f-btn-off); color: var(--f-btn-off-ink); cursor: not-allowed; }
.cta-line { height: calc(70 * var(--px)); margin-top: calc(15 * var(--px)); background: transparent; color: var(--f-ink); border: calc(2.2 * var(--px)) solid var(--f-outline); font-weight: 700; }
.cta-line:disabled { background: transparent; color: var(--f-ink); border-color: var(--f-outline); opacity: 1; cursor: not-allowed; }
.field .hint { margin-top: calc(10 * var(--px)); text-align: center; color: var(--f-body); font-size: calc(18.5 * var(--px)); line-height: calc(26 * var(--px)); }
.field .infoline { margin-top: calc(24 * var(--px)); display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--px)); color: var(--f-body); font-size: calc(18.1 * var(--px)); line-height: calc(26 * var(--px)); }
.infoline svg.i { font-size: calc(26.7 * var(--px)); stroke-width: 1.6; }
.fcard .busy { border-radius: calc(26 * var(--px)); }

/* ---------- result (the shared result card, scaled to this type scale) ---------- */
.field .result { margin: calc(24 * var(--px)) 0 0; border-radius: calc(26 * var(--px)); box-shadow: 0 calc(8 * var(--px)) calc(34 * var(--px)) rgba(10, 40, 40, .09); zoom: .78; }
.field .result-body { grid-template-columns: 1fr; }
.field .gauge { margin-inline: auto; }

/* ---------- group photo result ---------- */
.hphoto { position: relative; margin: calc(18 * var(--px)) 0 0; border-radius: calc(16 * var(--px)); overflow: hidden; background: var(--f-soft); line-height: 0; }
.hphoto img { width: 100%; height: auto; display: block; max-height: 60vh; object-fit: contain; }
.hbox { position: absolute; border: 2.5px solid #2bb673; border-radius: 6px; box-sizing: border-box; }
.hbox.new { border-color: #3b82f6; } .hbox.warn { border-color: #f0a030; }
.hbox b { position: absolute; left: -2px; top: -2px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: #2bb673; color: #fff; font-size: 12px; line-height: 1; border-radius: 5px 0 5px 0; }
.hbox.new b { background: #3b82f6; } .hbox.warn b { background: #f0a030; }
.hchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: calc(18 * var(--px)); }
.hchip { padding: 5px 12px; border-radius: 999px; background: #dff2e6; color: #12603a; font-size: 13px; font-weight: 600; }
.hchip.new { background: #dbe8fb; color: #1b4fa8; } .hchip.warn { background: #fdecd0; color: #8a5300; }
:root[data-theme="dark"] .hchip { background: #1c3a2b; color: #9be0b8; }
:root[data-theme="dark"] .hchip.new { background: #1b2c4a; color: #9bbcf2; } :root[data-theme="dark"] .hchip.warn { background: #3a2c14; color: #f2c37a; }
.hlist { list-style: none; margin: calc(14 * var(--px)) 0 0; padding: 0; display: grid; gap: 8px; }
.hrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--f-soft); }
.hnum { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #2bb673; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.hrow.new .hnum { background: #3b82f6; } .hrow.warn .hnum { background: #f0a030; }
.hwhat { flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 14px; }
.hwhat .id-chip { font-size: 15px; padding: 3px 10px; min-height: 0; width: fit-content; letter-spacing: .02em; }
.hrow .copy-btn, .hrow [data-copy] { padding: 5px 10px; font-size: 12px; min-height: 0; }
.hwhat small { color: var(--f-muted); font-size: 12.5px; }

/* ---------- tips banner ---------- */
.tipsbanner { display: grid; grid-template-columns: calc(210 * var(--px)) 1fr; gap: calc(19 * var(--px)); align-items: center; margin-top: calc(28 * var(--px)); height: calc(163 * var(--px)); padding: 0 calc(20 * var(--px)); border-radius: calc(22 * var(--px)); background: var(--f-cream); color: var(--f-ink); text-decoration: none; }
.tipsbanner img { width: calc(210 * var(--px)); height: calc(123 * var(--px)); border-radius: calc(14 * var(--px)); object-fit: cover; display: block; }
.tipsbanner > span { display: grid; gap: calc(5 * var(--px)); }
.tipsbanner b { font-size: calc(24.0 * var(--px)); line-height: calc(30 * var(--px)); letter-spacing: -.01em; font-weight: 800; }
.tipsbanner > span > span { color: var(--f-body); font-size: calc(21.2 * var(--px)); line-height: calc(27 * var(--px)); }
.tipsbanner em { display: inline-flex; align-items: center; gap: calc(12 * var(--px)); margin-top: calc(6 * var(--px)); font-style: normal; font-weight: 700; color: var(--f-link); font-size: calc(21.8 * var(--px)); }
.tipsbanner em svg.i { font-size: calc(28.8 * var(--px)); stroke-width: 2; }

/* ---------- your animals ---------- */
.animals { margin-top: calc(32 * var(--px)); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sec-head h2 { font-size: calc(35.1 * var(--px)); line-height: calc(44 * var(--px)); font-weight: 800; letter-spacing: -.02em; }
.more { display: inline-flex; align-items: center; gap: calc(14 * var(--px)); color: var(--f-link); font-weight: 700; text-decoration: none; font-size: calc(22.2 * var(--px)); }
.more svg.i { font-size: calc(28.8 * var(--px)); stroke-width: 2; }
.fsearch { display: flex; align-items: center; gap: calc(18 * var(--px)); margin-top: calc(19 * var(--px)); height: calc(60 * var(--px)); padding: 0 calc(20 * var(--px)); border-radius: calc(13 * var(--px)); background: var(--f-card); border: calc(2 * var(--px)) solid var(--f-line); color: #6b7a86; }
.fsearch:focus-within { border-color: var(--f-link); }
.fsearch svg.i { font-size: calc(34.9 * var(--px)); stroke-width: 1.7; }
.fsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--f-ink); font: inherit; font-size: calc(23.6 * var(--px)); }
.fsearch input::placeholder { color: #7a8893; }
.agrid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--px)); margin-top: calc(17 * var(--px)); }
.acard { display: block; width: 100%; padding: 0; border: 0; text-align: left; font: inherit; color: var(--f-ink); background: var(--f-card); border-radius: calc(17 * var(--px)); overflow: hidden; box-shadow: 0 calc(3 * var(--px)) calc(16 * var(--px)) rgba(10, 40, 40, .08), 0 0 0 1px rgba(10, 40, 40, .03); cursor: pointer; }
.acard:active { transform: scale(.985); }
.acard .ph { display: grid; place-items: center; height: calc(226 * var(--px)); background: var(--f-soft); color: var(--f-link); font-size: calc(71.9 * var(--px)); overflow: hidden; }
.acard .ph img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--f-soft); }
.acard .meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: calc(90 * var(--px)); padding: 0 calc(25 * var(--px)); }
.acard .meta > span { display: grid; gap: calc(2 * var(--px)); min-width: 0; }
.acard .id { font-size: calc(23.8 * var(--px)); font-weight: 800; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard .dt { color: var(--f-muted); font-size: calc(18.5 * var(--px)); }
.acard .go { color: var(--f-ink); font-size: calc(34.9 * var(--px)); flex: none; }
.acard .go svg.i { stroke-width: 1.8; }
.aempty { margin-top: calc(18 * var(--px)); padding: calc(40 * var(--px)) calc(24 * var(--px)); text-align: center; border-radius: calc(17 * var(--px)); background: var(--f-card); color: var(--f-muted); font-size: calc(19.5 * var(--px)); box-shadow: 0 calc(3 * var(--px)) calc(16 * var(--px)) rgba(10, 40, 40, .08); }
.aempty b { display: block; color: var(--f-ink); font-size: calc(23.6 * var(--px)); margin: calc(10 * var(--px)) 0 calc(4 * var(--px)); }
.aempty .art { width: calc(80 * var(--px)); height: calc(80 * var(--px)); border-radius: calc(24 * var(--px)); background: var(--f-soft); color: var(--f-link); display: inline-grid; place-items: center; font-size: calc(41.1 * var(--px)); }
.page-title { padding-top: calc(36 * var(--px)); }
.page-title h2 { font-size: calc(45.2 * var(--px)); line-height: calc(54 * var(--px)); letter-spacing: -.025em; font-weight: 800; }
.field .page-title p { margin-top: calc(4 * var(--px)); color: var(--f-body); font-size: calc(22.6 * var(--px)); }
.more-btn { margin-top: calc(24 * var(--px)); }

/* ---------- help ---------- */
.help-card { margin-top: calc(22 * var(--px)); }
.help-card h3 { font-size: calc(28.8 * var(--px)); letter-spacing: -.015em; font-weight: 800; margin-bottom: calc(16 * var(--px)); }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(22 * var(--px)); }
.steps-list li { display: grid; grid-template-columns: calc(64 * var(--px)) 1fr; gap: calc(20 * var(--px)); align-items: start; }
.steps-list li > span { width: calc(64 * var(--px)); height: calc(64 * var(--px)); border-radius: calc(18 * var(--px)); background: var(--f-lime); color: #16240a; display: grid; place-items: center; font-size: calc(32.9 * var(--px)); }
.steps-list b { display: block; font-size: calc(23.1 * var(--px)); }
.steps-list div > span { display: block; margin-top: calc(3 * var(--px)); color: var(--f-body); font-size: calc(20.0 * var(--px)); line-height: 1.5; }
.help-card details { border-top: 1px solid var(--f-line); padding: calc(20 * var(--px)) 0; }
.help-card details:first-of-type { border-top: 0; padding-top: 0; }
.help-card summary { cursor: pointer; font-weight: 600; font-size: calc(22.1 * var(--px)); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.help-card summary::-webkit-details-marker { display: none; }
.help-card summary::after { content: "+"; color: var(--f-muted); font-size: calc(30.8 * var(--px)); line-height: 1; }
.help-card details[open] summary::after { content: "–"; }
.help-card details p { margin-top: calc(10 * var(--px)); color: var(--f-body); font-size: calc(20.0 * var(--px)); line-height: 1.55; }
.plain { margin: 0; padding-left: calc(30 * var(--px)); display: grid; gap: calc(14 * var(--px)); color: var(--f-ink); font-size: calc(20.0 * var(--px)); line-height: 1.55; }

/* ---------- bottom tab bar ---------- */
.tabbar { position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; height: calc(123 * var(--px) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); padding: calc(6 * var(--px)) 0 env(safe-area-inset-bottom); background: var(--f-card); border-radius: calc(28 * var(--px)) calc(28 * var(--px)) 0 0; box-shadow: 0 calc(-8 * var(--px)) calc(34 * var(--px)) rgba(10, 40, 40, .08); }
.tab { display: grid; justify-items: center; align-content: start; gap: calc(0px); padding: calc(6 * var(--px)) 0 0; border: 0; background: transparent; color: var(--f-tab-off); font: inherit; cursor: pointer; position: relative; }
.tab svg.i { font-size: calc(47.2 * var(--px)); stroke-width: 1.7; }
.tab-label { font-size: calc(19.7 * var(--px)); font-weight: 500; }
.tab[aria-current="page"] { color: var(--f-ink); }
.tab[aria-current="page"] .tab-label { font-weight: 800; }
.tab[aria-current="page"] svg.i { fill: currentColor; stroke-width: 1.2; }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(20 * var(--px)); width: calc(102 * var(--px)); height: calc(5 * var(--px)); border-radius: calc(3 * var(--px)); background: var(--f-lime-bright); }

/* other tabs: a compact header instead of the full hero */
.shell:not([data-view="home"]) .fhero { height: calc(150 * var(--px)); border-radius: 0 0 calc(40 * var(--px)) calc(40 * var(--px)); }
.shell:not([data-view="home"]) .fhero-copy, .shell:not([data-view="home"]) .fhero-art { display: none; }

/* ---------- sheets (menu, animal details) ---------- */
html { scroll-padding-bottom: calc(190 * (min(100vw, 480px) / 802)); scroll-padding-top: 12px; }   /* scrolled-to buttons stay clear of the tab bar */
dialog.sheet { margin: auto 0 0; left: 50%; transform: translateX(-50%); position: fixed; bottom: 0; width: 100%; max-width: 480px; border: 0; border-radius: calc(28 * var(--px)) calc(28 * var(--px)) 0 0; padding: calc(16 * var(--px)) calc(40 * var(--px)) calc(40 * var(--px) + env(safe-area-inset-bottom)); background: var(--f-card); color: var(--f-ink); box-shadow: 0 -20px 60px rgba(0, 0, 0, .3); }
dialog.sheet::backdrop { background: rgba(6, 22, 20, .55); backdrop-filter: blur(3px); }
dialog.sheet[open] { animation: sheetUp .25s ease both; }
@keyframes sheetUp { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sheet-grip { width: calc(80 * var(--px)); height: calc(8 * var(--px)); border-radius: 8px; background: var(--f-line); margin: 0 auto calc(22 * var(--px)); }
.menu-list { display: grid; }
.menu-list button, .menu-list a { display: flex; align-items: center; gap: calc(26 * var(--px)); width: 100%; min-height: calc(92 * var(--px)); padding: 0 calc(6 * var(--px)); border: 0; border-top: 1px solid var(--f-line); background: transparent; color: var(--f-ink); font: inherit; font-size: calc(26.7 * var(--px)); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.menu-list > :first-child { border-top: 0; }
.menu-list svg.i { font-size: calc(43.1 * var(--px)); color: var(--f-link); stroke-width: 1.7; }
.menu-foot { margin-top: calc(14 * var(--px)); text-align: center; color: var(--f-muted); font-size: calc(18.5 * var(--px)); }
.sheet .a-photo { aspect-ratio: 4 / 3; border-radius: calc(20 * var(--px)); overflow: hidden; background: var(--f-soft); display: grid; place-items: center; font-size: calc(92.4 * var(--px)); color: var(--f-link); }
.sheet .a-photo { position: relative; aspect-ratio: auto; min-height: 120px; background: var(--f-soft); }
.sheet .a-photo img { width: 100%; max-height: 52vh; object-fit: contain; display: block; cursor: zoom-in; }
.sheet h3 { font-size: calc(39.0 * var(--px)); letter-spacing: -.01em; font-weight: 800; margin-top: calc(22 * var(--px)); }
.sheet .kvs { margin-top: calc(12 * var(--px)); display: grid; }
.sheet .kvs div { display: flex; justify-content: space-between; gap: 12px; padding: calc(18 * var(--px)) 0; border-top: 1px solid var(--f-line); font-size: calc(22.6 * var(--px)); }
.sheet .kvs span { color: var(--f-muted); }
.sheet .kvs strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.sheet .sheet-actions { display: grid; gap: calc(14 * var(--px)); margin-top: calc(22 * var(--px)); }
.sheet .sheet-actions .cta { margin: 0; }

/* ---------- toasts above the tab bar ---------- */
.field .toasts { left: 16px; right: 16px; bottom: calc(150 * var(--px) + env(safe-area-inset-bottom)); max-width: 448px; margin: 0 auto; }
@media (min-width: 520px) { .field .shell { box-shadow: 0 0 80px rgba(0, 0, 0, .18); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- photos: fully visible (nothing cropped away) and enlargeable ---------- */
.rphoto { position: relative; margin: calc(18 * var(--px)) 0 0; border-radius: calc(16 * var(--px)); overflow: hidden; background: var(--f-soft); line-height: 0; }
.rphoto img { width: 100%; max-height: 48vh; object-fit: contain; display: block; cursor: zoom-in; }
.zoom-btn { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 22px; backdrop-filter: blur(4px); }
.zoom-btn svg.i { stroke-width: 2; }
.hthumb { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--f-soft); cursor: zoom-in; }
#imagePreview { cursor: zoom-in; }
dialog.lightbox { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; border: 0; padding: 0; background: rgba(4, 10, 8, .96); color: #fff; }
dialog.lightbox::backdrop { background: #000; }
.lightbox-stage { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; -webkit-overflow-scrolling: touch; }
.lightbox-stage img { max-width: 100vw; max-height: 100vh; object-fit: contain; cursor: zoom-in; touch-action: pan-x pan-y pinch-zoom; }
.lightbox-stage img.zoomed { max-width: none; max-height: none; width: 250vw; cursor: zoom-out; }
.lightbox-close { position: fixed; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; font-size: 26px; cursor: pointer; }
.lightbox-hint { position: fixed; z-index: 2; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); text-align: center; color: rgba(255, 255, 255, .7); font-size: 13px; pointer-events: none; margin: 0; }
.picked-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #dbe8fb; color: #1b4fa8; font-size: 13.5px; line-height: 1.45; }
:root[data-theme="dark"] .picked-note { background: #1b2c4a; color: #9bbcf2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .picked-note { background: #1b2c4a; color: #9bbcf2; } }

/* ---------- locked until a valid access key is entered ---------- */
body.field.locked main, body.field.locked .tabbar, body.field.locked .fhero-copy, body.field.locked .fhero-art, body.field.locked .menu-btn { display: none !important; }
body.field.locked .fhero { height: calc(150 * var(--px)); }

/* ---------- processing: the GauID logo with a spinning ring ---------- */
.proc-logo { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; background: #073b3c; display: grid; place-items: center; margin-bottom: 6px; }
.proc-logo img { width: 46px; height: auto; animation: procPulse 1.4s ease-in-out infinite; }
.proc-logo i { position: absolute; inset: -6px; border-radius: 50%; border: 4px solid transparent; border-top-color: #9be34f; border-right-color: rgba(155, 227, 79, .35); animation: spin 1s linear infinite; }
@keyframes procPulse { 0%, 100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.05); opacity: 1; } }
.proc { display: grid; justify-items: center; gap: 10px; padding: 14px 0 4px; color: var(--f-ink); font-size: 15px; }
.sheet-status { margin-bottom: 6px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.4; text-align: center; background: var(--f-soft); color: var(--f-ink); }
.sheet-status[data-tone="ok"] { background: #dff2e6; color: #12603a; }
.sheet-status[data-tone="err"] { background: #fdecd0; color: #8a5300; }
:root[data-theme="dark"] .sheet-status[data-tone="ok"] { background: #1c3a2b; color: #9be0b8; }
:root[data-theme="dark"] .sheet-status[data-tone="err"] { background: #3a2c14; color: #f2c37a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet-status[data-tone="ok"] { background: #1c3a2b; color: #9be0b8; } :root:not([data-theme="light"]) .sheet-status[data-tone="err"] { background: #3a2c14; color: #f2c37a; } }

/* ---------- camera: never show the browser's grey play-button placeholder ---------- */
.cam video { opacity: 0; transition: opacity .2s; }
.cam.ready video { opacity: 1; }
.cam video::-webkit-media-controls, .cam video::-webkit-media-controls-start-playback-button, .cam video::-webkit-media-controls-overlay-play-button,
.cam video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; opacity: 0 !important; }
.cam-loading { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 16px; background: #06130f; color: #fff; font-size: 15px; font-weight: 600; }
.cam.ready .cam-loading { display: none; }
.cam-guide, .cam-box, .cam-hint { z-index: 2; }
.cam-bar { z-index: 3; }
.cam:not(.ready) .cam-guide, .cam:not(.ready) .cam-hint { display: none; }

/* ---------- access key window: errors in red, under the box ---------- */
.dialog p.key-error { margin: 8px 2px 0; color: #d4261c; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.dialog p.key-error[hidden] { display: none; }
.key-input.invalid { border-color: #d4261c; box-shadow: 0 0 0 3px rgba(212, 38, 28, .15); }
:root[data-theme="dark"] .dialog p.key-error { color: #ff8a80; }
:root[data-theme="dark"] .key-input.invalid { border-color: #ff8a80; box-shadow: 0 0 0 3px rgba(255, 138, 128, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dialog p.key-error { color: #ff8a80; } :root:not([data-theme="light"]) .key-input.invalid { border-color: #ff8a80; box-shadow: 0 0 0 3px rgba(255, 138, 128, .18); } }

.btn.loading { opacity: .85; cursor: progress; }
.btn.loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .8s linear infinite; }
#keyDialog .key-input:disabled { opacity: .7; }

/* ---------- show / hide the access key ---------- */
#keyDialog .pass-wrap { position: relative; }
#keyDialog .pass-wrap .key-input { padding-right: 52px; }
#keyDialog .pass-toggle { position: absolute; right: 6px; top: 16px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--f-muted, #6b7a86); display: grid; place-items: center; font-size: 22px; cursor: pointer; }
#keyDialog .pass-toggle:hover, #keyDialog .pass-toggle:focus-visible { background: rgba(120, 140, 130, .18); outline: none; }
#keyDialog .pass-toggle svg.i { stroke-width: 1.9; }

.nv { color: #8a5300; background: #fdecd0; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; width: fit-content; }
.nv-note { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fdecd0; color: #8a5300; font-size: 14px; line-height: 1.4; }
.m-h { margin: 16px 0 6px; font-size: 15px; font-weight: 700; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.mlist li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--f-line); }
.mlist span:first-child { color: var(--f-muted); }
:root[data-theme="dark"] .nv, :root[data-theme="dark"] .nv-note { background: #3a2c14; color: #f2c37a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nv, :root:not([data-theme="light"]) .nv-note { background: #3a2c14; color: #f2c37a; } }

.shutter[data-ready="no"] { opacity: .45; filter: grayscale(.6); }
.shutter[data-ready="yes"] { box-shadow: 0 0 0 4px #5fe0a3; }

.acard .ph { position: relative; }
.vtag { position: absolute; top: 10px; left: 10px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.vtag.ok { background: #1f9d63; } .vtag.bad { background: #d4452f; }

/* guided registration */
.reg { margin: 14px 0 4px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--brand, #0c3f38) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand, #0c3f38) 25%, transparent); }
.reg b { display: block; margin-bottom: 8px; }
.reg p { margin: 8px 0 12px; font-size: .95rem; }
.reg-steps { display: flex; gap: 8px; flex-wrap: wrap; }
.reg-steps span { padding: 4px 10px; border-radius: 999px; font-size: .82rem; border: 1px solid currentColor; opacity: .75; }
.reg-steps span.done { opacity: 1; font-weight: 600; }
.reg-done { display: flex; gap: 8px; align-items: center; margin: 12px 0 4px; font-weight: 600; }

/* offline queue */
.qbadge { margin-left: calc(20 * var(--px)); padding: calc(6 * var(--px)) calc(18 * var(--px)); border: 0; border-radius: 999px; background: #ffd98a; color: #4a3200; font: inherit; font-size: calc(22 * var(--px)); font-weight: 600; cursor: pointer; }
.qbadge[hidden] { display: none; }

/* ---------- live camera: the three checks, in order ---------- */
.cam-steps { position: absolute; z-index: 3; top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cam-steps li { flex: 1; text-align: center; padding: 6px 4px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(0, 0, 0, .55); color: #cfd8d3; border: 1px solid rgba(255, 255, 255, .2); }
.cam-steps li[data-state="now"] { background: #f0b85a; color: #1d1405; border-color: #f0b85a; }
.cam-steps li[data-state="done"] { background: #5fe0a3; color: #06241a; border-color: #5fe0a3; }
.cam:not(.ready) .cam-steps { display: none; }

/* ---------- nose target: the same framing every time, so the nose is always seen the same way ---------- */
.cam-target { position: absolute; z-index: 2; pointer-events: none; border: 3px dashed rgba(255, 255, 255, .85); border-radius: 18px; display: grid; place-items: end center; padding-bottom: 8px; transition: border-color .2s; }
.cam-target span { font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; color: #fff; background: rgba(0, 0, 0, .55); padding: 4px 9px; border-radius: 999px; }
.cam-target[data-state="ideal"] { border: 3px solid #5fe0a3; }
.cam-target[data-state="ok"] { border-color: #f0b85a; }
.cam:not(.ready) .cam-target { display: none; }