/* ═══════════════════════════════════════════════════════════════════════════
   ALFRED KIT — the shared pieces the design audit of 1 October 2026 asked for, built ONCE.
   Source: the UI design package (generated into alfred.package.css by
   scripts/build_design_package_css.py; its palette is --pk-* in alfred.tokens.css).
   This file adds only what the package shows but does not ship as a class: a drawn checkbox
   and radio, the disclosure chevron, the dropdown list inside .fe-popover, the centred state,
   the toast. Every colour is a package token (the token guard forbids a literal here).
   Scope: .alf-scope, which static/47_alf_kit.js puts on the three rebuilt screens and their
   overlays. Behaviour: alfKit. Audit refs in brackets.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Checkboxes and radios are drawn, never the browser's [G7, E2] ───────── */
.alf-scope input[type="checkbox"], .alf-scope input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; width: 16px; height: 16px; min-height: 0; padding: 0;
  display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer;
  background: var(--al-field); border: 1px solid var(--al-line-control); border-radius: var(--al-r-mark); box-shadow: none;
  transition: background-color 90ms, border-color 90ms;
}
.alf-scope input[type="radio"] { border-radius: 50%; }
.alf-scope input[type="checkbox"]:hover, .alf-scope input[type="radio"]:hover { border-color: var(--af-navy); background: var(--al-page); }
.alf-scope input[type="checkbox"]:checked {
  background: var(--af-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  border-color: var(--af-action);
}
.alf-scope input[type="radio"]:checked { background: var(--al-field); border-color: var(--af-action); border-width: 5px; }
.alf-scope input[type="checkbox"]:focus-visible, .alf-scope input[type="radio"]:focus-visible { outline: 2px solid var(--af-focus); outline-offset: 2px; }
.alf-scope input[type="checkbox"]:disabled, .alf-scope input[type="radio"]:disabled { background: var(--al-page); border-color: var(--al-divider); cursor: not-allowed; }
.alf-scope input[type="checkbox"]:checked:disabled { background-color: var(--al-line-control); border-color: var(--al-line-control); }

/* ── 2 · A disclosure is a drawn chevron, never the browser's ▶ [M43] ────────── */
.alf-scope details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.alf-scope details > summary::-webkit-details-marker { display: none; }
.alf-scope details > summary::before {
  content: ""; flex: none; width: 14px; height: 14px; background: center / 14px 14px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5l4.5 4.5L6 12.5' fill='none' stroke='%23526373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 120ms;
}
.alf-scope details[open] > summary::before { transform: rotate(90deg); }
.alf-scope details > summary:focus-visible { outline: 2px solid var(--af-focus); outline-offset: 3px; border-radius: var(--al-r-mark); }

/* ── 3 · One dropdown: the package choice button + popover list [L2, E2] ─────── */
.alf-select { position: relative; display: block; min-width: 0; }
.alf-select.is-inline { display: inline-block; }
.alf-select > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.alf-select .fe-choice { min-height: 40px; padding: 9px 10px; width: 100%; background: var(--al-field); border: 1px solid var(--al-line-control); border-radius: var(--al-r-control); font: 400 14px/20px var(--af-ui); color: var(--af-ink); display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; box-shadow:none; }
.alf-select .fe-choice:hover { border-color: var(--al-line-control); }
.alf-select .fe-choice[aria-expanded="true"] { border-color: var(--al-line-control); background: var(--al-card); }
.alf-select .fe-choice[aria-disabled="true"] { background: var(--al-page); border-color: var(--al-divider); color: var(--al-text-2); cursor: not-allowed; }
.alf-select .alf-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alf-select .alf-select-value.is-placeholder { color: var(--af-secondary); }
.alf-select .alf-icon { color: var(--al-text-2); transition: transform 120ms; }
.alf-select .fe-choice[aria-expanded="true"] .alf-icon { transform: rotate(180deg); }
.alf-select.is-compact .fe-choice { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.fe-popover.alf-listbox { width: auto; min-width: 180px; max-width: min(420px, calc(100vw - 24px)); max-height: min(320px, calc(100dvh - 24px)); padding: 5px; }
.alf-listbox .alf-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: var(--al-r-mark); background: transparent; color: var(--af-ink); font: 400 13px/1.5 var(--af-ui); text-align: left; cursor: pointer; }
.alf-listbox .alf-option:hover, .alf-listbox .alf-option:focus-visible { background: var(--al-selected); outline: none; }
.alf-listbox .alf-option[aria-selected="true"] { background: var(--al-selected); color: var(--al-action); font-weight: 550; }
.alf-listbox .alf-option[aria-disabled="true"] { color: var(--al-line-control); cursor: not-allowed; }
.alf-listbox .alf-option .alf-tick { flex: none; width: 14px; height: 14px; visibility: hidden; color: var(--af-action); }
.alf-listbox .alf-option[aria-selected="true"] .alf-tick { visibility: visible; }
.alf-listbox .alf-option-group { padding: 8px 10px 4px; font-size: 12px; font-weight: 500; color: var(--af-secondary); }

/* ── 4 · One date control: "1 Oct 2026", typed or from the calendar [E2, L14, P34] ─ */
.alf-date { position: relative; display: block; min-width: 0; }
.alf-date > input[type="date"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.alf-date .fe-date-entry input { width: 100%; min-height: 40px; padding: 9px 39px 9px 10px; border: 1px solid var(--al-line-control); border-radius: var(--al-r-control); background: var(--al-field); font: 400 14px/20px var(--af-ui); color: var(--af-ink); box-shadow:none; }
.alf-date .fe-date-entry input:hover { border-color: var(--al-line-control); }
.alf-date .fe-date-entry input:focus-visible { outline: 2px solid var(--af-focus); outline-offset: 2px; }
.alf-date .fe-date-entry input[aria-invalid="true"] { border-color: var(--al-attention); background: var(--al-paper); }
.alf-date.is-compact .fe-date-entry input { min-height: 32px; padding: 4px 36px 4px 8px; font-size: 13px; }
.alf-date.is-compact .fe-date-button { width: 26px; height: 26px; }
.alf-date .fe-field-error { margin-top: 5px; }
.fe-calendar-header .alf-month { font-size: 14px; font-weight: 550; }
.fe-calendar-header .alf-button { min-height: 30px; width: 30px; padding: 0; }

/* ── 5 · States: the failed area keeps its size and place; the message is inside it [E3] ── */
.alf-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 36px 24px; min-height: 220px; width: 100%; color: var(--af-secondary); font: 400 14px/1.7 var(--af-ui); }
.alf-state > strong { display: block; font-size: 16px; font-weight: 500; color: var(--al-action); }
.alf-state > p { margin: 0; max-width: 46ch; }
.alf-state .alf-button { margin-top: 6px; }
.alf-state.alf-state--fill { flex: 1; }
.alf-state .alf-feedback--critical { margin: 0; max-width: 480px; width: 100%; text-align: left; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.alf-state .alf-feedback--critical strong { font-weight: 550; }
.alf-state .alf-feedback--critical p { margin: 0; color: var(--af-ink); }
.alf-inline-notice { padding: 0; border: 0; border-radius: 0; background: none; color: var(--af-attention); font-weight: 600; font: 400 13px/1.6 var(--af-ui); }
.alf-inline-notice.is-critical { border-color: var(--al-critical); background: var(--al-critical-wash); color: var(--af-critical); }
.alf-inline-notice.is-info { border-color: var(--al-divider); background: var(--al-page); color: var(--af-ink); }
.alf-inline-notice .alf-button { margin-top: 8px; }

/* ── 6 · Toast: times out, never lingers into the next action [P33, L36] ─────── */
.alf-toast-region { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--v3-s-5); z-index: var(--v3-z-notice); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.alf-toast { pointer-events: auto; display: flex; align-items: center; gap: 18px; max-width: min(560px, calc(100vw - 32px)); min-height: 48px; box-sizing: border-box; padding: 0 18px; background: var(--v3-navy); color: var(--v3-page); border: 0; border-radius: var(--al-r-popover); box-shadow: var(--v3-shadow-menu); font: 500 var(--v3-fs-body)/1.4 var(--v3-font); animation: alToastIn var(--v3-t-panel) var(--v3-ease); }
.alf-toast .alf-button, .alf-toast .alf-toast-act { min-height: 0; height: auto; padding: 0; background: none; box-shadow: none; color: var(--v3-page); font: 600 var(--v3-fs-body)/1.4 var(--v3-font); border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--v3-page) 40%, transparent); text-underline-offset: 3px; }
.alf-toast .alf-toast-act:hover { text-decoration: underline; text-decoration-color: var(--v3-brass); text-underline-offset: 3px; }
.alf-toast .alf-toast-act:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--v3-navy), 0 0 0 4px var(--v3-page); border-radius: var(--al-r-mark); }
.alf-toast.is-error { background: var(--v3-critical-bg); color: var(--v3-critical); box-shadow: var(--v3-shadow-menu); padding: 12px 18px; }
.alf-toast.is-error .alf-toast-act { color: var(--v3-critical); }
@keyframes alToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .alf-toast { animation: none; } }

