/* Indeco Ops, styled like indecony.com (Doron, 2026-10-29: "Redo the CRM styling to match the website"): Jost throughout,
   near-black ink, warm cream surfaces, gold letterspaced eyebrows, pill buttons, and type a size larger than the old
   Cardo/Poppins look, because the team finds small, thin type hard to read. Same tokens as the store emails and account page. */
:root {
  --gold: #A47D2D;          /* the brand gold: logo, rules, bars */
  --gold-deep: #8A6620;     /* gold for text, as in the emails */
  --gold-tint: #F4F2EE;     /* cream: cards, panels, inputs on hover */
  --ink: #15140F;           /* the website's button and heading black */
  --body: #3A3832;
  --muted: #6D6A61;
  --rule: #E2DED6;
  --paper: #FFFFFF;
  --good: #3f6b4a;
  --warn: #8B0000;
  --font: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--font);     /* kept for older page styles that ask for it */
  --radius: 37px;           /* indecony.com's pill buttons */
  --btn-hover: #3A3832;
  --row-hover: #FAF9F6;
  --error-bg: #f8eeea;
  --input-rule: #CFCAC0;
  --shadow: rgba(21,20,15,.10);
  --logo-filter: none;
  color-scheme: light;
}
/* Dark mode (Doron, 2026-10-29): follows the computer's setting unless the header switch picks one. The website's ink
   becomes the page, cream becomes the text, and gold stays gold. Printed documents keep their own light styles. */
:root[data-theme="dark"] {
  --gold: #C9A45A; --gold-deep: #D4B06A; --gold-tint: #22201A; --ink: #F4F2EE; --body: #D8D4CA; --muted: #A39E92;
  --rule: #34312A; --paper: #15140F; --good: #8DBF98; --warn: #EE8A7E; --btn-hover: #D8D4CA; --row-hover: #1C1A15;
  --error-bg: #2E1B18; --input-rule: #4A463D; --shadow: rgba(0,0,0,.45); --logo-filter: invert(1) hue-rotate(180deg) brightness(1.15);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gold: #C9A45A; --gold-deep: #D4B06A; --gold-tint: #22201A; --ink: #F4F2EE; --body: #D8D4CA; --muted: #A39E92;
    --rule: #34312A; --paper: #15140F; --good: #8DBF98; --warn: #EE8A7E; --btn-hover: #D8D4CA; --row-hover: #1C1A15;
    --error-bg: #2E1B18; --input-rule: #4A463D; --shadow: rgba(0,0,0,.45); --logo-filter: invert(1) hue-rotate(180deg) brightness(1.15);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--gold-deep); text-decoration: none; } a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
h1 { font: 400 40px/1.15 var(--font); color: var(--ink); letter-spacing: -0.005em; margin: 6px 0 6px; }
h2 { font-weight: 500; font-size: 22px; color: var(--ink); margin: 0 0 14px; }
h3 { font-weight: 500; font-size: 18px; color: var(--ink); margin: 0 0 8px; }
p { margin: 0 0 10px; color: var(--body); }
.sub { color: var(--muted); font-size: 17px; margin-bottom: 24px; }

/* Header: logo left like the website's, a gold eyebrow, nav in the website's plain uppercase. */
.top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px 36px; border-bottom: 1px solid var(--rule); background: var(--paper); position: relative; }
.brand img { height: 32px; display: block; filter: var(--logo-filter); }
.brand-sub { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500;
  padding-left: 16px; border-left: 1px solid var(--rule); }
.top nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.top nav a { white-space: nowrap; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-weight: 400;
  padding: 8px 12px; border-bottom: 1px solid transparent; }
