/*
 * fooment's one stylesheet.
 *
 * Plain CSS, no build step. Colours are tokens on :root, redefined for dark
 * mode, so a component names what a colour is for ("muted", "border") and
 * never which shade it is. The system font everywhere: it is already on the
 * device, so text renders immediately and reads as native.
 *
 * Motion is limited to the toast arriving, which confirms that something
 * happened. Nothing else moves.
 */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f5f6f7;
  --surface-strong: #eceef1;
  --text: #16191f;
  --muted: #5a6170;
  --faint: #8b919c;
  --border: #e1e4e8;
  --border-strong: #c9cdd3;
  --link: #1b5aa6;
  --primary: #16191f;
  --primary-text: #ffffff;
  --primary-hover: #343a44;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --ok: #11734a;
  --ok-soft: #e3f4ec;
  --tight: #8a5a00;
  --tight-soft: #fdf3dc;
  --critical: #c0262d;
  --heavy-soft: #f3e8fd;
  --heavy: #6b21a8;
  --shadow: 0 6px 24px rgb(15 20 30 / 0.12);
  --radius: 8px;
  /* Matches the header, so content edges line up with the nav above it.
     Section paragraphs and page intros keep their own narrower measure, so
     the extra width goes mostly to tables and grids. */
  --page: 70rem;
  --gutter: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1013;
    --surface: #171a1f;
    --surface-strong: #20242b;
    --text: #e6e8eb;
    --muted: #a3a9b4;
    --faint: #737a86;
    --border: #262b33;
    --border-strong: #363c46;
    --link: #82b6f2;
    --primary: #e6e8eb;
    --primary-text: #0e1013;
    --primary-hover: #ffffff;
    --danger: #f28b82;
    --danger-soft: #3a1714;
    --ok: #6fd3a2;
    --ok-soft: #0f2c20;
    --tight: #f2c46b;
    --tight-soft: #33270c;
    --critical: #f0616a;
    --heavy-soft: #2a1a3d;
    --heavy: #d2a8ff;
    --shadow: 0 6px 24px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1013;
  --surface: #171a1f;
  --surface-strong: #20242b;
  --text: #e6e8eb;
  --muted: #a3a9b4;
  --faint: #737a86;
  --border: #262b33;
  --border-strong: #363c46;
  --link: #82b6f2;
  --primary: #e6e8eb;
  --primary-text: #0e1013;
  --primary-hover: #ffffff;
  --danger: #f28b82;
  --danger-soft: #3a1714;
  --ok: #6fd3a2;
  --ok-soft: #0f2c20;
  --tight: #f2c46b;
  --tight-soft: #33270c;
  --critical: #f0616a;
  --heavy-soft: #2a1a3d;
  --heavy: #d2a8ff;
  --shadow: 0 6px 24px rgb(0 0 0 / 0.5);
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

a {
  color: var(--link);
  text-underline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.875rem;
}

.error {
  color: var(--danger);
  font-size: 0.9rem;
}

/* ---------- Page frame ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  max-width: var(--page);
  width: 100%;
  margin: 0 auto;
  padding: 1rem var(--gutter);
}

.brand {
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.nav a {
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.nav a:hover {
  color: var(--text);
  background: var(--surface);
}

.nav a[aria-current="page"] {
  color: var(--text);
  background: var(--surface-strong);
}

.header-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.page {
  flex: 1;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 1rem var(--gutter) 3rem;
}

.site-footer {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem var(--gutter);
  font-size: 0.85rem;
  color: var(--faint);
}

.site-footer a {
  color: var(--faint);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
}

.narrow-only {
  display: none;
}

/*
 * Narrow screens: the nav takes its own full-width row under the logo, on one
 * line. The theme follows the system there — a phone already has a dark mode
 * switch — which keeps the top row to the things used daily.
 */
@media (max-width: 760px) {
  .nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .nav a {
    padding: 0.35rem 0.45rem;
    font-size: 0.9rem;
  }

  .header-end .theme {
    display: none !important;
  }

  .wide-only {
    display: none;
  }

  .narrow-only {
    display: inline;
  }
}

/* ---------- Headings and sections ---------- */

