:root{
  --navy:#1B2A4A;
  --teal:#1D9E75;
  --teal-dark:#0F6E56;
  --teal-darker:#085041;
  --teal-light:#E1F5EE;
  --amber:#EF9F27;
  --amber-dark:#854F0B;
  --amber-light:#FAEEDA;
  --coral:#D85A30;
  --coral-dark:#993C1D;
  --coral-light:#FAECE7;
  --red:#A32D2D;
  --red-light:#FCEBEB;
  --cream:#FBF8F2;
  --card:#FFFFFF;
  --ink:#2C2C2A;
  --muted:#5F5E5A;
  --border:#E4E1D6;
  /* The amber fill sits behind white text, so it has to be dark enough on its
     own: #EF9F27 gives white only 2.17:1. --amber itself is unchanged and still
     correct for tints, dots and icons. */
  --amber-fill:#A9660B;
  /* Card edges can be soft, but an input's border IS the affordance, and WCAG
     1.4.11 asks 3:1 for that. --border is 1.31:1 on white, fine for dividers. */
  --border-input:#8F8978;
  --font-head:'Sora',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* Control height. Every input, select and button that can sit beside another
     one uses these, so a row of mixed controls lines up without anyone nudging
     padding. Left alone, each element type sizes itself differently — a select
     from its intrinsic metrics, a date input from its spinner, a button from
     line-height — which is how a filter row ends up two pixels out of true. */
  --ctl-h:44px; --ctl-h-sm:40px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
}
a{color:var(--teal-dark);}
p{margin:0 0 var(--sp-3);}
p:last-child{margin-bottom:0;}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; color:var(--ink); padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border);
}
.topbar .brand{font-family:var(--font-head); font-weight:700; font-size:19px; color:var(--teal-darker); text-decoration:none; letter-spacing:-0.01em;}
.topbar nav a{color:var(--muted); text-decoration:none; margin-left:var(--sp-4); font-size:14px; font-weight:600; transition:color 150ms ease;}
.topbar nav a:hover{color:var(--teal-dark);}

.wrap{width:100%; max-width:900px; margin:0 auto; padding:var(--sp-6) var(--sp-5) 60px; box-sizing:border-box;}
.wrap.narrow{max-width:520px;}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:var(--sp-6); margin-bottom:var(--sp-5);
  box-shadow:0 1px 3px rgba(27,42,74,0.05), 0 6px 18px rgba(27,42,74,0.04);
}
.card:last-child{margin-bottom:0;}

h1{font-family:var(--font-head); font-weight:700; font-size:26px; color:var(--navy); margin:0 0 var(--sp-2); letter-spacing:-0.01em;}
h2{font-family:var(--font-head); font-weight:600; font-size:19px; margin:0 0 var(--sp-3); color:var(--navy);}
h3{font-family:var(--font-head); font-weight:600; font-size:15px; margin:0 0 var(--sp-2); color:var(--teal-dark);}
.muted{color:var(--muted); font-size:13.5px;}

.back-link{display:block; margin:0 0 var(--sp-5);}
.back-link .js-back,
a.back-link{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px 8px 12px;
  font-family:var(--font-head); font-size:13.5px; font-weight:700;
  background:var(--card); border:1.5px solid var(--border); border-radius:999px;
  color:var(--ink); text-decoration:none; cursor:pointer;
  line-height:1.2;
  transition:background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.back-link .js-back:hover,
a.back-link:hover{background:var(--teal-light); border-color:var(--teal); color:var(--teal-darker); box-shadow:0 1px 4px rgba(29,158,117,0.18);}
.back-link .js-back:active,
a.back-link:active{transform:scale(0.97);}
.back-link .js-back:focus-visible,
a.back-link:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.page-header{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-5);}
.page-header h1{margin:0;}
.page-header-title{display:flex; align-items:center; gap:var(--sp-3); min-width:0; margin-bottom:var(--sp-2);}
.page-header-title h1{margin:0;}
.page-header-title .icon-badge{margin:0; flex-shrink:0;}
.page-subtitle{margin:0 0 var(--sp-5); color:var(--muted); font-size:13.5px;}
.page-header:last-child, .page-header-title:last-child{margin-bottom:0;}

.field{margin-bottom:var(--sp-4);}
.field label{display:block; font-weight:600; font-size:13.5px; margin-bottom:var(--sp-2); font-family:var(--font-body);}
.field input, .field select, .field textarea{
  width:100%; padding:var(--sp-3); border:1px solid var(--border-input); border-radius:9px;
  font-size:14px; font-family:inherit; background:#fff; min-height:var(--ctl-h);
  box-sizing:border-box;
  transition:border-color 150ms ease, box-shadow 150ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-light);
}
.field textarea{min-height:70px; resize:vertical;}
.field .hint{font-size:12px; color:var(--muted); margin-top:var(--sp-1);}

