/* Concept 08 "Dream Team Definitive" design system, ported from the approved showcase
   (dream-team/showcase-08-definitive, tag design/08-complete, c7c9f3e): the <style> blocks of
   parts/*.vue and screens/*.vue, in that order. The showcase frame's `@container dt` width queries
   are media queries here, because the application's root is the viewport. Everything is scoped to
   .c-definitive, which the application's pages put on <body>. */

@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/Newsreader-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/Newsreader-Italic-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

/* ---- parts/Shell.vue ---- */
.c-definitive {
  /* surfaces */
  --bg: #0A0E16; --bg-2: #0E1422; --s1: #121928; --s2: #172031; --s3: #1E293D; --sunk: #070A11;
  --line: rgba(168, 188, 226, .11); --line-2: rgba(168, 188, 226, .2); --line-3: rgba(168, 188, 226, .34);
  /* ink */
  --fg: #ECF0F7; --fg-2: #B3BCCD; --fg-3: #8F99AC;
  /* action, focus and selection */
  --blue: #3D63DD; --blue-hi: #4B71EA; --blue-lo: #3253C2; --sel: #91B1FF; --sel-wash: rgba(110, 148, 255, .14); --focus: #A9C1FF;
  /* earned value only */
  --gold: #E3BF73; --gold-hi: #F0D394; --gold-line: rgba(227, 191, 115, .42); --gold-wash: rgba(227, 191, 115, .09);
  /* risk: overdue, error, over limit, sent back */
  --risk: #F3929E; --risk-line: rgba(243, 146, 158, .45); --risk-wash: rgba(243, 146, 158, .09);
  /* progression ink */
  --cred: #CBD7EE; --cred-hi: #E1E8F6; --cred-ink: #0C1220; --claim: #DCE3F0; --obs: #8EA2BB;
  /* game identity only */
  --g-wow: #A99CF4; --g-ffxiv: #61C8CE; --g-ow: #F1955F;
  --serif: "Newsreader", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --e1: inset 0 0 0 1px var(--line);
  --e2: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 0 0 1px var(--line), 0 22px 44px -28px rgba(1, 4, 12, .95);
  --e3: 0 28px 56px -20px rgba(0, 0, 0, .85);
  --t-fast: 120ms; --t: 180ms; --t-slow: 260ms; --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: 16px; --tap: 44px; --tabs: 64px;
  --df-mark-sky: var(--sel);
  background: var(--bg); color: var(--fg); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums lining-nums;
}
.c-definitive *, .c-definitive *::before, .c-definitive *::after { box-sizing: border-box; }
.c-definitive button, .c-definitive input, .c-definitive textarea { font: inherit; color: inherit; }
.c-definitive :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.c-definitive ::selection { background: rgba(145, 177, 255, .32); }
.c-definitive .df-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.c-definitive [tabindex="-1"]:focus:not(:focus-visible), .c-definitive h1[tabindex="-1"]:focus, .c-definitive h2[tabindex="-1"]:focus { outline: none; }

.c-definitive .df-shell { min-height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(110% 55% at 70% -12%, #14203A 0%, transparent 62%) no-repeat, radial-gradient(80% 40% at 0% 0%, #101830 0%, transparent 60%) no-repeat, var(--bg); }
.c-definitive .df-main { flex: 1; padding-bottom: 32px; min-width: 0; }
.c-definitive .df-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); min-width: 0; }

/* masthead */
.c-definitive .df-top { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(10, 14, 22, .72); }
/* the masthead wraps rather than overflows when text is enlarged or re-spaced (WCAG 1.4.10, 1.4.12) */
.c-definitive .df-top-in { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.c-definitive .df-brand { display: inline-flex; align-items: center; gap: 10px; padding: 0 4px 0 0; border: 0; background: none; cursor: pointer; min-height: var(--tap); border-radius: var(--r-sm); }
.c-definitive .df-word { display: inline-flex; gap: 6px; align-items: baseline; line-height: 1; white-space: nowrap; }
.c-definitive .df-word b { font: italic 600 21px/1 var(--serif); letter-spacing: -.01em; color: var(--fg); font-variation-settings: "opsz" 24; }
.c-definitive .df-word span { font: 600 15px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.c-definitive .df-nav { display: none; }
.c-definitive .df-top-end { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 8px; min-width: 0; }
.c-definitive .df-demo { font-size: 13px; font-weight: 500; color: var(--fg-2); padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.c-definitive .df-who { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.c-definitive .df-who-name { display: none; font-size: 14px; font-weight: 500; }
.c-definitive .df-who-pts { font-size: 14.5px; font-weight: 600; }
.c-definitive .df-who-role { font-size: 13px; color: var(--fg-2); }
.c-definitive .df-nav-link { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--fg-2); font-size: 14px; font-weight: 500; transition: color var(--t) var(--ease), background-color var(--t) var(--ease); }
.c-definitive .df-nav-link:hover { color: var(--fg); background: rgba(168, 188, 226, .07); }
.c-definitive .df-nav-link[aria-current="page"] { color: var(--fg); background: var(--sel-wash); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .35); }
.c-definitive .df-nav-link .df-icon { color: var(--fg-3); }
.c-definitive .df-nav-link[aria-current="page"] .df-icon { color: var(--sel); }
.c-definitive .df-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; }

/* phone navigation: a thumb bar at the bottom */
.c-definitive .df-tabs { position: sticky; top: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 6px 10px;
  background: rgba(11, 15, 24, .96); border-bottom: 1px solid var(--line); }
.c-definitive .df-tab { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 4px; border: 0; background: none; border-radius: 12px; color: var(--fg-2); cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.c-definitive .df-tab:active { transform: scale(.97); }
.c-definitive .df-tab[aria-current="page"] { color: var(--fg); background: var(--sel-wash); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .32); }
.c-definitive .df-tab-ic { position: relative; display: grid; place-items: center; }
.c-definitive .df-tab[aria-current="page"] .df-tab-ic { color: var(--sel); }
.c-definitive .df-tab-l { min-width: 0; max-width: 100%; font-size: 13.5px; font-weight: 500; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.c-definitive .df-tab-n { position: absolute; top: -9px; right: -16px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 2px #0B0F18; }
@media (max-width: 430px) { .c-definitive .df-tab { flex-direction: column; gap: 1px; min-height: 50px; } .c-definitive .df-tab-l { font-size: 13px; } .c-definitive .df-tab-ic .df-icon { width: 20px; height: 20px; } }
@media (max-width: 359px) { .c-definitive .df-tabs { gap: 0; padding: 6px 4px; } .c-definitive .df-tab { padding: 0; } }
.c-definitive .df-top-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--fg-2); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
@media (max-width: 759px) { .c-definitive .df-shell[data-mode="owner"] .df-who-role, .c-definitive .df-shell[data-mode="owner"] .df-demo-x { display: none; } }
.c-definitive .df-top-link:hover { color: var(--fg); background: rgba(168, 188, 226, .07); }
.c-definitive .df-top-link[aria-current="page"] { color: var(--fg); background: var(--sel-wash); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .32); }
.c-definitive .df-top-link[aria-current="page"] .df-icon { color: var(--sel); }

@media (min-width: 760px) {
  .c-definitive { --gutter: 28px; --tap: 40px; }
  .c-definitive .df-top-in { min-height: 68px; gap: 0 32px; }
  .c-definitive .df-top-end { gap: 0 14px; }
  .c-definitive .df-nav { display: flex; gap: 4px; }
  .c-definitive .df-tabs { display: none; }
  .c-definitive .df-top-link { display: none; }
  .c-definitive .df-who-name { display: inline; }
  .c-definitive .df-who { padding-left: 14px; border-left: 1px solid var(--line); }
  .c-definitive .df-main { padding-bottom: 72px; }
}
@media (min-width: 1100px) { .c-definitive { --gutter: 44px; } }
@media (max-width: 359px) { .c-definitive .df-demo { display: none; } .c-definitive .df-word b { font-size: 19px; } .c-definitive .df-word span { font-size: 13px; } .c-definitive .df-top-in { gap: 0 10px; } }

/* type */
.c-definitive .df-eyebrow { margin: 0; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.c-definitive .df-display { margin: 0; font: 500 40px/1 var(--serif); letter-spacing: -.02em; color: var(--fg); text-wrap: balance; font-variation-settings: "opsz" 60; }
.c-definitive .df-title { margin: 0; font: 500 32px/1.08 var(--serif); letter-spacing: -.014em; color: var(--fg); text-wrap: balance; font-variation-settings: "opsz" 40; }
.c-definitive .df-h1o { margin: 0; font: 650 26px/1.15 var(--sans); letter-spacing: -.022em; color: var(--fg); }
.c-definitive .df-h2 { margin: 0; font: 600 17px/1.3 var(--sans); letter-spacing: -.01em; color: var(--fg); }
.c-definitive .df-h3 { margin: 0; font: 600 15px/1.35 var(--sans); color: var(--fg); }
.c-definitive .df-lede { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 62ch; text-wrap: pretty; }
.c-definitive .df-small { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.c-definitive .df-meta { font-size: 13px; line-height: 1.45; color: var(--fg-3); text-wrap: pretty; }
.c-definitive .df-label { font-size: 13px; font-weight: 600; color: var(--fg-2); letter-spacing: .01em; }
.c-definitive .df-pts { color: var(--gold); white-space: nowrap; }
.c-definitive .df-figure { font: 500 40px/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 60; }
.c-definitive .df-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 10px; min-width: 0; }
.c-definitive .df-late { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--risk); white-space: nowrap; }
@media (min-width: 760px) {
  .c-definitive .df-display { font-size: 60px; }
  .c-definitive .df-title { font-size: 42px; }
  .c-definitive .df-h1o { font-size: 30px; }
}

/* the cadence: the objective's own segment rhythm used as a divider (8 runs, 4 stages or n tasks) */
.c-definitive .df-cadence { position: relative; }
.c-definitive .df-cadence::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 calc(100% / var(--cad-n, 8) - 5px), transparent calc(100% / var(--cad-n, 8) - 5px) calc(100% / var(--cad-n, 8))); }

/* surfaces */
.c-definitive .df-panel { background: var(--s1); border-radius: var(--r-lg); box-shadow: var(--e2); min-width: 0; }
.c-definitive .df-pad { padding: 16px; }
@media (min-width: 760px) { .c-definitive .df-pad { padding: 20px 22px; } }
.c-definitive .df-rule { height: 1px; border: 0; margin: 0; background: var(--line); }

/* buttons: one filled blue primary per region; quiet outline; text; risk */
.c-definitive .df-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border: 0; border-radius: 12px;
  background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0; word-spacing: .06em; cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -12px rgba(50, 90, 230, .9);
  transition: background-color var(--t) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease); }
.c-definitive .df-btn:hover { background: var(--blue-hi); }
.c-definitive .df-btn:active { transform: scale(.97); background: var(--blue-lo); }
.c-definitive .df-btn[data-v="quiet"] { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; }
.c-definitive .df-btn[data-v="quiet"]:hover { background: rgba(168, 188, 226, .07); box-shadow: inset 0 0 0 1px var(--line-3); }
.c-definitive .df-btn[data-v="risk"] { background: transparent; color: var(--risk); box-shadow: inset 0 0 0 1px var(--risk-line); font-weight: 500; }
.c-definitive .df-btn[data-v="risk"]:hover { background: var(--risk-wash); }
.c-definitive .df-btn[data-v="text"] { background: none; box-shadow: none; color: var(--sel); padding: 0 6px; font-weight: 500; }
.c-definitive .df-btn[data-v="text"]:hover { text-decoration: underline; text-underline-offset: 4px; }
.c-definitive .df-btn[data-size="sm"] { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.c-definitive .df-btn[data-size="lg"] { min-height: 50px; font-size: 15px; padding: 0 22px; }
.c-definitive .df-btn[data-block] { width: 100%; }
.c-definitive .df-btn:disabled, .c-definitive .df-btn[aria-disabled="true"] { cursor: not-allowed; transform: none; background: var(--s3); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.c-definitive .df-btn[data-v]:disabled, .c-definitive .df-btn[data-v][aria-disabled="true"] { background: transparent; color: var(--fg-3); }
.c-definitive .df-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; font: 600 11.5px/1 var(--sans); color: inherit; box-shadow: inset 0 0 0 1px currentColor; opacity: .7; }
.c-definitive .df-iconbtn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 12px; background: transparent; color: var(--fg); cursor: pointer;
  transition: background-color var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.c-definitive .df-iconbtn:hover { background: rgba(168, 188, 226, .08); }
.c-definitive .df-iconbtn:active { transform: scale(.93); }
.c-definitive .df-iconbtn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.c-definitive .df-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--sel); font-size: 14px; font-weight: 500; cursor: pointer; min-height: 32px; }
.c-definitive .df-link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 759px) { .c-definitive .df-btn[data-size="sm"] { min-height: 44px; } .c-definitive .df-link { min-height: 44px; } }

/* state tags: a shape and a word, never colour alone */
.c-definitive .df-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--fg-2); white-space: nowrap; }
.c-definitive .df-tag[data-tone="act"] { color: var(--fg); font-weight: 600; }
.c-definitive .df-tag[data-tone="risk"] { color: var(--risk); font-weight: 600; }

/* fields */
.c-definitive .df-field { display: grid; gap: 6px; min-width: 0; }
.c-definitive .df-input, .c-definitive .df-textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--sunk); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; transition: box-shadow var(--t) var(--ease); }
.c-definitive .df-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.c-definitive .df-input::placeholder, .c-definitive .df-textarea::placeholder { color: var(--fg-3); }
.c-definitive .df-input:focus, .c-definitive .df-textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.c-definitive [aria-invalid="true"].df-input, .c-definitive [aria-invalid="true"].df-textarea { box-shadow: inset 0 0 0 1.5px var(--risk); }
.c-definitive .df-error { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--risk-wash); font-size: 14px; line-height: 1.45; color: var(--fg); box-shadow: inset 3px 0 0 var(--risk); }
.c-definitive .df-error .df-icon { margin-top: 1px; color: var(--risk); }
.c-definitive .df-stepper { display: inline-flex; align-items: center; border-radius: 14px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line-2); }
.c-definitive .df-stepper output { min-width: 56px; text-align: center; font: 600 20px/1 var(--sans); }
.c-definitive .df-stepper .df-iconbtn { width: 44px; height: 44px; }

/* checkbox: the native input drawn as the box, so focus and state stay native */
.c-definitive .df-cb { position: relative; display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.c-definitive .df-cb input { appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px; border-radius: 7px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-3); cursor: pointer; transition: background-color var(--t) var(--ease); }
.c-definitive .df-cb input:checked { background: var(--blue); box-shadow: none; }
.c-definitive .df-cb input:disabled { background: var(--cred); box-shadow: none; cursor: not-allowed; }
.c-definitive .df-cb .df-icon { position: absolute; pointer-events: none; color: transparent; }
.c-definitive .df-cb input:checked + .df-icon { color: #fff; }
.c-definitive .df-cb input:disabled + .df-icon { color: var(--cred-ink); }

/* segmented filter */
.c-definitive .df-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.c-definitive .df-seg button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--fg-2); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.c-definitive .df-seg button:hover { color: var(--fg); }
.c-definitive .df-seg button[aria-pressed="true"] { background: var(--s3); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .4); }
@media (max-width: 759px) { .c-definitive .df-seg button { min-height: 44px; } }

/* skeletons: static shapes that mirror the populated layout */
.c-definitive .df-sk { display: block; border-radius: 10px; background: rgba(168, 188, 226, .07); }
.c-definitive .df-sk-line { height: 12px; margin: 8px 0; border-radius: 6px; }
.c-definitive [aria-busy="true"] { animation: df-fade var(--t-slow) var(--ease) both; }

