/* Theme (2026-11 Apple-style pass): every colour below has a dark twin in html[data-theme="dark"] at the end of the
   file. Neutrals follow Apple's system greys; ACMI navy stays the brand and main-action colour. */
:root {
  --bg: #f5f5f7; --panel: #fff; --panel-2: #fbfbfd; --fill: rgba(118, 118, 128, .12); --hover: rgba(0, 0, 0, .035);
  --text: #1d1d1f; --text-2: #3a3a3c; --muted: #6e6e73; --muted-2: #8e8e93;
  --line: rgba(60, 60, 67, .14); --line-strong: rgba(60, 60, 67, .26);
  --accent: #1f3a5f; --accent-hover: #2a4b78; --accent-soft: rgba(31, 58, 95, .08); --link: #24518a;
  --good: #1f8a3d; --good-bg: rgba(52, 199, 89, .14);
  --bad: #c4291c; --bad-bg: rgba(255, 59, 48, .12); --warn: #a35a00; --warn-bg: rgba(255, 159, 10, .16);
  --ink-mix: 100%;
  --radius: 8px; --radius-lg: 14px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 .5px rgba(0, 0, 0, .05);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .06);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .08);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  font-size: 14px; color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.45;
  letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.overdue { color: var(--bad); font-weight: 600; }

