/* 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 }
.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) }
/* 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.new { box-shadow: inset 3px 0 0 var(--blue) }
.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 }
.btn { height: 36px; padding: 0 14px; border: 1px solid #94A3B8; border-radius: 8px; background: var(--surface); color: var(--ink) }
.btn:hover { background: var(--soft) }
.btn.primary { border: 0; background: var(--blue); color: #fff; font-weight: 600 }
.btn.primary:hover { background: var(--blue-dark) }
.btn.small { height: 30px; padding: 0 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 { padding: 0 24px; border-left: 1px solid #CBD5E1 }
.figures > div:first-child { padding-left: 0; border-left: 0 }
.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) }
.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 }
.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 }
.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 }

@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 }
  .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 } }
.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: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: 2px; position: sticky; top: 12px }
.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) { .setwrap { grid-template-columns: 1fr } .setnav { position: static; flex-direction: row; flex-wrap: wrap } .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 }
.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: auto; 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 { 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 }
.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 { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; position: sticky; bottom: 0; background: var(--surface) }
.fp-foot .btn { 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 }
.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 }
.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 }
.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 }
.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) }
.merge { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.merge .chip { cursor: pointer }
.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 }
.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 { height: 42px; padding: 0 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 }

/* 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 }
.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 }