.top nav a:hover { color: var(--gold-deep); text-decoration: none; }
.top nav a.on { border-bottom-color: var(--ink); }
/* Menu headers with dropdowns. */
.top nav details.menu { position: relative; }
.top nav details.menu > summary { list-style: none; cursor: pointer; white-space: nowrap; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); font-weight: 400; padding: 8px 12px; border-bottom: 1px solid transparent; }
.top nav details.menu > summary::-webkit-details-marker { display: none; }
.top nav details.menu > summary::after { content: '\25BE'; margin-left: 6px; font-size: 11px; color: var(--gold); }
.top nav details.menu > summary:hover { color: var(--gold-deep); }
.top nav details.menu.on > summary { border-bottom-color: var(--ink); }
.top nav .menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 200px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 12px 32px var(--shadow); padding: 8px 0; display: flex; flex-direction: column; overflow: hidden; }
.top nav .menu-list a { padding: 10px 18px; border-bottom: 0; text-transform: none; letter-spacing: 0; font-size: 16px; }
.top nav .menu-list a:hover { background: var(--gold-tint); }
.top nav .menu-list a.on { background: var(--gold-tint); box-shadow: inset 3px 0 0 var(--gold); }
.top .who { display: flex; gap: 12px; align-items: center; font-size: 14px; padding-left: 16px; border-left: 1px solid var(--rule); }
.top .who a { color: var(--muted); }
.theme-switch { background: none; border: 1px solid var(--rule); color: var(--muted); padding: 4px 10px; font-size: 13px; border-radius: var(--radius); }
.theme-switch:hover { background: var(--gold-tint); border-color: var(--rule); color: var(--ink); }

main { max-width: 1240px; margin: 0 auto; padding: 40px 36px 56px; }
.foot { display: flex; align-items: center; gap: 14px; justify-content: center; max-width: 1240px; margin: 0 auto 28px;
  padding: 0 36px; font-size: 12px; letter-spacing: 0.3em; color: var(--gold-deep); font-weight: 500; }
.foot span { flex: 1; height: 1px; background: var(--rule); }

/* The gold eyebrow over each page title, as on indecony.com ("FOR JEWELERS"). */
.label { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 500; margin-bottom: 6px; }
.label .rule { width: 28px; height: 1px; background: var(--gold); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }

section.block { padding-top: 22px; margin-top: 34px; border-top: 1px solid var(--rule); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 44px; }
.grid-2 > * { min-width: 0; }

/* KPIs: cream cards, like the cards in the emails. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 10px; }
.kpi { padding: 18px 20px 16px; background: var(--gold-tint); border-radius: 14px; }
.kpi + .kpi { padding-left: 20px; border-left: 0; }
.kpi-label { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.kpi-value { font: 400 34px/1.15 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 6px; }
.kpi-note { font-size: 15px; color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500;
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--body); }
tbody tr:hover td { background: var(--row-hover); }
td.name, td.name a { color: var(--ink); font-weight: 500; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { border-top: 1px solid var(--ink); border-bottom: none; font-weight: 600; color: var(--ink); }
.empty { color: var(--muted); font-style: italic; padding: 8px 0; }
.small { font-size: 15px; color: var(--muted); }

.pill { display: inline-block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  padding: 3px 11px; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--body); white-space: nowrap; }
.pill.gold { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-tint); }
.pill.ink { border-color: var(--ink); color: var(--ink); }
.pill.good { border-color: var(--good); color: var(--good); }
.pill.warn { border-color: var(--warn); color: var(--warn); }
.pill.muted { color: var(--muted); }

.flash { padding: 12px 18px; margin-bottom: 22px; border-left: 3px solid var(--gold); background: var(--gold-tint); color: var(--ink); border-radius: 0 10px 10px 0; }
.flash.error { border-left-color: var(--warn); background: var(--error-bg); }
.alert { border-left: 3px solid var(--warn); padding: 8px 14px; margin: 8px 0; color: var(--warn); font-size: 16px; }

/* Forms and buttons: the website's pill buttons in ink, sentence case. */
form.stack { display: grid; gap: 14px; max-width: 600px; }
form.inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
input, select, textarea { font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--paper); border: 1px solid var(--input-rule);
  border-radius: 8px; padding: 8px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(164,125,45,.18); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--ink); }
textarea { min-height: 90px; resize: vertical; }
label.check { display: flex; gap: 10px; align-items: center; font-size: 17px; color: var(--body); }
label.check input { width: 18px; height: 18px; }
.btn, button { font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 500; cursor: pointer;
  padding: 8px 18px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; line-height: 1.35; vertical-align: middle; }
