/* ═══════════════════════════════════════════════════════════════════
   replay.css — the looping cursor-driven app replay engine
   Owner: the replay agent. Namespace: .dr-*  (nothing else may style it,
   and it styles nothing in .dp-* / .dt-* / .ds-*).

   Loaded AFTER css/styles.css and css/audit-additions.css, so every
   .dr-stage-scoped rule below wins over the app's own base rules by
   order AND by specificity. It never edits the app: the app's real class
   names are reused verbatim inside the stage so a mock renders as the
   product renders.

   Colour comes from the app's tokens only (--brand --accent --nav --bg
   --surface --text ...), so light and dark both work with no second
   palette. The deliberate literals are the cursor's own fill and stroke,
   the frame's drop shadow, and the printed report's paper — chrome and
   paper, never product colour.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   0. THE ROLE COLOUR SYSTEM
   Three roles, three colours. The presentation adopts the colour of the
   role whose view is on screen instead of painting everything brand
   green — brand green stays reserved for the product itself and is
   never a role colour. replay.css loads first, so these are defined
   here and read by everything downstream.

   The three hues sit at 182 / 235 / 297 degrees — evenly spaced, one
   cool family, and clear of BOTH the fund palette (#a3376b 331,
   #1d6fa5 204, #6d4fae 259, #a8661a 32, #5b6472 217) and the status
   colours (ok green, warn amber, danger red). Where a role sits nearest
   a fund hue it is separated again by lightness and chroma: employee
   teal #0b7074 (hue 182) sits 22 degrees off fund blue #1d6fa5 (204)
   and 31 degrees off status green (151), which is the widest berth the
   two neighbours leave; it is also far darker than the fund blue.

   Contrast, sRGB, against the app's own surfaces:
     light  ink on bg   emp 7.67  super 7.68  admin 7.21
     light  role on #fff / #f3f4f3   emp 5.86 / 5.31
                                     super 7.96 / 7.21
                                     admin 7.30 / 6.62
     light  #fff on role  emp 5.86  super 7.96  admin 7.30
     dark   ink on bg   emp 10.30  super 9.82   admin 9.97
     dark   role on --bg #0a0d0b   emp 10.75  super 8.37  admin 8.31
     dark   role on --surface #121613  emp 10.06  super 7.83  admin 7.77
   Every pair clears WCAG-AA (4.5:1) in both themes; all but one clear
   AAA (7:1).
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --role-admin:#8a2f8e; --role-admin-bg:#f7e7f7; --role-admin-ink:#7a2a7e;
  --role-super:#3b44b0; --role-super-bg:#e8e9fa; --role-super-ink:#333ba0;
  --role-emp:#0b7074;   --role-emp-bg:#e3f4f4;   --role-emp-ink:#075457;
}
[data-theme=dark]{
  --role-admin:#e388e6; --role-admin-bg:#3f1741; --role-admin-ink:#f4c4f5;
  --role-super:#97a3ff; --role-super-bg:#1d2154; --role-super-ink:#c8ceff;
  --role-emp:#45d3d8;   --role-emp-bg:#0b3335;   --role-emp-ink:#a6ecee;
}
/* each scene declares its role in JS; the root carries it as data-role
   and resolves the trio to one local set the tag reads */
.dr[data-role=admin]     {--dr-role:var(--role-admin);--dr-role-bg:var(--role-admin-bg);--dr-role-ink:var(--role-admin-ink)}
.dr[data-role=supervisor]{--dr-role:var(--role-super);--dr-role-bg:var(--role-super-bg);--dr-role-ink:var(--role-super-ink)}
.dr[data-role=employee]  {--dr-role:var(--role-emp);  --dr-role-bg:var(--role-emp-bg);  --dr-role-ink:var(--role-emp-ink)}

/* ── 1. HOST + FRAME ────────────────────────────────────────────────
   The mock is authored at a fixed 1280x800 logical box and SCALED. Never
   reflowed: a reflow would move the app's own breakpoints and the mock
   would stop being a picture of the product.

   ONE logical box, ONE scale, computed once when the presentation opens
   and held for the whole run. replay.js sizes .dr-frame in real pixels
   from that one number, so .dr-port is exactly 1280k x 800k and the
   stage needs no centring offset. Nothing here is per-slide. */
.dr{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:0;
  font-family:var(--font,system-ui,sans-serif);
  color:var(--text);
}
/* replay.js writes an exact pixel width and height here from the one
   scale, so the port lands on exactly 1280k x 800k. The ratio below is
   only the pre-script fallback, and it is the FRAME's ratio — the 1280x800
   port plus the 34px title strip and the 1px borders. */
.dr-frame{
  position:relative;width:100%;max-width:100%;
  aspect-ratio:1282 / 836;
  max-height:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.28);
  overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:scale(.97);
  transition:opacity .52s cubic-bezier(.16,1,.3,1),transform .52s cubic-bezier(.16,1,.3,1);
}
.dr-frame.is-in{opacity:1;transform:scale(1)}

/* the 34px title strip with three 10px dots */
.dr-chrome{
  height:34px;flex:none;display:flex;align-items:center;gap:7px;
  padding:0 12px;background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.dr-chrome i{
  width:10px;height:10px;border-radius:50%;display:block;flex:none;
  background:var(--border-2);
}
.dr-chrome-label{
  margin-left:8px;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--text-3);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── 2. VIEWPORT + STAGE ────────────────────────────────────────── */
.dr-port{
  position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  background:var(--bg);
  isolation:isolate;
}
/* THE ONE TRANSFORMED CONTAINER.
   .dr-stage is the only thing that carries the scale, and it has exactly
   two children — .dr-mock (the screen) and .dr-layer (the cursor and
   everything painted in cursor space). They therefore share one
   coordinate space: 1280x800 logical pixels. Whatever scale lands on
   .dr-stage — its own, or one an ancestor adds — lands on both of them
   equally, so the cursor cannot drift off what it is clicking. */
.dr-stage{
  position:absolute;left:0;top:0;
  width:1280px;height:800px;
  transform-origin:top left;
  background:var(--bg);
  /* the mock is a picture. Nothing inside it may take a real click,
     take focus, or fire an app handler. */
  pointer-events:none;user-select:none;-webkit-user-select:none;
}
/* the screen itself — this is what gets rebuilt every loop */
.dr-mock{
  position:absolute;left:0;top:0;
  width:1280px;height:800px;
  transition:opacity .3s linear,filter .3s linear;
}
.dr-mock.is-seam{opacity:0;filter:blur(6px)}
/* DemoReplay.probe() turns pointer events back on for the length of one
   synchronous elementFromPoint call, then off again. The cursor layer
   stays pointer-events:none throughout, so it can never be the answer. */
.dr.dr-probing .dr-stage{pointer-events:auto}

/* the app frame, rebuilt without .app-wrap (100vh) and .main-content
   (contain:strict), which are window-level rules and would fight a
   1280x800 box. Everything inside is the app's own class names. */
.dr-app{display:flex;flex-direction:column;width:1280px;height:800px;background:var(--bg);overflow:hidden}
.dr-appbody{flex:1 1 auto;display:flex;min-height:0;overflow:hidden}
.dr-main{flex:1 1 auto;min-width:0;padding:24px;overflow:hidden;background:var(--bg)}
.dr-scroll{position:relative;overflow:hidden}
.dr-scroll > .dr-scroll-in{will-change:transform}

/* ── 3. THE CURSOR (the centrepiece) ────────────────────────────────
   24x24, tip = hotspot. Never rotates, never recolours, never carries a
   name label — a labelled cursor is multiplayer language, and this is
   replay language.

   The layer is a CHILD of .dr-stage and is the full logical box, so
   every transform written into it is in logical pixels: translate(x,y)
   with the same x,y a scene uses to talk about a control. The arrow's
   tip is drawn at (1.4,1.2) inside its own 24x24 box, so the box is
   pulled back by exactly that much and the tip lands on the point. The
   press scale pivots on the tip for the same reason. */
.dr-layer{
  position:absolute;left:0;top:0;
  width:1280px;height:800px;
  pointer-events:none;z-index:60;
}
.dr-cursor{
  position:absolute;left:0;top:0;width:24px;height:24px;
  margin:-1.2px 0 0 -1.4px;
  pointer-events:none;z-index:62;
  transform-origin:1.4px 1.2px;
  will-change:transform;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.dr-cursor svg{display:block;width:24px;height:24px}

/* click ring: an 8px circle on the hotspot growing to 34px as it fades */
.dr-ring{
  position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;border:2px solid var(--accent);
  pointer-events:none;z-index:61;opacity:1;
  will-change:transform,opacity;
}

/* the wheel glyph that explains a scroll */
.dr-wheel{
  position:absolute;left:0;top:0;z-index:61;
  display:flex;align-items:flex-start;justify-content:center;
  width:18px;height:26px;margin:-36px 0 0 -3px;padding-top:4px;
  border:1.5px solid var(--text-3);border-radius:9px;
  background:var(--surface);opacity:0;
  transition:opacity .18s linear;
}
.dr-wheel.is-on{opacity:.92}
.dr-wheel i{display:block;width:2px;height:6px;border-radius:1px;background:var(--text-3)}

/* the typing caret — an inline tip that rides the end of the typed text,
   so it sits where a real caret sits without measuring anything */
.dr-stage .dr-tip{
  display:inline-block;width:0;height:1.05em;vertical-align:-.18em;
  border-left:1.5px solid var(--text);margin-left:1px;opacity:0;
}
.dr-stage .dr-tip.is-on{animation:dr-blink 1.06s steps(1,end) infinite}
@keyframes dr-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* a field that has been typed into reads as filled, not as a placeholder */
.dr-stage .q-cmt-input{white-space:pre-wrap}

/* ── 4. THE CAPTION ─────────────────────────────────────────────────
   One line, at most seven words, no period. It rides 16px below-right of
   the cursor and TRACKS it with a 90ms lag, clamped inside the frame.
   Exactly one caption is on screen, ever. */
.dr-cap{
  position:absolute;left:0;top:0;z-index:63;
  max-width:300px;
  padding:6px 11px;border-radius:999px;
  background:var(--nav);color:var(--nav-fg);
  font-size:12.5px;font-weight:600;letter-spacing:-.005em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.45);
  opacity:0;transform:translateY(2px);
  transition:opacity .16s linear,transform .16s linear;
  pointer-events:none;
}
.dr-cap.is-on{opacity:1;transform:translateY(0)}
/* create(host, id, { caption:false }): the deck carries the words in its
   own strip, so the pill never paints — one text track on screen */
.dr.dr-nocap .dr-cap{display:none}

/* ── 4b. THE ROLE TAG ───────────────────────────────────────────────
   One small tag, always the same corner: bottom-right of the viewport,
   over the mock. It is deliberately NOT inside the scaled stage — it is
   viewer chrome, not part of the picture, so it stays the same readable
   size whatever the scale is. It carries its own opaque tint, a role-
   coloured rim and a shadow, so it reads over any screen underneath it.

   "Never cover a control the cursor is about to click": replay.js
   measures the tag's own box in logical coordinates and compares it with
   the next target's box; on an overlap the tag stands down until the
   cursor has moved on. It stays in the DOM the whole time, so assistive
   tech still reads it. */
.dr-badges{position:absolute;inset:0;pointer-events:none;z-index:70}
.dr-tag{
  position:absolute;right:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:7px;
  height:26px;padding:0 11px 0 9px;
  border-radius:999px;
  background:var(--dr-role-bg,var(--surface-2));
  color:var(--dr-role-ink,var(--text));
  border:1px solid var(--dr-role,var(--border-2));
  /* 46% read as a hairline but measured 2.45–2.79 against the tag's own
     ground, under the 3:1 floor. 78% keeps the tag soft and clears it in
     both themes for all three roles. */
  border-color:color-mix(in srgb, var(--dr-role,var(--border-2)) 78%, transparent);
  font-size:11.5px;font-weight:650;letter-spacing:.01em;line-height:1;
  white-space:nowrap;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.45);
  transition:opacity .22s linear,transform .22s cubic-bezier(.16,1,.3,1);
}
.dr-tag-dot{
  flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--dr-role,var(--text-3));
}
.dr-tag.is-away{opacity:0;transform:translateY(8px)}

