/* Generated from prototype.html — do not hand-edit; edit the prototype then re-split. */
* { box-sizing: border-box; }
  body {
    margin: 0; background: var(--ground); color: var(--ink);
    font-family: var(--sans); font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  h1,h2,h3 { margin: 0; letter-spacing: -0.015em; font-weight: 640; }
  button { font-family: inherit; cursor: pointer; }
  .eyebrow {
    text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px;
    font-weight: 650; color: var(--faint);
  }

  /* ── App shell ── */
  .app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }

  /* ── Sidebar ── */
  .rail {
    background: var(--surface); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; padding: 18px 14px; gap: 4px;
    position: sticky; top: 0; height: 100vh;
  }
  .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
  .brand-mark {
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    background: linear-gradient(145deg, var(--accent), var(--accent-ink));
    display: grid; place-items: center; color: #fff; position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  }
  .brand-mark svg { width: 17px; height: 17px; }
  .brand-name { font-weight: 660; font-size: 14.5px; letter-spacing: -0.01em; }
  .brand-sub { font-size: 11px; color: var(--faint); margin-top: -1px; }

  .nav-group-label { padding: 14px 10px 6px; }
  .nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: none; background: none; border-radius: 8px;
    color: var(--muted); font-size: 13.5px; font-weight: 520; text-align: left;
    transition: background .12s, color .12s;
  }
  .nav-item svg { width: 16px; height: 16px; flex: none; opacity: .85; }
  .nav-item:hover { background: var(--surface-2); color: var(--ink); }
  .nav-item.active { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
  .nav-item.active svg { opacity: 1; }
  .nav-count {
    margin-left: auto; font-size: 11px; color: var(--faint);
    font-family: var(--mono);
  }
  .rail-foot { margin-top: auto; padding: 10px 8px 2px; border-top: 1px solid var(--border-2); }
  .theme-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
    border: none; background: none; border-radius: 8px; color: var(--muted); font-size: 13px;
  }
  .theme-btn:hover { background: var(--surface-2); color: var(--ink); }
  .theme-btn svg { width: 15px; height: 15px; }

  /* ── Main ── */
  .main { min-width: 0; display: flex; flex-direction: column; }
  .topbar {
    display: flex; align-items: center; gap: 16px; padding: 20px 32px;
    border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--ground) 82%, transparent);
    backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20;
  }
  .topbar .title-wrap { min-width: 0; }
  .topbar h1 { font-size: 18px; }
  .topbar .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
  .spacer { flex: 1; }
  .btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border-radius: 9px; border: 1px solid var(--border); background: var(--surface);
    color: var(--ink); font-size: 13px; font-weight: 550; transition: .12s;
  }
  .btn:hover { border-color: var(--faint); }
  .btn svg { width: 14px; height: 14px; }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
  .btn-primary.dirty { box-shadow: 0 0 0 3px var(--accent-wash); }

  .view { padding: 28px 32px 64px; max-width: 940px; }
  /* Setup, Pipeline, Strategies: let the view fill the full width, then center each
     content block — EXCEPT the .phase-band header, which runs full width from the left. */
  #view-settings, #view-pipeline, #view-strategies { max-width: none; }
  #view-settings   > :not(.phase-band),
  #view-pipeline   > :not(.phase-band),
  #view-strategies > :not(.phase-band) { max-width: 940px; margin-left: auto; margin-right: auto; }
  /* table-heavy views use the full width; form views stay at reading width */
  #view-overview, #view-overrides, #view-data { max-width: none; }
  .view[hidden] { display: none; }
  .view-intro { margin-bottom: 22px; }
  .view-intro p { color: var(--muted); margin: 6px 0 0; max-width: 62ch; }

  /* ── Phase divider ── */
  .phase-band {
    display: flex; align-items: center; gap: 12px; margin: 4px 0 16px;
  }
  .phase-band .eyebrow { white-space: nowrap; }
  .phase-band .rule { height: 1px; background: var(--border); flex: 1; }