/* Forge: a stepped workbench. Accent = amber (--forge, text on paper --forge-t). Motion only when allowed. */
.forge-body{max-width:64rem}
.forge-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.forge-body .panel{scroll-margin-top:6.5rem}
.forge-body .panel-head .idx{background:var(--forge);color:var(--night)}
.forge-body .panel-body{display:grid;gap:1rem;min-width:0}
.forge-body .panel-body>*{min-width:0}
.forge-body .sec-helper{margin:0}

/* step header: where you are and which steps are done */
.forge-steps{margin:0 0 1.1rem}
.forge-steps ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;list-style:none;margin:0;padding:.3rem;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.forge-steps li{min-width:0}
.forge-steps a{display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.6rem;padding:.3rem .6rem;border-radius:999px;color:var(--ink-2);text-decoration:none;font:640 .86rem/1.2 var(--f-sans);font-stretch:104%;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forge-steps a:hover{color:var(--ink)}
.forge-steps a:focus-visible{outline:2px solid var(--forge);outline-offset:2px}
.forge-steps .fs-n{flex:none;display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;border:1.5px solid var(--line-2);font:700 .7rem var(--f-mono);color:var(--ink-3)}
.forge-steps li.done .fs-n{background:var(--forge);border-color:var(--forge);color:var(--night)}
.forge-steps a.is-active{background:var(--bg);border-color:var(--line-2);color:var(--ink)}
.forge-steps a.is-active .fs-n{border-color:var(--forge-t);color:var(--forge-t)}
.forge-steps li.done a.is-active .fs-n{background:var(--forge);border-color:var(--forge);color:var(--night)}
@media (min-width:721px){
  .forge-steps{position:sticky;top:4.25rem;z-index:20;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);padding-block:.6rem;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .forge-steps ol{border-radius:999px}
}
@media (max-width:720px){
  .forge-steps ol{padding:.25rem}
  .forge-steps a{gap:.3rem;padding-inline:.35rem;font-size:.8rem}
  .forge-steps .fs-n{width:1.35rem;height:1.35rem;font-size:.66rem}
}

/* data tab: sample story cards, format options */
.forge-body .samples-grid{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.forge-body .sample-btn{min-height:9.5rem;align-content:start}
.forge-body .sample-btn svg{width:100%;height:3rem;display:block;overflow:visible}
.forge-body .sample-btn .s-meta{font:500 .72rem/1.3 var(--f-mono);color:var(--ink-3)}
.forge-body .sample-btn:hover{border-color:var(--forge)}
.import-details{margin-top:.2rem}
.import-details summary{cursor:pointer;font:620 .86rem var(--f-sans);color:var(--ink-2);min-height:2.4rem;display:inline-flex;align-items:center}
.import-details .import-options{margin-top:.6rem}

/* overview tiles (kstats from viz.css) */
.overview{margin-bottom:1rem}
.overview .kstat em.kstat-sub{display:block;margin-top:.25rem;font:500 .68rem/1.35 var(--f-mono);font-style:normal;color:var(--ink-3)}
.overview .kstat strong{font-variant-numeric:tabular-nums}

/* column cards */
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr));gap:.75rem}
.col-card{display:grid;grid-template-rows:auto auto auto auto auto;gap:.65rem;align-content:start;min-width:0;padding:.9rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.col-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;flex-wrap:wrap}
.col-name{margin:0;min-width:0;flex:1 1 8rem;font:700 .92rem/1.25 var(--f-mono);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.type-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.16rem .55rem;border:1px solid var(--line-2);border-radius:999px;font:600 .7rem/1.2 var(--f-mono);color:var(--ink-2);white-space:nowrap}
.type-badge svg{color:var(--forge-t)}
.col-fig{min-height:5.6rem;display:grid;align-items:end}
.col-fig .fp-svg{display:block;width:100%;height:auto;overflow:visible}
.col-fig .fp-t{font:500 9.5px var(--f-mono);fill:var(--ink-3)}
.col-fig .fp-l{fill:var(--ink-2)}
.col-fig .fp-svg rect{fill:var(--forge)}
.col-fig .fp-axis{stroke:var(--line-2);stroke-width:1}
.col-fig .fp-mark{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:2 2}
.col-fig .fp-area{fill:var(--forge);opacity:.22}
.col-fig .fp-line{fill:none;stroke:var(--forge-t);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.col-fig .fp-yes{fill:var(--forge)}
.col-fig .fp-no{fill:var(--line-2)}
.col-none{margin:0;font-size:.84rem;color:var(--ink-3)}
.col-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:0}
.col-facts>div{min-width:0}
.col-facts dt{font:600 .62rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.col-facts dd{margin:.15rem 0 0;font:650 .86rem/1.3 var(--f-sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.miss-top{display:flex;justify-content:space-between;gap:.5rem;font-size:.78rem;color:var(--ink-2)}
.miss-top strong{font:700 .78rem var(--f-mono);color:var(--ink)}
.miss-bar{margin-top:.3rem;height:.42rem;border-radius:999px;background:var(--line);overflow:hidden}
.miss-bar span{display:block;height:100%;background:var(--forge);border-radius:999px}
.col-type{display:grid;gap:.3rem}
.col-type>span{font-size:.76rem;font-weight:620;color:var(--ink-3)}
.col-type select{min-height:2.5rem}
.col-card.is-hidden{display:none}

/* insights */
.insights{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;min-width:0}
.ins-card{margin:0;min-width:0}
.ins-cap{margin:.15rem 0 .75rem;font-size:.86rem;line-height:1.5;color:var(--ink-3)}
.ins-sub{margin:1.2rem 0 .15rem;font:650 .98rem/1.3 var(--f-sans);color:var(--ink)}
.ins-card .guide{margin-top:.6rem}
.ins-lead{margin:0 0 .7rem;font:650 .98rem/1.4 var(--f-sans);color:var(--ink)}
.ins-note{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.ins-foot{margin:.2rem 0 0;font-size:.78rem;line-height:1.5;color:var(--ink-3)}
.ins-heat-scroll{margin-bottom:.9rem;padding-bottom:.2rem}
.ins-heat{max-width:100%}
.ins-heat .kv-svg{max-width:none}
.ins-table{width:100%;border-collapse:collapse;font-size:.86rem}
.ins-table th,.ins-table td{padding:.5rem .6rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.ins-table th{font:600 .68rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ins-table td{color:var(--ink-2)}
.ins-chip{display:inline-block;margin:.12rem .25rem .12rem 0;padding:.14rem .5rem;border:1px solid var(--line-2);border-radius:999px;font:500 .74rem/1.4 var(--f-mono);color:var(--ink-2);white-space:nowrap}
.ins-trends{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ins-trends li{display:grid;grid-template-columns:minmax(0,1fr) minmax(7rem,11rem);gap:.4rem .9rem;align-items:center;font-size:.92rem;line-height:1.45;color:var(--ink-2)}
.ins-spark{display:block;width:100%;height:2.8rem;overflow:visible}
.ins-spark path{fill:none;stroke:var(--forge-t);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ins-notes{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ins-notes li{padding:.55rem .75rem;border-left:3px solid var(--line-2);background:var(--paper);font-size:.9rem;line-height:1.5;color:var(--ink-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.ins-notes li.warn{border-left-color:var(--warn)}
.ins-notes li em{display:block;margin-top:.15rem;font-style:normal;font-size:.84rem;color:var(--ink-3)}
.ins-sugg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:.7rem}
.ins-sugg{display:grid;gap:.35rem;align-content:start;padding:.85rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.ins-sugg-kind{font:600 .66rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--forge-t)}
.ins-sugg strong{font:650 .95rem/1.3 var(--f-sans);color:var(--ink)}
.ins-sugg-why{font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.ins-sugg .btn{justify-self:start;margin-top:.35rem;min-height:2.5rem}
.ins-sugg .btn:disabled{opacity:.7;cursor:default}

/* highlights in the config panel */
.highlight-box{display:grid;gap:.6rem;padding:.85rem;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.highlight-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.highlight-head strong{font:700 .92rem var(--f-sans);color:var(--ink)}
.highlight-list{display:grid;gap:.4rem}
.hl-chip{display:flex;align-items:center;gap:.55rem;min-width:0;padding:.35rem .35rem .35rem .7rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper)}
.hl-kind{flex:none;font:600 .66rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--forge-t)}
.hl-title{flex:1;min-width:0;font-size:.88rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-chip .icon-btn{flex:none;width:2.5rem;height:2.5rem;font-size:1.1rem;line-height:1}

/* preview with device width */
.preview-bar{display:flex;justify-content:space-between;align-items:center;gap:.8rem .9rem;flex-wrap:wrap}
.device-seg button{min-height:2.4rem}
.device-stage{display:flex;justify-content:center;padding:.7rem;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.device-stage .preview-frame{width:100%;max-width:100%;margin:0;transition:width .28s ease}
@media (prefers-reduced-motion:reduce){.device-stage .preview-frame{transition:none}}

/* panels appear with a short fade and rise; cards stagger in (motion only when allowed) */
@media (prefers-reduced-motion:no-preference){
  @keyframes fp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .forge-body .panel:not([hidden]){animation:fp-in .36s cubic-bezier(.2,.7,.2,1) both}
  .col-card{animation:fp-in .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 40ms)}
  .forge-steps a{transition:background .15s,border-color .15s,color .15s}
}

/* layout: columns collapse to two, then one, below 980 px and 560 px */
@media (max-width:979px){
  .col-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .col-grid{grid-template-columns:minmax(0,1fr)}
  .col-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ins-trends li{grid-template-columns:minmax(0,1fr)}
  .forge-bar{justify-content:space-between}
}
@media (max-width:420px){
  .forge-body .panel-body{padding:.8rem}
  .col-card{padding:.75rem}
}