/* Spec code generator page: 15 columns side by side, like the printed form.
   Uses the site tokens from assets/css/site.css. */
.spec-hero span{max-width:560px}
/* Amber marks the fields still to choose; kept local, the site palette has no warning colour. */
[data-spec-generator]{--spec-todo:#f0a020;--spec-todo-bg:#fff4dc}
.spec-layout{display:grid;gap:24px;padding:clamp(40px,4vw,64px) var(--baganti-gutter) var(--baganti-section-y);max-width:1920px;margin:0 auto;box-sizing:border-box}

/* ---------- Code bar (sticks under the header while you pick options) ---------- */
.spec-panel{position:sticky;top:var(--site-header-height,80px);z-index:5;background:var(--navy);color:var(--white);padding:18px 24px;border-radius:4px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(260px,360px);gap:16px 28px;align-items:center}
.spec-panel-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.spec-panel .spec-panel-head h2{color:var(--white);margin:0;font:600 12px/1 var(--font-heading);letter-spacing:.12em;text-transform:uppercase}
.spec-status{font:500 12px var(--font-mono);color:rgba(241,241,241,.6)}
.spec-status.is-complete{color:var(--cyan)}
.spec-code{margin:0;font:500 clamp(16px,1.5vw,22px)/1.4 var(--font-mono);letter-spacing:.02em;word-break:break-word;min-height:1.4em}
.spec-code a{color:var(--white);text-decoration:none;border-bottom:1px solid transparent}
.spec-code a:hover{border-bottom-color:var(--cyan)}
.spec-code a.is-empty{color:rgba(241,241,241,.35)}
/* After the first choice, unfilled segments turn amber and pulse so a skipped field is easy to spot. */
.spec-code.is-started a.is-empty{color:var(--spec-todo);border-bottom:2px dotted var(--spec-todo);animation:spec-todo-pulse 1.6s ease-in-out infinite}
@keyframes spec-todo-pulse{50%{opacity:.45}}
.spec-panel-head{flex-wrap:wrap}
.spec-missing{color:var(--spec-todo)}
.spec-missing a{color:inherit;text-underline-offset:3px}
.spec-missing a:hover{color:var(--white)}
.spec-code i{font-style:normal;color:rgba(241,241,241,.4)}
.spec-actions{display:flex;flex-wrap:wrap;gap:8px}
.spec-btn{border:1px solid var(--line-light);background:transparent;color:var(--white);border-radius:999px;padding:10px 16px;font:600 13px/1 var(--font-heading);cursor:pointer;white-space:nowrap}
.spec-btn:hover:not(:disabled){border-color:var(--white)}
.spec-btn-primary{background:var(--cyan);border-color:var(--cyan);color:var(--black)}
.spec-btn-quiet{border-color:transparent;color:rgba(241,241,241,.7)}
.spec-btn:disabled{opacity:.35;cursor:not-allowed}
.spec-decode{display:grid;gap:6px}
.spec-decode label{font-size:12px;color:rgba(241,241,241,.7)}
.spec-decode div{display:flex;gap:8px}
.spec-decode input{flex:1;min-width:0;border:1px solid var(--line-light);border-radius:4px;background:rgba(241,241,241,.06);color:var(--white);padding:9px 10px;font:500 12px var(--font-mono)}
.spec-decode input::placeholder{color:rgba(241,241,241,.3)}
.spec-decode p{margin:0;font-size:12px;color:var(--cyan);min-height:1em}
.spec-decode p:empty{display:none}

/* ---------- The 15 columns ---------- */
.spec-grid-wrap{overflow-x:auto;border:1px solid var(--line-dark);background:var(--line-dark)}
.spec-steps{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(14,minmax(0,1fr));gap:1px;min-width:1440px}
.spec-step{background:var(--white);padding:0 0 14px;display:flex;flex-direction:column;min-width:0;scroll-margin-top:calc(var(--site-header-height,80px) + 140px)}
.spec-step header{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 4px;padding:14px 8px 12px;min-height:74px;box-sizing:border-box;border-bottom:1px solid var(--line-dark);margin-bottom:10px;background:rgba(9,9,12,.03)}
.spec-step-no{grid-column:1/-1;justify-self:start;font:500 11px/1 var(--font-mono);color:var(--muted);border:1px solid var(--line-dark);border-radius:999px;padding:4px 7px}
.spec-step.is-complete .spec-step-no{background:var(--navy);border-color:var(--navy);color:var(--white)}
/* Long words ("CONFIGURATION") hyphenate inside the column instead of running into the next one. */
.spec-step h2{margin:0;min-width:0;font:600 11.5px/1.25 var(--font-heading);text-transform:uppercase;letter-spacing:.01em;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
.spec-step.is-pending{box-shadow:inset 0 3px 0 var(--spec-todo)}
.spec-step.is-pending header{background:var(--spec-todo-bg);border-bottom-color:var(--spec-todo)}
.spec-step.is-pending .spec-step-no{background:var(--spec-todo);border-color:var(--spec-todo);color:var(--black)}
.spec-step.is-pending .spec-step-no{white-space:nowrap}
.spec-step.is-pending .spec-step-no::after{content:"Choose";margin-left:4px;font:700 9.5px/1 var(--font-heading);text-transform:uppercase;letter-spacing:.05em}
.spec-step.is-na{background:#f7f7f8}
.spec-step.is-na h2,.spec-step.is-na .spec-step-no{opacity:.45}
.spec-info{width:20px;height:20px;border-radius:50%;border:1px solid var(--blue);background:transparent;color:var(--blue);font:600 11px/1 var(--font-heading);cursor:pointer;padding:0}
.spec-info[aria-expanded="true"]{background:var(--blue);color:var(--white)}
.spec-info-text{position:absolute;z-index:4;top:calc(100% + 4px);left:6px;width:240px;background:var(--white);border:1px solid var(--blue);box-shadow:0 8px 24px rgba(7,26,58,.16);padding:10px 12px;font-size:12px;line-height:1.5;text-transform:none}
.spec-info-text p{margin:0}
.spec-steps .spec-step:nth-last-child(-n+4) .spec-info-text{left:auto;right:6px}

.spec-options,.spec-modes{display:flex;flex-direction:column;gap:6px;padding:0 6px}
.spec-modes{margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed var(--line-dark)}
.spec-option{display:grid;grid-template-columns:minmax(0,1fr);overflow-wrap:break-word;align-items:center;gap:3px;width:100%;box-sizing:border-box;padding:7px 7px;border:1px solid var(--line-dark);border-radius:3px;background:#fff;color:var(--black);font:500 12px/1.2 var(--font-body);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.spec-option code{font:500 10.5px/1 var(--font-mono);color:var(--muted);letter-spacing:.03em}
.spec-option small{grid-column:1/-1;font-size:10.5px;color:var(--blue)}
.spec-option:hover:not(:disabled){border-color:var(--navy)}
.spec-option.is-selected{background:var(--navy);border-color:var(--navy);color:var(--white)}
.spec-option.is-selected code,.spec-option.is-selected small{color:var(--cyan)}
.spec-option.is-fixed{cursor:default}
.spec-option:disabled{opacity:.3;cursor:not-allowed}
.spec-option:focus-visible,.spec-btn:focus-visible,.spec-info:focus-visible,.spec-code a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.spec-hint{margin:0 8px 8px;font-size:11.5px;line-height:1.4;color:var(--muted)}
.spec-na{margin:0 8px;font:500 18px var(--font-mono);color:rgba(9,9,12,.25);display:grid;gap:4px}
.spec-na span{font:500 11px var(--font-body);color:var(--muted)}
.spec-inputs{display:grid;gap:8px;padding:0 8px}
.spec-input{display:grid;gap:4px;font-size:11.5px;color:var(--muted)}
.spec-ral{margin:8px 8px 0}
.spec-input-unit{display:flex;align-items:center;border:1px solid var(--line-dark);border-radius:3px;background:#fff}
.spec-input-unit:focus-within{border-color:var(--navy)}
.spec-input input{width:100%;min-width:0;border:0;background:transparent;padding:8px;font:500 13px var(--font-mono);color:var(--black);outline:0}
.spec-input i{font:500 11px var(--font-mono);font-style:normal;color:var(--muted);padding:0 8px}
.spec-help{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-size:13px;text-decoration:none;justify-self:start}

@media (max-width:1200px){
  .spec-panel{grid-template-columns:minmax(0,1fr) auto}
  .spec-decode{grid-column:1/-1}
}
@media (max-width:720px){
  .spec-layout{padding-left:16px;padding-right:16px}
  .spec-panel{grid-template-columns:1fr;padding:14px 16px;gap:10px}
  .spec-decode{display:none}
  .spec-code{font-size:15px}
  /* Phones: keep the 15 columns, scroll sideways inside the table. */
  .spec-steps{grid-template-columns:132px repeat(14,112px);min-width:0}
}
@media (prefers-reduced-motion:reduce){.spec-code.is-started a.is-empty{animation:none}}
@media print{
  [data-include],.spec-hero,.spec-actions,.spec-decode,.spec-help,.spec-info{display:none!important}
  .spec-panel{position:static;background:none;color:#000}
  .spec-panel .spec-panel-head h2,.spec-code a{color:#000}
  .spec-grid-wrap{overflow:visible}
  .spec-steps{grid-template-columns:repeat(15,1fr);min-width:0}
}