/* ddq.css - main stylesheet, extracted VERBATIM from the ddq.html inline
   <style> (Phase 4 CSS pilot, behaviour-neutral). The smaller responder
   module <style> stays inline for now. */
  :root {
    --navy:  #1F4543;
    --brown: #C38058;
    --light: #F1F4F7;
    --white: #FFFFFF;
    --cream: #F5E9D8;
    --grey:  #6B7A8D;
    --dk:    #3B4D6B;
    --pale:  #C8D4E8;
  }
  /* ── Delegate sub-delegation (section level) ─────────────────────
     Colleague (sub-mode) sees one scoped section; lead sees per-section
     "Send to a colleague" controls + a pull-returned bar. */
  body.sub-mode .ddq-intro,
  body.sub-mode .ddq-respondent,
  body.sub-mode .ddq-btn-submit:not(.sub-sendback-btn),
  body.sub-mode #ddq-doc-progress-row { display: none !important; }
  .sub-banner { max-width: 920px; margin: 16px auto 0; padding: 16px 18px; background: #FBF6EE; border: 1px solid #E4DCCD; border-left: 3px solid #C38058; border-radius: 8px; }
  .sub-banner h3 { margin: 0 0 6px; color: #1F4543; font-family: Georgia, serif; }
  .sub-banner p { margin: 0; color: #7a6b5b; font-size: 14px; line-height: 1.5; }
  .sub-sendback-row { margin: 16px 0 4px; }
  .sub-lead-bar { max-width: 920px; margin: 12px auto; padding: 12px 16px; background: #FCF7F1; border: 1px solid #E4DCCD; border-radius: 8px; font-size: 13.5px; color: #3a3027; line-height: 1.5; }
  .sub-assign-btn { margin-left: 10px; font-size: 11.5px; font-weight: 600; color: #C38058; background: #fff; border: 1px solid rgba(195,128,88,.5); border-radius: 4px; padding: 3px 9px; cursor: pointer; }
  .sub-assign-btn:hover { background: #C38058; color: #fff; }
  .sub-assign-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: #FBF6EE; border-bottom: 1px solid #E4DCCD; }
  .sub-assign-email { padding: 5px 8px; border: 1px solid #d8ccb8; border-radius: 4px; font-size: 13px; min-width: 220px; }

  /* ── PASSPORT HUB ────────────────────────────────────────────────
     The Passport view (reached from the fork) holds two sections,
     Departure / Arrival, each with a header above a panel that reuses
     the existing .inv-card / .resp-* styles. */
  .passport-wrap { max-width: 920px; margin: 0 auto; padding: 24px 20px 60px; }
  .passport-tabs { display: flex; gap: 8px; margin: 0 0 18px; border-bottom: 1px solid #E4DCCD; }
  .passport-tab {
    background: none; border: none; border-bottom: 3px solid transparent;
    padding: 10px 18px; font-size: 15px; font-weight: 600; color: #7A6B5B;
    cursor: pointer; font-family: inherit;
  }
  .passport-tab:hover { color: #1F4543; }
  .passport-tab.active { color: #1F4543; border-bottom-color: #C38058; }
  .passport-note { color: #7a6b5b; font-size: 14px; line-height: 1.55; max-width: 80ch; margin: 0 0 18px; }
  /* Passport Departure step-1 grid: top-align the two columns and give the
     label row + the input/select a uniform height so the email field and the
     "assessing them as" dropdown align exactly (top and bottom). */
  .passport-req-grid { align-items: start; }
  .passport-req-grid .resp-field label { min-height: 16px; line-height: 16px; }
  .passport-req-grid .resp-field input,
  .passport-req-grid .resp-field select { height: 38px; box-sizing: border-box; }
  .passport-sec { margin: 4px 0 14px; }
  .passport-sec:not(:first-child) { margin-top: 30px; padding-top: 22px; border-top: 1px solid #E4DCCD; }
  .passport-sec h2 { margin: 0 0 6px; }
  .passport-sec .muted { margin: 0; max-width: 72ch; }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--light);
    color: var(--dk);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  /* ── PASSWORD GATE ───────────────────────────────────────────────── */
  #gate {
    position: fixed; inset: 0;
    background: linear-gradient(135deg, #15302F 0%, #1F4543 60%, #2A5957 100%);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    padding: 20px;
  }
  .gate-card {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(195,128,88,.35);
    border-radius: 10px;
    padding: 42px 38px 32px;
    width: 100%; max-width: 420px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
  }
  .gate-card img.logo {
    height: 110px; width: auto; margin-bottom: 18px;
    border-radius: 6px;
  }
  .gate-card h1 {
    font-family: 'Playfair Display', serif;
    font-size: 22px; color: var(--cream);
    margin-bottom: 8px; letter-spacing: .4px;
  }
  .gate-card p.gate-sub {
    font-size: 12.5px; color: #B5C8C6; line-height: 1.55;
    margin-bottom: 22px;
  }
  .gate-card input {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(195,128,88,.4);
    color: var(--cream);
    padding: 11px 14px; border-radius: 6px;
    font-size: 14px; font-family: 'Inter', sans-serif;
    text-align: center; letter-spacing: 2px;
    margin-bottom: 12px;
  }
  .gate-card input:focus {
    outline: none; border-color: var(--brown);
    background: rgba(255,255,255,.09);
  }
  .gate-card button.gate-btn {
    width: 100%;
    background: var(--brown); color: #fff;
    border: none; padding: 11px 14px;
    border-radius: 6px; font-size: 13px; font-weight: 700;
    letter-spacing: .5px; cursor: pointer;
    transition: background .18s, transform .15s;
    text-transform: uppercase;
  }
  .gate-card button.gate-btn:hover {
    background: #B0704A; transform: translateY(-1px);
  }
  .gate-error {
    color: #F2B5A0; font-size: 11.5px; margin-top: 12px;
    min-height: 16px;
  }
  .gate-back {
    display: block; margin-top: 24px;
    font-size: 11px; color: rgba(245,233,216,.55);
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 18px;
    transition: color .15s;
  }
  .gate-back:hover { color: var(--brown); }
  /* Subtle "Prepared for {Client}" tag shown above the gate heading
     (and as a small line under the main DDQ title once unlocked). Stays
     hidden until JS detects a known client slug in the URL. */
  .gate-client {
    display: none;
    font-size: 10.5px; color: var(--brown);
    text-transform: uppercase; letter-spacing: 1.8px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .ddq-client-line {
    display: none;
    font-size: 11px; color: var(--brown);
    text-transform: uppercase; letter-spacing: 1.6px;
    font-weight: 700;
    margin: -14px 0 22px;
  }

  /* ── DATA PRIVACY CONSENT (first-login landing) ──────────────────── */
  #privacy-view {
    position: fixed; inset: 0;
    background: linear-gradient(135deg, #15302F 0%, #1F4543 60%, #2A5957 100%);
    display: none; align-items: center; justify-content: center;
    z-index: 10001;
    padding: 24px;
    overflow-y: auto;
  }
  .privacy-card {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(195,128,88,.35);
    border-radius: 10px;
    padding: 36px 40px 30px;
    width: 100%; max-width: 700px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    margin: auto;
  }
  .privacy-card img.logo {
    height: 78px; width: auto; display: block;
    margin: 0 auto 14px; border-radius: 6px;
  }
  .privacy-eyebrow {
    text-align: center; font-size: 10.5px; color: var(--brown);
    text-transform: uppercase; letter-spacing: 1.8px; font-weight: 700;
    margin-bottom: 6px;
  }
  .privacy-card h1 {
    font-family: 'Playfair Display', serif;
    font-size: 24px; color: var(--cream);
    margin-bottom: 4px; text-align: center; letter-spacing: .4px;
  }
  .privacy-version {
    text-align: center; font-size: 11px; color: #8FA9A7; margin-bottom: 20px;
  }
  .privacy-body {
    max-height: 44vh; overflow-y: auto;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(195,128,88,.22);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 18px;
  }
  .privacy-body h2 {
    font-family: 'Inter', sans-serif; font-size: 12px; color: var(--brown);
    text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
    margin: 16px 0 5px;
  }
  .privacy-body h2:first-child { margin-top: 0; }
  .privacy-body p, .privacy-body li {
    font-size: 12.5px; color: #CBD8D6; line-height: 1.6;
  }
  .privacy-body p { margin-bottom: 6px; }
  .privacy-body ul { margin: 4px 0 8px 18px; }
  .privacy-body li { margin-bottom: 3px; }
  .privacy-body a { color: var(--brown); }
  .privacy-consent-row {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 20px; padding: 0 2px;
  }
  .privacy-consent-row input[type="checkbox"] {
    margin-top: 2px; width: 17px; height: 17px; flex: 0 0 auto;
    accent-color: var(--brown); cursor: pointer;
  }
  .privacy-consent-row label {
    font-size: 12.5px; color: var(--cream); line-height: 1.5; cursor: pointer;
  }
  .privacy-actions { display: flex; gap: 12px; }
  .privacy-btn {
    flex: 1; border: none; padding: 13px 14px; border-radius: 6px;
    font-size: 13px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; cursor: pointer;
    transition: background .18s, transform .15s, opacity .15s;
    font-family: 'Inter', sans-serif;
  }
  .privacy-btn-consent { background: var(--brown); color: #fff; }
  .privacy-btn-consent:hover:not(:disabled) { background: #B0704A; transform: translateY(-1px); }
  .privacy-btn-consent:disabled { opacity: .45; cursor: not-allowed; }
  .privacy-btn-decline {
    background: transparent; color: #C9D6D4;
    border: 1px solid rgba(195,128,88,.45);
  }
  .privacy-btn-decline:hover { border-color: var(--brown); color: var(--cream); }

  /* ── PAGE LAYOUT ─────────────────────────────────────────────────── */
  #content { display: none; }

  header.ddq-header {
    background: var(--navy);
    border-bottom: 2px solid var(--brown);
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 4px 18px rgba(31,69,67,.25);
  }
  .ddq-header-top {
    padding: 12px 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }
  /* Centred Cellar mark column. */
  .ddq-header-top > .cellar-brand-link { justify-self: center; }
  /* Right-hand column stays right-aligned. */
  .ddq-header-top > .header-right { justify-self: end; }

  /* ── Outsourcing Guidance button (fixed, top-left under the header) + modal ── */
  .outsourcing-guidance-btn {
    /* top aligns with the tab bar (which sits at 142px: 82px header + 60px
       main padding-top) so the button lines up with the bar on every page. */
    position: fixed; top: 142px; left: 20px; z-index: 60;
    background: var(--navy); color: var(--brown);
    border: 1px solid var(--brown); border-radius: 8px;
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: 13px; letter-spacing: .3px; line-height: 1.25;
    text-align: left; padding: 10px 14px; max-width: 150px; cursor: pointer;
    box-shadow: 0 3px 12px rgba(31,69,67,.18);
    transition: background .15s, color .15s;
  }
  .outsourcing-guidance-btn:hover { background: var(--brown); color: #fff; }
  /* Fix #15: while a review is open, align the Outsourcing Guidance box top with
     the review card (main frame) and the NOTES pad — all three at 209px. On
     every other page it stays at 142px (tab-bar level, Fix #11). */
  body.review-header-mode .outsourcing-guidance-btn { top: 209px; }
  /* The DDQ-tab copy (inside #content) only shows while the admin is on the
     DDQ tab; hidden on the gate and recipient fill-out, which also use #content. */
  body:not(.ddq-tab-mode) .content-guidance-btn { display: none !important; }
  /* On narrower viewports the centred 980px main leaves no left gutter, so the
     fixed button would overlap content — drop it into normal flow instead. */
  @media (max-width: 1320px) {
    .outsourcing-guidance-btn { position: static; display: inline-block; margin: 14px 0 -4px 24px; max-width: none; }
  }
  .guidance-modal {
    position: fixed; inset: 0; z-index: 350;
    background: rgba(31,69,67,.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 20px; overflow-y: auto;
  }
  .guidance-card {
    position: relative;
    background: #fff; border-radius: 10px; border-top: 5px solid var(--brown);
    max-width: 760px; width: 100%; padding: 26px 30px;
    box-shadow: 0 24px 70px rgba(0,0,0,.4);
  }
  .guidance-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; font-size: 26px; line-height: 1;
    color: var(--grey); cursor: pointer;
  }
  .guidance-close:hover { color: var(--brown); }
  .guidance-card h2 {
    font-family: 'Playfair Display', serif; color: var(--navy);
    font-size: 22px; margin: 0 30px 8px 0;
  }
  .guidance-disclaimer { font-size: 12px; color: var(--grey); margin-bottom: 18px; line-height: 1.5; }
  .guidance-reviewed { color: var(--brown); font-weight: 600; }
  .guidance-list { display: flex; flex-direction: column; gap: 14px; }
  .guidance-item {
    border: 1px solid var(--line); border-left: 3px solid var(--brown);
    border-radius: 6px; padding: 12px 14px; background: #FBFCFE;
  }
  .guidance-item-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
  .guidance-item-name {
    font-family: 'Playfair Display', serif; font-weight: 700;
    color: var(--navy); font-size: 15px; text-decoration: none;
  }
  .guidance-item-name:hover { color: var(--brown); text-decoration: underline; }
  .guidance-badge {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: #fff; background: var(--brown); padding: 2px 7px; border-radius: 9px; white-space: nowrap;
  }
  .guidance-item-binds { font-size: 12px; color: var(--navy); margin-bottom: 3px; }
  .guidance-item-req { font-size: 12.5px; color: #4a5b59; line-height: 1.5; }
  /* ── Sticky stats bar (sits at very top of page) ────────────────── */
  .ddq-stats-bar {
    background: rgba(0,0,0,.18);
    border-top: 1px solid rgba(195,128,88,.25);
    padding: 8px 28px;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px; align-items: center;
  }
  .ddq-stat {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
  }
  .ddq-stat-label {
    font-size: 9.5px; color: var(--brown);
    font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.2px; flex-shrink: 0;
    white-space: nowrap;
  }
  .ddq-stat-bar {
    flex: 1; height: 6px;
    background: rgba(255,255,255,.1);
    border-radius: 3px; overflow: hidden;
    min-width: 0;
  }
  .ddq-stat-bar-fill {
    height: 100%; background: var(--brown);
    width: 0%; transition: width .35s ease;
  }
  .ddq-stat-bar-fill.complete { background: #6FBE6A; }
  .ddq-stat-value {
    font-size: 12px; color: var(--cream);
    font-weight: 700; flex-shrink: 0;
    min-width: 56px; text-align: right;
    white-space: nowrap;
  }
  .ddq-header .logo-wrap {
    display: flex; align-items: center; gap: 14px;
  }
  /* Legacy Armagnac PNG (kept in case the old img tag resurfaces). */
  .ddq-header .logo-wrap img:not(.cellar-brand-logo) {
    height: 70px; width: auto;
    filter: brightness(1.35) saturate(1.15)
            drop-shadow(0 0 6px rgba(255,235,200,.3));
  }
  /* Cellar brand mark on the left of the top bar. */
  .ddq-header .cellar-brand-link {
    display: inline-flex; align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
  }
  .ddq-header .cellar-brand-logo {
    height: 56px; width: auto;
    display: block;
    border-radius: 4px;
  }
  /* Phase 4b: top-left shows the CLIENT name + "Powered by Armagnac
     Consulting" instead of the Armagnac logo. */
  .ddq-header .client-name-block {
    display: flex; flex-direction: column;
    justify-content: center;
    line-height: 1.2;
  }
  .ddq-header .client-name {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 900;
    color: var(--cream);
    letter-spacing: .4px;
    text-transform: uppercase;
  }
  .ddq-header .powered-by {
    font-size: 10px; color: rgba(245,233,216,.55);
    letter-spacing: 1.2px; text-transform: uppercase;
    text-decoration: none; font-weight: 500;
    margin-top: 4px;
    transition: color .15s;
  }
  .ddq-header .powered-by strong {
    color: var(--brown); font-weight: 700;
  }
  .ddq-header .powered-by:hover { color: var(--cream); }
  .ddq-header .powered-by:hover strong { color: #DBA079; }
  /* Phase 5 fix-round 2 — recipient-only header pieces.
     Scoped to body.recipient-mode so the admin/legacy header layout
     (centered, title + back-link side-by-side) is preserved.
     Reviews-tab adjustment 2026-05-25 — same rules also apply on
     body.review-header-mode so opening a submitted DDQ in the Reviews
     tab gets the same TL (client name + recipient email) / TR
     ("{type} DDQ" + Powered by) treatment. */
  body.recipient-mode .ddq-header .recipient-email-line,
  body.review-header-mode .ddq-header .recipient-email-line,
  body.admin-header-mode .ddq-header .recipient-email-line {
    font-size: 12.5px; color: var(--cream);
    opacity: .8; margin-top: 4px;
    letter-spacing: .2px;
  }
  body.recipient-mode .ddq-header .header-right,
  body.review-header-mode .ddq-header .header-right,
  body.admin-header-mode .ddq-header .header-right,
  #responder .ddq-header .header-right,
  #passport-view .ddq-header .header-right,
  #fork-view .ddq-header .header-right {
    display: flex; align-items: flex-end;
    flex-direction: column; gap: 4px;
  }
  body.recipient-mode .ddq-header .powered-by-right,
  body.review-header-mode .ddq-header .powered-by-right,
  body.admin-header-mode .ddq-header .powered-by-right,
  #responder .ddq-header .powered-by-right,
  #passport-view .ddq-header .powered-by-right,
  #fork-view .ddq-header .powered-by-right {
    font-size: 10.5px; color: rgba(245,233,216,.6);
    text-transform: uppercase; letter-spacing: 1.4px;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s;
  }
  body.recipient-mode .ddq-header .powered-by-right strong,
  body.review-header-mode .ddq-header .powered-by-right strong,
  body.admin-header-mode .ddq-header .powered-by-right strong,
  #responder .ddq-header .powered-by-right strong,
  #passport-view .ddq-header .powered-by-right strong,
  #fork-view .ddq-header .powered-by-right strong {
    color: var(--brown); font-weight: 700;
    transition: color .15s;
  }
  body.recipient-mode .ddq-header .powered-by-right:hover,
  body.review-header-mode .ddq-header .powered-by-right:hover,
  body.admin-header-mode .ddq-header .powered-by-right:hover,
  #responder .ddq-header .powered-by-right:hover,
  #passport-view .ddq-header .powered-by-right:hover,
  #fork-view .ddq-header .powered-by-right:hover { color: var(--cream); }
  body.recipient-mode .ddq-header .powered-by-right:hover strong,
  body.review-header-mode .ddq-header .powered-by-right:hover strong,
  body.admin-header-mode .ddq-header .powered-by-right:hover strong,
  #responder .ddq-header .powered-by-right:hover strong,
  #passport-view .ddq-header .powered-by-right:hover strong,
  #fork-view .ddq-header .powered-by-right:hover strong { color: #DBA079; }
  /* Sign-out anchor moved from the TR header to the right end of the admin-
     tabs row (Reviews-tab adjustment 2026-05-25). */
  .admin-tabs-signout {
    margin-left: auto;
    background: transparent; border: none;
    color: var(--grey); font-size: 11.5px;
    text-decoration: none; cursor: pointer;
    padding: 6px 10px; border-radius: 4px;
    letter-spacing: .3px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .admin-tabs-signout:hover { color: var(--brown); }
  /* Fix #6: Sign out + My account stack sits OUTSIDE the bordered tab box,
     to its right. The bar is wrapped in .admin-tabs-row (flex); the box flexes
     to fill and the acct stack is a sibling outside the border. */
  .admin-tabs-row {
    display: flex; align-items: center; gap: 14px;
    max-width: 1200px; margin: 0 auto 18px;
  }
  #content .admin-tabs-row { max-width: none; margin: 0 0 14px; }
  .admin-tabs-row > .admin-tabs { margin: 0; max-width: none; flex: 1 1 auto; }
  body.ddq-tab-mode #content .admin-tabs-row > .content-admin-tabs { margin: 0; }
  /* Fix #5/#6: right-end stack — Sign out on top, My account below. */
  .admin-tabs-acct {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 1px; flex: 0 0 auto;
  }
  .admin-tabs-acct .admin-tabs-signout { margin-left: 0; padding-bottom: 2px; }
  .admin-tabs-myaccount {
    background: transparent; border: none;
    color: var(--brown); font-size: 11.5px; font-weight: 700;
    text-decoration: none; cursor: pointer;
    padding: 2px 10px; border-radius: 4px;
    letter-spacing: .3px; white-space: nowrap;
  }
  .admin-tabs-myaccount:hover { color: var(--navy); text-decoration: underline; }
  /* Idea #2: renewal alert — red-circled "!" below My account. */
  .admin-tabs-alert {
    margin-top: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #B3372A; color: #fff; display: inline-flex;
    align-items: center; justify-content: center; text-decoration: none;
    cursor: pointer; box-shadow: 0 0 0 2px rgba(179,55,42,.18);
    animation: ddq-alert-pulse 1.8s ease-in-out infinite;
  }
  .admin-tabs-alert .alert-bang { font-size: 12px; font-weight: 800; line-height: 1; }
  .admin-tabs-alert:hover { background: #8f2b21; }
  @keyframes ddq-alert-pulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(179,55,42,.18); }
    50%     { box-shadow: 0 0 0 4px rgba(179,55,42,.28); }
  }
  /* Idea #2: inline marker next to the day count in the Monitoring Status column. */
  .mon-bang {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: #B3372A; color: #fff; font-size: 10px; font-weight: 800;
    margin-left: 5px; vertical-align: middle;
  }
  /* Fix #5: My account pane. */
  .acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
  .acct-card {
    border: 1px solid var(--line); border-radius: 8px;
    padding: 16px 18px; background: #fff;
  }
  .acct-card h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--grey); margin: 0 0 12px;
  }
  .acct-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid #F0Eade; font-size: 13px; }
  .acct-row:last-child { border-bottom: none; }
  .acct-row .acct-k { color: var(--grey); }
  .acct-row .acct-v { color: var(--navy); font-weight: 700; text-align: right; }
  .acct-doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F0Eade; }
  .acct-doc:last-child { border-bottom: none; }
  .acct-doc-name { font-size: 13px; color: var(--navy); font-weight: 700; }
  .acct-doc-sub { font-size: 11.5px; color: var(--grey); }
  .acct-doc-btn {
    background: var(--brown); color: #fff; border: none;
    padding: 7px 14px; border-radius: 5px; font-size: 11.5px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
  }
  .acct-doc-btn:hover { background: var(--navy); }
  .acct-doc-btn.is-disabled { background: #C9C3B6; cursor: default; }
  .acct-doc-btn.is-disabled:hover { background: #C9C3B6; }
  .acct-doc-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: 0 0 auto; }
  .acct-type-list { margin: 0; padding-left: 18px; }
  .acct-type-list li { font-size: 13px; color: var(--navy); margin-bottom: 4px; }
  @media (max-width: 760px) { .acct-grid { grid-template-columns: 1fr; } }
  /* Fix #5: Delegate Outreach authorized-recipients manager. */
  .recip-add-row { display: flex; gap: 8px; align-items: center; }
  .recip-add-row input[type="email"] {
    flex: 1 1 auto; min-width: 0;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px;
    font-size: 13px; color: var(--navy); background: #fff;
  }
  .btn-validate-recipient {
    flex: 0 0 auto;
    background: var(--navy); color: var(--cream); border: none;
    padding: 8px 16px; border-radius: 5px; font-size: 12px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase; cursor: pointer;
  }
  .btn-validate-recipient:hover { background: var(--brown); color: #fff; }
  .recip-list-title {
    margin: 12px 0 4px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--grey);
  }
  .recip-list {
    border: 1px solid var(--line); border-radius: 6px;
    padding: 8px 10px; max-height: 180px; overflow-y: auto; background: #fff;
  }
  .recip-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 2px; font-size: 13px; color: var(--navy);
  }
  .recip-item .recip-tick { width: 15px; height: 15px; accent-color: var(--brown); flex: 0 0 auto; cursor: pointer; }
  .recip-item .recip-email { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .recip-remove {
    flex: 0 0 auto; width: 22px; height: 22px; line-height: 1;
    border: 1px solid var(--line); border-radius: 4px; background: #fff;
    color: var(--grey); font-size: 16px; font-weight: 700; cursor: pointer;
  }
  .recip-remove:hover { border-color: #B3372A; color: #B3372A; }
  /* Fix #5: DD-process outreach confirmation rows. */
  .outreach-proc-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 0; border-bottom: 1px solid #F0Eade;
  }
  .outreach-proc-row:last-child { border-bottom: none; }
  .outreach-proc-main { display: flex; flex-direction: column; gap: 2px; }
  .outreach-proc-type { font-size: 11.5px; color: var(--grey); text-transform: uppercase; letter-spacing: .5px; }
  .btn-validate-send {
    background: var(--navy); color: var(--cream); border: none;
    padding: 7px 16px; border-radius: 5px; font-size: 12px; font-weight: 700;
    cursor: pointer; text-transform: uppercase; letter-spacing: .4px;
  }
  .btn-validate-send:hover { background: var(--brown); color: #fff; }
  .outreach-proc-ok { color: #2F8266; font-weight: 700; font-size: 12.5px; }
  .admin-tabs { display: flex; align-items: center; }
  .ddq-header .header-title {
    font-family: 'Playfair Display', serif;
    font-size: 15px; color: var(--cream); font-weight: 800;
    letter-spacing: .3px;
  }
  .ddq-header a.back-link {
    color: rgba(245,233,216,.65); font-size: 12px;
    text-decoration: none;
    border: 1px solid rgba(195,128,88,.35);
    padding: 6px 12px; border-radius: 4px;
    transition: all .18s;
  }
  .ddq-header a.back-link:hover {
    color: var(--cream); border-color: var(--brown);
    background: rgba(195,128,88,.12);
  }

  main {
    max-width: 880px; margin: 0 auto;
    padding: 28px 24px 100px;
  }

  .ddq-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px; color: var(--brown);
    font-weight: 900; letter-spacing: -.3px;
    margin-bottom: 4px;
  }
  .ddq-sub {
    font-size: 13px; color: var(--grey);
    margin-bottom: 22px;
  }

  .ddq-intro {
    background: var(--white);
    border: 1px solid #D8E4F0;
    border-left: 3px solid var(--brown);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 18px;
  }
  .ddq-intro h4 {
    font-family: 'Playfair Display', serif;
    font-size: 15px; color: var(--brown);
    margin-bottom: 5px; letter-spacing: .3px;
  }
  .ddq-intro p {
    font-size: 12.5px; color: var(--dk);
    line-height: 1.6;
  }

  .ddq-progress-card {
    display: flex; align-items: center; gap: 16px;
    background: var(--navy); color: var(--cream);
    padding: 12px 18px; border-radius: 6px;
    border-left: 3px solid var(--brown);
    margin-bottom: 18px;
  }
  .ddq-progress-card .pcount {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 800; color: var(--brown);
    font-variant-numeric: tabular-nums;
  }
  .ddq-progress-card .ptext {
    font-size: 12px; flex: 1;
  }
  .ddq-progress {
    background: rgba(255,255,255,.1); border-radius: 4px;
    height: 6px; overflow: hidden; flex: 2; min-width: 120px;
  }
  .ddq-progress-bar {
    background: var(--brown); height: 100%;
    width: 0%; transition: width .35s;
  }
  /* Two-row variant: stacks questions + documents bars vertically.
     (Phase 5 fix-round 3 — was a single bar that counted hidden delegate
     sections too, which gave bogus totals like 94 / 236.) */
  .ddq-progress-card-stacked {
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  .ddq-progress-card-stacked .ddq-progress-row {
    display: flex; align-items: center; gap: 16px;
  }
  .ddq-progress-card-stacked .ddq-progress-row .pcount { min-width: 84px; text-align: right; }
  .ddq-progress-card-stacked .ddq-progress-bar.complete {
    background: #2F8266;
  }

  .ddq-respondent {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 12px; margin-bottom: 20px;
    background: var(--white); border: 1px solid #D8E4F0;
    border-left: 3px solid var(--brown);
    border-radius: 6px; padding: 16px 18px;
  }
  .ddq-resp-field { display: flex; flex-direction: column; }
  .ddq-resp-field label {
    font-size: 10px; color: var(--brown);
    font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.1px; margin-bottom: 5px;
  }
  .ddq-resp-field input {
    border: 1px solid #D8E4F0; border-radius: 4px;
    padding: 7px 10px; font-size: 13px; color: var(--navy);
    font-family: 'Inter', sans-serif;
    background: var(--light);
    transition: border-color .15s, background .15s;
  }
  .ddq-resp-field input:focus {
    outline: none; border-color: var(--brown);
    background: #FFFEFB;
  }

  /* ── ACCORDION ───────────────────────────────────────────────────── */
  .acc {
    border: 1px solid #D8E4F0;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--white);
  }
  .acc-hdr {
    background: var(--brown); color: #fff;
    padding: 12px 18px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13.5px; font-weight: 700; letter-spacing: .2px;
    user-select: none;
    transition: background .18s, color .18s;
  }
  .acc-hdr:hover { background: var(--navy); color: var(--cream); }
  .acc-hdr .icon {
    display: inline-block;
    width: 24px;
    text-align: center;
    margin-right: 8px;
    font-size: 15px;
    vertical-align: middle;
    line-height: 1;
  }
  .acc-hdr .arrow { font-size: 11px; transition: transform .25s; }
  .acc.open .acc-hdr .arrow { transform: rotate(180deg); }
  .acc-body {
    max-height: 0; overflow: hidden;
    transition: max-height .4s ease;
  }
  .acc.open .acc-body { max-height: 6000px; }
  .acc-inner { padding: 18px 22px; }

  /* ── QUESTIONS ───────────────────────────────────────────────────── */
  .ddq-q { margin-bottom: 14px; }
  .ddq-q:last-child { margin-bottom: 0; }
  .ddq-q label {
    display: block; font-size: 12px; color: var(--navy);
    line-height: 1.55; font-weight: 600; margin-bottom: 6px;
  }
  .ddq-num {
    display: inline-block; background: var(--brown);
    color: #fff; font-weight: 800;
    border-radius: 3px; padding: 1px 6px;
    font-size: 10.5px; margin-right: 8px;
    min-width: 42px; text-align: center;
    box-sizing: border-box;
    vertical-align: 1px;
    font-variant-numeric: tabular-nums;
  }
  .ddq-q textarea {
    width: 100%; min-height: 64px;
    border: 1px solid #D8E4F0; border-radius: 4px;
    padding: 9px 11px; font-size: 12.5px; color: var(--dk);
    font-family: 'Inter', sans-serif; line-height: 1.55;
    background: var(--light);
    resize: vertical;
    transition: border-color .15s, background .15s;
  }
  .ddq-q textarea:focus {
    outline: none; border-color: var(--brown); background: #FFFEFB;
  }
  .ddq-q textarea[data-filled="1"] { border-left: 3px solid var(--brown); }

  /* ── REQUIRED DOCUMENTS CHECKLIST (YES/NO grid) ─────────────────── */
  .ddq-doc-checklist {
    background: var(--white);
    border: 1px solid #D8E4F0;
    border-left: 3px solid var(--brown);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 20px;
  }
  /* Fix #1: when the checklist is also an accordion, the .acc-hdr / .acc-inner
     supply their own padding — drop the wrapper padding so the band looks like
     the question sections. Keep the brown left-accent + radius. */
  .ddq-doc-checklist.acc { padding: 0; overflow: hidden; }
  .ddq-doc-checklist.acc .ddq-doc-checklist-hint { margin-top: 0; }
  .ddq-doc-checklist-title {
    font-family: 'Playfair Display', serif;
    font-size: 15px; font-weight: 800; color: var(--brown);
    margin-bottom: 4px; letter-spacing: .3px;
  }
  .ddq-doc-checklist-hint {
    font-size: 12px; color: var(--grey);
    margin-bottom: 14px; line-height: 1.55;
  }
  .ddq-doc-checklist-hint strong { color: var(--brown); }
  /* Rationale row that appears when a doc is ticked NO. Injected at runtime. */
  .ddq-doc-reason-row { background: #FFF1E0; }
  .ddq-doc-reason-cell {
    padding: 10px 14px 12px !important;
    border-left: 3px solid var(--brown) !important;
  }
  .ddq-doc-reason-cell label {
    display: block;
    font-size: 11.5px; color: #5B4A33;
    font-weight: 600; margin-bottom: 5px;
  }
  .ddq-doc-reason-cell textarea {
    width: 100%;
    border: 1px solid rgba(195,128,88,.5);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px; font-family: 'Inter', sans-serif;
    resize: vertical; min-height: 50px;
    background: #fff;
  }
  .ddq-doc-reason-cell textarea:focus {
    outline: none; border-color: var(--brown);
  }
  .ddq-doc-reason-cell .hint {
    font-size: 11px; color: var(--grey); margin-top: 4px;
  }
  .ddq-doc-table {
    width: 100%; border-collapse: collapse;
  }
  .ddq-doc-table thead th {
    text-align: left; padding: 6px 8px;
    font-size: 10.5px; color: var(--brown);
    font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #D8E4F0;
  }
  .ddq-doc-table thead th.col-yn {
    text-align: center; width: 64px;
  }
  .ddq-doc-table tbody tr {
    border-bottom: 1px solid #F0F3F7;
    transition: background .12s;
  }
  .ddq-doc-table tbody tr:last-child { border-bottom: none; }
  .ddq-doc-table tbody td {
    padding: 7px 8px;
    font-size: 12.5px; color: var(--navy);
    vertical-align: middle;
    line-height: 1.4;
  }
  .ddq-doc-table tbody td.col-yn {
    text-align: center; width: 64px;
  }
  .ddq-doc-table tbody tr.unanswered td:first-child {
    border-left: 3px solid #E07B5A;
    padding-left: 9px;
    background: rgba(224,123,90,.04);
  }
  .ddq-doc-table tbody tr.answered td:first-child {
    border-left: 3px solid var(--brown);
    padding-left: 9px;
  }
  .ddq-doc-row-sub td:first-child {
    padding-left: 18px !important;
    font-size: 12px;
    color: var(--dk);
  }
  .ddq-doc-section-hdr td {
    background: rgba(195,128,88,.06);
    font-weight: 800;
    font-size: 11px;
    color: var(--brown);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px !important;
    border-top: 1px solid #D8E4F0;
  }
  .ddq-doc-table input[type="radio"] {
    width: 17px; height: 17px;
    accent-color: var(--brown);
    cursor: pointer;
    margin: 0;
  }
  .ddq-doc-summary {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid #D8E4F0;
    font-size: 11.5px; color: var(--grey);
  }
  .ddq-doc-summary.complete { color: var(--brown); font-weight: 700; }
  .ddq-doc-summary strong { color: var(--brown); }

  /* ── DELEGATE-SPECIFIC SECTIONS ──────────────────────────────────── */
  .ddq-delegate-divider {
    margin: 26px 0 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(31,69,67,.05) 0%, rgba(195,128,88,.07) 100%);
    border: 1px solid rgba(195,128,88,.28);
    border-radius: 8px;
    text-align: center;
  }
  .ddq-delegate-divider-title {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 800;
    color: var(--brown); letter-spacing: .3px;
  }
  .ddq-delegate-divider-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px; color: var(--grey);
    font-style: italic;
  }
  /* Distinctive accent for delegate-type accordion headers */
  .acc.acc-delegate .acc-hdr {
    background: linear-gradient(90deg, var(--brown) 0%, #B0704A 100%);
    border-left: 3px solid var(--cream);
  }
  .acc.acc-delegate .acc-hdr:hover {
    background: var(--navy);
  }

  /* ── FILE UPLOAD (drag &amp; drop) ──────────────────────────────────── */
  .ddq-upload-lbl {
    font-family: 'Playfair Display', serif;
    font-size: 14px; font-weight: 800; color: var(--brown);
    letter-spacing: .4px; text-transform: uppercase;
    margin: 22px 0 8px;
  }
  .ddq-upload-lbl .opt {
    font-size: 10px; font-weight: 600; color: var(--grey);
    text-transform: none; letter-spacing: 0;
    margin-left: 6px; font-family: 'Inter', sans-serif;
  }
  .ddq-dropzone {
    display: block;
    border: 2px dashed rgba(195,128,88,.55);
    border-radius: 8px;
    padding: 26px 20px;
    text-align: center;
    background: var(--white);
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 10px;
  }
  .ddq-dropzone:hover { border-color: var(--brown); background: #FFFEFB; }
  .ddq-dropzone.dragover {
    background: rgba(195,128,88,.08);
    border-style: solid;
    border-color: var(--navy);
    transform: scale(1.005);
  }
  .ddq-dropzone-icon {
    font-size: 30px; line-height: 1;
    margin-bottom: 8px; opacity: .85;
  }
  .ddq-dropzone-title {
    font-weight: 700; color: var(--navy); font-size: 14px;
  }
  .ddq-dropzone-title strong { color: var(--brown); }
  .ddq-dropzone-sub {
    font-size: 11.5px; color: var(--grey); margin-top: 5px;
    line-height: 1.5;
  }
  .ddq-dropzone input[type="file"] {
    position: absolute; left: -9999px; opacity: 0;
  }
  .ddq-filelist {
    display: flex; flex-direction: column; gap: 5px;
    margin-bottom: 10px;
  }
  .ddq-file {
    display: flex; align-items: center; gap: 10px;
    background: var(--white); border: 1px solid #D8E4F0;
    border-left: 3px solid var(--brown);
    border-radius: 4px; padding: 7px 12px;
    font-size: 12px;
  }
  .ddq-file-icon { color: var(--brown); font-size: 14px; flex-shrink: 0; }
  .ddq-file-name {
    flex: 1; color: var(--navy); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ddq-file-size { color: var(--grey); font-size: 10.5px; flex-shrink: 0; }
  .ddq-file-remove {
    background: none; border: none; cursor: pointer;
    color: var(--grey); padding: 2px 8px; font-size: 16px;
    border-radius: 3px; line-height: 1; flex-shrink: 0;
    transition: all .15s;
  }
  .ddq-file-remove:hover { color: #C0392B; background: rgba(192,57,43,.08); }

  /* ── ACTIONS BAR ─────────────────────────────────────────────────── */
  .ddq-actions {
    position: sticky; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, var(--light) 75%, rgba(241,244,247,0));
    padding: 20px 4px 12px;
    margin-top: 16px;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    z-index: 10;
  }
  .ddq-btn {
    border: none; cursor: pointer;
    padding: 10px 20px; border-radius: 5px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
    font-family: 'Inter', sans-serif;
    transition: all .18s;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .ddq-btn-save {
    background: var(--brown); color: #fff;
    box-shadow: 0 3px 12px rgba(195,128,88,.3);
  }
  .ddq-btn-save:hover { background: var(--navy); transform: translateY(-1px); }
  .ddq-btn-submit {
    background: var(--navy); color: var(--cream);
    box-shadow: 0 3px 12px rgba(31,69,67,.35);
  }
  .ddq-btn-submit:hover { background: var(--brown); color: #fff; transform: translateY(-1px); }
  /* Fix #5: VALIDATE button on the DDQ tab (next to SAVE). */
  .ddq-btn-validate {
    background: var(--navy); color: var(--cream);
    box-shadow: 0 3px 12px rgba(31,69,67,.35);
  }
  .ddq-btn-validate:hover { background: var(--brown); color: #fff; transform: translateY(-1px); }
  .ddq-btn-validate.is-validated { background: #2F8266; color: #fff; box-shadow: 0 3px 12px rgba(47,130,102,.3); }
  .ddq-validate-feedback { font-size: 11.5px; color: #2F8266; font-weight: 600; }
  .ddq-btn-clear {
    background: transparent; color: var(--grey);
    border: 1px solid #D8E4F0;
  }
  .ddq-btn-clear:hover { color: var(--brown); border-color: var(--brown); }
  .ddq-status {
    font-size: 11.5px; color: var(--grey); margin-left: auto;
  }
  .ddq-status strong { color: var(--brown); font-weight: 700; }

  /* ── PHASE 3: questionnaire editor (Pro-tier clients) ────────────── */
  /* Edit controls are hidden by default. They appear only when JS detects a
     Professional-tier client and adds the .edit-mode class to <body>. */
  body:not(.edit-mode) .ddq-edit-only { display: none !important; }

  .ddq-q { position: relative; }
  .ddq-q-controls {
    display: inline-flex; gap: 6px;
    margin-left: 8px; vertical-align: middle;
  }
  .ddq-edit-btn {
    background: transparent;
    border: 1px solid rgba(195,128,88,.5);
    color: var(--brown);
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 3px;
    cursor: pointer; line-height: 1.4;
    transition: background .15s, color .15s, border-color .15s;
  }
  .ddq-edit-btn:hover {
    background: var(--brown); color: #fff;
  }
  .ddq-edit-btn.danger {
    border-color: rgba(179,55,42,.5); color: #B3372A;
  }
  .ddq-edit-btn.danger:hover {
    background: #B3372A; color: #fff; border-color: #B3372A;
  }
  .ddq-section-controls {
    display: inline-flex; gap: 6px;
    margin-left: auto; margin-right: 12px;
  }
  /* Inline reword editor (Reviews-tab adjustment 2026-05-25) — appears in
     place of a section name or question label when the admin clicks ✎ edit. */
  .ddq-rw-input {
    font-family: 'Inter', sans-serif; font-size: 14px;
    padding: 4px 8px; border: 1px solid var(--brown);
    border-radius: 4px; background: #fff; color: var(--navy);
    width: 360px; max-width: 60vw;
    box-sizing: border-box;
  }
  .ddq-rw-input-multiline {
    width: 100%; resize: vertical;
    font-size: 13.5px; line-height: 1.4;
  }
  .ddq-rw-actions {
    display: inline-flex; gap: 4px; margin-left: 6px;
    vertical-align: middle;
  }
  .ddq-rw-inline {
    display: block; margin-top: 6px;
  }
  .acc.is-removed {
    opacity: .35;
  }
  .acc.is-removed > .acc-body { display: none; }
  .acc.is-removed .acc-hdr { cursor: default; }
  .ddq-q.is-removed {
    opacity: .35; background: rgba(179,55,42,.04);
  }
  .ddq-q.is-removed textarea {
    pointer-events: none; background: #FAFAFA;
  }
  .ddq-q.is-custom {
    border-left: 3px solid var(--brown);
    padding-left: 10px;
  }
  .acc.is-custom .acc-hdr {
    background: linear-gradient(90deg, rgba(195,128,88,.18), rgba(195,128,88,.05));
  }
  .ddq-add-row {
    text-align: center;
    margin: 12px 0 6px;
  }
  .ddq-add-row .ddq-edit-btn {
    font-size: 12px; padding: 6px 14px;
  }
  .ddq-edit-banner {
    background: linear-gradient(90deg, #FFF1E0, #FFFAF0);
    border: 1px solid rgba(195,128,88,.5);
    border-left: 3px solid var(--brown);
    border-radius: 5px;
    padding: 10px 14px; margin: 0 0 16px;
    font-size: 12.5px; color: #5B4A33;
    line-height: 1.5;
  }
  .ddq-edit-banner strong { color: var(--brown); }

  /* ── DDQ-tab admin edit mode (scoped via body.ddq-tab-mode) ──────
     When the admin opens the DDQ tab, the page header is irrelevant
     (no recipient context to display) and the admin-tabs row should
     stay visible. The cloned tabs are inserted at the top of #content
     by ddqInjectContentAdminTabs(). */
  body.ddq-tab-mode #content .ddq-title,
  body.ddq-tab-mode #content .ddq-sub,
  body.ddq-tab-mode #content .ddq-client-line { display: none !important; }
  body.ddq-tab-mode #content .header-right .back-link { display: none !important; }
  body.ddq-tab-mode #content .content-admin-tabs {
    display: flex; align-items: center;
    background: linear-gradient(180deg, #FFFAF0, #FFF);
    border: 1px solid rgba(195,128,88,.35);
    border-bottom: 2px solid var(--brown);
    border-radius: 8px 8px 0 0;
    /* Fix #5: symmetric left/right padding (matches the main .admin-tabs). */
    padding: 6px 8px;
    margin: 0 0 14px;
    gap: 2px;
  }
  body:not(.ddq-tab-mode) #content .content-admin-tabs { display: none !important; }
  /* Drag-to-reorder visual state for admin tabs. */
  .admin-tab[draggable="true"] { cursor: grab; }
  .admin-tab.is-dragging       { opacity: 0.45; cursor: grabbing; }

  /* ── Fix #7 (2026-05-31): DDQ-tab template-source layout ──────────
     The DDQ tab is the admin template editor, not a respondent fill-out, so the
     completion / sections progress bars must never show here. The cloned admin
     tab bar (with Sign Out + My account) stays at the top of #content. Widen the
     content so the LIBRARY catalogue can lay out up to 4 templates per line. */
  body.ddq-tab-mode #content .ddq-stats-bar,
  body.ddq-tab-mode #content .ddq-progress-card { display: none !important; }
  /* Fix #2: match the DDQ-tab content width to every other tab (#admin-dashboard
     main.inv-page is 980px). The cloned tab bar, the LIBRARY / MY TEMPLATE boxes
     and the template grid all share this width, so the bar is no longer wider
     than on other tabs and the MY TEMPLATE box's right edge lines up with the
     tab bar's right edge. */
  /* Match the admin pages' top spacing so the DDQ tab bar sits at the same
     height. Other tabs use main.inv-page (padding-top 60px); #content main
     defaults to 28px, which left the DDQ tab bar 32px too high. */
  body.ddq-tab-mode #content main { max-width: 980px; padding-top: 60px; }
  #ddq-template-landing { width: 100%; }
  #ddq-template-landing .ddq-path-box { min-width: 0; }
  #ddq-library-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;        /* every box the same height */
    gap: 14px;
    align-items: stretch;
  }
  #ddq-library-catalogue-grid > * { height: 100%; }
  @media (max-width: 1100px) { #ddq-library-catalogue-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px)  { #ddq-library-catalogue-grid { grid-template-columns: 1fr; } }

  /* Fix (2026-05-31): when an UPLOADED template is open, the standard
     questionnaire must not appear AT ALL — not even greyed/removed-but-undoable.
     CSS !important beats the inline display ddqApplyOverrides sets for "removed"
     sections in edit mode, so master sections + the delegate divider stay hidden
     across every re-render. The "Import from Excel" button is also removed on
     this page (use the card's Replace button instead). The "+ Add new section"
     button stays. */
  body.ddq-template-view #ddq-live-form .acc[data-section-id]:not(.is-custom),
  body.ddq-template-view #ddq-live-form .ddq-delegate-divider {
    display: none !important;
  }
  body.ddq-template-view #ddq-live-form [data-action="import-xlsx"] {
    display: none !important;
  }

  /* MY TEMPLATE editor: show the standard Required Documents block (editable,
     +/- docs) below the self-contained editor; hide the rest of the master form. */
  body.ddq-tpl-editor #ddq-live-form { display: block !important; }
  body.ddq-tpl-editor #ddq-live-form > *:not(.ddq-doc-checklist) { display: none !important; }
  body.ddq-tpl-editor #content .ddq-intro,
  body.ddq-tpl-editor #content .ddq-todo-intro,
  body.ddq-tpl-editor #content .ddq-edit-banner { display: none !important; }

  /* Self-contained MY TEMPLATE editor rows. */
  #ddq-tpl-list { display: flex; flex-direction: column; gap: 8px; }
  .tpl-row {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fff; border: 1px solid rgba(31,69,67,.18);
    border-radius: 10px; padding: 10px 12px;
  }
  .tpl-row.tpl-sec { background: #F5E9D8; border-color: #C38058; }
  .tpl-q { margin-left: 26px; }
  .tpl-drag { cursor: grab; color: #C38058; font-size: 16px; line-height: 1.6; user-select: none; flex: none; }
  .tpl-badge {
    flex: none; align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: #1F4543; border: 1px solid #C38058; border-radius: 8px; padding: 1px 8px;
  }
  .tpl-sec-name {
    flex: 1 1 auto; font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: 16px; color: #1F4543; border: 1px solid rgba(31,69,67,.25);
    border-radius: 6px; padding: 6px 10px;
  }
  .tpl-q-text {
    flex: 1 1 auto; font-size: 14px; color: #1F4543; border: 1px solid rgba(31,69,67,.25);
    border-radius: 6px; padding: 6px 10px; resize: vertical; font-family: inherit;
  }
  .tpl-del { flex: none; font-size: 13px; padding: 4px 12px; background: #fff; color: #B3372A; border: 1px solid #B3372A; align-self: center; }
  .tpl-row.tpl-dragging { opacity: .4; }
  .tpl-row.tpl-drop-into { border-top: 3px solid #C38058; }
  /* Grouped + collapsible sections, promote/demote arrows, per-section add. */
  .tpl-group { margin-bottom: 10px; }
  .tpl-group-body { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0 26px; }
  .tpl-collapse { flex: none; background: none; border: none; cursor: pointer; color: #1F4543; font-size: 13px; padding: 0 2px; line-height: 1; align-self: center; }
  .tpl-arrow {
    flex: none; align-self: center; cursor: pointer; font-weight: 700; font-size: 14px;
    background: #fff; color: #C38058; border: 1px solid #C38058; border-radius: 6px;
    padding: 2px 9px; line-height: 1.3;
  }
  .tpl-arrow:hover { background: #F5E9D8; }
  .tpl-addq { margin-top: 6px; }
  .tpl-q-wrap { display: flex; flex-direction: column; gap: 4px; }
  .tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 2px 34px; }

  /* ── Per-document Edit / Remove / + controls (Phase B-2) ────── */
  .ddq-doc-label-text { display: inline; }
  .ddq-doc-controls {
    display: inline-flex; gap: 4px;
    margin-left: 8px; vertical-align: middle;
  }
  .ddq-doc-edit-btn, .ddq-doc-remove-btn {
    border: 1px solid rgba(195,128,88,0.45);
    background: #FFF;
    color: var(--brown);
    width: 22px; height: 22px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer; padding: 0;
    font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ddq-doc-edit-btn:hover { background: var(--brown); color: #FFF; }
  .ddq-doc-remove-btn { color: #B3372A; border-color: rgba(179,55,42,0.4); }
  .ddq-doc-remove-btn:hover { background: #B3372A; color: #FFF; border-color: #B3372A; }
  tr.is-doc-removed { opacity: 0.5; text-decoration: line-through; }
  tr.is-doc-removed .ddq-doc-controls .ddq-doc-remove-btn { display: none; }
  /* Text-label control buttons (undo / save / cancel) sit beside the icon
     buttons but need natural width rather than the 22px icon box. */
  .ddq-doc-undo-btn { width: auto !important; padding: 0 7px; font-weight: 600; }
  .ddq-doc-rename-acts { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
  .ddq-doc-rename-acts .ddq-doc-edit-btn { width: auto; padding: 0 8px; }
  /* Keep the controls fully legible and clickable on a struck-through
     (removed) row — don't dim or strike the Undo button. */
  tr.is-doc-removed .ddq-doc-controls { opacity: 1; text-decoration: none; }
  tr.is-custom-doc td:first-child { border-left: 3px solid var(--brown); padding-left: 8px; }
  /* Phase C-2: custom doc rows are draggable. Cursor + drag-feedback. */
  body.edit-mode tr.is-custom-doc { cursor: grab; }
  tr.is-custom-doc.is-dragging { opacity: 0.45; }
  tr[data-doc].is-drop-target td { box-shadow: inset 0 -2px 0 var(--brown); }
  tr.ddq-doc-add-row td {
    padding: 10px 8px;
    background: #FBF6EE;
    border-top: 1px dashed rgba(195,128,88,0.35);
  }
  .ddq-doc-add-btn {
    background: var(--white);
    border: 1px dashed var(--brown);
    color: var(--brown);
    padding: 6px 14px;
    border-radius: 4px; cursor: pointer;
    font-weight: 600; font-size: 12.5px;
  }
  .ddq-doc-add-btn:hover { background: var(--brown); color: #FFF; }
  .ddq-doc-add-form { display: flex; gap: 6px; align-items: center; }
  .ddq-doc-add-input {
    flex: 1; padding: 6px 9px;
    border: 1px solid rgba(195,128,88,.45);
    border-radius: 4px;
    font-size: 12.5px; font-family: inherit;
  }
  .ddq-doc-add-commit, .ddq-doc-add-cancel {
    padding: 6px 12px;
    border: 1px solid rgba(195,128,88,.45);
    border-radius: 4px;
    background: #FFF;
    font-size: 12px; cursor: pointer;
  }
  .ddq-doc-add-commit { background: var(--brown); color: #FFF; border-color: var(--brown); }
  .ddq-doc-rename-input {
    padding: 4px 8px;
    border: 1px solid var(--brown);
    border-radius: 4px;
    font-size: 12.5px; font-family: inherit;
    width: 60%;
  }

  /* ── Methodology tab accordions (Fix #2) ─────────────────────── */
  .methodology-accordions { margin: 0; }
  .methodology-acc {
    border: 1px solid #D8E4F0;
    border-left: 3px solid var(--brown);
    border-radius: 6px;
    margin: 0 0 12px;
    background: var(--white);
    overflow: hidden;
  }
  .methodology-acc summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    color: var(--brown);
    font-weight: 700;
    letter-spacing: .4px;
    position: relative;
    user-select: none;
  }
  .methodology-acc summary::-webkit-details-marker { display: none; }
  .methodology-acc summary::after {
    content: "▾";
    position: absolute;
    right: 18px; top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--brown);
    transition: transform .15s ease;
  }
  .methodology-acc[open] summary::after { transform: translateY(-50%) rotate(180deg); }
  .methodology-acc summary:hover { background: #FBF6EE; }
  .methodology-acc-body {
    padding: 4px 22px 18px;
    font-size: 12.5px; color: var(--dk);
    line-height: 1.6;
  }
  .methodology-acc-body p { margin: 8px 0; }
  .methodology-acc-body ul { margin: 6px 0 10px; padding-left: 22px; }
  .methodology-acc-body li { margin: 3px 0; }
  .methodology-formula {
    background: #FBF6EE;
    border-left: 2px solid var(--brown);
    padding: 10px 14px;
    margin: 10px 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.7;
    color: #5B4A33;
  }

  /* ── Process supervision timeline (Start tab) ───────────────── */
  .proc-timeline {
    position: relative;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 38px 18px 30px;
    margin: 18px 0 10px;
  }
  .proc-line {
    position: absolute;
    top: 56px; left: 38px; right: 38px;
    height: 3px;
    background: linear-gradient(90deg, rgba(195,128,88,0.25), rgba(195,128,88,0.55), rgba(195,128,88,0.25));
    border-radius: 2px;
    z-index: 0;
  }
  .proc-dot {
    position: relative;
    z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer;
    flex: 1 1 0;
    min-width: 0;
  }
  .proc-dot-circle {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 3px solid #FFF;
    background: var(--brown);
    box-shadow: 0 0 0 2px var(--brown), 0 2px 6px rgba(0,0,0,0.12);
    transition: transform .15s ease;
  }
  .proc-dot:hover .proc-dot-circle { transform: scale(1.15); }
  .proc-dot.is-done .proc-dot-circle {
    background: #2F8266;
    box-shadow: 0 0 0 2px #2F8266, 0 2px 6px rgba(0,0,0,0.12);
  }
  .proc-dot.is-current .proc-dot-circle {
    background: var(--brown);
    box-shadow: 0 0 0 2px var(--brown), 0 2px 6px rgba(0,0,0,0.12);
  }
  /* Fix #5: two-stage SET — half green (methodology saved, DDQ not yet
     validated). Left half green, right half copper. */
  .proc-dot.is-half .proc-dot-circle {
    background: linear-gradient(90deg, #2F8266 0 50%, var(--brown) 50% 100%);
    box-shadow: 0 0 0 2px #2F8266, 0 2px 6px rgba(0,0,0,0.12);
  }
  .proc-dot.is-half .proc-dot-label { color: #2F8266; }
  .proc-dot.is-ended .proc-dot-circle {
    background: #9B9B9B;
    box-shadow: 0 0 0 2px #9B9B9B, 0 2px 6px rgba(0,0,0,0.12);
  }
  .proc-dot-label {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #5B4A33;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: center;
  }
  .proc-dot.is-current .proc-dot-label { color: var(--brown); }
  .proc-dot.is-done .proc-dot-label    { color: #2F8266; }
  .proc-dot.is-ended .proc-dot-label   { color: #9B9B9B; }
  .proc-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    width: 280px;
    max-width: 80vw;
    background: #1F4543;
    color: #F5E9D8;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px 14px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    /* Phase C-1 fix: lift the tooltip above every following stacking
       context on the Start tab (the per-process mini-timeline dots
       were painting through it). 1000 is plenty. */
    z-index: 1000;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
  }
  /* And when the parent dot is being hovered, lift the whole dot above
     subsequent siblings so the tooltip never sits behind them. */
  .proc-dot:hover { z-index: 1001; }
  .proc-tooltip strong { color: #FFF; }
  .proc-tooltip::before {
    content: "";
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #1F4543;
  }
  .proc-dot:hover .proc-tooltip,
  .proc-dot:focus-within .proc-tooltip { opacity: 1; }

  .proc-legend {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 18px;
    padding: 12px 18px;
    margin-top: 18px;
    border-top: 1px dashed rgba(195,128,88,0.35);
    font-size: 12px; color: #6B5840;
  }
  .proc-legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .proc-legend-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid #FFF;
    box-shadow: 0 0 0 1.5px currentColor;
  }
  .proc-legend-dot.is-done    { background: #2F8266; color: #2F8266; }
  .proc-legend-dot.is-current { background: var(--brown); color: var(--brown); }
  .proc-legend-dot.is-ended   { background: #9B9B9B; color: #9B9B9B; }
  .proc-legend-note {
    flex: 1 1 100%;
    margin-top: 4px;
    font-style: italic;
    color: #8B7A60;
  }
  /* ── Governance tab (Phase C-3) ──────────────────────────────── */
  .governance-scroll { overflow-x: auto; }
  .governance-table {
    min-width: 1500px;
    white-space: nowrap;
  }
  .governance-table th, .governance-table td { padding: 8px 10px; vertical-align: top; }
  .governance-table td.gov-conclusion {
    white-space: normal;
    max-width: 280px;
    font-size: 12px;
    color: #5B4A33;
    line-height: 1.4;
  }
  .governance-table th.gov-tick-cell,
  .governance-table td.gov-tick-cell {
    width: 28px; text-align: center; padding-right: 4px;
  }
  .governance-table .gov-tick, .governance-table #gov-tick-all {
    width: 16px; height: 16px; cursor: pointer;
    accent-color: var(--brown);
    margin: 0;
  }
  .gov-date-cell {
    display: flex; gap: 6px; align-items: flex-start;
    white-space: nowrap;
  }
  .gov-date-list { display: flex; flex-direction: column; gap: 4px; }
  .gov-date {
    border: 1px solid rgba(195,128,88,0.45);
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12.5px;
    font-family: inherit;
    background: #FFF;
    color: var(--dk);
  }
  .gov-date-actions { display: flex; flex-direction: column; gap: 4px; }
  .gov-date-btn {
    width: 22px; height: 22px;
    border: 1px solid var(--brown);
    background: #FFF;
    color: var(--brown);
    border-radius: 3px;
    font-size: 14px; line-height: 1;
    cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .gov-date-btn:hover { background: var(--brown); color: #FFF; }
  .gov-date-btn.gov-date-btn-minus { color: #B3372A; border-color: rgba(179,55,42,0.4); }
  .gov-date-btn.gov-date-btn-minus:hover { background: #B3372A; color: #FFF; }
  .gov-pdf-all-btn {
    background: var(--brown); color: #FFF;
    border: none; border-radius: 4px;
    padding: 8px 16px;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
  }
  .gov-pdf-all-btn:hover { filter: brightness(1.1); }

  /* ── Compare tab (Phase C-1) ─────────────────────────────────── */
  .cmp-criteria-row {
    display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
    padding: 12px 14px;
    background: #FBF6EE;
    border: 1px solid rgba(195,128,88,0.35);
    border-left: 3px solid var(--brown);
    border-radius: 6px;
    margin-bottom: 14px;
  }
  .cmp-label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11.5px; color: #5B4A33;
    text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
  }
  .cmp-label select {
    padding: 7px 9px;
    border: 1px solid rgba(195,128,88,.45);
    border-radius: 4px;
    background: #FFF;
    font-size: 13px; font-family: inherit;
    color: var(--dk);
    text-transform: none; letter-spacing: 0; font-weight: 400;
    min-width: 180px;
  }
  .cmp-criterion-arg { display: flex; gap: 10px; align-items: flex-end; }
  .cmp-validate-btn {
    background: var(--brown); color: #FFF;
    border: none; border-radius: 5px;
    padding: 8px 18px;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.5px; cursor: pointer;
    text-transform: uppercase;
    margin-left: auto;
  }
  .cmp-validate-btn:disabled { background: #CCC; cursor: not-allowed; }
  .cmp-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
  }
  .cmp-col h4 {
    margin: 0 0 6px;
    font-size: 13px; color: var(--brown);
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .cmp-list-count { font-size: 11px; color: #6B5840; font-weight: 400; }
  .cmp-list {
    border: 1px solid #D8E4F0;
    border-radius: 6px;
    background: var(--white);
    min-height: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
  }
  .cmp-list-empty {
    padding: 24px;
    text-align: center;
    color: #8B7A60;
    font-style: italic;
    font-size: 12.5px;
  }
  .cmp-row {
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    border-bottom: 1px dashed rgba(195,128,88,0.2);
    display: flex; flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    color: var(--dk);
    position: relative;
  }
  .cmp-row:last-child { border-bottom: none; }
  .cmp-row:hover { background: #FBF6EE; }
  .cmp-row.is-selected { background: rgba(195,128,88,0.15); border-left: 3px solid var(--brown); padding-left: 7px; }
  .cmp-row.is-already-added { opacity: 0.5; }
  .cmp-row.is-already-added::after {
    content: "in comparison";
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: var(--brown); font-style: italic;
  }
  .cmp-row-name { font-weight: 600; }
  .cmp-row-meta { color: #6B5840; font-size: 11.5px; }
  .cmp-row-swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
  }
  .cmp-actions {
    display: flex; gap: 8px; justify-content: center;
    margin-top: 8px;
  }
  .cmp-action-btn {
    background: var(--brown); color: #FFF;
    border: none; border-radius: 50%;
    width: 36px; height: 36px;
    font-size: 18px; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .cmp-action-btn:disabled { background: #CCC; cursor: not-allowed; }
  .cmp-action-btn.cmp-minus { background: #B3372A; }
  .cmp-action-btn.cmp-minus:disabled { background: #CCC; }
  .cmp-chart-wrap {
    padding: 12px;
    background: var(--white);
    border: 1px solid #D8E4F0;
    border-radius: 6px;
  }
  .cmp-chart-svg {
    width: 100%; height: auto;
    max-height: 320px;
    display: block;
  }
  .cmp-chart-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(195,128,88,0.25);
    font-size: 12px; color: var(--dk);
  }
  .cmp-legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .cmp-legend-sw {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
  }
  .cmp-dim-toggles {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed rgba(195,128,88,0.25);
    font-size: 12.5px;
  }
  .cmp-dim-toggles label {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; color: #5B4A33;
  }

  /* ── DD Register additions (Phase B-2) ───────────────────────── */
  .reg-times-used {
    width: 56px; padding: 4px 6px;
    border: 1px solid rgba(195,128,88,0.45);
    border-radius: 4px;
    font-size: 12.5px; text-align: center;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
  }
  .reg-times-used:focus { outline: none; border-color: var(--brown); box-shadow: 0 0 0 2px rgba(195,128,88,0.18); }
  .reg-group-summary {
    margin-top: 16px;
    padding: 12px 14px;
    background: #FBF6EE;
    border: 1px solid rgba(195,128,88,0.35);
    border-left: 3px solid var(--brown);
    border-radius: 6px;
  }
  .reg-group-summary-head {
    font-size: 12px; font-weight: 700; color: var(--brown);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 8px;
  }
  .reg-group-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .reg-group-table th, .reg-group-table td { padding: 6px 10px; text-align: left; border-bottom: 1px dashed rgba(195,128,88,0.25); }
  .reg-group-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: #6B5840; }

  /* DD process list (per-delegate rows on Start tab) */
  .proc-list-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; gap: 12px;
  }
  .proc-create-btn {
    background: var(--brown); color: #FFF;
    border: none; border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: filter .15s;
  }
  .proc-create-btn:hover { filter: brightness(1.08); }
  .proc-create-form {
    background: #FBF6EE;
    border: 1px solid rgba(195,128,88,.45);
    border-left: 3px solid var(--brown);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 14px;
  }
  .proc-form-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
  }
  .proc-form-row label {
    display: flex; flex-direction: column;
    font-size: 11.5px; color: #5B4A33;
    text-transform: uppercase; letter-spacing: .4px;
    font-weight: 600; gap: 4px;
  }
  .proc-form-row input,
  .proc-form-row select {
    padding: 7px 9px;
    border: 1px solid rgba(195,128,88,.45);
    border-radius: 4px;
    background: #FFF;
    font-size: 13px; font-family: inherit;
    color: var(--dk);
    text-transform: none; letter-spacing: 0; font-weight: 400;
  }
  .proc-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .proc-form-validate {
    background: var(--brown); color: #FFF;
    border: none; border-radius: 5px;
    padding: 7px 16px;
    font-size: 12.5px; font-weight: 600;
    letter-spacing: .4px; cursor: pointer;
  }
  .proc-form-cancel {
    background: #FFF; color: #5B4A33;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 5px;
    padding: 7px 16px;
    font-size: 12.5px; cursor: pointer;
  }
  .proc-list-filter {
    margin-bottom: 12px;
    display: flex; flex-wrap: wrap; gap: 14px;
  }
  .proc-list-filter label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: #5B4A33;
    text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
  }
  .proc-list-filter select,
  .proc-list-filter input[type="text"] {
    padding: 6px 9px;
    border: 1px solid rgba(195,128,88,.45);
    border-radius: 4px; background: #FFF;
    font-size: 12.5px; color: var(--dk);
    text-transform: none; letter-spacing: 0; font-weight: 400;
  }
  .proc-list-host { margin-top: 4px; }
  .proc-list-empty {
    padding: 18px; text-align: center;
    color: #8B7A60; font-style: italic;
    background: #FBF6EE;
    border: 1px dashed rgba(195,128,88,.35);
    border-radius: 6px;
  }
  .proc-row {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1fr 1fr auto;
    gap: 12px 12px; align-items: center;
    padding: 12px 14px 14px;
    border: 1px solid #D8E4F0;
    border-left: 3px solid var(--brown);
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--white);
    font-size: 13px; color: var(--dk);
  }
  .proc-row .proc-mini-timeline { grid-column: 1 / -1; }
  /* Mini-timeline per DD process (Phase B-2). 5 small dots on a faint
     copper line; clicking a dot navigates to the relevant tab. */
  .proc-mini-timeline {
    position: relative;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 14px 6px 0;
    margin-top: 6px;
    border-top: 1px dashed rgba(195,128,88,0.25);
  }
  .proc-mini-line {
    position: absolute;
    top: 26px; left: 22px; right: 22px;
    height: 2px;
    background: rgba(195,128,88,0.25);
    z-index: 0;
  }
  .proc-mini-dot {
    position: relative;
    z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer;
    flex: 1 1 0;
  }
  .proc-mini-circle {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid #FFF;
    box-shadow: 0 0 0 1.5px #BBB;
    background: #BBB;
    transition: transform .12s ease;
  }
  .proc-mini-dot:hover .proc-mini-circle { transform: scale(1.2); }
  .proc-mini-dot.is-done .proc-mini-circle    { background: #2F8266; box-shadow: 0 0 0 1.5px #2F8266; }
  .proc-mini-dot.is-current .proc-mini-circle { background: var(--brown); box-shadow: 0 0 0 1.5px var(--brown); }
  .proc-mini-dot.is-todo .proc-mini-circle    { background: #DCDCDC; box-shadow: 0 0 0 1.5px #BBB; }
  .proc-mini-dot.is-ended .proc-mini-circle   { background: #9B9B9B; box-shadow: 0 0 0 1.5px #9B9B9B; }
  /* Fix 10.5: SET dot half-fill — left half green = methodology validated,
     right half green = DDQ template validated; the pending half stays Armagnac
     (the active "still to do" colour). Placed AFTER is-current so it wins. */
  .proc-mini-dot.is-half-left .proc-mini-circle {
    background: linear-gradient(to right, #2F8266 0 50%, var(--brown) 50% 100%);
    box-shadow: 0 0 0 1.5px #2F8266;
  }
  .proc-mini-dot.is-half-right .proc-mini-circle {
    background: linear-gradient(to right, var(--brown) 0 50%, #2F8266 50% 100%);
    box-shadow: 0 0 0 1.5px #2F8266;
  }
  .proc-mini-dot.is-half-left .proc-mini-label,
  .proc-mini-dot.is-half-right .proc-mini-label { color: var(--brown); }
  .proc-mini-label {
    margin-top: 6px;
    font-size: 10.5px; font-weight: 600;
    color: #6B5840;
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .proc-mini-dot.is-done .proc-mini-label    { color: #2F8266; }
  .proc-mini-dot.is-current .proc-mini-label { color: var(--brown); }
  .proc-mini-dot.is-todo .proc-mini-label    { color: #9B9B9B; }
  .proc-mini-dot.is-ended .proc-mini-label   { color: #9B9B9B; }
  .proc-row .proc-row-name { font-weight: 600; }
  .proc-row .proc-row-type {
    font-size: 11.5px; color: var(--brown);
    text-transform: uppercase; letter-spacing: .3px;
  }
  .proc-row .proc-row-date,
  .proc-row .proc-row-age { font-variant-numeric: tabular-nums; }
  .proc-row .proc-row-age small { color: #8B7A60; }
  .proc-row-delete {
    background: transparent; border: none; cursor: pointer;
    color: #B3372A; font-size: 16px; line-height: 1;
    padding: 4px 8px;
  }
  .proc-row-delete:hover { color: #FFF; background: #B3372A; border-radius: 4px; }

  /* "What you need to do" intro (admin DDQ-tab only). Matches the
     visual language of .ddq-intro exactly (same background, border,
     padding, font sizes) so it reads as a sibling section.
     2026-05-28 fix per Fix #2: font + size aligned with "Before you start". */
  .ddq-todo-intro {
    background: var(--white);
    border: 1px solid #D8E4F0;
    border-left: 3px solid var(--brown);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 18px;
  }
  .ddq-todo-intro h4 {
    font-family: 'Playfair Display', serif;
    font-size: 15px; color: var(--brown);
    margin-bottom: 5px; letter-spacing: .3px;
  }
  .ddq-todo-intro ol,
  .ddq-todo-intro ul {
    font-size: 12.5px; color: var(--dk);
    line-height: 1.6;
    margin: 0; padding-left: 22px;
  }
  /* Sub-list under "Start by reviewing..." uses dashes (per Fix #2). */
  .ddq-todo-intro ol ul {
    list-style: none; padding-left: 14px; margin: 4px 0 6px;
  }
  .ddq-todo-intro ol ul li::before {
    content: "-  "; color: var(--brown); font-weight: 600;
  }
  .ddq-todo-intro li { margin: 4px 0; }

  /* ── Configurable risk band editor (section 4.17) ───────────────
     Lives on the DDQ tab (template editor). Lets the admin define how
     many tiers their risk scheme uses + the label / colour / point
     value for each. Persists to client.bandConfig. */
  .ddq-band-card {
    background: #FFFAF0;
    border: 1px solid rgba(195,128,88,.45);
    border-left: 3px solid var(--brown);
    border-radius: 6px;
    padding: 14px 16px 16px;
    margin: 0 0 18px;
  }
  .ddq-band-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 10px;
  }
  .ddq-band-card-head .ddq-band-title {
    font-size: 13.5px; font-weight: 600; color: var(--brown);
    letter-spacing: 0.4px; text-transform: uppercase;
  }
  .ddq-band-card-head .ddq-band-sub {
    font-size: 11.5px; color: #6B5840; font-style: italic; margin-top: 2px;
  }
  .ddq-band-card-head .ddq-band-actions {
    display: flex; align-items: center; gap: 6px;
  }
  .ddq-band-card-head .ddq-band-actions .ddq-band-count {
    font-size: 12px; color: #5B4A33; padding: 0 8px;
    min-width: 70px; text-align: center;
  }
  .ddq-band-btn {
    border: 1px solid var(--brown);
    background: #FFF;
    color: var(--brown);
    border-radius: 50%;
    width: 26px; height: 26px;
    font-size: 16px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
  }
  .ddq-band-btn:hover:not(:disabled) { background: var(--brown); color: #FFF; }
  .ddq-band-btn:disabled { opacity: .35; cursor: not-allowed; }
  .ddq-band-strip-wrap {
    position: relative;
    margin: 6px 0 22px;
  }
  .ddq-band-strip {
    display: flex; align-items: stretch;
    width: 100%; height: 36px;
    border-radius: 6px; overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
  }
  .ddq-band-strip .ddq-band-seg {
    display: flex; align-items: center; justify-content: center;
    color: #FFF; font-size: 12px; font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    padding: 0 6px;
  }
  .ddq-band-handles {
    position: absolute;
    top: 0; left: 0; right: 0; height: 36px;
    pointer-events: none;
  }
  .ddq-band-handle {
    position: absolute;
    top: -4px;
    transform: translateX(-50%);
    width: 18px; height: 44px;
    cursor: ew-resize;
    pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.92);
    border: 1.5px solid var(--brown);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    z-index: 2;
    transition: transform .08s ease;
  }
  .ddq-band-handle:hover { transform: translateX(-50%) scale(1.05); }
  .ddq-band-handle-grip {
    color: var(--brown);
    font-size: 13px;
    line-height: 1;
  }
  body.ddq-band-dragging { cursor: ew-resize; user-select: none; }
  body.ddq-band-dragging .ddq-band-handle { transform: translateX(-50%) scale(1.05); }
  .ddq-band-bounds {
    position: absolute;
    top: 38px;
    left: 0; right: 0; height: 16px;
    pointer-events: none;
  }
  .ddq-band-bound {
    position: absolute;
    transform: translateX(-50%);
    font-size: 11px;
    color: #6B5840;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  /* Phase C-2 fix: the "0" and "2" anchors sit flush at the bar's edges. */
  .ddq-band-bound.is-edge { color: #5B4A33; font-weight: 600; }
  .ddq-band-bound.is-edge[style*="left:0%"]   { transform: translateX(0); }
  .ddq-band-bound.is-edge[style*="left:100%"] { transform: translateX(-100%); }
  .ddq-band-scale {
    display: flex; justify-content: space-between;
    font-size: 10.5px; color: #8B7A60;
    margin: 0 0 12px; font-variant-numeric: tabular-nums;
  }
  .ddq-band-tiers {
    display: grid;
    grid-template-columns: 28px minmax(120px, 1.4fr) 60px 70px;
    column-gap: 10px; row-gap: 6px;
    align-items: center;
  }
  .ddq-band-tiers .ddq-band-tier-head {
    font-size: 10.5px; text-transform: uppercase;
    color: #8B7A60; letter-spacing: 0.4px;
    padding-bottom: 2px;
    border-bottom: 1px dashed rgba(195,128,88,0.35);
  }
  .ddq-band-tiers .ddq-band-tier-idx {
    text-align: center; font-size: 11px;
    color: #8B7A60; font-variant-numeric: tabular-nums;
  }
  .ddq-band-tiers .ddq-band-tier-label,
  .ddq-band-tiers .ddq-band-tier-points {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(195,128,88,0.35);
    border-radius: 4px;
    background: #FFF;
    font-size: 12.5px; font-family: inherit;
  }
  .ddq-band-tiers .ddq-band-tier-label:focus,
  .ddq-band-tiers .ddq-band-tier-points:focus {
    outline: none; border-color: var(--brown);
    box-shadow: 0 0 0 2px rgba(195,128,88,0.18);
  }
  .ddq-band-tiers .ddq-band-tier-color {
    width: 100%; height: 28px; padding: 0;
    border: 1px solid rgba(195,128,88,0.35);
    border-radius: 4px; cursor: pointer;
    background: #FFF;
  }
  .ddq-band-save-state {
    font-size: 11.5px; color: #6B5840;
    font-style: italic;
    margin-top: 8px; min-height: 14px;
  }
  .ddq-band-save-state.saved   { color: #2F8266; font-style: normal; }
  .ddq-band-save-state.saving  { color: #6B5840; }
  .ddq-band-save-state.failed  { color: #B3372A; font-style: normal; }
  /* Fix #4: Methodology SAVE button (validates the Start-timeline SET step). */
  .methodology-save-row {
    display: flex; align-items: center; gap: 14px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(195,128,88,.25);
  }
  .methodology-save-btn {
    background: var(--brown); color: #fff; border: none;
    padding: 10px 26px; border-radius: 6px;
    font-size: 13px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; cursor: pointer;
    transition: background .18s, transform .15s, opacity .15s;
    font-family: 'Inter', sans-serif;
  }
  .methodology-save-btn:hover:not(:disabled) { background: #B0704A; transform: translateY(-1px); }
  .methodology-save-btn:disabled { opacity: .5; cursor: not-allowed; }
  .methodology-save-feedback { font-size: 12px; color: #6B5840; font-style: italic; }
  .methodology-save-feedback.saved  { color: #2F8266; font-style: normal; }
  .methodology-save-feedback.saving { color: #6B5840; }
  .methodology-save-feedback.failed { color: #B3372A; font-style: normal; }
  /* Inline question-add form */
  .ddq-add-form {
    background: #FFFAF0;
    border: 1px dashed rgba(195,128,88,.6);
    border-radius: 5px;
    padding: 14px 16px;
    margin: 10px 0;
  }
  .ddq-add-form textarea, .ddq-add-form input[type="text"] {
    width: 100%;
    border: 1px solid #D8E4F0;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13.5px; font-family: 'Inter', sans-serif;
    margin-bottom: 8px;
  }
  .ddq-add-form .hint {
    font-size: 11px; color: var(--grey); margin-bottom: 8px;
  }
  .ddq-add-form .actions {
    display: flex; gap: 8px; justify-content: flex-end;
  }
  /* Validate prompt */
  .ddq-validate-prompt {
    background: var(--cream);
    border: 1px solid var(--brown);
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 8px;
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; color: var(--navy);
  }
  .ddq-validate-prompt strong { color: var(--brown); margin-right: auto; }
  /* Save indicator */
  .ddq-save-indicator {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--navy); color: var(--cream);
    padding: 8px 14px; border-radius: 4px;
    font-size: 11.5px; font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
    z-index: 9998;
    letter-spacing: .5px;
  }
  .ddq-save-indicator.show { opacity: 1; }
  .ddq-save-indicator.saved { background: #2F8266; }
  .ddq-save-indicator.error { background: #B3372A; }

  /* ── TOAST ───────────────────────────────────────────────────────── */
  .ddq-toast {
    position: fixed; bottom: 90px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--navy); color: var(--cream);
    padding: 12px 24px; border-radius: 5px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 8px 32px rgba(31,69,67,.45);
    border-left: 3px solid var(--brown);
    opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 9999;
  }
  .ddq-toast.show {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }

  /* ── FOOTER ──────────────────────────────────────────────────────── */
  footer.ddq-footer {
    margin-top: 24px; padding-top: 16px;
    border-top: 1px solid #D8E4F0;
    font-size: 11px; color: var(--grey);
    text-align: center;
  }
  footer.ddq-footer strong { color: var(--brown); font-weight: 700; }

  /* ── PHASE 4a: invitation flow views ─────────────────────────── */
  /* Three additional top-level containers — only one is visible at a time.
     ddqBootstrap() picks the right one based on URL + invitation status. */
  #activation-view,
  #pending-view,
  #submitted-view,
  #revoked-view,
  #followup-view,
  #admin-dashboard { display: none; }

  .inv-page {
    max-width: 580px; margin: 0 auto;
    padding: 60px 24px 80px;
  }
  .inv-card {
    background: #fff;
    border: 1px solid #D8E4F0;
    border-top: 4px solid var(--brown);
    border-radius: 8px;
    padding: 36px 32px;
    box-shadow: 0 10px 30px rgba(31,69,67,.08);
  }
  .inv-card .inv-eyebrow {
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.8px;
    color: var(--brown);
    margin-bottom: 8px;
  }
  .inv-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 26px; color: var(--navy);
    margin: 0 0 14px;
  }
  .inv-card p { font-size: 14px; line-height: 1.55; color: #2B3640; margin: 0 0 14px; }
  .inv-card p.muted { color: var(--grey); font-size: 13px; }
  .inv-meta {
    background: var(--cream);
    border-radius: 5px;
    padding: 14px 18px;
    margin: 14px 0 22px;
    font-size: 13px;
  }
  .inv-meta div { padding: 3px 0; }
  .inv-meta strong { color: var(--navy); }
  .inv-card input[type="email"], .inv-card input[type="text"] {
    width: 100%;
    border: 1px solid #D8E4F0;
    border-radius: 5px;
    padding: 11px 14px;
    font-size: 14px; font-family: 'Inter', sans-serif;
    margin: 8px 0 6px;
  }
  .inv-card input:focus { outline: none; border-color: var(--brown); }
  .inv-card .btn {
    width: 100%;
    background: var(--brown); color: #fff;
    border: none; padding: 12px 18px;
    border-radius: 5px;
    font-size: 13px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    cursor: pointer; margin-top: 8px;
    transition: background .18s;
  }
  .inv-card .btn:hover { background: #B0704A; }
  .inv-card .btn:disabled { background: #BBB; cursor: not-allowed; }
  .inv-card .inv-err {
    color: #B3372A; font-size: 12.5px; min-height: 16px;
    margin-top: 8px;
  }
  .inv-card .inv-ok {
    color: #2F8266; font-size: 12.5px; min-height: 16px;
    margin-top: 8px;
  }

  /* Admin tabs (Dashboard / DDQ) — shared between #admin-dashboard and the
     form view (#content) when the admin is the one opening it. */
  /* Fix #5: unified boxed tab-bar design across all pages, with symmetric
     left/right padding so the gap before START matches the gap after the last
     element on the right. */
  .admin-tabs {
    display: flex; align-items: center; gap: 2px;
    max-width: 1200px; margin: 0 auto 18px;
    background: linear-gradient(180deg, #FFFAF0, #FFF);
    border: 1px solid rgba(195,128,88,.35);
    border-bottom: 2px solid var(--brown);
    border-radius: 8px 8px 0 0;
    padding: 6px 8px;
    flex-wrap: nowrap;
  }
  .admin-tab {
    background: transparent;
    color: var(--navy);
    border: none;
    padding: 10px 12px;
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    transition: background .15s, color .15s;
    white-space: nowrap;
    flex: 0 1 auto;
  }
  .admin-tab:hover { background: var(--cream); }
  .admin-tab.active {
    background: var(--brown); color: #fff;
  }

  /* Admin dashboard (invitation sender + history) */
  #admin-dashboard main.inv-page { max-width: 980px; }
  #admin-dashboard .inv-card { max-width: 980px; margin: 0 auto 18px; }
  .ddash-grid {
    display: grid; grid-template-columns: 1fr 220px;
    gap: 12px;
    align-items: start;   /* Fix #4: both columns top-align so the Select DDQ
                             Type dropdown lines up with the recipient field. */
  }
  .ddash-row { display: flex; flex-direction: column; gap: 4px; }
  /* Fix #3: delegate (DD process) recap above ADD A RECIPIENT — full width so it
     does not offset either grid column. */
  .ddash-delegate-recap {
    display: flex; flex-direction: column; gap: 4px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #FBFCFE;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brown);
    border-radius: 5px;
  }
  .ddash-delegate-recap > label {
    font-size: 11px; color: var(--navy);
    font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  }
  .ddash-delegate-recap select {
    border: 1px solid #D8E4F0; border-radius: 4px;
    padding: 9px 12px; font-size: 13px; font-family: 'Inter', sans-serif;
    max-width: 420px;
  }
  .ddash-delegate-name { font-size: 13px; color: var(--navy); }
  .ddash-delegate-name .hint { color: var(--grey); font-size: 12px; }
  /* Right column of the send grid: "Select DDQ Type" (top, aligned with the
     "Add a recipient" field) and "DDQ to Send" stacked vertically below it. */
  .ddash-side { display: flex; flex-direction: column; gap: 12px; align-self: start; }
  .ddash-row label {
    font-size: 11px; color: var(--navy);
    font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  }
  .ddash-row select, .ddash-row input, .ddash-row textarea {
    border: 1px solid #D8E4F0;
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
  }
  .ddash-row textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
  .ddash-row .hint { font-size: 11px; color: var(--grey); }
  .ddash-result {
    background: #F1F4F7;
    border-radius: 4px;
    padding: 10px 14px;
    margin-top: 14px;
    font-size: 12.5px;
    border-left: 3px solid #2F8266;
  }
  .ddash-result.error { border-left-color: #B3372A; color: #5B1813; }

  /* Invitation history table */
  .hist-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 12px;
  }
  .hist-toolbar h3 {
    font-family: 'Playfair Display', serif;
    color: var(--brown); font-size: 18px; margin: 0;
  }
  .hist-toolbar .hist-refresh {
    background: transparent;
    border: 1px solid var(--line); color: var(--navy);
    font-size: 11px; font-weight: 600;
    padding: 6px 12px; border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: .5px;
  }
  .hist-toolbar .hist-refresh:hover { background: var(--light); }
  /* The Sent-invitations panel has many columns; let it scroll horizontally
     rather than squashing data when the viewport is narrow. */
  #admin-history-body { overflow-x: auto; }
  .hist-table {
    width: 100%; border-collapse: collapse;
    font-size: 12.5px;
    min-width: 920px;
  }
  .hist-table th {
    text-align: left; padding: 8px 10px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--brown); font-weight: 700;
    border-bottom: 2px solid var(--brown);
    vertical-align: bottom;
  }
  .hist-table td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    white-space: nowrap;
  }
  /* Only the long free-text columns wrap (recipient · delegate · type); the
     short data columns (sent date, reply days, status, counts) stay on one line. */
  .hist-table td:nth-child(2),
  .hist-table td:nth-child(3),
  .hist-table td:nth-child(4) { white-space: normal; }
  .hist-table tr:last-child td { border-bottom: none; }
  /* Idea #1: the Reuse table has only 5 short columns, so it must not inherit
     the 920px min-width (which pushes the header rule past the card's right
     edge). Let it fit the card width instead. */
  #admin-reuse-body .hist-table { min-width: 0; }
  .hist-table .h-recipient { font-weight: 600; color: var(--navy); }
  .hist-table .h-meta { color: var(--grey); font-size: 11px; }
  /* Fix #6: per-row delete (trash) control on the left of each invitation. */
  .hist-table .h-trash-cell { width: 30px; padding-right: 0; text-align: center; }
  .hist-table .h-trash {
    background: transparent; border: none; cursor: pointer;
    color: var(--grey); font-size: 15px; line-height: 1;
    padding: 4px; border-radius: 4px; transition: color .15s, background .15s;
  }
  .hist-table .h-trash:hover { color: #B3372A; background: #FBE6E1; }
  /* "Set notification" per-row controls: reminder-interval dropdown + the
     automated-reminder tick box. */
  .inv-notify { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
  .inv-notify .inv-notify-days {
    font-size: 11.5px; padding: 4px 6px; border-radius: 4px;
    border: 1px solid rgba(31,69,67,.25); background: #fff; color: var(--navy);
    cursor: pointer;
  }
  .inv-notify .inv-notify-auto {
    display: flex; align-items: center; gap: 5px;
    font-size: 10.5px; color: var(--grey); cursor: pointer; line-height: 1.2;
  }
  .inv-notify .inv-notify-auto input { cursor: pointer; margin: 0; }
  .inv-notify .inv-notify-auto input:disabled { cursor: not-allowed; }

  /* ── Ongoing Monitoring dashboard ─────────────────────────────────── */
  .mon-summary { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
  .mon-stat {
    flex: 1 1 160px; min-width: 140px;
    background: var(--white); border: 1px solid var(--line);
    border-left: 4px solid var(--brown); border-radius: 6px;
    padding: 12px 14px;
  }
  .mon-stat-val { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; line-height: 1; }
  .mon-stat-lbl { font-size: 11px; color: var(--grey); text-transform: uppercase; letter-spacing: .6px; margin-top: 6px; }
  .mon-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 14px; }
  .mon-controls .rc-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--navy); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
  .mon-controls .rc-field input, .mon-controls .rc-field select {
    border: 1px solid #D8E4F0; border-radius: 4px; padding: 7px 10px; font-size: 13px;
    font-family: 'Inter', sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0;
  }
  .mon-table tbody tr.open-row { cursor: pointer; }
  .mon-table tbody tr.open-row:hover { background: #FBF7EF; }

  /* ── Per-arrangement monitoring detail ────────────────────────────── */
  .mon-detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
  .mon-detail-title { flex: 1 1 auto; }
  .mon-detail-title h3 { margin: 0; font-family: 'Playfair Display', serif; color: var(--navy); font-size: 18px; }
  .mon-detail-meta { font-size: 12px; color: var(--grey); margin-top: 2px; }
  .mon-save-indicator { font-size: 11px; color: var(--grey); min-width: 56px; text-align: right; }
  .mon-sec { margin: 18px 0; }
  .mon-sec > h4, .mon-sec-head > h4 { margin: 0 0 6px; font-family: 'Playfair Display', serif; color: var(--brown); font-size: 15px; }
  .mon-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
  /* Fix #16: bottle-green pill buttons for the Monitoring actions (were faint
     text links). Used for the toolbar + every "+ Add ..." action. */
  .mon-btn {
    display: inline-block; background: var(--navy); color: var(--cream);
    border: 1px solid var(--navy); border-radius: 16px;
    padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
    cursor: pointer; white-space: nowrap; text-decoration: none; text-transform: none;
    transition: background .15s, color .15s, box-shadow .15s;
  }
  .mon-btn:hover { background: #163331; color: #fff; box-shadow: 0 2px 8px rgba(31,69,67,.25); }
  .mon-btn:disabled { opacity: .45; cursor: not-allowed; }
  .mon-btn.danger { background: #B3372A; border-color: #B3372A; color: #fff; }
  .mon-btn.danger:hover { background: #95281F; }
  /* Consistent Armagnac (copper) pill for every in-app "Save as PDF" button. */
  .pdf-btn {
    display: inline-block; background: var(--brown); color: #fff;
    border: 1px solid var(--brown); border-radius: 16px;
    padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
  }
  .pdf-btn:hover { background: #B0704A; border-color: #B0704A; box-shadow: 0 2px 8px rgba(195,128,88,.3); }
  .mon-chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 9px; text-transform: uppercase; letter-spacing: .4px; background: #EEE; color: #777; }
  .mon-chip-fresh   { background: #E4F2EA; color: #2F8266; }
  .mon-chip-soon    { background: #FFF1E0; color: #B07810; }
  .mon-chip-expired { background: #FBE6E1; color: #B3372A; }
  .mon-refreshed { font-size: 10px; color: #2F8266; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
  .mon-doc-table td, .mon-assurance-table td { vertical-align: middle; }
  .mon-doc-table input, .mon-assurance-table input[type="text"], .mon-assurance-table input[type="date"], .mon-assurance-table select,
  .mon-issue input, .mon-issue select, .mon-issue textarea {
    border: 1px solid #D8E4F0; border-radius: 4px; padding: 5px 8px; font-size: 12.5px; font-family: 'Inter', sans-serif;
  }
  .mon-cbx { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--grey); }
  .mon-del { background: transparent; border: none; cursor: pointer; color: var(--grey); font-size: 14px; padding: 4px; border-radius: 4px; }
  .mon-del:hover { color: #B3372A; background: #FBE6E1; }
  /* DD Register row delete (Fix #12). */
  .reg-del { background: transparent; border: none; cursor: pointer; color: var(--grey); font-size: 14px; padding: 4px 6px; border-radius: 4px; line-height: 1; }
  .reg-del:hover { color: #B3372A; background: #FBE6E1; }
  .mon-issues { display: flex; flex-direction: column; gap: 10px; }
  .mon-issue { border: 1px solid var(--line); border-left: 3px solid var(--brown); border-radius: 6px; padding: 10px 12px; background: #FBFCFE; }
  .mon-issue-row1 { display: flex; gap: 8px; align-items: center; }
  .mon-issue-title { flex: 1 1 auto; font-weight: 600; }
  .mon-issue-row2 { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
  .mon-issue-row2 label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--grey); display: inline-flex; align-items: center; gap: 5px; }
  .mon-issue-note { width: 100%; min-height: 44px; resize: vertical; }
  /* Phase 3: periodic reviews, SLAs, events */
  .mon-review { border: 1px solid var(--line); border-left: 3px solid var(--brown); border-radius: 6px; padding: 10px 12px; background: #FBFCFE; margin-bottom: 10px; }
  .mon-review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .mon-review-head input[type="date"], .mon-review-reviewer { border: 1px solid #D8E4F0; border-radius: 4px; padding: 5px 8px; font-size: 12.5px; }
  .mon-review-reviewer { width: 150px; }
  .mon-review-checks { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
  .mon-review-checks label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--grey); display: inline-flex; align-items: center; gap: 5px; }
  .mon-review-checks select { border: 1px solid #D8E4F0; border-radius: 4px; padding: 4px 6px; font-size: 12px; text-transform: none; font-weight: 400; color: var(--navy); }
  .mon-sla-table input { font-size: 12.5px; }
  .mon-events { display: flex; flex-direction: column; gap: 10px; }
  .mon-event { border: 1px solid var(--line); border-left: 3px solid var(--brown); border-radius: 6px; padding: 10px 12px; background: #FBFCFE; }
  .mon-event-row1 { display: flex; gap: 8px; align-items: center; }
  .mon-event-row1 input[type="date"], .mon-event-row1 input[type="text"] { border: 1px solid #D8E4F0; border-radius: 4px; padding: 5px 8px; font-size: 12.5px; }
  .mon-event-row2 { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
  .mon-event-row2 label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--grey); display: inline-flex; align-items: center; gap: 5px; }
  .mon-event-row2 select { border: 1px solid #D8E4F0; border-radius: 4px; padding: 4px 6px; font-size: 12px; }
  .mon-cbx-strong { color: var(--brown) !important; }
  .mon-cbx-strong input { accent-color: var(--brown); }
  /* Phase 4: upcoming-obligations calendar */
  .mon-cal-table td { vertical-align: middle; }
  .mon-cal-table tbody tr.open-row { cursor: pointer; }
  .mon-cal-table tbody tr.open-row:hover { background: #FBF7EF; }
  .mon-kind-redd       { background: #ECE3F3; color: #6B3FA0; }
  .mon-kind-document   { background: #E7EEF6; color: #1F5BA8; }
  .mon-kind-issue      { background: #FFE7E2; color: #B3372A; }
  .mon-kind-assurance  { background: #E4F2EA; color: #2F8266; }
  .hist-empty {
    padding: 40px 20px; text-align: center;
    color: var(--grey); font-style: italic;
    background: var(--light); border-radius: 5px;
  }
  /* Status pills */
  .pill {
    display: inline-block; padding: 3px 9px;
    border-radius: 10px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    white-space: nowrap;
  }
  .pill.pending_request  { background: #EEE; color: #555; }
  .pill.pending_approval { background: #FFF1E0; color: #B07810; }
  .pill.activated        { background: #DDEAF7; color: #1F5BA8; }
  .pill.submitted        { background: #DDF1E5; color: #2F8266; }
  .pill.revoked          { background: #FFE7E2; color: #B3372A; }
  /* Phase 5b — review status pills + recommendation pills */
  .pill.review-not-started { background: #EEE;    color: #555; }
  .pill.review-in_progress { background: #DDEAF7; color: #1F5BA8; }
  .pill.review-validated   { background: #DDF1E5; color: #2F8266; }
  .pill.rec-accept                { background: #DDF1E5; color: #2F8266; }
  .pill.rec-accept_with_reserves  { background: #FFF1E0; color: #B07810; }
  .pill.rec-reject                { background: #FFE7E2; color: #B3372A; }

  /* ─── Phase 5b — Reviews tab ──────────────────────────────────
     Two cards alternate inside #admin-dashboard:
       1. The reviews list (#reviews-list-card) — table of submitted DDQs.
       2. The review surface (#reviews-surface-card) — open one to rate it.
     Both are hidden when the Dashboard tab is showing the invitation cards. */
  .rev-list-table {
    width: 100%; border-collapse: collapse;
    font-size: 12.5px;
  }
  .rev-list-table th {
    text-align: left; padding: 8px 10px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--brown); font-weight: 700;
    border-bottom: 2px solid var(--brown);
  }
  .rev-list-table td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  .rev-list-table tr:last-child td { border-bottom: none; }
  .rev-list-table tr.open-row { cursor: pointer; }
  .rev-list-table tr.open-row:hover td { background: #FFFEFB; }
  .rev-list-table .h-recipient { font-weight: 600; color: var(--navy); }
  .rev-list-table .h-meta { color: var(--grey); font-size: 11px; }
  /* Phase C-3 fix: DD Register-style tables get a horizontal scroll
     wrapper so wide column sets stay on a single line per row. */
  #register-body { overflow-x: auto; }
  #register-body .rev-list-table { min-width: 1100px; white-space: nowrap; }
  #register-body .rev-list-table th,
  #register-body .rev-list-table td { padding: 8px 10px; }
  /* Phase C-2 fix: stacked status pills (Validated above, recommendation below). */
  .rev-list-table .rev-status-stack {
    display: flex; flex-direction: column; gap: 4px;
    align-items: flex-start;
  }

  /* Review surface */
  .review-header {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .review-header .review-back-btn {
    background: transparent; border: 1px solid var(--line);
    color: var(--navy); padding: 6px 10px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
    cursor: pointer;
  }
  .review-header .review-back-btn:hover { background: var(--light); }
  /* Phase C-3: review surface needs to be a positioning context so
     absolutely-positioned stickers anchor inside it. */
  #reviews-surface-card { position: relative; }
  /* Phase C-3: sticky-notes side panel (post-it style) on the Reviews
     surface. The pad sits fixed on the right edge while inside the
     review; each "STICK HERE" drops a copper post-it pinned at the
     scroll position the reviewer was at. */
  .review-stickypad {
    /* Fix #15: top aligns with the review card / main frame (209px) and the
       Outsourcing Guidance box, so the three rails line up across the page. */
    position: fixed;
    right: 16px; top: 209px;
    width: 240px;
    background: #FFF8DC;
    border: 1px solid #D9C77A;
    border-left: 4px solid #B07810;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    font-family: 'Inter', sans-serif;
    z-index: 50;
  }
  .review-stickypad-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(176,120,16,0.25);
    background: rgba(255,250,225,0.6);
  }
  .review-stickypad-title {
    font-size: 11px; font-weight: 700;
    color: #5B4A33;
    text-transform: uppercase; letter-spacing: .8px;
  }
  .review-stickypad-collapse {
    background: none; border: none;
    cursor: pointer;
    font-size: 12px; color: #5B4A33;
    padding: 0 4px;
    transform: rotate(90deg);
    transition: transform .15s ease;
  }
  .review-stickypad.is-collapsed .review-stickypad-body { display: none; }
  .review-stickypad.is-collapsed .review-stickypad-collapse { transform: rotate(0deg); }
  .review-stickypad-body { padding: 10px; }
  .review-stickypad-body textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid rgba(176,120,16,0.3);
    border-radius: 3px;
    background: #FFFCEE;
    padding: 6px 8px;
    font-family: inherit; font-size: 12.5px;
    color: var(--dk);
    resize: vertical;
    min-height: 90px;
  }
  .review-stickypad-actions {
    display: flex; gap: 6px; margin-top: 8px;
  }
  .review-sticky-stick, .review-sticky-erase {
    flex: 1; padding: 6px 8px;
    border: 1px solid #B07810;
    background: #FFF8DC;
    color: #5B4A33;
    border-radius: 3px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase;
    cursor: pointer;
  }
  .review-sticky-stick { background: #B07810; color: #FFF; }
  .review-sticky-stick:hover { filter: brightness(1.1); }
  .review-sticky-erase:hover { background: #FAEFBE; }
  .review-stickypad-hint {
    margin-top: 8px;
    font-size: 10.5px; color: #8B7A40; font-style: italic;
    line-height: 1.4;
  }
  /* Posted stickers (each its own card with an erase button). */
  .review-sticker {
    position: absolute;
    width: 200px;
    background: #FFF8DC;
    border: 1px solid #D9C77A;
    border-top: 3px solid #B07810;
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    padding: 8px 10px 28px;
    font-size: 12px; color: #5B4A33;
    line-height: 1.45;
    z-index: 40;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .review-sticker-erase {
    position: absolute;
    bottom: 4px; right: 6px;
    border: none; background: transparent;
    color: #B3372A;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .4px; text-transform: uppercase;
    cursor: pointer;
  }
  .review-sticker-erase:hover { text-decoration: underline; }
  /* Validate-time reminder text. */
  .review-validate-note {
    margin-top: 8px;
    font-size: 11px; color: #8B7A60; font-style: italic;
    text-align: right;
  }
  /* Print: stickers + the pad are NEVER printed. */
  @media print {
    .review-stickypad, .review-sticker, .review-validate-note { display: none !important; }
  }

  /* ── Points of Attention pad (left edge, mirrors the Notes pad) ───── */
  .review-poa {
    /* Sit BELOW the Outsourcing Guidance button (which is at top:209px on the
       review surface, ~52px tall) and share its left edge (20px) so the
       left-rail boxes line up. */
    position: fixed; left: 20px; top: 272px; width: 190px;
    max-height: calc(100vh - 380px);
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line);
    border-left: 4px solid var(--brown);
    border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    font-family: 'Inter', sans-serif; z-index: 50;
  }
  .review-poa-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-bottom: 1px solid var(--line);
    background: var(--cream); flex: 0 0 auto;
  }
  .review-poa-title { font-size: 11px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .6px; }
  .review-poa-collapse {
    background: none; border: none; cursor: pointer;
    font-size: 12px; color: var(--navy); padding: 0 4px;
    transform: rotate(90deg); transition: transform .15s ease;
  }
  .review-poa.is-collapsed .review-poa-body { display: none; }
  .review-poa.is-collapsed .review-poa-collapse { transform: rotate(0deg); }
  .review-poa-body { padding: 10px; overflow-y: auto; flex: 1 1 auto; }
  .review-poa-section { margin-bottom: 10px; }
  .review-poa-section:last-child { margin-bottom: 0; }
  .review-poa-section-label {
    display: flex; align-items: center; gap: 5px; width: 100%;
    background: none; border: none; padding: 0; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px;
    margin-bottom: 5px;
  }
  .review-poa-caret { font-size: 9px; transition: transform .15s ease; display: inline-block; }
  .review-poa-section.is-collapsed .review-poa-caret { transform: rotate(-90deg); }
  .review-poa-section.is-collapsed .review-poa-chips-wrap { display: none; }
  .review-poa-section.medium .review-poa-section-label { color: #B07810; }
  .review-poa-section.high   .review-poa-section-label { color: #B3372A; }
  .review-poa-count { font-weight: 400; color: var(--grey); }
  .review-poa-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .review-poa-chip {
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 3px 7px; border-radius: 9px; cursor: pointer;
    border: 1px solid transparent; line-height: 1.15; user-select: none;
  }
  .review-poa-section.medium .review-poa-chip { background: #FFF1E0; color: #B07810; border-color: #EAD3A8; }
  .review-poa-section.high   .review-poa-chip { background: #FFE7E2; color: #B3372A; border-color: #E9C5BA; }
  .review-poa-chip:hover { filter: brightness(.96); text-decoration: underline; }
  .review-poa-empty { font-size: 11px; color: var(--grey); font-style: italic; line-height: 1.45; }
  /* Fix #18: filter the Points of Attention chips by risk dimension. */
  .review-poa-filter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
  .review-poa-fbtn {
    font-size: 10px; padding: 3px 8px; border: 1px solid var(--line);
    background: #fff; border-radius: 10px; cursor: pointer; color: var(--grey);
    font-weight: 700; letter-spacing: .2px;
  }
  .review-poa-fbtn:hover { filter: brightness(.97); }
  .review-poa-fbtn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

  /* ── One-click scroll-to-top / bottom (bottom-left of the review) ──── */
  .review-scroll-nav { position: fixed; left: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; gap: 6px; }
  .review-scroll-btn {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--navy); color: var(--brown);
    border: 1px solid var(--brown); cursor: pointer; font-size: 9px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(31,69,67,.22);
    transition: background .15s, color .15s;
  }
  .review-scroll-btn:hover { background: var(--brown); color: #fff; }
  @media print { .review-poa, .review-scroll-nav { display: none !important; } }
  .review-header-main { flex: 1; }
  .review-header-main h2 {
    margin: 0; font-family: 'Playfair Display', serif;
    color: var(--navy); font-size: 19px;
  }
  .review-header-main .review-meta {
    font-size: 12px; color: var(--grey); margin-top: 4px;
  }
  .review-progress {
    position: sticky; top: 0; z-index: 5;
    background: var(--cream); border-left: 3px solid var(--brown);
    padding: 9px 14px; border-radius: 4px;
    font-size: 12px; color: var(--navy);
    margin: 0 0 12px;
  }
  .review-progress-bar {
    background: rgba(31, 69, 67, .14); height: 5px;
    border-radius: 3px; margin-top: 6px; overflow: hidden;
  }
  .review-progress-fill {
    background: var(--brown); height: 100%;
    width: 0%; transition: width .25s;
  }
  .review-files {
    background: var(--light); padding: 12px 14px;
    border-radius: 4px; margin: 0 0 16px;
    font-size: 12.5px; color: var(--navy);
  }
  .review-files strong { color: var(--brown); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
  .review-files ul { list-style: none; padding: 0; margin: 8px 0 0; }
  .review-files li { padding: 4px 0; border-bottom: 1px solid var(--line); }
  .review-files li:last-child { border-bottom: none; }
  .review-files .opt-tag {
    color: var(--brown); font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px; margin-left: 8px;
    border: 1px solid var(--brown); padding: 1px 5px; border-radius: 7px;
  }

  /* Per-question review card */
  .rev-q {
    background: #FFFEFB;
    border-left: 3px solid var(--line);
    padding: 14px 16px; margin: 10px 0;
    border-radius: 0 4px 4px 0;
  }
  .rev-q.rated-low    { border-left-color: #2F8266; }
  .rev-q.rated-medium { border-left-color: #B07810; }
  .rev-q.rated-high   { border-left-color: #B3372A; }
  .rev-q-head {
    display: flex; gap: 12px; align-items: baseline;
    margin-bottom: 8px;
  }
  .rev-q-id {
    background: var(--brown); color: #fff;
    padding: 3px 7px; border-radius: 3px;
    font-size: 10.5px; font-weight: 700;
    font-family: monospace, monospace;
    min-width: 42px; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .rev-q-text {
    font-size: 13.5px; color: var(--navy);
    font-weight: 600; line-height: 1.45;
  }
  .rev-q-answer-label {
    font-size: 9.5px; text-transform: uppercase;
    color: var(--grey); letter-spacing: 1px;
    margin: 6px 0 4px;
  }
  .rev-q-answer-box {
    background: var(--light);
    padding: 9px 12px; border-radius: 3px;
    font-size: 12.5px; line-height: 1.55;
    margin: 0 0 8px;
    white-space: pre-wrap;
    border: 1px solid var(--line);
  }
  .rev-q-answer-box.empty { color: var(--grey); font-style: italic; }
  .rev-q-toggle {
    display: block; font-size: 11.5px;
    color: var(--navy); margin: 6px 0; cursor: pointer;
    user-select: none;
  }
  .rev-q-toggle input { margin-right: 6px; vertical-align: middle; }
  .rev-q textarea[data-field] {
    width: 100%; min-height: 50px;
    padding: 7px 10px; border: 1px solid var(--line);
    border-radius: 3px; font-family: 'Inter', sans-serif;
    font-size: 12px; line-height: 1.45;
    margin: 0 0 4px;
    box-sizing: border-box;
  }
  .rev-q textarea.rev-q-edit {
    border-left: 3px solid var(--brown);
    background: #FFFCF5;
  }
  .rev-q-pageref {
    display: grid; grid-template-columns: 90px 130px 1fr;
    gap: 6px; margin: 0 0 4px;
  }
  .rev-q-pageref input {
    padding: 6px 8px; border: 1px solid var(--line);
    border-radius: 3px; font-size: 12px;
  }
  .rev-q-rating {
    display: flex; gap: 6px;
    margin-top: 10px;
  }
  .rev-rating-btn {
    flex: 1; padding: 8px 0;
    border-radius: 4px; border: 1px solid var(--line);
    background: #fff; color: var(--navy);
    font-size: 11px; font-weight: 700;
    letter-spacing: .8px;
    cursor: pointer; transition: all .15s;
  }
  .rev-rating-btn:hover { background: var(--light); }
  .rev-rating-btn.active[data-rating="low"]    { background: #2F8266; color: #fff; border-color: #2F8266; }
  .rev-rating-btn.active[data-rating="medium"] { background: #B07810; color: #fff; border-color: #B07810; }
  .rev-rating-btn.active[data-rating="high"]   { background: #B3372A; color: #fff; border-color: #B3372A; }

  /* Review footer (overview / recommendation / VALIDATE) */
  .review-footer {
    margin-top: 22px; padding-top: 16px;
    border-top: 2px solid var(--line);
  }
  .review-footer h3 {
    font-family: 'Playfair Display', serif;
    color: var(--brown); font-size: 16px;
    margin: 18px 0 8px;
  }
  .review-extra-dropzone {
    display: block; padding: 16px 14px;
    text-align: center; color: var(--grey); font-size: 12px;
    border: 1.5px dashed var(--line); border-radius: 4px;
    cursor: pointer; background: #FFFEFB;
    transition: all .15s;
  }
  .review-extra-dropzone:hover { background: #FFFCF5; border-color: var(--brown); color: var(--navy); }
  .review-extra-dropzone.dragover { background: var(--cream); border-color: var(--brown); }
  .review-extra-dropzone.busy { opacity: .55; pointer-events: none; }
  .review-extra-dropzone input[type="file"] { display: none; }
  #review-extra-list { margin-top: 8px; }
  #review-extra-list .file-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 4px; font-size: 12px;
    border-bottom: 1px solid var(--line);
  }
  #review-extra-list .file-row:last-child { border-bottom: none; }
  #review-overview {
    width: 100%; min-height: 110px;
    padding: 10px 12px; border: 1px solid var(--line);
    border-radius: 4px; font-family: 'Inter', sans-serif;
    font-size: 13px; line-height: 1.5;
    box-sizing: border-box;
  }
  .review-rec-row {
    display: flex; align-items: center; gap: 14px;
    margin: 14px 0;
  }
  .review-rec-row label {
    font-size: 11px; color: var(--navy);
    font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  }
  .review-rec-row select {
    padding: 8px 10px; border: 1px solid var(--line);
    border-radius: 4px; font-size: 13px;
    background: #fff;
  }
  .review-actions-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; margin-top: 16px;
    flex-wrap: wrap;
  }
  .review-actions-row .btn {
    background: var(--brown); color: #fff;
    border: none; padding: 11px 22px; border-radius: 5px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer;
  }
  .review-actions-row .btn:disabled {
    opacity: .45; cursor: not-allowed;
  }
  .review-actions-row .btn:not(:disabled):hover { background: #B0704A; }
  .review-actions-row .btn-outline {
    background: #fff; color: var(--brown);
    border: 2px solid var(--brown);
  }
  .review-actions-row .btn-outline:not(:disabled):hover {
    background: var(--cream); color: var(--brown);
  }

  /* Live scoring card — 5 columns since Phase 5 adds Financial dim. */
  .review-live-score {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 8px 0 12px;
  }
  @media (max-width: 900px) {
    .review-live-score { grid-template-columns: 1fr 1fr; }
  }
  .live-score-card {
    background: #FFFEFB;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 10px 12px;
  }
  .live-score-card .lsc-label {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--grey); margin-bottom: 4px; font-weight: 700;
  }
  .live-score-card .lsc-band {
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 700;
    text-transform: uppercase;
  }
  .live-score-card .lsc-counts {
    margin-top: 6px;
    font-size: 11px; color: var(--grey);
  }
  .live-score-card .lsc-counts .dim-count {
    display: inline-block; min-width: 22px; text-align: center;
    padding: 1px 5px; border-radius: 7px; font-weight: 700;
    margin-right: 4px;
  }
  .live-score-card .lsc-counts .dim-count.low    { background: #DDF1E5; color: #2F8266; }
  .live-score-card .lsc-counts .dim-count.medium { background: #FFF1E0; color: #B07810; }
  .live-score-card .lsc-counts .dim-count.high   { background: #FFE7E2; color: #B3372A; }
  .live-score-card.overall {
    border-color: var(--brown);
    background: var(--cream);
  }
  /* Risk-based re-review cycle shown under the Overall band. */
  .live-score-card .lsc-cycle {
    margin-top: 5px;
    font-size: 11px; font-weight: 700;
    color: var(--brown);
    text-transform: uppercase; letter-spacing: .5px;
  }

  /* Overview char counter */
  .review-overview-counter {
    font-size: 11px; color: var(--grey);
    text-align: right; margin-top: 4px;
  }
  .review-overview-counter.ok { color: #2F8266; font-weight: 600; }

  /* Recommendation dropdown — Armagnac copper styling */
  .review-rec-select {
    border: 2px solid var(--brown) !important;
    background: #FFFEFB; color: var(--navy);
    font-weight: 600;
  }
  .review-rec-select:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(195,128,88,.25);
  }

  /* Validation status panel */
  .review-status-panel {
    background: #FBFCFE;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brown);
    border-radius: 5px;
    padding: 14px 18px;
    margin: 14px 0 4px;
    font-size: 12.5px;
  }
  .review-status-panel h4 {
    margin: 0 0 8px;
    font-size: 11px; font-weight: 700;
    color: var(--brown);
    text-transform: uppercase; letter-spacing: 1px;
  }
  .review-status-panel .rs-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 0;
  }
  .review-status-panel .rs-row .rs-tick {
    display: inline-block; width: 18px; text-align: center;
    font-weight: 700;
  }
  .review-status-panel .rs-row.ok    .rs-tick { color: #2F8266; }
  .review-status-panel .rs-row.todo  .rs-tick { color: #B07810; }
  .review-status-panel .rs-row .rs-detail {
    color: var(--grey); font-size: 11.5px; margin-left: 4px;
  }
  .review-status-panel .rs-row.todo .rs-detail { color: var(--navy); }
  .review-status-panel .rs-unrated-list {
    margin: 4px 0 0 26px;
    padding: 0; list-style: none;
  }
  .review-status-panel .rs-unrated-list li {
    display: inline-block; margin: 3px 4px 3px 0;
  }
  .review-status-panel .rs-unrated-list a {
    color: var(--brown); font-family: monospace; font-size: 11px;
    border: 1px solid var(--brown); padding: 1px 6px;
    border-radius: 3px; text-decoration: none;
    background: #fff;
  }
  .review-status-panel .rs-unrated-list a:hover {
    background: var(--cream);
  }
  .review-status-panel.all-clear {
    background: #DDF1E5; border-left-color: #2F8266;
  }
  .review-status-panel.all-clear h4 { color: #2F8266; }

  /* Per-question / per-document risk-dimension pills. Editable in the Reviews
     tab (saves to client.tagOverrides + docTagOverrides via /api/ddq-overrides).
     Rendered as read-only preview in the DDQ tab (.is-readonly disables the
     click handler and dims the hover).
     Colour scheme (locked 2026-05-25):
       Operational   = Grey   (#6E7378)
       Legal         = Green  (#2F8266)
       Reputational  = Yellow (#D6B23A)
       Financial     = Blue   (#1F5BA8)
     Pills start in a WHITE box (no fill); selecting fills with the dimension
     colour. Recipients never see these. */
  .ddq-tag-row {
    display: flex; gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0 8px;
    padding: 4px 0;
  }
  .ddq-tag-row::before {
    content: 'Risk dimensions:';
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--grey);
    align-self: center;
    margin-right: 4px;
  }
  .ddq-tag-pill {
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    padding: 4px 9px; border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff; color: var(--grey);
    cursor: pointer; transition: all .15s;
    user-select: none;
    font-family: 'Inter', sans-serif;
  }
  .ddq-tag-pill:hover { border-color: var(--navy); color: var(--navy); }
  /* Active = filled with the dimension's colour, white text. */
  .ddq-tag-pill.active                              { color: #fff; }
  .ddq-tag-pill.active[data-dim="operational"]      { background: #6E7378; border-color: #6E7378; }
  .ddq-tag-pill.active[data-dim="legal"]            { background: #2F8266; border-color: #2F8266; }
  .ddq-tag-pill.active[data-dim="reputational"]     { background: #D6B23A; border-color: #D6B23A; color: #3B2F12; }
  .ddq-tag-pill.active[data-dim="financial"]        { background: #1F5BA8; border-color: #1F5BA8; }
  /* Read-only state still used by validated reviews — disables hover + cursor. */
  .ddq-tag-row.is-readonly .ddq-tag-pill          { cursor: default; }
  .ddq-tag-row.is-readonly .ddq-tag-pill:hover    { border-color: var(--line); color: var(--grey); }
  .ddq-tag-row.is-readonly .ddq-tag-pill.active:hover { color: #fff; }
  .ddq-tag-row.is-readonly .ddq-tag-pill.active[data-dim="reputational"]:hover { color: #3B2F12; }
  /* Doc-tag row injected inside the form's required-docs table (DDQ tab).
     The pill row is a full-width <td colspan=3> below each doc row. */
  .ddq-doc-tagrow > td { padding: 4px 12px 10px; background: #FAF7EF; }
  .ddq-doc-tagrow .ddq-tag-row { margin: 0; padding: 0; }
  .ddq-doc-tagrow .ddq-tag-row::before { content: 'Document risk dimensions:'; }

  /* Fix #11 / #12: on the Reviews surface, the risk-dimension line is FRAMED and
     placed ABOVE the rating, and the label reads "Choose the potential risk
     impact(s)" (clearer than "Risk dimensions"). Scoped to the review cards so
     the DDQ-tab tagging preview keeps its own label. */
  .rev-q-dims, .rev-doc-tags {
    border: 1px solid var(--line);
    border-left: 3px solid var(--brown);
    border-radius: 5px;
    background: #FBFCFE;
    padding: 8px 12px;
    margin: 10px 0 12px;
  }
  .rev-doc-tags { margin-left: 52px; }
  .rev-q-dims .ddq-tag-row, .rev-doc-tags .ddq-tag-row { margin: 0; padding: 0; }
  .rev-q-dims .ddq-tag-row::before,
  .rev-doc-tags .ddq-tag-row::before { content: 'Choose the potential risk impact(s):'; }

  /* Rating hint */
  .rev-q-rating-hint {
    font-size: 10.5px; color: var(--grey);
    text-transform: uppercase; letter-spacing: 1px;
    margin-top: 10px; margin-bottom: 2px;
  }

  /* ─── Phase 5 — Financial Analysis (review surface block) ───────── */
  .rev-financials {
    background: #FBFCFE;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brown);
    border-radius: 6px;
    margin: 22px 0 18px;
  }
  .rev-financials-toggle {
    width: 100%; text-align: left;
    background: transparent; border: none;
    padding: 14px 18px;
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    font-size: 15px;
  }
  .rev-financials-toggle:hover { background: rgba(195,128,88,.04); }
  .rev-fin-caret { color: var(--brown); font-size: 14px; width: 14px; text-align: center; }
  .rev-fin-title {
    font-family: 'Playfair Display', serif;
    color: var(--brown); font-weight: 700;
  }
  .rev-fin-headline {
    margin-left: auto;
    font-size: 12px; color: var(--grey);
    font-weight: 600;
  }
  .rev-financials-body {
    padding: 4px 18px 18px;
    border-top: 1px solid var(--line);
  }
  .rev-financials-body h4 {
    font-family: 'Playfair Display', serif;
    color: var(--navy); font-size: 14.5px;
    margin: 16px 0 8px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
  }
  .rev-fin-fy {
    display: grid; grid-template-columns: 120px repeat(3, 1fr);
    gap: 10px; align-items: center;
    margin: 10px 0 4px;
  }
  .rev-fin-fy label {
    font-size: 11px; font-weight: 700;
    color: var(--navy); text-transform: uppercase; letter-spacing: .8px;
  }
  .rev-fin-fy input {
    padding: 7px 10px; border: 1px solid var(--line);
    border-radius: 4px; font-size: 12.5px;
    font-family: 'Inter', sans-serif;
    text-align: center;
  }
  .rev-fin-tables {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 12px 0;
  }
  @media (max-width: 900px) {
    .rev-fin-tables { grid-template-columns: 1fr; }
  }
  table.rev-fin-table-grid {
    width: 100%; border-collapse: collapse;
    font-size: 12px;
  }
  table.rev-fin-table-grid th {
    background: var(--navy); color: var(--cream);
    padding: 6px 8px; font-size: 10px;
    text-transform: uppercase; letter-spacing: .8px;
    text-align: right;
    font-weight: 700;
  }
  table.rev-fin-table-grid th.lbl-col { text-align: left; }
  table.rev-fin-table-grid td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
  }
  table.rev-fin-table-grid td.lbl-col {
    text-align: left;
    color: var(--navy);
  }
  table.rev-fin-table-grid td.num-col input {
    width: 90px; padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  table.rev-fin-table-grid td.num-col input:focus {
    outline: 0; border-color: var(--brown);
    box-shadow: 0 0 0 2px rgba(195,128,88,.18);
  }
  table.rev-fin-table-grid tr.sec-head td {
    background: var(--cream); font-weight: 700;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--navy);
    padding: 5px 8px;
  }
  table.rev-fin-table-grid tr.sec-total td {
    background: #F0F5F9; font-weight: 700;
  }
  table.rev-fin-table-grid tr.is-computed,
  table.rev-fin-table-grid tr.fin-autorow {
    background: #FAFBFC; color: var(--navy); font-style: italic;
  }
  table.rev-fin-table-grid tr.is-computed td.num-col,
  table.rev-fin-table-grid tr.fin-autorow td.num-col {
    color: var(--navy); font-weight: 600;
    text-align: right; padding: 4px 8px;
  }
  .rev-fin-rename-btn {
    background: transparent; border: 1px solid transparent;
    color: var(--grey); cursor: pointer;
    font-size: 14px; padding: 0 4px;
    margin-left: 4px;
  }
  .rev-fin-rename-btn:hover { color: var(--brown); border-color: var(--line); }
  .rev-fin-add-row {
    width: 100%; background: transparent;
    border: 1px dashed var(--brown);
    color: var(--brown);
    font-size: 11px; font-weight: 700;
    padding: 6px 0; border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase; letter-spacing: .8px;
    margin: 6px 0 0;
  }
  .rev-fin-add-row:hover { background: var(--cream); }

  /* Ratios block */
  .rev-fin-ratios { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 900px) { .rev-fin-ratios { grid-template-columns: 1fr; } }
  .rev-fin-family-card {
    background: #FFFEFB;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 12px 14px;
  }
  .rev-fin-family-card h5 {
    margin: 0 0 8px;
    font-family: 'Playfair Display', serif;
    color: var(--brown); font-size: 14px;
    display: flex; align-items: center; gap: 8px;
  }
  .rev-fin-family-card h5 .fin-fam-auto {
    margin-left: auto;
    font-size: 9.5px;
    color: var(--grey);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Inter', sans-serif;
  }
  .rev-fin-ratios table {
    width: 100%; border-collapse: collapse;
    font-size: 11.5px;
    margin-bottom: 8px;
  }
  .rev-fin-ratios table td {
    padding: 3px 6px; border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
  }
  .rev-fin-ratios table td.r-name { color: var(--navy); font-weight: 500; }
  .rev-fin-ratios table td.r-val { width: 60px; font-weight: 700; text-align: right; }
  .rev-fin-ratios table td.r-trend { color: var(--grey); font-size: 10.5px; text-align: right; }
  .rev-fin-ratios table td.r-band { width: 60px; text-align: right; }
  .auto-band-pill {
    display: inline-block; color: #fff;
    font-size: 9px; font-weight: 700;
    padding: 1px 6px; border-radius: 8px;
    letter-spacing: .6px;
  }
  .auto-band-pill.low    { background: #2F8266; }
  .auto-band-pill.medium { background: #B07810; }
  .auto-band-pill.high   { background: #B3372A; }
  .auto-band-pill.unset  { background: #999; }

  /* Info "i" icon next to each financial-ratio name (Reviews-tab adjustment).
     Hovering reveals a small dark tooltip with the plain-English ratio
     explanation derived from FIN_RATIO_TOOLTIPS. */
  .rev-fin-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: #1F4543; color: #F5E9D8;
    font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 700;
    font-style: italic;
    margin-left: 6px; cursor: help;
    position: relative; user-select: none; vertical-align: middle;
  }
  .rev-fin-info::after {
    content: attr(data-tip);
    position: absolute; left: 0; bottom: calc(100% + 6px);
    width: 280px; padding: 8px 10px;
    background: #1F4543; color: #F5E9D8;
    font-style: normal; font-weight: 400;
    font-size: 11.5px; line-height: 1.45;
    border-radius: 4px; text-align: left;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    z-index: 60; pointer-events: none;
    opacity: 0; transition: opacity .12s;
    white-space: normal; letter-spacing: 0;
  }
  .rev-fin-info:hover::after { opacity: 1; }
  .rev-fin-info::before {
    content: 'i';
  }

  .rev-fin-fam-buttons { display: flex; gap: 6px; margin-top: 6px; }
  .rev-fin-fam-buttons button {
    flex: 1; padding: 6px 0;
    background: #fff; border: 1px solid var(--line);
    color: var(--navy); cursor: pointer;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .6px;
    border-radius: 3px;
  }
  .rev-fin-fam-buttons button.active[data-band="low"]    { background: #2F8266; color: #fff; border-color: #2F8266; }
  .rev-fin-fam-buttons button.active[data-band="medium"] { background: #B07810; color: #fff; border-color: #B07810; }
  .rev-fin-fam-buttons button.active[data-band="high"]   { background: #B3372A; color: #fff; border-color: #B3372A; }

  /* Final score + dimension band block */
  .rev-fin-final {
    background: var(--cream);
    border-left: 3px solid var(--brown);
    border-radius: 0 4px 4px 0;
    padding: 14px 18px;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.55;
  }
  .rev-fin-final-stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 10px; margin-bottom: 10px;
  }
  .rev-fin-final-stat {
    background: #fff; border-radius: 4px; padding: 10px 12px;
    text-align: center;
  }
  .rev-fin-final-stat .lbl {
    font-size: 9.5px; color: var(--grey);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 4px; font-weight: 700;
  }
  .rev-fin-final-stat .val {
    font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700;
  }
  .rev-fin-final-conclusion {
    background: #fff; border-radius: 4px;
    padding: 10px 14px; font-size: 12.5px;
  }
  .rev-fin-warning {
    background: #FFE7E2; border-left: 3px solid #B3372A;
    border-radius: 4px; padding: 10px 14px; margin: 8px 0;
    font-size: 12px; color: #5B1813;
  }

  /* Fix #13: balance-sheet integrity check (under the Balance Sheet table). */
  .rev-fin-balance-check { margin: 8px 0 4px; }
  .rev-fin-balance-check:empty { display: none; }
  .rev-fin-bal-title {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--grey); margin: 0 0 5px;
  }
  .rev-fin-bal-row {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12px; padding: 6px 10px; border-radius: 4px; margin-bottom: 4px;
  }
  .rev-fin-bal-row.ok  { background: #E4F2EA; color: #245C45; }
  .rev-fin-bal-row.bad { background: #FFE7E2; color: #8A2318; }
  .rev-fin-bal-tick { font-weight: 700; }
  .rev-fin-bal-fy { font-weight: 700; min-width: 56px; }
  .rev-fin-bal-msg { flex: 1; }

  /* Fix #16: free-text comment on the financial analysis result. */
  .rev-fin-comment-wrap { margin: 14px 0 4px; }
  .rev-fin-comment-label {
    display: block; margin: 0 0 5px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--grey);
  }
  .rev-fin-comment {
    width: 100%; min-height: 64px;
    padding: 9px 11px; font-family: 'Inter', sans-serif; font-size: 13px;
    border: 1px solid var(--line); border-radius: 5px; resize: vertical;
  }
  .rev-fin-comment:focus { outline: none; border-color: var(--brown); }

  /* Rename modal */
  .rev-fin-rename-modal {
    position: fixed; inset: 0;
    background: rgba(31,69,67,.55); z-index: 320;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .rev-fin-rename-card {
    background: #fff; border-radius: 8px;
    border-top: 4px solid var(--brown);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    max-width: 420px; width: 100%;
    padding: 22px;
  }
  .rev-fin-rename-card h3 {
    margin: 0 0 14px;
    font-family: 'Playfair Display', serif;
    color: var(--navy); font-size: 18px;
  }
  .rev-fin-rename-card label {
    display: block; font-size: 11px;
    color: var(--navy); font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    margin: 10px 0 4px;
  }
  .rev-fin-rename-card input,
  .rev-fin-rename-card select {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 4px; font-size: 13px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
  }
  .rev-fin-rename-card .muted {
    color: var(--grey); font-size: 11.5px;
    margin: 4px 0 0;
    font-style: italic;
  }
  .rev-fin-rename-actions {
    display: flex; align-items: center; gap: 8px;
    margin-top: 16px;
  }
  .rev-fin-rename-actions .btn {
    background: var(--brown); color: #fff;
    border: none; padding: 9px 18px;
    border-radius: 4px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer;
  }
  .rev-fin-rename-actions .btn:hover { background: #B0704A; }
  .rev-fin-rename-actions .row-btn.danger {
    color: #B3372A; border-color: #B3372A;
  }
  .rev-fin-rename-actions .row-btn.danger:hover { background: #FFE7E2; }
  .review-validate-err { color: #B3372A; font-size: 12px; margin-top: 8px; min-height: 16px; }
  .review-validated-banner {
    background: #DDF1E5; border-left: 3px solid #2F8266;
    color: #1B4A3A; padding: 10px 14px; border-radius: 4px;
    font-size: 12.5px; margin: 0 0 14px;
  }

  /* Section header inside the review (mirrors the report's section pills) */
  .review-section-header {
    font-family: 'Playfair Display', serif;
    color: var(--navy); font-size: 14.5px;
    background: var(--cream);
    padding: 8px 14px; border-radius: 4px 4px 0 0;
    margin: 22px 0 6px;
    border-left: 3px solid var(--brown);
  }
  /* Collapsible review section (Reviews-tab adjustment 2026-05-25). Clicking
     the header toggles .collapsed on the wrapping <details>-style block. */
  .review-section-acc { margin: 22px 0 6px; }
  .review-section-acc-head {
    width: 100%; text-align: left; cursor: pointer;
    font-family: 'Playfair Display', serif;
    color: var(--navy); font-size: 14.5px;
    background: var(--cream);
    padding: 8px 14px; border-radius: 4px 4px 0 0;
    border: none; border-left: 3px solid var(--brown);
    display: flex; align-items: center; gap: 10px;
  }
  .review-section-acc-head:hover { background: #EFE0C8; }
  .review-section-acc-caret {
    display: inline-block; font-size: 11px; color: var(--brown);
    transition: transform .15s;
  }
  .review-section-acc.collapsed .review-section-acc-caret { transform: rotate(-90deg); }
  .review-section-acc-count {
    margin-left: auto; font-family: 'Inter', sans-serif;
    font-size: 10.5px; font-weight: 600;
    color: var(--grey); text-transform: uppercase; letter-spacing: 1px;
  }
  .review-section-acc-body { padding: 0; }
  .review-section-acc.collapsed .review-section-acc-body { display: none; }

  /* ─── Reviews tab — Required Documents block (Reviews-tab adjustment) ─── */
  /* Fix #9: the block used to be wrapped in a padded white card, which inset its
     "1. Required Documents" accordion band relative to the question-section bands
     (2 / 3 / 4) that sit directly in #review-questions. Make the wrapper a
     transparent passthrough so the inner .review-section-acc band aligns exactly
     (same left + right edges) with the other sections. */
  .review-required-docs {
    background: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
  }
  .review-required-docs > h4 {
    margin: 0 0 12px;
    font-family: 'Playfair Display', serif;
    color: var(--navy); font-size: 16px;
  }
  .review-required-docs > h4 .doc-hint {
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 500;
    color: var(--grey); text-transform: none; letter-spacing: 0;
    margin-left: 8px;
  }
  .rev-doc-row {
    border-top: 1px solid var(--line);
    padding: 12px 0;
  }
  .rev-doc-row:first-of-type { border-top: none; padding-top: 4px; }
  .rev-doc-head {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 8px;
  }
  .rev-doc-num {
    background: var(--brown); color: #fff;
    font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: 11px; padding: 3px 8px; border-radius: 4px;
    font-variant-numeric: tabular-nums;
    min-width: 42px; text-align: center;
    flex: 0 0 auto;
  }
  .rev-doc-label {
    flex: 1; color: var(--navy);
    font-size: 13.5px; line-height: 1.4;
  }
  .rev-doc-status {
    flex: 0 0 auto;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .9px;
    padding: 3px 9px; border-radius: 10px;
    border: 1px solid var(--line); color: var(--grey); background: #fff;
  }
  .rev-doc-status.is-yes { background: #E4F2EA; color: #2F8266; border-color: #B6D9C4; }
  .rev-doc-status.is-no  { background: #FBE6E1; color: #B3372A; border-color: #E9C5BA; }
  .rev-doc-rationale {
    margin: 4px 0 8px 52px;
    padding: 8px 10px;
    background: #FBE6E1; border-left: 3px solid #B3372A;
    font-size: 12.5px; color: #5B2218; border-radius: 0 4px 4px 0;
  }
  .rev-doc-rationale strong { color: #B3372A; }
  .rev-doc-comment-label {
    display: block; margin: 8px 0 4px 52px;
    font-size: 10.5px; font-weight: 600;
    color: var(--grey); text-transform: uppercase; letter-spacing: 1px;
  }
  .rev-doc-comment {
    width: calc(100% - 52px); margin-left: 52px;
    min-height: 50px;
    padding: 8px 10px; font-family: 'Inter', sans-serif; font-size: 13px;
    border: 1px solid var(--line); border-radius: 4px;
    resize: vertical;
  }
  .rev-doc-comment:focus { outline: none; border-color: var(--brown); }
  .rev-doc-tags { margin-left: 52px; margin-top: 8px; }
  /* Overall section-level Documents risk assessment widget (top of the
     Required Documents accordion body). */
  .rev-docs-overall {
    background: #FBFCFE;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brown);
    border-radius: 5px;
    padding: 12px 14px;
    margin: 0 0 14px;
  }
  .rev-docs-overall-label {
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--navy);
    margin-bottom: 8px;
  }
  .rev-docs-overall-hint {
    font-size: 10.5px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    color: var(--grey);
    margin-left: 6px;
  }
  .rev-docs-overall .rev-doc-rating { margin-left: 0; }
  /* Sub-section header (e.g. "Policies") inside the required-docs block. */
  .rev-doc-subheader {
    font-family: 'Playfair Display', serif;
    color: var(--brown); font-size: 13px;
    text-transform: uppercase; letter-spacing: 1.2px;
    margin: 16px 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(195,128,88,.4);
  }

  /* DD Register — controls strip + overall headline (Reviews-tab adjustment). */
  .register-overall {
    display: flex; gap: 14px; align-items: center;
    background: #FBFCFE;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brown);
    border-radius: 5px;
    padding: 12px 16px; margin: 0 0 12px;
    font-family: 'Inter', sans-serif;
  }
  .register-overall .ro-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--grey);
  }
  .register-overall .ro-band {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 800;
    letter-spacing: .4px;
  }
  .register-overall .ro-meta {
    margin-left: auto;
    font-size: 11.5px; color: var(--grey);
  }
  /* Phase C-2 fix: register filter bar uses a 4-column grid so the
     Sort / Type / Country / Period fields are all the same width. The
     Clear filters button sits on its own row to the right. */
  .register-controls {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #FAF7EF;
    border: 1px solid var(--line); border-radius: 5px;
  }
  .register-controls .rc-field,
  .gov-controls .rc-field {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--grey);
    min-width: 0;
  }
  .register-controls select,
  .register-controls input[type="date"],
  .gov-controls input[type="date"] {
    font-family: 'Inter', sans-serif; font-size: 12.5px;
    padding: 4px 8px; border: 1px solid var(--line);
    border-radius: 4px; background: #fff;
    color: var(--navy);
    width: 100%; box-sizing: border-box;
  }
  .register-controls .rc-period,
  .gov-controls .rc-period {
    display: flex; gap: 4px; align-items: center;
  }
  .register-controls .rc-period input[type="date"],
  .gov-controls .rc-period input[type="date"] {
    flex: 1 1 0; min-width: 0;
  }
  .register-controls .rc-period-sep,
  .gov-controls .rc-period-sep {
    font-size: 11px; color: var(--grey); font-weight: 400;
    text-transform: none; letter-spacing: 0;
  }
  .register-controls .rc-clear { align-self: flex-end; }
  /* Fix #5: Governance period filter row. */
  .gov-controls {
    display: flex; align-items: flex-end; gap: 12px;
    margin: 0 0 14px; padding: 10px 12px;
    background: #FAF7EF;
    border: 1px solid var(--line); border-radius: 5px;
  }
  .gov-controls .rc-field { max-width: 320px; }
  @media (max-width: 880px) {
    .register-controls { grid-template-columns: 1fr 1fr; }
    .register-controls .rc-clear { grid-column: 1 / -1; justify-self: end; }
  }
  /* Phase C-3: status checkbox row sits below the filter controls. */
  .register-status-row {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 8px 12px;
    background: #FAF7EF;
    border: 1px solid var(--line); border-radius: 5px;
    font-size: 12.5px; color: var(--navy);
  }
  .register-status-row .rc-field-label {
    font-size: 10.5px; font-weight: 700;
    color: var(--grey);
    text-transform: uppercase; letter-spacing: .8px;
    margin-right: 4px;
  }
  .register-status-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
  /* Status pills inside the register's "Status" cell. */
  .pill.reg-status-not-started { background: rgba(155,155,155,0.18); color: #5B4A33; }
  .pill.reg-status-in-review   { background: rgba(176,120,16,0.18);  color: #B07810; }
  .pill.reg-status-validated   { background: rgba(47,130,102,0.18);  color: #2F8266; }
  /* Idea #3: "Imported" tag on legacy register rows brought in from Excel/CSV. */
  .reg-imported-tag {
    display: inline-block; margin-left: 6px; padding: 1px 7px;
    border-radius: 999px; font-size: 9.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .6px; vertical-align: middle;
    background: rgba(160,120,40,0.16); color: #B07810; border: 1px solid rgba(160,120,40,0.35);
  }
  .rev-doc-rating-hint {
    margin: 10px 0 4px 52px;
    font-size: 10.5px; font-weight: 600;
    color: var(--grey); text-transform: uppercase; letter-spacing: 1px;
  }
  .rev-doc-rating { margin-left: 52px; display: flex; gap: 6px; }
  .rev-doc-rating-btn {
    flex: 0 0 auto;
    padding: 5px 14px; font-size: 11px; font-weight: 700;
    background: #fff; border: 1px solid var(--line);
    color: var(--navy); cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase; letter-spacing: .8px;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
  }
  .rev-doc-rating-btn:hover:not(:disabled) { border-color: var(--brown); color: var(--brown); }
  .rev-doc-rating-btn.active[data-rating="low"]    { background: #2F8266; border-color: #2F8266; color: #fff; }
  .rev-doc-rating-btn.active[data-rating="medium"] { background: #B07810; border-color: #B07810; color: #fff; }
  .rev-doc-rating-btn.active[data-rating="high"]   { background: #B3372A; border-color: #B3372A; color: #fff; }
  .rev-doc-row.rated-low    { border-left: 3px solid #2F8266; padding-left: 10px; }
  .rev-doc-row.rated-medium { border-left: 3px solid #B07810; padding-left: 10px; }
  .rev-doc-row.rated-high   { border-left: 3px solid #B3372A; padding-left: 10px; }

  /* Floating SAVING / SAVED indicator */
  .review-save-indicator {
    position: fixed; bottom: 14px; right: 14px;
    background: rgba(31, 69, 67, .96); color: var(--cream);
    padding: 6px 13px; border-radius: 14px;
    font-size: 11.5px; opacity: 0;
    pointer-events: none; transition: opacity .25s;
    z-index: 200;
  }
  .review-save-indicator.show { opacity: 1; }
  .review-save-indicator.error { background: #B3372A; color: #fff; }

  /* Optional-doc tag in the recipient's dropzone (Phase 5b add) */
  .ddq-file .ddq-file-optional {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; color: var(--brown);
    margin-left: 8px; cursor: pointer;
    user-select: none;
  }
  .ddq-file .ddq-file-optional input { margin: 0; cursor: pointer; }

  /* ─── Phase 5d — follow-up modal + recipient view + Updated badge ─── */

  /* Send-back modal */
  .followup-modal {
    position: fixed; inset: 0;
    background: rgba(31, 69, 67, .55);
    z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .followup-modal-card {
    background: #fff;
    border-radius: 8px; border-top: 4px solid var(--brown);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    max-width: 680px; width: 100%;
    max-height: 88vh; display: flex; flex-direction: column;
    overflow: hidden;
  }
  .followup-modal-header {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px 8px;
    border-bottom: 1px solid var(--line);
  }
  .followup-modal-header h3 {
    margin: 0; flex: 1;
    font-family: 'Playfair Display', serif;
    color: var(--navy); font-size: 18px;
  }
  .followup-modal-close {
    background: transparent; border: none;
    font-size: 22px; color: var(--grey);
    cursor: pointer; padding: 0 6px;
  }
  .followup-modal-close:hover { color: var(--navy); }
  .followup-modal-card .muted { padding: 0 22px; margin: 8px 0; font-size: 12.5px; }
  .followup-note-row {
    padding: 0 22px; margin: 10px 0;
  }
  .followup-note-row label {
    display: block; font-size: 11px; color: var(--navy);
    font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    margin-bottom: 4px;
  }
  .followup-note-row textarea {
    width: 100%; border: 1px solid var(--line);
    border-radius: 4px; padding: 8px 10px;
    font-family: 'Inter', sans-serif; font-size: 13px;
    line-height: 1.5; resize: vertical;
    box-sizing: border-box;
  }
  .followup-question-list {
    flex: 1; overflow-y: auto;
    padding: 8px 22px 16px;
    max-height: 44vh;
    border-top: 1px solid var(--line);
  }
  .followup-question-list .fq-row {
    display: grid; grid-template-columns: 24px 60px 1fr;
    gap: 8px; padding: 6px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px; align-items: start;
  }
  .followup-question-list .fq-row:hover { background: #FFFEFB; }
  .followup-question-list .fq-row .fq-id {
    font-family: monospace; font-size: 10.5px;
    color: var(--brown); font-weight: 700;
    background: var(--cream); padding: 2px 6px;
    border-radius: 3px; text-align: center;
    height: fit-content;
  }
  .followup-question-list .fq-row input[type="checkbox"] {
    margin: 4px 0 0; cursor: pointer;
  }
  .followup-question-list .fq-row label {
    cursor: pointer; color: var(--navy);
    line-height: 1.4;
  }
  /* Collapsible section in the Resend-selected modal */
  .followup-question-list .fq-section {
    border: 1px solid var(--line);
    border-radius: 4px;
    margin: 6px 0;
    background: #fff;
  }
  .followup-question-list .fq-section-toggle {
    width: 100%; text-align: left;
    background: var(--cream); color: var(--navy);
    border: none; padding: 8px 10px;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    border-radius: 4px 4px 0 0;
  }
  .followup-question-list .fq-section-toggle:hover { background: #F0E4CE; }
  .followup-question-list .fq-section-toggle .fq-section-caret {
    color: var(--brown); font-size: 13px; width: 14px; text-align: center;
  }
  .followup-question-list .fq-section-toggle .fq-section-title { flex: 1; }
  .followup-question-list .fq-section-toggle .fq-section-count {
    color: var(--grey); font-size: 10.5px;
    font-weight: 600;
  }
  .followup-question-list .fq-section-toggle .fq-section-tally {
    color: var(--brown); font-size: 10.5px;
    font-weight: 600;
  }
  .followup-question-list .fq-section-body {
    padding: 4px 12px 10px;
  }
  .followup-question-list .fq-section .fq-row { padding: 4px 0; }
  .followup-modal-footer {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: #FBFCFE;
  }
  .followup-modal-footer .btn {
    background: var(--brown); color: #fff;
    border: none; padding: 9px 18px;
    border-radius: 4px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer;
  }
  .followup-modal-footer .btn:disabled { opacity: .45; cursor: not-allowed; }
  .followup-modal-footer .btn:not(:disabled):hover { background: #B0704A; }
  .followup-modal-footer #followup-modal-status.error { color: #B3372A; }
  #import-status.error { color: #B3372A; }

  /* Import-from-Excel modal */
  .import-body { padding: 0 22px 4px; overflow-y: auto; }
  .import-lbl { display:block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--grey); margin-bottom: 4px; }
  .import-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
  .import-input-col textarea, .import-input-col input[type="file"] { width: 100%; box-sizing: border-box; }
  .import-input-col textarea { border: 1px solid var(--line); border-radius: 4px; padding: 8px;
    font-size: 12.5px; font-family: 'Inter', sans-serif; resize: vertical; }
  .import-input-col .row-btn { margin-top: 8px; }
  .import-map-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 12px; }
  .import-map-row select { width: 100%; box-sizing: border-box; padding: 6px 8px;
    border: 1px solid var(--line); border-radius: 4px; font-size: 12.5px; background: #fff; }
  .import-preview { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px;
    max-height: 300px; overflow-y: auto; background: #FBFCFE; }
  .import-prev-sec { font-weight: 700; color: var(--navy); margin: 10px 0 4px;
    font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
  .import-prev-sec:first-child { margin-top: 0; }
  .import-prev-q { font-size: 12.5px; color: var(--dk); padding: 2px 0 2px 14px; }
  .import-prev-empty { color: var(--grey); font-style: italic; font-size: 12.5px; }
  .import-prev-count { color: var(--brown); font-weight: 700; font-size: 11px; }
  /* Editable import preview (Fix #8): bold lines = sections, bullets = questions. */
  .import-preview[contenteditable] { min-height: 200px; outline: none; }
  .import-preview[contenteditable]:focus { box-shadow: inset 0 0 0 2px rgba(195,128,88,.4); }
  .import-preview .imp-line { padding: 3px 4px; line-height: 1.5; }
  .import-preview .imp-sec { font-weight: 700; color: var(--navy); margin-top: 8px; font-size: 13.5px; }
  .import-preview .imp-q { font-size: 12.5px; color: var(--dk); padding-left: 20px; position: relative; }
  .import-preview .imp-q::before { content: "\2022"; position: absolute; left: 6px; color: var(--brown); }
  /* Structured editable import rows (Fix #8): arrow promotes/demotes a line. */
  .imp-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
  .imp-row-sec { margin-top: 6px; }
  .imp-bullet { flex: none; color: var(--brown); font-weight: 700; }
  .imp-sec-input {
    flex: 1 1 auto; font-weight: 700; color: var(--navy); font-size: 13.5px;
    border: 1px solid rgba(31,69,67,.25); border-radius: 6px; padding: 5px 9px;
  }
  .imp-q-input {
    flex: 1 1 auto; font-size: 12.5px; color: var(--dk); font-family: inherit;
    border: 1px solid rgba(31,69,67,.25); border-radius: 6px; padding: 5px 9px; resize: vertical;
  }
  .imp-row .tpl-del { flex: none; }
  @media (max-width: 640px) {
    .import-input-grid { grid-template-columns: 1fr; }
    .import-map-row { grid-template-columns: 1fr 1fr; }
  }

  /* "Updated" badge inside review surface question cards */
  .rev-q-update {
    background: #FFFCF5;
    border: 1px solid #C38058;
    border-left: 3px solid var(--brown);
    border-radius: 3px;
    padding: 8px 12px; margin: 0 0 8px;
    font-size: 12.5px; line-height: 1.5;
    white-space: pre-wrap;
  }
  .rev-q-update-label {
    display: inline-block;
    background: var(--brown); color: #fff;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
    padding: 2px 7px; border-radius: 8px;
    margin-bottom: 4px;
  }
  .rev-q .rev-q-update-meta {
    font-size: 10.5px; color: var(--grey);
    margin-bottom: 4px;
  }

  /* Pending follow-up tag in reviews list */
  .pill.followup-pending {
    background: #FFF1E0; color: #B07810;
    border: 1px solid #B07810;
  }

  /* Recipient follow-up view */
  #followup-view .followup-note-display {
    background: var(--cream);
    border-left: 3px solid var(--brown);
    padding: 12px 16px; border-radius: 0 4px 4px 0;
    margin: 14px 0;
    font-size: 13px; line-height: 1.55;
    white-space: pre-wrap;
  }
  #followup-view .followup-note-display strong {
    display: block; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--navy); margin-bottom: 6px;
  }
  .fu-q {
    background: #FFFEFB;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brown);
    border-radius: 0 4px 4px 0;
    padding: 14px 16px; margin: 12px 0;
  }
  .fu-q-head {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 8px;
  }
  .fu-q-id {
    background: var(--brown); color: #fff;
    padding: 3px 8px; border-radius: 3px;
    font-family: monospace; font-size: 10.5px;
    font-weight: 700; min-width: 42px; text-align: center;
  }
  .fu-q-text {
    flex: 1; font-size: 13.5px;
    color: var(--navy); font-weight: 600; line-height: 1.45;
  }
  .fu-q textarea {
    width: 100%; min-height: 80px;
    padding: 9px 11px; border: 1px solid var(--line);
    border-radius: 4px; font-family: 'Inter', sans-serif;
    font-size: 13px; line-height: 1.5;
    box-sizing: border-box;
  }
  /* Per-doc file picker on the recipient follow-up view (Reviews-tab adjustment). */
  .fu-doc-upload { margin-top: 8px; padding: 10px 12px;
    background: #FBF5EA; border: 1px dashed var(--brown);
    border-radius: 4px; }
  .fu-doc-upload-label {
    display: block; font-size: 10.5px; font-weight: 700;
    color: var(--brown); text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 6px;
  }
  .fu-doc-upload input[type=file] { font-size: 12px; }
  .fu-doc-files { margin-top: 6px; font-size: 12px; color: var(--grey); }
  .fu-doc-files .file-pill {
    display: inline-block; background: #fff; border: 1px solid var(--line);
    padding: 2px 8px; border-radius: 10px; margin: 2px 4px 2px 0;
    font-size: 11.5px; color: var(--navy);
  }
  .followup-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 22px;
  }
  .followup-actions .btn {
    background: var(--brown); color: #fff;
    border: none; padding: 11px 22px; border-radius: 5px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer;
  }
  .followup-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
  .followup-actions .btn:not(:disabled):hover { background: #B0704A; }

  /* Collapsible sections in the recipient follow-up view */
  .fu-section {
    border: 1px solid var(--line); border-radius: 5px;
    margin: 12px 0; background: #fff;
  }
  .fu-section-toggle {
    width: 100%; text-align: left;
    background: var(--cream); color: var(--navy);
    border: none; padding: 10px 14px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    border-radius: 5px 5px 0 0;
  }
  .fu-section-toggle:hover { background: #F0E4CE; }
  .fu-section-toggle .fu-section-caret {
    color: var(--brown); font-size: 14px; width: 14px; text-align: center;
  }
  .fu-section-toggle .fu-section-title { flex: 1; }
  .fu-section-toggle .fu-section-count {
    color: var(--grey); font-size: 11px;
    font-weight: 600;
  }
  .fu-section-body {
    padding: 6px 14px 12px;
  }
  /* Phase 5 fix-round 5 — YES/NO row inside the recipient follow-up view
     when the reviewer requests specific documents be resent. */
  .fu-doc-yn {
    display: flex; gap: 18px; margin: 8px 0;
    font-size: 13px; color: var(--navy);
  }
  .fu-doc-yn label {
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600;
  }
  /* Per-row action buttons */
  .row-btn {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 10.5px; font-weight: 600;
    color: var(--navy); cursor: pointer;
    margin-right: 4px; margin-bottom: 4px;
    transition: background .15s, color .15s, border-color .15s;
  }
  .row-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
  .row-btn.danger { color: #B3372A; border-color: rgba(179,55,42,.3); }
  .row-btn.danger:hover { background: #B3372A; color: #fff; border-color: #B3372A; }
  .row-btn.report { color: var(--brown); border-color: rgba(195,128,88,.5); }
  .row-btn.report:hover { background: var(--brown); color: #fff; border-color: var(--brown); }
  .row-btn:disabled { opacity: .4; cursor: not-allowed; }

  @media (max-width: 720px) {
    .ddash-grid { grid-template-columns: 1fr; }
    /* The Sent-invitations table scrolls horizontally (see #admin-history-body),
       so no columns are hidden on narrow screens — all data stays reachable. */
  }

  @media (max-width: 720px) {
    .ddq-respondent { grid-template-columns: 1fr; }
    main { padding: 18px 14px 100px; }
    .ddq-title { font-size: 24px; }
    .ddq-header { padding: 10px 14px; }
    .ddq-header .logo-wrap img { height: 50px; }
  }

/* ── Phase 6a — AI-assisted pre-review ─────────────────────────── */
.review-ai-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:10px 12px; background:#fbf7f0; border:1px solid #e4dccd; border-radius:10px; }
.review-ai-progress { font-size:12.5px; color:#5b4a33; font-weight:700; }
.review-ai-note { font-size:11.5px; color:#7a6b5b; font-style:italic; }
.rev-q-ai { margin-top:10px; border:1px solid rgba(195,128,88,.55); border-left:3px solid var(--brown); border-radius:8px; background:#fffdf9; padding:10px 12px; }
.rev-q-ai.accepted { opacity:.6; border-left-color:#2F8266; }
.rev-q-ai-head { display:flex; align-items:center; gap:8px; font-weight:700; color:#1F4543; font-size:12.5px; }
.rev-q-ai-tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--brown); background:#f3e7d6; border-radius:4px; padding:1px 6px; }
.rev-q-ai-rating { margin-left:auto; font-weight:700; font-size:12.5px; }
.rev-q-ai-comment { margin:6px 0; font-size:13px; color:#3a3027; line-height:1.5; }
.rev-q-ai-sub { margin-top:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#7a6b5b; }
.rev-q-ai-list { margin:2px 0 0; padding-left:18px; font-size:12.5px; color:#3a3027; }
.rev-q-ai-list li { margin:2px 0; }
.rev-q-ai-actions { display:flex; gap:8px; margin-top:8px; }
.rev-q-ai-accept { background:#1F4543; color:#fff; border-color:#1F4543; font-weight:700; }
.rev-q-ai-dismiss { background:#fff; color:#7a6b5b; }
.review-ai-inline { margin:8px 0 4px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.review-ai-inline .rev-q-ai { flex-basis:100%; margin-top:6px; }