/* ─────────────────────────────────────────────────────────────
   QPS R&D Platform — design tokens
   Ported from "Atlassian Reports Platform.dc.html"
   ───────────────────────────────────────────────────────────── */
:root {
  --accent: #0369A1;
  --accent-dark: #075985;
  /* Only used by the login hero's gradients and halo — see Login.razor. */
  --accent-bright: #0EA5E9;
  --green: #16A34A;
  --green-dark: #15803D;
  --amber: #D97706;
  --amber-dark: #92400E;
  --red: #E11D48;
  --violet: #7C3AED;
  --violet-dark: #6D28D9;

  --bg: #F4F7FB;
  --surface: #FFFFFF;
  --surface-2: #F6F8FC;
  --surface-3: #EEF2F8;

  --border: #E3E9F2;
  --border-2: #CBD5E3;
  --line: #A9B6CA;

  --ink: #16202F;
  --ink-2: #2B3648;
  --ink-3: #3F5170;
  --ink-4: #47546B;
  --ink-5: #5A6880;
  --muted: #6B7A93;
  --muted-2: #8794AB;

  --shadow-card: 0 1px 2px rgba(16, 32, 64, .05), 0 8px 24px rgba(16, 32, 64, .07);
  --shadow-card-hover: 0 2px 4px rgba(16, 32, 64, .06), 0 16px 36px rgba(16, 32, 64, .1);

  /* The design's card is glass: a near-white gradient over a blurred backdrop, lifted by a
     long soft shadow and a bright inner top edge. Meaningless without AmbientBackground
     behind it — there would be nothing to blur. */
  --glass-bg: linear-gradient(155deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .64));
  --glass-border: rgba(255, 255, 255, .82);
  --glass-blur: blur(22px) saturate(170%);
  --shadow-glass: 0 22px 48px -24px rgba(13, 38, 76, .32),
                  0 2px 8px -4px rgba(13, 38, 76, .08),
                  inset 0 1px 0 rgba(255, 255, 255, .92);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-3); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; border: 2px solid var(--surface-3); }
::-webkit-scrollbar-thumb:hover { background: var(--line); }

/* ── animations ───────────────────────────────────────────── */
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes ping { 0% { transform: scale(.35); opacity: .55; } 80% { opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes pulseDot { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drawIn { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes wave { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(3, 105, 161, .28); } 50% { box-shadow: 0 0 0 14px rgba(3, 105, 161, 0); } }
@keyframes tick { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes stripe { from { background-position: 0 0; } to { background-position: 36px 0; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.9) translateY(8px); } 60% { transform: scale(1.01) translateY(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes drawCheck { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes drift1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(6%, -5%, 0) scale(1.12); } 66% { transform: translate3d(-5%, 4%, 0) scale(.94); } }
@keyframes drift2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-7%, 6%, 0) scale(.9); } }
@keyframes drift3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(.95); } 40% { transform: translate3d(5%, 7%, 0) scale(1.15); } 75% { transform: translate3d(-4%, -6%, 0) scale(1); } }
@keyframes sheen { 0% { transform: translateX(-130%) skewX(-18deg); } 55%, 100% { transform: translateX(260%) skewX(-18deg); } }
/* No `filter` here: it would persist as blur(0) under fill-mode:both and turn every element
   carrying riseIn into a backdrop root, stopping child glass from sampling the page behind it. */
@keyframes riseIn { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes gridPan { to { background-position: 64px 64px, 64px 64px; } }
@keyframes haloSpin { to { transform: rotate(360deg); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.anim-fade-in { animation: fadeIn .35s ease both; }
.anim-fade-up { animation: fadeUp .42s ease both; }
.anim-pop-in { animation: popIn .5s cubic-bezier(.2, .7, .3, 1) both; }
.anim-tick { animation: tick .3s ease both; }
.anim-slide-in { animation: slideIn .3s ease both; }
.anim-pulse { animation: pulseDot 2s infinite; }
.anim-spin { animation: spin 1s linear infinite; }

/* ── app shell ────────────────────────────────────────────── */
.page-bg {
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(900px 600px at 78% -8%, rgba(3, 105, 161, .1), transparent 60%),
    radial-gradient(700px 500px at 4% 102%, rgba(124, 58, 237, .08), transparent 60%);
}

.shell { display: grid; grid-template-columns: auto 1fr; min-height: 100vh; }

/* z-index scale — all of these resolve in the root stacking context, so keep it that way:
   0  ambient background     20 topbar          30 Verify action bar
   35 side panel             60 overlays and their click-catchers (drawer, popovers)
   80 toast
   <main> is deliberately position:relative with NO z-index. Giving it one makes it a
   stacking context, which caps every overlay rendered through @Body underneath it.
   The topbar's own popovers (command palette, notification bell) render inside the
   topbar, so their z-index:60 click-catchers resolve inside ITS stacking context, capped
   at the topbar's own 20 — not the root 60 this scale otherwise promises. The side panel
   sits above that at 35, so a click on a panel item navigates while the popover is still
   showing; both components close themselves on NavigationManager.LocationChanged to cover it. */

/* ── Side panel ───────────────────────────────────────────────
   Floating over AmbientBackground in the platform's light glass, through --p-* tokens that
   map onto the page tokens. No backdrop-filter or transform on .side-panel: either would trap
   the folded tooltips (position: fixed) inside its overflow clip. It is near-opaque, like the
   old sidebar, so the blur is not missed. */
:root {
  --p-bg: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(248, 251, 255, .88));
  --p-ink: var(--ink);
  --p-ink-2: var(--ink-5);
  --p-muted: var(--muted);
  --p-line: var(--border);
  --p-hover: var(--surface-2);
  --p-active: rgba(3, 105, 161, .09);
  --p-accent: var(--accent);
  --p-pill: var(--accent);
  --p-inset: var(--surface-2);
}

.side-panel {
  position: sticky; top: 14px; z-index: 35;
  width: 264px; height: calc(100vh - 28px); margin: 14px 0 14px 14px;
  display: flex; flex-direction: column; padding: 18px 14px 14px;
  overflow-y: auto; overflow-x: hidden;
  background: var(--p-bg); color: var(--p-ink); border-radius: 22px;
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass);
  scrollbar-width: none; /* still scrolls with the wheel, touch and keyboard */
}
.side-panel::-webkit-scrollbar { display: none; }
.side-panel :focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }

