*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

  html { scroll-behavior: smooth; }

  :root {
    --bg:        #0d1117;
    --surface:   #161b22;
    --surface-deep: #090d12;
    --surface-raised: #1c2330;
    --border:    #2a3140;
    --text:      #e6edf3;
    --text-muted:#7d8590;
    --cyan:      #58a6ff;
    --orange:    #d29922;
    --green:     #3fb950;
    --yellow:    #d4a72c;
    --red:       #f85149;
    --magenta:   #bc4dff;
    --purple:    #8957e5;
    --overlay:   rgba(0,0,0,0.60);
    --shadow:    rgba(0,0,0,0.45);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  body {
    font-family: Ubuntu, 'Ubuntu Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    padding: 40px 32px;
    max-width: 960px;
    margin: 0 auto;
    line-height: 1.5;
  }

  .mono { font-family: var(--font-mono); }

  /* ── typography ── */
  h1 { font-size: 1.75rem; font-weight: 600; margin-bottom: 4px; }

  .subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 32px;
  }

  .section-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
  }

  .demo-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 14px;
  }

  /* ── chamfered shape (octagon via clip-path) ── */
  .chamfer {
    --cut: 5px;
    --bw: 2px;
    position: relative;
    clip-path: polygon(
      var(--cut) 0%, calc(100% - var(--cut)) 0%,
      100% var(--cut), 100% calc(100% - var(--cut)),
      calc(100% - var(--cut)) 100%, var(--cut) 100%,
      0% calc(100% - var(--cut)), 0% var(--cut)
    );
  }

  .chamfer::before {
    content: '';
    position: absolute;
    inset: var(--bw);
    --inner: calc(var(--cut) - var(--bw) * 0.5858);
    clip-path: polygon(
      var(--inner) 0%, calc(100% - var(--inner)) 0%,
      100% var(--inner), 100% calc(100% - var(--inner)),
      calc(100% - var(--inner)) 100%, var(--inner) 100%,
      0% calc(100% - var(--inner)), 0% var(--inner)
    );
    z-index: 0;
  }

  /* the ::before surface paints above in-flow text; lift all children over it */
  .chamfer > * { position: relative; z-index: 1; }

  /* ── card ── */
  .card {
    --cut: 14px;
    --bw: 1px;
    --accent-w: 3px;
    background: var(--border);
    padding: 24px;
    margin-bottom: 28px;
  }
  .card::before { background: var(--surface); }
  .card::after {
    content: attr(data-section-ref);
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 16px;
    padding-left: 8px;
    border-left: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    color: color-mix(in srgb, var(--accent) 46%, var(--text-muted));
    font: 600 0.72rem/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
  }
  .card > .section-label:first-child { padding-right: 34px; }

  /* accent edge: the outer layer paints an accent stripe wide enough to wrap
     the chamfered corners, and the surface is inset further on that side */
  .card--accent-left {
    background: linear-gradient(90deg,
      var(--accent) 0 calc(var(--cut) + var(--accent-w)),
      var(--border) 0);
  }
  .card--accent-left::before {
    inset: var(--bw) var(--bw) var(--bw) var(--accent-w);
  }
  .card--accent-top {
    background: linear-gradient(180deg,
      var(--accent) 0 calc(var(--cut) + var(--accent-w)),
      var(--border) 0);
  }
  .card--accent-top::before {
    inset: var(--accent-w) var(--bw) var(--bw) var(--bw);
  }

  .accent-cyan    { --accent: var(--cyan); }
  .accent-green   { --accent: var(--green); }
  .accent-orange  { --accent: var(--orange); }
  .accent-yellow  { --accent: var(--yellow); }
  .accent-red     { --accent: var(--red); }
  .accent-magenta { --accent: var(--magenta); }
  .accent-purple  { --accent: var(--purple); }

  /* ── buttons ── */
  .btn-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
  .btn-row:last-child { margin-bottom: 0; }

  .btn {
    --cut: 5px;
    --bw: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 9px 28px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--text);
    border: none;
    cursor: pointer;
  }
  .btn::before {
    transition: background 0.2s;
  }

  .btn:not(.btn--disabled):hover::before {
    background: var(--btn-fill) !important;
  }
  .btn:not(.btn--disabled):active::before {
    filter: brightness(0.85);
  }
  .btn:focus-visible { filter: brightness(1.3); outline: none; }

  .btn--cyan {
    --btn-fill: rgba(88,166,255,0.18);
    background: var(--cyan);
  }
  .btn--cyan::before { background: var(--surface); }

  .btn--orange {
    --btn-fill: rgba(210,153,34,0.18);
    background: var(--orange);
  }
  .btn--orange::before { background: var(--surface); }

  .btn--purple {
    --btn-fill: rgba(137,87,229,0.22);
    background: var(--purple);
  }
  .btn--purple::before { background: var(--surface); }

  .btn--red {
    --btn-fill: rgba(248,81,73,0.18);
    background: var(--red);
  }
  .btn--red::before { background: var(--surface); }

  .btn--muted {
    --btn-fill: rgba(255,255,255,0.06);
    background: var(--border);
    color: var(--text-muted);
  }
  .btn--muted::before { background: var(--surface); }
  .btn--muted:not(.btn--disabled):hover { color: var(--text); }

  .btn--disabled {
    background: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
  }
  .btn--disabled::before {
    background: var(--surface);
  }

  /* ── segmented control ── */
  .seg {
    --cut: 6px;
    --bw: 1.5px;
    --seg-inner: calc(var(--cut) - var(--bw) * 0.5858);
    display: inline-flex;
    background: var(--border);
    padding: var(--bw);
    gap: var(--bw);
  }
  .seg-opt {
    border: none;
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 22px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .seg-opt:hover { color: var(--text); }
  .seg-opt:focus-visible { filter: brightness(1.3); outline: none; }
  .seg-opt.active {
    background: var(--purple);
    color: #fff;
  }
  /* first/last options carry their own inner chamfer so the ring
     stays visible along the group's corner diagonals */
  .seg-opt:first-child {
    clip-path: polygon(
      var(--seg-inner) 0%, 100% 0%, 100% 100%, var(--seg-inner) 100%,
      0% calc(100% - var(--seg-inner)), 0% var(--seg-inner)
    );
  }
  .seg-opt:last-child {
    clip-path: polygon(
      0% 0%, calc(100% - var(--seg-inner)) 0%, 100% var(--seg-inner),
      100% calc(100% - var(--seg-inner)), calc(100% - var(--seg-inner)) 100%, 0% 100%
    );
  }

  /* ── scrollable segmented rail ── */
  .scrollseg-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .scrollseg-summary { color: var(--text-muted); font-size: 0.8rem; }
  .scrollseg-pinned-count {
    min-width: 70px;
    margin-left: auto;
    color: var(--cyan);
    font: 0.72rem/1.4 var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .scrollseg-viewport { position: relative; }
  .scrollseg-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding-bottom: 8px;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--purple) transparent;
    scrollbar-width: thin;
    scroll-padding-inline: 12px;
  }
  .scrollseg-scroll::-webkit-scrollbar { height: 7px; }
  .scrollseg-scroll::-webkit-scrollbar-track { background: transparent; }
  .scrollseg-scroll::-webkit-scrollbar-thumb {
    background: var(--purple);
    border-radius: 0;
  }
  .scrollseg-scroll:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
  }
  .scrollseg-track {
    width: max-content;
    display: flex;
    gap: 9px;
    padding: 1px;
  }
  .scrollseg-slot {
    position: relative;
    width: 190px;
    height: 84px;
    flex: 0 0 190px;
  }
  .scrollseg-slot.is-pinned { order: -1; }

  .scrollseg-option {
    --cut: 6px;
    --bw: 1px;
    position: relative;
    width: 190px;
    height: 84px;
    flex: 0 0 190px;
    background: var(--border);
  }
  .scrollseg-option::before { background: var(--surface); }
  .scrollseg-option.active { background: var(--purple); }
  .scrollseg-option.active::before {
    background: color-mix(in srgb, var(--purple) 24%, var(--surface));
  }

  .scrollseg-option > .scrollseg-select {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    padding: 12px 38px 10px 14px;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .scrollseg-select:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
  .scrollseg-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font: 0.64rem/1.2 var(--font-mono);
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .scrollseg-title {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .scrollseg-detail {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .scrollseg-option--mono .scrollseg-title,
  .scrollseg-option--mono .scrollseg-detail { font-family: var(--font-mono); }
  .scrollseg-option--editorial .scrollseg-title { font-family: Georgia, serif; }
  .scrollseg-option.active .scrollseg-kicker { color: #c8b5ff; }
  .scrollseg-option.active .scrollseg-detail { color: #d8cff1; }

  .scrollseg-option > .scrollseg-pin {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: 0;
    color: color-mix(in srgb, var(--text-muted) 72%, transparent);
    background: transparent;
    cursor: pointer;
  }
  .scrollseg-pin::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    transform: rotate(45deg);
  }
  .scrollseg-pin::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 12px;
    width: 2px;
    height: 9px;
    background: currentColor;
  }
  .scrollseg-pin:hover,
  .scrollseg-pin:focus-visible { color: var(--cyan); outline: none; }
  .scrollseg-option.is-pinned .scrollseg-pin { color: var(--text-muted); }
  .scrollseg-option.is-pinned .scrollseg-pin::before { background: currentColor; }
  .scrollseg-pin:disabled {
    color: color-mix(in srgb, var(--text-muted) 26%, transparent);
    cursor: not-allowed;
  }
  .scrollseg-example + .scrollseg-example {
    padding-top: 20px;
    margin-top: 18px;
    border-top: 1px solid var(--border);
  }
  .scrollseg.pinning-unnecessary .scrollseg-pinned-count { color: var(--text-muted); }

  /* ── hierarchical checkboxes ── */
  .checktree {
    --cut: 8px;
    --bw: 1px;
    padding: 16px 18px 18px;
    background: var(--border);
  }
  .checktree::before { background: var(--bg); }

  .checktree-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .checktree-title { font-size: 0.9rem; font-weight: 600; }
  .checktree-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.72rem;
  }
  .checktree-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .checktree-key {
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
  }
  .checktree-key--readonly { background: var(--green); }
  .checktree-key--mutable { background: var(--orange); }

  /* bounded horizontal scroll so the chamfer clip never hides tree content */
  .checktree-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .checktree-scroll:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
  }

  .tree-list { list-style: none; }
  .tree-list .tree-list {
    margin-left: 9px;
    padding-left: 25px;
    border-left: 1px solid var(--border);
  }
  .tree-list .tree-list > li { position: relative; }
  .tree-branch { position: relative; }
  .tree-list .tree-list > li::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 17px;
    width: 16px;
    border-top: 1px solid var(--border);
  }
  .tree-label {
    --check-color: var(--cyan);
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 3px;
    font-size: 0.84rem;
    cursor: pointer;
  }
  .tree-label:hover .tree-name { color: var(--text); }
  .tree-label--branch { --check-color: var(--text-muted); }
  .tree-label--branch .tree-name { font-weight: 600; }
  .tree-label--readonly { --check-color: var(--green); }
  .tree-label--mutable { --check-color: var(--orange); }

  .tree-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .tree-box {
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid color-mix(in srgb, var(--check-color) 55%, var(--border));
    clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  }
  .tree-box::after {
    content: '';
    position: absolute;
    display: none;
  }
  .tree-input:checked + .tree-box,
  .tree-input:indeterminate + .tree-box {
    border-color: var(--check-color);
    background: color-mix(in srgb, var(--check-color) 18%, transparent);
  }
  .tree-input:checked + .tree-box::after {
    display: block;
    left: 3px;
    top: 2px;
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--check-color);
    border-bottom: 2px solid var(--check-color);
    transform: rotate(-45deg);
  }
  .tree-input:indeterminate + .tree-box::after {
    display: block;
    left: 3px;
    top: 6px;
    width: 8px;
    height: 2px;
    background: var(--check-color);
  }
  .tree-input:focus-visible + .tree-box {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
  }
  .tree-label--branch .tree-box {
    --triangle-neutral: var(--surface-deep);
    --triangle-top: var(--triangle-neutral);
    --triangle-right: var(--triangle-neutral);
    --triangle-bottom: var(--triangle-neutral);
    --triangle-left: var(--triangle-neutral);
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    /* the rotated corners extend ~3.7px past the 18px slot on each side */
    margin: 0 4px;
    border-width: 2px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--text-muted) 68%, var(--border));
    clip-path: none;
    transform: rotate(45deg);
    background: var(--triangle-neutral);
  }
  .tree-label--branch .tree-input:checked + .tree-box,
  .tree-label--branch .tree-input:indeterminate + .tree-box {
    border-color: color-mix(in srgb, var(--text-muted) 68%, var(--border));
    background: var(--triangle-neutral);
  }
  /* 0.5deg blends at the wedge seams antialias the conic hard stops */
  .tree-label--branch .tree-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(from -90deg,
      var(--triangle-top) 0 calc(25% - 0.5deg),
      var(--triangle-right) calc(25% + 0.5deg) calc(50% - 0.5deg),
      var(--triangle-bottom) calc(50% + 0.5deg) calc(75% - 0.5deg),
      var(--triangle-left) calc(75% + 0.5deg) calc(100% - 0.5deg),
      var(--triangle-top) 100%);
  }
  .tree-label--branch .tree-box[data-readonly-state="partial"] { --triangle-left: var(--green); }
  .tree-label--branch .tree-box[data-readonly-state="all"] {
    --triangle-top: var(--green);
    --triangle-left: var(--green);
  }
  .tree-label--branch .tree-box[data-mutable-state="partial"] { --triangle-right: var(--orange); }
  .tree-label--branch .tree-box[data-mutable-state="all"] {
    --triangle-right: var(--orange);
    --triangle-bottom: var(--orange);
  }
  .tree-label--branch .tree-input:checked + .tree-box::after,
  .tree-label--branch .tree-input:indeterminate + .tree-box::after { display: none; }
  .tree-name { color: var(--text-muted); }
  .tree-kind {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .tree-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    color: var(--text-muted);
    font: 0.68rem/1.4 var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .tree-count-kind {
    --kind-color: var(--text-muted);
    min-width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: color-mix(in srgb, var(--kind-color) 45%, var(--text-muted));
  }
  .tree-count-kind::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border: 1px solid currentColor;
    transform: rotate(45deg);
  }
  .tree-count-kind--readonly { --kind-color: var(--green); }
  .tree-count-kind--mutable { --kind-color: var(--orange); }
  .tree-count-kind.has-selection { color: var(--kind-color); }
  .tree-branch-row {
    min-height: 34px;
    display: flex;
    align-items: center;
  }
  .tree-branch-row > .tree-label {
    min-width: 0;
    flex: 0 1 auto;
  }
  .tree-branch-row > .tree-count { margin-left: auto; }
  .tree-branch-tools {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid var(--border);
  }
  .tree-kind-toggle {
    --kind-color: var(--text-muted);
    position: relative;
    width: 18px;
    height: 18px;
    border: 0;
    color: color-mix(in srgb, var(--kind-color) 42%, var(--text-muted));
    background: transparent;
    font-size: 0;
    cursor: pointer;
    opacity: 0.72;
    transition: color 0.15s, opacity 0.15s;
  }
  .tree-kind-toggle::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: 8px;
    height: 8px;
    border: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .tree-kind-toggle--readonly { --kind-color: var(--green); }
  .tree-kind-toggle--mutable { --kind-color: var(--orange); }
  .tree-kind-toggle[data-state="partial"],
  .tree-kind-toggle[data-state="all"] {
    color: var(--kind-color);
    opacity: 1;
  }
  .tree-branch-row:hover .tree-kind-toggle { opacity: 1; }
  .tree-kind-toggle:hover,
  .tree-kind-toggle:focus-visible {
    color: var(--kind-color);
    opacity: 1;
    outline: none;
  }
  .tree-kind-toggle:focus-visible::before {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
  }
  .tree-kind-toggle:disabled {
    display: none;
  }

  @media (max-width: 620px) {
    .checktree-head { align-items: flex-start; flex-wrap: wrap; }
    .checktree-legend { margin-left: auto; }
    .tree-list--root { min-width: 480px; }
  }

  /* ── form ── */
  .form-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; }

  .input-wrap {
    --cut: 8px;
    --bw: 1.5px;
    background: var(--border);
  }
  .input-wrap::before {
    background: rgba(255,255,255,0.06);
    transition: background 0.2s;
  }
  .input-wrap:focus-within {
    background: var(--purple);
  }
  .input-wrap:focus-within::before {
    background: rgba(137,87,229,0.4);
  }

  .input {
    display: block;
    width: 100%;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    border: none;
    outline: none;
  }
  .input::placeholder { color: var(--text-muted); }

  /* ── status badges & glyphs ── */
  .badge-row { display: flex; gap: 10px; flex-wrap: wrap; }

  .badge {
    --cut: 3px;
    --bw: 1.5px;
    display: inline-block;
    padding: 3px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .badge--cyan   { background: var(--cyan);   color: var(--cyan); }
  .badge--cyan::before   { background: var(--surface); }
  .badge--green  { background: var(--green);  color: var(--green); }
  .badge--green::before  { background: var(--surface); }
  .badge--yellow { background: var(--yellow); color: var(--yellow); }
  .badge--yellow::before { background: var(--surface); }
  .badge--red    { background: var(--red);    color: var(--red); }
  .badge--red::before    { background: var(--surface); }
  .badge--purple { background: var(--purple); color: var(--purple); }
  .badge--purple::before { background: var(--surface); }

  /* skeleton state while real status is being fetched */
  .badge--checking {
    background: var(--border);
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
  }
  .badge--checking::before { background: var(--surface); }

  .glyph-row {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 18px;
  }
  .glyph-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
  }
  .glyph { font-weight: 700; font-size: 1rem; }
  .glyph--waiting  { color: var(--cyan); }
  .glyph--running  { color: var(--orange); }
  .glyph--done     { color: var(--green); }
  .glyph--graceful { color: var(--yellow); }
  .glyph--failed   { color: var(--red); }
  .glyph--skipped  { color: var(--text-muted); }

  /* ── harness chips ── */
  .hchip-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

  .hchip {
    --cut: 3px;
    --bw: 0px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bg);
    cursor: default;
    transition: filter 0.12s;
  }
  .hchip:hover { filter: brightness(1.25); }

  .hchip--opencode { background: var(--cyan); }
  .hchip--claude   { background: #d97757; }
  .hchip--codex    { background: var(--green); }
  .hchip--grok     { background: var(--yellow); }
  .hchip--cursor   { background: #a371f7; }
  .hchip--done     { opacity: 0.35; }
  .hchip--overflow { background: var(--border); color: var(--text-muted); }

  /* ── chrome: status bar / breadcrumbs / tabs ── */
  .statusbar {
    --cut: 8px;
    --bw: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--border);
    padding: 10px 18px;
    font-size: 0.85rem;
  }
  .statusbar::before { background: var(--bg); }

  .crumbs {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .crumbs a { color: inherit; text-decoration: none; }
  .crumbs a:hover { color: var(--cyan); }
  .crumb-sep { color: var(--text-muted); font-weight: 400; margin: 0 7px; }

  .statusbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    white-space: nowrap;
  }

  /* connection dot: a 45°-rotated square, on language */
  .dot {
    position: relative;
    width: 8px;
    height: 8px;
    display: inline-block;
    transform: rotate(45deg);
    flex-shrink: 0;
  }
  .dot--live { background: var(--green); }
  .dot--connecting { background: var(--cyan); }
  /* the ring pulses via transform/opacity so the animation stays off the paint path */
  .dot--connecting::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 2px solid rgba(88,166,255,0.3);
    animation: dot-pulse 1.2s ease-in-out infinite;
  }
  .dot--down { background: var(--red); }
  @keyframes dot-pulse {
    50% { transform: scale(1.8); opacity: 0.2; }
  }

  .dot-legend {
    display: flex;
    gap: 26px;
    align-items: center;
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
  }
  .dot-legend span { display: inline-flex; align-items: center; gap: 8px; }

  .tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-top: 16px;
  }
  .tab {
    position: relative;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
  }
  .tab:hover { color: var(--text); }
  .tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
  .tab.active {
    color: var(--cyan);
    text-shadow: 0.3px 0 currentColor, -0.3px 0 currentColor;
  }
  /* trapezoid underline: 45° ends instead of a plain bar */
  .tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: var(--cyan);
    clip-path: polygon(3px 0%, calc(100% - 3px) 0%, 100% 100%, 0% 100%);
  }
  .tab-panel-demo {
    padding: 14px 4px 2px;
    color: var(--text-muted);
    font-size: 0.9rem;
  }

  /* ── table ── */
  .table-scroll { overflow-x: auto; }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
  }
  .table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: middle;
  }
  .table tbody tr:hover { background: rgba(255,255,255,0.03); }

  .job-id { font-family: var(--font-mono); color: var(--cyan); }

  /* RTL ellipsis keeps the tail of long paths visible */
  .repo-path {
    font-family: var(--font-mono);
    color: var(--text-muted);
    display: block;
    max-width: 220px;
    direction: rtl;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── collapsible status rows ── */
  .proc {
    --cut: 8px;
    --bw: 1px;
    --accent-w: 3px;
    background: linear-gradient(90deg,
      var(--accent) 0 calc(var(--cut) + var(--accent-w)),
      var(--border) 0);
    margin-bottom: 10px;
  }
  .proc::before {
    background: var(--surface);
    inset: var(--bw) var(--bw) var(--bw) var(--accent-w);
  }
  .proc:last-child { margin-bottom: 0; }

  .proc--ok      { --accent: var(--green); }
  .proc--running { --accent: var(--orange); }
  .proc--fail    { --accent: var(--red); }
  .proc--waiting { --accent: var(--cyan); }

  .proc summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
  }
  .proc summary::-webkit-details-marker { display: none; }
  .proc summary:focus-visible { filter: brightness(1.3); outline: none; }

  .proc-caret {
    color: var(--text-muted);
    font-size: 0.65rem;
    transition: transform 0.15s;
  }
  .proc[open] .proc-caret { transform: rotate(90deg); }

  .proc-glyph { font-weight: 700; }
  .proc--ok      .proc-glyph { color: var(--green); }
  .proc--running .proc-glyph { color: var(--orange); }
  .proc--fail    .proc-glyph { color: var(--red); }
  .proc--waiting .proc-glyph { color: var(--cyan); }

  .proc-name { font-weight: 600; }
  .proc-meta {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .proc-body {
    padding: 0 16px 14px 36px;
    color: var(--text-muted);
    font-size: 0.85rem;
  }
  .proc-body .mono { font-size: 0.8rem; }

  /* ── workflow nodes ── */
  .wf-row { display: flex; gap: 14px; flex-wrap: wrap; }

  .wf-node {
    --cut: 7px;
    --bw: 1px;
    --accent-w: 3px;
    width: 200px;
    min-height: 72px;
    padding: 11px 12px 10px 15px;
    background: linear-gradient(90deg,
      var(--accent) 0 calc(var(--cut) + var(--accent-w)),
      var(--node-border, var(--border)) 0);
  }
  .wf-node::before {
    background: var(--bg);
    inset: var(--bw) var(--bw) var(--bw) var(--accent-w);
  }
  .wf-node--sm { width: 170px; min-height: 60px; }

  .wf-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .wf-ico { font-weight: 700; }
  .wf-meta {
    margin-top: 6px;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
  }

  .wf-node--waiting { --accent: var(--border); }
  .wf-node--waiting .wf-ico { color: var(--cyan); }
  .wf-node--running {
    --accent: var(--orange);
    --node-border: rgba(210,153,34,0.55);
  }
  /* the pulse is an opacity-only tint overlay, cheaper than animating filter */
  .wf-node--running::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--orange);
    opacity: 0;
    pointer-events: none;
    animation: wf-pulse 2s ease-in-out infinite;
  }
  .wf-node--running .wf-ico { color: var(--orange); }
  .wf-node--done { --accent: var(--green); }
  .wf-node--done .wf-ico { color: var(--green); }
  .wf-node--failed { --accent: var(--red); }
  .wf-node--failed .wf-ico { color: var(--red); }
  .wf-node--skipped { --accent: var(--border); opacity: 0.55; }
  .wf-node--skipped .wf-ico { color: var(--text-muted); }

  @keyframes wf-pulse {
    50% { opacity: 0.14; }
  }

  .wf-outcome-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 18px;
  }
  .wf-outcome {
    --cut: 4px;
    --bw: 1.5px;
    display: inline-block;
    padding: 4px 16px;
    font-size: 0.78rem;
    font-weight: 600;
  }
  .wf-outcome--ok { background: var(--green); color: var(--green); }
  .wf-outcome--ok::before { background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
  .wf-outcome--running { background: var(--orange); color: var(--orange); }
  .wf-outcome--running::before { background: color-mix(in srgb, var(--orange) 12%, var(--surface)); }
  .wf-outcome--fail { background: var(--red); color: var(--red); }
  .wf-outcome--fail::before { background: color-mix(in srgb, var(--red) 12%, var(--surface)); }

  .wf-gate {
    --cut: 2px;
    --bw: 1px;
    display: inline-block;
    padding: 2px 9px;
    font-size: 0.68rem;
    font-family: var(--font-mono);
    background: var(--purple);
    color: var(--purple);
  }
  .wf-gate::before { background: var(--surface); }

  /* loop island: dashed ring via 45° stripes on the outer layer */
  .wf-loop {
    --cut: 12px;
    --bw: 1.5px;
    padding: 16px;
    margin-top: 18px;
    background: repeating-linear-gradient(45deg,
      rgba(137,87,229,0.65) 0 5px, transparent 5px 9px);
  }
  .wf-loop::before { background: color-mix(in srgb, var(--purple) 4%, var(--surface)); }

  .wf-loop-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 12px;
  }
  .wf-loop-progress {
    --cut: 3px;
    --bw: 1px;
    display: inline-block;
    padding: 3px 12px;
    font-size: 0.75rem;
    color: var(--cyan);
    background: repeating-linear-gradient(45deg,
      var(--cyan) 0 4px, transparent 4px 7px);
  }
  .wf-loop-progress::before { background: var(--surface); }

  /* ── workflow diagram ── */
  .wf-diagram-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .wf-summary { font-size: 0.85rem; color: var(--text-muted); }
  .wf-jump {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.15em;
  }
  .wf-jump:hover { color: var(--cyan); text-decoration-color: var(--cyan); }

  .wf-zoom { margin-left: auto; display: inline-flex; gap: 6px; }
  .wf-zbtn {
    --cut: 4px;
    --bw: 1px;
    min-width: 34px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--border);
    border: none;
    cursor: pointer;
  }
  .wf-zbtn::before { background: var(--surface); }
  .wf-zbtn:hover { color: var(--text); }
  .wf-zbtn:focus-visible { filter: brightness(1.3); outline: none; }

  .workflow-visual { position: relative; }

  /* floating legend, top-right over the graph */
  .workflow-legend {
    --cut: 5px;
    --bw: 1px;
    position: absolute;
    z-index: 4;
    top: 10px;
    right: 10px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 5px 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--border);
  }
  .workflow-legend::before { background: var(--surface); }
  .workflow-legend .glyph { font-size: 0.85rem; margin-right: 3px; }

  /* scrollable stage; gradient edge-fades cue horizontal overflow, scrollbars hidden */
  .workflow-scroll {
    --cut: 8px;
    --bw: 0px;
    overflow: auto;
    max-width: 100%;
    height: 305px;
    padding: 10px;
    display: flex;
    align-items: center;
    overscroll-behavior: contain;
    scrollbar-width: none;
    background:
      linear-gradient(90deg, var(--bg) 30%, transparent) left center / 20px 100% no-repeat,
      linear-gradient(270deg, var(--bg) 30%, transparent) right center / 20px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.35), transparent) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.35), transparent) right center / 12px 100% no-repeat,
      var(--bg);
    background-attachment: local, local, scroll, scroll, local;
  }
  .workflow-scroll::-webkit-scrollbar { display: none; }
  .workflow-scroll:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

  .workflow-sizer { flex: 0 0 auto; margin: auto; }
  .workflow-stage { position: relative; transform-origin: 0 0; }

  .workflow-edges {
    position: absolute;
    inset: 0;
    color: #8b949e;
    pointer-events: none;
  }
  .wf-edge {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.92;
  }
  .wf-arrowhead { stroke: currentColor; }

  .workflow-stage .wf-node,
  .workflow-stage .wf-bookend {
    position: absolute;
    margin: 0;
  }
  .workflow-stage .wf-node {
    width: 180px;
    height: 72px;
    min-height: 0;
  }

  /* image-build node variant: cyan accent, monospace id */
  .wf-node--build { --accent: var(--cyan); }
  .wf-node--build .wf-ico { color: var(--cyan); }
  .wf-node--build .wf-head { font-family: var(--font-mono); font-size: 0.8rem; }

  .wf-flash { animation: wf-flash 1s ease; }
  @keyframes wf-flash { 30% { filter: brightness(1.9); } }

  /* start / finish bookends: play triangle and checkered flag */
  .wf-bookend {
    --cut: 6px;
    --bw: 1px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);
    user-select: none;
  }
  .wf-bookend::before { background: var(--bg); }

  .wf-start-play {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
  }
  .wf-finish-flag {
    display: block;
    width: 18px;
    height: 14px;
    margin-left: 3px;
    border: 1px solid var(--text-muted);
    background-color: var(--bg);
    background-image:
      linear-gradient(45deg, var(--text-muted) 25%, transparent 25%),
      linear-gradient(-45deg, var(--text-muted) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--text-muted) 75%),
      linear-gradient(-45deg, transparent 75%, var(--text-muted) 75%);
    background-size: 6px 6px;
    background-position: 0 0, 0 3px, 3px -3px, 3px 0;
  }
  .wf-finish-flag::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -1px;
    bottom: -6px;
    width: 2px;
    background: var(--text-muted);
  }

  /* ── banners ── */
  .banner {
    --cut: 8px;
    --bw: 1px;
    padding: 13px 18px;
    font-size: 0.85rem;
    margin-bottom: 12px;
  }
  .banner:last-child { margin-bottom: 0; }

  .banner--danger { background: var(--red); }
  .banner--danger::before { background: color-mix(in srgb, var(--red) 8%, var(--bg)); }
  .banner--danger .banner-title { color: var(--red); }

  .banner--info { background: var(--cyan); }
  .banner--info::before { background: color-mix(in srgb, var(--cyan) 8%, var(--bg)); }
  .banner--info a { color: var(--cyan); }

  .banner-title { font-weight: 700; margin-bottom: 2px; }
  .banner ul { margin: 4px 0 0 18px; color: var(--text-muted); }

  /* ── log output ── */
  .output {
    --cut: 8px;
    --bw: 1px;
    background: var(--border);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.65;
  }
  .output::before { background: var(--surface-deep); }
  .output-scroll {
    max-height: 16rem;
    overflow: auto;
    padding: 14px 18px;
  }
  .output-variant-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 7px 4px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .output-variant-label .output-zone {
    color: #aeb6c2;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
  }
  .output-variant + .output-variant { margin-top: 16px; }
  .output-grid { min-width: 560px; }
  .output-head,
  .line {
    display: grid;
    grid-template-columns: 108px 48px minmax(0, 1fr);
    column-gap: 10px;
  }
  .output-head {
    position: sticky;
    z-index: 2;
    top: -14px;
    padding: 3px 0 7px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface-deep);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .output-zone {
    white-space: normal;
  }
  .line { white-space: pre-wrap; }
  .line .at {
    color: var(--text-muted);
    text-align: right;
    user-select: none;
  }
  .line .at-wall { color: #8b949e; user-select: none; }
  .line-msg { min-width: 0; }
  .line--ok .at   { color: color-mix(in srgb, var(--green) 72%, var(--text-muted)); }
  .line--warn .at { color: color-mix(in srgb, var(--yellow) 72%, var(--text-muted)); }
  .line--err .at  { color: color-mix(in srgb, var(--red) 72%, var(--text-muted)); }
  .line--ok   { color: var(--green); }
  .line--warn { color: var(--yellow); }
  .line--err  { color: var(--red); }

  /* ── dialog & toast ── */
  .overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
  }
  .overlay.open { display: flex; }

  .dialog {
    --cut: 16px;
    --bw: 1px;
    width: min(440px, 90vw);
    padding: 24px;
    background: var(--border);
    filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55));
  }
  .dialog::before { background: var(--surface); }

  .dialog-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
  .dialog-body {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }

  .toast {
    --cut: 6px;
    --bw: 1px;
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    width: min(190px, calc(100vw - 32px));
    padding: 10px 22px;
    text-align: center;
    font-size: 0.85rem;
    background: var(--border);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 2000;
  }
  .toast::before { background: var(--surface-raised); }
  .toast.show {
    opacity: 1;
  }

  /* ── tooltip ── */
  .ui-tip {
    --cut: 5px;
    --bw: 1px;
    position: fixed;
    z-index: 100;
    max-width: calc(44ch + 30px);
    padding: 6px 12px;
    font-size: 0.75rem;
    line-height: 1.5;
    background: var(--border);
    pointer-events: none;
    display: none;
  }
  .ui-tip::before { background: var(--surface-raised); }
  .ui-tip.show { display: block; }
  .ui-tip.show:not(.positioned) { visibility: hidden; }

  .ui-tip-lines { display: grid; gap: 3px; white-space: pre-wrap; }

  .tip-target {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-decoration: underline dotted var(--text-muted);
    text-underline-offset: 3px;
    cursor: help;
  }
  .tip-target:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
  .tooltip-sentence { font-size: 0.9rem; }

  /* ── docked inspector ── */
  .inspect-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 12px;
    align-items: stretch;
  }
  .inspect-surface {
    min-width: 0;
    min-height: 320px;
    display: grid;
    place-items: center;
    padding: 22px;
    border: 1px solid var(--border);
    background:
      linear-gradient(rgba(88,166,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(88,166,255,.04) 1px, transparent 1px),
      var(--surface-deep);
    background-size: 28px 28px;
  }
  .inspect-targets {
    width: min(100%, 480px);
    display: grid;
    gap: 10px;
  }
  .inspect-target {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .inspect-target:hover,
  .inspect-target:focus-visible,
  .inspect-target[aria-pressed='true'] {
    border-color: var(--cyan);
    outline: none;
    box-shadow: inset 3px 0 var(--cyan);
  }
  .inspect-target-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--cyan);
    font: 600 .64rem/1.2 var(--font-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .inspect-target-detail { display: block; color: var(--text-muted); font-size: .72rem; }

  .inspector {
    --cut: 10px;
    --bw: 1px;
    min-width: 0;
    min-height: 320px;
    overflow: auto;
    background: var(--border);
    scrollbar-gutter: stable;
  }
  .inspector::before { background: var(--surface-deep); }
  .inspector[data-pinned='true'] { background: var(--yellow); }
  .inspector-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px 9px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
  }
  .inspector-state {
    color: var(--text-muted);
    font: 600 .66rem/1.2 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .inspector[data-pinned='true'] .inspector-state { color: var(--yellow); }
  .inspector-clear {
    width: 30px;
    height: 28px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface);
    font: 700 .76rem/1 var(--font-mono);
    cursor: pointer;
  }
  .inspector-clear:hover,
  .inspector-clear:focus-visible { border-color: var(--cyan); color: var(--text); outline: none; }
  .inspector-clear:disabled { opacity: .35; cursor: default; }
  .inspector-body {
    position: relative;
    z-index: 1;
    padding: 14px;
    color: var(--text);
    font-size: .8rem;
    user-select: text;
    overflow-wrap: anywhere;
  }
  .inspector-empty {
    min-height: 230px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font: .74rem/1.5 var(--font-mono);
    text-align: center;
  }
  .inspector-title { margin-bottom: 10px; font-size: .92rem; font-weight: 650; }
  .inspector-title a { color: var(--cyan); }
  .inspector-facts { display: grid; grid-template-columns: 74px minmax(0, 1fr); border-top: 1px solid var(--border); }
  .inspector-facts dt,
  .inspector-facts dd { min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--border); }
  .inspector-facts dt { color: var(--text-muted); font: 600 .64rem/1.45 var(--font-mono); text-transform: uppercase; }
  .inspector-facts dd { margin: 0; }
  .inspector-note { margin-top: 10px; color: var(--text-muted); font-size: .7rem; }

  @media (max-width: 760px) {
    .inspect-layout { grid-template-columns: 1fr; }
    .inspector { grid-row: 1; min-height: 210px; max-height: 260px; }
    .inspect-surface { grid-row: 2; min-height: 280px; }
    .inspector-empty { min-height: 120px; }
  }

  /* ── Dise migration component extensions ── */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .card--compact { padding: 16px; }
  .card-heading { font-size: 1.05rem; font-weight: 600; }
  .card-description { margin-top: 4px; color: var(--text-muted); font-size: 0.82rem; }
  .card-header,
  .panel-header,
  .component-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .card-header { justify-content: space-between; margin-bottom: 16px; }
  .card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .panel {
    padding: 16px;
    border: 1px solid var(--border);
    background: var(--surface-deep);
  }
  .panel--dense { padding: 8px 12px; }
  .panel + .panel { margin-top: 12px; }
  .empty-state { padding: 28px 16px; color: var(--text-muted); text-align: center; }
  .empty-state strong { display: block; margin-bottom: 4px; color: var(--text); }
  .skeleton-stack { display: grid; gap: 10px; }
  .skeleton-line {
    position: relative;
    height: 12px;
    overflow: hidden;
    background: var(--border);
  }
  .skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--surface-raised), transparent);
    transform: translateX(-100%);
    animation: skeleton-shift 1.4s linear infinite;
  }
  .skeleton-line--short { width: 58%; }
  @keyframes skeleton-shift { to { transform: translateX(100%); } }

  .btn--green { --btn-fill: rgba(63,185,80,0.18); background: var(--green); }
  .btn--green::before { background: var(--surface); }
  .btn--ghost { min-width: 0; padding-inline: 12px; background: transparent; color: var(--text-muted); }
  .btn--ghost::before { background: transparent; }
  .btn--ghost:hover { color: var(--text); }
  .btn--small { min-width: 0; min-height: 32px; padding: 5px 12px; font-size: 0.78rem; }
  .btn--icon { min-width: 36px; width: 36px; height: 36px; padding: 0; }
  .btn[aria-busy="true"] { cursor: wait; }
  .btn-spinner {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 8px;
    border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .state-gallery { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
  .state-sample { padding: 12px; border: 1px solid var(--border); background: var(--surface-deep); }
  .state-sample-label { margin-bottom: 8px; color: var(--text-muted); font-size: 0.67rem; text-transform: uppercase; letter-spacing: .06em; }
  .focus-demo { outline: 2px solid var(--cyan); outline-offset: 3px; }

  .field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .field { min-width: 0; }
  .field-label-row { display: flex; gap: 6px; align-items: baseline; margin-bottom: 6px; }
  .field-label { font-size: 0.82rem; font-weight: 600; }
  .field-optional { color: var(--text-muted); font-size: 0.7rem; }
  .field-control {
    --cut: 7px;
    --bw: 1px;
    display: flex;
    align-items: center;
    background: var(--border);
  }
  .field-control::before { background: var(--surface-deep); }
  .field:focus-within .field-control { background: var(--cyan); }
  .field-input {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
  }
  .field-input::placeholder { color: var(--text-muted); }
  .field-input:disabled { color: var(--text-muted); cursor: not-allowed; }
  .field-input[readonly] { color: #aeb6c2; font-family: var(--font-mono); }
  .field-action { width: 36px; height: 36px; border: 0; color: var(--text-muted); background: transparent; cursor: pointer; }
  .field-action:hover,.field-action:focus-visible { color: var(--cyan); outline: 0; }
  .field-hint,.field-message { min-height: 1.35em; margin-top: 5px; color: var(--text-muted); font-size: 0.72rem; }
  .field--invalid .field-control { background: var(--red); }
  .field--invalid .field-message { color: var(--red); }
  .field--loading .field-message { color: var(--cyan); }

  .native-select { appearance: none; padding-right: 38px; cursor: pointer; }
  .select-caret { width: 0; height: 0; margin-right: 14px; border: 5px solid transparent; border-top-color: var(--text-muted); transform: translateY(3px); pointer-events: none; }
  .listbox { position: relative; }
  .listbox-trigger {
    width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; border: 1px solid var(--border); color: var(--text); background: var(--surface-deep);
    font: inherit; text-align: left; cursor: pointer;
  }
  .listbox-trigger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .listbox-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .listbox-menu {
    --cut: 8px;
    --bw: 1px;
    position: fixed; z-index: 1200; display: none;
    padding: var(--bw);
    background: var(--border);
    filter: drop-shadow(0 14px 36px var(--shadow));
  }
  .listbox-menu.open { display: block; }
  .listbox-menu-scroll {
    --inner: calc(var(--cut) - var(--bw) * 0.5858);
    max-height: 230px;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--surface-raised);
  }
  /* the edge facing the trigger stays square so the menu reads as attached;
     the far corners carry the octagon cut */
  .listbox-menu--down { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
  .listbox-menu--down .listbox-menu-scroll { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--inner)), calc(100% - var(--inner)) 100%, var(--inner) 100%, 0 calc(100% - var(--inner))); }
  .listbox-menu--up { clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%, 0 var(--cut)); }
  .listbox-menu--up .listbox-menu-scroll { clip-path: polygon(var(--inner) 0, calc(100% - var(--inner)) 0, 100% var(--inner), 100% 100%, 0 100%, 0 var(--inner)); }
  .listbox-option { padding: 9px 12px; color: var(--text-muted); cursor: pointer; }
  .listbox-option[aria-selected="true"] { color: var(--text); background: color-mix(in srgb,var(--purple) 22%,var(--surface-raised)); }
  .listbox-option.active { outline: 1px solid var(--cyan); outline-offset: -2px; color: var(--text); }
  .listbox-option[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
  .listbox-option-detail { display: block; margin-top: 2px; color: var(--text-muted); font: .68rem var(--font-mono); }

  .permission-list { display: grid; gap: 6px; }
  .permission-row {
    --permission-color: var(--green);
    --check-color: var(--permission-color);
    position: relative;
    display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 10px; align-items: start;
    min-height: 44px; padding: 9px 10px; border-left: 2px solid var(--permission-color); background: var(--surface-deep); cursor: pointer;
  }
  .permission-row--mutable { --permission-color: var(--orange); }
  .permission-row--locked { opacity: .72; cursor: not-allowed; }
  .permission-row > .tree-box { margin-top: 1px; }
  .permission-name { font-size: .82rem; font-weight: 600; }
  .permission-detail { display: block; margin-top: 2px; color: var(--text-muted); font-size: .72rem; }
  .permission-scope { color: var(--permission-color); font: .68rem var(--font-mono); }

  .badge--orange { background: var(--orange); color: var(--orange); }
  .badge--orange::before { background: var(--surface); }
  .connection-status { display: inline-flex; min-width: 0; align-items: center; gap: 8px; color: var(--text-muted); font-size: .78rem; }
  .connection-label { color: var(--text); }
  .connection-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .callout {
    --callout-color: var(--cyan); --cut: 8px; --bw: 1px;
    padding: 13px 16px; background: var(--callout-color);
  }
  .callout::before { background: color-mix(in srgb,var(--callout-color) 7%,var(--surface-deep)); }
  .callout--success { --callout-color: var(--green); }
  .callout--warning { --callout-color: var(--yellow); }
  .callout--error { --callout-color: var(--red); }
  .callout--held { --callout-color: var(--orange); }
  .callout--compact { padding: 9px 12px; }
  .callout--compact .callout-title { font-size: .82rem; }
  .callout--compact .callout-body { font-size: .72rem; }
  .callout-title { color: var(--callout-color); font-weight: 700; }
  .callout-body { margin-top: 3px; color: var(--text-muted); font-size: .8rem; }
  .callout-reasons { margin: 6px 0 0 18px; }
  #component-feedback > .callout + .callout,
  #component-feedback > .callout + .state-gallery,
  #component-feedback > .state-gallery + .callout { margin-top: 12px; }
  .inline-message { min-height: 1.4em; color: var(--text-muted); font-size: .76rem; }
  .inline-message--progress { color: var(--cyan); }
  .inline-message--success { color: var(--green); }
  .inline-message--warning { color: var(--yellow); }
  .inline-message--error { color: var(--red); }

  .metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--border); background: var(--border); gap: 1px; }
  .metric-grid--six { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stat { min-width: 0; padding: 13px 14px; background: var(--surface-deep); }
  .stat-label { color: var(--text-muted); font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
  .stat-value { min-width: 7ch; margin-top: 4px; color: var(--text); font: 600 1rem var(--font-mono); font-variant-numeric: tabular-nums; }
  .stat-meta { margin-top: 2px; color: var(--text-muted); font-size: .66rem; }
  .stat--positive .stat-value { color: var(--green); }
  .stat--warning .stat-value { color: var(--yellow); }
  .value-pair { display: grid; grid-template-columns: minmax(0,1fr) repeat(2,minmax(110px,auto)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
  .value-source,.value-channel { padding: 13px 14px; background: var(--surface-deep); }
  .value-source-name { font-weight: 600; }
  .value-meta { color: var(--text-muted); font-size: .68rem; }
  .value-channel-label { display: block; color: var(--text-muted); font-size: .65rem; text-transform: uppercase; }
  .value-reading { display: block; margin-top: 2px; font: 600 .95rem var(--font-mono); }
  .value-channel--input .value-reading { color: var(--green); }
  .value-channel--output .value-reading { color: var(--red); }
  .value-pair--stale { border-color: var(--yellow); }

  .copy-value-trigger { padding: 0; border: 0; border-bottom: 1px dotted var(--text-muted); color: var(--cyan); background: transparent; font: inherit; cursor: pointer; }
  .copy-value-trigger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
  .copy-popover {
    position: fixed; z-index: 1400; display: none; width: min(420px,calc(100vw - 24px));
    padding: 12px; border: 1px solid var(--border); background: var(--surface-raised); box-shadow: 0 16px 40px var(--shadow);
  }
  .copy-popover.open { display: block; }
  .copy-popover-title { margin-bottom: 6px; font-size: .72rem; font-weight: 600; }
  .copy-popover-value { display: grid; max-height: 12em; overflow: auto; overflow-wrap: anywhere; color: var(--text-muted); font: .72rem/1.5 var(--font-mono); user-select: text; }
  .copy-popover-line { display: grid; grid-template-columns: minmax(0,1fr) 32px; gap: 8px; align-items: center; min-height: 34px; border-top: 1px solid var(--border); }
  .copy-popover-line:first-child { border-top: 0; }
  .copy-popover-line-label { color: var(--text); }
  .copy-line-button {
    position: relative;
    width: 32px;
    height: 32px;
    border: 0;
    color: color-mix(in srgb,var(--text-muted) 62%,transparent);
    background: transparent;
    cursor: pointer;
  }
  .copy-line-button::before,
  .copy-line-button::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 13px;
    border: 1px solid currentColor;
    clip-path: polygon(3px 0,100% 0,100% 100%,0 100%,0 3px);
  }
  .copy-line-button::before { left: 8px; top: 7px; }
  .copy-line-button::after { left: 12px; top: 11px; background: var(--surface-raised); }
  .copy-line-button:hover,
  .copy-line-button:focus-visible { color: var(--cyan); outline: 0; }
  .copy-line-button:focus-visible::after { outline: 2px solid var(--cyan); outline-offset: 3px; }
  .copy-popover-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
  .copy-feedback { color: var(--green); font-size: .7rem; }
  .copy-popover-copy { flex: 0 0 auto; }

  .data-table-viewport { overflow: auto; border: 1px solid var(--border); }
  .data-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .76rem; }
  .data-table--dense td { padding-block: 7px; }
  .data-table th { position: sticky; top: 0; z-index: 1; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); background: var(--surface-deep); font-size: .64rem; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
  .data-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .data-table .numeric { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .data-table tbody tr:hover { background: rgba(255,255,255,.025); }
  .data-table tr.row--current { box-shadow: inset 3px 0 var(--cyan); }
  .data-table tr.row--running { background: color-mix(in srgb,var(--purple) 8%,transparent); }
  .data-table tr.row--failed { background: color-mix(in srgb,var(--red) 6%,transparent); }
  .table-state-cell { padding: 22px !important; color: var(--text-muted); text-align: center; }
  .progressive-reveal { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
  .progressive-reveal + .state-gallery { margin-top: 12px; }

  .event-log { border: 1px solid var(--border); background: var(--surface-deep); }
  .event-row { border-bottom: 1px solid var(--border); }
  .event-row:last-child { border-bottom: 0; }
  .event-summary { display: grid; grid-template-columns: 76px 58px 58px 90px minmax(0,1fr) 16px; gap: 8px; align-items: center; padding: 9px 11px; list-style: none; cursor: pointer; font-size: .73rem; }
  .event-summary::-webkit-details-marker { display: none; }
  .event-summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
  .event-time,.event-age,.event-gap { color: var(--text-muted); font-family: var(--font-mono); }
  .event-type { font-weight: 600; }
  .event-type--success { color: var(--green); }
  .event-type--warning { color: var(--yellow); }
  .event-type--error { color: var(--red); }
  .event-type--pipeline { color: var(--purple); }
  .event-caret { color: var(--text-muted); transition: transform .15s; }
  .event-row[open] .event-caret { transform: rotate(90deg); }
  .event-detail { padding: 0 12px 12px; }
  .event-json { padding: 10px; overflow: auto; color: #aeb6c2; background: var(--bg); font: .7rem/1.45 var(--font-mono); white-space: pre-wrap; }

  .code-block { border: 1px solid var(--border); background: var(--surface-deep); }
  .code-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .68rem; }
  .code-block-body { max-height: 180px; overflow: auto; padding: 12px; color: #aeb6c2; font: .72rem/1.55 var(--font-mono); white-space: pre; }
  .code-block--wrap .code-block-body { white-space: pre-wrap; overflow-wrap: anywhere; }
  .secret-value { padding: 12px; border: 1px solid var(--border); background: var(--surface-deep); }
  .secret-value > .component-row { min-height: 34px; }
  .secret-toggle { width: 82px; }
  .secret-text { min-height: 1.5em; margin-top: 12px; overflow-wrap: anywhere; font: .72rem/1.5 var(--font-mono); }
  .secret-warning { margin-top: 8px; color: var(--yellow); font-size: .7rem; }

  .plot-shell { border: 1px solid var(--border); background: var(--surface-deep); }
  .plot-canvas { width: 100%; height: 240px; display: block; outline: 0; }
  .plot-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan); }
  .plot-summary { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 12px; border-top: 1px solid var(--border); color: var(--text-muted); font: .72rem var(--font-mono); }
  .plot-summary strong { color: var(--text); }
  .plot-legend { display: flex; gap: 14px; margin-bottom: 8px; color: var(--text-muted); font-size: .7rem; }
  .plot-key { display: inline-flex; align-items: center; gap: 5px; }
  .plot-key::before { content: ''; width: 12px; border-top: 2px solid var(--plot-color); }
  .plot-key--input { --plot-color: var(--green); }
  .plot-key--output { --plot-color: var(--red); }
  .plot-key--live { --plot-color: var(--cyan); }
  .plot-empty { display: grid; min-height: 180px; place-items: center; color: var(--text-muted); }

  .app-shell-demo { border: 1px solid var(--border); background: var(--surface-deep); }
  .app-shell-status,.app-shell-stream,.app-shell-tabs,.app-shell-subrow { min-height: 40px; display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
  .app-shell-status { justify-content: space-between; background: var(--surface-raised); }
  .app-shell-stream { justify-content: center; font: .72rem var(--font-mono); }
  .app-shell-tabs { overflow-x: auto; }
  .app-shell-tab { flex: 0 0 auto; padding: 6px 10px; border: 0; color: var(--text-muted); background: transparent; font: inherit; cursor: pointer; }
  .app-shell-tab[aria-selected="true"] { color: var(--cyan); box-shadow: inset 0 -2px var(--cyan); }
  .app-shell-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
  .app-shell-panel[hidden] { display: none; }
  .app-shell-subrow { overflow-x: auto; color: var(--text-muted); font-size: .72rem; }
  .app-shell-main { padding: 18px; }
  .app-shell-demo > .callout--compact { margin: 12px 12px 0; }

  .state-matrix { width: 100%; border-collapse: collapse; font-size: .72rem; }
  .state-matrix th,.state-matrix td { padding: 8px 9px; border: 1px solid var(--border); text-align: left; }
  .state-matrix th { color: var(--text-muted); background: var(--surface-deep); }
  .state-chip { color: var(--text-muted); }
  .state-chip--loading { color: var(--cyan); }
  .state-chip--error { color: var(--red); }
  .state-chip--stale { color: var(--yellow); }

  .dialog--medium { width: min(620px,92vw); }
  .dialog--large { width: min(820px,94vw); }
  .dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .dialog-scroll { max-height: min(62vh,560px); overflow: auto; }
  body.dialog-open { overflow: hidden; }
  .dialog-state-grid { display: grid; gap: 10px; }

  @media (max-width: 720px) {
    .field-grid { grid-template-columns: 1fr; }
    .metric-grid,.metric-grid--six { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .value-pair { grid-template-columns: 1fr 1fr; }
    .value-source { grid-column: 1 / -1; }
    .event-summary { grid-template-columns: 70px 52px 1fr 16px; }
    .event-gap,.event-type { grid-row: 2; }
    .event-summary-text { grid-column: 3; }
    .event-detail { padding-left: 12px; }
  }
  @media (max-width: 520px) {
    body { padding: 24px 14px; }
    .card { padding: 18px; }
    .metric-grid,.metric-grid--six { grid-template-columns: 1fr; }
    .dialog-actions { flex-direction: column-reverse; }
    .dialog-actions .btn { width: 100%; }
    .permission-row { grid-template-columns: 20px minmax(0,1fr); }
    .permission-scope { grid-column: 2; }
    .state-gallery { grid-template-columns: 1fr; }
  }

  /* ── motion ── */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .wf-node--running::after, .dot--connecting::after, .wf-flash, .skeleton-line::after, .btn-spinner { animation: none; }
    .btn, .toast, .proc-caret, .hchip, .seg-opt, .event-caret { transition: none; }
  }