/* Iridium platform · design system — DESIGN.md is binding. Attio structure and density, the firm's palette.
   Light by default on every machine; dark only when the user toggles it (data-theme="dark"). */

/* ---------- 1. Tokens ---------- */
:root {
  --ink: #0B1B35; --ink-2: #46556E; --muted: #6B7689; --faint: #9AA3B2;
  --ground: #F3F1EA; --surface: #FBFAF6; --surface-2: #EEEBE2; --surface-3: #FFFFFF; --surface-hover: #F6F4EE;
  --hair: #E6E4DC; --line: #DAD6CB;
  --accent: #1B6BE0; --accent-hover: #175FC9; --accent-soft: #E8F0FC; --accent-ink: #FFFFFF;
  --teal: #2BB3B0; --teal-soft: #DDF3F2;
  --ok: #2E8B57; --ok-bg: #E1F1E7; --warn: #B3541E; --warn-bg: #F7E8DC; --bad: #B42318; --bad-bg: #F9E4E1;
  --side: #F3F1EA; --side-ink: #46556E; --side-muted: #6B7689; --side-active: #EAE7DD;
  --focus: rgba(27,107,224,.22); --scrim: rgba(11,27,53,.32);
  /* tag palette: eight muted tints, the first five from the semantic tokens, three more of the same weight */
  --tag-1: #1B6BE0; --tag-2: #2BB3B0; --tag-3: #2E8B57; --tag-4: #B3541E; --tag-5: #B42318; --tag-6: #7A5BC0; --tag-7: #C2588C; --tag-8: #6B7689;
  --sans: 'Inter', system-ui, -apple-system, sans-serif; --serif: 'Fraunces', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --r1: 4px; --r2: 6px; --r3: 8px; --r4: 10px;
  --sh1: 0 1px 2px rgba(11,27,53,.06);
  --sh2: 0 4px 16px rgba(11,27,53,.10), 0 0 0 1px rgba(11,27,53,.04);
  --sh3: 0 12px 40px rgba(11,27,53,.16);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #ECE9E1; --ink-2: #C3CAD8; --muted: #97A2B6; --faint: #6F7D95;
  --ground: #0E1B30; --surface: #14243D; --surface-2: #1B2E4D; --surface-3: #182A47; --surface-hover: #182A47;
  --hair: #22365A; --line: #2A3D5E;
  --accent: #74A9F5; --accent-hover: #8DB8F7; --accent-soft: #1A2F52; --accent-ink: #0B1B35;
  --teal: #4FD1CE; --teal-soft: #173A3F;
  --ok: #6CCB8E; --ok-bg: #1E3A2B; --warn: #E8925A; --warn-bg: #3A2B1F; --bad: #F08A7E; --bad-bg: #3A2226;
  --side: #0B1B35; --side-ink: #C3CAD8; --side-muted: #7B8AA6; --side-active: #14264A;
  --focus: rgba(116,169,245,.30); --scrim: rgba(0,0,0,.5);
  --tag-1: #74A9F5; --tag-2: #4FD1CE; --tag-3: #6CCB8E; --tag-4: #E8925A; --tag-5: #F08A7E; --tag-6: #A98BE8; --tag-7: #E28AB6; --tag-8: #97A2B6;
  color-scheme: dark;
}

/* ---------- 2. Global ---------- */
* { box-sizing: border-box; min-width: 0; }
html { overflow-x: hidden; scrollbar-gutter: stable; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 13px/1.4 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
img { max-width: 100%; }
p { margin: 0 0 10px; }
[hidden] { display: none !important; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .chip[href]:focus-visible,
.side nav a:focus-visible, .tabs a:focus-visible, .views a:focus-visible, summary:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--focus); }

