/* buttons don't inherit text color; without this dark mode falls back to the system black */
:where(.dash, .auth, .panel, .editor) button { color: inherit; }

/* ---------- dashboard ---------- */
.dash { padding-block: clamp(32px, 5vw, 64px); }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.dash-who { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.linkish:hover { color: var(--accent); }

/* auth card */
.auth { max-width: 380px; margin: clamp(40px, 8vw, 90px) auto; }
.auth h1 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 6px; }
.auth p.sub { color: var(--ink-2); margin-bottom: 22px; }
.field { display: block; margin-bottom: 14px; }
.field[hidden], [hidden] { display: none !important; }
.field span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 0;
}
.field input:focus { outline: none; border-color: var(--accent); }
.auth .btn { width: 100%; text-align: center; cursor: pointer; }
.auth .alt { margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.msg { margin-top: 14px; font-size: 13px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); }
.msg.bad { border-color: var(--accent); color: var(--accent); }
.msg:empty { display: none; }

/* module list */
.mods { border-top: 1px solid var(--line); }
.mod {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: start;
  gap: 0 14px; padding: 18px 0; border-bottom: 1px solid var(--line);
}
.mod.off { opacity: .5; }
.mod input[type="checkbox"] { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--accent); cursor: pointer; }
.mod-name { font-family: var(--display); font-weight: 700; font-size: 16px; }
.mod-sum { color: var(--ink-2); font-size: 14px; margin-top: 3px; }
.mod-note { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 7px; }
.rungpick { display: flex; align-items: center; gap: 8px; }
.rungpick label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rungpick select {
  font: inherit; font-size: 13px; padding: 7px 9px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 0; max-width: 230px;
}
.rungpick select:focus { outline: none; border-color: var(--accent); }
.dash-foot { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.dash-foot .btn { cursor: pointer; }
.saved { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 640px) {
  .mod { grid-template-columns: 24px 1fr; }
  .rungpick { grid-column: 2; margin-top: 10px; }
  .rungpick select { max-width: none; width: 100%; }
}

.authtabs { display: flex; gap: 0; margin-bottom: 22px; border: 1px solid var(--line); }
.authtab {
  flex: 1; padding: 14px 10px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--ink-3); border: 0; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.authtab + .authtab { border-left: 1px solid var(--line); }
.authtab.on { background: var(--ink); color: var(--ground); }
.authtab:not(.on):hover { color: var(--accent); }

.remember { display: flex; align-items: center; gap: 9px; margin: 2px 0 16px; cursor: pointer; }
.remember input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.remember span { font-size: 13px; color: var(--ink-2); }

/* ---------- the day bar ---------- */
.weekbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.weekrange { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.weeknav { display: flex; gap: 6px; }
.chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px; background: transparent; color: var(--ink-2);
  border: 1px solid var(--line); cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.chip:hover { color: var(--accent); border-color: var(--accent); }
.chip.on { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.chip[hidden] { display: none !important; }

/* editor: slides in from the right, the day stays visible behind it */
.editor, .panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw);
  z-index: 60; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line);
  padding: 26px 24px 22px; overflow-y: auto;
  transform: translateX(101%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -18px 0 42px rgba(0, 0, 0, .12);
}
.editor.open, .panel.open { transform: none; }

/* history comes in from the other side */
#history {
  right: auto; left: 0;
  border-left: 0; border-right: 1px solid var(--line);
  transform: translateX(-101%);
  box-shadow: 18px 0 42px rgba(0, 0, 0, .12);
}
#history.open { transform: none; }
@media (prefers-reduced-motion: reduce) { .editor, .panel { transition: none; } }

.ed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.editor h3, .panel h3 { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.15; }
.editor .when, .panel .when { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }

.ed-x {
  flex: none; width: 30px; height: 30px; line-height: 1; font-size: 21px;
  background: transparent; color: var(--ink-3); border: 1px solid var(--line);
  cursor: pointer; transition: color .16s ease, border-color .16s ease;
}
.ed-x:hover { color: var(--accent); border-color: var(--accent); }