.page-head {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.page-head h1 {
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.page-head p {
  margin-top: 0.35rem;
  max-width: 42rem;
}

.section {
  padding: 1.5rem 0;
}

.section > form + .row,
.section > form > .field + *,
.section > form > .field-grid + * {
  margin-top: 1rem;
}

.section > p,
.explain,
.note-text {
  max-width: 65ch;
  line-height: 1.65;
}

.section > form,
.field-grid > * {
  min-width: 0;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}

.section + .section {
  border-top: 1px solid var(--border);
}

/*
 * Paragraphs carry no margin of their own, so lines placed one after another
 * in a section — a button, then the note under it — touched. One rule
 * spaces them evenly everywhere instead of a fix on each page.
 */
.section > p + p,
.section > p + form,
.section > form + p,
.section > div + p,
.section > p + div {
  margin-top: 0.75rem;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.spaced {
  margin-top: 2rem;
}

.back {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.empty {
  padding: 2.5rem 0;
  text-align: center;
  color: var(--muted);
}

.empty h2 {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.empty p + p {
  margin-top: 0.5rem;
}

.stack > * + * {
  margin-top: 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.row-spread {
  justify-content: space-between;
}

.row-end {
  align-items: flex-end;
}

/* Right-aligned so the buttons line up with the numeric columns beside them. */
.row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* Stacked on a phone, so the title column keeps room to be read. */
@media (max-width: 760px) {
  .row-actions {
    flex-direction: column;
    align-items: flex-end;
  }
}

.plain-list {
  list-style: none;
  padding: 0;
}

.plain-list li + li {
  margin-top: 0.5rem;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover {
  background: var(--surface);
}

.btn:disabled,
.btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.btn-danger:hover {
  background: var(--danger-soft);
}

.btn-small {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}

.btn-icon {
  padding: 0.55rem;
}

.btn-block {
  width: 100%;
  margin-top: 0.5rem;
}

.btn-running {
  border-color: var(--ok);
  color: var(--ok);
}

.btn-done:hover {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-button.danger {
  color: var(--danger);
}

.icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/*
 * The header stopwatch keeps its icon in a span so the script can swap play
 * for stop. As an inline box the icon would sit on the text's baseline and
 * ride high; as a flex box it centres on the label like every other icon.
 */
[data-stopwatch-icon] {
  display: flex;
}

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

.input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}

/* Text boxes and selects one height, so a row of them lines up. */
input.input,
select.input {
  height: 2.6rem;
}

.input:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 20%, transparent);
}

textarea.input {
  resize: vertical;
  line-height: 1.5;
}

.field {
  display: block;
}

.field-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.875rem;
  font-weight: 550;
}

.hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.field-grid-3 {
  grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 640px) {
  .field-grid-3 {
    grid-template-columns: 1fr;
  }
}

.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.check input {
  margin: 0;
  width: 1rem;
  height: 1rem;
}

.choices {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
}

.choices legend {
  padding: 0;
}

.choices legend,
.choices > .hint {
  grid-column: 1 / -1;
}

.choice {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 0.9rem;
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--text);
  background: var(--surface);
}

.choice input {
  margin-top: 0.2rem;
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.inline-form .input {
  flex: 1;
}

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 550;
  white-space: nowrap;
}

.badge-button {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 550;
}

.badge-button:hover {
  color: var(--text);
}

.load-light {
  background: var(--ok-soft);
  color: var(--ok);
}

.load-medium {
  background: var(--tight-soft);
  color: var(--tight);
}

.load-heavy {
  background: var(--heavy-soft);
  color: var(--heavy);
}

.pressure-comfortable {
  background: var(--ok-soft);
  color: var(--ok);
}

.pressure-tight {
  background: var(--tight-soft);
  color: var(--tight);
}

.pressure-critical {
  background: var(--critical);
  color: #ffffff;
}

.pill {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- Popovers (native <details>) ---------- */

.pop {
  position: relative;
  display: inline-block;
}

.pop > summary {
  list-style: none;
  cursor: pointer;
}

.pop > summary::-webkit-details-marker {
  display: none;
}

.pop-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 30;
  width: min(20rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: var(--shadow);
  text-align: left;
  white-space: normal;
}

.pop-left .pop-panel {
  right: auto;
  left: 0;
}

.pop-panel:has(.wide-panel) {
  width: min(32rem, calc(100vw - 2rem));
}

.pop-panel .row {
  margin-top: 0.85rem;
}

/*
 * On a phone a panel anchored to its button runs off one side or the other,
 * depending on where the button is. A sheet along the bottom of the screen
 * always fits, and sits where the thumb already is.
 */
@media (max-width: 640px) {
  .pop-panel,
  .pop-panel:has(.wide-panel) {
    position: fixed;
    top: auto;
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--gutter);
    width: auto;
    max-height: 80vh;
    overflow-y: auto;
  }
}

.avatar {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-text);
  font-weight: 600;
}

.account-name {
  font-weight: 600;
}

.theme {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.theme button {
  display: grid;
  place-items: center;
  padding: 0.3rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.theme button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-text);
}

/* ---------- Timers ---------- */

.clock {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ok);
}

.running {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--ok);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}

