/* Grow, the Sonder Hollow community CRM: components and layout.
   Every colour, space, type size and weight is a token from tokens.css (loaded first), and stylelint fails a literal
   one here: write var(--space-3), var(--text-sm), var(--weight-semibold). The exceptions are listed in
   stylelint.config.js: 0, auto, and hairline offsets of 1 to 3 px. Order: base, shell, components, record shell,
   settings blocks, form states, utilities last (utilities are single-purpose and win over the component they sit on). */

/* Base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: var(--text-md); -webkit-text-size-adjust: 100%; scroll-padding-top: 4rem; }
.sidebar :focus-visible { outline-color: var(--on-dark-accent); }
svg.ic { pointer-events: none; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.45; font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* A link inside a sentence is underlined, so colour is never the only thing that marks it as a link (WCAG 1.4.1). Links
   that are controls in their own right (buttons, tabs, menu items, cards, table cells) are set apart by their shape. */
p a:not(.btn), dd a, label a, .prose a, .flash a, .needs a, .when a, .empty a, .src a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-2); letter-spacing: -.01em; }
h1 { font-family: var(--font); font-weight: var(--weight-regular); font-size: var(--text-2xl); letter-spacing: 0; }
h2 { font-size: var(--text-md); font-weight: var(--weight-semibold); } h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
p { margin: 0 0 var(--space-3); }
strong, b { font-weight: var(--weight-semibold); }
.muted { color: var(--ink-3); }
.small { font-size: var(--text-xs); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-code); }
.wrap-anywhere { overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: -.15em; }
.eyebrow { font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-1); font-weight: var(--weight-semibold); }
kbd { font-family: var(--font-ui); font-size: var(--text-2xs); padding: 2px var(--space-1); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-6); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 200; background: var(--btn); color: var(--btn-ink); padding: var(--space-2) var(--space-3); border-radius: var(--r-8); }
.skip:focus { left: .5rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Shell: sidebar plus main column on wide screens */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar { width: 240px; flex: 0 0 240px; position: sticky; top: 0; height: 100vh; height: 100dvh; background: var(--sb-bg); background-image: linear-gradient(180deg, var(--sb-bg-2), var(--sb-bg) 40%); color: var(--sb-ink); display: flex; flex-direction: column; padding: var(--space-3) var(--space-2) var(--space-2); z-index: 40; border-right: 1px solid var(--sb-line); }
.sb-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); padding: 0 var(--space-1) var(--space-2) var(--space-1); }
.sb-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--r-8); border: 0; background: transparent; color: var(--sb-muted); cursor: pointer; }
.sb-toggle:hover { background: var(--sb-hover); color: var(--sb-ink); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--sb-ink); white-space: nowrap; min-width: 0; font-weight: var(--weight-semibold); font-size: var(--text-md); letter-spacing: .01em; }
.list-plain a[aria-current="page"] { font-weight: var(--weight-semibold); }
.brand .logo { width: 1.75rem; height: 1.75rem; color: var(--on-dark-accent); flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand-name { display: inline-flex; flex-direction: column; line-height: 1.05; font-family: var(--font); font-weight: var(--weight-regular); font-size: var(--text-lg); letter-spacing: 0; }
.brand-name small { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-muted); margin-top: 2px; }
.sb-search { display: flex; align-items: center; gap: var(--space-2); width: 100%; background: var(--on-dark-wash); border: 1px solid var(--sb-line); color: var(--sb-muted); border-radius: var(--r-8); padding: var(--space-2) var(--space-3); min-height: var(--control); font: inherit; font-size: var(--text-sm); cursor: pointer; text-align: left; }
.sb-search:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-search kbd { margin-left: auto; background: transparent; border-color: var(--sb-line); color: var(--sb-muted); }
.sb-nav { flex: 1; overflow: auto; min-height: 0; margin-top: var(--space-2); scrollbar-width: thin; }
.sb-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--r-8); color: var(--sb-ink); font-size: var(--text-sm); font-weight: var(--weight-medium); width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; position: relative; white-space: nowrap; min-height: var(--control); }
.sb-link span { overflow: hidden; text-overflow: ellipsis; }
.sb-link:hover { background: var(--sb-hover); text-decoration: none; }
.sb-link.active { background: var(--sb-active); color: var(--sb-ink); font-weight: var(--weight-semibold); }
.sb-link.active::before { content: ""; position: absolute; left: -.5rem; top: .5rem; bottom: .5rem; width: 3px; border-radius: 3px; background: var(--on-dark-accent); }
.sb-link .ic { width: 1.125rem; height: 1.125rem; color: var(--sb-muted); }
.sb-link.active .ic { color: var(--on-dark-accent); }
/* The total beside each of the three lists of people (src/nav.js, src/services/segment-counts.js). */
.sb-count { margin-left: auto; flex: none; font-size: var(--text-xs); color: var(--sb-muted); font-variant-numeric: tabular-nums; }
.sb-link.active .sb-count { color: var(--sb-ink); }
.sb-group { margin-top: var(--space-2); }
.sb-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-2) var(--space-3); border: 0; background: transparent; color: var(--sb-muted); font: var(--weight-semibold) var(--text-xs) var(--font-ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border-radius: var(--r-6); }
.sb-head:hover { color: var(--sb-ink); }
.sb-head.static { cursor: default; }
.sb-head .chev { width: .875rem; height: .875rem; transition: transform .15s; }
.sb-head[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.sb-head[aria-expanded="false"] + .sb-items { display: none; }
.sb-head.has-active { color: var(--sb-ink); }
.sb-head:focus-visible { outline: 2px solid var(--on-dark-accent); outline-offset: -2px; }
.sb-bottom { border-top: 1px solid var(--sb-line); padding-top: var(--space-2); margin-top: var(--space-2); }
.sb-link.ask { background: var(--copper-wash); color: var(--sb-ink); }
.sb-link.ask:hover { background: var(--copper-wash-strong); }
.sb-link.ask .ic { color: var(--on-dark-accent); }
html[data-rail] .sidebar { width: 64px; flex-basis: 64px; }
html[data-rail] .sb-top { flex-direction: column; gap: var(--space-2); padding: 0 0 var(--space-2); }
html[data-rail] .brand span, html[data-rail] .sb-link span, html[data-rail] .sb-search span, html[data-rail] .sb-search kbd, html[data-rail] .sb-head { display: none; }
html[data-rail] .sb-head[aria-expanded="false"] + .sb-items { display: block; }
html[data-rail] .sb-link, html[data-rail] .sb-search { justify-content: center; padding-left: 0; padding-right: 0; }
html[data-rail] .sb-link.active::before { left: -.5rem; }
html[data-rail] .sb-group { margin-top: var(--space-2); border-top: 1px solid var(--sb-line); padding-top: var(--space-2); }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 45; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--ink); }
.topbar .inner { padding: var(--space-2) var(--space-5); min-height: 3.25rem; display: flex; align-items: center; gap: var(--space-2); }
.topbar .brand.mobile { display: none; }
.topbar .back { display: none; }
.topbar-title { font-size: var(--text-sm); color: var(--ink-3); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-title .crumb-short { display: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-8); border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .ic { width: 1.25rem; height: 1.25rem; }
.search-toggle { display: none; }
.new-btn { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--btn); color: var(--btn-ink); border: 0; border-radius: var(--r-8); padding: 0 var(--space-4) 0 var(--space-3); min-height: var(--control); font-weight: var(--weight-semibold); font-size: var(--text-sm); cursor: pointer; font-family: inherit; }
.new-btn:hover { filter: brightness(1.08); }
.avatar-btn { width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: var(--weight-semibold); font-size: var(--text-xs); border: 2px solid transparent; cursor: pointer; letter-spacing: .03em; font-family: inherit; }
.avatar-btn:hover, .avatar-btn.active, .menu.open .avatar-btn { border-color: var(--accent); }
/* The light and dark button beside the avatar: the mode it would switch to, chosen by CSS from the theme on <html> (an explicit choice, or the device's when there is none), so it is right on the first paint. */
.theme-toggle { margin: 0; display: inline-flex; }
.theme-btn { color: var(--ink-2); }
.theme-btn.to-light { display: none; }
:root[data-theme="dark"] .theme-btn.to-dark { display: none; }
:root[data-theme="dark"] .theme-btn.to-light { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn.to-dark { display: none; }
  :root:not([data-theme="light"]) .theme-btn.to-light { display: inline-flex; }
}

/* Menu buttons */
.menu { position: relative; }
.menu-panel { display: none; position: absolute; top: calc(100% + .5rem); left: 0; min-width: 17rem; background: var(--overlay); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-16); box-shadow: var(--shadow-lg); padding: var(--space-2); z-index: 75; animation: pop .12s ease-out; }
.menu-panel::before { content: ""; position: absolute; top: -.625rem; left: 0; right: 0; height: .625rem; }
.menu-panel.slim { min-width: 13.5rem; }
.menu.open .menu-panel { display: block; }
.menu.right .menu-panel { left: auto; right: 0; }
.menu-item { display: flex; gap: var(--space-3); align-items: center; width: 100%; padding: var(--space-2) var(--space-3); min-height: var(--control); border-radius: var(--r-8); color: var(--ink); background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.menu-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; text-decoration: none; }
.menu-item.active { background: var(--accent-soft); color: var(--accent); }
.menu-item .ic { color: var(--ink-3); width: 1.125rem; height: 1.125rem; }
.menu-item.active .ic { color: var(--accent); }
.menu-item small { display: block; color: var(--ink-3); font-size: var(--text-xs); }
.menu-head { padding: var(--space-2) var(--space-3) var(--space-2); }
.menu-head small { display: block; color: var(--ink-3); font-size: var(--text-xs); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2); }
.menu-row + .menu-row { padding-top: 0; }
.menu-row:has(+ .menu-item) { border-bottom: 1px solid var(--line-2); margin-bottom: var(--space-2); padding-bottom: var(--space-3); }
.menu-panel form { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; background: var(--surface-2); }
.seg button { border: 0; background: transparent; padding: var(--space-1) var(--space-2); border-radius: 999px; color: var(--ink-2); cursor: pointer; font: var(--weight-semibold) var(--text-xs) var(--font-ui); }
.seg button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Command palette */
.palette { position: fixed; inset: 0; z-index: 95; }
.palette-backdrop { position: absolute; inset: 0; background: var(--scrim); }
.palette-dialog { position: absolute; top: 11vh; left: 50%; transform: translateX(-50%); width: min(41rem, 94vw); max-height: 72vh; background: var(--overlay); border: 1px solid var(--line); border-radius: var(--r-16); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: pop .14s ease-out; }
.palette-input { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.palette-input > .ic { color: var(--ink-3); width: 1.125rem; height: 1.125rem; }
.palette-input input { flex: 1; border: 0; background: transparent; font: inherit; font-size: var(--text-md); color: var(--ink); outline: none; padding: var(--space-1) 0; min-width: 0; }
.palette-close { width: 2rem; height: 2rem; color: var(--ink-3); }
.palette-list { overflow: auto; padding: var(--space-2); min-height: 7.5rem; }
.pl-group { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: var(--space-2) var(--space-3) var(--space-1); font-weight: var(--weight-semibold); }
.pl-item[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); color: var(--accent); }
@media (hover: none) { .palette-foot, .pl-key { display: none; } }
.pl-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: var(--control); border-radius: var(--r-8); color: var(--ink); cursor: pointer; }
.pl-item .ic { color: var(--ink-3); width: 1.125rem; height: 1.125rem; }
.pl-item .pl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-item .pl-name small { display: block; color: var(--ink-3); font-size: var(--text-xs); }
.pl-item[aria-selected="true"] .ic { color: var(--accent); }
.pl-item .type { font-size: var(--text-2xs); color: var(--ink-3); }
.pl-key { display: inline-flex; gap: var(--space-1); }
.palette-foot { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--text-xs); color: var(--ink-3); }
.qs-empty { padding: var(--space-3); color: var(--ink-3); }
body.palette-open { overflow: hidden; }

/* Bottom bar (phones) */
.bottombar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: var(--surface); border-top: 1px solid var(--line); padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom)); }
.bottombar a, .bottombar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 3.125rem; font-size: var(--text-xs); line-height: 1.2; font-weight: var(--weight-medium); color: var(--ink-3); background: transparent; border: 0; padding: var(--space-1) 0; margin: 0; font-family: inherit; cursor: pointer; border-radius: var(--r-8); position: relative; }
.bottombar a:hover { text-decoration: none; }
.bottombar .active { color: var(--accent); font-weight: var(--weight-semibold); }
.bottombar .active::before { content: ""; position: absolute; top: -.25rem; left: 25%; right: 25%; height: 3px; border-radius: 3px; background: var(--accent); }
.bottombar .ic { width: 1.375rem; height: 1.375rem; padding: 3px var(--space-3); box-sizing: content-box; border-radius: 999px; }
.bottombar .active .ic { background: var(--accent-soft); }

/* Page frame */
.page { max-width: 80rem; width: 100%; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-7); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page-head > div:first-child { min-width: 0; }
.page-head > div:first-child p { margin-bottom: 0; }
.page-head .actions, .hello .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.actions .btn:not(.secondary) { order: -1; }
.section { margin-top: var(--space-5); }
.grid { display: grid; gap: var(--space-4); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }

/* Cards and stats */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-12); padding: var(--card-pad); box-shadow: var(--shadow); min-width: 0; }
.card h2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.card h2 .small { font-weight: var(--weight-regular); }
a.card { color: inherit; display: block; transition: border-color .12s; }
a.card:hover { text-decoration: none; border-color: var(--line-strong); }
a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A figure with its label under it: Usage and spend (a card holding .n and .l), and the HOA summary (a paragraph). The Home counts that once used this were replaced (CR-01); these two still do. */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .l { color: var(--ink-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.stat .n { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: 1.1; letter-spacing: -.02em; }
.stat .l a { text-decoration: underline; text-underline-offset: 2px; }
p.stat { display: block; margin: var(--space-1) 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: 1.1; letter-spacing: -.02em; }
/* Home's counts, one neutral line ("31 overdue · 13 today"). The number takes the alert colour only when views/today.ejs says so (the Mine tab, something overdue); .zero comes last so a count that reaches 0 in place goes calm again. */
.home-line { margin: 0 0 var(--space-4); color: var(--ink-2); font-size: var(--text-sm); }
.home-line a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
.home-line a:hover { text-decoration-color: currentcolor; }
.home-line .n { color: var(--ink); font-weight: var(--weight-semibold); }
.home-line .n.alert { color: var(--warn); }
.home-line .n.zero { color: var(--ink-2); }
.hello { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.hello h1 { font-size: var(--text-2xl); margin: 0; }
.digest { list-style: none; margin: 0; padding: 0; }
.digest li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; border-bottom: 1px solid var(--line-2); }
.digest li:last-child { border-bottom: 0; }
.digest li.empty { color: var(--ink-3); padding: var(--space-2) 0; }
.digest .ic { color: var(--accent); margin-top: var(--space-1); width: 1.125rem; height: 1.125rem; }
.digest.quiet .ic { color: var(--ink-3); }
.digest a { color: var(--ink); }
.digest a:hover { color: var(--accent); }
.digest .grow { flex: 1; min-width: 0; }
.digest .when { white-space: nowrap; }
/* Home's Get set up card (CR-28): one row for each of the six steps, a mark that is a ring until the step is done and then a tick (or an alert when it needs a look), so the state is never colour alone: the badge says it in words too. */
.setup-steps { list-style: none; margin: 0; padding: 0; }
.setup-step { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--line-2); }
.setup-step:last-child { border-bottom: 0; }
.setup-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; margin-top: var(--space-1); border: 2px solid var(--line-strong); border-radius: 50%; color: var(--good); }
.setup-mark .ic { width: .875rem; height: .875rem; }
.is-done .setup-mark, .is-aside .setup-mark { border-color: var(--good); }
.is-attention .setup-mark { border-color: var(--warn); color: var(--warn); }
.setup-body { flex: 1; min-width: 0; }
.setup-title { margin: 0; }
.setup-title a { color: var(--ink); font-weight: var(--weight-medium); }
.setup-title a:hover { color: var(--accent); }
.setup-body .small { margin: var(--space-1) 0 0; }
.setup-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-2); }
.setup-actions form { margin: 0; }
/* The Getting started page (CR-33): a contents list, then each answer under its own address, in a reading width. */
.help-toc ul { list-style: none; margin: 0; padding: 0; }
.help-toc > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3) var(--space-5); align-items: start; }
.help-toc > ul > li { font-weight: var(--weight-medium); }
.help-toc ul ul { margin-top: var(--space-1); font-weight: var(--weight-regular); font-size: var(--text-sm); }
.help-toc ul ul li { padding: var(--space-1) 0; }
.help-section > p { max-width: var(--measure-prose); }
.help-item { max-width: var(--measure-prose); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line-2); scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.help-item h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.help-item p { margin: 0 0 var(--space-2); }
.help-steps { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.help-steps li { margin-bottom: var(--space-1); }
.help-steps a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.help-section { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
details.more > summary { color: var(--accent); padding: var(--space-2) 0; list-style: none; cursor: pointer; }
details.more > summary::-webkit-details-marker { display: none; }
.week-strip { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: baseline; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line-2); font-size: var(--text-xs); color: var(--ink-3); }
.week-strip .eyebrow { margin: 0; }
.week-strip .w strong { color: var(--ink); }
.week-strip .d { font-weight: var(--weight-medium); } .week-strip .d.up { color: var(--good); } .week-strip .d.down { color: var(--danger); } .week-strip .d.flat { color: var(--ink-3); }
.caught-up { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); min-height: 2rem; border-radius: var(--r-6); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: var(--text-xs); }
.chip:hover { border-color: var(--line-strong); text-decoration: none; }
.chip strong { color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: var(--space-3); }
.tile { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-12); color: var(--ink); min-height: 4rem; box-shadow: var(--shadow); }
.tile:hover { border-color: var(--line-strong); text-decoration: none; }
.tile > .ic { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.tile > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tile strong { font-size: var(--text-md); }
.tile small { color: var(--ink-3); font-size: var(--text-xs); }
.tile .chev { transform: rotate(-90deg); color: var(--ink-3); }
.empty-state { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-5) 0; color: var(--ink-3); }
.empty-state .ic { width: 1.5rem; height: 1.5rem; }
.empty-state p { margin: 0; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--pad-y) var(--space-3); border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { color: var(--ink-3); font-weight: var(--weight-semibold); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tr:hover td, tr:focus-within td { background: var(--surface-2); }
td.num, th.num { text-align: right; }
table td a, .list-plain a { color: var(--ink); }
table td a:hover, .list-plain a:hover { color: var(--accent); }
td.empty { padding: var(--space-5) var(--space-3); }

/* Badges */
.badge { display: inline-block; padding: 2px var(--space-2); border-radius: 999px; font-size: var(--text-xs); font-weight: var(--weight-medium); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; line-height: 1.4; }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.p1 { background: var(--p1-bg); color: var(--p1-ink); } .badge.p2 { background: var(--p2-bg); color: var(--p2-ink); } .badge.p3 { background: var(--p3-bg); color: var(--p3-ink); } .badge.p4 { background: var(--p4-bg); color: var(--p4-ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn); padding: 0 var(--space-4); min-height: var(--control); border-radius: var(--r-8); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; font-family: inherit; line-height: 1.2; white-space: nowrap; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
/* A button whose words are long (the preference page's) wraps inside its card instead of running out of it on a phone. */
.btn.wrap { white-space: normal; max-width: 100%; padding-block: var(--space-2); text-align: center; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--surface-2); filter: none; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.btn.small { padding: 0 var(--space-3); font-size: var(--text-xs); min-height: 1.75rem; border-radius: var(--r-6); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Forms */
form.stack { display: grid; gap: var(--space-3); }
label { display: block; font-weight: var(--weight-semibold); font-size: var(--text-xs); margin-bottom: var(--space-1); }
label .hint { font-weight: var(--weight-regular); color: var(--ink-3); }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]), select, textarea {
  width: 100%; padding: var(--space-2) var(--space-3); min-height: var(--control); border: 1px solid var(--line-strong); border-radius: var(--r-8); font: inherit; background: var(--field); color: var(--ink);
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 1rem; height: 1rem; vertical-align: -.125rem; margin-right: var(--space-2); }
fieldset.attach { border: 1px solid var(--line); border-radius: var(--r-12); padding: var(--space-2) var(--space-4) var(--space-2); margin: var(--space-4) 0 0; }
fieldset.attach legend { font-weight: var(--weight-semibold); padding: 0 var(--space-1); }
fieldset.attach label.check { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-regular); margin: var(--space-1) 0; min-height: 2.25rem; }
fieldset.attach label.check a { margin-left: var(--space-1); }
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: var(--space-3); }
/* A native select's choices carry the field's own colours, so they read in the dark theme too (some browsers draw the open list from the option's colours, not the select's). */
select option, select optgroup { background-color: var(--field); color: var(--ink); }
/* The person picker (views/partials/person-picker.ejs, public/js/picker.js): the text box is an ordinary field; the matches drop from it, the chosen people sit above it as chips. */
.picker { position: relative; min-width: 0; }
.picker-box { position: relative; }
.picker-clear { position: absolute; top: 50%; right: var(--space-1); transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: var(--r-8); background: transparent; color: var(--ink-3); cursor: pointer; }
.picker-clear:hover { background: var(--surface-2); color: var(--ink); }
.picker-clear .ic { width: 1rem; height: 1rem; }
.picker-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + var(--space-1)); margin: 0; padding: var(--space-1); list-style: none; max-height: 18rem; overflow: auto; background: var(--overlay); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-12); box-shadow: var(--shadow-lg); }
.picker-list [role="option"] { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); min-height: var(--control); justify-content: center; border-radius: var(--r-8); cursor: pointer; }
.picker-list [role="option"]:hover { background: var(--surface-2); }
.picker-list [role="option"][aria-selected="true"] { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.picker-list .pk-name { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-list .pk-sub { font-size: var(--text-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-list .pk-add { flex-direction: row; align-items: center; gap: var(--space-2); border-top: 1px solid var(--line-2); border-radius: 0 0 var(--r-8) var(--r-8); color: var(--accent); }
.picker-list .pk-add .ic { width: 1rem; height: 1rem; flex: none; }
.picker-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.picker-chips:empty { display: none; }
.picker-chip { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; padding: 0 0 0 var(--space-3); min-height: 2rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: var(--text-sm); }
.picker-chip-name { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-chip-sub { color: var(--ink-3); font-size: var(--text-xs); white-space: nowrap; }
.picker-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.picker-chip-x:hover { background: var(--line); color: var(--ink); }
.picker-chip-x .ic { width: .875rem; height: .875rem; }
.picker-save { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-weight: var(--weight-regular); font-size: var(--text-sm); }
.picker-warn { margin: var(--space-2) 0 0; color: var(--warn); }
.picker-numbers { margin: var(--space-2) 0 0; border: 0; padding: 0; }
.picker-numbers .check { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-regular); min-height: 2rem; }
.pk-dialog { width: min(34rem, calc(100vw - var(--space-5))); padding: var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--r-16); background: var(--overlay); color: var(--ink); box-shadow: var(--shadow-lg); }
.pk-dialog::backdrop { background: var(--scrim); }
.pk-dialog h2 { margin: 0; font-size: var(--text-lg); }
.pk-chips-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pk-chip-check { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2rem; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: 999px; font-weight: var(--weight-regular); font-size: var(--text-sm); cursor: pointer; margin: 0; }
.pk-chip-check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pk-chip-check input { margin: 0; }
.inline-form { display: inline; }
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: end; margin-bottom: var(--space-4); }
.filters label { margin: 0; }
.filters input, .filters select { width: auto; min-width: 9rem; }

/* Messages */
.flash { padding: var(--space-3) var(--space-4); border-radius: var(--r-8); margin-bottom: var(--space-4); border: 1px solid transparent; }
.flash.success { background: var(--sage-soft); color: var(--good); }
.flash.error { background: var(--danger-soft); color: var(--danger); }
.flash.info { background: var(--info-soft); color: var(--info); }
/* A refusal or a failure in the composer (views/compose/_problem.ejs): the reason, then the next step as links. */
.flash.problem p:last-child { margin-bottom: 0; }
.flash.problem .problem-steps { margin-top: var(--space-2); }
.warning-box { border-left: 3px solid var(--warn); background: var(--warn-soft); padding: var(--space-3) var(--space-4); border-radius: var(--r-8); }
.empty { color: var(--ink-3); padding: var(--space-2) 0; }
/* Join answers waiting for review (views/people/_held.ejs): each submission is a block of its own, set apart from the one before it. */
.held-item + .held-item { border-top: 1px solid var(--line); margin-top: var(--space-5); padding-top: var(--space-4); }

/* Record layout */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; white-space: pre-wrap; min-width: 0; }
.prose { white-space: pre-wrap; }
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); flex-wrap: wrap; }
.tabs a { padding: var(--space-2) var(--space-3); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-3); font-weight: var(--weight-medium); white-space: nowrap; }
.tabs a.active { border-bottom-color: var(--accent); color: var(--ink); font-weight: var(--weight-semibold); }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.avatar { width: 3.5rem; height: 3.5rem; border-radius: var(--r-12); object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.avatar.lg { width: 6rem; height: 6rem; }
.avatar.is-missing { display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-weight: var(--weight-semibold); font-size: var(--text-lg); letter-spacing: .02em; }
.record-head { display: flex; gap: var(--space-4); align-items: flex-start; min-width: 0; }
.record-head > div { min-width: 0; flex: 1 1 auto; }
.record-head h1 { overflow-wrap: anywhere; }
.record-head .meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line-2); }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--ink-3); font-size: var(--text-xs); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: var(--row-pad) 0; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.list-plain li:last-child { border-bottom: 0; }
.list-plain li > span:first-child { min-width: 0; }
.bar { height: .5rem; background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--moss); }
.bar.over > span { background: var(--danger); }
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: 8rem 1fr 2.5rem; gap: var(--space-2); align-items: center; padding: var(--space-1) 0; }
.bars .label { color: var(--ink-2); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .bar { height: .625rem; }
.bars .num { text-align: right; font-weight: var(--weight-semibold); }
details > summary { cursor: pointer; }

/* Assistant page */
.chat { display: grid; grid-template-columns: 16rem 1fr; gap: var(--space-4); min-height: 60vh; }
.chat .messages { display: flex; flex-direction: column; gap: var(--space-2); max-height: 60vh; overflow: auto; padding-right: var(--space-1); }
.msg { padding: var(--space-3) var(--space-3); border-radius: var(--r-12); max-width: 85%; white-space: pre-wrap; }
.msg.user { background: var(--accent-soft); align-self: flex-end; }
.msg.assistant { background: var(--surface-2); align-self: flex-start; }
.msg .meta { display: block; font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-1); }