.panel-head { display: flex; align-items: center; gap: 11px; padding: 2px 6px 16px; }
.panel-logo { width: 38px; height: 38px; padding: 5px; border-radius: 12px; background: #FFF; border: 1px solid var(--border); flex-shrink: 0; }
.panel-name { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.panel-wordmark { height: 13px; width: 37.8px; object-fit: contain; }
.panel-sub { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--p-muted); }
.panel-round {
  margin-left: auto; width: 28px; height: 28px; flex-shrink: 0; border: none; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: var(--surface-3); color: var(--p-ink-2);
}
.panel-round:hover { background: var(--p-active); color: var(--p-accent); }

.panel-sep { height: 1px; margin: 0 0 14px; background: var(--p-line); flex-shrink: 0; }
.panel-sec { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.panel-sec.closed .pnav { display: none; }
.panel-title {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px 8px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--p-muted);
}
.panel-title-arrows { display: flex; gap: 2px; }
.panel-title-btn {
  display: grid; place-items: center; padding: 3px; border: none; border-radius: 6px;
  background: none; color: var(--p-muted); cursor: pointer;
}
.panel-title-btn:hover:not(:disabled) { background: var(--p-hover); color: var(--p-accent); }
.panel-title-btn:disabled { opacity: .35; cursor: default; }

.pnav {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px;
  border: none; border-radius: 12px; background: transparent; color: var(--p-ink-2);
  font-size: 13px; text-align: left; cursor: pointer;
}
.pnav svg { flex-shrink: 0; color: var(--p-muted); }
.pnav:hover { background: var(--p-hover); color: var(--p-ink); }
.pnav:hover svg, .pnav.active svg { color: var(--p-accent); }
.pnav.active { background: var(--p-active); color: var(--p-accent); font-weight: bold; }
.pnav.active::before {
  content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--p-accent);
}
.pnav-dot { display: none; }

.panel-title-short { display: none; }

.pcycle {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 10px; border-radius: 16px;
  background: var(--p-inset); border: 1px solid var(--p-line);
}
.pcycle-prog { display: flex; flex-direction: column; gap: 7px; padding: 2px 8px 10px; }
.pcycle-count { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--p-ink-2); }
.pcycle-count b { color: var(--p-ink); font-variant-numeric: tabular-nums; }
.pcycle-bar { display: flex; gap: 2px; height: 6px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.pcycle-bar i { display: block; height: 100%; }
.pcycle-ring { display: none; }
.pcycle-done { margin: 0; padding: 4px 8px 8px; font-size: 12px; line-height: 1.45; color: var(--p-ink-2); }
.pcust {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px;
  border: none; border-radius: 10px; background: transparent; color: var(--p-ink-2);
  font-size: 12.5px; text-align: left; cursor: pointer;
}
.pcust:hover { background: var(--surface); color: var(--p-ink); }
/* The locked review row (no verify permission) renders as a div, not a button: it must not look clickable. */
div.pcust { cursor: default; }
div.pcust:hover { background: transparent; color: var(--p-ink-2); }
.pcust-ini {
  position: relative; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3); font-size: 10px; font-weight: bold;
}
.pcust-ini::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line); box-shadow: 0 0 0 2px var(--surface-2);
}
.pcust-ini.s-review::after { background: var(--amber); }
.pcust-ini.s-failed::after { background: var(--red); }
.pcust-text { display: flex; flex-direction: column; min-width: 0; }
.pcust-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcust-sub { font-size: 10.5px; color: var(--p-muted); }
.pcust-pill { margin-left: auto; flex-shrink: 0; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: bold; white-space: nowrap; }
.pcust-pill.s-review { background: rgba(217, 119, 6, .12); color: var(--amber-dark); }
.pcust-pill.s-failed { background: rgba(225, 29, 72, .1); color: var(--red); }
.pcust-pill.s-todo { padding-right: 2px; font-weight: normal; color: var(--p-muted); }
.pcycle-all {
  position: relative; align-self: center; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border: none; border-radius: 999px; background: var(--p-pill); color: #FFF;
  font-size: 11.5px; font-weight: bold; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(3, 105, 161, .7);
}
.pcycle-all:hover { background: var(--accent-dark); }

.panel-foot { position: relative; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--p-line); }
.puser {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px;
  border: none; border-radius: 14px; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.puser:hover { background: var(--p-hover); }
.pavatar {
  position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: bold; color: #FFF;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
}
.pavatar::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 2px #FFF;
}
.puser-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.puser-name { font-size: 13px; color: var(--p-ink); }
.puser-role { font-size: 11px; color: var(--p-muted); }
.puser-chev { margin-left: auto; flex-shrink: 0; color: var(--p-muted); }
.pmenu-catch { position: fixed; inset: 0; z-index: 29; }
.pmenu {
  position: absolute; left: 0; bottom: 64px; z-index: 30; width: 236px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--p-line); box-shadow: var(--shadow-card-hover);
}
.pmenu-row {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: none; border-radius: 9px;
  background: none; color: var(--p-ink-2); font-size: 12.5px; text-align: left; text-decoration: none;
}
a.pmenu-row, button.pmenu-row { cursor: pointer; }
a.pmenu-row:hover, button.pmenu-row:hover { background: var(--p-hover); color: var(--p-ink); }
.pmenu-ok { width: 7px; height: 7px; margin: 0 3px; border-radius: 50%; background: var(--green); }
.pmenu-line { height: 1px; margin: 4px 0; background: var(--p-line); }

@media (prefers-reduced-motion: no-preference) {
  .pnav, .puser, .panel-round, .pcust, .pcycle-all { transition: background .15s ease, color .15s ease; }
}

/* Fold animation, desktop only (a phone's drawer slides instead) and only after a click
   ("animate"), never on load. The layout switches the instant the class changes, so the
   contents are hidden while the width moves and fade back in once it has mostly settled,
   instead of jumping to the new layout and then sliding. Two keyframe names, so the fade
   restarts on every fold and unfold. */
@keyframes panel-in-open { 0%, 45% { opacity: 0; } 100% { opacity: 1; } }
@keyframes panel-in-fold { 0%, 45% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  @media not all and (max-width: 720px) {
    .side-panel.animate { transition: width .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1); }
    .side-panel.animate > * { animation: panel-in-open .34s ease-out; }
    .side-panel.animate.folded > * { animation: panel-in-fold .34s ease-out; }
  }
}