.btn:hover, button:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--paper); text-decoration: none; }
.btn.ghost, button.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover, button.ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--gold-tint); }
button.link, td button.link { background: none; border: none; color: var(--gold-deep); padding: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { color: var(--ink); background: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
details.panel { border: 1px solid var(--rule); border-radius: 14px; padding: 14px 20px; margin: 14px 0; }
details.panel > summary { cursor: pointer; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--ink); }
details.panel[open] > summary { margin-bottom: 14px; }
.sample-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto;
  border: 1px solid var(--rule); border-radius: 12px; padding: 12px; }

/* Bars for the monthly chart and style mix */
.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 100px 1fr 120px; gap: 12px; align-items: center; font-size: 15px; }
.bar-track { position: relative; height: 14px; background: var(--gold-tint); border-radius: 7px; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.bar-fill.ink { background: var(--ink); height: 5px; top: auto; }
.bars.stacked { gap: 12px; grid-template-columns: minmax(0, 1fr); }
.bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-bottom: 4px; }
.bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.bar-head .num { flex: none; color: var(--muted); }
.bars.stacked .bar-track { height: 8px; }
.legend { display: flex; gap: 16px; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; background: var(--gold); margin-right: 6px; vertical-align: -1px; }
.legend i.ink { background: var(--ink); height: 4px; vertical-align: 2px; }

/* Printable documents: statements and memos on Indeco letterhead */
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.doc-head img { height: 54px; display: block; }
.doc-head .contact { text-align: right; color: var(--gold); font-size: 13px; font-weight: 500; }
.terms { font-size: 11.5px; line-height: 1.5; color: var(--body); border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 22px; }
.sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; font-size: 12px; color: var(--muted); }
.sign div { border-top: 1px solid var(--ink); padding-top: 6px; }
.print-only { display: none; }

