/* ==========================================================================
   Enforso — pill-box code configurator (/print/tabv1).

   A tool page, not a marketing page: dense controls, a live preview and a lot
   of numbers. It still speaks the same design language as the rest of the
   site, so the class names below are the page's own but every value comes
   from the tokens in enforso.css.
   ========================================================================== */

.cfg { padding-top: 56px; padding-bottom: 96px; }

/* The page toggles whole blocks with the `hidden` attribute, and several of
   them carry a `display` of their own — which would otherwise win over the
   user-agent rule and leave them on screen. */
.cfg [hidden] { display: none !important; }

.cfg .eyebrow {
  font-size: var(--enf-footnote);
  font-weight: var(--enf-w-semibold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--enf-text-secondary);
  margin: 0 0 12px;
}

.cfg h1 {
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: var(--enf-w-bold);
  margin: 0 0 14px;
}

.cfg h2 {
  font-size: var(--enf-overlay);
  font-weight: var(--enf-w-bold);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.cfg h3 {
  font-size: var(--enf-headline);
  font-weight: var(--enf-w-semibold);
  margin: 0 0 8px;
}

.cfg .lead {
  font-size: var(--enf-lead);
  line-height: 1.55;
  color: var(--enf-text-secondary);
  margin: 0 0 36px;
  max-width: 46em;
}

/* ---- Intro: what the kit is, before any controls ------------------------ */

.cfg-intro { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }

.cfg .cfg-section-title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: var(--enf-w-bold);
  letter-spacing: -0.02em;
  margin: 44px 0 12px;
}

.cfg .stack { display: flex; flex-direction: column; gap: 16px; }

.cfg .panel {
  background: var(--enf-surface);
  border: 1px solid var(--enf-stroke);
  border-radius: var(--enf-r20);
  padding: var(--enf-p24);
}

.cfg .card {
  background: var(--enf-bg);
  border: 1px solid var(--enf-stroke);
  border-radius: var(--enf-r16);
  padding: var(--enf-p16);
}

/* ---- Configuration form ------------------------------------------------- */

.cfg .config-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--enf-p24);
  align-items: start;
}

.cfg .config-h { display: flex; flex-direction: column; gap: var(--enf-p20); }
.cfg .config-h .row { display: grid; gap: var(--enf-p16); }
.cfg .config-h .row-shape { grid-template-columns: minmax(0, 1fr); }
.cfg .config-h .row-install { grid-template-columns: minmax(0, 1fr); }

.cfg .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.cfg label.block,
.cfg .field > .block {
  font-size: var(--enf-caption2);
  font-weight: var(--enf-w-semibold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--enf-text-secondary);
}
.cfg label.block.slots-title {
  font-size: var(--enf-subhead);
  font-weight: var(--enf-w-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--enf-text-primary);
  margin-bottom: 10px;
}

/* Segmented choices (box shape, code format). */
.cfg .shape-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.cfg .shape-opt {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1px solid var(--enf-stroke);
  border-radius: var(--enf-r16);
  background: var(--enf-bg);
  padding: 12px 14px;
  transition: border-color .2s ease, background .2s ease;
}
.cfg .shape-opt:hover { border-color: var(--enf-stroke-2); }
.cfg .shape-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cfg .shape-opt > div { display: flex; flex-direction: column; gap: 2px; }
.cfg .shape-opt strong,
.cfg .shape-opt b {
  font-size: var(--enf-subhead);
  font-weight: var(--enf-w-semibold);
}
.cfg .shape-opt small,
.cfg .shape-opt span {
  font-size: var(--enf-footnote);
  color: var(--enf-text-secondary);
}
.cfg .shape-opt:has(input:checked) {
  border-color: rgba(52,211,153,0.55);
  background: var(--enf-accent-soft);
}
.cfg .shape-opt:has(input:focus-visible) { outline: 2px solid var(--enf-accent-deep); outline-offset: 2px; }

/* Day-part checkboxes. */
.cfg .slots { display: flex; flex-wrap: wrap; gap: 6px; }

/* Free pack: the picker still shows the catalog, it just no longer decides. */
.cfg .slots.is-inert { opacity: .5; pointer-events: none; }
.cfg .slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid var(--enf-stroke);
  border-radius: var(--enf-r-full);
  background: var(--enf-bg);
  padding: 8px 11px;
  font-size: var(--enf-footnote);
  font-weight: var(--enf-w-medium);
  white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
