/* hi2 HQ — one stylesheet, light and dark themes from the same tokens. */

:root {
  color-scheme: light;
  --page: #f6f6f3;
  --surface: #fcfcfb;
  --surface-2: #f1f1ed;
  --sidebar: #efefea;
  --text: #0b0b0b;
  --text-2: #52514e;
  --muted: #74726c;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: rgba(11, 11, 11, 0.18);
  --accent: #4a7a0b;            /* brand green, darkened for 5:1 on light */
  --accent-ink: #ffffff;
  --accent-weak: #ecf3df;
  --brand: #84c318;
  --good: #0ca30c;
  --good-text: #006300;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --critical-text: #b42a2a;
  --warning-text: #8a5a00;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --violet: #4a3aa7;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.06);
  --radius: 10px;
  --radius-sm: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232321;
    --sidebar: #141413;
    --text: #ffffff;
    --text-2: #c3c2b7;
    --muted: #9a988f;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);
    --accent: #84c318;
    --accent-ink: #0b0b0b;
    --accent-weak: #22300d;
    --good-text: #3fc23f;
    --critical-text: #f07a7a;
    --warning-text: #fab219;
    --series-1: #3987e5;
    --series-2: #d95926;
    --violet: #9085e9;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232321;
  --sidebar: #141413;
  --text: #ffffff;
  --text-2: #c3c2b7;
  --muted: #9a988f;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --accent: #84c318;
  --accent-ink: #0b0b0b;
  --accent-weak: #22300d;
  --good-text: #3fc23f;
  --critical-text: #f07a7a;
  --warning-text: #fab219;
  --series-1: #3987e5;
  --series-2: #d95926;
  --violet: #9085e9;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page);
  color: var(--text);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 20px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; color: var(--text-2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
p { margin: 0; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.pre { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.good-text { color: var(--good-text); }
.critical-text { color: var(--critical-text); font-weight: 600; }
.accent { color: var(--accent); }

.icon { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.icon.inline { width: 14px; height: 14px; margin-right: 4px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- layout ---------- */

.layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--sidebar); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 10px;
}
.brand { display: block; padding: 4px 8px 14px; }
.brand:hover { text-decoration: none; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.logo-img { height: 22px; width: auto; }
.logo-text { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.logo-sub { font-weight: 500; color: var(--muted); margin-left: 4px; }
.only-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-dark { display: inline; } :root:not([data-theme="light"]) .only-light { display: none; } }
:root[data-theme="dark"] .only-dark { display: inline; }
:root[data-theme="dark"] .only-light { display: none; }

.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 500;
}
.nav-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.nav-item.on { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.nav-item.on .icon { color: var(--accent); }
.nav-item.sub { font-weight: 400; font-size: 13.5px; }
.nav-badge { flex: none !important; background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: 11px; padding: 0 7px; font-weight: 700; line-height: 18px; }
.nav-section { margin: 14px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.sidebar-foot { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.me { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text); }
.me:hover { background: var(--surface-2); text-decoration: none; }
.me div { display: flex; flex-direction: column; min-width: 0; }
.me strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-tools { display: flex; gap: 4px; padding: 0 4px; }

.content { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 12px 24px; background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.title-wrap { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.page-title { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-title-extra { display: flex; gap: 8px; align-items: center; }
.topbar .search { width: 260px; }
.main { padding: 20px 24px 60px; max-width: 1360px; width: 100%; outline: none; }
.spacer { flex: 1; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }
.only-mobile { display: none; }
.scrim { display: none; }

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--axis); display: inline-block; flex: none; }
.live-dot.on { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.live-stamp { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }

/* ---------- controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.btn-danger { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 28px; padding: 0 9px; font-size: 13px; }
.btn-block { width: 100%; height: 40px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--text-2); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.subtle { width: 24px; height: 24px; opacity: 0.6; }
.icon-btn.subtle:hover { opacity: 1; }
.icon-btn.subtle .icon { width: 13px; height: 13px; }
.link-btn { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; }

input[type=text], input[type=search], input[type=email], input[type=url], input[type=password], input[type=date],
input[type=number], input[type=time], select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 7px 10px; min-height: 34px; width: 100%;
}
textarea { resize: vertical; min-height: 60px; line-height: 1.45; }
select { padding-right: 28px; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 0; border-color: var(--accent); }
input:disabled, textarea:disabled, select:disabled { background: var(--surface-2); color: var(--text-2); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.search { background-image: none; }
.toolbar select, .toolbar input:not([type=checkbox]) { width: auto; min-width: 140px; }
.toolbar .search { min-width: 220px; flex: 0 1 280px; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.span-2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.hint { color: var(--muted); font-size: 12px; }
.hint-box { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; color: var(--text-2); }
.form-error { color: var(--critical-text); font-size: 13px; font-weight: 500; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.month-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.row-end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

.people-picker { display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2); font-size: 12px; line-height: 20px; white-space: nowrap; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis;
}
.chip .icon { width: 12px; height: 12px; }
.chip.removable button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; display: inline-flex; }
.chip-routine { color: var(--text-2); }
.links-editor { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.links-editor > div { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.link-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 6px; align-items: center; }
.links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.links li { display: flex; align-items: center; gap: 6px; }

.seg-control { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg-control button { border: 0; background: var(--surface); color: var(--text-2); font: inherit; padding: 0 10px; height: 32px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.seg-control button + button { border-left: 1px solid var(--border-strong); }
.seg-control button.on { background: var(--accent-weak); color: var(--text); font-weight: 600; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; }
.tabs button { border: 0; background: none; font: inherit; color: var(--text-2); padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }

.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.toolbar.wrap { flex-wrap: wrap; }
.intro { margin-bottom: 14px; max-width: 820px; }
.result-count { margin: -4px 0 8px; }
.period-label { min-width: 150px; text-align: center; }

/* ---------- surfaces ---------- */

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px; }
.card-head h3 { display: flex; align-items: center; gap: 8px; }
.card-head.pad { padding: 14px 16px 0; }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; text-align: center; line-height: 20px; margin-left: 6px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-2.wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.narrow { max-width: 420px; }
.center-screen { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.login-card h1 { font-size: 22px; }
.login-head { display: flex; align-items: center; justify-content: space-between; }
.empty { text-align: center; padding: 28px 16px; color: var(--text-2); }
.empty p + p { margin-top: 4px; }
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 24px; }
.spin { width: 16px; height: 16px; border: 2px solid var(--grid); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-box { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--critical) 12%, var(--surface)); color: var(--critical-text); }
.refreshing { opacity: 0.6; transition: opacity 0.2s; }
.pad { padding: 14px 16px; }
.section-title { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 14px; }
.notice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-weak); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 500; }
.notice span { flex: 1; }
.notice:hover { text-decoration: none; filter: brightness(0.98); }

/* ---------- pills, avatars ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; background: var(--surface-2); color: var(--text-2);
}
.pill .icon { width: 13px; height: 13px; }
.pill.tiny { font-size: 11px; line-height: 17px; padding: 0 6px; margin-left: 6px; }
.health.h-critical, .pill.h-critical { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 13%, transparent); }
.health.h-critical .icon, .pill.h-critical .icon { color: var(--critical); }
.health.h-serious { color: var(--text); background: color-mix(in srgb, var(--serious) 18%, transparent); }
.health.h-serious .icon { color: var(--serious); }
.health.h-warning, .pill.h-warning { color: var(--text); background: color-mix(in srgb, var(--warning) 20%, transparent); }
.health.h-warning .icon, .pill.h-warning .icon { color: var(--warning-text); }
.health.h-good { color: var(--good-text); background: color-mix(in srgb, var(--good) 11%, transparent); }
.status .icon { color: var(--muted); }
.status.st-doing .icon { color: var(--series-1); }
.status.st-review .icon { color: var(--violet); }
.status.st-done { color: var(--good-text); }
.status.st-done .icon { color: var(--good); }
.status.st-missed { color: var(--critical-text); }
.status.st-cancelled { text-decoration: line-through; }
.prio.pr-urgent { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 12%, transparent); }
.prio.pr-high { color: var(--warning-text); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.prio.pr-low { color: var(--muted); }
.rag-green { color: var(--good-text); background: color-mix(in srgb, var(--good) 12%, transparent); }
.rag-amber { color: var(--text); background: color-mix(in srgb, var(--warning) 22%, transparent); }
.rag-amber .icon { color: var(--warning-text); }
.rag-red { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 13%, transparent); }
.instr-ready { color: var(--good-text); }
.instr-none { color: var(--critical-text); }
.role-admin { color: var(--accent); background: var(--accent-weak); }
.role-management { color: var(--violet); }
.avatar {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent-weak); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10.5px; }
.avatar.xs { width: 20px; height: 20px; font-size: 9px; }
.avatar.empty { background: var(--surface-2); color: var(--muted); }
.person { display: inline-flex; align-items: center; gap: 6px; }
.people { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- task rows, table, board ---------- */

.task-list { list-style: none; margin: 0; padding: 0; }
.card > .task-list { margin: 0 -16px -16px; }
.card.flush > .task-list { margin: 0; }
.task-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--border); cursor: pointer;
}
.task-list .task-row:first-child { border-top: 0; }
.card-head + .task-list .task-row:first-child { border-top: 1px solid var(--border); }
.task-row:hover { background: var(--surface-2); }
.task-row.closed .task-title { color: var(--text-2); }
.row-check {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--axis); background: transparent;
  display: grid; place-items: center; color: transparent; cursor: pointer; padding: 0;
}
.row-check .icon { width: 13px; height: 13px; }
.row-check:not(:disabled):hover { border-color: var(--good); color: var(--good); }
.row-check:disabled { cursor: default; }
.row-check.st-done { background: var(--good); border-color: var(--good); color: #fff; }
.row-check.st-missed { border-color: var(--critical); color: var(--critical); }
.row-check.st-review { border-style: dashed; border-color: var(--violet); }
.row-check.st-doing { border-color: var(--series-1); }
.row-check.st-cancelled { opacity: 0.4; }
.task-main { min-width: 0; }
.task-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.task-side { display: flex; align-items: center; gap: 10px; }
.due { font-size: 12.5px; color: var(--text-2); white-space: nowrap; min-width: 70px; text-align: right; }
.due.late { color: var(--critical-text); font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.badge .icon { width: 13px; height: 13px; }
.badge-cp { color: var(--violet); }
.badge-blocked { color: var(--warning-text); }
.badge-slip { color: var(--warning-text); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface); }
.table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--surface-2); }
.table tr.inactive td { opacity: 0.55; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table.proc-table { table-layout: fixed; min-width: 860px; }
.proc-table th { white-space: normal; }
.proc-table td { overflow-wrap: anywhere; }
.proc-table th:nth-child(1) { width: 28%; } .proc-table th:nth-child(2) { width: 19%; } .proc-table th:nth-child(3) { width: 18%; }
.proc-table th:nth-child(4) { width: 11%; } .proc-table th:nth-child(5) { width: 9%; } .proc-table th:nth-child(6) { width: 7%; } .proc-table th:nth-child(7) { width: 8%; }
.table.compact td, .table.compact th { padding: 6px 10px; }
.cell-title { font-weight: 500; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .btn + .btn { margin-left: 6px; }
.details-cell { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-col { width: 34%; min-width: 180px; }

.board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.board-col { background: var(--surface-2); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; min-height: 200px; }
.board-col header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; }
.board-list { display: flex; flex-direction: column; gap: 8px; flex: 1; border-radius: var(--radius-sm); min-height: 60px; }
.board-list.over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.board-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; cursor: grab; box-shadow: 0 1px 1px rgba(0,0,0,0.04); }
.board-card.dragging { opacity: 0.5; }
.board-card .task-title { white-space: normal; }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.card-foot .person { flex: 1; min-width: 0; }

/* ---------- dashboard ---------- */

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1500px) { .tiles:not(.small) { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.tiles.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text);
}
a.tile:hover { text-decoration: none; border-color: var(--border-strong); }
.tile-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.tile-label .icon { color: var(--muted); }
.tile-value { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.tile-sub { font-size: 12px; color: var(--muted); }
.tile.tone-critical { box-shadow: inset 3px 0 0 var(--critical), var(--shadow); }
.tile.tone-critical .tile-label .icon { color: var(--critical); }
.tile.tone-warning { box-shadow: inset 3px 0 0 var(--warning), var(--shadow); }
.tile.tone-warning .tile-label .icon { color: var(--warning-text); }
.strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.strip-item { display: flex; flex-direction: column; padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 110px; }
.strip-value { font-size: 20px; font-weight: 650; }
.strip-label { font-size: 12px; color: var(--muted); }
.strip-item.tone-critical { box-shadow: inset 3px 0 0 var(--critical); }
.strip-item.tone-warning { box-shadow: inset 3px 0 0 var(--warning); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-icon { width: 13px; height: 13px; color: var(--muted); }
.key-box { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.key-line { width: 14px; height: 2px; border-radius: 1px; display: inline-block; flex: none; }
.c-good { background: var(--good); }
.c-warning { background: var(--warning); }
.c-critical { background: var(--critical); }
.key-line.s-1 { background: var(--series-1); }
.key-line.s-2 { background: var(--series-2); }

.stackbar { display: flex; align-items: center; gap: 10px; }
.stackbar-track { flex: 1; min-width: 60px; }
.stackbar-fill { display: flex; gap: 2px; height: 12px; }
.stackbar-fill .seg { height: 100%; min-width: 3px; cursor: default; }
.stackbar-fill .seg:last-child { border-radius: 0 4px 4px 0; }
.stackbar-fill .seg:hover, .stackbar-fill .seg:focus { filter: brightness(1.12); outline: none; }
.stackbar-total { width: 28px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-2); }

.chart { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chart-plot { width: 100%; outline: none; }
.chart-plot:focus-visible { outline: 2px solid var(--accent); }
.chart-svg { display: block; overflow: visible; }
.chart-svg .grid { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axis { stroke: var(--axis); stroke-width: 1; }
.chart-svg .tick { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .line.s-1 { stroke: var(--series-1); }
.chart-svg .line.s-2 { stroke: var(--series-2); }
.chart-svg .dot { stroke: var(--surface); stroke-width: 2; }
.chart-svg .dot.s-1 { fill: var(--series-1); }
.chart-svg .dot.s-2 { fill: var(--series-2); }
.chart-svg .crosshair { stroke: var(--axis); stroke-width: 1; }

.tip {
  position: fixed; z-index: 200; pointer-events: none; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; box-shadow: var(--shadow); font-size: 12.5px;
}
.tip-title { color: var(--muted); margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 8px; }
.tip-row strong { font-variant-numeric: tabular-nums; }

.mini-list { list-style: none; padding: 0; margin: 0 -16px -16px; }
.mini-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-top: 1px solid var(--border); }
.mini-list li.clickable { cursor: pointer; }
.mini-list li.clickable:hover { background: var(--surface-2); }
.mini-list li > div { min-width: 0; }
.mini-list .icon { margin-top: 2px; }
.report-cell { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- drawer ---------- */

.drawer-wrap { position: fixed; inset: 0; z-index: 50; }
.drawer-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: var(--surface);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; animation: slide 0.16s ease-out;
}
@keyframes slide { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.drawer-body { overflow-y: auto; padding: 14px 22px 40px; display: flex; flex-direction: column; gap: 14px; }
.drawer-body > * { flex-shrink: 0; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drawer-tools { display: flex; gap: 2px; }
.drawer-title { font-size: 21px; line-height: 1.3; }
.status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.meta-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.meta-grid.wide { border: 0; }
.meta-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 8px 12px; border-top: 1px solid var(--border); align-items: center; }
.meta-row:first-child { border-top: 0; }
.meta-row dt { color: var(--muted); font-size: 12.5px; }
.meta-row dd { margin: 0; min-width: 0; }
.due-line { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.slip { display: inline-flex; align-items: center; gap: 4px; color: var(--warning-text); font-size: 12.5px; }
.flag-line { margin-top: -6px; }
.drawer-section { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.drawer-section h3 { font-size: 13.5px; color: var(--text-2); }
.drawer-section > .btn, .drawer-section > div > .btn { align-self: flex-start; }
.drawer-section h4 { margin: 6px 0 4px; }
details.drawer-section summary, details.card summary { cursor: pointer; list-style: none; }
details.drawer-section summary::-webkit-details-marker, details.card summary::-webkit-details-marker { display: none; }
details > summary h3 { display: inline; }
details > summary h3::after { content: " ▾"; color: var(--muted); }
.rich { white-space: pre-wrap; overflow-wrap: anywhere; }
.instruction { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.instruction summary { cursor: pointer; font-weight: 500; }
.instruction .rich { margin-top: 8px; }
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.checklist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.checklist label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.checklist li.done span { text-decoration: line-through; color: var(--muted); }
.inline-add { display: flex; gap: 6px; }
.cp-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.cp-card.cp-pending { border-left: 3px solid var(--violet); }
.cp-card.cp-approved { border-left: 3px solid var(--good); }
.cp-card.cp-rejected { border-left: 3px solid var(--critical); }
.cp-card.cp-withdrawn { opacity: 0.6; }
.cp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-kind { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.cp-title { font-size: 13.5px; }
.cp-actions { display: flex; gap: 6px; margin-top: 4px; }
.cp-st-approved { color: var(--good-text); }
.cp-st-rejected { color: var(--critical-text); }
.deps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dep { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hidden-dep { color: var(--muted); }
.comments { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.comments li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.comment-meta { font-size: 12.5px; margin-bottom: 2px; }
.comment-box { display: flex; flex-direction: column; gap: 6px; }
.comment-box .row-end { justify-content: space-between; }
.history-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.pick-list { list-style: none; padding: 0; margin: 0; max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pick-list li { border-top: 1px solid var(--border); }
.pick-list li:first-child { border-top: 0; }
.pick-list li.muted, .pick-list li.form-error { padding: 10px 12px; }
.pick-list button { width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; font: inherit; color: var(--text); cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pick-list button:hover { background: var(--surface-2); }

/* ---------- approvals, reports, check-ins ---------- */

.cp-item { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.cp-item.overdue { box-shadow: inset 3px 0 0 var(--critical), var(--shadow); }
.cp-item-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cp-task { font-size: 15px; font-weight: 600; color: var(--text); }
.cp-item-actions { display: flex; gap: 8px; flex: none; }

.report .card-head { border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.report-status { display: flex; gap: 8px; align-items: center; }
.report-head-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.report-head-view { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.report-meta { margin-bottom: 8px; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px 20px; }
.report-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }

.checkin-card .card-head h3 .icon { color: var(--accent); }
.checkin-list { list-style: none; padding: 0; margin: 0 -16px -16px; }
.checkin-list li { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--border); align-items: start; }
.ci-person { display: flex; gap: 10px; align-items: center; }
.ci-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 13.5px; }
.ci-body > p.muted { grid-column: 1 / -1; }
.ci-label { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ci-blockers .ci-label { color: var(--warning-text); }
.ci-pill.ci-submitted { color: var(--good-text); }
.ci-pill.ci-missing { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 12%, transparent); }
.hello h2 { font-size: 22px; margin: 2px 0; }

/* ---------- modal, toast, notifications ---------- */

dialog.modal {
  border: 0; padding: 0; border-radius: 12px; background: var(--surface); color: var(--text);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
dialog.modal.wide { width: min(760px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog.modal[open] { display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 17px; }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.rp-field-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; }
.rp-field-row input, .rp-field-row select { width: 100%; min-width: 0; }
.rp-field-head { margin-bottom: -4px; }
.rp-field-rows { display: grid; gap: 8px; }
.rp-warning-box { padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--text); }
.rp-warning-box .icon { color: var(--warning-text); }
@media (max-width: 640px) {
  .rp-field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .rp-field-row > :nth-child(3) { grid-column: 1 / 3; }
  .rp-field-head { display: none; }
  /* A dialog's buttons never leave it: they wrap, and share the width, on a phone. */
  .modal-foot .btn { flex: 1 1 auto; }
}
/* Long button labels (Russian) wrap to a second line instead of running off the dialog. */
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
/* Why a save failed: on its own line just above the dialog's buttons, so it is never out of sight. */
.modal-foot .modal-error { flex: 1 1 100%; margin: 0; max-height: 30vh; overflow-y: auto; }
/* Report settings saved by someone else meanwhile: the note's button goes under its text on a narrow screen. */
.notice.rp-behind { flex-wrap: wrap; }
.notice.rp-behind span { flex: 1 1 220px; }
.secret { font-family: var(--mono); font-size: 16px; padding: 4px 8px; background: var(--surface-2); border-radius: 4px; user-select: all; }

#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--text); color: var(--page); padding: 9px 14px; border-radius: 8px; box-shadow: var(--shadow); font-weight: 500; transition: opacity 0.4s, transform 0.4s; max-width: 90vw; }
.toast-error { background: var(--critical); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }

.bell { position: relative; }
.bell-count { position: absolute; top: 2px; right: 1px; background: var(--critical); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; padding: 0 4px; line-height: 15px; min-width: 15px; text-align: center; }
.notif-panel {
  position: fixed; top: 56px; right: 16px; z-index: 60; width: min(400px, calc(100vw - 32px)); max-height: 70vh;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.notif-panel header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.notif-panel ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.notif-panel li button { width: 100%; text-align: left; border: 0; background: none; font: inherit; color: var(--text-2); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; border-top: 1px solid var(--border); }
.notif-panel li:first-child button { border-top: 0; }
.notif-panel li.unread button { color: var(--text); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.notif-panel li button:hover { background: var(--surface-2); }

/* ---------- simplified workflow (v2) ---------- */

.main { max-width: 1180px; }
.mt { margin-top: 14px; }
.grid-2.tight, .grid-3.tight { gap: 12px; }

/* quick add: one line, Enter adds */
.qa-card { padding: 8px 10px; margin-bottom: 16px; }
.wf-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: -6px 0 16px; text-align: right; }
.hello { margin-bottom: 14px; }
.hello h2 { margin: 0 0 2px; }
.notice.tg-banner { margin-bottom: 14px; }
.card.flush > .mini-list { margin: 0; }
.quick-add { display: flex; align-items: center; gap: 8px; }
.qa-icon { color: var(--accent); margin-left: 4px; }
.quick-add .qa-title { flex: 1 1 auto; border: 0; background: transparent; font-size: 15px; min-height: 38px; padding: 6px 4px; }
.quick-add .qa-title:focus { outline: none; box-shadow: none; }
.qa-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow); }
.qa-field { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.qa-field select, .qa-field input { width: auto; min-width: 0; min-height: 32px; padding: 4px 8px; }
.qa-field select { max-width: 180px; padding-right: 24px; }

/* filter chips */
.filter-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: thin; }
.fchip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.fchip .icon { width: 13px; height: 13px; }
.fchip:hover { background: var(--surface-2); }
.fchip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.filter-note { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; color: var(--text-2); }

/* rows */
.task-sub .person { color: var(--text-2); }
.due { display: inline-flex; align-items: center; gap: 4px; }
.due .icon { width: 13px; height: 13px; color: var(--muted); }
.due.late { color: var(--critical-text); font-weight: 600; }
.due.late .icon { color: var(--critical); }
.due.soon { color: var(--warning-text); font-weight: 500; }
.pill.st-review { color: var(--violet); }
.fold-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; text-align: left; }
.fold-head:hover { color: var(--text); }
.fold-head + .task-list { border-top: 1px solid var(--border); }

/* approvals */
.approvals-card { border-color: color-mix(in srgb, var(--violet) 35%, var(--border)); }
.approvals-card .card-head .icon { color: var(--violet); }
.approval-list { list-style: none; margin: 0 -16px -16px; padding: 0; }
.card.flush > .approval-list { margin: 0; }
.approval-list li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); }
.approval-main { flex: 1; min-width: 0; cursor: pointer; }
.approval-main:hover .task-title { text-decoration: underline; }
.approval-actions { display: flex; gap: 6px; flex: none; }

/* routine list */
.routine-list { list-style: none; margin: 0; padding: 0; }
.routine-list li { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) 90px 110px; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--border); }
.routine-list li.clickable { cursor: pointer; }
.routine-list li.clickable:hover { background: var(--surface-2); }
.routine-main { min-width: 0; }
.routine-who, .routine-stat, .routine-next { display: flex; flex-direction: column; gap: 2px; }
.routine-check { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13.5px; }

/* task panel */
.drawer-title-input {
  font: inherit; font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; border: 1px solid transparent;
  background: transparent; padding: 4px 6px; margin: -4px -6px; resize: none; overflow: hidden; min-height: 1.6em; color: var(--text);
  display: block; width: calc(100% + 12px);
}
.drawer-title-input:hover { border-color: var(--border); }
.drawer-title-input:focus { border-color: var(--accent); background: var(--surface); }
.action-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.state-line { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text-2); margin-right: 4px; }
.state-line.doing .icon { color: var(--series-1); }
.state-line.review { color: var(--violet); }
.state-line.done { color: var(--good-text); }
.state-line.late { color: var(--critical-text); }
.props { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.card.props { padding: 4px 0; }
.prop { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--border); min-height: 44px; }
.prop:first-child { border-top: 0; }
.prop-label { color: var(--muted); font-size: 12.5px; }
.prop-value select, .prop-value input[type=date] { width: auto; max-width: 100%; min-width: 160px; }
.when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.created-line { padding: 8px 12px; border-top: 1px solid var(--border); margin: 0; }
.approval-line { display: flex; flex-direction: column; gap: 4px; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.desc-input { border: 1px solid transparent; background: var(--surface-2); min-height: 72px; resize: none; }
.desc-input:hover { border-color: var(--border); }
.desc-links { margin-top: 6px; font-size: 13px; }
.drawer-section h3 { display: flex; align-items: center; gap: 4px; }
.drawer-foot { padding-top: 6px; border-top: 1px solid var(--border); }
.link-btn.danger { color: var(--critical-text); }
.link-btn.small { font-size: 12.5px; }

/* telegram */
.tg-banner { background: color-mix(in srgb, #229ed9 10%, var(--surface)); border-color: color-mix(in srgb, #229ed9 35%, transparent); }
.tg-banner .tg-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #229ed9; color: #fff; flex: none; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); }
.inline-add input[type=password] { flex: 1; }

/* overview */
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* phone tab bar */
.tabbar { display: none; }
.brand-mini img { display: block; border-radius: 8px; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .grid-2, .grid-2.wide-left { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--border); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; color: var(--muted); font-size: 11px; font-weight: 500; position: relative; border-radius: 8px; }
  .tab .icon { width: 22px; height: 22px; }
  .tab:hover { text-decoration: none; }
  .tab.on { color: var(--accent); }
  .tab .nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); font-size: 10px; line-height: 16px; padding: 0 5px; }
  .only-mobile { display: inline-flex; }
  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar .search { display: none; }
  .topbar .btn span { display: none; }
  .main { padding: 14px 12px 90px; }
  .form.grid-2, .grid-3, .grid-2.tight, .grid-3.tight { grid-template-columns: minmax(0, 1fr); }
  .toolbar { flex-wrap: wrap; }
  .toolbar select, .toolbar input:not([type=checkbox]), .toolbar .search { min-width: 0; flex: 1 1 140px; }
  .task-row { grid-template-columns: auto minmax(0, 1fr); padding: 10px 12px; }
  .task-side { grid-column: 2; justify-content: flex-start; }
  .tiles, .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar-col { min-width: 120px; }
  .page-title { font-size: 17px; }
  .quick-add { flex-wrap: wrap; }
  .quick-add .qa-title { flex-basis: calc(100% - 30px); }
  .qa-field { flex: 1 1 40%; }
  .qa-field select, .qa-field input { flex: 1; }
  .quick-add .btn { flex: 1 1 100%; }
  .routine-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .routine-who { grid-column: 1; }
  .routine-stat, .routine-next { display: none; }
  .approval-list li { flex-wrap: wrap; }
  .approval-main { flex-basis: 100%; }
  .task-title { white-space: normal; }
  .prop { grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); }
  .prop-label { overflow-wrap: anywhere; }
  .prop-value select, .prop-value input[type=date] { min-width: 0; width: 100%; }
  .notif-panel { top: 52px; right: 8px; }
  #toasts { bottom: 84px; }
}

/* ---------- print (reports) ---------- */

@media print {
  .sidebar, .topbar, .toolbar, .no-print, .drawer-wrap, #toasts, .notif-panel, .btn, .icon-btn { display: none !important; }
  .layout { display: block; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; break-inside: avoid; border-color: #ccc; }
  .main { padding: 0; max-width: none; }
  textarea, select { border: 0; padding: 0; resize: none; background: none; }
}

/* ---------- domains, documents, shared values, accesses (v3) ---------- */

.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabs .ptab {
  border: 0; background: none; font: inherit; color: var(--text-2); padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap; font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
}
.tabs .ptab .icon { width: 15px; height: 15px; color: var(--muted); }
.tabs .ptab:hover { color: var(--text); text-decoration: none; }
.tabs .ptab.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs .ptab.on .icon { color: var(--accent); }
.tabs .ptab .count { margin-left: 0; }

/* domains */
.domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.domain-card { display: flex; flex-direction: column; gap: 8px; color: var(--text); }
a.domain-card:hover { text-decoration: none; border-color: var(--border-strong); }
.domain-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.domain-card-head h3 { display: flex; align-items: center; gap: 6px; }
.dstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.dstat { display: flex; align-items: baseline; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.dstat strong { font-size: 17px; color: var(--text); font-weight: 650; }
.dstat.critical-text strong { color: var(--critical-text); }
.dstat.muted-stat strong { color: var(--muted); }
.domain-head { margin-bottom: 6px; }
.domain-desc { display: flex; gap: 12px; align-items: flex-start; }
.domain-desc .rich { margin-bottom: 4px; }
.pill.subtle { background: var(--surface-2); color: var(--text-2); }
.people-list { list-style: none; margin: 0; padding: 0; }
.people-list li { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--border); }
.people-list li:first-child { border-top: 0; }
.people-list li.clickable { cursor: pointer; }
.people-list li.clickable:hover { background: var(--surface-2); }
.pstats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* document lists */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: flex-start; padding: 11px 16px; border-top: 1px solid var(--border); }
.doc-list .doc-row:first-child { border-top: 0; }
.card-head + .doc-list .doc-row:first-child { border-top: 1px solid var(--border); }
.doc-row.clickable { cursor: pointer; }
.doc-row.clickable:hover { background: var(--surface-2); }
.doc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc-title { font-weight: 550; overflow-wrap: anywhere; }
.doc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.doc-kind { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--surface-2); color: var(--text-2); flex: none; }
.doc-kind .icon { width: 15px; height: 15px; }
.doc-kind.k-policy { color: var(--violet); }
.doc-kind.k-procedure { color: var(--accent); }
.doc-kind.k-protocol { color: var(--series-2); }
.doc-kind.k-howto { color: var(--series-1); }
.card-head h3 .doc-kind { width: 22px; height: 22px; margin-right: 4px; }
.snippet { color: var(--text-2); overflow-wrap: anywhere; }
mark { background: color-mix(in srgb, var(--warning) 35%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

/* one document */
.doc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.doc-kind-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; }
.doc-kind-label .doc-kind { width: 24px; height: 24px; }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.doc-body { padding: 22px 28px; min-height: 200px; }
.doc-aside .card { padding: 12px 14px; }
.doc-aside .card.props { padding: 4px 0; }
.doc-aside .prop { grid-template-columns: 90px minmax(0, 1fr); }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.side-list li { overflow-wrap: anywhere; }
.side-list .link-btn { padding: 0; text-align: left; }
.notice.warn { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.notice.warn .icon { color: var(--warning-text); }
.notice.subtle { background: var(--surface-2); border-color: var(--border); font-weight: 400; color: var(--text-2); margin-bottom: 14px; }
.doc-page > .notice { margin-bottom: 14px; }
.copy-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.copy-row code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 5px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 12.5px; }
.doc-link-big { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; }
.chip-doc { color: var(--accent); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.claude { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); }

/* rendered Markdown */
.md { line-height: 1.6; overflow-wrap: anywhere; }
.md > * + * { margin-top: 0.75em; }
.md h2 { font-size: 19px; margin-top: 1.4em; }
.md h3 { font-size: 16px; margin-top: 1.2em; }
.md h4, .md h5 { font-size: 14px; color: var(--text); margin-top: 1em; }
.md > :first-child { margin-top: 0; }
.md ul, .md ol { padding-left: 22px; margin-bottom: 0; }
.md li + li { margin-top: 3px; }
.md li > ul, .md li > ol { margin-top: 3px; }
.md li.task-item { list-style: none; margin-left: -20px; display: flex; gap: 8px; align-items: baseline; }
.md li.task-item input { width: auto; min-height: 0; margin: 0; flex: none; }
.md blockquote { margin: 0.75em 0 0; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--accent-weak); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.md code { font-family: var(--mono); font-size: 0.9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.md pre { margin: 0.75em 0 0; background: var(--surface-2); padding: 10px 12px; border-radius: var(--radius-sm); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md hr { border: 0; border-top: 1px solid var(--border); }
.md-table { overflow-x: auto; }
.md-table table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.md-table th { background: var(--surface-2); font-weight: 600; }
.doclink { font-weight: 500; }
.doclink.missing { color: var(--critical-text); border-bottom: 1px dashed currentColor; cursor: help; }
.doclink.hidden { color: var(--muted); }
.fact { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 4px; padding: 0 4px; font-weight: 550; }
.fact.missing { background: color-mix(in srgb, var(--critical) 12%, transparent); color: var(--critical-text); font-family: var(--mono); font-size: 0.9em; }
.fact.link { cursor: pointer; }
.fact.link:hover, .fact.link:focus-visible { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
.side-more summary { cursor: pointer; color: var(--accent-text, var(--accent)); font-size: 13px; margin-top: 4px; }
.side-more[open] summary { margin-bottom: 6px; }

/* a task written into a document: [#id] with its live state, the person, the deadline */
.task-ref { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 600; line-height: 18px; padding: 0 7px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: default; vertical-align: 1px; white-space: nowrap; }
button.task-ref { cursor: pointer; }
button.task-ref:hover { border-color: var(--accent); color: var(--text); }
.task-ref.st-done { background: color-mix(in srgb, var(--good) 12%, transparent); border-color: color-mix(in srgb, var(--good) 35%, transparent); color: var(--good-text); }
.task-ref.st-doing, .task-ref.st-review { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
.task-ref.st-cancelled { text-decoration: line-through; opacity: 0.75; }
.task-ref.overdue { background: color-mix(in srgb, var(--critical) 12%, transparent); border-color: color-mix(in srgb, var(--critical) 40%, transparent); color: var(--critical-text); }
.mention { font-weight: 600; color: var(--accent); }
.due-chip { font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.md li.task-item.cancelled { color: var(--text-2); text-decoration: line-through; }

/* the Master File */
.pill.master { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning-text, var(--text)); font-weight: 600; }
.master-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border)); background: color-mix(in srgb, var(--warning) 7%, var(--surface)); }
.master-card:hover { text-decoration: none; border-color: var(--warning); }
.master-icon { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning-text, var(--text)); flex: none; }
.conflict-box { padding: 12px 14px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
.conflict-box p { margin: 0 0 6px; }

/* history and differences */
.version-list { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.version-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-top: 1px solid var(--border); }
.version-list li > .grow { flex: 1 1 220px; min-width: 0; }
.version-list li:first-child { border-top: 0; }
.diff { font-family: var(--mono); font-size: 12.5px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-x: auto; }
.diff-line { display: flex; gap: 8px; padding: 1px 8px; white-space: pre-wrap; }
.diff-line.add { background: color-mix(in srgb, var(--good) 14%, transparent); }
.diff-line.del { background: color-mix(in srgb, var(--critical) 13%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--critical) 50%, transparent); }
.diff-mark { width: 10px; flex: none; color: var(--muted); }
.diff-gap { color: var(--muted); text-align: center; padding: 2px; background: var(--surface-2); }

/* editor */
.doc-edit { display: flex; flex-direction: column; gap: 12px; }
.edit-head { display: flex; flex-direction: column; gap: 10px; }
.edit-head .toolbar { margin: 0; align-items: flex-end; }
.edit-head .field { min-width: 160px; }
.edit-head .doc-title-input { font-size: 20px; font-weight: 600; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 4px 2px; background: transparent; }
.edit-head .doc-title-input:focus { outline: none; box-shadow: none; border-bottom-color: var(--accent); }
.editor-panes { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.editor-panes[data-mode="text"] { grid-template-columns: minmax(0, 1fr); }
.editor-panes[data-mode="text"] .pane-preview { display: none; }
.editor-panes[data-mode="preview"] { grid-template-columns: minmax(0, 1fr); }
.editor-panes[data-mode="preview"] .pane-text { display: none; }
.pane-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pane-preview { overflow: auto; max-height: 72vh; padding: 18px 22px; }
.doc-editor { min-height: 58vh; font-family: var(--mono); font-size: 13.5px; line-height: 1.55; resize: vertical; }
.editor-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tool-btn { min-width: 32px; height: 30px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--radius-sm); font: inherit; font-weight: 600; cursor: pointer; padding: 0 8px; }
.tool-btn:hover { background: var(--surface-2); color: var(--text); }
.tools-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.save-bar { display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 0; z-index: 5; }
.save-bar .toolbar { margin: 0; }
.impact-line .check-inline { align-items: flex-start; }
.impact-details summary { cursor: pointer; color: var(--accent); margin-top: 4px; }
.impact-details .side-list { margin-top: 6px; }
.pick-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pick-item { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; color: var(--text); padding: 8px 12px; text-align: left; cursor: pointer; }
.pick-list li:first-child .pick-item { border-top: 0; }
.pick-item:hover, .pick-item:focus { background: var(--surface-2); outline: none; }
.pick-list li.muted { padding: 10px 12px; }

/* shared values */
.values-table td, .values-table th { border-left: 0; border-right: 0; }
.values-table tr.clickable { cursor: pointer; }
.values-table tr.clickable:hover td { background: var(--surface-2); }

/* accesses */
.access-card { display: flex; flex-direction: column; gap: 10px; }
.access-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.access-head h3 { margin-right: 4px; }
.access-head .pill.tiny { margin-left: 0; }
.grants { display: flex; flex-direction: column; gap: 6px; }
.access-card .toolbar { margin: 0; }
.pill.h-good { color: var(--good-text); background: color-mix(in srgb, var(--good) 11%, transparent); }

/* Claude */
.claude-card { display: flex; flex-direction: column; gap: 10px; }
.claude-card h3 .icon { color: var(--violet); }
.howto { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; }
.howto summary { cursor: pointer; font-weight: 550; }
.howto[open] summary { margin-bottom: 8px; }
.howto .steps { margin-bottom: 6px; }
.conn-row { display: flex; align-items: center; gap: 8px; }
.notice.small { font-size: 12.5px; font-weight: 400; padding: 8px 12px; }

/* search page */
.search.big { width: 100%; font-size: 16px; min-height: 44px; margin-bottom: 16px; }

@media (max-width: 1100px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .editor-panes[data-mode="split"] { grid-template-columns: minmax(0, 1fr); }
  .editor-panes[data-mode="split"] .pane-preview { max-height: none; }
}
@media (max-width: 860px) {
  .doc-body { padding: 16px; }
  .doc-row { grid-template-columns: auto minmax(0, 1fr); }
  .doc-side { grid-column: 2; flex-direction: row; align-items: center; }
  .hide-sm { display: none; }
  .people-list li { flex-wrap: wrap; position: relative; padding-right: 48px; }
  .people-list li > .icon-btn { position: absolute; top: 8px; right: 8px; }
  .pstats { justify-content: flex-start; flex-basis: 100%; padding-left: 48px; }
  .domain-desc { flex-direction: column; }
  .edit-head .field { min-width: 0; flex: 1 1 140px; }
  .doc-editor { min-height: 50vh; }
  .save-bar { bottom: 64px; }
}
@media print {
  .doc-aside, .doc-meta .chip, .tabs { display: none !important; }
  .doc-layout { display: block; }
}
.toolbar .filter-chips { margin-bottom: 0; padding-bottom: 0; }

/* ---------- stages: the path, gate, goals, roadmap (v4) ---------- */

/* progress bars */
.pbar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.pbar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.pbar.done > span { background: var(--good); }
.pbar.thin { height: 4px; border: 0; }

/* the path strip */
.journey { display: flex; align-items: stretch; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.j-step { flex: 1 1 0; min-width: 170px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px;
  align-items: center; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
a.j-step:hover { text-decoration: none; border-color: var(--border-strong); }
.j-step.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.j-step.st-next, .j-step.st-later { background: var(--surface-2); color: var(--text-2); }
.j-step .j-bar { grid-column: 1 / -1; }
.j-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; font-weight: 700; font-size: 13px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-strong); flex: none; }
.j-num .icon { width: 14px; height: 14px; }
.j-num.big { width: 36px; height: 36px; font-size: 16px; }
.st-active .j-num, .j-step.st-active .j-num { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.st-done .j-num { background: var(--good); color: #fff; border-color: var(--good); }
.j-text { display: flex; flex-direction: column; min-width: 0; }
.j-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 4px; }
.j-sub .icon { width: 12px; height: 12px; }
.j-arrow { display: flex; align-items: center; color: var(--muted); flex: none; }
.j-arrow .icon { width: 16px; height: 16px; }
.j-sep { width: 1px; background: var(--border); margin: 4px 6px; flex: none; }
.j-company { flex: 0 1 auto; min-width: 150px; }

/* sidebar: stages under "Stages" */
.nav-group { display: flex; flex-direction: column; }
.nav-subs { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 18px; padding-left: 8px; border-left: 1px solid var(--border); }
.nav-sub { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px; }
.nav-sub:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.nav-sub.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.nav-sub-num { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border-strong); flex: none; }
.nav-sub-num .icon { width: 11px; height: 11px; }
.nav-sub.st-active .nav-sub-num { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.nav-sub .nav-sub-lock { width: 12px; height: 12px; margin-left: auto; color: var(--muted); }
.nav-sub span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the whole path */
.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.path-card { display: flex; flex-direction: column; gap: 10px; color: var(--text); }
a.path-card:hover { text-decoration: none; border-color: var(--border-strong); }
.path-card.st-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow); }
.path-card.st-next, .path-card.st-later { background: var(--surface-2); }
.path-head { display: flex; align-items: center; gap: 10px; }
.path-gate { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.path-card.st-next .path-gate, .path-card.st-later .path-gate { background: var(--surface); }
.gate-row { display: flex; flex-direction: column; gap: 4px; }
.gate-row-text { display: flex; justify-content: space-between; gap: 8px; }
.path-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.path-card.company .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-pill.st-active { background: var(--accent-weak); color: var(--text); }
.stage-pill.st-next, .stage-pill.st-later { background: var(--surface-2); color: var(--text-2); }
.stage-pill.st-done { color: var(--good-text); background: color-mix(in srgb, var(--good) 11%, transparent); }
.group-title { font-size: 14px; color: var(--text-2); }
.group-title a { color: inherit; }

/* one stage */
.stage-head { display: flex; gap: 12px; align-items: flex-start; }
.gate-card { border-left: 3px solid var(--accent); }
/* a heading with an inline icon (the gate, My accesses, Keys): the icon on the heading's line, never above it */
.gate-card h3, .card h3:has(> .icon.inline) { display: flex; align-items: center; gap: 6px; }
.gate-card > * + * { margin-top: 10px; }
.gate-list, .goal-list { display: flex; flex-direction: column; gap: 14px; }
.goal { display: flex; flex-direction: column; gap: 5px; }
.goal-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.goal-title { font-weight: 550; }
.goal-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.goal-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.goal-meta .link-btn { padding: 0; font-size: 12.5px; }
.pill.gate { background: var(--accent-weak); color: var(--text); }
.static { padding: 8px 0; font-weight: 600; }

/* roadmap */
.roadmap { list-style: none; margin: 0; padding: 4px 0 8px; }
.roadmap .ms { position: relative; display: grid; grid-template-columns: 22px 70px minmax(0, 1fr); gap: 10px; padding: 10px 16px; cursor: pointer; align-items: start; }
.roadmap .ms:hover { background: var(--surface-2); }
.roadmap .ms::before { content: ''; position: absolute; left: 26px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.roadmap .ms:first-child::before { top: 18px; }
.roadmap .ms:last-child::before { bottom: calc(100% - 18px); }
.ms-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin: 3px 0 0 4px; border-radius: 999px; background: var(--surface); border: 2px solid var(--axis); display: grid; place-items: center; }
.ms-dot .icon { width: 9px; height: 9px; color: #fff; }
.ms.st-active .ms-dot { border-color: var(--accent); background: var(--accent-weak); }
.ms.st-done .ms-dot { border-color: var(--good); background: var(--good); }
.ms.st-late .ms-dot { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 15%, var(--surface)); }
.ms-date { color: var(--text-2); padding-top: 1px; font-variant-numeric: tabular-nums; }
.ms.st-late .ms-date { color: var(--critical-text); font-weight: 600; }
.ms-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ms-title { font-weight: 550; }
.ms.st-done .ms-title { color: var(--text-2); }
.pill.ms-st { margin-left: 0; }
.pill.ms-active { background: var(--accent-weak); color: var(--text); }
.pill.ms-done { color: var(--good-text); background: color-mix(in srgb, var(--good) 11%, transparent); }
.pill.ms-late { color: var(--critical-text); background: color-mix(in srgb, var(--critical) 12%, transparent); }
.pill.ms-planned, .pill.ms-dropped { background: var(--surface-2); color: var(--text-2); }
.pill.prep { background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); margin-left: 0; }
.modal-foot .spacer { flex: 1; }

@media (max-width: 1100px) {
  .path-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .j-step { min-width: 150px; }
  .roadmap .ms { grid-template-columns: 22px minmax(0, 1fr); }
  .roadmap .ms .ms-date { grid-column: 2; grid-row: 1; }
  .roadmap .ms .ms-main { grid-column: 2; }
  .stage-head { flex-direction: column; }
}

/* ---- v5: scoreboard, people, access map ---- */
.tabs button { display: inline-flex; align-items: center; gap: 6px; }
.tabs button .icon { width: 15px; height: 15px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.week-nav { display: inline-flex; align-items: center; gap: 4px; }

.scoreboard { font-variant-numeric: tabular-nums; }
.scoreboard th[scope="row"] { min-width: 220px; max-width: 320px; font-weight: 500; text-align: left; }
.scoreboard td.num, .scoreboard th.num { text-align: right; white-space: nowrap; min-width: 84px; }
.scoreboard .this-week { background: color-mix(in srgb, var(--accent-weak) 60%, transparent); }
.scoreboard thead th.this-week { color: var(--text); }
.scoreboard td.clickable { cursor: pointer; }
.scoreboard td.clickable:hover { background: var(--surface-2); }
.scoreboard td.missing { color: var(--muted); }
.scoreboard .group-row th { background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 6px; padding-bottom: 6px; }
.scoreboard .part-row th { padding-left: 38px; font-weight: 400; color: var(--text-2); }
.scoreboard .part-row td { color: var(--text-2); font-size: 13px; }
.scoreboard .fold { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--text); padding: 0; text-align: left; }
.scoreboard .plain { display: inline-block; padding-left: 20px; }
.scoreboard .metric-row th .muted { padding-left: 20px; }
.trend { font-size: 10px; margin-left: 2px; }
.mismatch { color: var(--warning-text); margin-right: 4px; }
.mismatch .icon, .note-dot .icon { width: 13px; height: 13px; vertical-align: -2px; }
.note-dot { color: var(--muted); margin-left: 3px; }

.enter-group { display: flex; flex-direction: column; gap: 10px; }
.enter-group + .enter-group { border-top: 1px solid var(--border); padding-top: 12px; }
.enter-group h4 { margin: 0; font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.enter-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: var(--radius-sm); }
.enter-row.focus { background: var(--accent-weak); }
.enter-parts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.enter-part { display: flex; flex-direction: column; gap: 3px; }
.num-input { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.enter-part .num-input { width: 100px; }
.enter-total { padding-bottom: 8px; }
.note-input { width: 100%; font-size: 13px; }
.form-sub { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 14px; }
.form-sub .icon { width: 15px; height: 15px; }

.numbers-prompt { border-left: 3px solid var(--accent); }
.numbers-prompt h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; }

.people-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.people-cards.pad { padding: 0 16px 16px; }
.person-card { display: flex; flex-direction: column; gap: 10px; }
.person-card.inactive { opacity: .7; }
.person-card .toolbar { margin: 0; }
.person-head { display: flex; align-items: center; gap: 10px; }
.person-head .grow { min-width: 0; flex: 1; }
.person-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.avatar.md { width: 36px; height: 36px; font-size: 13px; }
.chip.on { background: var(--accent-weak); color: var(--text); }

.member-grid th, .member-grid td { white-space: nowrap; }
.member-grid .group-col { text-align: center; font-size: 12px; color: var(--text-2); border-bottom: 1px solid var(--border); }
.member-grid .dom-col { font-size: 12.5px; font-weight: 500; }
.mcell { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; vertical-align: middle; }
button.mcell:hover { border-color: var(--accent); }
.mcell .icon { width: 15px; height: 15px; }
.mcell .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--border-strong); }
.mcell.member { background: var(--accent-weak); color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.mcell.head { background: var(--accent); color: #fff; border-color: var(--accent); }
span.mcell { width: 22px; height: 22px; cursor: default; }
button.mcell:disabled { cursor: default; opacity: .45; }
button.mcell:disabled:hover { border-color: var(--border); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.legend > span { display: inline-flex; align-items: center; gap: 4px; }

.invite-text { width: 100%; font-size: 13px; line-height: 1.5; resize: vertical; }
.access-map td { vertical-align: top; }
.access-map .pill { margin-left: 0; }

@media (max-width: 640px) {
  .people-cards { grid-template-columns: minmax(0, 1fr); }
  .scoreboard th[scope="row"] { min-width: 160px; }
  .num-input { width: 100%; }
  .enter-part { flex: 1 1 calc(50% - 12px); }
}
/* the number's name stays in view while the weeks scroll */
.scoreboard th[scope="row"], .scoreboard thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
.scoreboard .group-row th { position: static; box-shadow: none; }
.scoreboard .group-row th > span { position: sticky; left: 16px; }
.scoreboard .part-row th { background: var(--surface); }
.scoreboard th[scope="row"] { width: 250px; min-width: 200px; max-width: 250px; white-space: normal; padding-right: 14px; }
.scoreboard th[scope="row"] .muted { font-weight: 400; }
.enter-row input.num-input { width: 120px; flex: none; }
.enter-row .enter-part input.num-input { width: 96px; }
.enter-row input.note-input { width: 100%; max-width: 560px; }
.access-map td:first-child { min-width: 170px; }
.access-map td.mono { white-space: nowrap; }
.access-map td:nth-child(3) { min-width: 140px; }

/* ---------- printed sheets (documents) ---------- */
#print-root { display: none; }
@media print {
  html.printing body > *:not(#print-root) { display: none !important; }
  html.printing body { background: #fff; }
  html.printing #print-root { display: block; color: #111; font-size: 11pt; line-height: 1.5; }
  @page { margin: 16mm 15mm 18mm; }
  #print-root .ps-head { border-bottom: 1.5pt solid #4A7A0B; padding-bottom: 8pt; margin-bottom: 14pt; }
  #print-root .ps-top { display: flex; justify-content: space-between; gap: 12pt; font-size: 8.5pt; color: #555; text-transform: uppercase; letter-spacing: .06em; }
  #print-root .ps-brand { font-weight: 700; color: #4A7A0B; }
  #print-root h1 { font-size: 19pt; line-height: 1.2; margin: 6pt 0 8pt; color: #111; }
  #print-root .ps-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4pt 14pt; margin: 0; font-size: 8.5pt; }
  #print-root .ps-meta div { min-width: 0; }
  #print-root .ps-meta dt { color: #666; }
  #print-root .ps-meta dd { margin: 0; color: #111; font-weight: 600; overflow-wrap: anywhere; }
  #print-root .md { line-height: 1.5; }
  #print-root .md h2 { font-size: 13.5pt; margin-top: 14pt; break-after: avoid; }
  #print-root .md h3 { font-size: 12pt; margin-top: 11pt; break-after: avoid; }
  #print-root .md table, #print-root .md pre, #print-root .md blockquote, #print-root .md li { break-inside: avoid; }
  #print-root .md table { border-collapse: collapse; width: 100%; font-size: 9.5pt; }
  #print-root .md th, #print-root .md td { border: 0.5pt solid #bbb; padding: 3pt 5pt; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
  /* Paper cannot scroll: a wide table shrinks to the page (long codes break) instead of being cut at the edge. */
  #print-root .md-table { overflow: visible; }
  #print-root .md blockquote { background: #f3f6ec; border-left: 2pt solid #4A7A0B; }
  #print-root .md code, #print-root .md pre { background: #f2f2ef; }
  #print-root .md a { color: #111; text-decoration: underline; }
  #print-root .ps-foot { margin-top: 18pt; padding-top: 6pt; border-top: 0.5pt solid #bbb; font-size: 8pt; color: #555; display: flex; flex-direction: column; gap: 2pt; }
}
/* a workflow's Start button stays reachable on a phone */
@media (max-width: 860px) {
  .routine-list li .routine-next:has(.btn) { display: flex; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
/* table cells in documents break between words, not inside a number */
.md table td, .md table th { overflow-wrap: normal; word-break: normal; }

/* ---- Reports (17 Oct 2026) ---- */
.tab-count { margin-left: 6px; font-size: 11px; line-height: 17px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.rp-good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.rp-warning { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.rp-critical { background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); }
.rp-subtle { background: var(--surface-2); color: var(--text-2); }
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-list li + li { border-top: 1px solid var(--border); }
.rp-list a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; }
.rp-list a:hover { background: var(--surface-2); }
.rp-list .rp-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rp-list .rp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; }
.rp-list li.unread .rp-dot { background: var(--accent); }
.rp-list li:not(.unread) strong { font-weight: 500; }
.rp-totals { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text-2); font-size: 13.5px; }
.rp-totals span { display: inline-flex; align-items: center; gap: 6px; }
.rp-totals .warn { color: var(--critical); font-weight: 600; }
.rp-board { list-style: none; margin: 0; padding: 0; }
.rp-board li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); }
.rp-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-title { font-weight: 600; color: var(--text); text-decoration: none; }
.rp-title:hover { text-decoration: underline; }
.rp-marks { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rp-mark { font: inherit; font-size: 11.5px; border: 0; border-radius: 6px; padding: 2px 6px; cursor: pointer; text-decoration: none; white-space: nowrap; }
span.rp-mark { cursor: default; }
.rp-mark .mark-icon { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; }
.rp-legend .rp-mark { cursor: default; padding: 2px 4px; margin-right: 2px; }
.rp-legend .rp-mark .mark-icon { margin-right: 0; }
.rp-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.rp-head h2 { margin: 4px 0 6px; font-size: 20px; }
.rp-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--text-2); font-size: 13px; }
.rp-numbers { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0; }
.rp-numbers > div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 12px; }
.rp-numbers dt { font-size: 12px; color: var(--text-2); }
.rp-numbers dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rp-read { color: var(--good); }
.rp-editor textarea { font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.report-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-weak); }
.report-box p { margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .rp-board li { grid-template-columns: 1fr; }
  .rp-marks { justify-content: flex-start; }
}

/* ---- 17 Oct review: phone first screen, Connections ---- */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; }
.check-grid .check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.check-grid input { width: auto; min-height: 0; }
.consent-host { font-size: 16px; }
.pad { padding: 10px 16px; }
@media (max-width: 767px) {
  /* The header's "+" already adds a task; the first task shows on the first screen. */
  .qa-card { display: none; }
  .wf-row { justify-content: flex-start; }
  .wf-row .muted { display: none; }
}

/* The search button stands in for the search box wherever the box is hidden (phones and upright tablets, to 860 px). */
.only-mobile.icon-btn { display: none; }
@media (max-width: 860px) { .only-mobile.icon-btn { display: inline-flex; } }

/* ---- Round 13 (w8): usability ---- */
/* A report's task: the tick writes the report. */
.row-check.report { border-color: var(--accent); color: var(--accent); }
.row-check.report:not(:disabled):hover { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
/* "Marked as done · Undo" */
.toast-undo { display: flex; align-items: center; gap: 12px; }
.toast-action { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 2px 4px; }
/* @name: the list of colleagues above the comment box */
.comment-box { position: relative; }
.mention-list { position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); z-index: 5; list-style: none; margin: 0; padding: 4px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; }
.mention-list[hidden] { display: none; }
.mention-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.mention-list li > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-list li.on, .mention-list li:hover { background: var(--surface-2); }
.helper-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.helper-list .icon-btn { width: 22px; height: 22px; }
/* My domains in the sidebar */
.nav-heading { display: flex; align-items: center; gap: 10px; padding: 7px 10px 2px; margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.nav-heading .icon { width: 15px; height: 15px; }
.nav-sub-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--axis); flex: none; margin: 0 5px; }
.nav-sub.on .nav-sub-dot { background: var(--accent); }
/* My account: the phone's menu (the sidebar holds it on a wide screen) */
.account-menu { display: none; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.claude-fold > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.claude-fold > summary::-webkit-details-marker { display: none; }
.claude-fold > summary h3 { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.claude-fold[open] { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 860px) {
  .account-menu { display: flex; }
  .lang-row { display: none; }
}
@media (max-width: 767px) {
  /* My tasks, a stage and the company page: the path of the business on one line — the stage open now and its gate. */
  :is(.my-journey, .stage-journey) .journey { margin-bottom: 10px; overflow: hidden; }
  :is(.my-journey, .stage-journey) :is(.j-step:not(.st-active), .j-arrow, .j-sep) { display: none; }
  :is(.my-journey, .stage-journey) .j-step.st-active { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; }
  :is(.my-journey, .stage-journey) .j-num { width: 22px; height: 22px; font-size: 12px; }
  :is(.my-journey, .stage-journey) .j-text { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; }
  :is(.my-journey, .stage-journey) .j-name { flex: 0 1 auto; min-width: 3em; }
  :is(.my-journey, .stage-journey) .j-sub { flex: 0 0 auto; }
  :is(.my-journey, .stage-journey) .j-bar { display: none; }
  /* "Start a workflow" sits below the numbers card, never over it. */
  .wf-row { margin-top: 10px; }
}

/* ---------- phone header (round 14) ---------- */
@media (max-width: 860px) {
  /* The page title keeps the room: no logo (the tab bar leads home), no live dot, two lines when it needs them; the way
     back to a stage is an arrow before the title. */
  .topbar .brand-mini, .topbar .live-dot, .topbar > .spacer { display: none; }
  .title-wrap { flex: 1 1 auto; align-items: center; gap: 6px; }
  .page-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; font-size: 16px; overflow-wrap: anywhere; }
  .page-title-extra { flex: none; }
  .page-title-extra:has(.title-back) { order: -1; }
  .title-back span { display: none; }
  .title-back .icon { width: 22px; height: 22px; }
  /* A stage's state is said on the page (the path line, the notice of a stage not open yet): not again beside its name. */
  .page-title-extra .stage-pill { display: none; }
}

/* ---------- round 15 (x3): edit safety and screens ---------- */
/* Enter numbers: someone else's figure, entered after the dialog read the box, said under it. */
.num-with-line { display: inline-flex; flex-direction: column; gap: 2px; }
.warn-text { color: var(--warning-text); }
/* The report editor: someone else's saved text beside the box it would have replaced. */
.rp-theirs { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.rp-theirs textarea, .rp-theirs input { width: 100%; background: var(--surface-2); }
/* My tasks on a phone: the "Connect Telegram" banner's text takes the width, its button goes under it. */
@media (max-width: 600px) {
  .notice.tg-banner { flex-wrap: wrap; align-items: flex-start; }
  .notice.tg-banner > span:nth-child(2) { order: 1; flex: 1 1 calc(100% - 100px); min-width: 0; }
  .notice.tg-banner > .icon-btn { order: 2; }
  .notice.tg-banner > .btn { order: 3; margin-left: 40px; }
}
.notif-more { display: flex; justify-content: center; padding: 6px 8px 10px; }
/* The stage strip on a phone: "Now:" before the open stage on another stage's (or the company's) page; the gate's numbers
   go under the stage's name rather than cutting it short. */
.j-now { display: none; }
@media (max-width: 767px) {
  .stage-journey .j-now { display: inline; flex: none; font-size: 12px; font-weight: 600; color: var(--text-2); }
  :is(.my-journey, .stage-journey) .j-text { flex-wrap: wrap; row-gap: 0; }
  :is(.my-journey, .stage-journey) .j-name { min-width: 0; white-space: normal; }
  :is(.my-journey, .stage-journey) .j-sub { flex: 0 1 auto; min-width: 0; }
}
/* The document editor on a phone: the save bar keeps the buttons; the note and who is told open from a link. */
.save-extras { display: flex; flex-direction: column; gap: 10px; }
.save-more { display: none; }
@media (max-width: 767px) {
  .save-more { display: inline-flex; }
  .save-extras:not(.open) { display: none; }
}
/* Settings → Domains on a phone: Edit stays in sight at the right while the table scrolls sideways. */
@media (max-width: 767px) {
  .dept-table td.row-actions { position: sticky; right: 0; background: var(--surface); box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .2); }
}
/* The report editor: someone else's saved value right under the box it would replace. */
.rp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-theirs-slot:empty { display: none; }
/* A labelled list or box inside a toolbar on a phone (the document editor's Kind): its own height, not the toolbar's
   140 px flex basis turned upright by the label's column. */
@media (max-width: 767px) {
  .toolbar .field > :is(select, input:not([type=checkbox])) { flex: none; }
}