:root {
  /* Organic Guardians: deep pine green from the wordmark, warm paper, white cards.
     Red is deliberately demoted to one job — withdrawal warnings. */
  --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; }
.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); }
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); }

.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; }
}

/* ---------- 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; }

/* 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.86rem; }
.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); }
.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; }

/* 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; }
.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; }
  .linetable .c-num { width: 5.4rem; }
  .linetable .c-lot { width: 5rem; }
  .linetable .c-cert { width: 3rem; }
  .linetable th, .linetable td { padding: 0.5rem 0.3rem; }
}
.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.
   Amber, not red: red is the withdrawal stamp and has to keep meaning only
   that — a missing quantity is not that kind of news. */
.errsum {
  background: var(--terra-tint);
  color: var(--terra-ink);
  border-left: 4px solid var(--terra);
  border-radius: var(--r-ctl);
  padding: 0.7rem 0.95rem;
  margin: 0 0 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; }
.errsum:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
[aria-invalid="true"] { border-color: var(--terra); background: #FFFDF8; }

/* 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; }