/* Box size pages (/box-sizes/) */
.breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-4); text-transform: uppercase; letter-spacing: 0.06em; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { margin: 0 8px; color: var(--text-subtle); }
.bx-hero { padding-bottom: var(--space-4); }
.bx-hero .hero-lead { max-width: 720px; }
.bx-top { padding-top: var(--space-5); padding-bottom: var(--space-6); }
.bx-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.bx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.bx-stat { background: var(--bg-card); border: 1.5px solid var(--border); padding: var(--space-3) var(--space-4); min-width: 0; }
.bx-stat-main { grid-column: 1 / -1; background: var(--bg-inverse); color: var(--text-inverse); border-color: var(--bg-inverse); }
.bx-k { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 4px; }
.bx-stat-main .bx-k { color: #cfc6b2; }
.bx-v { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.15; overflow-wrap: anywhere; }
.bx-stat-main .bx-v { font-size: 40px; }
.bx-v small { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.bx-stat-main .bx-v small { color: #cfc6b2; }
.bx-fig { margin: 0; text-align: center; }
.bx-svg { width: 100%; max-width: 360px; height: auto; }
.bx-lab { font-family: var(--font-mono); font-size: 11px; fill: #1a1a1a; }
.bx-fig figcaption { font-size: 13px; color: var(--text-muted); margin-top: var(--space-2); }
.bx-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.bx-p { font-size: 16px; line-height: 1.6; margin: var(--space-3) 0; max-width: 760px; }
.bx-table td.bx-note { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); text-align: left; min-width: 200px; }
.bx-table td:first-child { font-family: var(--font-body); }
.bx-table { min-width: 720px; }
.bx-table td, .bx-table th { white-space: nowrap; }
.bx-table td.bx-note { white-space: normal; }
.bx-min { font-size: 12px; color: var(--accent); }
.bx-checks { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); }
.bx-chk { display: flex; gap: var(--space-3); background: var(--bg-card); border: 1.5px solid var(--border-soft); padding: var(--space-3) var(--space-4); }
.bx-chk.hit { border-color: var(--accent); }
.bx-chk strong { display: block; margin-bottom: 2px; }
.bx-chk span:not(.bx-mark) { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.bx-mark { flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; background: #e3eadb; color: #2f5a1e; }
.bx-chk.hit .bx-mark { background: var(--accent); color: #fff; }
.bx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
.bx-pallet { width: 100%; max-width: 320px; height: auto; margin-top: var(--space-3); display: block; }
.bx-rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.bx-rel { display: block; padding: var(--space-3) var(--space-4); background: var(--bg-card); border: 1.5px solid var(--border); text-decoration: none; color: var(--text); }
.bx-rel:hover { border-color: var(--accent); }
.bx-rel-n { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.bx-rel-m { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bx-h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; margin-top: var(--space-6); }
/* hub */
.bx-filter { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.bx-filter input { font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--border); background: var(--bg-card); max-width: 320px; width: 100%; border-radius: 0; }
/* .bx-chips / .bx-chip now live in components.css (shared with the home calculator) */
.bx-hub { min-width: 760px; }
.bx-hub td:first-child a { white-space: nowrap; }
.bx-flags { text-align: left !important; }
.bx-flag { display: inline-block; font-family: var(--font-body); font-size: 11px; padding: 2px 6px; margin: 1px 2px 1px 0; background: #f4e3d5; color: var(--accent); white-space: nowrap; }
.bx-flag.ok { background: transparent; color: var(--text-subtle); }
@media (max-width: 760px) {
  .bx-grid, .bx-two { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .bx-svg { max-width: 240px; }
  .bx-stat-main .bx-v { font-size: 32px; }
  .bx-v { font-size: 22px; }
  .bx-cta .btn { flex: 1 1 100%; text-align: center; }
  .bx-rels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Find-the-right-box & boxes-per-pallet tools */
.bx-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.bf-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.bf-form { background: var(--bg-card); border: 1.5px solid var(--border); padding: var(--space-4); display: grid; gap: var(--space-3); }
.bf-row { display: flex; justify-content: space-between; align-items: center; }
.bf-row .bx-k { margin: 0; }
.bf-units { display: inline-flex; border: 1.5px solid var(--border); }
.bf-units button { font: inherit; font-size: 13px; padding: 4px 12px; border: 0; background: transparent; cursor: pointer; }
.bf-units button.on { background: var(--bg-inverse); color: var(--text-inverse); }
.bf-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.bf-dims2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bf-dims1 { grid-template-columns: minmax(0, 1fr); }
.bx-formula { font-family: var(--font-mono); font-size: 15px; background: var(--bg-subtle, rgba(0,0,0,.04)); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; overflow-x: auto; }
.sb-total td { border-top: 1.5px solid var(--border); }
.bf-dims label, .bf-field { position: relative; display: grid; gap: 4px; font-size: 12px; color: var(--text-muted); }
.bf-form input, .bf-form select { font: inherit; font-size: 16px; color: var(--text); padding: 9px 10px; border: 1.5px solid var(--border); background: var(--bg); border-radius: 0; width: 100%; min-width: 0; }
.bf-dims .bf-u, .bf-field > .bf-u { position: absolute; right: 10px; bottom: 11px; font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); pointer-events: none; }
.bf-inline { display: flex; gap: var(--space-2); align-items: center; }
.bf-inline select { width: auto; }
.bf-inline .bf-wu { font-family: var(--font-mono); font-size: 13px; }
.bf-opt { color: var(--text-subtle); }
.bf-pads { margin-top: -4px; }
.bf-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.bf-check input { width: auto; }
.bf-more summary { cursor: pointer; font-size: 13px; font-weight: 500; }
.bf-more[open] { display: grid; gap: var(--space-3); }
.bf-results { min-width: 0; }
.bf-empty { color: var(--text-muted); }
.bf-need { font-size: 15px; margin: 0 0 var(--space-3); }
.bf-card { border: 1.5px solid var(--border); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--bg-card); }
.bf-best { background: var(--bg-inverse); color: var(--text-inverse); border-color: var(--bg-inverse); }
.bf-best .bx-k { color: #cfc6b2; }
.bf-best-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.bf-best-name { font-family: var(--font-display); font-size: 34px; font-weight: 500; color: var(--text-inverse); }
a.bf-best-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bf-best-w { font-family: var(--font-display); font-size: 30px; }
.bf-best-w small { font-family: var(--font-mono); font-size: 12px; color: #cfc6b2; }
.bf-best-meta { font-family: var(--font-mono); font-size: 12px; color: #cfc6b2; margin-top: var(--space-2); line-height: 1.5; }
.bf-flat { border-color: var(--accent); font-size: 14px; }
.bf-none { border-color: var(--accent); }
.bf-table { min-width: 680px; }
.bf-table td:first-child a { white-space: nowrap; }
.pl-view { margin: var(--space-3) 0; }
.pl-svg { width: 100%; max-width: 420px; height: auto; display: block; }
.size-table tr.pl-on td { background: #f4e3d5; }
@media (max-width: 760px) {
  .bf-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .bf-best-name { font-size: 28px; }
  .bf-best-w { font-size: 24px; }
}
/* Same layout on a plain (light) card: undo the inverse colours */
.bf-card:not(.bf-best) .bf-best-name { color: var(--text); }
.bf-card:not(.bf-best) .bf-best-meta, .bf-card:not(.bf-best) .bf-best-w small { color: var(--text-muted); }
.bf-best-cm { display: block; flex-basis: 100%; order: 3; font-family: var(--font-mono); font-size: 12px; color: #cfc6b2; margin-top: -6px; }
.bf-form [hidden], .bf-results [hidden] { display: none !important; }
.bf-inline input { flex: 1 1 auto; }
.bf-inline select { flex: 0 0 72px; width: 72px; padding-right: 4px; }
.bf-table td, .bf-table th { white-space: nowrap; }
.bf-uselect { font: inherit; font-size: 13px; padding: 4px 8px; border: 1.5px solid var(--border); background: var(--bg); width: auto !important; }
.dl-view { background: var(--bg-card); border: 1.5px solid var(--border-soft); padding: var(--space-3); margin-bottom: var(--space-3); }
.dl-view svg { width: 100%; height: auto; max-height: 520px; display: block; }
.dl-dl .btn { cursor: pointer; }

/* ---- DIM rules tracker ---- */
.tk-h2 { margin-bottom: var(--space-3); }
.tk-h3 { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin: 0 0 4px; }
.tk-group { margin-bottom: var(--space-5); }
.tk-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin: 0 0 var(--space-2); line-height: 1.7; }
.tk-ref { color: var(--text-subtle); }
.tk-undated { color: var(--text-subtle); font-style: italic; }
.tk-table td { padding-top: 7px; padding-bottom: 7px; }
.tk-table td.tk-v { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.tk-carrier { padding-top: 0; }
.tk-timeline { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.tk-change { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-4) 0; border-top: 1.5px solid var(--border-soft); }
.tk-change:first-child { border-top: 0; }
.tk-when { font-family: var(--font-mono); font-size: 13px; line-height: 1.8; }
.tk-carrier-tag { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.tk-what .bx-p { margin: 4px 0 var(--space-2); }
.tk-quote { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-left: 2px solid var(--accent);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
.tk-quote cite { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 12px; font-style: normal; color: var(--text-muted); }
@media (max-width: 720px) {
  .tk-change { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .tk-carrier-tag { display: inline; margin-left: var(--space-2); }
  .tk-table td.tk-v { white-space: normal; }
}

/* ---- Catalogue mode (batch page) ---- */
.cat-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.cat-paste { width: 100%; font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  padding: var(--space-3); border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text); resize: vertical; }
.cat-paste:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.cat-controls { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.cat-controls .field-label { display: grid; gap: 4px; }
.cat-controls select { width: 100%; }
.cat-modes { margin-top: 0; }
.cat-table td.cat-n { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.cat-table td.cat-sku { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.cat-table td.cat-d { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; }
.cat-table th { white-space: nowrap; }
.cat-table th, .cat-table td { padding-top: 8px; padding-bottom: 8px; }
.bx-flag.bad { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 760px) {
  .cat-paste { font-size: 16px; }   /* iOS zooms anything under 16px on focus */
}