/* Footer */
footer.foot { max-width: 80rem; width: 100%; margin: auto auto 0; padding: var(--space-5) var(--space-5) var(--space-4); color: var(--ink-3); font-size: var(--text-xs); display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: baseline; }

/* Sign-in and invite: night sky with the white mark */
body:has(> main > .auth) { background: var(--auth-bg); background-image: radial-gradient(60% 50% at 50% 0%, var(--auth-glow) 0%, var(--auth-bg) 70%); min-height: 100vh; }
body:has(> main > .auth) footer.foot { color: var(--sb-muted); }
.auth { max-width: 27.5rem; margin: var(--space-7) auto var(--space-6); }
.auth .mark { display: block; margin: 0 auto var(--space-3); width: 3.5rem; height: 3.5rem; color: var(--on-dark-accent); }
.auth .wordmark { text-align: center; font-family: var(--font); font-size: var(--text-2xl); line-height: 1.1; color: var(--on-dark); margin: 0 0 var(--space-5); }
.auth .wordmark small { display: block; font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--sb-muted); margin-top: var(--space-2); }
.auth .card { padding: var(--space-5); }
.auth h1 { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-lg); margin-bottom: var(--space-1); }

/* Docked assistant */
.assist-launcher { display: none; }
@media (max-width: 1023px) {
  .assist-launcher { display: inline-flex; align-items: center; justify-content: center; position: fixed; right: 1rem; bottom: calc(4.75rem + env(safe-area-inset-bottom)); z-index: 66; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 0; background: var(--btn); color: var(--btn-ink); box-shadow: var(--shadow-float); cursor: pointer; font-size: 0; touch-action: none; }
  .assist-launcher .ic { width: 1.5rem; height: 1.5rem; }
  .assist-launcher.dragging { opacity: .85; }
}
.row-actions { white-space: nowrap; }
.row-actions .btn { padding: 0 var(--space-2); margin-left: var(--space-1); }
.assist-panel { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(26rem, 100vw); z-index: 70; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.assist-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.assist-head .assist-spend { flex: 1 0 100%; margin: 0; color: var(--ink-3); font-size: var(--text-xs); }
.assist-head .assist-spend a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.assist-head .assist-title { white-space: nowrap; }
.assist-head .assist-conv { flex: 1; min-width: 0; }
.assist-head .assist-full { font-size: var(--text-xs); white-space: nowrap; }
.assist-close { background: transparent; border: 0; font-size: var(--text-xl); line-height: 1; cursor: pointer; color: var(--ink-2); padding: 0 var(--space-1); min-width: 2.25rem; min-height: 2.25rem; }
.assist-context { padding: var(--space-1) var(--space-3) 0; min-height: 1.2rem; }
.assist-messages { flex: 1; overflow: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.assist-msg { padding: var(--space-2) var(--space-3); border-radius: var(--r-12); max-width: 92%; white-space: pre-wrap; }
.assist-msg.user { background: var(--accent-soft); align-self: flex-end; }
.assist-msg.assistant { background: var(--surface-2); align-self: flex-start; }
.assist-msg .meta { display: block; font-size: var(--text-2xs); color: var(--ink-3); margin-top: var(--space-1); }
.assist-card { border: 1px solid var(--line); border-left: 3px solid var(--moss); border-radius: var(--r-8); padding: var(--space-3) var(--space-3); background: var(--surface); align-self: stretch; }
.assist-card-actions { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); flex-wrap: wrap; }
.assist-form { border-top: 1px solid var(--line); padding: var(--space-3) var(--space-3); display: grid; gap: var(--space-2); }
.assist-form textarea { min-height: 3.25rem; }
.assist-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* Call dock: stays put while the caller looks things up */
.call-dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 68; width: min(44rem, calc(100vw - 2rem)); background: var(--panel); color: var(--on-dark); border-radius: var(--r-16); box-shadow: var(--shadow-lg); padding: var(--space-2) var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; touch-action: none; }
.call-dock[hidden] { display: none; }
.call-dock .who { font-weight: var(--weight-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.call-dock .timer { font-variant-numeric: tabular-nums; color: var(--on-dark-accent); font-weight: var(--weight-semibold); }
.call-dock .btn { min-height: 2.25rem; }
.call-dock .btn.secondary { background: var(--on-dark-wash); color: var(--on-dark); border-color: var(--on-dark-line); }
.call-dock .btn.secondary[aria-pressed="true"] { background: var(--on-dark-accent); color: var(--panel); border-color: var(--on-dark-accent); }
.call-dock select { width: auto; min-height: 2.25rem; padding: var(--space-1) var(--space-2); background: var(--on-dark-wash); color: var(--on-dark); border-color: var(--on-dark-line); font-size: var(--text-xs); max-width: 11rem; }
.call-dock.mini { width: 4rem; height: 4rem; border-radius: 50%; padding: 0; justify-content: center; align-items: center; cursor: pointer; box-shadow: var(--shadow-float); }
.call-dock.mini .dock-more { display: none; }
.call-dock .badge { background: var(--on-dark-wash); color: var(--on-dark); }
.call-dock .badge.accent { background: var(--on-dark-accent); color: var(--panel); }
.call-dock .badge.danger { background: var(--danger); color: var(--danger-ink); }
.coach { list-style: none; margin: 0; padding: 0; }
.coach li { padding: var(--space-2) var(--space-2); border-left: 3px solid var(--moss); background: var(--surface-2); border-radius: var(--r-6); margin-bottom: var(--space-2); }
.coach li.fresh { border-left-color: var(--accent); background: var(--accent-soft); }
.coach .when { display: block; font-size: var(--text-2xs); color: var(--ink-3); margin-top: 2px; }
.transcript { min-height: 8rem; max-height: 16rem; overflow: auto; white-space: pre-wrap; background: var(--surface-2); padding: var(--space-2); border-radius: var(--r-8); font-size: var(--text-sm); }
.slots { display: grid; grid-template-columns: 6rem repeat(16, minmax(0, 1fr)); gap: 2px; font-size: var(--text-2xs); align-items: center; }
.slots .day { font-weight: var(--weight-semibold); color: var(--ink-2); padding-right: var(--space-1); white-space: nowrap; }
.slots .hour { text-align: center; color: var(--ink-3); }
.slots button { border: 1px solid var(--line); background: var(--sage-soft); height: 1.6rem; border-radius: 4px; cursor: pointer; padding: 0; font: inherit; font-size: var(--text-2xs); color: transparent; }
.slots button:hover, .slots button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.slots button.busy { background: var(--danger-soft); border-color: var(--danger-soft); cursor: not-allowed; color: transparent; }
.slots button.past { background: var(--surface-2); border-color: var(--line-2); cursor: not-allowed; }
@media (max-width: 767px) {
  .call-dock { bottom: calc(4.5rem + env(safe-area-inset-bottom)); width: calc(100vw - 1rem); }
  .slots { grid-template-columns: 4rem repeat(16, minmax(0, 1fr)); }
}

/* Quick view popup */
.peek { position: fixed; inset: 0; z-index: 80; }
.peek-backdrop { position: absolute; inset: 0; background: var(--scrim); }
.peek-dialog { position: absolute; top: 6vh; left: 50%; transform: translateX(-50%); width: min(45rem, 94vw); max-height: 86vh; background: var(--overlay); border: 1px solid var(--line); border-radius: var(--r-16); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; animation: pop .14s ease-out; }
.peek.expanded .peek-dialog { top: 2vh; width: min(75rem, 98vw); max-height: 96vh; }
.peek-bar { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.peek-back { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 13rem; min-width: 0; }
.peek-back > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-back .ic { width: 1rem; height: 1rem; }
.peek-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.peek-nav .icon-btn { width: 2rem; height: 2rem; }
.peek-nav .icon-btn[disabled] { opacity: .35; cursor: default; }
.peek-close { background: transparent; border: 0; font-size: var(--text-xl); line-height: 1; cursor: pointer; color: var(--ink-2); padding: 0 var(--space-1); min-width: 2.25rem; min-height: 2.25rem; }
.peek-content { overflow: auto; padding: var(--space-4) var(--space-4) var(--space-5); }
.peek-body h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }

/* The way back from a card page: the Back link that names where it goes, and the breadcrumb (views/partials/trail.ejs). Server-drawn, so nothing shifts when the script rewrites the name. */
.trail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); min-height: 2rem; }
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2rem; padding: 0 var(--space-3) 0 var(--space-2); margin-left: calc(var(--space-2) * -1); border-radius: var(--r-8); color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); max-width: 100%; }
.back-link:hover { background: var(--accent-soft); text-decoration: none; }
.back-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-link .ic { width: 1.125rem; height: 1.125rem; }
.crumbs { min-width: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: 100%; }
.crumbs li > a, .crumbs li > span:not(.sep) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.crumbs li > a { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.crumbs li > a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--ink-3); }
.crumbs .sep { color: var(--ink-3); }
/* The numbers on the mail tabs (views/partials/mail-tabs.ejs): what is waiting on each page. */
.tabs .tab-count { display: inline-block; min-width: 1.25rem; margin-left: var(--space-1); padding: 0 var(--space-1); border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.25rem; text-align: center; font-variant-numeric: tabular-nums; }
/* The greeting after signing in (views/partials/foot.ejs): a dark chip with a copper heart, above the page and below the dialogs. It slides in only for someone who has not asked for less motion. */
.toast { position: fixed; z-index: 90; top: calc(var(--topbar-h) + var(--space-3)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-2); max-width: calc(100vw - var(--space-5)); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-radius: 999px; background: var(--panel); color: var(--on-dark); box-shadow: var(--shadow-float); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.toast-heart { width: 1.125rem; height: 1.125rem; fill: currentColor; color: var(--on-dark-accent); }
.toast-close { color: var(--on-dark); }
.toast-close:hover { background: var(--on-dark-wash); }
.toast :focus-visible { outline-color: var(--on-dark-accent); }
.toast.is-leaving { opacity: 0; transition: opacity .2s; }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .3s ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, -.5rem); } to { opacity: 1; transform: translate(-50%, 0); } }
}
/* The phone's More sheet: the whole sidebar, as a bottom sheet (views/partials/more-sheet.ejs). Never shown where the sidebar is. */
.nsheet { position: fixed; inset: 0; z-index: 85; }
.nsheet-backdrop { position: absolute; inset: 0; background: var(--scrim); }
.nsheet-dialog { position: absolute; left: 0; right: 0; bottom: 0; max-height: 90dvh; display: flex; flex-direction: column; background: var(--overlay); color: var(--ink); border-radius: var(--r-16) var(--r-16) 0 0; box-shadow: var(--shadow-lg); animation: pop .14s ease-out; }
.nsheet-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.nsheet-bar h2 { margin: 0; font-size: var(--text-md); }
.nsheet-nav { overflow: auto; padding: var(--space-2); }
.nsheet-foot { border-top: 1px solid var(--line); padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom)); }
.mo-link { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--r-8); background: transparent; color: var(--ink); font: inherit; font-size: var(--text-md); text-align: left; cursor: pointer; }
.mo-link:hover { background: var(--surface-2); text-decoration: none; }
.mo-link .ic { width: 1.25rem; height: 1.25rem; color: var(--ink-3); }
.mo-link.active { background: var(--accent-soft); color: var(--accent); font-weight: var(--weight-semibold); }
.mo-link.active .ic { color: var(--accent); }
.mo-count { margin-left: auto; font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mo-link.active .mo-count { color: var(--accent); }
.mo-group { margin-top: var(--space-2); }
.mo-head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--control); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--r-8); background: transparent; color: var(--ink-3); font: var(--weight-semibold) var(--text-xs) var(--font-ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.mo-head:hover { background: var(--surface-2); }
.mo-head.has-active { color: var(--ink); }
.mo-head .chev { width: .875rem; height: .875rem; transition: transform .15s; }
.mo-head[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.mo-head[aria-expanded="false"] + .mo-items { display: none; }
@media (min-width: 1024px) { .nsheet { display: none !important; } }

/* Tablets and phones: no sidebar; night-sky top bar; tab bar */
@media (max-width: 1023px) {
  .sidebar { display: none; }
  .topbar { background: var(--top-mobile); background-image: linear-gradient(90deg, var(--top-mobile), var(--top-mobile-2) 80%); border-bottom: 1px solid var(--on-dark-wash); color: var(--sb-ink); }
  .topbar .inner { padding: var(--space-2) var(--space-3); min-height: 3.375rem; }
  .topbar .brand.mobile { display: inline-flex; }
  .topbar :focus-visible { outline-color: var(--on-dark-accent); }
  .topbar-right { gap: var(--space-2); }
  html { scroll-padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .topbar .back { display: inline-flex; color: var(--sb-ink); margin-left: calc(var(--space-2) * -1); }
  .topbar .back:hover { background: var(--on-dark-wash); }
  .topbar-title { color: var(--sb-ink); font-weight: var(--weight-semibold); font-size: var(--text-md); flex: 1; }
  .search-toggle { display: inline-flex; color: var(--sb-ink); }
  .search-toggle:hover { background: var(--on-dark-wash); }
  .theme-btn { color: var(--sb-ink); }
  .theme-btn:hover { background: var(--on-dark-wash); }
  .new-btn { background: var(--on-dark-accent); color: var(--panel); }
  .avatar-btn { background: var(--on-dark-wash); color: var(--sb-ink); border-color: var(--on-dark-line); }
  .bottombar { display: flex; }
  body:has(.bottombar) { padding-bottom: calc(var(--space-7) + var(--space-4) + env(safe-area-inset-bottom)); }
  .assist-panel { width: 100vw; }
  .page { padding: var(--space-4) var(--space-4) var(--space-6); }
}
@media (max-width: 767px) {
  body { font-size: var(--text-md); --control: 2.75rem; }
  .small { font-size: var(--text-sm); }
  h1 { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-xl); letter-spacing: -.01em; }
  .hello h1 { font-family: var(--font); font-weight: var(--weight-regular); font-size: var(--text-2xl); }
  .topbar-title .crumb-full { display: none; }
  .topbar-title .crumb-short { display: inline; }
  .new-btn .label { display: none; }
  .new-btn { min-width: 2.75rem; padding: 0; justify-content: center; }
  .page { padding: var(--space-4) var(--space-4) var(--space-6); overflow-x: clip; }
  .page-head, .hello { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-3); }
  .page-head .actions { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-1); scrollbar-width: none; margin: 0 calc(var(--space-4) * -1); padding-left: var(--space-4); padding-right: var(--space-4); mask-image: linear-gradient(90deg, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, black 90%, transparent); }
  .page-head .actions::-webkit-scrollbar { display: none; }
  .page-head .actions .btn { flex: 0 0 auto; }
  .hello .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hello .actions .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .btn.small { min-height: 2.75rem; }
  .icon-btn, .avatar-btn, .peek-close, .peek-nav .icon-btn, .palette-close, .sb-toggle { min-width: 2.75rem; min-height: 2.75rem; }
  .seg button { min-height: 2.25rem; }
  .tabs a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .back-link { min-height: var(--control); font-size: var(--text-md); }
  .crumbs li > a, .crumbs li > span:not(.sep) { max-width: 11rem; }
  .pl-item { min-height: 2.75rem; }
  .peek-dialog::before { content: ""; display: block; width: 2.25rem; height: 4px; border-radius: 2px; background: var(--line-strong); margin: var(--space-2) auto 0; }
  .list-plain li { min-height: 2.75rem; flex-wrap: wrap; }
  .record-head { flex-wrap: wrap; gap: var(--space-3); }
  .record-head > div:not(.avatar) { flex: 1 1 100%; max-width: 100%; }
  .record-head > .avatar { flex: 0 0 auto; }
  .record-head h1 { white-space: normal; }
  .record-head p, .record-head .meta { overflow-wrap: anywhere; }
  .record-head .meta .badge { white-space: normal; }
  .assist-form { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .peek-content, .palette-list { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .record-head .avatar.lg { width: 3.5rem; height: 3.5rem; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, black calc(100% - 2.25rem), transparent); -webkit-mask-image: linear-gradient(90deg, black calc(100% - 2.25rem), transparent); padding-bottom: 2px; }
  .tabs a.active { background: var(--accent-soft); border-radius: var(--r-8) var(--r-8) 0 0; color: var(--accent); }
  .tabs::-webkit-scrollbar { display: none; }
  .chat { grid-template-columns: 1fr; }
  .palette-dialog { top: 0; left: 0; transform: none; width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .palette-foot { display: none; }
  .palette-list { flex: 1; }
  .peek-dialog { top: auto; bottom: 0; left: 0; transform: none; width: 100vw; max-height: 92dvh; border-radius: var(--r-16) var(--r-16) 0 0; }
  .peek.expanded .peek-dialog { top: 0; max-height: 100dvh; border-radius: 0; }
  .assist-panel { top: 8dvh; height: 92dvh; border-radius: var(--r-16) var(--r-16) 0 0; border-left: 0; border-top: 1px solid var(--line); }
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]), select, textarea { font-size: var(--text-md); }
  footer.foot { padding: var(--space-4) var(--space-4); }
}
@media (max-width: 640px) {
  table.cards, table.cards thead, table.cards tbody, table.cards tr, table.cards td { display: block; }
  table.cards thead { position: absolute; left: -9999px; }
  table.cards tr { border: 1px solid var(--line); border-radius: var(--r-12); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3); background: var(--surface); }
  table.cards td { border: 0; padding: var(--space-1) 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; overflow-wrap: anywhere; }
  table.cards td::before { content: attr(data-label); color: var(--ink-3); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; text-align: left; flex: none; }
  table.cards td[data-label=""]::before { display: none; }
  table.cards td:first-child { display: block; text-align: left; font-weight: var(--weight-semibold); font-size: var(--text-md); padding-bottom: var(--space-1); }
  table.cards td:first-child::before { display: none; }
  table.cards td.is-empty { display: none; }
  table.cards tr:hover td { background: transparent; }
  table.cards tr:has(> td.empty) { border: 0; padding: 0; background: transparent; }
  table.cards td.empty { display: block; text-align: left; font-weight: var(--weight-regular); font-size: var(--text-md); padding: var(--space-2) 0; }
  table.cards td.empty::before { display: none; }
  .kv { grid-template-columns: 1fr; gap: 2px var(--space-2); }
  .kv dt { margin-top: var(--space-2); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; }
}

