/* Babco Labs Theme Pack 3.4: look and building blocks. Do not edit a copy; change the pack. */
/* ---- base.css ---- */
/* Babco Labs theme: structure. Every colour, radius, shadow and timing comes from the tokens a direction sets. */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:var(--fs-body)/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.ic{width:18px;height:18px;flex:none}
.shell{display:flex;flex-direction:column;position:fixed;left:0;right:0;top:var(--vvtop,0px);height:var(--vvh,100dvh)}
babco-header{flex:none;position:relative;z-index:30}
#app{flex:1;min-height:0;display:flex;position:relative}

/* left pane */
.pane{width:var(--pane-w);flex:none;display:flex;flex-direction:column;background:var(--pane-bg);color:var(--pane-text);border-right:1px solid var(--pane-line);transition:width var(--t-med) var(--ease);overflow:hidden}
.pane-top{display:flex;align-items:center;gap:6px;padding:10px 10px 6px}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);border:0;background:transparent;color:inherit;flex:none;transition:background var(--t-fast)}
.icon-btn:hover{background:var(--hover)}
.pane .icon-btn:hover,.pane .nav-item:hover,.pane .hist-item:hover{background:var(--pane-hover)}
.new-chat{flex:1;display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--pane-line);background:var(--newchat-bg);color:var(--pane-text);font-weight:600;font-size:13.5px;white-space:nowrap;transition:background var(--t-fast)}
.new-chat:hover{background:var(--pane-hover)}
.pane-nav{display:flex;flex-direction:column;gap:2px;padding:6px 10px}
.nav-item{display:flex;align-items:center;gap:12px;height:36px;padding:0 9px;border-radius:var(--r-sm);color:var(--pane-muted);text-decoration:none;font-weight:500;font-size:13.5px;white-space:nowrap;border:0;background:transparent;width:100%;text-align:left;position:relative}
.nav-item.is-current{color:var(--pane-text);background:var(--pane-current)}
.nav-item.is-current::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.pane-hist{flex:1;min-height:0;overflow:auto;padding:8px 10px}
.pane-h{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pane-muted);padding:8px 9px 6px;opacity:.8}
.hist{list-style:none;margin:0;padding:0}
.hist-item{display:block;padding:7px 9px;border-radius:var(--r-sm);color:var(--pane-text);text-decoration:none;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-item.is-current{background:var(--pane-current)}
.hist-empty{color:var(--pane-muted);font-size:13px;padding:4px 9px}
.pane-foot{padding:8px 10px 12px;border-top:1px solid var(--pane-line)}
body.pane-mini .pane{width:58px}
body.pane-mini .pane .lbl,body.pane-mini .pane-hist{display:none}
body.pane-mini .pane-top{flex-direction:column}
body.pane-mini .new-chat{flex:none;width:36px;padding:0;justify-content:center}
.scrim{position:fixed;inset:0;background:rgba(8,9,12,.42);z-index:40;animation:fade var(--t-med) var(--ease)}

/* main */
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;background:var(--main-bg)}
.main.drop::after{content:"Drop files to attach";position:absolute;inset:12px;border:2px dashed var(--accent);border-radius:var(--r-lg);display:grid;place-items:center;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--main-bg) 88%,transparent);z-index:20}
.titlebar{display:flex;align-items:center;gap:8px;height:52px;padding:0 16px 0 20px;flex:none;border-bottom:1px solid var(--titlebar-line)}
.page-title{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sample-tag{font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.pane-open,.titlebar-new{display:none}
.scroller{flex:1;min-height:0;overflow-y:auto;overflow-anchor:none;scroll-behavior:auto}
.thread{max-width:var(--thread-w);margin:0 auto;padding:28px 24px 40px}

/* empty screen */
.empty-chat{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 0}
.empty-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--mark-bg);color:var(--accent);margin-bottom:16px}
.empty-mark .ic{width:22px;height:22px}
.empty-chat h2{font-size:var(--fs-hero);font-weight:var(--w-hero);letter-spacing:-.02em;margin:0 0 6px;line-height:1.2}
.empty-chat p{color:var(--muted);margin:0 0 26px}
.suggest{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:620px}
.sug{text-align:left;padding:13px 15px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);color:var(--text);font-size:13.5px;line-height:1.45;box-shadow:var(--sh-1);transition:border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.sug:hover{border-color:var(--line-strong);transform:translateY(-1px);box-shadow:var(--sh-2)}

/* messages */
.msg{margin:0 0 26px;position:relative;animation:rise var(--t-med) var(--ease)}
.msg.user{display:flex;flex-direction:column;align-items:flex-end}
.bubble{max-width:min(78%,560px);background:var(--user-bg);color:var(--user-text);border:1px solid var(--user-line);padding:10px 15px;border-radius:var(--r-bubble);overflow-wrap:anywhere}
.msg-files{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.who{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;margin:0 0 6px;color:var(--text)}
.who .ic{color:var(--accent);width:16px;height:16px}
.acts{display:flex;gap:2px;margin-top:4px;opacity:0;transition:opacity var(--t-fast)}
.msg:hover .acts,.msg:focus-within .acts,.msg.ai:last-child .acts{opacity:1}
.act{display:inline-grid;place-items:center;width:30px;height:30px;border:0;background:transparent;border-radius:8px;color:var(--muted)}
.act:hover{background:var(--hover);color:var(--text)}
.act .ic{width:16px;height:16px}
.act.done{color:var(--accent)}
.stopped{color:var(--muted);font-size:13px;font-style:italic;margin:6px 0 0}

/* the working line */
.work{margin:0 0 10px}
.work-line{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:4px 8px 4px 0;color:var(--muted);font-size:13px;border-radius:8px}
.work-line:hover{color:var(--text)}
.work-line .ic{width:15px;height:15px}
.work-line .chev{transition:transform var(--t-fast)}
.work.open .chev{transform:rotate(180deg)}
.work.live .work-l{background:linear-gradient(90deg,var(--muted) 0%,var(--text) 50%,var(--muted) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 1.6s linear infinite}
.work-steps{display:none;list-style:none;margin:6px 0 4px;padding:0 0 0 7px;border-left:2px solid var(--line)}
.work.open .work-steps{display:block}
.work-steps li{position:relative;padding:3px 0 3px 16px;font-size:13px;color:var(--muted)}
.work-steps li::before{content:"";position:absolute;left:-6px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--main-bg);border:2px solid var(--line-strong)}
.work-steps li.done::before{background:var(--muted);border-color:var(--muted)}
.work-steps li.now::before{border-color:var(--accent)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--accent);animation:spin .8s linear infinite}