/* Controls outside a .field — filter rows, search boxes — get the same height as
   everything else, so no page has to invent its own. */
.ctl-row{display:flex; align-items:flex-end; gap:var(--sp-4); flex-wrap:wrap;}
.ctl-field{display:flex; flex-direction:column; min-width:0;}
.ctl{height:var(--ctl-h); box-sizing:border-box; border:1.4px solid var(--border);
  border-radius:9px; background:#fff; font-family:inherit; font-size:14px; color:var(--ink);}
select.ctl{padding:0 11px;}
.ctl-box{display:flex; align-items:center; gap:8px; padding:0 11px;}
.ctl-box input{flex:1; min-width:0; border:none; padding:0; background:transparent;
  outline:none; font-family:inherit; font-size:14px; min-height:0;}
.ctl-box svg{width:16px; height:16px; flex-shrink:0; color:var(--muted);}
.ctl-label{display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:var(--ctl-h);
  box-sizing:border-box;
  padding:var(--sp-3) var(--sp-5); border-radius:11px; border:none;
  font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer; text-decoration:none;
  line-height:1.2;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-primary{
  background:linear-gradient(135deg,var(--teal-dark) 0%,var(--teal-darker) 100%);
  color:#fff;
  box-shadow:0 2px 8px rgba(15,110,86,0.30);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,110,86,0.28); background:var(--teal-hover);}
.btn-primary:active{transform:translateY(0) scale(0.97); box-shadow:0 2px 6px rgba(15,110,86,0.30);}
.btn-secondary{
  background:#fff; color:var(--teal-darker); border:1.5px solid var(--teal);
  box-shadow:0 1px 2px rgba(27,42,74,0.04);
}
.btn-secondary:hover{background:var(--teal-light); border-color:var(--teal-dark); transform:translateY(-1px);}
.btn-secondary:active{transform:translateY(0) scale(0.98);}
.btn-amber{
  background:linear-gradient(135deg,var(--amber-fill) 0%,var(--amber-dark) 100%);
  color:#fff;
  box-shadow:0 2px 8px rgba(133,79,11,0.28);
}
.btn-amber:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(133,79,11,0.24); background:var(--amber-hover);}
.btn-amber:active{transform:translateY(0) scale(0.97);}
.btn-red{
  background:#fff; color:var(--red); border:1.5px solid #F0C7C7;
}
.btn-red:hover{background:var(--red-light); border-color:var(--red); transform:translateY(-1px);}
.btn-red:active{transform:translateY(0) scale(0.98);}
.btn-sm{min-height:var(--ctl-h-sm); padding:var(--sp-2) var(--sp-3); font-size:13px; border-radius:9px;}
/* Small buttons sit at 36px for visual density on data-heavy tables. On touch
   the extra 8px matters more than the density does. */
@media (pointer:coarse){
  .btn-sm{min-height:var(--ctl-h);}
  .segmented a, .segmented button{min-height:var(--ctl-h);}
}
.btn:focus-visible{outline:2px solid var(--teal-dark); outline-offset:2px;}

.badge{display:inline-block; padding:var(--sp-1) var(--sp-3); border-radius:100px; font-size:12px; font-weight:600;}
.badge-teal{background:var(--teal-light); color:var(--teal-darker);}
.badge-amber{background:var(--amber-light); color:var(--amber-dark);}
.badge-red{background:var(--red-light); color:var(--red);}
.badge-muted{background:var(--border); color:var(--muted);}

table{width:100%; border-collapse:collapse;}
th, td{text-align:left; padding:var(--sp-3) var(--sp-2); border-bottom:1px solid var(--border); font-size:14px;}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
tbody tr{transition:background 120ms ease;}
tbody tr:hover{background:var(--teal-light);}

.tile-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-5);}
.tile-grid:last-child{margin-bottom:0;}
.tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  min-height:126px;
  background:linear-gradient(165deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.86) 100%);
  border:1px solid var(--border); border-radius:16px; padding:var(--sp-5) var(--sp-4);
  text-decoration:none; color:var(--ink);
  box-shadow:0 1px 3px rgba(27,42,74,0.05), 0 6px 16px rgba(27,42,74,0.06);
  transition:transform 200ms var(--ease-spring), box-shadow 200ms ease, border-color 200ms ease;
}
.tile:hover{border-color:rgba(29,158,117,0.4); transform:translateY(-3px); box-shadow:0 4px 8px rgba(27,42,74,0.07), 0 14px 26px rgba(27,42,74,0.12);}
.tile .ati{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-2); flex-shrink:0; box-shadow:inset 0 1px 1px rgba(255,255,255,0.65), 0 2px 5px rgba(27,42,74,0.10);}
.tile .ati svg{width:18px; height:18px;}
.tile .num{font-family:var(--font-head); font-size:22px; font-weight:700; color:var(--navy); margin-bottom:var(--sp-1);}
.tile .tlabel{font-family:var(--font-head); font-weight:600; font-size:12.5px; color:var(--navy); line-height:1.3;}

