@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Muji palette — warm, muted, natural ── */
  --ink:       #2C2C2C;
  --ink-soft:  #4A4A4A;
  --slate:     #7A7A7A;
  --muted:     #A8A8A8;
  --line:      #E5E7EF;
  --line-soft: #F0EDE8;
  --paper:     #F8F9FC;
  --warm:      #F5F6FA;
  --white:     #FFFFFF;

  /* ── Accent colours — all muted/dusty ── */
  --sage:      #7A9E87;
  --sage-d:    #5C7A69;
  --sage-l:    #E8F0EB;
  --sage-ll:   #F2F7F4;
  --terracotta:#C17F5C;
  --terra-d:   #A0633D;
  --terra-l:   #F5E8DF;
  --stone:     #8C8278;
  --stone-l:   #EDE8E3;
  --dust:      #9BA8A0;
  --dust-l:    #E8EEEB;
  --clay:      #B5967A;
  --clay-l:    #F2EAE0;

  /* ── RAG bands — "how far along", banded 80/40 ──
     One set of three, so readiness, completion and anything else that answers
     that question cannot drift apart. Ink only; the tinted backgrounds stay
     with the components that need them (.rd-ar-pill). */
  --band-ok:   #1E6E5C;
  --band-mid:  #7A5A00;
  --band-low:  #B3261E;
  --sky:       #7A9AAE;
  --sky-l:     #E3EDF3;
  --blush:     #C49A9A;
  --blush-l:   #F5EAEA;

  /* ── Semantic ── */
  --success:   #7A9E87;
  --success-l: #E8F0EB;
  --warning:   #C9A96E;
  --warning-l: #F7F0E0;
  --danger:    #C17F7F;
  --danger-l:  #F5E8E8;
  --info:      #7A9AAE;
  --info-l:    #E3EDF3;

  /* ── The doc-type palette, as tokens ──
     The three colours the Workspace label, the Library folder and the
     completion donut already share. Named here because the CATALOGUE now
     stores one of them per plan (`plans.name_colour`) as a KEY — the plan's
     name on the package page is printed in whichever it holds, so the value
     has to live somewhere a palette change can reach.
     ⚠️ Yellow is #E0A800, not the doc-type palette's brighter #FED224: as text
     on white, that one is not readable. Same rule as `.sb-grp-ws`. */
  --plan-green:  #2A715B;
  --plan-yellow: #E0A800;
  --plan-purple: #B450FF;

  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  --shadow-xs: 0 1px 2px rgba(44,44,44,.06);
  --shadow-sm: 0 2px 6px rgba(44,44,44,.07), 0 1px 2px rgba(44,44,44,.05);
  --shadow:    0 4px 16px rgba(44,44,44,.08), 0 2px 6px rgba(44,44,44,.05);
  --shadow-lg: 0 12px 40px rgba(44,44,44,.12), 0 4px 12px rgba(44,44,44,.07);

  --font:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:'DM Serif Display', Georgia, serif;
  --mono:      'JetBrains Mono', monospace;
  --sidebar-w: 240px;
  /* Shared horizontal gutter. #topbar and #content both use this so their left
     and right edges always line up — previously #content also carried a
     max-width, which left the page content ending short of the top bar. */
  --gutter: 32px;

  /* ── Neon accents ── */
  /* Brand accent. The --neon-yellow-* names are kept so the surfaces that still
     use them keep working; new work should use --accent. */
  --accent:          #007E65;
  --accent-d:        #00654F;   /* hover */
  /* The accent is dark, so on the dark sidebar and login hero it needs a lighter
     tint or it fails contrast against near-black. */
  --accent-on-dark:  #35C6A5;
  --neon-yellow:     #007E65;
  --neon-yellow-d:   #00654F;
  --neon-yellow-glow:rgba(0,126,101,.28);
  --neon-violet:     #C084FC;
  --neon-violet-d:   #A855F7;
  --neon-violet-glow:rgba(192,132,252,.35);
  --neon-green:      #4ADE80;
  --neon-green-glow: rgba(74,222,128,.25);
}

/* Form controls do NOT inherit fonts by default — an unstyled <button> or
   <select> falls back to the UA font, which is how 23 inline
   `font-family:Arial` declarations crept into app.v6.js in the first place.
   One reset here beats repeating `font-family: inherit` per component. */
button, input, select, textarea { font-family: inherit; }

body {
  font-family: var(--font);
  background: var(--warm);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Layout ── (UI revamp 2026-10-01)
   A grey canvas; the sidebar shares that grey (no surface of its own); #content
   is ONE white container floating 15px in from every edge. No topbar — see
   renderShell(). The page still scrolls on the window, so a sticky sub-header
   sticks at the very top of the viewport (top: 0). */
#app-shell { display: flex; min-height: 100vh; background: var(--warm); }
#sidebar {
  width: var(--sidebar-w);
  background: var(--warm);
  display: flex; flex-direction: column;
  position: fixed; height: 100vh; overflow-y: auto; overflow-x: hidden;
  padding: 18px 12px 0; box-sizing: border-box;
  transition: width .18s ease;
}
#main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; padding: 15px; transition: margin-left .18s ease; }
#content {
  padding: var(--gutter);
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(23,38,59,.05);
  box-sizing: border-box; min-height: calc(100vh - 30px);
}
/* A sticky sub-header that opens the page bleeds to the container's edges, so
   its top corners follow the container's. */
#content > .ad-subheader:first-child, #content > .de-subheader:first-child,
#content > .iz-subheader:first-child { border-radius: 13px 13px 0 0; }

/* ── Sidebar ──────────────────────────────────────────────────────────────────
   Light theme: white surface, items as full-width rounded pills with an inset
   margin (the reference layout) — hover a soft grey pill, the active page a
   tinted accent pill. Icons are stroke="currentColor" so they follow the text
   colour on their own. The plain --accent has contrast on white; --accent-on-dark
   was only ever for the old near-black surface. */
.sidebar-logo {
  padding: 4px 6px 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-logo-icon {
  width: 30px; height: 30px; flex: 0 0 auto;
  background: var(--accent);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.5px;
}
.sidebar-logo-text {
  font-family: var(--font-serif);
  font-size: 19px; color: var(--ink); letter-spacing: .5px;
}
.sidebar-logo-ver { font-size: 10px; color: var(--muted); font-weight: 400; margin-left: 2px; }
.sidebar-section { padding: 0; }
/* Breathing room after an EXPANDED group only: the margin sits on the last
   link INSIDE the animated wrapper, so the collapsed state (overflow:hidden,
   max-height:0) clips it and keeps its tight rhythm. */
.sidebar-section .sidebar-link:last-child { margin-bottom: 8px; }
.sidebar-label {
  padding: 12px 10px 4px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted);
}
/* Compact rows on the grey (the preview's .pv2-nav-item): hover lifts to
   white, the open page wears the accent tint. */
.sidebar-link {
  display: flex; align-items: center; gap: 9px;
  margin: 1px 0;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--ink);
  font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.sidebar-link svg { width: 15px; height: 15px; }
.sidebar-link span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-link:hover { background: var(--white); color: var(--ink); }

/* Library feature tile — the ONE taller sidebar item: a bordered card with
   the coloured folder that fills with paper as baselines are approved. */
.lib-tile {
  padding: 11px 12px; gap: 12px;
  /* The tile's border aligns with the group-header WORD ("OVERVIEW" starts at
     8px margin + 14px padding = 22px), not with the pills' 10px inset. The
     16px top margin keeps clear air under the logo divider now that the tile
     is the first thing in the nav; the bottom margin separates the tile from
     the nav items proper, so the Library reads as its own thing rather than
     as the first entry in the list below it. */
  margin: 6px 0 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
}
.lib-tile:hover { background: var(--white); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.lib-tile.active { border-color: rgba(0, 126, 101, .3); }
/* Nothing approved yet: the folder is empty and the tile border goes dashed. */
.lib-tile.lib-empty { border-style: dashed; }
.lib-tile .lib-tile-svg { flex: none; }
.lib-tile-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lib-tile-l { font-size: 14px; font-weight: 600; }
.lib-tile-s { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lib-tile.active .lib-tile-s { color: var(--accent); opacity: .75; }
.sidebar-link.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.sidebar-link svg { opacity: .65; flex-shrink: 0; transition: opacity .15s; }
.sidebar-link.active svg, .sidebar-link:hover svg { opacity: 1; }

/* Hover lift on the Ferbe AI row matches the other rows on the grey. */
.sb-intel:hover:not(.active) { background: var(--white) !important; }

/* Group header row (was inline styles in addNavGroup): label + chevron. */
.sb-grp-row { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 10px 6px; cursor: pointer; user-select: none; border-radius: 6px; }
.sb-grp-chev { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  font-size: 10px; font-weight: 900; color: var(--muted); transition: transform .2s; }

/* Organisation block (moved from the topbar): Organisations · org name · plan
   chip · support badge. */
/* No divider of its own — the logo row's line above is the one divider. */
.sb-org { display: flex; flex-direction: column; gap: 6px; padding: 0 0 6px; }
.sb-collapsed #sidebar .sb-org { display: none; }
.sb-org-back { color: var(--slate); }
.sb-org-name { padding: 2px 10px 0; font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-org .tp-plan { padding: 0 10px; flex-wrap: wrap; row-gap: 6px; }
.sb-org .support-badge { align-self: flex-start; margin-left: 10px; }
/* Collapse control: an icon at the right of the logo row while expanded; the
   muted row above the Library while collapsed. One or the other shows. */
.sb-toggle { color: var(--muted); margin: 4px 0 2px; display: none; }
.sb-collapsed #sidebar .sb-toggle { display: flex; }
.sb-logo-toggle { margin-left: auto; width: 28px; height: 28px; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; border: none; background: none; border-radius: 7px; color: var(--muted); cursor: pointer; padding: 0; }
.sb-logo-toggle:hover { background: var(--white); color: var(--ink); }
.sb-collapsed #sidebar .sb-logo-toggle { display: none; }

/* Who is signed in, at the foot. */
/* The block is the avatar menu's trigger (Profile · Billing · Sign out),
   so it is a <button> reset to look like a row, and its menu opens UPWARD. */
/* Pinned to the foot: it stays in view however long the nav runs. #sidebar in
   the selector because `.tp-dd { position: relative }` comes later and would
   otherwise win. */
#sidebar .sb-who-dd { margin-top: auto; padding: 12px 0 14px; border-top: 1px solid var(--line);
  position: sticky; bottom: 0; background: var(--warm); z-index: 2; }
.sb-who { width: 100%; padding: 6px 10px; border: none; background: none; border-radius: 8px; cursor: pointer;
  font: inherit; text-align: left; display: flex; align-items: center; gap: 10px; }
.sb-who:hover { background: var(--white); }
.sb-who-dd .tp-dd-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.sb-who-av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); }
.sb-who-tx { min-width: 0; overflow: hidden; }
.sb-who-n { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-who-p { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Collapsed: an icon-only rail. Labels, group headers, the org name and plan
   chip hide; every row keeps its native title for a hover hint. */
#app-shell.sb-collapsed { --sidebar-w: 68px; }
.sb-collapsed #sidebar .sidebar-logo-text, .sb-collapsed #sidebar .sidebar-logo-ver,
.sb-collapsed #sidebar .sidebar-link > span:not(.sbi-base):not(.sbi-fill),
.sb-collapsed #sidebar .sbi-base > span, .sb-collapsed #sidebar .sb-grp-row,
.sb-collapsed #sidebar .sb-org-name, .sb-collapsed #sidebar .tp-plan,
.sb-collapsed #sidebar .support-badge, .sb-collapsed #sidebar .sb-who-tx,
.sb-collapsed #sidebar .lib-tile-tx, .sb-collapsed #sidebar .ent-lock-i { display: none; }
.sb-collapsed #sidebar .sidebar-logo, .sb-collapsed #sidebar .sidebar-link,
.sb-collapsed #sidebar .sb-who { justify-content: center; padding-left: 0; padding-right: 0; }
.sb-collapsed #sidebar .sidebar-link { padding-top: 9px; padding-bottom: 9px; }
.sb-collapsed #sidebar .sidebar-link svg { width: 18px; height: 18px; }
.sb-collapsed #sidebar .sb-intel .sbi-base { justify-content: center; }
.sb-collapsed #sidebar .lib-tile { padding: 8px 0; }
.sb-collapsed #sidebar .sidebar-section { padding-top: 8px; }
/* Hidden group headers would leave the rows of a COLLAPSED group stuck shut,
   so in the rail every group shows its rows. */
.sb-collapsed #sidebar .sidebar-section > div[style*="max-height"] { max-height: none !important; }

.iz-sub-right { display: flex; align-items: center; gap: 10px; }

/* ── Login page ── */
#login-page {
  /* One number for the space around the floating card, so the three sides
     cannot drift apart. */
  --login-gap: 24px;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: flex-end;
  position: relative; overflow: hidden;
  background: #1C1C1C;
}
.login-bg {
  position: absolute; inset: 0;
  background-image: url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1600&q=80&auto=format&fit=crop');
  background-size: cover; background-position: center;
  filter: brightness(.55) saturate(.7);
}
.login-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(28,28,28,.85) 0%, rgba(28,28,28,.3) 60%, rgba(28,28,28,.1) 100%);
}
.login-hero {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 55%; display: flex; flex-direction: column;
  justify-content: center; padding: 60px 64px;
  z-index: 1;
}
.login-hero-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 20px;
}
.login-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4vw, 54px);
  color: #F5F2EE; line-height: 1.2; margin-bottom: 20px;
  font-weight: 400;
}
.login-hero-title em { font-style: italic; color: var(--neon-violet); text-shadow: 0 0 20px var(--neon-violet-glow); }
.login-hero-sub {
  font-size: 16px; color: rgba(245,242,238,.65);
  line-height: 1.7; max-width: 400px;
}
.login-hero-dots { display: flex; gap: 8px; margin-top: 40px; }
.login-hero-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); }
.login-hero-dot.active { background: var(--accent-on-dark); width: 20px; border-radius: 3px; }

/* The white panel FLOATS on the background rather than being flush to the edge
   (user decision 2026-08-11) — space above, below and to its left, so the photo
   reads as one continuous image the card is laid on top of.

   ⚠️ Nothing here touches `.login-bg`. It is still `inset: 0` at full size and
   full bleed; only this card moved. `min-height` is `100vh` MINUS the two
   margins, because `#login-page` clips (`overflow: hidden`) and a full 100vh
   plus margins would push the card's own bottom out of view. */
.login-card-wrap {
  position: relative; z-index: 2;
  width: 420px;
  min-height: calc(100vh - var(--login-gap) * 2);
  margin: var(--login-gap);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 40px;
  background: rgba(250,250,248,.97);
  backdrop-filter: blur(20px);
  /* Cast DOWN and out, the way a raised card does — the old shadow pointed
     left because the panel was attached to the right edge and only had one
     side to cast from. */
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}
.login-card { width: 100%; max-width: 340px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
.login-brand-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--neon-yellow), var(--neon-violet));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 20px; color: #1A1A1A;
  box-shadow: 0 0 20px var(--neon-yellow-glow);
  font-weight: 700;
}
.login-brand-name { font-family: var(--font-serif); font-size: 26px; color: var(--ink); letter-spacing: .5px; }
.login-welcome { font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 4px; letter-spacing: -.2px; }
.login-sub { font-size: 14px; color: var(--slate); margin-bottom: 28px; }

/* ── Cards ── */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 2px; letter-spacing: -.1px; }
.card-subtitle { font-size: 13px; color: var(--slate); }

/* ── Stat cards ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 14px; margin-bottom: 28px; }
.stat-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 18px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--neon-yellow), var(--neon-violet)) !important;
  box-shadow: 0 0 10px var(--neon-yellow-glow);
}
.stat-label { font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.stat-value { font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -1.5px; }
.stat-sub { font-size: 12px; color: var(--slate); margin-top: 6px; }
.progress-bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--neon-yellow), var(--neon-violet)); border-radius: 3px; transition: width .5s ease; box-shadow: 0 0 8px var(--neon-yellow-glow); }

/* ── Forms ── */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-bottom: 7px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 11px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15px; background: var(--paper); color: var(--ink);
  transition: all .18s; font-family: var(--font);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.form-textarea { resize: vertical; min-height: 88px; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.required-star { color: var(--terracotta); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500;
  cursor: pointer; border: none;
  transition: all .18s; font-family: var(--font);
  white-space: nowrap; letter-spacing: .1px;
  line-height: 1.4;
  text-decoration: none; /* <a class="btn"> must not underline like a link */
}
.btn-primary {
  background: var(--accent); color: #FFFFFF;
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-d);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--white); color: var(--ink-soft);
  border: 1.5px solid var(--line);
}
.btn-secondary:hover { background: var(--warm); border-color: #D3D7E3; }
.btn-danger {
  background: var(--danger-l); color: var(--danger);
  border: 1.5px solid #E8D0D0;
}
.btn-danger:hover { background: #EDD8D8; }
.btn-terra {
  background: var(--neon-violet-d); color: white;
  box-shadow: 0 0 16px var(--neon-violet-glow), 0 2px 8px rgba(0,0,0,.15);
}
.btn-terra:hover { background: var(--neon-violet); transform: translateY(-1px); box-shadow: 0 0 28px var(--neon-violet-glow); }
.btn-violet {
  background: var(--neon-violet-d); color: white;
  box-shadow: 0 0 16px var(--neon-violet-glow), 0 2px 8px rgba(0,0,0,.15);
}
.btn-violet:hover { transform: translateY(-1px); box-shadow: 0 0 28px var(--neon-violet-glow); background: var(--neon-violet); }
.btn-sm { padding: 6px 16px; font-size: 13px; }
.btn-xs { padding: 4px 12px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.w-full { width: 100%; justify-content: center; }

/* ── Badges ── */
/* One label-pill recipe everywhere (the Library Status pill's): 11px/700,
   .04em tracking, 3px 8px padding, 4px radius, tinted bg + coloured text,
   NO borders — a bordered pill next to a borderless one reads as two systems. */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  text-transform: capitalize;
}
.badge-green  { background: #e8f5e9; color: #2e7d32; }
.badge-amber  { background: var(--warning-l); color: #8C6A20; }
.badge-red    { background: var(--danger-l);  color: #9A4A4A; }
.badge-sage   { background: var(--sage-ll);   color: var(--sage-d); }
.badge-teal   { background: var(--dust-l);    color: #4A6A60; }
.badge-grey   { background: var(--warm);      color: var(--slate); }
.badge-terra  { background: var(--terra-l);   color: var(--terra-d); }
.badge-stone  { background: var(--stone-l);   color: var(--stone); }

/* ── Tables ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  background: var(--warm); padding: 11px 16px;
  text-align: left; font-size: 11px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; color: var(--muted);
  border-bottom: 1.5px solid var(--line);
}
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tr:hover td { background: var(--paper); }
.data-table tr:last-child td { border-bottom: none; }
code {
  font-family: var(--mono); font-size: 12px;
  background: var(--warm); padding: 2px 7px;
  border-radius: 6px; border: 1px solid var(--line);
  color: var(--sage-d); font-weight: 500;
}

/* ── Wizard ── */
.wizard-header {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 28px;
  margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.wizard-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.wizard-step { flex: 1; height: 5px; background: var(--line); border-radius: 3px; transition: all .35s; }
.wizard-step.done  { background: linear-gradient(90deg, var(--neon-yellow), var(--neon-violet)); }
.wizard-step.active { background: var(--neon-yellow); box-shadow: 0 0 14px var(--neon-yellow-glow); }
.wizard-nav { display: flex; align-items: center; justify-content: space-between; }
.section-icon {
  width: 40px; height: 40px;
  background: var(--sage-ll);
  color: var(--sage-d); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.wizard-section-title { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.wizard-title-text { font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.wizard-desc { font-size: 13px; color: var(--slate); margin-top: 3px; }

/* ── Bool toggle ── */
.bool-toggle { display: flex; margin-top: 6px; }
.bool-option {
  padding: 10px 24px; font-size: 14px; font-weight: 500;
  cursor: pointer; border: 1.5px solid var(--line);
  transition: all .18s; background: var(--white); color: var(--slate);
}
.bool-option:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.bool-option:last-child  { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; margin-left: -1.5px; }
.bool-option.selected-yes { background: rgba(232,255,71,.1); border-color: var(--neon-yellow-d); color: #5A5A00; font-weight: 600; box-shadow: 0 0 10px var(--neon-yellow-glow); }
.bool-option.selected-no  { background: var(--danger-l); border-color: var(--danger); color: #9A4A4A; font-weight: 600; }

/* ── Multiselect ── */
.multiselect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 8px; }
.multiselect-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all .18s; font-size: 13px; font-weight: 400;
  background: var(--white); color: var(--ink-soft);
}
.multiselect-item:hover { border-color: var(--sage); background: var(--sage-ll); }
.multiselect-item.selected { border-color: var(--neon-violet-d); background: rgba(192,132,252,.08); color: var(--neon-violet-d); font-weight: 500; box-shadow: 0 0 8px var(--neon-violet-glow); }
.multiselect-item input { accent-color: var(--sage); }

/* ── SoA filters ── */
.soa-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center; }
.filter-chip {
  padding: 6px 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-pill); font-size: 13px; font-weight: 500;
  cursor: pointer; background: var(--white); color: var(--slate); transition: all .18s;
}
.filter-chip:hover { border-color: var(--sage); color: var(--sage-d); }
.filter-chip.active {
  border-color: var(--neon-violet-d);
  background: rgba(192,132,252,.1);
  color: var(--neon-violet-d);
  font-weight: 600;
  box-shadow: 0 0 10px var(--neon-violet-glow);
}
.confidence-high   { color: var(--sage-d);   font-weight: 600; }
.confidence-medium { color: #8C6A20; font-weight: 600; }
.confidence-low    { color: var(--muted); }

/* ── Doc library theme tabs ── */
/* Documents toolbar: search bar first, theme tabs beside it. */
.doc-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.doc-toolbar .doc-type-tabs { margin-bottom: 0; }

/* Segmented theme-tab bar (reference design): one white pill container,
   line icon + label per tab, the active tab a solid yellow pill. */
.doc-type-tabs {
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 5px; margin-bottom: 22px;
}
.doc-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  color: var(--slate); background: transparent; border: 0;
  border-radius: var(--radius-pill); cursor: pointer;
  transition: background .15s, color .15s;
}
.doc-tab svg { display: block; }
.doc-tab:hover { background: var(--paper); color: var(--ink); }
.doc-tab.active, .doc-tab.active:hover { background: #F6D44F; color: var(--ink); }

/* ── Page header ── */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.page-title { font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px; color: var(--ink); }
.page-subtitle { font-size: 14px; color: var(--slate); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Alerts ── */
.alert { padding: 14px 18px; border-radius: var(--radius-sm); border-left: 4px solid; margin-bottom: 18px; font-size: 14px; line-height: 1.6; }
.alert-sage   { background: var(--sage-ll);  border-color: var(--sage);        color: var(--sage-d); }
.alert-amber  { background: var(--warning-l);border-color: var(--warning);     color: #78550A; }
.alert-red    { background: var(--danger-l); border-color: var(--danger);      color: #7A3030; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 64px 24px; color: var(--slate); }
.empty-icon  { font-size: 52px; margin-bottom: 18px; opacity: .7; }
/* An access-restricted empty state's glyph is `lockIcon()`, an SVG, not an
   emoji — and the 52px font-size above still sets this div's line box, which
   would wrap the icon in ~60px of height. `display:block` takes the svg out of
   that line box entirely. */
.empty-icon svg { display: block; margin: 0 auto; }
.empty-title { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }

/* ── Modal ── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(44,44,44,.45);
  backdrop-filter: blur(6px);
  z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--white); border-radius: var(--radius-lg);
  width: 100%; max-width: 560px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-soft);
}
.modal-header { padding: 24px 28px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.modal-body  { padding: 24px 28px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 18px 28px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 8px; display: flex; align-items: center; font-size: 18px; transition: all .15s; }
.modal-close:hover { background: var(--warm); color: var(--slate); }

/* ── Misc utilities ── */
.text-muted { color: var(--slate); }
.text-sm    { font-size: 13px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 18px; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: 8px; }

/* ── Org cards ── */
.org-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  cursor: pointer; transition: all .2s;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.org-card::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--neon-yellow), var(--neon-violet));
  opacity: 0; transition: opacity .2s;
  box-shadow: 0 0 10px var(--neon-yellow-glow);
}
.org-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #D3D7E3; }
.org-card:hover::before { opacity: 1; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  padding: 13px 20px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  max-width: 360px; line-height: 1.5;
  border: 1px solid var(--line);
  animation: toastIn .25s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section group headers in doc library ── */
.group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer; border: 1px solid var(--line);
  background: var(--warm); transition: background .15s;
}
.group-header:hover { background: #EDE9E3; }
/* No `overflow: hidden` here — it clipped the avatar hover cards. The bottom
   corners are rounded on the last row's cells instead, which keeps the same
   look without creating a clipping ancestor. */
.group-table { border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.group-wrap { margin-bottom: 16px; }

/* ── Role cards ── */
.role-category { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.role-primary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--sage-ll); border-radius: var(--radius-sm); margin-bottom: 8px; border: 1px solid var(--sage-l); }
.role-sub { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 6px; margin-left: 22px; }

/* Tighten the shared gutter on smaller screens. Because #topbar and #content
   both read --gutter, they stay aligned at every width. */
@media (max-width: 1100px) { :root { --gutter: 20px; } }

@media (max-width: 768px) {
  :root { --gutter: 14px; }
  #sidebar { width: 0; overflow: hidden; }
  #main { margin-left: 0; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .login-hero { display: none; }
  /* On a phone the card IS the page — the floating inset would leave four
     hairlines of photo around a full-width panel, which reads as a rendering
     fault rather than as a card. */
  .login-card-wrap { width: 100%; margin: 0; min-height: 100vh; border-radius: 0; }
}

/* ── Neon selection & scrollbar ── */
::selection { background: rgba(232,255,71,.25); color: var(--ink); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--warm); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-violet); box-shadow: 0 0 8px var(--neon-violet-glow); }

/* ── Neon glow on active wizard step number ── */
.section-icon {
  background: rgba(232,255,71,.12) !important;
  color: #4A4A00 !important;
  border: 1.5px solid rgba(232,255,71,.4);
  box-shadow: 0 0 12px rgba(232,255,71,.2);
}

/* The primary button used to pulse a glow permanently (`animation: neonPulse`).
   That WAS the shadow — removing box-shadow alone would not have stopped it. */

/* ── Neon active tab indicator dot ── */
.tab-neon-dot { display: none; }

/* ── Loading screen neon icon ── */
#loading .logo-glow {
  box-shadow: 0 0 24px var(--neon-yellow-glow), 0 0 48px rgba(192,132,252,.2);
}

/* ── Document Library table ───────────────────────────────────────────────── */
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600; padding: 8px 12px;
  border-bottom: 1px solid var(--line); background: var(--warm); white-space: nowrap;
}
.doc-table td { padding: 15px 12px; vertical-align: middle; }
.doc-table .dt-key    { width: 84px; }
.doc-table .dt-status { width: 132px; }
.doc-table .dt-ver    { width: 108px; white-space: nowrap; }
.doc-table td.dt-ver  { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.doc-table .dt-date   { width: 104px; white-space: nowrap; }
.doc-table td.dt-date { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.doc-table .dt-dec    { width: 126px; }
.doc-table .dt-people { width: 140px; white-space: nowrap; }
.doc-table .dt-act    { width: 108px; white-space: nowrap; text-align: right; }
/* The Documents page stacks ONE TABLE PER GROUP, so its packed columns must
   keep FIXED widths (above) or each table sizes them differently and the
   stacked tables stop lining up with each other. The .tgr width:1% is
   overridden back to the fixed widths; the left alignment and 28px gutter
   stay. */
.doc-table .dt-act { text-align: left; }
/* table-layout:fixed is what actually locks the columns to the header widths —
   under auto layout each table stretches columns to ITS OWN widest cell, so
   four stacked tables drift apart by a few px each. */
.doc-table { table-layout: fixed; width: 100%; }
.doc-table th { overflow: hidden; text-overflow: ellipsis; }
.doc-table .dt-people { width: 170px; }
.doc-table .dt-act    { width: 150px; }
.dt-code  { font-size: 11px; font-weight: 700; color: var(--teal, #0E6E6D); }
.dt-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.dt-sub   { font-size: 11px; color: var(--slate); margin-top: 1px; }
.dt-dash  { color: var(--muted); }
.dt-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; text-transform: capitalize; }
.dt-reviewed { background: #E3F2FD; color: #1565C0; }
.dt-inreview { background: #FFF3E0; color: #E65100; }
.dt-returned { background: var(--blush-l); color: #A0633D; }
.dt-stale { font-size: 11px; color: var(--terra-d); margin-top: 3px; }
/* Decisions column: open decision points and "edited since the last generate"
   are independent markers, so they sit side by side rather than replace each
   other. Inline, not stacked — two chips on one line leave the row height to
   the columns that already set it. */
.dt-dec-marks { display: inline-flex; align-items: center; gap: 6px; }
/* The one badge with a TRANSLUCENT fill — it tints whichever zebra row it lands
   on instead of punching an opaque chip through it. --danger (#C17F7F) at 30%.
   14px glyph + 5px padding = the 24px the amber decision badge measures, so the
   two read as one pair rather than two sizes of chip. */
.dt-regen { background: rgba(193, 127, 127, .30); color: #9A4A4A; padding: 5px 7px; }
.dt-regen svg { width: 14px; height: 14px; display: block; }

/* ── Hover tip ────────────────────────────────────────────────────────────
   The native `title` attribute is not usable for these: the browser holds it
   back about a second, which reads as "hovering does nothing". Add `.dtip`
   plus a data-tip and the tip draws immediately, in the product's own light
   palette rather than the browser's dark default.
   NOTE: .plan-lock and .inc-warn predate this and carry their own copies of
   the same recipe — fold them in here if either is touched again. */
.dtip { position: relative; cursor: help; }
.dtip::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translate(-50%, -3px); z-index: 90;
  width: max-content; max-width: 240px;
  background: var(--white); color: var(--slate);
  border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 6px 18px rgba(24, 32, 56, .10);
  font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: .1px;
  padding: 8px 11px; text-align: left; text-transform: none;
  /* .badge sets white-space:nowrap and the ::after inherits it — without this
     reset the tip runs off as one line and max-width never applies. */
  white-space: normal;
  opacity: 0; visibility: hidden;
  transition: opacity .13s, transform .13s;
  pointer-events: none;
}
.dtip:hover::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Assignment avatars + hover card */
.dt-av-wrap { position: relative; display: inline-block; margin-right: 2px; vertical-align: middle; }
.dt-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--stone); border: 2px solid var(--white); cursor: default;
}
.dt-av-author   { background: #7A9AAE; }
.dt-av-reviewer { background: #B5967A; }
.dt-av-approver { background: #7A9E87; }
.dt-av-empty {
  background: none; border: 1px dashed var(--line); color: var(--muted);
  font-weight: 400; margin-right: 3px;
}
.dt-av-card {
  display: none; position: absolute; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 8px); min-width: 190px; max-width: 260px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.13); padding: 10px 12px; text-align: left; white-space: normal;
}
.dt-av-wrap:hover .dt-av-card { display: block; }
.dt-av-card > span { display: block; }
.dt-av-role { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.dt-av-name { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.dt-av-meta { font-size: 11px; color: var(--slate); margin-top: 2px; word-break: break-all; }
.dt-av-pos  { font-size: 11px; color: var(--sage-d); margin-top: 3px; }

.doc-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-sm); }
.doc-table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius-sm); }

/* ── Group assignment table + person picker ───────────────────────────────── */
.assign-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; overflow: visible; }
.assign-table thead th:first-child { border-top-left-radius: 10px; }
.assign-table thead th:last-child  { border-top-right-radius: 10px; }
.assign-table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.assign-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 10px; }
.assign-table thead th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600; padding: 9px 12px;
  background: var(--warm); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.assign-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.assign-table tbody tr:last-child td { border-bottom: none; }
.assign-table tbody tr:hover { background: var(--paper); }
.assign-table .at-num { text-align: center; width: 60px; font-size: 12px; color: var(--muted); }
.assign-table .at-act { width: 90px; text-align: right; }
.at-hint  { display: block; font-size: 10px; letter-spacing: 0; text-transform: none;
  color: var(--muted); font-weight: 400; margin-top: 2px; }
.at-icon  { font-size: 15px; margin-right: 7px; }
.at-group { font-size: 13px; font-weight: 600; color: var(--ink); }

/* The Assignment page's read-only notice — shown to the CISO, who may see every
   assignment but change none. Same recipe as the document editor's .de-banner
   (which lives in editor.v1.js's injected styles and is not reachable here). */
.asg-ro { display: flex; align-items: center; gap: 9px; background: var(--stone-l);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
.asg-ro svg { flex: 0 0 auto; }

/* "Apply defaults to every group" conflict list — the groups that already name
   someone, so the advisor overrides or skips knowing exactly what is at stake.
   Scrolls rather than growing the modal past the viewport. */
.agc-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden auto; max-height: 260px; }
.agc-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft); }
.agc-row:last-child { border-bottom: none; }
.agc-grp { flex: 0 0 42%; font-size: 13px; font-weight: 600; color: var(--ink); }
.agc-who { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
.agc-chip { font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--slate); }
.agc-none { font-size: 12px; color: var(--muted); }

/* ── Intake gate: the empty state on pages generated from the questionnaire ──
   Centred column under the page header. The illustration caps at 620px so it
   stays an illustration rather than stretching across a wide window. */
.ig-wrap { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 40px 24px 72px; }
/* The negative margin was closing the gap to the heading almost entirely: the
   SVG's viewBox already ends ~40 units below the cards, which at this scale is
   only ~20px, and -6 took it to ~15. A positive margin now sits under that. */
.ig-art { width: 100%; max-width: 620px; height: auto; display: block; margin-bottom: 22px; }
.ig-title { font-size: 20px; font-weight: 700; color: var(--ink); }
.ig-body { max-width: 520px; margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--slate); }
.ig-cta { margin-top: 20px; }
.ig-note { margin: 18px 0 0; font-size: 13px; color: var(--muted); }

/* A required intake question that blocked Complete Intake. Every control type
   the wizard renders gets the red edge — text, number, select, textarea, the
   Yes/No toggle and the multiselect chips — because "which field" has to be
   obvious on a section of twenty questions. */
.iz-miss > .form-label { color: var(--danger); }
.iz-miss .form-input,
.iz-miss .form-select,
.iz-miss textarea.form-input { border-color: var(--danger); }
.iz-miss .form-input:focus,
.iz-miss .form-select:focus { box-shadow: 0 0 0 3px var(--danger-l); }
.iz-miss .bool-toggle,
.iz-miss .multiselect-grid { border: 1px solid var(--danger); border-radius: 9px; padding: 6px; }
.iz-miss::after {
  content: 'This answer is required'; display: block;
  margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--danger);
}

/* ── Activity timeline ──────────────────────────────────────────────────────
   The ONE timeline: a rail of icon nodes, one sentence per event, an optional
   card of detail beneath. Shared by the NC and incident detail pages, which
   each had their own before and agreed on nothing. */
.tml { display: flex; flex-direction: column; }
/* The rail is drawn per row rather than as one line behind the list, so the
   LAST row simply omits it — a line running past the final node reads as a
   list that failed to load the rest. It is a DOTTED border rather than a solid
   background, which also keeps it hairline-crisp at any zoom. */
.tml-row { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 30px; }
.tml-row:last-child { padding-bottom: 0; }
.tml-row:not(:last-child)::before {
  content: ''; position: absolute; left: 19px; top: 44px; bottom: -4px;
  border-left: 2px dotted var(--line);
}
.tml-node {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line); color: var(--slate);
  display: flex; align-items: center; justify-content: center;
}
.tml-node svg { width: 18px; height: 18px; }
/* 9px lines the first line of text up with the middle of the 40px node. */
.tml-main { min-width: 0; padding-top: 9px; }
.tml-tx { font-size: 14px; color: var(--slate); line-height: 1.5; }
.tml-tx b { color: var(--ink); font-weight: 600; }
/* Its own line under the sentence, not trailing it. */
.tml-when { font-size: 12px; color: var(--muted); margin-top: 3px; }
/* The detail card. `p` because callers pass escaped HTML, not a text node. */
.tml-body {
  margin-top: 9px; padding: 11px 14px; border-radius: 10px;
  background: var(--paper); font-size: 13px; color: var(--ink-soft); line-height: 1.55;
}
.tml-body p { margin: 0; }
/* Attached files: a compact chip per file, opening in a new tab. The badge is
   the app's standard file-type badge, so a PDF looks the same here as in the
   evidence panels. */
.tml-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.tml-file {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--white); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.tml-file:hover { border-color: var(--accent); box-shadow: var(--shadow-xs); }
/* The shared badge is a 34×40 document tile sized for a full-width card; in a
   chip it has to come down to the row's height. Colours are inherited from
   `.uz-badge.<kind>`, so a PDF stays the same red everywhere. */
.tml-file .qv-ev-badge { width: 24px; height: 28px; border-radius: 4px; font-size: 8px; }
.tml-file-n {
  font-size: 12.5px; color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Top-of-page reminder banner ────────────────────────────────────────────
   Lives in the SHELL between the topbar and #content, so it sits above every
   page. The warning tone of the toast set: soft orange fill, a white icon
   chip, bold title over a plain second line, then the action and the ✕. */
.tb-remind {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px; padding: 12px 14px;
  background: #FDF0E3; border-radius: 12px;
}
.tb-remind-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: var(--white); color: #C2691B;
  display: flex; align-items: center; justify-content: center;
}
.tb-remind-ic svg { width: 19px; height: 19px; }
/* min-width:0 lets the second line ellipsise instead of pushing the action
   button and the ✕ off the row on a narrow window. */
.tb-remind-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-remind-tx b { font-size: 14px; font-weight: 700; color: #7A4A12; }
.tb-remind-tx span {
  font-size: 13px; color: #96602A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-remind .btn { flex: 0 0 auto; }
.tb-remind-x {
  flex: 0 0 auto; width: 30px; height: 30px; border: none; border-radius: 8px;
  background: none; color: #96602A; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.tb-remind-x:hover { background: rgba(194,105,27,.14); }

/* ── Stepped modal: progress bar + cross-sliding panels ─────────────────────
   The New Audit Programme wizard. Motion matches the guide deck (.rgw-*)
   because it IS the same motion — `stageSwap()` in app.v6.js drives both — but
   this is its own class family: the deck is a fixed-height walk-through with a
   banner, this is a form whose steps are wildly different heights. Sharing the
   classes would make a tweak to one silently restyle the other. Keep the
   shared values (.34s, the 38px travel) in step if either moves. */
.stg-steps { display: flex; gap: 6px; margin-bottom: 6px; }
.stg-step { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.stg-step-f { display: block; width: 0; height: 100%; border-radius: 2px;
  background: var(--accent); transition: width .34s cubic-bezier(.4, 0, .2, 1); }
.stg-count { font-size: 11px; color: var(--muted); margin-bottom: 18px; }
/* Two .stg-slide layers coexist mid-transition, so they are absolutely
   positioned and the stage clips them. The stage's height is set from the
   incoming slide and transitions — that is what makes the modal grow and
   shrink with the step instead of jumping. Left/right/top only, never `inset`:
   the slide has to keep its NATURAL height for that measurement to mean
   anything. */
.stg-stage { position: relative; overflow: hidden; transition: height .34s cubic-bezier(.4, 0, .2, 1); }
.stg-slide {
  position: absolute; left: 0; right: 0; top: 0;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
}
.stg-slide.from-right { transform: translateX(38px); opacity: 0; }
.stg-slide.from-left  { transform: translateX(-38px); opacity: 0; }
.stg-slide.to-left    { transform: translateX(-38px); opacity: 0; }
.stg-slide.to-right   { transform: translateX(38px); opacity: 0; }
/* A departing slide is scenery — it must not swallow clicks meant for the one
   arriving underneath it. */
.stg-slide.leaving    { pointer-events: none; }
/* The last field's margin would otherwise be clipped by the stage. */
.stg-slide > .form-group:last-child { margin-bottom: 0; }

.pp { position: relative; display: inline-block; }
.pp-trigger {
  display: flex; align-items: center; gap: 7px; background: none;
  border: 1px solid transparent; border-radius: 8px; padding: 3px 7px 3px 3px;
  cursor: pointer; font-family: inherit; min-width: 46px;
}
.pp-trigger:hover { background: var(--warm); border-color: var(--line); }
.pp.open .pp-trigger { background: var(--white); border-color: var(--sage); }
.pp-av { width: 30px; height: 30px; font-size: 11px; }
.pp-ph { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pp-caret { font-size: 10px; color: var(--muted); }
/* Details on hover of a filled picker */
.pp-card {
  display: none; position: absolute; z-index: 70; left: 0; bottom: calc(100% + 8px);
  min-width: 190px; max-width: 250px; background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.13);
  padding: 10px 12px; text-align: left;
}
.pp-card > span { display: block; }
.pp:not(.open) .pp-trigger:hover ~ .pp-card { display: block; }
/* Dropdown */
.pp-menu {
  display: none; position: absolute; z-index: 80; left: 0; top: calc(100% + 5px);
  min-width: 240px; max-height: 300px; overflow-y: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.15); padding: 5px;
}
.pp-menu.up { top: auto; bottom: calc(100% + 5px); }
.pp.open .pp-menu { display: block; }
.pp-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 8px; padding: 6px 8px;
  cursor: pointer; font-family: inherit;
}
.pp-opt:hover { background: var(--warm); }
.pp-opt.on { background: var(--sage-ll); }
.pp-opt-txt { display: flex; flex-direction: column; min-width: 0; }
.pp-opt-name { font-size: 13px; color: var(--ink); font-weight: 500; line-height: 1.35; }
.pp-opt-role { font-size: 11px; color: var(--slate); line-height: 1.35; }
.pp-opt-none .pp-opt-name { color: var(--muted); font-weight: 400; }
.lib-ver { font-size: 14px; font-weight: 600; color: var(--sage-d); font-variant-numeric: tabular-nums; }
.lib-rev { font-size: 11px; color: var(--terra-d); margin-top: 2px; }
.pp-note { font-size: 11px; color: var(--muted); padding: 7px 10px 3px; line-height: 1.45; border-top: 1px solid var(--line-soft); margin-top: 4px; }
/* A saved assignment row is inert until the user confirms an edit. */
.pp.pp-locked .pp-trigger { cursor: default; }
.pp.pp-locked .pp-trigger:hover { background: none; border-color: transparent; }
.pp.pp-locked .pp-caret { display: none; }
.pp.pp-locked .pp-ph { color: var(--muted); }
/* Library table: match the Documents table's type scale rather than inheriting
   the 15px body size, and give the avatars room. */
.assign-table td.lib-date   { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.assign-table th.lib-date   { width: 116px; }
.assign-table .lib-people   { width: 150px; white-space: nowrap; }

/* ── Statement of Applicability table ─────────────────────────────────────── */
/* Flat: no shadow, 10px radius. No overflow:hidden — it would clip the avatar
   hover cards, so the bottom corners are rounded on the last row instead. */
.soa-table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.soa-table-wrap .data-table { border-collapse: separate; border-spacing: 0; width: 100%; box-shadow: none; }
/* SoA-scoped only — the badge class is shared app-wide, so the size and the
   one-line rule live behind the wrap, not on .badge itself. A status pill that
   wraps mid-phrase ("not / started") reads as two states. */
.soa-table-wrap .badge { white-space: nowrap; }   /* 11px from .badge — the 13px era is over */
.soa-table-wrap .data-table td { white-space: nowrap; }
/* the two prose columns are the ones allowed to wrap */
.soa-table-wrap .data-table td:nth-child(2),
.soa-table-wrap .data-table td:nth-child(3) { white-space: normal; }   /* Title + Justification (col 3 since the reorder) */
.soa-table-wrap .data-table thead th:first-child { border-top-left-radius: 10px; }
.soa-table-wrap .data-table thead th:last-child  { border-top-right-radius: 10px; }
.soa-table-wrap .data-table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.soa-table-wrap .data-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 10px; }
.soa-table-wrap .data-table tbody tr:last-child td { border-bottom: none; }

/* ── Forms & Evidence tables ──────────────────────────────────────────────── */
.assign-table .fe-id     { width: 84px; }
.assign-table .fe-act    { width: 170px; text-align: right; white-space: nowrap; }
.assign-table .fe-impl   { width: 110px; }
.assign-table .fe-evid   { width: 160px; white-space: nowrap; }
.assign-table .fe-period { width: 150px; }
.assign-table td.fe-period { font-size: 13px; color: var(--slate); }
.fe-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger, #C17F7F); margin-right: 7px; vertical-align: middle; }
.fe-dot.on { background: var(--sage); }
.fe-evid-label { font-size: 13px; font-weight: 600; color: var(--danger, #C17F7F); }
.fe-evid-label.on { color: var(--sage-d); }
/* Forms and Registers are two SEPARATE tables stacked on one page, so they
   need fixed widths to line up with each other — under auto layout each sizes
   its columns to its own widest cell and they drift apart (the same reason the
   Documents page is `table-layout: fixed`). Scoped to `.fe-list` so the
   evidence table on the detail page, which has different columns, is
   untouched. */
.fe-list { table-layout: fixed; width: 100%; }
.fe-list th { overflow: hidden; text-overflow: ellipsis; }
.fe-list .tid         { width: 92px; }
.fe-list .fe-c-status { width: 150px; }
.fe-list .fe-c-impl   { width: 132px; }   /* 28+12 padding + "IMPLEMENTER" at 11px tracked */
.fe-list .fe-c-evid   { width: 168px; }

/* The whole row opens the form's evidence page — the Action column is gone. */
.fe-table tbody tr.click { cursor: pointer; }
.fe-table tbody tr.click:hover { background: var(--paper); }
.fe-nogen { color: var(--terra-d); }
.dt-av-implementer { background: #8C8278; }

/* ── Intake wizard ────────────────────────────────────────────────────────── */
/* Full-bleed sticky sub-header, same pattern as the document editor: negative
   gutters cancel #content's padding so the divider spans the page. */
.iz-subheader {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin: calc(var(--gutter) * -1) calc(var(--gutter) * -1) 18px;
  padding: 12px var(--gutter);
  background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 9; flex-wrap: wrap;
}
.iz-title    { font-size: 16px; font-weight: 700; color: var(--ink); }
.iz-subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }
.iz-sub-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.iz-grid { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .iz-grid { grid-template-columns: 1fr; } }

.iz-nav { position: sticky; top: 64px; max-height: calc(100vh - 86px); overflow-y: auto; }
.iz-nav-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 10px; }
.iz-nav-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.iz-nav-count { font-size: 11px; color: var(--muted); }
.iz-sec {
  display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 7px; cursor: pointer; font-family: inherit;
}
.iz-sec:hover { border-color: var(--sage); background: var(--sage-ll); }
.iz-sec.on { border-color: var(--ink); background: var(--white); box-shadow: var(--shadow-xs); }
.iz-sec-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.iz-sec-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: var(--warm); color: var(--slate);
}
.iz-sec.on .iz-sec-num   { background: var(--ink); color: #fff; }
.iz-sec.done .iz-sec-num { background: var(--sage); color: #fff; }
.iz-sec-name { font-size: 13px; color: var(--ink-soft); font-weight: 500; line-height: 1.35; }
.iz-sec.on .iz-sec-name { font-weight: 600; color: var(--ink); }
.iz-sec-meta { font-size: 11px; color: var(--muted); }
.iz-bar { display: block; height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.iz-bar-fill { display: block; height: 100%; background: var(--sage); border-radius: 3px; transition: width .25s; }
.iz-card { padding: 22px 24px; }
.iz-sec-progress { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; }
.iz-sec-progress .iz-bar { flex: 1; }
.iz-sec-progress-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
/* The person picker inside a modal needs its menu above the modal surface. */
.modal .pp-menu { z-index: 200; }
.modal .pp-trigger { border-color: var(--line); }
/* A modal containing a person picker must not clip its dropdown. */
.modal.modal-has-picker { overflow: visible; }
.modal.modal-has-picker .modal-body { overflow: visible; }
/* Picker trigger with the person's name shown (modals, where there is room). */
.pp-name { display: flex; flex-direction: column; line-height: 1.25; text-align: left; min-width: 0; }
.pp-name-role { font-size: 11px; color: var(--slate); font-weight: 400; }
.pp-trigger .pp-name { font-size: 13px; color: var(--ink); font-weight: 500; }

/* ── My Tasks — Kanban board ──────────────────────────────────────────────── */
/* The page itself does not scroll on desktop; each column scrolls internally.
   Reference design: column head is pie-progress icon + name + plain count;
   cards are ref row · icon + bold title · outlined fact chips · tick-bar
   status pills with an optional clock chip bottom-right. */
.kb-board {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  height: calc(100vh - 30px - var(--gutter) * 2 - 92px); align-items: stretch;
}
.kb-col {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
}
/* Stage-tinted boards (reference): Review lavender, Approval blue, Completed green. */
.kb-review    { background: #F2EDFB; border-color: #E5DCF5; }
.kb-approval  { background: #E7F2FB; border-color: #D6E7F5; }
.kb-completed { background: #E7F4EC; border-color: #D5EADE; }
.kb-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px 11px; }
.kb-pie   { flex: none; display: block; color: var(--ink); }
.kb-name  { font-size: 14px; font-weight: 700; color: var(--ink); }
.kb-count { font-size: 13px; font-weight: 600; color: var(--muted); }
.kb-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.kb-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 14px 4px; text-align: center; }
.kb-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px; transition: border-color .15s, box-shadow .15s;
}
.kb-card.click { cursor: pointer; }
.kb-card.click:hover { border-color: var(--accent); box-shadow: var(--shadow-xs); }
.kb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.kb-ref {
  font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-av {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--accent-d);
  background: rgba(0, 126, 101, .11);
}
.kb-title-row { display: flex; align-items: flex-start; gap: 7px; }
.kb-ticon { flex: none; color: var(--slate); margin-top: 1px; }
.kb-ticon svg { display: block; }
.kb-card-title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.4; min-width: 0; }
.kb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.kb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 7px; padding: 2px 8px;
  font-size: 11px; font-weight: 600; color: var(--slate); background: var(--white);
}
/* The whole footer wraps: when pills and the clock chip cannot share the
   line, the chip drops to its own row instead of clipping a pill. */
.kb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 9px; }
.kb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-foot .kb-time { margin-left: auto; }
/* Tick-bar pill: tinted background, coloured text, solid bar on the left. */
.kb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 6px; padding: 3px 8px 3px 6px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.kb-pill::before { content: ''; width: 3px; height: 12px; border-radius: 2px; background: currentColor; flex: none; }
.kb-pill.t-green { background: #E5F4EC; color: #1F8A5D; }
.kb-pill.t-red   { background: #FCE9E9; color: #C4453C; }
.kb-pill.t-amber { background: #FCF3DF; color: #A97617; }
.kb-pill.t-blue  { background: #E7EFFA; color: #3D6BB3; }
.kb-pill.t-grey  { background: var(--warm); color: var(--slate); }
.kb-time {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  border: 1px solid var(--line); border-radius: 7px; padding: 2px 8px;
  font-size: 11px; font-weight: 600; color: var(--slate); background: var(--white);
}
.kb-time svg { display: block; }
.kb-completed .kb-card-title { color: var(--slate); }

@media (max-width: 1100px) {
  .kb-board { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .kb-list { max-height: 46vh; }
}
@media (max-width: 640px) {
  .kb-board { grid-template-columns: 1fr; height: auto; }
}

/* ── Organisation Settings — inner settings menu · section content ───────────
   The menu follows the mobile-settings reference: each group is a white
   rounded card of rows (icon · label · chevron) under a small group label. */
.ops-grid { display: grid; grid-template-columns: 264px minmax(0,1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .ops-grid { grid-template-columns: 1fr; } }
.ops-menu { position: sticky; top: 16px; }
.ops-group {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 14px 12px 6px;
}
.ops-menu .ops-group:first-child { margin-top: 4px; }
.ops-menu-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.ops-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 13px 14px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.ops-item:last-child { border-bottom: 0; }
.ops-item svg { flex: none; color: var(--slate); }
.ops-item .ops-chev { margin-left: auto; color: var(--muted); font-size: 14px; line-height: 1; }
.ops-item:hover { background: var(--paper); }
.ops-item.on { background: rgba(0, 126, 101, .1); color: var(--accent-d); font-weight: 600; }
.ops-item.on svg, .ops-item.on .ops-chev { color: var(--accent-d); }
.ops-body { padding: 22px 26px; }
.ops-h { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.ops-sub { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.ops-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.ops-row:last-of-type { border-bottom: 0; }
.ops-row-l { min-width: 0; }
.ops-row-t { font-size: 14px; font-weight: 600; color: var(--ink); }
/* 14 / 13 — the settings list reads as prose, not as form chrome. */
.ops-row-d { font-size: 13px; color: var(--muted); margin-top: 3px; max-width: 460px; line-height: 1.55; }
.ops-ctrl { flex: none; display: flex; align-items: flex-start; gap: 8px; max-width: 55%; }
.ops-foot { display: flex; justify-content: flex-end; padding-top: 16px; }
@media (max-width: 900px) {
  .ops-row { flex-direction: column; }
  .ops-ctrl { max-width: none; }
}

/* ── MR Agenda tab — editor-style: outline rail · item content · attendance ── */
.mra-grid { display: grid; grid-template-columns: 240px minmax(0,1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .mra-grid { grid-template-columns: 1fr; } }
.mra-rail { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; }
.mra-rail-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 2px 10px 8px; }
.mra-item {
  display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer;
  font-size: 13px; color: var(--ink); line-height: 1.4;
}
.mra-item:hover { background: var(--paper); }
.mra-item.on { background: rgba(0, 126, 101, .11); color: var(--accent-d); font-weight: 600; }
.mra-item-n { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 2px; min-width: 16px; }
.mra-item.on .mra-item-n { color: var(--accent-d); }
.mra-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.mra-lab { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.mra-field {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); font-size: 14px; line-height: 1.6; color: var(--ink);
  padding: 10px 12px; resize: vertical; min-height: 74px;
}
.mra-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 126, 101, .12); }
.mra-box { background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.mra-box-h {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.mra-box-b { padding: 8px 14px 12px; }
/* Board-style action table (reference design): grid lines, full-cell status.
   The wrapper carries the rounded border; the cells draw only the INNER grid
   lines, or the outer edge would double against the wrapper's own border. */
.mra-acttbl-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.mra-acttbl { width: 100%; border-collapse: collapse; }
.mra-acttbl th {
  font-size: 11px; font-weight: 700; color: var(--muted); background: var(--paper);
  border: 1px solid var(--line); padding: 7px 10px; text-align: center;
}
.mra-acttbl th:first-child { text-align: left; }
.mra-acttbl td { border: 1px solid var(--line); padding: 8px 10px; font-size: 13px; color: var(--ink); }
.mra-acttbl th { border-top: 0; }
.mra-acttbl th:first-child, .mra-acttbl td:first-child { border-left: 0; }
.mra-acttbl th:last-child, .mra-acttbl td:last-child { border-right: 0; }
.mra-acttbl tr:last-child td { border-bottom: 0; }
.mra-at-own { text-align: center; width: 120px; }
/* Status is the system's standard tinted pill (mrActionStatusPill) — the old
   full-cell colour block (.mra-at-st) was retired for the house recipe. */
.mra-at-due { width: 108px; text-align: center; font-size: 12px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mra-at-warn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-right: 6px; border: 1.5px solid #C4453C; border-radius: 50%;
  color: #C4453C; font-size: 10px; font-weight: 800; line-height: 1;
}

/* Agenda-tab toolbar box: lifecycle status LEFT, editor-style btn-sm buttons
   RIGHT (identical classes to the document editor's header). */
.mra-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.mra-toolbar .btn { border-radius: 10px; }
.mra-toolbar-l { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.mra-toolbar-r { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mra-tb-warn {
  font-size: 12px; color: #c62828; font-weight: 700; padding: 6px 10px;
  background: #ffebee; border: 1px solid #ef9a9a; border-radius: 6px;
}
.mra-tb-info { font-size: 12px; color: #1565c0; font-weight: 600; padding: 6px 10px; background: #e3f2fd; border-radius: 6px; }
.mra-tb-done { font-size: 12px; color: #2e7d32; font-weight: 700; }

/* FRM-15 Download ▾ menu in the MR sub-header. */
.mr-dl-dd {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 6px; min-width: 160px;
}
.mr-dl-it {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-radius: 7px; padding: 8px 10px; font-size: 13px; font-weight: 500;
  color: var(--ink); cursor: pointer;
}
.mr-dl-it:hover { background: var(--paper); }

/* The `.mr-rep-*` family is GONE (2026-08-10). The Overview's FRM-15 card was
   its own copy of "a PDF badge, a name and a status"; it now wears the audit
   Plan tab's Issued-reports recipe (`.pl-scope-sec` + `.pl-rep` + `.qv-ev-card`)
   instead, so one card design covers both. Don't reintroduce a second one — a
   management review and an internal audit each end in one PDF that Top
   Management signs, and drawing that two ways is how they drift apart. */

/* Action List page: the MR column links to its meeting; done rows strike out. */
.mra-al-mr {
  background: none; border: 0; padding: 0; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--accent-d); cursor: pointer; text-align: left;
}
.mra-al-mr:hover { text-decoration: underline; }
.mra-al-done { text-decoration: line-through; color: var(--muted); }

/* The add row lives INSIDE the table, aligned to its columns. */
.mra-at-addrow td { background: var(--paper); padding: 4px 6px; }
.mra-at-addrow:focus-within td { background: var(--white); }
.mra-at-inp, .mra-at-sel, .mra-at-datein {
  width: 100%; box-sizing: border-box; border: 0; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--ink); padding: 6px; outline: none;
}
.mra-at-inp::placeholder { color: var(--muted); }
.mra-at-sel { cursor: pointer; }
.mra-at-datein { font-size: 12px; color: var(--ink-soft); }
.mra-att { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.mra-att-n { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.mra-att-r { display: block; font-size: 11px; color: var(--muted); }
.mra-att-st { margin-left: auto; flex: none; font-size: 13px; font-weight: 700; }

/* ── Org Chart ─────────────────────────────────────────────────────────────
   Boxes are a fixed size on purpose: a chart where the box grows with the
   name length reads as a hierarchy of importance rather than of reporting. */
.oc-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px; margin-bottom: 28px;
}
.oc-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.oc-card-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.oc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px;
}
.oc-head-mem { margin-top: 28px; }
.oc-head-title {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
/* The plan's team allowance, beside the member count. A COUNT, so it takes the
   round pill; it turns amber at the cap, where it stops being a fact and
   becomes the reason the Add Member button is locked. */
.oc-quota {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--slate); background: var(--paper);
  border-radius: 999px; padding: 3px 10px;
}
.oc-quota.full { background: var(--warning-l); color: #8C6A20; }
.oc-empty { color: var(--muted); font-size: 13px; padding: 18px 0; }
.oc-tip { font-size: 12px; color: var(--muted); margin-top: 12px; font-style: italic; }

.oc-chart { overflow-x: auto; padding: 4px 2px 8px; }
.oc-tier { display: flex; align-items: flex-start; gap: 16px; }
.oc-tier-label {
  flex: 0 0 130px; padding-top: 26px; font-size: 11px; font-weight: 600;
  color: var(--muted); letter-spacing: .04em;
}
/* nowrap: the chart scrolls horizontally instead of wrapping, because a wrapped
   row breaks the first-child/last-child geometry of the sibling bracket. */
.oc-row {
  flex: 1; display: flex; justify-content: center; align-items: flex-start;
  gap: 26px; flex-wrap: nowrap;
}
/* Trunk between tiers. The 146px spacer skips the tier-label column so the
   line drops through the middle of the boxes, not through the label. */
.oc-conn { display: flex; }
.oc-conn::before { content: ''; flex: 0 0 146px; }
.oc-conn::after {
  content: ''; flex: 1; height: 22px;
  background: linear-gradient(var(--line), var(--line)) center / 2px 100% no-repeat;
}
.oc-conn-sm { display: block; height: 16px;
  background: linear-gradient(var(--line), var(--line)) center / 2px 100% no-repeat; }

/* Sibling bracket: each box drops a stem, and the halves of the horizontal bar
   join up between neighbours. The outer halves are trimmed on the end boxes.
   The 20px of room belongs to the ROW, and the stem is drawn at a negative
   offset above the box — putting it in the box's own padding drew the line
   across the box background and over its top border. */
.oc-row.oc-linked, .oc-subrow { padding-top: 20px; }
.oc-row.oc-linked > *, .oc-subrow > * { position: relative; }
.oc-row.oc-linked > *::before, .oc-subrow > *::before {
  content: ''; position: absolute; top: -20px; left: 50%; margin-left: -1px;
  width: 2px; height: 20px; background: var(--line);
}
.oc-row.oc-linked > *::after, .oc-subrow > *::after {
  content: ''; position: absolute; top: -20px; height: 2px; background: var(--line);
}
.oc-row.oc-linked > *::after { left: -13px; right: -13px; }
.oc-subrow > *::after       { left: -7px;  right: -7px; }
.oc-row.oc-linked > *:first-child::after, .oc-subrow > *:first-child::after { left: 50%; }
.oc-row.oc-linked > *:last-child::after,  .oc-subrow > *:last-child::after  { right: 50%; }
.oc-row.oc-linked > *:only-child::after,  .oc-subrow > *:only-child::after  { display: none; }

.oc-branch { display: flex; flex-direction: column; align-items: center; }
.oc-subrow { display: flex; gap: 14px; flex-wrap: nowrap; justify-content: center; }
/* An assistant hangs off the side of its principal and sits lower, so it reads
   as support rather than as a peer on the same rung. */
.oc-with-assist { display: flex; align-items: flex-start; gap: 0; }
.oc-assist-arm {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 34px; padding-left: 30px; position: relative;
}
.oc-assist-arm::before {
  content: ''; position: absolute; left: 0; top: 26px; width: 30px;
  height: 0; border-top: 2px dashed var(--line);
}

.oc-box {
  position: relative; width: 168px; min-height: 118px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px; padding: 14px 12px; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-xs);
}
.oc-box-empty  { border-style: dashed; background: var(--paper); }
.oc-box-assist { width: 150px; min-height: 96px; padding: 10px; }
.oc-box-editable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.oc-box-editable:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.oc-av { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.oc-av .dt-av { width: 38px; height: 38px; font-size: 13px; }
.oc-av-empty {
  width: 38px; height: 38px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  background: var(--paper); border: 1px dashed var(--line);
  color: var(--muted); font-size: 15px; font-weight: 600;
}
.oc-name {
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25;
  overflow-wrap: anywhere;
}
.oc-box-empty .oc-name { color: var(--muted); font-weight: 500; }
.oc-title {
  font-size: 12px; color: var(--slate); line-height: 1.3; overflow-wrap: anywhere;
}
.oc-del {
  position: absolute; top: 4px; right: 6px; border: none; background: none;
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.oc-del:hover { color: var(--danger, #c62828); }

/* Org members — a real gridded table, no card wrapper around it. */
.oc-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.oc-table { width: 100%; border-collapse: collapse; background: var(--white); }
.oc-table thead th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--slate); background: var(--paper);
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.oc-table thead th + th, .oc-table tbody td + td { border-left: 1px solid var(--line); }
.oc-table tbody td {
  padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.oc-table tbody tr:last-child td { border-bottom: none; }
.oc-table tbody tr:hover td { background: var(--paper); }

/* Name cell: avatar and name on one line. */
.oc-person { display: flex; align-items: center; gap: 9px; }
.oc-chip {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage-ll, #e8f5e9); color: var(--teal-d, #0d5c5c);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.oc-person-name { font-weight: 600; font-size: 14px; }
.oc-table .oc-c { text-align: center; }
.oc-t-name { font-weight: 600; }
/* The class sits ON the td, so it must out-rank `.oc-table tbody td` (0,1,2). */
.oc-table td.oc-t-mail { color: var(--muted); font-size: 14px; }
.oc-t-none { color: var(--muted); font-size: 14px; }
.oc-rolechip {
  display: inline-block; margin: 1px 4px 1px 0; padding: 2px 8px;
  border-radius: 4px; font-size: 11px; font-weight: 600;
  background: var(--paper); border: 1px solid var(--line); color: var(--slate);
}
.oc-rolechip.primary {
  background: var(--sage-ll, #e8f5e9); border-color: var(--teal);
  color: var(--teal-d, #0d5c5c);
}
.oc-star { background: none; border: none; cursor: pointer; font-size: 17px; color: #ccc; }
.oc-star.on { color: #f39c12; }
.oc-pill {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
}
.oc-pill.on  { background: #e8f5e9; color: #2e7d32; }
.oc-pill.off { background: #ffebee; color: #c62828; }
.oc-pending td { font-size: 12px; color: var(--slate); font-style: italic; }

@media (max-width: 900px) {
  .oc-tier { flex-direction: column; gap: 6px; }
  .oc-row  { justify-content: flex-start; }
  .oc-tier-label { flex: none; padding-top: 0; }
  .oc-conn::before { flex: 0 0 0; }
}

/* ── Slide-out panel (invite) ───────────────────────────────────────────────*/
.sp-backdrop {
  position: fixed; inset: 0; background: rgba(20,20,20,.28);
  opacity: 0; transition: opacity .18s ease; z-index: 60;
}
.sp-backdrop.open { opacity: 1; }
/* Floating card, not a flush drawer: inset from the top, right and bottom
   edges, rounded all the way round. The shadow defines the detached edge. The
   slide travel includes the gap so the card fully clears the viewport. */
.sp-panel {
  position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(420px, 92vw);
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 36px rgba(0,0,0,.16);
  transform: translateX(calc(100% + 12px)); transition: transform .22s ease;
  z-index: 61; display: flex; flex-direction: column; overflow: hidden;
}
.sp-panel.open { transform: translateX(0); }
.sp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.sp-title { font-size: 15px; font-weight: 700; }
.sp-close {
  border: none; background: none; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px;
}
.sp-close:hover { color: var(--ink); }
.sp-body { padding: 20px; overflow-y: auto; }
/* One input size inside every slide-out form: 14px. (.fld and .q-ta are 15px
   on full pages; the 640px panel wants one step smaller.) */
.sp-panel .fld, .sp-panel .q-ta, .sp-panel .form-input, .sp-panel .form-select,
.sp-panel .form-textarea, .sp-panel input[type="date"], .sp-panel input[type="text"] { font-size: 14px; }
/* NC count pills in the questionnaire card footer sit side by side. */
.qa-nc { display: inline-flex; gap: 4px; align-items: center; min-width: 0; }
.sp-person { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.sp-person-name { display: block; font-size: 14px; font-weight: 600; }
.sp-person-mail { display: block; font-size: 13px; color: var(--muted); }
.sp-status { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; flex-wrap: wrap; }
.sp-status-note { font-size: 12px; color: var(--muted); }
.sp-sec-title {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding-top: 16px; border-top: 1px solid var(--line); margin-bottom: 8px;
}
.sp-help { font-size: 13px; color: var(--slate); line-height: 1.55; margin: 0 0 12px; }
/* The invite link reads in the SYSTEM font (user decision 2026-08-10) — it was
   `.sp-link input { font-family: var(--mono) }`, and the rule is GONE rather
   than switched to var(--font): `.form-input` already says that, and the size
   beside it was dead anyway (`.sp-panel .form-input` is two classes and wins,
   so the link has always drawn at the panel's standard 14px). Don't add the
   override back. A link is copied with the button next to it, not read out
   character by character, so it buys none of what the mono face is for and
   made the field read as a different product from the panel around it. The ID
   chips (`.idchip code`, `.orgc-id`) keep their mono precisely BECAUSE those
   ARE read aloud, where 0/O and 1/l cost real time. */
.sp-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sp-note { font-size: 12px; color: var(--slate); margin-top: 12px; line-height: 1.5; }
.oc-pill.pending { background: #fff4e0; color: #9a6200; }

/* ── Audit programme: scope picker with readiness ───────────────────────────*/
.ap-scope-list {
  border: 1px solid var(--line); border-radius: 8px;
  max-height: 260px; overflow-y: auto; background: var(--white);
}
.ap-scope-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px;
}
.ap-scope-row:last-child { border-bottom: none; }
.ap-scope-row:hover { background: var(--paper); }
.ap-scope-row.on { background: var(--sage-ll, #eef7ef); }
.ap-scope-row input { width: 15px; height: 15px; cursor: pointer; flex: 0 0 auto; }
.ap-scope-main { flex: 1; min-width: 0; }
.ap-scope-label { display: block; font-weight: 600; }
.ap-scope-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.ap-ready {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap; text-transform: capitalize;
}
.ap-ready.ready     { background: #e8f5e9; color: #2e7d32; }
.ap-ready.partial   { background: #fff4e0; color: #9a6200; }
.ap-ready.not_ready { background: #fdecea; color: #c62828; }

.ap-summary {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin-top: 4px;
}
.ap-sum-row { display: flex; gap: 12px; font-size: 13px; padding: 3px 0; }
.ap-sum-row span { flex: 0 0 60px; color: var(--muted); }
.ap-sum-row b { flex: 1; font-weight: 600; overflow-wrap: anywhere; }

/* ── Audit Plan tab ─────────────────────────────────────────────────────────*/
.plan-sec { margin-bottom: 26px; }
.plan-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.plan-sec-title {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
/* Icon only. The reason lives in the title attribute, so the chip needs no
   width beyond the glyph — a padded pill around a lone icon reads as a button. */
/* The native `title` attribute was not usable here: the browser holds it back
   for about a second, which reads as "hovering does nothing". This draws the
   tip immediately from data-tip. It opens DOWN and right-aligned, because the
   chip sits in a .pl-box header and .pl-box clips overflow — a tip going up or
   further right would be cut off. */
.plan-lock {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 6px; color: var(--muted); cursor: help;
  transition: background .12s, color .12s;
}
/* Square hover box, no border — this is not a control, so it should not borrow
   the edit button's outline. */
.plan-lock:hover { color: var(--slate); background: var(--paper); }
/* The tip is a light card in the product's own palette, not the browser's dark
   default. It opens DOWN and right-aligned: the chip sits in a .pl-box header
   and .pl-box clips overflow, so a tip going up or further right is cut off. */
.plan-lock::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  width: max-content; max-width: 236px;
  background: var(--white); color: var(--slate);
  border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 6px 18px rgba(24, 32, 56, .10);
  font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: .1px;
  padding: 9px 11px; text-align: left; text-transform: none;
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .13s, transform .13s;
  pointer-events: none;
}
.plan-lock:hover::after { opacity: 1; visibility: visible; transform: translateY(0); }
.plan-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
}
.plan-fact { background: var(--white); padding: 12px 14px; }
.plan-fact-k { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.plan-fact-v { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.plan-note {
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; font-size: 13px; line-height: 1.6; color: var(--slate);
}
.plan-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.plan-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); }
.plan-table thead th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); background: var(--warm);
  padding: 8px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.plan-table tbody td { padding: 15px 14px; font-size: 14px; border-bottom: 1px solid var(--line); }
.plan-table tbody tr:last-child td { border-bottom: none; }
.plan-scope-name { font-weight: 600; }
.plan-auditee-sel { min-width: 190px; }

/* ── Audit detail: sticky sub-header ────────────────────────────────────────*/
.ad-subheader {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin: calc(var(--gutter) * -1) calc(var(--gutter) * -1) 18px;
  padding: 10px var(--gutter);
  background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 9; flex-wrap: wrap;
}
.ad-sub-left  { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ad-sub-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-back {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--slate); font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ad-back svg { display: block; }
/* Labelled back buttons (btnBack): the shared arrow icon + text. */
.btn-back { display: inline-flex; align-items: center; gap: 7px; }
.btn-back svg { display: block; flex: none; }
.ad-back:hover { border-color: var(--ink); color: var(--ink); }
.ad-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.ad-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.ad-badge {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
  letter-spacing: .04em; white-space: nowrap; text-transform: capitalize;
}
.ad-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.ad-tab {
  border: none; background: none; font-family: inherit; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--slate);
  padding: 7px 12px; border-radius: 8px;
}
.ad-tab:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.ad-tab.on { background: var(--ink); color: var(--white); font-weight: 600; }
.ad-tab:disabled { color: var(--line); cursor: not-allowed; }

/* ── Audit Plan tab: two columns, first narrower ────────────────────────────*/
.pl-grid {
  display: grid; grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
  gap: 16px; align-items: start; margin-bottom: 16px;
}
@media (max-width: 1000px) { .pl-grid { grid-template-columns: 1fr; } }
/* Even split, for a record whose left column is an .fd-list: that list has a
   fixed 168px label column and was sized for the 640px slide-out, so the
   narrow 0.62fr column above wraps every value onto two lines. */
.pl-grid.pl-grid-even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
@media (max-width: 1000px) { .pl-grid.pl-grid-even { grid-template-columns: 1fr; } }
.pl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .pl-pair { grid-template-columns: 1fr; } }

.pl-box {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; min-width: 0;
}
.pl-box-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--paper);
}
.pl-box-title {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--slate);
}
.pl-box-body { padding: 14px; }
/* A box holding avatar hover-cards must not clip them. overflow:hidden was
   only there to round the header strip's corners — when we open the overflow,
   the head takes its own radius instead. */
.pl-box:has(.dt-av-card) { overflow: visible; }
.pl-box:has(.dt-av-card) > .pl-box-head { border-radius: 10px 10px 0 0; }
.pl-box .dt-av-wrap { position: relative; }
.pl-box .dt-av-card { z-index: 80; }
.pl-empty { font-size: 13px; color: var(--muted); }

/* Label left, value right, no rules between — the block reads as one set of
   facts rather than a table of separate ones. */
/* Matched to the document editor's Document Control box (.de-kv): 13px on both
   sides, the value a step heavier and darker rather than a size apart, and 3px
   of padding per row as the only spacing. */
.pl-kv-row { display: flex; gap: 10px; padding: 3px 0; align-items: center; }
.pl-kv-k { flex: 0 0 auto; font-size: 13px; color: var(--slate); }
.pl-kv-v {
  flex: 1; min-width: 0; text-align: right;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
/* Inputs in the value column keep their own width rather than stretching. */
.pl-kv-v .pl-date { display: inline-block; width: auto; }
.pl-date { padding: 5px 8px; font-size: 13px; }

.pl-person { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.pl-person + .pl-person { border-top: 1px solid var(--line); }
.pl-person-main { flex: 1; min-width: 0; }
.pl-person-name { display: block; font-size: 13px; font-weight: 600; }
.pl-person-role { display: block; font-size: 11px; color: var(--muted); }
.pl-x {
  border: none; background: none; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0 3px;
}
.pl-x:hover { color: var(--danger, #c62828); }

.pl-meter-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.pl-meter-pct { font-size: 24px; font-weight: 700; line-height: 1; }
.pl-meter-pct.ready { color: #2e7d32; }
.pl-meter-pct.partial { color: #9a6200; }
.pl-meter-pct.not_ready { color: #c62828; }
.pl-risk-level { font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.pl-risk-level.low { color: #2e7d32; }
.pl-risk-level.medium { color: #9a6200; }
.pl-risk-level.high { color: #c62828; }
.pl-risk-score { font-size: 12px; color: var(--muted); font-weight: 600; }
.pl-bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pl-bar-fill { display: block; height: 100%; border-radius: 4px; }
.pl-bar-fill.ready, .pl-bar-fill.risk-low { background: #2e7d32; }
.pl-bar-fill.partial, .pl-bar-fill.risk-medium { background: #e8a33d; }
.pl-bar-fill.not_ready, .pl-bar-fill.risk-high { background: #c62828; }
.pl-meter-legend { margin-top: 10px; font-size: 12px; color: var(--slate); line-height: 1.7; }
.pl-meter-legend b { font-weight: 700; color: var(--ink); }
.pl-warn { color: #9a6200; font-weight: 600; }
.pl-meter-note { margin-top: 8px; font-size: 11px; color: var(--muted); }
.pl-factors { margin: 10px 0 0; padding-left: 16px; font-size: 12px; color: var(--slate); line-height: 1.6; }
.pl-factors li + li { margin-top: 4px; }

.pl-todos { display: flex; flex-direction: column; }
.pl-todo { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; }
.pl-todo + .pl-todo { border-top: 1px solid var(--line); }
.pl-todo-dot {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal, #0e6e6d); margin-top: 6px;
}
.pl-todo-text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--ink); }
.pl-todo-go {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--white);
  border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--teal);
  padding: 2px 8px; cursor: pointer; font-family: inherit;
}
.pl-todo-go:hover { border-color: var(--teal); }

/* Scope areas section — no card wrapper, just a title line and the table. */
.pl-scope-sec { min-width: 0; }
.pl-scope-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}

/* ── Audit Questionnaire ────────────────────────────────────────────────────*/
.q-grid {
  display: grid; grid-template-columns: minmax(230px, 0.58fr) minmax(0, 1.42fr);
  gap: 16px; align-items: start;
}
@media (max-width: 1000px) { .q-grid { grid-template-columns: 1fr; } }
.q-col { min-width: 0; display: flex; flex-direction: column; }

/* Column 1 — scope areas */
.q-side-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px;
}
.q-side-count { font-weight: 700; color: var(--slate); }
.q-areas { display: flex; flex-direction: column; gap: 7px; }
.q-area {
  display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; font-family: inherit;
}
.q-area:hover { border-color: var(--sage, #9ec49f); }
.q-area.on { border-color: var(--ink); box-shadow: var(--shadow-xs); }
.q-area-top { display: flex; align-items: center; gap: 8px; }
.q-area-name { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.3; }
.q-area-state { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.q-area-state.live { background: #e8a33d; }
.q-area-state.done { background: #2e7d32; }
.q-area-bar { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.q-area-fill { display: block; height: 100%; background: var(--teal, #0e6e6d); border-radius: 2px; }
.q-area-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--muted);
}
.q-area-nc b.maj { color: #c62828; }
.q-area-nc b.min { color: #9a6200; }
.q-area-clean { color: #2e7d32; font-weight: 600; }

/* Column 2 — five session facts */
.q-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 12px;
}
.q-fact { background: var(--white); padding: 11px 13px; min-width: 0; }
.q-fact-k {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.q-fact-v { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.q-fact-none { color: var(--muted); font-weight: 500; }
.q-fact-person { display: flex; align-items: center; gap: 7px; }
.q-fact-person .oc-chip { width: 22px; height: 22px; font-size: 10px; }
.q-risk { display: block; font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.q-risk.low { color: #2e7d32; } .q-risk.medium { color: #9a6200; } .q-risk.high { color: #c62828; }
.q-risk-why {
  display: block; font-size: 11px; color: var(--muted); font-weight: 400;
  margin-top: 2px; line-height: 1.35;
}

.q-session-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; margin-bottom: 14px; flex-wrap: wrap;
}
.q-session-msg { font-size: 12px; color: var(--slate); }
.q-readonly {
  font-size: 12px; color: var(--muted); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; margin-bottom: 14px;
}

/* The one-question card */
.q-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px 14px; box-shadow: var(--shadow-xs);
}
.q-rail { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.q-dot {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--line); background: var(--white);
  color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.q-dot[style*="background"] { color: #fff; }
.q-dot.on { outline: 2px solid var(--ink); outline-offset: 1px; }

.q-head-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.q-code {
  font-size: 11px; font-weight: 800; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px;
}
.q-theme {
  font-size: 11px; font-weight: 600; color: var(--slate);
  background: var(--sage-ll, #eef7ef); border-radius: 20px; padding: 2px 9px;
}
/* Position through the area as a short bar + "n of m". The bar is a FIXED
   56px whatever the question count, so every area's header lines up. */
.q-counter { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.q-pos-bar {
  display: block; width: 56px; height: 5px; border-radius: 3px;
  background: var(--line); overflow: hidden;
}
.q-pos-fill { display: block; height: 100%; border-radius: 3px; background: var(--teal, #0e6e6d); }
.q-pos-n { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.q-control { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.q-question { font-size: 14px; line-height: 1.55; color: var(--slate); }
.q-clause { font-size: 11px; color: var(--muted); margin-top: 7px; }

.q-rate { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 0; }
.q-rate-btn {
  border: 1.5px solid var(--line); background: var(--white); color: var(--slate);
  border-radius: 8px; padding: 7px 13px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.q-rate-btn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.q-rate-btn.on { color: #fff; }
.q-rate-btn:disabled { cursor: default; opacity: .55; }
.q-rate-hint { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

.q-detail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.q-lab {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 4px;
}
.q-ta {
  width: 100%; box-sizing: border-box; padding: 11px 15px; font-family: inherit;
  font-size: 15px; line-height: 1.5; border: 1.5px solid var(--line); border-radius: 10px;
  resize: vertical; min-height: 88px; background: var(--paper); color: var(--ink);
  transition: all .18s;
}
.q-ta:focus {
  outline: none; border-color: var(--accent); background: var(--white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.q-ta-sm { min-height: 52px; }
.q-linked {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: #2e7d32; background: #e8f5e9;
  border: 1px solid #a5d6a7; border-radius: 8px; padding: 7px 11px;
}
.q-link-btn {
  border: none; background: none; color: var(--teal); font-weight: 700;
  font-size: 12px; cursor: pointer; text-decoration: underline; font-family: inherit; padding: 0;
}
.q-auditee { margin-top: 12px; padding: 11px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.q-auditee .q-lab { margin-top: 0; }
.q-auditee-locked { display: block; font-size: 13px; font-weight: 600; }
.q-auditee-locked em { font-size: 11px; font-weight: 400; color: var(--muted); font-style: normal; }
.q-auditee-hint { font-size: 11px; color: var(--muted); margin-top: 5px; }
.q-save-row { margin-top: 12px; }

.q-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.q-nav-pos { font-size: 11px; color: var(--muted); }
/* Back / Next match the rating buttons' 14px — one control size on this card. */
.q-nav .btn { font-size: 14px; }

/* Guidance + evidence */
.q-guide {
  margin-top: 14px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
}
.q-guide-head {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.q-guide-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
}
.q-guide-sec { min-width: 0; }
.q-guide-h {
  font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 6px;
}
/* Pitfall bullets read like the step rows above them — same size, colour and
   left alignment — with a plain marker where the steps have a checkbox. */
.q-guide-list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.q-guide-list li + li { margin-top: 6px; }
.q-guide-none { font-size: 12px; color: var(--muted); line-height: 1.55; }
.q-guide-ev { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.q-ev-list { display: flex; flex-direction: column; gap: 5px; }
.q-ev {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; color: var(--ink);
}
.q-ev:hover { border-color: var(--teal); }
.q-ev-kind {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  border-radius: 4px; padding: 2px 6px;
}
.q-ev-document .q-ev-kind { background: #e3f2fd; color: #1565c0; }
.q-ev-evidence .q-ev-kind { background: #e8f5e9; color: #2e7d32; }
.q-ev-title { flex: 1; font-size: 12px; overflow-wrap: anywhere; }
.q-ev-go { flex: 0 0 auto; color: var(--muted); font-size: 12px; }

/* ── Questionnaire · view 1: scope areas as cards ───────────────────────────*/
.qa-head {
  margin-bottom: 16px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
/* Draft → Generate → Submit, always all three. A blocked one stays visible and
   explains itself on hover: the wrapper carries the tooltip because a disabled
   button fires no mouse events, so its own `title` would never appear. */
.qa-acts { display: flex; gap: 8px; flex: 0 0 auto; padding-top: 2px; }
.qa-act-wrap { display: inline-flex; }
.qa-act-wrap .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.qa-head-t { font-size: 15px; font-weight: 700; }
.qa-head-s { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
/* Fixed 4-up: a single scope area keeps a card's proportions instead of
   stretching across the whole page. */
.qa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1240px) { .qa-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 940px)  { .qa-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .qa-grid { grid-template-columns: minmax(0,1fr); } }
.qa-card {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; cursor: pointer; font-family: inherit; min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.qa-card:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.qa-card.done { background: linear-gradient(var(--white), #f6fbf6); }
/* Row 1: risk pill left, a SHORT progress bar + % right. The bar is fixed-width
   on purpose — full-width made it the loudest thing on the card, and progress
   is secondary information here. */
.qa-card-r1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qa-prog2 { display: inline-flex; align-items: center; gap: 6px; }
.qa-prog2 .qa-prog-bar { width: 56px; flex: 0 0 auto; }
.qa-prog-pct { font-size: 11px; font-weight: 600; color: var(--muted); }
.qa-name {
  font-size: 14px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere;
  /* Reserve two lines so a one-line title and a two-line title produce
     identically tall cards — the equal-height rule, done in the title where
     the height variance actually comes from. (2 × 14px × 1.35 ≈ 38px.) */
  min-height: 38px;
}
.qa-risk {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 4px; white-space: nowrap;
}
.qa-risk.low { background: #e8f5e9; color: #2e7d32; }
.qa-risk.medium { background: #fff4e0; color: #9a6200; }
.qa-risk.high { background: #fdecea; color: #c62828; }
.qa-prog-bar { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.qa-prog-fill { display: block; height: 100%; border-radius: 3px; background: var(--teal, #0e6e6d); }
.qa-prog-fill.done { background: #2e7d32; }
/* Footer: NC label left, avatar stack right — no divider (removed by request).
   margin-top:auto pins it to the bottom edge so every card closes on the same
   line; the title's 14px margin is the guaranteed breathing room above. */
.qa-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px;
  font-size: 11px; color: var(--muted);
  /* One line, always — a footer that wraps on a long NC label makes that card
     taller than its neighbours, which the equal-height rule forbids. The label
     truncates instead. */
  flex-wrap: nowrap;
}
.qa-foot .qa-nc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-foot .qa-avs { flex: 0 0 auto; }
.qa-card .qa-name { margin-bottom: 14px; }
/* Overlapping avatar stack. The white ring is what keeps two initials chips
   readable where they cross; hover lifts the chip above its neighbour so the
   card that pops belongs to the avatar under the cursor. */
.qa-avs { display: inline-flex; align-items: center; }
.qa-avs > * + * { margin-left: -8px; }
.qa-avs .dt-av { width: 30px; height: 30px; font-size: 11px; box-shadow: 0 0 0 2px var(--white); }
.qa-avs .dt-av-wrap { margin-right: 0; }
.qa-avs .dt-av-wrap:hover { z-index: 5; }
.qa-nc b.maj { color: #c62828; } .qa-nc b.min { color: #9a6200; }
.qa-clean { color: #2e7d32; font-weight: 600; }
.qa-dash { color: var(--line); }

/* ── Questionnaire · view 2: area bar + inverted columns ────────────────────*/
.qv-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; margin-bottom: 12px;
}
.qv-bar-title { font-size: 16px; font-weight: 700; }
.qv-bar-facts { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
/* Session actions (Start / Sign off / Approve / Return) sit in the area bar,
   right of the session facts. */
.qv-bar-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.qv-bar-acts:empty { display: none; }
.qv-fact { display: flex; flex-direction: column; gap: 1px; }
.qv-fact-k {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.qv-fact-v { font-size: 13px; font-weight: 600; }

/* Guidance left, question right — the reverse of the plan tab, because here the
   procedure is reference and the question is the work. */
.qv-grid {
  display: grid; grid-template-columns: minmax(250px, 0.66fr) minmax(0, 1.34fr);
  gap: 16px; align-items: start;
}
@media (max-width: 1000px) { .qv-grid { grid-template-columns: 1fr; } }
.qv-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.qv-guide {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
}
.qv-guide-head, .qv-ev-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 11px;
}
.qv-guide-count {
  font-size: 11px; font-weight: 700; color: var(--slate);
  background: var(--paper); border-radius: 20px; padding: 2px 8px; letter-spacing: 0;
}
.qv-steps { display: flex; flex-direction: column; gap: 2px; }
.qv-step {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 8px; padding: 7px 8px;
  cursor: pointer; font-family: inherit;
}
.qv-step:hover:not(:disabled) { background: var(--paper); }
.qv-step:disabled { cursor: default; }
.qv-tick {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--line); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; margin-top: 1px;
}
.qv-step.on .qv-tick { background: #2e7d32; border-color: #2e7d32; }
.qv-step-t { flex: 1; font-size: 13px; line-height: 1.5; color: var(--ink); }
.qv-step.on .qv-step-t { color: var(--muted); text-decoration: line-through; }
.qv-guide-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Same treatment as the "How to audit this" head above it — one box, one
   heading style. */
.qv-guide-h {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 11px;
}

/* Standard questions for the clause */
.q-probes {
  margin-top: 14px; background: var(--sage-ll, #eef7ef);
  border: 1px solid var(--sage, #cfe3d0); border-radius: 10px; padding: 12px 14px;
}
/* The "How to audit this" heading treatment, held in this box's green. */
.q-probes-h {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--teal-d, #0d5c5c); margin-bottom: 11px;
}
.q-probes-list { margin: 0; padding-left: 16px; font-size: 14px; line-height: 1.65; color: var(--slate); }
.q-probes-list li + li { margin-top: 4px; }

/* Evidence as rectangle cards with a file-type badge */
.qv-ev { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.qv-ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; }
.qv-ev-card {
  display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink);
  /* Rendered as <a>, <div> or <button> depending on what clicking does. A
     button brings UA styles — centered text, its own font, shrink-to-fit — which
     is what pushed the title away from the badge on the Plan tab. Neutralise
     them here so the card looks the same whatever element carries it. */
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; min-width: 0;
}
.qv-ev-card:hover { border-color: var(--teal); box-shadow: var(--shadow-xs); }
.qv-ev-badge {
  flex: 0 0 auto; width: 34px; height: 40px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #fff;
}
.qv-ev-card.pdf  .qv-ev-badge { background: #c0392b; }
.qv-ev-card.xls  .qv-ev-badge { background: #1e7145; }
.qv-ev-card.doc  .qv-ev-badge { background: #1565c0; }
.qv-ev-card.file .qv-ev-badge { background: #78909c; }
/* A report that does not exist yet still gets a slot, so the reader can see what
   the audit still owes. Dashed border and a grey badge say "empty" without a
   second explanatory line; it is not clickable, so it does not offer a hover. */
.qv-ev-card.pending {
  border-style: dashed; border-color: #CFD4E0;
  background: none; cursor: default;
}
.qv-ev-card.pending:hover { border-color: #CFD4E0; box-shadow: none; }
.qv-ev-card.pending .qv-ev-badge { background: #C3C8D4; }
.qv-ev-card.pending .qv-ev-name { color: var(--slate); }
.qv-ev-body { flex: 1; min-width: 0; text-align: left; }
.qv-ev-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.qv-ev-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* More air between the question chips */
.q-rail { gap: 8px; }

/* ── Compliance decision + findings-per-question ────────────────────────────*/
.q-findings { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.q-findings-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
/* Fixed 3-up: a single finding keeps a card's width instead of stretching. */
.q-findings-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 760px) { .q-findings-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .q-findings-grid { grid-template-columns: minmax(0,1fr); } }
.q-finding-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px; min-width: 0;
}
.q-finding-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
/* Severity as a tinted pill — the same box treatment as the risk pill, coloured
   by severity. This replaced the coloured top border AND the bare coloured
   text: one severity marker, not three. */
.q-finding-type {
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  padding: 3px 7px; border-radius: 4px; white-space: nowrap;
}
.q-finding-type.observation { background: #e3f0fb; color: #1565c0; }
.q-finding-type.minor_nc    { background: #fff4e0; color: #9a6200; }
.q-finding-type.major_nc    { background: #fdecea; color: #c62828; }
/* The card's border carries the severity too — softened with the neutral line
   colour so a red border reads as classification, not as a validation error.
   Hover goes to the full severity colour instead of the usual ink. */
.q-finding-card.observation { border-color: color-mix(in srgb, #1565c0 45%, var(--line)); }
.q-finding-card.minor_nc    { border-color: color-mix(in srgb, #e8a33d 55%, var(--line)); }
.q-finding-card.major_nc    { border-color: color-mix(in srgb, #c62828 45%, var(--line)); }
button.q-finding-card.observation:hover { border-color: #1565c0; }
button.q-finding-card.minor_nc:hover    { border-color: #e8a33d; }
button.q-finding-card.major_nc:hover    { border-color: #c62828; }
.q-finding-ref { font-size: 10px; color: var(--muted); }
.q-finding-desc { font-size: 13px; line-height: 1.5; color: var(--slate); overflow-wrap: anywhere; }
.q-finding-auditee {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 12px; font-weight: 600;
}
.q-finding-auditee .oc-chip { width: 26px; height: 26px; font-size: 11px; }

/* Finding panel — reuses .sp-panel/.sp-backdrop from the invite panel.
   No dividers between fields: a short form reads better as one block. */
.fp-field { margin-bottom: 18px; }
.fp-field:last-of-type { margin-bottom: 0; }
.fp-lab {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.fp-hint { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
/* personPicker is normally inline-sized for tables; stretch it to the panel. */
.pp-full { display: block; width: 100%; }
.pp-full .pp-trigger { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.pp-full .pp-menu, .pp-full .pp-card { left: 0; right: 0; min-width: 0; width: 100%; box-sizing: border-box; }

/* A picker rendered as a FORM FIELD (the assign-to-role modal). Full width and
   a FIXED height, which is the point: left to its content the trigger measured
   128px on "Unassigned" and 295px once a person was chosen, and grew a line
   taller when that person had a role subtitle — so the field changed shape
   under the user at the moment they used it. Fixed, it behaves like the inputs
   around it. */
.pp-field { display: block; width: 100%; }
.pp-field .pp-trigger {
  width: 100%; box-sizing: border-box; height: 52px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
  background: var(--white);
}
.pp-field .pp-trigger:hover { background: var(--warm); border-color: var(--line); }
.pp-field.open .pp-trigger { background: var(--white); border-color: var(--sage); }
/* Caret pinned to the right edge — without this it sits against the name and
   the field reads as a chip that happens to be wide. */
.pp-field .pp-caret { margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--slate); }
.pp-field .pp-ph { font-size: 14px; }
.pp-field .pp-trigger .pp-name { font-size: 14px; }
/* One line each, ellipsised — a long "role, role, role" subtitle must not wrap
   and push the fixed height into a scroll. */
.pp-field .pp-name > span:first-child,
.pp-field .pp-name-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pp-field .pp-menu, .pp-field .pp-card { left: 0; right: 0; min-width: 0; width: 100%; box-sizing: border-box; }

/* ── Finding detail slide-out + NC management page ──────────────────────────*/
.sp-head-actions { display: flex; align-items: center; gap: 8px; }
.sp-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Collapse arrow sits before the title and points the way the panel leaves. */
.sp-collapse {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--white);
  border-radius: 8px; width: 28px; height: 28px; cursor: pointer;
  color: var(--slate); font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.sp-collapse:hover { border-color: var(--ink); color: var(--ink); }
/* A finding carries more than an invite does, so it gets a wider panel. */
.sp-panel-wide { width: min(640px, 96vw); }
.fd-type {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap; text-transform: capitalize;
}

/* Segmented NC status bar — words, not numbers. One joined bar at full width:
   every segment is an equal fraction, and only the two outer edges are rounded. */
.nsb {
  display: flex; align-items: stretch; width: 100%; margin-bottom: 20px;
  border-radius: 10px; overflow: hidden;
}
.nsb-seg {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 6px; font-size: 13px; font-weight: 600; text-align: center;
  text-transform: capitalize;
  background: var(--paper); color: var(--muted);
  border-right: 1px solid var(--white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nsb-seg:last-child { border-right: none; }
.nsb-seg.done { background: #e8f5e9; color: #2e7d32; }
/* Colour alone carries "you are here" — an outline on top of it was noise. */
.nsb-seg.on   { background: #fff4e0; color: #9a6200; }

/* Finding slide-out facts: a 2-across grid, label ABOVE value — the area bar's
   label-over-value pattern rather than the detail pages' label-beside-value
   list. Severity ("Status") lives here as a fact, not beside the title. */
.fd-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px 18px; margin-bottom: 22px;
}
.fd-cell { min-width: 0; }
.fd-cell-k {
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.fd-cell-k .fd-ico { font-size: 12px; width: auto; }
.fd-cell-v { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }

/* (.fd-list/.fd-item — the 168px label-beside-value list — were removed when
   the finding panel moved to .fd-grid above; nothing else used them.) */
.fd-ico {
  flex: 0 0 auto; width: 18px; text-align: center;
  font-size: 15px; color: var(--slate); opacity: .75;
}

/* Read-only field: looks like an input, is not one. */
.fd-field { margin-bottom: 18px; }
.fd-field-k {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; color: var(--muted); margin-bottom: 7px;
}
.fd-readonly {
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; font-size: 15px; line-height: 1.55; color: var(--ink);
  overflow-wrap: anywhere; min-height: 22px;
}

/* Activity / Comments tabs */
.fd-tabs {
  display: flex; gap: 2px; border-bottom: 2px solid var(--line);
  margin: 22px 0 14px;
}
.fd-tab {
  padding: 8px 16px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--slate);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.fd-tab:hover { color: var(--ink); }
.fd-tab.on { color: var(--teal, #0e6e6d); font-weight: 700; border-bottom-color: var(--teal, #0e6e6d); }

/* Activity feed */
.fd-activity { display: flex; flex-direction: column; gap: 14px; }
.fd-act { display: flex; gap: 11px; }
.fd-act-ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  background: var(--paper); color: var(--slate);
}
.fd-act-body { flex: 1; min-width: 0; }
.fd-act-text { font-size: 15px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.fd-act-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Comment thread */
.fd-thread { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; max-height: 320px; overflow-y: auto; }
.fd-comment { display: flex; gap: 10px; }
.fd-comment .oc-chip { flex: 0 0 auto; width: 26px; height: 26px; font-size: 10px; }
.fd-comment-body { flex: 1; min-width: 0; }
.fd-comment-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fd-comment-who { font-size: 15px; font-weight: 600; }
.fd-comment-when { font-size: 13px; color: var(--muted); white-space: nowrap; }
.fd-comment-text { font-size: 15px; line-height: 1.55; color: var(--slate); margin-top: 2px; overflow-wrap: anywhere; }

/* Inside the finding slide-out the fd-* components run one step smaller than on
   the full NC/incident pages (which keep the 15px base) — the panel showed the
   same record at reading-page scale and it read as oversized in 640px. Titles
   14px, body/detail 13px, field labels 11px. Scoped to .sp-panel so the NC and
   incident detail PAGES are untouched. */
.sp-panel .fd-field-k {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.sp-panel .fd-field-k .fd-ico { font-size: 12px; width: auto; }
.sp-panel .fd-readonly { font-size: 13px; }
.sp-panel .fd-todo-title { font-size: 14px; }
.sp-panel .fd-todo-detail { font-size: 13px; }
.sp-panel .fd-todo-lead, .sp-panel .fd-todo-done, .sp-panel .fd-todo-none { font-size: 14px; }
.sp-panel .fd-act-text { font-size: 14px; }
.sp-panel .fd-comment-who { font-size: 14px; }
.sp-panel .fd-comment-text { font-size: 13px; }
.fd-composer-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.fd-err { font-size: 13px; color: var(--danger, #c62828); }
.nc-status-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; white-space: nowrap; text-transform: capitalize;
}
.nc-status-pill.live { background: #fff4e0; color: #9a6200; }
.nc-status-pill.done { background: #e8f5e9; color: #2e7d32; }
.nc-status-pill.void { background: var(--paper); color: var(--muted); }

/* Clickable finding card */
button.q-finding-card {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  font-family: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
button.q-finding-card:hover { border-color: var(--ink); box-shadow: var(--shadow-xs); transform: translateY(-1px); }
/* Spacing lives on the base .q-finding-top rule — this override exists only to
   restore flex display inside a <button>, so it must not restate margins. */
button.q-finding-card .q-finding-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
button.q-finding-card .q-finding-desc { display: block; }
button.q-finding-card .q-finding-auditee { display: flex; }

/* Key/value rows, shared by the slide-out and the NC page */
.nc-rows { display: flex; flex-direction: column; }
.nc-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.nc-row:last-child { border-bottom: none; }
.nc-row-k { flex: 0 0 108px; color: var(--muted); }
.nc-row-v { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.nc-person { display: inline-flex; align-items: center; gap: 7px; }
.nc-person .oc-chip { width: 22px; height: 22px; font-size: 10px; }
.nc-none { color: var(--muted); font-weight: 400; }
.nc-overdue { color: #c62828; font-weight: 700; font-size: 11px; }
/* References read in the system font now (was JetBrains Mono) — the class name
   survives only because a dozen call sites carry it; rename in the token sweep. */
.nc-mono { font-size: 12px; }

.nc-sec { margin-top: 16px; }
.nc-sec-h {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.nc-prose { font-size: 13px; line-height: 1.6; color: var(--slate); overflow-wrap: anywhere; }
.nc-q-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nc-q-title { font-size: 13px; font-weight: 600; }
.nc-note { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 12px; }

/* CAR progress strip */
.nc-steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.nc-step { display: flex; align-items: center; gap: 7px; }
.nc-step-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  background: var(--paper); color: var(--muted); border: 1px solid var(--line);
}
.nc-step.done .nc-step-dot { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.nc-step.on .nc-step-dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.nc-step-l { font-size: 11px; color: var(--muted); white-space: nowrap; }
.nc-step.done .nc-step-l, .nc-step.on .nc-step-l { color: var(--ink); font-weight: 600; }
.nc-step-bar { flex: 1 1 18px; min-width: 14px; height: 2px; background: var(--line); margin: 0 8px; }
.nc-step-bar.done { background: #2e7d32; }

/* CAP / decision entries */
.nc-entry {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px;
}
.nc-entry:last-child { margin-bottom: 0; }
.nc-entry .nc-sec:first-of-type { margin-top: 10px; }
.nc-entry-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nc-entry-who { font-size: 13px; font-weight: 600; }
.nc-entry-when { font-size: 11px; color: var(--muted); }
.nc-decision { font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
.nc-decision.ok { background: #e8f5e9; color: #2e7d32; }
.nc-decision.no { background: #fdecea; color: #c62828; }

/* NC to-do tab — what still has to happen before it can be closed. */
.fd-todo-lead { font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.fd-todo-done {
  font-size: 15px; color: #2e7d32; background: #e8f5e9;
  border-radius: 8px; padding: 11px 13px; margin-bottom: 12px;
}
.fd-todo-none { font-size: 15px; color: var(--slate); line-height: 1.6; }
.fd-todo-warn {
  font-size: 14px; color: #c62828; background: #fdecea;
  border-radius: 8px; padding: 9px 12px; margin-bottom: 12px;
}
.fd-todo-list { display: flex; flex-direction: column; gap: 10px; }
.fd-todo { display: flex; gap: 11px; padding: 11px 13px; border-radius: 10px; background: var(--paper); }
.fd-todo.current { background: #fff4e0; }
.fd-todo.done { background: transparent; padding-left: 13px; }
.fd-todo-mark {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: var(--white); border: 1px solid var(--line); color: #2e7d32;
}
.fd-todo.done .fd-todo-mark { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.fd-todo-body { flex: 1; min-width: 0; }
.fd-todo-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.fd-todo.done .fd-todo-title { color: var(--muted); text-decoration: line-through; }
.fd-todo-detail { font-size: 14px; color: var(--slate); line-height: 1.5; margin-top: 3px; }
.fd-todo.done .fd-todo-detail { display: none; }
.fd-todo-who { font-size: 13px; color: var(--muted); margin-top: 5px; }
.fd-todo-foot { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.5; }

/* ── CAR workflow, on the NC management page ────────────────────────────────*/
.car-warn {
  font-size: 15px; color: #9a6200; background: #fff4e0;
  border-radius: 8px; padding: 11px 13px; line-height: 1.5;
}
.car-reject {
  font-size: 14px; color: #c62828; background: #fdecea;
  border-radius: 8px; padding: 10px 12px; margin: 12px 0; line-height: 1.5;
}
.car-cap { background: var(--paper); border-radius: 10px; padding: 14px 16px; }
.car-cap .nc-sec:first-child { margin-top: 0; }
.car-meta { font-size: 13px; color: var(--muted); margin-top: 12px; }
.car-action {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-top: 14px;
}
.car-action-h { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.car-action-p { font-size: 14px; color: var(--slate); line-height: 1.55; margin-bottom: 12px; }
.car-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.car-upload { display: inline-block; cursor: pointer; }
.car-waiting {
  font-size: 15px; color: var(--slate); background: var(--paper);
  border-radius: 8px; padding: 12px 14px; line-height: 1.5;
}
.car-ev {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.car-ev:last-child { border-bottom: none; }
.car-ev a { color: var(--teal); overflow-wrap: anywhere; }
.car-ev-st {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
}
.car-ev-st.pending { background: #fff4e0; color: #9a6200; }
.car-ev-st.ok { background: #e8f5e9; color: #2e7d32; }
.car-ev-st.no { background: #fdecea; color: #c62828; }
.car-defer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ── Login / signup shared bits ── */
.login-err{color:var(--danger);font-size:13px;margin-bottom:14px;min-height:20px;font-weight:500}
.login-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
  text-align:center;font-size:13px;color:var(--text-muted)}
.login-link{background:none;border:0;padding:0;font:inherit;font-weight:600;
  color:var(--primary);cursor:pointer}
.login-link:hover{text-decoration:underline}
/* The code field is read digit-by-digit off a screen — space it out. */
/* The 6-digit code fields — signup step 3 and forgot-password step 2. The font
   is DECLARED rather than left to the `input { font-family: inherit }` reset:
   it is the one field in the product a reader might expect to be monospaced,
   so saying so stops somebody "fixing" it to var(--mono) later. Its twin is
   `.otp` on the server-rendered /join/ page — change both together. */
.login-otp{font-family:var(--font);letter-spacing:.4em;font-size:20px;text-align:center;font-weight:600}
/* "Forgot password?" — right-aligned directly under the password input, inside
   its own form-group, so it reads as belonging to that field rather than to the
   card. (It sat beside the Password label, then under the Sign in button; this
   is the third and final placement, user decision 2026-08-11.) */
.login-forgot{margin-top:9px;text-align:right;font-size:13px}

/* FERBE support (platform_admin) is view-only — the badge explains why the
   write controls are missing wherever support looks. */
.support-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;background:var(--amber-bg,#fdf2d5);
  color:var(--amber-text,#8a6000);border:1px solid var(--amber,#e0a800)}

/* ── Incident detail: boxed record + stage boxes ────────────────────────────
   Label left, value right. The value column is what the eye scans, so it takes
   the right edge and the weight; the label stays quiet on the left. */
/* Matched to the document editor's Document Control box (.de-kv): 13px both
   sides, the value a step heavier and darker rather than a size apart, 3px of
   padding as the only spacing, and no rules between rows — the list reads as
   one block of facts. The fixed 42% label column stays, so values still line up. */
.ii-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 3px 0;
}
.ii-k { flex: 0 0 42%; font-size: 13px; color: var(--slate); }
.ii-v {
  flex: 1; min-width: 0; text-align: right;
  font-size: 13px; font-weight: 500; color: var(--ink-soft); overflow-wrap: anywhere;
}
/* An override is a departure from the recommendation — it reads as a note on
   the decision, not as another field. */
.ov-note {
  margin-top: 10px; padding: 9px 11px; border-radius: 6px;
  background: #fff8e1; font-size: 12px; line-height: 1.5;
}

/* Guide / to-do rows, shared by the "What happens next" box and the response
   checklist so a step looks the same wherever it is shown. */
.gd-row, .stp-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.stp-row { border-bottom: 1px solid var(--line); cursor: pointer; }
.stp-row:last-of-type { border-bottom: none; }
.stp-row:hover { background: var(--paper); }
.gd-tick {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--paper); color: var(--muted);
}
.gd-tick.on { background: #e8f5e9; color: #2e7d32; }
.gd-t { font-size: 13px; font-weight: 600; display: block; }
.gd-n { font-size: 12px; color: var(--muted); display: block; line-height: 1.45; }
.stp-go { flex: 0 0 auto; font-size: 12px; color: var(--muted); align-self: center; }

/* Facts with no rules between them — used by the incident record box, where the
   list reads as one block rather than a table of separate rows. The bordered
   .ii-row is kept for the right-column boxes, which mix facts with actions. */
/* .ii-flush is now redundant — the base .ii-row is borderless and tight.
   Kept as a no-op so the ~15 call sites that pass it keep working. */

/* ── Incident: "What happens next" ──────────────────────────────────────────
   Each entry names the task, who owns it, and carries the button that does it,
   so nobody has to work out whose move it is.
   ⚠ The ROW itself is styled once, further down (search `.na-item {`) — this
   block carries only the pieces inside it. There used to be a second .na-item
   rule here from the divider-separated era, and its :first-child/:last-child
   padding overrides silently flattened the card padding when the rows became
   bordered cards (2026-08-07). */
.na-top { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.na-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.na-who {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: var(--slate); background: var(--paper);
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.na-d { font-size: 13px; color: var(--slate); line-height: 1.5; margin-top: 4px; }
.na-wait { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 8px; }

/* "Actions taken" — the record of what has already happened. */
.at-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.at-row:last-child { border-bottom: none; }
.at-row.click { cursor: pointer; }
.at-row.click:hover { background: var(--paper); }
.at-t { font-size: 14px; font-weight: 700; display: block; text-transform: capitalize; }
.at-m { font-size: 12px; color: var(--muted); display: block; margin-top: 3px; }
/* The actor as a bordered chip — the severity pill's shape, but bordered and
   neutral, because a name is identity, not a state. */
.at-who {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 4px;
  background: var(--paper); border: 1px solid var(--line); color: var(--slate);
}
.at-s { font-size: 13px; color: var(--slate); display: block; margin-top: 8px; line-height: 1.45; }
.at-row .stp-go { font-size: 13px; }

/* "What happens next" — icon · what · who · the button. Wears the same row
   recipe as the Account setup steps (.rd-su-step) and the audit stage checklist
   (.ck-group): bordered 12px-radius card, 34px icon chip, hover accent. Own
   class family for the same reason those are — see the .ck-* note below.
   The owner is an avatar only; the button says "Action" everywhere, because the
   name belongs to the person beside it, not repeated in the label. */
.na-item {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .15s;
}
.na-item + .na-item { margin-top: 10px; }
.na-item:hover { border-color: var(--accent); }
/* A soft action (Defer) is the secondary path — it recedes rather than
   competing with the row above it for attention. */
.na-item.soft { background: var(--paper); border-color: transparent; }
.na-item.soft:hover { border-color: var(--line); }
.na-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: var(--paper); color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center;
}
.na-item.soft .na-ic { background: var(--white); }
.na-main { min-width: 0; }
.na-avatar { flex: 0 0 auto; display: flex; align-items: center; }
.na-act { flex: 0 0 auto; }
@media (max-width: 720px) {
  .na-item { grid-template-columns: auto 1fr auto; }
  .na-act { grid-column: 2 / -1; justify-self: start; }
}

/* Panel header actions — Save/Submit sit against the title so they stay in view
   however long the form runs. */
.sp-head { justify-content: space-between; }
.sp-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Attribution on a read-only record: who did it and when the system logged it,
   before anything they wrote. */
.ro-by {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; margin-bottom: 18px;
  background: var(--paper); border-radius: 8px;
}
.ro-by-n { display: block; font-size: 14px; font-weight: 700; }
.ro-by-t { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* Task title with its description stacked beneath it. */
.na-main .na-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.na-main .na-d { font-size: 13px; color: var(--slate); line-height: 1.5; margin-top: 3px; }

/* ── Audit stage checklist ──────────────────────────────────────────────────
   Grouped by stage, ticked by the system. Collapsed by default; the stage the
   programme is actually at opens itself. */
/* Stage rows follow the Account setup card's recipe (.rd-su-step on My
   Dashboard) — bordered rounded rows, icon chip, tick when complete, and the
   same 0fr→1fr grid expand. Deliberately its OWN class family rather than
   reusing .rd-su-*: that component is an onboarding step with a Start button,
   this one holds a checklist, and coupling them would make a dashboard tweak
   silently restyle the audit page. Keep the shared values (12px radius,
   12px 14px padding, 34px icon chip, .3s expand) in step if either moves. */
.ck-steps { display: flex; flex-direction: column; gap: 10px; }
.ck-group {
  border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.ck-group:hover { border-color: var(--accent); }
/* A finished stage recedes — the same "done" treatment the setup steps use. */
.ck-group.done { background: var(--paper); border-color: transparent; }
.ck-group.done:hover { border-color: var(--line); }
.ck-group.na { opacity: .72; }
.ck-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
.ck-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: var(--paper); color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center;
}
.ck-group.done .ck-ic { background: var(--white); }
.ck-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ck-tx b { font-size: 14px; font-weight: 600; color: var(--ink); }
.ck-tx span { font-size: 12px; color: var(--muted); }
.ck-caret { font-size: 10px; color: var(--muted); transition: transform .2s; }
.ck-group.open .ck-caret { transform: rotate(90deg); }
.ck-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  background: var(--paper); color: var(--muted);
}
.ck-group.done .ck-count { background: var(--white); }
.ck-tick-done {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
/* The expand animation, same as .rd-su-why: a grid row that grows from 0fr,
   with the inner div clipping the overflow. Height-based transitions cannot do
   this without a measured pixel height. */
.ck-why { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.ck-why > div { overflow: hidden; }
.ck-group.open .ck-why { grid-template-rows: 1fr; }
/* Tasks hang off the group on a connector rail (the reference layout): one
   vertical line down the left, an elbow into each task. The rail is drawn with
   borders rather than an SVG so it stretches with the content automatically. */
.ck-body { padding: 2px 14px 12px 24px; }
.ck-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 5px 0 5px 20px; position: relative;
}
.ck-item::before {          /* the vertical rail */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  border-left: 1px solid #CFD4E0;
}
/* On the last task the rail stops where the curve begins, so the corner is the
   only thing that turns — a straight rail running past it would show a spur. */
.ck-item:last-child::before { bottom: auto; height: 11px; }
.ck-item::after {           /* the elbow: a rounded corner, not a square one */
  content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 6px;
  border-left: 1px solid #CFD4E0;
  border-bottom: 1px solid #CFD4E0;
  border-bottom-left-radius: 6px;
}
.ck-tick {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  border: 1.5px solid var(--line); background: var(--white); color: transparent;
}
.ck-item.done .ck-tick { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.ck-text { flex: 1; font-size: 13px; color: var(--slate); line-height: 1.45; }
.ck-item.done .ck-text { color: var(--muted); text-decoration: line-through; }

/* ── NC register table ──────────────────────────────────────────────────────*/
.nc-reg-summary {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 16px; margin-bottom: 14px;
}
.nc-reg-summary-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.nc-reg-summary-n { font-size: 13px; font-weight: 700; }
.nc-reg-bar { background: var(--line); border-radius: 4px; height: 7px; overflow: hidden; }
.nc-reg-bar-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.nc-sev {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; white-space: nowrap; text-transform: capitalize;
}
.nc-reg-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.nc-reg-area  { font-size: 12px; color: var(--muted); }
.nc-overdue-cell { color: #c62828; font-weight: 700; }
.q-signoff-note {
  flex: 1 1 100%; margin-top: 8px; padding: 9px 11px; border-radius: 6px;
  background: #fff8e1; font-size: 13px; line-height: 1.5; color: #8a6000;
}

/* An inline value with a pencil beside it — used for the audit end date, which
   stays editable after activation for account holders only. */
.kv-editable { display: inline-flex; align-items: center; gap: 6px; }
/* A square hit target rather than a bare glyph — the hover box is what tells the
   reader the icon is a control and not decoration. */
.kv-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 auto;
  border: 1px solid transparent; background: none; cursor: pointer;
  padding: 0; border-radius: 6px; color: var(--muted); line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
}
.kv-edit-btn:hover {
  color: var(--accent); background: var(--paper); border-color: var(--line);
}

/* A checklist group that does not apply yet — a group nobody can fail must not
   read as complete. */
.ck-count.na { background: var(--paper); color: var(--muted); }
.ck-na { font-size: 13px; color: var(--muted); line-height: 1.5; padding: 2px 0 6px; }

/* The hover card on an avatar sits outside the cell, so the table wrapper must
   not clip it. Horizontal scrolling moves to the table itself. */
.plan-table-wrap { overflow: visible; border: 1px solid var(--line); border-radius: 10px; }
.plan-table td, .plan-table th { overflow: visible; }
.plan-table .dt-av-wrap { position: relative; }
.plan-table .dt-av-card { z-index: 60; }

/* ── IAR editor on the document-editor shell ────────────────────────────────*/
/* Section cards sit on the page background with the same 14px air the document
   editor gives read-only documents. */
.iar-cards > .de-card + .de-card { margin-top: 14px; }
/* Narrative sections carry an accent "Your words" pill instead of the neutral
   SECTION one — the at-a-glance signal of what the auditor may edit. */
.iar-kind-ed {
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
  color: var(--accent) !important;
}

/* ── Audit questionnaire: areas beside the report they build towards ─────────
   Info panel (IAR summary / NC tracking) in the NARROW LEFT column, the work
   items (scope cards / NC table) in the wide right one. */
.qa-split {
  display: grid; grid-template-columns: minmax(300px,390px) minmax(0,1fr);
  gap: 16px; align-items: start;
}
@media (max-width: 1100px) { .qa-split { grid-template-columns: 1fr; } }
/* Three across, fixed — a single area must keep a card's proportions rather
   than stretching across the row. */
.qa-split .qa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .qa-split .qa-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .qa-split .qa-grid { grid-template-columns: 1fr; } }
.qa-iar-bar { background: var(--line); border-radius: 4px; height: 7px; overflow: hidden; margin-top: 12px; }
.qa-iar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s; }
.qa-iar-note { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 10px; }
.qa-iar-sub {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
}
/* The saved conclusion reads back as prose, selectable — it is the record, not a
   form field, so it is a div rather than a disabled textarea. */
.qa-concl {
  font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
}
.qa-iar-sub + .qv-ev-grid { grid-template-columns: 1fr; }

/* ── Internal Audit Report editor ────────────────────────────────────────────
   Two kinds of section on one page. Editable ones are marked by an accent rule
   and a "Your words" tag; derived ones read as plain document. The distinction
   has to be visible at a glance, or the auditor will try to edit the findings
   and wonder why nothing happens. */
.iar-wrap { padding: 20px 24px 60px; }
.iar-grid { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .iar-grid { grid-template-columns: 1fr; } }

.iar-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; }
.iar-nav-head {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.iar-nav-link {
  text-align: left; background: none; border: none; cursor: pointer;
  font-size: 13px; line-height: 1.45; padding: 5px 8px; border-radius: 6px;
  color: var(--slate); border-left: 2px solid transparent;
}
.iar-nav-link:hover { background: var(--paper); }
.iar-nav-link.ed { color: var(--text); font-weight: 600; border-left-color: var(--accent); }

.iar-doc {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 34px 42px 44px; max-width: 860px;
}
.iar-readonly {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 14px; font-size: 13px; color: var(--slate); margin-bottom: 24px; line-height: 1.55;
}
.iar-sec { margin-bottom: 30px; }
.iar-sec.ed { border-left: 3px solid var(--accent); padding-left: 18px; margin-left: -21px; }
.iar-h {
  font-size: 16px; font-weight: 700; margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.iar-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 2px 7px; border-radius: 10px;
}
.iar-sub { margin: 16px 0; }
.iar-h3 { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.iar-p { font-size: 13px; line-height: 1.75; margin-bottom: 10px; overflow-wrap: anywhere; }
.iar-p.ed {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--white);
  transition: border-color .15s, box-shadow .15s; min-height: 44px;
}
.iar-p.ed:hover  { border-color: var(--slate); }
.iar-p.ed:focus  { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
/* The placeholder is the writing prompt, so it must survive until the auditor
   actually types — an empty box tells them nothing about what belongs there. */
.iar-p.ed:empty::before { content: attr(data-placeholder); color: var(--muted); font-style: italic; }
.iar-add {
  background: none; border: 1px dashed var(--line); border-radius: 8px; cursor: pointer;
  font-size: 12px; color: var(--muted); padding: 7px 12px; width: 100%; margin-top: 4px;
}
.iar-add:hover { border-color: var(--accent); color: var(--accent); }
.iar-list { font-size: 13px; line-height: 1.75; padding-left: 22px; margin-bottom: 10px; }
.iar-gap { height: 10px; }
.iar-tblwrap { overflow-x: auto; margin-bottom: 12px; }
.iar-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.iar-tbl th, .iar-tbl td {
  border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top;
}
.iar-tbl th { background: var(--paper); font-weight: 700; }
.iar-save-state { font-size: 12px; color: var(--muted); margin-right: 4px; align-self: center; }
.pl-rep { margin-bottom: 12px; }
.pl-rep:last-child { margin-bottom: 0; }
/* ⚠ The Plan tab's Issued reports box holds ONE card per row — Initial IAR,
   then Final IAR — so its grid is a single column. `.qv-ev-grid`'s default
   `repeat(auto-fill, minmax(230px, 1fr))` is right where cards are a gallery,
   but here it silently fits TWO tracks once the left column passes ~470px and
   leaves the generated card at half width beside a full-width "Not generated
   yet" placeholder. The two must measure the same and match the Scope Note box
   above them, whether the report exists or not (bug, 2026-08-08). Same fix as
   `.qa-iar-sub + .qv-ev-grid`. */
.pl-rep .qv-ev-grid { grid-template-columns: 1fr; }

/* Editor with an information column */
.iar-grid-3 { grid-template-columns: 200px minmax(0,1fr) 280px; }
@media (max-width: 1200px) { .iar-grid-3 { grid-template-columns: 200px minmax(0,1fr); } .iar-grid-3 .iar-info { display:none; } }
.iar-info { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; }
.iar-stale {
  margin-top: 12px; font-size: 12px; line-height: 1.5; color: #e65100;
  background: #fff3e0; border: 1px solid #ffb74d; border-radius: 8px; padding: 9px 12px;
}
.iar-comment { border-bottom: 1px solid var(--line); padding: 10px 0; }
.iar-comment-h { font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; }
.iar-comment-h span { font-weight: 400; color: var(--muted); font-size: 11px; }
.iar-comment-b { font-size: 13px; line-height: 1.6; margin-top: 4px; overflow-wrap: anywhere; }
.iar-hist { border-left: 2px solid var(--line); padding: 2px 0 14px 14px; position: relative; }
.iar-hist::before {
  content: ''; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}
.iar-hist-what { font-size: 13px; font-weight: 600; line-height: 1.5; }
.iar-hist-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Sub-header tabs as one flush segmented group — no gaps between items.
   Overrides .ad-sub-right's gap for the tabs only. */
.ad-tab-group { display: flex; gap: 4px; margin-left: auto; }
/* Every tab rounded on BOTH sides (was a joined segmented group with outer
   corners only). */
.ad-tab-group .ad-tab { border-radius: 8px; margin: 0; }
/* The active tab still answers hover — without this its dark fill tied with
   the hover rule and, being later in the file, always won, so hovering the
   selected tab did nothing. */
.ad-tab.on:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 84%, #fff); color: var(--white); }

/* ── Notification bell ── */
.nb-bell {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: 8px; width: 34px; height: 30px; cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nb-bell:hover { border-color: var(--slate); }
.nb-badge {
  position: absolute; top: -6px; right: -6px; background: #c62828; color: white;
  font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 5px; min-width: 10px;
}
.nb-row {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: none; padding: 12px 14px 12px 16px; border-radius: 10px;
  cursor: pointer; position: relative; font: inherit; color: var(--ink);
}
.nb-row:hover { background: var(--paper); }
/* Unread: soft tinted row + a blue dot on the left edge — the reference look. */
.nb-row.fresh { background: #F3F5FA; }
.nb-row.fresh:hover { background: #EDF0F8; }
.nb-dot {
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #3B82F6;
}
.nb-av {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: #E8EBF2; color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.nb-main { min-width: 0; }
.nb-t { display: block; font-size: 13px; line-height: 1.5; }
.nb-t b { font-weight: 700; }
.nb-q { color: var(--slate); }
.nb-m { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ── Shared discussion thread ── */
/* ── Comment threads — the shared discussion component (all modules) ────── */
.ct-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ct-head-t { font-size: 16px; font-weight: 700; color: var(--ink); }
.ct-count {
  min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #E8EBF2; color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.ct-av {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: #E8EBF2; color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.ct-item { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ct-item:last-child { border-bottom: none; }
.ct-item.ct-reply { margin-left: 42px; }
.ct-body { flex: 1; min-width: 0; }
.ct-who { font-size: 14px; font-weight: 700; color: var(--ink); }
.ct-text { font-size: 13px; line-height: 1.6; margin-top: 4px; overflow-wrap: anywhere; }
.ct-mention {
  background: #E8F1FE; color: #2563EB; font-weight: 600;
  padding: 1px 6px; border-radius: 10px;
}
/* Footer: like pill · | · Reply · | · time — the reference row. */
.ct-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ct-react {
  border: 1px solid var(--line); background: var(--white); border-radius: 12px;
  padding: 2px 9px; font-size: 12px; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; gap: 4px;
}
.ct-react b { font-weight: 700; font-size: 11px; }
.ct-react:hover { background: var(--paper); }
.ct-react.on { background: #FFF6DE; border-color: #EAD9A8; }
.ct-sep { width: 1px; height: 14px; background: var(--line); }
.ct-linkact {
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink); font-family: inherit;
}
.ct-linkact:hover { color: var(--accent); }
.ct-ago { font-size: 12px; color: var(--muted); }
/* Composer: one bordered box — text on top, tool row under a divider, and the
   whole box lights up (accent border) while focused, like the reference. */
.ct-composer { margin-bottom: 6px; }
.ct-composer.compact { margin-top: 10px; }
.ct-cbox {
  position: relative; border: 1px solid var(--line); border-radius: 10px;
  background: var(--white); overflow: visible;
}
.ct-cbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ct-ta {
  display: block; width: 100%; border: none; outline: none; resize: none;
  background: none; padding: 12px 14px 8px; font: inherit; font-size: 13px;
  line-height: 1.6; color: var(--ink); min-height: 44px; max-height: 220px; overflow-y: auto;
}
.ct-ta:empty::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.ct-ta ol, .ct-text ol { margin: 4px 0; padding-left: 20px; }
/* Formatting buttons — left side of the tool row. */
.ct-fmt { display: inline-flex; gap: 2px; }
.ct-fmtbtn {
  width: 28px; height: 28px; border-radius: 6px; border: none; background: none;
  color: var(--slate); cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; font-family: inherit;
}
.ct-fmtbtn:hover { background: var(--paper); color: var(--ink); }
.ct-fmtb { font-size: 13px; font-weight: 800; }
/* ⋯ menu on your own comments — the avatar-dropdown design. */
.ct-top { display: flex; align-items: center; justify-content: space-between; }
.ct-more {
  width: 26px; height: 26px; border-radius: 50%; border: none; background: none;
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ct-more:hover { background: var(--paper); color: var(--ink); }
.ct-moredd .tp-dd-menu { min-width: 150px; }
.ct-moredd .tp-dd-item svg { flex: 0 0 auto; }
.ct-moredd .tp-dd-item.ct-del:hover { background: #F9E9E7; color: #B3261E; }
.ct-av-all { font-weight: 800; color: #2563EB; background: #E8F1FE; }
.ct-at-sub { font-weight: 400; color: var(--muted); font-size: 12px; }
.ct-tools {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--line); padding: 8px 10px;
}
.ct-at {
  width: 28px; height: 28px; border-radius: 50%; border: none; background: none;
  color: var(--slate); font-size: 15px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ct-at:hover { background: var(--paper); color: var(--ink); }
.ct-send { border-radius: 8px; }
/* The @ picker — floats over the composer, avatar + name rows. */
.ct-at-menu {
  position: absolute; left: 12px; top: calc(100% - 40px); z-index: 30;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14); min-width: 220px; padding: 6px;
  max-height: 220px; overflow: auto;
}
.ct-at-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; background: none; padding: 7px 9px; border-radius: 9px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); font-family: inherit;
}
.ct-at-opt .ct-av { flex: 0 0 26px; width: 26px; height: 26px; font-size: 10px; }
.ct-at-opt:hover, .ct-at-opt.on { background: #EFF4FB; }
.ct-at-none { font-size: 12px; color: var(--muted); padding: 8px; }

/* ── Topbar account cluster: circle bell · circle guide · avatar dropdown ── */
.nb-bell {
  border-radius: 50%; width: 34px; height: 34px;
  color: var(--slate);
}
.nb-bell:hover { color: var(--ink); }
.nb-bell svg { display: block; }
.tp-circle {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line);
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center;
}
.tp-circle:hover { border-color: var(--slate); color: var(--ink); }
.tp-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent); font-size: 12px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.tp-avatar:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* Same shape as the editor's Download menu. */
.tp-dd { position: relative; }
.tp-dd-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10); z-index: 40; min-width: 210px; padding: 5px;
}
.tp-dd-menu.open { display: block; }
.tp-dd-name { padding: 9px 12px 7px; }
.tp-dd-n { font-size: 14px; font-weight: 700; }
.tp-dd-e { font-size: 12px; color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; }
.tp-dd-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.tp-dd-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 12px;
  background: none; border: none; border-radius: 7px; cursor: pointer;
  font-size: 14px; color: var(--ink); line-height: 1.4;
}
.tp-dd-item:hover:not(:disabled) { background: var(--paper); }
.tp-dd-item:disabled { color: var(--muted); cursor: not-allowed; }

/* Search field with a leading icon — the svg floats over the input's padding. */
.soa-search { position: relative; display: inline-flex; align-items: center; }
.soa-search svg {
  position: absolute; left: 10px; color: var(--muted); pointer-events: none;
}
.soa-search input:focus + svg, .soa-search:focus-within svg { color: var(--slate); }

/* ── Filter popover (Library) — categories left, options fly out beside ─────*/
.lib-filter-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 35px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--white);
  font-size: 13px; color: var(--slate); cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s;
}
.lib-filter-btn:hover { border-color: var(--slate); color: var(--ink); }
.flt-badge {
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 10px; padding: 1px 6px; line-height: 1.4;
}
.flt-wrap { position: relative; }
.flt-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 120;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12); min-width: 232px; padding: 6px;
  display: none;
}
.flt-pop.open { display: block; }
.flt-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 8px 8px 12px; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.flt-x { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 3px 6px; border-radius: 5px; }
.flt-x:hover { background: var(--paper); color: var(--ink); }
.flt-row {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border: none; background: none; text-align: left;
  font-size: 14px; color: var(--ink); border-radius: 8px; cursor: pointer; font-family: inherit;
}
.flt-row:hover, .flt-row.on { background: var(--paper); }
.flt-lab { flex: 1; }
.flt-cnt {
  font-size: 11px; font-weight: 600; color: var(--slate);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; min-width: 14px; text-align: center;
}
.flt-chev { color: var(--muted); font-size: 13px; }
.flt-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--line); margin-top: 4px; padding: 10px 8px 6px;
}
.flt-sub {
  position: absolute; left: calc(100% + 8px); top: 0; z-index: 121;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12); min-width: 190px; padding: 6px;
  display: none;
}
.flt-sub.open { display: block; }
.flt-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border: none; background: none; text-align: left;
  font-size: 14px; color: var(--ink); border-radius: 8px; cursor: pointer; font-family: inherit;
}
.flt-opt:hover { background: var(--paper); }
.flt-tick { color: var(--accent); font-weight: 700; width: 14px; text-align: center; flex: 0 0 auto; }

/* Right-aligned Library columns: alignment is the CONTENT's position, so the
   avatar chips and buttons move right along with the text. */
/* Generic table-group-right utility — the Library recipe, reusable: the cell
   shrinks to its content (the table's flexible column absorbs all slack, so
   the group packs right), content left-aligned so every item in a column
   starts on the same line, 28px left padding as the fixed gutter. */
th.tgr, td.tgr { width: 1%; white-space: nowrap; text-align: left; padding-left: 28px; }
/* Identity column partner: fixed narrow so the title column sits close. */
th.tid, td.tid { width: 90px; white-space: nowrap; }
/* Long free-text values inside a packed column truncate instead of stretching
   the table past its container. */
td.tgr .nc-reg-area { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* The right-hand group: columns PACKED against the table's right edge (the
   Document column absorbs all slack), but content LEFT-aligned inside each
   column — every item in a column starts on the same line, so the spacing
   between columns reads fixed instead of wobbling with each value's width.
   The 28px left padding is the widened gutter (28 + 12 = 40px between
   columns). */
.lib-table th.lib-r, .lib-table td.lib-r {
  width: 1%; white-space: nowrap; text-align: left; padding-left: 28px;
}
/* Narrow code column pulls Document in close to Code. */
.lib-table .lib-code { width: 90px; white-space: nowrap; }
/* Status pill — approved green, revision amber. */
.lib-st {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 4px; white-space: nowrap; text-transform: capitalize;
}
.lib-st.ok  { background: #e8f5e9; color: #2e7d32; }
.lib-st.rev { background: #fff4e0; color: #9a6200; }
/* Pending is the ONE status pill that carries a border — dotted, on no fill,
   so an outstanding document reads as an outline of one rather than a state
   the ISMS has actually reached. Padding drops 1px each side to absorb the
   border and keep every pill the same height. */
.lib-st.pend {
  background: transparent; color: var(--slate);
  border: 1px dashed var(--muted); padding: 2px 7px;
}

/* Library toolbar: the ISO theme tabs only appear in Group view, so they sit
   between Filter and the right-aligned List/Group switch. This row carries one
   control more than the Documents toolbar, so the tabs run a step tighter than
   `.doc-tab` — without it the List/Group switch wraps to a second line. */
/* Download + the view switch travel together at the right end of the row;
   the cluster owns the auto margin, so `.ad-tab-group` gives its own up. */
.lib-bar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Every control on this row is 35px tall — search, Filter, the view switch —
   so Download drops `.btn-sm`'s vertical padding and matches them. */
.lib-bar-right .btn { height: 35px; padding-top: 0; padding-bottom: 0; }
/* ── Sidebar group labels ───────────────────────────────────────────────────
   The neutral default, plus one gradient exception. */
.sb-grp { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); }
/* Workspace wears the document-type palette (OCR_TYPE_COLOUR: policy/SOP
   green, form yellow, register purple). The yellow stop sits at 62% rather
   than the middle, and is the darker #E0A800 rather than #FED224 — at 12px on
   white the brighter one drops below readable contrast. `background-clip:text`
   needs a transparent fill to show through. */
.sb-grp-ws {
  background: linear-gradient(95deg, #2A715B 0%, #2A715B 22%, #E0A800 62%, #B450FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Library stats row: completion donut + one count box per type ───────────
   Boxes wear the dashboard mini-card recipe (white, borderless, 14px radius)
   minus the sparkline; the donut box is wider because it carries a chart and
   a legend. */
.lib-stats {
  display: grid; grid-template-columns: 1.9fr repeat(4, 1fr); gap: 14px;
  margin-bottom: 22px;
}
/* Grid rows stretch, so the boxes are as tall as the donut. Pushing the number
   to the bottom makes that height read as layout rather than as slack. */
.lib-stat { background: var(--white); border-radius: 14px; padding: 14px 16px 12px;
  display: flex; flex-direction: column; }
.lib-stat-row { margin-top: auto; padding-top: 20px; }
.lib-stat-sub { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 3px;
  white-space: nowrap; }
/* approved-over-total: the total is the denominator, so it stays muted and a
   step down in size rather than competing with the figure that moves. */
.lib-stat-frac span { font-size: 15px; font-weight: 600; color: var(--muted); }
.lib-dn-body { display: flex; align-items: center; gap: 6px; flex: 1; min-height: 0; }
.lib-dn { position: relative; flex: none; }
.lib-dn-svg { display: block; }
/* The percentage sits in the hole; pointer-events off so it never steals a
   segment's hover. */
.lib-dn-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; gap: 1px;
}
/* The percentage carries the RAG band: red while most of the ISMS is still
   unbaselined, amber in the middle, green as it approaches complete. Same
   80/40 thresholds as audit readiness. */
.lib-dn-mid b { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; }
.lib-dn-mid.ok  b { color: var(--band-ok); }
.lib-dn-mid.mid b { color: var(--band-mid); }
.lib-dn-mid.low b { color: var(--band-low); }
.lib-dn-mid span { font-size: 10px; font-weight: 600; color: var(--muted); }
.lib-dn-arc { cursor: default; transition: opacity .15s; }
.lib-dn:hover .lib-dn-arc { opacity: .45; }
.lib-dn .lib-dn-arc:hover { opacity: 1; }
.lib-dn-pop {
  display: none; position: absolute; bottom: calc(100% - 6px); left: 50%;
  transform: translateX(-50%); z-index: 5;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(23,38,59,.14); padding: 8px 11px;
  display: none; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12px; color: var(--slate);
}
.lib-dn-pop.on { display: flex; }
.lib-dn-pop b { color: var(--ink); font-weight: 700; }
.lib-dn-legend { display: flex; flex-direction: column; gap: 9px; min-width: 0; flex: 1; }
.lib-dn-leg { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--slate); }
.lib-dn-leg-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.lib-dn-leg b { font-size: 13px; font-weight: 700; color: var(--ink); }
.lib-dn-leg b span { font-weight: 600; color: var(--muted); }
.lib-dn-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* View switch: the trigger is the CURRENT view's icon plus a chevron, nothing
   else — same 35px shell as the Filter button so the row reads as one set of
   controls. The menu reuses the topbar dropdown recipe (`.tp-dd-menu` /
   `.tp-dd-item`) rather than growing a second copy of it. */
.lib-vw { position: relative; }
.lib-vw-btn {
  display: inline-flex; align-items: center; gap: 3px; height: 35px; padding: 0 8px 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--white);
  color: var(--slate); cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s;
}
.lib-vw-btn:hover { border-color: var(--slate); color: var(--ink); }
.lib-vw-btn svg { display: block; }
.lib-vw-chev { color: var(--muted); }
.lib-vw-menu { min-width: 152px; }
.lib-vw-menu .tp-dd-item svg { flex: none; color: var(--slate); }
/* The view you are already in stays marked while the menu is open. */
.lib-vw-menu .tp-dd-item.on { background: var(--paper); font-weight: 600; }
.lib-vw-menu .tp-dd-item.on svg { color: var(--accent); }

/* Same card on the dashboard: full width of the right column, above the stat
   cards. `.lib-stat-wide` sizes itself from the Library's grid, so the width
   has to be reclaimed here. */
.rd-comp { width: 100%; margin-bottom: 14px; }

.lib-search { flex: 0 1 220px; min-width: 150px; }
.lib-theme-tabs { margin-bottom: 0; padding: 4px; }
.lib-theme-tabs .doc-tab { padding: 7px 12px; font-size: 13px; }

/* Library View panel — read-only document content. */
.lv-meta { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
/* Own kv row — .de-kv looks the same but lives in the editor's injected
   stylesheet, which does not exist until the editor has been opened once.
   Tone matches the finding slide-out's facts: muted label, 600 value. */
.lv-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; min-height: 27px; color: var(--muted); }
.lv-kv b { color: var(--ink); font-weight: 600; text-align: right; font-size: 13px; }
.lv-warn {
  background: #FFF6DE; border: 1px solid #EAD9A8; border-radius: 8px;
  padding: 9px 12px; font-size: 12px; line-height: 1.55; color: #7A5A00; margin-bottom: 14px;
}
.lv-sec { margin-bottom: 26px; }
.lv-sec .lv-sec { margin: 12px 0 12px 12px; }
.lv-h { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.lv-sec .lv-sec .lv-h { font-size: 14px; }
.lv-p { font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 8px; }
.lv-list { font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 8px; padding-left: 20px; }
.lv-tblwrap { overflow-x: auto; margin: 0 0 10px; }
.lv-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.lv-tbl th, .lv-tbl td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.lv-tbl th { background: var(--paper); font-weight: 600; }
.lv-note {
  background: var(--paper); border-left: 3px solid var(--muted); border-radius: 0 6px 6px 0;
  padding: 8px 11px; font-size: 13px; line-height: 1.55; color: var(--slate); margin: 0 0 8px;
}

/* Library-only sizing. Every class here is shared elsewhere — .dt-title and
   .dt-code with the Documents page, .btn-sm with every button, and the thead
   rule with the three other .assign-table tables — so all four are scoped. */
/* Titles inherit the body's 1.65 line-height, which is reading-prose leading —
   on a one-line label it puts ~9px of air inside a 14px title and makes the
   spacing to the meta line below read as uneven. Titles want ~1.35. */
.lib-table .dt-title { font-size: 14px; line-height: 1.35; }

/* Same title/meta rhythm on the three document tables. .dt-title and .dt-code
   are shared across all of them, so each table sizes its own. */
.lib-table .dt-sub,
.doc-table .dt-sub,
.fe-table  .dt-sub { line-height: 1.4; margin-top: 3px; }
.doc-table .dt-title,
.fe-table  .dt-title { font-size: 14px; line-height: 1.35; }
.doc-table .dt-code,
.fe-table  .dt-code { font-size: 12px; }
.fe-table thead th,
.asg-table thead th { font-size: 11px; }
/* Assignment's two tables: same body size and row height as the rest. */
.asg-table tbody td { padding: 15px 12px; font-size: 14px; }
.asg-table .dt-code { font-size: 12px; }
.asg-table .dt-title { font-size: 14px; line-height: 1.35; }
.lib-table .btn-sm { font-size: 14px; }
.lib-table thead th { font-size: 11px; }
.lib-table .dt-code { font-size: 12px; }

/* Management Review list — a table like the rest, no vertical rules. */
.mr-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); }
.mr-table thead th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); background: var(--warm);
  padding: 8px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.mr-table tbody td { padding: 15px 14px; font-size: 14px; border-bottom: 1px solid var(--line); }
.mr-table tbody tr:last-child td { border-bottom: none; }
.mr-table tbody tr { cursor: pointer; transition: background .12s; }
.mr-table tbody tr:hover { background: var(--paper); }
.mr-title { font-size: 14px; font-weight: 600; line-height: 1.35; }

/* The wrapper runs overflow:visible so avatar hover-cards can escape it, so the
   corner rounding has to live on the cells rather than being clipped. */
/* The wrapper's rounded border was being covered at the corners: .plan-table
   carries `background: var(--white)`, and a table's background paints as a plain
   square that fills the wrapper edge to edge, squaring off all four corners
   however the cells are rounded. The radius belongs on the table too, and the
   white belongs on the wrapper. */
.plan-table-wrap { background: var(--white); }
.plan-table-wrap > table { overflow: hidden; border-radius: 10px; background: none; }
.plan-table-wrap > table thead th:first-child { border-top-left-radius: 10px; }
.plan-table-wrap > table thead th:last-child  { border-top-right-radius: 10px; }
.plan-table-wrap > table tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.plan-table-wrap > table tbody tr:last-child td:last-child  { border-bottom-right-radius: 10px; }

/* The intake field metrics as a reusable class — inline-styled controls in
   panels and modals adopt this instead of restating padding/size each time. */
.fld {
  width: 100%; box-sizing: border-box; padding: 11px 15px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 15px; font-family: inherit; background: var(--paper); color: var(--ink);
  transition: all .18s;
}
.fld:focus {
  outline: none; border-color: var(--accent); background: var(--white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
textarea.fld { resize: vertical; min-height: 88px; line-height: 1.5; }

/* ── Date picker ──────────────────────────────────────────────────────────────
   Replaces the browser's native calendar, which cannot be styled. The field
   keeps its native <input type="date"> semantics; only the popup is ours. */
.dp-input { cursor: pointer; }
/* Hide the native indicator — our own icon sits in the field instead. */
.dp-input::-webkit-calendar-picker-indicator { display: none; }
.dp-input::-webkit-inner-spin-button { display: none; }

.dp-cal {
  /* Above modals (z-index 1000) and slide-out panels, since a date field can
     live inside either — a picker that opens behind its own dialog is useless. */
  position: absolute; z-index: 2000;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 16px; width: 292px;
}
.dp-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.dp-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.dp-nav {
  width: 28px; height: 28px; border: none; background: none; cursor: pointer;
  border-radius: 8px; font-size: 18px; line-height: 1; color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center; font-family: inherit;
}
.dp-nav:hover { background: var(--paper); color: var(--ink); }
.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow span {
  text-align: center; font-size: 12px; color: var(--muted); font-weight: 500;
  padding-bottom: 6px;
}
.dp-day {
  height: 34px; border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 14px; color: var(--ink); border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dp-day:hover:not(.dp-empty) { background: var(--paper); }
.dp-day.today { font-weight: 700; color: var(--accent); }
/* The selected day is a filled rounded square, as in the reference. */
.dp-day.on { background: var(--ink); color: var(--white); font-weight: 600; }
.dp-empty { cursor: default; }
.dp-time {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.dp-time label { font-size: 13px; color: var(--slate); }
.dp-time-in {
  flex: 1; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 14px; background: var(--paper); color: var(--ink);
}
.dp-foot {
  display: flex; justify-content: space-between; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.dp-link {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--accent); font-weight: 500; padding: 0;
}
.dp-link:hover { text-decoration: underline; }
/* Calendar icon inside the date field. The wrapper inherits the field's own
   width so the layout is unchanged by the extra element. */
.dp-wrap { position: relative; display: block; width: 100%; }
.dp-wrap .dp-input { padding-right: 40px; }
.dp-ico {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); cursor: pointer; display: inline-flex; line-height: 0;
}
.dp-wrap:focus-within .dp-ico, .dp-ico:hover { color: var(--accent); }

/* ── Late-file override, keep at the END of the stylesheet ───────────────────
   Every table carries its own `.x thead th { padding... }` rule at specificity
   (0,1,2), which TIES `thead th.tgr` — and a tie goes to whichever rule comes
   later in the file. This block must therefore sit after all of them, or the
   packed-column headers start 16px left of their own values. */
thead th.tgr { padding-left: 28px; text-align: left; }

/* View Only chip beside the Org Chart title — the document editor's Read Only
   chip, redefined here because .de-ro lives in the editor's injected styles. */
.oc-ro {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--slate); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 10px; background: var(--white); white-space: nowrap;
}
.iz-title-row { display: flex; align-items: center; gap: 10px; }
/* Action icons in the members table — the document editor's edit/delete
   button treatment. */
.oc-act { white-space: nowrap; }
.oc-act-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; padding: 4px 7px; color: var(--slate); line-height: 1;
}
.oc-act-btn:hover { background: var(--warm); border-color: var(--line); color: var(--ink); }
.oc-act-btn.del:hover { background: var(--blush-l); border-color: var(--blush); color: var(--danger, #B3261E); }
/* Your own row: the control stays VISIBLE so the column keeps its shape and
   the reason is on hover, rather than one row silently missing a button. */
.oc-act-btn:disabled { opacity: .32; cursor: default; }
.oc-act-btn:disabled:hover { background: none; border-color: transparent; color: var(--slate); }

/* Separator between the actor lines on a merged Actions Taken row. */
.at-msep { margin: 0 6px; color: var(--line); }

/* A value that navigates: underlined, keeps the value styling, no button chrome. */
.ii-link { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.ii-link:hover { color: var(--accent); }

/* ── Shared upload zone ──────────────────────────────────────────────────────*/
.uz-drop {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 1.5px dashed var(--line); border-radius: 10px;
  padding: 22px 16px; text-align: center; cursor: pointer; color: var(--slate);
  background: var(--white); transition: border-color .15s, background .15s;
}
.uz-drop:hover, .uz-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--white)); }
.uz-drop svg { color: var(--slate); }
.uz-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.uz-h { font-size: 12px; color: var(--muted); }
.uz-drop .uz-browse { margin-top: 4px; }
.uz-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.uz-file {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: var(--white);
}
.uz-badge { width: 32px; height: 38px; }
/* The qv-ev-badge colours are scoped to .qv-ev-card parents, so the zone's
   badges need their own — without these the badge rendered as an invisible
   white box (the "missing icon" bug). */
.uz-badge.pdf  { background: #c0392b; }
.uz-badge.doc  { background: #1565c0; }
.uz-badge.xls  { background: #1e7145; }
.uz-badge.img  { background: #7b1fa2; }
.uz-badge.file { background: #78909c; }
.uz-main { flex: 1; min-width: 0; }
.uz-name { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.uz-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.uz-ok { color: #2e7d32; font-weight: 600; }
.uz-err { color: #c62828; font-weight: 600; }
.uz-barwrap { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 7px; }
/* ⚠️ `display: block` above beats the UA stylesheet's `[hidden]{display:none}`,
   so `barwrap.hidden = true` did NOTHING and an empty grey track sat under
   every staged file — a progress bar that never moved (bug, 2026-08-11). Same
   trap `.ocr-foot[hidden]` documents. */
.uz-barwrap[hidden] { display: none; }
.uz-bar { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--teal, #0e6e6d); transition: width .1s linear; }
/* The staging sweep: long enough to read as the file loading. The default .1s
   is right for the upload, where the timer steps the width every 50ms. */
.uz-bar.load { transition: width .45s cubic-bezier(.4, 0, .2, 1); }
.uz-x {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 1px solid transparent; border-radius: 6px;
  background: none; cursor: pointer; color: var(--slate); padding: 0;
}
.uz-x:hover { background: var(--blush-l); border-color: var(--blush); color: var(--danger, #B3261E); }
/* Same tie-break for the BODY cells: `.plan-table tbody td` (0,1,2) out-ranks
   `td.tgr` (0,1,1) and kept its 14px padding, so on the plan-table pages
   (Audit Programmes, NC Management, Incidents, NC Register) the values sat
   14px LEFT of their own headers. This rule ties it and, being later, wins. */
tbody td.tgr { padding-left: 28px; }

/* Incident breach-notification flag: its own column, icon only, the reminder
   text on an immediate hover tip (the native title attr is too slow to feel
   alive). Amber = pending, red = overdue. */
.inc-alert-col { width: 34px; text-align: center; }
.inc-warn { position: relative; display: inline-flex; color: #e65100; cursor: help; }
.inc-warn.overdue { color: #c62828; }
.inc-warn::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translate(-50%, -3px);
  z-index: 90; width: max-content; max-width: 220px;
  background: var(--white); color: var(--slate);
  border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 6px 18px rgba(24,32,56,.10);
  font-size: 12px; font-weight: 500; line-height: 1.5; padding: 7px 10px;
  opacity: 0; visibility: hidden; transition: opacity .13s, transform .13s;
  pointer-events: none;
}
.inc-warn:hover::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Forms & Evidence — icon-only history button beside Upload. NOTE: the
   thead/tbody td.tgr padding overrides above this must stay the LAST table
   rules; this block is button chrome only, no table cells. */
.fe-hist-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  margin-left:6px;vertical-align:middle;border:1px solid var(--line);border-radius:8px;
  background:var(--white);color:var(--slate);cursor:pointer}
.fe-hist-btn:hover{background:var(--paper);color:var(--ink)}
.lib-st.dr  { background: #ececf1; color: #565a66; }
.lib-st.rej { background: #f9e9e7; color: #b3261e; }
.fe-file-name{font-size:12px;color:var(--slate);vertical-align:middle;display:inline-block;
  max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:2px}
/* In the evidence-history table the file badge sits INLINE beside the name
   (the base .qv-ev-badge is display:flex, which stacks it onto its own line),
   and shrinks to table scale. */
.fe-table .uz-badge{display:inline-flex;vertical-align:middle;width:28px;height:32px;margin-right:6px}

/* Notifications panel — narrower than the standard slide-out. */
.sp-panel.sp-notif { width: min(450px, 92vw); }
.sp-notif .sp-body { padding: 10px 8px; }

/* Organisation Profile + New Org branding step */
.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .op-grid { grid-template-columns: 1fr; } }
.op-card { padding: 20px 24px; }
.op-card-t { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.no-steptag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; }
.no-colorrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.no-colorrow input[type=color] { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--white); cursor: pointer; }
.no-swatch { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 700; }
.no-logorow { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.no-logoprev { max-height: 48px; max-width: 200px; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px; background: var(--white); }
.op-logobox { margin-top: 10px; }
/* display:inline-flex on .btn beats the hidden attribute — same trap as the
   generate modal's Close button. */
.btn[hidden] { display: none; }

/* Full-page organisation creation (no shell): logo header + centred 550px column. */
.ocr-page { position: fixed; inset: 0; background: var(--warm); overflow-y: auto; z-index: 50; }
.ocr-head { padding: 14px 24px; background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 51; }
/* Logo and ✕ line up with the form card's edges, not the viewport's. */
.ocr-head-in { width: min(550px, 100%); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; }
.ocr-head-logo { display: flex; align-items: center; gap: 10px; }
.ocr-head-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--white); color: var(--slate); font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.ocr-head-x:hover { background: var(--paper); color: var(--ink); }
.ocr-body { display: flex; justify-content: center; padding: 48px 20px 80px; }
.ocr-col { width: min(550px, 100%); background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 30px 34px 26px; }
/* Which of the two flows you are in, above the title — creating the org and
   setting it up are separate jobs with separate step counts. */
.ocr-flow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px; }
.ocr-title { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.ocr-col .no-steptag { margin-bottom: 20px; }
.ocr-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px;
  border-top: 1px solid var(--line); padding-top: 18px; }

/* Step progress segments (five: details, branding, intake, summary, generate). */
.ocr-bars { display: flex; gap: 8px; margin: 4px 0 8px; }
/* Registration's bars carry the gap the step LABEL used to fill — its heading
   is the step name now, so there is nothing between the bars and the fields. */
/* Shared by registration and the forgot-password flow — both are ocr-shell
   walk-throughs and their bars must sit the same distance above the fields. */
.su-bars, .fp-bars { margin-bottom: 22px; }
.ocr-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden;
  transition: background .2s; }
/* Two ways to fill a segment, and the difference is whether it can ANIMATE.
   `.on` paints the whole bar and is what the org-setup flow uses — that flow
   rebuilds its bar row on every step (two bars, then three), and a rebuilt
   element has no previous width to transition from. Registration instead
   builds its bars ONCE and moves this inner fill, so the segment visibly
   fills going forward and drains going back. */
.ocr-bar.on { background: var(--accent); }
.ocr-bar-f { display: block; width: 0; height: 100%; border-radius: 3px;
  background: var(--accent); transition: width .34s cubic-bezier(.4, 0, .2, 1); }
.ocr-steplabel { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 18px; }

/* ── Create-organisation MODAL (2026-09-18, widened twice the same day) ─────
   NEAR FULL-SCREEN width, the same idea `.modal-sheet` already uses for the
   plan-upgrade dialog — a comparison or a form that wants room, not a
   pop-up. The FORM ITSELF stays the width it always was and sits centred
   (`.ocm-body-inner`) — a wider dialog is not an invitation to stretch four
   fields across it. The title lines up with THAT column's left edge, not
   the card's own padding, so heading and fields read as one block; the
   header is a 3-column grid (logo left, progress bar CENTRED, close right)
   because centring the bar in a `justify-content: space-between` row would
   have meant matching the logo's width by hand.
   `.ocm-modal` skips `.modal-header`/`.modal-body`'s padding rhythm entirely
   and lays its own out. */
/* ~100px clear of the screen on every side (the backdrop's own 20px padding
   is already inside this, so the two never fight for space) — taller now as
   well as wider, rather than a fixed min-height that left a short step
   looking small in a large window. */
.ocm-modal { width: calc(100vw - 200px); max-width: 1300px;
  height: calc(100vh - 200px); max-height: 900px;
  display: flex; flex-direction: column; }
.ocm-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 28px 40px 0; }
.ocm-head-logo { display: flex; align-items: center; gap: 9px; justify-self: start; }
/* Compact pill TRACKS, sized for a header rather than a full page — the
   bars elsewhere in the product (`.ocr-bars`) run the width of a 550px
   column; these sit in the header instead. */
.ocm-bars { display: flex; gap: 6px; justify-self: center; }
.ocm-bars .ocr-bar { width: 34px; height: 4px; }
#ocm-close { justify-self: end; }
.ocm-title { font-size: 24px; font-weight: 700; color: var(--ink);
  max-width: 480px; margin: 22px auto 0; }
/* `flex: 1` is what makes the card TALL rather than merely having a tall
   minimum — it is what gives the footer somewhere to sit at the bottom of
   the card when step 2's content alone would only fill half of it,
   matching the reference's own generous white space below a short form. */
.ocm-body { flex: 1; padding: 24px 40px 4px; overflow-y: auto; }
/* The CENTRED column — unchanged from the form's original width, so growing
   the dialog widens the MARGINS around it, never the fields themselves.
   Same max-width as `.ocm-title`, so the two share a left edge. */
.ocm-body-inner { max-width: 480px; margin: 0 auto; }
/* `.modal-footer`'s own `justify-content: flex-end` would push both the
   left (Cancel/Back) and right (Next/Create) divs to the same end —
   `space-between` is what actually separates them. Full modal width, not
   the centred column — the reference's own Continue sits at the dialog's
   corner, not aligned under a narrow form. */
.ocm-foot { padding: 22px 40px 32px; border-top: 0; justify-content: space-between; }
@media (max-width: 900px) { .ocm-modal { width: 100vw; height: 100vh; border-radius: 0; } }

/* Standing reminder on the Organisations page — amber, because an unfinished
   setup is an organisation with no ISMS, not a cosmetic gap. */
.ocr-remind {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #FFF6DE; border: 1px solid #F0DFAE; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 18px;
}
.ocr-remind-tx { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; }
.ocr-remind-tx b { font-size: 14px; font-weight: 700; color: #7A5A00; }
.ocr-remind-tx span { font-size: 13px; color: #8A6A16; }

/* Step 3 — the COMPACT intake wizard (renderSetupWizard), inside the standard
   550px card so the questionnaire matches the header's logo-to-✕ width.
   Sections are a centred number-only tab bar; the title shows on hover. */
.iz-numbar { display: flex; justify-content: center; gap: 8px; margin: 2px 0 18px; }
.iz-numtab { position: relative; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--white); color: var(--muted);
  font-size: 13px; font-weight: 600; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.iz-numtab:hover { border-color: var(--accent); color: var(--accent); }
/* Three states, derived from the answers (see `sectionProgress`):
   `empty` keeps the plain outline above; `partial` is amber at the same soft
   tint the done state uses, so "started" reads as progress rather than as a
   second kind of finished; `done` is the accent tick. */
.iz-numtab.partial { border-color: #E2A93B; background: color-mix(in srgb, #E2A93B 13%, var(--white)); color: #7A5A00; }
.iz-numtab.partial:hover { border-color: #C9922C; color: #7A5A00; }
.iz-numtab.done { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--white)); color: var(--accent); }
.iz-numtab.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.iz-numtab.partial.on { border-color: #C9922C; background: #C9922C; color: #fff; }
/* Hover tooltip: the section title, since the tab itself carries no text. */
.iz-numtab::after { content: attr(data-t); position: absolute; bottom: calc(100% + 7px);
  left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 9px;
  border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.iz-numtab:hover::after { opacity: 1; }
/* Sites & offices: a fixed HQ row plus any number of removable branches. */
.iz-sites { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.iz-site-row { display: flex; align-items: center; gap: 8px; }
.iz-site-tag { flex: none; width: 72px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.iz-site-tag.hq { color: var(--accent); }
.iz-site-row input { flex: 1; min-width: 0; }
.iz-site-rm { flex: none; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--white); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; }
.iz-site-rm:hover { border-color: #B3261E; color: #B3261E; }
.iz-site-add { align-self: flex-start; margin-left: 80px; background: none; border: 0; padding: 2px 0;
  color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.iz-site-add:hover { text-decoration: underline; }

/* The pre-setup briefing — numbered points, not a wall of prose. */
.ocr-note-list { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 16px; }
.ocr-note-item { display: flex; gap: 12px; align-items: flex-start; }
.ocr-note-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; margin-top: 1px; }
.ocr-note-item b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
/* ⚠️ Scoped to `div span`, NOT a bare `.ocr-note-item span` — the numbered
   circle (`.ocr-note-n`) is ALSO a `<span>`, a direct child of `.ocr-note-item`,
   while the description text is a `<span>` nested one level deeper inside the
   `<div>` wrapper. A bare `.ocr-note-item span` selector outranks `.ocr-note-n`
   on specificity (class+type beats class alone) and matched it too, so
   `display:block` broke its inline-flex centering and `color:var(--slate)`
   overrode its white text — the number rendered invisible/off-centre inside
   the circle (found live, 2026-09-27). */
.ocr-note-item div span { display: block; font-size: 13px; color: var(--slate); line-height: 1.55; }
/* `.ocr-foot` is display:flex, which beats the UA stylesheet's [hidden] rule —
   without this, hiding the footer left its buttons on screen. */
.ocr-foot[hidden] { display: none; }

.iz-sw-head { text-align: left; margin-bottom: 16px; }
.iz-sw-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.iz-sw-desc { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

/* Step 4 — the tailored-ISMS summary. */
.ocr-sum-lead { font-size: 14px; color: var(--slate); line-height: 1.6; margin: 0 0 18px; }
.ocr-sum-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ocr-sum-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.ocr-sum-card:first-child { grid-column: 1 / -1; background: color-mix(in srgb, var(--accent) 8%, var(--white));
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.ocr-sum-num { font-size: 24px; font-weight: 700; color: var(--ink); }
.ocr-sum-lab { font-size: 13px; font-weight: 600; color: var(--ink); }
.ocr-sum-sub { font-size: 12px; color: var(--muted); }
.ocr-sum-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 16px 0 0; }
.ocr-sum-foot { margin-top: 20px; }

/* Step 5 — per-category generation bars. Each row's --gencol carries its
   document-type colour (OCR_TYPE_COLOUR); the state circle before the bar goes
   idle ring → spinner → tick in that same colour. --gentick darkens the tick
   where the fill is light (forms yellow). */
.ocr-genwrap { display: flex; flex-direction: column; gap: 16px; }
.ocr-gen-row { display: flex; align-items: center; gap: 12px; }
.ocr-gen-main { flex: 1; min-width: 0; }
.ocr-gen-ic { width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative;
  border: 2.5px solid var(--line); box-sizing: border-box; }
.ocr-gen-ic.spin { border-color: color-mix(in srgb, var(--gencol, var(--accent)) 22%, var(--line));
  border-top-color: var(--gencol, var(--accent)); animation: ocrspin .7s linear infinite; }
.ocr-gen-ic.done { border-color: var(--gencol, var(--accent)); background: var(--gencol, var(--accent)); animation: none; }
.ocr-gen-ic.done::after { content: '✓'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: var(--gentick, #fff);
  font-size: 12px; font-weight: 700; line-height: 1; }
@keyframes ocrspin { to { transform: rotate(360deg); } }
.ocr-gen-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ocr-gen-lab { font-size: 13px; font-weight: 600; color: var(--ink); }
.ocr-gen-count { font-size: 12px; color: var(--muted); }
.ocr-gen-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ocr-gen-fill { height: 100%; width: 0; border-radius: 4px; background: var(--gencol, var(--accent));
  transition: width .18s ease; }
.ocr-gen-row.done .ocr-gen-count { color: var(--ink); font-weight: 600; }
.ocr-gen-done { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--white));
  border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; }
.ocr-gen-done.warn { border-color: #E0C878; background: var(--warning-l); }
.ocr-gen-done-t { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.ocr-gen-done-s { font-size: 13px; color: var(--slate); line-height: 1.6; }

/* Custom colour picker — swatch trigger + popover. */
.cp-swatchbtn { width: 42px; height: 34px; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; padding: 0; }
.cp-swatchbtn:disabled { cursor: default; opacity: .6; }
.cp-pop { position: fixed; z-index: 1200; width: 240px; background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.18);
  padding: 12px; }
.cp-sv { position: relative; width: 100%; height: 140px; border-radius: 8px; cursor: crosshair;
  touch-action: none; overflow: hidden; }
.cp-sv-w { position: absolute; inset: 0; background: linear-gradient(to right, #fff, transparent); border-radius: 8px; }
.cp-sv-b { position: absolute; inset: 0; background: linear-gradient(to top, #000, transparent); border-radius: 8px; }
.cp-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); transform: translate(-6px,-6px);
  pointer-events: none; }
.cp-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 5px;
  margin: 12px 0 10px; outline: none;
  background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.cp-row { display: flex; align-items: center; gap: 8px; }
.cp-prev { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); }
.cp-hexlbl { font-size: 12px; font-weight: 700; color: var(--slate); font-family: var(--mono, monospace); }
/* A reporter's incident row: progress visible, details locked. */
.inc-row-locked { cursor: default; }
.inc-row-locked:hover { background: inherit; }
/* NC Management toolbar: the tab group rides the filter bar's right edge. */
.soa-filter-bar .nc-tabbar { margin-left: auto; }

/* A public identifier — users.user_code / orgs.org_code. Monospaced on purpose:
   these get read down a phone line and typed into search boxes, where 0/O and
   1/l in a proportional face are a real cost. Click-to-copy, so it wears the
   pointer and a hover tint rather than looking like inert text. */
.idchip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); transition: border-color .15s, background .15s;
}
.idchip:hover { border-color: var(--accent); background: var(--white); }
.idchip code { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--ink); }
.idchip svg { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.idchip:hover svg { color: var(--accent); }
/* Nothing to copy — a row that predates the column, or a failed allocation. */
.idchip-none { cursor: default; font-size: 13px; color: var(--muted); }
.idchip-none:hover { border-color: var(--line); background: var(--paper); }

/* Signup account-type + advisor tier pickers (renderSignup). */
.su-type { display: flex; gap: 8px; }
.su-type-opt { flex: 1; text-align: left; padding: 10px 12px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--white); cursor: pointer; display: flex;
  flex-direction: column; gap: 2px; }
.su-type-opt b { font-size: 13px; color: var(--ink); }
.su-type-opt span { font-size: 11px; color: var(--muted); line-height: 1.35; }
.su-type-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--white)); }
.su-type-opt.on b { color: var(--accent); }
.su-tiers { display: flex; flex-direction: column; gap: 6px; }
.su-tier { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--white); cursor: pointer; text-align: left; }
.su-tier-l { display: flex; flex-direction: column; gap: 1px; }
.su-tier b { font-size: 13px; color: var(--ink); }
.su-tier .su-tier-l span { font-size: 11px; color: var(--muted); }
.su-tier em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.su-tier.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--white)); }
.su-tier.on b, .su-tier.on em { color: var(--accent); }

/* Stacked account-type cards in the multi-step signup. */
.su-type-col { flex-direction: column; }
.su-type-col .su-type-opt { padding: 14px 16px; }
.su-type-col .su-type-opt b { font-size: 14px; }
.su-type-col .su-type-opt span { font-size: 12px; }

/* Registration step 1: the two account types SIDE BY SIDE, centred, and the
   same height whichever description is longer. A GRID, not the parent flex
   row: `1fr 1fr` with `minmax(0,…)` makes the two columns equal regardless of
   their text, and stretch (the default) is what matches their heights —
   a flex row would let the longer description widen its own card. */
.su-type-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.su-type-cards .su-type-opt {
  padding: 20px 16px; text-align: center; align-items: center; justify-content: center; gap: 6px;
}
.su-type-cards .su-type-opt b { font-size: 14px; }
.su-type-cards .su-type-opt span { font-size: 12px; }

/* Team/org staff assignment rows: tickbox + person, permission segment right. */
.tsa-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--line); }
.tsa-row:last-child { border-bottom: 0; }
.tsa-l { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; flex: 1; }
.tsa-who { display: flex; flex-direction: column; min-width: 0; }
.tsa-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.tsa-mail { font-size: 12px; color: var(--muted); }
/* Permission is a dropdown — two named choices, so a select says what it is
   without a legend. */
/* `width: auto` lets the select size to its widest option PLUS the browser's
   native arrow — a fixed width guessed at that arrow and clipped the "y" of
   "View Only". min-width only stops the two options rendering at different
   widths as the choice changes. */
.tsa-perm { flex: none; width: auto; min-width: 118px; height: 32px;
  padding: 0 10px; font-size: 13px; font-weight: 600; }

/* The assignment tick: a rounded box that fills with the brand accent when on,
   rather than the OS checkbox. `appearance:none` drops the native control, so
   the mark is drawn here. */
.tsa-l input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line);
  background: var(--white); cursor: pointer; position: relative;
  transition: background .14s, border-color .14s;
}
.tsa-l input[type=checkbox]:hover { border-color: var(--accent); }
.tsa-l input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.tsa-l input[type=checkbox]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tsa-l input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Organisations card (reference design): a soft brand-tinted colour box holds
   the status/abbrev row and the name; the footer row (assigned avatars + the
   action pill) sits outside the box but inside the card. */
.orgc { background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 8px; cursor: pointer; transition: box-shadow .15s ease; }
.orgc:hover { box-shadow: var(--shadow); }
.orgc-box { border-radius: 12px; padding: 14px; min-height: 104px;
  display: flex; flex-direction: column; gap: 12px; }
.orgc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.orgc-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.orgc-gear { width: 32px; height: 32px; border-radius: 50%; border: none; flex: none;
  background: rgba(255,255,255,.7); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.orgc-gear:hover { background: var(--white); }
.orgc-name { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.3;
  overflow-wrap: anywhere; }
/* The Account ID sits under the name — the card's `gap` would otherwise put a
   full 12px between a name and its own reference number. */
.orgc-id { font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--muted); margin-top: -8px; padding-bottom: 2px; }
.orgc-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 8px 6px; }
.orgc-avs { display: flex; align-items: center; min-height: 32px; }
.orgc-av { width: 32px; height: 32px; border-radius: 50%; position: relative;
  background: var(--paper); border: 2px solid var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--slate); box-sizing: border-box; }
.orgc-av + .orgc-av { margin-left: -9px; }   /* leftmost stacks on top via z-index */
.orgc-av-more { background: var(--line); }
/* Hovering an avatar raises it above its overlapping neighbours (the stacking
   z-index is inline, hence the !important) and reveals the info card. */
.orgc-av:hover { z-index: 60 !important; }
.orgc-avcard { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 10px 14px; white-space: nowrap;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  opacity: 0; pointer-events: none; transition: opacity .12s; }
.orgc-av:hover .orgc-avcard { opacity: 1; }
.orgc-avcard b { font-size: 13px; font-weight: 600; color: var(--ink); }
.orgc-avcard span { font-size: 12px; font-weight: 400; color: var(--muted); }
.orgc-avcard em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 4px; margin-top: 3px; }
.orgc-avcard em.e { background: color-mix(in srgb, var(--accent) 12%, var(--white)); color: var(--accent-d); }
.orgc-avcard em.v { background: var(--paper); color: var(--slate); }
.orgc-btn { border-radius: 999px; padding: 7px 18px; }

/* Team member profile panel: Suspend / Delete ride the panel head's right edge. */
.sp-head-acts { display: inline-flex; gap: 8px; margin-left: auto; margin-right: 10px; }

/* Avatar-colour palette dots on the Profile page. */
.avc-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.avc-dot:hover { transform: scale(1.12); }

/* ── Role-tailored dashboard (My Dashboard) ──────────────────────────────────
   Deliberately NARROW: a centred column with wide gutters, unlike every other
   page (user decision 2026-08-05). */
/* THE page width for the narrow pages — My Dashboard, ISMS Intelligence and
   the two settings pages all wear it, so "same width as My Dashboard" is one
   number in one place rather than three that drift. */
.pg-narrow { max-width: 980px; margin: 0 auto; }
.rd-wrap { padding: 10px 16px 48px; }
.rd-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 4px 4px 20px; }
.rd-hero-side { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rd-hero-side .rd-pill { margin-top: 0; }
/* Role Guide star pill — same loud yellow language as the editor's ★ Guide. */
.rd-rgpill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  border-radius: 999px; cursor: pointer; background: #FFF6DE; border: 1px solid #E6C34A;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #7A5A00;
  font-family: inherit; white-space: nowrap; }
.rd-rgpill:hover { background: #FBEDC4; border-color: #D9B12E; }
/* The Guide pill takes its ROW's metrics wherever it sits beside buttons, so a
   header action row reads as one row rather than a chip parked next to a
   control. Two rows exist and they are sized differently:
     .iz-sub-right (Org Chart, Intake)  — btn-sm, 13px
     .page-actions (Documents, Forms, Audits, MR, Assignment) — .btn, 14px
   ⚠ box-sizing is load-bearing: .btn-secondary carries a 1.5px border and
   .btn-primary none, so without it a secondary button stands 3px taller than a
   primary one in the same row. The pill keeps its 700 weight and yellow — the
   size matches, the identity does not. */
.iz-sub-right > .btn,
.iz-sub-right > .rd-rgpill { height: 33px; box-sizing: border-box; }
.iz-sub-right > .rd-rgpill { font-size: 13px; padding: 0 13px; }
.page-actions > .btn,
.page-actions > .rd-rgpill { height: 40px; box-sizing: border-box; }
.page-actions > .rd-rgpill { font-size: 14px; padding: 0 16px; }
/* ── Role Guide deck ──────────────────────────────────────────────────────
   A .modal with its own slides: welcome (banner + centred copy), then one
   section per slide under a step bar. Its own footer, because .modal-footer
   is right-aligned and slides 2+ put Back on the LEFT. */
/* ONE fixed height for every slide, so the footer buttons never move between
   them. Set here rather than left to content: a Back/Next that jumps 100px
   down the card on the next slide reads as the dialog having been replaced. */
/* 512px = the welcome slide (the tallest: 179px banner + four lines + the
   role blurb) with ~12px to spare. Sized to the TALLEST slide, so the shorter
   ones simply carry white space — which is the cost of the footer never
   moving, and the trade the fixed height is here to make. */
.rgw { overflow: hidden; height: 512px; }      /* the banner bleeds to the radius */
/* The banner is sized by RATIO, not by a fixed height, so artwork dropped into
   [data-banner] is seen WHOLE. Image spec: 560 × 180 (1120 × 360 @2x).
   background-size:contain letterboxes anything off-ratio rather than cropping
   it — a banner that silently ate the top of a picture would be worse than a
   margin. (Harmless to the placeholder gradient below: gradients have no
   intrinsic size, so `contain` resolves to the element box.) */
.rgw-banner {
  position: relative; aspect-ratio: 560 / 180; flex: 0 0 auto; overflow: hidden;
  background-color: #2A715B;
  background-image: linear-gradient(115deg, #2A715B 0%, #35937A 30%, #E0A800 68%, #B450FF 100%);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* The artwork is the RG_BANNER SVG, drawn in the same 1120 × 360 space as the
   image spec. To use a real picture instead: set a background-image here and
   empty RG_BANNER — the SVG sits on top and would otherwise hide it. */
.rgw-art { display: block; width: 100%; height: 100%; }
.rgw-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 24px 28px 0;
}
.rgw-title { font-size: 17px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); }
.rgw-count { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
/* One segment per SECTION — the welcome is a cover, not a step. Each is a
   track holding a fill that animates its width, so moving forward fills the
   next bar and moving back drains it. Clickable, hence <button> resets. */
.rgw-steps { display: flex; gap: 7px; padding: 14px 28px 0; }
.rgw-step {
  flex: 1 1 0; height: 5px; padding: 0; border: none; border-radius: 999px;
  background: var(--line); overflow: hidden; cursor: pointer; appearance: none;
}
.rgw-step-f { display: block; width: 0; height: 100%; border-radius: 999px;
  background: var(--accent); transition: width .34s cubic-bezier(.4, 0, .2, 1); }
.rgw-body { padding: 22px 28px 24px; overflow-y: auto; flex: 1; }
/* The slide viewport. Two .rgw-slide layers coexist mid-transition, so they
   are absolutely positioned and the stage clips them. */
.rgw-stage { position: relative; flex: 1; overflow: hidden; }
/* The top padding is the gap under the step bar — the bar is a 5px hairline,
   so it needs real air beneath it or the first row reads as attached to it. */
.rgw-slide {
  position: absolute; inset: 0; padding: 36px 28px 24px; overflow-y: auto;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
}
.rgw-slide.from-right { transform: translateX(38px); opacity: 0; }
.rgw-slide.from-left  { transform: translateX(-38px); opacity: 0; }
.rgw-slide.to-left    { transform: translateX(-38px); opacity: 0; }
.rgw-slide.to-right   { transform: translateX(38px); opacity: 0; }
/* A departing slide is scenery — it must not swallow clicks or scrolls meant
   for the one arriving underneath it. */
.rgw-slide.leaving    { pointer-events: none; }
/* Welcome → sections is a shell swap, not a slide, so it gets a plain fade. */
.rgw-fade .rgw-head, .rgw-fade .rgw-steps, .rgw-fade .rgw-stage { opacity: 0; }
.rgw-head, .rgw-steps, .rgw-stage { transition: opacity .22s ease; }
.rgw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rgw-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.rgw-ic {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: -1px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rgw-ic svg { width: 15px; height: 15px; }
.rgw-ic.t-a { background: color-mix(in srgb, var(--accent) 12%, var(--white)); color: var(--accent); }
.rgw-ic.t-r { background: var(--danger-l); color: #9A4A4A; }
/* Welcome slide: centred, a step up in size, and ONE LINE PER IDEA — greeting,
   the appointment, the role, the organisation. It is the one slide addressed to
   the person rather than describing the system, so it is read, not scanned. */
.rgw-welcome { text-align: center; padding: 24px 34px 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rgw-hi { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.rgw-lead { font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin-top: 10px; font-weight: 400; }
.rgw-role {
  display: block; font-size: 22px; font-weight: 700; line-height: 1.35; margin-top: 2px;
  background: linear-gradient(95deg, #2A715B 0%, #2A715B 18%, #E0A800 58%, #B450FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* One step heavier than the line that introduces it — the organisation is the
   thing being named, not more prose. */
.rgw-org { font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--ink); margin-top: 4px; }
.rgw-who { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 16px 0 0; }
/* Fixed height, and both buttons pinned to one height — .btn-back's icon makes
   it 43px against Next's 40px, which walked the footer 3px up the card between
   slide 1 and the rest. The whole point of the fixed card height is that this
   row does not move, so it cannot be left to its contents. */
.rgw-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 28px; height: 80px; box-sizing: border-box; flex: 0 0 auto;
  border-top: 1px solid var(--line);
}
.rgw-foot .btn { height: 40px; }
.rgw-foot-end { justify-content: flex-end; }   /* welcome slide: Begin alone, right */

/* ── Guide deck: topic mode (.gtp-*) ─────────────────────────────────────────
   The welcome cover keeps the 560 × 512 card; the topic panel is a different
   kind of thing — a rail of topics beside a walkthrough — and needs the room.
   The card TRANSITIONS between the two sizes rather than jumping, which is
   what makes the two slides read as one dialog changing shape. */
.rgw { transition: max-width .34s cubic-bezier(.4, 0, .2, 1), height .34s cubic-bezier(.4, 0, .2, 1); }
/* Sized to the LONGEST topic, the same trade the 512px cover makes: shorter
   topics carry white space so the footer never moves between them. */
.rgw-wide { max-width: 940px; height: 658px; }
/* The shell swap (welcome ↔ topics) is a fade, the same as welcome → sections;
   both panes are named here or the incoming shell would pop in at full opacity. */
.rgw-fade .gtp, .rgw-fade .rgw-banner, .rgw-fade .rgw-body { opacity: 0; }
.gtp, .rgw-banner, .rgw-body { transition: opacity .22s ease; }

.gtp { display: grid; grid-template-columns: 400px 1fr; flex: 1; min-height: 0; }
.gtp-rail {
  display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto;
  padding: 28px 22px 22px 28px; border-right: 1px solid var(--line);
}
.gtp-intro-t { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.gtp-intro-p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 7px 0 0; }
.gtp-items { display: flex; flex-direction: column; gap: 2px; }
/* A row is a button, so the UA styles have to be undone: full width, left
   aligned, inherited font — the same resets .qv-ev-card documents. */
.gtp-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  font: inherit; background: none; border: none; border-radius: 10px;
  padding: 11px 12px; cursor: pointer; position: relative;
  transition: background .15s ease;
}
.gtp-item:hover:not(:disabled) { background: var(--paper); }
.gtp-item.is-on { background: var(--paper); }
/* The accent bar marks the open topic. Inset 9px top and bottom so it reads as
   a marker beside the row rather than a border down the whole of it. */
.gtp-item.is-on::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 999px; background: var(--accent);
}
/* On a first run the rail opens only as far as the deck has been walked — a
   dimmed row still says the topic exists, which a hidden one would not. */
.gtp-item:disabled { cursor: default; opacity: .45; }
.gtp-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--white); color: var(--muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.gtp-ic svg { width: 17px; height: 17px; }
.gtp-item.is-on .gtp-ic {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--white));
  background: color-mix(in srgb, var(--accent) 8%, var(--white));
}
.gtp-it { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gtp-it-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.gtp-it-s { font-size: 13px; line-height: 1.5; color: var(--muted); }

.gtp-main { min-width: 0; min-height: 0; display: flex; }
/* Same clipping viewport as .rgw-stage — two .gtp-slide layers coexist through
   the 340ms swap, so they are absolute and the stage hides the overflow. */
.gtp-stage { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.gtp-slide {
  position: absolute; inset: 0; padding: 28px 28px 26px; overflow-y: auto;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
}
.gtp-slide.from-right { transform: translateX(38px); opacity: 0; }
.gtp-slide.from-left  { transform: translateX(-38px); opacity: 0; }
.gtp-slide.to-left    { transform: translateX(-38px); opacity: 0; }
.gtp-slide.to-right   { transform: translateX(38px); opacity: 0; }
.gtp-slide.leaving    { pointer-events: none; }
/* The media slot. A placeholder until there is real artwork: drop a GIF or a
   poster in as a background-image here (or replace the box's contents with a
   <video>) — nothing else depends on it. Sized by RATIO so whatever lands in
   it is seen whole, exactly as .rgw-banner is. */
/* Sized by RATIO, never a fixed height, so whatever lands in it is seen whole
   — the same rule .rgw-banner follows. 12/5 rather than 16/9 on purpose: it
   spans the full column at a height that still leaves the longest topic's
   prose above the fold. ⚠ Do NOT cap this with max-height instead: the ratio
   then wins and the box narrows, leaving the media visibly short of the text
   it sits above. A recording of one UI region crops to 12/5 comfortably. */
.gtp-media {
  position: relative; aspect-ratio: 12 / 5; border-radius: 12px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.gtp-play {
  width: 46px; height: 46px; border-radius: 50%; background: var(--white);
  border: 1px solid var(--line); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.gtp-play svg { width: 22px; height: 22px; }
.gtp-media-cap { font-size: 12px; color: var(--muted); }
.gtp-h2 { font-size: 17px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); margin-top: 22px; }
.gtp-p { font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin: 10px 0 0; }

.rd-greet { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.rd-sub { font-size: 14px; color: var(--muted); margin-top: 5px; }
.rd-pill { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: capitalize;
  padding: 5px 12px; border-radius: 999px; margin-top: 8px; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 11%, var(--white)); color: var(--accent-d); }
.rd-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .rd-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.rd-stat { background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px 14px; }
.rd-stat.rd-warn { border-color: #EAD9A8; background: #FFFDF4; }
.rd-num { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.rd-lab { font-size: 13px; font-weight: 600; color: var(--slate); margin-top: 6px; }
.rd-ssub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.rd-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 28px 4px 12px; }
.rd-sec span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); }
.rd-more { background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--accent); font-family: inherit; padding: 0; }
.rd-bars { background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.rd-bar-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600;
  color: var(--ink); margin-bottom: 6px; }
.rd-bar { height: 8px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.rd-bar div { height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.rd-chip { font-size: 12px; font-weight: 600; color: var(--slate); background: var(--paper);
  border-radius: 999px; padding: 4px 11px; }
.rd-chip.warn { background: #FFF6DE; color: #7A5A00; }
.rd-list { display: flex; flex-direction: column; gap: 8px; }
.rd-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px; cursor: pointer; transition: border-color .12s, background .12s; }
.rd-row:hover { border-color: var(--accent); }
.rd-row-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.rd-row-s { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Notifications card — the Team workload shell (so the widths match) plus the
   bell's own row styling, which is why `.nb-row` is restated for this context:
   inside the panel it sits on a white slide-out, here on a card. */
.rd-notif .rd-su-head { margin-bottom: 4px; }
.rd-notif-all { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--accent); }
.rd-notif-all:hover { text-decoration: underline; }
.rd-notif .nb-row { border-radius: 8px; }
.rd-notif .nb-row:last-child { border-bottom: 0; }

.rd-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 26px;
  background: var(--white); border: 1px dashed var(--line); border-radius: 12px; }

/* Account setup card on the role dashboard — half the content-column width.
   The border is the doc-type gradient (green → yellow → purple) drawn with the
   two-layer background trick (a border-image cannot round corners), plus soft
   tinted shadows for the glow. */
/* Width = exactly two stat cards + the 14px gap between them: the stat row is
   4 columns with 14px gaps, so that span is 50% of the row minus half of the
   centre gap. */
.rd-su { width: calc(50% - 7px); min-width: 380px; border: 2px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(135deg, #2A715B 0%, #FED224 50%, #B450FF 100%) border-box;
  box-shadow: 0 0 16px rgba(42,113,91,.14), 0 4px 22px rgba(180,80,255,.16);
  border-radius: 14px; padding: 18px 18px 16px; margin-bottom: 24px; }
@media (max-width: 900px) { .rd-su { width: 100%; min-width: 0; } }
.rd-su-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
/* `.rd-su-title` is styled with the other dashboard card titles further down —
   see "My Dashboard's card titles are ONE size". Nothing here, deliberately: a
   size in both places is a size that drifts. */
.rd-su-prog { font-size: 11px; color: var(--muted); display: flex; flex-direction: column;
  gap: 4px; align-items: flex-end; white-space: nowrap; }
.rd-su-bar { width: 64px; height: 4px; border-radius: 999px; background: var(--paper);
  overflow: hidden; display: block; }
.rd-su-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.rd-su-video { height: 150px; border-radius: 10px; background: var(--paper);
  display: flex; align-items: center; justify-content: center; margin: 14px 0 2px; }
.rd-su-play { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--white);
  box-shadow: 0 2px 10px rgba(23,38,59,.14); cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--ink); padding-left: 3px; }
.rd-su-play:hover { transform: scale(1.05); }
.rd-su-lead { font-size: 13px; color: var(--slate); margin: 12px 2px; }
.rd-su-steps { display: flex; flex-direction: column; gap: 10px; }
.rd-su-step { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  cursor: pointer; transition: border-color .15s; }
.rd-su-step:hover { border-color: var(--accent); }
.rd-su-step.done { background: var(--paper); border-color: transparent; }
.rd-su-step.done:hover { border-color: var(--line); }
.rd-su-step-main { display: flex; align-items: center; gap: 12px; }
/* Expandable "why this step" body — the 0fr→1fr grid trick animates height. */
.rd-su-why { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.rd-su-why > div { overflow: hidden; }
.rd-su-why p { font-size: 13px; line-height: 1.6; color: var(--slate);
  margin: 10px 2px 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.rd-su-step.open .rd-su-why { grid-template-rows: 1fr; }
.rd-su-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--paper);
  display: flex; align-items: center; justify-content: center; color: var(--ink); flex: 0 0 auto; }
.rd-su-step.done .rd-su-ic { background: var(--white); }
.rd-su-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rd-su-tx b { font-size: 14px; font-weight: 600; color: var(--ink); }
.rd-su-tx span { font-size: 12px; color: var(--muted); }
.rd-su-start { border: none; border-radius: 9px; padding: 8px 18px; font-size: 13px;
  font-weight: 600; font-family: inherit; cursor: pointer; background: var(--ink); color: #fff; }
.rd-su-start.off { background: var(--paper); color: var(--muted); cursor: default; }
.rd-su-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; }

/* ── The floating Account Setup widget (2026-09-27) ──────────────────────────
   Replaces the old dashboard-only `.rd-su` card — see mountSetupWidget()'s own
   header note. It reuses `.rd-su-head`/`.rd-su-title`/`.rd-su-prog`/`.rd-su-video`/
   `.rd-su-steps`/etc. (same class names, same look) inside a NEW fixed-position
   shell, so the two never drift visually even though they are built by
   different functions now. */
.su-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
/* ⚠️ The SCROLL lives on `.su-float-body`, a plain rectangular inner div,
   never on `.su-float-card` itself (found live, 2026-09-27): a straight-edged
   native scrollbar track rendered flush against the CARD's own padding-box
   edge cut straight through its rounded top-right corner, breaking the
   gradient border it sits inside. Card clips via `overflow:hidden` and flexes
   a fixed head above a scrolling body, so the scrollbar now sits well clear of
   the border on every side, and the header (with the collapse button) stays
   put while the steps beneath it scroll. */
.su-float-card { width: 440px; max-width: calc(100vw - 40px); max-height: min(70vh, 640px);
  overflow: hidden; border: 2px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(135deg, #2A715B 0%, #FED224 50%, #B450FF 100%) border-box;
  box-shadow: 0 16px 40px rgba(23,38,59,.22); border-radius: 14px;
  display: flex; flex-direction: column; }
.su-float-body { overflow-y: auto; padding: 0 18px 16px; }
.su-float.collapsed .su-float-card { display: none; }
/* ⚠️ Collapsed shape (2026-09-29, reference: Stripe's own "Setup guide" pill)
   is a PILL + a progress RING, not a round icon button with a count badge —
   the ring reads real progress at a glance without opening the card, and a
   labelled pill reads as a control rather than a notification. Kept at
   bottom-right per the house layout (Stripe's sits in its own topbar, which
   this product does not have a matching slot for). */
.su-float-bubble { display: none; }
.su-float.collapsed .su-float-bubble { display: inline-flex; }
.su-float-bubble { height: 44px; padding: 0 8px 0 16px; border-radius: 999px;
  border: 1px solid var(--line); cursor: pointer; background: var(--white); color: var(--ink);
  align-items: center; gap: 10px; box-shadow: 0 10px 24px rgba(23,38,59,.16); }
.su-float-bubble:hover { background: var(--paper); }
.su-float-pill-label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.su-float-ring { flex: 0 0 auto; transform: rotate(-90deg); }
.su-ring-track { fill: none; stroke: var(--line); stroke-width: 2.5; }
.su-ring-fill { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  transition: stroke-dashoffset .3s; }
/* ⚠️ The collapse button's box (26px wide, inset from `right`) must fit
   ENTIRELY inside the head's own right padding, WITH a visible gap — found
   live, 2026-09-27: the button first sat at `right:16px` against only 30px of
   padding and overlapped the "N/4 completed" text outright; widened once to
   stop the overlap, then again (same session) because that fix only left 4px
   between them. Padding (48px) and inset (10px, so the button spans
   10–36px) now leave a full 12px clear of the text, which
   `justify-content:space-between` pushes flush to the content edge, even
   with a translated/longer label. */
.su-float-head { position: relative; flex: 0 0 auto; padding: 18px 48px 12px 18px; }
.su-float-collapse { position: absolute; top: 16px; right: 10px; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--slate);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.su-float-collapse:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 520px) { .su-float { right: 12px; bottom: 12px; } .su-float-card { width: calc(100vw - 24px); } }

/* Top row pairs Account setup with the Team productivity card. */
.rd-toprow { display: flex; gap: 14px; align-items: flex-start; }
.rd-toprow .rd-su { margin-bottom: 24px; }
.rd-team { width: calc(50% - 7px); min-width: 380px; background: var(--white);
  border-radius: 14px; padding: 18px 18px 16px; margin-bottom: 24px; }
@media (max-width: 900px) { .rd-toprow { flex-direction: column; } .rd-team { width: 100%; min-width: 0; } }
.rd-tm-rows { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }
/* Rigid columns: the label column is FIXED so every row's bar is the same
   width whatever the right-hand text says ("76 tasks" vs "Free"). */
.rd-tm-row { display: grid; grid-template-columns: 32px minmax(0,1fr) 72px;
  align-items: center; gap: 11px; }
.rd-tm-av { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; }
.rd-tm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rd-tm-name { font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-tm-bar { height: 7px; border-radius: 999px; background: var(--paper); overflow: hidden; display: block; }
.rd-tm-bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #2A715B, #3BAFA0); transition: width .4s; }
.rd-tm-pct { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 44px; text-align: right; }
.rd-tm-pct.na { font-size: 11px; font-weight: 600; color: var(--muted); }

/* ── Your progress — the member-class right column ─────────────────────────
   What a manager or team member gets where an overseer gets the org-wide
   posture: their OWN items, done against assigned. Wears `.rd-team` for the
   card shell and reuses `.rd-tm-bar`, so it is the same bar the Team workload
   card draws for the same person — one look, one number. */
.rd-myp-big { font-size: 40px; font-weight: 700; color: var(--ink); line-height: 1;
  margin: 14px 0 12px; letter-spacing: -.02em; }
.rd-myp-big span { font-size: 20px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.rd-myp-bar { height: 10px; }
.rd-myp-legend { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.rd-myp-l { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.rd-myp-l::before { content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); flex: none; }
.rd-myp-l.done::before { background: var(--accent); }
.rd-myp-l b { color: var(--ink); font-weight: 700; font-size: 13px; }
.rd-myp-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 12px 0 0; }
.rd-myp-none { margin-top: 6px; }
/* The four "what am I responsible for" tiles under the bar. They reuse
   `.rd-ar-grid`/`.rd-ar-box` — the Internal Audit Readiness card's 2×2 paper
   boxes — because that is already the product's answer to "a grid of small
   figures INSIDE a white card": a borderless white tile on a white card would
   not read at all. Only the label differs, so the type here is the whole
   override. ⚠️ Change `.rd-ar-box`'s padding or radius and these move with it,
   which is the intent — one nested-tile recipe, not two. */
.rd-myp-grid { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
/* `.rd-ar-t` is 11px UPPERCASE with tracking — right for a readiness metric,
   wrong for a person's own label, which reads as a sentence fragment
   ("Author Of 12"). Sentence-cased at the dashboard's 13px title size. */
.rd-myp-bt { font-size: 13px; font-weight: 700; color: var(--slate); }

/* Right column: stat mini-cards (2-up, borderless, sparkline) over Team workload. */
.rd-right { width: calc(50% - 7px); min-width: 380px; display: flex; flex-direction: column; }
.rd-right .rd-team { width: 100%; min-width: 0; }
@media (max-width: 900px) { .rd-right { width: 100%; min-width: 0; } }
/* `minmax(0, …)`, not a bare `1fr`: a bare fr track cannot shrink below its
   min-content, and `.rd-mini-delta` is `nowrap`, so a longer delta string
   ("no change last week") widened both tracks until the pair overflowed the
   column and sat wider than the cards above them. */
.rd-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin-bottom: 14px; }
.rd-mini { background: var(--white); border-radius: 14px; padding: 14px 16px 12px; }
.rd-mini-t { font-size: 12px; font-weight: 600; color: var(--slate); }
/* ── My Dashboard's card titles are ONE size, and it is 13px ───────────────
   Every box title on the page — Account setup, Document Completion, Document
   status, the four stat cards, Your Plate, Need Your Review, Need Your
   Approval, Recommended for you, Your progress, Notifications, Team workload,
   Internal Audit Readiness — is 13px, Title Case (user decision 2026-08-10,
   for every role). They were 16px/700 earlier the same day, then 11px; that
   first decision was about making them AGREE, and the size has moved since
   while the agreement has not. The point is that the numbers rather than
   their labels carry the page — change the value here and every title on
   both layouts follows.

   ⚠️ The capital on each word is `text-transform: capitalize`, NOT retyped
   source strings. One rule cannot miss a title, and capitalize only ever
   uppercases a word's FIRST letter — it never lowercases the rest, so `NCs`,
   `SOPs` and `ISMS` survive intact. Never feed it a lowercased source; fix the
   string instead. (Same property the status pills rely on.)

   ⚠️ The size is SCOPED to the dashboard's own wrappers, never applied to
   `.rd-mini-t` itself: `docCompletionBox()` is shared with the LIBRARY's stats
   row, where that title sits beside four `.lib-stat` boxes which must keep
   matching each other. Restyling the class outright would resize one of the
   five boxes there and leave the other four behind. */
#rdCompletion .rd-mini-t,
.rd-mini > .rd-mini-t,
.rd-su-title { font-size: 13px; font-weight: 700; color: var(--ink); text-transform: capitalize; }
.rd-mini-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: 26px; }
/* The figure+delta column must be allowed to shrink, or it re-imposes the same
   min-content floor inside the card. */
.rd-mini-row > div:first-child { min-width: 0; }
.rd-mini-row .rd-num { font-size: 22px; }
.rd-mini-spark { flex: 0 0 auto; }
.rd-mini-delta { font-size: 11px; font-weight: 600; margin-top: 3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rd-mini-delta.up { color: var(--accent-d); }
.rd-mini-delta.down { color: #B3261E; }
.rd-mini-delta.flat { color: var(--muted); }

/* Document status card: vertical bars, grey track = applicable-docs ceiling,
   hover popover names each stage's pen-holders. */
.rd-ds-total { font-size: 11px; color: var(--muted); font-weight: 600; }
.rd-ds-chart { display: flex; gap: 14px; align-items: flex-end; padding: 8px 4px 2px; }
.rd-ds-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; }
.rd-ds-val { font-size: 13px; font-weight: 700; color: var(--ink); }
.rd-ds-track { width: 100%; max-width: 46px; height: 120px; background: var(--paper);
  border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;
  justify-content: flex-end; }
.rd-ds-fill { width: 100%; border-radius: 8px 8px 0 0; transition: height .4s; }
.rd-ds-lab { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center;
  white-space: nowrap; }
/* Hover card: white, shadowed, avatar + name + count per holder. */
.rd-ds-pop { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 26px rgba(23,38,59,.14); padding: 10px 12px;
  font-size: 12px; z-index: 40; white-space: nowrap; flex-direction: column; gap: 7px;
  min-width: 172px; }
.rd-ds-pop-h { display: flex; align-items: center; gap: 7px; font-weight: 700;
  color: var(--ink); font-size: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.rd-ds-pop-h i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.rd-ds-pop-h b { margin-left: auto; font-weight: 600; color: var(--muted); font-size: 11px; }
.rd-ds-pop-row { display: flex; align-items: center; gap: 8px; }
.rd-ds-pop-av { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; }
.rd-ds-pop-nm { color: var(--ink); font-weight: 600; }
.rd-ds-pop-ct { margin-left: auto; color: var(--slate); font-weight: 700; }
.rd-ds-pop-note { color: var(--muted); }
.rd-ds-col:hover .rd-ds-pop { display: flex; }

/* Internal Audit Readiness: 2x2 paper boxes inside the borderless card. */
.rd-ar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.rd-ar-box { background: var(--paper); border-radius: 12px; padding: 13px 15px;
  display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rd-ar-t { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--slate); }
.rd-ar-big { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.rd-ar-big em { font-style: normal; font-size: 14px; color: var(--muted); font-weight: 600; }
.rd-ar-s { font-size: 12px; color: var(--muted); }
.rd-ar-pill { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px; }
.rd-ar-pill.ok  { background: #E7F1EC; color: var(--band-ok); }
.rd-ar-pill.mid { background: #FFF6DE; color: var(--band-mid); }
.rd-ar-pill.low { background: #F9E9E7; color: var(--band-low); }
.rd-ar-bar { margin-top: 3px; }
.rd-ar-who { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: var(--ink); }
.rd-ar-none { font-size: 14px; font-weight: 700; color: #B3261E; }

/* Readiness card: clickable title. */
/* Internal Audit Readiness's title is a BUTTON (it opens Audit Programmes), so
   this strips the UA chrome and nothing else. ⚠️ It carried its own
   `font-size: 16px; font-weight: 700; color` and sits AFTER the shared card-title
   rule, so at equal specificity it won — leaving this one heading at the old size
   when every other title moved to 11px. The element already wears `.rd-su-title`;
   let that own the type. */
.rd-ar-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.rd-ar-link:hover { color: var(--accent); }

/* Left column under Account setup: three collapsible task boxes. */
.rd-left { width: calc(50% - 7px); min-width: 380px; display: flex; flex-direction: column; }
.rd-left .rd-su, .rd-left .rd-tk { width: 100%; min-width: 0; }
@media (max-width: 900px) { .rd-left { width: 100%; min-width: 0; } }
.rd-tk { margin-bottom: 14px; border: 1px solid var(--line); }
.rd-tk-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none;
  border: none; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
.rd-tk-count { font-size: 12px; font-weight: 700; color: var(--accent-d); min-width: 24px;
  height: 24px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; background: color-mix(in srgb, var(--accent) 12%, var(--white)); }
.rd-tk-count.zero { background: var(--paper); color: var(--muted); }
.rd-tk-chev { margin-left: auto; color: var(--muted); transition: transform .2s; }
.rd-tk.open .rd-tk-chev { transform: rotate(180deg); }
.rd-tk-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.rd-tk-body > div { overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.rd-tk.open .rd-tk-body { grid-template-rows: 1fr; }
.rd-tk-body > div > :first-child { margin-top: 12px; }
.rd-tk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--paper); border-radius: 10px; padding: 10px 13px; cursor: pointer;
  transition: background .12s; }
.rd-tk-row:hover { background: color-mix(in srgb, var(--accent) 7%, var(--paper)); }
.rd-tk-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-tk-main b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rd-tk-main span { font-size: 11px; color: var(--muted); }
.rd-tk-empty { font-size: 12px; color: var(--muted); padding: 4px 2px 2px; }
.rd-tk-more { align-self: flex-start; padding: 2px; }

/* ── ISMS Intelligence: the composer ────────────────────────────────────────
   One box, the answers under it. Reference design: a centred greeting over a
   gradient-bordered composer with a chip row beneath. */
.ai-page { padding: 26px 16px 56px; }
.ai-hero { text-align: center; margin-bottom: 22px; }
.ai-h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.ai-sub { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.ai-sub b { color: var(--ink); font-weight: 600; }
/* The gradient is the WRAPPER's background and the inner box paints over it,
   inset by the border width — a gradient cannot be a border-color, and
   border-image throws the radius away. */
.ai-box {
  position: relative;
  background: linear-gradient(95deg, #2A715B 0%, #35937A 26%, #E0A800 64%, #B450FF 100%);
  border-radius: 18px; padding: 3px;
}
/* The shadow is the BORDER's own gradient, blurred — a box-shadow takes one
   colour, so the glow is a copy of the gradient sitting behind the box. It
   paints behind the parent's background (no stacking context here, hence the
   negative z-index) and is only ever seen where the blur spreads past the
   edges, which is exactly what a shadow is. */
.ai-box::after {
  content: ''; position: absolute; inset: 6px 4px -4px; z-index: -1;
  border-radius: 18px; filter: blur(18px); opacity: .42;
  background: inherit;
}
.ai-box-in { background: var(--white); border-radius: 15px; padding: 14px 14px 10px; }
.ai-tools { display: flex; gap: 8px; margin-bottom: 6px; }
.ai-tool {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px;
  font-weight: 500; color: var(--slate); background: var(--paper); border: none;
  border-radius: 9px; padding: 7px 11px; cursor: pointer; transition: background .15s, color .15s;
}
.ai-tool:hover { background: var(--warm); color: var(--ink); }
.ai-tool svg { width: 15px; height: 15px; }
.ai-input {
  display: block; width: 100%; border: none; outline: none; resize: none;
  font: inherit; font-size: 15px; line-height: 1.6; color: var(--ink);
  background: none; padding: 8px 4px 4px; min-height: 76px;
}
.ai-input::placeholder { color: var(--muted); }
.ai-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-foot-l { display: flex; align-items: center; gap: 2px; }
.ai-ico {
  width: 32px; height: 32px; border-radius: 8px; border: none; background: none;
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; transition: background .15s, color .15s;
}
.ai-ico:hover { background: var(--paper); color: var(--ink); }
.ai-ico svg { width: 16px; height: 16px; }
.ai-send {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: var(--white); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, opacity .15s;
}
.ai-send:hover:not(:disabled) { background: var(--accent-d); }
.ai-send:disabled { opacity: .45; cursor: default; }
.ai-send svg { width: 17px; height: 17px; }
/* While an answer is in flight the border animates, so the wait is visibly
   the box's own rather than a spinner bolted beside it. */
.ai-box.is-busy { background-size: 220% 100%; animation: aiSweep 1.6s linear infinite; }
@keyframes aiSweep { from { background-position: 0% 0; } to { background-position: 220% 0; } }

.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 26px; }
.ai-chip {
  font: inherit; font-size: 13px; color: var(--slate); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 13px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.ai-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--white); }

.ai-answers { display: flex; flex-direction: column; gap: 12px; }
.ai-ans { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.ai-ans-q { font-size: 14px; font-weight: 600; color: var(--ink); padding-bottom: 10px;
  margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.ai-ans-a { font-size: 14px; line-height: 1.75; color: var(--ink-soft); white-space: pre-wrap; }
.ai-ans-a.is-wait { color: var(--muted); font-style: italic; }
.ai-ans-a.is-err { color: var(--danger); }
.ai-off { background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 24px; max-width: 620px; margin: 40px auto 0; }
.ai-off-t { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700;
  color: var(--ink); margin-bottom: 10px; }
.ai-off-t svg { width: 17px; height: 17px; color: var(--band-mid); }
.ai-off-b { font-size: 13px; color: var(--muted); line-height: 1.8; }
.ai-off-b code { display: inline-block; background: var(--paper); border-radius: 5px;
  padding: 2px 8px; font-family: var(--mono); font-size: 12px; color: var(--ink); margin: 4px 0; }

/* ── ISMS Intelligence nav row — the one coloured item in the sidebar ───────
   Normal: the doc-type gradient fills the icon and the word. Hover: that same
   gradient becomes the row's background and the content turns white, WIPED IN
   FROM THE LEFT. Three layers do it (see intelNavRow in app.v6.js): a gradient
   fill and a white copy of the content, both revealed by the same animating
   clip-path, over a gradient-text base that is always there. One edge moves,
   so the colour and its background arrive together. */
.sb-intel { position: relative; overflow: hidden; isolation: isolate; --fx: 0%; }
/* The fill follows the CURSOR: `--fx` is set on mousemove to how far across
   the row the pointer is, and the clip reveals the gradient up to exactly
   there (user decision 2026-08-09). It is a TRANSLUCENT ramp, not a solid one
   — the word and icon keep their own gradient and stay readable through it,
   which is why there is no white copy of the content any more. */
.sb-intel .sbi-fill {
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: linear-gradient(90deg,
    rgba(42,113,91,.26) 0%, rgba(53,147,122,.24) 24%, rgba(224,168,0,.26) 62%, rgba(180,80,255,.26) 100%);
  clip-path: inset(0 calc(100% - var(--fx)) 0 0);
  /* Short, so the fill feels attached to the pointer rather than chasing it. */
  transition: none;
}
/* Leaving drains it back to the left, and slower — the exit is the only part
   of this that should read as an animation rather than as tracking. */
.sb-intel .sbi-base { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.sb-intel svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* The word carries the same ramp as the icon — the Workspace label's recipe. */
.sb-intel .sbi-base > span {
  background: linear-gradient(95deg, #2A715B 0%, #2A715B 16%, #E0A800 58%, #B450FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 600;
}
/* Open page: filled across, but the SAME soft ramp — a solid block would shout
   over every other item in the sidebar. */
.sb-intel.active { --fx: 100%; }
/* The generic rules would repaint the row underneath the fill. */
.sb-intel.active { background: none; }
/* Hover is the plain sidebar hover — no cursor-tracking fill (user decision 2026-09-21). */
.sb-intel:hover:not(.active) { background: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .sb-intel .sbi-fill { transition: none; }
}

/* ── Settings pages: Organisation Settings + My Profile ─────────────────────
   Sub-header with the tabs pushed right, the narrow column, and rows that are
   READ-ONLY until their ✎ is pressed (setRow / setEditModal in app.v6.js). */
.set-page { padding: 4px 16px 48px; }
/* No shadow — a bordered box like the org chart's, so a settings page reads as
   a page rather than as a card floating over one (user decision 2026-08-09). */
.set-card { padding: 20px 24px; box-shadow: none; border-color: var(--line); }
.set-ctrl { align-items: center; gap: 12px; }
.set-val { font-size: 14px; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.set-val-none { color: var(--muted); }
/* The pencil is the row's only affordance, so it holds its box at rest rather
   than appearing on hover — a control that is invisible until you are already
   pointing at it cannot be found by looking. */
.set-edit {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--white); color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.set-edit:hover { border-color: var(--accent); color: var(--accent); background: var(--paper); }
.set-edit svg { width: 15px; height: 15px; }
.set-modal-intro { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.set-colrow { display: flex; align-items: center; gap: 10px; }
.set-swatch, .set-avrow, .set-logo { display: flex; align-items: center; gap: 10px; }
.set-dot { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); flex: 0 0 auto; }
.set-avchip { width: 34px; height: 34px; font-size: 13px; cursor: default; }
.set-avpick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.set-avsw { display: flex; gap: 6px; flex-wrap: wrap; }
/* The one destructive control on either page — outside the card, so it reads
   as a separate act rather than the last row of a form. */
.set-danger {
  margin-top: 18px; background: var(--white); border: 1px solid var(--blush);
  border-radius: 14px; padding: 18px 22px;
}
.set-danger-t { font-size: 14px; font-weight: 700; color: var(--danger); }
.set-danger-d { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 4px 0 12px; max-width: 560px; }

/* ── The Users section (Organisation Settings) ─────────────────────────────
   A record of who is in the organisation. Read-only on purpose: people are
   added, edited and removed on the Org Chart, beside the diagram that says
   what each of them is for. */
.set-usershead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 4px 0 14px;
}
.set-usersn { font-size: 14px; font-weight: 600; color: var(--ink); }
/* A COUNT, so it takes the round pill — amber once the plan's seats are gone. */
.set-usersq {
  font-size: 12px; font-weight: 600; color: var(--slate);
  background: var(--paper); border-radius: 999px; padding: 3px 10px; margin-left: 8px;
}
.set-usersq.full { background: var(--warning-l); color: #8C6A20; }
.set-you {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: var(--paper); color: var(--slate); border-radius: 4px; padding: 2px 6px;
}
.set-none { font-size: 13px; color: var(--muted); padding: 16px 0; }

/* A record reference — audit programme, management review, MR action. Reads
   above the title in a table's identity column and before it in a detail
   sub-header, so all four record types (NCs included) look like one family. */
.rec-ref { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.ad-ref { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-right: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   PLAN LOCKS AND THE UPGRADE PROMPT (2026-08-10)

   A module or action the plan excludes is SHOWN wearing a padlock rather than
   hidden — nobody buys what they never knew was there. The lock is the ONE
   visual language for it, on a sidebar row, a button or a menu item alike.
   ══════════════════════════════════════════════════════════════════════════ */
.ent-locked {
  position: relative;
  opacity: .55;
  cursor: pointer;
}
.ent-locked:hover { opacity: .8; }
/* The padlock sits after whatever the control already contained, so a button
   keeps its own label and icon. */
.ent-lock-i { margin-left: 6px; flex: none; vertical-align: -2px; opacity: .85; }
/* A locked sidebar row must not read as the ACTIVE one. */
.sidebar-link.ent-locked, .sidebar-link.ent-locked:hover { background: transparent; color: var(--muted); }
.sidebar-link.ent-locked .ent-lock-i { margin-left: auto; }
/* The Library tile is a card, not a row: put the lock in its corner. */
.lib-tile.ent-locked .ent-lock-i { position: absolute; top: 10px; right: 10px; margin: 0; }

/* ── The plan chip, beside the organisation name ────────────────────────── */
.tp-plan { display: flex; align-items: center; gap: 8px; }
.tp-plan-n {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--paper); color: var(--slate);
  border-radius: 4px; padding: 3px 8px; white-space: nowrap;
}
.tp-plan-n.trial { background: var(--sage-ll, var(--paper)); color: var(--sage-d, var(--slate)); }
/* Under a week is a deadline, not a fact. */
.tp-plan-n.trial.soon { background: var(--warning-l); color: #8C6A20; }
.btn.btn-xs { font-size: 11px; padding: 4px 10px; border-radius: 6px; }

/* ── Checkout (a stand-in, not Stripe) ──────────────────────────────────────
   ⚠️ Deliberately OUR OWN look, not a copy of anybody's hosted checkout: this
   is a mock, and a page dressed as a real payment provider is the one thing it
   must never be. `.cko-test` says so on both pages and is not decoration —
   nobody testing this should be left wondering whether they were charged. */
.cko {
  min-height: 100vh; background: var(--warm);
  display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
.cko-card {
  width: 100%; max-width: 460px; background: var(--white);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 28px 24px; box-shadow: var(--shadow);
}
.cko-test {
  font-size: 12px; line-height: 1.6; color: #8C6A20;
  background: var(--warning-l); border-radius: 9px;
  padding: 9px 12px; margin-bottom: 20px;
}
.cko-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; font-weight: 700; color: var(--ink); }
.cko-brand .sidebar-logo-icon { width: 26px; height: 26px; font-size: 13px; }
.cko-h { font-size: 20px; font-weight: 700; letter-spacing: -.3px; color: var(--ink); }
.cko-p { font-size: 13px; color: var(--slate); line-height: 1.6; margin-top: 6px; }
.cko-amt { font-size: 34px; font-weight: 700; letter-spacing: -1.2px; color: var(--ink); margin: 16px 0 4px; }
.cko-cur { font-size: 15px; font-weight: 600; color: var(--slate); margin-right: 5px; }
.cko-per { font-size: 12px; font-weight: 500; color: var(--slate); margin-left: 5px; letter-spacing: 0; }
.cko-rows { margin-top: 18px; border-top: 1px solid var(--line); }
.cko-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--slate);
}
.cko-row b { color: var(--ink); font-weight: 600; }
/* Due today is the row that matters, so it carries a rule ABOVE it separating
   it from the parts that add up to it, rather than another hairline below. */
.cko-total { border-bottom: 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.cko-inv { margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center; }
.cko-inv b { color: var(--slate); font-family: var(--mono); font-weight: 500; }
.cko-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.cko-acts .btn { width: 100%; justify-content: center; height: 40px; }
/* The result page leads with the outcome, before any of the detail. */
.cko-res { text-align: center; }
.cko-mark {
  width: 46px; height: 46px; border-radius: 50%; margin: 4px auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
}
.cko-mark svg { width: 22px; height: 22px; }
.cko-mark.ok { background: var(--success-l); color: var(--band-ok); }
.cko-mark.no { background: var(--danger-l); color: var(--danger); }

/* ── The plan-change confirm dialog (2026-09-24) ────────────────────────────
   Shown for EVERY priced plan change — first purchase, upgrade, downgrade —
   before anything is charged or scheduled. Same recipe as `.cko-row`/`.cko-total`
   (a row list, the total set apart by a rule above it), reused inside a plain
   `createModal()` rather than growing a third row-list style in the product. */
.cpp-confirm-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--slate);
}
.cpp-confirm-row b { color: var(--ink); font-weight: 600; }
.cpp-confirm-total { border-bottom: 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; margin-top: 2px; padding-top: 12px; }
.cpp-confirm-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 14px; }

/* ── The upgrade prompt ─────────────────────────────────────────────────── */
.ent-up-lead { font-size: 14px; color: var(--ink); line-height: 1.6; margin-bottom: 8px; }
.ent-up-now { font-size: 13px; color: var(--slate); margin-bottom: 18px; }
.ent-up-loading { font-size: 13px; color: var(--muted); padding: 10px 0; }
/* The dialog's own row-per-plan list is gone (2026-08-10): the account holder
   now gets the package page's `.cpp-*` cards, so there is ONE plan design in
   the product rather than a second, smaller one that could price things
   differently. */
.ent-up-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 14px; }
/* What a member gets instead of a wall of prices they cannot buy: the sentence,
   and whose job the upgrade is. */
.ent-up-ask {
  font-size: 13px; color: var(--slate); line-height: 1.7;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin-top: 4px;
}
/* ── The plan sheet ────────────────────────────────────────────────────────
   Four plans with their feature lists is a page's worth of comparison, so the
   account holder's dialog takes nearly the whole window and scrolls (user
   decision 2026-08-10).

   ⚠️ The SHEET is full-bleed; the CONTENT is not. `.ent-up-in` holds it to the
   package page's own column so the cards keep their proportions on a wide
   monitor — four cards stretched across 2560px is not a comparison, it is a
   row of billboards. */
.modal-sheet {
  max-width: none; width: calc(100vw - 40px);
  height: calc(100vh - 40px); max-height: none;
}
/* Only the ✕ remains up here — the heading moved into the body, where it can
   be the page-sized title the layout wants. */
/* ⚠️ `flex-end`: `.modal-header` is `space-between`, so with the title hidden
   the ✕ became the only child and slid to the LEFT. */
.modal-sheet .modal-header { border-bottom: 0; padding: 14px 16px 0; justify-content: flex-end; }
.modal-sheet .modal-title { display: none; }
.modal-sheet .modal-body { padding: 0 24px 40px; }
.ent-up-in { max-width: 1240px; margin: 0 auto; }
.ent-up-in .cpp-sub { margin: 8px 0 6px; }
.ent-up-in .ent-up-now { text-align: center; margin-bottom: 22px; }
.ent-up-in .ent-up-note { text-align: center; margin-top: 22px; }
@media (max-width: 900px) { .modal-sheet { width: 100vw; height: 100vh; border-radius: 0; } }
/* The plan they are already on. NOT the generic disabled look — a greyed-out
   button reads as something broken, where this is a statement of fact. */
.cpp-act .btn.cpp-existing,
.cpp-act .btn.cpp-existing:disabled {
  opacity: 1; cursor: default;
  background: var(--paper); border-color: var(--line); color: var(--slate);
}

/* ── The topbar's Upgrade button (2026-08-10) ──────────────────────────────
   It sits ON the menu bar, so it takes the menu bar's background; the word and
   the border carry the doc-type gradient instead (green → amber → purple, the
   Workspace ramp). ⚠️ The border is a masked gradient, not `border-color` — a
   border cannot take a gradient, and a two-layer background is how you get one
   without an extra element. */
.tp-plan-up {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--white);
  border: 1.5px solid transparent;
  border-radius: 7px;
  padding: 4px 10px 4px 9px;
  font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  background-image:
    linear-gradient(var(--white), var(--white)),
    linear-gradient(95deg, #2A715B 0%, #E0A800 52%, #B450FF 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.tp-plan-up-t {
  background: linear-gradient(95deg, #2A715B 0%, #E0A800 52%, #B450FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tp-plan-up-i { flex: none; display: block; }
.tp-plan-up:hover { filter: brightness(1.08); }

/* ── The package page (its own stage after registration) ───────────────────
   Four comparison cards need the window, which is why this is a page and not
   step 5 of a 550px signup card. */
.cpp { min-height: 100vh; background: var(--warm); }
/* `.ocr-head-in` is capped at 550px for the org-setup flow it was written for;
   this page's header spans its own wider column instead. */
.cpp-head-in { width: min(1240px, 100%) !important; }
.cpp-wrap { max-width: 1240px; margin: 0 auto; padding: 44px 24px 60px; }
.cpp-h { font-size: 30px; font-weight: 700; letter-spacing: -.6px; color: var(--ink); text-align: center; }
.cpp-sub { font-size: 14px; color: var(--slate); text-align: center; margin: 8px 0 34px; }
.cpp-loading { font-size: 14px; color: var(--muted); text-align: center; padding: 40px 0; grid-column: 1/-1; }

/* `stretch`, not `start`: the cards must be one height whatever their feature
   lists say, or a shorter plan reads as a lesser one. */
.cpp-grid { display: grid; gap: 16px; align-items: stretch; }
.cpp-n2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 640px; margin: 0 auto; }
.cpp-n3 { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 960px; margin: 0 auto; }
.cpp-n4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1080px) { .cpp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 720px; margin: 0 auto; } }
@media (max-width: 620px)  { .cpp-grid { grid-template-columns: minmax(0,1fr); max-width: 420px; } }

/* ⚠️ The top padding reserves the "Most popular" ribbon's height on EVERY
   card, featured or not, with air above the plan name on top of it. The
   featured card then pays for TWO differences of its own — a 2px border
   instead of 1px, and the 14px it hangs above the row — so its padding-top is
   this number + 13. Content offset from the card's outer edge is
   margin + border + padding, and all four cards must land on the same one, or
   the names, prices and Select buttons sit on four different lines. Move this
   number and `.feat`'s moves with it. */
.cpp-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 52px 22px 20px;
  /* ⚠️ The 14px is how the highlighted card stands taller: the OTHER cards are
     inset by it, rather than `.feat` hanging out on negative margins. Both
     describe the same row, but Chrome positions a stretched grid item with
     negative margins 2px off its own arithmetic, which put the featured plan's
     name 2px above everyone else's. Positive margins have no such surprise. */
  margin: 14px 0;
  display: flex; flex-direction: column;
  transition: background .16s, box-shadow .16s, transform .16s;
}
/* Hovering a card changes its surface — the reference's own affordance. */
.cpp-card:hover { background: var(--paper); box-shadow: var(--shadow); transform: translateY(-2px); }

/* The highlighted plan wears the gradient border, and there is only ever ONE
   per audience (enforced server-side). Same masked-gradient trick as the
   Upgrade button. */
/* It also stands 14px TALLER at each end — it keeps the margin the others give
   up — so the recommended plan is physically bigger rather than merely
   outlined. That 14px is given straight back as padding (52 + 13, the extra 1
   paying for its thicker border), which is what keeps its name on the same
   line as the other three. */
.cpp-card.feat {
  border-color: transparent;
  background-image:
    linear-gradient(var(--white), var(--white)),
    linear-gradient(150deg, #2A715B 0%, #E0A800 52%, #B450FF 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-width: 2px;
  margin: 0;
  padding-top: 65px;
  padding-bottom: 33px;
}
.cpp-card.feat:hover {
  background-image:
    linear-gradient(var(--paper), var(--paper)),
    linear-gradient(150deg, #2A715B 0%, #E0A800 52%, #B450FF 100%);
}
.cpp-ribbon {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(95deg, #2A715B 0%, #E0A800 52%, #B450FF 100%);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-align: center; padding: 5px 0;
  /* The card's 10px minus its own 2px border — a ribbon at the card's radius
     would bulge past the corner it sits inside. */
  border-radius: 8px 8px 0 0;
}

.cpp-name { font-size: 17px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
/* The ink FERBE Ops chose for this plan (`plans.name_colour`). Three keys,
   never a stored hex — see the tokens at the top of this file. */
.cpp-name.pc-green  { color: var(--plan-green); }
.cpp-name.pc-yellow { color: var(--plan-yellow); }
.cpp-name.pc-purple { color: var(--plan-purple); }
.cpp-cur {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: var(--paper); color: var(--slate); border-radius: 4px; padding: 2px 6px;
}
/* `min-height` because a card reading just "Free" has no currency symbol and
   no "/ month", so its row measures 2px shorter than a priced one — enough to
   walk everything below it out of line with the rest of the row. */
.cpp-price { margin: 14px 0 4px; min-height: 36px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.cpp-cur-sym { font-size: 15px; font-weight: 600; color: var(--slate); }
/* `tabular-nums` — the price COUNTS between cycles (animateCppAmount, app.v6.js)
   and proportional digits would jog the line width frame to frame. */
.cpp-amt { font-size: 34px; font-weight: 700; color: var(--ink); letter-spacing: -1.4px;
  line-height: 1; font-variant-numeric: tabular-nums; }
.cpp-per { font-size: 12px; color: var(--slate); }
.cpp-was { font-size: 12px; color: var(--muted); min-height: 17px; }
.cpp-desc { font-size: 13px; color: var(--slate); line-height: 1.6; margin-top: 12px; min-height: 42px; }
/* The seat count, directly above the button it informs.
   ⚠️ `min-height` because the row is rendered EMPTY on a plan with no number —
   an absent line would drop that card's button below the others', undoing the
   alignment the padding and button height are pinned for. */
.cpp-seats {
  display: flex; align-items: center; gap: 7px;
  min-height: 22px; margin-top: 14px;
  font-size: 13px; color: var(--slate); line-height: 1.4;
}
.cpp-seats b { color: var(--ink); font-weight: 700; }
.cpp-seats-i { flex: none; color: var(--accent); }
.cpp-act { margin: 10px 0 4px; }
/* ⚠️ A FIXED height, for the same reason the top padding is reserved above:
   the highlighted card's Select is `.btn-primary`, which carries no border,
   while every other card's is `.btn-secondary` with 1.5px — so left to
   themselves the buttons differ by 3px and the Includes lists beneath them
   start on four different lines. */
.cpp-act .btn { width: 100%; height: 36px; justify-content: center; align-items: center; }
.cpp-feats { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 12px; }
.cpp-feat-h { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.cpp-feat {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--slate); line-height: 1.5; padding: 3px 0;
}
/* A solid disc with a white tick, not a bare stroke — the discs give the list
   a left edge to read down. `margin-top` optically centres it on the first
   line of a label that wraps to two. */
.cpp-tk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff; margin-top: 1px;
}
.cpp-feat > span { min-width: 0; }
/* The note behind a written Includes line. A circle, not an icon set entry:
   it sits inside a sentence and has to read at 12px beside its own text.
   ⚠️ `vertical-align: middle` — the circle is centred on the text's own middle
   rather than hung off the baseline, which is what keeps it level with the
   words at any font size. */
.cpp-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%; vertical-align: middle;
  /* `middle` centres on baseline + half the x-height, which lands a shade
     under the text's own middle; 1px up is the optical centre. `.dtip` already
     makes this element `position: relative`, so the tip travels with it. */
  top: -1px;
  padding: 0; margin-left: 2px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--slate); font-family: inherit; font-size: 9px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.cpp-tip:hover, .cpp-tip.open { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ⚠️ CLICK, not hover. `.dtip` supplies the card's appearance — this page only
   changes what OPENS it, so there is no second copy of the tip styling. A
   hover-only note is a control that does nothing on a touch screen, which is
   where a pricing page is read as often as not. */
.cpp-tip.dtip:hover::after { opacity: 0; visibility: hidden; }
.cpp-tip.dtip.open::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ── Billing cycle toggle on the package page (2026-08-10) ─────────────────
   Shown only when a plan actually has an annual price — a toggle whose other
   side repeats the same numbers is a control that does nothing. */
/* The toggle, with the note that says what it does UNDER it — beside it, the
   sentence pushed the control off the page's centre line. */
.cpp-cycle { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; }
.cpp-cyc-note { font-size: 12.5px; color: var(--muted); text-align: center; }
.cpp-seg { position: relative; display: inline-flex; background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
/* The pill that SLIDES between the two buttons (cppCycleToggle, app.v6.js) —
   positioned/sized in JS because the labels are different widths (Yearly
   carries the save badge), so a 50/50 CSS split would clip one of them.
   Sits behind the buttons; only its own transform/width animate, never a
   layout property, so the slide stays on the compositor. */
.cpp-seg-fill { position: absolute; top: 3px; left: 0; bottom: 3px; z-index: 0;
  background: var(--accent); border-radius: 8px;
  transition: transform .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1); }
.cpp-seg button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--slate);
  padding: 7px 16px; border-radius: 8px; transition: color .18s; }
.cpp-seg button.on { color: #fff; }
/* `.cpp-save` is gone with the toggle's "Save N%" badge — it advertised a
   saving against monthly billing, which FERBE does not offer. `.cpp-saveline`
   survives as the DISCOUNT line on a card, which is a real price cut. */
.cpp-saveline { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 3px; }

/* ── Billing & Management (the account holder's own page) ──────────────────
   Two tabs — the plan they are on, and every invoice raised on the account.
   Wears `.pg-narrow` and `.set-card` like the other account-level pages, so it
   reads as one of them rather than as a bolt-on. */
/* No tab row of its own — `setSubheader` provides the sticky bar with the tabs
   pushed right, shared with Organisation Settings and My Profile. */
.bm-card { margin-bottom: 16px; }
.bm-h { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.bm-note { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.bm-note b { color: var(--slate); font-weight: 600; }

/* The plan, and the way to change it — the one thing this page exists for, so
   it leads and carries the only primary button on the tab. */
.bm-plan { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bm-plan-l { font-size: 12px; font-weight: 600; letter-spacing: .04em;
             text-transform: uppercase; color: var(--muted); }
.bm-plan-n { font-size: 26px; font-weight: 600; color: var(--ink); margin-top: 4px; line-height: 1.2; }
.bm-plan-t { font-size: 13px; color: var(--muted); margin-top: 6px; }
.bm-plan-t.soon { color: var(--danger); font-weight: 500; }

/* Three facts about the plan, as separate cards rather than rows: they answer
   different questions and a stacked list makes them read as one paragraph.
   ⚠️ `minmax(0, 1fr)` — a bare fr cannot shrink below "per organisation". */
/* However many facts the plan has — three on a free plan, four once there is a
   date to show. ⚠️ `auto-fit` with a min, not a fixed count: a hardcoded 3 left
   the fourth card alone on a second row at full width. */
.bm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 14px; margin-bottom: 16px; }
.bm-fact { background: var(--white); border: 1px solid var(--line);
           border-radius: 14px; padding: 16px 18px; }
.bm-fact-l { font-size: 12px; color: var(--muted); }
.bm-fact-v { font-size: 20px; font-weight: 600; color: var(--ink); margin-top: 5px; }
.bm-fact-s { font-size: 12px; color: var(--muted); margin-top: 3px; }
@media (max-width: 760px) { .bm-facts { grid-template-columns: 1fr; } }

.bm-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.bm-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .bm-form { grid-template-columns: 1fr; } }
.bm-acts { display: flex; justify-content: flex-end; margin-top: 12px; }
.bm-empty { font-size: 13px; color: var(--muted); padding: 18px 0; }
/* Payment history carries no card — the table IS the content. The caveat above
   it therefore needs its own top margin, which the card used to provide. */
.bm-note-top { margin: 2px 0 14px; }
/* The table needs no frame of its own — `.plan-table-wrap` already carries the
   border and radius the card was duplicating around it. */

/* Where the card WILL live. A statement, not a dead control: FERBE takes no
   card fields, because a number typed here is a number FERBE stores. */
.bm-pm { display: flex; gap: 14px; align-items: flex-start;
         background: var(--paper); border: 1px solid var(--line);
         border-radius: 12px; padding: 14px 16px; }
.bm-pm-ic { width: 34px; height: 34px; flex: none; border-radius: 9px;
            background: var(--white); border: 1px solid var(--line);
            display: flex; align-items: center; justify-content: center; color: var(--muted); }
.bm-pm-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.bm-pm-d { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 4px; }

/* Payment history. The period and the tax sit UNDER their own figures rather
   than in columns of their own — both are explanatory, and two more columns
   would squeeze the description that says what was bought. */
.bm-per { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.bm-docs { white-space: nowrap; }
.bm-link { color: var(--accent); font-weight: 500; font-size: 13px; text-decoration: none; }
.bm-link:hover { text-decoration: underline; }
.bm-link + .bm-link { margin-left: 14px; }
/* The three invoice states, on the standard pill recipe. Unpaid takes the
   Library's dashed outline: a bill not yet settled is a state not yet
   reached, which reads as the outline of a pill rather than a filled one. */
.bm-st-ok   { background: var(--success-l); color: #2e7d32; }
.bm-st-pend { background: transparent; border: 1px dashed var(--muted); color: var(--muted);
              padding: 2px 7px; }
.bm-st-bad  { background: var(--paper); color: var(--muted); text-decoration: line-through; }
/* A FAILED renewal is not void like a cancelled one — no strikethrough, the
   solid danger tint every other "needs attention now" state in the product
   uses (see the NC/audit status pills). */
.bm-st-fail { background: var(--danger-l); color: #9A4A4A; }
.bm-pay { margin-right: 14px; }

/* ── Registration: the step counter beside the title ────────────────────────
   The title and the percentage share one row, the number pushed right, so the
   heading says WHERE you are and the figure says HOW FAR (user decision
   2026-08-11). Five bars for four steps: pressing "Create an account" is the
   first, finishing is the fifth. */
.su-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.su-titlerow .ocr-title { margin-bottom: 0; }
.su-pct {
  position: relative; flex: none;
  font-size: 13px; font-weight: 600; color: var(--muted);
  letter-spacing: .02em; transition: color .3s;
}
.su-pct b { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Tabular figures so the number does not jog left and right as it counts. */
.su-pct.done, .su-pct.done b { color: var(--accent); }

/* The finish: three stars out of the counter. Absolutely positioned so they
   cannot reflow the row they burst from. */
.su-pop { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.su-star { position: absolute; left: 0; top: 0; opacity: 0; animation: suStar .9s ease-out forwards; }
.su-star svg { display: block; width: 15px; height: 15px; }
.su-star-0 { --sx: -26px; --sy: -22px; animation-delay: 0s; }
.su-star-1 { --sx:  16px; --sy: -28px; animation-delay: .09s; }
.su-star-2 { --sx:  -4px; --sy:  18px; animation-delay: .17s; }
@keyframes suStar {
  0%   { opacity: 0; transform: translate(0,0) scale(.3) rotate(0deg); }
  35%  { opacity: 1; transform: translate(calc(var(--sx) * .7), calc(var(--sy) * .7)) scale(1.15) rotate(90deg); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.85) rotate(160deg); }
}
@media (prefers-reduced-motion: reduce) { .su-star { animation-duration: .01ms; } }

/* Resend sits under the code field, right-aligned like Forgot password —
   it is about the field above it, not about the card. */
.su-resend { margin-top: 9px; text-align: right; font-size: 13px; }
.su-resend .login-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }

/* ── Registration step 3: the code field reports its own check ──────────────
   Spinner, then tick, inside the field — six digits submitting silently and
   the screen changing a blink later reads as the page jumping on its own.

   ⚠️ The circle is `.ocr-gen-ic`, the org-setup flow's idle → spin → done
   component, reused rather than reinvented: it is the same thing doing the
   same job (reporting one async step), and @keyframes ocrspin stays the ONE
   spin. Only the position and the failure state are this page's. */
.su-otp { position: relative; }
.su-otp .form-input { padding-right: 46px; transition: border-color .2s, background .2s; }
.su-otp-ic {
  position: absolute; right: 14px; top: 50%; margin-top: -11px;
  opacity: 0; transition: opacity .18s; pointer-events: none;
}
.su-otp.checking .su-otp-ic, .su-otp.ok .su-otp-ic, .su-otp.bad .su-otp-ic { opacity: 1; }
/* While checking, the digits recede — the field is busy, not editable. */
.su-otp.checking .form-input { color: var(--muted); background: var(--paper); }
.su-otp.ok .form-input { border-color: var(--accent); }
.su-otp.bad .form-input { border-color: var(--danger); animation: suShake .32s ease; }
.su-otp.bad .su-otp-ic {
  border-color: var(--danger); background: var(--danger); animation: none;
}
.su-otp.bad .su-otp-ic::after {
  content: '!'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
@keyframes suShake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-5px); }
  75%     { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .su-otp.bad .form-input { animation: none; }
  .su-otp-ic.spin { animation-duration: 2s; }
}

/* The saving badge on the Yearly tab. It says something TRUE now that monthly
   is a term a customer can buy — while FERBE billed annually only it implied a
   monthly option that did not exist, which is why it was removed then. */
.cpp-seg-save {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  margin-left: 6px; padding: 2px 6px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.cpp-seg button.on .cpp-seg-save { background: rgba(255,255,255,.22); color: #fff; }

/* ── "How your free trial works" — the screen after a password ──────────────
   Built to the reference: a tall centred card, a rail of green discs with a
   bold label and a body under each, and the action pinned at the foot so the
   button sits in the same place however many milestones are written. */
.tri-page .ocr-body { padding-top: 40px; }
/* ⚠️ The shell's `.ocr-col` is itself a white bordered card (it is the org-setup
   flow's step panel). This page draws its own, so the shell's is stripped back
   to a plain column — otherwise the welcome sits in a card inside a card. */
/* 550px — the SAME width as `.ocr-head-in`, so the card's edges line up with
   the header's logo (user decision 2026-08-20), exactly as the org-setup
   flow's column does. */
.tri-col { width: min(550px, 100%); max-width: 550px;
  background: none; border: 0; border-radius: 0; padding: 0; }
/* No shadow (user decision 2026-08-20) — a plain white card on the page. */
.tri-card {
  background: var(--white); border-radius: 20px; padding: 44px 44px 32px;
  display: flex; flex-direction: column; min-height: 560px;
}
.tri-title { font-size: 26px; font-weight: 700; color: var(--ink); text-align: center;
  margin: 4px 0 34px; letter-spacing: -.01em; }
.tri-steps { display: flex; flex-direction: column; gap: 30px; }
.tri-step { display: grid; grid-template-columns: 50px 1fr; align-items: start; position: relative; }
/* An accent DISC holding the milestone's icon (TRI_ICONS, by position) — a
   moment in time, not a step to do, so no number. A milestone past the drawn
   icons falls back to the plain small disc (`.tri-dot-plain`). */
.tri-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
  color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.tri-dot svg { display: block; width: 16px; height: 16px; }
.tri-dot-plain::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
/* The DOTTED rail between discs — drawn per row (`:not(:last-child)`), the
   timeline's own recipe, so the last disc simply carries none. It spans the
   flex gap (`bottom: -24px` against the 30px gap, 6px clear of each disc). */
.tri-step:not(:last-child)::before { content: ''; position: absolute; left: 16px;
  top: 40px; bottom: -24px; border-left: 2px dotted var(--line); }
.tri-body { min-width: 0; padding-top: 5px; }
.tri-label { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.tri-text { font-size: 15px; color: var(--slate); line-height: 1.55; margin: 0; }
.tri-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tri-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px;
  color: var(--slate); line-height: 1.5; }
/* The tick disc is `.cpp-tk`, the package cards' own — one tick in the product,
   and this list is making the same kind of promise. */
.tri-list .cpp-tk { margin-top: 3px; flex: none; }
/* `margin-top: auto` is what pins the action to the foot: the card keeps one
   height whether a milestone carries a sentence or five ticks. */
.tri-foot { margin-top: auto; padding-top: 36px; }
.tri-go { width: 100%; justify-content: center; padding: 15px 22px; font-size: 15px; border-radius: 999px; }
.tri-note { display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; color: var(--muted); margin-top: 12px; }
/* The shield-tick is GREEN (user decision 2026-08-20) — the icon is stroke
   `currentColor`, so the wrapper's colour is what paints it. */
.tri-note-ic { color: var(--accent); display: inline-flex; flex: none; }
.tri-note-ic svg { display: block; }
@media (max-width: 640px) {
  .tri-card { padding: 30px 22px 24px; border-radius: 14px; min-height: 0; }
  .tri-title { font-size: 22px; }
}

/* ── Trial ended (2026-09-17) ──────────────────────────────────────────────
   ONE non-dismissable modal for BOTH roles (`.tel-modal`, plain
   `.modal`/`.modal-backdrop` with no close button and no click-outside
   handler wired in — see maybeShowTrialEndedModal in app.v6.js): the copy
   and the one button fork on `may_change_plan` in the markup, not the CSS.
   WIDE and TALL, header row first (logo left, Sign out right — the
   reference's own row, and the one way out of a modal with no ✕), then
   title → description → the one action, RG_BANNER closing the card at the
   bottom. */
/* Sized IDENTICALLY to the create-organisation modal (`.ocm-modal`) — ~100px
   clear of the screen on every side — so the two full-screen-ish dialogs in
   the product read as one family rather than two different sizes. */
.tel-modal { width: calc(100vw - 200px); max-width: 1300px;
  height: calc(100vh - 200px); max-height: 900px; overflow: hidden; }
.tel-modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px 0; }
.tel-modal-logo { display: flex; align-items: center; gap: 9px; }
.tel-modal-signout { padding: 7px 18px; border-radius: 999px; }
/* The content (title + description) is short next to this much room, so it
   CENTRES in the space rather than sitting pinned to the top with a long
   empty gap before the button — `flex: 1` is what gives it that room to
   centre within, the same way `.ocm-body`'s `flex: 1` gives the
   create-organisation modal's footer somewhere to sit at the card's own
   bottom. */
.tel-modal-body { flex: 1; display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: 28px 44px 8px; }
/* A member gets no footer button, so the description needs its OWN bottom
   margin rather than relying on `.tel-modal-foot`'s padding to hold the
   gap above the illustration. */
.tel-modal-body-last { padding-bottom: 34px; }
.tel-modal-title { font-size: 34px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.tel-modal-sub { font-size: 15px; color: var(--slate); line-height: 1.6; margin: 0 auto; max-width: 460px; }
.tel-modal-foot { border-top: 0; justify-content: center; padding: 26px 44px 40px; }
.tel-modal-foot .btn { padding: 13px 38px; border-radius: 999px; }
/* `.rgw-banner` sets the aspect ratio and the gradient fallback; the RADIUS is
   on the BOTTOM now that the illustration closes the card instead of leading
   it. */
.tel-banner { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* List pages with nothing yet: no icon, a dotted box. */
.empty-note { border: 1.5px dashed var(--line); border-radius: 16px; padding: 44px 24px; text-align: center; color: var(--slate); margin-top: 24px; }
.empty-note .empty-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.empty-note p { margin: 0; font-size: 15px; line-height: 1.6; }

/* Topbar plan chip wears the plan's own name colour, tinted. */
.tp-plan-n.pc-green  { color: var(--plan-green);  background: color-mix(in srgb, var(--plan-green) 14%, transparent); }
.tp-plan-n.pc-yellow { color: var(--plan-yellow); background: color-mix(in srgb, var(--plan-yellow) 16%, transparent); }
.tp-plan-n.pc-purple { color: var(--plan-purple); background: color-mix(in srgb, var(--plan-purple) 14%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   TEMPORARY UI PREVIEW — Document Editor layout revamp (2026-09-30)
   Everything under `.pv2-*` is scoped to this one experiment and safe to
   delete as a block: it shares no class names with the real app, so removing
   this section plus its two call sites in app.v6.js (openDocumentsV2Preview /
   maybeOpenDocumentsV2Preview and the one "Preview new layout" button) leaves
   nothing behind. Do not reuse `.pv2-*` for anything permanent.
   ═══════════════════════════════════════════════════════════════════════════ */
.pv2-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--warm);
  display: flex; font-family: var(--font); }
/* Sidebar wears the SAME grey as the canvas now (user decision 2026-09-30,
   round 2) — no border, no white fill of its own, so the whole left side
   reads as one field and the white container is the only "surface" on the
   page. */
.pv2-side { width: 240px; flex: 0 0 auto; background: var(--warm);
  padding: 18px 12px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  transition: width .18s ease; }
/* Collapsed = icon-only rail: the sidebar itself narrows rather than sliding
   under anything, and every label disappears in favour of a native `title`
   tooltip on hover — this is throwaway preview code, so the product's own
   no-native-title-tooltip rule (see `.dtip` in the REAL app's styles)
   deliberately does not apply here; it would be more code for a page nobody
   keeps. */
.pv2-side.collapsed { width: 68px; }
.pv2-side.collapsed .pv2-logo-text, .pv2-side.collapsed .pv2-nav-item span,
.pv2-side.collapsed .pv2-nav-group, .pv2-side.collapsed .pv2-who-text { display: none; }
.pv2-side.collapsed .pv2-logo { justify-content: center; padding-left: 0; padding-right: 0; }
.pv2-side.collapsed .pv2-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.pv2-side.collapsed .pv2-who { justify-content: center; padding-left: 0; padding-right: 0; }
/* Bigger icons, more room between them, collapsed only (user decision
   2026-09-30) — the expanded rail stays as compact as it already was; this
   is specifically about the icon-only rail being comfortable to scan and
   click. */
.pv2-side.collapsed .pv2-nav-item { padding-top: 10px; padding-bottom: 10px; margin-bottom: 4px; }
.pv2-side.collapsed .pv2-nav-item svg { width: 19px; height: 19px; }
.pv2-logo { display: flex; align-items: center; gap: 10px; padding: 4px 6px 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; color: var(--ink); }
.pv2-logo-text { flex: 1; }
.pv2-logo-icon { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg,#2A715B,#B450FF);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
  flex: 0 0 auto; }
/* The divider between the logo and the collapse toggle (2026-09-30) — full
   width of the sidebar's own content area. */
.pv2-side-divider { height: 1px; background: var(--line); margin: 2px 0 8px; }
.pv2-nav-item { display: flex; align-items: center; gap: 9px; padding: 5px 10px; border-radius: 7px;
  font-size: 12.5px; color: var(--ink); cursor: pointer; white-space: nowrap;
  width: 100%; border: none; background: none; font-family: inherit; text-align: left; }
.pv2-nav-item:hover { background: var(--white); }
.pv2-nav-item.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 600; }
.pv2-nav-item svg { flex: 0 0 auto; opacity: .8; width: 14px; height: 14px; }
/* The toggle sits ABOVE My Dashboard, styled exactly like a nav row so the
   two read as one continuous list, just with a divider and a muted colour
   marking it as a control rather than a page. */
.pv2-toggle-item { color: var(--muted); margin-bottom: 6px; }
.pv2-nav-group { margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 0 10px 6px; white-space: nowrap; }
/* The account block at the sidebar's foot (2026-09-30, replacing the plain
   "Temporary UI preview" label) — avatar, name, plan, the same kind of thing
   the REAL topbar's avatar menu shows, so the collapsed rail still answers
   "who am I, on what plan" via its own tooltip. */
.pv2-who { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; padding-left: 10px; }
.pv2-who-av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); }
.pv2-who-text { min-width: 0; overflow: hidden; }
.pv2-who-n { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-who-p { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The grey CANVAS the container box floats on — a uniform 15px gap on every
   side (user decision 2026-09-30), sidebar included, since the sidebar no
   longer has its own surface to set it apart. */
.pv2-main { flex: 1; min-width: 0; overflow-y: auto; padding: 15px; background: var(--warm); }
.pv2-container { background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 17px 28px 28px; box-shadow: 0 1px 3px rgba(23,38,59,.05);
  /* Always at least the screen's height (minus .pv2-main's 15px padding top
     and bottom), so a short or empty page still reads as one full panel. */
  box-sizing: border-box; min-height: calc(100vh - 30px); }
.pv2-top { display: flex; align-items: center; justify-content: space-between; }
.pv2-title { font-size: 21px; font-weight: 800; color: var(--ink); }
.pv2-exit { display: inline-flex; align-items: center; gap: 6px; }
/* Decorative-only (2026-09-30, user decision): a mock "Create Document"
   button standing in for whatever the real header action would be here —
   deliberately a NO-OP on click (`onclick` is never wired), square-ish
   corners rather than the product's own pill buttons, and its own soft
   shadow rather than `.btn-primary`'s flat fill, so it reads as a distinct
   design being trialled rather than a working control. */
/* Shadow is EVEN on all sides — zero offset, so it reads as a halo hugging
   the button's own edges rather than a drop-shadow pooling underneath it. */
.pv2-create-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 6px; border: 1px solid var(--line); background: var(--accent); color: #fff; font-size: 13px;
  font-weight: 600; cursor: pointer; box-shadow: 0 0 6px rgba(0,126,101,.45); }
.pv2-create-btn:hover { background: var(--accent-d); }
/* Export moved up beside Create Document (2026-09-30) — same shape and size,
   just not green: white fill, ink text, no coloured shadow. */
.pv2-create-btn.pv2-btn-plain { background: var(--white); color: var(--ink); box-shadow: 0 0 6px rgba(23,38,59,.14); }
.pv2-create-btn.pv2-btn-plain:hover { background: var(--paper); }
.pv2-top-actions { display: flex; align-items: center; gap: 8px; }
/* The full-bleed rule under the title — one edge of the container to the
   other, so it has to escape the container's own side padding via a
   negative margin rather than just being a bottom border on `.pv2-top`
   (which would stop short at the padding). */
.pv2-title-rule { height: 1px; background: var(--line); margin: 17px -28px 0; }
.pv2-tabs { display: flex; align-items: center; gap: 26px; margin: 18px 0 22px; }
.pv2-tab { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; font-size: 14px; color: var(--slate);
  cursor: pointer; border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none; }
.pv2-tab svg { opacity: .75; }
.pv2-tab.active { color: var(--ink); font-weight: 600; border-bottom-color: #2563EB; }
.pv2-tab.active svg { opacity: 1; color: #2563EB; }
.pv2-tab-count { background: var(--paper); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--slate); }
/* Search stays left; the Table/By Group switch sits at the right edge of
   the row (user request, 2026-10-01) — `margin-left: auto` on the switch
   itself pushes it there while both stay on the same flex row, so they
   remain vertically aligned with each other. */
.pv2-toolbar { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 16px; }
.pv2-toolbar .pv2-viewsw { margin-left: auto; }
.pv2-search { position: relative; width: 280px; }
.pv2-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.pv2-search input { width: 100%; height: 37px; box-sizing: border-box; padding-left: 34px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
/* Table / By Group switch (2026-10-01, user-requested option) — a simple
   segmented pair, same recipe as the theme tabs' active state. Icon-only
   (2026-10-01): the glyphs are the Library view-switch's own `LIB_VIEW_ICON`
   table/group SVGs, reused rather than redrawn, with the label moved to a
   `.dtip` hover tip — never the native `title`, which lags a beat. */
.pv2-viewsw { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; height: 37px; }
.pv2-viewsw-btn { display: flex; align-items: center; justify-content: center;
  border: none; background: var(--white); color: var(--slate);
  width: 38px; cursor: pointer; border-left: 1px solid var(--line); }
.pv2-viewsw-btn:first-child { border-left: none; }
.pv2-viewsw-btn.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.pv2-viewsw-btn:hover:not(.active) { background: var(--paper); }
/* The table itself is now the REAL `.doc-table` (public/styles.css's own
   rules, already loaded) — same columns, same badges, same avatars, copied
   exactly rather than re-interpreted (user decision 2026-09-30). This wrap
   is just the bordered box around it, the same role `.group-table` plays on
   the real page. */
.pv2-table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; }
/* A genuine bordered GRID (user decision 2026-10-01, "table format design")
   — a line between every column as well as every row. Scoped to THIS
   preview's own wrapper, never the bare `.doc-table` selector — that class
   is the real Documents page's own table, and a global change here would
   restyle it too. */
.pv2-docs-area .doc-table th, .pv2-docs-area .doc-table td { border-right: 1px solid var(--line); }
.pv2-docs-area .doc-table th:last-child, .pv2-docs-area .doc-table td:last-child { border-right: none; }
/* Fixed column widths tuned for THIS preview's own, much wider page (user
   decision 2026-10-01) — single-line text that stops short of the divider
   rather than wrapping or running flush against it. The real page's own
   per-column widths (dt-key/status/ver/date/dec/people/act) were sized for
   its narrower content column and are overridden here, scoped to this
   wrapper only. */
.pv2-docs-area .doc-table { table-layout: fixed; }
.pv2-docs-area .doc-table .tid.dt-key { width: 90px; }
.pv2-docs-area .doc-table .dt-status  { width: 155px; }
.pv2-docs-area .doc-table .dt-ver     { width: 105px; }
.pv2-docs-area .doc-table .dt-date    { width: 120px; }
.pv2-docs-area .doc-table .dt-dec     { width: 130px; }
.pv2-docs-area .doc-table .dt-people  { width: 150px; }
/* ⚠️ Measured, not guessed: the "⊕ Generate" button needs ~156px at this
   font — 110px clipped it mid-word. 170px leaves real room. */
.pv2-docs-area .doc-table .dt-act     { width: 170px; }
/* Every cell's text stays on ONE line and stops short of the border rather
   than wrapping into it or running flush against it. */
.pv2-docs-area .doc-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-docs-area .doc-table .dt-title, .pv2-docs-area .doc-table .dt-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Owner's avatar chips and the Actions column's button must never be
   ellipsis-clipped like plain text would be — only real text cells should
   truncate. */
.pv2-docs-area .doc-table .dt-people, .pv2-docs-area .doc-table .dt-act, .pv2-docs-area .doc-table .dt-status { overflow: visible; white-space: nowrap; }
/* Equal left/right padding on every column (user decision 2026-10-01) — the
   real page's `.tgr` recipe deliberately packs data columns against the
   right edge with an asymmetric 28px-left/12px-right gutter (see the
   library-table-column-alignment note); this preview wants the plainer,
   symmetric look instead, so it is overridden back to one number both
   sides, scoped to this wrapper only. */
.pv2-docs-area .doc-table th, .pv2-docs-area .doc-table td,
.pv2-docs-area .doc-table th.tgr, .pv2-docs-area .doc-table td.tgr,
.pv2-docs-area .doc-table tbody td.tgr { padding-left: 16px; padding-right: 16px; }
/* ⚠️ Equal PADDING alone does not make an equal GAP — a narrow button or
   badge sitting left-aligned in a much wider column leaves a big gap on its
   right and almost none on its left, which is exactly what looked
   lopsided (2026-10-01). Centering these narrower data columns is what
   actually makes the space on both sides of the content match; the
   identity/label columns (Code, Document) stay left-aligned since they
   carry real reading content, not a short badge/button/avatar row. */
.pv2-docs-area .doc-table th.tgr, .pv2-docs-area .doc-table td.tgr { text-align: center; }
/* The type-letter square badge in front of the title (2026-10-01) — P for
   Policy, S for SOP, F for Form, R for Register, coloured same as the type
   label beside it (OCR_TYPE_COLOUR). */
.pv2-doc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pv2-doc > div { min-width: 0; }
.pv2-doc-ic { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800; color: #fff; }

/* ── PART 2 (2026-09-30, revised again) — Document Editor content preview,
   FULL PAGE, no app sidebar at all. The reference image was a STRUCTURE
   reference only (no sidebar, outline left, status right) — the title bar
   and typography are this product's own, reusing the EXACT header recipe
   from the Documents-list preview (`.pv2-top`/`.pv2-title`/`.pv2-title-rule`/
   `.pv2-create-btn`) rather than the Notion icon-over-huge-title block the
   first cut mistakenly copied. Deletable together with its JS
   (openDocEditorV2Preview and friends, in app.v6.js) and the one trigger
   button on the real Documents page. */
.pv3-page { position: fixed; inset: 0; z-index: 9999; background: var(--warm);
  font-family: var(--font); overflow-y: auto; }
/* A distinct WHITE band (2026-09-30) — sticky, edge to edge, separate from
   the grey canvas the columns sit on below it. */
.pv3-topbar { position: sticky; top: 0; z-index: 1; background: var(--white);
  border-bottom: 1px solid var(--line); padding: 14px 32px; }
.pv3-topbar .pv2-top { align-items: center; }
/* Full width (user decision 2026-09-30) — no reading-width cap; the page's
   own gutter is the only thing narrowing it. */
.pv3-full { padding: 24px 32px 60px; }
/* Icon-only, circular (2026-09-30, reference: a design tool's own close
   button) — replacing the earlier text "Exit" button. */
.pv3-exit-btn { margin-left: 6px; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
.pv3-exit-btn:hover { background: var(--line); }
/* Comments/History as one rounded icon-only pill (2026-09-30, reference
   image) — a shared container rather than two separate buttons. */
/* Outer height matches the other header buttons (34px) exactly — the
   buttons inside are sized to fit the container's own padding, not the
   other way round. */
.pv3-icongroup { display: flex; align-items: center; gap: 2px; height: 34px; background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; padding: 2px;
  box-shadow: 0 1px 3px rgba(23,38,59,.06); box-sizing: border-box; }
.pv3-icongroup-btn { width: 32px; height: 28px; border: none; background: none; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }
.pv3-icongroup-btn:hover { background: var(--paper); }
.pv3-icongroup-btn svg { width: 16px; height: 16px; }
.pv3-status-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 4px; background: var(--paper); color: var(--slate); }
.pv3-ver { font-size: 12px; color: var(--muted); }
/* Left/right columns widened (user decision 2026-09-30). */
.pv3-cols { display: grid; grid-template-columns: 260px 1fr 300px; gap: 32px; margin-top: 0; }
.pv3-col-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; }
/* The divider runs flush from the top bar down — no gap above it — by
   pulling the border up through `.pv3-full`'s own top padding and giving it
   back as the outline's own padding-top, so the CONTENT inside still sits
   where it did. */
/* Sticky while the page scrolls (2026-09-30) — stays below the sticky top
   bar rather than scrolling away with the content. `align-self: start` is
   what makes `position: sticky` work at all on a grid item; grid items
   stretch to the row's full height by default, which gives sticky nothing
   to travel within. */
.pv3-outline { border-right: 1px solid var(--line); padding-right: 16px;
  margin-top: -24px; padding-top: 24px;
  /* A fixed full-viewport height (not just a max), so the divider runs
     unbroken from the top bar to the bottom of the screen however short the
     outline is. border-box keeps the 24px top padding inside that height. */
  box-sizing: border-box; height: calc(100vh - 64px);
  position: sticky; top: 63px; align-self: start; overflow-y: auto; }
/* The head row (icon · title · chevron), reference image's "Pages ^" row. */
.pv3-outline-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink); margin-bottom: 10px; }
.pv3-outline-head-ic svg { width: 15px; height: 15px; color: var(--slate); }
.pv3-outline-chev { margin-left: auto; color: var(--muted); font-size: 11px; }
/* The tree: the Audit checklist's own rail recipe (`.ck-item` — a vertical
   rail per item and a rounded elbow into each one, the last item's rail
   stopping where its curve begins), same #CFD4E0 ink. Page icons removed. */
.pv3-outline-tree { position: relative; margin-left: 7px; }
.pv3-outline-item { position: relative; display: block; font-size: 12.5px; line-height: 19px;
  color: var(--slate); padding: 4px 6px 4px 20px;
  cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv3-outline-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  border-left: 1px solid #CFD4E0; }
.pv3-outline-item:last-child::before { bottom: auto; height: 8px; }
.pv3-outline-item::after { content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 6px;
  border-left: 1px solid #CFD4E0; border-bottom: 1px solid #CFD4E0; border-bottom-left-radius: 6px; }
.pv3-outline-item:hover { color: var(--ink); }
.pv3-outline-num { color: var(--muted); margin-right: 6px; }
/* Section cards and the info column are now the REAL editor's own
   `.de-card`/`.de-box` markup and styles (public/editor.v1.js's own
   injected stylesheet, via edInjectStyles()) — copied exactly, per user
   decision 2026-09-30, rather than a `.pv3-*` re-interpretation of them.
   Only the wrapper and a small "this is a preview" footnote stay local. */
.pv3-content-wrap { min-width: 0; }
.pv3-info { border-left: 1px solid var(--line); padding-left: 16px; }
.pv3-info-foot { font-size: 11px; color: var(--muted); padding-top: 16px; border-top: 1px solid var(--line); margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TEMPORARY UI PREVIEW — Audit Programmes list (2026-10-01, `.pv4-*`)
   Reuses the Documents-list preview's `.pv2-*` shell (sidebar, grey canvas,
   white container, title bar, tabs, toolbar) and the REAL `.doc-table` look
   for the table. Everything here is scoped under `.pv4-area`, so neither the
   real Audit Programmes page nor the Documents preview is affected.
   Delete this block together with the JS block in app.v6.js.
   ═══════════════════════════════════════════════════════════════════════════ */
.pv4-area .doc-table { table-layout: fixed; }
.pv4-area .doc-table th, .pv4-area .doc-table td { border-right: 1px solid var(--line); padding-left: 16px; padding-right: 16px; }
.pv4-area .doc-table th:last-child, .pv4-area .doc-table td:last-child { border-right: none; }
.pv4-area .doc-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv4-area .doc-table th.tid, .pv4-area .doc-table td.tid { width: 170px; }
.pv4-area .doc-table .pv4-year   { width: 100px; }
.pv4-area .doc-table .pv4-lead   { width: 220px; }
.pv4-area .doc-table .pv4-nc     { width: 120px; }
.pv4-area .doc-table .pv4-status { width: 170px; }
.pv4-area .doc-table th.tgr, .pv4-area .doc-table td.tgr { text-align: center; }
.pv4-area .doc-table td.pv4-lead { overflow: visible; }
.pv4-area .doc-table tbody tr { cursor: pointer; }
.pv4-area .doc-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.pv4-area .pv4-prog { font-weight: 600; color: var(--ink); font-size: 14px; }
.pv4-empty { padding: 48px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ── TEMPORARY UI PREVIEW — audit programme detail (2026-10-01, `.pv5-*`).
   Wears the editor preview's `.pv3-page`/`.pv3-topbar`/`.pv3-full` shell;
   the tab bodies are the real Plan/Questionnaire/NC/Report renderers. */
.pv5-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pv5-left .pv2-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv5-back { margin-left: 0; flex: 0 0 auto; }
.pv5-ref { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; letter-spacing: .02em; }
/* The four tabs as one segmented pill — the Comments/History group's shape
   from the editor preview, with text. */
.pv5-seg { display: flex; align-items: center; gap: 2px; padding: 3px; height: 34px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.pv5-seg-btn { height: 26px; padding: 0 12px; border: none; border-radius: 7px; background: none;
  font-size: 13px; font-weight: 500; color: var(--slate); cursor: pointer; white-space: nowrap; }
.pv5-seg-btn:hover:not(:disabled):not(.active) { background: var(--paper); color: var(--ink); }
.pv5-seg-btn.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 600; }
.pv5-seg-btn:disabled { color: var(--line); cursor: not-allowed; }
/* The real tabs open modals (z 100) and slide-outs (z 60/61); this preview
   sits at 9999, so while it is open those must sit above it. Scoped by :has
   so nothing changes when the preview is closed. */
/* …except the real page's own first-visit guide deck (`.modal.rgw`), which
   belongs to the page underneath and must stay under the preview. */
body:has(#pv5Overlay) .modal-backdrop:not(:has(> .rgw)),
body:has(#pv5Overlay) .sp-backdrop { z-index: 10000; }
body:has(#pv5Overlay) .sp-panel { z-index: 10001; }
/* Plan tab in three columns (pv5PlanThreeCol): information · status, readiness,
   risk and scope · audit checklist. Falls back to one column on narrow screens
   like the real two-column grid does. */
.pv5-page .pl-grid.pv5-grid3 { grid-template-columns: 300px minmax(0,1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .pv5-page .pl-grid.pv5-grid3 { grid-template-columns: 1fr; } }

/* Editor preview — right column as a "Details" panel (2026-10-01, reference:
   a CRM record's side panel). Caret headers with a trailing rule, label-left /
   value-right rows, small bordered cards for people and comments. */
.pv3-details { display: flex; flex-direction: column; gap: 0;
  /* Pulls the column's border-left up through .pv3-full's 24px top padding so
     the divider meets the top bar with no gap — the outline column's trick. */
  margin-top: -24px; padding-top: 24px;
  /* Sticky, exactly like the outline column on the left: pinned under the
     top bar, full viewport height, scrolling on its own if it ever overflows. */
  box-sizing: border-box; height: calc(100vh - 64px);
  position: sticky; top: 63px; align-self: start; overflow-y: auto; }
.pv3-details .pv3-info-foot { border-top: none; padding-top: 6px; margin-top: 0; }
.pv3-d-title { font-size: 15px; font-weight: 700; color: var(--ink); padding-bottom: 6px; }
.pv3-d-sh { display: flex; align-items: center; gap: 6px; margin: 21px 0 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pv3-d-sh svg { color: var(--muted); flex: 0 0 auto; }
.pv3-d-sh i { flex: 1; height: 1px; background: var(--line); margin-left: 6px; }
/* Type follows the audit Plan tab's Audit information box (.pl-kv-k / .pl-kv-v):
   13px slate labels, 13px 500 ink-soft values. */
.pv3-d-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.pv3-d-k { color: var(--slate); white-space: nowrap; }
.pv3-d-v { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-soft); font-weight: 500; }
.pv3-d-v svg { flex: 0 0 auto; color: var(--muted); }
.pv3-d-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pv3-d-muted { color: var(--muted); font-weight: 500; }
/* Status square — the reference's "■ At risk" marker, in our status colours. */
.pv3-d-sq { width: 8px; height: 8px; border-radius: 2px; background: #9AA3B2; flex: 0 0 auto; }
.pv3-d-st-under_review, .pv3-d-st-reviewed, .pv3-d-st-revision { background: #2563EB; }
.pv3-d-st-approved { background: var(--green, #2e7d32); }
.pv3-d-st-returned_for_correction, .pv3-d-st-returned_by_approver { background: #c62828; }
.pv3-d-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white);
  box-shadow: 0 1px 2px rgba(23,38,59,.05); font-size: 13px; font-weight: 500; color: var(--ink-soft);  margin-bottom: 6px;}
.pv3-d-cl { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.pv3-d-cl svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--muted); }
.pv3-d-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* The reference's stacked-card edge under a list's last card. */
/* Stacked cards peeking out below a card. Each layer is a white shadow plus a
   1px-wider --line shadow behind it, inset a little more than the one above
   (negative spread), so it reads as a card tucked underneath. stack1 = one
   card behind, 4px showing. */
.pv3-details .pv3-d-stack1 { box-shadow: 0 1px 2px rgba(23,38,59,.05),
  0 8px 0 -4px var(--white), 0 8px 0 -3px var(--line); margin-bottom: 12px; }

.pv3-d-av { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 9px; font-weight: 700; color: #fff; background: var(--slate); }
.pv3-d-av-none { background: none; border: 1.5px dashed var(--line); }
.pv3-d-link { border: none; background: none; padding: 0; font-size: 13px; font-weight: 500; color: var(--accent); cursor: pointer; white-space: nowrap; }
.pv3-d-note { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 12px; }
/* Editor preview — Comments & notes entries: one bordered card each, in the
   Details card style. Workflow labels use the real box's colours
   (.de-mini-a t-go/ok/no/na in editor.v1.js). */
.pv3-d-cmt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px;
  margin-bottom: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--white);
  box-shadow: 0 1px 2px rgba(23,38,59,.05); }
.pv3-d-cmt-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font-size: 13px; font-weight: 600; color: var(--ink); }
.pv3-d-cmt-b { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.pv3-d-act { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px; }
.pv3-d-act.t-go { background: #e8f3ee; color: #1E6E5C; }
.pv3-d-act.t-ok { background: #e3f0fb; color: #1565c0; }
.pv3-d-act.t-no { background: #fdecea; color: #c62828; }
.pv3-d-act.t-na { background: var(--paper); color: var(--slate); }
.pv3-d-allc { align-self: flex-start; margin-top: 4px; }
/* Comments collapsed to one line: the latest entry on a single card. A real
   <button>, so its UA chrome is reset to the card's own look. */
.pv3-d-cmt-one { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.pv3-d-cmt-one:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pv3-d-cmt-one .pv3-d-ell { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.pv3-d-cmt-one .pv3-d-ell b { font-weight: 600; color: var(--ink); }
.pv3-d-date { flex: 0 0 auto; font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pv3-d-cmt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.pv3-d-less { border: none; background: none; padding: 0; font-size: 12px; color: var(--muted); cursor: pointer; }
.pv3-d-less:hover { color: var(--ink); }

/* The two sticky side columns scroll on their own when they overflow, but
   without a visible scrollbar — it sat on top of the content. */
.pv3-outline, .pv3-details { scrollbar-width: none; }
.pv3-outline::-webkit-scrollbar, .pv3-details::-webkit-scrollbar { display: none; }

/* Audit detail preview — the Plan tab's information column as a "Details"
   panel, matching the document-editor preview's right column (.pv3-details):
   sticky, full height, a divider on its inner edge, no boxes, caret section
   headers with a trailing rule, people as small bordered cards. */
.pv5-page .pv5-side { gap: 0; border-right: 1px solid var(--line); padding-right: 20px;
  margin-top: -24px; padding-top: 24px; box-sizing: border-box; height: calc(100vh - 64px);
  position: sticky; top: 63px; align-self: start; overflow-y: auto; scrollbar-width: none; }
.pv5-page .pv5-side::-webkit-scrollbar { display: none; }
.pv5-side > .pl-box, .pv5-side > .pl-scope-sec { margin-top: 21px; }
.pv5-side > .pv3-d-title + * { margin-top: 6px; }
.pv5-side .pl-box { background: none; border: none; border-radius: 0; overflow: visible; }
.pv5-side .pl-box-head, .pv5-side .pl-scope-head { background: none; border: none; padding: 0;
  margin: 0 0 6px; min-height: 24px; border-radius: 0; }
.pv5-side .pl-box-body { padding: 0; }
/* Title · caret · rule — the rule fills whatever the head's buttons leave. */
.pv5-side .pl-box-title { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--muted); }
.pv5-side .pl-box-title::before { content: ''; order: 1; flex: 0 0 auto; width: 8px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%239AA3B2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px no-repeat; }
.pv5-side .pl-box-title::after { content: ''; order: 2; flex: 1; height: 1px; background: var(--line); margin: 0 4px 0 6px; }
/* Auditors as person cards, like the editor preview's People cards. */
.pv5-side .pl-person, .pv5-side .pl-person + .pl-person { border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); padding: 6px 12px; margin-bottom: 6px; box-shadow: 0 1px 2px rgba(23,38,59,.05); }
/* + Add and ⇄ in the Auditors header: the preview's plain button
   (.pv2-create-btn.pv2-btn-plain — white, soft all-round shadow), a size down. */
.pv5-side .pl-box-head .btn { height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink);
  box-shadow: 0 0 6px rgba(23,38,59,.14); }
.pv5-side .pl-box-head .btn:hover { background: var(--paper); }
/* Each auditor on ONE line, like the editor preview's People cards:
   avatar · name, role pushed right. */
.pv5-side .pl-person, .pv5-side .pl-person + .pl-person { min-height: 36px; padding: 0 12px; box-sizing: border-box; }
.pv5-side .pl-person .oc-chip { width: 20px; height: 20px; min-width: 20px; font-size: 9px; }
.pv5-side .pl-person-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pv5-side .pl-person-name { font-size: 13px; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pv5-side .pl-person-role { font-size: 13px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }

/* Audit detail preview — Audit checklist as "Getting started" cards
   (2026-10-01, reference image). Grey outer card with the stage header;
   a white inner panel of numbered steps; the 0fr→1fr expand the real
   checklist uses. */
.pv6-ck { display: flex; flex-direction: column; gap: 10px; }
.pv6-ck-title { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--slate); margin-bottom: 2px; }
.pv6-ck-card { background: #F1F2F6; border: 1px solid var(--line); border-radius: 14px; padding: 4px;
  box-shadow: 0 1px 3px rgba(23,38,59,.06); }
.pv6-ck-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  background: none; border: none; font: inherit; cursor: pointer; text-align: left; }
.pv6-ck-chev { display: inline-flex; color: var(--slate); transition: transform .2s; transform: rotate(180deg); }
.pv6-ck-card.open .pv6-ck-chev { transform: none; }
.pv6-ck-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv6-ck-bar { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.pv6-ck-bar i { width: 2px; height: 12px; border-radius: 1px; background: #D5D8E0; }
.pv6-ck-bar i.on { background: #2E9E4F; }
.pv6-ck-count { flex: 0 0 auto; min-width: 26px; text-align: right; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.pv6-ck-why { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.pv6-ck-card.open .pv6-ck-why { grid-template-rows: 1fr; }
.pv6-ck-why > div { overflow: hidden; }
.pv6-ck-list { background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 6px; margin-top: 2px; }
.pv6-ck-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border: none; background: none;
  border-radius: 8px; font: inherit; text-align: left; }
button.pv6-ck-item { cursor: pointer; }
button.pv6-ck-item:hover { background: var(--paper); }
.pv6-ck-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600; color: var(--muted); background: #F1F2F5; border: 1px solid var(--line); }
.pv6-ck-item.done .pv6-ck-dot { background: #3DAA5C; border-color: #3DAA5C; color: #fff; box-shadow: 0 0 0 3px rgba(61,170,92,.22); }
.pv6-ck-item.next .pv6-ck-dot { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 0 0 3px rgba(23,38,59,.12); }
.pv6-ck-text { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); }
.pv6-ck-item.done .pv6-ck-text { color: var(--muted); }
.pv6-ck-item.next .pv6-ck-text { font-weight: 600; }
.pv6-ck-go { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.pv6-ck-na { font-size: 13px; color: var(--muted); padding: 6px 8px; }

/* Audit detail preview — Audit risk as a segmented scale (2026-10-01,
   reference image). Pale tints per band, the scored segment solid, a dark
   marker at the exact score. */
.pv5-page .pl-pair.pv7-solo { grid-template-columns: 1fr; }
/* No container (user decision 2026-10-01) — sits straight on the canvas. */
/* Inset 5px each side — the checklist card's 1px border + 4px padding — so the
   scale lines up with the white step panels below rather than the grey card edge. */
.pv7-risk { margin: 4px 0 22px; padding: 0 5px; }
.pv7-risk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.pv7-risk-t { flex: 1; font-size: 15px; font-weight: 700; color: var(--ink); }
.pv7-risk-lv { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: capitalize; padding: 3px 8px; border-radius: 4px; }
.pv7-risk-sc { font-size: 13px; font-weight: 500; color: var(--slate); }
.pv7-scale { position: relative; display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.pv7-scale i { height: 18px; border-radius: 6px; }
.pv7-scale i:first-child { border-radius: 9px 6px 6px 9px; }
.pv7-scale i:last-child { border-radius: 6px 9px 9px 6px; }
.pv7-scale i.b-low    { background: #DCEFE4; }  .pv7-scale i.b-low.on    { background: #3DAA5C; }
.pv7-scale i.b-medium { background: #FBEBD3; }  .pv7-scale i.b-medium.on { background: #E8A13A; }
.pv7-scale i.b-high   { background: #F8DCDC; }  .pv7-scale i.b-high.on   { background: #D64545; }
.pv7-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.pv7-risk-lv.b-low    { background: #E3F3E9; color: #2E7D32; }
.pv7-risk-lv.b-medium { background: #FDF0DD; color: #B26A00; }
.pv7-risk-lv.b-high   { background: #FBE4E4; color: #C62828; }
.pv7-scale-lb { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.pv7-factors { margin: 22px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.55; color: var(--slate);
  display: flex; flex-direction: column; gap: 8px; }
.pv7-factors li { display: flex; align-items: flex-start; gap: 10px; }
/* Severity dot — a solid dot inside a soft halo of its own colour (reference
   image). Sized so its centre sits on the first line of text. */
.pv7-dot { flex: 0 0 auto; width: 10px; height: 10px; margin: 5px 3px 0; border-radius: 50%; cursor: default; }
.pv7-dot.s-high   { background: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77,.22); }
.pv7-dot.s-medium { background: #F2A33A; box-shadow: 0 0 0 3px rgba(242,163,58,.25); }
.pv7-dot.s-low    { background: #3E7BFA; box-shadow: 0 0 0 3px rgba(62,123,250,.22); }
.pv7-none { margin-top: 22px; font-size: 13px; color: var(--muted); }

/* Right column mirrors the left one: sticky, full height, a divider on its
   inner (left) edge running from the top bar down. */
.pv5-page .pv5-side-r { border-left: 1px solid var(--line); padding-left: 20px;
  margin-top: -24px; padding-top: 24px; box-sizing: border-box; height: calc(100vh - 64px);
  position: sticky; top: 63px; align-self: start; overflow-y: auto; scrollbar-width: none; }
.pv5-page .pv5-side-r::-webkit-scrollbar { display: none; }
/* With the grid as the page's last element, drop the bottom padding and the
   grid's own margin so it ends exactly where the page does; the middle column
   carries the breathing room instead. */
.pv5-page .pv3-full:has(.pv5-grid3) { padding-bottom: 0; }
.pv5-page .pl-grid.pv5-grid3 { margin-bottom: 0; }
.pv5-page .pv5-grid3 > .pl-col:nth-child(2) { padding-bottom: 40px; }
/* Scope note text at the Audit information rows' size (.pl-kv-k, 13px) —
   the editable box during planning; the read-only text already is. */
.pv5-side textarea.form-input { font-size: 13px; line-height: 1.6; resize: vertical; }

/* ═══════════════════════════════════════════════════════════════════════════
   TEMPORARY UI PREVIEW — PVX: Management Review · NC Management · Incidents,
   list and detail (2026-10-01). The real pages inside the preview shells.
   ═══════════════════════════════════════════════════════════════════════════ */
/* List — the real header's buttons, moved into the title bar, wear the
   preview's button look: primary green with the glow, everything else plain. */
.pvx-list .pv2-top-actions .btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 6px; border: 1px solid var(--line); font-size: 13px; font-weight: 600;
  background: var(--white); color: var(--ink); box-shadow: 0 0 6px rgba(23,38,59,.14); }
.pvx-list .pv2-top-actions .btn:hover { background: var(--paper); }
.pvx-list .pv2-top-actions .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 0 6px rgba(0,126,101,.45); }
.pvx-list .pv2-top-actions .btn-primary:hover { background: var(--accent-d); }
.pvx-body { padding-top: 18px; }
/* Tables get the Documents preview's grid lines and zebra rows. */
.pvx-list .plan-table th, .pvx-list .plan-table td { border-right: 1px solid var(--line); }
.pvx-list .plan-table th:last-child, .pvx-list .plan-table td:last-child { border-right: none; }
.pvx-list .plan-table tbody tr:nth-child(even) td { background: var(--paper); }

/* Detail — the real .ad-subheader becomes the white top bar's contents. */
.pvx-detail .pv3-topbar .ad-subheader { position: static; margin: 0; padding: 0; background: none; border: none;
  z-index: auto; flex-wrap: nowrap; gap: 16px; }
.pvx-detail .pv3-topbar .ad-sub-left { gap: 12px; }
.pvx-detail .pv3-topbar .ad-back { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.pvx-detail .pv3-topbar .ad-title { font-size: 21px; font-weight: 800; color: var(--ink); }
.pvx-detail .pv3-topbar .ad-ref { font-size: 13px; font-weight: 600; color: var(--muted); }
.pvx-detail .pv3-topbar .ad-sub-right { flex-wrap: nowrap; gap: 8px; }
/* Tabs as one segmented pill, the audit preview's .pv5-seg look. */
.pvx-detail .pv3-topbar .ad-tabs, .pvx-detail .pv3-topbar .ad-tab-group { display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 3px; height: 34px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.pvx-detail .pv3-topbar .ad-tab { height: 26px; padding: 0 12px; margin: 0; border-radius: 7px; font-size: 13px;
  font-weight: 500; color: var(--slate); background: none; white-space: nowrap; }
.pvx-detail .pv3-topbar .ad-tab.on { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 600; }
.pvx-detail .pv3-topbar .ad-tab.on:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pvx-detail .pv3-topbar .ad-sub-right .btn { height: 34px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); box-shadow: 0 0 6px rgba(23,38,59,.14); }
.pvx-detail .pv3-topbar .ad-sub-right .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 0 6px rgba(0,126,101,.45); }

/* Pop-ups and slide-outs opened from inside a PVX preview sit above it — the
   real page's own first-visit guide (.rgw) stays underneath. */
body:has(#pvxOverlay) .modal-backdrop:not(:has(> .rgw)),
body:has(#pvxOverlay) .sp-backdrop { z-index: 10000; }
body:has(#pvxOverlay) .sp-panel { z-index: 10001; }

/* ═══════════════════════════════════════════════════════════════════════════
   UI REVAMP 2026-10-01 — page title bar, tables, and the Documents page.
   Visual only; every control keeps its own handler.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Title bar: the page's title and its buttons on one band across the top of
   the white container, a full-width rule beneath. No description line. */
#content > .page-header {
  margin: calc(var(--gutter) * -1) calc(var(--gutter) * -1) 24px;
  padding: 17px var(--gutter); border-bottom: 1px solid var(--line);
  border-radius: 13px 13px 0 0; align-items: center; flex-wrap: nowrap;
}
.page-title { font-size: 21px; font-weight: 800; letter-spacing: 0; }
.page-subtitle { display: none; }
/* Title-bar buttons in the new look: green with an even glow for the primary
   action, plain white with a soft all-round shadow for the rest. */
.page-actions > .btn { height: 34px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; }
.page-actions > .btn-primary { border: 1px solid var(--line); box-shadow: 0 0 6px rgba(0,126,101,.45); }
.page-actions > .btn-secondary { background: var(--white); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 0 6px rgba(23,38,59,.14); }
.page-actions > .btn-secondary:hover { background: var(--paper); }
.page-actions > .rd-rgpill { height: 34px; font-size: 13px; }

/* Tables: grid lines between columns and alternating row shading. */
#content .plan-table th, #content .plan-table td { border-right: 1px solid var(--line); }
#content .plan-table th:last-child, #content .plan-table td:last-child { border-right: none; }
#content .plan-table tbody tr:nth-child(even) > td { background: var(--paper); }
#content .plan-table th.tgr, #content .plan-table td.tgr { text-align: center; padding-left: 16px; padding-right: 16px; }

/* ── Documents page ─────────────────────────────────────────────────────── */
/* Theme tabs: underlined, icon · label · count. */
.doc-utabs { display: flex; align-items: center; gap: 26px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.doc-utab { display: flex; align-items: center; gap: 8px; padding: 0 0 12px; margin-bottom: -1px; font: inherit; font-size: 14px;
  color: var(--slate); cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent; }
.doc-utab svg { opacity: .75; }
.doc-utab.active { color: var(--ink); font-weight: 600; border-bottom-color: #2563EB; }
.doc-utab.active svg { opacity: 1; color: #2563EB; }
.doc-utab-n { background: var(--paper); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 500; color: var(--slate); }
/* Search left, the Table / By Group switch at the right edge. */
.docs-toolbar { display: flex; align-items: center; margin-bottom: 16px; }
.docs-viewsw { margin-left: auto; display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; height: 37px; }
.docs-viewsw-btn { display: flex; align-items: center; justify-content: center; width: 38px; border: none;
  background: var(--white); color: var(--slate); cursor: pointer; border-left: 1px solid var(--line); }
.docs-viewsw-btn:first-child { border-left: none; }
.docs-viewsw-btn.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.docs-viewsw-btn:hover:not(.active) { background: var(--paper); }
/* The flat Table view's box. */
.docs-table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
/* Grid lines, fixed single-line columns, centred data columns — the same in
   both views (.docs-area wraps the flat table and each group). */
.docs-area .doc-table th, .docs-area .doc-table td { border-right: 1px solid var(--line); }
.docs-area .doc-table th:last-child, .docs-area .doc-table td:last-child { border-right: none; }
.docs-area .doc-table { table-layout: fixed; }
.docs-area .doc-table .tid.dt-key { width: 90px; }
.docs-area .doc-table .dt-status  { width: 155px; }
.docs-area .doc-table .dt-ver     { width: 105px; }
.docs-area .doc-table .dt-date    { width: 120px; }
.docs-area .doc-table .dt-dec     { width: 130px; }
.docs-area .doc-table .dt-people  { width: 150px; }
.docs-area .doc-table .dt-act     { width: 170px; }
.docs-area .doc-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-area .doc-table .dt-title, .docs-area .doc-table .dt-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-area .doc-table .dt-title { font-size: 15px; }
.docs-area .doc-table .dt-code { font-size: 13px; }
.docs-area .doc-table .dt-sub { font-size: 12px; }
.docs-area .doc-table .dt-people, .docs-area .doc-table .dt-act, .docs-area .doc-table .dt-status,
.docs-area .doc-table .dt-dec { overflow: visible; }
.docs-area .doc-table th, .docs-area .doc-table td,
.docs-area .doc-table th.tgr, .docs-area .doc-table td.tgr,
.docs-area .doc-table tbody td.tgr, .docs-area .doc-table thead th.tgr { padding-left: 16px; padding-right: 16px; }
.docs-area .doc-table th.tgr, .docs-area .doc-table td.tgr { text-align: center; }
/* Library wears the Documents table too. Fixed layout needs every data column sized. */
.docs-area .lib-table .lib-c-ver    { width: 105px; }
.docs-area .lib-table .lib-c-st     { width: 140px; }
.docs-area .lib-table .lib-c-date   { width: 130px; }
.docs-area .lib-table .lib-c-people { width: 150px; overflow: visible; }
.docs-area .lib-table .lib-c-act    { width: 130px; overflow: visible; }
.docs-area .lib-table .lib-c-st     { overflow: visible; }
.docs-area .lib-table td.lib-c-ver, .docs-area .lib-table td.lib-c-date { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* A page title with a round back arrow on its own line (form evidence page). */
.ph-with-back { display: flex; align-items: center; gap: 12px; }
.ph-back { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; }
.ph-back:hover { background: var(--white); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* Form evidence history wears the Documents table. */
.docs-area .fe-ev .fe-ev-st   { width: 130px; overflow: visible; }
.docs-area .fe-ev .fe-ev-by   { width: 170px; }
.docs-area .fe-ev .fe-ev-date { width: 120px; }
.docs-area .fe-ev .fe-ev-file { width: 240px; }
.docs-area .fe-ev .fe-ev-act  { width: 250px; overflow: visible; }
/* NC Management wears the Documents table. Refs run long (MCS-NC-MIN-2026001). */
.docs-area .nc-list .nc-c-ref  { width: 190px; }
.docs-area .nc-list .nc-c-st   { width: 150px; overflow: visible; }
.docs-area .nc-list .nc-c-sev  { width: 130px; overflow: visible; }
.docs-area .nc-list .nc-c-date { width: 120px; }
.docs-area .nc-list .nc-c-due  { width: 170px; }
.docs-area .nc-list td.nc-c-date, .docs-area .nc-list td.nc-c-due { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.docs-area .nc-list tbody tr.click:hover > td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
/* Incidents wear the Documents table. */
.docs-area .inc-list .inc-c-ref  { width: 170px; }
.docs-area .inc-list .inc-alert-col { width: 50px; overflow: visible; }
.docs-area .inc-list .inc-c-type { width: 150px; }
.docs-area .inc-list .inc-c-sev  { width: 140px; overflow: visible; }
.docs-area .inc-list .inc-c-st   { width: 160px; overflow: visible; }
.docs-area .inc-list .inc-c-date { width: 120px; }
.docs-area .inc-list td.inc-c-type, .docs-area .inc-list td.inc-c-date { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.docs-area .inc-list tbody tr.click:hover > td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
/* Management Review list wears the Documents table. */
.docs-area .mr-list .mr-c-ref  { width: 170px; }
.docs-area .mr-list .mr-c-date { width: 130px; }
.docs-area .mr-list .mr-c-prog { width: 280px; }
.docs-area .mr-list .mr-c-st   { width: 170px; overflow: visible; }
.docs-area .mr-list td.mr-c-date, .docs-area .mr-list td.mr-c-prog { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.docs-area .mr-list tbody tr.click:hover > td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
/* Forms & Evidence wears the Documents table: the row is the link, so it lifts on hover. */
.docs-area .fe-table tbody tr.click:hover > td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
/* Document cell: a coloured type letter (P · S · F · R) before the title. */
.dt-doc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dt-doc-tx { min-width: 0; }
.dt-doc-ic { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   UI REVAMP 2026-10-01 — FULL-PAGE DETAIL PAGES (audit programme, management
   review, nonconformity, incident). No sidebar: the record's own sticky
   sub-header becomes a white top bar across the whole width — back arrow,
   reference, title, the tabs as one segmented pill, the record's actions —
   over the grey canvas. renderPage() sets .shell-full for FULL_PAGES.
   ═══════════════════════════════════════════════════════════════════════════ */
#app-shell.shell-full #sidebar { display: none; }
#app-shell.shell-full #main { margin-left: 0; padding: 0; }
#app-shell.shell-full #content { border: none; border-radius: 0; box-shadow: none; background: var(--warm); min-height: 100vh; }
.shell-full #content > .ad-subheader { border-radius: 0; padding: 14px var(--gutter); flex-wrap: nowrap; gap: 16px; }
.shell-full .ad-sub-left { gap: 12px; }
.shell-full .ad-back { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.shell-full .ad-title { font-size: 21px; font-weight: 800; color: var(--ink); }
.shell-full .ad-ref { font-size: 13px; font-weight: 600; color: var(--muted); }
.shell-full .ad-sub-right { flex-wrap: nowrap; gap: 8px; }
.shell-full .ad-subheader .ad-tabs, .shell-full .ad-subheader .ad-tab-group { display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 3px; height: 34px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.shell-full .ad-subheader .ad-tab { height: 26px; padding: 0 12px; margin: 0; border-radius: 7px; font-size: 13px;
  font-weight: 500; color: var(--slate); background: none; white-space: nowrap; }
.shell-full .ad-subheader .ad-tab.on { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 600; }
.shell-full .ad-subheader .ad-tab.on:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.shell-full .ad-subheader .ad-tab:disabled { color: var(--line); }
.shell-full .ad-sub-right .btn { height: 34px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); box-shadow: 0 0 6px rgba(23,38,59,.14); }
.shell-full .ad-sub-right .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 0 6px rgba(0,126,101,.45); }

/* Plan tab in three columns (planThreeCol): information · status, readiness
   and scope · risk and the audit checklist. One column on narrow screens,
   like the two-column grid it replaces. */
.pl-grid.pl-grid3 { grid-template-columns: 300px minmax(0,1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .pl-grid.pl-grid3 { grid-template-columns: 1fr; } }
.pl-details-title { font-size: 15px; font-weight: 700; color: var(--ink); padding-bottom: 6px; }
/* Audit detail — the Plan tab's information column as a "Details"
   panel, matching the document-editor document editor's right column (.pv3-details):
   sticky, full height, a divider on its inner edge, no boxes, caret section
   headers with a trailing rule, people as small bordered cards. */
.pl-side { gap: 0; border-right: 1px solid var(--line); padding-right: 20px;
  margin-top: -18px; padding-top: 18px; box-sizing: border-box; height: calc(100vh - 64px);
  position: sticky; top: 63px; align-self: start; overflow-y: auto; scrollbar-width: none; }
.pl-side::-webkit-scrollbar { display: none; }
.pl-side > .pl-box, .pl-side > .pl-scope-sec { margin-top: 21px; }
.pl-side > .pl-details-title + * { margin-top: 6px; }
.pl-side .pl-box { background: none; border: none; border-radius: 0; overflow: visible; }
.pl-side .pl-box-head, .pl-side .pl-scope-head { background: none; border: none; padding: 0;
  margin: 0 0 6px; min-height: 24px; border-radius: 0; }
.pl-side .pl-box-body { padding: 0; }
/* Title · caret · rule — the rule fills whatever the head's buttons leave. */
.pl-side .pl-box-title { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--muted); }
.pl-side .pl-box-title::before { content: ''; order: 1; flex: 0 0 auto; width: 8px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%239AA3B2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px no-repeat; }
.pl-side .pl-box-title::after { content: ''; order: 2; flex: 1; height: 1px; background: var(--line); margin: 0 4px 0 6px; }
/* Auditors as person cards, like the editor document editor's People cards. */
.pl-side .pl-person, .pl-side .pl-person + .pl-person { border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); padding: 6px 12px; margin-bottom: 6px; box-shadow: 0 1px 2px rgba(23,38,59,.05); }
/* + Add and ⇄ in the Auditors header: the document editor's plain button
   (.pv2-create-btn.pv2-btn-plain — white, soft all-round shadow), a size down. */
.pl-side .pl-box-head .btn { height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink);
  box-shadow: 0 0 6px rgba(23,38,59,.14); }
.pl-side .pl-box-head .btn:hover { background: var(--paper); }
/* Each auditor on ONE line, like the editor document editor's People cards:
   avatar · name, role pushed right. */
.pl-side .pl-person, .pl-side .pl-person + .pl-person { min-height: 36px; padding: 0 12px; box-sizing: border-box; }
.pl-side .pl-person .oc-chip { width: 20px; height: 20px; min-width: 20px; font-size: 9px; }
.pl-side .pl-person-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-side .pl-person-name { font-size: 13px; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-side .pl-person-role { font-size: 13px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }

/* Audit detail — Audit checklist as "Getting started" cards
   (2026-10-01, reference image). Grey outer card with the stage header;
   a white inner panel of numbered steps; the 0fr→1fr expand the real
   checklist uses. */
.ck2-ck { display: flex; flex-direction: column; gap: 10px; }
.ck2-ck-title { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--slate); margin-bottom: 2px; }
.ck2-ck-card { background: #F1F2F6; border: 1px solid var(--line); border-radius: 14px; padding: 4px;
  box-shadow: 0 1px 3px rgba(23,38,59,.06); }
.ck2-ck-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 12px;
  background: none; border: none; font: inherit; cursor: pointer; text-align: left; }
.ck2-ck-chev { display: inline-flex; color: var(--slate); transition: transform .2s; transform: rotate(180deg); }
.ck2-ck-card.open .ck2-ck-chev { transform: none; }
.ck2-ck-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck2-ck-bar { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.ck2-ck-bar i { width: 2px; height: 12px; border-radius: 1px; background: #D5D8E0; }
.ck2-ck-bar i.on { background: #2E9E4F; }
.ck2-ck-count { flex: 0 0 auto; min-width: 26px; text-align: right; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.ck2-ck-why { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.ck2-ck-card.open .ck2-ck-why { grid-template-rows: 1fr; }
.ck2-ck-why > div { overflow: hidden; }
.ck2-ck-list { background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 6px; margin-top: 2px; }
.ck2-ck-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border: none; background: none;
  border-radius: 8px; font: inherit; text-align: left; }
button.ck2-ck-item { cursor: pointer; }
button.ck2-ck-item:hover { background: var(--paper); }
.ck2-ck-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600; color: var(--muted); background: #F1F2F5; border: 1px solid var(--line); }
.ck2-ck-item.done .ck2-ck-dot { background: #3DAA5C; border-color: #3DAA5C; color: #fff; box-shadow: 0 0 0 3px rgba(61,170,92,.22); }
.ck2-ck-item.next .ck2-ck-dot { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 0 0 3px rgba(23,38,59,.12); }
.ck2-ck-text { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); }
.ck2-ck-item.done .ck2-ck-text { color: var(--muted); }
.ck2-ck-item.next .ck2-ck-text { font-weight: 600; }
.ck2-ck-go { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.ck2-ck-na { font-size: 13px; color: var(--muted); padding: 6px 8px; }

/* Audit detail — Audit risk as a segmented scale (2026-10-01,
   reference image). Pale tints per band, the scored segment solid, a dark
   marker at the exact score. */
.pl-pair.prk-solo { grid-template-columns: 1fr; }
/* No container (user decision 2026-10-01) — sits straight on the canvas. */
/* Inset 5px each side — the checklist card's 1px border + 4px padding — so the
   scale lines up with the white step panels below rather than the grey card edge. */
.prk-risk { margin: 4px 0 22px; padding: 0 5px; }
.prk-risk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.prk-risk-t { flex: 1; font-size: 15px; font-weight: 700; color: var(--ink); }
.prk-risk-lv { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: capitalize; padding: 3px 8px; border-radius: 4px; }
.prk-risk-sc { font-size: 13px; font-weight: 500; color: var(--slate); }
.prk-scale { position: relative; display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.prk-scale i { height: 18px; border-radius: 6px; }
.prk-scale i:first-child { border-radius: 9px 6px 6px 9px; }
.prk-scale i:last-child { border-radius: 6px 9px 9px 6px; }
.prk-scale i.b-low    { background: #DCEFE4; }  .prk-scale i.b-low.on    { background: #3DAA5C; }
.prk-scale i.b-medium { background: #FBEBD3; }  .prk-scale i.b-medium.on { background: #E8A13A; }
.prk-scale i.b-high   { background: #F8DCDC; }  .prk-scale i.b-high.on   { background: #D64545; }
.prk-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.prk-risk-lv.b-low    { background: #E3F3E9; color: #2E7D32; }
.prk-risk-lv.b-medium { background: #FDF0DD; color: #B26A00; }
.prk-risk-lv.b-high   { background: #FBE4E4; color: #C62828; }
.prk-scale-lb { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.prk-factors { margin: 22px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.55; color: var(--slate);
  display: flex; flex-direction: column; gap: 8px; }
.prk-factors li { display: flex; align-items: flex-start; gap: 10px; }
/* Severity dot — a solid dot inside a soft halo of its own colour (reference
   image). Sized so its centre sits on the first line of text. */
.prk-dot { flex: 0 0 auto; width: 10px; height: 10px; margin: 5px 3px 0; border-radius: 50%; cursor: default; }
.prk-dot.s-high   { background: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77,.22); }
.prk-dot.s-medium { background: #F2A33A; box-shadow: 0 0 0 3px rgba(242,163,58,.25); }
.prk-dot.s-low    { background: #3E7BFA; box-shadow: 0 0 0 3px rgba(62,123,250,.22); }
.prk-none { margin-top: 22px; font-size: 13px; color: var(--muted); }

/* Right column mirrors the left one: sticky, full height, a divider on its
   inner (left) edge running from the top bar down. */
.pl-side-r { border-left: 1px solid var(--line); padding-left: 20px;
  margin-top: -18px; padding-top: 18px; box-sizing: border-box; height: calc(100vh - 64px);
  position: sticky; top: 63px; align-self: start; overflow-y: auto; scrollbar-width: none; }
.pl-side-r::-webkit-scrollbar { display: none; }
/* With the grid as the page's last element, drop the bottom padding and the
   grid's own margin so it ends exactly where the page does; the middle column
   carries the breathing room instead. */
#content:has(.pl-grid3) { padding-bottom: 0; }
.pl-grid.pl-grid3 { margin-bottom: 0; }
.pl-grid3 > .pl-col:nth-child(2) { padding-bottom: 40px; }
/* Scope note text at the Audit information rows' size (.pl-kv-k, 13px) —
   the editable box during planning; the read-only text already is. */
.pl-side textarea.form-input { font-size: 13px; line-height: 1.6; resize: vertical; }
.pl-side textarea.form-input { background: var(--white); }
.pl-side .pl-rep .qv-ev-card, .pl-side .pl-rep .qv-ev-card.pending { background: var(--white); }



/* ═══════════════════════════════════════════════════════════════════════════
   UI REVAMP 2026-10-01 — DOCUMENT EDITOR, full page. Scoped to .shell-full so
   the IAR report editor, which reuses the de-* classes inside the normal
   shell, is untouched. Layout: a white 63px top bar (back · title · comments/
   history pill · Regenerate · Download · Submit/Action), then the outline
   (sticky, divider to the right), the section cards on the grey canvas, and
   the "Details" column (sticky, divider to the left).
   ═══════════════════════════════════════════════════════════════════════════ */
.shell-full .de-subheader { padding: 14px var(--gutter); flex-wrap: nowrap; }
.shell-full .de-back { width: 32px; height: 32px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.shell-full .de-doc-title { font-size: 21px; font-weight: 800; color: var(--ink); }
.shell-full .de-sub-right { flex-wrap: nowrap; gap: 8px; }
.shell-full .de-sub-right .btn { height: 34px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); box-shadow: 0 0 6px rgba(23,38,59,.14); }
.shell-full .de-sub-right .btn:hover { background: var(--paper); }
.shell-full .de-sub-right .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 0 6px rgba(0,126,101,.45); }
.shell-full .de-sub-right .btn-primary:hover { background: var(--accent-d); }
/* Comments and History as one rounded icon pill; the comment count rides on
   the icon as a small badge, the unread dot stays. */
.de-icongroup { display: flex; align-items: center; gap: 2px; height: 34px; box-sizing: border-box; padding: 2px;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 0 6px rgba(23,38,59,.10); }
.de-icongroup .de-icon-btn { width: 32px; height: 28px; padding: 0; justify-content: center; border: none; border-radius: 6px; gap: 0; }
.de-icongroup .de-icon-btn:hover { background: var(--paper); border: none; }
.de-icongroup .de-icon-btn svg { width: 16px; height: 16px; }
.de-icongroup .de-count { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
/* Three columns: outline · cards · details. */
.shell-full .de-grid { grid-template-columns: 260px minmax(0,1fr) 300px; gap: 32px; }
.shell-full .de-grid.de-outc { grid-template-columns: 44px minmax(0,1fr) 300px; }
.shell-full .de-main { background: none; border: none; padding: 0; border-radius: 0; }
/* Outline: on the grey, a divider to its right running from the top bar to
   the bottom of the screen. */
.shell-full .de-outline { background: none; margin: -18px 0 calc(var(--gutter) * -1) 0; padding: 18px 16px 12px 0;
  min-height: calc(100vh - 63px); }
.shell-full .de-out-stick { top: 81px; max-height: calc(100vh - 99px); scrollbar-width: none; }
.shell-full .de-out-stick::-webkit-scrollbar { display: none; }
.shell-full .de-out-head .de-col-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink); text-transform: none; letter-spacing: 0; }
.de-out-ic { display: inline-flex; }
.de-out-ic svg { width: 15px; height: 15px; color: var(--slate); }
/* Section rows on the Audit checklist's rail: a vertical line per row and a
   rounded elbow into each, the last row's line stopping at its curve. */
.shell-full #deOutline { position: relative; margin-left: 15px; }
.shell-full .de-out-row { position: relative; padding: 4px 6px 4px 20px; border-radius: 0; font-size: 13px; line-height: 19px; background: none; }
.shell-full .de-out-row:hover { background: none; color: var(--ink); }
.shell-full .de-out-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid #CFD4E0; }
.shell-full .de-out-row:last-child::before { bottom: auto; height: 8px; }
.shell-full .de-out-row::after { content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 6px;
  border-left: 1px solid #CFD4E0; border-bottom: 1px solid #CFD4E0; border-bottom-left-radius: 6px; }
.shell-full .de-out-d1 { padding-left: 34px; }
.shell-full .de-out-d2 { padding-left: 48px; }
/* Details column: sticky, full height, divider on its left edge. */
.shell-full .de-info { position: sticky; top: 63px; align-self: start; box-sizing: border-box; height: calc(100vh - 63px);
  max-height: none; margin-top: -18px; padding: 18px 0 24px 16px; border-left: 1px solid var(--line);
  overflow-y: auto; scrollbar-width: none; }
.shell-full .de-info::-webkit-scrollbar { display: none; }
.shell-full .de-info .de-stale, .shell-full .de-info .de-banner { margin: 10px 0 0; }
#content:has(.de-grid) { padding-bottom: 0; }

/* The Details panel (editor info column). */
.dd-title { font-size: 15px; font-weight: 700; color: var(--ink); padding-bottom: 6px; }
.dd-title { font-size: 15px; font-weight: 700; color: var(--ink); padding-bottom: 6px; }
.dd-sh { display: flex; align-items: center; gap: 6px; margin: 21px 0 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.dd-sh svg { color: var(--muted); flex: 0 0 auto; }
.dd-sh i { flex: 1; height: 1px; background: var(--line); margin-left: 6px; }
.dd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.dd-k { color: var(--slate); white-space: nowrap; }
.dd-v { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-soft); font-weight: 500; }
.dd-v svg { flex: 0 0 auto; color: var(--muted); }
.dd-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dd-muted { color: var(--muted); font-weight: 500; }
.dd-sq { width: 8px; height: 8px; border-radius: 2px; background: #9AA3B2; flex: 0 0 auto; }
.dd-st-under_review, .dd-st-reviewed, .dd-st-revision { background: #2563EB; }
.dd-st-approved { background: var(--green, #2e7d32); }
.dd-st-returned_for_correction, .dd-st-returned_by_approver { background: #c62828; }
.dd-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white);
  box-shadow: 0 1px 2px rgba(23,38,59,.05); font-size: 13px; font-weight: 500; color: var(--ink-soft);  margin-bottom: 6px;}
.dd-cl { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.dd-cl svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--muted); }
.dd-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.de-info .dd-stack { box-shadow: 0 1px 2px rgba(23,38,59,.05),
  0 8px 0 -4px var(--white), 0 8px 0 -3px var(--line); margin-bottom: 12px; }
.dd-av { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 9px; font-weight: 700; color: #fff; background: var(--slate); }
.dd-av-none { background: none; border: 1.5px dashed var(--line); }
.dd-link { border: none; background: none; padding: 0; font-size: 13px; font-weight: 500; color: var(--accent); cursor: pointer; white-space: nowrap; }
.dd-note { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 12px; }
.dd-cmt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px;
  margin-bottom: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--white);
  box-shadow: 0 1px 2px rgba(23,38,59,.05); }
.dd-cmt-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font-size: 13px; font-weight: 600; color: var(--ink); }
.dd-cmt-b { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.dd-act { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px; }
.dd-act.t-go { background: #e8f3ee; color: #1E6E5C; }
.dd-act.t-ok { background: #e3f0fb; color: #1565c0; }
.dd-act.t-no { background: #fdecea; color: #c62828; }
.dd-act.t-na { background: var(--paper); color: var(--slate); }
.dd-allc { align-self: flex-start; margin-top: 4px; }
.dd-cmt-one { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.dd-cmt-one:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.dd-cmt-one .dd-ell { font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.dd-cmt-one .dd-ell b { font-weight: 600; color: var(--ink); }
.dd-date { flex: 0 0 auto; font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.dd-cmt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.dd-less { border: none; background: none; padding: 0; font-size: 12px; color: var(--muted); cursor: pointer; }
.dd-less:hover { color: var(--ink); }
/* Comments & notes: expanding slides each card down out of the stack (staggered),
   collapsing slides them back up into the first card before the stack redraws. */
@keyframes ddSlideOut { from { opacity: 0; transform: translateY(calc(var(--i, 0) * -44px - 8px)); } to { opacity: 1; transform: none; } }
@keyframes ddSlideUp  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(var(--i, 0) * -44px - 8px)); } }
@keyframes ddSettle   { from { opacity: .6; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dd-cmt.dd-in  { animation: ddSlideOut .28s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 50ms); }
.dd-cmt.dd-out { animation: ddSlideUp .24s ease-in both; }
.dd-cmt.dd-out:first-child { animation: none; }
.dd-cmt-foot.dd-out-foot { opacity: 0; transition: opacity .2s; }
.dd-card.dd-settle { animation: ddSettle .22s ease-out both; }
.pv5-side > .dd-title + * { margin-top: 6px; }

/* Sidebar hover label (sidebarTips) — the .dtip card, opening to the right. */
.sb-tip { position: fixed; z-index: 10050; transform: translateY(-50%); pointer-events: none;
  background: var(--white); color: var(--slate); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 6px 18px rgba(24,32,56,.10); font-size: 12px; font-weight: 500; padding: 6px 10px; white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════════════════════
   REGISTRATION · step 1 (2026-10-03) — a centred chooser on a plain white page:
   logo mark, title, one line under it, the progress bars, and two illustrated
   cards. Choosing a card moves on; there is no Next. `.su-pick` is set on the
   page by go() for step 1 only — steps 2–4 keep the card frame.
   ═══════════════════════════════════════════════════════════════════════════ */
.su-mark, .su-subtitle { display: none; }
.su-pick.ocr-page { background: var(--white); }
.su-pick .ocr-head { border-bottom-color: transparent; }
.su-pick .ocr-head-logo { visibility: hidden; }
.su-pick .ocr-body { padding-top: 56px; }
.su-pick .ocr-col { width: min(720px, 100%); border: none; box-shadow: none; background: none; padding: 0; }
.su-pick .su-mark { display: flex; justify-content: center; margin-bottom: 16px; }
.su-pick .su-mark .sidebar-logo-icon { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
.su-pick .su-titlerow { justify-content: center; }
.su-pick .su-titlerow .ocr-title { font-size: 24px; text-align: center; }
.su-pick .su-pct { display: none; }
.su-pick .su-subtitle { display: block; margin: 8px 0 18px; text-align: center; font-size: 15px; color: var(--slate); }
.su-pick .su-bars { display: none; }
.su-pick .su-subtitle { margin-bottom: 36px; }
/* Privacy · Terms at the foot of the step-1 page (placeholder links for now). */
.su-legal { display: none; }
.su-pick .su-legal { display: flex; justify-content: center; align-items: center; gap: 10px;
  position: fixed; left: 0; right: 0; bottom: 24px; font-size: 13px; color: var(--muted); }
.su-legal a { color: var(--muted); text-decoration: none; }
.su-legal a:hover { color: var(--ink); text-decoration: underline; }

.su-pick-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 6px; }
.su-pick-card { display: flex; flex-direction: column; padding: 0; text-align: left; font: inherit; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .15s, transform .15s; }
/* Hover: a ring standing a few pixels off the card, as in the reference. */
.su-pick-card:hover, .su-pick-card:focus-visible, .su-pick-card.on { outline-color: var(--accent); }
.su-pick-card:active { transform: scale(.99); }
.su-pick-art { display: block; height: 180px; background: #F4F5F8; border-bottom: 1px solid var(--line); }
.su-pick-art svg { display: block; width: 100%; height: 100%; }
.su-pick-tx { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
.su-pick-h { display: flex; align-items: center; gap: 8px; }
.su-pick-h b { font-size: 16px; font-weight: 700; color: var(--ink); }
.su-pick-tag { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.su-pick-tag.t-org { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.su-pick-tag.t-adv { background: color-mix(in srgb, #B450FF 14%, transparent); color: #8B2FD6; }
.su-pick-d { font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) { .su-pick-cards { grid-template-columns: 1fr; } }
@keyframes suFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ocr-col.su-fade { animation: suFade .3s ease-out both; }

/* ── Registration: centred steps (1 type · 2 email), 2026-10-03 ───────────── */
.su-head-back { display: none; }
.su-pick .ocr-head-logo { display: none; }
.su-pick .ocr-head-in { justify-content: flex-end; }
.su-pick.su-has-back .ocr-head-in { justify-content: space-between; }
.su-pick.su-has-back .su-head-back { display: inline-flex; }
/* Arrival: mark, title, line and content rise into place, quick and staggered. */
@keyframes suRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.su-rise .su-mark, .su-rise .su-titlerow, .su-rise .su-subtitle, .su-rise .stg-stage {
  animation: suRise .32s cubic-bezier(.2,.8,.2,1) both; }
.su-rise .su-titlerow { animation-delay: .04s; }
.su-rise .su-subtitle { animation-delay: .08s; }
.su-rise .stg-stage   { animation-delay: .12s; }

/* Step 2 — one email field. Focus: the border turns primary and heavier. */
.su-em { width: min(400px, 100%); margin: 0 auto; padding: 4px 4px 8px; }
.su-em-in { display: block; width: 100%; box-sizing: border-box; height: 50px; padding: 0 16px;
  font: inherit; font-size: 15px; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 12px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.su-em-in::placeholder { color: var(--muted); }
.su-em-in:focus { border: 2px solid var(--accent); padding: 0 15.5px; background: var(--white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
/* The hint and the button share one slot: valid address → hint out, button up. */
.su-em-hint { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted);
  transition: opacity .18s, transform .18s; }
.su-em-go { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(10px);
  transition: grid-template-rows .26s cubic-bezier(.2,.8,.2,1), opacity .22s, transform .26s cubic-bezier(.2,.8,.2,1); }
.su-em-go > * { overflow: hidden; }
.su-em.ok .su-em-hint { opacity: 0; transform: translateY(-4px); height: 0; margin: 0; overflow: hidden; }
.su-em.ok .su-em-go { grid-template-rows: 1fr; opacity: 1; transform: none; }
.su-em-btn { width: 100%; height: 46px; margin-top: 14px; border-radius: 12px; font-size: 15px; justify-content: center; }
.su-em-btn.loading { cursor: default; }
/* Loading spinner inside a button. */
@keyframes suSpin { to { transform: rotate(360deg); } }
.su-spin { display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: suSpin .7s linear infinite; }
.su-pick #su-err:not(:empty) { text-align: center; }
/* Step 2 (email): field close under its line, and the block sits lower — nearer the middle. */
.su-pick[data-step="2"] .ocr-body, .su-pick[data-step="3"] .ocr-body, .su-pick[data-step="4"] .ocr-body { padding-top: max(56px, 22vh); }
.su-pick[data-step="5"] .ocr-body { padding-top: max(40px, 12vh); }
.su-pick[data-step="2"] .su-subtitle, .su-pick[data-step="4"] .su-subtitle { margin-bottom: 18px; }
.su-pick #su-err:empty { display: none; }
/* Step 2 refusal: red field, a brief shake, the message under the field. */
@keyframes suShake { 0%,100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.su-em-err { display: none; margin-top: 10px; text-align: center; font-size: 13px; color: #D92D20; }
.su-em.bad .su-em-err:not(:empty) { display: block; }
.su-em.bad .su-em-in, .su-em.bad .su-em-in:focus { border: 2px solid #D92D20; padding: 0 15.5px;
  box-shadow: 0 0 0 4px rgba(217,45,32,.12); animation: suShake .4s ease-in-out; }

/* ── Registration step 3 · six-box code (2026-10-03) ─────────────────────── */
.su-mark-mail { display: none; }
.su-pick[data-step="3"] .su-mark .sidebar-logo-icon { display: none; }
.su-pick[data-step="3"] .su-mark-mail { display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--white)); }
.su-mark-mail svg { width: 24px; height: 24px; }
.su-pick[data-step="3"] .su-subtitle { margin-bottom: 26px; }
.su-pick .su-subtitle b { color: var(--ink); font-weight: 600; }

.su-otp6 { display: flex; flex-direction: column; align-items: center; padding: 4px 0 8px; }
.otp6-row { position: relative; display: flex; align-items: center; gap: 10px; cursor: text; }
.otp6-dash { color: var(--muted); font-size: 18px; margin: 0 2px; }
.otp6-box { position: relative; width: 48px; height: 56px; border-radius: 12px; overflow: hidden;
  background: var(--paper); border: 1.5px solid var(--line);
  font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.otp6-box > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.otp6-z { color: #C3C8D4; font-weight: 500; }
.otp6-n { color: var(--ink); }
/* Roll: the new figure comes in from above, the old one leaves downwards. */
@keyframes otpIn  { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes otpOut { from { transform: none; opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
.otp6-box .in  { animation: otpIn .22s cubic-bezier(.2,.8,.2,1) both; }
.otp6-box .out { animation: otpOut .22s cubic-bezier(.2,.8,.2,1) both; }
/* The one focus ring, sliding from box to box. */
.otp6-ring { position: absolute; left: 0; top: 0; width: 48px; height: 56px; border-radius: 12px; pointer-events: none;
  border: 2px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  transition: left .18s cubic-bezier(.2,.8,.2,1), border-color .15s, box-shadow .15s, opacity .15s; box-sizing: border-box; }
.otp6-ring.off { opacity: 0; }
.otp6-ring.red { border-color: #D92D20; box-shadow: 0 0 0 4px rgba(217,45,32,.12); transition: left .07s linear, border-color .1s; }
/* The real input sits over the row, invisible, so typing and paste land in it. */
.otp6-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; padding: 0;
  font-size: 16px; color: transparent; background: transparent; caret-color: transparent; }
/* Checking: each box blinks in turn, left to right, until the answer lands. */
@keyframes otpBlink { 0%, 100% { border-color: var(--line); background: var(--paper); }
  40% { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--white)); } }
.otp6-row.checking .otp6-box { animation: otpBlink .9s ease-in-out infinite; }
.otp6-row.checking .otp6-box[data-i="1"] { animation-delay: .1s; }
.otp6-row.checking .otp6-box[data-i="2"] { animation-delay: .2s; }
.otp6-row.checking .otp6-box[data-i="3"] { animation-delay: .3s; }
.otp6-row.checking .otp6-box[data-i="4"] { animation-delay: .4s; }
.otp6-row.checking .otp6-box[data-i="5"] { animation-delay: .5s; }
.otp6-row.ok .otp6-box { border-color: #3DAA5C; background: #EEF8F1; transition: border-color .2s, background .2s; }
.otp6-err { min-height: 20px; margin-top: 14px; font-size: 13px; color: #D92D20; text-align: center; }
.otp6-resend { margin-top: 10px; font-size: 13px; color: var(--muted); }
.otp6-rs { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.otp6-rs:disabled { color: var(--muted); font-weight: 500; cursor: default; }
@media (max-width: 420px) { .otp6-box, .otp6-ring { width: 40px; height: 50px; } .otp6-row { gap: 6px; } }
.otp6-row.shake { animation: suShake .4s ease-in-out; }

/* ── Registration step 4 · password (2026-10-03) ─────────────────────────── */
.su-mark-lock { display: none; }
.su-pick[data-step="4"] .su-mark .sidebar-logo-icon { display: none; }
.su-pick[data-step="4"] .su-mark-lock { display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--white)); }
/* The .su-em recipe, with a per-FIELD error state (two fields here). */
.su-pw .su-em-in.bad, .su-pw .su-em-in.bad:focus { border: 2px solid #D92D20; padding: 0 15.5px;
  box-shadow: 0 0 0 4px rgba(217,45,32,.12); animation: suShake .4s ease-in-out; }
.su-pw .su-em-err:not(:empty) { display: block; }
/* The requirement line leaves once the password passes. */
.su-pw.pw1-ok .su-em-hint { opacity: 0; transform: translateY(-4px); height: 0; margin: 0; overflow: hidden; }
/* Confirm opens beneath, the same 0fr → 1fr reveal the button uses. */
.su-pw-2 { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(10px);
  transition: grid-template-rows .26s cubic-bezier(.2,.8,.2,1), opacity .22s, transform .26s cubic-bezier(.2,.8,.2,1); }
.su-pw-2 > div { overflow: hidden; padding: 4px; margin: -4px; }
.su-pw-2 .su-em-in { margin-top: 12px; }
.su-pw.pw1-ok .su-pw-2 { grid-template-rows: 1fr; opacity: 1; transform: none; }
/* `.su-em.ok` shows the button — on this page only once BOTH fields pass. */
.su-pw:not(.pw1-ok) .su-em-go { grid-template-rows: 0fr; opacity: 0; }

/* ── Registration step 5 · name, company and avatar colour (2026-10-03) ──── */
.su-mark-edit { display: none; }
.su-pick[data-step="5"] .su-mark .sidebar-logo-icon { display: none; }
.su-pick[data-step="5"] .su-mark-edit { display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--white)); }
.su-mark-edit svg { width: 22px; height: 22px; }
.su-pick[data-step="5"] .su-subtitle { margin-bottom: 20px; }
.su-me { width: min(400px, 100%); margin: 0 auto; padding: 4px; display: flex; flex-direction: column; }
/* The avatar card: centred avatar alone; once initials exist it moves left and
   the swatches slide in beside it. */
.su-av-card { position: relative; height: 156px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 18px; }
.su-av { position: absolute; top: 50%; left: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%;
  background: #E9ECF2; display: flex; align-items: center; justify-content: center;
  transition: left .35s cubic-bezier(.2,.8,.2,1), margin .35s cubic-bezier(.2,.8,.2,1), background .25s; }
.su-av-card.has .su-av { left: 24px; margin-left: 0; }
.su-av-ph { display: flex; color: #B6BCC9; transition: opacity .2s; }
.su-av-ph svg { width: 44px; height: 44px; }
.su-av-card.has .su-av-ph { opacity: 0; position: absolute; }
.su-av-in { color: #fff; font-size: 38px; font-weight: 700; letter-spacing: .02em; }
@keyframes suPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.su-av-in.pop { animation: suPop .22s cubic-bezier(.2,.8,.2,1); }
.su-sw { position: absolute; top: 50%; right: 22px; transform: translate(24px, -50%); opacity: 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(4, 28px); gap: 10px; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.su-av-card.has .su-sw { transform: translate(0, -50%); opacity: 1; pointer-events: auto; transition-delay: .08s; }
.su-sw-b { width: 28px; height: 28px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s, transform .15s; }
.su-sw-b:hover { transform: scale(1.08); }
.su-sw-b.on { outline-color: var(--ink); }
.su-me-l { font-size: 13px; font-weight: 500; color: var(--slate); margin: 0 0 6px 2px; }
.su-me .su-em-in + .su-me-l { margin-top: 14px; }
.su-me .su-em-in.bad, .su-me .su-em-in.bad:focus { border: 2px solid #D92D20; padding: 0 15.5px;
  box-shadow: 0 0 0 4px rgba(217,45,32,.12); animation: suShake .4s ease-in-out; }
.su-me .su-em-err:not(:empty) { display: block; }
.su-me .su-em-btn { margin-top: 18px; }
.su-me .su-em-btn:disabled { opacity: .55; cursor: default; }
@media (max-width: 440px) { .su-sw { grid-template-columns: repeat(4, 24px); gap: 8px; right: 14px; } .su-sw-b { width: 24px; height: 24px; } }
/* Registration fields: typed text a touch heavier (user decision 2026-10-03). */
.su-em-in { font-weight: 500; }
.su-em-in::placeholder { font-weight: 400; }
/* Step 5: the line under the title is no wider than the card and fields below it. */
.su-pick[data-step="5"] .su-subtitle { max-width: 392px; margin-left: auto; margin-right: auto; }
.su-locked .ocr-head-x { visibility: hidden; }
/* Every field's typed text is a touch heavier than body text (user decision
   2026-10-03); placeholders stay regular so they still read as hints. Element
   selectors on purpose — any component that sets its own weight keeps it. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-weight: 500; }
input::placeholder, textarea::placeholder { font-weight: 400; }

/* ═══ New organisation — full-page flow in the sign-up design (2026-10-03) ═══ */
.ocf { z-index: 1200; }
.ocf .ocr-head-in { justify-content: space-between; }
.ocf .ocr-body { padding-top: max(48px, 14vh); }
.ocf .su-subtitle { max-width: 392px; margin: 8px auto 22px; }   /* = the fields' width */
.ocf-mark { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--white)); }
.ocf-mark svg { width: 22px; height: 22px; }
.ocf .su-em-in.bad, .ocf .su-em.bad .su-em-in { border: 2px solid #D92D20; padding: 0 15.5px;
  box-shadow: 0 0 0 4px rgba(217,45,32,.12); animation: suShake .4s ease-in-out; }
.ocf .su-em.bad .su-em-err:not(:empty), .ocf .su-me .su-em-err:not(:empty) { display: block; }
.ocf .su-em.bad .su-em-hint { display: none; }
.ocf .su-me .su-em-btn:disabled { opacity: .55; }
.ocf-abbrev { text-transform: uppercase; letter-spacing: .04em; }
.ocf-note { margin: 8px 2px 0; font-size: 13px; color: var(--muted); }
.ocf-note b { color: var(--ink); font-weight: 600; }
/* Industry: a grid of cards; a click picks and moves on. */
.ocf-ind { width: min(640px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding: 6px; }
.ocf-ind-c { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; font: inherit; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s, transform .15s; }
.ocf-ind-c b { font-size: 14px; font-weight: 600; color: var(--ink); }
.ocf-ind-c span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.ocf-ind-c:hover, .ocf-ind-c:focus-visible, .ocf-ind-c.on { outline-color: var(--accent); }
.ocf-ind-c:active { transform: scale(.98); }
@media (max-width: 640px) { .ocf-ind { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Brand identity */
.ocf-colours { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 2px 2px 0; }
/* Eleven swatches and a "+" circle for any colour — twelve on ONE row. */
.ocf-colours { flex-wrap: nowrap; gap: 6px; justify-content: space-between; }
.ocf-colours .su-sw-b { width: 26px; height: 26px; flex: 0 0 auto; }
.ocf-custom { width: 26px; height: 26px; flex: 0 0 auto; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px dashed var(--muted); background: var(--white); font: inherit; font-size: 16px; line-height: 1; color: var(--slate);
  outline: 2px solid transparent; outline-offset: 2px; }
.ocf-custom:hover { color: var(--ink); border-color: var(--ink); }
.ocf-custom.on { border: none; color: transparent; outline-color: var(--ink); }
/* The page can outgrow the window here, so the footer follows the content. */
.ocf .su-legal { position: static; margin: 36px 0 24px; }
.ocf-preview { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ocf-pv-h { display: block; padding: 8px 12px; font-size: 12px; font-weight: 700; transition: background .2s, color .2s; }
.ocf-pv-r { display: block; height: 14px; border-top: 1px solid var(--line); background: var(--white); }
.ocf-pv-r + .ocf-pv-r { background: var(--paper); }
.ocf-logohint { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0 2px 8px; }
.ocf-skip { margin-top: 12px; text-align: center; font-size: 13px; color: var(--muted); }
.ocf-skip button { border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.ocf .su-me-l { display: block; }
.ocf-abbrev::placeholder { text-transform: none; letter-spacing: 0; }

/* Industry cards: icon over the name, centred (2026-10-03). */
.ocf-ind-c { align-items: center; text-align: center; justify-content: center; gap: 10px; padding: 18px 12px; min-height: 104px; }
.ocf-ind-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--white)); }
.ocf-ind-c.on .ocf-ind-ic, .ocf-ind-c:hover .ocf-ind-ic { background: var(--accent); color: #fff; }
/* Brand identity: the profile avatar card, holding initials or the logo. */
.ocf-brand .su-av-card { margin-bottom: 16px; }
.ocf-brand .su-sw { grid-template-columns: repeat(4, 28px); }
.ocf-brand .ocf-custom { width: 28px; height: 28px; }
.ocf-av { overflow: hidden; transition: background .25s; }
.ocf-av .su-av-in { font-size: 30px; }
.ocf-av-img { display: none; width: 78%; height: 78%; object-fit: contain; }
.ocf-av.logo { box-shadow: inset 0 0 0 1px var(--line); }
.ocf-av.logo .su-av-in { display: none; }
.ocf-av.logo .ocf-av-img { display: block; }
.ocf-brand .ocf-logohint { margin: 8px 2px 0; }
/* Industry cards: one height for all — rows share the tallest card's height. */
.ocf-ind { grid-auto-rows: 1fr; }
/* Brand identity: once the "Ready" sweep has played, the bar folds away. */
@keyframes ocfBarGone { to { opacity: 0; height: 0; margin-top: 0; } }
.ocf-brand .uz-barwrap { animation: ocfBarGone .25s ease 1.1s forwards; }
/* A square logo must sit INSIDE the circle: a square fits a circle only up to
   ~70% of its diameter, so the image box is 64% (wordmarks scale to its width). */
.ocf-av-img { width: 64%; height: 64%; }
/* Brand identity is the tallest screen of the flow, so it starts higher. */
.ocf[data-ocf="3"] .ocr-body, .ocf[data-ocf="4"] .ocr-body { padding-top: max(32px, 8vh); }
.ocf-skip button { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* A logo whose edges are a solid colour: the circle IS that colour, so the
   image can run wider — a wordmark spans most of the circle, ends included. */
.ocf-av.logo-fill { box-shadow: none; }
.ocf-av.logo-fill .ocf-av-img { width: 84%; height: 84%; }

/* ── Brand identity (revised 2026-10-03): logo card on top, document colour below ── */
.ocf-logocard { display: flex; align-items: center; gap: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; }
.ocf-brand .ocf-av { position: relative; flex: 0 0 auto; width: 88px; height: 88px; margin: 0; top: auto; left: auto;
  border: none; padding: 0; cursor: pointer; background: #E9ECF2; overflow: visible; }
.ocf-brand .ocf-av .su-av-in { color: var(--slate); font-size: 24px; }
.ocf-brand .ocf-av-img { border-radius: 0; }
.ocf-brand .ocf-av.logo, .ocf-brand .ocf-av.logo-fill { overflow: hidden; }
.ocf-av-badge { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--white); color: var(--slate);
  box-shadow: 0 1px 4px rgba(23,38,59,.18); }
.ocf-av-badge svg { width: 14px; height: 14px; }
.ocf-brand .ocf-av:hover .ocf-av-badge { color: var(--accent); }
/* The badge must not be clipped by the logo's round mask: it lives outside it. */
.ocf-brand .ocf-av.logo .ocf-av-badge, .ocf-brand .ocf-av.logo-fill .ocf-av-badge { display: none; }
.ocf-logotx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ocf-logotx b { font-size: 15px; font-weight: 600; color: var(--ink); }
.ocf-logotx > span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocf-logoacts { display: flex; gap: 8px; margin-top: 6px; }
.ocf-lbtn { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ocf-lbtn:hover { border-color: var(--ink); }
.ocf-lbtn.ghost { border-color: transparent; color: var(--muted); }
.ocf-lbtn.ghost:hover { color: #D92D20; border-color: transparent; }
.ocf-lbtn[hidden] { display: none; }
.ocf-colhint { font-size: 12px; color: var(--muted); margin: -2px 2px 10px; }
.ocf-brand .ocf-preview { margin-top: 12px; }
.ocf-pv-h { display: flex; gap: 0; }
.ocf-pv-h i { flex: 1; font-style: normal; }
/* The upload pop-up, over the flow. */
@keyframes ocfPopIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.ocf-pop-bd { position: fixed; inset: 0; z-index: 1300; background: rgba(23,38,59,.32); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ocf-pop-bd.out { opacity: 0; transition: opacity .15s; }
.ocf-pop { width: min(440px, 100%); background: var(--white); border-radius: 18px; padding: 20px 22px 22px;
  box-shadow: 0 20px 50px rgba(23,38,59,.25); animation: ocfPopIn .2s cubic-bezier(.2,.8,.2,1); }
.ocf-pop-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ocf-pop-h b { font-size: 17px; font-weight: 700; color: var(--ink); }
.ocf-pop-x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--slate); cursor: pointer; }
.ocf-pop .ocf-logohint { margin: 10px 2px 0; }
.ocf-pop .ocf-pop-done { margin-top: 16px; }
.ocf-pop .uz-barwrap { animation: ocfBarGone .25s ease 1.1s forwards; }
/* Brand screen: the colour section title matches "Organisation logo". */
.ocf-sect { margin: 22px 2px 4px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ocf-brand .ocf-av.tinted .su-av-in { color: inherit; }
.ocf-brand .ocf-av.tinted { color: #fff; }

/* Brand screen: four previews of where the document colour lands, 2 × 2. */
.ocf-pvgrid { --bc: #17263B; --bc-on: #fff; --bc-acc: #17263B;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ocf-pvb { display: flex; flex-direction: column; gap: 6px; }
.ocf-pvm { height: 76px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white);
  display: flex; flex-direction: column; }
.ocf-pvc { font-size: 12px; font-weight: 500; color: var(--slate); text-align: center; }
/* Table header */
.pv-table .h { display: flex; background: var(--bc); color: var(--bc-on); padding: 7px 10px; font-size: 10px; font-weight: 700; transition: background .2s, color .2s; }
.pv-table .h i { flex: 1; font-style: normal; }
.pv-table .r { flex: 1; border-top: 1px solid var(--line); }
.pv-table .r:nth-child(odd) { background: var(--paper); }
/* Heading line */
.pv-head { padding: 10px 12px; gap: 6px; }
.pv-head b { font-size: 11px; font-weight: 700; color: var(--ink); }
.pv-head .ul { height: 2px; margin-top: -3px; background: var(--bc); transition: background .2s; }
.pv-head .l { height: 5px; width: 92%; border-radius: 3px; background: #EEF0F4; }
.pv-head .l.s { width: 64%; }
/* Document cover */
.pv-cover { padding: 12px 12px; gap: 6px; }
.pv-cover .k { font-size: 8px; font-weight: 700; letter-spacing: .08em; color: var(--bc-acc); transition: color .2s; }
.pv-cover .t { height: 8px; width: 78%; border-radius: 4px; background: #DDE1E8; }
.pv-cover .t.s { height: 5px; width: 52%; background: #EEF0F4; }
/* Excel register */
.pv-xls .h, .pv-xls .g { display: grid; grid-template-columns: repeat(3, 1fr); }
.pv-xls .h { height: 22px; background: var(--bc); transition: background .2s; }
.pv-xls .h i { border-right: 1px solid color-mix(in srgb, var(--bc-on) 25%, transparent); }
.pv-xls .g { flex: 1; border-top: 1px solid var(--line); }
.pv-xls .g i { border-right: 1px solid var(--line); }
.pv-xls i:last-child { border-right: none; }
/* Brand identity grew with the four previews — it starts higher still. */
.ocf[data-ocf="4"] .ocr-body { padding-top: 16px; }

/* ── Setup intake in the sign-up design (2026-10-03, user decision) ─────────
   renderSetupQuestionnaire(): one screen at a time on the white su-pick page,
   one bar segment per SECTION at the top. Only the setup flow's step 1 wears
   `.iqf`; the briefing, summary and generation keep the card. */
.iqf #ocr-flow, .iqf #ocr-title, .iqf #ocr-bars, .iqf #ocr-steplabel { display: none; }
.iqf .ocr-head-in { justify-content: space-between; }
.ocr-page:not(.iqf) #iq-back { display: none; }
.iqf .ocr-body { padding-top: 20px; }
.iq-bars { width: min(440px, 100%); margin: 0 auto 40px; display: flex; gap: 6px; }
.iq-bar { flex: 1; min-width: 0; padding: 6px 0; border: none; background: none; cursor: pointer; }
.iq-bar .ocr-bar { display: block; height: 5px; }
.iq-bar:hover .ocr-bar { background: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.iq-bar.dtip::after { top: calc(100% + 4px); }
.iq-kick { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 8px; }
.iqf .su-titlerow .ocr-title { font-size: 22px; line-height: 1.35; max-width: 520px; margin: 0 auto; }
.iqf .su-subtitle { max-width: 400px; margin: 8px auto 26px; }
.iqf .su-subtitle[hidden] { display: block; visibility: hidden; height: 0; margin: 0 0 26px; }
.su-rise .iq-kick { animation: suRise .32s cubic-bezier(.2,.8,.2,1) .02s both; }
.su-rise .iq-stage { animation: suRise .32s cubic-bezier(.2,.8,.2,1) .12s both; }
.iq-stage { width: min(400px, 100%); margin: 0 auto; padding: 4px 4px 40px; }

/* Answer cards — a click IS the next. */
.iq-yn2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.iq-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 112px; padding: 18px 12px; font: inherit; cursor: pointer; background: var(--white);
  border: 1px solid var(--line); border-radius: 16px; outline: 2px solid transparent; outline-offset: 4px;
  transition: outline-color .15s, transform .1s; }
.iq-card b { font-size: 15px; font-weight: 600; color: var(--ink); }
.iq-card-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--paper); color: var(--slate); transition: background .15s, color .15s; }
.iq-card:hover, .iq-card:focus-visible, .iq-card.on { outline-color: var(--accent); }
.iq-card:hover .iq-card-ic, .iq-card.on .iq-card-ic { background: var(--accent); color: #fff; }
.iq-card:active { transform: scale(.98); }
.iq-opts { display: flex; flex-direction: column; gap: 10px; }
.iq-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .15s, background .15s; }
.iq-opt-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); transition: all .15s; }
.iq-opt:hover, .iq-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--white)); }
.iq-opt.on .iq-opt-dot { border: 5px solid var(--accent); }
.iq-stage.bad .iq-yn2, .iq-stage.bad .iq-opts { animation: suShake .4s; }
.iq-stage.bad .iq-card, .iq-stage.bad .iq-opt { border-color: #D92D20; }

/* Yes → the follow-ups open beneath the cards. */
.iq-reveal { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .3s cubic-bezier(.2,.8,.2,1), opacity .22s, margin .3s; }
.iq-reveal > div { overflow: hidden; padding: 0 4px; margin: 0 -4px; }
.iq-reveal.open { grid-template-rows: 1fr; opacity: 1; margin-top: 26px; }

/* Fields. */
.iq-f { display: flex; flex-direction: column; margin-bottom: 18px; }
.iq-f .su-me-l { margin-top: 0; }
.iq-opt-tag { font-weight: 400; color: var(--muted); }
.iq-hint { font-size: 12px; color: var(--muted); margin: -2px 2px 8px; line-height: 1.45; }
[data-shape="single"] .iq-f > .su-me-l, [data-shape="single"] .iq-f > .iq-hint { display: none; }
.iq-ta { height: auto; min-height: 120px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.iq-ta:focus { padding: 11.5px 15.5px; }
.iq-yn { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.iq-list > .iq-yn:first-child { border-top: 1px solid var(--line); }
.iq-list > .iq-yn + .iq-f:not(.iq-yn) { margin-top: 18px; }
.iq-yn-l { font-size: 14px; line-height: 1.45; color: var(--ink); }
.iq-seg { display: inline-flex; flex: none; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); }
.iq-seg button { border: none; background: none; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--slate); cursor: pointer; transition: background .15s, color .15s; }
.iq-seg button + button { border-left: 1.5px solid var(--line); }
.iq-seg button:hover { color: var(--ink); }
.iq-seg button.y.on { background: var(--accent); color: #fff; }
.iq-seg button.n.on { background: var(--ink); color: #fff; }
.iq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iq-chip { padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 500; color: var(--slate); cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 999px; transition: all .15s; }
.iq-chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--ink); }
.iq-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--white)); color: var(--accent); }
.iqf .iz-sites .form-input { height: 46px; padding: 0 14px; font-size: 15px; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 12px; }
.iqf .iz-sites .form-input:focus { border: 2px solid var(--accent); padding: 0 13.5px; background: var(--white); outline: none; }
.iqf .iz-site-tag { width: 64px; }
.iqf .iz-site-add { margin-left: 72px; }

/* A refusal: the field turns red and shakes, the line sits above the button. */
.iq-f.bad { animation: suShake .4s; }
.iq-f.bad .su-em-in, .iq-f.bad .iq-seg, .iq-f.bad .iq-chip, .iq-f.bad .iz-sites .form-input { border-color: #D92D20; }
.iq-f.bad .iq-yn-l { color: #D92D20; }
.iq-err { display: none; margin-top: 4px; text-align: center; font-size: 13px; color: #D92D20; }
.iq-err:not(:empty) { display: block; }
/* The questionnaire is as wide as the section bars above it. */
.iq-stage { width: min(440px, 100%); padding: 4px 0 40px; }
.iqf .su-subtitle { max-width: 440px; }
.iq-ro { display: flex; align-items: center; color: var(--slate); background: var(--paper); cursor: default; }
/* …and both match the header row: back arrow to ✕ is 550px (.ocr-head-in). */
.iq-bars, .iq-stage { width: min(550px, 100%); }
.iqf .su-subtitle, .iqf .su-titlerow .ocr-title { max-width: 550px; }
/* Yes/No cards carry no icon; "No" rings red (user decision 2026-10-03). */
.iq-yn2 .iq-card { min-height: 72px; }
.iq-card.n:hover, .iq-card.n:focus-visible, .iq-card.n.on { outline-color: #D92D20; }
.iq-seg button.n.on { background: #D92D20; }
/* Dropdown in the sign-up field style, with its own chevron. */
.iq-sel { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.iq-sel:focus { padding-right: 41.5px; }
/* A question revealed by the one above it rises in. */
.iq-list > .iq-f { animation: suRise .28s cubic-bezier(.2,.8,.2,1) both; }
.iq-yn2 .iq-card { min-height: 56px; padding: 12px; }
/* Every option list wears the pick-one rows; pick-many gets a tick box. */
.iq-opts.two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.iq-opts.two .iq-opt { font-size: 14px; padding: 12px 14px; }
.iq-opts.multi .iq-opt-dot { border-radius: 5px; position: relative; }
.iq-opts.multi .iq-opt.on .iq-opt-dot { border: none; background: var(--accent); }
.iq-opts.multi .iq-opt.on .iq-opt-dot::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.iq-f.bad .iq-opt { border-color: #D92D20; }

/* The section navigator (2026-10-03, user decision) — wider than the content:
   a "Section n" label per section, coloured green once every screen in it is
   complete, and under it one rounded square per screen: grey outline = not
   answered, amber = not complete, green = complete, ring = where you are.
   Labels and squares are both clickable, with a tip on hover. */
.iq-nav { position: relative; left: 50%; transform: translateX(-50%);
  width: min(900px, calc(100vw - 32px)); margin: 0 0 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.iq-sec { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.iq-sec-l { padding: 6px 4px; font: inherit; font-size: 12px; font-weight: 600; color: var(--slate); text-align: center;
  white-space: nowrap; cursor: pointer; background: var(--white); border: 1.5px solid var(--line); border-radius: 8px;
  transition: border-color .15s, background .15s, color .15s; }
.iq-sec-l:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--ink); }
.iq-sec-l.cur { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.iq-sec-l.done { background: color-mix(in srgb, var(--accent) 10%, var(--white)); border-color: var(--accent); color: var(--accent); }
.iq-sec-l.done.cur { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.iq-sqs { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.iq-sq { width: 12px; height: 12px; padding: 0; border-radius: 3px; cursor: pointer;
  background: var(--white); border: 1.5px solid var(--line); transition: background .15s, border-color .15s; }
.iq-sq:hover { border-color: var(--slate); }
.iq-sq.partial { background: #FBE7A6; border-color: #E0A800; }
.iq-sq.done { background: var(--accent); border-color: var(--accent); }
.iq-sq.cur { outline: 2px solid var(--ink); outline-offset: 2px; }
.iq-nav .dtip::after { z-index: 5; }
/* Wider, and each section's squares stay on ONE line (they shrink before they wrap). */
.iq-nav { width: min(1280px, calc(100vw - 32px)); gap: 14px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.iq-sqs { flex-wrap: nowrap; gap: 5px; }
.iq-sq { flex: 0 1 12px; min-width: 6px; }
.iq-sq.empty { background: var(--line); border-color: var(--line); }
.iq-sq.empty:hover { border-color: var(--slate); }

/* ── Organisations — a full page in the sign-up design (2026-10-03) ──────────
   renderOrgsHome(): no sidebar, a 550px column, one row per organisation, the
   create button below the list, the account menu at the header's right. */
.orh .ocr-head-in { justify-content: space-between; }
.orh .ocr-col { width: min(550px, 100%); }
.orh .ocr-body { padding-top: max(40px, 10vh); }
.orh .su-subtitle { max-width: 550px; margin-bottom: 28px; }
.orh .tp-dd-menu { z-index: 60; }
.orh-main { width: 100%; }
.orh-loading, .orh-empty { padding: 28px 0; text-align: center; font-size: 14px; color: var(--muted); }
.orh-empty { border: 1.5px dashed var(--line); border-radius: 14px; }
.orh-list { display: flex; flex-direction: column; gap: 10px; }
.orh-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s, border-color .15s; }
.orh-row:hover, .orh-row:focus-visible { outline-color: var(--accent); }
.orh-av { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; overflow: hidden; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  background: color-mix(in srgb, var(--accent) 12%, var(--white)); color: var(--accent); }
.orh-av.logo { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.orh-av img { width: 76%; height: 76%; object-fit: contain; }
.orh-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.orh-tx b { font-size: 15px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orh-tx span { font-size: 12px; color: var(--muted); }
.orh-avs { display: flex; flex: none; }
.orh-avs:empty { display: none; }
.orh-st { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; }
.orh-st.ok { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.orh-st.warn { background: #FDF0CC; color: #8A6400; }
.orh-acts { display: flex; align-items: center; gap: 4px; flex: none; color: var(--muted); }
.orh-gear { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: none; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.orh-gear:hover { background: var(--paper); color: var(--ink); }
.orh-chev { display: flex; }
.orh-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 14px;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); cursor: pointer;
  background: var(--white); border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 14px;
  transition: background .15s, border-color .15s; }
.orh-add:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 6%, var(--white)); border-color: var(--accent); }
.orh-add:disabled { color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.orh-add-ic { font-size: 18px; line-height: 1; }
.orh-note { margin-top: 8px; text-align: center; font-size: 13px; color: var(--muted); }
/* Taller rows; a logo on a solid tile fills its circle (no white ring). */
.orh-row { padding: 20px 18px; min-height: 84px; }
.orh-av { width: 48px; height: 48px; }
.orh-av.logo.fill { box-shadow: none; }
.orh-av.logo.fill img { width: 92%; height: 92%; }
.orh-del:hover { background: #FDECEA; color: #D92D20; }

/* Forgot password in the sign-up design (2026-10-04). It borrows sign-up's
   data-step numbers for the mark and spacing; only its own bits live here. */
.fp .ocr-head-in { justify-content: space-between; }
.fp-dev { margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); }
.fp-dev b { color: var(--ink); letter-spacing: .08em; }

/* ── Setup generation: the orbit (2026-10-04, user decision) ──────────────────
   runGeneration(): the org avatar in the middle, a turning ring that gains a
   type-coloured icon per generated document, and a typed/deleted category word. */
.ogn-page #ocr-flow, .ogn-page #ocr-title, .ogn-page #ocr-bars, .ogn-page #ocr-steplabel { display: none; }
.ogn-page .ocr-body { padding-top: max(48px, 14vh); }
.ogn { display: flex; flex-direction: column; align-items: center; text-align: center; animation: suRise .32s cubic-bezier(.2,.8,.2,1) both; }
.ogn-stage { position: relative; width: 240px; height: 240px; margin-bottom: 18px; }
.ogn-orbit { position: absolute; inset: 0; animation: ognSpin 16s linear infinite; }
@keyframes ognSpin { to { transform: rotate(360deg); } }
.ogn-slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateX(96px); }
.ogn-fix { position: absolute; transform: rotate(calc(-1 * var(--a))); }
.ogn-spin { position: absolute; animation: ognSpin 16s linear infinite reverse; }
.ogn-ic { position: absolute; left: 0; top: 0; display: flex; transform: translate(-50%, -50%);
  animation: ognPop .45s cubic-bezier(.3,1.6,.5,1) both; }
.ogn-ic svg { width: 28px; height: 28px; stroke-width: 2.2; }
@keyframes ognPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.ogn-av { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: 26px; font-weight: 800; letter-spacing: .02em;
  background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(23,38,59,.18);
  animation: ognBreathe 2.4s ease-in-out infinite; }
.ogn-av.logo { background: var(--white); box-shadow: 0 10px 30px rgba(23,38,59,.14), inset 0 0 0 1px var(--line); overflow: hidden; }
.ogn-av img { width: 72%; height: 72%; object-fit: contain; }
.ogn-av.logo.fill img { width: 92%; height: 92%; }
@keyframes ognBreathe { 50% { transform: scale(1.04); } }
.ogn-tick { position: absolute; right: -2px; bottom: 2px; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: #2E9E5B; color: #fff; border: 3px solid var(--white);
  transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.ogn-kick { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.ogn-title { font-size: 26px; line-height: 1.3; font-weight: 700; color: var(--ink); margin: 0; min-height: 68px; }
.ogn-word { white-space: pre; }
.ogn-caret { display: inline-block; width: 2px; height: .95em; margin: 0 1px -2px; background: var(--ink); animation: ognBlink 1s steps(1) infinite; }
@keyframes ognBlink { 50% { opacity: 0; } }
.ogn-dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.ogn-dots i { width: 5px; height: 5px; border-radius: 50%; animation: ognDot 1.2s ease-in-out infinite; }
.ogn-dots i:nth-child(1) { background: #E0A800; }
.ogn-dots i:nth-child(2) { background: #D06A6A; animation-delay: .15s; }
.ogn-dots i:nth-child(3) { background: #5B8DD9; animation-delay: .3s; }
@keyframes ognDot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ogn-foot { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.ogn-live { width: 7px; height: 7px; border-radius: 50%; background: #2E9E5B; animation: ognDot 1.6s ease-in-out infinite; }
.ogn-note { max-width: 440px; margin: 22px auto 0; font-size: 14px; line-height: 1.55; color: var(--slate); }
#ogn-after .su-em-btn { width: min(440px, 100%); margin-top: 18px; }
.ogn.done .ogn-tick { transform: scale(1); }
.ogn.done .ogn-av { animation: none; }
.ogn.done .ogn-live { animation: none; opacity: 1; }
/* Icons sit on a soft chip of their own colour, so they read at a glance. */
.ogn-ic { align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px;
  background: color-mix(in srgb, var(--ic) 13%, var(--white)); }
.ogn-ic svg { width: 22px; height: 22px; }
.ogn-slot { transform: rotate(var(--a)) translateX(100px); }
.ogn-stage { width: 260px; height: 260px; }
/* Round bubbles, not tiles; each breathes larger at the front of the ring and
   smaller at the back as it turns (one 16s clock with the ring). */
.ogn-slot { transform: rotate(var(--a)) translateX(var(--r, 100px)); }
.ogn-depth { position: absolute; animation: ognDepth 16s ease-in-out infinite; }
@keyframes ognDepth { 0%, 100% { transform: scale(.72); opacity: .8; } 50% { transform: scale(1.18); opacity: 1; } }
.ogn-ic { width: var(--sz, 46px); height: var(--sz, 46px); border-radius: 50%; background: var(--white);
  box-shadow: 0 6px 18px rgba(23,38,59,.13), 0 0 0 1px rgba(23,38,59,.05); }
.ogn-ic svg { width: 46%; height: 46%; stroke-width: 2.3; }
.ogn-av { z-index: 1; }
.ogn-stage { width: 320px; height: 320px; }
.ogn-av { width: 112px; height: 112px; margin: -56px 0 0 -56px; font-size: 30px; }
.ogn-ic svg { width: 50%; height: 50%; stroke-width: 2.4; }

/* ── Setup step 2, the tailored summary, in the sign-up design (2026-10-04) ── */
.osm-page #ocr-flow, .osm-page #ocr-title, .osm-page #ocr-bars, .osm-page #ocr-steplabel { display: none; }
.osm-page .ocr-head-in { justify-content: space-between; }
.ocr-page.osm-page #iq-back { display: inline-flex; }
.osm-page .ocr-col { width: min(550px, 100%); }
.osm-page .ocr-body { padding-top: max(32px, 7vh); }
.osm { animation: suRise .32s cubic-bezier(.2,.8,.2,1) both; }
.osm .su-subtitle { max-width: 550px; margin: 8px auto 26px; }
.osm .su-subtitle b { color: var(--ink); font-weight: 600; }
.osm-hero { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--white)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.osm-ring { flex: none; }
.osm-hero-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.osm-hero-n { font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.osm-hero-n em { font-style: normal; font-size: 16px; font-weight: 600; color: var(--muted); }
.osm-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.osm-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.osm-n { font-size: 26px; font-weight: 800; line-height: 1.15; }
.osm-l { font-size: 14px; font-weight: 600; color: var(--ink); }
.osm-s { font-size: 12px; color: var(--muted); }
.osm-note { margin: 18px 2px 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }
.osm .su-em-btn { margin-top: 18px; }
/* Bare glyphs, as in the reference: no bubble, no shadow. */
.ogn-ic { background: none; box-shadow: none; border-radius: 0; }
.ogn-ic svg { width: 62%; height: 62%; }

/* ── Every field in the sign-up field style (2026-10-04, user decision) ───────
   The shared field classes now wear `.su-em-in`'s look and motion: paper fill,
   1.5px hairline, 12px radius, and on focus a primary border that thickens
   (inset shadow — no padding jump), a white fill and a soft 4px halo. Text
   fields are 46px tall (44 inside a slide-out, 38 inside a table row). Selects
   get the same chevron as the questionnaire's dropdown. A refused field
   (`.bad`, or a marked intake question) turns red and shakes, as in sign-up.
   An inline `height` on a field still wins (search boxes stay compact). */
.form-input, .form-select, .form-textarea, .fld {
  border: 1.5px solid var(--line); border-radius: 12px; background-color: var(--paper);
  font-size: 15px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background-color .15s; }
.form-input, .form-select, input.fld, select.fld { height: 46px; padding: 0 15px; box-sizing: border-box; }
.form-textarea, textarea.fld { padding: 12px 15px; line-height: 1.5; }
.form-input::placeholder, .form-textarea::placeholder, .fld::placeholder { color: var(--muted); }
.form-input:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled),
.form-textarea:hover:not(:focus):not(:disabled), .fld:hover:not(:focus):not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.form-input:focus, .form-select:focus, .form-textarea:focus, .fld:focus {
  outline: none; border-color: var(--accent); background-color: var(--white);
  box-shadow: inset 0 0 0 .5px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.form-input:disabled, .form-select:disabled, .form-textarea:disabled, .fld:disabled {
  opacity: .65; cursor: not-allowed; }
.form-select, select.fld, .form-select:focus, select.fld:focus {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.sp-panel .form-input, .sp-panel .form-select, .sp-panel input.fld, .sp-panel select.fld { height: 44px; }
table .form-input, table .form-select, table input.fld, table select.fld { height: 38px; border-radius: 10px; }
.form-input.bad, .form-select.bad, .form-textarea.bad, .fld.bad,
.iz-miss .form-input, .iz-miss .form-select, .iz-miss .form-textarea {
  border-color: #D92D20; box-shadow: inset 0 0 0 .5px #D92D20; animation: suShake .4s; }
.form-input.bad:focus, .form-select.bad:focus, .form-textarea.bad:focus, .fld.bad:focus {
  box-shadow: inset 0 0 0 .5px #D92D20, 0 0 0 4px rgba(217,45,32,.12); }

/* ── Account setup widget as a checklist (2026-10-04, user decision) ─────────
   The audit programme checklist's card and rows (`.ck2-ck-*`); no video. The
   gradient border on `.su-float-card` is unchanged. */
.su-float .rd-su-lead { margin: 0 0 12px; }
.su-ck-head { cursor: default; padding: 8px 12px; }
.su-ck .ck2-ck-list { padding: 8px; }
.su-ck-item { padding: 10px 8px; border-radius: 9px; text-align: left; font: inherit; }
.su-ck-item + .su-ck-item { margin-top: 2px; }
.su-ck-item .ck2-ck-text { display: flex; flex-direction: column; gap: 2px; }
.su-ck-item .ck2-ck-text b { font-size: 13px; font-weight: 600; color: var(--ink); }
.su-ck-item .ck2-ck-text span { font-size: 12px; color: var(--muted); font-weight: 400; }
.su-ck-item.done .ck2-ck-text b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.su-ck-item.next { cursor: pointer; background: var(--paper); }
.su-ck-item.next:hover { background: color-mix(in srgb, var(--accent) 7%, var(--white)); }
.su-ck-start { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 6px 10px 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: #fff; background: var(--ink); }
.su-ck-item:not(.done):not(.next) { opacity: .75; }
/* One box: the checklist card IS the floating card (gradient border kept). */
.su-float1 .su-float-card.su-ck { width: 400px; max-width: calc(100vw - 40px); max-height: none; overflow: hidden;
  padding: 4px; display: block; border-radius: 14px;
  background: linear-gradient(#F1F2F6, #F1F2F6) padding-box,
              linear-gradient(135deg, #2A715B 0%, #FED224 50%, #B450FF 100%) border-box; }
.su-float1 .su-ck-head { cursor: pointer; padding: 10px 12px; }
.su-float1 .ck2-ck-name { font-size: 14px; }
.su-float1 .ck2-ck-list { max-height: min(60vh, 520px); overflow-y: auto; }
.su-float1 .su-float-card.su-ck { border: 2px solid transparent; box-shadow: 0 16px 40px rgba(23,38,59,.22); }
/* Expanded the header chevron points down (it collapses to the pill). */
.su-float1 .su-ck .ck2-ck-chev { transform: rotate(180deg); }
.su-float1.collapsed .su-float-card.su-ck { display: none; }
/* Smooth collapse/expand (2026-10-04): the box shrinks into the bottom-right
   corner as the Setup Guide pill grows out of it, and back. Both stay in the
   DOM — `display:none` cannot animate — and the hidden one takes no clicks. */
.su-float1 .su-float-card.su-ck, .su-float1.collapsed .su-float-card.su-ck {
  display: block; transform-origin: 100% 100%;
  transition: opacity .22s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.su-float1.collapsed .su-float-card.su-ck {
  opacity: 0; transform: scale(.35); visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility 0s .28s; }
.su-float1 .su-float-bubble, .su-float1.collapsed .su-float-bubble {
  display: inline-flex; position: absolute; right: 0; bottom: 0; transform-origin: 100% 100%;
  transition: opacity .2s ease .12s, transform .3s cubic-bezier(.2,.8,.2,1) .12s, visibility 0s; }
.su-float1:not(.collapsed) .su-float-bubble {
  opacity: 0; transform: scale(.6); visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, transform .2s ease, visibility 0s .2s; }
/* Collapsed, the invisible box still sizes the corner — let clicks through to the page. */
.su-float1.collapsed { pointer-events: none; }
.su-float1.collapsed .su-float-bubble { pointer-events: auto; }

/* ── Setup Guide hover preview (2026-10-04) — showSetupPreview() ──────────── */
.sgp { position: fixed; z-index: 61; width: 320px; padding: 14px; box-sizing: border-box;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(23,38,59,.18); pointer-events: none;
  opacity: 0; transform: translateX(8px) scale(.98); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); }
.sgp.in { opacity: 1; transform: none; }
.sgp-media { position: relative; height: 176px; overflow: hidden; border-radius: 12px;
  background: #F4F5F8; border: 1px solid var(--line); }
.sgp-cam { position: absolute; left: 0; top: 0; width: 500px; height: 300px; transform-origin: 0 0;
  transition: transform .8s cubic-bezier(.4,0,.2,1); }
.sgp-pad { position: relative; width: 500px; height: 300px; box-sizing: border-box; padding: 26px 40px; }
.sgp-centre { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sgp-h { font-size: 19px; font-weight: 700; color: var(--ink); text-align: center; margin: 4px 0 16px; line-height: 1.3; }
.sgp .iq-kick { margin-bottom: 4px; }
.sgp .iq-yn2 .iq-card { min-height: 50px; padding: 10px; }
.sgp .iq-reveal.open { margin-top: 14px; }
.sgp .iq-opt { padding: 9px 12px; font-size: 13px; }
.sgp .su-em-btn { height: 40px; margin-top: 12px; }
.sgp-press { transform: scale(.96); filter: brightness(.92); transition: transform .12s, filter .12s; }
.sgp-tx { display: flex; flex-direction: column; gap: 4px; padding: 12px 4px 2px; }
.sgp-tx b { font-size: 15px; font-weight: 700; color: var(--ink); }
.sgp-tx span { font-size: 13px; line-height: 1.5; color: var(--slate); }
/* The pointer: glides between controls, dips on a click. */
.sgp-cursor { position: absolute; left: 0; top: 0; z-index: 5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
  transition: transform .6s cubic-bezier(.4,0,.2,1); }
.sgp-cursor.tap { animation: sgpTap .3s ease; }
@keyframes sgpTap { 50% { scale: .78; } }
/* generate */
.sgp-sum { width: 360px; transition: opacity .25s, transform .25s; }
.sgp-sum.sgp-gone { opacity: 0; transform: scale(.95); position: absolute; pointer-events: none; }
.sgp-gen { display: none; flex-direction: column; align-items: center; }
.sgp-gen.sgp-vis { display: flex; animation: suRise .35s cubic-bezier(.2,.8,.2,1) both; }
.sgp-orb { width: 210px; height: 210px; margin: -26px 0 -8px; transform: scale(.82); }
.sgp-orb .ogn-av { width: 76px; height: 76px; margin: -38px 0 0 -38px; font-size: 20px; }
.sgp-typed { font-size: 17px; margin: 0; }
/* people */
.sgp-chart { display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
.sgp-chart .oc-box { width: 150px; min-height: 0; padding: 10px; }
.sgp-chart .dt-av, .sgp-chart .oc-av-empty { width: 34px; height: 34px; }
.sgp-role { font-size: 11px; color: var(--muted); }
.sgp-trunk { width: 2px; height: 18px; background: var(--line); }
.sgp-row { display: flex; gap: 24px; }
.sgp-done { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); transition: all .3s; }
.sgp-menu { top: auto; bottom: calc(100% + 6px); right: auto; left: 50%; translate: -50% 0; min-width: 170px; text-align: left; }
.sgp-menu .tp-dd-item { font-size: 13px; padding: 6px 10px; gap: 8px; }
.sgp-menu .tp-dd-item.on { background: color-mix(in srgb, var(--accent) 10%, var(--white)); }
.sgp-menu.open { animation: suRise .2s ease both; }
.sgp-mini { width: 24px !important; height: 24px !important; font-size: 10px !important; border-width: 0 !important; }
.sgp-pop { animation: ognPop .4s cubic-bezier(.3,1.6,.5,1) both; translate: 0 0; }
/* assign */
.sgp-tbl { border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: visible; margin-top: 40px; }
.sgp-tr { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.sgp-tr.sgp-th { border-top: none; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--paper); border-radius: 12px 12px 0 0; }
.sgp-tr span:not(.sgp-grp) { justify-self: center; }
.sgp-grp { font-size: 13px; font-weight: 500; color: var(--ink); }
.sgp-cell { position: relative; display: inline-flex; }
.sgp-slot { width: 28px !important; height: 28px !important; font-size: 12px; }
.sgp-tbl .sgp-menu { bottom: auto; top: calc(100% + 6px); }
.sgp-pop { animation: sgpPop .4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes sgpPop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
.sgp-orb { width: 200px; height: 200px; margin: -14px 0 -2px; transform: none; }
.sgp-orb .ogn-av { width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: 19px; }
.sgp-orb .ogn-ic svg { width: 64%; height: 64%; }

/* The document editor's header buttons, for use anywhere (2026-10-04):
   34px, 6px radius, white with a soft shadow, primary green with a glow. */
.btn.btn-pg { height: 34px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); box-shadow: 0 0 6px rgba(23,38,59,.14); }
.btn.btn-pg:hover { background: var(--paper); }
.btn.btn-pg.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 0 6px rgba(0,126,101,.45); }
.btn.btn-pg.btn-primary:hover { background: var(--accent-d); }
/* Org chart: Edit + Add Role on the committee card; Add Member beside the members title. */
.oc-card-acts { display: flex; align-items: center; gap: 8px; }
.oc-head-left { display: flex; align-items: center; gap: 14px; }
/* personPicker's optional action under the list. */
.pp-add { display: block; width: calc(100% - 8px); margin: 4px; padding: 9px 10px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); text-align: left; cursor: pointer; }
.pp-add:hover { background: color-mix(in srgb, var(--accent) 7%, var(--white)); border-color: var(--accent); }
/* Always in view at the foot of a long list. */
.pp-add { position: sticky; bottom: 4px; background: var(--white); box-shadow: 0 -6px 10px var(--white); }
.pp-add:hover { background: color-mix(in srgb, var(--accent) 7%, var(--white)); }
/* "+ Add member" under the picker list: a solid primary button. */
.pp-add, .pp-add:hover { border: none; background: var(--accent); color: #fff; text-align: center; box-shadow: 0 -6px 10px var(--white); }
.pp-add:hover { background: var(--accent-d); }

/* Add member in the old create-organisation pop-up's size (2026-10-04). */
.amm .ocm-body { display: flex; align-items: center; }
.amm .ocm-body-inner { width: 100%; }
.amm-mark { margin: 0 0 14px; }
.amm-title { margin: 0 0 6px; }
.amm-sub { margin: 0 0 24px; font-size: 14px; line-height: 1.55; color: var(--slate); }
/* Add member, revised: centred wording, the organisation's avatar, and the
   email field / button opening one after the other (no footer). */
.amm .ocm-body-inner { text-align: center; }
.amm .amm-f { text-align: left; margin-bottom: 0; }
.amm .amm-f + .amm-f, .amm-reveal .amm-f { margin-top: 16px; }
.amm-av { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 14px;
  border-radius: 50%; overflow: hidden; font-size: 20px; font-weight: 800; letter-spacing: .02em;
  background: color-mix(in srgb, var(--accent) 12%, var(--white)); color: var(--accent); }
.amm-av.logo { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.amm-av img { width: 76%; height: 76%; object-fit: contain; }
.amm-sub { max-width: 440px; margin-left: auto; margin-right: auto; }
.amm-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(8px);
  transition: grid-template-rows .3s cubic-bezier(.2,.8,.2,1), opacity .22s, transform .3s cubic-bezier(.2,.8,.2,1); }
.amm-reveal > div { overflow: hidden; padding: 0 4px 4px; margin: 0 -4px -4px; }
.amm-reveal.open { grid-template-rows: 1fr; opacity: 1; transform: none; }
.amm .su-em-btn { width: 100%; margin-top: 20px; }
/* Anchored near the top rather than centred — so the column also stays put
   as the email field and button open beneath it. */
.amm .ocm-body { align-items: flex-start; padding-top: max(24px, 7vh); }
.amm-sub { font-size: 15px; }
.amm-sub b { font-weight: 600; color: var(--ink); }

/* ── Every pop-up in the Add member design (2026-10-04, user decision) ───────
   `createModal()` builds `.gm` (on top of `.ocm-modal .amm`): content in one
   centred 480px column, title and lead text centred, forms left-aligned,
   buttons stacked full-width under the content (primary on top), no Cancel. */
.gm .ocm-body-inner { text-align: center; }
.gm .modal-title { font-size: 24px; letter-spacing: 0; }
.gm .gm-body { padding: 10px 0 0; overflow: visible; flex: none; text-align: left; font-size: 15px; line-height: 1.55; color: var(--slate); }
.gm .gm-body > p:first-child, .gm .gm-body > p:only-child { text-align: center; }
.gm .gm-body > p { margin: 0 0 12px; }
.gm .gm-body b, .gm .gm-body strong { color: var(--ink); font-weight: 600; }
.gm .gm-body .form-group { text-align: left; }
.gm .gm-foot { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 10px;
  padding: 0; margin-top: 24px; border: 0; }
.gm .gm-foot > div { display: flex; flex-direction: column-reverse; gap: 10px; }
.gm .gm-foot .btn { width: 100%; height: 46px; justify-content: center; border-radius: 12px; font-size: 15px; }
.gm .gm-foot .btn-secondary { border: 1px solid var(--line); background: var(--white); }
.gm .gm-foot .gm-cancel { display: none; }
.gm.modal-has-picker .ocm-body { overflow: visible; }
.ocm-head .modal-close { justify-self: end; }
.gm .gm-foot .btn-danger { background: #D92D20; border-color: #D92D20; color: #fff; }
.gm .gm-foot .btn-danger:hover { background: #B42318; }

/* Editor pop-ups (2026-10-04): the reason note and the generate orbit. */
.gm .gm-opt { font-weight: 400; color: var(--muted); }
.gm .de-reason { width: 100%; min-height: 110px; }
.gm .de-modal-warn { margin-top: 14px; text-align: left; }
.dpm { padding-top: 4px; animation: none; }
.dpm-stage { width: 260px; height: 260px; margin: -6px auto 6px; }
.dpm-stage .ogn-av { width: 92px; height: 92px; margin: -46px 0 0 -46px; font-size: 24px; }
.dpm-line { font-size: 17px; font-weight: 600; color: var(--ink); min-height: 26px; }
.dpm.done .ogn-caret, .dpm.done .ogn-dots, .dpm.failed .ogn-caret, .dpm.failed .ogn-dots { display: none; }
.dpm.done .ogn-tick { transform: scale(1); }
.dpm.done .ogn-av, .dpm.failed .ogn-av { animation: none; }
.dpm.failed .ogn-orbit { opacity: .35; animation-play-state: paused; }
.dpm-acts { display: flex; flex-direction: column-reverse; gap: 10px; }
.dpm-modal .gm-foot { margin-top: 18px; }
.dpm-modal .ocm-body { padding-top: max(8px, 3vh); }
.dpm-stage { width: 230px; height: 230px; margin: -10px auto 0; }
.dpm-stage .ogn-slot { --r: 86px !important; }
.gm .gm-body > p:first-child { margin-bottom: 20px; }
/* The regenerate pop-up: no logo, everything centred both ways. */
.dpm-modal .ocm-head-logo { visibility: hidden; }
.dpm-modal .ocm-body { align-items: center; padding-top: 0; padding-bottom: 60px; }

/* ── The invite link (/join/:token) in the sign-up design (2026-10-04) ────── */
.jn .ocr-body { padding-top: max(56px, 16vh); }
.jn .su-subtitle { max-width: 440px; margin-left: auto; margin-right: auto; }
.jn-av { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%;
  overflow: hidden; font-size: 26px; font-weight: 800; letter-spacing: .02em; margin-bottom: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--white)); color: var(--accent);
  box-shadow: 0 10px 28px rgba(23,38,59,.12); }
.jn-av.logo { background: var(--white); box-shadow: 0 10px 28px rgba(23,38,59,.12), inset 0 0 0 1px var(--line); }
.jn-av img { width: 76%; height: 76%; object-fit: contain; }
.jn .su-mark { display: flex; justify-content: center; margin-bottom: 16px; }
.jn-who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.jn-who-av { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--stone); }
.jn-who b { display: block; font-size: 15px; color: var(--ink); }
.jn-who span span { font-size: 13px; color: var(--muted); }
.jn .su-em-btn { margin-top: 16px; }
/* Centred flows swap slides without motion, so the stage need not clip — a
   field or button that opens after the height was measured stays visible. */
.su-pick .stg-stage { overflow: visible; }

/* Library stats row (2026-10-04): grey boxes, and the donut's empty track white. */
.lib-stats .lib-stat { background: #F1F2F6; }
.lib-stats .lib-dn-svg [stroke="var(--line)"] { stroke: var(--white); }

/* My Dashboard (2026-10-04, same as the Library): grey cards, white empty
   tracks — the donut, the document-status bars, the workload and readiness
   bars, and the readiness tiles. Task cards inside stay white. */
#content .rd-team, #content .rd-mini, #content .rd-comp { background: #F1F2F6; }
#content .rd-tk { border-color: transparent; }
.rd-comp .lib-dn-svg [stroke="var(--line)"] { stroke: var(--white); }
#content .rd-ds-track, #content .rd-tm-bar, #content .rd-ar-box, #content .rd-tk-count.zero { background: var(--white); }

/* ── "Not yet generated" highlight in the document editor (2026-10-04) ──── */
mark.de-ins { background: #FFF1B8; color: inherit; border-radius: 3px; padding: 1px 2px; margin: 0 -1px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.de-p.de-new, .de-list li.de-new, .de-note.de-new, .de-decision.de-new, .de-infobox.de-new {
  background: #FFF6D1; box-shadow: -10px 0 0 #FFF6D1, 10px 0 0 #FFF6D1, inset 3px 0 0 #E0A800; border-radius: 4px; }
.de-list li.de-new { box-shadow: inset 3px 0 0 #E0A800; padding-left: 6px; }
.de-card.de-card-new { box-shadow: 0 0 0 2px #F5D46A; }
.de-card.de-card-new > .de-card-head .de-card-kind::after { content: ' · NEW'; color: #A97800; }
.de-stale-key { display: block; margin-top: 8px; font-size: 12px; }
.de-p.de-new, .de-note.de-new, .de-decision.de-new, .de-infobox.de-new {
  box-shadow: -10px 0 0 #FFF6D1, 10px 0 0 #FFF6D1, -13px 0 0 #E0A800; }
/* Revised (2026-10-04, user decision): no highlighter — new text is simply
   BOLD in its own colour, whether a word, a paragraph or a whole new section. */
mark.de-ins { background: none; padding: 0; margin: 0; border-radius: 0; color: #B45309; font-weight: 700; }
.de-p.de-new, .de-list li.de-new, .de-note.de-new, .de-decision.de-new, .de-infobox.de-new {
  background: none; box-shadow: none; border-radius: 0; padding-left: 0; color: #B45309; font-weight: 700; }
.de-card.de-card-new { box-shadow: none; }
.de-card.de-card-new > .de-card-body .de-p, .de-card.de-card-new > .de-card-body .de-list li { color: #B45309; font-weight: 700; }
.de-card.de-card-new > .de-card-head .de-card-kind::after { color: #B45309; }

/* Form evidence page (2026-10-04): the empty box says the template state. */
.fe-empty { padding: 44px 24px; text-align: center; color: var(--muted); }
.fe-empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px;
  border-radius: 50%; background: #FDF0CC; color: #8A6400; }
.fe-empty-t { font-size: 15px; font-weight: 600; color: var(--ink); }
.fe-empty-s { font-size: 13px; margin: 6px auto 0; max-width: 460px; line-height: 1.5; }
.btn.btn-pg:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn.btn-pg svg { flex: none; }

/* Org avatars with a logo (2026-10-04): the logo in its own round clip (so a
   tick on the avatar is not cut off), filling the circle when its tile colour
   is known. */
.amm-av.logo, .ogn-av.logo, .jn-av.logo { position: relative; overflow: visible; }
.av-clip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; }
.av-clip img { width: 76%; height: 76%; object-fit: contain; }
.logo.fill { box-shadow: 0 10px 30px rgba(23,38,59,.14); }
.logo.fill .av-clip img { width: 92%; height: 92%; }
.ogn-av .ogn-tick { z-index: 2; }
/* New Audit Programme (2026-10-04): no avatar, no step bar. The picker's list
   must not be clipped by the sliding stage. */
.gm.ap-wiz .amm-av, .gm.ap-wiz .stg-steps, .gm.ap-wiz .stg-count { display: none; }
.gm.ap-wiz .stg-stage { overflow: visible; }

/* "Recommended" tag in person pickers (2026-10-04). */
.pp-rec { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 6px; vertical-align: 1px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sgp-pop { animation: sgpPop .4s cubic-bezier(.3,1.6,.5,1) both; }
/* Pickers inside the audit Plan tab's scope table. */
.plan-pp { min-width: 190px; }

/* ── The free-trial page in the sign-up design (2026-10-04) ──────────────── */
.tri-v2 .ocr-head-in { justify-content: space-between; }
.tri-signout { border: none; background: none; padding: 6px 4px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--slate); cursor: pointer; }
.tri-signout:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tri-v2 .ocr-body { padding-top: max(32px, 9vh); }
.tri-v2 .tri-col { width: min(460px, 100%); }
.tri-v2 .tri-card { background: none; border: none; box-shadow: none; padding: 0; min-height: 0; }
.tri-v2 .tri-title { margin: 0; font-size: 24px; text-align: center; }
.tri-v2 .su-subtitle { margin: 8px 0 30px; }
.tri-v2 .tri-steps { overflow: visible; gap: 0; text-align: left; }
.tri-v2 .tri-step { padding: 14px 16px 14px 0; grid-template-columns: 48px 1fr; }
.tri-v2 .tri-step:not(:last-child)::before { top: 48px; bottom: -14px; left: 16px; }
.tri-v2 .tri-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.tri-v2 .tri-label { font-size: 15px; }
.tri-v2 .tri-text, .tri-v2 .tri-list li { font-size: 14px; }
.tri-v2 .tri-foot { padding-top: 26px; }
.tri-v2 .tri-go { border-radius: 12px; height: 48px; padding: 0 22px; }
.tri-v2 .tri-note { margin-top: 14px; font-size: 13px; }

/* Record pages wearing the audit Plan tab's "Details" column (detailsSideCol —
   MR, NC and incident detail, 2026-10-04): 300px sticky panel · the work. */
.pl-grid.pl-gridside { grid-template-columns: 300px minmax(0,1fr); gap: 24px; margin-bottom: 0; }
@media (max-width: 1000px) { .pl-grid.pl-gridside { grid-template-columns: 1fr; } }
#content:has(.pl-gridside) { padding-bottom: 0; }
.pl-gridside > .pl-col:nth-child(2) { padding-bottom: 40px; }
.pl-side > .fd-field { margin-top: 21px; }
.pl-side .ii-k { flex: 0 0 auto; }
.pl-side .nc-sec-h { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pl-side .pl-box-body .oc-chip { width: 20px; height: 20px; min-width: 20px; font-size: 9px; }
.pl-side .pl-person-role { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.pl-side .fd-readonly { background: var(--white); }
/* IAR editor in the document editor's Details panel (2026-10-04). */
.dd-next { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
/* Management Review agenda tab in the document editor's shell (2026-10-04). */
.mra-hdr-acts { display: flex; align-items: center; gap: 8px; }
.shell-full .mra-ed .de-out-row.on { color: var(--accent); font-weight: 600; }
.shell-full .mra-ed .de-out-row.on::after { border-color: var(--accent); }
.mra-out-add { margin: 10px 0 0 20px; }
.mra-ed .de-card-body.mra-card-b { padding: 16px 20px 20px; }
.mra-ed .de-card-body .mra-lab:first-child { margin-top: 0; }
.mra-dd-status { margin-top: 10px; }
.mra-dd-status > div { border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.mra-ed .de-info .dd-sh .dd-link { font-size: 12px; text-transform: none; letter-spacing: 0; }
.mra-ed .de-info .mra-field { width: 100%; box-sizing: border-box; }

/* ═══ Plan cards — the reference design (2026-10-04, user decision) ════════
   Grey card · header strip with the name (dark gradient on the highlighted
   plan, which also lifts) · white inner panel · tinted price box holding the
   seats and the button · the Includes list. Overrides the older card above. */
.cpp-grid { gap: 20px; align-items: stretch; }
.cpp-card, .cpp-card.feat {
  margin: 0; padding: 0 4px 4px; border: 1px solid var(--line); border-width: 1px; border-radius: 16px;
  background: #F1F2F5; background-image: none; box-shadow: 0 1px 2px rgba(23,38,59,.04);
  display: flex; flex-direction: column; transform: none;
}
.cpp-card:hover, .cpp-card.feat:hover { background: #F1F2F5; background-image: none; transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(23,38,59,.10); }
.cpp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 0 14px; }
.cpp-top .cpp-name { font-size: 16px; font-weight: 600; }
.cpp-ribbon { position: static; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.16);
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(4px); }
.cpp-panel { flex: 1; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: 13px; padding: 16px 14px 18px; box-shadow: 0 1px 3px rgba(23,38,59,.06); }
.cpp-panel .cpp-desc { margin: 0 0 14px; min-height: 42px; font-size: 13px; color: var(--ink-soft); }
.cpp-pbox { background: #F5F6F9; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.cpp-pbox .cpp-price { margin: 0 0 2px; }
.cpp-pbox .cpp-amt { font-size: 30px; font-weight: 600; }
.cpp-pbox .cpp-seats { margin-top: 8px; }
.cpp-pbox .cpp-act { margin: 10px 0 0; }
.cpp-pbox .cpp-act .btn { height: 34px; border-radius: 8px; box-shadow: none; }
.cpp-pbox .cpp-act .btn-secondary { background: #E9EBF0; border-color: #E9EBF0; color: var(--ink); }
.cpp-pbox .cpp-act .btn-secondary:hover { background: #DFE2E8; }
.cpp-pbox .cpp-act .btn-primary { background: var(--ink); color: #fff; }
.cpp-pbox .cpp-act .btn-primary:hover { background: #000; }
.cpp-panel .cpp-feats { border-top: 0; margin-top: 14px; padding-top: 0; }
/* The highlighted plan: a dark, textured header and a lifted card. */
.cpp-card.feat { border-color: #2B2F3A; box-shadow: 0 18px 40px rgba(23,38,59,.18);
  background: radial-gradient(120% 140% at 15% 0%, #4A5266 0%, #23262F 45%, #121318 100%); }
.cpp-card.feat:hover { background: radial-gradient(120% 140% at 15% 0%, #4A5266 0%, #23262F 45%, #121318 100%);
  box-shadow: 0 22px 46px rgba(23,38,59,.22); }
.cpp-card.feat .cpp-top .cpp-name { color: #fff; }
.cpp-card.feat .cpp-cur { background: rgba(255,255,255,.16); color: #fff; }
/* It stands 12px taller at the top (no scale — scaling blurs the text); the
   extra height goes to its header, so prices and buttons stay on one line. */
@media (min-width: 1081px) { .cpp-grid .cpp-card.feat { margin-top: -12px; } .cpp-grid .cpp-card.feat .cpp-top { min-height: 58px; } }
.cpp-panel .cpp-desc:empty, .cpp-pbox .cpp-seats:empty { display: none; }

/* Plan confirm — the cart layout in the big pop-up (showPlanChangeConfirm,
   2026-10-04): plan card with package + period dropdowns · order summary. */
.pcc { display: flex; flex-direction: column; }
.pcc-in { flex: 1; overflow-y: auto; padding: 8px 40px 40px; }
.pcc-h { font-size: 21px; font-weight: 700; color: var(--ink); margin: 0 auto 16px; max-width: 1100px; }
.pcc-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 24px; align-items: start; max-width: 1100px; margin: 0 auto; }
@media (max-width: 960px) { .pcc-grid { grid-template-columns: 1fr; } }
.pcc-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(23,38,59,.05); }
.pcc-plan { background: var(--white); }
.pcc-in { background: var(--warm); border-radius: 0 0 16px 16px; }
.pcc-ph { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; color: var(--ink); }
.pcc-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.pcc-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
.pcc-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.pcc-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.pcc-f .form-select { min-width: 200px; }
.pcc-price { display: flex; align-items: center; gap: 12px; text-align: right; }
.pcc-save { font-size: 12px; font-weight: 700; color: #1E6E5C; background: #E3F3E9; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.pcc-amt { font-size: 22px; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcc-amt span { font-size: 14px; font-weight: 500; color: var(--slate); }
.pcc-was { font-size: 13px; color: var(--muted); text-decoration: line-through; margin-top: 2px; }
.pcc-renew { font-size: 12px; color: var(--slate); margin-top: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pcc-ticks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 20px; margin-top: 18px; }
.pcc-tick { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.pcc-tk { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #3DAA5C; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pcc-sh { font-size: 18px; font-weight: 700; color: var(--ink); }
.pcc-sp { font-size: 15px; font-weight: 600; color: var(--ink); margin: 18px 0 10px; }
.pcc-srow { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-soft); padding: 6px 0; }
.pcc-srow b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pcc-tot { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.pcc-total { font-size: 17px; color: var(--ink); }
.pcc-total span { font-weight: 600; }
.pcc-total b { font-size: 19px; font-weight: 700; }
.pcc-go { width: 100%; height: 48px; margin-top: 18px; border-radius: 10px; font-size: 15px; font-weight: 600; justify-content: center; }
.pcc-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 10px; text-align: center; }
.pcc-err { font-size: 13px; color: #c62828; background: #fdecea; border-radius: 8px; padding: 10px 12px; }
.pcc-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--slate); }
.pcc-busy { opacity: .55; pointer-events: none; transition: opacity .15s; }
/* Revised same day: white background, bordered cards, a Monthly/Yearly toggle,
   the five payment lines, and the renewal under the button. */
.pcc-in { background: var(--white); }
.pcc-card { box-shadow: none; }
.pcc-rule { border-top: 1px solid var(--line); margin-top: 20px; }
.pcc-seg { display: inline-flex; height: 46px; box-sizing: border-box; padding: 4px; gap: 4px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--paper); }
.pcc-seg button { min-width: 92px; padding: 0 14px; border: none; border-radius: 8px; background: none; font: inherit; font-size: 14px;
  font-weight: 500; color: var(--slate); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.pcc-seg button.on { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(23,38,59,.12); }
.pcc-subt { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 10px; }
.pcc-renew2 { font-size: 12px; color: var(--slate); text-align: center; margin-top: 12px; }
.pcc-note { margin-top: 6px; }
/* Confirm dialog, third pass: sliding toggle, tighter lines, the auto-renew
   notice, the agree tick. */
.pcc-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; }
.pcc-seg button { position: relative; z-index: 1; background: none !important; box-shadow: none !important; transition: color .25s; }
.pcc-seg-fill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 8px; background: var(--white);
  box-shadow: 0 1px 3px rgba(23,38,59,.14); transition: transform .32s cubic-bezier(.65,0,.35,1); }
.pcc-seg.y .pcc-seg-fill { transform: translateX(calc(100% + 4px)); }
.pcc-srow { padding: 3px 0; }
.pcc-subt { padding-top: 7px; margin-top: 3px; }
.pcc-tot { margin-top: 8px; padding-top: 8px; }
.pcc-total, .pcc-total span, .pcc-total b { font-size: 14px; font-weight: 700; color: var(--ink); }
.pcc-notice { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.pcc-notice svg { flex: none; margin-top: 2px; color: var(--slate); }
.pcc-notice b { font-weight: 600; color: var(--ink); }
.pcc-agree { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
.pcc-agree input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.pcc-go { margin-top: 14px; }
.pcc-go:disabled { opacity: .45; cursor: not-allowed; }
/* Upgrade Plan in the avatar menu, above Billing. */
.tp-dd-item.tp-dd-up .tp-plan-up-t { font-weight: 600; }
.tp-dd-item.tp-dd-up:hover { background: color-mix(in srgb, #E0A800 8%, var(--white)); }
.pl-side .pl-chip-none { background: none; border: 1.5px dashed var(--line); }

/* Audit Plan Details column — the scope note is a white read-only box with a
   pencil to edit (2026-10-05, user decision); auditor cards white too. */
.pl-side .pl-note-box { background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(23,38,59,.05); }
.pl-side .pl-note-box.empty { color: var(--muted); }
.pl-side .pl-box-head .btn.pl-note-edit { width: 26px; padding: 0; justify-content: center; }
.pl-side .pl-note-edit svg { width: 14px; height: 14px; }
.pl-side .pl-note-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.pl-side .pl-person, .pl-side .pl-person + .pl-person { background: var(--white); }

/* ═══ Audit Questionnaire — one area, FULL PAGE (2026-10-05, user decision).
   Mirrors the document editor: own top bar (the programme's is hidden while
   it is mounted), a question rail · the question · a Details column. ═══ */
#content:has(.qvf-top) .ad-subheader:not(.qvf-top) { display: none; }
#content:has(.qvf) { padding-bottom: 0; }
.shell-full .qvf-top { border-radius: 0; padding: 14px var(--gutter); flex-wrap: nowrap; }
.qvf-top .ad-sub-right { flex-wrap: nowrap; }
.qvf { display: grid; grid-template-columns: 260px minmax(0,1fr) 300px; gap: 32px; align-items: start; }
@media (max-width: 1100px) { .qvf { grid-template-columns: 1fr; } }
.qvf-rail, .qvf-side { position: sticky; top: 63px; align-self: start; box-sizing: border-box;
  height: calc(100vh - 63px); margin-top: -18px; overflow-y: auto; scrollbar-width: none; }
.qvf-rail::-webkit-scrollbar, .qvf-side::-webkit-scrollbar { display: none; }
.qvf-rail { padding: 18px 16px 18px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.qvf-side { padding: 18px 0 24px 16px; border-left: 1px solid var(--line); }
.qvf-h { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.qvf-qlist { display: flex; flex-direction: column; gap: 2px; }
.qvf-q { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 8px; border: none; background: none;
  border-radius: 10px; font: inherit; text-align: left; cursor: pointer; color: var(--slate); }
.qvf-q:hover { background: var(--white); color: var(--ink); }
.qvf-q.on { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(23,38,59,.08); }
.qvf-qn { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.qvf-q.on .qvf-qn { border-color: var(--ink); color: var(--ink); }
.qvf-q.compliant .qvf-qn { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.qvf-q.finding .qvf-qn { background: #c62828; border-color: #c62828; color: #fff; }
.qvf-q.na .qvf-qn { background: #9AA3B2; border-color: #9AA3B2; color: #fff; }
.qvf-qt { display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.4; min-width: 0; }
.qvf-qc { font-size: 11px; font-weight: 700; color: var(--muted); }
.qvf-rail-foot { margin-top: auto; padding-top: 16px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.qvf-pbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.qvf-pbar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }

.qvf-main { max-width: 760px; width: 100%; margin: 0 auto; padding: 8px 0 48px; }
.qvf-meta { display: flex; align-items: center; gap: 8px; }
.qvf-pos { margin-left: auto; font-size: 12px; color: var(--muted); }
.qvf-title { font-size: 24px; font-weight: 800; color: var(--ink); margin: 14px 0 8px; line-height: 1.3; }
.qvf-qtext { font-size: 15px; line-height: 1.6; color: var(--slate); margin: 0; }
.qvf-sec { margin-top: 28px; }
.qvf-sec-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.qvf-sec-n { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.qvf-checks { display: flex; flex-direction: column; gap: 8px; }
.qvf-chk { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--white);
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 12px; transition: border-color .15s; }
.qvf-chk.compliant { border-left-color: #2e7d32; }
.qvf-chk.finding { border-left-color: #c62828; }
.qvf-chk.na { border-left-color: #9AA3B2; }
.qvf-chk-t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.qvf-seg { flex: 0 0 auto; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.qvf-seg-b { height: 26px; padding: 0 10px; border: none; border-radius: 6px; background: none; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.qvf-seg-b:hover:not(:disabled) { color: var(--ink); background: var(--white); }
.qvf-seg-b.compliant.on { background: #2e7d32; color: #fff; }
.qvf-seg-b.finding.on { background: #c62828; color: #fff; }
.qvf-seg-b.na.on { background: #9AA3B2; color: #fff; }
.qvf-seg-b:disabled { cursor: default; }
.qvf-dec { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.qvf-dc { position: relative; min-height: 104px; }
.qvf-dc:disabled { cursor: default; opacity: .7; }
.qvf-dc.compliant.on, .qvf-dc.compliant:hover:not(:disabled) { outline-color: #2e7d32; }
.qvf-dc.compliant.on .iq-card-ic, .qvf-dc.compliant:hover:not(:disabled) .iq-card-ic { background: #2e7d32; }
.qvf-dc.finding.on, .qvf-dc.finding:hover:not(:disabled) { outline-color: #c62828; }
.qvf-dc.finding.on .iq-card-ic, .qvf-dc.finding:hover:not(:disabled) .iq-card-ic { background: #c62828; }
.qvf-dc.na.on, .qvf-dc.na:hover:not(:disabled) { outline-color: #9AA3B2; }
.qvf-dc.na.on .iq-card-ic, .qvf-dc.na:hover:not(:disabled) .iq-card-ic { background: #9AA3B2; }
.qvf-rec-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) scale(.9); opacity: 0;
  padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  white-space: nowrap; transition: opacity .2s, transform .2s; pointer-events: none; }
.qvf-dc.rec { border-color: var(--accent); border-style: dashed; }
.qvf-dc.rec .qvf-rec-tag { opacity: 1; transform: translateX(-50%) scale(1); }
.qvf-recline { margin-top: 12px; font-size: 13px; color: var(--muted); }
.qvf-main .q-rate-hint { margin-top: 6px; }
.qvf-main .q-findings { margin-top: 28px; }
.qvf-nav { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; }

.qvf-dt { margin-bottom: 4px; }
.qvf-side-h { display: flex; align-items: center; gap: 6px; margin: 21px 0 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qvf-side-h::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.qvf-side-n { order: 2; font-size: 11px; color: var(--muted); }
.qvf-kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; }
.qvf-k { color: var(--slate); }
.qvf-v { color: var(--ink); font-weight: 500; text-align: right; }
.qvf-side .qvf-ev { grid-template-columns: 1fr; }
.qvf-side .qv-ev-card { background: var(--white); }
.qvf-pit { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--slate); display: flex; flex-direction: column; gap: 6px; }
.qvf-main .q-session-bar { margin-bottom: 16px; }