/* =====================================================================
   ESPOOO University — UI Foundation v1
   Source of truth: docs/design-reference/ui-foundation-v1.md (expert review, Sept 2026)
   Direction: Saudi institutional digital product × premium B2B operating system × modern sports product.
   Rules: whitespace before borders, one primary CTA per decision, cards only for independent units,
   official icon library only, no emoji, no gradients/glass/neon, no heavy shadows.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* identity */
  --f-navy: #082A5E; --f-navy-900: #0B1E3D; --f-blue: #1677FF; --f-blue-700: #0D5FE8; --f-blue-soft: #EAF3FF;
  /* canvas & surfaces */
  --f-canvas: #F6F8FB; --f-surface: #FFFFFF; --f-surface-2: #F2F5F9;
  /* text */
  --f-text: #0E1B33; --f-text-2: #3B4A63; --f-muted: #6B7A90; --f-placeholder: #98A5B8;
  /* lines */
  --f-line: #E3E9F1; --f-line-strong: #C9D4E2;
  /* status */
  --f-success: #0E9F6E; --f-success-soft: #E8F7F0; --f-warning: #B7791F; --f-warning-soft: #FFF4DB;
  --f-danger: #D64545; --f-danger-soft: #FDECEC; --f-info: #1677FF; --f-info-soft: #EAF3FF; --f-neutral-soft: #EEF2F7;
  /* type scale */
  --f-title: 32px; --f-section: 21px; --f-block: 16px; --f-body: 15px; --f-support: 13.5px; --f-label: 13px; --f-kpi: 30px; --f-micro: 12.5px;
  /* radius */
  --f-r-major: 16px; --f-r-card: 12px; --f-r-control: 9px; --f-r-badge: 6px;
  /* layout */
  --f-canvas-max: 1220px; --f-primary-col: 800px; --f-rail: 320px; --f-rail-gap: 32px;
  /* spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --f-shadow-overlay: 0 12px 32px -12px rgba(14, 27, 51, .18);
}

/* ---------- 2. Base & typography ---------- */
.f-app { background: var(--f-canvas); color: var(--f-text); font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: var(--f-body); line-height: 1.65; -webkit-font-smoothing: antialiased; }
.f-app .num, .f-app [dir="ltr"] { font-family: Inter, "IBM Plex Sans Arabic", sans-serif; font-feature-settings: "tnum"; }
.f-title { font-size: var(--f-title); font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -.2px; }
.f-section-title { font-size: var(--f-section); font-weight: 600; line-height: 1.35; margin: 0; }
.f-block-title { font-size: var(--f-block); font-weight: 600; line-height: 1.4; margin: 0; }
.f-lead { font-size: var(--f-body); color: var(--f-text-2); margin: var(--s-2) 0 0; max-width: 72ch; }
.f-support { font-size: var(--f-support); color: var(--f-muted); }
.f-micro { font-size: var(--f-micro); color: var(--f-muted); }
.f-kpi { font-size: var(--f-kpi); font-weight: 600; line-height: 1.1; }
.f-app a { color: var(--f-blue); text-decoration: none; } .f-app a:hover { text-decoration: underline; } .f-app a.f-btn:hover { text-decoration: none; }

/* ---------- 3. Page grid ---------- */
.f-topbar { height: 60px; background: var(--f-surface); border-bottom: 1px solid var(--f-line); display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: 0 var(--s-8); }
.f-topbar .f-wordmark { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: 20px; color: var(--f-navy-900); letter-spacing: -.3px; }
.f-topbar .f-wordmark i { width: 9px; height: 9px; border-radius: 50%; background: var(--f-blue); }
.f-topbar .f-wordmark small { font-weight: 500; font-size: 12px; color: var(--f-muted); }
.f-canvas { max-width: var(--f-canvas-max); margin: 0 auto; padding: var(--s-6) var(--s-8) var(--s-12); }
.f-two { display: grid; grid-template-columns: minmax(0, 1fr) var(--f-rail); gap: var(--f-rail-gap); align-items: start; }
.f-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); margin: var(--s-4) 0 var(--s-8); }
.f-section { margin-top: var(--s-10); }
.f-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-4); }
.f-divider { border: 0; border-top: 1px solid var(--f-line); margin: var(--s-6) 0; }

