/* ===========================================================
   production.css -- section CSS for the "Продакшен" chapter.

   Linked ONLY from production.html (never base.css). Structure +
   this section's component hooks; every color/space/motion value
   comes via var(--...) from the active theme. base.css is never
   forked. Animate transform/opacity ONLY (the readout pulse); the
   ONLY width tween lives in .progress-strip .pfill (base.css, owned
   by progress.js). reduced-motion is handled globally in base.css.
   =========================================================== */

/* --- live affordance: checklist (left) + calculator (right) -------- */
.rollout-grid {
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: start;
}
.rollout-col {
  padding: var(--sp-3);
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-ring), var(--shadow-1);
}
.rollout-col h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-heading);
}

/* --- the rollout checklist (native checkboxes, earned green) ------- */
.rollout-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.rollout-item { margin: 0; }
.rollout-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-1);
}
.rollout-label:hover { border-color: var(--c-text-muted); }
.rollout-box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--c-progress);
  cursor: pointer;
}
.rollout-box:focus-visible {
  outline: var(--bw-2) solid var(--c-focus);
  outline-offset: 2px;
}
.rollout-text {
  font-family: var(--font-body);
  font-size: var(--fs-1);
  line-height: var(--lh-body);
  color: var(--c-text);
}
/* green is EARNED only after a real check (.is-checked set by production.js
   on the change event); nothing is pre-lit on load. */
.rollout-item.is-checked .rollout-label {
  border-color: var(--c-progress);
  background: var(--c-accent-1-soft);
}
.rollout-item.is-checked .rollout-text { color: var(--green-text); }

/* --- cost / latency calculator host -------------------------------- */
.costc-host { margin-top: 0; }
.costc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.costc-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.costc-field {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
}
.costc-label {
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  color: var(--c-text);
}
.costc-step {
  min-width: 44px;
  min-height: 44px;
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-text);
  background: var(--c-surface-2);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity var(--dur-1) var(--ease-1);
}
.costc-step:hover { opacity: 0.82; }
.costc-step:focus-visible {
  outline: var(--bw-2) solid var(--c-focus);
  outline-offset: 2px;
}
.costc-input {
  min-height: 44px;
  width: clamp(6ch, 14vw, 9ch);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  text-align: right;
  color: var(--c-text);
  background: var(--c-bg);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 0 var(--sp-1);
}
.costc-input:focus-visible {
  outline: var(--bw-2) solid var(--c-focus);
  outline-offset: 2px;
}

/* --- readout figures ----------------------------------------------- */
.costc-readout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--c-surface-2);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-md);
}
.costc-figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.costc-figure-label {
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  color: var(--c-text-muted);
}
.costc-figure-val {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}
.costc-figure-val.is-primary { color: var(--c-accent-2); font-size: var(--fs-3); }
.costc-figure-val.is-saving { color: var(--green-text); }
.costc-latsplit {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--c-text-muted);
}

/* readout update pulse: transform/opacity ONLY (no width/height/margin).
   reduced-motion: the global rule in base.css disables the animation. */
@keyframes costc-pulse {
  0%   { transform: translateY(2px); opacity: 0.45; }
  100% { transform: translateY(0);   opacity: 1; }
}
.costc-pulse { animation: costc-pulse var(--dur-1) var(--ease-1) 1; }

/* static (no-JS) fallback lists ------------------------------------- */
.rollout-static,
.cost-static {
  margin: var(--sp-2) 0;
  padding-left: 1.4em;
  font-size: var(--fs-1);
  color: var(--c-text);
}
.rollout-static li,
.cost-static li { margin: var(--sp-1) 0; }
.no-js-only h2 {
  margin: var(--sp-3) 0 var(--sp-1);
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  color: var(--c-heading);
}
.legend-hint {
  font-size: var(--fs-1);
  color: var(--c-text-muted);
  margin: var(--sp-2) 0;
}

/* mobile: checklist + calculator stack ------------------------------ */
@media (max-width: 720px) {
  .rollout-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
}
@media (max-width: 560px) {
  .costc-field { grid-template-columns: 1fr auto auto auto; }
  .costc-label { grid-column: 1 / -1; }
  .costc-input { width: 100%; }
  .rollout-static, .cost-static { font-size: var(--fs-0); }
}

/* ===========================================================
   chapter prose (md-as-source, hand-ported) -- shared visual
   contract with the other section pages; the chapter reads
   complete with JavaScript off.
   =========================================================== */
.chapter-prose {
  max-width: 72ch;
  margin: var(--sp-4) auto 0;
  padding: 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--c-text);
}
.chapter-prose > section { margin-top: var(--sp-4); }
.chapter-prose > section:first-child { margin-top: 0; }
.chapter-prose h2 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3);
  line-height: var(--lh-tight);
  color: var(--c-heading);
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: var(--bw-1) solid var(--c-border);
}
.chapter-prose h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2);
  color: var(--c-heading);
  margin: var(--sp-3) 0 var(--sp-1);
}
.chapter-prose p { margin: var(--sp-2) 0; }
.chapter-prose ul,
.chapter-prose ol { margin: var(--sp-2) 0; padding-left: 1.4em; }
.chapter-prose li { margin: var(--sp-1) 0; }
.chapter-prose a {
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chapter-prose a:hover { color: var(--c-link-hover); }
.chapter-prose a:focus-visible { outline: var(--bw-2) solid var(--c-focus); outline-offset: 2px; }
.chapter-prose strong,
.chapter-prose b { font-weight: var(--fw-bold); color: var(--c-heading); }
.chapter-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--c-accent-3-soft);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.34em;
}
.chapter-prose pre {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  background: var(--c-code-plate-bg);
  color: var(--c-code-plate-fg);
  border: var(--bw-1) solid var(--c-heading);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0;
  overflow: auto;
  white-space: pre;
}
.chapter-prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
.chapter-prose .sources,
.chapter-prose .about-recipe { font-size: var(--fs-1); }
.chapter-prose .sources a,
.chapter-prose .about-recipe a { word-break: break-word; overflow-wrap: anywhere; }
.chapter-prose .next-stop {
  border-left: 3px solid var(--c-accent-1);
  background: var(--c-accent-1-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
}
@media (max-width: 560px) {
  .chapter-prose { font-size: var(--fs-1); }
  .chapter-prose pre { font-size: 11.5px; }
}