/* ==========================================================================
   LogYourDrive
   One stylesheet, no build step, no external fonts or CDNs -- which is what
   lets the Content-Security-Policy in public/index.php stay strict.
   ========================================================================== */

/* --- Design tokens -------------------------------------------------------- */

:root {
  /* --------------------------------------------------------------------
     Palette. Every foreground/background pair the app renders together is
     contrast-audited; see the table in README.md. Do not change a value
     here without re-checking the pair it belongs to.

     --brand-amber is the icon colour. At 1.86:1 on white it is DECORATIVE
     ONLY -- never use it for text or for an icon that carries meaning on
     a light background.
     -------------------------------------------------------------------- */
  --bg:            #F4F6F8;
  --surface:       #FFFFFF;
  --surface-2:     #EAEEF2;
  --border:        #D3DAE1;
  --border-strong: #7A8796;   /* 3.38:1 on --bg: an input border is a UI
                                 component and owes WCAG 1.4.11 3:1 */

  --text:          #101820;
  --text-muted:    #52606E;

  --accent:        #175C7A;
  --accent-hover:  #0F455D;
  --accent-soft:   #E1EDF3;
  --on-accent:     #FFFFFF;

  --night:         #5A3FA3;
  --night-soft:    #ECE7F7;

  --ok:            #196B44;
  --ok-soft:       #E1F2E8;
  --warn:          #8A5300;
  --warn-soft:     #FBEFDA;
  --danger:        #A62A21;
  --danger-soft:   #FBE8E6;

  --brand-ink:     #12313F;   /* icon badge */
  --brand-amber:   #F0B429;   /* icon mark; decorative only on light */

  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 1px 2px rgba(16, 20, 28, .06), 0 4px 12px rgba(16, 20, 28, .05);

  --space:         1rem;
  --measure:       72ch;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #101419;
    --surface:       #171C23;
    --surface-2:     #1F262F;
    --border:        #303945;
    --border-strong: #687585;

    --text:          #E8EDF2;
    --text-muted:    #A3AEBC;

    --accent:        #63B7D9;
    --accent-hover:  #8ACBE6;
    --accent-soft:   #14313F;
    --on-accent:     #08151C;

    --night:         #A78BF0;
    --night-soft:    #241E3A;

    --ok:            #6BC391;
    --ok-soft:       #122C1E;
    --warn:          #E0B45F;
    --warn-soft:     #2E2410;
    --danger:        #F0908A;
    --danger-soft:   #38191A;

    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .38);
  }
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  /* Room for the sticky action bar on the log form. */
  padding-bottom: 1rem;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 .75rem; }
ul, ol { margin: 0 0 .75rem; padding-left: 1.25rem; }

a { color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* A visible focus ring everywhere, never removed. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Utilities ------------------------------------------------------------ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: .5rem; top: -3rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: .5rem; color: var(--on-accent); }

.muted  { color: var(--text-muted); }
.small  { font-size: .85rem; }
.ok     { color: var(--ok); font-weight: 600; }
.optional { color: var(--text-muted); font-weight: 400; }
.lead   { font-size: 1.08rem; }
.stack-top { margin-top: 2rem; }
.is-hidden { display: none !important; }

/* --- Shell and header ----------------------------------------------------- */

.shell {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.brand__mark { display: block; width: 24px; height: 24px; border-radius: 5px; }
.brand__mark--lg { width: 56px; height: 56px; border-radius: 12px; margin: 0 auto; }

.nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}
.nav__list a,
.nav__form .linkish {
  display: block;
  padding: .45rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: .95rem;
}
.nav__list a:hover,
.nav__form .linkish:hover { background: var(--surface-2); color: var(--text); }
.nav__list a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.nav__form { margin: 0; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .45rem .7rem;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1rem; height: 2px;
  background: currentColor;
  content: "";
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -5px; }
.nav-toggle__bars::after  { position: absolute; top: 5px; }

@media (max-width: 46rem) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; width: 100%; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li + li { border-top: 1px solid var(--border); }
  .nav__list a,
  .nav__form .linkish { padding: .75rem .5rem; width: 100%; text-align: left; }
}

/* --- Student chips -------------------------------------------------------- */

.studentbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.studentbar__list {
  max-width: 68rem;
  margin: 0 auto;
  padding: .5rem 1rem;
  list-style: none;
  display: flex;
  gap: .5rem;
}
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  white-space: nowrap;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip--active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.chip--ghost { background: transparent; border-style: dashed; color: var(--text-muted); }
.chip__meta { color: var(--text-muted); font-size: .8rem; }
.chip--active .chip__meta { color: inherit; opacity: .8; }

/* --- Flashes -------------------------------------------------------------- */

.flashes {
  max-width: 68rem;
  margin: 1rem auto 0;
  padding: 0 1rem;
  display: grid;
  gap: .5rem;
}
.flashes--tight { margin-top: 0; padding: 0; }

.flash {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.flash p { margin: 0; }
.flash__icon { font-weight: 700; line-height: 1.55; }
.flash--success { background: var(--ok-soft);     border-color: var(--ok);     color: var(--text); }
.flash--success .flash__icon { color: var(--ok); }
.flash--error   { background: var(--danger-soft); border-color: var(--danger); }
.flash--error .flash__icon   { color: var(--danger); }
.flash--info    { background: var(--warn-soft);   border-color: var(--warn); }
.flash--info .flash__icon    { color: var(--warn); }

/* --- Page head ------------------------------------------------------------ */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.page-head h1 { margin: 0; }
.page-head p { margin: .25rem 0 0; }
.page-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.section-heading {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 0 0 .75rem;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Cards and grids ------------------------------------------------------ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 1rem; }
.card--centered { max-width: 32rem; margin: 4rem auto; text-align: center; }
.card--error   { border-color: var(--danger); background: var(--danger-soft); }
.card--success { border-color: var(--ok);     background: var(--ok-soft); }
.card--danger  { border-color: var(--danger); }
.card--danger h2, .card--danger h3 { color: var(--danger); }

.empty { text-align: center; }
.empty p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: 1rem; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.grid--two   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  /* Comfortable tap target on phones. */
  min-height: 2.75rem;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.button--quiet {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.button--quiet:hover { background: var(--surface-2); color: var(--text); }
.button--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.button--danger:hover { filter: brightness(.92); background: var(--danger); color: #fff; }
.button--small { padding: .35rem .7rem; font-size: .875rem; min-height: 2.25rem; }
.button--block { width: 100%; }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.linkish--danger { color: var(--danger); }

/* --- Forms ---------------------------------------------------------------- */

.form fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.form fieldset:last-of-type { margin-bottom: 1rem; }
.form legend {
  padding: 0;
  font-weight: 650;
  font-size: 1.05rem;
  margin-bottom: .5rem;
}

.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field input[type="time"],
.field input[type="number"],
.field input[type="search"],
.field select,
.field textarea {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  /* 16px minimum stops iOS Safari zooming on focus. */
  font-size: 1rem;
  min-height: 2.75rem;
}
.field textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.field select { appearance: auto; }

.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }

.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.field--narrow { max-width: 14rem; }
.field--grow { min-width: 14rem; }

.hint { font-size: .875rem; color: var(--text-muted); margin: .3rem 0 0; max-width: var(--measure); }
.field-error {
  margin: .35rem 0 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--danger);
}

.form__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.form--log > .card { margin-bottom: 1rem; }
.form__actions--sticky {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  box-shadow: var(--shadow);
}

.computed {
  margin: .5rem 0 0;
  padding: .6rem .8rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: .95rem;
}

.radio-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.radio {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--surface);
  min-height: 2.75rem;
}
.radio:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.radio input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

.danger-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.danger-row--stack { align-items: flex-start; }
.danger-row h3 { margin-bottom: .25rem; }
.danger-row p { margin: 0; max-width: var(--measure); }
.danger-form { min-width: min(100%, 22rem); }

/* --- Auth screens --------------------------------------------------------- */