/* Record shell: hero, key facts, accordions (contacts, venues, partners, events). */
.rec-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; margin-bottom: var(--space-5); }
.rec-img { width: 8.5rem; height: 8.5rem; border-radius: var(--r-16); object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); display: block; }
.rec-img.is-missing { display: flex; align-items: center; justify-content: center; font-family: var(--font); font-size: var(--text-2xl); color: var(--sb-ink); background: linear-gradient(135deg, var(--ramp-2), var(--ramp-1)); border: 0; }
.rec-hero > div { min-width: 0; }
.rec-hero h1 { margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.rec-line { color: var(--ink-2); margin: 0; font-size: var(--text-md); line-height: 1.4; }
.rec-line a { font-weight: var(--weight-medium); }
.rec-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.rec-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; align-self: center; }
.rec-actions .btn { white-space: nowrap; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.fact { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-12); padding: var(--space-3) var(--space-3); min-width: 0; color: inherit; }
.fact-k { display: block; font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.fact-v { display: block; font-size: var(--text-md); font-weight: var(--weight-medium); overflow-wrap: anywhere; line-height: 1.3; }
.fact-v .muted { font-weight: var(--weight-regular); }
.fact-v svg.ic { width: .9em; height: .9em; vertical-align: -.1em; margin-right: var(--space-1); color: var(--accent); }
a.fact:hover { border-color: var(--accent); text-decoration: none; }
a.fact:hover .fact-v { color: var(--accent); }
.fact.empty-fact .fact-v { color: var(--ink-3); font-weight: var(--weight-regular); }
.acc-tools { display: flex; justify-content: flex-end; gap: var(--space-2); margin: 0 0 var(--space-2); }
.acc-tools button { background: none; border: 0; color: var(--ink-3); font: inherit; font-size: var(--text-sm); cursor: pointer; padding: var(--space-1) var(--space-2); min-height: 2rem; border-radius: var(--r-6); }
.acc-tools button:hover { color: var(--accent); background: var(--surface-2); }
details.acc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-12); margin-bottom: var(--space-3); box-shadow: var(--shadow); }
details.acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 3.25rem; border-radius: var(--r-12); }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary:hover { background: var(--surface-2); }
details.acc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.acc[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-12) var(--r-12) 0 0; }
.acc-title { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-md); margin: 0; flex: 0 0 auto; }
.acc-meta { flex: 1 1 auto; min-width: 0; color: var(--ink-3); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-meta .badge { margin-right: var(--space-2); }
.acc-chev { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; color: var(--ink-3); transition: transform .15s ease; }
details.acc[open] > summary .acc-chev { transform: rotate(180deg); }
.acc-body { padding: var(--space-4) var(--space-4) var(--space-4); }
.acc-body > h3:first-child, .acc-body > h2:first-child { margin-top: 0; }
.acc-body .card { border: 0; box-shadow: none; padding: 0; background: transparent; }
.acc-body .grid { margin-bottom: 0; }
.acc-cta { margin-top: var(--space-3); }
@media (max-width: 767px) {
  .rec-hero { grid-template-columns: 1fr; gap: var(--space-3); }
  .rec-img { width: 100%; height: auto; aspect-ratio: 16 / 8; border-radius: var(--r-16); }
  .rec-img.is-missing { aspect-ratio: 16 / 6; font-size: var(--text-2xl); }
  .rec-actions { justify-content: flex-start; }
  .rec-actions .btn { flex: 1 1 auto; justify-content: center; }
  .facts { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .acc-meta { display: none; }
  details.acc > summary { padding: var(--space-3) var(--space-4); }
  .acc-body { padding: var(--space-3) var(--space-4) var(--space-4); }
}

/* Call dock (call page) and call pill (every other page while a phone-mode call is live): both float and drag. */
.call-dock.dragged { left: auto; transform: none; }
.call-dock .dock-grip { width: 2.5rem; height: .25rem; border-radius: 999px; background: var(--on-dark-line); margin: calc(var(--space-1) * -1) auto var(--space-1); display: none; }
.call-dock .dock-audio { flex: 1 1 100%; color: var(--sb-muted); font-size: var(--text-xs); line-height: 1.3; }
/* Call guidance in the dock: a collapsible panel, text only, for the person on the call */
.call-dock .dock-guide { flex: 1 1 100%; border-top: 1px solid var(--on-dark-line); padding-top: var(--space-2); }
.call-dock .dock-guide[hidden] { display: none; }
.call-dock .dock-guide-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.call-dock .dock-guide-title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--on-dark); flex: 1; }
.call-dock .dock-guide-body { max-height: 40vh; overflow: auto; margin-top: var(--space-2); font-size: var(--text-sm); }
.call-dock .dock-guide-body h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--on-dark-accent); text-transform: uppercase; letter-spacing: .04em; }
.call-dock .dock-guide-list { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.call-dock .dock-guide-list a { color: var(--on-dark-accent); }
.call-dock .dock-guide-note, .call-dock .dock-guide-foot { margin: var(--space-1) 0 0; color: var(--sb-muted); }
.call-dock .dock-guide[data-state="budget"] .dock-guide-note, .call-dock .dock-guide[data-state="slow"] .dock-guide-note, .call-dock .dock-guide[data-state="error"] .dock-guide-note { color: var(--on-dark); font-weight: var(--weight-medium); }
#guide-warnings { border-left: 3px solid var(--on-dark-accent); padding-left: var(--space-2); }

.call-dock.mini > * { display: none; }
.call-dock.mini .timer { display: block; font-size: var(--text-sm); text-align: center; }
.call-dock.mini .mini-ic { display: block; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%); width: 1rem; height: 1rem; color: var(--on-dark-accent); }
.call-dock .mini-ic { display: none; }
.call-pill { position: fixed; right: 1rem; bottom: calc(4.75rem + env(safe-area-inset-bottom)); z-index: 67; display: flex; align-items: center; gap: var(--space-2); background: var(--panel); color: var(--on-dark); border-radius: 999px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); box-shadow: var(--shadow-float); touch-action: none; max-width: calc(100vw - 2rem); }
.call-pill .pulse { width: .625rem; height: .625rem; border-radius: 50%; background: var(--on-dark-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--on-dark-accent) 70%, transparent); animation: pill-pulse 1.6s infinite; flex: 0 0 auto; }
@keyframes pill-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--on-dark-accent) 60%, transparent); } 70% { box-shadow: 0 0 0 .5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.call-pill .who { font-weight: var(--weight-semibold); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-pill .timer { font-variant-numeric: tabular-nums; color: var(--on-dark-accent); font-weight: var(--weight-semibold); }
.call-pill a, .call-pill button { min-height: 2rem; padding: 0 var(--space-3); border-radius: 999px; font-size: var(--text-xs); }
.call-pill a.btn.secondary { background: var(--on-dark-wash); color: var(--on-dark); border-color: var(--on-dark-line); }
@media (min-width: 1024px) { .call-pill { bottom: 1rem; } }
@media (max-width: 767px) {
  .call-dock .dock-grip { display: block; }
  .call-dock { flex-direction: row; }
  .call-dock .who { flex-basis: 100%; }
}

/* Assistant: rich answers (Markdown rendered and sanitized in the browser), streaming caret, working status. */
@media (min-width: 1024px) { .assist-panel { width: min(30rem, 100vw); } }
.assist-msg.md, .msg.md { white-space: normal; line-height: 1.55; }
.assist-msg.assistant.md, .msg.assistant.md { max-width: 100%; background: transparent; padding: var(--space-1) 2px; }
.md > :first-child, .md .body > :first-child { margin-top: 0; }
.md > :last-child, .md .body > :last-child { margin-bottom: 0; }
.md h1, .md h2 { font-family: var(--font); font-weight: var(--weight-regular); font-size: var(--text-lg); line-height: 1.25; margin: var(--space-4) 0 var(--space-2); letter-spacing: 0; }
.md h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: var(--space-4) 0 var(--space-1); }
.md h4 { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: var(--space-3) 0 var(--space-1); color: var(--ink-2); }
.md p { margin: 0 0 var(--space-2); }
.md ul, .md ol { margin: var(--space-1) 0 var(--space-3); padding-left: var(--space-5); }
.md li { margin: 2px 0; }
.md li > p { margin: 0; }
.md strong { font-weight: var(--weight-semibold); color: var(--ink); }
.md em { font-style: italic; }
.md a { font-weight: var(--weight-medium); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.md img { display: block; max-width: 100%; max-height: 11rem; width: auto; border-radius: var(--r-12); margin: var(--space-2) 0 var(--space-2); object-fit: cover; border: 1px solid var(--line); }
.md img:not([src]) { display: none; }
.md blockquote { margin: var(--space-2) 0; padding: 2px 0 2px var(--space-3); border-left: 3px solid var(--on-dark-accent); color: var(--ink-2); }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-code); background: var(--surface-3); padding: 1px var(--space-1); border-radius: var(--r-6); }
.md pre { background: var(--surface-3); padding: var(--space-3) var(--space-3); border-radius: var(--r-8); overflow-x: auto; white-space: pre; }
.md pre code { background: none; padding: 0; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-3) 0; }
.md table { border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-3); display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: var(--space-1) var(--space-2); text-align: left; vertical-align: top; }
.md .caret { display: inline-block; width: .45em; height: 1.05em; background: var(--accent); vertical-align: -.18em; margin-left: 2px; border-radius: 1px; animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.assist-status.working, #chat-status.working { background: linear-gradient(90deg, var(--ink-3) 0%, var(--accent) 45%, var(--ink-3) 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: status-shimmer 1.8s linear infinite; font-weight: var(--weight-medium); }
@keyframes status-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .assist-status.working, #chat-status.working { animation: none; color: var(--ink-3); background: none; } .md .caret { animation: none; } }

/* Sortable list tables */
th .th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; border-radius: var(--r-6); padding: 2px var(--space-1); margin: -2px calc(var(--space-1) * -1); }
th .th-sort:hover { color: var(--ink); background: var(--surface-2); }
th .th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
th .th-sort .ic { width: .75rem; height: .75rem; opacity: 0; transition: transform .15s, opacity .15s; }
th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--ink); }
th[aria-sort="ascending"] .th-sort .ic { opacity: 1; transform: rotate(180deg); }
th[aria-sort="descending"] .th-sort .ic { opacity: 1; }
th:not([aria-sort="ascending"]):not([aria-sort="descending"]) .th-sort:hover .ic { opacity: .5; }

