/* =========================================================================
   public/css/dashboard.css — v4.0.0, owner A6. The Program Dashboard, the
   review queue page, Resident Records and the Pathway page.
   Tokens only (defined in index.html; this file never declares :root or a
   colour). It loads AFTER index.html's inline sheet, so an equal-specificity
   rule here wins; every width-dependent rule is `@media screen and (…)` so
   nothing here can re-stack a table on paper (index.html's print block
   resets tables; the print additions for these views are at the end).
   Shared primitives used as-is from index.html: .card .stats .stat .pill
   .segbar/.seg .stagebadge .tablewrap table.roster .youchip a.statlink
   .viewswitch .notice .empty .fwtable.
   ========================================================================= */

/* ===== the dashboard page =============================================== */
.dashboard{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.dashhead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4)}
.dashtitle{flex:1 1 20rem;min-width:0}
.crumbs ol{list-style:none;margin:0 0 var(--space-1);padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
.crumbs li{overflow-wrap:anywhere}
.crumbs li+li::before{content:"›";content:"›" / "";margin-right:var(--space-2);color:var(--text-muted)}
.crumbs [aria-current]{color:var(--text);font-weight:600}
.dashtitle h1{margin:0;font-size:var(--fs-2xl);line-height:1.2;letter-spacing:-.015em}
.dashsub{margin:var(--space-1) 0 0;color:var(--text-muted);font-size:var(--fs-sm);overflow-wrap:anywhere}
.dashacts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2) var(--space-3);min-width:0}
.progpick{display:flex;flex-direction:column;gap:2px;min-width:0}
.progpick label{font-size:var(--fs-xs);font-weight:600;color:var(--text-muted)}
.progpick select{max-width:18rem}

/* the Export menu: a disclosure button and a short list */
.exportmenu{position:relative}
.exportmenu .menu{position:absolute;right:0;top:calc(100% + var(--space-1));z-index:30;min-width:14rem;
  display:flex;flex-direction:column;gap:2px;padding:var(--space-1);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3)}
.exportmenu .menu[hidden]{display:none}
.exportmenu .menu button,.exportmenu .menu a{display:flex;justify-content:flex-start;align-items:center;width:100%;
  background:transparent;border:1px solid transparent;color:var(--text);font-weight:500;font-size:var(--fs-base);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);text-decoration:none;text-align:left}
.exportmenu .menu button:hover,.exportmenu .menu a:hover{background:var(--tint);color:var(--primary);border-color:transparent}

/* the four actionable cards: icon · count · label · subtitle · chevron */
.dashcards{grid-template-columns:repeat(auto-fit,minmax(min(13.5rem,100%),1fr));gap:var(--space-4);margin:0}
.dashcards a.statlink{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);min-width:0}
.dashcards a.statlink:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.dashcards .stat-ic{flex:none;width:3rem;height:3rem;border-radius:var(--radius-lg);display:inline-flex;align-items:center;
  justify-content:center;font-size:1.5rem;background:var(--tint);color:var(--primary)}
.dashcards [data-card="awaiting"] .stat-ic{background:var(--warning-bg);color:var(--warning)}
.dashcards [data-card="attention"] .stat-ic{background:var(--danger-bg);color:var(--danger)}
.dashcards [data-card="complete"] .stat-ic,.dashcards [data-card="mycases"] .stat-ic{background:var(--success-bg);color:var(--success)}
.dashcards .stat-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.dashcards .stat .n{font-size:var(--fs-2xl);line-height:1.15}
.dashcards .stat .l{font-size:var(--fs-base);font-weight:600;color:var(--text);margin-top:0;line-height:1.35}
.dashcards .stat-sub{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.4;overflow-wrap:anywhere}
.dashcards .stat-chev{flex:none;color:var(--text-muted);font-size:1.25rem;display:inline-flex}

