/* Hallmark · shape: Workbench · genre: modern-minimal · theme: Dose (deal from the app's system) · job: try · draw: d8f2a3
 * hero: Stage · nav: banner over a retracting bar · footer: letter close · imagery: screenshots 5 per language (flutter drive) · signature: the Today screen with a pharmacy label stamped taken at 08:04 · dose: white
 * axes: light/grotesk-sans/chromatic-green · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a reminder page argues little; led with the one thing only this app does, the voice first and the bell after, shown as the timed bands */
/* Hallmark · swap: the draw left out Steps; the voice then bell sequence stays as the theme's plastic bands because it is the product's core and has no screen of its own */
@import url("./tokens.css");
@import url("./base.css");

/* Language faces: the theme's Schibsted and Instrument Sans carry Latin; each script takes a face that has its letters, with DM Mono kept for times. */
:root:lang(ko) { --font-display: "Pretendard Variable", "Pretendard", ui-sans-serif, sans-serif; --font-body: "Pretendard Variable", "Pretendard", ui-sans-serif, sans-serif; --tracking-display: -0.02em; }
:root:lang(ja) { --font-display: "Noto Sans JP", ui-sans-serif, sans-serif; --font-body: "Noto Sans JP", ui-sans-serif, sans-serif; --tracking-display: 0em; }
:root:lang(zh) { --font-display: "Noto Sans SC", ui-sans-serif, sans-serif; --font-body: "Noto Sans SC", ui-sans-serif, sans-serif; --tracking-display: 0em; }
:root:lang(vi) { --font-display: "Be Vietnam Pro", ui-sans-serif, sans-serif; --font-body: "Be Vietnam Pro", ui-sans-serif, sans-serif; --tracking-display: -0.02em; }
:root:lang(ar) { --font-display: "Noto Sans Arabic", ui-sans-serif, sans-serif; --font-body: "Noto Sans Arabic", ui-sans-serif, sans-serif; --tracking-display: 0em; }
:root { --bar-height: 64px; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

body { background-color: var(--color-paper); background-image: var(--grain); font-size: 1.0625rem; }
:lang(ar) body, body:lang(ar) { line-height: 1.75; }
:lang(ko) { word-break: keep-all; }
.mono, time.mono { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }

/* Banner over a retracting bar */
.banner { background: var(--color-paper-2); border-block-end: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.banner .container { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); align-items: center; min-height: 40px; padding-block: var(--space-2xs); }
.banner a { color: var(--color-ink-2); text-decoration: none; padding: var(--space-2xs) var(--space-3xs); border-radius: 6px; }
.banner a:hover { color: var(--color-accent-deep); text-decoration: underline; }
.banner a[aria-current="true"] { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-accent); }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 94%, transparent); backdrop-filter: blur(8px); border-block-end: var(--rule-hair) solid var(--color-rule); transition: transform var(--dur-short) var(--ease-out); }
.js .bar.is-hidden { transform: translateY(-100%); }
.bar .container { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--bar-height); }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-xs); font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark span { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0; color: var(--color-muted); }
.bar nav { display: flex; gap: var(--space-md); margin-inline-start: auto; align-items: center; }
.bar nav a.link { color: var(--color-ink-2); text-decoration: none; padding: var(--space-xs) var(--space-2xs); white-space: nowrap; }
.bar nav a.link:hover { color: var(--color-accent-deep); text-decoration: underline; }
.bar nav a.link[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }

/* Moulded controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-input); font: 500 var(--text-md) var(--font-body); color: var(--color-ink); background: var(--color-paper); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule), 0 3px 0 var(--color-rule); transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn--primary { background: linear-gradient(var(--color-accent), var(--color-accent-deep)); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--glint) 40%, transparent), 0 0 0 1px var(--color-accent-deep), 0 3px 0 var(--color-accent-deep); }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--primary:active { box-shadow: 0 0 0 1px var(--color-accent-deep); }
.btn--small { min-height: 44px; padding: 0 var(--space-md); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.soon { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-md); border: 1px dashed var(--color-muted); border-radius: var(--radius-input); color: var(--color-muted); white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

/* Plastic */
.plastic { --t: var(--p-thu); position: relative; border-radius: var(--radius-card); background: linear-gradient(color-mix(in oklab, var(--glint) 32%, transparent), transparent 18%), color-mix(in oklab, var(--t) 62%, transparent); box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -24px 36px -28px color-mix(in oklab, var(--t) 45%, var(--color-ink)); }

