/*
 * HBV HF21-S20 - 2026-07-18 full-end UI/UX implementation closure.
 * Presentation and interaction scaffolding only. Business truth, qualification,
 * recommendation, formalization and deployment boundaries remain server-owned.
 */
html[data-hbv-uiux="s20"] {
  --s20-brand: #176bfe;
  --s20-brand-strong: #124fae;
  --s20-navy: #10213a;
  --s20-navy-2: #143b70;
  --s20-canvas: #f4f7fb;
  --s20-surface: #ffffff;
  --s20-line: #dfe7f1;
  --s20-line-soft: #edf2f7;
  --s20-text: #1b2d45;
  --s20-muted: #6d7c91;
  --s20-success: #25a65a;
  --s20-success-soft: #eaf8ef;
  --s20-warning: #f5a623;
  --s20-warning-soft: #fff6e5;
  --s20-danger: #e34d59;
  --s20-danger-soft: #fff0f1;
  --s20-purple: #7c5cfc;
  --s20-purple-soft: #f3efff;
  --s20-teal: #19a99a;
  --s20-gold: #d9a638;
  --s20-radius-sm: 9px;
  --s20-radius: 14px;
  --s20-radius-lg: 20px;
  --s20-shadow: 0 10px 30px rgba(16,33,58,.075);
  --s20-shadow-lg: 0 24px 70px rgba(16,33,58,.16);
  --s20-content: 1600px;
}
html[data-hbv-uiux="s20"], html[data-hbv-uiux="s20"] body { background: var(--s20-canvas); color: var(--s20-text); }
html[data-hbv-uiux="s20"] body { overflow-x: hidden; }
html[data-hbv-uiux="s20"] :where(.panel,.metric-card,.review-card,.admin-card,.form-section,.result-card,.scenario-card) {
  border-color: var(--s20-line) !important;
  box-shadow: 0 6px 22px rgba(16,33,58,.055);
}
html[data-hbv-uiux="s20"] :where(.panel,.metric-card,.review-card,.admin-card,.form-section) { border-radius: var(--s20-radius); }
html[data-hbv-uiux="s20"] :where(h1,h2,h3,h4) { color: var(--s20-navy-2); }
html[data-hbv-uiux="s20"] :where(.eyebrow,.section-kicker) { color: var(--s20-brand-strong); letter-spacing: .1em; font-weight: 850; }
html[data-hbv-uiux="s20"] :where(.page,.admin-page) { scroll-margin-top: 92px; }
html[data-hbv-uiux="s20"] :where(.section-intro,.admin-page-head) h2 { font-size: clamp(23px,2vw,30px); line-height: 1.25; }
html[data-hbv-uiux="s20"] :where(.section-intro,.admin-page-head) p { max-width: 900px; color: var(--s20-muted); }
html[data-hbv-uiux="s20"] .page > :where(.section-intro,.strategy-banner,.panel,.result-list,.candidate-summary-bar,.p3-wish-workspace-nav,.dashboard-main-grid,.dashboard-lower-grid,.settings-grid,.profile-summary-grid,.profile-content-shell),
html[data-hbv-uiux="s20"] .admin-content > .admin-page { max-width: var(--s20-content); margin-left: auto; margin-right: auto; }