/* the view switcher reads as three tabs (index.html .viewswitch paints the pressed one) */
.dashboard .viewswitch{margin:0}
.dashboard .viewswitch button{background:var(--surface);padding:var(--space-2) var(--space-5);font-size:var(--fs-base)}
.dashboard .viewswitch button[aria-pressed="true"],.dashboard .viewswitch button[aria-pressed="true"]:hover{
  background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.dashboard .viewswitch button svg{font-size:1.15em}

/* the band: Requires Your Review (or My Next Steps) and Residents by Stage */
.dashband{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.dashlower{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
.dashpanel{padding:var(--space-4) var(--space-5);min-width:0}
.panelhead{display:flex;align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.panelhead h2{margin:0;font-size:var(--fs-lg)}
.countbadge{display:inline-flex;align-items:center;justify-content:center;min-width:1.6rem;height:1.6rem;padding:0 var(--space-2);
  border-radius:var(--radius-pill);background:var(--danger);color:var(--on-danger);font-size:var(--fs-xs);font-weight:700;
  font-variant-numeric:tabular-nums}
.panellink{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.panellink:hover{text-decoration:underline}
.panelempty{display:flex;align-items:center;gap:var(--space-2);color:var(--text-muted);margin:var(--space-2) 0}

/* review rows: avatar · who · stage · what · Review */
.reviewlist{list-style:none;margin:0;padding:0}
.reviewitem{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--border)}
.reviewitem:first-child{border-top:0;padding-top:0}
.avatar{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--tint);color:var(--primary);font-weight:700;font-size:var(--fs-sm)}
.ri-who{flex:0 1 10rem;min-width:7rem;display:flex;flex-direction:column}
.ri-name,.ri-title{font-weight:600;overflow-wrap:anywhere;line-height:1.4}
.ri-pgy,.ri-detail{font-size:var(--fs-xs);color:var(--text-muted);overflow-wrap:anywhere;line-height:1.45}
.ri-stage{flex:0 1 14rem;min-width:0}
.ri-what{flex:1 1 14rem;min-width:0;display:flex;flex-direction:column}
.ri-go{flex:none;margin-left:auto}
.ri-mine{display:inline-block;margin-top:2px;font-size:var(--fs-xs);font-weight:700;color:var(--primary)}

/* stage chips: "3 – Bedside" (one hue; Training Complete in the success pair) */
.stagechip{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--fs-xs);font-weight:600;line-height:1.45;
  padding:2px var(--space-3);border-radius:var(--radius-pill);background:var(--tint);color:var(--primary);white-space:nowrap;max-width:100%}
.stagechip.long{white-space:normal;overflow-wrap:anywhere}
.stagechip.done{background:var(--success-bg);color:var(--success)}

/* Residents by Stage: one column per stage, then the stacked total. A label never breaks inside a word:
   the panel is a size container and picks 6 × 1, 3 × 2 or 2 × 3 columns from its OWN width (it is half
   the band on a wide screen, all of it below 1400 px); without container queries the columns wrap. */
#stageChart{container-type:inline-size}
.stagecols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(6.75rem,1fr));gap:var(--space-2)}
@container (min-width:44rem){ .stagecols{grid-template-columns:repeat(6,minmax(0,1fr))} }
@container (min-width:20rem) and (max-width:43.99rem){ .stagecols{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (max-width:19.99rem){ .stagecols{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stagebar a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;height:100%;
  padding:var(--space-3) var(--space-2);border:1px solid var(--border);border-top:4px solid var(--primary);
  border-radius:var(--radius-md);background:var(--surface-2);color:var(--text);text-decoration:none;min-width:0}
.stagebar a:hover{border-color:var(--primary);color:var(--text)}
.stagebar[data-stage="complete"] a{border-top-color:var(--success)}
.stagebar .snum{width:1.75rem;height:1.75rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--on-primary);font-weight:700;font-size:var(--fs-sm);flex:none}
.stagebar[data-stage="complete"] .snum{background:var(--success);color:var(--on-success)}
.stagebar .sname{font-size:var(--fs-xs);font-weight:600;line-height:1.3;overflow-wrap:normal;word-break:normal;hyphens:manual;
  min-height:2.6em;display:flex;align-items:center;justify-content:center}
.stagebar .count{font-size:var(--fs-xl);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stagebar .cunit{font-size:var(--fs-xs);color:var(--text-muted)}
.stackrow{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4)}
.stackbar{flex:1 1 auto;min-width:0;display:flex;gap:2px;height:1.75rem;border-radius:var(--radius-md);overflow:hidden;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-strong)}
.stackseg{flex-basis:0;min-width:1.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--primary);color:var(--on-primary);font-size:var(--fs-xs);font-weight:700;font-variant-numeric:tabular-nums}
.stackseg:nth-child(even){background:var(--primary-hover)}
.stackseg[data-stage="complete"]{background:var(--success);color:var(--on-success)}
.stackseg.empty{flex:1 1 auto;background:transparent}
.stacktotal{margin:0;font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap;text-align:center}
.stacktotal .n{display:block;font-size:var(--fs-xl);font-weight:700;color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums}

