/* ============================================================
   Review Queue v5 (feature 022) — global stylesheet.
   Ported from the v5 prototype (Claude Design project 5a65cbd3…,
   "Review Queue v5.html"). Global (not scoped) so markup emitted from
   @code render fragments is still reached. All classes are rq- prefixed
   to avoid collisions with the app's component CSS.

   Feature 035 (v28 reskin): the original self-contained --rq-* palette of
   raw hex has been re-pointed at the global v28 token set (layout.css
   --color-* / --shadow-* / --font-* / --v21-*, and role-profiles.css --rp-*
   aliases). Every colour in this file now resolves to a global token or a
   color-mix of tokens — there is no raw colour literal anywhere. Geometry,
   spacing, font sizes, radii, transitions and class names are unchanged.
   The verbatim-quote serif (--rq-serif) is kept deliberately: v28 has no
   serif token and the serif is a quote affordance, not body type.
   ============================================================ */
:root {
    --rq-navy: var(--color-navy);
    --rq-blue: var(--color-text-link);
    --rq-teal: var(--color-teal);
    --rq-ice: var(--color-ice-blue);
    --rq-soft: var(--rp-row-hover);
    --rq-surface: var(--color-surface);
    --rq-white: var(--color-white);
    --rq-grey: var(--color-text-secondary);
    --rq-border: var(--color-border);
    --rq-border-light: var(--color-border-light);
    --rq-success: var(--color-success);
    --rq-warning: var(--color-warning);
    --rq-error: var(--color-error);
    --rq-head: var(--font-heading);
    --rq-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --rq-mono: var(--font-mono);
    --rq-sh-sm: var(--shadow-sm);
    --rq-sh-md: var(--shadow-md);
    --rq-sh-lg: var(--shadow-lg);

    /* Derived shades expressed as mixes of v28 tokens (the prototype's bespoke
       hexes, kept tone-for-tone). */
    --rq-muted: var(--color-text-secondary);
    --rq-caret: var(--color-control-border);
    --rq-ink: color-mix(in srgb, var(--color-navy) 70%, var(--v21-grey));
    --rq-ink-soft: color-mix(in srgb, var(--color-navy) 55%, var(--v21-grey));
    --rq-blue-strong: color-mix(in srgb, var(--color-blue) 70%, var(--color-navy));
    --rq-ok: color-mix(in srgb, var(--color-success) 88%, var(--color-navy));
    --rq-danger: color-mix(in srgb, var(--color-error) 80%, var(--color-navy));

    /* Warm admin-control panel (the prototype's amber strip). */
    --rq-warm-bg: color-mix(in srgb, var(--color-warning) 8%, var(--color-white));
    --rq-warm-bd: color-mix(in srgb, var(--color-warning) 26%, var(--color-white));
    --rq-warm-fg: color-mix(in srgb, var(--color-warning) 78%, var(--color-navy));

    /* Badge tints. */
    --rq-amber-bg: color-mix(in srgb, var(--color-warning) 13%, var(--color-white));
    --rq-amber-fg: color-mix(in srgb, var(--color-warning) 78%, var(--color-navy));
    --rq-bluebadge-bg: color-mix(in srgb, var(--color-blue) 12%, var(--color-white));
    --rq-bluebadge-fg: color-mix(in srgb, var(--color-blue) 70%, var(--color-navy));
    --rq-green-bg: color-mix(in srgb, var(--color-success) 12%, var(--color-white));
    --rq-navybadge-bg: color-mix(in srgb, var(--color-navy) 12%, var(--color-white));
    --rq-red-bg: color-mix(in srgb, var(--color-error) 10%, var(--color-white));
    --rq-red-fg: color-mix(in srgb, var(--color-error) 82%, var(--color-navy));
    --rq-line-danger: color-mix(in srgb, var(--color-error) 28%, var(--color-white));

    /* SC criticality pill ladder (unscored→SC-5), tone preserved. */
    --rq-sc0-bg: color-mix(in srgb, var(--color-surface) 65%, var(--v21-grey) 14%);
    --rq-sc0-fg: color-mix(in srgb, var(--v21-grey) 80%, var(--color-navy));
    --rq-sc1-bg: color-mix(in srgb, var(--color-success) 12%, var(--color-white));
    --rq-sc1-fg: color-mix(in srgb, var(--color-success) 78%, var(--color-navy));
    --rq-sc2-bg: color-mix(in srgb, var(--color-warning) 16%, var(--color-white));
    --rq-sc2-fg: color-mix(in srgb, var(--color-warning) 70%, var(--color-navy));
    --rq-sc3-bg: color-mix(in srgb, var(--color-warning) 22%, var(--color-error) 6%);
    --rq-sc3-fg: color-mix(in srgb, var(--color-warning) 60%, var(--color-error) 30%);
    --rq-sc4-bg: color-mix(in srgb, var(--color-error) 18%, var(--color-warning) 6%);
    --rq-sc4-fg: color-mix(in srgb, var(--color-error) 60%, var(--color-warning) 24%);
    --rq-sc5-bg: color-mix(in srgb, var(--color-error) 26%, var(--color-white));
    --rq-sc5-fg: color-mix(in srgb, var(--color-error) 86%, var(--color-navy));

    /* Role-type chips. */
    --rq-rt-standing-bg: color-mix(in srgb, var(--color-navy) 12%, var(--color-white));
    --rq-rt-standing-fg: color-mix(in srgb, var(--color-blue) 70%, var(--color-navy));
    --rq-rt-conditional-bg: color-mix(in srgb, var(--color-teal) 22%, var(--color-white));
    --rq-rt-conditional-fg: var(--color-navy);

    /* Empty-state icon disc. */
    --rq-empty-bg: color-mix(in srgb, var(--color-success) 12%, var(--color-white));

    /* Overlay (the prototype's translucent layer). Focus rings come from --shadow-focus. */
    --rq-overlay: color-mix(in srgb, var(--color-deep-navy) 40%, transparent);
}