/* ── 7 · Menu and popover surfaces are solid and sit above the page [L42] ────── */
.alf-menu { background: var(--al-field); z-index: 90; }
.fe-popover { z-index: 90; }

/* ── 8 · Dialog: one confirm width, one form width [L41] ─────────────────────── */
.depth-dialog.alf-dialog { width: min(480px, calc(100vw - 32px)); margin: auto; inset: 0; }
.depth-dialog.alf-dialog.is-form { width: min(560px, calc(100vw - 32px)); }
.depth-dialog.alf-dialog h2 { font-size: var(--v3-fs-section); font-weight: 800; line-height: 1.25; color: var(--v3-navy); margin: 0; }   /* BD3-11: a dialog title is a section title, 20/800 */
.depth-dialog.alf-dialog .alf-dialog-body { font-size: 14px; line-height: 1.7; color: var(--af-secondary); margin: 13px 0 0; }
.depth-dialog.alf-dialog .depth-dialog-actions { margin-top: 22px; }

/* ── 9 · Section label: sentence case, secondary ink, 13px [G3] ──────────────── */
.alf-label { font-size: 13px; font-weight: 500; color: var(--af-secondary); }

/* ── 10 · Plain hyphens: tabular figures widen "Post-sale" and "Marian-Adrian" [G4] ────────────────────
   Measured: the body's "tnum" feature makes a hyphenated word 2.7px wider at 13px. Text on the rail, top bar and the
   three screens uses the proportional hyphen; only counts and references stay tabular. */