/* My Next Steps (the resident's band); what waits for the Administrator follows under its own heading */
.nextsteps{margin:0;padding-left:var(--space-5)}
.nextsteps li{padding:var(--space-1) 0;line-height:1.45}
.nextsteps a{font-weight:600}
.nsdetail{display:block;font-size:var(--fs-xs);color:var(--text-muted)}
#nextSteps .nswaithead{margin:var(--space-3) 0 var(--space-1);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}
#nextSteps .nextsteps + .nswaithead{padding-top:var(--space-3);border-top:1px solid var(--border)}

/* the roster card */
.rostercard{padding:0;overflow:hidden}
.rosterhead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5) var(--space-3)}
.rosterhead h2{margin:0;font-size:var(--fs-lg);flex:1 1 auto}
.gcount{color:var(--text-muted);font-weight:500}
.rosterfilters{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;min-width:0}
.searchbox{display:inline-flex;max-width:100%;min-width:0}
.rosterfilters input[type=search]{width:16rem;max-width:100%}
.rosterfilters select{max-width:15rem}
.activefilter{margin:0;padding:0 var(--space-5) var(--space-3);font-size:var(--fs-sm)}
.activefilter .linklike{font-size:var(--fs-sm)}
.rostergroup h3{margin:0;font-size:var(--fs-md);padding:var(--space-3) var(--space-5);background:var(--surface-2);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.groupempty{margin:0;padding:var(--space-3) var(--space-5)}
.rosterfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-3) var(--space-5);border-top:1px solid var(--border)}
#rosterCount{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.pager{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap}
.pagebtn{min-width:2.25rem;padding:var(--space-1) var(--space-2);font-variant-numeric:tabular-nums}
.pagebtn.current,.pagebtn.current:hover{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pgchev{display:inline-flex}
.pgchev.prev svg{transform:rotate(180deg)}
.rostercard .empty{padding:var(--space-8) var(--space-5)}

/* roster cells. `overflow-wrap:break-word`, never `anywhere`, in an auto-layout table: `anywhere`
   lowers a cell's min-content width and the table then squeezes a column to a letter per line.
   Rows are compact: every cell is at most two lines; a longer value is clipped on screen (the whole
   text stays in the DOM for screen readers and in the tooltip, and a focused link opens up). */
.roster.t-dashboard{table-layout:auto}
.roster.t-dashboard th{white-space:nowrap}
.roster.t-dashboard td{vertical-align:middle;overflow-wrap:break-word;padding-top:var(--space-2);padding-bottom:var(--space-2)}
.roster.t-dashboard td:nth-child(2){white-space:nowrap}
.roster.t-dashboard td:nth-child(7){white-space:normal}
.roster.t-dashboard .stagechip{white-space:normal}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
.clamp1{-webkit-line-clamp:1;line-clamp:1}
.clamp2{-webkit-line-clamp:2;line-clamp:2}
a.clamp:hover,a.clamp:focus-visible{-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
/* a status pill is one line. From 600 px up the table keeps its 62rem column model (it scrolls
   inside its region when narrower), so every label fits whole; the ellipsis is only a guard — the
   tooltip and the screen-reader text always carry the whole label. */
.roster.t-dashboard .pill{max-width:100%;vertical-align:middle;white-space:nowrap;padding-left:6px;padding-right:6px;gap:5px}
.roster.t-dashboard .pilltext{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* the stage chip ("1 – Introduction") stays one line in the roster */
.roster.t-dashboard .stagechip:not(.done){white-space:nowrap;font-size:var(--fs-2xs);padding-left:var(--space-2);padding-right:var(--space-2)}
.roster.t-dashboard .stagechip.done{font-size:var(--fs-2xs);padding-left:var(--space-2);padding-right:var(--space-2)}
.roster.t-dashboard td:first-child .pgy.clamp{display:-webkit-box}
.roster.t-dashboard .reasons{margin-top:2px;font-size:var(--fs-xs);color:var(--text-muted);line-height:1.4}
.roster.t-dashboard .detail{display:block;min-width:0}
.roster.t-dashboard .det1,.roster.t-dashboard .det2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.rowlink{color:var(--text);font-weight:600;text-decoration:none}
a.rowlink:hover{color:var(--primary);text-decoration:underline}
.roster.t-dashboard td:first-child .pgy{display:block;margin-top:1px}
.progcell{display:flex;align-items:center;gap:var(--space-2);min-width:7rem}
.progcell .pct{min-width:2.75rem;font-size:var(--fs-sm);font-weight:600;color:var(--text);text-align:right}
.pbar{flex:1 1 4rem;min-width:3rem;height:.6rem;border-radius:var(--radius-pill);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--border-strong);overflow:hidden}
.pfill{display:block;height:100%;background:var(--success);border-radius:var(--radius-pill)}
/* each stage's own completion under the overall figure: index.html's five-segment .segbar, sized to the
   column (its 120 px minimum is for a Resident Records card) */
.roster.t-dashboard .stagemarks{display:block;margin-top:var(--space-1)}
.roster.t-dashboard .stagemarks .segbar{min-width:0;gap:2px}
.roster.t-dashboard .stagemarks .seg{min-width:0}
/* the quiet "Stage 1 not yet approved" line under the current stage: a status pill's dot and words, no fill */
.roster.t-dashboard .s1pending{display:flex;align-items:flex-start;gap:5px;margin-top:var(--space-1);font-size:var(--fs-xs);font-weight:600;
  line-height:1.35;color:var(--warning)}
.roster.t-dashboard .s1pending::before{content:"";width:7px;height:7px;margin-top:calc((1.35em - 7px) / 2);border-radius:50%;background:currentColor;flex:none}
.det1,.det2{display:block;font-size:var(--fs-xs);line-height:1.45}
.det2{color:var(--text-muted)}
.det2 b{color:var(--text)}
.nextlink{font-weight:600;font-size:var(--fs-sm);line-height:1.4}
.nextwho{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.4}
.roster.t-dashboard td.actions .btnlink{white-space:nowrap}
.roster tr.me td{background:var(--tint)}
.roster tr.me .youchip{box-shadow:inset 0 0 0 1px var(--primary)}

/* Recent Activity */
.activitylist{list-style:none;margin:0;padding:0}
.activityitem{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-2) 0;border-top:1px solid var(--border)}
.activityitem:first-child{border-top:0;padding-top:0}
.act-ic{flex:none;width:2rem;height:2rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--tint);color:var(--primary);font-size:1rem}
.act-ic.ok{background:var(--success-bg);color:var(--success)}
.act-ic.warn{background:var(--warning-bg);color:var(--warning)}
.act-body{display:flex;flex-direction:column;min-width:0;font-size:var(--fs-sm);line-height:1.45;overflow-wrap:anywhere}
.act-body time,.act-by{font-size:var(--fs-xs);color:var(--text-muted)}
#activityMore{margin-top:var(--space-3)}