.auth-shell { max-width: 32rem; margin: 0 auto; padding: 3rem 1rem; }
.auth-card--wide { max-width: none; }
.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.auth-brand .brand__mark { display: block; }
.auth-brand__title { margin: .25rem 0 .1rem; }
.auth-brand__tag { color: var(--text-muted); margin: 0; }
.auth-card { margin-top: 1rem; }
.auth-card__alt { margin: 1rem 0 0; text-align: center; }
.auth-card__note {
  margin: .75rem 0 0;
  font-size: .875rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Meters and stats ----------------------------------------------------- */

.meter { margin-bottom: .9rem; }
.meter__label {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .9rem;
  margin-bottom: .3rem;
}
.meter__track {
  height: .5rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.meter__fill { height: 100%; background: var(--accent); }
.meter__fill--night  { background: var(--night); }
.meter__fill--skills { background: var(--ok); }

.stat__label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 0 0 .2rem;
}
.stat__value { font-size: 1.9rem; font-weight: 700; margin: 0; line-height: 1.1; }
.stat__of { font-size: 1.1rem; font-weight: 500; color: var(--text-muted); }
.stat__sub { font-size: .875rem; color: var(--text-muted); margin: .2rem 0 .6rem; }

.big-number { font-size: 1.35rem; font-weight: 650; margin: .5rem 0 .4rem; }
.big-number .muted { font-size: .95rem; font-weight: 400; }

.student-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.student-card__head h3 { margin: 0 0 .75rem; }
.student-card__stats {
  display: flex;
  gap: 1.5rem;
  margin: .75rem 0;
}
.student-card__stats div { margin: 0; }
.student-card__stats dt { font-size: .8rem; color: var(--text-muted); }
.student-card__stats dd { margin: 0; font-weight: 600; }
.student-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- Badges and tags ------------------------------------------------------ */

.badge, .tag {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
.badge--done, .tag--done { background: var(--ok-soft);   border-color: var(--ok);   color: var(--ok); }
.tag--night              { background: var(--night-soft); border-color: var(--night); color: var(--night); }
.tag--todo               { background: var(--surface-2); }
.badge--muted            { background: transparent; }
.badge--tiny             { font-size: .7rem; }

/* --- Tables --------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border-radius: var(--radius); }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.table th, .table td {
  padding: .7rem .8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.table thead th {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--surface-2);
  white-space: nowrap;
}
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .is-archived { opacity: .6; }

.table__actions { white-space: nowrap; }
.table__actions a, .table__actions form { display: inline-block; margin-right: .6rem; }
.table__actions form { margin: 0; }

.cell-notes { min-width: 16rem; max-width: 32rem; }
.result-summary { margin: 0 0 1rem; }

/* --- Drive log table ------------------------------------------------------
   Without width guidance the browser gives every column an equal share, so the
   long skill labels squeeze Date and Time until "Thu, Aug 27, 2026" breaks over
   four lines. The short, fixed-shape columns are pinned to their content and
   the two prose columns absorb what is left.
   -------------------------------------------------------------------------- */

.table--logs .cell-date,
.table--logs .cell-time,
.table--logs .cell-length,
.table--logs .cell-daynight {
  /* 1% with white-space:nowrap is the standard trick for "as narrow as the
     content allows" -- the browser expands past 1% to fit, but takes no more. */
  width: 1%;
  white-space: nowrap;
}

.table--logs .cell-date { font-variant-numeric: tabular-nums; }

/* The dash may not become a line break: a wrapped time range reads as two
   unrelated times. */
.timerange { white-space: nowrap; font-variant-numeric: tabular-nums; }

.table--logs .cell-daynight .muted {
  display: block;
  font-size: .8rem;
  margin-top: .15rem;
}

/* Skills collapse to a count. Expanded, they are one plain link per line
   rather than bordered pills: a pill whose label wraps becomes a tall box, and
   a column of them was setting the row height and stealing width from the
   date. */
.table--logs .cell-skills { width: 1%; min-width: 7rem; }

.skill-reveal > summary {
  cursor: pointer;
  font-size: .875rem;
  color: var(--accent);
  white-space: nowrap;
  /* A comfortable hit area without pushing the row taller when collapsed. */
  padding: .15rem 0;
}
.skill-reveal > summary:hover { color: var(--accent-hover); text-decoration: underline; }
.skill-reveal[open] > summary { margin-bottom: .3rem; font-weight: 600; }

.table--logs .skill-tags { display: block; white-space: normal; }
.table--logs .skill-tags li + li { margin-top: .2rem; }
.table--logs .skill-tag {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font-size: .85rem;
  line-height: 1.4;
}
.table--logs .skill-tag:hover { text-decoration: underline; }

/* Notes take what is left, but must not be the reason the row overflows and
   pushes Edit/Delete off the edge. */
.table--logs .cell-notes { min-width: 12rem; }

.table--logs .table__actions { width: 1%; white-space: nowrap; }
.table--logs .table__actions a,
.table--logs .table__actions form { margin-right: .5rem; }
.table--logs .table__actions form:last-child { margin-right: 0; }

/* Stacked cards on narrow screens: the pinned widths are meaningless once each
   cell is a block, and nowrap on a full-width block can overflow. */
@media (max-width: 52rem) {
  .table--logs .cell-date,
  .table--logs .cell-time,
  .table--logs .cell-length,
  .table--logs .cell-daynight,
  .table--logs .table__actions {
    width: auto;
    white-space: normal;
  }
  .table--logs .cell-daynight .muted { display: inline; margin-top: 0; }
  .table--logs .cell-skills,
  .table--logs .cell-notes { min-width: 0; }
  /* The disclosure stays on phones too. Hiding the <summary> here would not
     reveal the list: a closed <details> does not render its non-summary
     children at all, so it would just make the skills unreachable. Forcing it
     open needs the `open` attribute, which is a markup decision, not a CSS one. */
}

/* Stacked card layout on narrow screens: each row becomes a labelled block. */
@media (max-width: 52rem) {
  .table--stacked,
  .table--stacked thead,
  .table--stacked tbody,
  .table--stacked tr,
  .table--stacked th,
  .table--stacked td { display: block; }

  .table--stacked thead { display: none; }

  .table--stacked tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: .75rem;
    padding: .5rem .25rem;
    background: var(--surface);
  }
  .table--stacked tbody tr:hover { background: var(--surface); }

  .table--stacked th, .table--stacked td { border-bottom: 0; padding: .35rem .8rem; }

  .table--stacked td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: .1rem;
  }
  .table--stacked th[scope="row"] { font-size: 1.05rem; padding-bottom: .5rem; }
  .cell-notes { max-width: none; min-width: 0; }
}

/* --- Timeline ------------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: baseline;
  padding: .6rem .8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.timeline__item + .timeline__item { margin-top: .4rem; }
.timeline__when { font-variant-numeric: tabular-nums; color: var(--text-muted); min-width: 10rem; }
.timeline__what { flex: 1 1 14rem; }

/* --- Filters -------------------------------------------------------------- */

.filters { margin-bottom: 1.25rem; }
.filters__heading { font-size: .95rem; margin-bottom: .75rem; }
.filters__row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.filters__row .field { margin-bottom: 0; flex: 1 1 12rem; }
.filters__actions { display: flex; gap: .5rem; }

/* --- Skill picker (log form) ---------------------------------------------- */

.skill-picker {
  max-height: 32rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem;
  background: var(--surface-2);
}
.skill-group + .skill-group { margin-top: 1.25rem; }
.skill-group__heading {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 0 0 .5rem;
  position: sticky;
  top: -.75rem;
  background: var(--surface-2);
  padding: .25rem 0;
}

.skill-item + .skill-item { margin-top: .5rem; }

.check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.check:hover { border-color: var(--border-strong); }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.check input {
  width: 1.15rem; height: 1.15rem;
  margin-top: .18rem;
  flex: none;
  accent-color: var(--accent);
}
.check__body { display: block; }
.check__title { display: block; font-weight: 600; font-size: .95rem; }
.check__desc {
  display: block;
  font-size: .84rem;
  color: var(--text-muted);
  margin-top: .1rem;
}
.check--parent .check__title { font-size: 1rem; }
.check--lesson { background: transparent; border-style: dashed; }
.check--lesson:has(input:checked) { border-style: solid; background: var(--accent-soft); }
.check.is-recent { border-left: 3px solid var(--accent); }

.lesson-list { list-style: none; margin: .4rem 0 0 1.25rem; padding: 0; display: grid; gap: .3rem; }