/* toast: one live region above the phone bar */
.c-definitive .df-toasts { position: sticky; bottom: 20px; z-index: 40; height: 0; pointer-events: none; }
.c-definitive .df-toast { position: absolute; bottom: 0; left: var(--gutter); right: var(--gutter); max-width: 520px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 8px 12px 12px; border-radius: 14px; background: #EEF2F9; color: #0B1222; font-size: 14px; font-weight: 500; line-height: 1.45; box-shadow: var(--e3); pointer-events: auto; }
.c-definitive .df-toast-ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2F52C4; color: #fff; }
.c-definitive .df-toast-msg { flex: 1; padding-top: 2px; }
.c-definitive .df-toast[data-ok="no"] { background: #3A2029; color: var(--fg); box-shadow: inset 0 0 0 1px var(--risk-line), var(--e3); }
.c-definitive .df-toast[data-ok="no"] .df-toast-ic { background: var(--risk); color: #2A1016; }
.c-definitive .df-toast-x { display: grid; place-items: center; width: 32px; height: 32px; margin: -4px 0; border: 0; border-radius: 8px; background: none; color: inherit; opacity: .7; cursor: pointer; }
.c-definitive .df-toast-x:hover { opacity: 1; }
.c-definitive .df-toast-enter-active, .c-definitive .df-toast-leave-active { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.c-definitive .df-toast-enter-from, .c-definitive .df-toast-leave-to { opacity: 0; transform: translateY(8px); }

/* motion: short, transform and opacity only */
.c-definitive .df-in { animation: df-in var(--t-slow) var(--ease) both; }
.c-definitive .df-in-2 { animation: df-in var(--t-slow) 50ms var(--ease) both; }
@keyframes df-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes df-fade { from { opacity: 0; } to { opacity: 1; } }
.c-definitive[data-motion="reduced"] *, .c-definitive[data-motion="reduced"] *::before, .c-definitive[data-motion="reduced"] *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  .c-definitive *, .c-definitive *::before, .c-definitive *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- parts/Mark.vue ---- */
.c-definitive .df-mark { flex: none; display: block; }

/* ---- parts/Icon.vue ---- */
.c-definitive .df-icon { flex: none; display: inline-block; vertical-align: middle; }

/* ---- parts/Glyph.vue ---- */
.c-definitive .df-glyph { flex: none; display: inline-block; vertical-align: middle; overflow: visible; }
.c-definitive .df-g-fill { fill: var(--cred); }
.c-definitive .df-g-ring { fill: none; stroke: var(--claim); stroke-width: 1.5; }
.c-definitive .df-g-pip { fill: var(--claim); }
.c-definitive .df-g-draft { fill: var(--sel-wash); stroke: var(--sel); stroke-width: 1.5; stroke-dasharray: 2.4 1.8; }
.c-definitive .df-g-risk { fill: none; stroke: var(--risk); stroke-width: 1.5; stroke-linecap: round; }
.c-definitive .df-g-floor { stroke: var(--fg-3); stroke-width: 1.6; stroke-linecap: round; }
.c-definitive .df-g-dots { fill: var(--obs); }
.c-definitive .df-g-seal { fill: var(--gold-wash); stroke: var(--gold); stroke-width: 1.5; }

/* ---- parts/GameMark.vue ---- */
.c-definitive .df-game { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); white-space: nowrap; line-height: 1.2; }
.c-definitive .df-game-glyph { flex: none; color: var(--game, var(--fg-2)); }
.c-definitive [data-game="wow"] { --game: var(--g-wow); }
.c-definitive [data-game="ffxiv"] { --game: var(--g-ffxiv); }
.c-definitive [data-game="ow"] { --game: var(--g-ow); }

/* ---- parts/Portrait.vue ---- */
.c-definitive .df-por { margin: 0; display: grid; gap: 8px; min-width: 0; --game: var(--g-wow); }
.c-definitive .df-por-frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(100% 70% at 50% 42%, color-mix(in srgb, var(--game) 22%, #131C30) 0%, #0B1020 72%);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .95), inset 0 0 0 1px var(--line-2); }
.c-definitive .df-por-frame::after { content: ""; position: absolute; inset: 7px; border-radius: calc(var(--r-lg) - 5px); box-shadow: inset 0 0 0 1px rgba(236, 240, 247, .14); pointer-events: none; }
.c-definitive .df-por[data-kind="illustration"] .df-por-frame::before { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--game) 16%, rgba(8, 11, 20, .55)), transparent); }
.c-definitive .df-por-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.c-definitive .df-por[data-kind="provider"] .df-por-frame, .c-definitive .df-por[data-kind="none"] .df-por-frame { aspect-ratio: 1; }
.c-definitive .df-por-eng, .c-definitive .df-por-emblem { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-definitive .df-eng-a { fill: none; stroke: var(--game); stroke-opacity: .3; stroke-width: .9; }
.c-definitive .df-eng-b { fill: none; stroke: var(--game); stroke-opacity: .22; stroke-width: .9; stroke-dasharray: 1.5 5; }
.c-definitive .df-eng-g { fill: none; stroke: var(--game); stroke-opacity: .7; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.c-definitive .df-eng-big { stroke-opacity: .4; stroke-width: .22; fill: color-mix(in srgb, var(--game) 8%, transparent); }
.c-definitive .df-eng-i { font: 500 52px/1 var(--serif); fill: var(--fg); font-variation-settings: "opsz" 60; }
.c-definitive .df-eng-i-sm { font-size: 84px; }
.c-definitive .df-medal { position: relative; display: grid; place-items: center; width: calc(var(--m) + 18px); height: calc(var(--m) + 18px); border-radius: 50%; background: #0A0F1C;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--game) 60%, transparent), 0 0 0 6px rgba(10, 15, 28, .92), 0 0 0 7px color-mix(in srgb, var(--game) 32%, transparent), 0 16px 30px -12px rgba(0, 0, 0, .9); }
.c-definitive .df-medal-img { display: block; border-radius: 50%; object-fit: cover; }
.c-definitive .df-por-cap { font-size: 13px; line-height: 1.4; color: var(--fg-3); }

.c-definitive .df-por[data-size="plate"] .df-por-frame { border-radius: var(--r-md); }
.c-definitive .df-por[data-size="plate"] .df-por-frame::after { inset: 5px; border-radius: calc(var(--r-md) - 4px); }
.c-definitive .df-por[data-size="chip"], .c-definitive .df-por[data-size="mini"] { display: block; flex: none; }
.c-definitive .df-por[data-size="chip"] .df-por-frame { width: 44px; height: 44px; aspect-ratio: auto; border-radius: 12px; }
.c-definitive .df-por[data-size="mini"] .df-por-frame { width: 32px; height: 32px; aspect-ratio: auto; border-radius: 9px; }
.c-definitive .df-por[data-size="chip"] .df-por-frame::after, .c-definitive .df-por[data-size="mini"] .df-por-frame::after { inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(236, 240, 247, .14); }
.c-definitive .df-por[data-size="chip"] .df-por-frame::before, .c-definitive .df-por[data-size="mini"] .df-por-frame::before { display: none; }
.c-definitive .df-por[data-size="chip"] .df-por-art, .c-definitive .df-por[data-size="mini"] .df-por-art { object-position: 50% 30%; transform: scale(1.5); transform-origin: 50% 32%; }
.c-definitive .df-por[data-size="chip"] .df-medal, .c-definitive .df-por[data-size="mini"] .df-medal { width: 100%; height: 100%; border-radius: 0; background: none; box-shadow: none; }
.c-definitive .df-por[data-size="chip"] .df-medal-img, .c-definitive .df-por[data-size="mini"] .df-medal-img { border-radius: 0; width: 100% !important; height: 100% !important; }

/* ---- parts/Track.vue ---- */
.c-definitive .df-tr { display: grid; gap: 12px; min-width: 0; }
.c-definitive .df-tr[data-size="row"] { gap: 6px; }
.c-definitive .df-tr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.c-definitive .df-tr-fig { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 600; color: var(--fg); }
.c-definitive .df-tr-fig b { font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.c-definitive .df-tr-fig span { font-size: 20px; color: var(--fg-3); }
.c-definitive .df-tr-fig small { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--fg-2); }
.c-definitive .df-tr-keys { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; }
.c-definitive .df-tr-draftword { color: var(--sel); }
.c-definitive .df-tr-obstag { color: var(--fg-2); }
.c-definitive .df-tr-obstag[data-state="stale"], .c-definitive .df-tr-obstag[data-state="unavailable"] { color: var(--risk); }

.c-definitive .df-tr-main { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.c-definitive .df-tr[data-size="row"] .df-tr-main { align-items: center; gap: 8px; }
.c-definitive .df-tr-lane { flex: 1; min-width: 0; display: grid; gap: 6px; }
.c-definitive .df-tr-segs, .c-definitive .df-tr-who, .c-definitive .df-tr-obs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.c-definitive .df-tr-segs-w { display: flex; flex: 1; gap: 3px; }
.c-definitive .df-tr-segs-w .df-seg-c { flex: 1 1 0; }

/* segments */
.c-definitive .df-seg-c { position: relative; height: 32px; border-radius: 9px; min-width: 0; }
.c-definitive .df-seg-c i { position: absolute; inset: 0; border-radius: inherit; display: block; transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), opacity var(--t) var(--ease); }
.c-definitive .df-seg-c[data-kind="approved"] i { background: linear-gradient(180deg, var(--cred-hi), var(--cred) 75%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2); }
.c-definitive .df-seg-c[data-kind="claimed"] i { box-shadow: inset 0 0 0 1.75px var(--claim); }
.c-definitive .df-seg-c[data-kind="claimed"] i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--claim); }
.c-definitive .df-seg-c[data-kind="draft"] i { background: var(--sel-wash); border: 1.75px dashed var(--sel); }
.c-definitive .df-seg-c[data-kind="sentback"] i { border: 1.75px dashed var(--risk); }
.c-definitive .df-seg-c[data-kind="open"] i { background: rgba(168, 188, 226, .05); }
.c-definitive .df-seg-c[data-kind="open"] i::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 7px; height: 2px; border-radius: 2px; background: var(--fg-3); opacity: .55; }
.c-definitive .df-seg-c[data-focus="yes"] { outline: 2px solid var(--sel); outline-offset: 3px; }
.c-definitive .df-seg-c[data-dropped="yes"] i { opacity: .35; }
.c-definitive .df-seg-c[data-dropped="yes"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(243, 146, 158, .5) 5px 6.5px); }
.c-definitive .df-tr[data-size="row"] .df-seg-c { height: 10px; border-radius: 3.5px; }
.c-definitive .df-tr[data-size="row"] .df-tr-segs { gap: 3px; }
.c-definitive .df-tr[data-size="row"] .df-seg-c[data-kind="claimed"] i { box-shadow: inset 0 0 0 1.4px var(--claim); }
.c-definitive .df-tr[data-size="row"] .df-seg-c[data-kind="claimed"] i::after { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; }
.c-definitive .df-tr[data-size="row"] .df-seg-c[data-kind="sentback"] i, .c-definitive .df-tr[data-size="row"] .df-seg-c[data-kind="draft"] i { border-width: 1.4px; }
.c-definitive .df-tr[data-size="row"] .df-seg-c[data-kind="open"] i::after { bottom: 3px; height: 1.5px; left: 35%; right: 35%; }

/* observed: a dotted ruler above the lane, never a segment */
.c-definitive .df-tr-obs { height: 8px; align-items: center; }
.c-definitive .df-tr-obs i { position: relative; height: 0; border-top: 3px dotted var(--obs); }
.c-definitive .df-tr-obs i::after { content: ""; position: absolute; right: -1px; top: -6px; width: 2px; height: 10px; border-radius: 1px; background: var(--obs); }
.c-definitive .df-tr-obs[data-state="stale"] i, .c-definitive .df-tr-obs[data-state="unavailable"] i { border-top-style: dashed; border-top-color: var(--risk); opacity: .8; }
.c-definitive .df-tr-obs[data-state="stale"] i::after { background: var(--risk); }

/* attribution under each segment */
.c-definitive .df-tr-who span { display: grid; justify-items: center; line-height: 1.2; min-width: 0; }
.c-definitive .df-tr-who b { font-size: 13px; font-weight: 600; color: var(--fg-2); letter-spacing: .02em; }
.c-definitive .df-tr-who small { font-size: 13px; color: var(--fg-3); }
.c-definitive .df-tr-who [data-mine="yes"] b { color: var(--fg); }
.c-definitive .df-tr-who [data-kind="claimed"] b, .c-definitive .df-tr-who [data-kind="sentback"] b { font-weight: 500; }
.c-definitive .df-tr-who [data-kind="draft"] b { color: var(--sel); font-weight: 500; }

/* Vault gate and bonus seal */
.c-definitive .df-tr-end { display: flex; flex-direction: column; gap: 10px; flex: none; padding-top: 14px; }
.c-definitive .df-tr[data-size="row"] .df-tr-end { flex-direction: row; gap: 4px; padding: 0; }
.c-definitive .df-gate, .c-definitive .df-seal { display: inline-flex; align-items: center; gap: 10px; }
.c-definitive .df-gate-box { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--fg-3); border: 1.5px dashed var(--line-3); }
.c-definitive .df-gate[data-state="submitted"] .df-gate-box { border: 0; color: var(--fg); box-shadow: inset 0 0 0 1.75px var(--claim); }
.c-definitive .df-gate[data-state="approved"] .df-gate-box { border: 0; background: var(--cred); color: var(--cred-ink); }
.c-definitive .df-gate[data-state="rejected"] .df-gate-box { border-color: var(--risk); color: var(--risk); }
.c-definitive .df-seal-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.c-definitive .df-seal[data-state="ready"] .df-seal-ic { box-shadow: inset 0 0 0 2px var(--gold); background: var(--gold-wash); }
.c-definitive .df-seal[data-state="paid"] .df-seal-ic { background: var(--gold); color: #1C1407; box-shadow: none; }
.c-definitive .df-seal[data-state="void"] .df-seal-ic { color: var(--fg-3); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.c-definitive .df-tr[data-size="row"] .df-gate-box, .c-definitive .df-tr[data-size="row"] .df-seal-ic { width: 22px; height: 22px; border-radius: 6px; }
.c-definitive .df-tr[data-size="row"] .df-seal-ic { border-radius: 50%; }
.c-definitive .df-tr[data-size="row"] .df-gate-box { border-width: 1.2px; }
.c-definitive .df-tr-endt { display: grid; line-height: 1.25; }
.c-definitive .df-tr-endt b { font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.c-definitive .df-tr-endt small { font-size: 13px; color: var(--fg-3); white-space: nowrap; }

.c-definitive .df-tr-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: flex-start; margin: 0; }
.c-definitive .df-tr-obsw { display: inline-flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.c-definitive .df-tr-obsw .df-glyph { margin-top: 4px; }
.c-definitive .df-tr-obsw[data-state="stale"], .c-definitive .df-tr-obsw[data-state="unavailable"] { color: var(--risk); }
.c-definitive .df-tr-line { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; font-size: 13px; color: var(--fg-2); }
.c-definitive .df-tr-line > span { white-space: nowrap; }
.c-definitive .df-tr-line > span:not(:last-child)::after { content: " ·"; color: var(--fg-3); }
.c-definitive .df-tr-line b { color: var(--fg); font-weight: 600; }
.c-definitive .df-tr-legend { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--fg-2); }
.c-definitive .df-tr-legend li { display: inline-flex; gap: 7px; align-items: center; }

@media (max-width: 560px) {
  .c-definitive .df-tr[data-size="full"] .df-tr-main { flex-direction: column; align-items: stretch; gap: 12px; }
  .c-definitive .df-tr[data-size="full"] .df-tr-end { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; padding-top: 0; }
  .c-definitive .df-tr[data-size="full"] .df-tr-segs, .c-definitive .df-tr[data-size="full"] .df-tr-who, .c-definitive .df-tr[data-size="full"] .df-tr-obs { gap: 4px; }
  .c-definitive .df-tr-who b, .c-definitive .df-tr-who small { font-size: 13px; letter-spacing: 0; }
}
@media (max-width: 359px) { .c-definitive .df-tr-who small { display: none; } }
.c-definitive .df-tr[data-narrow="yes"][data-size="full"] .df-tr-main { flex-direction: column; align-items: stretch; gap: 12px; }
.c-definitive .df-tr[data-narrow="yes"][data-size="full"] .df-tr-end { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; padding-top: 0; }

/* FFXIV proof and review workflow */
.c-definitive .df-ff { container: dfff / inline-size; }
.c-definitive .df-ff-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.c-definitive .df-ff-chain li { position: relative; display: grid; justify-items: start; align-content: start; gap: 8px; min-width: 0; padding-right: 8px; }
.c-definitive .df-ff-chain li::before { content: ""; position: absolute; left: 34px; right: 2px; top: 15px; height: 2px; border-radius: 2px; background: var(--line-2); }
.c-definitive .df-ff-chain li:last-child::before { display: none; }
.c-definitive .df-ff-node { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--cred-ink); box-shadow: inset 0 0 0 1.5px var(--line-3); background: var(--bg-2); }
.c-definitive .df-ff-chain li[data-st="done"] .df-ff-node { color: var(--fg); background: var(--s2); box-shadow: inset 0 0 0 1.5px var(--fg-3); }
.c-definitive .df-ff-chain li[data-st="need"] .df-ff-node { color: var(--fg-2); box-shadow: none; border: 1.5px dashed var(--fg-3); }
.c-definitive .df-ff-chain li[data-st="current"] .df-ff-node { box-shadow: inset 0 0 0 1.75px var(--claim); }
.c-definitive .df-ff-chain li[data-st="current"] .df-ff-node i { width: 8px; height: 8px; border-radius: 50%; background: var(--claim); }
.c-definitive .df-ff-chain li[data-st="sentback"] .df-ff-node { box-shadow: none; border: 1.75px dashed var(--risk); }
.c-definitive .df-ff-chain li:last-child .df-ff-node { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.c-definitive .df-ff-chain li[data-st="paid"] .df-ff-node { background: var(--gold); color: #1C1407; box-shadow: none; }
.c-definitive .df-ff-t { display: grid; gap: 1px; min-width: 0; }
.c-definitive .df-ff-t b { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.c-definitive .df-ff-chain li[data-st="open"] .df-ff-t b { color: var(--fg-2); font-weight: 500; }
.c-definitive .df-ff-chain li[data-st="need"] .df-ff-t small { color: var(--fg-2); }
.c-definitive .df-ff-t small { font-size: 13px; color: var(--fg-3); }
.c-definitive .df-ff-chain li[data-st="current"] .df-ff-t small { color: var(--fg); }
.c-definitive .df-ff-chain li[data-st="sentback"] .df-ff-t small { color: var(--risk); }
.c-definitive .df-ff-t small.df-ff-pay { color: var(--gold); }
.c-definitive .df-tr[data-size="row"] .df-ff-chain { display: flex; gap: 0; width: 148px; }
.c-definitive .df-tr[data-size="row"] .df-ff-chain li { flex: 1; padding: 0; }
.c-definitive .df-tr[data-size="row"] .df-ff-chain li:last-child { flex: none; }
.c-definitive .df-tr[data-size="row"] .df-ff-chain li::before { left: 16px; right: 2px; top: 6px; height: 1.5px; }
.c-definitive .df-tr[data-size="row"] .df-ff-node { width: 14px; height: 14px; border-radius: 4px; }
.c-definitive .df-tr[data-size="row"] .df-ff-chain li[data-st="current"] .df-ff-node i { width: 4px; height: 4px; }
.c-definitive .df-tr[data-size="row"] .df-ff-chain li[data-st="sentback"] .df-ff-node, .c-definitive .df-tr[data-size="row"] .df-ff-chain li[data-st="need"] .df-ff-node { border-width: 1.3px; }
.c-definitive .df-tr[data-size="row"] .df-ff { display: flex; }
@container dfff (max-width: 460px) {
  .c-definitive .df-tr[data-size="full"] .df-ff-chain { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .c-definitive .df-tr[data-size="full"] .df-ff-chain li { grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; padding: 0; }
  .c-definitive .df-tr[data-size="full"] .df-ff-chain li::before { left: 13px; right: auto; top: 30px; width: 2px; height: 10px; }
  .c-definitive .df-tr[data-size="full"] .df-ff-node { width: 28px; height: 28px; border-radius: 9px; }
  .c-definitive .df-tr[data-size="full"] .df-ff-t { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; }
}

/* Overwatch checklist */
.c-definitive .df-ow { list-style: none; margin: 0; padding: 0; display: grid; }
.c-definitive .df-ow-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "b l p" "b w w"; gap: 2px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.c-definitive .df-ow-row:last-child { border-bottom: 0; }
.c-definitive .df-ow-box, .c-definitive .df-ow-row > .df-seal { grid-area: b; justify-self: center; }
.c-definitive .df-ow-box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--cred-ink); box-shadow: inset 0 0 0 1.5px var(--line-3); }
.c-definitive .df-ow-row[data-kind="approved"] .df-ow-box { background: var(--cred); box-shadow: none; }
.c-definitive .df-ow-row[data-kind="claimed"] .df-ow-box { box-shadow: inset 0 0 0 1.75px var(--claim); }
.c-definitive .df-ow-row[data-kind="claimed"] .df-ow-box i { width: 6px; height: 6px; border-radius: 50%; background: var(--claim); }
.c-definitive .df-ow-l { grid-area: l; font-size: 14.5px; color: var(--fg); min-width: 0; }
.c-definitive .df-ow-l small { display: block; font-size: 13px; color: var(--fg-3); }
.c-definitive .df-ow-who { grid-area: w; font-size: 13px; color: var(--fg-2); }
.c-definitive .df-ow-who b { font-weight: 650; color: var(--fg); }
.c-definitive .df-ow-row[data-kind="open"] .df-ow-who { color: var(--fg-3); }
.c-definitive .df-ow-row[data-kind="open"] .df-ow-who b { color: var(--fg-2); }
.c-definitive .df-ow-p { grid-area: p; font-size: 14px; font-weight: 600; text-align: right; }
.c-definitive .df-ow-p[data-void="yes"] { color: var(--fg-3); text-decoration: line-through; }
.c-definitive .df-ow-bonus { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--gold-line); border-bottom: 0; }
.c-definitive .df-ow-bonus .df-seal-ic { width: 26px; height: 26px; }
.c-definitive .df-tr-reset { color: var(--fg); }
.c-definitive .df-tr-reset .df-icon { color: var(--fg-3); }
@media (min-width: 640px) {
  .c-definitive .df-tr:not([data-narrow]) .df-ow-row { grid-template-columns: 26px minmax(0, 1fr) 240px 76px; grid-template-areas: "b l w p"; }
}

/* ---- parts/Band.vue ---- */
.c-definitive .df-band { --game: var(--g-wow); position: relative; overflow: hidden; display: grid; gap: 18px; padding: 18px 16px; border-radius: var(--r-xl); min-width: 0;
  background: radial-gradient(70% 130% at 100% 0%, color-mix(in srgb, var(--game) 14%, transparent), transparent 62%), linear-gradient(170deg, #141D31, var(--s1) 62%);
  box-shadow: var(--e2), inset 0 1px 0 color-mix(in srgb, var(--game) 30%, transparent); }
.c-definitive .df-band-tex { position: absolute; top: 0; right: 0; width: min(40%, 420px); height: 240px; pointer-events: none;
  -webkit-mask-image: radial-gradient(110% 90% at 100% 0%, #000 30%, transparent 72%); mask-image: radial-gradient(110% 90% at 100% 0%, #000 30%, transparent 72%); }
.c-definitive .df-tex { fill: none; stroke: var(--game); stroke-opacity: .14; stroke-width: 1; stroke-linejoin: round; }
.c-definitive .df-band > *:not(.df-band-tex) { position: relative; }
.c-definitive .df-band-top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; align-items: start; }
.c-definitive .df-band-id { display: grid; gap: 6px; min-width: 0; }
.c-definitive .df-band-kick { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--fg-2); }
.c-definitive .df-band-title { margin: 0; font: 500 28px/1.1 var(--serif); letter-spacing: -.014em; color: var(--fg); font-variation-settings: "opsz" 40; text-wrap: balance; }
.c-definitive .df-band-seal { grid-column: 1 / -1; justify-self: start; display: grid; padding: 10px 16px; border-radius: 16px; background: rgba(9, 13, 22, .94); box-shadow: inset 0 0 0 1px var(--gold-line); }
.c-definitive .df-band-fig { font: 500 28px/1.05 var(--serif); font-variation-settings: "opsz" 36; }
.c-definitive .df-band-note { font-size: 13px; color: var(--fg-2); }
.c-definitive .df-band-bonus { font-size: 13px; color: var(--fg-2); margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.c-definitive .df-band-body { padding-top: 4px; min-width: 0; }
.c-definitive .df-band-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
@media (max-width: 559px) { .c-definitive .df-band-actions > .df-btn:first-child { flex: 1 1 100%; } }
@media (max-width: 759px) {
  .c-definitive .df-band[data-compact="yes"] { gap: 12px; padding: 14px; }
  .c-definitive .df-band[data-compact="yes"] .df-band-tex, .c-definitive .df-band[data-compact="yes"] .df-band-note, .c-definitive .df-band[data-compact="yes"] .df-band-bonus { display: none; }
  .c-definitive .df-band[data-compact="yes"] .df-band-title { font-size: 24px; }
  .c-definitive .df-band[data-compact="yes"] .df-band-seal { padding: 4px 12px; border-radius: 10px; }
  .c-definitive .df-band[data-compact="yes"] .df-band-fig { font-size: 18px; }
  .c-definitive .df-band[data-compact="yes"] .df-band-body { padding-top: 12px; }
}
@media (min-width: 760px) {
  .c-definitive .df-band { padding: 26px 30px; gap: 22px; }
  .c-definitive .df-band-top { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 20px; align-items: center; }
  .c-definitive .df-band-por .df-por[data-size="chip"] .df-por-frame { width: 76px; height: 76px; border-radius: 18px; }
  .c-definitive .df-band-title { font-size: 42px; }
  .c-definitive .df-band-seal { grid-column: auto; justify-self: end; text-align: right; min-width: 180px; }
  .c-definitive .df-band-body { padding-top: 22px; }
}
/* skeleton in the band's own shape */
.c-definitive .df-band-sk { display: grid; gap: 18px; padding: 22px; border-radius: var(--r-xl); background: linear-gradient(170deg, #141D31, var(--s1) 62%); box-shadow: var(--e2); }
.c-definitive .df-band-sk-top { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.c-definitive .df-band-sk-track { display: grid; grid-template-columns: repeat(8, 1fr) 40px; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.c-definitive .df-band-sk-track .df-sk { height: 32px; border-radius: 9px; }
@media (max-width: 480px) { .c-definitive .df-band-sk-top { grid-template-columns: 56px minmax(0, 1fr); } .c-definitive .df-band-sk-top > :last-child { display: none; } .c-definitive .df-band-sk-track { gap: 4px; } }

/* ---- parts/ProofPicker.vue ---- */
.c-definitive .df-pp { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; min-width: 0; }
.c-definitive .df-pp[data-invalid="yes"] { padding: 8px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--risk); }
.c-definitive .df-pp-i { display: grid; min-width: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); text-align: left; cursor: pointer;
  transition: box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease), background-color var(--t) var(--ease); }
.c-definitive .df-pp-i:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.c-definitive .df-pp-i:active { transform: scale(.985); }
.c-definitive .df-pp-i[data-on="yes"] { background: var(--sel-wash); box-shadow: inset 0 0 0 2px var(--sel); color: var(--fg); }
.c-definitive .df-pp-img { display: block; padding: 6px 6px 0; }
.c-definitive .df-pp-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; opacity: .8; transition: opacity var(--t) var(--ease); }
.c-definitive .df-pp-i:hover img, .c-definitive .df-pp-i[data-on="yes"] img { opacity: 1; }
.c-definitive .df-pp-cap { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px 11px; min-width: 0; }
.c-definitive .df-pp-tick { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; color: transparent; box-shadow: inset 0 0 0 1.5px var(--line-3); font-size: 13px; line-height: 1; font-weight: 700; }
.c-definitive .df-pp-tick[data-single="yes"] { border-radius: 50%; }
.c-definitive .df-pp-i[data-on="yes"] .df-pp-tick { background: var(--blue); color: #fff; box-shadow: none; }
.c-definitive .df-pp-t { display: grid; gap: 1px; min-width: 0; }
.c-definitive .df-pp-t b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.c-definitive .df-pp-t small { font-size: 13px; color: var(--fg-3); overflow-wrap: normal; word-break: normal; }
.c-definitive .df-pp-flag { justify-self: start; margin-top: 5px; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; font-style: normal; color: var(--risk); box-shadow: inset 0 0 0 1px var(--risk-line); }
@media (max-width: 759px) { .c-definitive .df-pp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .c-definitive .df-pp-img img { aspect-ratio: 2 / 1; } .c-definitive .df-pp-cap { padding: 7px 8px 9px; } }
@media (max-width: 359px) { .c-definitive .df-pp-cap { flex-direction: column; padding: 8px 8px 10px; gap: 6px; } .c-definitive .df-pp-t b { font-size: 13px; } }

/* ---- parts/Note.vue ---- */
.c-definitive .df-note-wrap { display: grid; gap: 16px; min-width: 0; }
.c-definitive .df-note-head { display: grid; gap: 4px; }
.c-definitive .df-note-head .df-meta { margin: 0; }
.c-definitive .df-note-quiet { margin: 0; font-size: 14px; font-weight: 500; color: var(--fg-2); }
.c-definitive .df-note-head:has(.df-note-quiet) { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.c-definitive .df-note { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 48px 20px; border-radius: var(--r-xl); background: radial-gradient(60% 80% at 50% 0%, rgba(110, 148, 255, .08), transparent 70%), var(--s1); box-shadow: var(--e2); }
.c-definitive .df-note[data-compact="yes"] { padding: 24px 16px; border-radius: var(--r-lg); gap: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.c-definitive .df-note-mark { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 10px rgba(168, 188, 226, .03); }
.c-definitive .df-note[data-compact="yes"] .df-note-mark { width: 56px; height: 56px; }
.c-definitive .df-note-txt { display: grid; gap: 6px; justify-items: center; max-width: 52ch; }
.c-definitive .df-note-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.c-definitive .df-note[data-kind="error"] { justify-items: start; text-align: left; padding: 28px; background: linear-gradient(120deg, var(--risk-wash), transparent 55%), var(--s1); box-shadow: var(--e2), inset 3px 0 0 var(--risk); }
.c-definitive .df-note[data-kind="error"] .df-note-txt { justify-items: start; }
.c-definitive .df-note[data-kind="error"] .df-note-act { justify-content: flex-start; }
.c-definitive .df-note-broken { display: flex; align-items: center; gap: 5px; width: min(300px, 100%); }
.c-definitive .df-note-broken i { flex: 1; height: 14px; border-radius: 5px; background: rgba(168, 188, 226, .1); }
.c-definitive .df-note-broken i[data-n="1"], .c-definitive .df-note-broken i[data-n="2"], .c-definitive .df-note-broken i[data-n="3"] { background: rgba(203, 215, 238, .35); }
.c-definitive .df-note-broken i[data-n="5"] { background: none; box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-4px) rotate(-10deg); }
.c-definitive .df-note-broken span { display: grid; place-items: center; margin-left: 8px; width: 26px; height: 26px; border-radius: 50%; color: var(--risk); box-shadow: inset 0 0 0 1.5px var(--risk-line); }
.c-definitive .df-note-loading { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-note-spin { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); border-top: 2px solid var(--sel); animation: df-spin .9s linear infinite; }
@keyframes df-spin { to { transform: rotate(360deg); } }
.c-definitive .df-note-sk { display: grid; gap: 14px; min-width: 0; }
@media (max-width: 480px) { .c-definitive .df-note[data-kind="error"] { padding: 20px 18px; } .c-definitive .df-note { padding: 36px 16px; } }

/* ---- screens/Home.vue ---- */
.c-definitive .df-home { padding-top: 16px; display: grid; gap: 16px; min-width: 0; }
.c-definitive .df-hello { margin: 0; font-size: 14px; font-weight: 500; color: var(--fg-2); }
.c-definitive .df-hello-late { color: var(--risk); font-weight: 600; }
.c-definitive .df-hello-page { color: var(--fg); font-weight: 600; }

/* compact roster above the stage */
.c-definitive .df-ros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: -4px; }
.c-definitive .df-ros-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 12px 5px 6px; border: 0; border-radius: 14px; background: var(--s1); box-shadow: var(--e1); cursor: pointer; text-align: left;
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.c-definitive .df-ros-btn:hover { background: var(--s2); }
.c-definitive .df-ros-btn:active { transform: scale(.98); }
.c-definitive .df-ros-btn[aria-pressed="true"] { background: var(--sel-wash); box-shadow: inset 0 0 0 1.5px var(--sel); }
.c-definitive .df-ros-name { font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.c-definitive .df-ros-n { font-size: 13px; color: var(--fg-3); white-space: nowrap; }
.c-definitive .df-ros-n[data-late="yes"] { color: var(--risk); font-weight: 600; }
@media (min-width: 401px) { .c-definitive .df-ros-sk { order: -1; } }
.c-definitive .df-ros-sk { display: flex; flex-wrap: wrap; gap: 6px; } .c-definitive .df-ros-sk .df-sk { width: 130px; height: 44px; border-radius: 14px; }

/* the stage: portrait, identity, and the most urgent objective */
.c-definitive .df-hero { --game: var(--g-wow); position: relative; overflow: hidden; display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "por id" "focus focus";
  gap: 14px; padding: 16px; border-radius: var(--r-xl); min-width: 0;
  background: radial-gradient(90% 90% at 0% 0%, color-mix(in srgb, var(--game) 16%, transparent), transparent 58%), linear-gradient(165deg, #141D31 0%, var(--s1) 55%);
  box-shadow: var(--e2), inset 0 1px 0 color-mix(in srgb, var(--game) 32%, transparent); }
.c-definitive .df-hero-por { grid-area: por; min-width: 0; }
.c-definitive .df-hero-por .df-por-cap { display: none; }
.c-definitive .df-hero-id { grid-area: id; align-self: center; display: grid; gap: 4px; min-width: 0; }
.c-definitive .df-hero-kick { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--fg-2); }
.c-definitive .df-hero-acc { display: none; }
.c-definitive .df-hero-name { font-size: 34px; overflow-wrap: anywhere; }
.c-definitive .df-hero-where { margin: 0; }
.c-definitive .df-focus { position: relative; grid-area: focus; display: grid; gap: 12px; min-width: 0; padding-top: 18px; }
.c-definitive .df-focus-kick { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.c-definitive .df-focus-label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.c-definitive .df-focus-title { margin: 0; font: 600 21px/1.25 var(--sans); letter-spacing: -.015em; color: var(--fg); text-wrap: balance; }
.c-definitive .df-focus-pay { margin: -6px 0 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-focus-pay .df-pts { font-weight: 600; }
.c-definitive .df-focus-me { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-focus-me .df-pts { font-weight: 600; }
.c-definitive .df-focus-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.c-definitive .df-focus-act > .df-btn:first-child { flex: 1 1 100%; }
.c-definitive .df-focus-none { justify-items: start; }

/* the week: a calendar strip, one line of outcomes, and the points */
.c-definitive .df-week { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: linear-gradient(100deg, rgba(145, 177, 255, .06), transparent 45%), var(--s1); box-shadow: var(--e2); min-width: 0; }
.c-definitive .df-week-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin-bottom: 10px; }
.c-definitive .df-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.c-definitive .df-days li { position: relative; display: grid; justify-items: center; gap: 2px; padding: 7px 0 9px; border-radius: 12px; font-size: 13px; color: var(--fg-3); }
.c-definitive .df-days b { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.c-definitive .df-days span[aria-hidden] { font-size: 16px; font-weight: 600; color: var(--fg-2); }
.c-definitive .df-days li[data-when="past"] span[aria-hidden] { color: var(--fg); }
.c-definitive .df-days li[data-when="today"] { background: var(--sel-wash); box-shadow: inset 0 0 0 1.5px var(--sel); color: var(--sel); }
.c-definitive .df-days li[data-when="today"] span[aria-hidden] { color: var(--fg); }
.c-definitive .df-days li[data-when="next"] span[aria-hidden] { color: var(--fg-3); font-weight: 500; }
.c-definitive .df-days i { position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.c-definitive .df-week-out { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.c-definitive .df-week-out .df-tag { font-size: 14px; color: var(--fg); }
.c-definitive .df-week-pts { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.c-definitive .df-week-fig { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.c-definitive .df-week-fig .df-figure { font-size: 36px; }
.c-definitive .df-week-wallet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 14px; margin: 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-week-wallet .df-pts { font-weight: 600; }

/* the list */
.c-definitive .df-work { display: grid; gap: 6px; min-width: 0; align-content: start; margin-top: 6px; }
.c-definitive .df-work .df-sec-h { margin-bottom: 0; }
.c-definitive .df-work-g { display: grid; gap: 6px; margin-top: 8px; }
.c-definitive .df-work-gh { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--fg-2); display: flex; gap: 8px; align-items: baseline; }
.c-definitive .df-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.c-definitive .df-row { width: 100%; height: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; grid-template-areas: "por txt chev" "por state chev" "por tr chev"; gap: 6px 12px; align-items: center;
  padding: 12px; border: 0; border-radius: 16px; background: var(--s1); box-shadow: var(--e1); text-align: left; cursor: pointer; min-width: 0;
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.c-definitive .df-row:hover { background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); }
.c-definitive .df-row[data-overdue="yes"] { box-shadow: var(--e1), inset 3px 0 0 var(--risk); }
.c-definitive .df-row > .df-por { grid-area: por; align-self: start; }
.c-definitive .df-row-txt { grid-area: txt; display: grid; gap: 3px; min-width: 0; }
.c-definitive .df-row-title { font-size: 15px; font-weight: 600; color: var(--fg); }
.c-definitive .df-row-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; font-size: 13px; color: var(--fg-2); }
.c-definitive .df-row-state { grid-area: state; }
.c-definitive .df-row-tr { grid-area: tr; min-width: 0; }
.c-definitive .df-row-chev { grid-area: chev; color: var(--fg-3); }

/* waiting and optional work: one calm line each */
.c-definitive .df-rows[data-compact="yes"] { gap: 0; border-top: 1px solid var(--line); }
.c-definitive .df-rows[data-compact="yes"] .df-row { grid-template-columns: 32px minmax(0, 1fr) 18px; grid-template-areas: "por txt chev" "por state chev" "por tr chev"; padding: 10px 6px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--line); }
.c-definitive .df-rows[data-compact="yes"] .df-row:hover { background: rgba(168, 188, 226, .04); }
.c-definitive .df-rows[data-compact="yes"] .df-row > .df-por .df-por-frame { width: 32px; height: 32px; border-radius: 9px; }
.c-definitive .df-rows[data-compact="yes"] .df-row-title { font-size: 14.5px; }

/* skeleton mirrors the stage */
.c-definitive .df-hero-sk { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
.c-definitive .df-hero-sk-por { aspect-ratio: 4 / 5; border-radius: 16px; }
.c-definitive .df-hero-sk-txt { display: grid; align-content: start; }

@media (max-width: 400px) {
  .c-definitive .df-ros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-definitive .df-ros-btn { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "p n" "p c"; gap: 0 9px; }
  .c-definitive .df-ros-btn > .df-por { grid-area: p; }
  .c-definitive .df-ros-name { grid-area: n; font-size: 13.5px; overflow-wrap: anywhere; white-space: normal; line-height: 1.25; }
  .c-definitive .df-ros-n { grid-area: c; }
  .c-definitive .df-hero-where, .c-definitive .df-focus-late, .c-definitive .df-focus-me { display: none; }
  .c-definitive .df-dot-key { display: none; }
  .c-definitive .df-home > .df-hero { order: 1; } .c-definitive .df-home > .df-ros { order: 2; margin: 0; } .c-definitive .df-home > .df-week { order: 3; } .c-definitive .df-home > .df-work { order: 4; }
}
@media (max-width: 359px) {
  .c-definitive .df-hero { grid-template-columns: 64px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .c-definitive .df-hero-name { font-size: 28px; }
  .c-definitive .df-days b { font-size: 13px; }
  .c-definitive .df-days span[aria-hidden] { font-size: 14px; }
}
@media (min-width: 560px) {
  .c-definitive .df-focus-act > .df-btn:first-child { flex: 0 0 auto; }
  .c-definitive .df-row { grid-template-columns: 44px minmax(0, 1fr) auto 18px; grid-template-areas: "por txt state chev" "por tr tr chev"; }
}
@media (min-width: 900px) {
  .c-definitive .df-home { padding-top: 24px; gap: 18px; }
  .c-definitive .df-hero { grid-template-columns: 290px minmax(0, 1fr); grid-template-areas: "por id" "por focus"; grid-template-rows: auto 1fr; gap: 0 40px; padding: 26px 32px 26px 26px; }
  .c-definitive .df-hero[data-case="provider"], .c-definitive .df-hero[data-case="none"] { grid-template-columns: 220px minmax(0, 1fr); }
  .c-definitive .df-hero-por .df-por-cap { display: block; }
  .c-definitive .df-hero-acc { display: inline; }
  .c-definitive .df-hero-id { align-self: start; padding: 6px 0 18px; }
  .c-definitive .df-hero-name { font-size: 64px; line-height: .98; }
  .c-definitive .df-focus { align-content: start; padding: 20px 0 0; }
  .c-definitive .df-focus-title { font-size: 24px; }
  .c-definitive .df-week { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: 28px; padding: 18px 24px; }
  .c-definitive .df-week-out { display: grid; gap: 10px; padding-left: 28px; border-left: 1px solid var(--line); }
  .c-definitive .df-week-pts { padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--line); }
  .c-definitive .df-rows:not([data-compact]) { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
  .c-definitive .df-rows[data-compact="yes"] .df-row { grid-template-columns: 32px minmax(0, 1fr) 260px 150px 18px; grid-template-areas: "por txt tr state chev"; align-items: center; }
  .c-definitive .df-rows[data-compact="yes"] .df-row-state { display: block; justify-self: end; }
  .c-definitive .df-hero-sk { grid-template-columns: 290px minmax(0, 1fr); gap: 40px; padding: 26px; border-radius: var(--r-xl); background: var(--s1); }
}

/* ---- screens/Character.vue ---- */
.c-definitive .df-char { padding-top: 16px; display: grid; gap: 22px; min-width: 0; }
.c-definitive .df-switch { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.c-definitive .df-switch-g { flex: none; display: grid; gap: 6px; }
.c-definitive .df-switch-acc { font-size: 13px; color: var(--fg-3); white-space: nowrap; }
.c-definitive .df-switch-row { display: flex; flex-wrap: wrap; gap: 6px; }
.c-definitive .df-switch-btn { flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 6px 12px 6px 6px; border: 0; border-radius: 14px; background: var(--s1); box-shadow: var(--e1);
  color: var(--fg-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.c-definitive .df-switch-btn:hover { background: var(--s2); color: var(--fg); }
.c-definitive .df-switch-btn[aria-current="page"] { background: var(--sel-wash); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--sel); }
.c-definitive .df-switch-btn small { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); }

.c-definitive .df-ch { --game: var(--g-wow); display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "por id" "facts facts" "open open"; gap: 18px 16px; min-width: 0; align-items: start; }
/* phones: an illustrated character keeps its portrait as a cropped band */
.c-definitive .df-ch[data-case="illustration"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "por" "id" "facts" "open"; }
.c-definitive .df-ch[data-case="illustration"] .df-ch-por .df-por-frame { aspect-ratio: 4 / 3; }
.c-definitive .df-ch[data-case="illustration"] .df-ch-por .df-por-art { object-position: 50% 16%; }
.c-definitive .df-ch-por { grid-area: por; min-width: 0; }
.c-definitive .df-ch-por .df-por-cap { display: none; }
.c-definitive .df-ch-id { grid-area: id; display: grid; gap: 6px; align-self: center; min-width: 0; }
.c-definitive .df-ch-kick { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--fg-2); }
.c-definitive .df-ch-name { font-size: 34px; overflow-wrap: anywhere; }
.c-definitive .df-ch-line { margin: 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-ch-acc { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-ch-acc b { color: var(--fg); font-weight: 600; }
.c-definitive .df-ch-acc .df-icon { margin-top: 2px; color: var(--fg-3); }
.c-definitive .df-ch-facts { grid-area: facts; margin: 0; display: grid; border-top: 1px solid var(--line); min-width: 0; }
.c-definitive .df-ch-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.c-definitive .df-ch-facts dt { color: var(--fg-3); }
.c-definitive .df-ch-facts dd { margin: 0; text-align: right; color: var(--fg); font-weight: 500; }
.c-definitive .df-ch-facts dd[data-tone="risk"] { color: var(--risk); }
.c-definitive .df-ch-facts dd.df-pts { font-weight: 600; color: var(--gold); }
.c-definitive .df-ch-facts dd.df-ch-none { color: var(--fg-2); font-weight: 400; }
.c-definitive .df-ch-open { grid-area: open; display: grid; gap: 4px; min-width: 0; }
.c-definitive .df-ch-cards { display: grid; gap: 12px; min-width: 0; }
.c-definitive .df-oc { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px; border-radius: var(--r-lg); background: var(--s1); box-shadow: var(--e2); }
.c-definitive .df-oc[data-overdue="yes"] { box-shadow: var(--e2), inset 3px 0 0 var(--risk); }
.c-definitive .df-oc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.c-definitive .df-oc-title { margin: 0; font: 600 18px/1.3 var(--sans); letter-spacing: -.012em; color: var(--fg); }
.c-definitive .df-oc-pay { margin: -6px 0 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-oc-act { display: flex; flex-wrap: wrap; gap: 8px; }
.c-definitive .df-ch-hist { display: grid; gap: 4px; min-width: 0; }
.c-definitive .df-hist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.c-definitive .df-hist-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "t chev" "s chev" "tr chev"; gap: 6px 12px; align-items: center; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; min-width: 0; }
.c-definitive .df-hist-row:hover { background: rgba(168, 188, 226, .04); }
.c-definitive .df-hist-s { grid-area: s; }
.c-definitive .df-hist-t { grid-area: t; display: grid; gap: 2px; min-width: 0; }
.c-definitive .df-hist-title { font-size: 15px; font-weight: 600; color: var(--fg); }
.c-definitive .df-hist-tr { grid-area: tr; min-width: 0; max-width: 360px; }
.c-definitive .df-hist-row .df-row-chev { grid-area: chev; color: var(--fg-3); }
.c-definitive .df-ch-sk { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
.c-definitive .df-ch-sk-por { aspect-ratio: 4 / 5; border-radius: 20px; }
@media (max-width: 400px) { .c-definitive .df-ch-name { font-size: 30px; } .c-definitive .df-ch-acc { display: none; } .c-definitive .df-ch:not([data-case="illustration"]) { grid-template-columns: 88px minmax(0, 1fr); } }
@media (max-width: 359px) { .c-definitive .df-ch-facts div { display: grid; gap: 2px; } .c-definitive .df-ch-facts dd { text-align: left; } .c-definitive .df-ch-name { font-size: 27px; } }
@media (min-width: 760px) {
  .c-definitive .df-char { padding-top: 24px; gap: 28px; }
  .c-definitive .df-ch-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-definitive .df-ch-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .c-definitive .df-ch-facts div { display: grid; gap: 2px; justify-content: start; padding: 11px 0; }
  .c-definitive .df-ch-facts dd { text-align: left; }
  .c-definitive .df-hist-row { grid-template-columns: minmax(0, 1fr) 190px minmax(200px, 300px) 18px; grid-template-areas: "t s tr chev"; }
  .c-definitive .df-ch, .c-definitive .df-ch[data-case="illustration"] { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "por id" "por open" "facts open"; grid-template-rows: auto auto 1fr; gap: 18px 36px; }
  .c-definitive .df-ch[data-case="illustration"] .df-ch-por .df-por-frame { aspect-ratio: 4 / 5; }
  .c-definitive .df-ch-id { align-self: start; }
  .c-definitive .df-ch-facts { align-self: start; }
  .c-definitive .df-ch-open { align-self: start; margin-top: 6px; }
  .c-definitive .df-ch-name { font-size: 56px; }
  .c-definitive .df-ch-por .df-por-cap { display: block; }
}
@media (min-width: 1000px) {
  .c-definitive .df-ch[data-case="illustration"] { grid-template-columns: 240px minmax(0, 1fr); }
  .c-definitive .df-ch-name { font-size: 64px; }
  .c-definitive .df-ch-sk { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; }
}

/* ---- screens/Objective.vue ---- */
.c-definitive .df-obj { padding-top: 12px; display: grid; gap: 16px; min-width: 0; }
.c-definitive .df-back { justify-self: start; margin-bottom: -6px; min-height: 44px; }
.c-definitive .df-ob-status { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 0; align-items: center; }
.c-definitive .df-ob-why { flex: 1; min-width: 180px; }
.c-definitive .df-obj-cols { display: grid; gap: 26px; min-width: 0; margin-top: 8px; }
.c-definitive .df-obj-col { display: grid; gap: 26px; align-content: start; min-width: 0; }
.c-definitive .df-obj-sec { display: grid; gap: 4px; min-width: 0; }
.c-definitive .df-obj-sec > .df-sec-h { padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--line-2); }
.c-definitive .df-people { list-style: none; margin: 0; padding: 0; display: grid; }
.c-definitive .df-people li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.c-definitive .df-people-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--s3); font-size: 13px; font-weight: 600; color: var(--fg-2); }
.c-definitive .df-people li[data-me="yes"] .df-people-av { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--cred); }
.c-definitive .df-people-t { display: grid; gap: 3px; min-width: 0; }
.c-definitive .df-people-t b { font-size: 15px; font-weight: 600; color: var(--fg); }
.c-definitive .df-people-c { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.c-definitive .df-people-p { display: grid; justify-items: end; text-align: right; font-size: 14.5px; font-weight: 600; }
.c-definitive .df-people-p small { font-weight: 400; }
.c-definitive .df-vault { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 6px 0; }
.c-definitive .df-vault-box { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--fg-3); border: 1.5px dashed var(--line-3); }
.c-definitive .df-vault[data-state="submitted"] .df-vault-box { border: 0; color: var(--fg); box-shadow: inset 0 0 0 1.75px var(--claim); }
.c-definitive .df-vault[data-state="approved"] .df-vault-box { border: 0; background: var(--cred); color: var(--cred-ink); }
.c-definitive .df-vault[data-state="rejected"] .df-vault-box { border-color: var(--risk); color: var(--risk); }
.c-definitive .df-vault-t { display: grid; gap: 2px; min-width: 0; }
.c-definitive .df-vault-t b { font-size: 15px; color: var(--fg); }
.c-definitive .df-vault-t small { font-size: 14px; color: var(--fg-2); }
.c-definitive .df-vault[data-state="rejected"] .df-vault-t small { color: var(--risk); }
.c-definitive .df-vault-shot { grid-column: 2; margin: 4px 0 0; display: grid; gap: 4px; justify-items: start; }
.c-definitive .df-vault-shot img { width: 128px; height: 72px; border-radius: 9px; object-fit: cover; }
.c-definitive .df-vault-shot figcaption { font-size: 13px; color: var(--fg-3); }
.c-definitive .df-vault-up { display: grid; gap: 12px; margin-top: 10px; justify-items: start; }
.c-definitive .df-vault-up .df-pp { width: 100%; max-width: 460px; }
.c-definitive .df-att { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.c-definitive .df-att li { display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.c-definitive .df-att li .df-icon { margin-top: 2px; color: var(--fg-3); }
.c-definitive .df-att li .df-meta { grid-column: 2; }
.c-definitive .df-att b { color: var(--fg); font-weight: 600; }
.c-definitive .df-att-form { display: grid; gap: 10px; margin-top: 8px; }
.c-definitive .df-att-form .df-btn { justify-self: start; }
.c-definitive .df-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.c-definitive .df-tl li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.c-definitive .df-tl .df-glyph { margin-top: 5px; }
.c-definitive .df-tl-b { display: grid; gap: 3px; min-width: 0; }
.c-definitive .df-tl-b p { margin: 0; }
.c-definitive .df-tl-top { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.c-definitive .df-tl-top b { font-size: 15px; color: var(--fg); }
.c-definitive .df-tl-top b[data-tone="risk"] { color: var(--risk); }
.c-definitive .df-tl-note { font: italic 400 15px/1.45 var(--serif); color: var(--fg-2); }
.c-definitive .df-tl-reason { display: flex; gap: 6px; font-size: 14px; color: var(--risk); }
.c-definitive .df-tl-reason .df-icon { margin-top: 2px; }
.c-definitive .df-others > summary, .c-definitive .df-rules > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.c-definitive .df-others > summary::-webkit-details-marker, .c-definitive .df-rules > summary::-webkit-details-marker { display: none; }
.c-definitive .df-others > summary { font-size: 14px; font-weight: 600; color: var(--fg-2); }
.c-definitive .df-others > summary .df-icon, .c-definitive .df-rules > summary .df-icon { margin-left: auto; color: var(--fg-3); transition: transform var(--t) var(--ease); }
.c-definitive .df-others[open] > summary .df-icon, .c-definitive .df-rules[open] > summary .df-icon { transform: rotate(180deg); }
.c-definitive .df-others ul { list-style: none; margin: 0; padding: 0; display: grid; }
.c-definitive .df-others li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.c-definitive .df-rules > summary { padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.c-definitive .df-rules ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; color: var(--fg-2); }
.c-definitive .df-rules li::marker { color: var(--fg-3); }
@media (min-width: 900px) {
  .c-definitive .df-obj { padding-top: 18px; gap: 20px; }
  .c-definitive .df-obj-cols { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 44px; }
}

/* ---- screens/Claim.vue ---- */
.c-definitive .df-claim { padding-top: 12px; display: grid; gap: 16px; min-width: 0; }
.c-definitive .df-cl-status { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.c-definitive .df-cl-preview { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 13.5px; color: var(--fg-2); }
.c-definitive .df-cl-preview .df-glyph { margin-top: 4px; }
.c-definitive .df-claim-grid { display: grid; gap: 18px; min-width: 0; }
/* the steps sit on a quiet rail rather than in numbered cards */
.c-definitive .df-steps { display: grid; gap: 0; min-width: 0; position: relative; }
.c-definitive .df-step { position: relative; margin: 0; padding: 4px 0 26px 42px; border: 0; display: grid; gap: 12px; min-width: 0; }
.c-definitive .df-step::before { content: ""; position: absolute; left: 13px; top: 34px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--line); }
.c-definitive .df-step:last-child::before { display: none; }
.c-definitive .df-step[data-invalid="yes"]::before { background: var(--risk-line); }
.c-definitive .df-step legend, .c-definitive .df-step-legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.c-definitive .df-step legend + * { clear: both; }
.c-definitive .df-step-n { position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--sel); background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(145, 177, 255, .55); }
.c-definitive .df-step[data-invalid="yes"] .df-step-n { color: var(--risk); box-shadow: inset 0 0 0 1.5px var(--risk); }
.c-definitive .df-step-legend .df-meta { font-weight: 400; font-size: 13px; }
.c-definitive .df-hint { margin: 0; display: flex; gap: 7px; align-items: flex-start; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-hint-inline { display: block; }
.c-definitive .df-link-inline { display: inline; min-height: 0; padding: 12px 0; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; vertical-align: baseline; }
.c-definitive .df-hint .df-icon { margin-top: 2px; color: var(--fg-3); flex: none; }
.c-definitive .df-hint[data-tone="warn"] { color: var(--fg); }
.c-definitive .df-hint[data-tone="warn"] .df-icon { color: var(--risk); }
.c-definitive .df-runs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.c-definitive .df-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.c-definitive .df-key { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); align-items: center; gap: 12px; }
.c-definitive .df-key-n { font-size: 14px; color: var(--fg-2); }
.c-definitive .df-stepper-sm output { font-size: 18px; min-width: 52px; }
.c-definitive .df-key .df-stepper { justify-self: start; }
.c-definitive .df-key-ok { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--fg-2); }
.c-definitive .df-key-ok .df-icon { color: var(--fg-3); }
.c-definitive .df-key[data-low="yes"] .df-key-ok { color: var(--risk); font-weight: 600; }
.c-definitive .df-key[data-low="yes"] .df-key-ok .df-icon { color: var(--risk); }
.c-definitive .df-key[data-low="yes"] .df-stepper { box-shadow: inset 0 0 0 1.5px var(--risk); }
.c-definitive .df-attach { margin: 0; font-size: 13px; color: var(--fg-3); }
.c-definitive .df-attach[data-ok="yes"] { color: var(--fg-2); }
.c-definitive .df-item-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--g-ffxiv) 10%, var(--sunk)), var(--sunk) 65%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-ffxiv) 26%, transparent); }
.c-definitive .df-item-gem { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--g-ffxiv) 12%, #0B0F19); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-ffxiv) 40%, transparent); }
.c-definitive .df-item-name { margin: 0 0 2px; font: 500 24px/1.15 var(--serif); color: var(--fg); font-variation-settings: "opsz" 32; }
.c-definitive .df-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-checks li { display: flex; gap: 8px; align-items: flex-start; }
.c-definitive .df-checks .df-icon { margin-top: 2px; color: var(--cred); }
.c-definitive .df-checks li[data-no="yes"] .df-icon { color: var(--risk); }
.c-definitive .df-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.c-definitive .df-pick { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 58px; padding: 9px 14px; border-radius: 14px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer;
  transition: box-shadow var(--t) var(--ease), background-color var(--t) var(--ease); }
.c-definitive .df-pick[data-on="yes"] { background: var(--sel-wash); box-shadow: inset 0 0 0 1.5px var(--sel); }
.c-definitive .df-pick-t { display: grid; gap: 1px; min-width: 0; }
.c-definitive .df-pick-t b { font-size: 15px; font-weight: 600; color: var(--fg); }
.c-definitive .df-pick-t small { font-size: 13px; color: var(--fg-3); }
.c-definitive .df-pick .df-pts { font-size: 14px; font-weight: 600; }
.c-definitive .df-settled { display: grid; gap: 6px; }
.c-definitive .df-settled-h { margin: 4px 0 0; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--fg-3); }
.c-definitive .df-settled-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.c-definitive .df-settled ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.c-definitive .df-settled li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 14px; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-settled small { font-size: 13px; color: var(--fg-2); text-align: right; }
.c-definitive .df-settled small b { font-weight: 650; color: var(--fg); }
.c-definitive .df-ba { display: grid; gap: 14px; min-width: 0; align-items: start; }
.c-definitive .df-ba[data-invalid="yes"] { padding: 8px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--risk); }
.c-definitive .df-ba-side { display: grid; gap: 10px; min-width: 0; align-content: start; padding: 12px; border-radius: 16px; background: rgba(168, 188, 226, .03); box-shadow: inset 0 0 0 1px var(--line); }
.c-definitive .df-ba-side[data-set="yes"] { box-shadow: inset 0 0 0 1px var(--line-2); }
.c-definitive .df-ba-head { display: grid; gap: 2px; }
.c-definitive .df-ba-name { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
.c-definitive .df-ba-word { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--fg); }
.c-definitive .df-ba-state { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; color: var(--fg-3); }
.c-definitive .df-ba-side[data-set="yes"] .df-ba-state { color: var(--fg); }
.c-definitive .df-ba-must { margin: 0; font-size: 13px; line-height: 1.4; color: var(--fg-2); }
.c-definitive .df-callout { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; margin-bottom: 22px; padding: 14px 16px; border-radius: 16px; background: var(--sel-wash); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .3); color: var(--sel); }
.c-definitive .df-callout[data-tone="risk"] { background: var(--risk-wash); box-shadow: inset 0 0 0 1px var(--risk-line); color: var(--risk); }
.c-definitive .df-callout b { color: var(--fg); font-size: 15px; }
.c-definitive .df-callout p { margin: 2px 0 4px; color: var(--fg); font-size: 14.5px; }

.c-definitive .df-send { display: grid; gap: 14px; align-content: start; padding: 18px; border-radius: var(--r-lg); background: var(--s1); box-shadow: var(--e2); min-width: 0; }
.c-definitive .df-send-l { margin: 0; display: grid; border-top: 1px solid var(--line); }
.c-definitive .df-send-l > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.c-definitive .df-send-l dt { color: var(--fg-3); }
.c-definitive .df-send-l dd { margin: 0; color: var(--fg); }
.c-definitive .df-send-pts { font-weight: 600; font-size: 15px; }
.c-definitive .df-send-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; color: var(--fg-2); }
.c-definitive .df-send-notes li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.c-definitive .df-send-notes .df-icon { margin-top: 1px; color: var(--fg-3); }
.c-definitive .df-send-why { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-send-why .df-icon { color: var(--fg-3); }
.c-definitive .df-send-fine { margin: 0; }
/* phones: the one Submit rides under the navigation for the whole form */
.c-definitive .df-send-bar { position: sticky; top: 58px; z-index: 25; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; margin: 0 calc(var(--gutter) * -1) 6px; padding: 10px var(--gutter); background: rgba(11, 15, 24, .96); border-bottom: 1px solid var(--line-2); }
.c-definitive .df-send-bar-t { display: grid; margin: 0; min-width: 0; line-height: 1.25; }
.c-definitive .df-send-bar-t .df-pts { font-size: 17px; font-weight: 650; }
.c-definitive .df-send-bar-t small { font-size: 13px; color: var(--fg-2); }
.c-definitive .df-send-bar .df-error { grid-column: 1 / -1; }
.c-definitive .df-send-state { display: flex; gap: 8px; align-items: center; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.c-definitive .df-send-state .df-icon { color: var(--fg-3); }
.c-definitive .df-send-state[data-ready="yes"] { color: var(--fg); }
.c-definitive .df-send-state[data-ready="yes"] .df-icon { color: var(--sel); }
.c-definitive .df-send-row { display: grid; gap: 10px; justify-items: start; padding: 16px 0 0 42px; min-width: 0; }
.c-definitive .df-send-row .df-error { justify-self: stretch; }
@media (max-width: 559px) { .c-definitive .df-send-row { padding-left: 0; justify-items: stretch; } }
.c-definitive .df-claim button, .c-definitive .df-claim textarea, .c-definitive .df-claim input { scroll-margin: 96px 0 24px; }

.c-definitive .df-sent { display: grid; gap: 12px; justify-items: start; max-width: 760px; padding-top: 12px; }
.c-definitive .df-sent-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 0 0 9px var(--sel-wash), 0 18px 30px -16px rgba(50, 90, 230, .9); animation: df-pop var(--t-slow) var(--ease) both; }
@keyframes df-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.c-definitive .df-sent-card { width: 100%; display: grid; gap: 12px; padding: 18px; border-radius: var(--r-lg); background: var(--s1); box-shadow: var(--e2); }
.c-definitive .df-sent-card .df-meta { margin: 0; }
.c-definitive .df-sent-what { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 15px; color: var(--fg); }
.c-definitive .df-sent-act { display: flex; flex-wrap: wrap; gap: 8px; }
.c-definitive .df-demo-ctl { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; width: 100%; margin-top: 10px; padding: 12px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; color: var(--fg-2);
  background: repeating-linear-gradient(135deg, rgba(168, 188, 226, .03) 0 6px, transparent 6px 12px), var(--bg); }
.c-definitive .df-demo-ctl p { margin: 0; flex: 1 1 260px; }
.c-definitive .df-demo-ctl b { color: var(--fg); }
@media (max-width: 400px) { .c-definitive .df-step { padding-left: 38px; } .c-definitive .df-key { grid-template-columns: 52px auto; } .c-definitive .df-key-ok { grid-column: 2; } }
@media (min-width: 640px) { .c-definitive .df-ba { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .c-definitive .df-claim { padding-top: 18px; gap: 20px; }
  .c-definitive .df-claim-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; margin-top: 8px; }
  .c-definitive .df-claim-grid { grid-template-areas: "steps send" "row send"; grid-template-rows: auto 1fr; row-gap: 8px; }
  .c-definitive .df-steps { grid-area: steps; }
  .c-definitive .df-send { grid-area: send; position: sticky; top: 16px; align-self: start; padding: 22px; }
  .c-definitive .df-send-row { grid-area: row; align-self: start; }
}

/* ---- screens/Overview.vue ---- */
.c-definitive .df-ov { padding-top: 16px; display: grid; gap: 16px; min-width: 0; font-size: 14px; }
.c-definitive .df-ov-head { display: grid; gap: 12px; }
.c-definitive .df-ov-title .df-meta { margin: 2px 0 0; }
.c-definitive .df-ov-tools { display: grid; gap: 8px; min-width: 0; }
.c-definitive .df-search { position: relative; display: block; min-width: 0; }
.c-definitive .df-search .df-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.c-definitive .df-search .df-input { padding-left: 40px; }
.c-definitive .df-ov-tools .df-seg .df-game { font-size: 13.5px; color: inherit; }
.c-definitive .df-ov-grid { display: grid; gap: 16px; min-width: 0; }
.c-definitive .df-ov-main, .c-definitive .df-ov-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.c-definitive .df-ov-panel { padding: 14px 16px; border-radius: var(--r-lg); background: var(--s1); box-shadow: var(--e2); min-width: 0; }
.c-definitive .df-ov-quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.c-definitive .df-ov-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 40px; margin-bottom: 6px; }
.c-definitive .df-ov-go { margin-left: auto; }
.c-definitive .df-ov-none { margin: 6px 0; }
.c-definitive .df-ov-fine { margin: 10px 0 0; }
.c-definitive .df-ov-clear { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--sunk); font-size: 14px; color: var(--fg-2); }
.c-definitive .df-ov-clear b { color: var(--fg); }
.c-definitive .df-ov-clear .df-icon { margin-top: 2px; color: var(--fg-3); }

/* the review queue: compact, readable rows */
.c-definitive .df-q { list-style: none; margin: 0 -8px; padding: 0; counter-reset: q; }
.c-definitive .df-q-row { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; grid-template-areas: "por t chev" "por meta chev"; gap: 4px 12px; align-items: center; min-height: 56px; padding: 9px 8px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; text-align: left; cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.c-definitive .df-q li:first-child .df-q-row { border-top: 0; }
.c-definitive .df-q-row:hover { background: rgba(168, 188, 226, .05); }
.c-definitive .df-q-row > .df-por { grid-area: por; align-self: start; margin-top: 2px; }
.c-definitive .df-q-t { grid-area: t; display: grid; gap: 1px; min-width: 0; }
.c-definitive .df-q-t b { font-size: 14.5px; font-weight: 600; color: var(--fg); }
.c-definitive .df-q-what { font-weight: 400; color: var(--fg-2); }
.c-definitive .df-q-t small { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--fg-3); min-width: 0; }
.c-definitive .df-q-t small span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-definitive .df-q-ev, .c-definitive .df-q-cr, .c-definitive .df-q-age { grid-area: meta; }
.c-definitive .df-q-ev { display: none; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.c-definitive .df-q-ev .df-icon { color: var(--fg-3); }
.c-definitive .df-q-cr { font-size: 13.5px; font-weight: 600; }
.c-definitive .df-q-cr small { font-weight: 400; }
.c-definitive .df-q-age { justify-self: end; white-space: nowrap; }
.c-definitive .df-q-chev { grid-area: chev; color: var(--fg-3); }

/* unfinished groups */
.c-definitive .df-ov-filter { margin-left: auto; }
.c-definitive .df-ov-g { border-top: 1px solid var(--line); }
.c-definitive .df-ov-g:first-of-type { border-top: 0; }
.c-definitive .df-ov-gh { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 0; border: 0; background: none; cursor: pointer; color: var(--fg-2); text-align: left; }
.c-definitive .df-ov-gh .df-game { font-size: 14px; font-weight: 600; color: var(--fg); }
.c-definitive .df-ov-gh > .df-icon { margin-left: auto; color: var(--fg-3); transition: transform var(--t) var(--ease); }
.c-definitive .df-chev-open { transform: rotate(180deg); }
.c-definitive .df-ov-late { color: var(--risk); font-weight: 600; }
.c-definitive .df-un { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.c-definitive .df-un-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t go" "st st" "tr tr"; gap: 6px 12px; align-items: center; padding: 10px 0 10px 10px; border-top: 1px solid var(--line); box-shadow: inset 2px 0 0 transparent; }
.c-definitive .df-un-row[data-overdue="yes"] { box-shadow: inset 2px 0 0 var(--risk); }
.c-definitive .df-un-t { grid-area: t; display: grid; min-width: 0; }
.c-definitive .df-un-t b { font-size: 14.5px; font-weight: 600; color: var(--fg); }
.c-definitive .df-un-t b span { font-weight: 400; color: var(--fg-2); }
.c-definitive .df-un-t small { font-size: 13px; color: var(--fg-3); }
.c-definitive .df-un-st { grid-area: st; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.c-definitive .df-un-tr { grid-area: tr; min-width: 0; max-width: 360px; }
.c-definitive .df-un-go { grid-area: go; }

/* side */
.c-definitive .df-warns { list-style: none; margin: 0; padding: 0; display: grid; }
.c-definitive .df-warns li { display: grid; gap: 3px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.c-definitive .df-warns li:first-child { border-top: 0; }
.c-definitive .df-mini { list-style: none; margin: 0; padding: 0; display: grid; }
.c-definitive .df-mini li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.c-definitive .df-mini li:first-child { border-top: 0; }
.c-definitive .df-mini-t { min-width: 0; }
.c-definitive .df-mini b { color: var(--fg); font-weight: 600; }
.c-definitive .df-mini-r { display: grid; justify-items: end; font-weight: 600; white-space: nowrap; }
.c-definitive .df-cross-mini { display: inline-flex; align-items: center; gap: 4px; margin: 3px 0 0; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--risk); box-shadow: inset 0 0 0 1px var(--risk-line); background: var(--risk-wash); white-space: nowrap; }
.c-definitive .df-mini-t .df-cross-mini { display: flex; width: max-content; }

/* priorities 2 to 4 as one quiet line; the queue's age strip */
.c-definitive .df-ov-also { display: flex; flex-wrap: wrap; gap: 0 18px; margin: -6px 0 0; }
.c-definitive .df-age { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: -2px 0 8px; font-size: 13px; color: var(--fg-3); }
.c-definitive .df-age-track { position: relative; height: 14px; }
.c-definitive .df-age-track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 calc(12.5% - 4px), transparent calc(12.5% - 4px) 12.5%); }
.c-definitive .df-age-track i { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 4px; background: var(--bg); box-shadow: inset 0 0 0 1.75px var(--claim); }
.c-definitive .df-age-track i[data-kind="claim"]::after { content: ""; position: absolute; left: 4px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--claim); }
.c-definitive .df-age-track i[data-kind="vault"] { border-radius: 2px; }
.c-definitive .df-lane-link { display: inline-flex; gap: 5px; align-items: baseline; min-height: 32px; padding: 0; border: 0; background: none; color: var(--fg-2); font-size: 14px; cursor: pointer; white-space: nowrap; }
.c-definitive .df-lane-link b { color: var(--fg); font-weight: 650; }
.c-definitive .df-lane-link[data-tone="risk"] b { color: var(--risk); }
.c-definitive .df-lane-link:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.c-definitive .df-lane-x { margin-left: -5px; }
.c-definitive .df-ov-gsel { position: relative; display: none; }
.c-definitive .df-ov-gsel select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
.c-definitive .df-ov-gsel .df-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
@media (max-width: 619px) {
  .c-definitive .df-ov-tools { grid-template-columns: minmax(0, 1fr) 150px; }
  .c-definitive .df-ov-gsel { display: block; }
  .c-definitive .df-ov-gseg { display: none; }
      .c-definitive .df-lane-link { min-height: 44px; }
    .c-definitive .df-lane-x { display: none; }
      .c-definitive .df-q-head > .df-q-sub { display: none; }
  .c-definitive .df-q-head { gap: 8px; }
  .c-definitive .df-q-head .df-h2 { white-space: nowrap; }
  .c-definitive .df-q-head .df-ov-go { margin-left: auto; flex: none; padding-inline: 12px; }
  .c-definitive .df-q-head .df-ov-go .df-icon { display: none; }
  .c-definitive .df-un-row { grid-template-areas: "t t" "st go" "tr tr"; gap: 3px 12px; padding: 8px 0 8px 10px; }
  .c-definitive .df-un-aw { display: none; }
  .c-definitive .df-un-t .df-un-ai { display: inline-block; vertical-align: -2px; margin-right: 3px; }
  .c-definitive .df-q-row { padding: 7px 8px; gap: 2px 12px; }
  .c-definitive .df-ov-panel { padding: 12px 14px; }
}
@media (max-width: 359px) {
  .c-definitive .df-q-head { flex-wrap: wrap; }
}
.c-definitive .df-ov-n { display: inline-grid; place-items: center; min-width: 26px; height: 24px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 650; vertical-align: 2px; }
/* accounts */
.c-definitive .df-ov-quiet > .df-ov-gh .df-h2 { margin: 0; }
.c-definitive .df-un-ai { display: none; }
.c-definitive .df-ov-more { margin-top: 6px; min-height: 44px; }
.c-definitive .df-acc-g { display: grid; gap: 2px; margin-top: 8px; }
.c-definitive .df-acc-h { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--fg-3); }
.c-definitive .df-acc { list-style: none; margin: 0; padding: 0; display: grid; }
.c-definitive .df-acc li { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "p t" "p w"; gap: 0 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.c-definitive .df-acc li:first-child { border-top: 0; }
.c-definitive .df-acc li > .df-por { grid-area: p; }
.c-definitive .df-acc-t { grid-area: t; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.c-definitive .df-acc-t b { font-size: 14px; color: var(--fg); }
.c-definitive .df-acc-t small { font-size: 13px; color: var(--fg-3); }
.c-definitive .df-acc-t small [data-tone="risk"] { color: var(--risk); }
.c-definitive .df-acc-g-who { grid-area: w; font-size: 13px; color: var(--fg-2); }
@media (min-width: 620px) {
  .c-definitive .df-ov-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .c-definitive .df-q-row { grid-template-columns: 32px minmax(0, 1fr) 150px 96px 84px 18px; grid-template-areas: "por t ev cr age chev"; min-height: 54px; }
  .c-definitive .df-q-ev { display: inline-flex; grid-area: ev; }
  .c-definitive .df-q-cr { grid-area: cr; justify-self: end; }
  .c-definitive .df-q-age { grid-area: age; }
  .c-definitive .df-un-row { grid-template-columns: minmax(0, 1fr) 190px 236px 80px; grid-template-areas: "t st tr go"; }
  .c-definitive .df-un-st { display: grid; gap: 2px; justify-items: start; }
  .c-definitive .df-un-go { justify-self: end; }
}
@media (min-width: 1000px) {
  .c-definitive .df-ov { padding-top: 24px; gap: 18px; }
  .c-definitive .df-ov-head { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 24px; }
  .c-definitive .df-ov-tools { justify-self: end; grid-template-columns: 300px auto; }
  .c-definitive .df-ov-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
  .c-definitive .df-ov-panel { padding: 16px 20px; }
}

/* ---- screens/Review.vue ---- */
.c-definitive .df-rv { padding-top: 16px; display: grid; gap: 14px; min-width: 0; font-size: 14px; }
.c-definitive .df-rv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 16px; }
.c-definitive .df-rv-head .df-meta { margin: 2px 0 0; }
.c-definitive .df-rv-nav { display: flex; gap: 8px; }
.c-definitive .df-rv-grid { display: grid; gap: 18px; min-width: 0; }
.c-definitive .df-rv-queue { order: 3; display: grid; gap: 6px; align-content: start; min-width: 0; }
.c-definitive .df-rv-qwrap, .c-definitive .df-rv-objd { display: grid; gap: 6px; min-width: 0; }
.c-definitive .df-rv-objd { gap: 14px; }
.c-definitive .df-rv-sum { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: center; min-height: 44px; border-top: 1px solid var(--line); }
.c-definitive .df-rv-sum::-webkit-details-marker { display: none; }
.c-definitive .df-rv-sum .df-icon { margin-left: auto; color: var(--fg-3); }
.c-definitive details[open] > .df-rv-sum .df-icon { transform: rotate(180deg); }
.c-definitive .df-rv-qwrap > .df-rv-sum { border-top: 0; padding: 0 4px; border-radius: 12px; background: var(--s1); padding: 0 14px; }
.c-definitive .df-rv-qh { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.c-definitive .df-rv-queue ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.c-definitive .df-rv-qi { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease); }
.c-definitive .df-rv-qi:hover { background: rgba(168, 188, 226, .05); }
.c-definitive .df-rv-qi[aria-current="true"] { background: var(--sel-wash); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .35), inset 3px 0 0 var(--sel); }
.c-definitive .df-rv-qn { font-size: 13px; color: var(--fg-3); padding-top: 1px; }
.c-definitive .df-rv-qt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; min-width: 0; }
.c-definitive .df-rv-qt small { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-definitive .df-rv-qt b { font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-definitive .df-rv-qt small { display: flex; gap: 6px; align-items: baseline; font-size: 13px; line-height: 1.35; color: var(--fg-3); }
.c-definitive .df-rv-qt small .df-game { transform: translateY(2px); }
.c-definitive .df-rv-qa { white-space: nowrap; padding-top: 1px; }

.c-definitive .df-rv-ev { --game: var(--g-wow); display: grid; gap: 14px; align-content: start; min-width: 0; }
.c-definitive .df-rv-eh { display: flex; gap: 12px; align-items: flex-start; }
.c-definitive .df-rv-eht { display: grid; gap: 2px; min-width: 0; }
.c-definitive .df-rv-pos { justify-self: start; margin: 0 0 2px; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--sel); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .4); }
.c-definitive .df-rv-eht p { margin: 0; }
.c-definitive .df-rv-h { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.015em; color: var(--fg); line-height: 1.3; }
.c-definitive .df-rv-h span { font-weight: 450; color: var(--fg-2); }
.c-definitive .df-rv-where { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
.c-definitive .df-rv-old { color: var(--risk); }
.c-definitive .df-rv-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--s1); font: italic 400 16px/1.45 var(--serif); color: var(--fg); box-shadow: inset 3px 0 0 var(--line-3); }
.c-definitive .df-rv-stage, .c-definitive .df-rv-pimg > div { position: relative; border-radius: 18px; overflow: hidden; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 0 color-mix(in srgb, var(--game) 55%, transparent); touch-action: pan-y; }
.c-definitive .df-rv-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.c-definitive .df-rv-cap { margin: 8px 0 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-rv-cap b { color: var(--fg); font-weight: 600; }
.c-definitive .df-rv-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(7, 10, 17, .85); color: var(--fg); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); }
.c-definitive .df-rv-arrow[data-side="l"] { left: 10px; }
.c-definitive .df-rv-arrow[data-side="r"] { right: 10px; }
.c-definitive .df-rv-arrow:disabled { opacity: .3; cursor: default; }
.c-definitive .df-rv-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-top: 10px; }
.c-definitive .df-rv-thumb { flex: none; display: grid; gap: 4px; padding: 4px; border: 0; border-radius: 12px; background: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); font-size: 13px; }
.c-definitive .df-rv-thumb img { width: 96px; height: 54px; border-radius: 8px; object-fit: cover; display: block; }
.c-definitive .df-rv-thumb[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--sel); color: var(--fg); }
.c-definitive .df-rv-pairs { display: grid; gap: 14px; }
.c-definitive .df-rv-tool { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.c-definitive .df-rv-pair { margin: 0; display: grid; gap: 8px; }
.c-definitive .df-rv-pair figcaption { font-size: 14px; color: var(--fg); }
.c-definitive .df-rv-pimg { display: grid; gap: 8px; }
.c-definitive .df-rv-pimg img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.c-definitive .df-rv-tag { display: grid; gap: 1px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.c-definitive .df-rv-tag b { font-size: 14px; font-weight: 650; color: var(--fg); }
.c-definitive .df-rv-tag small { font-size: 13px; color: var(--fg-2); line-height: 1.3; }
.c-definitive .df-rv-checks { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.c-definitive .df-rv-checks .df-label { margin: 0; }
.c-definitive .df-rv-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.c-definitive .df-rv-checks li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-rv-checks li .df-icon { margin-top: 2px; flex: none; }
.c-definitive .df-rv-checks li[data-ok="yes"] .df-icon { color: var(--cred); }
.c-definitive .df-rv-checks li[data-ok="no"] { color: var(--fg); }
.c-definitive .df-rv-checks li[data-ok="no"] .df-icon { color: var(--risk); }
.c-definitive .df-rv-checks li[data-ok="info"] .df-icon { color: var(--fg-3); }

.c-definitive .df-rv-dec { display: grid; gap: 12px; align-content: start; min-width: 0; }
.c-definitive .df-rv-commit { order: -1; box-shadow: var(--e2), inset 0 0 0 1px var(--line-2); }
.c-definitive .df-rv-card { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--s1); box-shadow: var(--e2); min-width: 0; }
.c-definitive .df-rv-card > .df-meta { margin: 0; }
.c-definitive .df-rv-card .df-tr-fig b { font-size: 28px; }
.c-definitive .df-rv-attr { display: grid; gap: 6px; }
.c-definitive .df-rv-attr .df-label, .c-definitive .df-rv-attr .df-meta { margin: 0; }
.c-definitive .df-rv-attr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.c-definitive .df-rv-attr li { display: flex; gap: 9px; align-items: center; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-rv-attr b { color: var(--fg); font-weight: 600; }
.c-definitive .df-rv-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--s3); font-size: 13px; font-weight: 600; letter-spacing: -.02em; color: var(--fg-2); }
.c-definitive .df-rv-attr li[data-me="yes"] .df-rv-av { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--sel); }
.c-definitive .df-rv-audit > summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: center; min-height: 44px; border-top: 1px solid var(--line); }
.c-definitive .df-rv-audit > summary::-webkit-details-marker { display: none; }
.c-definitive .df-rv-audit > summary .df-icon { margin-left: auto; color: var(--fg-3); }
.c-definitive .df-rv-audit[open] > summary .df-icon { transform: rotate(180deg); }
.c-definitive .df-rv-audh { margin: 0 0 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.c-definitive .df-rv-audit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.c-definitive .df-rv-audit li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--fg-2); }
.c-definitive .df-rv-audit li .df-glyph { margin-top: 4px; }
.c-definitive .df-rv-audit b { color: var(--fg); }
.c-definitive .df-rv-runs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.c-definitive .df-rv-runs .df-label { flex-basis: 100%; }
.c-definitive .df-rv-tasks { margin: 0; padding: 0; border: 0; display: grid; gap: 4px; }
.c-definitive .df-rv-tasks legend { margin-bottom: 6px; }
.c-definitive .df-rv-task { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; color: var(--fg); cursor: pointer; }
.c-definitive .df-rv-task[data-paid="yes"] { color: var(--fg-3); cursor: not-allowed; }
.c-definitive .df-rv-credit { display: grid; gap: 0; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--gold-wash); box-shadow: inset 0 0 0 1px var(--gold-line); }
.c-definitive .df-rv-credit .df-pts { font: 500 30px/1.15 var(--serif); font-variation-settings: "opsz" 36; }
.c-definitive .df-rv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-definitive .df-rv-btns .df-kbd { margin-left: auto; }
.c-definitive .df-rv-btns .df-btn { justify-content: flex-start; }
.c-definitive .df-rv-approve { grid-column: 1 / -1; }
.c-definitive .df-rv-span { grid-column: 1 / -1; }
.c-definitive .df-rv-reason { display: grid; gap: 10px; }
/* phones: the decision rides under the navigation; it is the only set of decision buttons at that width */
.c-definitive .df-rv-dock { display: none; }
@media (max-width: 899px) {
  .c-definitive .df-rv-dock { position: sticky; top: 62px; z-index: 25; display: grid; grid-template-columns: auto 1fr 1fr; grid-template-areas: "c a a" "s s d"; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter); background: rgba(11, 15, 24, .96); border-bottom: 1px solid var(--line-2); }
  .c-definitive .df-rv-dock-c { grid-area: c; display: grid; margin: 0; line-height: 1.15; align-self: center; }
  .c-definitive .df-rv-dock-c .df-pts { font-size: 18px; font-weight: 650; }
  .c-definitive .df-rv-dock-c small { font-size: 13px; color: var(--fg-3); }
  .c-definitive .df-rv-dock > .df-btn:nth-of-type(1) { grid-area: a; }
  .c-definitive .df-rv-dock > .df-btn:nth-of-type(2) { grid-area: s; }
  .c-definitive .df-rv-dock > .df-btn:nth-of-type(3) { grid-area: d; }
  .c-definitive .df-rv-dock:not(:has(.df-btn:nth-of-type(3))) > .df-btn:nth-of-type(2) { grid-column: 1 / -1; }
  .c-definitive .df-rv-main-btns { display: none; }
}
@media (max-width: 400px) {
  .c-definitive .df-rv-dock { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "c c" "a a" "s d"; }
  .c-definitive .df-rv-dock-c { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; }
}
.c-definitive .df-rv-reason .df-rv-btns .df-btn { justify-content: center; white-space: normal; text-align: center; }
.c-definitive .df-rv-reason .df-rv-btns .df-btn:first-child { grid-column: 1 / -1; }
.c-definitive .df-rv-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.c-definitive .df-chip { min-height: 36px; padding: 6px 12px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg-2); font-size: 13px; text-align: left; cursor: pointer; }
.c-definitive .df-chip:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-3); }
.c-definitive .df-rv-done { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.c-definitive .df-rv-done p { margin: 0; display: grid; gap: 2px; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-rv-done b { color: var(--fg); font-size: 15px; }
.c-definitive .df-rv-done-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cred); color: var(--cred-ink); animation: df-pop var(--t-slow) var(--ease) both; }
.c-definitive .df-rv-done-i[data-kind="sentback"], .c-definitive .df-rv-done-i[data-kind="declined"] { background: none; color: var(--risk); box-shadow: inset 0 0 0 1.5px var(--risk); }
.c-definitive .df-rv-keys { display: none; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }
.c-definitive .df-rv-keys > span { display: inline-flex; gap: 4px; align-items: center; }
.c-definitive .df-rv-keys b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-2); font-size: 13px; }
.c-definitive .df-rv-keys-end { margin-left: auto; }
@media (max-width: 899px) {
  .c-definitive .df-rv-dec { order: 1; }
  .c-definitive .df-rv-btns .df-kbd { display: none; }
  .c-definitive .df-rv-btns .df-btn { justify-content: center; }
  .c-definitive .df-rv-nav { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .c-definitive .df-rv-nav .df-kbd { display: none; }
  .c-definitive .df-rv-pos { display: none; }
  .c-definitive .df-rv-ev { gap: 12px; }
  .c-definitive .df-rv-pimg .df-rv-tag { padding: 6px 10px; }
}
.c-definitive .df-rv-pimg[data-compare="yes"] { grid-template-columns: 1fr 1fr; }
@media (max-width: 359px) { .c-definitive .df-rv-btns { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) {
  .c-definitive .df-rv { padding-top: 22px; gap: 16px; }
    .c-definitive .df-rv-grid { grid-template-columns: 250px minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
  .c-definitive .df-rv-queue { order: 0; position: sticky; top: 16px; }
  .c-definitive .df-rv-dec { position: sticky; top: 16px; }
  .c-definitive .df-rv-keys { display: flex; }
}
@media (min-width: 1240px) { .c-definitive .df-rv-grid { grid-template-columns: 270px minmax(0, 1fr) 360px; } }

/* ---- screens/Progression.vue ---- */
.c-definitive .df-pg { padding-top: 16px; display: grid; gap: 14px; min-width: 0; font-size: 14px; }
.c-definitive .df-pg-head { display: grid; gap: 10px; }
.c-definitive .df-pg-head .df-meta { margin: 4px 0 0; max-width: 70ch; }
.c-definitive .df-pg-key { display: grid; gap: 10px; }
.c-definitive .df-pg-truth { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--s1); box-shadow: var(--e1); font-size: 14px; color: var(--fg-2); }
.c-definitive .df-pg-truth b { color: var(--fg); }
.c-definitive .df-pg-truth .df-icon { margin-top: 1px; color: var(--obs); flex: none; }
.c-definitive .df-pg-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--fg-2); }
.c-definitive .df-pg-legend li { display: inline-flex; gap: 7px; align-items: center; }
.c-definitive .df-pg-list { display: grid; gap: 14px; min-width: 0; }
.c-definitive .df-pg-card { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: var(--r-lg); background: var(--s1); box-shadow: var(--e2); min-width: 0; }
.c-definitive .df-pg-ch { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.c-definitive .df-pg-id { min-width: 0; }
.c-definitive .df-pg-id p { margin: 1px 0 0; }
.c-definitive .df-pg-prov { grid-column: 1 / -1; margin: 6px 0 0; display: grid; gap: 1px; }
.c-definitive .df-pg-prov small { font-size: 13px; color: var(--fg-3); }
.c-definitive .df-pg-t { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.c-definitive .df-pg-c-w { width: 120px; } .c-definitive .df-pg-c-n { width: 96px; } .c-definitive .df-pg-c-n2 { width: 110px; } .c-definitive .df-pg-c-d { width: 190px; }
.c-definitive .df-pg-t th, .c-definitive .df-pg-t td { text-align: left; padding: 9px 8px 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.c-definitive .df-pg-t thead th { border-top: 0; padding-top: 0; font-size: 13px; font-weight: 500; color: var(--fg-3); white-space: nowrap; }
.c-definitive .df-pg-t tbody th { font-weight: 600; color: var(--fg); white-space: nowrap; }
.c-definitive .df-pg-t small { display: block; white-space: nowrap; font-size: 13px; font-weight: 400; color: var(--fg-3); }
.c-definitive .df-pg-t small[data-tone="risk"] { color: var(--risk); }
.c-definitive .df-pg-t tr[data-now="yes"] > * { background: rgba(145, 177, 255, .05); }
.c-definitive .df-pg-t tr[data-now="yes"] th { box-shadow: inset 2px 0 0 var(--sel); padding-left: 8px; }
.c-definitive .df-pg-n { font-size: 17px; font-weight: 600; color: var(--fg); }
.c-definitive .df-pg-o { color: var(--obs); }
.c-definitive .df-pg-cmp { width: 230px; }
.c-definitive .df-pg-lane { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 8px; align-items: center; }
.c-definitive .df-pg-lane + .df-pg-lane { margin-top: 6px; }
.c-definitive .df-pg-lane small { display: inline; font-size: 13px; color: var(--fg-3); white-space: nowrap; }
.c-definitive .df-pg-rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; height: 16px; }
.c-definitive .df-pg-rail i { position: relative; display: grid; place-items: center; border-radius: 4px; }
.c-definitive .df-pg-rail i[data-k="approved"] { background: linear-gradient(180deg, var(--cred-hi), var(--cred)); }
.c-definitive .df-pg-rail i[data-k="claimed"] { box-shadow: inset 0 0 0 1.5px var(--claim); }
.c-definitive .df-pg-rail i[data-k="claimed"]::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--claim); }
.c-definitive .df-pg-rail i[data-k="sentback"] { border: 1.5px dashed var(--risk); }
.c-definitive .df-pg-rail i[data-k="open"] { background: rgba(168, 188, 226, .06); }
.c-definitive .df-pg-obs { height: 10px; }
.c-definitive .df-pg-obs i::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--fg-3); opacity: .45; }
.c-definitive .df-pg-obs i[data-on="yes"]::before { width: 7px; height: 7px; background: var(--obs); opacity: 1; }
.c-definitive .df-pg-obs[data-stale="yes"] i[data-on="yes"]::before { background: none; box-shadow: inset 0 0 0 1.5px var(--risk); }
.c-definitive .df-pg-d { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--fg-2); white-space: nowrap; }
.c-definitive .df-pg-d .df-icon { color: var(--fg-3); }
.c-definitive .df-pg-d[data-tone="risk"] { color: var(--risk); font-weight: 600; }
.c-definitive .df-pg-d[data-tone="risk"] .df-icon { color: var(--risk); }
.c-definitive .df-pg-issues { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 5px; }
.c-definitive .df-pg-issues li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-pg-issues .df-icon { margin-top: 2px; flex: none; color: var(--fg-3); }
.c-definitive .df-pg-issues li[data-tone="risk"] { color: var(--fg); }
.c-definitive .df-pg-issues li[data-tone="risk"] .df-icon { color: var(--risk); }
.c-definitive .df-pg-more { justify-self: start; }
.c-definitive .df-pg-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-definitive .df-pg-act .df-btn { white-space: normal; text-align: left; }
@media (max-width: 899px) {
  .c-definitive .df-pg-t thead { display: none; }
  .c-definitive .df-pg-t, .c-definitive .df-pg-t tbody { display: block; }
  .c-definitive .df-pg-t tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
  .c-definitive .df-pg-t tr[data-now="yes"] { padding: 10px 8px; margin: 0 -8px; border-radius: 12px; background: rgba(145, 177, 255, .05); }
  .c-definitive .df-pg-t tr[data-now="yes"] > * { background: none; }
  .c-definitive .df-pg-t th, .c-definitive .df-pg-t td { padding: 0; border: 0; }
  .c-definitive .df-pg-t tbody th { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; box-shadow: none !important; padding-left: 0 !important; }
  .c-definitive .df-pg-t td::before { display: block; font-size: 13px; color: var(--fg-3); }
  .c-definitive .df-pg-t td:nth-of-type(1)::before { content: "Approved"; }
  .c-definitive .df-pg-t td:nth-of-type(2)::before { content: "Claimed"; }
  .c-definitive .df-pg-t td:nth-of-type(3)::before { content: "Observed"; }
  .c-definitive .df-pg-t colgroup { display: none; }
  .c-definitive .df-pg-t td:nth-of-type(4) { grid-column: 1 / -1; }
  .c-definitive .df-pg-t td:nth-of-type(4)::before { content: none; }
  .c-definitive .df-pg-cmp { grid-column: 1 / -1; width: auto; }
  .c-definitive .df-pg-t td.df-pg-cmp::before { content: none; }
}
@media (max-width: 619px) {
  .c-definitive .df-pg-card { gap: 8px; padding: 14px; }
  .c-definitive .df-pg-prov { margin-top: 2px; }
  .c-definitive .df-pg-legend li:last-child { display: none; }
  .c-definitive .df-pg-t tr { gap: 4px 10px; padding: 8px 0; }
  .c-definitive .df-pg-t tr[data-now="yes"] { padding: 8px; }
  .c-definitive .df-pg-more { min-height: 44px; }
  .c-definitive .df-pg-issues { padding-top: 8px; }
}
@media (min-width: 620px) { .c-definitive .df-pg-ch { grid-template-columns: 44px minmax(0, 1fr) auto; } .c-definitive .df-pg-prov { grid-column: auto; margin: 0; justify-items: end; text-align: right; } }
@media (min-width: 1000px) {
  .c-definitive .df-pg { padding-top: 24px; gap: 16px; }
  .c-definitive .df-pg-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
@media (min-width: 1100px) {
  .c-definitive .df-pg-card { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "h h" "t s" "t a"; grid-template-rows: auto auto 1fr; gap: 12px 32px; padding: 18px 22px; }
  .c-definitive .df-pg-ch { grid-area: h; }
  .c-definitive .df-pg-t { grid-area: t; }
  .c-definitive .df-pg-issues { grid-area: s; align-self: start; border-top: 0; padding: 0 0 0 20px; border-left: 1px solid var(--line); }
  .c-definitive .df-pg-act { grid-area: a; align-self: start; padding-left: 20px; }
}

/* ---- screens/Rewards.vue ---- */
.c-definitive .df-rw { padding-top: 18px; display: grid; gap: 16px; min-width: 0; }
.c-definitive .df-rw-head { display: grid; gap: 16px; }
.c-definitive .df-purse-strip { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--line); box-shadow: var(--e2); }
.c-definitive .df-purse-strip div { display: grid; gap: 2px; padding: 12px 16px; background: var(--s1); }
.c-definitive .df-purse-strip dt { font-size: 13px; color: var(--fg-3); }
.c-definitive .df-purse-strip dd { margin: 0; font-size: 17px; font-weight: 600; color: var(--gold); }
.c-definitive .df-purse-main { grid-column: 1 / -1; background: radial-gradient(120% 140% at 0% 0%, var(--gold-wash), transparent 60%), var(--s1) !important; }
.c-definitive .df-purse-main dd { font: 500 38px/1.05 var(--serif); font-variation-settings: "opsz" 48; color: var(--gold); }
.c-definitive .df-rw-explain { margin: -4px 0 0; max-width: 72ch; }
.c-definitive .df-rw-grid { display: grid; gap: 20px; min-width: 0; }

