/* Tile map, multi-select filters, consent matrix, protected records and record links. */
/* =========================================================
   September review round: tile map, multi-select filters,
   consent model, trend chart, protected records.
========================================================= */

/* ---------- tile-grid map ---------- */
.mapgrid{ display:grid; grid-template-columns:repeat(11,1fr); grid-template-rows:repeat(8,1fr); gap:3px;
  aspect-ratio:11/8; height:clamp(230px,40vh,430px); width:auto; max-width:100%; margin-inline:auto; }
.tile{ position:relative; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10.5px; font-weight:400; cursor:pointer; border:1px solid var(--border); color:var(--text-primary); border-radius:2px; transition:outline-color .15s, transform .12s; }
.tile:hover{ transform:scale(1.06); z-index:2; }
.tile.active{ outline:2px solid var(--tag); outline-offset:1px; box-shadow:0 0 0 1px var(--surface); z-index:3; font-weight:700; }
.tile.empty{ cursor:default; opacity:.55; }
.tile.empty:hover{ transform:none; }
.map-legend{ display:flex; align-items:center; gap:8px; margin-top:12px; font-family:var(--mono); font-size:10.5px; color:var(--text-secondary); flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.map-legend .ramp{ width:110px; height:8px; border:1px solid var(--border);
  background:linear-gradient(90deg,var(--map-1),var(--map-2),var(--map-3),var(--map-4),var(--map-5)); }
.map-selection{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.map-clear{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; background:none; border:none; color:var(--tag); cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0; }

/* ---------- multi-select filter ---------- */
.ms{ position:relative; }
.ms-btn{ display:flex; align-items:center; gap:8px; width:100%; height:38px; padding:0 10px 0 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-primary); font-family:var(--sans); font-weight:300; font-size:var(--font-size-body); cursor:pointer; text-align:left; }
.ms-btn .ms-txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-btn .ms-count{ font-family:var(--mono); font-size:10px; padding:2px 6px; border-radius:var(--radius-pill); background:var(--blue-01); color:var(--on-brand); flex:none; }
.ms-btn .ms-caret{ width:14px; height:14px; flex:none; color:var(--text-secondary); }
.ms-btn[aria-expanded="true"]{ border-color:var(--text-primary); }
.ms-pop{ position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0; max-height:290px; overflow:auto; padding:8px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-pop); display:flex; flex-direction:column; gap:2px; }
.ms-pop[hidden]{ display:none; }
.ms-search{ width:100%; height:32px; padding:0 9px; margin-bottom:6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-sunken); color:var(--text-primary); font-family:var(--sans); font-weight:300; font-size:13px; }
.ms-opt{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:4px; font-size:13px; cursor:pointer; line-height:1.25; }
.ms-opt:hover{ background:var(--surface-sunken); }
.ms-opt input{ accent-color:var(--blue-04); width:14px; height:14px; flex:none; margin:0; }
.ms-opt .ms-n{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.ms-actions{ display:flex; justify-content:space-between; gap:8px; padding:6px 2px 2px; margin-top:4px; border-top:1px solid var(--border); }
.ms-actions button{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; background:none; border:none; color:var(--tag); cursor:pointer; padding:2px; text-decoration:underline; text-underline-offset:3px; }
.ms-none{ font-family:var(--mono); font-size:11px; color:var(--text-secondary); padding:8px; }

/* ---------- date range ---------- */
/* `1fr 1fr` alone still floors each track at the input's intrinsic
   min-content (a native date input's calendar icon + digit fields refuse to
   shrink below ~130px each), which is what produced the drawer's 17-24px
   horizontal overflow at every width - minmax(0,1fr) plus min-width:0 on the
   input itself is what actually lets the track go narrower than that. */
.date-range{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; }
.date-range input{ width:100%; min-width:0; height:38px; padding:0 8px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-primary); font-family:var(--mono); font-size:12px; }
:root[data-theme="dark"] .date-range input::-webkit-calendar-picker-indicator{ filter:invert(1); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .date-range input::-webkit-calendar-picker-indicator{ filter:invert(1); } }