.selected-count { font-weight: 600; margin: .5rem 0; }
.skill-recent__heading { font-size: .9rem; margin: 0; }
.skill-recent { margin-bottom: .75rem; }

/* --- Skills browse -------------------------------------------------------- */

.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.result__head {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}
.result__head h2, .result__head h3 { margin: 0; font-size: 1.05rem; }
.result__path { font-size: .85rem; color: var(--text-muted); margin: .2rem 0 .4rem; }
.result__desc { margin: 0; }

.lesson-chips { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.lesson-chip {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .82rem;
  text-decoration: none;
  color: var(--text-muted);
}
.lesson-chip:hover { border-color: var(--border-strong); color: var(--text); }
.lesson-chip--done { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); font-weight: 600; }

.lesson-detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lesson-detail-list h3 { margin: 0 0 .2rem; font-size: 1rem; }
.lesson-detail-list p { margin: 0; }

.breadcrumb { margin-bottom: 1rem; font-size: .875rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumb li + li::before { content: "/"; color: var(--text-muted); margin-right: .4rem; }

.skill-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.skill-tag {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .82rem;
  text-decoration: none;
  color: var(--text);
}
.skill-tag:hover { border-color: var(--accent); color: var(--accent); }
.skill-tag__parent { color: var(--text-muted); }

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

.coverage-list { list-style: none; margin: 0; padding: 0; }
.coverage-item { padding: .75rem 0; border-top: 1px solid var(--border); }
.coverage-item:first-child { border-top: 0; padding-top: 0; }

.coverage-item__head {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.coverage-item__title { flex: 1 1 14rem; font-weight: 600; }
.coverage-item__meta { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .85rem; align-items: baseline; }

.status-dot {
  width: .7rem; height: .7rem;
  border-radius: 50%;
  flex: none;
  background: var(--border-strong);
  align-self: center;
}
.status-dot--covered { background: var(--ok); }
.status-dot--partial { background: var(--warn); }

.status-label { font-weight: 600; }
.status-label--covered { color: var(--ok); }
.status-label--partial { color: var(--warn); }
.status-label--not_started { color: var(--text-muted); }

.coverage-lessons { list-style: none; margin: .5rem 0 0 1.3rem; padding: 0; display: grid; gap: .25rem; }
.coverage-lessons li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .9rem; }
.coverage-lessons .lesson-mark { flex: none; width: 1rem; }
.coverage-lessons .is-done .lesson-mark { color: var(--ok); }
.coverage-lessons .is-todo .lesson-name { color: var(--text-muted); }

.todo-list { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.todo-list--plain { gap: .25rem; }
.todo-list__sub { margin: .25rem 0 0; padding-left: 1.1rem; color: var(--text-muted); font-size: .9rem; }

/* --- Family --------------------------------------------------------------- */

.invite-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.invite-list li {
  display: flex;
  gap: .5rem .75rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.invite-list__who { font-weight: 600; }
.invite-list__actions {
  display: flex;
  gap: .9rem;
  align-items: baseline;
  margin-left: auto;
}
.invite-list form { margin: 0; }

.copy-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.copy-input {
  flex: 1 1 20rem;
  padding: .55rem .7rem;
  font-family: var(--font-mono);
  font-size: .85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  min-height: 2.75rem;
}

/* --- Email verification banner and unsubscribe pages ---------------------- */

.verify-banner {
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn);
}
.verify-banner__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .92rem;
}
.verify-banner p { margin: 0; flex: 1 1 20rem; }
.verify-banner form { margin: 0; }

.check-stack { display: grid; gap: .6rem; }

.verify-mark {
  font-size: 2.5rem;
  line-height: 1;
  margin: 0 0 .5rem;
  text-align: center;
}
.verify-mark--ok  { color: var(--ok); }
.verify-mark--bad { color: var(--warn); }

.unsub-options { display: grid; gap: .5rem; margin: 1rem 0; }
.unsub-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .6rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 3rem;
}
.footer__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  font-size: .85rem;
  color: var(--text-muted);
}
.footer__inner p { margin: 0 0 .4rem; max-width: var(--measure); }
.footer__links { margin: 0; }

/* --- Error pages ---------------------------------------------------------- */