/* the featured reward: one style, blue when it is ready to request */
.c-definitive .df-feat { --game: var(--fg-3); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px 16px; align-items: center; margin-bottom: 14px; padding: 18px; border-radius: var(--r-xl);
  background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--game) 12%, transparent), transparent 60%), linear-gradient(165deg, #151E33, var(--s1) 65%); box-shadow: var(--e2); }
.c-definitive .df-feat[data-ready="yes"] { box-shadow: var(--e2), inset 0 0 0 1.5px var(--gold-line); }
.c-definitive .df-rw-cat-h { margin: 0 0 10px; }
.c-definitive .df-feat-emb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--gold); background: radial-gradient(circle at 50% 35%, var(--gold-wash), transparent 70%), var(--sunk); box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 0 5px color-mix(in srgb, var(--game) 10%, transparent); }
.c-definitive .df-feat-t { display: grid; gap: 3px; min-width: 0; }
.c-definitive .df-feat-k { margin: 0; font-size: 13px; font-weight: 600; color: var(--fg); }
.c-definitive .df-feat:not([data-ready]) .df-feat-k { color: var(--fg-2); }
.c-definitive .df-feat-title { margin: 0; font: 500 30px/1.1 var(--serif); letter-spacing: -.01em; color: var(--fg); font-variation-settings: "opsz" 36; }
.c-definitive .df-feat-price { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.c-definitive .df-feat-price .df-pts { font: 500 28px/1 var(--serif); font-variation-settings: "opsz" 36; }
.c-definitive .df-feat-act { grid-column: 1 / -1; display: grid; gap: 8px; }
.c-definitive .df-feat-act > .df-btn { width: 100%; }

.c-definitive .df-cat { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.c-definitive .df-rwd { --game: var(--fg-3); display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "e t" "p p" "a a"; gap: 10px 14px; padding: 16px 4px; border-bottom: 1px solid var(--line); align-items: center; }
.c-definitive .df-rwd[data-out="yes"] { opacity: .7; }
.c-definitive .df-rwd-emb { grid-area: e; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--gold); background: radial-gradient(circle at 50% 35%, var(--gold-wash), transparent 70%), var(--sunk);
  box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 0 4px color-mix(in srgb, var(--game) 10%, transparent); }
.c-definitive .df-rwd-t { grid-area: t; display: grid; gap: 2px; min-width: 0; }
.c-definitive .df-rwd-t p { margin: 0; }
.c-definitive .df-rwd-title { font: 500 21px/1.2 var(--serif); color: var(--fg); font-variation-settings: "opsz" 28; }
.c-definitive .df-rwd-price { grid-area: p; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.c-definitive .df-rwd-price .df-pts { font-size: 17px; font-weight: 600; }
.c-definitive .df-rwd-meter { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.c-definitive .df-rwd-meter i { display: block; height: 100%; background: var(--fg-3); transform-origin: left; border-radius: 2px; transition: transform var(--t-slow) var(--ease); }
.c-definitive .df-rwd-act { grid-area: a; display: grid; gap: 8px; justify-items: start; }
.c-definitive .df-rw-state { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--fg-2); white-space: nowrap; }
.c-definitive .df-rw-state .df-icon { color: var(--fg-3); }
.c-definitive .df-rw-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-definitive .df-rw-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.c-definitive .df-rw-panel { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: var(--r-lg); background: var(--s1); box-shadow: var(--e2); min-width: 0; }
.c-definitive .df-rw-panel > .df-sec-h { margin: 0 0 2px; }
.c-definitive .df-rw-quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.c-definitive .df-reqs { list-style: none; margin: 0; padding: 0; display: grid; }
.c-definitive .df-reqs li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.c-definitive .df-reqs li:first-child { border-top: 0; }
.c-definitive .df-reqs .df-glyph { margin-top: 5px; }
.c-definitive .df-req-t { min-width: 0; display: grid; gap: 2px; }
.c-definitive .df-req-t p { margin: 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-req-t b { color: var(--fg); font-weight: 600; }
.c-definitive .df-req-why { color: var(--risk) !important; }
.c-definitive .df-req-p { font-size: 14px; font-weight: 600; }
.c-definitive .df-rw-side .df-reqs li > .df-btn { grid-column: 2 / -1; justify-self: start; }
.c-definitive .df-ledger { list-style: none; margin: 0; padding: 0; display: grid; }
.c-definitive .df-ledger li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg); }
.c-definitive .df-ledger li:first-child { border-top: 0; }
.c-definitive .df-ledger-t { display: grid; min-width: 0; }
.c-definitive .df-ledger .df-pts, .c-definitive .df-ledger-out { font-weight: 600; white-space: nowrap; }
.c-definitive .df-ledger-out { color: var(--fg-2); }

/* owner */
.c-definitive .df-rw-ohead .df-meta { margin: 4px 0 0; }
.c-definitive .df-rw-osum { margin: 6px 0 0; font-size: 14px; color: var(--fg-2); }
.c-definitive .df-rw-osum b { color: var(--fg); font-weight: 650; }
.c-definitive .df-rw-osum b[data-tone="risk"] { color: var(--risk); }
.c-definitive .df-rw-owner { display: grid; gap: 16px; min-width: 0; }
.c-definitive .df-rw-omain, .c-definitive .df-rw-oside { display: grid; gap: 16px; align-content: start; min-width: 0; }
.c-definitive .df-oreqs { list-style: none; margin: 0; padding: 0; display: grid; }
.c-definitive .df-oreq { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.c-definitive .df-oreq:first-child { border-top: 0; padding-top: 6px; }
.c-definitive .df-oreq-main { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.c-definitive .df-rw-btns .df-btn[data-v="quiet"]:has(.df-icon) { color: var(--sel); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .45); font-weight: 600; }
.c-definitive .df-oreq-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-line); }
.c-definitive .df-oreq-t { min-width: 0; }
.c-definitive .df-oreq-t p { margin: 0; font-size: 14.5px; color: var(--fg-2); }
.c-definitive .df-oreq-t b { color: var(--fg); }
.c-definitive .df-oreq-t .df-meta { font-size: 13px; }
.c-definitive .df-oreq-cost { display: grid; justify-items: end; font-size: 15px; font-weight: 600; white-space: nowrap; }
.c-definitive .df-oreq-form { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--sunk); }
.c-definitive .df-cross { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--risk); box-shadow: inset 0 0 0 1px var(--risk-line); background: var(--risk-wash); }
.c-definitive .df-exc { box-shadow: inset 0 0 0 1px var(--risk-line); }
.c-definitive .df-exc-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.c-definitive .df-exc-figs p { display: grid; gap: 2px; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(168, 188, 226, .05); }
.c-definitive .df-exc-figs .df-meta { font-size: 13px; line-height: 1.3; }
.c-definitive .df-exc-figs b { font-size: 17px; font-weight: 650; color: var(--fg); }
.c-definitive .df-exc-figs b[data-tone="risk"] { color: var(--risk); }
.c-definitive .df-exc-hint { align-self: center; }
.c-definitive .df-rw-toggle { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--fg-2); }
.c-definitive .df-rw-toggle .df-h2 { margin: 0; }
.c-definitive .df-rw-toggle > .df-icon { margin-left: auto; color: var(--fg-3); transition: transform var(--t) var(--ease); }
.c-definitive .df-rw-toggle .df-chev-open { transform: rotate(180deg); }
.c-definitive .df-inv { width: 100%; border-collapse: collapse; font-size: 14px; }
.c-definitive .df-inv th, .c-definitive .df-inv td { text-align: left; padding: 10px 10px 10px 0; border-top: 1px solid var(--line); vertical-align: middle; color: var(--fg-2); }
.c-definitive .df-inv thead th { border-top: 0; padding-top: 0; font-size: 13px; font-weight: 500; color: var(--fg-3); }
.c-definitive .df-inv tbody th { font-weight: 400; }
.c-definitive .df-inv-name { display: flex; gap: 10px; align-items: center; }
.c-definitive .df-inv-name > span:last-child { display: grid; min-width: 0; }
.c-definitive .df-inv b { color: var(--fg); font-weight: 600; }
.c-definitive .df-inv small { font-size: 13px; color: var(--fg-3); }
.c-definitive .df-inv-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-line); }
.c-definitive .df-inv td .df-pts { font-weight: 600; }
.c-definitive .df-inv td[data-tone="risk"] { color: var(--risk); font-weight: 600; }
.c-definitive .df-inv td[data-tone="low"] { color: var(--fg); font-weight: 600; }
.c-definitive .df-budget-figs { margin: 0 0 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.c-definitive .df-budget-figs div { display: grid; gap: 2px; }
.c-definitive .df-budget-figs dt { font-size: 13px; color: var(--fg-3); }
.c-definitive .df-budget-figs dd { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.015em; color: var(--fg); white-space: nowrap; }
.c-definitive .df-budget-figs dd[data-tone="risk"] { color: var(--risk); }
.c-definitive .df-budget-bar { position: relative; height: 20px; border-radius: 8px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.c-definitive .df-budget-band { position: absolute; top: 0; bottom: 0; background: rgba(145, 177, 255, .1); }
.c-definitive .df-budget-com { position: absolute; left: 3px; top: 3px; bottom: 3px; border-radius: 5px; background: var(--fg); }
.c-definitive .df-budget-pen { position: absolute; top: 3px; bottom: 3px; border-radius: 0 5px 5px 0; box-shadow: inset 0 0 0 1.5px var(--claim); }
.c-definitive .df-budget-over { position: absolute; top: 3px; bottom: 3px; border-radius: 0 5px 5px 0; background: repeating-linear-gradient(135deg, var(--risk) 0 3px, rgba(243, 146, 158, .45) 3px 6px); }
.c-definitive .df-budget-tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--risk); }
.c-definitive .df-budget-scale { position: relative; height: 18px; margin: 0; font-size: 13px; color: var(--fg-3); }
.c-definitive .df-budget-scale span { position: absolute; transform: translateX(-50%); }
.c-definitive .df-budget-scale span:first-child { transform: none; left: 0; }
.c-definitive .df-budget-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--fg-2); }
.c-definitive .df-budget-key li { display: inline-flex; gap: 6px; align-items: center; }
.c-definitive .df-budget-key i { width: 14px; height: 8px; border-radius: 3px; }
.c-definitive .df-budget-key i[data-k="com"] { background: var(--fg); }
.c-definitive .df-budget-key i[data-k="pen"] { box-shadow: inset 0 0 0 1.5px var(--claim); }
.c-definitive .df-budget-key i[data-k="over"] { background: repeating-linear-gradient(135deg, var(--risk) 0 2px, rgba(243, 146, 158, .45) 2px 4px); }
.c-definitive .df-budget-warn { display: flex; gap: 8px; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--risk-wash); font-size: 14px; color: var(--fg); }
.c-definitive .df-budget-warn .df-icon { margin-top: 2px; color: var(--risk); flex: none; }
@media (max-width: 619px) {
  .c-definitive .df-inv thead { display: none; }
  .c-definitive .df-inv, .c-definitive .df-inv tbody { display: block; }
  .c-definitive .df-inv tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
  .c-definitive .df-inv th, .c-definitive .df-inv td { padding: 0; border: 0; }
  .c-definitive .df-inv tbody th { grid-column: 1; grid-row: span 2; }
  .c-definitive .df-inv td:nth-of-type(1) { text-align: right; }
  .c-definitive .df-inv td:nth-of-type(2) { text-align: right; font-size: 13px; }
  .c-definitive .df-inv td:nth-of-type(3), .c-definitive .df-inv td:nth-of-type(4) { grid-column: 1 / -1; padding-left: 40px; font-size: 13px; }
  .c-definitive .df-exc-figs { grid-template-columns: minmax(0, 1fr); }
  .c-definitive .df-exc-figs p { grid-template-columns: 1fr auto; align-items: baseline; }
}
@media (max-width: 359px) { .c-definitive .df-feat { grid-template-columns: 48px minmax(0, 1fr); padding: 16px; } .c-definitive .df-feat-emb { width: 48px; height: 48px; border-radius: 15px; } .c-definitive .df-feat-title { font-size: 25px; } .c-definitive .df-budget-figs { grid-template-columns: minmax(0, 1fr); } .c-definitive .df-budget-figs div { grid-template-columns: 1fr auto; } .c-definitive .df-oreq-main { grid-template-columns: 38px minmax(0, 1fr); } .c-definitive .df-oreq-cost { grid-column: 2; justify-items: start; } }
@media (min-width: 620px) {
  .c-definitive .df-rwd { grid-template-columns: 48px minmax(0, 1fr) 140px 190px; grid-template-areas: "e t p a"; padding: 16px 8px; }
  .c-definitive .df-rwd-price { grid-template-columns: minmax(0, 1fr); justify-items: end; gap: 6px; }
  .c-definitive .df-rwd-meter { width: 100%; }
  .c-definitive .df-rwd-act { justify-items: end; }
  .c-definitive .df-feat { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 22px 24px; }
  .c-definitive .df-feat-price { grid-column: auto; display: grid; justify-items: end; text-align: right; }
  .c-definitive .df-feat-act { grid-column: 2 / -1; justify-items: start; }
  .c-definitive .df-feat-act > .df-btn { width: auto; }
  .c-definitive .df-purse-strip { grid-template-columns: 1.6fr 1fr 1fr; }
  .c-definitive .df-purse-main { grid-column: auto; }
  .c-definitive .df-oreq-btns { padding-left: 50px; }
}
@media (min-width: 960px) {
  .c-definitive .df-rw { padding-top: 26px; gap: 20px; }
  .c-definitive .df-rw-head { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); align-items: end; }
  .c-definitive .df-rw-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
  .c-definitive .df-rw-owner { grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
  .c-definitive .df-rw-oside { position: sticky; top: 16px; }
}
@media (max-width: 559px) {
  .c-definitive .df-oreq-main { grid-template-columns: 38px minmax(0, 1fr); }
  .c-definitive .df-oreq-cost { grid-column: 2; display: flex; gap: 10px; align-items: baseline; justify-content: flex-start; }
  .c-definitive .df-oreq-btns { padding-left: 0; }
}

