/* Portal draft D: A's chrome (top bar, squarer controls, blue-grey light mode, one blue data hue) on C's page structure
   (separated cards, sticky section sub-nav, summary strip, kit bars, full width) and C's warm near-black dark mode. */
:root {
  color-scheme: light;
  --ground: #f2f4f7; --surface: #ffffff; --raised: #e9ecf1; --hover: #f5f6f9;
  --rule: #dde1e8; --line: #c9ced8; --control: #8a93a3;
  --text: #12151a; --muted: #555d6b; --faint: #667082;
  --primary: #12151a; --on-primary: #ffffff;
  --accent: #1d5fbf; --accent-track: #dce6f5;
  --negative: #a3261f; --positive: #1b6e44;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23555d6b' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='2.2'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E");
  --r-card: 8px; --r-ctl: 6px; --r-in: 6px;
  --h: 40px; --gap: 16px; --pad: 28px; --top: 60px; --col: 1680px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0d0c0b; --surface: #171615; --raised: #262321; --hover: #1f1d1b; --rule: #262321; --line: #2f2c29; --control: #5a5651; --text: #eceae8; --muted: #b9b5ae; --faint: #9a958e; --primary: #eceae8; --on-primary: #121110; --accent: #5db8ee; --accent-track: #22303a; --negative: #f08a9b; --positive: #6fcf97; --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23b9b5ae' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23121110' stroke-width='2.2'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E"); color-scheme: dark; } }
:root[data-theme="dark"] { --ground: #0d0c0b; --surface: #171615; --raised: #262321; --hover: #1f1d1b; --rule: #262321; --line: #2f2c29; --control: #5a5651; --text: #eceae8; --muted: #b9b5ae; --faint: #9a958e; --primary: #eceae8; --on-primary: #121110; --accent: #5db8ee; --accent-track: #22303a; --negative: #f08a9b; --positive: #6fcf97; --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23b9b5ae' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23121110' stroke-width='2.2'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E"); color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 16px/1.5 var(--font); color: var(--text); background: var(--ground); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }

/* top bar (A): logo, Projects / Vendors / Users, who, theme, log out */
.top { position: sticky; top: 0; z-index: 20; height: var(--top); background: var(--ground); border-bottom: 1px solid var(--rule); }
.top-in { max-width: var(--col); margin: 0 auto; padding-inline: 32px; height: 100%; display: flex; align-items: center; gap: 40px; }
.logo { display: block; width: 165px; height: 20px; flex: none; background: currentColor; -webkit-mask: url("brand/logo/mag-single-line.svg") no-repeat left center / contain; mask: url("brand/logo/mag-single-line.svg") no-repeat left center / contain; }
.top nav { display: flex; gap: 8px; }
.top nav a { padding: 7px 14px; border-radius: 6px; color: var(--muted); white-space: nowrap; }
.top nav a:hover { background: var(--raised); color: var(--text); text-decoration: none; }
.top nav a[aria-current] { background: var(--raised); color: var(--text); }
.who { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who .meta { white-space: nowrap; margin-right: 4px; }
.content { max-width: var(--col); margin: 0 auto; padding: 24px 32px 96px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.crumb { font-size: 14px; color: var(--muted); margin-bottom: -8px; }
.crumb a:hover { text-decoration: underline; }

/* page header */
.head { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; padding: 0 var(--pad) 0; }
.head h1 { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.meta { color: var(--muted); font-size: 15px; }
.head .meta { margin-top: 6px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.finding { margin-top: 14px; color: var(--text); font-size: 16px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--rule); margin: 4px var(--pad) 8px; }
.tabs a { height: 44px; display: flex; align-items: center; font-size: 15px; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current] { color: var(--text); border-color: var(--text); }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--raised); color: var(--text); font-size: 13px; white-space: nowrap; }
.pill.pos { color: var(--positive); }

/* cards */
.card { background: var(--surface); border-radius: var(--r-card); padding: var(--pad); scroll-margin-top: 16px; }
.card > h2 { font-size: 20px; line-height: 1.3; font-weight: 700; }
.card > h2 + .meta, .card > .meta { margin-top: 6px; max-width: 120ch; }
.card > h2 + * { margin-top: 20px; }
.card > h2 + .meta + * { margin-top: 20px; }
.cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); }
.cols > .card { display: flex; flex-direction: column; }
.cols > .card form { display: flex; flex-direction: column; flex: 1; }
.cols .actions { margin-top: auto; padding-top: 24px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.kpi { padding: 0 var(--pad); border-left: 1px solid var(--rule); }
.kpi:first-child { padding-left: 0; border-left: 0; }
.kpi span { display: block; font-size: 15px; color: var(--muted); }
.kpi b { display: block; font-size: 32px; line-height: 1.25; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi b small { font-size: 16px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.kpi em { display: block; font-style: normal; font-size: 14px; color: var(--faint); margin-top: 2px; }
.bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 24px; margin-top: 24px !important; padding-top: 20px; border-top: 1px solid var(--rule); }
.bars > div { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; }
.bars span { font-size: 15px; white-space: nowrap; }
.bars b { font-weight: 400; font-variant-numeric: tabular-nums; font-size: 15px; text-align: right; }
.bars b.z { color: var(--faint); }
.bars i { grid-column: 1 / -1; display: block; height: 10px; border-radius: 5px; background: var(--accent-track); position: relative; }
.bars i u { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 5px; }
.bars > h3 { grid-column: 1 / -1; margin: 0; font: 400 15px var(--font); color: var(--muted); }

/* tables */
.scroll { margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); }
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
th { font-weight: 400; color: var(--muted); font-size: 14px; text-align: left; height: 40px; padding: 0 12px; white-space: nowrap; border-bottom: 1px solid var(--line); }
td { height: 52px; padding: 0 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tr:last-child td { border-bottom: 0; }
.r { text-align: right; }
.inputs td { height: 60px; }
tr.sum td { border-top: 1px solid var(--line); font-weight: 700; }
td.m, .m { color: var(--muted); }
td.f { color: var(--faint); }
.stat td.cell, .stat th.cell { width: 128px; text-align: right; }
.cin { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.cin small { font-size: 14px; color: var(--faint); }
.cin b { font-weight: 400; }
.cin b.z { color: var(--faint); }
.tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--raised); font-size: 13px; color: var(--text); }
.tot { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.tot i { flex: 0 0 96px; height: 8px; border-radius: 4px; background: var(--accent-track); position: relative; }
.tot i u { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 4px; }
.tot b { min-width: 3ch; text-align: right; font-weight: 700; }
.tot b.z { color: var(--faint); font-weight: 400; }
.empty { border: 1px dashed var(--line); border-radius: 10px; padding: 20px; color: var(--muted); }

/* forms */
label { display: block; font-size: 14px; color: var(--muted); }
label > input:not([type=checkbox]), label > select, label > .excl, label > textarea { margin-top: 8px; }
input:not([type=checkbox]), select, textarea, summary.sel { font: 400 16px/1 var(--font); color: var(--text); background: var(--raised); border: 1px solid transparent; border-radius: var(--r-in); height: var(--h); padding: 0 12px; width: 100%; }
input:not([type=checkbox]):hover, select:hover, summary.sel:hover { border-color: var(--control); }
input:not([type=checkbox]):focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input[type=number], input.n { text-align: right; font-variant-numeric: tabular-nums; }
input[readonly] { color: var(--muted); cursor: default; }
textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; display: block; }
select, summary.sel { appearance: none; background-image: var(--chev); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }
summary.sel { list-style: none; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
summary.sel::-webkit-details-marker { display: none; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; }
.in-cell { width: 100%; }
input.w-name { width: 220px; } input.w-num { width: 120px; } input.w-sort { width: 84px; } details.w-ex { width: 240px; }
.excl { position: relative; }
.excl[open] summary.sel { border-color: var(--control); }
.excl .panel { position: absolute; z-index: 5; top: calc(var(--h) + 6px); left: 0; width: 320px; background: var(--raised); border-radius: 12px; padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.chk { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text); white-space: nowrap; min-height: 36px; cursor: pointer; }
.chk em { font-style: normal; font-size: 14px; color: var(--faint); }
input[type=checkbox] { appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 1.5px solid var(--control); background: transparent center / 14px no-repeat; cursor: pointer; }
input[type=checkbox]:checked { background-color: var(--primary); background-image: var(--tick); border-color: var(--primary); }
.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 16px; }
.checks.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inline { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.inline label { width: 168px; }
.inline label.wide { width: 280px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: var(--h); padding: 0 18px; border: 0; border-radius: var(--r-ctl); background: var(--raised); color: var(--text); font: 400 15px/1 var(--font); white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--control); text-decoration: none; }
.btn.primary { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.btn.primary:hover { opacity: .88; background: var(--primary); }
.btn.danger { color: var(--negative); }
.btn.theme { padding: 0 14px; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.row-actions { display: flex; gap: 12px; justify-content: flex-end; }
.form-foot { display: flex; gap: 12px; margin-top: 24px; align-items: center; flex-wrap: wrap; }
.form-foot .meta { margin: 0; }
.note { margin: 20px 0 0; color: var(--muted); font-size: 15px; }
.stack { display: grid; gap: 20px; }
.sub { margin-top: 20px !important; }

/* phone and tablet */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cols { grid-template-columns: 1fr; }
  .checks, .checks.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --pad: 16px; --h: 44px; }
  .head { flex-direction: column; gap: 16px; padding: 0 4px; }
  .head h1 { font-size: 24px; }
  .tabs { margin: 0 0 4px; gap: 22px; }
  .grid { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .scroll { margin: 0 -16px; padding: 0 16px; }
  .bars { grid-template-columns: 1fr 1fr; }
  .kpi b { font-size: 26px; }
  .kpi { padding: 0 0 0 12px; }
  .kpi:nth-child(odd) { padding-left: 0; }
  .kpi em { display: none; }
  .actions .btn { flex: 1 1 auto; }
  .inline label, .inline label.wide { width: 100%; }
  .checks, .checks.four { grid-template-columns: 1fr; }
  .excl .panel { width: 280px; }
  td:first-child, th:first-child { position: sticky; left: 0; background: var(--surface); padding-right: 12px; z-index: 1; }
}
@media (max-width: 1400px) { .scroll { overflow-x: auto; } }

/* D overrides */
.head { padding: 0; }
.head h1 { font-size: 32px; }
.subnav { position: sticky; top: var(--top); z-index: 10; margin: 0; padding: 0; background: var(--ground); gap: 28px; }
.subnav a small { margin-left: 6px; color: var(--faint); font-size: 13px; }
.card { scroll-margin-top: calc(var(--top) + 60px); }
.pill { border-radius: 4px; }
.tag { border-radius: 4px; }
.btn { font-size: 15px; }
.btn.sm { height: 34px; padding: 0 14px; }
.btn.quiet { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.btn.quiet:hover { background: var(--raised); }
.btn:hover { background: var(--line); }
.btn.primary:hover { background: var(--primary); }
.bars i, .bars i u { border-radius: 3px; } .tot i, .tot i u { border-radius: 3px; }

.card input:not([type=checkbox]), .card select, .card textarea, .card summary.sel { background: var(--ground); border-color: var(--line); }
.excl .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
input[type=checkbox] { border-radius: 4px; border-color: var(--control); }
.row-actions { flex-wrap: nowrap; }
.nw, .sel { white-space: nowrap; }
.stat td.cell, .stat th.cell { width: 150px; }
.stat th:last-child, .stat td:last-child { width: 170px; }
.stat .tot i { flex: 0 0 140px; }
.checks { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kits-note { max-width: none; }
@media (min-width: 1101px) { .cols { grid-template-columns: 3fr 2fr; } }
.cols { scroll-margin-top: calc(var(--top) + 60px); }
/* history fold */
.fold > summary { list-style: none; display: flex; align-items: baseline; gap: 16px; cursor: pointer; border-radius: 4px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { font-size: 20px; font-weight: 700; margin: 0; }
.fold > summary::after { content: ""; margin-left: auto; align-self: center; width: 8px; height: 8px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; }
.fold[open] > summary::after { transform: rotate(-135deg); }
.fold .count { color: var(--muted); font-size: 15px; }
.fold[open] > summary { margin-bottom: 20px; }
@media (max-width: 900px) {
  :root { --pad: 16px; --h: 44px; }
  .tabs { overflow-x: auto; overflow-y: hidden; padding-bottom: 1px; }
  .top { height: auto; } .top-in { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 8px 16px; }
  .top nav { order: 3; width: 100%; }
  .who .meta { display: none; } .who { gap: 8px; }
  .logo { width: 140px; }
  .content { padding: 16px 16px 64px; }
  .subnav { top: 0; position: static; }
  .head { flex-direction: column; gap: 16px; }
  .head h1 { font-size: 26px; }
  .card { scroll-margin-top: 16px; }
  .scroll { overflow-x: auto; }
  td:first-child, th:first-child { position: sticky; left: 0; background: var(--surface); padding-right: 12px; z-index: 1; }
}
@media (max-width: 1500px) { .scroll { overflow-x: auto; } }
.subnav { box-shadow: 0 10px 0 var(--ground); }
.cols { align-items: start; }
.cols > .card, .cols > .card form { display: block; }
.cols .actions { padding-top: 0; margin-top: 24px; }
@media (max-width: 900px) { .top { position: static; } }
.cols { align-items: stretch; }
.cols > .card { display: flex; flex-direction: column; }
.cols > .card form { display: flex; flex-direction: column; flex: 1; }
.cols .actions { margin-top: auto; padding-top: 24px; }

/* ---- port additions: real markup, no inline styles (CSP) ---- */
.top-in .who form, .who form { margin: 0; display: flex; align-items: center; gap: 12px; }
.who a.meta:hover { text-decoration: underline; }
.btn.theme { padding: 0 14px; }
.chk, .check { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text); white-space: nowrap; min-height: 36px; cursor: pointer; }
label.check { display: flex; width: max-content; }
.check .meta { font-size: 14px; color: var(--faint); }
.excl summary { cursor: pointer; }
.excl .panel label { display: flex; }
.flash { padding: 12px 16px; border-radius: var(--r-ctl); background: var(--surface); border-left: 4px solid var(--positive); }
.flash.err { border-left-color: var(--negative); }
.narrow { max-width: 400px; margin: 48px auto; background: var(--surface); border-radius: var(--r-card); padding: 32px; }
.narrow > h1 { font-size: 26px; margin-bottom: 20px; }
.narrow input:not([type=checkbox]) { width: 100%; }
.narrow .btn { width: 100%; }
.narrow .meta { margin-top: 16px; }
.narrow .stack { gap: 16px; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 2px; }
.bar h1, h1 { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.bar h1 { font-size: 32px; }
.content > .flash { margin: 0; }
.pill.warn { color: var(--negative); }
.pill + .pill { margin-left: 0; }
.flags { display: flex; gap: 6px; flex-wrap: wrap; }
td .flags { flex-wrap: wrap; min-width: 150px; }
td small.sub2 { display: block; color: var(--faint); font-size: 13px; }
td form, .row-actions form { margin: 0; display: inline; }
td .btn.sm { height: 30px; padding: 0 12px; }
meter { appearance: none; display: block; width: 100%; height: 10px; border: 0; background: var(--accent-track); border-radius: 3px; }
meter::-webkit-meter-bar { background: var(--accent-track); border: 0; border-radius: 3px; height: 10px; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--accent); border-radius: 3px; }
meter::-moz-meter-bar { background: var(--accent); border-radius: 3px; }
.bars > div { grid-template-columns: 1fr auto; }
.bars meter { grid-column: 1 / -1; }
.kits input[name=name] { width: 220px; } .kits input[name=sort] { width: 84px; } .kits input[size="8"] { width: 120px; text-align: right; }
.kits td { height: 60px; }
.kits details.excl { width: 240px; }
td .cin { min-width: 110px; }
td.cell, th.cell { width: 150px; }
.fold > summary h2 { margin: 0; }
.card > h2 + .scroll, .card > h2 + .meta + .scroll { margin-top: 20px; }
.card > .scroll + .scroll, .card > .scroll + form, .card > form + .scroll { margin-top: 24px; }
.card > p.meta + p.meta { margin-top: 12px; }
.card.pad0 { padding-bottom: 0; }
.dash td { height: 64px; }
.dash td.top { vertical-align: middle; }
.dash a.name { font-weight: 700; }
.dash td.stk { line-height: 1.35; padding-top: 8px; padding-bottom: 8px; }
.total { font-weight: 700; }
.card > p.meta + .scroll { margin-top: 20px; }

.head-t { display: flex; gap: 20px; align-items: flex-start; }
.pimg { display: block; height: auto; border-radius: 8px; max-width: 100%; }
.head-t .pimg { width: 200px; }
.pcell { display: flex; align-items: center; gap: 12px; } .pcell .pimg { width: 64px; flex: none; }
@media (max-width: 640px) { .head-t { flex-direction: column; } }

/* master data: the two flags share one grid cell; delete zone; file picker styled like a button */
.checks-col { display: grid; gap: 8px; align-content: end; }
.danger-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--rule, rgba(128,128,128,.25)); }
.btn.danger { border-color: #b3261e; color: #b3261e; }
.btn.danger:hover { background: #b3261e; color: #fff; }
input[type=file] { padding: 4px; }
input[type=file]::file-selector-button { font: inherit; font-weight: 700; padding: 6px 14px; margin-right: 12px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--raised, rgba(128,128,128,.15)); }
/* kits table: headers sit over the left edge of their inputs, not at the right edge of the cell */
.kits th.r { text-align: left; }
.kits input[size="8"] { text-align: right; }
.kits td:last-child, .kits th:last-child { text-align: center; }

tr.cancelled td { color: var(--muted, #888); text-decoration: line-through; }
tr.cancelled td:last-child, tr.cancelled td small { text-decoration: none; }

.confirm-box { border: 1px solid #b3261e; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.confirm-box ul { margin: 8px 0 0 18px; }
tr.cancelled td a { text-decoration: underline; }

/* MOQ reminder: the row is saved anyway, the warning sits at the fields */
.moq-warn { display: block; font-size: 13px; color: #d9822b; margin-top: 2px; }
.moq-warn[hidden] { display: none; }
tr.below-moq td { background: rgba(217, 130, 43, .08); }
.flash.warn { border-left-color: #d9822b; }