/* Page-scoped CSS from mock-site/account.html
   Generated; do not hand-edit. */
/* ==========================================================================
   PAGE-SCOPED ONLY. Everything else comes from assets/site.css.
   Three things live here and nowhere else:
     1. the two-state switch,
     2. the enrolled-course card (the dashboard's one new composite),
     3. the certificate card, including its locked/dimmed state.
   The dashboard's shape is carried over from the reference student portal
   (Sedation Certification/course-home.html ~lines 121–180): hero band with
   progress stats and a resume control, then a grid of progress rows, then a
   resources rail, then a certificate that stays locked until completion.
   Structure only — no color, no type, no imagery from that file.
   ========================================================================== */

/* --- 1. The two-state switch ------------------------------------------- */
[data-auth="out"] [data-state="in"]  { display: none !important; }
[data-auth="in"]  [data-state="out"] { display: none !important; }

.statebar {
  background: var(--chrome-deep); color: var(--c-on-dark);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.statebar__inner {
  max-width: var(--w-wide); margin-inline: auto;
  padding: var(--s-3) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
}
.statebar__label {
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--c-on-dark-accent); margin: 0;
}
.statebar__btns { display: flex; gap: var(--s-2); }
.statebar__btn {
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 600;
  padding: 6px var(--s-4);
  color: var(--c-on-dark); background: transparent;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-sm);
  cursor: pointer;
}
.statebar__btn:hover { background: rgba(255,255,255,.10); }
.statebar__btn[aria-pressed="true"] { background: #fff; color: var(--c-aubergine-deep); border-color: #fff; }
.statebar__note { font-size: var(--t-micro); color: var(--c-on-dark-mute); margin: 0; }

/* --- 2. Enrolled-course card ------------------------------------------- */
.enrolled { display: flex; flex-direction: column; gap: var(--s-3); }
.enrolled__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.enrolled__title { font-size: var(--t-h4); line-height: 1.28; }
.enrolled__title a { color: inherit; text-decoration: none; }
.enrolled__title a:hover { color: var(--accent); text-decoration: underline; }
.enrolled__prog { margin-top: var(--s-1); }
.enrolled__next { font-size: var(--t-micro); color: var(--text-soft); margin: 0; }
.enrolled__actions { margin-top: auto; padding-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- 3. Certificate card, with the locked state ------------------------- */
.cert {
  background: var(--bg-card); border: var(--hair);
  border-left: var(--rule) solid var(--lane);
  border-radius: var(--r-lg); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
}
/* The card is a flex column, so a lane chip would otherwise stretch the full
   width of it. Chips size to their own content. */
.cert > .chip { align-self: flex-start; }
.cert__course { font-family: var(--font-display); font-weight: 700; font-size: var(--t-small); line-height: 1.3; }
.cert__meta { font-size: var(--t-micro); color: var(--text-mute); margin: 0; }
.cert__no { font-family: var(--font-num); font-size: var(--t-micro); color: var(--text-mute); }
.cert__actions { margin-top: var(--s-2); }
.cert--locked {
  border-left-style: dotted; border-left-color: var(--border-strong);
  background: var(--bg-inset); opacity: .62;
}
.cert--locked .cert__course { color: var(--text-soft); }

/* A slot for something not yet decided. Deliberately NOT .pending — that
   component is reserved for the two compliance placeholders. */
.tbd {
  font-family: var(--font-num); font-size: var(--t-micro); color: var(--text-mute);
  border-bottom: 1px dotted var(--border-strong);
}

/* --- Small shared bits -------------------------------------------------- */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-text); font-size: var(--t-micro);
  color: var(--accent); text-decoration: underline;
}
.linkish:hover { color: var(--accent-hover); }
.settings-list { list-style: none; padding: 0; margin: 0; }
.settings-list li {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-4); align-items: baseline;
  padding: var(--s-4) 0; font-size: var(--t-small);
}
.settings-list li + li { border-top: var(--hair); }
.settings-list dt, .settings-list .settings-list__k {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-micro);
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute);
}
.settings-list__v { color: var(--text); }
@media (max-width: 640px) {
  .settings-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .settings-list .settings-list__k { grid-column: 1 / -1; }
}
.sub-note { font-size: var(--t-micro); color: var(--text-mute); margin-top: var(--s-3); }
.hero__facts--dash { gap: var(--s-5) var(--s-7); }