/*
 * Intervention Hub Portal — central stylesheet.
 * Approved design language (design/mockups). Each layout's rules are
 * scoped under its body class via native CSS nesting, so layouts cannot
 * bleed into one another. PDF templates keep inline CSS (dompdf).
 * Cache-busted by filemtime in every layout's <link>.
 */

/* ---------- design tokens (canonical; per-layout overrides in scopes) ---------- */

:root{
    --ink:#101828; --ink-2:#344054; --ink-3:#475467;
    --line:#E4E7EC; --bg:#F8FAFC; --card:#FFFFFF;
    --primary:#4338CA; --primary-strong:#3730A3; --primary-soft:#EEF2FF;
    --teal:#0E9384; --teal-soft:#E0F5F2;
    --amber:#B54708; --amber-soft:#FEF0C7;
    --red:#B42318; --red-soft:#FEE4E2;
    --grey-soft:#F2F4F7;
    --focus:#4338CA; --radius:14px;
    /* 16in MacBook Pro default logical width (1728px) minus 100px margin
       each side; smaller screens are unaffected by the cap. */
    --page-max:1528px;
    --shadow-sm:0 1px 2px rgba(16,24,40,.06);
    --shadow-md:0 8px 24px -8px rgba(16,24,40,.14);
    --ease:cubic-bezier(.2,.7,.3,1);
  }

:root{
  /* homepage extras */
  --indigo-deep:#312E81; --pink:#DD2590; --pink-soft:#FDF2FA;
  --teal-strong:#0A6E63;
  --shadow-lg:0 20px 50px -16px rgba(49,46,129,.28);
}

