/* Training ILM — Wilmington Dispensary staff learning.
   Coastal learning room: deep ocean teal navigation, sea glass and paper
   blue-gray workspace, white reading sheets, restrained amber focus.
   Radii: 6px controls, 12px panels, 18px feature surfaces. No gradients. */

:root {
  --ocean: #143f46;
  --ocean-soft: #2b6068;
  --seaglass: #d8e8e6;
  --canvas: #f3f6f7;
  --paper: #ffffff;
  --ink: #18343a;
  --muted: #5b6f73;
  --line: #d7e0e2;
  --amber: #b56724;
  --ok: #1e6b3a;
  --fail: #a13528;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

h1, h2, h3 {
  color: var(--ocean);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.2;
}
h1 { font-size: 1.6rem; margin: 0 0 0.4rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }

a { color: var(--ocean-soft); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 1px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 10;
  background: var(--paper); color: var(--ocean);
  padding: 0.5rem 0.9rem; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- layout ---------- */
.layout { min-height: 100vh; display: flex; flex-direction: column; }

/* Compact brand bar: primary surface on mobile, thin on desktop. */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  background: var(--ocean); color: #fff; padding: 0.55rem 1rem;
}
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.02rem; }
.brand span { display: block; font-weight: 400; font-size: 0.72rem; opacity: 0.85; }