.editor-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.editor-row > span.lab { display: block; width: 100%; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.editor input[type="time"], .panel input[type="time"] { font: inherit; font-size: 13px; padding: 8px 10px; background: var(--ground); color: var(--ink); border: 1px solid var(--line); }
.howitwent { display: flex; gap: 6px; flex-wrap: wrap; }

.ed-foot { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ed-foot .btn { cursor: pointer; }
.chip.danger { border-color: var(--line); color: var(--ink-3); }
.chip.danger:hover { color: var(--accent); border-color: var(--accent); }

/* the settings panel is wider, it has more to say */
#drawer { width: min(540px, 96vw); }
#drawer .mods { border-top: 1px solid var(--line); }
#drawer .mod { padding: 16px 0; grid-template-columns: 26px 1fr; }
#drawer .rungpick { grid-column: 2; margin-top: 10px; }
#drawer .rungpick select { max-width: none; width: 100%; }

/* movement history */
.hist-mod {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  margin: 22px 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.hist-mod:first-child { margin-top: 0; }
.hist-rung {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--ink-2); padding: 5px 0;
}
.hist-rung.zero { color: var(--ink-3); opacity: .6; }
.hist-count { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.hist-mod .hist-count { color: var(--accent); font-size: 12px; }

/* ---------- daily view: blocks that open ---------- */
.daylist[hidden] { display: none !important; }
.dayblock {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3); margin-bottom: 10px; color: var(--ink);
  transition: border-color .2s ease, box-shadow .3s ease;
}
.dayblock.train { border-left-color: var(--accent); }
.dayblock.hang  { border-left-color: var(--line); }
.dayblock.offer { border-left-color: var(--accent); background: var(--ground-deep); }
.dayblock.open  { border-color: var(--ink-3); box-shadow: 0 18px 40px rgba(0,0,0,.10); }
.dayblock.done { border-left-color: var(--ink-3); }
.dayblock.done .db-state { color: var(--ink-3); }
/* finished for the day: the drill is struck through, the module dims */
.dayblock.done .db-drill { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .55; }
.dayblock.done .db-module { opacity: .55; }

.db-head {
  width: 100%; display: block; text-align: left; cursor: pointer;
  background: transparent; border: 0; font: inherit; color: inherit;
  padding: 20px 22px;
}
.db-head:hover .db-drill { color: var(--accent); }
.db-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.db-rung, .db-state { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.db-state { color: var(--accent); }
.db-drill { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.4vw, 25px); line-height: 1.12; margin-top: 7px; transition: color .16s ease; }
.db-module { font-size: 13px; color: var(--ink-2); margin-top: 7px; }
.db-note { font-size: 13px; color: var(--ink-3); margin-top: 9px; }

/* the opening itself: rows animate from nothing to their natural height */
.db-shell { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.4, 0, .2, 1); }
.dayblock.open .db-shell { grid-template-rows: 1fr; }
.db-body { overflow: hidden; min-height: 0; padding: 0 22px; }
.dayblock.open .db-body { padding-bottom: 22px; }
@media (prefers-reduced-motion: reduce) { .db-shell { transition: none; } }

/* rung strip */
.rungstrip {
  display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px 0 14px; margin-bottom: 4px; border-top: 1px solid var(--line); padding-top: 16px;
  scrollbar-width: thin;
}
.rs {
  flex: none; scroll-snap-align: start; text-align: left; cursor: pointer;
  background: transparent; color: var(--ink-2); border: 1px solid var(--line);
  padding: 8px 12px; font: inherit; min-width: 140px; max-width: 220px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.rs:hover { border-color: var(--accent); color: var(--ink); }
.rs.on { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.rs.current:not(.on) { border-color: var(--accent); }
.rs-n { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.rs-name { display: block; font-size: 12.5px; line-height: 1.25; margin-top: 3px; }

/* chapter + counter */
.db-split { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: start; }
.reader-box {
  max-height: 62vh; overflow-y: auto; padding: 4px 22px 18px 2px;
  font-family: var(--prose); font-size: 16px; line-height: 1.6; color: var(--ink-2);
  scrollbar-width: thin;
}
.reader-box h2 { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--ink); margin: 6px 0 4px; line-height: 1.15; }
.reader-box h3 { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); margin: 26px 0 8px; }
.reader-box h4 { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--accent); margin: 0 0 6px; }
.reader-box p { margin: 0 0 12px; }
.reader-box strong { color: var(--ink); }
.reader-box ul, .reader-box ol { margin: 0 0 14px 20px; padding: 0; }
.reader-box li { margin-bottom: 6px; }
.reader-box li.sub { list-style: circle; margin-left: 18px; }
.reader-box .ch-label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0; }
.reader-box .ch-epigraph { font-style: italic; color: var(--ink-3); }
.reader-box .ch-photo { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-align: center; color: var(--ink-3); border: 1px dashed var(--line); padding: 12px 14px; margin: 16px 0; }
.reader-box .ch-note { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.reader-box .ch-callout { border: 1px solid var(--accent); background: var(--ground-deep); padding: 14px 16px; margin: 16px 0; }
.reader-box .ch-callout p:last-child { margin-bottom: 0; }

.db-tool {
  position: sticky; top: calc(var(--headh) + 12px);
  border: 1px solid var(--line); background: var(--ground); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.db-tool .lab { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tool-display { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.tool-row { display: flex; gap: 6px; justify-content: center; }
.tool-row.counter { align-items: center; justify-content: space-between; }
.tool-step {
  width: 44px; height: 44px; font-size: 22px; line-height: 1; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  transition: border-color .16s ease, color .16s ease;
}
.tool-step:hover { border-color: var(--accent); color: var(--accent); }
.tool-log { width: 100%; text-align: center; cursor: pointer; margin-top: 4px; }

@media (max-width: 760px) {
  .db-split { grid-template-columns: 1fr; }
  .db-tool { position: static; order: -1; }
  .reader-box { max-height: 55vh; padding-right: 6px; }
}

/* the log pane's measure fields */
.measure { display: flex; flex-direction: column; gap: 6px; }
.measure[hidden] { display: none !important; }
.measure input {
  width: 120px; font: inherit; font-size: 15px; padding: 8px 10px;
  background: var(--ground); color: var(--ink); border: 1px solid var(--line); border-radius: 0;
}
.measure input:focus { outline: none; border-color: var(--accent); }

.dayempty { border: 1px dashed var(--line); padding: 34px 22px; text-align: center; color: var(--ink-3); font-size: 14px; }

.hist-empty { font-size: 13px; color: var(--ink-3); line-height: 1.5; padding: 14px 16px; border: 1px dashed var(--line); margin-bottom: 22px; }
.hist-note  { font-size: 12px; color: var(--ink-3); padding: 2px 0 4px; }
.editor textarea {
  width: 100%; font: inherit; font-size: 14px; line-height: 1.5; padding: 10px 12px; resize: vertical;
  background: var(--ground); color: var(--ink); border: 1px solid var(--line); border-radius: 0;
}
.editor textarea:focus { outline: none; border-color: var(--accent); }
.howitwent .chip.on { background: var(--ink); color: var(--ground); border-color: var(--ink); }
#ed-log:disabled { opacity: .5; cursor: default; }

/* default-for-next-workout bar inside an open block */
.defaultbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--accent); padding: 10px 12px; margin: 0 0 14px;
  font-size: 13px; color: var(--ink-2);
}

/* what was logged */
.logged { border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; }
.logged-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.logged-outcome { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.logged-outcome.clean { color: var(--ink); }
.logged-outcome.barely { color: var(--ink-2); }
.logged-outcome.incomplete { color: var(--accent); }
.logged-when { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.logged-measure { font-family: var(--display); font-weight: 800; font-size: 26px; margin-top: 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.logged-notes { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 8px 0 0; white-space: pre-wrap; }

/* today so far */
.sofar-item { margin-bottom: 18px; }
.sofar-drill { font-family: var(--display); font-weight: 700; font-size: 16px; }
.sofar-module { font-size: 12px; color: var(--ink-3); margin: 2px 0 8px; }

/* run automatically */
.autobar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: 16px 0 4px; font-size: 13px; color: var(--ink-2);
}
.autobar + .rungstrip { border-top: 0; padding-top: 10px; }
.autobar .btn { cursor: pointer; }
.countdown-track { height: 3px; background: var(--line); overflow: hidden; }
.countdown-fill { height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }

/* finish for the day */
.finishbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: 16px 0 6px; font-size: 13px; color: var(--ink-2);
}
.finishbar .btn { cursor: pointer; }
.finishbar + .autobar { border-top: 0; padding-top: 8px; }
.finishbar + .rungstrip, .autobar + .rungstrip { border-top: 0; padding-top: 10px; }

/* the logs inside a block */
.log-entry { margin-top: 4px; }
.log-entry + .log-entry { margin-top: 10px; }
.log-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.log-entry-rung { font-size: 12.5px; color: var(--ink-2); }
.log-entry .linkish { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sofar-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.tool-go { cursor: pointer; }

/* today so far: module titles, each opening to its logs */
.sofar-item { margin-bottom: 0; border-bottom: 1px solid var(--line); }
.sofar-item:first-child { border-top: 1px solid var(--line); }
.sofar-row {
  width: 100%; display: grid; grid-template-columns: 1fr auto 18px; align-items: baseline; gap: 12px;
  background: transparent; border: 0; padding: 14px 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.sofar-row:hover .sofar-drill { color: var(--accent); }
.sofar-drill { font-family: var(--display); font-weight: 700; font-size: 15px; transition: color .16s ease; }
.sofar-caret { font-family: var(--mono); font-size: 14px; color: var(--ink-3); text-align: right; transition: transform .25s ease; }
.sofar-item.open .sofar-caret { transform: rotate(45deg); }
.sofar-shell { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1); }
.sofar-item.open .sofar-shell { grid-template-rows: 1fr; }
.sofar-inner { overflow: hidden; min-height: 0; }
.sofar-item.open .sofar-inner { padding-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .sofar-shell, .sofar-caret { transition: none; } }

/* ---------- scroll lock while a block is open ----------
   The page holds still. The open block fills the screen below the header, and inside it
   the chapter scrolls on its own while the counter and the logs stay where they are. */
.dayblock { scroll-margin-top: calc(var(--headh) + 12px); }
html.scroll-locked, html.scroll-locked body { overflow: hidden; }

html.scroll-locked .dayblock.open {
  display: flex; flex-direction: column; overflow: hidden;
  height: calc(100vh - var(--headh) - 24px);
  height: calc(100dvh - var(--headh) - 24px);
}
html.scroll-locked .dayblock.open .db-head { flex: none; }
html.scroll-locked .dayblock.open .db-shell { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
html.scroll-locked .dayblock.open .db-body {
  display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden;
}
html.scroll-locked .dayblock.open .db-body > :not(.db-split) { flex: none; }
html.scroll-locked .dayblock.open .db-split { flex: 1; min-height: 0; align-items: stretch; }

/* the chapter: its own scroll */
html.scroll-locked .dayblock.open .reader-box {
  max-height: none; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* the counter and the logs: stay put, scroll only if the log list outgrows the column */
html.scroll-locked .dayblock.open .db-tool {
  position: static; align-self: start; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
}

/* phone: the open block takes the whole screen. Its header stays at the top (tap it to
   close). Below the bars, two pages side by side: Log (counter, Log it, what you logged)
   and Instructions (the chapter). Swipe between them; each scrolls up and down on its own. */
.pager-tabs { display: none; }
@media (max-width: 760px) {
  html.scroll-locked .dayblock.open {
    position: fixed; inset: 0; z-index: 55; margin: 0;
    height: auto; border-top: 0; border-right: 0; border-bottom: 0;
    padding-top: env(safe-area-inset-top);
    box-shadow: none;
  }
  html.scroll-locked .dayblock.open .db-head { border-bottom: 1px solid var(--line); }
  html.scroll-locked .dayblock.open .db-body {
    padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  html.scroll-locked .dayblock.open .pager-tabs { display: flex; gap: 6px; margin: 4px 0 12px; }
  .pager-tabs button {
    flex: 1; cursor: pointer; padding: 10px 0;
    font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    background: transparent; color: var(--ink-3); border: 1px solid var(--line);
    transition: color .16s ease, border-color .16s ease, background .16s ease;
  }
  .pager-tabs button.on { color: var(--ink); border-color: var(--ink-3); }

  html.scroll-locked .dayblock.open .db-split {
    display: flex; flex-direction: row; gap: 0;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  html.scroll-locked .dayblock.open .db-split::-webkit-scrollbar { display: none; }
  html.scroll-locked .dayblock.open .db-split > * {
    flex: 0 0 100%; width: 100%; min-width: 0; box-sizing: border-box;
    scroll-snap-align: start; scroll-snap-stop: always;
    overflow-y: auto; overscroll-behavior-y: contain;
  }
  /* page two: logging */
  html.scroll-locked .dayblock.open .db-tool { order: 0; align-self: flex-start; max-height: 100%; }
  /* page one: the instructions */
  html.scroll-locked .dayblock.open .reader-box { height: 100%; max-height: none; padding: 0 2px 24px 0; }
}

/* settings */
.dash-who .sep { color: var(--ink-3); }
.dash-who .linkish.on { color: var(--accent); }
#settings form { display: flex; flex-direction: column; flex: 1; }
.set-lab { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
#pw-msg { min-height: 1.4em; }

/* ---------- opening and closing motion ----------
   The height and the page glide are driven from the script; the stylesheet handles the
   contents fading in after the block is under way, and out before it folds away. */
.db-body { transition: opacity .2s ease; }
.dayblock:not(.open) .db-body, .dayblock.closing .db-body { opacity: 0; }
.dayblock.opening .db-body { animation: dbFade .42s ease .16s both; }
.dayblock.no-anim, .dayblock.no-anim * { transition: none !important; animation: none !important; }
@keyframes dbFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* phone: the full-screen block rises into place, and sinks away when closed */
@media (max-width: 760px) {
  html.scroll-locked .dayblock.open.opening { animation: dbRise .36s cubic-bezier(.22, .8, .24, 1) both; }
  html.scroll-locked .dayblock.open.closing { animation: dbSink .24s ease both; }
  .dayblock.opening .db-body { animation-delay: .08s; }
}
@keyframes dbRise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes dbSink { to { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  .db-body { transition: none; }
  .dayblock.opening .db-body, html.scroll-locked .dayblock.open.opening, html.scroll-locked .dayblock.open.closing { animation: none; }
}

/* ---------- open / close mark on each block: plus closed, minus open ---------- */
.db-right { display: inline-flex; align-items: center; gap: 14px; }
.db-top { align-items: center; }
.db-head:hover .db-toggle::before,
.db-head:hover .db-toggle::after { background: var(--accent); }
.dayblock.open .db-toggle::after { transform: scaleY(0); }
.dayblock.open .db-toggle::before { background: var(--accent); }

/* ---------- the movement clip, with the written chapter behind the "?" ---------- */
.rb-bar { position: sticky; top: 0; height: 0; z-index: 2; display: flex; justify-content: flex-end; }
.rb-q {
  width: 32px; height: 32px; margin: 8px 8px 0 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  transition: color .16s ease, border-color .16s ease;
}
.rb-q:hover, .rb-q:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.reader-box.rb-media { padding: 0; overflow: hidden; background: #fcfbf9; border: 1px solid var(--line); position: relative; min-height: 320px; }
.rb-video { display: block; width: 100%; height: 100%; max-height: 62vh; object-fit: contain; }
html.scroll-locked .dayblock.open .reader-box.rb-media { overflow: hidden; }
html.scroll-locked .dayblock.open .rb-video { max-height: none; }
/* the chapter text sits under the button, so give its first line room */
.reader-box:not(.rb-media) > .rb-bar + * { padding-right: 44px; }

/* prompts: the Log tab (phone) and the "?" flash an orange outline every five seconds
   until they're used, starting a second after the block opens, and again for each rung */
.pager-tabs button.nudge, .rb-q.nudge { animation: nudge 5s ease-in-out 1s infinite; }
@keyframes nudge {
  0%, 24%, 100% { box-shadow: 0 0 0 0 transparent; }
  6%, 18% { box-shadow: 0 0 0 3px var(--accent); border-color: var(--accent); color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .pager-tabs button.nudge, .rb-q.nudge { animation: none; border-color: var(--accent); color: var(--accent); }
}

/* ---------- the tool's two halves: the controls, and what you logged ---------- */
.tool-main, .tool-logs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---------- computer, with a clip: the clip box is exactly the clip, and the
   counter and the logs take every bit of width that's left. Once there's room for
   both, the controls and the log list sit side by side; the controls stay pinned
   while the list scrolls. ---------- */
@media (min-width: 761px) {
  .db-split.has-media { display: flex; align-items: stretch; gap: 18px; }
  .db-split.has-media .reader-box.rb-media {
    flex: none; height: 100%; width: auto; max-width: 62%;
    aspect-ratio: var(--ar, 1 / 1); min-height: 0;
    background: #fff;
  }
  .db-split.has-media .rb-video { height: 100%; max-height: none; object-fit: contain; }
  html.scroll-locked .dayblock.open .db-split.has-media .db-tool {
    flex: 1; min-width: 240px; align-self: stretch; max-height: 100%;
    flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;
    gap: 12px 24px;
  }
  .db-split.has-media .tool-main, .db-split.has-media .tool-logs { flex: 1 1 240px; }
  .db-split.has-media .tool-main { position: sticky; top: 0; z-index: 1; background: var(--ground); }
}

/* chapter pictures, centered lines and links inside the written chapter */
.reader-box .ch-fig { margin: 18px 0 8px; text-align: center; }
.reader-box .ch-fig img { max-width: 100%; height: auto; display: inline-block; background: #fff; }
.reader-box .ch-center { text-align: center; }
.reader-box a { color: var(--accent); text-decoration: underline; }