/* ===== #/review ======================================================== */
.reviewpage .pagehead{margin-bottom:var(--space-2)}
.reviewlede{margin:0 0 var(--space-4)}
.typechips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4)}
.chipbtn{border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);font-size:var(--fs-sm);background:var(--surface)}
.chipbtn[aria-pressed="true"],.chipbtn[aria-pressed="true"]:hover{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.chipbtn .cnt{font-weight:700;font-variant-numeric:tabular-nums}
.t-review td{vertical-align:middle;overflow-wrap:anywhere}
.t-review .rname,.t-review .ri-title{display:block}
.t-review .pgy,.t-review .ri-detail{display:block}
.t-review td.actions .btnlink{white-space:nowrap}
.waitlist{list-style:none;margin:0;padding:var(--space-2) var(--space-5)}
.waititem{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center;padding:var(--space-3) 0;border-top:1px solid var(--border)}
.waititem:first-child{border-top:0}
.reviewpage .waithead{margin:var(--space-5) 0 var(--space-2);font-size:var(--fs-md)}
.reviewpage .reviewlede + .waithead{margin-top:0}

/* ===== #/records ======================================================= */
.recordsbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-4)}
.recordsbar label{font-weight:600;font-size:var(--fs-sm)}
.recordsbar input[type=search]{flex:0 1 22rem;min-width:0;max-width:100%}
#recordsCount{margin:0}
.recgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-4)}
.reccard{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--surface);
  cursor:pointer;box-shadow:var(--shadow-1);min-width:0;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.reccard:hover{border-color:var(--primary);box-shadow:var(--shadow-2)}
