/* SalesHead base styles. Navy rail, white header, Geist. Dense: 14px base, dark secondary text, solid pills. */
:root {
  --navy: #0B1F44; --navy-2: #13306B; --navy-3: #1A3570; --rail-text: #C9D5EE;
  --ink: #0F172A; --ink-2: #1E293B; --muted: #334155; --faint: #475569;
  --line: #E2E8F0; --line-2: #EEF2F7; --bg: #F5F7FB; --surface: #FFFFFF; --soft: #F1F5F9;
  --blue: #2457F5; --blue-dark: #1A3FB8; --blue-1: #DCE6FF; --blue-2: #A9C1FF; --blue-3: #6F93FF;
  --amber: #F59E0B; --amber-bg: #FEF3C7; --amber-ink: #78350F; --amber-text: #92400E;
  --radius: 12px;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5 }
a { color: var(--blue-dark); text-decoration: none }
a:hover { color: var(--navy); text-decoration: underline }
button { font: inherit; cursor: pointer }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; text-wrap: balance }
h1 { font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em }
h2 { font-size: 17px; font-weight: 700 }
.num { font-variant-numeric: tabular-nums }

/* Shell */
.shell { display: flex; min-height: 100vh }
.rail { flex: 0 0 200px; background: var(--navy); padding: 18px 10px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow-y: auto; z-index: 20 }
/* The nav stays put while the page scrolls, so every item is always in reach. */
.rail .mark { font-weight: 700; font-size: 22px; letter-spacing: -0.04em; padding: 0 12px 20px; color: #fff }
.rail .mark span span { color: var(--blue-3) }
.rail a { padding: 7px 10px; border-radius: 8px; color: var(--rail-text) }
.rail a:hover { background: var(--navy-2); color: #fff; text-decoration: none }
.rail a[aria-current="page"] { background: var(--navy-3); color: #fff; font-weight: 500 }
.rail .spacer { flex: 1 }
.rail a, .railfold { display: flex; align-items: center; gap: 12px; position: relative; white-space: nowrap }
.rail svg { flex: none }
.rail .mark .short { display: none }
.railfold { margin-top: 6px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--rail-text); font-size: 14px }
.railfold:hover { background: var(--navy-2); color: #fff }
.shell .rail { transition: flex-basis .15s ease }
.shell.slim .rail { flex-basis: 60px; padding-left: 10px; padding-right: 10px }
.shell.slim .rail .mark { padding: 0 0 20px; text-align: center }
.shell.slim .rail .mark .full { display: none }
.shell.slim .rail .mark .short { display: inline }
.shell.slim .rail a, .shell.slim .railfold { justify-content: center; padding: 8px 0 }
.shell.slim .rail a > span, .shell.slim .railfold > span { display: none }
.shell.slim .railfold svg { transform: scaleX(-1) }
.rail .railnew { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #2F5BFF; color: #fff; margin-left: 4px }
.rail .railbeta { background: #64748B }
.rail .raildot { display: none; position: absolute; top: 6px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #5B8CFF }
.shell.slim .rail .raildot { display: block }
/* Labels for the slim rail, on hover and keyboard focus. */
.shell.slim .rail [data-tip]:hover::after, .shell.slim .rail [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 60;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none }
.shell.slim .rail { overflow: visible }
.main { flex: 1; min-width: 0 }
.topbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 28px; background: var(--surface); border-bottom: 1px solid var(--line) }
.search { position: relative; flex: 1 1 320px; max-width: 520px }
.search input { width: 100%; height: 36px; border: 0; border-radius: 8px; background: var(--soft); padding: 0 12px 0 36px; font: inherit; color: var(--ink) }
.search svg { position: absolute; left: 12px; top: 10px; color: var(--faint) }
.search .results { position: absolute; top: 42px; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.12); z-index: 20; padding: 6px; max-height: 420px; overflow: auto }
.search .results h4 { margin: 8px 8px 4px; font-size: 13px; color: var(--faint); font-weight: 600 }
.search .results a { display: block; padding: 8px; border-radius: 6px; color: var(--ink) }
.search .results a:hover { background: var(--soft); text-decoration: none }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none }
.iconbtn { position: relative; width: 38px; height: 36px; border: 0; border-radius: 8px; background: var(--soft); color: var(--muted); display: inline-flex; align-items: center; justify-content: center }
.bell { position: relative }
.notes { position: absolute; top: 44px; right: 0; z-index: 40; width: 360px; max-width: calc(100vw - 32px); max-height: 460px; overflow: auto; padding: 4px 0; box-shadow: 0 12px 32px rgba(15,23,42,.14) }
.notes .nhead { padding: 10px 14px 8px; border-bottom: 1px solid var(--line) }
.nitem { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; color: var(--ink); border-bottom: 1px solid var(--line-2); font-size: 14px }
.nitem:hover { background: var(--soft); text-decoration: none; color: var(--ink) }
.nitem .meta.good { color: #166534 }
.nitem.new { box-shadow: inset 3px 0 0 var(--blue) }
.nitem.sys { box-shadow: inset 3px 0 0 #B91C1C; background: #FFF7F7 }
.iconbtn .dot { position: absolute; top: 7px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber) }

/* Page header */
.head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 28px 18px; display: flex; flex-direction: column; gap: 14px }
.head .row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end }
.crumb { color: var(--muted); font-size: 13px }
.actions { display: flex; flex-wrap: wrap; gap: 8px }
/* A button may be a button, a link or a label, so the words are centred the same way in all three. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-height: 36px; padding: 4px 14px; border: 1px solid #94A3B8; border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; vertical-align: middle }
.btn[hidden] { display: none }
.btn:hover { background: var(--soft); color: var(--ink); text-decoration: none }
.btn.primary { border: 1px solid var(--blue); background: var(--blue); color: #fff; font-weight: 600 }
.btn.primary:hover { border-color: var(--blue-dark); background: var(--blue-dark); color: #fff }
.btn.small { min-height: 30px; padding: 3px 10px; font-size: 13px }
.btn.ghost { border: 0; background: transparent; color: var(--muted) }
.btn:disabled { opacity: .55; cursor: not-allowed }
.figures { display: flex; flex-wrap: wrap; row-gap: 12px }
.figures > div, .figures > a.figlink { padding: 0 24px; border-left: 1px solid #CBD5E1 }
.figures > div:first-child, .figures > a.figlink:first-child { padding-left: 0; border-left: 0 }
.figures > a.figlink { color: inherit; text-decoration: none; border-radius: 4px }
.figures > a.figlink:hover .value, .figures > a.figlink:focus-visible .value { color: var(--blue); text-decoration: underline; text-underline-offset: 3px }
.figures .label { color: var(--muted); font-size: 13px }
.figures .value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums }
.figures .value.text { font-size: 16px; font-weight: 600; padding-top: 4px }

/* Content */
.content { padding: 20px 28px 40px; display: flex; flex-direction: column; gap: 20px }
.cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0 }
section > .sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 8px }
section > .sechead .sub { font-weight: 400; color: var(--muted) }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius) }
.card.pad { padding: 14px 16px }
.card.list { padding: 2px 16px }
.rowline { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); align-items: center }
.rowline:last-child { border-bottom: 0 }
.meta { color: var(--muted); font-size: 13px }
.more { padding-top: 8px; font-size: 13px }
dl.grid { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px }
dl.grid dt { color: var(--muted); font-size: 13px }
dl.grid dd { margin: 0; font-weight: 500 }
.divider { border-top: 1px solid var(--line-2); padding-top: 10px; margin-top: 10px }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 13px; white-space: nowrap }
.pill.active { background: var(--blue-dark); color: #fff }
.pill.recent { background: var(--blue-2); color: var(--navy) }
.pill.lapsed { background: var(--amber); color: #451A03 }
.pill.prospect, .pill.grey { background: var(--line); color: var(--ink-2) }
.pill.warn { background: var(--amber-bg); color: var(--amber-ink) }
.pill.blue { background: var(--blue-1); color: var(--blue-dark) }
.pill.bad { background: #FEE2E2; color: #991B1B }
.pill.good { background: #DCFCE7; color: #166534 }
.left { color: var(--faint) }
.muted { color: var(--muted) }
.empty { color: var(--muted); padding: 14px 0 }
.error { color: #B91C1C }
table.data { width: 100%; border-collapse: collapse; font-size: 14px }
table.data th { text-align: left; color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #F8FAFC }
table.data td { padding: 8px 12px; border-bottom: 1px solid var(--line-2) }
table.data tr:last-child td { border-bottom: 0 }
table.data .r { text-align: right }
.tablewrap { overflow-x: auto }
.segs { display: inline-flex; gap: 2px; background: var(--line); border-radius: 999px; padding: 3px }
.segs button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 13px; white-space: nowrap }
.segs button[aria-pressed="true"] { background: var(--navy); color: #fff; font-weight: 600 }

/* Timeline */
.tl { position: relative; padding: 14px 16px 14px 48px }
.tl::before { content: ""; position: absolute; left: 29px; top: 26px; bottom: 26px; width: 2px; background: var(--line) }
.tl .item { position: relative; padding-bottom: 12px }
.tl .none { position: relative; color: var(--muted); padding-bottom: 14px }
.tl .none::before { content: ""; position: absolute; left: -29px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px dashed #94A3B8; box-sizing: border-box }
.tl .item:last-child { padding-bottom: 0 }
.tl .dot { position: absolute; left: -29px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-3) }
.tl .dot.open { background: #fff; border: 2px solid #94A3B8 }
.tl .dot.due { background: var(--amber) }
.tl .dot.phase { background: var(--navy) }
.tl .dot.email { background: var(--blue) }
.tl .today { display: flex; align-items: center; gap: 10px; margin: 2px 0 20px -38px }
.tl .today span { position: relative; z-index: 1; background: var(--blue); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600 }
.tl .today i { flex: 1; height: 2px; background: var(--blue) }
.tl .title { font-weight: 600; color: var(--ink) }
.tl .tlhead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tl .tlmore { margin-top: 2px; font-size: 13px; color: var(--muted) }
.tl .tlmore summary { cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tl .tlmore summary::-webkit-details-marker { display: none }
.tl .tlmore[open] summary { display: none }
.newsrow { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 15px }
.newsrow input { width: 18px; height: 18px; margin: 0; flex: none }
details.morelist summary { cursor: pointer; list-style: none; display: inline; font-size: 14px }
details.morelist summary::-webkit-details-marker { display: none }
details.morelist[open] summary { display: none }
.tl .tlmore > div { white-space: pre-wrap; color: var(--ink-2); padding: 6px 0 2px; max-height: 360px; overflow: auto }
.tl .tlolder { margin: 4px 0 0 -38px }
.tl .check { display: flex; gap: 10px; align-items: flex-start }
.tl input[type=checkbox], .todo input[type=checkbox] { width: 18px; height: 18px; margin: 2px 0 0; flex: none }

/* Phase panel */
.phase-panel { overflow: hidden }
.phase-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px 0 }
.phase-body { padding: 18px 20px 0 }
.arrow { display: flex; align-items: stretch; min-height: 76px }
.arrow .seg { min-width: 0; padding: 14px 10px; overflow: hidden; border-left: 2px solid #fff }
.arrow .seg:first-child { border-left: 0; border-radius: 10px 0 0 10px }
.arrow .seg b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.arrow .seg span { font-size: 13px }
.arrow .head { flex: 0 0 36px; background: var(--navy); clip-path: polygon(0 0, 100% 50%, 0 100%) }
.arrow .ahead { margin-left: 10px; border: 2px dashed #CBD5E1; border-radius: 0 38px 38px 0; display: flex; align-items: center; padding: 0 22px; color: var(--muted); gap: 8px }
.axis { display: flex; padding-top: 8px; font-size: 13px; color: var(--faint) }
.axis span { min-width: 0; white-space: nowrap }
.reqs { display: flex; flex-wrap: wrap; margin-top: 18px; border-top: 1px solid var(--line) }
.reqs > div { flex: 1 1 340px; padding: 16px 20px }
.reqs > div + div { border-left: 1px solid var(--line) }
.reqgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; padding-top: 8px }
.req { display: flex; gap: 8px; align-items: center }
.req .tick { width: 22px; height: 22px; border-radius: 50%; background: var(--blue-1); color: var(--blue-dark); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none }
.req.miss { color: var(--amber-text); font-weight: 500 }
.req.miss .tick { background: transparent; border: 2px solid var(--amber) }

/* Home */
.daystrip { position: relative; height: 64px; background: var(--navy); border-radius: 10px; overflow: hidden }
.daystrip .grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr) }
.daystrip .grid i { border-right: 1px solid var(--navy-3) }
.daystrip .block { position: absolute; top: 10px; bottom: 10px; background: var(--blue-3); border-radius: 6px; padding: 6px 8px; color: var(--navy); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden }
.daystrip .block.call { background: var(--blue-2) }
.daystrip .now { position: absolute; top: 0; bottom: 0; width: 3px; background: #F5B53D }
.hours { display: grid; grid-template-columns: repeat(10, 1fr); color: var(--faint); font-size: 13px; padding-top: 6px }
.signal { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 16px 18px }
.signal + .signal { border-top: 1px solid var(--line-2) }
.signal .what { flex: 1 1 240px; min-width: 0 }
.river { display: flex; gap: 3px; height: 44px }
.river a { border-radius: 2px }
.river a:first-child { border-radius: 6px 2px 2px 6px }
.river a:last-child { border-radius: 2px 6px 6px 2px }

/* Report wall */
.wall { display: flex; flex-direction: column; gap: 6px; padding: 14px }
.wallrow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: center; border-radius: 10px; padding: 6px }
.wallrow[aria-pressed="true"] { background: #EEF3FF }
.wallrow button { text-align: left; border: 0; background: transparent; padding: 4px 6px; color: var(--ink) }
.blocks { display: flex; gap: 3px; height: 40px }
.blocks a { border-radius: 4px; color: #fff; font-size: 12px; font-weight: 600; padding: 11px 0; text-indent: 6px; min-width: 0; overflow: hidden; white-space: nowrap }
.blocks.dense { gap: 1px }
.resultcol { position: relative }
.dealtip { position: absolute; z-index: 40; min-width: 200px; max-width: 300px; padding: 10px 12px; background: var(--ink); color: #fff; border-radius: 8px; font-size: 13px; line-height: 1.4; pointer-events: none; box-shadow: 0 10px 24px rgba(15,23,42,.25) }
.dealtip .tv { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 0 4px }
.dealtip .stale { font-size: 12px; font-weight: 600; color: #451A03; background: #F59E0B; border-radius: 4px; padding: 1px 6px; vertical-align: 2px }
.dealtip dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 4px 0 0 }
.dealtip dt { color: #CBD5E1 } .dealtip dd { margin: 0 }
.blocks.dense a { border-radius: 2px }

/* Bars */
.bars { display: grid; gap: 6px; align-items: end; height: 170px }
.bars .b { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100% }
.bars .b i { background: var(--blue-2); border-radius: 3px 3px 0 0; display: block }
.bars .b span { font-size: 12px; color: var(--faint); text-align: center }
.barlabels { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 6px; font-size: 12px; color: var(--faint); text-align: center }
.squares { display: flex; flex-wrap: wrap; gap: 4px }
.squares i { width: 16px; height: 16px; border-radius: 3px }

/* Auth */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy); padding: 16px }
.auth form { background: var(--surface); border-radius: 16px; padding: 32px; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px }
.auth .mark { font-weight: 700; font-size: 30px; letter-spacing: -0.04em }
.auth .mark span { color: var(--blue) }
label.field { display: flex; flex-direction: column; gap: 6px; font-weight: 500 }
label.field input, label.field select, label.field textarea { height: 36px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 12px; font: inherit; color: var(--ink); background: var(--surface) }
label.field textarea { height: 90px; padding: 10px 12px; resize: vertical }

/* Dialog */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(15,23,42,.3) }
dialog::backdrop { background: rgba(11,31,68,.45) }
dialog form { padding: 20px; display: flex; flex-direction: column; gap: 12px }
dialog .dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }
dialog .dhead p { margin: 4px 0 0; color: var(--muted) }
dialog .x { border: 0; background: transparent; width: 36px; height: 36px; border-radius: 8px; color: var(--muted); font-size: 22px; line-height: 1 }
dialog .x:hover { background: var(--soft) }
dialog .actions { justify-content: flex-end; padding-top: 4px }
dialog .hint { font-size: 14px; color: var(--muted); font-weight: 400 }
.toast { position: fixed; right: 20px; bottom: 20px; background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 10px; z-index: 50 }
.toast-act { margin-left: 10px; background: none; border: 0; padding: 0; color: #fff; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer }

@media (max-width: 1100px) { .cols { grid-template-columns: 1fr } dl.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 760px) {
  .shell { flex-direction: column }
  .rail { flex: none; flex-direction: row; overflow-x: auto; padding: 10px 12px; align-items: center; height: auto; align-self: auto }
  .rail .mark { padding: 0 12px 0 4px; font-size: 22px }
  .rail .spacer { display: none }
  .shell.slim .rail { flex-basis: auto }
  .rail a > span, .railfold { display: none }
  .shell.slim .rail .mark .full, .rail .mark .full { display: inline } .rail .mark .short, .shell.slim .rail .mark .short { display: none }
  .shell.slim .rail .mark { padding: 0 12px 0 4px }
  .shell.slim .rail [data-tip]:hover::after { display: none }
  .topbar, .head, .content { padding-left: 16px; padding-right: 16px }
  .figures > div { padding: 0 16px }
  .wallrow { grid-template-columns: 1fr }
  .reqs > div + div { border-left: 0; border-top: 1px solid var(--line) }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

/* Report builder */
.rfold { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start }
.folders { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px }
.folders button, .folders a { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 32px; padding: 4px 10px; border: 1px dashed transparent; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 14px; text-align: left }
.folders button:hover, .folders a:hover { background: var(--surface); text-decoration: none; color: var(--ink) }
.folders button[aria-current="true"] { background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 600 }
.folders button.over { border-color: var(--blue); background: var(--blue-1) }
.folders .n { color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 400 }
.folders .fhead { display: flex; justify-content: space-between; align-items: center; padding: 18px 12px 6px; font-size: 13px; font-weight: 600; color: var(--muted) }
.folders .sep { height: 1px; background: var(--line); margin: 14px 12px }
.rcard[draggable="true"] { cursor: grab }
@media (max-width: 900px) { .rfold { grid-template-columns: 1fr } .folders { position: static } }
/* Rule folders (Settings, Automation) sit beside the settings menu, so the tree is narrower and goes above the rules sooner. */
.rulefold { grid-template-columns: 200px minmax(0, 1fr); gap: 16px }
.rulefold table.data th, .rulefold table.data td:not(:first-child) { white-space: nowrap }
.rulefold tr[draggable="true"] { cursor: grab }
@media (max-width: 1180px) { .rulefold { grid-template-columns: 1fr } .rulefold .folders { position: static } }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
.rcard { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink) }
.rcard[hidden] { display: none }
.rcardw { position: relative; display: grid; min-width: 0 }
.rcardw[hidden] { display: none }
.racts { position: absolute; top: 13px; right: 16px; display: flex; gap: 12px }
.racts .linkbtn { font-size: 12.5px; color: var(--muted); text-decoration: none; align-self: auto }
.racts .linkbtn:hover { color: var(--ink); text-decoration: underline }
.rcard:hover { border-color: var(--blue-3); text-decoration: none; color: var(--ink) }
.titleinput { font: inherit; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; border: 1px solid transparent; border-radius: 8px; padding: 2px 8px; margin-left: -9px; width: min(640px, 100%); color: var(--ink); background: transparent }
.titleinput:hover, .titleinput:focus { border-color: #94A3B8; background: var(--surface) }
.linkbtn.small { font-size: 14px; align-self: flex-start }
.resultcol { display: flex; flex-direction: column; gap: 20px; min-width: 0 }
.resultcol.busy { opacity: .6; transition: opacity .2s }
.fb-segs { display: flex; flex-wrap: wrap; gap: 10px }
.fb-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.filterbar #dirty { padding-top: 10px }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center }
.x { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 6px; color: var(--muted); font-size: 18px; line-height: 1 }
.x:hover:not(:disabled) { background: var(--soft) }
.x:disabled { opacity: .3 }
details.multi { position: relative }
details.multi summary { list-style: none; height: 36px; border: 1px solid #94A3B8; border-radius: 8px; padding: 8px 10px; font-size: 14px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--surface) }
details.multi summary::-webkit-details-marker { display: none }
details.multi .menu { position: absolute; z-index: 25; top: 42px; left: 0; right: 0; min-width: 220px; max-height: 280px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.14); padding: 6px }
details.multi .menu label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: 14px }
details.multi .menu label:hover { background: var(--soft) }
details.multi .menu input { width: 16px; height: 16px }
.grow { display: flex; gap: 6px; align-items: center }
.grow select { flex: 1 1 0 }
.linkbtn { border: 0; background: none; padding: 0; color: var(--blue-dark); font: inherit; text-decoration: underline }
.warnline { margin: 0; padding: 12px 16px; border-radius: 10px; background: var(--amber-bg); color: var(--amber-ink) }
.sorter { border: 0; background: none; padding: 0; font: inherit; color: inherit; font-weight: 600 }
table.data.summary tr[data-drill] { cursor: pointer }
table.data.summary tr[data-drill]:hover td { background: #F5F8FF }
table.data.summary tr.on td { background: #EEF3FF }
table.data.summary tr.grand td { border-top: 2px solid var(--line); background: #F8FAFC }
.bignum .value { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1 }
.hbars { display: flex; flex-direction: column; gap: 6px }
.hbar { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 90px; gap: 12px; align-items: center; border: 0; background: transparent; padding: 4px 6px; border-radius: 8px; text-align: left; color: var(--ink) }
.hbar:hover { background: #F5F8FF }
.hbar .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hbar .track { height: 24px }
.hbar .fill { display: flex; height: 24px; border-radius: 4px; overflow: hidden; min-width: 3px }
.hbar .fill i, .vcol .seg i { display: block }
.hbar b { text-align: right }
.vcols { display: grid; gap: 6px; align-items: end }
.vcol { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; border: 0; background: transparent; padding: 4px 0; border-radius: 6px; color: var(--ink); min-width: 0 }
.vcol:hover { background: #F5F8FF }
.vcol .num { font-size: 12px; color: var(--faint); text-align: center; white-space: nowrap }
.vcol .seg { display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; min-height: 2px; margin: 0 2px }
.vcol .lab { font-size: 12px; color: var(--faint); text-align: center; border-top: 1px solid var(--line); padding-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 12px; font-size: 14px; color: var(--muted) }
.legend span { display: flex; gap: 6px; align-items: center }
.legend i, .sqkey i { width: 12px; height: 12px; border-radius: 3px; display: inline-block }
.sqkey { display: flex; flex-wrap: wrap; gap: 16px 32px; padding-top: 16px }
.sqkey button { border: 0; background: transparent; padding: 4px 6px; border-radius: 8px; text-align: left; color: var(--ink) }
.sqkey button:hover { background: #F5F8FF }
.sqkey .meta { display: flex; gap: 6px; align-items: center }
.sqkey b { font-size: 24px }
.wgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px }
.widget { min-width: 0; display: flex; flex-direction: column; gap: 12px }
.widget.third { grid-column: span 2 } .widget.half { grid-column: span 3 } .widget.full { grid-column: span 6 }
.widget .whead { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.widget .whead a { color: var(--ink) }
.widget .hbar { grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) 70px }
@media (max-width: 1280px) { .builder, .builder.no-left, .builder.no-right, .builder.no-left.no-right { grid-template-columns: 280px minmax(0, 1fr) } .builder.no-left.no-right { grid-template-columns: 44px minmax(0, 1fr) } .builder #right { grid-column: 1; position: static; max-height: none } .builder #left { position: static; max-height: none } }
@media (max-width: 900px) { .builder { grid-template-columns: 1fr } .builder #right { grid-column: auto } .wgrid { grid-template-columns: 1fr } .widget.third, .widget.half, .widget.full { grid-column: auto } .hbar { grid-template-columns: 110px minmax(0, 1fr) 70px } }

/* Settings */
.setwrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start }
.setnav { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px }
.setgroup { display: flex; flex-direction: column; gap: 2px }
.setglabel { font-size: 12px; font-weight: 600; color: var(--faint); letter-spacing: .02em; padding: 0 12px 4px }
.setpick { display: none }
.setpick select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; font-weight: 600; color: var(--ink) }
@media (max-width: 900px) { .setwrap { grid-template-columns: 1fr } .setnav { display: none } .setpick { display: block } }
/* Only above that width: said after the rule above with no width of its own, it kept two columns on a phone and squeezed the page. */
@media (min-width: 901px) { .setwrap { grid-template-columns: 210px minmax(0, 1fr) } }
.setnav a { padding: 8px 12px; border-radius: 8px; color: var(--ink-2) }
.setnav a:hover { background: var(--soft); text-decoration: none }
.setnav a[aria-current="page"] { background: var(--navy); color: #fff; font-weight: 600 }
.setbody { display: flex; flex-direction: column; gap: 18px; min-width: 0 }
.settabs { align-self: flex-start; flex-wrap: wrap }
.split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 24px; align-items: start }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.phcard { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px 12px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink); width: 100% }
.phcard:hover { border-color: var(--blue-3) }
.phcard.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: #F7F9FF }
.phcard.dim { opacity: .6 }
.phmove { display: flex; flex-direction: column }
.phmove .x { width: 26px; height: 22px; font-size: 14px }
.phtop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.pill.small { font-size: 12px; padding: 2px 9px }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px }
.chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); background: var(--soft); border-radius: 999px; padding: 2px 10px; font-size: 13px; color: var(--ink-2); font-family: inherit }
button.chip { cursor: pointer }
button.chip:hover { border-color: var(--blue-3) }
.chip .x { width: 22px; height: 22px; font-size: 15px }
fieldset.box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 12px }
fieldset.box legend { font-weight: 600; padding: 0 6px }
h3.minor { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin: 0 }
h3.minor .hint { font-weight: 400 }
.hint { font-size: 14px; color: var(--muted); font-weight: 400 }
details.retired summary { cursor: pointer; color: var(--muted); padding: 8px 0 }
.dim > *:not(:last-child), tr.dim td:not(:last-child), .rowline.dim > div { opacity: .55 }
.checks.dim, label.dim { opacity: .6 }
input.inline, select.inline { height: 36px; border: 1px solid transparent; border-radius: 6px; padding: 0 8px; font: inherit; color: var(--ink); background: transparent; min-width: 0; max-width: 100% }
input.inline:hover, select.inline:hover, input.inline:focus, select.inline:focus { border-color: #94A3B8; background: var(--surface) }
table.data.rows tbody tr { cursor: pointer }
table.data.rows tbody tr:hover td { background: #F7F9FF }
table.matrix th, table.matrix td { text-align: center }
table.matrix th:first-child, table.matrix td:first-child { text-align: left }
table.matrix th input.inline { text-align: center; font-weight: 600; width: 120px }
table.matrix input[type=checkbox] { width: 18px; height: 18px }
.switch { position: relative; display: inline-block; width: 40px; height: 24px }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1 }
.switch span { position: absolute; inset: 0; background: #CBD5E1; border-radius: 999px; transition: background .15s }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s }
.switch input:checked + span { background: var(--blue) }
.switch input:checked + span::after { transform: translateX(16px) }
.switch input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px }
.optlist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px }
.optlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 4px 4px 4px 12px; border-radius: 8px; background: var(--soft) }
.optlist li.dim .name { text-decoration: line-through; color: var(--muted) }
.optlist .acts { display: flex; gap: 4px; align-items: center }
.grow input, .grow select { height: 36px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); min-width: 0 }
.grow input:not([type=number]) { flex: 1 1 0 }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px }
.checks label { display: flex; gap: 8px; align-items: center; font-weight: 400 }
.linkbox { display: flex; gap: 10px; align-items: center; background: var(--soft); border-radius: 8px; padding: 10px 12px }
.linkbox code { flex: 1; min-width: 0; word-break: break-all; font-size: 13px }
.moves { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px }
.moves > div { display: flex; flex-direction: column }
.moves b { font-size: 26px }
ul.impact { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px }
.sentence { margin: 0; padding: 12px 14px; background: #F2F6FF; border-radius: 8px; color: var(--navy); font-weight: 500 }
.rulepart select, .rulepart > input { height: 36px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 10px; font: inherit; color: var(--ink); background: var(--surface) }
.rulepart .frow select, .rulepart .frow input, .rulepart details.multi summary { height: 36px }
.rstep + .rstep { border-top: 1px solid var(--line); padding-top: 14px }
.rstephead { display: flex; justify-content: space-between; align-items: center }
.rsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start }
@media (max-width: 1100px) { .rsplit { grid-template-columns: 1fr } }
.routetools .linkbtn:disabled { color: var(--faint); opacity: .45; cursor: default; text-decoration: none }
.routehead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.routehead > input { flex: 1; min-width: 160px; height: 36px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 10px; font: inherit; font-weight: 500; color: var(--ink); background: var(--surface) }
.routeno { width: 24px; height: 24px; border-radius: 50%; background: var(--soft); color: var(--ink-2); display: inline-grid; place-items: center; font-size: 12px; font-variant-numeric: tabular-nums }
.routetools { display: flex; gap: 10px }
.rulepart code, .hint code { background: var(--soft); border-radius: 4px; padding: 1px 5px; font-size: 13px }
.lexgrid { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: center; max-width: 620px }
.lexgrid input, .setbody label.field input, .setbody label.field select, .setbody label.field textarea { height: 36px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 12px; font: inherit; color: var(--ink); background: var(--surface) }
.setbody label.field textarea { height: 96px; padding: 10px 12px }
label.mini { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted) }
label.mini input { width: 72px; height: 34px }
textarea.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.5; min-height: 220px }
.setrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.changes .rowline { font-size: 14px }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr } .three { grid-template-columns: 1fr 1fr } }
@media (max-width: 700px) { .two, .three { grid-template-columns: 1fr } .lexgrid { grid-template-columns: 1fr 1fr 1fr } }
div.field { display: flex; flex-direction: column; gap: 6px }