/* ---------- active filter summary ---------- */
.active-filters{ display:flex; flex-wrap:wrap; gap:6px; }
.af-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.03em; text-transform:uppercase; padding:4px 8px; border:1px solid var(--border-strong); border-radius:var(--radius-pill); color:var(--text-secondary); background:var(--surface); cursor:pointer; }
.af-chip:hover{ border-color:var(--tag); color:var(--tag); }
.af-chip .x{ font-size:12px; line-height:1; }

/* ---------- consent ----------
   Each of the three rows is a BarList of one item (see barRowsHTML in
   primitives.js), so only the wrapper and the caption sentence below the
   bar are styled here now - the bar itself is .bl-row/.bl-track/.bl-fill
   from charts.css. */
.consent-matrix{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:4px; }
.consent-item{ display:flex; flex-direction:column; gap:6px; }
.consent-item .csub{ font-size:11.5px; color:var(--text-secondary); }
.consent-key{ display:flex; flex-direction:column; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.consent-key .krow{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.4; cursor:pointer; padding:4px 6px; margin:-4px -6px; border-radius:4px; }
.consent-key .krow:hover{ background:var(--surface-sunken); }
.consent-key .sw{ width:10px; height:10px; flex:none; margin-top:4px; border-radius:2px; }
.consent-key .kname{ font-weight:400; color:var(--text-primary); }
/* A full sentence, not a label - wrapping is genuinely fine here (unlike a
   chip or cell value), so overflow-wrap:anywhere rather than an ellipsis. */
.consent-key .kdesc{ color:var(--text-secondary); overflow-wrap:anywhere; }
.consent-key .knum{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--text-secondary); white-space:nowrap; padding-left:10px; }

.review-note{ border:1px solid var(--amber-border); border-left-width:4px; border-radius:var(--radius-sm); background:var(--amber-wash); padding:16px 18px; display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.review-note .head{ display:flex; align-items:center; gap:9px; }
.review-note .head svg{ width:18px; height:18px; color:var(--amber-text); flex:none; }
.review-note .head strong{ font-weight:700; font-size:14px; color:var(--text-primary); }
.review-note p{ font-size:12.5px; color:var(--text-primary); line-height:1.5; }
.review-note .risklist{ display:flex; flex-direction:column; border-top:1px solid var(--border-strong); margin-top:4px; }

/* ---------- protected records ---------- */
.protected{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--text-secondary); }
.protected svg{ width:13px; height:13px; flex:none; }
.t-story.is-protected{ font-family:var(--mono); font-style:normal; font-size:11.5px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; }
/* A sentence, not a status word - uppercase mono would shout it across the
   row, so the previous pass already dropped the transform. It left the font
   itself mono, though, and a monospace face is exactly the wrong tool for a
   sentence: every character reserves the width of the widest one, so the
   same 45 characters need noticeably more room than a proportional font -
   the actual bigger contributor to wrapping to 3-5 lines than the font-size
   was. Switching to --sans (what the rest of the table's prose-like cells
   use) is the real fix; the size still scales with the viewport on top of
   that - continuously, the same way BAR.labelColumn's clamp() in charts.css
   does, not in a couple of fixed steps - because the column is a fixed
   percentage of the table now (table.css) and can no longer widen to fit
   this text the way the min-width this replaced once assumed. The floor
   matches .tag-chip's 9.5px so this reads at the same size as the topic
   chips once both are as small as either ever gets. */
.t-story.is-contact, .t-story.is-contact .protected{ font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:clamp(9.5px, 0.35vw + 6.4px, 12px); }
.t-story.is-contact .protected{ align-items:flex-start; }
.t-story.is-contact .protected svg{ margin-top:2px; }
.t-company.is-protected{ font-family:var(--mono); font-size:11.5px; color:var(--text-secondary); font-weight:300; }
.protected-panel{ border:1px dashed var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-sunken); padding:20px 22px; margin:24px 0; display:flex; flex-direction:column; gap:10px; }
.protected-panel .head{ display:flex; align-items:center; gap:10px; }
.protected-panel .head svg{ width:18px; height:18px; color:var(--text-secondary); flex:none; }
.protected-panel .head strong{ font-weight:700; font-size:15px; }
.protected-panel p{ font-size:13px; color:var(--text-secondary); line-height:1.5; }

