/* meds — THE DISPENSARY. visual-design.md is the source of truth; this file
   implements its §09 token sheet verbatim (A/B/C) then adds the screen
   layout visual-design.md left to "whatever ui-guide.md gets written"
   (§04's own words) — there is no separate ui-guide.md for this app, so
   that layer lives here, following the same locked spine (square corners,
   2px black rules, 8px grid, hard block shadow, stencil + mono type, no
   gradients outside the two named exceptions).
   Pico v2 is loaded from CDN in index.html BEFORE this file. */

/* ===================================================================== */
/* A. Locked :root tokens (visual-design.md §09.A)                       */
/* ===================================================================== */
:root {
  --manila: #D8C79C; --gauze: #F3EFE4; --kraft: #B4926A; --stencil-black: #1B1A16; --ash: #8A8478;
  --iodine: #C1440E; --triage-red: #D5241C; --cold-chain-blue: #1C5A82; --quinine-yellow: #E7B923; --gentian-violet: #6B3FA0;
  --border: 2px solid var(--stencil-black); --radius: 0; --unit: 8px; --shadow-block: 4px 4px 0 var(--stencil-black);
  --font-display: 'Barlow Condensed','Archivo Narrow',system-ui,sans-serif;
  --font-body: 'Courier Prime','IBM Plex Mono',ui-monospace,monospace;
  --font-note: 'Caveat',cursive; /* max 2 uses/page */
  --snap: 120ms linear;
}

/* ===================================================================== */
/* B. Pico v2 overrides (visual-design.md §09.B)                         */
/* ===================================================================== */
:root {
  --pico-background-color: var(--manila);
  --pico-color: var(--stencil-black);
  --pico-h1-color: var(--stencil-black);
  --pico-h2-color: var(--stencil-black);
  --pico-h3-color: var(--stencil-black);
  --pico-muted-color: var(--ash);
  --pico-card-background-color: var(--gauze);
  --pico-card-sectioning-background-color: var(--gauze);
  --pico-form-element-background-color: var(--gauze);

  --pico-primary: var(--iodine);
  --pico-primary-hover: var(--iodine);
  --pico-primary-background: var(--iodine);
  --pico-primary-border: var(--stencil-black);
  --pico-primary-inverse: var(--stencil-black);
  --pico-secondary: var(--cold-chain-blue);
  --pico-secondary-background: var(--cold-chain-blue);
  --pico-del-color: var(--triage-red);

  --pico-border-radius: 0;
  --pico-border-width: 2px;
  --pico-border-color: var(--stencil-black);
  --pico-outline-width: 2px;
  --pico-box-shadow: var(--shadow-block);
  --pico-card-box-shadow: var(--shadow-block);

  --pico-font-family: var(--font-body);
  --pico-font-family-sans-serif: var(--font-body);
  --pico-font-family-monospace: var(--font-body);
  --pico-line-height: 1.5;
  --pico-spacing: calc(var(--unit) * 2);

  --pico-primary-focus: var(--cold-chain-blue); /* solid — never a halo */
}

h1, h2, h3, h4, .nav-title strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-weight: 700;
}
mark, .hl { background: var(--quinine-yellow); color: var(--stencil-black); padding: 0 .2em; }
a { color: var(--iodine); text-underline-offset: 3px; text-decoration-thickness: 3px; }
a:visited { color: var(--cold-chain-blue); }