/* ---- screens/Leaderboard.vue ---- */
.c-definitive .df-lb { display: grid; gap: 18px; padding-top: 20px; }
.c-definitive .df-lb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; }
.c-definitive .df-lb-ht { display: grid; gap: 4px; min-width: 0; }
.c-definitive .df-lb-seg { flex: none; }

/* own standing: the viewer's figures only */
.c-definitive .df-lb-you { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--s1); box-shadow: var(--e2), inset 3px 0 0 var(--sel); }
.c-definitive .df-lb-you-figs { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; flex: 1 1 auto; min-width: 0; }
.c-definitive .df-lb-you-figs div { display: grid; gap: 2px; min-width: 0; }
.c-definitive .df-lb-you-figs dt { font-size: 13px; color: var(--fg-2); }
.c-definitive .df-lb-you-figs dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.c-definitive .df-lb-you-rank { font: 500 22px/1.15 var(--serif); color: var(--fg); font-variation-settings: "opsz" 30; }
.c-definitive .df-lb[data-owner] .df-lb-you-rank { font: 650 20px/1.2 var(--sans); }
.c-definitive .df-lb-you-figs .df-pts { font-size: 15px; font-weight: 600; }
.c-definitive .df-lb-you-none { font-size: 15px; color: var(--fg-2); }

