/*
 * Quota, redesigned (owner approved the canvas HMaMxgpjkjmb4oMZraBFea):
 * js/ui/quota-v2.js + quota-v2-plan.js. Phone first; one column up to 520px
 * on wider screens. Every timeline is one cell per hour, every hour
 * labelled; shifts are blocks laid over the cells.
 */

.qv2-modal .qv2-content {
  width: min(520px, 100vw); max-width: 520px; height: min(92vh, 920px);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: #f8fafc; color: #0f172a; border-radius: 18px; position: relative;
}
@media (max-width: 560px) {
  .qv2-modal .qv2-content { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
.qv2-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #ffffff; border-bottom: 1px solid #e2e8f0; flex: none; }
.qv2-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.qv2-titles h2 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; }
.qv2-titles span { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qv2-iconbtn { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #e2e8f0; background: #ffffff; color: #475569; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: inherit; font-size: 20px; }
.qv2-iconbtn:focus-visible, .qv2-btn:focus-visible, .qv2-chip:focus-visible, .qv2-listrow:focus-visible, .qv2-radio:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.qv2-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.qv2-pad { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 28px; }
.qv2-loading { padding: 32px 0; text-align: center; color: #64748b; font-size: 14px; }
.qv2-muted { font-size: 12px; font-weight: 500; line-height: 1.45; color: #64748b; }
.qv2-muted.is-center { text-align: center; }
.qv2-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #0f766e; }

/* Cards, notes, sections */
.qv2-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border-radius: 16px; border: 1px solid #e2e8f0; background: #ffffff; min-width: 0; }
.qv2-card > b { font-size: 13.5px; padding: 0 2px; }
.qv2-card.is-teal { border-color: #99f6e4; background: #f0fdfa; }
.qv2-card.is-amber { border-color: #fde68a; background: #fffbeb; }
.qv2-card.is-amber > b { color: #78350f; }
.qv2-card.is-teal > b { color: #134e4a; }
.qv2-card > span { font-size: 12.5px; line-height: 1.45; color: #334155; }
.qv2-cardtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 2px; flex-wrap: wrap; }
.qv2-cardtop b { font-size: 13px; }
.qv2-bigline { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.qv2-bigline strong { font-size: 20px; line-height: 1.2; }
.qv2-bigline span { font-size: 12.5px; color: #475569; }
.qv2-note { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; }
.qv2-note.is-ok { border: 1px solid #99f6e4; background: #f0fdfa; color: #134e4a; }
.qv2-note.is-warn { border: 1px solid #fde68a; background: #fffbeb; color: #78350f; }
.qv2-sechead { display: flex; justify-content: space-between; align-items: baseline; }
.qv2-sechead h3 { margin: 0; font-size: 15px; font-weight: 800; }

/* Buttons, chips, fields */
.qv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin: 0; padding: 0 14px; border-radius: 14px; border: 1px solid #cbd5e1; background: #ffffff; color: #334155; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.qv2-btn.is-primary { min-height: 52px; border: 0; background: #0f766e; color: #ffffff; font-size: 15px; font-weight: 800; box-shadow: 0 6px 16px rgba(15, 118, 110, .25); }
.qv2-btn.is-primary[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.qv2-btn.is-amber { border-color: #d97706; background: #fffbeb; color: #92400e; font-weight: 800; }
.qv2-btn.is-teal { border-color: #0f766e; background: #ccfbf1; color: #0f766e; font-weight: 800; }
.qv2-btn.is-dashed { min-height: 52px; border: 1.5px dashed #0f766e; background: #f0fdfa; color: #0f766e; font-weight: 800; }
.qv2-btn.is-danger-quiet { border: 0; background: none; color: #b91c1c; min-height: 44px; }
.qv2-btn.is-small { width: auto; min-height: 40px; font-size: 13px; border-radius: 10px; }
.qv2-link { min-height: 40px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: #0f766e; cursor: pointer; }
.qv2-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.qv2-chips.is-days { flex-wrap: nowrap; }
.qv2-chip { min-width: 44px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid #cbd5e1; background: #ffffff; color: #334155; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.qv2-chip.is-on { border: 1.5px solid #0f766e; background: #ccfbf1; color: #0f766e; font-weight: 800; }
.qv2-chip.is-day { width: 44px; padding: 0; flex: 1 1 0; min-width: 0; }
.qv2-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: #475569; min-width: 0; }
.qv2-field.is-grow { flex: 1 1 auto; }
.qv2-field input[type="text"], .qv2-field input[type="time"] { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid #cbd5e1; background: #ffffff; font: inherit; font-size: 15px; font-weight: 600; color: #0f172a; box-sizing: border-box; width: 100%; }
.qv2-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #475569; }
.qv2-inline input { width: 64px; min-height: 40px; padding: 0 8px; border-radius: 10px; border: 1px solid #cbd5e1; font: inherit; font-size: 14px; text-align: center; }
.qv2-namerow { display: flex; gap: 10px; align-items: flex-end; }
.qv2-colors { display: flex; gap: 6px; padding-bottom: 8px; }
.qv2-color { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; }
.qv2-color.is-on { border: 3px solid #ffffff; outline: 2px solid #0f766e; }
.qv2-times { display: flex; gap: 10px; }
.qv2-rule { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #0f172a; }
.qv2-times .qv2-field { flex: 1 1 0; font-weight: 600; color: #64748b; font-size: 11px; }
.qv2-radio { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid #e2e8f0; background: #ffffff; font: inherit; color: #0f172a; text-align: left; cursor: pointer; }
.qv2-radio > i { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid #cbd5e1; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.qv2-radio.is-on { border: 1.5px solid #0f766e; background: #f0fdfa; }
.qv2-radio.is-on > i { border-color: #0f766e; }
.qv2-radio.is-on > i::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #0f766e; }
.qv2-radio > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qv2-radio b { font-size: 14px; }
.qv2-radio span span { font-size: 12.5px; line-height: 1.4; color: #475569; font-weight: 400; }
.qv2-radio em { font-style: normal; font-size: 12.5px; color: #64748b; font-weight: 500; }
.qv2-radios { display: flex; flex-direction: column; gap: 8px; }
.qv2-minis { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.qv2-mini { padding: 3px 7px; border-radius: 7px; background: #f1f5f9; font-size: 11.5px; color: #334155; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qv2-mini b { font-weight: 700; }

/* List rows */
.qv2-listrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid #e2e8f0; background: #ffffff; font: inherit; color: #0f172a; text-align: left; cursor: pointer; }
.qv2-listrow > svg { flex: none; color: #94a3b8; }
.qv2-listtext { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.qv2-listtext b { font-size: 14px; }
.qv2-listtext b em { font-style: normal; font-weight: 600; color: #0f766e; font-variant-numeric: tabular-nums; }
.qv2-listtext span { font-size: 12.5px; color: #475569; }
.qv2-swatch { flex: none; width: 12px; height: 40px; border-radius: 6px; }

/* ── Set up in three questions (approved plan, stage 2) ─────────────────── */
.qv2-steps { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; font-weight: 700; color: #475569; }
.qv2-stp { display: inline-flex; align-items: center; gap: 5px; }
.qv2-stp em { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font-size: 10.5px; box-sizing: border-box; }
.qv2-stp.is-on { color: #0f172a; }
.qv2-stp.is-on em { background: #0d9488; border-color: #0d9488; color: #ffffff; }
.qv2-stp.is-done { color: #0f766e; }
.qv2-stp.is-done em { background: #ccfbf1; border-color: #0d9488; }
.qv2-stpsep { color: #64748b; }
.qv2-q { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: #0f172a; }
.qv2-lead { font-size: 12.5px; line-height: 1.45; color: #334155; margin-top: -8px; }
.qv2-suglist { display: flex; flex-direction: column; gap: 4px; }
.qv2-sug { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 10px; background: #f0fdfa; border: 1px solid #ccfbf1; }
.qv2-sug b { font-size: 12.5px; color: #0f172a; }
.qv2-sug b em { font-style: normal; font-weight: 700; color: #0f766e; font-variant-numeric: tabular-nums; }
.qv2-sug span { font-size: 11.5px; color: #334155; }
.qv2-cv { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #eef2f6; }
.qv2-cv:first-of-type { border-top: 0; }
.qv2-okw { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11.5px; font-weight: 800; color: #15803d; white-space: nowrap; }
.qv2-shortw { flex: none; font-size: 11.5px; font-weight: 800; color: #9a3412; white-space: nowrap; }
.qv2-prow2 { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #eef2f6; }
.qv2-prow2:first-child { border-top: 0; padding-top: 0; }
.qv2-prow2 .qv2-listtext .is-warn { color: #9a3412; font-weight: 700; }
.qv2-savedline { min-height: 0; font-size: 12px; font-weight: 800; color: #0f766e; text-align: center; }
.qv2-savedline.is-on { min-height: 16px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.qv2-plus1 { font-size: 10px; font-weight: 800; color: #9a3412; background: #fff7ed; border-radius: 6px; padding: 1px 5px; }
body.dark-mode .qv2-q, body.dark-mode .qv2-stp.is-on, body.dark-mode .qv2-sug b { color: #e2e8f0; }
body.dark-mode .qv2-lead, body.dark-mode .qv2-steps, body.dark-mode .qv2-sug span { color: #cbd5e1; }
body.dark-mode .qv2-sug { background: rgba(20, 184, 166, .10); border-color: rgba(94, 234, 212, .3); }
body.dark-mode .qv2-cv, body.dark-mode .qv2-prow2 { border-color: #334155; }

/* ── Hour strips, drawn like the board (approved plan, rounds 3-6) ──────────
   One cell per hour with a 1px divider between every hour; the numbers in ONE
   row along the bottom of the cells, 24-hour numerals, all one size (10px/700,
   as the board), each on the line where its hour starts, both ends; section
   names in a lane ABOVE the cells. Colours: the board's Availability cells for
   a person's day, the team bar's for how covered an hour is. Pale cells get a
   fine edge so each reads as its own tile. */
.qv2-strip { position: relative; padding: 0 6px; }
.qv2-lane { position: relative; height: 15px; margin-bottom: 2px; }
.qv2-ls { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 1px; box-sizing: border-box; }
.qv2-ls b { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; font-size: 10px; font-weight: 800; line-height: 1.1; color: #0f172a; white-space: nowrap; overflow: hidden; }
.qv2-ls::after { content: ''; align-self: stretch; margin-top: 2px; border-top: 2px solid #0f766e; border-radius: 1px; }
.qv2-ls.draft::after, .qv2-ls.range::after { border-top-style: dashed; }
.qv2-ls.open b, .qv2-ls.asked b, .qv2-ls.cover b { color: #92400e; }
.qv2-ls.open::after { border-top-color: #d97706; }
.qv2-ls.asked::after, .qv2-ls.cover::after { border-top: 2px dashed #d97706; }
.qv2-ls.other b { color: #1e293b; font-weight: 700; }
.qv2-ls.other::after { border-top: 2px solid #64748b; }
.qv2-ls.this::after { border-top-width: 3px; }
.qv2-track { position: relative; height: 26px; }
.qv2-track.is-tall { height: 32px; }
.qv2-cells { display: grid; grid-template-columns: repeat(var(--qv2-hours, 24), minmax(0, 1fr)); gap: 1px; height: 100%; }
.qv2-c { display: block; border-radius: 2px; background: #d9e1ea; }
.qv2-c.c-n, .qv2-c.c-e, .qv2-c.c-d { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .16); }
.c-w { background: #76db9b; }   /* their hours (Availability: free) */
.c-o { background: #fcd56e; }   /* outside their hours (flex) */
.c-s { background: #6630c6; }   /* asleep */
.c-d { background: #b6c2d1; }   /* day off */
.c-b { background: #e55e5e; }   /* busy in their calendar */
.c-n { background: #d9e1ea; }   /* no shift */
.c-e { background: #cdd6e1; }   /* another shift */
.c-t { background: #99f6e4; }   /* this shift / a shift at a set time */
.c-r { background: #ccfbf1; }   /* any time in a range */
.c-g { background: #34ca6b; }   /* covered (team bar: everyone) */
.c-y { background: #fcd36a; }   /* some of the people */
.c-x { background: #8391a4; }   /* nobody yet */
.c-bin { background: #0f766e; } /* week bar: inside their hours */
.c-bout { background: #d97706; }/* week bar: outside their hours */
.qv2-nums { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.qv2-nums span { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: 10px; font-weight: 700; line-height: 1; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qv2-nums span.on-dark { color: #ffffff; }
.qv2-frame { position: absolute; top: -2px; bottom: -2px; box-sizing: border-box; border: 2px solid #0f766e; border-radius: 5px; pointer-events: none; z-index: 3; }
.qv2-vline { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1.5px dashed #0d9488; pointer-events: none; z-index: 3; }
.qv2-mark { position: absolute; bottom: 3px; transform: translateX(-50%); line-height: 0; z-index: 3; pointer-events: none; }
.qv2-mark svg { width: 12px; height: 12px; filter: drop-shadow(0 0 1px #ffffff); }
.qv2-tap { position: absolute; top: 0; bottom: 0; z-index: 4; margin: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.qv2-tap:hover { background: rgba(15, 118, 110, .08); }
.qv2-tap:focus-visible { outline: 2px solid #0f766e; outline-offset: 1px; }
.qv2-editstrip { padding: 6px 0; }
/* The handles stop above the number row, so the shift's start and end hours stay readable. */
.qv2-handle { position: absolute; top: -5px; bottom: 13px; width: 14px; margin-left: -7px; border-radius: 7px; background: #0f766e; box-shadow: 0 2px 6px rgba(15, 118, 110, .4); cursor: ew-resize; touch-action: none; z-index: 5; }
.qv2-handle::before { content: ''; position: absolute; inset: -8px -12px; }
.qv2-handle::after { content: ''; position: absolute; left: 6px; top: 50%; width: 2px; height: 10px; margin-top: -5px; border-radius: 1px; background: rgba(255, 255, 255, .8); }
.qv2-handle:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }
.qv2-day { display: flex; flex-direction: column; gap: 2px; }
.qv2-dayhead { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.qv2-dayhead b { font-size: 11px; font-weight: 800; color: #0f172a; }
.qv2-cnt { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qv2-cnt.lv-all { background: #34ca6b; color: #ffffff; }
.qv2-cnt.lv-some { background: #fcd36a; color: #422006; }
.qv2-cnt.lv-none { background: #8391a4; color: #ffffff; }
.qv2-person { display: flex; flex-direction: column; gap: 2px; }
.qv2-pname { font-size: 11px; font-weight: 500; color: #334155; padding: 0 6px; }
.qv2-pname b { font-weight: 800; color: #0f172a; }
.qv2-key { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 2px 6px 0; font-size: 11px; color: #334155; }
.qv2-key span { display: inline-flex; align-items: center; gap: 5px; }
.qv2-key i { width: 11px; height: 11px; border-radius: 3px; box-sizing: border-box; display: inline-block; border: 1px solid rgba(15, 23, 42, .35); }
/* Phones (approved plan, round 6): about 15px a cell, close to the board's
   width per hour on a 390px phone, so two-digit numbers never run together.
   Cards that hold strips run nearly edge to edge and keep their words 10px
   in; other cards sit 10px from the edge. (Without :has, the old insets stay
   and cells come out about 14px.) */
@media (max-width: 560px) {
  .qv2-pad { padding-left: 4px; padding-right: 4px; }
  .qv2-pad > * { margin-left: 6px; margin-right: 6px; width: auto; }
  /* ⚠️ NO ":has(...) > :not(...)" (2026-10-27, board speed): the strip
     cards' words used to get their 10px from ".qv2-card:has(.qv2-strip) >
     :not(...)", and that one rule made Chrome restyle the whole BOARD (~2,000
     elements) on every forced style pass, Quota open or not (a :has() whose
     subject is "any child"). Same layout without it: the strip card keeps
     10px of padding and the rows that hold a strip (person, day, edit strip,
     the strip itself) run edge to edge on -10px. */
  .qv2-pad > .qv2-card:has(.qv2-strip), .qv2-pad > .qv2-pcard:has(.qv2-strip) { margin-left: 0; margin-right: 0; padding-left: 10px; padding-right: 10px; }
  :not(.qv2-pad) > .qv2-card:has(.qv2-strip) { padding-left: 22px; padding-right: 22px; }
  .qv2-card > :is(.qv2-person, .qv2-day, .qv2-editstrip, .qv2-strip),
  .qv2-pad > .qv2-pcard > .qv2-strip { margin-left: -10px; margin-right: -10px; }
  .qv2-card:has(.qv2-strip) .qv2-pname, .qv2-card:has(.qv2-strip) .qv2-dayhead { padding-left: 10px; padding-right: 10px; }
  .qv2-sheet { padding-left: 4px; padding-right: 4px; }
  .qv2-sheet > * { margin-left: 6px; margin-right: 6px; width: auto; }
  .qv2-sheet > .qv2-cand { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .qv2-cand > :not(.qv2-strip) { margin-left: 10px; margin-right: 10px; }
  /* Smaller numbers on phones (owner 2026-10-24: "smaller font if it would
     work nicer"): 10px two-digit numbers all but touch in 15px cells. Still
     one size for every hour on a screen. */
  .qv2-nums span { font-size: 9px; }
}
@media (max-width: 379px) {
  .qv2-nums span { font-size: 8px; }   /* 320px phones: cells about 12.5px */
}
/* The window header's icon tile, as Meetings' (.mh-tile--pick). */
.qv2-tile { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #ccfbf1; color: #0f766e; }
.qv2-tile[hidden] { display: none; }
.qv2-mshift { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #e2e8f0; }
.qv2-mshift:first-child { border-top: 0; padding-top: 0; }
.qv2-mshift .qv2-listtext { flex: 1 1 auto; min-width: 0; }
.qv2-mshift .qv2-listtext .is-warn { color: #b45309; font-weight: 700; }
.qv2-mshift > .qv2-btn { flex: none; white-space: nowrap; }
.qv2-card.is-teal .qv2-need { border-color: #99f6e4; }
.qv2-card.is-teal .qv2-need span { color: #334155; }
body.dark-mode .qv2-card.is-teal .qv2-need span { color: #cbd5e1; }
.qv2-mdate { flex: none; width: 44px; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 10px; background: #f0fdfa; color: #0f766e; }
.qv2-mdate small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.qv2-mdate b { font-size: 17px; line-height: 1.1; }
.qv2-answer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid #e2e8f0; font-size: 13px; }
.qv2-answer > span { grid-column: 1 / -1; color: #64748b; font-size: 12px; }
.qv2-answer > b { font-size: 14px; color: #0f172a; }
body.dark-mode .qv2-mshift, body.dark-mode .qv2-answer { border-color: #334155; }
body.dark-mode .qv2-mdate { background: #134e4a; color: #99f6e4; }
body.dark-mode .qv2-answer > b { color: #e2e8f0; }

/* Times in */
.qv2-clockchip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #99f6e4; background: #f0fdfa; font: inherit; font-size: 12.5px; font-weight: 700; color: #0f766e; cursor: pointer; }

/* People */
.qv2-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: #e2e8f0; }
.qv2-tab { flex: 1 1 0; min-height: 40px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; }
.qv2-tab.is-on { background: #ffffff; font-weight: 800; color: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.qv2-bars { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; font-size: 12px; }
.qv2-bar { display: block; height: 12px; border-radius: 4px; background: rgba(15, 118, 110, .08); overflow: hidden; }
.qv2-bar i { display: block; height: 100%; background: #0f766e; border-radius: 4px; }
.qv2-bar.is-light i { background: #5eead4; }
.qv2-giveall { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid #e2e8f0; background: #ffffff; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.qv2-giveall > span { flex: 1 1 auto; }
.qv2-giveall label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #475569; }
.qv2-giveall input { width: 56px; min-height: 40px; padding: 0 8px; border-radius: 10px; border: 1px solid #cbd5e1; font: inherit; font-size: 15px; font-weight: 700; text-align: center; }
.qv2-pcard, .qv2-cand { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid #e2e8f0; background: #ffffff; }
.qv2-ptop { display: flex; align-items: center; gap: 10px; }
.qv2-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; color: #ffffff; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.qv2-avatar.is-sm { width: 32px; height: 32px; font-size: 12px; }
.qv2-pinfo { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.qv2-pinfo b { font-size: 14px; }
.qv2-pinfo b em { font-style: normal; font-weight: 500; color: #64748b; }
.qv2-pinfo span { font-size: 12px; color: #475569; }
.qv2-stepper { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.qv2-stepper > span { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
.qv2-stepper b { font-size: 16px; font-variant-numeric: tabular-nums; }
.qv2-stepper small { font-size: 10.5px; color: #64748b; }
.qv2-step { width: 40px; height: 40px; border-radius: 10px; border: 1px solid #cbd5e1; background: #ffffff; font: inherit; font-size: 18px; color: #334155; cursor: pointer; }
.qv2-facts { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: 12px; }
.qv2-facts > span:nth-child(odd) { color: #64748b; }
.qv2-facts > span:nth-child(even) { color: #0f172a; font-weight: 600; }
.qv2-facts .is-warn { color: #b45309; font-weight: 700; }

/* The plan */
.qv2-wtabs { display: flex; gap: 6px; }
.qv2-wtab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 52px; padding: 6px 4px; border-radius: 12px; border: 1px solid #e2e8f0; background: #ffffff; color: #334155; font: inherit; cursor: pointer; }
.qv2-wtab b { font-size: 13px; }
.qv2-wtab small { font-size: 11px; }
.qv2-wtab.is-on { border: 1.5px solid #0f766e; background: #ccfbf1; color: #0f766e; }
.qv2-need { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #ffffff; border: 1px solid #fde68a; }
.qv2-need b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.qv2-need span { font-size: 12.5px; line-height: 1.45; color: #78350f; }
.qv2-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qv2-prow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; }
.qv2-prow > b:first-child { grid-row: span 2; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qv2-pbar { display: flex; height: 12px; border-radius: 4px; background: #f1f5f9; overflow: hidden; }
.qv2-pbar i { display: block; height: 100%; }
.qv2-pbar i.is-in { background: #0f766e; }
.qv2-pbar i.is-out { background: #d97706; }
.qv2-num { font-size: 12px; font-variant-numeric: tabular-nums; }
.qv2-pnote { grid-column: 2 / -1; font-size: 11.5px; color: #64748b; }
.qv2-pnote.is-warn { color: #b45309; }

/* Sheets */
.qv2-sheet-host { position: absolute; inset: 0; display: none; z-index: 5; }
.qv2-sheet-host.is-open { display: flex; flex-direction: column; justify-content: flex-end; }
.qv2-scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.qv2-sheet { position: relative; display: flex; flex-direction: column; gap: 12px; max-height: 88%; overflow-y: auto; padding: 10px 16px 24px; border-radius: 22px 22px 0 0; background: #f8fafc; box-shadow: 0 -8px 24px rgba(15, 23, 42, .18); }
.qv2-grabber { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: #cbd5e1; flex: none; }
.qv2-sheethead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qv2-sheethead > span { display: flex; flex-direction: column; gap: 2px; }
.qv2-sheethead b { font-size: 17px; }
.qv2-badge { flex: none; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.qv2-badge.is-ok { background: #ccfbf1; color: #0f766e; }
.qv2-badge.is-ask { background: #e0f2fe; color: #075985; }
.qv2-badge.is-rule { background: #fef3c7; color: #92400e; }
.qv2-badge.is-no { background: #f1f5f9; color: #64748b; }
.qv2-why { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.4; color: #334155; }

/* Dark mode: the surfaces and ink; cell colours keep their meaning. */
body.dark-mode .qv2-modal .qv2-content, body.dark-mode .qv2-sheet { background: #0f172a; color: #e2e8f0; }
body.dark-mode .qv2-head, body.dark-mode .qv2-card, body.dark-mode .qv2-listrow, body.dark-mode .qv2-pcard, body.dark-mode .qv2-cand,
body.dark-mode .qv2-radio, body.dark-mode .qv2-giveall, body.dark-mode .qv2-wtab, body.dark-mode .qv2-need, body.dark-mode .qv2-iconbtn,
body.dark-mode .qv2-btn, body.dark-mode .qv2-chip, body.dark-mode .qv2-step { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .qv2-btn.is-primary { background: #0f766e; color: #ffffff; }
body.dark-mode .qv2-chip.is-on, body.dark-mode .qv2-wtab.is-on, body.dark-mode .qv2-radio.is-on { background: rgba(20, 184, 166, .18); border-color: #5eead4; color: #5eead4; }
body.dark-mode .qv2-muted, body.dark-mode .qv2-titles span, body.dark-mode .qv2-listtext span, body.dark-mode .qv2-pinfo span { color: #94a3b8; }
body.dark-mode .qv2-key, body.dark-mode .qv2-pname, body.dark-mode .qv2-dayhead b, body.dark-mode .qv2-ls b, body.dark-mode .qv2-pname b { color: #e2e8f0; }
body.dark-mode .qv2-ls.open b, body.dark-mode .qv2-ls.asked b, body.dark-mode .qv2-ls.cover b { color: #fcd34d; }
body.dark-mode .qv2-tile { background: rgba(20, 184, 166, .18); color: #5eead4; }
body.dark-mode .qv2-card.is-teal, body.dark-mode .qv2-note.is-ok { background: rgba(20, 184, 166, .10); border-color: rgba(94, 234, 212, .35); color: #99f6e4; }
body.dark-mode .qv2-card.is-amber, body.dark-mode .qv2-note.is-warn { background: rgba(217, 119, 6, .12); border-color: rgba(253, 230, 138, .35); color: #fde68a; }
body.dark-mode .qv2-field input { background: #0f172a; border-color: #475569; color: #e2e8f0; }