/*
* personal-crm app styles: the "Órbita" look from .unlk-sdlc/wireframes (login, home, person).
* Link after tokens.css:
*
*
* Rules for this file:
* - Every colour, font, type size, weight, space, radius, shadow and control size is a
* tokens.css variable. No colour literals and no custom properties of its own. Literals are
* only 0, hairlines (1px to 2px), percentages, layout widths (max-widths, grid and
* flex track sizes) and the one breakpoint.
* - Written for the app, not copied from wireframe.css (that file is throwaway); class names
* differ from the wireframe's .wf-* on purpose.
* - Fonts are self-hosted under /static/fonts/ (OFL). No font CDN.
* - Phone (up to 999px wide): one column, no sideways scroll, every button and link at
* least 44px tall (--touch-min).
*
* Class vocabulary for the templates:
* page .topbar .brand .search .toplink .signout .laptop-only .phone-only .visually-hidden .icon .num
* buttons .button (+ --primary --ghost --danger --danger-solid --small) .icon-button .actions
* home .home .orbit .orbit-ring .orbit-you .orbit-group(--loose, [aria-current]) .faces
* .orbit-caption .orbit-note .group-grid .people .people-counts .count-big .cadence-line
* .filter-line .letter-jump .letter-off .person-cards .person-card .person-card-name
* .person-card-sub .person-card-when(--never) .person-card-groups(--none) .person-card-match
* .person-list .person-row .person-row-text .person-row-name .person-row-sub
* .person-row-groups(--none) .related .related-more .pager .pager-off .pager-pages .pager-gap
* .avatar(--sm) .empty .empty-glyph .count
* marker .inferred (a stored "(inferred)" value: dashed question mark, tip from data-tip)
* alerts .alert (+ --success --warning --danger --info), title in
* person .modal-scrim .modal .modal-head .modal-sub .modal-summary .modal-body .modal-foot
* .contact-chips .contact-chip .birthday .groups-line .tabs .notes(--archived --hidden)
* .note .note-head .kind (+ --meeting --interaction --note --archived --hidden) .subhead
* .rel-cards .rel-card(--suggested) .confirm-list
* forms .form .form-grid .field(--full, .is-invalid) .label .optional .input .select
* .textarea .help .field-error .segmented .eyebrow .handle-rows .handle-row
* .chips .chip .picker .picker-menu
* login .login .login-mark .login-title .login-sub .login-card
* settings .settings .page-title .page-sub .settings-section .facts .env(--prod) .steps .cmd
* hidden .hidden-list .hidden-row (the Hidden page; banners are .alert--info / --success)
*/
/* ---------- fonts ---------- */
@font-face { font-family: "Sora"; font-weight: 600 700; font-style: normal; font-display: swap;
src: url("fonts/sora-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400 800; font-style: normal; font-display: swap;
src: url("fonts/manrope-latin-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
font: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
[hidden] { display: none !important; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.icon { width: var(--space-5); height: var(--space-5); flex: none; stroke: currentColor; fill: none;
stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase; color: var(--text-muted); }
.count { font: var(--weight-medium) var(--text-xs) var(--font-mono); background: var(--surface-3); color: var(--text);
border-radius: var(--radius-pill); padding: calc(var(--space-1) / 2) var(--space-2); }
/* ---------- header ---------- */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-8); }
.brand { font: var(--weight-bold) var(--text-lg)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-display);
color: var(--text); white-space: nowrap; }
.brand:hover { color: var(--text); text-decoration: none; }
.search { flex: 1 1 280px; display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--control-h);
margin: 0; padding: 0 var(--space-4); background: var(--surface); border: 1px solid transparent; border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm); color: var(--text-muted); }
.search input { flex: 1; min-width: 0; align-self: stretch; border: 0; background: transparent; color: var(--text); outline: none; }
.search input::placeholder { color: var(--text-muted); }
.search:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.signout { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-2);
color: var(--text-muted); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.signout:hover { color: var(--text); text-decoration: none; }
/* a Sign out form button looks like the link */
button.signout { border: 0; background: transparent; cursor: pointer; }
.toplink { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); padding: 0 var(--space-2);
color: var(--text-muted); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.toplink:hover { color: var(--text); text-decoration: none; }
.toplink[aria-current="page"] { color: var(--accent-hover); }
.toplink .icon { width: var(--space-4); height: var(--space-4); }
/* ---------- buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h);
padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface);
color: var(--text); font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); white-space: nowrap; cursor: pointer;
text-decoration: none; }
.button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.button--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.button--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.button--ghost:hover { background: var(--surface-3); color: var(--text); }
.button--danger { background: transparent; border-color: transparent; color: var(--danger); }
.button--danger:hover { background: var(--danger-soft); color: var(--danger); }
.button--danger-solid { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.button--danger-solid:hover { background: var(--danger); color: var(--on-accent); filter: brightness(0.92); }
.button--small { min-height: var(--space-8); padding: 0 var(--space-3); font-size: var(--text-xs); }
.button--block { width: 100%; }
.icon-button { display: inline-grid; place-items: center; width: var(--touch-min); height: var(--touch-min); flex: none; padding: 0;
border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); cursor: pointer; }
.icon-button:hover { background: var(--danger-soft); color: var(--danger); text-decoration: none; }
.icon-button--back:hover { background: var(--surface-3); color: var(--text); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* ---------- home: orbit + people panel ---------- */
.home { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); align-items: start;
max-width: 1280px; margin: 0 auto; padding: var(--space-2) var(--space-8) var(--space-12); }
/* The orbit is drawn for a 640 px box and scaled as one picture: crm/web.py places and sizes the circles in
percent of the orbit's width (IF-03), and every size inside it is a design pixel, --opx, times the
orbit's own width / 640, so a narrower orbit shrinks its text with its circles (R-01, R-02, IF-05).
A browser without container query units keeps --opx at 1px. Its height comes from the template's
aspect-ratio; the square one here is the empty state's. */
.orbit { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1; margin: 0 auto; container-type: inline-size; --opx: 1px; }
@supports (width: 1cqw) { .orbit { --opx: calc(100cqw / 640); } }
/* the ring's and "you"'s top come from the template; 50% is the empty state's */
.orbit-ring { position: absolute; left: 50%; top: 50%; width: 74%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%);
border: calc(1.5 * var(--opx)) solid var(--border-strong); border-radius: var(--radius-avatar); }
.orbit-you { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: calc(76 * var(--opx)); height: calc(76 * var(--opx));
display: grid; place-items: center; border-radius: var(--radius-avatar); background: var(--text); color: var(--surface);
font: var(--weight-bold) calc(13 * var(--opx))/1 var(--font-display); }
/* each group's left / top / width comes from the template; aspect-ratio keeps it round */
.orbit-group { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; align-content: center;
height: auto; aspect-ratio: 1;
gap: calc(4 * var(--opx)); padding: calc(8 * var(--opx)); border-radius: var(--radius-avatar); background: var(--surface);
box-shadow: var(--shadow-md); color: var(--text); text-align: center; transition: box-shadow 0.15s; }
.orbit-group:hover { color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm), 0 0 0 calc(2 * var(--opx)) var(--accent); }
.orbit-group b { font: var(--weight-bold) calc(14 * var(--opx))/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-display); }
/* the name: two lines at most, in the box crm/web.py computes from this circle's chord at the name's line (--name,
IF-03); it breaks at spaces, and inside a word only when that word is wider than the box. The full name is the title */
.orbit-group > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
text-overflow: ellipsis; overflow-wrap: anywhere; max-width: calc(var(--name) * var(--opx)); }
/* a one-word name is one line, never split, and ends in "…" only when wider than its box (finding-01) */
.orbit-group > b.orbit-word { display: block; -webkit-line-clamp: none; line-clamp: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orbit-group small { font: var(--weight-medium) calc(12 * var(--opx)) var(--font-mono); color: var(--text-muted); white-space: nowrap; }
/* the count's one 16 px line, as ORBIT_STACK_REST counts it (the caption's count keeps its own) */
.orbit-group > small { line-height: calc(16 * var(--opx)); }
.orbit-group[aria-current="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.orbit-group[aria-current="true"] small { color: var(--accent-soft); }
.orbit-group[aria-current="true"] .faces .avatar { border-color: var(--accent); }
.orbit-group--loose { background: transparent; box-shadow: none; border: calc(1.5 * var(--opx)) dashed var(--warning-border); }
.orbit-group--loose small { color: var(--warning); }
/* "Not in a group": the circle shrinks with its count, so its words hang wholly below it, ORBIT_CAPTION_GAP
under its edge, which crm/web.py keeps clear of its neighbours; the faces stay inside (R-11) */
.orbit-caption { position: absolute; top: calc(100% + 8 * var(--opx)); left: 50%; transform: translateX(-50%); display: grid;
justify-items: center; gap: calc(2 * var(--opx)); padding: calc(4 * var(--opx)) calc(12 * var(--opx)); border-radius: var(--radius-pill);
background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); white-space: nowrap; }
.orbit-group .orbit-caption b { font: var(--weight-bold) calc(13 * var(--opx))/var(--leading-tight) var(--font-display); }
.orbit-group .orbit-caption small { color: var(--warning); }
.orbit-group[aria-current="true"] .orbit-caption { background: var(--accent); color: var(--on-accent); }
.orbit-group[aria-current="true"] .orbit-caption small { color: var(--accent-soft); }
.faces { display: flex; padding-left: calc(4 * var(--opx)); }
.faces .avatar { width: calc(24 * var(--opx)); height: calc(24 * var(--opx)); margin-left: calc(-4 * var(--opx));
border: calc(2 * var(--opx)) solid var(--surface); box-shadow: none; background: var(--surface-3); font-size: calc(9 * var(--opx)); }
/* right under the orbit, whose box ends just under the lowest thing it draws (R-08), and centred on it */
.orbit-note { max-width: 640px; margin: var(--space-2) auto 0; text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.group-grid { display: none; }
.people { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0; }
.people-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); padding: var(--space-5) var(--space-5) var(--space-3); }
.count-big { font: var(--weight-bold) var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.count-big small { margin-left: var(--space-1); font: var(--weight-medium) var(--text-xs) var(--font-sans); color: var(--text-muted); letter-spacing: 0; }
.cadence-line { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); margin: 0 var(--space-5) var(--space-3);
padding: 0 var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text-muted); font-size: var(--text-sm); }
.cadence-line:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.cadence-line b { color: var(--warning); font-weight: var(--weight-semibold); }
.cadence-line .icon:last-child { margin-left: auto; }
.filter-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-5) var(--space-3);
border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-muted); }
.filter-line b { color: var(--text); }
/* A to Z: "#" then A to Z, 27 entries in two rows of 14 on a laptop (R-06, R-07) */
.letter-jump { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; padding: 0 var(--space-5) var(--space-2); }
.letter-jump a, .letter-off { display: grid; place-items: center; min-height: calc(var(--space-8) + var(--space-1)); border-radius: var(--radius-sm);
font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); color: var(--text); }
.letter-jump a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.letter-jump a[aria-current="true"] { background: var(--accent-soft); color: var(--accent-hover); font-weight: var(--weight-bold); }
/* nobody in this list starts with it: faded, not a link; its title says why (R-07) */
.letter-off { color: var(--text-subtle); cursor: default; }
/* six cards a page, two columns on a laptop so a page fits 1280 x 800 beside the orbit (R-01, R-02, R-04) */
.person-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0;
padding: var(--space-1) var(--space-5) var(--space-3); list-style: none; }
.person-cards > li { min-width: 0; }
/* the avatar holds the first column; name, sub, last contact, groups and match stack in the second */
.person-card { display: grid; grid-template-columns: var(--avatar-md) minmax(0, 1fr); align-content: start; column-gap: var(--space-3);
row-gap: calc(var(--space-1) / 2); height: 100%; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface);
box-shadow: 0 0 0 1px var(--border); color: var(--text); }
.person-card:hover { background: var(--surface-2); box-shadow: 0 0 0 1.5px var(--accent); color: var(--text); text-decoration: none; }
.person-card > .avatar { grid-row: 1 / span 3; align-self: start; }
.person-card > :not(.avatar) { grid-column: 2; min-width: 0; }
.person-card-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.person-card-sub, .person-card-groups, .person-card-match { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.person-card-sub { font-size: var(--text-sm); color: var(--text-muted); }
/* a guess keeps its tip: the line wraps instead of clipping the marker's tip under the ellipsis */
.person-card-sub:has(.inferred) { overflow: visible; white-space: normal; }
.person-card-when { display: flex; align-items: center; gap: var(--space-1); font: var(--weight-medium) var(--text-xs) var(--font-mono);
font-variant-numeric: tabular-nums; color: var(--text-muted); }
.person-card-when .icon { width: var(--space-3); height: var(--space-3); }
.person-card-when--never { color: var(--text-subtle); font-style: italic; }
.person-card-groups { font-size: var(--text-xs); color: var(--accent-hover); }
.person-card-groups--none { color: var(--warning); }
.person-card-match { font-size: var(--text-xs); color: var(--text-muted); }
.person-card-match b { color: var(--text); font-weight: var(--weight-semibold); }
/* the overdue list and the Hidden page keep the row */
.person-list { list-style: none; margin: 0; padding: 0; }
.person-row { display: grid; grid-template-columns: var(--avatar-md) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
min-height: calc(var(--space-16) - var(--space-1)); padding: var(--space-2) var(--space-5); border-top: 1px solid var(--border); color: var(--text); }
.person-row:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.person-row-text { min-width: 0; }
.person-row-name, .person-row-sub, .person-row-groups { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-row-name { font-weight: var(--weight-semibold); }
.person-row-sub { font-size: var(--text-sm); color: var(--text-muted); }
.person-row-groups { font-size: var(--text-xs); color: var(--accent-hover); }
.person-row-groups--none { color: var(--warning); }
.avatar { display: grid; place-items: center; flex: none; width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--radius-avatar);
background: var(--avatar-bg); color: var(--avatar-text); box-shadow: 0 0 0 1.5px var(--border-strong);
font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); }
.avatar--sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: var(--text-xs); }
.related { display: flex; align-items: center; justify-content: flex-end; padding-left: var(--space-2); }
.related .avatar { margin-left: calc(-1 * var(--space-2)); border: 2px solid var(--surface); box-shadow: none; background: var(--surface-3); }
.related-more { margin-left: var(--space-1); font: var(--weight-medium) var(--text-xs) var(--font-mono); color: var(--text-muted); }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3);
padding: var(--space-2) var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-muted); }
.pager a, .pager-off { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); padding: 0 var(--space-2); }
.pager-off { color: var(--text-subtle); }
/* numbered pager: the first page, the current page's neighbours, the last, "…" for each gap (R-05) */
.pager-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; }
.pager-pages a { justify-content: center; min-width: calc(var(--space-8) + var(--space-1)); min-height: calc(var(--space-8) + var(--space-1));
padding: 0 var(--space-1); border-radius: var(--radius-md); font: var(--weight-medium) var(--text-sm) var(--font-mono);
font-variant-numeric: tabular-nums; color: var(--text); }
.pager-pages a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.pager-pages a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.pager-gap { padding: 0 var(--space-1); color: var(--text-subtle); }
/* ---------- the inferred marker: a dashed question mark, its words in the tip, never colour alone (R-10) ---------- */
.inferred { position: relative; display: inline-grid; place-items: center; width: var(--space-4); height: var(--space-4);
margin-left: var(--space-1); vertical-align: middle; color: var(--text-muted); cursor: help; }
.inferred .icon { width: var(--space-4); height: var(--space-4); }
.inferred:hover::after, .inferred:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% + var(--space-1)); left: 50%;
transform: translateX(-50%); z-index: 5; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--text);
color: var(--surface); box-shadow: var(--shadow-md); font: var(--weight-medium) var(--text-xs)/var(--leading-tight) var(--font-sans);
font-style: normal; white-space: nowrap; pointer-events: none; }
.modal-sub:has(.inferred) { overflow: visible; white-space: normal; }
.rel-card span .inferred { display: inline-grid; margin-top: 0; color: var(--text-muted); } /* stays on the label's line */
/* ---------- empty / not-found ---------- */
.empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); text-align: center; }
.empty .empty-glyph { width: var(--space-10); height: var(--space-10); color: var(--text-subtle); stroke-width: 1.5; }
.empty h2 { margin: var(--space-2) 0 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.empty p { max-width: 40ch; margin: 0; color: var(--text-muted); }
.empty .actions { justify-content: center; margin-top: var(--space-3); }
/* ---------- alerts ---------- */
.alert { display: grid; grid-template-columns: var(--space-5) minmax(0, 1fr); align-items: start; gap: var(--space-3);
margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid; border-left-width: calc(var(--space-1) - 1px);
border-radius: var(--radius-md); color: var(--text); font-size: var(--text-sm); }
.alert b { display: block; }
.alert--success { background: var(--success-soft); border-color: var(--success-border); border-left-color: var(--success); }
.alert--success .icon { color: var(--success); }
.alert--warning { background: var(--warning-soft); border-color: var(--warning-border); border-left-color: var(--warning); }
.alert--warning .icon { color: var(--warning); }
.alert--danger { background: var(--danger-soft); border-color: var(--danger-border); border-left-color: var(--danger); }
.alert--danger .icon { color: var(--danger); }
.alert--info { background: var(--accent-soft); border-color: var(--border-strong); border-left-color: var(--accent); }
.alert--info .icon { color: var(--accent); }
/* ---------- person modal: over home, one modal, never a modal on a modal ---------- */
body:has(.modal-scrim) { overflow: hidden; }
.modal-scrim { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: center; align-items: flex-start;
padding: var(--space-10) var(--space-4); overflow-y: auto; background: color-mix(in srgb, var(--text) 55%, transparent); }
.modal { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 640px;
max-height: calc(100vh - 2 * var(--space-10)); margin: 0; padding: 0; border: 0; border-radius: var(--radius-lg);
background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.modal-head > div { flex: 1; min-width: 0; }
.modal-head h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.modal-sub { margin: calc(var(--space-1) / 2) 0 0; overflow: hidden; color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; text-overflow: ellipsis; }
.modal-summary { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-2); }
.modal-summary .alert { margin-bottom: 0; }
/* only the body scrolls; head, summary, tabs and footer stay put */
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5); }
.modal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface-2); }
.modal-foot .actions { margin-left: auto; }
.contact-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.contact-chip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: calc(var(--control-h) - var(--space-2));
padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--surface-2); box-shadow: 0 0 0 1px var(--border);
color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.contact-chip:hover { color: var(--text); text-decoration: none; box-shadow: 0 0 0 1.5px var(--accent); }
.contact-chip .icon { width: var(--space-4); height: var(--space-4); color: var(--accent); }
.contact-chip span { min-width: 0; overflow: hidden; font: var(--weight-regular) var(--text-xs) var(--font-mono); color: var(--text-muted);
white-space: nowrap; text-overflow: ellipsis; }
.birthday { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.birthday .icon { color: var(--accent); }
.birthday span { color: var(--text-muted); }
.groups-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.groups-line a { color: var(--accent-hover); font-weight: var(--weight-semibold); }
.tabs { display: flex; gap: var(--space-1); padding: 0 var(--space-5); border-bottom: 1px solid var(--border); }
.tabs a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); margin-bottom: -1px; padding: 0 var(--space-3);
border-bottom: 2px solid transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--accent-hover); border-bottom-color: var(--accent); }
.notes { list-style: none; margin: 0; padding: 0; }
.note { display: grid; grid-template-columns: calc(var(--space-16) + var(--space-10)) minmax(0, 1fr); gap: var(--space-4);
padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.note:first-child { border-top: 0; padding-top: 0; }
.note time { padding-top: var(--space-1); font: var(--text-xs) var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.note p { margin: var(--space-2) 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.note-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.note-head .button, .note-head form:last-child { margin-left: auto; }
.notes--archived .note p { color: var(--text-muted); }
.notes--hidden .note p { color: var(--text-muted); }
.kind { display: inline-flex; align-items: center; min-height: var(--space-6); padding: 0 var(--space-2); border-radius: var(--radius-pill);
font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.kind--meeting { background: var(--accent-soft); color: var(--accent-hover); }
.kind--interaction { background: var(--surface-3); color: var(--text); }
.kind--note { border: 1px solid var(--border-strong); color: var(--text-muted); }
.kind--archived { background: var(--surface-3); color: var(--text-muted); }
/* the hidden mark: on a name, a note and a form title; dashed so it never reads as a note kind */
.kind--hidden { gap: var(--space-1); border: 1px dashed var(--border-strong); background: var(--surface-3); color: var(--text-muted); vertical-align: middle; }
.kind--hidden .icon { width: var(--space-3); height: var(--space-3); }
.subhead { margin: var(--space-4) 0 var(--space-2); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.rel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rel-card { display: grid; grid-template-columns: var(--avatar-sm) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
min-height: var(--touch-min); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--border);
border-radius: var(--radius-lg); background: var(--surface); color: var(--text); }
.rel-card > span { min-width: 0; }
.rel-card a { color: var(--text); }
.rel-card b { display: block; overflow: hidden; font-weight: var(--weight-semibold); white-space: nowrap; text-overflow: ellipsis; }
.rel-card span span { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.rel-card--suggested { border-style: dashed; background: var(--surface-2); }
.confirm-list { margin: 0; padding-left: var(--space-5); color: var(--text-muted); }
/* ---------- hidden page ---------- */
.hidden-list { list-style: none; margin: 0; padding: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.hidden-row { display: grid; grid-template-columns: var(--avatar-md) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
min-height: calc(var(--space-16) - var(--space-1)); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.hidden-row:first-child { border-top: 0; }
.hidden-row > span { min-width: 0; }
.hidden-row a:not(.button) { color: var(--text); font-weight: var(--weight-semibold); }
.hidden-list > .note { padding: var(--space-4); }
.hidden-list > .note:first-child { padding-top: var(--space-4); }
/* ---------- forms ---------- */
.form { display: grid; gap: var(--space-5); margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.form-grid > .eyebrow { grid-column: 1 / -1; margin-top: var(--space-2); }
.field { display: grid; align-content: start; gap: var(--space-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.field--full { grid-column: 1 / -1; }
.label { padding: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.optional { color: var(--text-muted); font-weight: var(--weight-regular); }
.input, .select, .textarea { width: 100%; min-height: var(--control-h); padding: 0 var(--space-3); border: 1px solid var(--border-strong);
border-radius: var(--radius-md); background: var(--surface); color: var(--text); }
.textarea { min-height: calc(var(--space-16) * 2 + var(--space-3)); padding: var(--space-3); resize: vertical; line-height: var(--leading-normal); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.help { color: var(--text-muted); font-size: var(--text-xs); }
.field.is-invalid .input, .field.is-invalid .textarea, .input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.input--taken { border-color: var(--warning); }
.field-error { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--danger); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.field-error .icon { width: var(--space-4); height: var(--space-4); }
.segmented { display: inline-flex; justify-self: start; width: max-content; max-width: 100%; overflow: hidden;
border: 1px solid var(--border-strong); border-radius: var(--radius-pill); }
.segmented label { position: relative; display: inline-flex; align-items: center; min-height: calc(var(--control-h) - var(--space-2));
padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--accent-soft); color: var(--accent-hover); }
.segmented label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.handle-rows { display: grid; grid-column: 1 / -1; gap: var(--space-2); }
.handle-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--space-2); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--space-8); padding: 0 var(--space-1) 0 var(--space-3);
border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text); font-size: var(--text-xs); font-weight: var(--weight-medium);
white-space: nowrap; }
.chip .icon-button { width: var(--space-6); height: var(--space-6); }
.picker { position: relative; flex: 1 1 200px; min-width: 0; }
.picker .input { border-style: dashed; border-radius: var(--radius-pill); }
.picker-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 5; margin: 0; padding: var(--space-1);
list-style: none; border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); }
.picker-menu li { display: grid; grid-template-columns: var(--avatar-sm) minmax(0, 1fr); align-items: center; gap: var(--space-2);
min-height: var(--touch-min); padding: var(--space-2); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; }
.picker-menu li[aria-selected="true"], .picker-menu li:hover { background: var(--accent-soft); }
.picker-menu small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
/* ---------- login ---------- */
.login { display: grid; gap: var(--space-3); max-width: 400px; margin: 0 auto; padding: var(--space-16) var(--space-5) var(--space-12); }
.login-mark { display: block; width: calc(var(--avatar-lg) + var(--space-2)); height: calc(var(--avatar-lg) + var(--space-2)); margin: 0 auto var(--space-2); }
.login-title { margin: 0 0 var(--space-1); text-align: center; font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.login-sub { margin: 0 0 var(--space-5); text-align: center; color: var(--text-muted); }
.login .alert { margin-bottom: 0; }
.login-card { gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.login-card .help { margin: 0; }
/* ---------- settings: one column under the header ---------- */
.settings { max-width: 640px; margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-12); }
.page-title { margin: 0 0 var(--space-1); font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.page-sub { margin: 0 0 var(--space-6); color: var(--text-muted); }
.settings-section { display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.settings-section:first-of-type { margin-top: var(--space-2); }
.settings-section > h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); }
.settings-section > h3 { margin: var(--space-2) 0 0; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.settings-section > p { margin: 0; color: var(--text-muted); }
.settings-section .alert { margin-bottom: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; overflow: hidden;
border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.facts > div { margin: 0 -1px -1px 0; padding: var(--space-3) var(--space-4); border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border); }
.facts dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase; color: var(--text-muted); }
.facts dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.env { display: inline-flex; align-items: center; padding: calc(var(--space-1) / 2) var(--space-3); border-radius: var(--radius-pill);
background: var(--surface-3); color: var(--text); font: var(--weight-medium) var(--text-xs) var(--font-mono); }
.env--prod { background: var(--accent-soft); color: var(--accent-hover); }
.steps { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.steps li::marker { color: var(--text-muted); font: var(--text-xs) var(--font-mono); }
.steps code { padding: 1px var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
font: var(--text-sm)/var(--leading-normal) var(--font-mono); overflow-wrap: anywhere; }
.steps .cmd { display: block; margin-top: var(--space-1); padding: var(--space-3) var(--space-4); user-select: all; }
/* ---------- laptop only ---------- */
@media (min-width: 1000px) {
.phone-only { display: none !important; }
}
/* ---------- phone: one column, no sideways scroll, every target at least 44px ---------- */
@media (max-width: 999px) {
.laptop-only { display: none !important; }
.topbar { gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); }
.topbar .signout { order: 1; margin-left: auto; padding: 0 var(--space-1); }
.topbar > .button--primary { order: 2; }
.topbar .search { order: 3; flex-basis: 100%; }
.topbar > .toplink, .topbar > form:not(.search) { order: 1; }
.topbar > .toplink { margin-left: auto; padding: 0 var(--space-1); }
.settings { padding: var(--space-2) var(--space-4) var(--space-10); }
.home { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: 0 var(--space-3) var(--space-10); }
.orbit, .orbit-note { display: none; }
.group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.group-grid a { display: grid; align-content: center; gap: calc(var(--space-1) / 2); min-height: var(--space-16); padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); min-width: 0; }
.group-grid a:hover { text-decoration: none; }
.group-grid b { overflow: hidden; font: var(--weight-bold) var(--text-base)/var(--leading-tight) var(--font-display);
white-space: nowrap; text-overflow: ellipsis; }
.group-grid small { font: var(--text-xs) var(--font-mono); color: var(--text-muted); }
.group-grid a.orbit-group--loose { background: transparent; box-shadow: none; border: 1.5px dashed var(--warning-border); }
.group-grid a.orbit-group--loose small { color: var(--warning); }
.group-grid a[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
.group-grid a[aria-current="true"] small { color: var(--accent-soft); }
.people-counts, .filter-line, .letter-jump, .person-cards, .pager { padding-left: var(--space-4); padding-right: var(--space-4); }
.cadence-line { margin-left: var(--space-4); margin-right: var(--space-4); }
.person-row { padding: var(--space-2) var(--space-4); }
.person-cards { grid-template-columns: minmax(0, 1fr); }
.letter-jump { grid-template-columns: repeat(7, minmax(0, 1fr)); } /* four rows of 7 */
.letter-jump a, .letter-off { min-height: var(--touch-min); }
.pager-pages a { min-width: var(--touch-min); min-height: var(--touch-min); }
.pager-pages { order: -1; flex-basis: 100%; } /* the numbers take their own row, Previous and Next below at either end */
/* the focusable marker on the person page: a 44px tap area without growing the line */
.inferred[tabindex]::before { content: ""; position: absolute; inset: calc((var(--space-4) - var(--touch-min)) / 2); }
/* the modal becomes a full-height sheet that scrolls as one */
.modal-scrim { padding: var(--space-6) 0 0; }
.modal { max-width: none; min-height: 100%; max-height: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.modal-body { overflow-y: visible; }
.modal-head, .modal-summary, .tabs, .modal-body, .modal-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
.modal-foot { border-radius: 0; }
.note { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.handle-row { grid-template-columns: minmax(0, 1fr) auto; }
.handle-row .select { grid-column: 1 / -1; }
.login { padding-top: var(--space-10); }
/* 44px targets (R-17): every button, control and link, including links inside text */
.button, .button--small, .contact-chip, .chip, .tabs a, .segmented label, .rel-card, .person-row, .input, .select { min-height: var(--touch-min); }
.chip .icon-button { width: var(--touch-min); height: var(--touch-min); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0; }
.brand, .groups-line a, .filter-line a, .note-head a:not(.button), .rel-card a, .alert a, .empty a:not(.button), p a, li a:not([class]) {
display: inline-flex; align-items: center; min-height: var(--touch-min); }
.rel-card span span { margin-top: calc(-1 * var(--space-2)); }
button, [type="submit"], [type="button"] { min-height: var(--touch-min); }
}