/* ---------- 4. Institutional context header ---------- */
.f-context { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-3) 0; border-bottom: 1px solid var(--f-line); }
.f-context .f-context-org { display: flex; align-items: center; gap: var(--s-3); }
.f-context .f-context-org b { font-weight: 600; font-size: var(--f-body); }
.f-context .f-context-meta { display: flex; gap: var(--s-4); color: var(--f-muted); font-size: var(--f-support); flex-wrap: wrap; }
.f-context .f-context-meta span + span::before { content: "·"; margin-inline-end: var(--s-4); color: var(--f-line-strong); }

/* ---------- 5. Surfaces & cards (rare) ---------- */
.f-card { background: var(--f-surface); border: 1px solid var(--f-line); border-radius: var(--f-r-card); }
.f-card-pad { padding: var(--s-5) var(--s-6); }
.f-surface-2 { background: var(--f-surface-2); border-radius: var(--f-r-card); }
.f-list { display: grid; }
.f-list > * { padding: var(--s-4) 0; border-bottom: 1px solid var(--f-line); }
.f-list > *:last-child { border-bottom: 0; }
.f-row { display: flex; align-items: center; gap: var(--s-4); }
.f-row .f-grow { flex: 1; min-width: 0; }
.f-row b { font-weight: 600; }
.f-row .f-support { display: block; margin-top: 2px; }

/* ---------- 6. Buttons ---------- */
.f-app .f-btn, .f-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 42px; padding: 0 var(--s-5); border-radius: var(--f-r-control); border: 1px solid var(--f-line-strong); background: var(--f-surface); color: var(--f-text); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; }
.f-btn:hover { background: var(--f-surface-2); text-decoration: none; }
.f-app .f-btn-primary, .f-btn-primary { background: var(--f-blue); border-color: var(--f-blue); color: #fff; font-weight: 600; }
.f-btn-primary:hover { background: var(--f-blue-700); }
.f-app .f-btn-tertiary, .f-btn-tertiary { border-color: transparent; background: transparent; color: var(--f-blue); padding: 0 var(--s-2); }
.f-btn-tertiary:hover { background: transparent; text-decoration: underline; }
.f-app .f-btn-danger, .f-btn-danger { background: var(--f-danger); border-color: var(--f-danger); color: #fff; }
.f-btn-sm { height: 34px; padding: 0 var(--s-3); font-size: 13.5px; }
.f-btn-lg { height: 48px; padding: 0 var(--s-6); font-size: 15px; }
.f-btn:focus-visible { outline: 3px solid rgba(22, 119, 255, .35); outline-offset: 2px; }
.f-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

/* ---------- 7. Forms ---------- */
.f-field { display: grid; gap: var(--s-1); }
.f-field label { font-size: var(--f-label); font-weight: 500; color: var(--f-text-2); }
.f-field label .req { color: var(--f-danger); margin-inline-start: 2px; } .f-field label .opt { color: var(--f-muted); font-weight: 400; margin-inline-start: var(--s-1); }
.f-input, .f-select { height: 42px; border: 1px solid var(--f-line-strong); border-radius: var(--f-r-control); padding: 0 var(--s-3); background: var(--f-surface); font: inherit; color: var(--f-text); width: 100%; }
.f-input:focus, .f-select:focus { outline: 3px solid rgba(22, 119, 255, .25); border-color: var(--f-blue); }
.f-help { font-size: var(--f-micro); color: var(--f-muted); }
.f-error { font-size: var(--f-micro); color: var(--f-danger); }
.f-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-6); }
.f-summary { display: grid; }
.f-summary-row { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--f-line); }
.f-summary-row:last-child { border-bottom: 0; }
.f-summary-row dt { color: var(--f-muted); font-size: var(--f-support); margin: 0; }
.f-summary-row dd { margin: 0; font-weight: 500; }