/* ---- Sidebar: two review sections + stage children -------- */
.rqnav-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--rq-muted); padding: 14px 16px 6px; }
.rqnav-sec { margin-bottom: 1px; }
.rqnav-head { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 0 6px 6px 0; color: var(--rq-grey); font-size: 14px; font-weight: 600; border-left: 3px solid transparent; width: 100%; text-align: left; cursor: pointer; background: none; border-top: none; border-right: none; border-bottom: none; }
.rqnav-head:hover { background: var(--rq-soft); color: var(--rq-navy); }
.rqnav-sec.active > .rqnav-head { background: var(--rq-ice); color: var(--rq-navy); border-left-color: var(--color-blue); }
.rqnav-ico { width: 17px; height: 17px; flex-shrink: 0; }
.rqnav-sec-label { flex: 1; text-align: left; line-height: 1.25; }
.rqnav-badge { background: var(--rq-teal); color: var(--rq-navy); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; min-width: 20px; text-align: center; }
.rqnav-caret { width: 13px; height: 13px; color: var(--rq-caret); transition: transform .15s; flex-shrink: 0; }
.rqnav-sec.open .rqnav-caret { transform: rotate(90deg); }
.rqnav-children { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 8px; }
.rqnav-child { display: flex; align-items: center; gap: 10px; padding: 7px 13px 7px 30px; border-radius: 0 6px 6px 0; color: var(--rq-grey); font-size: 13px; border-left: 3px solid transparent; width: 100%; text-align: left; cursor: pointer; background: none; border-top: none; border-right: none; border-bottom: none; }
.rqnav-child:hover { background: var(--rq-soft); color: var(--rq-navy); }
.rqnav-child.active { color: var(--rq-navy); font-weight: 600; border-left-color: var(--color-blue); background: var(--rq-ice); }
.rqnav-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rqnav-dot.tone-amber { background: var(--rq-warning); }
.rqnav-dot.tone-green { background: var(--rq-success); }
.rqnav-dot.tone-grey { background: var(--rq-muted); }
.rqnav-dot.tone-navy { background: var(--rq-navy); }
.rqnav-child-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rqnav-n { font-size: 11px; font-weight: 600; color: var(--rq-grey); background: var(--rq-surface); border-radius: 9999px; padding: 0 7px; min-width: 18px; text-align: center; }
.rqnav-child.active .rqnav-n { background: var(--rq-white); color: var(--rq-navy); }
.rqnav-n.zero { opacity: .5; }

