/* ============================================================
   MedicOS — Career Hub layout.
   Mobile-first. Read on a moving ambulance, tapped with gloves.
   ============================================================ */

/* ============================================================
   The Career Hub is always light, on white.

   Deliberately NOT theme-following. The protocol app is read in a dark
   ambulance at 3am and its dark mode earns its keep; the hub is a filing
   cabinet you sit down with, and it is the half that gets printed,
   screenshotted and handed to somebody. One appearance means the
   Experience Summary looks the same on screen as it does on paper.

   Every selector tokens.css uses to install the dark palette is matched
   and overridden here - bare :root, the [data-theme] attribute in both
   directions, and the prefers-color-scheme media query. Miss one and a
   dark-mode phone gets half a theme.

   hub.css loads AFTER tokens.css, so this wins on order for equal
   specificity, and the attribute selectors match tokens.css's own.

   Page white, cards white: the separation that --bg used to provide now
   comes from --line borders and --shadow, and --surface-3 gives the
   subtle fills something to be.
   ============================================================ */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#EDF2F8; --surface-3:#F6F9FC;
  --line:#DBE4EE; --line-soft:#EAF0F6; --rule:#0563C1;
  --text:#0B1220; --muted:#44566B; --faint:#75899F;
  --accent:#0563C1; --accent-soft:#EAF2FC; --accent-ring:#0563C155;
  --navy:#1F3864;
  --ok:#1E7A3C;    --ok-soft:#E8F4EC;
  --warn:#B4700E;  --warn-soft:#FDF3E3;
  --bad:#C00000;   --bad-soft:#FDEAEC;
  --warnbg:#FFF6E5; --warnline:#D98C1F; --warnink:#6A4310;
  --shadow:0 1px 2px rgba(10,30,60,.06), 0 8px 22px -16px rgba(10,30,60,.22);
  --shadow-lift:0 2px 6px rgba(10,30,60,.09), 0 16px 34px -20px rgba(10,30,60,.32);
}

@media (prefers-color-scheme: dark) {
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#EDF2F8; --surface-3:#F6F9FC;
    --line:#DBE4EE; --line-soft:#EAF0F6; --rule:#0563C1;
    --text:#0B1220; --muted:#44566B; --faint:#75899F;
    --accent:#0563C1; --accent-soft:#EAF2FC; --accent-ring:#0563C155;
    --navy:#1F3864;
    --ok:#1E7A3C;    --ok-soft:#E8F4EC;
    --warn:#B4700E;  --warn-soft:#FDF3E3;
    --bad:#C00000;   --bad-soft:#FDEAEC;
    --warnbg:#FFF6E5; --warnline:#D98C1F; --warnink:#6A4310;
    --shadow:0 1px 2px rgba(10,30,60,.06), 0 8px 22px -16px rgba(10,30,60,.22);
    --shadow-lift:0 2px 6px rgba(10,30,60,.09), 0 16px 34px -20px rgba(10,30,60,.32);
  }
}

/* The viewer paints its own ground behind the page; without this an
   installed PWA can show the OS dark colour around the content. */
html, body { background: var(--bg); color: var(--text); }


/* ---------- dashboard grid ---------- */
.dash{display:grid;gap:13px;margin-top:4px}
/* A section label with an action on the same line. */
.lblrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
@media(min-width:700px){
  .dash{grid-template-columns:repeat(2,1fr)}
  .dash .span2{grid-column:1/-1}
}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 12px;text-align:center;box-shadow:var(--shadow);
}
.stat .n{font-size:27px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:6px;line-height:1.3}
.stat.ok  .n{color:var(--ok)}
.stat.warn .n{color:var(--warn)}
.stat.bad .n{color:var(--bad)}