/* formatted answers */
.md{overflow-wrap:anywhere}
.md>:first-child{margin-top:0}
.md p{margin:0 0 12px}
.md h3,.md h4,.md h5{margin:20px 0 8px;line-height:1.3;letter-spacing:-.01em}
.md h3{font-size:1.2em}.md h4{font-size:1.05em}
.md ul,.md ol{margin:0 0 12px;padding-left:22px}
.md li{margin:3px 0}
.md li::marker{color:var(--muted)}
.md strong{font-weight:600}
.md a{color:var(--link)}
.md code{font:0.88em/1.5 var(--mono);background:var(--code-inline);border-radius:5px;padding:1px 5px}
.code{margin:6px 0 14px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--code-line);background:var(--code-bg)}
.code-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 14px;font-size:12px;color:var(--code-muted);border-bottom:1px solid var(--code-line)}
.code-copy{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--code-muted);font-size:12px;padding:4px 8px;border-radius:6px}
.code-copy:hover{background:rgba(127,127,127,.15);color:var(--code-text)}
.code-copy .ic{width:14px;height:14px}
.code pre{margin:0;padding:14px;overflow-x:auto}
.code pre code{background:none;padding:0;font-size:12.5px;color:var(--code-text)}
.table-wrap{overflow-x:auto;margin:4px 0 14px;border:1px solid var(--line);border-radius:var(--r-md)}
.md table{border-collapse:collapse;width:100%;font-size:13px}
.md th{text-align:left;font-weight:600;color:var(--muted);background:var(--table-head);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.md td{padding:8px 12px;border-bottom:1px solid var(--line)}
.md tr:last-child td{border-bottom:0}
.caret{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:4px;vertical-align:middle;animation:pulse 1s var(--ease) infinite}

/* editing a sent message */
.msg.editing{align-items:stretch}
.edit-box{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--card);padding:10px;box-shadow:var(--sh-1)}
.edit-ta{width:100%;border:0;background:transparent;resize:none;outline:none;min-height:60px;max-height:320px}
.edit-row{display:flex;justify-content:flex-end;gap:8px}
.btn{height:34px;padding:0 14px;border-radius:var(--r-sm);font-weight:600;font-size:13.5px;border:1px solid transparent}
.btn.primary{background:var(--primary);color:var(--on-primary)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn.ghost:hover{background:var(--hover)}

/* composer */
.jump{position:absolute;left:50%;transform:translateX(-50%);bottom:var(--jump-bottom,150px);display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:12.5px;font-weight:600;box-shadow:var(--sh-2);z-index:5;animation:rise var(--t-fast) var(--ease)}
.jump .ic{width:14px;height:14px}
.composer-wrap{flex:none;padding:0 24px calc(14px + env(safe-area-inset-bottom));max-width:calc(var(--thread-w) + 0px);width:100%;margin:0 auto}
.composer{border:1px solid var(--composer-line);background:var(--composer-bg);border-radius:var(--r-composer);box-shadow:var(--sh-composer);padding:8px 8px 8px 14px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.composer:focus-within{border-color:var(--composer-focus);box-shadow:var(--sh-composer-focus)}
.composer textarea{display:block;width:100%;border:0;outline:none;background:transparent;resize:none;padding:6px 4px 4px 0;min-height:28px;max-height:240px;line-height:1.55;font-size:var(--fs-input)}
.composer textarea::placeholder{color:var(--placeholder)}
.composer-row{display:flex;align-items:center;gap:4px;margin-left:-6px}
.composer-row .grow{flex:1}
.composer .icon-btn{color:var(--muted)}
.composer .icon-btn:hover{color:var(--text)}
.send{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-send);border:0;background:var(--send-bg);color:var(--send-text);transition:background var(--t-fast),transform var(--t-fast),opacity var(--t-fast)}
.send:hover:not(:disabled){transform:scale(1.04)}
.send:disabled{background:var(--send-off);color:var(--send-off-text);cursor:default}
.is-busy .send{background:var(--text);color:var(--bg)}
.mic[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)!important;border-radius:var(--r-send)}
.is-listening .composer{border-color:var(--accent)}
.voice-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;color:var(--muted);padding:2px 0 6px}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.2s infinite}
.vtime{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.vmsg{flex:1;min-width:140px}
.vsil{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.vsil input{accent-color:var(--accent);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips:not(:empty){padding:2px 0 8px}
.chip{display:inline-flex;align-items:center;gap:6px;max-width:240px;height:30px;padding:0 4px 0 9px;border-radius:8px;background:var(--chip-bg);border:1px solid var(--line);font-size:12.5px}
.chip .ic{width:14px;height:14px;color:var(--muted)}
.chip-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-s{color:var(--muted);white-space:nowrap}
.chip button{display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.chip button:hover{background:var(--hover)}
.msg-files .chip{padding-right:9px;background:transparent}
.fine{text-align:center;font-size:11.5px;color:var(--muted);padding:8px 0 0}

/* phone */
@media (max-width:760px){
  .pane{position:fixed;top:0;bottom:0;left:0;width:min(84vw,300px);z-index:50;transform:translateX(-102%);transition:transform var(--t-med) var(--ease);box-shadow:var(--sh-3)}
  body.pane-open .pane{transform:none}
  body.pane-mini .pane{width:min(84vw,300px)}
  body.pane-mini .pane .lbl,body.pane-mini .pane-hist{display:revert}
  body.pane-mini .pane-top{flex-direction:row}
  body.pane-mini .new-chat{flex:1;width:auto;padding:0 12px;justify-content:flex-start}
  .pane-collapse .ic{transform:scaleX(-1)}
  .pane-open,.titlebar-new{display:inline-grid}
  .titlebar{padding:0 6px;height:48px}
  .page-title{text-align:left;font-size:16px;padding-left:2px}
  .sample-tag{display:none}
  .thread{padding:18px 16px 16px}
  .composer-wrap{padding:0 10px calc(8px + env(safe-area-inset-bottom))}
  .composer textarea{font-size:16px}
  .suggest{grid-template-columns:1fr}
  .empty-chat{min-height:44vh}
  .bubble{max-width:88%}
  .acts{opacity:1}
  .fine{display:none}
  .jump{bottom:110px}
}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* accent picker: each colour has its name and a check when chosen, so colour never carries the meaning alone */
.accents{display:flex;flex-wrap:wrap;gap:6px;padding:4px 9px 8px}
.accents-h{width:100%;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pane-muted);opacity:.8;padding:4px 0 2px}
.sw{position:relative;width:26px;height:26px;border-radius:50%;border:2px solid var(--pane-bg);box-shadow:0 0 0 1px var(--pane-line);background:var(--sw);display:grid;place-items:center;padding:0;color:var(--sw-on)}
.sw .ic{width:14px;height:14px;opacity:0}
.sw[aria-checked="true"]{box-shadow:0 0 0 2px var(--pane-text)}
.sw[aria-checked="true"] .ic{opacity:1}
.accent-name{width:100%;font-size:12.5px;color:var(--pane-text);padding-top:2px}
body.pane-mini .accents{display:none}
@media (max-width:760px){body.pane-mini .accents{display:flex}}

/* ---------- pages: Settings, Admin and the empty page ---------- */
:root[data-size=large]{--fs-body:17px;--fs-input:17px}
.pageview{flex:1;min-height:0;overflow-y:auto}
.page{max-width:760px;margin:0 auto;padding:12px 24px 48px;display:flex;flex-direction:column;gap:var(--gap)}
.page-lede{color:var(--muted);margin:0}
.set-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 20px 8px;box-shadow:var(--sh-1)}
.set-card h2{font-size:16px;font-weight:600;margin:14px 0 2px}
.set-intro{color:var(--muted);font-size:13.5px;margin:0 0 4px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 0;border-top:1px solid var(--line)}
.set-card h2+.set-row,.set-intro+.set-row{border-top:0}
.set-block{padding:14px 0;border-top:1px solid var(--line)}
.set-card h2+.set-block,.set-intro+.set-block{border-top:0}
.set-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.set-name{font-weight:600;font-size:14px}
.set-help{color:var(--muted);font-size:13px;line-height:1.45}
.set-control{flex:none}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--s-pane,var(--hover));border:1px solid var(--line);gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;border-radius:7px;padding:6px 12px;font-size:13.5px;font-weight:500;color:var(--muted)}
.seg button:hover{color:var(--text)}
.seg button[aria-checked=true]{background:var(--card);color:var(--text);font-weight:600;box-shadow:var(--sh-1),0 0 0 1px var(--line)}
.switch{display:inline-flex;align-items:center;gap:10px;border:0;background:transparent;padding:4px;color:var(--text);font-size:13px;font-weight:600}
.switch .knob{position:relative;width:40px;height:24px;border-radius:999px;background:var(--line-strong);transition:background var(--t-fast)}
.switch .knob::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--t-fast) var(--ease)}
.switch[aria-checked=true] .knob{background:var(--accent)}
.switch[aria-checked=true] .knob::after{transform:translateX(16px)}
.sw-word{min-width:24px;text-align:left}
.select{font:inherit;font-size:13.5px;color:var(--text);background:var(--card);border:1px solid var(--line-strong);border-radius:8px;padding:7px 30px 7px 10px;max-width:260px}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.tile{display:flex;flex-direction:column;gap:6px;align-items:stretch;border:0;background:transparent;padding:0;text-align:left;color:var(--text)}
.tile:disabled{opacity:.45;cursor:not-allowed}
.tile-swatch{position:relative;height:56px;border-radius:10px;background:var(--t2);box-shadow:inset 0 0 0 1px rgba(20,24,32,.14)}
.tile[aria-checked=true] .tile-swatch{box-shadow:inset 0 0 0 1px rgba(20,24,32,.14),0 0 0 2px var(--card),0 0 0 4px var(--text)}
.tile-check{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--text);color:var(--bg);display:none;place-items:center}
.tile-check .ic{width:14px;height:14px}
.tile[aria-checked=true] .tile-check{display:grid}
.tile-name{font-size:13px;font-weight:500}
.tile[aria-checked=true] .tile-name{font-weight:700}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--s-user,var(--hover));font-size:13.5px}
.note .ic{color:var(--accent);margin-top:1px}
.tbl{border-collapse:collapse;width:100%;font-size:13.5px;min-width:520px}
.tbl th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl .muted{color:var(--muted)}
.set-card .table-wrap{border:0;margin:6px 0 8px}
.badge{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--s-user,var(--hover));color:var(--text)}
.badge.strong{background:var(--text);color:var(--bg)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:8px 0 12px}
.stat{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.stat-l{font-size:12px;color:var(--muted)}
.stat-v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.page-foot{display:flex;justify-content:flex-end}
.empty-page{text-align:center;padding:12vh 0;display:flex;flex-direction:column;align-items:center}
.empty-page h2{margin:0 0 6px;font-size:22px}
.empty-page p{color:var(--muted);margin:0;max-width:420px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--text);color:var(--bg);font-size:13.5px;font-weight:600;box-shadow:var(--sh-2);z-index:60;pointer-events:none;transition:opacity var(--t-med),transform var(--t-med) var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .ic{width:16px;height:16px}
body.on-page .sample-tag{display:none}
@media (max-width:760px){
  .page{padding:12px 16px 40px}
  .set-row{flex-direction:column;align-items:flex-start}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .seg{width:100%;flex-wrap:nowrap}.seg button{flex:1 1 auto;white-space:nowrap;padding:7px 8px}
}

/* ---- common.css ---- */
:root{--font:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;--mono:ui-monospace,"SFMono-Regular","Cascadia Code",Consolas,Menlo,monospace;--ember:#FF7A1A;--link:#0869C7;
--t-fast:120ms;--t-med:220ms;--ease:cubic-bezier(.2,.7,.2,1);--pane-w:264px;--fs-title:15px;--gap:16px;--accent:#FF7A1A;--on-accent:#1A0E05}
:root[data-theme=dark]{--link:#479EF5}


/* ---- standard.css ---- */

/* Babco Labs standard chat look. One layout; each person picks a colour scheme that changes the whole screen.
   Schemes keep to the blue-yellow axis and to neutrals with no red cast, and every scheme is named in words. */
:root{--thread-w:760px;--fs-body:15px;--fs-input:15px;--fs-hero:28px;--w-hero:600;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-bubble:18px;--r-composer:22px;--r-send:50%;
--text:#15171C;--muted:#5F6570;--placeholder:#9A9FA8;
--s-bg:#FFFFFF;--s-pane:#F6F7F8;--s-card:#FFFFFF;--s-user:#EFF1F4;--s-line:#E6E8EB;--s-strong:#D2D5DB;--accent:#FF7A1A;--on-accent:#1A0E05}
:root[data-theme=dark]{--text:#ECEEF2;--muted:#A3A9B4;--placeholder:#6D737D;
--s-bg:#16171A;--s-pane:#111214;--s-card:#1E1F23;--s-user:#27292E;--s-line:#2A2C31;--s-strong:#3B3E44;--accent:#FF8A33;--on-accent:#1A0E05}
:root{--bg:var(--s-bg);--main-bg:var(--s-bg);--line:var(--s-line);--line-strong:var(--s-strong);--card:var(--s-card);--hover:color-mix(in srgb,var(--text) 6%,transparent);
--pane-bg:var(--s-pane);--pane-text:var(--text);--pane-muted:var(--muted);--pane-line:var(--s-line);--pane-hover:color-mix(in srgb,var(--text) 6%,transparent);--pane-current:var(--s-user);--newchat-bg:var(--s-card);--titlebar-line:transparent;
--user-bg:var(--s-user);--user-line:transparent;--user-text:var(--text);--mark-bg:color-mix(in srgb,var(--accent) 14%,transparent);--chip-bg:var(--s-pane);
--composer-bg:var(--s-card);--composer-line:var(--s-line);--composer-focus:var(--s-strong);--sh-composer:0 1px 2px rgba(20,24,32,.04),0 10px 30px -12px rgba(20,24,32,.16);--sh-composer-focus:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),0 12px 32px -12px rgba(20,24,32,.2);
--send-bg:var(--accent);--send-text:var(--on-accent);--send-off:var(--s-user);--send-off-text:var(--placeholder);--primary:var(--accent);--on-primary:var(--on-accent);
--code-bg:#17181C;--code-text:#E8EAEE;--code-muted:#9AA0AA;--code-line:#2A2C31;--code-inline:var(--s-pane);--table-head:var(--s-pane);
--sh-1:0 1px 2px rgba(20,24,32,.05);--sh-2:0 6px 18px -6px rgba(20,24,32,.18);--sh-3:0 24px 60px -12px rgba(0,0,0,.35)}
:root[data-theme=dark]{--sh-composer:0 10px 30px -12px rgba(0,0,0,.6);--sh-composer-focus:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);--code-bg:#0E0F12;--sh-1:none;--sh-2:0 6px 18px -6px rgba(0,0,0,.6)}
.nav-item.is-current .ic{color:var(--accent)}
.sw{background:var(--sw);box-shadow:inset 0 0 0 7px var(--sw),inset 0 0 0 20px var(--sw-on),0 0 0 1px var(--line-strong)}
.sw[aria-checked="true"]{background:var(--sw-on);box-shadow:0 0 0 2px var(--pane-bg),0 0 0 4px var(--pane-text)}
.sw .ic{color:#fff}
:root[data-scheme=paper]{--s-bg:#FAF8F5;--s-pane:#F3EFE9;--s-card:#FFFFFF;--s-user:#EFEAE2;--s-line:#E8E3DB;--s-strong:#D6CFC4;--accent:#FF7A1A;--on-accent:#1A0E05}
:root[data-theme=dark][data-scheme=paper]{--s-bg:#1C1B19;--s-pane:#161513;--s-card:#252320;--s-user:#2D2B27;--s-line:#2F2D29;--s-strong:#423F39;--accent:#FF8A33;--on-accent:#1A0E05}
:root[data-scheme=light-paper]{--s-bg:#FDFCFA;--s-pane:#F8F6F2;--s-card:#FFFFFF;--s-user:#F3F0EA;--s-line:#ECE8E1;--s-strong:#DCD6CC;--accent:#FF7A1A;--on-accent:#1A0E05}
:root[data-theme=dark][data-scheme=light-paper]{--s-bg:#1B1B1A;--s-pane:#151514;--s-card:#232220;--s-user:#2B2A27;--s-line:#2D2C29;--s-strong:#3F3D39;--accent:#FF8A33;--on-accent:#1A0E05}
:root[data-scheme=slate]{--s-bg:#F5F7F9;--s-pane:#EAEEF3;--s-card:#FFFFFF;--s-user:#DEE4ED;--s-line:#D9DDE3;--s-strong:#BDC3CC;--accent:#2F5D9A;--on-accent:#fff}
:root[data-theme=dark][data-scheme=slate]{--s-bg:#17191C;--s-pane:#111315;--s-card:#1F2226;--s-user:#2B3138;--s-line:#2B2D31;--s-strong:#3E4247;--accent:#86AEE6;--on-accent:#0A131F}
:root[data-scheme=sky]{--s-bg:#F1F6FE;--s-pane:#E0EDFD;--s-card:#FFFFFF;--s-user:#D0E3FB;--s-line:#CEDCED;--s-strong:#AEC1DB;--accent:#1F6FEB;--on-accent:#fff}
:root[data-theme=dark][data-scheme=sky]{--s-bg:#111822;--s-pane:#0D1219;--s-card:#19212C;--s-user:#1F2F45;--s-line:#242D38;--s-strong:#354050;--accent:#5B9BFA;--on-accent:#0A131F}
:root[data-scheme=ocean]{--s-bg:#E6F3FB;--s-pane:#D7EBF9;--s-card:#FFFFFF;--s-user:#C7E3F7;--s-line:#C7DAE8;--s-strong:#A8C2D4;--accent:#0B5CAD;--on-accent:#fff}
:root[data-theme=dark][data-scheme=ocean]{--s-bg:#141D24;--s-pane:#0F171C;--s-card:#1C262E;--s-user:#233746;--s-line:#27323A;--s-strong:#384751;--accent:#4DA3F5;--on-accent:#0A161F}
:root[data-scheme=lavender]{--s-bg:#F4F2FD;--s-pane:#E8E2FB;--s-card:#FFFFFF;--s-user:#DCD2F9;--s-line:#D7D0EC;--s-strong:#BAB1D8;--accent:#6E56CF;--on-accent:#fff}
:root[data-theme=dark][data-scheme=lavender]{--s-bg:#161221;--s-pane:#100E19;--s-card:#1E1A2B;--s-user:#292143;--s-line:#292537;--s-strong:#3C364E;--accent:#A393FF;--on-accent:#0F0A1F}
:root[data-scheme=butter]{--s-bg:#FDFCF2;--s-pane:#FBF8E2;--s-card:#FFFFFF;--s-user:#F9F4D2;--s-line:#ECE8D0;--s-strong:#D8D3B1;--accent:#A0670A;--on-accent:#fff}
:root[data-theme=dark][data-scheme=butter]{--s-bg:#211F12;--s-pane:#19170E;--s-card:#2B281A;--s-user:#433E21;--s-line:#373425;--s-strong:#4E4B36;--accent:#E3AC3E;--on-accent:#1F1C0A}
:root[data-scheme=sea]{--s-bg:#F4FBFB;--s-pane:#E7F6F6;--s-card:#FFFFFF;--s-user:#DAF1F1;--s-line:#D6E6E6;--s-strong:#B8D0D0;--accent:#0E7F81;--on-accent:#fff}
:root[data-theme=dark][data-scheme=sea]{--s-bg:#151E1E;--s-pane:#101616;--s-card:#1D2727;--s-user:#283C3C;--s-line:#293333;--s-strong:#3B4949;--accent:#3CC6C3;--on-accent:#0A1F1F}
:root[data-scheme=graphite]{--s-bg:#F0F1F2;--s-pane:#E6E7EA;--s-card:#FFFFFF;--s-user:#DDDEE2;--s-line:#D6D7D9;--s-strong:#BCBDC0;--accent:#3B414D;--on-accent:#fff}
:root[data-theme=dark][data-scheme=graphite]{--s-bg:#1B1C1D;--s-pane:#151516;--s-card:#242526;--s-user:#323436;--s-line:#2F3031;--s-strong:#444446;--accent:#D3D7DE;--on-accent:#0A111F}

/* ---- blocks.css ---- */
/* Babco Labs Theme Pack: the building blocks — buttons, fields, voice boxes, status words, menus, dialogs, cards,
   figures, tabs, chips, tables, the track sheet, record pages, the timeline, answer blocks, edit layout and the grouped
   left navigation. Every color comes from the look's tokens, so all ten colors and both modes work.
   Status is always a word and an icon. */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.mono{font-family:var(--mono);font-size:.93em;letter-spacing:-.01em}
.b{font-weight:600}
.grow{flex:1}
kbd{font:600 11px/1 var(--font);padding:3px 6px;border-radius:5px;border:1px solid var(--line-strong);background:var(--card);color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;text-decoration:none}
.btn .ic{width:16px;height:16px}
.btn.sm{height:30px;padding:0 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary:hover:not(:disabled){filter:brightness(1.06)}
.icon-btn.sm{width:28px;height:28px}
.link-btn{border:0;background:none;color:var(--link);font-size:13px;font-weight:600;padding:2px 4px;cursor:pointer}
.row-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:10px}
.row-btns.left{justify-content:flex-start}
.count{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--s-user);font-size:11.5px;font-weight:700;text-align:center;line-height:18px;color:var(--text)}
.tagw{font-size:11.5px;font-weight:600;border:1px dashed var(--line-strong);border-radius:999px;padding:1px 8px;color:var(--muted);white-space:nowrap}
/* pane: one scroll for the long menu; the company switcher sits under New chat */
.pane{overflow-y:auto;overscroll-behavior:contain}
.pane-hist{flex:none;overflow:visible;min-height:0}
.pane-foot{margin-top:auto;position:sticky;bottom:0;background:var(--pane-bg);z-index:1}
.pane-nav{gap:1px}
.pane .nav-item{height:34px}
@media (max-width:760px){body[data-view]:not([data-view=chat]) .titlebar-new{display:none}}
/* menus and dialogs, built into the page */
.pop{position:fixed;z-index:80;min-width:220px;max-width:min(360px,calc(100vw - 16px));max-height:min(70vh,520px);overflow:auto;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2),0 18px 40px -16px rgba(0,0,0,.3);padding:6px;animation:rise var(--t-fast) var(--ease)}
.pop.pop-wide{min-width:300px}
.pop-h{font-size:12.5px;font-weight:700;padding:8px 10px 4px}
.pop-h.sub{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px;padding-top:4px}
.pop-h.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pop-i{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;border-radius:8px;padding:8px 10px;text-align:left;font-size:13.5px}
.pop-i:hover{background:var(--hover)}
.pop-i[aria-checked=true]{font-weight:700}
.pop-note{font-size:12px;color:var(--muted);padding:6px 10px 6px;border-top:1px solid var(--line);margin-top:4px}
.modal-wrap{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
.modal-scrim{position:absolute;inset:0;background:rgba(8,9,12,.46);animation:fade var(--t-med) var(--ease)}
.modal{position:relative;width:min(480px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:var(--card);color:var(--text);border-radius:var(--r-lg);box-shadow:var(--sh-3);animation:rise var(--t-med) var(--ease)}
.modal.wide{width:min(720px,100%)}
.modal.full{width:min(1100px,100%);height:calc(100dvh - 32px)}
.modal-h{display:flex;align-items:center;gap:8px;padding:12px 12px 8px 20px}
.modal-h h2{flex:1;margin:0;font-size:16px;font-weight:600}
.modal-b{padding:4px 20px 16px;overflow:auto;flex:1}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--line)}
.confirm-text{margin:0}
.blk-full .chart{min-height:420px}
pre.cr{max-height:52vh;overflow:auto;background:var(--code-bg);color:var(--code-text);border-radius:var(--r-md);padding:14px;font:12.5px/1.5 var(--mono);margin:8px 0 0}
@media (max-width:760px){.modal-wrap{padding:0;place-items:end stretch}
.modal,.modal.wide,.modal.full{width:100%;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0}
.modal.full{height:92dvh}}
/* status: a word and an icon; colour never carries the meaning */
.st{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;line-height:1.3;padding:2px 9px 2px 6px;border-radius:999px;background:var(--s-pane);border:1px solid var(--line);white-space:nowrap;color:var(--text);vertical-align:middle}
.st .ic{width:14px;height:14px}
.st-done{background:transparent}
.st-move .ic{color:var(--accent)}
.st-attn{border:1.5px solid var(--text);background:var(--card);font-weight:700}
.st-stop{border:1.5px dashed var(--text);background:var(--card);font-weight:700}
.st-none{background:transparent;border-color:transparent;padding-left:0;font-weight:500}
.ex-tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;vertical-align:middle;white-space:nowrap}
.ex-tag .ic{width:12px;height:12px}
.hidden-price{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12.5px}
.hidden-price .ic{width:13px;height:13px}
/* pages */
.page.wide{max-width:1240px}
.page.full{max-width:none;padding:12px 20px 32px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.page-head p{margin:0}
.hello{margin:0 0 2px;font-size:var(--fs-hero);font-weight:var(--w-hero);letter-spacing:-.02em;line-height:1.2}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 18px 16px;box-shadow:var(--sh-1);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.card-h h3{margin:0;font-size:15px;font-weight:600;flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid2.inner{gap:12px}
.grid2.wide-l{grid-template-columns:1fr 1fr}
.col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.ai-sum{display:flex;gap:14px;padding:16px 18px;border-radius:var(--r-lg);background:var(--s-user);border:1px solid var(--line)}
.ai-sum.sm{padding:10px 14px;margin:12px 0}
.ai-sum p{margin:2px 0 0}
.ai-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--card);color:var(--accent)}
.ai-h{font-weight:700;font-size:13.5px}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.kpi{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);color:var(--text);text-decoration:none;box-shadow:var(--sh-1);transition:border-color var(--t-fast),transform var(--t-fast)}
.kpi:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.kpi-l{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.kpi-l .ic{width:15px;height:15px}
.kpi-v{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi-n{font-size:12.5px;color:var(--muted)}
.needs{list-style:none;margin:0;padding:0}
.needs li{border-top:1px solid var(--line)}
.needs li:first-child{border-top:0}
.needs a{display:flex;align-items:center;gap:10px;padding:9px 2px;color:var(--text);text-decoration:none}
.needs a:hover .nt{text-decoration:underline}
.needs .nt{flex:1;min-width:0;font-size:13.5px}
.needs a>.ic{color:var(--muted)}
.pin{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.pin-h{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:6px;font-size:13.5px}
.chart{width:100%;min-height:60px}
.chart-svg{display:block;overflow:visible}
.chart-svg .grid{stroke:var(--line);stroke-width:1}
.chart-svg .ax{fill:var(--muted);font:11.5px var(--font)}
.chart-svg .lab{fill:var(--text);font:600 12px var(--font)}
.chart-svg .val{fill:var(--muted);font:600 11.5px var(--font)}
.chart-svg .bar{fill:var(--accent);opacity:.9}
.chart-svg .bar-alt{fill:var(--muted)}
.chart-svg .bar-now{fill:var(--text)}
.state-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 16px}
.state-empty h3{margin:0 0 4px;font-size:16px}
.state-empty p{margin:0 0 14px;color:var(--muted);max-width:440px}
.state-empty .empty-mark{margin-bottom:12px}
.state-error .empty-mark{background:var(--s-user);color:var(--text)}
.skel{background:linear-gradient(90deg,var(--s-pane) 0%,var(--s-user) 50%,var(--s-pane) 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:var(--r-md);height:84px}
.skel-h{height:34px;width:40%}
.skel-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.skel-big{height:220px}
.tabs{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--s-pane);border:1px solid var(--line)}
.tab{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;border-radius:7px;padding:6px 12px;font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.tab .ic{width:15px;height:15px}
.tab[aria-selected=true]{background:var(--card);color:var(--text);font-weight:600;box-shadow:var(--sh-1),0 0 0 1px var(--line)}
.chips-row{display:flex;gap:6px;flex-wrap:wrap}
.chipbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:500;color:var(--text);white-space:nowrap}
.chipbtn .ic{width:14px;height:14px}
.chipbtn:hover{border-color:var(--line-strong)}
.chipbtn[aria-selected=true]{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
.chipbtn[aria-selected=true] .count{background:var(--bg);color:var(--text)}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar.tight{padding:0 0 8px}
.toolbar .vbox.one{flex:0 1 300px}
.fsel select,.f-in{font:inherit;font-size:13.5px;color:var(--text);background:var(--card);border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;height:34px;max-width:240px}
.f-in{width:100%;max-width:none}
textarea.f-in{height:auto}
.f-l{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;margin:0 0 12px}
.f-l>.f-in,.f-l>select{font-weight:400}
.f-err{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:1.5px solid var(--text);font-size:13.5px;font-weight:600;margin:4px 0}
.with-btn{display:flex;gap:8px}
.with-btn .f-in{flex:1}
.f-set{border:1px solid var(--line);border-radius:var(--r-md);padding:6px 12px 8px;margin:0 0 12px}
.f-set legend{font-size:13px;font-weight:600;padding:0 4px}
.yn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.yn:first-of-type{border-top:0}
.note{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:var(--r-md);background:var(--s-user);font-size:13.5px}
.note .ic{color:var(--accent);margin-top:1px;flex:none}
.note.attn{border:1.5px solid var(--text);background:var(--card)}
.note.attn .ic{color:var(--text)}
/* voice in every text box */
.vbox{position:relative;display:flex;flex-direction:column;min-width:0}
.vbox textarea,.vbox input{font:inherit;font-size:14px;font-weight:400;color:var(--text);background:var(--card);border:1px solid var(--line-strong);border-radius:10px;padding:8px 44px 8px 12px;width:100%;resize:vertical;line-height:1.5}
.vbox.one input{height:34px;padding:4px 40px 4px 12px;border-radius:999px}
.vbox textarea:focus,.vbox input:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:0;border-color:var(--line-strong)}
.vbox-mic{position:absolute;right:5px;top:5px;width:32px;height:32px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--muted)}
.vbox.one .vbox-mic{top:1px;width:32px;height:32px}
.vbox-mic:hover{background:var(--hover);color:var(--text)}
.vbox-mic.on{background:var(--accent);color:var(--on-accent)}
.vbox-bar{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:6px 2px 0;flex-wrap:wrap}
.vbox-bar .vb-msg{flex:1;min-width:140px}
/* track sheet */
.ph-note{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13px;color:var(--muted)}
.ph-note .ic{width:16px;height:16px;flex:none;margin-top:2px;color:var(--text)}
.bulk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;border-radius:var(--r-md);border:1.5px solid var(--text);background:var(--card);font-size:13.5px}
.bulk label{display:inline-flex;align-items:center;gap:6px}
.bulk select{font:inherit;font-size:13px;padding:4px 8px;border-radius:7px;border:1px solid var(--line-strong);background:var(--card);color:var(--text)}
.grid-wrap{overflow:auto;max-height:calc(var(--vvh,100dvh) - 300px);min-height:280px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.sheet{border-collapse:separate;border-spacing:0;font-size:13px;width:max-content;min-width:100%}
.sheet th{position:sticky;top:0;z-index:2;background:var(--table-head);text-align:left;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line-strong);padding:0;white-space:nowrap}
.th-b{display:flex;align-items:center;gap:4px;width:100%;border:0;background:transparent;padding:8px 10px;font:inherit;color:inherit;text-decoration:underline dotted var(--line-strong);text-underline-offset:4px}
.th-b .ic{width:13px;height:13px;color:var(--text)}
th[aria-sort=ascending] .th-b,th[aria-sort=descending] .th-b{color:var(--text)}
.sheet td{padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card);position:relative;height:38px}
.sheet td.num,.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.sheet .fz{position:sticky;z-index:1}
.sheet th.fz{z-index:3}
.sheet .ck{width:40px;min-width:40px;max-width:40px;text-align:center;padding:0}
.sheet td[data-f=id]{min-width:132px;max-width:132px}
.sheet .fz-last{box-shadow:inset -1px 0 0 var(--line-strong)}
.sheet tr:hover td{background:color-mix(in srgb,var(--card) 92%,var(--text))}
.sheet tr.is-sel td{background:var(--s-user)}
.sheet input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.sheet td.ed{cursor:text;padding-right:44px}
.ed-ic{position:absolute;right:24px;top:50%;transform:translateY(-50%);opacity:0;color:var(--muted)}
.ed-ic .ic{width:13px;height:13px}
.sheet td.ed:hover .ed-ic,.sheet td.ed:focus .ed-ic{opacity:1}
.sheet td.ed:focus{outline:2px solid var(--accent);outline-offset:-2px}
.hist-b{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:0;border-radius:5px;background:transparent;color:var(--muted);display:grid;place-items:center;padding:0}
.hist-b .ic{width:13px;height:13px}
.hist-b:hover{background:var(--hover);color:var(--text)}
.cell-ed{font:inherit;font-size:13px;width:100%;min-width:110px;padding:4px 6px;border:1.5px solid var(--accent);border-radius:6px;background:var(--card);color:var(--text)}
.sheet-cards{display:none;list-style:none;margin:0;padding:0;flex-direction:column;gap:8px}
.sheet-cards a,.bcard{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--text);text-decoration:none}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.sc-l{font-size:13px;color:var(--muted)}
.sc-a{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;font-weight:600}
.sc-a .ic{width:14px;height:14px;flex:none}
.board{display:grid;grid-template-columns:repeat(7,minmax(200px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px}
.lane{background:var(--s-pane);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;min-height:300px;display:flex;flex-direction:column}
.lane h3{display:flex;align-items:center;gap:6px;justify-content:space-between;margin:2px 2px 8px;font-size:13px}
.lane.over{outline:2px dashed var(--text);outline-offset:-3px}
.lane-b{display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:calc(var(--vvh,100dvh) - 330px)}
.bcard{padding:9px 10px;cursor:grab}
.bcard.dragging{opacity:.5}
.bcard a{color:var(--text);font-weight:600}
.lane-empty{color:var(--muted);font-size:13px;text-align:center;margin:20px 0}
/* record pages */
.rec-head{display:flex;flex-direction:column;gap:6px}
.rec-head p{margin:0}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;width:fit-content}
.back:hover{color:var(--text)}
.back .ic{width:15px;height:15px}
.rh-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rh-row h2{margin:0;font-size:22px;letter-spacing:-.01em}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0}
.kv div{min-width:0}
.kv dt{font-size:12px;color:var(--muted);font-weight:600}
.kv dd{margin:1px 0 0;font-size:13.5px;overflow-wrap:anywhere}
.docs{list-style:none;margin:0;padding:0}
.docs li{display:grid;grid-template-columns:18px 1fr auto auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.docs li:first-child{border-top:0}
.docs .ic{color:var(--muted)}
.dn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
a.dn{text-decoration:none}
a.dn:hover{text-decoration:underline}
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:0}
.tl li{position:relative;display:flex;flex-direction:column;gap:2px;padding:30px 8px 4px 0;font-size:13px}
.tl li .ic{position:absolute;top:0;left:0;width:20px;height:20px;background:var(--card);z-index:1}
.tl li::before{content:"";position:absolute;top:10px;left:20px;right:0;height:2px;background:var(--line-strong)}
.tl li:last-child::before{display:none}
.tl li.tl-done::before{background:var(--text)}
.tl-done .ic{color:var(--text)}
.tl-now .ic{color:var(--accent)}
.tl-next .ic{color:var(--muted)}
.tl-s{font-weight:600}
.tl-now .tl-s{font-weight:800}
.tl-w{font-size:12px;color:var(--muted)}
.act-l{list-style:none;margin:10px 0 0;padding:0}
.act-l li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.cmt{background:var(--s-user);border-radius:10px;padding:6px 10px;margin:4px 0;white-space:pre-wrap}
.av{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;color:#fff;font-size:12.5px;font-weight:700}
.av.sm{width:28px;height:28px;font-size:11px}
.tbl.rows tr.link-row,.tbl tr.link-row{cursor:pointer}
.tbl tr.link-row:hover td{background:var(--hover)}
.tbl.dense td{padding:6px 10px}
.tbl tr.tot td{font-weight:700;border-top:2px solid var(--line-strong)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pcard{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);color:var(--text);text-decoration:none}
.pcard:hover{border-color:var(--line-strong)}
.pc-top{display:flex;gap:10px;align-items:center}
.pc-l{font-size:13px;color:var(--muted)}
.ph{margin:0;display:flex;flex-direction:column;gap:4px}
.ph svg{width:100%;height:auto;border-radius:10px;display:block}
.ph figcaption{font-size:12.5px;color:var(--muted)}
.ph.big svg{max-height:70vh}
.mail-body{white-space:normal;font-size:14px;line-height:1.6}
.mail-body.big{margin:10px 0 14px}
.mailprev{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;display:flex;flex-direction:column;gap:4px;font-size:13.5px;background:var(--bg);margin-top:8px}
.mailprev .mail-body{margin-top:6px;font-size:13.5px}
.phone-only{display:none}
/* chat blocks */
.blks{display:flex;flex-direction:column;gap:12px;margin:4px 0 10px}
.blk{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden;box-shadow:var(--sh-1)}
.blk-h{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.blk-h>.ic{width:16px;height:16px;color:var(--muted)}
.blk-t{font-weight:600}
.blk-a{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:600}
.blk-a:hover{background:var(--hover);color:var(--text)}
.blk-a .ic{width:14px;height:14px}
.blk-pinned{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:0 8px}
.blk-pinned .ic{width:14px;height:14px}
.blk-b{padding:12px 14px}
.blk-table .blk-b{padding:0}
.blk-table .table-wrap{border:0;margin:0;border-radius:0}
.blk-more{font-size:12.5px;color:var(--muted);padding:8px 14px;border-top:1px solid var(--line)}
.rec-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.rec .kv{margin-bottom:12px}
.appr.done>p{margin:8px 0}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.frm .f-err,.frm .row-btns{grid-column:1/-1}
.frm.done{display:flex;align-items:center;gap:10px;font-size:13.5px}
.srcs{margin:0;padding-left:20px;font-size:13.5px}
.srcs li{margin:3px 0}
.srcs a{color:var(--link)}
.blk-image .ph{max-width:420px}
/* edit layout */
body.editing-layout #app{cursor:crosshair}
body.editing-layout #app *{cursor:crosshair!important}
.el-box,.el-hov{position:fixed;pointer-events:none;z-index:70;border-radius:4px}
.el-box{outline:2px solid var(--accent);outline-offset:1px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.el-hov{outline:1.5px dashed var(--text);outline-offset:1px}
.el-box span,.el-hov span{position:absolute;left:-2px;top:-22px;font:600 11px var(--mono);background:var(--text);color:var(--bg);padding:2px 6px;border-radius:4px;white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis}
.el-hov span{opacity:.85}
.el-panel{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:75;width:min(860px,calc(100vw - 24px));background:var(--card);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:10px 14px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.el-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.el-h b{display:inline-flex;align-items:center;gap:6px}
.el-sel{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.el-id{font:600 12.5px var(--mono);background:var(--s-user);padding:2px 8px;border-radius:6px;overflow-wrap:anywhere}
.el-ctl{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.el-g{display:inline-flex;align-items:center;gap:6px}
.el-l{font-weight:600;color:var(--muted);font-size:12.5px}
.el-v{min-width:44px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.el-panel .icon-btn{border:1px solid var(--line);font-weight:700}
.el-panel .seg button{padding:4px 9px;font-size:12.5px}
/* narrower screens */
@media (max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){.grid2,.grid2.wide-l{grid-template-columns:1fr}}
@media (max-width:760px){.page.full{padding:10px 12px 28px}
.kpis{grid-template-columns:repeat(2,1fr);gap:8px}
.kpi{padding:10px 12px}
.kpi-v{font-size:22px}
.page-head{align-items:stretch;flex-direction:column}
.filters .seg{width:100%}
.filters{flex-direction:column}
.tabs{width:100%;overflow-x:auto}
.tab{flex:1 1 auto;justify-content:center}
.grid-wrap{display:none}
.sheet-cards{display:flex}
.toolbar .vbox.one{flex:1 1 100%}
.toolbar .fsel{flex:1 1 30%}
.fsel select{max-width:none;width:100%}
.toolbar .btn.sm{flex:0 0 auto}
.board{grid-template-columns:repeat(7,82vw);scroll-snap-type:x mandatory}
.lane{scroll-snap-align:start}
.kv{grid-template-columns:1fr 1fr}
.tl{grid-template-columns:1fr;gap:0}
.tl li{padding:0 0 12px 30px}
.tl li::before{top:20px;left:9px;right:auto;width:2px;height:calc(100% - 20px)}
.rh-row h2{font-size:19px}
.phone-only{display:inline-flex}
.frm{grid-template-columns:1fr}
.el-panel{bottom:8px;padding:8px 10px}
.yn{flex-direction:column;align-items:flex-start}
.yn .seg{width:auto}}
@media print{.pane,.titlebar,babco-header,.back,.row-btns,.toast{display:none!important}
body{overflow:visible}
.shell{position:static;height:auto}
.pageview{overflow:visible}}
.sheet a.mono{color:var(--text);font-weight:600;text-decoration:none}
.sheet a.mono:hover{text-decoration:underline}
.toolbar .vbox.one{flex:0 1 270px}
.toolbar .fsel select{max-width:160px}
.page a{color:var(--link)}
.page a.kpi,.page a.pcard,.page .needs a,.page .sheet-cards a,.page a.dn,.page .bcard a,.page a.chip,.page .sheet a{color:var(--text)}
.page a.back{color:var(--muted)}
.f-l .btn{align-self:flex-start}
/* grouped left menu: a small label over each group; the label opens and closes it */
.nav-grp{display:flex;flex-direction:column;gap:1px;margin-top:8px}
.nav-gh{display:flex;align-items:center;justify-content:space-between;width:100%;height:26px;padding:0 9px;border:0;background:transparent;border-radius:var(--r-sm);color:var(--pane-muted);font:600 11px/1 var(--font,inherit);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.nav-gh:hover{background:var(--pane-hover);color:var(--pane-text)}
.nav-gh .ic,.nav-gh svg{width:14px;height:14px;transition:transform .15s ease}
.nav-grp.shut .nav-gh svg{transform:rotate(-90deg)}
.nav-grp.shut .nav-gb{display:none}
.nav-gb{display:flex;flex-direction:column;gap:1px}
body.pane-mini .nav-gh{height:9px;padding:0;pointer-events:none}
body.pane-mini .nav-gh svg{display:none}
body.pane-mini .nav-gh::after{content:"";display:block;width:100%;border-top:1px solid var(--pane-line)}
body.pane-mini .nav-grp.shut .nav-gb{display:flex}
@media (max-width:760px){body.pane-mini .nav-gh{height:26px;padding:0 9px;pointer-events:auto}
body.pane-mini .nav-gh svg{display:block}
body.pane-mini .nav-gh::after{display:none}
body.pane-mini .nav-grp.shut .nav-gb{display:none}}
.small{font-size:12.5px}
.next-step{display:flex;gap:8px;align-items:center;margin:4px 0 0;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--card);font-size:14px;width:max-content;max-width:100%}
.next-step .ic{width:16px;height:16px;flex:none}
.stepper{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.stepper li{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);font-size:12.5px;line-height:1.25;min-width:0}
.stepper li .ic{width:16px;height:16px}
.stepper .sp-now{border:1.5px solid var(--text);font-weight:600}
.stepper .sp-todo{color:var(--muted)}
@media (max-width:1100px){.stepper{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.stepper{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* pack-only: a dashboard row of four figures */
.kpis.kpis-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1180px){.kpis.kpis-4{grid-template-columns:repeat(2,1fr)}}

/* ---- shell.css ---- */
/* Babco Labs Theme Pack: the footer, the Test marker and the About page. */
.bl-footer{border-top:1px solid var(--line);margin:8px 0 0;padding:16px 24px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.bl-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bl-footer a:hover{color:var(--text)}
.bl-footer svg{width:14px;height:14px;flex:none;vertical-align:-2px;margin-right:4px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.foot-company{color:var(--text);font-weight:600}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 14px}
.foot-built{margin-left:auto}
.foot-dot{margin:0 6px}
.foot-mini{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;font-size:11.5px;color:var(--muted);padding:4px 0 0}
.foot-mini a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Test: a word and an icon, never only a color */
.test-tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--text);border:1.5px dashed var(--text);border-radius:999px;padding:1px 9px 1px 7px;white-space:nowrap;flex:none}
.test-tag svg{width:13px;height:13px;margin:0}
.foot-mini .test-tag{margin-right:8px}
:root[data-test] .page-title{flex:0 1 auto}
:root[data-test] .titlebar .test-tag{margin-right:auto}
.about .kv{margin-top:4px}
.about-links{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 0}
.about-built{text-align:center;color:var(--muted);font-size:12.5px;margin:0}
@media (max-width:760px){
  .bl-footer{padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px))}
  .foot-built{margin-left:0}
  .foot-mini{display:none}
}
@media print{.bl-footer{border-top:1px solid #999;color:#333}.foot-links{display:none}}

/* ---- states.css ---- */
/* Babco Labs Theme Pack 1.2: states and formats. Words and icons carry the meaning; borders differ in width, never
   only in color (Ken is red-green colorblind). */
.bl-loading{display:flex;align-items:center;gap:10px;padding:18px 4px;color:var(--muted);font-weight:500}
.bl-loading .ic{width:20px;height:20px;color:var(--accent)}
.bl-spin{animation:spin .9s linear infinite}
.skel-words{display:flex;align-items:center;gap:8px;margin:0 0 4px;color:var(--muted);font-weight:500}
.state-notfound .btn .ic{width:16px;height:16px}

/* offline banner, right under the title bar */
.bl-offline{display:flex;align-items:flex-start;gap:10px;padding:10px 20px;border-bottom:2px solid var(--text);background:var(--card);color:var(--text);font-size:13.5px;line-height:1.45;flex:none}
.bl-offline .ic{flex:none;width:18px;height:18px;margin-top:1px}
.bl-offline b{font-weight:700}

/* notices: info, done, attn, stop */
.notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--card);color:var(--text);border:1px solid var(--line-strong);font-size:13.5px;line-height:1.5}
.notice-done{border:1px solid var(--text)}
.notice-attn{border:1.5px solid var(--text)}
.notice-stop{border:2.5px solid var(--text)}
.notice-ic{flex:none;width:18px;height:18px;margin-top:1px}
.notice-info .notice-ic{color:var(--muted)}
.notice-b{flex:1;min-width:0}
.notice-b p{margin:0}
.notice-w{font-weight:700}
.notice-t{font-weight:600}
.notice-a{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.notice-x{width:28px;height:28px;margin:-4px -6px -4px 0;color:var(--muted)}
.notice-x .ic{width:16px;height:16px}
.notices{display:flex;flex-direction:column;gap:10px}

/* undo: its own toast with a button (the plain toast takes no clicks) */
.undo-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;visibility:hidden;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:999px;background:var(--text);color:var(--bg);font-size:13.5px;font-weight:600;box-shadow:var(--sh-2);z-index:61;transition:opacity var(--t-med),transform var(--t-med) var(--ease),visibility 0s linear var(--t-med)}
.undo-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--t-med),transform var(--t-med) var(--ease)}
.undo-toast>.ic{width:16px;height:16px;flex:none}
.undo-toast span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.undo-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1.5px solid var(--bg);background:transparent;color:var(--bg);font-weight:700;font-size:13px;flex:none}
.undo-btn .ic{width:14px;height:14px}
.undo-btn:hover{background:color-mix(in srgb,var(--bg) 16%,transparent)}

/* the States and formats example page */
.fmt-tbl td:first-child{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.fmt-tbl td:last-child{font-weight:500}
.fmt-tbl,.arch-tbl{min-width:0}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ex-grid .state-empty{padding:20px 12px}
@media (max-width:760px){
  .ex-grid{grid-template-columns:1fr}
  .bl-offline{padding:10px 14px}
  /* on a phone the two example tables become stacked rows instead of scrolling sideways */
  .fmt-tbl,.fmt-tbl tbody,.arch-tbl,.arch-tbl tbody{display:block}
  .fmt-tbl thead,.arch-tbl thead{display:none}
  .fmt-tbl tr{display:block;padding:10px 12px;border-bottom:1px solid var(--line)}
  .fmt-tbl td{display:block;padding:0;border:0}
  .fmt-tbl td:first-child{white-space:normal;overflow-wrap:anywhere;color:var(--muted);margin-bottom:2px}
  .arch-tbl tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:4px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .arch-tbl td{display:block;padding:0;border:0}
  .arch-tbl td:nth-child(4){grid-column:2;grid-row:1 / 4;align-self:center}
  .fmt-tbl tr:last-child,.arch-tbl tr:last-child{border-bottom:0}
}
/* the plain toast never takes clicks, so it never covers a button under it (the undo toast does take them) */
.toast{pointer-events:none}

/* ---- dashboard.css ---- */
/* Babco Labs Theme Pack 1.3: the dashboard. "Waiting on me" is the first card; late is a word with an icon and a
   heavier weight, never a color. */
.card.wait{border:1.5px solid var(--line-strong)}
.wait .card-h h3 .count{margin-left:2px}
.wait-l{list-style:none;margin:0;padding:0}
.wait-l li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:10px 0;border-top:1px solid var(--line)}
.wait-l li:first-child{border-top:0;padding-top:2px}
.wait-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.wait-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.wait-t{font-size:14px;font-weight:600;color:var(--text);text-decoration:none;min-width:0;overflow-wrap:anywhere}
.page a.wait-t{color:var(--text)}
a.wait-t:hover{text-decoration:underline}
.wait-why{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.wait-due,.wait-late{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.wait-due .ic,.wait-late .ic{width:14px;height:14px}
.wait-late{color:var(--text);font-weight:700}
.wait-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.wait-empty{display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:14px}
.wait-empty .ic{width:20px;height:20px;flex:none}
@media (max-width:760px){
  .wait-l li{grid-template-columns:minmax(0,1fr)}
  .wait-acts{justify-content:flex-start}
}

/* ---- work.css ---- */
/* Babco Labs Theme Pack 1.4: the work parts. Kinds and states differ by word, icon, border width and border style;
   color never carries the meaning. Only the look's tokens are used. */
/* work item card */
.wi-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.wi{display:flex;flex-direction:column;gap:8px;min-width:0;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:12px 14px}
.wi-gate{border-width:2px}
.wi-question{border-width:2px;border-style:dashed}
.wi-agent{border-width:1px}
.wi.is-late{border-left-width:6px;border-left-style:solid;border-left-color:var(--text)}
.wi.is-closed{background:transparent}
.wi-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.wi-kind{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;border:1px solid var(--text);color:var(--text)}
.wi-kind .ic{width:14px;height:14px}
.wi-question .wi-kind{border-style:dashed}
.wi-case{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--link);text-decoration:none}
.wi-case .ic{width:14px;height:14px}
.wi-t{margin:0;font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.wi-p{margin:0;font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.wi-meta,.wi-who{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.wi-who b{color:var(--text);font-weight:600}
.wi-m{display:inline-flex;align-items:center;gap:4px}
.wi-m .ic{width:14px;height:14px}
.wi-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.wi-checks li{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12.5px;padding:4px 8px;border-radius:var(--r-sm);border:1px solid var(--line)}
.wi-checks li.wi-ck-fail{border-width:2px;border-color:var(--text);font-weight:600}
.wi-ck-l{font-weight:600}
.wi-ck-n{color:var(--muted);flex-basis:100%}
.wi-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.wi-closed{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:13px;font-weight:600}
.wi-closed .ic{width:16px;height:16px}
/* roster card */
.rc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rc{display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:12px 14px}
.rc-agent{border-width:2px}
.rc-seat{border:2px dashed var(--line-strong);background:transparent}
.rc-top{display:flex;align-items:center;gap:10px;min-width:0}
.rc-mk{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;border:2px solid var(--text);color:var(--text)}
.rc-seat .rc-mk{border-style:dashed;color:var(--muted);border-color:var(--muted)}
.rc-mk .ic{width:18px;height:18px}
.rc-n{display:flex;flex-direction:column;min-width:0;flex:1}
.rc-name{font-weight:600;font-size:14.5px;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
a.rc-name:hover{text-decoration:underline}
.rc-role{font-size:12.5px;color:var(--muted)}
.rc-kind{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.rc-kind .ic{width:14px;height:14px}
.rc-st{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.rc-mode{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.rc-mode .ic{width:14px;height:14px}
.rc-ar{margin:0;display:flex;flex-direction:column;gap:6px}
.rc-ar dt{font-size:11.5px;font-weight:600;color:var(--muted)}
.rc-ar dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.rc-load{display:flex;gap:14px;font-size:13px;border-top:1px solid var(--line);padding-top:8px}
.rc-late{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.rc-late .ic{width:14px;height:14px}
.rc-note{margin:0;font-size:13px;color:var(--muted)}
/* milestone spine */
.spine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.spine li{position:relative;display:flex;flex-direction:column;gap:6px;padding:0 10px 4px 0;min-width:0}
.spine li::before{content:"";position:absolute;top:13px;left:28px;right:0;height:2px;background:var(--line-strong)}
.spine li:last-child::before{display:none}
.spine li.sp-done::before{height:3px;background:var(--text)}
.sp-mk{position:relative;z-index:1;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--card);border:1px solid var(--line-strong);color:var(--muted)}
.sp-mk .ic{width:18px;height:18px}
.sp-done .sp-mk{border:2px solid var(--text);color:var(--text)}
.sp-now .sp-mk{border:3px solid var(--accent);color:var(--text)}
.sp-late .sp-mk{border:3px solid var(--text);color:var(--text)}
.sp-skipped .sp-mk{border:1px dashed var(--line-strong)}
.sp-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.sp-n{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.sp-now .sp-n,.sp-late .sp-n{font-weight:800}
.sp-skipped .sp-n{text-decoration:line-through;color:var(--muted)}
.sp-w{font-size:12.5px;color:var(--muted)}
.sp-w b{color:var(--text)}
.sp-who,.sp-note{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.spine.v{grid-template-columns:1fr}
.spine.v li{flex-direction:row;gap:12px;padding:0 0 16px 0}
.spine.v li::before{top:28px;left:13px;right:auto;width:2px;height:calc(100% - 28px)}
.spine.v li.sp-done::before{width:3px;height:calc(100% - 28px)}
/* event timeline */
.ev{display:flex;flex-direction:column;gap:12px}
.ev-f{display:flex;flex-wrap:wrap;gap:6px}
.ev-f .chipbtn[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
.ev-f .chipbtn[aria-pressed=true] .count{background:var(--bg);color:var(--text)}
.ev-dh{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ev-dh .ic{width:14px;height:14px}
.ev-l{list-style:none;margin:0;padding:0}
.ev-r{display:grid;grid-template-columns:86px 28px minmax(0,1fr);gap:4px 10px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
.ev-r:first-child{border-top:0}
.ev-r[hidden]{display:none}
.ev-t{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:4px;white-space:nowrap}
.ev-mk{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);color:var(--text)}
.ev-agent .ev-mk{border-radius:8px;border-width:2px;border-color:var(--text)}
.ev-system .ev-mk{border-style:dashed;color:var(--muted)}
.ev-mk .ic{width:15px;height:15px}
.ev-b{min-width:0}
.ev-who{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13.5px}
.ev-k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:0 7px}
.ev-what{font-size:13.5px;overflow-wrap:anywhere}
.ev-d{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
/* delivery-mode switch */
.dm{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.dm-o{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:12px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--card);color:var(--text);min-width:0}
.dm-o:hover{border-color:var(--text)}
.dm-o[aria-checked=true]{border:3px solid var(--text);padding:10px}
.dm-ic{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong)}
.dm-o[aria-checked=true] .dm-ic{border:2px solid var(--accent)}
.dm-ic .ic{width:17px;height:17px}
.dm-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dm-b b{font-size:14px}
.dm-d{font-size:12.5px;color:var(--muted);line-height:1.4}
.dm-on{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;font-weight:700;white-space:nowrap}
.dm-on .ic{width:14px;height:14px}
/* the answer with the rows that prove it */
.proof{display:flex;flex-direction:column;gap:10px}
.pf-q{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:14px}
.pf-q .ic{width:17px;height:17px}
.pf-qw{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pf-a{font-size:14.5px;line-height:1.55}
.pf-h{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:13.5px;font-weight:700}
.pf-h .ic{width:15px;height:15px}
.proof .tbl.pf-t{min-width:0}
.pf-n{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--muted)}
.pf-n .ic{width:14px;height:14px;flex:none}
@media (max-width:760px){
  .wi-list,.rc-list{grid-template-columns:minmax(0,1fr)}
  .wi-case{margin-left:0}
  .spine{grid-template-columns:1fr}
  .spine li{flex-direction:row;gap:12px;padding:0 0 16px 0}
  .spine li::before,.spine li.sp-done::before{top:28px;left:13px;right:auto;width:2px;height:calc(100% - 28px)}
  .spine li.sp-done::before{width:3px}
  .ev-r{grid-template-columns:28px minmax(0,1fr)}
  .ev-t{grid-column:2;grid-row:1;padding-top:0}
  .ev-mk{grid-row:1 / span 2}
  .ev-b{grid-column:2;grid-row:2}
  .pf-t thead{display:none}
  .pf-t,.pf-t tbody,.pf-t tr,.pf-t td{display:block;width:100%}
  .pf-t tr{padding:8px 10px;border-bottom:1px solid var(--line)}
  .pf-t tr:last-child{border-bottom:0}
  .pf-t td{display:flex;gap:10px;border:0;padding:2px 0;overflow-wrap:anywhere}
  .pf-t td::before{content:attr(data-l);flex:none;width:76px;font-weight:600;color:var(--muted)}
}
@media print{.wi-acts,.ev-f{display:none!important}}

/* ---- desk.css ---- */
/* Babco Labs Theme Pack 1.5: the desk. Waiting on me spans the width and has the heavier border; exceptions have a
   dashed border; every section says its name and count in words. Only the look's tokens are used. */
.desk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.desk-s{min-width:0}
.desk-waiting{grid-column:1 / -1;border:2px solid var(--line-strong)}
.desk-exceptions{border:2px dashed var(--line-strong)}
.desk-help{margin:-4px 0 10px;font-size:12.5px;color:var(--muted)}
.desk-empty{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px}
.desk-empty .ic{width:18px;height:18px;flex:none}
.dr-l{list-style:none;margin:0;padding:0}
.dr{display:flex;flex-direction:column;gap:3px;min-width:0;padding:9px 0;border-top:1px solid var(--line)}
.dr:first-child{border-top:0;padding-top:0}
.dr-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.dr-t{font-size:14px;font-weight:600;color:var(--text);text-decoration:none;min-width:0;overflow-wrap:anywhere}
.page a.dr-t{color:var(--text)}
a.dr-t:hover{text-decoration:underline}
.dr-m{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.dr-m span{display:inline-flex;align-items:center;gap:4px}
.dr-m .ic{width:13px;height:13px}
.dr-n{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.wait-more{display:inline-flex;align-items:center;gap:4px;text-decoration:none;white-space:nowrap}
.wait-more .ic{width:14px;height:14px}
.prof-head .ph-row{display:flex;align-items:center;gap:12px;min-width:0;margin-top:6px}
.prof-head .av,.prof-head .ph-mk{width:44px;height:44px;font-size:15px}
.prof-head .ph-mk .ic{width:22px;height:22px}
.ph-n{display:flex;flex-direction:column;min-width:0;flex:1}
.ph-n h2{margin:0;font-size:22px;overflow-wrap:anywhere}
.ph-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:10px;font-size:13px}
.ph-f b{font-weight:600}
@media (max-width:1000px){.desk{grid-template-columns:minmax(0,1fr)}}
@media print{.desk-waiting .wi-acts{display:none!important}}

/* ---- outputs.css ---- */
/* Babco Labs Theme Pack 1.6: outputs. Paper is always light and uses the fixed output colors; on the screen the
   printed page is shown as a white sheet. */
#bl-print{display:none}
.pd-paper{background:#E9ECF2;border-radius:var(--r-md);padding:16px;overflow-x:auto}
.pdoc{background:#FFFFFF;color:#1A1D24;font-family:Inter,Arial,Helvetica,sans-serif;font-size:12.5px;line-height:1.45;padding:28px 32px;max-width:820px;margin:0 auto;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.pd-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:2px solid #1A1D24;flex-wrap:wrap}
.pd-logo{height:40px;width:auto}
.pd-name{font-size:18px}
.pd-co{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-size:11px;color:#596170;max-width:360px}
.pd-co b{color:#1A1D24;font-size:12px}
.pd-t{margin:18px 0 2px;font-size:22px;color:#1A1D24}
.pd-sub{margin:0 0 12px;color:#596170}
.pd-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 16px;margin:0 0 16px;padding:10px 0;border-top:1px solid #D7DBE3;border-bottom:1px solid #D7DBE3}
.pd-kv dt{font-size:10.5px;font-weight:600;color:#596170;text-transform:uppercase;letter-spacing:.04em}
.pd-kv dd{margin:2px 0 0;font-weight:600;overflow-wrap:anywhere}
.pd-s{margin:0 0 16px;break-inside:avoid}
.pd-s h2{margin:0 0 6px;font-size:14px;color:#1A1D24}
.pd-tbl{width:100%;border-collapse:collapse}
.pd-tbl th{text-align:left;font-size:11px;font-weight:700;color:#1A1D24;border-bottom:2px solid #1A1D24;padding:5px 6px}
.pd-tbl td{padding:5px 6px;border-bottom:1px solid #D7DBE3;overflow-wrap:anywhere}
.pd-tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-tot td{font-weight:700;border-top:2px solid #1A1D24;border-bottom:0}
.pd-f{margin-top:20px;padding-top:8px;border-top:1px solid #D7DBE3;font-size:10.5px;color:#596170}
/* on a phone the sheet keeps its paper width and scrolls inside its frame, as a printed page would look */
@media (max-width:760px){.pdoc{padding:20px;min-width:640px}.pd-paper{padding:8px}}
@media print{
  body.bl-printing > *:not(#bl-print){display:none!important}
  body.bl-printing #bl-print{display:block}
  body.bl-printing{background:#FFFFFF!important}
  body.bl-printing .pdoc{box-shadow:none;max-width:none;padding:0}
  @page{margin:14mm 12mm}
}
/* Excel preview: the rows of the file, numbered like a spreadsheet */
.xp .tbl.xp-t{min-width:0;font-size:12.5px}
.xp-t th.xp-n{width:34px;color:var(--muted);font-weight:600;text-align:right;background:var(--hover,transparent)}
.xp-title td{font-weight:800;font-size:14px}
.xp-head td{font-weight:700;border-bottom:2px solid var(--text)}
.xp-tot td{font-weight:700;border-top:2px solid var(--text)}
/* email preview */
.em{display:flex;flex-direction:column;gap:10px}
.em-f{width:100%;height:660px;border:1px solid var(--line);border-radius:var(--r-md);background:#F2F4F7}
.em-t summary{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:600}
.em-t summary .ic{width:15px;height:15px}
.em-t pre,.tc-json{margin:8px 0 0;padding:12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg);font:12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
/* Teams card preview */
.tc{display:flex;flex-direction:column;gap:8px}
.tc-note{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--muted)}
.tc-note .ic{width:14px;height:14px;flex:none}
.tc-card{max-width:440px;background:#FFFFFF;color:#1A1D24;border:1px solid #D7DBE3;border-radius:8px;padding:14px 16px;font-family:Inter,Arial,Helvetica,sans-serif}
.tc-tb{margin:0 0 6px;font-size:13.5px;overflow-wrap:anywhere}
.tc-big{font-size:16px}
.tc-sub{color:#596170;font-size:11.5px;letter-spacing:.04em}
.tc-b{font-weight:700}
.tc-fs{margin:6px 0 8px;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px}
.tc-fs div{display:contents}
.tc-fs dt{font-weight:700}
.tc-fs dd{margin:0}
.tc-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tc-a{padding:6px 12px;border:1px solid #1A1D24;border-radius:6px;font-size:13px;font-weight:600}
/* chart key and icon set */
.ck{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.ck li{display:flex;align-items:center;gap:10px}
.ck-s{flex:none}
.icg{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.icg li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px solid var(--line);border-radius:var(--r-md);min-width:0}
.icg .ic{width:22px;height:22px}
.icg code{font:11.5px var(--mono);color:var(--muted);overflow-wrap:anywhere;text-align:center}

/* ---- doc.css ---- */
/* Babco Labs Theme Pack 3.1: the server-made page and the status strip.
   A server-made page (catalog part "server-page") is a page an app's server writes whole, as the page kit
   kits/babco_page.py makes it: <body class="bl-doc">, the header, the status strip, one title, the page's cards, and the
   footer the pack script draws. The whole page scrolls. The status strip (catalog part "status-strip") says which copy
   this is: environment, version, who is signed in, readiness, and the one Feedback control. No color of its own. */
body.bl-doc{overflow:auto;height:auto;min-height:100%;display:flex;flex-direction:column}
.bl-doc .bl-doc-main{flex:1 0 auto;width:100%;padding-top:8px}
.bl-doc h1.bl-title{margin:4px 0 0;font-size:var(--fs-hero);font-weight:var(--w-hero);letter-spacing:-.02em;line-height:1.2}
.bl-doc .bl-doc-main>.page-lede{margin-top:-8px}
.bl-doc .bl-doc-main>.test-tag{align-self:flex-start}
.bl-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;width:100%;max-width:1240px;margin:0 auto;padding:10px 24px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.bl-status b{color:var(--text);font-weight:600;overflow-wrap:anywhere}
.bl-status a{color:var(--link)}
.bl-status .babco-feedback{margin-left:auto;font-weight:600}
.bl-doc .page a.btn{color:var(--text);text-decoration:none}
.bl-doc .page a.btn.primary{color:var(--on-primary)}
.bl-doc .grid2{align-items:start}
.bl-doc .grid2>.card.wide{grid-column:1/-1}
.bl-doc .card>.bl-intro{margin:-4px 0 12px;font-size:13.5px}
.bl-doc .bl-empty{margin:2px 0;font-size:13.5px}
.bl-doc .card form+form,.bl-doc .card .kv+form,.bl-doc .card .table-wrap+form{margin-top:12px}
.f-hint{font-size:12.5px;font-weight:400;color:var(--muted)}
.bl-doc .f-l{max-width:560px}
.bl-doc .f-l>label{font-weight:600}
.bl-doc .f-l>select.f-in{max-width:none}
.chipbtn[aria-current=true]{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
.bl-doc .page a.chipbtn{color:var(--text);text-decoration:none}
.bl-doc .page a.chipbtn[aria-current=true]{color:var(--bg)}
.bl-doc .notice-b>p+p{margin-top:4px}
.bl-doc .notice-a a{font-weight:600}
.bl-doc .note>div>p{margin:0 0 4px}
.bl-doc .note>div>p:last-child{margin:0}
.bl-doc .bl-pager{margin-top:10px}
.bl-download{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.bl-doc .bl-footer{width:100%;max-width:1240px;margin:16px auto 0}
@media (max-width:760px){
  .bl-status{padding:8px 16px 0;gap:4px 14px}
  .bl-status .babco-feedback{margin-left:0}
  .bl-doc h1.bl-title{font-size:24px}
  .bl-doc babco-header{--app-fs-sm:12px!important}   /* a long app name still fits beside the logo and the account control */
}
@media print{body.bl-doc{overflow:visible;display:block}.bl-status{display:none}}

/* 3.3 (October 23, 2026): the sign-in page (catalog part "sign-in-page"). Ken: a person who is not signed in sees nothing of
   the app, only this card: the brand's logo, the app's name, one line and Microsoft's own Sign in with Microsoft button.
   The button keeps Microsoft's colors and shape (Microsoft identity platform branding guidelines); nothing else here has a
   color of its own. */
body.bl-doc.bl-gate{min-height:100vh;min-height:100dvh;align-items:center;justify-content:center;padding:24px 16px;
  background:radial-gradient(1100px 560px at 50% -12%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--bg)}
.bl-gate-main{width:100%;max-width:460px;margin:auto}
.bl-gate-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:48px 40px 40px;
  border-top:4px solid var(--accent)}
.bl-gate-logo{display:flex;justify-content:center;min-height:40px}
.bl-gate-logo img{height:40px;width:auto;display:block}
:root[data-theme=dark] .bl-gate-logo .bl-logo-light,:root:not([data-theme=dark]) .bl-gate-logo .bl-logo-dark{display:none}
.bl-gate-card h1.bl-gate-app{margin:6px 0 0;font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--text)}
.bl-gate-card .bl-gate-say{margin:0 0 6px;max-width:360px;font-size:15px;line-height:1.5;color:var(--muted)}
.bl-ms-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;width:100%;max-width:300px;
  height:41px;padding:0 12px;border:1px solid #8C8C8C;border-radius:0;background:#FFFFFF;color:#5E5E5E;text-decoration:none;
  font-family:inherit;font-weight:600;font-size:15px;line-height:1;cursor:pointer}
.bl-ms-btn:hover{background:#F3F3F3}
.bl-ms-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:root[data-theme=dark] .bl-ms-btn{background:#2F2F2F;border-color:#2F2F2F;color:#FFFFFF}
:root[data-theme=dark] .bl-ms-btn:hover{background:#3B3B3B}
.bl-ms-logo{display:grid;grid-template-columns:10px 10px;grid-template-rows:10px 10px;gap:1px;flex:0 0 21px;width:21px;height:21px}
.bl-ms-logo i{display:block}
.bl-ms-logo i:nth-child(1){background:#F25022}.bl-ms-logo i:nth-child(2){background:#7FBA00}
.bl-ms-logo i:nth-child(3){background:#00A4EF}.bl-ms-logo i:nth-child(4){background:#FFB900}
@media (max-width:760px){.bl-gate-card{padding:32px 20px 24px}.bl-gate-card h1.bl-gate-app{font-size:23px}}

/* ---- color.css ---- */
/* Babco Labs Theme Pack 3.2, "Color" (Ken, October 22, 2026: the 3.1 screens were "so plain", "super institutional generic").
   Colorful defaults that are still clearly Babco: the brand accent (each client's own, from its brand file) and a second
   accent, a colored page band, figure cards with color, colored status chips, tinted cards, empty states with a picture, the
   app frame's left navigation for server-made pages, and wide tables that scroll inside their card. Light and dark.
   Color is never the only signal: every status keeps its word and icon, and stop is still a dashed border. */
:root{--bl-a1:var(--accent,#E8590C);--bl-a2:#2563EB;--bl-a3:#0D9488;--bl-a4:#7C3AED;
  --st-ok-c:#166534;--st-ok-b:#DCFCE7;--st-warn-c:#92400E;--st-warn-b:#FEF3C7;--st-bad-c:#991B1B;--st-bad-b:#FEE2E2;
  --st-wait-c:#1E40AF;--st-wait-b:#DBEAFE;--st-move-c:#5B21B6;--st-move-b:#EDE9FE}
[data-theme="dark"]{--bl-a2:#60A5FA;--bl-a3:#2DD4BF;--bl-a4:#A78BFA;
  --st-ok-c:#86EFAC;--st-ok-b:rgba(34,197,94,.16);--st-warn-c:#FCD34D;--st-warn-b:rgba(245,158,11,.16);--st-bad-c:#FCA5A5;--st-bad-b:rgba(239,68,68,.16);
  --st-wait-c:#93C5FD;--st-wait-b:rgba(59,130,246,.18);--st-move-c:#C4B5FD;--st-move-b:rgba(139,92,246,.18)}
.st-done{--sc:var(--st-ok-c);--sb:var(--st-ok-b)}.st-attn{--sc:var(--st-warn-c);--sb:var(--st-warn-b)}.st-stop{--sc:var(--st-bad-c);--sb:var(--st-bad-b)}
.st-wait{--sc:var(--st-wait-c);--sb:var(--st-wait-b)}.st-move{--sc:var(--st-move-c);--sb:var(--st-move-b)}
.st.st-done,.st.st-attn,.st.st-stop,.st.st-wait,.st.st-move{background:var(--sb);color:var(--sc);border:1px solid color-mix(in srgb,var(--sc) 38%,transparent);font-weight:700}
.st.st-stop{border-style:dashed;border-width:1.5px}
.st .ic,.st-move .ic{color:currentColor}
.kpi{border-top:4px solid var(--kc,var(--bl-a1));--kc:var(--bl-a1);background:linear-gradient(180deg,color-mix(in srgb,var(--kc) 11%,var(--card)) 0%,var(--card) 78%)}
.kpis>.kpi:nth-child(4n+2){--kc:var(--bl-a2)}.kpis>.kpi:nth-child(4n+3){--kc:var(--bl-a3)}.kpis>.kpi:nth-child(4n+4){--kc:var(--bl-a4)}
.kpi-l .ic{color:var(--kc)}
.card{background:linear-gradient(180deg,color-mix(in srgb,var(--bl-a1) 5%,var(--card)) 0%,var(--card) 140px)}
.card>.card-h h3{display:flex;align-items:center;gap:9px}
.card>.card-h h3::before{content:"";width:4px;height:1.05em;border-radius:3px;background:linear-gradient(180deg,var(--bl-a1),var(--bl-a2))}
.bl-band{position:relative;margin:6px 0 2px;padding:22px 26px 20px;border-radius:18px;
  background:radial-gradient(260px 260px at calc(100% + 60px) -80px,color-mix(in srgb,var(--bl-a2) 22%,transparent) 0%,transparent 70%),linear-gradient(115deg,color-mix(in srgb,var(--bl-a1) 24%,var(--card)) 0%,color-mix(in srgb,var(--bl-a1) 10%,var(--card)) 45%,color-mix(in srgb,var(--bl-a2) 16%,var(--card)) 100%);
  border:1px solid color-mix(in srgb,var(--bl-a1) 28%,var(--line))}
.bl-doc .bl-band h1.bl-title{margin:0}
.bl-doc .bl-band>.page-lede{margin:6px 0 0;max-width:820px}
.bl-doc .bl-band>.test-tag{margin-top:8px}
.bl-doc .bl-empty{display:flex;align-items:center;gap:12px;margin:4px 0;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--bl-a1) 40%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--bl-a1) 5%,var(--card));color:var(--muted)}
.bl-doc .bl-empty>.ic{flex:none;width:36px;height:36px;padding:8px;border-radius:50%;background:color-mix(in srgb,var(--bl-a1) 16%,var(--card));color:var(--bl-a1)}
.bl-doc .grid2>*,.bl-doc .card,.bl-doc .bl-shell-main,.bl-doc .bl-doc-main{min-width:0}
.bl-doc .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bl-doc .table-wrap>table{min-width:100%}
.bl-doc .tbl th{white-space:nowrap}
.bl-shell{display:flex;align-items:flex-start;width:100%;max-width:1520px;margin:0 auto;flex:1 0 auto}
.bl-shell-main{flex:1 1 auto;display:flex;flex-direction:column;min-height:100%}
.bl-side{position:sticky;top:0;flex:0 0 236px;align-self:flex-start;max-height:100vh;overflow:auto;padding:16px 8px 20px 16px;display:flex;flex-direction:column;gap:6px;transition:flex-basis .15s ease}
.bl-side nav{display:flex;flex-direction:column;gap:2px}
.bl-side-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 6px 12px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bl-side-tog{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer}
.bl-side-tog .ic{width:16px;height:16px}
.bl-side-a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;color:var(--text);text-decoration:none;font-weight:600;font-size:14px;line-height:1.3}
.bl-side-a .ic{flex:none;width:18px;height:18px;color:var(--bl-a2)}
.bl-side-a:hover{background:color-mix(in srgb,var(--bl-a1) 9%,transparent)}
.bl-side-a[aria-current=page]{background:color-mix(in srgb,var(--bl-a1) 17%,var(--card));box-shadow:inset 3px 0 0 var(--bl-a1);font-weight:700}
.bl-side-a[aria-current=page] .ic{color:var(--bl-a1)}
.bl-side-sep{height:1px;margin:8px 10px;background:var(--line)}
body.bl-side-min .bl-side{flex-basis:70px}
body.bl-side-min .bl-side-a span,body.bl-side-min .bl-side-h span{display:none}
body.bl-side-min .bl-side-a{justify-content:center;padding:10px 0}
body.bl-side-min .bl-side-h{justify-content:center;padding:0 0 6px}
@media (max-width:900px){.bl-side{display:none}}
@media print{.bl-side{display:none}}
/* ---- themes (2.0), made from themes/*.json ---- */
:where(:root)[data-theme-set=harbor]{--fs-body:14px;--fs-input:14px;--fs-hero:24px;--w-hero:700;--fs-title:16px;--r-sm:4px;--r-md:6px;--r-lg:8px;--r-bubble:10px;--r-composer:10px;--r-send:8px;--gap:20px;--sh-1:none;--sh-2:0 4px 14px -6px rgba(14,23,38,.22)}
:root[data-theme-set=harbor][data-scheme=white]{--text:#0E1726;--muted:#4A5568;--placeholder:#7C8798;--s-bg:#EDF1F6;--s-pane:#E2E8F0;--s-card:#FFFFFF;--s-user:#DCE3EC;--s-line:#CBD4DF;--s-strong:#A9B5C4}
:root[data-theme-set=harbor][data-scheme=white][data-theme=dark]{--text:#E6EBF2;--muted:#9AA6B6;--placeholder:#677386;--s-bg:#0B1016;--s-pane:#070A0F;--s-card:#161D27;--s-user:#1F2834;--s-line:#26303D;--s-strong:#3A4757}
:where(:root:not([data-theme=dark]))[data-theme-set=harbor][data-scheme=white]{--accent:#1D5DA8;--on-accent:#FFFFFF}
:where(:root[data-theme=dark])[data-theme-set=harbor][data-scheme=white]{--accent:#7DB0F0;--on-accent:#071729}