:root {
  /* Organic Guardians: deep pine green from the wordmark, warm paper, white cards.
     Red is kept for two jobs — withdrawal warnings, and a form refusing to save. */
  --pine: #175243;           /* brand green */
  --pine-deep: #0F3D31;      /* sidebar/hero depths */
  --pine-soft: #1C5F4E;      /* hovers on green */
  --pine-tint: #E3EDE4;      /* green-tinted wells */
  --page: #F8F4EB;           /* warm paper */
  --panel: #175243;          /* sidebar */
  --inset: #F2EDE1;          /* table headers, wells */
  --card: #FFFFFF;
  --offset: #F2EDE1;
  --offset-deep: #E9E2D2;
  --line: #E4DCCB;
  --line-soft: #EDE7D9;
  --ink: #1E2B26;            /* green-black */
  --ink-2: #64726B;
  --ink-3: #98A49D;
  --cream: #FAF6ED;          /* text on green */
  --red: #C43717;            /* the withdrawal stamp — alerts only */
  --red-soft: #D33030;
  --red-tint: #F6E3DB;
  --sage: #DCE8DC;
  --sage-ink: #2F5D46;
  --terra: #E2976E;
  --terra-tint: #F4E4D3;
  --terra-ink: #8F5B33;
  --ochre: #C77E2F;          /* the statement-band block colour */
  --ochre-ink: #123528;      /* deep green text on ochre */
  --btn: #175243;
  --btn-hi: #0F3D31;
  --r-card: 16px;
  --r-ctl: 10px;
  --r-pill: 999px;
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Courier, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 14.5px/1.62 var(--font-ui);
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: #D8E6D9; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C9C0AC; border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- back lights: a slow warm wash, barely there ---------- */
.lights { position: fixed; inset: 0; z-index: -2; background: var(--page); overflow: hidden; }
.lights > div { position: absolute; border-radius: 50%; will-change: transform, opacity; }
.beam {
  width: 1200px; height: 800px; top: -420px; left: 50%; margin-left: -600px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), transparent 70%);
  filter: blur(60px);
  animation: pulse 18s ease-in-out infinite alternate;
}
.orb-a {
  width: 760px; height: 760px; top: -140px; left: -260px;
  background: radial-gradient(closest-side, rgba(23, 82, 67, 0.10), transparent 70%);
  filter: blur(80px);
  animation: drift-a 55s ease-in-out infinite alternate;
}
.orb-b {
  width: 680px; height: 680px; top: 34%; right: -280px;
  background: radial-gradient(closest-side, rgba(220, 232, 220, 0.5), transparent 70%);
  filter: blur(85px);
  animation: drift-b 70s ease-in-out infinite alternate;
}
.orb-c {
  width: 560px; height: 560px; bottom: -260px; left: 22%;
  background: radial-gradient(closest-side, rgba(226, 151, 110, 0.12), transparent 70%);
  filter: blur(85px);
  animation: drift-c 84s ease-in-out infinite alternate;
}
@keyframes pulse   { from { opacity: 0.7; transform: scale(1); } to { opacity: 1; transform: scale(1.05); } }
@keyframes drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(150px, 110px, 0) scale(1.12); } }
@keyframes drift-b { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-160px, -120px, 0) scale(1.08); } }
@keyframes drift-c { from { transform: translate3d(0,0,0) scale(1.04); } to { transform: translate3d(130px, -100px, 0) scale(0.96); } }

/* paper grain */
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 280px;
  mix-blend-mode: multiply;
}

/* ---------- the wordmark: arched SVG (text fallback for white-label) ---------- */
.archmark { display: block; height: auto; }
.archmark text { font-family: var(--font-display); font-weight: 500; fill: currentColor; }
.brandtext .archmark { width: 182px; }
.authbrand .archmark { width: 300px; filter: drop-shadow(0 14px 36px rgba(0, 20, 12, 0.3)); }
.wordstack { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 0.94; }
.wordstack .wb { margin-left: 0.55em; margin-top: -0.03em; }

/* ---------- shell: sidebar + main ---------- */
.shell { display: flex; min-height: 100vh; }

.side {
  width: 264px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 1.9rem 1.1rem 1.4rem;
  background: linear-gradient(180deg, var(--panel), var(--pine-deep));
  border-right: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  color: var(--cream);
}
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--cream); padding: 0 0.4rem; }
.brand:hover { color: var(--cream); }
.brandtext { display: flex; flex-direction: column; line-height: 1.02; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.42rem;
  letter-spacing: 0.005em;
  text-transform: none;
}
.tagline {
  font-size: 0.56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(250, 246, 237, 0.55);
  margin-top: 6px;
}

.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0.54rem 0.85rem;
  border-radius: var(--r-ctl);
  text-decoration: none;
  color: rgba(250, 246, 237, 0.72);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s;
}
.side nav a:hover { background: rgba(255, 255, 255, 0.08); color: var(--cream); }
.side nav a.active { background: var(--page); color: var(--pine); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 20, 12, 0.25); }
.tick {
  width: 5px; height: 5px; flex: none; border-radius: 99px;
  background: rgba(250, 246, 237, 0.3);
  transition: background 0.15s, box-shadow 0.15s;
}
.side nav a.active .tick { background: var(--pine); box-shadow: none; }
.side nav a.sub { padding: 0.38rem 0.85rem 0.38rem 2.1rem; font-size: 0.78rem; }
.side nav a.sub .tick { width: 4px; height: 4px; }
.side nav a.sub.active { box-shadow: none; }

.sidefoot { margin-top: auto; padding: 1rem 0.85rem 0; border-top: 1px solid rgba(250, 246, 237, 0.16); }
.sidefoot .who { font-size: 0.84rem; font-weight: 600; display: flex; align-items: center; gap: 0.55rem; color: var(--cream); }
.sidefoot .role {
  font-size: 0.56rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(250, 246, 237, 0.8); background: rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 0.12rem 0.5rem;
}
.sidefoot form { margin-top: 0.45rem; }
.sidefoot .linkish { color: rgba(250, 246, 237, 0.6); }
.sidefoot .linkish:hover { color: var(--cream); }

main { flex: 1; min-width: 0; padding: 2.8rem 3.2rem 2rem; max-width: 1160px; margin-inline: auto; }
footer { color: var(--ink-3); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 3rem 0 1rem; text-align: center; font-weight: 500; }

@media (max-width: 880px) {
  .shell { flex-direction: column; }
  .side { position: static; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-bottom: 0; }
  .side nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .side nav a { padding: 0.35rem 0.65rem; font-size: 0.78rem; }
  .side nav a.sub { padding: 0.35rem 0.65rem; font-size: 0.74rem; }
  .sidefoot { margin: 0; border: 0; padding: 0; display: flex; align-items: center; gap: 0.8rem; }
  main { padding: 1.6rem 1.2rem 2rem; }
  /* The menu is a band above the page here, and fifteen links wrapped into
     eight rows pushed the first action most of a screen down — on a 320 the
     page's own content began 665px into an 800px screen (audit F-08 /
     proc P2-02). So: the identity and the account on one row, the links on
     one line of their own that scrolls sideways inside itself, the way a
     tab strip does. Every link is still there and still a pill; the page
     starts where a thumb can reach it. */
  .side { flex-wrap: wrap; }
  .brand { flex: 1 1 auto; }
  .sidefoot { flex: 0 0 auto; }
  .side nav { flex: 0 0 100%; order: 3; flex-wrap: nowrap; overflow-x: auto; gap: 3px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* fifteen links never fit: the right edge fades so the strip reads as
       having more along it, rather than ending where the screen does */
    mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent); }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav a { flex: 0 0 auto; }
  /* A column flex container is as wide as its widest child, so one wide table
     used to stretch the whole page and take the nav sideways with it. Pinned
     to the viewport, the table scrolls inside its own .tablewrap instead. */
  .shell, .side, main { width: 100%; max-width: 100%; box-sizing: border-box; }
}

/* ---------- type: Fraunces display over Inter text ---------- */
h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.85rem;
  text-transform: none;
  letter-spacing: 0.005em;
  line-height: 1.18;
  margin: 0 0 1.2rem;
  text-wrap: balance;
  color: var(--ink);
}
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.18rem;
  text-transform: none;
  letter-spacing: 0.01em;
  margin: 2.2rem 0 0.7rem;
  color: var(--ink);
}
a { color: var(--pine); font-weight: 600; text-decoration-color: #B9CDBB; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--pine-deep); }
.muted { color: var(--ink-2); }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: 1.5rem 1.7rem;
  margin-bottom: 1.3rem;
  box-shadow: 0 1px 2px rgba(30, 43, 38, 0.04), 0 16px 40px -24px rgba(30, 43, 38, 0.22);
}
.card.narrow { max-width: 440px; margin: 1.4rem auto; }

/* ---------- Rule 21: documents on the record ---------- */
.documents { margin: 0 0 1.3rem; }
.documents h2 { margin-bottom: 0.4rem; }
.doclist { list-style: none; padding: 0; margin: 0; }
.doclist li { padding: 0.45rem 0; border-top: 1px solid var(--line-soft); font-size: 0.92rem; }
.doclist li:first-child { border-top: 0; }
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-bottom: 0.4rem; }
.stat .big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--pine);
}
.stat .sub {
  margin-top: 0.45rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-2);
}

/* ---------- forms ---------- */
label { display: block; margin: 0.7rem 0; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-2); }
input, select, textarea {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-top: 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font: 400 0.95rem/1.4 var(--font-ui);
  text-transform: none;
  letter-spacing: normal;
  background: #FFFEFB;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: var(--ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(23, 82, 67, 0.16);
}
a:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(23, 82, 67, 0.3); border-radius: 8px; }
input[type="checkbox"] { display: inline-block; width: auto; margin-right: 0.45rem; accent-color: var(--pine); }
label.inline { font-weight: 400; font-size: 0.85rem; text-transform: none; letter-spacing: normal; color: var(--ink); }
/* Two boxes side by side, each a whole answer (Add component on a set: fixed
   or variable); stacked on a phone. */
.twobox { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; align-items: start; }
/* A checkbox list standing in for a multi-select (a variable component's options):
   group headings, a row per product with room to read and tick, scrolling
   only past a generous height, columns when the page is wide enough. */
.picklist-label { font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: 0.9rem 0 0.4rem; }
.picklist { border: 1.5px solid var(--line); border-radius: 12px; padding: 0.6rem 0.9rem; max-height: 26rem; overflow: auto; background: #fff; margin-bottom: 0.8rem; }
.picklist-group + .picklist-group { margin-top: 0.7rem; }
.picklist-head { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-3); padding: 0.35rem 0 0.2rem; border-bottom: 1px solid var(--line); margin-bottom: 0.25rem; }
.picklist-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1rem; }
.picklist-rows label.inline { display: flex; align-items: center; padding: 0.45rem 0.3rem; margin: 0; font-size: 0.9rem; border-radius: 8px; cursor: pointer; }
.picklist-rows label.inline:hover { background: #F6F4EC; }
.picklist-rows input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin-right: 0.6rem; flex: none; }
textarea { min-height: 4rem; }
.formrow { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.formrow > label { flex: 1; min-width: 150px; }

button {
  font: 600 0.84rem/1.3 var(--font-ui);
  text-transform: none;
  letter-spacing: 0.02em;
  background: var(--btn);
  color: var(--cream);
  border: 0;
  border-radius: var(--r-pill);
  padding: 0.62rem 1.45rem;
  cursor: pointer;
  margin-top: 0.7rem;
  transition: background 0.15s, transform 0.1s;
}
button:hover { background: var(--btn-hi); }
button:active { transform: translateY(1px); }
button.small { padding: 0.3rem 0.85rem; font-size: 0.72rem; margin: 0; }
button.danger { background: var(--red); }
button.danger:hover { background: #A22C10; }
button.linkish {
  background: none; color: var(--ink-2); text-decoration: underline;
  text-transform: none; letter-spacing: normal;
  text-underline-offset: 2px; padding: 0; margin: 0; font-weight: 400; font-size: inherit;
  border-radius: 0;
}
button.linkish:hover { background: none; color: var(--ink); }

/* ---------- tables ---------- */
.tablewrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  margin-bottom: 1.3rem;
  box-shadow: 0 1px 2px rgba(30, 43, 38, 0.04), 0 16px 40px -24px rgba(30, 43, 38, 0.22);
}
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.62rem 0.95rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  background: var(--inset);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { font-size: 0.86rem; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: var(--inset); }
tr:last-child td { border-bottom: 0; }
td.empty { color: var(--ink-3); text-align: center; padding: 2rem; font-family: var(--font-ui); }

/* ---------- pills ---------- */
.pill {
  display: inline-block;
  padding: 0.14rem 0.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 0;
  background: var(--offset);
  color: var(--ink-2);
  white-space: nowrap;
  vertical-align: middle;
}
.pill.organic, .pill.ok { background: var(--sage); color: var(--sage-ink); }
.pill.warn { background: var(--terra-tint); color: var(--terra-ink); }
.pill.bad { background: var(--red-tint); color: var(--red); }
.pill.tag { background: var(--ochre); color: var(--cream); }
/* Rule 29: a sale's two state pills (money, goods) stay on one line together. */
.pills { display: inline-flex; gap: 0.3rem; white-space: nowrap; vertical-align: middle; }

.flash {
  padding: 0.8rem 1.15rem;
  border-radius: var(--r-ctl);
  margin-bottom: 1.2rem;
  font-weight: 500;
  font-size: 0.87rem;
}
.flash.ok { background: var(--sage); color: var(--sage-ink); }
.flash.error { background: var(--red-tint); color: var(--red); }

/* ---------- toolbar ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.toolbar h1 { margin: 0; }
.toolbar .actions { display: flex; gap: 0.55rem; align-items: center; }
.toolbar .actions form { margin: 0; }
.toolbar .actions a { text-decoration: none; }

.lot-line { display: grid; grid-template-columns: 1fr 150px; gap: 0.9rem; align-items: end; }
@media (max-width: 560px) { .lot-line { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ---------- auth: full green, one white card ---------- */
body.auth { min-height: 100vh; background: linear-gradient(165deg, var(--panel), var(--pine-deep)); color: var(--cream); }
body.auth .lights, body.auth .grain { display: none; }
.authmain { max-width: 430px; margin: 0 auto; padding: 9vh 1.2rem 3rem; }
.authbrand { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.9rem; }
.authbrand .authhome { text-decoration: none; color: inherit; }
.authbrand .authhome:hover { color: inherit; opacity: 0.92; }
.authbrand .wordmark.big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.9rem;
  color: var(--cream);
  text-transform: none;
  letter-spacing: 0.005em;
  text-shadow: 0 12px 40px rgba(0, 20, 12, 0.35);
}
.authbrand .tagline { margin-top: 0.8rem; font-size: 0.6rem; color: rgba(250, 246, 237, 0.55); }
.authmain .card { padding: 1.9rem 2rem; border: 0; box-shadow: 0 24px 70px -30px rgba(0, 20, 12, 0.55); }
.authmain h1 { font-size: 1.45rem; }
.authmain button { width: 100%; margin-top: 1.1rem; }
/* helper lines inside labels read as prose, not shouting */
.authmain label .muted { display: block; margin-top: 0.45rem; text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 0.8rem; line-height: 1.55; }

