/* Gigaflow ops console. Pico is gone: this file is the base and the
       product layer. Tokens match the Unhinged Kit; function still wins. */

    @font-face {
      font-family: "Space Grotesk";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("/static/space-grotesk-700.woff2") format("woff2");
    }
    @font-face {
      font-family: "Space Mono";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("/static/space-mono-400.woff2") format("woff2");
    }
    @font-face {
      font-family: "Space Mono";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("/static/space-mono-700.woff2") format("woff2");
    }

    :root {
      --void: #0A0B09;
      --acid: #C6FF2E;
      --alarm: #FF2EA6;
      --cyan: #2EE8FF;
      --muted: #8FAE63;
      --rule: #1F2B16;
      --ink: #F2FFE0;
      --panel: #0A0B09;
      --raised: #131810;
      --space: 1rem;
      --mono: "Space Mono", ui-monospace, monospace;
      --display: "Space Grotesk", ui-sans-serif, sans-serif;

      --st-queued: var(--muted);
      --st-running: #F0B429;
      --st-ok: var(--acid);
      --st-fail: var(--alarm);
      --st-skipped: var(--muted);
    }

    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { background: var(--void); color: var(--ink); }
    body {
      min-height: 100dvh;
      background: var(--void);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 14px;
      line-height: 1.5;
    }

    a { color: var(--acid); text-decoration: none; }
    a:hover { color: #e8ffd0; }
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--acid);
      outline-offset: 2px;
    }

    h1, h2, h3 {
      font-family: var(--display);
      font-weight: 700;
      letter-spacing: -.03em;
      color: var(--ink);
      margin: 0 0 .35rem;
    }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1rem; font-family: var(--mono); letter-spacing: 0; }
    .page-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: .85rem;
    }
    .page-head-copy { min-width: 0; flex: 1; }
    .page-head h2 { margin: 0; }
    .page-head .subtitle { margin-bottom: 0; }
    .page-actions {
      display: flex;
      align-items: center;
      gap: .5rem;
      flex: 0 0 auto;
      margin-left: auto;
      padding-top: .15rem;
    }
    .heading-switch { display: inline-block; margin: 0; }

    p { margin: 0 0 .75rem; }
    img { max-width: 100%; }

    .skip {
      position: absolute;
      left: .75rem;
      top: -3rem;
      padding: .4rem .7rem;
      background: var(--acid);
      color: var(--void);
      font-weight: 700;
      z-index: 200;
    }
    .skip:focus { top: .75rem; }

    /* --- chrome ------------------------------------------------------- */

    body > header {
      padding: 14px 28px;
      border-bottom: 1px solid var(--rule);
    }
    body > header nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem;
    }
    .nav-end {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      margin-left: auto;
    }
    body > header nav ul {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .brand { display: inline-flex; align-items: center; gap: .65rem; padding: 0; }
    .brand-word {
      font-family: var(--mono);
      font-weight: 700;
      font-size: 15px;
      color: var(--acid);
      letter-spacing: .04em;
    }
    .brand-mark {
      display: block;
      width: 1.75rem;
      height: 1.75rem;
      object-fit: contain;
    }
    .brand:hover .brand-mark { opacity: .75; }

    .nav-go { position: relative; }
    .nav-go > summary {
      list-style: none;
      cursor: pointer;
      color: var(--acid);
      font-size: 12px;
      font-weight: 700;
    }
    .nav-go > summary::-webkit-details-marker { display: none; }
    .nav-go > summary::after { content: " ▾"; color: var(--muted); font-weight: 400; }
    .nav-go[open] > summary::after { content: " ▴"; }
    .nav-go ul {
      position: absolute;
      top: calc(100% + .45rem);
      right: 0;
      left: auto;
      min-width: 11rem;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: .35rem;
      background: var(--raised);
      border: 1px solid var(--rule);
      z-index: 40;
    }
    .nav-go a {
      display: flex;
      align-items: center;
      gap: .55rem;
      padding: .4rem .55rem;
      color: #9fbf78;
      font-size: 12px;
    }
    .nav-go svg {
      width: 1rem;
      height: 1rem;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .nav-go a[aria-current="page"] { color: var(--acid); }
    .nav-go a:hover { color: var(--ink); background: var(--void); }

    .who {
      color: var(--muted);
      font-size: .75rem;
      font-variant-numeric: tabular-nums;
    }
    .logout { margin: 0; }
    .logout button {
      margin: 0;
      padding: .2rem .55rem;
      font-size: .75rem;
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--rule);
    }
    .logout button:hover { color: var(--ink); border-color: var(--muted); }

    main {
      max-width: 1180px;
      margin: 0 auto;
      padding: 28px 28px 64px;
    }
    main.centered {
      display: grid;
      place-items: center;
      min-height: calc(100dvh - 8rem);
    }
    main.centered > article {
      width: 100%;
      max-width: 23rem;
      margin: 0;
      border: 1px solid var(--rule);
      background: var(--raised);
      padding: 1.25rem;
    }

    /* --- toasts --------------------------------------------------------- */

    #toasts {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 100;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      max-width: min(24rem, calc(100vw - 2rem));
      max-height: calc(100vh - 2rem);
      overflow-y: auto;
    }
    .toast {
      display: flex;
      align-items: flex-start;
      gap: .5rem;
      padding: 12px 14px;
      font-size: .875rem;
      border: 1px solid var(--alarm);
      background: #160a11;
      color: #f6c8e3;
      overflow-wrap: anywhere;
    }
    .toast-dismiss {
      margin: 0 0 0 auto;
      padding: 0 .25rem;
      border: none;
      background: none;
      color: var(--alarm);
      font-size: 1rem;
      line-height: 1;
      width: auto;
    }

    /* --- forms / tables ---------------------------------------------- */

    button, .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-weight: 700;
      font-size: 12px;
      padding: 8px 14px;
      border: 1px solid var(--acid);
      background: var(--acid);
      color: var(--void);
      cursor: pointer;
      text-decoration: none;
    }
    button.outline, button.secondary, a.button.outline {
      background: transparent;
      color: var(--muted);
      border-color: var(--rule);
    }
    button:hover, .button:hover { filter: brightness(1.08); color: var(--void); }
    button.outline:hover, button.secondary:hover, a.button.outline:hover {
      filter: none;
      color: var(--ink);
    }
    button:disabled { opacity: .45; cursor: not-allowed; }

    input, select, textarea {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--ink);
      background: var(--void);
      border: 1px solid var(--rule);
      padding: .45rem .6rem;
      width: 100%;
    }
    label { display: block; margin-bottom: .75rem; }
    form { margin-bottom: 1rem; }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
      gap: .6rem;
      margin-bottom: .6rem;
    }
    .field { display: block; margin: 0 0 1rem; }
    .field-label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: .35rem;
    }
    fieldset.field {
      border: 0;
      padding: 0;
      margin: 0 0 1rem;
      min-width: 0;
    }
    .hint {
      display: block;
      margin: .35rem 0 0;
      font-size: 12px;
      color: var(--muted);
    }
    .switch-field {
      position: relative;
      display: flex;
      align-items: center;
      gap: .65rem;
      margin: 0 0 .65rem;
      cursor: pointer;
      color: var(--ink);
    }
    .switch-field input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      margin: 0;
    }
    .switch-field input:focus-visible + .switch {
      outline: 2px solid var(--acid);
      outline-offset: 2px;
    }
    .switch-field input:checked + .switch {
      background: var(--acid);
      border-color: var(--acid);
    }
    .switch-field input:checked + .switch .switch-knob {
      left: auto;
      right: 2px;
      background: var(--void);
    }

    figure { margin: 0 0 var(--space); }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: .875rem;
    }
    table :where(td, th) {
      padding: .5rem .7rem;
      border-bottom: 1px solid var(--rule);
      text-align: left;
    }
    table thead th {
      font-size: .6875rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
    }
    table tbody tr:hover { background: var(--raised); }
    .col-status    { width: 7.5rem; }
    .col-started   { width: 7rem; }
    .col-duration  { width: 6rem; }
    .col-connector { width: 11rem; }
    .row-action { margin: 0; display: inline-flex; }
    .row-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: .2rem;
      min-width: 6.75rem;
    }
    .switch-form { margin: 0; display: inline-flex; }
    .switch {
      position: relative;
      width: 2rem;
      height: 1.15rem;
      padding: 0;
      border-radius: 999px;
      border: 1px solid var(--rule);
      background: var(--raised);
      color: transparent;
      flex: 0 0 auto;
    }
    .switch.is-on {
      background: var(--acid);
      border-color: var(--acid);
    }
    .switch-knob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 0.9rem;
      height: 0.9rem;
      border-radius: 50%;
      background: var(--ink);
    }
    .switch.is-on .switch-knob {
      left: auto;
      right: 2px;
      background: var(--void);
    }
    .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      padding: 0;
      margin: 0;
      background: transparent;
      color: var(--muted);
      border: 1px solid transparent;
    }
    .icon-btn svg {
      width: 1rem;
      height: 1rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .icon-btn.danger { color: var(--alarm); }
    .icon-btn:hover:not(:disabled) {
      color: var(--ink);
      background: var(--raised);
    }
    .icon-btn:disabled { opacity: .35; }
    .dialog-actions {
      display: flex;
      gap: .5rem;
      align-items: center;
    }
    .form-dialog {
      border-color: var(--rule);
      width: min(28rem, calc(100vw - 2rem));
      padding: 1.15rem 1.25rem 1.25rem;
    }
    .form-dialog h3 { margin-bottom: 1rem; }
    .form-dialog form { margin-bottom: 0; }
    a.text-link {
      color: var(--acid);
      text-decoration: underline;
      text-underline-offset: .2em;
      font-weight: 700;
    }
    :where(td, th).num {
      text-align: right;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .mono { font-family: var(--mono); font-size: .8125em; }
    .muted { color: var(--muted); }
    pre, code { font-family: var(--mono); }
    pre {
      max-height: 26rem;
      overflow: auto;
      margin: 0;
      padding: .85rem 1rem;
      background: var(--void);
      border: 1px solid var(--rule);
      color: var(--ink);
    }
    .code-panel {
      border: 1px solid var(--rule);
      background: var(--void);
    }
    .code-panel pre { border: 0; }
    .empty { color: var(--muted); }
    .empty-hint { margin-bottom: .5rem; }
    .error { color: var(--alarm); }
    .flush-bottom { margin-bottom: 0; }
    .subtitle {
      color: var(--muted);
      font-size: .875rem;
      margin-bottom: .75rem;
    }
    .detail-id { margin-top: var(--space); }
    article { margin-bottom: 1rem; }

    /* --- status ------------------------------------------------------- */

    .badge {
      display: inline-flex;
      align-items: center;
      gap: .4em;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .02em;
      white-space: nowrap;
      color: var(--st);
    }
    .badge::before {
      content: "";
      width: .5em;
      height: .5em;
      border-radius: 50%;
      background: currentColor;
      flex: none;
    }
    .badge.is-waiting::before,
    .badge.is-stopped::before {
      background: none;
      box-shadow: inset 0 0 0 1.5px currentColor;
    }
    .badge.st-queued    { --st: var(--st-queued); }
    .badge.st-running   { --st: var(--st-running); }
    .badge.st-succeeded { --st: var(--st-ok); }
    .badge.st-failed    { --st: var(--st-fail); }
    .badge.st-canceled  { --st: var(--st-queued); }
    .badge.st-pending   { --st: var(--st-queued); }
    .badge.st-skipped   { --st: var(--st-skipped); }
    .badge.is-live::before { animation: pulse 1.6s ease-in-out infinite; }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: .55; }
    }

    /* --- runs --------------------------------------------------------- */

    .filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .5rem;
      padding: .65rem 0 .85rem;
      margin: 0 0 1rem;
      border-bottom: 1px solid var(--rule);
    }
    .filters select { width: auto; min-width: 9.5rem; margin: 0; }
    .filters .spacer { margin-left: auto; }
    .filters .clear { font-size: .8125rem; }
    tr.row-link { cursor: pointer; }
    tr.row-link td:first-child a { text-decoration: none; }
    .run-meta { font-size: .75rem; }
    .stream-state {
      display: inline-flex;
      align-items: center;
      gap: .4em;
      font-size: .75rem;
      color: var(--muted);
    }
    .pager {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-top: var(--space);
      font-size: .875rem;
    }

    .crumbs { font-size: .8125rem; margin-bottom: .4rem; color: var(--muted); }
    .crumbs ol, .crumbs ul {
      display: flex;
      gap: .4rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--rule); }
    .crumbs a[aria-current="page"] { color: var(--muted); }

    .run-head {
      margin: 0 0 1rem;
      padding-bottom: .85rem;
      border-bottom: 1px solid var(--rule);
    }
    .run-head-title {
      display: flex;
      align-items: center;
      gap: .75rem;
      flex-wrap: wrap;
    }
    .run-head-title h2 { margin: 0; }
    .run-head-title .badge { font-size: .8125rem; }
    .run-head .subtitle { margin: .4rem 0 0; }
    .run-head .cancel { margin: .7rem 0 0; }
    .run-head .cancel button {
      margin: 0;
      padding: .25rem .7rem;
      background: transparent;
      color: var(--alarm);
      border-color: var(--alarm);
    }
    .run-error { margin: 0 0 1rem; font-size: .875rem; }

    .run-stack {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .steps-scroll {
      max-height: min(70vh, 40rem);
      overflow: auto;
      overscroll-behavior: contain;
      border: 1px solid var(--rule);
    }
    table.steps { table-layout: fixed; margin: 0; }
    table.steps td { vertical-align: top; }
    table.steps thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--void);
      box-shadow: inset 0 -1px var(--rule);
    }
    table.steps .step-label {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
    }
    tr.fan-out .step-label {
      padding-left: 1.15rem;
      font-weight: 400;
      position: relative;
    }
    tr.fan-out .step-label::before {
      content: "";
      position: absolute;
      left: .35rem;
      top: .55em;
      width: .5rem;
      border-top: 1px solid var(--rule);
    }
    .chip {
      display: inline-block;
      margin-left: .4rem;
      padding: .05rem .4rem;
      font-size: .6875rem;
      color: var(--muted);
      border: 1px solid var(--rule);
      white-space: nowrap;
    }
    .step-error { margin-top: .25rem; font-size: .8125rem; overflow-wrap: anywhere; }
    :where(.step-output, .run-io) { margin-bottom: 0; }
    :where(.step-output, .run-io) > summary {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      font-size: .75rem;
      color: var(--muted);
      cursor: pointer;
    }
    .step-output { display: inline-block; margin-left: .5rem; }
    .step-output pre { max-height: 18rem; margin-top: .35rem; }
    .run-io { margin-top: var(--space); }
    .run-io h3 { margin: .75rem 0 .35rem; font-size: .75rem; color: var(--muted); }
    .step-logs .log-scroll {
      max-height: 20rem;
      overflow-y: auto;
      display: flex;
      flex-direction: column-reverse;
      width: 100%;
      min-width: 0;
      /* Inset the tail. xterm fit() subtracts this from clientHeight; using
         the padding box as the row budget paints the last line across the clip. */
      padding: .35rem;
      box-sizing: border-box;
    }
    .step-logs pre {
      margin: 0;
      font-size: 0.8rem;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: none;
      overflow: visible;
      border: 0;
    }
    .log-term { min-height: 8rem; width: 100%; min-width: 0; padding: 0; overflow: hidden; }
    .log-scroll:has(.log-term) pre {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }
    .CodeMirror {
      height: auto;
      min-height: 22rem;
      background: var(--void);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 13px;
      border: 0;
    }
    .CodeMirror-gutters { background: var(--void); border-color: var(--rule); }
    .CodeMirror-cursor { border-color: var(--acid); }
    .log-notice, .log-error { font-size: 0.85rem; opacity: 0.7; }

    dialog {
      background: var(--raised);
      color: var(--ink);
      border: 1px solid var(--alarm);
      padding: 1.1rem 1.2rem;
    }
    dialog::backdrop { background: rgb(0 0 0 / .65); }
    dialog form { display: grid; gap: .75rem; margin: 0; }
    dialog form button { margin: 0; }

    .palette {
      position: fixed;
      inset: 12vh auto auto 50%;
      transform: translateX(-50%);
      width: min(36rem, calc(100vw - 2rem));
      z-index: 150;
      border: 1px solid var(--rule);
      background: var(--raised);
      padding: .75rem;
    }
    .palette input[type="search"] { width: 100%; margin: 0 0 .5rem; }
    .palette ul { list-style: none; margin: 0; padding: 0; }
    .palette li a {
      display: block;
      padding: .45rem .55rem;
      color: var(--ink);
      text-decoration: none;
    }
    .palette li a:hover, .palette li a:focus { background: var(--void); color: var(--acid); }
    .palette h3 { margin: 0 0 .6rem; }
    .palette dl { margin: 0 0 .75rem; }
    .palette dl div { display: flex; gap: 1rem; justify-content: space-between; padding: .2rem 0; }
    .palette dt { font-family: var(--mono); color: var(--acid); font-weight: 400; }
    .palette dd { margin: 0; color: var(--muted); }

    @media (prefers-reduced-motion: reduce) {
      .badge.is-live::before { animation: none; }
      * { animation: none !important; transition: none !important; }
    }