/* dosing.wiki — reference ledger. Paper, ink, hairline rules. No rounded panels, no glow. */

:root {
  --paper: #f4f2ec;
  --paper-2: #e9e6dd;
  --paper-3: #dcd7cb;
  --ink: #1b1d18;
  --ink-2: #52564d;
  --rule: #cfcabb;
  --accent: #b1462d;      /* clay red: links, marks, fills */
  --accent-ink: #9f3b26;  /* same clay, dark enough to read as text (AA on paper and paper-2) */
  --good: #3d6b4e;
  --warn: #8a6118;
  --bad: #97362c;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* Spacing scale — the only sizes any rule may use. 4px base, 4/8/12/16/24/32. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --gutter: var(--s4);   /* page frame: topbar, disclaimer, main, footer share it */
  --gap: var(--s3);      /* intra-component gap: rows, grids, form fields */
  --pad: var(--s2) var(--s3);  /* one cell: table cell, block quote, badge */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(27, 29, 24, .045) 27px 28px),
    var(--paper);
  color: var(--ink);
  font: 15px/1.55 var(--display);
}

p { margin: 0 0 var(--s3); }

a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid rgba(177, 70, 45, .35); }
a:hover { border-bottom-color: var(--accent); }

/* Tap targets. WCAG 2.5.8 wants 24x24 CSS px for anything you aim at with a
   finger; links sitting inside a sentence are exempt, but nav, table, card, and
   header links are real targets, so they get the room. */
nav a, table a, .card a, .contrib a, #session a, .meta a {
  display: inline-block;
  min-height: 24px;
  min-width: 24px;
}
/* The moderation link is hidden for non-moderators; the display rule above must
   not override that, or a link that should not exist becomes tappable and tabbable. */
[hidden] { display: none !important; }

.topbar {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) var(--gutter); background: var(--paper-2);
  border-bottom: 2px solid var(--ink);
}
.brand {
  font-family: var(--display); font-size: 1.15rem; letter-spacing: .01em;
  color: var(--ink); border-bottom: 0;
}
.brand::after { content: "."; color: var(--accent-ink); }
nav { display: flex; gap: var(--s4); flex-wrap: wrap; font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
nav a { color: var(--ink-2); border-bottom: 0; padding-bottom: var(--s1); }
nav a:hover { color: var(--accent-ink); border-bottom: 1px solid var(--accent); }
nav a.active { color: var(--accent-ink); border-bottom: 2px solid var(--accent); }
.session { margin-left: auto; font-family: var(--mono); font-size: .78rem; color: var(--ink-2); }
.session .role { color: var(--accent-ink); }

.disclaimer {
  padding: var(--s2) var(--gutter); background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: .76rem; line-height: 1.5; color: var(--ink-2);
}

main { padding: var(--gutter); max-width: 1040px; }
footer { padding: var(--gutter); margin-top: var(--s5); border-top: 1px solid var(--rule); font-size: .88rem; color: var(--ink-2); }
code { font-family: var(--mono); font-size: .84em; background: var(--paper-2); padding: 0 var(--s1); border: 1px solid var(--rule); }

h1 { font-size: 1.5rem; margin: 0 0 var(--s3); line-height: 1.25; }
h1::after { content: ""; display: block; width: 64px; height: 2px; background: var(--accent); margin-top: var(--s2); }
h2 {
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2);
  margin: var(--s5) 0 var(--s2); padding-bottom: var(--s1); border-bottom: 1px solid var(--rule);
}
h3 { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin: var(--s4) 0 var(--s2); color: var(--ink-2); }

.grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--rule); background: var(--paper-2); }
.card { padding: var(--pad); border-right: 1px solid var(--rule); background: transparent; }
.card .num { font-family: var(--mono); font-size: 1.35rem; color: var(--accent-ink); }
.card .label { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: var(--pad); border-bottom: 1px solid var(--rule); vertical-align: top; }
th, td { overflow-wrap: anywhere; }
th { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
tbody tr:hover { background: var(--paper-2); }
td.num, th.num { font-family: var(--mono); white-space: nowrap; }

.row { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; margin: var(--s2) 0; }
label { display: block; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-bottom: var(--s1); }
input, select, textarea {
  width: 100%; padding: var(--pad); background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-bottom: 1px solid var(--ink-2); font: inherit; font-size: .92rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Keyboard reachability: every control shows where the focus is, and every
   control is big enough to hit with a finger or a keyboard cursor. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, input, select, textarea { min-height: 24px; }
label { display: flex; flex-direction: column; gap: var(--s1); }
select option { padding: var(--s1) var(--s2); }
textarea { min-height: 110px; font-family: var(--mono); font-size: .86rem; }
button {
  padding: var(--s2) var(--s4); background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
}
button:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
button.secondary { background: transparent; color: var(--ink-2); border: 1px solid var(--rule); }
button.secondary:hover { color: var(--bad); border-color: var(--bad); background: transparent; }
button:disabled { opacity: .5; cursor: not-allowed; }
form.card { display: grid; gap: var(--gap); max-width: 620px; padding: 0; background: transparent; border: 0; }

.badge {
  display: inline-block; font-family: var(--mono); font-size: .72rem;
  padding: var(--s1) var(--s2); border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-2);
}
.badge.pending { color: var(--warn); border-color: var(--warn); }
.badge.approved, .badge.log { color: var(--good); border-color: var(--good); }
.badge.rejected, .badge.flagged, .badge.missed { color: var(--bad); border-color: var(--bad); }
.badge.private { color: var(--accent-ink); border-color: var(--accent); background: transparent; }
.badge.rest { color: var(--ink-2); }

.refused { border-left: 3px solid var(--bad); background: var(--paper-2); padding: var(--pad); margin: var(--s2) 0; }
.warned { border-left: 3px solid var(--warn); background: var(--paper-2); padding: var(--pad); margin: var(--s2) 0; }
.result { border-left: 3px solid var(--accent); background: var(--paper-2); padding: var(--pad); margin: var(--s2) 0; }
.result .big { font-family: var(--mono); font-size: 1.25rem; color: var(--accent-ink); }
.basis { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); margin-top: var(--s2); }

.meter { display: flex; align-items: center; gap: var(--gap); min-width: 150px; }
.meter meter { flex: 1; height: 9px; min-width: 110px; appearance: none; background: var(--paper-3); border: 1px solid var(--ink-2); }
.meter meter::-webkit-meter-bar { background: var(--paper-3); border: none; height: 9px; }
.meter meter::-webkit-meter-optimum-value { background: var(--good); }
.meter meter::-webkit-meter-suboptimum-value { background: var(--warn); }
.meter meter::-webkit-meter-even-less-good-value { background: var(--bad); }
.meter.low meter::-webkit-meter-optimum-value { background: var(--bad); }
.meter.mid meter::-webkit-meter-optimum-value { background: var(--warn); }
.meter .note { white-space: nowrap; }

.contrib { border-left: 3px solid var(--rule); padding: var(--pad); margin: var(--s2) 0; background: var(--paper-2); }
.contrib .meta { font-family: var(--mono); font-size: .76rem; color: var(--ink-2); margin-bottom: var(--s2); }
.contrib .body { white-space: pre-wrap; }
.note { color: var(--ink-2); font-size: .9rem; }
.note.saved { color: var(--good); }
.empty { color: var(--ink-2); font-style: italic; }
.card-top { margin-top: 0; }
/* One consistent frame at every width; the scale itself never changes. */
@media (max-width: 760px) {
  .topbar { padding: var(--s2) var(--s3); gap: var(--s3); }
  .disclaimer, main, footer { padding: var(--s3); }
  h2 { margin-top: var(--s4); }
  .card { border-right: 0; border-bottom: 1px solid var(--rule); }
  .session { margin-left: 0; }
}
.command { font-family: var(--mono); }
.cal-table td.today { background: var(--paper-3); }
a.field-link { font-family: var(--mono); font-size: .84rem; }

/* Mock U-100 syringe. Geometry by attributes, colour by class so CSP stays clean. */
.syringe { margin: var(--s1) 0 var(--s3); }
.syringe svg { width: 232px; height: 72px; display: block; max-width: 100%; }
.syringe .barrel { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.2; }
.syringe .liquid { fill: rgba(177, 70, 45, .18); }
.syringe .meniscus { stroke: var(--accent); stroke-width: 1.4; }
.syringe .plunger { stroke: var(--ink); stroke-width: 2; }
.syringe .plunger-head { fill: var(--ink); }
.syringe .hub { fill: var(--ink-2); }
.syringe .needle { stroke: var(--ink-2); stroke-width: 1.6; }
.syringe .tick { stroke: var(--ink-2); stroke-width: .9; }
.syringe .tick.major { stroke: var(--ink); stroke-width: 1.3; }
.syringe .tick-label { font-family: var(--mono); font-size: 7px; fill: var(--ink-2); }
.syringe .mark-label { font-family: var(--mono); font-size: 10px; font-weight: 600; fill: var(--accent); }
.syringe .cap { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); margin-top: var(--s1); }
.syringe .cap strong { color: var(--accent-ink); }
.syringe.over .liquid { fill: rgba(151, 54, 44, .2); }
.syringe.over .cap { color: var(--bad); }