/* Folded: desktop only. On a phone the panel is the drawer and always unfolded. */
@media not all and (max-width: 720px) {
  .side-panel.folded { width: 80px; padding: 18px 10px 14px; }
  .side-panel.folded .panel-head { flex-direction: column; gap: 12px; padding: 2px 0 14px; }
  .side-panel.folded .panel-name { display: none; }
  .side-panel.folded .panel-round { margin: 0; }
  .side-panel.folded .panel-round svg { transform: rotate(180deg); }
  .side-panel.folded .panel-title { justify-content: center; padding: 0 0 8px; font-size: 9px; letter-spacing: .08em; }
  .side-panel.folded .panel-title-arrows { display: none; }
  .side-panel.folded .pnav { justify-content: center; padding: 12px 0; }
  /* Folding the desktop panel to icons shows Setup's items even when Setup itself is folded. */
  .side-panel.folded .panel-sec.closed .pnav { display: flex; }
  .side-panel.folded .pnav.active::before { left: -10px; }
  .side-panel.folded .pnav-dot {
    display: block; position: absolute; top: 8px; right: 14px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px #FFF;
  }
  .side-panel.folded .puser { justify-content: center; padding: 6px 0; }
  .side-panel.folded .puser-chev { display: none; }
  /* position: fixed so the menu escapes the 80px panel's overflow clip. */
  .side-panel.folded .pmenu { position: fixed; left: 104px; bottom: 28px; }

  .side-panel.folded .panel-title-full { display: none; }
  .side-panel.folded .panel-title-short { display: inline; }
  .side-panel.folded .pcycle { padding: 10px 0; align-items: center; }
  .side-panel.folded .pcycle-prog { padding: 0 0 8px; }
  .side-panel.folded .pcycle-count, .side-panel.folded .pcycle-bar { display: none; }
  .side-panel.folded .pcycle-ring { display: block; }
  .side-panel.folded .pcust { justify-content: center; padding: 6px 0; }
  .side-panel.folded .pcycle-done { display: none; }
  .side-panel.folded .pcycle-all { width: 36px; height: 36px; padding: 0; justify-content: center; }

  /* Hidden from sight only: screen readers still get the labels. */
  .side-panel.folded :is(.pnav-label, .puser-text, .pcust-text, .pcust-pill, .pcycle-all-label) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* Tooltip pill. A fixed box with no insets sits at its static position, which escapes the
     panel's overflow clip. In a centred flex button that static position is centred on the
     button, so the translate moves it to 14px right of the 80px panel. */
  .side-panel.folded [data-tip]:is(:hover, :focus-visible)::after {
    content: attr(data-tip); position: fixed; z-index: 40; transform: translateX(calc(50% + 54px));
    padding: 8px 13px; border-radius: 12px; background: var(--p-pill); color: #FFF;
    font-size: 12px; font-weight: bold; white-space: nowrap; pointer-events: none;
    box-shadow: 0 10px 24px -10px rgba(3, 105, 161, .55);
  }

  /* Fixed action bars (Verify, Guard rails) share the panel's left edge, unfolded or folded. */
  .shell:has(.side-panel.folded) .action-bar { left: 94px; }
}

/* Fixed action bars (Verify, Guard rails) sit next to the panel, not under it. The phone rule
   (left: 0 !important) still wins under 720px. */
.action-bar { left: 278px; }

.main { display: flex; flex-direction: column; min-width: 0; }

/* 1fr auto 1fr keeps the search bar centred on the topbar itself, not on whatever
   space the crumbs and the action group happen to leave over. */
.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 22px; height: 64px;
  /* Floats like the side panel: same 14px from the window, top edges aligned. */
  margin: 14px 14px 0 14px; border-radius: 18px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  position: sticky; top: 14px; z-index: 20;
}
/* min-width:0 lets a long crumb shrink instead of shoving the centre column off-centre. */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-2); min-width: 0; overflow: hidden; }
.crumb-leaf { color: var(--ink); font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-wrap { position: relative; width: 340px; max-width: 100%; }
.search-wrap svg { position: absolute; left: 12px; top: 10px; }
.search-input { width: 100%; padding: 9px 66px 9px 34px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); font-size: 12.5px; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.search-input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(3, 105, 161, .1); }
.kbd { position: absolute; right: 9px; top: 8px; padding: 2px 7px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); font-size: 11px; color: var(--muted); }

