/* ============================================================================
   SOLO — Elevation view, landing and full-page screens
   ----------------------------------------------------------------------------
   Split from solo.css so the design system stays readable. Everything here is
   composition on top of the tokens defined there.
   ========================================================================== */

/* ========================================================== live elevation
   The SVG carries a mm viewBox, so strokes must be non-scaling or a 12 m run
   would render hairlines and a 700 mm run would render slabs. Type is sized
   from --fs, set per-render as a fraction of the view. */
.elev{ width:100%; height:100%; --fs:44px; }
.elev *{ vector-effect:non-scaling-stroke }

.elev .wall{ fill:var(--elev-wall) }
.elev .sidewall{ fill:var(--elev-sidewall) }
.elev .ffl{ stroke:var(--dim); stroke-width:1.6 }
.elev .ceil{ stroke:var(--line-2); stroke-width:1; stroke-dasharray:14 10 }
.elev .datum{
  fill:var(--faint); font-family:'Plex Mono',monospace; font-size:calc(var(--fs)*.62);
  letter-spacing:.12em;
}

/* the unit itself */
.elev .bulk{ fill:var(--elev-bulk); stroke:var(--line-2); stroke-width:1 }
.elev .cab-body{ fill:var(--elev-cab); stroke:var(--line-2); stroke-width:1.2 }
.elev .cab-shadow{ fill:url(#elevShadow); opacity:.85 }
.elev .plane{ fill:var(--paper-2); stroke:var(--elev-plane-line); stroke-width:.8; opacity:.94 }

.elev .mir-glass{ fill:url(#elevMirror); stroke:none }
/* PRODUCT, not interface: these two carry the selected finish. */
.elev .mir-frame{ fill:none; stroke:var(--finish,#94A3B8); stroke-width:2.4; opacity:.95 }

.elev .halo{ fill:none; stroke:var(--elev-glow); stroke-width:5; opacity:var(--elev-halo-op); filter:url(#elevGlow) }
.elev .strip{ fill:var(--elev-glow); opacity:var(--elev-strip-op); filter:url(#elevGlow) }

.elev .appl{ fill:none; stroke:var(--elev-appl); stroke-width:1.3; opacity:.5 }
.elev .appl.soap{ stroke:var(--finish,#94A3B8); opacity:.75 }
.elev .appl.water{ stroke:var(--elev-water); opacity:.7 }

/* Enter / exit for the reconciler. Geometry that PERSISTS is interpolated by
   the driver in solo-elevation.js; only genuinely new or removed elements fade,
   so adding a station reads as one appearing among many that slide over — not
   as the whole drawing blinking. Opacity only: any transform here would fight
   the attribute interpolation and the element would arrive twice. */
.elev .enter{ opacity:0 }
.elev .exit{ opacity:0; pointer-events:none }
.elev rect, .elev path, .elev line, .elev circle, .elev text{
  transition:opacity 240ms var(--ease);
}
/* The chain re-solves on every width/station change; it should read as a
   re-solve, so the label fades while the geometry slides beneath it. */
.elev .dim.txt, .elev .dim.lab{ transition:opacity 240ms var(--ease), fill var(--t2) }

/* dimensions — the drawing language, in metal */
.elev .dim.ln,.elev .dim.tick{ stroke:var(--metal-text); stroke-width:1; opacity:.85; fill:none }
.elev .dim.wit{ stroke:var(--metal-text); stroke-width:.8; opacity:.34 }
.elev .dim.txt{
  fill:var(--metal-text); font-family:'Plex Mono',monospace; font-size:calc(var(--fs)*.66);
  letter-spacing:.02em;
}
.elev .dim.txt.tiny{ display:none }
.elev .dim.lab{
  fill:var(--faint); font-family:'Plex Mono',monospace; font-size:calc(var(--fs)*.55);
  letter-spacing:.22em;
}
.elev .overall.ln,.elev .overall.tick{ stroke-width:1.4; opacity:1 }
.elev .overall.txt{ font-size:calc(var(--fs)*.86); font-weight:500 }


/* ============================================================ full screens
   Landing / summary / deliverables replace the instrument, so they own their
   own scrolling. */
.screen{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden }
#main{ flex:1; min-height:0; position:relative; display:flex; flex-direction:column }
#main > .body{ flex:1; min-height:0 }

.page{ max-width:1240px; margin:0 auto; padding:34px 30px 90px; width:100% }
.page-head{ margin-bottom:26px }
.page-head h1{
  font-size:27px; font-weight:200; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:7px;
}
.page-head .sub{ color:var(--faint); font-size:13px; max-width:64ch }

.grid{ display:grid; gap:14px }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:1040px){ .g3,.g4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:680px){ .g2,.g3,.g4{ grid-template-columns:minmax(0,1fr) } }

.card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column;
}
.card-h{
  display:flex; align-items:center; gap:9px; padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.card-h h3{ font-size:13px; font-weight:500; letter-spacing:.03em; flex:1 }
.card-b{ padding:14px; flex:1 }
.card-b.flush{ padding:0 }
.card-f{ padding:11px 14px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center }

/* ================================================================ landing
   The hero is the product drawing itself, live — not a stock photo and not a
   big number. It is the most characteristic thing in this subject's world. */
.landing{
  min-height:100%; display:flex; flex-direction:column;
  background:
    radial-gradient(80% 60% at 50% 0%, var(--sheen), transparent 62%),
    linear-gradient(var(--ink-1), var(--ink-0));
}
.land-nav{
  display:flex; align-items:center; gap:12px; padding:18px 30px;
  max-width:1240px; margin:0 auto; width:100%;
}
.land-hero{
  flex:1; max-width:1240px; margin:0 auto; width:100%; padding:26px 30px 40px;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:44px; align-items:center;
}
@media (max-width:960px){ .land-hero{ grid-template-columns:minmax(0,1fr); gap:26px } }

.land-copy .eyebrow{ margin-bottom:16px }
.land-copy h1{
  font-size:clamp(30px,4.4vw,54px); font-weight:200; letter-spacing:.03em;
  line-height:1.06; margin-bottom:18px;
}
.land-copy h1 em{
  font-style:normal; font-weight:500;
  background:linear-gradient(100deg,var(--metal-hi),var(--metal) 55%,var(--metal-lo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.land-copy p{ color:var(--dim); font-size:15px; line-height:1.62; max-width:52ch; margin-bottom:14px }
.land-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px }

/* the seven deliverables, as a typed list — order carries no meaning, so no
   01/02/03 numbering; they are a set, and the marks say so */
.deliv-list{ display:flex; flex-wrap:wrap; gap:7px; margin-top:30px }
.deliv-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px;
  border:1px solid var(--line-2); border-radius:999px; font-size:11.5px; color:var(--dim);
  transition:border-color var(--t2),color var(--t2),transform var(--t2) var(--ease);
}
.deliv-chip svg{ width:13px; height:13px; stroke-width:1.6; color:var(--metal-text) }
.deliv-chip:hover{ border-color:var(--metal-line); color:var(--text); transform:translateY(-1px) }

.land-stage{
  position:relative; aspect-ratio:16/11; border-radius:var(--r-lg);
  border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(var(--stage-1),var(--stage-2)); box-shadow:var(--sh-3);
}
.land-stage .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3; height:30px;
  display:flex; align-items:center; padding:0 14px;
  font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--faint);
  border-top:1px solid var(--line); background:linear-gradient(transparent,var(--sheen));
}

/* ========================================================== summary / KPI */
.kpi{ padding:15px 16px; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-md) }
.kpi .lab{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint) }
.kpi .val{
  font-family:'Plex Mono',monospace; font-size:24px; font-weight:500; letter-spacing:-.02em;
  margin-top:5px; display:flex; align-items:baseline; gap:5px;
}
.kpi .val .u{ font-size:12px }
.kpi .foot{ font-size:11px; color:var(--faint); margin-top:4px }
.kpi.metal .val{ color:var(--metal-text) }

/* ============================================================ deliverables
   Each output is a real card with its own state machine: idle → generating →
   ready. The staged progress is what shows the client the production pipeline. */
.out{
  position:relative; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color var(--t2), transform var(--t2) var(--ease), box-shadow var(--t2);
}
.out:hover{ transform:translateY(-2px); box-shadow:var(--sh-2) }
.out.ready{ border-color:var(--metal-line) }
.out-thumb{
  aspect-ratio:16/10; background:var(--ink-0); position:relative; overflow:hidden;
  display:grid; place-items:center; border-bottom:1px solid var(--line);
}
.out-thumb svg.sheet{ width:100%; height:100%; object-fit:contain }
.out-thumb .placeholder{ color:var(--faint); display:grid; place-items:center; gap:8px; text-align:center }
.out-thumb .placeholder svg{ width:26px; height:26px; stroke-width:1.3; margin:0 auto }
.out-b{ padding:12px 13px; flex:1; display:flex; flex-direction:column; gap:3px }
.out-b .t{ font-size:13px; font-weight:500 }
.out-b .d{ font-size:11.5px; color:var(--faint); line-height:1.45 }
.out-f{ padding:10px 13px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px }
.out-f .size{ font-family:'Plex Mono',monospace; font-size:10.5px; color:var(--faint); margin-left:auto }

/* generation overlay: the staged pipeline, one line at a time */
.gen{
  position:absolute; inset:0; background:var(--veil); backdrop-filter:blur(3px);
  display:flex; flex-direction:column; justify-content:center; gap:7px; padding:16px 18px; z-index:4;
}
.gen .stg{
  display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--faint);
  opacity:.32; transition:opacity var(--t2), color var(--t2);
}
.gen .stg .m{ width:13px; height:13px; flex:none; display:grid; place-items:center }
.gen .stg .m svg{ width:13px; height:13px; stroke-width:2 }
.gen .stg.on{ opacity:1; color:var(--text) }
.gen .stg.done{ opacity:.7; color:var(--dim) }
.gen .stg.done .m{ color:var(--ok) }
.gen .bar{ height:2px; background:var(--line-2); border-radius:2px; overflow:hidden; margin-top:6px }
.gen .bar i{ display:block; height:100%; background:var(--metal); width:0; transition:width 260ms linear }

.spin{ width:13px; height:13px; border:1.6px solid var(--line-2); border-top-color:var(--metal);
  border-radius:50%; animation:spin .7s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* success moment */
.done-burst{ display:grid; place-items:center; padding:26px 0 10px; text-align:center }
.done-ring{
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--metal); color:var(--metal-text); margin-bottom:14px;
  animation:ring-in 520ms cubic-bezier(.16,1,.3,1) backwards;
}
.done-ring svg{ width:26px; height:26px; stroke-width:1.8 }
@keyframes ring-in{
  from{ transform:scale(.6); opacity:0; box-shadow:0 0 0 0 var(--metal-glow) }
  to{ transform:scale(1); opacity:1; box-shadow:0 0 0 12px transparent }
}

/* =============================================== technical drawing (paper)
   The dark instrument hands you a white sheet — the tonal switch IS the moment
   the configuration becomes a document. */
.sheet-wrap{ background:var(--paper); border-radius:var(--r-sm); padding:0; overflow:hidden }
.sheet{ display:block; width:100%; height:auto; background:var(--paper) }
.sheet *{ vector-effect:non-scaling-stroke }
.sheet .ln{ stroke:var(--paper-ink); fill:none; stroke-width:1 }
.sheet .ln-thin{ stroke:#5A5750; fill:none; stroke-width:.6 }
.sheet .ln-hidden{ stroke:#8B857A; fill:none; stroke-width:.6; stroke-dasharray:5 3 }
.sheet .ln-centre{ stroke:#9A8C55; fill:none; stroke-width:.5; stroke-dasharray:14 3 3 3 }
.sheet .fill-glass{ fill:#DDE6EA; stroke:#3C4448; stroke-width:.7 }
.sheet .fill-body{ fill:#EDEAE3; stroke:var(--paper-ink); stroke-width:.9 }
.sheet .fill-solid{ fill:#FBFAF7; stroke:var(--paper-ink); stroke-width:.9 }
.sheet .fill-dark{ fill:#3A3A3E; stroke:var(--paper-ink); stroke-width:.8 }
.sheet .dim{ stroke:#2F5E8A; fill:none; stroke-width:.65 }
.sheet .dimtxt{ fill:#2F5E8A; font-family:'Plex Mono',monospace; letter-spacing:.02em }
.sheet .txt{ fill:var(--paper-ink); font-family:'Plex Sans',sans-serif }
.sheet .txt-mono{ fill:var(--paper-ink); font-family:'Plex Mono',monospace }
.sheet .tb-line{ stroke:var(--paper-ink); fill:none; stroke-width:.9 }
.sheet .tb-lab{ fill:#6B665C; font-family:'Plex Sans',sans-serif; letter-spacing:.1em }

/* ============================================================== timeline
   Configuration history. This IS a sequence, so it is numbered — order carries
   real information about how the configuration was reached. */
.tl{ display:flex; flex-direction:column; gap:0 }
.tl-item{
  display:flex; gap:10px; padding:7px 0; font-size:12px; position:relative;
  animation:fade var(--t2) var(--ease);
}
.tl-item .t{ font-family:'Plex Mono',monospace; font-size:10.5px; color:var(--faint); flex:none; width:52px }
.tl-item .x{ color:var(--dim); flex:1; min-width:0 }
.tl-item::before{
  content:''; position:absolute; left:57px; top:0; bottom:0; width:1px; background:var(--line);
}
.tl-item .d{
  width:5px; height:5px; border-radius:50%; background:var(--line-2); flex:none;
  margin-top:6px; position:relative; z-index:1; box-shadow:0 0 0 3px var(--ink-2);
}
.tl-item:first-child .d{ background:var(--metal) }
.tl-empty{ color:var(--faint); font-size:12px; padding:8px 0 }

/* ========================================================== keyboard help */
.keys{ display:grid; grid-template-columns:auto 1fr; gap:9px 16px; align-items:center }
kbd{
  font-family:'Plex Mono',monospace; font-size:11px; padding:3px 7px; border-radius:5px;
  background:var(--ink-3); border:1px solid var(--line-2); border-bottom-width:2px; color:var(--text);
  white-space:nowrap;
}
.keys .d{ font-size:12.5px; color:var(--dim) }

/* ============================================= the engineering package run
   One cinematic pass: pre-flight (the real check ledger), outputs, package.
   Weighted like a machine readout — mono for measured values, generous room
   around the score — because the content is engineering, not marketing. */
.pk-scrim{
  display:grid; place-items:center; padding:28px;
  opacity:0; transition:opacity var(--t3) var(--ease);
}
.pk-scrim.in{ opacity:1 }
.pk-panel{
  width:min(620px,100%); max-height:min(80vh,760px); display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-4); overflow:hidden;
  transform:translateY(10px) scale(.985);
  transition:transform var(--t4) var(--ease-out);
}
.pk-scrim.in .pk-panel{ transform:none }

.pk-head{ display:flex; align-items:center; gap:12px; padding:18px 20px 14px }
.pk-head h3{ font-family:'Plex Mono',monospace; font-size:15px; font-weight:500; letter-spacing:.01em; margin-top:3px }
.pk-count{ font-family:'Plex Mono',monospace; font-size:11.5px; color:var(--faint); flex:none }

.pk-barwrap{ padding:0 20px }
.pk-bar{ display:block; height:2px; background:var(--line); border-radius:2px; overflow:hidden }
.pk-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--metal-lo),var(--metal),var(--metal-hi));
  transition:width var(--t3) var(--ease);
}
.pk-phase{
  padding:12px 20px 8px; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);
}

.pk-list{ flex:1; overflow-y:auto; padding:0 20px 18px; display:flex; flex-direction:column; gap:1px }
.pk-step{
  display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:var(--r-sm);
  opacity:0; transform:translateY(-4px);
  transition:opacity var(--t2) var(--ease), transform var(--t2) var(--ease-out), background var(--t2);
}
.pk-step.in{ opacity:1; transform:none }
.pk-step.busy{ background:var(--sheen-2) }
.pk-step .m{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--faint) }
.pk-step .m svg{ width:15px; height:15px; stroke-width:2; fill:none }
.pk-step.st-pass  .m{ color:var(--ok) }
.pk-step.st-warn  .m{ color:var(--warn) }
.pk-step.st-info  .m{ color:var(--info) }
.pk-step.st-error .m{ color:var(--bad) }
.pk-step .l{ font-size:12.5px; font-weight:500 }
.pk-step .d{
  font-family:'Plex Mono',monospace; font-size:10.5px; color:var(--dim);
  margin-top:2px; line-height:1.45; word-break:break-word;
}
.pk-step .s{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
  flex:none; margin-top:2px;
}
.pk-step.st-pass  .s{ color:var(--ok) }
.pk-step.st-warn  .s{ color:var(--warn) }
.pk-step.st-error .s{ color:var(--bad) }

.pk-halt{ padding:4px 20px 22px; text-align:center; border-top:1px solid var(--line); margin-top:6px }
.pk-halt .ttl{ font-size:15px; font-weight:500; color:var(--bad); margin:16px 0 6px }
.pk-halt .sub{ font-size:12.5px; color:var(--dim); max-width:46ch; margin:0 auto; line-height:1.6 }

/* ---- success ---- */
.pk-done{
  padding:22px 22px 24px; text-align:center; border-top:1px solid var(--line);
  animation:pk-rise var(--t4) var(--ease-out) backwards;
}
@keyframes pk-rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.pk-done .tick{
  width:44px; height:44px; margin:0 auto 12px; border-radius:50%;
  display:grid; place-items:center; color:var(--ok);
  background:var(--ok-bg); border:1.5px solid color-mix(in srgb,var(--ok) 42%,transparent);
  animation:pk-pop 520ms var(--ease-out) backwards 80ms;
}
@keyframes pk-pop{ from{ transform:scale(.5); opacity:0 } to{ transform:none; opacity:1 } }
.pk-done .tick svg{ width:21px; height:21px; stroke-width:2.4; fill:none }
.pk-done .ttl{ font-size:17px; font-weight:500; letter-spacing:.01em }
.pk-done .sub{ font-size:12px; color:var(--faint); margin-top:5px }

.pk-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
  margin:16px 0 4px; text-align:left;
}
@media (max-width:520px){ .pk-grid{ grid-template-columns:minmax(0,1fr) } }
.pk-chip{
  display:flex; align-items:center; gap:9px; padding:9px 11px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--ink-3);
  opacity:0; transform:translateY(5px);
  transition:opacity var(--t3) var(--ease), transform var(--t3) var(--ease-out);
}
.pk-chip.in{ opacity:1; transform:none }
.pk-chip .ic{ width:15px; height:15px; flex:none; color:var(--metal-text) }
.pk-chip .ic svg{ width:15px; height:15px; stroke-width:1.6; fill:none }
.pk-chip .n{ font-size:12px; font-weight:500 }
.pk-chip .f{ font-family:'Plex Mono',monospace; font-size:9.5px; color:var(--faint); letter-spacing:.06em }

.pk-note{
  font-size:10.5px; color:var(--faint); line-height:1.55;
  margin-top:14px; max-width:52ch; margin-inline:auto;
}

/* Decorative end panel — a manufactured component, so it appears in the drawing
   as well as the BOM. Outlined rather than filled: at 20 mm it is a line weight,
   not an area, and a filled sliver merges with the carcase beside it. */
.elev .endpanel{ fill:var(--paper-2); stroke:var(--elev-appl); stroke-width:1.4 }

/* Reference figures — a reading aid, not product geometry. Outline only, well
   below the weight of the dimension chain, so they say "this is how big it is"
   without ever competing with a number. */
.elev .refig{
  fill:none; stroke:var(--elev-appl); stroke-width:1.1;
  opacity:.5; vector-effect:non-scaling-stroke;
}

/* Reference figures on the issued sheet — only when explicitly requested, and
   drawn lighter than any construction line so they can never be read as one. */
.sheet .ln-figure{ fill:none; stroke:#8B857A; stroke-width:.45; opacity:.75 }

/* An issue-time option, sitting with the output it changes. */
.out-opt{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:10.5px; color:var(--faint); margin-left:2px;
}
.out-opt input{ accent-color:var(--metal); width:13px; height:13px; margin:0 }
.out-opt:hover{ color:var(--dim) }

/* Halo / strip lighting on the issued sheet — the drawing convention for a
   concealed element: a dashed perimeter that says where the LED runs. */
.sheet .ln-halo{ fill:none; stroke:#9A8C55; stroke-width:.5; stroke-dasharray:6 3 }