.al-rail, .al-topbar, #view-postsale, #view-cases, #view-matter, .ml-overlay, .ml-panel, .ml-toast, .alf-scope, .depth-dialog, .alf-toast {
  font-feature-settings: "cv11" 1;
}
.al-rail .al-num, .ps-count, .ps-mono, .ml-count, .ml-mono, .mx-mono, [data-audit-figure] { font-variant-numeric: tabular-nums; }

/* ── 11 · The top bar says where you are [G5] ──────────────────────────────────────────────────────── */

/* G-NATIVE (group batch gb08): no native spinners on number fields, no resize grip on text areas, an amount field right-aligned with its € */
.alf-scope input[type="number"], .al-main input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.alf-scope input[type="number"]::-webkit-outer-spin-button, .alf-scope input[type="number"]::-webkit-inner-spin-button,
.al-main input[type="number"]::-webkit-outer-spin-button, .al-main input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.alf-scope textarea, .al-main textarea, #al-main-content textarea, dialog textarea { resize: none !important; }
.alf-col-blank { display: none !important; }
/* KD-3: every search field carries the magnifier (RULES 14); the sheets' own `background:` shorthands would reset it, so it is stated with !important */
.alf-scope input[type="search"], .alf-scope input.rv-search { background-image: var(--al-icon-search) !important; background-repeat: no-repeat !important; background-position: 12px 50% !important; background-size: 16px !important; padding-left: 36px !important; }
.alf-scope .pt-search input[type="search"], .alf-scope .ml-search input[type="search"] { background-image: none !important; }
.alf-suffix { position: relative; display: block; }
.alf-suffix > input { width: 100%; text-align: right; padding-right: 28px; }
.alf-suffix > i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--al-text-2); pointer-events: none; }

