/*
 * Partner Performance Review — base styles.
 *
 * Deliberately unbranded for v1 (CLAUDE.md §1/§2): legible and professional,
 * not themed against the old Stash style guide. Expect a re-theme against Mary
 * Kate's new guide later. Data-presentation styling is worked separately, to a
 * recognised standard, in the deck skill.
 */

:root {
  --ink: #1a1d21;
  --ink-soft: #565c66;
  --line: #dfe3e8;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --accent: #1f5f8b;
  --accent-ink: #ffffff;
  /* Stash brand orange for the primary interactive controls (Download Report,
     Refresh KNOWI, the period picker) — filled with a darker hover highlight. */
  --brand: #d9831f;
  --brand-hover: #bd6f13;
  --danger: #a23b3b;
  --danger-bg: #fbeaea;
  --ok: #2f6f4f;
  --ok-bg: #e8f3ec;
  --radius: 8px;
  --gap: 1rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0.85rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.app-header__brand {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.app-header__signout button,
.app-header__signout,
.app-header__refresh button,
.app-header__refresh {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  cursor: pointer;
}

.app-header__refresh button,
.app-header__refresh {
  color: var(--brand);
  border-color: var(--brand);
  transition: background 0.12s ease, color 0.12s ease;
}
.app-header__refresh:hover button,
.app-header__refresh button:hover,
.app-header__refresh:hover {
  background: var(--brand);
  color: #fff;
}

.app-main {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.flashes { max-width: 960px; margin: 1rem auto 0; padding: 0 1.5rem; }

.flash {
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.flash--alert { background: var(--danger-bg); color: var(--danger); }
.flash--notice { background: var(--ok-bg); color: var(--ok); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.login {
  max-width: 380px;
  margin: 4rem auto;
}

.login h1 { margin-top: 0; font-size: 1.3rem; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.3rem; }

.field input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
}

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.12s ease;
}
.btn:hover { background: var(--brand-hover); }
.btn[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
a.btn { text-decoration: none; }
/* Download Report: pushed to the right of the controls row, outlined until hover
   (same UX as Refresh KNOWI) rather than filled. */
.browse-download {
  margin-left: auto;
  background: var(--surface);
  color: var(--brand);
  border: 1px solid var(--brand);
  font-weight: 600;
}
.browse-download:hover { background: var(--brand); color: #fff; }
/* While a hotel's website check runs before its download: the status sits beside the button. */
.browse-download-status { margin-left: auto; align-self: center; }
.browse-download-status:not([hidden]) + .browse-download { margin-left: 0.75rem; }
.browse-download[aria-busy="true"] { opacity: 0.7; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap);
  margin-top: 1.5rem;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}

.stat__value { font-size: 1.8rem; font-weight: 600; }
.stat__label { font-size: 0.8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }

/* ---- Phase 2: navigation, tables, tiles, widgets, verify view ---- */

.app-nav { display: flex; gap: 1rem; margin-left: 1.5rem; flex: 1; }
.app-nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; }
.app-nav a:hover, .app-nav a.is-active { color: var(--accent); }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0 0 0.25rem; font-size: 1.4rem; }
.page-head .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }
.stack > * + * { margin-top: 1.25rem; }

.btn--secondary { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); }
.btn--ghost { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); }
.btn--small { padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

.refresh-status { max-width: 520px; margin: 3rem auto; text-align: center; }
.refresh-status h1 { margin-top: 0; font-size: 1.3rem; }
.refresh-status__actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }

.field input[type="text"], .field input[type="date"], .field select, .field textarea,
.field input[type="url"] {
  width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 0.95rem; background: var(--surface);
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap); }

.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th, .table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
.table th { color: var(--ink-soft); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table--wrap { overflow-x: auto; }
/* Tables whose column headers must stay on one line (Promotions/Deals, Rate Code
   Management) — columns size to content and the card scrolls sideways if needed,
   rather than wrapping the header labels. */
.chart-card--nowrap-headers .table--wrap .table { table-layout: auto; }
.chart-card--nowrap-headers .table--wrap .table th { white-space: nowrap; }
/* Data cells size to content too (don't inherit the fit-mode's break-anywhere),
   so a promo/rate name reads on one line and the card scrolls sideways — instead
   of auto-layout crushing the column and breaking a word (Blue Elk Inn GROU/P). */
.chart-card--nowrap-headers .table--wrap .table td { white-space: nowrap; overflow-wrap: normal; }
/* Fit tables to the card (wrap cells, smaller text) so they never scroll
   sideways — Cisco wants no horizontal scroll anywhere. */
.table--wrap .table { width: 100%; min-width: 0; table-layout: fixed; }
.table--wrap .table th, .table--wrap .table td { white-space: normal; overflow-wrap: anywhere; font-size: 0.8rem; }
/* Assigned Roles: the emails column gets the room to show each address whole,
   one per line; an address wider than the column still wraps rather than being
   clipped. Status is an outlined chip — green Assigned, red Missing. */
.table--wrap .table th[data-col="emails"] { width: 34%; }
.table--wrap .table:has(th[data-col="emails"]) th[data-col="last_updated"] { width: 12%; }
.table--wrap .table:has(th[data-col="emails"]) th[data-col="status"] { width: 12%; }
/* "Page X of Y" + back/forward arrows, right-aligned under a paged table
   (History, and Browse tables like Rate Code Management). */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.8rem; color: var(--ink-soft); }
.pager__label { margin-right: 0.35rem; font-variant-numeric: tabular-nums; }
.pager__btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 1.05rem; line-height: 1; text-decoration: none; cursor: pointer; padding: 0; }
.pager__btn:hover:not(.is-disabled):not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pager__btn.is-disabled, .pager__btn:disabled { opacity: 0.35; cursor: default; }
/* A paged table's filler rows keep the last, shorter page the same height. */
.table tr.table__filler td { border-bottom-color: transparent; }
.hbar li.hbar__filler { min-height: 1.2rem; }
.table__email { display: block; overflow-wrap: break-word; }
.status-chip { display: inline-block; padding: 0.15rem 0.6rem; border: 1.5px solid; border-radius: var(--radius);
  font-weight: 500; line-height: 1.3; background: var(--surface); white-space: nowrap; overflow-wrap: normal; }
