/* Admin > Flags and settings (templates/admin_flags.html, static/flags.js): every category table has the same five columns in the same widths, an on/off setting is two radio buttons, a number or text setting is an
   input, and the Why box with Apply appears in the row once something differs. Colors, spacing and focus come from the theme's tokens, so the page follows light, dark and every theme. Scoped to the fl- classes: nothing
   here touches another page's table. Nothing depends on a script: without one the Why box and Apply are always there (flags.js adds data-fl-js to the page, and only then is the box tucked away until a change). */
.fl-group { margin-top: var(--space-5); }
.fl-group > h3 { margin: 0 0 var(--space-2); }
.fl-group .table-scroll { margin-top: 0; position: relative; }      /* positioned, so the hidden text in a cell (the labels of the radios and boxes) sits inside the scroller and not off to the right of the page */
.fl-table { table-layout: fixed; min-width: 56rem; margin-top: 0; }
.fl-table .fl-c-name { width: 30%; }
.fl-table .fl-c-value { width: 32%; }
.fl-table .fl-c-default { width: 11%; }
.fl-table .fl-c-risk { width: 12%; }
.fl-table .fl-c-scoped { width: 15%; }
.fl-table th, .fl-table td { overflow-wrap: anywhere; }
.fl-table thead th { white-space: nowrap; }
.fl-value { vertical-align: top; }
.fl-form { display: grid; gap: var(--space-2); margin: 0; }
.fl-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.fl-radios { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); border: 0; padding: 0; margin: 0; min-width: 0; }
.fl-radio { display: inline-flex; align-items: center; gap: .4rem; min-height: 1.75rem; cursor: pointer; font-weight: 600; color: var(--color-text); }
.fl-radio input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.fl-control input[type="number"] { width: 7rem; }
.fl-control input[type="text"] { width: 100%; }
.fl-control input[type="number"], .fl-control input[type="text"], .fl-control select, .fl-apply input { max-width: 100%; padding: .4rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; }
.fl-control input:focus-visible, .fl-control select:focus-visible, .fl-apply input:focus-visible, .fl-radio input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.fl-apply { display: grid; gap: var(--space-1); }
.fl-apply label { font-size: .8rem; font-weight: 600; }
.fl-apply input { width: 100%; }
.fl-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn.small.fl-cancel { display: none; }
[data-fl-js] .btn.small.fl-cancel { display: inline-flex; }
[data-fl-js] .fl-form:not([data-changed]) .fl-apply { display: none; }
.fl-changed { margin-top: var(--space-1); }
@media (prefers-reduced-motion: no-preference) { [data-fl-js] .fl-form[data-changed] .fl-apply { animation: fl-in 160ms ease-out both; } }
@keyframes fl-in { from { opacity: 0; transform: translateY(-.25rem); } to { opacity: 1; transform: none; } }

/* Coming back to a row after Apply: the row is marked for a moment (a bar down its left edge AND a tint, so not by color alone), the note sits in the row, and a refusal stays on its row until it is mended or taken back. */
.fl-row-note { margin: 0 0 var(--space-2); padding: .3rem .6rem; border-radius: var(--radius-sm); font-weight: 600; scroll-margin-top: var(--space-6); }
.fl-row-note:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.fl-row-note.note-ok { color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); }
.fl-row-note.note-error { color: var(--color-danger-text); background: var(--color-danger-soft); }
tr[data-fl-flash] { scroll-margin-top: var(--space-6); }
tr[data-fl-flash=ok] > * { background-color: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); animation: fl-flash 3.5s ease-out both; }
tr[data-fl-flash=ok] > th { box-shadow: inset 4px 0 0 var(--color-accent); }
tr[data-fl-flash=error] > th { box-shadow: inset 4px 0 0 var(--color-danger-text); }
@keyframes fl-flash {
  0%, 35% { background-color: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); box-shadow: inset 4px 0 0 var(--color-accent); }
  100% { background-color: transparent; box-shadow: inset 4px 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { tr[data-fl-flash=ok] > * { animation: none; } }       /* still marked, without the fade; flags.js takes the mark off after a few seconds */