/* app.yesunclinic.com: site.css
   Token system per site/spec: light is the authored default (a dispensing
   bench), dark is the app's own AppColors tokens verbatim. No third hue. */

:root {
  --bench: #D8DBD6;
  --sheet: #F3F2EC;
  --ink: #1F211B;
  --ink-quiet: #55584F;
  --mark: #1F6B24;
  --mark-hi: #164E1A;
  --rule: #A3A89F;

  --plate-bg: #1F211B;
  --plate-ink: #E8E6DE;
  --plate-quiet: #9B9A93;
  --plate-mark: #42B348;
  /* Scheme-independent: 3.75:1 on the light sheet, 3.51:1 on the lifted dark
     sheet, 3.87:1 / 4.41:1 against the two plate fills. One value clears
     3:1 everywhere the plate border can appear. */
  --plate-edge: #7C7C75;
  --plate-rule: #41433C;

  --face-text: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
    "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", system-ui,
    "Segoe UI", Roboto, sans-serif;
  --face-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "DejaVu Sans Mono", monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-sheet: 12px;
  --r-callout: 8px;
  --r-plate: 2px;
  --r-photo: 0;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bench: #12140F;
    --sheet: #262922;
    --ink: #E8E6DE;
    --ink-quiet: #9B9A93;
    --mark: #42B348;
    --mark-hi: #6ECB72;
    --rule: #4A4C44;
    --plate-bg: #12140F;
  }
}

:root[data-theme="dark"] {
  --bench: #12140F;
  --sheet: #262922;
  --ink: #E8E6DE;
  --ink-quiet: #9B9A93;
  --mark: #42B348;
  --mark-hi: #6ECB72;
  --rule: #4A4C44;
  --plate-bg: #12140F;
}

* { box-sizing: border-box; }

html {
  background: var(--bench);
}

body {
  margin: 0;
  background: var(--bench);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: 17px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@supports (text-wrap: pretty) {
  h1, h2, h3, p { text-wrap: pretty; }
}

a {
  color: var(--mark);
  transition: color 120ms, border-color 120ms;
}
a:hover, a:focus-visible { color: var(--mark-hi); }

:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
  border-radius: 2px;
}
.plate :focus-visible { outline-color: var(--plate-mark); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

.skip-link {
  position: absolute;
  left: var(--s3);
  top: -48px;
  background: var(--sheet);
  color: var(--ink);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--r-callout);
  z-index: 100;
  transition: top 120ms;
}
.skip-link:focus-visible { top: var(--s3); }

.num {
  font-family: var(--face-num);
  font-variant-numeric: tabular-nums;
}

/* ---- shell ---------------------------------------------------------- */

.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding-bottom: var(--s4);
  font-size: 13px;
}

.back-link {
  color: var(--ink-quiet);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.back-link:hover, .back-link:focus-visible { border-color: currentColor; }
.back-link::before { content: "\2190\a0"; white-space: pre; }

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-sheet);
  padding: var(--s5);
}

@media (max-width: 759px) {
  .shell { padding: var(--s4) 0 var(--s6); }
  .topbar { padding: 0 var(--s4) var(--s4); }
  .sheet { border-radius: 0; border-left: none; border-right: none; padding: var(--s4); }

  /* The app page has no top-level .sheet around its hero column, so unlike
     every other page it gets no gutter for free from .sheet's own padding.
     Give the shell one directly, and cancel the topbar's own gutter so it
     isn't doubled. */
  .shell.app { padding-inline: var(--s4); }
  .shell.app .topbar { padding-inline: 0; }

  /* Touch targets: 44px minimum (WCAG 2.2 SC 2.5.8). These sit inline in a
     running line (often "a · b · c"), so the padding is offset by an equal
     negative margin: the interactive box grows without pushing the line's
     own height or rewrapping the separators around it. */
  .crosslinks a, .err-list a, .back-link {
    display: inline-block;
    padding-block: 13px;
    margin-block: -13px;
  }
  details.clause-toggle summary {
    padding: var(--s3) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .detail-list li { margin-block: var(--s1); }
  .detail-list a { display: block; padding-block: var(--s3); }
}

/* ---- type ------------------------------------------------------------ */

h1 { font-size: 30px; line-height: 1.28; letter-spacing: -0.01em; font-weight: 700; margin: 0 0 var(--s3); }
@media (min-width: 720px) { h1 { font-size: 38px; } }
h2 { font-size: 23px; line-height: 1.40; font-weight: 700; margin: var(--s6) 0 var(--s3); }
h3 { font-size: 19px; line-height: 1.45; font-weight: 700; margin: var(--s5) 0 var(--s2); }
.lede { font-size: 19px; line-height: 1.75; }
p { margin: 0 0 var(--s4); }

.eyebrow, .meta, .caption, label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-quiet);
}
.eyebrow { letter-spacing: 0.04em; }
.eyebrow .lat { letter-spacing: 0.14em; }