/* ---------- next renewal, the headline number ---------- */
.next{
  background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent);
  border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow);
}
.next .lbl{margin-bottom:8px}
.next .nm{font-size:18px;font-weight:700;line-height:1.25}
.next .row{display:flex;align-items:baseline;gap:10px;margin-top:9px;flex-wrap:wrap}
.next .days{font-size:31px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent)}
.next .when{font-size:13.5px;color:var(--muted)}
.next.warn{border-left-color:var(--warn)} .next.warn .days{color:var(--warn)}
.next.bad{border-left-color:var(--bad)}   .next.bad .days{color:var(--bad)}

/* ---------- quick launch ---------- */
.launch{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:520px){.launch{grid-template-columns:repeat(4,1fr)}}
.launch a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:82px;padding:12px 8px;border-radius:var(--r-sm);
  background:var(--surface-3);border:1px solid var(--line-soft);
  font-size:12.5px;font-weight:700;color:var(--text);text-align:center;line-height:1.3;
}
.launch a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.launch svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- lists ---------- */
.rows{display:flex;flex-direction:column}
.rows a,.rows .r{
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-top:1px solid var(--line-soft);color:var(--text);min-height:var(--tap);
}
.rows a:first-child,.rows .r:first-child{border-top:none}
.rows a:hover{background:var(--surface-3);text-decoration:none}
.rows .b{flex:1;min-width:0}
/* Both are spans, so without display:block the title and its subtitle
   run together on one line - "Paramedic License30 days before". Latent
   until M4: .rows had no data to render before credentials existed. */