.c-definitive .df-lb-you-figs { gap: 10px 28px; }
@media (max-width: 559px) { .c-definitive .df-lb-you-figs dd { display: grid; gap: 2px; } .c-definitive .df-lb-you-figs { flex-wrap: nowrap; } }
.c-definitive .df-lb-grid { display: grid; gap: 18px; min-width: 0; }
.c-definitive .df-lb-board { min-width: 0; padding: 8px 0 6px; border-radius: var(--r-lg); background: var(--s1); box-shadow: var(--e2); }
.c-definitive .df-lb-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 10px 16px 10px; }
.c-definitive .df-lb-cap .df-meta { margin: 0; }
.c-definitive .df-lb-list { list-style: none; margin: 0; padding: 0; display: grid; }

/* a row: rank numeral, initials, name, a quiet bar against the leader, earned figure */
.c-definitive .df-lb-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 84px; grid-template-areas: "rank name name" "rank bar pts"; align-items: center; gap: 4px 12px; min-height: 56px; padding: 10px 16px; border-top: 1px solid var(--line); }
.c-definitive .df-lb-rank { grid-area: rank; align-self: center; display: grid; justify-items: center; line-height: 1; }
.c-definitive .df-lb-rank b { font: 500 22px/1 var(--serif); color: var(--fg-2); font-variation-settings: "opsz" 30; }
.c-definitive .df-lb-rank small { margin-top: 3px; font-size: 13px; line-height: 1; color: var(--fg-2); }
.c-definitive .df-lb-row[data-top] .df-lb-rank b { font-size: 30px; color: var(--fg); font-variation-settings: "opsz" 48; }
.c-definitive .df-lb-av { display: none; }
.c-definitive .df-lb-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.c-definitive .df-lb-n { font-size: 15px; font-weight: 600; color: var(--fg); line-height: 1.3; overflow-wrap: break-word; min-width: 0; }
.c-definitive .df-lb-me { font-size: 13px; font-weight: 600; color: var(--sel); }
.c-definitive .df-lb-bar { grid-area: bar; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; min-width: 0; }
.c-definitive .df-lb-bar i { display: block; height: 100%; border-radius: 2px; background: rgba(203, 215, 238, .5); transform-origin: left; transition: transform var(--t-slow) var(--ease); }
.c-definitive .df-lb-row[data-top] .df-lb-bar i { background: var(--cred); }
.c-definitive .df-lb-pts { grid-area: pts; font-size: 15px; font-weight: 600; text-align: right; }
.c-definitive .df-lb-row[data-top] .df-lb-pts { font: 500 19px/1.1 var(--serif); font-variation-settings: "opsz" 24; }
.c-definitive .df-lb[data-owner] .df-lb-rank b { font-family: var(--sans); font-weight: 650; font-size: 18px; }
.c-definitive .df-lb[data-owner] .df-lb-row[data-top] .df-lb-rank b { font-size: 22px; }
.c-definitive .df-lb[data-owner] .df-lb-row[data-top] .df-lb-pts { font: 650 16px/1.2 var(--sans); }
/* the viewer's own row: a quiet selection wash and a left accent, plus the word "You" */
.c-definitive .df-lb-row[data-me] { background: var(--sel-wash); box-shadow: inset 3px 0 0 var(--sel); }
.c-definitive .df-lb-row[data-me] .df-lb-bar i { background: var(--sel); }

