/* DIAMDOR Оркестр: the warehouse app's design system (sklad.diamdor.ru), copied from sklad/app/static/styles.css, not linked.
   Look: Manrope, light grey page, white panels with thin borders, square corners, the orange bar with the handwritten «Diamdor»,
   orange primary buttons, section tabs with an orange underline, outlined badges. Rules: .claude/rules/sklad-page-template.md,
   sklad-header-menu.md, app-brand-header.md. Team colors (Claude Code agent colors) stay as accents inside this look. */
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url('/static/fonts/manrope-v20-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url('/static/fonts/manrope-v20-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url('/static/fonts/manrope-v20-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* the brand word «Diamdor» in Alex Brush, as in the other internal apps (OFL, fonts/OFL-alexbrush.txt) */
@font-face { font-family: 'Alex Brush'; font-weight: 400; font-display: swap; src: url('/static/fonts/alexbrush-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2019, U+2014; }

/* ---------------------------------------------------------------- 1 tokens */
:root {
  --bg: #f8f9fa; --fg: #1d2024; --card: #fff; --soft: #f1f2f4; --primary: #ef7a38; --muted: #6b7077; --border: #dfe2e6;
  --bad: #c8321f; --ok: #2f8f5b; --warn: #b7791f; --bar: #FF6A00; --accent: #FF6A00; --accent-ink: #b04a0a;
  --placeholder: #b3b6bb;
  --ok-bg: #eaf7ee; --warn-bg: #fffaf0; --bad-bg: #fdf1ef; --primary-bg: #fff4ea;
  --busy: #2f6fe4; --busy-bg: #eef3fe; --off: #b6bac0;
  --ok-ink: #2a6f46; --warn-ink: #8a5a00;
  --bubble-out: #ffe6d0; --time-out: #7b4a24;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px;
  --ctl: 48px; --ctl-sm: 40px; --pad: max(14px, env(safe-area-inset-left), env(safe-area-inset-right));
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
@supports (color: oklch(0 0 0)) {
  :root { --bg: oklch(0.98 0.002 250); --fg: oklch(0.20 0.01 250); --primary: oklch(0.70 0.18 45); --muted: oklch(0.50 0.01 250); --border: oklch(0.90 0.005 250); --bad: oklch(0.577 0.245 27.325); --ok: oklch(0.55 0.12 150); --soft: oklch(0.96 0.005 250); }
}
@media (hover: hover) and (pointer: fine) { :root { --ctl: 40px; --ctl-sm: 32px; } }
@media (pointer: coarse) { :root { --ctl-sm: 44px; } }

/* ---------------------------------------------------------------- 2 base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; height: 100%; overscroll-behavior-y: none; }
body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: var(--fs-md)/1.45 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; }
h1 { font-size: 20px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.hw { font-family: 'Alex Brush', cursive; font-weight: 400; -webkit-text-stroke: 0.035em currentColor; font-size: 26px; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; position: relative; top: -1px; }

/* ---------------------------------------------------------------- 3 header: the orange bar */
.shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.top { flex: none; position: relative; z-index: 30; background: var(--bg); }
.appbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 30px; padding: env(safe-area-inset-top) var(--pad) 0; background: var(--bar); color: #fff; font-size: 12px; }
.appbar .brand { display: flex; align-items: center; color: #fff; flex: none; }
.appbar .brand b { font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; font-size: 12px; }
.appbar .brand .hw { margin-right: 9px; color: #fff; }
.appbar .who { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); }
.clock { color: #fff; opacity: .92; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: -4px; color: #fff; opacity: .92; }
.barbtn:hover { opacity: 1; }
@media (pointer: coarse) { .barbtn { width: 44px; height: 44px; margin: -7px -10px -7px 0; } }

/* ---------------------------------------------------------------- 4 layout */
.cols { flex: 1; min-height: 0; display: flex; }
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.left { flex: 1; }
.right { flex: 1; display: none; background: var(--bg); }
.shell[data-route="chat"] .left { display: none; }
.shell[data-route="chat"] .right { display: flex; }
.scroll { flex: 1; overflow-y: auto; overflow-anchor: none; padding: var(--s4) var(--pad) calc(var(--s5) + var(--sab)); }

.back { display: inline-flex; align-items: center; min-height: var(--ctl-sm); margin-bottom: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.back:hover { color: var(--fg); }
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 40px; margin: 0 0 var(--s3); }
.pagehead h1 { min-width: 0; }

.banner { margin: var(--s3) var(--pad) 0; padding: 10px 12px; border: 1px solid var(--warn); background: var(--warn-bg); color: var(--warn-ink); font-size: var(--fs-sm); font-weight: 600; }

/* section tabs (the view switch): plain text, an orange underline under the lit tab, a thin line under the row */
.subnav { display: flex; align-items: stretch; gap: var(--s5); height: 40px; margin: var(--s3) 0 var(--s2); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav button { flex: none; display: inline-flex; align-items: center; padding: 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font-size: var(--fs-md); font-weight: 600; color: var(--muted); white-space: nowrap; }
.subnav button:hover { color: var(--fg); }
.subnav button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--primary); }

/* ---------------------------------------------------------------- 5 components */
.sec { margin: var(--s5) 0 var(--s2); font-size: var(--fs-md); font-weight: 700; color: var(--fg); }
.sec.first { margin: 0; height: 0; }
.sec:first-child { margin-top: 0; }
.card { display: block; background: var(--card); border: 1px solid var(--border); padding: var(--s3) var(--s4); margin-top: var(--s3); }
.card:first-child { margin-top: 0; }
a.card:hover { border-color: var(--fg); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--ctl); padding: 0 var(--s4); border: 1px solid var(--primary); background: var(--primary); color: #fff; border-radius: 0; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; }
.btn:hover { opacity: .9; }
.btn.light { background: var(--card); color: var(--fg); border-color: var(--border); }
.btn.light:hover { border-color: var(--fg); opacity: 1; }
.btn.danger { background: var(--card); color: var(--bad); border-color: var(--bad); }
.btn.wide { width: 100%; margin-top: var(--s3); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.primary { }
.input { width: 100%; height: var(--ctl); border: 1px solid var(--border); background: var(--card); border-radius: 0; padding: 0 var(--s3); font-size: 16px; outline: none; }
.input:focus { border-color: var(--primary); }

.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.5; padding: 0 var(--s2); border: 1px solid var(--border); color: var(--muted); background: var(--card); white-space: nowrap; }
.chip.works { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.chip.limit { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.chip.blocked, .chip.not_logged_in { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.empty { padding: var(--s5) var(--s4); border: 1px dashed var(--border); background: var(--card); text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s3); }

/* the status dot of a chat */
.dot { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--off); }
.dot[data-s="busy"] { background: var(--busy); box-shadow: 0 0 0 4px var(--busy-bg); animation: run 1.6s ease-in-out infinite; }
@keyframes run { 50% { box-shadow: 0 0 0 7px rgba(47,111,228,.06); } }
@media (prefers-reduced-motion: reduce) { .dot[data-s="busy"] { animation: none; } }
.dot[data-s="idle"] { background: var(--ok); }
.dot[data-s="problem"] { background: var(--bad); }
.dot[data-s="offline"] { background: var(--off); }

/* chat rows (a chat of a node) */
.sess { display: flex; gap: var(--s3); align-items: flex-start; }
.sess[aria-current="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.sbody { flex: 1; min-width: 0; }
.row1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.nm { font-size: var(--fs-md); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.age { flex: none; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.res { margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.res.none { color: var(--muted); }
.sub { margin-top: 3px; color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub.wait { color: var(--warn-ink); font-weight: 700; }
.sess.compact .res { -webkit-line-clamp: 1; }

/* team colors (Claude Code agent colors) as accents: --c strong bar, --ct soft tint, --ci ink */
[data-c] { --c: #9aa0a6; --ct: #f1f2f4; --ci: #5f656c; }
[data-c="red"] { --c: #d9483b; --ct: #fdecea; --ci: #b3281c; }
[data-c="green"] { --c: #2f9e5b; --ct: #e8f6ed; --ci: #1f7a45; }
[data-c="yellow"] { --c: #e0a800; --ct: #fff5d1; --ci: #8a6500; }
[data-c="cyan"] { --c: #1aa6c4; --ct: #e1f4f8; --ci: #0e7389; }
[data-c="pink"] { --c: #e0559c; --ct: #fde9f3; --ci: #b02a74; }
[data-c="orange"] { --c: #f07a1a; --ct: #ffeedd; --ci: #b55200; }
[data-c="purple"] { --c: #8b5cf6; --ct: #efe9fe; --ci: #5b32b4; }
[data-c="blue"] { --c: #3b82f6; --ct: #e7f0fe; --ci: #1f55b8; }
.tblock { margin: var(--s4) 0 0; padding: 0 var(--s2) var(--s2); border: 1px solid var(--border); border-left: 4px solid var(--c, #c4c8cd); background: var(--ct, var(--soft)); }
.tblock:not([data-c]) { --ci: var(--muted); }
.thead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px var(--s1) var(--s2); color: var(--ci); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; }
.thead b { font-weight: 800; }
.thead span { font-weight: 700; text-transform: none; letter-spacing: 0; }
.tblock .card { margin-top: var(--s2); }
.rlist .card { margin-top: var(--s2); }
.sess[data-c] { border-left: 4px solid var(--c); }

/* questions waiting for the owner */
.q { border-left: 4px solid var(--primary); background: var(--primary-bg); border-color: var(--primary); }
.qmeta { color: var(--muted); font-size: var(--fs-sm); }
.qmeta a { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.qtext { margin: 4px 0 var(--s3); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; white-space: pre-wrap; word-break: break-word; }
.opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.opts.inbub { margin-top: 10px; }
.opts .btn { width: auto; }
.opts .btn:not(.primary) { background: var(--card); color: var(--fg); border-color: var(--border); }
.opts .btn:not(.primary):hover { border-color: var(--fg); opacity: 1; }
.card.offer { background: var(--primary-bg); border-color: var(--primary); }
.card.offer .qtext { margin-top: 0; }

/* nodes: limit windows */
.node { padding: var(--s4); }
.shead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.shead .nm { font-size: var(--fs-lg); }
.prov { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.win { margin-top: var(--s4); }
.whead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wl { font-weight: 600; }
.wp { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.bar { position: relative; height: 8px; margin: 7px 0 6px; background: var(--soft); border: 1px solid var(--border); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ok); }
.bar.warn i { background: var(--accent); }
.bar.bad i { background: var(--bad); }
.bar u { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--fg); text-decoration: none; }
.wmeta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pace { font-weight: 700; }
.pace.ok { color: var(--ok-ink); }
.pace.warn { color: var(--accent-ink); }
.pace.bad { color: var(--bad); }
.wrun { margin-top: 2px; color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.today { margin-top: var(--s4); padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.stale { margin-top: 10px; color: var(--muted); font-size: var(--fs-sm); }
.nfoot { display: flex; align-items: center; gap: 10px; margin-top: var(--s4); padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; }
.nfoot .dot { margin: 0; width: 9px; height: 9px; }
.chev { margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; }
/* the limits panel of a node screen: one line, opens on tap */
.lim { padding: 0; }
.lsum { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: var(--s2) var(--s4); border: 0; background: none; text-align: left; }
.lsum .lt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: var(--fs-md); }
.lsum .lt b { font-weight: 800; font-variant-numeric: tabular-nums; }
.lim .lbody { padding: 0 var(--s4) var(--s4); border-top: 1px solid var(--border); }
.lim .lbody .win:first-child { margin-top: var(--s3); }
.lsum .chev { transition: transform .15s ease; }
.lsum[aria-expanded="true"] .chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .lsum .chev { transition: none; } }

/* settings */
.card.pk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.pkmain { flex: 1 1 150px; min-width: 0; }

/* ---------------------------------------------------------------- 6 chat */
.chead { flex: none; padding: var(--s4) var(--pad) 0; }
.cstatus { flex: none; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.nowbar { margin: 0 var(--pad); padding: 10px var(--s3); border: 1px solid var(--busy); background: var(--busy-bg); font-weight: 600; font-size: var(--fs-sm); display: flex; gap: var(--s2); align-items: baseline; }
.nowbar::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--busy); transform: translateY(-1px); }
.feed { flex: 1; overflow-y: auto; overflow-anchor: none; padding: var(--s3) var(--pad) var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.feed > .spacer { flex: 1 0 0; }
.day { align-self: center; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 10px 0 2px; }
.msg { max-width: min(86%, 640px); }
.bub { padding: 10px 14px; border: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; }
.msg.out { align-self: flex-end; }
.msg.out .bub { background: var(--bubble-out); border-color: #f4cfae; }
.msg.in { align-self: flex-start; }
.msg.in .bub { background: var(--card); }
.msg.ask .bub { background: var(--warn-bg); border-color: var(--warn); }
.lbl { font-size: var(--fs-sm); font-weight: 800; color: var(--ok-ink); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.msg.ask .lbl { color: var(--warn-ink); }
.more { display: inline-block; margin-top: 4px; color: var(--accent-ink); font-weight: 700; font-size: var(--fs-sm); }
.dlv { margin: 3px 2px 0; font-size: var(--fs-xs); color: var(--time-out); text-align: right; font-variant-numeric: tabular-nums; }
.dlv.wait { color: var(--warn-ink); font-weight: 700; }
.dlv.bad { color: var(--bad); font-weight: 700; }
.work, .sched { align-self: flex-start; color: var(--muted); font-size: var(--fs-sm); padding: 4px 6px; margin-left: 4px; border: 0; background: none; text-align: left; font-variant-numeric: tabular-nums; }
.work::before { content: '\25B8\00a0'; }
.work.open::before { content: '\25BE\00a0'; }
.work small { display: block; margin-left: 14px; font-size: var(--fs-xs); }
.sched { cursor: default; }

.composer { flex: none; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-end; padding: var(--s2) var(--pad) calc(var(--s3) + var(--sab)); background: var(--bg); border-top: 1px solid var(--border); }
.cbox { flex: 1; position: relative; min-width: 0; }
#ctext { display: block; resize: none; height: auto; max-height: 140px; min-height: var(--ctl); padding: 10px var(--s3); line-height: 1.35; }
.crec { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 var(--s3); border: 1px solid var(--bad); background: var(--bad-bg); color: var(--bad); font-weight: 700; font-variant-numeric: tabular-nums; }
.recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.ibtn { flex: none; width: var(--ctl); height: var(--ctl); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--fg); }
.ibtn.send { background: var(--primary); border-color: var(--primary); color: #fff; }
.ibtn.send:disabled { background: var(--soft); border-color: var(--border); color: #9aa0a6; }
.ibtn.mic.rec { background: var(--bad); border-color: var(--bad); color: #fff; }
.ibtn.mic:disabled { opacity: .5; }

/* attachments: chips above the field, thumbnails and file chips in the feed */
.cchips { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: var(--s2); max-height: 132px; overflow-y: auto; }
.achip { position: relative; display: flex; align-items: center; gap: var(--s2); max-width: 100%; min-height: 44px; padding: 4px 6px 4px 4px; border: 1px solid var(--border); background: var(--card); font-size: var(--fs-sm); font-weight: 600; }
.achip .ath { flex: none; width: 36px; height: 36px; object-fit: cover; background: var(--soft); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.achip .ath svg { width: 20px; height: 20px; }
.achip .an { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.achip .an b { font-weight: 700; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achip .an small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.achip .ax { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.achip .ax:hover { color: var(--bad); }
.cprog { flex: 1 0 100%; height: 3px; background: var(--soft); }
.cprog i { display: block; height: 100%; width: 0; background: var(--bar); transition: width .15s linear; }
.ibtn.clip:disabled { opacity: .5; }
.files { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2); }
.files:not(:first-child) { margin-top: var(--s2); }
.thumb { display: block; width: 168px; height: 126px; object-fit: cover; border: 1px solid var(--border); background: var(--soft); }
.fchip { display: inline-flex; flex-direction: column; max-width: 100%; padding: 6px 10px; border: 1px solid #f4cfae; background: var(--card); line-height: 1.25; white-space: normal; }
.fchip b { font-weight: 700; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.fchip small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.fchip.gone { color: var(--muted); background: var(--soft); }

.chright { flex: none; display: inline-flex; align-items: center; gap: var(--s2); }
.ibtn.bell { width: var(--ctl-sm); height: var(--ctl-sm); }
.ibtn.bell.off { color: var(--muted); }
.card.pk .btn + .btn { margin-left: var(--s2); }
.pkbtns { flex: none; display: flex; gap: var(--s2); }
.btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.card .fchip { border-color: var(--border); }
.cnt { margin-left: 6px; min-width: 18px; padding: 0 5px; background: var(--primary); color: #fff; font-size: var(--fs-xs); font-weight: 800; line-height: 18px; text-align: center; }
.chip.t-work { border-color: var(--busy); color: var(--busy); background: var(--busy-bg); }
.chip.t-wait { border-color: var(--warn); color: var(--warn-ink); background: var(--warn-bg); }
.chip.t-done { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.chip.t-paused, .chip.t-closed { color: var(--muted); }
.card.task { color: inherit; }
.card.task .exs { margin-top: var(--s2); }
.ex { display: flex; gap: var(--s3); align-items: flex-start; padding: 6px 0 6px 10px; border-left: 3px solid var(--c, var(--border)); margin-top: var(--s2); }
.ex .dot { margin-top: 6px; }
.exb { min-width: 0; }
.exb .nm { font-weight: 700; overflow-wrap: anywhere; }
.exb a { text-decoration: underline; text-decoration-color: var(--border); }
.prov.waiting { color: var(--warn-ink); font-weight: 700; }
.tbody .ttext { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: var(--s2); }
.tbtns2 { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.tform { display: flex; flex-direction: column; gap: var(--s2); }
.tform textarea.input { height: auto; min-height: 120px; padding: 10px var(--s3); line-height: 1.4; resize: vertical; }
.tbtns { display: flex; align-items: center; gap: var(--s2); }
.trec { display: inline-flex; align-items: center; gap: 8px; color: var(--bad); font-weight: 700; font-variant-numeric: tabular-nums; }
.tchips { margin-top: var(--s2); }
.opts.col { display: flex; flex-direction: column; gap: var(--s2); }
.optrow { text-align: left; min-height: var(--ctl); padding: 0 var(--s3); border: 1px solid var(--border); background: var(--card); font-weight: 600; }
.optrow[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-bg); box-shadow: inset 0 0 0 1px var(--primary); }
.exrow { display: flex; align-items: center; gap: var(--s3); min-height: var(--ctl); margin-top: var(--s2); padding: 0 var(--s3); border: 1px solid var(--border); background: var(--card); }
.exrow input { flex: none; width: 20px; height: 20px; accent-color: var(--primary); margin: 0; }
.exrow .nm { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.exrow .age { flex: none; color: var(--muted); font-size: var(--fs-xs); }
.toast { position: fixed; left: 50%; bottom: calc(var(--s4) + var(--sab)); transform: translateX(-50%); max-width: calc(100vw - 28px); padding: 10px var(--s4); background: var(--fg); color: var(--bg); font-size: var(--fs-sm); font-weight: 600; z-index: 90; }

/* ---------------------------------------------------------------- 7 login: the orange bar, the large handwritten mark */
.login { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.login .lwrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--s5) var(--pad); overflow: auto; }
.lcard { width: min(360px, 100%); display: flex; flex-direction: column; gap: var(--s3); background: var(--card); border: 1px solid var(--border); padding: var(--s6) var(--s5); }
.lbrand { align-self: flex-start; font-size: 64px; color: var(--bar); top: 0; line-height: 1.1; }
.lcard h1 { font-size: 20px; font-weight: 700; margin-bottom: var(--s2); }
.lcard .btn { width: 100%; }
.lcard .btn.light, .lcard #lsubmit:not(.primary) { }
.lerr { min-height: 18px; margin: 0; color: var(--bad); font-size: var(--fs-sm); font-weight: 600; }
/* with Face ID offered, the password button steps back to the outlined look */
.lcard #lface:not([hidden]) ~ #lsubmit { background: var(--card); color: var(--fg); border-color: var(--border); }

/* ---------------------------------------------------------------- 8 desktop: the list on the left, the chat on the right */
@media (min-width: 900px) {
  .cols { max-width: 1680px; width: 100%; margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
  .left { flex: none; width: 460px; border-right: 1px solid var(--border); background: var(--bg); }
  .right { display: flex; flex: 1; background: #fbfbfc; }
  .shell[data-route="chat"] .left { display: flex; }
  .chead .back { display: none; }
  .chead { padding: var(--s4) var(--s6) 0; }
  .nowbar { margin: 0 var(--s6); }
  .feed { padding: var(--s3) var(--s6) var(--s4); }
  .composer { padding: var(--s3) var(--s6) var(--s4); }
  .msg { max-width: min(78%, 680px); }
}