/* ---- Page head -------------------------------------------- */
.rqv5 { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.rq-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.rq-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-secondary); margin-bottom: 7px; }
.rq-title { font-family: var(--rq-head); font-weight: 600; font-size: 26px; color: var(--rq-navy); letter-spacing: -.01em; }
.rq-sub { font-size: 13.5px; color: var(--rq-grey); margin-top: 4px; max-width: 64ch; }
.rq-ctrlgroup { display: flex; align-items: center; gap: 8px; }
.rq-ctrllabel { font-size: 10.5px; color: var(--rq-grey); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

.rq-seg { display: inline-flex; background: var(--rq-surface); border: 1px solid var(--rq-border-light); border-radius: 9999px; padding: 3px; gap: 3px; }
.rq-seg-btn { padding: 5px 13px; font-size: 12.5px; font-weight: 500; color: var(--rq-grey); border-radius: 9999px; white-space: nowrap; border: none; background: none; cursor: pointer; }
.rq-seg-btn:hover:not(.active) { color: var(--rq-navy); }
.rq-seg-btn.active { background: var(--rq-white); color: var(--rq-navy); box-shadow: var(--rq-sh-sm); font-weight: 600; }

/* ---- Document tabs ---------------------------------------- */
.rq-doctabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 5px; margin-bottom: 14px; }
.rq-doctab { display: flex; align-items: center; gap: 11px; padding: 9px 14px; background: var(--rq-white); border: 1px solid var(--rq-border-light); border-radius: 8px; white-space: nowrap; flex-shrink: 0; cursor: pointer; }
.rq-doctab:hover { border-color: var(--color-control-border); }
.rq-doctab.active { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue), var(--rq-sh-sm); background: var(--rq-soft); }
.rq-doctab-main { display: flex; flex-direction: column; gap: 1px; text-align: left; min-width: 0; }
.rq-doctab-label { font-family: var(--rq-head); font-weight: 600; font-size: 13px; color: var(--rq-navy); line-height: 1.2; }
.rq-doctab:not(.active) .rq-doctab-label { color: var(--rq-grey); }
.rq-doctab-code { font-family: var(--rq-mono); font-size: 10px; color: var(--rq-grey); }
.rq-doctab-meta { font-size: 12px; background: var(--rq-surface); color: var(--rq-grey); padding: 1px 8px; border-radius: 9999px; font-weight: 600; min-width: 22px; text-align: center; }
.rq-doctab.active .rq-doctab-meta { background: var(--rq-navy); color: var(--rq-white); }
.rq-doccontext { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12.5px; color: var(--rq-grey); }
.rq-dc-title { font-weight: 600; color: var(--rq-navy); font-size: 13.5px; }

/* ---- Controls (search + suggest) -------------------------- */
.rq-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.rq-search { position: relative; width: 240px; }
.rq-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--rq-grey); }
.rq-search input { width: 100%; height: 34px; border: 1px solid var(--color-control-border); border-radius: 8px; padding: 0 12px 0 34px; font-size: 13px; background: var(--rq-white); color: var(--rq-navy); }
.rq-search input:focus { outline: none; border-color: var(--color-control-border); box-shadow: var(--shadow-focus); }
.rq-suggest { display: inline-flex; align-items: center; gap: 7px; background: var(--rq-navy); color: var(--rq-white); font-size: 13px; font-weight: 500; padding: 8px 15px; border-radius: 8px; margin-left: auto; border: none; cursor: pointer; }
.rq-suggest:hover { filter: brightness(1.12); }
.rq-suggest svg { width: 15px; height: 15px; }