/* Menu items that submit a form (Research online) look like the link items around them. */
.menu-form { margin: 0; }
button.menu-item { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }

/* Formatting editor around long text boxes (public/js/editor.js), and formatted display of saved text. */
.mde { border: 1px solid var(--line); border-radius: var(--r-8); background: var(--field); overflow: hidden; }
.mde:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mde-bar { display: flex; align-items: center; gap: 2px; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.mde-btn, .mde-mode { border: 0; background: none; color: var(--ink-2); font: var(--weight-semibold) var(--text-sm) var(--font-ui); min-width: 2rem; height: 2rem; padding: 0 var(--space-2); border-radius: var(--r-6); cursor: pointer; white-space: nowrap; }
.mde-btn:hover, .mde-mode:hover { background: var(--surface-3); color: var(--ink); }
.mde-btn:focus-visible, .mde-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mde-italic { font-style: italic; font-family: var(--font); font-weight: var(--weight-regular); font-size: var(--text-md); }
.mde-modes { margin-left: auto; display: flex; gap: 2px; }
.mde-mode { font-weight: var(--weight-medium); }
.mde-mode[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--weight-semibold); }
.mde-panes { display: grid; grid-template-columns: minmax(0, 1fr); }
.mde textarea { border: 0; border-radius: 0; box-shadow: none; width: 100%; background: transparent; resize: vertical; margin: 0; }
.mde textarea:focus { outline: none; box-shadow: none; border: 0; }
.mde-preview { padding: var(--space-3) var(--space-3); min-height: 6rem; overflow: auto; white-space: normal; line-height: 1.55; font-size: var(--text-md); }
.mde-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mde[data-mode="write"] .mde-preview { display: none; }
.mde[data-mode="preview"] textarea { display: none; }
.mde[data-mode="split"] .mde-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mde[data-mode="split"] .mde-preview { border-left: 1px solid var(--line); max-height: 44rem; }
@media (max-width: 899px) {
  .mde-mode-split { display: none; }
  .mde-btn, .mde-mode { min-width: 2.5rem; height: 2.5rem; }
}
.prose.md { white-space: normal; }
.md-doc { max-width: 48rem; font-size: var(--text-md); line-height: 1.6; }
.md-doc h1 { font-family: var(--font); font-weight: var(--weight-regular); font-size: var(--text-2xl); margin: 0 0 var(--space-3); }

/* --- settings blocks ------------------------------------------------------- */
/* One column, in the order a person does things. They reuse the record accordion, so only the things that
   differ are here. Nothing sits beside anything: the moment two blocks share a row, "first, second, third"
   stops being readable and a sentence can say "below" about a neighbour. */
.set-col { max-width: 52rem; }
.set-group { margin: var(--space-6) 0 var(--space-2); }
.set-group:first-of-type { margin-top: var(--space-2); }
/* The card is the wrapper, not the details, because the state sentence has to sit between the title row and
   the folding body and still be there when the body is folded away. So the details carries the control and
   the border comes off it, and the wrapper draws the card around all three parts. */
.set-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-12);
  margin-bottom: var(--space-3); box-shadow: var(--shadow); }
.set-block > details.acc { background: none; border: 0; border-radius: 0; margin: 0; box-shadow: none; }
.set-block > details.acc > summary { min-height: 2.75rem; padding: var(--space-3) var(--space-4) var(--space-2);
  border-radius: var(--r-12) var(--r-12) 0 0; }
.set-block > details.acc[open] > summary { border-bottom: 0; border-radius: var(--r-12) var(--r-12) 0 0; }
/* The title takes the free space so every badge lands at the same offset from the right edge: the left edge
   reads titles, the right edge reads states. A long title wraps inside itself rather than pushing the badge
   off the row, which is the one thing on these pages that may never be pushed anywhere. */
.set-block .acc-title { flex: 1 1 auto; min-width: 0; }
.acc-state { flex: 0 0 auto; }
/* The state sentence. It wraps, it is never shortened, and it is outside the folding part, so it reads the
   same on a phone and on a wide desktop whether the block is open or shut. Its measure matches the body
   copy below it, so the card is one column of text rather than two different ones. */
.set-state { margin: 0; padding: 0 var(--space-4) var(--space-3); max-width: 38rem; font-size: var(--text-sm); line-height: 1.5;
  color: var(--ink-2); overflow-wrap: break-word; }
.set-state .muted { color: var(--ink-3); }
/* The body folds. It is a sibling of the details, so the css does what a closed details would have done to
   its own children, and the state row above it stays put. With no stylesheet at all every block reads open,
   which is the right way to fail. */
.set-block > .acc-body { display: none; border-top: 1px solid var(--line); }
.set-block > details.acc[open] ~ .acc-body { display: block; }
.set-block .acc-body p { max-width: 34rem; font-size: var(--text-sm); }
.set-block .acc-body p.small { font-size: var(--text-xs); }
.set-block .acc-body h3 { font-size: var(--text-md); margin: var(--space-5) 0 var(--space-2); }
.block-answer .flash { margin-bottom: var(--space-4); }
.block-answer .flash p { font-size: var(--text-xs); color: var(--ink-2); margin: var(--space-1) 0 0; max-width: none; }
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
/* Only the address somebody is meant to paste wears this box. A covered or shortened version of the same
   address is written as a sentence instead, so the two never sit one above the other looking alike. */
.copy-line { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-sm);
  overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-8); padding: var(--space-2) var(--space-3); max-width: none; }
.copy-row { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0; }
.copy-row > .copy-line { flex: 1 1 auto; min-width: 0; margin: 0; }
.copy-row > .btn { flex: 0 0 auto; }
.needs { border-left: 3px solid var(--line-strong); background: var(--surface-2); padding: var(--space-3) var(--space-4);
  border-radius: var(--r-8); margin-bottom: var(--space-3); font-size: var(--text-sm); }
.needs.bad { border-left-color: var(--danger); background: var(--danger-soft); }
.needs.todo { border-left-color: var(--info); background: var(--info-soft); }
.badge.good { background: var(--sage-soft); color: var(--good); }
@media (max-width: 767px) {
  /* The record accordions drop their meta line at this width. A settings block keeps its state sentence at
     every width and only loses the side padding. */
  .set-block > details.acc > summary { padding: var(--space-3) var(--space-4) var(--space-2); }
  .set-state { padding: 0 var(--space-4) var(--space-3); }
}
@media (max-width: 640px) { .btn-row > .btn { flex: 1 1 100%; } }
/* Stacked one-button forms inside a block need air between them, or a button's own hint reads as the label
   for the button underneath it. A heading binds down to what follows it, which is how a caption for two
   buttons stops reading as a note on the button above them. */
.set-block .acc-body > form + form,
.set-block .acc-body > form + p,
.set-block .acc-body > p + form,
.set-block .acc-body > details.more + form { margin-top: var(--space-3); }
.set-block .acc-body > h3 + p { margin-top: 0; }
/* A web address inside a button hint is one unbreakable word. At 320px it pushed the hint wider than the
   screen, and main.page clips rather than scrolls, so the end of the sentence was simply gone. */
.set-block .acc-body .mono { overflow-wrap: anywhere; }

/* Form states: a field's label, control, hint and error (views/partials/field.ejs), and the list of problems above a
   form (views/partials/error-summary.ejs). Colour is never the only signal: the message has an icon and a hidden
   "Error:" for screen readers, and the control carries aria-invalid. */
.field { min-width: 0; }
.field label.check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); margin: 0; min-height: var(--control); }
.field label.check input { margin: 0; }
.field-hint { margin: var(--space-1) 0 0; color: var(--ink-3); font-size: var(--text-xs); }
/* The shortcut that sends (public/js/send-keys.js shows it; with no script it stays hidden, so a page never promises a key that does nothing). */
.send-hint { color: var(--ink-3); font-size: var(--text-xs); }
/* A phone has no Ctrl key: the Send button is the way there, and Enter is a new line. */
@media (hover: none) and (pointer: coarse) { .send-hint { display: none; } }
/* Where the AI money goes: a share of the month as a small meter beside its percent. */
.where td.num, .where th.num { white-space: nowrap; }
.table-wrap td .meter { display: inline-block; width: 6rem; height: var(--space-2); vertical-align: middle; margin-right: var(--space-2); }
.field-error { display: flex; align-items: flex-start; gap: var(--space-1); margin: var(--space-1) 0 0; color: var(--danger); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.field-error .ic { margin-top: 1px; }
.field [aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field [aria-invalid="true"]:focus { outline-color: var(--danger); }
.error-summary { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--danger); border-left-width: 3px; border-radius: var(--r-8); background: var(--danger-soft); color: var(--ink); }
.error-summary:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.error-summary > .ic, .error-state > .ic { flex: none; width: 1.5rem; height: 1.5rem; color: var(--danger); }
.error-summary ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.error-summary a { display: block; padding-block: var(--space-1); color: var(--danger); font-weight: var(--weight-semibold); text-decoration: underline; }
.error-title { margin: 0; font-family: var(--font-ui); font-size: var(--text-md); font-weight: var(--weight-semibold); }

/* Error state: where content should have been (views/partials/error-state.ejs). Inside a card it drops its own frame. */
.error-state { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--danger); border-radius: var(--r-12); background: var(--danger-soft); color: var(--ink); }
.card > .error-state { padding: 0; border: 0; background: none; }
.error-state p { margin: var(--space-1) 0 0; }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }

/* Skeleton: a loading placeholder (views/partials/skeleton.ejs). The bars are decoration; the words are the sr-only line. */
.skeleton { display: grid; gap: var(--space-2); padding: var(--space-2) 0; }
.sk-line, .sk-block { display: block; border-radius: var(--r-6); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk-shimmer 1.4s linear infinite; }
.sk-line { height: var(--space-3); }
.sk-line:nth-child(3n) { width: 82%; }
.sk-line:last-child { width: 60%; }
.sk-row { display: flex; align-items: center; gap: var(--space-3); }
.sk-row .sk-line { flex: 1; width: auto; }
.sk-block { flex: none; width: var(--space-6); height: var(--space-6); border-radius: var(--r-8); }
@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-line, .sk-block { animation: none; } }

/* Bulk selection (views/partials/bulkbar.ejs, public/js/bulk.js): the bar, and the select column of a list. */
.bulkbar { position: sticky; top: var(--bulk-top, var(--topbar-h)); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-12); background: var(--panel); color: var(--on-dark); box-shadow: var(--shadow-lg); }
.bulkbar :focus-visible { outline-color: var(--on-dark-accent); }
/* The panels are light (the overlay colour), whatever the bar around them is, so their own ring is the accent: the on-dark one is under 3:1 on them. */
.bulkbar .bulk-panel :focus-visible { outline-color: var(--accent); }
.bulk-panel [data-bulk-need]:empty { display: none; }
.bulk-jump { margin: var(--space-2) var(--space-2); }
.bulk-count { flex: 1 1 auto; margin: 0; font-weight: var(--weight-semibold); }
.bulk-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bulkbar .btn.secondary { background: var(--on-dark-wash); border-color: var(--on-dark-line); color: var(--on-dark); }
.bulkbar .btn.ghost { color: var(--on-dark); text-decoration: underline; }
th.select, td.select { width: var(--space-6); padding-right: 0; }
.table-wrap tr.is-selected td { background: var(--accent-soft); }
@media (max-width: 640px) {
  table.cards tr { position: relative; }
  table.cards td.select { position: absolute; top: var(--space-2); right: var(--space-3); width: auto; padding: 0; }
  table.cards td.select::before { display: none; }
  table.cards td.select + td { display: block; padding-right: var(--space-7); font-weight: var(--weight-semibold); font-size: var(--text-md); padding-bottom: var(--space-1); }
  table.cards td.select + td::before { display: none; }
}

