/* SurgeX · base: reset, type scale, layout primitives (the split pane).
   Owner: foundation. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
body{background:var(--page);color:var(--ink);font:400 15px/24px var(--ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;min-height:100dvh;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
a{color:inherit;-webkit-tap-highlight-color:transparent}
img,video,svg{display:block;max-width:100%}
img{height:auto}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
[hidden]{display:none !important}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
::selection{background:var(--gold-soft)}

/* ── Icons: one tuned 1.5 px family. SX.icon() renders <svg class="i"> ── */
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
svg.rb{width:16px;height:18px;flex:none;overflow:visible;display:inline-block}

/* ── Type scale (CHOSEN.md) ── */
.h1,h1{font:640 48px/52px var(--display);font-stretch:112%;letter-spacing:-.02em;text-wrap:balance}
.h2,h2{font:620 24px/30px var(--display);font-stretch:106%;letter-spacing:-.01em;text-wrap:balance}
.h3,h3{font:600 18px/24px var(--display);font-stretch:100%;letter-spacing:-.003em}
h4,.h4{font:600 15px/22px var(--ui)}
.h1 .x,h1 .x{color:var(--ink-3);font-weight:420}
.lead,.cue-text{font:500 17px/26px var(--ui);letter-spacing:-.003em}
.body{font:400 15px/24px var(--ui)}
.ui{font:500 13px/18px var(--ui)}
.meta{font:500 12px/16px var(--ui);letter-spacing:.01em;color:var(--ink-3)}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
p{text-wrap:pretty}
/* numerals: timecodes, kg, reps, counts, prices */
.tc,.num{font-family:var(--display);font-stretch:100%;font-weight:600;font-variant-numeric:tabular-nums}
.num-xl{font:600 96px/1 var(--display);font-stretch:100%;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.num-l{font:600 56px/1 var(--display);font-stretch:100%;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.num-m{font:600 28px/32px var(--display);font-stretch:100%;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.num-s{font:600 20px/26px var(--display);font-stretch:100%;font-variant-numeric:tabular-nums}
/* IDs (SX-R-0418): Instrument Sans 500 +0.04em, never mono */
.id{font:500 12px/16px var(--ui);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.gold{color:var(--gold-text)}
.ok-t{color:var(--ok)} .due-t{color:var(--due)} .err-t{color:var(--err)}
.vh,.sr-only{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nowrap{white-space:nowrap}
.dot-sep{display:inline-block;width:3px;height:3px;border-radius:9px;background:var(--ink-3);vertical-align:middle;margin:0 8px}

/* ── App frame ── */
#app{min-height:100vh;min-height:100dvh}
.page{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 96px}
.page.narrow{max-width:880px}
.page.mid{max-width:1180px}
.view-enter{animation:sx-fade var(--t-fast) ease-out both}

/* breadcrumbs + the object's own title row (no marketing headline above the product) */
.crumbs{display:flex;align-items:center;gap:8px;padding-top:20px;font:500 13px/18px var(--ui);color:var(--ink-3);flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs svg.i{width:12px;height:12px}
.titlerow{display:flex;align-items:flex-end;gap:32px;padding:10px 0 24px;flex-wrap:wrap}
.titlerow .grow{flex:1;min-width:0}
.titlerow .sub{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:12px;font:500 13px/18px var(--ui);color:var(--ink-2)}
.titlerow .acts{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:2px}

/* ── Surfaces: stepped, nested ≤ 2 ── */
.panel{background:var(--s1);border-radius:var(--r-panel);box-shadow:var(--panel-shadow)}
.panel-pad{padding:24px}
.card{background:var(--s2);border-radius:var(--r-card)}
.card-3{background:var(--s3);border-radius:var(--r-card);box-shadow:0 0 0 1px var(--edge)}
.inset{background:var(--inset);border-radius:var(--r-card)}
.rule{height:1px;background:var(--hair);border:0}

/* ── The split pane: stage + context column ── */
.split{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);background:var(--s1);border-radius:var(--r-panel);box-shadow:var(--panel-shadow)}
.split > .split-stage{padding:24px 28px 22px 24px;min-width:0}
.split > .split-ctx{background:var(--s2);border-radius:0 var(--r-panel) var(--r-panel) 0;padding:22px 24px 24px;min-width:0;display:flex;flex-direction:column}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split.wide-ctx{grid-template-columns:minmax(0,56fr) minmax(0,44fr)}
/* two-column page layout outside a panel */
.cols{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:0 56px}
.cols > *{min-width:0}

/* ── Stacks and clusters ── */
.stack{display:flex;flex-direction:column}
.stack-4{display:flex;flex-direction:column;gap:4px}
.stack-8{display:flex;flex-direction:column;gap:8px}
.stack-12{display:flex;flex-direction:column;gap:12px}
.stack-16{display:flex;flex-direction:column;gap:16px}
.stack-24{display:flex;flex-direction:column;gap:24px}
.stack-32{display:flex;flex-direction:column;gap:32px}
.cluster{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.cluster-12{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.grow{flex:1;min-width:0}
.sp{flex:1}
.h2row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.h2row p{font:500 13px/18px var(--ui);color:var(--ink-3)}
.section{margin-top:56px}

/* phone: the stage pins to the top and the context scrolls under it */
@media (max-width:1180px){
  .split,.split.even,.split.wide-ctx{grid-template-columns:1fr}
  .split > .split-ctx{border-radius:0 0 var(--r-panel) var(--r-panel)}
  .cols{grid-template-columns:1fr;gap:40px}
}
@media (max-width:760px){
  .h1,h1{font-size:34px;line-height:38px;font-stretch:108%}
  .h2,h2{font-size:21px;line-height:26px}
  .num-xl{font-size:72px}
  .num-l{font-size:44px}
  .page{padding:0 var(--gutter) 64px}
  .crumbs{padding-top:12px}
  .titlerow{display:block;padding:6px 0 16px}
  .titlerow .acts{margin-top:14px}
  .split{border-radius:0;box-shadow:none;background:transparent;margin:0 calc(var(--gutter) * -1)}
  .split > .split-stage{padding:0}
  .split > .split-ctx{background:transparent;border-radius:0;padding:16px var(--gutter) 20px}
  .pinned{position:sticky;top:0;z-index:var(--z-sticky);background:var(--page);box-shadow:0 1px 0 var(--hair)}
  .panel-pad{padding:16px}
  .section{margin-top:32px}
  .h2row{flex-direction:column;gap:2px}
}

@keyframes sx-fade{from{opacity:0}to{opacity:1}}
@keyframes sx-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sx-scale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes sx-sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes sx-ring{0%{transform:scale(.6)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes sx-drop{0%{transform:translateX(-50%) scale(.6);opacity:0}70%{transform:translateX(-50%) scale(1.04);opacity:1}100%{transform:translateX(-50%) scale(1)}}
@keyframes sx-shimmer{from{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}
@keyframes sx-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:120ms !important;animation-iteration-count:1 !important;transition-duration:0ms !important;scroll-behavior:auto !important}
  .skel{animation:none !important}
}