/* practice-mode.css -- session 385 (briefs/session-385-brief.md): Practice mode, the Practice page, one run and the run panel, ported from the
   approved drawings (mh-practice-mockups-v1: PracticePage.html, PracticeDashboard.html, PracticeRun.html). Their CSS is the specification:
   every rule below is the drawing's own value, under .pmd and with the drawing's class names given a pm- prefix, so nothing else in the Hub
   changes. The drawings' top bar and menu are context only (the Hub has its own). Phone widths are added at the end. */
.pmd{font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:#4d545a;font-size:14px;line-height:1.45;font-weight:450;letter-spacing:-0.006em;-webkit-font-smoothing:antialiased}
.pmd *{box-sizing:border-box}
.pmd a{color:#1d6e77;text-decoration:none}
.pmd a:hover{text-decoration:underline}
.pmd .pm-wrap{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.pmd .pm-card{background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(14,54,59,.08);overflow:hidden}
.pmd .pm-ic{width:48px;height:48px;border-radius:10px;background:#144d54;color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 48px}
.pmd .pm-ct{font-size:17px;font-weight:700;color:#16181a;letter-spacing:-0.015em;margin:0;line-height:1.2}
.pmd .pm-cs{font-size:12.5px;color:#6b747b}
.pmd .pm-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pmd .pm-green{background:#e2f4ee;color:#08513f}
.pmd .pm-grey{background:#eef1f3;color:#4d545a}
.pmd .pm-teal{background:#dceff0;color:#144d54}
.pmd .pm-amber{background:#fdf0d8;color:#7a5312}
.pmd .pm-red{background:#fbe4e0;color:#8a2617}
.pmd .pm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;font-family:inherit;font-weight:600;font-size:14px;border:1px solid #c9d0d4;background:#fff;color:#16181a;cursor:pointer;white-space:nowrap;text-decoration:none}
.pmd .pm-btn.pm-go{background:linear-gradient(#ffd13a,#f5c21c);border:0;font-weight:700;box-shadow:0 6px 16px rgba(217,106,24,.28)}
.pmd .pm-btn:hover{text-decoration:none;filter:brightness(.97)}
.pmd .pm-btn:focus-visible,.pmd .pm-ed:focus-visible,.pmd .pm-leave:focus-visible,.pmd .pm-gobtn:focus-visible{outline:3px solid #1d6e77;outline-offset:2px}
.pmd .pm-btn[disabled]{opacity:.55;cursor:default}
.pmd .pm-ed{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#1d6e77;background:none;border:0;padding:6px 8px;border-radius:8px;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px}
.pmd .pm-ed:hover{background:#dceff0}
/* the header card */
.pmd .pm-head{padding:20px 22px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.pmd .pm-head h1{margin:0;font-size:28px;font-weight:800;color:#16181a;letter-spacing:-0.03em;line-height:1.45}
.pmd .pm-lead{font-size:15px;margin-top:4px}
.pmd .pm-hmain{flex:1;min-width:320px}
/* the switch and your world */
.pmd .pm-mode{background:#144d54;color:#fff;border-radius:14px;padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.pmd .pm-mode h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-0.02em;color:#fff}
.pmd .pm-mtext{color:#cfe7e8;margin-top:4px;font-size:15px}
.pmd .pm-world{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.pmd .pm-world div{display:flex;flex-direction:column}
.pmd .pm-world b{font-size:24px;font-weight:800;line-height:1.1}
.pmd .pm-world span{font-size:12.5px;color:#cfe7e8}
.pmd .pm-mside{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:220px}
.pmd .pm-mside .pm-btn.pm-go{height:48px;font-size:15px}
.pmd .pm-mside .pm-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.pmd .pm-mnote{font-size:12.5px;color:#cfe7e8;text-align:center}
/* the runs */
.pmd .pm-sechead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pmd .pm-sechead .pm-ct{font-size:20px}
.pmd .pm-runs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pmd .pm-run{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.pmd .pm-rt{font-size:16px;font-weight:700;color:#16181a;line-height:1.3}
.pmd .pm-who{display:flex;gap:6px;flex-wrap:wrap}
.pmd .pm-bar{height:8px;border-radius:999px;background:#e9ecee;overflow:hidden}
.pmd .pm-bar div{height:100%;background:#1d6e77;border-radius:999px}
.pmd .pm-soon{opacity:.75}
.pmd .pm-runfoot{display:flex;align-items:center;gap:10px}
.pmd .pm-runfoot .pm-btn{margin-left:auto;height:36px}
/* who has practiced what */
.pmd .pm-cardhead{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;flex-wrap:wrap}
.pmd .pm-tw{overflow-x:auto}
.pmd .pm-tbl{border-collapse:separate;border-spacing:0;width:100%}
.pmd .pm-tbl th{font-size:12.5px;font-weight:600;color:#6b747b;text-align:left;padding:11px 16px;border-bottom:1px solid #edf0f2;background:#fafbfb;white-space:nowrap;text-transform:none;letter-spacing:normal;border-top:0;box-shadow:none;position:static;z-index:auto;cursor:default;user-select:auto}
.pmd .pm-tbl th.pm-c,.pmd .pm-tbl td.pm-c{text-align:center}
.pmd .pm-tbl td{padding:12px 16px;border-bottom:1px solid #edf0f2;font-size:14px;color:#4d545a;line-height:1.45;vertical-align:middle;white-space:normal;overflow:visible;max-width:none}
.pmd .pm-nm, .pmd .pm-tbl td.pm-nm{font-weight:700;color:#16181a}
.pmd .pm-tbl tbody td:first-child{box-shadow:none;transition:none}   /* the Hub's row hover edge is not in the drawing */
.pmd .pm-yes{display:inline-flex;width:24px;height:24px;border-radius:999px;background:#1d6e77;color:#fff;align-items:center;justify-content:center}
.pmd .pm-half{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 8px;border-radius:999px;background:#fdf0d8;color:#7a5312;font-size:12px;font-weight:700}
.pmd .pm-no{display:inline-block;width:14px;height:2px;border-radius:2px;background:#c9d0d4;vertical-align:middle}
/* would have sent */
.pmd .pm-msg{display:grid;grid-template-columns:150px 170px minmax(0,1fr);gap:14px;padding:12px 16px;border-top:1px solid #edf0f2;font-size:13.5px;align-items:start}
.pmd .pm-bubble{background:#e9ecee;border-radius:14px 14px 14px 4px;padding:10px 12px;color:#16181a;white-space:pre-wrap;overflow-wrap:anywhere}
.pmd .pm-msg b{color:#16181a}
.pmd .pm-empty{padding:12px 16px 16px;border-top:1px solid #edf0f2;font-size:13.5px}

/* the banner, on every Hub screen while practice mode is on (PracticeDashboard.html) */
.pmd.pm-band{background:#ff8a33;color:#16181a;display:flex;align-items:center;gap:14px;padding:10px 24px;flex-wrap:wrap}
/* The Hub's top bar and its stripe are fixed (index.html .top, .topband): the banner is fixed just under them, and the page moves down by
   the banner's own height (practice-mode.js measures it into --pm-band-h). */
#pmBand{position:fixed;top:calc(var(--hdrH) + var(--bandH));left:var(--side-w);right:0;z-index:14}
body.phone #pmBand{left:0}
body.pm-on #page{margin-top:var(--pm-band-h, 54px)}
.pmd.pm-band b{font-size:15px}
.pmd .pm-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.55);font-weight:700;font-size:13px;color:#16181a;text-decoration:none}
.pmd .pm-chip:hover{background:rgba(255,255,255,.8);text-decoration:none}
.pmd .pm-leave{height:34px;padding:0 14px;border-radius:9px;border:0;background:#16181a;color:#fff;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer}
.pmd.pm-band .pm-leave{margin-left:auto}
.pmd .pm-leave:hover{background:#2a2e31}
/* the run, beside you on every screen */
.pmd.pm-panel{position:fixed;right:20px;width:340px;max-width:calc(100vw - 40px);z-index:35;display:flex;flex-direction:column;gap:16px;overflow:auto;padding-bottom:4px}
.pmd.pm-panel > *{flex:0 0 auto}
.pmd .pm-pcard{padding:16px 18px}
.pmd .pm-toast .pm-ptitle{align-items:flex-start}
.pmd .pm-tclose{margin-left:auto;background:#2a2e31;color:#fff;height:28px;padding:0 10px;font-size:12.5px}
.pmd .pm-tclose:hover{background:#3a3f43}
.pmd .pm-ptitle{display:flex;align-items:center;gap:8px}
.pmd .pm-ptitle .pm-leave{margin-left:auto;background:#e9ecee;color:#16181a;height:30px}
.pmd .pm-ptitle .pm-leave:hover{background:#dde1e4}
.pmd .pm-step{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid #edf0f2;align-items:start}
.pmd .pm-step.pm-first{border-top:0}
.pmd .pm-step b{color:#16181a}
.pmd .pm-sn{width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.pmd .pm-done{background:#1d6e77;color:#fff}
.pmd .pm-now{background:#ffd13a;color:#144d54}
.pmd .pm-todo{background:#e9ecee;color:#6b747b}
.pmd .pm-gobtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;background:linear-gradient(#ffd13a,#f5c21c);border:0;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;margin-top:6px;color:#1d6e77;text-decoration:none}
.pmd .pm-gobtn:hover{text-decoration:none;filter:brightness(.97)}
.pmd .pm-toast{background:#16181a;color:#fff;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.pmd .pm-tbubble{background:#2a2e31;border-radius:12px 12px 12px 4px;padding:10px 12px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.pmd.pm-panel .pm-tbubble{max-height:180px;overflow:auto}
.pmd.pm-panel.pm-bottom{top:auto !important;bottom:20px;max-height:none}
.pmd .pm-ttitle{font-size:12.5px;font-weight:700;color:#ffd13a}
.pmd .pm-tnote{font-size:12px;color:#cfd4d7}
.pmd .pm-tnote a{color:#ffd13a;text-decoration:underline}
.pmd .pm-broke{background:#fbe4e0;color:#8a2617;border-radius:10px;padding:8px 10px;font-size:12.5px;margin-top:6px}
/* one run (PracticeRun.html) */
.pmd .pm-crumb{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#6b747b;flex-wrap:wrap}
.pmd .pm-crumb a{text-decoration:underline;text-underline-offset:3px}
.pmd .pm-rstep{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;padding:16px 20px;border-top:1px solid #edf0f2;align-items:start}
.pmd .pm-rstep.pm-first{border-top:0}
.pmd .pm-rsn{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.pmd .pm-sh{font-size:16px;font-weight:700;color:#16181a}
.pmd .pm-where{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#144d54;background:#dceff0;border-radius:999px;padding:2px 10px;margin-top:6px}
.pmd .pm-cur{background:#fffaf0}
.pmd .pm-look{background:#f2f4f5;border-radius:10px;padding:10px 12px;font-size:13.5px;margin-top:8px}
.pmd .pm-rstep .pm-btn{height:36px}
.pmd .pm-hbtns{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:220px}
/* a screen with no practice version */
.pmd .pm-nover{padding:24px;display:flex;flex-direction:column;gap:10px;max-width:640px;margin:24px auto}
.pmd .pm-nover h2{margin:0;font-size:20px;font-weight:800;color:#16181a}
.pmd .pm-nover .pm-acts{display:flex;gap:10px;flex-wrap:wrap}
.pmd .pm-dashline{margin:0 0 12px;font-size:13px}
/* the Practice page's own extras (the phone link, the practice QC) keep practice.css; they sit in a card here */
.pmd .pm-extra{padding:16px 18px}

/* the Dashboard in practice mode: only the parts with a practice version (the day board, Needs you and its four tiles) */
body.pm-on #dbTeamRow, body.pm-on #dbRoutes, body.pm-on #dbSharedBox, body.pm-on #dashHealth, body.pm-on #dashHealthReport, body.pm-on #dbFeedChip,
body.pm-on #dbComms, body.pm-on #dbLinens, body.pm-on #dbAvail, body.pm-on #txDash, body.pm-on #dbPilotClose, body.pm-on #dbNotOut, body.pm-on #dbHealthChip, body.pm-on #dbRcLine, body.pm-on #mhPageSettings{display:none !important}
/* room for the run panel beside the page */
@media (min-width:1181px){ body.pm-panel-on #page{padding-right:380px} }
@media (max-width:1180px){
  body.pm-on #page{padding-bottom:260px}   /* room to scroll everything above the run bar */
  .pmd.pm-panel{left:auto;right:12px;bottom:12px;top:auto !important;width:340px;max-height:60vh}
  .pmd .pm-pbar{padding:12px 14px}
  .pmd .pm-pbar .pm-ptitle .pm-leave + .pm-leave{margin-left:6px}
}
@media (max-width:1100px){ .pmd .pm-runs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .pmd.pm-band{padding:8px 16px;gap:8px}
  .pmd.pm-band b{font-size:13.5px;flex:1 1 220px;min-width:0}
  .pmd.pm-band .pm-leave{margin-left:0}
  .pmd .pm-runs{grid-template-columns:minmax(0,1fr)}
  .pmd .pm-mode{grid-template-columns:minmax(0,1fr);padding:18px 16px}
  .pmd .pm-mside{min-width:0}
  .pmd .pm-hmain{min-width:0}
  .pmd .pm-head h1{font-size:24px}
  .pmd .pm-msg{grid-template-columns:minmax(0,1fr);gap:6px}
  .pmd .pm-rstep{grid-template-columns:36px minmax(0,1fr);padding:14px 16px}
  .pmd .pm-rstep > :last-child{grid-column:2}
  .pmd .pm-hbtns{min-width:0;width:100%}
  .pmd.pm-panel{left:12px;right:12px;width:auto;max-width:none}
}