/* The clock is a hint, not a label — small enough that all five day-parts
   stay on one line. */
.cfg .slot .clock {
  font-family: var(--enf-font-mono);
  font-size: var(--enf-caption2);
  color: var(--enf-text-tertiary);
}
.cfg .slot:has(input:checked) .clock { color: var(--enf-accent-deep); }
.cfg .slot input { position: absolute; opacity: 0; pointer-events: none; }
.cfg .slot:has(input:checked) {
  border-color: rgba(52,211,153,0.55);
  background: var(--enf-accent-soft);
  color: var(--enf-accent-deep);
}
.cfg .slot:has(input:disabled) { opacity: .45; cursor: not-allowed; }

.cfg .toggle-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Numeric + select inputs. */
.cfg input[type="number"],
.cfg input[type="text"],
.cfg select {
  width: 100%;
  height: 42px;
  border: 1px solid var(--enf-stroke);
  border-radius: var(--enf-r12);
  background: var(--enf-bg);
  padding: 0 12px;
  font-family: var(--enf-font);
  font-size: var(--enf-callout);
  color: var(--enf-text-primary);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Derived half of the layer / material pair: readable, obviously not yours to
   type in, but one click takes control back. */
.cfg .sub input.is-derived {
  color: var(--enf-text-tertiary);
  background: var(--enf-surface);
  border-style: dashed;
  cursor: pointer;
}

.cfg input[type="number"]:focus,
.cfg input[type="text"]:focus,
.cfg select:focus {
  border-color: rgba(52,211,153,0.6);
  box-shadow: 0 0 0 4px var(--enf-accent-soft);
}

.cfg .sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--enf-caption2);
  font-weight: var(--enf-w-semibold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--enf-text-secondary);
}
.cfg .sub input,
.cfg .sub select { text-transform: none; letter-spacing: normal; font-weight: var(--enf-w-regular); }

.cfg .profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.cfg .host-field { max-width: 280px; }


.cfg .hint {
  font-size: var(--enf-footnote);
  line-height: 1.45;
  color: var(--enf-text-secondary);
}
.cfg .slot-summary {
  margin-top: 10px;
  font-size: var(--enf-subhead);
  color: var(--enf-text-primary);
}

/* ---- Side column: summary, calculations, master QR ---------------------- */

.cfg .config-side { display: flex; flex-direction: column; gap: 12px; }

/* Print calculator — a spec sheet, so it reads as label/value rows. */
.cfg .print-calc {
  background: var(--enf-bg);
  border: 1px solid var(--enf-stroke);
  border-radius: var(--enf-r16);
  padding: var(--enf-p16);
}
.cfg .calc-title {
  font-size: var(--enf-caption2);
  font-weight: var(--enf-w-semibold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--enf-text-secondary);
  margin: 0 0 12px;
}
.cfg .print-calc dl { margin: 0; display: flex; flex-direction: column; }
.cfg .print-calc dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--enf-stroke);
}
.cfg .print-calc dl > div:last-child { border-bottom: none; }
.cfg .print-calc dt {
  font-size: var(--enf-footnote);
  color: var(--enf-text-secondary);
}
.cfg .print-calc dd {
  margin: 0;
  font-family: var(--enf-font-mono);
  font-size: var(--enf-footnote);
  text-align: right;
  white-space: nowrap;
}
.cfg .print-calc dl > div.strong dt { color: var(--enf-text-primary); font-weight: var(--enf-w-semibold); }
.cfg .print-calc dl > div.strong dd { font-weight: var(--enf-w-bold); }
.cfg .calc-warn {
  margin: 12px 0 0;
  border-radius: var(--enf-r12);
  background: rgba(248,113,113,0.14);
  color: #8f2f2f;
  padding: 10px 12px;
  font-size: var(--enf-footnote);
  line-height: 1.45;
}
.cfg .calc-note { margin: 10px 0 0; font-size: var(--enf-caption); color: var(--enf-text-tertiary); }

.cfg .print-calc .count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--enf-callout);
}
.cfg .print-calc .count span:last-child {
  font-family: var(--enf-font-mono);
  font-weight: var(--enf-w-semibold);
}