/* Editing details in place */
.editform { display: flex; flex-direction: column; gap: 14px }
.edgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px }
.edgrid .field.wide { grid-column: 1 / -1 }
.edgrid input, .edgrid select, .edgrid textarea { height: 36px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 10px; font: inherit; color: var(--ink); background: var(--surface); width: 100%; min-width: 0 }
.edgrid textarea { height: auto; padding: 8px 10px; resize: vertical }
.edgrid :disabled { background: var(--soft); color: var(--faint); border-color: var(--line) }
.edgrid .lock, .edgrid .hint { font-size: 13px; font-weight: 400; color: var(--muted) }
.edgrid .lock { color: var(--amber-text) }
.editform .actions { justify-content: flex-start }
[data-field] { cursor: default }
.hist .rowline { padding: 10px 0 }
@media (max-width: 760px) { .edgrid { grid-template-columns: 1fr } }

.emrows { display: flex; flex-direction: column; border-top: 1px solid var(--line-2) }
.emrow { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2) }
.emrow .addr { overflow-wrap: anywhere }
.emopts { display: flex; flex-wrap: wrap; gap: 4px 18px }
.emrow select, .emadd input, .emadd select { height: 36px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); min-width: 0 }
.emacts { display: flex; gap: 4px; align-items: center; justify-content: flex-end; min-width: 150px }
.emadd { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 10px; padding-top: 14px }
dialog:has(.emrows) { width: min(680px, calc(100vw - 32px)) }
@media (max-width: 600px) { .emrow, .emadd { grid-template-columns: 1fr } .emacts { justify-content: flex-start } }