/* Captures: the real screen, unframed, at a phone's radius */
.capture { margin: 0; display: grid; gap: var(--space-sm); justify-items: center; }
.capture img { width: 100%; max-width: 340px; aspect-ratio: 9 / 20; object-fit: cover; object-position: top; border-radius: 28px; box-shadow: var(--shadow-lift), 0 0 0 1px color-mix(in oklab, var(--color-ink) 10%, transparent); background: var(--color-paper); }
.capture figcaption { font-size: var(--text-sm); color: var(--color-muted); max-width: 36ch; text-align: center; }

/* Hero, Stage */
.hero { padding-block: var(--space-2xl); }
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: calc(100dvh - var(--bar-height) - 40px - var(--space-2xl) * 2); }
.hero h1 { font-size: var(--text-display-s); margin-block-end: var(--space-lg); }
.hero .lead { margin-block-end: var(--space-xl); color: var(--color-ink-2); }
.hero-visual { position: relative; padding: var(--space-2xl) var(--space-xl); display: grid; justify-items: center; }
.hero-visual .capture img { max-width: 300px; }
.hero-visual .label { position: absolute; inset-inline-start: var(--space-md); inset-block-end: var(--space-3xl); }

/* A pharmacy label: paper on plastic */
.label { --stub: var(--space-md); width: 15rem; padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + var(--stub)); background: var(--light) var(--grain); border-radius: var(--radius-input); box-shadow: var(--shadow-card); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-ink); display: grid; gap: var(--space-2xs); position: relative; }
.label::before { content: ""; position: absolute; inset-block: var(--space-sm); inset-inline-start: var(--stub); border-inline-start: 1px dashed var(--color-rule); }
.label b { font-family: var(--font-body); font-weight: 500; font-size: var(--text-md); }
.label .time { font-size: var(--text-xl); }
.stamp { justify-self: start; margin-block-start: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border: 2px solid var(--color-accent); outline: 1px solid var(--color-accent); outline-offset: 2px; border-radius: 6px; color: var(--color-accent-deep); transform: rotate(-2deg); font-weight: 500; }
.stamp--grey { border-color: var(--color-muted); outline-color: var(--color-muted); color: var(--color-muted); }

/* Sections */
.section { padding-block: var(--section-gap-s); }
.section--l { padding-block: var(--section-gap); }
.head { display: grid; gap: var(--space-md); margin-block-end: var(--space-2xl); }
.head .lead { color: var(--color-ink-2); }

/* The voice then the bell, as plastic bands */
.bands { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.bands li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding: var(--space-xl) var(--space-xl); }
.bands li:nth-child(1) { --t: var(--p-wed); } .bands li:nth-child(2) { --t: var(--p-tue); } .bands li:nth-child(3) { --t: var(--p-thu); }
.bands time { font-family: var(--font-outlier); font-size: var(--text-section); line-height: 1; font-variant-numeric: tabular-nums; }
.bands h3 { font-size: var(--text-title); }
.bands p { font-size: var(--text-lead); color: var(--color-ink-2); }

/* Split: words beside a capture */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.split--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.split--flip > .capture { order: -1; }
.split .tray { padding: var(--space-2xl) var(--space-xl); display: grid; justify-items: center; }
.split .head { margin-block-end: var(--space-xl); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.facts li { padding-block-start: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); }
.note { color: var(--color-muted); font-size: var(--text-sm); margin-block-start: var(--space-md); }

/* Privacy as labels */
.labels { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.labels .pair { display: flex; flex-wrap: wrap; gap: var(--space-xl); justify-content: center; padding: var(--space-3xl) var(--space-xl); --t: var(--p-fri); }
.labels .label { width: 14rem; }
.labels .label small { font-family: var(--font-body); color: var(--color-muted); }

/* Questions as rows */
.rows { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.rows dl { margin: 0; }
.rows dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); letter-spacing: var(--tracking-display); padding-block-start: var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); }
.rows dd { margin: var(--space-xs) 0 var(--space-lg); color: var(--color-ink-2); max-width: 60ch; }
.rows dd a { color: var(--color-accent-deep); }

