/* TCT Ingredient Desk. One stylesheet, no framework, prints properly. */

:root {
  /* Forest Canopy (Toms, 2026-09-30): forest green, sage, olive, ivory. */
  --ink: #1f2a1e;
  --muted: #5f6656;
  --line: #e0e0d4;
  --bg: #faf9f6;
  --card: #ffffff;
  --accent: #2d4a2b;
  --accent-soft: #eceee3;
  --accent-line: #c9cdb5;
  --sage: #7d8471;
  --olive: #a4ac86;
  --neutral-soft: #f1f1ea;
  --block: #a4232b;
  --block-soft: #fbeced;
  --warn: #8a5a00;
  --warn-soft: #fdf3e0;
  --ok: #1f6b3a;
  --ok-soft: #e9f3ec;
  --font-head: "FreeSerif", Georgia, "Times New Roman", "Songti SC", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 "FreeSans", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
}

.loading { padding: 3rem; color: var(--muted); }

/* --- frame ------------------------------------------------------------- */

header.bar {
  background: var(--accent);
  color: #fff;
  padding: .7rem 1.2rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
header.bar h1 { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: .02em; }
header.bar .who { margin-left: auto; font-size: .85rem; opacity: .85; }
header.bar button {
  background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff;
  border-radius: 4px; padding: .2rem .6rem; font-size: .8rem; cursor: pointer;
}

main { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.2rem 4rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.1rem;
}
.card h2 {
  margin: 0 0 .2rem; font-size: .95rem; font-weight: 600;
}
.card p.hint { margin: .1rem 0 1rem; color: var(--muted); font-size: .85rem; }

/* --- forms ------------------------------------------------------------- */

label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: .45rem .55rem; border: 1px solid var(--line);
  border-radius: 5px; font: inherit; background: #fff; color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { min-height: 8rem; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }

button {
  font: inherit; border-radius: 5px; padding: .45rem .9rem; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.ghost { border: none; background: none; color: var(--accent); padding: .2rem .3rem; }
button:disabled { opacity: .5; cursor: default; }

.row { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.row > * { flex: 1 1 12rem; }
.actions { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }

.stat { flex: 1 1 10rem; border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; }
.stat .num { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.stat .lbl { color: var(--muted); font-size: .85rem; margin-top: .3rem; }

.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem;
  font-size: .85rem; cursor: pointer; background: #fff; user-select: none;
}
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* --- the formula rows --------------------------------------------------- */

table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; padding: .3rem .4rem; border-bottom: 1px solid var(--line);
}
table.grid td { padding: .25rem .4rem; vertical-align: middle; }
table.grid td.num { width: 8rem; }
table.grid td.act { width: 2.2rem; text-align: right; }
table.grid tfoot td { padding-top: .6rem; color: var(--muted); font-size: .85rem; }

/* --- results ------------------------------------------------------------ */

.declaration {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: 1rem 1.1rem; line-height: 1.75;
}
.declaration.blocked { border-left-color: var(--block); }

.verdicts { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.verdict {
  display: inline-block; white-space: nowrap;
  border-radius: 6px; padding: .35rem .7rem; font-size: .82rem; border: 1px solid;
}
.verdict.clean { background: var(--ok-soft); border-color: #bcd9c6; color: var(--ok); }
.verdict.flagged { background: var(--warn-soft); border-color: #eddaae; color: var(--warn); }
.verdict.blocked { background: var(--block-soft); border-color: #eec2c5; color: var(--block); }
.verdict.off { background: var(--neutral-soft); border-color: var(--line); color: var(--muted); }

/* --- EWG scores (2026-09-24): one list, no table, so a phone stacks the score and the
   buttons under the name instead of pushing them off the right edge. --- */
/* Toms, 2026-09-24 («可以做整齐一些吗»): a grid, so the score column lines up down the whole
   list instead of landing wherever each name happened to end. Each row is display: contents,
   which hands its three cells to the grid; the open form spans every column beneath. */
.ewg-list { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 1.2rem; align-items: center; border-top: 1px solid var(--neutral-soft); }
.ewg-row { display: contents; }
.ewg-row > div { padding: .5rem 0; border-bottom: 1px solid var(--neutral-soft); min-width: 0; }
.ewg-row .who { font-size: .92rem; }
.ewg-row .score { white-space: nowrap; }
.ewg-row .act { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; white-space: nowrap; }
.ewg-row .act:empty { padding: 0; }
.ewg-row .sub { font-size: .78rem; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.ewg-row .sub a { color: var(--muted); }
.ewg-row.open > div { border-bottom: none; }
.ewg-list .ewg-form { grid-column: 1 / -1; margin: 0 0 .6rem; border-bottom: 1px solid var(--neutral-soft); padding-bottom: .8rem; }
.ewg-chip.tap { cursor: pointer; }
.ewg-chip.tap:hover, .ewg-chip.tap:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 560px) {
  .ewg-list { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .ewg-row > div { padding: .25rem 0; border-bottom: none; }
  .ewg-row .who { padding-top: .7rem; }
  .ewg-row .act { justify-content: flex-start; padding-bottom: .7rem; border-bottom: 1px solid var(--neutral-soft); }
  .ewg-row .act:empty { padding: 0 0 .5rem; border-bottom: 1px solid var(--neutral-soft); }
  .ewg-row .act button, .ewg-row .act a { min-height: 2.6rem; display: inline-flex; align-items: center; }
  .ewg-chip { font-size: .95rem; padding: .45rem .9rem; }
  /* the material page's breakdown on a phone: the % column narrow, so the INCI box gets the width (role-play 2026-10-29: 47 px) */
  table.grid.comp td.num { width: 4.6rem; }
  table.grid.comp td { padding: .25rem .2rem; }
}

ul.findings { list-style: none; margin: .6rem 0 0; padding: 0; }
ul.findings li {
  padding: .45rem .6rem; border-radius: 5px; margin-bottom: .35rem; font-size: .87rem;
  border: 1px solid var(--line);
}
li.block { background: var(--block-soft); border-color: #eec2c5; }
li.warn  { background: var(--warn-soft); border-color: #eddaae; }
li .what { font-weight: 600; }

.notice {
  border-radius: 6px; padding: .8rem .95rem; font-size: .88rem; margin-bottom: 1rem;
  border: 1px solid;
}
.notice.block { background: var(--block-soft); border-color: #eec2c5; color: #6d1a20; }
.notice.info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.notice.warn { background: var(--warn-soft); border-color: #ead9b0; color: #5e3f00; }
.notice ul { margin: .5rem 0 0; padding-left: 1.1rem; }

table.lines { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.lines th { text-align: left; color: var(--muted); font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em; padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
table.lines td { padding: .3rem .4rem; border-bottom: 1px solid var(--neutral-soft); }
table.lines td.pct { text-align: right; font-variant-numeric: tabular-nums; width: 6rem; }
table.lines td.tag { width: 7rem; }
.tag span { font-size: .7rem; border-radius: 3px; padding: .1rem .35rem; background: var(--neutral-soft); color: var(--muted); }
.tag span.even { background: var(--warn-soft); color: var(--warn); }
.tag span.prov { background: #ece7f7; color: #4b3a86; }
.req-meta .swu { font-size: .75rem; border-radius: 3px; padding: .1rem .4rem; background: var(--accent-soft); color: var(--accent); }

.foot { color: var(--muted); font-size: .8rem; margin-top: 2rem; text-align: center; }

/* --- print: the customer's document ------------------------------------- */

@media print {
  body { background: #fff; }
  header.bar, .noprint { display: none !important; }
  main { max-width: none; padding: 0; }
  .card { border: none; padding: 0; margin-bottom: 1.2rem; }
  .declaration { border: none; border-left: none; padding: 0; }
}

/* --- sales screens --- */
/* Everything here is scoped under .sales so it cannot bleed into the R&D or write-up screens. */

.sales .group { margin-top: .9rem; }
.sales .note { margin: .5rem 0 0; color: var(--muted); font-size: .82rem; }
.sales .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the stage pill comes from shell.css; only "ready to send" is made solid here so it leads the eye */
.sales .stage.with_sales { background: var(--accent); color: #fff; font-weight: 600; }

/* market and kind tags */
.sales .mk { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.sales .mkt, .sales .kind {
  font-size: .7rem; border-radius: 3px; padding: .1rem .4rem; background: var(--neutral-soft); color: var(--muted);
  letter-spacing: .03em;
}
.sales .kind.halal { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.sales .kind.sample { background: var(--warn-soft); color: var(--warn); font-weight: 600; }

/* the request rows */
.sales .reqs { display: flex; flex-direction: column; gap: .5rem; }
.sales .req {
  border: 1px solid var(--line); border-radius: 6px; padding: .7rem .85rem; background: #fff;
  cursor: pointer; display: flex; flex-direction: column; gap: .3rem;
}
.sales .req:hover, .sales .req:focus-visible { border-color: var(--accent); outline: none; }
.sales .req-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.sales .req .ref { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sales .req-main { display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
.sales .req .cust { font-weight: 600; }
.sales .req .prod { color: var(--muted); }
.sales .req-meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--muted); }
.sales .req.ready { border-left: 4px solid var(--accent); background: var(--accent-soft); }
.sales .req.ready .cust { color: var(--accent); }
.sales .req.waiting .cust { font-weight: 500; }
.sales .req.done { opacity: .65; }
.sales .ready-card { border-color: var(--accent); }

/* the result */
.sales .card.head h2.title { font-size: 1.3rem; font-weight: 600; margin: .2rem 0 .1rem; }
.sales .card.head .sub { margin: 0 0 .6rem; color: var(--muted); font-size: .9rem; }
.sales .crumbs { margin-bottom: .2rem; }
.sales .crumbs .ghost { padding-left: 0; }
.sales .where { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; }
.sales .where .since { color: var(--muted); font-size: .85rem; }
.sales .result .note { margin: 0 0 .7rem; }
.sales .declaration.big { font-size: 1.05rem; line-height: 1.85; word-break: break-word; }
.sales .count { margin: .5rem 0 0; color: var(--muted); font-size: .8rem; }
.sales .actions.send { margin-top: 1.1rem; }
.sales button.big { min-height: 3rem; padding: .6rem 1.4rem; font-size: 1rem; }
.sales .btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  border-radius: 5px; padding: .6rem 1.2rem; min-height: 3rem; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: inherit;
}
.sales .btn.wa { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.sales ul.remarks { list-style: none; margin: 0; padding: 0; }
.sales ul.remarks li { padding: .5rem 0; border-top: 1px solid var(--neutral-soft); font-size: .88rem; }
.sales ul.remarks .who { font-weight: 600; }
.sales ul.remarks .when { color: var(--muted); font-size: .78rem; margin-left: .4rem; }

/* a phone: the salesperson copying a list to a customer */
@media (max-width: 560px) {
  .sales .actions.send > * { flex: 1 1 100%; }
  .sales .actions.send button, .sales .actions.send .btn { min-height: 3.2rem; font-size: 1.02rem; }
  .sales .req-top { flex-wrap: wrap; }
  .sales .card.head h2.title { font-size: 1.15rem; }
}

@media print {
  nav.tabs { display: none !important; }
  .sales .declaration.big { font-size: 12pt; line-height: 1.6; }
  .sales .card.head .crumbs { display: none; }
}

/* --- R&D and regulatory screens --- */

.tablewrap { overflow-x: auto; }
/* The another-spelling box sits in a full-width table row; on a phone the table scrolls sideways, so the box
   is pinned to the left edge and held to the screen's width instead of running off with the columns. */
.aliasrow > td > .aliasbox { position: sticky; left: 0; max-width: min(34rem, calc(100vw - 4.5rem)); white-space: normal; }
table.queue tbody tr[data-go] { cursor: pointer; }
table.queue tbody tr[data-go]:hover td, table.queue tbody tr[data-go]:focus td { background: var(--accent-soft); }
table.queue td.ref { font-weight: 600; white-space: nowrap; }
table.queue .stage { font-size: .78rem; border-radius: 999px; padding: .15rem .6rem; background: var(--neutral-soft); color: var(--muted); white-space: nowrap; }
.kind { font-size: .75rem; border-radius: 3px; padding: .1rem .45rem; background: var(--neutral-soft); color: var(--muted); white-space: nowrap; }
.kind.halal { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.kind.sample { background: var(--warn-soft); color: var(--warn); font-weight: 600; }

.reqhead { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; align-items: baseline; }
.reqhead .ref { font-size: 1.1rem; font-weight: 700; }
.reqhead .kv { color: var(--muted); font-size: .85rem; }
.reqhead .kv b { color: var(--ink); font-weight: 600; }
.reqhead .stage { font-size: .78rem; border-radius: 999px; padding: .15rem .6rem; background: var(--neutral-soft); color: var(--muted); }
.reqhead button.ghost { margin-left: auto; }

.bench-total {
  position: sticky; top: .5rem; z-index: 5;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--warn);
  border-radius: 8px; padding: .7rem 1.1rem; margin-bottom: 1.1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.bench-total.ok { border-left-color: var(--ok); }
.bench-total.idle { border-left-color: var(--line); }
.bench-total .big { font-size: 2.3rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.bench-total .big span { font-size: 1.1rem; font-weight: 600; color: var(--muted); margin-left: .15rem; }
.bench-total .status { font-weight: 600; }
.bench-total.ok .status { color: var(--ok); }
.bench-total.off .status { color: var(--warn); }
.bench-total .meta { color: var(--muted); font-size: .82rem; flex-basis: 100%; }

.bench-cols { display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: start; margin-bottom: 1.1rem; }
@media (min-width: 900px) { .bench-cols { grid-template-columns: 1fr 1fr; } }
.bench-cols .card { margin-bottom: 0; }

table.bench-rows td.n { width: 2rem; color: var(--muted); font-size: .8rem; }
table.bench-rows input.nomatch { border-color: #d9a441; background: var(--warn-soft); }
table.bench-rows button.ghost { font-size: 1.1rem; line-height: 1; color: var(--muted); }
table.bench-rows button.ghost:hover { color: var(--block); }

table.lines td.rank { width: 2rem; color: var(--muted); font-size: .8rem; }
table.lines tr.unresolved td { color: var(--block); }
table.lines td.tn { overflow-wrap: anywhere; font-size: .86rem; }
table.lines td .from { color: var(--muted); font-size: .76rem; margin-top: .1rem; overflow-wrap: anywhere; }
/* A trade name that opens its breakdown (2026-10-28): reads as a link, taps like a button. */
button.linkbtn { all: unset; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
button.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
table.lines tfoot td { color: var(--muted); font-size: .82rem; border-bottom: none; padding-top: .5rem; }
.tag span.unknown { background: var(--block-soft); color: var(--block); }
.tag span.range { background: var(--neutral-soft); }
.pending { font-size: .75rem; color: var(--muted); font-style: italic; margin-left: .5rem; align-self: center; }
.hint-inline { color: var(--muted); font-size: .85rem; }
h3.sub { font-size: .85rem; font-weight: 600; margin: 1rem 0 .3rem; }
.legend { color: var(--muted); font-size: .8rem; margin: .7rem 0 0; }
ul.worklist { margin: .5rem 0 .5rem; padding-left: 1.1rem; }
ul.worklist li { margin-bottom: .3rem; }
ul.worklist .what { font-weight: 600; }
li .mk { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: .45rem; }

ul.remarks { padding: 0; margin: .4rem 0 0; list-style: none; }
ul.remarks li { border-left: 3px solid var(--line); padding: .2rem .7rem; margin-bottom: .5rem; font-size: .88rem; white-space: pre-wrap; }
ul.remarks .by { color: var(--muted); font-size: .78rem; }

.handover { border-top: 1px dashed var(--line); margin-top: 1rem; padding-top: .8rem; }
.bench-next .declaration { margin-bottom: .2rem; }
.signed { background: var(--ok-soft); border: 1px solid #bcd9c6; color: var(--ok); border-radius: 6px; padding: .7rem .9rem; font-size: .9rem; }
.allclear { color: var(--ok); font-weight: 600; margin: .4rem 0; }
.checkline { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; margin: .7rem 0 0; color: var(--ink); }
.checkline input { margin-top: .3rem; width: auto; }
details.secondary { margin-top: .8rem; }
details.secondary summary { cursor: pointer; color: var(--accent); font-size: .88rem; }
ol.declist { font-size: .88rem; columns: 2; column-gap: 2rem; margin: .6rem 0; }
@media (max-width: 700px) { ol.declist { columns: 1; } }

@media print { .bench-total { position: static; box-shadow: none; } }

/* --- write-up and proofreading --- */

.wu-head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.wu-head h2 .sub { font-weight: 400; margin-left: .3rem; }
.wu-head-right { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.wu-head-right button { font-size: .85rem; padding: .3rem .7rem; }

.wu-cols { display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: start; margin-bottom: 1.1rem; }
.wu-cols .card { margin-bottom: 0; }
.wu-cols.tight { margin-bottom: 0; }
@media (min-width: 880px) { .wu-cols { grid-template-columns: 1fr 1fr; } }

/* Prose is read as prose: proportional type, the writer's line breaks kept. */
.wu-text {
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: .95rem;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 6px; padding: .9rem 1rem; min-height: 3.5rem;
}
.wu-text.hers { border-left-color: var(--accent); }
.wu-text.quiet { background: var(--bg); border-left-color: var(--line); font-size: .9rem; }
.wu-none { color: var(--muted); font-style: italic; }
.wu-decl { margin-bottom: 1rem; font-size: .88rem; }
textarea.prose-edit { font-family: inherit; font-size: .95rem; line-height: 1.7; min-height: 20rem; }
textarea.prose-edit.short { min-height: 7rem; }
.writeup .group, .proof .group { margin-top: .9rem; }
.writeup .note, .proof .note { color: var(--muted); font-size: .8rem; margin: .4rem 0 0; }

/* Where a write-up stands. Green only once it is approved. */
.wstatus {
  display: inline-block; border-radius: 999px; padding: .15rem .6rem;
  font-size: .78rem; background: var(--neutral-soft); color: var(--muted); white-space: nowrap;
}
.wstatus.submitted, .wstatus.amended { background: var(--accent-soft); color: var(--accent); }
.wstatus.checked { background: var(--warn-soft); color: var(--warn); }
.wstatus.approved { background: var(--ok-soft); color: var(--ok); }
.wstatus.superseded { background: var(--block-soft); color: var(--block); }

/* What changed between the draft and her version. */
.wu-diff del { background: var(--block-soft); color: var(--block); text-decoration: line-through; padding: 0 .15rem; border-radius: 3px; }
.wu-diff ins { background: var(--ok-soft); color: var(--ok); text-decoration: none; font-weight: 600; padding: 0 .15rem; border-radius: 3px; }

ul.findings li .where { color: var(--muted); font-size: .78rem; margin-top: .15rem; font-family: ui-monospace, Consolas, monospace; }
.wu-engine { margin: .8rem 0 0; line-height: 1.5; }

/* The proofreader's pages carry less, so the little they carry can be larger. */
.proof .card h2 { font-size: 1.05rem; }
.proof .wu-text { font-size: 1rem; }

@media print { .wu-head-right, .writeup .actions, .proof .actions { display: none !important; } }
/* The SDS form (2026-09-11): the customer's block and four product facts, two columns on a desk. */
.grid2 { display: grid; grid-template-columns: 1fr; gap: .6rem 1rem; margin: .6rem 0; }
@media (min-width: 720px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.grid2 label { display: block; font-size: .85rem; margin-bottom: .2rem; }
.grid2 input, .grid2 select { width: 100%; }

/* The sample write-up (2026-09-15): the mark is on the screen as well as on the paper. */
.sample-mark { border: 1px solid #8a1c1c; color: #8a1c1c; background: #fff7f7; font-weight: 600; font-size: .82rem; padding: .4rem .6rem; border-radius: 4px; margin: .4rem 0 .8rem; text-align: center; }
.sample-mark .en { display: block; font-weight: normal; font-size: .76rem; margin-top: .15rem; }
.sample-picks { display: grid; grid-template-columns: 1fr; gap: .3rem .8rem; margin: .4rem 0 .6rem; }
@media (min-width: 720px) { .sample-picks { grid-template-columns: 1fr 1fr; } }
.sample-picks label { display: flex; gap: .45rem; align-items: baseline; font-size: .92rem; cursor: pointer; }
.sample-opts { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin: .5rem 0; }
.sample-opts label { display: inline-flex; gap: .4rem; align-items: center; font-size: .9rem; }
.sample-text h3 { font-size: .98rem; margin: .8rem 0 .2rem; }
.sample-text p { margin: 0 0 .4rem; line-height: 1.55; }
.sample-text .removed { color: #8a1c1c; font-style: italic; }
ul.sample-list { list-style: none; padding: 0; margin: .4rem 0 0; }
ul.sample-list li { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; padding: .35rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
ul.sample-list li .h { color: var(--muted); font-size: .82rem; }

/* A link that looks like a button (the print page opens by a plain link, which no popup blocker eats). */
a.btn { display: inline-block; text-decoration: none; border: 1px solid var(--line); border-radius: 6px; padding: .45rem .9rem; color: inherit; background: #fff; font-size: .95rem; line-height: 1.2; }
a.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
a.btn.small { padding: .2rem .55rem; font-size: .82rem; }
a.btn.ghost { background: transparent; }

/* NOT applications (2026-09-26): the status pill in the applications table. */
.applist .stage { font-size: .78rem; border-radius: 999px; padding: .1rem .55rem; background: var(--neutral-soft); color: var(--muted); white-space: nowrap; }
.approw { border-top: 1px solid var(--line); padding: .6rem 0; }
.approw .appmeta { margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.approw .appacts { margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.approw .appacts input { max-width: 11rem; }

/* Today (2026-09-26): one line per block, rows open on a tap. */
.todayblock { border-top: 1px solid var(--line); padding: .7rem 0; }
.todayblock summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 1.6rem; }
.todayblock summary::-webkit-details-marker { display: none; }
.todayblock summary::before { content: "\25B8"; color: var(--accent); font-size: 1.6rem; line-height: 1; width: 1.2rem; flex: 0 0 1.2rem; }
.todayblock[open] summary::before { content: "\25BE"; }
.todayblock.empty { color: var(--muted); padding-left: 1.5rem; }

/* Forest Canopy headings (Toms, 2026-09-30): serif for titles, sans for everything read in a row. */
h1, h2, header.bar h1, header.bar h1 button.home { font-family: var(--font-head); letter-spacing: .01em; }
header.bar { border-bottom: 3px solid var(--olive); }

/* 轮到你: the red count of what waits on you here (2026-10-03). */
.turnbadge{display:inline-block; min-width:18px; padding:0 6px; margin-left:4px; border-radius:10px; background:#d93025; color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; vertical-align:1px}

/* Ask Gen (2026-10-03): the help button, bottom right on every screen once signed in. */
.gen-fab { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30;
  border-radius: 22px; background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); padding: 9px 16px; font-size: .95rem; cursor: pointer; }
.gen-panel { position: fixed; right: 14px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 31;
  width: min(400px, calc(100vw - 28px)); max-height: calc(100vh - 100px); overflow: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 28px rgba(0,0,0,.2); padding: 14px 16px; }
.gen-panel[hidden], .gen-fab[hidden], .gen-tofb[hidden] { display: none; }
.gen-panel textarea { width: 100%; }
.gen-head { display: flex; justify-content: space-between; align-items: center; }
.gen-x { min-height: 34px; padding: 2px 10px; font-size: 20px; line-height: 1; border: 0; background: none; cursor: pointer; }
.gen-sub { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
.gen-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gen-out, .gen-done { white-space: pre-wrap; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--neutral-soft);
  border: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.gen-out.muted { color: var(--muted); }
.gen-out.warn, .gen-done.warn { background: var(--warn-soft); border-color: #f0dfb8; color: var(--warn); }
.gen-done.ok { background: var(--ok-soft); border-color: #cfe6d9; color: var(--ok); }
.gen-fb { margin-top: 12px; }
.gen-fbtitle { font-weight: 600; margin: 0 0 6px; font-size: 14px; }
@media print { .gen-fab, .gen-panel { display: none !important; } }
/* ⭐ 2026-10-28 (RA walk at 375 px): the floating button sat on the last rows of the signing table and the statement checkbox.
   The page keeps a strip the height of the button free at the bottom, so whatever is last can always be scrolled clear of it. */
body:has(.gen-fab:not([hidden])) #app { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@media print { body #app { padding-bottom: 0 !important; } }

/* Raw material files (2026-10-15): a plain list, links big enough to tap on a phone. */
.rf-group h3 { margin: 0 0 .5rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.rf-sup + .rf-sup { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line, #e5e7eb); }
.rf-who { margin-bottom: .4rem; font-size: .9rem; overflow-wrap: anywhere; }
.rf-files { list-style: none; margin: 0; padding: 0; }
.rf-file { padding: 0; border-top: 1px solid var(--line, #e5e7eb); min-height: 44px; }
.rf-file:first-child { border-top: 0; }
.rf-link { display: block; padding: .55rem 0 .1rem; font-weight: 500; overflow-wrap: anywhere; word-break: break-word; }
.rf-meta { display: block; padding-bottom: .55rem; margin-top: 0; font-size: .8rem; color: var(--muted); }
.rf-tag { display: inline-block; padding: 0 .4rem; margin-right: .25rem; border: 1px solid var(--line, #d6d9de); border-radius: 4px; font-size: .72rem; line-height: 1.5; color: var(--muted); }
.rf-tag.rf-note { color: #5e3f00; border-color: #ead9b0; background: var(--warn-soft); }
.rf-tag.rf-bad { color: #6d1a20; border-color: #eec2c5; background: var(--block-soft); font-weight: 600; }

/* Sign in through the TCT Central Hub (2026-10-17). */
.hubbtn{display:block; text-align:center; padding:11px 12px; border:1px solid var(--accent, #1f6f54); border-radius:8px; color:var(--accent, #1f6f54); font-weight:600; min-height:44px; line-height:22px; box-sizing:border-box; text-decoration:none; margin:.4rem 0}

/* Supplier paper proposals (2026-10-30): a line the model could not read is greyed until Regulatory types or drops it. */
table.comp tr.unreadable td { background: var(--neutral-soft); }
table.comp td.off { color: var(--warn); font-weight: 600; }

/* Supplier paper proposal on a phone (role-play 2026-10-30): the "Printed on the paper" column folds under the INCI name,
   and the "% to use" box keeps its width so 0.00037 is never clipped to 0.0003. */
.phone-only { display: none; }
@media (max-width: 560px) {
  table.comp .printed { display: none; }
  table.comp .phone-only { display: block; }
  table.grid.comp td.num:has(input[data-prop="pct"]) { width: 6.4rem; }
  table.comp input[data-prop="pct"] { max-width: none !important; width: 6rem; font-size: .95rem; }
}
@media (max-width: 560px) {
  table.grid.comp td.num:first-child { width: 2.4rem; }
  table.comp input[data-prop="name"] { width: 100%; min-width: 7.5rem; }
}