h1 { font: 600 15px/1.2 var(--sans); color: var(--ink); margin: 0 0 4px; letter-spacing: -0.01em; }
h1 .muted { font: 400 13px var(--sans); color: var(--muted); margin-left: 8px; }
h2 { font: 600 13px/1.3 var(--sans); color: var(--ink); margin: 20px 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h3 { font: 600 13px/1.3 var(--sans); margin: 14px 0 6px; }
.sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono, .n { font-family: var(--mono); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ink { color: var(--ink); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }

/* icons: the inline sprite via m.icon(); a text extension tag also uses .ic inside .file, so svg rules are scoped */
svg.ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
svg.ic.sm { width: 14px; height: 14px; vertical-align: -2px; }
svg.ic.xs { width: 12px; height: 12px; vertical-align: -2px; }

/* utilities */
.mt1 { margin-top: 4px; } .mt2 { margin-top: 8px; } .mt3 { margin-top: 12px; } .mt4 { margin-top: 16px; }
.mb2 { margin-bottom: 8px; } .mb3 { margin-bottom: 12px; }
.ml-auto { margin-left: auto; }
.flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.center { justify-content: center; text-align: center; }
.w-full { width: 100%; }
.pre { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.right { text-align: right; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.narrow { max-width: 820px; }
.break { overflow-wrap: anywhere; }
/* derived-value source: 11px muted, inside .val (nowrap) or on its own line (tiles, lists) */
.src { font-size: 11px; color: var(--muted); opacity: .8; }
.ratio-grid .src, .stat .src { display: block; white-space: normal; margin-top: 2px; }

/* ---------- 3. App shell ---------- */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100dvh; background: var(--surface); }
main { min-width: 0; padding: 0; }
.content { padding: 20px 24px 60px; max-width: none; min-width: 0; }

.side { position: sticky; top: 0; height: 100dvh; overflow-y: auto; background: var(--side); border-right: 1px solid var(--hair);
  padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; color: var(--side-ink); }
.ws { height: 32px; padding: 4px 6px 12px; display: flex; align-items: center; gap: 8px; font: 600 13px var(--sans); color: var(--ink); flex: none; box-sizing: content-box; height: 20px; }
.mono-sq { width: 20px; height: 20px; border-radius: var(--r1); background: var(--ink); color: #FFFFFF; font: 600 11px var(--serif); display: grid; place-items: center; flex: none; }
:root[data-theme="dark"] .mono-sq { background: #FFFFFF; color: #0B1B35; }

.find { position: relative; margin: 0 0 8px; }
.find input { height: 28px; width: 100%; padding: 0 36px 0 28px; background: var(--surface-3); border: 1px solid var(--hair); border-radius: var(--r2);
  font: 400 13px var(--sans); color: var(--ink); box-shadow: var(--sh1); }
.find input::placeholder { color: var(--faint); }
.find input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); outline: 0; }
.find > svg.ic { position: absolute; left: 8px; top: 7px; width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.find .kbd { position: absolute; right: 8px; top: 7px; font: 500 10px var(--mono); color: var(--muted); pointer-events: none; line-height: 14px; }
.hits { position: absolute; top: calc(100% + 4px); left: 0; width: 360px; max-height: min(70vh, 70dvh); overflow: auto; background: var(--surface-3);
  border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--sh2); z-index: 12; padding: 4px; }
.hits:empty { display: none; }
.hits a { display: block; height: 30px; line-height: 30px; padding: 0 8px; border-radius: var(--r2); color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hits a:hover { background: var(--surface-hover); }
.hits .k { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 8px 2px; }
.hits .m { color: var(--muted); font-size: 12px; }

.side nav { display: flex; flex-direction: column; gap: 1px; }
.side nav a { flex: none; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: var(--r2); font: 500 13px/1 var(--sans); color: var(--side-ink); white-space: nowrap; }
.side nav a svg.ic { opacity: .85; }
.side nav a span:not(.n) { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.side nav a .n { font: 500 11px var(--mono); color: var(--side-muted); font-variant-numeric: tabular-nums; }
.side nav a:hover { background: var(--surface-hover); color: var(--ink); }
.side nav a.active { background: var(--side-active); color: var(--ink); }
.side nav a.active svg.ic { opacity: 1; }
/* a view of the list above it (Leads is the stage-0 view of Operations): indented, so it reads as one list with a view */
.side nav a.sub { padding-left: 22px; }
.side .grp { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--side-muted); margin: 14px 0 4px; padding: 0 8px; }
.live-jobs { margin-top: auto; flex: none; }
.side .who { margin-top: 0; padding: 8px 0 0; border-top: 1px solid var(--hair); }
.side .who > summary { width: 100%; height: 40px; padding: 0 6px; justify-content: flex-start; gap: 8px; }
.side .who > summary .avatar { width: 24px; height: 24px; }
.side .who .nm { display: grid; line-height: 1.2; min-width: 0; text-align: left; }
.side .who .nm { font: 500 13px var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .who .nm small { font: 400 12px var(--sans); color: var(--muted); }
.side .who .menu-panel { width: 100%; }

/* page head */
.page-head { position: sticky; top: 0; z-index: 6; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--hair); }
.page-head .obj { width: 24px; height: 24px; display: grid; place-items: center; background: var(--surface-2); border-radius: var(--r2); color: var(--ink-2); flex: none; }
.page-head h1 { font: 600 15px/1 var(--sans); color: var(--ink); margin: 0; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-head h1 .n { font: 500 12px var(--mono); color: var(--muted); margin-left: 6px; }
.page-head .ttl { min-width: 0; }
/* back link: one small "← Label" line above the title, keyboard focusable; the head keeps its height, the title line moves down */
/* the back link: its own row above the title (the head wraps and grows), 13px ink-2 with a chevron-left, a ghost-button hover box */
.page-head > .back { flex: 0 0 100%; order: -1; display: flex; min-width: 0; margin: 0 0 0 -6px; color: var(--ink-2); text-decoration: none; }
.page-head > .back .bk { display: inline-flex; align-items: center; gap: 4px; height: 24px; max-width: 100%; padding: 0 8px 0 4px; border-radius: var(--r2); font: 500 13px/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-head > .back .bk .lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head > .back .bk svg.ic { color: var(--muted); flex: none; }
.page-head > .back:hover .bk { background: var(--surface-hover); color: var(--ink); }
.page-head > .back:hover .bk svg.ic { color: var(--ink-2); }
.page-head > .back:focus-visible { outline: 0; }
.page-head > .back:focus-visible .bk { box-shadow: 0 0 0 3px var(--focus); }
.page-head.has-back { flex-wrap: wrap; height: auto; min-height: 48px; padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
.page-head.record.has-back { height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.page-head .sub { font-size: 13px; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-head > .right { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
.page-head.record { height: 64px; }
.page-head.record h1 { font: 600 22px/1.2 var(--serif); font-variation-settings: 'opsz' 24; letter-spacing: -0.01em; }
.page-head.record .sub { margin-top: 1px; }
.page-head.record .avatar.lg { flex: none; }
/* pages outside the shell (client portal): one centred column, static head */
.portal { max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; }
.portal .page-head { position: static; margin: 0 0 20px; padding: 0; background: transparent; }
/* legacy .head (one release): same look, not sticky */
.head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 12px; }
.head .meta { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-left: auto; }

.scrim { display: none; }
.tabbar { display: none; }
.mob-only, .btn.mob-only { display: none; }

/* ---------- 4. Components ---------- */
.btn { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-3); color: var(--ink); box-shadow: var(--sh1);
  font: 500 13px/1 var(--sans); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; text-decoration: none; cursor: pointer; }
.btn svg.ic { width: 14px; height: 14px; }
.btn:hover { background: var(--surface-hover); }
.btn:active { background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.small { height: 24px; padding: 0 8px; font-size: 12px; }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-hover); }
.btn.ghost.link { color: var(--accent); }
.btn.danger { color: var(--bad); }
.btn[disabled], .btn.disabled, button[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 4px; }

/* one 20px flex box: the dot and the label share the cross axis, so they sit on one line in every context (status rows, cells, the Outbox) */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hair);
  color: var(--ink-2); font: 500 12px/1 var(--sans); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; flex: none; box-sizing: border-box; }
.chip::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
/* tag chips: the dot carries the palette tint (t1..t8 from the tokens) */
.chip.tag.t1::before { background: var(--tag-1); } .chip.tag.t2::before { background: var(--tag-2); } .chip.tag.t3::before { background: var(--tag-3); } .chip.tag.t4::before { background: var(--tag-4); }
.chip.tag.t5::before { background: var(--tag-5); } .chip.tag.t6::before { background: var(--tag-6); } .chip.tag.t7::before { background: var(--tag-7); } .chip.tag.t8::before { background: var(--tag-8); }
.chip.live::before { background: var(--ok); }
.chip.wait::before { background: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.chip.bad::before { background: var(--bad); }
.chip.dim { color: var(--muted); }
.chip.dim::before { background: var(--faint); }
.chip.accent::before { background: var(--accent); }
.chip.teal::before { background: var(--teal); }
.chip.ai { gap: 4px; height: 18px; padding: 0 7px 0 5px; border: 1px solid var(--hair); background: var(--surface-2); color: var(--ink-2); font: 500 11px/1 var(--sans); }
.chip.ai::before { display: none; }
.chip.ai svg.ic { color: var(--accent); }
.chip.filter::before, .chip.plain::before { display: none; }
.chip.filter { cursor: pointer; }
.chip.filter svg.ic { width: 12px; height: 12px; color: var(--muted); }
a.chip:hover { background: var(--surface-hover); color: var(--ink); }

.avatar { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font: 500 10px var(--mono); flex: none; }
.avatar.md { width: 24px; height: 24px; }
.avatar.lg { width: 32px; height: 32px; font: 600 13px var(--serif); }
.avatar.sq { border-radius: var(--r1); }
.avatar.sq.lg { background: var(--ink); color: #FFFFFF; }
:root[data-theme="dark"] .avatar.sq.lg { background: #FFFFFF; color: #0B1B35; }
.person, .who:not(details) { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; vertical-align: middle; }
.person .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .nm.small { flex: none; max-width: 45%; }
.props dd > .person, .flex > .person, .flex > a > .person, .list li .person { flex: 0 1 auto; min-width: 0; }
.flex > a:has(> .person) { min-width: 0; flex: 0 1 auto; display: inline-flex; max-width: 100%; }

/* inputs */
.form input, .form select, .form textarea, .inline-form input, .inline-form select, .inline-form textarea, .inline-input, .toolbar input, .toolbar select,
.filters input, .filters select, .quick input, .card-form .q input, .card-form .q select, .menu-panel input, .menu-panel select {
  height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-3); color: var(--ink); font: 400 13px var(--sans); box-shadow: var(--sh1); max-width: 100%; min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); outline: 0; }
select:not([multiple]) { appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%236B7689' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; }
select[multiple] { height: auto; padding: 4px; }
.form textarea, .inline-form textarea, textarea { height: auto; min-height: 72px; padding: 6px 8px; resize: vertical; width: 100%; line-height: 1.45; }
input[type=checkbox], input[type=radio] { width: 14px; height: 14px; accent-color: var(--accent); margin: 0; }
.checkbox { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); }
/* a file input is one quiet 28px button ("Choose files") and nothing else: the browser's "No file chosen" text is hidden (font-size 0 on the input;
   the button keeps its own font) and base.html echoes the chosen name into the .file-echo span it places after the input */
input[type=file] { font-size: 0; line-height: 0; color: transparent; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; max-width: 100%; vertical-align: middle; }
input[type=file]::file-selector-button { height: 28px; padding: 0 10px; margin: 0; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-3); color: var(--ink); box-shadow: var(--sh1); font: 500 13px/1 var(--sans); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--surface-hover); }
.form input[type=file], .inline-form input[type=file] { height: auto; padding: 0; border: 0; box-shadow: none; background: transparent; width: auto; }
.file-echo { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.form label > .file-echo { margin-top: 2px; }
/* the labelled picker (m.file_input): a .btn with an icon and words that carries a transparent input on top of itself */
.filepick { position: relative; overflow: hidden; }
.filepick input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.filepick:focus-within { box-shadow: 0 0 0 3px var(--focus); }
/* date and time inputs: same box as a text input, the calendar glyph small and quiet */
input[type=date], input[type=datetime-local], input[type=time] { font-family: var(--sans); color: var(--ink); }
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator { opacity: .55; width: 14px; height: 14px; cursor: pointer; }
input[type=date]::-webkit-datetime-edit, input[type=datetime-local]::-webkit-datetime-edit { color: var(--ink); }
input[type=date]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type=number] { -moz-appearance: textfield; }
/* a listbox (multi-select) is a framed list of 28px rows, not the browser's default widget */
select[multiple] { border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-3); box-shadow: var(--sh1); font: 400 13px var(--sans); color: var(--ink); min-width: 160px; }
select[multiple] option { padding: 5px 8px; border-radius: var(--r1); }
select[multiple] option:checked { background: var(--accent-soft); color: var(--ink); }
.form { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; align-content: start; }
.form .full { grid-column: 1 / -1; }
.form label.inline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.form input, .form select { width: 100%; }
/* checkboxes and radios keep their native 14px box wherever they sit (the width:100% and height:28px rules above would stretch them) */
.form input[type=checkbox], .form input[type=radio], .inline-form input[type=checkbox], .inline-form input[type=radio],
.menu-panel input[type=checkbox], .menu-panel input[type=radio], .card-form .q input[type=checkbox], .card-form .q input[type=radio] {
  width: 14px; height: 14px; padding: 0; border: 0; box-shadow: none; flex: none; }
textarea.code, textarea.mono { font: 400 12.5px/1.5 var(--mono); }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form input[type=text], .inline-form input[type=date], .inline-form input[type=datetime-local], .inline-form input[type=search], .inline-form input[type=email] { min-width: 180px; flex: 1; }
.inline-form select { min-width: 140px; }
/* a select in a toolbar-like row (.flex > .inline-form) never takes the row for itself: long option labels ellipsise inside 240px */
.flex > .inline-form select:not([multiple]) { max-width: 240px; }
dd .inline-form { min-height: 28px; padding: 0; margin: 0; }
/* in the attributes panel the control takes the whole column and Save/Cancel sit on a deliberate second row
   (the panel is 300px; a 180px minimum plus two buttons ran past the hairline) */
.props dd > .inline-form { flex: 1 1 auto; width: 100%; row-gap: 6px; }
.props .inline-form input:not([type=checkbox]):not([type=radio]), .props .inline-form select, .props .inline-form textarea { min-width: 0; flex: 1 1 100%; width: 100%; max-width: 100%; }

/* dropdown menus */
.menu { position: relative; display: inline-block; flex: none; }
.menu.mob-only { display: none; }   /* a phone-only More menu (DESIGN §3.3): the head's extra buttons fold into it under 861px */
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.menu[open] > summary { background: var(--surface-2); }
.menu[open] > summary.primary { background: var(--accent-hover); }
.menu-panel { position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; background: var(--surface-3); border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--sh2); padding: 4px; z-index: 12; }
.menu.right .menu-panel { left: auto; right: 0; }
.menu.up .menu-panel { top: auto; bottom: calc(100% + 4px); }
.menu-panel > a, .menu-panel > button { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: var(--r2); font: 400 13px var(--sans); color: var(--ink); width: 100%; border: 0; background: none; text-align: left; white-space: nowrap; box-shadow: none; }
.menu-panel > a:hover, .menu-panel > button:hover { background: var(--surface-hover); }
.menu-panel > a.on { font-weight: 500; }
.menu-panel > a svg.ic { color: var(--ink-2); }
.menu-panel form { padding: 8px; display: grid; gap: 8px; min-width: 240px; }
.menu-panel .fl { padding: 8px; display: grid; gap: 8px; min-width: 240px; }
.menu-panel .lab { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 8px 2px; }

/* tabs */
.tabs { display: flex; gap: 0; height: 36px; border-bottom: 1px solid var(--hair); margin: 12px 0 16px; overflow-x: auto; }
.tabs a { flex: none; padding: 0 12px; line-height: 34px; font: 500 13px var(--sans); color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--ink); border-bottom-color: var(--accent); }
.tabs a .n { font: 500 11px var(--mono); color: var(--muted); margin-left: 5px; }

/* cards, panels, lists */
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r3); padding: 12px 14px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.panel { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r3); padding: 12px 14px; margin: 8px 0 12px; }
.note { border-left: 2px solid var(--line); padding: 4px 0 4px 12px; margin: 0 0 16px; }
.list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: var(--r3); background: var(--surface); overflow: hidden; }
.list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 36px; padding: 8px 12px; border-bottom: 1px solid var(--hair); font-size: 13px; }
.list li:last-child { border-bottom: 0; }
.list li .m { color: var(--muted); font-size: 12px; margin-top: 2px; }
.list li .m .val { font-size: 12px; min-height: 0; }
/* the Outbox: one heading row per deal (name once, the client, the count) over the rows of that deal */
.list li.gh { background: var(--ground); min-height: 30px; padding: 5px 12px; }
.list li.gh .flex { min-width: 0; gap: 6px; }
.list li.gh .n { color: var(--muted); }
.list li .chip.age { height: 18px; font-size: 11px; }
/* the heading keeps its two columns on the phone (the :has() phone rule below would otherwise stack the count) */
@media (max-width: 860px) { .list li.gh:has(> .flex) { grid-template-columns: minmax(0, 1fr) auto; } }
/* a form opened under a list row (the Outbox send box) spans the row; its date field keeps its natural width */
.list li > .inline-form { grid-column: 1 / -1; }
.list li > .inline-form input[type=date] { flex: none; min-width: 0; width: auto; }
.list li .mono, .props dd .mono, td .mono { color: var(--ink); }
/* a row that only holds an inbox disclosure: the summary is the 44px row, the li adds nothing */
.list > li:has(> .inbox-row) { display: block; padding: 0; }
.list li.flag { box-shadow: inset 2px 0 var(--bad); }
.list li.flag.amber { box-shadow: inset 2px 0 var(--warn); }
.list li.flag.info, .list li.flag.cleared, .list li.flag.accepted { box-shadow: inset 2px 0 var(--line); opacity: .75; }
.list li.done { opacity: .6; }
.list.compact li { min-height: 32px; padding: 5px 12px; }
.list li.card { border-radius: 0; border-width: 0 0 1px; }
.list li.card:last-child { border-bottom: 0; }