.progress-track{background:var(--border); border-radius:100px; height:8px; overflow:hidden;}
.progress-fill{background:linear-gradient(90deg, var(--teal), var(--teal-dark)); height:100%; transition:width 500ms ease-out;}

.safeguard-box{border-radius:12px; padding:var(--sp-4); margin:var(--sp-4) 0;}
.safeguard-flagged{background:var(--red-light); border:1px solid var(--red);}
.safeguard-clear{background:var(--teal-light); border:1px solid var(--teal);}
.safeguard-box .field label{display:flex; align-items:center; gap:var(--sp-2); font-weight:500; cursor:pointer;}
.safeguard-box .field input[type="radio"]{width:auto; margin:0; flex-shrink:0; accent-color:var(--teal-dark);}

.flash{padding:var(--sp-3) var(--sp-4); border-radius:10px; margin-bottom:var(--sp-4); font-size:14px; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);}
.flash-error{background:var(--red-light); color:var(--red);}
.flash-ok{background:var(--teal-light); color:var(--teal-darker);}

.week-list{list-style:none; padding:0; margin:0;}
.week-list li{
  border:1px solid var(--border); border-radius:12px; padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-2);
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  transition:box-shadow 150ms ease;
}
.week-list li:last-child{margin-bottom:0;}
.week-list li:hover{box-shadow:0 4px 12px rgba(27,42,74,0.06);}

.pill-row{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-3) 0;}
.pill{display:inline-flex; align-items:center; min-height:var(--ctl-h-sm); background:var(--teal-light); color:var(--teal-darker); padding:var(--sp-1) var(--sp-3); border-radius:100px; font-size:12.5px; font-weight:500;}
/* A pill and a button sitting in the same row are different components with
   different padding, borders and font sizes, so matching their min-height is
   not enough — the taller line box wins. Fixing the height outright, with the
   padding removed vertically, makes them identical whatever is inside them.
   The height comes from --ctl-h-sm, so this row can't drift away from the
   buttons everywhere else. */
.pill-row .pill, .pill-row .btn, .pill-row .btn-sm{
  height:var(--ctl-h-sm); min-height:var(--ctl-h-sm); padding-top:0; padding-bottom:0;
  display:inline-flex; align-items:center; box-sizing:border-box;
}

.avatar{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--teal-light); color:var(--teal-darker); font-family:var(--font-head); font-weight:700; font-size:13px; flex-shrink:0;}
.avatar-row{display:flex; align-items:center; gap:var(--sp-3);}
.avatar-sm{width:26px; height:26px; font-size:11px;}
.avatar-lg{width:52px; height:52px; font-size:18px;}

.segmented{display:inline-flex; align-items:stretch; background:var(--border); border-radius:11px; padding:3px; gap:2px; min-height:var(--ctl-h);}
.segmented a, .segmented button{
  border:none; background:transparent; padding:11px var(--sp-4); border-radius:8px; cursor:pointer;
  line-height:1.2; display:inline-flex; align-items:center;
  font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--muted); text-decoration:none;
  transition:background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.segmented a.active, .segmented button.active{background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(27,42,74,0.12);}
.segmented a:focus-visible, .segmented button:focus-visible{outline:2px solid var(--teal-dark); outline-offset:2px;}

.icon-badge{width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-4);}
.icon-badge svg{width:26px; height:26px;}

label.switch-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  cursor:pointer;
}
label.switch-row .switch{
  position:relative; width:44px; height:26px; flex-shrink:0; display:inline-block;
}
label.switch-row input[type="checkbox"]{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2; min-height:0; min-width:0;
}
label.switch-row .track{
  position:absolute; inset:0; background:#D8D5C8; border-radius:999px; transition:background 220ms ease;
}
label.switch-row .thumb{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:transform 320ms var(--ease-spring);
}
label.switch-row input:checked ~ .track{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 100%);}
label.switch-row input:checked ~ .thumb{transform:translateX(18px);}
label.switch-row input:focus-visible ~ .track{outline:2px solid var(--teal-dark); outline-offset:2px;}

footer{text-align:center; color:var(--muted); font-size:12.5px; padding:30px 0;}

.app-shell{display:flex; min-height:100vh;}
.app-sidebar{
  width:224px; flex-shrink:0; background:#FBFAF5; border-right:1px solid var(--border);
  padding:var(--sp-5) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.app-sidebar-brand{
  font-family:var(--font-head); font-weight:800; font-size:19px; color:var(--navy);
  text-decoration:none; padding:var(--sp-2) var(--sp-3) var(--sp-4); display:flex; align-items:center; gap:var(--sp-2);
  border-radius:10px; transition:background 150ms ease, color 150ms ease;
}
.app-sidebar-brand:hover{background:var(--teal-light); color:var(--teal-darker);}
.app-sidebar-brand svg{width:26px; height:26px; flex-shrink:0;}
.app-sidebar-nav{display:flex; flex-direction:column; gap:var(--sp-1); flex:1;}
.app-sidebar-item{
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); border-radius:10px; min-height:var(--ctl-h);
  text-decoration:none; color:var(--muted); font-family:var(--font-head); font-weight:600; font-size:13.5px;
  transition:background 150ms ease, color 150ms ease;
}
.app-sidebar-item:hover{background:rgba(29,158,117,0.12); color:var(--teal-dark);}
.app-sidebar-item.active{background:var(--teal-light); color:var(--teal-darker);}
.app-sidebar-item svg{width:18px; height:18px; flex-shrink:0; stroke:currentColor;}
.app-sidebar-signout{margin-top:auto; border-top:1px solid var(--border); padding-top:var(--sp-4); color:var(--red);}
.app-sidebar-signout:hover{background:var(--red-light); color:var(--red);}

.app-topbar-v2{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:#fff; border-bottom:1px solid var(--border); padding:var(--sp-3) var(--sp-6); gap:var(--sp-3) var(--sp-4);
}
.app-topbar-user{display:flex; align-items:center; gap:var(--sp-3);}
.app-topbar-user .name{font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--navy); display:block;}
.app-topbar-user .sub{font-size:12px; color:var(--muted); display:block;}
.app-topbar-toggle{flex-shrink:0;}
.app-topbar-actions{display:flex; align-items:center; gap:var(--sp-2);}
.app-topbar-icon{
  position:relative;
  width:44px; height:44px; border-radius:50%; background:#EFEDE3; border:none;
  display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--muted);
  transition:background 150ms ease, color 150ms ease;
}
.app-topbar-icon:hover{background:var(--teal-light); color:var(--teal-darker);}
.app-topbar-icon svg{width:16px; height:16px; stroke:currentColor;}
@media (max-width:600px){
  .app-topbar-toggle{order:3; flex:1 0 100%; justify-content:center; margin-top:var(--sp-1);}
}

.app-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.app-main .wrap{padding-bottom:70px;}

.app-bottomnav-mobile{display:none;}

@media (max-width:767px){
  .app-sidebar{display:none;}
  .app-bottomnav-mobile{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20;
    background:#fff; border-top:1px solid var(--border); padding:var(--sp-2) 4px 10px;
    justify-content:space-around;
  }
  .app-bottomnav-mobile a{
    display:flex; flex-direction:column; align-items:center; gap:3px; min-width:var(--ctl-h); min-height:var(--ctl-h);
    justify-content:center; text-decoration:none; color:var(--muted); font-size:10px; font-family:var(--font-head); font-weight:700;
  }
  .app-bottomnav-mobile a.active{color:var(--teal-darker);}
  .app-bottomnav-mobile a svg{width:19px; height:19px; stroke:currentColor;}
}

.gs-checklist{background:var(--teal-light); border:1px solid rgba(29,158,117,0.3); border-radius:14px; padding:var(--sp-4); margin-bottom:var(--sp-5); position:relative;}
.gs-checklist h3{color:var(--teal-darker); margin-bottom:var(--sp-3);}
.gs-checklist ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2);}
.gs-checklist li{display:flex; align-items:center; gap:var(--sp-2); font-size:13.5px;}
.gs-checklist li a{color:var(--ink); text-decoration:none;}
.gs-checklist li.done a{color:var(--muted); text-decoration:line-through;}
.gs-checklist .gs-tick{width:17px; height:17px; flex-shrink:0; display:flex;}
.gs-checklist .gs-tick svg{opacity:0.35;}
.gs-checklist li.done .gs-tick svg{opacity:1;}
.gs-checklist .gs-dismiss{
  position:absolute; top:var(--sp-2); right:var(--sp-3); background:none; border:none; color:var(--teal-darker);
  cursor:pointer; font-size:18px; line-height:1; padding:var(--sp-1); border-radius:50%;
}
.gs-checklist .gs-dismiss:hover{background:rgba(29,158,117,0.15);}

