/* ── Secure Score Tab Styles ─────────────────────────────────────────────────── */

.secure-score-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem;
}

/* ── Main Score Display ────────────────────────────────────────────────────
 *
 * A COLUMN, NOT A ROW.
 *
 * This was `display:flex` across a row holding the gauge, the scope tiles, the
 * unmeasured banner, the estate note and the data-age box. Five flex children,
 * four of them paragraphs, sharing the width of one card: the prose collapsed
 * into columns a few words wide running hundreds of pixels down the page, and
 * the component cards were pushed off the bottom of the screen.
 *
 * The gauge and the scope tiles are the figures, and they stack. Everything
 * that explains them moved into .ss-explain.
 */
.secure-score-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

/* The scope tiles get the card's full width instead of a flex share of it. */
.secure-score-main > .ss-scope { align-self: stretch; }

.ss-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.score-gauge-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-gauge {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* ── The explain panel ─────────────────────────────────────────────────────
 *
 * Every line of prose this page used to print inline. It is not decoration:
 * a client-facing score has to be explainable figure by figure, and the
 * unmeasured ceiling, the estate the score was sized against, the weighting
 * basis and the age of the data are the explanation. Hover, focus or tap to
 * read it; it prints expanded, so nothing is lost from an exported PDF.
 */
.ss-explain-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.ss-explain-btn {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.ss-explain-btn::before {
  content: 'ⓘ';
  margin-right: 0.35rem;
  opacity: 0.75;
}

.ss-explain-btn:hover,
.ss-explain-btn:focus-visible,
.ss-explain-wrap.is-open .ss-explain-btn {
  color: var(--logo-cyan);
  border-color: var(--logo-cyan);
  background: var(--card-bg);
  outline: none;
}

.ss-explain {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  /* Wide enough to read a paragraph at, capped so it never exceeds the
     viewport on a laptop — the failure this whole change is fixing was prose
     rendered too narrow to read. */
  width: min(680px, 88vw);
  max-height: 62vh;
  overflow-y: auto;
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  z-index: 120;
}

/* Hover for the mouse, focus-within for the keyboard, .is-open for the click
   and touch path the script sets. All three land on the same rule so none of
   them can drift out of step with the others. */
.ss-explain-wrap:hover .ss-explain,
.ss-explain-wrap:focus-within .ss-explain,
.ss-explain-wrap.is-open .ss-explain {
  display: block;
}

/* Inside the panel these blocks are stacked sections, not free-floating notes:
   drop the centring and the width cap they carry for inline use. */
.ss-explain > * { max-width: none; margin-left: 0; margin-right: 0; }
.ss-explain > *:first-child { margin-top: 0; }
.ss-explain > *:empty { display: none; }

.ss-explain .ss-scope-detail:not(:empty),
.ss-explain .data-age-info {
  margin-top: var(--space-3);
}

.data-age-info {
  padding: 1rem;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--muted);
}

.data-age-info small {
  line-height: 1.6;
  display: block;
}

.data-age-info strong {
  color: var(--text);
  font-weight: 600;
}

/* Component Scores Section */
.component-scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.component-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.component-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.component-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.component-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.component-weight {
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface2);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

/* ── Insurability Score & Premium Outlook panel ──────────────────────────── */
.insurability-body {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.insurability-score-block {
  text-align: center;
  flex-shrink: 0;
  min-width: 130px;
  padding: 0.5rem;
}
.insurability-score-number {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-display);
}
.insurability-score-label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.3rem;
  font-weight: 600;
}
.insurability-score-breakdown {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.5rem;
  line-height: 1.5;
}

.insurability-direction-block { flex: 1; min-width: 220px; }

