/* Scrum Master, design C: warm, quiet, agent-first. Light and dark share these tokens. */
:root {
  --top: 57px;
  --bg: #fbfaf8;
  --surface: #ffffff;
  --sunken: #f4f3ef;
  --hover: #f3f2ee;
  --line: #ecebe7;
  --line-strong: #e3e1db;
  --text: #1d1d1f;
  --text-2: #55534f;
  --muted: #8a8883;
  --faint: #b5b3ad;
  --accent: #d9480f;
  --accent-ink: #c2410c;
  --accent-soft: #fff4ec;
  --accent-line: #ffd8c2;
  --on-accent: #ffffff;
  --danger: #c92a2a;
  --danger-soft: #fff0f0;
  --flag: #f59f00;
  --ok: #2f9e44;
  --ok-soft: #ebfbee;
  --info: #1971c2;
  --info-soft: #e7f5ff;
  --epic: #9c36b5;
  --epic-soft: #f8f0fc;
  --col: #f3f2ee;
  --raised: #ffffff;
  --card-shadow: 0 1px 1px rgba(40, 30, 20, 0.08), 0 0 1px rgba(40, 30, 20, 0.24);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
  --shadow-lift: 0 8px 24px rgba(60, 40, 20, 0.12);
  --shadow-panel: -10px 0 30px rgba(60, 40, 20, 0.1);
  --chart-1: #d9480f;
  --chart-2: #e0ddd5;
  --chart-3: #1971c2;
  --chart-4: #9c36b5;
  --chart-5: #f59f00;
  --chart-6: #2f9e44;
  --chart-7: #868e96;
  --chart-8: #e64980;
  color-scheme: light;
  font: 13.5px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #161514; --surface: #1f1e1c; --sunken: #2a2826; --hover: #2a2826; --line: #2e2c29; --line-strong: #3d3a36;
    --text: #ecebe8; --text-2: #c4c1bb; --muted: #9a9893; --faint: #6b6965; --accent: #f76707; --accent-ink: #ff922b;
    --accent-soft: #33210f; --accent-line: #6b3a1c; --danger: #ff6b6b; --danger-soft: #3b1f1f; --flag: #fab005;
    --ok: #51cf66; --ok-soft: #1c3322; --info: #74c0fc; --info-soft: #1a2b3b; --epic: #da77f2; --epic-soft: #2f1f36;
    --col: #1b1a18; --raised: #272523; --card-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.4); --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-panel: -10px 0 30px rgba(0, 0, 0, 0.45);
    --chart-1: #ff922b; --chart-2: #45413c; --chart-3: #74c0fc; --chart-4: #da77f2; --chart-5: #fcc419; --chart-6: #69db7c; --chart-7: #adb5bd; --chart-8: #f783ac;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #161514; --surface: #1f1e1c; --sunken: #2a2826; --hover: #2a2826; --line: #2e2c29; --line-strong: #3d3a36;
  --text: #ecebe8; --text-2: #c4c1bb; --muted: #9a9893; --faint: #6b6965; --accent: #f76707; --accent-ink: #ff922b;
  --accent-soft: #33210f; --accent-line: #6b3a1c; --danger: #ff6b6b; --danger-soft: #3b1f1f; --flag: #fab005;
  --ok: #51cf66; --ok-soft: #1c3322; --info: #74c0fc; --info-soft: #1a2b3b; --epic: #da77f2; --epic-soft: #2f1f36;
  --col: #1b1a18; --raised: #272523; --card-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4); --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-panel: -10px 0 30px rgba(0, 0, 0, 0.45);
  --chart-1: #ff922b; --chart-2: #45413c; --chart-3: #74c0fc; --chart-4: #da77f2; --chart-5: #fcc419; --chart-6: #69db7c; --chart-7: #adb5bd; --chart-8: #f783ac;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
a { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--surface); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1; }
.hint { color: var(--muted); font-size: 12px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
kbd { font: 11px ui-monospace, monospace; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--surface); }
code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--sunken); border-radius: 4px; padding: 1px 4px; }
pre { background: var(--sunken); padding: 10px 12px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; font-size: 12px; }
pre code { background: none; padding: 0; }
.main { flex: 1; min-height: 0; overflow: auto; }
.app-page .main { overflow: hidden; }

/* ---------- top bar ---------- */
.top { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 52px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 15; }
.brand { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand-mark { width: 24px; height: 24px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; flex: none; }
.top-center { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.top-search { position: relative; flex: 0 1 460px; min-width: 160px; }
.top-search > .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.top-search input { width: 100%; height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 34px 0 34px; background: var(--bg); }
.top-search input::placeholder { color: var(--muted); }
.top-search input:focus { border-color: var(--accent); outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); }
.top-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); border-bottom-width: 1px; }
.top-search input:focus ~ kbd { display: none; }
.top-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.icon-link { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--text-2); cursor: pointer; list-style: none; background: none; border: 0; padding: 0; flex: none; }
.icon-link::-webkit-details-marker, .profile::-webkit-details-marker, .icon-btn::-webkit-details-marker { display: none; }
.icon-link:hover, .icon-link[aria-current='page'], .menu-wrap[open] > .icon-link { background: var(--hover); color: var(--text); }
.search-toggle { display: none; }
.badge { position: absolute; top: 3px; right: 3px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 9.5px; line-height: 1; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.badge[hidden] { display: none; }
.profile { list-style: none; cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; margin-left: 4px; }
.profile:hover, .menu-wrap[open] > .profile { box-shadow: 0 0 0 2px var(--accent-line); }
.menu-wrap { position: relative; flex: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-lift); padding: 4px; min-width: 200px; display: grid; z-index: 30; }
details:not([open]) > .menu-pop { display: none; }
.menu-pop.left { right: auto; left: 0; }
.menu-pop.wide { min-width: 260px; }
.menu-pop a, .menu-pop button { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--hover); }
.menu-sec { margin: 6px 10px 4px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.profile-card { display: flex; gap: 10px; align-items: center; padding: 8px 10px 10px; }
.profile-card b { display: block; }
.profile-card span { color: var(--muted); font-size: 12.5px; }

/* ---------- project header ---------- */
.project-head { flex: none; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 24px 0; }
.project-title { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.project-icon { width: 24px; height: 24px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); display: grid; place-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; flex: none; }
.project-name { font-size: 16px; font-weight: 600; white-space: nowrap; }
.tabs { display: flex; gap: 4px; margin-top: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { position: relative; padding: 8px 10px 11px; color: var(--text-2); text-decoration: none; white-space: nowrap; font-weight: 500; border-radius: 6px 6px 0 0; }
.tabs a:hover { color: var(--text); background: var(--hover); }
.tabs a.on { color: var(--accent-ink); font-weight: 600; }
.tabs a.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }

/* ---------- buttons, tags, avatars ---------- */
.btn { display: inline-flex; gap: 6px; align-items: center; justify-content: center; height: 32px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 6px; padding: 0 12px; font-weight: 500; cursor: pointer; text-decoration: none; color: var(--text); white-space: nowrap; flex: none; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); background: var(--accent); }
.btn.soft { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); font-weight: 600; }
.btn.subtle { border-color: transparent; background: none; color: var(--text-2); }
.btn.subtle:hover, .btn.subtle[aria-expanded='true'] { background: var(--hover); color: var(--text); }
.btn.subtle[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent-ink); }
.btn.ghost { border-color: transparent; background: none; color: var(--text-2); }
.btn.ghost:hover { background: var(--hover); color: var(--text); }
.btn.danger { color: var(--danger); }
.btn.small { height: 28px; padding: 0 10px; font-size: 13px; }
.btn.square { width: 32px; padding: 0; }
.btn.small.square { width: 28px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn .count { margin-left: 2px; }
.create { height: 32px; padding: 0 12px 0 10px; }
.icon-btn { background: none; border: 0; padding: 0; border-radius: 6px; cursor: pointer; display: inline-grid; place-items: center; color: var(--text-2); width: 28px; height: 28px; list-style: none; flex: none; }
.icon-btn:hover, .menu-wrap[open] > .icon-btn { background: var(--hover); color: var(--text); }
.av { --av: #8a8883; display: inline-grid; place-items: center; border-radius: 50%; flex: none; overflow: hidden; font-weight: 700; letter-spacing: 0.01em; color: color-mix(in srgb, var(--av) 72%, var(--text)); background: color-mix(in srgb, var(--av) 18%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av) 30%, transparent); }
.av { position: relative; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; background: var(--surface); }
.av.un { background: var(--sunken); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ico { flex: none; display: block; }
.iv-copy-key { width: 26px; height: 26px; margin-left: -2px; color: var(--muted); }
.iv-copy-key:hover { color: var(--text); }
.iv-modal-wrap { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(15, 14, 12, 0.48); }
.iv-modal { display: flex; width: min(1180px, 94vw); height: min(900px, 92vh); border-radius: 12px; background: var(--bg); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); overflow: hidden; animation: iv-pop 0.14s ease-out; }
.iv-modal-body { flex: 1; overflow: auto; max-width: none; padding: 16px 28px 36px; margin: 0; }
/* In the pop-up the head stays in view while the issue scrolls, so Close is always top-right. */
.iv-modal .iv-modal-body { padding-top: 0; }
.iv-modal .iv-page > .iv-head { position: sticky; top: 0; z-index: 3; height: auto; min-height: 32px; padding: 14px 0 8px; background: var(--bg); }
.iv-modal .iv-side { top: 60px; }
html.modal-open { overflow: hidden; }
@keyframes iv-pop { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .iv-modal { animation: none; } }
@media (max-width: 640px) { .iv-modal { width: 100vw; height: 100dvh; border-radius: 0; } .iv-modal-body { padding: 12px 16px 28px; } .iv-modal .iv-page > .iv-head { padding-top: 10px; } }
.type-emoji { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.lz.st { background: transparent; border: 1px solid var(--line-strong); font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 600; color: var(--text-2); }
.lz.st[data-cat='done'] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.lz.st[data-cat='in_progress'] { color: var(--accent-ink); border-color: var(--accent-line); }
.lz { display: inline-flex; align-items: center; height: 20px; font-size: 12px; padding: 0 6px; border-radius: 4px; background: var(--sunken); color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz.cr { background: var(--danger-soft); color: var(--danger); }
.lz.epic { background: var(--epic-soft); color: var(--epic); font-weight: 600; }
.lz.blocked { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.lz.more { background: none; color: var(--muted); padding: 0 2px; }
.pts { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--sunken); color: var(--text-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; background: var(--sunken); color: var(--text-2); border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 700; }
.count.live-count { background: var(--accent); color: var(--on-accent); }
.status-pill { display: inline-flex; align-items: center; height: 20px; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; background: var(--sunken); color: var(--text-2); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em; }
.status-pill[data-cat='done'] { background: var(--ok-soft); color: var(--ok); }
.status-pill[data-cat='in_progress'] { background: var(--info-soft); color: var(--info); }
.seg { display: inline-flex; background: var(--sunken); border-radius: 6px; padding: 2px; flex: none; height: 32px; }
.seg button { border: 0; background: none; padding: 0 10px; border-radius: 4px; color: var(--text-2); cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; }
.seg button[aria-pressed='true'] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

/* ---------- board ---------- */
.board-page { display: flex; height: 100%; min-height: 0; position: relative; }
.board-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 24px 0; }
.board-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 4px; }
.board-title h1 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-title .actions { display: flex; align-items: center; gap: 8px; }
.board-title .days { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; white-space: nowrap; margin-right: 4px; }
.board-sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; min-width: 0; }
.board-sub .goal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.board-sub .goal b { color: var(--text-2); font-weight: 600; }
.board-sub .meter { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.progress { width: 120px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; display: inline-block; flex: none; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 8px; margin: 16px 0 12px; min-width: 0; }
.board-search { position: relative; flex: 0 0 200px; }
.board-search .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.board-search input { width: 100%; height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px 0 32px; background: var(--surface); }
.board-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.people-filter { display: flex; align-items: center; padding-left: 6px; flex: none; }
.av-btn { border: 0; padding: 0; margin-left: -6px; background: none; cursor: pointer; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); position: relative; display: grid; }
.av-btn:hover { z-index: 2; transform: translateY(-1px); }
.av-btn[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--accent); z-index: 1; }
.quick-filters { display: flex; align-items: center; gap: 4px; flex: none; }
.quick-filters::-webkit-scrollbar { display: none; }
.qf { height: 32px; padding: 0 10px; border-radius: 6px; border: 0; background: none; color: var(--text-2); font-weight: 500; cursor: pointer; white-space: nowrap; flex: none; }
.qf:hover { background: var(--hover); color: var(--text); }
.qf[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent-line); }
.qf.clear { color: var(--accent-ink); }
.toolbar-right { display: flex; align-items: center; gap: 4px; flex: none; }
.toolbar-right .sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; }

.board { flex: 1; min-height: 0; overflow: auto; margin: 0 -24px; padding: 0 24px 24px; }
.loading, .empty-board { color: var(--muted); padding: 24px 4px; }
.heads, .cells { display: grid; column-gap: 10px; }
.heads { position: sticky; top: 0; z-index: 3; background: var(--bg); }
.h { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; background: var(--col); border-radius: 8px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.03em; }
.single .h { border-radius: 8px 8px 0 0; }
.h .col-toggle { display: flex; gap: 8px; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; flex: 1; text-align: left; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; height: 100%; }
.h .col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h .n { color: var(--muted); font-weight: 600; }
.h .w { font-size: 11px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.h.over { background: var(--danger-soft); }
.h.over .w, .h.over .n { color: var(--danger); }
.h.done-col .col-name::after { content: '✓'; margin-left: 6px; color: var(--ok); }
.h.collapsed { padding: 0; justify-content: center; }
.h.collapsed .col-toggle { justify-content: center; }
.h.collapsed .col-name, .h.collapsed .dot { display: none; }
.lane { border-top: 1px solid var(--line); margin-top: 12px; }
.single .lane { border-top: 0; margin-top: 0; }
.lt { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; font-weight: 600; color: var(--text); }
.lt:hover .lt-name { text-decoration: underline; text-underline-offset: 3px; }
.lt .chev { width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-2); border-radius: 4px; transition: transform 0.15s; }
.lt[aria-expanded='false'] .chev { transform: rotate(-90deg); }
.lt .lt-count { color: var(--muted); font-weight: 500; font-size: 13px; }
.cell { background: var(--col); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 64px; min-width: 0; transition: background 0.12s, box-shadow 0.12s; }
.single .cell { border-radius: 0 0 8px 8px; padding-top: 2px; min-height: calc(100vh - var(--top) - 230px); }
.cell.over { background: color-mix(in srgb, var(--accent-soft) 75%, var(--col)); box-shadow: inset 0 0 0 2px var(--accent-line); }
.cell.collapsed { background: var(--col); }
.drop-slot { height: 48px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 2px var(--accent-line); flex: none; }
.quick-add { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 6px; border: 0; background: none; color: var(--text-2); cursor: pointer; font-weight: 500; text-align: left; }
.quick-add:hover { background: var(--hover); color: var(--text); }
.quick-form textarea { width: 100%; border: 2px solid var(--accent); border-radius: 6px; padding: 8px 10px; background: var(--raised); resize: none; display: block; box-shadow: var(--card-shadow); }
.quick-form .hint { margin: 4px 2px 2px; }

