/* Triptease design system tokens (@triptease/stylesheet), light theme only — the
     platform has no dark theme, so this page commits to light and paints every colour. */
  :root {
    --primary-100: #F3F0FA;
    --primary-200: #E8E3F6;
    --primary-300: #CFC6ED;
    --primary-400: #5E43C2;
    --primary-500: #4D35A1;

    --surface-100: #FFFFFF;
    --surface-200: #F9FAFB;
    --surface-300: #F1F2F4;
    --surface-400: #E8EAEC;

    --border-200: #E0E1E5;
    --border-300: #D7D9DD;
    --border-500: #B7BBC2;

    --text-500: #0D0C0D;
    --text-400: #3B353B;
    --text-300: #575157;
    --text-200: #77758A;
    --text-on-accent: #FFFFFF;

    --alert-subtle: #FFD8EB;
    --alert-strong: #D02521;
    --success-subtle: #DEF5D6;
    --success-strong: #227D02;
    --warning-subtle: #FFEDD6;
    --warning-strong: #AC5500;
    --info-subtle: #F0F8FF;
    --info-strong: #2475B9;

    --sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --serif: 'Noe Text', 'PT Serif', Georgia, serif;
    --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --s0-5: 0.25rem;
    --s1: 0.5rem;
    --s1-5: 0.75rem;
    --s2: 1rem;
    --s2-5: 1.25rem;
    --s3: 1.5rem;
    --s3-5: 2rem;
    --s4: 2.5rem;

    --radius: 6px;
    --radius-lg: 10px;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--surface-200);
    color: var(--text-500);
    font-family: var(--sans);
    font-size: 0.9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

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

  .topbar {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1-5) var(--s3);
    background: var(--surface-100);
    border-bottom: 1px solid var(--border-200);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .wordmark {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: var(--text-500);
  }

  .wordmark span { color: var(--primary-400); }

  .topbar-spacer { flex: 1; }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s0-5) var(--s1-5);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--primary-300);
    background: var(--primary-100);
    color: var(--primary-500);
    white-space: nowrap;
  }

  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-400); flex: none; }

  .who { font-size: 0.8125rem; color: var(--text-300); }

  /* ---------- layout ---------- */

  .page {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: var(--s3);
    align-items: start;
    padding: var(--s3);
    max-width: 1360px;
    margin: 0 auto;
  }

  @media (max-width: 900px) {
    .page { grid-template-columns: minmax(0, 1fr); padding: var(--s2); }
  }

  .panel {
    background: var(--surface-100);
    border: 1px solid var(--border-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .panel-head {
    display: flex;
    align-items: baseline;
    gap: var(--s1-5);
    padding: var(--s2) var(--s2-5);
    border-bottom: 1px solid var(--border-200);
    flex-wrap: wrap;
  }

  .panel-head h2 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text-500);
  }

  .panel-head .hint { font-size: 0.8125rem; color: var(--text-300); }

  .panel-body { padding: var(--s2-5); display: flex; flex-direction: column; gap: var(--s2-5); }

  /* ---------- form ---------- */

  .field { display: flex; flex-direction: column; gap: var(--s1); }

  .lbl {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-300);
    display: flex;
    align-items: baseline;
    gap: var(--s1);
  }

  .lbl .req {
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--primary-500);
    background: var(--primary-100);
    border-radius: 3px;
    padding: 0 5px;
    font-size: 0.625rem;
  }

  .rule {
    font-size: 0.8125rem;
    color: var(--text-300);
    line-height: 1.45;
    margin: 0;
  }

  input[type="text"], textarea, select {
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text-500);
    background: var(--surface-100);
    border: 1px solid var(--border-500);
    border-radius: var(--radius);
    padding: var(--s1) var(--s1-5);
    width: 100%;
    line-height: 1.5;
  }

  textarea { resize: vertical; min-height: 76px; }

  input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 1px;
  }

  select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--s4);
  }

  select.unset { color: var(--text-200); }

  .idline {
    display: flex;
    align-items: baseline;
    gap: var(--s1);
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--text-300);
    margin: 0;
  }

  .idline code {
    font-family: var(--mono);
    font-size: 0.8125rem;
    background: var(--surface-300);
    border: 1px solid var(--border-200);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--text-500);
  }

  /* ---------- actions ---------- */

  .actions {
    display: flex;
    align-items: center;
    gap: var(--s1-5);
    padding: var(--s2) var(--s2-5);
    border-top: 1px solid var(--border-200);
    background: var(--surface-200);
    flex-wrap: wrap;
  }

  .btn {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: var(--s1) var(--s2);
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.4;
  }

  .btn-primary { background: var(--primary-400); color: var(--text-on-accent); }
  .btn-primary:hover { background: var(--primary-500); }

  .btn-secondary { background: var(--surface-100); color: var(--text-500); border-color: var(--border-500); }
  .btn-secondary:hover { background: var(--surface-300); }

  .actions .note { font-size: 0.8125rem; color: var(--text-300); }

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

  .runs { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2-5); }

  .run {
    border: 1px solid var(--border-200);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-100);
  }

  .run-head {
    display: flex;
    align-items: center;
    gap: var(--s1-5);
    padding: var(--s1-5) var(--s2);
    background: var(--surface-200);
    border-bottom: 1px solid var(--border-200);
    flex-wrap: wrap;
    cursor: pointer;
  }

  .run.collapsed .run-head { border-bottom: 0; }
  .run.collapsed .run-body { display: none; }

  .verdict {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--s0-5) var(--s1-5);
    border-radius: 4px;
  }

  .verdict.pass { background: var(--success-subtle); color: var(--success-strong); }
  .verdict.fail { background: var(--alert-subtle); color: var(--alert-strong); }

  .run-meta { font-size: 0.8125rem; color: var(--text-300); display: flex; gap: var(--s1-5); flex-wrap: wrap; }
  .run-meta b { font-weight: 500; color: var(--text-400); font-variant-numeric: tabular-nums; }

  .cost {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: var(--s1);
    font-variant-numeric: tabular-nums;
  }

  .cost .total { font-size: 0.875rem; font-weight: 500; color: var(--text-500); }
  .cost .split { font-size: 0.75rem; color: var(--text-200); }

  .spend {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--text-300);
    font-variant-numeric: tabular-nums;
  }

  .spend b { font-weight: 500; color: var(--text-500); }

  .run-body { padding: var(--s2); display: flex; flex-direction: column; gap: var(--s2); }

  .reasoning {
    background: var(--primary-100);
    border-left: 3px solid var(--primary-400);
    padding: var(--s1-5) var(--s2);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.9375rem;
    color: var(--text-400);
  }

  .reasoning .src {
    display: block;
    margin-top: var(--s1);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-300);
  }

  .subhead {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-300);
    margin: 0 0 var(--s1);
  }

  .reply {
    font-size: 0.9375rem;
    color: var(--text-400);
    background: var(--surface-200);
    border: 1px solid var(--border-200);
    border-radius: var(--radius);
    padding: var(--s1-5) var(--s2);
    margin: 0;
  }

  .calls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

  .calls li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--s1-5);
    padding: var(--s1-5) 0;
    border-bottom: 1px solid var(--border-200);
  }

  .calls li:last-child { border-bottom: 0; }

  .step {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-200);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
  }

  .call-name {
    font-family: var(--mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-500);
    word-break: break-word;
  }

  .tag {
    display: inline-block;
    margin-left: var(--s1);
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: 1px;
  }

  .tag.sandbox { background: var(--info-subtle); color: var(--info-strong); }
  .tag.paused { background: var(--warning-subtle); color: var(--warning-strong); }

  .io { margin-top: var(--s1); display: flex; flex-direction: column; gap: var(--s0-5); }

  .io div {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--text-300);
    background: var(--surface-300);
    border-radius: 4px;
    padding: var(--s1) var(--s1-5);
    overflow-x: auto;
    white-space: pre;
  }

  .io div b { color: var(--text-400); font-weight: 500; }

  .banner {
    padding: var(--s1-5) var(--s2);
    border-radius: var(--radius);
    font-size: 0.875rem;
    background: var(--warning-subtle);
    color: var(--text-400);
  }

  .banner strong { color: var(--warning-strong); }
  .banner code { font-family: var(--mono); font-size: 0.8125rem; }

  .foot {
    padding: var(--s2) var(--s3) var(--s4);
    max-width: 1360px;
    margin: 0 auto;
    font-size: 0.8125rem;
    color: var(--text-300);
  }

  .foot code { font-family: var(--mono); font-size: 0.8125rem; }

  /* ---------- states this page has and the mock did not ---------- */

  .plain { font-weight: 400; text-transform: none; letter-spacing: 0; }

  .empty { padding: var(--s3-5) var(--s2-5); text-align: center; color: var(--text-300); font-size: 0.875rem; margin: 0; }

  tt-combobox { display: block; width: 100%; }

  .btn[aria-busy='true'] { opacity: 0.7; cursor: progress; }

  .note.blocked { color: var(--alert-strong); }

  .failed {
    padding: var(--s1-5) var(--s2);
    border-radius: var(--radius);
    background: var(--alert-subtle);
    color: var(--text-400);
    font-size: 0.875rem;
  }

  .failed strong { color: var(--alert-strong); }

  .saved {
    padding: var(--s1-5) var(--s2);
    border-radius: var(--radius);
    background: var(--success-subtle);
    color: var(--text-400);
    font-size: 0.875rem;
  }

  #user-button { display: flex; align-items: center; }