.c-definitive .df-lb-div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-top: 10px; padding: 14px 16px 8px; border-top: 1px dashed var(--line-2); }
.c-definitive .df-lb-div .df-meta { margin: 0; }
.c-definitive .df-lb-none .df-lb-row { grid-template-areas: "rank name name"; min-height: 48px; }
.c-definitive .df-lb-none .df-lb-rank b { font-family: var(--sans); font-size: 16px; color: var(--fg-3); }
.c-definitive .df-lb-none .df-lb-n { font-weight: 500; color: var(--fg-2); }

.c-definitive .df-lb-side { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.c-definitive .df-lb-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c-definitive .df-lb-rules li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.c-definitive .df-lb-rules .df-icon { margin-top: 3px; color: var(--fg-3); }

.c-definitive .df-lb-sk { display: grid; gap: 0; padding: 8px 0; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
.c-definitive .df-lb-skrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.c-definitive .df-lb-skrow:first-child { border-top: 0; }

@media (min-width: 560px) {
  .c-definitive .df-lb-row { grid-template-columns: 44px 34px minmax(0, 1fr) minmax(90px, 26%) 96px; grid-template-areas: "rank av name bar pts"; gap: 4px 14px; min-height: 60px; padding: 10px 20px; }
  .c-definitive .df-lb-none .df-lb-row { grid-template-areas: "rank av name name name"; min-height: 52px; }
  .c-definitive .df-lb-av { grid-area: av; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--s3); color: var(--fg-2); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
  .c-definitive .df-lb-row[data-me] .df-lb-av { color: var(--fg); box-shadow: inset 0 0 0 1.5px rgba(145, 177, 255, .55); }
  .c-definitive .df-lb-cap { padding: 12px 20px 12px; }
  .c-definitive .df-lb-div { padding: 16px 20px 8px; }
}
@media (min-width: 760px) {
  .c-definitive .df-lb { padding-top: 32px; gap: 22px; }
  .c-definitive .df-lb-you { padding: 16px 22px; }
}
@media (min-width: 1000px) {
  .c-definitive .df-lb-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 24px; }
}

/* ==== Application layer ====================================================
   Parts the showcase did not need: the real navigation (one <nav> per role and
   width, with links so routes can be opened and copied), sign-out, the owner's
   Manage sections, the sign-in page and the boot state. */
.c-definitive { color-scheme: dark; }
.c-definitive a { color: inherit; }
.c-definitive .df-brand { text-decoration: none; color: var(--fg); }
.c-definitive .df-brand-lockup { display: inline-flex; align-items: center; gap: 10px; }

/* Masthead: on phones it scrolls away and the tab bar under it stays (sticky at -60px). */
.c-definitive .dt-head { position: sticky; top: -60px; z-index: 30; background: rgba(10, 14, 22, .9); border-bottom: 0; }
.c-definitive .dt-head .df-top-in { min-height: 60px; flex-wrap: wrap; row-gap: 0; }
.c-definitive .dt-head .df-brand { flex: none; }
.c-definitive .dt-head .df-top-end { flex-wrap: nowrap; flex: 1 1 0; min-width: 0; gap: 0 6px; }
.c-definitive .dt-head .dt-purse { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) { .c-definitive .dt-head .df-top-in { gap: 0 8px; } .c-definitive .dt-purse { padding: 0 9px; font-size: 14px; } .c-definitive .dt-signout { min-width: 40px; padding: 0 6px; } }
.c-definitive .dt-purse { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; text-decoration: none; background: var(--gold-wash); box-shadow: inset 0 0 0 1px var(--gold-line); color: var(--gold); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.c-definitive .dt-purse:hover { background: rgba(227, 191, 115, .15); }
.c-definitive .dt-who { display: none; font-size: 14px; font-weight: 500; color: var(--fg-2); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-definitive .dt-signout { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--fg-2); font-size: 14px; font-weight: 500; cursor: pointer; }
.c-definitive .dt-signout:hover { color: var(--fg); background: rgba(168, 188, 226, .07); }
.c-definitive .dt-signout-l { display: none; }

/* One nav for employees: a sticky tab bar on phones, pills in the masthead from 760 px. */
.c-definitive .dt-nav { order: 3; flex: 1 0 100%; margin: 0 calc(-1 * var(--gutter)); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 6px 10px; background: rgba(11, 15, 24, .96); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.c-definitive .dt-nav-a { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 4px; border-radius: 12px; color: var(--fg-2); text-decoration: none; font-size: 13.5px; font-weight: 500; line-height: 1.25; text-align: center; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.c-definitive .dt-nav-a:active { transform: scale(.97); }
.c-definitive .dt-nav-a[aria-current="page"] { color: var(--fg); background: var(--sel-wash); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .32); }
.c-definitive .dt-nav-a[aria-current="page"] .df-icon { color: var(--sel); }
.c-definitive .dt-nav-l { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 430px) { .c-definitive .dt-nav-a { flex-direction: column; gap: 1px; min-height: 50px; font-size: 13px; } }
@media (max-width: 359px) { .c-definitive .dt-nav { gap: 0; padding: 4px 4px; } }

/* Owner: four phone tabs plus a More menu; on desktop, primary pills and a quiet Manage row. */
.c-definitive .dt-onav, .c-definitive .dt-subnav { display: none; }
.c-definitive .dt-mtabs { padding: 6px 10px; background: rgba(11, 15, 24, .96); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.c-definitive .dt-mtabs > ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.c-definitive .dt-mtabs summary { list-style: none; cursor: pointer; }
.c-definitive .dt-mtabs summary::-webkit-details-marker { display: none; }
.c-definitive .dt-more { position: relative; }
.c-definitive .dt-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(17rem, calc(100vw - 20px)); margin: 0; padding: 6px; list-style: none; border-radius: var(--r-md); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2), var(--e3); }
.c-definitive .dt-more-menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--fg-2); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.c-definitive .dt-more-menu a:hover { color: var(--fg); background: rgba(168, 188, 226, .07); }
.c-definitive .dt-more-menu a[aria-current="page"] { color: var(--fg); background: var(--sel-wash); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .32); }
.c-definitive .dt-ph-only { display: inline-flex; }