/* ---------- 8. Tables ---------- */
.f-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.f-table th { text-align: start; font-size: var(--f-micro); font-weight: 500; color: var(--f-muted); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--f-line-strong); background: transparent; }
.f-table td { padding: var(--s-3); border-bottom: 1px solid var(--f-line); vertical-align: middle; font-size: 14.5px; }
.f-table tr:last-child td { border-bottom: 0; }
.f-table tr.is-interactive:hover td { background: var(--f-surface-2); }
.f-table tr.is-selected td { background: #F7FAFF; }
.f-table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--f-blue); }
.f-table .f-cell-title { font-weight: 600; } .f-table .f-cell-sub { display: block; font-size: var(--f-micro); color: var(--f-muted); margin-top: 1px; }
.f-table-wrap { overflow-x: auto; }

/* ---------- 9. Status & badges ---------- */
.f-status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--f-support); color: var(--f-text-2); }
.f-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f-muted); flex: 0 0 8px; }
.f-status.success::before { background: var(--f-success); } .f-status.warning::before { background: var(--f-warning); } .f-status.danger::before { background: var(--f-danger); } .f-status.info::before { background: var(--f-blue); }
.f-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-2); border-radius: var(--f-r-badge); font-size: 12px; font-weight: 500; white-space: nowrap; }
.f-badge.success { background: var(--f-success-soft); color: var(--f-success); } .f-badge.warning { background: var(--f-warning-soft); color: var(--f-warning); }
.f-badge.danger { background: var(--f-danger-soft); color: var(--f-danger); } .f-badge.info { background: var(--f-info-soft); color: var(--f-blue); } .f-badge.neutral { background: var(--f-neutral-soft); color: var(--f-muted); }

/* ---------- 10. Stepper (compact, subordinate to the page title) ---------- */
.f-stepper { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-6); font-size: var(--f-support); }
.f-step { display: flex; align-items: center; gap: var(--s-2); color: var(--f-muted); }
.f-step .f-step-n { font-family: Inter, sans-serif; font-weight: 600; font-size: 12px; }
.f-step .f-step-mark { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; }
.f-step.done .f-step-mark { background: var(--f-success); color: #fff; }
.f-step.current { color: var(--f-blue); font-weight: 600; }
.f-step.current .f-step-mark { background: var(--f-blue); color: #fff; }
.f-step.upcoming .f-step-mark { border: 1.5px solid var(--f-line-strong); }
.f-step-line { flex: 1; height: 1px; background: var(--f-line-strong); max-width: 64px; }
.f-stepper-compact { display: none; }

/* ---------- 11. Summary bar (operational, not KPI cards) ---------- */
.f-summary-bar { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); padding: var(--s-3) var(--s-4); background: var(--f-surface); border: 1px solid var(--f-line); border-radius: var(--f-r-card); font-size: var(--f-support); color: var(--f-text-2); }
.f-summary-bar b { font-weight: 600; color: var(--f-text); font-family: Inter, sans-serif; }

/* ---------- 12. Notices ---------- */
.f-notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--f-r-card); background: var(--f-info-soft); font-size: var(--f-support); color: var(--f-text-2); }
.f-notice.warning { background: var(--f-warning-soft); } .f-notice.neutral { background: var(--f-surface-2); }
.f-notice b { color: var(--f-text); }