/* ---- Document groups + accordion -------------------------- */
.rq-group { margin-bottom: 18px; }
.rq-solo-tools { display: flex; align-items: center; gap: 9px; justify-content: flex-end; padding: 0 2px 12px; }
.rq-group.acc { background: var(--rq-white); border-radius: 8px; }
.rq-acc-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; background: var(--rq-white); border: 1px solid var(--rq-border-light); border-radius: 8px; cursor: pointer; }
.rq-acc-head:hover { border-color: var(--color-control-border); }
.rq-group.acc:not(.collapsed) .rq-acc-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--color-control-border); }
.rq-acc-chev { color: var(--color-text-secondary); font-size: 12px; width: 12px; transition: transform .15s; flex-shrink: 0; }
.rq-group.acc:not(.collapsed) .rq-acc-chev { transform: rotate(90deg); }
.rq-acc-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rq-grp-num { font-family: var(--rq-head); font-weight: 600; font-size: 14px; color: var(--rq-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-grp-title { font-size: 11px; color: var(--rq-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-acc-count { font-size: 12px; background: var(--rq-surface); color: var(--rq-navy); padding: 1px 9px; border-radius: 9999px; font-weight: 600; min-width: 24px; text-align: center; flex-shrink: 0; }
.rq-acc-tools { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.rq-acc-body { border: 1px solid var(--color-control-border); border-top: none; border-radius: 0 0 8px 8px; padding: 10px; background: var(--rq-soft); }
.rq-group.acc.collapsed .rq-acc-body { display: none; }
.rq-wl-progress { font-size: 12px; color: var(--rq-grey); font-weight: 500; white-space: nowrap; }
.rq-rev { font-family: var(--rq-mono); font-size: 11px; background: var(--rq-surface); border: 1px solid var(--rq-border-light); padding: 1px 7px; border-radius: 5px; color: var(--rq-navy); white-space: nowrap; flex-shrink: 0; }

.rq-rows { display: flex; flex-direction: column; gap: 8px; }

/* ---- Card ------------------------------------------------- */
.rq-card { background: var(--rq-white); border: 1px solid var(--rq-border-light); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--rq-sh-sm); }
.rq-card:hover { border-color: var(--rq-border); }
.rq-card.done { opacity: .6; }
.rq-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rq-card-loc { font-size: 11.5px; color: var(--rq-navy); font-weight: 500; white-space: nowrap; }
.rq-card-by { margin-left: auto; font-size: 11px; color: var(--rq-grey); white-space: nowrap; }

.rq-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 9999px; white-space: nowrap; }
.rq-badge.tone-amber { background: var(--rq-amber-bg); color: var(--rq-amber-fg); }
.rq-badge.tone-blue { background: var(--rq-bluebadge-bg); color: var(--rq-bluebadge-fg); }
.rq-badge.tone-green { background: var(--rq-green-bg); color: var(--rq-success); }
.rq-badge.tone-navy { background: var(--rq-navybadge-bg); color: var(--rq-navy); }
.rq-badge.tone-red { background: var(--rq-red-bg); color: var(--rq-red-fg); }
/* SC criticality pills */
.rq-sc-pill { display: inline-flex; align-items: center; font-family: var(--rq-head); font-weight: 600; font-size: 13px; padding: 3px 11px; border-radius: 5px; }
.rq-sc-0 { background: var(--rq-sc0-bg); color: var(--rq-sc0-fg); }
.rq-sc-1 { background: var(--rq-sc1-bg); color: var(--rq-sc1-fg); }
.rq-sc-2 { background: var(--rq-sc2-bg); color: var(--rq-sc2-fg); }
.rq-sc-3 { background: var(--rq-sc3-bg); color: var(--rq-sc3-fg); }
.rq-sc-4 { background: var(--rq-sc4-bg); color: var(--rq-sc4-fg); }
.rq-sc-5 { background: var(--rq-sc5-bg); color: var(--rq-sc5-fg); }

/* role-type chip */
.rq-rt { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 9999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.rq-rt.standing { background: var(--rq-rt-standing-bg); color: var(--rq-rt-standing-fg); }
.rq-rt.adhoc { background: var(--rq-amber-bg); color: var(--rq-amber-fg); }
.rq-rt.conditional { background: var(--rq-rt-conditional-bg); color: var(--rq-rt-conditional-fg); }
.rq-rt.unclear { background: var(--rq-surface); color: var(--rq-grey); }

/* assignment block */
.rq-asg { display: flex; flex-direction: column; gap: 7px; background: var(--rq-soft); border: 1px solid var(--rq-border-light); border-radius: 8px; padding: 11px 13px; }
.rq-asg-row { display: flex; gap: 16px; align-items: baseline; }
.rq-asg-k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rq-muted); flex-shrink: 0; width: 104px; white-space: nowrap; }
.rq-asg-v { font-size: 13px; color: var(--rq-navy); font-weight: 500; line-height: 1.5; min-width: 0; }
.rq-asg-verbatim { font-family: var(--rq-serif); font-weight: 400; color: var(--rq-ink); }
.rq-asg-empty { font-style: italic; color: var(--rq-grey); font-weight: 400; }

/* proposed-change / history section label (reused by the card's History block) */
.rq-prop-k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rq-muted); }

