/* ============================ TOKENS ============================ */
  :root{
    --paper:#EDEEE7;
    --paper-raised:#F9F9F5;
    --paper-sunken:#E2E4DA;
    --ink:#1B211E;
    --ink-soft:#5B655D;
    --ink-faint:#8D9489;
    --line:#CBCEC1;
    --accent:#A8431A;
    --accent-ink:#FBF3EC;

    --good:#3F7A4E;
    --warn:#A9791E;
    --bad:#AE3B34;

    --claude:#C7623F;
    --codex:#3C8B6B;
    --kimi:#3B6FB0;
    --grok:#6E6E6E;
    --gemini:#8767C8;

    /* business hues — validated categorical set (light mode) */
    --biz-alsarawe:#A8632B;
    --biz-fixpresso:#2F6FD0;
    --biz-sail:#1F8A6D;
    --biz-personal:#7C837A;   /* not a business: neutral, always textured + labelled */
    /* the other real projects (task 1.1/1.7); contrast >= 3:1 against paper and paper-raised checked */
    --biz-mi:#7C837A; --biz-vistaroom:#8B4FA8; --biz-click-it:#B5487A; --biz-julanar:#7A6A1F; --biz-fund:#4A5FA8; --biz-hq:#56606A;

    --font-display:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
    --font-ui:'Archivo','Helvetica Neue',Arial,sans-serif;
    --font-serif:'Source Serif 4','Iowan Old Style',Georgia,serif;
    --font-mono:'JetBrains Mono','SF Mono',Consolas,monospace;

    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#15191A; --paper-raised:#1D2223; --paper-sunken:#101414;
      --ink:#E9E7DF; --ink-soft:#9EA69C; --ink-faint:#6C736A; --line:#2C332F;
      --accent:#E2703D; --accent-ink:#1D2223;
      --good:#5FAE72; --warn:#CBA23F; --bad:#D06A62;
      --biz-alsarawe:#C07C3A; --biz-fixpresso:#4C86E0; --biz-sail:#2FA083; --biz-personal:#8B928A;
      --biz-mi:#8B928A; --biz-vistaroom:#A774C4; --biz-click-it:#CF6E9A; --biz-julanar:#A8963F; --biz-fund:#7486CF; --biz-hq:#8E98A2;
    }
  }
  :root[data-theme="dark"]{
    --paper:#15191A; --paper-raised:#1D2223; --paper-sunken:#101414;
    --ink:#E9E7DF; --ink-soft:#9EA69C; --ink-faint:#6C736A; --line:#2C332F;
    --accent:#E2703D; --accent-ink:#1D2223;
    --good:#5FAE72; --warn:#CBA23F; --bad:#D06A62;
    --biz-alsarawe:#C07C3A; --biz-fixpresso:#4C86E0; --biz-sail:#2FA083; --biz-personal:#8B928A;
    --biz-mi:#8B928A; --biz-vistaroom:#A774C4; --biz-click-it:#CF6E9A; --biz-julanar:#A8963F; --biz-fund:#7486CF; --biz-hq:#8E98A2;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--font-ui); -webkit-font-smoothing:antialiased; overflow:hidden;
  }
  button,input,textarea,select{ font-family:inherit; color:inherit; }
  button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px;
  }
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  h2,h3{ margin:0; }

  /* ============================ SHELL ============================ */
  .app{
    height:100vh; display:grid;
    grid-template-columns:78px 1fr; grid-template-rows:56px 1fr;
    grid-template-areas:"rail topbar" "rail main";
  }
  .topbar{
    grid-area:topbar; display:flex; align-items:center; justify-content:space-between;
    padding:0 18px; border-bottom:1px solid var(--line); background:var(--paper); gap:12px;
  }
  .topbar-left{ display:flex; align-items:center; gap:14px; min-width:0; }
  .brand{
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    font-size:19px; letter-spacing:0.02em; display:flex; align-items:center; gap:9px;
  }
  .brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
  .biz-switch{
    font-family:var(--font-mono); font-size:12px; background:var(--paper-raised);
    border:1px solid var(--line); border-radius:20px; padding:6px 12px;
    display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--ink); white-space:nowrap;
  }
  .preview-badge{
    font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--accent); border:1px solid var(--accent); border-radius:20px; padding:3px 9px; white-space:nowrap;
  }
  .health{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }
  .health .dots{ display:flex; gap:4px; }
  .health .hd{ width:7px; height:7px; border-radius:50%; }

  nav.rail{
    grid-area:rail; border-right:1px solid var(--line); background:var(--paper);
    display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:2px; overflow-y:auto;
  }
  .navbtn{
    width:60px; display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:8px 0 7px; border-radius:10px; border:none; background:none; color:var(--ink-faint); cursor:pointer;
  }
  .navbtn svg{ width:21px; height:21px; }
  .navbtn .lbl{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.03em; }
  .navbtn:hover{ color:var(--ink-soft); background:var(--paper-raised); }
  .navbtn.active{ color:var(--accent); background:var(--paper-raised); }

  main.main{ grid-area:main; min-width:0; min-height:0; position:relative; overflow:hidden; }
  .screen{ position:absolute; inset:0; display:none; }
  .screen.active{ display:flex; }
  .pad{ padding:22px 26px; overflow-y:auto; flex-direction:column; gap:18px; }
  .screen-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .screen-title{ font-family:var(--font-display); text-transform:uppercase; font-size:24px; letter-spacing:0.01em; }
  .screen-sub{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }

  /* shared bits */
  .seg-tabs{ display:inline-flex; gap:4px; background:var(--paper-sunken); padding:4px; border-radius:10px; }
  .seg-tabs button{
    border:none; background:none; padding:6px 13px; border-radius:7px; font-size:11.5px; font-weight:600;
    font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); cursor:pointer;
  }
  .seg-tabs button.active{ background:var(--paper-raised); color:var(--ink); }
  .sub{ display:none; }
  .sub.active{ display:flex; flex-direction:column; gap:16px; }
  .chip{
    font-family:var(--font-mono); font-size:10.5px; border:1px solid var(--line); border-radius:20px;
    padding:4px 10px; background:none; color:var(--ink-soft); cursor:pointer; white-space:nowrap;
  }
  .chip:hover{ border-color:var(--ink-faint); color:var(--ink); }
  .chip.on{ background:var(--paper-sunken); color:var(--ink); border-color:var(--paper-sunken); }
  .btn-ghost{
    border:1px solid var(--line); background:var(--paper-raised); border-radius:20px; padding:6px 12px;
    font-size:12px; font-family:var(--font-mono); cursor:pointer; color:var(--ink-soft); flex-shrink:0;
  }
  .btn-ghost:hover{ color:var(--ink); }
  .btn-solid{
    border:none; background:var(--accent); color:var(--accent-ink); border-radius:9px;
    padding:9px 16px; font-weight:600; font-size:13px; cursor:pointer;
  }
  .card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:11px; padding:16px 18px; }
  .biz-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; flex-shrink:0; }
  .avatar{
    width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:11px; font-weight:700; color:#fff; flex-shrink:0;
  }
  .tag-mono{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); }
  .status-chip{
    display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10.5px;
    border-radius:6px; padding:3px 8px; white-space:nowrap;
  }
  .status-good{ background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good); }
  .status-warn{ background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn); }
  .status-bad{ background:color-mix(in srgb, var(--bad) 16%, transparent); color:var(--bad); }

  /* ============================ CHAT ============================ */
  .chat-list{ width:246px; border-right:1px solid var(--line); padding:14px 10px; overflow-y:auto; flex-shrink:0; }
  .chat-list h2{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px 8px; font-weight:600; }
  .group-head{
    width:100%; display:flex; align-items:center; gap:7px; padding:8px; border:none; background:none;
    cursor:pointer; font-weight:700; font-size:12.5px; border-radius:8px; color:var(--ink);
  }
  .group-head:hover{ background:var(--paper-raised); }
  .group-head .chev{ margin-left:auto; transition:transform .15s ease; color:var(--ink-faint); }
  .group-head.open .chev{ transform:rotate(180deg); }
  .group-body{ padding-left:2px; margin:2px 0 8px; display:flex; flex-direction:column; gap:2px; }
  .group-body.collapsed{ display:none; }
  .group-tabs{ display:flex; gap:4px; margin:2px 0 6px 20px; }
  .group-tabs button{
    font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.03em;
    border:1px solid var(--line); background:none; border-radius:12px; padding:3px 8px; cursor:pointer; color:var(--ink-faint);
  }
  .group-tabs button.active{ background:var(--paper-sunken); color:var(--ink); border-color:var(--paper-sunken); }
  .thread-item{ margin-left:20px; padding:7px 9px; border-radius:8px; cursor:pointer; }
  .thread-item.active{ background:var(--paper-raised); }
  .thread-item .t{ font-size:12.5px; font-weight:600; margin-bottom:2px; line-height:1.3; }
  .thread-item .p{ font-size:10.5px; color:var(--ink-faint); display:flex; align-items:center; gap:5px; }

  .chat-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .chat-head{ padding:14px 22px; border-bottom:1px solid var(--line); }
  .chat-head .title{ font-size:15.5px; font-weight:700; }
  .chat-head .meta{ font-size:12px; color:var(--ink-faint); margin-top:3px; font-family:var(--font-mono); }
  .pipeline-bar{ display:flex; align-items:center; gap:7px; margin-top:11px; flex-wrap:wrap; }
  .pipeline-step{
    display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:20px;
    padding:5px 11px 5px 9px; font-family:var(--font-mono); font-size:11px; cursor:pointer; background:var(--paper-raised); color:var(--ink);
  }
  .pipeline-step:hover{ border-color:var(--ink-faint); }
  .pipeline-step .pdot{ width:8px; height:8px; border-radius:50%; }
  .pipeline-step .ptask{ color:var(--ink-faint); }
  .pipeline-arrow{ color:var(--ink-faint); font-size:12px; }

  .chat-body{ flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:14px; }
  .msg{ display:flex; gap:9px; max-width:600px; }
  .msg.user{ align-self:flex-end; flex-direction:row-reverse; max-width:500px; }
  .bubble{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
    padding:10px 13px; font-size:14px; line-height:1.55; position:relative;
  }
  .msg.user .bubble{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); border-bottom-right-radius:4px; }
  .msg:not(.user) .bubble{ border-bottom-left-radius:4px; }
  .bubble .who{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:4px; display:block; }
  .bubble code{ display:block; background:var(--paper-sunken); border-radius:6px; padding:8px 10px; font-family:var(--font-mono); font-size:11.5px; margin-top:8px; white-space:pre-wrap; color:var(--ink); }
  .bubble img.attached{ max-width:200px; border-radius:8px; display:block; margin-top:8px; }
  .edit-btn{
    background:none; border:none; color:inherit; opacity:0.55; cursor:pointer; font-size:10.5px;
    font-family:var(--font-mono); padding:4px 0 0; text-decoration:underline;
  }
  .edit-btn:hover{ opacity:1; }
  .edit-box{ width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13.5px; background:var(--paper); color:var(--ink); resize:vertical; min-height:60px; }
  .fork-chip{ align-self:center; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); border:1px dashed var(--line); border-radius:20px; padding:3px 10px; }
  .msg-system{ align-self:center; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); padding:2px 0; }
  .bubble-image{ width:190px; height:190px; border-radius:8px; margin-top:8px; display:flex; align-items:flex-end; padding:8px; }
  .bubble-image .ph-label{ font-family:var(--font-mono); font-size:9px; color:rgba(255,255,255,0.9); background:rgba(0,0,0,0.4); padding:2px 6px; border-radius:4px; }
  .typing{ display:flex; gap:4px; padding:4px 0; }
  .typing span{ width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:blink 1.2s infinite; }
  .typing span:nth-child(2){ animation-delay:.2s; }
  .typing span:nth-child(3){ animation-delay:.4s; }
  @keyframes blink{ 0%,80%,100%{ opacity:0.25; } 40%{ opacity:0.9; } }

  /* compare block */
  .compare{ border:1px dashed var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; }
  .compare-head{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .compare-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
  .compare-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; display:flex; flex-direction:column; overflow:hidden; }
  .cc-head{ display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--line); }
  .cc-head .name{ font-weight:700; font-size:12.5px; }
  .cc-body{ padding:11px; font-size:13px; line-height:1.55; display:flex; flex-direction:column; gap:8px; }
  .cc-body .reply{ background:var(--paper-sunken); border-radius:8px; padding:8px 10px; font-size:12.5px; }
  .cc-actions{ display:flex; gap:5px; padding:0 11px 9px; flex-wrap:wrap; }
  .cc-reply-row{ display:flex; gap:5px; padding:9px 11px; border-top:1px solid var(--line); }
  .cc-reply-row input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:8px; padding:7px 9px; font-size:12.5px; background:var(--paper); color:var(--ink); }
  .cc-reply-row button{ border:none; border-radius:8px; padding:7px 11px; font-size:12px; font-weight:600; cursor:pointer; background:var(--ink); color:var(--paper); }

  .composer{ border-top:1px solid var(--line); padding:12px 22px 16px; position:relative; }
  .agent-switch{
    display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px;
    border:1px solid var(--line); border-radius:20px; padding:5px 11px 5px 8px; margin-bottom:9px; cursor:pointer; background:var(--paper-raised);
  }
  .agent-switch .dot{ width:8px; height:8px; border-radius:50%; }
  .attach-preview{ display:flex; gap:8px; margin-bottom:9px; }
  .attach-chip{ position:relative; width:50px; height:50px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
  .attach-chip img{ width:100%; height:100%; object-fit:cover; display:block; }
  .attach-chip button{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:var(--bad); color:#fff; border:none; font-size:11px; line-height:1; cursor:pointer; padding:0; }
  .composer-row{ display:flex; gap:9px; align-items:flex-end; }
  .attach-btn{
    width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--paper-raised);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); flex-shrink:0;
  }
  .attach-btn svg{ width:18px; height:18px; }
  .composer-row textarea{
    flex:1; resize:none; border:1px solid var(--line); border-radius:12px; padding:11px 13px; font-size:14px;
    background:var(--paper-raised); color:var(--ink); min-height:42px; max-height:120px; line-height:1.4;
  }
  .send-btn{ border:none; border-radius:10px; padding:11px 17px; font-weight:600; font-size:13px; cursor:pointer; background:var(--accent); color:var(--accent-ink); flex-shrink:0; }
  .send-btn.stopping{ background:var(--bad); color:#fff; }
  .palette{
    position:absolute; bottom:calc(100% - 6px); left:22px; right:22px; max-width:440px;
    background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 14px 34px -16px rgba(0,0,0,0.35); padding:6px; display:none; z-index:20;
  }
  .palette.show{ display:block; }
  .pal-item{ display:flex; gap:10px; align-items:baseline; padding:9px 11px; border-radius:8px; cursor:pointer; }
  .pal-item:hover, .pal-item.sel{ background:var(--paper-sunken); }
  .pal-item .cmd{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--accent); width:82px; flex-shrink:0; }
  .pal-item .desc{ font-size:12.5px; color:var(--ink-soft); }

  /* ============================ INBOX ============================ */
  .filter-row{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .stack{ position:relative; width:400px; max-width:100%; height:430px; margin:0 auto; }
  .icard{
    position:absolute; inset:0; background:var(--paper-raised); border:1px solid var(--line);
    border-radius:14px; padding:18px 20px; display:flex; flex-direction:column;
    transition:transform .25s ease, opacity .25s ease; overflow-y:auto;
  }
  .icard[data-depth="0"]{ z-index:3; box-shadow:0 14px 34px -14px rgba(0,0,0,0.28); }
  .icard[data-depth="1"]{ transform:translateY(9px) scale(0.975); z-index:2; opacity:0.8; }
  .icard[data-depth="2"]{ transform:translateY(18px) scale(0.95); z-index:1; opacity:0.55; }
  .icard[data-depth="3"]{ transform:translateY(26px) scale(0.93); z-index:0; opacity:0.3; }
  .icard.gone{ opacity:0; transform:translateX(130%) rotate(7deg); }
  .icard.gone.left{ transform:translateX(-130%) rotate(-7deg); }
  .icard-tags{ display:flex; gap:6px; margin-bottom:9px; flex-wrap:wrap; align-items:center; }
  .kind-tag{ font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.07em; padding:3px 8px; border-radius:5px; background:var(--paper-sunken); color:var(--ink-soft); }
  .icard h3{ font-size:16px; margin:0 0 10px; font-weight:700; }
  .icard .why{ font-size:13px; color:var(--ink-soft); line-height:1.55; }
  .icard-actions{ display:flex; gap:8px; margin-top:14px; }
  .icard-actions button{ flex:1; border-radius:9px; padding:9px 0; font-weight:600; font-size:13px; cursor:pointer; border:1px solid var(--line); background:var(--paper); }
  .icard-actions .approve{ background:var(--good); border-color:var(--good); color:#fff; }
  .icard-actions .edit{ color:var(--accent); border-color:var(--accent); }
  .icard-actions .reject{ color:var(--bad); }
  .diff{ font-family:var(--font-mono); font-size:12px; display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
  .diff .before{ color:var(--bad); text-decoration:line-through; opacity:0.75; }
  .diff .after{ color:var(--good); }
  .edit-area{ display:none; flex-direction:column; gap:8px; margin-top:10px; }
  .edit-area.show{ display:flex; }
  .edit-area textarea{ width:100%; border:1px solid var(--accent); border-radius:8px; padding:9px 11px; font-size:13px; background:var(--paper); color:var(--ink); resize:vertical; min-height:74px; }
  .reason-area{ display:none; margin-top:10px; }
  .reason-area.show{ display:block; }
  .reason-area textarea{ width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:12.5px; background:var(--paper); color:var(--ink); resize:vertical; min-height:56px; }
  .post-mock{ border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:10px; }
  .post-head{ display:flex; align-items:center; gap:8px; padding:9px 11px; }
  .post-head .p-name{ font-size:12px; font-weight:700; flex:1; }
  .post-image{ height:132px; margin:0 11px; border-radius:8px; display:flex; align-items:flex-end; padding:8px; }
  .post-image .ph-label{ font-family:var(--font-mono); font-size:9px; color:rgba(255,255,255,0.9); background:rgba(0,0,0,0.4); padding:2px 6px; border-radius:4px; }
  .post-caption{ padding:9px 11px; font-size:12.5px; line-height:1.5; }
  .post-caption .htag{ color:var(--accent); }
  .inbox-list{ display:flex; flex-direction:column; }
  .list-row{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line); }
  .list-row .lr-title{ flex:1; font-size:13.5px; font-weight:600; min-width:0; }
  .list-row .lr-sub{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); margin-top:2px; font-weight:400; }
  .list-row.done{ opacity:0.45; }

  /* ============================ ROUTINES ============================ */
  .routine-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:11px; overflow:hidden; }
  .routine-top{ display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; }
  .routine-top .rt-name{ font-size:13.5px; font-weight:600; flex:1; min-width:0; display:flex; align-items:center; }
  .routine-top .rt-when{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); }
  .routine-detail{ display:none; padding:0 16px 16px; border-top:1px solid var(--line); flex-direction:column; gap:14px; }
  .routine-detail.show{ display:flex; }
  .detail-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:14px; }
  .detail-block .dlabel{ font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint); margin-bottom:6px; }
  .detail-block .dval{ font-size:13px; line-height:1.5; }
  .reads-chips{ display:flex; gap:5px; flex-wrap:wrap; }
  .taste{ font-family:var(--font-serif); font-size:13.5px; line-height:1.55; background:var(--paper-sunken); border-radius:8px; padding:11px 13px; }
  .runbar{ display:flex; gap:3px; align-items:flex-end; height:34px; }
  .runbar i{ width:9px; border-radius:2px 2px 0 0; background:var(--good); display:block; }
  .runbar i.miss{ background:var(--line); }

  /* ============================ WIKI ============================ */
  .wiki{ display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; min-height:520px; }
  .wiki-tree{ width:240px; flex-shrink:0; border-right:1px solid var(--line); background:var(--paper-raised); padding:10px; overflow-y:auto; }
  .tree-label{ font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); margin:10px 0 5px 8px; }
  .tree-label:first-child{ margin-top:2px; }
  .tree-item{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; cursor:pointer; font-size:13px; }
  .tree-item:hover{ background:var(--paper-sunken); }
  .tree-item.active{ background:var(--paper-sunken); font-weight:600; }
  .wiki-body{ flex:1; padding:18px 22px; overflow-y:auto; min-width:0; }
  .profile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-top:14px; }
  .pf-label{ font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint); margin-bottom:5px; }
  .pf-val{ font-size:13px; line-height:1.55; }
  .logo-box{ width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; font-weight:700; color:#fff; }
  .swatches{ display:flex; gap:6px; }
  .swatches span{ width:22px; height:22px; border-radius:5px; border:1px solid var(--line); }
  .dodont{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; }
  .dodont .do::before{ content:'✓ '; color:var(--good); }
  .dodont .dont::before{ content:'✕ '; color:var(--bad); }
  .file-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
  .edge-note{ font-size:12px; color:var(--ink-soft); font-style:italic; }

  .graph-wrap{ position:relative; }
  .graph-canvas{ width:100%; height:auto; display:block; background:var(--paper-sunken); border-radius:10px; touch-action:none; }
  .gnode{ cursor:pointer; }
  .gnode text{ font-family:var(--font-mono); font-size:10.5px; fill:var(--ink); pointer-events:none; }
  .gedge{ cursor:pointer; }
  .graph-sheet{
    position:absolute; left:50%; transform:translateX(-50%); bottom:14px; width:min(400px,92%);
    background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
    box-shadow:0 16px 40px -18px rgba(0,0,0,0.4); display:none; z-index:10;
  }
  .graph-sheet.show{ display:block; }
  .graph-sheet h4{ margin:0 0 8px; font-size:13.5px; }
  .type-picker{ display:flex; gap:6px; margin-bottom:10px; }
  .type-picker button{ flex:1; border:1px solid var(--line); background:var(--paper); border-radius:8px; padding:8px; font-size:11.5px; font-family:var(--font-mono); cursor:pointer; color:var(--ink-soft); }
  .type-picker button.on{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
  .graph-sheet textarea{ width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12.5px; background:var(--paper); color:var(--ink); resize:vertical; min-height:56px; }
  .sheet-actions{ display:flex; gap:8px; margin-top:10px; }
  .graph-hint{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
  .graph-legend{ display:flex; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); align-items:center; }

  /* ============================ CLEARANCE ============================ */
  .layer-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
  .layer-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:11px; padding:16px 18px; border-left:4px solid var(--accent); }
  .layer-card .lnum{ font-family:var(--font-display); font-size:30px; line-height:1; color:var(--accent); }
  .layer-card h3{ font-size:15px; margin:6px 0 8px; }
  .layer-card .ltpl{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; }
  .layer-card .lcount{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-top:10px; }
  .grid-wrap{ overflow-x:auto; }
  table.matrix{ border-collapse:collapse; font-size:13px; min-width:520px; width:100%; }
  table.matrix th{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); padding:0 8px 10px; text-align:center; font-weight:600; }
  table.matrix th:first-child{ text-align:left; }
  table.matrix td{ padding:9px 8px; border-top:1px solid var(--line); text-align:center; }
  table.matrix td:first-child{ text-align:left; }
  .layer-pill{
    min-width:64px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; cursor:pointer;
    font-family:var(--font-mono); font-size:11px; background:var(--paper-raised); color:var(--ink-faint);
  }
  .layer-pill[data-layer="1"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .layer-pill[data-layer="2"]{ background:color-mix(in srgb, var(--accent) 32%, transparent); border-color:transparent; color:var(--ink); }
  .layer-pill[data-layer="3"]{ background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:transparent; color:var(--ink-soft); }

  /* ============================ BUDGET ============================ */
  .stat-tile{ background:var(--paper-raised); border:1px solid var(--line); border-radius:11px; padding:18px 20px; }
  .stat-num{ font-family:var(--font-display); font-size:44px; line-height:1; letter-spacing:0.01em; }
  .stat-label{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint); margin-bottom:8px; }
  .stat-note{ font-size:12.5px; color:var(--ink-soft); margin-top:8px; line-height:1.5; }
  .meter-row{ display:grid; grid-template-columns:158px 1fr auto; gap:14px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }
  .meter-row:first-of-type{ border-top:none; }
  .meter-meta{ line-height:1.5; }
  .meter-name{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
  .meter-track{ height:9px; background:var(--paper-sunken); border-radius:5px; overflow:hidden; position:relative; }
  .meter-fill{ height:100%; border-radius:5px; background:var(--ink-soft); }
  .meter-fill.warn{ background:var(--warn); }
  .meter-fill.bad{ background:var(--bad); }
  .meter-meta{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .bar-row{ display:grid; grid-template-columns:104px 1fr 52px; gap:12px; align-items:center; padding:7px 0; }
  .bar-label{ font-size:12.5px; display:flex; align-items:center; }
  .bar-track{ height:11px; background:var(--paper-sunken); border-radius:3px; overflow:hidden; }
  .bar-fill{ height:100%; border-radius:0 3px 3px 0; }
  .bar-val{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); text-align:right; font-variant-numeric:tabular-nums; }
  .two-col{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; align-items:start; }
  .forecast-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
  .forecast-row:first-of-type{ border-top:none; }

  /* ============================ LIBRARY / SYSTEM ============================ */
  .cmd-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
  .cmd-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:11px; padding:15px 17px; }
  .cmd-name{ font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--accent); margin-bottom:7px; }
  .cmd-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:9px; }
  .cmd-ex{ font-family:var(--font-mono); font-size:11px; background:var(--paper-sunken); border-radius:6px; padding:7px 9px; color:var(--ink-soft); }
  .cmd-meta{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); margin-top:9px; }
  .skill-group{ margin-bottom:6px; }
  .skill-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
  .skill-row .sk-name{ font-size:13px; font-weight:600; flex:1; min-width:130px; }
  .sys-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
  .sys-row:first-of-type{ border-top:none; }
  .sys-row .sr-name{ font-size:13px; font-weight:600; width:150px; }
  .sys-row .sr-meta{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); flex:1; min-width:140px; }

  /* ============================ PROFILE TEMPLATE IN CHAT ============================ */
  .profile-form{
    background:var(--paper-raised); border:1px solid var(--accent); border-radius:12px;
    padding:15px 17px; align-self:flex-start; width:100%; max-width:580px;
  }
  .profile-form .pf-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px; flex-wrap:wrap; }
  .profile-form h4{ margin:0; font-size:14.5px; }
  .pf-intro{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:12px; }
  .pf-progress-track{ height:5px; background:var(--paper-sunken); border-radius:3px; overflow:hidden; margin-bottom:14px; }
  .pf-progress-fill{ height:100%; background:var(--accent); border-radius:3px; transition:width .2s ease; }
  .pff{ margin-bottom:10px; }
  .pff label{ display:block; font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:4px; }
  .pff input{ width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; background:var(--paper); color:var(--ink); }
  .pff input.filled{ border-color:var(--good); }
  .pff .hint{ font-size:11.5px; color:var(--ink-faint); margin-top:3px; }

  /* ============================ TASK PLAN ============================ */
  .plan-step{ display:grid; grid-template-columns:26px 1fr auto; gap:11px; align-items:center; padding:13px 0; border-top:1px solid var(--line); }
  .plan-step .step-n{ font-family:var(--font-mono); font-size:12px; color:var(--accent); font-weight:600; }
  .plan-step .step-task{ font-size:13.5px; font-weight:600; }
  .plan-step .step-sub{ font-size:12px; color:var(--ink-soft); margin-top:3px; line-height:1.45; }
  .agent-pick{
    display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:20px;
    padding:5px 11px 5px 8px; font-family:var(--font-mono); font-size:11px; cursor:pointer; background:var(--paper-raised); color:var(--ink);
  }
  .agent-pick .pdot{ width:8px; height:8px; border-radius:50%; }
  .rounds{ display:flex; align-items:center; gap:7px; margin-top:8px; }
  .rounds button{
    width:25px; height:25px; border-radius:6px; border:1px solid var(--line); background:var(--paper);
    cursor:pointer; font-size:14px; line-height:1; padding:0; color:var(--ink-soft);
  }
  .rounds .rv{ font-family:var(--font-mono); font-size:12px; min-width:74px; text-align:center; font-variant-numeric:tabular-nums; }
  .step-del{ border:none; background:none; color:var(--ink-faint); cursor:pointer; font-size:15px; padding:2px 4px; line-height:1; }
  .step-del:hover{ color:var(--bad); }

  .run-card{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
    padding:14px 16px; align-self:flex-start; width:100%; max-width:580px;
  }
  .run-card h4{ margin:0 0 3px; font-size:14px; }
  .run-step{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--line); }
  .run-step:first-of-type{ border-top:none; }
  .run-dot{ width:9px; height:9px; border-radius:50%; background:var(--line); margin-top:5px; flex-shrink:0; }
  .run-dot.doing{ background:var(--warn); }
  .run-dot.done{ background:var(--good); }
  .run-body{ flex:1; min-width:0; }
  .run-title{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .run-log{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); line-height:1.6; margin-top:4px; }
  .run-log div{ padding:1px 0; }

  /* ============================ NEW BUSINESS MODAL ============================ */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,0.42); display:none;
    align-items:center; justify-content:center; z-index:100; padding:20px;
  }
  .modal-backdrop.show{ display:flex; }
  .modal{
    background:var(--paper); border:1px solid var(--line); border-radius:14px;
    width:min(560px,100%); max-height:86vh; overflow-y:auto; padding:22px 24px;
    box-shadow:0 24px 60px -24px rgba(0,0,0,0.5);
  }
  .modal h3{ font-family:var(--font-display); text-transform:uppercase; font-size:20px; letter-spacing:0.01em; }
  .modal .modal-sub{ font-size:13px; color:var(--ink-soft); margin:6px 0 18px; line-height:1.5; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint); margin-bottom:6px; }
  .field input{
    width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px;
    font-size:13.5px; background:var(--paper-raised); color:var(--ink);
  }
  .color-picker{ display:flex; gap:8px; }
  .color-picker button{ width:30px; height:30px; border-radius:8px; border:2px solid transparent; cursor:pointer; padding:0; }
  .color-picker button.on{ border-color:var(--ink); }
  .kit-head{
    font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--ink-faint); margin:20px 0 4px; display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  }
  .kit-row{ display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line); }
  .kit-row .tick{
    width:19px; height:19px; border-radius:5px; border:1.5px solid var(--line); background:var(--paper-raised);
    flex-shrink:0; cursor:pointer; margin-top:2px; display:flex; align-items:center; justify-content:center;
    font-size:12px; color:transparent; padding:0; line-height:1;
  }
  .kit-row .tick.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .kit-row .tick.locked{ background:var(--ink-faint); border-color:var(--ink-faint); color:var(--paper); cursor:not-allowed; }
  .kit-row .kit-body{ flex:1; min-width:0; }
  .kit-row .kit-name{ font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .kit-row .kit-reason{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin-top:3px; }
  .kit-row.off{ opacity:0.5; }
  .modal-actions{ display:flex; gap:9px; justify-content:flex-end; margin-top:20px; }
  .tree-new{ color:var(--accent); font-weight:600; }

  /* ============================ BUDGET EXTRAS ============================ */
  .kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
  .sub-row{ display:grid; grid-template-columns:120px 1fr 92px 96px auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line); }
  .sub-row:first-of-type{ border-top:none; }
  .sub-plan{ font-size:12.5px; color:var(--ink-soft); }
  .sub-cost{ font-family:var(--font-mono); font-size:13px; font-variant-numeric:tabular-nums; }
  .sub-meta{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
  .limit-note{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); margin-top:3px; }

  /* ============================ WORKSPACES ============================ */
  .ws-tabs{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .ws-tab{
    display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:20px;
    padding:6px 12px; background:var(--paper-raised); cursor:pointer; font-size:12.5px; color:var(--ink-soft);
  }
  .ws-tab.on{ border-color:var(--ink); color:var(--ink); font-weight:600; }
  .ws-tab .lock{ font-size:10px; color:var(--ink-faint); }
  .ws-note{
    display:flex; gap:10px; align-items:flex-start; background:var(--paper-raised);
    border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:9px; padding:11px 14px;
    font-size:12.5px; color:var(--ink-soft); line-height:1.5;
  }

  /* board */
  /* The board has room to breathe: wider columns, bigger cards, more air between them. A cramped board reads as
     a list of strings; a roomy one reads as work. */
  .board{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; align-items:start; }
  .board-col{ background:var(--paper-raised); border:0; border-radius:12px; padding:14px; min-height:92px; }
  .board-col.over{ border-color:var(--accent); }
  .col-head{
    display:flex; justify-content:space-between; align-items:center; gap:8px; font-family:var(--font-mono);
    font-size:10px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint); margin-bottom:14px;
  }
  .tcard{
    background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--dc,var(--line));
    border-radius:11px; padding:13px 15px; margin-bottom:10px; cursor:grab; touch-action:none;
  }
  .tcard:last-child{ margin-bottom:0; }
  .tcard:hover{ border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
  .tcard.dragging{ opacity:0.45; }
  .tcard .tt{ font-size:13.5px; font-weight:600; line-height:1.45; }
  .tcard .tmeta{ display:flex; gap:7px; align-items:center; margin-top:10px; flex-wrap:wrap; }
  .tcard .tdom{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-faint); }
  .prio{ font-family:var(--font-mono); font-size:9.5px; padding:3px 7px; border-radius:5px; font-weight:600; letter-spacing:0.03em; }
  /* priority as a row of taps in the add bar: set one, tap it again to clear */
  .prio-pick{ display:inline-flex; gap:4px; align-items:center; flex:0 0 auto; }
  .prio-pick .prio{ border:1px solid var(--line); cursor:pointer; opacity:.45; }
  .prio-pick .prio:hover{ opacity:.8; }
  .prio-pick .prio.on{ opacity:1; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
  .prio.p0{ background:var(--bad); color:#fff; }
  .prio.p1{ background:color-mix(in srgb, var(--warn) 80%, transparent); color:#fff; }
  .prio.p2{ background:var(--paper-sunken); color:var(--ink-soft); }
  .prio.p3{ background:var(--paper-sunken); color:var(--ink-faint); }
  .horizon{ font-family:var(--font-mono); font-size:9px; color:var(--ink-faint); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }

  .week{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; align-items:start; }
  .day-col{ background:var(--paper-raised); border:1px solid var(--line); border-radius:11px; padding:12px; min-height:140px; }
  .day-col.today{ border-color:var(--accent); }
  .day-head{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
  .day-col.today .day-head{ color:var(--accent); }

  /* calendar */
  .cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
  .cal-dow{ font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; color:var(--ink-faint); text-align:center; padding-bottom:4px; }
  .cal-cell{ min-height:104px; border:1px solid var(--line); border-radius:10px; padding:8px; background:var(--paper-raised); }
  .cal-cell.out{ opacity:0.35; }
  .cal-cell.today{ border-color:var(--accent); }
  .cal-day{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
  .cal-cell.today .cal-day{ color:var(--accent); font-weight:600; }
  .cal-ev{
    font-size:10px; line-height:1.3; border-left:3px solid var(--ec,var(--line)); background:var(--paper-sunken);
    border-radius:3px; padding:2px 5px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* log */
  .log-row{ display:grid; grid-template-columns:88px 1fr 96px 104px auto; gap:11px; align-items:center; padding:11px 0; border-top:1px solid var(--line); font-size:13px; }
  .log-row:first-of-type{ border-top:none; }
  .log-when{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
  .log-cost{ font-family:var(--font-mono); font-size:12.5px; font-variant-numeric:tabular-nums; text-align:right; }

  /* portfolio */
  .po-list{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
  .po-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
  .po-stat{ background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:13px 15px; }
  .po-stat .v{ font-family:var(--font-display); font-size:27px; line-height:1.05; letter-spacing:0.01em; font-variant-numeric:tabular-nums; }
  .po-stat .k{ font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint); margin-bottom:5px; }
  .po-stat .d{ font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); margin-top:5px; }
  .po-row{ display:grid; grid-template-columns:88px 1fr 88px 96px 92px; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); font-size:12.5px; }
  .po-row:first-of-type{ border-top:none; }
  .po-num{ font-family:var(--font-mono); font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
  .po-sym{ font-family:var(--font-mono); font-size:12px; font-weight:600; }
  .po-up{ color:var(--good); }
  .po-down{ color:var(--bad); }
  .tx-row{ display:grid; grid-template-columns:82px 72px 1fr 100px; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:12.5px; }
  .tx-kind{ font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em; padding:2px 7px; border-radius:4px; background:var(--paper-sunken); color:var(--ink-soft); text-align:center; }

  /* ledger extras */
  .src-row{ display:flex; gap:5px; flex-wrap:wrap; margin:9px 0 2px; }
  .src-chip{
    font-family:var(--font-mono); font-size:9.5px; border:1px solid var(--line); border-radius:12px;
    padding:2px 8px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px;
  }
  .src-chip.primary{ border-color:var(--good); color:var(--good); }
  .warn-strip{
    display:flex; gap:8px; align-items:flex-start; background:color-mix(in srgb, var(--warn) 14%, transparent);
    border-radius:7px; padding:8px 10px; font-size:12px; color:var(--ink); line-height:1.45; margin:10px 0 2px;
  }
  .state-pill{
    font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em;
    padding:2px 7px; border-radius:4px; background:var(--paper-sunken); color:var(--ink-soft);
  }
  .outcome-box{ background:var(--paper-sunken); border-radius:8px; padding:10px 12px; margin-top:10px; }

  /* encryption */
  .enc-row{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
  .enc-row:first-of-type{ border-top:none; }
  .enc-name{ font-size:13px; font-weight:600; width:168px; }
  .enc-detail{ flex:1; min-width:190px; font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
  .enc-detail code{ font-family:var(--font-mono); font-size:11px; background:var(--paper-sunken); padding:1px 5px; border-radius:4px; }

  /* ============================ v3.1 ADDITIONS ============================ */
  /* The column's colour reads as a label, not as a box: a short bar over the heading rather than a frame. */
  .board-col{ box-shadow:inset 0 2px 0 var(--tone,var(--line)); }
  .col-head .ch-label{ color:var(--tone,var(--ink-faint)); font-weight:600; }
  .board-col[data-status="today"]{ background:color-mix(in srgb, var(--accent) 7%, var(--paper-raised)); }
  .board-col[data-status="week"]{ background:color-mix(in srgb, var(--biz-fixpresso) 7%, var(--paper-raised)); }
  .board-col[data-status="done"]{ background:color-mix(in srgb, var(--good) 6%, var(--paper-raised)); }

  .icon-lock{ width:12px; height:12px; vertical-align:-1px; }
  .sec-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .sec-shield{ width:30px; height:30px; color:var(--accent); flex-shrink:0; }
  .grant-banner{
    display:flex; gap:10px; align-items:flex-start; background:color-mix(in srgb, var(--warn) 15%, transparent);
    border-radius:9px; padding:11px 13px; font-size:12.5px; line-height:1.5;
  }
  .exception-row{ display:flex; gap:11px; align-items:center; padding:11px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
  .exception-row:first-of-type{ border-top:none; }

  .mk-row{ display:grid; grid-template-columns:1fr 92px 108px 66px; gap:11px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:12.5px; }
  .mk-row:first-of-type{ border-top:none; }
  .mk-val{ font-family:var(--font-mono); font-size:13px; text-align:right; font-variant-numeric:tabular-nums; }
  .mk-range{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); text-align:right; }
  .mk-trend{ font-family:var(--font-mono); font-size:11px; text-align:right; }
  .mk-flag{ color:var(--warn); font-weight:600; }
  .mk-ok{ color:var(--good); }

  .arch-row{ display:flex; gap:11px; align-items:center; padding:11px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
  .arch-row:first-of-type{ border-top:none; }
  .arch-row .ar-name{ font-size:13px; font-weight:600; flex:1; min-width:120px; }

  .howto{ background:var(--paper-raised); border:1px solid var(--line); border-radius:11px; padding:16px 18px; }
  .howto h4{ margin:0 0 4px; font-size:14.5px; }
  .howto .ht-sub{ font-size:12.5px; color:var(--ink-soft); margin-bottom:11px; line-height:1.5; }
  .howto ol{ margin:0; padding-left:18px; font-size:12.5px; line-height:1.7; color:var(--ink-soft); }
  .howto ol b{ color:var(--ink); }
  .howto code{ font-family:var(--font-mono); font-size:11px; background:var(--paper-sunken); padding:1px 5px; border-radius:4px; }

  .rt-group{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
             color:var(--ink-faint); display:flex; align-items:center; gap:8px; margin:14px 0 2px; }
  .rt-group:first-child{ margin-top:0; }
  .pin-badge{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.05em;
              background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent);
              padding:2px 7px; border-radius:4px; }
  .upload-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }
  .thumb{ width:54px; height:54px; border-radius:8px; object-fit:cover; border:1px solid var(--line); display:block; }

  /* ============================ MINI-APP SHELL ============================ */
  #screen-workspaces{ background:color-mix(in srgb, var(--ink) 3%, var(--paper)); }
  /* A workspace is the page, not a card on it. The frame around it only ever added a second border inside the
     screen's own padding, with the name printed twice. */
  .app-shell{ border:0; border-radius:0; background:none; }
  /* One row of controls, no heading: the heading is the screen's own title now. */
  .app-bar{ display:flex; align-items:center; gap:10px; padding:0; background:none; border:0; flex-wrap:wrap; }
  .view-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
  .app-body{ padding:0; display:flex; flex-direction:column; gap:16px; }

  /* generic records */
  .rec{ background:var(--paper-raised); border:1px solid var(--line); border-left:3px solid var(--rc,var(--line));
        border-radius:11px; padding:14px 16px; }
  .rec + .rec{ margin-top:11px; }
  .rec:hover{ border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
  .rec-top{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
  .rec-title{ font-size:13.5px; font-weight:600; flex:1; min-width:140px; }
  .rec-fields{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
  .fchip{ font-family:var(--font-mono); font-size:10.5px; border:1px solid var(--line); border-radius:12px;
          padding:3px 9px; color:var(--ink-soft); white-space:nowrap; }
  .fchip b{ color:var(--ink-faint); font-weight:400; }
  .fchip.due-soon{ border-color:var(--warn); color:var(--warn); }
  .fchip.overdue{ border-color:var(--bad); color:var(--bad); }
  .fchip.money{ border-color:var(--good); color:var(--good); }
  .rec-note{ font-size:12px; color:var(--ink-soft); margin-top:7px; line-height:1.5; }
  .rec-check{ width:17px; height:17px; border-radius:5px; border:1.5px solid var(--line); background:var(--paper);
              cursor:pointer; flex-shrink:0; padding:0; font-size:11px; line-height:1; color:transparent; }
  .rec-check.on{ background:var(--good); border-color:var(--good); color:#fff; }
  .rec.done .rec-title{ text-decoration:line-through; opacity:0.55; }

  .field-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:11px; }
  .ff label{ display:block; font-family:var(--font-mono); font-size:9px; text-transform:uppercase;
             letter-spacing:0.06em; color:var(--ink-faint); margin-bottom:4px; }
  .ff input, .ff select, .ff textarea{
    width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12.5px;
    background:var(--paper); color:var(--ink);
  }
  .ff textarea{ resize:vertical; min-height:56px; }
  .ff .ftype{ font-family:var(--font-mono); font-size:9px; color:var(--ink-faint); margin-top:3px; }

  .schema-row{ display:flex; gap:9px; align-items:center; padding:9px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
  .schema-row:first-of-type{ border-top:none; }
  .schema-row .sf-name{ font-size:13px; font-weight:600; flex:1; min-width:110px; }
  .type-tag{ font-family:var(--font-mono); font-size:9.5px; background:var(--paper-sunken);
             color:var(--ink-soft); border-radius:4px; padding:2px 7px; }

  .dictate-box{ width:100%; border:1px solid var(--accent); border-radius:10px; padding:11px 13px;
                font-size:13.5px; background:var(--paper); color:var(--ink); resize:vertical; min-height:88px; }
  .mic{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--paper-raised);
        cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0; }
  .mic.live{ border-color:var(--bad); color:var(--bad); }
  .mic svg{ width:17px; height:17px; }

  .import-tbl{ width:100%; border-collapse:collapse; font-size:12px; }
  .import-tbl th{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.05em;
                  color:var(--ink-faint); text-align:left; padding:0 8px 7px 0; font-weight:600; }
  .import-tbl td{ padding:7px 8px 7px 0; border-top:1px solid var(--line); vertical-align:top; }
  .import-tbl input{ width:100%; border:1px solid var(--line); border-radius:6px; padding:5px 7px;
                     font-size:11.5px; background:var(--paper); color:var(--ink); }
  .guess{ font-family:var(--font-mono); font-size:9px; color:var(--warn); }

  .rem-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px;
             border:1px solid var(--line); border-radius:12px; padding:3px 9px; color:var(--ink-soft); }

  /* ============================ ICONS / VIEWS / NESTING ============================ */
  .ws-icon{ width:15px; height:15px; flex-shrink:0; }
  .app-bar .ws-icon{ width:19px; height:19px; }
  .icon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:7px; }
  .icon-pick{
    width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--paper);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); padding:0;
  }
  .icon-pick svg{ width:19px; height:19px; }
  .icon-pick.on{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }

  .sub-tabs{ display:flex; gap:5px; flex-wrap:wrap; padding:9px 18px; border-bottom:1px solid var(--line);
             background:color-mix(in srgb, var(--ink) 2%, var(--paper-raised)); }
  .sub-tab{ display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; border-radius:16px;
            padding:4px 11px; background:none; cursor:pointer; font-size:12px; color:var(--ink-soft); }
  .sub-tab.on{ background:var(--paper); border-color:var(--line); color:var(--ink); font-weight:600; }

  .tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:9px; }
  table.rec-tbl{ border-collapse:collapse; width:100%; font-size:12.5px; min-width:520px; }
  table.rec-tbl th{
    font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--ink-faint); text-align:left; padding:9px 11px; background:var(--paper-raised);
    border-bottom:1px solid var(--line); white-space:nowrap; font-weight:600;
  }
  table.rec-tbl td{ padding:9px 11px; border-bottom:1px solid var(--line); vertical-align:top; }
  table.rec-tbl tr:last-child td{ border-bottom:none; }
  table.rec-tbl td.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
  table.rec-tbl .cell-primary{ font-weight:600; }

  .chk-row{ display:flex; align-items:center; gap:11px; padding:10px 2px; border-bottom:1px solid var(--line); }
  .chk-row:last-child{ border-bottom:none; }
  .chk-row .ct{ flex:1; font-size:13px; min-width:0; }
  .chk-row.done .ct{ text-decoration:line-through; opacity:0.5; }

  .view-add{ border:1px dashed var(--line); background:none; border-radius:20px; padding:4px 10px;
             font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); cursor:pointer; }
  .view-add:hover{ color:var(--ink); border-color:var(--ink-faint); }

  /* ============================ RESPONSIVE ============================ */
  @media (max-width:860px){
    .app{ grid-template-columns:1fr; grid-template-rows:52px 1fr 62px; grid-template-areas:"topbar" "main" "rail"; }
    nav.rail{ flex-direction:row; border-right:none; border-top:1px solid var(--line); padding:5px 6px; overflow-x:auto; overflow-y:hidden; justify-content:flex-start; gap:0; }
    .navbtn{ width:66px; flex-shrink:0; padding:6px 0; }
    .chat-list{ display:none; }
    .health .dots, .health > span{ display:none; }
    .preview-badge{ display:none; }
    .topbar{ padding:0 12px; }
    .wiki{ flex-direction:column; min-height:0; }
    .wiki-tree{ width:100%; display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); gap:4px; }
    .tree-label{ display:none; }
    .tree-item{ flex-shrink:0; white-space:nowrap; }
    .stack{ height:460px; }
    .meter-row{ grid-template-columns:92px 1fr; grid-template-areas:"name bar" "meta meta"; }
    .meter-meta{ text-align:left; grid-area:meta; }
    .sub-row{ grid-template-columns:1fr auto; row-gap:4px; }
    .sub-row .sub-plan{ grid-column:1 / -1; }
    .sub-row .sub-meta{ grid-column:1 / -1; }
    .board{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .week{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .cal-cell{ min-height:62px; }
    .log-row{ grid-template-columns:1fr auto; row-gap:4px; }
    .log-row .log-when{ grid-column:1 / -1; }
    .po-row{ grid-template-columns:1fr auto; row-gap:3px; }
    .po-row .po-sym{ grid-column:1 / -1; }
    .tx-row{ grid-template-columns:1fr auto; row-gap:3px; }
    .enc-name{ width:100%; }
  }
  /* ============================ HQ ADDITIONS (task 1.1) ============================
     Everything above is the design, verbatim. These few rules cover what the design had no need for once
     the chat shows real text. Tokens only, no new colours. */
  .group-tabs{ flex-wrap:wrap; row-gap:4px; }
  .msg-body{ white-space:pre-wrap; overflow-wrap:anywhere; }
  /* A rendered reply is no longer preformatted text: the renderer makes the paragraphs. */
  .msg-body.md{ white-space:normal; }
  .msg-body.md > :first-child{ margin-top:0; }
  .msg-body.md > :last-child{ margin-bottom:0; }
  .msg-body.md p{ margin:0 0 9px; line-height:1.55; }
  .msg-body.md h3, .msg-body.md h4, .msg-body.md h5, .msg-body.md h6{ margin:14px 0 6px; font-size:13.5px; font-weight:700; letter-spacing:.01em; }
  .msg-body.md h3{ font-size:15px; }
  .msg-body.md ul, .msg-body.md ol{ margin:0 0 9px; padding-left:20px; }
  .msg-body.md li{ margin:2px 0; line-height:1.5; }
  .msg-body.md li > ul, .msg-body.md li > ol{ margin:2px 0; }
  /* the design's bubble code block is a block; inside a rendered reply, `code` is inline again */
  .msg-body.md code{ display:inline; margin:0; font-family:var(--font-mono); font-size:11.5px; background:var(--paper-raised); border:1px solid var(--line); border-radius:4px; padding:1px 4px; }
  .msg-body.md pre{ margin:0 0 10px; padding:10px 12px; overflow-x:auto; background:var(--paper-raised); border:1px solid var(--line); border-radius:9px; }
  .msg-body.md pre code{ border:0; padding:0; background:none; font-size:11.5px; line-height:1.5; white-space:pre; }
  .msg-body.md blockquote{ margin:0 0 10px; padding:2px 0 2px 11px; border-left:2px solid var(--line); color:var(--ink-soft); }
  .msg-body.md hr{ border:0; border-top:1px solid var(--line); margin:12px 0; }
  .msg-body.md a{ color:var(--accent); }
  .msg-body.md .md-table{ width:100%; margin:0 0 10px; border-collapse:collapse; font-size:12px; display:block; overflow-x:auto; }
  .msg-body.md .md-table th, .msg-body.md .md-table td{ border:1px solid var(--line); padding:5px 8px; text-align:left; vertical-align:top; }
  .msg-body.md .md-table th{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600; background:var(--paper-raised); }
  .msg.user .bubble{ white-space:pre-wrap; overflow-wrap:anywhere; }
  .msg-system.bad{ color:var(--bad); }
  .chat-empty{ align-self:flex-start; max-width:520px; }
  .chat-list .new-project{ margin:12px 8px 4px; font-size:11.5px; }
  .group-body .add-chat{ margin:6px 0 4px 20px; font-size:11px; padding:5px 10px; border-style:dashed; }
  .field select, .field textarea{ width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:13.5px; background:var(--paper-raised); color:var(--ink); }
  .field textarea{ resize:vertical; min-height:90px; font-family:var(--font-ui); }
  .brief-pick{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:var(--paper-raised); margin-bottom:4px; cursor:pointer; font-size:13px; }
  .brief-pick span:first-of-type{ flex:1; min-width:0; }
  .modal .ws-note{ margin-top:10px; }
  .app{ height:100vh; height:100dvh; }            /* dvh: the visible height, not the height behind the browser bar */
  .threads-btn, .drawer-close{ display:none; }
  @media (max-width:860px){
    /* 16px stops iOS from zooming the page when an input is focused */
    .field input, .field select, .field textarea, .composer-row textarea{ font-size:16px; }
    .pad{ padding:16px; }                                         /* the design's 16px gutter */
    .app{ grid-template-rows:52px 1fr calc(62px + env(safe-area-inset-bottom)); }
    nav.rail{ padding-bottom:calc(5px + env(safe-area-inset-bottom)); }
    .composer{ padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
    /* the thread list becomes a drawer: the same markup, opened over the chat */
    /* Leaving a chat has to be as obvious as entering one: a back arrow where a back arrow belongs, not a word
       in the far corner. */
    .chat-head{ position:relative; padding-left:0; }
    .threads-btn{ display:inline-flex; align-items:center; gap:5px; margin-bottom:6px; padding:5px 11px 5px 7px; }
    .threads-btn svg{ width:15px; height:15px; }
    .chat-list.open{ display:block; position:absolute; inset:0; width:auto; z-index:30; background:var(--paper); border-right:none; }
    .chat-list.open .drawer-close{ display:inline-flex; margin:0 0 10px 8px; }
  }
  /* ---- workspaces (task 4.2): the add bar, and the few bits the design drew with inline styles ---- */
  .qa-bar{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--paper-raised); }
  .qa-in{ flex:1 1 150px; min-width:0; border:1px solid var(--line); border-radius:7px; padding:8px 10px; font-size:13.5px; font-family:var(--font-ui); background:var(--paper); color:var(--ink); }
  .qa-in:focus{ outline:none; border-color:var(--accent); }
  .qa-narrow{ flex:0 1 128px; }
  /* --- throw-in bar: the whole of saving a bookmark is one box and one button --- */
  .throw{ display:flex; flex-direction:column; gap:9px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--paper-raised); }
  .throw-in{ width:100%; box-sizing:border-box; resize:vertical; min-height:56px; border:1px solid var(--line); border-radius:9px; padding:11px 12px; font-size:14px; line-height:1.5; font-family:var(--font-ui); background:var(--paper); color:var(--ink); }
  .throw-in:focus{ outline:none; border-color:var(--accent); }
  .throw-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .throw-row .qa-in{ flex:0 1 190px; }
  .throw-hint{ font-size:11.5px; color:var(--ink-faint); flex:1 1 220px; min-width:0; }
  /* --- signing a device in: the one screen that has to work before anything else does --- */
  .signin{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--paper); }
  .signin-box{ width:100%; max-width:380px; display:flex; flex-direction:column; gap:14px; }
  .signin-brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:24px; letter-spacing:.04em; color:var(--ink); }
  .signin-brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
  .signin-box h2{ margin:0; font-size:19px; font-weight:600; color:var(--ink); }
  .signin-box p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
  .signin-box input{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:9px; padding:13px 14px; font-size:16px; font-family:var(--font-ui); background:var(--paper-raised); color:var(--ink); }
  .signin-box input:focus{ outline:none; border-color:var(--accent); }
  .signin-box .btn-solid{ padding:12px 16px; font-size:14px; justify-content:center; }
  .signin-msg{ min-height:18px; font-size:12.5px; color:var(--warn); }
  .ws-flash{ border-color:var(--warn); }
  /* the template gallery, the way a page template is picked */
  /* Workspaces live down the left, the way the chats do: ten of them no longer wrap across the top and push
     the records off the screen. */
  .ws-layout{ display:grid; grid-template-columns:210px minmax(0,1fr); gap:16px; align-items:start; }
  .ws-rail{ display:flex; flex-direction:column; gap:4px; position:sticky; top:0; max-height:calc(100vh - 150px); overflow-y:auto; padding-right:2px; }
  .ws-rail .ws-tab{ width:100%; justify-content:flex-start; gap:8px; }
  .wst-icon{ display:flex; flex:0 0 auto; }
  .wst-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
  .ws-rail .lock{ flex:0 0 auto; }
  .ws-kids{ display:flex; flex-direction:column; gap:2px; margin:2px 0 6px 12px; padding-left:8px; border-left:1px solid var(--line); }
  .ws-kid{ display:flex; align-items:center; gap:7px; padding:6px 9px; border:0; border-radius:7px; background:none; color:var(--ink-soft); font-family:var(--font-ui); font-size:12px; cursor:pointer; text-align:left; }
  .ws-kid:hover{ background:var(--paper-raised); color:var(--ink); }
  .ws-kid.on{ background:var(--paper-raised); color:var(--ink); font-weight:600; }
  .ws-rail-foot{ display:flex; gap:4px; margin-top:8px; }
  .ws-rail-foot .ws-tab{ flex:1; justify-content:center; font-size:11px; }
  .ws-main{ display:flex; flex-direction:column; gap:16px; min-width:0; }
  @media (max-width:860px){
    .ws-layout{ grid-template-columns:minmax(0,1fr); gap:12px; }
    /* on a phone the same list is one line that scrolls sideways */
    .ws-rail{ flex-direction:row; position:static; max-height:none; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; gap:6px; }
    .ws-rail .ws-tab{ width:auto; flex:0 0 auto; }
    .wst-name{ white-space:nowrap; }
    /* the open workspace's pages stay reachable: they follow it along the same strip */
    .ws-kids{ flex-direction:row; flex:0 0 auto; margin:0; padding-left:6px; }
    .ws-kid{ white-space:nowrap; border:1px solid var(--line); }
    .ws-rail-foot{ margin:0; flex:0 0 auto; }
  }
  .col-net{ font-family:var(--font-mono); font-size:10.5px; margin-left:auto; margin-right:6px; }
  a.fchip{ text-decoration:none; }
  a.fchip:hover{ border-color:var(--accent); }
  /* The header is where a chat gets its project, its focus and its name — afterwards, with the browser's own
     pickers, which on a phone are the native wheel rather than a popup of our own. */
  .chat-head .meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .head-pick{ border:1px solid var(--line); border-radius:999px; padding:3px 9px; font-family:var(--font-mono); font-size:10.5px; background:var(--paper-raised); color:var(--ink-soft); cursor:pointer; max-width:150px; }
  .head-pick:hover{ border-color:var(--accent); color:var(--ink); }
  .head-type{ font-family:var(--font-ui); cursor:text; }
  .head-meta{ color:var(--ink-faint); }
  .title-edit{ width:100%; max-width:420px; border:1px solid var(--accent); border-radius:7px; padding:3px 8px; background:var(--paper-raised); color:var(--ink); font-family:var(--font-display,var(--font-ui)); font-size:17px; font-weight:600; }
  .chat-head .title{ cursor:text; }
  .biz-menu{ position:fixed; z-index:140; display:flex; flex-direction:column; gap:1px; min-width:210px; max-height:70vh; overflow-y:auto; padding:5px; border:1px solid var(--line); border-radius:11px; background:var(--paper-raised); box-shadow:0 14px 34px rgba(0,0,0,.26); }
  .bm-row{ display:flex; align-items:center; gap:9px; padding:8px 10px; border:0; border-radius:7px; background:none; color:var(--ink); font-family:var(--font-ui); font-size:13px; text-align:left; cursor:pointer; }
  .bm-row:hover{ background:var(--paper); }
  .bm-row.on{ color:var(--accent); font-weight:600; }
  .bm-sep{ height:1px; margin:5px 4px; background:var(--line); }
  /* The model picker, drawn like Claude Code's own list: a caret on the row you are on, a tick on the one in use. */
  .model-menu{ position:fixed; z-index:140; width:min(392px, calc(100vw - 20px)); max-height:min(74vh, 600px); overflow-y:auto;
    padding:8px; border:1px solid var(--line); border-radius:14px; background:var(--paper-raised);
    box-shadow:0 20px 52px rgba(0,0,0,.32); font-family:var(--font-ui); }
  .mm-title{ padding:6px 10px 10px; font-size:13px; font-weight:700; color:var(--ink); }
  .mm-head{ padding:12px 10px 5px; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
  .mm-row{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 11px; border:0; border-radius:10px;
    background:none; color:var(--ink); font-family:inherit; font-size:13.5px; text-align:left; cursor:pointer; }
  .mm-row:hover{ background:var(--paper); }
  .mm-row.at{ background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
  .mm-caret, .mm-num{ display:none; }
  .mm-name{ flex:0 0 auto; font-weight:600; }
  .mm-note{ flex:1; min-width:0; color:var(--ink-faint); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mm-tick{ flex:0 0 auto; width:14px; text-align:center; color:var(--accent); font-weight:700; }
  .mm-foot{ padding:10px 11px 3px; margin-top:6px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-faint); }
  @media (max-width:860px){
    .mm-row{ font-size:15px; padding:12px 11px; }
    .mm-note{ font-size:12px; }
    .mm-foot{ display:none; }
  }
  .bm-head{ padding:4px 10px 2px; font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); }
  .bm-chips{ display:flex; flex-wrap:wrap; gap:4px; padding:4px 6px 2px; }
  .bm-chips .chip{ font-size:10.5px; padding:3px 8px; }
  /* what is going with the next message */
  .attach-preview{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 7px; }
  .attach-chip{ display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 3px; border:1px solid var(--line); border-radius:8px; background:var(--paper-raised); font-size:11px; }
  .attach-chip img{ width:26px; height:26px; object-fit:cover; border-radius:5px; display:block; }
  .attach-chip button{ border:0; background:none; color:var(--ink-faint); cursor:pointer; font-size:14px; line-height:1; padding:0 3px; }
  .attach-chip button:hover{ color:var(--bad); }
  .at-menu{ position:fixed; z-index:120; display:flex; flex-direction:column; padding:4px; border:1px solid var(--line); border-radius:9px; background:var(--paper-raised); box-shadow:0 10px 28px rgba(0,0,0,.22); max-height:240px; overflow-y:auto; }
  .at-opt{ text-align:left; padding:7px 10px; border:0; border-radius:6px; background:none; color:var(--ink); font-family:var(--font-ui); font-size:13px; cursor:pointer; white-space:nowrap; }
  .at-opt:hover, .at-opt.on{ background:var(--accent); color:var(--paper); }
  .cal-bar{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
  .cal-bar .btn-ghost{ padding:4px 10px; }
  .cal-ev[data-ev-ws]{ cursor:pointer; }
  .cal-ev[data-ev-ws]:hover{ filter:brightness(1.15); }
  .tpl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; max-height:260px; overflow-y:auto; padding:2px; }
  .tpl-card{ display:flex; flex-direction:column; gap:3px; text-align:left; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--paper-raised); color:var(--ink); cursor:pointer; font-family:var(--font-ui); }
  .tpl-card:hover{ border-color:var(--accent); }
  .tpl-card.on{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
  .tpl-icon{ display:flex; color:var(--ink-faint); }
  .tpl-card.on .tpl-icon{ color:var(--accent); }
  .tpl-name{ font-size:12.5px; font-weight:600; }
  .tpl-blurb{ font-size:10.5px; color:var(--ink-faint); line-height:1.35; }
  .rec-edit{ margin-left:auto; font-size:10.5px; padding:3px 8px; }
  .rec{ cursor:default; }
  .po-head{ color:var(--ink-faint); font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
  .tx-row .btn-ghost{ font-size:10.5px; padding:3px 8px; }
  .arch-row .tag-mono{ margin-left:auto; }
  @media (max-width:860px){
    .qa-in, .qa-narrow{ flex:1 1 100%; font-size:16px; }
    .qa-bar .btn-solid, .qa-bar .btn-ghost{ flex:1 1 auto; }
    .throw-in{ font-size:16px; }
    .throw-row .qa-in, .throw-row .btn-solid, .throw-row .btn-ghost{ flex:1 1 100%; }
    .throw-hint{ order:9; }
    .log-row .tag-mono{ display:block; }
  }
  /* ---- routines: the controls, the prompt, and the scrollable log of what it actually did ---- */
  .routine-card.off .rt-name{ color:var(--ink-soft); }
  /* The routine page answers one question first — did it run, and what did it say — and keeps the rest folded. */
  .rt-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .rt-spacer{ flex:1; }
  .rt-switch{ margin:0; border:0; background:none; padding:6px 2px; }
  .rt-next{ margin:10px 0 20px; font-size:12px; color:var(--ink-faint); }
  .rt-section{ margin-bottom:22px; }
  .rt-section-head{ font-size:12px; font-weight:700; color:var(--ink); margin-bottom:12px; }
  .rt-quiet{ font-size:12px; color:var(--ink-faint); line-height:1.55; margin-top:8px; }
  .rt-prompt-box{ border-top:1px solid var(--line); padding-top:14px; }
  .rt-prompt-box > summary{ cursor:pointer; font-size:12px; color:var(--ink-faint); list-style:none; padding:4px 0; }
  .rt-prompt-box > summary::-webkit-details-marker{ display:none; }
  .rt-prompt-box > summary::before{ content:'▸ '; }
  .rt-prompt-box[open] > summary::before{ content:'▾ '; }
  .rt-prompt-box > summary:hover{ color:var(--ink); }
  .rt-prompt{ width:100%; min-height:220px; resize:vertical; margin-top:12px; border:1px solid var(--line); border-radius:11px;
    padding:14px 16px; background:var(--paper); color:var(--ink-soft); font-family:var(--font-mono); font-size:11.5px; line-height:1.7; }
  .rt-prompt:focus{ outline:none; border-color:var(--accent); color:var(--ink); }
  .rt-logs{ display:flex; flex-direction:column; gap:10px; }
  .rt-log{ border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden; }
  .rt-log.open{ border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
  .rt-log-head{ display:flex; gap:12px; align-items:center; width:100%; padding:13px 16px; border:0; background:none;
    color:var(--ink); text-align:left; cursor:pointer; }
  .rt-log-head:hover{ background:var(--paper-raised); }
  .rt-log-when{ flex:0 0 auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
  .rt-log-dot{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--ink-faint); }
  .rt-log-dot.good{ background:var(--good); } .rt-log-dot.warn{ background:var(--warn); } .rt-log-dot.bad{ background:var(--bad); }
  .rt-log-sum{ flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rt-log-meta{ flex:0 0 auto; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); }
  .rt-log-body{ padding:4px 18px 18px; font-size:13px; line-height:1.6; color:var(--ink-soft);
    max-height:420px; overflow-y:auto; }
  /* a run's output is markdown, like any other answer */
  .rt-log-body.md{ white-space:normal; }
  .rt-log-body.md p, .rt-log-body.md ul, .rt-log-body.md ol, .rt-log-body.md table{ margin:0 0 6px; }
  .rt-log-body.md h3, .rt-log-body.md h4{ margin:6px 0 4px; font-size:12px; }
  .rt-log-body.md table{ width:100%; border-collapse:collapse; font-size:11px; display:block; overflow-x:auto; }
  .rt-log-body.md th, .rt-log-body.md td{ border:1px solid var(--line); padding:3px 6px; text-align:left; }
  .rt-log-body.md code{ font-family:var(--font-mono); font-size:10.5px; }
  .rt-log-body.bad{ color:var(--bad); }
  @media (max-width:860px){
    .rt-controls > *{ flex:1 1 auto; }
    .rt-spacer{ display:none; }
  }
  /* ---- the inbox gesture: right is yes, left asks why ---- */
  .icard.dragging{ transition:none; cursor:grabbing; }
  .icard[data-depth="0"]{ touch-action:pan-y; }
  .swipe-hint{ position:absolute; top:14px; padding:5px 11px; border-radius:999px; font-family:var(--font-mono);
    font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; opacity:0; transition:opacity .12s; pointer-events:none; }
  .swipe-hint.right{ right:14px; border:1px solid var(--good); color:var(--good); }
  .swipe-hint.left{ left:14px; border:1px solid var(--bad); color:var(--bad); }
  .icard.to-approve .swipe-hint.right, .icard.to-reject .swipe-hint.left{ opacity:1; }
  .icard.to-approve{ border-color:var(--good); }
  .icard.to-reject{ border-color:var(--bad); }
  .icard-body{ font-size:13px; line-height:1.55; margin-bottom:10px; }
  .icard-body.md, .why.md{ white-space:normal; }
  .why.md p:last-child, .icard-body.md p:last-child{ margin-bottom:0; }
  .why.md p, .icard-body.md p{ margin:0 0 7px; }
  .why.md ul, .why.md ol, .icard-body.md ul, .icard-body.md ol{ margin:0 0 7px; padding-left:18px; }
  .why.md table, .icard-body.md table{ width:100%; border-collapse:collapse; font-size:11.5px; display:block; overflow-x:auto; }
  .why.md th, .why.md td, .icard-body.md th, .icard-body.md td{ border:1px solid var(--line); padding:3px 6px; text-align:left; }
  a.src-chip{ text-decoration:none; }
  /* ---- wiki: a tree that opens on demand, the file beside it, the images in a grid ---- */
  .wiki-search{ padding:0 0 8px; position:sticky; top:0; background:var(--paper); z-index:2; }
  .wiki-search input{ width:100%; border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:12.5px;
    font-family:var(--font-ui); background:var(--paper-raised); color:var(--ink); }
  .wiki-search input:focus{ outline:none; border-color:var(--accent); }
  .wk-row{ display:flex; align-items:center; gap:7px; width:100%; padding:5px 8px; border:0; border-radius:6px;
    background:none; color:var(--ink-soft); font-family:var(--font-ui); font-size:12.5px; text-align:left; cursor:pointer; }
  .wk-row:hover{ background:var(--paper-raised); color:var(--ink); }
  .wk-row.on{ background:var(--paper-raised); color:var(--ink); font-weight:600; }
  .wk-row.dir{ color:var(--ink); }
  .wk-caret{ width:10px; flex:0 0 auto; color:var(--ink-faint); font-size:10px; }
  .wk-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wk-dim{ flex:0 0 auto; font-family:var(--font-mono); font-size:9.5px; color:var(--ink-faint); }
  .wiki-head{ display:flex; gap:10px; align-items:center; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
  .wiki-path{ flex:1; min-width:0; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); overflow-wrap:anywhere; }
  .wiki-page{ font-size:13.5px; line-height:1.6; }
  .wiki-page.md h3{ font-size:17px; margin:18px 0 8px; }
  .wiki-page.md h4, .wiki-page.md h5{ font-size:14px; margin:14px 0 6px; }
  .wiki-page.md p{ margin:0 0 10px; }
  .wiki-page.md ul, .wiki-page.md ol{ margin:0 0 10px; padding-left:22px; }
  .wiki-page.md table{ width:100%; border-collapse:collapse; font-size:12px; display:block; overflow-x:auto; margin:0 0 12px; }
  .wiki-page.md th, .wiki-page.md td{ border:1px solid var(--line); padding:5px 8px; text-align:left; vertical-align:top; }
  .wiki-page.md pre{ background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:10px 12px; overflow-x:auto; }
  .wiki-page.md code{ font-family:var(--font-mono); font-size:11.5px; }
  .wiki-page.md blockquote{ margin:0 0 10px; padding-left:11px; border-left:2px solid var(--line); color:var(--ink-soft); }
  .wiki-pre{ font-family:var(--font-mono); font-size:11.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
  .wiki-img{ max-width:100%; border-radius:10px; border:1px solid var(--line); }
  .gnode{ cursor:pointer; }
  .gnode:hover circle{ stroke:var(--accent); stroke-width:2; }
  .gnode.on circle{ stroke:var(--accent); stroke-width:2.5; }
  .img-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
  .img-cell{ display:flex; flex-direction:column; gap:5px; text-decoration:none; color:var(--ink-faint); }
  .img-cell img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:9px; border:1px solid var(--line); background:var(--paper-raised); }
  .img-cell span{ font-family:var(--font-mono); font-size:9.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (max-width:860px){
    .wiki{ flex-direction:column; min-height:0; }
    .wiki-tree{ width:auto; max-height:260px; border-right:0; border-bottom:1px solid var(--line); }
  }
  /* ---- the steps an answer took: one line while it works, the whole list when you open it ---- */
  .steps{ margin:0 0 8px; border:1px solid var(--line); border-radius:9px; background:var(--paper); overflow:hidden; }
  .steps.live{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .steps-head{ display:flex; align-items:center; gap:8px; width:100%; padding:6px 10px; border:0; background:none;
    color:var(--ink-faint); font-family:var(--font-mono); font-size:10.5px; text-align:left; cursor:pointer; }
  .steps-head:hover{ color:var(--ink); }
  .steps-caret{ flex:0 0 auto; }
  .steps-count{ flex:0 0 auto; }
  .steps-now{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft); }
  .steps.live .steps-now{ color:var(--accent); }
  .steps-body{ max-height:320px; overflow-y:auto; padding:2px 10px 8px; border-top:1px solid var(--line); }
  .step{ display:flex; gap:8px; align-items:baseline; padding:3px 0; font-family:var(--font-mono); font-size:10.5px; }
  .step-name{ flex:0 0 auto; color:var(--ink); font-weight:600; }
  .step-hint{ flex:1; min-width:0; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .step-out{ margin:1px 0 6px 10px; padding:5px 8px; border-left:2px solid var(--line); color:var(--ink-soft);
    font-family:var(--font-mono); font-size:10px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere;
    max-height:120px; overflow-y:auto; }
  .step-out.bad{ border-left-color:var(--bad); color:var(--bad); }
  /* ---- a second message waits its turn instead of being refused ---- */
  .stop-btn{ flex:0 0 auto; padding:9px 14px; border:1px solid var(--bad); border-radius:9px; background:none;
    color:var(--bad); font-family:var(--font-ui); font-size:13px; font-weight:600; cursor:pointer; }
  .stop-btn:hover{ background:color-mix(in srgb, var(--bad) 12%, transparent); }
  .queue-strip{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 7px; }
  .queued-chip{ display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:4px 6px 4px 9px;
    border:1px dashed var(--line); border-radius:999px; background:var(--paper-raised);
    font-size:11.5px; color:var(--ink-soft); }
  .qc-dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:0 0 auto; animation:qcpulse 1.6s ease-in-out infinite; }
  @keyframes qcpulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
  .queued-chip button{ border:0; background:none; color:var(--ink-faint); cursor:pointer; font-size:14px; line-height:1; padding:0 2px; }
  .queued-chip button:hover{ color:var(--bad); }
  .icard-page{ border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-bottom:12px; background:#fff; }
  .icard-page iframe{ display:block; width:100%; height:300px; border:0; }
  /* an answer that is a page, kept in its own frame */
  .attach-btn.on{ border-color:var(--accent); color:var(--accent); }
  .page-out{ margin-top:10px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); }
  .page-bar{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--line);
    font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }
  .page-bar span{ flex:1; }
  .page-bar .btn-ghost{ font-size:10.5px; padding:3px 9px; }
  .page-out iframe{ display:block; width:100%; height:440px; border:0; background:#fff; }
  .page-out.big iframe{ height:80vh; }
  .page-src{ margin:0; padding:12px; max-height:440px; overflow:auto; font-family:var(--font-mono); font-size:10.5px;
    line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink-soft); }
  @media (max-width:860px){ .page-out iframe{ height:340px; } }
  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

  /* ============================ THE PHONE ============================
     HQ is used on a phone as much as on the Mac, and a layout that merely survives a narrow screen is not the
     same as one built for it. Everything below is the phone's own layout, not a shrunken desktop: all eight
     screens reachable without scrolling the bar, numbers two to a row instead of one per screenful, titles that
     do not eat the top third, and a reply's table that scrolls sideways rather than being crushed. */
  .md-tbl{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:10px 0; }
  .md-tbl .md-table{ margin:0; min-width:100%; width:max-content; max-width:none; }

  @media (max-width:860px){
    /* iOS runs an app added to the Home Screen under the clock and the notch. Without this the top bar sits
       behind them and every screen looks shifted up. */
    .app{ grid-template-rows:calc(52px + env(safe-area-inset-top)) 1fr calc(62px + env(safe-area-inset-bottom)); }
    .topbar{ padding-top:env(safe-area-inset-top); }

    /* All eight screens fit at once. A bar you have to scroll hides where you are and which screens exist. */
    nav.rail{ overflow-x:hidden; padding:5px 3px; justify-content:space-between; }
    .navbtn{ width:auto; flex:1 1 0; min-width:0; padding:6px 1px; gap:3px; }
    .navbtn svg{ width:19px; height:19px; }
    .navbtn .lbl{ font-size:8px; letter-spacing:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* The title block was a third of the screen before anything useful began. */
    .pad{ padding:14px 16px; gap:14px; }
    .screen-title{ font-size:19px; }
    .screen-sub{ font-size:11px; line-height:1.45; }
    .screen-head{ gap:8px; }

    /* Four numbers were four screenfuls of scrolling. Two to a row, and the tile is read at a glance. */
    .kpi-row, .detail-grid, .profile-grid, .cmd-grid, .layer-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .stat-tile{ padding:13px 14px; }
    .stat-num{ font-size:28px; }
    .stat-label{ font-size:9.5px; margin-bottom:6px; }
    .stat-note{ font-size:11.5px; margin-top:6px; }

    /* 16px type in a 42px box clipped its own second line. */
    .composer{ padding:10px 14px 14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
    .composer-row textarea{ min-height:50px; max-height:160px; }
    .composer-row{ gap:7px; }
    .attach-btn{ width:38px; height:38px; }
    .send-btn{ padding:11px 13px; }
    .palette{ left:14px; right:14px; }

    /* A reply is read on a 390px screen: the bubble gets the width, the table gets the swipe. */
    .msg{ max-width:100%; }
    .md-tbl .md-table th, .md-tbl .md-table td{ min-width:118px; }
    .md-tbl .md-table td:first-child, .md-tbl .md-table th:first-child{ min-width:96px; }

    /* Boxes inside boxes inside boxes: the phone keeps one border, not three. */
    .app-body{ gap:12px; }
    .card{ padding:13px 14px; }
  }

  /* Narrower than an iPhone mini, the eight labels stop fitting at all and the icons speak for themselves. */
  @media (max-width:370px){
    .navbtn .lbl{ display:none; }
    .navbtn svg{ width:21px; height:21px; }
  }

  /* --- the one-line add: quiet until you type in it --- */
  .qa-one{ flex-direction:column; align-items:stretch; gap:0; padding:0; border:0; background:none; }
  .qa-line{ display:flex; gap:6px; align-items:center; border:1px solid var(--line); border-radius:10px;
    background:var(--paper-raised); padding:4px 6px 4px 4px; }
  .qa-main{ flex:1; border:0; background:none; padding:10px 10px; font-size:14.5px; }
  .qa-main:focus{ outline:none; }
  .qa-line:focus-within{ border-color:var(--accent); }
  .qa-mini{ width:30px; height:30px; flex:0 0 auto; border:0; border-radius:8px; background:none; cursor:pointer;
    color:var(--ink-faint); font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; }
  .qa-mini:hover{ background:var(--paper-sunken); color:var(--ink); }
  .qa-extra{ display:none; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 4px 0; }
  .qa-one.typing .qa-extra{ display:flex; }
  .qa-hint{ font-size:11px; color:var(--ink-faint); }
  @media (max-width:860px){
    .qa-main{ font-size:16px; }
    .qa-hint{ flex:1 1 100%; }
  }

  /* --- the owner's keys --- */
  .key-form{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .key-form .qa-in{ flex:1 1 170px; }
  .key-eng{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
  .key-form .screen-sub{ flex:1 1 100%; }
  @media (max-width:860px){ .key-form .qa-in, .key-form .btn-solid{ flex:1 1 100%; } }

  /* --- a record still in the air, and a title edited in place --- */
  .rec.pending{ opacity:.55; }
  .rec.pending .rec-edit{ visibility:hidden; }
  .rec-title[data-title]{ cursor:text; border-radius:5px; margin:-2px -4px; padding:2px 4px; }
  .rec-title[data-title]:hover{ background:var(--paper-sunken); }
  .rec-title-edit{ width:100%; box-sizing:border-box; border:1px solid var(--accent); border-radius:5px;
    padding:1px 4px; margin:-2px -5px; font:inherit; color:var(--ink); background:var(--paper); }
  .rec-title-edit:focus{ outline:none; }
  .tcard.pending{ opacity:.55; }

  /* --- the command palette --- */
  .palette-wrap{ position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.55); display:flex;
    align-items:flex-start; justify-content:center; padding:12vh 16px 16px; }
  .palette-box{ width:100%; max-width:560px; background:var(--paper); border:1px solid var(--ink-faint);
    border-radius:14px; box-shadow:0 28px 70px rgba(0,0,0,.5); overflow:hidden; display:flex; flex-direction:column; }
  #palInput{ border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink);
    padding:16px 18px; font-size:16px; font-family:var(--font-ui); width:100%; box-sizing:border-box; }
  #palInput:focus{ outline:none; }
  .pal-list{ max-height:min(52vh,420px); overflow-y:auto; padding:6px; }
  .pal-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none;
    color:var(--ink); padding:9px 11px; border-radius:9px; cursor:pointer; font-family:var(--font-ui); font-size:13.5px; }
  /* The row you are on has to be unmissable: the whole point is typing three letters and hitting Enter without
     looking twice at what is selected. */
  .pal-row.on{ background:var(--accent); color:var(--accent-ink); }
  .pal-row.on .pal-ico, .pal-row.on .pal-hint{ color:var(--accent-ink); opacity:.8; }
  .pal-ico{ width:16px; flex:0 0 auto; color:var(--ink-faint); text-align:center; }
  .pal-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pal-hint{ flex:0 0 auto; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint);
    max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pal-empty{ padding:18px; color:var(--ink-faint); font-size:13px; }
  .pal-foot{ display:flex; gap:14px; padding:9px 14px; border-top:1px solid var(--line);
    font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); }
  button.brand{ border:0; background:none; cursor:pointer; color:var(--ink); padding:0; }
  /* the record the keyboard is on */
  .rec.kb, .tcard.kb{ box-shadow:0 0 0 2px var(--accent); }
  @media (max-width:860px){
    .palette-wrap{ padding:7vh 12px 12px; }
    .pal-foot{ display:none; }
    .pal-hint{ display:none; }
  }
  .pal-ico{ display:flex; align-items:center; justify-content:center; }
  .pal-ico svg{ width:15px; height:15px; }
  .pal-dot{ width:8px; height:8px; border-radius:50%; display:block; }
  /* Due, but not ticked as an appointment: on the calendar, and visibly lighter than the fixed ones. */
  .cal-ev.soft{ opacity:.62; border-style:dashed; }

  /* --- holding something on a phone ---------------------------------------------------------
     A long press on a card means "pick this up and drag it", not "select this text". iOS answers a long press
     with the magnifier and a Copy menu, and a double tap with a zoom, both of which make the board feel broken.
     Chrome, cards and controls stop offering either; prose, inputs, links and code keep both, because those are
     the places you would actually want to copy from. */
  body{ touch-action:manipulation; }
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .topbar, nav.rail, .navbtn, .chip, .ws-tab, .ws-kid, .seg-tabs button, .btn-ghost, .btn-solid,
  .qa-mini, .prio, .tcard, .rec, .rec-top, .board-col, .col-head, .day-col, .day-head, .cal-ev,
  .pal-row, .pal-foot, .icard-tags, .rt-log-head, .stat-label, .screen-title, .tpl-card, .icon-pick{
    -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  }
  input, textarea, select, a, code, pre,
  .md, .rec-note, .icard-body, .icard h3, .why, .rt-log-body, .enc-detail, .fchip, .screen-sub{
    -webkit-touch-callout:default; -webkit-user-select:text; user-select:text;
  }