/* GOcontroll Configurator. Tokens and components follow the GOcontroll style guide
   (GOcontroll-Architecture/styling/README.md); the base is copied from GOcontroll-Deploy
   (itself from Logistic, Finance, the CRM and Hours). Mobile first: base rules target ~360px.
   At the end: the Configure page (the start, requirements and proposals, controller cards,
   modules, accessories, the 3D view and the drawing, the summary tabs), Saved, the accessory
   editor and the print stylesheet (one part of the summary: price or datasheet). */

:root {
  --brand:       #e94e25;
  --brand-dark:  #c43d1a;
  --brand-light: #fdf2ef;
  --brand-dim:   rgba(233,78,37,.12);
  --black:       #1a1a1a;
  --anthracite:  #3b3b3b;
  --bg:          #f5f5f5;
  --white:       #fff;
  --muted:       #6b7280;
  --border:      #e2e2e2;
  --border2:     #d0d0d0;
  --danger:      #dc2626;
  --warn:        #d97706;
  --info:        #2563eb;
  --ok:          #16a34a;
  --radius:      6px;
  --radius-lg:   10px;
  --font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:        'SF Mono', 'Fira Code', monospace;
  --shadow:      0 4px 16px rgba(0,0,0,.12);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06);
  --tap:         44px;      /* minimum touch target */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--black);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Header and hero: same as the hub, gocontroll.tools (GOcontroll-Team/public/styles.css),
      with the "← Team /" crumb of suppliers.gocontroll.tools. Mobile first. ── */
.topbar {
  height: 60px;
  background: var(--white);
  border-bottom: 3px solid var(--brand);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.brand { display: flex; border-radius: 4px; flex: none; }
.brand img { height: 28px; width: auto; display: block; }
.divider { display: none; width: 1px; height: 28px; background: var(--border); }
.crumb {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--muted); text-decoration: none;
  border-radius: 4px; transition: color .15s;
}
.crumb:hover { color: var(--brand); }
.crumb svg { width: 14px; height: 14px; }
.crumb-sep { color: var(--border2); margin: 0 -6px; }
.app-title { font-size: 15px; font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; }
.app-title .long { display: none; }
.spacer { flex: 1; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-light); color: var(--brand);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.who-name { display: none; font-size: 13px; font-weight: 500; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none;
  font-size: 13px; color: var(--muted); text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: color .15s, border-color .15s, background .15s;
}
.logout:hover { color: var(--black); border-color: var(--border2); background: var(--bg); }
.logout svg { width: 16px; height: 16px; }

/* Hero: anthracite band with a faint PCB trace pattern. */
.hero {
  position: relative;
  background-color: var(--black);
  background-image:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgba(233,78,37,.22), transparent 60%),
    linear-gradient(180deg, var(--anthracite) 0%, var(--black) 100%);
  color: var(--white);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/pub/pattern.svg") repeat;
  background-size: 240px;
  opacity: .07;
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 1080px; margin: 0 auto; padding: 28px 16px 72px; }
.hero-date { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.hero-date a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.hero-date a:hover { color: #fff; }
.hero-date svg { width: 14px; height: 14px; }
.hero h1 { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.lede { font-size: 14px; color: rgba(255,255,255,.72); margin-top: 8px; max-width: 60ch; }
.hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.72); }

/* ── Layout: panels overlap the hero's lower edge, like the cards on Team ── */
main {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: -48px auto 0;
  padding: 0 16px 36px;
  position: relative;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  min-width: 0;
}
.panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
.panel-head h1, .panel-head h2 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.panel-head .sub { font-size: 13px; color: var(--muted); }
.panel-head .spacer { flex: 1; }
.section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 16px 0 6px;
}

footer {
  text-align: center; padding: 12px 16px;
  font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--border); background: var(--white);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap);
  padding: 8px 16px;
  font: inherit; font-size: 14px; font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white); color: var(--black);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, filter .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--border2); background: var(--bg); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); background: var(--brand); }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(220,38,38,.25); }
.btn.danger:hover { background: rgba(220,38,38,.06); }
.btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.btn.block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap); flex: none;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; color: var(--muted);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.icon-btn:hover { color: var(--black); background: var(--bg); border-color: var(--border); }
.icon-btn.danger:hover { color: var(--danger); background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.25); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; background: none; border-color: transparent; }

/* ── Forms ── */
.form-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .field > .label, fieldset > legend {
  font-size: 12px; font-weight: 600; color: var(--black);
}
.field .hint { font-size: 12px; color: var(--muted); min-height: 18px; }
.field .hint.ok { color: var(--ok); }
.field .error { font-size: 12px; color: var(--danger); }
fieldset { border: none; min-width: 0; }
fieldset > legend { margin-bottom: 5px; }
input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border2);
  font: inherit;
  font-size: 16px;   /* ≥16px stops iOS from zooming into the field */
  background: var(--white);
  color: var(--black);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 72px; line-height: 1.4; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
input:disabled, select:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
input[type="date"] { appearance: none; }