@media (max-width: 720px) {
  .top { padding: 14px 16px; }
  .kpi + .kpi { padding-left: 20px; }
  .top nav { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .top nav .menu-list { left: 0; right: auto; }
  .top nav a { padding: 6px 8px; }
  main { padding: 20px 16px 40px; }
  .foot { padding: 0 16px; }
  h1 { font-size: 28px; }
  .bar-row { grid-template-columns: 70px 1fr 90px; }
}
@media print {
  :root { --gold: #A47D2D; --gold-deep: #8A6620; --gold-tint: #F4F2EE; --ink: #15140F; --body: #3A3832; --muted: #6D6A61; --rule: #E2DED6; --paper: #fff; --logo-filter: none; }
  /* The ← Back to <store> link is for the screen only (Doron, 2026-11-09: it printed at the top of memos). */
  .top nav, .no-print, .flash, form, details.panel, .cc-back { display: none !important; }
  .top { border: none; padding: 0 0 12px; }
  .print-only { display: block; }
  main { padding: 0; max-width: none; }
  body.print-doc .top { display: none; }
  a { color: var(--ink); }
  /* Printed documents (memos): sized for paper, not the screen (Doron, 2026-11-04: "the design is too big"). A dozen
     rings, the terms and the signature fit one Letter page. */
  /* The margin is inside the page too, since a print dialog set to "Margins: None" drops @page margins (M-0007, 2026-11-04). */
  @page { size: letter; margin: 0.4in; }
  body.print-doc { font-size: 11pt; line-height: 1.35; background: #fff; padding: 0.25in 0.3in !important; margin: 0 !important; }
  body.print-doc .memo-copy + .memo-copy { break-before: page; }
  /* The body's top padding only reaches page 1, so with "Margins: None" the second copy started at the paper's edge
     and its top was cut off (Doron, 2026-11-09). Each later copy brings the same space with it. */
  body.print-doc .memo-copy + .memo-copy { padding-top: 0.25in; }
  body.print-doc .copy-label { font-size: 9pt; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); vertical-align: middle; margin-left: 10px; border: 1px solid var(--rule); padding: 2px 8px; border-radius: 10px }
  body.print-doc .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 4px 0 14px; font-size: 10pt; line-height: 1.4 }
  body.print-doc .parties b { display: block; font-size: 7.5pt; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 2px }
  body.print-doc main { padding: 0; }
  body.print-doc .foot { display: none; }
  body.print-doc .doc-head { display: flex; margin-bottom: 14px; align-items: center; }
  body.print-doc .doc-head img { height: 30px; }
  body.print-doc .doc-head .contact { font-size: 9pt; line-height: 1.4; }
  body.print-doc .page-head { margin: 0 0 12px; padding: 0; }
  body.print-doc .page-head .label { font-size: 8pt; margin-bottom: 2px; }
  body.print-doc h1 { font-size: 20pt; line-height: 1.1; margin: 0; }
  body.print-doc .sub { font-size: 10.5pt; margin-top: 3px; }
  body.print-doc .table-wrap { overflow: visible; margin: 0; }
  body.print-doc table { font-size: 10pt; width: 100%; }
  body.print-doc th { font-size: 7.5pt; padding: 5px 6px; }
  body.print-doc td { padding: 5px 6px; }
  body.print-doc tr { break-inside: avoid; }
  body.print-doc p { margin: 8px 0 0; font-size: 10.5pt; }
  body.print-doc .terms { font-size: 7.5pt; line-height: 1.4; margin-top: 12px; padding-top: 8px; }
  body.print-doc .sign { margin-top: 26px; font-size: 9pt; break-inside: avoid; }
}

/* Collections */
.aging { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; margin: 8px 0 4px; }
.aging-cell { padding: 12px 14px; border-right: 1px solid var(--rule); color: var(--ink); text-decoration: none; display: block; }
.aging-cell:last-child { border-right: none; }
.aging-cell:hover { background: var(--gold-tint); }
.aging-cell.on { background: var(--gold-tint); box-shadow: inset 0 -2px 0 var(--gold); }
.aging-amt { font-family: var(--font); font-size: 24px; margin: 2px 0; }
.aging-cell.b-over_90 .aging-amt, .aging-cell.b-61_90 .aging-amt { color: var(--warn); }
.btn.sm, button.sm { padding: 4px 12px; font-size: 14px; line-height: 1.3; }
td button, td .btn { padding: 4px 12px; font-size: 14px; }
td form { margin: 0; }
.note-col { max-width: 240px; }
.note-snip { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
tr.row-late td.name { color: var(--warn); }
tr.muted-row td { color: var(--muted); }
.not-received { font-size: 14px; color: var(--warn); font-weight: 500; margin-top: 3px; }
.not-received::before { content: '⚠ '; }

/* Order builder (/orders/new) */
table.builder td { vertical-align: top; }
table.builder select, table.builder input { width: 100%; min-width: 0; }
table.builder td:first-child { min-width: 320px; }
table.builder .sku { white-space: nowrap; padding-top: 14px; }
table.builder .total { white-space: nowrap; padding-top: 14px; }
.order-totals { margin-left: auto; max-width: 340px; display: grid; gap: 8px; margin-top: 10px; }
.order-totals > div, .order-totals > label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.order-totals input { width: 120px; text-align: right; }
.order-totals .grand { border-top: 1px solid var(--rule); padding-top: 8px; font-size: 17px; }

/* The client card (src/pages.js account), laid out like RDI's FileMaker Client Detail (Doron, 2026-11-07: "more of a box
   and column structure like RDI's filemaker has"): a dark band with the store's key facts, a rail of actions, four framed
   columns with a bar on each and small labels over values, then tabs over one framed panel. */
.cc { --cc-band: #15140F; --cc-frame: var(--rule); margin-top: -8px; }
.cc-band { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; background: var(--cc-band); color: #F4F2EE; padding: 12px 18px; border-radius: 6px 6px 0 0; }
.cc-band h1 { margin: 0; font-size: 26px; line-height: 1.15; color: #F4F2EE; font-weight: 500; }
.cc-band-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #C9A45A; }
.cc-band-value { font-size: 15px; }
.cc-band-end { margin-left: auto; }
.cc-main { display: flex; gap: 0; background: var(--gold-tint); border: 1px solid var(--cc-frame); border-top: 0; border-radius: 0 0 6px 6px; }
.cc-rail { display: flex; flex-direction: column; gap: 4px; width: 150px; flex: none; padding: 10px 0 10px 10px; }
.cc-act { display: block; background: var(--paper); border: 1px solid var(--cc-frame); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500; padding: 8px 10px; border-radius: 4px; }
.cc-act:hover { border-color: var(--gold); }
.cc-act.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cc-sheet { flex: 1; min-width: 0; padding: 10px; }
.cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 10px; align-items: stretch; }
.cc-col { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--cc-frame); border-radius: 4px; overflow: hidden; background: var(--paper); }
.cc-bar { background: var(--gold-tint); border-bottom: 1px solid var(--cc-frame); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); padding: 6px 10px; }
.cc-col.dark { border-color: var(--cc-band); }
.cc-col.dark .cc-bar { background: var(--cc-band); color: #F4F2EE; border-bottom-color: var(--cc-band); }
.cc-body { flex: 1; padding: 6px 10px 10px; font-size: 13px; }
.cc-field { border-bottom: 1px solid var(--rule); padding: 4px 0 5px; }
.cc-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cc-value { font-size: 15px; min-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.cc-field.bad .cc-value { color: var(--warn); font-weight: 600; }
.cc-field.warn .cc-value { color: var(--gold-deep); font-weight: 600; }
.cc-address { font-size: 14px; padding: 2px 0 6px; border-bottom: 1px solid var(--rule); }
.cc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-todo { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.cc-todo li { margin: 5px 0; }
.cc-tabs { display: flex; gap: 2px; margin-top: 14px; overflow-x: auto; }
.cc-tab { background: var(--paper); border: 1px solid var(--cc-frame); border-bottom: 0; border-radius: 4px 4px 0 0; padding: 7px 16px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.cc-tab.on { background: var(--cc-band); color: #F4F2EE; border-color: var(--cc-band); font-weight: 500; }
.cc-tab .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #C9A45A; vertical-align: middle; }
.cc-panel { background: var(--paper); border: 1px solid var(--cc-frame); border-top: 3px solid var(--cc-band); border-radius: 0 4px 4px 4px; padding: 14px 16px; }
.cc-panel > .block:first-child, .cc-panel > section:first-child { margin-top: 0; }
.cc-list { border: 1px solid var(--rule); border-radius: 4px; max-height: 420px; overflow-y: auto; }
.cc-list-row { padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.cc-list-row:last-child { border-bottom: 0; }
@media (max-width: 1100px) { .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cc-main { flex-direction: column; }
  .cc-rail { flex-direction: row; flex-wrap: wrap; width: auto; padding: 10px 10px 0; }
  .cc-act { padding: 7px 10px; }
  .cc-grid { grid-template-columns: minmax(0, 1fr); }
  .cc-band { padding: 12px 14px; }
  .cc-band-end { margin-left: 0; }
}
/* Dark mode: the page is already near black, so the card's band and selected tab lift to a warm grey with a gold edge. */
:root[data-theme="dark"] .cc { --cc-band: #2E2B24; }
:root[data-theme="dark"] .cc-band { border: 1px solid #4A463D; border-bottom: 2px solid #C9A45A; }
:root[data-theme="dark"] .cc-tab.on { background: #C9A45A; color: #15140F; border-color: #C9A45A; }
:root[data-theme="dark"] .cc-panel { border-top-color: #C9A45A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc { --cc-band: #2E2B24; }
  :root:not([data-theme="light"]) .cc-band { border: 1px solid #4A463D; border-bottom: 2px solid #C9A45A; }
  :root:not([data-theme="light"]) .cc-tab.on { background: #C9A45A; color: #15140F; border-color: #C9A45A; }
  :root:not([data-theme="light"]) .cc-panel { border-top-color: #C9A45A; }
}
.cc-band-end:empty { display: none; }
.cc-back { display: inline-block; margin: -6px 0 14px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: var(--radius); font-size: 13px; color: var(--ink); text-decoration: none; background: var(--gold-tint); }
.cc-back:hover { border-color: var(--gold); }

/* Purchase order timeline (src/pages-makers.js), on the order page and the manufacturers' site. */
.po-timeline { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--rule); }
.po-timeline li { position: relative; padding: 6px 0 6px 6px; }
.po-timeline li::before { content: ''; position: absolute; left: -20px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }