/* Portal layout & components (loads after styles.css) */
body{background:#F4F3EE}
.p-shell{display:flex;min-height:100vh}
.p-side{width:250px;background:#0D0D0D;color:#CFCFC9;flex:none;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.p-side .p-logo{background:#fff;margin:18px;border-radius:12px;padding:10px 12px}
.p-side .p-logo img{height:44px;width:auto}
.p-side nav{flex:1;overflow:auto;padding:6px 12px}
.p-side nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:#CFCFC9;font-family:var(--font-body);font-size:.95rem;font-weight:500;padding:12px 14px;border-radius:10px;cursor:pointer;margin-bottom:2px}
.p-side nav button:hover{background:#1D1D1D;color:#fff}
.p-side nav button.on{background:var(--green);color:#fff;font-weight:600}
.p-side nav button .badge{margin-left:auto}
.p-side .p-bottom{padding:14px 18px;border-top:1px solid #222;font-size:.8rem}
.p-side .p-bottom a{color:#F4C730}
.p-main{flex:1;min-width:0;display:flex;flex-direction:column}
.p-top{background:#fff;border-bottom:1px solid var(--line);padding:14px 26px;display:flex;justify-content:space-between;align-items:center;gap:14px;position:sticky;top:0;z-index:40}
.p-top h1{font-size:1.3rem}
.p-top .p-user{display:flex;align-items:center;gap:12px;font-size:.88rem;color:var(--muted)}
.p-top .avatar{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.p-content{padding:26px;max-width:1100px;width:100%}
.p-view{display:none}
.p-view.active{display:block}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;letter-spacing:.03em}
.badge.green{background:#E1F5E9;color:#00713A}
.badge.gold{background:#FBF0CE;color:#8A6503}
.badge.red{background:#FDE3E1;color:#B00E06}
.badge.gray{background:#ECEAE4;color:#5F5D58}
.badge.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:22px}
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.tile .t-num{font-family:var(--font-head);font-size:2rem;font-weight:700;color:#111;line-height:1.1}
.tile .t-label{font-size:.8rem;color:var(--muted);font-weight:600;margin-top:2px}
.tile.alert .t-num{color:var(--red-dark)}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:18px}
.panel h2{font-size:1.15rem;margin-bottom:14px;font-family:var(--font-body);font-weight:700;color:#111}
.panel h2 small{font-weight:400;color:var(--muted);font-size:.82rem}
table.p-table{width:100%;border-collapse:collapse;font-size:.9rem}
table.p-table th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line)}
table.p-table td{padding:11px 10px;border-bottom:1px solid #F0EEE8;vertical-align:top}
table.p-table tr:hover td{background:#FAF9F4}
.p-table .actions{white-space:nowrap}
.btn-sm{padding:7px 14px;font-size:.82rem;border-radius:99px}
.list-item{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid #F0EEE8}
.list-item:last-child{border-bottom:none}
.list-item .li-icon{width:38px;height:38px;border-radius:10px;background:var(--sage);display:flex;align-items:center;justify-content:center;flex:none;font-size:1.1rem}
.list-item b{display:block;font-size:.92rem;color:#111}
.list-item span{font-size:.82rem;color:var(--muted)}
.list-item .li-right{margin-left:auto;text-align:right;flex:none}
.msg-thread{max-height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px 2px;margin-bottom:14px}
.msg{max-width:80%;padding:10px 14px;border-radius:14px;font-size:.9rem}
.msg.me{background:var(--green);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.them{background:#F1EFE9;align-self:flex-start;border-bottom-left-radius:4px}
.msg small{display:block;opacity:.7;font-size:.7rem;margin-top:4px}
.msg-compose{display:flex;gap:8px}
.msg-compose input{flex:1}
.demo-banner{background:#FFF6E8;border:1.5px solid var(--gold);color:#6B4E12;border-radius:12px;padding:12px 16px;font-size:.85rem;margin-bottom:18px}
.demo-banner b{color:#4A3608}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px}
.bar-chart .bar{flex:1;background:var(--green);border-radius:4px 4px 0 0;min-height:3px;position:relative;cursor:default}
.bar-chart .bar:hover{background:var(--green-dark)}
.bar-chart .bar .bv{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--muted);font-weight:600}
.bar-labels{display:flex;gap:6px;margin-top:6px}
.bar-labels span{flex:1;text-align:center;font-size:.65rem;color:var(--muted)}
.hbar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:.85rem}
.hbar-row .hb-label{width:120px;flex:none;color:#111;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-row .hb-track{flex:1;background:#F0EEE8;border-radius:6px;height:18px;overflow:hidden}
.hbar-row .hb-fill{height:100%;background:var(--green);border-radius:6px}
.hbar-row .hb-val{width:34px;text-align:right;color:var(--muted);font-weight:600}
.form-def{max-width:640px}
.sig-box{background:var(--cream);border:1.5px dashed var(--gold-dark);border-radius:12px;padding:16px;margin-top:14px}
.pill-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill-tabs button{background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:8px 16px;font-weight:600;font-size:.85rem;cursor:pointer;font-family:var(--font-body);color:var(--muted)}
.pill-tabs button.on{background:var(--green);border-color:var(--green);color:#fff}
.p-mobile-nav{display:none}
@media(max-width:900px){
  .p-side{position:fixed;left:-260px;transition:left .25s;z-index:100}
  .p-side.open{left:0}
  .p-mobile-nav{display:flex;background:none;border:none;cursor:pointer;padding:6px}
  .p-mobile-nav svg{width:26px;height:26px;stroke:#111}
  .p-content{padding:16px}
}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px;background:linear-gradient(150deg,#0A0A0A,#262626)}
.login-card{background:#fff;border-radius:22px;padding:38px;max-width:460px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.login-card .l-logo{text-align:center;margin-bottom:8px}
.login-card .l-logo img{height:64px;margin:0 auto}
.role-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}
@media(max-width:420px){.role-tabs{grid-template-columns:repeat(2,1fr)}}
.role-tabs button{padding:12px 6px;border:2px solid var(--line);border-radius:12px;background:#fff;font-family:var(--font-body);font-weight:700;font-size:.85rem;cursor:pointer;color:var(--muted)}
.role-tabs button.on{border-color:var(--green);background:var(--sage);color:var(--green-dark)}
.notif-dot{position:relative}
.notif-dot::after{content:attr(data-n);position:absolute;top:-6px;right:-8px;background:var(--red);color:#fff;font-size:.62rem;font-weight:700;min-width:16px;height:16px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.notif-dot[data-n="0"]::after{display:none}

/* ============================================================
   CLIENT PORTAL — document checklist layout
   Used by /portal/client.html
   ============================================================ */
.cp-body{background:#F7F6F1}
.cp-bar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.cp-bar .wrap{display:flex;align-items:center;gap:22px;padding:12px 26px;max-width:1180px}
.cp-brand{display:flex;align-items:center;gap:10px;flex:none}
.cp-brand img{height:36px;width:auto}
.cp-nav{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto}
.cp-nav a,.cp-nav button{background:none;border:none;font-family:var(--font-body);font-size:.88rem;font-weight:600;color:var(--muted);padding:8px 12px;border-radius:9px;cursor:pointer;white-space:nowrap;text-decoration:none}
.cp-nav a:hover,.cp-nav button:hover{background:#F2F0EA;color:#111}
.cp-nav .on{background:var(--sage);color:var(--green-dark)}
.cp-bar .cp-phone{font-weight:700;font-size:.88rem;color:#111;white-space:nowrap;text-decoration:none}
.cp-who{display:flex;align-items:center;gap:10px;flex:none;padding-left:16px;border-left:1px solid var(--line)}
.cp-who .avatar{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex:none}
.cp-who b{display:block;font-size:.86rem;color:#111;line-height:1.25}
.cp-who span{font-size:.74rem;color:var(--muted)}
.cp-translate{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--muted);padding:6px 26px;border-bottom:1px solid var(--line);background:#FBFAF6;max-width:1180px;margin:0 auto}
.cp-translate .goog-te-gadget{font-family:var(--font-body)!important;font-size:.74rem!important}

.cp-page{max-width:1180px;margin:0 auto;padding:26px}
.cp-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start;margin-bottom:22px}
.cp-hero h1{font-size:1.95rem;line-height:1.2;margin:6px 0 10px}
.cp-hero p{color:var(--muted);font-size:.95rem;max-width:56ch}
.cp-coord{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.cp-coord .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.cp-coord .row{display:flex;align-items:center;gap:12px;margin-top:10px}
.cp-coord .avatar{width:46px;height:46px;border-radius:50%;background:var(--gold);color:#3A2B03;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.cp-coord b{display:block;font-size:1rem;color:#111}
.cp-coord a{font-size:.88rem;font-weight:600;color:var(--green-dark)}

.cp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.cp-tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.cp-tile .k{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.cp-tile .v{font-family:var(--font-head);font-size:1.85rem;font-weight:700;color:#111;line-height:1.15;margin:4px 0 2px}
.cp-tile .s{font-size:.78rem;color:var(--muted)}
.cp-tile.warn{border-color:#F3C9C5;background:#FFF8F7}
.cp-tile.warn .v{color:var(--red-dark)}

.cp-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.cp-rail .st{border-top:4px solid #E3E0D8;padding-top:10px}
.cp-rail .st.done{border-top-color:var(--green)}
.cp-rail .st.now{border-top-color:var(--gold)}
.cp-rail .st b{display:block;font-size:.88rem;color:#111}
.cp-rail .st span{font-size:.76rem;color:var(--muted)}

.cp-cat{margin-bottom:18px}
.cp-cat>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.cp-cat>header h2{font-size:1.1rem;font-weight:700;color:#111}
.cp-cat>header span{font-size:.8rem;color:var(--muted);font-weight:600}
.cp-doc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
.cp-doc.attn{border-color:#F3C9C5;background:#FFFBFA}
.cp-doc h3{font-size:.98rem;font-weight:700;color:#111;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cp-doc .hint{font-size:.83rem;color:var(--muted);margin-top:3px}
.cp-doc .file{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:.83rem}
.cp-doc .file code{background:#F2F0EA;border-radius:6px;padding:3px 8px;font-size:.8rem;color:#111;font-family:var(--font-body);font-weight:600;max-width:100%;overflow-wrap:anywhere}
.cp-doc .file time{color:var(--muted)}
.cp-doc .msg{font-size:.83rem;color:var(--red-dark);margin-top:8px;font-weight:600}
.cp-doc .msg.calm{color:var(--muted);font-weight:400}
.cp-doc .side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cp-tag{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:#ECEAE4;color:#5F5D58}
.cp-tag.opt{background:#EFF2F6;color:#4A5568;text-transform:none;letter-spacing:0;font-weight:600}
.cp-upload{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 15px;font-family:var(--font-body);font-size:.82rem;font-weight:700;color:#111;cursor:pointer;white-space:nowrap}
.cp-upload:hover{border-color:var(--green);color:var(--green-dark)}
.cp-upload.primary{background:var(--green);border-color:var(--green);color:#fff}
.cp-upload.primary:hover{background:var(--green-dark);color:#fff}
.cp-upload.link{border:none;padding:4px 0;font-size:.8rem;color:var(--green-dark);text-decoration:underline}

.cp-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.cp-visit{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid #F0EEE8}
.cp-visit:last-child{border-bottom:none}
.cp-visit .d{font-size:.78rem;font-weight:700;color:var(--muted);width:74px;flex:none;text-transform:uppercase;letter-spacing:.04em}
.cp-visit b{display:block;font-size:.9rem;color:#111}
.cp-visit span{font-size:.82rem;color:var(--muted)}
.cp-tips{margin:0;padding-left:18px}
.cp-tips li{font-size:.88rem;color:var(--muted);margin-bottom:7px}
.cp-foot{border-top:1px solid var(--line);background:#fff;padding:22px 26px;text-align:center;font-size:.86rem;color:var(--muted)}
.cp-foot a{font-weight:600;color:var(--green-dark)}
@media(max-width:900px){
  .cp-hero{grid-template-columns:1fr}
  .cp-rail{grid-template-columns:1fr 1fr}
  .cp-doc{grid-template-columns:1fr}
  .cp-doc .side{align-items:flex-start;text-align:left}
  .cp-bar .wrap{flex-wrap:wrap;gap:12px;padding:12px 16px}
  .cp-who{padding-left:0;border-left:none}
  .cp-page{padding:16px}
}
/* styles.css gives every <section> 72px of vertical padding — the portal
   lays its own sections out, so neutralise that inside .cp-page. */
.cp-page section{padding:0}
.cp-page section.panel{padding:22px}

/* ---------------------------------------------------------------
   CAREGIVER PIPELINE — application wizard, training, onboarding
   --------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.f-hint{font-size:.78rem;color:var(--muted);margin:6px 0 0;line-height:1.5}
.f-note{background:var(--cream);border-left:3px solid var(--gold-dark);border-radius:0 8px 8px 0;padding:12px 14px;font-size:.87rem;color:#3A3A3A;margin:6px 0 0;line-height:1.6}
.doc-link{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}
.doc-link span{font-size:.78rem;color:var(--muted)}

.check-group,.grid-field{border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;margin:0}
.check-group legend,.grid-field legend{font-family:var(--font-body);font-size:.88rem;font-weight:700;color:#111;padding:0 6px}
.check-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;margin-top:8px}

.grid-scroll{overflow-x:auto;margin-top:10px}
table.pref-grid{border-collapse:collapse;width:100%;min-width:420px;font-size:.85rem}
table.pref-grid th[scope=col]{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:0 6px 8px;text-align:center;white-space:nowrap}
table.pref-grid th[scope=row]{text-align:left;font-weight:500;color:#111;padding:8px 12px 8px 0;border-top:1px solid #F0EEE8}
table.pref-grid td{text-align:center;padding:8px 6px;border-top:1px solid #F0EEE8;width:74px}
table.pref-grid tbody tr:hover th[scope=row],table.pref-grid tbody tr:hover td{background:#FAF9F5}
table.pref-grid input[type=radio]{accent-color:var(--green);width:17px;height:17px;cursor:pointer}

/* stage tracker */
.cg-stages{display:flex;flex-wrap:wrap;gap:0;margin:0 0 20px;padding:0;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cg-stages li{flex:1;min-width:130px;padding:13px 14px;font-size:.78rem;font-weight:600;color:var(--muted);border-right:1px solid var(--line);position:relative}
.cg-stages li:last-child{border-right:none}
.cg-stages li .n{display:inline-flex;width:20px;height:20px;border-radius:50%;background:#E9E7E0;color:#7A7A70;align-items:center;justify-content:center;font-size:.7rem;margin-right:7px}
.cg-stages li.done{color:var(--green-dark)}
.cg-stages li.done .n{background:var(--green);color:#fff}
.cg-stages li.now{background:var(--cream);color:#111}
.cg-stages li.now .n{background:var(--red);color:#fff}

.step-rail{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.step-rail button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer}
.step-rail button.on{border-color:var(--green);background:var(--green);color:#fff}
.step-rail button.ok{border-color:var(--green);color:var(--green-dark)}
.step-rail button.ok::before{content:"✓ "}

/* training */
.tr-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px 20px;margin-bottom:12px}
.tr-card h3{font-size:1.02rem;margin:0 0 4px}
.tr-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.tr-card p{font-size:.88rem;color:var(--muted);margin:0}
.tr-meta{font-size:.76rem;color:var(--muted);margin-top:10px;display:flex;flex-wrap:wrap;gap:14px}
.tr-body{margin-top:16px;border-top:1px solid #F0EEE8;padding-top:16px}
.tr-body h4{font-size:.95rem;margin:18px 0 6px}
.tr-body p{font-size:.92rem;color:#3A3A3A;line-height:1.7;margin:0 0 10px}
.tr-key{background:var(--cream);border-radius:10px;padding:14px 18px;margin:14px 0}
.tr-key ul{margin:6px 0 0;padding-left:18px}
.tr-key li{font-size:.88rem;color:#3A3A3A;margin-bottom:6px}
.quiz-q{border-top:1px solid #F0EEE8;padding-top:14px;margin-top:14px}
.quiz-q p.q{font-weight:600;font-size:.92rem;margin:0 0 8px}
.quiz-q .opt{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:#3A3A3A;margin-bottom:7px}
.quiz-q .opt input{margin-top:3px;accent-color:var(--green)}
.quiz-why{font-size:.82rem;border-radius:8px;padding:9px 12px;margin-top:8px}
.quiz-why.ok{background:#EAF7F0;color:#0A6B3D}
.quiz-why.no{background:#FDEDED;color:#8E1B1B}
.bar{height:8px;border-radius:99px;background:#EDEBE4;overflow:hidden;margin:10px 0}
.bar i{display:block;height:100%;background:var(--green);border-radius:99px}

/* certificate */
.cert-sheet{background:#fff;border:2px solid var(--gold-dark);border-radius:16px;padding:48px 52px;max-width:780px;margin:0 auto;text-align:center;position:relative}
.cert-sheet::after{content:"";position:absolute;inset:12px;border:1px solid var(--line);border-radius:10px;pointer-events:none}
.cert-sheet .eyebrow{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cert-sheet h1{font-size:2.1rem;margin:10px 0 4px}
.cert-sheet .who{font-family:var(--font-display);font-size:1.9rem;color:var(--green-dark);margin:22px 0 6px;border-bottom:1.5px solid var(--line);display:inline-block;padding:0 28px 8px}
.cert-sheet .mod{font-size:1.15rem;font-weight:700;margin:20px 0 4px}
.cert-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:34px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.cert-meta div{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cert-meta b{display:block;font-size:.95rem;color:#111;letter-spacing:0;text-transform:none;margin-top:4px}
@media print{
  .p-side,.p-top,.no-print{display:none!important}
  body{background:#fff}
  .cert-sheet{border-color:#333;box-shadow:none}
  .p-content{padding:0;max-width:none}
}

/* handbook & policy documents */
.doc-page{max-width:820px;margin:0 auto}
.doc-page h2{font-size:1.35rem;margin:34px 0 8px;padding-top:22px;border-top:1px solid var(--line)}
.doc-page h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.doc-page h3{font-size:.98rem;margin:16px 0 4px;color:var(--green-dark)}
.doc-page p{font-size:.94rem;line-height:1.75;color:#3A3A3A;margin:0 0 12px}
.doc-page li{font-size:.94rem;line-height:1.7;color:#3A3A3A;margin-bottom:7px}
.doc-toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:26px}
.doc-toc ol{margin:8px 0 0;padding-left:20px;columns:2;column-gap:28px}
.doc-toc li{font-size:.86rem;margin-bottom:5px}
@media(max-width:640px){.doc-toc ol{columns:1}}

/* ============================================================
   TRAINING — course catalog, self-paced player, admin roll-ups
   Accessibility notes that matter when editing this block:
   - status is never signalled by colour alone; every badge and
     every card carries a word as well;
   - focus is always visible (.tr-lesson:focus-visible etc.);
   - the learner text-size / contrast controls work by setting
     data-attributes on <html>, handled at the end of this block;
   - everything respects prefers-reduced-motion.
   ============================================================ */

/* skip link — first focusable element on the training pages */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green-dark);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;font-size:.9rem}
.skip-link:focus{left:0}

/* --- accessibility toolbar --- */
.a11y-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:18px}
.a11y-bar .lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.a11y-bar .grp{display:flex;gap:6px}
.a11y-bar button{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:5px 11px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--ink)}
.a11y-bar button:hover{border-color:var(--green)}
.a11y-bar button[aria-pressed="true"]{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
html[data-textsize="lg"]{font-size:118%}
html[data-textsize="xl"]{font-size:136%}
html[data-contrast="high"]{--muted:#333;--line:#666}
html[data-contrast="high"] .tr-course,html[data-contrast="high"] .panel,html[data-contrast="high"] .tr-lesson{border-width:2px}
html[data-contrast="high"] a{text-decoration:underline}

/* --- catalog --- */
.tr-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tr-filters button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 15px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--ink)}
.tr-filters button[aria-pressed="true"]{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.tr-course{border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px;display:flex;flex-direction:column;gap:10px}
.tr-course.is-expired{border-color:var(--red);border-left-width:5px}
.tr-course.is-expiring{border-color:var(--gold-dark);border-left-width:5px}
.tr-course .hrs{display:inline-block;background:var(--gold);color:#3A2E00;font-weight:800;font-size:.72rem;letter-spacing:.08em;border-radius:6px;padding:4px 9px}
.tr-course h3{font-size:1.04rem;line-height:1.3;margin:0}
.tr-course .blurb{font-size:.87rem;color:var(--muted);margin:0;line-height:1.6}
.tr-course .meta{font-size:.78rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:auto}
.tr-course .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.tr-req{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--red-dark)}
.tr-opt{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* --- course player: lesson rail + content --- */
.tr-player{display:grid;grid-template-columns:288px 1fr;gap:22px;align-items:start}
@media(max-width:900px){.tr-player{grid-template-columns:1fr}}
.tr-rail{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;position:sticky;top:18px}
@media(max-width:900px){.tr-rail{position:static}}
.tr-rail h2{font-size:.78rem!important;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:2px 6px 10px}
.tr-rail ol{list-style:none;margin:0;padding:0;counter-reset:lsn}
.tr-rail li{margin-bottom:2px}
.tr-rail a{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:9px;font-size:.87rem;color:var(--ink);line-height:1.4;border:1.5px solid transparent}
.tr-rail a:hover{background:var(--cream)}
.tr-rail a[aria-current="true"]{background:var(--sage);border-color:var(--green);font-weight:700}
.tr-rail a .mark{flex:0 0 20px;font-size:.82rem;color:var(--green-dark);font-weight:800;line-height:1.5}
.tr-rail a.todo .mark{color:var(--muted)}
.tr-rail .rail-sec{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.tr-progress{font-size:.78rem;color:var(--muted);margin:0 6px 8px}

.tr-lesson{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 30px}
@media(max-width:600px){.tr-lesson{padding:20px}}
.tr-lesson h2{font-family:var(--font-head);font-size:1.5rem;margin:0 0 4px}
.tr-lesson .lmeta{font-size:.8rem;color:var(--muted);margin-bottom:18px}
.tr-lesson p{font-size:1rem;line-height:1.8;color:#2E2E2E;margin:0 0 15px;max-width:68ch}
.tr-lesson h3{font-size:1rem;color:var(--green-dark);margin:24px 0 8px}
.tr-video{background:#11110F;border-radius:14px;padding:26px;color:#fff;margin-bottom:22px}
.tr-video .vtitle{font-weight:700;font-size:1rem;margin:0 0 6px;color:#fff}
.tr-video .vmeta{font-size:.82rem;color:#C9C6BD;margin:0}
.tr-video .vnote{font-size:.82rem;color:#C9C6BD;margin:12px 0 0;border-top:1px solid #34332E;padding-top:12px;line-height:1.65}
.tr-video video,.tr-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#000;display:block;margin-bottom:14px}
.tr-key{background:var(--sage);border-radius:12px;padding:16px 20px;margin:20px 0}
.tr-key h3{margin:0 0 8px;color:var(--green-dark);font-size:.86rem;text-transform:uppercase;letter-spacing:.07em}
.tr-key ul{margin:0;padding-left:20px}
.tr-key li{font-size:.92rem;line-height:1.65;margin-bottom:6px;color:#20402F}
.tr-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}

/* --- knowledge checks & exam --- */
.tr-check{border:1.5px solid var(--line);border-radius:14px;padding:18px 20px;margin-top:24px;background:var(--cream)}
.tr-check legend{font-weight:700;font-size:.92rem;padding:0 6px}
.tr-check .opt{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;margin-bottom:9px;line-height:1.55}
.tr-check .opt input{margin-top:4px;accent-color:var(--green);width:17px;height:17px;flex:0 0 auto}
.tr-check .opt label{font-weight:400;margin:0;cursor:pointer}
.tr-exam .quiz-q{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.tr-exam fieldset{border:0;padding:0;margin:0}
.tr-exam legend{font-weight:700;font-size:.95rem;margin-bottom:10px;line-height:1.5}
.tr-result{border-radius:12px;padding:16px 20px;margin-top:20px;font-size:.95rem;line-height:1.65}
.tr-result.pass{background:#EAF7F0;border:1.5px solid var(--green);color:#0A5B36}
.tr-result.fail{background:#FDEDED;border:1.5px solid var(--red);color:#8E1B1B}
.tr-result b{display:block;font-size:1.05rem;margin-bottom:4px}
.tr-exam .quiz-q .opt{font-size:.92rem;margin-bottom:9px;line-height:1.55;gap:10px}
.tr-exam .quiz-q .opt input{width:17px;height:17px;margin-top:3px;flex:0 0 auto}
.tr-exam .quiz-q .opt label{cursor:pointer;font-weight:400}

/* Focus must always be visible — a keyboard-only learner navigates this
   player entirely by Tab, and the rail links sit on a tinted background. */
.tr-lesson a:focus-visible,.tr-rail a:focus-visible,.tr-course a:focus-visible,
.tr-lesson button:focus-visible,.tr-rail button:focus-visible,.tr-course button:focus-visible,
.tr-filters button:focus-visible,.a11y-bar button:focus-visible,
.tr-lesson input:focus-visible,.tr-lesson textarea:focus-visible,
.tr-lesson h2:focus-visible,.tr-result:focus-visible{
  outline:3px solid var(--green-dark);outline-offset:2px;border-radius:6px}

/* --- glossary & care plan notes --- */
.tr-gloss{margin:0}
.tr-gloss div{border-bottom:1px solid #F0EEE8;padding:11px 0}
.tr-gloss dt{font-weight:700;font-size:.93rem;color:#111}
.tr-gloss dd{margin:3px 0 0;font-size:.9rem;color:var(--muted);line-height:1.65}
.note-eg{border-radius:12px;padding:15px 18px;margin:12px 0;font-size:.92rem;line-height:1.7}
.note-eg.weak{background:#FDEDED;border-left:5px solid var(--red)}
.note-eg.strong{background:#EAF7F0;border-left:5px solid var(--green)}
.note-eg .tag{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.note-eg.weak .tag{color:#8E1B1B}
.note-eg.strong .tag{color:#0A5B36}

/* --- admin training tables --- */
.tr-people{width:100%;border-collapse:collapse}
.tr-people th,.tr-people td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);font-size:.88rem;vertical-align:top}
.tr-people th{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.tr-people tbody tr:hover{background:var(--cream)}
.tr-people .nm{font-weight:700}
.tr-people .sub{font-size:.78rem;color:var(--muted)}
table.tr-matrix{border-collapse:collapse;min-width:720px;width:100%}
table.tr-matrix th,table.tr-matrix td{border:1px solid var(--line);padding:8px 9px;font-size:.82rem;text-align:center;vertical-align:middle}
table.tr-matrix th[scope="row"]{text-align:left;font-weight:700;white-space:nowrap;background:#fff;position:sticky;left:0;z-index:1}
table.tr-matrix thead th{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;vertical-align:bottom;font-weight:700;line-height:1.35}
table.tr-matrix thead th small{font-weight:600;letter-spacing:0;text-transform:none;opacity:.8}
table.tr-matrix abbr{text-decoration:none;border-bottom:1px dotted var(--line);cursor:help}
/* The cell IS the swatch, so the status word sits inside the coloured block.
   Every cell also carries a full sentence for screen readers — colour on its
   own never has to carry the meaning. */
td.tr-cell{font-size:.74rem;font-weight:700;white-space:nowrap}
td.tr-cell.green{background:#EAF7F0;color:#0A5B36}
td.tr-cell.gold{background:#FDF3DA;color:#7A5B00}
td.tr-cell.red{background:#FDEDED;color:#8E1B1B}
td.tr-cell.gray{background:#F2F0EA;color:#5F5D58}
td.tr-cell a{color:inherit}
.tr-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--muted);margin:12px 0}
.tr-legend span{display:inline-flex;align-items:center;gap:6px}
.tr-legend i{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.12);display:inline-block}
.tr-legend i.green{background:#EAF7F0}
.tr-legend i.gold{background:#FDF3DA}
.tr-legend i.red{background:#FDEDED}
.tr-legend i.gray{background:#F2F0EA}
html[data-contrast="high"] td.tr-cell{outline:2px solid currentColor;outline-offset:-3px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .tr-rail,.tr-nav,.a11y-bar,.skip-link,.tr-filters{display:none!important}
  .tr-player{display:block}
  .tr-lesson{border:0;padding:0}
}