/* ── Tables (cards on narrow screens) ── */
.table-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.table-tools select { width: 100%; text-overflow: ellipsis; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data thead th {
  background: var(--black); color: var(--white);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 11px 12px; text-align: left; white-space: nowrap;
}
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data tbody tr:hover td { background: var(--brand-light); }
table.data th.num, table.data td.num { text-align: right; white-space: nowrap; }
.expand { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font: inherit; color: inherit; cursor: pointer; min-height: 32px; text-align: left; }
.expand svg { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; flex: none; }
.expand[aria-expanded="true"] svg { transform: rotate(90deg); }
.cell-main { font-weight: 500; }
.cell-sub { font-size: 12px; color: var(--muted); }
.empty-row { padding: 20px 12px; text-align: center; color: var(--muted); }
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  background: rgba(107,114,128,.1); color: #4b5563; border: 1px solid rgba(107,114,128,.25);
}

/* ── Dialogs ── */
dialog.modal {
  margin: auto;
  width: 640px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  padding: 0;
  color: var(--black);
  overflow: hidden;
}
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal::backdrop { background: rgba(0,0,0,.45); }
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 17px; font-weight: 600; flex: 1; }
.modal-body { padding: 18px; overflow-y: auto; flex: 1; display: grid; gap: 14px; align-content: start; }
.modal-foot {
  padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.modal-foot .btn { flex: 1 1 auto; }

.notice { padding: 10px 12px; border-radius: var(--radius); font-size: 13px; }
.notice.ok { background: rgba(22,163,74,.1); color: #166534; }
.notice.err { background: rgba(220,38,38,.08); color: #991b1b; }
.notice ul { margin: 6px 0 0 18px; }
.notice a { color: inherit; font-weight: 600; }
.back-link { margin-top: 12px; }

.spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
.spinner.dark { border-color: var(--border); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 16px 0; font-size: 13px; }

/* ── Toast ── */
.toast {
  position: fixed; z-index: 200;
  left: 50%; bottom: 16px; transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--black); color: #fff;
  font-size: 14px;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.err { background: var(--danger); }

dialog.modal.narrow { width: 440px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* ── Wider screens ── */
@media (min-width: 560px) {
  .form-grid.two { grid-template-columns: 1fr 1fr; }
  .form-grid .span-2 { grid-column: 1 / -1; }
  .modal-foot .btn { flex: 0 0 auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .topbar { height: 72px; padding: 0 28px; gap: 16px; }
  .brand img { height: 36px; }
  .divider, .who-name { display: inline-block; }
  .app-title .long { display: inline; }
  .app-title .short { display: none; }
  .logout { padding: 6px 14px; }
  .hero-inner { padding: 44px 28px 96px; }
  .hero h1 { font-size: 30px; }
  .lede { font-size: 15px; }
  main { margin-top: -60px; padding: 0 28px 56px; gap: 20px; }
  .panel { padding: 20px 22px; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media screen and (max-width: 759px) {
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tbody tr { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 8px; background: var(--white); }
  table.cards tbody tr:hover td { background: none; }
  table.cards td { border: none; padding: 1px 0; }
  table.cards td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
  table.cards td.num { text-align: left; }
}
@media screen and (max-width: 759px) {
  /* Totals under a table shown as cards: one line per total, label left, amounts right. */
  table.data.cards tfoot { display: block; }
  table.data.cards tfoot tr { display: flex; justify-content: space-between; gap: 12px; border: none; border-radius: 0; margin: 0; padding: 6px 2px; background: none; }
  table.data.cards tfoot tr:first-child { border-top: 2px solid var(--black); }
  table.data.cards tfoot td { display: block; width: auto; border: none; padding: 0; text-align: right; }
  table.data.cards tfoot td:first-child { text-align: left; flex: 1; }
}
@media (max-width: 419px) {
  /* Room for the app title: sign out shows as its icon only (the link keeps its label), the
     Team crumb as its arrow (aria-label "Back to GOcontroll Team"), no avatar. */
  .logout span { display: none; }
  .logout { padding: 6px 8px; }
  .crumb span, .who { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.btn.sm { min-height: 32px; padding: 4px 12px; font-size: 13px; margin-top: 6px; margin-right: 8px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
input.mono, textarea.mono { font-size: 16px; } /* ≥16px stops iOS from zooming into the field */
.notice:not(.ok):not(.err) { background: var(--bg); color: var(--black); }
.notice + .notice, .panel-head + .notice { margin-bottom: 12px; }
.checks { display: grid; gap: 6px; margin-top: 4px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; accent-color: var(--brand); }
fieldset[aria-invalid="true"] legend { color: var(--danger); }
.link-btn { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--brand); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.notice.warn:not(.ok):not(.err) { background: rgba(250,204,21,.15); color: #713f12; }
.dialog-body { display: grid; gap: 14px; }
.dialog-body p { font-size: 14px; }
/* ── Section tabs (Configure, Saved) at the top of the hero band ── */
.app-tabs {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto; padding: 0 16px;
  display: flex; gap: 4px; overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.app-tabs a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px;
  color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.app-tabs a:hover { color: #fff; }
.app-tabs a[aria-current="page"] { color: #fff; font-weight: 600; border-bottom-color: var(--brand); }
.app-tabs a:focus-visible { outline-offset: -2px; }
@media (min-width: 760px) { .app-tabs { padding: 0 28px; } .version-bar { padding: 10px 28px 0; } }


/* ── Facts ── */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; }
.facts dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.facts dd { font-size: 14px; word-break: break-word; white-space: pre-line; }
.facts a { color: inherit; }

/* ── Lists ── */
table.rows tbody tr { cursor: pointer; }
table.rows a { color: inherit; text-decoration: none; }
table.rows a:hover { color: var(--brand); }
table.data tfoot td { padding: 10px 12px; font-weight: 600; border-top: 2px solid var(--black); }
table.data tr.inactive td { color: var(--muted); }
.summary-line { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--anthracite); margin-bottom: 12px; }
.summary-line strong { color: var(--black); font-variant-numeric: tabular-nums; }
.summary-line .bad { color: #991b1b; }

/* ── Small fixes on the lists ── */
.panel > .notice:first-child { margin-bottom: 14px; }
.summary-line a { color: inherit; }
.table-tools form { flex: 1 1 260px; max-width: 460px; }
.table-tools > .search { flex: 1 1 260px; max-width: 460px; display: block; }
.table-tools .btn.sm { margin: 0; align-self: center; }


/* ── From Deploy: text, rows of buttons, badges, the numbered steps ── */
.hero-tags strong { color: #fff; }
.text { font-size: 14px; color: var(--anthracite); margin-bottom: 12px; max-width: 75ch; }
p.hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
.hint .error { color: var(--danger); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.btn-row .btn.sm { margin: 0; }
.btn.sm svg { width: 16px; height: 16px; }
.link-btn { min-height: 32px; padding: 0 4px; font-size: 13px; }
.badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.badge.b-ok    { background: rgba(22,163,74,.1);  color: #15803d; border-color: rgba(22,163,74,.3); }
.badge.b-warn  { background: rgba(217,119,6,.1);  color: #92400e; border-color: rgba(217,119,6,.3); }
.badge.b-err   { background: rgba(220,38,38,.08); color: #991b1b; border-color: rgba(220,38,38,.25); }
.badge.b-info  { background: rgba(37,99,235,.08); color: #1e40af; border-color: rgba(37,99,235,.25); }
.badge.b-brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.hero .badge { font-size: 12px; padding: 3px 10px; background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
.hero .badge.b-brand { background: var(--brand); border-color: var(--brand); }
.flow-num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700;
}
.btn.copy-btn.copied { border-color: rgba(22,163,74,.5); color: #166534; background: rgba(22,163,74,.06); }
table.data a.cell-main { color: inherit; text-decoration: none; }
table.data a.cell-main:hover { color: var(--brand); text-decoration: underline; }


/* ════════════════════════════════════════════════════════════════════════════
   Configurator
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Configure: the start, the way-in switch, preview + steps ── */
.cfg-notices { display: grid; gap: 8px; }
.start-title { font-size: 20px; font-weight: 700; line-height: 1.25; margin-bottom: 14px; }
.start-cards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.start-card {
  display: grid; gap: 6px; align-content: start; min-height: 150px; padding: 18px;
  border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--white);
  color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.start-card:hover { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-light); }
.start-card strong { font-size: 18px; font-weight: 700; line-height: 1.25; }
.start-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-light); color: var(--brand); }
.start-icon svg { width: 24px; height: 24px; }
.start-text { font-size: 14px; color: var(--anthracite); }
.start-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--brand); }
.start-cta svg { width: 16px; height: 16px; }
.series-strip { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.series-pick {
  display: grid; gap: 4px; width: 100%; min-height: var(--tap); padding: 10px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); font: inherit; color: inherit; cursor: pointer;
  transition: border-color .15s;
}
.series-pick:hover { border-color: var(--brand); }
.series-name { font-size: 14px; font-weight: 600; }
.series-tag { font-size: 12px; color: var(--muted); }

.mode-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.segmented {
  display: inline-flex; padding: 3px; gap: 3px; max-width: 100%;
  border: 1px solid var(--border2); border-radius: 999px; background: var(--white); box-shadow: var(--shadow-sm);
}
.segmented button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 0; border-radius: 999px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--anthracite); cursor: pointer;
}
.segmented button svg { width: 18px; height: 18px; flex: none; }
.segmented button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.segmented button:not([aria-pressed="true"]):hover { background: var(--bg); }
.start-over { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); text-decoration: none; font-weight: 600; }
.start-over svg { width: 16px; height: 16px; }
.mode-bar .start-over {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--border2); border-radius: 999px;
  background: var(--white); color: var(--anthracite); font-size: 13px; box-shadow: var(--shadow-sm);
}
.mode-bar .start-over:hover { color: var(--brand); text-decoration: none; }
@media (max-width: 419px) {
  .segmented button { padding: 0 10px; font-size: 12.5px; }
  .segmented button svg { display: none; }
}

.cfg { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.cfg-steps { display: grid; gap: 12px; min-width: 0; }
.step-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 14px; }
.step-head h2 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.step-head .sub { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.step-head .spacer { flex: 1; }
.step-head .btn.sm { margin: 0; }
.step [data-dropped] .notice { margin-bottom: 12px; }
select { text-overflow: ellipsis; }
select[aria-invalid="true"] { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

/* Photo frames (controller cards, proposals, the start): the photo, or the series key when there is none */
.ctl-media {
  position: relative; display: grid; place-items: center; aspect-ratio: 7 / 5; width: 100%; overflow: hidden;
  border-radius: var(--radius); background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
}
.ctl-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ctl-key { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: rgba(26,26,26,.18); }
.ctl-media img + .ctl-key { visibility: hidden; }
.ctl-media.no-image .ctl-key { visibility: visible; }

/* 1 Controller: radio cards with photo and key facts */
.ctl-cards { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ctl-card {
  position: relative; display: grid; gap: 8px; align-content: start; min-width: 0;
  padding: 10px; border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--white);
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.ctl-card:hover { border-color: var(--brand); }
.ctl-card:has(input:checked) { border-color: var(--brand); background: var(--brand-light); box-shadow: inset 0 0 0 1px var(--brand); }
.ctl-card:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.ctl-text { display: grid; gap: 3px; min-width: 0; }
.ctl-top { display: flex; align-items: flex-start; gap: 6px; }
.ctl-name { font-size: 14px; font-weight: 700; line-height: 1.25; }
.ctl-check {
  margin-left: auto; width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff; opacity: 0; transition: opacity .15s;
}
.ctl-check svg { width: 14px; height: 14px; }
.ctl-card:has(input:checked) .ctl-check { opacity: 1; }
.ctl-tag { font-size: 12.5px; color: var(--anthracite); overflow-wrap: anywhere; }

/* 2 Modules, 3 Connectivity, 4 Bus termination */
.slot-grid { display: grid; gap: 12px 14px; grid-template-columns: minmax(0, 1fr); }
.slot-field label .muted, #sec-can .field label .muted { font-weight: 400; }
/* A Multibus Module's interfaces under its select: text, no choice (2026-10-23). */
.slot-variant { font-size: 13px; color: var(--anthracite); overflow-wrap: anywhere; }
.slot-field .hint .badge { vertical-align: 1px; }
/* A module's description under its select: two lines at most (the datasheet has it in full). */
.slot-field .hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cfg .field .hint:empty { display: none; }

/* Steppers: − [n] + (requirements, accessory quantities) */
.stepper { display: inline-flex; align-items: stretch; flex: none; border: 1px solid var(--border2); border-radius: var(--radius); background: var(--white); }
.stepper:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
.step-btn {
  display: grid; place-items: center; width: var(--tap); min-height: var(--tap); flex: none;
  border: 0; background: none; color: var(--anthracite); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.step-btn:hover:not(:disabled) { background: var(--bg); color: var(--brand); }
.step-btn:disabled { color: var(--border2); cursor: not-allowed; }
.step-btn svg { width: 18px; height: 18px; }
.stepper input {
  width: 52px; min-height: var(--tap); padding: 0 4px; border: 0; border-radius: 0; box-shadow: none !important;
  text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:disabled { background: none; }
.stepper.sm input { width: 48px; }

/* ── Start from your requirements ── */
.req-form { display: grid; gap: 12px; }
.req-group { border: 1px solid var(--border); }
.req-legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 700; }
.req-group-help { clear: both; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.req-items { clear: both; display: grid; }
/* A requirement: the label and its control on one line, the help text under both (so a phone
   keeps the label readable next to the stepper), and under that why a switch is not possible. */
.req-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label ctl" "help help" "why why";
  align-items: center; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--border);
}
.req-item:first-child { border-top: 0; }
.req-text { display: contents; }
.req-item label { grid-area: label; font-size: 14px; font-weight: 600; cursor: pointer; }
.req-item > .stepper, .req-item > .switch { grid-area: ctl; }
.req-item.count.set label { color: var(--brand-dark); }
.req-help { grid-area: help; font-size: 12px; color: var(--muted); }
/* A switch the rest rules out (USB next to a Multibus Module): off, disabled, with why. */
.req-why { grid-area: why; font-size: 12px; font-weight: 600; color: var(--brand-dark); }
.req-why[hidden] { display: none; }
.req-item.unavailable label { color: var(--muted); cursor: default; }
@media (min-width: 760px) {
  .req-item { grid-template-areas: "label ctl" "help ctl" "why ctl"; }
}
.req-item.bool .switch input { inset: -9px -6px; width: auto; height: auto; }
.req-item.bool .switch { margin-right: 6px; }
.req-results .panel-head { margin-bottom: 10px; }
.req-results-body { transition: opacity .2s; }
.req-results[aria-busy="true"] .req-results-body { opacity: .55; }
.req-results .notice.warn { margin-bottom: 12px; }
.req-empty { padding: 4px 0; }
.sol-list { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.sol-card {
  display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0;
  padding: 12px; border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--white);
}
.sol-card.recommended { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.sol-card.previewed { background: #fffaf8; }
.sol-media { position: relative; }
.sol-media { display: grid; place-items: center; aspect-ratio: 7 / 4; overflow: hidden; border-radius: var(--radius); background: linear-gradient(180deg, #f3f4f6, #e5e7eb); }
.sol-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.sol-key { font-size: 26px; font-weight: 800; color: rgba(26,26,26,.18); }
.sol-media img + .sol-key { visibility: hidden; }
.sol-body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.sol-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sol-name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.sol-tag { font-size: 13px; color: var(--anthracite); }
.sol-line { font-size: 13px; color: var(--anthracite); }
.sol-notes { margin-left: 18px; font-size: 12.5px; color: var(--muted); }
.sol-foot { display: grid; gap: 10px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border); }
.sol-price { font-size: 15px; }
.sol-price strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.sol-price .no-price { font-size: 16px; }
.sol-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sol-actions .btn { flex: 1 1 160px; }
.sol-actions [aria-pressed="true"] { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; background: var(--bg); border: 1px solid var(--border); color: var(--black);
}
.req-bar {
  position: sticky; bottom: 12px; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 8px 8px 8px 14px; border-radius: var(--radius-lg); background: var(--black); color: #fff; box-shadow: var(--shadow);
}
/* visibility is not transitioned: hidden the moment it is tucked, whatever the animation clock. */
.req-bar { transition: opacity .2s, transform .2s; }
/* The proposals are on screen: the bar keeps its place (no jump) but is out of sight and reach. */
.req-bar[data-tucked] { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }
.req-bar-text { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.req-bar .btn.sm { margin: 0; min-height: 40px; }

/* ── Preview: the 3D view (preview3d.js) ── */
.cfg-preview .panel-head { margin-bottom: 10px; }
.preview-body { display: grid; gap: 10px; min-width: 0; }
.viewer-host { display: grid; gap: 8px; min-width: 0; }
.viewer {
  position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden;
  border-radius: var(--radius-lg); background: linear-gradient(180deg, #eef1f4, #d3d8de);
}
.viewer canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; cursor: grab; }
.viewer canvas:active { cursor: grabbing; }
.viewer-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: opacity .4s; }
.viewer-poster.done { opacity: 0; }
.viewer-load {
  position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; text-align: center; font-size: 13px; color: #444; background: rgba(233,236,239,.88);
  transition: opacity .4s;
}
.viewer-load.done { opacity: 0; pointer-events: none; }
.viewer-load.err { opacity: 1; color: #991b1b; inset: 0; }
.viewer-load.err .spinner { display: none; }
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 14px; }
.viewer-hint { font-size: 12px; color: var(--muted); }
.preview-loading { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: linear-gradient(180deg, #eef1f4, #d3d8de); overflow: hidden; }
.preview-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; opacity: .9; }
.preview-loading .loading { position: relative; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.85); }
.preview-photo { position: relative; display: grid; place-items: center; height: 170px; border-radius: var(--radius-lg); background: linear-gradient(180deg, #f3f4f6, #e5e7eb); overflow: hidden; }
.preview-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.preview-photo.no-image { display: none; }

/* The housing switch (as on the website: track + knob) */
.switch-row { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); font-size: 14px; font-weight: 600; cursor: pointer; }
.switch { position: relative; flex: none; width: 46px; height: 26px; }
.switch input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: #c3c9d0; transition: background .25s; }
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .25s; pointer-events: none;
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked ~ .knob { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .track { background: #e2e6ea; }
.switch input:disabled ~ .knob { box-shadow: 0 1px 2px rgba(0,0,0,.15); }

/* What sits where (under the 3D view) */
.legend { list-style: none; display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin-top: 12px; font-size: 13px; }
.legend li { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.legend-num {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--black); color: #fff; font-size: 11px; font-weight: 700;
}
.legend-num svg { width: 14px; height: 14px; }

.preview-empty {
  display: grid; justify-items: center; align-content: center; gap: 8px; aspect-ratio: 16 / 10; padding: 16px;
  border: 2px dashed var(--border2); border-radius: var(--radius-lg); color: var(--muted); text-align: center; font-size: 14px;
}
.preview-empty svg { width: 36px; height: 36px; color: var(--brand); display: block; }

/* ── Preview: the drawing (schematic.js) ── */
.schematic { display: flex; justify-content: center; min-width: 0; }
.schematic-svg { display: block; width: 100%; max-width: 480px; height: auto; font-family: var(--font); }
.sx-housing { fill: #f7f8fa; stroke: var(--black); stroke-width: 2; }
.sx-title { font-size: 15px; font-weight: 700; fill: var(--black); }
.sx-slot-box { fill: var(--white); stroke: var(--border2); stroke-width: 1.5; }
.sx-slot.filled .sx-slot-box { fill: var(--brand-light); stroke: var(--brand); }
.sx-slot.empty .sx-slot-box { stroke-dasharray: 4 3; }
.sx-slot.err .sx-slot-box { fill: rgba(220,38,38,.06); stroke: var(--danger); stroke-dasharray: none; }
.sx-num-dot { fill: var(--anthracite); }
.sx-slot.filled .sx-num-dot { fill: var(--brand); }
.sx-num { font-size: 11px; font-weight: 700; fill: #fff; }
.sx-name { font-size: 10.5px; font-weight: 600; fill: var(--black); }
.sx-slot.empty .sx-name { font-weight: 400; fill: var(--muted); }
.sx-art { font-size: 9.5px; font-family: var(--mono); fill: var(--muted); }
.sx-conn rect { fill: var(--anthracite); }
.sx-conn.system rect { fill: var(--black); }
.sx-conn text { font-size: 11px; font-weight: 600; fill: #fff; }
.sx-opt { font-size: 10.5px; fill: var(--anthracite); }

/* ── 5 Accessories ── */
.acc-groups { display: grid; gap: 4px; }
.acc-group .section-label { margin-top: 10px; }
.acc-list { list-style: none; display: grid; gap: 8px; }
.acc-item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); transition: border-color .15s, background .15s;
}
.acc-item.selected { border-color: rgba(233,78,37,.45); background: var(--brand-light); }
.acc-item.unavailable { background: #fafafa; }
.acc-item.unavailable .acc-name { color: var(--muted); }
/* Greyed out: what the configuration lacks for it (the M12 USB cable with RS232 on the M12 connector). */
.acc-item.unavailable .acc-main, .acc-item.unavailable .acc-meta, .acc-item.unavailable .acc-qty { opacity: .55; }
.acc-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.acc-check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; min-width: 0; }
.acc-check input { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; accent-color: var(--brand); }
.acc-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.acc-detail { display: grid; gap: 2px; padding-left: 30px; }
.acc-desc { font-size: 13px; color: var(--anthracite); }
.acc-meta { font-size: 12.5px; color: var(--muted); }
.acc-need { font-size: 12.5px; color: #92400e; }
.acc-qty { padding-left: 30px; }
.acc-item:not(.selected) .acc-qty { display: none; }
.acc-item.unavailable .acc-desc { display: none; }

/* ── 6 Summary ── */
.summary-head .spacer { flex: 1; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.summary-actions .btn { flex: 1 1 140px; }
.summary-body { transition: opacity .2s; }
.summary[aria-busy="true"] .summary-body, .summary[aria-busy="true"] .sum-panels { opacity: .6; }
.status { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--radius-lg); }
.status.ok { background: rgba(22,163,74,.08); color: #166534; border: 1px solid rgba(22,163,74,.3); }
.status.err { background: rgba(220,38,38,.06); color: #991b1b; border: 1px solid rgba(220,38,38,.25); }
.status-icon svg { width: 22px; height: 22px; display: block; }
.status strong { font-size: 15px; }
.status-errors { margin: 4px 0 0 18px; font-size: 13px; }
.caps { display: grid; gap: 8px; margin-bottom: 14px; }
.cap-row { display: grid; gap: 4px; }
.cap-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sum-tabs { display: flex; gap: 2px; margin: 4px 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.sum-tabs [role="tab"] {
  min-height: var(--tap); padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.sum-tabs [role="tab"]:hover { color: var(--black); }
.sum-tabs [role="tab"][aria-selected="true"] { color: var(--black); border-bottom-color: var(--brand); }
.sum-tabs [role="tab"]:focus-visible { outline-offset: -2px; }
.sum-panel:focus-visible { outline-offset: 4px; }
.sum-top { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.match { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fafafa; min-width: 0; }
.match.found { border-color: rgba(233,78,37,.35); background: var(--brand-light); }
.match-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.match.found .match-label { color: var(--brand-dark); }
/* No article and no similar ones: no match block, the configuration takes the full width. */
.sum-top > :only-child { grid-column: 1 / -1; }
.match-art { display: block; margin: 2px 0; font-size: 28px; font-weight: 700; letter-spacing: .02em; color: var(--black); overflow-wrap: anywhere; }
.match-note { margin-top: 6px; font-size: 13px; color: var(--anthracite); }
.similar { list-style: none; display: grid; gap: 4px; margin-top: 6px; font-size: 13px; }
.similar .mono { font-size: 14px; font-weight: 600; }
.similar a { color: var(--brand); text-decoration: none; border-radius: 3px; }
.similar a:hover { text-decoration: underline; }
.recap { display: grid; padding: 4px 14px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.recap-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.recap-row:last-child { border-bottom: none; }
.recap dt { color: var(--muted); flex: none; }
.recap dd { text-align: right; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.summary .section-label { margin-top: 22px; }
.no-price { color: var(--muted); font-style: italic; white-space: nowrap; }
table.bom td.mono { white-space: nowrap; }
table.bom tr.bom-section th {
  padding: 8px 12px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--bg); color: var(--black); border-bottom: 1px solid var(--border);
}
table.bom tr.bom-subtotal td { font-weight: 600; background: #fafafa; }
/* The whole controller's delivery in its section head (summary.js bomHtml). */
table.bom tr.bom-section th .bom-delivery { float: right; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.print-head { display: none; }
.changed .badge { vertical-align: 1px; }
.sum-panel .notice { margin-top: 12px; }
/* The datasheet: the Worker's fragment (styled by /css/datasheet.css), scrolled inside its frame
   on a narrow screen so the page itself never scrolls sideways. */
.ds-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ds-actions .btn { flex: 1 1 160px; }
.ds-actions + .notice { margin: 0 0 12px; }
.ds-host { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; transition: opacity .2s; }
.ds-host[aria-busy="true"] { opacity: .6; }
.ds-host > .loading, .ds-host > .notice { margin: 12px; }

/* ── Saved ── */
table.saved-list td.row-actions { white-space: nowrap; text-align: right; width: 1%; }
table.saved-list td.row-actions .icon-btn { vertical-align: middle; }
table.saved-list .cell-sub { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-tools > .search, .table-tools > .filter { flex: 1 1 220px; display: block; }
.table-tools > .filter { max-width: 320px; }
.table-tools > .archived-toggle { min-height: var(--tap); flex: 0 0 auto; }
.panel-head .btn.sm { margin: 0; }

/* ── Accessories (editor) ── */
table.acc-admin td.row-actions { white-space: nowrap; text-align: right; width: 1%; }
table.acc-admin .cell-sub { max-width: 46ch; }
table.acc-admin .badge { vertical-align: 1px; }
.checks.inline { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.checks.inline .check, .recommended-check { min-height: var(--tap); }

/* ── Workshop: the version bar (every page), Products and Publish ── */
.version-bar {
  position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 8px 16px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.62);
}
.version-bar strong { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.version-bar .vb-sep { color: rgba(255,255,255,.35); }
.version-bar .vb-flag {
  padding: 0 8px; border-radius: 999px; font-weight: 600; color: #fff;
  background: rgba(233,78,37,.35); border: 1px solid rgba(233,78,37,.7);
}
.table-tools > .missing-toggle { min-height: var(--tap); flex: 0 0 auto; }
.ws-sections { display: grid; gap: inherit; grid-template-columns: minmax(0, 1fr); min-width: 0; }
table.products .badge { vertical-align: 1px; }
@media (min-width: 760px) {
  /* The four tables line up: the same column widths in every section. */
  table.products { table-layout: fixed; }
  table.products th:nth-child(1) { width: 26%; }
  table.products th:nth-child(2) { width: 13%; }
  table.products th:nth-child(3) { width: 21%; }
  table.products th:nth-child(4) { width: 12%; }
  table.products th:nth-child(5) { width: 11%; }
}
table.products td:first-child { min-width: 14ch; }
table.products td { overflow-wrap: anywhere; }
/* Delivery: the select (44 px high, full width on a phone) with its saved / not saved state. */
.availability { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.availability select { flex: 1 1 9rem; min-width: 0; max-width: 12rem; }
.save-state { font-size: 12px; color: var(--muted); min-height: 1em; }
.save-state.ok { color: var(--ok); }
.save-state.err { color: var(--danger); }
@media screen and (max-width: 759px) {
  table.products td[data-label="Delivery"] { padding-top: 6px; }
  .availability select { max-width: none; }
}
.ws-versions { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.ws-version { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.ws-version h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ws-version.empty { background: var(--bg); }
.ws-big { font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ws-seq { font-size: 15px; font-weight: 600; color: var(--muted); }
.ws-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: 13px; }
.ws-facts dt { color: var(--muted); }
.ws-facts dd { overflow-wrap: anywhere; }
.diff-summary { margin: 0 0 4px 18px; font-size: 14px; display: grid; gap: 2px; }
.diff-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.diff-section h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.diff-block + .diff-block { margin-top: 12px; }
.diff-block h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.diff-list { margin-left: 18px; font-size: 13px; display: grid; gap: 2px; }
.diff-list li { overflow-wrap: anywhere; }
table.diff-prices td.num .cell-sub { display: block; }
table.ws-history td.row-actions { white-space: nowrap; text-align: right; width: 1%; }
table.ws-history .btn.sm { margin: 0; min-height: var(--tap); }
dialog .diff-summary { font-size: 13px; }
/* Publish with the public Worker (PUBLISHER binding): why Publish is disabled, and the upload command. */
.ws-reason { margin-top: 10px; }
.ws-reason .mono { display: block; margin-top: 4px; overflow-wrap: anywhere; }
@media (min-width: 960px) { .ws-versions.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 560px) {
  .ws-versions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .series-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sol-card { grid-template-columns: 160px minmax(0, 1fr); }
  .sol-media { aspect-ratio: auto; min-height: 120px; align-self: stretch; }
  .acc-item { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .acc-item .acc-main, .acc-item .acc-detail { grid-column: 1; }
  .acc-item .acc-qty { grid-column: 2; grid-row: 1 / span 2; padding-left: 0; align-self: center; }
  .cap-row { grid-template-columns: 90px minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 760px) {
  .summary-actions { width: auto; }
  .summary-actions .btn { flex: 0 0 auto; }
  .ds-actions .btn { flex: 0 0 auto; }
  .sum-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .start-card { padding: 22px; min-height: 180px; }
  .start-title { font-size: 22px; }
}
@media (min-width: 960px) {
  main, .hero-inner, .app-tabs, .version-bar { max-width: 1240px; }
  .cfg { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
  .cfg-steps { gap: 20px; }
  .cfg-preview { position: sticky; top: 92px; }
  .sol-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-card { grid-template-columns: minmax(0, 1fr); }
  .sol-media { aspect-ratio: 7 / 3; min-height: 0; }
}
@media (min-width: 1180px) {
  .sol-card { grid-template-columns: 180px minmax(0, 1fr); }
  .sol-media { aspect-ratio: auto; min-height: 140px; }
}
@media screen and (max-width: 759px) {
  table.cards td.mono[data-label]::before { font-family: var(--font); }
  table.saved-list td.row-actions, table.acc-admin td.row-actions, table.ws-history td.row-actions { width: auto; text-align: left; padding-top: 6px; }
  table.ws-history td.row-actions:empty { display: none; }
  table.saved-list .cell-sub { max-width: none; white-space: normal; }
  /* The BOM as cards: a section heading and its subtotal as plain rows. */
  table.bom tbody tr.bom-section, table.bom tbody tr.bom-subtotal { border: 0; padding: 0; margin: 10px 0 6px; background: none; }
  table.bom tr.bom-section th { display: block; padding: 6px 2px; background: none; border: 0; }
  table.bom tr.bom-subtotal { display: flex !important; justify-content: space-between; gap: 12px; }
  table.bom tr.bom-subtotal td { width: auto; background: none; }
}

/* ── The public page (configurator.html, public.js): logo to gocontroll.com, no tabs; a footer
      with the privacy statement and the price terms; the Turnstile check in a dialog ── */
.public-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 16px; padding-top: 4px; padding-bottom: 4px; }
.public-footer a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.public-footer a:hover { color: var(--brand); }
/* The widget is Cloudflare's iframe: 300 × 65 px (flexible: the box's width), compact 150 × 140 px. */
.human-check { display: grid; gap: 6px; min-width: 0; }
.human-check-widget { min-height: 65px; max-width: 100%; }
.human-check[data-check="loading"] .human-check-widget, .human-check[data-check="unavailable"] .human-check-widget { min-height: 0; }

/* ── Print / PDF: one part of the summary (body[data-print] = price | datasheet, set by
      the page; Ctrl+P prints the open tab) ── */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  html, body { background: #fff; }
  body { display: block; min-height: 0; font-size: 10.5pt; color: #1a1a1a; }
  .topbar, .hero, footer, .toast, dialog, .cfg, .cfg-notices, [data-start], .mode-bar, .req-bar, .summary-actions, .summary-head,
  .changed, .sum-tabs, .btn-row, .sum-panel .notice, .ds-actions, [data-ds-unavailable] { display: none !important; }
  main { display: block; max-width: none; margin: 0; padding: 0; }
  .panel { border: none; border-radius: 0; box-shadow: none; padding: 0; }
  .summary[aria-busy="true"] .summary-body, .summary[aria-busy="true"] .sum-panels { opacity: 1; }
  body[data-print] .sum-panel { display: none !important; }
  body[data-print="price"] .sum-panel[data-panel="price"],
  body[data-print="datasheet"] .sum-panel[data-panel="datasheet"] { display: block !important; }
  body[data-print="datasheet"] .summary-body { display: none !important; }
  .ds-host { border: 0; border-radius: 0; overflow: visible; }
  .print-head { display: flex; align-items: center; gap: 14pt; padding-bottom: 8pt; margin-bottom: 12pt; border-bottom: 2pt solid var(--brand); }
  .print-head img { height: 26px; width: auto; }
  .print-title { flex: 1; font-size: 14pt; }
  .print-day { font-size: 10pt; color: #555; }
  .summary-body { margin-bottom: 8pt; }
  .status, .match, .badge, .chip, .print-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sum-top { grid-template-columns: 1fr 1fr; }
  .summary .section-label { margin-top: 14pt; color: #1a1a1a; break-after: avoid; }
  .table-wrap { overflow: visible; }
  table.data { font-size: 9pt; }
  table.data thead { display: table-header-group; }
  table.data thead th { background: #eee; color: #1a1a1a; border: 1px solid #bbb; padding: 3pt 5pt; }
  table.data td { border: 1px solid #ccc; padding: 2pt 5pt; }
  table.data tbody tr:hover td { background: none; }
  table.data tfoot td { border-top: 2px solid #1a1a1a; }
  table.data tr { break-inside: avoid; }
  table.bom tr.bom-section th { background: #f3f3f3; border: 1px solid #ccc; }
  .hint { color: #555; }
  a { color: inherit; text-decoration: none; }
}