/* cards */
.card { background: var(--raised); border-radius: 6px; padding: 10px 10px 8px 12px; box-shadow: var(--card-shadow); cursor: grab; min-width: 0; position: relative; }
.card:hover { background: color-mix(in srgb, var(--raised) 94%, var(--text)); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.card.dragging { opacity: 0.35; }
.card.selected { box-shadow: 0 0 0 2px var(--accent), var(--card-shadow); }
.card.flag { background: color-mix(in srgb, var(--flag) 9%, var(--raised)); }
.card .t { margin: 0 0 8px; overflow-wrap: anywhere; color: var(--text); line-height: 1.42; }
.r2 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: -2px 0 8px; min-width: 0; }
.r2:empty { display: none; }
.r3 { display: flex; align-items: center; gap: 4px; min-height: 24px; color: var(--muted); font-size: 12px; min-width: 0; }
.r3 > .ico { margin-right: 2px; }
.r3 .key { white-space: nowrap; font-weight: 600; color: var(--text-2); flex: none; }
.r3 .grow { min-width: 0; }
.r3 .key.done { text-decoration: line-through; color: var(--muted); }
.r3 .icon-btn { width: 24px; height: 24px; border-radius: 50%; }
.r3 .icon-btn.pri { width: 20px; border-radius: 4px; }
.r3 .pts { margin: 0 2px; }
.due { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-2); font-size: 12px; white-space: nowrap; }
.due.overdue { color: var(--danger); background: var(--danger-soft); box-shadow: none; font-weight: 600; }
.mini { display: inline-flex; gap: 3px; align-items: center; color: var(--muted); white-space: nowrap; font-size: 12px; }
.flag-ico { color: var(--flag); }
.pipe { margin: 0 0 8px; }
.bars { display: flex; gap: 3px; }
.bars i { flex: 1; height: 4px; border-radius: 2px; background: var(--line-strong); }
.bars i.ok { background: var(--accent); }
.bars i.now { background: repeating-linear-gradient(90deg, var(--accent) 0 4px, var(--accent-line) 4px 8px); background-size: 16px 100%; animation: slide 1s linear infinite; }
.bars i.err { background: var(--danger); }
@keyframes slide { to { background-position: 16px 0; } }
.lbl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 5px; gap: 8px; }
.lbl b { color: var(--accent-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe.error .lbl b { color: var(--danger); }
.steps { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .bars i.now { animation: none; } .live i { animation: none !important; } }

/* agent rail */
.rail { width: 320px; flex: none; background: var(--surface); border-left: 1px solid var(--line); padding: 16px; overflow: auto; }
.rail.closed { display: none; }
.rail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rail-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.rail-sub { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; }
.rail-empty { color: var(--muted); font-size: 13px; background: var(--col); border-radius: 8px; padding: 14px; margin: 0; }
.run { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.run:hover { border-color: var(--line-strong); background: var(--bg); }
.run.bad { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.run-open { display: grid; gap: 2px; background: none; border: 0; padding: 0; text-align: left; width: 100%; cursor: pointer; min-width: 0; }
.run-key { font-size: 12px; color: var(--muted); }
.run-title { font-weight: 600; margin: 1px 0 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.run-state { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run.bad .run-state { color: var(--danger); }
.live { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--accent-ink); min-width: 0; }
.live span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px transparent; } }
.run-links { display: flex; gap: 14px; margin-top: 8px; }
.run-link { font-size: 12.5px; color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.run-link:hover { text-decoration: underline; }
.panel-open .rail { display: none; }

/* side panel */
.panel { width: 440px; flex: none; background: var(--surface); border-left: 1px solid var(--line); padding: 12px 20px 32px; overflow: auto; }
.panel[hidden] { display: none; }
.p-head { display: flex; align-items: center; gap: 2px; height: 32px; }
.p-key { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--text-2); white-space: nowrap; text-decoration: none; font-size: 13px; }
.p-key:hover { text-decoration: underline; }
.p-crumb { color: var(--muted); margin: 0 4px; }
.p-act { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 6px; border: 0; background: none; color: var(--text-2); cursor: pointer; text-decoration: none; font-size: 13px; white-space: nowrap; }
.p-act:hover { background: var(--hover); color: var(--text); }
.p-act[aria-pressed='true'] { color: var(--accent-ink); font-weight: 600; }
.p-act.only { width: 32px; padding: 0; justify-content: center; }
.p-title { display: block; width: calc(100% + 12px); font-size: 22px; line-height: 1.3; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; margin: 10px -6px 12px; background: none; resize: none; overflow: hidden; color: var(--text); }
.p-title:hover { background: var(--hover); }
.p-title:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); }
.p-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.status-select { position: relative; display: inline-flex; }
.status-select select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 30px 0 12px; border-radius: 6px; border: 0; font-weight: 600; cursor: pointer; background: var(--sunken); color: var(--text); }
.status-select[data-cat='in_progress'] select { background: var(--info-soft); color: var(--info); }
.status-select[data-cat='done'] select { background: var(--ok-soft); color: var(--ok); }
.status-select .ico { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; color: currentColor; }
.status-select[data-cat='in_progress'] .ico { color: var(--info); }
.status-select[data-cat='done'] .ico { color: var(--ok); }
.p-box { border: 1px solid var(--line); border-radius: 8px; }
.panel .p-box > h3 { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; }
.p-props { display: grid; padding: 6px 12px 8px; }
.p-prop { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; min-height: 36px; gap: 8px; }
.p-prop > label, .p-prop > span:first-child { color: var(--text-2); font-size: 13px; font-weight: 500; }
.p-prop .ctl { display: flex; align-items: center; gap: 4px; min-width: 0; }
.p-prop .lead { width: 24px; flex: none; display: grid; place-items: center; }
.p-prop select, .p-prop input:not([type='checkbox']) { width: 100%; min-width: 0; height: 32px; border: 1px solid transparent; border-radius: 6px; padding: 0 8px; background: transparent; color: var(--text); font-size: 13.5px; }
.p-prop select:hover, .p-prop input:not([type='checkbox']):hover { background: var(--hover); }
.p-prop select:focus, .p-prop input:not([type='checkbox']):focus { outline: none; border-color: var(--accent); background: var(--surface); }
.p-prop input::placeholder { color: var(--muted); }
.p-prop .val { padding: 0 9px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-prop .switch { display: flex; gap: 8px; align-items: center; padding: 0 9px; color: var(--text); }
.p-prop input[type='checkbox'], .list-rows input[type='checkbox'] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.panel h3 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin: 24px 0 8px; color: var(--text); }
.panel h3 .hint, .panel h3 .watchers { font-weight: 500; }
.panel textarea[data-field='description'], .composer textarea { display: block; width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; background: var(--surface); resize: vertical; }
.panel textarea[data-field='description']:focus, .composer textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.p-agent { border: 1px solid var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border-radius: 8px; padding: 12px 14px; margin-top: 16px; }
.p-agent h3 { margin: 0 0 10px; color: var(--accent-ink); }
.p-agent .hint { margin: 0 0 10px; }
.p-links { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; font-size: 13px; align-items: center; }
.p-links:empty { display: none; }
.p-links a { font-weight: 600; text-decoration: none; }
.list-rows { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.list-rows:empty { display: none; }
.list-rows li { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-top: 1px solid var(--line); min-width: 0; }
.list-rows li:first-child { border-top: 0; }
.list-rows li:hover { background: var(--hover); }
.list-rows .k { color: var(--muted); font-size: 12px; white-space: nowrap; font-weight: 600; }
.list-rows .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.list-rows .ttl:hover { text-decoration: underline; }
.list-rows .done .ttl, .list-rows .done .k { text-decoration: line-through; color: var(--muted); }
.list-rows .phrase { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sub-progress { width: 100px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-left: auto; }
.sub-progress i { display: block; height: 100%; background: var(--ok); }
.inline-form { display: flex; gap: 6px; margin-top: 8px; }
.inline-form input, .inline-form select { height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 9px; min-width: 0; background: var(--surface); }
.inline-form input { flex: 1; }
.inline-form input:focus, .inline-form select:focus { outline: none; border-color: var(--accent); }
.comments { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.comment { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.comment .who { font-size: 13px; }
.comment .who b { font-weight: 600; }
.comment .who time { color: var(--muted); margin-left: 8px; }
.comment .body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.mention { color: var(--accent-ink); font-weight: 600; background: var(--accent-soft); border-radius: 4px; padding: 0 3px; }
.composer { position: relative; margin-top: 16px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.composer .row-end { grid-column: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.suggest { position: absolute; left: 50px; bottom: calc(100% - 8px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-lift); padding: 4px; display: grid; min-width: 220px; z-index: 5; }
.suggest button { display: flex; gap: 8px; align-items: center; background: none; border: 0; padding: 6px 8px; border-radius: 6px; text-align: left; cursor: pointer; }
.suggest button.on, .suggest button:hover { background: var(--hover); }
.watchers { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.p-activity { list-style: none; padding: 0; margin: 0; }
.p-activity li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; color: var(--text-2); }
.p-activity li:last-child { border-bottom: 0; }
.p-activity time { color: var(--muted); font-size: 12px; margin-right: 8px; }

/* menus and toasts */
.menu { position: fixed; z-index: 30; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-lift); padding: 4px; min-width: 210px; display: grid; }
.menu button { display: flex; gap: 8px; align-items: center; background: none; border: 0; padding: 0 10px; height: 34px; border-radius: 6px; text-align: left; cursor: pointer; white-space: nowrap; }
.menu button:hover, .menu button:focus { background: var(--hover); outline: none; }
.menu button[aria-checked='true'] { font-weight: 600; color: var(--accent-ink); }
.menu button[aria-checked='true']::after { content: ''; width: 10px; height: 6px; margin-left: auto; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -2px); }
.menu button:disabled { opacity: 0.45; cursor: default; }
.menu .sec { font-size: 11px; color: var(--muted); padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 20px); background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 6px; opacity: 0; transition: 0.2s; pointer-events: none; z-index: 40; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.with-link.show { pointer-events: auto; }
.toast a { color: inherit; font-weight: 700; margin-left: 6px; }

/* ---------- generic pages ---------- */
.page { width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 24px 48px; }
.page.narrow { max-width: 880px; }
.page-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1, .page h1 { font-size: 22px; margin: 2px 0 0; }
.page-head .hint { margin-left: auto; }
.crumb { margin: 0; font-size: 12.5px; color: var(--muted); }
.crumb a { color: var(--muted); }
.page h2 { font-size: 15px; margin: 22px 0 8px; }
.notice, .alert { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; }
.alert { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.form { display: grid; gap: 6px; max-width: 680px; }
.form label { margin-top: 8px; font-weight: 600; font-size: 12.5px; }
.form input, .form textarea, .form select, .table input, .table select, .inline input, .inline select { border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 9px; background: var(--surface); width: 100%; min-width: 0; }
.form input:focus, .form textarea:focus, .form select:focus, .inline input:focus, .inline select:focus { outline: none; border-color: var(--accent); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form button { margin-top: 14px; justify-self: start; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .actions { display: flex; gap: 6px; }
.tag-sys { font-size: 11px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 6px; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline select, .inline input { width: auto; }
.issue { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
.issue h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.description { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 7px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.timeline time { color: var(--muted); font-size: 12px; margin-right: 8px; }
.panel-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.panel-box h2 { margin: 0 0 8px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text); }
dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; }
dt { color: var(--muted); }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.state { font-weight: 600; }
.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty-state h2 { color: var(--text); }

/* ---------- backlog ---------- */
.bl-page { padding: 16px 24px 48px; }
.bl-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 32px; }
.bl-title h1 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; }
.bl-toolbar { margin: 16px 0 16px; }
.bl-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bl-section { background: var(--col); border-radius: 8px; padding: 4px 8px 8px; }
.bl-section.over { box-shadow: inset 0 0 0 2px var(--accent-line); }
.bl-head { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; }
.bl-toggle { display: flex; align-items: center; gap: 8px; min-width: 0; background: none; border: 0; padding: 4px 6px 4px 0; border-radius: 6px; cursor: pointer; text-align: left; }
.bl-toggle .chev { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-2); border-radius: 4px; transition: transform 0.15s; flex: none; }
.bl-toggle:hover .chev { background: var(--hover); }
.bl-toggle[aria-expanded='false'] .chev { transform: rotate(-90deg); }
.bl-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
.bl-goal { margin: -4px 4px 8px 36px; color: var(--text-2); font-size: 13px; }
.bl-goal b { font-weight: 600; color: var(--text); margin-right: 4px; }
.state-tag { display: inline-flex; align-items: center; height: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0 6px; border-radius: 4px; background: var(--sunken); color: var(--text-2); }
.state-tag.active { background: var(--info-soft); color: var(--info); }
.state-tag.closed { background: var(--ok-soft); color: var(--ok); }
.state-tag.planned { background: var(--sunken); color: var(--text-2); }
.totals { display: inline-flex; gap: 4px; margin-right: 4px; }
.tot { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 12px; font-weight: 700; background: var(--line-strong); color: var(--text-2); }
.tot[data-cat='in_progress'] { background: var(--info-soft); color: var(--info); }
.tot[data-cat='done'] { background: var(--ok-soft); color: var(--ok); }
.bl-list { list-style: none; margin: 0; padding: 0; background: var(--raised); border-radius: 6px; box-shadow: var(--card-shadow); overflow: hidden; }
.bl-list:empty { display: none; }
.bl-row { display: grid; grid-template-columns: 18px 16px 64px minmax(0, 1fr) minmax(0, 170px) 128px 36px 28px 28px; gap: 10px; align-items: center; height: 40px; padding: 0 8px 0 4px; border-top: 1px solid var(--line); background: var(--raised); cursor: grab; }
.bl-row:first-child { border-top: 0; }
.bl-row:hover { background: color-mix(in srgb, var(--raised) 95%, var(--text)); }
.bl-row.dragging { opacity: 0.4; }
.bl-row .grip { color: var(--faint); opacity: 0; display: grid; place-items: center; }
.bl-row:hover .grip { opacity: 1; }
.bl-row .k { color: var(--text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.bl-row .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.bl-row .k:hover, .bl-row .ttl:hover { text-decoration: underline; }
.bl-row .cell-epic { display: flex; justify-content: flex-end; min-width: 0; }
.bl-row .cell-status { display: flex; min-width: 0; }
.bl-row .cell-pts, .bl-row .cell-av { display: grid; place-items: center; }
.pts.empty { background: none; color: var(--faint); }
.row-menu { width: 28px; height: 28px; opacity: 0; }
.bl-row:hover .row-menu, .row-menu:focus-visible, .row-menu[aria-expanded='true'] { opacity: 1; }
.status-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; max-width: 100%; padding: 0 4px 0 8px; border: 0; border-radius: 4px; background: var(--sunken); color: var(--text-2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; overflow: hidden; }
.status-btn:hover { filter: brightness(0.96); }
.status-btn[data-cat='in_progress'] { background: var(--info-soft); color: var(--info); }
.status-btn[data-cat='done'] { background: var(--ok-soft); color: var(--ok); }
.bl-empty { margin: 0; padding: 14px 16px; border: 1.5px dashed var(--line-strong); border-radius: 6px; color: var(--muted); font-size: 13px; text-align: center; }
.bl-list:not(:empty) + .bl-empty { margin-top: 6px; }
.bl-create { margin-top: 4px; }
.bl-create .quick-add { width: 100%; }
.bl-create-form { display: flex; gap: 6px; align-items: center; padding: 4px 0; }
.bl-create-form select, .bl-create-form input { height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 8px; background: var(--raised); min-width: 0; }
.bl-create-form input { flex: 1; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); outline: none; }
.bl-drop { height: 2px; background: var(--accent); margin: -1px 8px; list-style: none; position: relative; z-index: 1; }

/* dialogs */
.dlg { border: 0; border-radius: 10px; padding: 0; width: min(480px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgba(30, 20, 10, 0.25); }
.dlg::backdrop { background: rgba(20, 15, 10, 0.35); }
.dlg header { display: flex; align-items: center; gap: 8px; padding: 16px 20px 4px; }
.dlg header h2 { margin: 0; font-size: 18px; font-weight: 600; flex: 1; }
.dlg-body { padding: 8px 20px 4px; display: grid; gap: 14px; }
.dlg footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 18px; }
.dlg-note { margin: 0; color: var(--text-2); }
.field { display: grid; gap: 6px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field > span.hint { font-weight: 400; color: var(--muted); font-size: 12px; }
.field input, .field select, .field textarea { height: 36px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; background: var(--surface); width: 100%; }
.field textarea { height: auto; padding: 8px 10px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dlg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dlg-stats div { background: var(--col); border-radius: 8px; padding: 10px 12px; }
.dlg-stats b { display: block; font-size: 20px; }
.dlg-stats span { color: var(--muted); font-size: 12.5px; }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }

/* ---------- sprints ---------- */
.sprint-cards { display: grid; gap: 14px; }
.sprint-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.sprint-card.active { border-color: var(--accent-line); box-shadow: inset 3px 0 0 var(--accent); }
.sprint-card header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sprint-card h2 { margin: 0; font-size: 15px; }
.sprint-card .goal { color: var(--text-2); margin: 0; }
.stats { display: flex; gap: 24px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.stats b { display: block; color: var(--text); font-size: 17px; }
.sprint-card form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.sprint-card form input, .sprint-card form select { border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 8px; min-width: 0; }
.sprint-card .progress { width: 100%; }

/* ---------- reports ---------- */
:root { --series-accent: #d9480f; --series-blue: #2a78d6; --series-neutral: #d9d6ce; --series-ideal: #b5b3ad; --flow-todo: #d9d6ce; --flow-1: #2a78d6; --flow-2: #e87ba4; --flow-3: #eda100; --flow-4: #6250d6; --flow-5: #eb6834; --flow-done: #1baf7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --series-accent: #e8590c; --series-blue: #3987e5; --series-neutral: #4a4744; --series-ideal: #6b6965; --flow-todo: #4a4744; --flow-1: #3987e5; --flow-2: #d55181; --flow-3: #c98500; --flow-4: #9085e9; --flow-5: #d95926; --flow-done: #199e70; } }
:root[data-theme='dark'] { --series-accent: #e8590c; --series-blue: #3987e5; --series-neutral: #4a4744; --series-ideal: #6b6965; --flow-todo: #4a4744; --flow-1: #3987e5; --flow-2: #d55181; --flow-3: #c98500; --flow-4: #9085e9; --flow-5: #d95926; --flow-done: #199e70; }
.rp-page { padding: 16px 24px 48px; }
.rp-title { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.rp-title h1 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; }
.rp-page .crumb { margin-bottom: 6px; }
.rp-desc { color: var(--text-2); margin: 2px 0 0; }
.rp-group { margin-bottom: 28px; }
.rp-group > h2 { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px; }
.rp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.rp-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; color: var(--text); text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s; }
.rp-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); }
.rp-card-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.rp-open { margin-left: auto; color: var(--muted); transition: transform 0.12s; }
.rp-card:hover .rp-open { transform: translateX(3px); color: var(--accent-ink); }
.rp-card .rp-desc { font-size: 13px; color: var(--muted); margin: 0; }
.rp-thumb { display: grid; place-items: center; background: var(--bg); border-radius: 6px; height: 128px; margin: 6px 0 2px; overflow: hidden; padding: 6px; }
.rp-thumb .chart { height: 116px; width: 100%; }
.rp-thumb-empty { color: var(--faint); font-size: 13px; }
.rp-figure { display: grid; justify-items: center; gap: 4px; width: 80%; }
.rp-figure b { font-size: 36px; line-height: 1; font-weight: 600; }
.rp-figure span { color: var(--text-2); font-size: 13px; }
.progress.wide { width: 100%; margin-top: 6px; }
.rp-finding { font-size: 13px; color: var(--text-2); }
.rp-picker { display: flex; align-items: center; gap: 8px; }
.rp-picker label { color: var(--text-2); font-weight: 500; }
.rp-picker select { height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 8px; background: var(--surface); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; }
.stat span { color: var(--muted); font-size: 12.5px; }
.stat b { font-size: 20px; font-weight: 600; }
.rp-chart { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px 16px 8px; }
.rp-chart header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-chart h2 { font-size: 14px; font-weight: 600; margin: 0; flex: 1 1 260px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-wrap { position: relative; overflow-x: auto; }
.chart-wrap .chart { min-width: 640px; }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--text); color: var(--bg); font-size: 12.5px; line-height: 1.5; padding: 8px 10px; border-radius: 6px; box-shadow: var(--shadow-lift); max-width: 260px; font-variant-numeric: tabular-nums; }
.chart-tip b { display: block; margin-bottom: 2px; }
.rp-empty { background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 48px 24px; text-align: center; color: var(--text-2); }
.rp-empty h2 { font-size: 16px; margin: 0 0 6px; color: var(--text); }
.rp-table { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.rp-table summary { cursor: pointer; padding: 12px 16px; font-weight: 600; display: flex; gap: 8px; align-items: center; list-style: none; }
.rp-table summary::-webkit-details-marker { display: none; }
.rp-table summary::before { content: ''; width: 7px; height: 7px; border-right: 1.6px solid var(--text-2); border-bottom: 1.6px solid var(--text-2); transform: rotate(-45deg); margin-right: 4px; transition: transform 0.15s; }
.rp-table[open] summary::before { transform: rotate(45deg); }
.table-wrap { overflow-x: auto; padding: 0 16px 16px; }
.rp-table .table { border: 0; border-radius: 0; }
.rp-table .table td, .rp-table .table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-table .table td:nth-child(2) { white-space: normal; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .tick.strong { fill: var(--text-2); font-weight: 600; }
.chart .unit { fill: var(--muted); font-size: 11px; }
.chart .label { fill: var(--text); font-size: 12px; font-weight: 600; }
.chart .ideal { stroke: var(--series-ideal); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .today { stroke: var(--text-2); stroke-width: 1; opacity: 0.5; }
.chart .avg { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .area { stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; }
.chart .bar { stroke: none; }
.chart .bar.hot { filter: brightness(1.08); }
.chart .s-accent { stroke: var(--series-accent); }
.chart .dot.s-accent, .chart .bar.s-accent { fill: var(--series-accent); }
.chart .s-blue { stroke: var(--series-blue); }
.chart .dot.s-blue { fill: var(--series-blue); }
.chart .bar.s-neutral { fill: var(--series-neutral); }
.chart .band { fill: transparent; }
.chart .band.hot { fill: var(--text); fill-opacity: 0.04; }
.chart .crosshair { stroke: var(--text-2); stroke-width: 1; opacity: 0.4; pointer-events: none; }
.chart.thumb .grid { stroke: var(--line); }
.chart.thumb .line { stroke-width: 3; }

/* ---------- pages (wiki) ---------- */
.wiki { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100%; }
.wiki-tree { min-width: 0; }
.wiki-tree { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; }
.wiki-tree h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 6px 8px; display: flex; align-items: center; }
.wiki-tree ul { list-style: none; margin: 0; padding: 0; position: sticky; top: 12px; }
.wiki-tree a { display: block; padding: 6px 8px; border-radius: 8px; color: var(--text-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-tree a:hover { background: var(--hover); color: var(--text); }
.wiki-tree a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.wiki-body { padding: 24px 40px 60px; min-width: 0; }
.doc { max-width: 760px; line-height: 1.6; font-size: 14.5px; }
.doc h1 { font-size: 28px; margin: 4px 0 6px; line-height: 1.25; }
.doc h2 { font-size: 20px; margin: 26px 0 8px; }
.doc h3 { font-size: 16px; margin: 20px 0 6px; }
.doc h4 { font-size: 14.5px; margin: 16px 0 4px; }
.doc blockquote { margin: 12px 0; padding: 6px 14px; border-left: 3px solid var(--accent-line); color: var(--text-2); background: var(--surface); border-radius: 0 8px 8px 0; }
.doc hr { margin: 22px 0; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li input { margin: 0 6px 0 -2px; vertical-align: -1px; accent-color: var(--accent); }
.doc-meta { color: var(--muted); font-size: 12.5px; margin-bottom: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.doc-meta .actions { margin-left: auto; display: flex; gap: 6px; }
.issue-ref { display: inline-flex; gap: 5px; align-items: baseline; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); font-size: 0.92em; font-weight: 600; text-decoration: none; color: var(--accent-ink); white-space: nowrap; }
.issue-ref:hover { border-color: var(--accent-line); }
.ref-status { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.ref-status[data-status='done'] { color: var(--ok); }
.ref-status[data-status='in_progress'], .ref-status[data-status='testing'], .ref-status[data-status='in_review'] { color: var(--info); }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.editor textarea { width: 100%; min-height: 420px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.editor textarea:focus { outline: none; border-color: var(--accent); }
.editor .preview { border: 1px solid var(--line); border-radius: 10px; padding: 4px 16px; background: var(--surface); overflow: auto; max-height: 560px; }
.title-input { width: 100%; font-size: 24px; font-weight: 700; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; margin: 0 0 12px -8px; background: none; }
.title-input:hover { background: var(--hover); }
.title-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* ---------- inbox ---------- */
.inbox { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.inbox li { border-top: 1px solid var(--line); }
.inbox li:first-child { border-top: 0; }
.inbox a { display: grid; grid-template-columns: 8px 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; color: var(--text); text-decoration: none; }
.inbox a:hover { background: var(--hover); }
.inbox .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.inbox .read .unread-dot { background: transparent; }
.inbox .read .msg { color: var(--text-2); }
.inbox .k { color: var(--muted); font-size: 12px; }
.inbox time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.unread .msg { font-weight: 600; }
.msg .hint { font-weight: 400; }

/* ---------- project settings ---------- */
.st-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100%; }
.st-nav { padding: 16px 12px; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.st-nav .menu-sec { margin: 4px 8px 8px; }
.st-nav a { padding: 7px 10px; border-radius: 6px; color: var(--text-2); text-decoration: none; font-weight: 500; }
.st-nav a:hover { background: var(--hover); color: var(--text); }
.st-nav a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.st-body { padding: 20px 28px 48px; min-width: 0; }
.st-head { margin-bottom: 20px; max-width: 760px; }
.st-head h1 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0 0 4px; }
.wf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.wf-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 13px; }
.wf-tab:hover { background: var(--hover); }
.wf-tab.on { border-color: var(--accent); background: var(--accent-soft, var(--hover)); font-weight: 600; }
.wf-own { font-size: 11px; padding: 0 5px; border-radius: 4px; background: var(--hover); color: var(--muted); font-weight: 500; }
.wf-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 14px; border-radius: 8px; background: var(--col); }
.wf-note p { margin: 0; }
.wf-hint { margin: 0 0 12px; }
.col-cards.ro { opacity: .62; }
.dlg-danger { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.col-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.col-cards { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 12px; align-items: stretch; }
.col-card { position: relative; flex: 1 1 184px; min-width: 184px; max-width: 280px; background: var(--col); border-radius: 8px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.col-card.dragging { opacity: 0.4; }
.col-card.add { background: transparent; border: 1.5px dashed var(--line-strong); flex-basis: 184px; }
.cat-line { display: flex; align-items: center; gap: 8px; height: 32px; white-space: nowrap; overflow: hidden; }
.col-card-head { display: flex; align-items: center; gap: 4px; }
.col-card .grip { color: var(--faint); cursor: grab; display: grid; place-items: center; width: 18px; flex: none; }
.col-card .grip:hover { color: var(--text-2); }
.col-name-input { flex: 1; min-width: 0; width: 0; height: 32px; border: 1px solid transparent; border-radius: 6px; padding: 0 6px; background: transparent; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-2); }
.col-name-input:hover { background: var(--hover); }
.col-name-input:focus { outline: none; border-color: var(--accent); background: var(--surface); text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text); }
.col-menu .menu-pop button.danger { color: var(--danger); }
.col-menu .menu-pop button:disabled { opacity: 0.45; cursor: default; }
.col-field { display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.col-field .status-pill { justify-self: start; }
.col-field .hint { font-weight: 400; }
.col-field input, .col-field select { height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 8px; background: var(--surface); font-size: 13.5px; color: var(--text); width: 100%; }
.col-field input:focus, .col-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.col-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; min-height: 28px; }
.col-add-title { margin: 2px 0 0; font-weight: 600; }
.js .save-btn { display: none; }
.people-list { list-style: none; margin: 0 0 20px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; max-width: 860px; }
.person { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; }
.person.empty { display: block; }
.person.flash { background: var(--accent-soft); transition: background 1.5s; }
.person-main { display: grid; gap: 2px; min-width: 0; }
.person-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.person-email { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-count { color: var(--text-2); font-size: 13px; white-space: nowrap; }
.you { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.03em; }
.add-person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; max-width: 860px; border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 12px 16px 16px; }
.add-person .col-add-title { grid-column: 1 / -1; }
.photo-edit { display: flex; align-items: center; gap: 16px; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.photo-actions label.btn { cursor: pointer; }

/* ---------- projects: top nav, switcher, directory, create, settings ---------- */
.top { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; }
.top-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.top-nav { display: flex; align-items: center; gap: 2px; }
.nav-menu { display: none; }
.top-nav-item { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 6px; color: var(--text-2); font-weight: 500; text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.top-nav-item::-webkit-details-marker { display: none; }
.top-nav-item:hover, .menu-wrap[open] > .top-nav-item { background: var(--hover); color: var(--text); }
.top-nav-item.on { color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }
.top-nav-item .ico { color: var(--muted); }
.project-icon { --pc: var(--accent); background: var(--pc); color: #fff; border: 0; border-radius: 6px; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.project-switch { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 6px 0 8px; margin-left: -4px; border-radius: 6px; cursor: pointer; list-style: none; max-width: min(46vw, 420px); }
.project-switch::-webkit-details-marker { display: none; }
.project-switch .project-name { overflow: hidden; text-overflow: ellipsis; }
.project-switch .ico { color: var(--muted); }
.project-switch:hover, .menu-wrap[open] > .project-switch { background: var(--hover); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11.5px; font-weight: 600; background: var(--sunken); color: var(--text-2); white-space: nowrap; flex: none; }
.subtle-tag { background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.warn-tag { background: var(--danger-soft); color: var(--danger); }
.rp-title .tag { align-self: center; }
.switcher { display: grid; min-width: 300px; max-width: 360px; }
.switcher[hidden] { display: none; }
.sw-search { position: relative; display: block; margin: 4px 4px 6px; }
.sw-search .ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.sw-search input { width: 100%; height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px 0 30px; background: var(--bg); }
.sw-search input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); }
.menu-pop .sw-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; gap: 10px; align-items: center; padding: 6px 8px; }
.menu-pop .sw-item[hidden], .switcher [hidden] { display: none; }
.sw-item:focus-visible { outline: none; background: var(--hover); box-shadow: inset 0 0 0 2px var(--accent-line); }
.sw-text { display: grid; min-width: 0; line-height: 1.25; }
.sw-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sw-text span { font-size: 12px; color: var(--muted); }
.sw-item[aria-current='true'] { background: var(--accent-soft); }
.sw-check { color: var(--accent-ink); }
.sw-none { margin: 6px 10px; }
.mono, .mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; letter-spacing: 0.02em; }
.num, .table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; border-radius: 12px; position: relative; }

.dir-page { max-width: 1080px; }
.dir-toolbar { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.dir-toolbar .board-search { flex: 0 1 280px; }
.dir-table { min-width: 680px; }
.dir-table td { height: 52px; }
.dir-name { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; text-decoration: none; }
.dir-name:hover span { color: var(--accent-ink); text-decoration: underline; }
.dir-desc { display: block; margin: 2px 0 0 34px; color: var(--muted); font-size: 12.5px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-lead { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.actions-cell { width: 44px; text-align: right; }
.actions-cell .menu-pop { min-width: 200px; }
.dir-none { margin: 12px 4px; }

.np-page { max-width: 720px; }
.np-page h1 { margin-bottom: 4px; }
.np-form { display: grid; gap: 14px; margin-top: 20px; }
.type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; padding: 0; margin: 0 0 6px; }
.type-card { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 36px 12px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.type-card:hover { border-color: var(--faint); }
.type-card input { position: absolute; top: 12px; left: 12px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.type-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.type-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.type-text { display: grid; gap: 2px; }
.type-text b { font-size: 14px; }
.type-text span { color: var(--text-2); font-size: 12.5px; }
.type-check { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); opacity: 0; transform: scale(0.8); transition: 0.15s; }
.type-card:has(input:checked) .type-check { opacity: 1; transform: none; }
.type-art { width: 104px; height: auto; display: block; }
.type-art .ta-bg { fill: var(--sunken); }
.type-art .ta-col { fill: var(--line-strong); opacity: 0.6; }
.type-art .ta-row { fill: var(--surface); }
.type-art .ta-strong { fill: var(--text-2); opacity: 0.35; }
.type-art .ta-soft { fill: var(--line-strong); }
.type-art .ta-accent { fill: var(--accent); }
.np-form .hint { margin-top: -6px; }
.np-form .hint.bad, .hint.bad { color: var(--danger); }
.np-form .hint b { color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.np-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.ps-form { display: grid; gap: 14px; max-width: 640px; }
.ps-form > .hint { margin-top: -8px; }
.field input:disabled { background: var(--sunken); color: var(--text-2); cursor: not-allowed; }
.ps-identity { display: flex; align-items: center; gap: 16px; }
.ps-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); cursor: pointer; display: block; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.seg-field { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.seg-field legend { font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 0; margin-bottom: 6px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; background: var(--surface); }
.radio-pill:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio-pill input { accent-color: var(--accent); margin: 0; }
.danger-zone { max-width: 640px; margin-top: 36px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 10px; }
.danger-zone h2 { font-size: 15px; margin: 0 0 4px; }
.danger-zone form { margin-top: 12px; }

/* ---------- search and the project list ---------- */
.sr-page { height: 100%; display: flex; flex-direction: column; padding: 16px 24px 0; min-height: 0; }
.sr-head { display: flex; align-items: center; gap: 12px; }
.sr-head h1 { font-size: 20px; line-height: 28px; margin: 0; font-weight: 600; }
.sr-filters { margin: 12px 0; }
.sr-filters .board-search { flex: 0 1 260px; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.btn.sr-chip { height: 32px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); gap: 4px; padding: 0 8px 0 10px; }
.btn.sr-chip:hover { background: var(--hover); color: var(--text); }
.btn.sr-chip b { color: var(--text); font-weight: 600; }
.btn.sr-chip.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.btn.sr-chip.on b { color: var(--accent-ink); }
.btn.sr-chip .ico { color: var(--muted); }
.sr-filters .qf.on { background: var(--accent-soft); color: var(--accent-ink); display: inline-flex; align-items: center; }
.sr-body { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 -24px; }
.sr-table-wrap { flex: 1; min-height: 0; overflow: auto; padding: 0 24px 16px; }
.sr-table { min-width: 880px; border-radius: 8px; }
.sr-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 0; height: 36px; }
.sr-table .sort { width: 100%; height: 36px; display: flex; align-items: center; gap: 4px; padding: 0 10px; background: none; border: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; text-align: left; white-space: nowrap; }
.sr-table .sort:hover { color: var(--text); background: var(--hover); }
.sr-table th[aria-sort='ascending'] .sort, .sr-table th[aria-sort='descending'] .sort { color: var(--text); }
.sort-ico { color: var(--accent-ink); font-size: 12px; }
.sr-table td { height: 44px; padding: 6px 10px; }
.sr-table tbody tr:hover td { background: var(--hover); }
.sr-table .c-type { width: 44px; text-align: center; }
.sr-table .c-type .ico { margin: 0 auto; }
.sr-table th.c-type .sort { justify-content: center; padding: 0 4px; }
.sr-table .c-key { width: 92px; white-space: nowrap; }
.sr-table .k { color: var(--text-2); font-weight: 600; font-size: 12.5px; text-decoration: none; }
.sr-table .k:hover { color: var(--accent-ink); text-decoration: underline; }
.sr-table .c-title { min-width: 260px; }
.sr-table .ttl { color: var(--text); text-decoration: none; font-weight: 500; }
.sr-table .ttl:hover { color: var(--accent-ink); text-decoration: underline; }
.sr-labels { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: 1px; }
.sr-table .c-status { width: 140px; }
.sr-table .c-assignee { width: 180px; }
.sr-person { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; max-width: 170px; overflow: hidden; }
.sr-person span:last-child { overflow: hidden; text-overflow: ellipsis; }
.sr-person.muted { color: var(--muted); }
.sr-table .c-priority { width: 112px; }
.sr-pri { display: inline-flex; align-items: center; gap: 6px; }
.sr-table .c-project { width: 84px; }
.sr-proj { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-2); text-decoration: none; padding: 2px 6px; border-radius: 4px; background: var(--sunken); }
.sr-proj:hover { color: var(--accent-ink); }
.sr-table .c-updated { width: 124px; color: var(--text-2); white-space: nowrap; }
.sr-empty { display: grid; gap: 4px; justify-items: center; padding: 48px 12px; color: var(--muted); }
.sr-empty b { color: var(--text); font-size: 14px; }
.sr-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.sr-pager:empty { display: none; }
.sr-pager .hint { margin-right: auto; }

.menu.multi { min-width: 240px; max-width: 320px; padding: 6px; display: block; }
.multi-search { position: relative; display: block; margin-bottom: 4px; }
.multi-search .ico { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.multi-search input { width: 100%; height: 30px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 8px 0 28px; background: var(--bg); }
.multi-search input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.multi-list { max-height: 300px; overflow-y: auto; display: grid; }
.multi-item { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.multi-item[hidden] { display: none; }
.multi-item:hover { background: var(--hover); }
.multi-item input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; flex: none; }
.multi-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-none { margin: 6px 8px; }
.multi-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }

/* ---------- issue types, severity, pickers, tags ---------- */
.type-ico { overflow: visible; }
.sev { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px 0 6px; border-radius: 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--sunken); color: var(--text-2); }
.sev i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; flex: none; }
.sev[data-sev='blocker'] { background: var(--danger-soft); color: var(--danger); }
.sev[data-sev='blocker'] i { border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent); }
.sev[data-sev='critical'] { background: color-mix(in srgb, #f76707 13%, var(--surface)); color: color-mix(in srgb, #e8590c 85%, var(--text)); }
.sev[data-sev='major'] { background: color-mix(in srgb, #f59f00 14%, var(--surface)); color: color-mix(in srgb, #b77400 85%, var(--text)); }
.sev[data-sev='minor'] i { opacity: 0.5; }
.sev.compact { background: none; padding: 0; width: 24px; justify-content: center; }
.sev.compact i { width: 9px; height: 9px; }
.menu.picker { padding: 6px; display: block; max-width: min(440px, calc(100vw - 16px)); }
.pick-list { display: grid; max-height: 320px; overflow-y: auto; }
.menu .pick-item { display: flex; align-items: center; gap: 10px; height: auto; min-height: 34px; padding: 5px 8px; border-radius: 6px; text-align: left; width: 100%; }
.menu .pick-item[aria-selected='true'] { background: var(--accent-soft); }
.menu .pick-item[aria-selected='true'] .pick-label { font-weight: 600; }
.pick-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
.pick-hint { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tokens { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 36px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); cursor: text; }
.tokens:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tok-list { display: contents; }
.tok { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 8px; border-radius: 4px; background: var(--sunken); font-size: 12.5px; font-weight: 500; max-width: 100%; }
.tok-x { display: grid; place-items: center; width: 20px; height: 20px; border: 0; background: none; border-radius: 3px; color: var(--muted); cursor: pointer; padding: 0; }
.tok-x:hover { background: var(--hover); color: var(--text); }
.tokens > input { flex: 1 1 36px; min-width: 36px; border: 0; outline: none; background: none; height: 26px; padding: 0 4px; }
.tok-suggest.menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 0; max-height: 220px; overflow-y: auto; }
.tok-suggest button { width: 100%; }
.tok-suggest button.on { background: var(--hover); }

/* ---------- create issue dialog ---------- */
.cr-dialog { border: 0; padding: 0; border-radius: 12px; width: min(760px, calc(100vw - 24px)); max-width: none; max-height: min(92vh, 900px); background: var(--surface); color: var(--text); box-shadow: 0 24px 64px rgba(30, 20, 10, 0.28); overflow: hidden; }
.cr-dialog[open] { display: flex; }
.cr-dialog::backdrop { background: rgba(20, 15, 10, 0.4); }
.cr-form { display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: inherit; }
.cr-head { display: flex; align-items: center; gap: 8px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); flex: none; }
.cr-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 20px; display: grid; gap: 16px; align-content: start; }
.cr-field { display: grid; gap: 6px; min-width: 0; }
.cr-field[hidden] { display: none; }
.cr-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.cr-label i, .cr-required i { color: var(--danger); font-style: normal; }
.cr-label .hint { font-weight: 400; }
.cr-required { margin: -6px 0 -4px; }
.cr-field > input, .cr-dates input { height: 36px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; background: var(--surface); width: 100%; }
.cr-field > input:focus, .cr-dates input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cr-field > input[aria-invalid='true'], .cr-select[aria-invalid='true'] { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft); }
.cr-field > input[name='title'] { height: 40px; font-size: 15px; font-weight: 500; }
.cr-err { color: var(--danger); font-size: 12.5px; min-height: 0; }
.cr-err:empty { display: none; }
.cr-select { display: flex; align-items: center; gap: 8px; height: 36px; width: 100%; padding: 0 8px 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); text-align: left; cursor: pointer; min-width: 0; color: var(--text); }
.cr-select:hover { border-color: var(--faint); }
.cr-select[aria-expanded='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cr-select > .ico:last-child { margin-left: auto; color: var(--muted); }
.cr-select > span:not(.av):not(.status-pill):not(.sev):not(.project-icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-project { width: auto; min-width: 260px; max-width: 100%; justify-self: start; }
.cr-k { color: var(--text-2); font-weight: 600; flex: none; }
.cr-ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cr-type { position: relative; display: grid; grid-template-rows: auto auto; justify-items: start; align-content: start; gap: 8px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; }
.cr-type:hover { border-color: var(--faint); }
.cr-type input { position: absolute; top: 10px; left: 10px; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cr-type:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.cr-type:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cr-type-text { display: grid; gap: 1px; min-width: 0; }
.cr-type-text b { font-size: 13.5px; }
.cr-type-text span { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.cr-editor { border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); }
.cr-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cr-tools { display: flex; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cr-tool { height: 28px; min-width: 28px; padding: 0 8px; border: 0; border-radius: 4px; background: none; color: var(--text-2); cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.cr-tool:hover { background: var(--hover); color: var(--text); }
.cr-editor textarea { display: block; width: 100%; border: 0; outline: none; resize: vertical; min-height: 140px; padding: 10px 12px; background: none; line-height: 1.5; }
.cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.cr-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cr-custom:empty { display: none; }
.cr-custom { padding-top: 14px; border-top: 1px solid var(--line); }
.cr-wide { grid-column: 1 / -1; }
.cr-field > textarea, .cr-field > select { border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; background: var(--surface); width: 100%; }
.cr-field > select { height: 36px; padding: 0 8px; }
.cr-field > textarea:focus, .cr-field > select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cr-multi { border: 0; padding: 0; margin: 0; }
.cr-multi legend { padding: 0; margin-bottom: 6px; }
.cr-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-size: 13px; }
.cr-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.cr-chip input, .cr-check input { accent-color: var(--accent); margin: 0; }
.cr-check { display: inline-flex; align-items: center; gap: 8px; height: 36px; cursor: pointer; }
.cr-field [aria-invalid='true'] { border-color: var(--danger) !important; box-shadow: 0 0 0 2px var(--danger-soft) !important; }
.cr-link { border: 0; background: none; padding: 0; margin-left: auto; color: var(--accent-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cr-link:hover { text-decoration: underline; }
.cr-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cr-links:empty { display: none; }
.cr-links li { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.cr-link-add { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
.cr-link-add select { height: 36px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 8px; background: var(--surface); }
.cr-link-add .cr-select { color: var(--muted); }
.cr-foot { flex: none; border-top: 1px solid var(--line); padding: 12px 20px; background: var(--surface); }
.cr-foot-main, .cr-discard { display: flex; align-items: center; gap: 8px; }
.cr-discard span:first-child { font-weight: 600; }
.cr-another { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-2); }
.cr-another input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.cr-keys { display: inline-flex; gap: 3px; margin-right: 4px; }
.cr-types.full { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; padding: 0; margin: 0; }
.cr-types.full .cr-type { grid-template-columns: auto 1fr; grid-template-rows: auto; align-items: center; }
i.req { color: var(--danger); font-style: normal; }
.crumb-key { display: inline-flex; align-items: center; gap: 5px; vertical-align: -2px; }
@media (max-width: 720px) {
  .cr-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-type-text span { display: none; }
  .cr-keys, .cr-full { display: none; }
}
@media (max-width: 520px) {
  .cr-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; inset: 0; border-radius: 0; }
  .cr-grid, .cr-dates { grid-template-columns: 1fr; }
  .cr-types { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .cr-type { padding: 8px 4px; justify-items: center; gap: 4px; }
  .cr-type-text b { font-size: 12px; text-align: center; white-space: nowrap; }
  .cr-tools [data-template] { flex-basis: 100%; justify-content: flex-start; }
  .cr-head, .cr-body, .cr-foot { padding-left: 16px; padding-right: 16px; }
  .cr-project { min-width: 0; width: 100%; }
  .cr-link-add { grid-template-columns: 1fr; }
}

/* ---------- the issue view (board panel, list panel, full page) ---------- */
.iv h3 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin: 24px 0 8px; color: var(--text); }
.iv h3 .hint, .iv h3 .watchers { font-weight: 500; }
.iv .p-box { margin-bottom: 12px; }
.iv .p-agent h3 { margin: 0 0 10px; color: var(--accent-ink); }
.iv .p-box > h3, .iv .iv-more > summary { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text); font-weight: 600; }
.iv .iv-more:not([open]) > summary { border-bottom: 0; }
.iv-pinned { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.iv-pinned > h3 .ico { color: var(--accent-ink); }
.iv-more > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.iv-more > summary::-webkit-details-marker { display: none; }
.iv-more > summary .ico { margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.iv-more[open] > summary .ico { transform: rotate(180deg); }
.iv-more > summary:hover { background: var(--hover); border-radius: 8px; }
.iv-configure { margin-left: auto; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--muted); }
.iv-configure:hover { background: var(--hover); color: var(--text); }
.iv-none { margin: 6px 0; }
.iv-prop .ctl { position: relative; }
.iv-pin { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 5px; background: none; color: var(--faint); cursor: pointer; opacity: 0; transition: opacity 0.12s; }
.iv-prop:hover .iv-pin, .iv-pin:focus-visible, .iv-pin[aria-pressed='true'] { opacity: 1; }
.iv-pin:hover { background: var(--hover); color: var(--text); }
.iv-pin[aria-pressed='true'] { color: var(--accent-ink); }
@media (hover: none) { .iv-pin { opacity: 1; } }
.iv-prop { align-items: start; padding: 2px 0; }
.iv-prop > label { display: flex; align-items: center; gap: 3px; min-height: 32px; }
.iv-prop .ctl { min-height: 32px; }
.iv-prop .ctl > .lead { height: 32px; }
.iv-prop .ctl > textarea { width: 100%; min-width: 0; min-height: 32px; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; background: transparent; resize: vertical; font-size: 13.5px; line-height: 1.45; }
.iv-prop .ctl > textarea:hover { background: var(--hover); }
.iv-prop .ctl > textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.iv-prop input.overdue { color: var(--danger); font-weight: 600; }
.iv-tokens.tokens { flex: 1; min-width: 0; min-height: 32px; border-color: transparent; background: transparent; padding: 3px 4px 3px 0; }
.iv-tokens.tokens:hover { background: var(--hover); }
.iv-tokens.tokens:focus-within { background: var(--surface); }
.iv-tokens .tok { height: 22px; }
.iv-tokens.tokens:not(:focus-within) .tok + input, .iv-tokens.tokens:not(:focus-within) .tok-list:not(:empty) + input { flex: 0 0 0; min-width: 0; width: 0; padding: 0; }
.iv-multi { font: inherit; font-size: 13.5px; color: var(--text); flex: 1; min-width: 0; min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 6px; background: none; padding: 4px 8px; cursor: pointer; text-align: left; }
.iv-multi:hover { background: var(--hover); }
.iv-multi .hint { font-size: inherit; color: var(--muted); }
.iv-prop .ctl > select { padding-left: 4px; }
.iv-multi[aria-expanded='true'] { border-color: var(--accent); }
.iv-url { display: grid; place-items: center; color: var(--accent-ink); }
.iv-checklist { flex: 1; min-width: 0; padding: 4px 0; }
.iv-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; }
.iv-checklist li { display: flex; align-items: center; gap: 4px; min-height: 28px; }
.iv-checklist li label { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 8px; cursor: pointer; }
.iv-checklist li label span { min-width: 0; overflow-wrap: anywhere; }
.iv-checklist li.done label span { color: var(--muted); text-decoration: line-through; }
.iv-checklist li .icon-btn { width: 24px; height: 24px; opacity: 0; }
.iv-checklist li:hover .icon-btn, .iv-checklist li .icon-btn:focus-visible { opacity: 1; }
.iv-checklist input[type='checkbox'] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex: none; }
.iv-checklist input[data-check-add] { width: 100%; height: 30px; border: 1px dashed var(--line-strong); border-radius: 6px; padding: 0 8px; background: transparent; margin-top: 4px; }
.iv-checklist input[data-check-add]:focus { outline: none; border-style: solid; border-color: var(--accent); background: var(--surface); }
.iv-check-count { display: block; padding: 0 8px 2px; }
.iv-head { gap: 4px; }
.iv-type { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; cursor: pointer; padding: 0; flex: none; }
.iv-type:hover, .iv-type[aria-expanded='true'] { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line-strong); }
.iv-parent { color: var(--muted); font-weight: 500; }
.iv-crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.iv-crumb:hover { color: var(--accent-ink); }
.iv-head .p-act .count { margin-left: 2px; }
.iv-desc { margin-top: 4px; }
.iv-desc h3 .iv-edit { width: 24px; height: 24px; opacity: 0.6; }
.iv-desc h3 .iv-edit:hover { opacity: 1; }
.iv-desc-view { border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; margin: 0 -8px; cursor: text; min-height: 40px; max-width: none; }
.iv-desc-view:hover { background: var(--hover); }
.iv-desc-view:focus-visible { outline: 2px solid var(--accent); }
.iv-desc-view > :first-child { margin-top: 0; }
.iv-desc-view > :last-child { margin-bottom: 0; }
.iv-desc-input { display: block; width: 100%; min-height: 160px; border: 1px solid var(--accent); border-radius: 6px; padding: 8px 10px; background: var(--surface); resize: vertical; box-shadow: 0 0 0 2px var(--accent-soft); line-height: 1.5; }
.iv-desc-input:focus { outline: none; }
.iv-desc-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.iv-agent { margin-top: 20px; }
.iv-activity { margin-top: 24px; }
.iv-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.iv-tabs [role='tab'] { position: relative; height: 34px; padding: 0 10px; border: 0; background: none; color: var(--text-2); font-weight: 600; cursor: pointer; border-radius: 6px 6px 0 0; display: inline-flex; align-items: center; gap: 6px; }
.iv-tabs [role='tab']:hover { background: var(--hover); color: var(--text); }
.iv-tabs [role='tab'][aria-selected='true'] { color: var(--accent-ink); }
.iv-tabs [role='tab'][aria-selected='true']::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.iv-tabs .watchers { display: inline-flex; gap: 2px; }
.iv-activity .composer { margin: 0 0 18px; }
.iv-meta { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.iv-meta a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.iv-meta a:hover { color: var(--accent-ink); }
.iv-loading { padding: 12px 0; }
.iv textarea.iv-title { margin-top: 8px; }
.iv-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.iv-toolbar .btn { gap: 6px; }
.iv-page-wrap { max-width: 1240px; margin: 0 auto; padding: 16px 24px 48px; }
.iv-notice { max-width: 1240px; margin: 0 auto; padding: 16px 24px 0; }
.iv-page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 8px 32px; align-items: start; }
/* The head spans both columns, so Close sits in the top-right corner. */
.iv-page > .iv-head { grid-column: 1 / -1; }
.iv-page .iv-main { min-width: 0; }
.iv-page .iv-title { font-size: 24px; }
.iv-side { position: sticky; top: 0; display: grid; gap: 0; padding-top: 8px; }
.iv-side .p-status-row { margin-bottom: 12px; }
.iv-page .iv-agent { margin-top: 24px; }

/* the list page's side panel */
.sr-split { flex: 1; min-height: 0; display: flex; }
.sr-list { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.sr-panel { width: 460px; flex: none; overflow: auto; border-left: 1px solid var(--line); }
.sr-table tbody tr { cursor: pointer; }
.sr-table tbody tr.selected td { background: var(--accent-soft); }
.sr-table tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 1100px) {
  .iv-page { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
  .sr-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); box-shadow: var(--shadow-panel); z-index: 20; background: var(--surface); }
  .sr-page { position: relative; }
}
@media (max-width: 640px) {
  .iv-crumb-name, .iv-watch-label { display: none; }
  .iv-head { min-width: 0; }
}
@media (max-width: 860px) {
  .iv-page { grid-template-columns: minmax(0, 1fr); }
  .iv-page { row-gap: 16px; }
  .iv-side { position: static; padding-top: 0; grid-row: 2; }
  .iv-page .iv-main { grid-row: 3; }
  .iv-page-wrap { padding: 12px 16px 40px; }
}

/* ---------- issue layout editor and custom fields ---------- */
.st-sub { margin-top: 16px !important; }
.st-head-row { display: flex; align-items: flex-end; gap: 16px; max-width: 960px; }
.lo-page { max-width: 1180px; }
.lo-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.lo-kinds { display: inline-flex; gap: 2px; padding: 2px; background: var(--sunken); border-radius: 8px; flex-wrap: wrap; }
.lo-kinds a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; color: var(--text-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.lo-kinds a:hover { color: var(--text); }
.lo-kinds a[aria-selected='true'] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.lo-zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.lo-zone { background: var(--col); border-radius: 10px; padding: 10px; min-height: 160px; display: flex; flex-direction: column; transition: box-shadow 0.12s; }
.lo-zone.over { box-shadow: inset 0 0 0 2px var(--accent-line); }
.lo-zone header { padding: 2px 4px 10px; }
.lo-zone h2 { font-size: 13.5px; margin: 0 0 2px; display: flex; align-items: center; gap: 6px; }
.lo-zone[data-zone='pinned'] { background: color-mix(in srgb, var(--accent-soft) 60%, var(--col)); }
.lo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lo-list:not(:empty) + .lo-empty { display: none; }
.lo-empty { margin: 0; padding: 18px 8px; text-align: center; border: 1.5px dashed var(--line-strong); border-radius: 8px; }
.lo-field { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 28px; align-items: center; gap: 8px; padding: 8px 6px 8px 8px; background: var(--raised); border-radius: 8px; box-shadow: var(--card-shadow); cursor: grab; }
.lo-field.dragging { opacity: 0.4; }
.lo-field .grip { color: var(--faint); }
.lo-field:hover .grip { color: var(--muted); }
.lo-name { display: grid; min-width: 0; line-height: 1.3; }
.lo-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-name .hint { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-req { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.lo-req input { accent-color: var(--accent); margin: 0; }
.lo-drop { height: 3px; border-radius: 2px; background: var(--accent); list-style: none; margin: -1px 0; }
.cf-list { max-width: 960px; }
.cf-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
.cf-type { width: 36px; height: 36px; border-radius: 8px; background: var(--sunken); display: grid; place-items: center; font-weight: 700; color: var(--text-2); font-size: 13px; }
.cf-row .person-name .mono { font-weight: 500; }
.cf-opts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cf-empty { display: grid; gap: 4px; justify-items: center; padding: 48px 12px; border: 1.5px dashed var(--line-strong); border-radius: 10px; color: var(--muted); }
.cf-empty b { color: var(--text); }
@media (max-width: 1240px) { .lo-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .lo-zones { grid-template-columns: minmax(0, 1fr); }
  .st-head-row { flex-direction: column; align-items: flex-start; }
  .cf-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .cf-row [data-delete] { display: none; }
}

/* ---------- attachments, history, lightbox ---------- */
.iv-files { margin-top: 20px; }
.iv-file-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.iv-file { position: relative; display: grid; grid-template-rows: 92px auto; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.iv-file-open { display: grid; place-items: center; background: var(--sunken); overflow: hidden; color: var(--muted); text-decoration: none; }
.iv-file-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-file-ico { display: grid; justify-items: center; gap: 2px; }
.iv-file-ico b { font-size: 10px; letter-spacing: 0.05em; color: var(--text-2); }
.iv-file-meta { display: grid; padding: 6px 8px 8px; min-width: 0; }
.iv-file-name { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-file-meta .hint { font-size: 11px; }
.iv-file-acts { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.iv-file:hover .iv-file-acts, .iv-file-acts:focus-within { opacity: 1; }
.iv-file-acts .icon-btn { width: 26px; height: 26px; background: var(--surface); box-shadow: var(--card-shadow); }
@media (hover: none) { .iv-file-acts { opacity: 1; } }
.iv-dropping { position: relative; }
.iv-dropping::after { content: 'Drop files to attach them'; position: absolute; inset: 4px; z-index: 5; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent-soft) 85%, transparent); color: var(--accent-ink); font-weight: 600; pointer-events: none; }
.iv-lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.iv-lightbox::backdrop { background: rgba(10, 8, 6, 0.82); }
.iv-lightbox img { display: block; max-width: 96vw; max-height: calc(94vh - 48px); margin: 0 auto; border-radius: 6px; background: #fff; }
.iv-lb-bar { display: flex; align-items: center; gap: 4px; height: 44px; color: #fff; }
.iv-lb-bar .icon-btn { color: #fff; }
.iv-lb-bar .icon-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.iv-lb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-event { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.iv-event time { margin: 0 !important; white-space: nowrap; }
.iv-ev-text b { color: var(--text); font-weight: 600; }
.iv-sys { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.md-table { overflow-x: auto; margin: 10px 0; max-width: 100%; }
.md-table table { border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.md-table th, .md-table td { border: 1px solid var(--line-strong); padding: 6px 10px; text-align: left; vertical-align: top; min-width: 80px; }
.md-table th { background: var(--sunken); font-weight: 600; }
.md-table tbody tr:nth-child(even) td { background: var(--surface); }
h5 { font-size: 13.5px; margin: 14px 0 4px; }
h6 { font-size: 12.5px; margin: 12px 0 4px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.03em; }
li > ul, li > ol { margin: 2px 0; }
.md-img { display: inline-block; max-width: 100%; margin: 4px 0; }
.md-img img { max-width: min(100%, 520px); max-height: 360px; border-radius: 6px; border: 1px solid var(--line); display: block; cursor: zoom-in; }
.comment .body .md-img img { max-width: min(100%, 360px); max-height: 240px; }
.cr-files { display: grid; gap: 6px; padding: 10px; border: 1.5px dashed var(--line-strong); border-radius: 8px; }
.cr-files ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cr-files ul:empty { display: none; }
.cr-files li { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 2px 0 8px; border-radius: 6px; background: var(--sunken); }
.cr-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.cr-file-pick { justify-self: start; display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); cursor: pointer; font-weight: 500; }
.cr-file-pick:hover { background: var(--hover); }
.cr-dropping .cr-files { border-color: var(--accent); background: var(--accent-soft); }
.dlg-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.dlg-check input { accent-color: var(--accent); margin: 0; }

/* ---------- releases and components ---------- */
.rl-page { max-width: 1180px; }
.seg.rl-filter { margin: 0 0 14px; height: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rl-filter a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 4px; color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 13px; }
.rl-filter a[aria-current='page'] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.rl-filter .count { font-size: 10.5px; min-width: 16px; height: 16px; }
.rl-table { min-width: 760px; }
.rl-table td { height: 56px; }
.rl-name { font-weight: 600; color: var(--text); text-decoration: none; }
.rl-name:hover { color: var(--accent-ink); text-decoration: underline; }
.rl-desc { margin-left: 0; }
.rl-status { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--sunken); color: var(--text-2); white-space: nowrap; vertical-align: middle; }
.rl-status[data-status='released'] { background: var(--ok-soft); color: var(--ok); }
.rl-status[data-status='unreleased'] { background: var(--info-soft); color: var(--info); }
h1 .rl-status { font-size: 11px; margin-left: 6px; vertical-align: 3px; }
.rl-overdue { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: var(--danger-soft); color: var(--danger); text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }
.overdue-text { color: var(--danger); font-weight: 600; }
.nowrap { white-space: nowrap; }
.rl-prog-cell { width: 260px; }
.rl-progress { display: grid; gap: 4px; min-width: 160px; }
.rl-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--sunken); }
.rl-bar i { display: block; height: 100%; min-width: 4px; }
.rl-bar i.done { background: var(--ok); }
.rl-bar i.doing { background: var(--info); }
.rl-bar i.todo { background: var(--line-strong); }
.rl-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; color: var(--muted); }
.rl-nums b { color: var(--text); }
.rl-key { display: inline-flex; align-items: center; gap: 4px; }
.rl-key i { width: 8px; height: 8px; border-radius: 2px; }
.rl-key i.done { background: var(--ok); }
.rl-key i.doing { background: var(--info); }
.rl-key i.todo { background: var(--line-strong); }
.rl-issues thead th { padding: 0 10px; }
.rl-m-only { display: none; }
@media (max-width: 600px) {
  .rl-filter a { padding: 0 9px; }
  .rl-table th:nth-child(2), .rl-table td:nth-child(2), .rl-table th:nth-child(4), .rl-table td:nth-child(4) { display: none; }
  .rl-m-only { display: block; margin-top: 4px; }
  .rl-table { min-width: 0; }
  .rl-table th:nth-child(5), .rl-table td:nth-child(5) { display: none; }
  .rl-table .rl-key:not(:first-child) { display: none; }
  .rl-prog-cell { width: auto; }
  .rl-progress { min-width: 120px; }
}
.rl-head { align-items: center; }
.rl-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rl-stats { margin: 4px 0 18px; grid-template-columns: repeat(4, minmax(0, 120px)) minmax(200px, 1fr); }
.rl-stat-bar { display: flex; align-items: center; }
.rl-stat-bar .rl-progress { width: 100%; }
.rl-stat-bar .rl-nums b { display: inline; font-size: inherit; }
.rl-tabs { margin-bottom: 14px; }
.rl-notes-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rl-notes-view { max-width: 760px; border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; background: var(--surface); }
.rl-tok { background: var(--info-soft); color: var(--info); }
.rl-empty p { max-width: 520px; margin: 0 auto; }
.co-list { max-width: 960px; }
.co-row { grid-template-columns: 36px minmax(0, 1fr) 180px auto auto auto; }
.co-ico { width: 36px; height: 36px; border-radius: 8px; background: var(--sunken); display: grid; place-items: center; font-weight: 700; color: var(--text-2); }
.co-lead { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.co-row .person-count { text-decoration: none; }
.co-row .person-count:hover { color: var(--accent-ink); text-decoration: underline; }
@media (max-width: 860px) {
  .rl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-stat-bar { grid-column: 1 / -1; }
  .co-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
  .co-lead, .co-row .person-count { display: none; }
}

/* ---------- responsive ---------- */
/* Between the phone layout and a wide screen the main links, search and Create don't all fit:
   Create shows just its +, and the search box may narrow. */
@media (max-width: 1100px) {
  .create { width: 32px; padding: 0; justify-content: center; }
  .create .label { display: none; }
  .top-search { min-width: 120px; }
}
/* Narrower still, the search box folds into its button, as on a phone. */
@media (max-width: 960px) {
  .top-search { display: none; }
  .top.searching .top-search { display: block; position: absolute; inset: 9px 12px; z-index: 2; }
  .search-toggle { display: inline-grid; }
}
@media (max-width: 1240px) {
  .board-search { flex-basis: 170px; }
}
@media (max-width: 1100px) {
  .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); box-shadow: var(--shadow-panel); z-index: 20; }
  .toolbar { flex-wrap: wrap; row-gap: 8px; }
  .toolbar .grow { display: none; }
  .toolbar-right { margin-left: auto; }
}
@media (max-width: 980px) {
  .project-head { padding: 10px 16px 0; }
  .board-main { padding: 14px 16px 0; }
  .board { margin: 0 -16px; padding: 0 16px 20px; }
  .wiki { grid-template-columns: 200px minmax(0, 1fr); }
  .wiki-body { padding: 20px 24px 48px; }
  .editor { grid-template-columns: 1fr; }
  .editor .preview { max-height: none; }
}
@media (max-width: 860px) {
  .rail:not(.closed) { position: absolute; top: 0; right: 0; bottom: 0; z-index: 18; box-shadow: var(--shadow-panel); width: min(340px, 100%); }
  .issue, .row { grid-template-columns: 1fr; }
  .bl-row { grid-template-columns: 18px 16px 60px minmax(0, 1fr) 104px 28px 28px; padding-left: 6px; }
  .bl-row .cell-epic, .bl-row .cell-pts { display: none; }
  .bl-title-hint { display: none; }
  .bl-page { padding: 14px 16px 40px; }
  .page-head .hint { display: none; }
}
@media (max-width: 640px) {
  .top { gap: 8px; padding: 0 12px; }
  .brand-name { display: none; }
  .top-center { justify-content: flex-end; }
  .top-search { display: none; }
  .top.searching .top-search { display: block; position: absolute; inset: 9px 12px; z-index: 2; }
  .top-search kbd { display: none; }
  .search-toggle { display: inline-grid; }
  .create { width: 32px; padding: 0; }
  .create .label { display: none; }
  .board-title h1 { font-size: 18px; }
  .board-title .days, .board-title .complete { display: none; }
  .board-sub .goal { display: none; }
  .board-search { flex: 1 1 100%; }
  .people-filter { display: none; }
  .toolbar-right { flex: 1 1 100%; flex-wrap: wrap; row-gap: 8px; margin-left: 0; }
  .toolbar-right .label, .toolbar-right .sep { display: none; }
  .panel { width: 100%; padding: 12px 16px 28px; }
  .p-prop { grid-template-columns: 96px minmax(0, 1fr); }
  .wiki { grid-template-columns: minmax(0, 1fr); }
  .wiki-tree { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; }
  .wiki-tree ul { position: static; display: flex; gap: 4px; overflow-x: auto; }
  .wiki-tree li a { padding-left: 8px !important; }
  .wiki-body { padding: 18px 16px 40px; }
  .page { padding: 16px 16px 40px; }
  .rp-page { padding: 14px 16px 40px; }
  .inbox a { grid-template-columns: 8px minmax(0, 1fr); }
  .bl-row { grid-template-columns: 18px 16px minmax(0, 1fr) 28px 28px; gap: 8px; }
  .bl-row .k, .bl-row .cell-status { display: none; }
  .bl-create-form [data-full-form] { display: none; }
  .bl-head { flex-wrap: wrap; row-gap: 0; padding-bottom: 6px; }
  .totals { display: none; }
  .bl-goal { margin-left: 4px; }
  .field-row { grid-template-columns: 1fr; }
  .inbox .k, .inbox time { display: none; }
  .stats { gap: 16px; }
  .st-page { grid-template-columns: minmax(0, 1fr); }
  .st-nav { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; padding: 8px 12px; }
  .st-nav .menu-sec { display: none; }
  .st-nav a { white-space: nowrap; flex: none; }
  .st-body { padding: 16px 16px 40px; }
  .person { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .person-count { display: none; }
  .add-person { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .top-nav-item.issues-link { display: none; }
}
@media (max-width: 860px) {
  .top-nav { display: none; }
  .nav-menu { display: block; }
  .sr-page { padding: 14px 16px 0; }
  .sr-body { margin: 0 -16px; }
  .sr-table-wrap { padding: 0 16px 16px; }
  .sr-pager { padding: 10px 16px; }
}
@media (max-width: 640px) {
  .type-cards { grid-template-columns: 1fr; }
  .project-head .subtle-tag { display: none; }
  .sr-filters .board-search { flex: 1 1 100%; }
  .dir-toolbar .board-search { flex: 1 1 auto; }
  .ps-identity { align-items: flex-start; flex-direction: column; }
}

/* ---------- development (GitHub) ---------- */
.dlg.wide { width: min(720px, calc(100vw - 32px)); }
.dev-body { padding: 6px 12px 12px; }
.dev-rows { display: grid; margin: 0 -8px 8px; }
.dev-row { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dev-row:hover { background: var(--hover); }
.dev-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dev-row .ico { color: var(--text-2); flex: none; }
.dev-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dev-row time { font-size: 12px; white-space: nowrap; }
.dev-empty { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.dev-empty code { font-size: 12px; }
.dev-state { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: var(--sunken); color: var(--text-2); }
.dev-state[data-state='open'], .dev-state[data-state='in_progress'], .dev-state[data-state='queued'], .dev-state[data-state='pending'] { background: var(--info-soft); color: var(--info); }
.dev-state[data-state='merged'] { background: var(--epic-soft); color: var(--epic); }
.dev-state[data-state='success'] { background: var(--ok-soft); color: var(--ok); }
.dev-state[data-state='failure'], .dev-state[data-state='error'] { background: var(--danger-soft); color: var(--danger); }
.dev-tabs { margin: 0 0 4px; overflow-x: auto; scrollbar-width: none; }
.dev-tabs [role='tab'] { white-space: nowrap; flex: none; }
.dlg-body { grid-template-columns: minmax(0, 1fr); }
.dlg .field { min-width: 0; }
.dev-cmd { min-width: 0; }
.dev-list { list-style: none; margin: 0; padding: 0; max-height: min(420px, 60vh); overflow-y: auto; }
.dev-list li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.dev-list li:last-child { border-bottom: 0; }
.dev-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dev-main > a, .dev-main > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; text-decoration: none; }
.dev-main > a:hover { color: var(--accent-ink); text-decoration: underline; }
.dev-main code { font-size: 12px; color: var(--text-2); }
.dev-sub { display: flex; align-items: center; gap: 4px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dev-sub .ico { flex: none; }
.dev-list time { font-size: 12px; white-space: nowrap; flex: none; }
.dev-none { margin: 12px 0; }
.dev-cmd { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 6px 6px 10px; background: var(--sunken); }
.dev-cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12.5px; scrollbar-width: thin; }
.dev-mark { display: inline-flex; align-items: center; position: relative; color: var(--text-2); vertical-align: middle; margin-left: 4px; }
.dev-mark.pr-open, .dev-mark.pr-draft { color: var(--info); }
.dev-mark.pr-merged { color: var(--epic); }
.dev-mark.pr-closed { color: var(--muted); }
.dev-mark:not([class*='pr-']).ok { color: var(--ok); }
.dev-mark:not([class*='pr-']).fail { color: var(--danger); }
.dev-mark .dot { position: absolute; right: -3px; top: -2px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--surface); background: var(--muted); }
.dev-mark.ok .dot { background: var(--ok); }
.dev-mark.fail .dot { background: var(--danger); }
@media (max-width: 600px) {
  .dev-list li { flex-wrap: wrap; gap: 6px 10px; }
  .dev-main { flex-basis: 100%; }
}
.gh-page { display: grid; gap: 16px; max-width: 880px; }
.gh-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 16px 18px; min-width: 0; }
.gh-card h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.gh-card > .hint { margin: 0 0 10px; }
.gh-repos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.gh-repos li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px; border-radius: 6px; }
.gh-repos li:hover { background: var(--hover); }
.gh-repos a { color: var(--text); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.gh-repos a:hover { text-decoration: underline; }
.gh-repos .ico { color: var(--text-2); flex: none; }
.gh-none { margin: 0 0 12px; }
.gh-add { display: flex; gap: 8px; }
.gh-add input { flex: 1; min-width: 0; }
.gh-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.gh-steps li { padding-left: 4px; }
.gh-steps li > span:first-child { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.gh-steps .dev-cmd { max-width: 620px; }
.gh-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); flex-wrap: wrap; }
.gh-ok code { color: var(--text); }
.gh-warn { color: var(--danger); }
.gh-events { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gh-events .hint { flex-basis: 100%; }
.gh-events code, .gh-how code { font-size: 12px; padding: 2px 6px; border-radius: 4px; background: var(--sunken); }
.gh-how { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 14px; margin: 0; }
.gh-how dt { font-weight: 600; font-size: 13px; color: var(--text-2); }
.gh-how dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.gh-how code { overflow-wrap: anywhere; }
.gh-note { flex-basis: 100%; font-size: 12.5px; }
.gh-log td { font-size: 13px; }
.gh-result { color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .gh-how { grid-template-columns: 1fr; gap: 4px; }
  .gh-how dd { margin-bottom: 8px; }
  .gh-add { flex-wrap: wrap; }
  .gh-add .btn { width: 100%; justify-content: center; }
}

/* ---------- integrations ---------- */
.in-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.in-two h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; }
.in-two .hint { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.in-steps { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; }
.in-steps li { min-width: 0; }
.in-steps .dev-cmd { margin-top: 6px; }
.in-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.in-head h2 { margin: 0; }
.gh-card > .hint { font-size: 13px; line-height: 1.5; }
.in-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.in-list > li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); min-width: 0; }
.in-list > li.in-empty, .in-list > li.hint { border-top: 0; padding: 6px 4px; }
.in-ico { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--sunken); display: grid; place-items: center; color: var(--text-2); }
.in-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.in-main b { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.in-main .hint { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-events { display: flex; flex-wrap: wrap; gap: 4px; }
.in-events code { font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--sunken); color: var(--text-2); }
.in-error { font-size: 12.5px; color: var(--danger); }
.in-secret code { user-select: all; }
.in-events-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.in-events-pick legend { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; padding: 0; }
.in-events-pick .check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; text-align: left; }
.in-events-pick .check input { width: 16px; height: 16px; min-height: 0; flex: none; margin: 0; padding: 0; accent-color: var(--accent); }
.in-events-pick .check span { flex: 1; min-width: 0; }
.in-events-pick .check code { font-size: 11.5px; color: var(--muted); }
.in-more { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.in-more li { display: flex; gap: 12px; align-items: flex-start; }
.in-more li > .ico { flex: none; margin-top: 2px; color: var(--text-2); }
.in-more li div { display: grid; gap: 2px; font-size: 13.5px; }
.in-more .hint { font-size: 13px; line-height: 1.5; }
.in-deliveries li { align-items: flex-start; }
.in-payload summary { cursor: pointer; font-size: 12px; margin-top: 4px; }
.in-payload pre { margin: 6px 0 0; max-height: 240px; overflow: auto; font-size: 11.5px; background: var(--sunken); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .in-two { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  .in-list > li { flex-wrap: wrap; }
  .in-list > li .in-main { flex-basis: calc(100% - 44px); }
}

/* ---------- issues: query, saved filters, columns, bulk ---------- */
.sr-head { flex-wrap: wrap; row-gap: 8px; }
.sr-fname { font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; font-size: 13px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sr-query { position: relative; margin: 12px 0; }
.sr-q-box { display: flex; align-items: flex-start; gap: 8px; }
.sr-q-box textarea { flex: 1; min-width: 0; min-height: 36px; max-height: 160px; resize: none; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; background: var(--surface); color: var(--text); font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sr-q-box textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sr-q-box.bad textarea { border-color: var(--danger); }
.sr-q-box .btn { height: 36px; }
.sr-q-msg { margin: 6px 0 0; font-size: 12.5px; min-height: 18px; }
.sr-q-msg code, .sr-q-msg kbd { font-size: 11.5px; }
.sr-q-error { color: var(--danger); display: inline-flex; align-items: center; gap: 6px; }
.sr-suggest { position: absolute; top: 40px; left: 0; z-index: 30; min-width: 220px; max-width: min(420px, 100%); list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow: auto; }
.sr-suggest li { padding: 6px 10px; border-radius: 4px; cursor: pointer; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-suggest li:hover, .sr-suggest li[aria-selected='true'] { background: var(--accent-soft); color: var(--accent-ink); }
.menu { max-height: calc(100vh - 16px); overflow-y: auto; }
.sr-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; margin: 0 0 10px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.sr-bulk b { margin-right: 6px; color: var(--accent-ink); font-size: 13px; }
.sr-bulk .btn { background: var(--surface); }
.sr-table .c-pick { width: 36px; text-align: center; padding: 0 4px 0 10px; }
.sr-table th.c-pick { padding: 0 4px 0 10px; }
.sr-table .c-pick input { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--accent); cursor: pointer; }
.sr-table tbody tr.picked td { background: var(--accent-soft); }
.sr-table tbody tr.cursor td:first-child { box-shadow: inset 3px 0 0 var(--text-2); }
.sr-table .sort.plain { cursor: default; }
.sr-table .sort.plain:hover { background: none; color: var(--muted); }
.sr-table .c-severity { width: 108px; }
.sr-table .c-sprint { width: 150px; white-space: nowrap; color: var(--text-2); }
.sr-table .c-fix, .sr-table .c-labels, .sr-table .c-components { width: 150px; }
.sr-table .c-points { width: 72px; }
.sr-table .c-due { width: 92px; white-space: nowrap; }
.sr-table .k.done { text-decoration: line-through; }
.sr-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sr-star-ico { color: #f59f00; margin-right: 6px; }
.sr-manage { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sr-manage li { display: flex; align-items: center; gap: 10px; }
.sr-manage input[data-rename] { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; background: var(--surface); color: var(--text); }
.sr-manage .check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.sr-star { color: var(--muted); font-size: 16px; }
.sr-star.on { color: #f59f00; }
.sr-failed { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.dlg .check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.dlg .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
@media (max-width: 720px) {
  .sr-actions { width: 100%; }
  .sr-actions .sr-mode { margin-right: auto; }
  .sr-fname { max-width: 60vw; }
}

/* ---------- your work ---------- */
.yw-page { max-width: 1200px; }
.yw-sec-head { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 10px; }
.yw-sec-head h2, .yw-box h2 { margin: 0; font-size: 14px; font-weight: 600; }
.yw-sec-head a { font-size: 13px; }
.yw-cards { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.yw-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: inset 4px 0 0 var(--pc); display: grid; min-width: 0; }
.yw-card-main { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 18px; color: var(--text); text-decoration: none; min-width: 0; }
.yw-card-main > span { display: grid; min-width: 0; }
.yw-card-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-card-main .hint { font-size: 12px; }
.yw-card-main:hover b { color: var(--accent-ink); }
.yw-card-links { display: flex; justify-content: space-between; gap: 8px; padding: 8px 14px 12px 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
.yw-card-links a { color: var(--text-2); text-decoration: none; }
.yw-card-links a:hover { color: var(--accent-ink); text-decoration: underline; }
.yw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.yw-panel { min-width: 0; }
.yw-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.yw-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); min-width: 0; }
.yw-row:first-child { border-top: 0; }
.yw-row:hover { background: var(--hover); }
.yw-row > .ico { flex: none; }
.yw-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.yw-title { color: var(--text); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-title:hover { color: var(--accent-ink); text-decoration: underline; }
.yw-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-key { font-weight: 600; color: var(--text-2); }
.yw-when { font-size: 12px; white-space: nowrap; flex: none; }
.yw-empty { display: grid; gap: 4px; justify-items: center; padding: 36px 12px; color: var(--muted); text-align: center; }
.yw-empty b { color: var(--text); }
.yw-more { margin: 10px 2px 0; font-size: 13px; }
.yw-attention { margin-bottom: 24px; }
.yw-score { flex: none; min-width: 28px; padding: 2px 8px; border-radius: 999px; background: var(--hover); color: var(--text-2); font-size: 12px; font-weight: 600; text-align: center; }
.yw-side { display: grid; gap: 14px; min-width: 0; }
.yw-box { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px 16px; min-width: 0; }
.yw-box h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.yw-box .hint { margin: 0; font-size: 13px; line-height: 1.5; }
.yw-due, .yw-filters { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.yw-due li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.yw-due a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
.yw-due a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-due a:hover span { text-decoration: underline; }
.yw-due li > span { flex: none; font-size: 12px; }
.yw-filters a { font-size: 13.5px; }
@media (max-width: 900px) {
  .yw-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .yw-row .status-pill { display: none; }
}

/* ---------- keyboard shortcuts ---------- */
.kb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.kb-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.kb-table caption { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 6px; }
.kb-table td { padding: 5px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.kb-table td:first-child { width: 42%; white-space: nowrap; }
@media (max-width: 600px) { .kb-cols { grid-template-columns: 1fr; } }
.smql-page { max-width: 960px; }
.smql-page .gh-card { margin-bottom: 16px; }
.smql-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.smql-list li { display: grid; gap: 2px; }
.smql-list span { font-size: 12.5px; color: var(--muted); }
.smql-ex { text-decoration: none; }
.smql-ex code { font-size: 12.5px; padding: 3px 8px; border-radius: 6px; background: var(--sunken); color: var(--text); overflow-wrap: anywhere; display: inline-block; }
.smql-ex:hover code { background: var(--accent-soft); color: var(--accent-ink); }
.smql-table td { font-size: 13px; vertical-align: top; }
.smql-table td:first-child { white-space: nowrap; }
.smql-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; }

/* ---------- teams ---------- */
.tm-page { max-width: 1240px; }
.tm-page .tm-head { align-items: center; justify-content: space-between; flex-wrap: nowrap; margin-bottom: 4px; }
.tm-page .rp-desc { margin: 0 0 12px; }
.tm-page .tm-range { margin-bottom: 16px; }
.tm-range { margin: 0; }
.tm-score th[scope='row'] { display: grid; gap: 2px; text-align: left; font-weight: 400; }
.tm-name { font-weight: 600; color: var(--text); text-decoration: none; }
.tm-name:hover { color: var(--accent-ink); text-decoration: underline; }
.tm-comp-count { font-size: 12px; }
.tm-score td a { color: inherit; text-decoration: none; display: inline-block; min-width: 28px; }
.tm-score td a:hover { color: var(--accent-ink); text-decoration: underline; }
.tm-score td.tm-hot { color: var(--danger); font-weight: 600; }
.tm-score td.tm-up { color: var(--danger); }
.tm-score td.tm-down { color: var(--ok); }
.tm-note { font-size: 12.5px; margin: 8px 2px 20px; }
.tm-orphans { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; }
.tm-orphans h2 { margin: 0 0 8px; font-size: 14px; }
.tm-big { margin: 4px 0; font-size: 32px; font-weight: 700; }
.tm-big a { color: var(--text); text-decoration: none; }
.tm-big a:hover { color: var(--accent-ink); }
.tm-unowned { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tm-unowned li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.tm-unowned a { text-decoration: none; }
.tm-people { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.tm-people > span { display: inline-flex; align-items: center; gap: 6px; }
.tm-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.tm-controls .rl-filter { margin: 0; }
.tm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tm-kpi { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; }
.tm-kpi b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tm-kpi span { font-size: 12.5px; color: var(--text-2); }
a.tm-kpi:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.tm-kpi.hot b { color: var(--danger); }
.tm-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tm-chart { min-width: 0; }
.tm-chart .chart-wrap .chart { min-width: 420px; }
.tm-table { margin: 10px 2px 18px; font-size: 13px; }
.tm-table summary { cursor: pointer; color: var(--text-2); }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tm-grid.tm-two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.tm-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px 16px; min-width: 0; }
.tm-card h2 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.tm-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tm-bars a { display: grid; grid-template-columns: minmax(80px, 40%) minmax(0, 1fr) 32px; align-items: center; gap: 8px; padding: 4px 4px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 13px; }
.tm-bars a:hover { background: var(--hover); }
.tm-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-bar-track { height: 8px; border-radius: 4px; background: var(--sunken); overflow: hidden; }
.tm-bar-track i { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: var(--series-blue); }
.tm-bar-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tm-issues { list-style: none; margin: 0; padding: 0; display: grid; }
.tm-issues li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); min-width: 0; font-size: 13px; }
.tm-issues li:first-child { border-top: 0; }
.tm-issues li > .ico { flex: none; }
.tm-issue { flex: 1; min-width: 0; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-issue:hover { color: var(--accent-ink); text-decoration: underline; }
.tm-key { color: var(--text-2); font-weight: 600; font-size: 12px; }
.tm-age { font-size: 12px; flex: none; }
.tm-none { border: 0; }
.tm-comps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.tm-comps li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.tm-needs { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; background: var(--sunken); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.tm-info .hint { font-size: 12.5px; margin: 0; }
.tm-list .tm-row { grid-template-columns: 36px minmax(0, 1fr) 160px auto auto; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tm-chips .lz b { font-weight: 700; margin-right: 2px; }
@media (max-width: 900px) {
  .tm-charts { grid-template-columns: minmax(0, 1fr); }
  .tm-orphans { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tm-list .tm-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
  .tm-list .co-lead { display: none; }
  .tm-grid.tm-two { grid-template-columns: 1fr; }
}
.cr-team { margin-top: 8px; display: grid; gap: 8px; }
.cr-team-one { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.cr-team-one b { color: var(--accent-ink); }
.cr-team-ask { margin: 6px 0 2px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.cr-team-needs { white-space: pre-wrap; font-size: 12.5px; line-height: 1.5; color: var(--text); max-height: 160px; overflow: auto; }

/* ---------- automation ---------- */
.au-page { max-width: 1180px; }
.au-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.au-head h1 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0 0 4px; }
.au-head .rp-desc { max-width: 680px; }
.au-head label.btn { cursor: pointer; }
.au-page .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-2); }
.au-page .switch input { appearance: none; width: 30px; height: 18px; border-radius: 9px; background: var(--line-strong); position: relative; margin: 0; cursor: pointer; transition: background 0.15s; flex: none; }
.au-page .switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.au-page .switch input:checked { background: var(--ok); }
.au-page .switch input:checked::after { transform: translateX(12px); }
.au-page .switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.au-group { margin-bottom: 24px; }
.au-group h2 { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 0 0 8px; display: flex; gap: 6px; align-items: center; text-transform: uppercase; letter-spacing: 0.03em; }
.au-rules { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.au-rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 64px; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); }
.au-rule:first-child { border-top: 0; }
.au-rule:hover { background: var(--hover); }
.au-rule.off .au-rule-main b { color: var(--muted); }
.au-rule-main { display: grid; gap: 2px; color: var(--text); text-decoration: none; min-width: 0; }
.au-rule-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-rule-main .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-rule-main:hover b { color: var(--accent-ink); }
.au-rule-last { white-space: nowrap; }
.au-runs { text-align: right; }
.au-outcome { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11.5px; font-weight: 600; background: var(--sunken); color: var(--text-2); }
.au-outcome[data-outcome='success'] { background: var(--ok-soft); color: var(--ok); }
.au-outcome[data-outcome='some_errors'] { background: #fff9db; color: #a86400; }
.au-outcome[data-outcome='failed'] { background: var(--danger-soft); color: var(--danger); }
.au-empty { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 24px; text-align: center; color: var(--text-2); }
.au-empty p { margin: 4px 0; }
.au-report { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; background: var(--surface); }
.au-report h2 { font-size: 15px; margin: 0 0 6px; }
.au-report ul { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; }
.au-report li { margin: 2px 0; }

.au-edit-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; flex-wrap: wrap; }
.au-name { font-size: 20px; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; margin-left: -9px; background: none; color: var(--text); min-width: min(100%, 420px); flex: 1 1 320px; }
.au-name:hover { border-color: var(--line-strong); }
.au-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: var(--surface); }
.au-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.au-side { display: grid; gap: 16px; position: sticky; top: calc(var(--top) + 12px); }
.au-side h3 { font-size: 13px; font-weight: 600; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.au-side-body { padding: 12px 14px; display: grid; gap: 10px; }
.au-side-body .hint { margin: 0; }
.au-smart { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; max-height: 260px; overflow: auto; }
.au-sv { border: 1px solid var(--line); background: var(--sunken); border-radius: 4px; padding: 1px 5px; cursor: pointer; font-size: 11.5px; color: var(--text-2); }
.au-sv:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.au-flow { min-width: 0; }
.au-steps { list-style: none; margin: 0; padding: 0; min-width: 0; }
.au-trigger, .au-step { position: relative; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); margin-bottom: 18px; }
.au-trigger::after, .au-step::after { content: ''; position: absolute; left: 26px; bottom: -19px; width: 2px; height: 18px; background: var(--line-strong); }
.au-trigger { border-color: var(--accent-line); }
.au-step-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.au-step-head b { font-weight: 600; }
.au-step-head select { min-width: 0; height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; background: var(--surface); font-weight: 600; max-width: 100%; }
.au-step-head .icon-btn { width: 26px; height: 26px; color: var(--muted); }
.au-step-head .icon-btn:disabled { opacity: 0.35; cursor: default; }
.au-kind { display: inline-grid; place-items: center; min-width: 38px; height: 22px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--sunken); color: var(--text-2); flex: none; }
.au-kind[data-kind='trigger'] { background: var(--accent); color: var(--on-accent); }
.au-kind[data-kind='condition'] { background: var(--info-soft); color: var(--info); }
.au-kind[data-kind='action'] { background: var(--ok-soft); color: var(--ok); }
.au-kind[data-kind='branch'], .au-kind[data-kind='if'] { background: var(--epic-soft); color: var(--epic); }
.au-step > .hint { margin: 0 12px 6px; }
.au-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 12px; padding: 4px 12px 12px; }
.au-fields:empty { display: none; }
.au-field { display: grid; gap: 4px; min-width: 0; }
.au-field[hidden] { display: none; }
.au-field > span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.au-field input, .au-field select, .au-field textarea { height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 9px; background: var(--surface); width: 100%; font: inherit; }
.au-field textarea { height: auto; padding: 7px 9px; resize: vertical; }
.au-field:has(textarea), .au-field:has(.au-ops), .au-field:has(.au-people) { grid-column: 1 / -1; }
.au-field input:focus, .au-field select:focus, .au-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.au-field .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.au-people { display: flex; flex-wrap: wrap; gap: 6px; }
.au-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 6px; border: 1px solid var(--line-strong); border-radius: 13px; font-size: 12.5px; cursor: pointer; background: var(--surface); }
.au-chip:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.au-chip input { margin: 0; accent-color: var(--accent); }
.au-ops { display: grid; gap: 6px; justify-items: start; }
.au-op { display: grid; grid-template-columns: minmax(120px, 1fr) 110px minmax(140px, 2fr) auto; gap: 6px; width: 100%; align-items: center; }
.au-nest { margin: 0 12px 12px; padding: 12px 12px 2px; border-left: 2px solid var(--epic-soft); background: var(--bg); border-radius: 0 6px 6px 0; }
.au-nest-label { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.au-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding-left: 4px; }
.au-nest .au-add { margin-bottom: 12px; }
.au-log { margin-top: 32px; }
.au-log h2 { font-size: 15px; margin: 0 0 8px; }
.au-runs-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.au-runs-list > li { border-top: 1px solid var(--line); }
.au-runs-list > li:first-child { border-top: 0; }
.au-runs-list summary { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.au-runs-list summary:hover { background: var(--hover); }
.au-log-lines { margin: 0; padding: 4px 12px 12px 36px; font-size: 12.5px; color: var(--text-2); display: grid; gap: 3px; }
.au-log-lines li { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .au-cols { grid-template-columns: minmax(0, 1fr); }
  .au-side { position: static; }
  .au-rule { grid-template-columns: auto minmax(0, 1fr); }
  .au-rule-last, .au-runs { grid-column: 2; text-align: left; }
  .au-op { grid-template-columns: 1fr 1fr; }
}

/* email outbox */
.em-list { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-width: 960px; }
.em-list > .hint { padding: 16px; margin: 0; }
.em-row { border-top: 1px solid var(--line); }
.em-row:first-child { border-top: 0; }
.em-row summary { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, auto) auto; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.em-row summary::-webkit-details-marker { display: none; }
.em-row summary:hover { background: var(--hover); }
.em-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.em-to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-status { display: inline-flex; justify-content: center; height: 20px; line-height: 20px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; background: var(--sunken); color: var(--text-2); }
.em-status[data-status='sent'] { background: var(--ok-soft); color: var(--ok); }
.em-status[data-status='failed'] { background: var(--danger-soft); color: var(--danger); }
.em-body { padding: 0 14px 14px 102px; }
.em-body pre { white-space: pre-wrap; font: inherit; margin: 6px 0 0; padding: 10px 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--line); }
.em-body .hint { margin: 2px 0; }
@media (max-width: 700px) {
  .em-row summary { grid-template-columns: 70px minmax(0, 1fr); }
  .em-to, .em-row time { grid-column: 2; }
  .em-body { padding-left: 14px; }
}

/* ---------- spaces (Confluence-style) ---------- */
.inbox-sec { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 18px 0 8px; }
.sp-avatar { --sp: var(--accent); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: color-mix(in srgb, var(--sp) 16%, var(--surface)); color: var(--sp); font-weight: 700; font-size: 14px; text-decoration: none; flex: none; line-height: 1; }
.sp-avatar.small { width: 20px; height: 20px; font-size: 12px; border-radius: 5px; }
.sp-avatar.big { width: 56px; height: 56px; font-size: 30px; border-radius: 12px; }
.sp-name { color: var(--text); text-decoration: none; font-weight: 600; font-size: 16px; }
.sp-star { font-size: 15px; color: var(--faint); }
.sp-star.on, .icon-btn.on { color: var(--flag); }
.btn.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }

/* the wiki shell */
.sp-wiki { --tree: 272px; grid-template-columns: var(--tree) minmax(0, 1fr); background: linear-gradient(to right, var(--surface) calc(var(--tree) - 1px), var(--line) calc(var(--tree) - 1px), var(--line) var(--tree), transparent var(--tree)); }
.sp-wiki .sp-tree { background: none; border-right: 0; }
.sp-wiki.sp-editing { background: none; }
.sp-wiki.sp-editing { grid-template-columns: minmax(0, 1fr); }
.sp-tree { display: flex; flex-direction: column; gap: 8px; padding: 12px 8px 16px; position: sticky; top: 0; height: calc(100vh - var(--top) - 85px); overflow: hidden; align-self: start; }
.sp-tree-head { display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.sp-tree-space { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px !important; font-weight: 600; color: var(--text) !important; min-width: 0; }
.sp-tree-space span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-filter input { width: 100%; height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 9px; background: var(--bg); font-size: 13px; }
.sp-filter input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.sp-tree-body { flex: 1 1 auto; min-height: 60px; overflow: auto; overscroll-behavior: contain; }
.sp-tree-body ul { list-style: none; margin: 0; padding: 0; position: static; }
.sp-tree-body ul ul { padding-left: 14px; display: none; }
.sp-tree-body .tr-item.open > ul { display: block; }
.tr-row { display: flex; align-items: center; gap: 2px; border-radius: 6px; position: relative; }
.tr-row:hover { background: var(--hover); }
.tr-row.on { background: var(--accent-soft); }
.tr-row.on a { color: var(--accent-ink); font-weight: 600; }
.tr-row a { flex: 1; min-width: 0; display: flex !important; align-items: center; gap: 7px; padding: 5px 4px !important; border-radius: 6px; color: var(--text-2); text-decoration: none; font-size: 13.5px; background: none !important; }
.tr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-caret { width: 18px; height: 22px; border: 0; background: none; cursor: pointer; color: var(--muted); border-radius: 4px; flex: none; padding: 0; display: grid; place-items: center; }
.tr-caret::before { content: ''; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.12s; }
.tr-item.open > .tr-row .tr-caret::before { transform: rotate(90deg); }
.tr-caret.blank::before { display: none; }
.tr-caret:hover { background: var(--line); color: var(--text); }
.tr-ico { width: 18px; text-align: center; flex: none; font-size: 14px; line-height: 1; }
.tr-doc { display: inline-block; width: 11px; height: 14px; border: 1.5px solid var(--muted); border-radius: 2px; vertical-align: -2px; background: linear-gradient(var(--muted), var(--muted)) 2px 4px / 5px 1.2px no-repeat, linear-gradient(var(--muted), var(--muted)) 2px 7px / 5px 1.2px no-repeat; }
.tr-add { opacity: 0; width: 22px; height: 22px; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; flex: none; margin-right: 2px; }
.tr-row:hover .tr-add, .tr-add:focus-visible { opacity: 1; }
.tr-add:hover { background: var(--line); color: var(--text); }
.tr-item.dragging > .tr-row { opacity: 0.45; }
.tr-row.drop-into { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tr-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.tr-row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.sp-tree-empty { padding: 6px 10px; margin: 0; }
.sp-tree-toggle { display: none !important; }
.sp-tree-foot { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 1px; }
.sp-tree-foot a { display: flex !important; align-items: center; gap: 8px; padding: 5px 10px !important; font-size: 13px; }
.sp-tree-foot .menu-sec { margin: 4px 10px; }

/* reading a page */
.sp-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 1100px; }
.sp-page.with-toc { grid-template-columns: minmax(0, 1fr) 210px; }
.sp-doc { max-width: 820px; }
.sp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sp-bar .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-actions { display: flex; align-items: center; gap: 2px; }
.sp-actions .btn { margin-right: 6px; }
.sp-title { display: flex; align-items: baseline; gap: 10px; margin-top: 10px !important; }
.sp-emoji { font-size: 0.95em; }
.sp-meta { gap: 6px; }
.sp-meta .dot { color: var(--muted); }
.sp-meta a { color: var(--muted); }
.sp-status-btn { border: 0; cursor: pointer; font: inherit; }
.sp-status-btn[data-color='none'] { background: none; color: var(--muted); border: 1px dashed var(--line-strong); }
.sp-content > :first-child { margin-top: 0; }
.sp-toc { position: sticky; top: 16px; align-self: start; font-size: 12.5px; border-left: 2px solid var(--line); padding: 2px 0 2px 12px; max-height: calc(100vh - var(--top) - 40px); overflow: auto; }
.sp-toc p { margin: 0 0 6px; font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
.sp-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sp-toc a { color: var(--text-2); text-decoration: none; display: block; line-height: 1.35; }
.sp-toc a:hover { color: var(--accent-ink); }
.sp-toc .l3 { padding-left: 10px; }
.sp-toc .l4 { padding-left: 20px; }
.sp-kids, .sp-files, .sp-comments { margin-top: 32px; }
.sp-kids h2, .sp-files h2, .sp-comments h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.sp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.sp-cards a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); text-decoration: none; height: 100%; }
.sp-cards a:hover { border-color: var(--accent-line); box-shadow: var(--card-shadow); }
.sp-cards b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sp-cards .hint { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-files ul { margin: 0; padding-left: 18px; }
.sp-labels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
.sp-label { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 4px; background: var(--info-soft); color: var(--info); font-size: 12px; font-weight: 600; text-decoration: none; }
.sp-label:hover { text-decoration: underline; }
.sp-c-list, .sp-replies { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sp-replies { margin-top: 12px; }
.sp-c { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.sp-c.resolved .sp-c-text { opacity: 0.6; }
.sp-c-head { margin: 0 0 2px; font-size: 13px; }
.sp-c-text { font-size: 14px; }
.sp-c-text > :first-child { margin-top: 0; }
.sp-c-text > :last-child { margin-bottom: 0; }
.sp-c-acts { margin: 4px 0 0; display: flex; gap: 10px; }
.sp-c-acts button { border: 0; background: none; padding: 0; color: var(--muted); font-size: 12.5px; cursor: pointer; font-weight: 600; }
.sp-c-acts button:hover { color: var(--accent-ink); }
.sp-comment-new, .sp-reply-form { display: flex; gap: 10px; margin-top: 16px; align-items: flex-start; }
.sp-reply-form { display: grid; gap: 6px; margin-top: 10px; }
.sp-comment-new textarea, .sp-reply-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; font: inherit; resize: vertical; background: var(--surface); }
.sp-comment-new textarea:focus, .sp-reply-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sp-comment-tools { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.sp-comment-tools[hidden] { display: none; }
.sp-mention-menu { position: absolute; z-index: 60; min-width: 220px; }
.sp-mention-menu button.on { background: var(--hover); }

/* rendered page text: panels, status, macros */
.md-panel { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 14px; margin: 14px 0; border-radius: 8px; background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 22%, transparent); }
.md-panel > div > :first-child { margin-top: 0; }
.md-panel > div > :last-child { margin-bottom: 0; }
.md-panel-icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--info); color: #fff; font-weight: 800; font-size: 12px; margin-top: 2px; }
.md-panel-title { font-weight: 700; margin: 0 0 2px !important; }
.md-panel p { margin: 4px 0; }
.md-panel[data-kind='note'] { background: var(--epic-soft); border-color: color-mix(in srgb, var(--epic) 22%, transparent); }
.md-panel[data-kind='note'] .md-panel-icon { background: var(--epic); }
.md-panel[data-kind='tip'], .md-panel[data-kind='success'] { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.md-panel[data-kind='tip'] .md-panel-icon, .md-panel[data-kind='success'] .md-panel-icon { background: var(--ok); }
.md-panel[data-kind='warning'] { background: color-mix(in srgb, var(--flag) 12%, var(--surface)); border-color: color-mix(in srgb, var(--flag) 35%, transparent); }
.md-panel[data-kind='warning'] .md-panel-icon { background: #e67700; }
.md-panel[data-kind='error'] { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.md-panel[data-kind='error'] .md-panel-icon { background: var(--danger); }
.md-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--info); }
.md-dot[data-kind='note'] { background: var(--epic); }
.md-dot[data-kind='tip'], .md-dot[data-kind='success'] { background: var(--ok); }
.md-dot[data-kind='warning'] { background: #e67700; }
.md-dot[data-kind='error'] { background: var(--danger); }
.md-status { display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; background: var(--sunken); color: var(--text-2); vertical-align: 1px; white-space: nowrap; }
.md-status[data-color='blue'] { background: var(--info-soft); color: var(--info); }
.md-status[data-color='green'] { background: var(--ok-soft); color: var(--ok); }
.md-status[data-color='yellow'] { background: color-mix(in srgb, var(--flag) 18%, var(--surface)); color: #a35c00; }
.md-status[data-color='red'] { background: var(--danger-soft); color: var(--danger); }
.md-status[data-color='purple'] { background: var(--epic-soft); color: var(--epic); }
.md-expand { margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.md-expand summary { cursor: pointer; padding: 8px 12px; font-weight: 600; color: var(--text-2); }
.md-expand-body { padding: 0 14px 6px; }
.md-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 12px 0; }
.md-column { min-width: 0; }
.md-column > :first-child { margin-top: 0; }
.md-mention { display: inline-block; padding: 0 5px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: 0.95em; }
.md-page { font-weight: 600; }
.md-missing { color: var(--danger); border-bottom: 1px dashed currentColor; }
.md-error { color: var(--danger); font-size: 13px; }
.md-toc { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 10px 16px; margin: 12px 0 18px; font-size: 13.5px; display: inline-block; min-width: 260px; }
.md-toc p { margin: 0 0 4px; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.md-toc ul { list-style: none; margin: 0; padding: 0; }
.md-children, .md-recent { padding-left: 20px; }
.md-tasks { list-style: none; padding-left: 4px !important; }
.md-issues { border: 1px solid var(--line); border-radius: 8px; margin: 12px 0; overflow: hidden; background: var(--surface); }
.md-issues-head { display: flex; gap: 10px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.md-issues-head span { font-weight: 700; color: var(--text-2); }
.md-issues-head a { margin-left: auto; }
.md-issues .md-table { margin: 0; border: 0; border-radius: 0; }
.md-file::before { content: '📎 '; }
.doc pre[data-lang]::before { content: attr(data-lang); display: block; font-size: 10.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; letter-spacing: 0.05em; }
.doc h2[id], .doc h3[id], .doc h4[id] { scroll-margin-top: 20px; }

/* space home */
.sp-home { max-width: 1160px; }
.sp-hero { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--sp) 10%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--sp) 18%, var(--line)); margin-bottom: 22px; flex-wrap: wrap; }
.sp-hero h1 { margin: 0 0 4px; font-size: 24px; }
.sp-hero .rp-desc { max-width: 640px; }
.sp-hero .crumb { margin: 0 0 2px; }
.sp-stats { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 8px 0 0; }
.sp-stats .avatar { margin-left: -4px; box-shadow: 0 0 0 2px var(--surface); }
.sp-hero-actions { display: flex; gap: 8px; align-items: center; }
.sp-home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.sp-home-title { font-size: 18px; margin: 0; }
.sp-home-side { display: grid; gap: 16px; }
.sp-home-side h3 { margin: 0; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
.sp-mini { list-style: none; margin: 0; padding: 8px 14px 10px; display: grid; gap: 8px; }
.sp-mini li { display: grid; gap: 1px; min-width: 0; }
.sp-mini a { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-mini a:hover { text-decoration: underline; }
.sp-mini .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-mini.wide { padding: 0; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 24px; }

/* the editor */
.sp-editor { max-width: 1400px; margin: 0 auto; }
.sp-edit-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 4px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.sp-select { height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); padding: 0 8px; }
.sp-edit-title { display: flex; align-items: center; gap: 8px; }
.sp-emoji-input { width: 44px; height: 44px; border: 1px dashed var(--line-strong); border-radius: 8px; background: none; text-align: center; font-size: 22px; flex: none; }
.sp-emoji-input:focus { outline: none; border-color: var(--accent); border-style: solid; }
.sp-edit-title .title-input { margin: 0; }
.sp-toolbar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin: 10px 0; position: sticky; top: 52px; z-index: 4; }
.sp-toolbar button { height: 28px; min-width: 28px; padding: 0 7px; border: 0; border-radius: 5px; background: none; cursor: pointer; color: var(--text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sp-toolbar button:hover { background: var(--hover); color: var(--text); }
.sp-toolbar .sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 4px; }
.sp-view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sp-view-switch button { border-radius: 0; }
.sp-view-switch button.on { background: var(--accent-soft); color: var(--accent-ink); }
.sp-split textarea { min-height: 62vh; font-size: 13.5px; background: var(--surface); }
.sp-split textarea.drop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sp-split .preview { max-height: none; min-height: 62vh; padding: 8px 20px; }
.sp-split[data-view='write'] { grid-template-columns: minmax(0, 1fr); }
.sp-split[data-view='write'] .preview { display: none; }
.sp-split[data-view='preview'] { grid-template-columns: minmax(0, 1fr); }
.sp-split[data-view='preview'] .sp-write { display: none; }
.sp-edit-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.sp-help { margin-top: 16px; font-size: 13px; color: var(--text-2); }
.sp-help summary { cursor: pointer; color: var(--muted); }
.sp-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.sp-help-grid div { display: grid; gap: 6px; align-content: start; }
.sp-help-grid code { font-size: 12px; }
.sp-draft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-tpl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.sp-tpl-grid button { width: 100%; height: 100%; text-align: left; display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); }
.sp-tpl-grid button:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.sp-tpl-emoji { font-size: 22px; }

/* history */
.sp-history h1 { font-size: 22px; margin: 4px 0; }
.sp-history-cols { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; margin-top: 16px; align-items: start; }
.sp-versions { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.sp-versions li { border-top: 1px solid var(--line); }
.sp-versions li:first-child { border-top: 0; }
.sp-versions a { display: grid; gap: 2px; padding: 9px 12px; color: var(--text); text-decoration: none; }
.sp-versions a:hover { background: var(--hover); }
.sp-versions li.on a { background: var(--accent-soft); }
.sp-v { font-weight: 700; display: flex; gap: 6px; align-items: center; }
.sp-v-who { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.sp-v-note { font-size: 12.5px; color: var(--text-2); font-style: italic; }
.sp-history-view h2 { font-size: 16px; margin: 0; }
.sp-tabs { display: flex; gap: 4px; margin: 10px 0; border-bottom: 1px solid var(--line); }
.sp-tabs button { border: 0; background: none; padding: 8px 10px; cursor: pointer; color: var(--text-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sp-tabs button.on { color: var(--accent-ink); border-bottom-color: var(--accent); }
.sp-diff { font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: auto; padding: 6px 0; }
.sp-diff > div { padding: 0 12px 0 28px; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.sp-diff span { position: absolute; left: 10px; }
.df-same { color: var(--text-2); }
.df-add { background: var(--ok-soft); color: var(--text); }
.df-add span { color: var(--ok); }
.df-del { background: var(--danger-soft); color: var(--text); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.df-del span { color: var(--danger); }
.df-gap { color: var(--faint); text-align: center; padding: 0 !important; }

/* settings */
.sp-settings { max-width: 860px; display: grid; gap: 18px; }
.sp-settings h1 { font-size: 22px; margin: 4px 0; }
.sp-set h2 { margin: 0; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.sp-set-body { padding: 14px 16px; display: grid; gap: 12px; }
.sp-set-body > .sp-label { justify-self: start; }
.sp-set-body:has(> .sp-label) { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-inline { display: flex !important; align-items: center; gap: 12px; }
.sp-inline p { margin: 0; }
.sp-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-color { width: 26px; height: 26px; border-radius: 6px; background: var(--sp); cursor: pointer; display: grid; place-items: center; }
.sp-color input { appearance: none; margin: 0; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; }
.field .sp-color input, .sp-color input { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.field .au-chip input { width: auto; height: auto; padding: 0; border: 0; }
.sp-color input:checked { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sp); }
.sp-projects { display: flex; flex-wrap: wrap; gap: 6px; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); }
.sp-list li:first-child { border-top: 0; }
.btn.danger { color: var(--danger); }

/* the directory and search */
.sp-dir h1, .sp-search-page h1 { font-size: 24px; margin: 4px 0; }
.sp-search { display: flex; align-items: center; gap: 8px; height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; background: var(--surface); color: var(--muted); min-width: 240px; }
.sp-search input { border: 0; background: none; outline: none; flex: 1; min-width: 0; height: 100%; font: inherit; color: var(--text); }
.sp-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sp-search.big { height: 44px; margin: 12px 0 18px; max-width: 760px; }
.sp-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 26px; }
.sp-quick h2, .sp-updated h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 8px; }
.sp-quick .sp-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sp-dir-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.sp-filters a { padding: 5px 10px; border-radius: 16px; color: var(--text-2); text-decoration: none; font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.sp-filters a:hover { background: var(--hover); }
.sp-filters a.on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.sp-filter-form input { height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; background: var(--surface); width: 200px; }
.sp-grid { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.sp-card { --sp: var(--accent); position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px 14px 12px; display: grid; gap: 8px; align-content: start; border-top: 3px solid var(--sp); }
.sp-card:hover { box-shadow: var(--card-shadow); }
.sp-card-main { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--text); padding-right: 28px; }
.sp-card-main .sp-avatar { width: 36px; height: 36px; font-size: 19px; border-radius: 8px; }
.sp-card-main::after { content: ''; position: absolute; inset: 0; }
.sp-card-text { display: grid; min-width: 0; }
.sp-card-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-card .sp-star { position: absolute; top: 10px; right: 8px; z-index: 1; }
.sp-card-desc { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.sp-card-foot { margin: 0; }
.sp-kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sp-kind-pick label { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; position: relative; }
.sp-kind-pick label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sp-kind-pick input { position: absolute; opacity: 0; }
.sp-search-cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; max-width: 1100px; }
.sp-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sp-hits li { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.sp-hits a { font-size: 15px; text-decoration: none; }
.sp-hits a:hover { text-decoration: underline; }
.sp-hits p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }
.sp-hits mark { background: color-mix(in srgb, var(--flag) 30%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.sp-label-box h3 { margin: 0; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
.sp-label-box > div { padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 1100px) {
  .sp-page.with-toc { grid-template-columns: minmax(0, 1fr); }
  .sp-toc { display: none; }
  .sp-home-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sp-wiki { grid-template-columns: minmax(0, 1fr); }
  .sp-wiki { background: none; }
  .sp-wiki .sp-tree { position: static; max-height: none; border-bottom: 1px solid var(--line); background: var(--surface); }
  .sp-tree-body { max-height: 300px; overflow: auto; }
  .sp-tree-toggle { display: inline-flex !important; }
  .sp-tree:not(.open) .sp-filter, .sp-tree:not(.open) .sp-tree-body, .sp-tree:not(.open) .sp-tree-foot { display: none; }
  .sp-tree-body ul { display: block; }
  .sp-history-cols, .sp-search-cols { grid-template-columns: minmax(0, 1fr); }
  .sp-split, .sp-split[data-view='split'] { grid-template-columns: minmax(0, 1fr); }
  .sp-split[data-view='split'] .preview { display: none; }
  .sp-toolbar { top: 0; }
  .sp-kind-pick { grid-template-columns: 1fr; }
  .sp-search { min-width: 0; width: 100%; }
}
@media print {
  .top, .project-head, .sp-tree, .sp-actions, .sp-comments, .sp-labels button, .toast { display: none !important; }
  .sp-wiki { display: block; }
  .wiki-body { padding: 0; }
}

/* resolution next to a done status */

/* ---------- dashboards ---------- */
.dg-page { max-width: 1440px; }
.dg-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 16px; align-items: start; }
.dg-col { display: grid; gap: 16px; min-height: 80px; border-radius: 10px; align-content: start; }
.dg-col.over { outline: 2px dashed var(--accent-line); outline-offset: 4px; }
.dg-drop-hint { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }
.dg { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 0; }
.dg.dragging { opacity: 0.5; }
.dg-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.dg-head h2 { margin: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-head .icon-btn { color: var(--muted); font-size: 13px; text-decoration: none; }
.dg-grip { cursor: grab; color: var(--faint); margin-left: -6px; padding: 0 2px; user-select: none; }
.dg-body { padding: 10px 14px 12px; }
.dg-error { color: var(--danger); font-size: 13px; margin: 4px 0; }
.dg-empty { color: var(--muted); font-size: 13px; margin: 8px 0; }
.dg-foot { margin: 8px 0 0; font-size: 12.5px; }
.dg-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.dg-table td { padding: 6px 4px; border-top: 1px solid var(--line); vertical-align: middle; }
.dg-table tr:first-child td { border-top: 0; }
.dg-type { width: 22px; }
.dg-key { width: 74px; white-space: nowrap; }
.dg-key a { color: var(--muted); font-weight: 600; text-decoration: none; }
.dg-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-sum a { color: var(--text); text-decoration: none; }
.dg-sum a:hover, .dg-key a:hover { text-decoration: underline; }
.dg-st { width: 110px; text-align: right; }
.dg-who { width: 30px; text-align: right; }
.dg-count { display: grid; place-items: center; padding: 14px 0 8px; text-decoration: none; color: var(--text); }
.dg-count b { font-size: 44px; line-height: 1; font-weight: 700; color: var(--accent-ink); }
.dg-count span { color: var(--muted); font-size: 13px; margin-top: 4px; }
.dg-pie { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: center; }
.dg-donut { width: 160px; height: 160px; display: block; }
.dg-donut path, .dg-donut circle { stroke: var(--surface); stroke-width: 2px; transition: opacity 0.12s; }
.dg-donut circle { stroke-width: 28px; }
.dg-donut a:hover path { opacity: 0.8; }
.dg-total { font-size: 26px; font-weight: 700; fill: var(--text); text-anchor: middle; }
.dg-total-label { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.dg-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; min-width: 0; }
.dg-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; gap: 8px; align-items: center; }
.dg-legend a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-legend a:hover { text-decoration: underline; }
.dg-swatch { width: 10px; height: 10px; border-radius: 3px; }
.dg-n { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.dg-pct { color: var(--muted); text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.dg-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.dg-stats li { display: grid; grid-template-columns: minmax(80px, 34%) minmax(0, 1fr) 36px 38px; gap: 8px; align-items: center; }
.dg-stats a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-stats a:hover { text-decoration: underline; }
.dg-bar { height: 8px; border-radius: 4px; background: var(--sunken); overflow: hidden; display: block; }
.dg-bar i { display: block; height: 100%; background: var(--flow-1); border-radius: 4px 0 0 4px; min-width: 2px; }
.dg-scroll { overflow: auto; max-height: 420px; }
.dg-2d { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.dg-2d th, .dg-2d td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dg-2d thead th { position: sticky; top: 0; background: var(--surface); font-weight: 600; color: var(--text-2); max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.dg-2d tbody th, .dg-2d tfoot th { text-align: left; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.dg-2d td { background: color-mix(in srgb, var(--flow-1) calc(var(--v, 0) * 32%), transparent); }
.dg-2d td a { color: var(--text); font-weight: 600; text-decoration: none; }
.dg-2d td a:hover { text-decoration: underline; }
.dg-2d .dg-tot { background: var(--sunken); font-weight: 700; }
.dg-zero { color: var(--faint); }
.dg-legend-row { display: flex; gap: 16px; align-items: center; font-size: 13px; margin: 0 0 6px; flex-wrap: wrap; }
.dg-legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.dg-key-line { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.dg-chart svg { width: 100%; height: auto; display: block; }
.dg-grid line.dg-grid, .dg-line-chart .dg-grid { stroke: var(--line); stroke-width: 1; }
.dg-axis { font-size: 10px; fill: var(--muted); }
.dg-line { stroke-width: 2px; stroke-linejoin: round; }
.dg-dot { opacity: 0; stroke: var(--surface); stroke-width: 2px; }
.dg-line-chart:hover .dg-dot { opacity: 1; }
.dg-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.dg-activity li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.dg-activity p { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.dg-activity .hint { white-space: nowrap; }
.dg-sprint-name { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0 10px; }
.dg-sprint-name a { color: var(--text); text-decoration: none; }
.dg-meter { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 12.5px; margin-bottom: 6px; color: var(--text-2); }
.dg-meter b { text-align: right; color: var(--text); }
.dg-meter .dg-bar i { background: var(--series-neutral); }
.dg-meter.work .dg-bar i { background: var(--flow-done); }
.dg-cats { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dg-cats li { display: grid; gap: 4px; justify-items: start; padding: 8px; border-radius: 8px; background: var(--bg); }
.dg-cats b { font-size: 20px; }
.dg-text > :first-child { margin-top: 0; }
.dg-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dg-kinds button { width: 100%; height: 100%; text-align: left; display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); }
.dg-kinds button:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.dg-boards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dg-boards a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; height: 100%; }
.dg-boards a:hover { border-color: var(--accent-line); box-shadow: var(--card-shadow); }
.dg-board-desc { font-size: 13px; color: var(--text-2); }
@media (max-width: 900px) {
  .dg-grid { grid-template-columns: minmax(0, 1fr); }
  .dg-pie { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .dg-legend { width: 100%; }
}

/* ---------- sign in and your account ---------- */
.menu-form { display: grid; margin: 0; }
.menu-form button { width: 100%; font: inherit; }
body.auth-body { display: grid; place-items: center; overflow: auto; min-height: 100dvh; padding: 24px 16px; box-sizing: border-box; background: radial-gradient(1200px 500px at 50% -10%, var(--accent-soft), transparent 70%), var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; padding: 28px 28px 22px; box-shadow: var(--shadow-lift); display: grid; gap: 14px; }
.auth-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); text-decoration: none; justify-self: start; }
.auth-card h1 { margin: 6px 0 0; font-size: 22px; }
.auth-sub { margin: -6px 0 2px; color: var(--text-2); }
.auth-card .alert, .auth-card .notice { margin: 0; }
.auth-form { display: grid; gap: 12px; }
.auth-submit { height: 38px; width: 100%; }
.auth-google { height: 40px; width: 100%; gap: 10px; font-weight: 600; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-link { border-top: 1px solid var(--line); padding-top: 12px; }
.auth-link summary { cursor: pointer; color: var(--accent-ink); font-weight: 500; font-size: 13px; }
.auth-link[open] summary { margin-bottom: 12px; }
.auth-dev { margin: 0; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; word-break: break-all; }
.ac-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-top: 14px; }
.ac-card > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ac-ways { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ac-ways li { display: flex; gap: 8px; align-items: baseline; }
.ac-form { display: grid; gap: 10px; max-width: 360px; }
.ac-form .hint { margin: -4px 0 0; }
.pp-access { font-size: 13px; color: var(--text-2); }
.pp-tag { margin-left: 6px; font-size: 11px; vertical-align: 1px; }
.pp-access-fields { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 12px; margin: 4px 0 0; display: grid; gap: 8px; }
.pp-access-fields legend { font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 0 4px; }
.pp-access-fields .check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pp-access-fields .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* ---------- backlog: select, edit in place, create, bulk ---------- */
.bl-sel { display: grid; place-items: center; width: 18px; height: 18px; cursor: pointer; }
.bl-sel input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; opacity: 0.35; transition: opacity 0.1s; }
.bl-row:hover .bl-sel input, .bl-sel input:checked, .bl-sel input:focus-visible, .bl-sections:has(.bl-row.selected) .bl-sel input { opacity: 1; }
@media (hover: none) { .bl-sel input { opacity: 1; } }
.bl-row.selected, .bl-row.selected:hover { background: color-mix(in srgb, var(--accent-soft) 80%, var(--raised)); box-shadow: inset 3px 0 0 var(--accent); }
.bl-flag { color: var(--flag, #e67700); margin-right: 6px; }
.pts-btn, .av-pick { display: grid; place-items: center; border: 0; background: none; padding: 0; border-radius: 6px; cursor: pointer; min-width: 28px; height: 28px; }
.pts-btn:hover, .av-pick:hover, .pts-btn:focus-visible, .av-pick:focus-visible { background: var(--hover); }
.pts-btn .pts.empty { opacity: 0; }
.bl-row:hover .pts-btn .pts.empty, .pts-btn:focus-visible .pts.empty { opacity: 1; }
.pts-input { width: 44px; height: 26px; border: 1px solid var(--accent); border-radius: 6px; padding: 0 4px; text-align: center; background: var(--raised); box-shadow: 0 0 0 2px var(--accent-soft); outline: none; font: inherit; font-size: 12.5px; }
.bl-add { color: var(--text-2); }
.bl-create.top:empty { display: none; }
.bl-create.top { margin: 0 0 6px; }
.bl-create-form .icon-btn { width: 30px; height: 30px; flex: none; }
.bl-create-form .btn { flex: none; }
.bl-bulk { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift); max-width: calc(100vw - 16px); }
.bl-bulk[hidden] { display: none; }
.bl-bulk-count { margin-right: 6px; white-space: nowrap; font-size: 13px; color: var(--text-2); }
.bl-bulk-count b { color: var(--text); }
.qf-pick { display: inline-flex; align-items: center; gap: 4px; }
.qf-pick .ico { color: var(--muted); }
.bl-off { max-width: 520px; margin: 48px auto 0; text-align: center; display: grid; justify-items: center; gap: 12px; padding: 32px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bl-off h2 { margin: 6px 0 0; font-size: 18px; }
.bl-off .rp-desc { max-width: 420px; }
.bl-off svg .ta-col { fill: var(--line-strong); opacity: 0.6; }
.bl-off svg .ta-row { fill: var(--raised); }
.bl-off svg .ta-accent { fill: var(--accent); }
.switch-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.switch-row > input { appearance: none; flex: none; width: 34px; height: 20px; margin: 1px 0 0; border-radius: 10px; background: var(--line-strong); position: relative; cursor: pointer; transition: background 0.15s; }
.switch-row > input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.switch-row > input:checked { background: var(--accent); }
.switch-row > input:checked::after { transform: translateX(14px); }
.switch-row > input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-row > span { display: grid; gap: 2px; }
@media (prefers-reduced-motion: reduce) { .switch-row > input, .switch-row > input::after, .bl-sel input { transition: none; } }
body:has(.bl-bulk:not([hidden])) .toast { bottom: 84px; }
@media (max-width: 640px) {
  .bl-bulk { left: 8px; right: 8px; bottom: 12px; transform: none; flex-wrap: wrap; justify-content: center; padding: 8px; }
  .bl-bulk-count { flex: 1 1 100%; text-align: center; margin: 0 0 2px; }
  body:has(.bl-bulk:not([hidden])) .toast { bottom: 120px; }
  .bl-title .btn.primary { padding: 0 10px; }
}

/* ---------- timeline ---------- */
.tl-page { padding: 16px 24px 24px; display: flex; flex-direction: column; min-height: 0; height: 100%; box-sizing: border-box; }
.tl-toolbar { margin: 16px 0 12px; }
.tl { flex: 1; min-height: 260px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; display: flex; }
.tl > .loading, .tl > .alert { margin: 16px; }
.tl-scroll { flex: 1; overflow: auto; position: relative; overscroll-behavior: contain; }
.tl-body { position: relative; }
.tl-row { display: flex; min-height: 40px; position: relative; }
.tl-row + .tl-row { border-top: 1px solid var(--line); }
.tl-name { position: sticky; left: 0; z-index: 3; flex: none; width: 320px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 8px; background: var(--surface); border-right: 1px solid var(--line-strong); min-width: 0; }
.tl-track { position: relative; flex: none; }
.tl-head { position: sticky; top: 0; z-index: 5; min-height: 52px; background: var(--surface); border-bottom: 1px solid var(--line-strong); }
.tl-head + .tl-body > .tl-row:first-of-type, .tl-body > .tl-lines + .tl-row { border-top: 0; }
.tl-corner { z-index: 6; font-size: 12px; color: var(--muted); font-weight: 600; }
.tl-scale { height: 52px; }
.tl-scale-top, .tl-scale-bottom { position: absolute; left: 0; right: 0; height: 26px; }
.tl-scale-top { top: 0; }
.tl-scale-bottom { top: 26px; border-top: 1px solid var(--line); }
.tl-tick { position: absolute; top: 0; height: 26px; line-height: 26px; padding-left: 6px; box-sizing: border-box; font-size: 12px; color: var(--text-2); border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.tl-tick.tl-upper { font-weight: 600; color: var(--text); }
.tl-release { position: absolute; top: 7px; width: 11px; height: 11px; margin-left: -5.5px; background: var(--accent); transform: rotate(45deg); border-radius: 2px; z-index: 1; }
.tl-release.done { background: var(--ok); }
.tl-release:hover, .tl-release:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.tl-lines { position: absolute; top: 0; right: 0; pointer-events: none; z-index: 1; }
.tl-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tl-lines i.rel { background: none; border-left: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.tl-lines i.today { width: 2px; margin-left: -1px; background: var(--accent); z-index: 2; }
.tl-lines i.today::before { content: ""; position: absolute; top: 0; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tl-sprints { min-height: 34px; background: var(--sunken); }
.tl-sprints .tl-name { background: var(--sunken); }
.tl-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.tl-sprint { position: absolute; top: 6px; height: 22px; line-height: 22px; padding: 0 8px; box-sizing: border-box; border-radius: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--line-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; border: 1px solid var(--surface); }
.tl-sprint[data-state='active'] { background: var(--info-soft); color: var(--info); }
.tl-sprint[data-state='closed'] { opacity: 0.65; }
.tl-toggle { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 0; background: none; border-radius: 4px; color: var(--text-2); cursor: pointer; transition: transform 0.15s; }
.tl-toggle:hover:not(:disabled) { background: var(--hover); }
.tl-toggle[aria-expanded='false'] { transform: rotate(-90deg); }
.tl-toggle:disabled { opacity: 0.25; cursor: default; }
.tl-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; font-size: 13.5px; }
.tl-title:hover { text-decoration: underline; }
.tl-key { color: var(--text-2); font-size: 12px; font-weight: 600; margin-right: 6px; }
.tl-epic .tl-title { font-weight: 500; }
.tl-child .tl-name { padding-left: 38px; }
.tl-prog { flex: none; width: 44px; height: 6px; border-radius: 3px; background: var(--line-strong); overflow: hidden; display: flex; }
.tl-prog.empty { background: var(--line); }
.tl-prog i { display: block; height: 100%; }
.tl-prog i.d { background: var(--ok); }
.tl-prog i.p { background: var(--info); }
.tl-add { width: 24px; height: 24px; opacity: 0; flex: none; }
.tl-epic:hover .tl-add, .tl-add:focus-visible { opacity: 1; }
@media (hover: none) { .tl-add { opacity: 1; } }
.tl-cat { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.tl-cat[data-cat='in_progress'] { background: var(--info); }
.tl-cat[data-cat='done'] { background: var(--ok); }
.tl-av { flex: none; display: grid; }
.tl-row.focus .tl-name { box-shadow: inset 3px 0 0 var(--accent); }
.tl-empty-hint { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 12px; font-size: 12px; color: var(--muted); opacity: 0; pointer-events: none; }
.tl-row:hover .tl-empty-hint { opacity: 1; }
.tl-track[data-track]:not(:has([data-bar])) { cursor: copy; }
.tl-bar { position: absolute; top: 8px; height: 24px; box-sizing: border-box; border-radius: 6px; background: color-mix(in srgb, var(--bar, var(--line-strong)) 22%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bar, var(--line-strong)) 60%, transparent); cursor: grab; z-index: 2; display: flex; align-items: center; overflow: hidden; touch-action: none; user-select: none; }
.tl-bar.child { top: 11px; height: 18px; border-radius: 9px; --bar: #868e96; }
.tl-bar.child[data-cat='in_progress'] { --bar: var(--info); }
.tl-bar.child[data-cat='done'] { --bar: var(--ok); }
.tl-bar.derived, .tl-bar.sprinted { border-style: dashed; background: color-mix(in srgb, var(--bar, var(--line-strong)) 10%, var(--surface)); }
.tl-bar:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.tl-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-bar.dragging { cursor: grabbing; box-shadow: var(--shadow-lift); z-index: 4; overflow: visible; }
.tl-bar.dragging::after { content: attr(data-tip); position: absolute; top: -26px; left: 0; padding: 2px 8px; border-radius: 4px; background: var(--text); color: var(--bg); font-size: 11.5px; white-space: nowrap; }
.tl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--bar) 45%, var(--surface)); pointer-events: none; }
.tl-bar-text { position: relative; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; pointer-events: none; }
.tl-grip { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1; }
.tl-grip.l { left: 0; }
.tl-grip.r { right: 0; }
.tl-bar:hover .tl-grip::after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 3px; width: 2px; border-radius: 1px; background: color-mix(in srgb, var(--bar, var(--text-2)) 70%, var(--text)); }
.tl-foot { min-height: 44px; }
.tl-foot .quick-add { width: 100%; }
.tl-add-form { flex: 1; display: flex; }
.tl-add-form input { flex: 1; height: 30px; border: 1px solid var(--accent); border-radius: 6px; padding: 0 8px; background: var(--raised); box-shadow: 0 0 0 2px var(--accent-soft); outline: none; min-width: 0; font: inherit; }
.tl-none .hint { padding: 8px 0; }
.tl-help { margin: 8px 2px 0; }
@media (max-width: 700px) {
  .tl-page { padding: 14px 16px 16px; }
  .tl-name { width: 170px; padding: 0 6px; gap: 6px; }
  .tl-child .tl-name { padding-left: 18px; }
  .tl-prog, .tl-av, .tl-key { display: none; }
  .tl-toolbar .board-search { flex: 1 1 100%; }
  .tl-help { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tl-toggle { transition: none; } }
.main:has(> .tl-page) { display: flex; flex-direction: column; }
.main > .tl-page { flex: 1; height: auto; }
/* The React app's project screens: the project header, then the screen filling the rest. */
.app-frame { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.app-frame > .board-page, .app-frame > .sr-page, .app-frame > .tl-page { flex: 1; height: auto; }
.app-frame.st-frame { height: auto; min-height: 100%; }
.st-frame > .st-page { flex: 1; min-height: 0; }
.st-frame > .wiki { flex: 1; }
/* A space's screens: the header stays put and the wiki scrolls under it, as on the server. */
.app-frame.st-frame:has(> .wiki) { height: 100%; }
.st-frame:has(> .wiki) > .wiki { min-height: 0; overflow-y: auto; }
.ac-choices { display: grid; gap: 8px; max-width: 520px; margin-top: 10px; }
.ac-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.ac-choice:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.ac-choice input { margin: 3px 0 0; accent-color: var(--accent); }
.ac-choice > span { display: grid; gap: 2px; }