/* App shell and input panel. The reading itself is styled in reading.css. */
body{ background:var(--stage); min-height:100dvh; }
.app{ max-width:1080px; margin:0 auto; padding:28px 16px 64px; display:grid; grid-template-columns:minmax(0,360px) minmax(0,440px); gap:36px; justify-content:center; align-items:start; }
.reading{ width:100%; }
.reading .phone{ max-width:440px; }

/* panel */
.panel{ background:#fff; border-radius:22px; padding:20px; position:sticky; top:20px; max-height:calc(100dvh - 40px); overflow:auto; box-shadow:0 10px 30px -14px rgba(40,30,20,.3); }
.panel h1{ font-family:"Young Serif",serif; font-weight:400; font-size:26px; line-height:1.1; color:var(--green); }
.panel h2{ font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--soil-2); margin:20px 0 8px; }
.samples{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
.samples button, .btn{ all:unset; box-sizing:border-box; cursor:pointer; font-size:13px; font-weight:700; padding:9px 10px; border-radius:10px; background:var(--green-3); color:var(--green); text-align:center; line-height:1.25; transition:background .15s ease, transform .15s ease; }
.samples button:hover, .btn:hover{ background:#d6eac7; }
.samples button:active, .btn:active{ transform:scale(.97); }
.samples button[aria-pressed=true]{ background:var(--green); color:#fff; }
.btn.upload{ width:100%; margin-top:12px; background:var(--mari-soft); color:#6b3f00; display:flex; gap:8px; justify-content:center; align-items:center; }
.btn.upload:hover{ background:#ffd27d; }
.soon{ margin-top:8px; font-size:13px; line-height:1.45; color:#6b3f00; background:#fff7e6; border-radius:10px; padding:10px 12px; }
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
.field{ display:grid; gap:4px; font-size:12.5px; font-weight:700; color:var(--soil-2); }
.field input, .field select{ font:600 15px/1.2 Figtree,sans-serif; color:var(--soil); padding:9px 10px; border:1.5px solid #e2d6bf; border-radius:10px; background:#fffdf9; width:100%; font-variant-numeric:tabular-nums; }
.field input:focus, .field select:focus{ outline:none; border-color:var(--green-2); box-shadow:0 0 0 3px #cfe8bf; }
.field input:invalid{ border-color:var(--chilli); }
.field small{ font-weight:500; color:#6f604d; }
.field.wide{ grid-column:1 / -1; }
.ticks{ display:grid; gap:2px; }
.ticks label{ display:flex; gap:10px; align-items:center; font-size:14px; font-weight:600; padding:7px 4px; border-radius:8px; cursor:pointer; }
.ticks label:hover{ background:#faf6ee; }
.ticks input{ width:18px; height:18px; accent-color:var(--green-2); }
.acidgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
.acidgrid h3{ grid-column:1 / -1; font:800 12px/1 Figtree,sans-serif; letter-spacing:.05em; text-transform:uppercase; color:#6f604d; margin:8px 0 0; display:block; }
.actions{ display:flex; gap:8px; margin-top:18px; }
.actions .btn{ flex:1; display:flex; gap:6px; justify-content:center; align-items:center; }
.actions .btn.ghost{ background:#f3eee4; color:var(--soil-2); }

.emptystate{ background:#fff; border-radius:22px; padding:28px 22px; text-align:center; color:var(--soil-2); line-height:1.5; }
.emptystate svg{ width:40px; height:40px; color:var(--green-2); margin-bottom:8px; }
.est{ font:700 10.5px/1 Figtree,sans-serif; background:#efe7d6; color:var(--soil-2); padding:3px 6px; border-radius:5px; margin-left:6px; vertical-align:middle; }
.rounding{ margin-top:10px; font-size:12px; color:#5e4d3c; }

/* mobile: panel folds away behind a toggle */
.mtoggle{ display:none; }
@media (max-width:860px){
  .app{ grid-template-columns:minmax(0,440px); gap:14px; padding-top:14px; }
  .panel{ position:static; max-height:none; }
  .app.folded .panel{ display:none; }
  .mtoggle{ display:flex; gap:8px; justify-content:center; align-items:center; position:sticky; top:10px; z-index:5; width:max-content; margin:0 auto; padding:10px 16px; border-radius:999px; background:var(--soil); color:#fff; font:800 14px/1 Figtree,sans-serif; border:0; cursor:pointer; box-shadow:0 8px 20px -8px rgba(0,0,0,.4); }
}

@media print{
  body{ background:#fff; }
  .panel, .mtoggle, .mode, .seg{ display:none !important; }
  .app{ display:block; padding:0; }
  .reading .phone{ max-width:none; box-shadow:none; border-radius:0; }
  details.fa{ display:block; }
  .care, .card, .plan, .safety{ break-inside:avoid; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* Chinese: Young Serif and Caveat have no CJK glyphs, so pair each with a matching Noto face */
:lang(zh-Hans) body, :lang(zh-Hans) .field input{ font-family:Figtree,"Noto Sans SC",sans-serif; }
:lang(zh-Hant) body, :lang(zh-Hant) .field input{ font-family:Figtree,"Noto Sans TC",sans-serif; }
:lang(zh-Hans) .front h2, :lang(zh-Hans) h3, :lang(zh-Hans) .care .top p, :lang(zh-Hans) .promise, :lang(zh-Hans) .panel h1{ font-family:"Young Serif","Noto Sans SC",serif; font-weight:700; }
:lang(zh-Hant) .front h2, :lang(zh-Hant) h3, :lang(zh-Hant) .care .top p, :lang(zh-Hant) .promise, :lang(zh-Hant) .panel h1{ font-family:"Young Serif","Noto Sans TC",serif; font-weight:700; }
:lang(zh-Hans) .remark, :lang(zh-Hans) .note, :lang(zh-Hans) .sign{ font-family:"Noto Sans SC",sans-serif; font-size:19px; font-weight:700; transform:none; }
:lang(zh-Hant) .remark, :lang(zh-Hant) .note, :lang(zh-Hant) .sign{ font-family:"Noto Sans TC",sans-serif; font-size:19px; font-weight:700; transform:none; }
.brand{ white-space:nowrap; }
@media (max-width:400px){ .brand .tz{ display:none; } }
.gauge{ margin-top:30px; }
.ratio .lbl{ min-width:0; }

/* upload */
.hint{ font-size:12.5px; line-height:1.45; color:#6f604d; margin-top:6px; }
.notice{ margin-top:8px; font-size:13.5px; line-height:1.45; border-radius:10px; padding:10px 12px; }
.notice.ok{ background:var(--green-3); color:#1f5a2c; }
.notice.warn{ background:#fff4dc; color:#6b3f00; }
.notice.err{ background:var(--chilli-soft); color:#8a2412; }
.btn.upload[disabled]{ cursor:progress; opacity:.85; }
.btn.upload[aria-busy=true] svg{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.field input.scanned{ border-color:var(--mari); background:#fffaf0; box-shadow:0 0 0 3px #ffe9bd; }

/* Reserve icon space before the icon library swaps <i> for <svg>, so nothing shifts. */
i[data-lucide]{ display:inline-block; width:18px; height:18px; flex:none; }
h3 i[data-lucide]{ width:22px; height:22px; }
.st i[data-lucide]{ width:14px; height:14px; }
.lab i[data-lucide]{ width:15px; height:15px; }
.daily b i[data-lucide]{ width:15px; height:15px; }
.emptystate i[data-lucide]{ width:40px; height:40px; }