:root {
  /* WareSpace brand */
  --brand: #1f4788;        /* primary navy blue */
  --brand-dark: #163363;
  --teal: #00b4cc;         /* accent / CTA */
  --teal-dark: #0090a3;

  /* Light theme surfaces */
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f5f5f5;
  --border: #e2e6ea;
  --text: #333333;
  --muted: #6b7785;

  /* Accents map to brand */
  --accent: var(--brand);
  --accent-2: var(--teal);

  /* Functional status colors (tuned for a light background) */
  --ok: #1a8a3a;
  --warn: #b3791a;
  --bad: #d23f31;

  --radius: 10px;
  --maxw: 980px;
}

* { box-sizing: border-box; }

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

/* Manager view shifts the accent to teal and tints the page. */
body.manager { --accent: var(--teal); background: #f7fcfd; }
body.manager .topbar { border-bottom-color: var(--teal); }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--panel);
  border-bottom: 3px solid var(--brand);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  background: var(--brand);
  color: #ffffff;
  font-weight: 800;
  border-radius: 9px;
  letter-spacing: -1px;
}
body.manager .logo { background: var(--teal); }
.topbar h1 { font-size: 1.1rem; margin: 0; color: var(--brand); }
.subtitle { margin: 2px 0 0; color: var(--muted); font-size: 0.82rem; }
.topbar-right { display: flex; align-items: center; gap: 14px; }

.toggle { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--muted); cursor: pointer; }
.toggle input { accent-color: var(--teal); width: 16px; height: 16px; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.8rem;
}
.btn-ghost:hover { color: var(--brand); border-color: var(--brand); }

.progress-wrap {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--maxw); margin: 0 auto; padding: 14px 24px 0;
}
.progress-bar { flex: 1; height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--teal)); transition: width .3s ease; }
.progress-label { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  max-width: var(--maxw); margin: 16px auto 0; padding: 0 24px;
  border-bottom: 1px solid var(--border);
}
.tab {
  background: transparent; border: none; color: var(--muted);
  padding: 10px 14px; cursor: pointer; font-size: 0.88rem;
  border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}
.tab:hover { color: var(--brand); }
.tab.active { color: var(--brand); border-bottom-color: var(--accent); font-weight: 600; }

main { max-width: var(--maxw); margin: 0 auto; padding: 22px 24px 60px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(31, 71, 136, .05);
}
.card h3 { margin: 0 0 8px; font-size: 1rem; color: var(--brand); }
.card p { margin: 6px 0; color: var(--text); }
.card .muted { color: var(--muted); font-size: 0.88rem; }

.lead { font-size: 0.98rem; color: var(--muted); max-width: 70ch; }

.row { display: flex; align-items: flex-start; gap: 12px; }
.row input[type="checkbox"] { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }

.pill {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 8px; border-radius: 99px; vertical-align: middle;
}
.pill.ok { background: rgba(26,138,58,.12); color: var(--ok); }
.pill.warn { background: rgba(179,121,26,.14); color: var(--warn); }
.pill.bad { background: rgba(210,63,49,.12); color: var(--bad); }
.pill.dep-none { background: rgba(26,138,58,.12); color: var(--ok); }
.pill.dep-light { background: rgba(0,180,204,.14); color: var(--teal-dark); }
.pill.dep-heavy, .pill.dep-gap { background: rgba(210,63,49,.12); color: var(--bad); }

.comp-id {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 0.85rem;
  flex-shrink: 0;
}

.kv { font-size: 0.85rem; color: var(--muted); margin-top: 8px; }
.kv strong { color: var(--text); font-weight: 600; }

.action-note {
  margin-top: 10px; padding: 9px 12px;
  background: var(--panel-2); border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0; font-size: 0.85rem;
}

a.guru-link { color: var(--teal-dark); text-decoration: none; font-size: 0.85rem; font-weight: 500; }
a.guru-link:hover { text-decoration: underline; }
.no-link { color: var(--muted); font-size: 0.82rem; font-style: italic; }