/* Report filters: cards, the edit panel, field search, cross filters */
.flist { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.fcards { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.fcard { display: flex; align-items: flex-start; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 0; transition: border-color .12s }
.fcard:hover { border-color: var(--blue-2) }
.fcard.bad { border-color: var(--amber); background: #FFFBEB }
.fcard.gone { opacity: .7; padding-left: 12px }
.fcard .x { flex: 0 0 auto; margin: 4px 4px 0 0 }
.fbody { flex: 1 1 auto; display: flex; gap: 10px; align-items: flex-start; min-width: 0; border: 0; background: transparent; padding: 9px 4px 9px 12px; text-align: left; color: var(--ink); border-radius: 10px }
.fnum { flex: 0 0 22px; height: 22px; margin-top: 1px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center }
.ftext { display: flex; flex-direction: column; min-width: 0 }
.fname { font-size: 13px; color: var(--faint) }
.fval { font-size: 14px; font-weight: 500; color: var(--blue-dark); overflow-wrap: anywhere }
.fsub { font-size: 13px; color: var(--faint) }
.fadd input { height: 36px; width: 100%; border: 1px dashed #94A3B8; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink) }
.fadd input:focus { border-style: solid; border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-1) }
.flist .match { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--faint) }
.flist .match .segs { align-self: flex-start }
.flist .logic { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--faint) }
.flist .logic input { height: 36px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 10px; font-family: ui-monospace, "Geist Mono", monospace; font-size: 14px; letter-spacing: .02em; color: var(--ink) }
.flist .logic .hint { font-size: 13px }
.xlist { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line-2) }
.xlist:empty { display: none }
.xcard { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: var(--soft) }
.xtop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px }
.xtop b { font-weight: 600; flex: 1 1 auto }
.xtop select { width: auto !important; height: 30px !important; padding: 0 6px !important; font-weight: 600 }
.xwhere { font-size: 13px; color: var(--faint) }
.xcard .fadd input { height: 34px; background: var(--surface) }
/* View mode: the same cards in a row */
.flist.bar > .fcards { flex-direction: row; flex-wrap: wrap; align-items: stretch }
.flist.bar .fcard { max-width: 320px }
.flist.bar .fadd input { width: 190px; height: 100% ; min-height: 36px }
.flist.bar .match, .flist.bar .logic { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap }
.flist.bar .logic input { width: 320px; max-width: 100% }
.flist.bar .xlist { flex-direction: row; flex-wrap: wrap; align-items: flex-start }
.flist.bar .xcard { flex: 0 1 340px }
.filterbar #filters { padding-top: 12px }
/* Field search */
.fmenu { position: fixed; z-index: 60; max-height: min(360px, calc(100vh - 16px)); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 40px rgba(15,23,42,.18); padding: 6px }
.fmenu button { display: block; width: 100%; border: 0; background: transparent; text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 14px; color: var(--ink) }
.fmenu button:hover, .fmenu button.on { background: var(--blue-1) }
.fm-group { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--faint) }
.fm-group:first-child { padding-top: 4px }
.fm-none { margin: 0; padding: 10px; color: var(--faint); font-size: 14px }
/* The edit panel */
.fpop { position: fixed; z-index: 55; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(15,23,42,.22); display: flex; flex-direction: column }
.fp-head { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 10px 4px 18px }
.fp-head b { font-size: 16px }
.fp-body { display: flex; flex-direction: column; gap: 6px; padding: 6px 18px 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain }
.fp-body > * { flex-shrink: 0 }
.fp-label { font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 6px }
.fp-in { height: 36px; width: 100%; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); min-width: 0 }
.fp-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-1) }
.fp-field::placeholder { color: var(--ink); opacity: 1 }
.fp-field:focus::placeholder { color: var(--faint) }
.fp-of { font-size: 12px; color: var(--faint); margin-top: -2px }
.fp-val { display: flex; flex-direction: column; gap: 6px }
.fp-read { margin: 0; font-size: 14px; color: var(--blue-dark); font-weight: 500; min-height: 21px }
.fp-read.bad { color: var(--amber-text); font-weight: 400 }
.fp-hint { margin: 0; font-size: 13px; color: var(--faint) }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px }
.fp-chips button { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); font-size: 13px; color: var(--ink-2) }
.fp-chips button:hover { border-color: var(--blue-2); background: var(--blue-1) }
.fp-checks { display: flex; flex-direction: column; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px }
.fp-checks label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; font-size: 14px; cursor: pointer }
.fp-checks label:hover { background: var(--soft) }
.fp-checks input { width: 16px; height: 16px }
.fp-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center }
.fpop .error { margin: 4px 0 0; font-size: 14px }
.fp-foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; position: sticky; bottom: 0; background: var(--surface) }
.fp-foot .btn { min-height: 36px }

/* Report pages: denser than the rest of the app, since they are mostly numbers */
.rcontent section > .sechead { padding-bottom: 8px }
.rcontent table.data .nw { white-space: nowrap }
.rcontent .resultcol { gap: 14px }
.rcontent .filterbar { padding: 12px 16px }