/* ---------- signup wizard ---------- */
.step { display: none; }
.step.active { display: block; }
.stepmeta { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 1rem; }
.stepmeta > span { white-space: nowrap; }
.backlink { background: none; border: 0; color: var(--ink-2); cursor: pointer; font: inherit; font-size: 0.78rem; text-decoration: underline; text-underline-offset: 2px; padding: 0; margin: 0; text-transform: none; letter-spacing: normal; }
.backlink:hover { background: none; color: var(--ink); transform: none; }
.bookpick { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.1rem; }
.bookpick .book {
  display: flex; gap: 1rem; align-items: center; cursor: pointer; margin: 0;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem;
  text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 0.86rem; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.bookpick .book:hover { border-color: var(--pine); }
.bookpick input:checked + .book { border-color: var(--pine); background: #FBFDF9; box-shadow: 0 0 0 3px rgba(23, 82, 67, 0.14); }
.bookpick input:focus-visible + .book { box-shadow: 0 0 0 3px rgba(23, 82, 67, 0.3); }
.book svg { width: 46px; height: 46px; flex: none; color: var(--pine); background: var(--pine-tint); border-radius: 999px; padding: 9px; }
.book .bt { font-weight: 600; font-size: 0.95rem; }
.book .bd { color: var(--ink-2); font-size: 0.78rem; line-height: 1.5; }
.authmain .flash.error { background: var(--red-tint); }

@media (prefers-reduced-motion: reduce) {
  .lights > div { animation: none; }
  .brand .mark, .authbrand .bigmark, tbody tr, button { transition: none; }
}

/* ---------- Rule 31: print like the template they know ---------- */
/* .printonly is the certifier's table, .printhide the screen version. */
.printonly { display: none; }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  .printhide { display: none !important; }
  .printonly { display: block; }
  .printbook h2 { font-size: 1rem; margin: 0.2rem 0 0.3rem; }
  .printbook .printmeta, .printbook .printfoot { font-size: 9.5px; color: #000; margin: 0.2rem 0 0.5rem; }
  .printbook table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
  .printbook thead { display: table-header-group; }
  .printbook tr { break-inside: avoid; page-break-inside: avoid; }
  .printbook th, .printbook td { border: 1px solid #000; padding: 3px 5px; vertical-align: top; text-align: left; white-space: normal; color: #000; background: #fff; }
  .printbook th { font-weight: 700; background: #eee; }
  .printbook th.group { text-align: center; }
  .printbook td.blank { min-width: 5em; }
  .printbook td.empty { text-align: center; color: #333; padding: 1em; }
}

/* ---------- print: clean documents ---------- */
@media print {
  .lights, .grain, .side, footer, .toolbar .actions, .noprint, .flash { display: none !important; }
  body { background: #fff !important; color: #000; font-size: 11px; }
  .shell { display: block; }
  main { max-width: none; margin: 0; padding: 0; }
  main::before {
    content: "ORGANIC CERTIFICATION RECORD";
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    border-bottom: 2px solid #000;
    padding-bottom: 0.35rem;
    margin-bottom: 1rem;
  }
  .card, .tablewrap { background: #fff; border: 1px solid #bbb; box-shadow: none; border-radius: 4px; break-inside: avoid; }
  h1, h2, td, .muted, label { color: #000; }
  th { color: #333; background: #f2f2f2; }
  .pill { background: none; border: 1px solid #999; color: #000; }
  tbody tr:hover { background: none; }
  a { color: inherit; text-decoration: none; }
}

/* in-table row actions: one tidy row instead of a wrapping stack */
.rowactions { display: flex; gap: 0.35rem; align-items: center; white-space: nowrap; }
.rowactions form { margin: 0; display: inline; }
button.dangerish { color: var(--red); }
button.dangerish:hover { background: none; color: #A22C10; }

/* ---------- Rule 25: destructive actions are quiet ---------- */
/* A delete or remove is a text link in the page's quiet grey, red only under
   the pointer, behind a confirm that names the thing. Never a red button:
   red is the compliance colour and keeps its meaning. */
button.quietdel { color: var(--ink-3); }
button.quietdel:hover { background: none; color: var(--red); }
form.quietdel { display: inline; margin: 0; }

/* compact selects living inside table cells (bulk edit) */
.cellselect { width: auto; margin: 0; padding: 0.3rem 1.6rem 0.3rem 0.55rem; font-size: 0.82rem; }
.cellselect.changed { border-color: var(--pine); box-shadow: 0 0 0 2px rgba(23, 82, 67, 0.18); }
input.cellnum { width: 6.2rem; padding-right: 0.55rem; }

/* the Help & ideas widget: a floating button opening a compact panel */
#hlp { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
#hlp-fab { border: 0; border-radius: 99px; padding: 0.55rem 1.1rem; background: var(--pine); color: #FAF6ED; font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(23, 82, 67, 0.35); }
#hlp-panel { display: none; flex-direction: column; width: min(24rem, calc(100vw - 2.2rem)); height: min(34rem, 80vh); background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card); box-shadow: 0 12px 34px rgba(30, 43, 38, 0.25); overflow: hidden; }
.hlp-head { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.9rem; background: var(--pine); color: #FAF6ED; font-weight: 600; flex: none; }
.hlp-head button { border: 0; background: none; color: inherit; font-size: 1.2rem; cursor: pointer; }
.hlp-tabs { display: flex; border-bottom: 1px solid var(--line-soft); flex: none; }
.hlp-tab { flex: 1; border: 0; background: none; padding: 0.55rem 0; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: inherit; opacity: 0.55; border-bottom: 2px solid transparent; border-radius: 0; }
.hlp-tab.active { opacity: 1; border-bottom-color: var(--pine); }
.hlp-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
#hlp-log { flex: 1; overflow-y: auto; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
.hlp-msg { padding: 0.45rem 0.7rem; border-radius: 0.7rem; font-size: 0.86rem; max-width: 90%; white-space: pre-wrap; }
.hlp-bot { background: rgba(23, 82, 67, 0.08); align-self: flex-start; }
.hlp-user { background: var(--pine); color: #FAF6ED; align-self: flex-end; }
#hlp-chat { display: flex; gap: 0.4rem; padding: 0 0.7rem 0.6rem; }
#hlp-chat input { flex: 1; margin: 0; }
#hlp-chat button { margin: 0; }
.hlp-idea { padding: 0.7rem 0.8rem 0.9rem; font-size: 0.72rem; }
.hlp-idea textarea { width: 100%; margin: 0.35rem 0; }
.hlp-shot { display: block; font-size: 0.8rem; margin-bottom: 0.4rem; }

/* On a phone the floating button is a 44px circle — the tap-target minimum —
   rather than a 160px bar parked on whatever is beneath it (at 320 it was
   sitting on the dashboard's own "+ Slaughter" and "+ Sale"). The words move
   into the button's accessible name, and the page reserves room at its end so
   the last thing on it is never trapped underneath. */
@media (max-width: 560px) {
  #hlp { right: 0.7rem; bottom: 0.7rem; }
  #hlp-fab { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; font-size: 1.15rem; line-height: 1; }
  #hlp-fab .hlp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  main { padding-bottom: 4.6rem; }
}

/* in-flight feedback for slow submits (AI invoice reading etc.) */
.busyline { display: none; align-items: center; gap: 0.6rem; margin-top: 0.9rem; color: var(--ink-soft, inherit); }
.spinner { width: 1.1rem; height: 1.1rem; flex: none; border: 2.5px solid var(--line-soft); border-top-color: var(--pine); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* .tight tables: one line per row, no wrapping, closer packing — the wrapper
   already scrolls horizontally if a screen is too narrow */
.tight th, .tight td { white-space: nowrap; padding: 0.42rem 0.8rem; vertical-align: middle; }

/* .tight tables freeze their first column (the name) while the rest scrolls —
   solid backgrounds so scrolling content slides underneath, not through */
.tight th:first-child, .tight td:first-child { position: sticky; left: 0; z-index: 2; }
.tight td:first-child { background: #fff; }
.tight th:first-child { background: var(--inset); }
.tight tbody tr:hover td:first-child { background: var(--inset); }

/* Certification chips on signup: status first (certified / in conversion /
   not yet), then tick every body that certifies you; multi-scheme bodies
   unfold smaller scheme chips beneath their body chip. Same checked/focus
   language as the book cards, worn as compact pills. */
.certstatus, .certpick { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.7rem; }
/* The hidden attribute means hidden, even on the inputs and buttons this
   stylesheet gives a display of their own. Without this a form control marked
   hidden keeps its box and the row it sits in grows sideways. */
[hidden] { display: none !important; }
/* Radios and checkboxes worn as chips: the control is taken out of sight but
   stays focusable and keeps its label. It has to be given a box of its own.
   A radio inherits the 100%-wide form control at the top of this file, and an
   absolutely positioned 100%-wide box starting halfway across the card runs
   off the side of the page — which is why the signup form scrolled sideways
   at every width, desktop included, on three invisible radios (2001px of
   document on a 1440px screen). Checkboxes escaped it only because they are
   width:auto. One rule for every chip, so neither can drift again. */
.bookpick input, .certstatus input, .certpick input {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none; clip-path: inset(50%);
}
.certstatus .cert, .certpick .cert {
  cursor: pointer; margin: 0; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 0.5rem 0.9rem; font-weight: 500; font-size: 0.84rem; color: var(--ink); line-height: 1.3;
  text-transform: none; letter-spacing: normal;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.certstatus .cert .cc, .certpick .cert .cc { display: block; font-weight: 400; font-size: 0.72rem; opacity: 0.55; letter-spacing: 0.03em; }
.certstatus .cert:hover, .certpick .cert:hover { border-color: var(--pine); }
.certstatus input:checked + .cert, .certpick input:checked + .cert { border-color: var(--pine); background: #FBFDF9; box-shadow: 0 0 0 3px rgba(23, 82, 67, 0.14); }
.certstatus input:focus-visible + .cert, .certpick input:focus-visible + .cert { box-shadow: 0 0 0 3px rgba(23, 82, 67, 0.3); }
.certgroup { display: flex; flex-direction: column; gap: 0.35rem; }
.certschemes { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-left: 0.5rem; }
.certpick .cert.schemechip { padding: 0.28rem 0.65rem; font-size: 0.76rem; border-radius: 9px; }

/* Three-dot row menu: a native details popover, no JS. */
.rowmenu { position: relative; display: inline-block; }
.rowmenu summary { list-style: none; cursor: pointer; padding: 0.05rem 0.55rem; border-radius: 8px; font-weight: 700; user-select: none; }
.rowmenu summary::-webkit-details-marker { display: none; }
.rowmenu summary:hover { background: var(--inset); }

/* ---------- Rule 32: a settings page with a spine ---------- */
.spined { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 2rem; align-items: start; }
.spine { position: sticky; top: 1.2rem; display: flex; flex-direction: column; gap: 2px; }
.spine a {
  display: block; padding: 0.42rem 0.75rem; border-radius: var(--r-pill);
  font-family: var(--font-ui); font-size: 0.86rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.spine a:hover { background: var(--inset); color: var(--ink); }
.spine a.current { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(30, 43, 38, 0.06); }
.spined-main > form > section, .spined-main > section { scroll-margin-top: 1rem; }
.spined-main section > h2:first-child { margin-top: 0; }
@media (max-width: 880px) {
  .spined { display: block; }
  .spine { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
  .spine a { padding: 0.3rem 0.7rem; font-size: 0.78rem; border: 1px solid var(--line-soft); background: var(--card); }
  .spine a.current { background: var(--ink); color: var(--cream); border-color: var(--ink); }
}
.rowmenu[open] > div { position: absolute; right: 0; top: 1.6rem; z-index: 20; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 0.35rem 0.6rem; box-shadow: 0 6px 18px rgba(0, 20, 12, 0.1); white-space: nowrap; }

/* One form, three quiet cards on the same ground: who they are, what they
   supply, where they stand. Hierarchy comes from spacing and three tiny
   section marks, not colour; every explanation lives behind the small "i",
   so the form itself is only questions. */
.formstack { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.3rem; }
.formsec {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: 1.35rem 1.6rem 1.45rem;
  box-shadow: 0 1px 2px rgba(30, 43, 38, 0.04), 0 16px 40px -24px rgba(30, 43, 38, 0.22);
}
.formsec > h2 {
  font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 0.9rem;
}
.formsec > label:first-of-type, .formsec > .formrow:first-of-type { margin-top: 0; }

/* ---------- Rule 14: a record's own history, last on the page ---------- */
.history { margin-top: 2.2rem; }
.history h2 { margin-bottom: 0.5rem; }
.history-table td { vertical-align: top; font-size: 0.86rem; }
.history-table td.nowrap { white-space: nowrap; }
.history-verb { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-right: 0.25rem; }
.history-foot { font-size: 0.82rem; margin-top: 0.5rem; }

/* The "i": hover or focus for the sentence that used to crowd the form. */
.tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 0.85rem; height: 0.85rem; border-radius: 50%; flex: none;
  border: 1px solid var(--ink-3); color: var(--ink-3);
  font-size: 0.6rem; font-weight: 600; font-style: normal; line-height: 1;
  text-transform: none; letter-spacing: 0; vertical-align: -1px;
  margin-left: 0.35rem; cursor: help; position: relative;
}
.tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: 250px;
  background: var(--ink); color: var(--page); padding: 0.5rem 0.7rem; border-radius: 8px;
  font-size: 0.74rem; font-weight: 400; line-height: 1.45; letter-spacing: 0.01em;
  text-transform: none; white-space: normal; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 30;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; }
.pill .tip { width: 0.72rem; height: 0.72rem; font-size: 0.5rem; margin-left: 0.2rem; vertical-align: -1px; }
/* Inside a scrolling table wrapper an upward bubble is clipped by the
   wrapper's edge — open downward there instead, and keep the last column's
   bubble inside the right edge. */
.tablewrap .tip::after { bottom: auto; top: calc(100% + 7px); }
.invtable th:last-child .tip::after, .invtable td:last-child .tip::after { left: auto; right: -0.3rem; transform: none; }
.tip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(23, 82, 67, 0.3); }
/* On a phone a centred bubble hangs off the right edge, and an invisible box
   out there is still a page you can drag sideways (audit F-08 / proc P2-02).
   Narrow screens open every bubble leftwards from its (i) — the same trick
   the last table column already uses — and cap it to the viewport. */
@media (max-width: 560px) {
  .tip::after { left: auto; right: -0.3rem; transform: none; max-width: calc(100vw - 2.5rem); }
}

/* Plain radios, sentence case, one line each — an answer, not a poster. */
.pickrow { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.1rem 0 0; }
.pickrow .opt { display: flex; align-items: center; }
.pickrow label {
  display: flex; align-items: center; gap: 0.55rem; margin: 0;
  font-size: 0.86rem; font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--ink); cursor: pointer;
}
.pickrow input { width: auto; margin: 0; flex: none; accent-color: var(--pine); }

/* Paperwork appears only once the chosen answer says there is paperwork. */
.cbdocs { margin-top: 1.15rem; padding-top: 1.05rem; border-top: 1px solid var(--line-soft); }
.cbdocs > .formrow:first-child, .cbdocs > label:first-child { margin-top: 0; }

/* The import review's line table: reads like the invoice itself — one row
   per line, inputs sized to their content, the mismatch warning as its own
   full-width row beneath the line it belongs to. */
.invtable td { vertical-align: middle; }
.invtable th, .invtable td { padding: 0.5rem 0.5rem; }
.invtable input, .invtable select { margin: 0; font-size: 0.82rem; padding: 0.4rem 0.5rem; }
.invtable .c-inc, .invtable .c-cert { text-align: center; }
.invtable .c-inc input, .invtable .c-cert input { width: auto; margin: 0; }
.invtable .c-num input { width: 4.8rem; font-variant-numeric: tabular-nums; }
.invtable .c-lot input { width: 6.5rem; }
.invtable .c-desc { font-size: 0.8rem; color: var(--ink-2); max-width: 13rem; line-height: 1.45; }
.invtable .c-desc > div { margin-top: 0.25rem; }
.invtable .c-ing { min-width: 13rem; }
.invtable .c-ing select { max-width: 15rem; }
.invtable .c-ing .ing-pills { display: block; margin-top: 0.3rem; }
.invtable tr.mismatchrow td { padding-top: 0.2rem; border-top: 0; }

/* A sale's lines, written the way an invoice writes them: the thing being
   sold takes the width it needs, the figures stay narrow and tabular, and the
   whole line sits on one row. Rows past the first are hidden until asked for. */
.tablewrap.lines { max-width: 52rem; }
.linetable { table-layout: fixed; min-width: 20rem; }
.linetable .c-num { width: 7.5rem; }
/* A fixed list — the kill sheet's animals — carries a tick and two short
   facts beside the name, so those columns are sized to what they hold and
   the name takes what is left. */
.linetable .c-inc { width: 4.2rem; }
.linetable .c-tight { width: 8rem; }
.linetable .c-pill { width: 12rem; }
/* A label inside a row names the row; it is not a caption standing over a
   box, so it reads as ordinary text — and the whole name is a tap target
   for the row's tick. */
.linetable td label {
  display: inline; margin: 0; font: inherit; text-transform: none;
  letter-spacing: normal; color: inherit; cursor: pointer;
}
.linetable .c-act { width: 2.2rem; text-align: center; }
/* A delivery's line: the figures, the lot and the tick are sized to what they
   hold, so the ingredient — the only column whose content varies — takes the
   width that is left. */
.linetable .c-lot { width: 8.5rem; }
.linetable .c-cert { width: 4.2rem; }
.linetable .rowclear { padding: 0.1rem 0.45rem; }
/* On a phone the line still stays a line: the figures keep their narrow
   columns and the picker takes what is left — a select shows its full list
   when tapped, so a truncated label costs nothing and a sideways nudge would. */
@media (max-width: 560px) {
  .linetable { min-width: 0; }
  /* On a phone the row keeps what the decision needs — tick, name, compliance,
     head — and drops the species, which the name and the register already
     say. Hiding the class hides its heading with it. */
  .linetable .c-num { width: 5.4rem; }
  .linetable .c-lot { width: 5rem; }
  .linetable .c-cert { width: 3rem; }
  .linetable .c-inc { width: 2.2rem; }
  .linetable .c-tight { display: none; }
  .linetable .c-pill { width: 5.6rem; }
  .linetable th, .linetable td { padding: 0.5rem 0.3rem; }
}
.linetable .c-item { overflow-wrap: anywhere; }
.linetable .c-item select, .linetable .c-item input,
.linetable .c-ing select, .linetable .c-ing input,
.linetable .c-lot input, .linetable .c-num input { width: 100%; max-width: none; }
#addline { margin-top: 0.7rem; }

/* The trial-over banner: on every page of a read-only farm, so the pause is
   visible before anyone fills in a form that cannot save. */
.banner-readonly { border-left: 4px solid var(--ochre); }
.banner-readonly a { font-weight: 600; }

/* The validation summary that stays put (audit P2-12). The native bubble
   vanishes and leaves a form looking fine while refusing to save; this sits at
   the top of the form until every field named in it is right.
   Red, and the field itself boxed in red (Fraser, 2026-09-18: "need red
   highlighting and box highlighting for errors") — a form that refuses to
   save has to be impossible to misread. */
.errsum {
  background: var(--red-tint);
  color: var(--red);
  border: 1.5px solid var(--red-soft);
  border-left: 5px solid var(--red);
  border-radius: var(--r-ctl);
  padding: 0.8rem 1rem;
  margin: 0 0 1.1rem;
}
.errsum p { margin: 0 0 0.35rem; font-weight: 600; }
.errsum ul { margin: 0; padding-left: 1.1rem; }
.errsum li { margin: 0.15rem 0; }
.errsum a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.errsum:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* The field that failed: a red box, a red label above it, and a red focus
   ring while it is being put right. */
[aria-invalid="true"] { border-color: var(--red-soft) !important; border-width: 2px; background: #FFF5F2; box-shadow: 0 0 0 3px rgba(196, 55, 23, 0.12); }
[aria-invalid="true"]:focus-visible { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(196, 55, 23, 0.28); }
label.haserr, label:has(> [aria-invalid="true"]), label:has([aria-invalid="true"]) { color: var(--red); }

/* Opening stock: one tight table — pick the item by typing, quantity, its
   batch number, another line for the next batch. Saved lines sit above the
   blank ones in the same table and stay editable. */
.ostable .c-item { min-width: 14rem; }
.ostable .c-item input { width: 100%; max-width: 20rem; }
.ostable .c-lot input { width: 9rem; }
.ostable .c-x { text-align: center; width: 2.2rem; white-space: nowrap; }
.ostable .c-date { white-space: nowrap; }
.ostable .os-del { font-size: 1.1rem; line-height: 1; padding: 0.1rem 0.4rem; color: var(--ink-2); }
.ostable .os-del:hover { color: var(--bad, #a33); }
.ostable tbody + tbody tr:first-child td { border-top: 2px solid var(--line, #e3ded3); }
.os-foot { display: flex; align-items: center; gap: 1rem; margin-top: 0.8rem; flex-wrap: wrap; }
.os-foot .os-spacer { flex: 1; }
.os-foot .os-date { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-2); }
.os-foot .os-date input { width: auto; margin: 0; }
.os-foot > button:last-child { margin: 0; }

/* Opening stock's unit column: the unit a picked item brings, or the picker
   for a name being coined on the line. One column, one answer. */
.ostable .c-unit { white-space: nowrap; }
.ostable .c-unit select { width: auto; margin: 0; }

/* Certifications: one list, one row per certification. The main one is a row
   like any other — the pill says which it is, and it opens in place to its
   own fields rather than living in a different form somewhere else. */
.certrow { display: flex; align-items: center; gap: 0.45rem 0.9rem; flex-wrap: wrap; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); }
.certrow:last-child, .certmain:last-child .certrow { border-bottom: 0; }
.certrow-do { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; }
.certrow-do form { margin: 0; }
.certmain summary { list-style: none; cursor: pointer; }
.certmain summary .linkish { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; font-size: 0.72rem; }
.certmain summary:hover .linkish { color: var(--ink); }
.certmain summary::-webkit-details-marker { display: none; }
.certmain summary .certrow { margin: 0; }
.certmain[open] summary .certrow { border-bottom: 0; }
.certmain[open] .certedit { border-bottom: 1px solid var(--line-soft); padding-bottom: 1rem; margin-bottom: 0.2rem; }
.certedit { padding-left: 0.1rem; }
@media (max-width: 560px) {
  .certrow-do { margin-left: 0; width: 100%; }
}

/* ---------- the list engine (rule 13: every list scales the same way) ----------
   One search box above the table, sortable headings, a pager underneath. */
.listhead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.2rem 0 0.9rem; }
.listhead .listsearch { flex: 1 1 14rem; max-width: 24rem; margin: 0; }
.listhead .listcount, .listtitle .listcount { font-size: 0.8rem; white-space: nowrap; }
.listtitle .listcount { font-family: var(--font-ui); font-weight: 400; margin-left: 0.4rem; }
.listhead .listclear { font-size: 0.8rem; }
.listsection { margin-bottom: 0.4rem; }
th.sortable a { color: inherit; text-decoration: none; display: inline-block; }
th.sortable a::after { content: "↕"; opacity: 0.35; margin-left: 0.3em; font-size: 0.7rem; }
th.sortable:hover a::after { opacity: 0.7; }
th.sorted-asc a::after { content: "▲"; opacity: 1; }
th.sorted-desc a::after { content: "▼"; opacity: 1; }
th.sorted-asc, th.sorted-desc { color: var(--ink); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: -0.5rem 0 1.3rem; font-family: var(--font-ui); font-size: 0.82rem; }
.pager a, .pager span { padding: 0.25rem 0.55rem; border-radius: 8px; }
.pager a { text-decoration: none; }
.pager a:hover { background: var(--inset); }
.pager .here { background: var(--pine-tint); color: var(--pine-deep); font-weight: 600; }
.pager .off { color: var(--ink-3); }
.pager .gap { padding: 0.25rem 0.1rem; color: var(--ink-3); }
.pager .muted { margin-left: auto; }
@media (max-width: 560px) {
  .listhead .listsearch { max-width: none; }
  .pager .muted { margin-left: 0; flex-basis: 100%; }
}

/* ---------- find anything (design-system rule 12) ---------- */
/* One box under the brand on every page. It sits on the green, so it is the
   green's own input: cream outline, cream placeholder, paper when it has the
   cursor. Tighter than a form field — it is chrome, not a question. */
.find { margin: -0.7rem 0 -0.6rem; padding: 0 0.4rem; }
.find input {
  margin: 0;
  padding: 0.42rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.3;
  background: rgba(250, 246, 237, 0.09);
  border-color: rgba(250, 246, 237, 0.26);
  color: var(--cream);
}
.find input::placeholder { color: rgba(250, 246, 237, 0.55); }
.find input:focus-visible { background: var(--page); color: var(--ink); border-color: var(--page); box-shadow: 0 0 0 3px rgba(250, 246, 237, 0.28); }
.find input::-webkit-search-cancel-button { filter: invert(1); }
.findlist { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.findlist li { padding: 0.42rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.92rem; }
.findlist li:last-child { border-bottom: 0; }
kbd { font: 500 0.78rem/1 var(--font-ui); padding: 0.15rem 0.4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--card); }
@media (max-width: 880px) {
  /* On a phone the header is a band: identity and account on the first row,
     the box on its own full-width row, then the link strip. Full width, never
     wider — the page must not go sideways for it. */
  .find { flex: 0 0 100%; order: 2; margin: -0.2rem 0 -0.3rem; padding: 0; min-width: 0; }
  .find input { width: 100%; box-sizing: border-box; }
}

/* ---------- rule 15: an empty list says what to do first ---------- */
td.emptystate { padding: 2.6rem 1.5rem; text-align: center; white-space: normal; }
.tight td.emptystate { position: static; }
.emptystate .emptybody { max-width: 30rem; margin: 0 auto; }
.emptystate h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; margin: 0 0 0.45rem; color: var(--ink); text-transform: none; letter-spacing: 0.01em; }
.emptystate p { font-family: var(--font-ui); font-size: 0.88rem; color: var(--ink-2); margin: 0 0 1rem; line-height: 1.5; }
.emptystate a { text-decoration: none; }
@media (max-width: 560px) {
  /* A wide table scrolls inside its frame; the empty state must not scroll
     off with it — pin it to the visible left edge, sized to the screen. */
  td.emptystate { padding: 2rem 1rem; }
  .emptystate .emptybody { margin: 0; max-width: calc(100vw - 4.6rem); position: sticky; left: 1rem; }
}

/* ---------- rule 19: used-up lots step aside ---------- */
.listextra { font-size: 0.8rem; white-space: nowrap; }
.usedup-link, .usedup-toggle { font-size: 0.8rem; font-weight: 500; text-transform: none; letter-spacing: normal; }

/* ---------- rule 30: a list of things with a state has tabs for the states ---------- */
.listtabs { display: flex; flex-wrap: wrap; gap: 0.1rem; margin: 0 0 0.9rem; border-bottom: 1px solid var(--line); }
.listtabs a { padding: 0.5rem 0.85rem; text-decoration: none; color: var(--ink-2); font-family: var(--font-ui); font-weight: 500; font-size: 0.86rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.listtabs a:hover { color: var(--ink); }
.listtabs a.active { color: var(--ink); border-bottom-color: var(--pine); }
.listtabs .count { color: var(--ink-3); font-size: 0.76rem; margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .listtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .listtabs a { padding: 0.45rem 0.65rem; font-size: 0.82rem; }
}

/* Rule 18: Save first, the quiet "Save & add another" beside it, the way
   back after that. One primary button per form — the second submit is
   outlined, never a second blue one. */
.formfoot { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.7rem; }
.formfoot button { margin-top: 0; }
button.again { background: none; color: var(--ink-2); border: 1.5px solid var(--ink-2); padding: calc(0.62rem - 1.5px) 1.2rem; }
button.again:hover { background: none; color: var(--ink); border-color: var(--ink); }
.formfoot a { font-size: 0.85rem; }
.carry-note { margin: 0 0 0.8rem; padding: 0.55rem 0.9rem; border-left: 3px solid var(--btn); background: rgba(30, 43, 38, 0.04); font-size: 0.9rem; }

/* Rule 22: "+ new" beside a picker opens a small dialog that posts to the
   same create route and comes back with the new one selected. */
.picker-new { margin-left: 0.5rem; font-size: 0.72rem; text-transform: none; letter-spacing: normal; font-weight: 500; }
.picker-new .linkish { font-size: 0.78rem; }
dialog.picker-dialog { border: 0; border-radius: 12px; padding: 1.2rem 1.4rem 1.1rem; width: min(26rem, calc(100vw - 2rem)); background: var(--cream, #FAF6ED); color: var(--ink); box-shadow: 0 18px 50px rgba(30, 43, 38, 0.25); }
dialog.picker-dialog::backdrop { background: rgba(30, 43, 38, 0.45); }
dialog.picker-dialog h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
dialog.picker-dialog form { margin: 0; }
dialog.picker-dialog .picker-foot { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.8rem; }
dialog.picker-dialog .picker-foot button { margin-top: 0; }
dialog.picker-dialog .picker-error { margin: 0.6rem 0 0; }

/* Rule 23: the reason list; the words box only shows for "Other". */
.reason-words[hidden] { display: none; }