/* card foot */
.rq-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--rq-border-light); padding-top: 12px; }
.rq-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; align-items: center; }
.rq-foot-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.rq-act-inline { font-size: 12.5px; color: var(--rq-grey); }
.rq-act-inline.ok { color: var(--rq-ok); }
.rq-act-inline.danger { color: var(--rq-danger); }
.rq-link-src { font-size: 12.5px; color: var(--rq-blue); font-weight: 600; white-space: nowrap; background: none; border: none; cursor: pointer; }
.rq-link-src:hover { color: var(--color-text-link-hover); }
.rq-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--rq-navy); cursor: pointer; white-space: nowrap; }
.rq-check input { width: 16px; height: 16px; accent-color: var(--rq-navy); cursor: pointer; }
.rq-check.on { color: var(--rq-ok); }
.rq-kebab-wrap { position: relative; flex-shrink: 0; }
.rq-kebab { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--color-control-border); color: var(--rq-grey); font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; background: none; cursor: pointer; }
.rq-kebab:hover { background: var(--rq-white); color: var(--rq-navy); }
.rq-kebab-menu { position: absolute; right: 0; top: 38px; background: var(--rq-white); border: 1px solid var(--rq-border); border-radius: 8px; box-shadow: var(--rq-sh-lg); z-index: 20; min-width: 150px; padding: 5px; display: flex; flex-direction: column; }
.rq-kebab-menu button { text-align: left; padding: 8px 11px; font-size: 12.5px; color: var(--rq-navy); border-radius: 5px; border: none; background: none; cursor: pointer; }
.rq-kebab-menu button:hover { background: var(--rq-surface); }

/* history timeline */
.rq-hist-wrap { border-top: 1px solid var(--rq-border-light); padding-top: 11px; }
.rq-hist { display: flex; flex-direction: column; gap: 2px; }
.rq-hist-row { display: flex; align-items: center; gap: 10px; padding: 5px 2px; font-size: 12px; }
.rq-hist-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--rq-border); }
.rq-hist-dot.tone-amber { background: var(--rq-warning); }
.rq-hist-dot.tone-green { background: var(--rq-success); }
.rq-hist-dot.tone-blue { background: var(--rq-blue-strong); }
.rq-hist-dot.tone-navy { background: var(--rq-navy); }
.rq-hist-dot.tone-red { background: var(--rq-error); }
.rq-hist-stage { font-weight: 600; color: var(--rq-navy); min-width: 120px; }
.rq-hist-by { color: var(--rq-grey); flex: 1; }
.rq-hist-when { color: var(--rq-grey); }

/* ---- Buttons ---------------------------------------------- */
.rq-btn-accent { background: var(--rq-navy); color: var(--rq-white); font-size: 13px; font-weight: 500; padding: 8px 15px; border-radius: 8px; border: none; cursor: pointer; white-space: nowrap; }
.rq-btn-accent:hover { filter: brightness(1.12); }
.rq-btn-accent.danger { background: var(--rq-error); }
.rq-btn-accent:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.rq-btn-accent.sm, .rq-btn-line.sm { padding: 7px 13px; font-size: 12.5px; }
.rq-btn-line { background: var(--rq-white); border: 1px solid var(--color-control-border); color: var(--rq-navy); font-size: 13px; font-weight: 500; padding: 8px 15px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.rq-btn-line:hover { background: var(--rq-surface); }
.rq-btn-line.danger { color: var(--rq-error); border-color: var(--rq-line-danger); }
.rq-btn-line.danger:hover { background: var(--rq-red-bg); }

/* ---- Empty state ------------------------------------------ */
.rq-empty { text-align: center; padding: 80px 20px; color: var(--rq-grey); }
.rq-empty-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--rq-empty-bg); color: var(--rq-success); display: flex; align-items: center; justify-content: center; font-size: 23px; margin: 0 auto 14px; }
.rq-empty-title { font-family: var(--rq-head); font-weight: 600; font-size: 17px; color: var(--rq-navy); }
.rq-empty-sub { font-size: 13px; margin-top: 4px; }
/* Empty-state CTA (2026-07-16): the way into the change pipeline when the queue has nothing yet. */
.rq-empty-cta { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--color-text-link); text-decoration: none; }
.rq-empty-cta:hover { text-decoration: underline; color: var(--color-text-link-hover); }