/* Drafts, nudges and the knowledge base (work package 8): a draft's guardrail notes, and one card per nudge with a box to tick. */
.draft-notes { margin: var(--space-2) 0 0; padding-left: var(--space-4); }
.draft-notes li { margin-bottom: var(--space-2); }
.draft-quote { margin: var(--space-1) 0 0; padding: 2px 0 2px var(--space-3); border-left: 3px solid var(--line-strong); color: var(--ink-2); font-size: var(--text-sm); }
.nudge-list { display: grid; gap: var(--space-3); padding: 0; margin: 0; }
.nudge { display: grid; gap: var(--space-2); }
.nudge:has([data-bulk-item]:checked) { border-color: var(--accent); background: var(--accent-soft); }
.nudge-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nudge-name { margin: 0; font-weight: var(--weight-regular); }
.nudge-since { margin: 0; }
.nudge .field { margin: 0; }

/* Password boxes: the show/hide button sits inside the right edge of the box (views/partials/field.ejs, public/js/app.js). */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: calc(var(--space-7) + var(--space-5) + var(--space-2)); }
.pw-toggle { position: absolute; top: 0; right: 0; bottom: 0; min-width: 4.5rem; padding: 0 var(--space-3); border: 0; border-left: 1px solid var(--line); border-radius: 0 var(--r-8) var(--r-8) 0; background: transparent; color: var(--accent); font: var(--weight-semibold) var(--text-xs) var(--font-ui); cursor: pointer; }
.pw-toggle:hover { background: var(--surface-2); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Tasks (views/partials/task-row.ejs, public/js/tasks.js): one row each, in lists on the home screen, the Tasks page and a person's page. (The rem- names are from when they were reminders.) */
.rem-list { list-style: none; margin: 0; padding: 0; }
.rem { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) 0; border-bottom: 1px solid var(--line-2); }
.rem:last-child { border-bottom: 0; }
.rem-main { flex: 1 1 14rem; min-width: 0; margin: 0; }
.rem-title { margin: 0; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.rem-meta { margin: var(--space-1) 0 0; color: var(--ink-3); }
.rem-overdue .rem-when { color: var(--danger); font-weight: var(--weight-semibold); }
.rem-today .rem-when { color: var(--warn); font-weight: var(--weight-semibold); }
.rem-done .rem-title { color: var(--ink-2); }
.rem-actions { display: flex; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; }
.rem-actions form { margin: 0; }
.rem-undone { align-items: center; margin: var(--space-1) 0; padding: var(--space-3); border: 0; border-radius: var(--r-8); background: var(--sage-soft); color: var(--good); }
.rem-undone .rem-main { font-weight: var(--weight-medium); }
.snooze { position: relative; }
.snooze > summary { list-style: none; cursor: pointer; }
.snooze > summary::-webkit-details-marker { display: none; }
.snooze-panel { position: absolute; z-index: 20; right: 0; top: calc(100% + var(--space-1)); min-width: 15rem; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-3); background: var(--overlay); border: 1px solid var(--line); border-radius: var(--r-12); box-shadow: var(--shadow-lg); }
.snooze-panel input[type=date] { width: auto; flex: 1 1 8rem; }
.rem-status { margin: 0 0 var(--space-2); }
.rem-status:not(:empty) { padding: var(--space-2) var(--space-3); border-radius: var(--r-8); background: var(--info-soft); color: var(--info); }
.rem-status.is-error { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 767px) {
  .rem-actions { width: 100%; }
  .snooze-panel { position: static; margin-top: var(--space-2); box-shadow: none; }
}
/* The Tasks page's tick boxes (CR-16, with the bulk bar above): the box in front of a row, the "select all" strip over the list, and a ticked row. */
.rem-select { flex: none; display: flex; justify-content: center; align-items: flex-start; width: 2.25rem; min-height: 2.25rem; padding-top: var(--space-1); margin: 0; }
.rem-select input, .rem-all input { margin: 0; }
.rem-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1); border-bottom: 1px solid var(--line-2); }
.rem-all { display: flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding-left: calc(var(--space-2) + var(--space-1) / 2); margin: 0; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--ink-2); }
.rem.is-selected { background: var(--accent-soft); }
.rem-who { font-weight: var(--weight-medium); }
.rem-none .rem-when { color: var(--ink-3); }
.rem-snoozed .rem-title a { color: var(--ink-2); }
.next-steps li { align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.rec-summary { margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--r-8); background: var(--surface-2); }
.rec-summary h3 { margin-top: 0; }
.team-owner { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.team-owner .field { margin: 0; }

/* A change request's page (views/partials/change-panel.ejs): the five steps, the words of the request and of Juno's plan, and the buttons for the person who decides. */
.change-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.change-step { padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-3); font-size: var(--text-sm); }
.change-step.is-done { border-color: transparent; background: var(--sage-soft); color: var(--good); }
.change-step.is-current { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: var(--weight-semibold); }
.change-note { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.change-actions { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.change-actions form { margin: 0; }

/* The bell in the page frame, and the notifications page behind it. */
.bell { position: relative; }
.bell-n { position: absolute; top: 2px; right: 2px; min-width: 1.1rem; padding: 0 var(--space-1); border-radius: 999px; background: var(--danger); color: var(--danger-ink); font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1.1rem; text-align: center; }
.notify { align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.notify.unread { border-left: 3px solid var(--accent); padding-left: var(--space-3); }

/* The row of contact actions under a person's name (views/partials/person-actions.ejs). */
.rec-hero:has(+ .rec-band) { margin-bottom: var(--space-3); }
.rec-band { margin-bottom: var(--space-5); }
.person-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.person-actions .inline-form { display: inline-flex; }
.action-why { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
@media (max-width: 767px) { .person-actions .btn { flex: 1 1 auto; } .person-actions .inline-form { flex: 1 1 auto; } .person-actions .inline-form .btn { width: 100%; } }

/* The timeline on a person's page (views/people/_timeline.ejs): newest first, each entry an icon, a title and what it says. */
.tl { list-style: none; margin: 0; padding: 0; }
.tl-item { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-2); }
.tl-item:last-child { border-bottom: 0; }
.tl-icon { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.tl-record .tl-icon { background: var(--surface-2); color: var(--ink-3); }
.tl-main { flex: 1 1 auto; min-width: 0; }
.tl-head { margin: 0; overflow-wrap: anywhere; }
.tl-body { margin-top: var(--space-1); }
.tl-meta { margin: var(--space-1) 0 0; }

/* The editors on a person's page (views/people/_status.ejs) and the tags as removable chips. */
.editors { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-5) var(--space-4); }
.editor { align-content: start; min-width: 0; }
.editor h3 { margin-top: 0; }
ul.chips { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.chip form { display: inline-flex; margin: 0; }
.chip-x { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
.chip-x:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.chip-x .ic { width: .875rem; height: .875rem; }
@media (max-width: 767px) { .chip-x { width: 2rem; height: 2rem; } }

/* A group of checkboxes or radio buttons under one legend (views/partials/choices.ejs). */
fieldset.choices { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.choices > legend { padding: 0; margin-bottom: var(--space-1); font-weight: var(--weight-semibold); font-size: var(--text-xs); }
.choice-list { display: grid; gap: var(--space-1); }
.choice-list.inline { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.choices label.check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); margin: 0; min-height: var(--control); padding: var(--space-1) 0; }
.choices label.check input { margin: var(--space-1) 0 0; flex: none; }
.choices .hint { font-weight: var(--weight-regular); color: var(--ink-3); }
.choices.has-error { border-left: 3px solid var(--danger); padding-left: var(--space-3); }

/* The contacts list: search and filters, the chips that say what is filtered, saved views, the pager, and the bulk bar's choice panels. */
.filter-bar { margin-bottom: var(--space-3); }
.filter-main { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filter-main .flex-1 { flex: 1 1 14rem; }
/* Status, Sort by and Order are one group, so that on a phone they fold away together with More filters (the "Filter and sort" button, public/js/app.js data-fold). */
.filter-extra { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.filter-help { margin: var(--space-1) 0 0; }
/* The button that folds the form exists only on a phone with the script running (it is hidden until app.js shows it); wide screens never fold. */
@media (max-width: 640px) {
  .filter-bar .filter-toggle:not([hidden]) { flex: 1 1 100%; justify-content: space-between; }
  .filter-toggle .ic { width: 1rem; height: 1rem; }
  .filter-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
  .filter-bar.is-folded .filter-fold-item { display: none; }
  /* Saved views and the download are secondary too: they come out with the rest when the person opens "Filter and sort", and the stage chips lose their "Show only" label, so the first screen has people in it. */
  .filter-bar.is-folded ~ .saved-views, .filter-bar.is-folded ~ .list-tools .export-form { display: none; }
  .filter-bar ~ .pick-bar > span[aria-hidden="true"], .page-head ~ .pick-bar > span[aria-hidden="true"] { display: none; }
  .filter-main .flex-1 { flex-basis: 10rem; }
}
.filter-more { margin-top: var(--space-2); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-4); margin: var(--space-3) 0; }
ul.filter-chips { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
/* The chips that narrow Community and Professionals (views/people/index.ejs): links that switch, so the choice is in the address. */
.pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
ul.pick { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.pick a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2rem; padding: var(--space-1) var(--space-3); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.pick a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.pick a[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: var(--weight-semibold); }
.pick .n { color: var(--ink-3); font-weight: var(--weight-regular); }
.pick a[aria-current="true"] .n { color: var(--accent); }
/* Phones and tablets have no sidebar, so the three lists are switched here instead. */
@media (max-width: 767px) { .pick a { min-height: 2.75rem; } }
/* A person's page: which of the lists they are in, and the quick way to put them in another (views/people/_segments.ejs). */
.seg-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.seg-band .seg-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.seg-band a.badge:hover { text-decoration: underline; }
.seg-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.seg-add select { min-width: 13rem; max-width: 100%; }
.saved-views { margin-bottom: var(--space-3); }
.saved-views .cluster { align-items: flex-end; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.bulk-pop { position: relative; }
.bulk-pop > summary { list-style: none; cursor: pointer; }
.bulk-pop > summary::-webkit-details-marker { display: none; }
.bulk-panel { position: absolute; z-index: 35; top: calc(100% + var(--space-1)); left: 0; width: 16rem; display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--overlay); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-12); box-shadow: var(--shadow-lg); }
.bulk-panel label { margin-bottom: var(--space-1); }
@media (max-width: 767px) {
  /* Closed, the actions wrap side by side like any row of buttons; the one that is open takes the whole row for its panel. */
  .bulk-pop[open] { flex: 1 1 100%; }
  .bulk-panel { position: static; width: auto; margin-top: var(--space-2); box-shadow: none; }
  /* The bar is stuck under the top bar and above the tab bar (public/js/bulk.js measures both): it takes at most the room between them and scrolls inside itself, so a panel's button is always reachable. */
  .bulkbar { max-height: calc(100vh - var(--bulk-top, 3.5rem) - var(--bulk-bottom, 4.5rem) - var(--space-2)); max-height: calc(100dvh - var(--bulk-top, 3.5rem) - var(--bulk-bottom, 4.5rem) - var(--space-2)); overflow-y: auto; overscroll-behavior: contain; }
}

/* The public join form (views/join): a plain, friendly page with no navigation; the consent block is the website sign-up's. */
.join { max-width: 38rem; margin: 0 auto; padding: var(--space-4) 0 var(--space-6); }
.join-head { text-align: center; margin-bottom: var(--space-5); }
.join-head .mark { width: 3rem; height: 3rem; color: var(--accent); }
.join-head .wordmark { font-family: var(--font); font-size: var(--text-lg); margin: var(--space-1) 0 var(--space-3); color: var(--ink-2); }
.join-head h1 { margin-bottom: var(--space-2); }
.lede { color: var(--ink-2); font-size: var(--text-md); max-width: 30rem; margin: 0 auto; }
.join-card { padding: var(--space-5); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
fieldset.consent { border: 1px solid var(--line); border-radius: var(--r-12); padding: var(--space-3) var(--space-4); margin: 0; min-width: 0; }
fieldset.consent legend { padding: 0 var(--space-1); font-weight: var(--weight-semibold); font-size: var(--text-xs); }
.disclosure { margin: var(--space-1) 0 0; color: var(--ink-2); }
.join-card + .join-card { margin-top: var(--space-4); }
/* An event's facts, on its public page and in the confirm page behind an emailed link: a small label, then the value. */
.event-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.event-facts > div { display: contents; }
.event-facts dt { color: var(--ink-3); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--weight-semibold); align-self: baseline; }
.event-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* The newsletter builder (views/templates/builder.ejs, public/js/builder.js): blocks on one side, the newsletter as it will look on the other. */
.builder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
/* Sticky columns stop below the app's own sticky top bar, not behind it: a preview toggle under the bar cannot be pressed. */
.builder-preview { position: sticky; top: calc(var(--topbar-h) + var(--space-3)); min-width: 0; }
.builder-preview h2, .builder-edit h2 { margin-top: 0; }
.blocks { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-3); }
.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-12); min-width: 0; }
.block.is-ghost { opacity: .5; }
.block-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.block-title { flex: 1; margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.block-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: var(--text-xs); }
.block-handle { cursor: grab; }
.block-tools { display: inline-flex; gap: var(--space-1); }
.block-body { display: grid; gap: var(--space-3); padding: var(--space-3); }
.block-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.add-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
/* A picture block (public/js/builder-images.js): the drop area with the picture or the invitation, the library dialog, the upload line and the banner shown while files are dragged over the page. */
.block.is-drop { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.dropzone { display: grid; gap: var(--space-3); padding: var(--space-3); border: 2px dashed var(--line-strong); border-radius: var(--r-12); background: var(--surface-2); }
.block.is-drop .dropzone { background: var(--accent-soft); }
.dz-line { margin: 0; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.dz-actions { display: grid; gap: var(--space-3); justify-items: start; }
.dz-actions .field { justify-self: stretch; }
.image-chosen { display: flex; align-items: flex-start; gap: var(--space-3); }
.image-chosen img { flex: none; width: 8rem; height: auto; border: 1px solid var(--line); border-radius: var(--r-8); background: var(--surface); }
.image-chosen p { margin: 0 0 var(--space-1); }
.field-warn { margin: var(--space-1) 0 0; color: var(--warn); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.field-warn[hidden] { display: none; }
.upload-status { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--r-8); background: var(--info-soft); color: var(--info); font-size: var(--text-sm); }
.upload-status.is-bad { background: var(--danger-soft); color: var(--danger); }
.upload-status[hidden] { display: none; }
.drop-note { position: fixed; z-index: 30; left: 50%; top: calc(var(--topbar-h) + var(--space-3)); transform: translateX(-50%); max-width: calc(100vw - var(--space-5)); padding: var(--space-3) var(--space-5); border-radius: var(--r-12); background: var(--btn); color: var(--btn-ink); box-shadow: var(--shadow-lg); font-weight: var(--weight-semibold); pointer-events: none; }
.drop-note[hidden] { display: none; }
.lib-dialog { width: min(48rem, calc(100vw - var(--space-5))); max-height: 90dvh; overflow: auto; }
.lib-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-3); }
.lib-item { display: grid; gap: var(--space-1); width: 100%; padding: var(--space-1); border: 2px solid var(--line); border-radius: var(--r-8); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lib-item:hover { border-color: var(--accent); }
.lib-item img { display: block; width: 100%; height: 5.5rem; object-fit: cover; border-radius: var(--r-6); }
.lib-name { font-size: var(--text-xs); overflow-wrap: anywhere; }
.lib-meta { color: var(--ink-3); font-size: var(--text-2xs); }
.preview-frame { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-12); background: var(--surface-2); }
.preview-frame iframe { display: block; width: 100%; height: 38rem; border: 0; border-radius: var(--r-8); background: var(--surface); }
.preview-frame[data-view="mobile"] iframe { width: 23.4375rem; max-width: 100%; margin: 0 auto; }
.preview-text { margin: var(--space-3) 0 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-12); background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 38rem; overflow: auto; font-size: var(--text-sm); }
#builder-notes { margin-top: var(--space-3); }
.builder-actions { position: sticky; bottom: 0; padding: var(--space-3) 0; background: var(--bg); }
/* On a phone the Save buttons stay in the flow: stuck to the bottom they would sit behind the bottom bar and cover the blocks. */
@media (max-width: 1023px) { .builder-actions { position: static; } }
@media (max-width: 1000px) { .builder-grid { grid-template-columns: minmax(0, 1fr); } .builder-preview { position: static; } }

/* The audience form: the choices beside the count they make. */
.audience-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.audience-grid aside { position: sticky; top: calc(var(--topbar-h) + var(--space-3)); }
.audience-grid aside h2 { font-size: var(--text-md); margin-top: 0; }
.count-line { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
@media (max-width: 900px) { .audience-grid { grid-template-columns: minmax(0, 1fr); } .audience-grid aside { position: static; } }

/* Campaigns: the review's two panels side by side, and how far a send has got. */
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.review-grid h2 { font-size: var(--text-md); margin-top: 0; }
@media (max-width: 900px) { .review-grid { grid-template-columns: minmax(0, 1fr); } }
.meter { display: block; width: 100%; height: var(--space-2); border: 0; border-radius: 999px; background: var(--surface-2); appearance: none; overflow: hidden; }
.meter::-webkit-progress-bar { background: var(--surface-2); }
.meter::-webkit-progress-value { background: var(--btn); }
.meter::-moz-progress-bar { background: var(--btn); }

/* Sequences: a sequence's name and its switch on one line, its steps as a list, and a step's timing in one row. */
.seq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.seq-head h2 { margin: 0; font-size: var(--text-md); }
.seq-steps { margin: 0 0 var(--space-3); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.seq-steps li.off { color: var(--ink-3); }
fieldset.step-card { margin: 0; min-width: 0; }
fieldset.step-card legend { padding: 0 var(--space-1); font-weight: var(--weight-semibold); }
.timing-row { align-items: end; }
.timing-word { margin: 0 0 var(--space-2); color: var(--ink-2); }


/* Event classes. One colour pair and one border style each, so a kind is told apart by its word, its colour and its edge: never by colour alone.
   The pairs are the badge pairs scripts/check-contrast.js already checks in both themes. A booked meeting and a task have their own. */
.cls-info_session { --cls-bg: var(--p1-bg); --cls-ink: var(--p1-ink); --cls-edge: solid; }
.cls-property_tour { --cls-bg: var(--p2-bg); --cls-ink: var(--p2-ink); --cls-edge: solid; }
.cls-community_day { --cls-bg: var(--p3-bg); --cls-ink: var(--p3-ink); --cls-edge: solid; }
.cls-work_day { --cls-bg: var(--warn-soft); --cls-ink: var(--warn); --cls-edge: double; }
.cls-public_meeting { --cls-bg: var(--info-soft); --cls-ink: var(--info); --cls-edge: dashed; }
.cls-internal { --cls-bg: var(--surface-2); --cls-ink: var(--ink-2); --cls-edge: dotted; }
.cls-meeting { --cls-bg: var(--accent-soft); --cls-ink: var(--accent); --cls-edge: solid; }
.cls-task { --cls-bg: var(--sage-soft); --cls-ink: var(--good); --cls-edge: dashed; }
.badge.cls-badge { background: var(--cls-bg); color: var(--cls-ink); }
/* Busy: a teammate's busy time from their own calendar, drawn as a plain neutral band that says Busy and nothing more (no title, no place). */
.cls-busy { --cls-bg: var(--surface-2); --cls-ink: var(--ink-2); --cls-edge: solid; }
span.cal-chip { cursor: default; }
.cal-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cal-who select { min-width: 12rem; }

/* Calendar: the bar, the filter and colour key, the month grid and the agenda. */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.cal-nav, .cal-views { display: flex; gap: var(--space-2); align-items: center; }
.cal-title { margin: 0; font-size: var(--text-xl); }
.cal-views .btn.active { background: var(--btn); color: var(--btn-ink); }
.cal-filter { margin-bottom: var(--space-3); }
.cal-filter-box > summary { cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.cal-filter-body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.cal-key { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); min-width: 0; }
.cal-key-item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); min-height: var(--control); }
.cal-swatch { display: inline-block; inline-size: 1rem; block-size: 1rem; border-radius: 3px; background: var(--cls-bg); border: 3px var(--cls-edge) var(--cls-ink); }
.cal-switches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.cal-switches .check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); min-height: var(--control); }

/* Both views are in the page; one is shown. Wide: the month, unless ?view=agenda. Phone: the agenda, unless ?view=month. */
.cal[data-view="agenda"] .cal-month, .cal[data-view="month"] .cal-agenda { display: none; }
.cal[data-view="auto"] .cal-agenda { display: none; }
.cal-bar[data-view="auto"] .cal-view-month { background: var(--btn); color: var(--btn-ink); }

.cal-grid { display: grid; border: 1px solid var(--line); border-radius: var(--r-12); overflow: hidden; background: var(--surface); }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head > div { padding: var(--space-2); text-align: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cal-cell { position: relative; min-width: 0; min-height: 7.5rem; padding: var(--space-1) var(--space-1) var(--space-2); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--surface); }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-week:last-child .cal-cell { border-bottom: 0; }
.cal-cell.other { background: var(--bg); }
.cal-cell.other .cal-num { color: var(--ink-3); }
.cal-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; min-height: 1.75rem; padding: 0 var(--space-1); border-radius: 999px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink); }
.cal-num:hover { background: var(--surface-2); text-decoration: none; }
.cal-cell.today .cal-num { background: var(--accent); color: var(--accent-ink); }
.cal-count { display: none; position: absolute; top: var(--space-1); right: var(--space-1); min-width: 1.25rem; padding: 0 var(--space-1); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: center; line-height: 1.25rem; }
.cal-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cal-chip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px var(--space-1); border-radius: 3px; border-left: 3px var(--cls-edge) var(--cls-ink); background: var(--cls-bg); color: var(--cls-ink); font-size: var(--text-xs); line-height: 1.4; }
.cal-chip:hover { text-decoration: none; filter: brightness(.96); }
.cal-chip:focus-visible, .cal-more:focus-visible, .cal-num:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-chip-kind { font-weight: var(--weight-semibold); }
.cal-more { display: block; padding: 0 var(--space-1); font-size: var(--text-xs); color: var(--ink-2); }