.files { border: 1px solid var(--hair); border-radius: var(--r3); background: var(--surface); overflow: hidden; }
/* a file row is one 36px line like a table row: tag · name · muted meta, the buttons appear on hover, the row itself opens the file (base.html) */
.file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 36px; padding: 0 12px; border-bottom: 1px solid var(--hair); font-size: 13px; cursor: pointer; }
.file:last-child { border-bottom: 0; }
.file:hover { background: var(--surface-hover); }
.file .ic { font: 500 10px var(--mono); letter-spacing: .04em; padding: 0 5px; height: 18px; line-height: 18px; border-radius: var(--r1); background: var(--surface-2); color: var(--ink-2); min-width: 36px; text-align: center; }
.file .nm { min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 10px; }
.file .nm > a, .file .nm > .val { flex: 0 0 auto; min-width: 0; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file .nm > .val { min-height: 0; padding: 0; gap: 6px; }
.file .nm > .val > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .nm a { color: var(--ink); font-weight: 500; }
.file .nm .d { color: var(--muted); font-size: 12px; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file .r { display: flex; gap: 6px; white-space: nowrap; align-items: center; }
.file .r .btn { opacity: 0; transition: opacity .12s; }
.file:hover .r .btn, .file:focus-within .r .btn { opacity: 1; }

/* feeds / timeline */
.log { position: relative; padding-left: 20px; display: block; }
.log::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--hair); }
.log .e { position: relative; padding: 4px 0 14px; border: 0; background: none; }
.log .e::before { content: ""; position: absolute; left: -17px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--line); border: 1px solid var(--surface); }
.log .e:first-child::before { background: var(--accent); }
.log .e.ai::before { background: var(--warn); }
.log .e .h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.log .e .h b { font-weight: 500; color: var(--ink-2); }
.log .e .b { font-size: 13px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
/* markdown rendered inside a feed entry, a list row or a property: paragraphs and lists keep their rhythm, code is quiet mono */
.doc-inline { font-size: 13px; color: var(--ink-2); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.doc-inline p { margin: 0 0 4px; } .doc-inline p:last-child { margin: 0; }
.doc-inline ul, .doc-inline ol { margin: 2px 0 4px; padding-left: 1.2em; } .doc-inline li { margin: 0 0 2px; }
.doc-inline h1, .doc-inline h2, .doc-inline h3, .doc-inline h4 { font: 600 13px/1.4 var(--sans); color: var(--ink); margin: 6px 0 2px; display: block; }
.doc-inline code { font-family: var(--mono); font-size: .92em; background: var(--surface-2); padding: 0 4px; border-radius: var(--r1); color: var(--ink); }
.doc-inline pre { background: var(--surface-2); padding: 6px 8px; border-radius: var(--r2); overflow-x: auto; }
.doc-inline strong, .doc-inline b { font-weight: 500; color: var(--ink); }
.doc-inline a { color: var(--accent); }
.doc-inline blockquote { border-left: 2px solid var(--line); margin: 2px 0; padding: 0 10px; }
.log .e .b.doc-inline, .log .e .doc-inline { white-space: normal; }
.log .e.partner { border: 0; }
.log .val { align-items: flex-start; }

/* property rows + inline edit contract (§7) */
/* the label column is set from the longest label, not from English: a Spanish one ("Cobertura a la salida") is
   half again as long and used to be clipped to "Cobertura a la sali…", which is not a label but a hover */
.props { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 0 10px; margin: 0; font-size: 13px; align-items: start; }
.props dt { font: 400 12px var(--sans); color: var(--muted); min-height: 28px; display: flex; align-items: center; line-height: 1.25; overflow-wrap: anywhere; }
.props dd { margin: 0; min-height: 28px; display: flex; align-items: center; min-width: 0; gap: 0 4px; position: relative; }
.props dd > span, .props dd > a, .props dd > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.val { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; max-width: 100%; font-size: 13px; color: var(--ink); }
.val > span:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.val .empty { color: var(--muted); font-style: normal; padding: 0; }
.val .empty.quiet { color: var(--faint); }
/* the derived source reads in full: it is never capped, the value shrinks first and a long value pushes the source under it, right-aligned */
.val .src { white-space: nowrap; flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
/* in a property row the value fills the row; a short value shares the line with its source, a long one is clamped to two lines (full text in title),
   the source and the More link wrap under it; the Edit link overlays the right edge on hover so the value keeps the whole width */
.props dd .val { display: flex; flex-wrap: wrap; row-gap: 0; flex: 1 1 auto; width: 100%; min-width: 0; padding: 4px 0; min-height: 28px; box-sizing: border-box; }
.props dd .val > span:first-child { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.props dd .val > span:first-child:not(.chip):not(.empty):not(.mono) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; cursor: default; }
.props dd .val.open > span:first-child { -webkit-line-clamp: unset; display: block; }
.props dd .val > span:first-child[title] { cursor: pointer; }
.props dd .val > .src { margin-left: auto; }
/* a clamped value gets a small More / Less link (added by base.html once the clamp is measured) */
.props dd .val > .more { flex: none; font: 500 11px var(--sans); color: var(--accent); line-height: 16px; cursor: pointer; }
.props dd .val > .more + .src { margin-left: auto; }
.props dd .val .ed { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; background: var(--surface); box-shadow: -6px 0 6px -2px var(--surface); }
.val .ed { height: 20px; padding: 0 4px; font-size: 11px; gap: 3px; color: var(--muted); opacity: 0; transition: opacity .12s; box-shadow: none; }
.props dd:hover .ed, .val:hover .ed, .val .ed:focus-visible, li:hover .ed, .card:hover > .ed, h1:hover .ed { opacity: 1; }
@media (hover: none) { .val .ed { opacity: 1; } .props dd .val { padding-right: 44px; } .file .r .btn { opacity: 1; } }
/* identifiers with a Reveal button: each identifier and its button share a grid row, so a pair never splits across lines */
.props dd .flex:has(> span[id^="vv-"]) { display: grid; grid-template-columns: max-content max-content; gap: 2px 8px; align-items: center; justify-content: start; }
/* a format tag (PDF, DOCX) next to a record name: text, not an icon */
.ext { display: inline-block; font: 500 10px var(--mono); letter-spacing: .04em; padding: 0 5px; height: 18px; line-height: 18px; border-radius: var(--r1); background: var(--surface-2); color: var(--ink-2); min-width: 36px; text-align: center; vertical-align: middle; }

.stagebar { display: inline-flex; gap: 0; width: 64px; height: 5px; border-radius: 3px; overflow: hidden; background: var(--surface-2); vertical-align: middle; flex: none; }
.stagebar i { flex: 1; height: 100%; display: block; background: transparent; }
.stagebar i.on { background: var(--accent); }

.stat { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 16px; }
.stat div { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r3); padding: 10px 12px; }
.stat b { display: block; font: 500 22px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.stat span { font-size: 12px; color: var(--muted); }
/* the scope a figure counted ('mine', 'everyone', 'deals only'): quieter than the label, on the same line */
.stat .sc, .attention .sc, .legend .sc { font-style: normal; color: var(--faint); }
.stat .sc::before, .attention .sc::before, .legend .sc::before { content: "· "; }

.lifecycle { display: flex; height: 28px; border: 1px solid var(--hair); border-radius: var(--r2); overflow: hidden; font-size: 12px; margin: 10px 0; }
.lifecycle span { flex: 1; display: grid; place-items: center; padding: 0 8px; color: var(--muted); border-right: 1px solid var(--hair); background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lifecycle span:last-child { border-right: 0; }
.lifecycle span.done { color: var(--ink-2); }
.lifecycle span.on { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

.toast { position: fixed; right: 20px; bottom: 20px; left: auto; transform: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--sh2); font-size: 13px; z-index: 30; max-width: min(360px, calc(100vw - 28px)); }
.toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.toast.bad::before { background: var(--bad); }

.empty { color: var(--muted); font-style: normal; font-size: 13px; padding: 8px 0; }
.notice { background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--r2); padding: 8px 12px; font-size: 13px; color: var(--ink-2); }
.notice.warn { border-color: var(--line); }
.notice.bad { background: var(--bad-bg); border-color: transparent; }
.notice.ok { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--ok-bg); border-color: transparent; }
.ai-note { font-size: 12px; color: var(--muted); }
/* a proposal before it is written: one tick, then the words, on one line that wraps on a narrow screen (round 6) */
.proposal .prop-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.proposal .prop-row > label.inline { flex: 0 0 auto; }
.proposal .prop-row > input[type=text] { flex: 1 1 260px; min-width: 0; }
.proposal .prop-row > select { flex: 0 0 110px; }
.proposal .prop-row.fact { align-items: flex-start; }
.proposal .prop-row .ft { flex: 1 1 260px; min-width: 0; }
.proposal .prop-row .m, .answers .m { font-size: 12px; color: var(--muted); }
.answers li { margin-bottom: 8px; }
.answers .quote { font-style: italic; }
.ai-desk .htmx-indicator { margin-left: 4px; }

/* AI run: the button goes quiet and a spinner names that the job is in flight */
.busy { display: none; align-items: center; gap: 6px; font: 500 12px var(--sans); color: var(--ink-2); }
.htmx-request .busy, .busy.htmx-request { display: inline-flex; }
form.ai-run.htmx-request button { opacity: .55; }
.spin { width: 12px; height: 12px; border: 1.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: ib-spin .7s linear infinite; flex: none; }
@keyframes ib-spin { to { transform: rotate(360deg); } }
@keyframes ib-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: ib-pulse 1.2s ease-in-out infinite; flex: none; }
.diff del { background: var(--bad-bg); text-decoration: none; }
.diff ins { background: var(--ok-bg); text-decoration: none; }
.diff.clip { max-height: 240px; overflow: auto; }

details > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; color: var(--ink-2); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary svg.ic { transition: transform .12s; }
details[open] > summary > svg.ic.chev { transform: rotate(90deg); }
details > summary.btn { padding: 0 10px; color: var(--ink); }
details > summary.btn.small { padding: 0 8px; }
details > summary.btn.ghost { color: var(--ink-2); }

.section-title { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; }
.section-title:first-child { margin-top: 0; }
.section-title svg.ic { vertical-align: -1px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--surface-3); box-shadow: var(--sh1); height: 28px; flex: none; }
.seg a, .seg button { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; background: transparent; color: var(--ink-2); font: 500 13px var(--sans); border-right: 1px solid var(--hair); white-space: nowrap; }
.seg a:last-child, .seg button:last-child { border-right: 0; }
.seg a:hover, .seg button:hover { background: var(--surface-hover); }
.seg a.on, .seg button.on { background: var(--surface-2); color: var(--ink); }
.seg svg.ic { width: 14px; height: 14px; color: var(--ink-2); }