.insurability-direction-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.65rem;
}
.direction-reduce  { background: rgba(39,174,96,0.12);  color: #27ae60; }
.direction-stable  { background: rgba(39,174,96,0.08);  color: #27ae60; }
.direction-neutral { background: rgba(245,158,11,0.12); color: #f39c12; }
.direction-risk    { background: rgba(230,126,34,0.12); color: #e67e22; }
.direction-likely  { background: rgba(231,76,60,0.12);  color: #e74c3c; }
.direction-icon    { font-size: 1.1rem; }

.insurability-trend-note {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0 0 0.85rem;
  line-height: 1.5;
}

.insurability-drivers { display: flex; flex-direction: column; gap: 0.4rem; }
.drivers-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}
.driver-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.4;
}
.driver-dot        { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.driver-dot-red    { background: var(--red); }
.driver-dot-amber  { background: var(--amber); }
.driver-dot-green  { background: var(--green); }

@media (max-width: 600px) {
  .insurability-body { flex-direction: column; gap: 1rem; }
  .insurability-score-number { font-size: 2.5rem; }
}

/* ── Score header bar (refresh / export) ─────────────────────────────────── */
.score-header-bar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.score-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.score-action-btn:hover {
  border-color: var(--logo-cyan);
  color: var(--logo-cyan);
  background: rgba(var(--tint-light-rgb), 0.06);
}

.score-report-btn {
  background: rgba(var(--tint-rgb), 0.08);
  border-color: rgba(var(--tint-rgb), 0.4);
  color: var(--tint);
}

.score-report-btn:hover {
  background: rgba(var(--tint-rgb), 0.15);
  border-color: var(--tint);
  color: var(--tint);
}

/* ── Score tooltip ─────────────────────────────────────────────────────────── */
.score-tooltip-wrap {
  position: relative;
}

.score-info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--logo-cyan);
  background: transparent;
  color: var(--logo-cyan);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.score-info-btn:hover,
.score-info-btn:focus {
  background: var(--logo-cyan);
  color: #fff;
  outline: none;
}

.score-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--text);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.55;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 100;
  white-space: normal;
  pointer-events: none;
}

.score-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 6px;
  border: 6px solid transparent;
  border-top-color: var(--text);
}

.score-tooltip-wrap:hover .score-tooltip,
.score-info-btn:focus + .score-tooltip {
  display: block;
}