/* G-FOCUS (gb09): a primary that cannot act yet is the navy button at 40 percent (as on Post-sale and the wizard), never the quiet outline; a mouse open draws no ring */
.alf-button--primary[aria-disabled="true"], .alf-button--primary:disabled { background: var(--al-action); color: var(--al-text-inverse); box-shadow: none; opacity: .45; cursor: not-allowed; }
.rv-panel-title:focus, .depth-dialog-header h2:focus { outline: none; box-shadow: none; }

/* G-SELECT (gb12): every active filter chip carries the one tick (the selected plate comes from the package); the three screens that drew their own tick keep it */
.alf-filter[aria-pressed="true"]:not(:has(.alf-filter-tick))::before { content: "✓"; display: inline-block; width: 12px; margin-right: 4px; }

/* G-ALIGN (gb13): content, chips and tables start at the card's 24px padding; a block that already sits inside padding adds none of its own */
#al-main-content .pn-fhead .iv-chips, #al-main-content .rv-pad .iv-chips, #al-main-content .st-padded .iv-chips, #al-main-content .rv-sec .iv-chips { padding-left: 0; padding-right: 0; }
#al-main-content .rv-pad .rv-table-wrap, #al-main-content .st-padded .rv-table-wrap, #al-main-content .rv-sec .rv-table-wrap { padding-left: 0; padding-right: 0; }
#al-main-content .al-region > .iv-chips:first-child, #al-main-content .al-region > .rv-sec:first-child > .iv-chips:first-child, #al-main-content .al-region > .rv-pad:first-child > .iv-chips:first-child, #al-main-content .al-region > .rv-pad:first-child > .rv-sec:first-child > .iv-chips:first-child { padding-top: 24px; }
#al-main-content .st-padded .rv-pad { padding-left: 0; padding-right: 0; }

/* G-WIDE (gb17): at 1800 px and up the Tasks and Agencies panels are wide enough for two columns of facts, and the department team table keeps a reading width */
@media (min-width: 1800px) {
  #view-tasks .rv-panel, #view-agencies .rv-panel { width: 680px; }
  #view-tasks .rv-panel .rv-kv, #view-agencies .rv-panel .rv-kv { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  #view-dept-cockpit .dc-table { max-width: 960px; }
}

/* C2 ruling (gb18): number columns are right-aligned and sized to their content (at most 140 px), the text column takes the rest */
#view-hr .rv-table th.al-r, #view-operations .rv-table th.al-r { width: 120px; max-width: 140px; text-align: right; }
#view-hr .rv-table td.al-r, #view-operations .rv-table td.al-r { text-align: right; }
/* ruling (d): a text link keeps a 40 px hit area without moving its line */
.rv-link, .al-link { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; }
/* AC3-O3: the switch between the Accounting desks: lens chips under the page title, with the 40 px hit height */
.al-desk-switch { display: flex; flex-wrap: wrap; gap: var(--v3-s-2, 8px); margin-top: var(--v3-s-3, 12px); }
.al-desk-switch .alf-filter { position: relative; }
.al-desk-switch .alf-filter::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }

/* AC3-O3 (Codex r3): the head is a row, so the switch sat beside the title; it takes the whole next line, under it */
.rv-head:has(> .al-desk-switch) { flex-wrap: wrap; align-items: flex-start; }
.rv-head > .al-desk-switch { flex: 0 0 100%; }