.section-label{font-family:var(--font-head); font-weight:700; font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:var(--sp-6) 0 var(--sp-3);}
.section-label:first-child{margin-top:0;}

details.acc{border:1px solid var(--border); border-radius:14px; margin-bottom:var(--sp-2); overflow:hidden; background:#fff;}
details.acc summary{list-style:none; cursor:pointer; padding:var(--sp-3) var(--sp-4); font-family:var(--font-head); font-weight:700; font-size:12.5px; color:var(--navy); display:flex; align-items:center; justify-content:space-between;}
details.acc summary::-webkit-details-marker{display:none;}
details.acc .chev{width:16px; height:16px; stroke:#5F5E5A; transition:transform 200ms ease; flex-shrink:0;}
details.acc[open] .chev{transform:rotate(180deg);}
details.acc .acc-body{padding:0 var(--sp-4) var(--sp-3);}

.note-field{width:100%; border:1.5px solid var(--border); border-radius:8px; padding:var(--sp-2) var(--sp-3); font-size:14px; font-family:inherit; resize:vertical; background:#fff; box-sizing:border-box;}
.note-field:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-light);}
.field-save-hint{font-size:11px; color:var(--muted); margin-top:3px; min-height:14px;}
.field-save-hint.saved{color:var(--teal-dark); font-weight:600;}

.autosave-status{display:flex; align-items:center; gap:var(--sp-2); font-size:11px; font-weight:700; color:var(--muted); margin-bottom:var(--sp-4);}
.autosave-status .autosave-dot{width:6px; height:6px; border-radius:50%; background:var(--border); flex-shrink:0;}
.autosave-status.saving .autosave-dot{background:var(--amber); animation:asdotpulse 1s ease-in-out infinite;}
.autosave-status.saved .autosave-dot{background:var(--teal);}
@keyframes asdotpulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}

.role-card{display:flex; align-items:flex-start; gap:var(--sp-3); width:100%; text-align:left; background:#fff; border:1.5px solid var(--border); border-radius:14px; padding:var(--sp-4); margin-bottom:var(--sp-3); cursor:pointer; font-family:var(--font-body); transition:border-color .15s ease, box-shadow .15s ease;}
.role-card:hover{border-color:var(--teal);}
.role-card.selected{border-color:var(--teal); box-shadow:0 0 0 2px var(--teal-light);}
.role-card .ric{flex-shrink:0; width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
.role-card .rt{font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--navy); margin:0 0 3px;}
.role-card .rd{font-size:12px; color:var(--muted); margin:0; line-height:1.4;}
.btn-ghost{background:transparent; border:1.5px solid var(--border); color:var(--navy);}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal-dark);}

.wheel-picker{position:relative; background:#fff; border:1px solid var(--border); border-radius:12px; padding:3px 4px; display:grid; grid-template-columns:0.85fr 1fr 0.95fr; text-align:center; overflow:hidden; max-width:260px;}
.wheel-highlight{position:absolute; top:50%; left:6px; right:6px; height:26px; margin-top:-13px; background:var(--teal-light); border-top:1.5px solid var(--teal); border-bottom:1.5px solid var(--teal); pointer-events:none; z-index:1;}
.wheel-col{height:130px; overflow-y:scroll; scrollbar-width:none; -ms-overflow-style:none; position:relative; z-index:2;}
.wheel-col::-webkit-scrollbar{display:none;}
.wheel-col + .wheel-col{border-left:1px solid var(--border);}
.wheel-item{height:26px; line-height:26px; font-size:13px; color:var(--muted); opacity:0.55; scroll-snap-align:center; user-select:none;}
.wheel-item.active{font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--navy); opacity:1;}