.doc .sheet, .prose { max-width: 42rem; }
.app-prose { max-width: 34rem; }
/* The prose column inside .app-body should stay a measured column, but the
   two full-width rules and the crosslinks row should span the whole sheet
   so the lower page reads as one frame, not a narrow strip beside a void. */
.app-prose.app-body { max-width: none; }
.app-body > :not(hr):not(.crosslinks) { max-width: 34rem; }
.app-body > hr.rule { margin-inline: 0; }

.display .l { display: block; }
/* The app hero lede is authored the same way, but only breaks into its
   meaning-unit lines from the desktop breakpoint up; on a phone it wraps
   normally. */
.lede.display .l { display: inline; }
@media (min-width: 1000px) {
  .lede.display .l { display: block; }
}

/* ---- footer / cross links -------------------------------------------- */

.crosslinks {
  font-size: 13px;
  color: var(--ink-quiet);
}
.crosslinks a { color: var(--ink-quiet); }
.crosslinks a:hover, .crosslinks a:focus-visible { color: var(--mark-hi); }

.site-footer {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-quiet);
}

hr.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--s6) 0;
}

/* ---- callout ----------------------------------------------------------- */

.callout {
  border: 1px solid var(--rule);
  border-radius: var(--r-callout);
  padding: var(--s4);
  margin: var(--s5) 0;
}
.callout.clause {
  border: none;
  border-left: 2px solid var(--rule);
  border-radius: 0;
  padding: 0 0 0 var(--s4);
}

/* ---- plate --------------------------------------------------------------
   Always the darkest object on the page, in both schemes. In dark scheme
   its fill ties the bench (both at the floor of the palette) and is set
   apart only by --plate-edge; in light and against any sheet it is always
   strictly darker. */

.plate {
  background: var(--plate-bg);
  color: var(--plate-ink);
  border: 1px solid var(--plate-edge);
  border-radius: var(--r-plate);
  padding: 0;
  margin: var(--s6) 0;
  transition: border-color 120ms;
}
.plate-head {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--plate-quiet);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--plate-rule);
}
.plate dl {
  margin: 0;
  padding: var(--s2) var(--s4);
}
.plate .row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--plate-rule);
}
.plate .row:last-child { border-bottom: none; }
.plate dt {
  font-size: 13px;
  color: var(--plate-quiet);
  flex: 0 0 auto;
}
.plate dd {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--plate-ink);
  text-align: right;
}
.plate a { color: var(--plate-mark); }

/* ---- images ------------------------------------------------------------ */

img { max-width: 100%; height: auto; }
.shot {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--r-photo);
}
/* A photograph's bed: tokenised (no hardcoded hex), never rounded (anything
   touching a photograph is square), and toned to the sheet it sits on so it
   reads as a discrete surface on the bench but blends when it is already
   nested inside a sheet card (the support-page screenshots). */
.mat-bed {
  background: var(--sheet);
  padding: var(--s5);
  border-radius: var(--r-photo);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.mat-bed .shot { border: 1px solid var(--rule); max-width: 320px; width: 100%; }
figcaption { font-size: 13px; color: var(--ink-quiet); margin-top: var(--s2); }
figure { margin: 0 0 var(--s5); }

/* ---- hub ----------------------------------------------------------------- */

.hub-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 1000px) {
  .hub-layout { grid-template-columns: 280px 1fr; align-items: start; }
  .hub-rail { position: sticky; top: var(--s5); }
}
.hub-rail .sheet { display: flex; flex-direction: column; gap: var(--s4); }
.hub-main .sheet { max-width: 760px; }
.hub-main .sheet > h1, .hub-main .sheet > p { max-width: 34rem; }