/* Shell */
.shell { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
.sidebar { background: var(--accent); color: #fff; padding: 16px 12px; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { display: block; font-weight: 700; font-size: 16px; margin: 0 0 18px; padding: 0 8px; letter-spacing: .02em; color: #fff; }
.sidebar .brand:hover { background: none; }
/* logo.png is the white version, made for the navy sidebar. */
.sidebar .brand img { display: block; width: 100%; max-width: 170px; height: auto; padding: 4px 4px 0; }
.sidebar a { display: block; color: #dbe4f0; padding: 7px 10px; border-radius: var(--radius); }
.sidebar a:hover, .sidebar a.active { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.sidebar .user { position: absolute; bottom: 16px; left: 12px; right: 12px; font-size: 12px; color: #b9c6d8; }
.sidebar .user a { display: inline; padding: 0; color: #fff; }
main { padding: 20px 28px; min-width: 0; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 20px; margin: 0; }
.page-head .spacer { flex: 1; }

/* Controls */
.btn, button { display: inline-block; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  padding: 6px 12px; border-radius: var(--radius); cursor: pointer; font: inherit; }
.btn:hover, button:hover { border-color: var(--line-strong); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-small { padding: 3px 8px; font-size: 12px; }
.btn-danger { color: var(--bad); border-color: #e9b8b3; }
.btn-danger:hover { background: var(--bad-bg); }
.btn-link { border: 0; background: none; color: var(--accent); padding: 0; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--text); max-width: 100%; }
textarea { width: 100%; }
.messages { list-style: none; padding: 0; margin: 0 0 12px; }
.messages li { padding: 8px 12px; border-radius: var(--radius); background: var(--good-bg); color: var(--good); margin-bottom: 6px; }
.messages li.error { background: var(--bad-bg); color: var(--bad); }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 12px; }
.filters label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.filters select[multiple] { height: 64px; }
details.columns summary { cursor: pointer; color: var(--accent); }
details.columns .grid { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 16px; padding: 8px 0; }

/* Tables */
.table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.data th { background: var(--panel-2); font-weight: 600; font-size: 12px; color: var(--muted); position: sticky; top: 0; }
table.data th a { color: var(--muted); }
table.data tr:hover td { background: var(--hover); }
table.data td.wrap { white-space: normal; }
.pager { display: flex; gap: 10px; align-items: center; padding: 10px; color: var(--muted); }

/* Pills */
.pill, .tag, .stage { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; background: var(--fill); color: var(--text-2); }
.pill-high { background: var(--bad-bg); color: var(--bad); }
.pill-mid { background: var(--warn-bg); color: var(--warn); }
.pill-low { background: var(--fill); color: var(--muted); }
.pill-good { background: var(--good-bg); color: var(--good); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.stage { background: var(--accent-soft); color: var(--accent); }
.stage-tenant, .stage-opportunity { background: var(--good-bg); color: var(--good); }
.stage-not_interested, .stage-do_not_contact { background: var(--bad-bg); color: var(--bad); }

/* Record page */
.record-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.record-head h1 { margin: 0; font-size: 22px; }
.record-nav { margin-left: auto; display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; }
.record { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; }
.panel h3 { margin: 0 0 10px; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--muted); }
.fields p { margin: 0 0 10px; }
.fields label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.fields input:not([type=checkbox]):not([type=radio]), .fields select, .fields textarea { width: 100%; }

/* News review */
.news-section { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--muted); margin: 22px 0 8px; }
.news-card { border-left: 3px solid var(--line); outline: none; }
.news-card:focus-within, .news-card:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
.news-card.decided-proceed, .news-card.decided-pursue { border-left-color: var(--good); }
.news-card.decided-decline, .news-card.decided-pass { border-left-color: var(--bad); opacity: .8; }
.news-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.news-card-head .stage, .news-card-head .tag { margin-left: 4px; }
.decide { display: flex; gap: 6px; }
.btn-danger-on { background: var(--bad); border-color: var(--bad); color: #fff; }
.draft-box { margin-top: 8px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.draft-box input { margin-bottom: 6px; }
.draft-html { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; min-height: 80px; margin-top: 4px; }
.news-card-foot { display: flex; gap: 10px; align-items: flex-end; margin-top: 8px; flex-wrap: wrap; }
.news-card-foot textarea { flex: 1; min-width: 220px; }

/* Project / prospecting chips */
.chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px; margin-right: 5px;
  letter-spacing: .02em; vertical-align: 1px; }
a.chip:hover { text-decoration: none; filter: brightness(.95); }
.chip-project { background: rgba(0, 76, 217, 0.106); color: color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text)); }
.chip-prospecting { background: rgba(132, 88, 0, 0.114); color: color-mix(in srgb, #7a5b1d var(--ink-mix), var(--text)); }

/* AI summary */
.ai-summary { border-left: 3px solid var(--accent); }
.ai-summary p { margin: 0 0 8px; }
.ai-summary .ai-headline { font-weight: 600; font-size: 15px; }
.ai-summary ul { margin: 0 0 8px; padding-left: 18px; }
.ai-summary li { margin-bottom: 3px; }

/* Read-only details + edit dialog */
dl.details { margin: 0 0 6px; display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; font-size: 13px; }
dl.details dt { color: var(--muted); font-size: 12px; padding-top: 2px; }
dl.details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dl.details dd.prose { white-space: normal; }
.edit-dialog { border: 0; border-radius: 10px; padding: 0; width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); box-shadow: 0 20px 60px rgba(15, 23, 42, .3); color: var(--text); }
.edit-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.edit-dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px;
  border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; font-size: 16px; text-transform: capitalize; }
.dialog-body { padding: 14px 18px; overflow-y: auto; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }

/* Chip pickers (fit score, campus of interest) */
#id_fit_score, #id_campus_choice { display: flex; flex-wrap: wrap; gap: 6px; }
#id_fit_score label, #id_campus_choice label { display: inline-block; margin: 0; padding: 4px 12px; border: 1px solid var(--line);
  border-radius: 99px; cursor: pointer; font-size: 13px; color: var(--text); background: var(--panel); user-select: none; }
#id_fit_score label:hover, #id_campus_choice label:hover { border-color: var(--accent); }
#id_fit_score input, #id_campus_choice input { position: absolute; opacity: 0; pointer-events: none; }
#id_fit_score label:has(input:checked), #id_campus_choice label:has(input:checked) {
  background: var(--accent); border-color: var(--accent); color: #fff; }
.fit-definition { font-size: 12px; color: var(--muted); margin-top: 4px; min-height: 1em; }
.fields ul { list-style: none; padding: 0; margin: 0; }
.fields .helptext { display: block; font-size: 11px; color: var(--muted); }
.errorlist { color: var(--bad); margin: 0; padding-left: 16px; font-size: 12px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.card .label { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.card .value { font-size: 16px; font-weight: 600; margin-top: 4px; }
.card .sub { font-size: 12px; color: var(--muted); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.timeline li.bg { opacity: .65; font-size: 13px; }
.timeline .icon { text-align: center; }
.timeline .when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.timeline .meta { color: var(--muted); font-size: 12px; }
.timeline .body { white-space: pre-wrap; font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* Tasks */
.tasklist { list-style: none; padding: 0; margin: 0; }
.tasklist li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line); }
.tasklist li form { margin: 0; }
.tasklist .done { text-decoration: line-through; color: var(--muted); }
.inline-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.inline-form input[name=title] { flex: 1; min-width: 160px; }

/* Kanban */
.board { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start; padding-bottom: 12px; }
.column { background: var(--fill); border-radius: var(--radius); width: 250px; flex: 1 0 250px; padding: 8px; min-height: 120px; }
.column h4 { margin: 2px 4px 8px; font-size: 13px; display: flex; justify-content: space-between; }
.column.drop { outline: 2px dashed var(--accent); }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; cursor: grab; }
.kcard .sub { font-size: 12px; color: var(--muted); }

/* Home */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 1000px) {
  .record, .grid-2 { grid-template-columns: minmax(0, 1fr); }  /* minmax: a wide table scrolls, the column doesn't grow */
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 4px; }
  .sidebar .user { position: static; }
}

/* Sign-in */
.login { max-width: 360px; margin: 12vh auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 28px; overflow: hidden; }
.login .login-logo { background: var(--accent); margin: -28px -28px 22px; padding: 26px 28px 22px; text-align: center; }
.login .login-logo img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.login h1 { font-size: 16px; margin: 0 0 16px; color: var(--muted, var(--muted)); font-weight: 600; text-align: center; }
.login input { width: 100%; margin-bottom: 10px; }
.login .btn { width: 100%; text-align: center; }
.login hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* Pipeline (Home, board, report) */
.subhead { font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 4px; }
.subhead:first-of-type { margin-top: 0; }
.row-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.row-line:last-child { border-bottom: 0; }
table.data.compact td, table.data.compact th { padding: 5px 8px; }
.num { text-align: right; white-space: nowrap; }
.kcard .risk { font-size: 11px; color: var(--bad); margin-top: 3px; }
.kcard .next { font-size: 12px; margin-top: 3px; }
.column.collapsed { width: 150px; flex: 0 0 150px; }
.board-summary { font-size: 12px; color: var(--muted); margin: -6px 0 10px; }
.role-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.bulkbar { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: var(--accent-soft); border-radius: var(--radius); margin-bottom: 10px; font-size: 13px; }
.bulkbar[hidden] { display: none; }
details.checks { position: relative; }
details.checks > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 8px; background: var(--panel); min-width: 120px; font-size: 13px; color: var(--text); }
details.checks > summary::after { content: " ▾"; color: var(--muted); }
details.checks > div { position: absolute; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); min-width: 170px; }
details.checks label { display: flex !important; flex-direction: row !important; gap: 6px; align-items: center; color: var(--text) !important; padding: 2px 0; white-space: nowrap; }
.danger-zone { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.danger-zone summary { font-size: 12px; color: var(--muted); cursor: pointer; }
@media print {
  .sidebar, .no-print, .messages { display: none !important; }
  .shell { display: block !important; }
  main { padding: 0 !important; }
  .panel { break-inside: avoid; border: 0; padding: 0; }
}
.stack-form select, .stack-form input:not([type=file]):not([type=checkbox]) { width: 100%; margin-bottom: 6px; }

.report-logo { display: block; height: auto; margin: 0 0 12px; }
@media print { .report-logo { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Sidebar tree */
.sidebar { overflow-y: auto; display: flex; flex-direction: column; }
.sidebar .user { position: static; margin-top: auto; padding: 14px 8px 0; }
.sidebar .nav-group { font-size: 12px; text-transform: none; letter-spacing: 0; color: #8fa3bd; margin: 14px 10px 4px; font-weight: 600; }
.sidebar a.nav-top { font-weight: 600; color: #fff; }
.sidebar .nav-1 { padding: 5px 10px 5px 16px; font-size: 13.5px; }
.sidebar .nav-2 { padding: 3px 10px 3px 30px; font-size: 12.5px; color: #b9c6d8; position: relative; }
.sidebar .nav-2::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 50%; border-left: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); width: 6px; }
.sidebar .nav-bell { font-size: 13px; margin-bottom: 4px; }
.tag-alert { background: #e5484d; color: #fff; }

/* Meetings calendar */
.cal { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; margin-bottom: 8px; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head div { font-size: 12px; text-transform: none; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.cal-day { min-height: 104px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.other { background: var(--fill); }
.cal-day.other .cal-date { color: #b0b6c0; }
.cal-day.today .cal-date { background: var(--accent); color: #fff; border-radius: 99px; padding: 0 7px; }
.cal-date { font-size: 12px; font-weight: 600; align-self: flex-start; margin-bottom: 2px; }
.cal-event { all: unset; box-sizing: border-box; display: block; width: 100%; font-size: 11.5px; padding: 2px 5px; border-radius: 4px; background: var(--fill); color: var(--text-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event:hover { filter: brightness(.95); }
.cal-event.ext { background: rgba(0, 76, 217, 0.106); color: color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text)); }
.cal-event.notes::before { content: "📝 "; }
.meeting-dialog { width: min(980px, 94vw); max-height: 88vh; border: 0; border-radius: 12px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.meeting-dialog::backdrop { background: rgba(15,23,42,.45); }
.meeting-panel { padding: 20px 24px; }
.mp-head { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.mp-head h2 { margin: 0 0 4px; font-size: 18px; }
.mp-grid { display: grid; grid-template-columns: 1fr 260px; gap: 24px; }
.mp-grid h3 { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); margin: 14px 0 6px; }
.mp-grid h3:first-child { margin-top: 0; }
.action-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; background: var(--panel-2); }
.granola { font-size: 13.5px; line-height: 1.5; }
.granola h4 { font-size: 14px; margin: 14px 0 4px; }
.granola ul { margin: 2px 0 6px; padding-left: 18px; }
.granola .li-detail { color: var(--muted); font-size: 12.5px; margin: 0 0 4px 18px; }
.attendees { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.attendees li { padding: 3px 0; border-bottom: 1px solid var(--line); word-break: break-all; }
@media (max-width: 760px) { .mp-grid { grid-template-columns: 1fr; } .cal-day { min-height: 70px; } }

/* Comments + notifications */
.comment-form textarea { width: 100%; margin-bottom: 6px; }
.comment { border-top: 1px solid var(--line); padding: 8px 0; }
.comment-head { font-size: 12.5px; }
.comment-body { font-size: 13.5px; }
.comment-body p { margin: 3px 0; }
.mention { background: rgba(0, 76, 217, 0.106); color: color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text)); border-radius: 3px; padding: 0 3px; font-weight: 600; }
.notif { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 13.5px; }
.notif:hover { background: var(--fill); text-decoration: none; }
.notif.unread { font-weight: 600; }
.notif.unread .notif-kind::before { content: "● "; color: color-mix(in srgb, #e5484d var(--ink-mix), var(--text)); }
.notif-kind { font-size: 12px; color: var(--muted); }
.notif-when { font-size: 12px; white-space: nowrap; font-weight: 400; }

/* Collapsible sidebar sections */
.sidebar details > summary { list-style: none; cursor: pointer; position: relative; }
.sidebar details > summary::-webkit-details-marker { display: none; }
.sidebar .nav-sec > summary { font-size: 12px; text-transform: none; letter-spacing: 0; color: #8fa3bd; margin: 12px 0 3px; padding: 3px 10px; font-weight: 600; border-radius: var(--radius); }
.sidebar .nav-sec > summary:hover { color: #fff; }
.sidebar .nav-sec > summary::after, .sidebar .nav-sub > summary::after { content: "›"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: transform .15s; color: #8fa3bd; font-size: 13px; }
.sidebar details[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
.sidebar .nav-sub > summary { margin: 0; }
.sidebar .nav-sub > summary a { padding-right: 26px; }
.sidebar .nav-planned { display: block; color: #8fa3bd; cursor: default; }

/* Possible duplicates */
.dup-help { font-size: 13px; color: var(--muted); }
.dup-group { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.dup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(0, 36, 109, 0.027); }
.dup-reasons { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.dup-reasons .tag { font-size: 11px; }
.dup-actions { display: flex; gap: 6px; white-space: nowrap; }
table.dup-table { table-layout: fixed; width: 100%; margin: 0; border: 0; }
table.dup-table th, table.dup-table td { vertical-align: middle; }
table.dup-table .center { text-align: center; }
table.dup-table .dup-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.dup-table .dup-domains { white-space: normal; }
table.dup-table .dup-domains .tag { margin: 1px 2px 1px 0; }
table.dup-table tr.dup-keep td { background: var(--accent-soft); }
table.dup-table tr.dup-keep .dup-name a { font-weight: 600; }
.cal-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; padding: 8px 12px; margin-bottom: 10px; background: var(--accent-soft); border-radius: var(--radius); }

/* Dashboard week calendar */
.week-panel h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.week-nav { margin-left: auto; display: flex; gap: 4px; text-transform: none; letter-spacing: 0; }
.week-grid { display: grid; gap: 8px; }
.week-day { background: var(--fill); border-radius: var(--radius); padding: 6px; min-height: 120px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.week-day.today { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.week-day.past { opacity: .75; }
.week-date { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: baseline; margin-bottom: 2px; }
.week-date strong { font-size: 15px; color: var(--text); }
.week-day.today .week-date strong { color: var(--accent); }
.cal-event.week-event { white-space: normal; padding: 5px 7px; background: var(--panel); border: 1px solid var(--line); line-height: 1.3; }
.cal-event.week-event.ext { background: rgba(0, 76, 217, 0.106); border-color: rgba(0, 71, 208, 0.212); }
.week-time { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.week-title { display: block; font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.week-co { display: inline-block; margin-top: 2px; margin-right: 3px; font-size: 10.5px; padding: 0 5px; border-radius: 3px; background: var(--panel); color: color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text)); }
.week-empty { font-size: 12px; padding: 4px; }
@media (max-width: 900px) { .week-grid { grid-template-columns: 1fr !important; } .week-day { min-height: 0; } }
.clist-holder { list-style: none; text-align: center; padding: 8px 0 2px; display: block !important; border: 0 !important; }
.clist [hidden] { display: none !important; }

/* Land search */
main:has(.land) { padding: 0; max-width: none; }
.land-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); min-height: 0; overflow-y: auto; }
.land-side-head { padding: 8px 14px 2px; }
.land-side-head h1 { font-size: 18px; margin: 0 0 2px; }
.land-filters { padding: 6px 14px 8px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.land-filters input:not([type=checkbox]), .land-filters select { width: 100%; }
.lf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.lf-grid label, .lf-status { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.lf-checks { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.lf-checks a { margin-left: 4px; color: var(--muted); }
.lf-group summary { cursor: pointer; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.land-count { padding: 8px 14px; font-size: 13px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.land-results { list-style: none; margin: 0; padding: 0; }
.land-count { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.land-results li { display: flex; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; align-items: flex-start; }
.land-results li:hover, .land-results li.on { background: var(--accent-soft); }
.lr-score { min-width: 30px; text-align: center; color: #fff; border-radius: 5px; font-weight: 700; font-size: 12px; padding: 2px 0; }
.map-search-results div { padding: 7px 10px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.map-search-results div:hover { background: var(--accent-soft); }
.ml-h { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; margin-top: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }
.lg.h { background: #1aa34a; } .lg.m { background: #f0a500; } .lg.l { background: #9aa3ad; } .lg.k { background: #d7301f; } .lg.p { background: #1e6bff; } .lg.w { background: #9b59ff; }
.land-card { padding: 14px 16px; font-size: 13px; }
.land-card section { margin-top: 14px; }
.land-card h3 { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); margin: 0 0 6px; }
.lc-head { display: flex; gap: 12px; align-items: flex-start; }
.lc-head h2 { margin: 0; font-size: 17px; }
.lc-net { font-size: 13px; font-weight: 400; }
.lc-title { flex: 1; }
.lc-close { font-size: 18px; color: var(--muted); }
.lc-score { min-width: 46px; height: 46px; border-radius: 8px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; }
.lc-score.sh { background: #1aa34a; } .lc-score.sm { background: #f0a500; } .lc-score.sl { background: #9aa3ad; } .lc-score.sk { background: #d7301f; }
.lc-killers { margin-top: 10px; background: var(--bad-bg); color: var(--bad); border-radius: var(--radius); padding: 6px 10px; font-weight: 600; }
.lc-status { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.lc-status .on.st-pursue { background: #1e6bff; border-color: #1e6bff; color: #fff; }
.lc-status .on.st-watch { background: #9b59ff; border-color: #9b59ff; color: #fff; }
.lc-status .on.st-pass { background: #5b6470; border-color: #5b6470; color: #fff; }
.lc-reason { flex: 1; min-width: 120px; font-size: 12px; padding: 3px 6px; }
.lc-small { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.lc-dl { display: grid; grid-template-columns: 96px 1fr; gap: 3px 10px; margin: 0; }
.lc-dl dt { color: var(--muted); }
.lc-dl dd { margin: 0; overflow-wrap: anywhere; }
.lc-reasons { list-style: none; margin: 0; padding: 0; }
.lc-reasons li { display: flex; gap: 8px; padding: 2px 0; }
.lc-reasons .pts { min-width: 28px; text-align: right; font-weight: 700; color: var(--good); }
.lc-reasons .r-warn .pts { color: var(--muted); }
.lc-reasons .r-bad .pts, .lc-reasons .r-bad { color: var(--bad); }
.lc-table { width: 100%; border-collapse: collapse; }
.lc-table th { text-align: left; color: var(--muted); font-weight: 400; vertical-align: top; width: 120px; padding: 3px 8px 3px 0; }
.lc-table td { padding: 3px 0; vertical-align: top; }
.lc-table tr + tr th, .lc-table tr + tr td { border-top: 1px solid rgba(0, 34, 85, 0.059); }
.lc-confirm { margin: 0; padding-left: 18px; color: var(--warn); }
.lc-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.lf-tree { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.lf-tree a { color: var(--muted); margin-left: 4px; }
.lf-tree label { display: inline; }
.lf-l1 { font-weight: 600; }
.lf-caret { all: unset; cursor: pointer; display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; color: color-mix(in srgb, #4a5563 var(--ink-mix), var(--text)); font-size: 14px; vertical-align: middle; }
.lf-caret::before { content: "▾"; }
.lf-caret.shut::before { content: "▸"; }
.lf-caret:focus-visible { outline: 2px solid #1e6bff; border-radius: 3px; }
.lf-kids[hidden] { display: none; }
.lf-region { margin-left: 14px; }
.lf-l2 { font-weight: 500; }
.lf-county { margin-left: 18px; }
.tools-panel label { display: block; margin: 4px 0; }
.tools-panel select, .tools-panel input:not([type=radio]) { width: 100%; margin-top: 2px; }
.tools-tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.tools-tabs button { border: 0; background: none; padding: 4px 8px; border-radius: var(--radius); color: var(--muted); }
.tools-tabs button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tools-tabs .tools-close { margin-left: auto; }
.tools-seg { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.tool-result { margin: 8px 0; font-size: 14px; }
.tool-result:empty { display: none; }
.tools-actions { display: flex; gap: 6px; }
.heat-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.heat-legend i, .route-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.drive-pin { background: #111; color: #fff; border: 2px solid #fff; border-radius: 50%; text-align: center; font-weight: 700; line-height: 18px; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.qd-grip { height: 8px; cursor: ns-resize; background: linear-gradient(rgba(0, 27, 73, 0.110), rgba(0, 27, 73, 0.110)) center / 48px 3px no-repeat; }
.qd-grip:hover { background-color: var(--accent-soft); }
.qd-head { display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.qd-head .spacer { flex: 1; }
.qd-body { flex: 1; display: grid; grid-template-columns: 1fr 260px; min-height: 0; }
.qd-table-wrap { overflow: auto; }
.qd-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.qd-table th { position: sticky; top: 0; background: var(--panel-2); color: var(--muted); font-weight: 600; text-align: left; padding: 5px 6px; white-space: nowrap; }
.qd-table td { padding: 3px 6px; border-top: 1px solid rgba(0, 34, 85, 0.059); white-space: nowrap; }
.qd-table input, .qd-table select { font-size: 12px; padding: 2px 4px; }
.qd-table .num { text-align: right; }
.qd-summary { border-left: 1px solid var(--line); padding: 8px 12px; overflow-y: auto; font-size: 13px; }
.qd-kv { display: flex; justify-content: space-between; padding: 2px 0; }
.qd-verdict { padding: 6px 8px; border-radius: var(--radius); font-weight: 600; margin-bottom: 6px; }
.qd-verdict.ok { background: var(--good-bg); color: var(--good); }
.qd-verdict.bad { background: var(--bad-bg); color: var(--bad); }
.qd-pin span { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; background: #e31a1c; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: move; }
.qd-pin.bad span { background: #111; outline: 2px solid #e31a1c; }

.asm-main { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.asm-owners { margin: 2px 0 6px; }
.asm-actions { display: flex; gap: 6px; }
.site-dialog { border: 0; border-radius: 10px; padding: 18px 20px; width: min(440px, 92vw); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.site-dialog h3 { margin: 0 0 10px; }
.site-dialog label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.site-dialog input, .site-dialog select, .site-dialog textarea { width: 100%; color: var(--text); font-size: 14px; }
.site-dialog-actions { display: flex; gap: 8px; align-items: center; }
.site-dialog-actions .spacer { flex: 1; }
.lc-asm { margin-top: 8px; font-size: 12px; }

.proj-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
/* minmax(0, …) keeps the single phone column at the screen's width; a plain 1fr grows to its widest table. */
@media (max-width: 1000px) { .proj-layout { grid-template-columns: minmax(0, 1fr); } }
.campus-card { padding: 0; overflow: hidden; }
.campus-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 12px 14px; background: var(--accent-soft); flex-wrap: wrap; }
.campus-head h2 { margin: 0; font-size: 18px; }
.campus-stats { font-size: 13px; color: var(--muted); }
.campus-sites { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; }

/* Land search layout: filters | (toolbar / map + docked card / docked QD drawer) */
.land { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  height: calc(var(--main-vh, 100vh) - var(--topbar-h)); }  /* fills the window under the top bar, with no page scroll */
.land.side-closed { grid-template-columns: 0 minmax(0, 1fr); }
.land.side-closed .land-side { visibility: hidden; border: 0; }
.land-side { grid-row: 2; }
.land-work { grid-row: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; }
.land-toolbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--panel);
  border-bottom: 1px solid var(--line); flex-wrap: wrap; position: relative; z-index: 1000; }
.tb-title { font-weight: 700; font-size: 15px; margin-right: 6px; cursor: default; }
.tb-btn, .tb-select { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.tb-btn:hover, .tb-select:hover { border-color: var(--line-strong); background: var(--panel-2); }
.tb-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tb-select { padding-right: 2px; max-width: 150px; }
.tb-sep { width: 1px; height: 22px; background: var(--line); margin: 0 3px; }
.tb-spacer { flex: 1; }
.tb-menu { position: relative; }
.tb-menu > summary { list-style: none; }
.tb-menu > summary::-webkit-details-marker { display: none; }
.tb-menu[open] > summary { border-color: var(--accent); }
.tb-pop { position: absolute; top: 36px; left: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 8px 12px; width: 260px; display: flex; flex-direction: column; gap: 3px;
  font-size: 13px; max-height: 70vh; overflow-y: auto; }
.tb-right .tb-pop { left: auto; right: 0; }
.ml-h { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; margin-top: 6px; }
.map-search { position: relative; width: clamp(150px, 17vw, 320px); }
.map-search input { width: 100%; height: 30px; }
.map-search-results { position: absolute; top: 34px; left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.2); max-height: 360px; overflow-y: auto; z-index: 1001; }
.views-pop { width: 300px; }
[data-tool-key="layers"] .tb-pop { width: 320px; }
.view-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; flex-wrap: wrap; }
.view-actions { margin-left: auto; display: flex; gap: 8px; font-size: 12px; }
.view-actions a { color: var(--muted); }
.view-form { display: flex; flex-direction: column; gap: 4px; }
.view-form input[name=name] { width: 100%; }
.land [hidden] { display: none !important; }

.land-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
.land-map-wrap { position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; background: rgba(0, 32, 72, 0.125); }
.land-card-wrap { width: clamp(300px, 30vw, 420px); overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); min-height: 0; }
.tools-panel { position: absolute; top: 10px; left: 54px; z-index: 900; width: 290px; background: var(--panel); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); padding: 10px 12px; font-size: 13px; }
.asm-bar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 890; background: var(--panel); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); padding: 8px 12px; max-width: min(640px, 70%); font-size: 13px; border-left: 4px solid rgba(0, 229, 255, 1.000); }
.map-legend { position: absolute; bottom: 22px; left: 10px; z-index: 800; background: rgba(255,255,255,.92); padding: 4px 8px;
  border-radius: var(--radius); font-size: 11px; display: flex; gap: 10px; }
.qd-drawer { height: 280px; min-height: 120px; background: var(--panel); border-top: 1px solid var(--line); display: flex; flex-direction: column;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
@media (max-width: 900px) {
  .land, .land.side-closed { grid-template-columns: 1fr; grid-template-rows: auto auto 80vh; height: auto; }
  .land-side { grid-row: 2; max-height: 45vh; }
  .land-work { grid-row: 3; }
  .land.side-closed .land-side { display: none; }
  .land-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .land-card-wrap { width: auto; max-width: none; max-height: 50vh; border-left: 0; border-top: 1px solid var(--line); }
}
/* Phone: the map fills the screen under the top bar; the filters & results are a sheet that slides up over it (opened by
   the Filters button or the pill on the map), and an open parcel is a card under the map. */
.land-fab, .land-side-bar { display: none; }
@media (max-width: 900px) {
  html:not(.embedded) .land, html:not(.embedded) .land.side-closed {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    height: calc(var(--main-vh, 100dvh) - var(--topbar-h)); }
  html:not(.embedded) .land-toolbar { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  html:not(.embedded) .land-work { grid-row: 2; }
  html:not(.embedded) .land-side, html:not(.embedded) .land.side-closed .land-side {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--topbar-h); max-height: none; z-index: 2000; visibility: visible;
    border: 0; box-shadow: 0 -8px 24px rgba(0,0,0,.18); transform: translateY(105%); transition: transform .22s ease; }
  html:not(.embedded) .land.side-open .land-side { transform: none; }
  html:not(.embedded) .land-side-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
    border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2; }
  html:not(.embedded) .land-fab { display: inline-flex; gap: 6px; align-items: center; position: absolute; left: 50%; bottom: 52px;
    transform: translateX(-50%); z-index: 850; border: 0; border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 600;
    background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); cursor: pointer; }
  html:not(.embedded) .land-card-wrap { max-height: 55%; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 18px rgba(0,0,0,.14); }
}
@media (prefers-reduced-motion: reduce) { .land-side { transition: none !important; } }
.site-row { padding: 2px 0; }
.pill.site-acquired, .pill.site-contract { background: rgba(0, 82, 255, 0.110); color: color-mix(in srgb, #1e4fbf var(--ink-mix), var(--text)); }
.pill.site-loi { background: rgba(0, 185, 224, 0.129); color: color-mix(in srgb, #00788f var(--ink-mix), var(--text)); }
.pill.site-outreach { background: var(--warn-bg); color: var(--warn); }
.pill.site-review { background: rgba(92, 0, 255, 0.098); color: color-mix(in srgb, #6b3fc0 var(--ink-mix), var(--text)); }
.pill.site-dropped { background: var(--fill); color: var(--muted); }
.inline-filter select { margin-left: 4px; }
.sites-table td { vertical-align: top; }
/* Active-site tables: fixed columns so every campus / project group lines up top to bottom */
.sites-active { table-layout: fixed; width: 100%; }
.sites-active th:nth-child(1) { width: 128px; }
.sites-active .pill { white-space: normal; display: inline-block; max-width: 100%; }
.sites-active th:nth-child(2) { width: 22%; }
.sites-active th:nth-child(3) { width: 78px; }
.sites-active th:nth-child(4) { width: 66px; }
.sites-active th:nth-child(5) { width: 17%; }
.sites-active th:nth-child(6) { width: 8%; }
.sites-active th:nth-child(7) { width: 78px; }
.sites-active th:nth-child(8) { width: 12%; }
.sites-active td { overflow-wrap: anywhere; }
.note-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sites-active .deal-day { margin-top: 4px; font-size: 11px; color: var(--muted); }
.sites-table .num, .sites-table th.num { text-align: right; }
.sites-table .sites-note { max-width: 380px; color: var(--text); }
.ml-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.ml-prog > label { flex: 1; }
.ml-info { font-size: 13px; color: var(--muted); }
.ml-about { flex-basis: 100%; font-size: 12px; background: var(--fill); border-radius: var(--radius); padding: 6px 8px; margin: 2px 0 4px;
  display: flex; flex-direction: column; gap: 3px; }
.ml-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.pop-note { font-size: 12px; color: var(--text-2); margin: 4px 0; max-width: 300px; }
.lc-program { padding: 6px 0; border-top: 1px solid rgba(0, 34, 85, 0.059); display: flex; flex-direction: column; gap: 2px; }
.lc-program:first-of-type { border-top: 0; }

/* Land site page: deal timeline */
.stage-track { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.stage-track li { position: relative; text-align: center; padding: 22px 4px 0; font-size: 12px; }
.stage-track li::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px; background: var(--line); }
.stage-track li:first-child::before { left: 50%; }
.stage-track li:last-child::before { right: 50%; }
.stage-track li.done::before { background: var(--accent); }
.stage-track .dot { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%;
  background: var(--panel); border: 3px solid var(--line); }
.stage-track li.done .dot { background: var(--accent); border-color: var(--accent); }
.st-label { font-weight: 600; }
.st-date { color: var(--muted); }
.st-gap { color: var(--accent); font-size: 11px; font-weight: 600; margin-top: 2px; }
.st-prev { color: var(--muted); font-size: 11px; }
.deal-clock { margin: 0 0 12px; font-size: 13px; }
.deal-clock b { font-size: 15px; }
.milestone-form label { display: grid; grid-template-columns: 1fr 150px 40px; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.note-add { display: flex; gap: 6px; margin-bottom: 10px; }
.note-add input { flex: 1; }
.site-events { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; }
.site-events li { padding: 6px 0; border-top: 1px solid rgba(0, 34, 85, 0.059); font-size: 13px; }
.site-events li.ev-status div { font-weight: 600; }
.site-events li.ev-milestone div { color: var(--accent); }
@media (max-width: 900px) { .stage-track { grid-template-columns: repeat(3, 1fr); row-gap: 14px; } }

/* Sites page: deal timelines */
.gantt { position: relative; font-size: 12px; }
.gantt-axis { position: relative; height: 18px; margin-left: 300px; color: var(--muted); }
.gantt-axis span { position: absolute; transform: translateX(-2px); white-space: nowrap; }
.gantt-row { display: grid; grid-template-columns: 300px 1fr; align-items: center; min-height: 26px; border-top: 1px solid rgba(0, 34, 85, 0.059); }
.gantt-name { display: flex; align-items: center; gap: 6px; min-width: 0; padding-right: 8px; }
.gantt-name .pill { flex: none; }
.gantt-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-days { flex: none; min-width: 44px; text-align: right; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.gantt-track { position: relative; height: 26px; }
.gantt-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--fill); }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #e53935; opacity: .6; }
.gantt-bar { position: absolute; top: 10px; height: 6px; border-radius: 3px; background: rgba(0, 48, 106, 0.188); }
.gantt-bar.site-loi { background: rgba(0, 181, 212, 0.376); } .gantt-bar.site-contract, .gantt-bar.site-acquired { background: #a9c3ff; }
.gantt-bar.site-outreach { background: rgba(255, 169, 0, 0.361); } .gantt-bar.site-review { background: rgba(83, 0, 255, 0.204); }
.gantt-pt { position: absolute; top: 7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15); background: #9aa3ad; display: inline-block; }
.gantt-legend .gantt-pt { position: static; margin: 0 4px 0 0; vertical-align: -2px; }
.ms-identified, .ms-contacted { background: #9aa3ad !important; }
.ms-loi_sent { background: #00b8d9 !important; } .ms-loi_signed { background: #00788f !important; }
.ms-psa_sent { background: #7c4dff !important; } .ms-psa_signed { background: #1e4fbf !important; }
.ms-feasibility_end, .ms-approvals, .ms-closed { background: #1aa34a !important; }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0 300px; }
.gantt-today-key { display: inline-block; width: 2px; height: 12px; background: #e53935; margin-right: 4px; vertical-align: -2px; }
@media (max-width: 900px) { .gantt-row { grid-template-columns: 150px 1fr; } .gantt-axis, .gantt-legend { margin-left: 150px; } }

/* Site plan drawer */
.sp-drawer { height: 320px; }
.sp-body { flex: 1; display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; min-height: 0; }
.sp-col { padding: 6px 12px; overflow-y: auto; min-height: 0; font-size: 13px; }
.sp-col + .sp-col { border-left: 1px solid var(--line); }
.sp-zone label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.sp-zone select { width: 100%; }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin: 6px 0; }
.sp-grid input { width: 100%; }
.sp-table input[type=number] { width: 72px; }
.sp-table select { max-width: 180px; }
.sp-mode { float: right; text-transform: none; letter-spacing: 0; font-weight: 400; }
.sp-mode label { margin-left: 8px; }
@media (max-width: 1100px) { .sp-body { grid-template-columns: 1fr; } .sp-col + .sp-col { border-left: 0; border-top: 1px solid var(--line); } }
details.archive > summary { cursor: pointer; padding: 2px 0; }
details.archive[open] > summary { margin-bottom: 8px; }
details.archive { background: var(--panel-2); }
.archive-list > summary { cursor: pointer; }
.archive-list { background: var(--panel-2); }

/* Assemblage tracker */
.acq-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--fill); margin: 6px 0; }
.acq-seg { display: block; height: 100%; }
.acq-seg.site-acquired, .acq-key.site-acquired { background: #1e4fbf; } .acq-seg.site-contract, .acq-key.site-contract { background: #3a7bd5; }
.acq-seg.site-loi, .acq-key.site-loi { background: #00a5c2; } .acq-seg.site-outreach, .acq-key.site-outreach { background: #f0a500; }
.acq-seg.site-review, .acq-key.site-review { background: #9b6dff; } .acq-seg.site-prospect, .acq-key.site-prospect { background: #9aa3ad; }
.acq-seg.site-dropped, .acq-key.site-dropped { background: rgba(0, 24, 61, 0.165); }
.acq-legend, .acq-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; }
.acq-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.acq-hint { background: var(--warn-bg); color: var(--warn); padding: 6px 10px; border-radius: var(--radius); }
.deal-grid th.ms-col, .deal-grid td.ms-col { text-align: center; padding-left: 4px; padding-right: 4px; }
.deal-grid td.ms-done { color: var(--accent); font-weight: 600; }
.deal-grid .owner-row td { background: var(--fill); }
.deal-grid .deal-note { max-width: 220px; }
.deal-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.sites-progress { display: flex; width: 120px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--fill); margin-top: 4px; }
.gantt-pt.gantt-sub { width: 7px; height: 7px; margin-left: -3.5px; top: 9.5px; border-width: 1px; opacity: .8; }
.gantt-legend .gantt-pt.gantt-sub { width: 8px; height: 8px; }

/* Site page mini map */
.site-map-panel { padding: 10px 12px; position: relative; }
.site-map-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.site-map-head h3 { margin: 0; }
.site-map-head .spacer { flex: 1; }
.site-map-head a.tb-btn { text-decoration: none; }
#site-map { height: 380px; border-radius: var(--radius); background: rgba(0, 32, 72, 0.125); }
.site-map-panel .tb-menu { position: relative; }
.site-map-panel .tb-pop { position: absolute; top: 36px; right: 0; left: auto; z-index: 1000; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 8px 12px; width: 280px; display: flex; flex-direction: column;
  gap: 3px; font-size: 13px; max-height: 340px; overflow-y: auto; }
.site-map-panel .tb-menu > summary { list-style: none; }
.site-map-panel .tb-menu > summary::-webkit-details-marker { display: none; }
.site-map-legend { position: absolute; left: 22px; bottom: 18px; z-index: 800; }

/* Sites page stage filter */
.stage-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.stage-filter-label { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); margin-right: 2px; }
.stage-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--text); font-size: 13px; text-decoration: none; }
.stage-chip:hover { text-decoration: none; border-color: #9aa3ad; }
.stage-chip b { font-weight: 600; color: var(--muted); }
.stage-chip.on { background: #1e2a3a; border-color: #1e2a3a; color: #fff; }
.stage-chip.on b { color: #cfd6df; }
.stage-chip.empty { opacity: .55; }
.stage-chip-archive { color: var(--muted); }

/* Site parcels: excluded / trimmed, and the trim bar on the mini map */
.row-excluded td { color: var(--muted); background: var(--fill); }
.row-excluded td a { color: var(--muted); }
.pill-excluded { background: var(--fill); color: var(--muted); border: 1px dashed #b8c0ca; }
.parcel-actions { white-space: nowrap; }
.parcel-actions form { display: inline; margin-left: 6px; }
.acq-key.key-excluded { background: rgba(154,163,173,.25); border: 1px dashed #9aa3ad; }
.acq-key.key-cutaway { background: rgba(255,255,255,.4); border: 1px dashed #6b7480; }
.trim-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; margin-bottom: 8px;
  background: rgba(255, 142, 0, 0.071); border: 1px solid #fdba74; border-radius: var(--radius); }
.trim-bar #trim-msg { color: color-mix(in srgb, #7c3a0a var(--ink-mix), var(--text)); }
.site-map-panel.trimming #site-map { cursor: crosshair; outline: 2px solid #ff7a00; }
.trim-bar .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.trim-bar[hidden] { display: none; }

/* Zoning code detail on the parcel card */
.zd-card summary { cursor: pointer; font-size: 12px; color: color-mix(in srgb, #1e6bff var(--ink-mix), var(--text)); }
.zd-card .zd { border: 0; padding: 4px 0; font-size: 12px; }
.zd-card .zd-p, .zd-card .zd-ul li { font-size: 12px; }
.zd-card .zd-ul { margin: 2px 0 4px 16px; padding: 0; list-style: disc; }
.zd-card .zd-h { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 6px; }
.zd-card .zd-t { width: 100%; border-collapse: collapse; } .zd-card .zd-t th { text-align: left; width: 72px; color: var(--muted); font-weight: 600; vertical-align: top; }

/* Campus summary (/campuses/<code>/) */
.campus-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .campus-layout { grid-template-columns: minmax(0, 1fr); } }
.campus-item { padding: 8px 0; border-bottom: 1px solid var(--line); }
.campus-item:last-of-type { border-bottom: 0; }
.campus-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.campus-owners { margin: 4px 0 0 18px; padding: 0; font-size: 12px; }
.campus-add summary { cursor: pointer; margin-top: 4px; }
.campus-form textarea { width: 100%; margin: 6px 0; }
.campus-update { padding: 2px 0; }
.campus-day { margin-bottom: 8px; font-size: 13px; }
.campus-feed { list-style: none; margin: 4px 0 0; padding: 0; }
.campus-feed li { padding: 2px 0; font-size: 12px; }
.campus-report-body { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.campus-report-print { white-space: pre-wrap; font-family: inherit; font-size: 14px; margin: 0; }

/* Contracts */
.pill.ct-drafting { background: var(--fill); color: var(--text-2); }
.pill.ct-negotiating { background: var(--warn-bg); color: var(--warn); }
.pill.ct-signed { background: rgba(0, 82, 255, 0.110); color: color-mix(in srgb, #1e4fbf var(--ink-mix), var(--text)); }
.pill.ct-closed { background: var(--good-bg); color: var(--good); }
.pill.ct-terminated { background: var(--fill); color: var(--muted); text-decoration: line-through; }
.soon { color: var(--warn); font-weight: 600; }
.ct-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 16px; align-items: start; }
.ct-strip { display: flex; flex-wrap: wrap; gap: 6px 18px; background: var(--accent-soft); border-radius: var(--radius);
  padding: 8px 12px; margin: -6px 0 14px; font-size: 13px; }
.ct-deadlines { list-style: none; margin: 0; padding: 0; }
.ct-deadlines li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ct-deadlines li:last-child { border-bottom: 0; }
.ct-when { flex: 0 0 48px; font-weight: 600; }
.ct-ask textarea { margin-bottom: 6px; }
.ct-quick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.ct-quick .chip { cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--accent); font-weight: 500; }
.ct-answer { border-top: 1px solid var(--line); padding: 10px 0 4px; margin-top: 10px; }
.ct-answer.pinned { background: rgba(162, 185, 0, 0.043); }
.ct-q { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ct-q .spacer { flex: 1; }
.ct-q form { display: inline-flex; gap: 8px; align-items: baseline; }
.ct-a { line-height: 1.55; }
.ct-a h4 { margin: 14px 0 4px; font-size: 14px; }
.ct-a p { margin: 6px 0; }
.ct-a ul, .ct-a ol { margin: 4px 0; padding-left: 20px; }
a.cite { display: inline-block; min-width: 16px; padding: 0 4px; margin: 0 1px; border-radius: 8px; background: var(--accent-soft);
  color: var(--accent); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: super; }
a.cite:hover { background: var(--accent); color: #fff; text-decoration: none; }
.cite-pop { position: absolute; z-index: 50; width: min(440px, 90vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0,0,0,.14); padding: 10px 12px; font-size: 13px; }
.cite-pop .cite-where { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.cite-pop blockquote, .cr-def blockquote, .cr-panel blockquote { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--accent);
  background: var(--panel-2); white-space: pre-wrap; max-height: 320px; overflow: auto; font-family: Georgia, "Times New Roman", serif; }
.ct-sources { font-size: 12px; margin-top: 4px; }
.ct-sources q, .ct-source-list q { display: block; color: var(--muted); margin: 2px 0 6px; }
.ct-chain { list-style: none; margin: 0; padding: 0; }
.ct-doc { padding: 7px 0; border-bottom: 1px solid var(--line); }
.ct-doc:last-child { border-bottom: 0; }
.ct-doc.superseded { opacity: .65; }
.ct-sub { margin: 14px 0 4px; font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.tag.ct-from-us { background: rgba(0, 82, 255, 0.110); color: color-mix(in srgb, #1e4fbf var(--ink-mix), var(--text)); }
.tag.ct-from-them { background: var(--warn-bg); color: var(--warn); }
.ct-add { margin-top: 10px; }
.ct-add > summary { list-style: none; cursor: pointer; }
.ct-add > summary::-webkit-details-marker { display: none; }
.ct-edit summary { cursor: pointer; color: var(--accent); display: inline; }
.ct-edit .fields label { display: block; margin: 4px 0; }
.ct-edit .fields input, .ct-edit .fields select { width: 100%; }
.ct-dates td { vertical-align: top; }
.ct-dates tr.ct-done td { color: var(--muted); text-decoration: line-through; }
.ct-dates tr.ct-done td form, .ct-dates tr.ct-done td details { text-decoration: none; }
.ct-check { border: 0; background: none; font-size: 16px; padding: 0 4px; color: var(--accent); }
.ct-proposed { background: rgba(255, 206, 0, 0.082); border: 1px solid rgba(210, 165, 0, 0.310); border-radius: var(--radius); padding: 8px; margin-bottom: 10px; }
.ct-owner { display: block; padding: 2px 0; }
.ct-template { padding: 8px 0; border-bottom: 1px solid var(--line); }
.ct-template:last-child { border-bottom: 0; }
.ct-template .btn-small { float: right; }
.cr-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cr-docs .chip { background: var(--fill); color: var(--text-2); font-weight: 500; padding: 3px 8px; }
.cr-docs .chip.active { background: var(--accent); color: #fff; }
.cr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.cr-side { position: sticky; top: calc(var(--topbar-h) + 12px); max-height: calc(var(--main-vh, 100vh) - var(--topbar-h) - 24px); overflow: auto; }
/* Documents read like paper: letter-size sheets on a grey desk, one per page, 1-inch margins. */
.cr-desk { background: rgba(0, 28, 76, 0.106); border-radius: var(--radius); padding: 24px 16px; min-height: 60vh; }
.cr-doc { display: grid; gap: 20px; justify-items: center; }
.cr-page, .cr-sheet { width: 100%; max-width: 816px; min-height: 1056px; background: var(--panel); padding: 72px 76px 40px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.08); display: flex; flex-direction: column; }
.cr-sheet { margin: 0 auto; min-height: 400px; display: block; }
.cr-page-no { color: #8a919c; font-size: 11px; text-align: center; margin-top: auto; padding-top: 24px; font-family: Georgia, serif; }
.cr-text { white-space: pre-wrap; font-family: "Times New Roman", Times, Georgia, serif; font-size: 15px; line-height: 1.5;
  color: var(--text); flex: 1; }
.cr-pdf { width: 100%; height: calc(100vh - 170px); min-height: 600px; border: 0; background: var(--panel);
  box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cr-bar { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.seg-btn { padding: 4px 10px; font-size: 12px; color: var(--text); }
.seg-btn.on { background: var(--accent); color: #fff; }
.seg-btn:hover { text-decoration: none; }
@media (max-width: 700px) { .cr-desk { padding: 8px 0; } .cr-page, .cr-sheet { padding: 28px 20px; min-height: 0; } }
.cr-term { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
  border-bottom: 1px dotted #7d8ba1; border-radius: 0; }
.cr-term:hover { background: var(--accent-soft); }
.cr-xref { border-bottom: 1px solid #b9c7dc; }
.cr-badge { display: inline-block; font-family: system-ui, sans-serif; font-size: 11px; background: var(--warn-bg); color: var(--warn);
  border-radius: 4px; padding: 0 6px; margin-right: 6px; }
.cr-hl { background: rgba(255, 214, 0, 0.341); padding: 1px 0; }
.cr-anchor { scroll-margin-top: 12px; }
#hl { scroll-margin-top: 80px; }
.cr-def { margin-bottom: 10px; }
.cr-outline ul { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.cr-outline li { padding: 2px 0; }
.rl { white-space: pre-wrap; font-family: "Times New Roman", Times, Georgia, serif; font-size: 15px; line-height: 1.6; color: var(--text); }
/* A redline as Word shows one: each author's changes in their color, struck or double-underlined, with a change bar. */
.rl del { color: var(--rl-c, var(--bad)); text-decoration: line-through; text-decoration-thickness: 1px; }
.rl ins { color: var(--rl-c, color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text))); text-decoration: underline double; text-underline-offset: 2px; }
.rl-chg { --rl-c: #c0261f; box-shadow: -10px 0 0 -8px var(--rl-c); border-radius: 2px; cursor: pointer; }
.rl-chg:hover { background: rgba(255, 213, 0, 0.216); }
.rl-n { font-family: system-ui, sans-serif; font-size: 9px; font-weight: 700; color: #fff; background: var(--rl-c);
  border-radius: 7px; padding: 0 4px; margin-right: 2px; vertical-align: super; line-height: 1; }
.rl-page { display: block; margin: 18px -76px; border-top: 1px dashed rgba(0, 24, 61, 0.212); text-align: center; font: 11px Georgia, serif;
  color: #8a919c; line-height: 0; }
.rl-a0 { --rl-c: #c0261f; } .rl-a1 { --rl-c: #1d4ed8; } .rl-a2 { --rl-c: #15803d; } .rl-a3 { --rl-c: #a21caf; }
.rl-a4 { --rl-c: #c2410c; } .rl-a5 { --rl-c: #0e7490; }
.rl-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 10px; }
.rl-key { display: inline-flex; align-items: center; gap: 5px; }
.rl-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--rl-c); display: inline-block; }
.rl-legend del { color: var(--bad); } .rl-legend ins { color: color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text)); text-decoration: underline double; }
.rl-item { border-left: 3px solid var(--rl-c, var(--line)); background: var(--panel); border-radius: var(--radius); padding: 8px 10px;
  margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.06); scroll-margin-top: 50px; }
.rl-item-head { display: flex; gap: 6px; align-items: baseline; border: 0; background: none; padding: 0; font: inherit;
  text-align: left; cursor: pointer; width: 100%; }
.rl-num { background: var(--rl-c, var(--accent)); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700; padding: 0 6px; }
.rl-who { font-size: 12px; color: var(--muted); }
.rl-diff { margin: 4px 0; font-family: Georgia, serif; }
.rl-diff del { color: var(--bad); } .rl-diff ins { color: color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text)); }
.rl-claude { display: flex; gap: 6px; flex-wrap: wrap; }
.rl-new summary { cursor: pointer; list-style: none; color: var(--accent); }
.rl-new textarea { width: 100%; margin: 4px 0; }
.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { background: rgba(255, 199, 0, 0.522); } 100% { background: transparent; } }
/* Word tracked changes inside the reader */
.tc-ins { color: color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text)); text-decoration: underline double; }
.tc-del { color: var(--bad); text-decoration: line-through; }
.cr-legend { margin: 0 0 8px; display: flex; gap: 14px; flex-wrap: wrap; }
.cr-legend ins { color: color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text)); } .cr-legend del { color: var(--bad); }
/* Comments sidebar */
.cr-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; position: sticky; top: 0;
  background: var(--bg); z-index: 2; }
.cr-tabs .tab { border: 0; background: none; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--muted);
  border-bottom: 2px solid transparent; cursor: pointer; }
.cr-tabs .tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.cr-tabs .count { background: var(--accent-soft); color: var(--accent); border-radius: 8px; padding: 0 6px; font-size: 11px; }
.cm-hint { margin-top: 0; }
.cm-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px;
  font-size: 13px; scroll-margin-top: 50px; }
.cm-card.cm-claude { border-left: 3px solid #d97706; background: rgba(255, 178, 0, 0.039); }
.cm-card.cm-resolved { opacity: .7; }
.rl-item .cm-card { margin: 6px 0 4px; box-shadow: none; }
.cm-head { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.cm-head .spacer { flex: 1; }
.cm-head form { display: inline-flex; gap: 6px; }
.cm-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; text-transform: none; flex: none; }
.cm-avatar-claude { background: #d97706; }
.cm-quote { display: block; border: 0; border-left: 3px solid rgba(236, 178, 0, 0.702); background: rgba(255, 206, 0, 0.082); margin: 6px 0; padding: 3px 8px;
  font: italic 12px Georgia, serif; color: color-mix(in srgb, #5b4a10 var(--ink-mix), var(--text)); text-align: left; cursor: pointer; width: 100%; }
.cm-body p { margin: 4px 0; }
.cm-reply { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.cm-reply-form { display: flex; gap: 6px; margin-top: 6px; align-items: flex-start; }
.cm-reply-form textarea { flex: 1; min-height: 30px; font-size: 12px; }
.cm-done { margin-top: 10px; }
.cm-mark { background: rgba(255, 205, 0, 0.278); border-bottom: 2px solid rgba(236, 178, 0, 0.702); cursor: pointer; }
.cm-mark.hover, .cm-mark.flash { background: rgba(255, 196, 0, 0.647); }
.cm-add { position: absolute; z-index: 60; border: 0; background: var(--accent); color: #fff; border-radius: 16px; padding: 5px 12px;
  font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }
.cm-pop { position: absolute; z-index: 61; width: 330px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 10px; }
.cm-pop textarea { width: 100%; margin: 6px 0; }
.cm-pop-quote { font-style: italic; max-height: 60px; overflow: hidden; }
.mention-menu { position: absolute; z-index: 70; list-style: none; margin: 0; padding: 4px 0; background: var(--panel); min-width: 220px;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.15); font-size: 13px; }
.mention-menu li { padding: 4px 10px; cursor: pointer; }
.mention-menu li.on, .mention-menu li:hover { background: var(--accent-soft); }
.ct-ccount { font-size: 11px; margin-left: 4px; }
/* Summaries: every cited line opens its source */
.citable { cursor: pointer; border-radius: 3px; }
.citable:hover { background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.ct-facts a { color: inherit; border-bottom: 1px dotted #9aa3ad; }
.ct-facts a:hover { color: var(--accent); text-decoration: none; }
/* Closing timeline */
.tl-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tl-eff input { margin-left: 6px; }
.tl-versions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-check { display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 2px 10px;
  font-size: 12px; background: var(--panel); cursor: pointer; }
.chip-check.chip-exec { border-color: #9fd3b4; background: var(--good-bg); }
.tl-whatif { background: var(--warn-bg); color: var(--warn); }
.tl-k-deposit, .tl-k-hard, .tl-k-payment { --tl-c: #15803d; }
.tl-k-feasibility, .tl-k-title, .tl-k-approval { --tl-c: #b45309; }
.tl-k-closing { --tl-c: #1f3a5f; }
.tl-k-expiration, .tl-k-notice { --tl-c: #b91c1c; }
.tl-k-extension { --tl-c: #7c3aed; }
.tl-k-covenant, .tl-k-other { --tl-c: #6b7280; }
.tl-k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tl-c, var(--accent)); margin: 0 4px 0 8px; }
.tl-key { margin-top: 10px; }
/* Overview: dots on a track, names in their own column, so nothing hangs off either end */
.tl-overview { display: grid; gap: 4px; }
.tl-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; }
.tl-name { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-axis { position: relative; height: 16px; margin: 0 10px; }
.tl-tick { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.tl-tick:first-child { transform: none; }
.tl-tick.tl-today { color: var(--bad); font-weight: 600; }
.tl-track { position: relative; height: 26px; margin: 0 10px; border-radius: 13px; background: rgba(0, 36, 91, 0.055); }
.tl-grid { position: absolute; top: 4px; bottom: 4px; border-left: 1px solid var(--line); }
.tl-now { position: absolute; top: -3px; bottom: -3px; border-left: 2px dashed var(--bad); }
.tl-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--tl-c, var(--accent)); border: 2px solid var(--tl-c, var(--accent)); box-shadow: 0 0 0 2px #fff; }
.tl-dot:hover { transform: scale(1.3); text-decoration: none; z-index: 2; }
.tl-dot.tl-computed { background: var(--panel); }
.tl-dot.tl-done { opacity: .4; }
.tl-count { position: absolute; top: -9px; right: -9px; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; font-size: 9px; line-height: 14px; min-width: 14px; text-align: center; padding: 0 2px; }
@media (max-width: 700px) { .tl-row { grid-template-columns: 1fr; gap: 2px; } }
/* Month-by-month list */
.tl-agenda, .tl-agenda ol { list-style: none; margin: 0; padding: 0; }
.tl-month { margin-bottom: 12px; }
.tl-month-name { font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--muted);
  border-bottom: 1px solid var(--line); padding: 4px 0; margin-bottom: 4px; }
.tl-item { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 6px 0 6px 0; border-left: 3px solid var(--tl-c, var(--line));
  padding-left: 10px; margin: 4px 0; scroll-margin-top: 60px; }
.tl-item:target { background: rgba(255, 206, 0, 0.082); }
.tl-item.done { opacity: .55; }
.tl-item.late .tl-label { color: var(--bad); }
.tl-when { text-align: center; line-height: 1.1; }
.tl-when b { display: block; font-size: 18px; }
.tl-when span { font-size: 12px; color: var(--muted); text-transform: none; }
.tl-label { font-weight: 600; }
.tl-late { background: var(--bad-bg); color: var(--bad); font-size: 11px; }
.tl-soon { background: var(--warn-bg); color: var(--warn); font-size: 11px; }
.tl-scroll { overflow-x: auto; }
.tl-table td { vertical-align: top; }
.tl-table tr.tl-changed td { background: rgba(255, 206, 0, 0.082); }
.tl-diff { background: var(--warn-bg); color: var(--warn); font-size: 10px; }
.tl-cell { color: inherit; }
/* Extensions */
.tl-ext { border: 1px solid rgba(58, 0, 232, 0.173); background: rgba(73, 0, 255, 0.027); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.tl-ext.done { border-color: var(--line); background: var(--panel-2); }
.tl-ext-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tl-move { margin: 10px 0 6px; display: grid; gap: 2px; }
.tl-move-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 18px 110px 110px; gap: 6px; align-items: center;
  padding: 4px 8px; background: var(--panel); border-radius: 4px; font-size: 13px; }
.tl-move-row.main { font-weight: 600; border: 1px solid #c9bdf5; }
.tl-move-row.opt { cursor: pointer; color: var(--muted); }
.tl-move-row.opt:has(input:checked) { color: var(--text); }
.tl-from { color: var(--muted); text-decoration: line-through; }
.tl-to { font-weight: 600; color: color-mix(in srgb, #5b21b6 var(--ink-mix), var(--text)); }
.tl-arrow { color: var(--muted); }
.tl-ext-go { margin-top: 6px; }
@media (max-width: 700px) { .tl-move-row { grid-template-columns: 1fr auto auto; } .tl-move-row > :nth-child(3), .tl-move-row > :nth-child(5) { display: none; } }
/* The executed agreement */
.ct-executed { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--good-bg); border: 1px solid #9fd3b4;
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
.ct-exec-badge { background: var(--good); color: #fff; font-weight: 700; font-size: 12px; border-radius: 12px; padding: 2px 10px; white-space: nowrap; }
.ct-executed > div { flex: 1; min-width: 220px; }
.tag.ct-exec { background: var(--good); color: #fff; }
.ct-upnext { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.ct-upnext li { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; font-size: 13px; border-left: 3px solid var(--tl-c, var(--line)); padding-left: 8px; }
/* Drag-and-drop upload */
.dropzone { border: 2px dashed #c3cad4; border-radius: 10px; background: var(--panel-2); padding: 14px; margin-top: 10px; transition: background .15s, border-color .15s; }
.dropzone.dz-over { border-color: var(--accent); background: var(--accent-soft); }
.dz-target { display: flex; gap: 12px; align-items: center; }
.dz-target > div:not(.dz-icon) { flex: 1; }
.dz-icon { flex: none; }
.dz-icon { font-size: 26px; color: var(--accent); width: 36px; text-align: center; }
.dz-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.dz-list:empty { display: none; }
.dz-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.dz-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-what { grid-column: 1 / -1; color: var(--muted); }
.dz-row.working .dz-state { color: var(--muted); animation: dzpulse 1.2s infinite; }
.dz-row.ok .dz-state { color: var(--good); font-weight: 700; }
.dz-row.failed { border-color: #f0b8b3; } .dz-row.failed .dz-state { color: var(--bad); }
.dz-next { justify-self: start; }
@keyframes dzpulse { 50% { opacity: .4; } }
/* Dashboard critical dates calendar */
.cc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cc-tag { border: 1px solid var(--cc, var(--line)); color: var(--cc, var(--text)); background: var(--panel); opacity: .45; cursor: pointer; }
.cc-tag.on { opacity: 1; background: var(--cc-bg, var(--panel)); }
.cc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cc-dow { font-size: 12px; color: var(--muted); text-transform: none; padding: 4px 6px; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: var(--panel-2); }
.cc-day { min-height: 92px; padding: 3px 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.cc-day.out { background: var(--panel-2); }
.cc-day.out .cc-num { color: #b6bcc5; }
.cc-day.today { background: rgba(0, 98, 255, 0.051); }
.cc-day.today .cc-num { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; display: inline-block; }
.cc-num { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.cc-item { display: block; font-size: 11px; line-height: 1.3; padding: 2px 4px; margin-bottom: 2px; border-radius: 3px;
  border-left: 3px solid var(--cc, var(--accent)); background: var(--cc-bg, var(--accent-soft)); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; }
.cc-item[hidden] { display: none; }
.cc-item:hover { text-decoration: none; filter: brightness(.96); }
.cc-item b { font-size: 10px; color: var(--cc, var(--accent)); }
.cc-item.done { opacity: .55; text-decoration: line-through; }
.cc-item.late { box-shadow: inset 0 0 0 1px var(--bad); }
.cc-what { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-t-psa, .cc-t-option, .cc-t-loi, .cc-t-contract { --cc: #1f3a5f; --cc-bg: #e8eef6; }
.cc-t-pda { --cc: #7c3aed; --cc-bg: #f1ebfe; }
.cc-t-lease { --cc: #0e7490; --cc-bg: #e0f4f8; }
.cc-t-dd { --cc: #b45309; --cc-bg: #fdf1e1; }
.cc-t-closing { --cc: #15803d; --cc-bg: #e3f4ea; }
.cc-t-entitlement { --cc: #a21caf; --cc-bg: #fbe8fb; }
.cc-t-task { --cc: #b91c1c; --cc-bg: #fbe5e3; }
@media (max-width: 800px) { .cc-day { min-height: 60px; padding: 2px; } .cc-item { font-size: 10px; } .cc-what { display: none; } }
.cc-dayview { grid-template-columns: 1fr; }
.cc-dayview .cc-day { min-height: 180px; }
.rl-same { display: inline; }
.rl-same summary { display: inline; cursor: pointer; color: var(--muted); font-family: system-ui, sans-serif; font-size: 12px; }
.rl-same[open] summary { display: none; }
@media (max-width: 1100px) { .ct-layout, .cr-layout { grid-template-columns: minmax(0, 1fr); } .cr-side { position: static; max-height: none; } }

/* Due diligence and closing */
.print-only { display: none; }
@media print { .print-only { display: inline; } .dd-more { display: none; } }
.dd-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dd-strip > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.dd-strip .label { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.dd-strip .value { font-size: 18px; font-weight: 600; margin: 2px 0; }
.dd-strip .fields select, .dd-strip .fields textarea { width: 100%; margin: 4px 0; }
.dd-risk { border-color: rgba(214, 144, 0, 0.341); background: rgba(255, 206, 0, 0.082); }
.dd-risk ul { margin: 0; padding-left: 18px; }
.dd-table td { vertical-align: top; }
.dd-table tr.dd-clear td:nth-child(2) b { color: var(--good); }
.dd-table tr.dd-issue td:nth-child(2) b { color: var(--bad); }
.dd-table tr.dd-waived td { color: var(--muted); }
.dd-table tr.dd-late td:first-child { box-shadow: inset 3px 0 var(--bad); }
.dd-table tr.dd-more td { border-top: 0; padding-top: 0; }
.dd-status { font-size: 12px; padding: 2px 4px; }
.dd-findings { margin-top: 3px; max-width: 520px; }
.dd-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin: 6px 0; }
.dd-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.dd-form .dd-wide { grid-column: 1 / -1; }
.dd-summary { margin: 4px 0; }
.dd-summary > summary { cursor: pointer; color: var(--accent); font-size: 12px; }
.dd-claude { display: inline-block; margin-left: 10px; }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cl-list li:last-child { border-bottom: 0; }
.cl-list li.cl-done .cl-name { color: var(--muted); text-decoration: line-through; }
.cl-list li.cl-na .cl-name { color: var(--muted); }
.cl-list .cl-name { flex: 1; }
.cl-side { margin: 10px 0 2px; font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.lc-owned { background: var(--good-bg); color: var(--good); border-radius: var(--radius); padding: 4px 8px; margin: 6px 0; font-size: 12px; }

/* Entitlements */
.pill.en-planned { background: var(--fill); color: var(--text-2); }
.pill.en-preapp, .pill.en-submitted { background: rgba(0, 82, 255, 0.110); color: color-mix(in srgb, #1e4fbf var(--ink-mix), var(--text)); }
.pill.en-review, .pill.en-hearing { background: var(--warn-bg); color: var(--warn); }
.pill.en-approved { background: var(--good-bg); color: var(--good); }
.pill.en-denied, .pill.en-expired { background: var(--bad-bg); color: var(--bad); }
.pill.en-withdrawn { background: var(--fill); color: var(--muted); text-decoration: line-through; }
.en-steps { list-style: none; margin: 0; padding: 0; }
.en-steps li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.en-steps li:last-child { border-bottom: 0; }
.en-steps .en-date { flex: 0 0 96px; font-weight: 600; }
.en-steps .en-what { flex: 1; }
.en-steps li.en-done .en-date, .en-steps li.en-done .en-what b { color: var(--muted); }
.en-steps li.en-missed .en-date { color: var(--bad); }
.en-matrix label { font-size: 13px; }
.en-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; margin: 8px 0; }
.en-kinds label { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
@media (max-width: 900px) { .en-kinds { grid-template-columns: 1fr 1fr; } }

/* Build records */
tr.bd-phase td { background: var(--panel-2); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: none;
  letter-spacing: 0; padding-top: 8px; }
tr.bd-done td { color: var(--muted); }
tr.bd-done td b { font-weight: 500; }
tr.bd-selected td { background: var(--good-bg); }
tr.bd-out td { color: var(--muted); }
tr.bd-total td { font-weight: 700; border-top: 2px solid var(--line); }
.bd-claude { display: grid; gap: 8px; margin: 12px 0 4px; padding: 10px; background: var(--accent-soft); border-radius: var(--radius); }
.bd-claude textarea { margin-bottom: 4px; }

/* Tenant site fit */
.tf-score { display: inline-block; min-width: 34px; padding: 2px 6px; border-radius: 99px; font-weight: 700;
  text-align: center; background: var(--good-bg); color: var(--good); }
.tf-score.tf-fails { background: var(--fill); color: var(--muted); }
.tf-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12px; }
.tf-checks li::before { display: inline-block; width: 14px; font-weight: 700; }
.tf-checks li.tf-ok::before { content: "✓"; color: var(--good); }
.tf-checks li.tf-no::before { content: "✕"; color: var(--bad); }
.tf-checks li.tf-maybe::before { content: "?"; color: var(--warn); }
.tf-checks li.tf-no b { color: var(--bad); }
@media (max-width: 900px) { .dd-strip, .dd-form { grid-template-columns: 1fr 1fr; } }
@media print { .ct-print { border: 0; padding: 0; } a.cite { background: none; } }

/* Report layout: add / remove sections */
.report-layout .rl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 10px; }
.report-layout fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px 10px; margin: 0; background: var(--panel); }
.report-layout legend { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); padding: 0 6px; }
.report-layout fieldset label { display: block; padding: 3px 0; font-size: 13px; }
.report-layout .rl-site { display: block; padding: 4px 0; font-size: 13px; }
.report-layout .rl-actions { margin: 12px 0 0; }
.rl-sections { display: grid; gap: 2px; max-width: 560px; }
.rl-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.rl-row:hover { border-color: #9aa3ad; }
.rl-extra { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); max-width: 720px; }
.rl-extra input[type=text], .rl-extra textarea { width: 100%; box-sizing: border-box; }

/* Sites page: stat tiles, grouped site cards */
.sites-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 2px 0 14px; }
.sites-stats > div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; min-width: 120px; }
.sites-stats b { display: block; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sites-stats span { font-size: 12px; color: var(--muted); }
.sites-timeline > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; }
.sites-timeline > summary::-webkit-details-marker { display: none; }
.sites-timeline > summary h3 { display: inline; margin: 0; }
.sites-timeline > summary::before { content: "\25B8"; color: var(--muted); }
.sites-timeline[open] > summary::before { content: "\25BE"; }
.sites-timeline .gantt { margin-top: 10px; }
.compare-bar { position: sticky; top: var(--topbar-h); z-index: 5; display: flex; gap: 10px; align-items: center; padding: 8px 14px; margin: 0 0 12px;
  background: #1e2a3a; color: #fff; border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.compare-bar[hidden] { display: none; }
.compare-bar .muted { color: #b6c0cd; }
.compare-bar .spacer { flex: 1; }
.site-group { margin: 0 0 24px; }
.sg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 0 2px 8px; margin-bottom: 10px; border-bottom: 2px solid var(--line); }
.sg-head h2 { margin: 0; font-size: 18px; }
.sg-meta { color: var(--muted); font-size: 13px; flex: 1; }
.sg-meta b { color: var(--text); }
.sg-all { font-size: 12px; color: var(--muted); cursor: pointer; }
.site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.site-card { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid #9aa3ad;
  border-radius: 10px; padding: 12px 14px; transition: box-shadow .15s; }
.site-card:hover { box-shadow: 0 6px 18px rgba(20,30,50,.10); }
.site-card.site-acquired, .site-card.site-contract { border-top-color: #1e4fbf; }
.site-card.site-loi { border-top-color: #00a5c2; }
.site-card.site-outreach { border-top-color: #f0a500; }
.site-card.site-review { border-top-color: #9b6dff; }
.sc-top { display: flex; align-items: center; gap: 8px; }
.sc-top .spacer { flex: 1; }
.sc-check { display: inline-flex; margin: 0; cursor: pointer; }
.sc-day { font-size: 11px; color: var(--muted); }
.sc-score { min-width: 34px; text-align: center; padding: 2px 8px; border-radius: 8px; background: var(--accent-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-name { margin: 0; font-size: 16px; line-height: 1.25; }
.sc-name a { color: var(--text); }
.sc-where { font-size: 12px; color: var(--muted); margin-top: -4px; }
.sc-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sc-metrics b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.sc-metrics span { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.sc-owners { font-size: 12.5px; line-height: 1.4; }
.sc-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-flag { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: rgba(231, 24, 0, 0.082); color: color-mix(in srgb, #b3261e var(--ink-mix), var(--text)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-note { margin: 0; font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.site-card .sites-progress { width: 100%; margin-top: 0; }

/* Email template editor */
.tpl-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; }
.tpl-f { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.tpl-f label { font-size: 12px; font-weight: 600; color: var(--muted); }
.tpl-f input[type=text], .tpl-f select, .tpl-f textarea { width: 100%; box-sizing: border-box; }
.tpl-f textarea { font-family: inherit; line-height: 1.45; }
.fmt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--fill); }
.fmt-bar button { border: 1px solid var(--line); background: var(--panel); border-radius: 5px; padding: 3px 9px; font-size: 12.5px; cursor: pointer; }
.fmt-bar button:hover { border-color: #9aa3ad; background: var(--accent-soft); }
.fmt-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.tpl-f .fmt-bar + textarea { border-radius: 0 0 6px 6px; }
.tpl-note { color: color-mix(in srgb, #8a5a00 var(--ink-mix), var(--text)); background: rgba(255, 181, 0, 0.122); border-radius: 6px; padding: 6px 9px; }
.tpl-adv { margin: 4px 0 12px; }
.tpl-adv summary { cursor: pointer; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.tpl-preview iframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.tpl-preview { position: sticky; top: calc(var(--topbar-h) + 8px); align-self: start; }
.tpl-keys { margin-top: 6px; font-size: 12.5px; }
.tpl-keys summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.tpl-keys table { border-collapse: collapse; margin-top: 4px; }
.tpl-keys td { padding: 3px 12px 3px 0; vertical-align: top; }
.tpl-keys code { background: var(--fill); padding: 1px 5px; border-radius: 4px; }
.tpl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tpl-who { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; }
.tpl-who select { flex: 1; min-width: 0; }
.tpl-attach input[type=file] { font-size: 13px; }

/* Live alerts */
#alert-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.alert-toast { display: block; background: #1e2a3a; color: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  text-decoration: none; transition: opacity .5s, transform .5s; animation: toast-in .25s ease-out; }
.alert-toast:hover { text-decoration: none; background: #26364b; }
.alert-toast b { display: block; font-size: 12px; text-transform: none; letter-spacing: 0; color: #9fc3ff; margin-bottom: 2px; }
.alert-toast span { font-size: 13px; line-height: 1.35; }
.alert-toast.gone { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.alert-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.alert-prefs label { font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }

/* Site card pop-up (Trello-style) */
.site-card[data-card-url] { cursor: pointer; }
.site-card[data-card-url]:focus-visible { outline: 2px solid var(--accent, #124b87); outline-offset: 2px; }
.scard-dialog { width: min(1080px, 96vw); max-height: 92vh; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 24px 60px rgba(10,20,40,.35); background: var(--fill); }
.scard-dialog::backdrop { background: rgba(15,22,33,.55); }
.scard { display: flex; flex-direction: column; max-height: 92vh; }
.scard-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; background: var(--panel); border-top: 6px solid #9aa3ad; border-bottom: 1px solid var(--line); }
.scard.site-acquired .scard-head, .scard.site-contract .scard-head { border-top-color: #1e4fbf; }
.scard.site-loi .scard-head { border-top-color: #00a5c2; } .scard.site-outreach .scard-head { border-top-color: #f0a500; }
.scard.site-review .scard-head { border-top-color: #9b6dff; }
.scard-title { flex: 1; min-width: 0; }
.scard-title h2 { margin: 4px 0 2px; font-size: 20px; line-height: 1.25; }
.scard-x { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.scard-x:hover { color: var(--text); }
.scard-error { margin: 10px 20px 0; padding: 8px 12px; border-radius: 8px; background: rgba(231, 24, 0, 0.082); color: color-mix(in srgb, #b3261e var(--ink-mix), var(--text)); font-size: 13px; }
.scard-body { display: grid; grid-template-columns: 1fr 230px; gap: 18px; padding: 16px 20px 20px; overflow-y: auto; }
.scard-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.scard-facts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.scard-facts > div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.scard-facts b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.scard-facts span { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.scard-sec { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.scard-sec h3 { margin: 0 0 8px; font-size: 13px; text-transform: none; letter-spacing: 0; color: color-mix(in srgb, #4a5563 var(--ink-mix), var(--text)); }
.scard-sec p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; }
.scard-ai { background: linear-gradient(180deg, rgba(0, 85, 255, 0.047), var(--panel) 60%); border-color: rgba(0, 75, 230, 0.161); }
.scard-headline { font-weight: 600; }
.scard-risks { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.scard-next { background: rgba(0, 90, 255, 0.067); border-radius: 6px; padding: 6px 9px; }
.scard-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.scard-steps li { display: grid; grid-template-columns: 14px 1fr; column-gap: 6px; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: var(--fill); }
.scard-steps li i { grid-row: span 2; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; border: 2px solid #c3c9d1; }
.scard-steps li.done i { background: #1a8f4a; border-color: #1a8f4a; }
.scard-steps li.future i { background: var(--panel); border-color: #f0a500; }
.scard-steps li span.muted { font-size: 11.5px; }
.scard-log { margin-top: 8px; font-size: 12.5px; }
.scard-log summary { cursor: pointer; color: var(--muted); }
.scard-log div { padding: 2px 0; }
.scard-row { display: block; padding: 7px 9px; margin: 0 -6px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13.5px; }
.scard-row:hover { background: var(--fill); text-decoration: none; }
.scard-row + .scard-row { border-top: 1px solid rgba(0, 34, 85, 0.059); }
.scard-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.scard-task { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(0, 34, 85, 0.059); font-size: 13.5px; }
.scard-task.done a { text-decoration: line-through; color: var(--muted); }
.scard-tick { width: 18px; height: 18px; border: 2px solid #9aa3ad; border-radius: 4px; background: var(--panel); padding: 0; font-size: 12px; line-height: 1; color: #fff; cursor: pointer; }
.scard-task.done .scard-tick { background: #1a8f4a; border-color: #1a8f4a; }
.scard-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.scard-add input[name=title] { flex: 1 1 200px; min-width: 0; }
.scard-comment { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.scard-comment textarea { flex: 1; min-width: 0; font-family: inherit; }
.scard-cmt { padding: 7px 0; border-top: 1px solid rgba(0, 34, 85, 0.059); font-size: 13.5px; }
.scard-side { display: flex; flex-direction: column; gap: 7px; }
.scard-side .btn { text-align: center; }
.scard-side select { width: 100%; }
.scard-label { margin-top: 8px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.scard-notes { color: var(--muted); }
@media (max-width: 800px) {
  .scard-body { grid-template-columns: 1fr; }
  .scard-facts { grid-template-columns: repeat(3, 1fr); }
  .scard-two { grid-template-columns: 1fr; }
}

.scard-members { display: flex; flex-wrap: wrap; gap: 4px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: #124b87; color: #fff; font-size: 11px; font-weight: 700; }
.team-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-check { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; }
.tenant-row { padding: 6px 0; border-bottom: 1px solid rgba(0, 34, 85, 0.059); position: relative; }
.tenant-row .inline-unlink { position: absolute; right: 0; top: 6px; }

/* Sites: view switch, board */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: 12px; }
.seg a { padding: 5px 12px; font-size: 13px; color: var(--text); text-decoration: none; background: var(--panel); }
.seg a + a { border-left: 1px solid var(--line); }
.seg a.on { background: #1e2a3a; color: #fff; }
.seg-toggle { padding: 5px 12px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; background: var(--panel); margin-left: 6px; }
.seg-toggle.on { background: var(--accent-soft); border-color: #9fb8dc; }
.site-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.sb-col { background: var(--fill); border-radius: 12px; padding: 8px; min-height: 120px; }
.sb-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px 8px; font-size: 13.5px; }
.sb-head .acq-key { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sb-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 8px; transition: background .15s; }
.sb-list.drop-on { background: rgba(0, 68, 180, 0.133); }
.sb-tile { gap: 5px; padding: 9px 11px; border-top-width: 3px; cursor: grab; }
.sb-tile.dragging { opacity: .45; }
.sb-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.sc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.sc-badges .spacer { flex: 1; }
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.avatar-team { background: #6b7a90; margin-left: -6px; border: 2px solid #fff; }

/* Task labels (the Trello categories) and critical dates */
.tlabel { display: inline-block; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; background: #6b7480; vertical-align: 1px; }
.tl-deal { background: #1e4fbf; } .tl-legal { background: #8e44ad; } .tl-civil { background: #c77700; }
.tl-architecture { background: #00838f; } .tl-program { background: #2e7d32; } .tl-land_use { background: #6d4c41; }
.tl-critical { background: #c62828; }
.scard-date { display: grid; grid-template-columns: 100px 1fr auto; gap: 10px; padding: 6px 8px; margin: 0 -6px; border-radius: 8px; font-size: 13px; color: var(--text); text-decoration: none; }
.scard-date:hover { background: var(--fill); text-decoration: none; }
.scard-date .sd-when { font-variant-numeric: tabular-nums; font-weight: 600; }
.scard-date .sd-left { color: var(--muted); font-size: 12px; white-space: nowrap; }
.scard-date.soon .sd-left { color: #c77700; font-weight: 600; }
.scard-date.late .sd-left { color: color-mix(in srgb, #c62828 var(--ink-mix), var(--text)); font-weight: 600; }

/* Settings: dropdown lists */
.dd-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 14px; align-items: start; }
.dd-area h3 { margin-top: 0; }
.dd-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.dd-row:hover { background: var(--fill); text-decoration: none; }
.dd-row + .dd-row { border-top: 1px solid rgba(0, 34, 85, 0.059); }
.dd-used { display: block; margin-top: 1px; }
.tag-open { background: rgba(0, 164, 64, 0.110); color: color-mix(in srgb, #1a7a40 var(--ink-mix), var(--text)); }
.dd-table input[name^=label_] { width: 100%; box-sizing: border-box; }
.dd-table tr.dd-hidden td { background: var(--fill); color: var(--muted); }
.dd-table tr.dd-hidden input[name^=label_] { color: var(--muted); text-decoration: line-through; }
.dd-new input { width: 320px; max-width: 100%; margin-left: 6px; }
.dd-actions { margin-bottom: 0; }
.scard-date.done { color: var(--muted); }
.scard-date.done span:nth-child(2) { text-decoration: line-through; }
.scard-date.done .sd-left { color: color-mix(in srgb, #1a8f4a var(--ink-mix), var(--text)); font-weight: 600; }
.cr-draftnote { background: var(--warn-bg); color: var(--warn); border-radius: var(--radius); padding: 6px 12px; margin-bottom: 10px; }
.tc-ins[class*="rl-a"], .tc-del[class*="rl-a"] { color: var(--rl-c); }
.rl-tracked [data-tc] { cursor: pointer; }
.rl-views { margin-bottom: 10px; }

/* Capital: sources, the stack and term sheets side by side */
.pill.cap-identified, .pill.cap-outreach { background: var(--fill); color: var(--text-2); }
.pill.cap-discussion { background: rgba(0, 82, 255, 0.110); color: color-mix(in srgb, #1e4fbf var(--ink-mix), var(--text)); }
.pill.cap-term_sheet, .pill.cap-approved { background: var(--warn-bg); color: var(--warn); }
.pill.cap-closing, .pill.cap-closed { background: var(--good-bg); color: var(--good); }
.pill.cap-passed, .pill.cap-declined { background: rgba(0, 0, 0, 0.047); color: var(--muted); }
.cap-stack { display: flex; flex-direction: column; gap: 4px; }
.cap-layer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 7px 10px; border-radius: 8px; border-left: 4px solid rgba(0, 42, 104, 0.212); background: rgba(0, 64, 128, 0.031); font-size: 13px; }
.cap-layer.cap-equity { border-left-color: #2e7d32; }
.cap-layer.cap-debt { border-left-color: #1e4fbf; }
.cap-layer.cap-grants { border-left-color: #c77700; }
.cap-layer.cap-out { opacity: .55; }
.cap-stages { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cap-compare th, .cap-compare td { vertical-align: top; }
.cap-compare td.changed { background: rgba(255, 184, 0, 0.098); }
.cap-compare td .q { color: var(--muted); font-size: 11px; cursor: help; text-decoration: underline dotted; }
.cap-terms { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: 13px; margin: 6px 0; }
.cap-terms dt { color: var(--muted); }
.cap-terms dd { margin: 0; }
.cap-touch { display: grid; grid-template-columns: 70px 80px 1fr auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(0, 34, 85, 0.059); font-size: 13px; }
.cap-touch .k { color: var(--muted); font-size: 12px; }

/* ==========================================================================
   Company page (company_detail.html, company_meeting_card.html, action_item.html, company_actions.html)
   ========================================================================== */
.co-tabs { position: sticky; top: var(--topbar-h); z-index: 5; background: var(--bg); overflow-x: auto; overflow-y: hidden;
  white-space: nowrap; scrollbar-width: none; padding-top: 4px; }
.co-tabs a { flex: none; }
.co-tabs .count, .co-kinds .count, .co-fold .count { background: var(--fill); color: var(--muted); border-radius: 8px;
  padding: 0 6px; font-size: 11px; font-weight: 600; }
.co-tabs .count-hot { background: var(--warn-bg); color: var(--warn); }
.co-record { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }

.co-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
/* Each cell draws its right and bottom rule; the -1px margins push the outer ones under the container's border. */
.co-facts > div { padding: 8px 12px; display: flex; flex-direction: column; min-width: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.co-facts .label { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); }
.co-facts .value { font-weight: 600; overflow-wrap: anywhere; }
.co-facts .sub { font-size: 12px; color: var(--muted); }
.co-facts .co-fact-wide { grid-column: span 2; }
.co-pair .panel { margin-bottom: 0; }
.co-pair { margin-bottom: 16px; }
.h3-link { float: right; text-transform: none; letter-spacing: 0; font-weight: 500; }

.co-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 8px; }
.co-section-head h2 { font-size: 16px; margin: 0; }
.mcard { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); margin-bottom: 14px; }
.mcard-upcoming { border-left-color: var(--good); }
.mcard-head { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mcard-date { flex: none; width: 44px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius);
  line-height: 1.1; padding: 3px 0; }
.mcard-date span { display: block; font-size: 10.5px; text-transform: uppercase; color: var(--muted); }
.mcard-date strong { font-size: 17px; }
.mcard-title { flex: 1; min-width: 0; }
.mcard-title h4 { margin: 0 0 2px; font-size: 15px; }
.mcard-title .muted { font-size: 12.5px; }
.mcard-links { display: flex; gap: 10px; font-size: 12px; white-space: nowrap; }
.mcard-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.mcard-summary, .mcard-actions { padding: 10px 14px 12px; min-width: 0; }
.mcard-actions { border-left: 1px solid var(--line); background: var(--panel-2); }
.mcard h5, .co-sub { margin: 0 0 6px; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); }
.co-sub { margin-top: 4px; }
.mcard .granola h4:first-child { margin-top: 0; }
.granola.clamp { max-height: 240px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.clamp-toggle { margin-top: 4px; }
.clamp-toggle[hidden] { display: none; }
.mcard h5 .muted, .co-sub .muted { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.mk-task > summary { display: inline-block; cursor: pointer; font-size: 12px; color: var(--accent); margin-top: 4px; list-style: none; }
.mk-task > summary::-webkit-details-marker { display: none; }
.mk-task[open] > summary { display: none; }

.action-item .ai-line { display: flex; gap: 8px; align-items: flex-start; }
.action-item .ai-line input[type=checkbox] { margin-top: 3px; }
.action-item .ai-text { flex: 1; min-width: 0; }
.ai-dot { flex: none; width: 12px; height: 12px; margin-top: 4px; border: 2px solid var(--line-strong); border-radius: 50%; }
.ai-done strong { text-decoration: line-through; color: var(--muted); }
.mcard-actions .action-item { background: var(--panel); }
.more-link { display: inline-block; font-size: 12.5px; margin: 2px 0 8px; }

.co-fold { padding: 0; }
.co-fold > summary { cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--muted); list-style-position: inside; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-fold[open] > summary { border-bottom: 1px solid var(--line); }
.co-fold > :not(summary) { margin: 12px 14px; }
.co-fold > .panel { border: 0; padding: 0; background: none; }
.fold-hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }

.co-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.co-kinds a { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 3px 12px; font-size: 13px; color: var(--text); }
.co-kinds a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.co-kinds a.active .count { background: rgba(255,255,255,.2); color: #fff; }

@media (max-width: 1100px) { .co-record { grid-template-columns: minmax(0, 1fr); } }
.co-side { min-width: 0; }
@media (max-width: 700px) {
  .mcard-body { grid-template-columns: 1fr; }
  .mcard-actions { border-left: 0; border-top: 1px solid var(--line); }
  .mcard-head { flex-wrap: wrap; }
  .mcard-links { width: 100%; padding-left: 56px; }
  .co-facts { grid-template-columns: 1fr 1fr; }
}
/* End company page */


/* ==========================================================================
   Task page: rename and description edited in place (task_detail.html, task_row.html)
   ========================================================================== */
.te-title { flex: 1 1 280px; min-width: 0; }
[data-edit-box] [hidden] { display: none !important; }
.te-title [data-view] { display: flex; align-items: center; gap: 6px; }
.te-title h1 { cursor: text; overflow-wrap: anywhere; }
.te-title h1:hover { background: var(--accent-soft); border-radius: var(--radius); }
.te-title form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.te-title input[name=title] { flex: 1 1 260px; font-size: 18px; font-weight: 600; }
.te-pencil { font-size: 16px; color: var(--muted); }
.te-pencil:hover { color: var(--accent); }
#description h3 .te-edit { float: right; text-transform: none; letter-spacing: 0; }
#description.editing h3 .te-edit { display: none; }
.te-empty { cursor: text; margin: 0; }
.te-row-edit { color: var(--muted); font-size: 12px; margin-left: 2px; opacity: 0; }
.tasklist li:hover .te-row-edit, .te-row-edit:focus { opacity: 1; }
@media (hover: none) { .te-row-edit { opacity: 1; } }
@media (max-width: 1000px) { .te-record > section { order: -1; } }  /* description before the side form on a phone */
/* End task page */

/* ==========================================================================
   Navigation and colour (2026-10 UX overhaul): top bar, search palette, sidebar that stays open,
   and colour reserved for meaning. See docs/UX_REVIEW.md.
   ========================================================================== */
:root {
  /* Deal stages, cool to warm as a deal gets closer to signing. */
  --st-prospect: #5b6475; --st-prospect-bg: #eef0f3;
  --st-qualified: #1d4ed8; --st-qualified-bg: #e3ebfd;
  --st-loi: #6d28d9; --st-loi-bg: #efe8fd;
  --st-lease: #0e7490; --st-lease-bg: #ddf3f8;
  --st-signed: #15803d; --st-signed-bg: #dcf3e4;
  --st-hold: #a16207; --st-hold-bg: #fdf3d8;
  --st-lost: #9f1239; --st-lost-bg: #fbe4ea;
  --today: #b45309; --today-bg: #fff3df;
  --topbar-h: calc(52px + env(safe-area-inset-top, 0px));
}
.stage-prospect, .stage-contacted { background: var(--st-prospect-bg); color: var(--st-prospect); }
.stage-qualified, .stage-engaged { background: var(--st-qualified-bg); color: var(--st-qualified); }
.stage-meeting { background: var(--st-loi-bg); color: var(--st-loi); }
.stage-loi_neg, .stage-loi_signed { background: var(--st-loi-bg); color: var(--st-loi); }
.stage-loi_signed { box-shadow: inset 0 0 0 1px var(--st-loi); }
.stage-lease_neg { background: var(--st-lease-bg); color: var(--st-lease); }
.stage-signed { background: var(--st-signed-bg); color: var(--st-signed); font-weight: 600; }
.stage-on_hold { background: var(--st-hold-bg); color: var(--st-hold); }
.stage-lost { background: var(--st-lost-bg); color: var(--st-lost); }
.stage.good { background: var(--good-bg); color: var(--good); }
/* Board columns carry their stage colour along the top. */
.column { border-top: 3px solid var(--st-prospect); }
.column[data-stage=qualified] { border-top-color: var(--st-qualified); }
.column[data-stage=loi_neg], .column[data-stage=loi_signed] { border-top-color: var(--st-loi); }
.column[data-stage=lease_neg] { border-top-color: var(--st-lease); }
.column[data-stage=signed] { border-top-color: var(--st-signed); background: rgba(0, 144, 44, 0.090); }
.column[data-stage=on_hold] { border-top-color: var(--st-hold); }
.column[data-stage=lost] { border-top-color: var(--st-lost); }
.kcard:has(.risk) { border-left: 3px solid var(--bad); }
/* Dates: red when late, amber when due today. */
.due-late, .overdue { color: var(--bad); font-weight: 600; }
.due-today { color: var(--today); font-weight: 600; }
.tag-alert { background: var(--bad); color: #fff; font-weight: 600; }
/* Buttons: solid navy for the main action, red only for removing things. */
.btn-primary:hover { background: #18304f; border-color: #18304f; }
.btn-danger { background: var(--panel); }
button.btn-primary, .btn.btn-primary { box-shadow: 0 1px 2px rgba(15, 23, 42, .15); }

/* Shell: CoStar-style navy bar across the top with drop-down menus, page underneath. */
.shell { display: block; min-height: 100vh; }
.main-col { min-width: 0; }
.appbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); display: flex; align-items: center; gap: 6px;
  padding: env(safe-area-inset-top, 0px) max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px)); background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 2px 8px rgba(15, 23, 42, .12); }
.appbar .spacer { flex: 1; }
.appbar .brand { display: block; margin-right: 14px; flex: 0 0 auto; }
.appbar .brand img { display: block; height: 30px; width: auto; }
.appbar .nav-burger { display: none; }
.topnav { display: flex; align-items: stretch; height: 100%; gap: 2px; }
.tn-link, .tn-menu > summary { display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 12px; color: #dbe4f0;
  font-weight: 500; font-size: 14px; white-space: nowrap; cursor: pointer; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.tn-link:hover, .tn-menu > summary:hover, .tn-menu[open] > summary { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.tn-link.active, .tn-menu.active > summary { color: #fff; border-bottom-color: #f5a524; }
.tn-menu { position: relative; height: 100%; }
.tn-menu > summary { list-style: none; }
.tn-menu > summary::-webkit-details-marker { display: none; }
.tn-menu > summary::after { content: "▾"; font-size: 10px; opacity: .7; }
.tn-count { background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px; padding: 0 6px; line-height: 17px; }
.tn-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f5a524; }
.tn-drop { position: absolute; left: 0; top: 100%; min-width: 320px; background: var(--panel); color: var(--text); border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .22); padding: 8px; border-top: 3px solid #f5a524; z-index: 60; }
.tn-drop-right { left: auto; right: 0; }
.tn-drop a { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 6px; color: var(--text); }
.tn-drop a strong { font-weight: 600; font-size: 14px; }
.tn-drop a span { font-size: 12px; color: var(--muted); }
.tn-drop a span:empty { display: none; }
.tn-drop a:hover { background: var(--accent-soft); text-decoration: none; }
.tn-drop a.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.appbar-icon { position: relative; border: 0; background: none; font-size: 17px; padding: 6px 8px; border-radius: var(--radius);
  color: #dbe4f0; line-height: 1; cursor: pointer; text-decoration: none; }
.appbar-icon:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.appbar .bell .count, .appbar .chat-btn .count { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.appbar .search-trigger { display: flex; align-items: center; gap: 8px; width: 210px; padding: 6px 10px; text-align: left;
  color: #dbe4f0; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; }
.appbar .search-trigger:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.search-trigger .search-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.appbar .search-trigger kbd { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #dbe4f0; }
.search-icon { font-size: 17px; line-height: 1; }
.btn-new { background: #f5a524; border-color: #f5a524; color: var(--text); font-weight: 600; }
.btn-new:hover { background: #ffb840; border-color: #ffb840; }
.appbar .user-menu .avatar { background: var(--panel); color: var(--accent); }
kbd { display: inline-block; font: 600 10.5px/1 system-ui, sans-serif; padding: 3px 5px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); }
main { padding: 20px 28px 40px; }

/* Drop-down menus (+ New, account). */
.menu-wrap { position: relative; }
.menu-wrap > summary { list-style: none; cursor: pointer; }
.menu-wrap > summary::-webkit-details-marker { display: none; }
.menu-wrap .menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); padding: 6px; z-index: 60; }
.menu a, .menu .menu-btn { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 6px; color: var(--text);
  width: 100%; text-align: left; border: 0; background: none; font: inherit; }
.menu a:hover, .menu .menu-btn:hover { background: var(--accent-soft); text-decoration: none; }
.menu a .muted { font-size: 12px; }
.menu-head { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; font-weight: 600; }
.menu-head .muted { font-weight: 400; font-size: 12px; }
.user-menu .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; }

/* Search palette. */
.palette { border: 0; padding: 0; width: min(640px, calc(100vw - 32px)); margin-top: 10vh; border-radius: 12px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .35); }
.palette::backdrop { background: rgba(15, 23, 42, .4); }
.palette-box input { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 18px; font-size: 16px; outline: none; }
.palette-results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.pal-group { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); padding: 10px 10px 4px; font-weight: 600; }
.pal-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center;
  padding: 7px 10px; border-radius: 8px; color: var(--text); }
.pal-item:hover { text-decoration: none; }
.pal-item.on { background: var(--accent-soft); }
.pal-title { grid-column: 1; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pal-sub { grid-column: 1; font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pal-sub:empty { display: none; }
.pal-item .stage { grid-column: 2; grid-row: 1 / span 2; }
.pal-empty { padding: 14px; margin: 0; }
.palette-foot { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; }

/* Page tabs (Tenant pipeline: Board / Table / Report) and filter chips. */
.page-tabs { display: inline-flex; background: var(--fill); border-radius: 8px; padding: 3px; gap: 2px; }
.page-tabs a { padding: 5px 14px; border-radius: 6px; color: var(--muted); font-weight: 500; font-size: 13px; }
.page-tabs a:hover { color: var(--text); text-decoration: none; }
.page-tabs a.on { background: var(--panel); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.chips a { padding: 4px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; }
.chips a:hover { border-color: var(--accent); text-decoration: none; }
.chips a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chips a .n { opacity: .7; margin-left: 3px; }

/* Breadcrumbs above record pages. */
.crumbs { font-size: 12.5px; color: var(--muted); margin: -6px 0 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
/* "← Back to <page>" above every page (back.js). */
.hub-back { margin: -4px 0 8px; font-size: 13px; }
.hub-back-link { display: inline-block; padding: 4px 10px 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); background: var(--panel); text-decoration: none; }
.hub-back-link:hover, .hub-back-link:focus-visible { color: var(--accent); border-color: var(--accent); }
/* A deal inside its company card: the deal's own name under the company tabs. */
.deal-in-company { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 4px 0 12px; }
.deal-in-company h2 { margin: 0; font-size: 18px; }
.kcard .kco { font-weight: 600; }
.kcard .kdeal { font-size: 12px; color: var(--muted); }

@media (max-width: 1230px) {  /* the top menus fold into ☰ before the bar runs out of room (split.js NARROW, base.html) */
  .appbar .nav-burger { display: block; }
  .topnav { display: none; position: absolute; left: 0; right: 0; top: var(--topbar-h); height: auto; flex-direction: column;
    background: var(--accent); padding: 8px; max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; }
  html.nav-open .topnav { display: flex; }
  .tn-link, .tn-menu > summary { height: 42px; border: 0; }
  .tn-menu { height: auto; }
  .tn-drop { position: static; box-shadow: none; border-top: 0; border-radius: 8px; margin: 0 0 6px; min-width: 0; }
  .appbar .search-trigger { width: auto; }
  .appbar .search-trigger kbd, .appbar .search-text { display: none; }
}
@media (max-width: 640px) { .appbar .brand img { height: 24px; } main { padding: 14px 16px 30px; } }
@media print { .appbar, .palette { display: none !important; } }
/* End navigation and colour */

/* ==========================================================================
   Dashboard (home.html, dashboard.js): search hero and customizable widgets.
   ========================================================================== */
.hero { background: linear-gradient(135deg, #1f3a5f 0%, #2b5283 100%); color: #fff; border-radius: 12px; padding: 20px 24px 16px;
  margin-bottom: 18px; box-shadow: 0 6px 20px rgba(31, 58, 95, .18); }
.hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hero-top h1 { margin: 0; font-size: 21px; }
.hero-top .spacer { flex: 1; }
.hero-btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.hero-btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.hero-search { position: relative; display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 10px;
  padding: 0 14px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.hero-search .search-icon { color: var(--muted); font-size: 20px; }
.hero-search input { flex: 1; border: 0; padding: 14px 0; font-size: 16px; outline: none; background: none; }
.hero-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--panel); color: var(--text); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .25); z-index: 30; max-height: 60vh; }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; }
.hero-links a { color: #dbe4f0; }
.hero-links a:hover { color: #fff; }

.customize-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px;
  background: var(--today-bg); border: 1px solid rgba(224, 137, 0, 0.388); border-radius: 10px; }
.customize-bar .spacer { flex: 1; }
.add-widget .menu { width: 340px; max-height: 60vh; overflow-y: auto; }
.add-widget .menu-btn[disabled] { opacity: .5; cursor: default; }

.widgets { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; grid-auto-flow: row dense; }
.widget { grid-column: span var(--w, 6); position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px 14px; min-width: 0; }
.widget-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; min-height: 22px; }
.widget-head h3 { margin: 0; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--muted); }
.widget.headless:not(:where(.customizing *)) > .widget-head { display: none; }
.widget-body { min-width: 0; }
/* A real (thin) scrollbar with its own gutter: Windows 11's overlay scrollbar drew over the dates at the right edge. */
.widget[style*="--h"] > .widget-body { height: var(--h); overflow: auto; scrollbar-width: thin; scrollbar-color: #c3ccd8 transparent;
  scrollbar-gutter: stable; }
.widget[style*="--h"] .week-day { min-height: calc(var(--h) - 70px); }
.widget .panel, .widget .week-panel { border: 0; padding: 0; margin: 0; background: none; }
.widget .cards { margin-bottom: 0; }
.widget-link { position: absolute; top: 12px; right: 14px; font-size: 12.5px; }
.widget-tools { display: none; margin-left: auto; gap: 6px; align-items: center; }
.widget-size { display: inline-flex; background: var(--fill); border-radius: 6px; padding: 2px; }
.widget-size button { border: 0; background: none; padding: 2px 7px; font-size: 12px; border-radius: 4px; color: var(--muted); }
.widget-size button.on { background: var(--panel); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 23, 42, .15); }
.widget-x { border: 0; background: none; font-size: 18px; line-height: 1; padding: 0 4px; color: var(--muted); }
.widget-x:hover { color: var(--bad); }
.widget-resize { display: none; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; touch-action: none; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, #9aa6b5 50%, #9aa6b5 60%, transparent 60%, transparent 70%, #9aa6b5 70%, #9aa6b5 80%, transparent 80%); }
.customizing .widget { outline: 2px dashed var(--line-strong); outline-offset: -2px; }
.customizing .widget-head { cursor: grab; background: rgba(0, 57, 142, 0.035); margin: -12px -14px 10px; padding: 8px 14px; border-radius: 10px 10px 0 0; }
.customizing .widget-tools { display: inline-flex; }
.customizing .widget-resize { display: block; }
.customizing .widget-link { display: none; }
.customizing .widget-body { pointer-events: none; user-select: none; }
.widget.dragging { opacity: .45; }
.widget.resizing { outline-color: var(--accent); }
@media (max-width: 1000px) { .widget { grid-column: 1 / -1; } }
/* Placed by dashboard.js: an 8px row grid, each widget at its own column and row (x, y), its own height. */
.widgets.placed { grid-auto-rows: 8px; row-gap: 0; column-gap: 16px; grid-auto-flow: row; }
.widgets.placed > .widget { align-self: start; }
.widget-grip { position: absolute; top: 6px; right: 8px; z-index: 2; border: 0; background: var(--fill); color: var(--muted); border-radius: 6px;
  width: 26px; height: 24px; font-size: 15px; line-height: 1; cursor: grab; touch-action: none; opacity: 0; transition: opacity .12s; }
.widget:hover > .widget-grip, .widget-grip:focus-visible, .customizing .widget-grip { opacity: 1; }
.widget-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .widget-grip { opacity: .8; } }
.widget:hover > .widget-resize { display: block; opacity: .55; }
.widgets:not(.customizing) .widget-head { cursor: grab; }
.widgets:not(.customizing) .widget-head h3 { user-select: none; }
.customizing .widget-head { padding-right: 44px; }
.widget-link { right: 44px; }
.widget-order { display: none; gap: 2px; }
.widget-order button { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: 0 6px; font-size: 12px; color: var(--muted); }
.customizing .widget-order { display: inline-flex; }
.widget-ghost { border: 2px dashed var(--accent); border-radius: 10px; background: rgba(37, 99, 235, .06); align-self: stretch; }
.widget.dragging { opacity: .85; box-shadow: 0 12px 28px rgba(15, 23, 42, .22); cursor: grabbing; pointer-events: none; }
@media (max-width: 1000px) {
  .widgets.placed { grid-auto-rows: auto; row-gap: 16px; }
  .widgets.placed > .widget { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .widget-resize, .widget:hover > .widget-resize { display: none; }
  .widget-grip { display: none; }
}
/* End dashboard */
.customize-bar[hidden], .hero-results[hidden] { display: none; }

/* ==========================================================================
   View bar (partials/view_bar.html, views.js) on every list, and compact rows.
   ========================================================================== */
.view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.view-bar .spacer { flex: 1; }
.vb-label { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; margin-right: 2px; }
.vb-view-wrap { display: inline-flex; align-items: center; }
.vb-view { padding: 3px 10px; border-radius: 99px; color: var(--text); border: 1px solid transparent; }
.vb-view:hover { background: var(--accent-soft); text-decoration: none; }
.vb-view.on { background: var(--accent-soft); border-color: rgba(0, 65, 156, 0.231); color: var(--accent); font-weight: 600; }
.vb-shared { font-size: 10.5px; color: var(--muted); font-weight: 400; }
.vb-del { display: inline; margin: 0; }
.vb-del button { border: 0; background: none; color: var(--muted); padding: 0 4px; font-size: 14px; opacity: 0; }
.vb-view-wrap:hover .vb-del button, .vb-del button:focus { opacity: 1; }
.vb-del button:hover { color: var(--bad); }
.vb-save { display: flex; flex-direction: column; gap: 8px; padding: 12px; width: 300px; }
.vb-save label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.vb-check { flex-direction: row !important; align-items: center; gap: 6px !important; color: var(--text) !important; font-size: 13px !important; }
.vb-cols .menu { width: 260px; max-height: 60vh; overflow-y: auto; padding: 10px 12px; }
.vb-col-list { display: flex; flex-direction: column; gap: 4px; }
.vb-hint { margin: 0 0 8px; font-size: 12px; }
.compact-rows table.data th, .compact-rows table.data td { padding-top: 3px; padding-bottom: 3px; font-size: 13px; }
.compact-rows .kcard { padding: 5px 8px; margin-bottom: 5px; }
.compact-rows .kcard .sub, .compact-rows .kcard .next { font-size: 11.5px; }
.chips a.chip-alert { border-color: rgba(193, 19, 0, 0.259); color: var(--bad); }
.chips a.chip-alert.on { background: var(--bad); border-color: var(--bad); color: #fff; }
/* Land site statuses. */
.site-prospect { background: var(--st-prospect-bg); color: var(--st-prospect); }
.site-review { background: var(--st-qualified-bg); color: var(--st-qualified); }
.site-outreach { background: var(--today-bg); color: var(--today); }
.site-loi { background: var(--st-loi-bg); color: var(--st-loi); }
.site-contract { background: var(--st-lease-bg); color: var(--st-lease); }
.site-acquired { background: var(--st-signed-bg); color: var(--st-signed); font-weight: 600; }
.site-dropped { background: var(--st-lost-bg); color: var(--st-lost); }
/* The investor report reads as a sheet under the Tenant pipeline tabs. */
.report-sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px 6px; }
.report-sheet .panel { border-radius: 8px; }
@media print { .report-sheet { border: 0; padding: 0; } }
/* End view bar */
.tasklist li.task-due-late { box-shadow: inset 3px 0 0 var(--bad); padding-left: 6px; } .tasklist li.task-due-today { box-shadow: inset 3px 0 0 var(--today); padding-left: 6px; }
@media (max-width: 1000px) { .widget[style*="--h"] > .widget-body { height: auto; overflow: visible; } .widget[style*="--h"] .week-day { min-height: 0; } .hero-search kbd { display: none; } .hero-top { flex-wrap: wrap; } }
.welcome-tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 14px; background: rgba(0, 105, 255, 0.067); border: 1px solid rgba(0, 90, 217, 0.212); border-radius: 10px; font-size: 13.5px; } .welcome-tip[hidden] { display: none; } .welcome-tip span { flex: 1; } .welcome-tip strong:first-child { white-space: nowrap; color: var(--accent); }
/* Tenant pipeline report: the Columns picker (partials/pipeline_head.html). */
.report-cols .rc-form { width: 300px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rc-hint { margin: 0; font-size: 12px; }
.rc-quick { display: flex; gap: 6px; }
.rc-list { display: flex; flex-direction: column; gap: 3px; max-height: 50vh; overflow-y: auto; }
.rc-foot { display: flex; gap: 6px; }
.btn-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ==========================================================================
   Boards (crm/boards): lists of cards on the CRM's records. board.js moves cards; the card opens in a dialog.
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.req { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bad); margin-left: 6px; }
/* Board colours: a swatch on the page and a stripe on the tile. */
.bc-navy { --bc: #1f3a5f; } .bc-sky { --bc: #1d6fb8; } .bc-teal { --bc: #0e7490; } .bc-green { --bc: #15803d; }
.bc-amber { --bc: #b45309; } .bc-rose { --bc: #be123c; } .bc-violet { --bc: #6d28d9; } .bc-slate { --bc: #475569; }
.bl-h2 { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--muted); margin: 18px 0 8px; }
.bl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bl-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--bc, var(--accent)); border-radius: 10px; color: var(--text); min-height: 108px; }
.bl-tile:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .1); border-color: var(--line-strong); }
.bl-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-tile-name { font-weight: 600; font-size: 15px; }
.bl-tile-sub, .bl-tile-meta { font-size: 12.5px; color: var(--muted); }
.bl-tile-due { color: var(--today); font-weight: 600; }
.bl-tile-members { display: flex; gap: 2px; margin-top: auto; padding-top: 6px; }
.bl-pagehead .bl-swatch { width: 14px; height: 28px; border-radius: 4px; background: var(--bc, var(--accent)); }
.bl-members { display: flex; gap: 2px; }
.bl-desc { margin: -8px 0 10px; max-width: 80ch; }
.bl-labels-menu { width: 360px; display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.bl-label-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 90px auto auto; gap: 6px; align-items: center; }
.bl-label-row input, .bl-label-row select { min-width: 0; }
.bl-settings { width: 320px; padding: 12px; }
.bl-settings .fields p { margin-bottom: 8px; }
.bl-danger { color: var(--bad); }
.bl-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.bl-filters label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.bl-filters select, .bl-filters input { font-size: 13px; padding: 4px 6px; }
.bl-filters .chip-check { cursor: pointer; color: var(--text); }
.bl-filters .chip-check.on { background: var(--accent-soft); border-color: var(--accent); }
.bl-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 4px 2px 14px; min-height: 240px; }
.bl-list { flex: 0 0 272px; width: 272px; background: var(--fill); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; max-height: calc(var(--main-vh, 100vh) - 230px); }
.bl-head { display: flex; align-items: center; gap: 6px; padding: 2px 6px 8px; }
.bl-name { margin: 0; font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bl-n { font-weight: 400; font-size: 12px; }
.bl-dots { font-size: 18px; line-height: 1; padding: 0 6px; color: var(--muted); }
.bl-dots:hover { color: var(--text); }
.bl-menu .menu { min-width: 230px; }
.bl-rename { display: flex; gap: 6px; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.bl-rename input { flex: 1; min-width: 0; }
.bl-cards { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 8px; min-height: 24px; overflow-y: auto; border-radius: 8px; transition: background .15s; }
.bl-cards.drop-on { background: rgba(0, 68, 180, 0.133); }
.bl-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 8px; cursor: grab; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 1px rgba(15, 23, 42, .05); }
.bl-card:hover { border-color: var(--line-strong); }
.bl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-card.dragging { opacity: .4; }
.bl-card { -webkit-touch-callout: none; }
.bl-card.touch-lifted { position: fixed; z-index: 1200; margin: 0; opacity: .95; pointer-events: none; transform: rotate(1.5deg);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .3); }
@media (max-width: 900px) { .bl-list { scroll-snap-align: start; } .bl-board { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } }
.bl-card.grabbed { outline: 2px solid var(--accent); box-shadow: 0 8px 20px rgba(31, 58, 95, .25); transform: rotate(-1deg); }
.bl-card.bl-failed { outline: 2px solid var(--bad); }
.bl-card.is-done .bl-title { color: var(--muted); }
.bl-placeholder { border: 2px dashed var(--line-strong); border-radius: 8px; background: rgba(255,255,255,.5); }
.bl-card[class*="cover-"] { border-top-width: 6px; }
.cover-green { border-top-color: #4bce97; } .cover-yellow { border-top-color: #e2b203; } .cover-orange { border-top-color: #faa53d; }
.cover-red { border-top-color: #f87168; } .cover-purple { border-top-color: #9f8fef; } .cover-blue { border-top-color: #579dff; }
.cover-sky { border-top-color: #6cc3e0; } .cover-lime { border-top-color: #94c748; } .cover-pink { border-top-color: #e774bb; } .cover-black { border-top-color: #596773; }
.bl-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.bl-label { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.5; padding: 0 7px; border-radius: 4px; background: var(--fill); color: color-mix(in srgb, #2b3440 var(--ink-mix), var(--text)); border: 1px solid transparent; }
.lbl-green { background: rgba(0, 159, 32, 0.157); color: color-mix(in srgb, #14532d var(--ink-mix), var(--text)); } .lbl-yellow { background: rgba(238, 196, 0, 0.290); color: color-mix(in srgb, #633f00 var(--ink-mix), var(--text)); } .lbl-orange { background: rgba(247, 125, 0, 0.239); color: color-mix(in srgb, #7c2d12 var(--ink-mix), var(--text)); }
.lbl-red { background: rgba(232, 23, 0, 0.176); color: color-mix(in srgb, #7f1d1d var(--ink-mix), var(--text)); } .lbl-purple { background: rgba(56, 0, 223, 0.125); color: color-mix(in srgb, #4c1d95 var(--ink-mix), var(--text)); } .lbl-blue { background: rgba(0, 92, 229, 0.153); color: color-mix(in srgb, #1e3a8a var(--ink-mix), var(--text)); }
.lbl-sky { background: rgba(0, 154, 208, 0.169); color: color-mix(in srgb, #0c4a6e var(--ink-mix), var(--text)); } .lbl-lime { background: rgba(125, 188, 0, 0.224); color: color-mix(in srgb, #365314 var(--ink-mix), var(--text)); } .lbl-pink { background: rgba(228, 0, 128, 0.149); color: color-mix(in srgb, #831843 var(--ink-mix), var(--text)); } .lbl-black { background: rgba(0, 31, 68, 0.161); color: color-mix(in srgb, #1f2937 var(--ink-mix), var(--text)); }
.bl-title { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.bl-record { font-size: 11.5px; color: var(--accent); display: flex; gap: 4px; align-items: baseline; }
.bl-record-kind { font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); }
/* Feed and bound lists (crm/boards/bound.py): a feed fills itself and opens the record; a bound list moves it. */
.bl-kind { font-size: 11.5px; margin: -4px 6px 6px; }
.bl-feed .bl-head { border-bottom: 1px dashed var(--line); margin-bottom: 6px; }
.bl-feed-item { cursor: default; }
.bl-feed-link { color: inherit; text-decoration: none; }
.bl-feed-link:hover .bl-title, .bl-feed-link:focus-visible .bl-title { text-decoration: underline; }
.bl-card[data-fixed] { cursor: pointer; }
.bl-feed-empty { font-size: 12.5px; padding: 6px; list-style: none; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; color: var(--muted); min-height: 18px; }
.bl-meta .spacer { flex: 1; }
.bl-due { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 4px; font-weight: 600; background: var(--fill); color: var(--text-2); }
.bl-due.late { background: var(--bad-bg); color: var(--bad); } .bl-due.today { background: var(--today-bg); color: var(--today); }
.bl-due.soon { background: var(--warn-bg); color: var(--warn); } .bl-due.done { background: var(--good-bg); color: var(--good); }
.bl-count.all-done { color: var(--good); font-weight: 600; }
.bl-avatar { margin-left: -5px; border: 2px solid #fff; }
.bl-avatar:first-of-type { margin-left: 0; }
.bl-add { padding: 6px 4px 2px; }
.bl-add-open { color: color-mix(in srgb, #4a5260 var(--ink-mix), var(--text)); font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.bl-add-open:hover { background: rgba(0, 32, 88, 0.125); color: var(--text); text-decoration: none; }
.bl-add-box { display: flex; flex-direction: column; gap: 6px; }
.bl-add-box[hidden], .bl-add-open[hidden] { display: none; }
.bl-add-box textarea, .bl-add-box input { width: 100%; font-size: 13.5px; }
.bl-newlist { background: rgba(0, 38, 94, 0.106); justify-content: flex-start; }
.bl-empty { align-self: center; margin: 40px 10px; }
.bl-hint { font-size: 12px; margin-top: 2px; }
.bl-archived { margin-top: 14px; }
.bl-archived summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.bl-arch-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
/* The card dialog. */
.card-dialog { width: min(1040px, 96vw); max-height: 92vh; border: 0; border-radius: 12px; padding: 0; box-shadow: 0 24px 60px rgba(10, 20, 40, .35); }
.card-dialog::backdrop { background: rgba(15, 22, 33, .5); }
.cd { padding: 18px 22px 22px; }
.cd-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cd-title { flex: 1; min-width: 0; }
.cd-title [data-view] { display: flex; align-items: center; gap: 6px; }
.cd-title h2 { margin: 0; font-size: 20px; cursor: text; overflow-wrap: anywhere; border-radius: 6px; }
.cd-title h2:hover { background: var(--accent-soft); }
.cd-title form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cd-title input[name=title] { flex: 1 1 260px; font-size: 18px; font-weight: 600; }
.cd-where { font-size: 13px; margin-top: 2px; }
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; align-items: start; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 12px; }
.cd-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.cd-chip-label { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); margin-right: 3px; width: 100%; }
.cd-member { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.cd-done label { cursor: pointer; font-size: 12.5px; padding: 2px 8px; }
.cd-fact { font-size: 12.5px; }
.cd-panel { margin-bottom: 12px; }
.cd-panel h3 .te-edit { margin-left: 8px; text-transform: none; letter-spacing: 0; }
.cd-items { list-style: none; margin: 0 0 8px; padding: 0; }
.cd-items li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.cd-items li:first-child { border-top: 0; }
.cd-items li.done .cd-item-text { text-decoration: line-through; color: var(--muted); }
.cd-item-text { flex: 1; }
.cd-item-toggle { display: inline-flex; margin: 0; }
.cd-att { font-size: 13.5px; padding: 3px 0; }
.cd-events { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cd-events li { padding: 3px 0; border-top: 1px solid var(--line); }
.cd-events li:first-child { border-top: 0; }
.cd-side h3 { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); margin: 10px 0 6px; }
.cd-side h3:first-child { margin-top: 0; }
.cd-tool { margin-bottom: 6px; }
.cd-tool > summary { list-style: none; display: block; width: 100%; text-align: left; cursor: pointer; }
.cd-tool > summary::-webkit-details-marker { display: none; }
.cd-tool[open] > summary { background: var(--accent-soft); border-color: var(--accent); }
.cd-pop { display: flex; flex-direction: column; gap: 6px; padding: 10px; margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.cd-pop label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 12px; }
.cd-pop label.vb-check { flex-direction: row; }
.cd-pop input, .cd-pop select { font-size: 13px; }
.cd-covers { flex-direction: row; flex-wrap: wrap; }
.cd-cover-btn { cursor: pointer; }
.cd-cover-btn.on { outline: 2px solid var(--accent); }
.cd-hits { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.cd-hit { text-align: left; border: 0; background: none; padding: 5px 6px; border-radius: 6px; font: inherit; font-size: 13px; }
.cd-hit:hover, .cd-hit:focus-visible { background: var(--accent-soft); }
.cd-action { display: block; margin-bottom: 6px; }
.cd-action .btn, .cd-side > a.btn { display: block; width: 100%; text-align: left; margin-bottom: 6px; }
@media (max-width: 760px) {
  .cd-grid { grid-template-columns: minmax(0, 1fr); }
  .cd { padding: 14px; }
  .bl-list { flex-basis: 84vw; width: 84vw; max-height: none; }
  .bl-labels-menu, .bl-settings { width: calc(100vw - 40px); }
}
/* End boards */

/* Drive files panel (crm/dataroom/drive_views.py) */
.drive-panel .dp-folder { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); margin: 12px 0 4px; }
.drive-panel .dp-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.drive-panel .dp-list > li { padding: 5px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.drive-panel .dp-date { font-size: 12px; margin-left: 4px; }
.drive-panel .dp-older summary, .drive-panel .dp-share summary { font-size: 12px; cursor: pointer; }
.drive-panel .dp-share form { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; align-items: flex-start; }
.drive-panel .dp-confirm { font-size: 12px; }
.drive-panel .dp-hint { font-size: 12px; display: block; }
.drive-panel .dp-stale { background: rgba(255, 170, 0, 0.059); border: 1px solid rgba(222, 162, 0, 0.451); border-radius: 6px; padding: 8px; font-size: 13px; margin-bottom: 8px; }
.tag.tag-warn { background: rgba(231, 24, 0, 0.082); color: color-mix(in srgb, #a1271b var(--ink-mix), var(--text)); }

/* Notification settings (crm/push.py) */
.push-panel [hidden] { display: none !important; }
.push-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.push-sound { margin-left: 4px; font-size: 13px; }
.push-status { margin: 10px 0 0; font-size: 13px; }
.push-status.bad { color: var(--bad); }
.push-devices { margin-top: 12px; }
.push-devices .tag { margin-left: 6px; }
table.notify-kinds .center, table.notify-kinds th.center { text-align: center; width: 110px; }
table.notify-kinds input[type=checkbox] { width: 18px; height: 18px; }
@media (max-width: 600px) { table.notify-kinds .center, table.notify-kinds th.center { width: 64px; padding-left: 4px; padding-right: 4px; } }

/* Mail in the hub: the inbox (crm/templates/crm/inbox.html) */
main:has(.mail-app) { max-width: none; padding: 12px 16px 16px; }
.mail-app { display: grid; grid-template-columns: 190px minmax(300px, 400px) minmax(0, 1fr); gap: 0;
  height: calc(var(--main-vh, 100vh) - var(--topbar-h) - 28px); min-height: 480px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.mail-folders { border-right: 1px solid var(--line); overflow-y: auto; padding: 8px 0; background: var(--bg); }
.mail-folders a { display: flex; align-items: center; gap: 6px; padding: 6px 14px; color: var(--text); font-size: 13px; }
.mail-folders a:hover { background: var(--accent-soft); text-decoration: none; }
.mail-folders a.on { background: var(--accent-soft); font-weight: 600; color: var(--accent); }
.mail-folders-head { padding: 12px 14px 4px; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); }
.mail-folders-foot { padding: 12px 14px; }
.mail-count { margin-left: auto; font-size: 12px; font-weight: 600; }
.mail-labels-head { display: flex; width: 100%; justify-content: space-between; border: 0; background: none; cursor: pointer; text-align: left; }
.mail-labels-head:hover { color: var(--text); }
.mail-labels[hidden], .mail-label-row[hidden] { display: none; }
.mail-label-row { display: flex; align-items: center; padding-left: calc(4px + var(--depth, 0) * 14px); padding-right: 4px; }
.mail-label-row:hover, .mail-label-row.on { background: var(--accent-soft); }
.mail-label-row.on a { font-weight: 600; color: var(--accent); }
.mail-folders .mail-label-row a { flex: 1; min-width: 0; padding: 6px 6px 6px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-folders .mail-label-row a:hover { background: none; }
.mail-label-group { flex: 1; min-width: 0; padding: 6px 2px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-twisty { flex: none; width: 18px; height: 22px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
span.mail-twisty { cursor: default; }
.mail-label-menu > summary { padding: 2px 6px; border-radius: 4px; color: var(--muted); visibility: hidden; }
.mail-label-row:hover .mail-label-menu > summary, .mail-label-menu[open] > summary, .mail-label-menu > summary:focus-visible { visibility: visible; }
.mail-label-menu > summary:hover { background: var(--panel); }
.mail-label-menu .mail-menu-pop { position: fixed; width: 240px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.mail-label-form { display: flex; flex-direction: column; gap: 4px; }
.mail-label-form input { width: 100%; }
.mail-label-menu .mail-label-delete { color: var(--bad); text-align: left; padding: 0; }
@media (hover: none) { .mail-label-menu > summary { visibility: visible; } }
.mail-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 23, 59, 0.220); flex: none; }
.mail-list { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; min-height: 0; }
.mail-search { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); }
.mail-search input { flex: 1; min-width: 0; }
.mail-search { position: relative; }
.mail-adv { position: static; }
.mail-adv > summary { list-style: none; height: 100%; }
.mail-adv > summary::-webkit-details-marker { display: none; }
.mail-adv-pop { position: absolute; z-index: 30; top: calc(100% - 2px); left: 8px; right: 8px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.mail-adv-pop label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.mail-adv-pop label:has(input[type=checkbox]) { flex-direction: row; align-items: center; gap: 4px; color: var(--text); }
.mail-adv-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mail-adv-row > label { flex: 1; }
.mail-adv-row > label:has(input[type=checkbox]) { flex: 0 0 auto; }
.mail-widened { margin: 0; padding: 4px 10px; border-bottom: 1px solid var(--line); }
/* Address and search suggestions (recipients.js) */
.addr-host { position: relative; }
.addr-suggest { position: absolute; z-index: 3000; left: 0; right: 0; top: 100%; margin-top: 2px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); max-height: 300px; overflow-y: auto; font-size: 13px; }
.compose-row .addr-suggest { left: 64px; }
.addr-row { padding: 6px 10px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-row.on, .addr-row:hover { background: var(--accent-soft); }
.addr-detail { font-size: 11px; background: var(--fill); border-radius: 4px; padding: 1px 5px; margin-left: 4px; color: var(--text-2); }
.addr-note { padding: 6px 10px; border-top: 1px solid var(--line); white-space: normal; }
.mail-folders-toggle { display: none; }
.mail-list-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.mail-list-head .spacer { flex: 1; }
.mail-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto;
  scrollbar-width: none; }
.mail-tabs::-webkit-scrollbar { display: none; }
.mail-tabs a { padding: 6px 10px; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.mail-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.mail-tabs a:hover { text-decoration: none; color: var(--text); }
.mail-rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.mail-row a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--line); color: var(--text); }
.mail-row a:hover, .mail-row a:focus { background: var(--bg); text-decoration: none; outline: none; }
.mail-row a:focus-visible { box-shadow: inset 3px 0 0 var(--accent); }
.mail-row.on a { background: var(--accent-soft); }
.mail-row.unread .mail-from, .mail-row.unread .mail-subject { font-weight: 700; }
.mail-row.unread a { box-shadow: inset 3px 0 0 var(--accent); }
.mail-from, .mail-subject, .mail-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mail-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mail-subject, .mail-snippet, .mail-row .mail-chips { grid-column: 1 / -1; }
.mail-snippet { color: var(--muted); font-size: 12px; }
.mail-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.mail-chip { font-size: 11px; padding: 1px 6px; border-radius: 9px; background: var(--accent-soft); color: var(--accent);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-chip.chip-project { background: rgba(78, 0, 233, 0.090); color: color-mix(in srgb, #6d28d9 var(--ink-mix), var(--text)); }
.mail-chip.chip-deal { background: rgba(0, 168, 58, 0.137); color: color-mix(in srgb, #15803d var(--ink-mix), var(--text)); }
.mail-chip.chip-firm { background: rgba(242, 177, 0, 0.153); color: color-mix(in srgb, #8a5a00 var(--ink-mix), var(--text)); }
.mail-chip.chip-new { background: var(--bad-bg); color: var(--bad); }
a.mail-chip:hover { text-decoration: none; filter: brightness(.95); }
.mail-empty, .mail-note, .mail-error { padding: 14px 12px; margin: 0; }
.mail-error { color: var(--bad); background: var(--bad-bg); }
.mail-more { padding: 8px 12px; }
.mail-reader { overflow-y: auto; min-width: 0; padding: 0 20px 24px; }
.mail-reader.loading { opacity: .5; transition: opacity .15s .1s; pointer-events: none; }
.mail-reader-head { position: sticky; top: 0; background: var(--panel); padding: 14px 0 8px; z-index: 1;
  border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.mail-reader-head h2 { font-size: 18px; margin: 0 0 6px; overflow-wrap: anywhere; }
.mail-reader-head p { margin: 6px 0 0; }
.mail-back { display: none; margin-bottom: 8px; }
.mail-reader-empty { display: grid; place-items: center; height: 100%; }
.mail-msg { border-bottom: 1px solid var(--line); padding: 8px 0; scroll-margin-top: 170px; }
.mail-msg > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; cursor: pointer; list-style: none; }
.mail-msg > summary::-webkit-details-marker { display: none; }
.mail-msg-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-msg-snippet { grid-column: 1 / -1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-msg[open] .mail-msg-snippet { display: none; }
.mail-msg-to { margin: 4px 0 6px; overflow-wrap: anywhere; }
.mail-frame { width: 100%; border: 0; min-height: 60px; display: block; }
.mail-images { margin: 6px 0; }
.mail-files { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mail-files a { overflow-wrap: anywhere; }
/* Layout follows the width of the mail pane itself (data-w, set by the script in inbox.html), not the window: in a split side it's narrower. */
.mail-app[data-w=mid], .mail-app[data-w=narrow] { grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); }
.mail-app[data-w=mid] .mail-folders, .mail-app[data-w=narrow] .mail-folders { display: none; position: absolute; z-index: 5; width: 220px; max-height: 70vh; box-shadow: 0 8px 24px rgba(0,0,0,.15);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .mail-app[data-w=mid] .mail-folders.open, .mail-app[data-w=narrow] .mail-folders.open { display: block; }
.mail-app[data-w=mid] .mail-folders-toggle, .mail-app[data-w=narrow] .mail-folders-toggle { display: inline-block; }
.mail-app[data-w=mid], .mail-app[data-w=narrow] { position: relative; }
.mail-app[data-w=mid] .mail-folders, .mail-app[data-w=narrow] .mail-folders { top: 46px; left: 8px; }
.mail-app[data-w=narrow] { grid-template-columns: minmax(0, 1fr); }
.mail-app[data-w=narrow].has-reader .mail-list { display: none; }
.mail-app[data-w=narrow]:not(.has-reader) .mail-reader { display: none; }
.mail-app[data-w=narrow] .mail-back { display: inline-block; }
.mail-app[data-w=narrow] .mail-reader { padding: 0 12px 24px; }
.mail-app[data-w=narrow] .mail-list { border-right: 0; }
.mail-app[data-w=narrow] .mail-reader-head { position: static; }
@media (max-width: 760px) {
  main:has(.mail-app) { padding: 0; }
  main:has(.mail-app) > .hub-back { margin: 8px 12px 4px; }  /* the page has no padding here: keep it clear of the top bar */
  .mail-app { height: calc(var(--main-vh, 100vh) - var(--topbar-h)); border: 0; border-radius: 0; }
}
/* In a split side the mail pane fills the frame. */
html.embedded main:has(.mail-app) { padding: 0; }
html.embedded .mail-app { height: 100vh; min-height: 0; border: 0; border-radius: 0; }
/* Long threads (step 3b) */
.mail-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.mail-find { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.mail-find input { width: 200px; max-width: 60vw; }
.mail-parts { margin: 6px 0 0; }
.mail-summary { margin: 10px 0; }
.mail-summary h3 { font-size: 13px; margin: 8px 0 4px; }
.mail-summary p, .mail-summary ul { margin: 0 0 6px; }
.mail-filepanel, .mail-outline { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin: 10px 0; }
.mail-filepanel > summary, .mail-outline > summary { cursor: pointer; }
.mail-filebar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.mail-filebar input[type=search] { width: 180px; max-width: 100%; }
.mail-filetypes { display: flex; flex-wrap: wrap; gap: 4px; }
.mail-filetypes .on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mail-filelist { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.mail-filelist > li { padding: 6px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.mail-filename { font-weight: 600; overflow-wrap: anywhere; }
.mail-versions { flex-basis: 100%; }
.mail-versions ul { margin: 4px 0 0; padding-left: 18px; }
.mail-outline-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.mail-outline-list a { display: grid; grid-template-columns: 2.5em minmax(70px, 9em) minmax(0, 1fr) auto; gap: 8px;
  padding: 4px 2px; border-top: 1px solid var(--line); color: var(--text); align-items: baseline; }
.mail-outline-list a:hover { background: var(--bg); text-decoration: none; }
.mail-outline-list a.unread { font-weight: 600; }
.mail-outline-n { color: var(--muted); text-align: right; font-size: 12px; }
.mail-outline-from, .mail-outline-words { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-new-line { margin: 10px 0 2px; font-size: 12px; font-weight: 600; color: var(--accent); border-top: 2px solid var(--accent); padding-top: 4px; }
.mail-msg.flash { animation: mail-flash 1.6s ease-out; }
@keyframes mail-flash { from { background: var(--accent-soft); } to { background: transparent; } }
.mail-latest[hidden] { display: none; }
.mail-latest { position: sticky; bottom: 12px; float: right; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
@media (max-width: 760px) {
  .mail-outline-list a { grid-template-columns: 2em minmax(0, 1fr) auto; }
  .mail-outline-words { display: none; }
  .mail-latest { bottom: 16px; }
}
.mail-files-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mail-files-search input[type=search] { flex: 1 1 220px; min-width: 0; }
.mail-files-search select { max-width: 100%; }
.mail-filelist-page { max-height: none; }
/* Mail actions (step 4) */
.mail-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.mail-row > a { flex: 1; min-width: 0; border-bottom: 0; }
.mail-pick { margin: 12px 0 0 10px; flex: none; width: 16px; height: 16px; }
.mail-undo { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--text); color: #fff; font-size: 13px; }
.mail-undo .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.mail-bulk { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; padding: 6px 8px; background: var(--accent-soft);
  border-bottom: 1px solid var(--line); }
.mail-bulk[hidden] { display: none; }
.mail-bulk-pick { display: inline-flex; gap: 4px; align-items: center; }
.mail-bulk select { max-width: 150px; font-size: 12px; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px; }
.mail-actions-main { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-menu { position: relative; }
.mail-menu > summary { list-style: none; cursor: pointer; }
.mail-menu > summary::-webkit-details-marker { display: none; }
.mail-menu-pop { position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; min-width: 210px; max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 6px 0; }
.mail-menu-pop form { margin: 0; }
.mail-menu-pop .btn-link { display: block; width: 100%; text-align: left; padding: 6px 12px; color: var(--text); }
.mail-menu-pop .btn-link:hover { background: var(--bg); text-decoration: none; }
.mail-menu-custom { display: flex; gap: 4px; padding: 6px 12px; border-top: 1px solid var(--line); margin-top: 4px; }
.mail-menu-custom input { min-width: 0; flex: 1; font-size: 12px; }
@media (max-width: 760px) {
  .mail-actions { position: relative; }
  .mail-menu { position: static; }
  .mail-menu-pop { left: 0; right: 0; min-width: 0; }
}

/* Compose (step 5) */
.mail-compose-btn { margin: 0 10px 8px; justify-content: center; background: var(--accent); color: #fff !important; border-radius: var(--radius); font-weight: 600; }
.mail-compose-btn:hover { background: var(--accent) !important; filter: brightness(1.1); }
.mail-reply-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.mail-msg-reply { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.mail-reply-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; padding: 12px;
  border: 1px dashed var(--line); border-radius: var(--radius); }
.mail-reply-end .btn, .mail-reply-end .btn-primary { padding: 7px 16px; }
.compose { max-width: 860px; display: flex; flex-direction: column; gap: 8px; }
.compose-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; }
.compose-row > span { color: var(--muted); font-size: 13px; }
.compose-row input, .compose-row select { width: 100%; min-width: 0; }
.compose-more > summary { cursor: pointer; margin-left: 78px; color: var(--accent); }
.compose-more[open] > summary { margin-bottom: 6px; }
.compose-more .compose-row { margin-bottom: 6px; }
.compose-body { width: 100%; min-height: 220px; font: inherit; line-height: 1.45; resize: vertical; }
.compose-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line);
  border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--bg); margin-bottom: -8px; }
.compose-tool { min-width: 30px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; background: none;
  color: var(--text); font-size: 14px; line-height: 1; cursor: pointer; }
.compose-tool:hover { background: var(--panel); border-color: var(--line); }
.compose-tool.on { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }
.compose-tool-gap { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.compose-toolbar { position: relative; }
.compose-a { border-bottom: 3px solid #c0392b; padding: 0 1px; font-weight: 600; }
.compose-hl { background: rgba(255, 229, 0, 0.537); padding: 0 3px; font-weight: 600; }
.compose-swatches { position: absolute; top: calc(100% + 2px); z-index: 5; display: flex; gap: 4px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.compose-swatches[hidden] { display: none; }
.compose-swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.compose-swatch:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.compose-swatch.none { background: linear-gradient(135deg, var(--panel) 45%, #c0392b 45% 55%, var(--panel) 55%); }
.compose-editor { padding: 8px 10px; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); background: var(--panel);
  overflow: auto; overflow-wrap: anywhere; outline: none; }
.compose-editor:focus { border-color: var(--accent); }
.compose-editor ul, .compose-editor ol { margin: 4px 0; padding-left: 26px; }
.compose-editor blockquote { margin: 4px 0 4px 12px; }
.compose-editor p { margin: 0 0 8px; }
.compose-sig { margin: 0; }
.compose-files { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.compose-attach input { margin-left: 6px; max-width: 100%; }
/* Picked attachments, kept across picks (attach.js). */
.attach-list { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 13px; }
.attach-list li { padding: 2px 0; }
.attach-list .btn-link { font-size: 16px; line-height: 1; padding: 0 4px; }
form.attach-over { outline: 2px dashed var(--accent); outline-offset: 4px; }
.compose-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  position: sticky; bottom: 0; background: var(--panel); padding: 8px 0; z-index: 5; }
.compose-actions .spacer { flex: 1; }
/* The chat bar is fixed at the bottom right. Keep Send above it. */
body.has-dock main { padding-bottom: 64px; }
body.has-dock .compose-actions { bottom: 48px; }
.compose-countdown { display: inline-flex; gap: 6px; align-items: center; }
.compose-countdown[hidden] { display: none; }
@media (max-width: 600px) {
  .compose-row { grid-template-columns: 1fr; gap: 2px; }
  .compose-more > summary { margin-left: 0; }
}

.compose-sig-preview { border-left: 2px solid var(--line); padding: 4px 10px; margin: 4px 0; font-size: 13px; overflow-wrap: anywhere; }
.compose-sig-preview img { max-width: 100%; height: auto; }
.sig-form { display: flex; flex-direction: column; gap: 6px; }

.mail-inline { position: sticky; bottom: 0; z-index: 3; margin: 10px -4px 0; max-width: none; max-height: 78%; overflow-y: auto; gap: 6px;
  border-color: var(--accent); box-shadow: 0 -6px 18px rgba(31,58,95,.12); }
.mail-inline .compose-row { grid-template-columns: 56px minmax(0, 1fr); }
.mail-inline .compose-more > summary { margin-left: 64px; }
.mail-inline .compose-attach { margin: 0; }
.mail-inline-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail-inline-foot .compose-attach { flex: 1; min-width: 0; }
.mail-inline-foot .compose-actions { flex-direction: row-reverse; }
.mail-inline-head { display: flex; align-items: center; gap: 10px; }
.mail-inline-head .spacer { flex: 1; }
.mail-inline .compose-body { min-height: 120px; }
.mail-inline .compose-editor { min-height: 110px; max-height: 40vh; overflow-y: auto; }
.mail-app[data-w=narrow] .mail-inline { margin: 10px -8px 0; max-height: 85%; }
.mail-inline[hidden] { display: none; }
.compose-files[hidden] { display: none; }

/* Filing, notes (step 6) */
.mail-filed { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mail-filed .inline-form { display: inline; margin: 0; }
.mail-filed .btn-link { padding: 0 0 0 4px; color: inherit; }
.mail-file-pop { min-width: 280px; padding: 8px; }
.mail-file-pop input[type=search] { width: 100%; }
.mail-file-results { margin-top: 6px; max-height: 240px; overflow-y: auto; }
.mail-file-results .btn-link { display: block; width: 100%; text-align: left; padding: 5px 6px; color: var(--text); }
.mail-file-results .btn-link:hover { background: var(--bg); text-decoration: none; }
.mail-file-attach { display: block; margin-top: 6px; }
.mail-notes { margin: 10px 0; padding: 8px 10px; background: var(--warn-bg); border-radius: var(--radius); }
.mail-note-item { padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.mail-note-form textarea { width: 100%; margin-top: 6px; font: inherit; }
.mail-note-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-filed-item { display: inline-flex; align-items: center; }
.mail-notes > summary { cursor: pointer; color: var(--warn); font-weight: 600; }
details.mail-notes:not([open]) { background: transparent; padding: 2px 0; }

/* Shared mailboxes (step 7) */
.mail-boxes { display: flex; flex-direction: column; margin: 0 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.mail-shared-note { margin: 0 14px 8px; color: var(--muted); overflow-wrap: anywhere; }
.shared-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin: 8px 0; }
.shared-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.shared-head input[type=text] { width: 140px; }
.shared-grants { margin: 6px 0; }
.shared-grant { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list .inline-form { display: inline; }

/* Company overview as a widget grid (dashboard.js), and its Trello-style activity feed */
.co-tabs .spacer { flex: 1; }
.co-tabs .co-customize { flex: none; align-self: center; margin: 0 0 4px 8px; }
.co-details > h3 { margin-bottom: 8px; }
.co-details .widget-link { position: static; float: right; }
.widget .co-facts { margin-bottom: 0; }
.widget .mcard:last-child { margin-bottom: 0; }
.widget .widget-body > .panel + .panel { margin-top: 14px; }
.feed-compose { display: flex; gap: 10px; }
.feed-compose textarea { width: 100%; }
.feed-compose-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.feed-note { margin: 6px 0 10px 40px; font-size: 12.5px; }
.feed-note > summary { cursor: pointer; color: var(--muted); }
.feed-note form { margin-top: 6px; }
.feed-note textarea { width: 100%; }
.feed-filters { display: flex; gap: 4px; margin: 6px 0 4px; flex-wrap: wrap; }
.feed-filters button { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 2px 10px; font-size: 12px;
  color: var(--muted); cursor: pointer; }
.feed-filters button.on { background: var(--fill); color: var(--accent); border-color: transparent; font-weight: 600; }
.feed-item { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.feed-item[hidden] { display: none; }
.feed-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 51, 122, 0.098); color: color-mix(in srgb, #334155 var(--ink-mix), var(--text)); font-weight: 600;
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.feed-icon { background: rgba(0, 42, 106, 0.047); font-size: 15px; }
.feed-upcoming .feed-avatar { background: rgba(0, 155, 46, 0.110); }
.feed-main { flex: 1; min-width: 0; }
.feed-head { font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
.feed-head .feed-links, .feed-head .feed-delete { margin-left: auto; font-size: 12px; white-space: nowrap; }
.feed-head .feed-links a { margin-left: 10px; }
.feed-body { font-size: 13.5px; margin-top: 3px; overflow-wrap: anywhere; }
.feed-body p { margin: 3px 0; }
.feed-pre { white-space: pre-wrap; }
.feed-excerpt { white-space: pre-wrap; font-size: 13px; color: var(--text-2); margin-top: 4px; }
.feed-actions { margin-top: 8px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.feed .more-link { display: inline-block; margin-top: 10px; }

/* The company Overview widget: the description as prose, with the essentials in a row above it */
.co-overview { font-size: 14px; line-height: 1.55; }
.co-overview-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); }
.co-overview-facts .label { color: var(--muted); font-size: 12px; text-transform: none; letter-spacing: 0; margin-right: 5px; }
.co-overview-text p { margin: 0 0 10px; }
.co-overview-text p:last-child, .co-overview-text ul:last-child { margin-bottom: 0; }
.co-overview-text h4 { margin: 12px 0 4px; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); }
.co-overview-text h4:first-child { margin-top: 0; }
.co-overview-text ul { margin: 0 0 10px; padding-left: 20px; }
.co-overview-text li { margin-bottom: 3px; }
.co-overview-text .li-detail { color: var(--muted); font-size: 13px; margin: -2px 0 6px 20px; }
.co-overview-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.widget h3.widget-link { margin: 0; font-size: 12.5px; }

/* A meeting in the feed jumps to its card: stay clear of the sticky tabs, and light the card up on arrival */
.mcard { scroll-margin-top: calc(var(--topbar-h) + 64px); }
.mcard-flash { animation: mcard-flash 1.8s ease-out; }
@keyframes mcard-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: none; } }
.feed-meeting-link { color: inherit; text-decoration: none; }
.feed-meeting-link:hover strong { text-decoration: underline; color: var(--accent); }
.feed-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.widget[data-widget="summary"] .ai-headline { font-size: 16.5px; line-height: 1.4; }
.widget[data-widget="summary"] .ai-summary p, .widget[data-widget="summary"] .ai-summary li { font-size: 14px; }

/* Record cards (nav.js "peek"): a company, deal or person over the page you were on */
.peek-dialog { width: min(940px, 96vw); }
.peek-dialog:not([open]) { display: none; }
.pk .scard-head { border-top-color: var(--accent); align-items: center; }
.pk .scard-title h2 { font-size: 19px; }
.pk-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pk-actions [hidden] { display: none; }
.pk-body { padding: 14px 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; max-height: calc(92vh - 90px); }
.pk-facts { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.pk-cols { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.pk-main, .pk-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pk-act { display: flex; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(0, 34, 85, 0.059); font-size: 13px; }
.pk-act:first-of-type { border-top: 0; }
.pk-icon { flex: none; width: 20px; text-align: center; }
.pk-cmt { padding: 6px 0; border-top: 1px solid rgba(0, 34, 85, 0.059); font-size: 13px; }
.pk-cmt:first-of-type { border-top: 0; }
.pk-cmt p { margin: 2px 0; }
.pk-row-sub { display: block; font-size: 12px; color: var(--muted); }
.pk .scard-sec .muted:only-child { margin: 0; font-size: 13px; }
@media (max-width: 760px) { .pk-cols { grid-template-columns: 1fr; } }
/* Needs filing (crm/needs_filing.py) and the calendar's firm chips and "no record" marker */
.nf-card { padding: 12px 14px; }
.nf-head { display: flex; gap: 10px; align-items: flex-start; }
.nf-verdict { margin: 8px 0 6px 26px; }
.nf-actions { margin-left: 26px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.nf-change > summary { list-style: none; cursor: pointer; }
.nf-change > summary::-webkit-details-marker { display: none; }
.nf-change-form { display: grid; gap: 6px; margin-top: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); max-width: 460px; }
.nf-change-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 13px; }
.nf-change-form legend { font-weight: 600; font-size: 12px; color: var(--muted); }
.nf-body { margin: 10px 0 0 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.nf-body h4 { margin: 0 0 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.nf-same { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 8px 0; }
.chip-firm { background: rgba(242, 177, 0, 0.153); color: color-mix(in srgb, #6b4600 var(--ink-mix), var(--text)); }
.chip-firm .chip-kind { font-weight: 400; }
.cal-firm { display: block; font-size: 10.5px; color: color-mix(in srgb, #6b4600 var(--ink-mix), var(--text)); overflow: hidden; text-overflow: ellipsis; }
.week-co.week-firm { color: color-mix(in srgb, #6b4600 var(--ink-mix), var(--text)); background: rgba(242, 177, 0, 0.153); }
.unfiled { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; padding: 6px 8px; border-radius: 6px; background: var(--warn-bg); font-size: 12.5px; }
.unfiled-compact { margin: 2px 0 4px; padding: 2px 5px; font-size: 11px; gap: 4px; }
.unfiled-compact .btn-small { padding: 0 6px; font-size: 11px; }
.cal-legend { font-size: 12px; }
.stage.unfiled-tone { background: var(--warn-bg); color: color-mix(in srgb, #8a5a00 var(--ink-mix), var(--text)); }

/* Land sales: off-market signal chips, owner group, value range, comps page */
.sig-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.sig-chip { display: inline-block; font-size: 11.5px; padding: 2px 7px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); border: 1px solid rgba(208, 145, 0, 0.318); }
.sig-chip.sig-long_hold, .sig-chip.sig-estate { background: rgba(244, 130, 0, 0.176); color: color-mix(in srgb, #8a3d00 var(--ink-mix), var(--text)); border-color: rgba(225, 119, 0, 0.396); }
.lc-group ul { margin: 4px 0 0; padding-left: 16px; }
.lc-range { display: flex; gap: 10px; flex-wrap: wrap; }
.lc-range a { display: flex; flex-direction: column; align-items: center; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.lc-range a b { font-size: 15px; }
.team-only-tag { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; margin-left: 6px; }
.comps-stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0; }
.comps-stats div { display: flex; flex-direction: column; }
.comps-stats b { font-size: 18px; }
#comps-map { height: 380px; border-radius: var(--radius); margin-bottom: 12px; }
.comp-form .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.comp-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); }
/* Import from a spreadsheet (crm/sheet_import/) */
.imp-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: -6px 0 14px; font-size: 12.5px; counter-reset: step; flex-wrap: wrap; }
.imp-steps li { counter-increment: step; color: var(--muted); padding: 3px 10px; border-radius: 99px; background: var(--fill); }
.imp-steps li::before { content: counter(step) ". "; }
.imp-steps li.on { background: var(--accent); color: #fff; }
.imp-steps li.done { background: var(--accent-soft); color: var(--accent); }
.imp-pending { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.imp-pending form { margin: 0; }
.imp-cols td { vertical-align: middle; }
.imp-cols select { width: 100%; }
table.data td.imp-samples { white-space: normal; }
.imp-samples span { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(0, 21, 64, 0.047); border-radius: 4px; padding: 0 6px; margin: 1px 4px 1px 0; font-size: 12.5px; vertical-align: middle; }
.imp-ignored td:not(:last-child) { color: var(--muted); }
.imp-ignored strong { font-weight: 500; }
.imp-opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; }
.imp-opt-grid input[name$=_new] { margin-top: 6px; }
.fields label.imp-radio { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--text); margin: 2px 0; }
.imp-summary { display: grid; gap: 6px; font-size: 13px; }
.imp-go { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
table.data.imp-rows td { white-space: normal; vertical-align: top; }
table.data.imp-rows td:first-child { white-space: nowrap; }
.imp-flags .pill { margin: 0 4px 3px 0; white-space: normal; }
.imp-skip td { background: rgba(0, 0, 64, 0.016); }
.imp-undo form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
.imp-undone { background: var(--warn-bg); border-color: rgba(208, 145, 0, 0.318); }
@media (max-width: 640px) { .imp-cols th:nth-child(2), .imp-cols td:nth-child(2) { display: none; } }

/* Times: your calendar beside an email, to offer meeting slots (compose.js) */
.compose-times { font-size: 13px; }
.times-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 12px 8px; }
.times-who { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.times-chip { background: var(--chip); border-radius: 99px; padding: 2px 8px; font-size: 12px; }
.times-add { position: relative; flex: 1; min-width: 160px; }
.times-add input { width: 100%; }
.times-found { position: absolute; z-index: 2; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; max-height: 180px; overflow: auto; }
.times-found button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 6px; cursor: pointer; }
.times-free { position: absolute; left: 0; right: 0; background: rgba(30, 160, 90, .18); pointer-events: none; }
.times-free.some { background: rgba(220, 150, 40, .28); }
.times-panel { position: fixed; top: var(--topbar-h, 52px); right: 0; bottom: 0; width: var(--times-w, clamp(480px, 42vw, 760px));
  max-width: 100vw; z-index: 40;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -6px 0 24px rgba(0,0,0,.08);
  display: flex; flex-direction: column; padding: 10px 12px; gap: 6px; }
.times-panel[hidden] { display: none; }
@media (min-width: 1100px) { body.times-open main { margin-right: var(--times-w, clamp(480px, 42vw, 760px)); } }
.times-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 3; }
.times-resize:hover, body.times-resizing .times-resize { background: var(--accent-soft); }
body.times-resizing { user-select: none; cursor: ew-resize; }
.times-head { display: flex; align-items: baseline; gap: 8px; }
.times-head button { margin-left: auto; }
.times-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.times-bar .spacer { flex: 1; }
.times-hint { margin: 0; }
.times-grid-wrap { flex: 1; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; border: 1px solid var(--line); border-radius: var(--radius); }
.times-grid { display: grid; grid-template-columns: 30px repeat(var(--days, 5), minmax(0, 1fr)); position: relative; }
.times-grid.loading { opacity: .5; }
.times-hours { position: relative; margin-top: var(--head, 38px); }
.times-hours span { position: absolute; right: 3px; transform: translateY(-50%); font-size: 10px; color: var(--muted); }
.times-hours span:first-child { transform: none; }
.times-day { border-left: 1px solid var(--line); min-width: 0; }
.times-day-head { position: sticky; top: 0; z-index: 2; height: var(--head, 38px); box-sizing: border-box; padding: 3px 2px; background: var(--panel); border-bottom: 1px solid var(--line);
  font-size: 11px; text-align: center; color: var(--muted); overflow: hidden; }
.times-day-head strong { color: var(--text); }
.times-day-head.today strong { color: var(--accent); }
.times-allday { display: block; font-size: 10px; background: var(--accent-soft); color: var(--accent); border-radius: 3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.times-col { position: relative; cursor: copy;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour, 44px) - 1px), var(--line) calc(var(--hour, 44px) - 1px) var(--hour, 44px)); }
.times-past { position: absolute; left: 0; right: 0; top: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 4px, transparent 4px 8px);
  cursor: not-allowed; }
.times-busy { position: absolute; left: 2px; right: 2px; border-radius: 3px; background: rgba(0, 27, 73, 0.110); border-left: 3px solid #9aa3b0;
  font-size: 11px; line-height: 1.25; padding: 2px 4px; overflow: hidden; color: var(--text); cursor: default; overflow-wrap: anywhere; }
.times-busy-time { color: var(--muted); font-size: 10px; }
.times-busy.short { white-space: nowrap; text-overflow: ellipsis; padding-top: 0; padding-bottom: 0; }
.times-busy.short .times-busy-time, .times-busy.brief .times-busy-time { display: none; }
.times-busy.brief { line-height: 1.15; padding-top: 1px; padding-bottom: 1px; }
.times-slot { position: absolute; left: 4px; right: 4px; z-index: 1; border: 0; border-radius: 3px; background: var(--accent); color: #fff;
  font-size: 10px; line-height: 1.2; padding: 1px 3px; text-align: left; cursor: pointer; overflow: hidden; }
.times-slot.clash { background: var(--warn); }
.times-foot { border-top: 1px solid var(--line); padding-top: 6px; display: flex; flex-direction: column; gap: 6px; max-height: 32%; }
.times-picked { list-style: none; margin: 0; padding: 0; overflow-y: auto; font-size: 13px; }
.times-picked li { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
.times-picked .btn-link { margin-left: auto; color: var(--muted); }
.times-actions { display: flex; gap: 8px; align-items: center; }

/* My day: a reply waiting on us opens in the inbox */
.reply-open { color: var(--muted); }
.reply-open:hover { color: var(--accent); text-decoration: underline; }
.reply-dismiss { margin-left: 6px; color: var(--muted); font-size: 15px; line-height: 1; }
.reply-dismiss:hover { color: var(--bad); }
/* Windows draws scrollbars over the content's edge: keep room for them in the inbox columns and the Times grid */
.mail-folders, .mail-rows, .mail-reader, .times-picked { scrollbar-gutter: stable; scrollbar-width: thin; }

/* Split view: another hub page beside this one (split.js). The side is a frame drawn without the top bar. */
html.embedded { --topbar-h: 0px; }
html.embedded .appbar { display: none; }
html.split-on .shell { margin-right: var(--split-w, 560px); }
html.split-on .times-panel { right: var(--split-w, 560px); }
/* Stacked (top and bottom, for a portrait monitor): the side is a bottom pane; pages sized to the window use what's left. */
html.split-on.split-v { --main-vh: calc(100vh - var(--split-h, 50vh)); }
html.split-on.split-v .shell { margin-right: 0; margin-bottom: var(--split-h, 50vh); }
html.split-on.split-v .times-panel { right: 0; bottom: var(--split-h, 50vh); }
/* The main side narrower than 1400 px: the top menus fold into ☰, as they do on a narrow window. */
html.split-narrow .appbar .nav-burger { display: block; }
html.split-narrow .topnav { display: none; position: absolute; left: 0; right: 0; top: var(--topbar-h); height: auto; flex-direction: column;
  background: var(--accent); padding: 8px; max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; }
html.split-narrow.nav-open .topnav { display: flex; }
html.split-narrow .tn-link, html.split-narrow .tn-menu > summary { height: 42px; border: 0; }
html.split-narrow .tn-menu { height: auto; }
html.split-narrow .tn-drop { position: static; box-shadow: none; border-top: 0; border-radius: 8px; margin: 0 0 6px; min-width: 0; }
html.split-narrow .appbar .search-trigger { width: auto; }
html.split-narrow .appbar .search-trigger kbd, html.split-narrow .appbar .search-text { display: none; }
/* The Land map in a side narrower than 900 px keeps its filters beside the map (hide them with ☰ Filters). */
@media (min-width: 560px) and (max-width: 900px) {
  html.embedded .land { grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100vh; }
  html.embedded .land.side-closed { grid-template-columns: 0 minmax(0, 1fr); }
  html.embedded .land-side { max-height: none; }
  html.embedded .land-work { grid-row: 2; }
}
.split-pane { position: fixed; top: 0; right: 0; bottom: 0; width: var(--split-w, 560px); z-index: 45; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -4px 0 16px rgba(0,0,0,.06); }
.split-pane[hidden] { display: none; }
.split-pane.split-pane-v { top: auto; left: 0; width: auto; height: var(--split-h, 50vh); border-left: 0; border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.split-pane-v .split-handle { top: -5px; bottom: auto; left: 0; right: 0; width: auto; height: 10px; cursor: row-resize; }
.split-pane-v .split-handle::after { top: 3px; left: 50%; width: 44px; height: 4px; margin: 0 0 0 -22px; }
.split-handle { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; cursor: col-resize; z-index: 2; touch-action: none; }
.split-handle::after { content: ""; position: absolute; top: 50%; left: 3px; width: 4px; height: 44px; margin-top: -22px; border-radius: 2px;
  background: var(--line); }
.split-handle:hover::after, .split-handle:focus-visible::after, .split-dragging .split-handle::after { background: var(--accent); }
.split-bar { display: flex; align-items: center; gap: 4px; height: var(--topbar-h); padding: 0 8px 0 12px; background: var(--accent); color: #fff; flex: 0 0 auto; }
.split-pick { max-width: 170px; height: 30px; font-size: 13px; }
.split-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dbe4f0; font-size: 13px; }
.split-act { border: 0; background: none; color: #fff; font-size: 16px; padding: 4px 7px; border-radius: var(--radius); cursor: pointer; }
.split-act:hover { background: rgba(255,255,255,.14); }
.split-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
.split-dragging, .split-dragging * { user-select: none; cursor: col-resize; }
.split-dragging.split-v, .split-dragging.split-v * { cursor: row-resize; }
.split-dragging iframe { pointer-events: none; }  /* the frames would swallow the drag */
@media (max-width: 900px) {
  html.split-on .shell { margin-right: 0; margin-bottom: 0 !important; }
  html.split-on .times-panel { right: 0; bottom: 0 !important; }
  html.split-on.split-v { --main-vh: 100vh; }
  .split-pane, .split-btn { display: none; }
}



/* Mail dock (static/crm/dock.js): boxes along the bottom of the page for a new message, a forward or an email opened from
   an alert, like Gmail's compose windows. Each box is a frame of window_base.html, drawn without the top bar. */
.mail-dock { position: fixed; right: 20px; bottom: 0; z-index: 900; display: flex; align-items: flex-end; gap: 12px;
  max-width: calc(100vw - 40px); pointer-events: none; }
.mail-dock[hidden] { display: none; }
.dock-hide { display: none; }
.dock-win { pointer-events: auto; display: flex; flex-direction: column; width: 500px; height: min(600px, calc(100vh - 80px));
  background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0;
  box-shadow: 0 8px 30px rgba(0,0,0,.28); overflow: hidden; }
.dock-win.dock-thread { width: 460px; }
.dock-win.big { width: min(900px, 70vw); height: min(780px, calc(100vh - 70px)); }
.dock-win.min { width: 260px; height: 40px; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.dock-head { display: flex; align-items: center; flex: 0 0 40px; height: 40px; background: var(--accent); color: #fff; padding: 0 6px 0 2px; }
.dock-head button { border: 0; background: none; color: #fff; }
.dock-head button:hover { border: 0; }
.dock-title { flex: 1; min-width: 0; height: 100%; padding: 0 10px; text-align: left; font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.dock-btn { width: 30px; height: 30px; padding: 0; font-size: 15px; line-height: 1; border-radius: 4px; cursor: pointer; }
.dock-btn:hover { background: rgba(255,255,255,.16); }
.dock-win.min .dock-big { display: none; }
.dock-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--panel); }
.dock-win.min .dock-frame { display: none; }
/* Beside a split-view page or the Times panel, the boxes sit to the left of it. */
html.split-on:not(.split-v) .mail-dock { right: calc(var(--split-w, 560px) + 20px); }
html.split-on.split-v .mail-dock { bottom: var(--split-h, 50vh); }
@media (min-width: 1100px) {
  body.times-open .mail-dock { right: calc(var(--times-w, clamp(480px, 42vw, 760px)) + 20px); }
  html.split-on:not(.split-v) body.times-open .mail-dock { right: calc(var(--split-w, 560px) + var(--times-w, clamp(480px, 42vw, 760px)) + 20px); }
}
@media (max-width: 900px) { html.split-on .mail-dock, html.split-on.split-v .mail-dock { right: 20px; bottom: 0; } }
/* A phone: the open box fills the screen, folded ones are bars along the bottom. */
@media (max-width: 700px) {
  html .mail-dock, html.split-on .mail-dock, html.split-on.split-v .mail-dock, body.times-open .mail-dock {
    left: 0; right: 0; bottom: 0; max-width: none; flex-direction: column; align-items: stretch; gap: 0; }
  .dock-hide { display: block; order: -1; height: 36px; border: 0; border-radius: 0; background: #1e2a3a; color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer; }
  .mail-dock.away .dock-win { display: none; }
  body.has-dock:not(.dock-away) { padding-bottom: 44px; }
  body.has-dock:not(.dock-away) main { padding-bottom: 16px; }
  body.has-dock:not(.dock-away) .compose-actions { bottom: 52px; }
  .dock-win.min { width: 100%; border-radius: 0; }
  .dock-win:not(.min) { position: fixed; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; }
  .dock-big { display: none; }
  #alert-toasts, body.has-dock #alert-toasts { left: 10px; right: 10px; bottom: 52px; max-width: none; }
  .btn, .btn-small, .appbar-icon, .tn-link { min-height: 40px; }
}
#dock-toasts { position: fixed; left: 18px; bottom: 18px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.dock-toast { background: #1e2a3a; color: #fff; border-radius: 8px; padding: 9px 14px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: toast-in .25s ease-out; }
.dock-toast a { color: #9fc3ff; font-weight: 600; margin-left: 6px; }
body.has-dock #alert-toasts { right: auto; left: 18px; bottom: 76px; }  /* the boxes own the bottom right */
/* The pages inside a box (window_base.html, compose.html with window set, mail_window.html) */
.dock-body { margin: 0; background: var(--panel); }
.dock-main { display: flex; flex-direction: column; min-height: 100vh; padding: 10px 12px 0; }
.dock-main > .mail-error { margin: 0 0 8px; }
.compose-from { margin: 0 0 6px; }
.compose-window { flex: 1; border: 0; border-radius: 0; padding: 0; margin: 0; max-width: none; gap: 6px; }
.compose-window .compose-row { grid-template-columns: 52px minmax(0, 1fr); }
.compose-window .compose-more > summary { margin-left: 60px; }
.compose-window .compose-editor { flex: 1; min-height: 150px; border-radius: 0 0 var(--radius) var(--radius); overflow-y: auto; }
.compose-window .compose-actions { position: sticky; bottom: 0; z-index: 2; background: var(--panel); padding: 8px 0 10px;
  border-top: 1px solid var(--line); }
.compose-window .compose-original, .compose-window .compose-sig, .compose-window .compose-files { font-size: 12px; }
.dock-thread-head { padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.dock-thread-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dock-thread-bar .spacer { flex: 1; }
.dock-thread-head p { margin: 6px 0 0; }

/* Chat in the hub (crm/chat/, static/crm/chat.js): the page (also the split view's side), the list in the dock's Chat box
   and a conversation, which is the same in all three. */
main:has(.chat-app) { max-width: none; padding: 12px 16px 16px; }
.chat-app { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); height: calc(var(--main-vh, 100vh) - var(--topbar-h) - 64px);
  min-height: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chat-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--bg); }
.chat-side-head { display: flex; gap: 6px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chat-search { flex: 1; min-width: 0; }
.chat-rows { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; }
.chat-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 8px 12px;
  color: var(--text); border-bottom: 1px solid var(--line); font-size: 13px; }
.chat-row[hidden] { display: none; }
.chat-row:hover { background: var(--accent-soft); text-decoration: none; }
.chat-row.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.chat-ico { text-align: center; color: var(--muted); }
.chat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-when { font-size: 11px; color: var(--muted); }
.chat-row.unread .chat-name { font-weight: 700; }
.chat-row.unread .chat-when { color: var(--accent); font-weight: 700; }
.chat-row.unread .chat-when::after { content: " ●"; }
.chat-empty { padding: 14px; }
.chat-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.chat-blank { margin: auto; }
.chat-convo { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: var(--panel); }
.chat-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-title, .chat-people { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-actions { display: flex; gap: 6px; }
.chat-back { display: none; }
.chat-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; scrollbar-gutter: stable; scrollbar-width: thin; }
.chat-older { display: block; margin: 0 auto 10px; }
.chat-none { text-align: center; margin: 20px 0; }
.chat-new { position: sticky; bottom: 4px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff;
  border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.chat-new[hidden] { display: none; }
.chat-day { text-align: center; margin: 12px 0 6px; font-size: 11px; color: var(--muted); }
.chat-day span { background: var(--bg); padding: 2px 10px; border-radius: 10px; }
.chat-msg { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; padding: 1px 0; }
.chat-msg.head { margin-top: 10px; }
.chat-av { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 13px; }
.chat-who, .chat-text, .chat-att { grid-column: 2; }
.chat-who { font-size: 12px; }
.chat-who time { color: var(--muted); margin-left: 4px; font-size: 11px; }
.chat-text { overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.4; }
.chat-att { font-size: 12px; }
.chat-msg.in-thread { margin-left: 18px; border-left: 2px solid var(--line); padding-left: 6px; }
.chat-text code { background: var(--bg); padding: 0 4px; border-radius: 3px; font-size: 12.5px; }
.chat-mention { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 0 3px; }
.chat-compose { border-top: 1px solid var(--line); padding: 8px 12px 10px; background: var(--panel); }
.chat-compose-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-compose textarea { flex: 1; resize: none; min-height: 34px; max-height: 140px; line-height: 1.35; }
.chat-thread-note { margin-bottom: 4px; }
html.embedded .chat-app { height: 100vh; min-height: 0; border: 0; border-radius: 0; }
html.embedded main:has(.chat-app) { padding: 0; }
@media (max-width: 760px) {
  main:has(.chat-app) { padding: 0; }
  .chat-app { grid-template-columns: minmax(0, 1fr); border-radius: 0; }
  .chat-app.has-convo .chat-side, .chat-app:not(.has-convo) .chat-main { display: none; }
  .chat-back { display: inline-block; }
}
/* In the dock: the conversation and the list fill their box. */
body[data-chat-box] .dock-main, body[data-chat-list] .dock-main { height: 100vh; min-height: 0; padding: 0; }
body[data-chat-box] .chat-back { display: none; }
body[data-chat-list] .chat-rows { flex: 1; }
body[data-chat-list] .dock-main > p, body[data-chat-list] .dock-main > a { margin: 10px 12px; }
.dock-win.dock-chat { width: 340px; height: min(520px, calc(100vh - 80px)); }
.dock-win.dock-chats { width: 300px; height: min(520px, calc(100vh - 80px)); }
.dock-win.dock-chats.min { width: 190px; }
.dock-chats .dock-big, .dock-chats .dock-x, .dock-chat .dock-big { display: none; }
.dock-win.unread .dock-title { font-weight: 800; }
.dock-win.unread .dock-title::before { content: "● "; color: #ffd166; }
.dock-win.dock-chat.min, .dock-win.dock-chats.min { height: 40px; }
.dock-win.dock-chat.min { width: 260px; }
.dock-win[hidden] { display: none; }
/* A phone: an open Chat box fills the screen like the others (these come after the Chat box sizes above). */
@media (max-width: 700px) {
  .dock-win.dock-chat:not(.min), .dock-win.dock-chats:not(.min) { width: auto; height: auto; }
}

/* Schedule: pick people, see when they are free, put a meeting on the calendar (docs/SCHEDULING.md) */
.sched-allow { max-width: 1100px; padding: 10px 14px; margin-bottom: 12px; background: var(--warn-bg); border-color: rgba(201, 146, 0, 0.349); }
.sched-allow form { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.sched { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.sched-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sched-side .panel, .sched-main > .panel { margin: 0; }
.sched-side h3 { margin: 0 0 8px; font-size: 14px; }
.sched-who { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow: auto; }
.sched-person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 6px; padding: 3px 4px; border-radius: var(--radius); }
.sched-person label { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; flex: 1; }
.sched-person.on { background: var(--accent-soft); }
.sched-person.is-me { justify-content: flex-start; gap: 8px; padding-left: 28px; }
.sched-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.sched-who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sched-name, .sched-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-warn { flex: 0 0 100%; padding-left: 34px; color: var(--warn); font-size: 11px; }
.sched-add { display: block; margin-top: 4px; }
.sched-add input { width: 100%; margin-top: 2px; }
.sched-found { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); max-height: 220px; overflow: auto; }
.sched-found li + li { border-top: 1px solid var(--line); }
.sched-hit { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; background: none; padding: 6px 8px; }
.sched-hit:hover { background: var(--accent-soft); }
.sched-contacts { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; align-items: center; }
.sched-controls { display: flex; flex-direction: column; gap: 8px; }
.sched-controls label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.sched-controls label.check { flex-direction: row; align-items: center; gap: 6px; }
.sched-suggest { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.sched-suggest .btn-link { text-align: left; }
.sched-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sched-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; }
.sched-nav .spacer { flex: 1; }
.sched-grid-wrap { padding: 0; overflow: auto; max-height: 70vh; transition: opacity .15s; }
.sched-grid-wrap.is-loading { opacity: .55; }
.sc-grid { display: grid; grid-template-columns: 62px repeat(var(--days), minmax(76px, 1fr)); }
.sc-corner, .sc-day { position: sticky; top: 0; z-index: 2; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.sc-day { display: flex; flex-direction: column; text-align: center; padding: 6px 4px; line-height: 1.25; border-left: 1px solid var(--line); }
.sc-day span { font-size: 11px; color: var(--muted); }
.sc-day.is-today { background: var(--accent-soft); }
.sc-day.is-past { color: var(--muted); }
.sc-time { height: 26px; padding: 2px 8px 0 0; font-size: 11px; line-height: 1; text-align: right; color: var(--muted); white-space: nowrap; }
.sc-cell { height: 26px; padding: 0; margin: 0; border: 0; border-left: 1px solid var(--line); border-top: 1px dotted var(--line); border-radius: 0;
  background: var(--panel); font-size: 10px; font-weight: 700; color: var(--warn); cursor: pointer; }
.sc-cell.is-hour { border-top: 1px solid var(--line); }
.sc-cell:disabled { cursor: default; }
.sc-free { background: var(--good-bg); }
.sc-some { background: var(--warn-bg); }
.sc-all { background: var(--bad-bg); color: var(--bad); }
.sc-off { background: repeating-linear-gradient(135deg, var(--fill), var(--fill) 4px, var(--panel-2) 4px, var(--panel-2) 8px); color: var(--muted); }
.sc-cell.sc-hover { box-shadow: inset 0 0 0 2px var(--accent); }
.sc-cell.sc-pick, .sc-cell.sc-pick.sc-free, .sc-cell.sc-pick.sc-some, .sc-cell.sc-pick.sc-all { background: var(--accent); color: #fff; box-shadow: none; }
.sc-cell.sc-pick-start { border-top-color: var(--accent); }
.sched-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.sc-key { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border: 1px solid var(--line); border-radius: 2px; vertical-align: -2px; }
.sched-form h3, .sched-done h3 { margin: 0 0 10px; }
.sched-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sched-fields label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.sched-fields label.wide { grid-column: 1 / -1; }
.sched-fields label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }
.sched-fields input:not([type=checkbox]), .sched-fields select, .sched-fields textarea { width: 100%; }
.sched-inviting { margin: 10px 0 4px; }
.sched-note.is-busy { color: var(--warn); }
.sched-note.is-free { color: var(--good); }
.sched-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
@media (max-width: 900px) {
  .sched { grid-template-columns: 1fr; }
  .sched-fields { grid-template-columns: 1fr 1fr; }
  .sc-grid { grid-template-columns: 52px repeat(var(--days), minmax(64px, 1fr)); }
  .sc-time { padding-right: 4px; font-size: 10px; }
}

/* Chat parity: reactions, quotes, files, edit, the composer's tools, the emoji picker, new chats, search (docs/CHAT.md) */
.chat-quote, .chat-img, .chat-file, .chat-react, .chat-edit { grid-column: 2; }
.chat-convo { position: relative; }
.chat-av { position: relative; overflow: hidden; }
.chat-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat-edited { font-size: 11px; }
.chat-msg.is-deleted .chat-text { opacity: .85; }
.chat-msg.hit { background: rgba(255, 199, 0, 0.161); border-radius: 6px; }
.chat-msg { transition: background .6s; }
.chat-msg.editing .chat-acts { display: none !important; }

/* a message's own buttons */
.chat-acts { position: absolute; right: 0; top: -13px; display: none; gap: 1px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 7px; padding: 1px 2px; box-shadow: 0 1px 5px rgba(0,0,0,.14); z-index: 2; }
.chat-msg:hover .chat-acts, .chat-msg:focus-within .chat-acts, .chat-msg.touched .chat-acts { display: flex; }
.chat-act { border: 0; background: none; padding: 0 6px; line-height: 22px; font-size: 13px; border-radius: 4px; cursor: pointer; color: var(--text); }
.chat-act:hover { background: var(--accent-soft); }

/* emoji on a message */
.chat-react { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chat-react:empty { display: none; }
.chat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); font-size: 12.5px; line-height: 20px; cursor: pointer; }
.chat-chip b { font-weight: 600; font-size: 11px; color: var(--muted); }
.chat-chip.mine { background: var(--accent-soft); border-color: #b4c7de; }
.chat-chip.mine b { color: var(--accent); }
.chat-chip:disabled { cursor: default; }
.chat-cemoji { width: 16px; height: 16px; vertical-align: middle; }

/* a quoted message, on a message and above the box being written in */
.chat-quote { display: flex; flex-direction: column; min-width: 0; margin: 2px 0 3px; padding: 3px 8px; border-left: 3px solid #b4c7de;
  border-radius: 0 6px 6px 0; background: var(--bg); font-size: 12px; cursor: pointer; }
.chat-quote b { font-size: 11.5px; color: var(--accent); }
.chat-quote span { color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat-quote-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 4px 8px; border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; background: var(--bg); font-size: 12px; }
.chat-quote-bar[hidden] { display: none; }
.chat-qb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* files on a message */
.chat-img { display: block; max-width: 320px; margin: 4px 0 2px; }
.chat-img img { display: block; max-width: 100%; max-height: 240px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.chat-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 4px 0 2px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--text); font-size: 12.5px; justify-self: start; }
.chat-file:hover { background: var(--accent-soft); text-decoration: none; }
.chat-file-ico { font-size: 18px; }
.chat-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* editing one of your own messages */
.chat-edit textarea { width: 100%; min-height: 44px; resize: vertical; }
.chat-edit-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; }

/* the box to write in: files, quote, tools */
.chat-input-wrap { position: relative; }
.chat-input-wrap textarea { width: 100%; min-height: 34px; max-height: 140px; resize: none; line-height: 1.35; }
.chat-compose-row { align-items: center; justify-content: space-between; margin-top: 4px; }
.chat-tools { display: flex; flex-wrap: wrap; gap: 1px; }
.chat-tool { border: 0; background: none; padding: 2px 7px; border-radius: 4px; font-size: 13px; line-height: 22px; color: var(--muted); cursor: pointer; }
.chat-tool:hover { background: var(--accent-soft); color: var(--text); }
.chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chat-files[hidden] { display: none; }
.chat-file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); font-size: 12px; }
.chat-file-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.chat-file-chip.error { border-color: #e9b8b3; background: var(--bad-bg); }
.chat-file-x { padding: 0 2px; }
.chat-convo.dropping::after { content: "Drop files to attach them"; position: absolute; inset: 0; z-index: 8; display: flex; align-items: center;
  justify-content: center; border: 2px dashed var(--accent); border-radius: 8px; background: rgba(31, 58, 95, .12); color: var(--accent);
  font-weight: 600; pointer-events: none; }
.chat-suggest { position: absolute; bottom: 100%; left: 0; right: 0; z-index: 5; max-height: 190px; margin: 0 0 4px; padding: 3px; overflow-y: auto;
  list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.chat-suggest[hidden] { display: none; }
.chat-sug { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 5px; font-size: 13px; cursor: pointer; }
.chat-sug.on, .chat-sug:hover { background: var(--accent-soft); }
.chat-sug-icon { width: 20px; text-align: center; color: var(--accent); }

/* the emoji picker */
.chat-picker { position: fixed; z-index: 1000; display: flex; flex-direction: column; width: min(300px, calc(100vw - 12px));
  max-height: min(360px, calc(100vh - 12px)); padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.chat-pick-quick { display: flex; gap: 2px; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.chat-pick-search { width: 100%; margin-bottom: 4px; }
.chat-pick-tabs { display: flex; gap: 2px; margin-bottom: 4px; }
.chat-pick-tab { border: 0; background: none; padding: 2px 6px; border-radius: 4px; font-size: 15px; cursor: pointer; }
.chat-pick-tab:hover { background: var(--accent-soft); }
.chat-pick-grid { position: relative; flex: 1; min-height: 120px; overflow-y: auto; display: grid; align-content: start; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
.chat-pick-head { grid-column: 1 / -1; padding: 6px 4px 2px; font-size: 11px; font-weight: 600; color: var(--muted); }
.chat-emo-btn { border: 0; background: none; padding: 5px; border-radius: 6px; font-size: 20px; line-height: 1; cursor: pointer; }
.chat-emo-btn:hover { background: var(--accent-soft); }

/* starting a chat */
.chat-start { width: min(420px, calc(100vw - 24px)); padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.chat-start::backdrop { background: rgba(20, 30, 45, .35); }
.chat-start h3 { margin: 0 0 4px; }
.chat-new-find { width: 100%; margin: 6px 0; }
.chat-people { max-height: 220px; margin: 0 0 8px; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--line); border-radius: 8px; }
.chat-people li { border-bottom: 1px solid var(--line); }
.chat-people li:last-child { border-bottom: 0; }
.chat-people li[hidden] { display: none; }
.chat-people label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; }
.chat-people label:hover { background: var(--accent-soft); }
.chat-pn { font-weight: 500; }
.chat-new-name { display: block; font-size: 12px; color: var(--muted); }
.chat-new-name input { width: 100%; margin-top: 2px; }
.chat-allow { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); }
.chat-allow.flash { outline: 2px solid var(--warn); }
.chat-new-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* searching messages */
.chat-search-hint { display: block; width: 100%; padding: 6px 12px; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: var(--accent-soft); color: var(--accent); cursor: pointer; }
.chat-search-hint[hidden] { display: none; }
.chat-results { flex: 1; min-height: 0; overflow-y: auto; }
.chat-results[hidden] { display: none; }
.chat-results-bar { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chat-hit { display: block; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--text); }
.chat-hit:hover { background: var(--accent-soft); text-decoration: none; }
.chat-hit-top { display: flex; align-items: baseline; gap: 6px; }
.chat-hit-top b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-hit-top time { font-size: 11px; color: var(--muted); }
.chat-hit-who { display: block; font-size: 12px; color: var(--muted); }
.chat-hit-text { display: block; font-size: 12.5px; overflow-wrap: anywhere; }
.chat-hit-text mark { padding: 0 1px; border-radius: 2px; background: rgba(255, 198, 0, 0.459); }
.chat-more { display: block; margin: 8px auto; }

.chat-toolbar { position: fixed; top: var(--topbar-h, 52px); right: 12px; z-index: 1000; width: min(340px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 80px)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.25); overflow: hidden; }
.chat-toolbar[hidden] { display: none; }
.chat-toolbar-frame { width: 100%; height: 100%; border: 0; background: var(--panel); }

/* iPhone home-screen app: clear the notch and the home indicator, and make the common controls easy to tap. */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .mail-dock, .chat-toolbar { padding-bottom: env(safe-area-inset-bottom); }
  #alert-toasts { bottom: calc(18px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  .btn, .btn-small, .btn-primary, .appbar-icon, .tn-link, .tn-menu > summary { min-height: 44px; }
  .appbar { gap: 2px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .appbar .brand { margin-right: 6px; }
  table.data th, table.data td { padding: 8px; }
}

/* Swipe a mail row on a phone: right archives, left trashes. */
.mail-row { position: relative; }
.mail-row.swiping a { transition: none; }
.mail-row a { transition: transform .18s ease; }
.mail-row.swiping a { transform: translateX(var(--swipe, 0)); }
.mail-row.swipe-right::before, .mail-row.swipe-left::before {
  content: attr(data-swipe); position: absolute; inset: 0; display: flex; align-items: center; padding: 0 18px;
  color: #fff; font-weight: 600; font-size: 13px; }
.mail-row.swipe-right::before { content: attr(data-right); background: #15803d; justify-content: flex-start; }
.mail-row.swipe-left::before { content: attr(data-left); background: #b42318; justify-content: flex-end; }
.mail-row.swipe-gone { max-height: 0; overflow: hidden; border: 0; transition: max-height .2s ease; }
.mail-swipe-toast { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 3000; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #1e2a3a; color: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* ==========================================================================
   Apple-style layer (2026-11): quieter surfaces, soft shadows instead of outlines, rounded controls, frosted menus.
   It sits last so it wins over the older rules above without rewriting them. Navy and the top bar stay.
   ========================================================================== */
:root { --bar: rgba(31, 58, 95, .9); --bar-solid: #1f3a5f; --glass: rgba(255, 255, 255, .82); }
::selection { background: rgba(31, 58, 95, .2); }
a { color: var(--link); }
a:hover { text-decoration: none; opacity: .85; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.018em; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; }
.record-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.024em; line-height: 1.15; }
main { padding: 24px 32px 48px; }
:focus-visible { outline: 3px solid rgba(31, 58, 95, .32); outline-offset: 1px; }

/* Buttons: soft rounded capsules; navy fill for the one main action. */
button { transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.btn, button:not([class]), button[class^="btn"], button[class*=" btn"] { border-radius: 999px; padding: 6px 15px; font-weight: 500;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease); }
.btn, button:not([class]) { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 1.5px rgba(0, 0, 0, .05); }
.btn:hover, button:not([class]):hover { background: var(--panel-2); border-color: var(--line-strong); }
.btn:active, button:not([class]):active, .btn-primary:active { transform: scale(.98); }
.btn-small, .btn.btn-small, button.btn-small { padding: 3px 10px; font-size: 12px; }
.btn-primary, button.btn-primary, .btn.btn-primary { background: var(--accent); border-color: transparent; color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.btn-primary:hover, button.btn-primary:hover, .btn.btn-primary:hover { background: var(--accent-hover); border-color: transparent; }
.btn-danger, button.btn-danger, .btn.btn-danger { background: var(--panel); color: var(--bad); border-color: var(--line); }
.btn-danger:hover, .btn.btn-danger:hover { background: var(--bad-bg); border-color: transparent; }
.btn-danger-on, .btn.btn-danger-on { background: var(--bad); border-color: transparent; color: #fff; }
.btn-link, button.btn-link { border: 0; background: none; box-shadow: none; padding: 0; border-radius: 4px; color: var(--link); }

/* Fields. */
input, select, textarea { border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 10px; background: var(--panel);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(31, 58, 95, .16); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: none; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }

/* Surfaces: no outlines, a whisper of shadow, larger corners. */
.panel, .card, .widget, .table-wrap, .filters, .login, .site-card, .kcard {
  border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.panel { padding: 16px 18px; }
.kcard { border-radius: 10px; }
.site-card:hover, .kcard:hover { box-shadow: var(--shadow-2); }
.panel h3, .widget h3 { text-transform: none; letter-spacing: -.01em; font-size: 15px; font-weight: 600; color: var(--text); }
.column { border-radius: var(--radius-lg); }
.widget { border-radius: 16px; }
.messages li { border-radius: 10px; }

/* Tables read like grouped lists: hairlines, quiet headers. */
table.data th { background: var(--panel); color: var(--muted); font-weight: 500; font-size: 12px; }
table.data th, table.data td { padding: 9px 12px; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: var(--hover); }

/* Pills. */
.pill, .tag, .stage { border-radius: 999px; padding: 2px 9px; font-weight: 500; font-size: 11.5px; }

/* Segmented controls (page tabs, widget sizes) and filter chips. */
.page-tabs, .widget-size { background: var(--fill); border-radius: 9px; padding: 2px; }
.page-tabs a { border-radius: 7px; color: var(--text-2); }
.page-tabs a.on { background: var(--panel); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
.chips a { border: 0; background: var(--fill); color: var(--text-2); }
.chips a:hover { background: var(--line-strong); color: var(--text); opacity: 1; }
.chips a.on { background: var(--accent); color: #fff; }

/* Top bar: still navy, now frosted, with soft pills for the current page. */
.appbar { background: var(--bar); box-shadow: 0 .5px 0 rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.topnav { align-items: center; }
.tn-menu { height: auto; }
.tn-link, .tn-menu > summary { height: 32px; padding: 0 11px; border: 0; border-radius: 8px; color: rgba(255, 255, 255, .78);
  font-size: 13.5px; transition: background-color .15s var(--ease), color .15s var(--ease); }
.tn-link:hover, .tn-menu > summary:hover, .tn-menu[open] > summary { background: rgba(255, 255, 255, .1); color: #fff; opacity: 1; }
.tn-link.active, .tn-menu.active > summary { background: rgba(255, 255, 255, .16); color: #fff; }
.tn-count, .appbar .bell .count, .appbar .chat-btn .count { background: #ff3b30; }
.tn-dot { background: #ffd60a; }
.appbar-icon { border-radius: 8px; color: rgba(255, 255, 255, .82); }
.appbar .search-trigger { border: 0; border-radius: 9px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); }
.appbar .search-trigger:hover { background: rgba(255, 255, 255, .18); }
.appbar .search-trigger kbd { border: 0; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .75); }
.btn-new, .btn.btn-new { background: #fff; border-color: transparent; color: #1f3a5f; font-weight: 600; box-shadow: none;
  white-space: nowrap; padding: 5px 14px; }
.appbar .btn, .appbar button { white-space: nowrap; }
.btn-new:hover, .btn.btn-new:hover { background: rgba(255, 255, 255, .88); border-color: transparent; }
.appbar .user-menu .avatar { background: rgba(255, 255, 255, .92); color: #1f3a5f; }
kbd { border: 0; background: var(--fill); }

/* Menus and pop-overs: frosted glass. */
.tn-drop, .menu-wrap .menu, .hero-results, details.checks > div {
  background: var(--glass); color: var(--text); border: .5px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-3);
  -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); }
.tn-drop { top: calc(100% + 6px); padding: 6px; }
.tn-drop a, .menu a, .menu .menu-btn { border-radius: 7px; }
.tn-drop a:hover, .menu a:hover, .menu .menu-btn:hover { background: var(--accent-soft); opacity: 1; }
.tn-drop a.on { background: var(--accent-soft); box-shadow: none; }
.tn-drop a.on strong { color: var(--link); }

/* Sheets and dialogs. */
dialog { background: var(--panel); color: var(--text); }
.edit-dialog, .meeting-dialog, .site-dialog, .card-dialog { border-radius: 16px; box-shadow: var(--shadow-3); }
.scard-dialog { background: var(--bg); border-radius: 18px; box-shadow: var(--shadow-3); }
dialog::backdrop { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.palette { border-radius: 16px; box-shadow: var(--shadow-3); background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); }
.palette-box input, .palette-box input:focus { background: transparent; font-size: 17px; box-shadow: none; }
.pal-item.on { background: var(--accent); color: #fff; }
.pal-item.on .pal-sub { color: rgba(255, 255, 255, .78); }
.pal-group { text-transform: none; letter-spacing: 0; font-size: 12px; }
.dialog-head h2 { font-size: 17px; font-weight: 600; }

/* Stat tiles: grey tiles inside a panel, a big number, a quiet label. */
.widget .card, .panel .card { background: var(--fill); box-shadow: none; border-radius: 12px; padding: 12px 14px; }
a.card:hover { opacity: 1; background: var(--line-strong); }
.card .label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.card .value { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums; }

/* Home hero, toasts, dock, back link. */
.hero { background: var(--bar-solid); border-radius: 18px; box-shadow: none; }
.hero .btn.hero-btn { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; box-shadow: none; }
.hero .btn.hero-btn:hover { background: rgba(255, 255, 255, .24); }
.hero-search { border-radius: 12px; }
.alert-toast, .mail-swipe-toast { border-radius: 14px; background: rgba(28, 28, 30, .92);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.hub-back-link { border: 0; background: var(--fill); border-radius: 999px; }
.dock-win { border: 0; border-radius: 14px 14px 0 0; box-shadow: var(--shadow-3); }
.dock-head { background: var(--bar-solid); }

/* Dark mode: a real dark palette (it used to invert the whole page). The profile menu's "Dark mode" button sets
   data-theme="dark" on <html> (base.html). Pale tints elsewhere are see-through, so they darken with the panel, and
   dark text colours lean toward the light text colour (--ink-mix). */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111113; --panel: #1c1c1e; --panel-2: #232326; --fill: rgba(118, 118, 128, .24); --hover: rgba(255, 255, 255, .045);
  --text: #f5f5f7; --text-2: #d1d1d6; --muted: #98989d; --muted-2: #7c7c80;
  --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .18);
  --accent: #3c6aa3; --accent-hover: #4878b2; --accent-soft: rgba(110, 160, 230, .16); --link: #7eaee8;
  --good: #30d158; --good-bg: rgba(48, 209, 88, .16); --bad: #ff6961; --bad-bg: rgba(255, 69, 58, .18);
  --warn: #ffb340; --warn-bg: rgba(255, 159, 10, .18);
  --ink-mix: 42%;
  --shadow-1: 0 0 0 .5px rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 0 0 .5px rgba(255, 255, 255, .09), 0 6px 18px rgba(0, 0, 0, .4);
  --shadow-3: 0 0 0 .5px rgba(255, 255, 255, .1), 0 20px 56px rgba(0, 0, 0, .6);
  --bar: rgba(20, 36, 59, .88); --bar-solid: #172a44; --glass: rgba(40, 40, 44, .82);
  --st-prospect: #aeaeb2; --st-prospect-bg: rgba(174, 174, 178, .16);
  --st-qualified: #7aa7ff; --st-qualified-bg: rgba(10, 132, 255, .2);
  --st-loi: #c69cff; --st-loi-bg: rgba(191, 90, 242, .2);
  --st-lease: #64d2ff; --st-lease-bg: rgba(100, 210, 255, .16);
  --st-signed: #4cd97b; --st-signed-bg: rgba(48, 209, 88, .18);
  --st-hold: #ffd426; --st-hold-bg: rgba(255, 214, 10, .16);
  --st-lost: #ff7a90; --st-lost-bg: rgba(255, 55, 95, .18);
  --today: #ffb340; --today-bg: rgba(255, 159, 10, .18);
}
html[data-theme="dark"] ::selection { background: rgba(110, 160, 230, .35); }
html[data-theme="dark"] :focus-visible { outline-color: rgba(126, 174, 232, .5); }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus {
  border-color: var(--link); box-shadow: 0 0 0 3.5px rgba(126, 174, 232, .22); }
html[data-theme="dark"] .btn-new, html[data-theme="dark"] .btn.btn-new,
html[data-theme="dark"] .appbar .user-menu .avatar { background: #f5f5f7; color: #172a44; }

/* ==========================================================================
   Apple-style layer, pass 2 (2026-11): the company page, boards, calendars, mail and land search.
   ========================================================================== */
:root { --today-dot: #ff3b30; }
html[data-theme="dark"] { --today-dot: #ff453a; }

/* Underline tabs (record pages, contract reader, mail): a slim navy bar under the current one. */
.tabs { gap: 2px; }
.tabs a { padding: 9px 12px; font-weight: 500; color: var(--muted); border-bottom-width: 2px; }
.tabs a:hover { color: var(--text); opacity: 1; }
.tabs a.active, .cr-tabs .tab.on, .mail-tabs a.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
html[data-theme="dark"] .tabs a.active, html[data-theme="dark"] .cr-tabs .tab.on,
html[data-theme="dark"] .mail-tabs a.on { border-bottom-color: var(--link); }

/* Company page. */
.co-tabs { background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.co-facts { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.co-facts > div { padding: 11px 14px; }
.co-facts .label { font-size: 12px; font-weight: 500; }
.co-facts .value { font-size: 15px; letter-spacing: -.01em; }
.mcard { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-1), inset 3px 0 0 var(--accent); overflow: hidden; }
.mcard-upcoming { box-shadow: var(--shadow-1), inset 3px 0 0 var(--good); }
.mcard-actions { background: var(--panel-2); }
/* The date reads like the Calendar app's icon: a red month band over a big day number. */
.mcard-date { border: 0; border-radius: 10px; overflow: hidden; padding: 0 0 4px; background: var(--panel); box-shadow: var(--shadow-1); }
.mcard-date span { background: var(--today-dot); color: #fff; font-weight: 600; font-size: 10px; letter-spacing: .02em; padding: 1px 0; margin-bottom: 1px; }
.mcard-date strong { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.mcard h5, .co-sub { color: var(--muted); font-weight: 600; }
.co-fold > summary { color: var(--text); font-size: 14px; }
.co-kinds a { border: 0; background: var(--fill); color: var(--text-2); }
.co-kinds a:hover { background: var(--line-strong); opacity: 1; }
.co-kinds a.active { background: var(--accent); color: #fff; }
.co-section-head h2, .deal-in-company h2 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }

/* Deal board (opportunity_board.html): columns are grey trays, titled in their stage colour. */
.column { --col-c: var(--st-prospect); border-top: 0; padding: 10px; }
.column[data-stage=qualified] { --col-c: var(--st-qualified); }
.column[data-stage=loi_neg], .column[data-stage=loi_signed] { --col-c: var(--st-loi); }
.column[data-stage=lease_neg] { --col-c: var(--st-lease); }
.column[data-stage=signed] { --col-c: var(--st-signed); }
.column[data-stage=on_hold] { --col-c: var(--st-hold); }
.column[data-stage=lost] { --col-c: var(--st-lost); }
.column h4 { color: var(--col-c); font-size: 13.5px; }
.column.drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.kcard { border: 0; padding: 10px 12px; }
/* A deal at risk says so in red text; no stripe. */
.kcard:has(.risk) { border-left: 0; }
.kcard .risk::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bad);
  margin-right: 5px; vertical-align: 1px; }

/* Team boards (crm/boards). */
.bl-tile { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); border-top: 0; position: relative; overflow: hidden; }
.bl-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--bc, var(--accent)); }
.bl-tile:hover { box-shadow: var(--shadow-2); opacity: 1; }
.bl-list { border-radius: var(--radius-lg); padding: 10px; }
.bl-card { border: 0; border-radius: 10px; box-shadow: var(--shadow-1); padding: 9px 11px; }
.bl-card:hover { box-shadow: var(--shadow-2); }
.bl-card[class*="cover-"] { border-top-style: solid; }
.bl-label { border-radius: 999px; padding: 0 8px; font-weight: 500; }
.bl-placeholder { background: var(--hover); border-radius: 10px; }

/* Month calendar (meetings.html): today in a red circle, events as tinted bars. */
.cal-head div { font-size: 12px; font-weight: 500; text-align: right; padding: 8px 10px; }
.cal-day { padding: 5px 6px; }
.cal-date { align-self: flex-end; font-weight: 500; min-width: 24px; text-align: center; line-height: 22px; height: 22px; }
.cal-day.other .cal-date { color: var(--muted-2); }
.cal-day.today .cal-date { background: var(--today-dot); color: #fff; border-radius: 999px; padding: 0 6px; font-weight: 600; }
.cal-event { border-radius: 5px; padding: 2px 6px 2px 8px; background: var(--accent-soft); color: var(--text);
  box-shadow: inset 3px 0 0 var(--accent); }
html[data-theme="dark"] .cal-event { box-shadow: inset 3px 0 0 var(--link); }
.cal-event.ext { box-shadow: inset 3px 0 0 color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text)); }
.cal-event:hover { filter: none; background: color-mix(in srgb, var(--accent-soft), var(--accent) 8%); }
/* This week (home and calendar). */
.week-day { border-radius: 12px; padding: 8px; }
.week-day.today { background: var(--accent-soft); outline: 0; }
.week-day.past { opacity: .6; }
.week-date strong { font-family: var(--font-display); font-weight: 600; }
.week-day.today .week-date strong { background: var(--today-dot); color: #fff; border-radius: 999px; padding: 0 7px; }
.cal-event.week-event { border: 0; border-radius: 8px; background: var(--panel); padding: 6px 8px 6px 10px;
  box-shadow: var(--shadow-1), inset 3px 0 0 var(--accent); }
html[data-theme="dark"] .cal-event.week-event { box-shadow: var(--shadow-1), inset 3px 0 0 var(--link); }
.cal-event.week-event.ext { box-shadow: var(--shadow-1), inset 3px 0 0 color-mix(in srgb, #1d4ed8 var(--ink-mix), var(--text)); }
.week-co { border-radius: 999px; padding: 0 6px; background: var(--fill); }

/* Mail (inbox.html): a Mail-app-like window with a translucent sidebar, blue dots for unread. */
.mail-app { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.mail-folders { background: var(--panel-2); padding: 8px 6px; }
.mail-folders a { border-radius: 7px; padding: 6px 10px; margin: 1px 0; }
.mail-folders a:hover { background: var(--fill); opacity: 1; }
.mail-folders a.on, .mail-label-row.on { background: var(--accent-soft); color: var(--text); }
.mail-folders a.on { font-weight: 600; }
.mail-label-row { border-radius: 7px; }
.mail-label-row:hover { background: var(--fill); }
.mail-folders-head { padding: 14px 10px 4px; font-weight: 600; }
.mail-search { padding: 10px; }
.mail-search input { border-radius: 9px; background: var(--fill); border-color: transparent; }
.mail-search input:focus { background: var(--panel); }
.mail-list-head { padding: 10px 14px 6px; }
.mail-row a { padding: 10px 14px 10px 24px; position: relative; }
.mail-row a:hover, .mail-row a:focus { background: var(--hover); }
.mail-row.on a { background: var(--accent-soft); }
.mail-row.unread a { box-shadow: none; }
.mail-row.unread a::before { content: ""; position: absolute; left: 9px; top: 15px; width: 8px; height: 8px; border-radius: 50%;
  background: #0a84ff; }
.mail-row a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.mail-row.unread .mail-from { font-weight: 600; }
.mail-row.unread .mail-subject { font-weight: 500; }
.mail-date { color: var(--muted-2); }
.mail-chip { border-radius: 999px; padding: 1px 8px; font-weight: 500; }
.mail-reader-head { background: color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.mail-reader-head h2 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.018em; }
.mail-adv-pop, .addr-suggest { background: var(--glass); border: .5px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-3);
  -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); }
.addr-row { border-radius: 7px; margin: 2px 4px; }

/* A laptop-width window with every menu (Mail, Chat): tighter menu pills and search as just its icon, so the bar
   never runs past the window. Up to 1230 px the menus fold into ☰ (above): with Mail, Chat and Settings all showing the
   bar is 1223 px wide even tightened. */
@media (min-width: 1181px) and (max-width: 1440px) {
  .tn-link, .tn-menu > summary { padding: 0 8px; font-size: 13px; }
  .appbar .search-trigger { width: auto; }
  .appbar .search-trigger kbd, .appbar .search-text { display: none; }
  .appbar .brand { margin-right: 8px; }
}

/* Land search (land_search.html): sidebar like a Mac inspector, frosted map controls. */
.land-side-head h1 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.018em; }
.lf-group summary { color: var(--text); font-weight: 600; font-size: 13px; }
.land-results li { padding: 10px 14px; }
.land-results li:hover { background: var(--hover); }
.land-results li.on { background: var(--accent-soft); }
.land-card h3 { color: var(--text); font-weight: 600; font-size: 13px; }
.land-toolbar { border-color: var(--line); }
.leaflet-container .leaflet-bar { border: 0; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-2); }
.leaflet-container .leaflet-bar a { background: var(--glass); color: var(--text); border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.leaflet-container .leaflet-bar a:hover { background: var(--panel); color: var(--text); }
.leaflet-container .leaflet-control-layers { border: 0; border-radius: 12px; box-shadow: var(--shadow-2); background: var(--glass);
  color: var(--text); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.leaflet-container .leaflet-popup-content-wrapper, .leaflet-container .leaflet-popup-tip { background: var(--panel); color: var(--text);
  box-shadow: var(--shadow-3); }
.leaflet-container .leaflet-popup-content-wrapper { border-radius: 12px; }
.map-legend { background: var(--glass); color: var(--text); border-radius: 12px; box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
/* A name in an email (From, To, Cc) opens who they are, or adds them to the directory (crm/static/crm/who.js). */
.mail-who { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px; }
.mail-who:hover, .mail-who:focus-visible { color: var(--accent); text-decoration-style: solid; }
.who-dialog { width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); color: var(--text); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.who-dialog::backdrop { background: rgba(15, 23, 42, .35); }
.who-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.who-x { font-size: 16px; padding: 2px 6px; }
.who-known { margin: 0 0 8px; }
.who-add h4 { margin: 4px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.who-add label { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; font-size: 13px; }
.who-add input, .who-add select { width: 100%; }
.who-note { margin: 2px 0 10px; }
.who-error { margin: 0 0 8px; color: var(--bad); font-size: 13px; }
@media (max-width: 700px) {  /* a sheet from the bottom on a phone, with inputs big enough not to zoom */
  .who-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 14px 14px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .who-add input, .who-add select { font-size: 16px; min-height: 40px; }
  .who-add .btn-primary { width: 100%; min-height: 44px; }
}

/* A phone (docs/MAIL_DOCK.md): the page keeps room below its end for any folded mail or chat boxes (--dock-h,

   dock.js), and "+ New" becomes "+" to make room in the top bar (the words stay for screen readers). */

@media (max-width: 700px) {

  body.has-dock { padding-bottom: var(--dock-h, 0px); }

  .appbar .btn-new { font-size: 0; padding: 4px 12px; line-height: 1; }

  .appbar .btn-new::before { content: "+"; font-size: 22px; font-weight: 700; }

}

/* Notification settings on a phone: each browser on its own line, its dates under it, Remove at the right. */
@media (max-width: 700px) {
  .push-devices, .push-devices tbody { display: block; }
  .push-devices thead { display: none; }
  .push-devices tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.push-devices td { display: block; padding: 0; border: 0; }
  table.push-devices td:last-child { grid-column: 2; grid-row: 1 / span 3; }
  table.push-devices td[data-label] { font-size: 13px; color: var(--muted); }
  table.push-devices td[data-label]::before { content: attr(data-label) ": "; }
}

/* A phone, the pages that still scrolled sideways at 390 px: grid columns that grew to their widest child, fields and
   fieldsets that wouldn't shrink, tables in panels with nothing to scroll them, the redline pages' negative margins and
   the site map's legend. */
fieldset { min-width: 0; }
@media (max-width: 900px) {
  .dd-form, .deal-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-form input, .dd-form select, .dd-form textarea, .deal-dates input, .deal-dates select { min-width: 0; max-width: 100%; }
}
@media (max-width: 700px) {
  .note-add { flex-wrap: wrap; }
  .note-add input, .note-add textarea { min-width: 0; }
  main .panel > table.data, main .panel > form > table.data, main form.panel > table.data {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rl-page { margin: 18px 0; }
  .site-map-legend { right: 12px; left: 12px; flex-wrap: wrap; gap: 4px 10px; }
  /* The reading pane's buttons: smaller, so they take two rows instead of three */
  .mail-reply-bar .btn-small, .mail-actions .btn-small, .mail-tools .btn-small { padding: 4px 9px; font-size: 13px; }
  .mail-reply-bar, .mail-actions, .mail-actions-main { gap: 5px; }
}
/* The top menus grew by one (Chat): the search box gives up the room first, so the bar never runs past a 1440 px
   window (the avatar menu stuck out 10 px). */
.appbar .search-trigger { min-width: 0; flex-shrink: 1; }
@media (max-width: 1500px) {  /* with every menu showing, search is its icon (Ctrl K and / still open it) */
  .appbar .search-trigger { width: auto; }
  .appbar .search-trigger kbd, .appbar .search-text { display: none; }
}