.page-error .shell { display: flex; align-items: center; min-height: 70vh; }
.error-status { font-size: 3rem; font-weight: 700; color: var(--text-muted); margin: 0; line-height: 1; }
.error-hint {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  text-align: left;
  font-size: .9rem;
}
.error-detail {
  text-align: left;
  overflow-x: auto;
  background: var(--surface-2);
  padding: .75rem;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-family: var(--font-mono);
}

/* --- Printable log (screen view) ------------------------------------------ */

.print-toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.print-toolbar__inner {
  max-width: 62rem;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.print-toolbar__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.log-report {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

.log-header { border-bottom: 2px solid var(--text); padding-bottom: .75rem; margin-bottom: 1.25rem; }
.log-header h1 { font-size: 1.35rem; margin: 0; }
.log-header__sub { font-size: .875rem; color: var(--text-muted); margin: .2rem 0 .75rem; }

.log-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .5rem 1.5rem;
  margin: 0;
}
.log-fields div { margin: 0; }
.log-fields dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.log-fields dd { margin: 0; font-weight: 600; }
.log-fields .blank {
  display: inline-block;
  min-width: 8rem;
  border-bottom: 1px solid var(--border-strong);
}

.log-modes { display: flex; gap: .75rem; align-items: baseline; margin-bottom: 1rem; font-size: .9rem; }
.log-modes__label { color: var(--text-muted); }
.log-modes .is-current { font-weight: 700; text-decoration: none; color: var(--text); }

.log-section { margin-bottom: 2rem; }
.log-section__title {
  font-size: .95rem;
  letter-spacing: .06em;
  margin: 0 0 .5rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--border-strong);
}
.log-section__note { font-weight: 400; letter-spacing: 0; color: var(--text-muted); font-size: .85rem; }

.log-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.log-table th, .log-table td {
  border: 1px solid var(--border-strong);
  padding: .4rem .5rem;
  vertical-align: top;
  text-align: left;
}
.log-table thead th {
  background: var(--surface-2);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* Form 431228 column order: Date, Skills Covered, Start Time, End Time,
   Drive Time, Night Driving, Notes. The two narrow hour columns sit together
   so they can be summed down the page by eye. */
.log-table .col-date, .log-table .col-time, .log-table .col-hours { white-space: nowrap; }
.log-table .col-hours { text-align: right; font-variant-numeric: tabular-nums; }
.log-table .col-date { width: 1%; }
.log-table .col-time { width: 1%; }
.log-table .col-hours { width: 1%; }
.log-table .col-skill { width: 22%; }
.log-table .col-notes { width: 38%; }
.log-table tfoot .totals-label { text-align: right; background: var(--surface-2); }
.log-table tfoot .col-hours { background: var(--surface-2); }
.totals-note { font-weight: 400; color: var(--text-muted); }

.log-skill { display: block; }
.log-skill + .log-skill { margin-top: .3rem; }
.log-skill__lessons { display: block; color: var(--text-muted); font-size: .8rem; }
.log-skill__none { color: var(--text-muted); }
.next-day { display: block; font-size: .75rem; color: var(--text-muted); }
.log-conditions { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .2rem; }

.log-totals { margin: 2rem 0; }
.totals-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.totals-table th, .totals-table td {
  border: 1px solid var(--border-strong);
  padding: .5rem .6rem;
  text-align: left;
}
.totals-table thead th { background: var(--surface-2); font-size: .78rem; text-transform: uppercase; }
.totals-table .is-met   { color: var(--ok); font-weight: 700; }
.totals-table .is-short { color: var(--warn); font-weight: 700; }

.log-certify { margin-top: 2rem; }
.log-certify p { max-width: none; font-size: .9rem; }
.signature-row { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.75rem; }
.signature { flex: 1 1 18rem; }
.signature--short { flex: 0 1 10rem; }
.signature__line { display: block; border-bottom: 1px solid var(--text); height: 1.75rem; }
.signature__label { display: block; font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }

.log-footer {
  margin-top: 2.5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
  font-size: .75rem;
  color: var(--text-muted);
}
.log-empty { padding: 2rem; text-align: center; color: var(--text-muted); }