* { box-sizing: border-box; }
body {
  background-color: var(--manila);
  /* Material grain (visual-design.md §01/§05's one texture exception,
     ≤6% opacity), synthesized as an SVG fractal-noise data URI so no binary
     asset is needed — same visual effect as a manila-fiber scan tile. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
  min-height: 100vh;
  margin: 0;
}
[x-cloak] { display: none !important; }

/* ===================================================================== */
/* C. Ready component classes (visual-design.md §09.C)                   */
/* ===================================================================== */

.plate { background: var(--gauze); border: var(--border); border-radius: 0; box-shadow: var(--shadow-block); padding: calc(var(--unit) * 2); }

.tag-plate {
  position: absolute; top: -1px; left: -1px; padding: 2px 6px;
  font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em;
  color: var(--gauze); background: var(--stencil-black); border: var(--border);
}

@keyframes stamp-in { 0% { opacity: 0; transform: rotate(-6deg) scale(1.15); } 100% { opacity: 1; transform: rotate(-2deg) scale(1); } }
.stamp {
  display: inline-block; font: 700 13px/1 var(--font-display);
  text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px;
  border: 3px solid currentColor; border-radius: 0;
  transform: rotate(-2deg); background: transparent; color: var(--stencil-black);
  animation: stamp-in 130ms steps(3, end) both;
}
.stamp--critical { color: var(--triage-red); }
.stamp--caution  { color: var(--stencil-black); border-color: var(--stencil-black); background: var(--quinine-yellow); }

.alert-strip {
  position: sticky; top: 0; z-index: 60;
  background: var(--triage-red); color: var(--gauze); border-bottom: var(--border);
  font: 700 12px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  padding: var(--unit) calc(var(--unit) * 1.5);
  display: flex; align-items: center; gap: var(--unit); flex-wrap: wrap;
}

.caution-tape {
  border: var(--border); border-radius: 0; color: var(--stencil-black);
  font: 600 12px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .06em;
  padding: var(--unit) calc(var(--unit) * 1.5);
  background-image: repeating-linear-gradient(45deg, var(--quinine-yellow) 0 14px, var(--stencil-black) 14px 28px);
  background-color: var(--quinine-yellow);
}
.caution-tape > * { background: var(--quinine-yellow); padding: 2px 6px; }

.data-plate {
  font: 500 11px/1.5 var(--font-body); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ash); background: var(--kraft); border: var(--border);
  padding: var(--unit) calc(var(--unit) * 1.5); display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 1.5);
}
.data-plate b { color: var(--stencil-black); font-weight: 700; }

/* ---- badges (visual-design.md §01 STATUS -> STAMP mapping, LOCKED) ---- */
.badge-critical, .badge-monitor, .badge-stable, .badge-unknown {
  display: inline-block; border: var(--border); border-radius: 0;
  padding: 2px 6px; font-family: var(--font-body); font-weight: 700;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.badge-critical { background: var(--triage-red);     color: var(--gauze); }
.badge-monitor  { background: var(--quinine-yellow); color: var(--stencil-black); }
.badge-stable   { background: var(--gauze);          color: var(--stencil-black); }
.badge-unknown  { background: var(--ash);            color: var(--stencil-black); }

/* ===================================================================== */
/* Layout — site plate, tab nav, screens                                 */
/* ===================================================================== */

.site-plate {
  background: var(--kraft); border-bottom: var(--border);
  padding: var(--unit) calc(var(--unit) * 2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--unit);
  position: sticky; top: 0; z-index: 70;
}
.site-plate .wordmark {
  font-family: 'Big Shoulders Stencil', var(--font-display);
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: 18px; color: var(--stencil-black);
}
.signer-chip {
  width: 14px; height: 14px; border: var(--border); background: var(--gauze); flex-shrink: 0;
}
.signer-chip.live { background: var(--cold-chain-blue); }
.site-plate .identity {
  display: flex; align-items: center; gap: calc(var(--unit) / 2);
  font: 600 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
}

.tab-buttons {
  display: flex; overflow-x: auto; border-bottom: var(--border); background: var(--gauze);
  position: sticky; top: 49px; z-index: 65;
}
.tab-buttons [role=tab] {
  flex: 0 0 auto; padding: calc(var(--unit) * 1.25) calc(var(--unit) * 1.5);
  font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  letter-spacing: .04em; font-size: 13px; background: none; border: none;
  border-right: 2px solid var(--stencil-black); color: var(--stencil-black); cursor: pointer;
}
.tab-buttons [role=tab][aria-selected=true] { background: var(--iodine); color: var(--gauze); }
.tab-buttons [role=tab]:last-child { border-right: none; }

main.screen { max-width: 720px; margin: 0 auto; padding: calc(var(--unit) * 2) calc(var(--unit) * 1.5) calc(var(--unit) * 6); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--unit); margin: calc(var(--unit) * 3) 0 var(--unit); }
.section-head > span { font: 700 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ash); }