.reccard:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}
.reccard .rc-top{display:flex;align-items:flex-start;gap:var(--space-3)}
.reccard .rc-id{flex:1 1 auto;min-width:0}
.reccard :is(h2,h3){margin:0;font-size:var(--fs-base);font-weight:600;overflow-wrap:anywhere}
.reccard .rc-meta{font-size:var(--fs-xs);color:var(--text-muted);margin-top:1px;overflow-wrap:anywhere}
.reccard .rc-stage{font-size:var(--fs-sm);margin:var(--space-3) 0 var(--space-2);color:var(--text)}
.reccard .segbar{min-width:0}
.reccard .rc-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:var(--space-3);gap:var(--space-2)}

/* ===== #/pathway ======================================================= */
.pathway-main{max-width:960px;margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-16)}
.pathway{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.pw-hero{padding:var(--space-8);border-radius:var(--radius-xl)}
.pw-eyebrow{margin:0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--primary);font-weight:600}
.pw-hero h1{margin:var(--space-2) 0;font-size:var(--fs-3xl);line-height:1.15;letter-spacing:-.02em}
.pw-lead{margin:0 0 var(--space-4);font-size:var(--fs-md);color:var(--text-muted);max-width:44rem;line-height:1.55}
.pw-section h2{margin:0 0 var(--space-1);font-size:var(--fs-xl)}
.pw-lede{color:var(--text-muted);max-width:44rem;margin:0 0 var(--space-4)}
.pw-stages{list-style:none;margin:0;padding:0}
.pw-stage{display:flex;gap:var(--space-4)}
.pw-rail{display:flex;flex-direction:column;align-items:center;flex:none}
.pw-num{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.pw-line{flex:1;width:2px;background:var(--border);margin:var(--space-1) 0}
.pw-stage:last-child .pw-line{display:none}
.pw-body{flex:1 1 auto;min-width:0;padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4)}
.pw-body h3{margin:0 0 var(--space-1);font-size:var(--fs-lg)}
.pw-purpose{color:var(--text-muted);margin:0 0 var(--space-2)}
.pw-block h4{margin:var(--space-3) 0 var(--space-1);font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.pw-block p{margin:0 0 var(--space-2)}
.pw-list{margin:0 0 var(--space-2);padding-left:var(--space-5)}
.pw-list li{padding:2px 0;line-height:1.5}
.pw-done{margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3);background:var(--surface-2);
  border-left:3px solid var(--success);border-radius:var(--radius-md);line-height:1.55}
.pw-done b{color:var(--success)}
.pw-details{margin:var(--space-2) 0}
.pw-details > summary{cursor:pointer;font-weight:600;color:var(--primary);padding:var(--space-1) 0}
.pw-details[open] > summary{margin-bottom:var(--space-1)}
.pw-table td{overflow-wrap:anywhere}