.builder { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start }
.builder.no-left { grid-template-columns: 40px minmax(0, 1fr) }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto }
.ptop { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 6px 0 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2 }
.ptabs { display: flex; gap: 4px }
.ptabs button { border: 0; background: transparent; padding: 8px 8px 9px; font-size: 14px; font-weight: 500; color: var(--faint); border-bottom: 2px solid transparent; margin-bottom: -1px }
.ptabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--blue) }
.pcollapse { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--faint); padding: 0 }
.pcollapse span { display: none }
.pcollapse:hover { background: var(--soft); color: var(--ink) }
.pbody { display: flex; flex-direction: column; gap: 16px; padding: 14px 14px 18px; min-width: 0 }
.builder.no-left .panel { overflow: hidden }
.builder.no-left .ptabs, .builder.no-left .pbody { display: none }
.builder.no-left .ptop { flex-direction: column; border: 0; padding: 6px 4px }
.builder.no-left .pcollapse { width: 30px; height: auto; flex-direction: column; gap: 10px; padding: 8px 0 }
.builder.no-left .pcollapse span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; font-weight: 600 }
.builder.no-left .pcollapse svg { transform: scaleX(-1) }
.pgroup { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.plabel { font-size: 12px; font-weight: 600; color: var(--faint); text-transform: none }
.panel .hint { margin: 0; font-size: 13px; color: var(--faint) }
.panel select, .panel input:not([type=checkbox]) { height: 34px; width: 100%; min-width: 0; border: 1px solid #CBD5E1; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface) }
.panel .segs { align-self: flex-start }
.panel .segs button { height: 28px; padding: 0 11px; font-size: 13px }
.panel .fadd input { height: 34px }
.panel .fbody { padding: 7px 4px 7px 10px }
.grow.sub { padding-left: 12px }
.grow select.narrow { flex: 0 0 auto; width: auto }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px }
.plist li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 1px 0 1px 10px; border-radius: 6px; background: var(--soft); font-size: 13.5px; min-height: 30px }
.plist li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.plist .x { width: 26px; height: 26px; font-size: 16px }
.pact { display: flex; flex: 0 0 auto }
.rtool { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 34px }
.segs.small { padding: 2px }
.segs.small button { height: 28px; padding: 0 11px; font-size: 13px }
.rprev { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; max-width: 72ch; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.dsp-pick .ctx > label:first-child { color: var(--muted) }
.rtoggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer }
.rtoggle input { appearance: none; width: 30px; height: 18px; border-radius: 999px; background: #CBD5E1; position: relative; margin: 0; cursor: pointer; transition: background .15s }
.rtoggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s }
.rtoggle input:checked { background: var(--blue) }
.rtoggle input:checked::after { left: 14px }
.rsum { margin-left: auto; font-size: 13.5px; color: var(--muted); text-align: right }
.rsum b { color: var(--ink); font-weight: 600 }
.rsum .dot { padding: 0 8px; color: #CBD5E1 }
table.data.matrix th, table.data.matrix td { white-space: nowrap }
table.data.matrix tbody th { text-align: left; font-weight: 500; background: transparent; color: var(--ink); border-bottom: 1px solid var(--line-2) }
table.data.matrix .tot, table.data.matrix tr.grand td, table.data.matrix tr.grand th { font-weight: 600; background: #F8FAFC }
table.data.matrix td.on { background: #EEF3FF }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: inherit }
.linkish:hover { color: var(--blue-dark); text-decoration: underline }
@media (max-width: 900px) { .builder, .builder.no-left { grid-template-columns: 1fr } .panel { position: static; max-height: none } .rsum { margin-left: 0; justify-content: flex-start } }
.rpick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted) }
.rpick select { height: 30px; border: 1px solid #CBD5E1; border-radius: 8px; padding: 0 6px; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); max-width: 200px }
/* Builder lists: groups, totals, columns, sort */
.plist li.fixed { background: transparent; color: var(--muted); padding-left: 10px; border: 1px dashed var(--line) }
.plist .pact { display: flex; align-items: center; gap: 2px; flex: none }
.plist select.mini { height: 26px; font-size: 12.5px; padding: 0 22px 0 8px; border-radius: 6px; width: auto }
.plist .linkbtn.small { font-size: 12.5px; padding: 0 8px }
th .unit { font-weight: 400; color: var(--faint) }
/* Grouped report table: groups as columns on the left, Salesforce style */
table.data.rtable th, table.data.rtable td { border-bottom: 1px solid var(--line) }
table.data.rtable .gcell { text-align: left; vertical-align: top; font-weight: 600; background: #F8FAFC; border-right: 1px solid var(--line); white-space: nowrap }
table.data.rtable th.gcol { border-right: 1px solid var(--line) }
table.data.rtable .gn { font-weight: 400; color: var(--faint) }
table.data.rtable tr.sub td, table.data.rtable tr.sub th { background: #F1F5F9; font-weight: 600 }
table.data.rtable tr.sub1 td, table.data.rtable tr.sub1 th { background: #E8EEF6 }
table.data.rtable tr.grand td, table.data.rtable tr.grand th { background: var(--blue-1); font-weight: 700; border-top: 2px solid var(--line) }
table.data.rtable thead th:first-child, table.data.rtable:not(.grouped) td:first-child, table.data.rtable .gcell { padding-left: 16px }
/* Chart hover text */
.charttip { position: fixed; z-index: 70; max-width: 280px; padding: 8px 11px; background: var(--ink); color: #fff; border-radius: 8px; font-size: 13px; line-height: 1.45; pointer-events: none; box-shadow: 0 10px 24px rgba(15,23,42,.25) }
.charttip b { display: block; font-weight: 600 }
.charttip div { color: #CBD5E1; font-variant-numeric: tabular-nums }
.squares i { cursor: pointer; transition: opacity .12s }
.squares i.dim { opacity: .25 }
.vcols.nonum .vcol .num { visibility: hidden }
.vcols.nolab .vcol .lab { font-size: 0; padding-top: 0 }
.chartnote { margin: 10px 0 0 }
.plist li.gopts { background: transparent; padding: 2px 0 8px 10px; flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; font-size: 12.5px; color: var(--muted) }
.plist li.gopts label { display: flex; align-items: center; gap: 6px }
.plist li.gopts label.wide { flex: 1 1 100% }
.plist li.gopts input { height: 26px; font-size: 12.5px; padding: 0 8px; border-radius: 6px; flex: 1; min-width: 0 }
.fxrow { display: flex; flex-wrap: wrap; gap: 10px 24px }
.fxrow label { display: flex; align-items: center; gap: 8px; font-weight: 400 }
.fxrow input { width: 110px }
.chartempty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.chartempty p { margin: 0; color: var(--muted) }
/* Columns chart: left axis, a plot that scrolls sideways when there are many groups, optional line on a right axis */
.cchart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: start }
.cchart.twoaxis { grid-template-columns: auto minmax(0, 1fr) auto }
.cchart .axis { height: var(--h); display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; margin-top: -7px; padding-bottom: 0 }
.cchart .axis span { line-height: 14px }
.cchart .axis.r { text-align: left }
.cscroll { overflow-x: auto; min-width: 0; padding-bottom: 4px }
.cinner { position: relative }
.cchart .plot { position: relative; height: var(--h); border-bottom: 1px solid var(--line); background: linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat }
.cchart .vcols { height: 100%; display: grid; gap: 4px; align-items: end }
.cchart .vcol { height: 100%; padding: 0; justify-content: flex-end; border-radius: 4px 4px 0 0 }
.cchart .vcol .seg { margin: 0 1px; min-height: 0; width: 100%; max-width: 160px; align-self: center }
.cchart.pair .vcol { flex-direction: row; align-items: flex-end; justify-content: center; gap: 4px }
.cchart.pair .vcol .seg { flex: 1 1 0; width: auto; max-width: 64px; margin: 0; align-self: flex-end }
.cchart.pair .vcol .seg.two i, .legend .pkey { background: #F59E0B }
.cchart .vcol:hover .seg { filter: brightness(1.12) }
.lineover { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none }
.lineover polyline { fill: none; stroke: #F59E0B; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round }
.ldot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #F59E0B; border: 2px solid var(--surface); cursor: pointer }
.legend .lkey { background: #F59E0B; height: 3px; border-radius: 2px; width: 14px }
.xlabels { display: grid; gap: 4px; padding-top: 6px; font-size: 12px; color: var(--muted) }
.xlabels span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; min-width: 0 }
.cscroll.fit { overflow: visible; padding-bottom: 0 }
.xlabels.fit span { overflow: visible; min-width: max-content; justify-self: center }
.xlabels.tilt { height: 96px; align-items: start }
.xlabels.tilt span { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; max-height: 92px; justify-self: center }
/* Starting a report: pick what it is about */
.kindgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px }
.kindcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden }
.kindcard:hover { border-color: var(--blue-3) }
.kmain { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 16px; color: var(--ink); flex: 1 }
.kmain:hover { text-decoration: none; color: var(--ink); background: #F8FAFF }
.kmain b { font-size: 18px }
.kmain .krow { font-weight: 500 }
.kmain .kgo { margin-top: 6px; color: var(--blue); font-weight: 600; font-size: 14px }
.ktpl { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px 14px; border-top: 1px solid var(--line); font-size: 14px }
.ktpl .meta { flex: 1 1 100% }
.rabout { margin: 6px 0 0; color: var(--muted); font-size: 14px }
.rabout b { color: var(--ink); font-weight: 600 }
.rkind { font-size: 12.5px; font-weight: 600; color: var(--blue) }
.kinds { margin-bottom: 12px }

/* Dashboards: a 12-column grid. Each element spans its own width and rows; edit mode adds a handle, a corner and the panel. */
.dwrap.editing { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start }
.dgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--row); gap: var(--gap); min-width: 0 }
.dwrap.editing .dgrid { background: repeating-linear-gradient(90deg, var(--line-2) 0, var(--line-2) calc((100% - 11 * var(--gap)) / 12), transparent calc((100% - 11 * var(--gap)) / 12), transparent calc((100% - 11 * var(--gap)) / 12 + var(--gap))); border-radius: var(--radius); min-height: 200px }
.dempty { grid-column: 1 / -1; grid-row: span 2; display: flex; align-items: center; justify-content: center; color: var(--muted); border: 1px dashed var(--blue-2); border-radius: var(--radius); background: var(--surface) }
.del { position: relative; min-width: 0; min-height: 0; display: flex }
.del .dinner { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px }
.del.chart .dinner, .del.number .dinner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; overflow: hidden }
.del .dhead { display: flex; flex-direction: column; gap: 0 }
.del .dtitle { color: var(--ink); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.del .dhead .meta { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.del .dfig { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.del .dfig b { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1 }
.del .dfig span { font-size: 13px; color: var(--faint) }
.del .dbody { flex: 1; min-height: 0; overflow: auto }
.del .dbody .card { border: 0; box-shadow: none; background: none }
.del .dbody .hbar { grid-template-columns: minmax(70px, 140px) minmax(0, 1fr) 64px }
.del .dbody .legend { padding-top: 8px }
.del.number .dinner { container-type: inline-size }
.del .dnum { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0 }
.del .dnum b { font-size: clamp(22px, 14cqi, 48px); white-space: nowrap; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1 }
.del .dnum .meta { font-size: 13px }
.del.text .dinner { justify-content: flex-end; padding: 0 2px 6px; border-bottom: 2px solid var(--ink) }
.del .dtext h2 { font-size: 20px }
.del .dtext p { margin: 2px 0 0; color: var(--muted); white-space: pre-line; overflow: hidden }
.dwrap.editing .del { cursor: pointer }
.dwrap.editing .del .dinner { outline: 1px dashed transparent; outline-offset: 3px }
.dwrap.editing .del:hover .dinner { outline-color: var(--blue-2) }
.dwrap.editing .del.sel .dinner { outline: 2px solid var(--blue); outline-offset: 3px }
.dwrap.editing .del.text .dinner { background: var(--surface); padding: 6px 10px; border-radius: 8px 8px 0 0 }
.del.dragging { opacity: .35 }
.del.dropbefore::before, .del.dropafter::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--blue); z-index: 3 }
.del.dropbefore::before { left: calc(var(--gap) / -2 - 2px) } .del.dropafter::after { right: calc(var(--gap) / -2 - 2px) }
.del.text.dropbefore::before, .del.text.dropafter::after { left: 0; right: 0; width: auto; height: 4px }
.del.text.dropbefore::before { top: calc(var(--gap) / -2 - 2px); bottom: auto } .del.text.dropafter::after { bottom: calc(var(--gap) / -2 - 2px); top: auto }
.dmove { position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--faint); cursor: grab; padding: 0 }
.dmove:active { cursor: grabbing }
.dx { position: absolute; top: 6px; right: 38px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--faint); cursor: pointer; padding: 0; font-size: 18px; line-height: 1 }
.dx:hover, .dx:focus-visible { color: var(--red, #B42318); border-color: currentColor }
.dsize { position: absolute; right: -4px; bottom: -4px; z-index: 2; width: 16px; height: 16px; cursor: nwse-resize; border-right: 3px solid var(--blue-3); border-bottom: 3px solid var(--blue-3); border-radius: 0 0 5px 0; touch-action: none }
.del:not(.sel):not(:hover) .dsize { border-color: var(--line) }
.dbadge { position: absolute; right: 14px; bottom: 10px; z-index: 3; background: var(--navy); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums }
.del.resizing .dinner { outline: 2px solid var(--blue) !important; outline-offset: 3px }
.dpanel { position: sticky; top: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 32px); overflow: auto }
.dpanel h3 { font-size: 14px; margin-top: 4px }
.dpanel .phead { display: flex; justify-content: space-between; align-items: baseline }
.dpanel .prow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.dpanel .pfoot { border-top: 1px solid var(--line); padding-top: 12px }
.dpanel .pcheck { display: flex; gap: 8px; align-items: center }
.dpanel textarea { font: inherit; border: 1px solid #94A3B8; border-radius: 8px; padding: 8px 10px; resize: vertical }
.dadd { display: flex; flex-wrap: wrap; gap: 8px }
.pickbtn { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 42px; border: 1px solid #94A3B8; border-radius: 8px; background: var(--surface); padding: 0 12px; text-align: left; color: var(--ink) }
.pickbtn span:first-child { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.btn.danger { color: #B42318 }
.btn[data-dirty]::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-left: 8px; vertical-align: middle }
.rpicklist { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 14px; margin-top: 4px }
.rpg { display: flex; flex-direction: column; gap: 4px }
.rpg h3 { font-size: 13px; color: var(--faint); font-weight: 600 }
.rpg button { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 9px 12px; color: var(--ink) }
.rpg button:hover { border-color: var(--blue-3) }
.plainlist { margin: 0; padding-left: 18px }
@media (max-width: 900px) {
  .dwrap.editing { grid-template-columns: 1fr }
  .dpanel { position: static; max-height: none }
  .dgrid { grid-template-columns: 1fr; grid-auto-rows: auto }
  .dgrid .del { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: calc(var(--row) * 1.2) }
  .dgrid .del.chart { height: 340px } .dgrid .del.number { height: 128px }
  .dwrap.editing .dgrid { background: none }
  .dsize { display: none }
}
.field[hidden], .dpanel [hidden] { display: none }

/* Campaigns */
.notice { background: var(--blue-1); color: var(--navy); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; line-height: 1.5 }
.notice.warn { background: var(--amber-bg); color: var(--amber-ink) }
.clickrows tbody tr { cursor: pointer } .clickrows tbody tr:hover td { background: var(--soft) }
.h1input { font: inherit; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; border: 1px solid transparent; border-radius: 8px; padding: 0 6px; margin-left: -7px; width: 100%; max-width: 720px; background: transparent; color: var(--ink) }
.h1input:hover { border-color: var(--line) } .h1input:focus { border-color: var(--blue-3); outline: none; background: var(--surface) }
.ctabs { display: flex; gap: 4px; margin-top: 14px; border-bottom: 1px solid var(--line); margin-bottom: -1px }
.ctabs button { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent }
.ctabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue) }
.ccols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start }
.cedit { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.cedit .card.pad { display: flex; flex-direction: column; gap: 10px }
.cedit .sechead { margin: 0 }
.cedit .locked { pointer-events: none; opacity: .8 }
.csum { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 32px); overflow: auto }
.bigcount { display: flex; flex-direction: column }
.bigcount b { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums }
.bigcount span { color: var(--muted) }
.funnel { display: flex; flex-direction: column; border-top: 1px solid var(--line) }
.funnel > * { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border: 0; border-bottom: 1px solid var(--line-2); background: none; font: inherit; color: var(--ink); text-align: left }
.funnel b { font-variant-numeric: tabular-nums }
.funnel .out { color: var(--muted); cursor: pointer } .funnel .out:hover span { text-decoration: underline }
.funnel .eq { font-weight: 700; border-bottom: 0 }
.asearch { height: 38px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 12px; font: inherit }
.plist2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.plist2 li { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-2) }
.plist2 .pn { min-width: 0 } .plist2 .pn .meta { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis }
.plist2 .x, .skip .x, .bhead .x { border: 0; background: none; width: 28px; height: 28px; border-radius: 6px; color: var(--muted); font-size: 18px; line-height: 1; flex: none }
.plist2 .x:hover, .skip .x:hover, .bhead .x:hover { background: var(--soft) }
.prow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.rowset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.rowset legend { font-weight: 600; margin-bottom: 4px; padding: 0 }
.rowset label, .pcheck { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap }
.skips .skip { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px }
.skips select { height: 34px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 8px; font: inherit; max-width: 280px }
.addperson input[type=search] { height: 40px }
.kindpick { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.kindpick legend { font-weight: 600; margin-bottom: 6px; padding: 0 }
.kindpick label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer }
.kindpick label:has(input:checked) { border-color: var(--blue); background: var(--blue-1) }
.kindpick label > span { display: flex; flex-direction: column }
.ecols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); gap: 20px; align-items: start }
.estack { display: flex; flex-direction: column; gap: 10px }
.estack input:not([type]), .estack input[type=email], .bcard input, .bcard textarea, .estack select { height: 40px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 12px; font: inherit; width: 100%; background: var(--surface) }
.bcard textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5 }
.estack input[type=color] { height: 40px; width: 64px; border: 1px solid #94A3B8; border-radius: 8px; padding: 2px; background: var(--surface) }
.mergebar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: relative }
.mergebar .chip { cursor: pointer }
.linkbar { display: flex; flex-direction: column; align-items: flex-start; gap: 6px }
.linkform { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100% }
.linkform input { flex: 1 1 160px; min-width: 0 }
.linkform p { flex-basis: 100%; margin: 0 }
.eblocks { display: flex; flex-direction: column; gap: 10px }
.bcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px }
.bhead { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--faint) }
.btools { display: flex; gap: 2px } .bhead .x:disabled { opacity: .3 }
.bhead .bname { display: inline-flex; align-items: center; gap: 6px }
.bhead .grip { cursor: grab; color: var(--muted); font-size: 12px; letter-spacing: -2px; padding: 8px 8px 8px 0; user-select: none }
.bhead .grip:active { cursor: grabbing }
.bcard.dragging { opacity: .4 }
.bcard.dropbefore { box-shadow: 0 -3px 0 var(--blue) }
.bcard.dropafter { box-shadow: 0 3px 0 var(--blue) }
.bdiv { border: 0; border-top: 1px solid var(--line); margin: 6px 0 }
.addblock { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.epane { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px }
.ephead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px }
.eframe { background: #F1F5F9; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; justify-content: center; padding: 0 }
.eframe iframe { width: 100%; height: min(70vh, 760px); border: 0; background: #fff; display: block }
.eframe.phone { padding: 16px 0; background: var(--navy) } .eframe.phone iframe { width: 375px; max-width: 100%; border-radius: 18px; height: min(66vh, 720px) }
.sendgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start }
.sendgrid .card.pad { display: flex; flex-direction: column; gap: 14px }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.checks li { display: flex; gap: 10px; align-items: flex-start }
.checks .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; background: var(--blue-1); color: var(--blue-dark) }
.checks li.no .tick { background: var(--amber-bg); color: var(--amber-ink) }
.checks .linkish { text-align: left }
.sendrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.sendrow .btn.primary { min-height: 42px; padding: 4px 20px; font-weight: 600 }
.field.inline { flex-direction: row; align-items: center; gap: 8px }
.field.inline input { height: 40px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 10px; font: inherit }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--muted) }
.rfig { margin-bottom: 18px }
.rcols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 8px }
.why { list-style: none; margin: 0 0 10px; padding: 0 }
.why li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line-2) }
.segs.wrap { flex-wrap: wrap; border-radius: 14px } .segs .n { opacity: .7; font-variant-numeric: tabular-nums; margin-left: 2px }
.followbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 } .followbar:empty { display: none }
@media (max-width: 1000px) { .ccols, .ecols, .sendgrid, .rcols { grid-template-columns: 1fr } .csum, .epane { position: static; max-height: none } .prow2 { grid-template-columns: 1fr } }
div.field { display: flex; flex-direction: column; gap: 6px; font-weight: 500 } div.field .segs { align-self: flex-start }
.ccols label.field select, .skips select { max-width: 100% }
.pcheck[hidden], label[hidden] { display: none !important }