@media (min-width: 760px) {
  .c-definitive .dt-head { position: relative; top: auto; background: rgba(10, 14, 22, .72); border-bottom: 1px solid var(--line); }
  .c-definitive .dt-head .df-top-in { min-height: 68px; flex-wrap: nowrap; gap: 0 16px; }
  .c-definitive .dt-who { display: inline; }
  .c-definitive .dt-signout-l { display: inline; }
  .c-definitive .dt-ph-only { display: none; }
  .c-definitive .dt-nav { order: 0; flex: 0 1 auto; margin: 0; display: flex; gap: 4px; padding: 0; background: none; border: 0; }
  .c-definitive .dt-nav-a { height: 40px; min-height: 40px; padding: 0 14px 0 12px; gap: 8px; border-radius: 999px; font-size: 14px; }
  .c-definitive .dt-nav-a:hover { color: var(--fg); background: rgba(168, 188, 226, .07); }
  .c-definitive .dt-nav-a .df-icon { color: var(--fg-3); }
  .c-definitive .dt-nav-a[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .35); }
  .c-definitive .dt-mtabs { display: none; }
  .c-definitive .dt-onav { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .c-definitive .dt-subnav { display: block; border-top: 1px solid var(--line); }
  .c-definitive .dt-subnav-in { max-width: 1280px; margin: 0 auto; padding: 6px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
  .c-definitive .dt-subnav-k { margin-right: 6px; font-size: 13px; font-weight: 600; color: var(--fg-3); }
  .c-definitive .dt-subnav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 10px; color: var(--fg-2); text-decoration: none; font-size: 14px; font-weight: 500; }
  .c-definitive .dt-subnav a:hover { color: var(--fg); background: rgba(168, 188, 226, .07); }
  .c-definitive .dt-subnav a[aria-current="page"] { color: var(--fg); background: var(--sel-wash); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .32); }
}