.course-row{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); margin:0 calc(-1 * var(--sp-3)); border-radius:10px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; transition:background 150ms ease;}
.course-row:last-child{border-bottom:none;}
.course-row:hover{background:var(--teal-light);}
.course-row .ric{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform 150ms ease;}
.course-row:hover .ric{transform:scale(1.06);}
.course-row .crt{flex:1; min-width:0;}
.course-row .crtitle{font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--navy); margin:0 0 2px; transition:color 150ms ease;}
.course-row:hover .crtitle{color:var(--teal-dark);}
.course-row .crmeta{font-size:11px; color:var(--muted); margin:0;}
.course-row .crchev{stroke:#5F5E5A; flex-shrink:0; transition:transform 150ms ease, stroke 150ms ease;}
.course-row:hover .crchev{stroke:#0F6E56; transform:translateX(3px);}
.chip-row{display:flex; gap:var(--sp-2); margin-bottom:var(--sp-4); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{font-size:11px; font-weight:600; color:var(--muted); background:#fff; border:1px solid var(--border); padding:var(--sp-2) var(--sp-3); border-radius:999px; white-space:nowrap; cursor:pointer; font-family:var(--font-body);}
.chip.active{color:var(--navy); background:#EFEDE3; border-color:#EFEDE3; font-weight:700;}


.notif-item{display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);}
.notif-item form{flex-shrink:0; margin:0;}
.notif-unread{border-color:var(--teal); box-shadow:0 1px 3px rgba(15,110,86,0.08);}
/* The bell looked the same whether or not anything was waiting: only a small
   badge changed, which is easy to miss on a busy topbar and invisible to
   anyone who doesn't distinguish the badge colour. The icon itself now changes
   too, and the count is in the tooltip and for screen readers. */
.app-topbar-icon--alert{background:var(--coral-light, #FDEDE9); color:var(--coral, #C4553D);}
.app-topbar-icon--alert:hover{background:var(--coral, #C4553D); color:#fff;}
.app-topbar-icon--alert svg{stroke-width:2.4;}

@media (prefers-reduced-motion: no-preference){
  .app-topbar-icon--alert svg{animation:bell-nudge 2.4s ease-in-out 1;}
  @keyframes bell-nudge{
    0%, 70%, 100%{transform:rotate(0);}
    75%{transform:rotate(-9deg);}
    82%{transform:rotate(7deg);}
    89%{transform:rotate(-4deg);}
  }
}

.notif-badge{position:absolute; top:-4px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--coral); color:#fff; font-size:9.5px; font-weight:800; line-height:16px; text-align:center; font-family:var(--font-head); box-shadow:0 0 0 2px var(--card);}


/* ============================================================
   DESIGN SYSTEM v2 -- Phase 1 (tokens + component states)
   Additive only: extends :root with new tokens and layers new
   states (focus-visible, disabled, loading, empty) on top of
   existing components. Nothing above this line is modified.
   ============================================================ */

:root{
  --dur-fast:150ms;
  --dur-base:200ms;
  --dur-slow:300ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-emphasis:var(--ease-spring);

  --shadow-1: 0 1px 2px rgba(27,42,74,0.06);
  --shadow-2: 0 1px 3px rgba(27,42,74,0.06), 0 4px 10px rgba(27,42,74,0.05);
  --shadow-3: 0 2px 6px rgba(27,42,74,0.07), 0 10px 24px rgba(27,42,74,0.08);
  --shadow-brand: 0 2px 8px rgba(15,110,86,0.28), 0 6px 16px rgba(15,110,86,0.12);
  /* The inner hairline carries the required 3:1 (5.85:1 on cream); the soft
     halo does the visual work. The previous value was --teal-light at 1.07:1,
     which is invisible on this background. */
  --shadow-focus-ring: 0 0 0 1px var(--teal-dark), 0 0 0 4px rgba(15,110,86,0.28);
  --amber-hover:#8F5709;
  --teal-hover:#0C5C48;

  --radius-sm:8px; --radius-md:11px; --radius-lg:14px; --radius-pill:999px;

  --surface-glass-bg: rgba(255,255,255,0.72);
  --surface-glass-border: rgba(255,255,255,0.5);
  --surface-scrim: rgba(27,42,74,0.42);

  --z-nav:20; --z-dropdown:30; --z-overlay:40; --z-modal:50; --z-toast:60;
}

.btn:focus-visible{outline:none; box-shadow:var(--shadow-focus-ring);}
.btn:disabled, .btn[aria-disabled="true"]{
  cursor:not-allowed; opacity:0.5; box-shadow:none; transform:none; filter:none; pointer-events:none;
}
.btn.is-loading{ color:transparent; pointer-events:none; position:relative; }
.btn.is-loading::after{
  content:""; position:absolute; width:16px; height:16px; top:50%; left:50%; margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%;
  animation:btn-spin 700ms linear infinite;
}
.btn-secondary.is-loading::after{border-color:rgba(15,110,86,0.25); border-top-color:var(--teal-dark);}
.btn-secondary:hover:not(:disabled){background:var(--teal-light); border-color:var(--teal-dark);}
.btn-secondary:active:not(:disabled){background:var(--teal-light); transform:scale(0.98);}
.btn-amber:hover:not(:disabled){transform:translateY(-1px); background:var(--amber-hover);}
.btn-red:hover:not(:disabled){background:var(--red-light);}
@keyframes btn-spin{to{transform:rotate(360deg);}}

.field input:hover:not(:disabled), .field select:hover:not(:disabled){border-color:#C9C4B0;}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:none; border-color:var(--teal); box-shadow:var(--shadow-focus-ring);
}
.field input:disabled, .field select:disabled, .field textarea:disabled{
  background:var(--cream); color:var(--muted); cursor:not-allowed; border-style:dashed;
}
.field input.is-invalid, .field select.is-invalid{border-color:var(--red); box-shadow:0 0 0 3px var(--red-light);}

.empty-state{
  text-align:center; padding:var(--sp-8) var(--sp-6);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-1);
}
.empty-state .icon-badge{width:48px; height:48px; border-radius:var(--radius-lg); margin:0 auto var(--sp-2);}
.empty-state .empty-title{font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--navy); margin:0;}
.empty-state .empty-body{color:var(--muted); margin:0; font-size:13.5px;}
.empty-state .btn{margin-top:var(--sp-3);}

.card{box-shadow:var(--shadow-2); border-radius:var(--radius-lg);}
.tile{box-shadow:var(--shadow-1); transition:box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);}
.tile:hover{border-color:var(--teal); box-shadow:var(--shadow-2);}

tbody tr{transition:background var(--dur-fast) var(--ease-out);}
.segmented a, .segmented button{transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);}
.app-sidebar-item{transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);}

.truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.wrap-safe{overflow-wrap:anywhere; min-width:0;}
h1{font-size:clamp(21px, 4vw, 26px);}

.overlay-scrim{
  position:fixed; inset:0; background:var(--surface-scrim); z-index:var(--z-overlay);
  opacity:0; transition:opacity var(--dur-slow) var(--ease-out);
}
.overlay-scrim.is-open{opacity:1;}
.modal-surface{
  background:var(--surface-glass-bg); backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--surface-glass-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3); z-index:var(--z-modal);
  transform:translateY(8px) scale(0.98); opacity:0;
  transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.modal-surface.is-open{transform:translateY(0) scale(1); opacity:1;}
@supports not (backdrop-filter: blur(1px)){
  .modal-surface{background:rgba(255,255,255,0.96);}
}


/* ============================================================
   DESIGN SYSTEM v2 -- Phase 2 (three-tier responsive breakpoints)
   Adds an explicit tablet tier (600-1023px) between the mobile
   bottom-nav layout and the desktop full sidebar. This block is
   appended after the original @media rules, so on 600-767px
   viewports it correctly overrides the older max-width:767px
   sidebar-hide/bottom-nav-show rule (later source order wins at
   equal specificity). Desktop (1024px+) was already the implicit
   default; this only widens the content wrap slightly there.
   ============================================================ */

@media (min-width:600px) and (max-width:1023px){
  .app-bottomnav-mobile{display:none;}
  .app-sidebar{
    display:flex; width:76px; padding:var(--sp-4) var(--sp-2);
  }
  .app-sidebar-brand{justify-content:center; padding:0 0 var(--sp-4);}
  .app-sidebar-item{justify-content:center; gap:0; padding:var(--sp-3) var(--sp-1);}
  .app-sidebar-item span{display:none; position:absolute; left:-9999px;}
  .app-main .wrap{padding:var(--sp-5) var(--sp-4) 48px;}
}

@media (min-width:1024px){
  .wrap{max-width:1080px; padding:var(--sp-6) var(--sp-6) 48px;}
}


/* Phase 3: layout & pattern utility classes (extracted from template inline styles) */
.card-center{text-align:center;}
.form-left{text-align:left;}
.form-inline{display:inline;}
.btn-block{width:100%; box-sizing:border-box; display:block; text-align:center;}
.flex-row{display:flex; align-items:center; gap:var(--sp-3);}
.flex-between{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;}
.flex-col{display:flex; flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.gap-2{gap:var(--sp-2);}
.gap-3{gap:var(--sp-3);}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.stat-row{display:flex; gap:var(--sp-3); margin-bottom:var(--sp-5);}
.stat-tile{flex:1; border-radius:var(--radius-md); padding:14px 16px;}
.stat-tile-num{font-family:var(--font-head); font-weight:700; font-size:22px;}
.stat-tile-label{font-size:12px; font-weight:600;}
.stat-tile--teal{background:var(--teal-light);}
.stat-tile--teal .stat-tile-num, .stat-tile--teal .stat-tile-label{color:var(--teal-darker);}
.stat-tile--amber{background:var(--amber-light);}
.stat-tile--amber .stat-tile-num, .stat-tile--amber .stat-tile-label{color:var(--amber-dark);}
.icon-badge--teal{background:var(--teal-light);}
.icon-badge--coral{background:var(--coral-light);}
.icon-badge--amber{background:var(--amber-light);}
.icon-badge--red{background:var(--red-light);}
.icon-badge--cream{background:var(--cream);}
.icon-badge--border{background:var(--border);}

.stat-tile--neutral{background:#EFEDE3;}
.stat-tile--neutral .stat-tile-num{color:var(--navy);}
.stat-tile--neutral .stat-tile-label{color:var(--muted);}

.card--danger{border-color:var(--red);}

/* ------------------------------------------------------------
   Table action links
   A bare "View" in a table cell inherits no padding, so it ends
   up an 18px target — unusable on a tablet and awkward with a
   mouse. Padding gets it to 44px without changing how it looks,
   because the extra space is inside the row that already exists.
   ------------------------------------------------------------ */
table td a:not(.btn){
  display:inline-flex; align-items:center; min-height:var(--ctl-h);
  padding:0 var(--sp-2); border-radius:var(--radius-sm, 8px);
}
table td a:not(.btn):hover{ background:var(--teal-light); text-decoration:none; }
table td a:not(.btn):focus-visible{ outline:none; box-shadow:var(--shadow-focus-ring); }

/* ============================================================
   Reduced motion
   For users who have asked their system to limit animation —
   often because motion triggers nausea or dizziness. Transitions
   of colour and shadow are kept, so nothing loses its hover or
   focus affordance; only movement and looping animation stop.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Colour and shadow are safe to animate, so give them back deliberately. */
  .btn, .tile, .card, .mkt-course-pill, .field input, .field select, .field textarea{
    transition:background-color 120ms linear, border-color 120ms linear,
               color 120ms linear, box-shadow 120ms linear !important;
  }
  .btn:hover, .btn:active, .tile:hover, .card:hover, .mkt-course-pill:hover,
  .segmented a, .segmented button{
    transform:none !important;
  }
  .autosave-status.saving .autosave-dot{animation:none !important;}
}

/* A details/summary is keyboard focusable and was showing nothing when tabbed
   to, so a keyboard user could not tell where they were. Buttons and fields
   already have this; the disclosures were the gap. */
summary:focus-visible{outline:2px solid var(--teal-dark); outline-offset:2px;
  border-radius:8px;}
/* Suppress the browser's own triangle everywhere, all three ways: engines
   differ over which one they honour, and a page that sets only one ends up
   with a stray marker on its own line. */
summary{cursor:pointer; list-style:none;}
summary::-webkit-details-marker{display:none;}
summary::marker{content:"";}

/* Pressed state. Hover told you a control was live; nothing acknowledged the
   click itself. */
.btn:active{transform:translateY(0); box-shadow:none;}

/* ---------------------------------------------------------------- printing --
   Mentors print session sheets to take into a room without a laptop. Without
   this they get the screen: navigation bars, buttons that do nothing on paper,
   folded-away resources and note boxes with no room to write. */
@media print{
  /* Chrome that means nothing on paper. */
  .app-sidebar, .app-bottomnav-mobile, .topbar, .back-link,
  .btn, .flash, .js-back,
  /* Screen-only status: autosave says nothing on paper, and a progress bar
     for a session you are about to run in the room is noise. */
  .autosave-status, .sess-progress{display:none !important;}

  html, body{background:#fff !important; color:#000;}
  .app-shell{display:block;}
  .app-main{padding:0 !important;}

  /* Cards keep their structure but lose the screen's depth, which prints as
     grey mush. */
  .card, .step-block, .note-panel, .res-inline{
    box-shadow:none !important; break-inside:avoid; page-break-inside:avoid;}
  .card, .step-block{border:1px solid #999 !important;}

  /* A step should not be split across two pages mid-instruction. */
  .step-block{margin-bottom:10px !important;}

  /* Everything folded away on screen is open on paper — a printed sheet has no
     way to expand it. */
  details{display:block !important;}
  details > summary{list-style:none;}
  details:not([open]) > *:not(summary){display:revert !important;}

  /* A note box on paper is somewhere to write, so give it real height and a
     visible rule. Placeholders don't print, so the field would otherwise be an
     invisible gap. */
  .note-field{min-height:22mm !important; border:1px solid #999 !important;
    background:#fff !important;}

  /* Filled panels cost a lot of ink and print worse than they look. */
  .sess-goal{background:#fff !important; border:2px solid #000 !important;}
  .sess-goal p, .sess-goal-head{color:#000 !important;}

  a[href]{text-decoration:none; color:#000;}
}