/* ── 5. HOVER + HIT FEEDBACK ON THE MOCK ────────────────────────────
   .rp-hover lights the target's native hover state 180ms BEFORE the
   cursor lands. .rp-hit is the confirmation ring on the control itself. */
.dr-stage .rp-hit{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  border-radius:var(--radius,8px);
  transition:box-shadow .3s ease-out;
}
.dr-stage .rp-hit.rp-hit-out{box-shadow:0 0 0 3px transparent !important}
.dr-stage .cal-cell.rp-hover{background:var(--surface-2)}
.dr-stage .cal-cell.rp-hover .cal-add-btn{opacity:1;color:var(--text)}
.dr-stage .ui-acc-head.rp-hover{background:var(--surface-2)}
.dr-stage .ap-row.rp-hover{background:var(--surface-2)}
.dr-stage .cap-legend-row.rp-hover{background:var(--surface-2);border-radius:var(--radius,8px)}
.dr-stage .tree-row.rp-hover{background:var(--surface-2)}
.dr-stage .q-emp-list-row.rp-hover{background:var(--surface-2)}
.dr-stage button.rp-hover,.dr-stage .btn-sm.rp-hover,.dr-stage .btn-mini.rp-hover{filter:brightness(.97)}
.dr-stage .ui-range-seg.rp-hover,.dr-stage .ui-vt-seg.rp-hover{color:var(--text)}
.dr-stage .dr-req.rp-hover{background:var(--surface-2)}

/* ── 6. STAGE-LOCAL CORRECTIONS ─────────────────────────────────────
   The app's overlays are position:fixed against the window. Inside a
   scaled 1280x800 stage they have to be absolute against the stage, or
   they would escape the frame. Nothing about the app changes: this rule
   only exists inside .dr-stage. */
.dr-stage .modal-overlay{position:absolute;inset:0;z-index:40;backdrop-filter:blur(2px)}
.dr-stage .modal-overlay.open{display:flex}
.dr-stage .modal{max-height:660px}

/* Desktop lock. The app carries responsive rules at 1024px and 860px.
   The stage is always a 1280px-wide desktop, whatever the real viewport
   is, so those breakpoints are re-asserted away inside it. */
.dr-stage .sidebar{width:240px}
.dr-stage .cal-cell{min-height:112px;padding:6px 7px}
.dr-stage .cal-entry-pill{gap:4px;padding:0 4px}
/* the roster split strip is display:none under the app's 1100px rule;
   inside the stage it is a hover/click target, so it is always drawn */
.dr-stage .mgx-strip{display:flex}
.dr-stage .cal-dow-row,.dr-stage .cal-grid{grid-template-columns:48px repeat(7,minmax(0,1fr))}
.dr-stage .cal-week{padding:6px 3px}
.dr-stage .cal-entry-pill .pill-fund{max-width:none}
.dr-stage .ent-foot{align-items:center}
.dr-stage .ent-foot .modal-actions{flex:1 1 240px}
.dr-stage .q-steps{gap:2px 0}
.dr-stage .q-step-ln{width:26px;margin:0 9px}
.dr-stage .q-emp-list{margin-left:34px}
/* the approvals table: at a real viewport of 1024px the app drops its
   Description column and stacks the header. The reject scene hovers that
   column, so inside the stage the 1280px table is re-asserted. */
.dr-stage .ap-desc-col,.dr-stage .le-desc-col{display:table-cell}
.dr-stage .ap-head{flex-direction:row;align-items:flex-start}
.dr-stage .ap-head-r{align-items:flex-end}
.dr-stage .ap-period-lbl{min-width:170px;text-align:center}
.dr-stage .ap-seg{margin-left:auto;width:auto}
.dr-stage .ap-seg-btn{flex:none}
.dr-stage .ap-alloc-item{min-width:190px;flex-basis:190px}
.dr-stage .ap-person-right,.dr-stage .ap-selbar-r,.dr-stage .le-selbar-r{margin-left:auto;width:auto}

/* the entry modal's block accordion carries one ID-scoped rule in the
   app; mirrored here onto a class so the stage needs no duplicate ID */
.dr-stage .dr-fundblocks .ui-acc-lead .fund-chip{width:20px;height:20px}

/* ── 7. THE AUDIT SCENE (icons and motion, almost no text) ──────────
   Built from tokens; it is a diagram, not a screen, so it owns its own
   small layout rather than borrowing app classes it would misuse. */
.dr-audit{display:grid;grid-template-columns:440px 1fr;gap:28px;height:100%;align-items:stretch}
.dr-audit-list{display:flex;flex-direction:column;gap:10px}
.dr-audit-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.dr-req{
  display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg,12px);
  color:var(--text-2);font-size:14px;font-weight:500;
  transition:background .2s,border-color .2s,color .2s;
}
.dr-req.is-on{background:var(--accent-bg);border-color:var(--accent-br);color:var(--text)}
.dr-req-n{
  flex:none;width:24px;height:24px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);color:var(--text-3);
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
.dr-req.is-done .dr-req-n{background:var(--ok-bg);color:var(--ok)}
.dr-req-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-req-tick{flex:none;width:18px;height:18px;color:var(--ok);opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
.dr-req.is-done .dr-req-tick{opacity:1;transform:scale(1)}
.dr-req-tick path{stroke-dasharray:28;stroke-dashoffset:28}
.dr-req.is-done .dr-req-tick path{stroke-dashoffset:0;transition:stroke-dashoffset .34s ease-out}
.dr-audit-screen{
  position:relative;min-height:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg,12px);overflow:hidden;
  box-shadow:var(--shadow-1,0 1px 2px rgba(0,0,0,.05));
}
.dr-audit-pane{position:absolute;inset:0;padding:18px;opacity:0;transition:opacity .28s linear;overflow:hidden}
.dr-audit-pane.is-on{opacity:1}
.dr-audit-cap{font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:12px;letter-spacing:.01em}

/* the paper the certification prints on — the same ink in both themes,
   because paper is paper */