/* ===== widths =========================================================== */
@media screen and (min-width:1400px){
  .dashband{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
/* ≥600: the 8-column staff roster has a fixed column model sized to fit the 1280 px desktop
   (≈996 px of content); narrower, it keeps its columns and scrolls inside its own labelled region
   with the name column pinned. */
@media screen and (min-width:600px){
  .roster.t-dashboard:not(.t-cohortview){table-layout:fixed;min-width:62rem}
  .roster.t-dashboard:not(.t-cohortview) :is(th,td){padding-left:var(--space-2);padding-right:var(--space-2);overflow-wrap:anywhere}
  .roster.t-dashboard:not(.t-cohortview) :is(th,td):first-child{padding-left:var(--space-4)}
  .roster.t-dashboard:not(.t-cohortview) th{white-space:normal}
  .roster.t-dashboard:not(.t-cohortview) th:nth-child(1){width:10rem}
  .roster.t-dashboard:not(.t-cohortview) th:nth-child(2){width:4rem}
  .roster.t-dashboard:not(.t-cohortview) th:nth-child(3){width:7.5rem}
  .roster.t-dashboard:not(.t-cohortview) th:nth-child(4){width:5rem}
  .roster.t-dashboard:not(.t-cohortview) th:nth-child(5){width:9.75rem}
  .roster.t-dashboard:not(.t-cohortview) th:nth-child(7){width:7.75rem}
  .roster.t-dashboard:not(.t-cohortview) th:nth-child(8){width:7.25rem}
  .roster.t-dashboard:not(.t-cohortview) .progcell{min-width:0;gap:var(--space-1)}
  .roster.t-dashboard:not(.t-cohortview) .progcell .pct{min-width:2.4rem;flex:none}
  .roster.t-dashboard:not(.t-cohortview) .pbar{min-width:1rem}
  .roster.t-dashboard:not(.t-cohortview) td.actions .btnlink{padding-left:var(--space-2);padding-right:var(--space-2)}
  .t-review{min-width:44rem}
  /* a resident's cohort: the same four columns in every group, so the grouped layouts line up */
  .roster.t-dashboard.t-cohortview{table-layout:fixed}
  .roster.t-dashboard.t-cohortview th:nth-child(2){width:5.5rem}
  .roster.t-dashboard.t-cohortview th:nth-child(3){width:10rem}
  .roster.t-dashboard.t-cohortview th:nth-child(4){width:13rem}
}
/* a wide roster card (the 1680 px desktop) shares its extra width between Name and Next Action
   instead of handing all of it to the Approval Status column */
#roster{container-type:inline-size}
@media screen and (min-width:600px){
  @container (min-width:70rem){
    .roster.t-dashboard:not(.t-cohortview) th:nth-child(1){width:13rem}
    .roster.t-dashboard:not(.t-cohortview) th:nth-child(7){width:11.5rem}
  }
}
@media screen and (min-width:600px) and (max-width:1279.98px){
  .roster.t-dashboard:not(.t-cohortview) th:first-child,.roster.t-dashboard:not(.t-cohortview) td:first-child{
    position:sticky;left:0;z-index:2;background:var(--surface);border-right:1px solid var(--border)}
  .roster.t-dashboard:not(.t-cohortview) th:first-child{z-index:3;background:var(--surface-2)}
  .roster.t-dashboard tbody tr[data-action]:hover td:first-child{background:var(--surface-2)}
}
/* phone: every roster row becomes a card, each cell labelled */
@media screen and (max-width:599.98px){
  .dashtitle h1{font-size:var(--fs-xl)}
  .dashacts{width:100%}
  .dashacts > *{flex:1 1 auto}
  .dashacts .btnlink,.dashacts > .ghost{width:100%}
  .exportmenu > button{width:100%}
  .exportmenu .menu{position:static;margin-top:var(--space-1);box-shadow:none}
  .progpick select{max-width:none;width:100%}
  .dashcards a.statlink{padding:var(--space-3) var(--space-4)}
  .dashboard .viewswitch button{flex:1 1 auto;padding:var(--space-2) var(--space-3)}
  .dashpanel{padding:var(--space-4)}
  .rosterhead{padding:var(--space-4) var(--space-4) var(--space-3)}
  .rosterfilters,.rosterfilters .searchbox{width:100%}
  .rosterfilters input[type=search],.rosterfilters select{width:100%;max-width:none}
  .rosterfilters select{flex:1 1 9rem}
  .rostergroup h3,.groupempty,.activefilter{padding-left:var(--space-4);padding-right:var(--space-4)}
  .rosterfoot{padding:var(--space-3) var(--space-4)}
  .ri-go{width:100%}
  .stackrow{flex-wrap:wrap}
  :is(.roster.t-dashboard,.t-review){display:block;padding:var(--space-2)}
  :is(.roster.t-dashboard,.t-review) thead{display:none}
  :is(.roster.t-dashboard,.t-review) tbody{display:block}
  :is(.roster.t-dashboard,.t-review) tr{display:block;background:var(--surface-2);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2)}
  :is(.roster.t-dashboard,.t-review) tr:last-child{margin-bottom:0}
  :is(.roster.t-dashboard,.t-review) td{display:block;width:auto;border:0;padding:var(--space-1) 0;text-align:left;min-width:0}
  :is(.roster.t-dashboard,.t-review) td+td{border-top:1px solid var(--border)}
  :is(.roster.t-dashboard,.t-review) td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-2xs);
    font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:1px}
  :is(.roster.t-dashboard,.t-review) td:is([data-label="Name"],[data-label="Resident"],[data-label="Record"],[data-label="Action"])::before{content:none}
  :is(.roster.t-dashboard,.t-review) td:empty{display:none}
  .roster.t-dashboard td.actions .btnlink,.t-review td.actions .btnlink{width:100%}
  .roster tr.me{background:var(--tint)}
  .roster tr.me td{background:transparent}
  /* the cohort's four fields fit two lines on a phone: the name, then PGY · stage · progress */
  .roster.t-cohortview tr{display:grid;grid-template-columns:auto auto minmax(6rem,1fr);gap:var(--space-1) var(--space-3);align-items:center}
  .roster.t-cohortview td{padding:0}
  .roster.t-cohortview td+td{border-top:0}
  .roster.t-cohortview td[data-label="Name"]{grid-column:1/-1;padding-bottom:var(--space-1)}
  .roster.t-cohortview td[data-label]::before{content:none}
  .waitlist{padding:var(--space-2) var(--space-4)}
  .pathway-main{padding:var(--space-4) var(--space-4) var(--space-12)}
  .pw-hero{padding:var(--space-5)}
  .pw-hero h1{font-size:var(--fs-2xl)}
  .pw-stage{gap:var(--space-2)}
  .pw-body{padding:var(--space-3) var(--space-4)}
}
@media (pointer:coarse){
  .panellink,.stagebar a,.activityitem a,.nextsteps a,.pw-details > summary{min-height:44px}
  .panellink,.activityitem a,.nextsteps a{display:inline-flex;align-items:center}
}
@media (forced-colors:active){
  .stackseg,.stagebar .snum,.pfill,.countbadge{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .stagebar a,.reccard,.exportmenu .menu,.dashpanel{border:1px solid CanvasText}
  .pbar{forced-color-adjust:none;background:Canvas;box-shadow:inset 0 0 0 1px CanvasText}
  .chipbtn[aria-pressed="true"]{background:Highlight;color:HighlightText;border-color:Highlight}
}

/* ===== print: the record of who is where, without the controls ========= */
@media print{
  .dashacts,.viewswitch,.rosterfilters,.pager,.panellink,#activityMore,.activefilter .linklike,.typechips,.recordsbar input,.recordsbar label,.progpick{display:none!important}
  /* the stacked bar on paper: white segments, black numbers, 1 px black outlines */
  .stackbar{background:#fff!important;border:1px solid #000!important;box-shadow:none!important}
  .stackseg{background:#fff!important;color:#000!important;border-right:1px solid #000!important;text-shadow:none!important}
  .stackseg:last-child{border-right:0!important}
  .dashband,.dashlower{display:block}
  .dashpanel{border:0;box-shadow:none;padding:0;margin-bottom:12pt}
  .rostercard{overflow:visible}
  .stackbar,.stackseg,.stagebar .snum,.pfill,.pbar,.countbadge,.stagechip,.avatar,.act-ic{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .stagecols{grid-template-columns:repeat(6,minmax(0,1fr))}
  .stagebar a{break-inside:avoid}
  .reviewitem,.activityitem,.pw-stage,.reccard{break-inside:avoid}
  .roster.t-dashboard:not(.t-cohortview){min-width:0!important}
  /* nothing is clipped on paper */
  .clamp{display:block!important;-webkit-line-clamp:unset!important;line-clamp:none!important;overflow:visible!important}
  .roster.t-dashboard .pilltext,.roster.t-dashboard .det1,.roster.t-dashboard .det2{white-space:normal!important;overflow:visible!important}
  .roster.t-dashboard th:first-child,.roster.t-dashboard td:first-child{position:static!important}
  .pw-details{display:block}
  .pw-details > summary{display:none}
}