.attention { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.attention a { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 7px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12px; }
.attention a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.attention a.bad::before { background: var(--bad); }
.attention a.warn::before { background: var(--warn); }
.attention a b { font: 500 12px var(--mono); color: var(--ink); }
.attention a:hover { background: var(--surface-hover); }

.drop { border: 1px dashed var(--line); border-radius: var(--r3); padding: 14px; text-align: center; color: var(--muted); background: var(--surface); font-size: 13px; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop input[type=file] { display: block; margin: 8px auto; }
.drop .inline-form { justify-content: center; }

.bars { display: grid; gap: 6px; margin: 8px 0 4px; }
.bar { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.bar .lab { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .tr { height: 8px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.bar .tr i { display: block; height: 100%; background: var(--accent); border-radius: 0 2px 2px 0; min-width: 2px; opacity: 1; }
.bar .v { font: 500 12px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; min-width: 60px; text-align: right; }
.meter { height: 8px; background: var(--teal-soft); border-radius: 2px; overflow: hidden; margin: 6px 0; }
.meter i { display: block; height: 100%; background: var(--teal); }
.pipe { display: flex; height: 20px; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--hair); margin: 6px 0; }
/* the only thing the template may set on a segment is the datum itself (--seg, the stage's share); the look is here */
.pipe span { display: block; width: var(--seg, 0%); background: var(--accent); opacity: .5; border-right: 1px solid var(--surface); min-width: 2px; }
.pipe span:nth-child(odd) { opacity: .9; }
.pipe span:nth-child(3n+2) { opacity: .7; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend b { font-weight: 500; color: var(--ink); }
.metrics { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ratio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ratio-grid div { background: var(--surface-2); border-radius: var(--r2); padding: 8px 10px; }
.ratio-grid b { display: block; font: 500 16px var(--mono); }
.ratio-grid span { font-size: 12px; color: var(--muted); }

.verdict-box { border-radius: var(--r4); padding: 14px 16px; border: 1px solid var(--hair); background: var(--surface); }
.verdict-box.no { background: var(--bad-bg); border-color: transparent; }
.verdict-box.study { background: var(--ok-bg); border-color: transparent; }
.verdict-box.conditional { background: var(--warn-bg); border-color: transparent; }
.verdict-box h3 { margin: 0 0 4px; font: 600 18px var(--serif); }
.card-form fieldset { border: 1px solid var(--hair); border-radius: var(--r3); padding: 8px 12px; margin: 0 0 12px; }
.card-form legend { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 6px; }
.card-form fieldset[id^="q"] legend { text-transform: none; letter-spacing: 0; font: 600 13px/1.3 var(--sans); color: var(--ink); }
.card-form .q-card { padding: 14px 16px; margin: 0 0 14px; background: var(--surface); }
.card-form .q-card legend { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-form .q-card legend .qn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 500 11px var(--mono); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--hair); }
.card-form .q { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 0; border-bottom: 0; min-height: 0; }
.card-form .q:last-child { border-bottom: 0; }
.card-form .q label { font: 500 12px/1.3 var(--sans); color: var(--ink-2); }
.card-form .q input, .card-form .q select, .card-form .q textarea { width: 100%; }
.card-form .q .internal { color: var(--muted); font: 500 10px var(--mono); margin-left: 6px; }
.card-form .q.unknown { border-left: 2px solid var(--warn); padding-left: 10px; }
.card-form .q.unknown label { color: var(--ink-2); }
.card-form fieldset.has-red { border-color: var(--hair); }
.card-form fieldset.has-amber { border-color: var(--hair); }
.q-help { font-size: 12px; line-height: 1.45; color: var(--ink-2); margin: 0 0 8px; display: grid; gap: 4px; }
.q-help .k { font-weight: 600; color: var(--ink); margin-right: 4px; }
.q-help .kill .k { color: var(--bad); }
/* round 10 · the screen in three blocks. The money and the dates open the form as a grid of short fields; the
   twelve questions sit under them with three answers to a row and their teaching behind a toggle. */
/* auto-FILL, not auto-fit: a block with one answer left in it keeps a third of the row, it does not stretch across it */
.card-form .money-grid, .card-form .bools { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px; }
/* A two-line label, or a note on one answer and not on its neighbour, must not push a control out of line with
   its row. Every cell hands its three lines — label, answer, note — to the grid itself (subgrid), so the labels
   of a row share one track, the answers share the next and the notes the last, whatever is in them. */
.card-form .money-grid .q, .card-form .bools .q { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-items: end; }
.card-form .q-product { max-width: 320px; padding-top: 0; }
/* a line of free text (the event behind a date, what repays it) gets two cells; a number or a choice gets one */
.card-form .bools .q:has(> input[type="text"]:not(.num)) { grid-column: span 2; }
.card-form .q .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* round 11 · the answer controls.
   (a) yes · no · unknown is three answers, not a list to open: one joined pill group over three radios. Unknown is
       the default and stays neutral; the two real answers borrow the verdict palette (ok / bad), nothing new.
   (b) a choice of more than three stays a select, but wearing the form's own clothes: the money input's height,
       border, radius and font, a caret drawn here (the shorthand background above wipes the global one), and the
       width of its longest option — never the whole cell.
   (c) under either of them sits the note: one quiet line that opens into a box while it is being written in. */
.tri { display: inline-flex; flex-wrap: wrap; align-self: start; justify-self: start; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r2);
       background: var(--surface-3); box-shadow: var(--sh1); overflow: hidden; }
.card-form .q .tri label { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 11px;
       border-right: 1px solid var(--hair); font: 500 12px/1 var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; }
.card-form .q .tri label:last-child { border-right: 0; }
.card-form .q .tri label:hover { background: var(--surface-hover); color: var(--ink-2); }
.card-form .q .tri input[type=radio] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.card-form .q .tri label.yes:has(input:checked) { background: var(--ok-bg); color: var(--ok); }
.card-form .q .tri label.no:has(input:checked) { background: var(--bad-bg); color: var(--bad); }
.card-form .q .tri label.unk:has(input:checked) { background: var(--surface-2); color: var(--ink-2); }
.tri:has(input:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.card-form .q > .lbl { font: 500 12px/1.3 var(--sans); color: var(--ink-2); }   /* the label of a yes/no/unknown row: a group, so a span, not a <label for> that would answer for it */
.card-form .q select:not([multiple]) { width: auto; align-self: start; justify-self: start; height: 28px; padding: 0 26px 0 8px; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); border-radius: var(--r2); font: 400 13px var(--sans); color: var(--ink); box-shadow: var(--sh1);
  background-color: var(--surface-3); background-repeat: no-repeat; background-position: right 8px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%236B7689' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E"); }
.card-form .q select.grow { width: 100%; }        /* the licence rows put four controls on one line: those do share it */
.card-form .q .note-in { margin-top: 5px; }
.card-form .q textarea.note { width: 100%; height: 26px; min-height: 0; padding: 4px 8px; resize: none; overflow: hidden;
  border: 1px dashed var(--line); border-radius: var(--r2); background: transparent; box-shadow: none;
  font: 400 12px/1.45 var(--sans); color: var(--ink-2); }
.card-form .q textarea.note:not(:placeholder-shown) { border-style: solid; background: var(--surface-3); color: var(--ink); }
.card-form .q textarea.note:focus { height: 66px; overflow: auto; resize: vertical; border-style: solid; background: var(--surface-3); }
.note-rule { margin: 8px 0 0; }
/* the same notes read on Details and on Numbers: a label that wraps needs its own air */
.props.said dt, .props.said dd { padding: 3px 0; }
.props.said dd .val > span:first-child { white-space: normal; }
.money-in { display: flex; align-items: baseline; gap: 6px; }
.money-in .cur { flex: none; font: 500 12px var(--mono); color: var(--muted); }
.ratio-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-top: 10px; }
.ratio-strip.one { grid-template-columns: minmax(0, 240px); }   /* a track with one figure is a tile, not a banner */
.ratio-strip .rt { background: var(--surface-2); border-radius: var(--r2); padding: 8px 10px; }
.ratio-strip b { display: block; font: 500 16px var(--mono); font-variant-numeric: tabular-nums; }
.ratio-strip span { font-size: 12px; line-height: 1.3; color: var(--muted); display: block; }
.ratio-strip .code { display: inline; font: 500 10px var(--mono); letter-spacing: .04em; color: var(--faint); }
.ratio-strip .more { display: block; font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.ratio-strip .rt.amber b { color: var(--warn); } .ratio-strip .rt.amber { background: var(--warn-bg); }
.ratio-strip .rt.red b { color: var(--bad); } .ratio-strip .rt.red { background: var(--bad-bg); }
.ratio-grid .more { display: block; font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.q-why { margin: 0 0 6px; }
.q-why > summary { font: 500 12px var(--sans); color: var(--muted); padding: 2px 0; }
.q-why > summary:hover { color: var(--ink-2); }
.q-why[open] > summary { margin-bottom: 4px; }
.q-why .q-help { margin: 0 0 4px; }
.q-nav { margin: 10px 0 0; }
.q-nav .qpips { margin-top: 6px; }
.screen-lead { max-width: 760px; margin: 0 0 16px; }
.screen-lead p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.name-picks { display: grid; gap: 6px; margin: 8px 0; }
.name-picks .check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink); padding: 8px 10px; border: 1px solid var(--hair); border-radius: var(--r2); background: var(--surface-3); }
.name-picks .check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.reason { font-size: 12px; color: var(--ink-2); padding: 6px 0 6px 10px; margin: 6px 0 0; border-left: 2px solid var(--line); }
.reason b { font-weight: 600; letter-spacing: 0; font-size: 11px; margin-right: 4px; text-transform: none; }
.reason.red { border-left-color: var(--bad); } .reason.red b { color: var(--bad); }
.reason.amber { border-left-color: var(--warn); } .reason.amber b { color: var(--warn); }
/* what somebody wrote beside the answer the reason is about: it explains the flag, it never softens it */
.reason-note { padding: 0 0 4px 12px; margin: -2px 0 0; border-left: 2px solid var(--hair); line-height: 1.45; }
.verdict-box .reason { margin: 6px 0 0; }
.verdict-box .props { margin-top: 6px; }
.card-form .save-bar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 0; margin-top: 4px; background: var(--surface); border-top: 1px solid var(--hair); }
.brief { font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--ink); }
.card textarea.brief { border: 0; background: var(--surface); box-shadow: none; padding: 0; }
ul.plain { padding-left: 1.1em; margin: 6px 0; }
ul.plain li { margin-bottom: 3px; }

.viewer { background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--r4); min-height: 300px; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; position: relative; overflow: hidden; }
.viewer.live { display: block; height: min(78vh, 78dvh); }
.viewer iframe, .viewer object { width: 100%; height: 100%; border: 0; display: block; }
.viewer img { max-width: 100%; max-height: 78vh; display: block; margin: 0 auto; }
.paper-thumb { width: 140px; height: 180px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r1); object-fit: cover; object-position: top; }
.doc { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r3); padding: 20px 24px; max-width: 80ch; font-size: 14px; line-height: 1.55; }
.doc h1 { font: 600 20px/1.25 var(--sans); margin: 0 0 12px; }
.doc h2 { font: 600 18px/1.25 var(--serif); margin: 22px 0 10px; display: block; }
.doc h3 { font-size: 15px; margin: 20px 0 8px; }
.doc h4 { font-size: 13px; margin: 16px 0 6px; }
.doc ul, .doc ol { padding-left: 1.2em; }
.doc li { margin-bottom: 5px; }
.doc code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); padding: 1px 4px; border-radius: var(--r1); }
.doc blockquote { border-left: 2px solid var(--line); margin: 0 0 10px; padding: 2px 12px; color: var(--ink-2); }
/* nothing in a knowledge page spills past its column: a wide table scrolls inside itself, code and long words wrap, images fit */
.doc { min-width: 0; overflow-wrap: anywhere; }
.doc table { font-size: 13px; display: block; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }
.doc pre { overflow-x: auto; background: var(--surface-2); padding: 10px; border-radius: var(--r2); white-space: pre-wrap; overflow-wrap: anywhere; }
.doc pre code { white-space: inherit; overflow-wrap: anywhere; }
.doc img { max-width: 100%; height: auto; }
.doc.mono, .doc .mono { font-weight: 400; font-size: 12.5px; }
.pb { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
.pb nav a { display: flex; align-items: center; min-height: 28px; padding: 4px 8px; border-radius: var(--r2); color: var(--ink-2); font-size: 13px; line-height: 1.3; }
.pb nav a > span, .pb nav a > span.ellipsis { min-width: 0; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pb nav a:hover { background: var(--surface-hover); }
.pb nav a.active { background: var(--surface-2); color: var(--ink); font-weight: 500; }
.quick { display: flex; gap: 8px; margin: 0 0 14px; }
.quick input { flex: 1; }

.thread { display: grid; gap: 4px; margin: 6px 0; }
.thread .c { background: var(--surface-2); padding: 5px 8px; border-radius: var(--r2); font-size: 12px; }
.thread .c b { font-weight: 500; color: var(--ink-2); margin-right: 6px; }
.inbox-item { display: grid; gap: 8px; }
.inbox-item .top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.inbox-item .sug { font-size: 13px; color: var(--ink-2); }
/* while the worker reads a dropped document: a quiet breathing line, never a blocker — every control below stays live */
.inbox-item .sug.reading { animation: reading 1.6s ease-in-out infinite; }
@keyframes reading { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .inbox-item .sug.reading { animation: none; } }
.inbox-item .body { white-space: pre-wrap; font-size: 13px; color: var(--ink-2); max-height: 160px; overflow: auto; }
/* the source chip, the file count and the date size themselves: 'Enlace de cliente' and '2 archivos' are longer than the
   English and were being clipped by fixed columns. Only the title and the suggested deal flex. */
.inbox-row > summary { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content minmax(0, 220px); gap: 10px; align-items: center; min-height: 44px; padding: 0 12px; }
.inbox-item .file-pick { display: inline-flex; gap: 4px; align-items: center; min-width: 0; }
.inbox-item .file-pick select { min-width: 0; max-width: 200px; }
.inbox-row > summary > * { min-width: 0; }
.inbox-row > summary > .chip { justify-self: start; }
.inbox-row > summary > .mono { font-family: var(--sans); font-weight: 400; font-size: 12px; }
.inbox-row > summary .sg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row > summary b { font-weight: 500; color: var(--ink); }
.inbox-row > summary:hover, .inbox-row[open] > summary { background: var(--surface-hover); }
.inbox-body { padding: 8px 12px 12px; }

.kvrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.meta.kvrow { margin: 0 0 12px; }
.hairline { border: 0; border-top: 1px solid var(--hair); margin: 14px 0; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* login / brand (outside the shell) */
.brand { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); padding: 4px 0 14px; letter-spacing: -0.01em; }
.brand small { display: block; font: 400 10.5px var(--mono); letter-spacing: .08em; color: var(--muted); margin-top: 2px; text-transform: uppercase; }
.login { max-width: 380px; margin: 14vh auto; }
.login h1 { font: 600 28px/1.15 var(--serif); margin: 0 0 6px; }

/* home */
.hero { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero .card h2 { margin: 0 0 8px; font-size: 13px; }
.hero .card.wide { grid-column: 1 / -1; }
.stat div > a { display: block; color: inherit; text-decoration: none; }
.hero .card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
/* two tracks: the secondary value never takes more than 42% of the row (a percentage max-width would resolve against an auto track and clip the text against itself) */
.hero .card li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: 8px; min-height: 30px; align-items: center; border-bottom: 1px solid var(--hair); font-size: 13px; }
.hero .card li:last-child { border-bottom: 0; }
.hero .card li a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hero .card li a.bad { color: var(--bad); }
/* one line per row: the meta ellipsises (full text in its title); a .due chip inside it carries the time so the time never truncates */
.hero .card li .m { white-space: nowrap; font-size: 12px; line-height: 1.4; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: block; max-width: none; text-align: right; min-width: 0; }
.hero .card li .due { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); font: 500 11px var(--mono); color: var(--ink-2); flex: none; margin-right: 6px; vertical-align: -3px; }
.hero .card li .due.bad { background: var(--bad-bg); color: var(--bad); }
.hero .card li.empty { display: block; padding: 6px 0; }

/* ---------- 5. List pages ---------- */
.views { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 24px; border-bottom: 1px solid var(--hair); overflow-x: auto; margin: -20px -24px 0; flex-wrap: nowrap; }
.views a, .views summary { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r2); font: 500 13px var(--sans); color: var(--ink-2); white-space: nowrap; }
.views a:hover { background: var(--surface-hover); color: var(--ink); }
.views a.on { background: var(--surface-2); color: var(--ink); }
.views a .n { font: 500 11px var(--mono); color: var(--muted); }
.views a .sh { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.views .menu { flex: none; }
.views .lbl { flex: none; margin-left: 8px; }
.toolbar, .filters { display: flex; align-items: center; gap: 6px; height: 44px; padding: 8px 24px; margin: 0 -24px; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; }
.toolbar form { display: contents; }
.toolbar input[type=search] { width: 200px; flex: none; }
.toolbar .tb-right { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
.toolbar .tb-right b { font: 500 13px var(--sans); }
.toolbar .tb-count { font: 400 12px var(--sans); color: var(--muted); white-space: nowrap; flex: none; }
.toolbar .tb-right > .btn + .tb-count, .toolbar .tb-right > b + .tb-count { margin-left: 10px; }
.toolbar .btn .n { color: var(--muted); }
.toolbar-note { font-size: 12px; color: var(--muted); padding: 6px 0 8px; }
.toolbar .chip { height: 24px; flex: none; }
/* menus inside a scrolling toolbar must not be clipped: the toolbar scrolls only when it overflows */
.toolbar:has(.menu[open]) { overflow: visible; }
/* the phone's one-button view switcher and the search field inside the Filter panel are hidden until the phone breakpoint */
.toolbar .view-menu { display: none; }
.menu-panel .q-mob { display: none; }

.tablewrap { overflow: auto; max-height: calc(100dvh - 190px); margin: 0 -24px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 0; background: var(--surface); max-width: none; }
.card .tablewrap, .grid2 .tablewrap, .metrics .tablewrap, .pb .tablewrap { margin: 0; border: 1px solid var(--hair); border-radius: var(--r3); max-height: none; overflow-x: auto; min-width: 0; }
/* inside a card the table fits the card: the declared column widths are hints the browser may not honour there (auto layout shares the width by content), controls in cells shrink with their column */
.card .tablewrap table { table-layout: auto; min-width: 0; }
.card .tablewrap:not(.fit) th { width: auto !important; }
.card .tablewrap td .inline-input, .card .tablewrap td select, .card .tablewrap td input[type=text], .card .tablewrap td input[type=number] { max-width: 100%; min-width: 0; }
/* .fit: a form table that MUST fit the card at the window everybody works at. Auto layout sizes a column by its
   widest content, and a <select> cannot shrink below its longest option (300px for 'The deal, identifiers as
   codes'), so the class column and the token ceiling were pushed off the card with no scrollbar to say so —
   worse in Spanish, whose words are longer. Fixed layout honours the declared per-cent widths and the controls
   shrink and clip inside them instead. */
.card .tablewrap.fit table { table-layout: fixed; width: 100%; min-width: 0; }
.card .tablewrap.fit th, .card .tablewrap.fit td { overflow: hidden; text-overflow: ellipsis; }
.card .tablewrap.fit td .inline-input, .card .tablewrap.fit td select, .card .tablewrap.fit td input { width: 100%; max-width: 100%; min-width: 0; }
.card > .tablewrap:first-child { margin-top: 2px; }
table { table-layout: auto; border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; font-size: 13px; }
th { position: sticky; top: 0; z-index: 2; height: 32px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--hair); font: 500 12px var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.sortable table { table-layout: fixed; }
th a { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
th a .lb { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
th a svg.ic { width: 12px; height: 12px; display: none; opacity: .4; }
th a:hover svg.ic, th a.on svg.ic { display: inline-block; }
th a.on { color: var(--ink); }
th a.on svg.ic { opacity: 1; }
th a.on.desc svg.ic { transform: rotate(180deg); }
td { height: 36px; padding: 0 12px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--hair); color: var(--ink-2); background: var(--surface); text-align: left; }
td .muted.small { display: inline; }
td .chip, td .stagebar, td .avatar, td .person, td .who { vertical-align: middle; }
td .stagebar { width: 40px; margin-right: 2px; }
td .person { max-width: 100%; }
/* a database row does not navigate: the name cell is the link, the other cells edit in place; only a legacy data-href row keeps the pointer */
tr.row[data-href] { cursor: pointer; }
tr.row:hover td { background: var(--surface-hover); }
tr.row.selected td { background: var(--accent-soft); }
tr.done td { opacity: .6; }
th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--hair); }
th:first-child { z-index: 3; }
/* while a grid editor or a peek card is open the first column stops sticking: a sticky cell is a stacking context
   and would paint its fixed card under the rows below (the Tasks "What" column) */
.tablewrap.editing td:first-child, .tablewrap.editing th:first-child { position: static; box-shadow: none; z-index: auto; }
.tablewrap.editing th { position: static; }
td.k { font-weight: 500; color: var(--ink); }
td.k a { color: var(--ink); }
td.k a:hover { color: var(--accent); }
/* the first (sticky) column wraps to two lines with a clamp instead of cropping the name (Attio: the name is always legible, the rest
   truncates): the row grows from 36 to 44px only when a name wraps (5px above and below two 13px/1.3 lines); the title stays as the
   fallback for a name longer than two lines. The Tasks grid clamps the task text (.t-what) and the deal link (.t-deal) the same way. */
td.k { white-space: normal; padding-top: 5px; padding-bottom: 5px; }
td.k > a, td.k .t-what, td .t-deal { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
td.k > a { display: -webkit-inline-box; vertical-align: middle; max-width: 100%; }
td.k > .avatar { vertical-align: middle; }
td.k > .avatar + a { max-width: calc(100% - 26px); }
td.num { text-align: right; font: 500 12px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
td .empty { padding: 0; }
td .val { white-space: nowrap; min-height: 0; }
td .val > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* grid editing (Attio style): an editable cell is a .val.cell that fills the 36px row; hover shows a quiet box and the Edit link,
   click or Enter opens the editor in place; a derived cell carries its source in its title and no affordance */
td .val.cell { display: flex; align-items: center; gap: 6px; width: calc(100% + 12px); height: 28px; margin: 0 -6px; padding: 0 6px; border-radius: var(--r2); position: relative; cursor: pointer; overflow: hidden; }
td .val.cell > span:first-child, td .val.cell > .person, td .val.cell > .pill-row { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td .val.cell > .pill-row { flex-wrap: nowrap; }
/* a suffix after the value (a date, a relative age) keeps its whole width: the value ellipsises and the age stays
   readable, instead of the cell squeezing "22 days ago" and cutting it to "22 dá" (DECISIONS #64) */
td .val.cell > span.muted.small, td .val > span.muted.small { flex: 0 0 auto; white-space: nowrap; }
td .val.cell:hover, td .val.cell:focus-visible { background: var(--surface-2); }
td .val.cell:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--accent); }
td .val.cell .ed { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); margin: 0; background: var(--surface-2); }
td .val.cell .empty { color: var(--faint); }
td.num .val.cell { justify-content: flex-end; }
td.num .val.cell .ed { right: auto; left: 2px; }
td.derived { cursor: default; }
/* the in-cell editor and the peek card float over the page with fixed coordinates computed from the cell by base.html
   (--pop-x/--pop-y/--pop-w), so neither the table wrapper nor the row clips them and they never lie across two rows;
   a text editor sits on the cell (28px control, 24px buttons), a pill popover and a peek card hang under it */
td > form.cellform, td .peekcard { position: fixed; left: var(--pop-x, 0px); top: var(--pop-y, 0px); z-index: 30; max-height: calc(100dvh - 16px); overflow-y: auto; }
td > form.cellform:not(.pick):not(.multipick) { min-width: max(var(--pop-w, 280px), 280px); max-width: 440px; flex-wrap: nowrap; gap: 4px; padding: 3px; background: var(--surface-3); border: 1px solid var(--hair); border-radius: var(--r2); box-shadow: var(--sh2); }
td > form.cellform.pick, td > form.cellform.multipick { display: block; }
td > form.cellform input:not([type=checkbox]):not([type=radio]), td > form.cellform select:not([multiple]) { min-width: 0; flex: 1 1 auto; width: auto; }
td > form.cellform textarea { min-width: 240px; }
/* pill popovers (choice · bool · user; the multi kinds as checkbox chips): the options as chips, the current one marked */
.pop { display: grid; gap: 8px; min-width: 240px; max-width: 380px; padding: 8px; background: var(--surface-3); border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--sh2); white-space: normal; text-align: left; }
.pop-head { display: flex; align-items: center; gap: 8px; }
.pop-title { flex: 1 1 auto; min-width: 0; font: 500 12px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-head .btn, .pk-head .btn { margin-left: auto; flex: none; }
.pop-opts { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.pop-foot { display: flex; gap: 6px; align-items: center; }
button.chip { cursor: pointer; font-family: var(--sans); }
button.chip:hover, button.chip:focus-visible { background: var(--surface-hover); color: var(--ink); }
button.chip:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--focus); }
.chip.opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); }
.chip.opt svg.ic { width: 12px; height: 12px; color: var(--accent); margin-left: 2px; }
.chip.person-opt::before { display: none; }
.chip.person-opt .avatar { width: 16px; height: 16px; font-size: 9px; margin-left: -3px; }
.chipbox { display: inline-flex; align-items: center; cursor: pointer; position: relative; }
.chipbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chipbox input:checked + .chip { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); }
.chipbox input:focus-visible + .chip { box-shadow: 0 0 0 3px var(--focus); }
/* the why-step of the status editor: a short form inside the popover (reason, and the unlock line on declined) */
form.why > .pop { width: 360px; max-width: 420px; }
form.why .pop label { display: grid; gap: 4px; font: 500 12px var(--sans); color: var(--muted); min-width: 0; }
form.why .pop textarea, form.why .pop input[type=text] { width: 100%; min-width: 0; max-width: 100%; flex: none; }
form.why .pop textarea { min-height: 64px; }
form.why .pop-title { display: inline-flex; align-items: center; gap: 6px; }
/* on a record page the popover hangs under the current value; the multi picker grows the row like the old multi-select did */
form.pick, form.multipick { position: relative; flex-wrap: nowrap; }
form.pick .pick-cur, form.multipick .pick-cur { display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; }
dd > form.pick > .pop, dd > form.multipick > .pop, .kvrow form.pick > .pop, li form.pick > .pop, .file form.pick > .pop { position: absolute; left: 0; top: calc(100% + 2px); z-index: 12; }
/* in the 300px attributes panel the popover spans the panel (from the label's edge), so nothing is cut by the panel's scroll box */
.props dd > form.pick > .pop, .props dd > form.multipick > .pop { left: -114px; right: 0; min-width: 0; max-width: none; }
/* the why-step too: the fixed 360px is for the floating grid cell; in the panel the form spans the panel like the pill picker */
.props dd > form.why > .pop { width: auto; }
/* the peek card of a derived cell: the whole text and what can be done about it */
td .val.cell.peek { cursor: pointer; }
.peekcard { display: grid; gap: 8px; width: max(var(--pop-w, 320px), 320px); max-width: 440px; padding: 10px 12px; background: var(--surface-3); border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--sh2); color: var(--ink-2); font: 400 13px/1.4 var(--sans); white-space: normal; text-align: left; cursor: default; }
.pk-head { display: flex; align-items: center; gap: 8px; }
.pk-title { flex: 1 1 auto; min-width: 0; font: 600 13px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-body { display: grid; gap: 8px; }
.pk-text { color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.pk-text.pre { white-space: pre-wrap; max-height: 260px; overflow-y: auto; }
.pk-sub { color: var(--ink-2); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow-y: auto; }
.pk-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; color: var(--muted); }
.pk-meta .bad { color: var(--bad); } .pk-meta .warn { color: var(--warn); }
.pk-act { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pk-list li { overflow-wrap: anywhere; line-height: 1.4; }
.pk-list li.bad { color: var(--bad); } .pk-list li.warn { color: var(--warn); }
.pk-row { display: flex; align-items: center; gap: 8px; }
.pk-row .grow { flex: 1 1 auto; min-width: 0; }
.pk-row form { flex: none; }
.pk-link { display: inline-flex; align-items: center; gap: 3px; width: max-content; font: 500 12px var(--sans); color: var(--accent); }
.peekcard .section-title { margin: 2px 0 0; }
/* the task card's text with its Edit: the wrapper is a .val so the generic editor swaps in place, but it wraps like the card (never the cell's nowrap) */
.peekcard .val { white-space: normal; display: block; }
.peekcard .val > .pk-text { display: block; white-space: pre-wrap; overflow: visible; text-overflow: clip; }
.peekcard .val > .ed { opacity: 1; margin-top: 2px; }
.peekcard form.inline-form { display: flex; flex-wrap: wrap; gap: 4px; }
.peekcard form.inline-form input[type=text] { flex: 1 1 200px; min-width: 0; }
/* the tag picker: a multipick popover (checkbox chips, one new-tag line with the eight tints, Save / Cancel);
   300–420px wide, the chip list wraps inside, so no column or panel ever clips it */
.tagpick > .pop { min-width: 300px; max-width: 420px; }
.tagpick .tp-list { max-height: 160px; }
.tagpick .tp-new { display: grid; gap: 6px; }
.tagpick .tp-new input[type=text] { width: 100%; min-width: 0; }
.tagpick .tp-colours { display: flex; flex-wrap: wrap; gap: 4px; }
.tagpick .tp-c { display: inline-flex; align-items: center; cursor: pointer; }
.tagpick .tp-c input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tagpick .tp-c input:checked + .chip { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); }
.tagpick .tp-c input:focus-visible + .chip { box-shadow: 0 0 0 3px var(--focus); }
.val.tags .pill-row { flex-wrap: nowrap; }
.props dd .val.tags .pill-row, .kvrow .val.tags .pill-row { flex-wrap: wrap; }
.kvrow .val.tags { min-height: 0; padding: 0; }
.sortable th a::after { content: none; }
/* Tasks grid: the row's Done / Drop / Chase forms sit on one line inside their cell; the deal name under the task text shows on the phone only */
.acts { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.acts form { display: contents; }
/* the What cell: the row's checkbox (bulk bar), then the task text clamped to two lines with the deal's name as a muted line under it;
   the cell grows past the 28px of a one-line cell only when the text wraps */
td.k .val.cell.peek { height: auto; min-height: 28px; align-items: flex-start; padding-top: 3px; padding-bottom: 3px; }
td.k .val.cell.peek > input.sel { flex: none; margin: 3px 2px 0 0; }
td.k .val.cell.peek > .t-body { flex: 1 1 auto; min-width: 0; display: block; white-space: normal; overflow: hidden; }
td.k .t-deal-m { display: block; font: 400 12px/1.3 var(--sans); color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the bulk bar (Done · Drop · Reassign · Set due) shows while a row is ticked; the Undo chip row replaces a row that left the tab */
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 10px; background: var(--accent-soft); border: 1px solid var(--hair); border-radius: var(--r2); font: 400 13px var(--sans); color: var(--ink-2); }
.bulk .bulk-n { color: var(--ink); }
.bulk .bulk-sep { width: 1px; height: 20px; background: var(--hair); }
.bulk .bulk-grp { display: inline-flex; align-items: center; gap: 4px; }
.bulk select, .bulk input[type=date] { height: 28px; }
tr.undo td { background: var(--surface-2); }
.undo-line { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; }
.undo-line .ellipsis { min-width: 0; max-width: 50vw; }
/* the quick-add line: the text on its own line, then deal · kind · who · due · Add on one line (the deal picker never grows to its longest name) */
#task-add input[name=what] { flex: 1 1 100%; }
#task-add .rpick { flex: 1 1 220px; max-width: 320px; }

.board { display: grid; grid-auto-flow: column; grid-auto-columns: 260px; gap: 12px; overflow-x: auto; padding: 4px 0 12px; }
.col { background: var(--ground); border: 0; border-radius: var(--r3); padding: 8px; min-height: 120px; }
.col h4 { margin: 0 4px 8px; font: 500 12px var(--sans); color: var(--ink-2); display: flex; justify-content: space-between; gap: 6px; }
.col h4 span { font: 500 11px var(--mono); color: var(--muted); }
.col .dc { display: block; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r2); box-shadow: var(--sh1); padding: 8px 10px; margin-bottom: 6px; font: 500 13px var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col .dc:hover { background: var(--surface-hover); }
.col .dc small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
/* the card's meta line: the due chip and the person's initials (a task card) */
.col .dc .dc-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery a.card { display: block; color: var(--ink); padding: 12px 14px; }
.gallery a.card:hover { background: var(--surface-hover); }
.gallery .card .avatar { margin-bottom: 8px; }
.gallery .card b { display: block; font: 600 15px/1.3 var(--serif); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery .card .m { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border: 1px solid var(--hair); border-radius: var(--r3); overflow: hidden; background: var(--surface); }
.cal .dh { font: 500 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); }
.cal .d { min-height: 96px; padding: 6px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 0; font-size: 12px; position: relative; background: var(--surface); }
.cal > :nth-child(7n) { border-right: 0; }
.cal > .d:nth-last-child(-n+7) { border-bottom: 0; }
.cal .d .n { position: absolute; top: 6px; right: 8px; font: 500 11px var(--mono); color: var(--muted); }
.cal .d.today .n { background: var(--accent); color: var(--accent-ink); border-radius: 999px; width: 18px; height: 18px; display: grid; place-items: center; top: 4px; right: 4px; }
.cal .d.out { background: var(--ground); color: var(--muted); }
.cal .d a { display: block; margin-top: 3px; padding: 2px 6px; border-radius: var(--r1); background: var(--accent-soft); color: var(--ink); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal .d .n + a { margin-top: 20px; }

/* ---------- 6. Record pages ---------- */
.grid2 { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.grid3 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid2.record .tablewrap { margin: 0; border: 1px solid var(--hair); border-radius: var(--r3); max-height: none; }
.grid2.record > aside .card { border: 0; padding: 0; background: transparent; }
.grid2.record .tabs { margin: 0 0 16px; }
@media (min-width: 1000px) {
  .grid2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .grid2.record { grid-template-columns: 300px minmax(0, 1fr); gap: 0; align-items: start; }
  .grid2.record > aside { grid-column: 1; grid-row: 1; border-right: 1px solid var(--hair); padding: 16px 20px 16px 0; position: sticky; top: 64px; align-self: start; max-height: calc(100dvh - 64px); overflow-y: auto; }
  /* a record head with a back row is 82px tall: the sticky attributes panel starts under it */
  .page-head.record.has-back + .content .grid2.record > aside { top: 82px; max-height: calc(100dvh - 82px); }
  .grid2.record > div { grid-column: 2; grid-row: 1; padding-left: 24px; min-width: 0; }
}

/* ---------- 8. Breakpoints ---------- */
@media (max-width: 600px) {
  .form { grid-template-columns: minmax(0, 1fr); }
  /* home rows and list rows stack: title on line 1 (two lines at most), the muted deal · due line under it */
  .hero .card li { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 6px 0; min-height: 0; }
  .hero .card li a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
  .hero .card li .m { text-align: left; margin-top: 0; }
  .list li { grid-template-columns: minmax(0, 1fr); }
  .list li > .m { margin-top: 0; }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
  .stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* screen card: label above its control, nothing wider than the phone */
  .card-form .q { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 6px 0; }
  .card-form .q .flex > * { min-width: 0; }
  /* the money grid and the answers go one to a row, the live figures two */
  .card-form .money-grid, .card-form .bools { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .card-form .bools .q:has(> input[type="text"]:not(.num)) { grid-column: auto; }   /* never a second column on a phone */
  /* the three-way answer holds one row on a phone; if a word ever grows past it, it wraps inside its own pill
     group rather than pushing the form sideways, and a choice may take the whole line */
  .tri { width: auto; max-width: 100%; }
  .card-form .q .tri label { flex: 1 1 auto; padding: 0 8px; }
  .card-form .q select:not([multiple]) { max-width: 100%; }
  .ratio-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-form .save-bar { position: static; flex-wrap: wrap; }
  /* list toolbar on the phone: one "View ▾" menu, Filter (the search field lives in its panel), Sort; no count, no bare search box */
  .toolbar .seg, .toolbar .tb-count { display: none; }
  .toolbar .view-menu { display: inline-block; }
  .toolbar form:has(.q-mob) > input.q-desk { display: none; }
  .menu-panel .q-mob { display: block; }
  /* the attention pills stay on one line that scrolls sideways inside itself */
  .attention { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 10px; padding: 0 14px 4px; scrollbar-width: none; }
  .attention::-webkit-scrollbar { display: none; }
  .attention a { flex: none; }
}
@media (max-width: 860px) {
  .mob-only { display: block; }
  .btn.mob-only { display: inline-flex; }
  .menu.mob-only { display: inline-block; }
  .desk-only { display: none; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 20; transform: translateX(-100%); transition: transform .18s; box-shadow: none; height: 100dvh; }
  body.nav-open .side { transform: none; box-shadow: var(--sh3); }
  .scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 19; display: none; }
  body.nav-open .scrim { display: block; }
  .hits { width: calc(100vw - 40px); }
  .find .kbd { display: none; }
  .page-head { height: 44px; padding: 0 14px; }
  .page-head .obj { display: none; }
  .page-head.record { height: auto; min-height: 56px; padding: 8px 14px; }
  .page-head.record h1 { font-size: 18px; }
  .page-head.record .avatar.lg { display: none; }
  /* record actions wrap under the title so the name is never squeezed by Upload + More */
  .page-head.record { flex-wrap: wrap; row-gap: 6px; }
  .page-head.record .ttl { flex: 1 1 0; }
  .page-head.record > .right { flex: 0 0 100%; margin-left: 0; justify-content: flex-end; }
  /* a plain head wraps too: the actions drop to their own row instead of being pushed past the right edge, where
     html { overflow-x: hidden } leaves no way back to them (Contacts lost both its title and its "+ Add" there) */
  .page-head { flex-wrap: wrap; height: auto; min-height: 44px; row-gap: 6px; }
  .page-head .ttl { flex: 1 1 0; }   /* the title shares the first row and ellipsises, as a record head's does */
  .page-head > .right { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
  .content { padding: 12px 14px 72px; }
  .toast { bottom: 68px; }
  .tabs { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
  .views { margin: -12px -14px 0; padding: 0 14px; }
  .toolbar, .filters { margin: 0 -14px; padding: 8px 14px; height: auto; flex-wrap: wrap; overflow: visible; }
  .toolbar input[type=search] { width: auto; flex: 1 1 140px; }
  .toolbar .tb-right { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .pb { grid-template-columns: 1fr; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; padding-bottom: env(safe-area-inset-bottom); display: flex; background: var(--surface); border-top: 1px solid var(--hair); z-index: 18; }
  .tabbar a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 500 10px var(--sans); color: var(--ink-2); position: relative; }
  .tabbar a.active { color: var(--accent); }
  .tabbar a .ico { position: relative; display: inline-block; width: 16px; height: 16px; }
  .tabbar a .n { position: absolute; top: -5px; right: -9px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 500 9px/14px var(--mono); text-align: center; }
  /* tables as cards */
  .tablewrap, .card .tablewrap, .grid2 .tablewrap { margin: 0 -14px; max-height: none; overflow: visible; border: 0; border-radius: 0; }
  table, tbody, tr { display: block; min-width: 0; width: auto; }
  thead { display: none; }
  tr.row { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 10px 14px; border-bottom: 1px solid var(--hair); background: var(--surface); }
  tr:not(.row) { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
  td, td:first-child, th:first-child { display: none; height: auto; padding: 0; border: 0; position: static; box-shadow: none; background: transparent; z-index: auto; }
  tr.row:hover td { background: transparent; }
  tr:not(.row) td { display: block; white-space: normal; }
  td.k { display: block; width: 100%; font-size: 14px; order: 0; }
  /* line 2: the status pills; line 3: one muted meta line (dates, numbers, amount) in a fixed order */
  td.c-chip, td.c-money, td.c-num, td.c-date { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
  td.c-chip { order: 1; }
  td.c-stage { display: none; }
  tr.row::after { content: ""; flex-basis: 100%; height: 0; order: 2; }
  td.c-money, td.c-num, td.c-date { order: 3; color: var(--ink-2); font: 400 12px var(--sans); text-align: left; }
  td.c-money::before, td.c-date::before, td.c-num::before { content: attr(data-l) ' '; color: var(--muted); }
  td.c-num .mono, td.c-money .mono, td.c-date .mono { font: 400 12px var(--sans); }
  td.blank { display: none; }
  td.k .t-deal-m { display: block; font: 400 12px var(--sans); color: var(--muted); margin-top: 2px; }
  /* the task text wraps in full on the phone (no hover title there); the peek card still carries the actions */
  td.k .val.cell.peek { display: block; white-space: normal; overflow: visible; }
  td.k .val.cell.peek .t-what { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
  td.c-chip .acts .btn { height: 28px; }
  /* grid editing on the phone: the cell keeps its natural size, the editor flows inside the card instead of floating */
  td .val.cell { width: auto; height: auto; min-height: 24px; margin: 0; padding: 0 4px; }
  td .val.cell .ed { display: none; }
  td:has(> form.cellform), td:has(.peekcard) { display: flex; width: 100%; order: 1; }
  /* the editor and the peek card open as a bottom sheet over a scrim */
  td > form.cellform, td .peekcard, td > form.cellform:not(.pick):not(.multipick) { left: 0; right: 0; top: auto; bottom: 0; width: auto; min-width: 0; max-width: none; max-height: 70dvh; overflow-y: auto; z-index: 21;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--surface-3); border: 1px solid var(--hair); border-bottom: 0; border-radius: var(--r3) var(--r3) 0 0; box-shadow: var(--sh3); flex-wrap: wrap; }
  td > form.cellform.pick > .pop, td > form.cellform.multipick > .pop { border: 0; box-shadow: none; padding: 0; min-width: 0; max-width: none; }
  body.cell-editing .scrim { display: block; }
  .page-head.has-back { padding-top: 6px; padding-bottom: 6px; row-gap: 4px; }
  .page-head > .back { margin-left: -4px; }
  .page-head > .back .bk { height: 28px; }
  /* board: the columns stack full width, no horizontal scroll; calendar: an agenda of the days that carry entries */
  .board { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; overflow: visible; gap: 10px; padding: 0 0 8px; }
  .col { min-height: 0; }
  .cal { display: block; border: 0; border-radius: 0; background: transparent; }
  .cal .dh, .cal .d { display: none; }
  .cal .d:has(a) { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-height: 0; padding: 8px 0; border: 0; border-bottom: 1px solid var(--hair); background: transparent; }
  .cal .d .n { position: static; flex: none; min-width: 24px; }
  .cal .d.today .n { width: 18px; min-width: 18px; }
  .cal .d a, .cal .d .n + a { margin: 0; flex: 1 1 100%; }
  /* list rows that carry a control on the right: the control stacks under the text instead of squeezing it */
  .list li:has(> form, > .inline-form, > .val, > .actions, > .flex, > .r, > .btn, > .menu) { grid-template-columns: minmax(0, 1fr); }
  .list li > .ml-auto { margin-left: 0; }
  /* file rows: the extension tag and the name share the first line, the meta under the name, actions under both */
  .file { grid-template-columns: auto minmax(0, 1fr); padding: 8px 12px; }
  .file .r { grid-column: 1 / -1; }
  .file .nm { flex-wrap: wrap; gap: 0 10px; }
  .file .nm > a, .file .nm > .val { max-width: 100%; }
  .file .nm .d { flex: 1 1 100%; }
  /* on the phone the row tap opens the file and Download lives on the file page: the button row goes, a state chip (documents) stays */
  .file .r .btn { display: none; }
  .file .r:not(:has(.chip)) { display: none; }
  /* inbox rows: the suggested deal stacks under the subject */
  .inbox-row > summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 12px; }
  .inbox-row > summary .sg { grid-column: 2 / -1; }
  /* approvals: decision buttons full width, 32px */
  .appr-act { width: 100%; margin-left: 0; }
  .appr-act .btn { flex: 1 1 0; height: 32px; justify-content: center; }
}
/* below 1000px the attributes panel comes first, folded into a Details disclosure under the status row (base.html builds the fold);
   the state at a glance stays in the header and the tabs follow right under the button */
@media (max-width: 999px) {
  .grid2.record > aside { border: 0; position: static; order: -1; padding: 0; }
  .rec-details > summary { width: 100%; justify-content: flex-start; }
  .rec-details[open] > summary { margin-bottom: 12px; }
}
@media (min-width: 1000px) {
  .rec-details > summary { display: none; }
}

/* deal overview: the at-a-glance strip (six .stat tiles, three per row; words in Inter, numbers in mono) */
.stat.glance { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 4px; }
.stat.glance b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat.glance b.txt { font: 500 15px/1.35 var(--sans); letter-spacing: -0.01em; color: var(--ink); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stat.glance .sub { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat.glance .empty.quiet { color: var(--faint); }
@media (max-width: 600px) { .stat.glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat.glance b { font-size: 17px; } .stat.glance b.txt { font-size: 14px; } }
/* what blocks, compact: severity dot + text clamped to two lines (More/Less from base.html) + state chip */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; }
.dot.red { background: var(--bad); } .dot.amber { background: var(--warn); } .dot.info { background: var(--line); }
/* Activity: one sentence per line — who, what, to which object, on which deal, when */
.log .e .h .prep { color: var(--muted); }
.log .e .h a.obj { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.log .e .h a.obj:hover { color: var(--accent); }
.flags li .fr { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.flags li .fr > .dot { margin-top: 7px; }
.flags li .ft { min-width: 0; flex: 1 1 auto; }
.val.clampable { display: flex; flex-wrap: wrap; row-gap: 0; width: 100%; min-height: 24px; position: relative; }
.val.clampable > span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; flex: 1 1 auto; line-height: 1.4; cursor: default; }
.val.clampable > span:first-child[title] { cursor: pointer; }
.val.clampable.open > span:first-child { -webkit-line-clamp: unset; display: block; }
.val.clampable > .more { flex: none; font: 500 11px var(--sans); color: var(--accent); line-height: 16px; cursor: pointer; margin-right: 6px; }
/* recent: kind chip + one ellipsised line + date */
.recent li .flex { flex-wrap: nowrap; min-width: 0; }
.recent li .flex > a { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.recent li .m { white-space: nowrap; margin: 0; }
/* notes tab */
.notes { display: grid; gap: 10px; }
.note.pinned { box-shadow: inset 2px 0 var(--accent); }
.note .h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.note .h .act { gap: 4px; }
.note .h .act .btn { opacity: .7; }
.note:hover .h .act .btn, .note .h .act .btn:focus-visible { opacity: 1; }
.note .body { font-size: 13px; line-height: 1.5; }
.note .body p { margin: 0 0 6px; }
.note textarea { font: 400 13px/1.5 var(--sans); }
/* the record picker (partials/pick.html, /pick/*): a 28px search box; the hits float with fixed coordinates set by base.html
   (like the grid editors, so a narrow cell or a table never clips them); the chosen record is a chip with an ×
   (the wrapper is .rpick, never .pick: that is the pill editor form) */
.rpick { position: relative; display: flex; align-items: center; width: 100%; max-width: 320px; min-width: 0; vertical-align: middle; }
.rpick.sm { max-width: 200px; }
.rpick.full { max-width: none; }
.rpick .pick-q { height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-3); color: var(--ink); font: 400 13px var(--sans); box-shadow: var(--sh1); flex: 1 1 auto; width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; }
.rpick .pick-q::-webkit-search-cancel-button, .rpick .pick-q::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.pick-hits { position: fixed; left: 0; top: 0; z-index: 40; width: 280px; max-height: 320px; overflow-y: auto; padding: 4px; background: var(--surface-3); border: 1px solid var(--hair); border-radius: var(--r3); box-shadow: var(--sh2); display: grid; gap: 1px; }
.pick-hit { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 4px 8px; border: 0; border-radius: var(--r2); background: none; color: var(--ink); font: 400 13px/1.3 var(--sans); text-align: left; cursor: pointer; }
.pick-hit:hover, .pick-hit.active { background: var(--surface-hover); }
.pick-hit.active { box-shadow: inset 0 0 0 1px var(--line); }
.pick-hit .pick-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.pick-hit .pick-name, .pick-hit .pick-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-hit .pick-sub { font-size: 12px; color: var(--muted); }
.pick-hit .chip { flex: none; }
.pick-hit.pick-create .pick-name { color: var(--accent); font-weight: 500; }
.pick-none { padding: 8px 10px; font-size: 13px; color: var(--muted); }
.pick-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; max-width: 100%; padding: 0 4px 0 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hair); color: var(--ink); font: 500 12px/1 var(--sans); }
.pick-chip.new { border-style: dashed; }
.pick-chip .pick-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pick-x { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--muted); padding: 0; cursor: pointer; flex: none; }
.pick-x:hover, .pick-x:focus-visible { background: var(--surface-hover); color: var(--ink); }
.pick-x .ic { width: 12px; height: 12px; }

/* channels (macros.html channel): an e-mail, phone or WhatsApp value is the link itself, with a quiet Copy beside it that
   shows on hover like the Edit pencil; in a property row the value keeps room on the right so Edit never covers Copy */
.val a.chan { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.val a.chan:hover, .val a.chan:focus-visible { color: var(--accent); border-color: currentColor; }
.val .cp { height: 20px; padding: 0 4px; font-size: 11px; gap: 3px; color: var(--muted); opacity: 0; transition: opacity .12s; box-shadow: none; flex: none; border: 0; background: transparent; cursor: pointer; }
.props dd:hover .cp, .val:hover .cp, .val .cp:focus-visible, td:hover .cp { opacity: 1; }
.props dd .val:has(> .cp) { padding-right: 48px; }
@media (hover: none) { .val .cp { opacity: 1; } }
/* Inside a grid cell the Copy button floats over the row exactly like the Edit pencil: at opacity 0 it must not eat
   the width the value needs — a phone in the 110px column read '+..' beside a button nobody could see. */
td .val.cell .cp { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); margin: 0; background: var(--surface-2); }
td .val.cell > a.chan { flex: 0 1 auto; }
/* the People tab and the contact page: the new-person card (e-mail, phone, company) opens once the picker holds a 'New:' chip */
.people-add .new-card { display: none; flex: 1 1 100%; gap: 6px; align-items: center; flex-wrap: wrap; }
.people-add:has(.pick-chip.new) .new-card { display: flex; }
.people-add .new-card input { flex: 1 1 140px; min-width: 120px; }
.people-add .rpick { flex: 1 1 220px; min-width: 200px; }
/* the duplicate check: the look-alikes with why they match, and the two ways out */
.dup-list li .why { color: var(--muted); font-size: 12px; }
.dup-list li .r { display: flex; gap: 6px; }

/* ---- round 6 · the gates: the deal tab strip's tail, the gate at the move, the two passes of the Screen ---- */
/* the tenth tab is clipped in Spanish on a narrow screen: below 1200px the tail folds into a menu beside the strip.
   The menu sits OUTSIDE .tabs, because .tabs scrolls on a phone and a scrolling box clips an absolute panel. */
.tabstrip { display: flex; align-items: flex-start; gap: 4px; }
.tabstrip > .tabs { flex: 1 1 auto; min-width: 0; }
.deal .tabstrip { position: sticky; top: 64px; z-index: 5; background: var(--surface); margin: 0 0 16px; padding-top: 2px; }
.deal .tabstrip > .tabs { margin: 0; }
.more-tabs { display: none; flex: none; margin-top: 5px; }   /* centred on the 36px strip, which has no top margin here */
.more-tabs > summary { height: 26px; line-height: 24px; padding: 0 8px; }
.more-tabs .menu-panel a { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r2); font-size: 13px; color: var(--ink); }
.more-tabs .menu-panel a:hover { background: var(--surface-2); }
.tabs a .n.warn { color: var(--warn); font-weight: 700; }
/* folded = the strip measured itself and the tabs do not fit (page.html, on load and on resize): the tail moves into
   the menu at the width where it actually stops fitting, in either language. The media query is the no-script floor. */
.tabstrip.folded .tabs a.tail { display: none; }
.tabstrip.folded .more-tabs { display: inline-block; }
@media (max-width: 1200px) {
  .tabs a.tail { display: none; }
  .more-tabs { display: inline-block; }
}
/* the gate at the move: what this stage still asks for, and what the next one opens with */
.stage-gate { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.stage-gate ul.plain li { padding: 2px 0; line-height: 1.4; }
.stage-gate ul.plain li.ok { color: var(--ok); }
.stage-gate ul.plain li.warn { color: var(--warn); }
@media (max-width: 860px) { .stage-gate { grid-template-columns: 1fr; } }
/* the Screen's two passes: one filter over one form, never a second form */
.pass-switch { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; }
.pass-switch a { font: 500 12px var(--sans); color: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r2); padding: 3px 10px; background: var(--surface); }
.pass-switch a.on { color: var(--surface); background: var(--ink); border-color: var(--ink); }
.pass-switch span { flex: 1 1 260px; }
/* ---- round 7 · Home as the one place to work from: "Needs you" as rows that act (templates/home/_row.html) ---- */
.work-card { margin: 0 0 12px; }
.work-card > h2 { margin: 0 0 8px; font-size: 13px; }
.work-card > h2 .n { font: 500 11px var(--mono); color: var(--muted); }
.work { list-style: none; margin: 0; padding: 0; }
.work > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.work > li:last-child { border-bottom: 0; }
.work > li.bad { box-shadow: inset 2px 0 var(--bad); padding-left: 8px; }
.work > li.warn { box-shadow: inset 2px 0 var(--warn); padding-left: 8px; }
.work > li.done { opacity: .6; box-shadow: none; }
/* the kind chip: one fixed column, so seven kinds read as one list and not as seven lists */
.work .chip.k { flex: none; min-width: 88px; justify-content: flex-start; margin-top: 1px; }
.work .chip.k.file::before, .work .chip.k.answer::before { background: var(--accent); }
.work .chip.k.send::before, .work .chip.k.approve::before { background: var(--teal); }
.work .chip.k.do::before, .work .chip.k.chase::before { background: var(--bad); }
.work .chip.k.waiting::before { background: var(--warn); }
.work .w { min-width: 0; }
.work .w .t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.work .w .ttl { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work .w .m { color: var(--muted); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work .w .m a { color: var(--ink-2); }
.work .chip.age { height: 18px; font-size: 11px; flex: none; }
.work .act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.work .act form { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.work .act .rpick { min-width: 150px; max-width: 220px; }
.work .act .pick-chip { max-width: 150px; }
.work .act input[type=text] { min-width: 150px; }
.work .dr { grid-column: 1 / -1; }
.work .dr > form.inline-form { margin-top: 6px; }
/* the filter chips and the person chips above the list: the .attention pill with an on state */
.attention.wkchips, .attention.wkpeople { margin: 0 0 8px; }
/* a chip keeps its words on one line and takes a new line rather than being squeezed off the card (390px) */
.attention.wkchips a, .attention.wkpeople a { flex: none; white-space: nowrap; }
.attention.wkpeople .lbl { color: var(--muted); font-size: 12px; align-self: center; }
.attention a.on { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
@media (max-width: 860px) {
  .work > li { grid-template-columns: auto minmax(0, 1fr); }
  .work .act { grid-column: 1 / -1; justify-content: flex-start; }
  .work .act .rpick, .work .act input[type=text] { min-width: 0; flex: 1 1 140px; }
  .work .chip.k { min-width: 0; }
}

/* the task page (round 7): its comments, the @name list under the box, and the people on it */
.tk-comments .e { padding: 8px 0; border-bottom: 1px solid var(--hair); }
.tk-comments .e:last-of-type { border-bottom: 0; }
.tk-comments .e .h { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tk-comments .e .h b { font-weight: 500; color: var(--ink-2); }
.tk-comments .e .b { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.tk-comments .mention { color: var(--accent); font-weight: 500; }
.tk-write { margin-top: 10px; }
.rmention { position: relative; }
.rmention textarea { width: 100%; box-sizing: border-box; min-height: 64px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface-3); color: var(--ink); font: 400 13px/1.45 var(--sans); box-shadow: var(--sh1); }
/* the record picker's list is fixed and placed by base.html; this one belongs to the box above it */
.rmention .pick-hits { position: absolute; left: 0; top: calc(100% + 2px); width: min(320px, 100%); }
.tk-desc { display: flex; align-items: flex-start; gap: 8px; max-width: 760px; }
.tk-desc > span:first-child { flex: 1 1 auto; }
.tk-people li .person { min-width: 0; }
.dc-meta .avatar { flex: none; }

/* live jobs: sidebar list, phone strip, deal AI tab. Pulse is a circle, never a square. */
.live-jobs.on { border-top: 1px solid var(--hair); padding: 8px 6px; margin-bottom: 4px; }
.live-head { display: flex; align-items: center; gap: 6px; font: 500 12px var(--sans); color: var(--ink); margin: 0 0 6px; }
.live-head .n { margin-left: auto; color: var(--side-muted); }
.live-list { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow: auto; }
.live-list li { margin: 0; }
.live-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 5px 6px; border-radius: var(--r2); color: var(--side-ink); font-size: 12px; }
.live-list a:hover { background: var(--surface-hover); color: var(--ink); }
.live-list .k { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-list .d, .live-list .w { grid-column: 1; font-size: 11px; color: var(--side-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-list .m { grid-column: 2; grid-row: 1; font: 400 11px var(--sans); color: var(--muted); white-space: nowrap; }
.live-bar { display: none; color: inherit; text-decoration: none; }
.deal-jobs { display: none; }
.deal-jobs.on { display: block; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r3); background: var(--surface); box-shadow: inset 2px 0 var(--teal); }
.deal-jobs .live-head { margin: 0 0 4px; }
.deal-jobs .live-list a { color: var(--ink-2); }
.deal-jobs .live-list .k { color: var(--ink); }
.tabs a.live { color: var(--ink); }
.tabs a.live::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--teal); vertical-align: 1px; animation: ib-pulse 1.2s ease-in-out infinite; }

/* AI tab: each act is a card, the provider is a word, not a coloured square */
.ai-block { border: 1px solid var(--hair); border-radius: var(--r3); padding: 14px 16px; margin: 0 0 12px; background: var(--surface); }
.ai-block h2 { margin: 0 0 6px; }
.ai-block .panel { border: 0; padding: 0; margin: 10px 0 0; background: transparent; box-shadow: none; }
.ai-block .card { margin-top: 10px; border: 0; padding: 0; background: transparent; }
.ai-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ai-who { font: 500 12px var(--sans); color: var(--ink-2); }
.ai-who.on { color: var(--ok); }
.ai-who.off { color: var(--bad); }

@media (max-width: 860px) {
  .live-bar.on { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-bottom: 1px solid var(--hair); background: var(--surface); box-shadow: inset 2px 0 var(--teal); font-size: 12px; color: var(--ink-2); }
  .live-bar .n { font: 500 11px var(--mono); color: var(--ink); }
  .live-bar .ellipsis { min-width: 0; flex: 1; }
}

a.live-head { color: inherit; text-decoration: none; border-radius: var(--r2); }
a.live-head:hover { background: var(--surface-hover); color: var(--ink); }

/* deal page: full width, no sticky left rail */
.deal .card-form, .deal .ai-block, .deal .verdict-box, .deal .screen-card { max-width: 760px; }
.screen-card { border: 1px solid var(--hair); border-radius: var(--r4); padding: 14px 16px; margin: 0 0 16px; background: var(--surface); }
.screen-card.empty-screen { box-shadow: none; }
.screen-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.screen-card-h h2, .screen-card-h h3 { margin: 0; }
.screen-card-h .sub { margin-top: 4px; max-width: 52ch; }
.qpips { display: flex; gap: 6px; flex-wrap: wrap; }
.qpip { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 11px var(--mono); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--hair); flex: none; }
.qpip.ok { color: var(--ok); border-color: var(--ok); background: transparent; }
.qpip.red { color: var(--bad); background: var(--bad-bg); border-color: transparent; }
.qpip.amber { color: var(--warn); border-color: var(--warn); background: transparent; }
.qpip.unknown { color: var(--faint); }
a.qpip:hover { background: var(--surface-hover); color: var(--ink); }
.next-tasks li a.ink { white-space: normal; color: var(--ink); }
.next-tasks li a.ink:hover { color: var(--accent); }
.jobs-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
.jobs-list .live-row { box-shadow: inset 2px 0 var(--teal); }

/* Round 12 · a template master read on screen: the firm's own paper, with its blanks marked as the fields they
   are. A master is longer than a note, so the column scrolls rather than pushing the properties off the page. */
.doc.master { max-height: 72vh; overflow-y: auto; max-width: 78ch; }
.doc.master p { margin: 0 0 8px; }
.doc.master table { border-collapse: collapse; margin: 10px 0; }
.doc.master td, .doc.master th { border: 1px solid var(--hair); padding: 5px 8px; vertical-align: top; text-align: left; }
.doc .blank { background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: var(--r1); color: var(--ink-2);
  padding: 0 4px; font-family: var(--mono); font-size: .88em; white-space: nowrap;
  /* a master writes a long value as thirty-four underscores: the field is clipped to the column rather than
     pushing the page sideways on a phone */
  display: inline-block; max-width: 100%; overflow: hidden; vertical-align: bottom; }
.doc.master h2 { margin-top: 18px; }
@media (max-width: 860px) { .doc.master { max-height: none; } }
/* the kind of paper inside a moment on the templates shelf: the line that says who it goes to sits here, once,
   over the variants it governs */
.list li.kind { grid-template-columns: minmax(0, 1fr); padding-bottom: 4px; border-bottom: 0; }
.list li.kind + li { border-top: 0; }
.list li.kind b { font-size: 13px; }
.list li.kind .m { margin-top: 1px; }

/* Documents › Templates as a grid (21-09): a card per kind of paper, its variants listed inside with their own Generate */
.tpl-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.tpl-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tpl-top { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.tpl-head { min-width: 0; }
.tpl-head b { display: block; font: 600 15px/1.3 var(--serif); }
.tpl-head .m { color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.tpl-vars { list-style: none; margin: 0; padding: 0; }
.tpl-vars li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--hair); min-height: 36px; }
.tpl-vars li.done { opacity: .6; }
.tpl-var { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.deal-pick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.deal-pick a.card { display: block; color: var(--ink); padding: 10px 12px; }
.deal-pick a.card:hover { background: var(--surface-hover); }
.deal-pick a.card b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-pick a.card .m { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-pick-find { width: 100%; max-width: 360px; }