.cal-agenda h3 { font-size: var(--text-md); margin: var(--space-4) 0 var(--space-2); }
.cal-day-group.today h3 { color: var(--accent); }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cal-item { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--r-8); border-left: 4px var(--cls-edge) var(--cls-ink); background: var(--cls-bg); color: var(--ink); }
.cal-item-time { font-size: var(--text-sm); color: var(--ink-2); }
.cal-item-main { display: grid; gap: 2px; min-width: 0; }
.cal-item-title { font-weight: var(--weight-semibold); color: var(--ink); overflow-wrap: anywhere; }
.cal-item-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.cal-item .muted { color: var(--ink-2); }
.cal-past { margin-bottom: var(--space-3); }
.cal-past summary { cursor: pointer; font-weight: var(--weight-semibold); padding: var(--space-2) 0; }
.cal-feed form { margin-top: var(--space-2); }

/* Settings, My calendars: one row for each Calendly event type, a tick box and what it is for. */
.type-rows .type-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem); gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--line-2); }

/* Phones: the agenda is the default, the month is smaller (a day shows a number and how many things are on it, and opens its agenda), and the rows stack. */
@media (max-width: 640px) {
  .cal[data-view="auto"] .cal-month { display: none; }
  .cal[data-view="auto"] .cal-agenda { display: block; }
  .cal-bar[data-view="auto"] .cal-view-month { background: var(--surface); color: var(--ink); }
  .cal-bar[data-view="auto"] .cal-view-agenda { background: var(--btn); color: var(--btn-ink); }
  .cal-bar { flex-direction: column; align-items: stretch; }
  .cal-title { order: -1; }
  .cal-cell { min-height: 3.5rem; padding: var(--space-1); }
  .cal-chips, .cal-more { display: none; }
  .cal-count { display: block; }
  .cal-head > div { padding: var(--space-1); }
  .cal-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .type-rows .type-row { grid-template-columns: minmax(0, 1fr); }
}