/* Recommendations */
.reclist { display: flex; flex-direction: column; container-type: inline-size }
/* Home: recommendations take two thirds, To do runs down the side. */
.homecols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start }
@media (max-width: 1000px) { .homecols { grid-template-columns: minmax(0, 1fr) } }
@container (max-width: 640px) { .rec { flex-direction: column; gap: 10px } .ract { max-width: none; justify-content: flex-start } }
.reclist.card { padding: 0 }
.rec { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--line-2); transition: opacity .25s }
.rec:last-child { border-bottom: 0 }
.rec.done { opacity: .35; pointer-events: none }
.rmain { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.rkindl { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px }
.rkindl::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor }
.rkindl.blue { color: var(--blue) } .rkindl.green { color: #15803D } .rkindl.amber { color: var(--amber-text) } .rkindl.grey { color: var(--faint) }
.rtitle { font-weight: 600; font-size: 15px } .rtitle a { color: var(--ink) }
.rwhy { margin: 4px 0 0; padding: 0 0 0 16px; color: var(--muted); display: flex; flex-direction: column; gap: 2px }
.ract { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; flex: none; max-width: 46% }
.recpanel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); margin-bottom: 20px; overflow: hidden }
.recpanel h2 { font-size: 15px; margin-bottom: 8px }
.rsee { padding: 16px 20px; background: var(--soft); border-right: 1px solid var(--line) }
.rsee ul { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2) }
.rnext { padding: 16px 0 6px } .rnext h2 { padding: 0 18px } .rnext > .meta { padding: 0 18px }
.rnext .rec { padding: 10px 18px }
dialog.wide { width: min(940px, calc(100vw - 32px)) }
.chaser { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px }
.cform { display: flex; flex-direction: column; gap: 10px }
.cform textarea { height: auto !important; line-height: 1.55 }
.tgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }
.cline { display: flex; gap: 8px; align-items: baseline } .cline .meta { width: 40px }
.cctx { background: var(--soft); border-radius: 10px; padding: 14px; font-size: 14px; display: flex; flex-direction: column; gap: 2px; max-height: 470px; overflow: auto }
.cquote { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); white-space: pre-line; font-size: 13px }
@media (max-width: 860px) { .rec { flex-direction: column } .ract { max-width: none; justify-content: flex-start } .recpanel, .chaser { grid-template-columns: 1fr } .rsee { border-right: 0; border-bottom: 1px solid var(--line) } }

/* Recommendations page */
.recfilters { display: flex; flex-direction: column; gap: 6px }
.recfilters .chip { height: 30px; padding: 0 12px; gap: 6px }
.recfilters .chip b { font-weight: 600; color: var(--muted) }
.recfilters .chip.small { height: 26px; font-size: 12.5px; padding: 0 10px }
.chip.on { background: var(--blue-1); border-color: var(--blue-2); color: var(--blue-dark) }
.chip.on b { color: var(--blue-dark) }
.segbtns { display: flex; gap: 4px }
.rowner { font-weight: 500; color: var(--muted); margin-left: 4px }
.rwho { font-weight: 600; color: var(--ink) }

/* You: mailbox */
.content.narrow { max-width: 760px }
.mailbox h2 { margin: 0 0 10px }
.mailbox h3 { margin: 20px 0 6px; font-size: 15px }
.mailbox p { margin: 0 0 10px; max-width: 65ch }
.mbrow { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap }
.mbbtns { display: flex; gap: 8px; flex-wrap: wrap }
.mbfrom { border: 0; padding: 0; margin: 4px 0 14px; display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center }
.mbfrom legend { float: left; margin-right: 6px; font-weight: 600; font-size: 14px }
.mbfrom label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px }
.mbalias { display: flex; gap: 8px; flex-wrap: wrap; max-width: 560px }

.wslist { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 14px }
.wslist li > div { margin-top: 8px }
.wsperson input { width: min(260px, 100%) }
.mbalias input { flex: 1 1 240px; min-width: 0 }
.mailbox ul.plain { margin: 0; padding-left: 18px; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px }
a.avatar { text-decoration: none }
.recpanel.solo { grid-template-columns: 1fr }
.recpanel.solo .rsee { border-right: 0 }
.recpanel.solo .rsee ul { flex-direction: row; flex-wrap: wrap; gap: 6px 28px }

/* Insights */
.insights .found { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.insights .found li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 3px solid var(--blue-2); max-width: 75ch }
.insights .learned .sechead { padding-bottom: 12px }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px }
.lfind { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px }
.lfind .lsay { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--ink); text-wrap: pretty }
.lbars { display: flex; flex-direction: column; gap: 8px; margin-top: auto }
.lbar { display: grid; grid-template-columns: minmax(0, 11.5em) minmax(0, 1fr) 3em; gap: 10px; align-items: center; font-size: 14px; cursor: default }
.lbar .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) }
.lbar .track { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden }
.lbar .track i { display: block; height: 100%; border-radius: 5px; background: var(--blue-dark) }
.lbar.lo .track i { background: var(--blue-2) }
.lbar b { text-align: right; font-variant-numeric: tabular-nums }
.ltrust { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted) }
.ltrust i { width: 8px; height: 8px; border-radius: 50% }
.ltrust.solid i { background: var(--blue-dark) } .ltrust.fair i { background: var(--blue-2) } .ltrust.early i { background: var(--line); outline: 1px solid var(--faint) }
.igrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 20px }
.igrid .card h2 { font-size: 16px; margin: 0 0 4px }
.igrid .card > .meta { margin: 0 0 12px }
.insights .hbar { grid-template-columns: minmax(100px, 190px) minmax(0, 1fr) 80px; cursor: default }
.insights .hbar .track { display: block }

/* Engagement level and lead score */
.eng { font-weight: 600 }
.eng.high { color: #15803D } .eng.medium { color: var(--blue-dark) } .eng.low { color: var(--muted) } .eng.unknown { color: var(--faint) }
.engfig { position: relative; cursor: help; outline: none }
.engwhy { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 320px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(15,23,42,.16); font-size: 13.5px; color: var(--ink) }
.engwhy b { display: block; margin-bottom: 2px }
.engwhy ul { margin: 8px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; color: var(--ink-2) }
.engfig:hover .engwhy, .engfig:focus .engwhy, .engfig:focus-within .engwhy { display: block }

/* Meeting brief */
.brief { padding: 16px 20px; margin-bottom: 20px }
.bhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap }
.bhead h2 { margin: 0 }
.brief h3 { font-size: 14.5px; margin: 0 }
.braise { margin-top: 12px; padding: 10px 14px; background: var(--soft); border-radius: 8px }
.braise h3 { margin-bottom: 4px }
.brief ul { margin: 6px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2) }
.bgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px 24px; margin-top: 14px }
.bcol { min-width: 0 }
.brief .cquote { margin-top: 3px }
.mailbox + .mailbox { margin-top: 20px }
.dprev { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft) }
.dprev p { margin: 4px 0 0 }
.dprev ul.plain { gap: 6px }

/* Compare and merge */
.merge { display: flex; flex-direction: column; gap: 10px; overflow-x: auto }
.mtable { width: 100%; table-layout: fixed }
.mtable th:first-child { width: 26%; text-align: left; font-weight: 500 }
.mtable thead th { vertical-align: top; padding-bottom: 10px }
.mtable td, .mtable tbody th { vertical-align: top; padding: 9px 10px; overflow-wrap: anywhere }
.mkeep, .mpick { display: flex; gap: 8px; align-items: flex-start; cursor: pointer }
.mkeep input, .mpick input { margin-top: 3px }

/* Deal health: the likelihood figure and its breakdown on hover. */
.hfig { position: relative; outline: none; cursor: default }
.hfig .value .pill { vertical-align: middle; font-size: 12px }
.hpop { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: min(420px, 86vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(15, 23, 42, .14); padding: 14px 16px; font-size: 14px; color: var(--ink) }
.hfig:hover .hpop, .hfig:focus-within .hpop, .hfig:focus .hpop { display: block }
.hpop ul { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px }
.hpop li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline }
.hpop li b { font-variant-numeric: tabular-nums; white-space: nowrap }
.hpop li b.down { color: var(--amber-text) } .hpop li b.up { color: var(--blue-dark) }
.hpop p { margin: 0 }

/* What changed: the week's summary line and its lists. */
.wkctl { flex-wrap: wrap; align-items: center }
.wkctl select { height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; font: inherit; background: var(--surface); color: var(--ink) }
.wksum { font-size: 17px; max-width: 70ch; margin: 0 0 20px; color: var(--ink-2) }
.igrid .list .rowline { gap: 16px; align-items: flex-start }
.igrid .list .r { text-align: right; white-space: nowrap }
.igrid .back { color: var(--amber-text); font-weight: 600 }
.late { color: var(--amber-text); font-weight: 600 }
.nobody { color: var(--amber-text) }

.authlink { font-size: 13px; color: var(--ink-2); text-align: center }

.reltools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 12px }
.reltools input[type=search], .reltools select { height: 36px; min-width: 0; max-width: 280px; flex: 1 1 200px }
.sortbtn { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap }
.more a { font-weight: 500 }

