/* REMED AI — launch app styles.
   Design system "Kamal" (see CLAUDE.md): night olive + sage→gold gradients, Kamal Bloom logo,
   sharp brutalist edges (square corners, 3px ink borders, hard offset shadows).
   Mobile-first; on wide screens the app sits in a phone-width column. */

:root {
  --night: #0F160E; --deep: #1E2A1B; --olive: #2A3A26; --ink: #23301F;
  --sage: #3F5F3A; --sage-l: #B5D08F; --gold: #C8902E; --gold-l: #F6D27A;
  --bg: #F3F1E8; --cream: #FBFAF4; --tint: #E4E8D6; --muted: #5B6852;
  --ok: #1F6B2E; --ok-bg: #D8EFC9; --low: #B42318; --low-bg: #FBD9D0; --high: #8A5A00; --high-bg: #FCE8B2;
  --g-gold: linear-gradient(135deg, #F6D27A, #C8902E);
  --g-sage: linear-gradient(135deg, #B5D08F, #3F5F3A);
  --g-bloom: linear-gradient(110deg, #F6D27A 0%, #C8902E 30%, #7FA266 55%, #F6D27A 80%);
  --font: "Archivo", "Noto Sans Devanagari", system-ui, sans-serif;
  --font-head: "Archivo Black", "Noto Sans Devanagari", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", "Noto Sans Devanagari", Georgia, serif;
  --edge: 3px solid var(--ink);
  --shadow: 5px 5px 0 var(--ink);
  --pad: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh; font: 500 16px/1.5 var(--font); color: var(--ink); -webkit-font-smoothing: antialiased;
  background: radial-gradient(700px 500px at 80% 0%, rgba(200,144,46,.18), transparent 60%), linear-gradient(165deg, var(--deep), var(--night));
  background-attachment: fixed;
}
[hidden] { display: none !important; }
.defs { position: absolute; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button, a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button { background: none; border: 0; cursor: pointer; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 3px; }

.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; background: var(--bg); padding: 0 var(--pad) calc(32px + env(safe-area-inset-bottom)); }
.screen { animation: screenIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) var(--pad) 10px; color: var(--cream);
  background: linear-gradient(165deg, var(--deep), var(--night)); border-bottom: 2px solid rgba(246,210,122,.45);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand .bloom { width: 34px; height: 34px; }
.word { font: 400 24px/1 var(--font-head); letter-spacing: -.03em; }
.word em { font: italic 700 1.14em var(--font-serif); color: var(--gold-l); letter-spacing: 0; }
.demo-badge { display: none; font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; background: var(--gold-l); color: var(--night); padding: 3px 7px; }
.is-demo .demo-badge { display: inline-block; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }
.chip-btn { min-height: 38px; padding: 0 12px; border: 2px solid rgba(251,250,244,.75); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; transition: transform .12s, box-shadow .12s; }
.chip-btn:active { transform: translate(2px,2px); }
.chip-btn.icon { width: 40px; justify-content: center; padding: 0; }
.chip-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px;
  font: 700 16px var(--font); text-decoration: none; border: var(--edge); box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn:active { transform: translate(5px,5px); box-shadow: 0 0 0 var(--ink); }
.btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-big { width: 100%; min-height: 62px; font-size: 18px; }
.btn-gold { background: var(--g-gold); color: var(--night); }
.btn-outline { background: var(--cream); color: var(--ink); }
.btn-outline-dark { background: transparent; color: var(--ink); }
.btn-dark { background: linear-gradient(160deg, var(--olive), var(--night)); color: var(--cream); }
.btn-wa { background: #1F7A4D; color: #fff; }
.btn-danger { background: var(--low); color: #fff; }
.link-btn { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; padding: 8px 4px; color: var(--sage); }
.icon-slot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-slot.big svg { width: 40px; height: 40px; }

/* ---------- home ---------- */
[data-screen="home"] { margin: 0 calc(var(--pad) * -1); }
.hero {
  position: relative; overflow: hidden; color: var(--cream); padding: 28px var(--pad) 36px;
  background: radial-gradient(500px 300px at 85% 10%, rgba(200,144,46,.25), transparent 60%), linear-gradient(165deg, var(--deep), var(--night));
}
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; }
.eyebrow { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 16px; }
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage-l); box-shadow: 0 0 12px var(--sage-l); animation: dot 2.2s ease-in-out infinite; }
@keyframes dot { 50% { transform: scale(1.6); } }
h1 { position: relative; font: 400 44px/1 var(--font-head); letter-spacing: -.03em; text-transform: uppercase; }
h1 em { display: block; font: italic 700 1.18em/1.05 var(--font-serif); text-transform: none; letter-spacing: -.01em; padding-bottom: .06em; }
:lang(hi) h1 { font-size: 40px; line-height: 1.2; }
:lang(hi) h1 em { font-family: var(--font-head); font-style: normal; font-size: 1em; }
.gtext { background: var(--g-bloom); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: -250% 0; } }
.lead { position: relative; margin-top: 16px; color: rgba(251,250,244,.78); font-size: 17px; }
.home-actions { display: grid; gap: 14px; padding: 24px var(--pad) 8px; justify-items: center; }
[data-screen="home"] .fineprint { padding: 8px var(--pad) 0; }
.fineprint { font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- pick a sample ---------- */
.back { display: inline-block; margin-top: 14px; }
.screen-title { font: 400 28px/1.1 var(--font-head); text-transform: uppercase; margin-top: 8px; }
.screen-lead { color: var(--muted); margin: 6px 0 18px; font-size: 14px; }
.sample-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sample-card { text-align: left; background: var(--cream); border: var(--edge); box-shadow: var(--shadow); display: grid; transition: transform .12s, box-shadow .12s; }
.sample-card:active { transform: translate(5px,5px); box-shadow: none; }
.sample-thumb { height: 120px; overflow: hidden; border-bottom: var(--edge); background: var(--tint); position: relative; }
.thumb-inner { position: absolute; top: 8px; left: 50%; width: 340px; transform: translateX(-50%) scale(.42); transform-origin: top center; pointer-events: none; }
.sample-text { padding: 10px 12px 12px; display: grid; gap: 2px; }
.sample-text b { font-size: 15px; line-height: 1.25; }
.sample-text span { font-size: 12px; color: var(--muted); }

/* ---------- arch card (reading + result header) ---------- */
.arch-wrap { border: 3px solid var(--gold-l); border-radius: 180px 180px 0 0; box-shadow: 8px 8px 0 var(--gold), 0 0 60px -20px rgba(200,144,46,.5); margin-top: 22px; }
.arch { position: relative; overflow: hidden; border-radius: 177px 177px 0 0; background: linear-gradient(180deg, var(--cream), var(--bg)); padding: 128px 16px 18px; }
.arch-short { padding-top: 140px; }
.arch-top { position: absolute; left: 0; right: 0; top: 22px; display: grid; justify-items: center; gap: 4px; }
.halo { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fff 0 30%, rgba(246,210,122,.35) 60%, transparent 72%); }
.halo .bloom { width: 44px; height: 44px; }
.halo.thinking .bloom { animation: spin 1.6s linear infinite; }
.halo.thinking { animation: haloPulse 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes haloPulse { 50% { box-shadow: 0 0 0 10px rgba(246,210,122,.25); } }
.serif { font: italic 700 22px var(--font-serif); }
:lang(hi) .serif { font: 700 17px var(--font); }
.reading-doc { position: relative; max-height: 360px; overflow: hidden; }
.reading-doc .paper { box-shadow: none; }
.reading-photo { display: block; width: 100%; max-height: 360px; object-fit: contain; border: 2px solid var(--ink); background: #fff; }
.reading-pdf { display: grid; justify-items: center; gap: 8px; padding: 40px; border: 2px dashed var(--ink); }
.reading-pdf svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; }
.scanline { position: absolute; left: 3px; right: 3px; top: 120px; height: 3px; background: var(--gold-l); box-shadow: 0 0 18px 4px rgba(246,210,122,.75); animation: scan 2.6s cubic-bezier(.45,0,.55,1) infinite; pointer-events: none; }
@keyframes scan { 0% { top: 120px; opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 6px); opacity: 0; } }
.reading-step { text-align: center; font-weight: 700; margin: 22px 0 0; min-height: 1.5em; }

/* ---------- result ---------- */
.result-title { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.result-title h2 { font: 400 20px/1.15 var(--font-head); text-transform: uppercase; }
:lang(hi) .result-title h2 { font-family: var(--font); font-weight: 900; text-transform: none; }
.result-title span { font-size: 13px; color: var(--muted); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.result-actions .btn { min-height: 48px; padding: 0 12px; font-size: 15px; }
.result-body { display: grid; gap: 14px; margin-top: 26px; }
.summary { font-size: 18px; font-weight: 700; line-height: 1.45; }
.section-title { font: 400 18px var(--font-head); text-transform: uppercase; border-top: var(--edge); padding-top: 14px; margin-top: 6px; }
:lang(hi) .section-title { font-family: var(--font); font-weight: 900; }
.card { background: var(--cream); border: var(--edge); box-shadow: var(--shadow); padding: 16px; }
.med { position: relative; padding-left: 20px; }
.med::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--g-sage); }
.med-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.med-head h3 { font-size: 19px; font-weight: 700; }
.med-head span { font-size: 13px; color: var(--muted); }
.med-purpose { margin-top: 4px; font-weight: 700; }
.med-how { margin-top: 10px; font-size: 15px; }
.med-caution { margin-top: 10px; font-size: 14px; padding: 8px 10px; background: var(--high-bg); border: 2px solid var(--ink); }
.med-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 9px; border: 2px solid var(--ink); background: var(--tint); }
.pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tt-slot { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 2px solid #C9CDBA; color: #A3AA94; font-size: 13px; font-weight: 700; background: #fff; }
.tt-slot svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tt-slot.on { border: 2px solid var(--ink); background: var(--g-gold); color: var(--night); box-shadow: 3px 3px 0 var(--ink); }
.tt-sos { display: block; grid-template-columns: none; padding: 10px; border: 2px dashed var(--ink); text-align: center; font-weight: 700; }
.test-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.test-head h3 { font-size: 17px; }
.test-value { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.test-value b { font: 400 28px var(--font-head); }
.test-value small { color: var(--muted); font-size: 13px; }
.test-range { margin-left: auto; font-size: 13px; color: var(--muted); }
.test-bar { position: relative; height: 10px; margin: 10px 0; border: 2px solid var(--ink); background: linear-gradient(90deg, #E06A55 0 28%, #7FA266 28% 72%, #E0B04A 72%); }
.test-bar i { position: absolute; top: -6px; width: 5px; height: 18px; background: var(--ink); left: 50%; }
.test-bar .mark-low { left: 14%; } .test-bar .mark-high { left: 86%; } .test-bar .mark-unknown { display: none; }
.test p { font-size: 15px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 3px 9px; border: 2px solid var(--ink); white-space: nowrap; }
.badge-normal { background: var(--ok-bg); color: var(--ok); }
.badge-low { background: var(--low-bg); color: var(--low); }
.badge-high { background: var(--high-bg); color: var(--high); }
.badge-unknown { background: var(--tint); }
.status-low .badge, .status-high .badge { animation: ring 1.6s ease-out 1s 3; }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(180,35,24,.45); } to { box-shadow: 0 0 0 10px rgba(180,35,24,0); } }
.questions h3, .unclear h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 8px; }
.questions h3 svg, .unclear h3 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.questions { background: linear-gradient(165deg, var(--olive), var(--night)); color: var(--cream); }
.questions h3 svg { color: var(--gold-l); }
.questions ol { padding-left: 22px; display: grid; gap: 8px; }
.unclear ul { padding-left: 20px; margin-bottom: 8px; }
.unclear p { font-size: 14px; color: var(--muted); }
.urgent { display: grid; gap: 10px; padding: 16px; background: var(--low-bg); border: 3px solid var(--low); box-shadow: 5px 5px 0 var(--low); }
.urgent svg { width: 28px; height: 28px; fill: none; stroke: var(--low); stroke-width: 2.2; stroke-linecap: round; }
.urgent p { font-weight: 700; }
.result-more { display: grid; gap: 12px; margin-top: 26px; }
.reveal { animation: pop .45s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes pop { 0% { opacity: 0; transform: translate(8px,8px); } 60% { opacity: 1; transform: translate(-2px,-2px); } 100% { opacity: 1; transform: none; } }

/* ---------- error ---------- */
.error-card { margin-top: 28px; display: grid; gap: 14px; justify-items: start; }
.error-card .icon-slot { color: var(--high); }
.error-card p { font-size: 18px; font-weight: 700; }
.error-actions { display: grid; gap: 12px; width: 100%; }

/* ---------- paper documents (samples) ---------- */
.paper { position: relative; background: #fffdf6; border: 2px solid var(--ink); padding: 18px 18px 30px; font: 14px/1.5 var(--font); color: #1d2433; box-shadow: var(--shadow); }
.paper-head { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px solid #1d2433; padding-bottom: 8px; margin-bottom: 10px; }
.paper-head b { display: block; font-size: 16px; }
.paper-head span { display: block; font-size: 12px; color: #4a5568; }
.paper-date { font-size: 13px; white-space: nowrap; }
.paper-patient, .paper-complaint { font-size: 13px; }
.paper-rx-sign { font: italic 700 30px Georgia, serif; margin: 6px 0 2px; }
.paper-lines { padding-left: 22px; display: grid; gap: 6px; }
.paper-advice { margin-top: 10px; font-size: 13px; }
.paper-sign { text-align: right; margin-top: 10px; font: italic 22px Georgia, serif; }
.paper-title { font-weight: 700; margin-bottom: 8px; }
.paper-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.paper-table th, .paper-table td { text-align: left; border-bottom: 1px solid #c8c8c8; padding: 5px 4px; }
.paper-table .flag { font-weight: 700; color: var(--low); }
.paper-mark { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 700 9px var(--font); letter-spacing: .1em; color: var(--gold); }
.is-hand .paper-lines, .is-hand .paper-complaint, .is-hand .paper-advice, .is-hand .paper-patient { font-family: "Kalam", "Segoe Print", "Bradley Hand", cursive; font-size: 16px; color: #1f3a8a; transform: rotate(-.6deg); }
.paper-strip { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; background: linear-gradient(135deg, #e9edf2, #c4ccd6 40%, #f4f6f9 60%, #b8c1cc); }
.strip-foil { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.strip-foil i { aspect-ratio: 1.6; border-radius: 40%; background: radial-gradient(circle at 35% 30%, #fff, #d9dee6 60%, #aab3bf); box-shadow: inset 0 0 0 2px #9aa4b1; }
.strip-text { display: grid; gap: 3px; align-content: start; font-size: 12px; }
.strip-text b { font: 400 20px var(--font-head); color: var(--low); }
.strip-text small { font-size: 10px; color: #4a5568; }

/* ---------- logo bloom animation ---------- */
.bloom .pt { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(var(--r)); animation: unfold 1.1s cubic-bezier(.2,.9,.25,1.15) both; animation-delay: calc(var(--d) + .1s); }
.bloom .core { transform-box: view-box; transform-origin: 50% 50%; animation: corePop .5s cubic-bezier(.2,.9,.3,1.6) .7s both; }
@keyframes unfold { from { transform: rotate(0deg) scale(.15); opacity: 0; } }
@keyframes corePop { from { transform: scale(0); } }
.brand:hover .bloom, .brand:active .bloom { transform: rotate(90deg); transition: transform .6s cubic-bezier(.2,.9,.2,1.3); }

/* ---------- demo mode: see css/attract.css ---------- */

/* ---------- wide screens ---------- */
@media (min-width: 600px) {
  .app { box-shadow: 0 0 0 3px var(--gold-l), 0 30px 80px -30px rgba(0,0,0,.8); margin: 24px auto; min-height: calc(100dvh - 48px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scanline { display: none; }
}

/* Devanagari joins letters — letter-spacing breaks the words apart. */
:lang(hi) .eyebrow, :lang(hi) .demo-badge { letter-spacing: 0; }

/* "Looked up online" note on a medicine filled in by a Google Search lookup (lib/lookup.js). */
.med-source { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-size: 12px; color: var(--muted); }
.med-source svg { width: 15px; height: 15px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.med-source a { color: var(--sage); font-weight: 700; }

/* "Good to know": plain explanations of conditions the document names. Tip: calm hint, not a warning. */
.learn h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 6px; }
.learn h3 svg, .tip svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--sage); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.learn p { font-size: 15px; }
.tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 2px dashed var(--sage); background: var(--tint); font-size: 15px; font-weight: 600; }
/* "Hard to read in this photo": a calm note, not an alarm. */
.unclear { box-shadow: none; border: 2px dashed var(--ink); background: var(--bg); }
.unclear h3 { font-size: 15px; }
.unclear h3 svg { color: var(--muted); }
.unclear ul { font-size: 14px; color: var(--muted); }

/* Consent + AI-provider notice and legal links on the app home screen. */
.consent { padding: 4px var(--pad) 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.consent a, .legal-links a { color: var(--sage); font-weight: 700; }
.legal-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; padding: 10px var(--pad) 0; font-size: 13px; }