/* ---- Decision modal --------------------------------------- */
.rq-modal-overlay { position: fixed; inset: 0; background: var(--rq-overlay); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.rq-modal { background: var(--rq-white); border-radius: 12px; box-shadow: var(--rq-sh-lg); width: 100%; max-width: 440px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.rq-modal-head { padding: 18px 20px; border-bottom: 1px solid var(--rq-border-light); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rq-modal-title { font-family: var(--rq-head); font-weight: 600; font-size: 17px; color: var(--rq-navy); }
.rq-modal-sub { font-size: 12.5px; color: var(--rq-grey); margin-top: 3px; }
.rq-modal-x { background: none; border: none; color: var(--rq-grey); font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 5px; cursor: pointer; }
.rq-modal-x:hover { background: var(--rq-surface); color: var(--rq-navy); }
.rq-modal-body { padding: 18px 20px; overflow-y: auto; }
.rq-modal-foot { padding: 14px 20px; border-top: 1px solid var(--rq-border-light); display: flex; justify-content: flex-end; gap: 9px; background: var(--rq-soft); }
.rq-field label { display: block; font-size: 12px; font-weight: 600; color: var(--rq-navy); margin-bottom: 6px; }
.rq-field textarea { width: 100%; border: 1px solid var(--color-control-border); border-radius: 8px; padding: 9px 11px; font-size: 13.5px; background: var(--rq-white); min-height: 74px; resize: vertical; line-height: 1.5; color: var(--rq-navy); font-family: inherit; }
.rq-field textarea:focus { outline: none; border-color: var(--color-control-border); box-shadow: var(--shadow-focus); }
.rq-field textarea.err { border-color: var(--rq-error); box-shadow: var(--shadow-error-ring); }
.rq-modal-err { color: var(--rq-error); font-size: 12.5px; margin-top: 8px; }

/* ---- Toast ------------------------------------------------ */
.rq-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--rq-navy); color: var(--rq-white); font-size: 13px; font-weight: 500; padding: 11px 20px; border-radius: 9999px; box-shadow: var(--rq-sh-lg); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 300; }
.rq-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   v37 (feature 045) — stage pill tabs + change-type card panels.
   Layers the v37 "Document Changes / Safety Criticality" reskin over
   the v5 card: a stage pill-tab header, a prominent change-type name
   (orange on the SC track), a summary line, and a per-change-type
   panel (FROM→TO reassign/reref, proposed/add, remove-with-strike,
   SC current→proposed tinted by direction). Tokens follow the file
   convention: v28 --color-* mixes, no raw hex.
   ============================================================ */
:root {
    --rq-cp-from-bg: color-mix(in srgb, var(--color-error) 8%, var(--color-white));
    --rq-cp-from-bd: color-mix(in srgb, var(--color-error) 24%, var(--color-white));
    --rq-cp-from-fg: color-mix(in srgb, var(--color-error) 76%, var(--color-navy));
    --rq-cp-to-bg: color-mix(in srgb, var(--color-success) 11%, var(--color-white));
    --rq-cp-to-bd: color-mix(in srgb, var(--color-success) 28%, var(--color-white));
    --rq-cp-to-fg: color-mix(in srgb, var(--color-success) 80%, var(--color-navy));
    --rq-cp-amber-bg: color-mix(in srgb, var(--color-warning) 15%, var(--color-white));
    --rq-cp-amber-bd: color-mix(in srgb, var(--color-warning) 32%, var(--color-white));
    --rq-cp-amber-fg: color-mix(in srgb, var(--color-warning) 72%, var(--color-navy));
    /* Burnt-orange SC change-type name (prototype ~#C77A2C). */
    --rq-orange: color-mix(in srgb, var(--color-warning) 64%, var(--color-error) 26%);
}

/* stage pill tabs */
.rq-stagetabs { display: inline-flex; gap: 4px; background: var(--rq-surface); border: 1px solid var(--rq-border-light); border-radius: 9999px; padding: 4px; margin-bottom: 16px; align-self: flex-start; }
.rq-stagetab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--rq-grey); border-radius: 9999px; border: none; background: none; cursor: pointer; white-space: nowrap; }
.rq-stagetab:hover:not(.active) { color: var(--rq-navy); }
.rq-stagetab.active { background: var(--rq-white); color: var(--rq-navy); font-weight: 600; box-shadow: var(--rq-sh-sm); }
.rq-stagetab-n { font-size: 11px; font-weight: 600; background: var(--rq-white); color: var(--rq-grey); border-radius: 9999px; padding: 0 7px; min-width: 18px; text-align: center; }
.rq-stagetab.active .rq-stagetab-n { background: var(--rq-navy); color: var(--rq-white); }