/* Posts as an index */
.index { list-style: none; margin: 0; padding: 0; display: grid; }
.index li { border-block-start: var(--rule-hair) solid var(--color-rule); }
.index a { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: var(--gap-columns); padding-block: var(--space-lg); text-decoration: none; align-items: baseline; }
.index :is(h2, h3) { font-size: var(--text-title); margin: 0; }
.index a:hover :is(h2, h3) { color: var(--color-accent-deep); text-decoration: underline; }
.index a:focus-visible { outline-offset: 4px; }
.index p { color: var(--color-muted); margin-block-start: var(--space-xs); }
.index time { color: var(--color-muted); font-size: var(--text-sm); justify-self: end; }

/* Close: the download beside one last screen */
.band { background: var(--color-paper-2); }
.band .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* Footer: a letter close */
.foot { padding-block: var(--space-3xl) var(--space-2xl); border-block-start: var(--rule-hair) solid var(--color-rule); }
.foot .container { display: grid; gap: var(--space-xl); }
.foot .signoff { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: var(--tracking-display); max-width: 28ch; }
.foot .signoff span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-md); letter-spacing: 0; color: var(--color-muted); margin-block-start: var(--space-xs); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot nav a { color: var(--color-ink-2); padding-block: var(--space-2xs); }
.foot nav a:hover { color: var(--color-accent-deep); }
.foot small { color: var(--color-muted); }

/* Documents: guide, privacy, terms, posts */
.doc-head { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-paper-2); border-block-end: var(--rule-hair) solid var(--color-rule); }
.doc-head h1 { font-size: var(--text-display-s); max-width: 24ch; }
.doc-head p { margin-block-start: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 60ch; }
.doc-head time { display: block; margin-block-start: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.doc { padding-block: var(--space-2xl) var(--section-gap-s); }
.prose { max-width: 70ch; line-height: 1.72; }
.prose > * + * { margin-block-start: var(--space-md); }
.prose h1 { display: none; }
.prose h2 { font-size: var(--text-2xl); max-width: 32ch; margin-block-start: var(--space-2xl); line-height: 1.2; }
.prose h3 { font-size: var(--text-xl); margin-block-start: var(--space-xl); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-block-start: var(--space-2xs); }
.prose li > ul { margin-block-start: var(--space-2xs); }
.prose a { color: var(--color-accent-deep); }
.prose strong { font-weight: 500; color: var(--color-ink); background: color-mix(in oklab, var(--color-accent-soft) 45%, transparent); padding-inline: 0.15em; border-radius: 3px; }
.prose blockquote { margin-inline: 0; padding: var(--space-md) var(--space-lg); background: var(--color-paper-3); border-radius: var(--radius-input); }
.table-scroll { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.5; }
.prose th, .prose td { text-align: start; vertical-align: top; padding: var(--space-sm) var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule); }
.prose th { font-weight: 500; white-space: nowrap; }
.prose .fill, .fill { color: var(--color-muted); outline: 1px dashed var(--color-muted); outline-offset: 2px; border-radius: 3px; padding-inline: 0.2em; }
.post-cta { margin-block-start: var(--space-3xl); padding: var(--space-xl); display: grid; gap: var(--space-md); max-width: 70ch; --t: var(--p-thu); }
.post-cta h2 { font-size: var(--text-2xl); }

/* The language chooser at the root */
.choose { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-2xl) 0; }
.choose ul { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.choose a { display: block; padding: var(--space-md) var(--space-lg); text-decoration: none; font-size: var(--text-lead); }
.choose a:hover { background: var(--color-paper-3); }

@media (max-width: 60rem) {
  .hero .container, .split, .split--flip, .band .split, .labels, .rows { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; }
  .split--flip > .capture { order: 0; }
  .bands li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-lg); }
  .hero-visual .label { position: static; margin-block-start: calc(var(--space-2xl) * -1); }
  .index a { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .index time { justify-self: start; }
}
@media (max-width: 40rem) {
  .bar nav a.link { display: none; }
  .wordmark span { display: none; }
  .choose ul { grid-template-columns: minmax(0, 1fr); }
}