.status-chip { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.icon-btn { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
.tenant-chip { display: flex; align-items: center; gap: 8px; padding: 6px 11px 6px 9px; border-radius: 11px; background: rgba(124, 58, 237, .08); border: 1px solid rgba(124, 58, 237, .22); font-size: 11.5px; color: var(--violet-dark); text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.tenant-chip:hover { background: rgba(124, 58, 237, .14); border-color: rgba(124, 58, 237, .45); transform: translateY(-1px); color: var(--violet-dark); }

/* ── generic building blocks ──────────────────────────────── */
.pad { padding: 32px; }
.card, .card-sm, .panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}
.card { padding: 22px 24px; border-radius: 18px; }
.card-sm { padding: 16px; border-radius: 14px; }
/* backdrop-filter makes each card a stacking context, so a popup inside one (GroupPicker)
   is painted under the next card. Lift the focused card; 1 stays under the side panel's 35. */
.card:focus-within, .card-sm:focus-within, .panel:focus-within { position: relative; z-index: 1; }
.panel { border-radius: 16px; overflow: hidden; }
.tile { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }

.h1 { margin: 0 0 6px; font-size: 28px; font-weight: bold; letter-spacing: -.03em; }
.h2 { margin: 0; font-size: 15px; font-weight: bold; }
.sub { margin: 0; font-size: 14px; color: var(--ink-5); }
.eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.label-cap { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dim { color: var(--muted-2); }
.num { font-variant-numeric: tabular-nums; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }

.pill { padding: 3px 9px; border-radius: 999px; font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; }

.btn-primary { display: flex; align-items: center; gap: 9px; padding: 11px 18px; border: none; border-radius: 12px; background: var(--accent); color: #FFF; font-size: 13px; font-weight: bold; cursor: pointer; transition: transform .16s ease, box-shadow .2s ease; }
.btn-primary:hover { transform: translateY(-1px); }
/* Disabled reads as unavailable, not as a button that failed to respond: the lift and the glow
   both go, since a raised surface is what invites the click in the first place. */
.btn-primary:disabled { background: var(--line); color: var(--surface); cursor: not-allowed; box-shadow: none !important; }
.btn-primary:disabled:hover { transform: none; }
.btn-ghost { padding: 11px 18px; border-radius: 12px; background: transparent; border: 1px solid var(--border-2); color: var(--ink-4); font-size: 13px; cursor: pointer; white-space: nowrap; transition: border-color .18s ease, color .18s ease; }
.btn-ghost:hover { border-color: var(--line); color: var(--ink); }
.btn-sm { padding: 7px 12px; border-radius: 8px; background: transparent; border: 1px solid var(--border-2); color: var(--ink-4); font-size: 11.5px; cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.btn-sm:hover { border-color: var(--accent); color: var(--accent); }

.field-input { width: 100%; padding: 11px 13px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); font-size: 13px; outline: none; transition: border-color .18s ease, box-shadow .18s ease; }
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(3, 105, 161, .12); }
.field-input.invalid { border-color: rgba(225, 29, 72, .4); }

/* contract terms list in the customer drawer */
.terms { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.terms-row { display: grid; grid-template-columns: 82px 1fr 1fr 1fr 30px; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); }
.terms-row:first-child { border-top: 0; }
.terms-head { background: var(--surface-2); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-block: 9px; }
.terms-row.current { background: rgba(3, 105, 161, .06); }
.terms-label { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.terms-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border-top: 1px dashed var(--border-2); background: var(--surface-2); }

/* verified customer drawer */
.status-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--green); }
.status-dot.sm { width: 16px; height: 16px; }
.status-dot.warn { background: var(--amber); }
.status-dot.err { background: var(--red); }
.status-dot.idle { background: transparent; border: 1.5px dashed var(--border-2); }
.status-dot.busy { background: transparent; border: 2px solid var(--border-2); border-top-color: var(--accent); animation: spin .7s linear infinite; }
.status-dot.neutral { background: var(--surface-3); color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }

.drawer-overall { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.drawer-check-all { margin-left: auto; padding: 7px 11px; border-radius: 10px; border: 1px solid rgba(3, 105, 161, .3); background: var(--surface); color: var(--accent); font-size: 12px; cursor: pointer; white-space: nowrap; }
.report-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.report-chips > span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.report-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12px; color: var(--muted); cursor: pointer; }
.report-chip[aria-pressed="true"] { border-color: rgba(3, 105, 161, .4); background: rgba(3, 105, 161, .07); color: var(--accent); }

.drawer-sec { border-bottom: 1px solid var(--border); }
.drawer-sec-head { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 15px 26px; border: 0; background: transparent; cursor: pointer; text-align: left; color: var(--ink); }
.drawer-sec-head:hover { background: var(--surface-2); }
.drawer-sec-title { display: block; font-size: 13.5px; font-weight: bold; }
.drawer-sec-sum { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-sec-tally { font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; background: rgba(22, 163, 74, .09); color: var(--green-dark); }
.drawer-sec-tally.warn { background: rgba(217, 119, 6, .1); color: var(--amber-dark); }
.drawer-sec-tally.err { background: rgba(225, 29, 72, .08); color: var(--red); }
.drawer-sec-tally.busy { background: var(--surface-3); color: var(--muted); }
.drawer-sec-chev { color: var(--muted-2); display: grid; transition: transform .2s ease; }
.drawer-sec.open .drawer-sec-chev { transform: rotate(90deg); }
.drawer-sec-body { padding: 0 26px 18px 62px; display: grid; gap: 14px; }

.check-rows { border: 1px solid var(--border); border-radius: 12px; }
.check-rows > * + * { border-top: 1px solid var(--border); }
.check-rows > :first-child { border-radius: 12px 12px 0 0; }
.check-rows > :last-child { border-radius: 0 0 12px 12px; }
.check-rows > :only-child { border-radius: 12px; }
.check-row { width: 100%; display: grid; grid-template-columns: 150px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 10px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.check-row:hover { background: var(--surface-2); }
.check-row-label { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.check-row-label em { font-style: normal; color: var(--red); margin-left: 2px; }
.check-row-value { min-width: 0; }
.check-row-title { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check-row-title.query { font-family: Consolas, "Cascadia Mono", monospace; font-size: 11.5px; color: var(--ink-3); }
.check-row-title.none { color: var(--muted-2); }
.check-row-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.check-row-meta.warn { color: var(--amber-dark); white-space: normal; }
.check-row-meta.err { color: var(--red); white-space: normal; }

.check-edit { padding: 12px; background: var(--surface-2); display: grid; gap: 8px; }
.check-edit-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.check-edit-input { position: relative; display: flex; gap: 6px; }
.check-edit-input > input, .check-edit-input > textarea { width: 100%; padding: 9px 11px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-2); color: var(--ink); font-size: 13px; outline: none; }
.check-edit-input > textarea { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; line-height: 1.55; resize: vertical; }
.check-edit-input > input:focus, .check-edit-input > textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(3, 105, 161, .12); }
.check-search-btn { flex-shrink: 0; width: 38px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.check-search-btn:hover { color: var(--accent); border-color: var(--accent); }
.check-live { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.check-live.err { color: var(--red); }
.check-live.warn { color: var(--amber-dark); }
.check-live.idle { color: var(--muted); }
.check-live a { color: var(--accent); text-decoration: none; }
.check-edit-foot { display: flex; align-items: center; gap: 8px; }
.check-edit-foot small { color: var(--muted-2); font-size: 11px; }
.check-done { margin-left: auto; padding: 6px 14px; border-radius: 9px; border: 0; background: var(--accent); color: #FFF; font-size: 12px; cursor: pointer; }

.check-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: min(520px, calc(100vw - 64px)); background: var(--surface); border: 1px solid var(--border-2); border-radius: 13px; box-shadow: 0 18px 44px rgba(16, 32, 64, .2); padding: 10px; display: grid; gap: 8px; }
.check-pop-top { display: flex; gap: 6px; align-items: center; }
.check-pop-top input { flex: 1; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); outline: none; }
.check-seg { display: inline-flex; background: var(--surface-3); border-radius: 9px; padding: 3px; }
.check-seg button { border: 0; background: transparent; padding: 5px 9px; border-radius: 7px; font-size: 11px; color: var(--muted); cursor: pointer; }
.check-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 32, 64, .12); }
.check-hits { max-height: 250px; overflow-y: auto; display: grid; }
.check-hit { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; border: 0; background: transparent; padding: 8px 9px; border-radius: 9px; cursor: pointer; color: var(--ink); }
.check-hit:hover { background: rgba(3, 105, 161, .07); }
.check-hit .t { font-size: 12.5px; }
.check-hit .m { font-size: 10.5px; color: var(--muted); grid-column: 1; }
.check-hit .i { font-size: 10.5px; color: var(--muted-2); font-family: Consolas, monospace; grid-row: 1 / 3; grid-column: 2; align-self: center; }
.check-pop-empty { color: var(--muted); font-size: 12px; padding: 10px; }
.drawer-foot-msg { flex: 1; text-align: right; font-size: 11.5px; color: var(--muted); }

/* toggle switch */
.toggle { position: relative; width: 42px; height: 23px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface-2); cursor: pointer; padding: 0; flex-shrink: 0; transition: background .2s ease, border-color .2s ease; }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--line); display: block; transition: left .2s cubic-bezier(.4, 0, .2, 1), background .2s ease; }
.toggle.on { border-color: rgba(3, 105, 161, .5); background: rgba(3, 105, 161, .22); }
.toggle.on .knob { left: 21px; background: var(--accent); }

