:root {
    --bg: #ffffff; --panel: #ffffff;
    --ink: #0a0a0a; --ink-2: #2a2a2a; --ink-3: #6b6b6b; --ink-4: #9a9a9a;
    --line: #ececec; --line-2: #f3f3f3; --hover: #f7f7f7; --chip: #f4f4f4;

    --logo-dark: #035657;
    --logo-light: #67A4A4;
    --teal-dark: #004D50;
    --teal: #006B6F;
    --teal-on-dark: #88DCE0;   /* accents/strokes/labels on dark; tertiary chart series */
    --teal-accent: #00989E;    /* DEPRECATED — use --teal (light) / --teal-on-dark (dark) */
    --teal-bright: #88DCE0;    /* repointed; was retired #00C4CC */
    --teal-light: #E8F4F5;
    --accent: var(--teal);

    --success: #00896A; --success-bg: #E6F2EE;
    --warn: #C48800;    --warn-bg: #FBF3DF;
    --danger: #D94A30;  --danger-bg: #FBEAE5;

    --header: var(--ink);
    --header-2: var(--logo-dark);
    --serif: 'Brut Grotesque', 'Geist', 'Inter', sans-serif;

    /* Canonical type scale — Perfect Fifth default, Perfect Fourth floor */
    --h1-size: 36px;   --h1-floor: 28px;
    --h2-size: 24px;   --h2-floor: 21px;
    --h3-size: 18px;
    --body-size: 16px;       /* never shrinks */
    --lede-size: 18px;       /* never shrinks */
    --eyebrow-size: 11px;    /* Plex Mono */
    --lh-header: 1.125;
    --lh-body:   1.200;
    --tracking:  0;
    --h1-max-width: 24em;
  }
  * { box-sizing: border-box; letter-spacing: var(--tracking); }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--body-size); line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased; }

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

  /* sidebar */
  .side { border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 18px 0 14px; gap: 6px; position: sticky; top: 0; height: 100vh; }
  .side .logo { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 14px; }
  .side .nav { display: flex; flex-direction: column; gap: 2px; align-items: center; }
  .side .nav a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--ink-3); text-decoration: none; transition: background .15s; }
  .side .nav a:hover { background: var(--hover); color: var(--ink); }
  .side .nav a.active { background: #0a0a0a; color: #fff; }
  .side .nav a svg { width: 18px; height: 18px; stroke-width: 1.6; }
  .side .footer { margin-top: auto; }
  .side .ws { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: #f0f0f0; color: var(--ink); font-weight: 600; font-size: var(--eyebrow-size); letter-spacing: 0; }

  /* topbar */
  .main { padding: 0 0 56px; }
  .topbar { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 28px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); z-index: 5; }
  .search { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; min-width: 280px; max-width: 520px; color: var(--ink-3); font-size: 13px; }
  .search svg { width: 14px; height: 14px; }
  .search input { border: 0; outline: 0; background: transparent; color: var(--ink); width: 100%; font: inherit; }
  .kbd { font: 500 10px 'IBM Plex Mono', monospace; color: var(--ink-3); border: 1px solid var(--line); padding: 2px 6px; border-radius: 4px; }
  .topbar .right { display: flex; align-items: center; gap: 10px; }
  .iconbtn { border: 1px solid var(--line); background: #fff; height: 36px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); cursor: pointer; font: 500 13px 'Inter', sans-serif; }
  .iconbtn:hover { background: var(--hover); }
  .iconbtn svg { width: 14px; height: 14px; }
  .iconbtn.icon-only { width: 36px; padding: 0; justify-content: center; }
  .iconbtn.icon-only svg { width: 16px; height: 16px; }
  .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--teal-light); border: 1px solid var(--line); }

  /* hero */
  .hero { padding: 36px 28px 18px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; container-type: inline-size; }
  .hero h1 {
    margin: 0; font-family: var(--serif); font-weight: 400;
    font-size: clamp(var(--h1-floor), 6.5cqw, var(--h1-size));
    line-height: var(--lh-header); letter-spacing: 0;
    color: var(--header); max-width: var(--h1-max-width);
  }
  .hero h1 .it { font-style: normal; color: var(--header-2); }
  .hero p { margin: calc(var(--lede-size) * 0.4) 0 0; color: var(--ink-3); font-size: var(--lede-size); line-height: var(--lh-body); }
  .hero .controls { display: flex; align-items: center; gap: 10px; }

  .live { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font: 500 12px 'Inter', sans-serif; color: var(--ink-2); background: #fff; }
  .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1f7a4d;  }

  .pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 500 13px/1 'Inter', sans-serif; color: var(--ink-2); cursor: pointer; }
  .pill svg { width: 14px; height: 14px; color: var(--ink-3); }
  .pill .caret { width: 10px; height: 10px; }

  .seg { display: inline-flex; gap: 6px; height: 36px; align-items: center; }
  .seg button { height: 36px; padding: 0 14px; background: #f4f4f4; border: 1px solid transparent; font: 500 13px 'Inter', sans-serif; color: var(--ink-3); border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
  .seg button:hover { background: #ececec; color: var(--ink-2); }
  .seg button.on { background: #fff; border-color: var(--line); color: var(--ink); }

  /* card grid */
  .grid { padding: 22px 28px 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .card { position: relative; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 20px 20px 18px; min-height: 168px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s; }
  .card:hover { border-color: #d6d6d6; }
  /* side accent bar disabled by default — enable via .card::before in components.md if needed */

  .card .label { display: flex; align-items: center; gap: 8px; justify-content: space-between; color: var(--ink-3); font-family: 'IBM Plex Mono', monospace; font-size: var(--eyebrow-size); line-height: var(--lh-body); letter-spacing: 0; text-transform: uppercase; padding-left: 10px; }
  .card .label .nm { display: inline-flex; align-items: center; gap: 8px; }
  .card .label .nm::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: #1f7a4d; }
  .card .label.warn .nm::before { background: #c89321; }
  .card .label.bad  .nm::before { background: #a02b1d; }
  .card .body { padding-left: 10px; flex: 1; container-type: inline-size; }
  .card .stat { font-family: var(--serif); font-weight: 400; font-size: clamp(var(--h1-floor), 6.5cqw, var(--h1-size)); line-height: var(--lh-header); letter-spacing: 0; color: var(--header); margin-top: 4px; }
  .card .stat .unit { font-family: 'Inter', sans-serif; font-size: var(--body-size); line-height: var(--lh-body); color: var(--ink-3); margin-left: 6px; font-weight: 500; }
  .card .footnote { padding-left: 10px; color: var(--ink-3); font-size: var(--body-size); line-height: var(--lh-body); margin-top: 6px; }
  .card .footnote.warn { color: #8a5a13; }
  .card .footnote.bad  { color: #8a2a1f; }
  .card .spark { position: absolute; right: 16px; top: 18px; width: 80px; height: 28px; }
  .card .spark svg { width: 100%; height: 100%; }
  .spark .up   { stroke: var(--logo-dark); }
  .spark .down { stroke: var(--logo-light); }
  .spark .flat { stroke: var(--teal); }

  /* span helpers */
  .span-2 { grid-column: span 2; }
  .span-4 { grid-column: span 4; }

  /* status list */
  .list { padding-left: 10px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .list .row { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
  .list .dot { width: 7px; height: 7px; border-radius: 50%; background: #1f7a4d; }
  .list .dot.amber { background: #c89321; }
  .list .dot.red   { background: #a02b1d; }
  .list .dot.gray  { background: #b8b8b8; }
  .list .name { color: var(--ink); }
  .list .tag { color: var(--ink-4); font-family: 'IBM Plex Mono', monospace; font-size: var(--eyebrow-size); line-height: var(--lh-body); letter-spacing: 0; }

  /* footlink */
  .card .footlink { color: var(--ink-3); font-size: var(--body-size); line-height: var(--lh-body); padding-left: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2); }
  .card .footlink a { color: var(--ink-2); text-decoration: none; }
  .card .footlink a:hover { color: var(--ink); text-decoration: underline; }

  /* chips */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 28px 6px; justify-content: center; }
  .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font: 500 13px 'Inter', sans-serif; color: var(--ink-2); background: #fff; cursor: pointer; }
  .chip:hover { background: var(--hover); }
  .chip svg { width: 14px; height: 14px; }

  /* prompt + composer */
  .prompt-wrap { padding: 12px 28px 0; max-width: 980px; margin: 0 auto; }
  .iwant { background: #f6f6f6; border-radius: 14px; padding: 6px 14px; }
  .iwant .row { padding: 10px 6px; border-bottom: 1px solid #ececec; color: var(--ink-3); font-size: var(--body-size); line-height: var(--lh-body); }
  .iwant .row:last-child { border-bottom: 0; }
  .iwant .row b { color: var(--ink); font-weight: 500; }
  .composer { margin: 14px auto 0; max-width: 980px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; }
  .composer input { width: 100%; border: 0; outline: 0; font: 500 16px 'Inter', sans-serif; color: var(--ink); background: transparent; }
  .composer input::placeholder { color: var(--ink-3); font-weight: 500; }
  .composer .row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
  .composer .tools { display: flex; gap: 6px; color: var(--ink-3); }
  .composer .tools button { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 0; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; }
  .composer .tools button:hover { background: var(--hover); color: var(--ink); }
  .composer .send { width: 32px; height: 32px; border-radius: 8px; background: #0a0a0a; color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; }

  /* tab switcher (only when more than one dashboard exists in the folder) */
  .switcher { position: fixed; top: 14px; right: 28px; z-index: 10; display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
  .switcher a { padding: 8px 14px; font: 500 12px 'Inter', sans-serif; color: var(--ink-3); text-decoration: none; }
  .switcher a.on { background: #0a0a0a; color: #fff; }

  @media (max-width: 1180px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    .span-2, .span-4 { grid-column: span 2; }
  }
  @media (max-width: 720px) {
    .grid { grid-template-columns: 1fr; }
    .span-2, .span-4 { grid-column: auto; }
    /* No font-size override — auto-shrink via clamp() handles the narrow case */
    .search { min-width: 0; }
  }

main{min-width:0}.content{padding:12px 28px}.workflow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.workflow-card{border:1px solid var(--line);border-radius:14px;padding:20px;background:white;text-align:left;cursor:pointer;color:var(--ink);font:inherit}.workflow-card:hover,.workflow-card.selected{border-color:var(--teal)}.workflow-card h2{font:400 21px var(--serif);margin:12px 0}.workflow-card p{color:var(--ink-3);line-height:1.5;font-size:14px}.eyebrow{font:11px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:1px;color:var(--teal)}.panel{border:1px solid var(--line);border-radius:14px;padding:24px;margin:20px 0}.panel h2{font:400 24px var(--serif);margin-top:0}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.muted{color:var(--ink-3);line-height:1.5}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.primary{background:var(--teal);color:white;border:0;border-radius:8px;padding:12px 18px}.secondary{background:white;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 16px}label{display:block;margin:14px 0 6px;font-size:14px}input,select,textarea{padding:11px;border:1px solid #c9d1d1;border-radius:8px;width:100%;background:white;color:var(--ink)}textarea{min-height:90px}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #67A4A4;outline-offset:3px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 'IBM Plex Mono',monospace;background:#f8fafa;padding:16px;border-radius:8px}.status{background:var(--teal-light);border-radius:8px;padding:12px;color:var(--teal-dark);line-height:1.5}#message{margin:0 28px;min-height:25px;line-height:1.5}#login{max-width:480px}#login .primary{margin-top:18px}#workspace[hidden],#login[hidden],[hidden]{display:none!important}.run{display:block;width:100%;margin-top:10px;text-align:left;line-height:1.5}.steps{line-height:1.8}.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}.composer-section{margin:28px}.composer-section h2{font:400 24px var(--serif)}.avatar{display:grid;place-items:center;color:var(--teal-dark);font-size:12px}.fact{font:12px 'IBM Plex Mono',monospace;color:var(--ink-3)}@media(max-width:1100px){.workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.workflow-grid,.split{grid-template-columns:1fr}.topbar{padding:12px;gap:8px}.search{min-width:100px}.content,.hero{padding:20px 16px}.hero{display:block}.topbar .right{gap:4px}.app{grid-template-columns:52px 1fr}.side{width:52px}.iconbtn{padding:0 8px}.hero h1{font-size:30px}}

.side .logo svg{width:32px;height:32px}.workflow-card{display:flex;flex-direction:column;align-items:stretch}.workflow-card .fact{margin-top:auto}.panel{scroll-margin-top:90px}

.application-tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}.application-tile .workflow-card{border:0;border-radius:0;flex:1}.application-tile .workflow-card.selected{background:var(--teal-light)}.full-app-link{display:block;padding:14px 20px;border-top:1px solid var(--line);font-size:14px;color:var(--teal);text-decoration:none}.full-app-link:hover{background:var(--teal-light)}.full-app-link small{display:block;margin-top:6px;color:var(--ink-3);font-size:12px}.topbar a.iconbtn{text-decoration:none}@media(max-width:760px){.topbar{grid-template-columns:1fr}.topbar .right{flex-wrap:wrap}}