.knolled-list { display: flex; flex-direction: column; border: var(--border); background: var(--gauze); box-shadow: var(--shadow-block); }
.knolled-row {
  display: flex; align-items: center; gap: calc(var(--unit) * 1.5);
  padding: var(--unit) calc(var(--unit) * 1.5); border-bottom: 2px solid var(--stencil-black);
}
.knolled-row:last-child { border-bottom: none; }
.knolled-row .row-main { flex: 1; min-width: 0; }
.knolled-row .row-name { font: 700 14px var(--font-body); }
.knolled-row .row-sub { font: 12px var(--font-body); color: var(--ash); margin-top: 2px; }

.case-card {
  position: relative; margin-top: calc(var(--unit) * 1.5);
  padding-top: calc(var(--unit) * 2.5);
}
.case-card .case-header {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  font-size: 18px; margin: 0 0 calc(var(--unit) / 2);
}
.case-card:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--stencil-black); }

.log-row { display: flex; gap: calc(var(--unit) * 1.5); align-items: baseline; padding: var(--unit) 0; border-bottom: 1px solid var(--kraft); }
.log-row .data-label { font: 600 11px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ash); flex: 0 0 auto; }
.log-row .log-main { font: 13px var(--font-body); flex: 1; }

.formulary-row { display: flex; align-items: center; gap: var(--unit); padding: var(--unit) calc(var(--unit) * 1.5); border-bottom: 2px solid var(--stencil-black); }
.formulary-row:last-child { border-bottom: none; }

.coverage-card { position: relative; aspect-ratio: 1.586 / 1; max-width: 380px; margin: 0 auto calc(var(--unit) * 2); padding-top: calc(var(--unit) * 2.5); }
.coverage-card img { width: 100%; height: 100%; object-fit: cover; display: block; border: var(--border); }
.coverage-card .no-photo { display: flex; align-items: center; justify-content: center; height: 100%; border: var(--border); background: var(--ash); color: var(--gauze); font: 700 12px var(--font-body); text-transform: uppercase; }

.thumb { width: 44px; height: 44px; object-fit: cover; border: var(--border); cursor: pointer; flex-shrink: 0; }

/* ---- action buttons ---- */
button, [type=button], [type=submit] { font-family: var(--font-body); }
.btn-primary { background: var(--iodine); color: var(--gauze); border: var(--border); box-shadow: var(--shadow-block); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; padding: var(--unit) calc(var(--unit) * 2); transition: transform var(--snap); }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--stencil-black); }
.btn-secondary { background: var(--gauze); color: var(--stencil-black); border: var(--border); box-shadow: var(--shadow-block); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; padding: calc(var(--unit) * .75) calc(var(--unit) * 1.5); }
.btn-danger { background: var(--gauze); color: var(--triage-red); border: 2px solid var(--triage-red); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; padding: calc(var(--unit) * .5) var(--unit); }
.btn-icon { background: none; border: var(--border); width: 32px; height: 32px; cursor: pointer; }

.fab {
  position: fixed; right: calc(var(--unit) * 2); bottom: calc(var(--unit) * 2); z-index: 80;
}

.empty-state { text-align: center; padding: calc(var(--unit) * 4) var(--unit); color: var(--ash); font: 700 13px var(--font-display); text-transform: uppercase; letter-spacing: .04em; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(27,26,22,.6); z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .modal-backdrop { align-items: center; } }
.modal-sheet { background: var(--gauze); border: var(--border); border-bottom: none; box-shadow: var(--shadow-block); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: calc(var(--unit) * 2); }
@media (min-width: 640px) { .modal-sheet { border-bottom: var(--border); } }
.photo-viewer img { width: 100%; height: auto; display: block; border: var(--border); }

.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: calc(var(--unit) * 2); }
.login-shell .plate { max-width: 420px; width: 100%; }

/* ---- Reskin nostr-universal's NostrLoginUI onto DISPENSARY tokens.
   Every --nui-* var the library actually reads (confirmed via source
   grep, not guessed) gets a token here — leaving one on its dark default
   is how a reskin ends up with stray dark-theme buttons on a light card. */
.login-shell {
  --nui-bg: var(--gauze); --nui-card: var(--gauze); --nui-card-hover: var(--kraft);
  --nui-border: var(--stencil-black);
  --nui-text: var(--stencil-black); --nui-muted: var(--ash);
  --nui-primary: var(--iodine); --nui-primary-hover: var(--iodine);
  --nui-error: var(--triage-red); --nui-success: var(--cold-chain-blue);
}