.hub-rail-desktop { display: none; }
.hub-inline-identity, .hub-inline-footer { display: block; }
@media (min-width: 1000px) {
  .hub-rail-desktop { display: block; }
  .hub-inline-identity, .hub-inline-footer { display: none; }
}
.name-en { color: var(--ink-quiet); }

.shelf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.shelf-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--rule);
}
.shelf-row img { border-radius: var(--r-callout); }
.shelf-row .name-en { color: var(--ink-quiet); }
.shelf-pending {
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  color: var(--ink-quiet);
  font-size: 13px;
}

/* ---- app page ------------------------------------------------------------ */

.app-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 1000px) {
  .app-layout { grid-template-columns: minmax(0, 620px) 460px; align-items: start; }
  /* Source order is info-column first, hero second (so a phone reads the
     headline before a full screen of photograph); place them back into
     hero-left / info-right visually from the desktop breakpoint up. */
  .app-hero-col { grid-column: 1; grid-row: 1; position: sticky; top: var(--s5); }
  .app-info-col { grid-column: 2; grid-row: 1; }
}
.app-info-col .plate { margin-top: var(--s5); }
.pending-note { font-size: 13px; color: var(--ink-quiet); }

/* ---- clause rail (privacy / support / terms) ------------------------------ */

.doc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 1000px) {
  .doc-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .clause-rail { position: sticky; top: var(--s5); font-size: 13px; }
  .clause-rail-inline { display: none; }
}
.clause-rail { display: none; }
.clause-rail ol { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.clause-rail li { margin: 0 0 var(--s1); }
.clause-rail a {
  display: block;
  padding: var(--s1) var(--s2) var(--s1) calc(var(--s2) + 1.6em);
  text-indent: -1.6em;
  color: var(--ink);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.clause-rail a:hover, .clause-rail a:focus-visible { color: var(--mark-hi); }
/* Replaces a <h3> that used to precede the page's own <h1> in the heading
   outline; a plain, hidden-from-the-tree label reads the same visually
   without inserting a heading above <h1>. */
.clause-rail .rail-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-quiet);
  margin: var(--s5) 0 var(--s2);
}
.clause-rail .rail-label:first-child { margin-top: 0; }
:target { scroll-margin-top: var(--s4); }
h2:target, h3:target { color: var(--mark); }

@media (min-width: 1000px) {
  .clause-rail { display: block; }
}

/* The :target notch on the privacy page's clause rail. The id set is fixed
   by site/tools/import_policy.py's clause-number validator (1, 2, 2-1, 3,
   3-1..3-4, 4-8, in ko- and en- variants), so it is safe to hand-write here
   rather than inline a generated <style> block, which the CSP's
   style-src 'self' (no 'unsafe-inline') would silently block anyway. */