.scav-answer {
  margin-top: 8px; padding: 8px 12px;
  background: rgba(26,138,58,.07); border: 1px solid rgba(26,138,58,.25);
  border-radius: 6px; font-size: 0.86rem;
}
.scav-answer.unconfirmed { background: rgba(179,121,26,.08); border-color: rgba(179,121,26,.3); }

.manager-only { display: none; }
body.manager .manager-only { display: block; }
.manager-note {
  margin-top: 10px; padding: 9px 12px;
  background: rgba(0,180,204,.08); border-left: 3px solid var(--teal);
  border-radius: 0 6px 6px 0; font-size: 0.85rem;
}
.manager-note::before { content: "Manager · "; font-weight: 700; color: var(--teal-dark); }

.tier-head { margin: 18px 0 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.tier-1 { color: var(--bad); }

.foot {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 24px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 0.78rem;
}
.done-strike { opacity: .55; }
.done-strike .scav-q, .done-strike .comp-title { text-decoration: line-through; }

/* ---- Trainee view -------------------------------------------------------- */
body.trainee { background: #f7f9fb; }

.hero {
  max-width: var(--maxw); margin: 4px auto 8px;
  background: linear-gradient(110deg, var(--brand), var(--brand-dark));
  color: #fff; border-radius: var(--radius);
  padding: 24px 26px; box-shadow: 0 2px 8px rgba(31,71,136,.18);
}
.hero h2 { margin: 0 0 8px; font-size: 1.35rem; }
.hero p { margin: 6px 0; color: rgba(255,255,255,.92); font-size: 0.95rem; max-width: 72ch; }
.hero .hero-note { color: rgba(255,255,255,.78); font-size: 0.85rem; }

.phase-block { margin-top: 30px; }
.phase-head {
  border-left: 4px solid var(--teal);
  padding: 2px 0 2px 14px; margin-bottom: 14px;
}
.phase-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px; color: var(--teal-dark);
}
.phase-head h2 { margin: 4px 0 6px; font-size: 1.15rem; color: var(--brand); }
.phase-detail { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: 74ch; }

.read-box {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  background: rgba(0,180,204,.07); border: 1px solid rgba(0,180,204,.25);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
}
.read-label {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--teal-dark); white-space: nowrap;
}
.read-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.module {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(31,71,136,.05);
}
.module-head { display: flex; align-items: center; gap: 10px; }
.module-head h3 { margin: 0; font-size: 1.02rem; color: var(--brand); }
.module-intro { margin: 10px 0 4px; color: var(--text); font-size: 0.94rem; }

.lesson-section { margin: 12px 0; padding-left: 12px; border-left: 2px solid var(--border); }
.lesson-section h4 { margin: 0 0 3px; font-size: 0.86rem; color: var(--brand-dark); }
.lesson-section p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.confirm-note {
  margin: 14px 0; padding: 10px 14px;
  background: rgba(179,121,26,.07); border-left: 3px solid var(--warn);
  border-radius: 0 6px 6px 0; font-size: 0.85rem;
}
.confirm-note strong { color: var(--warn); }
.confirm-note ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.confirm-note li { margin: 2px 0; }

.task-list { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.task {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; cursor: pointer; font-size: 0.92rem;
}
.task input[type="checkbox"] {
  margin-top: 3px; width: 17px; height: 17px;
  accent-color: var(--teal); cursor: pointer; flex-shrink: 0;
}
.task-done span { text-decoration: line-through; color: var(--muted); }
a.btn-ghost { text-decoration: none; display: inline-block; }

/* ===========================================================================
   v1.3 — Trainee experience (Apple-calm) + Manager view
   One thing at a time, generous whitespace, restrained color, large type.
   =========================================================================== */
:root {
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --hair: #ececf0;
  --surface: #ffffff;
  --field: #f5f6f8;
  /* phase palette — soft fills, darker accents */
  --c-day1: #0090a3;  --bg-day1: #e2f4f7;
  --c-day2: #2f6fd0;  --bg-day2: #e6eefb;
  --c-day3: #6a5acd;  --bg-day3: #ece8fb;
  --c-week1: #c0871f; --bg-week1: #fdf0dc;
  --c-month1: #1a8a3a;--bg-month1: #e4f5ea;
}

body.trainee-app, body.manager-app {
  background: #fbfbfd; color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
#app { max-width: 760px; margin: 0 auto; padding: 0 22px 80px; }

.eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px;
}
.btn-primary {
  appearance: none; border: none; cursor: pointer;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 0.95rem;
  padding: 12px 22px; border-radius: 980px; transition: transform .12s ease, background .2s, box-shadow .2s;
  box-shadow: 0 1px 2px rgba(31,71,136,.25);
}
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn-primary.big { font-size: 1.05rem; padding: 15px 34px; margin-top: 30px; }
.btn-primary.ready { background: var(--teal-dark); }
.screen { animation: rise .35s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Welcome --------------------------------------------------------------- */
.welcome { min-height: 88vh; display: grid; place-items: center; text-align: center; }
.welcome-inner { max-width: 30ch; }
.welcome-title { font-size: 3rem; line-height: 1.05; letter-spacing: -1.5px; margin: 0 0 18px; color: var(--ink); }
.welcome-sub { font-size: 1.12rem; line-height: 1.5; color: var(--ink-soft); }

/* --- Home ------------------------------------------------------------------ */
.home-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 40px 0 18px; }
.home-head h1 { font-size: 1.9rem; letter-spacing: -.8px; margin: 0; }
.ring .ring-bg { fill: none; stroke: var(--hair); stroke-width: 5; }
.ring .ring-fg { fill: none; stroke: var(--teal); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.ring .ring-text { font-size: 12px; font-weight: 700; fill: var(--brand); }

.continue-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(120deg, var(--brand), var(--brand-dark));
  color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 30px;
  box-shadow: 0 8px 24px rgba(31,71,136,.22);
}
.continue-card h3 { margin: 2px 0 0; font-size: 1.25rem; letter-spacing: -.3px; }
.continue-card .eyebrow { color: rgba(255,255,255,.72); }
.continue-card .btn-primary { background: #fff; color: var(--brand); flex-shrink: 0; }
.continue-card .btn-primary:hover { background: #f0f4fb; }

.panel { margin: 30px 0; }
.panel-title { font-size: 1.05rem; letter-spacing: -.2px; margin: 0 0 14px; color: var(--ink); }

/* Calendar */
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.cal-key { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--ink-soft); }
.swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.sw-day1 { background: var(--c-day1); } .sw-day2 { background: var(--c-day2); }
.sw-day3 { background: var(--c-day3); } .sw-week1 { background: var(--c-week1); }
.sw-month1 { background: var(--c-month1); }
.cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.cal-dow { font-size: 0.68rem; font-weight: 700; letter-spacing: .5px; color: var(--ink-soft); text-align: center; padding-bottom: 2px; }
.cal-cell {
  border: none; cursor: pointer; aspect-ratio: 1 / .82; border-radius: 11px;
  display: grid; place-items: center; font: inherit; color: var(--ink);
  transition: transform .12s ease, box-shadow .2s; position: relative;
}
.cal-cell:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.1); }
.cal-date { font-size: 0.78rem; font-weight: 600; }
.sw-bg-day1 { background: var(--bg-day1); } .sw-bg-day2 { background: var(--bg-day2); }
.sw-bg-day3 { background: var(--bg-day3); } .sw-bg-week1 { background: var(--bg-week1); }
.sw-bg-month1 { background: var(--bg-month1); }
.cal-cell.is-today { outline: 2.5px solid var(--brand); outline-offset: 1px; }
.cal-cell.is-today::after { content: "Today"; position: absolute; bottom: 6px; font-size: 0.56rem; font-weight: 700; color: var(--brand); letter-spacing: .3px; }

/* Tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  text-align: left; border: 1px solid var(--hair); background: var(--surface);
  border-radius: 16px; padding: 18px; cursor: pointer; font: inherit; color: var(--ink);
  transition: transform .12s ease, box-shadow .2s, border-color .2s;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.07); }
.tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tile-label { font-size: 0.72rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.tile-date { font-size: 0.7rem; color: var(--ink-soft); }
.tile-day1 .tile-label { color: var(--c-day1); } .tile-day2 .tile-label { color: var(--c-day2); }
.tile-day3 .tile-label { color: var(--c-day3); } .tile-week1 .tile-label { color: var(--c-week1); }
.tile-month1 .tile-label { color: var(--c-month1); }
.tile-headline { font-size: 1.05rem; letter-spacing: -.3px; margin: 8px 0 4px; }
.tile-blurb { font-size: 0.84rem; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.4; }
.tile-foot { display: flex; align-items: center; gap: 10px; }
.tile-bar { flex: 1; height: 5px; background: var(--hair); border-radius: 99px; overflow: hidden; }
.tile-bar span { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.tile-count { font-size: 0.72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* North Star + quick links */
.north-star .ns-list { list-style: none; padding: 0; margin: 10px 0 0; }
.north-star .ns-list li { position: relative; padding: 8px 0 8px 26px; border-bottom: 1px solid var(--hair); font-size: 0.95rem; }
.north-star .ns-list li:last-child { border-bottom: none; }
.north-star .ns-list li::before { content: "★"; position: absolute; left: 0; color: var(--teal); font-size: .9rem; top: 9px; }
.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.link-card {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--hair); background: var(--surface); border-radius: 14px;
  padding: 16px 18px; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink);
  transition: transform .12s ease, box-shadow .2s;
}
.link-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.link-card .chev { color: var(--ink-soft); }

/* --- Module (one at a time) ----------------------------------------------- */
.module-bar { display: flex; align-items: center; gap: 14px; padding: 22px 0 6px; }
.back-btn { background: none; border: none; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; padding: 6px 0; }
.module-bar-label { font-size: 0.8rem; color: var(--ink-soft); }
.module-screen { padding-top: 10px; }
.module-title { font-size: 2.1rem; letter-spacing: -1px; line-height: 1.1; margin: 6px 0 14px; }
.module-lede { font-size: 1.15rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 22px; }
.module-screen .lesson-section { border-left: 2px solid var(--hair); padding-left: 16px; margin: 18px 0; }
.module-screen .lesson-section h4 { font-size: 0.95rem; margin: 0 0 4px; color: var(--ink); }
.module-screen .lesson-section p { font-size: 0.98rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }

.account-list { display: grid; gap: 1px; background: var(--hair); border-radius: 14px; overflow: hidden; margin: 20px 0; }
.account-row { background: var(--surface); padding: 13px 16px; display: flex; flex-direction: column; gap: 1px; }
.account-row strong { font-size: 0.95rem; }
.account-row span { font-size: 0.83rem; color: var(--ink-soft); }

.task-list { margin: 26px 0 0; border-top: 1px solid var(--hair); padding-top: 18px; }
.task-head { font-size: 0.74rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.trainee-app .task { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); cursor: pointer; font-size: 1rem; }
.trainee-app .task:last-child { border-bottom: none; }
.trainee-app .task input[type="checkbox"] { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--teal); cursor: pointer; flex-shrink: 0; }
.trainee-app .task-done span { color: var(--ink-soft); text-decoration: line-through; }

.module-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 34px; }
.module-nav .btn-ghost { border-radius: 980px; padding: 11px 20px; }
.module-nav .btn-ghost:disabled { opacity: .4; cursor: default; }
.module-nav .advance { margin-left: auto; }