.dr-paper{
  background:#ffffff;color:#1f2d3d;border:1px solid #d6dde5;border-radius:6px;
  padding:16px 18px;font-size:11px;line-height:1.5;
}
.dr-paper-h{font-size:13px;font-weight:700;color:#12324a;margin-bottom:2px}
.dr-paper-sub{font-size:10px;color:#7d8ea1;margin-bottom:12px}
.dr-paper-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid #eef2f6}
.dr-paper-row b{font-weight:600}
.dr-paper-stmt{font-size:9.5px;line-height:1.55;color:#4a5c6e;margin-top:12px}
.dr-paper-sig{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:14px}
.dr-paper-line{position:relative;height:24px;border-bottom:1px solid #9aa9b8}
.dr-paper-cap{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:#7d8ea1;margin-top:4px}
.dr-sig{position:absolute;left:6px;bottom:0;width:160px;height:38px;overflow:visible}
.dr-sig path{fill:none;stroke:#1b3c8c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the tiny fund key used by the quarterly + audit panes */
.dr-key{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}


/* ── 7b. THE REVIEW CYCLE (five people, one quarter, one tolerance) ──
   The landing page hero's Q3 2026 review, on the stage: a supervisor's
   rail of six rows on the left, one allocation card on the right. Built
   from the app's own classes (q-card, q-emp-list-row, cap-legend-row,
   ui-meter, ui-diff, ui-pill, btn-save); the .dr-rc-* rules only size
   the chart for a 1280x800 frame and park the animated properties. The
   bars, ticks, labels, chips and verdict are all driven by replay.js on
   its virtual clock, so no CSS transition below competes with them. */
.dr-stage .dr-rc{display:grid;grid-template-columns:316px minmax(0,1fr);gap:20px;height:100%;align-items:stretch}
.dr-stage .dr-rc .q-card{margin-bottom:0;display:flex;flex-direction:column;min-height:0}
.dr-stage .dr-rc .q-card-head{margin-bottom:14px}
.dr-stage .dr-rc-list{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.dr-stage .dr-rc-row{min-height:60px;transition:background .2s,border-color .2s}
.dr-stage .dr-rc-row.is-cur{background:var(--accent-bg)}
.dr-stage .dr-rc-row.rp-hover{background:var(--surface-2)}
.dr-stage .dr-rc-row.is-cur.rp-hover{background:var(--accent-bg)}
.dr-stage .dr-rc-row-all{border-top:2px solid var(--border-2)}
.dr-stage .dr-rc-st{margin-left:auto;flex:none;display:inline-flex;justify-content:flex-end;min-width:104px}
.dr-stage .dr-rc-st .ui-pill{transform-origin:100% 50%}

/* the allocation card: the title carries the quarter and the person */
.dr-stage .dr-rc-card .q-card-title{font-size:19px;letter-spacing:-.015em;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px}
.dr-stage .dr-rc-who{color:var(--text-3);font-weight:600;font-size:16px}
.dr-stage .dr-rc-card .q-card-sub{font-size:13px;font-variant-numeric:tabular-nums}
.dr-stage .dr-rc-count{font-size:13px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}

/* the four fund rows: the dashboard's legend row, sized up for one card */
.dr-stage .dr-rc-chart{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
.dr-stage .dr-rc-chart .cap-legend{margin-top:0}
.dr-stage .dr-rc-chart .cap-legend-row{min-height:96px;gap:18px;padding:0 12px;margin:0 -12px;border-radius:var(--radius);transition:background .26s}
.dr-stage .dr-rc-chart .cap-legend-row.is-off{background:var(--warn-bg)}
.dr-stage .dr-rc-chart .cap-legend-wide .cap-legend-name{width:236px;max-width:none;display:flex;align-items:center;gap:10px;font-size:16px}
.dr-stage .dr-rc-fname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the gap, stated as a filled pill on the row that blew the tolerance —
   the hero's language, the odd one out by shape as well as by colour */
.dr-stage .dr-rc-gap{display:none;flex:none;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1;
  padding:4px 8px;border-radius:999px;background:var(--warn);color:var(--warn-bg);
  font-variant-numeric:tabular-nums;transform-origin:0 50%;opacity:0}
.dr-stage .dr-rc-gap.is-on{display:inline-flex}
.dr-stage .dr-rc-chart .cap-legend-meter{flex:1 1 auto;min-width:120px;max-width:none;margin:0 6px}
.dr-stage .dr-rc-chart .cap-legend-meter .ui-meter-track{display:block;height:10px;border-radius:5px;background:var(--surface-3);overflow:visible}
.dr-stage .dr-rc-chart .cap-legend-meter .ui-meter-fill{display:block;height:100%;border-radius:5px;max-width:none;
  transform-origin:0 50%;transform:scaleX(0);will-change:transform;transition:none}
.dr-stage .dr-rc-chart .cap-legend-meter .ui-meter-tick{top:-5px;height:20px;width:2px;margin-left:-1px;border-radius:1px;
  background:var(--text);opacity:.9;transform-origin:50% 100%;transform:scaleY(0);transition:none}
.dr-stage .dr-rc-chart .cap-legend-vals{flex:none;min-width:150px;align-items:flex-end;gap:6px}
.dr-stage .dr-rc-val{font-size:17px;opacity:0}
.dr-stage .dr-rc-val .pct{font-size:13px;margin-left:6px}
.dr-stage .dr-rc-chip{opacity:0;transform:scale(.9);transform-origin:100% 50%}
.dr-stage .dr-rc-chart .cap-legend-tgt .ui-diff{font-size:12.5px}
.dr-stage .dr-rc-chart .cap-legend-tgt .ui-diff-val{font-weight:700}

/* the verdict: an icon AND a word, never colour alone; held back until
   the bars have landed, then it pops in with the chips */
.dr-stage .dr-rc-verdict{display:flex;align-items:center;gap:14px;margin-top:12px;min-height:54px;
  padding:10px 16px;border-radius:var(--radius);border:1px solid var(--ok-br);background:var(--ok-bg);
  opacity:0;transform:scale(.92);transform-origin:0 50%;visibility:hidden}
.dr-stage .dr-rc-verdict.is-on{visibility:visible}
.dr-stage .dr-rc-verdict[data-v=no]{background:var(--danger-bg);border-color:var(--danger-br)}
.dr-stage .dr-rc-verdict[data-v=pk]{background:var(--accent-bg);border-color:var(--accent-br)}
.dr-stage .dr-rc-verdict[data-v=send]{background:transparent;border-color:transparent;padding:0 0 0 0;justify-content:flex-end;transform-origin:100% 50%}
.dr-stage .dr-rc-verdict .ui-pill{height:26px;font-size:12px;padding:0 10px;gap:6px}
.dr-stage .dr-rc-vline{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.dr-stage .dr-rc-send{flex:none;padding:12px 24px;font-size:14px}
/* the button becomes the confirmation in place: same element, stamped */
.dr-stage .dr-rc-stamp{display:inline-flex;align-items:center;gap:14px;flex:none;
  padding:0;border:0;background:transparent;color:var(--text);font-family:var(--font);cursor:default;opacity:1}
.dr-stage .dr-rc-verdict.is-stamp{justify-content:flex-start;padding:10px 16px;
  box-shadow:inset 0 0 0 1px var(--accent-br)}

/* ── 7c. THE ALLOCATION CHANGE + THE SPLIT REPORT ───────────────────
   Two scenes for one story: an effective-dated target split (the
   per-user editor's Funds tab, contract C) and the Q2 report it produces
   (two periods, each against its own target). Built from the app's own
   classes — tree-row, mgx-strip, um-tabs, fund-alloc-table, alloc-input,
   mgx-sum, mg-list, q-card, q-paper-viewer, q-page, q-sig-block. The rules below
   only size them for the 1280x800 stage, stand in for the live controls
   a picture cannot carry (inputs, checkboxes, a date field), and lay out
   the printed page. Tokens only, except paper ink. */

/* the Users list */
.dr-stage .dr-users .tree-row{min-height:56px}
.dr-stage .dr-users .mgx-strip{width:200px}
.dr-stage .dr-users .mgx-strip-l{font-variant-numeric:tabular-nums}
.dr-stage .dr-users .role-supervisor{background:var(--accent-bg);color:var(--accent-ink)}

/* the editor: taller than the app's stage default so the dated form fits
   without the modal having to scroll; the app's own modal scrolls, and so
   does this one if it ever must */
.dr-stage .dr-um .modal{max-height:770px}
.dr-stage .dr-um .half-row .field{margin-bottom:12px}
.dr-stage .dr-um .um-tabs{margin-top:2px}
.dr-stage .dr-um-pane{margin-bottom:6px}
.dr-stage .dr-um-pane>.hint{margin-bottom:8px}
.dr-stage .dr-alloc-form{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.dr-stage .dr-alloc-form .field{margin-bottom:10px}
.dr-stage .dr-alloc-form>.hint{margin-bottom:8px}

/* the split table's live controls, drawn as pictures of themselves */
.dr-stage span.alloc-input{display:inline-block;min-width:68px;box-sizing:border-box;line-height:1.5;
  min-height:28px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dr-stage span.alloc-input.is-disabled{opacity:.4;background:var(--soft,var(--surface-3))}
.dr-stage span.alloc-input.rp-hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.dr-stage .dr-check{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:4px;border:1px solid var(--border-2);background:var(--surface);color:var(--on-ink);vertical-align:middle}
.dr-stage .dr-check.is-on{background:var(--accent);border-color:var(--accent)}
.dr-stage .dr-date{display:flex;align-items:center;min-height:38px;box-sizing:border-box;
  font-variant-numeric:tabular-nums}
.dr-stage .dr-date .dr-date-ph{color:var(--text-3)}
.dr-stage .dr-date.rp-hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.dr-stage .mgx-sum .ui-meter{margin:8px 0}
.dr-stage .mgx-sum-msg svg{flex:none}

/* the allocation history: one row per version — date, split, who */
.dr-stage .alloc-history{box-shadow:none}
.dr-stage .alloc-history-row{display:flex;align-items:center;gap:10px;padding:10px 12px;
  transition:background .2s}
.dr-stage .alloc-history-row+.alloc-history-row{border-top:1px solid var(--border)}
.dr-stage .alloc-history-row.rp-hover{background:var(--surface-2)}
.dr-stage .alloc-history-date{font-size:12px;font-weight:700;color:var(--text)}
.dr-stage .alloc-history-status{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-left:6px}
.dr-stage .alloc-history-split{font-size:11px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.dr-stage .alloc-history-split strong{color:var(--text-2);font-weight:700}
.dr-stage .alloc-history-dot{color:var(--text-3);padding:0 2px}
.dr-stage .alloc-history-who{flex:none;font-size:11px;color:var(--text-3);white-space:nowrap}

/* the employee's report view: one card, the paper viewer, one letter page */
.dr-stage .dr-rp-card{margin-bottom:0;padding:14px 16px 12px}
.dr-stage .dr-rp-cardhead{margin-bottom:8px}
.dr-stage .dr-rp-cardhead>div:first-child{min-width:0;flex:1 1 auto}
.dr-stage .dr-rp-cardhead .q-card-sub{line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-stage .dr-rp-cmt{color:var(--text-2);border-radius:4px;padding:0 2px;transition:background .2s}
.dr-stage .dr-rp-cmt.rp-hover{background:var(--accent-bg);color:var(--text)}

/* ── the paper viewer (contract 4): a toolbar over ONE visible page ──
   The app's viewer scales the sheet to its container with a transform
   on a wrapper; the stage is a fixed 1280x800 box, so the scale is one
   number here (--q-scale) chosen so a whole letter page, footer and
   all, fits the column beneath the card head. */
.dr-stage .q-paper-viewer{--q-scale:.57;display:block;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:6px 12px 10px;outline:none}
.dr-stage .q-paper-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:34px;margin-bottom:6px}
.dr-stage .q-paper-pager{display:inline-flex;align-items:center;gap:6px}
.dr-stage .q-paper-nav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  padding:0;border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);
  color:var(--text-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.dr-stage .q-paper-nav.rp-hover{background:var(--surface-3);color:var(--text);border-color:var(--border-2)}
.dr-stage .q-paper-nav:disabled,.dr-stage .q-paper-nav[disabled]{opacity:.4;cursor:not-allowed}
.dr-stage .q-paper-count{min-width:84px;text-align:center;font-size:12.5px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;border-radius:4px;padding:3px 6px;transition:background .2s}
.dr-stage .q-paper-count.rp-hover{background:var(--accent-bg)}
.dr-stage .q-paper-actions{display:inline-flex;align-items:center;gap:8px}
.dr-stage .q-paper-actions .btn-mini{padding:6px 14px;font-size:12.5px}
.dr-stage .q-paper-sign{font-weight:600}
.dr-stage .q-paper-sheet{display:flex;justify-content:center;overflow:hidden;
  height:calc(1056px * var(--q-scale))}
.dr-stage .q-paper-scale{flex:none;width:816px;height:1056px;transform:scale(var(--q-scale));
  transform-origin:top center}

/* ── the page (contract 3): a US-letter sheet, 816 x 1056 at 96 dpi,
   0.6 in of padding, a running header, a "Page i of N" footer. Only the
   current page is shown; the others carry [hidden]. Paper ink only. ── */
.dr-stage .q-report{display:block}
.dr-stage .q-page{position:relative;box-sizing:border-box;width:816px;height:1056px;padding:57.6px;
  background:#fff;color:#1a2a3a;font-size:13px;line-height:1.45;display:flex;flex-direction:column;
  border:1px solid #d6dde5;box-shadow:0 10px 28px rgba(15,35,64,.16);page-break-after:always;break-after:page}
.dr-stage .q-page:last-child{page-break-after:auto}
.dr-stage .q-page[hidden]{display:none!important}
.dr-stage .q-page-head{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:#6b82a0;padding-bottom:8px;border-bottom:1px solid #e1e8f0;
  margin-bottom:14px;white-space:nowrap}
.dr-stage .q-page-head-org{font-weight:700;color:#0f2340}
.dr-stage .q-page-head-dot{color:#9aabbf}
.dr-stage .q-page-body{flex:1 1 auto;min-height:0}
.dr-stage .q-page-foot{margin-top:auto;padding-top:8px;border-top:1px solid #e1e8f0;font-size:10px;
  color:#6b82a0;text-align:right;font-variant-numeric:tabular-nums}

/* the printed report's own type, sized for a real sheet */
.dr-stage .dr-paper-rp{font-size:13px;color:#1a2a3a}
.dr-stage .dr-rp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  border-bottom:3px solid #0f2340;padding-bottom:12px}
.dr-stage .dr-rp-org{font-size:21px;font-weight:700;color:#0f2340;line-height:1.15}
.dr-stage .dr-rp-kicker{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#6b82a0;margin-top:3px}
.dr-stage .dr-rp-meta{border-collapse:collapse;font-size:12px;margin-left:auto}
.dr-stage .dr-rp-meta td{padding:1px 0 1px 12px;text-align:right;white-space:nowrap}
.dr-stage .dr-rp-mk{color:#6b82a0;font-weight:600;text-transform:uppercase;font-size:9.5px;letter-spacing:.6px}
.dr-stage .dr-rp-mv{color:#1a2a3a;font-variant-numeric:tabular-nums}
.dr-stage .dr-rp-mv.is-b{font-weight:700;color:#0f2340}
.dr-stage .dr-rp-title{text-align:center;margin:14px 0 6px}
.dr-stage .dr-rp-period{font-size:19px;font-weight:800;color:#0f2340;margin-top:2px}
.dr-stage .dr-rp-note{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;
  background:#f1f5fa;border:1px solid #d6dfe9;color:#33485f;font-size:11px;font-weight:600;transition:background .2s}
.dr-stage .dr-rp-note.rp-hover{background:#e4ecf6}
.dr-stage .dr-rp-sec{margin-top:18px}
.dr-stage .dr-rp-sech{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:#0f2340;
  text-transform:uppercase;letter-spacing:.5px;padding:0 2px 6px;border-bottom:1px solid #d6dfe9;margin-bottom:2px;
  border-radius:4px;transition:background .2s}
.dr-stage .dr-rp-sech.rp-hover{background:#eef3f9}
.dr-stage .dr-rp-dot{color:#9aabbf;font-weight:400}
.dr-stage .dr-rp-split{font-variant-numeric:tabular-nums;color:#1b3c8c}
.dr-stage .dr-rp-secn{margin-left:auto;font-size:9.5px;font-weight:600;color:#6b82a0;text-transform:none;letter-spacing:.2px}
.dr-stage .dr-rp-tbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.dr-stage .dr-rp-tbl th{padding:5px 8px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:#6b82a0;background:#f5f7fa;border-bottom:2px solid #0f2340;text-align:left}
.dr-stage .dr-rp-tbl td{padding:6px 8px;border-bottom:1px solid #eef2f6;color:#1a2a3a}
.dr-stage .dr-rp-tbl th.num,.dr-stage .dr-rp-tbl td.num{text-align:right}
.dr-stage .dr-rp-tbl td b{font-weight:700;color:#0f2340}
.dr-stage .dr-rp-tbl tr.rp-hover td{background:#eef3f9}
.dr-stage .dr-rp-fund{font-weight:600;white-space:nowrap}
.dr-stage .dr-rp-fund i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.dr-stage .dr-rp-total td{font-weight:700;border-top:2px solid #0f2340;border-bottom:0;background:#f5f7fa;color:#0f2340}
.dr-stage .dr-rp-fn{font-size:9.5px;color:#9aabbf;margin-top:6px}

/* ── the signature block (contract B) on the last page ──
   TWO labelled panes side by side — "Employee certification" first,
   "Supervisor confirmation" second — exactly the block dashboard.js
   builds for the real report, class for class. Above them, one
   attestation line for each party that HAS signed, and for no one else.
   A pane holding a signature carries the mark (the name in the signature
   face, or the uploaded image), one record line — name, the moment in
   the organisation's own zone, and which method — and, when somebody
   entered it on the owner's behalf, the line that says so. A pane
   without one carries a ruled empty box, the plain word "Unsigned", and
   who it is waiting on. Nothing here may read as a signature that does
   not exist. Paper ink only: the sheet prints the same in both themes.
   (The app stacks the two panes under 640px in css/p-dashboard.css; the
   stage is a fixed 1280px desktop, so that breakpoint never fires here.) */
.dr-stage .q-sig-block{margin-top:16px;padding-top:10px;border-top:2px solid #ccc;border-radius:6px;transition:background .2s}
.dr-stage .q-sig-block.rp-hover{background:#f7f9fc}
.dr-stage .q-sig-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#2a9460;
  margin:0 0 6px;padding-bottom:3px;border-bottom:1px solid #e1e8f0}
.dr-stage .q-sig-attest{font-size:10px;line-height:1.5;color:#33485f;margin-bottom:4px;max-width:700px;
  border-radius:4px;padding:1px 3px;transition:background .2s}
.dr-stage .q-sig-attest.rp-hover{background:#eef3f9}
.dr-stage .q-sig-attest b{font-weight:700;color:#0f2340}
/* the two panes */
.dr-stage .q-sig-panes{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;
  border-radius:6px;transition:background .2s}
.dr-stage .q-sig-panes.rp-hover{background:#f2f6fb}
.dr-stage .q-sig-pane-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:#33485f;margin-bottom:3px}
.dr-stage .q-sig-box{border:1px solid #d6dde5;border-radius:6px;background:#fcfdfe;min-height:74px;
  padding:6px 10px;display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box}
.dr-stage .q-sig-pane[data-signed=false] .q-sig-box{background:#fbfbf7;border-style:dashed}
/* the ruled line an unsigned pane shows INSTEAD of a mark */
.dr-stage .q-sig-ruled{height:26px;border-bottom:1px solid #c8d3de;margin-bottom:3px}
.dr-stage .q-sig-state{font-size:12px;font-weight:700;color:#b07a00;letter-spacing:.3px;margin-top:4px}
.dr-stage .q-page .sig-cursive{color:#0f2340}
.dr-stage .sig-image{max-height:46px;max-width:200px;object-fit:contain;display:block}
.dr-stage .q-sig-line{font-size:10px;color:#33485f;margin-top:4px;border-radius:4px;padding:1px 3px;
  transition:background .2s}
.dr-stage .q-sig-line.rp-hover{background:#e4ecf6}
.dr-stage .q-sig-line b{font-weight:700;color:#0f2340}
.dr-stage .q-sig-await,.dr-stage .q-sig-entered{color:#6b82a0}
.dr-stage .q-sig-cap{font-size:9px;font-weight:700;color:#33485f;letter-spacing:.4px;margin-top:3px;text-transform:uppercase}
/* provenance: who sent it to whom, stated plainly and never as a signature */
.dr-stage .q-sig-foot{font-size:9px;color:#6b82a0;margin-top:5px;line-height:1.5}
.dr-stage .q-sig-foot b{font-weight:700;color:#33485f}

/* ── the signature face (contract 6): the app's token, with the same
   stack as a fallback so the stage renders before p-ui.css is merged ── */
.dr-stage .sig-cursive{font-family:var(--font-signature,'Dancing Script','Segoe Script','Brush Script MT',cursive);
  font-weight:600;font-size:34px;line-height:1.1;letter-spacing:.01em;color:var(--text)}

/* ── the sign popup (contract 5): two selectable cards, the attestation,
   a Sign button that only wakes once a card is chosen and the box ticked ── */
.dr-stage .dr-sign .modal{width:540px;max-height:740px}
.dr-stage .q-sign-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 14px}
.dr-stage .q-sign-card{border:1.5px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.dr-stage .q-sign-card.rp-hover{border-color:var(--border-2);background:var(--surface-2)}
.dr-stage .q-sign-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.dr-stage .q-sign-card-top{display:flex;align-items:center;gap:8px}
.dr-stage .q-sign-card-h{font-size:13px;font-weight:600;color:var(--text)}
.dr-stage .q-sign-card-prev{display:flex;align-items:center;justify-content:center;min-height:64px;margin:10px 0 8px;
  border:1px dashed var(--border-2);border-radius:var(--radius);background:var(--surface-2);padding:6px 10px}
.dr-stage .q-sign-card-prev .sig-cursive{font-size:30px;border-radius:4px;padding:0 8px;transition:background .2s}
.dr-stage .q-sign-card-prev .sig-cursive.rp-hover{background:var(--accent-bg)}
.dr-stage .q-sign-card-sub{font-size:11.5px;color:var(--text-3);line-height:1.4}
.dr-stage .dr-radio{flex:none;position:relative;width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--border-2);background:var(--surface);box-sizing:border-box;transition:border-color .15s}
.dr-stage .dr-radio.is-on{border-color:var(--accent)}
.dr-stage .dr-radio.is-on::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--accent)}
.dr-stage .dr-file{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3)}
.dr-stage .dr-file-btn{padding:4px 10px;border:1px solid var(--border-2);border-radius:var(--radius);
  background:var(--surface);color:var(--text-2);font-weight:500}
.dr-stage .dr-sign .q-attest{margin-bottom:0}
.dr-stage .dr-sign .q-attest-ck{cursor:pointer}
.dr-stage .dr-sign .dr-check{margin-top:2px;cursor:pointer}
.dr-stage .dr-sign .dr-check.rp-hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.dr-stage .dr-sign .btn-save:disabled{opacity:.5;cursor:not-allowed}

/* ── the supervisor's ONE sheet (contract C) ─────────────────────────
   The report page, the required comment and the same two signature
   cards, closing on a single button that reads "Sign and send to NAME".
   The button is disabled until the comment is written AND a method is
   chosen, so nothing can leave unsigned and nothing can be signed
   without leaving — the two acts are one act. */
.dr-stage .dr-sendsheet .modal{width:760px;max-height:712px}
.dr-stage .dr-sendsheet .modal-sub{margin-bottom:10px}
/* the page itself, scaled to the sheet: a real 816px letter sheet, shown
   from the top, so the supervisor is signing the document and not a
   summary of it */
.dr-stage .dr-sheet-doc{height:174px;overflow:hidden;padding:0;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;justify-content:center}
.dr-stage .dr-sheet-scale{flex:none;width:816px;height:1056px;transform:scale(.78);transform-origin:top center}
.dr-stage .dr-sendsheet .q-cmt{margin-top:12px}
.dr-stage .dr-sendsheet .q-cmt-input{min-height:48px}
.dr-stage .dr-sheet-cards{margin:12px 0 8px}
.dr-stage .dr-sheet-cards .q-sign-card-prev{min-height:52px;margin:8px 0 0}
.dr-stage .dr-sheet-cards .q-sign-card-prev .sig-cursive{font-size:26px}
.dr-stage .dr-sheet-attest{font-size:11px;line-height:1.5;color:var(--text-3);margin:0 0 4px}
.dr-stage .dr-sendsheet .q-sheet-foot{margin-top:8px}
.dr-stage .dr-sendsheet .btn-save:disabled{opacity:.5;cursor:not-allowed}

/* ── OPEN AS USER (contract D) ───────────────────────────────────────
   Three pieces: the top-bar control, the searchable picker, and the
   banner. The banner is the promise, so it is unmissable and calm —
   tokens only, no alarm red, legible in both themes, and it sits in its
   own row under the top bar where it can never cover content. */
.dr-stage .topbar-actas{font-weight:600}
.dr-stage .topbar-actas.rp-hover{background:var(--surface-3);border-color:var(--border-2);color:var(--text)}

.dr-stage .dr-bannerslot{flex:none;width:100%}
.dr-stage .dr-bannerslot:empty{display:none}
/* the calm banner: the accent surface, not the warning surface */
.dr-stage .imp-banner.is-calm{
  position:static;justify-content:flex-start;gap:10px;
  background:var(--accent-bg);color:var(--text);
  border-bottom:1px solid var(--accent-br,var(--border-2));
  padding:8px 20px;font-size:12.5px;font-weight:500;
}
.dr-stage .imp-banner.is-calm .team-avatar{flex:none}
.dr-stage .imp-banner-text{flex:1;min-width:0;line-height:1.4;border-radius:5px;padding:1px 4px;
  transition:background .2s}
.dr-stage .imp-banner-text strong{font-weight:700;color:var(--text)}
.dr-stage .imp-banner-text.rp-hover{background:var(--surface)}
.dr-stage .imp-banner.is-calm .imp-exit-btn{border:1px solid var(--border-2);background:var(--surface);
  color:var(--text);font-weight:600;transition:background .15s,border-color .15s}
.dr-stage .imp-banner.is-calm .imp-exit-btn.rp-hover{background:var(--surface-2);border-color:var(--text-3)}

/* the picker: a searchable list of active people, each with the two
   facts that tell them apart — their role and who they report to */
.dr-stage .dr-actas .modal{max-height:600px}
.dr-stage .dr-pickersearch{width:100%;margin-bottom:10px;color:var(--text);white-space:pre-wrap}
.dr-stage .dr-pickersearch .dr-ph{color:var(--text-3)}
.dr-stage .dr-pickerlist{max-height:320px;overflow:hidden}
.dr-stage .dr-pickerlist .tree-row{cursor:pointer}
.dr-stage .dr-pickerlist .tree-row.rp-hover{background:var(--surface-2)}

/* the history under an entry: the line that carries BOTH names */
.dr-stage .dr-actas-trail{margin:-2px 0 8px 12px;padding:6px 10px 2px;
  border-left:2px solid var(--border-2);border-radius:0 var(--radius) var(--radius) 0;
  background:var(--surface-2)}
.dr-stage .dr-actas-trail .ap-trail-row{border-radius:4px;padding:2px 4px;transition:background .2s}
.dr-stage .dr-actas-trail .ap-trail-row.rp-hover{background:var(--accent-bg)}
.dr-stage .dr-actas-trail .ap-trail-who{color:var(--text-2);font-weight:600}
.dr-stage .entry-row.rp-hover{background:var(--surface-2)}

/* ── 8. REDUCED MOTION ──────────────────────────────────────────────
   Every animation degrades to an instant readable state, the loop stops,
   and autoplay never starts. The engine also flattens every duration to
   zero, so this block only has to stop what CSS itself would animate. */
@media (prefers-reduced-motion:reduce){
  .dr-frame{transition:none;opacity:1;transform:none}
  .dr-mock,.dr-cap,.dr-req,.dr-req-tick,.dr-audit-pane,.dr-wheel,.dr-tag{transition:none}
  .dr-tag.is-away{transform:none}
  .dr-caret.is-on{animation:none;opacity:1}
  .dr-ring{display:none}
  .dr-req-tick path{transition:none;stroke-dashoffset:0}
  .dr-stage .rp-hit{transition:none}
  .dr-stage .dr-rc-row,.dr-stage .dr-rc-chart .cap-legend-row{transition:none}
  .dr-stage .alloc-history-row,.dr-stage .dr-rp-sech,.dr-stage .dr-rp-note,.dr-stage .dr-rp-cmt{transition:none}
  .dr-stage .q-paper-nav,.dr-stage .q-paper-count,.dr-stage .q-sig-block,.dr-stage .q-sig-line,
  .dr-stage .q-sign-card,.dr-stage .q-sign-card-prev .sig-cursive,.dr-stage .dr-radio{transition:none}
  .dr-stage .q-sig-panes,.dr-stage .q-sig-attest,.dr-stage .topbar-actas,.dr-stage .imp-banner-text,
  .dr-stage .imp-banner.is-calm .imp-exit-btn,.dr-stage .dr-actas-trail .ap-trail-row,
  .dr-stage .entry-row{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   9. MIRRORED APP RULES
   The app scopes 181 of its rules to element IDs — #view-calendar,
   #dash-wrap, #fund-blocks, #approvals-wrap. An id may exist once in a
   document and all four already exist in the demo page, so the stage
   cannot reuse them. Every one of those rules is reproduced below
   against a class instead (.dr-vcal, .dr-dashwrap, .dr-fundblocks,
   .dr-apwrap) so a mock built with the app's class names renders exactly
   as the product does. Declarations are unchanged; only the selector is.
   Regenerate from css/styles.css + css/audit-additions.css if those
   ID-scoped blocks ever move.
   ═══════════════════════════════════════════════════════════════════ */
.dr-stage .dr-vcal .cal-header{align-items:center;margin-bottom:16px;gap:12px}
.dr-stage .dr-vcal .cal-title{flex-direction:row;align-items:center;gap:10px}
.dr-stage .dr-vcal .cal-title-main{font-size:20px;line-height:1.3;font-weight:600; letter-spacing:-.015em;color:var(--text)}
.dr-stage .dr-vcal .cal-title-nums,
.dr-stage .dr-vcal .cal-missing-btn,
.dr-stage .dr-vcal .cal-title .ui-period,
.dr-stage .dr-vcal .cal-title .ui-asof{display:none}
.dr-stage .dr-vcal .cal-controls{gap:6px}
.dr-stage .dr-vcal .month-nav-label{min-width:124px;font-size:13.5px;font-weight:600; color:var(--text);letter-spacing:-.01em; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.dr-stage .dr-vcal .cal-nav-btn{width:30px;height:30px;border-radius:var(--radius); border-color:var(--border);box-shadow:var(--shadow-1)}
.dr-stage .dr-vcal .cal-nav-btn:hover{background:var(--surface-2);border-color:var(--border-2);color:var(--text)}
.dr-stage .dr-vcal .cal-today-btn{height:30px;font-weight:600;border-color:var(--border); box-shadow:var(--shadow-1)}
.dr-stage .dr-vcal .cal-today-btn:hover{background:var(--accent-bg);border-color:var(--accent-br); color:var(--accent-ink)}
.dr-stage .dr-vcal .cal-grid-wrap{background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow:hidden}
.dr-stage .dr-vcal .cal-dow-row{background:var(--surface-2);padding:9px 0; border-bottom:1px solid var(--border)}
.dr-stage .dr-vcal .cal-dow{font-size:11px;line-height:1;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3)}
.dr-stage .dr-vcal .cal-dow-quota{letter-spacing:.06em}
.dr-stage .dr-vcal .cal-cell{background:var(--surface); transition:background .15s var(--ease,ease)}
.dr-stage .dr-vcal .cal-cell:hover{background:var(--surface-2)}
.dr-stage .dr-vcal .cal-cell.weekend-cell{background:var(--surface-2)}
.dr-stage .dr-vcal .cal-cell.weekend-cell:hover{background:var(--surface-3)}
.dr-stage .dr-vcal .cal-cell.other-month{opacity:1;background:var(--surface-2)}
.dr-stage .dr-vcal .cal-cell.other-month .cal-day-num{color:var(--text-3);font-weight:500}
.dr-stage .dr-vcal .cal-cell.other-month .cal-tot-act{color:var(--text-3);font-weight:500}
.dr-stage .dr-vcal .cal-day-num{font-size:12.5px;font-weight:600;color:var(--text); font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.dr-stage .dr-vcal .cal-cell.today::before{background:var(--accent);border-radius:0 2px 2px 0}
.dr-stage .dr-vcal .cal-cell.selected{background:var(--accent-bg); box-shadow:inset 0 0 0 2px var(--accent)}
.dr-stage .dr-vcal .cal-cell.today .cal-day-num,
.dr-stage .dr-vcal .cal-cell.selected .cal-day-num{background:var(--ink);color:var(--on-ink); border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.dr-stage .dr-vcal .cal-cell.day-complete{border-top:2px solid var(--ok)}
.dr-stage .dr-vcal .cal-cell.day-incomplete{border-top:2px solid var(--warn)}
.dr-stage .dr-vcal .cal-cell.day-over{border-top:2px solid var(--danger)}
.dr-stage .dr-vcal .cal-cell.cal-day-missing{border-top:2px dashed var(--warn); background:var(--warn-bg)}
.dr-stage .dr-vcal .cal-cell.cal-day-missing:hover{background:var(--warn-bg)}
.dr-stage .dr-vcal .day-total-badge{font-size:11.5px;line-height:1; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.dr-stage .dr-vcal .cal-tot-act{color:var(--text);font-weight:600}
.dr-stage .dr-vcal .cal-tot-sep,
.dr-stage .dr-vcal .cal-tot-guide{color:var(--text-3);font-weight:450}
.dr-stage .dr-vcal .cal-bar{height:3px;border-radius:2px;gap:2px;margin:2px 0 3px}
.dr-stage .dr-vcal .cal-entries{gap:3px}
.dr-stage .dr-vcal .cal-entry-pill{gap:5px;min-height:20px;padding:1px 5px; border-radius:6px;background:var(--surface-2);border:1px solid var(--border)}
.dr-stage .dr-vcal .cal-entry-pill.cal-pill-fund{border-left-width:1px; border-left-style:solid;border-left-color:var(--border)}
.dr-stage .dr-vcal .cal-entry-pill .fund-chip{width:15px;height:15px;font-size:9px; border-radius:4px;letter-spacing:0}
.dr-stage .dr-vcal .cal-entry-pill .pill-fund{flex:1 1 auto;min-width:0;font-size:11px; font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-stage .dr-vcal .cal-entry-pill .pill-hrs{flex:none;font-size:11px;font-weight:600; color:var(--text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.dr-stage .dr-vcal .cal-entry-pill.leave-pill{background:var(--leave-bg); border-color:var(--leave-br)}
.dr-stage .dr-vcal .cal-entry-pill.leave-pill .pill-fund{color:var(--leave)}
.dr-stage .dr-vcal .cal-entry-pill.cal-pill-pending{opacity:1;border-style:dashed}
.dr-stage .dr-vcal .cal-entry-pill.cal-pill-rejected{border-style:solid}
.dr-stage .dr-vcal .cal-more-btn{font-size:11px;font-weight:600;color:var(--text-3)}
.dr-stage .dr-vcal .cal-more-btn:hover{color:var(--accent-ink);text-decoration:none}
.dr-stage .dr-vcal .cal-add-btn{border-radius:5px}
.dr-stage .dr-vcal .cal-missing{font-size:10.5px;font-weight:600;letter-spacing:.02em}
.dr-stage .dr-vcal .cal-week{background:var(--surface-2);position:relative;gap:1px}
.dr-stage .dr-vcal .cal-week:hover{background:var(--surface-3)}
.dr-stage .dr-vcal .cal-week.sel-week{background:var(--accent-bg)}
.dr-stage .dr-vcal .cal-week.sel-week::before{content:'';position:absolute;left:0;top:0;bottom:0; width:3px;background:var(--accent);border-radius:0 2px 2px 0}
.dr-stage .dr-vcal .cal-week-posted{font-size:13px;font-weight:600;color:var(--text); letter-spacing:-.01em}
.dr-stage .dr-vcal .cal-week-quota{font-size:10.5px;font-weight:500;color:var(--text-3)}
.dr-stage .dr-vcal .cal-week-set{font-size:9.5px;letter-spacing:.06em; background:var(--accent-bg);color:var(--accent-ink);border-radius:4px}
.dr-stage .dr-vcal .cal-week-gear{border-radius:5px;border-color:var(--border); background:var(--surface);color:var(--text-3)}
.dr-stage .dr-vcal .cal-week-gear:hover{color:var(--accent-ink);border-color:var(--accent-br); background:var(--surface)}
.dr-stage .dr-vcal .cal-legend{gap:14px;margin-top:10px;padding:0 2px}
.dr-stage .dr-vcal .cal-key{font-size:11.5px;font-weight:450;color:var(--text-3);gap:6px}
.dr-stage .dr-vcal .cal-key-dot{width:8px;height:8px;border-radius:3px;flex:none}
.dr-stage .dr-vcal .entries-panel{background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:16px 16px 8px}
.dr-stage .dr-vcal .entries-panel-header{margin-bottom:12px;gap:12px}
.dr-stage .dr-vcal .cal-day-name{font-size:17px;line-height:1.3;font-weight:600; letter-spacing:-.015em;color:var(--text)}
.dr-stage .dr-vcal .cal-day-step{width:26px;height:26px;border-color:var(--border); border-radius:var(--radius);box-shadow:var(--shadow-1)}
.dr-stage .dr-vcal .cal-day-step:hover{background:var(--surface-2);border-color:var(--border-2);color:var(--text)}
.dr-stage .dr-vcal .cal-day-stat{font-size:13.5px;font-weight:600;color:var(--text-3); padding-left:2px}
.dr-stage .dr-vcal .cal-day-stat .cal-tot-act{color:var(--text)}
.dr-stage .dr-vcal .entry-row{min-height:52px;gap:10px;padding:8px 12px; border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px; background:var(--surface);transition:background .15s var(--ease,ease),box-shadow .15s var(--ease,ease)}
.dr-stage .dr-vcal .entry-row:hover{background:var(--surface-2)}
.dr-stage .dr-vcal .entry-row:focus-visible{box-shadow:inset 0 0 0 2px var(--brand)}
.dr-stage .dr-vcal .entry-activity{font-size:15px;line-height:1.35;font-weight:600; letter-spacing:-.01em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-stage .dr-vcal .entry-desc{font-size:11.5px;line-height:1.4;color:var(--text-3);margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-stage .dr-vcal .entry-dur{font-size:15px;line-height:1;font-weight:600;color:var(--text); font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.dr-stage .dr-vcal .entry-del{font-size:11.5px;font-weight:600;border-radius:var(--radius)}
.dr-stage .dr-vcal .cal-fund-item{display:inline-flex;align-items:center;gap:8px; min-width:0;max-width:210px;padding:0;background:transparent;border:0}
.dr-stage .dr-vcal .cal-fund-item .cal-fund-name{font-size:13.5px;line-height:1.35; font-weight:600;letter-spacing:-.01em;color:var(--text-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-stage .dr-vcal .cal-fund-item.leave-tag .cal-fund-name{color:var(--leave)}
.dr-stage .dr-vcal .ui-empty-body{display:none}
.dr-stage .dr-vcal .cal-month-empty{padding:16px}
[data-theme=dark] .dr-stage .dr-vcal .cal-entry-pill .fund-chip{background:transparent;border-width:1px}
[data-theme=dark] .dr-stage .dr-vcal .cal-fund-item .fund-chip{background:transparent;border-width:1px}
[data-theme=dark] .dr-stage .dr-vcal .cal-cell.cal-day-missing,
[data-theme=dark] .dr-stage .dr-vcal .cal-cell.cal-day-missing:hover{background:var(--warn-bg)}
.dr-stage .dr-fundblocks{margin-bottom:12px}
.dr-stage .dr-fundblocks .ui-acc-value{flex:none;display:inline-flex;align-items:center}
.dr-stage .dr-fundblocks .ui-acc-body{padding:14px}
.dr-stage .dr-fundblocks .ui-acc-item.is-open{margin:10px}
.dr-stage .dr-fundblocks .fund-block{background:transparent;border:0;border-radius:0; padding:0;margin:0}
.dr-stage .dr-fundblocks .fund-block .ent-cap:first-of-type{margin-top:0}
.dr-stage .dr-fundblocks .fb-head{margin:0 0 10px}
.dr-stage .dr-fundblocks .fb-head .blk-seg{flex:1;max-width:none;margin:0}
.dr-stage .dr-fundblocks .ui-acc-lead{width:24px}
.dr-stage .dr-fundblocks .ui-acc-lead .fund-chip{width:20px;height:20px}
.dr-stage .dr-apwrap>.ui-acc{margin-top:4px}
.dr-stage .dr-apwrap .ui-acc-body .ap-card,
.dr-stage .dr-apwrap .ui-acc-body .ap-tblw{background:transparent;border:0;box-shadow:none}
.dr-stage .dr-dashwrap .dash-header{align-items:center;margin-bottom:14px}
.dr-stage .dr-dashwrap .dash-head-main{gap:0}
.dr-stage .dr-dashwrap .dash-actions{gap:10px}
.dr-stage .dr-dashwrap .print-btn{height:32px}
.dr-stage .dr-dashwrap .print-btn svg{width:15px;height:15px;flex:none}
.dr-stage .dr-dashwrap .ui-vt{display:inline-flex;align-items:center;gap:2px;height:28px;padding:2px;flex:none; background:var(--surface-3);border-radius:999px}
.dr-stage .dr-dashwrap .ui-vt-seg{height:22px;padding:0 12px;border:0;border-radius:999px;background:transparent; font-family:var(--font);font-size:12px;font-weight:600;color:var(--text-3);cursor:pointer; transition:background .15s,color .15s}
.dr-stage .dr-dashwrap .ui-vt-seg:hover{color:var(--text)}
.dr-stage .dr-dashwrap .ui-vt-seg.is-active,
.dr-stage .dr-dashwrap .ui-vt-seg[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}
.dr-stage .dr-dashwrap .ui-vt-seg:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.dr-stage .dr-dashwrap .dash-rail{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px; padding:0 0 14px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.dr-stage .dr-dashwrap .ui-range{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}
.dr-stage .dr-dashwrap .ui-range-rail{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.dr-stage .dr-dashwrap .ui-range-seg{position:relative;height:28px;padding:0 10px;border:0;background:transparent; font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--text-3);cursor:pointer; border-radius:var(--radius);transition:color .15s,background .15s}
.dr-stage .dr-dashwrap .ui-range-seg:hover{color:var(--text);background:var(--surface-2)}
.dr-stage .dr-dashwrap .ui-range-seg.is-active,
.dr-stage .dr-dashwrap .ui-range-seg[aria-pressed=true]{color:var(--text)}
.dr-stage .dr-dashwrap .ui-range-seg.is-active::after,
.dr-stage .dr-dashwrap .ui-range-seg[aria-pressed=true]::after{content:"";position:absolute;left:9px;right:9px;bottom:1px;height:2px;border-radius:2px; background:var(--accent)}
.dr-stage .dr-dashwrap .ui-range-seg:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.dr-stage .dr-dashwrap .ui-range-custom{display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.dr-stage .dr-dashwrap .ui-range-custom[hidden]{display:none!important}
.dr-stage .dr-dashwrap .ui-range-start,
.dr-stage .dr-dashwrap .ui-range-end{height:28px;padding:0 8px; border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface-2); color:var(--text);font-family:var(--font);font-size:12px;font-variant-numeric:tabular-nums}
.dr-stage .dr-dashwrap .ui-range-start:focus,
.dr-stage .dr-dashwrap .ui-range-end:focus{outline:none; border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.dr-stage .dr-dashwrap .ui-range-to{font-size:11.5px;color:var(--text-3)}
.dr-stage .dr-dashwrap .ui-range-dates{margin-left:auto;font-size:12.5px;color:var(--text-3); font-variant-numeric:tabular-nums}
.dr-stage .dr-dashwrap .ui-range-dates .ui-period{font-size:12.5px;color:var(--text-3)}
.dr-stage .dr-dashwrap .dash-primary{display:grid; grid-template-columns:minmax(210px,262px) minmax(0,1fr); align-items:stretch;gap:20px 34px;background:var(--surface); border-radius:var(--radius-xl);box-shadow:var(--shadow-2); padding:22px 24px;margin-bottom:22px}
.dr-stage .dr-dashwrap .dash-primary-l{display:flex;flex-direction:column;align-items:flex-start; gap:20px;min-width:0}
.dr-stage .dr-dashwrap .dash-primary-r{display:flex;flex-direction:column;min-width:0; justify-content:center}
.dr-stage .dr-dashwrap .dash-slab{align-self:stretch}
.dr-stage .dr-dashwrap .dash-dist{min-width:0;width:100%}
.dr-stage .dr-dashwrap .dash-donut{margin-top:10px;width:100%;max-width:210px}
.dr-stage .dr-dashwrap .dash-donut svg{display:block;width:100%;height:auto}
.dr-stage .dr-dashwrap .dash-eyebrow{display:block;font-size:11px;line-height:1;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.dr-stage .dr-dashwrap .dash-eyebrow-top{margin-bottom:8px}
.dr-stage .dr-dashwrap .dash-list-card{background:none;border:0;border-radius:0; box-shadow:none;padding:0;margin:0}
.dr-stage .dr-dashwrap .dash-list-card{flex:1 1 auto;display:flex;flex-direction:column}
.dr-stage .dr-dashwrap .dash-list-card .cap-legend{margin-top:0;flex:1 1 auto}
.dr-stage .dr-dashwrap .dash-list-card .cap-legend-row{flex:1 1 auto;min-height:48px;max-height:74px;gap:11px}
.dr-stage .dr-dashwrap .dash-list-card .cap-legend-row:first-child{border-top:0}
.dr-stage .dr-dashwrap .cap-legend-wide .cap-legend-name{flex:0 0 auto;width:222px;max-width:52%}
.dr-stage .dr-dashwrap .cap-legend-share{flex:1 1 auto;min-width:48px;max-width:300px;height:6px; border-radius:3px;background:var(--surface-3);overflow:hidden;margin:0 4px}
.dr-stage .dr-dashwrap .cap-legend-share > i{display:block;height:100%;border-radius:3px; background:var(--seg,var(--brand))}
.dr-stage .dr-dashwrap .dash-funds-head{display:flex;align-items:center;justify-content:space-between; gap:12px;min-height:28px;margin-bottom:8px}
.dr-stage .dr-dashwrap .dash-funds-head .dash-eyebrow-top{margin-bottom:0}
.dr-stage .dr-dashwrap .dash-tgt-toggle{display:inline-flex;align-items:center;gap:8px;flex:none; height:28px;padding:0 11px 0 8px;border:1px solid var(--border);border-radius:999px; background:var(--surface-2);font-family:var(--font);font-size:12px;font-weight:600; color:var(--text-3);cursor:pointer;white-space:nowrap; transition:background .15s,color .15s,border-color .15s}
.dr-stage .dr-dashwrap .dash-tgt-toggle:hover{color:var(--text);border-color:var(--border-2)}
.dr-stage .dr-dashwrap .dash-tgt-toggle[aria-pressed=true]{background:var(--accent-bg); border-color:var(--accent-br);color:var(--accent-ink)}
.dr-stage .dr-dashwrap .dash-tgt-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dr-stage .dr-dashwrap .dash-tgt-track{position:relative;flex:none;width:24px;height:14px; border-radius:999px;background:var(--surface-3);border:1px solid var(--border-2); transition:background .15s,border-color .15s}
.dr-stage .dr-dashwrap .dash-tgt-track > i{position:absolute;top:1px;left:1px;width:10px;height:10px; border-radius:50%;background:var(--text-3);transition:transform .15s,background .15s}
.dr-stage .dr-dashwrap .dash-tgt-toggle[aria-pressed=true] .dash-tgt-track{background:var(--accent); border-color:var(--accent)}
.dr-stage .dr-dashwrap .dash-tgt-toggle[aria-pressed=true] .dash-tgt-track > i{transform:translateX(10px); background:var(--surface)}
.dr-stage .dr-dashwrap .dash-tgt-note{display:block;font-size:11.5px;line-height:1.4; color:var(--text-3);margin:-2px 0 8px}
.dr-stage .dr-dashwrap .cap-legend-meter{flex:1 1 auto;min-width:48px;max-width:300px;margin:0 4px}
.dr-stage .dr-dashwrap .cap-legend-meter .ui-meter-track{display:block;height:6px;border-radius:3px}
.dr-stage .dr-dashwrap .cap-legend-meter .ui-meter-fill{border-radius:3px}
.dr-stage .dr-dashwrap .cap-legend-meter .ui-meter-tick{top:-3px;height:12px;width:2px; border-radius:1px;background:var(--text-2);opacity:.9}
.dr-stage .dr-dashwrap .cap-legend-vals{flex:none;display:flex;flex-direction:column; align-items:flex-end;gap:3px;min-width:0}
.dr-stage .dr-dashwrap .cap-legend-tgt{display:inline-flex;align-items:center;gap:6px; white-space:nowrap;font-size:11.5px;font-variant-numeric:tabular-nums}
.dr-stage .dr-dashwrap .cap-legend-tgt-cap{font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3)}
.dr-stage .dr-dashwrap .cap-legend-tgt-val{font-weight:600;color:var(--text-2)}
.dr-stage .dr-dashwrap .cap-legend-tgt .ui-diff{font-size:11.5px}
.dr-stage .dr-dashwrap .dash-list-empty{padding:0}
.dr-stage .dr-dashwrap .dash-primary.is-bare{align-items:center}
.dr-stage .dr-dashwrap .fund-chip{background:var(--fc-bg,var(--surface-3));color:var(--fc,var(--text-2)); border:1px solid var(--fc-br,transparent)}
[data-theme=dark] .dr-stage .dr-dashwrap .fund-chip{background:var(--fc-bg-d,var(--fc-bg));color:#fff; border-color:transparent}
.dr-stage .dr-dashwrap .cap-bar-seg{flex:0 1 auto}
.dr-stage .dr-dashwrap .stat-card{box-shadow:var(--shadow-1)}
.dr-stage .dr-dashwrap .dash-card-head{min-height:18px}
.dr-stage .dr-dashwrap .dash-card-head .dash-partial,
.dr-stage .dr-dashwrap .dash-card-head .dash-closed{flex:none}
.dr-stage .dr-dashwrap .dash-fund-card{border-top:3px solid var(--fund,var(--brand)); border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);padding-top:12px}
.dr-stage .dr-dashwrap .dash-fund-label{display:flex;align-items:center;gap:7px;min-width:0}
.dr-stage .dr-dashwrap .dash-fund-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-stage .dr-dashwrap .dash-fund-tag{gap:7px}
.dr-stage .dr-dashwrap .dash-leave-toggle{display:flex;align-items:center;gap:7px;cursor:pointer;min-width:100px}
.dr-stage .dr-dashwrap .dash-leave-toggle input{width:14px;height:14px;cursor:pointer;accent-color:var(--accent)}
.dr-stage .dr-dashwrap .dash-leave-toggle span{font-size:12px;color:var(--text)}
.dr-stage .dr-dashwrap .dash-cmp-sel{cursor:pointer;min-width:150px}
.dr-stage .dr-dashwrap .dash-filter-foot{display:flex;align-items:center;gap:8px;height:32px}
.dr-stage .dr-dashwrap .dash-reset-btn{padding:7px 14px}
.dr-stage .dr-dashwrap .dash-blocks .cap-bar{margin-top:4px}
.dr-stage .dr-dashwrap .dash-blocks .cap-legend-row{min-height:38px}
.dr-stage .dr-dashwrap .dash-blocks .cap-legend-name{font-size:13.5px}
.dr-stage .dr-dashwrap .dash-off-card{margin-bottom:20px}
.dr-stage .dr-dashwrap .dash-off-body{padding:6px 16px 12px}
.dr-stage .dr-dashwrap .dash-log{margin-bottom:20px}
.dr-stage .dr-dashwrap .ui-empty-body{display:none}

/* ── the hours drag track, replayed ──────────────────────────────────
   css/styles.css §5 paints .hb-range entirely through
   ::-webkit-slider-runnable-track and ::-webkit-slider-thumb, and those
   pseudo-elements only exist on a real <input type="range">. The mock
   cannot use a live input (a scene never takes real input), so the rail
   and thumb are rebuilt here on the span, from the SAME tokens and the
   same 6px / 20px geometry, driven by the --pct the scene already sets.
   Product parity, drawn by hand only because the pseudo-element cannot
   attach. Scoped to .dr so the app's own slider is untouched. */
.dr .hb-range{position:relative;display:block;width:100%;height:26px;
  background:transparent;cursor:pointer}
.dr .hb-range::before{content:"";position:absolute;left:0;right:0;top:10px;
  height:6px;border-radius:3px;
  background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--pct,100%),
    var(--surface-3) var(--pct,100%),var(--surface-3) 100%)}
.dr .hb-range.ot::before{
  background:linear-gradient(to right,var(--warn) 0,var(--warn) var(--pct,100%),
    var(--surface-3) var(--pct,100%),var(--surface-3) 100%)}
.dr .hb-range::after{content:"";position:absolute;top:3px;
  left:calc(10px + (100% - 20px) * var(--pctf,1));
  width:20px;height:20px;margin-left:-10px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border-2);
  box-shadow:var(--shadow-1)}
.dr .hb-range.ot::after{border-color:var(--warn-br)}

/* ── the hours slider's grab point ──────────────────────────────────
   The app draws the thumb as a ::-webkit-slider-thumb pseudo-element and
   keeps the value bubble pointer-events:none, so neither can be found
   under the cursor. This transparent disc sits exactly where the thumb
   is painted (20px, centred on the track line, left = 10px + (w-20)·f):
   the drag grabs it, and probe() resolves onto it. */
.dr-stage .dr-hb-thumb{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;background:transparent}