/* ---------- 13. Checklist ---------- */
.f-check { display: flex; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--f-line); align-items: flex-start; }
.f-check:last-child { border-bottom: 0; }
.f-check .f-check-n { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--f-line-strong); display: grid; place-items: center; font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--f-muted); flex: 0 0 28px; margin-top: 2px; }
.f-check.done .f-check-n { background: var(--f-success); border-color: var(--f-success); color: #fff; }
.f-check.current .f-check-n { background: var(--f-blue); border-color: var(--f-blue); color: #fff; }
.f-check.current { background: linear-gradient(90deg, transparent, transparent); }
.f-check .f-grow { flex: 1; }
.f-check b { display: block; font-weight: 600; } .f-check.current b { color: var(--f-text); } .f-check.upcoming b, .f-check.upcoming .f-support { color: var(--f-muted); }

/* ---------- 14. Icon usage ---------- */
.f-app .es-icon { vertical-align: middle; }
.f-ico-inline { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1100px) {
  .f-two { grid-template-columns: 1fr; gap: var(--s-8); }
  :root { --f-title: 28px; }
}
@media (max-width: 760px) {
  .f-topbar { padding: 0 var(--s-4); } .f-canvas { padding: var(--s-4) var(--s-4) var(--s-12); }
  :root { --f-title: 24px; --f-section: 19px; }
  .f-page-head { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .f-form-grid { grid-template-columns: 1fr; }
  .f-summary-row { grid-template-columns: 1fr; gap: 2px; }
  .f-stepper { display: none; } .f-stepper-compact { display: block; margin: 0 0 var(--s-6); font-size: var(--f-support); color: var(--f-muted); }
  .f-stepper-compact i { display: block; height: 3px; border-radius: 2px; background: var(--f-line); margin-top: var(--s-2); overflow: hidden; } .f-stepper-compact i::after { content: ""; display: block; height: 100%; width: var(--progress, 50%); background: var(--f-blue); }
  .f-table thead { display: none; } .f-table tr { display: grid; gap: var(--s-1); padding: var(--s-3) 0; border-bottom: 1px solid var(--f-line); } .f-table td { border: 0; padding: 0; }
  .f-table td.f-hide-m { display: none; }
}

/* =====================================================================
   v1.1 — Final refinement round (expert review, Sept 2026)
   ===================================================================== */

/* ---------- 16. Typography fine-tuning ---------- */
:root { --f-support: 14px; --f-muted: #5F6E85; --f-micro: 12.5px; }
.f-support { color: var(--f-muted); }
.f-micro { color: #6B7A90; }

/* ---------- 17. Density modes (same tokens, controls, type; only spacing differs) ---------- */
.f-density-comfortable { --f-row-y: 16px; --f-cell-y: 14px; --f-section-gap: 40px; --f-title: 30px; --f-list-gap: 16px; }
.f-density-operational { --f-row-y: 10px; --f-cell-y: 10px; --f-section-gap: 32px; --f-title: 26px; --f-list-gap: 10px; }
.f-density-comfortable .f-list > *, .f-density-operational .f-list > * { padding-top: var(--f-row-y); padding-bottom: var(--f-row-y); }
.f-density-comfortable .f-table td, .f-density-operational .f-table td { padding-top: var(--f-cell-y); padding-bottom: var(--f-cell-y); }
.f-density-comfortable .f-section, .f-density-operational .f-section { margin-top: var(--f-section-gap); }
.f-density-comfortable .f-title, .f-density-operational .f-title { font-size: var(--f-title); }

/* ---------- 18. Table column hierarchy ---------- */
.f-table .f-col-primary { font-weight: 600; color: var(--f-text); }
.f-table .f-col-emphasis { font-weight: 500; color: var(--f-text); }
.f-table .f-col-normal { color: var(--f-text-2); }
.f-table .f-col-meta { color: var(--f-muted); font-size: var(--f-support); }
.f-table .f-late { color: var(--f-danger); font-weight: 500; }
.f-table .f-late::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--f-danger); margin-inline-end: 6px; vertical-align: middle; }
.f-table th.f-col-primary-h { color: var(--f-text-2); font-weight: 600; }

/* ---------- 19. Decision rows (games) ---------- */
.f-decision { display: grid; grid-template-columns: minmax(180px, 1.3fr) 1fr 1fr 1.6fr 1.1fr auto; gap: var(--s-4); align-items: center; padding: var(--f-row-y, 16px) 0; border-bottom: 1px solid var(--f-line); }
.f-decision:last-child { border-bottom: 0; }
.f-decision .f-game { font-weight: 600; font-size: 15.5px; }
.f-decision .f-game .f-support { display: block; font-weight: 400; }
.f-decision .f-cell-label { display: block; font-size: var(--f-micro); color: #6B7A90; margin-bottom: 2px; }
.f-decision-head { display: grid; grid-template-columns: minmax(180px, 1.3fr) 1fr 1fr 1.6fr 1.1fr auto; gap: var(--s-4); font-size: var(--f-micro); color: #6B7A90; padding-bottom: var(--s-2); border-bottom: 1px solid var(--f-line-strong); }
.f-decision-detail { grid-column: 1 / -1; padding: var(--s-3) var(--s-4) var(--s-1); background: var(--f-surface-2); border-radius: var(--f-r-card); }
.f-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--f-support); color: var(--f-text-2); white-space: nowrap; }
.f-toggle .f-switch { width: 38px; height: 22px; border-radius: 999px; background: var(--f-line-strong); position: relative; flex: 0 0 38px; transition: background .15s; }
.f-toggle .f-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.f-toggle.on .f-switch { background: var(--f-blue); } .f-toggle.on .f-switch::after { transform: translateX(16px); }
[dir="rtl"] .f-toggle .f-switch::after { left: auto; right: 3px; } [dir="rtl"] .f-toggle.on .f-switch::after { transform: translateX(-16px); }

/* ---------- 20. Segmented compact control (readiness) ---------- */
.f-seg { display: inline-flex; border: 1px solid var(--f-line-strong); border-radius: var(--f-r-badge); overflow: hidden; }
.f-seg span { padding: 3px 10px; font-size: 13px; color: var(--f-text-2); background: #fff; cursor: pointer; }
.f-seg span + span { border-inline-start: 1px solid var(--f-line-strong); }
.f-seg span.on { background: var(--f-blue-soft); color: var(--f-blue); font-weight: 500; }
.f-seg span.on.gap { background: var(--f-warning-soft); color: var(--f-warning); }
.f-readiness { display: grid; gap: var(--s-2); }
.f-readiness .f-row { padding: var(--s-1) 0; gap: var(--s-3); font-size: 14px; }

/* ---------- 21. Identity summary (approver) ---------- */
.f-identity { display: grid; gap: 2px; padding: var(--s-3) 0 var(--s-4); border-bottom: 1px solid var(--f-line); }
.f-identity b { font-size: 15.5px; font-weight: 600; }
.f-identity .f-support { display: block; }

/* ---------- 22. Confirmation strip (quiet) ---------- */
.f-strip { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--f-r-card); background: var(--f-success-soft); font-size: var(--f-support); color: var(--f-text); flex-wrap: wrap; }
.f-strip .f-strip-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--f-success); color: #fff; display: grid; place-items: center; font-size: 12px; flex: 0 0 22px; }
.f-strip .f-strip-meta { margin-inline-start: auto; color: var(--f-muted); display: flex; gap: var(--s-4); }

/* ---------- 23. Compact records (mobile) & sticky action area ---------- */
.f-records { display: none; }
.f-record { padding: var(--s-4) 0; border-bottom: 1px solid var(--f-line); }
.f-record:last-child { border-bottom: 0; }
.f-record-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.f-record-head b { font-size: 15.5px; font-weight: 600; }
.f-record-meta { display: flex; gap: var(--s-3); color: var(--f-text-2); font-size: 14px; margin-top: 2px; flex-wrap: wrap; }
.f-record-lines { display: grid; gap: 4px; margin-top: var(--s-2); font-size: 14px; }
.f-record details summary { list-style: none; color: var(--f-blue); font-size: 14px; cursor: pointer; margin-top: var(--s-2); min-height: 32px; display: flex; align-items: center; }
.f-record details summary::-webkit-details-marker { display: none; }
.f-record details[open] summary { margin-bottom: var(--s-2); }
.f-sticky { display: none; }
@media (max-width: 760px) {
  .f-records { display: block; } .f-actions.f-records { display: flex !important; }
  .f-hide-m, .f-decision-head { display: none !important; }
  .f-decision { grid-template-columns: 1fr; gap: var(--s-2); }
  .f-sticky { display: block; position: sticky; bottom: 0; background: rgba(255,255,255,.96); border-top: 1px solid var(--f-line); padding: var(--s-3) var(--s-4); margin: var(--s-6) calc(-1 * var(--s-4)) 0; }
  .f-sticky .f-sticky-summary { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: 13.5px; color: var(--f-text-2); margin-bottom: var(--s-2); }
  .f-sticky .f-btn { width: 100%; }
  .f-strip .f-strip-meta { margin-inline-start: 0; }
  .f-density-comfortable, .f-density-operational { --f-title: 24px; }
  .f-context { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .f-context .f-context-meta { gap: var(--s-3); }
  .f-context .f-context-meta span + span::before { margin-inline-end: var(--s-3); }
  .f-static-actions .f-sticky { position: static; margin-top: var(--s-6); background: transparent; border-top: 1px solid var(--f-line); padding-inline: 0; }
}

/* =====================================================================
   v1.2 — Componentization pass (expert review, Sept 2026)
   PAGE → SECTION → CONTAINER → CONTENT/ACTION. Six official component types share one anatomy.
   ===================================================================== */
.f-eyebrow { font-size: var(--f-support); color: var(--f-muted); margin: 0 0 var(--s-2); }
.f-tile { width: 44px; height: 44px; border-radius: 12px; background: var(--f-blue-soft); display: grid; place-items: center; flex: 0 0 44px; }
.f-tile .es-icon { width: 24px; height: 24px; }
.f-tile.sm { width: 36px; height: 36px; border-radius: 10px; flex-basis: 36px; } .f-tile.sm .es-icon { width: 20px; height: 20px; }
.f-tile.success { background: var(--f-success-soft); } .f-tile.warning { background: var(--f-warning-soft); }

/* A — Feature card: value ESPOOO provides. Icon tile → title → short description. */
.f-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.f-feature { background: var(--f-surface); border: 1px solid var(--f-line); border-radius: var(--f-r-card); padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.f-feature b { font-size: var(--f-block); font-weight: 600; display: block; }
.f-feature p { margin: 0; color: var(--f-text-2); font-size: var(--f-support); line-height: 1.6; }

/* B — Action card: something required from the user (status + primary/secondary action). */
.f-actions-list { display: grid; gap: var(--s-3); }
.f-action { background: var(--f-surface); border: 1px solid var(--f-line); border-radius: var(--f-r-card); padding: var(--s-5); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4); align-items: start; }
.f-action.is-current { border-color: var(--f-blue); box-shadow: inset 3px 0 0 var(--f-blue); }
.f-action.is-done { background: var(--f-surface-2); }
.f-action.is-upcoming .f-tile { background: var(--f-neutral-soft); }
.f-action .f-action-title { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.f-action .f-action-title b { font-size: var(--f-block); font-weight: 600; }
.f-action p { margin: var(--s-1) 0 0; color: var(--f-text-2); font-size: var(--f-support); line-height: 1.6; }
.f-action .f-actions { margin-top: var(--s-3); }
.f-action .f-action-state { justify-self: end; white-space: nowrap; }

/* C — Summary card: a decision/selection summary (never a KPI dashboard). */
.f-summary-card { background: var(--f-surface); border: 1px solid var(--f-line); border-radius: var(--f-r-card); padding: var(--s-5); }
.f-summary-card .f-summary-row { grid-template-columns: 1fr auto; padding: var(--s-2) 0; }
.f-summary-card .f-actions { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.f-summary-card .f-btn { width: 100%; }

/* D — Info panel: privacy, authorization, eligibility, readiness, explanations. Soft background, small icon. */
.f-panel { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border-radius: var(--f-r-card); background: var(--f-blue-soft); }
.f-panel.warning { background: var(--f-warning-soft); } .f-panel.success { background: var(--f-success-soft); } .f-panel.neutral { background: var(--f-surface-2); }
.f-panel .es-icon { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 3px; }
.f-panel b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.f-panel p { margin: 0; color: var(--f-text-2); font-size: var(--f-support); line-height: 1.65; }
.f-panel a { font-size: var(--f-support); }

/* E — Selection card (game / varsity): identity → format → eligibility → readiness → toggle. */
.f-selection { background: var(--f-surface); border: 1px solid var(--f-line); border-radius: var(--f-r-card); padding: var(--s-5); display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1.5fr 1.2fr auto; gap: var(--s-4); align-items: center; }
.f-selection.is-selected { border-color: var(--f-blue); }
.f-selection .f-sel-name { font-size: 17px; font-weight: 600; line-height: 1.3; }
.f-selection .f-sel-name .f-support { display: block; font-weight: 400; }
.f-selection .f-sel-label { display: block; font-size: var(--f-micro); color: #6B7A90; margin-bottom: 2px; }
.f-selection .f-sel-more { grid-column: 1 / -1; }
.f-selections { display: grid; gap: var(--s-3); }

/* F — Section container: header (tile + title + optional action) + body rows. */
.f-container { background: var(--f-surface); border: 1px solid var(--f-line); border-radius: var(--f-r-card); }
.f-container-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--f-line); }
.f-container-head .f-container-title { display: flex; align-items: center; gap: var(--s-3); }
.f-container-head h2 { font-size: var(--f-block); font-weight: 600; margin: 0; }
.f-container-body { padding: var(--s-2) var(--s-5) var(--s-4); }
.f-container-body .f-summary-row { grid-template-columns: 200px 1fr; }
.f-container-body .f-table th:first-child, .f-container-body .f-table td:first-child { padding-inline-start: 0; }

/* Filter row (operational screens) */
.f-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin: var(--s-4) 0 var(--s-3); }
.f-filters .f-input, .f-filters .f-select { height: 36px; width: auto; min-width: 160px; font-size: 14px; }
.f-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--s-3); border: 1px solid var(--f-line-strong); border-radius: 999px; font-size: 13.5px; color: var(--f-text-2); background: #fff; text-decoration: none; }
.f-chip.on { border-color: var(--f-blue); color: var(--f-blue); background: var(--f-blue-soft); }

/* Unified states: dot/icon + text (never color alone) */
.f-status.neutral::before { background: var(--f-line-strong); }
.f-state-ok { color: var(--f-success); } .f-state-warn { color: var(--f-warning); } .f-state-danger { color: var(--f-danger); }

/* Section rhythm: tight inside containers, medium between containers, large between sections */
.f-section + .f-section { margin-top: var(--s-12); }
.f-section-head { margin-bottom: var(--s-4); }
.f-section-head .f-section-title { display: flex; align-items: center; gap: var(--s-3); }

/* mobile */
@media (max-width: 1100px) { .f-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .f-features { grid-template-columns: 1fr; }
  .f-action { grid-template-columns: auto minmax(0, 1fr); } .f-action .f-action-state { grid-column: 2; justify-self: start; }
  .f-selection { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-2); } .f-selection > div:nth-child(2), .f-selection > div:nth-child(3), .f-selection > div:nth-child(4) { grid-column: 1 / -1; }
  .f-container-body .f-summary-row { grid-template-columns: 1fr; }
  .f-canvas.has-sticky { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .f-sticky { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; z-index: 30; padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .f-section + .f-section { margin-top: var(--s-10); }
}
.f-strip.is-warning { background: var(--f-warning-soft); } .f-strip.is-warning .f-strip-mark { background: var(--f-warning); }
.f-strip.is-danger { background: var(--f-danger-soft); } .f-strip.is-danger .f-strip-mark { background: var(--f-danger); }
/* locked sidebar while the organization is pending */
.nav-item.is-locked { opacity: .45; pointer-events: none; }
.sidebar-lock { margin: 8px 12px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.5; }
.f-two aside .f-summary-row { grid-template-columns: 1fr; gap: 2px; }
.f-two aside .f-summary-row dd { overflow-wrap: anywhere; }