/* The Livewell Syndicate · requisition label tool · light mode utility styling
   Follows Design system v0.3 (23 September 2026): 14 tokens, Cormorant + Inter,
   7px component rhythm, fixed radii ladder, 65% floor, one primary button per view. */

@font-face { font-family:'Cormorant'; src:url('fonts/Cormorant-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant'; src:url('fonts/Cormorant-Italic.woff2') format('woff2');  font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Regular.woff2') format('woff2');  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Medium.woff2') format('woff2');   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  /* tokens, light mode */
  --forest:#2C3E35; --teal-deep:#233229; --teal:#344A3F;
  --signal:#D4E8B0; --mint-kiss:#E2F0C8; --mint:#C7DFA0;
  --snow:#F3F3F3; --canvas:#FFFEFC; --ink:#222222; --charcoal:#333333; --floor:#666666;
  --hairline:rgba(44,62,53,.22);
  --display:'Cormorant','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
  /* 7px rhythm */
  --s1:7px; --s2:14px; --s3:21px; --s4:28px; --s5:35px; --s6:42px; --s8:56px;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:400 1rem/1.55 var(--body); color:var(--ink); background:var(--canvas); }
body.centred { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--s4) var(--s2); }

/* type */
h1, h2 { font-family:var(--display); font-weight:400; letter-spacing:-.02em; line-height:1.08; margin:0 0 var(--s2); color:var(--forest); }
h1 { font-size:clamp(2rem, 3.4vw, 2.6rem); }
h2 { font-size:clamp(1.5rem, 2.4vw, 1.9rem); }
h1 em, h2 em { font-style:italic; text-decoration:underline; text-decoration-color:var(--mint); text-underline-offset:.14em; text-decoration-thickness:1px; }
.eyebrow { font:600 .72rem/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal); margin:0 0 var(--s1); }
.lead, .muted { color:var(--charcoal); }
.muted { font-size:.92rem; }
.small { font-size:.82rem; color:var(--floor); }
strong, b { font-weight:600; }
code { font:400 .9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--snow); padding:2px 6px; border-radius:6px; }
a { color:var(--forest); text-decoration:underline; text-decoration-color:var(--mint); text-underline-offset:.14em; }
a:hover { text-decoration-color:var(--forest); }

/* header bar */
.bar { display:flex; justify-content:space-between; align-items:center; gap:var(--s2); flex-wrap:wrap;
       padding:var(--s2) var(--s3); background:var(--canvas); border-bottom:1px solid var(--hairline); }
.bar .wordmark { font-family:var(--display); font-size:1.35rem; color:var(--forest); text-decoration:none; letter-spacing:-.01em; }
.bar .wordmark span { color:var(--charcoal); font-family:var(--body); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-left:var(--s2); }
.bar nav { font-size:.92rem; color:var(--charcoal); display:flex; gap:var(--s1); align-items:center; flex-wrap:wrap; }
.bar nav a { text-decoration:none; padding:5px 11px; border-radius:999px; border:1px solid transparent; }
.bar nav a:hover { border-color:var(--hairline); background:var(--snow); }
.bar nav .who { margin-right:var(--s1); }

/* surfaces */
main.card, form.card, div.card { background:var(--canvas); border:1px solid var(--hairline); border-radius:14px;
       max-width:56rem; margin:var(--s4) auto; padding:var(--s4); }
.card.narrow { max-width:26rem; width:100%; }
.panel { background:var(--snow); border-radius:14px; padding:var(--s3); }
fieldset { border:1px solid var(--hairline); border-radius:14px; margin:0 0 var(--s3); padding:var(--s3); }
legend { font:600 .72rem/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal); padding:0 var(--s1); }

/* forms */
label { display:block; margin:0 0 var(--s2); font-weight:500; color:var(--charcoal); font-size:.92rem; }
input, select { display:block; width:100%; margin-top:var(--s1); padding:10px 12px; font:400 1rem var(--body); color:var(--ink);
                background:var(--canvas); border:1px solid var(--hairline); border-radius:12px; }
input:focus, select:focus, button:focus, a:focus { outline:2px solid var(--forest); outline-offset:2px; }
input::placeholder { color:var(--floor); }
.grid { display:grid; gap:0 var(--s2); grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.info { background:var(--snow); border-radius:14px; padding:var(--s2) var(--s3); margin:var(--s2) 0; }
.info p { margin:var(--s1) 0; color:var(--charcoal); font-size:.92rem; }
.error { display:block; background:var(--snow); border-left:3px solid var(--forest); border-radius:0 14px 14px 0;
         padding:var(--s2) var(--s3); margin:var(--s2) 0; font-weight:600; color:var(--ink); }
ul.errors { list-style:none; margin:0; padding:0; }
ul.errors li { margin:0 0 var(--s1); }

/* buttons: one primary per view; everything else is a light button */
button, .btn { font:500 .95rem var(--body); padding:11px 21px; border-radius:999px; cursor:pointer; text-decoration:none;
               display:inline-block; transition:transform 200ms, background 200ms, border-color 200ms; }
button[type="submit"]:not(.light), .btn-primary { background:var(--signal); color:var(--forest); border:1px solid var(--signal); }
button[type="submit"]:not(.light):hover, .btn-primary:hover { background:var(--mint-kiss); transform:translateY(-1px); }
button.light, .btn-light { background:var(--canvas); color:var(--forest); border:1px solid var(--forest); border-radius:8px; padding:7px 14px; font-size:.86rem; }
button.light:hover { background:var(--snow); }
button[disabled] { background:var(--snow); color:var(--floor); border-color:var(--hairline); cursor:not-allowed; transform:none; }
.actions { display:flex; gap:var(--s1); flex-wrap:wrap; align-items:center; margin-top:var(--s2); }
.inline { display:inline; }
.inline-field { width:auto; display:inline-block; margin:0 var(--s1) 0 0; padding:7px 12px; font-size:.86rem; border-radius:8px; }
.plain { font-weight:400; }
.check { display:flex; align-items:center; gap:var(--s1); font-weight:400; }
.check input { width:auto; margin:0; }
.check.tall { margin-top:var(--s2); }
textarea { display:block; width:100%; margin-top:var(--s1); padding:10px 12px; font:400 1rem var(--body); color:var(--ink); background:var(--canvas); border:1px solid var(--hairline); border-radius:12px; resize:vertical; }
textarea:focus { outline:2px solid var(--forest); outline-offset:2px; }
.hint { display:block; font-weight:400; font-size:.82rem; color:var(--floor); margin-top:4px; }

/* tables */
table.detail { width:100%; border-collapse:collapse; margin:var(--s3) 0; font-size:.92rem; }
table.detail th, table.detail td { border-bottom:1px solid var(--hairline); padding:9px 11px; text-align:left; vertical-align:top; }
table.detail thead th { font:600 .72rem/1.4 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal); }
table.detail tbody th { font-weight:500; color:var(--charcoal); width:1%; white-space:nowrap; }
table.detail.kv th { width:22%; }

/* requisition sheet (screen preview) */
body.sheet-body { background:var(--snow); }
.sheet { background:#fff; max-width:800px; margin:var(--s3) auto; padding:var(--s4); border:1px solid var(--hairline); border-radius:14px; }
.sheet-head { display:flex; justify-content:space-between; gap:var(--s2); align-items:flex-start; border-bottom:1px solid var(--forest); padding-bottom:var(--s2); }
.sheet-head h1 { font-size:1.9rem; margin:0 0 4px; }
.ref-box { text-align:right; }
.ref-label { display:block; font:600 .72rem/1.4 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal); }
.ref { font-family:var(--body); font-size:1.35rem; font-weight:500; letter-spacing:.04em; color:var(--ink); }
.qr-wrap { text-align:center; margin:var(--s3) 0; }
#qr img { display:inline-block; width:45mm; height:45mm; image-rendering:pixelated; }
.no-print.bar { justify-content:flex-start; gap:var(--s2); }

@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }
@media (max-width:600px) { main.card, form.card, div.card { margin:var(--s2); padding:var(--s3); } .bar { padding:var(--s2); } }

/* analytics */
main.card.wide { max-width:72rem; }
.stats { display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); margin:var(--s3) 0; }
.stat { font-family:var(--display); font-size:2.2rem; line-height:1; margin:var(--s1) 0; color:var(--forest); }
.two { display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.two h2 { font-size:1.35rem; margin-top:var(--s1); }
.row { display:flex; justify-content:space-between; gap:var(--s2); font-size:.9rem; margin-top:var(--s1); }
.bar-track { height:6px; background:rgba(44,62,53,.12); border-radius:999px; overflow:hidden; margin:4px 0 var(--s1); }
.bar-fill { height:100%; width:0; background:var(--forest); border-radius:999px; }
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}.w100{width:100%}