.running > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 16rem;
  color: inherit;
  text-decoration: none;
}

.running-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.work-hint {
  margin-top: 0.6rem;
}

.start-here .card-foot {
  justify-content: flex-start;
}

.start-here .card-buttons {
  flex-basis: 100%;
}

/* ---------- Queue ---------- */

/* One gap between every control in the row, inside the energy group and
   between groups (`.segmented` uses the same), so it reads as evenly spaced. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 0.5rem;
  padding-top: 0.25rem;
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* The height of the search box and sync button beside it (2.6rem), so the
   whole row lines up top and bottom. */
.segmented button {
  height: 2.6rem;
  padding: 0 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.segmented button:hover {
  background: var(--surface);
}

.segmented button[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

/* Sync sits beside search, so it is a square the search box's height
   (2.6rem, see `input.input`) and the two line up. The form is a flex box
   so the button does not sit on a text line with space below it. */
.toolbar [data-sync-form] {
  display: flex;
}

.toolbar [data-sync-form] .btn-icon {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
}

.search {
  position: relative;
  flex: 1;
  min-width: 14rem;
}

.search .icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
}

.search .input {
  padding-left: 2.3rem;
  background: var(--surface);
  border-color: transparent;
}

.search .input:focus {
  background: var(--bg);
}

.match-count {
  min-height: 1.4em;
  margin: 0.4rem 0 0;
  text-align: right;
  font-size: 0.85rem;
  color: var(--muted);
}

.match-count:empty {
  min-height: 0;
  margin: 0;
}

.card {
  position: relative;
  padding: 1.1rem 0;
}

.card + .card {
  border-top: 1px solid var(--border);
}

.card-source {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.source-line {
  font-size: 0.9rem;
}

.meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.card-title {
  margin-top: 0.4rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.35;
}

.card-title a {
  text-decoration: none;
}

/* The title's link covers the whole card; the controls sit above it. */
.card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card:hover .card-title a {
  text-decoration: underline;
}

.snippet {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.numbers {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.numbers strong {
  color: var(--link);
  font-variant-numeric: tabular-nums;
}

.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.badges,
.card-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/*
 * `z-index: 1` above lifts each card's controls over its full-card link,
 * but it also makes every row its own layer, so an open panel (z-index 30)
 * only outranks things inside its own row: the next card's buttons, later
 * on the page at the same layer, were drawn over it. The row holding an
 * open popover moves above every other card's (and stays under toasts).
 */
.badges:has(.pop[open]),
.card-buttons:has(.pop[open]) {
  z-index: 20;
}

/* "Finished?" after a timer stops, inside the card or the time section. It
   sits above the card's link layer so its fields can be clicked. */
.check-in {
  position: relative;
  z-index: 1;
  margin-top: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.check-in > * + * {
  margin-top: 0.75rem;
}

.check-in:focus {
  outline: none;
}

.hidden-by-energy {
  margin-top: 2rem;
}

/* ---------- Assignment page ---------- */

.badges-row {
  padding: 0.75rem 0 0.25rem;
}

/* Narrower than the page: one assignment is read top to bottom, and its
   forms and notes get harder to follow stretched across a wide screen. */
.assignment-page {
  max-width: 54rem;
  margin-inline: auto;
}

.assignment-page .section-title {
  font-size: 1.05rem;
}

/*
 * Due, Estimate, Logged, Left: four across, two on a phone. Label above,
 * number, then one line of detail, so every column reads the same way.
 */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin: 0 0 1rem;
}

@media (max-width: 640px) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fact {
  min-width: 0;
}

.fact dd {
  margin: 0;
}

.fact-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.fact-value {
  margin-top: 0.2rem;
  font-size: 1.35rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fact-detail {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Logged is the one fact you can click, to correct it. */
.fact-button {
  display: inline-block;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed var(--border-strong);
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.actions-section > * + * {
  margin-top: 0.75rem;
}

.manual-time summary {
  cursor: pointer;
  color: var(--link);
}

.manual-time form {
  margin-top: 1rem;
  max-width: 24rem;
}

.explain {
  margin: 0.75rem 0;
}

.explain p + p {
  margin-top: 0.25rem;
}

.bar {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--surface-strong);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
}

.bar-over span {
  background: var(--tight);
}

.notes > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

.notes > summary::-webkit-details-marker {
  display: none;
}

.notes[open] + .note-text {
  display: none;
}

.notes form {
  margin-bottom: 1rem;
}

.notes textarea,
.section > form > textarea {
  margin-bottom: 0.5rem;
}

.note-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

/* ---------- Marked-done ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  padding: 1.25rem 0;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table th {
  padding: 0.6rem 0.75rem 0.6rem 0;
  text-align: left;
  font-weight: 550;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.table td {
  padding: 0.7rem 0.75rem 0.7rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.course-ratio {
  padding: 0.75rem 0;
}

.course-ratio .bar {
  margin: 0.4rem 0;
}

/* ---------- Courses and import ---------- */

.course-name {
  font-weight: 600;
}

.course form.row {
  margin-top: 0.75rem;
  align-items: flex-end;
}

.course form.row .field {
  width: 12rem;
}

.two-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2.5rem;
}

@media (min-width: 900px) {
  .two-columns {
    grid-template-columns: 1fr 1fr;
  }
}

.steps-list {
  padding-left: 0;
  list-style: none;
}

.steps-list li + li {
  margin-top: 1rem;
}

.steps-list img {
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Phone steps and computer steps side by side, each half the page; one
   above the other, phone first, once there is no room for two. */
.steps-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2.5rem;
  align-items: start;
}

@media (min-width: 760px) {
  .steps-columns {
    grid-template-columns: 1fr 1fr;
  }
}

.steps-heading {
  margin: 1.25rem 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}

/* Phone screenshots are tall and narrow: two to a row, so the four steps
   take the height of two desktop ones. */
.steps-phone {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* The instruction takes the spare height, so the two screenshots in a row
   line up even when one instruction runs to more lines. */
.steps-phone li {
  display: flex;
  flex-direction: column;
}

.steps-phone li p {
  flex: 1;
}

.steps-phone li + li {
  margin-top: 0;
}

/* ---------- Welcome ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0 2.5rem;
}

@media (min-width: 760px) {
  .hero {
    grid-template-columns: 1.1fr 1fr;
  }
}

.hero > div > * + * {
  margin-top: 1rem;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hero-title span {
  display: block;
}

.example {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.example-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
}

.example-title {
  font-weight: 600;
}

.example-sum {
  padding: 1rem;
}

.example-sum div {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
}

.example-sum dt {
  color: var(--muted);
}

.example-total {
  margin-top: 0.5rem;
  padding-top: 0.6rem !important;
  border-top: 1px solid var(--border);
  align-items: baseline;
}

.example-total dt {
  color: var(--text) !important;
  font-weight: 600;
}

.example-total dd {
  font-size: 1.6rem;
  font-weight: 650;
}

.example figcaption {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.caption {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Even rows only: auto-fit left a fourth step alone on a row of its own. */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}

.steps li {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.step-number {
  font-size: 0.8rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.step-title {
  margin: 0.3rem 0 0.2rem;
  font-weight: 600;
}

/* ---------- Toast ---------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 50;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2rem);
}

.toast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  padding: 0.7rem 0.9rem 0.7rem 1rem;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-text);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  animation: toast-in 160ms ease-out;
}

.toast a,
.toast .link-button {
  color: inherit;
  font-weight: 600;
}

.toast-close {
  margin-left: auto;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.7;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

/* ---------- Your week ---------- */

.week {
  padding: 1rem 0 0.5rem;
}

/* On the queue the week sits in the page heading, above its rule: it is
   the answer to "Your week", so it reads as the heading's subtitle and
   looks like every other page's subtitle (`.page-head p`): muted, body
   size, regular weight. A tight day keeps its colour; it is a warning. */
/* The queue has no rule under its heading: the week, its suggestion and
   the list are one page, and the gap above the list (`.list-start`)
   separates them. */
.queue-head .page-head {
  border-bottom: 0;
  margin-bottom: 0;
}

.page-head .week {
  padding: 0;
  color: var(--muted);
}

.page-head .week-numbers,
.page-head .verdict,
.page-head .week-links {
  margin-top: 0.35rem;
  font-size: inherit;
  color: inherit;
}

.page-head .week-numbers {
  gap: 0 1.5rem;
}

.page-head .week-numbers p {
  margin-top: 0;
}

.page-head .week p {
  max-width: none;
}

.page-head .week strong {
  font-weight: inherit;
  color: inherit;
}

.page-head .verdict-tight strong {
  color: var(--tight);
}

.week-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  font-size: 1.05rem;
}

.verdict {
  margin-top: 0.75rem;
  font-size: 1.05rem;
}

.verdict-tight strong {
  color: var(--tight);
}

.week-links {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--faint);
}

.start-here {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
}

.start-here > * + * {
  margin-top: 0.3rem;
}

/* The suggested card is the list's card; the box around it is the frame. */
.start-here .card {
  padding-bottom: 0;
}

/* The list's "Everything due" heading is for screen readers only, but the
   space it took stays (1rem above, a 1.5rem line, 0.5rem below), so the
   list keeps the gap that separates it from Start here. "See everything
   due" and similar links jump to the toolbar. */
.list-start {
  margin-top: 3rem;
  scroll-margin-top: 1rem;
}

/* ---------- First run and setup ---------- */

.first-run {
  max-width: 34rem;
  padding: 2.5rem 0;
}

.first-run h1 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.first-run > .muted {
  margin: 0.5rem 0 1.5rem;
  font-size: 1.05rem;
}

.quiet-option {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.setup-list {
  list-style: none;
  padding: 0;
}

.setup-list li {
  padding: 0.65rem 0;
}

.setup-list li + li {
  border-top: 1px solid var(--border);
}

.setup-title {
  font-weight: 550;
}

/* ---------- Hour choices (availability, check-in) ---------- */

.day-rows {
  margin: 0.75rem 0;
}

.day-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.35rem 0;
  border: 0;
}

.day-row legend {
  float: left;
  width: 3rem;
  padding: 0;
  font-weight: 550;
}

.day-row legend.field-label {
  float: none;
  width: auto;
  margin-bottom: 0.4rem;
}

.hour-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.hour-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.hour-choice span {
  display: inline-block;
  min-width: 3rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.hour-choice:hover span {
  background: var(--surface);
}

.hour-choice input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}

.hour-choice input:focus-visible + span {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.availability + p {
  margin-top: 0.85rem;
}

/* A line that belongs to the heading above it, just under its rule. */
.rule-note {
  margin-top: 0.75rem;
}

.how-to-read {
  margin-top: 0.5rem;
}

.how-to-read > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--link);
}

.how-to-read ul {
  margin-top: 0.6rem;
  max-width: 44rem;
}

.pop-wide .pop-panel {
  width: min(30rem, calc(100vw - 2rem));
}

.finish-form {
  margin-bottom: 0.75rem;
}

.finish-form .inline-form {
  margin-bottom: 0;
}

.example-sum > * + * {
  margin-top: 0.35rem;
}

.example-sum .example-total {
  display: block;
  margin-top: 0.9rem;
}

.trust {
  margin-top: 2.5rem;
  max-width: 44rem;
}

.trust ul {
  margin-top: 0.6rem;
}

@media (min-width: 560px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.finish-note {
  margin-top: 0.75rem;
}

/* ---------- Welcome arrival ---------- */

/*
 * A quick white flash, then the page fades in, as supremenewyork.com greets
 * its visitors: the veil is solid white for the first 50ms (10% of the
 * animation) and gone by 500ms. White in both themes, on purpose — it is a
 * flash, not a blank. Over everything, header
 * included, so the whole screen arrives at once. It takes no clicks, so a
 * fast visitor is never blocked by it.
 */
.greet-veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  animation: greet-flash 500ms ease-out;
}

@keyframes greet-flash {
  0%,
  10% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .greet-veil {
    animation: none;
  }
}

/*
 * Sign in: the heading's rule, the button and the note under it, one
 * equal step apart (1.25rem). The heading already leaves 0.5rem below its
 * rule, so the section adds the rest rather than its usual padding.
 */
.sign-in {
  padding-top: 0.75rem;
}

/* Not `> * + *`: the form starts with a hidden field, which would count. */
.sign-in > p {
  margin-top: 1.25rem;
}

/*
 * A button beside a text box or a select, as on the Program and Courses
 * pages, is as tall as the box, so the two read as one row.
 */
.row-end > .btn,
.course form.row > .btn {
  height: 2.6rem;
}