/* Company cards (Companies list, card and compact views) */
.cardgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
@media (max-width: 1100px) { .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 700px) { .cardgrid { grid-template-columns: minmax(0, 1fr) } }
.ccard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.ccard:hover { border-color: var(--blue-2) }
.ccard.compact { padding: 14px 16px; gap: 4px; font-size: 13px }
.cend { display: flex; gap: 8px; align-items: center; flex: none }
.cstar { background: none; border: 0; padding: 0 2px; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer }
.cstar:hover { color: var(--amber) }
.cstar[aria-pressed="true"] { color: var(--amber) }
.ccard .ctop { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between }
.ccard .cname { display: block; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ccard.compact .cname { font-size: 15px; min-width: 0 }
.ccard .csub { font-size: 13px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ccard .cfig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2) }
.ccard .cfig span, .ccard .cfig em { display: block; font-size: 12px; color: var(--faint); font-style: normal }
.ccard .cfig b { display: block; font-size: 16px; font-variant-numeric: tabular-nums }
.ccard .clines { display: flex; flex-direction: column; gap: 6px; font-size: 13px }
.ccard .clines > div { display: flex; gap: 8px }
.ccard .clines span:first-child { flex: 0 0 92px; color: var(--faint) }
.ccard .clines p { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ccard .nothing { background: var(--amber-bg); color: var(--amber-ink); border-radius: 999px; padding: 1px 10px; font-weight: 600; font-size: 12px }
.ccard .cbarhead { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); padding-bottom: 4px }
.ccard .cbars { display: flex; gap: 4px; height: 36px; align-items: flex-end }
.ccard .cbar { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end }
.ccard .cbar i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--blue-3) }
.ccard .cbar i.none { background: var(--line) }
.ccard .cbar:hover i { background: var(--blue-dark) }
.ccard .cbar .tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 2 }
.ccard .cbar:hover .tip { display: block }
.ccard .overdue { color: var(--amber-text); font-weight: 600 }

/* Deal cards and board */
.ccard .dval { text-align: right; flex: none }
.ccard .dval b { display: block; font-size: 18px; font-variant-numeric: tabular-nums }
.ccard .dval em { display: block; font-size: 12px; color: var(--faint); font-style: normal }
.ccard .dphase { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding-bottom: 6px }
.dtrack { display: flex; gap: 3px }
.dseg { position: relative; flex: 1 1 0; height: 8px; border-radius: 4px; background: var(--line) }
.dseg.done { background: var(--blue-3) } .dseg.now { background: var(--blue-dark) }
.dseg .tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 2 }
.dseg:hover .tip { display: block }
.dreqs { display: flex; flex-wrap: wrap; gap: 6px }
.reqok { background: var(--blue-1); color: var(--blue-dark); border-radius: 999px; padding: 1px 9px; font-weight: 600; font-size: 12px }
.dreqs .nothing { background: var(--amber-bg); color: var(--amber-ink); border-radius: 999px; padding: 1px 10px; font-weight: 600; font-size: 12px }
.dboard { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px }
.dcol { background: var(--line-2); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.dcolhead { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px; font-size: 13px }
.dmini { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.dmini.warn { box-shadow: inset 3px 0 0 var(--amber) }
.dmini .cname { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dmini .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.dmini .drow { display: flex; justify-content: space-between; padding-top: 4px }
.overdue { color: var(--amber-text); font-weight: 600 }
.dmini[draggable="true"] { cursor: grab }
.dmini.dragging { opacity: .45 }
.dcol.over { background: var(--blue-1); outline: 2px dashed var(--blue-3); outline-offset: -2px }
.boardnote ul { margin: 6px 0 8px; padding-left: 20px }
.boardnote a { font-weight: 600 }

.plist .gname { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0 }
.plist .gswap { flex: 1 1 auto; min-width: 0; height: 28px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); padding: 0 6px; margin-left: -6px; cursor: pointer }
.plist .gswap::placeholder { color: var(--ink); opacity: 1 }
.plist .gswap:hover { border-color: var(--line); background: var(--surface) }
.plist .gswap:focus { cursor: text; border-color: var(--blue); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--blue-1) }
.plist .gswap:focus::placeholder { color: var(--muted) }

.dealpick { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 8px; margin: 0; display: flex; flex-direction: column; gap: 4px }
.dealpick legend { font-weight: 600; padding: 0 4px; font-size: 14px }
.dealpick label { display: flex; gap: 10px; align-items: flex-start; padding: 5px 4px; border-radius: 6px; cursor: pointer; font-weight: 400 }
.dealpick label:hover { background: var(--soft) }
.dealpick input { margin-top: 3px; flex: none }

.teamcard { text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 8px }
.teamcard:hover { border-color: var(--blue-3) }
.teamcard .ctop { display: flex; justify-content: space-between; gap: 10px; align-items: center }
.teamtop { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13.5px }
.teamtop li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.teamtop .tkind { font-weight: 600; font-size: 12.5px }
.teamtop .tkind.amber { color: var(--amber-text) } .teamtop .tkind.blue { color: var(--blue) } .teamtop .tkind.green { color: #15803D } .teamtop .tkind.grey { color: var(--faint) }
.teamall { color: var(--blue); font-weight: 500; font-size: 13.5px }

.pill.kindpill { background: var(--blue-1); color: var(--blue-dark); font-weight: 600 }

.logogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px }
.logo { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column }
.logobox { height: 110px; display: flex; align-items: center; justify-content: center; padding: 16px; background: #fff; border-bottom: 1px solid var(--line) }
.logobox img { max-width: 100%; max-height: 78px; object-fit: contain }
.logo figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px }
.logo figcaption input:not([type]) { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink) }

.writebox { border: 1px solid var(--blue-2); background: var(--blue-1) }
.writebox textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; background: var(--surface); color: var(--ink) }
.colside { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.colside textarea, .colside input { width: 100% }
.upbtn { align-self: flex-start; margin-top: 6px; cursor: pointer }

.subfolders { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px }
.subfolders .chip.over { border-color: var(--blue); background: var(--blue-1) }
table.data.ctable th, table.data.ctable td { padding-left: 8px; padding-right: 8px }
table.data.ctable .nw { white-space: nowrap }
td.fpath { font-size: 13px; color: var(--ink-2) }
td.fpath > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 148px }

.blay, .elay { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px }
.blay summary, .elay summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 500 }
.blayrow { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding-top: 8px; font-size: 13px }
.blayrow label { display: inline-flex; gap: 6px; align-items: center }
.blayrow label.wide { flex: 1 1 240px }
.blayrow label.wide input { flex: 1; min-width: 0 }
.blayrow select, .blayrow input:not([type]) { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink) }
.blayrow input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none }

.stepnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 0 }

/* View as: who you're seeing SalesHead as, and the way back. */
.viewas { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted) }
.viewas select { height: 32px; font-size: 13px; max-width: 180px }
.viewing { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 24px; background: var(--amber-bg); color: var(--amber-text); border-bottom: 1px solid var(--line) }
@media (max-width: 700px) { .viewas span { display: none } }

/* Home: what needs you now, as cards. The colour along the top is the kind of thing it is. */
.rectiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px }
.rectiles .rec { flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--faint); border-radius: var(--radius); padding: 14px 16px }
.rectiles .rec.tone-green { border-top-color: #15803D } .rectiles .rec.tone-amber { border-top-color: var(--amber) } .rectiles .rec.tone-blue { border-top-color: var(--blue) }
.rectiles .rec { min-width: 0 } .rectiles .rmain { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere }
.rectiles .ract [data-a=snooze] { position: absolute; top: 8px; right: 40px; height: 30px }
.rectiles .rtitle { font-size: 15px; font-weight: 600; margin-top: 4px }
.rectiles .rwhy li:nth-child(n+3) { display: none }
.rectiles .ract { max-width: none; justify-content: flex-start; padding-top: 10px; border-top: 1px solid var(--line-2) }
.rectiles .rec { position: relative } .rectiles .rkindl { padding-right: 110px }
.rectiles .ract .x { position: absolute; top: 8px; right: 8px }

/* A long list folded behind one line: "4 more emails", "and 6 more people". */
details.fold > summary { cursor: pointer; list-style: none; color: var(--blue); font-size: 14px; padding: 8px 0 }
details.fold > summary::-webkit-details-marker { display: none }
details.fold[open] > summary { display: none }
.card.list > details.fold > summary { padding: 9px 0 }

/* Relationship: deals as bars against time, with Today marked. */
.relgrid { display: grid; grid-template-columns: minmax(160px, 230px) minmax(0, 1fr); gap: 8px 18px; align-items: center }
.relaxis { position: relative; height: 20px; font-size: 13px; color: var(--muted) }
.relaxis span { position: absolute; transform: translateX(-50%); white-space: nowrap }
.relaxis .today { font-weight: 700; color: var(--ink) }
.relbar { position: relative; height: 34px; border-left: 1px solid var(--line) }
.relbar span { position: absolute; top: 8px; height: 18px; border-radius: 4px; box-sizing: border-box }
.relbar i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink) }
.relgroup { font-size: 12.5px; font-weight: 600; color: var(--faint); text-transform: none; padding-top: 4px }
.rellegend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--line-2) }
@media (max-width: 700px) { .relgrid { grid-template-columns: minmax(0, 1fr) } .relgrid > div:empty { display: none } }

/* Open deals under "What SalesHead sees" on a company. */
.rseeopen { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line) }
.rseeopen h3 { font-size: 14px; margin: 0 0 2px }
.rseeopen .rowline { padding: 6px 0; gap: 10px } .rseeopen .rowline a { min-width: 0 } .rseeopen .rowline .meta { white-space: nowrap }
.rseeopen > a { display: inline-block; padding-top: 8px }

/* Home panels: two columns, wide panels across both */
.homegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start }
.homegrid .hpanel { min-width: 0 }
.homegrid .hpanel.wide { grid-column: 1 / -1 }
@media (max-width: 1000px) { .homegrid { grid-template-columns: minmax(0, 1fr) } }
.hday { padding: 10px 16px 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); text-transform: uppercase }
.hwho { display: inline-flex; gap: 8px; align-items: center }
.hwho select { height: 36px; max-width: 220px }
.hpick { display: grid; gap: 2px; margin: 4px 0 8px }
.hpickrow { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line) }
.hpickrow label { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-width: 0 }
.hpickrow .linkbtn[disabled] { opacity: .3 }