.component-score-bar {
  width: 100%;
  height: 10px;
  background: var(--surface2);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.score-bar-fill {
  height: 100%;
  border-radius: 5px;
  width: 0%;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.component-score-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.component-card small {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Secure Score Sections */
.secure-score-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.secure-score-section-title {
  margin: 0 0 1.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

/* What moved the score — explanations under the trend chart */
.ss-trend-why:not(:empty) { margin-top: 1.25rem; }
.ss-trend-why-title { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.ss-trend-why-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.ss-trend-why-item { border-bottom: 1px solid var(--border); }
.ss-trend-why-item summary {
  display: grid;
  grid-template-columns: 5rem 3rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0;
  cursor: pointer;
  font-size: 0.875rem;
}
.ss-trend-why-month { color: var(--muted); }
.ss-trend-why-delta { font-weight: 650; font-variant-numeric: tabular-nums; }
.ss-trend-up   { color: var(--green, #1e8e3e); }
.ss-trend-down { color: var(--red, #c0392b); }
.ss-trend-flat { color: var(--muted); }
.ss-trend-why-drivers {
  margin: 0 0 0.6rem 8.5rem;
  padding-left: 1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text);
}
.ss-trend-why-drivers li + li { margin-top: 0.3rem; }
.ss-trend-why-note { margin: 0 0 0.75rem 8.5rem; font-size: 0.8rem; color: var(--muted); font-style: italic; }
@media (max-width: 700px) {
  .ss-trend-why-item summary { grid-template-columns: 1fr auto; }
  .ss-trend-why-summary { grid-column: 1 / -1; }
  .ss-trend-why-drivers, .ss-trend-why-note { margin-left: 0; }
}

/* Trend Chart */
.trend-chart-container {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 1rem;
}

.trend-chart {
  min-width: 100%;
}

/* Recommendations */
.recommendations-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.recommendation-card {
  background: var(--surface2);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1.25rem;
  transition: all 0.2s ease;
}

.recommendation-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.recommendation-card.priority-high {
  border-left-color: var(--red);
  background: rgba(232, 57, 74, 0.04);
  box-shadow: inset 3px 0 0 var(--red);
}

.recommendation-card.priority-medium {
  border-left-color: var(--amber);
  background: rgba(245, 158, 11, 0.04);
}

.recommendation-card.priority-info {
  border-left-color: var(--green);
  background: rgba(34, 197, 94, 0.04);
}

.recommendation-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.5rem;
}

.recommendation-icon {
  font-size: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.recommendation-header h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.recommendation-header small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: 0.25rem;
}

.recommendation-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
}

/* Section headers
   A flex row: the title block takes the space, actions sit at the trailing
   edge. This used to be margin-bottom alone, so any button placed inside a
   .section-header dropped onto its own line below the subtitle, left-aligned,
   regardless of markup order. Direct children only, so a tab that nests its
   own layout inside the header is unaffected. */
.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
  margin-bottom: var(--space-8, 2rem);
}

/* Title and actions share the first row; the subtitle is forced onto a full
   width second row by its 100% basis. `order` does the work rather than a
   wrapper element, so this holds for all the shapes already in the markup —
   title alone, title + subtitle, title + button(s), and title + subtitle +
   .rpt-actions — without touching a single header's HTML. Two buttons simply
   sit side by side at the trailing edge. */
.section-header > *                 { order: 2; }             /* actions      */
.section-header > .section-title    { flex: 1 1 auto; order: 1; margin-bottom: 0; }
.section-header > .section-subtitle { flex: 1 1 100%; order: 3; }

/* iOS Large Title: 34px, bold, tightly tracked. The tracking is what stops a
   heading this size reading as loose — Apple tightens as type grows and opens
   up as it shrinks, which is the opposite of what most web type scales do. */
.section-title {
  margin: 0;
  font-size: var(--text-large-title, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--track-large, -0.4px);
  color: var(--text);
}

.section-subtitle {
  margin: 0;
  font-size: var(--text-subhead, 15px);
  line-height: 1.4;
  letter-spacing: var(--track-body, -0.2px);
  color: var(--muted);
  font-weight: 400;
}

/* Responsive Design */
@media (max-width: 768px) {
  .secure-score-wrapper {
    gap: 1.5rem;
  }

  .secure-score-main {
    flex-direction: column;
    gap: 1.5rem;
  }

  .component-scores {
    grid-template-columns: 1fr;
  }

  .secure-score-section {
    padding: 1.5rem;
  }

  .trend-chart-container {
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .secure-score-wrapper {
    padding: 0.5rem;
    gap: 1rem;
  }

  .secure-score-section {
    padding: 1rem;
  }

  .recommendation-header {
    gap: 0.75rem;
  }

  .recommendation-icon {
    font-size: 1.25rem;
  }
}

/* ── Print-only report header (hidden on screen) ─────────────────────────── */
.print-report-header { display: none; }

/* ── Print / Export layout ───────────────────────────────────────────────── */
@media print {
  /* Hide UI chrome — correct element classes/IDs */
  .site-header,
  .side-menu,
  #mfaBanner,
  .score-header-bar { display: none !important; }

  /* Reset dashboard margin (sidebar is gone) */
  #dashboard { margin-left: 0 !important; }

  /* No panel-visibility forcing here — see the matching note in styles.css.
     This block used to hide every .tab-panel and re-show #tab-secure-score,
     and because this file loads second that made every tab print the Secure
     Score page. The `hidden` attribute on inactive panels is enough. */

  .secure-score-wrapper { padding: 0; gap: 1rem; }

  /* Report header */
  .print-report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #00b4d8;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .print-report-logo {
    font-size: 1.3rem;
    font-weight: 700;
    color: #00b4d8;
  }
  .print-report-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.8rem;
    color: #555;
    gap: 0.2rem;
  }

  /* Show score methodology tooltips inline */
  .score-tooltip-wrap { position: static; }
  .score-info-btn { display: none; }
  .score-tooltip {
    display: block !important;
    position: static;
    width: auto;
    background: #f5f5f5;
    color: #333;
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0.4rem 0.6rem;
    border-radius: 3px;
    margin-top: 0.5rem;
    box-shadow: none;
    pointer-events: none;
  }
  .score-tooltip::after { display: none; }

  /*
   * The explain panel prints EXPANDED, in the flow, always.
   *
   * On screen it is a disclosure; on paper it is the methodology, and a board
   * pack that shows "Overall Secure Score 35" without the sentence explaining
   * that 50 of those points are unmeasured rather than failed is the exact
   * document this repo exists to stop producing. Hiding it in print would have
   * been a silent regression of the page's whole purpose, so it is stated here
   * rather than left to the absence of a :hover.
   */
  .ss-explain-wrap { position: static; display: block; }
  .ss-explain-btn { display: none; }
  .ss-explain {
    display: block !important;
    position: static;
    transform: none;
    width: auto;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border: 1px solid #ddd;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .secure-score-main { align-items: stretch; }

  /* Page-break control */
  .component-card,
  .recommendation-card,
  .secure-score-section { page-break-inside: avoid; break-inside: avoid; }
  .secure-score-main    { page-break-after: avoid;  break-after: avoid;  }

  /* Ensure colours render in print */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Score scope strip ─────────────────────────────────────────────────────
   Three figures under the gauge: how the purchased services are performing,
   how much of the posture they reach, and the whole picture. Kept as three
   separate cells rather than one combined number because they answer
   different questions and are not derivable from one another. */
.ss-scope { margin: 0.9rem auto 0; max-width: 46rem; }

.ss-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.ss-scope-cell {
  padding: 0.75rem 0.6rem;
  border: 1px solid var(--card-edge, var(--separator));
  border-radius: var(--radius-card, 10px);
  background: var(--surface);
  text-align: center;
}

.ss-scope-v {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ss-scope-l {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--text);
}

.ss-scope-s {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.ss-scope-gaps {
  margin: 0.7rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
}

/* A control nobody is measuring is a security gap, not a commercial one.
   It reads differently because it is different. */
.ss-scope-blind { color: var(--danger, #c0392b); font-weight: 600; }

@media (max-width: 640px) {
  .ss-scope-grid { grid-template-columns: 1fr; }
}

/* ── Microsoft Secure Score panel ──────────────────────────────────────────
   Visually separated from the panels above it on purpose. This is somebody
   else's number, reported alongside ours and not folded into it, and the
   border is the cheapest way to keep a reader from attributing Microsoft's
   weighting to us. See public/js/ms-secure-score.js. */

.ms-ss-panel {
  border: 1px solid var(--card-edge, var(--border));
  border-radius: var(--radius-card, 10px);
  background: var(--card-bg, var(--surface));
  padding: 1.1rem 1.25rem 1.25rem;
}

.ms-ss-head { margin-bottom: 0.9rem; }

.ms-ss-attrib {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted);
}

.ms-ss-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--separator, var(--border));
}

/* Points first and largest: the percentage moves when Microsoft publishes new
   controls, so it must not be the number that dominates the panel. */
.ms-ss-points-val { font-size: 2.1rem; font-weight: 700; }
.ms-ss-points-max { font-size: 0.95rem; color: var(--muted); margin-left: 0.25rem; }
.ms-ss-pct { font-size: 1.15rem; font-weight: 600; }

.ms-ss-meta {
  margin-left: auto;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: right;
}
.ms-ss-meta code { font-size: 0.72rem; }

.ms-ss-warn  { color: var(--amber, #e67e22); font-weight: 600; }
.ms-ss-error {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--danger, #c0392b);
}

.ms-ss-comps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.1rem;
  margin-top: 0.9rem;
  font-size: 0.78rem;
}
.ms-ss-comps-label { color: var(--muted); }
.ms-ss-comp-label  { color: var(--muted); margin-right: 0.3rem; }
.ms-ss-comp-val    { font-weight: 600; }

.ms-ss-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}
.ms-ss-cat {
  border: 1px solid var(--separator, var(--border));
  border-radius: var(--radius-sm, 6px);
  padding: 0.6rem 0.7rem;
}
.ms-ss-cat-name  { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ms-ss-cat-score { font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.ms-ss-cat-sub   { font-size: 0.72rem; color: var(--muted); }

.ms-ss-subhead {
  margin: 1.3rem 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

/* Wide tables scroll inside their own box rather than widening the report. */
.ms-ss-table-wrap { overflow-x: auto; }
.ms-ss-table { width: 100%; border-collapse: collapse; font-size: 0.79rem; }
.ms-ss-table th {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.ms-ss-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--separator, var(--border));
  vertical-align: top;
}
.ms-ss-gap-title  { font-weight: 600; line-height: 1.35; }
.ms-ss-gap-rem    { margin-top: 0.2rem; font-size: 0.74rem; line-height: 1.45; color: var(--muted); }
.ms-ss-gap-points { white-space: nowrap; text-align: right; }
.ms-ss-of         { font-size: 0.72rem; color: var(--muted); }

.ms-ss-exclusions {
  margin: 0.8rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted);
}

.ms-ss-empty-title { margin: 0.4rem 0 0.2rem; font-weight: 600; }
.ms-ss-empty-body  { margin: 0; font-size: 0.8rem; line-height: 1.55; color: var(--muted); }
.ms-ss-loading     { color: var(--muted); font-size: 0.82rem; }

@media (max-width: 640px) {
  .ms-ss-meta { margin-left: 0; text-align: left; }
}

/* A fourth cell for the vendor reach figure. The base grid is a hard 3, so the
   modifier is added only when the Arctic Wolf tile is actually rendered. */
.ss-scope-grid.has-vendor { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .ss-scope-grid.has-vendor { grid-template-columns: repeat(2, 1fr); }
}

/* The discount arithmetic, written out. Deliberately quiet type: it explains a
   number above it rather than competing with it. */
.ss-scope-discount {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted);
}