/*
 * verifly-theme.css -- Verifly's look, in one place (BUAT-140, Yasmine's look spec v2 of 2026-11-03: the Todos2 look).
 * Built from Todos2's app/static/todos-theme.css (commit b130ba1): its light tokens, type roles, buttons and fields, shell,
 * side menu, top bar, cards and rows, the opened row and the notice. Verifly sets the one button colour to BLOMINVEST blue.
 * Unlayered on purpose: daisyUI and Tailwind put their rules in cascade layers, and an unlayered rule beats every layered
 * one. Start and end only, never left and right (Todos2's own left/right are written in the logical form here), so Arabic
 * mirrors by itself. Text is always black; greys are surfaces and lines only.
 */

/* ---- 2.1 Tokens ------------------------------------------------------------------------------------------------ */
:root, [data-theme="verifly"] {
  color-scheme: light;
  --color-base-100: #FFFFFF; --color-base-200: #F4F4F4; --color-base-300: #E4E4E4; --color-base-content: #000000;
  --color-primary: #00529B; --color-primary-content: #FFFFFF;          /* THE one button colour */
  --color-neutral: #000000; --color-neutral-content: #FFFFFF; --color-info: #000000; --color-info-content: #FFFFFF;
  --color-secondary: var(--color-primary); --color-secondary-content: #FFFFFF; --color-accent: var(--color-primary); --color-accent-content: #FFFFFF;
  --color-success: #1B7F3B; --color-success-content: #FFFFFF; --color-error: #B00020; --color-error-content: #FFFFFF;
  --color-warning: #F2C94C; --color-warning-content: #000000;
  --vf-page: #F1F1EF; --vf-card: #FFFFFF; --vf-hover: #F1F1EE; --vf-current: #E6E6E2; --vf-sunk: #F7F7F5;
  --vf-rule: #E4E4E0; --vf-rule-strong: #8A8A85;
  --vf-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 1px 4px rgb(0 0 0 / 0.06);
  --vf-lift: 0 2px 6px rgb(0 0 0 / 0.16), 0 10px 28px rgb(0 0 0 / 0.14);
  --vf-button-hover: color-mix(in oklab, var(--color-primary), #000 12%);
  --vf-button-pressed: color-mix(in oklab, var(--color-primary), #000 22%);
  --radius-box: .75rem; --radius-field: .625rem; --radius-selector: .375rem; --vf-radius-row: .5rem;
  --size-field: .25rem; --size-selector: .25rem; --border: 1px; --depth: 0; --noise: 0;
  --vf-bar-h: 4rem; --vf-frame: 128rem; --vf-gutter: 1.5rem; --vf-menu-w: 16rem; --vf-gap: 2.5rem;
  --fs-display: 2rem; --lh-display: 2.5rem; --fw-display: 300;
  --fs-title: 1.25rem; --lh-title: 1.75rem;
  --fs-body: 1.0625rem; --lh-body: 1.5rem;
  --fs-read: 1.0625rem; --lh-read: 1.625rem;
  --fs-label: .9375rem; --lh-label: 1.25rem;
  --fs-topic: .9375rem; --lh-topic: 1.5rem;
  --vf-font: "Helvetica Neue", "Noto Sans Arabic", sans-serif;
  --font-sans: var(--vf-font); --default-font-family: var(--vf-font);
}

/* ---- 3. Base layer --------------------------------------------------------------------------------------------- */
html { font-size: 16px; }
html, body, button, input, select, textarea, optgroup { font-family: var(--vf-font); font-synthesis: none; }
html, body { background-color: var(--vf-page); color: #000; }
body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; min-height: 100vh; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); letter-spacing: -.01em; margin: 0 0 .5rem; overflow-wrap: anywhere; }
h2, h3 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 500; margin: 2.5rem 0 .75rem .25rem; }
h4 { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; margin: 1rem 0 .25rem; letter-spacing: .01em; }
main > h2:first-of-type { margin-top: 1.5rem; }
p, ul, ol, dl { margin: 0 0 1rem; }
main ul:not([class]), main ol:not([class]) { padding-inline-start: 1.5rem; }
main ul:not([class]) { list-style: disc; } main ol:not([class]) { list-style: decimal; }
a { color: #000; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
small { font-size: inherit; }
strong, b { font-weight: 700; }
:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.btn-primary:focus-visible { outline-color: #FFF; outline-offset: -4px; }
::placeholder { color: #000; opacity: 1; }
.jkey, .vf-id { font-size: var(--fs-topic); line-height: var(--lh-topic); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; unicode-bidi: isolate; }
.jline-block { display: block; }
.outcome-pass { color: #1B7F3B; font-weight: 700; } .outcome-fail { color: #B00020; font-weight: 700; }
.nowrap { white-space: nowrap; } .vf-num, .num, time { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
[dir=rtl] input[type=email], [dir=rtl] input[type=date] { unicode-bidi: isolate; }
.vf-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; letter-spacing: .01em; }
.vf-meta { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 400; letter-spacing: .01em; }
.vf-glyph { width: 1.25rem; height: 1.25rem; flex: none; display: inline-block; vertical-align: -.25rem; }

/* ---- 8. Buttons and fields (Todos2's) ------------------------------------------------------------------------- */
.btn { --size: 2.5rem; --fontsize: var(--fs-label); --btn-p: 1.125rem; font-weight: 500; letter-spacing: .01em; border-radius: var(--radius-field); border: 0; text-decoration: none; color: var(--btn-fg); }
.btn.btn-primary:hover { --btn-bg: var(--vf-button-hover); --btn-border: var(--vf-button-hover); }
.btn.btn-primary:active { --btn-bg: var(--vf-button-pressed); --btn-border: var(--vf-button-pressed); }
.btn:is(:disabled, [disabled], [aria-disabled="true"]) { background-color: var(--vf-current); color: #000; opacity: 1; cursor: not-allowed; }
@media (max-width: 40rem) { .btn { --size: 2.75rem; } }
.btn:not(.vf-choice) { max-width: 100%; height: auto; min-height: var(--size); white-space: normal; line-height: 1.25; padding-block: .3rem; }
/* A secondary action is a link (spec 0.5): a <button> or <a> drawn as Todos2's .link */
.vf-link { display: inline; padding: 0; margin: 0; border: 0; background: none; color: #000; font: inherit; font-weight: 500; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .25em; cursor: pointer; text-align: start; }
.vf-link:hover { text-decoration-thickness: 2px; }
.vf-link:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; text-decoration-style: dotted; }
.vf-round { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 9999px; background: transparent; color: #000; cursor: pointer; flex: none; }
.vf-round:hover { background-color: var(--vf-hover); }
.input, .select, .textarea { width: 100%; font-size: var(--fs-body); color: #000; background-color: var(--vf-sunk); border: 1px solid var(--vf-rule-strong); border-radius: var(--radius-field); box-shadow: none; }
.input, .select { --size: 2.75rem; height: 2.75rem; padding-inline: .875rem; }
.select { padding-inline-end: 2.5rem; }
.textarea { min-height: 3rem; padding: .5rem .875rem; resize: vertical; }
.input:focus, .input:focus-within, .select:focus, .textarea:focus { outline: 2px solid #000; outline-offset: 1px; box-shadow: none; border-color: var(--vf-rule-strong); }
.input:is(:disabled, [readonly]), .select:disabled, .textarea:is(:disabled, [readonly]) { background-color: var(--vf-sunk); color: #000; cursor: not-allowed; border-color: var(--vf-rule-strong); }
.textarea[readonly], .input[readonly] { cursor: text; }
.select.w-auto, .vf-inline .select, .vf-inline .input { width: auto; min-width: 12rem; }
label { display: block; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; letter-spacing: .01em; margin-bottom: 1rem; }
label > .input, label > .select, label > .textarea, label > .vf-file { display: flex; margin-top: .375rem; font-weight: 400; letter-spacing: 0; }
label > .textarea { display: block; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; } legend { font-size: var(--fs-label); font-weight: 500; margin-bottom: .375rem; }
.checkbox, .radio, .toggle { --input-color: #000; color: #000; border-color: #000; opacity: 1; flex: none; }
.checkbox, .radio { width: 1.25rem; height: 1.25rem; }
.checkbox:checked { background-color: #000; color: #FFF; }
.radio:checked { background-color: #FFF; }
.toggle { --toggle-p: .1875rem; border-color: #000; color: #000; }
.toggle:checked { background-color: #000; color: #FFF; border-color: #000; }
.toggle:not(:checked) { background-color: #FFF; }
.toggle:disabled, .checkbox:disabled { opacity: 1; cursor: not-allowed; background-color: var(--vf-sunk); }
label:has(> .checkbox, > .radio, > .toggle) { display: flex; align-items: center; gap: .625rem; font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; cursor: pointer; }
.vf-file { font-size: var(--fs-label); max-width: 100%; }
.vf-file::file-selector-button { margin-inline-end: .75rem; padding: 0; border: 0; background: none; color: #000; font: 500 var(--fs-label) var(--vf-font); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.vf-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0 0 1rem; }
.vf-inline > label { margin: 0; }
.vf-actions, .fq-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1rem; }
textarea.copy { font-size: var(--fs-label); }

/* ---- 4. Shell, top bar, side menu (Todos2's .todo-shell / .todo-bar / .todo-menu) -------------------------- */
.vf-strip { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 1.75rem; padding: .125rem .75rem;
  background: #F2C94C; color: #000; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; text-align: center; }
.vf-strip p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vf-strip form { margin: 0; flex: none; } .vf-strip .vf-link { font-weight: 700; }
@media (max-width: 40rem) { .vf-strip { flex-wrap: wrap; } .vf-strip p { white-space: normal; } }
.vf-bar { position: sticky; top: 0; z-index: 30; background: var(--vf-card); border-bottom: 1px solid var(--vf-rule); }
body:has(.vf-strip) .vf-bar { top: 1.75rem; }
.vf-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--vf-frame); margin-inline: auto; height: var(--vf-bar-h); padding-inline: var(--vf-gutter); }
.vf-bar-start { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.vf-bar-end { display: flex; align-items: center; gap: .75rem; }
.vf-bar-links { display: flex; align-items: center; gap: .25rem; } .vf-bar-links form { margin: 0; display: flex; }
.vf-bar-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: 0 .75rem; border: 0; border-radius: var(--vf-radius-row); background: none; color: #000; font: inherit; font-size: var(--fs-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.vf-bar-link .vf-glyph { width: 1.25rem; height: 1.25rem; flex: none; }
.vf-bar-link:hover, .vf-bar-link:focus-visible { background-color: var(--vf-hover); color: #000; }
.vf-bar-link[aria-current=page] { background-color: var(--vf-current); font-weight: 700; }
@media (max-width: 40rem) { .vf-bar-text { display: none; } .vf-bar-link { width: 2.25rem; padding: 0; justify-content: center; } .vf-bar-end { gap: .25rem; } .vf-bar-links { gap: 0; } }
.brand { display: inline-flex; align-items: center; } .brand-logo { height: 2rem; width: auto; }
@media (max-width: 40rem) { .vf-bar-inner { padding: .5rem .75rem; } }
/* BUAT-140 round 3 (spec 11): one frame, min(window, 128rem), centred; bar inner and shell are the same box */
.vf-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: var(--vf-frame); margin-inline: auto; padding: 1.5rem var(--vf-gutter); }
.vf-main { min-width: 0; }
.vf-read-col { max-width: 66rem; } .vf-read-col.vf-read-help { max-width: 52rem; }
.vf-shell-bare { display: block; max-width: var(--vf-frame); margin-inline: auto; padding: 1.5rem var(--vf-gutter); }
@media (min-width: 60rem) {
  .vf-bar-inner { display: grid; grid-template-columns: var(--vf-menu-w) minmax(0, 1fr); column-gap: var(--vf-gap); }
  .vf-bar-start { grid-column: 1; }
  .vf-bar-end { grid-column: 2; justify-self: end; }
  .vf-bar-start .vf-round { margin-inline-start: .3125rem; }
  .vf-shell { grid-template-columns: var(--vf-menu-w) minmax(0, 1fr); column-gap: var(--vf-gap); row-gap: 0; }
  .vf-menu { justify-self: start; width: var(--vf-menu-w); position: sticky; top: calc(var(--vf-bar-h) + 1.5rem); align-self: start; max-height: calc(100vh - var(--vf-bar-h) - 1px - 3rem); overflow-y: auto; }
  html[data-menu="collapsed"] .vf-menu { display: none; }
  html[data-menu="collapsed"] .vf-shell { grid-template-columns: minmax(0, 1fr); } /* Tom 2026-11-03: the content takes the menu's place; bar unchanged */
  .vf-backdrop { display: none; }
}
@media (max-width: 59.99rem) {
  .vf-shell { padding: .75rem var(--vf-gutter); gap: 0; }
  .vf-menu { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; width: min(20rem, 88vw); overflow-y: auto; padding: .75rem .5rem 1.5rem;
    background: var(--vf-page); box-shadow: 0 0 32px rgb(0 0 0 / .35); transform: translateX(-105%); visibility: hidden; transition: transform .15s ease-out, visibility 0s linear .15s; }
  [dir=rtl] .vf-menu { transform: translateX(105%); }
  html[data-menu-open] .vf-menu { transform: none; visibility: visible; transition: transform .15s ease-out; }
  .vf-backdrop { display: none; }
  html[data-menu-open] .vf-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: rgb(0 0 0 / .45); }
  .vf-menu .vf-menu-item { min-height: 2.75rem; }
}
@media (max-width: 40rem) { .vf-main { padding: 1rem .75rem 1.5rem; } .vf-shell { padding: 0; } }
.vf-menu { overflow-x: hidden; }
.vf-menu .menu { padding: 0; width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); }
.vf-menu .menu > li { min-width: 0; max-width: 100%; }
.vf-menu .menu-title { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700; letter-spacing: .01em; margin: 1.75rem 0 .375rem; padding: 0 .75rem; color: #000; }
.vf-menu-item, .vf-menu .menu li > .vf-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.5rem; padding: 0 .75rem;
  border-radius: var(--vf-radius-row); font-size: var(--fs-body); font-weight: 400; color: #000; text-decoration: none; width: 100%; background: none; border: 0; cursor: pointer; text-align: start; }
.vf-menu .menu li > .vf-menu-item:hover, .vf-menu .menu li > .vf-menu-item:focus-visible { background-color: var(--vf-hover); color: #000; }
.vf-menu-item[aria-current=page], .vf-menu .menu li > .vf-menu-item[aria-current=page], .vf-menu .menu li > .vf-menu-item[aria-current=page]:hover { background-color: var(--vf-current); font-weight: 700; box-shadow: none; color: #000; }
.vf-menu-name { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.vf-menu-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-menu-ico { flex: none; width: 1.375rem; height: 1.375rem; display: grid; place-items: center; }
.vf-menu-count { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 400; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.vf-menu .menu li.vf-menu-gap { height: .75rem; margin: 0; pointer-events: none; }
.vf-menu .vf-menu-settings { margin-top: 1.25rem; padding-top: .5rem; border-top: 1px solid var(--vf-rule); }
.vf-menu .vf-menu-who { padding: .5rem .75rem .25rem; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 700; overflow-wrap: anywhere; }
.vf-menu form { margin: 0; width: 100%; }
.vf-points { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border: 1px solid var(--vf-rule-strong); border-radius: 9999px; background: #F2C94C;
  color: #000; font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vf-points.pts-pulse { animation: pts-pulse .9s ease-out 2; }
@keyframes pts-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } }
.pts-gain { position: absolute; font-weight: 700; background: #F2C94C; border: 1px solid #000; border-radius: 1rem; padding: 0 .5rem; animation: pts-rise 1.6s ease-out forwards; pointer-events: none; z-index: 72; }
@keyframes pts-rise { 0% { opacity: 0; transform: translateY(-6px); } 20%, 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(22px); } }

/* ---- 4.4 Page head, 4.5 notices -------------------------------------------------------------------------------- */
.vf-title-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.vf-title-line > h1 { margin: 0; }
.vf-title-line + * { margin-top: .5rem; }
.vf-head-line { margin: 0 0 1.5rem; }
.vf-cycle-line, .cycle-line, .crumb, .cycle-ctx { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; letter-spacing: .01em; margin: 0 0 1rem; }
.crumb { margin-bottom: .5rem; }
.vf-counts-line { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; margin: 0 0 1.5rem; font-variant-numeric: tabular-nums; }
.vf-counts-line a { text-decoration: none; } .vf-counts-line a:hover { text-decoration: underline; }
.vf-counts-line .pts-pass b { color: #1B7F3B; } .vf-counts-line .pts-fail b { color: #B00020; }
.vf-notice { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1rem; padding: .875rem 1rem; background: var(--vf-card); border: 2px solid #000; border-radius: var(--radius-field); overflow-wrap: anywhere; }
.vf-notice > .vf-glyph { margin-top: .125rem; } .vf-notice p { margin: 0; } .vf-notice p + p { margin-top: .5rem; }
.vf-saved { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1rem; padding: .875rem 1rem; background: var(--vf-card); box-shadow: var(--vf-shadow); border-radius: var(--radius-box); }
.vf-saved > .vf-glyph { margin-top: .125rem; }
.more-help { white-space: nowrap; }

/* ---- 5. Cards and rows (Todos2's group, .todo-row / .todo-line, .todo-open) ---------------------------------- */
.vf-card { background: var(--vf-card); border-radius: var(--radius-box); box-shadow: var(--vf-shadow); margin: 0 0 1rem; }
.vf-card.vf-pad { padding: 1.25rem 1.5rem; }
.vf-scroll { overflow-x: auto; }
.vf-rows { margin: 0 0 1rem; }
.vf-row { position: relative; display: block; background: var(--vf-card); box-shadow: var(--vf-shadow); color: #000; text-decoration: none; font-weight: 400; }
.vf-row:first-child, .vf-row[open] + .vf-row { border-start-start-radius: var(--radius-box); border-start-end-radius: var(--radius-box); }
.vf-row:last-child, .vf-row:has(+ .vf-row[open]) { border-end-start-radius: var(--radius-box); border-end-end-radius: var(--radius-box); }
.vf-row + .vf-row::before { content: ""; position: absolute; top: 0; inset-inline: 1.5rem; height: 1px; background: var(--vf-rule); z-index: 1; }
.vf-row[open] + .vf-row::before, .vf-row[open]::before { display: none; }
a.vf-row:hover, .vf-openable:not([open]):hover, .vf-openable > summary:hover { background-color: var(--vf-hover); }
.vf-openable[open] > summary:hover { background: none; }
.vf-line { display: grid; grid-template-columns: 1.375rem var(--vf-id-w, 10ch) minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: center; min-height: 3.75rem; padding: 1.125rem 1.5rem; }
.vf-line.vf-nolead { grid-template-columns: var(--vf-id-w, 10ch) minmax(0, 1fr) auto; }
.vf-line.vf-noid { grid-template-columns: 1.375rem minmax(0, 1fr) auto; }
.vf-line.vf-plain { grid-template-columns: minmax(0, 1fr) auto; }
.vf-line > .vf-glyph { width: 1.375rem; height: 1.375rem; }
.vf-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-text-wrap { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.vf-end { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 400; text-align: end; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.vf-end > span { display: block; }
.vf-sub { display: block; font-size: var(--fs-body); }
summary.vf-line { cursor: pointer; list-style: none; }
summary.vf-line::-webkit-details-marker { display: none; }
.vf-chev { transition: transform .15s ease-out; }
.vf-openable[open] > summary .vf-chev { transform: rotate(180deg); }
.vf-openable[open] { z-index: 2; margin: 1.25rem -.5rem; border-radius: var(--radius-box); box-shadow: var(--vf-lift); }
.vf-openable[open]:first-child { margin-top: .5rem; }
.vf-openable[open] > summary { align-items: start; padding: 1.25rem 1.5rem .75rem; }
.vf-openable[open] > summary .vf-text { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 500; white-space: normal; }
.vf-open-body { padding: 0 1.5rem 1.5rem; }
.vf-open-body p, .vf-read { font-size: var(--fs-read); line-height: var(--lh-read); max-width: 68ch; }
.vf-open-body p { margin: 0 0 .5rem; }
.vf-open-body .vf-actions { margin-top: 1rem; }
.vf-help-q > summary .vf-text { white-space: normal; font-weight: 500; }
@media (max-width: 40rem) {
  .vf-line { grid-template-columns: 1.375rem minmax(0, 1fr) auto; grid-template-areas: "lead id end" "text text text"; row-gap: .25rem; padding: .875rem 1rem; }
  .vf-line > :nth-child(1) { grid-area: lead; } .vf-line > :nth-child(2) { grid-area: id; } .vf-line > :nth-child(3) { grid-area: text; white-space: normal; } .vf-line > :nth-child(4) { grid-area: end; }
  .vf-line.vf-nolead { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id end" "text text"; }
  .vf-line.vf-nolead > :nth-child(1) { grid-area: id; } .vf-line.vf-nolead > :nth-child(2) { grid-area: text; } .vf-line.vf-nolead > :nth-child(3) { grid-area: end; }
  .vf-line.vf-noid, .vf-line.vf-plain { grid-template-areas: none; } .vf-line.vf-noid > *, .vf-line.vf-plain > * { grid-area: auto; }
  .vf-line.vf-noid > :nth-child(2), .vf-line.vf-plain > :nth-child(1) { white-space: normal; }
  .vf-open-body { padding: 0 1rem 1.25rem; }
}
/* 5.4 Tables inside a card */
.vf-table { font-size: var(--fs-body); line-height: var(--lh-body); border-radius: 0; margin: 0; }
.vf-table > thead { color: #000; white-space: normal; }
.vf-table > thead th { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; letter-spacing: .01em; vertical-align: bottom; padding: .875rem .75rem .5rem; border-bottom: 1px solid var(--vf-rule); }
.vf-table :where(td, tbody th) { padding: .875rem .75rem; vertical-align: top; }
.vf-table :where(th, td):first-child { padding-inline-start: 1.5rem; } .vf-table :where(th, td):last-child { padding-inline-end: 1.5rem; }
.vf-table > tbody > tr + tr > :where(td, th) { border-top: 1px solid var(--vf-rule); }
.vf-table > tbody > tr > td, .vf-table > tbody > tr > th { border-bottom: 0; }
.vf-table th.num, .vf-table td.num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vf-table tr.row-reopened td:nth-child(3) { text-decoration: line-through; }
.vf-table tr.bug-journey-first td { border-top: 2px solid var(--vf-rule-strong); }
.vf-table td > form { margin: 0 0 .25rem; }
.vf-table .jkey, .vf-table td.vf-id { white-space: nowrap; }
/* BUAT-152: the bug list's Title column keeps room to read; the card scrolls sideways when the table is wider than it */
.vf-table td.bug-title { min-width: 28rem; }
.vf-table td.bug-fails { min-width: 22rem; } /* BUAT-152: the last column (failed test cases on the bug) keeps room too */
table.instr th:first-child { width: 60%; }
table.assign-table { table-layout: fixed; }
table.assign-table col.c-step { width: 30%; } table.assign-table col.c-case { width: 12%; } table.assign-table col.c-role { width: 13%; }
table.assign-table col.c-testers { width: 26%; } table.assign-table col.c-result { width: 19%; }
table.assign-table td { overflow-wrap: break-word; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; } .chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: .15rem; border: 1px solid var(--vf-rule-strong); border-radius: 9999px; padding: 0 .1rem 0 .6rem; font-size: var(--fs-label); background: var(--vf-card); max-width: 100%; }
.chip .chip-x { padding: 0 .4rem; background: transparent; border: 0; font-size: 1.05rem; line-height: 1.5; border-radius: 9999px; cursor: pointer; }
.chip .chip-x:hover, .chip .chip-x:focus-visible { background: var(--vf-hover); }
ul.testers { list-style: none; padding: 0; margin: .25rem 0 0; } ul.testers li { margin: 0 0 .2rem; }
/* 5.5 Words instead of badges */
.vf-badge, .fq-st { display: inline; padding: 0; background: none; box-shadow: none; border: 0; color: #000; font: inherit; font-weight: 400; white-space: nowrap; height: auto; }
.vf-needs, .cycle-running, .fq-st-needs, .fq-st-retest, .fq-st-nobody { font-weight: 700; }

/* ---- 6. Start page cards ---------------------------------------------------------------------------------------- */
.vf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0 1rem; padding: 0; list-style: none; }
.vf-tile { display: flex; flex-direction: column; justify-content: flex-start; min-height: 9rem; height: 100%; padding: 1.25rem 1.5rem; background: var(--vf-card); border-radius: var(--radius-box);
  box-shadow: var(--vf-shadow); color: #000; text-decoration: none; font-weight: 400; overflow-wrap: anywhere; }
.vf-tile:hover { background: var(--vf-hover); }
.vf-tile-top { display: flex; align-items: center; justify-content: space-between; min-height: 1.75rem; }
.vf-tile-top .vf-glyph { width: 1.375rem; height: 1.375rem; }
.vf-tile-n { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; font-variant-numeric: tabular-nums; }
.vf-tile-title { margin-top: .75rem; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 500; }
.vf-tile-line { margin-top: .25rem; }
@media (max-width: 40rem) { .vf-tiles { grid-template-columns: 1fr; } }

/* ---- 7.1 Fail queue -------------------------------------------------------------------------------------------- */
.vf-filters { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1rem; }
.vf-filter { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .75rem; border: 0; border-radius: var(--vf-radius-row); background: none; color: #000; font: inherit; cursor: pointer; }
.vf-filter:hover { background: var(--vf-hover); }
.vf-filter[aria-pressed=true] { background: var(--vf-current); font-weight: 700; }
.vf-filter .vf-meta { font-weight: inherit; }
.fq-count { font-weight: 700; margin: 0 0 1rem; }
.fq-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--vf-rule); }
.fq-panel h3 { margin: 0 0 .75rem; }
/* spec v2 7.1: an open form replaces the row's actions (Raise in FSCD and the links); Cancel brings them back */
.fq-row .vf-actions:has(~ .fq-panel:not([hidden])) { display: none; }
.fq-row .vf-actions + .fq-panel:not([hidden]) { margin-top: 0; }
.fq-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; margin: 0 0 1rem; font-size: var(--fs-label); }
.fq-facts dt { font-weight: 500; } .fq-facts dd { margin: 0; }
.fq-grid { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: flex-end; }
.raise-type { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; }
.raise-type legend { width: 100%; } .raise-type label { margin: 0; }
.fq-prio .select { width: auto; min-width: 12rem; }
/* BUAT-151: when the browser scrolls a missing field into view, it sits below the sticky top bar (4rem + 1px; the Acting as strip adds 1.75rem) with its label above it */
.fq-panel :is(input, select, textarea) { scroll-margin-top: 9rem; }
.fq-counter { font-weight: 400; margin-inline-start: .5rem; }
.fq-shot-list { display: flex; flex-wrap: wrap; gap: .75rem; } .fq-shot { gap: .5rem; align-items: flex-start; margin: 0; }
.fq-shot-line { font-weight: 500; margin-top: .5rem; }
.fq-error { margin-top: 1rem; }
.fq-just-sent { outline: 2px solid #000; outline-offset: -2px; }
.thumb { max-width: 160px; max-height: 110px; border: 1px solid var(--vf-rule); border-radius: .375rem; margin: .25rem .25rem 0 0; display: inline-block; }
#celebrate-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; }
.celebrate-note { position: fixed; top: 5.5rem; inset-inline-end: 1.5rem; z-index: 71; max-width: 26rem; padding: .875rem 1rem; background: var(--vf-card); color: #000; border-radius: var(--radius-box); box-shadow: var(--vf-lift); }
.celebrate-note p { margin: 0; } .celebrate-note .celebrate-title { font-weight: 700; }
.celebrate-note.celebrate-warn { background: #F2C94C; } .celebrate-note[hidden] { display: none; }

/* ---- 7.2 Test cycle page and its picker ------------------------------------------------------------------------ */
details.cycle-edit > summary { cursor: pointer; font-weight: 500; text-decoration: underline; text-underline-offset: .25em; display: inline-block; margin: 0 0 1rem; list-style: none; }
details.cycle-edit > summary::-webkit-details-marker { display: none; }
.cycle-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 47.99rem) { .cycle-fields { grid-template-columns: 1fr; } }
.cycle-actions { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; margin: 1rem 0; }
.cycle-actions form { margin: 0; } .cycle-actions .cycle-close { margin-inline-start: auto; }
.pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin: 0 0 .75rem .25rem; }
.pick-row > summary .checkbox { margin: 0; }
.pick-cases { list-style: none; margin: 0; padding: 0 1.5rem 1rem 3.5rem; }
.pick-cases li { display: flex; align-items: center; gap: .75rem; padding: .375rem 0; }
.pick-cases label { margin: 0; }

/* ---- 7.3 Test screen ------------------------------------------------------------------------------------------- */
.vf-steps { padding: 1.25rem 1.5rem; overflow-x: auto; }
.vf-steps ol { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min-content, 1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.vf-steps.vf-many ol { grid-auto-columns: minmax(7.5rem, 1fr); }
.vf-steps ol::before { content: ""; position: absolute; top: 1.125rem; inset-inline: 2rem; height: 1px; background: var(--vf-rule-strong); }
.vf-steps li { position: relative; min-width: 0; }
.vf-steps li > a, .vf-steps li > span { display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; color: #000; text-decoration: none; font-weight: 400; }
.vf-steps li.chev-locked > span { cursor: not-allowed; }
.vf-circle { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: #FFF; box-shadow: inset 0 0 0 1.5px var(--vf-rule-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.vf-circle .vf-glyph { width: 1.25rem; height: 1.25rem; }
.chev-done .vf-circle { background: #1B7F3B; color: #FFF; box-shadow: none; } .chev-failed .vf-circle { background: #B00020; }
.chev-current .vf-circle { background: #000; color: #FFF; box-shadow: none; }
.vf-step-title { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; } /* BUAT-156: the title breaks between words only, like the role (BUAT-153) */
.vf-step-role { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 400; overflow-wrap: normal; } /* BUAT-153: the role breaks between words only; a column is never narrower than its longest word, the row scrolls in the card instead */
.vf-steps li.chev-link > a:hover .vf-step-title { text-decoration: underline; }
.vf-case { padding: 1.5rem; }
.vf-case .vf-fact { margin: 0 0 1rem; } .vf-case .vf-fact > .vf-label { display: block; }
.vf-case .vf-fact > p, .vf-case .vf-fact > div { margin: .25rem 0 0; font-size: var(--fs-read); line-height: var(--lh-read); }
.vf-case h2 { margin: 1.5rem 0 .5rem; }
.vf-instr { padding-inline-start: 1.5rem; margin: 0 0 1rem; font-size: var(--fs-read); line-height: var(--lh-read); list-style: decimal; }
.vf-instr li { margin: 0 0 .5rem; } .vf-instr .vf-data { font-weight: 500; }
.instr-shot { display: flex; width: fit-content; flex-direction: column; gap: .25rem; margin-top: .5rem; }
.instr-shot img, .paste-previews img { max-width: 260px; max-height: 170px; border: 1px solid var(--vf-rule); border-radius: .375rem; }
.big-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 1rem; }
.vf-choice { display: flex; align-items: center; justify-content: center; gap: .75rem; height: 5rem; padding: 0 1rem; background: var(--vf-card); border: 1px solid var(--vf-rule-strong);
  border-radius: var(--radius-box); color: #000; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 500; text-decoration: none; cursor: pointer; }
.vf-choice:hover { background: var(--vf-hover); }
.vf-choice .vf-glyph { width: 1.5rem; height: 1.5rem; }
.vf-choice.chosen, .vf-choice[aria-pressed=true] { background: var(--vf-current); border: 2px solid #000; font-weight: 700; }
.vf-pass-glyph { color: #1B7F3B; } .vf-fail-glyph { color: #B00020; }
.result-panel, .result-readonly { padding: 1.5rem; scroll-margin-top: 5.5rem; }
.result-panel > h2, .result-readonly > h2 { margin-top: 0; }
.fail-step legend { font-weight: 500; } .fail-step label { margin: .375rem 0; }
.paste-large { margin: 1rem 0; } .paste-label { margin: 0 0 .375rem; font-size: var(--fs-label); font-weight: 500; }
.paste-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 10rem; padding: 1.5rem 1rem;
  border: 2px dashed var(--vf-rule-strong); border-radius: var(--radius-box); background: var(--vf-sunk); text-align: center; }
.paste-drop.is-over { background: var(--vf-hover); border: 2px solid #000; }
.paste-drop-text { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 500; }
.paste-status { margin: .5rem 0 0; min-height: 1.2em; font-weight: 700; }
.paste-previews { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.paste-previews figure { margin: 0; display: flex; flex-direction: column; gap: .25rem; width: fit-content; }
.paste-zone { margin-top: .375rem; }
.shot-hint { margin: .75rem 0; }
.vf-task-list { margin: 0 0 1rem; }
.journey-switch .vf-card { padding: 1.25rem 1.5rem; }
.journey-switch h1, .journey-switch h2 { margin: 0 0 .25rem; }
.js-label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.all-done { text-align: center; padding: 3rem 1rem; }

/* ---- 7.4 / 7.5 Progress and Report ------------------------------------------------------------------------------ */
.vf-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1rem; }
@media (min-width: 48rem) { .vf-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vf-count { padding: 1.25rem 1.5rem; background: var(--vf-card); border-radius: var(--radius-box); box-shadow: var(--vf-shadow); }
.vf-count p { margin: 0; }
.dash-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; }
.dash-big, .pts-big { display: block; font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 300; font-variant-numeric: tabular-nums; }
.dash-big a { text-decoration: none; font-weight: 300; color: #000; }
.dash-pass .dash-big a, .pts-s-pass .pts-big, .dash-pass .dash-big { color: #1B7F3B; } .dash-fail .dash-big a, .pts-s-fail .pts-big, .dash-fail .dash-big { color: #B00020; }
.cov-pct { font-size: var(--fs-label); font-weight: 500; color: #000; }
.dash-bar { display: flex; width: 100%; height: .75rem; border-radius: 9999px; overflow: hidden; background: var(--vf-sunk); box-shadow: inset 0 0 0 1px var(--vf-rule); margin: .5rem 0; }
.cov-bar { display: flex; width: 10rem; height: .5rem; border-radius: 9999px; overflow: hidden; background: var(--vf-sunk); box-shadow: inset 0 0 0 1px var(--vf-rule); margin-top: .5rem; }
.dash-bar span, .cov-bar span { display: block; height: 100%; }
.cov-pass { background: #1B7F3B; } .cov-fail { background: #B00020; } .dash-bar-partial { background: #F2C94C; }
.cov-key { display: inline-block; width: .875rem; height: .875rem; border: 1px solid var(--vf-rule-strong); border-radius: .2rem; vertical-align: -.05rem; margin-inline-end: .25rem; background: var(--vf-sunk); }
.dash-key { font-size: var(--fs-label); margin: 0 0 1rem; } .dash-key .cov-key:not(:first-child) { margin-inline-start: .75rem; }
.progress { height: .5rem; width: 6rem; border-radius: 9999px; background: var(--vf-sunk); color: #000; box-shadow: inset 0 0 0 1px var(--vf-rule); }
.cov-label { white-space: nowrap; }
.pts-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
@media (max-width: 40rem) { .pts-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pts-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.vf-wall-card { padding: 1.25rem 1.5rem; } .vf-wall-card.pts-me { box-shadow: 0 0 0 2px #000; }
.vf-wall-card h3 { margin: 0 0 .25rem; } .pts-wp { font-size: var(--fs-title); font-weight: 500; margin: .25rem 0; }
.vf-wall-card ul { list-style: none; padding: 0; margin: 0; }
.pts-ribbon { display: inline-flex; gap: .25rem; margin-top: .5rem; font-weight: 700; }
details.pts-how { margin: 0 0 1rem; } details.pts-how > summary { cursor: pointer; font-weight: 500; text-decoration: underline; text-underline-offset: .25em; }

/* ---- 7.6 Help, 7.7 Settings, 7.8 forms, 7.9 dialogs ------------------------------------------------------------ */
.vf-gloss { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: 1.25rem; align-items: baseline; padding: 1.125rem 1.5rem; }
.vf-gloss dt { font-weight: 700; } .vf-gloss dd { margin: 0; font-size: var(--fs-read); line-height: var(--lh-read); }
@media (max-width: 40rem) { .vf-gloss { grid-template-columns: 1fr; padding: .875rem 1rem; } }
.intro-video { margin: 0 0 1.5rem; padding: 1rem; background: var(--vf-card); border-radius: var(--radius-box); box-shadow: var(--vf-shadow); }
.intro-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--vf-sunk); border-radius: .5rem; }
.intro-video figcaption { margin-top: .5rem; font-size: var(--fs-label); font-weight: 500; }
.intro-video-line { margin: .5rem 0 0; min-height: 2.8em; font-weight: 500; text-align: center; }
.vf-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: center; padding: 1.125rem 1.5rem; }
.vf-setting form { display: contents; }
.vf-setting-name { font-weight: 500; } .vf-setting-line { margin: .125rem 0 0; }
.vf-form { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem 1rem; padding: 1.25rem 1.5rem; background: var(--vf-card); border-radius: var(--radius-box); box-shadow: var(--vf-shadow); margin: 0 0 1rem; }
.vf-form > label { display: contents; }
.vf-form > .vf-span, .vf-form > fieldset, .vf-form > .vf-actions, .vf-form > p { grid-column: 2; margin: 0; }
@media (max-width: 40rem) { .vf-form { grid-template-columns: 1fr; } .vf-form > label { display: block; margin: 0; } .vf-form > .vf-span, .vf-form > fieldset, .vf-form > .vf-actions, .vf-form > p { grid-column: 1; } }
.vf-form-plain { padding: 1.25rem 1.5rem; }
.vf-form-plain label:last-of-type { margin-bottom: 0; }
.perm-boxes { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .5rem; } .perm-boxes label { margin: 0; font-size: var(--fs-label); }
.invite-box { padding: 1.25rem 1.5rem; }
.invite-box #invite-link { flex: 1; min-width: 12rem; }
.login-box { max-width: 28rem; margin: 2.5rem auto; padding: 2rem; background: var(--vf-card); border-radius: var(--radius-box); box-shadow: var(--vf-shadow); }
.login-box .btn-primary { width: 100%; }
.modal { background-color: transparent; }
.modal::backdrop, .modal[open] { background-color: rgb(0 0 0 / .45); }
.modal-box { background: var(--vf-card); border: 0; border-radius: var(--radius-box); box-shadow: var(--vf-lift); padding: 1.25rem 1.5rem; }
.modal-box > h3:first-child { margin: 0 0 .75rem; }
.vf-modal-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1.5rem; margin-top: 1rem; }
#intro-video .modal-box { width: min(60rem, 94vw); max-width: none; }
#intro-video .intro-video { padding: 0; box-shadow: none; } #intro-video .intro-video video { width: auto; max-width: 100%; max-height: 58vh; margin: 0 auto; }
@media (max-width: 40rem) { .modal-box { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 85vh; border-radius: 1rem 1rem 0 0; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
  #intro-video .modal-box { width: 100%; } }
.diff-table td { width: 42%; } .diff-table th[scope=row] { white-space: nowrap; }
.diff-table del { background: #FDE0E0; color: #8A0016; text-decoration: line-through; } .diff-table ins { background: #D9F2DF; color: #0D5A26; text-decoration: none; }
.diff-table tr.diff-changed th[scope=row] { font-weight: 700; }
.diff-flag { font-weight: 700; }
.change-card { padding: 1.25rem 1.5rem; }
.change-card > h2:first-child, .change-card > h3:first-child { margin-top: 0; }
.version-meta th[scope=row] { width: 12rem; white-space: nowrap; }
.jira-line { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; margin: 0 0 1rem; }
.jira-status { font-weight: 500; } .jira-note { font-weight: 700; }
.reopen-form { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0; } .reopen-form .input { width: auto; min-width: 12rem; }
.pager { display: flex; gap: 1.5rem; align-items: center; }
table.instr-edit th:first-child, table.instr-edit th:nth-child(2) { width: 45%; }
table.instr-edit .textarea.ar-field { margin-top: .375rem; } table.instr-edit td:last-child { white-space: nowrap; }
.instr-edit .instr-shot-cell { min-width: 14rem; } .instr-edit .instr-shot img, .instr-edit .paste-previews img { max-width: 180px; max-height: 120px; }
main details:not(.vf-openable):not(.cycle-edit):not(.pts-how) > summary { cursor: pointer; font-weight: 500; text-decoration: underline; text-underline-offset: .25em; margin: 0 0 1rem; }
/* Notices and saved lines written by older markup (a section with the class): the glyph comes from the stylesheet */
.flash, .flash-warn, .jira-error, .retired-note { position: relative; display: block; margin: 0 0 1rem; padding: .875rem 1rem; padding-inline-start: 3rem; background: var(--vf-card); border-radius: var(--radius-box); box-shadow: var(--vf-shadow); }
.flash-warn, .jira-error, .retired-note { border: 2px solid #000; border-radius: var(--radius-field); box-shadow: none; }
.flash::before, .flash-warn::before, .jira-error::before, .retired-note::before { content: ""; position: absolute; top: 1rem; inset-inline-start: 1rem; width: 1.25rem; height: 1.25rem; background: #000;
  -webkit-mask: var(--vf-mask) center / contain no-repeat; mask: var(--vf-mask) center / contain no-repeat; }
.flash { --vf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }
.flash-warn, .jira-error, .retired-note { --vf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.flash-warn > strong:first-child, .jira-error > strong:first-child { font-weight: 700; }
.vf-end-chev { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.vf-end-chev > span { display: block; }
.fq-empty .vf-line { min-height: 3.75rem; }
/* daisyUI draws an empty menu <li> as a faint filled rule; ours are a gap and the settings divider */
.vf-menu .menu li.vf-menu-gap, .vf-menu .menu li.vf-menu-settings { background-color: transparent; opacity: 1; min-height: 0; padding: 0; }
.vf-menu .menu li.vf-menu-settings { height: 0; margin-inline: 0; }
.vf-menu .menu li > form { padding: 0; display: block; background: none; }
.vf-menu .menu li > form > .vf-menu-item { font-weight: 400; }
.vf-end-stack > span { display: block; }
.vf-sub-title { font-weight: 500; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0 0 1rem; }
.inline-form > label { margin: 0; } .inline-form .select, .inline-form .input { width: auto; min-width: 9rem; }
.inline-form.vf-card { align-items: flex-end; }
.vf-setting label { margin: 0; display: block; font-size: var(--fs-body); letter-spacing: 0; }
.vf-setting .vf-setting-line { font-weight: 400; margin: .125rem 0 0; }
.cov-key.cov-pass { background: #1B7F3B; } .cov-key.cov-fail { background: #B00020; } .cov-key.dash-bar-partial { background: #F2C94C; }
.vf-line-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: 1.125rem 1.5rem; margin: 0; } @media (max-width: 40rem) { .vf-line-form { padding: .875rem 1rem; } }
.checkbox:disabled:checked { background-color: #000; color: #FFF; }
.vf-error { font-weight: 700; color: #000; }