/* Reading a finished activity or an email */
.rread { display: flex; flex-direction: column; gap: 16px }
.rblock .label { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); padding-bottom: 4px }
.rtext, .ebody { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; max-width: 72ch }
.emailread { padding: 0; overflow: hidden }
.ehead { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--bg-soft, #F8FAFC) }
.ehead dt { color: var(--muted); font-size: 13px; padding-top: 1px }
.ehead dd { margin: 0; min-width: 0; overflow-wrap: anywhere }
.emailread .ebody { padding: 20px }
.equote { margin: 0 20px 20px; border-top: 1px solid var(--line); padding-top: 12px }
.equote .ebody { padding: 12px 0 0; color: var(--ink-2); font-size: 14px }
.etheme { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #EEF2F7; color: #334155 }
.etheme.inbound { background: #E3F4EA; color: #17663A }
.etheme.inbound_new { background: #D7F0E1; color: #0F5130; box-shadow: inset 0 0 0 1px #8FD1AA }
.etheme.outbound { background: #E8EEFF; color: #1A3FB8 }
.etheme.outreach { background: #DCE6FF; color: #12309A; box-shadow: inset 0 0 0 1px #A9C1FF }
.etheme.auto { background: #F1F1F1; color: #6B7280 }
.etheme.sm { height: 20px; padding: 0 8px; font-size: 11.5px; font-weight: 600; vertical-align: 2px; margin-left: 6px }

/* Campaign audience: which customers it's for */
.cstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0; padding: 12px 18px; border: 1px solid var(--line) }
.cstrip legend { float: left; font-weight: 600; margin-right: 6px; padding: 0 }
.cstrip label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }

/* Claude's review of an email */
.review { border-top: 1px solid var(--line); padding-top: 12px }
.rsug { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line) }
.rsug:first-of-type { border-top: 0 }
.mfpick { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 6px; width: min(340px, 100%); padding: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14) }
.mfpick input { width: 100% }
.mflist { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; margin-top: 6px }
.mflist .linkbtn { text-align: left; padding: 6px 8px; border-radius: 6px; display: flex; justify-content: space-between; gap: 8px; color: var(--ink); text-decoration: none }
.mflist .linkbtn:hover { background: var(--soft) }

/* Page tutorials (public/js/tour.js): the highlight lets clicks through; only the card takes them */
.tour { position: fixed; inset: 0; z-index: 200; pointer-events: none }
.tour-hole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(11, 31, 68, .45); outline: 2px solid #A9C1FF; transition: all .25s ease }
.tour-card { position: fixed; pointer-events: auto; background: var(--surface, #fff); color: var(--ink); border-radius: 12px; padding: 16px 18px 14px; box-shadow: 0 16px 40px rgba(11, 31, 68, .28); max-width: calc(100vw - 32px); transition: top .25s ease, left .25s ease }
.tour-card h3 { margin: 2px 0 6px; font-size: 16px }
.tour-card p { margin: 0 0 14px; line-height: 1.5; color: var(--ink-2) }
.tour-count { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
.tour-btns { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.tour-btns span { display: flex; gap: 6px }
.tourbtn { font-weight: 700; font-size: 15px; width: 36px }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card { transition: none } }

/* What to do next, on a campaign's results */
.nextcard { margin-bottom: 16px; border-left: 4px solid var(--blue) }
.nstep { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line) }
.nstep .btn { flex: none }
.nwide { flex: none; max-width: 40% }
.planrows { display: flex; flex-direction: column; gap: 8px }
.planrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.planrow label { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap }
.planrow input[type=number] { width: 56px }
.childrow td { background: var(--soft) }

/* Settings buttons, the same everywhere: New sits at the right of its section heading (and as a dashed row at the
   foot of a list), retire and remove are outlined in red, Save sits bottom right with Cancel or Test beside it. */
.setbody .btn { white-space: nowrap }
.btn.danger { border-color: #E7B4AE; background: var(--surface); color: #B42318 }
.btn.danger:hover { background: #FEF3F2 }
.sechead > .btn, .sechead > .actions { margin-left: auto; align-self: center }
.setfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap }
.setfoot > .actions:last-child, .setfoot > .btn.primary:last-child { margin-left: auto }
.addrow { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; border: 1px dashed #94A3B8; border-radius: var(--radius); background: transparent; color: var(--blue-dark); font: inherit; font-weight: 600 }
.addrow:hover { background: var(--surface); border-color: var(--blue) }
.setbody td.acts, .setbody th.acts { width: 1%; white-space: nowrap; text-align: right }
.setbody .sechead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.setbody label.field > span:first-child output { font-weight: 600 }
.setbody .card + .addrow { margin-top: 8px }
.setbody .fxrow input { height: 36px; border: 1px solid #94A3B8; border-radius: 8px; padding: 0 10px; font: inherit; background: var(--surface); color: var(--ink) }

/* A record page's fields in sections (layout.js): each a titled card that folds away, its own Edit, ticks for yes/no fields. */
.lsecs { display: flex; flex-direction: column; gap: 14px }
.lsecbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: -6px }
details.lsec > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px }
details.lsec > summary::-webkit-details-marker { display: none }
details.lsec > summary h2 { display: flex; align-items: baseline; gap: 8px }
details.lsec > summary h2::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; position: relative; top: -2px }
details.lsec[open] > summary h2::before { transform: rotate(45deg) }
details.lsec > summary .actions { margin-left: auto }
details.lsec:not([open]) > summary { padding-bottom: 0 }
details.lsec:not([open]) > summary .actions { display: none }
details.lsec dl.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.ticks li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--faint); font-size: 13px }
.ticks li span[aria-hidden] { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700 }
.ticks li.on { color: var(--ink); border-color: var(--blue-2); background: color-mix(in srgb, var(--blue-1) 45%, #fff); font-weight: 500 }
.ticks li.on span[aria-hidden] { background: var(--blue); border-color: var(--blue); color: #fff }
details.lsec [data-showempty] { margin-top: 10px }
.lsecbar { flex-wrap: wrap }
.lsecjump { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto }
.lsecjump a { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--ink-2); text-decoration: none }
.lsecjump a:hover { background: var(--blue-1) }
details.lsec { scroll-margin-top: 16px }

/* Page layout editor (settings/layouts.js). */
.lay-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px }
.lay-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start }
@media (max-width: 1000px) { .lay-cols { grid-template-columns: 1fr } }
.lay-secs { display: flex; flex-direction: column; gap: 12px }
.lay-sec, .lay-loose { padding: 12px 14px }
.lay-loose { position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto }
.lay-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 8px }
.lay-head .lbtns { margin-left: auto; display: flex; gap: 6px; align-items: center }
.lay-name { font-weight: 700; font-size: 16px; min-width: 0; flex: 1 1 200px }
.lay-list { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 6px; min-height: 40px; border: 1px dashed transparent; border-radius: 8px }
.lay-list.over { border-color: var(--blue); background: color-mix(in srgb, var(--blue-1) 35%, #fff) }
.lay-empty { padding: 8px; text-align: center }
.lchip { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: grab }
.lchip.dragging { opacity: .4 }
.lchip .grip { color: var(--faint); font-size: 11px; letter-spacing: -2px }
.lchip .lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lchip .lbtns { display: flex; gap: 4px; align-items: center }
.lchip .lbtns select { max-width: 92px; font-size: 12px; padding: 2px 4px; height: 26px }
.lchip .lbtns .linkbtn { padding: 0 2px }
.lay-loose .lay-list { grid-template-columns: 1fr }
.lay-empty { grid-column: 1 / -1 }
.lchip.picked { border-color: var(--blue) }

/* Marketing (views/marketing.js). */
.mk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start }
.mk-grid > .mk-wide { grid-column: 1 / -1 }
@media (max-width: 1100px) { .mk-grid { grid-template-columns: 1fr } }
.mk-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px }
.mk-h h2 { margin: 0 }
.ga-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start }
.ga-sum { margin: 0 0 10px }
.ga-pages { display: flex; flex-direction: column }
.ga-page { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink) }
.ga-page:first-child { border-top: 0 }
.ga-page .lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ga-page b { font-variant-numeric: tabular-nums; font-weight: 600 }
@media (max-width: 900px) { .ga-grid { grid-template-columns: 1fr } }
.mk-sub { font-size: 14px; font-weight: 600; margin: 18px 0 8px }
.mk-cols .vcol .seg i { width: 100% }
.mk-list { display: flex; flex-direction: column }
.mk-row { padding: 10px 0; border-top: 1px solid var(--line-2) }
.mk-row:first-child { border-top: 0; padding-top: 0 }
.mk-cos { display: flex; flex-direction: column; gap: 4px; margin-top: 6px }
.mk-ev { border-top: 1px solid var(--line-2); padding: 10px 0 }
.mk-ev:first-child { border-top: 0; padding-top: 0 }
.mk-ev > summary { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none }
.mk-ev > summary::-webkit-details-marker { display: none }
.mk-figs { display: flex; gap: 14px; white-space: nowrap }
.mk-people { margin-top: 8px }
.mk-links .hbar { text-decoration: none }
.mk-cols .vcol .seg { width: min(100% - 8px, 84px); margin: 0 auto }
.mk-people .rowline { padding: 6px 0 }
.mk-signups { margin: 8px 0 4px; padding-left: 12px; border-left: 2px solid var(--line) }
.mk-signer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 7px 0; border-bottom: 1px solid var(--line-2); align-items: start }
.mk-signer:last-child { border-bottom: 0 }
.mk-who { min-width: 0 }
.mk-who > .meta { display: block; margin-top: 2px }
.mk-when { text-align: right; white-space: nowrap }
.mk-when > span { display: block }
@media (max-width: 640px) { .mk-signer { grid-template-columns: 1fr } .mk-when { text-align: left; white-space: normal } .mk-when > span { display: inline } .mk-when > span::before { content: ' · ' } }

/* Marketing: a bar that opens to the people or deals behind it. */
.mk-drill > summary { list-style: none; cursor: pointer }
.mk-drill > summary::-webkit-details-marker { display: none }
.mk-drill > summary:hover .lab, .mk-drill[open] > summary .lab { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px }
.mk-drill > .mk-people { margin: 4px 0 12px; padding-left: 12px; border-left: 2px solid var(--line) }

/* Home, To do: tick to pick, click to finish, View to open. */
.todo { position: relative }
.todobar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 0 6px; border-bottom: 1px solid var(--line-2) }
.todorow { justify-content: flex-start; gap: 14px; cursor: pointer }
.todorow:hover .todomain b { color: var(--blue-dark) }
.todorow .todomain { flex: 1; min-width: 0 }
.todorow .todoview { flex: none; font-weight: 500; align-self: center }

/* Settings overview: groups of rows, and a search. */
.setfind { max-width: 520px; margin-bottom: 22px }
.setfind input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; font-size: 15px; color: var(--ink) }
.setfind input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent }
.setover { columns: 2 420px; column-gap: 28px }
.setsec { break-inside: avoid; margin-bottom: 24px }
.setsec h2 { font-size: 15px; margin: 0 0 8px; color: var(--ink-2) }
.setlist { padding: 0; overflow: hidden }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; color: var(--ink); border-top: 1px solid var(--line-2) }
.setrow:first-child { border-top: 0 }
.setrow > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 }
.setrow:hover { background: var(--soft); text-decoration: none; color: var(--ink) }
.setrow:hover b { color: var(--blue-dark) }
.setgo { flex: none; color: var(--faint); font-size: 20px; line-height: 1 }

/* Home pipeline split by a field */
.hpbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.hpipe .hbar { color: var(--ink) }
.hpipe .hbar:hover { text-decoration: none }
.hpipe .hbar:hover .lab { color: var(--blue-dark) }

/* You (/me): four status cards, each opening its section; the signature builder. */
.metiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; margin-bottom: 18px }
.metile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink) }
.metile b { font-size: 17px }
.metile.todo b { color: var(--amber-text) }
.metile:hover { border-color: var(--blue-3); text-decoration: none; color: var(--ink) }
.mecard { padding: 0; margin-bottom: 12px; scroll-margin-top: 16px }
.mecard > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px }
.mecard > summary::-webkit-details-marker { display: none }
.mecard > summary > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.mecard > summary b { font-size: 16px }
.mechev { width: 9px; height: 9px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); flex: none; margin-right: 4px }
.mecard[open] .mechev { transform: rotate(-135deg) }
.mebody { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 12px }
.mebody p { margin: 0; max-width: 65ch }
.mefold > summary { cursor: pointer; color: var(--blue-dark); font-weight: 500 }
.mefold ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--ink-2) }
.sigb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start }
@media (max-width: 800px) { .sigb { grid-template-columns: 1fr } }
.sigform { display: flex; flex-direction: column; gap: 12px }
.siglines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.siglines li { display: flex; gap: 8px; align-items: center }
.siglines input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--surface); color: var(--ink) }
.siglines li:first-child input { font-weight: 700 }
.sigdrop { min-height: 70px; padding: 10px 12px; border: 2px dashed var(--line); border-radius: 8px; background: var(--soft) }
.sigprev { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px }
.sigprev iframe { width: 100%; height: 160px; border: 1px solid var(--line); border-radius: 8px; background: #fff }
.mk-who { align-items: flex-start; gap: 12px; }
.mk-who .meta { display: block; }
.mk-whoact { display: flex; gap: 6px; align-items: center; flex-shrink: 0; white-space: nowrap; }
.mk-addopts { display: flex; flex-direction: column; gap: 8px; }
.mk-addopts .btn { justify-content: flex-start; text-align: left; flex-wrap: wrap; column-gap: 8px; }
.mk-addopts .btn .meta { font-weight: 400; }
@media (max-width: 640px) { .mk-who { flex-wrap: wrap } .mk-who > div:first-child { flex: 1 1 100% } .mk-whoact { flex-shrink: 1; flex-wrap: wrap } }
.metiles { grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media (max-width: 640px) { .metiles { grid-template-columns: 1fr 1fr } }
.siglines .lbtns { display: flex; gap: 2px; flex: none }
.siglines .lbtns .linkbtn { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; text-decoration: none; color: var(--faint); font-size: 15px }
.siglines .lbtns .linkbtn:hover:not(:disabled) { background: var(--soft); color: var(--ink) }
.siglines .lbtns .linkbtn:disabled { opacity: .35 }
.mk-who[hidden] { display: none; }
.mk-subh { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line) }
.mk-subh h3 { margin: 0; font-size: 15px }

.sigform .segs { display: flex; flex-wrap: wrap; align-self: flex-start; border-radius: 18px }

/* Commission */
.cm-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-end; background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 24px }
.cm-head h1 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2 }
.cm-headl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.cm-stats { display: flex; flex-wrap: wrap }
.cm-stats > div { padding: 0 20px; border-left: 1px solid var(--line) }
.cm-stats > div:first-child { border-left: 0; padding-left: 0 }
.cm-stats span { display: block; font-size: 13px; color: var(--muted) }
.cm-stats b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums }
.cm-stats > div.cm-today:first-child { padding: 8px 18px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; margin-right: 20px }
.cm-stats .cm-today span { color: var(--rail-text) } .cm-stats .cm-today b { display: block; font-size: 32px; line-height: 1.15 }
.cm-stats .cm-today + div { border-left: 0; padding-left: 0 }
.cm-body { padding: 16px 24px 32px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px }
.cm-note { grid-column: span 12; margin: 0 }
.cm-w12 { grid-column: span 12 } .cm-w7 { grid-column: span 7 } .cm-w6 { grid-column: span 6 } .cm-w5 { grid-column: span 5 }
.cm-read { margin-left: auto } .cm-date { height: 30px; margin-left: auto; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px }
.cm-hb, .cm-dv { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 70px; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 4px 6px; border: 0; background: none; border-radius: 6px; font: inherit; color: inherit; cursor: pointer }
.cm-net { grid-template-columns: minmax(0, 28%) minmax(0, 1fr) 62px 62px }
.cm-hb:hover, .cm-dv:hover { background: var(--soft) }
.cm-hb .l, .cm-dv .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cm-hb .t { height: 12px; display: block } .cm-hb .t i { display: block; height: 100%; border-radius: 0 3px 3px 0; min-width: 2px }
.cm-hb .v, .cm-dv .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums }
.cm-dv .t { position: relative; height: 12px; display: block } .cm-dv .t::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: #94A3B8 } .cm-dv .t i { position: absolute; top: 0; height: 100% }
.cm-cols { columns: 2 320px; column-gap: 24px } .cm-cols .cm-hb { break-inside: avoid }
.cm-recs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px }
.cm-rec { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start } .cm-rec h3 { margin: 0; font-size: 14px } .cm-rec p { margin: 0; flex: 1 }
.cm-shade { position: fixed; inset: 0; background: rgba(11, 31, 68, .3); z-index: 30 }
.cm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: var(--surface); z-index: 31; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: -8px 0 24px rgba(11, 31, 68, .16) }
.cm-dh { display: flex; justify-content: space-between; gap: 12px } .cm-dh h2 { margin: 0; font-size: 20px } .cm-dh .x { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--muted) }
.cm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px } .cm-facts span { display: block; font-size: 12px; color: var(--faint) } .cm-facts b { font-size: 17px }
@media (max-width: 1100px) { .cm-w7, .cm-w6, .cm-w5 { grid-column: span 12 } }
/* Commission on a phone: its own page, without the rail and top bar. Same width as phoneScreen in commission.js. */
@media (max-width: 700px) { .shell:has(.rail a[data-key="commission"][aria-current="page"]) :is(.rail, .topbar) { display: none } }
.cm-m { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 24px }
.cm-m-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
.cm-m-top h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em }
.cm-m-today { padding: 12px 16px; border-radius: 12px; background: var(--navy); color: var(--rail-text); font-size: 13px }
.cm-m-today span { display: block } .cm-m-today b { display: block; color: #fff; font-size: 38px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums }
.cm-m-note { margin: 0 }
.cm-m-chart { display: flex; flex-direction: column; gap: 8px; padding: 12px }
.cm-m-chart .segs { display: flex } .cm-m-chart .segs button { flex: 1; height: 34px; padding: 0 }
.cm-m-chart p { margin: 0 } .cm-m-chart .legend { margin-top: 0; padding-top: 2px }
.cm-m-chart svg { touch-action: pan-y; -webkit-user-select: none; user-select: none }
.cm-m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.cm-m-grid > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface) }
.cm-m-grid > div:first-child:nth-last-child(odd) { grid-column: 1 / -1 }
.cm-m-grid span { display: block; font-size: 13px; color: var(--muted) } .cm-m-grid b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums }
.cm-m-out { align-self: center; font-size: 13px; color: var(--muted) }