/* ---------- global base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ---------- shared motion ---------- */
@keyframes rise{to{opacity:1; transform:none}}
@keyframes pop{from{opacity:0; transform:translateY(-6px) scale(.98)}to{opacity:1; transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .rise{opacity:1; transform:none}
}


/* ==================== layout-admin ==================== */
body.layout-admin {
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55; font-size:15.5px;
    -webkit-font-smoothing:antialiased;
  }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; z-index:100; font-weight:600}
  .skip-link:focus{left:0}
  a{color:var(--primary)}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

  /* ---------- header ---------- */
  .topbar{background:var(--card); border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:var(--page-max); margin:0 auto; padding:.8rem 1.5rem; display:flex; align-items:center; gap:1rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
  .brand-mark{
    width:38px; height:38px; border-radius:11px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  .role-chip{background:var(--primary-soft); color:var(--primary-strong); font-size:.78rem; font-weight:700; padding:.18rem .6rem; border-radius:999px; letter-spacing:.02em}
  .account{margin-left:auto; display:flex; align-items:center; gap:.75rem}
  .account form{display:flex; align-items:center; gap:.75rem}
  .account .signout{
    font:inherit; font-weight:600; color:var(--ink-2); background:none; border:1px solid transparent;
    border-radius:10px; padding:.4rem .7rem; cursor:pointer;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .account .signout:hover{background:var(--bg); border-color:var(--line)}
  .acc-name{display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--ink-2)}
  .nav-toggle{position:absolute; width:1px; height:1px; opacity:0}
  .burger{
    display:none; margin-left:.25rem; width:44px; height:40px; border:1px solid var(--line); border-radius:10px;
    background:var(--card); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-2); transition:transform .25s var(--ease), opacity .2s var(--ease)}
  #navtoggle:checked ~ .topbar .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  #navtoggle:checked ~ .topbar .burger span:nth-child(2){opacity:0}
  #navtoggle:checked ~ .topbar .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  #navtoggle:focus-visible ~ .topbar .burger{outline:3px solid var(--focus); outline-offset:2px}
  @media (max-width:760px){
    .burger{display:flex}
    .mainnav-inner{flex-direction:column; gap:0; max-height:0; overflow:hidden; padding:0 1rem; transition:max-height .35s var(--ease)}
    #navtoggle:checked ~ .mainnav .mainnav-inner{max-height:460px}
    .mainnav a{padding:.85rem .4rem; border-bottom:1px solid rgba(255,255,255,.14)}
    .mainnav a:last-child{border-bottom:none}
    .mainnav a::after{display:none}
    .acc-name{display:none}
    .role-chip{display:none}
  }
  .avatar{width:30px; height:30px; border-radius:50%; background:var(--teal-soft); color:#0A6E63; display:grid; place-items:center; font-size:.8rem; font-weight:700}

  /* ---------- nav ---------- */
  .mainnav{background:linear-gradient(90deg,#312E81 0%, #3730A3 55%, #4338CA 100%); position:sticky; top:0; z-index:50; box-shadow:0 2px 10px -4px rgba(49,46,129,.4)}
  .mainnav-inner{max-width:var(--page-max); margin:0 auto; padding:0 1.5rem; display:flex; gap:.25rem; overflow-x:auto}
  .mainnav a{
    position:relative; text-decoration:none; color:#C7D2FE; font-weight:600; font-size:.95rem;
    padding:.85rem 1rem; white-space:nowrap; transition:color .18s var(--ease);
  }
  .mainnav a::after{
    content:""; position:absolute; left:1rem; right:1rem; bottom:0; height:3px; border-radius:3px 3px 0 0;
    background:#FDB022; transform:scaleX(0); transform-origin:center; transition:transform .22s var(--ease);
  }
  .mainnav a:hover{color:#fff}
  .mainnav a:hover::after{transform:scaleX(.6)}
  .mainnav a[aria-current="page"]{color:#fff}
  .mainnav a[aria-current="page"]::after{transform:scaleX(1)}
  .mainnav a.placeholder{color:#818CF8; cursor:not-allowed}
  .mainnav a.placeholder:hover::after{transform:scaleX(0)}

  /* ---------- page ---------- */
  .page{max-width:var(--page-max); margin:0 auto; padding:2rem 1.5rem 3rem}
  .page-head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1.6rem}
  .page-head h1{font-size:1.55rem; letter-spacing:-.02em}
  .page-head .sub{color:var(--ink-3); font-size:.95rem; margin-top:.15rem}
  .page-actions{margin-left:auto; display:flex; gap:.6rem}
  .btn{
    display:inline-flex; align-items:center; gap:.5rem; font:inherit; font-weight:600; cursor:pointer;
    border-radius:10px; padding:.62rem 1.1rem; border:none; text-decoration:none;
    transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--primary); color:#fff}
  .btn-primary:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.45); transform:translateY(-1px)}
  .btn-secondary{background:var(--card); color:var(--ink); border:1px solid var(--line)}
  .btn-secondary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm); transform:translateY(-1px)}
  .btn-danger{background:var(--card); color:var(--red); border:1px solid var(--line)}
  .btn-danger:hover{border-color:var(--red); box-shadow:var(--shadow-sm)}
  .btn-sm{padding:.4rem .8rem; font-size:.88rem}

  /* ---------- flash ---------- */
  .flash{display:flex; align-items:center; gap:.6rem; border-radius:var(--radius); padding:.85rem 1.1rem; margin-bottom:1.4rem; font-weight:600; border:1px solid}
  .flash-success{background:var(--teal-soft); color:#0A6E63; border-color:#99E3D8}
  .flash-error{background:var(--red-soft); color:var(--red); border-color:#FDA29B}

  /* ---------- stats ---------- */
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.6rem}
  @media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .stats{grid-template-columns:1fr} }
  .stat{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.25rem;
    transition:box-shadow .2s var(--ease), transform .2s var(--ease);
  }
  .stat-row{display:flex; justify-content:space-between; align-items:flex-start; gap:.8rem}
  .chip{width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center}
  .chip-indigo{background:#EEF2FF; color:#3730A3}
  .chip-teal{background:#E0F5F2; color:#0A6E63}
  .chip-amber{background:#FEF0C7; color:#B54708}
  .chip-red{background:#FEE4E2; color:#B42318}
  .stat:hover{box-shadow:var(--shadow-md); transform:translateY(-2px)}
  .stat .label{color:var(--ink-3); font-size:.85rem; font-weight:600}
  .stat .value{font-size:1.65rem; font-weight:700; letter-spacing:-.02em; margin-top:.1rem}
  .stat .delta{font-size:.82rem; font-weight:600; color:#067647}
  .stat .delta.bad{color:var(--red)}

  /* ---------- panel + filters ---------- */
  .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:1.6rem}
  .panel-head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line)}
  .panel-head h2{font-size:1.05rem; letter-spacing:-.01em}
  .panel-body{padding:1.25rem}
  .tabs{display:flex; gap:.25rem; flex-wrap:wrap}
  .tab{
    font:inherit; font-weight:600; font-size:.92rem; color:var(--ink-3); background:none; border:none;
    padding:.5rem .9rem; border-radius:999px; cursor:pointer; text-decoration:none;
    transition:background .18s var(--ease), color .18s var(--ease);
  }
  .tab:hover{background:var(--grey-soft); color:var(--ink)}
  .tab[aria-current="page"]{background:var(--primary-soft); color:var(--primary-strong)}
  .tab .count{font-weight:700; opacity:.65; margin-left:.3rem; font-size:.85rem}
  .search{margin-left:auto; position:relative}
  .search svg{position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--ink-3)}
  .search input{
    font:inherit; padding:.55rem .9rem .55rem 2.4rem; border-radius:10px; border:1px solid #D0D5DD;
    width:280px; max-width:100%; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), width .25s var(--ease);
  }
  .search input:hover{border-color:#B8BFC9}
  .search input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}

  /* ---------- table ---------- */
  .table-wrap{overflow-x:auto}
  table{width:100%; border-collapse:collapse; font-size:.9rem}
  table.wide{min-width:1040px}
  caption{position:absolute; left:-9999px}
  thead th{
    text-align:left; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
    background:var(--grey-soft); padding:.7rem .55rem; border-bottom:1px solid var(--line); white-space:nowrap;
  }
  thead th:first-child, tbody td:first-child{padding-left:1.1rem}
  thead th:last-child, tbody td:last-child{padding-right:1.1rem}
  tbody td{padding:.85rem .55rem; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap}
  tbody tr{transition:background .15s var(--ease)}
  tbody tr:hover{background:#FAFBFF}
  tbody tr:last-child td{border-bottom:none}
  .ref-name{font-weight:600}
  .ref-sub{color:var(--ink-3); font-size:.84rem}
  .mono{font-variant-numeric:tabular-nums; color:var(--ink-2)}
  .empty-row td{text-align:center; color:var(--ink-3); padding:2.2rem .55rem}

  .badge{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; padding:.22rem .7rem; border-radius:999px}
  .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
  .badge-teal{background:var(--teal-soft); color:#0A6E63}
  .badge-indigo{background:var(--primary-soft); color:var(--primary-strong)}
  .badge-amber{background:var(--amber-soft); color:var(--amber)}
  .badge-red{background:var(--red-soft); color:var(--red)}
  .badge-grey{background:var(--grey-soft); color:var(--ink-3)}

  .panel-foot{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem 1.25rem; border-top:1px solid var(--line)}
  .pagination{margin-left:auto; display:flex; align-items:center; gap:.3rem; color:var(--ink-3); font-size:.9rem}
  .page-btn{
    display:inline-grid; place-items:center; font:inherit; font-weight:600; min-width:34px; height:34px; border-radius:8px;
    border:1px solid transparent; background:none; color:var(--ink-2); cursor:pointer; text-decoration:none;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .page-btn:hover{background:var(--grey-soft)}
  .page-btn[aria-current="page"]{background:var(--primary-soft); color:var(--primary-strong); border-color:transparent}
  .page-btn.disabled{opacity:.4; pointer-events:none}

  /* ---------- forms ---------- */
  .form-section{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.4rem; margin-bottom:1.4rem}
  .form-section > h2{font-size:1.05rem; letter-spacing:-.01em; margin-bottom:.35rem}
  .form-section > .sub{color:var(--ink-3); font-size:.9rem; margin-bottom:1rem}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem}
  @media (max-width:760px){ .form-grid{grid-template-columns:1fr} }
  .field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
  .field .hint{color:var(--ink-3); font-size:.82rem; margin-top:.3rem}
  .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password],
  .field input[type=date], .field input[type=number], .field input[type=file], .field select, .field textarea{
    font:inherit; width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid #D0D5DD; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .field textarea{min-height:7.5rem; resize:vertical}
  .field input:hover, .field select:hover, .field textarea:hover{border-color:#B8BFC9}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .field .error{color:var(--red); font-size:.84rem; font-weight:600; margin-top:.3rem}
  .form-actions{display:flex; justify-content:flex-end; gap:.6rem; margin-bottom:1.4rem}
  .inline-fields{display:flex; gap:.6rem; align-items:center}
  .inline-fields input[type=number]{width:5.5rem}

  /* created → issued → deadline date flow on referral cards */
  .date-flow{display:inline-flex; align-items:center; gap:.45rem; flex-wrap:wrap}
  .date-flow .date-arrow{color:var(--ink-3); flex:none}

  /* report builder criteria rows (wireframe 34) */
  .criteria-rows{display:flex; flex-direction:column; gap:.7rem; margin-bottom:.9rem}
  .criteria-row{
    display:grid; grid-template-columns:1.2fr 1fr 1.6fr auto; gap:.6rem; align-items:center;
    background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:.7rem;
  }
  @media (max-width:760px){ .criteria-row{grid-template-columns:1fr} }
  .criteria-row select, .criteria-row input, .criteria-value select, .criteria-value input{
    font:inherit; width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid #D0D5DD; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .criteria-row select:hover, .criteria-row input:hover{border-color:#B8BFC9}
  .criteria-row select:focus, .criteria-row input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}

  /* toggle switch (wireframe teal) */
  .toggle{display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; font-weight:600; font-size:.9rem}
  .toggle input{position:absolute; width:1px; height:1px; opacity:0}
  .toggle .track{
    width:40px; height:22px; border-radius:999px; background:#D0D5DD; position:relative; flex:none;
    transition:background .18s var(--ease);
  }
  .toggle .track::after{
    content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff;
    box-shadow:var(--shadow-sm); transition:transform .18s var(--ease);
  }
  .toggle input:checked + .track{background:var(--teal)}
  .toggle input:checked + .track::after{transform:translateX(18px)}
  .toggle input:focus-visible + .track{outline:3px solid var(--focus); outline-offset:2px}

  /* hub allocation grid */
  .hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
  @media (max-width:1000px){ .hub-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:640px){ .hub-grid{grid-template-columns:1fr} }
  .hub-card{border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; background:var(--card)}
  .hub-card h3{font-size:.95rem; margin-bottom:.55rem}
  .hub-card .cost{display:flex; align-items:center; gap:.5rem; margin-top:.7rem; font-size:.88rem; font-weight:600; color:var(--ink-2)}
  .hub-card .cost input{font:inherit; width:7rem; padding:.4rem .6rem; border-radius:8px; border:1px solid #D0D5DD}

  /* item cards (reminders, recipients, questions) */
  .item-card{border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; margin-bottom:1rem; background:var(--card)}
  .item-card .item-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem}
  .item-card .item-head h3{font-size:.98rem}
  .item-card .item-head .spacer{margin-left:auto; display:flex; gap:.5rem}

  /* CSS-only modal via :target */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(16,24,40,.55); z-index:90;
    display:none; align-items:flex-start; justify-content:center; padding:3rem 1rem; overflow-y:auto;
  }
  .modal-overlay:target{display:flex}
  .modal{
    background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-md);
    max-width:560px; width:100%; padding:1.6rem;
  }
  .modal .modal-actions{display:flex; justify-content:center; margin-top:1.3rem}
  .email-preview{border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; background:#fff}
  .email-preview .ep-brand{display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; font-weight:700}
  .email-preview h2{font-size:1.1rem; margin-bottom:.8rem}
  .email-preview .ep-body{background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px; padding:1rem; white-space:pre-wrap; font-size:.92rem; margin-bottom:1rem}
  .email-preview table{font-size:.88rem}
  .email-preview td{padding:.45rem .6rem; border-bottom:1px solid var(--line)}

  footer{border-top:1px solid var(--line); background:var(--card); margin-top:3rem}
  .footer-inner{max-width:var(--page-max); margin:0 auto; padding:1.4rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--ink-3); font-size:.9rem}
  .footer-links{display:flex; gap:1.4rem}
  .footer-links a{color:var(--ink-3); text-decoration:none; font-weight:500; transition:color .18s var(--ease)}
  .footer-links a:hover{color:var(--ink)}

  .rise{opacity:0; transform:translateY(12px); animation:rise .55s var(--ease) forwards}
  .rise.d1{animation-delay:.07s} .rise.d2{animation-delay:.14s}
}

/* ==================== layout-client ==================== */
body.layout-client {
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55; font-size:15.5px;
    -webkit-font-smoothing:antialiased;
  }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; z-index:100; font-weight:600}
  .skip-link:focus{left:0}
  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  a{color:var(--primary)}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

  /* ---------- header ---------- */
  .topbar{background:var(--card); border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:var(--page-max); margin:0 auto; padding:.8rem 1.5rem; display:flex; align-items:center; gap:1rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
  .brand-mark{
    width:38px; height:38px; border-radius:11px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  .role-chip{background:var(--teal-soft); color:#0A6E63; font-size:.78rem; font-weight:700; padding:.18rem .6rem; border-radius:999px; letter-spacing:.02em}
  .account{margin-left:auto; display:flex; align-items:center; gap:.75rem}
  .account form{display:flex; align-items:center; gap:.75rem}
  .account .signout{
    font:inherit; font-weight:600; color:var(--ink-2); background:none; border:1px solid transparent;
    border-radius:10px; padding:.4rem .7rem; cursor:pointer;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .account .signout:hover{background:var(--bg); border-color:var(--line)}
  .acc-name{display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--ink-2)}
  .nav-toggle{position:absolute; width:1px; height:1px; opacity:0}
  .burger{
    display:none; margin-left:.25rem; width:44px; height:40px; border:1px solid var(--line); border-radius:10px;
    background:var(--card); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-2); transition:transform .25s var(--ease), opacity .2s var(--ease)}
  #navtoggle:checked ~ .topbar .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  #navtoggle:checked ~ .topbar .burger span:nth-child(2){opacity:0}
  #navtoggle:checked ~ .topbar .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  #navtoggle:focus-visible ~ .topbar .burger{outline:3px solid var(--focus); outline-offset:2px}
  @media (max-width:760px){
    .burger{display:flex}
    .mainnav-inner{flex-direction:column; gap:0; max-height:0; overflow:hidden; padding:0 1rem; transition:max-height .35s var(--ease)}
    #navtoggle:checked ~ .mainnav .mainnav-inner{max-height:460px}
    .mainnav a{padding:.85rem .4rem; border-bottom:1px solid rgba(255,255,255,.14)}
    .mainnav a:last-child{border-bottom:none}
    .mainnav a::after{display:none}
    .acc-name{display:none}
    .role-chip{display:none}
  }
  .avatar{width:30px; height:30px; border-radius:50%; background:var(--teal-soft); color:#0A6E63; display:grid; place-items:center; font-size:.8rem; font-weight:700}

  /* ---------- nav (managers only; plain client users have no tabs, wireframe 13) ---------- */
  .mainnav{background:linear-gradient(90deg,#312E81 0%, #3730A3 55%, #4338CA 100%); position:sticky; top:0; z-index:50; box-shadow:0 2px 10px -4px rgba(49,46,129,.4)}
  .mainnav-inner{max-width:var(--page-max); margin:0 auto; padding:0 1.5rem; display:flex; gap:.25rem; overflow-x:auto}
  .mainnav a{
    position:relative; text-decoration:none; color:#C7D2FE; font-weight:600; font-size:.95rem;
    padding:.85rem 1rem; white-space:nowrap; transition:color .18s var(--ease);
  }
  .mainnav a::after{
    content:""; position:absolute; left:1rem; right:1rem; bottom:0; height:3px; border-radius:3px 3px 0 0;
    background:#FDB022; transform:scaleX(0); transform-origin:center; transition:transform .22s var(--ease);
  }
  .mainnav a:hover{color:#fff}
  .mainnav a:hover::after{transform:scaleX(.6)}
  .mainnav a[aria-current="page"]{color:#fff}
  .mainnav a[aria-current="page"]::after{transform:scaleX(1)}

  /* ---------- page ---------- */
  .page{max-width:var(--page-max); margin:0 auto; padding:2rem 1.5rem 3rem}
  .page-head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1.6rem}
  .page-head h1{font-size:1.55rem; letter-spacing:-.02em}
  .page-head .sub{color:var(--ink-3); font-size:.95rem; margin-top:.15rem}
  .page-actions{margin-left:auto; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
  .btn{
    display:inline-flex; align-items:center; gap:.5rem; font:inherit; font-weight:600; cursor:pointer;
    border-radius:10px; padding:.62rem 1.1rem; border:none; text-decoration:none;
    transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--primary); color:#fff}
  .btn-primary:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.45); transform:translateY(-1px)}
  .btn-secondary{background:var(--card); color:var(--ink); border:1px solid var(--line)}
  .btn-secondary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm); transform:translateY(-1px)}
  .btn-danger{background:var(--card); color:var(--red); border:1px solid var(--line)}
  .btn-danger:hover{border-color:var(--red); box-shadow:var(--shadow-sm)}
  .btn-sm{padding:.4rem .8rem; font-size:.88rem}
  .btn[disabled], .btn.disabled{opacity:.5; cursor:not-allowed; pointer-events:none}

  /* ---------- flash ---------- */
  .flash{display:flex; align-items:center; gap:.6rem; border-radius:var(--radius); padding:.85rem 1.1rem; margin-bottom:1.4rem; font-weight:600; border:1px solid}
  .flash-success{background:var(--teal-soft); color:#0A6E63; border-color:#99E3D8}
  .flash-error{background:var(--red-soft); color:var(--red); border-color:#FDA29B}
  .flash-warning{background:var(--amber-soft); color:var(--amber); border-color:#FEC84B}

  /* ---------- self-referral link box (wireframes 9/13) ---------- */
  .selflink{display:flex; flex-direction:column; gap:.25rem}
  .selflink .label{font-weight:600; font-size:.85rem; color:var(--ink-2)}
  .selflink-row{display:flex; gap:.4rem; align-items:center}
  .selflink-row input{
    font:inherit; font-size:.88rem; padding:.5rem .7rem; border-radius:10px; border:1px solid #D0D5DD;
    background:#fff; color:var(--ink-3); width:240px;
  }

  /* ---------- panel + filters ---------- */
  .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:1.6rem}
  .panel-head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line)}
  .panel-head h2{font-size:1.05rem; letter-spacing:-.01em}
  .panel-body{padding:1.25rem}
  .tabs{display:flex; gap:.25rem; flex-wrap:wrap}
  .tab{
    font:inherit; font-weight:600; font-size:.92rem; color:var(--ink-3); background:none; border:none;
    padding:.5rem .9rem; border-radius:999px; cursor:pointer; text-decoration:none;
    transition:background .18s var(--ease), color .18s var(--ease);
  }
  .tab:hover{background:var(--grey-soft); color:var(--ink)}
  .tab[aria-current="page"]{background:var(--primary-soft); color:var(--primary-strong)}
  .tab .count{font-weight:700; opacity:.65; margin-left:.3rem; font-size:.85rem}
  .search{margin-left:auto; position:relative}
  .search svg{position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--ink-3)}
  .search input{
    font:inherit; padding:.55rem .9rem .55rem 2.4rem; border-radius:10px; border:1px solid #D0D5DD;
    width:280px; max-width:100%; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), width .25s var(--ease);
  }
  .search input:hover{border-color:#B8BFC9}
  .search input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}

  /* ---------- table ---------- */
  .table-wrap{overflow-x:auto}
  table{width:100%; border-collapse:collapse; font-size:.9rem}
  table.wide{min-width:1040px}
  caption{position:absolute; left:-9999px}
  thead th{
    text-align:left; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
    background:var(--grey-soft); padding:.7rem .55rem; border-bottom:1px solid var(--line); white-space:nowrap;
  }
  thead th:first-child, tbody td:first-child{padding-left:1.1rem}
  thead th:last-child, tbody td:last-child{padding-right:1.1rem}
  tbody td{padding:.85rem .55rem; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap}
  tbody tr{transition:background .15s var(--ease)}
  tbody tr:hover{background:#FAFBFF}
  tbody tr:last-child td{border-bottom:none}
  .ref-name{font-weight:600}
  .ref-sub{color:var(--ink-3); font-size:.84rem}
  .mono{font-variant-numeric:tabular-nums; color:var(--ink-2)}
  .empty-row td{text-align:center; color:var(--ink-3); padding:2.2rem .55rem}

  .badge{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700; padding:.22rem .7rem; border-radius:999px}
  .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
  .badge-teal{background:var(--teal-soft); color:#0A6E63}
  .badge-indigo{background:var(--primary-soft); color:var(--primary-strong)}
  .badge-amber{background:var(--amber-soft); color:var(--amber)}
  .badge-red{background:var(--red-soft); color:var(--red)}
  .badge-grey{background:var(--grey-soft); color:var(--ink-3)}

  /* Hover/focus explanation, e.g. on status badges. */
  .tip{position:relative; display:inline-block; cursor:help}
  .tip .badge{text-decoration:underline dotted; text-underline-offset:3px}
  .tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after{
    content:attr(data-tip); position:absolute; left:0; top:calc(100% + 5px); z-index:60;
    background:var(--card); color:var(--ink-2); border:1px solid var(--line); border-radius:10px;
    padding:.45rem .65rem; font-size:.78rem; font-weight:500; line-height:1.45;
    white-space:normal; width:max-content; max-width:300px; box-shadow:var(--shadow-md);
  }

  /* progress bar (wireframes 9/13/14) */
  .progress{display:flex; align-items:center; gap:.55rem; min-width:130px}
  .progress .bar{flex:1; height:8px; border-radius:999px; background:var(--grey-soft); overflow:hidden}
  .progress .bar span{display:block; height:100%; border-radius:999px; background:var(--teal); transition:width .3s var(--ease)}
  .progress .pct{font-size:.82rem; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums}

  .panel-foot{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem 1.25rem; border-top:1px solid var(--line)}
  .pagination{margin-left:auto; display:flex; align-items:center; gap:.3rem; color:var(--ink-3); font-size:.9rem}
  .page-btn{
    display:inline-grid; place-items:center; font:inherit; font-weight:600; min-width:34px; height:34px; border-radius:8px;
    border:1px solid transparent; background:none; color:var(--ink-2); cursor:pointer; text-decoration:none;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }
  .page-btn:hover{background:var(--grey-soft)}
  .page-btn[aria-current="page"]{background:var(--primary-soft); color:var(--primary-strong); border-color:transparent}
  .page-btn.disabled{opacity:.4; pointer-events:none}

  /* ---------- forms ---------- */
  .form-section{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.4rem; margin-bottom:1.4rem}
  .form-section > h2{font-size:1.05rem; letter-spacing:-.01em; margin-bottom:.35rem}
  .form-section > .sub{color:var(--ink-3); font-size:.9rem; margin-bottom:1rem}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem}
  @media (max-width:760px){ .form-grid{grid-template-columns:1fr} }
  .field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
  .field .hint{color:var(--ink-3); font-size:.82rem; margin-top:.3rem}
  .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date], .field input[type=number],
  .field input[type=password], .field input[type=file], .field select, .field textarea{
    font:inherit; width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid #D0D5DD; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .field textarea{min-height:7.5rem; resize:vertical}
  .field input:hover, .field select:hover, .field textarea:hover{border-color:#B8BFC9}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .field input[readonly]{background:var(--grey-soft); color:var(--ink-3)}
  .field .error{color:var(--red); font-size:.84rem; font-weight:600; margin-top:.3rem}
  .form-actions{display:flex; justify-content:flex-end; gap:.6rem; margin-bottom:1.4rem}

  /* toggle switch (wireframe teal) */
  .toggle{display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; font-weight:600; font-size:.9rem}
  .toggle input{position:absolute; width:1px; height:1px; opacity:0}
  .toggle .track{
    width:40px; height:22px; border-radius:999px; background:#D0D5DD; position:relative; flex:none;
    transition:background .18s var(--ease);
  }
  .toggle .track::after{
    content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff;
    box-shadow:var(--shadow-sm); transition:transform .18s var(--ease);
  }
  .toggle input:checked + .track{background:var(--teal)}
  .toggle input:checked + .track::after{transform:translateX(18px)}
  .toggle input:focus-visible + .track{outline:3px solid var(--focus); outline-offset:2px}

  /* notice blocks inside forms (wireframe 10 warnings) */
  .notice{border-radius:10px; padding:.85rem 1rem; font-size:.9rem; font-weight:500; border:1px solid; margin:.8rem 0}
  .notice-warning{background:var(--amber-soft); border-color:#FEC84B; color:var(--amber)}
  .notice-error{background:var(--red-soft); border-color:#FDA29B; color:var(--red)}
  .notice-info{background:var(--primary-soft); border-color:#C7D2FE; color:var(--primary-strong)}

  /* repeatable hub referral blocks (wireframe 10) + referral cards (wireframe 14) */
  .item-card{border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; margin-bottom:1rem; background:var(--card)}
  .item-card .item-head{display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem}
  .item-card .item-head h3{font-size:.98rem}
  .item-card .item-head .spacer{margin-left:auto; display:flex; gap:.5rem}
  .kv{font-size:.9rem}
  .kv > div{display:flex; gap:1rem; padding:.42rem 0; border-bottom:1px solid var(--grey-soft)}
  .kv > div:last-child{border-bottom:none}
  .kv dt{flex:none; width:170px; color:var(--ink-3); font-weight:600}
  .kv dd{margin:0; min-width:0; overflow-wrap:anywhere; white-space:normal}
  .card-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem}

  /* detail page two-column layout (wireframe 14) */
  .detail-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.4rem; align-items:start}
  @media (max-width:1000px){ .detail-grid{grid-template-columns:1fr} }
  .side-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.2rem; margin-bottom:1.4rem}
  .side-panel h2{font-size:1rem; margin-bottom:.8rem}
  .side-panel table{font-size:.84rem}
  .side-panel td, .side-panel th{padding:.5rem .4rem; white-space:normal}

  /* bulk upload steps (wireframe 11) */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.4rem}
  @media (max-width:900px){ .steps{grid-template-columns:1fr} }
  .step-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.2rem}
  .step-card h2{font-size:1rem; margin-bottom:.4rem}
  .step-card .sub{color:var(--ink-3); font-size:.9rem; margin-bottom:.9rem}

  footer{border-top:1px solid var(--line); background:var(--card); margin-top:3rem}
  .footer-inner{max-width:var(--page-max); margin:0 auto; padding:1.4rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--ink-3); font-size:.9rem}
  .footer-links{display:flex; gap:1.4rem}
  .footer-links a{color:var(--ink-3); text-decoration:none; font-weight:500; transition:color .18s var(--ease)}
  .footer-links a:hover{color:var(--ink)}

  .rise{opacity:0; transform:translateY(12px); animation:rise .55s var(--ease) forwards}
  .rise.d1{animation-delay:.07s} .rise.d2{animation-delay:.14s}

/* ----- bulk upload review (page: bulk-review body class) ----- */
/* This screen carries the most columns in the portal: let it use
           nearly the full display rather than the standard page cap. */
        

        .review-table{width:100%}
        .review-table thead th, .review-table tbody td{padding:.5rem .3rem}
        .review-table thead th:first-child, .review-table tbody td:first-child{padding-left:1rem}
        .review-table thead th:last-child, .review-table tbody td:last-child{padding-right:1rem}
        .review-table tbody td{vertical-align:top}
        .review-table tbody input[type=text],
        .review-table tbody input[type=email],
        .review-table tbody input[type=tel],
        .review-table tbody input[type=date],
        .review-table tbody select{
            font:inherit; font-size:.82rem; padding:.32rem .4rem; border-radius:8px;
            border:1px solid #D0D5DD; background:#fff; width:100%; min-width:0;
            height:32px; /* one control height so the source lines align across the row */
        }
        .review-table tbody input[type=text]{min-width:5rem}
        .review-table tbody input[type=email]{min-width:8rem}
        .review-table tbody input[type=tel]{min-width:6.4rem}
        .review-table tbody input[type=date]{min-width:7.8rem}
        .review-table tbody select{min-width:5.6rem}
        .review-table tbody input:focus, .review-table tbody select:focus{
            outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(67,56,202,.14);
        }
        .review-table tbody input[type=checkbox]{width:18px; height:18px; accent-color:var(--primary); margin-top:.45rem}
        .review-table tbody input[type=checkbox]:disabled{opacity:.35; cursor:not-allowed}
        .review-table td{white-space:normal}
        .review-table .status-cell{min-width:120px}
        .row-remove{padding:.25rem .55rem; font-size:1rem; line-height:1}
        .row-created td{font-size:.85rem; color:var(--ink-2); background:#F6FEF9}
        .review-table tbody .field-error{
            border:2px solid #D92D20; background:#FEE4E2; padding:calc(.32rem - 1px) calc(.4rem - 1px);
            box-shadow:0 0 0 3px rgba(217,45,32,.28);
        }
        .review-table tbody .field-warn{
            border:2px solid #F79009; background:#FEF0C7; padding:calc(.32rem - 1px) calc(.4rem - 1px);
            box-shadow:0 0 0 3px rgba(247,144,9,.32);
        }

        /* Hub match icon: round (the square boxes are the confirm
           checkboxes), sits with the uploaded hub value. */
        .hub-source-row{display:flex; align-items:center; gap:.35rem; margin-top:.3rem}
        .hub-source-row .cell-source{margin-top:0; flex:1; min-width:0}
        .hub-match{
            flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
            font-size:.68rem; font-weight:700; color:#fff; cursor:help;
        }
        .hub-match-exact{background:var(--teal)}
        .hub-match-fuzzy{background:#DC6803}
        .hub-match-none{background:var(--red)}

        /* The value as uploaded: one line, fade + ellipsis when long,
           full value pops over everything on hover or focus. */
        .source-label, .cell-source{
            display:block; margin-top:.3rem; font-size:.74rem; line-height:1.35;
            color:#98A2B3; font-style:italic;
        }
        .cell-source{
            position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
        }
        .cell-source::before{
            content:""; position:absolute; right:0; top:0; bottom:0; width:16px;
            background:linear-gradient(90deg, transparent, var(--card)); pointer-events:none;
        }
        .cell-source:hover::after, .cell-source:focus-visible::after{
            content:attr(data-full); position:absolute; left:0; top:calc(100% + 4px); z-index:60;
            background:var(--card); color:var(--ink-2); border:1px solid var(--line); border-radius:10px;
            padding:.45rem .6rem; font-size:.78rem; font-style:normal; line-height:1.45;
            white-space:normal; width:max-content; max-width:320px; box-shadow:var(--shadow-md);
        }

        /* Review notes pop from the status badge. The badge row shares the
           control height so "Uploaded values:" aligns with the grey values. */
        .status-cell .badge-wrap{position:relative; display:flex; align-items:center; min-height:32px}
        .status-cell .badge-wrap[data-notes]{cursor:help}
        .status-cell .badge-wrap[data-notes] .badge{text-decoration:underline dotted; text-underline-offset:3px}
        .status-cell .badge-wrap[data-notes]:hover::after, .status-cell .badge-wrap[data-notes]:focus-visible::after{
            content:attr(data-notes); position:absolute; left:0; top:calc(100% + 5px); z-index:60;
            background:var(--card); color:var(--ink-2); border:1px solid var(--line); border-radius:10px;
            padding:.45rem .65rem; font-size:.78rem; font-weight:500; line-height:1.45;
            white-space:normal; width:max-content; max-width:300px; box-shadow:var(--shadow-md);
        }
&.bulk-review{--page-max:min(97vw, 1900px)}
}

/* ==================== layout-learner ==================== */
body.layout-learner {
  --radius:16px;
  --shadow-lg:0 16px 40px -12px rgba(16,24,40,.2);
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55; font-size:16px;
    -webkit-font-smoothing:antialiased;
  }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; z-index:100; font-weight:600}
  .skip-link:focus{left:0}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

  header{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
  .header-inner{max-width:1120px; margin:0 auto; padding:.9rem 1.5rem; display:flex; align-items:center; gap:1rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
  .brand-mark{
    width:38px; height:38px; border-radius:11px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  .header-actions{margin-left:auto; display:flex; align-items:center; gap:.4rem}
  .header-link{text-decoration:none; color:var(--ink-2); font-weight:500; padding:.45rem .8rem; border-radius:8px; transition:background .18s var(--ease), color .18s var(--ease)}
  .header-link:hover{background:var(--bg); color:var(--ink)}
  .pill-btn{
    display:flex; align-items:center; gap:.45rem; border:1px solid var(--line); background:var(--card);
    border-radius:8px; padding:.45rem .8rem; font:inherit; font-weight:500; color:var(--ink-2); cursor:pointer;
    text-decoration:none;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .pill-btn:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}

  .lang-menu{position:relative}
  .lang-menu summary{
    list-style:none; display:flex; align-items:center; gap:.45rem; cursor:pointer;
    border:1px solid var(--line); background:var(--card); border-radius:8px;
    padding:.45rem .8rem; font-weight:500; color:var(--ink-2);
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .lang-menu summary::-webkit-details-marker{display:none}
  .lang-menu summary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}
  .lang-menu summary .chev{transition:transform .2s var(--ease)}
  .lang-menu[open] summary .chev{transform:rotate(180deg)}
  .lang-menu[open] summary{border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.12)}
  .lang-panel{
    position:absolute; right:0; top:calc(100% + 8px); min-width:230px; z-index:60;
    background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
    padding:.45rem; animation:pop .18s var(--ease);
  }
  
  .lang-panel .hint{font-size:.78rem; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; padding:.45rem .65rem .25rem}
  .lang-panel a{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.55rem .65rem; border-radius:8px; text-decoration:none; color:var(--ink-2); font-weight:500;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .lang-panel a:hover{background:var(--primary-soft); color:var(--primary-strong)}
  .lang-panel a .native{color:var(--ink-3); font-size:.85rem; font-weight:400}
  .lang-panel a[aria-current="true"]{background:var(--primary-soft); color:var(--primary-strong); font-weight:700}
  .lang-panel a[aria-current="true"]::after{content:"\2713"; font-weight:700}

  .nav-toggle{position:absolute; width:1px; height:1px; opacity:0}
  .burger{
    display:none; margin-left:auto; width:44px; height:40px; border:1px solid var(--line); border-radius:10px;
    background:var(--card); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-2); transition:transform .25s var(--ease), opacity .2s var(--ease)}
  #menutoggle:checked ~ header .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  #menutoggle:checked ~ header .burger span:nth-child(2){opacity:0}
  #menutoggle:checked ~ header .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  #menutoggle:focus-visible ~ header .burger{outline:3px solid var(--focus); outline-offset:2px}
  @media (max-width:640px){
    .burger{display:flex; order:2}
    .header-inner{flex-wrap:wrap}
    .header-actions{display:none; width:100%; flex-direction:column; align-items:stretch; gap:.4rem; padding:.65rem 0 .35rem; margin-left:0; order:3}
    #menutoggle:checked ~ header .header-actions{display:flex}
    .header-link{padding:.6rem .4rem; border-radius:8px}
    .lang-menu summary{justify-content:space-between; width:100%}
    .lang-panel{position:static; min-width:0; box-shadow:none; border:none; border-left:3px solid var(--primary-soft); border-radius:0; margin:.3rem 0 0 .4rem; animation:none}
  }
  .page{max-width:1120px; margin:0 auto; padding:2.5rem 1.5rem 3.5rem}
  .greeting{margin-bottom:2rem}
  .greeting h1{font-size:1.8rem; letter-spacing:-.02em}
  .greeting p{color:var(--ink-3); margin-top:.3rem; max-width:64ch}

  .flash{display:flex; align-items:center; gap:.6rem; border-radius:12px; padding:.85rem 1.1rem; margin-bottom:1.4rem; font-weight:600; border:1px solid}
  .flash-success{background:var(--teal-soft); color:#0A6E63; border-color:#99E3D8}
  .flash-error{background:var(--red-soft); color:var(--red); border-color:#FDA29B}

  .cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1.4rem}

  .course-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; display:flex; flex-direction:column; position:relative;
    transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  }
  .course-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#D6DAE1}

  .card-banner{height:118px; position:relative; display:flex; align-items:flex-end; padding:1rem}
  .card-banner.indigo{background:linear-gradient(120deg,#4338CA 0%,#7C3AED 90%)}
  .card-banner.teal{background:linear-gradient(120deg,#0E9384 0%,#0891B2 90%)}
  .card-banner.slate{background:linear-gradient(120deg,#334155 0%,#64748B 90%)}
  .card-banner::after{
    content:""; position:absolute; inset:0; opacity:.18;
    background:radial-gradient(120px 120px at 85% 15%, #fff 0%, transparent 70%),
               radial-gradient(90px 90px at 15% 90%, #fff 0%, transparent 65%);
  }
  .banner-chip{
    position:relative; z-index:1; background:rgba(255,255,255,.92); color:var(--ink);
    font-size:.78rem; font-weight:700; padding:.25rem .7rem; border-radius:999px;
  }

  .card-body{padding:1.25rem 1.35rem 1.35rem; display:flex; flex-direction:column; flex:1; gap:.9rem}
  .card-title-row{display:flex; align-items:flex-start; gap:.6rem}
  .card-title{font-size:1.12rem; font-weight:700; letter-spacing:-.01em; line-height:1.3}

  .meta{display:grid; gap:.35rem; font-size:.92rem}
  .meta div{display:flex; justify-content:space-between; gap:1rem}
  .meta dt{color:var(--ink-3)}
  .meta dd{font-weight:600; text-align:right}
  .meta .warn dd{color:var(--red)}

  .progress-block{margin-top:auto}
  .progress-row{display:flex; justify-content:space-between; font-size:.85rem; font-weight:600; color:var(--ink-3); margin-bottom:.4rem}
  .bar{height:8px; background:var(--grey-soft); border-radius:99px; overflow:hidden}
  .fill{height:100%; border-radius:99px; background:var(--primary); transform-origin:left; animation:grow .9s var(--ease) backwards .2s}
  .fill.done{background:var(--teal)}
  .fill.zero{background:transparent}
  

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font:inherit; font-weight:600;
    border:none; cursor:pointer; text-decoration:none; border-radius:10px; padding:.75rem 1.2rem;
    transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .btn-block{width:100%}
  .btn:active{transform:translateY(1px)}
  .btn svg{transition:transform .2s var(--ease)}
  .btn-primary{background:var(--primary); color:#fff}
  .btn-primary:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.5); transform:translateY(-1px)}
  .btn-primary:hover svg{transform:translateX(3px)}
  .btn-primary[aria-disabled="true"]{background:#A5B4FC; cursor:not-allowed; box-shadow:none; transform:none}
  .btn-teal{background:var(--teal); color:#fff}
  .btn-teal:hover{background:var(--teal-strong); box-shadow:0 6px 16px -6px rgba(14,147,132,.5); transform:translateY(-1px)}
  .btn-amber{background:#FDB022; color:#7A2E0E}
  .btn-amber:hover{background:#F79009; box-shadow:0 6px 16px -6px rgba(247,144,9,.5); transform:translateY(-1px)}
  .btn-secondary{background:var(--card); color:var(--ink); border:1px solid var(--line)}
  .btn-secondary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}

  .status-note{display:flex; gap:.5rem; align-items:flex-start; font-size:.88rem; color:var(--ink-3); background:var(--grey-soft); border-radius:10px; padding:.7rem .85rem}
  .status-note.warn{background:var(--amber-soft); color:#7A2E0E}
  .status-note svg{flex:none; margin-top:.15rem}

  .help-band{
    margin-top:2.5rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.5rem 1.75rem; display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center;
  }
  .help-band h2{font-size:1.1rem; letter-spacing:-.01em}
  .help-band p{color:var(--ink-3); font-size:.95rem; max-width:56ch}
  .help-band .pill-btn{margin-left:auto}

  /* ---------- hub journey pages (wireframes 32, 51, 52, 4, 6) ---------- */
  .journey-head{display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-start; margin-bottom:1.6rem}
  .journey-head .titles{min-width:260px; flex:1}
  .back-link{display:inline-flex; align-items:center; gap:.4rem; color:var(--primary); text-decoration:none; font-weight:600; font-size:.92rem; margin-bottom:.5rem}
  .back-link:hover{text-decoration:underline}
  .journey-head h1{font-size:1.6rem; letter-spacing:-.02em}
  .journey-head .sub{color:var(--ink-3); margin-top:.2rem; max-width:60ch}
  .referral-box{
    background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm);
    padding:.9rem 1.1rem; display:grid; gap:.25rem; font-size:.9rem; min-width:280px;
  }
  .referral-box div{display:flex; justify-content:space-between; gap:1.2rem}
  .referral-box dt{color:var(--ink-3)}
  .referral-box dd{font-weight:600; text-align:right}

  .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.6rem}
  .declaration-text{white-space:pre-line; color:var(--ink-2); margin-bottom:1.4rem}
  .confirm-row{display:flex; align-items:flex-start; gap:.7rem; background:var(--grey-soft); border-radius:12px; padding:1rem 1.1rem; margin-bottom:1.4rem}
  .confirm-row input[type=checkbox]{width:19px; height:19px; accent-color:var(--primary); margin-top:.15rem; cursor:pointer}
  .confirm-row label{font-weight:600; cursor:pointer}
  .panel .error{color:var(--red); font-weight:600; font-size:.9rem; margin-bottom:1rem}
  .panel-actions{display:flex; justify-content:flex-end; gap:.7rem}

  /* Likert (wireframes 51/52) */
  .likert-item{border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.2rem; margin-bottom:1rem; background:var(--card)}
  .likert-item .q{font-weight:600; margin-bottom:.85rem}
  .likert-options{display:flex; flex-wrap:wrap; gap:.55rem}
  .likert-options label{
    display:inline-flex; align-items:center; gap:.45rem; border:1px solid #D0D5DD; border-radius:999px;
    padding:.5rem 1rem; font-weight:600; font-size:.9rem; color:var(--ink-2); cursor:pointer; background:var(--card);
    transition:border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
  }
  .likert-options label:hover{border-color:var(--primary)}
  .likert-options input{accent-color:var(--teal); cursor:pointer}
  .likert-options label:has(input:checked){background:var(--teal); border-color:var(--teal); color:#fff}
  .likert-options label:has(input:checked) input{accent-color:#fff}

  /* Course player (wireframe 4) */
  .course-frame-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden}
  .course-frame{display:block; width:100%; height:min(78vh, 860px); border:0; background:#fff}
  .save-indicator{font-size:.85rem; color:var(--ink-3); padding:.6rem 1rem; border-top:1px solid var(--line); display:flex; gap:.5rem; align-items:center}
  .save-indicator .dot{width:8px; height:8px; border-radius:50%; background:#12B76A; flex:none}
  .save-indicator.saving .dot{background:#F79009}
  .save-indicator.error .dot{background:var(--red)}

  /* Completion (wireframe 6) */
  .certificate{
    text-align:center; padding:2.6rem 1.6rem; border:1px solid var(--line); border-radius:var(--radius);
    background:linear-gradient(180deg, #FFFFFF 0%, #F5F7FF 100%); box-shadow:var(--shadow-sm);
  }
  .certificate .badge-ring{
    width:74px; height:74px; margin:0 auto 1.1rem; border-radius:50%; background:var(--teal-soft);
    display:grid; place-items:center; color:var(--teal-strong);
  }
  .certificate h1{font-size:1.7rem; letter-spacing:-.02em; margin-bottom:.4rem}
  .certificate p{color:var(--ink-3); max-width:54ch; margin:0 auto .4rem}
  .certificate .cert-meta{margin:1.2rem auto; display:inline-grid; gap:.3rem; text-align:left; font-size:.95rem}
  .certificate .cert-meta div{display:flex; gap:1.6rem; justify-content:space-between}
  .certificate .cert-meta dt{color:var(--ink-3)}
  .certificate .cert-meta dd{font-weight:700}
  .certificate .actions{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.2rem}

  footer{border-top:1px solid var(--line); background:var(--card); margin-top:3rem}
  .footer-inner{max-width:1120px; margin:0 auto; padding:1.4rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--ink-3); font-size:.9rem}
  .footer-links{display:flex; gap:1.4rem}
  .footer-links a{color:var(--ink-3); text-decoration:none; font-weight:500; transition:color .18s var(--ease)}
  .footer-links a:hover{color:var(--ink)}

  .rise{opacity:0; transform:translateY(14px); animation:rise .55s var(--ease) forwards}
  .rise.d1{animation-delay:.08s} .rise.d2{animation-delay:.16s} .rise.d3{animation-delay:.24s}

/* ----- my account (wireframe 5) ----- */
.account-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.4rem; align-items:start}
    @media (max-width:860px){ .account-grid{grid-template-columns:1fr} }
    .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.3rem}
    @media (max-width:640px){ .form-grid{grid-template-columns:1fr} }
    .field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
    .field input, .field select{
        font:inherit; width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid #D0D5DD; background:#fff;
    }
    .field input:focus, .field select:focus{outline:none; border-color:var(--primary, #4338CA); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
    .field input[readonly]{background:#F2F4F7; color:#475467}
    .field .error{color:#B42318; font-size:.84rem; font-weight:600; margin-top:.3rem}
    .field .hint{color:#475467; font-size:.82rem; margin-top:.3rem}
    .dei-box{background:#F2F4F7; border-radius:12px; padding:1.1rem; margin-top:1.2rem}
    .dei-box h3{font-size:.95rem; margin-bottom:.2rem}
    .dei-box .sub{color:#475467; font-size:.82rem; margin-bottom:.9rem}
    .retention p{color:#475467; font-size:.88rem; margin-bottom:.8rem}
    .retention table{width:100%; border-collapse:collapse; font-size:.88rem}
    .retention td{padding:.45rem .3rem; border-bottom:1px solid #E4E7EC}
}

/* ==================== layout-public ==================== */
body.layout-public {
  --page-max:880px;
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55; font-size:15.5px;
    -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;
  }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; z-index:100; font-weight:600}
  .skip-link:focus{left:0}
  a{color:var(--primary)}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

  .topbar{background:var(--card); border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:var(--page-max); margin:0 auto; padding:.8rem 1.5rem; display:flex; align-items:center; gap:1rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
  .brand-mark{
    width:38px; height:38px; border-radius:11px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  .topbar .help{margin-left:auto; font-weight:600; color:var(--ink-2); text-decoration:none}
  .topbar .help:hover{color:var(--ink)}

  .page{max-width:var(--page-max); width:100%; margin:0 auto; padding:2rem 1.5rem 3rem; flex:1}

  /* hero (client-branded intro) */
  .hero{display:flex; gap:1.4rem; align-items:flex-start; margin-bottom:1.8rem}
  .hero .crest{
    flex:none; width:96px; height:96px; border-radius:var(--radius); background:var(--primary-soft);
    display:grid; place-items:center; color:var(--primary-strong); font-size:2rem; font-weight:700;
  }
  .hero h1{font-size:1.5rem; letter-spacing:-.02em; margin-bottom:.35rem}
  .hero p{color:var(--ink-3); max-width:56ch}

  .flash{border-radius:var(--radius); padding:.85rem 1.1rem; margin-bottom:1.4rem; font-weight:600; border:1px solid}
  .flash-success{background:var(--teal-soft); color:#0A6E63; border-color:#99E3D8}
  .flash-error{background:var(--red-soft); color:var(--red); border-color:#FDA29B}

  .form-section{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.5rem; margin-bottom:1.4rem}
  .form-section > h2{font-size:1.05rem; letter-spacing:-.01em; margin-bottom:1rem}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem}
  @media (max-width:700px){ .form-grid{grid-template-columns:1fr} }
  .field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
  .field .hint{color:var(--ink-3); font-size:.82rem; margin-top:.3rem}
  .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password],
  .field input[type=date], .field select{
    font:inherit; width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid #D0D5DD; background:#fff;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .field input:hover, .field select:hover{border-color:#B8BFC9}
  .field input:focus, .field select:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .field .error{color:var(--red); font-size:.84rem; font-weight:600; margin-top:.3rem}

  .dei{background:var(--grey-soft); border-radius:var(--radius); padding:1.1rem}
  .dei h3{font-size:.95rem; margin-bottom:.2rem}
  .dei .sub{color:var(--ink-3); font-size:.82rem; margin-bottom:.9rem}
  .dei .form-grid{gap:.8rem 1.2rem}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font:inherit; font-weight:600; cursor:pointer;
    border-radius:10px; padding:.65rem 1.3rem; border:none; text-decoration:none;
    transition:background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
  }
  .btn-primary{background:var(--primary); color:#fff}
  .btn-primary:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.45); transform:translateY(-1px)}
  .btn-secondary{background:var(--card); color:var(--ink); border:1px solid var(--line)}
  .btn-secondary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}

  .check{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem}
  .check input{width:18px; height:18px; margin-top:.15rem; accent-color:var(--primary); flex:none}

  /* CSS-only modal via :target (URN explainer, wireframe 49) */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(16,24,40,.55); z-index:90;
    display:none; align-items:flex-start; justify-content:center; padding:3rem 1rem; overflow-y:auto;
  }
  .modal-overlay:target{display:flex}
  .modal{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-md); max-width:560px; width:100%; padding:1.6rem}
  .modal h2{font-size:1.15rem; margin-bottom:.7rem}
  .modal p{color:var(--ink-2); margin-bottom:.8rem}
  .modal .modal-actions{display:flex; justify-content:flex-end; margin-top:1rem}

  /* completion steps (wireframe 50) */
  .steps-list{display:flex; flex-direction:column; gap:1rem; margin:1.6rem 0}
  .step-row{display:flex; align-items:center; gap:1rem}
  .step-row .step-no{flex:none; width:64px; font-weight:700; color:var(--ink-2)}
  .step-row .step-body{
    flex:1; border-radius:10px; border:1.5px solid; padding:.8rem 1rem; font-weight:600; display:flex; align-items:center; gap:.6rem;
  }
  .step-done{background:var(--teal-soft); border-color:#99E3D8; color:#0A6E63}
  .step-next{background:var(--amber-soft); border-color:#FEC84B; color:var(--amber)}

  footer{border-top:1px solid var(--line); background:var(--card)}
  .footer-inner{max-width:var(--page-max); margin:0 auto; padding:1.4rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--ink-3); font-size:.9rem}
  .footer-links{display:flex; gap:1.4rem}
  .footer-links a{color:var(--ink-3); text-decoration:none; font-weight:500}
  .footer-links a:hover{color:var(--ink)}

  .rise{opacity:0; transform:translateY(12px); animation:rise .55s var(--ease) forwards}
  .rise.d1{animation-delay:.07s}
  
  

  /* honeypot: invisible to people, present for bots */
  .leave-blank{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
}

/* ==================== layout-home ==================== */
body.layout-home {
  --radius:16px;
  --amber:#F79009;
  &{
  font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; font-size:16px;
  -webkit-font-smoothing:antialiased;
  }
  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0; z-index:100; font-weight:600}
  .skip-link:focus{left:0}
  a{color:var(--primary)}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}

  header{background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
  .header-inner{max-width:1160px; margin:0 auto; padding:.85rem 1.5rem; display:flex; align-items:center; gap:1rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink)}
  .brand-mark{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:.95rem;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  .header-actions{margin-left:auto; display:flex; align-items:center; gap:.5rem}
  .header-link{text-decoration:none; color:var(--ink-2); font-weight:500; padding:.45rem .8rem; border-radius:8px; transition:background .18s var(--ease), color .18s var(--ease)}
  .header-link:hover{background:var(--primary-soft); color:var(--primary-strong)}

  .lang-menu{position:relative}
  .lang-menu summary{
  list-style:none; display:flex; align-items:center; gap:.45rem; cursor:pointer;
  border:1px solid var(--line); background:var(--card); border-radius:8px;
  padding:.45rem .8rem; font-weight:500; color:var(--ink-2);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .lang-menu summary::-webkit-details-marker{display:none}
  .lang-menu summary:hover{border-color:#C7CCD4; box-shadow:var(--shadow-sm)}
  .lang-menu summary .chev{transition:transform .2s var(--ease)}
  .lang-menu[open] summary .chev{transform:rotate(180deg)}
  .lang-menu[open] summary{border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.12)}
  .lang-panel{
  position:absolute; right:0; top:calc(100% + 8px); min-width:230px; z-index:60;
  background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:.45rem; animation:pop .18s var(--ease);
  }
  
  .lang-panel .hint{font-size:.78rem; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; padding:.45rem .65rem .25rem}
  .lang-panel a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem .65rem; border-radius:8px; text-decoration:none; color:var(--ink-2); font-weight:500;
  transition:background .15s var(--ease), color .15s var(--ease);
  }
  .lang-panel a:hover{background:var(--primary-soft); color:var(--primary-strong)}
  .lang-panel a .native{color:var(--ink-3); font-size:.85rem; font-weight:400}
  .lang-panel a[aria-current="true"]{background:var(--primary-soft); color:var(--primary-strong); font-weight:700}
  .lang-panel a[aria-current="true"]::after{content:"✓"; font-weight:700}

  .nav-toggle{position:absolute; width:1px; height:1px; opacity:0}
  .burger{
  display:none; margin-left:auto; width:44px; height:40px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink-2); transition:transform .25s var(--ease), opacity .2s var(--ease)}
  #menutoggle:checked ~ header .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  #menutoggle:checked ~ header .burger span:nth-child(2){opacity:0}
  #menutoggle:checked ~ header .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  #menutoggle:focus-visible ~ header .burger{outline:3px solid var(--focus); outline-offset:2px}
  @media (max-width:640px){
  .burger{display:flex; order:2}
  .header-inner{flex-wrap:wrap}
  .header-actions{display:none; width:100%; flex-direction:column; align-items:stretch; gap:.4rem; padding:.65rem 0 .35rem; margin-left:0; order:3}
  #menutoggle:checked ~ header .header-actions{display:flex}
  .header-link{padding:.6rem .4rem; border-radius:8px}
  .lang-menu summary{justify-content:space-between; width:100%}
  .lang-panel{position:static; min-width:0; box-shadow:none; border:none; border-left:3px solid var(--primary-soft); border-radius:0; margin:.3rem 0 0 .4rem; animation:none}
  }

  .hero-wrap{
  position:relative; overflow:hidden;
  background:
  radial-gradient(640px 420px at 8% -10%, rgba(67,56,202,.16), transparent 60%),
  radial-gradient(560px 400px at 96% 4%, rgba(221,37,144,.11), transparent 60%),
  radial-gradient(500px 380px at 60% 110%, rgba(14,147,132,.13), transparent 62%),
  linear-gradient(180deg,#FBFAFF 0%, #F6F7FE 100%);
  }
  .hero{
  max-width:1160px; margin:0 auto; padding:3.6rem 1.5rem 3.4rem;
  display:grid; grid-template-columns:1.08fr .92fr; gap:3rem; align-items:start;
  }
  @media (max-width:880px){ .hero{grid-template-columns:1fr; padding-top:2.4rem} }
  .eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--teal-soft); color:var(--teal-strong); font-weight:600; font-size:.85rem;
  padding:.35rem .85rem; border-radius:999px; margin-bottom:1.1rem; border:1px solid rgba(14,147,132,.25);
  }
  .eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--teal)}
  h1{font-size:clamp(1.9rem, 3.4vw, 2.65rem); line-height:1.12; letter-spacing:-.025em; font-weight:700; margin-bottom:1rem}
  h1 .hl{color:var(--primary)}
  .hero p.lede{color:var(--ink-3); font-size:1.07rem; max-width:46ch; margin-bottom:1.5rem}
  .hero-points{list-style:none; display:grid; gap:.6rem; margin-bottom:1.8rem}
  .hero-points li{display:flex; gap:.65rem; align-items:flex-start; color:var(--ink-2); font-weight:500}
  .tick{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; margin-top:.1rem}
  .tick.t1{background:var(--teal-soft); color:var(--teal-strong)}
  .tick.t2{background:var(--primary-soft); color:var(--primary-strong)}
  .tick.t3{background:var(--pink-soft); color:var(--pink)}

  .img-slot{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid rgba(16,24,40,.07)}
  .img-slot .tag{
  position:absolute; bottom:10px; right:10px; z-index:2;
  background:rgba(16,24,40,.55); color:#fff; font-size:.7rem; font-weight:600;
  padding:.2rem .55rem; border-radius:999px; letter-spacing:.03em;
  }
  .img-slot svg{display:block; width:100%; height:auto}

  .login-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem; box-shadow:var(--shadow-lg); max-width:430px; width:100%; justify-self:end;
  border-top:4px solid var(--primary);
  }
  @media (max-width:880px){ .login-card{justify-self:stretch; max-width:none} }
  .login-card h2{font-size:1.3rem; letter-spacing:-.01em; margin-bottom:.35rem}
  .login-card .sub{color:var(--ink-3); font-size:.95rem; margin-bottom:1.35rem}
  .field{margin-bottom:1.05rem}
  .field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem}
  .field input{
  width:100%; font:inherit; padding:.7rem .85rem; border-radius:10px;
  border:1px solid #D0D5DD; background:#fff; color:var(--ink);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .field input:hover{border-color:#B8BFC9}
  .field input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .field .error{color:#B42318; font-size:.88rem; font-weight:600; margin-top:.4rem}
  .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:600; border:none; cursor:pointer; text-decoration:none;
  border-radius:10px; padding:.78rem 1.4rem;
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--primary); color:#fff; width:100%}
  .btn-primary:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.5); transform:translateY(-1px)}
  .btn-light{background:#fff; color:var(--indigo-deep)}
  .btn-light:hover{background:#EEF2FF; transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
  .btn-teal{background:var(--teal); color:#fff}
  .btn-teal:hover{background:var(--teal-strong); transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(14,147,132,.5)}
  .forgot{display:block; text-align:center; margin-top:1rem; font-size:.92rem; font-weight:500}

  .band-client{
  background:linear-gradient(115deg, var(--indigo-deep) 0%, #4338CA 55%, #6D28D9 100%);
  color:#fff; position:relative; overflow:hidden;
  }
  .band-client::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(420px 280px at 90% -20%, rgba(221,37,144,.35), transparent 65%),
  radial-gradient(380px 300px at -5% 120%, rgba(14,147,132,.3), transparent 60%);
  }
  .band-client-inner{
  max-width:1160px; margin:0 auto; padding:3.4rem 1.5rem; position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center;
  }
  @media (max-width:820px){ .band-client-inner{grid-template-columns:1fr} }
  .band-client h2{font-size:1.55rem; letter-spacing:-.015em; margin-bottom:.6rem}
  .band-client p{color:#DDD9FF; max-width:56ch; margin-bottom:1.5rem}
  .band-client .img-slot{border-color:rgba(255,255,255,.18); box-shadow:0 20px 50px -16px rgba(0,0,0,.45)}

  .band-contact{background:linear-gradient(180deg,#F0FDFA 0%, #ECFEF8 100%); border-top:1px solid #CCFBEF}
  .band-contact-inner{
  max-width:1160px; margin:0 auto; padding:3rem 1.5rem;
  display:grid; grid-template-columns:1fr auto; gap:2.5rem; align-items:center;
  }
  @media (max-width:760px){ .band-contact-inner{grid-template-columns:1fr} }
  .band-contact h2{font-size:1.45rem; letter-spacing:-.015em; margin-bottom:.5rem}
  .band-contact p{color:var(--ink-3); max-width:60ch}

  footer{background:#0F172A; color:#94A3B8}
  .footer-inner{
  max-width:1160px; margin:0 auto; padding:1.8rem 1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; font-size:.92rem;
  }
  .footer-links{display:flex; gap:1.4rem}
  .footer-links a{color:#94A3B8; text-decoration:none; font-weight:500; transition:color .18s var(--ease)}
  .footer-links a:hover{color:#fff}

  .rise{opacity:0; transform:translateY(14px); animation:rise .6s var(--ease) forwards}
  .rise.d1{animation-delay:.08s} .rise.d2{animation-delay:.16s} .rise.d3{animation-delay:.24s}
  
  .float{animation:float 7s ease-in-out infinite}
}

/* ==================== layout-client-login ==================== */
body.layout-client-login {
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55; font-size:15.5px;
    min-height:100vh; display:grid; place-items:center; padding:1.5rem;
    -webkit-font-smoothing:antialiased;
  }
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-md); width:100%; max-width:420px; padding:2.2rem;
  }
  .brand{display:flex; align-items:center; gap:.65rem; margin-bottom:1.6rem}
  .brand-mark{
    width:42px; height:42px; border-radius:12px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700;
  }
  .brand-mark span{background:rgba(16,24,40,.25); width:33px; height:33px; border-radius:9px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em}
  h1{font-size:1.3rem; letter-spacing:-.02em; margin-bottom:.3rem}
  .sub{color:var(--ink-3); font-size:.92rem; margin-bottom:1.4rem}
  label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
  input{
    font:inherit; width:100%; padding:.6rem .85rem; border-radius:10px; border:1px solid #D0D5DD;
    background:#fff; margin-bottom:1rem;
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  input:hover{border-color:#B8BFC9}
  input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(67,56,202,.14)}
  .error{color:var(--red); background:var(--red-soft); border:1px solid #FDA29B; border-radius:10px; padding:.7rem .9rem; font-size:.88rem; font-weight:600; margin-bottom:1rem}
  button{
    font:inherit; font-weight:600; width:100%; cursor:pointer; border:none; border-radius:10px;
    background:var(--primary); color:#fff; padding:.7rem 1.1rem;
    transition:background .18s var(--ease), box-shadow .18s var(--ease);
  }
  button:hover{background:var(--primary-strong); box-shadow:0 6px 16px -6px rgba(67,56,202,.45)}
}



/* ==================== layout-admin-login ==================== */
/* Deliberately dark — the inverse of the client login, so staff always
   know which door they're at. Amber is the admin accent (nav underline). */
body.layout-admin-login {
  &{
    font-family:"Google Sans Flex","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#E0E7FF; line-height:1.55; font-size:15.5px;
    min-height:100vh; display:grid; place-items:center; padding:1.5rem;
    -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(640px 420px at 12% -10%, rgba(124,58,237,.35), transparent 60%),
      radial-gradient(520px 380px at 95% 110%, rgba(14,147,132,.22), transparent 62%),
      linear-gradient(135deg, #1E1B4B 0%, #312E81 55%, #3730A3 100%);
  }
  :focus-visible{outline:3px solid #FDB022; outline-offset:2px; border-radius:6px}
  .card{
    background:rgba(255,255,255,.06); border:1px solid rgba(199,210,254,.22);
    border-radius:16px; backdrop-filter:blur(12px);
    box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
    width:100%; max-width:420px; padding:2.2rem;
  }
  .brand{display:flex; align-items:center; gap:.65rem; margin-bottom:1.6rem}
  .brand-mark{
    width:42px; height:42px; border-radius:12px; flex:none;
    background:conic-gradient(from 220deg, #4338CA, #7C3AED, #DD2590, #F79009, #4338CA);
    display:grid; place-items:center; color:#fff; font-weight:700;
  }
  .brand-mark span{background:rgba(16,24,40,.35); width:33px; height:33px; border-radius:9px; display:grid; place-items:center}
  .brand-name{font-weight:700; letter-spacing:-.01em; color:#fff}
  .admin-chip{
    margin-left:auto; background:rgba(253,176,34,.16); color:#FDB022;
    border:1px solid rgba(253,176,34,.4); font-size:.72rem; font-weight:700;
    padding:.18rem .6rem; border-radius:999px; letter-spacing:.08em;
  }
  h1{font-size:1.3rem; letter-spacing:-.02em; margin-bottom:.3rem; color:#fff}
  .sub{color:#A5B4FC; font-size:.92rem; margin-bottom:1.4rem}
  label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem; color:#C7D2FE}
  input{
    font:inherit; width:100%; padding:.6rem .85rem; border-radius:10px;
    border:1px solid rgba(199,210,254,.3); background:rgba(16,24,40,.35); color:#fff;
    margin-bottom:1rem; transition:border-color .18s, box-shadow .18s;
  }
  input:hover{border-color:rgba(199,210,254,.5)}
  input:focus{outline:none; border-color:#FDB022; box-shadow:0 0 0 4px rgba(253,176,34,.18)}
  .error{
    color:#FDA29B; background:rgba(180,35,24,.25); border:1px solid rgba(253,162,155,.4);
    border-radius:10px; padding:.7rem .9rem; font-size:.88rem; font-weight:600; margin-bottom:1rem;
  }
  button{
    font:inherit; font-weight:700; width:100%; cursor:pointer; border:none; border-radius:10px;
    background:#FDB022; color:#1E1B4B; padding:.7rem 1.1rem;
    transition:background .18s, box-shadow .18s;
  }
  button:hover{background:#FEC84B; box-shadow:0 6px 18px -6px rgba(253,176,34,.5)}
}

/* ---------- completion report sheet (both portals) ---------- */
body.layout-admin, body.layout-client {
.report-sheet{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:2rem; max-width:880px}
    .report-sheet h1{font-size:1.45rem; letter-spacing:-.02em; margin-bottom:.1rem}
    .report-sheet h2{font-size:1.05rem; margin:1.6rem 0 .6rem; padding-bottom:.3rem; border-bottom:1px solid var(--line)}
    .report-sheet .strap{color:var(--ink-3); margin-bottom:1rem}
    .report-sheet .muted{color:var(--ink-3); font-size:.85rem}
    .report-sheet table.meta{width:100%; border-collapse:collapse; font-size:.92rem}
    .report-sheet table.meta td{padding:.4rem .5rem; border-bottom:1px solid var(--grey-soft)}
    .report-sheet table.meta td.label{color:var(--ink-3); font-weight:600; width:16%}
    .report-sheet .summary-block{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:.9rem 1.1rem; margin-bottom:1.1rem}
    .report-sheet table.summary{border-collapse:collapse; margin-bottom:.4rem}
    .report-sheet table.summary td{text-align:center; padding:.3rem 1.4rem .3rem 0}
    .report-sheet .big{display:block; font-size:1.4rem; font-weight:700}
    .report-sheet .small{display:block; color:var(--ink-3); font-size:.78rem}
    .report-sheet .sentence{font-weight:700; margin:.3rem 0}
    .report-sheet .up{color:#0A6E63}
    .report-sheet .down{color:var(--red)}
    .report-sheet .likert-row{margin-bottom:.9rem}
    .report-sheet .question{font-weight:600; margin-bottom:.25rem; font-size:.92rem}
    .report-sheet table.bars{width:100%; border-collapse:collapse}
    .report-sheet td.bar-label{width:9%; color:var(--ink-3); font-size:.78rem; padding:.1rem .4rem .1rem 0}
    .report-sheet td.bar-track{width:70%; background:var(--grey-soft); border-radius:5px; padding:0}
    .report-sheet td.bar-score{width:6%; text-align:center; font-weight:700}
    .report-sheet td.change-cell{width:15%; text-align:center; vertical-align:middle}
    .report-sheet .bar{height:10px; border-radius:5px; font-size:1px}
    .report-sheet .bar-pre{background:#94A3F2}
    .report-sheet .bar-post{background:var(--teal)}
    .report-sheet .change{font-weight:700; padding:.15rem .6rem; border-radius:999px; font-size:.85rem}
    .report-sheet .change-up{background:var(--teal-soft); color:#0A6E63}
    .report-sheet .change-down{background:var(--red-soft); color:var(--red)}
    .report-sheet .change-flat{background:var(--grey-soft); color:var(--ink-3)}
    .report-sheet table.interactions{width:100%; border-collapse:collapse; font-size:.88rem}
    .report-sheet table.interactions th{text-align:left; background:var(--grey-soft); padding:.5rem .6rem; border-bottom:1px solid var(--line)}
    .report-sheet table.interactions td{padding:.5rem .6rem; border-bottom:1px solid var(--grey-soft); vertical-align:top}
    .report-sheet .report-footer{margin-top:1.6rem; padding-top:.6rem; border-top:1px solid var(--line); color:var(--ink-3); font-size:.78rem}
    .report-sheet .reflection{margin-bottom:.9rem}
    .report-sheet .reflection-q{font-weight:600; margin-bottom:.25rem; font-size:.92rem}
    .report-sheet .reflection-a{margin:0; padding:.55rem .75rem; background:var(--bg); border-left:3px solid var(--teal); border-radius:0 8px 8px 0; white-space:pre-wrap}
}
/* ---------- shared portal components (admin + client) ---------- */
body.layout-admin, body.layout-client {
.tip{position:relative; display:inline-block; cursor:help}
.tip .badge{text-decoration:underline dotted; text-underline-offset:3px}
.tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after{
    content:attr(data-tip); position:absolute; left:0; top:calc(100% + 5px); z-index:60;
    background:var(--card); color:var(--ink-2); border:1px solid var(--line); border-radius:10px;
    padding:.45rem .65rem; font-size:.78rem; font-weight:500; line-height:1.45;
    white-space:normal; width:max-content; max-width:300px; box-shadow:var(--shadow-md);
  }
.progress{display:flex; align-items:center; gap:.55rem; min-width:130px}
.progress .bar{flex:1; height:8px; border-radius:999px; background:var(--grey-soft); overflow:hidden}
.progress .bar span{display:block; height:100%; border-radius:999px; background:var(--teal); transition:width .3s var(--ease)}
.progress .pct{font-size:.82rem; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums}
.detail-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.4rem; align-items:start}
.side-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.2rem; margin-bottom:1.4rem}
.side-panel h2{font-size:1rem; margin-bottom:.8rem}
.side-panel table{font-size:.84rem}
.side-panel td, .side-panel th{padding:.5rem .4rem; white-space:normal}
.kv{font-size:.9rem}
.kv > div{display:flex; gap:1rem; padding:.42rem 0; border-bottom:1px solid var(--grey-soft)}
.kv > div:last-child{border-bottom:none}
.kv dt{flex:none; width:170px; color:var(--ink-3); font-weight:600}
.kv dd{margin:0; min-width:0; overflow-wrap:anywhere; white-space:normal}
.notice{border-radius:10px; padding:.85rem 1rem; font-size:.9rem; font-weight:500; border:1px solid; margin:.8rem 0}
.notice-warning{background:var(--amber-soft); border-color:#FEC84B; color:var(--amber)}
.notice-error{background:var(--red-soft); border-color:#FDA29B; color:var(--red)}
.notice-info{background:var(--primary-soft); border-color:#C7D2FE; color:var(--primary-strong)}
.card-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem}
.selflink{display:flex; flex-direction:column; gap:.25rem}
.selflink .label{font-weight:600; font-size:.85rem; color:var(--ink-2)}
.selflink-row{display:flex; gap:.4rem; align-items:center}
.selflink-row input{
    font:inherit; font-size:.88rem; padding:.5rem .7rem; border-radius:10px; border:1px solid #D0D5DD;
    background:#fff; color:var(--ink-3); width:240px;
  }
}

/* ---------- admin masthead: dark, matching the admin login ----------
   Stuart's brief: the admin portal should be visually distinct from the
   client portal at a glance. The topbar joins the nav's dark scheme with
   the amber admin accent. Appended after the scope, so it wins. */
body.layout-admin {
  .topbar{background:linear-gradient(115deg, #1E1B4B 0%, #312E81 60%, #3730A3 100%); border-bottom:1px solid rgba(199,210,254,.16)}
  .brand{color:#fff}
  .role-chip{background:rgba(253,176,34,.16); color:#FDB022; border:1px solid rgba(253,176,34,.4)}
  .acc-name{color:#C7D2FE}
  .avatar{background:rgba(255,255,255,.16); color:#fff}
  .account .signout{color:#C7D2FE}
  .account .signout:hover{background:rgba(255,255,255,.08); border-color:rgba(199,210,254,.3)}
  .burger{background:transparent; border-color:rgba(199,210,254,.3)}
  .burger span{background:#C7D2FE}
  .mainnav{box-shadow:inset 0 1px 0 rgba(199,210,254,.12), 0 2px 10px -4px rgba(49,46,129,.4)}
}