.status-chip--assigned { color: var(--ok); border-color: var(--ok); }
.status-chip--missing { color: var(--danger); border-color: var(--danger); }
/* Spot Awards' booking influence, 1–5, in the same outlined chip: maroon, red,
   orange, yellow, green. Yellow text is darkened to stay readable on white. */
.influence-chip { display: inline-block; min-width: 1.8rem; text-align: center; padding: 0.15rem 0.5rem;
  border: 1.5px solid; border-radius: var(--radius); font-weight: 600; line-height: 1.3; background: var(--surface); }
.influence-chip--1 { color: #7a1f2b; border-color: #7a1f2b; }
.influence-chip--2 { color: #c62f2f; border-color: #c62f2f; }
.influence-chip--3 { color: #c25a12; border-color: #e0782a; }
.influence-chip--4 { color: #8a6a00; border-color: #e0b400; }
.influence-chip--5 { color: #2f7d3a; border-color: #2f7d3a; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 0.9rem; background: var(--bg); }
.tile__value { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile__label { font-size: 0.75rem; color: var(--ink-soft); }

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge--critical { background: var(--danger-bg); color: var(--danger); }
.badge--warning { background: #fbf3e2; color: #8a5a00; }
.badge--info { background: #e8eef5; color: var(--accent); }
.badge--ok { background: var(--ok-bg); color: var(--ok); }

.section { margin-top: 2rem; }
.section > h2 { font-size: 1.1rem; border-bottom: 2px solid var(--line); padding-bottom: 0.4rem; }

.widget { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-top: 1rem; }
.widget__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.widget__title { margin: 0; font-size: 1rem; }
.widget__src { font-size: 0.72rem; color: var(--ink-soft); }
.widget__note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.5rem; border-left: 3px solid var(--line); padding-left: 0.6rem; }
.widget--reserved { border-style: dashed; background: var(--bg); }

.hbar { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.hbar li { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; font-size: 0.85rem; }
.hbar li[hidden] { display: none; } /* out-specifies the grid display so collapsed overflow rows stay hidden */
.hbar .track { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; height: 14px; overflow: hidden; }
.hbar .fill { background: var(--accent); height: 100%; }
.hbar .val { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0.1rem 0.45rem; font-size: 0.75rem; color: var(--ink-soft); }
.tag--ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bg); }
.tag--missing { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }

/* ---- Diagnostics tab: expandable per-hotel widget-mention drill-down ---- */

.hotel-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.hotel-list__head, .hotel-row__summary {
  display: grid;
  grid-template-columns: 2fr 1fr 0.8fr 1.2fr;
  gap: 0.75rem;
  align-items: center;
}
.hotel-list__head {
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line);
}
.hotel-row { border-bottom: 1px solid var(--line); }
.hotel-row:last-child { border-bottom: none; }
.hotel-row__summary {
  position: relative;
  padding: 0.6rem 1rem 0.6rem 1.9rem;
  cursor: pointer;
  list-style: none;
}
.hotel-row__summary::-webkit-details-marker { display: none; }
.hotel-row__summary::before {
  content: "▸";
  position: absolute;
  left: 0.9rem;
  color: var(--ink-soft);
}
.hotel-row[open] > .hotel-row__summary::before { content: "▾"; }
.hotel-row__body {
  padding: 0 1rem 1rem 1.9rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.hotel-row__body h4 { margin: 0 0 0.4rem; font-size: 0.75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.02em; }

/* ---- Phase 3: report-page redesign (verify-view charts) ---- */

:root {
  /* The one colour bank for every multi-series chart (Cisco): a chart with N
     series takes the first N, in this order. Stash orange (single-source),
     grey (Other) and slate (targets) are deliberately outside it. */
  --series-1: #2a78d6; /* blue */
  --series-2: #1baf7a; /* green */
  --series-3: #e8b400; /* yellow */
  --series-4: #d03b3b; /* red */
  --series-5: #8b5cf6; /* purple */
  --series-6: #e0609e; /* pink */
  --series-7: #8c5a3c; /* brown */
  /* Single-source graphs (one series only — enrollments, OTA share, GEPs, maps)
     use the Stash brand orange, deliberately NOT one of the categorical series
     colours above; their target/reference line uses the brand slate (Cisco). */
  --single-source: #d9831f;
  --target-line: #5c6b73;
  /* Sequential ramp (meters) */
  --seq-100: #cde2fb; --seq-450: #2a78d6; --seq-700: #0d366b;
  /* Status */
  --good: #0ca30c; --warning: #d9902b; --serious: #ec835a; --critical: #d03b3b;
  --success-ink: #0a6b0a;
  /* Chart chrome */
  --grid: #e7eaee; --baseline: #c7ccd2;
}

/* status pill in the page head */
.pill { display:inline-flex; align-items:center; gap:6px; padding:2px 9px 2px 7px; border-radius:999px; font-size:0.75rem; font-weight:600; }
.pill .dot { width:6px; height:6px; border-radius:50%; }
.pill.ok { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--success-ink); }
.pill.ok .dot { background: var(--good); }
.pill.info { background: #e8eef5; color: var(--accent); }
.pill.info .dot { background: var(--accent); }
.pill.critical { background: var(--danger-bg); color: var(--danger); }
.pill.critical .dot { background: var(--critical); }

/* operational-health alert banner */
.alert { display:flex; gap:12px; align-items:flex-start; border-radius: var(--radius); padding: 0.85rem 1rem; margin: 1.25rem 0; }
.alert__icon { flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; margin-top:1px; }
.alert__title { font-weight:700; font-size:0.95rem; margin-bottom:1px; }
.alert__desc { font-size:0.85rem; color: var(--ink-soft); line-height:1.45; }
.alert--critical { background: color-mix(in srgb, var(--critical) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--critical) 40%, transparent); }
.alert--critical .alert__icon { background: var(--critical); color:#fff; }
.alert--warning { background: color-mix(in srgb, var(--warning) 13%, var(--surface)); border:1px solid color-mix(in srgb, var(--warning) 45%, transparent); }
.alert--warning .alert__icon { background: var(--warning); color:#241a00; }
.alert--ok { background: var(--ok-bg); border:1px solid color-mix(in srgb, var(--good) 30%, transparent); }
.alert--ok .alert__icon { background: var(--good); color:#fff; }

/* section label */
.section-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); margin: 2rem 0 0.75rem; }

/* KPI cards */
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
.kpi { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; container-type: inline-size; }
/* Bigger tiles that fill their space (e.g. Stash Network) — centered, and the
   value shrinks so a long member count never overflows its tile (Cisco). */
.kpi-grid--big { gap: 1rem; }
.kpi-grid--big .kpi { padding: 1.2rem 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; container-type: inline-size; }
.kpi-grid--big .kpi__label { text-align: center; }
/* Size the value to the TILE, not the viewport: app-main is capped at 960px, so
   the old vw-based clamp just pinned to its max and a long member count broke
   mid-digit (1,429,60 / 9). cqi tracks the tile's own width, and nowrap keeps a
   formatted count on one line while still shrinking to fit on narrow screens. */
.kpi-grid--big .kpi__value { font-size: clamp(1.05rem, 17cqi, 2.3rem); white-space: nowrap; max-width: 100%; font-variant-numeric: tabular-nums; }
.kpi__label { font-size:0.75rem; color: var(--ink-soft); margin-bottom:0.35rem; }
/* Caps at 1.7rem so normal-width tiles look unchanged, but shrinks to fit the
   narrow 3-column tiles (Occupancy Impact) rather than letting a 6-figure count
   (e.g. member room nights) spill past the tile edge. */
.kpi__value { font-size: clamp(1rem, 16cqi, 1.7rem); font-weight:600; line-height:1; letter-spacing:-0.01em; white-space: nowrap; max-width: 100%; }
.kpi__sub { font-size:0.72rem; color: var(--ink-soft); margin-top:0.4rem; }
.kpi--hero { grid-column: span 2; }
.kpi--hero .kpi__value { font-size:2.1rem; }
@media (max-width: 560px) { .kpi--hero { grid-column: auto; } }

/* meter */
.meter { height:8px; border-radius:5px; background: var(--seq-100); overflow:hidden; margin-top:0.5rem; }
.meter__fill { height:100%; background: var(--seq-450); border-radius:5px; }


/* chart cards */
/* Cards size to their own content — no forced equal-height stretch (Cisco): a
   sparse tile card no longer pads out to match a tall chart neighbour. */
/* Two equal columns: a left/right pair is the same width AND height (stretch);
   full-width cards span both. One column on narrow screens. */
.chart-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; align-items: stretch; }
@media (max-width: 640px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.chart-card--wide { grid-column: 1 / -1; }
.chart-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:0.75rem; flex-wrap: wrap; }
.chart-card__title-group { display:flex; align-items:center; gap:0.3rem; min-width:0; flex:1 1 auto; }
.chart-card__titles { min-width:0; }
.chart-card__head h3 { font-size:0.95rem; font-weight:700; margin:0; }
.chart-card__desc { font-size:0.8rem; color: var(--ink-soft); margin:3px 0 0; line-height:1.4; }
.chart-card__src { font-size:0.72rem; color: var(--ink-soft); margin-top:2px; }
.chart-card__pill {
  flex:0 0 auto; align-self:flex-start; max-width:45%;
  font-size:0.68rem; color: var(--ink-soft);
  background: var(--bg); border:1px solid var(--line); border-radius:999px;
  padding:2px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chart-card--reserved { border-style: dashed; background: var(--bg); }

/* tabbed report navigation (progressive enhancement — panels stay visible w/o JS) */
.report-tabs { margin-top:0.5rem; }
/* File-folder tabs (Cisco): every tab takes an equal share of the row, with
   rounded top corners sitting on the panel's top rule; the selected folder is
   Stash orange and sits in front of the rule. */
.tabbar {
  container-type: inline-size;
  display:flex; gap:0.3rem; align-items:flex-end;
  border-bottom:2px solid var(--brand); margin-bottom:1.25rem; padding:0 0.25rem;
}
.tab {
  appearance:none; cursor:pointer; flex:1 1 0; min-width:0;
  padding:0.55rem 0.3rem; margin-bottom:-2px;
  /* Every title on one line: the type scales with the bar's width (cqi), so the
     longest ("Program Summary") always fits its equal share. */
  font-size: clamp(0.62rem, 1.45cqi, 0.9rem); font-weight:600; line-height:1.2; color: var(--ink-soft); text-align:center;
  white-space:nowrap;
  background: var(--bg); border:1px solid var(--line); border-bottom:2px solid var(--brand);
  border-radius:10px 10px 0 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.tab:hover { color: var(--ink); background: var(--surface); }
.tab.is-active { color: #fff; background: var(--brand); border-color: var(--brand); }

/* Upcoming Bookings: preferences keep one preference per line. */
.upcoming-bookings .chart-subtitle { margin-top: 1rem; }
/* Paged lists keep every row to one line (full value on hover), so paging
   never changes the card's height. */
.table--wrap .table.table--paged td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar--paged li .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-key { margin: 0.25rem 0 0.5rem; }
/* Systems: cards keep their own height (no stretched blank space), and the
   Systems & Integrations values never wrap. */
/* Systems & Integrations and SCR Calendar sit side by side at one height
   (Cisco); the rest of the tab keeps its own heights. */
.chart-grid[data-section="systems"] { align-items: start; }
.chart-grid[data-section="systems"] > .chart-card[data-widget-key="profile"],
.chart-grid[data-section="systems"] > .chart-card[data-widget-key="scr_calendar"] { align-self: stretch; }
.chart-grid[data-section="systems"] .chart-card[data-widget-key="profile"] .table--wrap .table { table-layout: auto; }
.chart-grid[data-section="systems"] .chart-card[data-widget-key="profile"] .table--wrap .table td { white-space: nowrap; overflow-wrap: normal; }
/* Stash Network: the expanded view's new hotels / keys, and the timeline brush. */
.network-new { margin: 1rem 0 0.5rem; }
.network-new .chart-subtitle { margin-bottom: 0.5rem; }
/* A side KPI with sub-rows reads like a summary tile: white headline, shaded
   label/value rows beneath, edge to edge. */
.kpi--side.kpi--with-subs { background: var(--surface); padding-bottom: 0; overflow: hidden; }
.kpi--with-subs .summary-tiles__subs { margin: 0.55rem -0.7rem 0; }
.kpi--with-subs .summary-tiles__sub { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.timeline-brush { margin-top: 0.25rem; touch-action: none; }
.timeline-brush__line { stroke: var(--ink-soft); stroke-width: 1; opacity: 0.6; }
.timeline-brush__window { fill: var(--brand); fill-opacity: 0.12; stroke: var(--brand); stroke-width: 1; cursor: grab; }
.timeline-brush__handle { fill: var(--brand); cursor: ew-resize; rx: 2; }
.stash-network__trend--hotels .timeline-brush__window { fill: var(--target-line); stroke: var(--target-line); }
.stash-network__trend--hotels .timeline-brush__handle { fill: var(--target-line); }
/* Upcoming Bookings: arrivals calendar with all-day event bars. */
.booking-cal { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem; }
.booking-cal__head { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.booking-cal__title { font-weight: 700; min-width: 10rem; text-align: center; }
.booking-cal__weekdays, .booking-cal__days, .booking-cal__bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.booking-cal__wd { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); text-align: center; padding: 0.2rem 0; }
.booking-cal__week { position: relative; border-top: 1px solid var(--line); min-height: 5.6rem; }
.booking-cal__days { position: absolute; inset: 0; }
.booking-cal__day { border-left: 1px solid var(--line); padding: 0.2rem 0.3rem; }
.booking-cal__day:first-child { border-left: 0; }
.booking-cal__day.is-outside .booking-cal__num { color: var(--line); }
.booking-cal__num { font-size: 0.72rem; color: var(--ink-soft); }
.booking-cal__bars { position: relative; padding-top: 1.3rem; row-gap: 2px; grid-auto-rows: 1.15rem; pointer-events: none; }
.booking-cal__bar { pointer-events: auto; margin: 0 2px; padding: 0 0.35rem; border-radius: 4px; background: var(--brand); color: #fff; font-size: 0.7rem; line-height: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.booking-cal__bar.is-points { background: var(--target-line); }
.booking-cal__bar.is-continued { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.booking-cal__more { pointer-events: auto; font-size: 0.68rem; color: var(--ink-soft); padding-left: 0.35rem; }
/* Bookings table: every cell on one line (a cut-off value shows on hover). */
.upcoming-bookings .bookings-table .table { table-layout: auto; }
.upcoming-bookings .bookings-table .table th,
.upcoming-bookings .bookings-table .table td { white-space: nowrap; overflow-wrap: normal; }
/* Diagnostics search */
.hotel-search { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.hotel-search__input { flex: 1 1 auto; max-width: 420px; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.95rem; background: var(--surface); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.summary-tiles__sub--note { display: block; }
.summary-tiles__sub--note .summary-tiles__sub-value { font-weight: 400; color: var(--ink-soft); }
.ota-conversion .chart-subtitle { margin-top: 1rem; }
.tabpanel + .tabpanel { margin-top:2rem; } /* stacked spacing when JS is off */
.chart-note { font-size:0.78rem; color: var(--ink-soft); margin-top:0.6rem; }

/* chart svg + legend */
.chart-body { margin-top:0.75rem; }
.chart-svg { width:100%; height:auto; overflow:visible; font-family:inherit; }
.chart-svg text { fill: var(--ink-soft); font-size:10px; }
.chart-svg .gridline { stroke: var(--grid); stroke-width:1; }
.chart-svg .axisline { stroke: var(--baseline); stroke-width:1; }
.chart-svg .lbl-ink { fill: var(--ink); font-weight:600; }
.legend { display:flex; flex-wrap:wrap; gap:0.9rem; font-size:0.78rem; color: var(--ink-soft); margin-top:0.6rem; }
.legend__item { display:flex; align-items:center; gap:6px; }
.legend__swatch { width:9px; height:9px; border-radius:2px; display:inline-block; }

/* ranked (horizontal top-N) list */
.ranked { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.5rem; }
.ranked__row { display:grid; grid-template-columns: minmax(70px, 30%) 1fr auto; align-items:center; gap:0.6rem; font-size:0.82rem; }
.ranked__name { color: var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ranked__track { height:14px; background: var(--grid); border-radius:3px; overflow:hidden; }
.ranked__fill { height:100%; border-radius:0 3px 3px 0; }
.ranked__val { text-align:right; font-variant-numeric: tabular-nums; font-weight:600; }
.ranked__group-label { font-size:0.72rem; font-weight:700; color: var(--ink-soft); margin:0.6rem 0 0.15rem; }

/* recommendation ring */
.ring-wrap { display:flex; align-items:center; gap:1rem; }
.ring { position:relative; width:78px; height:78px; flex:0 0 auto; }
.ring__pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; }

/* empty state */
.empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; padding: 1.4rem 0.6rem; color: var(--ink-soft); }
.empty-state__glyph { width:32px; height:32px; border-radius:50%; border:1.5px dashed var(--baseline); display:flex; align-items:center; justify-content:center; font-size:15px; margin-bottom:0.5rem; }
.empty-state__msg { font-size:0.82rem; max-width:280px; line-height:1.5; }

/* view-as-table disclosure */
.view-table { margin-top:0.6rem; }
.view-table > summary { font-size:0.75rem; color: var(--ink-soft); cursor:pointer; list-style:none; }
.view-table > summary::-webkit-details-marker { display:none; }
.view-table > summary::before { content:"▸ "; }
.view-table[open] > summary::before { content:"▾ "; }

/* ---- Instant browse surface ---- */
.browse-main { min-width: 0; }
/* HMC hotel switcher: a row of hotel pills below the controls (hidden for a
   single hotel). Picking one renders its normal single-hotel view. */
.browse-sidebar { margin-bottom: 1rem; }
.browse-sidebar__list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.browse-sidebar__item { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.9rem; cursor: pointer; color: var(--ink); }
.browse-sidebar__item:hover { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border-color: var(--brand); }
.browse-sidebar__item.is-active { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); border-color: var(--brand); color: var(--brand-hover); font-weight: 600; }

.browse-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gap); margin-bottom: 0.5rem; }
.browse-controls .field { margin-bottom: 0; }
/* Keep the hotel/HMC selectors to a sensible width so Download Report fits on
   the same row (pushed right); the selects still shrink on narrow screens. */
#browse-hotel, #browse-hmc { width: 230px; max-width: 100%; }
.browse-asof { margin: 0 0 1rem; }
.field__label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.3rem; }
/* Period picker: a button that opens a popover with presets + a month calendar */
.period-picker { position: relative; }
.period-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: 0.55rem 0.7rem; font-size: 0.95rem; cursor: pointer; text-align: left;
  /* Same box as the Hotel / HMC dropdowns beside it. */
  width: 230px; max-width: 100%; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.period-btn:hover { border-color: var(--brand); }
/* Right-anchored so the popover never runs off the right edge (the period
   picker sits toward the right of the controls row). */
.period-popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 320px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); padding: 0.9rem;
}
.period-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 0.6rem; }
.period-presets button {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 6px; padding: 0.55rem 0.6rem; font-size: 0.9rem; cursor: pointer;
}
.period-presets button:hover { border-color: var(--brand); }
.period-presets button.is-active { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); border-color: var(--brand); color: var(--brand-hover); font-weight: 600; }
.period-divider { font-size: 0.8rem; color: var(--ink-soft); margin: 0.5rem 0; }
.period-cal__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.5rem; }
.period-cal__nav-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: var(--ink); }
.period-cal__nav-btn:disabled { opacity: 0.35; cursor: default; }
.period-cal__year { font-weight: 700; }
.period-cal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.period-cal__month { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 0.5rem 0; font-size: 0.85rem; cursor: pointer; color: var(--ink); }
.period-cal__month:hover:not(:disabled) { border-color: var(--brand); }
.period-cal__month:disabled { opacity: 0.3; cursor: default; }
.period-cal__month.in-range { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.period-cal__month.is-end { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.period-cal__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.7rem; }
.browse-chart { width: 100%; max-width: 100%; height: auto; overflow: visible; display: block; margin-inline: auto; }
/* A chart wider than its card renders at intrinsic px inside a scroll wrapper,
   so bars keep their size instead of scaling down to a smear. */
.chart-scroll { overflow-x: auto; }
.browse-chart--wide { width: auto; max-width: none; }
.browse-chart__line { stroke: var(--single-source); stroke-width: 2; fill: none; }
.browse-chart__dot { fill: var(--single-source); stroke: var(--surface); stroke-width: 1.5; cursor: pointer; }
.browse-chart__ref { stroke: var(--ink-soft); stroke-width: 1.5; opacity: 0.7; }
.browse-chart__grid { stroke: var(--line); stroke-width: 1; }
.browse-chart__axisline { stroke: var(--ink-soft); stroke-width: 1; opacity: 0.5; }
.browse-chart__axis { fill: var(--ink-soft); font-size: 12px; }
.browse-chart__empty { fill: var(--ink-soft); font-size: 12px; }
/* Highlight a bar on hover (Cisco: "the highlight when hovering over") — a
   brightened fill + a crisp outline so the hovered value stands out while its
   tooltip is up. Grid/axis lines and comparison bars are excluded. */
.browse-chart rect[data-si]:hover { filter: brightness(1.08); stroke: var(--ink); stroke-width: 1.5; }

/* ---- Occupancy Impact donut ---- */
.occupancy-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding-top: 0.4rem; }
.occupancy-donut__chart { flex: 0 0 auto; width: 200px; }
.occupancy-donut__chart .browse-chart { width: 200px; }
.occupancy-donut__center-value { fill: var(--ink); font-size: 26px; font-weight: 700; }
.occupancy-donut__center-label { fill: var(--ink-soft); font-size: 10px; }
.occupancy-donut__side { flex: 1 1 200px; display: flex; flex-direction: column; gap: 0.5rem; }
.occupancy-donut__readout { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.occupancy-donut__readout-label { font-size: 0.8rem; color: var(--ink-soft); }
.occupancy-donut__readout-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.occupancy-donut__legend { margin-top: 0.35rem; padding-top: 0.6rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.4rem; }
.occupancy-donut__legend-item { display: flex; align-items: center; gap: 0.5rem; }
.occupancy-donut__dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.occupancy-donut__legend-label { flex: 1 1 auto; font-size: 0.85rem; }
.occupancy-donut__legend-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.occupancy-donut__note { margin-top: 0.5rem; }

/* ---- Browse: hbar segments, tabs, collapse, insights, legend ---- */
.track--seg { display: flex; }
.hbar-group { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.9rem; }
.hbar-group__label { font-weight: 700; font-size: 0.85rem; }
.chart-card__note { margin-top: 0.5rem; }
.chart-card--collapsible .chart-card__head { position: relative; }
.chart-card__toggle { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 0.9rem; line-height: 1; padding: 0.2rem 0.4rem; }
.chart-card__expand { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 1rem; line-height: 1; padding: 0.2rem 0.4rem; flex-shrink: 0; }
.chart-card__expand:hover { color: var(--ink); }
.chart-card__expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.hbar-more { display: inline-block; margin-top: 0.5rem; background: none; border: none; cursor: pointer; color: var(--accent); font-size: 0.82rem; line-height: 1; padding: 0.2rem 0; }
.hbar-more:hover { text-decoration: underline; }
.hbar-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Expand-to-modal: enlarged chart + underlying data table. */
.chart-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(0, 0, 0, 0.45); }
.chart-modal__dialog { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); width: 100%; max-width: 1120px; max-height: 90vh; overflow: auto; padding: 1.2rem 1.4rem; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.28); }
.chart-modal__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.chart-modal__title-group { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.chart-modal__title { font-weight: 700; font-size: 1.05rem; }
.chart-modal__close { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 1.6rem; line-height: 1; padding: 0 0.3rem; }
.chart-modal__close:hover { color: var(--ink); }
.chart-modal__caption { margin: 1rem 0 0.4rem; }
.chart-card__caret { display: inline-block; transition: transform 0.15s ease; }
.chart-card.is-collapsed .chart-card__caret { transform: rotate(-90deg); }
/* SCR Calendar. */
.scr-cal__month { font-weight: 700; font-size: 0.9rem; margin: 0.4rem 0; }
.scr-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 320px; }
.scr-cal__wd { font-size: 0.7rem; color: var(--ink-soft); text-align: center; padding-bottom: 2px; }
.scr-cal__day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
.scr-cal__day--empty { border: 0; }
.scr-cal__day--scr { background: color-mix(in srgb, var(--good) 25%, var(--surface)); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.scr-cal__day--no { background: color-mix(in srgb, var(--critical) 30%, var(--surface)); border-color: color-mix(in srgb, var(--critical) 55%, var(--line)); font-weight: 700; }
.scr-cal__legend { display: flex; gap: 1rem; margin-top: 0.6rem; font-size: 0.75rem; color: var(--ink-soft); }
.scr-cal__legend-item { display: flex; align-items: center; gap: 0.35rem; }
.scr-cal__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ari-block { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.ari-block__title { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.4rem; }
.ari-block__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.4rem; }
/* Stash Network trend: orange line for members, Stash slate for hotels. */
.stash-network__trend { margin-top: 0.75rem; }
.stash-network__trend--hotels .browse-chart__line { stroke: var(--target-line); }
.stash-network__trend--hotels .browse-chart__dot { fill: var(--target-line); }

/* Stash Enrollment Hub: aggregate header + chronograph timeline + associate
   dropdown + medal top-5. */
.hub-search { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 0.85rem; margin-bottom: 0.6rem; }
.hub-summary { display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.hub-summary__total { display: flex; flex-direction: column; gap: 0.15rem; }
.hub-summary__value { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.hub-summary__label { font-size: 0.75rem; color: var(--ink-soft); }
.hub-heatmap { margin-bottom: 0.75rem; }
.hub-heatmap__title { margin-bottom: 0.3rem; }
.hub-heatmap__strip { display: flex; gap: 2px; }
.hub-heatmap__cell { flex: 1 1 0; min-width: 0; height: 22px; border-radius: 3px; border: 1px solid var(--line); }
.hub-heatmap__legend { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }
.hub-heatmap__scale { flex: 0 1 160px; height: 8px; border-radius: 4px; }
.hub-medals { list-style: none; margin: 0; padding: 0; }
.hub-medals__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.hub-medals__item:last-child { border-bottom: 0; }
.hub-medals__rank { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: #fff; flex: 0 0 auto; }
.hub-medals__item--gold .hub-medals__rank { background: #d4af37; }
.hub-medals__item--silver .hub-medals__rank { background: #9aa0a6; }
.hub-medals__item--bronze .hub-medals__rank { background: #b06a2c; }
.hub-medals__item--black .hub-medals__rank { background: var(--ink); }
.hub-medals__name { flex: 1 1 auto; font-size: 0.9rem; }
.hub-medals__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.hub-detail { padding: 0.5rem 0; }
.hub-detail__name { font-weight: 700; font-size: 1rem; }
.hub-detail__stat { font-size: 1.4rem; font-weight: 700; margin: 0.3rem 0; }

/* Post Stay Surveys: current TripAdvisor score row. */
.tripadvisor { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0.75rem 0 0.25rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--series-1) 5%, var(--surface)); }
.tripadvisor__label { font-weight: 700; font-size: 0.85rem; }
.tripadvisor__rating { font-weight: 700; font-size: 1.1rem; color: var(--series-1); }
.tripadvisor__meta { font-size: 0.82rem; color: var(--ink-soft); }
/* In the survey card's tile row, TripAdvisor is a plain tile like its neighbours. */
.survey-tiles .tripadvisor { display: block; margin: 0; padding: 0; background: none; }
.survey-tiles .tripadvisor__rating { font-size: 1.7rem; }
.survey-tiles + * { margin-top: 1rem; }

/* Post Stay Surveys: most-common words split by sentiment (word-cloud chips). */
.review-words { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin: 1rem 0 0.25rem; }
@media (max-width: 640px) { .review-words { grid-template-columns: 1fr; } }
.review-words__title { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 0.5rem; }
.review-words__cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.review-chip { display: inline-flex; align-items: baseline; gap: 0.25rem; padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); line-height: 1.1; }
.review-chip--pos { background: color-mix(in srgb, var(--good) 10%, var(--surface)); border-color: color-mix(in srgb, var(--good) 30%, var(--line)); }
.review-chip--neg { background: color-mix(in srgb, var(--critical) 9%, var(--surface)); border-color: color-mix(in srgb, var(--critical) 30%, var(--line)); }
.review-chip__count { font-size: 0.7em; color: var(--ink-soft); }

/* Overview alerts region: op-health flags + AI Insights, spanning the grid. */
.overview-alerts { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.5rem; }
.overview-alerts .alert { margin: 0; }
/* Overview glossary: definitions of the metrics/acronyms used in the tool */
.glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; margin: 0; }
@media (max-width: 640px) { .glossary { grid-template-columns: 1fr; } }
/* A fixed term column, so every definition starts at the same indent. */
.glossary__item { display: grid; grid-template-columns: 10.5rem 1fr; gap: 0.5rem 0.75rem; align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.glossary__term { font-weight: 700; font-size: 0.85rem; }
.glossary__def { margin: 0; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.4; }

/* Key Metrics, Acronyms, and AI Overview: one card, two sections sharing the
   glossary's type scale and hairline rules so they read as one piece. */
.overview-reference__rule { border: 0; border-top: 1px solid var(--line); margin: 0.9rem 0; }
.insights-list { margin: 0; padding-left: 1.1rem; list-style: disc; }
.insights-list li { padding: 0.2rem 0; font-size: 0.85rem; line-height: 1.45; }
.insights-list__link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.chart-card.is-flash { box-shadow: 0 0 0 3px var(--brand); transition: box-shadow 0.3s ease; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--ink-soft); }
.chart-legend__item { display: flex; align-items: center; gap: 0.35rem; }
.chart-legend__dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-legend__item--toggle { cursor: pointer; user-select: none; }
.chart-legend__item--toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.chart-legend__item.is-off { opacity: 0.45; text-decoration: line-through; }
.browse-map-holder { margin-bottom: 0.75rem; }
/* The wrapper owns the size: capped width + the map's fixed viewBox aspect
   (1343/761, preserved at every zoom) so the SVG fills it exactly — never
   letterboxed, never overflowing the card into the text above it. */
.browse-map-wrap { position: relative; width: 100%; max-width: 860px; margin: 0 auto; aspect-ratio: 1343 / 761; overflow: hidden; border-radius: var(--radius); }
/* overflow:hidden is essential — the basemap holds the whole world, but the
   viewBox shows only a window onto it; without clipping, every off-window
   country paints outside the box and floods the page. */
.browse-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; touch-action: none; cursor: grab; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.browse-map.is-panning { cursor: grabbing; }
.map-zoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.map-zoom__btn { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.map-zoom__btn:hover { border-color: var(--accent); color: var(--accent); }
.map-attribution { margin-top: 0.35rem; font-size: 0.72rem; }
.hbar li.is-unmapped .label { color: var(--danger); font-weight: 600; }
.map-markets__note { margin-top: 0.6rem; color: var(--danger); }

/* Custom hover tooltip (instant, dark, multi-line) — replaces native <title> */
/* Bar/Line switch, bottom right under every bar chart. */
.chart-view__toggle { display: flex; justify-content: flex-end; gap: 0; margin-top: 0.35rem; }
.chart-view__btn { padding: 0.2rem 0.6rem; font-size: 0.75rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.chart-view__btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.chart-view__btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }
.chart-view__btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.browse-chart__series-line { stroke-width: 2; }
.browse-chart__series-line--compare { stroke-width: 1.5; opacity: 0.7; }
/* A series' monthly trend beside its legend label (ADR Impact). */
.chart-legend__trend { margin-left: 0.35rem; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.chart-legend__trend--up { color: var(--ok); }
.chart-legend__trend--down { color: var(--danger); }
/* SCR Calendar: last month and this month side by side. */
.scr-cal__months { display: grid; grid-template-columns: 1fr; gap: 1rem; justify-items: center; }
/* The calendar, its caption and key sit centred in the card (Cisco, 2026-10-13). */
.scr-cal__block { width: 100%; max-width: 320px; }
.chart-card[data-widget-key="scr_calendar"] .scr-cal__caption { text-align: center; }
.chart-card[data-widget-key="scr_calendar"] .scr-cal__legend { justify-content: center; }
.chart-tip { position: fixed; z-index: 1200; pointer-events: none; opacity: 0; background: #1a1d21; color: #fff; border-radius: 8px; padding: 0.5rem 0.65rem; font-size: 0.8rem; line-height: 1.35; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32); max-width: 280px; transition: opacity 0.08s ease; }
.chart-tip.is-on { opacity: 1; }
.chart-tip__line { white-space: normal; overflow-wrap: break-word; }
.chart-tip__line--head { font-weight: 700; margin-bottom: 1px; }

/* Chart with a side column of period totals (revenue / stays / nights) */
.chart-with-totals { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.chart-with-totals__main { flex: 1 1 300px; min-width: 0; }
/* Wide enough that a totals label ("Stash ADR Premium %") or a nine-figure
   value reads whole — never clipped or stranding a word on its own line. */
.chart-with-totals__side { flex: 0 0 auto; width: 190px; display: flex; flex-direction: column; gap: 0.5rem; }
.chart-with-totals__title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.kpi--side { padding: 0.6rem 0.7rem; background: var(--bg); }
.kpi--side .kpi__value { font-size: clamp(0.95rem, 12cqi, 1.15rem); }

/* Static report: totals block beside/under a chart (data.totals) */
.report-totals { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.6rem 0; }
.report-totals__title { width: 100%; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }

/* Sub-heading above one chart inside a multi-chart card */
.chart-subtitle { font-size: 0.85rem; font-weight: 700; margin: 0.6rem 0 0.2rem; }

/* Performance Summary: headline tiles with nested components (Points Awarded +
   Stash Funded read as parts of Program Cost). */
.summary-tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.summary-tiles__group { flex: 1 1 200px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.summary-tiles__tile { padding: 0.9rem 1rem; }
.summary-tiles__label { font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 0.35rem; }
.summary-tiles__value { font-size: 1.7rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.summary-tiles__subs { border-top: 1px solid var(--line); background: var(--bg); }
.summary-tiles__sub { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 1rem; font-size: 0.85rem; }
.summary-tiles__sub + .summary-tiles__sub { border-top: 1px solid var(--line); }
.summary-tiles__sub-label { color: var(--ink-soft); }
.summary-tiles__sub-value { font-variant-numeric: tabular-nums; }

/* Program Cost waterfall: bold rows, rules above Points Purchased / Your Point
   Cost, and a shaded Total column. */
.cost-waterfall .cost-waterfall__label { font-weight: 400; }
.cost-waterfall .cost-waterfall__label--bold { font-weight: 700; }
.cost-waterfall tr.cost-waterfall__rule td { border-top: 2px solid var(--ink-soft); }
.cost-waterfall th.cost-waterfall__total, .cost-waterfall td.cost-waterfall__total { background: var(--bg); }

/* Referral / feeder map: period totals shown by default, ranked list on demand */
.map-totals { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; margin: 0.6rem 0; }
.map-totals__title { width: 100%; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
/* The summarized numbers sit horizontally across the card. Without this the
   .map-totals__row wrapper was an unstyled block, so its tiles collapsed into a
   narrow shrink-to-fit column (the stacked "background bug" on the totals). */
.map-totals__row { display: flex; flex-wrap: nowrap; gap: 0.5rem; width: 100%; }
/* Every total shares the line equally (Referred Guests carries four), so they
   never wrap to a second row. */
.map-totals__row .kpi--side { flex: 1 1 0; min-width: 0; }
.map-markets { margin-top: 0.5rem; }
.map-markets__body { margin-top: 0.5rem; }

/* Enrollment target reference line (dark dashed) + its legend swatch */
.browse-chart__reftarget { stroke: var(--ink); stroke-width: 2; opacity: 0.85; }
.browse-chart__ref-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.chart-legend__dash { width: 16px; border-top: 2px dashed var(--ink); display: inline-block; }
/* Line-chart key: swatches drawn like the marks they name (solid series line,
   dashed period-average line). */
.chart-key__swatch { width: 16px; display: inline-block; }
.chart-key__line { border-top: 2px solid var(--single-source); }
.chart-key__ref { border-top: 1.5px dashed var(--ink-soft); opacity: 0.85; }

/* Comparison-mode second bar (Browse's per-chart YoY / all-time toggle): fill
   is set inline per segment (JS) — the same source color as the matching
   current-period bar when the comparison splits by source, muted grey
   otherwise — and this opacity is what marks it as a benchmark, not more data. */
.browse-chart__comparebar { opacity: 0.35; }

/* Per-chart comparison-mode toggle, in the card head next to the title */
.comparison-toggle { display: flex; gap: 0.4rem; align-items: center; }
.comparison-toggle select { font-size: 0.75rem; padding: 0.2rem 0.4rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: inherit; }

/* Post Stay Surveys per-review dropdown */
.survey-reviews__label { margin: 0.75rem 0 0.25rem; }
.survey-reviews__select { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 0.9rem; }
.survey-reviews__text { margin-top: 0.5rem; padding: 0.6rem 0.7rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.88rem; color: var(--ink-soft); min-height: 1.5rem; }

/* Microsite & Deal Pages: space between the tiles and the deal-page table, and
   room for the page path so it reads whole. */
.page-traffic__deals-title { margin-top: 1rem; }
.table--wrap .table th[data-col="page"] { width: 34%; }
.ga4-unmatched { margin-top: var(--gap); }

/* A summary tile whose side has nothing on file (e.g. no deal pages). */
.summary-tiles__empty { font-size: 0.9rem; padding: 0.35rem 0 0.1rem; }
/* Page traffic's two tiles stay the same height, even when one side is empty. */
.page-traffic > .summary-tiles { align-items: stretch; }

/* Widget Analysis: a tile's left rule reads the change at a glance — green when
   the metric moved the right way after adoption, red when it moved the wrong way. */
.widget-impact--better { border-left: 3px solid var(--ok); }
.widget-impact--worse { border-left: 3px solid var(--danger); }
.widget-trend__title { font-size: 12px; font-weight: 700; fill: var(--ink); }
.widget-impact__key { margin: 1rem 0 0.25rem; }
.widget-impact__months-toggle { margin-top: 0.5rem; }
.widget-trend__adopted { stroke: var(--ink); stroke-width: 1; opacity: 0.6; }
.widget-impact__status { margin-bottom: 0.5rem; }

/* Promotions / Deals: all five totals on one row, then the "By promotion"
   drawer beneath. */
.promo-impact > .summary-tiles { flex-wrap: nowrap; align-items: stretch; }
.promo-impact > .summary-tiles > .summary-tiles__group { flex: 1 1 0; min-width: 0; }
.promo-impact__toggle { margin-top: 0.75rem; }

/* History: Presentations (the current template, then collapsed previous versions). */
.presentations { margin-top: var(--gap); }
.presentations__title { margin: 0; }
.presentations__subhead { margin: 1.25rem 0 0.5rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.presentations__list { list-style: none; margin: 0; padding: 0; }
.presentation { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.presentation:first-child { border-top: 0; }
.presentation--current { padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.presentation__main { min-width: 0; }
.presentation__title { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.presentation__meta { overflow-wrap: anywhere; }
.presentation__notes { margin-top: 0.2rem; }
.presentation .row-actions form { display: inline; }
.presentations__previous { margin-top: 0.25rem; }
.presentations__previous > summary { cursor: pointer; }
.presentations__upload { margin-top: 1.25rem; padding-top: 0.25rem; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .presentation { flex-direction: column; align-items: flex-start; } .presentation .row-actions { justify-content: flex-start; } }

/* Additional Channels: SPER Individual Bookings, a sideways slider: every
   value on one line, never cut off or wrapped. */
.sper-bookings { margin-top: 0.75rem; }
.sper-bookings .chart-subtitle { margin-bottom: 0.4rem; }
.sper-bookings .table--wrap .table { table-layout: auto; width: max-content; min-width: 100%; }
.sper-bookings .table--wrap .table th,
.sper-bookings .table--wrap .table td { white-space: nowrap; overflow-wrap: normal; overflow: visible; text-overflow: clip; }

/* Enrollment Widget v2 Impact: a not-yet-adopted hotel's last months with
   the widget, one metric at a time, the tabs beneath spanning the card. */
.widget-projection { margin-top: 1rem; }
.widget-projection__chart svg { width: 100%; height: auto; }
/* Actual in ink, the estimate in orange (Cisco, 2026-10-13). */
.widget-projection .browse-chart__line { stroke: var(--ink); }
.widget-projection .browse-chart__dot { fill: var(--ink); }
.widget-projection .browse-chart__reftarget { stroke: var(--single-source); opacity: 1; }
.widget-projection .browse-chart__ref-dot { fill: var(--single-source); }
.widget-projection__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.6rem; }
.widget-projection__tab { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  color: var(--ink-soft); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.widget-projection__tab.is-active { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); border-color: var(--brand); color: var(--brand-hover); }