/* MHG Ascend — application stylesheet
   Ported from the proposal figures. No inline style attributes anywhere in the
   views: the CSP forbids them. Colors meet WCAG 2.1 AA contrast on white.
   Graphics pages count toward the Volume I page limit, so every screen is
   built to stay legible when printed in grayscale at half size. */

:root {
  /* MHG house palette, shared with mhgascend.com and mhgtelos.com */
  --navy:      #14243a;   /* ink */
  --navy-mid:  #2f6db3;   /* blue — links, single-series charts */
  --steel:     #43536b;   /* ink-soft */
  --ink:       #14243a;
  --body:      #2f3d52;
  --muted:     #5b6b7d;
  --line:      #d9d2c2;   /* rule */
  --line-soft: #e8e2d4;
  --bg:        #f8f6f1;   /* paper */
  --paper-tint:#efeadf;
  --panel:     #ffffff;
  --dark:      #101d30;
  --dark-2:    #16273f;
  --on-dark:   #e9ecf2;
  --on-dark-soft: #a8b4c6;
  --gold:      #b9922e;
  --gold-bright: #d4ad45;
  --green:     #276f45;   /* 5.1:1 on green-bg — WCAG AA for the status pills */
  --amber:     #8a5300;
  --red:       #b3261e;
  --teal:      #1f6f63;   /* second lens — "next job" */
  --plum:      #5b3b8c;   /* first lens — "day job" */
  --green-bg:  #e6f4ec;
  --amber-bg:  #fbf1dd;
  --red-bg:    #fbeae9;
  --blue-bg:   #e9f0f8;
  --radius:    10px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- app chrome ---- */

.app { max-width: 1280px; margin: 0 auto; background: var(--bg); min-height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 20px;
  background: var(--dark); color: var(--on-dark); padding: 0 24px; height: 60px;
}
.brand { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.brand span { color: var(--gold-bright); }
.topnav { display: flex; gap: 4px; margin-left: 12px; }
.topnav a {
  color: var(--on-dark-soft); text-decoration: none; font-size: 13px; padding: 6px 12px;
  border-radius: 4px;
}
.topnav a.on { background: rgba(255,255,255,.10); color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }
.topbar .who { margin-left: auto; font-size: 12.5px; text-align: right; line-height: 1.35;
                display: flex; flex-direction: column; align-items: flex-end; flex: none; white-space: nowrap; }
.brand { white-space: nowrap; flex: none; }
/* The nav gives way before the brand or the person does: it shrinks and scrolls sideways if it must. */
.topnav { min-width: 0; flex: 0 1 auto; }
.topnav a { white-space: nowrap; }
.topbar .who b { font-weight: 600; }
.topbar .who .who-meta { opacity: .7; }

.subbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.subbar h1 { font-family: var(--serif); font-size: 24px; margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -.005em; line-height: 1.15; }
.subbar .crumb { font-size: 12px; color: var(--muted); }
.subbar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.page { padding: 22px 24px 36px; }

.nav-check, .nav-burger { display: none; }

/* ---- type ---- */

h2 { font-family: var(--serif); font-size: 18px; color: var(--ink); margin: 0 0 10px; font-weight: 600; }
h3 { font-size: 13px; color: var(--ink); margin: 0 0 6px; font-weight: 650; }
.eyebrow {   /* card titles are h2 elements so screen-reader users can jump between cards */
  font-family: var(--serif); font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; line-height: 1.4;
  color: var(--gold); font-weight: 700; margin: 0 0 10px;
}
.dim { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; }

/* ---- layout ---- */

.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.split-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.row { display: flex; gap: 10px; align-items: center; }
.stack:not(table) { display: flex; flex-direction: column; gap: 14px; }
/* table.stack is the phone card layout (below), not this column helper: a flex table
   lays its thead and tbody out as independent items and the columns no longer line up. */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; box-shadow: 0 6px 20px rgba(20,36,58,.04);
}
.card.flush { padding: 0; overflow: hidden; }
.card-hd {
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; background: #fff;
}
.card-hd h2 { margin: 0; }
.card-hd .right { margin-left: auto; }
.card-bd { padding: 16px; }

/* ---- stat tiles ---- */

.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.stat .v { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; margin-top: 3px; line-height: 1.1; }
.stat .v small { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.stat .d { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.stat.alert { border-color: #e8b4b0; background: var(--red-bg); }
.stat.alert .v { color: var(--red); }
.stat.warn { border-color: #e8cfa0; background: var(--amber-bg); }
.stat.warn .v { color: var(--amber); }

/* ---- tables ---- */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; padding: 9px 12px;
  border-bottom: 1px solid var(--line); background: #faf8f3; white-space: nowrap;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.grouprow td {
  background: #fafcfd; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; padding: 7px 12px;
}
tbody tr.flagged { background: var(--red-bg); }
tbody tr.warnrow { background: var(--amber-bg); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td b { color: var(--ink); font-weight: 600; }

/* ---- pills / badges ---- */

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 650; border: 1px solid transparent; white-space: nowrap;
}
.pill.ok   { background: var(--green-bg); color: var(--green); border-color: #b6dcc6; }
.pill.warn { background: var(--amber-bg); color: var(--amber); border-color: #e6cb9c; }
.pill.bad  { background: var(--red-bg);   color: var(--red);   border-color: #e5b8b4; }
.pill.info { background: var(--blue-bg);  color: var(--navy-mid); border-color: #c2d5e8; }
.pill.plain{ background: #eef2f6; color: var(--body); border-color: #dbe3ec; }

.tag {
  display: inline-block; padding: 2px 7px; border-radius: 3px; background: #eef2f6;
  color: var(--body); font-size: 11px; margin: 2px 3px 2px 0; border: 1px solid #e0e7ee;
}
.tag.match { background: var(--blue-bg); border-color: #bcd2e6; color: var(--navy-mid); font-weight: 600; }

.lens {
  display: inline-block; font-size: 10px; font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
}
.lens.mentor { background: #ece5f5; color: var(--plum); }
.lens.coach  { background: #dcefe6; color: var(--teal); }

/* ---- buttons ---- */

.btn {
  display: inline-block; padding: 7px 13px; border-radius: 5px; font-size: 12.5px;
  font-weight: 600; text-decoration: none; border: 1px solid var(--line);
  background: #fff; color: var(--body); cursor: pointer; white-space: nowrap;
}
.btn.pri { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.pri:hover { background: var(--dark-2); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.sm { padding: 4px 9px; font-size: 11.5px; }

/* ---- progress ---- */

.bar { height: 7px; background: #e6ecf2; border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--steel); border-radius: 4px; }
.bar > i.ok { background: var(--green); }
.bar > i.warn { background: var(--amber); }
.bar > i.bad { background: var(--red); }

/* ---- milestone clocks ---- */

.clock {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.clock:last-child { border-bottom: 0; }
.clock .nm { flex: 1; color: var(--ink); }
.clock .due { font-size: 11.5px; color: var(--muted); }
.clock .cnt {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; min-width: 62px; text-align: center;
}
.cnt.ok { background: var(--green-bg); color: var(--green); }
.cnt.warn { background: var(--amber-bg); color: var(--amber); }
.cnt.bad { background: var(--red-bg); color: var(--red); }
.cnt.done { background: #eef2f6; color: var(--muted); }

/* ---- journey spine ---- */

.spine { display: flex; align-items: flex-start; gap: 0; margin: 6px 0 2px; }
.step { flex: 1; text-align: center; position: relative; padding-top: 26px; }
.step::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.step:last-child::before { display: none; }
.step i {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  border: 2px solid var(--line); z-index: 1;
}
.step.done i { background: var(--green); border-color: var(--green); }
.step.now i  { background: #fff; border-color: var(--navy); box-shadow: 0 0 0 3px var(--blue-bg); }
.step.done::before { background: var(--green); }
.step .lbl { font-size: 10.5px; color: var(--muted); line-height: 1.3; padding: 0 3px; }
.step.now .lbl { color: var(--navy); font-weight: 700; }
.step.done .lbl { color: var(--body); }
.step .no { font-family: var(--mono); font-size: 9.5px; color: var(--muted); display: block; }

/* ---- coach cards ---- */

.coach { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.coach.pick { border-color: var(--navy); box-shadow: 0 0 0 2px var(--blue-bg); }
.coach-hd { display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line-soft); }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--navy-mid); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 650; font-size: 17px; letter-spacing: .5px;
}
.coach-hd .nm { font-weight: 650; color: var(--ink); font-size: 14px; }
.coach-bd { padding: 12px 14px; font-size: 12.5px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0;
      border-bottom: 1px solid var(--line-soft); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); font-size: 11.5px; }
.kv .v { color: var(--ink); font-weight: 600; text-align: right; font-size: 12px; }
.fit { display: flex; align-items: center; gap: 8px; }
.fit .n { font-family: var(--mono); font-weight: 700; color: var(--navy); font-size: 13px; }

/* ---- notices ---- */

.notice {
  border: 1px solid #c2d5e8; background: var(--blue-bg); border-left: 3px solid var(--navy-mid);
  border-radius: 5px; padding: 12px 14px; font-size: 12.5px; color: var(--navy-mid);
}
.notice b { color: var(--navy); }
.notice.lock { background: var(--paper-tint); border-color: var(--line); border-left-color: var(--gold); color: #5a4a1e; }
.notice.lock b { color: #4d3d10; }

/* ---- annotation for proposal use ---- */

.annot {
  max-width: 1280px; margin: 0 auto; padding: 14px 24px 30px;
  font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line);
  background: var(--bg);
}
.annot b { color: var(--body); }
.annot .ref { font-family: var(--mono); font-size: 11.5px; color: var(--navy-mid); }

/* ---- report ---- */

.rpt { max-width: 900px; margin: 0 auto; background: #fff; padding: 40px 48px;
       border: 1px solid var(--line); }
.rpt-hd { border-bottom: 2px solid var(--gold); padding-bottom: 14px; margin-bottom: 20px; }
.rpt-hd .t { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--navy); letter-spacing: -.005em; }
.rpt-hd .s { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.rpt h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--navy);
  border-bottom: 1px solid var(--line); padding-bottom: 5px; margin: 22px 0 10px;
}
.rpt h2 .cite { float: right; font-size: 10px; color: var(--muted); letter-spacing: 0;
                text-transform: none; font-weight: 500; font-family: var(--mono); }

/* ---- phone ---- */

.phone {
  width: 330px; border: 10px solid #1b2733; border-radius: 34px; overflow: hidden;
  background: #fff; box-shadow: 0 6px 28px rgba(11,37,69,.2);
}
.phone-hd { background: var(--navy); color: #fff; padding: 12px 16px 14px; }
.phone-bd { padding: 14px 16px 20px; }
.sess {
  border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px;
}
.sess.next { border-color: var(--navy); background: #f7fafd; }

@media print {
  body { background: #fff; }
  .app { box-shadow: none; }
  .annot { border-top: 1px solid var(--line); background: #fff; }
}

/* ---- additions for the Rails app (utility classes used by the ERB) ---- */
.mt      { margin-top: 14px; }
.mt-sm   { margin-top: 6px; }
.mt-lg   { margin-top: 26px; }
.mb      { margin-bottom: 18px; }
.mb-sm   { margin-bottom: 6px; }
.center  { text-align: center; padding: 9px; }
.stack-sm { gap: 10px; }
.divider-top { border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 12px; }
.bar-fit { width: 90px; }
.big     { font-size: 24px; font-weight: 680; color: var(--green); }
.warn-text { color: var(--amber); }
.objective { border: 1px solid var(--line); border-radius: 5px; padding: 11px; }
.objective h2 { font-size: 13px; margin-bottom: 7px; }
.objective .bar { margin: 7px 0 5px; }
.rationale {
  border: 1px solid var(--line); border-radius: 5px; padding: 12px;
  background: #fcfdfe; font-size: 13px; color: var(--ink);
}
.notice-warn {
  background: var(--amber-bg); border-color: #e6cb9c;
  border-left-color: var(--amber); color: var(--amber);
}
.actions { font-size: 13px; color: var(--ink); padding-left: 20px; line-height: 1.65; }
.actions li { margin-bottom: 6px; }
a { color: var(--navy-mid); }
table a { color: var(--navy-mid); font-weight: 600; }
.topbar a, .stat a, .notice a { color: inherit; }

/* ---- authentication and admin ---- */
/* Sits a little above true centre — a dead-centred card reads low on a tall
   window, and the flash above it needs somewhere to go. */
.signin-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px 14vh;
               background: linear-gradient(180deg, var(--bg) 0%, var(--paper-tint) 100%); }
.signin-col { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.signin-card { width: 100%; background: #fff; border: 1px solid var(--line);
               border-radius: 10px; padding: 34px 32px; box-shadow: 0 12px 40px rgba(20,36,58,.10); }
.signin-brand { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--navy); letter-spacing: .18em; text-transform: uppercase; }
.signin-brand span { color: var(--gold); }
.signin-lede { color: var(--muted); font-size: 13px; margin: 4px 0 22px; }
.signin-form { display: flex; flex-direction: column; gap: 14px; }
.signin-foot { margin-top: 20px; border-top: 1px solid var(--line-soft); padding-top: 14px; }

.fld { display: flex; flex-direction: column; gap: 5px; }
.fld > span, .fld > label { font-size: 11px; font-weight: 700; letter-spacing: .06em;
              text-transform: uppercase; color: var(--muted); }
.fld input[type=text], .fld input[type=email], .fld input[type=password],
.fld input[type=number], .fld input[type=date], .fld input[type=datetime-local],
.fld input[type=url], .fld select, .fld textarea {
  font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--ink); width: 100%;
}
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; border-color: var(--steel); }
.fld input:disabled { background: #f4f7fa; color: var(--muted); }
.fld.check { flex-direction: row; align-items: flex-start; gap: 9px; }
.fld.check span { text-transform: none; letter-spacing: 0; font-size: 13px;
                  font-weight: 400; color: var(--body); }

.pw-toggle summary { font-size: 12.5px; color: var(--navy-mid); cursor: pointer; padding: 4px 0; }
.pw-toggle[open] { border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 12px; }
.pw-toggle > * + * { margin-top: 8px; }

.btn-block { display: block; width: 100%; text-align: center; }
input.btn, .signin-form input[type=submit] { border: 1px solid var(--navy); cursor: pointer; }
.form-card { max-width: 720px; }
.flash-wrap { padding-bottom: 0; }
.ok-notice  { background: var(--green-bg); border-color: #b6dcc6; border-left-color: var(--green); color: var(--green); }
.bad-notice { background: var(--red-bg);  border-color: #e5b8b4; border-left-color: var(--red);   color: var(--red); }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
           color: var(--gold-bright); cursor: pointer; text-decoration: underline; }
.topbar .who form { display: inline; }
code { font-family: var(--mono); font-size: 11.5px; background: #eef2f6; padding: 1px 4px; border-radius: 3px; }


/* ---- next appointment ---- */

.appt { padding: 0; overflow: hidden; border-color: var(--steel); }
.appt-hd { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; }
.appt-when { font-size: 18px; font-weight: 650; color: var(--navy); letter-spacing: -.2px; }
.appt-tz { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.appt-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.appt-join {
  padding: 12px 16px; border-top: 1px solid var(--line-soft); background: #f7fafd;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.appt-conn { display: flex; gap: 16px; flex-wrap: wrap; color: var(--body); }
.appt-conn b { color: var(--muted); font-weight: 700; font-size: 11px;
               text-transform: uppercase; letter-spacing: .05em; }
.appt-proposal {
  padding: 12px 16px; border-top: 1px solid var(--line-soft);
  background: var(--amber-bg); color: var(--amber);
}
.appt-proposal b { color: #7a4a00; }
.appt-proposal form { display: inline; }

/* ---- responsive ------------------------------------------------------------
   The screens were built desktop-first for proposal figures. These rules make
   them usable on a phone without changing how they print: actions move to the
   left where a thumb reaches, wide tables scroll inside their own card instead
   of pushing the page sideways, and the nav collapses to a menu. */

@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split.even, .split-2, .split-3 { grid-template-columns: 1fr; }
}

/* The header collapses to a menu at 1080px, wider than the rest of the phone layout
   (860px): eleven admin links do not fit a tablet or a narrow laptop window. */
@media (max-width: 1080px) {
  /* Nav becomes a menu. The checkbox is the only state: Turbo replaces the body
     on navigation, so it resets closed on its own. */
  .topbar { flex-wrap: wrap; height: auto; gap: 12px; padding: 10px 14px; }
  .nav-burger {
    display: block; cursor: pointer;
    width: 38px; height: 34px; border-radius: 5px; position: relative;
    border: 1px solid rgba(255,255,255,.22);
  }
  .nav-burger .bars, .nav-burger .bars::before, .nav-burger .bars::after {
    position: absolute; left: 9px; width: 18px; height: 2px; background: #fff;
    border-radius: 2px; content: "";
  }
  .nav-burger .bars { top: 16px; }
  .nav-burger .bars::before { top: -6px; left: 0; }
  .nav-burger .bars::after  { top: 6px;  left: 0; }
  .nav-check:focus-visible + .nav-burger { outline: 2px solid #fff; outline-offset: 2px; }

  .topnav { display: none; order: 4; flex-direction: column; width: 100%;
            gap: 2px; margin-left: 0; padding-bottom: 6px; }
  .nav-check:checked ~ .topnav { display: flex; }
  .topnav a { padding: 11px 12px; font-size: 14px; border-radius: 5px; }

  /* One row: wordmark · name with sign-out beneath · menu button. */
  .brand { order: 1; font-size: 15px; }
  .topbar .who { order: 2; margin-left: auto; text-align: right; align-items: flex-end;
                 flex-direction: column; gap: 0; width: auto; line-height: 1.25; }
  .topbar .who b { font-size: 13px; }
  .topbar .who .who-meta { display: none; }
  .topbar .who form { margin-left: 0; }
  .topbar .who .linkish { font-size: 11.5px; }
  .nav-burger { order: 3; margin-left: 4px; }
}

@media (max-width: 860px) {
  /* Actions to the left, where a thumb is, rather than the far right edge. */
  .subbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .subbar .right { margin-left: 0; flex-wrap: wrap; justify-content: flex-start; }
  .card-hd { flex-wrap: wrap; }
  .card-hd .right { margin-left: 0; width: 100%; display: flex; gap: 8px;
                    justify-content: flex-start; }
  .card-hd .right.small { width: auto; margin-left: auto; }

  .page { padding: 14px 14px 28px; }
  .grid { gap: 12px; }

  /* Wide tables scroll inside the card. Two things are needed: .card.flush
     clips by default, so it would hide the overflow rather than scroll it; and
     a flex/grid child defaults to min-width:auto, so without this the card
     refuses to shrink below its table and pushes the whole page sideways. */
  .stack > *, .grid > *, .split > *, .split-3 > * { min-width: 0; max-width: 100%; }
  .card.flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card.flush > table { min-width: 560px; }
  /* Long addresses are the widest thing in most tables; let them wrap rather
     than forcing every row into a long horizontal scroll. */
  tbody td { overflow-wrap: anywhere; }

  .spine { overflow-x: auto; padding-bottom: 4px; }
  .spine .step { min-width: 96px; }

  /* 16px stops iOS zooming the viewport when a field takes focus. */
  .fld input[type=text], .fld input[type=email], .fld input[type=password],
  .fld input[type=number], .fld input[type=date], .fld select { font-size: 16px; }

  .btn { padding: 9px 14px; }
  .btn.sm { padding: 7px 11px; font-size: 12px; }

  .appt-hd { flex-direction: column; gap: 10px; }
  .appt-actions { margin-left: 0; width: 100%; }
  .appt-when { font-size: 16px; }
  .appt-conn { gap: 4px 14px; }

  .rpt { padding: 22px 16px; max-width: 100%; }
  .rpt h2 .cite { float: none; display: block; margin-top: 3px; }
  /* The report has no card wrappers to scroll inside, so each table becomes its
     own scroll container. display:block keeps column alignment via the anonymous
     table box while letting the row scroll instead of widening the page. */
  .rpt table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .phone { width: 100%; max-width: 330px; }
  .annot { padding: 14px; }
}

@media (max-width: 560px) {
  .g4, .g3, .g2 { grid-template-columns: 1fr; }
  .subbar h1 { font-size: 17px; }
  .signin-card { padding: 24px 18px; }
  .signin-wrap { padding: 24px 12px 8vh; }
  .stat .v { font-size: 24px; }
}


/* ---- accessibility ---- */

:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.topbar a:focus-visible, .topbar button:focus-visible { outline-color: #fff; }
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px;
  background: #fff; color: var(--navy); border: 2px solid var(--navy); border-radius: 5px; font-weight: 700;
}
.skip-link:focus { left: 8px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
caption { text-align: left; font-weight: 650; color: var(--ink); padding: 10px 12px; caption-side: top; }
caption.visually-hidden { padding: 0; }
tbody th[scope=row] { text-align: left; font-weight: 600; color: var(--ink); padding: 10px 12px;
                      border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child th { border-bottom: 0; }

/* <progress> replaces the inline-width bar. */
progress.bar {
  appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 7px;
  border: 0; background: #e6ecf2; border-radius: 4px; overflow: hidden; color: var(--steel);
}
progress.bar::-webkit-progress-bar { background: #e6ecf2; border-radius: 4px; }
progress.bar::-webkit-progress-value { background: var(--steel); border-radius: 4px; }
progress.bar::-moz-progress-bar { background: var(--steel); border-radius: 4px; }
progress.bar.ok::-webkit-progress-value, progress.bar.ok::-moz-progress-bar { background: var(--green); }
progress.bar.warn::-webkit-progress-value, progress.bar.warn::-moz-progress-bar { background: var(--amber); }
progress.bar.bad::-webkit-progress-value, progress.bar.bad::-moz-progress-bar { background: var(--red); }

/* ---- demo banner ---- */
.demo-banner {
  background: var(--paper-tint); color: #5a3d00; border-top: 1px solid var(--line); font-size: 12.5px;
  padding: 10px 24px; text-align: center; margin: 0;
}

/* ---- sign-in extras ---- */
.signin-card h1.signin-brand { margin: 0; }
.qr { display: block; width: 196px; height: 196px; margin: 4px auto 10px; border: 1px solid var(--line); border-radius: 6px; padding: 6px; background: #fff; }
.secret { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; word-break: break-all;
          background: #eef2f6; padding: 8px 10px; border-radius: 5px; text-align: center; }
.codes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.codes li { font-family: var(--mono); font-size: 14px; background: #eef2f6; padding: 8px 10px;
            border-radius: 5px; text-align: center; letter-spacing: .06em; }
.signin-col.wide { max-width: 760px; }
.prose { font-size: 14px; line-height: 1.6; color: var(--body); }
.prose h1 { font-size: 22px; color: var(--navy); margin: 0 0 8px; }
.prose h2 { font-size: 16px; margin: 20px 0 6px; }
.prose ul { padding-left: 20px; }
.btn.danger { border-color: var(--red); color: var(--red); }
.fld textarea { min-height: 90px; resize: vertical; }
.fld .hint { font-size: 12px; color: var(--muted); }
.fld.check input { width: 18px; height: 18px; margin-top: 2px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .fld.wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .codes { grid-template-columns: 1fr; } }
.errs { background: var(--red-bg); border: 1px solid #e5b8b4; border-left: 3px solid var(--red);
        color: var(--red); border-radius: 5px; padding: 10px 14px; font-size: 13px; }
.errs ul { margin: 4px 0 0; padding-left: 18px; }
.muted-row td, .muted-row th { color: var(--muted); }
.wrap { white-space: normal; }
dl.kvs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
dl.kvs dt { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding-top: 2px; }
dl.kvs dd { margin: 0; color: var(--ink); }

/* A fieldset's default min-width is min-content, which is what pushed the
   matching page sideways on a phone. */
fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
legend { padding: 0; }
.coach { min-width: 0; }
.coach .nm label { display: inline-flex; gap: 6px; align-items: center; }

/* Screen-reader-only text is absolutely positioned; give tables and cards a
   containing block so it cannot escape a scrolling card and widen the page. */
.card, table, .rpt { position: relative; }

@media (max-width: 860px) {
  .row { flex-wrap: wrap; }
  .btn { white-space: normal; }
}

/* ---- phase 2 ---- */
form.inline { display: inline; }
.linkish-dark { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--red); cursor: pointer; text-decoration: underline; }
.kv .k.wrap { white-space: normal; }
fieldset.fld legend { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
fieldset.fld .row label { font-size: 13px; gap: 4px; }
.card-bd.divider-top { padding-top: 12px; }
.card-bd h3 { margin: 0; font-size: 14px; }

/* ---- helpdesk ---- */
.topnav > a.help { margin-left: 6px; border: 1px solid rgba(255,255,255,.22); }
.thread { display: flex; flex-direction: column; gap: 10px; }
/* Messages read as a ledger, full width, with a colored edge saying who spoke:
   navy for MHG, gold for the person who raised the ticket. */
.msg { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 6px; padding: 10px 12px; background: #fff; }
.msg.mhg { background: var(--blue-bg); border-color: #c2d5e8; border-left-color: var(--navy); }
.msg.mine { border-left-color: var(--gold); }
.flush-hd { display: flex; justify-content: space-between; align-items: baseline; margin: -4px 0 10px; }
.flush-hd h2 { margin: 0; font-size: 17px; }
.msg .meta { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.msg p { margin: 0; white-space: pre-wrap; }
@media (max-width: 1080px) { .topnav > a.help { margin-left: 0; border: 0; } }

/* ---- dashboard: attention list and collapsible sections ---- */
.attention { list-style: none; margin: 0; padding: 0; }
.attention li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.attention li:last-child { border-bottom: 0; }
.attention a { color: var(--ink); }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.dot.bad { background: var(--red); } .dot.warn { background: var(--amber); } .dot.ok { background: var(--green); }
details.dash > summary { list-style: none; cursor: pointer; display: block; padding: 6px 0; }
details.dash > summary h2 { display: inline; }
details.dash > summary > .dim { display: inline-block; margin-left: 10px; }
details.dash > summary::-webkit-details-marker { display: none; }
details.dash > summary::before { content: "▸" / ""; color: var(--muted); font-size: 12px; margin-right: 8px; }
details.dash[open] > summary::before { content: "▾" / ""; }
details.dash > summary h2 { margin: 0; }
details.dash > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
details.dash > .card { margin-top: 6px; }
@media (max-width: 560px) { .oa-name { display: none; } details.dash > summary > .dim { display: block; margin: 2px 0 0 18px; } }


/* ---- charts (server-rendered SVG, no script) ---- */
.chart { display: block; width: 100%; height: auto; }
.chart .bar  { fill: var(--navy-mid); }
.chart .track { fill: var(--line-soft); }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart text { font-family: var(--sans); fill: var(--muted); font-size: 11px; }
.chart text.val { fill: var(--ink); font-weight: 600; }
.chart text.lbl { fill: var(--body); }
.chart-title { font-size: 12.5px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.chart-note { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* ---- stacked tables on a phone: each row becomes a card, each cell shows its label ---- */
@media (max-width: 560px) {
  .card.flush > table.stack { min-width: 0; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr { display: block; width: 100%; }
  table.stack tr { padding: 10px 14px 12px; border-bottom: 1px solid var(--line-soft); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack th[scope=row], table.stack td { display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
    padding: 3px 0; border: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
  table.stack th[scope=row] { display: block; text-align: left; font-size: 15px; padding-bottom: 6px; }
  table.stack td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .06em; font-weight: 700; text-align: left; padding-top: 2px; }
  table.stack td:empty, table.stack td.actions::before { display: none; }
  table.stack td.actions { justify-content: flex-start; padding-top: 8px; }
  table.stack .visually-hidden-mobile { display: none; }
}

/* ---- list controls: search, filters, sort ---- */
.list-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.list-controls .fld { flex: 0 1 auto; min-width: 140px; }
.list-controls .fld.grow { flex: 1 1 220px; }
.list-controls input[type=search], .list-controls select { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); width: 100%; }
.list-controls input[type=submit] { border: 1px solid var(--line); }
@media (max-width: 560px) { .list-controls .fld { flex: 1 1 100%; } }

/* ---- document list ---- */
.doclist { list-style: none; margin: 0; padding: 0; }
.doclist li { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.doclist li:last-child { border-bottom: 0; }
.doc-main { min-width: 0; flex: 1 1 auto; }
.doc-title { font-weight: 600; color: var(--navy-mid); overflow-wrap: anywhere; }
.doc-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lock-pill { background: var(--paper-tint); color: #5a4a1e; border-color: var(--line); margin-left: 6px; white-space: normal; }
.doc-remove { flex: none; }
details.add-doc { margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
details.add-doc > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--navy-mid); list-style: none; }
details.add-doc > summary::-webkit-details-marker { display: none; }
details.add-doc > summary::before { content: "+ "; color: var(--muted); }
details.add-doc[open] > summary::before { content: "− "; }
@media (max-width: 560px) { .doclist li { flex-direction: column; gap: 6px; } }

/* ---- phone pass: tap targets, no focus-zoom, readable small text, vertical journey, single-column key/values ---- */
@media (max-width: 860px) {
  .btn, input.btn, .btn.sm, button.linkish-dark { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  .btn.sm { font-size: 13px; padding: 8px 12px; }
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]), select, textarea,
  .list-controls input[type=search], .list-controls select, .fld input[type=number], input.small { font-size: 16px; min-height: 42px; }
  input[type=file] { font-size: 14px; }
  .fld.check input { min-height: 0; width: 22px; height: 22px; }
  .eyebrow, .stat .k, thead th, .kv .k, .card-hd .small, .doc-meta { font-size: 11.5px; }
  .lens { font-size: 10.5px; }
  .attention li { padding: 11px 0; font-size: 14px; }
  .clock { padding: 11px 0; font-size: 13.5px; }
  .topbar .who .linkish { min-height: 0; }
}
@media (max-width: 560px) {
  dl.kvs { grid-template-columns: 1fr; gap: 2px 0; }
  dl.kvs dt { margin-top: 8px; }
  dl.kvs dd { overflow-wrap: anywhere; }
  .kv { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kv .v { text-align: left; }
  .cnt { white-space: normal; min-width: 0; }
  /* The journey spine becomes a vertical list: no sideways scroll on a phone. */
  .spine { flex-direction: column; overflow: visible; gap: 0; margin: 4px 0; }
  .spine .step { min-width: 0; text-align: left; padding: 6px 0 6px 28px; display: flex; align-items: center; }
  .step::before { top: -6px; left: 7px; width: 2px; height: calc(100% + 12px); }
  .step:first-child::before { top: 50%; }
  .step i { top: 50%; left: 0; transform: translateY(-50%); }
  .step .lbl { font-size: 13px; padding: 0; }
  .step .no { display: inline; margin-right: 6px; font-size: 11px; }
  .split-3, .grid.g3, .grid.g2 { grid-template-columns: 1fr; }
  .subbar .right { gap: 8px; }
  .subbar .right .btn { flex: 1 1 auto; }
}

/* Session ledger: on desktop the row header carries the number and the When column the time;
   on a phone the header line carries both and the When cell is dropped. */
th .nowrap-desktop { display: none; }
.card-note { margin: 10px 14px 4px; }
@media (max-width: 560px) {
  th .nowrap-desktop { display: inline; }
  table.stack td.desktop-only { display: none; }
}
@media (max-width: 860px) {
  .fld textarea, textarea { font-size: 16px; }
  input[type=file] { font-size: 16px; min-height: 42px; }
  .rpt h2 .cite, .lens { font-size: 11px; }
  /* The Sign out link under the name keeps its look but gains a finger-sized hit area. */
  .topbar .who .linkish { padding: 9px 6px; margin: -9px -6px; }
}
@media (max-width: 860px) {
  .attention li a { display: inline-block; padding: 8px 0; margin: -8px 0; }
}

/* Cancel / reschedule live inside the appointment card, under the joining details. */
/* Propose / Cancel sit on one line like tabs; the open one's form drops beneath both.
   <details name="scheduling"> keeps them mutually exclusive with no script. The two
   <details> stay real boxes (display:contents would drop them from the accessibility
   tree); each form is drawn twice as wide as its half so it spans both tabs. */
.appt-sched { display: flex; flex-wrap: wrap; gap: 0 16px; padding: 0 16px 12px; border-top: 1px solid var(--line-soft); }
.appt-sched > details.sched-tab { flex: 1 1 0; min-width: 0; }
.appt-sched > details.sched-tab > summary {
  display: block; text-align: center; list-style: none; cursor: pointer; margin: 0; padding: 11px 12px 9px; font-size: 13px; font-weight: 600;
  color: var(--navy-mid); border-bottom: 2px solid var(--line-soft);
}
.appt-sched > details.sched-tab:only-of-type > summary { text-align: left; }
.appt-sched > details.sched-tab > summary::-webkit-details-marker { display: none; }
.appt-sched > details.sched-tab > summary:hover { color: var(--navy); }
.appt-sched > details.sched-tab[open] > summary { color: var(--navy); border-bottom-color: var(--gold); }
.appt-sched > details.sched-tab > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; border-radius: 4px; }
.appt-sched > details.sched-tab > form { width: calc(200% + 16px); padding-top: 12px; }
.appt-sched > details.sched-tab:nth-of-type(2) > form { margin-left: calc(-100% - 16px); }
.appt-sched > details.sched-tab:only-of-type > form { width: 100%; margin-left: 0; }
.appt-sched > .appt-proposal { flex: 1 1 100%; margin: 0 -16px; border-top: 0; }
.appt-sched > .row { flex: 1 1 100%; margin-top: 10px; }
@media (max-width: 560px) { .appt-sched > details.sched-tab > summary { padding: 12px 8px 10px; font-size: 12.5px; } }

/* Needs attention, ranked. */
.attention-group + .attention-group { margin-top: 12px; }
.attention-rank { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font: 700 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.attention-rank .dim { font-weight: 600; letter-spacing: 0; }
.attention-rank.high { color: var(--red); }
.attention-rank.medium { color: var(--amber); }
.attention-rank.low { color: var(--navy-mid); }
.attention-rank .dot { margin-top: 0; }
.dot.high { background: var(--red); }
.dot.medium { background: var(--amber); }
.dot.low { background: var(--steel); }
.attention-group .attention li { padding-left: 18px; }
/* Between the collapsed menu (1080px) and a wide desktop, tighten the nav so all eleven admin links fit. */
@media (min-width: 1081px) and (max-width: 1240px) {
  .topbar { gap: 12px; padding: 0 16px; }
  .topnav { margin-left: 4px; gap: 1px; }
  .topnav a { padding: 6px 7px; font-size: 12.5px; }
  .topnav > a.help { margin-left: 2px; }
  .brand { font-size: 15px; letter-spacing: .14em; }
}

/* ---- header disclosure menus (admin) ---------------------------------------
   Native <details>, so they open without JavaScript; the nav-menu controller only
   closes them (outside click, Escape, opening a sibling) and, under 1080px, holds
   them open as labelled groups inside the collapsed menu. */
.navmenu { position: relative; }
.navmenu > summary {
  list-style: none; cursor: pointer; user-select: none; color: var(--on-dark-soft); font-size: 13px;
  padding: 6px 10px 6px 12px; border-radius: 4px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::after {
  content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .7;
}
.navmenu > summary:hover { color: #fff; }
.navmenu > summary.on { background: rgba(255,255,255,.10); color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold); }
.navmenu[open] > summary { background: rgba(255,255,255,.16); color: #fff; }
.navmenu[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.navmenu > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.navmenu-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 196px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px;
  box-shadow: 0 12px 30px rgba(20, 36, 58, .18); display: flex; flex-direction: column; gap: 2px;
}
.topnav .navmenu-panel a { color: var(--ink); font-size: 13.5px; padding: 8px 12px; border-radius: 5px; }
.topnav .navmenu-panel a:hover { background: var(--paper-tint); color: var(--navy); }
.topnav .navmenu-panel a.on { background: var(--blue-bg); color: var(--navy); font-weight: 600; box-shadow: none; }
@media (max-width: 1080px) {
  .navmenu { width: 100%; }
  .navmenu > summary { pointer-events: none; padding: 12px 12px 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
  .navmenu > summary::after { display: none; }
  .navmenu > summary.on, .navmenu[open] > summary { background: none; box-shadow: none; font-weight: 700; }
  .navmenu-panel { position: static; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: 0 0 0 8px; }
  .topnav .navmenu-panel a { color: var(--on-dark-soft); padding: 11px 12px; font-size: 14px; }
  .topnav .navmenu-panel a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .topnav .navmenu-panel a.on { background: rgba(255,255,255,.10); color: #fff; box-shadow: inset 0 -2px 0 var(--gold); }
}
/* The wordmark is the way home: the dashboard, or each role's own landing page. */
a.brand { text-decoration: none; }
a.brand:hover span { color: #fff; }

/* ---- footer ---- */
.site-foot { border-top: 1px solid var(--line); padding: 18px 24px 22px; color: var(--muted); font-size: 12.5px; background: var(--panel); }
.foot-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-links a { color: var(--navy-mid); }
.foot-note { margin: 10px 0 0; max-width: 72ch; line-height: 1.5; }
.signin-wrap { min-height: calc(100vh - 110px); }
.app { display: flex; flex-direction: column; }
.app > .site-foot { margin-top: auto; }
@media (max-width: 560px) { .site-foot { padding: 16px 14px 20px; } .foot-row { flex-direction: column; align-items: flex-start; } }
.foot-links .small-pill { font-size: 10px; padding: 1px 6px; margin-left: -8px; vertical-align: 1px; }
.prose ul { padding-left: 20px; } .prose li { margin: 4px 0; }

.signin-card [aria-live] .notice { margin: 4px 0 16px; }

/* ---- Section 508 pass ---- */
.signin-brand span { color: #836618; }          /* gold that meets 4.5:1 on the white card */
.dash-link { margin: 6px 0 0; }
.rpt table:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.eyebrow { color: #836618; }                     /* section labels: 5.4:1 on white, 4.7:1 on the paper tint */

/* ---- participant home: coach + next session first, jump links above ---- */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }          /* items stretch: both cards the same height */
.split-2 > div { display: flex; flex-direction: column; }
.split-2 > div > .card { flex: 1; }
/* Section jump bar: one segmented strip, not a row of pills. Scrolls sideways on a phone. */
.jump { display: flex; margin: -6px 0 -2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow-x: auto; scrollbar-width: none; }
.jump::-webkit-scrollbar { display: none; }
.jump a { flex: 1 0 auto; text-align: center; font-size: 12.5px; font-weight: 600; padding: 9px 14px; color: var(--navy-mid); text-decoration: none; border-right: 1px solid var(--line-soft); white-space: nowrap; }
.jump a:last-child { border-right: 0; }
.jump a:hover { background: var(--paper-tint); color: var(--navy); }
.jump a:focus-visible { outline-offset: -3px; }
/* The notification strip takes no room when there is nothing to say. */
.flash-wrap { padding-top: 0; padding-bottom: 0; }
.flash-wrap > .notice { margin: 16px 0 0; }
.flash-wrap > .notice + .notice { margin-top: 8px; }
[id] { scroll-margin-top: 14px; }
.coach-name { margin: 0 0 6px; font-size: 16px; }
.appt-empty .appt-when { color: var(--muted); font-weight: 600; }
.appt-empty { border-color: var(--line); }
/* On a phone the bar wraps into rows of equal cells instead of scrolling sideways. */
@media (max-width: 860px) {
  .jump { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; margin: -4px 0 0; }
  .jump a { white-space: normal; padding: 12px 8px; font-size: 13px; line-height: 1.25; display: flex; align-items: center; justify-content: center;
            border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .jump a:nth-child(2n) { border-right: 0; }
  .jump a:last-child, .jump a:nth-last-child(2):nth-child(odd) { border-bottom: 0; }   /* no border under the last row only */
  .jump a:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }   /* an odd last link spans the row */
  .jump a:hover { background: var(--paper-tint); }
}
@media (max-width: 860px) { .split-2 { grid-template-columns: 1fr; } }

/* Participant home: objectives and the session ledger share the width equally; ledger cells stay on one line. */
.split.even { grid-template-columns: 1fr 1fr; }
th.nowrap, td.nowrap { white-space: nowrap; }
@media (max-width: 860px) { .split.even { grid-template-columns: 1fr; } }

/* ---- back to top, in a card's top-right corner ---- */
.totop {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; z-index: 2;
}
.totop:hover { color: var(--navy); border-color: var(--steel); }
.appt-actions .totop { position: absolute; top: 10px; right: 10px; }
.appt-actions:has(.totop) { margin-right: 36px; }
.card-hd + .totop, .card.flush > .totop { top: 12px; }
@media (max-width: 860px) { .totop { width: 36px; height: 36px; top: 8px; right: 8px; font-size: 16px; } .appt-actions:has(.totop) { margin-right: 40px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Every card title, including the header bar on table cards, uses the one eyebrow style. */
.card-hd h2 { font: 700 12.5px/1.4 var(--serif); text-transform: uppercase; letter-spacing: .09em; color: #836618; margin: 0; }
.card-hd { align-items: center; }
.flush-hd h2 { font: 700 12.5px/1.4 var(--serif); text-transform: uppercase; letter-spacing: .09em; color: #836618; }
@media (max-width: 860px) { .eyebrow, .card-hd h2, .flush-hd h2 { font-size: 13px; } }

/* The confidentiality notice is the one that must stand out: red, unlike any other panel. */
.notice.lock.confidential { background: #fdecea; border-color: #f0c0bb; border-left-color: var(--red); color: #6f1d17; }
.notice.lock.confidential b { color: #5a1611; }
/* Dashboard section headers match the card titles. */
details.dash > summary h2 { font: 700 12.5px/1.4 var(--serif); text-transform: uppercase; letter-spacing: .09em; color: #836618; }
details.dash > summary > .dim { font-size: 12px; }
.card.flush > .totop { top: 10px; right: 10px; }
/* A card header's right-hand note steps aside for the back-to-top arrow. */
.card:has(> .totop) > .card-hd > .right, .card:has(> .totop) > .card-hd > .small, .card:has(> .totop) > .flush-hd > .small { margin-right: 38px; }

/* Reports: a wrapping section bar above the document, an arrow beside each numbered heading. */
.jump.wrap { flex-wrap: wrap; gap: 1px; background: var(--line-soft); }
.jump.wrap a { background: #fff; border-right: 0; flex: 1 1 auto; }
.rpt-h { position: relative; }
.rpt-h > .totop { position: static; float: right; width: 22px; height: 22px; font-size: 12px; margin: 0 0 0 10px; }
.rpt-h > h2 { overflow: hidden; }
@media print { .jump, .totop { display: none !important; } }
/* Controls in the page-title bar (report period, fiscal year) match the buttons beside them. */
.subbar .right input.small, .subbar .right select.small {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--body); padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 5px; background: #fff; min-height: 32px; box-sizing: border-box;
}
.subbar .right .btn.sm { padding: 6px 12px; font-size: 12.5px; min-height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }
.subbar .right input.btn { border-color: var(--line); }
.subbar .right form.row { gap: 6px; }
.subbar .right input.small, .subbar .right select.small, .subbar .right .btn.sm { height: 33px; }
/* Key under a chart whose bars are labelled with codes. */
.chart-key { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 14px; font-size: 12px; color: var(--muted); }
.chart-key b { color: var(--navy); font-family: var(--mono); font-weight: 600; margin-right: 3px; }
/* Signed-out pages that are not the sign-in card get a small header back to sign-in. */
.pub-head { height: 56px; }
.pub-head .topnav { display: flex !important; flex-direction: row !important; width: auto !important; order: 0 !important; }
.pub-head .topnav a { padding: 6px 12px; font-size: 13px; border-radius: 4px; }
.signin-wrap.with-head { min-height: calc(100vh - 166px); padding-top: 28px; }
.signin-foot p { margin: 0 0 8px; }
.fld.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.foot-row a, .foot-note a { color: var(--navy-mid); }
@media (max-width: 1080px) {
  .pub-head { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 6px 10px; }
  .pub-head .topnav { flex-wrap: wrap; margin-left: 0; flex: 1 1 100%; }
  .pub-head .topnav a { padding: 8px 10px; }
}
fieldset.card { border: 1px solid var(--line); margin: 0; min-width: 0; }
fieldset.card > legend { float: left; width: 100%; padding: 0; }
fieldset.card > legend + * { clear: both; }
/* Public pages laid out in cards get the full content width, not the sign-in column. */
.signin-col.wide:has(.pub-page) { max-width: 1232px; }
.pub-page { display: flex; flex-direction: column; gap: 14px; }
.pub-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pub-title h1 { font-family: var(--serif); font-size: 24px; margin: 0; color: var(--ink); font-weight: 600; }
.pub-page ul.prose { margin: 0; padding-left: 18px; } .pub-page ul.prose li { margin: 4px 0; }
/* Terms of use: a document card with numbered sections, each with its arrow. */
.card.terms { max-width: 900px; margin: 0 auto; width: 100%; padding: 28px 36px; }
.card.terms h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); border-bottom: 1px solid var(--line); padding-bottom: 5px; margin: 22px 0 10px; overflow: hidden; }
.card.terms .rpt-h > .totop { position: static; float: right; width: 22px; height: 22px; font-size: 12px; margin: 0 0 0 10px; }
.card.terms ul, .card.terms ol { padding-left: 20px; }
@media (max-width: 560px) { .card.terms { padding: 18px 16px; } }
/* Public card pages sit at the top of the viewport, not centred in it; the phone header keeps the brand first. */
.signin-wrap.with-head:has(.pub-page) { place-items: start center; padding-top: 22px; }
@media (max-width: 1080px) { .pub-head .brand { order: 0; } .pub-head .topnav { order: 1 !important; } }

/* Who is signed in: name and role stacked, Sign out as a button to their right. */
.topbar .who { flex-direction: row; align-items: center; gap: 12px; text-align: right; }
.topbar .who .who-id { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.topbar .who form { display: inline; margin: 0; }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.btn.ghost:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5); }
.topbar .who .signout { padding: 6px 12px; font-size: 12.5px; min-height: 32px; margin: 0; }
.topbar .who .signout:focus-visible { outline-color: #fff; }
@media (max-width: 1080px) {
  .topbar .who { gap: 8px; }
  .topbar .who .signout { padding: 8px 10px; font-size: 12px; min-height: 36px; }
}

/* Client picker in the dashboard subbar: a select and a button, one row. */
.client-pick { display: inline-flex; gap: 6px; align-items: center; }
.client-pick select { height: 33px; max-width: 320px; }
@media (max-width: 640px) { .client-pick { width: 100%; } .client-pick select { flex: 1 1 auto; max-width: none; min-width: 0; width: auto; } .subbar .right .client-pick .btn { flex: 0 0 auto; } }
.client-pick [hidden] { display: none !important; }   /* the View button steps aside once the picker submits on change */
.choose-list { list-style: none; margin: 12px 0 0; padding: 0; }

/* The client tag in the header: which program the oversight roles are working in,
   on every page. Administrators switch from it; the Department's roles see theirs. */
.client-tag { flex: none; margin-left: 12px; position: relative; }
.client-tag > summary, .client-tag.static {
  list-style: none; cursor: default; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 4px 11px; border: 1px solid rgba(240, 220, 154, .5); border-radius: 999px; color: #f0dc9a; font-size: 12.5px; font-weight: 600;
}
.client-tag > summary { cursor: pointer; user-select: none; }
.client-tag > summary::-webkit-details-marker { display: none; }
.client-tag > summary::after {
  content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .8;
}
.client-tag[open] > summary { background: rgba(255,255,255,.12); }
.client-tag[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.client-tag > summary:hover { background: rgba(255,255,255,.10); }
.client-tag > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.client-tag .ct-k { font-weight: 500; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.client-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 280px; max-width: min(360px, calc(100vw - 24px));
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px;
  box-shadow: 0 12px 30px rgba(20, 36, 58, .18); display: flex; flex-direction: column; gap: 2px;
}
.client-panel form.inline { display: block; }
.client-opt {
  width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; border-radius: 5px; cursor: pointer;
  font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 1px; line-height: 1.35;
}
.client-opt b { font-weight: 600; font-size: 13.5px; }
.client-opt:hover { background: var(--paper-tint); }
.client-opt.on { background: var(--blue-bg); box-shadow: inset 3px 0 0 var(--gold); }
.client-opt:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.client-panel > a { color: var(--ink); font-size: 13px; padding: 9px 12px; border-radius: 5px; border-top: 1px solid var(--line); margin-top: 4px; }
.client-panel > a:hover { background: var(--paper-tint); color: var(--navy); }
.client-panel > p { margin: 6px 12px; }
@media (min-width: 1081px) and (max-width: 1240px) { .client-tag { margin-left: 8px; } .client-tag > summary, .client-tag.static { padding: 3px 9px; font-size: 12px; } }
@media (max-width: 1080px) {
  /* Its own line under the wordmark row, always visible, above the collapsed menu. */
  .client-tag { order: 4; width: 100%; margin: 4px 0 2px; }
  .topbar .topnav { order: 5; }
  .client-tag > summary, .client-tag.static { display: inline-flex; }
}

/* The recovery-codes card is shown inside the signed-in frame: keep it the width of the sign-in card, centred. */
main.page > .signin-card { max-width: 560px; margin: 8px auto 0; }

/* Session pages on a phone: one column in reading order — the engagement, when and
   how, joining details, then the meeting note and the save form. The two desktop
   columns dissolve (plain wrapper divs, nothing with semantics) so the cards can be ordered. */
@media (max-width: 860px) {
  #main:has(#when, #next) .split-2 > .stack { display: contents; }
  #engagement, #record { order: 1; }
  #when, #next { order: 2; }
  #joining { order: 3; }
  #note { order: 4; }
  #update { order: 5; }
}

/* Columns of several cards: each card keeps its own height; the last one takes up the
   slack so the two columns end level. (A lone card in a column still fills it.) */
.split-2 > .stack > .card, .split-2 > .stack > div { flex: 0 0 auto; }
.split-2 > .stack > :last-child { flex: 1 0 auto; }
/* The engagement page on a phone: the record, the next appointment, then the journey and the rest in order. */
@media (max-width: 860px) {
  #main:has(#journey) .split-2 > .stack { display: contents; }
  #main:has(#journey) #participant { order: 1; }  #main:has(#journey) #next { order: 2; }   #main:has(#journey) #journey { order: 3; }
  #main:has(#journey) #objectives { order: 4; }   #main:has(#journey) #sessions { order: 5; } #main:has(#journey) #hours { order: 6; }
  #main:has(#journey) #agreement { order: 7; }    #main:has(#journey) #assessments { order: 8; } #main:has(#journey) #documents { order: 9; }
  #main:has(#journey) #team { order: 10; }        #main:has(#journey) #feedback { order: 11; } #main:has(#journey) #reassign { order: 12; }
  #main:has(#journey) #update { order: 13; }
}
@media (max-width: 860px) {
  #main:has(#journey) #coach { order: 1; }
  #main:has(#journey) .split-2 > .stack > .notice { order: 14; }        /* the what-the-program-sees note closes the page */
  #main:has(#journey) .split-2 > .stack > .notice-warn { order: 6; }    /* a feedback request stays right under the sessions */
}

/* On screens wider than the 1280px frame the header's navy and the footer's panel run
   edge to edge; the content stays inside the frame. Painted with a spread shadow and
   clipped, so nothing moves and nothing scrolls sideways. */
.app > .topbar   { box-shadow: 0 0 0 100vmax var(--dark); clip-path: inset(0 -100vmax); }
.app > .site-foot { position: relative; box-shadow: 0 0 0 100vmax var(--panel); clip-path: inset(-1px -100vmax 0); }
.app > .site-foot::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--line);
                             box-shadow: 0 0 0 100vmax var(--line); clip-path: inset(0 -100vmax); }   /* the rule above the footer runs the full width too, painted the same way */
@media print { .app > .topbar, .app > .site-foot { box-shadow: none; clip-path: none; } }

/* A section's "All …" button sits on its title row. It lives outside the <summary>
   (a control inside the disclosure toggle is invalid and fails the accessibility check)
   and is placed on the row by position. */
details.dash { position: relative; }
details.dash > .dash-act { position: absolute; top: 3px; right: 0; }
details.dash:has(> .dash-act) > summary { padding-right: 150px; }
@media (max-width: 560px) {   /* on phones too the button keeps the right of the title row; the subtitle wraps beneath the title */
  details.dash > .dash-act { top: 4px; }
  details.dash:has(> .dash-act) > summary { padding-right: 124px; }
}