.navmenu { margin-left: auto; }
.navmenu > summary {
  list-style: none; cursor: pointer; color: #fff;
  border: 1px solid var(--ocean-soft); border-radius: var(--radius-sm);
  padding: 0.45rem 1.1rem; font-weight: 600;
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu[open] > summary { background: var(--ocean-soft); }
.navmenu nav { padding-top: 0.5rem; }
.navmenu h2 {
  color: #9fc0c4; font-family: inherit; font-size: 0.78rem;
  font-weight: 700; margin: 0.6rem 0 0.2rem;
}
.navmenu a { display: block; color: #e7eef0; padding: 0.5rem 0.4rem; text-decoration: none; }
.navmenu a[aria-current="page"] { color: #fff; font-weight: 700; }
.menu-user { border-top: 1px solid var(--ocean-soft); margin-top: 0.6rem; padding-top: 0.6rem; color: #e7eef0; font-size: 0.9rem; }
.menu-user a { display: inline; padding: 0; }

.body-wrap { display: flex; flex: 1; align-items: stretch; }

.sidebar { display: none; }

.content { flex: 1; padding: 1.2rem 1.1rem; min-width: 0; }

/* ---------- desktop: 220px teal nav + broad light workspace ---------- */
@media (min-width: 761px) {
  .topbar { display: none; }
  .sidebar {
    display: flex; flex-direction: column;
    width: 220px; flex: 0 0 220px;
    background: var(--ocean); color: #fff;
    padding: 1.2rem 0.9rem 1rem;
  }
  .brand-side { margin-bottom: 1.2rem; }
  .sidebar nav { margin-bottom: 1.1rem; }
  .sidebar h2 {
    color: #9fc0c4; font-family: inherit; font-size: 0.78rem;
    font-weight: 700; margin: 0 0 0.25rem; padding-left: 0.4rem;
  }
  .sidebar nav a {
    display: block; color: #dfe9eb; text-decoration: none;
    padding: 0.42rem 0.5rem; border-radius: var(--radius-sm);
    font-size: 0.95rem;
  }
  .sidebar nav a:hover { background: var(--ocean-soft); color: #fff; }
  .sidebar nav a[aria-current="page"] {
    background: var(--ocean-soft); color: #fff; font-weight: 700;
  }
  .sidefoot {
    margin-top: auto; border-top: 1px solid var(--ocean-soft);
    padding-top: 0.8rem; font-size: 0.85rem; color: #cfdde0;
  }
  .sidefoot p { margin: 0.15rem 0; }
  .sidefoot-name { color: #fff; font-weight: 600; }
  .sidefoot a { color: #cfdde0; }
  .linklike { color: #cfdde0; }
  .content { padding: 1.8rem 2.4rem; max-width: 1180px; }
}

/* ---------- surfaces ---------- */
.panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 1.1rem 1.3rem; margin: 0 0 1.2rem;
}
.sheet {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 1.6rem 1.8rem; margin: 0 0 1.2rem;
  max-width: 75ch;
}
.sheet table { display: block; overflow-x: auto; }
.sheet ul, .sheet ol { padding-left: 1.4rem; }

.pagehead { margin-bottom: 1rem; }
.pagehead .lede { color: var(--muted); max-width: 75ch; }
.pagehead-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pagehead-row h1 { margin-right: auto; }
.headmeta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.crumbs { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.7rem; }
.crumbs a { text-decoration: none; }
.crumbs span[aria-current] { color: var(--ink); }

/* ---------- home greeting + continuation (the one memorable surface) ---------- */
.greeting {
  position: relative; overflow: hidden;
  background: var(--seaglass);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.6rem 1.4rem; margin: 0 0 1.4rem;
  display: grid; gap: 1rem;
}
@media (min-width: 900px) {
  .greeting { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); align-items: center; }
}
.greeting .tidal {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 90px;
  opacity: 0.8; pointer-events: none;
}
.greeting-text { position: relative; }
.greeting-text h1 { margin-bottom: 0.3rem; }
.greeting-text p { max-width: 52ch; margin: 0; }
.continue {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
}
.continue-label { margin: 0; font-size: 0.82rem; color: var(--muted); }
.continue-seq {
  margin: 0.1rem 0; font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem; line-height: 1; color: var(--seaglass);
  -webkit-text-stroke: 1px var(--ocean-soft);
}
.continue-title { margin: 0.1rem 0 0.3rem; font-size: 1.1rem; }
.continue-title a { color: var(--ocean); }
.continue-status { margin: 0; font-size: 0.9rem; }

.progressline { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.progressline progress { width: 220px; height: 0.9rem; accent-color: var(--ocean); }
.progressline p { margin: 0; }

/* ---------- generous course rows (not card soup) ---------- */
.courserows { list-style: none; margin: 0; padding: 0; }
.courserow {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 0.2rem; border-bottom: 1px solid var(--line);
}
.courserow:last-child { border-bottom: none; }
.courserow-seq {
  font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem;
  color: var(--ocean-soft); min-width: 2.2ch;
}
.courserow-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; }
.courserow-title { font-weight: 600; font-size: 1.02rem; }
.courserow-summary { color: var(--muted); font-size: 0.9rem; }
.courserow-meta { color: var(--muted); font-size: 0.82rem; }
.courserow-side { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- tables ---------- */
.tablewrap { position: relative; overflow-x: auto; max-width: 100%; margin-bottom: 1rem; }
table.grid { border-collapse: collapse; width: 100%; background: var(--paper); }
table.grid th, table.grid td {
  border: 1px solid var(--line); padding: 0.5rem 0.65rem;
  text-align: left; vertical-align: top;
}
table.grid th { background: var(--canvas); color: var(--ocean); }
table.grid tbody th { background: var(--paper); color: var(--ink); font-weight: 600; }
table.grid.compact th, table.grid.compact td { padding: 0.35rem 0.55rem; font-size: 0.92rem; }
.rowlinks { white-space: nowrap; }
.rowlinks a { margin-right: 0.6rem; }
.cell-passed { color: var(--ok); font-weight: 600; }
.cell-read { color: var(--ocean-soft); }
.cell-acknowledged { color: var(--ocean-soft); }

/* ---------- buttons / actions ---------- */
.btn {
  display: inline-block; background: var(--paper); color: var(--ocean);
  border: 1px solid var(--ocean-soft); border-radius: var(--radius-sm);
  padding: 0.5rem 1rem; text-decoration: none; font-size: 0.95rem;
  cursor: pointer; font-family: inherit;
}
.btn:hover { background: var(--seaglass); }
.btn.primary { background: var(--ocean); color: #fff; border-color: var(--ocean); }
.btn.primary:hover { background: var(--ocean-soft); border-color: var(--ocean-soft); }
.btn.primary:disabled { opacity: 0.6; cursor: progress; }
.btn.danger { border-color: var(--fail); color: var(--fail); }
.btn.danger:hover { background: #f6e0dc; }
.btn.small { padding: 0.3rem 0.7rem; font-size: 0.88rem; }
.inlineform { display: inline; }
.linklike {
  background: none; border: none; color: var(--ocean-soft); cursor: pointer;
  text-decoration: underline; font: inherit; padding: 0;
}
.actions { margin: 1rem 0; display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.quiet { color: var(--muted); }

/* ---------- states & badges ---------- */
.state { font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.state-not_started { color: var(--muted); font-weight: 400; }
.state-read { color: var(--ocean-soft); }
.state-passed { color: var(--ok); }
.state-acknowledged { color: var(--ok); }
.state-fail { color: var(--fail); }

.badge {
  font-size: 0.74rem; border-radius: var(--radius-sm); padding: 0.05rem 0.45rem;
  white-space: nowrap;
}
.badge.draft { background: #efe3d4; color: #7a5320; }
.badge.archived { background: var(--canvas); color: var(--muted); border: 1px solid var(--line); }
.badge.active { background: #dff0e4; color: var(--ok); }
.badge.neutral { background: var(--seaglass); color: var(--ocean); }
.badge.review { background: #f6e0dc; color: var(--fail); }
.badge.restricted { background: var(--seaglass); color: var(--ocean); }

.banner { padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); margin: 0 0 1rem; max-width: 75ch; }
.banner.draft { background: #efe3d4; color: #7a5320; }
.banner.review { background: #f6e0dc; color: var(--fail); }

/* ---------- messages ---------- */
.messages { list-style: none; padding: 0; }
.msg { padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); margin-bottom: 0.5rem; }
.msg.success { background: #dff0e4; color: var(--ok); }
.msg.error { background: #f6e0dc; color: var(--fail); }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.smallhead { font-size: 0.95rem; }
.ok { color: var(--ok); font-weight: 600; }
.fail { color: var(--fail); font-weight: 600; }
.plain { list-style: none; padding-left: 0; }

/* ---------- forms ---------- */
.fielderr { color: var(--fail); margin: 0.2rem 0 0.8rem; font-size: 0.9rem; }
.formerrors { color: var(--fail); }

label { display: block; margin: 0.6rem 0 0.2rem; font-weight: 600; }
.checkline { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 400; }
input[type="text"], input[type="password"], input[type="email"],
input[type="search"], input[type="date"], input[type="number"],
input[type="url"], select, textarea {
  width: 100%; max-width: 560px; padding: 0.5rem 0.6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: var(--paper); color: var(--ink);
}
.field { margin-bottom: 0.9rem; }
.stacked button[type="submit"] { margin-top: 0.4rem; }
.searchform { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin-bottom: 1rem; }
.searchform label { margin: 0; }
.searchform input, .searchform select { max-width: 240px; width: auto; }

.editor fieldset { border: none; padding: 0; margin: 0 0 1.2rem; }
.editor legend {
  font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem;
  color: var(--ocean); font-weight: 600; padding: 0; margin-bottom: 0.4rem;
}
.editor textarea { max-width: 100%; }
details summary { cursor: pointer; font-weight: 600; color: var(--ocean); margin: 0.4rem 0; }

pre.source {
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.7rem; overflow-x: auto;
  font-size: 0.85rem; white-space: pre-wrap;
}
code { background: var(--canvas); padding: 0 0.3rem; border-radius: var(--radius-sm); }

/* ---------- quiz ---------- */
.quiz-q {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem; margin-bottom: 0.9rem; background: var(--paper);
  max-width: 75ch;
}
.quiz-q legend { font-weight: 600; color: var(--ocean); padding: 0 0.4rem; }
.quiz-opt {
  display: flex; align-items: baseline; gap: 0.6rem; font-weight: 400;
  padding: 0.65rem 0.7rem; margin: 0.15rem 0; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
}
.quiz-opt:hover { background: var(--canvas); border-color: var(--line); }
.quiz-opt input { width: auto; margin: 0; flex: 0 0 auto; }
.match-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.match-row label { margin: 0; font-weight: 400; }
.result { max-width: 75ch; }
.result h2 { margin-top: 0; }

/* ---------- manager detail snapshots ---------- */
.snapshot { margin-top: 0.6rem; }
.snapshot-list { margin: 0.2rem 0 0.8rem; padding-left: 1.3rem; }
.snapshot-qid {
  display: inline-block; min-width: 3ch; font-weight: 700;
  color: var(--ocean-soft); margin-right: 0.4rem;
}
.historyitem pre.source { max-height: 20rem; }

.pager { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; }

/* ---------- auth (split screen) ---------- */
.auth-split { margin: 0; min-height: 100vh; display: grid; background: var(--canvas); }
.auth-brand { display: none; }
.auth-form-side { display: grid; place-items: center; padding: 1.5rem 1rem; }
.auth-panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.6rem 1.7rem;
  width: min(420px, 100%);
}
.auth-panel form { display: flex; flex-direction: column; }
.auth-panel button { margin-top: 1rem; }
.auth-panel .brand-lg { display: none; }

@media (min-width: 860px) {
  .auth-split { grid-template-columns: minmax(320px, 44%) 1fr; }
  .auth-brand {
    display: flex; flex-direction: column; justify-content: flex-end;
    position: relative; overflow: hidden; background: var(--ocean); color: #fff;
    padding: 2.2rem;
  }
  .auth-brand .tidal-tall { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
  .auth-brand-text { position: relative; }
  .auth-brand-text .brand-lg {
    display: block; background: none; color: #fff; padding: 0;
    font-family: Georgia, "Times New Roman", serif; font-size: 2rem; margin: 0;
  }
  .auth-brand-text .brand-sub { margin: 0 0 0.8rem; color: #9fc0c4; }
  .auth-brand-text p:last-child { max-width: 34ch; color: #dfe9eb; }
  .auth-panel { border: none; background: none; padding: 0; width: min(420px, 100%); }
}

/* ---------- mobile (<=760px): compact brand + details menu ---------- */
@media (max-width: 760px) {
  .content { padding: 1rem 0.9rem 2rem; }
  h1 { font-size: 1.35rem; }
  .greeting { padding: 1.2rem 1.1rem; }
  .courserow { padding: 0.8rem 0.1rem; }
  .actions { gap: 0.6rem; }
  .btn { padding: 0.55rem 1rem; }
}

/* Keep secondary controls readable on the navigation background. */
.sidebar .linklike, .menu-user .linklike { color: #e7eef0; }

.mobile-auth-brand { font-weight: 700; color: var(--ocean); margin: 0 0 1.5rem; }
.mobile-auth-brand span { display: block; font-size: .8rem; font-weight: 400; }
@media (min-width: 860px) { .mobile-auth-brand { display: none; } }