.rows .t{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.rows .s{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.rows .rt{flex:0 0 auto;text-align:right;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rows .go{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:var(--faint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- credential card (wallet) ---------- */
.creds{display:grid;gap:11px;margin-top:14px}
@media(min-width:640px){.creds{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.creds{grid-template-columns:repeat(3,1fr)}}
.cred{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px 15px;border-top:4px solid var(--line);
  display:flex;flex-direction:column;gap:9px;
}
.cred.ok{border-top-color:var(--ok)}
.cred.warn{border-top-color:var(--warn)}
.cred.bad{border-top-color:var(--bad)}
.cred .top{display:flex;align-items:flex-start;gap:9px}
.cred .nm{flex:1;min-width:0;font-size:15.5px;font-weight:700;line-height:1.3}
.cred .iss{font-size:12.5px;color:var(--muted)}
.cred .exp{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line-soft)}
.cred .exp .d{font-size:20px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cred .exp .w{font-size:12.5px;color:var(--muted)}
.cred.ok .exp .d{color:var(--ok)}
.cred.warn .exp .d{color:var(--warn)}
.cred.bad .exp .d{color:var(--bad)}
.cred .doc{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--accent)}
.cred .doc svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- resources ---------- */
.rescat{margin-top:22px}
.rescat h2{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.rescat h2 svg{width:19px;height:19px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reslist{display:grid;gap:9px}
@media(min-width:640px){.reslist{grid-template-columns:repeat(2,1fr)}}
.reslink{
  display:flex;align-items:center;gap:12px;padding:13px 14px;min-height:var(--tap);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text);box-shadow:var(--shadow);
}
.reslink:hover{border-color:var(--accent);text-decoration:none}
.reslink .b{flex:1;min-width:0}
.reslink .t{font-size:14.5px;font-weight:700;line-height:1.3}
.reslink .s{font-size:12.5px;color:var(--muted);margin-top:2px}
.reslink .ext{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- career timeline ---------- */
.since{
  background:linear-gradient(135deg,var(--accent),var(--navy));color:#fff;
  border-radius:var(--r);padding:20px 18px;box-shadow:var(--shadow);
}
.since .l{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.since .d{font-size:30px;font-weight:700;line-height:1.1;margin-top:7px}
.since .s{font-size:13.5px;opacity:.85;margin-top:6px}
.tl{position:relative;margin-top:18px;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:5px;bottom:5px;width:2px;background:var(--line)}
.tlitem{position:relative;padding:11px 0}
.tlitem::before{
  content:"";position:absolute;left:-23px;top:16px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--bg);
}
.tlitem .t{font-size:14.5px;font-weight:700;line-height:1.3}
.tlitem .d{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---------- counters ---------- */
.counters{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
@media(min-width:640px){.counters{grid-template-columns:repeat(4,1fr)}}
.counter{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 10px;text-align:center}
.counter .n{font-size:23px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent)}
.counter .l{font-size:11px;font-weight:700;color:var(--faint);margin-top:5px;text-transform:uppercase;letter-spacing:.05em}

/* ---------- "coming in milestone N" ---------- */
.soon{
  display:flex;align-items:flex-start;gap:11px;padding:14px 15px;border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px dashed var(--accent);margin-top:16px;
}
.soon svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.soon .b{flex:1;min-width:0}
.soon .t{font-size:14px;font-weight:700;color:var(--accent)}
.soon .s{font-size:13px;color:var(--muted);line-height:1.5;margin-top:3px}

/* ---------- section spacing ---------- */
.sect{margin-top:24px}
.sect > .lbl{display:block;margin-bottom:10px}

/* ---------- collapsed profile confirmation ---------- */
.profcard .card-h{align-items:flex-start;gap:12px}
.profinit{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  font-size:15px;font-weight:700;letter-spacing:.02em;
}
.profcard h2{font-size:18px;line-height:1.25}
.profsub{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.profrows{margin:6px -16px 0}
.profrows .r{padding:11px 16px}
.profrows .t{font-size:13.5px;font-weight:600;color:var(--muted)}
.profrows .rt{font-size:13.5px;color:var(--text);font-weight:700;text-align:right}

/* ---------- credential card actions ---------- */
.credacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.credacts .btn{flex:1;min-width:0}
.credacts .btn svg{width:14px;height:14px;margin-right:6px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- checkbox row, used inside sheets ---------- */
.check{
  display:flex;align-items:center;gap:10px;margin-top:16px;min-height:var(--tap);
  font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;
}
.check input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
.check span{flex:1;min-width:0;line-height:1.4}

/* ---------- documents ---------- */
.doclist{display:flex;flex-direction:column;margin:4px -20px 0}
.docrow{
  display:flex;align-items:center;gap:11px;padding:12px 20px;min-height:var(--tap);
  border-top:1px solid var(--line-soft);
}
.docrow:first-child{border-top:none}
.docrow .ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--accent-soft);
}
.docrow .ic svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.docrow .b{flex:1;min-width:0}
.docrow .t{font-size:14px;font-weight:700;line-height:1.3;word-break:break-word}
.docrow .s{font-size:12.5px;color:var(--muted);margin-top:2px}
.docrow .act{
  flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
}
.docrow .act:hover{border-color:var(--accent);color:var(--accent)}
.docrow .act.del:hover{border-color:var(--bad);color:var(--bad)}
.docrow .act svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* The real file input is unusable on a phone — the label is the button. */
.dropzone{
  display:flex;align-items:center;gap:11px;width:100%;margin-top:16px;padding:15px 16px;
  min-height:var(--tap);text-align:left;font-family:inherit;
  border:1px dashed var(--accent);border-radius:var(--r-sm);background:var(--accent-soft);
  cursor:pointer;color:var(--accent);font-size:14px;font-weight:700;
}
.dropzone:hover{filter:brightness(.97)}
.dropzone svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dropzone .s{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:3px}
.dropzone.busy{opacity:.6;pointer-events:none}

.cred .doc{background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
.cred .doc:hover{text-decoration:underline}

/* ---------- reminder ladder ---------- */
.ladder{display:flex;gap:7px;flex-wrap:wrap}
.step{
  padding:8px 13px;border-radius:100px;font-size:12.5px;font-weight:700;font-family:inherit;
  background:var(--surface-2);color:var(--faint);border:1px solid transparent;cursor:pointer;
  text-decoration:line-through;
}
.step.on{
  background:var(--accent-soft);color:var(--accent);border-color:var(--accent);
  text-decoration:none;
}
.step:hover{filter:brightness(.97)}

/* ---------- standing reminder rows ---------- */
.remrow{gap:11px}
.remrow.done .t{text-decoration:line-through;color:var(--muted)}
.tick{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:none;border:2px solid var(--line);color:transparent;cursor:pointer;padding:0;
}
.tick:hover{border-color:var(--ok)}
.tick.on{background:var(--ok);border-color:var(--ok);color:#fff}
.tick svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.rows .act{
  flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;padding:0;
}
.rows .act:hover{border-color:var(--accent);color:var(--accent)}
.rows .act svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- career timeline, tappable ---------- */
.tlbtn{
  display:block;width:100%;text-align:left;background:none;border:none;padding:0;
  font-family:inherit;color:inherit;cursor:pointer;
}
.tlbtn:hover .t{color:var(--accent)}
.tlbtn .t{font-size:14.5px;font-weight:700;line-height:1.3}
.tlbtn .d{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}

/* ---------- counters, tappable ---------- */
.counter{position:relative;padding:0}
.counter .cbtn{
  display:block;width:100%;padding:13px 10px;background:none;border:none;
  font-family:inherit;color:inherit;cursor:pointer;text-align:center;
}
.counter .cbtn .n{
  display:block;font-size:23px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--accent);
}
.counter .cbtn .l{
  display:block;font-size:11px;font-weight:700;color:var(--faint);margin-top:5px;
  text-transform:uppercase;letter-spacing:.05em;line-height:1.3;
}
.counter.ghost .cbtn .n{color:var(--faint)}
.counter:hover{border-color:var(--accent)}

/* +1 without opening anything. Small on purpose: it sits beside a
   number people will want to correct, not only increment. */
.counter .bump{
  position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--surface-3);border:1px solid var(--line);color:var(--muted);
}
.counter .bump:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.counter .bump svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}

/* ---------- experience: level breakdown on the hero card ---------- */
.levels{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.levels .lvl{
  display:flex;flex-direction:column;gap:2px;padding:7px 11px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.16);font-size:12px;line-height:1.3;
}
.levels .lvl b{font-size:12.5px}

.summarylink{display:flex;align-items:center;justify-content:center;gap:9px}
.summarylink svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- positions ---------- */
.poslist{display:flex;flex-direction:column;gap:10px}
.pos{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);border-left:4px solid var(--line);
}
.pos.now{border-left-color:var(--accent)}
.posbtn{
  display:block;width:100%;text-align:left;padding:13px 15px;background:none;border:none;
  font-family:inherit;color:inherit;cursor:pointer;
}
.posbtn:hover .t{color:var(--accent)}
.posbtn .ph{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.posbtn .t{font-size:15.5px;font-weight:700;line-height:1.3}
.posbtn .e{display:block;font-size:13.5px;color:var(--text);margin-top:3px}
.posbtn .d{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;
  font-variant-numeric:tabular-nums}
.posbtn .n{display:block;font-size:12.5px;color:var(--faint);margin-top:6px;line-height:1.5}

/* ---------- the printable summary sheet ---------- */
.sheet{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:26px 22px;margin-top:13px;
}
@media(min-width:700px){.sheet{padding:38px 40px}}

.s-head{border-bottom:2px solid var(--rule);padding-bottom:13px;margin-bottom:18px}
.s-head h1{font-size:26px;line-height:1.15;margin:0}
.s-role{margin:6px 0 0;font-size:15px;font-weight:700;color:var(--accent)}
.s-contact{margin:4px 0 0;font-size:13px;color:var(--muted)}

.s-glance{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:22px}
@media(min-width:620px){.s-glance{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
.s-tile{
  background:var(--surface-3);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:11px 12px;text-align:center;
}
.s-tile .n{font-size:17px;font-weight:700;line-height:1.2;color:var(--accent);
  font-variant-numeric:tabular-nums}
.s-tile .l{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);margin-top:4px;line-height:1.3}

.s-sec{margin-top:22px}
.s-sec > h2{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:5px;margin:0 0 12px;
}
.s-sub{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin:15px 0 8px}

.s-levels{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px;font-size:13px;color:var(--muted)}
.s-levels b{color:var(--text)}

.s-job{margin-bottom:14px}
.s-job:last-child{margin-bottom:0}
.s-job-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.s-job-h .t{flex:1;min-width:0;font-size:15px;font-weight:700;line-height:1.3}
.s-job-h .w{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.s-job-s{font-size:13.5px;color:var(--text);margin-top:2px}
.s-job-n{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}

.s-cert{display:flex;align-items:baseline;gap:10px;padding:6px 0;flex-wrap:wrap}
.s-cert .t{font-size:13.5px;font-weight:700;line-height:1.3}
.s-cert .i{flex:1;min-width:0;font-size:12.5px;color:var(--muted)}
.s-cert .w{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.s-cert.lapsed .t,.s-cert.lapsed .i{color:var(--faint)}

.s-calls{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:620px){.s-calls{grid-template-columns:repeat(4,1fr)}}
.s-call{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:9px 8px;text-align:center}
.s-call .n{display:block;font-size:17px;font-weight:700;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums}
.s-call .l{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--faint);margin-top:5px;line-height:1.3}
.s-note{font-size:11.5px;color:var(--faint);margin:9px 0 0}

.s-ach{padding:6px 0}
.s-ach .t{font-size:13.5px;font-weight:700;line-height:1.35}
.s-ach .w{font-size:12.5px;color:var(--muted);margin-left:8px;white-space:nowrap}
.s-ach .n{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}

.s-foot{margin-top:26px;padding-top:11px;border-top:1px solid var(--line-soft)}
.s-foot p{margin:0;font-size:11px;line-height:1.55;color:var(--faint)}

/* ---------- the wallet fan ----------
   Apple Wallet stacks cards down the page with the top strip of each one
   showing. This is that on its side: each card overlaps the one before,
   leaving the status band and the start of the name visible, and the last
   card sits fully open on top.

   WSTACK_PEEK: 190 card width minus the 132 overlap leaves 58px of every
   buried card showing. Change one number and change the other, or the
   sliver stops lining up with the band. */
.wstack-wrap{margin-top:18px}
.wstack{
  display:flex;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  /* Bleed to the screen edges so the fan can run off the side the way a
     carousel should, then pad the first and last card back in. */
  margin:9px -16px 0;padding:12px 0 18px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.wstack::-webkit-scrollbar{display:none}

.wcard{
  position:relative;flex:0 0 auto;width:190px;min-height:116px;
  display:flex;align-items:stretch;padding:0;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);font-family:inherit;text-align:left;cursor:pointer;
  scroll-snap-align:start;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s;
}
/* 190 - 94 leaves 96px of every buried card showing: the status band plus
   enough of the name to tell PHTLS from Paramedic License. The 58px this
   started at showed "PHTL" and "NREM", which identifies nothing. */
.wcard + .wcard{margin-left:-94px}
.wcard:first-child{margin-left:16px}
.wcard:last-child{margin-right:16px}

/* Lift out of the fan on hover or keyboard focus. z-index only matters
   here - in the resting state DOM order already does it. */
.wcard:hover,.wcard:focus-visible{transform:translateY(-9px);box-shadow:var(--shadow-lift);z-index:50}
.wcard:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring),var(--shadow-lift)}
.wcard:active{transform:translateY(-4px)}

.wband{flex:0 0 9px;border-radius:13px 0 0 13px;background:var(--line)}
.wcard.ok .wband{background:var(--ok)}
.wcard.warn .wband{background:var(--warn)}
.wcard.bad .wband{background:var(--bad)}

.wbody{flex:1;min-width:0;padding:11px 12px;display:flex;flex-direction:column}
.wnm{
  font-size:14px;font-weight:700;line-height:1.25;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wiss{font-size:11.5px;color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wfoot{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.wdays{font-size:15px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--muted)}
.wcard.ok .wdays{color:var(--ok)}
.wcard.warn .wdays{color:var(--warn)}
.wcard.bad .wdays{color:var(--bad)}
.wpill{
  font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 7px;border-radius:100px;white-space:nowrap;
  background:var(--surface-2);color:var(--muted);
}
.wpill.ok{background:var(--ok-soft);color:var(--ok)}
.wpill.warn{background:var(--warn-soft);color:var(--warn)}
.wpill.bad{background:var(--bad-soft);color:var(--bad)}

.wstack-hint{margin:0;font-size:12px;color:var(--faint)}

@media (prefers-reduced-motion:reduce){
  .wcard{transition:none}
}

/* Wider screens can afford a bigger card and less overlap. */
@media(min-width:700px){
  .wcard{width:220px;min-height:124px}
  .wcard + .wcard{margin-left:-110px}
}

/* ---------- card faces: the uploaded photo ----------
   A credential with a photo shows it the way a real wallet card shows
   its art. The text still has to be readable over whatever was
   photographed - a white licence card on a white desk is a real
   possibility - so it sits on a scrim that goes from transparent at the
   top to nearly solid where the words are. Never text straight onto the
   picture. */
.wcard.hasart{background:#0B1220}
.wart{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:13px;
  /* The status band keeps its own colour on top of the photo. */
  z-index:0;
}
.wcard.hasart .wband{position:relative;z-index:2}
.wcard.hasart .wbody{
  position:relative;z-index:2;
  /* The scrim. Sized so the bottom third - name, days, pill - is always
     legible regardless of what is underneath. */
  /* Strong at the TOP as well as the bottom. The first version faded in
     from transparent, which was right for a caption but wrong here: the
     credential NAME sits at the top of this card, and white-on-pale was
     unreadable over a photo of a white licence. The photo still reads as
     a photo; it is just darkened enough to carry text anywhere on it. */
  background:linear-gradient(to bottom,
    rgba(8,14,24,.58) 0%, rgba(8,14,24,.50) 34%,
    rgba(8,14,24,.74) 72%, rgba(8,14,24,.90) 100%);
  border-radius:0 13px 13px 0;
}
.wcard.hasart .wnm{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.wcard.hasart .wiss{color:rgba(255,255,255,.86);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.wcard.hasart .wdays{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* The status pill keeps its meaning but needs its own ground on a photo. */
.wcard.hasart .wpill{background:rgba(255,255,255,.92)}
.wcard.hasart .wpill.ok{color:#12602E}
.wcard.hasart .wpill.warn{color:#8A550A}
.wcard.hasart .wpill.bad{color:#9B0000}

/* A photo card that is mid-load should not flash white text on white. */
.wcard.hasart .wart{background:#0B1220}

/* ---------- full card view ----------
   Tap a card in the fan and its photo opens as large as the screen
   allows. Dark, full-bleed, minimal chrome: the picture is the content,
   and everything else here is trying not to be in front of it. */
.cardview{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center}
/* .92 left 8 percent of a white page bleeding through, which is enough
   for the headings behind to stay faintly legible - it read as an
   unfinished overlay rather than a viewer. Near-opaque, plus a blur
   where it is supported, so the card is the only thing on screen. */
.cv-bg{
  position:absolute;inset:0;background:rgba(6,10,18,.975);opacity:0;transition:opacity .2s;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.cardview.on .cv-bg{opacity:1}
.cv-in{
  position:relative;z-index:1;display:flex;flex-direction:column;
  width:100%;height:100%;max-width:1100px;
  padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  transform:scale(.97);opacity:0;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), opacity .18s;
}
.cardview.on .cv-in{transform:none;opacity:1}

.cv-top{display:flex;align-items:flex-start;gap:12px;padding:6px 6px 12px;flex:none}
.cv-t{flex:1;min-width:0;color:#fff}
.cv-t b{display:block;font-size:17px;line-height:1.25}
.cv-t span{display:block;font-size:13px;color:rgba(255,255,255,.72);margin-top:3px}
.cv-x{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:none;color:#fff;cursor:pointer;padding:0;
}
.cv-x:hover{background:rgba(255,255,255,.24)}
.cv-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cv-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* The picture. object-fit:contain so a card photographed in any aspect
   ratio is shown whole - cropping somebody's licence to fill a box is
   the one thing this view must not do. */
.cv-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto}
.cv-img{
  max-width:100%;max-height:100%;object-fit:contain;
  border-radius:10px;background:#fff;box-shadow:0 18px 50px -12px rgba(0,0,0,.7);
}
.cv-msg{color:rgba(255,255,255,.82);text-align:center;font-size:15px;line-height:1.6;padding:30px 20px}
.cv-msg b{color:#fff}

.cv-foot{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 6px 4px}
.cv-foot:empty{display:none}
.cv-nav{display:flex;align-items:center;gap:14px}
.cv-arrow{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:none;color:#fff;cursor:pointer;padding:0;
}
.cv-arrow:hover{background:rgba(255,255,255,.26)}
.cv-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.cv-count{color:rgba(255,255,255,.8);font-size:13px;font-variant-numeric:tabular-nums;min-width:64px;text-align:center}
.cv-files{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

@media (prefers-reduced-motion:reduce){
  .cv-bg,.cv-in{transition:none}
}

/* ---------- continuing education ---------- */
.cecard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:15px 16px;margin-bottom:11px;border-left:4px solid var(--line);
}
.cecard.ok{border-left-color:var(--ok)}
.cecard.warn{border-left-color:var(--warn)}
.cecard-h .b{flex:1;min-width:0}
.cecard-h .t{font-size:16px;font-weight:700;line-height:1.25}
.cecard-h .s{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.cecard-f{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}

/* Two bars, always both. The total alone is the number that misleads. */
.cebar + .cebar{margin-top:11px}
.cebar-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px}
.cebar-h .l{font-size:12.5px;font-weight:700;color:var(--muted)}
.cebar-h .v{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);
  display:inline-flex;align-items:center;gap:5px}
.cebar-h .v.met{color:var(--ok)}
.cebar-h .v svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.cebar-t{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.cebar-t i{display:block;height:100%;border-radius:4px;background:var(--accent);
  transition:width .35s cubic-bezier(.2,.8,.3,1)}
.cebar-t i.met{background:var(--ok)}

/* The log */
.ceRow{gap:11px}
.cehrs{
  flex:0 0 auto;min-width:46px;padding:6px 8px;border-radius:var(--r-sm);text-align:center;
  background:var(--surface-2);color:var(--muted);
  font-size:15px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
}
.cehrs.instr{background:var(--ok-soft);color:var(--ok)}
.cehrs i{display:block;font-size:9.5px;font-weight:700;font-style:normal;
  text-transform:uppercase;letter-spacing:.05em;margin-top:3px;opacity:.8}

@media (prefers-reduced-motion:reduce){ .cebar-t i{transition:none} }

/* ---------- CE progress ring ----------
   The headline number as a circle. A bar answers "how much", a ring
   answers "how far round am I", and the second is the question people
   actually ask a week before a deadline. The bars below carry the
   detail, because the ring alone hides WHICH requirement is short and
   that is the whole point of the feature. */
.cering-w{position:relative;flex:0 0 auto;width:80px;height:80px;display:grid;place-items:center}
.cering{width:80px;height:80px;transform:rotate(-90deg)}
.cering circle{fill:none;stroke-width:7;stroke-linecap:round}
.cering .track{stroke:var(--surface-2)}
.cering .fill{
  stroke:var(--accent);
  transition:stroke-dasharray .6s cubic-bezier(.2,.8,.3,1);
}
.cering.done .fill{stroke:var(--ok)}
.cering-n{
  position:absolute;font-size:19px;font-weight:700;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.cering-n i{font-style:normal;font-size:11px;font-weight:700;color:var(--faint);margin-left:1px}
.cecard.ok .cering-n{color:var(--ok)}

.cecard-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.cecard-h .h{font-size:13.5px;font-weight:600;line-height:1.45;margin-top:6px;color:var(--text)}
.cebars{padding-top:2px}

@media (prefers-reduced-motion:reduce){ .cering .fill{transition:none} }