/* Foundation */
:root {
  --canvas: #e5ddc9;
  --pearl: #fffaf0;
  --mineral: #d4cfbd;
  --olive-surface: #dce2d2;
  --ink: #073a32;
  --muted: #697569;
  --line: #c5c7b7;
  --green: #0b6b56;
  --forest: #043d34;
  --amber: #a86722;
  --red: #b94842;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: #d9d1bc; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: linear-gradient(155deg, #f9f3e6 0%, var(--canvas) 54%, #d9d1be 100%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, textarea, input, select { font: inherit; }
button { border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid rgba(23,32,28,.52); outline-offset: 3px; }

/* Application shell */
.app { position: relative; width: min(100%, 590px); min-height: 100dvh; margin: 0 auto; padding: calc(24px + env(safe-area-inset-top)) 22px calc(122px + env(safe-area-inset-bottom)); overflow: hidden; }
.v { display: none; animation: view-in 320ms cubic-bezier(.2, .8, .2, 1); }
.v.on { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Header and brand */
.top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 3px 2px 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--forest); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.brand-mark { display: grid; width: 19px; height: 19px; place-items: center; border: 2px solid currentColor; border-radius: 7px; transform: rotate(45deg); }
.brand-mark span { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status { display: inline-flex; align-items: center; min-height: 35px; padding: 0 12px; border: 1px solid rgba(131,141,121,.5); border-radius: 999px; background: rgba(255,251,241,.66); color: #29493d; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .075em; box-shadow: inset 0 1px rgba(255,255,255,.82), 0 2px 10px rgba(20,45,36,.04); }
.status::before { width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--green); content: ""; }
.status.is-flare::before { background: var(--red); }

/* Home and primary input */
.check-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.check-atmosphere::before { position: absolute; top: -280px; right: -190px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(170,194,141,.44), rgba(170,194,141,0) 68%); content: ""; }
.check-atmosphere::after { position: absolute; top: 430px; left: -210px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(110,143,91,.22), rgba(110,143,91,0) 70%); content: ""; }
.olive-branch { position:absolute; top:178px; right:-218px; display:block; width:470px; height:314px; background:url("assets/olive-branch-atmosphere.webp") center / contain no-repeat; opacity:.27; filter:saturate(.67) contrast(.9) brightness(1.12); mix-blend-mode:multiply; }
.hero { position: relative; z-index: 1; padding-top: clamp(31px, 5.5vh, 52px); }
.ey { color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
h1 { max-width: 440px; margin: 0; color: var(--forest); font-family: var(--sans); font-size: clamp(47px, 12.2vw, 67px); font-weight: 760; letter-spacing: -.075em; line-height: .9; }
h1 span { color: #125142; font-weight: 650; letter-spacing: -.07em; }
.support { max-width: 31ch; margin: 17px 0 24px; color: #24443a; font-size: 15px; font-weight: 510; line-height: 1.45; }
.field { position: relative; padding: 18px 18px 13px; border: 1px solid rgba(160,157,137,.48); border-radius: 23px; background: rgba(255,252,243,.9); box-shadow: 0 12px 25px rgba(38,52,37,.075), inset 0 1px rgba(255,255,255,.96); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.field:focus-within { border-color: rgba(18,67,55,.62); background: #fffdf7; box-shadow: 0 14px 32px rgba(22,55,41,.13), inset 0 1px rgba(255,255,255,.98); }
.field label { display: block; color: #587062; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.entry-row { display: flex; align-items: flex-end; gap: 4px; }
textarea { display: block; width: 100%; min-height: 54px; max-height: 180px; margin: 5px 0 0; padding: 6px 4px 3px 0; resize: none; overflow: hidden; border: 0; outline: 0; background: none; color: var(--ink); font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.42; }
textarea:focus,
textarea:focus-visible { outline: none !important; border: 0 !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; }
textarea::placeholder { color: #9ba19c; opacity: 1; }
.mic { position: relative; flex: 0 0 48px; width: 48px; height: 48px; margin: 0 0 1px; padding: 0; border: 1px solid rgba(27,79,62,.18); border-radius: 50%; background:linear-gradient(145deg,#f9f7ed,#e9eee1); box-shadow:inset 0 1px rgba(255,255,255,.94),0 4px 10px rgba(25,58,43,.08); color: var(--forest); transition: transform 130ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease; }
.mic:focus-visible { outline: 2px solid rgba(18,67,55,.58); outline-offset: 3px; }.mic:active { transform: scale(.94); }.mic[data-state="listening"] { border-color:#0c5545; background:linear-gradient(145deg,#0a5e4d,#043d34); box-shadow:0 0 0 6px rgba(108,154,123,.15),inset 0 1px rgba(255,255,255,.16); color:#fffdf4; }.mic[data-state="transcribing"] { border-color:rgba(41,106,81,.36); background:linear-gradient(145deg,#d7e5d0,#eef2e7); box-shadow:0 0 0 5px rgba(130,165,120,.1),inset 0 1px rgba(255,255,255,.86); color:#145644; }.mic[data-state="returned"] { border-color:rgba(41,106,81,.3); background:#eef4e8; color:#145644; }.mic[data-state="unavailable"], .mic[data-state="error"], .mic[data-state="denied"] { border-color:rgba(152,91,73,.28); background:#fbf1e9; color:#805044; }
.mic-icon { width:22px; height:22px; vertical-align:middle; overflow:visible; }.mic-icon rect,.mic-icon path { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.voice-status { min-height: 0; margin: 0; color: #6a665c; font-size: 11px; line-height: 1.35; }.voice-status:not(:empty) { margin-top: 6px; }
.go, .action { width: 100%; min-height: 62px; margin-top: 15px; padding: 17px 22px; border: 1px solid rgba(255,255,255,.13); border-radius: 19px; background: linear-gradient(135deg, #075245 0%, #023a31 100%); box-shadow: 0 7px 14px rgba(5,58,49,.14), inset 0 1px rgba(255,255,255,.14); color: white; font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .1em; transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
.button-arrow { position: relative; display: inline-block; width: 17px; height: 10px; margin-left: 10px; vertical-align: -1px; }.button-arrow::before { position: absolute; top: 4px; right: 0; left: 0; height: 1px; background: currentColor; content: ""; }.button-arrow::after { position: absolute; top: 1px; right: 0; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; content: ""; transform: rotate(45deg); }.go:active, .action:active { transform: translateY(2px) scale(.995); box-shadow: 0 3px 7px rgba(5,58,49,.18), inset 0 1px rgba(0,0,0,.16); }
.line { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 19px 3px 0; padding: 0 2px; color: #58685d; font-size: 12px; line-height: 1.35; }
.link { flex: 0 0 auto; padding: 6px 0; background: none; color: var(--ink); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-decoration: none; }
.link::after { display: block; height: 1px; margin-top: 3px; background: currentColor; content: ""; opacity: .55; }
.learn-preview { position: relative; display: flex; width: 100%; min-height: 194px; margin-top: 23px; padding: 23px 21px; overflow: hidden; border: 1px solid rgba(167,148,125,.38); border-radius: 24px; background: linear-gradient(132deg, rgba(255,250,238,.97), rgba(238,221,195,.87)); color: var(--forest); text-align: left; box-shadow: 0 12px 24px rgba(69,54,35,.075), inset 0 1px rgba(255,255,255,.9); }.learn-preview::before { position:absolute; right:-64px; bottom:-86px; width:220px; height:220px; border-radius:50%; background:rgba(251,211,173,.5); content:""; }.learn-copy { position:relative; z-index:2; display:flex; width:61%; flex-direction:column; align-items:flex-start; }.learn-copy b { color:#986034; font-family:var(--mono); font-size:9px; letter-spacing:.1em; }.learn-copy strong { max-width:11ch; margin-top:17px; font-family:var(--sans); font-size:25px; font-weight:760; letter-spacing:-.065em; line-height:.97; }.learn-copy em { max-width:22ch; margin-top:14px; color:#685a4d; font-size:12px; font-style:normal; line-height:1.4; }.learn-copy i { position:relative; margin-top:17px; padding-right:18px; color:#315545; font-family:var(--mono); font-size:9px; font-style:normal; font-weight:700; letter-spacing:.07em; }.learn-copy i::after { position:absolute; top:4px; right:0; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; content:""; transform:rotate(45deg); }.joint-art { position:absolute; z-index:1; top:0; right:0; bottom:0; width:48%; overflow:hidden; }.joint-art::after { position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,249,237,.98) 0%, rgba(255,249,237,.18) 46%, rgba(255,249,237,0) 78%); content:""; }.joint-art img { width:100%; height:100%; object-fit:cover; object-position:62% 56%; mix-blend-mode:multiply; filter:saturate(.82) contrast(.98) brightness(1.08); }

/* Bottom navigation: Gout Guard's own quiet clinical instrument language. */
.nav { position:fixed; right:0; bottom:0; left:0; z-index:3; display:flex; justify-content:center; padding:12px 13px calc(9px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,rgba(228,220,202,.12) 13%,rgba(238,232,216,.93) 45%,rgba(238,232,216,.985)); pointer-events:none; }
.nav div { display:flex; width:min(100%,530px); min-height:67px; overflow:hidden; border:1px solid rgba(93,107,91,.23); border-radius:22px; background:linear-gradient(145deg,rgba(255,252,242,.94),rgba(230,230,216,.91)); box-shadow:0 12px 27px rgba(36,49,38,.13),inset 0 1px rgba(255,255,255,.9); pointer-events:auto; }
.nav button { position:relative; display:flex; flex:1; min-width:0; min-height:65px; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; color:#788075; font-family:var(--mono); font-size:8px; font-weight:750; letter-spacing:.075em; transition:color 180ms ease,transform 140ms ease,background 180ms ease; }
.nav button + button::before { position:absolute; top:19px; bottom:19px; left:0; width:1px; background:rgba(93,107,91,.1); content:""; }
.nav button.active { color:var(--forest); background:linear-gradient(180deg,rgba(210,225,207,.58),rgba(248,246,235,.08)); }
.nav button.active::after { position:absolute; right:32%; bottom:6px; left:32%; height:2px; border-radius:99px; background:var(--forest); content:""; }
.nav button:active { transform:scale(.97); }
.nav-icon { position:relative; display:block; width:22px; height:22px; color:currentColor; }
.nav-check { border:1.7px solid currentColor; border-radius:8px; transform:rotate(45deg) scale(.76); }
.nav-check::before { position:absolute; top:5px; left:5px; width:8px; height:8px; border:1.5px solid currentColor; border-radius:50%; content:""; }
.nav-check::after { position:absolute; right:2px; bottom:2px; width:5px; height:5px; border-radius:50%; background:currentColor; content:""; }
.nav-learn::before { position:absolute; top:2px; left:3px; width:15px; height:17px; border:1.6px solid currentColor; border-radius:53% 47% 48% 52%; content:""; transform:rotate(-19deg); }
.nav-learn::after { position:absolute; top:7px; left:8px; width:8px; height:8px; border:1.5px solid currentColor; border-radius:50%; box-shadow:0 -5px 0 -3px currentColor; content:""; }
.nav-history::before { position:absolute; top:4px; bottom:4px; left:10px; width:1.7px; border-radius:99px; background:currentColor; content:""; }
.nav-history::after { position:absolute; top:3px; left:6px; width:9px; height:9px; border:1.6px solid currentColor; border-radius:50%; box-shadow:0 10px 0 -1px #f5f1e4,0 10px 0 0 currentColor; content:""; }
.nav-me::before { position:absolute; top:2px; left:7px; width:8px; height:8px; border:1.7px solid currentColor; border-radius:50%; content:""; }
.nav-me::after { position:absolute; bottom:2px; left:3px; width:16px; height:10px; border:1.7px solid currentColor; border-bottom:0; border-radius:12px 12px 3px 3px; content:""; }

/* Result experience */
.back { position: relative; padding: 6px 0 20px 18px; background: none; color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; }.back::before { position:absolute; top:9px; left:2px; width:7px; height:7px; border-bottom:1px solid currentColor; border-left:1px solid currentColor; content:""; transform:rotate(45deg); }.back::after { position:absolute; top:12px; left:2px; width:10px; height:1px; background:currentColor; content:""; }
.res { display: flex; flex-direction: column; min-height: calc(100dvh - 134px); }
.result-hero { position: relative; min-height: 348px; padding: 28px 23px 26px; overflow: hidden; border: 1px solid #cbd0c5; border-radius: 26px; background: linear-gradient(145deg, #f5f5ec 0%, #ecefe6 100%); box-shadow: 0 12px 30px rgba(24,32,27,.055), inset 0 1px rgba(255,255,255,.9); }
.result-hero::before { position: absolute; width: 270px; height: 270px; top: -164px; right: -82px; border-radius: 50%; background: rgba(52,113,84,.075); content: ""; pointer-events: none; }
.result-hero > * { position: relative; }
#result.decision-amber .result-hero::before { background: rgba(168,103,34,.085); }
#result.decision-red .result-hero::before { background: rgba(185,72,66,.085); }
.decision { margin: 24px 0 18px; font-size: clamp(59px, 16.5vw, 88px); font-weight: 800; letter-spacing: -.095em; line-height: .85; }
#result.on .decision { animation: decision-in 420ms cubic-bezier(.16, 1, .3, 1); }
@keyframes decision-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.green { color: var(--green); } .amber { color: var(--amber); } .red { color: var(--red); }
.phrase { max-width: 29ch; color: #435049; font-size: 21px; font-weight: 500; letter-spacing: -.035em; line-height: 1.32; }
.insight { margin-top: 28px; padding: 18px 0 0; border-top: 1px solid rgba(152,156,147,.38); }
.insight strong { display: block; margin-top: 8px; color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -.045em; }
.insight p { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.foot { margin-top: 22px; padding: 18px; border: 1px solid #cdd0c5; border-radius: 22px; background: rgba(237,238,229,.82); box-shadow: inset 0 1px rgba(255,255,255,.85); }
.foot .action { margin-top: 0; }
.secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.secondary { display: block; width: 100%; min-height: 43px; padding: 10px; border: 1px solid rgba(197,202,192,.95); border-radius: 12px; background: rgba(246,247,240,.72); color: var(--ink); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.secondary:active { background: #efeee8; transform: translateY(1px); }
.more { margin-top: 12px; padding: 16px 0 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; }
.hide { display: none !important; }

/* GG.1.7 flagship decision layer */
.checked-item { max-width: 32ch; margin: 10px 0 0; color: #526158; font-size: 13px; font-weight: 650; letter-spacing: -.012em; line-height: 1.35; }
.result-orbit { position: absolute; border-radius: 50%; pointer-events: none; }.result-orbit-one { top: -96px; right: -62px; width: 250px; height: 250px; background: radial-gradient(circle at 42% 58%, rgba(133,178,127,.25), rgba(133,178,127,0) 68%); }.result-orbit-two { right: -32px; bottom: -74px; width: 170px; height: 170px; border: 1px solid rgba(29,86,66,.08); }
#result.decision-amber .result-hero { background: linear-gradient(145deg, #fff8e9 0%, #f1e6cc 100%); border-color: #dac69e; } #result.decision-amber .result-orbit-one { background: radial-gradient(circle at 42% 58%, rgba(205,147,61,.26), rgba(205,147,61,0) 68%); }
#result.decision-red .result-hero { background: linear-gradient(145deg, #fff4ed 0%, #efdcd3 100%); border-color: #d8afa7; } #result.decision-red .result-orbit-one { background: radial-gradient(circle at 42% 58%, rgba(191,89,71,.22), rgba(191,89,71,0) 68%); }
.flare-context { max-width: 35ch; margin-top: 18px; padding: 11px 13px; border: 1px solid rgba(177,77,65,.22); border-radius: 12px; background: rgba(255,249,243,.62); color: #8b443b; font-size: 12px; font-weight: 620; line-height: 1.4; }
.insight { margin-top: 25px; }.insight > strong { font-size: 24px; }.factor-grid { display: grid; gap: 8px; margin-top: 15px; }.factor-card { display: flex; gap: 10px; padding: 11px 12px; border: 1px solid rgba(130,140,126,.2); border-radius: 14px; background: rgba(255,255,250,.55); }.factor-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--amber); } #result.decision-red .factor-dot { background: var(--red); }.factor-card strong { display:block; color:var(--ink); font-size:14px; font-weight:760; letter-spacing:-.025em; }.factor-card b { display:block; margin-top:4px; color:#5b705f; font-family:var(--mono); font-size:9px; letter-spacing:.075em; }.factor-card p { margin:5px 0 0; color:#5b675e; font-size:12px; line-height:1.35; }.decision-do { display:grid; grid-template-columns:31px minmax(0,1fr); gap:12px; margin-top:16px !important; padding-top:14px; border-top:1px solid rgba(152,156,147,.32); }.decision-do > b { color:var(--forest); font-family:var(--mono); font-size:9px; letter-spacing:.09em; }.action-list { display:grid; gap:9px; min-width:0; }.factor-action { display:grid; gap:3px; min-width:0; padding:10px 11px; border-radius:11px; background:rgba(255,255,250,.45); }.factor-action b,.secondary-do b { color:var(--ink); font-size:12px; }.factor-action span,.secondary-do span { color:#44574c; font-size:13px; font-weight:600; line-height:1.38; overflow-wrap:normal; word-break:normal; hyphens:none; }.not-today-action { min-width:0; padding:11px 12px; border:1px solid rgba(179,78,65,.19); border-radius:12px; background:rgba(255,249,244,.64); }.not-today-action b { color:#933f36; font-size:14px; }.not-today-action p { margin:5px 0 0; color:#665c56; font-size:12px; line-height:1.38; }.secondary-do { grid-column:1 / -1; display:block; width:100%; min-width:0; margin-top:1px; padding:12px 13px; border:1px solid rgba(179,78,65,.15); border-radius:12px; background:rgba(255,249,244,.46); }.secondary-do b { display:block; font-family:var(--mono); font-size:9px; letter-spacing:.07em; text-transform:uppercase; }.secondary-do span { display:block; margin-top:5px; }.swap-option + .swap-option { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.positive-guidance { margin-top: 28px; padding: 15px 0 0; border-top: 1px solid rgba(152,156,147,.32); }.guidance-list { display: grid; gap: 7px; margin-top: 11px; }.guidance-list span { display: flex; align-items: center; gap: 8px; color: #466354; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; }.guidance-list span::before { width: 7px; height: 7px; border-radius: 50%; background: var(--green); content: ""; }
.foot { margin-top: 18px; background: linear-gradient(150deg, rgba(242,243,235,.94), rgba(225,230,216,.84)); }.action-caption { margin: 8px 0 1px; color: #6e786f; font-size: 11px; text-align: center; }.secondary { min-height: 48px; transition: background 140ms ease, transform 140ms ease, border-color 140ms ease; }.secondary:hover { border-color: rgba(24,68,55,.35); background: rgba(255,255,250,.88); }.more b { color: var(--ink); }
.clarification { margin-top: 18px; padding: 20px; border: 1px solid rgba(174,153,112,.4); border-radius: 20px; background: linear-gradient(145deg, rgba(255,249,233,.95), rgba(242,230,204,.88)); box-shadow: inset 0 1px rgba(255,255,255,.76); }.clarification strong { display: block; margin-top: 10px; color: var(--forest); font-size: 27px; letter-spacing: -.055em; }.clarification p { margin: 8px 0 16px; color: #5b645d; font-size: 13px; line-height: 1.42; }.clarification-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.clarification-options button { min-height: 46px; padding: 9px; border: 1px solid rgba(111,106,83,.24); border-radius: 12px; background: rgba(255,253,245,.76); color: var(--forest); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .055em; }.clarification-options button:active { transform: translateY(1px); }
.log-confirmation { position: fixed; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); left: 20px; z-index: 7; max-width: 360px; margin: auto; padding: 14px 17px; border: 1px solid rgba(227,244,225,.4); border-radius: 15px; background: #084b3e; box-shadow: 0 12px 28px rgba(5,49,42,.25); color: #fffaf0; font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 180ms ease, transform 180ms ease; }.log-confirmation.show { opacity: 1; transform: translateY(0); }

/* Flare Mode and History */
h2 { margin: 10px 0 24px; font-size: 44px; font-weight: 750; letter-spacing: -.07em; line-height: .95; }
.form label { display: block; margin-top: 20px; color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.form input, .form select, .form textarea { width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.48); color: var(--ink); }
.form input, .form select { min-height: 48px; padding: 0 13px; }
.form textarea { min-height: 82px; padding: 12px 13px; }
.record { padding: 18px 0; border-top: 1px solid var(--line); }
.small { color: var(--muted); font-family: var(--mono); font-size: 10px; }
/* GG.1.8 LEARN */
.learn-screen { padding-top: 1px; }.learn-top { display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:3px 1px 11px; color:var(--forest); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.14em; }.learn-intro { margin:30px 1px 25px; }.learn-intro h2 { max-width:11ch; margin:9px 0 12px; color:var(--forest); font-size:clamp(39px,10.5vw,59px); font-weight:760; letter-spacing:-.075em; line-height:.91; }.learn-intro p { max-width:29ch; margin:0; color:#536158; font-size:15px; line-height:1.45; }
.learn-featured { position:relative; display:block; width:100%; min-height:330px; padding:27px 23px; overflow:hidden; border:1px solid rgba(151,173,151,.36); border-radius:27px; background:radial-gradient(circle at 88% 15%, rgba(102,160,124,.28), rgba(102,160,124,0) 40%),linear-gradient(145deg,#063f35 0%,#062d29 100%); color:#fffdf2; text-align:left; box-shadow:0 19px 35px rgba(4,48,40,.2),inset 0 1px rgba(255,255,255,.08); }.learn-featured::before { position:absolute; right:-70px; bottom:-105px; width:310px; height:310px; border:1px solid rgba(220,237,208,.14); border-radius:50%; content:""; }.learn-featured::after { position:absolute; right:13%; bottom:11%; width:9px; height:9px; border-radius:50%; background:#d9b56c; box-shadow:31px -19px 0 #e7cb85,48px 18px 0 rgba(222,203,132,.72); content:""; }.featured-copy { position:relative; z-index:2; display:flex; width:58%; min-height:275px; flex-direction:column; align-items:flex-start; }.featured-copy b,.lesson-card-copy b { color:#c3d5bd; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em; }.featured-copy strong { max-width:9ch; margin-top:20px; color:#fffdf2; font-size:31px; font-weight:740; letter-spacing:-.067em; line-height:.94; }.featured-copy em { max-width:18ch; margin-top:15px; color:#e6eee0; font-size:12px; font-style:normal; line-height:1.45; }.featured-copy i,.lesson-card-copy i { position:relative; margin-top:auto; padding-right:19px; color:#e5d8af; font-family:var(--mono); font-size:9px; font-style:normal; font-weight:700; letter-spacing:.075em; }.featured-copy i::after,.lesson-card-copy i::after { position:absolute; top:3px; right:0; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; content:""; transform:rotate(45deg); }.featured-art { position:absolute; top:0; right:0; bottom:0; width:57%; overflow:hidden; }.featured-art::after { position:absolute; inset:0; background:linear-gradient(90deg,#063f35 0%,rgba(6,63,53,.83) 14%,rgba(6,63,53,.07) 62%,rgba(6,48,42,.04)); content:""; }.featured-art img { width:100%; height:100%; object-fit:cover; object-position:58% 54%; mix-blend-mode:screen; opacity:.82; filter:saturate(.72) contrast(1.08) brightness(.92); }
.lesson-feed { margin-top:31px; }.lesson-feed > .ey { margin-left:2px; }.lesson-card { position:relative; display:grid; width:100%; min-height:178px; grid-template-columns:40% 1fr; gap:17px; margin-top:13px; padding:0; overflow:hidden; border:1px solid rgba(164,156,132,.36); border-radius:21px; background:rgba(255,250,239,.72); color:var(--ink); text-align:left; box-shadow:0 10px 20px rgba(58,49,31,.055),inset 0 1px rgba(255,255,255,.82); }.lesson-card:active,.learn-featured:active { transform:translateY(1px) scale(.998); }.lesson-card-art { position:relative; display:block; min-height:100%; overflow:hidden; background:#d7ddd0; }.lesson-card-art::before,.lesson-card-art::after { position:absolute; border-radius:50%; content:""; }.lesson-card-art i { position:absolute; display:block; border-radius:50%; }.lesson-card-copy { position:relative; display:flex; min-width:0; padding:20px 18px 18px 0; flex-direction:column; align-items:flex-start; }.lesson-card-copy b { color:#7d6b4d; font-size:8px; }.lesson-card-copy strong { max-width:15ch; margin-top:10px; color:var(--forest); font-size:21px; font-weight:750; letter-spacing:-.052em; line-height:.98; }.lesson-card-copy em { max-width:25ch; margin-top:9px; color:#657066; font-size:11px; font-style:normal; line-height:1.38; }.lesson-card-copy i { margin-top:12px; color:#346250; font-size:8px; }.lesson-card-0 .lesson-card-art { background:linear-gradient(145deg,#0a4b40,#1a6c57); }.art-flare::before { top:28%; left:21%; width:77px; height:77px; background:radial-gradient(circle,#ffd793 0%,#e37856 27%,rgba(222,99,71,.1) 67%); box-shadow:0 0 0 24px rgba(255,218,153,.12); }.art-flare::after { bottom:-32px; left:-23px; width:145px; height:105px; border:1px solid rgba(223,239,208,.24); }.art-flare i:first-child { top:25px; right:15px; width:29px; height:29px; border:1px solid rgba(234,244,225,.48); }.lesson-card-1 .lesson-card-art { background:linear-gradient(145deg,#e7dec7,#c5d4ca); }.art-urate::before { top:26px; left:23px; width:66px; height:66px; border:2px solid rgba(7,58,50,.52); background:rgba(252,249,238,.3); }.art-urate::after { top:58px; right:-31px; width:85px; height:85px; background:rgba(49,113,89,.22); }.art-urate i:first-child { top:54px; left:54px; width:10px; height:10px; background:#bf9a45; box-shadow:18px -16px 0 #558c72,28px 14px 0 #d3b86d; }.lesson-card-2 .lesson-card-art { background:linear-gradient(145deg,#f1ddbd,#d6b277); }.art-food::before { top:38px; left:23px; width:83px; height:48px; border-radius:44px 44px 28px 28px; background:rgba(255,251,238,.84); box-shadow:inset 0 -7px rgba(97,137,93,.22); }.art-food::after { bottom:-23px; left:13px; width:116px; height:66px; border:1px solid rgba(107,75,37,.23); }.art-food i:first-child { top:48px; left:47px; width:17px; height:17px; background:#cf8553; box-shadow:22px -6px 0 #7ca06c,-18px 6px 0 #e1c46c; }.lesson-card-3 .lesson-card-art { background:linear-gradient(145deg,#294d45,#0d342f); }.art-return::before { top:30px; left:26px; width:78px; height:78px; border:1px solid rgba(234,238,214,.55); }.art-return::after { top:50px; left:48px; width:52px; height:52px; border:1px solid rgba(234,238,214,.35); }.art-return i:first-child { top:61px; left:60px; width:28px; height:28px; border:1px solid #d7bd71; background:rgba(213,182,101,.22); }.lesson-card-4 .lesson-card-art { background:linear-gradient(145deg,#f1d6c5,#e4b6a4); }.art-safety::before { top:22px; left:33px; width:60px; height:80px; border-radius:34px 34px 48px 48px; background:rgba(255,249,238,.72); }.art-safety::after { top:42px; left:59px; width:8px; height:39px; border-radius:6px; background:#b44942; box-shadow:0 49px 0 -1px #b44942; }.learn-disclaimer { max-width:43ch; margin:27px 2px 0; color:#6a716a; font-size:11px; line-height:1.45; }
.lesson-screen { padding-top:2px; padding-bottom:calc(136px + env(safe-area-inset-bottom)); }.lesson-back { margin-bottom:0; }.lesson-story { margin-bottom:calc(16px + env(safe-area-inset-bottom)); overflow:hidden; border:1px solid rgba(126,151,132,.32); border-radius:28px; background:rgba(255,250,238,.72); box-shadow:0 16px 34px rgba(42,51,38,.085),inset 0 1px rgba(255,255,255,.88); }.lesson-story-head { display:flex; justify-content:space-between; gap:12px; padding:20px 22px 0; color:#779480; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.11em; }.lesson-story h2 { max-width:11ch; margin:19px 22px 11px; color:var(--forest); font-size:clamp(40px,10vw,60px); font-weight:760; letter-spacing:-.08em; line-height:.9; }.lesson-lead { max-width:31ch; margin:0 22px 22px; color:#53635a; font-size:14px; line-height:1.45; }.lesson-continuing .lesson-story-head { display:none; }.lesson-continuation { display:flex; align-items:center; justify-content:space-between; gap:13px; padding:18px 22px 15px; color:#527164; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.08em; line-height:1.3; }.lesson-continuation span { max-width:26ch; }.lesson-continuation b { flex:0 0 auto; color:#7c887e; font-size:8px; }.lesson-visual { position:relative; height:290px; margin:0; overflow:hidden; background:linear-gradient(145deg,#0a473d,#062f2a); }.lesson-continuing .lesson-visual { height:min(45vh,340px); min-height:248px; }.lesson-visual img { width:100%; height:100%; object-fit:cover; object-position:54% 55%; opacity:.88; filter:saturate(.75) contrast(1.06) brightness(.9); }.lesson-visual::after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,49,42,.45),rgba(5,49,42,.04) 57%,rgba(5,49,42,.36)); content:""; pointer-events:none; }.lesson-visual figcaption { position:absolute; z-index:2; bottom:13px; left:18px; color:rgba(244,242,225,.76); font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.08em; }.crystal { position:absolute; z-index:2; width:13px; height:13px; border:1px solid rgba(255,240,185,.9); background:linear-gradient(135deg,#fff3a4,#e0ae45); box-shadow:0 0 13px rgba(255,194,76,.82); transform:rotate(45deg); }.crystal-one { top:48%; left:51%; }.crystal-two { top:57%; left:62%; width:9px; height:9px; }.crystal-three { top:43%; left:68%; width:7px; height:7px; }.heat-map { position:absolute; z-index:2; right:18%; bottom:14%; width:132px; height:108px; border-radius:50%; background:radial-gradient(circle,rgba(255,217,114,.82),rgba(221,92,55,.58) 32%,rgba(205,79,58,.1) 71%); mix-blend-mode:screen; }.visual-pain .heat-map { width:165px; height:132px; right:11%; bottom:8%; }.diagram { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 45%,rgba(200,224,196,.22),rgba(200,224,196,0) 34%),linear-gradient(145deg,#093f36,#092e29); }.diagram::before,.diagram::after { position:absolute; border-radius:50%; content:""; }.diagram::before { width:220px; height:220px; border:1px solid rgba(223,238,207,.17); }.diagram::after { width:135px; height:135px; border:1px solid rgba(223,238,207,.22); }.diagram i { position:absolute; width:13px; height:13px; border-radius:50%; background:#d6bc72; box-shadow:28px -34px 0 #77a18a,-31px 43px 0 #d8e4c8,65px 57px 0 #bc8061; }.diagram i:nth-child(1) { top:44%; left:24%; }.diagram i:nth-child(2) { top:28%; right:27%; width:8px; height:8px; background:#dce8c9; }.diagram i:nth-child(3) { bottom:22%; left:43%; width:7px; height:7px; background:#c98764; }.diagram i:nth-child(4) { display:none; }.diagram b { position:relative; z-index:2; color:#fbf7e9; font-family:var(--mono); font-size:10px; letter-spacing:.13em; }.diagram-purines::before { border-radius:42% 58% 46% 54%; background:rgba(131,177,123,.14); }.diagram-bloodstream { background:linear-gradient(145deg,#713a37,#2e2026); }.diagram-bloodstream::before { width:320px; height:72px; border:0; border-radius:99px; background:linear-gradient(90deg,#9c5147,#dc8473,#9c5147); transform:rotate(-14deg); }.diagram-kidneys::before { width:70px; height:105px; border:0; border-radius:53% 44% 49% 46%; background:rgba(220,180,142,.72); box-shadow:90px 0 0 rgba(220,180,142,.72); }.diagram-food-factor { background:linear-gradient(145deg,#e3c58e,#b57c45); }.diagram-food-factor::before { width:168px; height:96px; border:0; border-radius:90px 90px 44px 44px; background:rgba(255,246,219,.9); box-shadow:inset 0 -13px rgba(90,139,84,.28); }.diagram-body-factor::before { width:200px; height:116px; border-radius:50% 50% 43% 43%; background:rgba(197,218,188,.23); }.diagram-support-factor { background:linear-gradient(145deg,#20574a,#0c332d); }.diagram-timeline-start::before,.diagram-timeline-mid::before,.diagram-timeline-end::before { width:235px; height:2px; border:0; border-radius:0; background:#d7cfad; }.diagram-timeline-start::after,.diagram-timeline-mid::after,.diagram-timeline-end::after { width:13px; height:13px; border:0; background:#d9bb67; box-shadow:83px 0 0 #d9bb67,166px 0 0 #d9bb67; }.diagram-timeline-mid::after { background:#b8d1a8; box-shadow:83px 0 0 #d9bb67,166px 0 0 #d9bb67; }.diagram-timeline-end::after { background:#b8d1a8; box-shadow:83px 0 0 #b8d1a8,166px 0 0 #d9bb67; }.diagram-urgent { background:linear-gradient(145deg,#75403a,#4b292e); }.diagram-urgent::before { width:128px; height:128px; border:0; background:radial-gradient(circle,#f5cc8f 0%,#cd684f 28%,rgba(205,104,79,.12) 66%); }.diagram-review::before { width:82px; height:82px; border:4px solid rgba(225,238,205,.78); }.diagram-record::before { width:102px; height:140px; border:1px solid rgba(232,240,216,.6); border-radius:9px; background:rgba(240,245,225,.08); }
.scene-copy { padding:23px 22px 5px; }.scene-copy h3 { max-width:17ch; margin:10px 0 10px; color:var(--forest); font-size:27px; font-weight:730; letter-spacing:-.055em; line-height:1.03; }.scene-copy p { margin:0; color:#556159; font-size:15px; line-height:1.5; }.scene-controls { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 22px 26px; }.scene-progress { display:flex; gap:7px; }.scene-dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#c7c9bc; }.scene-dot.active { width:24px; border-radius:99px; background:var(--forest); }.scene-next { min-height:44px; padding:0 15px; border:1px solid rgba(7,58,50,.12); border-radius:14px; background:#0a4a3e; color:#fffaf0; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em; }.scene-next .button-arrow { margin-left:7px; }.lesson-takeaway { margin:0 17px 17px; padding:19px 17px; border-radius:17px; background:linear-gradient(145deg,#dae4d3,#cddcc9); }.lesson-takeaway strong { display:block; max-width:24ch; margin-top:10px; color:#093e35; font-size:21px; font-weight:740; letter-spacing:-.05em; line-height:1.12; }.lesson-takeaway p,.lesson-safety p { margin:10px 0 0; color:#536057; font-size:13px; line-height:1.45; }.lesson-safety { margin:0 17px 17px; padding:17px; border:1px solid rgba(184,122,76,.25); border-radius:17px; background:rgba(253,242,226,.76); }.lesson-safety b { color:#9a5e38; font-family:var(--mono); font-size:9px; letter-spacing:.09em; }.lesson-sources { margin:0 17px 24px; border-top:1px solid rgba(120,133,120,.28); color:#677168; font-size:12px; line-height:1.45; }.lesson-sources summary { padding:18px 0 9px; color:var(--forest); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em; cursor:pointer; }.lesson-sources p { margin:0 0 10px; }.lesson-sources ul { margin:0; padding-left:17px; }.lesson-sources li + li { margin-top:9px; }.lesson-sources a { color:#135749; font-weight:700; }.lesson-sources span { display:block; margin-top:2px; }
/* Compact screens and motion preferences */
@media (max-height: 760px) { .hero { padding-top: 30px; } .support { margin: 14px 0 20px; } .learn-preview { min-height: 174px; margin-top: 18px; } }
@media (max-width: 374px) { .app { padding-right: 18px; padding-left: 18px; } h1 { font-size: 45px; } .line { gap: 10px; } .featured-copy { width:63%; }.featured-copy strong { font-size:29px; }.lesson-card { grid-template-columns:37% 1fr; gap:13px; }.lesson-card-copy { padding-right:13px; }.lesson-card-copy strong { font-size:19px; }.lesson-story h2 { font-size:39px; }.scene-controls { gap:11px; } }
@media (min-width: 700px) { .learn-featured { min-height:350px; }.featured-copy { width:54%; }.featured-copy strong { max-width:11ch; font-size:37px; }.featured-art { width:54%; }.lesson-feed { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.lesson-feed > .ey { grid-column:1 / -1; }.lesson-card { min-height:210px; margin-top:0; grid-template-columns:44% 1fr; }.lesson-card-copy strong { font-size:22px; }.lesson-story { max-width:570px; margin:auto; }.lesson-visual { height:340px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* GG.1.9 MY GOUT: calm, local-first personal health record */
.my-gout-screen,.health-screen { padding-bottom:calc(142px + env(safe-area-inset-bottom)); }.my-gout-top { display:flex; align-items:center; justify-content:space-between; min-height:42px; color:var(--forest); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.12em; }.my-gout-hero { position:relative; margin:24px 0 17px; padding:27px 23px 29px; overflow:hidden; border:1px solid rgba(159,179,153,.38); border-radius:27px; background:radial-gradient(circle at 90% 12%,rgba(137,177,124,.32),rgba(137,177,124,0) 42%),linear-gradient(145deg,#07453a,#092f2a); color:#fffaf0; box-shadow:0 18px 34px rgba(4,48,40,.16),inset 0 1px rgba(255,255,255,.09); }.my-gout-hero::after { position:absolute; right:-66px; bottom:-92px; width:245px; height:245px; border:1px solid rgba(239,240,216,.15); border-radius:50%; content:""; }.my-gout-hero > * { position:relative; z-index:1; }.my-gout-hero .ey { color:#cedec7; }.my-gout-hero h2 { max-width:7ch; margin:12px 0 10px; color:#fffaf0; font-size:clamp(49px,13vw,68px); font-weight:760; letter-spacing:-.08em; line-height:.88; }.my-gout-hero p { max-width:20ch; margin:0; font-size:19px; font-weight:650; letter-spacing:-.035em; line-height:1.18; }.my-gout-hero em { display:block; max-width:30ch; margin-top:13px; color:#dce7d7; font-size:13px; font-style:normal; line-height:1.45; }.local-note { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; margin:0 2px 20px; color:#68746c; font-size:11px; line-height:1.42; }.local-note b { color:#245b4b; font-family:var(--mono); font-size:8px; letter-spacing:.075em; }.record-feature { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:end; margin-top:13px; padding:20px 18px; overflow:hidden; border:1px solid rgba(167,159,132,.36); border-radius:21px; background:linear-gradient(140deg,rgba(255,251,241,.92),rgba(237,236,220,.8)); box-shadow:0 10px 22px rgba(55,52,35,.055),inset 0 1px rgba(255,255,255,.9); }.record-feature::after { position:absolute; top:-59px; right:-43px; width:135px; height:135px; border-radius:50%; background:rgba(110,146,102,.09); content:""; }.record-feature > * { position:relative; z-index:1; }.record-feature-flares { background:linear-gradient(140deg,rgba(245,240,224,.94),rgba(232,225,206,.83)); }.record-feature-flares::after { background:rgba(179,128,75,.1); }.record-feature .ey { color:#7a7059; }.record-feature strong { display:block; max-width:17ch; margin-top:8px; color:var(--forest); font-size:20px; font-weight:740; letter-spacing:-.052em; line-height:1.05; }.record-feature p { max-width:27ch; margin:8px 0 0; color:#657068; font-size:12px; line-height:1.4; }.record-feature button,.foundation-link { min-height:42px; padding:0 12px; border:1px solid rgba(8,67,55,.18); border-radius:12px; background:rgba(255,253,245,.74); color:var(--forest); font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.07em; }.record-foundations { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:15px; }.record-foundations button { min-height:112px; padding:16px; border:1px solid rgba(151,157,142,.28); border-radius:18px; background:rgba(245,244,232,.64); color:var(--forest); text-align:left; box-shadow:inset 0 1px rgba(255,255,255,.72); }.record-foundations button span { display:block; color:#617067; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.08em; }.record-foundations button b { display:block; margin-top:9px; font-size:14px; font-weight:690; letter-spacing:-.035em; line-height:1.14; }.record-heading { margin:9px 1px 22px; }.record-heading h2 { max-width:11ch; margin:10px 0 11px; color:var(--forest); font-size:clamp(39px,10.5vw,56px); font-weight:760; letter-spacing:-.075em; line-height:.91; }.record-heading p { max-width:34ch; margin:0; color:#5d6960; font-size:14px; line-height:1.48; }.health-form { padding:20px 18px; border:1px solid rgba(162,157,135,.33); border-radius:23px; background:linear-gradient(145deg,rgba(255,252,243,.92),rgba(237,237,224,.82)); box-shadow:0 14px 28px rgba(56,50,32,.05),inset 0 1px rgba(255,255,255,.9); }.health-form fieldset { min-width:0; margin:0; padding:0 0 20px; border:0; }.health-form fieldset + fieldset { padding-top:20px; border-top:1px solid rgba(134,143,129,.24); }.health-form legend { max-width:28ch; margin-bottom:11px; color:var(--forest); font-size:16px; font-weight:730; letter-spacing:-.038em; line-height:1.13; }.health-form legend span { color:#7a847c; font-size:11px; font-weight:500; }.choice,.check-choice,.link-flare-mode { display:flex; align-items:center; gap:10px; min-height:39px; color:#4f5c54; font-size:13px; line-height:1.3; }.choice input,.check-choice input,.link-flare-mode input { width:18px; height:18px; margin:0; accent-color:var(--forest); }.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; }.health-field { display:block; margin-top:13px; color:#607067; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.075em; }.health-field input,.health-field select,.health-field textarea,.health-form select { box-sizing:border-box; width:100%; min-height:46px; margin-top:7px; padding:10px 12px; border:1px solid rgba(142,151,137,.34); border-radius:12px; outline:none; background:rgba(255,255,251,.69); color:var(--ink); font-family:var(--sans); font-size:14px; letter-spacing:0; }.health-field textarea { min-height:80px; resize:vertical; line-height:1.4; }.health-form select { margin-top:0; }.urate-entry { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.urate-entry .health-field:last-child { grid-column:1 / -1; }.form-note { margin:10px 0 0; color:#737d74; font-size:11px; line-height:1.42; }.health-submit,.health-add { margin-top:2px; }.flare-list { display:grid; gap:11px; margin-top:15px; }.empty-record { padding:23px 18px; border:1px dashed rgba(123,139,119,.45); border-radius:18px; color:#657168; text-align:center; }.empty-record strong { display:block; color:var(--forest); font-size:18px; letter-spacing:-.04em; }.empty-record p { margin:7px auto 0; max-width:27ch; font-size:12px; line-height:1.4; }.flare-record { display:grid; width:100%; gap:6px; padding:18px; border:1px solid rgba(156,156,138,.31); border-radius:18px; background:rgba(255,251,241,.72); color:var(--forest); text-align:left; box-shadow:inset 0 1px rgba(255,255,255,.85); }.flare-record-date,.flare-record em { color:#747e75; font-family:var(--mono); font-size:8px; font-style:normal; font-weight:700; letter-spacing:.07em; }.flare-record strong { font-size:18px; letter-spacing:-.045em; }.pain-row { display:grid; grid-template-columns:minmax(0,1fr) 31px auto; gap:9px; align-items:center; color:#667167; font-size:11px; }.pain-row input { accent-color:var(--forest); }.pain-row output { display:grid; width:29px; height:29px; place-items:center; border-radius:50%; background:#e0e8da; color:var(--forest); font-family:var(--mono); font-size:10px; font-weight:700; }.warning-choice { margin-top:13px; padding:13px; border:1px solid rgba(178,116,74,.22); border-radius:13px; background:rgba(253,244,228,.64); }.warning-choice b { display:block; margin-bottom:8px; color:#93613e; font-family:var(--mono); font-size:8px; letter-spacing:.08em; }.flare-safety { margin:13px 0 0; padding:13px; border:1px solid rgba(175,91,67,.26); border-radius:13px; background:rgba(253,241,234,.78); color:#7d493d; font-size:12px; line-height:1.43; }.optional-details { margin:0 0 20px; border-top:1px solid rgba(134,143,129,.24); border-bottom:1px solid rgba(134,143,129,.24); }.optional-details summary { padding:17px 0; color:var(--forest); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em; cursor:pointer; }.optional-details[open] { padding-bottom:17px; }.end-details { margin-top:13px; }.delete-record { width:100%; min-height:44px; margin-top:12px; border:0; background:none; color:#994d42; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em; }.delete-confirm { margin-top:12px; padding:15px; border:1px solid rgba(166,70,59,.28); border-radius:14px; background:#fff1ea; color:#74463d; }.delete-confirm b { font-size:14px; }.delete-confirm p { margin:6px 0 12px; font-size:12px; }.delete-confirm button { min-height:38px; margin-right:7px; padding:0 11px; border:1px solid rgba(151,71,60,.28); border-radius:10px; background:#fffaf4; color:#874036; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.06em; }.foundation-panel { min-height:360px; padding:28px 23px; border:1px solid rgba(132,157,130,.34); border-radius:27px; background:radial-gradient(circle at 88% 13%,rgba(138,174,122,.25),rgba(138,174,122,0) 35%),linear-gradient(145deg,#f6f3e6,#e7e8db); }.foundation-panel h2 { max-width:11ch; margin:11px 0 15px; color:var(--forest); font-size:clamp(38px,10vw,54px); font-weight:750; letter-spacing:-.072em; line-height:.91; }.foundation-panel p { max-width:32ch; color:#5c675f; font-size:15px; line-height:1.5; }.foundation-panel small { display:block; max-width:28ch; margin-top:27px; color:#747e76; font-size:11px; line-height:1.42; }.foundation-link { margin-top:8px; }
@media (min-width:700px) { .my-gout-screen,.health-screen { max-width:660px; margin:auto; }.record-feature { padding:24px; }.health-form { padding:25px; }.my-gout-hero { padding:34px 31px; }.record-foundations { grid-template-columns:repeat(4,1fr); } }
.current-picture { margin:0 0 15px; padding:18px; border:1px solid rgba(91,124,101,.27); border-radius:21px; background:linear-gradient(145deg,rgba(237,242,226,.86),rgba(252,248,237,.84)); box-shadow:inset 0 1px rgba(255,255,255,.86); }.current-picture > p { margin:7px 0 14px; color:#657269; font-size:11px; line-height:1.42; }.current-picture-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.current-picture-grid button { min-height:92px; padding:12px; border:1px solid rgba(111,134,111,.22); border-radius:14px; background:rgba(255,253,246,.67); color:var(--forest); text-align:left; }.current-picture-grid span,.personal-history-item > span,.personal-record-section > div > span { display:block; color:#637669; font-family:var(--mono); font-size:7px; font-weight:700; letter-spacing:.075em; }.current-picture-grid b { display:block; margin-top:7px; font-size:15px; letter-spacing:-.045em; line-height:1.08; }.current-picture-grid small { display:block; margin-top:6px; color:#748078; font-size:9px; font-weight:500; line-height:1.3; }.personal-history-list,.personal-record-section { display:grid; gap:10px; margin-top:14px; }.personal-history-item { display:grid; gap:6px; padding:17px; border:1px solid rgba(139,148,128,.28); border-radius:17px; background:rgba(255,251,241,.72); }.personal-history-item strong { color:var(--forest); font-size:18px; letter-spacing:-.045em; }.personal-history-item p,.personal-history-item small { margin:0; color:#657168; font-size:12px; line-height:1.4; }.personal-history-item small { color:#798178; font-size:10px; }.personal-history-action { width:100%; color:var(--forest); text-align:left; cursor:pointer; }.personal-history-action i { justify-self:start; margin-top:2px; color:#2e6652; font-family:var(--mono); font-size:8px; font-style:normal; font-weight:700; letter-spacing:.08em; }.personal-history-action:active { transform:scale(.99); }.record-detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }.record-detail-actions .delete-record { width:auto; margin:0; border:1px solid rgba(151,71,60,.22); border-radius:13px; background:rgba(255,246,239,.78); }.delete-confirm > div { display:flex; flex-wrap:wrap; gap:8px; }.delete-confirm > div button { margin-right:0; }.personal-record-section { padding:18px; border:1px solid rgba(142,153,130,.27); border-radius:19px; background:rgba(250,248,238,.57); }.personal-record-section > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }.personal-record-section > div button { min-height:33px; padding:0 9px; border:1px solid rgba(44,91,72,.2); border-radius:9px; background:#fffdf7; color:var(--forest); font:700 7px var(--mono); letter-spacing:.07em; }.reports-placeholder { opacity:.72; }

/* GG.1.9A baseline disclosure and personal-record flow */
.baseline-heading { margin-bottom:27px; }.baseline-form { padding:0; overflow:hidden; background:linear-gradient(145deg,rgba(255,252,243,.93),rgba(237,237,224,.78)); }.baseline-section { position:relative; padding:23px 18px 25px; }.baseline-section + .baseline-section { border-top:1px solid rgba(125,141,123,.2); }.baseline-section::before { position:absolute; top:0; left:18px; width:27px; height:1px; background:#a6b498; content:""; }.baseline-section:first-child::before { display:none; }.baseline-section header { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:start; margin-bottom:19px; }.baseline-section header > span { display:grid; width:27px; height:27px; place-items:center; border-radius:50%; background:rgba(31,91,74,.09); color:#356554; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.04em; }.baseline-section header b { display:block; color:#426455; font-family:var(--mono); font-size:9px; letter-spacing:.11em; }.baseline-section header p { margin:5px 0 0; color:#778177; font-size:12px; line-height:1.35; }.baseline-section fieldset { padding:0; border:0; }.baseline-section fieldset + fieldset { margin-top:20px; padding-top:20px; border-top:1px solid rgba(134,143,129,.18); }.baseline-section legend { margin-bottom:10px; }.baseline-section .choice { padding:4px 0; }.baseline-section .choice-grid { padding-top:2px; }.baseline-section .health-field { margin-top:15px; }.baseline-section .health-field input,.baseline-section .health-field select { background:rgba(255,255,252,.84); }.baseline-conditional.hide { display:none !important; }.baseline-urate { background:linear-gradient(145deg,rgba(240,242,229,.69),rgba(250,247,236,.48)); }.urate-message { margin-top:15px; padding:15px; border:1px solid rgba(128,150,121,.22); border-radius:14px; background:rgba(255,252,244,.72); }.urate-message b { color:#406350; font-family:var(--mono); font-size:8px; letter-spacing:.09em; }.urate-message p { max-width:31ch; margin:7px 0 0; color:#68746c; font-size:12px; line-height:1.43; }.learn-inline { min-height:40px; margin-top:15px; padding:0; border:0; background:none; color:#155a49; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.07em; text-align:left; }.learn-inline::after { display:inline-block; width:7px; height:7px; margin:0 0 1px 8px; border-top:1px solid currentColor; border-right:1px solid currentColor; content:""; transform:rotate(45deg); }.baseline-form .health-submit { width:calc(100% - 36px); margin:4px 18px calc(24px + env(safe-area-inset-bottom)); }.health-screen:has(.baseline-form) { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }

/* GG.2.0 SHOW IT: photo capture and user confirmation */
.input-tools { display:flex; align-items:center; gap:1px; flex:0 0 auto; }.camera { position:relative; flex:0 0 44px; width:44px; height:44px; margin:0 0 3px; padding:0; border:0; background:transparent; color:var(--forest); }.camera:focus-visible { outline:2px solid rgba(18,67,55,.52); outline-offset:2px; border-radius:50%; background:rgba(18,67,55,.06); }.camera:active { transform:scale(.94); }.camera-icon { position:relative; display:inline-block; width:18px; height:13px; border:1.8px solid currentColor; border-radius:3px; vertical-align:middle; }.camera-icon::before { position:absolute; top:-5px; left:5px; width:7px; height:4px; border-radius:2px 2px 0 0; background:currentColor; content:""; }.camera-icon::after { position:absolute; top:3px; left:5px; width:5px; height:5px; border:1.6px solid currentColor; border-radius:50%; content:""; }.camera-file { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; }.field { position:relative; }.camera-options { position:absolute; z-index:8; right:13px; bottom:calc(100% + 9px); display:grid; width:min(248px,calc(100vw - 58px)); gap:7px; padding:15px; border:1px solid rgba(127,146,122,.38); border-radius:17px; background:rgba(252,249,239,.98); box-shadow:0 15px 30px rgba(25,41,30,.16); }.camera-options b { color:#315f4f; font-family:var(--mono); font-size:9px; letter-spacing:.1em; }.camera-options span { margin-bottom:4px; color:#68746c; font-size:11px; line-height:1.35; }.camera-options button { min-height:42px; padding:0 12px; border:1px solid rgba(54,91,70,.18); border-radius:11px; background:#f4f3e8; color:var(--forest); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.06em; text-align:left; }.camera-options .camera-cancel { min-height:32px; border:0; background:transparent; color:#778178; text-align:center; }.visual-review-screen { padding-bottom:calc(140px + env(safe-area-inset-bottom)); }.visual-review-head { margin:8px 2px 20px; }.visual-review-head h2 { max-width:10ch; margin:10px 0 10px; color:var(--forest); font-size:clamp(40px,11vw,57px); font-weight:760; letter-spacing:-.075em; line-height:.91; }.visual-review-head p { max-width:34ch; margin:0; color:#5f6c62; font-size:14px; line-height:1.48; }.visual-photo { margin:0; overflow:hidden; border:1px solid rgba(130,146,124,.35); border-radius:24px; background:#d9ded2; box-shadow:0 13px 26px rgba(37,47,34,.09); }.visual-photo img { display:block; width:100%; max-height:45dvh; object-fit:cover; }.visual-photo figcaption { padding:10px 13px; background:rgba(249,247,237,.94); color:#6d776e; font-size:10px; line-height:1.35; }.visual-confirmation { margin-top:16px; padding:19px 17px; border:1px solid rgba(157,160,141,.3); border-radius:20px; background:linear-gradient(145deg,rgba(255,252,243,.93),rgba(235,238,223,.82)); }.visual-component { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:47px; padding:0 0 0 12px; border-bottom:1px solid rgba(142,151,137,.2); color:var(--forest); font-size:16px; font-weight:700; letter-spacing:-.035em; }.visual-component button { min-height:36px; border:0; background:none; color:#8a6953; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.07em; }.visual-empty { margin-top:12px; padding:15px; border:1px dashed rgba(120,139,119,.42); border-radius:13px; color:#657269; }.visual-empty strong { color:var(--forest); font-size:14px; letter-spacing:-.03em; }.visual-empty p { margin:6px 0 0; font-size:12px; line-height:1.4; }.visual-add { display:block; margin-top:15px; color:#577067; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.075em; }.visual-add > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:7px; }.visual-add input { min-width:0; min-height:47px; padding:0 12px; border:1px solid rgba(139,150,134,.36); border-radius:12px; outline:none; background:rgba(255,255,253,.75); color:var(--ink); font-family:var(--sans); font-size:15px; }.visual-add input:focus { border-color:rgba(28,75,59,.55); box-shadow:0 0 0 3px rgba(28,75,59,.08); }.visual-add button { min-height:47px; padding:0 13px; border:1px solid rgba(31,81,64,.19); border-radius:12px; background:#e7ebdc; color:var(--forest); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.07em; }.visual-limit { margin:13px 0 0; color:#717b72; font-size:11px; line-height:1.42; }.visual-check { margin-top:16px; }.visual-secondary { display:block; width:100%; min-height:42px; margin-top:7px; border:0; background:none; color:#4d6a5a; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.075em; }

/* GG.2.0A: a single quiet, messaging-like input control language. */
.input-tools { gap:0; margin-right:-2px; }
.input-tools > .camera, .input-tools > .mic { flex:0 0 42px; width:42px; height:44px; margin:0 0 3px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--forest); }
.camera { transition:transform 130ms ease, background 150ms ease, color 150ms ease; }
.camera:focus-visible, .mic:focus-visible { outline:2px solid rgba(18,67,55,.52); outline-offset:-2px; border-radius:11px; background:rgba(18,67,55,.06); }
.camera:active { transform:scale(.93); }
.camera-icon { width:19px; height:14px; border-width:1.8px; border-radius:3px; }
.camera-icon::before { top:-5px; left:5px; width:8px; height:4px; }
.camera-icon::after { top:3px; left:6px; width:5px; height:5px; border-width:1.6px; }

/* GG.2.1 photo-recognition confirmation. */
.visual-component { align-items:flex-start; min-height:54px; padding:12px 0 11px 12px; }
.visual-component > div { min-width:0; }
.visual-component strong,.visual-component small { display:block; }
.visual-component strong { font-size:16px; font-weight:700; letter-spacing:-.035em; }
.visual-component small { margin-top:3px; color:#6d796f; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.06em; }
.visual-component > button { flex:0 0 auto; }
.visual-clarification { margin-top:10px; padding:10px; border-radius:11px; background:rgba(218,226,205,.58); }
.visual-clarification b { display:block; color:#4c6559; font-family:var(--mono); font-size:8px; letter-spacing:.05em; line-height:1.4; }
.visual-clarification-options { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.visual-clarification-options button { min-height:34px; padding:0 9px; border:1px solid rgba(43,82,65,.18); border-radius:17px; background:#fbf8ee; color:var(--forest); font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.045em; }
.visual-retry { min-height:38px; margin-top:11px; padding:0 11px; border:1px solid rgba(31,81,64,.2); border-radius:10px; background:#edf0e3; color:var(--forest); font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.07em; }

/* GG.2.2 DAILY GUARD: a factual, local-only personal briefing. */
.daily-guard { position:relative; margin:20px 0 17px; padding:19px 18px 17px; overflow:hidden; border:1px solid rgba(105,128,103,.28); border-radius:21px; background:linear-gradient(135deg,rgba(235,239,222,.88),rgba(250,247,235,.82)); box-shadow:inset 0 1px rgba(255,255,255,.82),0 10px 20px rgba(50,64,42,.045); color:var(--forest); }.daily-guard::after { position:absolute; right:-41px; bottom:-53px; width:130px; height:130px; border:1px solid rgba(87,123,94,.14); border-radius:50%; content:""; }.daily-guard > * { position:relative; z-index:1; }.daily-guard-head,.daily-guard-status,.daily-guard-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }.daily-guard-head { color:#587162; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.095em; }.daily-guard-head b { color:#315e4e; font-size:8px; }.daily-guard-status { margin-top:13px; padding-top:12px; border-top:1px solid rgba(107,128,105,.2); }.daily-guard-status strong { color:var(--forest); font-size:17px; font-weight:740; letter-spacing:-.045em; }.daily-guard-status span { max-width:15ch; color:#68776b; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.045em; line-height:1.35; text-align:right; }.daily-guard-copy { margin-top:15px; }.daily-guard-copy b { display:block; color:var(--forest); font-size:16px; font-weight:740; letter-spacing:-.045em; }.daily-guard-copy p { max-width:37ch; margin:6px 0 0; color:#667268; font-size:12px; line-height:1.43; }.daily-guard-actions { justify-content:flex-start; flex-wrap:wrap; margin-top:15px; }.daily-guard-actions button,.daily-seven-link { min-height:37px; padding:0; border:0; background:none; color:#235848; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.072em; text-align:left; }.daily-guard-actions button::after,.daily-seven-link::after { display:inline-block; width:6px; height:6px; margin:0 0 1px 8px; border-top:1px solid currentColor; border-right:1px solid currentColor; content:""; transform:rotate(45deg); }.daily-guard-link { color:#805c3f !important; }.daily-recorded-heading h2,.pattern-heading h2 { max-width:12ch; }.daily-timeline { margin-top:10px; }.daily-timeline ol { position:relative; display:grid; gap:0; margin:0; padding:0; list-style:none; }.daily-timeline ol::before { position:absolute; top:13px; bottom:13px; left:47px; width:1px; background:rgba(73,111,91,.22); content:""; }.daily-timeline li { position:relative; display:grid; grid-template-columns:47px minmax(0,1fr); gap:17px; min-height:62px; padding:0 0 15px; }.daily-timeline time { position:relative; z-index:1; color:#567064; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.04em; }.daily-timeline time::after { position:absolute; top:1px; right:-22px; width:9px; height:9px; border:2px solid #f5f3e7; border-radius:50%; background:#407158; box-shadow:0 0 0 1px rgba(57,104,82,.24); content:""; }.daily-timeline strong { padding-bottom:2px; color:var(--forest); font-size:17px; font-weight:700; letter-spacing:-.045em; line-height:1.17; }.daily-seven-link { margin-top:22px; }.daily-seven { display:grid; gap:9px; margin-top:18px; }.daily-seven > div,.daily-seven-category,.daily-active-note,.pattern-foundation { padding:17px; border:1px solid rgba(134,146,125,.25); border-radius:17px; background:rgba(249,247,237,.72); box-shadow:inset 0 1px rgba(255,255,255,.8); }.daily-seven > div { display:flex; align-items:baseline; justify-content:space-between; }.daily-seven span,.daily-seven-category span,.pattern-foundation > b { color:#65766a; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.08em; }.daily-seven b { color:var(--forest); font-size:28px; letter-spacing:-.075em; }.daily-active-note { margin:10px 0 0; color:#647067; font-size:12px; line-height:1.4; }.daily-seven-category { margin-top:10px; }.daily-seven-category b { display:block; margin-top:8px; color:var(--forest); font-size:19px; letter-spacing:-.045em; }.daily-seven-category p { margin:6px 0 0; color:#6b766d; font-size:12px; line-height:1.42; }.record-feature-pattern { background:linear-gradient(140deg,rgba(235,240,226,.9),rgba(243,239,225,.82)); }.record-feature-pattern::after { background:rgba(85,128,99,.12); }.pattern-foundation { margin-top:18px; }.pattern-foundation ul { display:grid; gap:10px; margin:15px 0 18px; padding:0; list-style:none; }.pattern-foundation li { position:relative; padding-left:16px; color:#55645b; font-size:14px; line-height:1.35; }.pattern-foundation li::before { position:absolute; top:.48em; left:0; width:7px; height:7px; border-radius:50%; background:#6e9574; content:""; }.pattern-foundation p { margin:0; padding-top:14px; border-top:1px solid rgba(128,143,123,.23); color:#796f60; font-size:12px; line-height:1.4; }
@media (min-width:700px) { .daily-guard { padding:23px; }.daily-seven { grid-template-columns:repeat(3,1fr); }.daily-seven > div { display:grid; gap:8px; }.daily-seven-category { max-width:330px; } }

/* GG.2.3 RESULTS: restrained longitudinal urate record, local to the device. */
.results-heading { margin-bottom:18px; }.results-heading h2 { max-width:9ch; }.urate-latest,.urate-empty,.urate-trend,.baseline-urate-offer,.urate-history { position:relative; overflow:hidden; border:1px solid rgba(117,143,113,.28); border-radius:21px; background:linear-gradient(145deg,rgba(244,247,235,.93),rgba(232,237,221,.78)); box-shadow:inset 0 1px rgba(255,255,255,.86),0 10px 22px rgba(44,67,47,.05); }.urate-latest { display:flex; align-items:end; justify-content:space-between; gap:14px; padding:20px 18px; }.urate-latest::after { position:absolute; top:-68px; right:-42px; width:150px; height:150px; border:1px solid rgba(71,121,89,.15); border-radius:50%; content:""; }.urate-latest > * { position:relative; z-index:1; }.urate-latest span,.baseline-urate-offer b { display:block; color:#587262; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.08em; }.urate-latest strong { display:block; margin-top:9px; color:var(--forest); font-size:31px; font-weight:760; letter-spacing:-.075em; line-height:.95; }.urate-latest p { margin:8px 0 0; color:#67756b; font-size:12px; line-height:1.35; }.urate-latest button,.baseline-urate-offer button,.urate-history-head button { flex:0 0 auto; min-height:40px; padding:0 11px; border:1px solid rgba(32,83,63,.19); border-radius:11px; background:rgba(255,253,245,.74); color:var(--forest); font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.07em; }.urate-empty { padding:22px 18px; text-align:left; }.urate-empty strong { display:block; color:var(--forest); font-size:20px; letter-spacing:-.05em; }.urate-empty p { max-width:32ch; margin:8px 0 0; color:#66736a; font-size:13px; line-height:1.45; }.urate-trend { margin-top:13px; padding:20px 18px 18px; background:linear-gradient(145deg,rgba(244,246,235,.92),rgba(228,235,220,.82)); }.urate-trend > .ey { color:#537362; }.urate-trend > p { max-width:32ch; margin:10px 0 0; color:#455d51; font-size:15px; font-weight:630; letter-spacing:-.035em; line-height:1.25; }.urate-trend svg { display:block; width:100%; height:auto; margin-top:14px; overflow:visible; }.urate-grid { fill:none; stroke:rgba(82,116,95,.16); stroke-width:1; }.urate-line { fill:none; stroke:#23684f; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }.urate-trend circle { fill:#f6f3e6; stroke:#23684f; stroke-width:2.2; }.urate-trend-markers { display:grid; grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); gap:8px; margin-top:3px; }.urate-trend-markers span { position:relative; display:block; min-width:0; padding-top:8px; color:#65736a; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.025em; line-height:1.35; }.urate-trend-markers i { display:inline-block; width:6px; height:6px; margin:0 6px 1px 0; border-radius:50%; background:#23684f; }.urate-trend-markers b { display:block; overflow:hidden; margin-top:3px; color:var(--forest); font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; }.urate-trend small { display:block; margin-top:14px; padding-top:12px; border-top:1px solid rgba(93,126,104,.2); color:#738076; font-size:10px; line-height:1.38; }.baseline-urate-offer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; margin-top:13px; padding:17px; background:linear-gradient(140deg,rgba(249,244,229,.93),rgba(242,235,216,.76)); }.baseline-urate-offer p { margin:7px 0 0; color:#475f52; font-size:16px; font-weight:700; letter-spacing:-.04em; }.baseline-urate-offer button { max-width:138px; min-height:46px; color:#6e573d; font-size:7px; line-height:1.3; }.urate-history { margin-top:13px; padding:19px 17px 8px; background:rgba(250,248,239,.69); }.urate-history-head { display:flex; align-items:end; justify-content:space-between; gap:13px; padding-bottom:14px; border-bottom:1px solid rgba(126,143,123,.2); }.urate-history-head p { margin:6px 0 0; color:#758077; font-size:11px; }.urate-history-head button { color:#285d4b; }.urate-history-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; width:100%; min-height:72px; padding:14px 2px; border:0; border-bottom:1px solid rgba(126,143,123,.17); background:none; color:var(--forest); text-align:left; }.urate-history-item:last-child { border-bottom:0; }.urate-history-item span,.urate-history-item em { color:#6e7a71; font-family:var(--mono); font-size:8px; font-style:normal; font-weight:700; letter-spacing:.055em; }.urate-history-item strong { grid-row:1 / span 2; grid-column:2; align-self:center; color:var(--forest); font-size:20px; font-weight:740; letter-spacing:-.06em; text-align:right; }.urate-history-item em { grid-column:1; }.urate-history-empty { margin:15px 0 11px; color:#6c786f; font-size:12px; line-height:1.43; }.results-learn { margin-top:13px; }.results-clinical-note { max-width:35ch; margin:14px 2px 0; color:#737d73; font-size:11px; line-height:1.43; }.urate-editor-heading h2 { max-width:10ch; }.urate-form { margin-top:0; }.baseline-latest-result { display:block; min-height:30px; margin:8px 0 1px; padding:0; border:0; background:none; color:#2c654f; font-family:var(--mono); font-size:7px; font-weight:700; letter-spacing:.07em; text-align:left; }.baseline-latest-result::after { display:inline-block; width:6px; height:6px; margin:0 0 1px 7px; border-top:1px solid currentColor; border-right:1px solid currentColor; content:""; transform:rotate(45deg); }.health-screen:has(.urate-form),.health-screen:has(.urate-history) { padding-bottom:calc(136px + env(safe-area-inset-bottom)); }
@media (min-width:700px) { .urate-latest,.urate-trend,.baseline-urate-offer,.urate-history { padding:24px; }.urate-trend-markers { grid-template-columns:repeat(3,1fr); } }
.urate-entry-check { margin:15px 0 12px; padding:15px 14px; border:1px solid rgba(151,111,58,.31); border-radius:15px; background:linear-gradient(145deg,rgba(255,247,228,.92),rgba(247,235,207,.83)); color:#5e4d36; box-shadow:inset 0 1px rgba(255,255,255,.76); }.urate-entry-check b { display:block; color:#765226; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em; }.urate-entry-check p { max-width:37ch; margin:8px 0 13px; font-size:12px; line-height:1.43; }.urate-entry-check div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.urate-entry-check button { min-height:43px; padding:8px; border:1px solid rgba(113,82,42,.21); border-radius:10px; background:rgba(255,253,246,.82); color:#624824; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.055em; }.urate-entry-check button:last-child { border-color:rgba(29,81,62,.3); background:#0c4f40; color:#fffdf4; }

/* GG.2.4: confirmed consumption stays separate from CHECK history. */
.daily-type-summary { margin:7px 0 0; color:#637468; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.055em; }.daily-timeline li { align-items:start; }.consumption-timeline-item { display:block; min-width:0; padding:0 0 3px; border:0; background:none; color:var(--forest); text-align:left; }.consumption-timeline-item strong { display:block; }.consumption-timeline-item span { display:block; margin-top:5px; color:#68776d; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.065em; line-height:1.35; }.consumption-timeline-item:focus-visible { outline:2px solid rgba(18,67,55,.48); outline-offset:4px; border-radius:5px; }.consumption-type-confirmation { position:fixed; inset:0; z-index:12; display:grid; align-items:end; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); background:rgba(9,38,31,.3); }.consumption-type-card { width:min(100%,520px); margin:auto; padding:22px 20px 18px; border:1px solid rgba(219,229,209,.38); border-radius:23px; background:linear-gradient(145deg,#f8f5e9,#e9eddf); box-shadow:0 22px 55px rgba(3,38,30,.27),inset 0 1px rgba(255,255,255,.82); }.consumption-type-card h2 { max-width:11ch; margin:9px 0 10px; color:var(--forest); font-size:31px; }.consumption-type-card > p { margin:0 0 17px; color:#637168; font-size:14px; line-height:1.4; }.consumption-type-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.consumption-type-options button { min-height:46px; padding:8px 5px; border:1px solid rgba(49,92,73,.2); border-radius:11px; background:rgba(255,253,245,.78); color:#325d4d; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.055em; }.consumption-type-options button.active { border-color:#1e604b; background:#0c4f40; color:#fffdf3; }.consumption-cancel { display:block; min-height:36px; margin:13px auto 0; padding:0; border:0; background:none; color:#6c776e; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.075em; }.consumption-editor-heading h2 { max-width:11ch; }.consumption-editor-card { margin-top:16px; padding:19px 17px; border:1px solid rgba(115,143,111,.27); border-radius:20px; background:linear-gradient(145deg,rgba(245,248,237,.94),rgba(232,238,222,.8)); box-shadow:inset 0 1px rgba(255,255,255,.84),0 10px 21px rgba(42,65,46,.05); }.consumption-editor-card > span { display:block; color:#617568; font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.085em; }.consumption-editor-card > p { margin:16px 0; color:#68746b; font-size:12px; line-height:1.45; }.consumption-editor-card > p b { color:#385748; }.consumption-editor-card .health-submit { width:100%; margin-top:0; }.consumption-editor-card .delete-record { width:100%; margin-top:9px; }.health-screen:has(.consumption-editor-card) { padding-bottom:calc(136px + env(safe-area-inset-bottom)); }
.label-check-link { display:block; width:max-content; margin:10px auto -4px; padding:6px 2px; border:0; border-bottom:1px solid rgba(12,79,64,.28); background:transparent; color:#315d4c; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em; }

/* GG.2.9C: one mobile-first CHECK selector. Food remains the ready everyday action. */
.check-choice-label { margin:0 4px 8px; color:#627366; font:700 8px var(--mono); letter-spacing:.12em; }.check-choice { margin:0 0 14px; padding:7px; border:1px solid rgba(135,147,125,.25); border-radius:21px; background:linear-gradient(145deg,rgba(255,253,246,.84),rgba(239,239,224,.67)); box-shadow:inset 0 1px rgba(255,255,255,.86),0 8px 18px rgba(48,59,39,.045); }.check-choice-options { display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:7px; }.check-choice-food,.check-choice-medicine { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; min-height:78px; gap:10px; padding:12px 11px; border-radius:16px; color:var(--forest); text-align:left; }.check-choice-food { border:1px solid rgba(41,98,73,.24); background:radial-gradient(circle at 92% 10%,rgba(255,255,255,.57),transparent 36%),linear-gradient(135deg,rgba(209,226,201,.95),rgba(240,244,231,.94)); box-shadow:inset 0 1px rgba(255,255,255,.82); }.check-choice-food::after { align-self:start; width:7px; height:7px; margin:2px 2px 0 0; border-radius:50%; background:#0c5a49; box-shadow:0 0 0 3px rgba(255,255,255,.38); content:""; }.check-choice-medicine { width:100%; border:1px solid rgba(122,110,82,.21); background:rgba(255,252,244,.72); transition:transform 140ms ease,background 140ms ease,box-shadow 140ms ease,border-color 140ms ease; }.check-choice-medicine:active { transform:scale(.975); border-color:rgba(47,96,75,.34); background:#fffdf7; box-shadow:inset 0 1px rgba(47,96,75,.12); }.check-choice-options b { display:block; color:#315e4b; font:700 8px var(--mono); letter-spacing:.08em; }.check-choice-options em { display:block; margin-top:5px; color:#173f33; font-size:clamp(13px,3.7vw,17px); font-style:normal; font-weight:720; letter-spacing:-.045em; line-height:1.04; }.check-choice-medicine em { max-width:7ch; }.check-choice-mark { position:relative; display:grid; width:34px; height:34px; place-items:center; border:1.5px solid currentColor; border-radius:50%; color:#315e4b; }.food-utensils-icon { width:22px; height:22px; overflow:visible; }.food-utensils-icon path { fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }.check-choice-medicine-mark { width:30px; height:15px; border-radius:999px; transform:rotate(-42deg); }.check-choice-medicine-mark::after { position:absolute; top:-1.5px; bottom:-1.5px; left:13px; width:1.5px; border-radius:2px; background:currentColor; content:""; }.check-choice-medicine i { position:relative; width:7px; height:7px; margin-right:1px; border-top:1.2px solid #466856; border-right:1.2px solid #466856; transform:rotate(45deg); }
@media (max-width:374px) { .check-choice { padding:6px; }.check-choice-options { gap:5px; }.check-choice-food,.check-choice-medicine { grid-template-columns:30px minmax(0,1fr) auto; min-height:72px; gap:7px; padding:10px 8px; }.check-choice-mark { width:30px; height:30px; }.food-utensils-icon { width:20px; height:20px; }.check-choice-medicine-mark { width:27px; height:13px; }.check-choice-options em { font-size:12px; }.check-choice-medicine i { display:none; }.mic { flex-basis:45px; width:45px; height:45px; } }
@media (prefers-reduced-motion:reduce) { .check-choice-medicine { transition:none; }.check-choice-medicine:active { transform:none; } }
.decision-unknown .result-hero { background:linear-gradient(148deg,#f4f0df,#e4e8da); }
.decision.unknown { max-width:9ch; color:#4c6054; font-size:34px; line-height:.96; }
.clarification { margin-top:16px; padding:20px 19px; border:1px solid rgba(73,101,83,.22); border-radius:20px; background:linear-gradient(140deg,rgba(249,247,238,.98),rgba(232,237,224,.96)); box-shadow:0 11px 25px rgba(31,60,43,.07); }
.clarification strong { display:block; margin:8px 0 7px; color:#104d3e; font-size:24px; line-height:1.04; }
.clarification p { margin:0 0 16px; color:#68746b; font-size:14px; line-height:1.5; }
.clarification-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.clarification-options button,.clarification-label-link { min-height:43px; padding:8px; border:1px solid rgba(24,83,65,.22); border-radius:12px; background:#fffcf2; color:#164b3d; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.055em; }
.clarification-label-link { display:block; width:100%; margin-top:8px; }
.uncertain-consumption { margin-top:16px; padding-top:14px; border-top:1px solid rgba(24,83,65,.16); }.uncertain-consumption b { display:block; color:#4d6659; font-family:var(--mono); font-size:8px; letter-spacing:.08em; }.uncertain-consumption p { margin:7px 0 11px; font-size:12px; }.uncertain-consumption button { width:100%; min-height:44px; border:1px solid rgba(24,83,65,.28); border-radius:12px; background:#155a49; color:#fffaf0; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.07em; }.record-detail-actions > button { min-height:48px; margin:0; padding:0 12px; border-radius:13px; }.record-detail-actions .go { display:flex; align-items:center; justify-content:center; }.record-detail-actions .delete-record { display:flex; align-items:center; justify-content:center; }
.label-check-screen { padding-bottom:calc(124px + env(safe-area-inset-bottom)); }
.label-heading h2 { max-width:12ch; }
.label-form { margin-top:18px; }
.label-form > label,.label-section label { display:grid; gap:7px; margin-bottom:14px; color:#315d4c; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.07em; }
.label-form input,.label-form select,.label-form textarea { box-sizing:border-box; width:100%; min-height:46px; padding:11px 12px; border:1px solid rgba(84,111,91,.25); border-radius:12px; background:#fffdf5; color:#183f35; font:500 16px var(--sans); letter-spacing:0; }
.label-form textarea { min-height:100px; resize:vertical; }
.label-section { margin:19px 0; padding:17px; border:1px solid rgba(88,114,92,.2); border-radius:18px; background:rgba(249,248,240,.73); }
.label-section > div { display:flex; align-items:center; justify-content:space-between; gap:14px; color:#315d4c; font-family:var(--mono); font-size:9px; letter-spacing:.075em; }
.label-section > div span { color:#718077; font:700 8px var(--mono); letter-spacing:.08em; white-space:nowrap; }
.label-section > p { margin:10px 0 15px; color:#748077; font-size:12px; line-height:1.45; }
.label-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.label-readback { margin-top:18px; padding:23px 19px; border:1px solid rgba(96,120,96,.22); border-radius:22px; background:linear-gradient(145deg,#f8f6ec,#e7ecdf); box-shadow:0 15px 32px rgba(31,60,43,.08); }
.label-readback h2 { margin:8px 0 18px; color:#0e4e3e; font-size:30px; line-height:1; }
.label-readback p { margin:10px 0; color:#56675c; font-size:14px; line-height:1.47; }
.label-readback-actions { display:grid; grid-template-columns:1fr 1.35fr; gap:9px; margin-top:20px; }
.label-readback-actions .secondary { min-height:49px; border:1px solid rgba(24,83,65,.22); border-radius:14px; background:#fffdf5; color:#164b3d; font:700 9px var(--mono); letter-spacing:.07em; }
.label-readback-actions .go { min-height:49px; margin:0; font-size:10px; }

/* GG.2.12: quiet local observations, never a health score or prediction. */
.pattern-window{display:flex;gap:7px;margin:18px 0 11px;overflow-x:auto;padding:1px 1px 3px;scrollbar-width:none}.pattern-window button{flex:0 0 auto;min-height:35px;padding:0 12px;border:1px solid rgba(52,94,75,.2);border-radius:10px;background:rgba(255,253,245,.68);color:#587066;font:700 8px var(--mono);letter-spacing:.065em}.pattern-window button.active{border-color:#155a49;background:#155a49;color:#fffdf4}.pattern-coverage,.pattern-section{margin-top:13px;padding:17px;border:1px solid rgba(108,133,104,.23);border-radius:18px;background:linear-gradient(145deg,rgba(248,248,238,.9),rgba(230,237,220,.76));box-shadow:inset 0 1px rgba(255,255,255,.8)}.pattern-coverage>.ey,.pattern-section>.ey{color:#607367;font:700 8px var(--mono);letter-spacing:.09em}.pattern-coverage>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:15px}.pattern-coverage span{color:#69776d;font:700 8px var(--mono);letter-spacing:.055em;line-height:1.35}.pattern-coverage b{display:block;margin-top:5px;color:var(--forest);font:740 25px var(--sans);letter-spacing:-.065em}.pattern-observation{margin-top:12px;padding:15px;border:1px solid rgba(91,117,93,.19);border-radius:15px;background:rgba(255,253,246,.74)}.pattern-observation>span{display:block;color:#62776a;font:700 8px var(--mono);letter-spacing:.085em}.pattern-observation strong{display:block;margin-top:7px;color:#1c5141;font-size:17px;letter-spacing:-.045em;line-height:1.13}.pattern-observation p{margin:9px 0 0;color:#737268;font-size:11px;line-height:1.42}.pattern-observation>button{min-height:34px;margin-top:11px;padding:0;border:0;background:none;color:#27604e;font:700 8px var(--mono);letter-spacing:.065em}.pattern-observation>button::after{display:inline-block;width:6px;height:6px;margin:0 0 1px 8px;border-top:1px solid currentColor;border-right:1px solid currentColor;content:"";transform:rotate(45deg)}.pattern-evidence{display:grid;gap:9px;margin:9px 0 0;padding:12px 0 0;border-top:1px solid rgba(90,116,94,.18);list-style:none}.pattern-evidence li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;color:#58685e;font-size:11px;line-height:1.35}.pattern-evidence time{color:#7a7467;font:700 8px var(--mono);letter-spacing:.04em}.pattern-limits{margin-top:14px}
.consumption-detail-card{margin-top:16px;padding:18px;border:1px solid rgba(106,132,104,.25);border-radius:20px;background:linear-gradient(145deg,rgba(248,249,240,.94),rgba(229,236,219,.81));box-shadow:inset 0 1px rgba(255,255,255,.84),0 10px 22px rgba(42,65,46,.05)}.consumption-detail-row{padding:13px 0;border-bottom:1px solid rgba(90,116,94,.16)}.consumption-detail-row span,.consumption-detail-list>span{display:block;color:#62766a;font:700 8px var(--mono);letter-spacing:.08em}.consumption-detail-row b{display:block;margin-top:7px;color:var(--forest);font-size:17px;letter-spacing:-.045em}.consumption-detail-list{margin-top:14px;padding-top:14px;border-top:1px solid rgba(90,116,94,.16)}.consumption-detail-list p,.consumption-uncertainty{margin:8px 0 0;color:#68746a;font-size:12px;line-height:1.45}.consumption-uncertainty{padding:13px;border-radius:13px;background:rgba(255,249,232,.72);color:#705d41}.consumption-editor-card .health-field{display:grid;gap:7px;margin:0 0 14px;color:#315d4c;font:700 8px var(--mono);letter-spacing:.075em}.consumption-editor-card .health-field input{box-sizing:border-box;width:100%;min-height:46px;padding:10px 11px;border:1px solid rgba(84,111,91,.25);border-radius:12px;background:#fffdf5;color:#183f35;font:500 15px var(--sans);letter-spacing:0}.history-consumption-section{display:grid;gap:9px;margin-top:22px}.history-consumption-section>.ey{color:#62766a;font:700 8px var(--mono);letter-spacing:.09em}.history-consumption{display:grid;gap:5px;width:100%;padding:14px;border:1px solid rgba(106,132,104,.22);border-radius:15px;background:rgba(249,248,239,.77);color:var(--forest);text-align:left}.history-consumption b{font-size:16px;letter-spacing:-.04em}.history-consumption span{color:#68776d;font:700 8px var(--mono);letter-spacing:.06em}.history-consumption:active{transform:scale(.99)}
@media (max-width:430px) { .clarification-options,.label-grid { grid-template-columns:1fr; } .label-section { padding:15px; } }

/* GG.2.5A cache integrity: the diagnostic reads exact local stores without
   rendering their contents or making a storage write. */
.update-notice { position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:calc(78px + env(safe-area-inset-bottom)); left:max(16px,env(safe-area-inset-left)); z-index:14; display:flex; align-items:center; justify-content:space-between; gap:14px; width:min(558px,calc(100% - 32px)); margin:auto; padding:12px 13px 12px 15px; border:1px solid rgba(128,85,34,.31); border-radius:15px; background:linear-gradient(145deg,#fff8e9,#f2e8ce); box-shadow:0 14px 30px rgba(45,45,28,.17); color:#60492e; font-size:12px; font-weight:650; line-height:1.32; }.update-notice button { flex:0 0 auto; min-height:38px; padding:0 13px; border-radius:9px; background:#0c4f40; color:#fffdf5; font:700 8px var(--mono); letter-spacing:.075em; }.diagnostics-link { display:block; min-height:38px; margin:20px auto 0; padding:0; border:0; border-bottom:1px solid rgba(29,81,63,.28); background:none; color:#49665a; font:700 8px var(--mono); letter-spacing:.075em; }.diagnostics-heading h2 { max-width:11ch; }.diagnostic-block,.diagnostic-store { margin-top:12px; padding:16px; border:1px solid rgba(88,114,92,.22); border-radius:16px; background:linear-gradient(145deg,rgba(250,248,239,.9),rgba(233,238,224,.8)); box-shadow:inset 0 1px rgba(255,255,255,.78); }.diagnostic-block > b,.diagnostic-local > .ey,.diagnostic-store > b { display:block; color:#5d7467; font:700 8px var(--mono); letter-spacing:.09em; }.diagnostic-block > strong { display:block; margin-top:8px; color:var(--forest); font-size:17px; letter-spacing:-.04em; }.diagnostic-block > span,.diagnostic-block > small,.diagnostic-store > span,.diagnostic-store > small { display:block; margin-top:6px; color:#65756b; font-size:11px; line-height:1.4; }.diagnostic-origin { overflow-wrap:anywhere; font-size:13px !important; letter-spacing:-.02em !important; }.diagnostic-local { margin-top:20px; }.diagnostic-store { margin-top:9px; }.diagnostic-store > span { color:#315e4c; font-weight:650; }.diagnostic-store > small { font-family:var(--mono); font-size:8px; letter-spacing:.04em; }.diagnostic-note { margin:15px 2px; color:#717a72; font-size:11px; line-height:1.45; }.diagnostics-refresh { min-height:42px; padding:0 14px; border:1px solid rgba(27,75,59,.25); border-radius:11px; background:#fffdf5; color:#1e5948; font:700 8px var(--mono); letter-spacing:.07em; }.health-screen:has(.diagnostics-heading) { padding-bottom:calc(138px + env(safe-area-inset-bottom)); }

/* GG.2.5B: clinical editorial imagery replaces the former decorative art. */
.lesson-card { grid-template-columns:42% 1fr; border-color:rgba(109,119,100,.29); background:linear-gradient(125deg,rgba(255,252,242,.96),rgba(241,238,225,.84)); }
.lesson-card-art { isolation:isolate; background:#133f36 !important; }
.lesson-card-art::before,.lesson-card-art i { display:none; }
.lesson-card-art img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:28% 50%; filter:saturate(.76) contrast(1.06) brightness(.9); transform:scale(1.035); transition:transform 360ms ease,filter 360ms ease; }
.lesson-card-art::after { position:absolute; z-index:1; inset:0; display:block; border-radius:0; background:linear-gradient(90deg,rgba(6,49,42,.08),rgba(6,49,42,.04) 52%,rgba(250,247,236,.55)); content:""; }
.lesson-card:active .lesson-card-art img { transform:scale(1.07); filter:saturate(.88) contrast(1.07) brightness(.94); }
.lesson-card-1 .lesson-card-art img { object-position:38% 46%; }
.lesson-card-2 .lesson-card-art img { object-position:22% 56%; }
.lesson-card-3 .lesson-card-art img { object-position:26% 52%; }
.lesson-card-4 .lesson-card-art img { object-position:26% 45%; }
.lesson-card-copy { z-index:2; padding-left:0; }
.lesson-card-copy b { color:#6f705f; }.lesson-card-copy em { color:#5e6960; }.lesson-card-copy i { color:#285e4c; }
.lesson-visual:not(.visual-joint):not(.visual-crystals):not(.visual-inflammation):not(.visual-pain):not(.visual-flare-start):not(.visual-flare-swelling):not(.visual-flare-pain) img { object-position:25% 50%; opacity:.94; filter:saturate(.73) contrast(1.08) brightness(.78); }
.lesson-visual-urate img { object-position:21% 48%; }.lesson-visual-food img { object-position:22% 50%; }.lesson-visual-returning-flares img { object-position:20% 50%; }.lesson-visual-medical-help img { object-position:20% 46%; }

/* GG.2.6A: the Guardian is a quiet editorial companion, never the decision. */
.result-hero { isolation:isolate; box-shadow:0 18px 40px rgba(29,46,34,.09),inset 0 1px rgba(255,255,255,.92); }
.result-hero::after { position:absolute; inset:0; z-index:-1; background:linear-gradient(126deg,rgba(255,255,255,.33),transparent 45%,rgba(20,75,59,.025)); content:""; pointer-events:none; }
.guardian-scene { position:absolute !important; right:-9px; bottom:-13px; z-index:0; width:126px; margin:0; pointer-events:none; filter:drop-shadow(0 12px 12px rgba(26,62,48,.13)); transform:rotate(-1.5deg); transform-origin:bottom right; }
.guardian-scene img { display:block; width:100%; height:auto; }
.result-hero > :not(.guardian-scene) { z-index:1; }
.result-hero:has(.insight:not(.hide)) .insight,.result-hero:has(.positive-guidance:not(.hide)) .positive-guidance { padding-bottom:106px; }
.decision-amber .guardian-scene { filter:drop-shadow(0 12px 12px rgba(115,75,22,.13)); transform:rotate(1deg); }
.decision-red .guardian-scene { filter:drop-shadow(0 12px 12px rgba(116,52,42,.12)); transform:rotate(-1deg); }
.decision-unknown .guardian-scene { filter:drop-shadow(0 12px 12px rgba(66,82,66,.12)); transform:rotate(1deg); }
.conversation-prompt { display:flex; align-items:center; gap:8px; margin:0 2px 11px; color:#6a766d; font-size:11px; font-weight:630; }
.conversation-prompt span { display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:rgba(34,89,69,.12); color:#245c49; font-size:14px; line-height:1; }
.foot { position:relative; padding:16px; border-color:rgba(90,118,94,.25); border-radius:24px; background:linear-gradient(148deg,rgba(250,249,241,.98),rgba(225,232,217,.91)); box-shadow:0 15px 32px rgba(34,61,42,.075),inset 0 1px rgba(255,255,255,.93); }
.foot .action { min-height:60px; border-radius:19px; box-shadow:0 8px 16px rgba(5,66,52,.16),inset 0 1px rgba(255,255,255,.17); letter-spacing:.105em; transition:transform 150ms ease,box-shadow 150ms ease,background 150ms ease; }
.foot .action:active { box-shadow:0 3px 8px rgba(5,66,52,.14),inset 0 1px rgba(255,255,255,.14); transform:translateY(2px) scale(.995); }
.action-caption { margin:9px 0 11px; }
.secondary-actions { gap:9px; margin-top:0; }
.secondary { position:relative; min-height:52px; overflow:hidden; border-color:rgba(49,92,73,.22); border-radius:17px; background:rgba(255,254,247,.82); box-shadow:inset 0 1px rgba(255,255,255,.9); color:#245b48; transition:transform 150ms ease,background 150ms ease,border-color 150ms ease,box-shadow 150ms ease; }
.secondary::after { position:absolute; top:50%; right:14px; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; content:""; opacity:.72; transform:translateY(-50%) rotate(45deg); }
.secondary:active { background:#edf0e5; box-shadow:inset 0 2px 5px rgba(24,68,55,.08); transform:translateY(1px); }
.action:focus-visible,.secondary:focus-visible { outline:3px solid rgba(45,111,85,.38); outline-offset:3px; }
.more { margin-top:14px; padding:16px 2px 2px; }
@media (min-width:700px) { .guardian-scene { right:4px; bottom:-18px; width:160px; }.result-hero:has(.insight:not(.hide)) .insight,.result-hero:has(.positive-guidance:not(.hide)) .positive-guidance { padding-right:155px; padding-bottom:12px; }.foot { padding:19px; }.secondary-actions { max-width:430px; } }
@media (max-width:374px) { .guardian-scene { width:108px; right:-11px; }.result-hero:has(.insight:not(.hide)) .insight,.result-hero:has(.positive-guidance:not(.hide)) .positive-guidance { padding-bottom:92px; }.foot { padding:14px; }.secondary { font-size:8px; letter-spacing:.045em; } }
@media (prefers-reduced-motion:reduce) { .guardian-scene,.foot .action,.secondary { transition:none; } }

/* GG.2.6B.1: a content-led Guardian + Food + Decision scene. The visual scene has a
   real slot in the hero, so browser viewport changes can never manufacture blank space. */
.result-hero { min-height:0; padding:24px 21px 0; overflow:hidden; border-radius:30px; }
.result-hero:has(.insight:not(.hide)) .insight,.result-hero:has(.positive-guidance:not(.hide)) .positive-guidance { padding-bottom:0; padding-right:0; }
.result-hero::before { width:310px; height:310px; top:-162px; right:-108px; opacity:.72; }
.result-scene { position:relative; display:block; height:176px; margin:12px -21px 0; z-index:1; pointer-events:none; overflow:hidden; }
.result-hero > :not(.result-scene) { position:relative; z-index:2; }
.guardian-scene { position:absolute !important; z-index:2; right:0; bottom:-28px; width:181px; margin:0; filter:drop-shadow(0 14px 14px rgba(19,53,42,.17)); transform:none; }
.guardian-scene img { display:block; width:100%; height:auto; }
#food-scene { position:absolute; z-index:1; left:13px; bottom:8px; width:152px; height:152px; }
.food-visual { position:relative; display:grid; width:100%; height:100%; margin:0; place-items:center; }
.food-visual img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 14px 13px rgba(34,45,34,.17)); }
.food-visual-shape { position:relative; display:block; width:120px; height:120px; filter:drop-shadow(0 12px 10px rgba(34,45,34,.13)); }
/* High-fidelity CSS still-life fallbacks. They represent categories, never a brand or unprovided ingredient. */
.food-visual-shape[data-symbol="fruit"]::before { position:absolute; inset:20px 13px 15px 11px; border-radius:55% 49% 53% 48%; background:radial-gradient(circle at 31% 25%,#fff5c7 0 4%,#f7b747 5% 24%,#db623d 53%,#9e2d32 100%); box-shadow:34px 15px 0 -8px #925b91, 3px -7px 0 -1px #4c7b55; content:""; }
.food-visual-shape[data-symbol="fruit"]::after { position:absolute; top:3px; left:56px; width:31px; height:17px; border-radius:100% 0 100% 0; background:#567e4e; transform:rotate(-25deg); content:""; }
.food-visual-shape[data-symbol="juice"]::before { position:absolute; left:33px; top:22px; width:64px; height:83px; border:4px solid #fff6df; border-radius:10px 10px 18px 18px; background:linear-gradient(180deg,transparent 0 18%,#f6a829 19% 100%); box-shadow:inset 0 0 0 1px rgba(150,82,18,.2),0 8px 0 -5px rgba(87,55,15,.14); content:""; }
.food-visual-shape[data-symbol="juice"]::after { position:absolute; top:4px; left:80px; width:13px; height:61px; border-radius:9px; background:#f9e5a8; transform:rotate(-25deg); content:""; }
.food-visual-shape[data-symbol="water"]::before { position:absolute; left:32px; top:22px; width:65px; height:86px; border:4px solid rgba(255,255,255,.9); border-radius:9px 9px 18px 18px; background:linear-gradient(180deg,transparent 0 35%,#8ec8ca 36% 100%); box-shadow:inset 0 0 0 1px rgba(35,100,103,.18); content:""; }
.food-visual-shape[data-symbol="water"]::after { position:absolute; left:26px; top:7px; width:77px; height:105px; border-radius:50%; background:radial-gradient(circle at 68% 19%,rgba(255,255,255,.85),transparent 22%); content:""; }
.food-visual-shape[data-symbol="coffee"]::before { position:absolute; left:23px; top:37px; width:77px; height:61px; border-radius:8px 8px 29px 29px; background:linear-gradient(#f3dfbf 0 16%,#73503c 17% 40%,#eee3d2 41%); box-shadow:inset 0 -9px 15px rgba(93,57,37,.18); content:""; }
.food-visual-shape[data-symbol="coffee"]::after { position:absolute; left:91px; top:51px; width:30px; height:33px; border:10px solid #f3dfbf; border-left:0; border-radius:0 25px 25px 0; content:""; }
.food-visual-shape[data-symbol="icecream"]::before { position:absolute; left:27px; top:12px; width:73px; height:75px; border-radius:50% 50% 42% 42%; background:radial-gradient(circle at 32% 24%,#fff3ee 0 5%,#f7b2a7 6% 44%,#c85861 100%); box-shadow:35px 28px 0 -9px #f7ce8a, 8px 51px 0 -7px #fff1ca; content:""; }
.food-visual-shape[data-symbol="icecream"]::after { position:absolute; left:49px; top:75px; width:33px; height:42px; clip-path:polygon(0 0,100% 0,72% 100%,28% 100%); background:repeating-linear-gradient(75deg,#d9995f 0 5px,#f4c689 6px 10px); content:""; }
.food-visual-shape[data-symbol="sweet"]::before { position:absolute; left:16px; top:39px; width:91px; height:56px; border-radius:12px; background:repeating-linear-gradient(90deg,#6e3c2f 0 16px,#a95b46 17px 30px); box-shadow:16px -20px 0 -6px #ed8c98,60px -12px 0 -7px #f1b64e; content:""; }
.food-visual-shape[data-symbol="sweet"]::after { position:absolute; left:0; top:54px; width:122px; height:22px; background:linear-gradient(45deg,transparent 48%,#eabf86 49% 57%,transparent 58%) 0 0/20px 20px; content:""; }
.food-visual-shape[data-symbol="breakfast"]::before { position:absolute; left:14px; top:45px; width:98px; height:55px; border-radius:0 0 52px 52px; background:radial-gradient(ellipse at 50% 3%,#dcae6e 0 29%,#b56b42 30% 36%,#f2e0c8 37% 62%,#b96241 63%); box-shadow:0 5px 0 #744337; content:""; }
.food-visual-shape[data-symbol="breakfast"]::after { position:absolute; left:71px; top:26px; width:25px; height:25px; border-radius:50%; background:#d64339; box-shadow:-35px 14px 0 -5px #f5c35a, 13px 17px 0 -6px #f0b07c; content:""; }
.food-visual-shape[data-symbol="meat"]::before { position:absolute; left:14px; top:28px; width:101px; height:75px; border-radius:47% 46% 39% 47%; background:radial-gradient(ellipse at 41% 48%,#ef8b78 0 12%,#a73332 13% 56%,#6e2728 57%); box-shadow:inset -10px -10px 0 rgba(74,20,20,.18); content:""; }
.food-visual-shape[data-symbol="meat"]::after { position:absolute; top:18px; left:78px; width:29px; height:65px; border-radius:14px; background:#f4dfc4; transform:rotate(29deg); content:""; }
.food-visual-shape[data-symbol="chicken"]::before { position:absolute; left:13px; top:31px; width:96px; height:71px; border-radius:53% 43% 53% 45%; background:radial-gradient(circle at 33% 27%,#ffd89b,#d77b3b 62%,#9c4a25 100%); content:""; }
.food-visual-shape[data-symbol="chicken"]::after { position:absolute; left:87px; top:70px; width:38px; height:16px; border-radius:17px; background:#f0dfbd; box-shadow:20px -15px 0 -3px #f0dfbd; transform:rotate(-24deg); content:""; }
.food-visual-shape[data-symbol="chips"]::before { position:absolute; left:29px; top:21px; width:67px; height:92px; clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); background:#d54b40; content:""; }
.food-visual-shape[data-symbol="chips"]::after { position:absolute; left:37px; top:14px; width:10px; height:77px; border-radius:6px; background:#f8d77b; box-shadow:15px -2px #f8d77b,30px 4px #f8d77b,45px -5px #f8d77b; content:""; }
.food-visual-shape[data-symbol="vegetables"]::before { position:absolute; left:15px; top:28px; width:94px; height:76px; border-radius:45% 45% 50% 50%; background:radial-gradient(circle at 27% 31%,#89a94e 0 15%,transparent 16%),radial-gradient(circle at 63% 23%,#e58c47 0 14%,transparent 15%),radial-gradient(circle at 76% 62%,#7955a0 0 13%,transparent 14%),radial-gradient(circle at 37% 67%,#e1bc5a 0 16%,transparent 17%),#4f8b5d; content:""; }
.food-visual-shape[data-symbol="vegetables"]::after { position:absolute; left:2px; top:61px; width:121px; height:32px; border:6px solid #ede2ca; border-top:0; border-radius:0 0 54px 54px; content:""; }
.food-visual-shape[data-symbol="package"]::before { position:absolute; left:29px; top:17px; width:68px; height:94px; border:2px solid rgba(41,73,62,.22); border-radius:12px; background:linear-gradient(145deg,#ede6d5,#b9c5ba); box-shadow:inset 0 0 0 9px rgba(255,255,255,.36),0 11px 16px rgba(35,55,43,.13); content:""; }
.food-visual-shape[data-symbol="package"]::after { position:absolute; left:48px; top:46px; width:30px; height:23px; border:2px solid #64776b; border-radius:50%; background:radial-gradient(circle at 50% 50%,transparent 0 5px,#d5dfd0 6px 7px,transparent 8px); content:""; }
.decision-amber .result-hero { background:linear-gradient(145deg,#fff8e8 0%,#efe4ce 100%); }
.decision-red .result-hero { background:linear-gradient(145deg,#fff4ee 0%,#f2dcd4 100%); }
.decision-unknown .result-hero { background:linear-gradient(145deg,#f5f2e5 0%,#e4e8da 100%); }
.decision-amber .food-visual,.decision-red .food-visual { filter:saturate(.94); }
.decision-red .guardian-scene { filter:drop-shadow(0 16px 16px rgba(116,52,42,.18)); }
.decision-unknown .guardian-scene { filter:drop-shadow(0 16px 16px rgba(66,82,66,.16)); }
.foot { border-radius:27px; padding:16px; box-shadow:0 16px 38px rgba(34,53,41,.08),inset 0 1px rgba(255,255,255,.88); }
.conversation-prompt { gap:9px; justify-content:flex-start; padding:0 5px 11px; color:#536056; font-size:12px; letter-spacing:.02em; text-transform:none; }
.conversation-prompt span { display:grid; width:24px; height:24px; border-radius:50%; background:#e5eee6; color:#0f6d5a; place-items:center; font-size:18px; }
.foot .action { min-height:62px; border-radius:22px; background:linear-gradient(135deg,#08745f,#064f46); box-shadow:0 10px 16px rgba(6,82,69,.18),inset 0 1px rgba(255,255,255,.19); font-size:14px; letter-spacing:.06em; }
.foot .action:active,.secondary:active { transform:translateY(1px) scale(.99); }
.secondary-actions { gap:9px; }
.secondary { min-height:52px; border:0; border-radius:19px; background:#fffdf7; box-shadow:inset 0 0 0 1px #d6dbcf,0 4px 12px rgba(30,45,36,.045); font-size:11px; }
.action-caption { margin:9px 0 13px; color:#737b70; }
@media (min-width:700px) { .result-hero { padding:28px 27px 0; }.result-scene { height:220px; margin:16px -27px 0; }.guardian-scene { right:8px; width:220px; bottom:-34px; } #food-scene { left:44px; bottom:13px; width:185px; height:185px; } }
@media (max-width:374px) { .result-hero { padding:22px 19px 0; }.result-scene { height:158px; margin:10px -19px 0; }.guardian-scene { right:-5px; bottom:-23px; width:158px; } #food-scene { left:6px; bottom:5px; width:136px; height:136px; }.decision { font-size:54px; letter-spacing:-.07em; }.decision-unknown .decision { font-size:39px; } }
@media (prefers-reduced-motion:no-preference) { .foot .action,.secondary { transition:transform .14s ease,box-shadow .14s ease; } }

/* GG.2.6B.2 compact result composition. Result copy leads; the visual interaction
   follows it in normal document flow and can never become a viewport-sized stage. */
.result-hero { min-height:0; padding:21px 20px 0; border-radius:28px; }
.result-hero::before { width:226px; height:226px; top:-110px; right:-98px; opacity:.48; }
.result-hero > :not(.result-scene) { z-index:2; }
.checked-item { margin:8px 0 0; font-size:19px; line-height:1.18; }
.decision { margin:18px 0 11px; font-size:clamp(58px,15vw,76px); }
.decision-unknown .decision { max-width:8ch; font-size:clamp(35px,9.6vw,48px); letter-spacing:-.07em; line-height:.9; }
.phrase { max-width:25ch; font-size:18px; line-height:1.28; }
.result-scene { position:relative; display:block; height:150px; margin:11px -20px 0; overflow:hidden; z-index:1; }
.guardian-scene { right:4px; bottom:-19px; width:169px; filter:drop-shadow(0 10px 12px rgba(19,53,42,.16)); }
#food-scene { left:12px; bottom:5px; width:137px; height:137px; }
.food-visual img { filter:drop-shadow(0 10px 10px rgba(34,45,34,.17)); }
.flare-context { margin:8px 0 0; }
.insight,.positive-guidance { margin-top:14px; }
.foot { margin-top:16px; }
@media (min-width:700px) { .result-hero { padding:25px 26px 0; }.result-scene { height:186px; margin:13px -26px 0; }.guardian-scene { right:19px; bottom:-27px; width:210px; } #food-scene { left:39px; bottom:8px; width:169px; height:169px; } }
@media (max-width:374px) { .result-hero { padding:19px 18px 0; }.checked-item { font-size:18px; }.decision { font-size:53px; }.decision-unknown .decision { font-size:34px; }.phrase { font-size:17px; }.result-scene { height:136px; margin:9px -18px 0; }.guardian-scene { right:-2px; bottom:-15px; width:151px; } #food-scene { left:6px; bottom:2px; width:123px; height:123px; } }
.lesson-visual:not(.visual-joint):not(.visual-crystals):not(.visual-inflammation):not(.visual-pain):not(.visual-flare-start):not(.visual-flare-swelling):not(.visual-flare-pain)::after { background:linear-gradient(90deg,rgba(5,49,42,.18),rgba(5,49,42,.03) 62%,rgba(5,49,42,.31)); }

/* GG.2.6B.3: the decision, food and Guardian form one compact mobile scene.
   This intentionally replaces every inherited viewport-sized result reservation. */
#result .back { padding:2px 0 10px 18px; }
#result .res { min-height:0; }
#result .result-hero { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; min-height:0; padding:17px 18px 0; overflow:hidden; border-radius:27px; }
#result .result-copy { position:relative; z-index:3; min-width:0; }
#result .result-hero::before { width:178px; height:178px; top:-104px; right:-73px; opacity:.34; }
#result .result-orbit-one { top:-81px; right:-87px; width:194px; height:194px; opacity:.52; }
#result .result-orbit-two { right:-58px; bottom:-68px; width:138px; height:138px; }
#result .checked-item { max-width:18ch; margin:7px 0 0; font-size:18px; line-height:1.18; }
#result .decision { margin:14px 0 8px; font-size:clamp(54px,14.2vw,70px); letter-spacing:-.088em; line-height:.86; }
#result .decision-unknown .decision { max-width:9.5ch; font-size:clamp(34px,9vw,44px); letter-spacing:-.075em; line-height:.9; }
#result .phrase { max-width:24ch; font-size:17px; line-height:1.25; }
#result .result-scene { position:relative; display:block; min-height:clamp(156px,45vw,194px); height:auto; margin:2px -18px -5px; overflow:hidden; z-index:2; pointer-events:none; }
#result .guardian-scene { right:1px; bottom:-18px; width:clamp(185px,51vw,214px); z-index:3; filter:drop-shadow(0 12px 12px rgba(19,53,42,.15)); }
#result #food-scene { left:8px; bottom:5px; width:clamp(142px,40vw,167px); height:clamp(142px,40vw,167px); z-index:2; }
#result .food-visual img { filter:drop-shadow(0 11px 11px rgba(34,45,34,.17)); }
#result .flare-context { position:relative; z-index:3; margin:5px 0 0; }
#result .insight,#result .positive-guidance { position:relative; z-index:3; margin-top:13px; }
#result .foot { margin-top:14px; }
@media (max-width:374px) {
  #result .result-hero { padding:15px 16px 0; }
  #result .checked-item { font-size:17px; }
  #result .decision { font-size:52px; }
  #result .decision-unknown .decision { font-size:33px; }
  #result .phrase { font-size:16px; }
  #result .result-scene { min-height:148px; margin:1px -16px -4px; }
  #result .guardian-scene { right:-2px; width:181px; }
  #result #food-scene { left:3px; width:133px; height:133px; }
}
@media (min-width:700px) {
  #result .result-hero { padding:24px 26px 0; }
  #result .result-scene { min-height:220px; margin:5px -26px -7px; }
  #result .guardian-scene { right:17px; width:245px; bottom:-24px; }
  #result #food-scene { left:34px; bottom:7px; width:194px; height:194px; }
}

/* GG.2.6B.4 DIRECT FIX - single authoritative result composition.
   Result content stays in normal flow; no viewport-height reservation is allowed. */
#result.v.on { display:block; }
#result .res { display:block; min-height:0 !important; height:auto !important; }
#result .result-hero {
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  padding:16px 17px 0 !important;
  overflow:hidden;
  border-radius:26px;
}
#result .result-copy {
  position:relative !important;
  inset:auto !important;
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  z-index:4;
}
#result .result-copy .ey { margin:0; }
#result .checked-item { margin:6px 0 0 !important; max-width:22ch; font-size:18px; line-height:1.16; }
#result .decision { margin:12px 0 7px !important; font-size:clamp(52px,14vw,66px); line-height:.88; }
#result .decision-unknown .decision { font-size:clamp(33px,8.8vw,43px); line-height:.92; }
#result .phrase { margin:0 !important; max-width:25ch; font-size:16px; line-height:1.25; }
#result .result-scene {
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:auto !important;
  min-height:0 !important;
  height:176px !important;
  margin:0 -17px -4px !important;
  padding:0 !important;
  overflow:hidden;
  transform:none !important;
  z-index:2;
}
#result .guardian-scene {
  position:absolute !important;
  right:-2px !important;
  bottom:-22px !important;
  width:205px !important;
  height:auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:3;
}
#result #food-scene {
  position:absolute !important;
  left:4px !important;
  bottom:7px !important;
  width:158px !important;
  height:158px !important;
  margin:0 !important;
  transform:none !important;
  z-index:2;
}
#result .flare-context { margin:4px 0 0 !important; }
#result .insight,#result .positive-guidance { margin-top:12px !important; }
#result .foot { margin-top:12px !important; }
@media (max-width:374px) {
  #result .result-hero { padding:15px 15px 0 !important; }
  #result .result-scene { height:158px !important; margin:0 -15px -3px !important; }
  #result .guardian-scene { right:-7px !important; bottom:-20px !important; width:184px !important; }
  #result #food-scene { left:1px !important; bottom:5px !important; width:140px !important; height:140px !important; }
}
@media (min-width:700px) {
  #result .result-hero { padding:22px 24px 0 !important; }
  #result .result-scene { height:220px !important; margin:2px -24px -5px !important; }
  #result .guardian-scene { right:16px !important; bottom:-28px !important; width:250px !important; }
  #result #food-scene { left:32px !important; bottom:8px !important; width:195px !important; height:195px !important; }
}

/* GG.2.6B.4A — Vivo dead-space root fix.
   Decorative result orbits must never participate in normal document flow. */
#result .result-hero > .result-orbit { position:absolute !important; display:block !important; margin:0 !important; padding:0 !important; pointer-events:none !important; z-index:0 !important; }
#result .result-orbit-one { top:-104px !important; right:-73px !important; bottom:auto !important; left:auto !important; }
#result .result-orbit-two { right:-58px !important; bottom:-68px !important; top:auto !important; left:auto !important; }

/* GG.2.6C.1 — frame the existing Guardian assets inside the established B.4A scene.
   The common positioning keeps every state’s head within the scene without changing
   the art, the food placement, or the compact result flow. */
#result .guardian-scene { bottom:-82px !important; }
#result .positive-guidance { padding-bottom:17px !important; }
@media (max-width:374px) {
  #result .guardian-scene { bottom:-75px !important; }
}
@media (min-width:700px) {
  #result .guardian-scene { bottom:-93px !important; }
}

/* GG.2.6E — visual reliability reset. Known foods are named in the result;
   generic visual stand-ins are deliberately absent. The Guardian remains a
   stable human guide, while a neutral package only appears for unknown items. */
#result .guardian-scene {
  right:clamp(12px, 7vw, 31px) !important;
  width:clamp(205px, 56vw, 226px) !important;
  transform:none !important;
  animation:none !important;
  transition:none !important;
  will-change:auto !important;
}
#result .guardian-scene img { animation:none !important; transform:none !important; transition:none !important; }
#result #food-scene:empty { display:none !important; }
#result #food-scene:not(:empty) {
  left:14px !important;
  bottom:10px !important;
  width:138px !important;
  height:138px !important;
  opacity:.94;
}
#result #food-scene:not(:empty) .food-visual { filter:none; }
#result #food-scene:not(:empty) .food-visual-shape { transform:scale(.88); }
@media (max-width:374px) {
  #result .guardian-scene { right:8px !important; width:196px !important; }
  #result #food-scene:not(:empty) { left:7px !important; width:124px !important; height:124px !important; }
}
@media (min-width:700px) {
  #result .guardian-scene { right:31px !important; width:256px !important; }
  #result #food-scene:not(:empty) { left:38px !important; width:172px !important; height:172px !important; }
}

/* GG.2.6E — compact Gout Guard communication dock. It remains a four-way
   application control, not a website footer or a copy of another product. */
.app { padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
.nav {
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  z-index:12 !important;
  padding:7px 12px calc(7px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg,transparent,rgba(229,221,201,.72) 47%,rgba(229,221,201,.94)) !important;
}
.nav div {
  width:min(100%,520px) !important;
  min-height:58px !important;
  padding:4px !important;
  overflow:visible !important;
  border:1px solid rgba(74,92,76,.22) !important;
  border-radius:19px !important;
  background:linear-gradient(145deg,rgba(255,252,244,.98),rgba(238,234,220,.97)) !important;
  box-shadow:0 7px 18px rgba(35,50,38,.12),inset 0 1px rgba(255,255,255,.95) !important;
}
.nav button {
  min-height:48px !important;
  gap:3px !important;
  border-radius:14px !important;
  color:#747d72 !important;
  font-size:8px !important;
  letter-spacing:.065em !important;
  transition:color 150ms ease,background 150ms ease,transform 150ms ease,box-shadow 150ms ease !important;
}
.nav button + button::before { display:none !important; }
.nav button.active {
  color:var(--forest) !important;
  background:linear-gradient(145deg,rgba(204,222,204,.88),rgba(236,241,225,.82)) !important;
  box-shadow:inset 0 0 0 1px rgba(32,88,67,.13),0 2px 6px rgba(28,67,50,.08) !important;
}
.nav button.active::after {
  right:calc(50% - 3px) !important;
  bottom:4px !important;
  left:auto !important;
  width:6px !important;
  height:2px !important;
  background:var(--forest) !important;
}
.nav button:active { transform:scale(.96) !important; }
.nav-icon { width:21px !important; height:21px !important; }
.nav button.active .nav-icon { filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)); }
@media (prefers-reduced-motion:reduce) { .nav button { transition:none !important; } .nav button:active { transform:none !important; } }

/* GG.2.8: calm, local symptom recording. This is not a diagnosis surface. */
.joint-pain-heading h2 { max-width:10ch; }.joint-pain-form { margin-top:16px; }.joint-pain-form fieldset + fieldset { margin-top:19px; }.joint-pain-form select { width:100%; }.joint-laterality { margin-top:11px; }.joint-safety { margin-top:22px !important; padding:17px !important; border:1px solid rgba(145,113,75,.25) !important; border-radius:16px; background:rgba(250,244,229,.72); }.joint-safety p { margin:0 0 12px; color:#706c60; font-size:12px; line-height:1.42; }.joint-pain-outcome,.joint-pain-urgent,.joint-pain-summary,.joint-pain-guidance { margin-top:15px; padding:18px; border:1px solid rgba(100,130,103,.25); border-radius:19px; background:linear-gradient(145deg,rgba(247,248,237,.94),rgba(231,238,222,.8)); box-shadow:inset 0 1px rgba(255,255,255,.84); }.joint-pain-outcome h2 { max-width:11ch; margin:9px 0 10px; color:var(--forest); font-size:clamp(31px,8.2vw,43px); line-height:.93; letter-spacing:-.07em; }.joint-pain-outcome p,.joint-pain-urgent p,.joint-pain-guidance p { margin:0; color:#596a60; font-size:14px; line-height:1.48; }.joint-pain-urgent { border-color:rgba(143,76,64,.34); background:linear-gradient(145deg,rgba(255,242,235,.94),rgba(247,228,219,.84)); }.joint-pain-urgent b { display:block; color:#8d4238; font:700 10px var(--mono); letter-spacing:.085em; }.joint-pain-urgent p { margin-top:9px; color:#704943; font-weight:650; }.joint-pain-urgent span { display:block; margin-top:10px; color:#7c6157; font-size:11px; line-height:1.4; }.joint-pain-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; background:rgba(251,249,239,.72); }.joint-pain-summary span { grid-column:1 / -1; color:#607666; font:700 8px var(--mono); letter-spacing:.085em; }.joint-pain-summary strong { color:var(--forest); font-size:20px; letter-spacing:-.05em; }.joint-pain-summary p { grid-column:1 / -1; margin:0; color:#6c786e; font-size:12px; line-height:1.4; }.joint-pain-guidance .ey { margin-bottom:12px; }.joint-pain-guidance ul { display:grid; gap:9px; margin:0; padding:0; list-style:none; }.joint-pain-guidance li { color:#5d6d63; font-size:13px; line-height:1.42; }.care-list li { display:grid; gap:3px; padding-left:13px; border-left:2px solid rgba(53,104,78,.32); }.care-list b { color:#285d4a; font:700 8px var(--mono); letter-spacing:.075em; }.joint-pain-actions { margin-top:16px; }.joint-pain-actions .go { width:100%; }.joint-pain-actions p { margin:10px 4px 15px; color:#68766c; font-size:11px; line-height:1.42; }.joint-pain-actions .secondary { width:100%; }.joint-flare-on { padding:12px; border:1px solid rgba(74,111,83,.2); border-radius:13px; background:rgba(234,240,224,.72); color:#416653 !important; font:700 8px var(--mono) !important; letter-spacing:.065em; }.joint-pain-active { margin-top:17px; padding-top:16px; border-top:1px solid rgba(93,123,96,.22); }.joint-pain-active > span { display:block; color:#8a5b43; font:700 8px var(--mono); letter-spacing:.085em; }.joint-pain-active strong { display:block; margin-top:7px; color:var(--forest); font-size:17px; letter-spacing:-.045em; }.joint-pain-active p { margin:5px 0 0; color:#68766c; font-size:11px; line-height:1.4; }.joint-pain-active div { display:flex; flex-wrap:wrap; gap:8px 13px; margin-top:11px; }.joint-pain-active button { min-height:30px; padding:0; border:0; background:none; color:#315d4b; font:700 7px var(--mono); letter-spacing:.065em; text-align:left; }

/* GG.2.9: medicine check is a cautious, local record flow, not a prescribing surface. */
.medicine-entry { display:grid; width:100%; gap:5px; margin-top:16px; padding:16px 17px; border:1px solid rgba(47,96,75,.25); border-radius:17px; background:linear-gradient(140deg,rgba(246,248,239,.98),rgba(226,235,219,.9)); color:var(--forest); text-align:left; box-shadow:inset 0 1px rgba(255,255,255,.86); }.medicine-entry span,.medicine-summary span,.medicine-confirm b { color:#5d7564; font:700 8px var(--mono); letter-spacing:.09em; }.medicine-entry b { font-size:15px; letter-spacing:-.035em; }.medicine-entry-my-gout { margin:15px 0 0; }.medicine-heading h2 { max-width:11ch; }.medicine-form { margin-top:15px; }.medicine-form fieldset { margin:17px 0 0; }.medicine-safety { padding:15px !important; border:1px solid rgba(134,104,75,.25) !important; border-radius:16px; background:rgba(250,244,232,.7); }.medicine-safety p { margin:0 0 10px; color:#716d61; font-size:12px; line-height:1.42; }.medicine-result,.medicine-summary,.medicine-confirm { margin-top:15px; padding:18px; border:1px solid rgba(75,110,84,.25); border-radius:19px; background:linear-gradient(145deg,rgba(247,249,240,.95),rgba(231,239,223,.85)); box-shadow:inset 0 1px rgba(255,255,255,.88); }.medicine-result h2 { max-width:12ch; margin:9px 0 10px; color:var(--forest); font-size:clamp(28px,7.5vw,39px); line-height:.95; letter-spacing:-.065em; }.medicine-result p,.medicine-note,.medicine-confirm p { margin:0; color:#596a60; font-size:13px; line-height:1.48; }.medicine-urgent { border-color:rgba(143,76,64,.36); background:linear-gradient(145deg,rgba(255,243,237,.96),rgba(248,228,219,.86)); }.medicine-urgent h2,.medicine-urgent p { color:#7d453c; }.medicine-summary { display:grid; gap:5px; background:rgba(251,249,239,.76); }.medicine-summary strong { color:var(--forest); font-size:21px; letter-spacing:-.055em; }.medicine-summary p { margin:0; color:#6e796f; font-size:12px; }.medicine-actions { display:grid; gap:10px; margin-top:15px; }.medicine-actions .go,.medicine-actions .secondary,.medicine-confirm .go { width:100%; }.medicine-actions p { margin:0 4px; color:#68766c; font-size:11px; line-height:1.4; text-align:center; }.medicine-note { margin:13px 5px 0; font-size:11px; }.medicine-confirm { display:grid; gap:10px; border-color:rgba(47,96,75,.31); }.medicine-recorded { margin:13px 4px 0; color:#38624d; font-size:12px; line-height:1.45; font-weight:700; }

.medicine-question fieldset { padding:17px !important; border:1px solid rgba(84,113,90,.24) !important; border-radius:18px; background:rgba(252,250,241,.78); }.medicine-question legend { max-width:25ch; color:var(--forest); font-size:18px; font-weight:750; letter-spacing:-.045em; line-height:1.08; }.medicine-urgent-link { display:block; width:100%; min-height:42px; margin:13px 0 0; padding:0 8px; border:0; background:transparent; color:#775b4f; font:700 9px var(--mono); letter-spacing:.065em; text-align:center; text-decoration:underline; text-decoration-color:rgba(119,91,79,.32); text-underline-offset:4px; }.medicine-urgent-options { display:grid; gap:8px; margin-top:16px; }.medicine-urgent-options button { min-height:49px; padding:11px 14px; border:1px solid rgba(143,76,64,.22); border-radius:14px; background:rgba(255,248,241,.86); color:#704943; font-size:13px; font-weight:650; line-height:1.25; text-align:left; }.medicine-urgent-options button:active { transform:scale(.985); background:rgba(252,237,230,.94); }
@media (prefers-reduced-motion:reduce) { .medicine-urgent-options button:active { transform:none; } }

/* GG.2.14A: new results need a genuine result date for safe chronology. */
.urate-date-required { margin:10px 0 0; color:#765d3e; font-size:12px; font-weight:650; line-height:1.4; }

/* GG.L2 trust and recovery: quiet, local-first safeguards. */
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid rgba(18,67,55,.7); outline-offset:3px; }
.storage-failure { position:fixed; z-index:50; right:16px; bottom:calc(90px + env(safe-area-inset-bottom)); left:16px; padding:14px 16px; border:1px solid rgba(132,80,62,.36); border-radius:15px; background:#fff5ee; color:#71473c; box-shadow:0 10px 24px rgba(55,42,35,.15); font-size:12px; font-weight:650; line-height:1.4; }.trust-intro { position:fixed; z-index:60; inset:0; display:grid; align-items:end; padding:20px; background:rgba(25,39,30,.42); }.trust-intro-card { max-width:540px; margin:auto; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); border:1px solid rgba(221,230,211,.6); border-radius:25px; background:#fcf9ef; color:var(--ink); box-shadow:0 24px 70px rgba(18,31,23,.28); }.trust-intro-card h2 { margin:7px 0 11px; color:var(--forest); font-size:34px; letter-spacing:-.06em; }.trust-intro-card h3 { margin:17px 0 5px; color:var(--forest); font-size:16px; }.trust-intro-card p,.roadmap-panel p { color:#607066; font-size:13px; line-height:1.45; }.trust-intro-card .go { width:100%; margin-top:16px; }.trust-inline-links,.trust-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }.trust-inline-links button,.trust-links button { min-height:36px; padding:0 9px; border:0; background:transparent; color:#38634f; font:700 9px var(--mono); letter-spacing:.075em; text-decoration:underline; text-underline-offset:4px; }.deleted-record,.roadmap-panel { margin-top:13px; padding:16px; border:1px solid rgba(83,111,86,.2); border-radius:17px; background:rgba(252,250,240,.74); }.deleted-record span,.deleted-record strong { display:block; }.deleted-record span,.roadmap-panel strong { color:#557264; font:700 8px var(--mono); letter-spacing:.085em; }.deleted-record strong { margin-top:6px; color:var(--forest); font-size:17px; letter-spacing:-.04em; }.deleted-record p { color:#68766c; font-size:12px; line-height:1.4; }.deleted-record div { display:flex; gap:8px; }.deleted-record button { flex:1; min-height:40px; }.roadmap-panel strong { margin-top:15px; }.roadmap-panel strong:first-child { margin-top:0; }.roadmap-panel p { margin:5px 0 13px; }