/* ---------- record links ---------- */
.record-links{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:22px; padding-top:20px; border-top:1px solid var(--border); }
.link-btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-primary); font-family:var(--sans); font-weight:300; font-size:var(--font-size-body); text-decoration:none; cursor:pointer; transition:background-color .2s,border-color .2s; }
.link-btn:hover{ background:var(--surface-sunken); border-color:var(--text-primary); }
.link-btn svg{ width:16px; height:16px; flex:none; }
.link-note{ font-family:var(--mono); font-size:11px; color:var(--text-secondary); }

/* ---------- multi-series trend ---------- */
.trend-legend{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.trend-legend button{ display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-pill); background:var(--surface); color:var(--text-primary); font-family:var(--sans); font-weight:300; font-size:12px; cursor:pointer; }
.trend-legend button.off{ opacity:.4; }
.trend-legend .sw{ width:9px; height:9px; border-radius:2px; flex:none; }
.trend-legend .tn{ font-family:var(--mono); font-size:10.5px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }

/* ---------- compact KPI strip ---------- */
.kpi-grid.compact{ grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:22px; }
.kpi-grid.compact .kpi{ padding:11px 13px 10px; gap:3px; border-radius:var(--radius-sm); }
.kpi-grid.compact .kpi .eyebrow{ font-size:9.5px; letter-spacing:.06em; }
.kpi-grid.compact .kpi-value{ font-size:clamp(18px,1.5vw,23px); }
.kpi-grid.compact .kpi-sub{ font-size:10.5px; }
.kpi-grid.compact .kpi-spark{ width:46px; height:18px; }
@media (max-width:1500px){ .kpi-grid.compact{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .kpi-grid.compact{ grid-template-columns:repeat(2,1fr); } }

/* ---------- snapshot ---------- */
.bento-2.wide-left{ grid-template-columns:1.25fr .75fr; }
@media (max-width:1100px){ .bento-2.wide-left{ grid-template-columns:1fr; } }
#snapshotBlock{ padding-top:0; }
.donut-stack{ display:flex; flex-direction:column; gap:10px; }
.donut-stack .donut-row{ margin-bottom:0; }
.legend-rows .lrow.clickable{ cursor:pointer; padding:2px 4px; margin:-2px -4px; border-radius:4px; }
.legend-rows .lrow.clickable:hover{ background:var(--surface-sunken); }
.legend-rows .lrow.dim{ opacity:.38; }
.legend-rows .lrow.sel .ltxt{ font-weight:700; }
.legend-more{ font-family:var(--mono); font-size:10.5px; color:var(--text-secondary); padding-top:2px; }

#trendChart .line-tip{ line-height:1.5; text-align:left; transform:translate(-50%,8px); }
.review-note .risk-row{ border-bottom:1px solid var(--border-strong); }

/* The opening snapshot has to clear the fold: the whole map, its legend and the
   topic donut visible before anyone scrolls. */
.main-hdr{ padding-bottom:14px; margin-bottom:14px; }
.content-title{ font-size:clamp(20px,1.9vw,26px); margin-top:4px; }
.content-sub{ margin-top:6px; }
.kpi-grid.compact{ margin-bottom:16px; }
#snapshotBlock{ padding-bottom:26px; }

/* ---------- Salesforce link settings ---------- */
.sf-help{ font-size:13px; line-height:1.55; color:var(--text-secondary); margin:20px 0 18px; }
.sf-field{ display:flex; flex-direction:column; gap:7px; }
.sf-field > span{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); }
.sf-field input{ width:100%; height:42px; padding:0 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text-primary); font-family:var(--mono); font-size:13px; }
.sf-field input:focus{ outline:2px solid var(--accent-spark); outline-offset:1px; }
.sf-presets{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.sf-presets button{ font-family:var(--mono); font-size:11px; padding:6px 11px; border:1px solid var(--border-strong);
  border-radius:var(--radius-pill); background:var(--surface); color:var(--text-primary); cursor:pointer; }
.sf-presets button:hover{ border-color:var(--tag); color:var(--tag); }
.sf-preview{ margin-top:18px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-sunken); display:flex; flex-direction:column; gap:9px; }
.sf-preview .plabel{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); }
.sf-preview code{ font-family:var(--mono); font-size:11.5px; color:var(--text-primary); word-break:break-all; line-height:1.5; }
.sf-preview .bad{ color:var(--critical); }