/* Status semantics: words and icons remain visible even without colour. */
html[data-hbv-uiux="s20"] :where(.status-approved,.risk-safe,.health-ok,.success,.state-success) { color: #167a42 !important; }
html[data-hbv-uiux="s20"] :where(.status-warning,.risk-reach,.health-warn,.warning,.state-warning) { color: #a96800 !important; }
html[data-hbv-uiux="s20"] :where(.status-blocked,.risk-high,.danger,.state-danger) { color: #b72f3c !important; }
html[data-hbv-uiux="s20"] :where(.status-unknown,.data-insufficient,.state-unknown) { color: #6547c9 !important; }
html[data-hbv-uiux="s20"] .s20-risk-legend { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; border:1px solid var(--s20-line); border-radius:12px; background:#fff; color:var(--s20-muted); font-size:12px; }
html[data-hbv-uiux="s20"] .s20-risk-legend b { color:var(--s20-text); margin-right:4px; }
html[data-hbv-uiux="s20"] .s20-risk-legend span { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; background:#f5f7fb; }
html[data-hbv-uiux="s20"] .s20-risk-legend i { width:8px; height:8px; border-radius:50%; background:currentColor; }
html[data-hbv-uiux="s20"] .s20-risk-legend .hard { color:var(--s20-danger); }
html[data-hbv-uiux="s20"] .s20-risk-legend .advisory { color:var(--s20-warning); }
html[data-hbv-uiux="s20"] .s20-risk-legend .unknown { color:var(--s20-purple); }
html[data-hbv-uiux="s20"] .s20-risk-legend .safe { color:var(--s20-success); }

/* Shared tables and forms */
html[data-hbv-uiux="s20"] .s20-table-scroll { max-width:100%; overflow:auto; border:1px solid var(--s20-line); border-radius:12px; background:#fff; overscroll-behavior:contain; }
html[data-hbv-uiux="s20"] .s20-table-scroll > table { width:100%; margin:0 !important; border:0 !important; }
html[data-hbv-uiux="s20"] .s20-table-scroll thead { position:sticky; top:0; z-index:3; background:#f3f7fc; }
html[data-hbv-uiux="s20"] table :where(th,td) { vertical-align:top; }
html[data-hbv-uiux="s20"] table th { color:#3f5571; font-size:12px; }
html[data-hbv-uiux="s20"] table tbody tr:hover { background:#f8fbff; }
html[data-hbv-uiux="s20"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea) { background:#fff; }
html[data-hbv-uiux="s20"] :where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus { border-color:var(--s20-brand) !important; box-shadow:0 0 0 3px rgba(23,107,254,.13) !important; }
html[data-hbv-uiux="s20"] :where(button,.btn,.primary,.secondary,.ghost) { min-height:40px; }
html[data-hbv-uiux="s20"] :where(.primary,.btn-primary) { background:linear-gradient(135deg,var(--s20-brand),#3989ff); border-color:var(--s20-brand); }

/* Runtime capability is a visual adapter, not an authorization signal. */
html[data-hbv-uiux="s20"] .s20-runtime-strip { display:flex; align-items:center; gap:8px; min-width:0; padding:7px 10px; border:1px solid var(--s20-line); border-radius:999px; background:rgba(255,255,255,.92); color:var(--s20-muted); font-size:11px; white-space:nowrap; }
html[data-hbv-uiux="s20"] .s20-runtime-strip strong { color:var(--s20-navy-2); }
html[data-hbv-uiux="s20"] .s20-runtime-strip .s20-live { width:7px; height:7px; border-radius:50%; background:var(--s20-success); box-shadow:0 0 0 4px rgba(37,166,90,.12); }
html[data-hbv-uiux="s20"] .s20-runtime-strip[data-state="busy"] .s20-live { background:var(--s20-warning); }
html[data-hbv-uiux="s20"] .s20-runtime-strip[data-state="degraded"] .s20-live { background:var(--s20-danger); }
html[data-hbv-uiux="s20"] .s20-runtime-detail { color:var(--s20-muted); overflow:hidden; text-overflow:ellipsis; }

/* Login and public entry */
html[data-hbv-uiux="s20"] #login-screen { background:linear-gradient(135deg,#eef4fc 0%,#f7faff 48%,#e9f1fb 100%); }
html[data-hbv-uiux="s20"] .login-portal { width:min(1180px,calc(100vw - 40px)); min-height:min(760px,calc(100vh - 54px)); grid-template-columns:minmax(0,1.04fr) minmax(430px,.88fr); border-radius:24px; overflow:hidden; box-shadow:var(--s20-shadow-lg); }
html[data-hbv-uiux="s20"] .login-intro { position:relative; padding:48px; background:linear-gradient(145deg,#102a55,#123d76 64%,#15549a); }
html[data-hbv-uiux="s20"] .login-intro::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 24% 20%,rgba(68,147,255,.22),transparent 32%),radial-gradient(circle at 75% 78%,rgba(255,255,255,.09),transparent 28%); }
html[data-hbv-uiux="s20"] .login-intro > * { position:relative; z-index:1; }
html[data-hbv-uiux="s20"] .login-intro h1 { color:#fff; font-size:clamp(30px,3vw,46px); line-height:1.2; }
html[data-hbv-uiux="s20"] .login-intro p, html[data-hbv-uiux="s20"] .login-intro span, html[data-hbv-uiux="s20"] .login-intro small { color:rgba(255,255,255,.78); }
html[data-hbv-uiux="s20"] .login-capability-grid > div { background:rgba(255,255,255,.095); border-color:rgba(255,255,255,.12); }
html[data-hbv-uiux="s20"] .login-card { align-self:center; margin:34px; padding:34px; border:1px solid #e3eaf3; border-radius:22px; box-shadow:0 18px 50px rgba(25,55,96,.12); }
html[data-hbv-uiux="s20"] .auth-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:5px; border-radius:12px; background:#f1f5fa; }
html[data-hbv-uiux="s20"] .auth-tabs button { min-width:0; border-radius:9px; }
html[data-hbv-uiux="s20"] .auth-tabs button.active { background:#fff; color:var(--s20-brand-strong); box-shadow:0 4px 14px rgba(16,33,58,.08); }

/* Member shell and contextual workspace */
html[data-hbv-uiux="s20"] .hf21-family-header { border-bottom-color:var(--s20-line); }
html[data-hbv-uiux="s20"] .hf21-primary-nav { gap:4px; }
html[data-hbv-uiux="s20"] .hf21-nav-trigger { padding-inline:14px; }
html[data-hbv-uiux="s20"] .workspace-bar { max-width:var(--s20-content); margin-left:auto; margin-right:auto; border:1px solid var(--s20-line); border-radius:13px; background:rgba(255,255,255,.94); box-shadow:0 5px 18px rgba(16,33,58,.045); }
html[data-hbv-uiux="s20"] .workspace-bar .s20-runtime-strip { margin-left:auto; }
html[data-hbv-uiux="s20"] .main { min-width:0; }
html[data-hbv-uiux="s20"] .main > .page { padding-left:clamp(14px,2vw,30px); padding-right:clamp(14px,2vw,30px); }
html[data-hbv-uiux="s20"] .section-intro { align-items:flex-start; gap:22px; padding-top:8px; }
html[data-hbv-uiux="s20"] .section-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }

/* Dashboard */
html[data-hbv-uiux="s20"] .dashboard-hero { border-radius:20px; background:linear-gradient(125deg,#102f61,#123e79 62%,#1b5aa0); box-shadow:0 20px 45px rgba(20,62,121,.18); }
html[data-hbv-uiux="s20"] .dashboard-hero h2 { color:#fff; }
html[data-hbv-uiux="s20"] .dashboard-hero-side { min-width:260px; }
html[data-hbv-uiux="s20"] .dashboard-main-grid { gap:16px; }
html[data-hbv-uiux="s20"] .journey-list button { border:1px solid var(--s20-line); background:#fff; }
html[data-hbv-uiux="s20"] .journey-list button:hover { border-color:#b9d1f5; background:#f6faff; }
html[data-hbv-uiux="s20"] .scheme-health-card .risk-track { background:#eaf0f6; }
html[data-hbv-uiux="s20"] .coverage-card { overflow:hidden; }

/* Profile */
html[data-hbv-uiux="s20"] .profile-content-shell { grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start; }
html[data-hbv-uiux="s20"] .profile-section-nav { position:sticky; top:96px; border:1px solid var(--s20-line); border-radius:16px; background:#fff; box-shadow:var(--s20-shadow); }
html[data-hbv-uiux="s20"] .profile-section-nav button { border-radius:10px; }
html[data-hbv-uiux="s20"] .profile-section-nav button.active { background:#eaf2ff; color:var(--s20-brand-strong); }
html[data-hbv-uiux="s20"] .profile-progress-card { border-left:4px solid var(--s20-brand); }
html[data-hbv-uiux="s20"] .profile-form-section { border-radius:16px; }

/* Search, recommendation and candidate result hierarchy */
html[data-hbv-uiux="s20"] .recommend-controls { display:grid; grid-template-columns:repeat(4,minmax(145px,1fr)); gap:12px; }
html[data-hbv-uiux="s20"] .recommend-method { grid-column:1/-1; }
html[data-hbv-uiux="s20"] .recommend-scope-panel { overflow:hidden; }
html[data-hbv-uiux="s20"] .strategy-banner { border-radius:14px; }
html[data-hbv-uiux="s20"] :where(#recommend-results,#search-results,#candidate-list) .result-card { border:1px solid var(--s20-line); border-radius:15px; background:#fff; box-shadow:0 5px 18px rgba(16,33,58,.045); }
html[data-hbv-uiux="s20"] :where(#recommend-results,#search-results,#candidate-list) .result-card:hover { border-color:#bcd2f2; box-shadow:0 12px 30px rgba(16,33,58,.09); }
html[data-hbv-uiux="s20"] .candidate-summary-bar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
html[data-hbv-uiux="s20"] .candidate-summary-item { border:1px solid var(--s20-line); border-radius:12px; background:#fff; }
html[data-hbv-uiux="s20"] .collection-batch-bar { position:sticky; top:82px; z-index:12; }

/* 96-wish workbench */
html[data-hbv-uiux="s20"] #page-wishes .section-intro { position:relative; }
html[data-hbv-uiux="s20"] .p3-wish-workspace-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
html[data-hbv-uiux="s20"] .p3-wish-workspace-nav button { min-width:0; border:1px solid var(--s20-line); border-radius:12px; background:#fff; }
html[data-hbv-uiux="s20"] .p3-wish-workspace-nav button:hover { border-color:#b7cff2; background:#f6faff; }
html[data-hbv-uiux="s20"] .wish-command-bar { border-top:4px solid var(--s20-brand); }
html[data-hbv-uiux="s20"] .wish-slot-map { background:linear-gradient(180deg,#fff,#f9fbfe); }
html[data-hbv-uiux="s20"] .qualification-batch-bar { border-left:4px solid var(--s20-purple); }
html[data-hbv-uiux="s20"] .formal-export-card { width:min(760px,calc(100vw - 28px)); max-height:min(86vh,850px); overflow:auto; border-radius:20px; box-shadow:var(--s20-shadow-lg); }
html[data-hbv-uiux="s20"] .formal-export-confirm-box { border:1px solid #eadfb8; background:#fffaf0; }

/* Audit, scenarios, reports, data and settings */
html[data-hbv-uiux="s20"] #page-audit .s20-risk-legend { margin-bottom:12px; }
html[data-hbv-uiux="s20"] :where(.audit-section,.audit-card,.governance-card) { border-radius:14px; }
html[data-hbv-uiux="s20"] #page-scenarios .scenario-grid { gap:14px; }
html[data-hbv-uiux="s20"] #page-reports .report-card { border-radius:15px; }
html[data-hbv-uiux="s20"] #page-data .data-boundary-grid > *, html[data-hbv-uiux="s20"] #page-settings .form-section { min-width:0; }
html[data-hbv-uiux="s20"] .settings-grid-v32 { grid-template-columns:repeat(2,minmax(0,1fr)); }
html[data-hbv-uiux="s20"] .global-footer-notice { max-width:var(--s20-content); margin-inline:auto; color:var(--s20-muted); }

/* Admin six-centre shell */
html[data-hbv-uiux="s20"] .admin-sidebar { background:linear-gradient(180deg,#102d55,#10213a); border-right:1px solid rgba(255,255,255,.05); }
html[data-hbv-uiux="s20"] .admin-brand { min-height:82px; border-bottom-color:rgba(255,255,255,.08); }
html[data-hbv-uiux="s20"] .admin-nav-group { color:rgba(255,255,255,.46); letter-spacing:.09em; }
html[data-hbv-uiux="s20"] .admin-nav button { border-radius:9px; }
html[data-hbv-uiux="s20"] .admin-nav button.active { background:linear-gradient(90deg,rgba(38,116,226,.42),rgba(38,116,226,.22)); box-shadow:inset 3px 0 0 var(--s20-gold); }
html[data-hbv-uiux="s20"] .admin-main { min-width:0; background:var(--s20-canvas); }
html[data-hbv-uiux="s20"] .admin-topbar { min-height:72px; border-bottom:1px solid var(--s20-line); background:rgba(255,255,255,.94); backdrop-filter:blur(16px); }
html[data-hbv-uiux="s20"] .admin-content { padding:22px clamp(14px,2vw,30px) 44px; }
html[data-hbv-uiux="s20"] .admin-page > h2:first-child, html[data-hbv-uiux="s20"] .admin-page > .section-title:first-child { color:var(--s20-navy-2); }
html[data-hbv-uiux="s20"] .metrics-grid { gap:12px; }
html[data-hbv-uiux="s20"] .metric-card { background:#fff; }
html[data-hbv-uiux="s20"] .admin-grid > * { min-width:0; }
html[data-hbv-uiux="s20"] .admin-topbar-right .s20-runtime-strip { max-width:260px; }
html[data-hbv-uiux="s20"] .admin-nav-search input { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.12); }
html[data-hbv-uiux="s20"] .admin-nav-search input::placeholder { color:rgba(255,255,255,.58); }

/* Auxiliary evidence and governance pages */
html[data-hbv-uiux="s20"] body.s20-aux-page { background:var(--s20-canvas); }
html[data-hbv-uiux="s20"] body.s20-aux-page main { max-width:var(--s20-content); margin:0 auto; padding-inline:clamp(14px,2vw,30px); }
html[data-hbv-uiux="s20"] .hf21-s5-aux-header { border-bottom-color:var(--s20-line); }

/* Mobile: cards, bottom sheet patterns and five primary actions. */
@media (max-width: 1180px) {
  html[data-hbv-uiux="s20"] .topbar { min-height:64px; }
  html[data-hbv-uiux="s20"] .workspace-bar { margin:10px 12px 0; }
  html[data-hbv-uiux="s20"] .profile-content-shell { grid-template-columns:1fr; }
  html[data-hbv-uiux="s20"] .profile-section-nav { position:static; display:flex; overflow:auto; padding:8px; }
  html[data-hbv-uiux="s20"] .profile-section-nav button { min-width:170px; }
  html[data-hbv-uiux="s20"] .recommend-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-hbv-uiux="s20"] .candidate-summary-bar { grid-template-columns:repeat(4,minmax(0,1fr)); }
  html[data-hbv-uiux="s20"] .collection-batch-bar { position:static; }
}
@media (max-width: 760px) {
  html[data-hbv-uiux="s20"] body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  html[data-hbv-uiux="s20"] :where(button,.btn,.primary,.secondary,.ghost,input:not([type=checkbox]):not([type=radio]),select) { min-height:44px; }
  html[data-hbv-uiux="s20"] .login-portal { width:100%; min-height:100vh; grid-template-columns:1fr; border-radius:0; box-shadow:none; }
  html[data-hbv-uiux="s20"] .login-intro { padding:28px 22px 22px; }
  html[data-hbv-uiux="s20"] .login-decision-visual, html[data-hbv-uiux="s20"] .access-flow { display:none; }
  html[data-hbv-uiux="s20"] .login-card { margin:0; padding:24px 20px 34px; border-radius:22px 22px 0 0; box-shadow:none; }
  html[data-hbv-uiux="s20"] .auth-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-hbv-uiux="s20"] .dashboard-hero { grid-template-columns:1fr; padding:22px; }
  html[data-hbv-uiux="s20"] .dashboard-main-grid, html[data-hbv-uiux="s20"] .dashboard-lower-grid { grid-template-columns:1fr; }
  html[data-hbv-uiux="s20"] .recommend-controls { grid-template-columns:1fr; }
  html[data-hbv-uiux="s20"] .candidate-summary-bar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-hbv-uiux="s20"] .p3-wish-workspace-nav { display:flex; overflow:auto; scroll-snap-type:x proximity; }
  html[data-hbv-uiux="s20"] .p3-wish-workspace-nav button { min-width:155px; scroll-snap-align:start; }
  html[data-hbv-uiux="s20"] .settings-grid-v32 { grid-template-columns:1fr; }
  html[data-hbv-uiux="s20"] .section-intro { flex-direction:column; }
  html[data-hbv-uiux="s20"] .section-actions { width:100%; justify-content:stretch; }
  html[data-hbv-uiux="s20"] .section-actions > * { flex:1 1 100%; }
  html[data-hbv-uiux="s20"] .mobile-bottom-nav { grid-template-columns:repeat(5,minmax(0,1fr)); padding-bottom:env(safe-area-inset-bottom); }
  html[data-hbv-uiux="s20"] .mobile-bottom-nav button { min-width:0; min-height:60px; font-size:11px; }
  html[data-hbv-uiux="s20"] .mobile-bottom-nav img { width:20px; height:20px; }
  html[data-hbv-uiux="s20"] .admin-content { padding-inline:12px; }
  html[data-hbv-uiux="s20"] .admin-topbar-right .s20-runtime-strip { display:none; }
  html[data-hbv-uiux="s20"] .s20-risk-legend { align-items:flex-start; }
}
@media (max-width: 420px) {
  html[data-hbv-uiux="s20"] .login-intro h1 { font-size:28px; }
  html[data-hbv-uiux="s20"] .candidate-summary-bar { grid-template-columns:1fr 1fr; }
  html[data-hbv-uiux="s20"] .workspace-bar .s20-runtime-strip { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-hbv-uiux="s20"] *, html[data-hbv-uiux="s20"] *::before, html[data-hbv-uiux="s20"] *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
@media (forced-colors: active) {
  html[data-hbv-uiux="s20"] :where(.panel,.metric-card,.result-card,.s20-table-scroll,.s20-runtime-strip,.s20-risk-legend) { border:1px solid CanvasText !important; }
}
@media print {
  html[data-hbv-uiux="s20"] .s20-runtime-strip, html[data-hbv-uiux="s20"] .s20-risk-legend, html[data-hbv-uiux="s20"] .mobile-bottom-nav { display:none !important; }
  html[data-hbv-uiux="s20"] body { background:#fff; padding:0; }
}