.doc-layout:has(#ko-1:target) .clause-rail a[href="#ko-1"],
.doc-layout:has(#ko-2:target) .clause-rail a[href="#ko-2"],
.doc-layout:has(#ko-2-1:target) .clause-rail a[href="#ko-2-1"],
.doc-layout:has(#ko-3:target) .clause-rail a[href="#ko-3"],
.doc-layout:has(#ko-3-1:target) .clause-rail a[href="#ko-3-1"],
.doc-layout:has(#ko-3-2:target) .clause-rail a[href="#ko-3-2"],
.doc-layout:has(#ko-3-3:target) .clause-rail a[href="#ko-3-3"],
.doc-layout:has(#ko-3-4:target) .clause-rail a[href="#ko-3-4"],
.doc-layout:has(#ko-4:target) .clause-rail a[href="#ko-4"],
.doc-layout:has(#ko-5:target) .clause-rail a[href="#ko-5"],
.doc-layout:has(#ko-6:target) .clause-rail a[href="#ko-6"],
.doc-layout:has(#ko-7:target) .clause-rail a[href="#ko-7"],
.doc-layout:has(#ko-8:target) .clause-rail a[href="#ko-8"],
.doc-layout:has(#en-1:target) .clause-rail a[href="#en-1"],
.doc-layout:has(#en-2:target) .clause-rail a[href="#en-2"],
.doc-layout:has(#en-2-1:target) .clause-rail a[href="#en-2-1"],
.doc-layout:has(#en-3:target) .clause-rail a[href="#en-3"],
.doc-layout:has(#en-3-1:target) .clause-rail a[href="#en-3-1"],
.doc-layout:has(#en-3-2:target) .clause-rail a[href="#en-3-2"],
.doc-layout:has(#en-3-3:target) .clause-rail a[href="#en-3-3"],
.doc-layout:has(#en-3-4:target) .clause-rail a[href="#en-3-4"],
.doc-layout:has(#en-4:target) .clause-rail a[href="#en-4"],
.doc-layout:has(#en-5:target) .clause-rail a[href="#en-5"],
.doc-layout:has(#en-6:target) .clause-rail a[href="#en-6"],
.doc-layout:has(#en-7:target) .clause-rail a[href="#en-7"],
.doc-layout:has(#en-8:target) .clause-rail a[href="#en-8"] {
  border-left-color: var(--mark);
  color: var(--ink);
}

details.clause-toggle { margin: var(--s4) 0; }
details.clause-toggle summary {
  cursor: pointer;
  color: var(--mark);
  font-size: 13px;
}
@media (min-width: 1000px) {
  details.clause-toggle { display: none; }
}

.lang-jump { font-size: 13px; margin: 0 0 var(--s4); }

.lang-block-head { font-size: 13px; color: var(--ink-quiet); letter-spacing: 0.04em; margin: var(--s6) 0 var(--s2); }
.rail-block-head { font-size: 13px; color: var(--ink-quiet); letter-spacing: 0.04em; margin: var(--s3) 0 var(--s2); }
.detail-list { padding-left: var(--s5); margin: 0; }

/* ---- inline-style utilities (CSP: style-src 'self', no unsafe-inline) --- */

.subtitle-tight { margin-top: calc(-1 * var(--s2)); }
.nav-plain { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.eyebrow-gap { margin-bottom: var(--s2); }
.shelf-name { margin: 0; }
.shelf-func { margin: var(--s2) 0; }
.shelf-note { margin: 0 0 var(--s3); }
.shelf-links { margin: 0; }
.footer-line { margin: 0 0 var(--s2); }
.footer-updated { margin: var(--s2) 0 0; }
.err-shell { max-width: 34rem; margin: 0 auto; }
.app-body { margin-top: var(--s6); }
.callout > p:last-child { margin-bottom: 0; }

/* ---- 404 ------------------------------------------------------------------ */

.err-num {
  font-family: var(--face-num);
  font-variant-numeric: tabular-nums;
  font-size: 38px;
  color: var(--ink-quiet);
  margin: 0 0 var(--s2);
}
.err-list { list-style: none; margin: 0; padding: 0; }
.err-list li { margin: 0 0 var(--s2); }

/* ---- print (privacy) ------------------------------------------------------- */

@media print {
  :root, :root[data-theme="dark"] {
    --bench: #fff;
    --sheet: #fff;
    --ink: #000;
    --ink-quiet: #333;
    --mark: #000;
    --rule: #999;
  }
  body { background: #fff; color: #000; }
  .skip-link, .topbar, .lang-jump, .site-footer { display: none !important; }
  .clause-rail { display: none !important; }
  /* Printed policy keeps a clause list: it replaces the on-screen rail. */
  details.clause-toggle { display: block !important; margin: var(--s4) 0; }
  details.clause-toggle > summary { display: none !important; }
  details.clause-toggle:not([open]) > :not(summary) { display: block !important; }
  .sheet { border: none; padding: 0; max-width: none; }
  .privacy .sheet::after {
    content: "https://app.yesunclinic.com/pillcounter/privacy";
    display: block;
    margin-top: var(--s5);
    font-size: 11px;
    color: #333;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .clause, section.callout { break-inside: avoid; page-break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
}