/* Confirm note (reused) — calmer in trainee context */
.trainee-app .confirm-note { background: var(--bg-week1); border-left: 3px solid var(--c-week1); margin: 22px 0; }
.trainee-app .confirm-note strong { color: var(--c-week1); }

/* --- Milestones + Team ----------------------------------------------------- */
.milestone-card { border: 1px solid var(--hair); border-radius: 16px; padding: 20px 22px; margin: 16px 0; background: var(--surface); }
.ms-badge { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; margin-bottom: 8px; }
.milestone-card h3 { margin: 0 0 8px; font-size: 1.1rem; }
.milestone-card ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.milestone-card li { margin: 6px 0; line-height: 1.45; }

.person-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--hair); border-radius: 14px; padding: 16px; margin: 12px 0; background: var(--surface); }
.person-lead { border-color: var(--teal); background: #f7fdfe; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: 0.95rem; flex-shrink: 0; }
.person-lead .avatar { background: var(--teal); }
.person-card strong { display: block; font-size: 1rem; }
.person-title { font-size: 0.82rem; color: var(--ink-soft); }

/* --- Done ------------------------------------------------------------------ */
.done-screen { min-height: 78vh; display: grid; place-content: center; text-align: center; }
.done-mark { width: 76px; height: 76px; border-radius: 50%; background: var(--c-month1); color: #fff; font-size: 2.4rem; display: grid; place-items: center; margin: 0 auto 22px; box-shadow: 0 8px 24px rgba(26,138,58,.3); }
.done-screen h1 { font-size: 2.2rem; letter-spacing: -1px; margin: 0 0 12px; }
.done-screen p { font-size: 1.1rem; color: var(--ink-soft); max-width: 40ch; margin: 0 auto 26px; }

/* --- Manager view ---------------------------------------------------------- */
.manager-main { max-width: 720px; margin: 0 auto; padding: 26px 22px 80px; }
.form-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; padding: 22px 24px; margin-bottom: 18px; }
.form-card-title { font-size: 1.1rem; margin: 0 0 16px; letter-spacing: -.2px; }
.field { margin-bottom: 16px; }
.field-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; }
.field-hint { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 7px; }
.text-input { width: 100%; border: 1px solid var(--hair); background: var(--field); border-radius: 10px; padding: 11px 13px; font: inherit; color: var(--ink); }
.text-input:focus { outline: 2px solid var(--teal); outline-offset: -1px; background: #fff; }
.field-pair { display: flex; gap: 10px; }
.mod-group { margin-bottom: 14px; }
.mod-group-label { font-size: 0.74rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.mod-toggle { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.92rem; cursor: pointer; }
.mod-toggle input { width: 18px; height: 18px; accent-color: var(--teal); }
.blanks { background: var(--bg-week1); border-color: transparent; }
.blank-list { margin: 8px 0 0; padding-left: 20px; }
.blank-list li { margin: 5px 0; font-size: 0.9rem; }
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.save-status { font-size: 0.85rem; color: var(--c-month1); font-weight: 600; }

/* Pre-boarding logistics to-do (manager view) */
.todo-list { margin-top: 6px; }
.todo { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.todo:last-child { border-bottom: none; }
.todo input[type="checkbox"] { margin-top: 2px; width: 19px; height: 19px; accent-color: var(--teal); cursor: pointer; flex-shrink: 0; }
.todo-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.todo-task { font-size: 0.94rem; line-height: 1.35; }
.todo-meta { font-size: 0.78rem; color: var(--ink-soft); }
.todo-owner { font-weight: 700; color: var(--brand); }
.todo-date { font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; background: var(--field); padding: 4px 9px; border-radius: 999px; flex-shrink: 0; }
.todo-done .todo-task { text-decoration: line-through; color: var(--ink-soft); }
.todo-done .todo-date { background: var(--bg-month1); color: var(--c-month1); }