/* Page container shared by both apps: 08's 1280 px measure and gutters. */
.c-definitive .dt-main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px var(--gutter) 40px; min-width: 0; }
.c-definitive .dt-main > * + * { margin-top: 16px; }
@media (min-width: 760px) { .c-definitive .dt-main { padding-top: 32px; padding-bottom: 72px; } .c-definitive .dt-main > * + * { margin-top: 20px; } }
.c-definitive .dt-boot { min-height: 100vh; display: grid; place-items: center; gap: 14px; align-content: center; color: var(--fg-2); }

/* Sign-in and forced password change: 08's login card. */
.c-definitive .dt-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px var(--gutter);
  background: radial-gradient(70% 45% at 50% -8%, #14203A 0%, transparent 62%) no-repeat, var(--bg); }
.c-definitive .dt-auth-card { width: 100%; max-width: 360px; display: grid; gap: 14px; padding: 28px 22px 24px; border-radius: var(--r-xl); background: var(--s1); box-shadow: var(--e2); }
.c-definitive .dt-auth-brand { display: grid; justify-items: center; gap: 10px; text-align: center; margin-bottom: 4px; }
.c-definitive .dt-auth-brand .df-word b { font-size: 28px; }
.c-definitive .dt-auth-brand .df-word span { font-size: 17px; }
.c-definitive .dt-auth-games { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 2px; }
.c-definitive .dt-auth-note { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.c-definitive .dt-auth-note[data-tone="risk"] { color: var(--risk); background: var(--risk-wash); box-shadow: inset 0 0 0 1px var(--risk-line); }
.c-definitive .dt-auth-note[data-tone="info"] { color: var(--fg-2); background: var(--sel-wash); box-shadow: inset 0 0 0 1px rgba(145, 177, 255, .25); }

/* Integration audit: every control the phone audit found under 44 px reaches the 08 tap size on phones
   (body-qualified so it holds over the later per-role sheets). */
@media (max-width: 759px) {
  body.c-definitive .dt-purse,
  body.c-definitive .df-chip,
  body.c-definitive .do-claim, body.c-definitive .do-thumb, body.c-definitive .do-radio, body.c-definitive .do-proofs li,
  body.c-definitive .do-hist-d > summary, body.c-definitive .do-bmonth .df-input, body.c-definitive .do-tlabel .df-input,
  body.c-definitive .de-req-tl > summary, body.c-definitive .de-hist-terms > summary { min-height: 44px; }
  body.c-definitive .de-pp-x, body.c-definitive .de-pp-addic { width: 44px; height: 44px; }
}