/* segmented control */
.segments { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); width: fit-content; }
.segment { padding: 7px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 12.5px; background: transparent; color: var(--ink-5); transition: background .18s ease; }
.segment.on { background: rgba(3, 105, 161, .14); color: var(--accent); }

/* contract burn card (overview). The track spans 0–160% of the contract, so 100% sits at 62.5%. */
.burn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border);
              border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.burn-stat { background: var(--surface-2); padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.burn-stat b { font-size: 24px; line-height: 1; }
.burn-stat b small { font-size: 13px; color: var(--muted); font-weight: normal; }
.burn-stat span { font-size: 11.5px; color: var(--ink-5); line-height: 1.4; }
.burn-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 3fr) minmax(130px, .9fr); gap: 18px;
            align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.burn-row:first-child { border-top: none; }
.burn-who { display: grid; gap: 5px; justify-items: start; min-width: 0; }
.burn-figs { display: grid; gap: 3px; text-align: right; font-size: 12px; color: var(--ink-4); }
.burn-figs b { font-size: 13px; color: var(--ink); }
.burn-track { position: relative; height: 24px; }
.burn-track > * { position: absolute; }
.burn-zone { top: 6px; left: 0; width: 62.5%; height: 12px; border-radius: 6px; background: var(--surface-3); }
.burn-zone.over { left: 62.5%; width: 37.5%; background: none; border: 1px dashed var(--border); }
.burn-fill { top: 6px; left: 0; height: 12px; border-radius: 6px; transition: width .6s ease; }
.burn-mark { top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--ink); }
.burn-mark.pace { top: 2px; bottom: 2px; border-left: 2px dashed var(--ink-4); }
.burn-ring { top: 7.5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--surface); border: 2px solid; }
.burn-note { top: 5px; left: 8px; font-size: 11px; line-height: 14px; color: var(--muted-2); white-space: nowrap; }
.burn-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 11px; color: var(--muted); }
.burn-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); width: fit-content; }
.tab { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 8px; border: none; cursor: pointer; font-size: 12.5px; background: transparent; color: var(--ink-5); transition: background .18s ease, color .18s ease; }
.tab.on { background: rgba(3, 105, 161, .13); color: var(--accent); }
.tab-count { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; background: rgba(16, 32, 64, .06); }

/* Chrome centres <button> content vertically; card-shaped buttons must stay top-aligned
   so siblings with different text lengths line up. */
.card-btn { display: flex; flex-direction: column; align-items: stretch; }

.chip-btn { padding: 8px 13px; border-radius: 11px; cursor: pointer; font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-5); transition: all .18s ease; }
.chip-btn.on { border-color: rgba(3, 105, 161, .4); background: rgba(3, 105, 161, .1); color: var(--accent); }

/* Range inputs get no useful default styling, and the thumb needs a vendor rule per engine. */
.range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: var(--border-2); outline: none; cursor: pointer; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 2px solid #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); cursor: pointer; }
.range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 2px solid #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); cursor: pointer; }

.select-input { width: 100%; padding: 6px 8px; border-radius: 7px; font-size: 11.5px; outline: none; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); }
.select-input.changed { border-color: rgba(124, 58, 237, .5); background: rgba(124, 58, 237, .1); color: var(--violet-dark); }
.hours-input { width: 100%; padding: 5px 6px; border-radius: 7px; font-size: 12px; text-align: right; outline: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-5); }
.hours-input.changed { border-color: rgba(3, 105, 161, .45); background: rgba(3, 105, 161, .08); color: var(--accent); }
.hours-input.invalid { border-color: rgba(225, 29, 72, .55); background: rgba(225, 29, 72, .08); color: var(--red); }

.hours-wrap { display: inline-flex; align-items: center; gap: 4px; width: 100%; flex-wrap: wrap; }
.locked, .locked:disabled { opacity: .6; cursor: not-allowed; background: var(--surface-3); }
.cell-btn:disabled { opacity: .4; cursor: not-allowed; }
.lock-mark { display: inline-grid; place-items: center; flex-shrink: 0; color: var(--muted-2); cursor: help; }
.lock-note { display: block; }
.lock-mark.unread, .lock-note.unread { color: var(--red); }
.hours-wrap .lock-note { flex-basis: 100%; margin-top: 0; }
.rights-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 14px; border-radius: 11px; font-size: 12.5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-5); }
.rights-banner.unread { border-color: rgba(225, 29, 72, .35); background: rgba(225, 29, 72, .06); color: var(--red); }
.rights-banner .btn-sm { margin-left: auto; }

.jql-block { padding: 14px 16px; border-radius: 13px; background: var(--surface-3); border: 1px solid var(--border); }
.jql-text { font-size: 12px; line-height: 1.7; color: var(--ink-3); word-break: break-word; }

.callout-warn { padding: 14px; border-radius: 13px; background: rgba(217, 119, 6, .08); border: 1px solid rgba(217, 119, 6, .24); color: var(--amber-dark); font-size: 12px; line-height: 1.55; display: flex; gap: 9px; }