/* Links and UTM tags in the email builder; standard links beside a link box */
.elinks { display: flex; flex-direction: column; gap: 10px; padding-top: 8px }
.utmrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
@media (max-width: 720px) { .utmrow { grid-template-columns: 1fr } }
#elinks { display: flex; flex-direction: column; gap: 6px }
.elink { display: flex; gap: 8px; align-items: flex-start }
.elink .meta { word-break: break-all }
.stdlink { max-width: 220px; font-size: 13px; margin-top: 6px }

/* Campaign results on Marketing: folds away */
.mk-camps > summary { cursor: pointer; margin-bottom: 0 }
.mk-camps[open] > summary { margin-bottom: 12px }
.mk-camps > summary h2 { display: inline }

/* Retargeting: the tab on a sent campaign, the dialog, and results with retargets. */
.rtcard { margin-bottom: 20px; overflow: hidden }
.rthead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 16px 10px }
.rtrows { min-width: 760px }
.rtrow { display: grid; grid-template-columns: minmax(240px, 1.2fr) 72px minmax(200px, 1fr) 150px; gap: 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line-2) }
.rtrow.th, .rtkid.th { background: #F8FAFC; color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 16px; border-top: 1px solid var(--line) }
.rtrow .r, .rtkid .r, .rtout .r { text-align: right }
.rtn { font-size: 18px; font-weight: 700; letter-spacing: -0.02em }
.rtbar { height: 6px; background: var(--line-2); border-radius: 3px; margin-top: 6px; overflow: hidden }
.rtbar i { display: block; height: 100%; min-width: 3px; background: var(--blue); border-radius: 3px }
.rtfold { border-top: 1px solid var(--line); padding: 10px 16px }
.rtfold summary { cursor: pointer; color: var(--blue-dark); font-weight: 500 }
.rtout { display: grid; grid-template-columns: minmax(240px, 1fr) 72px minmax(120px, auto); gap: 16px; align-items: center; padding: 8px 0 0; max-width: 620px }
.rtkids { min-width: 820px }
.rtkid { display: grid; grid-template-columns: 110px minmax(200px, 1fr) 96px 72px 72px 72px 80px; gap: 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line-2) }
.rtempty { padding: 0 16px 14px; margin: 0 }
.rtplan { padding: 0 16px 14px }
.rtpick { border: 0; padding: 0; margin: 0 }
.rtpick legend { font-weight: 600; padding: 0; margin-bottom: 2px }
.rtopt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; cursor: pointer }
.rtopt.on { border-color: var(--blue); background: #F5F8FF }
.rtopt b { margin-left: auto; font-weight: 600 }
.rtticks .rtopt:first-child { margin-top: 0 }
dialog label.field[hidden] { display: none }
.rtswitch { margin-bottom: 16px }
.rtchart { margin: 16px 0 }
tr.rttotal td { background: #F8FAFC; font-weight: 700; border-top: 1px solid var(--line) }
.cacts .btn + .btn { margin-left: 6px }

/* Marketing: everything fits the page */
.mk-fold > [hidden] { display: none }
.mk-more { display: flex; gap: 16px; margin: 8px 0 0 }
.mk-grid .hbars { gap: 2px }
.mk-grid .hbar .track, .mk-grid .hbar .fill { height: 16px }
.mk-leadrow, .mk-camprow { grid-column: 1 / -1; display: grid; gap: 16px; align-items: stretch; min-width: 0 }
.mk-leadrow { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) }
.mk-leadrow.shop { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) }
.mk-leadrow.solo { grid-template-columns: minmax(0, 1fr) }
.mk-camprow { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) }
@media (max-width: 1100px) { .mk-leadrow, .mk-camprow, .mk-leads { grid-template-columns: minmax(0, 1fr) } }
.mk-leads { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start }
.mk-srchead, .mk-srcs .hbar { grid-template-columns: minmax(90px, 165px) minmax(24px, 1fr) 40px 58px; gap: 8px }
.mk-srchead { display: grid; padding: 0 6px 4px; font-size: 12px; color: var(--faint); text-align: right }
.mk-srcs .mk-n { text-align: right }
.mk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px }
.mk-links .hbar { grid-template-columns: minmax(90px, 180px) minmax(24px, 1fr) 28px; gap: 8px }
.mk-deal { padding: 8px 0; border-top: 1px solid var(--line-2); min-width: 0 }
.mk-deal:first-child { border-top: 0; padding-top: 0 }
.mk-news { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; padding: 8px 0; border-top: 1px solid var(--line-2) }
.mk-news:first-child { border-top: 0; padding-top: 0 }
.mk-story { display: flex; justify-content: space-between; gap: 12px; min-width: 0 }
.mk-story a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mk-story .meta { flex-shrink: 0 }
@media (max-width: 700px) { .mk-news { grid-template-columns: minmax(0, 1fr); gap: 4px } }
.mk-camptable .mk-cname { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mk-camptable .mk-cname .meta { display: block }
.mk-camptable td, .mk-camptable th { white-space: nowrap }
.mk-camps .tablewrap { overflow-x: visible }
.mk-shop { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px }
.mk-shop .label { font-size: 13px; color: var(--muted) }
.mk-shop .value { font-size: 24px; font-weight: 600; line-height: 1.3 }
.mk-shopads { width: 100% }
.mk-lirow { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: stretch; min-width: 0 }
.mk-listack { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.mk-listack > :last-child { flex: 1 }
@media (max-width: 1100px) { .mk-lirow { grid-template-columns: minmax(0, 1fr) } }
.mk-lihead, .mk-li { display: grid; grid-template-columns: minmax(0, 1fr) 52px 48px 44px 52px 66px; gap: 8px; align-items: baseline }
.mk-noviews .mk-lihead, .mk-noviews .mk-li { grid-template-columns: minmax(0, 1fr) 52px 44px 52px 66px }
.mk-lihead { font-size: 12px; color: var(--faint); text-align: right; padding-bottom: 4px }
.mk-li { padding: 8px 0; border-top: 1px solid var(--line-2) }
.mk-li b { text-align: right; font-variant-numeric: tabular-nums }
.mk-li .meta { display: block }
.mk-lit { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mk-pvhead, .mk-pv { display: grid; grid-template-columns: minmax(0, 1fr) 48px 48px 68px; gap: 8px; align-items: baseline }
.mk-pvhead { font-size: 12px; color: var(--faint); text-align: right; padding-bottom: 4px }
.mk-pv { padding: 8px 0; border-top: 1px solid var(--line-2) }
.mk-pv b { text-align: right; font-variant-numeric: tabular-nums }
.mk-pv .meta { display: block }

/* Discussion points */
.dsp-row { padding: 12px 0; border-bottom: 1px solid var(--line-2) }
.dsp-row:last-child { border-bottom: 0 }
.dsp-row h3 { font-size: 15px; font-weight: 600; margin: 0 }
.dsp-row p { margin: 4px 0 0; white-space: pre-wrap }
.dsp-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px }
.dsp-pick { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px }
.dsp-pick label { display: flex; gap: 8px; align-items: center; padding: 5px 0 }
.dsp-pick .dept { padding-left: 26px }
.dsp-more { margin-top: 10px }
.dsp-more summary { cursor: pointer; color: var(--muted) }

/* Central inbox (views/queue.js) */
.qrow { align-items: flex-start }
.qprev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch }
.qside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0 }
.qwho { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline }
.qmsg .qmhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.qmsg .qbody { white-space: pre-wrap; margin-top: 10px; overflow-wrap: anywhere }
.qmsg.out { border-left: 3px solid var(--blue-1) }
.qreply textarea { width: 100%; font: inherit }
@media (max-width: 700px) { .qrow { flex-direction: column } .qside { flex-direction: row; align-items: center } }
.qset { border: 0; padding: 0; margin: 0 }
.qset legend { font-weight: 500; padding: 0; margin-bottom: 6px }
.qchecks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px }
.qchecks label { display: flex; gap: 8px; align-items: center; font-weight: 400 }
.qadm { align-items: flex-start }
.qadm .mbbtns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex-shrink: 0 }

/* Ask SalesHead (step 1): the Ask panel and the help wiki. Only where the deployment has the "ask" feature. */
.askbtn { display: inline-flex; align-items: center; gap: 6px }
dialog.ask { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(440px, 100vw); border-radius: 0; display: none; flex-direction: column }
dialog.ask[open] { display: flex }
dialog.ask .askhead { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 8px }
dialog.ask .askform { padding: 0 20px 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line) }
dialog.ask .askrow { display: flex; gap: 8px }
dialog.ask .askrow input { flex: 1; min-width: 0; height: 38px; border: 1px solid #CBD5E1; border-radius: 8px; padding: 0 10px; font: inherit; color: var(--ink) }
dialog.ask .askout { flex: 1; overflow: auto; padding: 16px 20px }
dialog.ask .askq { font-weight: 600; margin-bottom: 8px }
dialog.ask .askans p { margin: 0 0 8px }
dialog.ask .askans ol, dialog.ask .askans ul { margin: 0 0 8px; padding-left: 20px }
dialog.ask .askfrom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px }
dialog.ask .askfrom span { font-size: 13px; color: var(--faint); margin-right: 2px }
dialog.ask .chip { border: 1px solid var(--line); background: var(--soft); border-radius: 999px; padding: 3px 10px; font-size: 13px }
dialog.ask .askfoot { padding: 12px 20px; border-top: 1px solid var(--line) }
.helpwiki { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start }
.helpside { padding: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto }
.helpside input { width: 100%; height: 34px; border: 1px solid #CBD5E1; border-radius: 8px; padding: 0 8px; font: inherit }
.helplist h3 { font-size: 12px; text-transform: none; color: var(--faint); margin: 14px 0 4px; font-weight: 600 }
.helplist ul { list-style: none; margin: 0; padding: 0 }
.helplist a { display: block; padding: 3px 6px; border-radius: 6px; color: var(--ink-2) }
.helplist a[aria-current="page"] { background: var(--blue-1); color: var(--navy); font-weight: 500 }
.helpart { padding: 24px 28px; max-width: 760px }
.helpart h1 { margin: 2px 0 12px }
.helpbody h3 { font-size: 16px; margin: 18px 0 6px }
.helpbody h4 { font-size: 14px; margin: 14px 0 4px }
.helpbody ol, .helpbody ul { padding-left: 22px }
.helpbody li { margin: 3px 0 }
.helpbody code { background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: 13px }
.helpacts { display: flex; gap: 8px; margin: 18px 0 }
.helprel { padding-left: 18px }
@media (max-width: 760px) { .helpwiki { grid-template-columns: 1fr } .helpside { position: static; max-height: none } .helpart { padding: 18px; order: -1 } .askbtn .asklabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) } .askbtn { padding: 0 10px } }
dialog.ask .askthumbs { display: flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 13px; color: var(--faint) }
dialog.ask .askthumbs span { margin-right: 4px }
dialog.ask .askthumbs button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--faint) }
dialog.ask .askthumbs button[aria-pressed="true"] { color: var(--blue-dark); background: var(--blue-1) }

/* New version available: bottom of the screen, clear of the page. */
.newbuild { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: var(--ink, #0B1F44); color: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(11, 31, 68, 0.25); font-size: 14px; max-width: calc(100vw - 32px) }
.newbuild .x { border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; padding: 2px 4px; cursor: pointer }

/* My activities: a week, one column a day */
.wkcal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px }
.wkhead.wkwkend { margin-top: 10px; border-top: 1px solid var(--line-2); padding-top: 8px }
.wkday { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; min-height: 120px; min-width: 0 }
.wkday.today { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset }
.wkhead { font-size: 13px; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px }
.wkhead b { color: var(--ink); font-size: 15px }
.wkitem { display: flex; gap: 6px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 13px }
.wkitem:last-child { border-bottom: 0 }
.wkitem a { color: var(--ink); overflow-wrap: anywhere }
.wkitem .meta { font-size: 12px; overflow-wrap: anywhere }
.wkitem input { margin-top: 2px }
.wktime { font-variant-numeric: tabular-nums; color: var(--blue-dark); font-weight: 600; white-space: nowrap }
.wkempty { font-size: 12px; margin: 4px 0 0 }
.card.overdue { border-color: var(--amber); }
@media (max-width: 1000px) { .wkcal { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .wkcal { grid-template-columns: minmax(0, 1fr) } .wkday { min-height: 0 } }

/* Deal page: a phase on the track can be clicked to move there. */
[data-goto] { cursor: pointer }
.phgo[data-goto]:hover, .phgo[data-goto]:focus-visible { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px }
.arrow .seg[data-goto]:hover, .arrow .seg[data-goto]:focus-visible { filter: brightness(0.94); outline: 2px solid var(--blue-dark); outline-offset: -2px }