/* Master install code. */
.cfg .master-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  background: var(--enf-bg);
  border: 1px solid var(--enf-stroke);
  border-radius: var(--enf-r16);
  padding: var(--enf-p16);
}
.cfg .master-box img {
  width: 118px;
  height: 118px;
  border-radius: var(--enf-r12);
  border: 1px solid var(--enf-stroke);
  background: #fff;
  padding: 6px;
  flex: 0 0 auto;
}
.cfg .master-title { margin: 0 0 4px; font-size: var(--enf-subhead); font-weight: var(--enf-w-semibold); }
.cfg .master-help { margin: 0 0 6px; font-size: var(--enf-footnote); color: var(--enf-text-secondary); }
.cfg .master-meta { margin: 0; font-size: var(--enf-caption); color: var(--enf-text-tertiary); }
.cfg .master-copy .dls { margin-top: 10px; }
.cfg .master-box code {
  grid-column: 1 / -1;
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--enf-font-mono);
  font-size: var(--enf-caption);
  color: var(--enf-text-secondary);
  background: var(--enf-surface);
  border: 1px solid var(--enf-stroke);
  border-radius: var(--enf-r12);
  padding: 8px 10px;
}

/* ---- Actions ------------------------------------------------------------ */

.cfg .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.cfg .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--enf-r16);
  font-family: var(--enf-font);
  font-size: var(--enf-callout);
  font-weight: var(--enf-w-semibold);
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.cfg .btn:hover { transform: translateY(-1px); }
.cfg .btn-primary { background: var(--enf-accent); color: var(--enf-accent-ink); }
.cfg .btn-primary:hover { color: var(--enf-accent-ink); }
.cfg .btn-secondary {
  background: var(--enf-surface);
  border-color: var(--enf-stroke);
  color: var(--enf-text-primary);
}
.cfg .btn-secondary:hover { border-color: var(--enf-stroke-2); color: var(--enf-text-primary); }

/* ---- Compartment preview ------------------------------------------------ */

.cfg .preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cfg .labels-wrap { overflow-x: auto; }

/* The grid fills the panel: equal columns, cards stretched to their cell —
   otherwise seven fixed-width cards huddle on the left. Below the min-width
   the wrapper scrolls instead of squeezing them into nothing. */
.cfg .labels-table {
  width: 100%;
  min-width: 620px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 8px;
}
.cfg .labels-table th {
  font-size: var(--enf-caption2);
  font-weight: var(--enf-w-semibold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--enf-text-secondary);
  padding-bottom: 2px;
}
.cfg .labels-table td { vertical-align: top; }

/* One compartment: the code, what it means, and its three download formats. */
.cfg .labels-table .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--enf-bg);
  border: 1px solid var(--enf-stroke);
  border-radius: var(--enf-r12);
  padding: 10px;
  width: 100%;
}
/* With labels baked in, the code image is taller than it is wide — never
   force it square or the caption strip gets squashed. */
.cfg .labels-table .card img {
  width: 100%;
  max-width: 132px;
  height: auto;
  display: block;
}
.cfg .labels-table .cap {
  font-size: var(--enf-caption2);
  line-height: 1.3;
  text-align: center;
  color: var(--enf-text-secondary);
}
.cfg .labels-table .code {
  font-family: var(--enf-font-mono);
  font-size: var(--enf-caption);
  font-weight: var(--enf-w-semibold);
}
/* The three formats sit on one line under the code. */
.cfg .dls { display: flex; gap: 6px; margin-top: 2px; }
.cfg .dl {
  font-size: var(--enf-caption2);
  font-weight: var(--enf-w-semibold);
  letter-spacing: 0.4px;
  color: var(--enf-text-tertiary);
  border-radius: 6px;
  padding: 2px 5px;
  background: var(--enf-surface);
  border: 1px solid var(--enf-stroke);
  transition: color .2s ease, border-color .2s ease;
}
.cfg .dl:hover { color: var(--enf-accent-deep); border-color: rgba(52,211,153,0.55); }

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .cfg { padding-top: 36px; padding-bottom: 64px; }
  .cfg .config-row { grid-template-columns: 1fr; }
  .cfg .master-box { flex-direction: column; align-items: flex-start; }
  .cfg .actions .btn { flex: 1 1 auto; }
}