@media (max-width: 480px) {
    .rq-stagetabs,
    .rq-doctabs {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        box-sizing: border-box;
    }

    .rq-stagetab,
    .rq-doctab {
        flex: 0 0 auto;
    }

    .rq-card-loc {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .rq-cp-panel,
    .rq-asg-row {
        flex-direction: column;
    }

    .rq-cp-arrow {
        transform: rotate(90deg);
    }

    .rq-asg-row {
        gap: var(--space-1);
    }

    .rq-asg-k {
        width: auto;
        white-space: normal;
    }
}

/* change-type name header (orange on the SC track) */
.rq-ct-name { font-family: var(--rq-head); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.rq-ct-name.ct-doc { color: var(--rq-ink); }
.rq-ct-name.ct-sc { color: var(--rq-orange); }

/* Kill the focus-ring artefact on the stage title. The shared layout gives the page <h1> a
   tabindex="-1" and focuses it on navigation (skip-to-content a11y); keyboard users never reach a
   tabindex="-1" element, so suppressing its outline removes the stray box without losing a11y. */
.rq-title:focus, .rq-title:focus-visible { outline: none; }

/* summary line */
.rq-card-summary { font-size: 14.5px; font-weight: 600; color: var(--rq-navy); line-height: 1.45; }

/* change-type panel (base) */
.rq-cp-panel { display: flex; align-items: stretch; gap: 10px; background: var(--rq-soft); border: 1px solid var(--rq-border-light); border-radius: 8px; padding: 11px 13px; }
.rq-cp-box { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; border-radius: 7px; padding: 9px 11px; min-width: 0; }
.rq-cp-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rq-muted); }
.rq-cp-val { font-size: 13px; color: var(--rq-navy); font-weight: 500; line-height: 1.45; word-break: break-word; }
.rq-cp-val.strike { text-decoration: line-through; color: var(--rq-ink-soft); }
.rq-cp-arrow { align-self: center; color: var(--color-text-secondary); font-size: 16px; flex-shrink: 0; }

/* FROM → TO (reassign / reref) and SC current → proposed: boxes float, no wrapper chrome */
.rq-cp-panel.cp-fromto, .rq-cp-panel.cp-sc { background: none; border: none; padding: 0; }
.rq-cp-panel.cp-sc { align-items: center; }
.cp-from { background: var(--rq-cp-from-bg); border: 1px solid var(--rq-cp-from-bd); }
.cp-from .rq-cp-label { color: var(--rq-cp-from-fg); }
.cp-to { background: var(--rq-cp-to-bg); border: 1px solid var(--rq-cp-to-bd); }
.cp-to .rq-cp-label { color: var(--rq-cp-to-fg); }

/* proposed change / add to document — single green-tinted panel */
.rq-cp-panel.cp-reword, .rq-cp-panel.cp-add { flex-direction: column; gap: 6px; background: var(--rq-cp-to-bg); border-color: var(--rq-cp-to-bd); }
.rq-cp-panel.cp-reword .rq-cp-label, .rq-cp-panel.cp-add .rq-cp-label { color: var(--rq-cp-to-fg); }

/* remove from document — red panel, struck value */
.rq-cp-panel.cp-remove { flex-direction: column; gap: 6px; background: var(--rq-cp-from-bg); border-color: var(--rq-cp-from-bd); }
.rq-cp-panel.cp-remove .rq-cp-label { color: var(--rq-cp-from-fg); }

/* SC proposed box tinted by direction (raise=red, classify=amber, lower/de-classify=green) */
.cp-sc-raise .cp-to { background: var(--rq-cp-from-bg); border-color: var(--rq-cp-from-bd); }
.cp-sc-raise .cp-to .rq-cp-label { color: var(--rq-cp-from-fg); }
.cp-sc-add .cp-to { background: var(--rq-cp-amber-bg); border-color: var(--rq-cp-amber-bd); }
.cp-sc-add .cp-to .rq-cp-label { color: var(--rq-cp-amber-fg); }
.cp-sc-lower .cp-to, .cp-sc-remove .cp-to { background: var(--rq-cp-to-bg); border-color: var(--rq-cp-to-bd); }
.cp-sc-lower .cp-to .rq-cp-label, .cp-sc-remove .cp-to .rq-cp-label { color: var(--rq-cp-to-fg); }