:root {
    --black: #000000;
    --white: #FFFFFF;
    --gray-dark: #414042;
    --gray-med: #808285;
    --gray-light: #BABDBF;
    --gray-bg: #F2F2F3;
    --accent: #0785F2;
    --accent-1: #CCE1FC;
    --accent-3: #0564B5;
    --accent-4: #044B87;
    --warn: #B85C00;
    --warn-bg: #FFF4E5;
    --surface-alt: #F7F7F8;
    /* semantic status colors (added 2026-06-04 — consolidates scattered hex across the HTML) */
    --ok: #1E8E4E;          /* success text / icon */
    --ok-strong: #5FD08A;   /* success accent — save-pulse border, toast check */
    --ok-bg: #C9F2D8;       /* success fill — save-pulse background */
    --ok-on-dark: #A6EEC1;  /* success text on a dark surface */
    --err: #B91C1C;         /* error / danger text + marks */
    --err-bg: #FCECEC;      /* error fill (light) */
    --err-border: #E5B0B0;  /* error border (light) */
    --err-on-dark: #FF8A8A; /* error text / icon on a dark surface */
    --info-on-dark: #6FB7FF;/* links / labels on a dark surface */
    --diff-bg: #FDF0A4;     /* track-changes highlight (compare) */
    --diff-bar: #E0A800;    /* changed-block left bar (compare) */
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'DM Sans', 'Avenir', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    color: var(--black);
    line-height: 1.4;
    font-size: 14px;
    background: var(--gray-bg);
  }
  a { color: inherit; text-decoration: none; cursor: pointer; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }

  /* ===== App shell ===== */
  .app-shell { min-height: 100vh; display: flex; flex-direction: column; }
  .top-bar {
    background: var(--black); color: var(--white);
    display: flex; align-items: center; gap: 24px;
    padding: 14px 24px; border-bottom: 3px solid var(--accent);
  }
  .brand {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
  }
  .brand .accent { color: var(--accent); margin-right: 8px; }
  .top-bar .crumb { font-size: 12px; color: var(--gray-light); flex: 1; }
  .top-bar .role-switcher {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px;
  }
  .top-bar .role-switcher span { color: var(--gray-light); margin-right: 4px; }
  .role-pill {
    background: transparent; color: var(--white);
    border: 0.5px solid var(--gray-med);
    padding: 5px 10px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .role-pill.active { background: var(--accent); border-color: var(--accent); color: var(--white); }
  .role-pill:hover:not(.active) { border-color: var(--white); }
  .top-bar .user {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    padding-left: 16px; margin-left: 8px;
    border-left: 0.5px solid var(--gray-med);
  }
  .top-bar .avatar {
    width: 28px; height: 28px;
    background: var(--accent-3); color: var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
  }

  .body-row { display: flex; flex: 1; min-height: calc(100vh - 56px); }

  .left-nav {
    width: 220px; background: var(--white);
    border-right: 0.5px solid var(--gray-light);
    padding: 18px 0;
  }
  .left-nav .nav-section {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 16px 20px 6px;
  }
  .left-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 20px; font-size: 13px; color: var(--gray-dark);
    border-left: 3px solid transparent;
  }
  .left-nav a:hover { background: var(--surface-alt); color: var(--black); }
  .left-nav a.active {
    background: var(--surface-alt); color: var(--black);
    font-weight: 700; border-left-color: var(--accent);
  }
  .left-nav .nav-icon {
    width: 16px; height: 16px; flex-shrink: 0;
    color: var(--gray-med);
    stroke-width: 1.75; stroke: currentColor; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .left-nav a.active .nav-icon { color: var(--accent); }

  .main {
    flex: 1; padding: 28px 36px; min-width: 0;
    overflow-x: hidden;
  }

  /* ===== Annotation callouts (yellow notes) ===== */
  /* Spec notes hidden for clean UI review — delete this line to show them again. */
  .note { display: none; }
  .note {
    background: var(--warn-bg); border-left: 3px solid var(--warn);
    padding: 10px 14px; font-size: 12px; color: var(--gray-dark);
    margin: 12px 0; max-width: 720px;
  }
  .note strong { color: var(--warn); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }

  /* ===== Screen system ===== */
  .screen { display: none; animation: fadein 120ms ease-out; }
  .screen.active { display: block; }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

  /* ===== Page header ===== */
  .page-head {
    display: flex; align-items: baseline; gap: 16px;
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 0.5px solid var(--gray-light);
  }
  .page-head h1 { font-size: 22px; font-weight: 400; letter-spacing: -0.01em; }
  .page-head .sub { font-size: 12px; color: var(--gray-med); }
  .page-head .actions { margin-left: auto; display: flex; gap: 8px; }

  /* ===== Buttons ===== */
  .btn {
    padding: 8px 14px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    border: 0.5px solid var(--gray-med); color: var(--black);
    background: var(--white);
    transition: background 80ms;
  }
  .btn:hover { background: var(--surface-alt); }
  .btn.primary {
    background: var(--accent); color: var(--white); border-color: var(--accent);
  }
  .btn.primary:hover { background: var(--accent-3); border-color: var(--accent-3); }
  .btn.danger { color: var(--err); border-color: var(--err-border); }
  .btn.disabled, button[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

  /* ===== Selects (app-wide) =====
     Native chrome is replaced with a custom chevron (Lucide-style, gray-med) so
     dropdowns read as part of the design system: sharp corners, hairline border,
     comfortable hit area. Context rules below tune size; they must use
     `background-color` (not the `background` shorthand) so this chevron survives. */
  select {
    appearance: none; -webkit-appearance: none;
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808285' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px;
    padding: 10px 36px 10px 13px;
    border: 0.5px solid var(--gray-med); color: var(--black);
    font-family: inherit; font-size: 13px; cursor: pointer;
    transition: border-color 100ms;
  }
  select:hover { border-color: var(--gray-dark); }
  select:focus { outline: none; border-color: var(--accent); }

  /* ===== Account folder strip ===== */
  .acct-strip {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
    margin-bottom: 18px;
  }
  /* minmax(0, …) lets the tracks shrink below their content's intrinsic width,
     so the strip never pushes wider than the page on small viewports. */
  @media (max-width: 1320px) { .acct-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 850px)  { .acct-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 560px)  { .acct-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .acct-card {
    background: var(--white); border: 0.5px solid var(--gray-light);
    padding: 14px 16px; cursor: pointer;
    display: flex; flex-direction: column; gap: 12px;
    transition: background 80ms;
  }
  .acct-card:hover { background: var(--surface-alt); }
  /* Logo + titles share the top row; the stats row sits below at full card
     width, so the counts align to the card's left edge (not indented by logo). */
  .acct-card .acct-head { display: flex; gap: 12px; }
  .acct-card .acct-logo {
    flex: 0 0 44px; height: 44px;
    align-self: flex-start;
    display: flex; align-items: center; justify-content: center;
  }
  .acct-card .acct-logo img { max-width: 44px; max-height: 44px; display: block; }
  .acct-card .acct-logo.text { background: var(--accent-1); color: var(--accent-4); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; width: 44px; }
  .acct-card .acct-titles { flex: 1; min-width: 0; }
  .acct-card .acct-name {
    font-size: 22px; font-weight: 700; color: var(--black);
    line-height: 1; letter-spacing: -0.01em;
  }
  .acct-card .acct-meta {
    font-size: 11px; color: var(--gray-med);
    margin-top: 4px; line-height: 1.25;
    /* Safety net: a long agency word (e.g. "Administration") can't fit the narrow
       title column beside the logo, so break it rather than paint outside the card. */
    overflow-wrap: break-word;
  }
  /* Once the strip drops from 6-up (2 rows) to 4-up (3 rows) the cards get tight,
     so omit the full department title there — cards condense to acronym + counts.
     Kept in sync with the 6→4 column breakpoint above. */
  @media (max-width: 1320px) { .acct-card .acct-meta { display: none; } }
  .acct-card .acct-stats {
    display: flex; margin-top: auto;
    font-size: 11px;
  }
  .acct-card .acct-stat strong { font-weight: 700; color: var(--black); font-size: 12px; margin-right: 4px; }
  .acct-card .acct-stat .lbl { color: var(--gray-med); font-size: 11px; }
  .acct-card .acct-stat:not(:last-child)::after {
    content: '·'; color: var(--gray-light); margin: 0 8px;
  }

  /* Selected-account filter state — dim the unselected cards, leave the selected one as-is */
  .acct-card { transition: background 80ms, opacity 140ms ease; }
  .acct-strip.filtering .acct-card { opacity: 0.4; }
  .acct-strip.filtering .acct-card.selected { opacity: 1; }

  /* Filter status row — always visible. Default text becomes the chip when a filter is on */
  .filter-chip-row {
    display: flex; align-items: center; gap: 10px;
    min-height: 28px;
    margin: 0 0 14px;
    font-size: 12px; color: var(--gray-med);
  }
  .filter-chip-row .filter-applied {
    display: none; align-items: center; gap: 10px;
  }
  .filter-chip-row.active .filter-default { display: none; }
  .filter-chip-row.active .filter-applied { display: inline-flex; }

  /* Small badge marking a file row as org-wide */
  .org-tag {
    display: inline-block; padding: 2px 8px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    background: var(--surface-alt); color: var(--gray-dark);
    border: 0.5px solid var(--gray-light);
  }
  /* Account-scope counterpart to .org-tag — accent-tinted so an account file's
     label reads distinctly from the neutral org-wide pill. */
  .acct-tag {
    display: inline-block; padding: 2px 8px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    background: var(--surface-alt); color: var(--accent-3);
    border: 0.5px solid var(--accent-3);
  }
  .filter-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 4px 4px 10px;
    background: var(--black); color: var(--white);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .filter-chip-clear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    background: transparent; color: var(--white);
    border: none; cursor: pointer; font-size: 13px;
    line-height: 1;
  }
  .filter-chip-clear:hover { background: var(--gray-dark); }

  /* ===== Recent reports grid ===== */
  .recent-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
    margin-bottom: 14px;
  }
  .recent-card {
    background: var(--white); border: 0.5px solid var(--gray-light);
    padding: 12px; cursor: pointer;
    transition: border-color 80ms, transform 80ms;
    position: relative;
  }
  .recent-card:hover { border-color: var(--accent); transform: translateY(-1px); }
  .recent-card .rc-account {
    font-size: 10px; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 4px;
  }
  .recent-card .rc-period { font-size: 13px; font-weight: 700; color: var(--black); line-height: 1.2; }
  .recent-card .rc-when {
    font-size: 10px; color: var(--gray-med); margin-top: 8px;
  }
  .recent-card .rc-when strong { color: var(--black); font-weight: 700; }
  .recent-card .rc-bar {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--accent);
  }
  .recent-card.draft .rc-bar { background: var(--gray-light); }
  .recent-card.published .rc-bar { background: var(--accent); }
  .recent-card.archived .rc-bar { background: var(--gray-med); }
  .recent-card .rc-status {
    position: absolute; top: 10px; right: 10px;
    font-size: 8px; font-weight: 700; padding: 2px 6px;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .recent-card.published .rc-status { background: var(--accent-1); color: var(--accent-4); }
  .recent-card.draft .rc-status { background: var(--surface-alt); color: var(--gray-dark); }
  .recent-card.archived .rc-status { background: var(--surface-alt); color: var(--gray-med); }

  @media (max-width: 1100px) { .recent-grid { grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 850px)  { .recent-grid { grid-template-columns: repeat(3, 1fr); } }

  /* ===== Pagination ===== */
  .pagination {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: var(--white); border: 0.5px solid var(--gray-light);
    border-top: none;
    font-size: 11px; color: var(--gray-dark);
  }
  .pagination .page-info { flex: 1; }
  .pagination .page-info strong { color: var(--black); font-weight: 700; }
  .pagination .page-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0.5px solid var(--gray-light); background: var(--white);
    font-size: 11px; color: var(--gray-dark);
  }
  .pagination .page-btn:hover { border-color: var(--accent); color: var(--accent); }
  .pagination .page-btn.active { background: var(--accent); color: var(--white); border-color: var(--accent); }
  .pagination .page-btn:disabled, .pagination .page-btn.disabled { opacity: 0.4; pointer-events: none; }
  .pagination .per-page { color: var(--gray-med); }
  .pagination .per-page select {
    border: 0.5px solid var(--gray-light); background-color: var(--white);
    padding: 3px 22px 3px 6px; font-size: 11px; font-family: inherit;
    background-position: right 6px center; background-size: 10px;
  }

  /* ===== Reports list ===== */
  .reports-table {
    background: var(--white);
    border: 0.5px solid var(--gray-light);
  }
  .reports-table table { width: 100%; border-collapse: collapse; }
  .reports-table thead th {
    text-align: left; padding: 12px 16px;
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.08em;
    background: var(--surface-alt);
    border-bottom: 0.5px solid var(--gray-light);
  }
  .reports-table tbody td {
    padding: 14px 16px; font-size: 13px; color: var(--gray-dark);
    border-bottom: 0.5px solid var(--gray-light);
  }
  .reports-table tbody tr:hover { background: var(--surface-alt); }
  .reports-table tbody tr.report-row { cursor: pointer; }
  .reports-table tbody tr:last-child td { border-bottom: none; }
  .reports-table .name {
    color: var(--black); font-weight: 700;
  }
  .reports-table .name .sub { display: block; font-size: 11px; color: var(--gray-med); font-weight: 500; margin-top: 2px; }
  /* Inline account reclassifier — sits in the Account column. Borderless until
     hovered/focused so the column reads as text, not a row of form controls;
     only background-color is set (keeps the global chevron background-image). */
  .acct-cell .acct-reclassify {
    width: auto; max-width: 150px;
    padding: 3px 24px 3px 7px; font-size: 13px;
    border-color: transparent; background-color: transparent;
    background-position: right 7px center; background-size: 10px;
  }
  .acct-cell .acct-reclassify:hover,
  .acct-cell .acct-reclassify:focus { border-color: var(--gray-med); background-color: var(--white); }
  .status-chip {
    display: inline-block; padding: 3px 8px;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .status-chip.published { background: var(--accent-1); color: var(--accent-4); }
  .status-chip.draft { background: var(--gray-light); color: var(--gray-dark); }
  .status-chip.archived { background: var(--surface-alt); color: var(--gray-med); border: 0.5px solid var(--gray-light); }
  .status-chip.current { background: var(--accent); color: var(--white); margin-left: 4px; padding: 1px 4px; font-size: 8px; letter-spacing: 0.06em; }
  /* In the report title, center the chip with the title text — on the baseline it
     dropped low and crowded the version pill on the line below. */
  .page-title .status-chip { vertical-align: middle; position: relative; top: -1px; margin-left: 6px; }
  .row-actions { display: flex; gap: 6px; }
  .icon-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0.5px solid var(--gray-light); background: var(--white);
    color: var(--gray-dark); font-size: 12px;
  }
  .icon-btn svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  }
  .icon-btn:hover { border-color: var(--accent); color: var(--accent); }
  .icon-btn.danger:hover { border-color: var(--err); color: var(--err); }
  .role-hide-create [data-role-only="owner"] { display: none; }
  body[data-role="editor"] [data-role-hide~="editor"] { display: none !important; }
  body[data-role="reviewer"] [data-role-hide~="reviewer"] { display: none !important; }
  body[data-role="reviewer"] [data-role-only~="owner"],
  body[data-role="reviewer"] [data-role-only~="editor"] { display: none !important; }
  body[data-role="editor"] [data-role-only~="owner"] { display: none !important; }

  /* ===== Wizard ===== */
  .wizard {
    background: var(--white); border: 0.5px solid var(--gray-light);
    padding: 28px 36px; max-width: 920px;
  }
  .wizard-steps {
    display: flex; gap: 0; margin-bottom: 24px;
    border-bottom: 0.5px solid var(--gray-light);
  }
  .wizard-step {
    padding: 8px 16px 12px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gray-med); border-bottom: 2px solid transparent;
  }
  .wizard-step.active { color: var(--black); border-bottom-color: var(--accent); }
  .wizard-step.done { color: var(--accent-3); }
  .wizard-step .num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; background: var(--gray-light); color: var(--white);
    font-size: 10px; margin-right: 6px;
  }
  .wizard-step.active .num { background: var(--accent); }
  .wizard-step.done .num { background: var(--accent-3); }

  .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
  .form-row label {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .form-row select, .form-row input[type="text"] {
    padding: 10px 12px; border: 0.5px solid var(--gray-med);
    background-color: var(--white); font-size: 13px; font-family: inherit;
    color: var(--black);
  }
  .form-row select { padding-right: 36px; }
  .form-row select:focus, .form-row input:focus { outline: none; border-color: var(--accent); }
  .wizard-actions { display: flex; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 0.5px solid var(--gray-light); }
  .wizard-actions .spacer { flex: 1; }

  /* ===== File picker ===== */
  .file-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border: 0.5px solid var(--gray-light); background: var(--white);
  }
  .file-pane { padding: 18px; }
  .file-pane:first-child { border-right: 0.5px solid var(--gray-light); }
  .file-pane h3 {
    font-size: 11px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 12px;
  }
  .file-pane .count { color: var(--accent); margin-left: 4px; font-weight: 700; }
  .file-list { display: flex; flex-direction: column; gap: 2px; }
  .file-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--surface-alt);
    font-size: 12px; cursor: grab;
  }
  .file-item:hover { background: var(--accent-1); }
  .file-item .handle { color: var(--gray-light); font-size: 14px; }
  .file-item .icon { width: 18px; color: var(--gray-med); }
  .file-item .name { flex: 1; color: var(--black); font-weight: 500; }
  .file-item .name .meta { display: block; font-size: 10px; color: var(--gray-med); font-weight: 500; }
  .file-item .priority {
    background: var(--accent); color: var(--white);
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
  }
  .file-item input[type="checkbox"] { accent-color: var(--accent); }
  .upload-zone {
    border: 1px dashed var(--gray-med); padding: 20px;
    text-align: center; font-size: 12px; color: var(--gray-med);
    margin-bottom: 14px; cursor: pointer;
  }
  .upload-zone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-1); }

  /* ===== Editor view ===== */
  /* Cap the report+sidebar as one unit and center it: on wide screens the
     report stops stretching and the side panels stay glued to its right edge
     (centered together) rather than drifting out to the window edge. */
  .editor-shell { display: grid; grid-template-columns: 1fr 280px; gap: 16px; max-width: 1360px; margin-inline: auto; }
  .editor-canvas {
    background: var(--white);
    border: 0.5px solid var(--gray-light);
    padding: 0;
    height: 720px; overflow: hidden;
    position: relative;
  }
  .editor-canvas iframe {
    width: 100%; height: 100%;
    border: none; transform-origin: top left;
  }
  .edit-overlay {
    position: absolute; inset: 0;
    pointer-events: none; padding: 20px;
  }
  .edit-pin {
    position: absolute;
    width: 22px; height: 22px;
    background: var(--accent); color: var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(7,133,242,0.3);
  }
  .edit-pin:hover { background: var(--accent-3); }
  .edit-pin.tile { top: 110px; left: 200px; }
  .edit-pin.exec { top: 220px; left: 600px; }
  .edit-pin.radar { top: 320px; left: 400px; }
  .edit-pin.opp { top: 480px; left: 250px; }

  /* Report-status gating (published = locked, draft = editable) */
  body[data-status="published"] [data-when-draft] { display: none !important; }
  body[data-status="draft"] [data-when-published] { display: none !important; }

  .lock-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface-alt); border: 0.5px solid var(--gray-med);
    padding: 8px 14px; margin-bottom: 14px;
    font-size: 12px; color: var(--gray-dark);
  }
  .lock-banner strong { color: var(--black); }
  .lock-banner .spacer { flex: 1; }
  .lock-banner .lock-icon {
    width: 14px; height: 14px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .editor-side {
    display: flex; flex-direction: column; gap: 12px;
  }
  .side-card {
    background: var(--white); border: 0.5px solid var(--gray-light);
    padding: 14px;
  }
  .side-card h4 {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  .side-card .item {
    font-size: 12px; padding: 6px 0;
    border-bottom: 0.5px solid var(--surface-alt);
    display: flex; gap: 8px; align-items: baseline;
  }
  .side-card .item:last-child { border-bottom: none; }
  .side-card .item .when { color: var(--gray-med); font-size: 10px; min-width: 60px; }
  .side-card .item .who { font-weight: 700; }
  .side-card .item .what { color: var(--gray-dark); flex: 1; }
  /* Recent edits: bold version number on top; time + user name share the line
     below (vertically aligned), both lightened. The name truncates with …. */
  #recent-edits .edit-item { flex-direction: column; align-items: stretch; gap: 1px; }
  #recent-edits .edit-item .ver { font-weight: 700; color: var(--gray-dark); font-size: 11px; font-variant-numeric: tabular-nums; }
  #recent-edits .edit-row { display: flex; align-items: baseline; gap: 8px; }
  #recent-edits .edit-row .when { color: var(--gray-med); font-size: 11px; white-space: nowrap; }
  #recent-edits .edit-row .who { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-med); font-size: 11px; font-weight: 400; }
  .side-card .actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .side-card .actions .btn { width: 100%; text-align: center; }

  /* Consolidated export: one button opens a popover of per-format controls,
     each still HTMX-driven (download / preparing / prepare / retry). */
  .export-menu { position: relative; }
  .export-menu .export-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .export-menu .export-toggle .caret { font-size: 10px; line-height: 1; }
  .export-pop {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    background: var(--white); border: 1px solid var(--gray-line, #e5e7eb);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: 4px;
  }
  .export-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; }
  .export-row + .export-row { border-top: 1px solid var(--gray-line, #e5e7eb); }
  .export-label { font-size: 12px; font-weight: 700; color: var(--gray-dark); }
  /* These controls size to their content, not the full-width sidebar buttons. */
  .export-row .export-ctl .btn { width: auto; padding: 4px 12px; font-size: 11px; white-space: nowrap; }
  /* In-progress spinner for the "Preparing…" pill — matches .gen-spinner / .mini-spin. */
  .export-spin { width: 13px; height: 13px; border: 2px solid var(--accent-1); border-top-color: var(--accent);
                 border-radius: 50%; animation: gen-spin 720ms linear infinite; flex-shrink: 0; }

  /* ===== Modal ===== */
  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    display: none; align-items: flex-start; justify-content: center;
    z-index: 100; padding: 24px;
    overflow-y: auto;
  }
  .modal-backdrop.active { display: flex; }
  .modal {
    background: var(--white); width: 100%; max-width: 540px;
    border-top: 3px solid var(--accent);
    padding: 24px 28px 0;
    margin: auto;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
  .modal h2 {
    font-size: 16px; font-weight: 400; letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .modal .sub {
    font-size: 11px; color: var(--gray-med); margin-bottom: 18px;
  }
  .modal label {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.08em; margin-top: 12px; display: block;
  }
  .modal input:not([type="checkbox"]):not([type="radio"]), .modal textarea, .modal select {
    width: 100%; margin-top: 4px;
    border: 0.5px solid var(--gray-med); padding: 11px 13px;
    font-family: inherit; font-size: 13px; color: var(--black);
    background-color: var(--white);
  }
  .modal select { padding-right: 36px; }
  .modal input:not([type="checkbox"]):not([type="radio"]):focus,
  .modal textarea:focus,
  .modal select:focus { outline: none; border-color: var(--accent); }
  .modal textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
  .modal .preview {
    margin-top: 14px; padding: 12px;
    background: var(--surface-alt);
    font-size: 12px; color: var(--gray-dark);
  }
  .modal-actions {
    display: flex; gap: 8px;
    margin: 20px -28px 0;
    padding: 16px 28px 24px;
    border-top: 0.5px solid var(--gray-light);
    background: var(--white);
    position: sticky; bottom: 0; z-index: 2;
  }
  .modal-actions .spacer { flex: 1; }
  .nr-pending-warn {
    align-self: center; font-size: 11.5px; line-height: 1.3; color: var(--warn);
  }

  /* Scoped scrollbar styling — keeps modal + file-list scrollbars unobtrusive */
  .modal, .nr-file-list { scrollbar-width: thin; scrollbar-color: var(--gray-light) transparent; }
  .modal::-webkit-scrollbar,
  .nr-file-list::-webkit-scrollbar { width: 8px; height: 8px; }
  .modal::-webkit-scrollbar-track,
  .nr-file-list::-webkit-scrollbar-track { background: transparent; }
  .modal::-webkit-scrollbar-thumb,
  .nr-file-list::-webkit-scrollbar-thumb { background: var(--gray-light); }
  .modal::-webkit-scrollbar-thumb:hover,
  .nr-file-list::-webkit-scrollbar-thumb:hover { background: var(--gray-med); }

  /* "At least one source file" gate hint in the wizard's "This report" pane. */
  .nr-files-required { margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--err); }

  /* Wide variant for the multi-step wizard. A fixed-height flex column: the head
     and action bar stay pinned while the active step scrolls internally, so a long
     file list never grows the modal past the viewport or pushes the controls out. */
  .modal.modal-wide {
    max-width: 960px;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .modal.modal-wide > form {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
  }
  .modal.modal-wide .modal-head,
  .modal.modal-wide .regen-note,
  .modal.modal-wide .modal-actions { flex-shrink: 0; }
  .modal.modal-wide .step-content {
    flex: 1; min-height: 0; overflow-y: auto;
  }
  /* Step 2's two-pane grid fills the scroll region; each pane's file list scrolls
     on its own rather than the whole step (or modal) scrolling. */
  .modal.modal-wide .step-content[data-step="2"] { display: flex; overflow: hidden; }
  .modal.modal-wide .nr-file-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .modal.modal-wide .nr-file-pane > :not(.nr-file-list) { flex-shrink: 0; }
  .modal-head {
    position: relative;
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 0.5px solid var(--gray-light);
  }
  .modal-head h2 {
    font-size: 22px; font-weight: 400; letter-spacing: -0.01em;
    color: var(--black); margin-bottom: 22px;
  }
  .modal-close {
    position: absolute; top: -4px; right: -4px;
    background: transparent; border: none; cursor: pointer;
    font-size: 20px; color: var(--gray-med); line-height: 1; padding: 4px 8px;
  }
  .modal-close:hover { color: var(--black); }

  /* Stepper: centered row with circles + labels under each */
  .step-indicator {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 0;
  }
  .step-indicator .step {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    min-width: 96px; background: transparent; border: none;
  }
  .step-indicator .step .step-num {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    background: var(--surface-alt); color: var(--gray-med);
    border: 0.5px solid var(--gray-light);
  }
  .step-indicator .step .step-label {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.08em;
    white-space: nowrap;
  }
  .step-indicator .step.active .step-num,
  .step-indicator .step.done   .step-num {
    background: var(--accent); color: var(--white); border-color: var(--accent);
  }
  .step-indicator .step.active .step-label { color: var(--black); }
  .step-indicator .step.done   .step-label { color: var(--gray-dark); }
  .step-indicator .step-line {
    flex: 0 0 56px; height: 0.5px;
    background: var(--gray-light);
    margin-top: 13px;
  }
  .step-indicator .step-line.done { background: var(--accent); }

  .step-title {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 14px;
  }
  .prefill-hint {
    font-size: 10px; font-weight: 500; color: var(--gray-med);
    text-transform: none; letter-spacing: 0;
    margin-left: 8px; display: none;
  }
  .prefill-hint.show { display: inline; }

  /* Modal file picker (two-pane) */
  .nr-file-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .nr-file-pane {
    background: var(--surface-alt); border: 0.5px solid var(--gray-light);
    padding: 14px; min-height: 0;
    min-width: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .nr-file-pane h3 {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
  }
  .nr-file-list {
    display: flex; flex-direction: column; gap: 6px;
    flex: 1; min-height: 120px; overflow-y: auto;
  }
  .nr-file-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--white); border: 0.5px solid var(--gray-light);
    font-size: 12px; color: var(--gray-dark);
    min-width: 0;
  }
  .nr-file-item .rank {
    flex: 0 0 18px; text-align: center;
    font-weight: 700; color: var(--gray-med); font-size: 11px;
  }
  .nr-file-item .name {
    flex: 1; min-width: 0; color: var(--black);
    word-break: break-word; line-height: 1.3;
  }
  .nr-file-item .org-tag,
  .nr-file-item .acct-tag { font-size: 9px; padding: 1px 6px; flex-shrink: 0; }

  /* Draggable right-pane rows */
  .nr-file-item.draggable { cursor: grab; }
  .nr-file-item.draggable:hover {
    background: var(--surface-alt); border-color: var(--gray-med);
  }
  .nr-file-item.draggable:active { cursor: grabbing; }
  .nr-file-item .drag-handle {
    width: 14px; height: 14px; flex-shrink: 0;
    color: var(--gray-light);
  }
  .nr-file-item.draggable:hover .drag-handle { color: var(--gray-dark); }

  /* Per-row remove button (right pane "This report") */
  .nr-file-item .nr-file-remove {
    background: transparent; border: none; cursor: pointer;
    color: var(--gray-med); font-size: 14px; line-height: 1;
    padding: 0 4px; flex-shrink: 0;
  }
  .nr-file-item .nr-file-remove:hover { color: var(--err); }

  /* Compact search in the new-report file library pane */
  .modal input.nr-library-search {
    margin: 0 0 10px; padding: 6px 10px; font-size: 12px;
  }

  /* ===== Upload modal ===== */
  /* `.modal label { display: block }` (higher specificity) was flattening this
     <label> dropzone, so the title + accepted-types lines ran together. Win the
     `display` back so the flex column stacks them on separate lines. */
  .modal .upload-dropzone,
  .upload-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 16px 20px;
    border: 1px dashed var(--gray-light);
    background: var(--surface-alt);
    cursor: pointer;
    text-align: center;
    transition: border-color 120ms, background 120ms;
  }
  .upload-dropzone:hover,
  .upload-dropzone.dragging {
    border-color: var(--accent);
    background: var(--accent-1);
  }
  .upload-dropzone .upload-icon {
    width: 22px; height: 22px; color: var(--gray-med);
    stroke: currentColor; fill: none;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  }
  .upload-dropzone:hover .upload-icon,
  .upload-dropzone.dragging .upload-icon { color: var(--accent); }
  .upload-dropzone .upload-title {
    font-size: 13px; font-weight: 700; color: var(--black);
  }
  .upload-dropzone .upload-meta {
    font-size: 11px; color: var(--gray-med);
  }

  .upload-queue { margin-top: 16px; }
  .upload-queue-head {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 8px;
  }
  .upload-queue-list { display: flex; flex-direction: column; gap: 6px; }
  .upload-queue-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--white); border: 0.5px solid var(--gray-light);
    font-size: 12px; min-width: 0;
  }
  .upload-queue-item .name { flex: 1; color: var(--black); word-break: break-word; min-width: 0; }
  .upload-queue-item .size {
    color: var(--gray-med); font-size: 11px; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .upload-queue-item .remove {
    background: transparent; border: none; cursor: pointer;
    color: var(--gray-med); font-size: 14px; padding: 0 4px; line-height: 1;
    flex-shrink: 0;
  }
  .upload-queue-item .remove:hover { color: var(--err); }

  .upload-scope { margin-top: 18px; }
  .upload-scope-hint {
    font-size: 10px; font-weight: 500; color: var(--gray-med);
    text-transform: none; letter-spacing: 0;
    margin-top: 4px;
    display: none;
  }
  .upload-scope-hint.show { display: block; }
  .upload-org-toggle {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500; color: var(--gray-dark);
    text-transform: none; letter-spacing: 0;
    margin-top: 14px; cursor: pointer;
  }
  .upload-org-toggle input { margin: 0; }
  .nr-library-empty {
    display: none; padding: 10px 12px;
    background: var(--white); border: 0.5px solid var(--gray-light);
    font-size: 11px; color: var(--gray-med); text-align: center;
  }
  .nr-library-empty.show { display: block; }

  /* Compact inline drop zone for in-wizard upload */
  .nr-upload-zone {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 12px; margin-top: 12px;
    border: 1.5px dashed var(--gray-light);
    background: var(--white);
    cursor: pointer;
    font-size: 11.5px; color: var(--gray-med);
    text-align: center;
    transition: border-color 120ms, background 120ms, color 120ms;
  }
  .nr-upload-zone:hover,
  .nr-upload-zone.dragging {
    border-color: var(--accent);
    background: var(--accent-1);
    color: var(--accent-4);
  }
  .nr-upload-zone .nr-upload-icon {
    width: 14px; height: 14px; flex-shrink: 0;
    stroke: currentColor; fill: none;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  }
  .nr-upload-zone .nr-upload-text { line-height: 1.3; }
  .nr-upload-zone .nr-upload-scope {
    display: block; font-size: 10px; color: var(--gray-med);
    margin-top: 2px;
  }
  .nr-upload-zone:hover .nr-upload-scope,
  .nr-upload-zone.dragging .nr-upload-scope { color: var(--accent-3); }

  .nr-upload-org {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 12px; padding-left: 12px;
    border-left: 0.5px solid var(--gray-light);
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer; user-select: none;
  }
  .nr-upload-org input { margin: 0; cursor: pointer; }
  .nr-upload-zone:hover .nr-upload-org,
  .nr-upload-zone.dragging .nr-upload-org { border-left-color: var(--accent-3); }

  /* Staged (not-yet-uploaded) files in the wizard uploader. Org-wide is read
     when Upload is clicked, so the choice is order-independent. */
  .nr-upload-pending {
    margin-top: 8px; padding: 10px 12px;
    border: 0.5px solid var(--warn);
    background: var(--warn-bg);
  }
  .nr-upload-pending-note {
    margin-bottom: 8px; font-size: 11.5px; line-height: 1.4; color: var(--warn);
  }
  .nr-upload-pending-list { display: flex; flex-direction: column; gap: 4px; }
  .nr-upload-pending-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--gray-dark);
  }
  .nr-upload-pending-item .name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nr-upload-pending-actions {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
  }
  .nr-upload-pending-scope {
    flex: 1; font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .nr-upload-pending .btn { padding: 5px 12px; font-size: 11.5px; }

  /* Confirm step */
  .confirm-row {
    display: flex; padding: 10px 0;
    border-bottom: 0.5px solid var(--gray-light);
    font-size: 13px;
  }
  .confirm-row:last-of-type { border-bottom: none; }
  .confirm-row .lbl {
    flex: 0 0 120px; color: var(--gray-med);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding-top: 2px;
  }
  .confirm-row .val { flex: 1; color: var(--black); }

  .emphasis-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
    margin-top: 8px;
  }
  .emphasis-chip {
    padding: 6px 10px;
    background: var(--white); border: 0.5px solid var(--gray-light);
    font-size: 11px; cursor: pointer; user-select: none;
    text-align: center;
  }
  .emphasis-chip:hover { background: var(--surface-alt); }
  .emphasis-chip.selected {
    background: var(--black); color: var(--white); border-color: var(--black);
  }

  /* ===== Top opportunities panel ===== */
  .opp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .opp-pane {
    background: var(--white); border: 0.5px solid var(--gray-light);
    padding: 18px;
  }
  .opp-pane h3 {
    font-size: 11px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.1em;
    padding-bottom: 10px; border-bottom: 0.5px solid var(--gray-light); margin-bottom: 12px;
    display: flex; align-items: baseline; gap: 8px;
  }
  .opp-pane h3 .count { color: var(--accent); font-weight: 700; }
  .opp-pane h3 .filter-info { margin-left: auto; font-size: 9px; color: var(--gray-med); font-weight: 500; text-transform: none; letter-spacing: 0; }

  .opp-list { display: flex; flex-direction: column; gap: 1px; max-height: 580px; overflow-y: auto; }
  .opp-row {
    display: grid; grid-template-columns: 22px 1fr 50px 70px;
    align-items: center; gap: 8px;
    padding: 8px 10px; background: var(--surface-alt);
    font-size: 11px; user-select: none; -webkit-user-select: none;
  }
  .opp-row:hover { background: var(--accent-1); }
  .opp-row.selected { background: var(--accent); color: var(--white); }
  .opp-row.selected .opp-meta { color: rgba(255,255,255,0.7); }
  .opp-row .handle { color: var(--gray-light); font-size: 14px; }
  .opp-row.selected .handle { color: rgba(255,255,255,0.6); }
  /* Left pane is click-to-select (checkbox affordance); right pane is drag-to-reorder. */
  #candidate-list .opp-row { cursor: pointer; }
  #selected-opps .opp-row { cursor: grab; }
  #selected-opps .opp-row:active { cursor: grabbing; }
  .opp-row .opp-check {
    width: 15px; height: 15px; margin: 0; justify-self: center;
    accent-color: var(--accent); pointer-events: none;
  }
  .opp-row.selected .opp-check { accent-color: var(--white); }
  .opp-row .rank-num {
    background: var(--accent); color: var(--white);
    width: 18px; height: 18px; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
  }
  .opp-row.selected .rank-num { background: var(--white); color: var(--accent); }
  .opp-row .name { font-weight: 700; line-height: 1.3; }
  .opp-row .opp-meta { font-size: 9px; color: var(--gray-med); margin-top: 2px; }
  .opp-row .pwin { font-size: 11px; font-weight: 700; text-align: right; }
  .opp-row .tcv { font-size: 11px; font-weight: 700; text-align: right; }
  /* Selected pane rows have a different shape: handle · rank · name · remove */
  #selected-opps .opp-row { grid-template-columns: 22px auto 1fr auto; }
  /* Empty-state placeholder in the selected pane (no row chrome, not draggable). */
  #selected-opps .opp-row.opp-empty {
    display: block; cursor: default; opacity: .6; font-style: italic;
  }
  #selected-opps .opp-row.opp-empty:hover { background: var(--surface-alt); }

  /* Candidate-filter modal */
  .filter-group { margin-top: 18px; }
  .filter-group > .grp-label {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; display: block;
  }
  .modal .filter-opt {
    display: flex; align-items: baseline; gap: 8px;
    padding: 5px 0; margin-top: 0;
    font-size: 13px; font-weight: 400; color: var(--black);
    text-transform: none; letter-spacing: 0; cursor: pointer;
  }
  .modal .filter-opt input[type="checkbox"],
  .modal .filter-opt input[type="radio"] { accent-color: var(--accent); margin-top: 1px; flex-shrink: 0; }
  .filter-opt .opt-hint { color: var(--gray-med); font-size: 11px; }
  .filter-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 2px; }
  .modal .filter-inline select { width: auto; margin-top: 0; padding: 6px 28px 6px 10px; background-position: right 8px center; background-size: 10px; }
  .gap-tag {
    display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; background: var(--warn-bg); color: var(--warn);
    border: 0.5px solid var(--warn); padding: 1px 4px; margin-left: 4px; vertical-align: 1px;
  }
  .manual-rule {
    display: flex; align-items: center; gap: 8px; justify-content: space-between;
    background: var(--surface-alt); padding: 8px 10px; margin-top: 6px; font-size: 12px;
  }
  .manual-rule .rule-x { color: var(--gray-med); cursor: pointer; flex-shrink: 0; }
  .add-rule { font-size: 11px; color: var(--accent); margin-top: 8px; display: inline-block; cursor: pointer; }
  .eligible-count {
    margin-top: 18px; padding: 10px 12px; background: var(--accent-1); color: var(--accent-4);
    font-size: 12px; font-weight: 700;
  }

  /* "Uploaded this quarter" strip (file library) */
  .quarter-section { margin: 4px 0 22px; }
  .quarter-section .sec-h { margin-bottom: 10px; }
  .quarter-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
  .qfile-card {
    flex: 0 0 190px; border: 0.5px solid var(--gray-light); background: var(--white);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; cursor: pointer;
  }
  .qfile-card:hover { border-color: var(--accent); }
  .qfile-card .qf-name { font-weight: 700; font-size: 12px; color: var(--black); line-height: 1.3; }
  .qfile-card .qf-meta { font-size: 10px; color: var(--gray-med); text-transform: uppercase; letter-spacing: 0.06em; }
  .qfile-card .qf-foot { font-size: 11px; color: var(--gray-dark); margin-top: 4px; }
  .quarter-empty { font-size: 12px; color: var(--gray-med); padding: 8px 0; }

  /* User accounts / access management (settings) */
  .role-badge {
    display: inline-block; padding: 2px 7px;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  }
  .role-badge.superuser { background: var(--accent-4); color: var(--white); }
  .role-badge.owner { background: var(--accent-1); color: var(--accent-4); }
  .role-badge.editor { background: var(--gray-light); color: var(--gray-dark); }
  .role-badge.reviewer { background: var(--surface-alt); color: var(--gray-med); border: 0.5px solid var(--gray-light); }
  .acct-status { font-size: 11px; display: inline-flex; align-items: center; gap: 6px; }
  .acct-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .acct-status.active { color: var(--ok); }
  .acct-status.pending { color: var(--warn); }
  .icon-btn.locked { opacity: 0.3; cursor: not-allowed; }
  .icon-btn.locked:hover { border-color: var(--gray-light); color: var(--gray-dark); }
  .auth-callout {
    margin-top: 16px; padding: 12px 14px;
    background: var(--warn-bg); border: 0.5px solid var(--warn);
    font-size: 12px; line-height: 1.5; color: var(--gray-dark);
  }
  .auth-callout strong { color: var(--warn); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }
  .auth-callout .opt { margin-top: 6px; }
  .auth-callout .opt b { color: var(--black); }

  .filter-banner {
    background: var(--surface-alt); border: 0.5px solid var(--gray-light);
    padding: 10px 14px; font-size: 11px; color: var(--gray-dark);
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  }
  .filter-banner strong { color: var(--black); }
  .filter-banner .override {
    margin-left: auto; font-size: 10px; color: var(--accent); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
  }

  /* ===== Compare versions ===== */
  .compare-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--white); border: 0.5px solid var(--gray-light);
    padding: 10px 14px; margin-bottom: 14px;
    font-size: 12px;
  }
  .compare-bar label {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .compare-bar select {
    padding: 6px 28px 6px 10px; border: 0.5px solid var(--gray-med);
    background-color: var(--white); font-family: inherit; font-size: 11px;
    background-position: right 8px center; background-size: 10px;
  }
  .compare-bar .arrow { color: var(--gray-med); }
  .compare-bar .spacer { flex: 1; }
  .view-toggle { display: flex; }
  .view-toggle a {
    padding: 5px 10px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    border: 0.5px solid var(--gray-med); color: var(--gray-dark);
    cursor: pointer;
  }
  .view-toggle a + a { border-left: none; }
  .view-toggle a.active { background: var(--accent); border-color: var(--accent); color: var(--white); }

  .diff-list { background: var(--white); border: 0.5px solid var(--gray-light); padding: 18px; }
  .diff-section { padding: 4px 0 14px; }
  .diff-section + .diff-section { border-top: 0.5px solid var(--gray-light); padding-top: 14px; }
  .diff-section h3 {
    font-size: 10px; font-weight: 700; color: var(--gray-med);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin: 0 0 10px;
  }
  .diff-section h3 .count { color: var(--accent); margin-left: 6px; }
  .diff-row {
    display: grid; grid-template-columns: 170px 1fr max-content;
    gap: 14px; padding: 8px 0;
    align-items: baseline;
    font-size: 12px;
  }
  .diff-row + .diff-row { border-top: 0.5px solid var(--surface-alt); }
  .diff-row .el strong { display: block; color: var(--black); font-size: 12px; }
  .diff-row .el span { font-size: 10px; color: var(--gray-med); text-transform: uppercase; letter-spacing: 0.06em; }
  .diff-row .change { color: var(--gray-dark); line-height: 1.5; }
  .diff-row .change .from { text-decoration: line-through; color: var(--gray-med); }
  .diff-row .change .to { color: var(--accent-3); font-weight: 700; }
  .diff-row .attr { font-size: 10px; color: var(--gray-med); white-space: nowrap; }
  .diff-row .attr a { color: var(--accent); cursor: pointer; margin-left: 8px; }
  .diff-section.unchanged h3 { color: var(--gray-light); }
  .diff-section.unchanged .none { font-size: 11px; color: var(--gray-med); }

  .sxs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .sxs-col-head {
    display: flex; align-items: baseline; gap: 8px;
    padding: 8px 0; font-size: 12px;
  }
  .sxs-col-head strong { font-size: 13px; }
  .sxs-col-head .meta { font-size: 11px; color: var(--gray-med); }
  .sxs .editor-canvas { height: 640px; }
  .sxs .editor-canvas iframe { width: 182%; height: 182%; transform: scale(0.55); }
  .diff-box {
    position: absolute;
    border: 1.5px solid var(--accent); background: rgba(7,133,242,0.07);
    pointer-events: auto; cursor: pointer;
  }
  .diff-box .num {
    position: absolute; top: -9px; left: -9px;
    width: 16px; height: 16px;
    background: var(--accent); color: var(--white);
    font-size: 9px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ===== Older-version view banner ===== */
  .version-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--accent-1); border: 0.5px solid var(--accent);
    padding: 8px 14px; margin-bottom: 14px;
    font-size: 12px; color: var(--accent-4);
  }
  .version-banner strong { color: var(--accent-4); }
  .version-banner .spacer { flex: 1; }
  .version-banner .banner-icon {
    width: 14px; height: 14px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .version-row { display: flex; gap: 6px; align-items: baseline; }
  .version-row > span:nth-child(2) { flex: 1; }
  .version-row > a { font-size: 10px; color: var(--accent); cursor: pointer; }
  .version-row > a:hover { text-decoration: underline; }
  .version-row .tag {
    font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--accent); color: var(--white); padding: 1px 4px;
  }
  .version-row.viewing { background: var(--accent-1); margin: 0 -6px; padding: 4px 6px; }

  /* ===== Audit / version timeline ===== */
  .timeline {
    background: var(--white); border: 0.5px solid var(--gray-light);
    padding: 18px;
  }
  .tl-filters { display: flex; gap: 10px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 0.5px solid var(--gray-light); }
  .tl-filters select {
    padding: 6px 28px 6px 10px; border: 0.5px solid var(--gray-med);
    background-color: var(--white); font-family: inherit; font-size: 11px;
    background-position: right 8px center; background-size: 10px;
  }
  .tl-entry {
    display: grid; grid-template-columns: max-content 1fr auto;
    gap: 14px; padding: 12px 0;
    align-items: flex-start;
    border-bottom: 0.5px solid var(--surface-alt);
  }
  .tl-entry:last-child { border-bottom: none; }
  .tl-entry .when {
    font-size: 11px; color: var(--gray-med);
    text-align: right; padding-top: 2px;
    white-space: nowrap;
  }
  .tl-entry .when strong { color: var(--black); font-weight: 700; }
  .tl-entry .body { font-size: 12px; line-height: 1.5; }
  .tl-entry .body .who { font-weight: 700; color: var(--black); }
  .tl-entry .body .what { color: var(--gray-dark); }
  .tl-entry .body .diff {
    display: block; width: fit-content; margin-top: 6px;
    background: var(--surface-alt); padding: 6px 8px;
    font-size: 11px; color: var(--gray-dark);
    border-left: 2px solid var(--accent);
  }
  .tl-entry .body .diff .from { text-decoration: line-through; color: var(--gray-med); }
  .tl-entry .body .diff .to { color: var(--accent-3); font-weight: 700; }
  /* Fixed columns keep View/Restore aligned across rows; each action is pinned to
     its column so a missing one (the current version has no Restore) leaves an
     empty slot instead of shifting the rest. */
  .tl-entry .actions {
    display: grid; grid-template-columns: 52px 48px;
    gap: 4px 10px; font-size: 10px; align-items: start;
  }
  .tl-entry .actions .act-view { grid-column: 1; }
  .tl-entry .actions .act-restore { grid-column: 2; margin: 0; }
  .tl-entry .actions a { white-space: nowrap; }
  .tl-entry .actions a, .tl-entry .actions button { color: var(--accent); }
  /* Restore is a real POST form (the wireframe's <a> was a mock) — match the link
     look. `font: inherit` (not just font-size) so the button picks up the page
     font family + weight instead of the UA button default. */
  .tl-entry .actions button { padding: 0; font: inherit; }
  .tl-entry .actions a:hover, .tl-entry .actions button:hover { text-decoration: underline; }

  /* Login screen */
  .login-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--gray-bg);
    padding: 20px;
  }
  .login-card {
    background: var(--white); width: 100%; max-width: 420px;
    border-top: 3px solid var(--accent);
    padding: 32px;
  }
  .login-card h1 {
    font-size: 18px; font-weight: 400; letter-spacing: -0.01em;
    margin-bottom: 6px;
  }
  .login-card .sub { font-size: 12px; color: var(--gray-med); margin-bottom: 24px; }
  .ms-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px;
    border: 0.5px solid var(--gray-med);
    background: var(--white); color: var(--black);
    font-weight: 700; font-size: 13px;
  }
  .ms-btn:hover { background: var(--surface-alt); border-color: var(--accent); }
  .ms-btn .ms-tile {
    width: 18px; height: 18px;
    display: inline-grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px;
  }
  .ms-btn .ms-tile span:nth-child(1) { background: #F25022; }
  .ms-btn .ms-tile span:nth-child(2) { background: #7FBA00; }
  .ms-btn .ms-tile span:nth-child(3) { background: #00A4EF; }
  .ms-btn .ms-tile span:nth-child(4) { background: #FFB900; }
  .login-divider { margin: 18px 0; font-size: 10px; color: var(--gray-med); text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
  .login-shortcuts { display: flex; flex-direction: column; gap: 8px; }
  .login-shortcuts button {
    padding: 10px 14px; font-size: 12px; font-weight: 700;
    text-align: left;
    background: var(--surface-alt); border: 0.5px solid var(--gray-light);
    color: var(--black);
    display: flex; align-items: center; gap: 10px;
  }
  .login-shortcuts button:hover { border-color: var(--accent); }
  .login-shortcuts button .lr-name { flex: 1; }
  .login-shortcuts button .lr-role {
    font-size: 9px; color: var(--gray-med); text-transform: uppercase; letter-spacing: 0.08em;
  }

  /* ===== Section section header style for screens (matching dashboards) ===== */
  .sec-h {
    font-size: 13px; font-weight: 700; color: var(--black);
    margin: 24px 0 10px;
    display: flex; align-items: baseline; gap: 8px;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .sec-h::before { content: '›'; color: var(--accent); font-weight: 700; font-size: 16px; }
  .sec-h .aside { font-size: 10px; font-weight: 500; color: var(--gray-med); text-transform: none; letter-spacing: 0; }

  /* Section heading + inline tools (e.g., search) */
  .sec-head-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px;
  }
  .sec-head-row .sec-h { margin-bottom: 10px; }
  .reports-search {
    width: 240px; padding: 6px 10px;
    font-size: 12px; font-family: inherit;
    color: var(--black); background: var(--white);
    border: 0.5px solid var(--gray-light);
  }
  .reports-search::placeholder { color: var(--gray-med); }
  .reports-search:focus { outline: none; border-color: var(--accent); }

  .pill { display: inline-block; font-size: 10px; padding: 2px 8px; background: var(--surface-alt); color: var(--gray-dark); margin-right: 4px; }
  .pill.warn { background: var(--warn-bg); color: var(--warn); }


  /* --- Nested nav (added for Home → accounts hierarchy) --- */
  .left-nav a.nav-parent .nav-caret {
    margin-left: auto; font-size: 9px; color: var(--gray-med);
  }
  .left-nav .nav-children {
    display: flex; flex-direction: column;
    padding: 2px 0 6px;
  }
  .left-nav a.nav-child {
    padding: 6px 20px 6px 47px;
    font-size: 12.5px; color: var(--gray-dark);
    border-left: 3px solid transparent;
  }
  .left-nav a.nav-child:hover { background: var(--surface-alt); color: var(--black); }
  .left-nav a.nav-child.active {
    background: var(--surface-alt); color: var(--black);
    font-weight: 700; border-left-color: var(--accent);
  }
  .left-nav a.nav-child.disabled {
    color: var(--gray-light); cursor: not-allowed;
    pointer-events: none;
  }
  .left-nav .nav-divider {
    height: 0; margin: 14px 16px;
    border-top: 0.5px solid var(--gray-light);
  }

  /* pending-access-request count on the User accounts nav item */
  .left-nav a .nav-badge {
    margin-left: auto; background: var(--accent); color: var(--white);
    font-size: 10px; font-weight: 700; line-height: 1;
    padding: 3px 6px; min-width: 16px; text-align: center;
  }
  .left-nav a .nav-badge[hidden] { display: none; }

  /* ===== Report render (native dashboard) — shared by editor.html, editor-dhs.html,
     editor-native.html, editor-version.html, compare-v2.html (extracted 2026-06-04 to
     de-duplicate; was copied per-file). The `.editable` rules here are inert on read-only pages. ===== */
  .rpt { background: var(--white); border: 0.5px solid var(--gray-light); padding: 0; }
  .rpt-body { padding: 24px 28px; }
  .rpt-section + .rpt-section { margin-top: 26px; }
  .rpt-h { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 700; color: var(--black); text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 0.5px solid var(--gray-light); }
  .rpt-h .aside { font-size: 9px; font-weight: 500; letter-spacing: 0.04em; color: var(--gray-light); margin-left: auto; text-transform: none; }
  .rpt-h .btn { margin-left: auto; }
  .rpt-banner { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; background: var(--black); color: var(--white); padding: 22px 28px; }
  .rpt-banner .eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
  .rpt-banner h2 { font-size: 22px; font-weight: 700; margin: 6px 0; line-height: 1.15; }
  .rpt-banner .subtitle { font-size: 12px; color: rgba(255,255,255,0.8); line-height: 1.5; max-width: 640px; }
  .rpt-banner .date-badge { text-align: right; flex-shrink: 0; }
  .rpt-banner .sprint { font-size: 16px; font-weight: 700; }
  .rpt-banner .date-line { font-size: 11px; color: rgba(255,255,255,0.8); margin-top: 2px; }
  .rpt-banner .editable:hover { background: rgba(255,255,255,0.15); box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
  .rpt-banner .editable:focus { background: rgba(255,255,255,0.1); box-shadow: 0 0 0 2px var(--white); }
  .exec-summary p { font-size: 13px; color: var(--gray-dark); line-height: 1.6; margin: 0 0 8px; }
  .exec-summary ol { margin: 8px 0; padding-left: 22px; }
  .exec-summary li { font-size: 13px; color: var(--gray-dark); line-height: 1.55; margin-bottom: 6px; }
  /* Quick stats: no top/bottom frame, but keep the in-between dividers between
     metrics. First card sits flush-left to line up with the heading. */
  /* Quick stats can wrap to a second row (revenue plan + performance metrics).
     `grid-auto-rows: 1fr` keeps both rows the same height even though the revenue-
     plan card carries an extra sublabel line, so the bottom row isn't squished.
     The `row-gap` gives the wrapped row breathing space and holds the horizontal
     divider, so the full-height column dividers never touch it. */
  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 0; row-gap: 24px; grid-auto-rows: 1fr; }
  .stat-card { position: relative; padding: 14px 16px; border-right: 0.5px solid var(--gray-light); }
  .stat-card:nth-child(4n+1) { padding-left: 0; }   /* each row's first card flush-left */
  .stat-card:nth-child(4n) { border-right: none; }  /* each row's last column: no divider */
  .stat-card:last-child { border-right: none; }     /* short final row (e.g. 7 cards) */
  /* Horizontal row divider, centered in the row-gap above each second-row card. */
  .stat-card:nth-child(n+5)::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 0.5px; background: var(--gray-light); }
  .stat-value { font-size: 26px; font-weight: 700; color: var(--black); line-height: 1; min-height: 1em; }
  .stat-card.accent .stat-value { color: var(--accent); }
  /* Editable performance-metric values: empty shows a placeholder while editing,
     an em-dash when read-only/exported (no value entered yet). */
  .stat-value.editable { border-radius: 2px; transition: box-shadow 0.12s ease; }
  .stat-value.editable:hover { box-shadow: 0 0 0 3px var(--surface-alt, #f1f5f9); }
  .stat-value.editable:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
  .stat-value:empty::before { content: "—"; color: var(--gray-med); font-weight: 400; }
  .stat-value.editable:empty::before { content: attr(data-placeholder); font-size: 14px; font-style: italic; }
  .stat-label { font-size: 10px; font-weight: 700; color: var(--gray-med); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 8px; }
  .stat-sub { font-size: 11px; color: var(--gray-dark); margin-top: 4px; }
  .radar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .radar-card { padding: 12px 14px; border-right: 0.5px solid var(--gray-light); border-bottom: 0.5px solid var(--gray-light); display: flex; flex-direction: column; }
  /* Keep only the dividers BETWEEN adjacent cards — no outer frame, and nothing
     dangling toward an empty cell in a ragged last row. A right border only on the
     left column (and never the last card); a bottom border only when a card sits
     directly below (so drop the last row + the cell above any ragged gap). */
  .radar-card:nth-child(even),
  .radar-card:last-child { border-right: none; }
  .radar-card:last-child,
  .radar-card:nth-last-child(2) { border-bottom: none; }
  .radar-card h4 { font-size: 12.5px; font-weight: 700; color: var(--black); line-height: 1.25; margin-bottom: 6px; }
  .radar-card p { font-size: 12px; color: var(--gray-dark); line-height: 1.5; margin: 0; }
  .radar-tag { margin-top: auto; padding-top: 6px; border-top: 0.5px solid var(--gray-light); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
  .pc-xaxis, .pc-row { display: grid; grid-template-columns: 130px 1fr 92px; gap: 10px; align-items: center; }
  .pc-xaxis { font-size: 9px; color: var(--gray-med); margin-bottom: 6px; }
  .pc-xticks { display: flex; justify-content: space-between; }
  .pc-row { margin-bottom: 5px; }
  .pc-row-label { font-size: 11px; font-weight: 700; color: var(--black); }
  .pc-row-sub { display: block; font-size: 9px; color: var(--gray-med); font-weight: 400; }
  .pc-bar { display: flex; height: 24px; background: var(--surface-alt); }
  .pc-seg { display: flex; align-items: center; padding: 0 6px; font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; }
  .pc-seg.s1 { background: var(--gray-light); color: var(--black); }
  .pc-seg.s2 { background: var(--gray-med); color: var(--white); }
  .pc-seg.s3 { background: var(--accent-1); color: var(--accent-4); }
  .pc-seg.s4 { background: var(--accent); color: var(--white); }
  .pc-seg.s5 { background: var(--accent-3); color: var(--white); }
  .pc-seg.s6 { background: var(--accent-4); color: var(--white); }
  .pc-row-total { font-size: 11px; font-weight: 700; text-align: right; color: var(--black); }
  .pc-total-sub { display: block; font-size: 9px; color: var(--gray-med); font-weight: 400; }
  .pc-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 9px; color: var(--gray-med); margin-top: 12px; padding-top: 10px; border-top: 0.5px solid var(--gray-light); }
  .pc-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 3px; vertical-align: middle; }
  .pc-legend i.s1 { background: var(--gray-light); } .pc-legend i.s2 { background: var(--gray-med); }
  .pc-legend i.s3 { background: var(--accent-1); } .pc-legend i.s4 { background: var(--accent); }
  .pc-legend i.s5 { background: var(--accent-3); } .pc-legend i.s6 { background: var(--accent-4); }
  .ptable { width: 100%; border-collapse: collapse; }
  .ptable th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-med); border-bottom: 0.5px solid var(--gray-light); padding: 6px 8px; }
  .ptable th.num, .ptable td.num { text-align: right; }
  .ptable td { padding: 9px 8px; border-bottom: 0.5px solid var(--surface-alt); font-size: 12px; color: var(--gray-dark); vertical-align: top; }
  .ptable .rank { font-weight: 700; color: var(--accent); width: 22px; }
  .ptable .pname { font-weight: 700; color: var(--black); }
  .pstep { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 7px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; background: var(--gray-light); color: var(--gray-dark); }
  .pstep.s1 { background: var(--gray-light); color: var(--black); }
  .pstep.s2 { background: var(--gray-med); color: var(--white); }
  .pstep.s3 { background: var(--accent-1); color: var(--accent-4); }
  .pstep.s4 { background: var(--accent); color: var(--white); }
  .pstep.s5 { background: var(--accent-3); color: var(--white); }
  .pstep.s6 { background: var(--accent-4); color: var(--white); }
  .ptable td.pwin-high { color: var(--accent-3); font-weight: 700; }
  .ptable td.pwin-mid { color: var(--gray-dark); font-weight: 700; }
  .ptable td.pwin-low { color: var(--gray-med); font-weight: 700; }
  .coord-card { background: var(--black); color: var(--white); padding: 18px 24px; border-left: 3px solid var(--accent); margin-top: 26px; }
  .coord-card .coord-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 8px; }
  .coord-card .coord-title { font-size: 15px; font-weight: 400; line-height: 1.3; margin: 0 0 10px; }
  .coord-card ul { padding-left: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin: 0; }
  .coord-card li { font-size: 11.5px; color: var(--white); line-height: 1.4; padding-left: 14px; position: relative; }
  .coord-card li::before { content: '›'; color: var(--accent); font-weight: 700; position: absolute; left: 0; }
  .coord-card li strong { color: var(--accent-1); }
  .coord-card .editable:hover { background: rgba(255,255,255,0.12); box-shadow: 0 0 0 2px rgba(255,255,255,0.12); }
  .coord-card .editable:focus { background: rgba(255,255,255,0.08); box-shadow: 0 0 0 2px var(--white); }
  .rpt-footer { padding: 12px 0 4px; font-size: 10px; color: var(--gray-med); border-top: 0.5px solid var(--gray-light); margin-top: 22px; }
  .rpt-footer .ai-badge { font-size: 9px; font-weight: 700; color: var(--accent-3); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
  .rpt-footer .ai-badge::before { content: '› '; color: var(--accent); }
  .rpt-footer .meta-line span + span::before { content: ' · '; color: var(--gray-light); margin: 0 4px; }

  /* ===== Undo toast (shared by files.html, settings.html — extracted 2026-06-04) ===== */
  .toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px);
    background: var(--black); color: var(--white); padding: 10px 14px 10px 16px;
    font-size: 12px; display: flex; align-items: center; gap: 16px;
    opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms; z-index: 300;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
  .toast .toast-undo {
    color: var(--info-on-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 11px; background: transparent; border: none; cursor: pointer;
  }
  .toast .toast-undo:hover { color: var(--info-on-dark); }

  /* ===== Shared "Generating…" state (new-report Generate + editor Regenerate) ===== */
  .gen-surface { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 32px; min-height: 300px; }
  .gen-surface[hidden] { display: none; }   /* author display:flex would otherwise override the hidden attribute */
  .gen-spinner { width: 38px; height: 38px; margin-bottom: 18px; border: 2.5px solid var(--accent-1); border-top-color: var(--accent); border-radius: 50%; animation: gen-spin 720ms linear infinite; }
  @keyframes gen-spin { to { transform: rotate(360deg); } }
  .gen-title { font-size: 16px; font-weight: 700; color: var(--black); margin-bottom: 6px; }
  .gen-sub { font-size: 12.5px; color: var(--gray-med); max-width: 420px; line-height: 1.5; }
  .gen-progress { width: 280px; height: 4px; background: var(--gray-bg); margin-top: 18px; overflow: hidden; }
  .gen-progress .bar { width: 45%; height: 100%; background: var(--accent); animation: gen-indet 1.4s ease-in-out infinite; }
  @keyframes gen-indet { 0% { margin-left: -45%; } 100% { margin-left: 100%; } }

  /* Cancel / background actions on the shared "Generating…" surface (#19) */
  .gen-actions { display: flex; gap: 10px; margin-top: 22px; }

  /* ===== Notification center — in-app job events (#19) ===== */
  .notif { position: relative; display: flex; align-items: center; }
  .notif-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--gray-dark); display: flex; align-items: center; padding: 4px; }
  .notif-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
  .notif-btn:hover { color: var(--accent); }
  .notif-dot { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; background: var(--accent); border: 1.5px solid var(--white); display: none; }
  .notif.has-unread .notif-dot { display: block; }
  .notif-drawer { position: absolute; top: calc(100% + 8px); right: 0; width: 322px; background: var(--white); border: 0.5px solid var(--gray-light); z-index: 200; display: none; }
  .notif-drawer.open { display: block; }
  .notif-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 0.5px solid var(--gray-light); }
  .notif-head h4 { margin: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray-med); }
  .notif-clear { font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer; }
  .notif-list { max-height: 340px; overflow-y: auto; }
  .notif-item { display: flex; gap: 10px; padding: 11px 12px; border-bottom: 0.5px solid var(--gray-bg); }
  .notif-item:last-child { border-bottom: none; }
  .notif-ico { flex: 0 0 16px; height: 16px; margin-top: 1px; display: flex; align-items: flex-start; justify-content: center; }
  .notif-ico svg { width: 16px; height: 16px; stroke-width: 2; fill: none; stroke: currentColor; }
  .notif-item.ok  .notif-ico { color: var(--ok); }
  .notif-item.err .notif-ico { color: var(--err); }
  .notif-item.run .notif-ico { color: var(--accent); }
  .notif-body { flex: 1; min-width: 0; }
  .notif-body .t { font-size: 12.5px; color: var(--gray-dark); line-height: 1.4; }
  .notif-body .t a { color: var(--accent); font-weight: 700; text-decoration: none; }
  .notif-body .meta { font-size: 11px; color: var(--gray-med); margin-top: 3px; display: flex; gap: 10px; align-items: center; }
  .notif-cancel { font-size: 11px; color: var(--err); cursor: pointer; border: none; background: none; padding: 0; }
  .notif-empty { padding: 24px 12px; text-align: center; font-size: 12px; color: var(--gray-med); }
  .notif-spin { width: 13px; height: 13px; border: 2px solid var(--accent-1); border-top-color: var(--accent); border-radius: 50%; animation: gen-spin 720ms linear infinite; }

  /* The new-report wizard toggles via an `active` class (Alpine :class), not
     x-show. Scope display to the id so it can't be force-shown by the legacy
     base.html `.modal-backdrop { display: flex }` rule (id beats class). */
  #new-report-modal { display: none; }
  #new-report-modal.active { display: flex; }

  /* regenerate-mode: locked identity fields + heads-up note in the reused wizard.
     Audience (#nr-audience) is excluded — like Emphasis, it's a synthesis input and stays editable on regenerate (#8). */
  #new-report-modal.regen [data-step="1"] select:not(#nr-audience),
  #new-report-modal.regen [data-step="1"] input[type="text"] { background: var(--surface-alt); color: var(--gray-med); pointer-events: none; }
  .regen-note { display: none; background: var(--warn-bg); border-left: 3px solid var(--warn); padding: 10px 12px; font-size: 12px; color: var(--gray-dark); margin-bottom: 16px; }
  #new-report-modal.regen .regen-note { display: block; }
  .regen-lock-hint { display: none; font-size: 10px; font-weight: 500; color: var(--gray-med); text-transform: none; letter-spacing: 0; margin-left: 8px; }
  #new-report-modal.regen .regen-lock-hint { display: inline; }

  /* =========================================================================
     Components below were ported from the per-page <style> blocks of the
     wireframes (empty-states / error-states / compare-v2). They were never in
     the shared stylesheet, so the build templates that need them had nothing
     to hook into. Extracted to match the canonical design 1:1.
     ========================================================================= */

  /* ----- Reusable empty-state component (no-data vs filtered) ----- */
  .empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 32px; }
  .empty .glyph { width: 34px; height: 34px; margin-bottom: 14px; color: var(--gray-light); stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .empty .et { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 5px; }
  .empty .es { font-size: 12.5px; color: var(--gray-med); max-width: 380px; line-height: 1.5; }
  .empty .es a { color: var(--accent); }
  .empty .ea { margin-top: 18px; }
  .empty .clear { color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
  .empty .clear:hover { color: var(--accent-3); text-decoration: underline; }
  .empty .role-note { font-size: 10px; color: var(--gray-light); margin-top: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
  .empty.inline { padding: 28px 18px; }
  .empty.inline .glyph { width: 26px; height: 26px; margin-bottom: 10px; }
  .empty.inline .et { font-size: 13px; }
  .empty.inline .es { font-size: 11.5px; }

  /* ----- Generation-failure offending-file list (inside .gen-surface error) ----- */
  .gen-icon { width: 40px; height: 40px; margin-bottom: 16px; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .gen-icon.err { stroke: var(--err); }
  .gen-files { margin-top: 18px; width: 100%; max-width: 420px; text-align: left; border: 0.5px solid var(--err); background: var(--err-bg); }
  .gen-files-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--err); padding: 8px 12px; border-bottom: 0.5px solid var(--err); }
  .gen-file-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 12px; color: var(--gray-dark); border-bottom: 0.5px solid var(--err-border); }
  .gen-file-row:last-child { border-bottom: none; }
  .gen-file-row .fx { width: 14px; height: 14px; flex-shrink: 0; stroke: var(--err); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .gen-file-row .fname { color: var(--black); font-weight: 700; }
  .gen-file-row .freason { color: var(--err); margin-left: auto; font-size: 11px; }

  /* ----- Batch-upload per-row failure queue ----- */
  .uq-summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 12px; background: var(--surface-alt); border: 0.5px solid var(--gray-light); }
  .uq-summary .ok-n { color: var(--ok); font-weight: 700; }
  .uq-summary .err-n { color: var(--err); font-weight: 700; }
  .uq-summary .spacer { flex: 1; }
  .uq-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 12px; border: 0.5px solid var(--gray-light); background: var(--white); margin-bottom: 6px; }
  .uq-item .stat-icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .uq-item.ok { border-left: 3px solid var(--ok); }
  .uq-item.ok .stat-icon { stroke: var(--ok); }
  .uq-item.err { border-left: 3px solid var(--err); background: var(--err-bg); }
  .uq-item.err .stat-icon { stroke: var(--err); }
  .uq-item.pending { border-left: 3px solid var(--accent); }
  .uq-item .nm { flex: 1; min-width: 0; color: var(--black); font-weight: 500; word-break: break-word; }
  .uq-item .reason { color: var(--err); font-size: 11px; flex-shrink: 0; }
  .uq-item .sz { color: var(--gray-med); font-size: 11px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .uq-item .mini-spin { width: 14px; height: 14px; border: 2px solid var(--accent-1); border-top-color: var(--accent); border-radius: 50%; animation: gen-spin 720ms linear infinite; flex-shrink: 0; }

  /* ----- Editor save-failure: anchored retry/discard + connection-lost banner ----- */
  .conn-banner { display: none; align-items: center; gap: 10px; background: var(--err-bg); border: 0.5px solid var(--err); padding: 10px 14px; margin: 14px 16px 0; font-size: 12px; color: var(--err); }
  .conn-banner.show { display: flex; }
  .conn-banner svg { width: 15px; height: 15px; stroke: var(--err); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .conn-banner strong { color: var(--err); }
  .conn-banner .spacer { flex: 1; }
  .conn-banner .btn { border-color: var(--err); color: var(--err); }
  .conn-banner .btn:hover { background: var(--err-bg); }
  /* failed editable field + the JS-anchored prompt (build fields carry [data-path]) */
  [data-path].failed { box-shadow: inset 0 0 0 1.5px var(--err); background: var(--err-bg); border-radius: 2px; }
  [data-path].has-pop { position: relative; }
  .retry-pop { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--black); color: var(--white); z-index: 5; padding: 12px 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.22); text-align: left; }
  .retry-pop.show { display: block; }
  .retry-pop::before { content: ""; position: absolute; top: -6px; left: 22px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--black); }
  .retry-pop .rp-msg { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
  .retry-pop .rp-msg svg { width: 14px; height: 14px; stroke: var(--err-on-dark); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .retry-pop .rp-sub { font-size: 11px; color: var(--gray-light); margin-bottom: 10px; line-height: 1.4; }
  .retry-pop .rp-actions { display: flex; gap: 8px; }
  .retry-pop .rp-btn { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 12px; border: 0.5px solid var(--gray-med); color: var(--white); background: transparent; }
  .retry-pop .rp-btn:hover { border-color: var(--white); }
  .retry-pop .rp-btn.primary { background: var(--accent); border-color: var(--accent); }
  .retry-pop .rp-btn.primary:hover { background: var(--accent-3); }

  /* ----- Compare: native track-changes diff vocabulary ----- */
  .d-changed { color: var(--err); background: var(--diff-bg); border-bottom: 1px dotted var(--err); padding: 0 2px; cursor: help; position: relative; }
  .rpt-banner .d-changed { color: var(--err-on-dark); background: rgba(185,28,28,0.35); border-bottom-color: var(--err-on-dark); }
  .d-changed:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .d-changed:hover::after, .d-changed:focus::after { content: attr(data-old); position: absolute; left: 0; top: calc(100% + 7px); background: var(--black); color: var(--white); padding: 7px 10px; font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; width: max-content; max-width: 340px; white-space: normal; box-shadow: 0 4px 14px rgba(0,0,0,0.28); z-index: 60; pointer-events: none; }
  .d-changed:hover::before, .d-changed:focus::before { content: ""; position: absolute; left: 10px; top: 100%; margin-top: 2px; border: 5px solid transparent; border-bottom-color: var(--black); z-index: 60; pointer-events: none; }
  .exec-summary li.d-added { background: rgba(7,133,242,0.06); border-left: 2px solid var(--accent); padding-left: 8px; margin-left: -10px; }
  tr.d-added td { background: rgba(7,133,242,0.05); }
  .d-tag { display: inline-block; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; margin-left: 8px; vertical-align: 1px; white-space: nowrap; }
  .d-tag.add { background: var(--accent-1); color: var(--accent-4); }
  .d-tag.move { background: var(--surface-alt); color: var(--gray-dark); border: 0.5px solid var(--gray-light); }
  .d-tag.rem { background: var(--err-bg); color: var(--err); border: 0.5px solid var(--err-border); }
  .exec-summary li.d-removed { list-style: none; color: var(--gray-med); text-decoration: line-through; opacity: 0.85; margin-left: -10px; padding-left: 8px; border-left: 2px solid var(--err-border); }
  .exec-summary li.d-removed .d-tag.rem { text-decoration: none; }
  tr.d-removed td { color: var(--gray-med); text-decoration: line-through; opacity: 0.8; background: repeating-linear-gradient(45deg, transparent, transparent 7px, rgba(0,0,0,0.025) 7px, rgba(0,0,0,0.025) 14px); }
  tr.d-removed td .d-tag.rem, tr.d-removed .pstep { text-decoration: none; }
  .d-block { position: relative; background: rgba(253,240,164,0.32); box-shadow: inset 3px 0 0 var(--diff-bar); padding: 10px 12px; cursor: help; }
  .exec-summary .d-block { padding: 2px 14px; }
  .d-block-prev { display: none; position: absolute; top: 8px; right: 8px; z-index: 70; width: 520px; max-width: 88vw; max-height: 460px; overflow: auto; background: var(--black); color: rgba(255,255,255,0.92); padding: 18px 20px; font-size: 14px; line-height: 1.65; box-shadow: 0 8px 26px rgba(0,0,0,0.34); }
  .d-block:hover .d-block-prev, .d-block:focus .d-block-prev, .d-block:focus-within .d-block-prev { display: block; }
  .d-block-prev .d-prev-label { font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--info-on-dark); margin-bottom: 10px; }
  .d-block-prev, .d-block-prev p, .d-block-prev li, .d-block-prev td { color: rgba(255,255,255,0.92); }
  .d-block-prev p { margin: 0 0 8px; } .d-block-prev ol { margin: 8px 0; padding-left: 20px; } .d-block-prev li { margin-bottom: 6px; }
  .prev-deals { width: 100%; border-collapse: collapse; margin-top: 2px; }
  .prev-deals th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--info-on-dark); border-bottom: 0.5px solid rgba(255,255,255,0.22); padding: 5px 6px; }
  .prev-deals th.num, .prev-deals td.num { text-align: right; }
  .prev-deals td { padding: 7px 6px; border-bottom: 0.5px solid rgba(255,255,255,0.10); font-size: 12.5px; vertical-align: top; }
  .prev-deals .rank { color: var(--info-on-dark); font-weight: 700; }
  .prev-added { margin-top: 10px; font-size: 12px; color: var(--ok-on-dark); }
  .d-block-prev .d-tag { text-transform: none; letter-spacing: 0.01em; font-size: 10.5px; font-weight: 600; padding: 1px 7px; }

  /* ===== User accounts (settings) — inline role editing + access requests =====
     Ported from settings.html's page <style>; all use existing design tokens. */
  .role-cell { display: inline-flex; align-items: center; gap: 8px; }
  .role-dot { width: 8px; height: 8px; flex-shrink: 0; }
  .role-dot.d-superuser { background: var(--accent-4); }
  .role-dot.d-owner    { background: var(--accent); }
  .role-dot.d-editor   { background: var(--gray-med); }
  .role-dot.d-reviewer { background: var(--gray-light); }
  .role-select {
    border: 0.5px solid var(--gray-light); background-color: var(--white);
    font-family: inherit; font-size: 12px; font-weight: 500; color: var(--black);
    padding: 5px 26px 5px 8px; cursor: pointer;
    background-position: right 7px center; background-size: 10px;
  }
  .role-select:hover { border-color: var(--accent); }
  .role-select:focus { outline: none; border-color: var(--accent); }
  .pending-section { margin-bottom: 26px; }
  .pending-section .reports-table { border-left: 3px solid var(--accent); }
  .req-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .req-actions .btn { padding: 6px 12px; }
  .pending-empty { font-size: 12px; color: var(--gray-med); padding: 12px 14px; background: var(--surface-alt); border: 0.5px solid var(--gray-light); }
  .req-when { color: var(--gray-med); }

  /* Section notes (pipeline / deals "Note" aside). Here rather than in the app
     shell so the dashboard export — which inlines only this stylesheet — styles
     them too. .note-remove / .add-note are editor-only (unused in the export). */
  .section-note { margin-top: 14px; border-left: 3px solid var(--accent,#0785f2); background: var(--surface-alt,#f7f7f8); padding: 10px 12px; }
  .section-note .note-label { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 700;
                              text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-med,#6b7280); margin-bottom: 5px; }
  .section-note .note-remove { margin-left: auto; font-size: 10px; color: var(--gray-med,#6b7280); background: none; border: none; cursor: pointer; padding: 0; }
  .note-body { font-size: 12px; color: var(--gray-dark,#374151); line-height: 1.5; min-height: 18px; }
  .note-body:empty::before { content: attr(data-placeholder); color: var(--gray-med,#9ca3af); font-style: italic; }
  .add-note { border: 1px solid var(--accent,#0785f2); color: var(--accent-3,#0564b5); background: #fff; }