/* toast */
.toast { position: fixed; right: 26px; bottom: 26px; z-index: 80; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(16, 32, 64, .16); animation: toastIn .32s cubic-bezier(.2, .7, .3, 1) both; }

/* table shells shared by verify + history */
.thead { background: var(--surface-3); border-bottom: 1px solid var(--border); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.trow { border-bottom: 1px solid rgba(227, 233, 242, .9); align-items: center; }

/* DevExpress grid — repaint into the platform's visual language */
.dxbl-grid { --dxbl-grid-bg: transparent; border: none !important; font-family: Arial, Helvetica, sans-serif; }
.dxbl-grid .dxbl-grid-header-content { background: var(--surface-3); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: normal; }
.dxbl-grid .dxbl-grid-table > tbody > tr > td { border-color: rgba(227, 233, 242, .9); font-size: 12.5px; color: var(--ink); }
.dxbl-grid .dxbl-grid-table > thead > tr > th { border-color: var(--border); }
/* Screen-reader status line — keep it announced, keep it off the page. */
.dxbl-a11y-status-helper {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Visually hidden, still announced. Same technique as .dxbl-a11y-status-helper above. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Headers default to centred; the design wants them left, except the two hour columns.
   Columns 5 and 6 are Logged and Rounded — see Verify.razor. */
.verify-grid thead th { text-align: left; }
.verify-grid thead th:nth-child(5),
.verify-grid thead th:nth-child(6) { text-align: right; }

/* The theme packs cells to 1px; the design breathes at 11px/8px. */
.verify-grid thead th { padding: 12px 8px; white-space: nowrap; }
.verify-grid tbody td { padding: 11px 8px; }

.dxbl-grid-row-excluded > td { opacity: .42; }
.dxbl-grid-row-excluded .cell-summary { text-decoration: line-through; }
.dxbl-grid-row-corrected > td { background: rgba(3, 105, 161, .05); }

/* small square action button inside a grid cell */
.cell-btn { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-5); transition: border-color .18s ease, color .18s ease; }
.cell-btn:hover { border-color: var(--accent); color: var(--accent); }
.cell-btn.restored { border-color: rgba(22, 163, 74, .4); background: rgba(22, 163, 74, .12); color: var(--green); }

/* ── Confluence preview ───────────────────────────────────────
   The generators' storage-format tables, drawn the way Confluence draws them. Colours are
   Atlassian's, hard-coded rather than themed: this is a picture of their page, not of ours. */
.cf-page { padding: 28px 32px; background: #FFF; color: #172B4D; }
.cf-title { margin: 0 0 22px; font-size: 22px; font-weight: bold; color: #172B4D; }
.cf-heading { margin: 26px 0 12px; font-size: 17px; font-weight: bold; color: #172B4D; }
.cf-heading:first-of-type { margin-top: 0; }
.cf-note { margin: 0; font-size: 12.5px; color: #6B778C; font-style: italic; }

/* Confluence sizes these tables for an 1800px page; here they scroll rather than push the
   review screen sideways. */
.cf-scroll { overflow-x: auto; }

.cf-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.cf-table th, .cf-table td { border: 1px solid #DFE1E6; padding: 7px 10px; text-align: left; vertical-align: top; color: #172B4D; }
.cf-table th { background: #F4F5F7; font-weight: bold; }
.cf-table p { margin: 0; }
.cf-table a { color: #0C66E4; text-decoration: none; }
.cf-table a:hover { text-decoration: underline; }
/* Only one highlight colour is ever emitted — the header/total shading. */
.cf-table [data-highlight-colour] { background: #F4F5F7; }

.cf-lozenge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10.5px; font-weight: bold; text-transform: uppercase; background: #DFE1E6; color: #42526E; }
.cf-lozenge[data-colour="Green"] { background: #DCFFF1; color: #006644; }
.cf-lozenge[data-colour="Blue"] { background: #DEEBFF; color: #0747A6; }
.cf-lozenge[data-colour="Yellow"] { background: #FFF0B3; color: #172B4D; }
.cf-lozenge[data-colour="Red"] { background: #FFEBE6; color: #BF2600; }
.cf-lozenge[data-colour="Purple"] { background: #EAE6FF; color: #403294; }

/* A link to another Confluence page: it resolves on the page, not here. */
.cf-page-link { color: #0C66E4; border-bottom: 1px dotted #0C66E4; }

/* The ambient layer animates three 46vw blurred elements permanently — real, continuous GPU
   work. Everything looping is frozen here; the one-shot entry animations are short and stay. */
@media (prefers-reduced-motion: reduce) {
  .ambient-blob,
  .ambient-grid,
  .halo,
  .halo-spin,
  .sheen,
  .float-y,
  .radar-sweep,
  .radar-dot,
  .status-ping,
  .anim-pulse { animation: none !important; }
  .status-dot.busy { animation: none; }
  .drawer-sec-chev { transition: none; }
}

/* ── transfer screen ──────────────────────────────────────── */

/* Jira status lozenges. Keyed on statusCategory.key, never on colorName —
   Jira reports "yellow" for the In Progress category and then draws it blue. */
.st { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.st-new { background: #DFE1E6; color: #42526E; }
.st-indeterminate { background: #DEEBFF; color: #0747A6; }
.st-done { background: #E3FCEF; color: #006644; }
.st-undefined { background: #DFE1E6; color: #42526E; }

.tr-outcome { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.tr-new { background: var(--surface-3); color: var(--muted); }
.tr-ok { background: #E7F6ED; color: var(--green); }
.tr-part { background: #FDF3E3; color: var(--amber); }
.tr-fail { background: #FDE8EE; color: var(--red); }
.tr-step { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* The picker: a text box that grows chips. */
.pick { position: relative; }
.pick-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px;
            padding: 7px 9px; border: 1px solid var(--border-2); border-radius: 9px;
            background: var(--surface); cursor: text; }
.pick-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(3, 105, 161, .12); }
.pick-box input { flex: 1; min-width: 190px; border: 0; outline: none; font-size: 13.5px;
                  padding: 4px 2px; background: transparent; color: var(--ink); }

.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-3);
        border: 1px solid var(--border-2); border-radius: 20px; padding: 3px 6px 3px 10px;
        font-size: 12.5px; font-weight: 700; }
.chip button { border: 0; background: transparent; cursor: pointer; color: var(--muted);
               border-radius: 50%; width: 18px; height: 18px; line-height: 1; font-size: 14px; }
.chip button:hover { background: var(--border-2); color: var(--ink); }

.pick-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
            background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px;
            box-shadow: var(--shadow-card-hover); overflow: hidden; max-height: 330px; overflow-y: auto; }
.pick-opt { display: flex; gap: 10px; align-items: center; padding: 9px 12px; cursor: pointer;
            border-bottom: 1px solid var(--surface-3); }
.pick-opt:last-child { border-bottom: 0; }
.pick-opt.on { background: #EAF4FA; }
.pick-opt .k { font-weight: 700; white-space: nowrap; color: var(--accent); width: 82px; font-size: 12.5px; }
.pick-opt .s { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-empty { padding: 16px 12px; font-size: 12.5px; color: var(--muted); }

/* The exact JQL, always visible before Collect runs. */
.sent { margin-top: 9px; font-size: 12px; color: var(--ink-3); background: var(--surface-3);
        border-left: 3px solid var(--accent); border-radius: 7px; padding: 8px 11px; }
.sent code { color: var(--accent); font-family: Consolas, monospace; }

.fixed-note { margin-top: 12px; padding: 9px 12px; background: var(--surface-3); border-radius: 8px;
              font-size: 12px; color: var(--ink-3); border-left: 3px solid var(--violet); }
.fixed-note b { color: var(--ink); }


/* Small muted note under a control. The transfer screen leans on these to say what the
   picker does and what a blank issue type means, so they carry meaning, not decoration. */
.hint { font-size: 11.5px; color: var(--muted-2); margin-top: 6px; line-height: 1.6; }

.jql-input { width: 100%; resize: vertical; padding: 9px 11px; border: 1px solid var(--border-2);
             border-radius: 9px; font-family: Consolas, monospace; font-size: 12.5px;
             color: var(--ink); background: var(--surface-2); }
.jql-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* ── transfer screen: expanded row ───────────────────────────── */

.tr-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 16px 16px 40px;
             background: var(--surface-2); }
.tr-detail h4 { margin: 0 0 8px; font-size: 12px; color: var(--ink-3); }
.tr-plain { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
            padding: 10px; font-size: 12.5px; color: var(--ink-3); white-space: pre-wrap;
            line-height: 1.5; max-height: 160px; overflow: auto; }
.tr-chk { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 7px;
          font-size: 12.5px; cursor: pointer; }
.tr-chk:hover { background: var(--surface); }
.tr-chk.taken { opacity: .55; cursor: default; }
.tr-chk .meta { color: var(--muted-2); font-size: 11px; }
.tr-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.tr-diff div { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
               padding: 9px; font-size: 12px; line-height: 1.5; white-space: pre-wrap;
               max-height: 150px; overflow: auto; }
.tr-diff .nom { border-left: 3px solid var(--accent); }
.tr-diff .qa { border-left: 3px solid var(--green); }
.tr-difrow { border: 1px solid var(--border-2); border-radius: 9px; padding: 10px;
             background: var(--surface); margin-bottom: 10px; }
.tr-bar { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border-2);
          padding: 12px 16px; display: flex; align-items: center; gap: 14px; }

/* ── phone cards: Verify worklogs, Transfer rows ─────────────── */
.card-list { display: grid; gap: 10px; padding: 10px; }

.wl-card { padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.wl-card.corrected { background: rgba(3, 105, 161, .05); border-color: rgba(3, 105, 161, .3); }
.wl-card.excluded > :not(.wl-actions) { opacity: .5; }
.wl-card.excluded .wl-summary { text-decoration: line-through; }
.wl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wl-key { font-size: 12.5px; font-weight: bold; color: var(--violet); }
.wl-meta { font-size: 12px; color: var(--muted); }
.wl-summary { font-size: 14px; line-height: 1.4; color: var(--ink); }
.wl-epic { font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }
.wl-hours { display: flex; gap: 22px; margin: 12px 0; }
.wl-hours .hours-input { width: 96px; height: 44px; font-size: 15px; }
.wl-note { font-size: 11px; line-height: 1.4; color: var(--muted-2); margin-top: 3px; max-width: 200px; }
.wl-field { display: grid; gap: 5px; margin-bottom: 10px; }
.wl-field .select-input { height: 44px; }
.wl-actions { display: flex; align-items: center; gap: 8px; }
.wl-exclude { margin-left: auto; }
.wl-exclude.restored { border-color: rgba(22, 163, 74, .4); background: rgba(22, 163, 74, .12); color: var(--green); }

.tr-card { border-radius: 14px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.tr-card-body { display: flex; gap: 10px; padding: 12px 14px; }
.tr-card-check { width: 44px; height: 44px; margin: -8px 0 0 -10px; flex-shrink: 0; display: grid; place-items: center; }
.tr-card-check input, .tr-select-all input { width: 20px; height: 20px; }
.tr-card-toggle { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
                  border: none; border-top: 1px solid var(--border); background: var(--surface-2);
                  color: var(--ink-4); font-size: 13px; text-align: left; cursor: pointer; }
.tr-card .tr-detail { border-top: 1px solid var(--border); }
.tr-select-all { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; font-size: 13px; color: var(--ink-4); }

/* ── phone ────────────────────────────────────────────────────
   One breakpoint, 720px — the same one app.js reports to Viewport.cs. Pages keep their inline
   styles; the rules here override them, with !important only where an inline style has to lose.
   Above 720px nothing in this block applies, so desktop is untouched by construction. */

@media not all and (max-width: 720px) {
  .phone-only { display: none !important; }
}

@media (max-width: 720px) {
  /* utilities */
  .phone-hide { display: none !important; }
  .phone-1col { grid-template-columns: minmax(0, 1fr) !important; }
  .phone-2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .phone-6col { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .phone-wrap { flex-wrap: wrap; gap: 8px 14px !important; }
  .terms-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms-row > :last-child { grid-column: 2; justify-self: end; }
  .drawer-sec-head { padding-inline: 16px; }
  .drawer-sec-body { padding-inline: 16px; }
  .check-row { grid-template-columns: minmax(0, 1fr) 16px; }
  .check-row-label { grid-column: 1 / 3; margin-bottom: -6px; }
  .drawer-foot-msg { display: none; }
  .phone-scroll-x { overflow-x: auto !important; }
  .phone-scroll-x > * { min-width: 960px; }
  .burn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .burn-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .burn-track { grid-column: 1 / -1; grid-row: 2; }

  /* touch: 44px targets, and 16px text so iOS does not zoom into a focused field */
  .btn-sm, .btn-ghost, .btn-primary, .chip-btn, .tab, .segment { min-height: 44px; }
  .icon-btn, .cell-btn { width: 44px; height: 44px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }

  /* shell: the side panel becomes a drawer, always unfolded */
  .shell { display: block; }
  .side-panel {
    position: fixed; top: 0; left: 0; bottom: 0; width: 292px; height: auto; margin: 0; z-index: 60;
    border-radius: 0 22px 22px 0; background: var(--surface); visibility: hidden; transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s .25s;
  }
  .shell.menu-open .side-panel { transform: none; visibility: visible; transition-delay: 0s; box-shadow: 18px 0 40px -16px rgba(13, 38, 76, .4); }
  .menu-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(13, 38, 76, .38); }
  .pnav, .pcust { min-height: 46px; }
  .pnav { font-size: 14px; }

  .topbar { display: flex; height: 56px; padding: 0 8px; gap: 4px; margin: 0; top: 0; border-radius: 0; border: none; border-bottom: 1px solid var(--glass-border); }
  .crumbs { flex: 1; }

  /* search collapses to its magnifier and expands across the topbar while focused */
  .search-wrap { width: 44px !important; flex-shrink: 0; }
  .search-wrap svg { left: 15px; top: 15px; }
  .search-input { height: 44px; padding: 0 !important; cursor: pointer; color: transparent;
                  background: transparent; border-color: transparent; }
  .search-input::placeholder { color: transparent; }
  .kbd { display: none; }
  .search-wrap:focus-within { position: absolute !important; top: 6px; left: 8px; right: 8px; width: auto !important; z-index: 2; }
  .search-wrap:focus-within svg { left: 12px; }
  .search-wrap:focus-within .search-input { padding: 0 12px 0 34px !important; cursor: text; color: var(--ink);
                                             background: var(--surface); border-color: var(--accent); }
  .search-wrap:focus-within .search-input::placeholder { color: var(--muted-2); }
  .search-wrap #palette-listbox { width: auto !important; right: 0; top: 50px !important; }

  .bell-pop { position: fixed !important; top: 62px !important; left: 12px !important; right: 12px !important; width: auto !important; }
  .drawer-panel { width: 100% !important; max-width: 100vw !important; }
  .toast { left: 16px; right: 16px; bottom: 16px; }

  /* generic page furniture */
  .pad { padding: 20px 16px 40px; }
  .h1 { font-size: 24px; }
  .card { padding: 16px; }
  .row-head { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; }
  .row-head > .btn-primary { justify-content: center; }
  .segments { max-width: 100%; overflow-x: auto; }
  .tabs { width: 100%; overflow-x: auto; }
  .tab { flex-shrink: 0; white-space: nowrap; }

  /* fixed bottom bars (Verify, Guard rails): full width, wrapping */
  .action-bar { left: 0 !important; flex-wrap: wrap; gap: 10px !important; padding: 12px 16px 16px !important; }
  .action-bar-text { flex-basis: 100%; margin-right: 0 !important; }
  .action-bar > .btn-ghost, .action-bar > .btn-primary { flex: 1; justify-content: center; }

  /* ── page rules below ── */

  /* login */
  .login-top { padding: 24px 20px 0 !important; }
  .login-stage { padding: 20px 16px 28px !important; }
  .login-radar { width: 440px !important; height: 440px !important; }
  .login-card-wrap { width: 100% !important; max-width: 420px; }
  .login-card-wrap > .halo { width: 420px !important; height: 420px !important; margin: -210px 0 0 -210px !important; }
  .login-card { padding: 26px 20px 22px !important; }

  /* overview: cycle rows go to two lines — dot, name, state; then the buttons */
  .cycle-row { grid-template-columns: 8px minmax(0, 1fr) auto !important; align-items: start !important; }
  .cycle-row > :first-child { margin-top: 5px; }
  .cycle-row > :last-child { grid-column: 2 / -1; justify-content: flex-start !important; }
  .cycle-row > :last-child > button:last-child { flex: 1; }

  /* paid developments: the matrix shows one half-year at a time */
  .pd-matrix { row-gap: 8px !important; }
  .pd-months, .pd-cells { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .pd-cells > button { height: 36px !important; }
  .pd-matrix[data-half="1"] .pd-months > :nth-child(n+7),
  .pd-matrix[data-half="1"] .pd-cells > :nth-child(n+7),
  .pd-matrix[data-half="2"] .pd-months > :nth-child(-n+6),
  .pd-matrix[data-half="2"] .pd-cells > :nth-child(-n+6) { display: none; }

  /* forecast */
  .fc-head { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
  .fc-head .num { white-space: normal !important; }
  .fc-knob { flex-wrap: wrap; row-gap: 4px !important; }
  .fc-knob > .num { margin-left: auto; }
  .fc-knob > .range { order: 3; flex-basis: 100% !important; height: 28px; background: linear-gradient(var(--border-2), var(--border-2)) center / 100% 4px no-repeat; }
  .fc-knob > span:last-child { order: 4; min-width: 0 !important; text-align: left !important; }

  /* progress: four stages and three links in 358px */
  .progress-stage { width: 76px !important; }
  .progress-stage > span { font-size: 11px !important; text-align: center; }
  .progress-link { width: 12px !important; }

  /* verify */
  .verify-main { padding: 18px 16px 200px !important; }
  .wl-filter { flex-wrap: wrap; }
  .wl-filter > :first-child { flex: 1 1 100% !important; max-width: none !important; }
  .action-bar-buttons { width: 100%; margin-left: 0 !important; flex-wrap: wrap; }
  .action-bar-buttons > button { flex: 1; justify-content: center; }
  .action-bar-buttons > .btn-primary { order: -1; flex-basis: 100%; }

  /* transfer */
  .tr-detail, .tr-diff { grid-template-columns: minmax(0, 1fr); }
  .tr-detail { padding: 14px; }
  .tr-detail select { width: 100%; height: 44px; }
  .tr-chk { min-height: 44px; align-items: center; }
  .tr-bar { flex-wrap: wrap; }
  .tr-bar > .btn-primary { flex-basis: 100%; justify-content: center; }
  .tr-panel { overflow: clip !important; }
}