/* Utilities: single-purpose, last in the file so they win over the component they sit on. Every size is a token. */
.m-0 { margin: 0; }
.my-0 { margin-block: 0; } .my-1 { margin-block: var(--space-1); } .my-2 { margin-block: var(--space-2); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.maxw-form { max-width: var(--measure-form); } .maxw-narrow { max-width: var(--measure-narrow); }
.w-full { width: 100%; } .flex-1 { flex: 1; } .contents { display: contents; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; } .ws-normal { white-space: normal; } .nowrap { white-space: nowrap; }
.strike { text-decoration: line-through; }
.fw-regular { font-weight: var(--weight-regular); } .fw-semibold { font-weight: var(--weight-semibold); }
.rot-90 { transform: rotate(90deg); } .rot-neg-90 { transform: rotate(-90deg); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.check-inline { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-4); font-weight: var(--weight-regular); }
.fieldset-plain { border: 0; padding: 0; }
.input-narrow { width: 9rem; }
.textarea-sm { min-height: 5rem; } .textarea-lg { min-height: 22rem; }
.row-end { border-bottom: 2px solid var(--line); }
.tree-list { margin: 2px 0 2px var(--space-4); padding: 0; }
.tree-nest { margin: 2px 0 2px var(--space-2); padding-left: var(--space-2); border-left: 2px solid var(--line); }

/* The assistant's cards in the chat: what it did (with Undo), what waits for a Confirm, a draft, a suggestion to apply (with Edit) */
.acards { display: grid; gap: var(--space-2); align-self: stretch; margin: var(--space-2) 0; }
.acards-all { align-items: center; }
.acard { display: grid; gap: var(--space-2); }
.acard.is-flagged { border-left-color: var(--warn); }
.acard.is-undone, .acard.is-cancelled, .acard.is-expired, .acard.is-dismissed, .acard.is-discarded { border-left-color: var(--line); }
.acard:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.acard-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.acard-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.acard-source { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; }
.acard-quote { font-style: italic; overflow-wrap: anywhere; }
.acard-rows { margin: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.acard-row { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr; gap: var(--space-2); }
.acard-row dt { color: var(--ink-2); font-weight: var(--weight-medium); }
.acard-row dd { margin: 0; overflow-wrap: anywhere; }
.acard-before, .acard-after { white-space: pre-wrap; }
.acard del { color: var(--ink-2); }
.acard ins { text-decoration: none; font-weight: var(--weight-semibold); }
.acard-notes { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.acard-notes .is-warn { color: var(--warn); font-weight: var(--weight-medium); }
.acard-note, .acard-status { margin: 0; }
.acard-edit { border-top: 1px solid var(--line); padding-top: var(--space-2); }
.acard-edit[hidden] { display: none; }
.acard-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-2); }
.acard-field { display: grid; gap: var(--space-1); align-content: start; }
@media (max-width: 40rem) { .acard-row { grid-template-columns: 1fr; gap: 0; } }

/* Contact cards: a person in a list is four lines (views/partials/contact-card.ejs); opening one shows the rest (views/people/card.ejs, public/js/card.js). */
.ccards-wrap { padding: 0; overflow: hidden; }
.cc-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-1) var(--space-3) var(--space-1) 0; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cc-sort { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; margin-left: auto; }
.cc-sort-link { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--r-6); color: var(--ink-2); font-size: var(--text-sm); }
.cc-sort-link:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.cc-sort-link[aria-current="true"] { color: var(--ink); font-weight: var(--weight-semibold); }
.cc-sort-link .ic { width: .75rem; height: .75rem; }
.cc-sort-link .cc-asc { transform: rotate(180deg); }
.ccards { list-style: none; margin: 0; padding: 0; container: ccards / inline-size; }
.ccard { --cc-select: 2.75rem; display: flex; flex-wrap: wrap; align-items: flex-start; border-bottom: 1px solid var(--line-2); }
.ccard:last-child { border-bottom: 0; }
.ccard.is-selected, .ccard.is-open { background: var(--surface-2); }
.ccard.is-selected { background: var(--accent-soft); }
.cc-select { flex: none; display: flex; justify-content: center; width: var(--cc-select, 2.75rem); padding-top: var(--space-4); margin: 0; }
.cc-bar .cc-select { padding-top: 0; min-height: var(--control); align-items: center; }
.cc-head { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(9rem, 1.3fr) minmax(7rem, 1fr) minmax(8rem, 1fr) minmax(9rem, 2fr) var(--space-5); gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3); background: none; border: 0; border-radius: var(--r-8); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.cc-head:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.cc-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cc-name { font-weight: var(--weight-semibold); font-size: var(--text-md); overflow-wrap: anywhere; }
.cc-desig { font-size: var(--text-sm); color: var(--ink-2); }
.cc-last { font-size: var(--text-xs); color: var(--ink-3); }
.cc-key { font-size: var(--text-sm); color: var(--ink); overflow-wrap: anywhere; }
.cc-key.is-danger { color: var(--danger); font-weight: var(--weight-semibold); }
.cc-key.is-warn { color: var(--warn); font-weight: var(--weight-medium); }
.cc-chev { width: 1.1rem; height: 1.1rem; color: var(--ink-3); transition: transform .15s ease; justify-self: end; }
.ccard.is-open .cc-chev { transform: rotate(180deg); }
.cc-detail { flex: 1 0 100%; padding: 0 var(--space-4) var(--space-4) var(--space-3); }
.ccard:has(> .cc-select) > .cc-detail { padding-left: calc(var(--cc-select) + var(--space-3)); }
.cc-detail[hidden] { display: none; }
.cc-body { display: grid; gap: var(--space-3); max-width: var(--measure-prose); }
.cc-summary { margin: 0; }
.cc-next .rem { padding: var(--space-2) 0; }
.cc-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cc-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cc-more { flex: 1 1 16rem; min-width: 0; }
/* A narrow list (a phone, or a half-width card on Home) stacks the four lines; the list's own width decides, not the screen's. */
@container ccards (max-width: 46rem) {
  .cc-head { grid-template-columns: minmax(0, 1fr) var(--space-5); grid-template-areas: "name chev" "desig chev" "last chev" "key chev"; align-items: start; }
  .cc-name { grid-area: name; } .cc-desig { grid-area: desig; } .cc-last { grid-area: last; } .cc-key { grid-area: key; } .cc-chev { grid-area: chev; align-self: center; }
}
@media (max-width: 767px) {
  .cc-bar .cc-sort { margin-left: 0; }
  .cc-actions .btn { flex: 1 1 5rem; }
}

/* The contacts list's row is Name, Type, Status, Last contact (CR-07); the task line is inside the open card. */
.ccards--list .cc-head { grid-template-columns: minmax(9rem, 1.3fr) minmax(8rem, 1.2fr) minmax(9.5rem, 1fr) minmax(8rem, 1fr) var(--space-5); }
.cc-status { font-size: var(--text-sm); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.cc-desig .badge + .badge { margin-left: 0; }
.cc-name.is-nameless { color: var(--ink-2); font-weight: var(--weight-medium); }
.cc-nonote { font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--ink-3); }
@container ccards (max-width: 46rem) {
  .ccards--list .cc-head { grid-template-columns: minmax(0, 1fr) var(--space-5); grid-template-areas: "name chev" "desig chev" "status chev" "last chev"; }
  .ccards--list .cc-status { grid-area: status; }
}
.cc-from { margin: 0; }
/* "No interest form yet" and its button (views/partials/form-prompt.ejs): under the glance on the person page, and inside an open card. */
.form-prompt { margin: var(--space-3) 0; }
.cc-body .form-prompt { margin: var(--space-2) 0; }
.form-prompt .field-hint { margin: var(--space-1) 0 0; }
/* People, Possible duplicates (views/people/duplicates.ejs): the two records of a pair side by side, under their reasons. A plain list, not .list-plain, whose links are the ink colour and would turn the Compare button's text the accent colour. */
.dup-list { list-style: none; padding: 0; margin: 0; }
.dup-pair .eyebrow { margin: 0; }
.dup-pair .h3 { margin: var(--space-1) 0; }
/* The two buttons of a pair sit a finger's width apart on a phone (Not the same is not a button to hit by accident, and is undone from the line it leaves). */
.dup-actions { gap: var(--space-3) var(--space-4); }
.dup-away { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.dup-away .inline-form { margin: 0; }
/* The "Ask for the form" box above the Gmail correspondents table (views/settings/gmail-correspondents.ejs). */
.gmail-ask { margin: var(--space-3) 0; }
.cc-status-block { display: grid; gap: var(--space-1); }
.cc-status-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.cc-status-block p { margin: 0; }
.cc-keyline { margin: var(--space-1) 0 0; }
.cc-keyline.is-danger { color: var(--danger); font-weight: var(--weight-semibold); }
.cc-keyline.is-warn { color: var(--warn); font-weight: var(--weight-medium); }
.status-more { margin-top: var(--space-1); }
.status-form { display: grid; gap: var(--space-2); max-width: 20rem; margin-top: var(--space-2); }
.status-hints { margin: 0; display: grid; gap: var(--space-1); }
.status-hints dt { margin: var(--space-1) 0 0; }
.status-hints dd { margin: 0; }
.form-prompt-line { margin: 0; }

/* The Contacts page: the line under the stage chips, the view toggle and download, the Table view (CR-14). */
.stage-note { margin: calc(var(--space-2) * -1) 0 var(--space-3); max-width: var(--measure-prose); }
/* On a phone the In touch sentence is a link away (/help#tabs): the first screen is for the people. */
@media (max-width: 640px) { .stage-note-text, .export-hint, .view-hint { display: none; } }
.head-from { margin-top: var(--space-1); max-width: var(--measure-prose); }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.list-tools .pick-bar { margin-bottom: 0; }
.export-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.export-form .btn .ic { width: 1rem; height: 1rem; transform: rotate(90deg); }
.view-toggle { display: none; }
@media (min-width: 1024px) { .view-toggle { display: flex; } }
/* A list already drawn as the table (a shared link, a saved view) must still offer the way back to cards on a screen too narrow for the toggle. */
.view-toggle.is-table { display: flex; }
/* The Contacts table (views/people/_table.ejs, public/js/contacts-table.js). Fixed layout: each <col> carries its width as --w (pixels) and the table's own width is their sum (--tw) plus
   the select column, so a column is exactly as wide as its person made it, and a long address is cut with an ellipsis (the whole text is still there for a screen reader, and in the cell's title).
   The select box and Name stay in view while the rest scrolls sideways: position sticky with a solid background (--ct-bg, which follows the row's hover and selected tints so nothing
   shows through) and a line on Name's right edge. A heading's right edge carries the resize handle the script adds; dragging a heading moves the column (a thin line shows where it will land). */
/* No side padding: the frozen columns stick to the wrapper's own edge, so a column scrolling under them is never seen through a gap beside them. The scroll padding is their width (--nw is Name's), so a heading or link the keyboard moves to is scrolled out from under them and never left hidden behind. */
.contacts-table { margin-top: 0; padding-inline: 0; position: relative; --ct-bg: var(--surface); scroll-padding-left: calc(2.75rem + var(--nw, 200) * 1px + var(--space-2)); }
.contacts-table:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.contacts-table table { table-layout: fixed; width: calc(var(--tw, 1700) * 1px + 2.75rem); }
.contacts-table col[data-col] { width: calc(var(--w, 160) * 1px); }
.contacts-table col.ct-select { width: 2.75rem; }
.contacts-table td, .contacts-table th { vertical-align: middle; padding-inline: var(--space-2); }
.contacts-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacts-table th { white-space: normal; position: relative; user-select: none; }
.contacts-table th[data-col]:not([data-col="name"]) { cursor: grab; }
.contacts-table td a:focus-visible, .contacts-table th a:focus-visible { outline-offset: -2px; }
.contacts-table th.ct-select, .contacts-table td.ct-select { width: 2.75rem; padding: 0; position: sticky; left: 0; z-index: 2; background: var(--ct-bg); }
.contacts-table th[data-col="name"], .contacts-table td[data-col="name"] { position: sticky; left: 2.75rem; z-index: 2; background: var(--ct-bg); box-shadow: inset -1px 0 0 var(--line-strong); }
.contacts-table tbody tr:hover, .contacts-table tbody tr:focus-within { --ct-bg: var(--surface-2); }
.contacts-table tbody tr.is-selected { --ct-bg: var(--accent-soft); }
.contacts-table .cc-select { padding-top: 0; min-height: 2.5rem; align-items: center; }
.contacts-table .th-link { color: inherit; display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.contacts-table .th-link:hover { color: var(--ink); text-decoration: none; }
.contacts-table .th-link .ic { width: .75rem; height: .75rem; }
.contacts-table .th-link .cc-asc { transform: rotate(180deg); }
.contacts-table th[aria-sort] .th-link { color: var(--ink); }
.contacts-table tr.is-selected td { background: var(--accent-soft); }
.contacts-table th.is-dragging { opacity: .55; }
.ct-grip { position: absolute; top: 0; right: 0; bottom: 0; width: .75rem; display: flex; justify-content: flex-end; cursor: col-resize; touch-action: none; z-index: 1; }
.ct-grip::after { content: ""; width: 1px; margin-block: var(--space-2); background: var(--line-strong); }
.ct-grip:hover::after, .ct-grip.is-active::after { width: 3px; background: var(--accent); }
.ct-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ct-grip:focus-visible::after { width: 3px; background: var(--accent); }
.ct-drop { position: absolute; top: 0; width: 3px; margin-left: -1px; background: var(--accent); pointer-events: none; z-index: 4; }
body.ct-dragging, body.ct-dragging * { cursor: grabbing !important; user-select: none; }
/* In a high-contrast mode backgrounds are dropped, which would take the handle's line, the landing line and Name's edge with them. */
@media (forced-colors: active) {
  .ct-grip::after, .ct-drop { forced-color-adjust: none; background: CanvasText; }
  .contacts-table th[data-col="name"], .contacts-table td[data-col="name"] { border-right: 1px solid CanvasText; }
}
.ct-panel { margin-bottom: var(--space-1); }
.ct-panel[open] { padding-bottom: var(--space-3); }
.ct-panel > p { max-width: var(--measure-prose); }
.ct-order { max-width: 36rem; margin-block: var(--space-3); }
.ct-order li { align-items: center; }
/* The status line sits beside the Columns button, out of the flow, so a saved or moved message never pushes the table down while someone is working on it. */
.ct { position: relative; }
.ct-status { position: absolute; top: var(--space-2); left: 6rem; right: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ct-panel > summary { width: max-content; }
/* On a phone the table is drawn as cards (public/js/app.js, table.cards): it must not keep the width a table needs, nothing is frozen or clipped, the column widths and handles and the Columns panel
   have no place, the header row's sort links (which would stay in the tab order, off screen) are gone, and the select-all box stays where it can be seen. Sorting is on the Cards view, one press away. */
@media (max-width: 640px) {
  .contacts-table table.cards { width: auto; table-layout: auto; }
  .contacts-table table.cards col { display: none; }
  .contacts-table table.cards td { overflow: visible; text-overflow: clip; white-space: normal; }
  .contacts-table table.cards th.ct-select, .contacts-table table.cards td.ct-select, .contacts-table table.cards th[data-col="name"], .contacts-table table.cards td[data-col="name"] { position: static; box-shadow: none; z-index: auto; background: transparent; }
  .contacts-table table.cards thead { position: static; display: block; }
  .contacts-table table.cards thead tr { display: flex; align-items: center; border: 0; padding: 0 0 var(--space-2); margin: 0; background: transparent; }
  .contacts-table table.cards thead th { display: none; }
  .contacts-table table.cards thead th.ct-select { display: flex; align-items: center; width: auto; padding: 0; border: 0; }
  .contacts-table { padding-inline: var(--card-pad); }
  .ct-panel, .ct-status, .ct-grip { display: none; }
}
.ct-name { font-weight: var(--weight-semibold); }
.ct-name.is-nameless { color: var(--ink-2); font-weight: var(--weight-medium); }

/* The person page, in the order of need: what they are to us under the name, then the glance (owner, followers, last contact, next action). */
.rec-desig { margin: 0 0 var(--space-1); color: var(--accent); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.glance { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.glance-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; flex: 1 1 28rem; }
.glance-list dt { color: var(--ink-3); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--weight-semibold); }
.glance-list dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.glance-danger { color: var(--danger); font-weight: var(--weight-semibold); }
.glance-warn { color: var(--warn); font-weight: var(--weight-medium); }
.glance-forms { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
.glance-owner { flex: 1 1 100%; }
.rec-from { margin: 0 0 var(--space-1); }
.rec-hero h1.is-nameless { color: var(--ink-2); }