/* ============================================================
   Working Mode — editorial two-pane day (design handoff, repo tokens)
   ============================================================ */

.work {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ─── Hero band ─────────────────────────────────────────────────────── */
/* Editorial wash from the design — a soft glow that sets the hero band
   apart from the work surface below. */
.work-hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--hero-glow) 0%, transparent 55%),
    linear-gradient(180deg, var(--hero-glow-2) 0%, var(--color-bone) 100%);
  border-bottom: 1px solid var(--color-mist);
}

.hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1.375rem 2.5rem 1.25rem;
}

.hero-left {
  min-width: 0;
}

.hero-title {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 0;
  font-weight: 400;
  font-size: 2.625rem;
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--color-ink);
}

.hero-title .ht-num {
  font-size: 0.9375rem;
  letter-spacing: 0;
  color: var(--color-graphite);
}

.hero-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
}

.hero-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--color-cream);
  border: 1px solid var(--color-mist);
  border-radius: var(--border-radius-pill);
  box-shadow: var(--box-shadow-thin);
}

.hero-nav .nav-arrow {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  color: var(--color-graphite);
  text-decoration: none;
  transition: background var(--transition-quick), color var(--transition-quick);
}

.hero-nav .nav-arrow:hover {
  background: var(--color-cream-soft);
  color: var(--color-ink);
}

.hero-nav .nav-arrow svg { width: 14px; height: 14px; }

.hero-nav .today-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 1rem;
  background: var(--color-ink);
  color: var(--color-bone);
  border-radius: var(--border-radius-pill);
  font-size: 0.8125rem;
  text-decoration: none;
}

.hero-nav .today-pill.is-today {
  background: var(--color-ink-soft);
  opacity: 0.85;
  cursor: default;
}

.hero-nav .today-pill .kbd {
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  color: var(--color-bone);
  opacity: 0.7;
}

.hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-cream);
  border: 1px solid var(--color-mist);
  color: var(--color-ink);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background var(--transition-quick), border-color var(--transition-quick);
}

.plan-btn:hover:not(:disabled) {
  background: var(--color-cream-soft);
  border-color: var(--color-ink-soft);
}

.plan-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.plan-btn svg { width: 13px; height: 13px; }

.plan-btn.primary {
  background: var(--color-ink);
  color: var(--color-bone);
  border-color: var(--color-ink);
}

/* The generic .plan-btn hover swaps in a light background, but a primary button
   keeps its light text — invisible (and dark-on-dark in dark mode). Keep the
   inverted scheme, just lift the surface. */
.plan-btn.primary:hover:not(:disabled) {
  background: var(--color-ink-soft);
  border-color: var(--color-ink-soft);
}

.plan-btn .kbd {
  background: transparent;
  border-color: currentColor;
  color: inherit;
  opacity: 0.45;
}

/* keyboard hint pill */
.kbd {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 2px 5px;
  border: 1px solid var(--color-mist);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--color-cream);
  color: var(--color-graphite);
  line-height: 1;
}

/* ─── Week strip (inside hero) — compact single-row navigator ───────── */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--color-fog);
  padding: 0 0.75rem;
}

.week-strip .day-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  min-height: 3.5rem;
  padding: 0.875rem 0.875rem 1rem;
  color: var(--color-graphite);
  text-decoration: none;
  transition: color var(--transition-quick);
}

.week-strip .day-tab:hover { color: var(--color-ink); }
.week-strip .day-tab.is-today { color: var(--color-ink); }

.day-tab .dt-head {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.day-tab .dt-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.day-tab.is-today .dt-label,
.day-tab.is-active .dt-label { opacity: 1; }

.day-tab .dt-num {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  font-size: 1rem;
  line-height: 1;
  color: var(--color-ink);
}

.day-tab.is-active .dt-num,
.day-tab.is-active .dt-label { color: var(--color-accent); }

.day-tab .dt-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-stone);
}

.day-tab.is-active .dt-count { color: var(--color-graphite); }

/* today: dot under the numeral */
.week-strip .day-tab.is-today .dt-num { position: relative; }
.week-strip .day-tab.is-today .dt-num::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.35rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* active: top accent bar */
.week-strip .day-tab.is-active::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
}

/* ─── Two-pane body ─────────────────────────────────────────────────── */
/* Two distinct surfaces: a crisp white list pane beside the warm-paper
   timeline, divided by a hairline. */
.work-body {
  flex: 1;
  min-height: 0;
  display: grid;
  /* list-heavy split locked in by the design (work-body.ratio-list-heavy) */
  grid-template-columns: 70fr 30fr;
  overflow: hidden;
  background: var(--color-white);
}

.list-pane,
.tl-pane {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
}

.list-pane::-webkit-scrollbar,
.tl-pane::-webkit-scrollbar { display: none; }

.list-pane {
  padding: 1.75rem 2rem 5rem;
  border-right: 1px solid var(--color-mist);
  background: var(--color-white);
}

.tl-pane {
  position: relative;
  /* No top padding: the sticky .tl-head sits flush at the scrollport top and
     supplies the breathing room above the grid. position:relative makes the
     pane the offset parent the timeline controller measures the grid against. */
  padding: 0 1.75rem 5rem;
  background: var(--color-bone);
}

/* Slim, quiet header: a label on the left, the zoom toggle on the right. Sticks
   to the top of the scrolling pane so the zoom is always in reach. */
.tl-head {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem 0.5rem 5.25rem;
  margin-bottom: 0.5rem;
  background: var(--color-bone);
  border-bottom: 1px solid var(--color-fog);
}

.tl-lbl {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-stone);
}

.tl-zoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--color-cream);
  border: 1px solid var(--color-mist);
  border-radius: var(--border-radius-pill);
}

.tl-zoom button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--border-radius-pill);
  color: var(--color-graphite);
  transition: background var(--transition-quick), color var(--transition-quick);
}
.tl-zoom button:hover { color: var(--color-ink); }
.tl-zoom button.is-on { background: var(--color-ink); color: var(--color-bone); }

/* group labels */
.group-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.375rem 0 0.625rem;
}

.group-label .lbl {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-graphite);
  white-space: nowrap;
}

.group-label .lbl-line {
  flex: 1;
  height: 1px;
  background: var(--color-fog);
}

/* ─── Task row ──────────────────────────────────────────────────────── */
.task {
  display: grid;
  /* 4 cols: checkbox · time · name · right rail. The drag handle is
     absolute-positioned outside the row (see .t-drag-handle below). */
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--border-radius-base);
  position: relative;
  transition: border-color var(--transition-quick);
}

/* Hover: just a hairline border. No background shift — matches the
   design's lighter touch. The drag handle fades in on hover too. */
.task:hover { border-color: var(--color-fog); }

/* Drag handle — sits outside the row to the left, visible on row hover. */
.task .t-drag-handle {
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  display: grid; place-items: center;
  color: var(--color-stone);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-quick);
}
.task .t-drag-handle svg { width: 11px; height: 11px; }
.task:hover .t-drag-handle { opacity: 0.7; }

/* button_to wraps a form; let the button drop into the grid directly. */
.t-check { display: contents; }

.task .checkbox {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--color-stone);
  border-radius: 50%;
  background: var(--color-cream);
  cursor: pointer;
  transition: border-color var(--transition-quick), background var(--transition-quick);
}

.task .checkbox:hover { border-color: var(--color-ink); }

.task .checkbox svg {
  width: 11px;
  height: 11px;
  opacity: 0;
  color: var(--color-bone);
  transition: opacity var(--transition-quick);
}

.task.is-completed .checkbox {
  background: var(--color-sage);
  border-color: var(--color-sage);
}

.task.is-completed .checkbox svg { opacity: 1; }

.task .t-time {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 5.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  /* It's a <button> now (opens the Planned/Actual popover) — strip the chrome. */
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.task .t-time .dot { color: var(--color-stone); }
.task .t-time .dur { color: var(--color-graphite); }
.task .t-time.unscheduled .clock { color: var(--color-stone); }

.task .t-name {
  font-size: 0.875rem;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task.is-completed .t-name {
  text-decoration: line-through;
  color: var(--color-stone);
}

.task.is-completed .t-time { color: var(--color-stone); }

/* quick-add row — a trigger that opens the quick-add modal */
.quick-add-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px dashed var(--color-mist);
  border-radius: var(--border-radius-base);
  background: transparent;
  color: var(--color-graphite);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-quick), color var(--transition-quick);
}

.quick-add-row:hover { border-color: var(--color-ink-soft); color: var(--color-ink-soft); }
.quick-add-row svg { width: 14px; height: 14px; flex-shrink: 0; }
.quick-add-row .kbd { margin-left: auto; }

/* ─── Task modal (add + edit) ───────────────────────────────────────── */
.tm-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding-top: 14vh;
  background: rgba(26, 24, 21, 0.28);
}
.tm-overlay[hidden] { display: none; }
/* a series editor opened on top of the task modal — gentle extra dim only */
.tm-overlay.is-stacked { z-index: 82; background: rgba(26, 24, 21, 0.12); }

.tm-card {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 2rem));
  /* Cap the modal so a long checklist doesn't push it past the viewport.
     The body (.tm-form) scrolls; the head + foot stay pinned. */
  max-height: calc(100vh - 16vh - 2rem);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(26, 24, 21, 0.45);
}
/* The card takes programmatic focus on open (so the dialog catches keyboard /
   screen-reader users) but isn't a click target — don't paint a focus ring. */
.tm-card:focus { outline: none; }
.tm-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-shrink: 0;
  padding: 1.25rem 1.375rem 0.75rem;
  border-bottom: 1px solid var(--color-fog);
  background: var(--color-white);
}
.tm-form {
  display: flex; flex-direction: column; gap: 0.875rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.375rem 1.125rem;
}

/* the title's completion circle makes it read as parent of the steps below */
.tm-title-row { display: flex; align-items: flex-start; gap: 12px; }
.tm-check {
  flex: 0 0 auto;
  margin-top: 5px;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-stone);
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--color-cream);
  cursor: pointer;
  transition: border-color var(--transition-quick), background var(--transition-quick);
}
.tm-check:hover { border-color: var(--color-ink); }
.tm-check svg { width: 11px; height: 11px; opacity: 0; transition: opacity .15s; }
.tm-check:focus-visible { box-shadow: 0 0 0 2px var(--color-accent-soft); }
.tm-title-row.is-complete .tm-check { background: var(--color-ink); border-color: var(--color-ink); }
.tm-title-row.is-complete .tm-check svg { opacity: 1; }
.tm-title-row.is-complete .tm-name { text-decoration: line-through; color: var(--color-stone); }

.tm-name {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  /* It's a <textarea> so the title can wrap to multiple lines; JS auto-grows it,
     so suppress the manual resize grip and the scrollbar that height would show. */
  display: block;
  resize: none;
  overflow: hidden;
}
.tm-name::placeholder { color: var(--color-stone); }
/* Outrank the global input:focus ring in base.css. */
.tm-card .tm-name:focus { background: transparent; border: 0; box-shadow: none; }

/* Lexxy rich-text note, styled like Basecamp's composer: no boxed border, just
   full-bleed hairlines above and below the toolbar. The editor breaks out of the
   .tm-form's 1.375rem horizontal padding so those rules run edge-to-edge, then
   the toolbar and content re-pad to that 1.375rem to line up with the title,
   checklist, and time fields. The toolbar buttons center a 1em icon in a wider
   hit box, so the toolbar pads less than the content to keep the icons visually
   aligned with the note text below. */
.tm-card lexxy-editor {
  /* One line at rest, grows with content. --lexxy-editor-rows drives Lexxy's
     content min-block-size (it defaults to 8lh); pin it to a single line. */
  --lexxy-editor-rows: 1lh;
  display: block;
  margin-inline: -1.375rem;
  border: 0;
  border-block-start: 1px solid var(--color-fog);
  border-radius: 0;
  background: transparent;
}
.tm-card lexxy-editor lexxy-toolbar {
  padding-inline: 0.72rem;
  border-block-end-color: var(--color-fog);
}

/* The toolbar stays hidden until you focus the field, so a saved note reads as
   plain prose. Lexxy nests <lexxy-toolbar> as the editor's first child and
   counts it as "inside" the editor for focus, so :focus-within keeps the bar up
   while you click a control — no flicker.

   It collapses with max-block-size (not display:none) so the space below opens
   smoothly instead of jumping; opacity + transform carry the visible fade (both
   GPU-composited). overflow flips to visible once shown so the toolbar's
   dropdown menus aren't clipped. */
.tm-card lexxy-editor > lexxy-toolbar {
  overflow: hidden;
  max-block-size: 0;
  padding-block: 0;
  border-block-end-width: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-block-size 0.18s ease, opacity 0.14s ease, transform 0.16s ease,
              padding-block 0.18s ease, border-block-end-width 0.18s ease;
}
.tm-card lexxy-editor:focus-within > lexxy-toolbar,
.tm-card .tm-desc-wrap.is-editing lexxy-editor > lexxy-toolbar {
  overflow: visible;
  max-block-size: 3rem;
  padding-block: 2px;
  border-block-end-width: 1px;
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .tm-card lexxy-editor > lexxy-toolbar { transition-duration: 0s; }
}

/* Read-at-rest preview of a saved note: rendered prose with live links. A click
   anywhere but a link drops into the editor (description-editor#edit). It bleeds
   to the card edges with the same top divider the editor shows, so entering edit
   mode doesn't shift the text. */
.tm-desc-preview {
  margin-inline: -1.375rem;
  padding: 0.55rem 1.375rem 0.7rem;
  border-block-start: 1px solid var(--color-fog);
  cursor: text;
}
.tm-desc-preview a { cursor: pointer; }
/* Lexxy sizes toolbar buttons as `2lh`, but <button> resolves `lh` from its UA
   `line-height: normal` while the dropdown <summary>s inherit the editor's 1.5,
   so the dropdown toggles render larger than the plain buttons. Pin one square
   size for both. Lexxy also fills each button with `--lexxy-color-canvas` at
   rest, which reads as a stray box on the toolbar (a different shade of black in
   dark mode) — make rest transparent and re-declare hover/pressed so this
   higher-specificity rule doesn't swallow them. */
.tm-card lexxy-editor .lexxy-editor__toolbar-button {
  block-size: 2.25rem;
  inline-size: 2.25rem;
  background: transparent;
}
.tm-card lexxy-editor .lexxy-editor__toolbar-button:hover:not([aria-disabled="true"]) {
  background: var(--color-fog);
}
.tm-card lexxy-editor .lexxy-editor__toolbar-button[aria-pressed="true"],
.tm-card lexxy-editor .lexxy-editor__toolbar-button:active:not([aria-disabled="true"]) {
  background: var(--color-mist);
}
.tm-card lexxy-editor .lexxy-editor__content { padding-inline: 1.375rem; }

/* Tagging the editor content `.lexxy-content` (see description_editor_controller)
   gives code blocks `overflow-x: auto`, which clips the absolutely-placed
   code-language picker. Let it overflow in the editor so the picker shows. */
.lexxy-editor__content :is(pre, code[data-language]) { overflow: visible; }

/* The code-language picker is a <select>; the app's global select padding
   (base.css) outranks Lexxy's zero-specificity :where() rule and clips the
   text in its fixed-height box. Give it a tidy, readable box. */
lexxy-editor .lexxy-code-language-picker {
  block-size: auto;
  padding: 0.2rem 1.4rem 0.2rem 0.55rem;
  font-size: 0.72rem;
  line-height: 1.3;
  background-color: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--border-radius-sm);
}
lexxy-editor .lexxy-code-language-picker:focus {
  box-shadow: none;
  border-color: var(--color-stone);
}

.tm-times {
  display: flex;
  align-items: flex-end;
  gap: 2.25rem;
  padding: 0.375rem 0 0.125rem;
}
.tm-time-field { display: flex; flex-direction: column; gap: 5px; }
.tm-time-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.tm-running {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 1rem;
  color: var(--color-accent);
  padding: 1px 0;
  font-feature-settings: 'tnum' 1;
}

/* the frame swap-targets Actual + timer; contents keeps them in the flex row */
.tm-times-frame { display: contents; }

.tm-timer {
  margin-left: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--color-mist);
  background: transparent;
  color: var(--color-ink-soft);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.tm-timer svg { width: 12px; height: 12px; }
.tm-timer:hover { border-color: var(--color-ink-soft); background: var(--color-cream-soft); }
.tm-timer.is-running {
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: var(--color-accent);
  background: var(--color-accent-tint);
}

/* Day picker — an inline trigger in the modal eyebrow opens a small popover
   (today + the next 6 days, an "other date" tile, and Backlog). */
.tm-eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.tm-eyebrow .tm-dot { color: var(--color-stone); }
.tm-day-trigger-wrap { position: relative; display: inline-flex; }
/* Resting: transparent, no border (a button's UA background would otherwise
   show). The filled background appears only on hover and while open. */
.tm-day-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--color-ink-soft);
  padding: 2px 5px; margin: -2px -1px; border-radius: 6px;
  border: 0; background: transparent; cursor: pointer;
  transition: background .12s, color .12s;
}
.tm-day-trigger:hover { background: var(--color-bone-deep); color: var(--color-ink); }
.tm-day-trigger svg { width: 9px; height: 9px; transform: rotate(90deg); opacity: 0.55; transition: transform .15s; flex: 0 0 auto; }
.tm-day-trigger-wrap.is-open .tm-day-trigger { background: var(--color-bone-deep); color: var(--color-ink); }
.tm-day-trigger-wrap.is-open .tm-day-trigger svg { transform: rotate(-90deg); opacity: 0.8; }

/* Fixed, not absolute: the modal card is overflow:hidden, which would clip an
   absolutely-positioned descendant. day_picker_controller#position places it
   (top/left) under the chip — same escape hatch as .ctx-menu / .time-pop. */
.tm-day-pop {
  position: fixed; z-index: 60;
  background: var(--color-white); border: 1px solid var(--color-mist); border-radius: 10px;
  padding: 8px; width: 224px;
  box-shadow: 0 18px 42px -22px rgba(26, 24, 21, 0.45);
  animation: tm-day-pop-in .13s ease-out both;
}
.tm-day-pop[hidden] { display: none; }
@keyframes tm-day-pop-in { from { transform: translateY(-5px); opacity: 0; } to { transform: none; opacity: 1; } }

.tm-day-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tmdp-day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 0; padding: 5px 0 6px;
  border: 1px solid var(--color-mist); border-radius: 6px;
  background: transparent; color: var(--color-graphite); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.tmdp-day:hover { border-color: var(--color-ink-soft); color: var(--color-ink); }
.tmdp-dow { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.tmdp-num { font-size: 13px; font-weight: 500; line-height: 1; }
.tmdp-day.is-today .tmdp-dow { color: var(--color-accent); }
.tmdp-day.is-sel { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }
.tmdp-day.is-sel .tmdp-dow { color: var(--color-white); opacity: 0.65; }

/* "Other date" tile: same footprint as a day, opening the native date picker.
   The real <input type=date> overlays it transparently so the OS picker anchors
   here; the calendar glyph is the affordance. */
.tmdp-more-cell { position: relative; display: flex; }
.tmdp-more { flex: 1; justify-content: center; color: var(--color-graphite); }
.tmdp-more svg { width: 16px; height: 16px; }
.tmdp-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none;
}

.tmdp-backlog {
  grid-column: 1 / -1; justify-content: center;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--color-mist); border-radius: 6px;
  background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-graphite);
  transition: border-color .12s, color .12s, background .12s;
}
.tmdp-backlog:hover { border-color: var(--color-ink-soft); color: var(--color-ink); }
.tmdp-backlog.is-sel { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }

.tm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  padding: 0.875rem 1.375rem 1.125rem;
  border-top: 1px solid var(--color-fog);
  background: var(--color-white);
}
.tm-foot-r { display: flex; gap: 0.5rem; align-items: center; }
.tm-delete-form { display: contents; }
.tm-delete {
  font-size: 0.78rem;
  color: var(--color-error);
  padding: 0.375rem 0.125rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tm-delete:hover { text-decoration: underline; }

/* ─── Task context menu (right-click) ───────────────────────────────── */
.ctx-menu {
  position: fixed;
  z-index: 100;
  min-width: 200px;
  padding: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: 8px;
  box-shadow: 0 16px 40px -20px rgba(26, 24, 21, 0.3);
}

.ctx-menu form { margin: 0; }

.ctx-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

.ctx-menu button:hover { background: var(--color-cream-soft); }
.ctx-menu button .kbd { margin-left: auto; }
.ctx-menu .danger { color: var(--color-error); }
.ctx-menu hr {
  border: 0;
  border-top: 1px solid var(--color-fog);
  margin: 4px 0;
}

/* ─── Toasts ────────────────────────────────────────────────────────── */
.toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 10px 18px;
  background: var(--color-ink);
  color: var(--color-bone);
  border-radius: var(--border-radius-pill);
  font-size: 0.8125rem;
  box-shadow: 0 20px 40px -20px rgba(26, 24, 21, 0.5);
  cursor: pointer;
  pointer-events: auto;
  animation: toast-in 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.toast.is-leaving { animation: toast-out 0.2s ease forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* ─── Timeline ──────────────────────────────────────────────────────── */
/* The grid renders hidden and the timeline controller reveals it once it has
   scrolled to the day's default view — otherwise the browser paints the grid at
   the top (midnight) and the controller's scroll is seen as a jump. Hidden, not
   removed, so it keeps its scroll height and the controller can position it. */
.tl-grid.is-initializing { visibility: hidden; }

.tl-grid {
  position: relative;
  padding-left: 5.25rem;
  /* 1× hour height. The zoom control overrides this (2× = 100px); every hour
     row and block is sized from it, so the grid is always exactly to scale. */
  --tl-hour-px: 48px;
  /* Smallest legible block, in minutes (Google-Calendar style): below this a
     block can't be told apart, so we floor it. 15 min at 1×, 10 min at 2×
     (the zoom control overrides this). A 5-min task therefore looks like a
     15-min one at 1× and a 10-min one at 2× — a deliberate readability call. */
  --tl-min-dur: 15;
}

.tl-hour {
  position: relative;
  height: var(--tl-hour-px);
  border-top: 1px solid var(--color-fog);
}

.tl-hour:last-child { border-bottom: 1px solid var(--color-fog); }

.tl-hour-label {
  position: absolute;
  left: -5.25rem;
  top: -0.45rem;
  width: 4rem;
  padding-right: 0.75rem;
  text-align: right;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.tl-hour .half {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed var(--color-fog);
  opacity: 0.5;
}

/* Quarter-hour ticks — only worth showing once zoomed in (2×). */
.tl-hour .q {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dotted var(--color-fog);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tl-hour .q1 { top: 25%; }
.tl-hour .q3 { top: 75%; }
.tl-grid[data-zoom="2"] .tl-hour .q { opacity: 0.4; }

/* The lazy block frame must not introduce a box — the blocks position against
   the grid, and the now-line/hour rows sit outside it. */
turbo-frame#day_blocks { display: contents; }

.tl-block {
  position: absolute;
  /* Inset past the 5.25rem hour-label gutter; split into columns on overlap. */
  left: calc(5.75rem + (100% - 6.25rem) * var(--b-col, 0) / var(--b-cols, 1));
  width: calc((100% - 6.25rem) / var(--b-cols, 1) - 5px);
  /* Exactly to scale: top and height come straight from the block's start and
     duration (in minutes), offset by the grid origin and scaled by --tl-hour-px,
     so every edge lands on the hour/quarter lines. Duration is floored to
     --tl-min-dur (a tiny task stays legible) and the height is clamped to the
     grid's end so a task running past midnight ends at the last line instead of
     bleeding into the pane padding. The 6px max is a final clickability safety. */
  top: calc((var(--b-start) - var(--tl-win-start)) * var(--tl-hour-px) / 60);
  height: max(6px, calc(
    min(
      max(var(--b-dur), var(--tl-min-dur)),
      var(--tl-win-end) - var(--b-start)
    ) * var(--tl-hour-px) / 60
  ));
  border-radius: var(--border-radius-base);
  background: var(--color-white);
  border: 1px solid var(--color-mist);
  border-left: 3px solid var(--color-ink);
  overflow: hidden;
  box-shadow: var(--box-shadow-thin);
  transition: box-shadow var(--transition-base);
  z-index: 2;
  /* A size container so the content (.b-body) can adapt to the block's own
     height — see the @container size tiers below. */
  container-type: size;
}

.tl-block:hover { box-shadow: var(--box-shadow-base); }

/* Bottom-edge grip: drag to set the block's planned time. The strip sits above
   the body so it wins the pointer (and is excluded from the move/click handlers),
   but its handle bar only shows on hover/resize so it doesn't clutter the grid. */
.tl-block .b-resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  cursor: ns-resize;
  touch-action: none;
  z-index: 3;
}
.tl-block .b-resize::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 1.5rem;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--color-stone);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.tl-block:hover .b-resize::after,
.tl-block.is-resizing .b-resize::after { opacity: 0.7; }
.tl-block.is-resizing { box-shadow: var(--box-shadow-base); z-index: 6; }

/* The content layer fills the block and is what the size queries restyle — a
   container can't query its own size to restyle itself, only its descendants. */
.tl-block .b-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.5rem 0.75rem;
}

.tl-block .b-time {
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: var(--color-graphite);
  white-space: nowrap;
}

.tl-block .b-name {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  color: var(--color-ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Size tiers ───────────────────────────────────────────────────────────
   As a block shrinks (short duration, or 1× zoom) its content degrades
   gracefully instead of blanking out. A zoom re-tiers every block for free.
   Order matters — smaller thresholds last, so they win. The full title stays
   in the block's `title` tooltip for the tiers that drop text.

   A size container queries its *content* box, so these thresholds are 2px below
   the intended block (border-box) heights of 46 / 24 / 10 — the block's 1px
   top+bottom borders make up the difference. */

/* short (block < 46px): time + title on one row */
@container (height < 44px) {
  .tl-block .b-body { flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; }
  .tl-block .b-time { flex-shrink: 0; }
  .tl-block .b-name { -webkit-line-clamp: 1; font-size: 0.78rem; }
}

/* compact (block < 24px): title only, one tiny line */
@container (height < 22px) {
  .tl-block .b-body { padding: 0 0.6875rem; }
  .tl-block .b-time { display: none; }
  .tl-block .b-name { font-size: 0.625rem; line-height: 1.05; }
  /* Too short for a grip without swallowing the whole block — keep it movable. */
  .tl-block .b-resize { display: none; }
}

/* sliver (block < 10px): just a bar — the left accent reads as the marker, title in tooltip */
@container (height < 8px) {
  .tl-block .b-body,
  .tl-block .b-timing { display: none; }
}

.tl-block.is-completed { border-left-color: var(--color-stone); }
.tl-block.is-completed .b-name {
  text-decoration: line-through;
  color: var(--color-stone);
  font-weight: var(--font-weight-regular);
}

/* now line — positioned from --now-min (set/ticked by now_line_controller),
   scaled like the blocks so it follows a zoom for free. */
.tl-now {
  position: absolute;
  left: 5.25rem;
  right: 0.5rem;
  top: calc((var(--now-min) - var(--tl-win-start)) * var(--tl-hour-px) / 60);
  border-top: 1px dashed var(--color-accent);
  opacity: 0.85;
  z-index: 5;
  pointer-events: none;
}

.tl-now::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ─── Drag affordances ─────────────────────────────────────────────── */
/* The floating ghost that follows the pointer during any drag (positioned via
   transform by the pointer_drag engine). Positioning + lift are shared here;
   each kind of drag supplies its own look through a modifier. */
.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  will-change: transform;
  opacity: 0.97;
  box-shadow: 0 20px 40px -16px rgba(26, 24, 21, 0.45);
  animation: drag-ghost-in 120ms ease;
}
@keyframes drag-ghost-in { from { opacity: 0; } }

/* Task drag: a compact pill showing just the title. */
.drag-ghost--pill {
  max-width: 18rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-white);
  border: 1px solid var(--color-ink);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Step drag: a clone of the row lifted onto a card surface. */
.drag-ghost--row {
  background: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--border-radius-base);
  padding: 2px 10px;
}

/* While any drag is in flight, lock the cursor and suppress text selection so a
   slipped pointer never paints a selection across the board. */
body.is-dragging-cursor,
body.is-dragging-cursor * {
  cursor: grabbing !important;
  user-select: none !important;
}

/* Rest cursor is pointer (a click opens the task); the grabbing cursor is
   reserved for an in-flight drag (body.is-dragging-cursor / .is-dragging-active
   below), so a task doesn't advertise a drag it isn't doing yet. */
.task { cursor: pointer; }
.tl-block { cursor: pointer; }
/* Pointer-driven drags need the browser to hand us the touch gesture rather
   than scrolling the page. */
.task,
.tl-block,
.bk-row,
.cl-grip { touch-action: none; }

.work.is-dragging-active .task,
.work.is-dragging-active .tl-block { cursor: grabbing; }

.task.is-dragging,
.tl-block.is-dragging { opacity: 0.4; }

.day-tab.is-drop-target { background: var(--color-accent-tint); }

/* Navigation links are buttons, not draggable content — stop the browser's
   native link/text drag (the ghost image + text selection) so they don't feel
   like loose elements. `draggable="false"` on the anchors handles the rest. */
.day-tab,
.nav-arrow,
.today-pill {
  -webkit-user-drag: none;
  user-select: none;
}

/* "Anytime today" reorder zone. While a drag is active it keeps a minimum
   height so the list stays a drop target even when empty. */
.work.is-dragging-active .anytime-list { min-height: 2.75rem; }

/* Once the placeholder is showing, the picked-up Anytime row collapses out so
   the placeholder reads as the task itself moving between rows. We wait for the
   placeholder (`.is-lifted`, set on dragover) rather than collapsing on pickup,
   which would make the list jump up before the drag image even appears. The
   class lands on the row wrapper (`.task-wrap`, normally display:contents), so
   `display:none` here also overrides that to hide the whole row. */
.task-wrap.is-lifted { display: none; }

/* The insertion slot that follows the cursor; rows reflow around it. */
.drop-placeholder {
  height: 2.75rem;
  margin: 0.25rem 0.75rem;
  border: 1.5px dashed var(--color-accent);
  border-radius: var(--border-radius-base);
  background: var(--color-accent-tint);
  pointer-events: none;
}

.tl-drop {
  position: absolute;
  /* Match the block area: inset past the hour-label gutter, not full width. */
  left: 5.75rem;
  right: 0.5rem;
  border-radius: var(--border-radius-base);
  border: 1.5px dashed var(--color-accent);
  background: var(--color-accent-tint);
  z-index: 4;
  pointer-events: none;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ─── Backlog peek shelf ───────────────────────────────────────────────
   A bottom pull-tab (eager count) that slides a drawer up from below. The
   drawer body is a lazy <turbo-frame> fetched from /backlog. Design handoff,
   mapped onto repo tokens. */
.bk-shelf {
  --bk-shelf-h: 58vh;
  --bk-shelf-min: 360px;
  --bk-shelf-max: 640px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  pointer-events: none; /* children opt back in */
  font-family: var(--font-sans);
}

/* the persistent pull tab */
.bk-tab {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem 0.5625rem;
  background: var(--color-white);
  border: 1px solid var(--color-mist);
  border-bottom: 0;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  color: var(--color-graphite);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: -0.005em;
  box-shadow: 0 -1px 0 var(--color-white), 0 -10px 24px -16px oklch(0.2 0 0 / 0.18);
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.15s, border-color 0.15s, background 0.15s;
}
.bk-tab:hover { color: var(--color-ink); border-color: var(--color-stone); }
.bk-tab-chev {
  display: inline-flex;
  transform: rotate(-90deg);
  transition: transform 0.28s ease;
  color: var(--color-stone);
}
.bk-tab-chev svg { width: 10px; height: 10px; }
.bk-shelf.is-open .bk-tab-chev { transform: rotate(90deg); }
.bk-tab-count {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--color-ink);
  background: var(--color-cream-soft);
  border: 1px solid var(--color-fog);
  border-radius: var(--border-radius-pill);
  padding: 1px 7px;
  letter-spacing: 0;
}
.bk-tab-label {
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}
.bk-tab-sep { color: var(--color-stone); }
.bk-tab-kbd {
  font-size: 0.625rem;
  color: var(--color-graphite);
  border: 1px solid var(--color-mist);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--color-bone);
  line-height: 1;
}

/* the drawer body — slides up from below */
.bk-shelf-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(var(--bk-shelf-min), var(--bk-shelf-h), var(--bk-shelf-max));
  background: var(--color-white);
  border-top: 1px solid var(--color-mist);
  box-shadow: 0 -20px 50px -30px oklch(0.2 0.01 60 / 0.35);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}
.bk-shelf.is-open .bk-shelf-body { transform: translateY(0); }
.bk-shelf.is-open .bk-tab {
  transform: translateX(-50%) translateY(calc(clamp(var(--bk-shelf-min), var(--bk-shelf-h), var(--bk-shelf-max)) * -1));
}

/* soft wash across the top, like the surface of a drawer */
.bk-shelf-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 50% at 50% 0%, var(--hero-glow) 0%, transparent 55%);
  pointer-events: none;
}

.bk-shelf-head {
  position: relative;
  padding: 1.125rem 1.75rem 0.875rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--color-fog);
}
.bk-head-l {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
}
.bk-head-count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  white-space: nowrap;
}
.bk-head-r {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.bk-hint {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--color-graphite);
  white-space: nowrap;
}
.bk-shelf.is-dropmode .bk-hint { display: none; }
.bk-close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-graphite);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bk-close:hover { background: var(--color-cream-soft); color: var(--color-ink); border-color: var(--color-fog); }

/* the lazy frame fills the remaining height; its inner list scrolls */
.bk-frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.bk-shelf.is-dropmode .bk-frame { display: none; }

.bk-list-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-mist) transparent;
}
.bk-list {
  max-width: 920px;
  margin: 0 auto;
  padding: 0.625rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
}

/* a row — same visual language as the working-area .task row */
.bk-row {
  display: grid;
  grid-template-columns: 18px 14px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0.625rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.bk-row + .bk-row {
  border-top: 1px solid var(--color-fog);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.bk-row:hover {
  background: var(--color-bone);
  border-color: var(--color-fog);
}
.bk-row:hover + .bk-row { border-top-color: transparent; }
.bk-row.is-dragging { cursor: grabbing; opacity: 0.4; }

.bk-row-handle {
  color: var(--color-stone);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s;
}
.bk-row:hover .bk-row-handle { opacity: 0.7; }

.bk-row-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-stone);
}
.bk-row.is-promoted .bk-row-flag { color: var(--color-accent); }
.bk-row-bullet {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.bk-row-name {
  font-size: 0.875rem;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-row-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
}
.bk-row-dur {
  font-size: 0.6875rem;
  color: var(--color-graphite);
  min-width: 32px;
  text-align: right;
}
.bk-row-kept {
  font-size: 0.625rem;
  color: var(--color-ink-soft);
  background: var(--color-cream-soft);
  border-radius: var(--border-radius-pill);
  padding: 2px 8px;
}
.bk-row-age {
  font-size: 0.6875rem;
  color: var(--color-graphite);
  min-width: 96px;
  text-align: right;
}

/* stale: sat in the backlog past the stale window */
.bk-row.is-stale .bk-row-name { color: var(--color-ink-soft); }
.bk-row.is-stale .bk-row-age { color: oklch(0.5 0.1 50); font-weight: 500; }
[data-palette="dark"] .bk-row.is-stale .bk-row-age { color: oklch(0.72 0.1 50); }
.bk-row.is-stale::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(180deg, oklch(0.55 0.1 50) 0 3px, transparent 3px 6px);
  border-radius: 1px;
}
[data-palette="dark"] .bk-row.is-stale::before {
  background: repeating-linear-gradient(180deg, oklch(0.7 0.1 50) 0 3px, transparent 3px 6px);
}
.bk-row.is-promoted::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}

.bk-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--color-graphite);
}
.bk-empty-mark { color: var(--color-stone); font-size: 1.375rem; line-height: 0; }

/* drop-mode banner — replaces the list while dragging a day-assigned task */
.bk-drop-banner {
  display: none;
  flex: 1;
  margin: 1.125rem 1.75rem 1.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 1.5px dashed var(--color-mist);
  border-radius: 10px;
  background: var(--color-bone);
  color: var(--color-graphite);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bk-shelf.is-dropmode .bk-drop-banner { display: flex; }
.bk-shelf.is-over .bk-drop-banner {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

/* tab emphasis while armed as a drop target / in drop mode / locked open */
.bk-shelf.is-droparmed .bk-tab,
.bk-shelf.is-dropmode .bk-tab { border-color: var(--color-accent-soft); color: var(--color-accent); }
.bk-shelf.is-droparmed .bk-tab-count,
.bk-shelf.is-dropmode .bk-tab-count {
  background: var(--color-accent-tint);
  border-color: var(--color-accent-soft);
  color: var(--color-accent);
}
.bk-shelf.is-locked .bk-tab { background: var(--color-ink); color: var(--color-bone); border-color: var(--color-ink); }
.bk-shelf.is-locked .bk-tab-count { background: oklch(0 0 0 / 0.35); color: var(--color-bone); border-color: transparent; }
.bk-shelf.is-locked .bk-tab-label { color: var(--color-bone); }
.bk-shelf.is-locked .bk-tab-chev { color: var(--color-bone); opacity: 0.7; }
.bk-shelf.is-locked .bk-tab-sep { color: oklch(1 0 0 / 0.35); }
.bk-shelf.is-locked .bk-tab-kbd { background: oklch(0 0 0 / 0.35); border-color: transparent; color: var(--color-bone); }
/* the locked pill inverts to a light surface in dark mode */
[data-palette="dark"] .bk-shelf.is-locked .bk-tab-sep { color: oklch(0 0 0 / 0.35); }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .work-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .list-pane,
  .tl-pane { overflow-y: visible; }
  .tl-pane { border-top: 1px solid var(--color-fog); }
  .hero-row { padding: 1.25rem 1.25rem 1rem; }
  .list-pane { padding: 1.25rem 1.25rem 3rem; }
  .bk-hint { display: none; }
}

/* ============================================================
   Planned / Actual time + timer
   ============================================================ */

/* The pulsing dot shown wherever a timer is live. */
.tt-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: 0 0 auto;
  animation: tt-pulse 1.7s ease-out infinite;
}
@keyframes tt-pulse {
  0%   { box-shadow: 0 0 0 0 var(--color-accent-tint); }
  70%  { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* "Actual" badge inside a row's time chip: "→ 45m", or a live stopwatch. */
.task .t-time .t-actual {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-feature-settings: "tnum" 1;
}
.task .t-time .t-actual .t-arrow { color: var(--color-stone); }
.task .t-time .t-actual.is-running { color: var(--color-accent); }
.task.is-completed .t-time .t-actual { color: var(--color-stone); }

/* Name opens the detail modal; a dot marks a task that carries a note. */
.task .t-name { cursor: pointer; }
.task .t-note-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--color-stone);
  vertical-align: middle;
}

/* Right-side cluster on a row — the timer control lives here. */
.task .t-right {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

/* button_to wraps a form; let the button drop into the flex row directly. */
.t-timer-form { display: contents; }

.t-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--color-fog);
  background: var(--color-white);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-quick), border-color var(--transition-quick),
              color var(--transition-quick), background var(--transition-quick);
}
.task:hover .t-timer { opacity: 1; }
.t-timer:hover { border-color: var(--color-ink-soft); color: var(--color-ink); }
.t-timer svg { width: 11px; height: 11px; }
.t-timer.is-running {
  opacity: 1;
  border-color: var(--color-accent-soft);
  color: var(--color-accent);
  background: var(--color-accent-tint);
}
.t-timer .tt-clock { font-size: 11px; letter-spacing: 0.02em; }
.t-timer .tt-pulse { width: 6px; height: 6px; }

/* Timeline block while its timer runs. */
.tl-block.is-timing {
  border-left-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-tint) inset, var(--box-shadow-base);
}
.tl-block.is-timing .b-time { color: var(--color-accent); }
.tl-block .b-timing {
  position: absolute;
  top: 9px;
  right: 11px;
}

/* Global "now timing" pill in the topbar. */
.topbar__timer { display: inline-flex; }
.rp-stop-form { display: contents; }
.run-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 5px 0 12px;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-soft);
}
.run-pill .tt-pulse { width: 6px; height: 6px; }
.run-pill .rp-name {
  font-size: 0.78rem;
  color: var(--color-ink);
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-pill .rp-time {
  font-size: 0.75rem;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}
.run-pill .rp-stop {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}
.run-pill .rp-stop:hover { background: var(--color-white); }
.run-pill .rp-stop svg { width: 11px; height: 11px; }

/* ----- inline time popover (Planned / Actual) ----- */
.task .t-time { border-radius: var(--border-radius-sm); }
.task .t-time:hover .clock { color: var(--color-ink); }

/* `display: flex` below would otherwise override the `hidden` attribute. */
.time-pop[hidden] { display: none; }
.time-pop {
  position: fixed;
  z-index: 90;
  width: 300px;
  background: var(--color-white);
  border: 1px solid var(--color-fog);
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-lift);
  padding: 0.8rem 0.875rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.tp-head { margin-bottom: 1px; }
.tp-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tp-form { display: flex; flex-direction: column; gap: 0.625rem; }
.tp-field { display: flex; flex-direction: column; gap: 0.5rem; }
.tp-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.tp-hr { border: 0; border-top: 1px solid var(--color-bone); margin: 1px 0; width: 100%; }
.tp-running {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  color: var(--color-accent);
  padding: 4px 0;
}
.tp-note { font-size: 0.72rem; color: var(--color-text-muted); line-height: 1.45; }

/* ----- shared TimeField (input + presets + More menu) ----- */
.timefield { display: flex; flex-direction: column; gap: 0.5rem; }
.tf-input-wrap {
  display: inline-flex;
  align-items: center;
  width: 7rem;
  border: 1px solid var(--color-mist);
  border-radius: var(--border-radius-sm);
  padding: 0.4rem 0.7rem;
  background: var(--color-white);
}
.tf-input-wrap:focus-within { border-color: var(--color-ink-soft); }
/* Fully reset the bare input: the global `input` rule in base.css adds a
   border, radius, padding, and a focus-ring box-shadow that would otherwise
   show as a nested box inside the wrap. */
.tf-input,
.tf-input:focus {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.8rem;
  color: var(--color-ink);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.tf-input::placeholder { color: var(--color-stone); }
.tf-presets { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tf-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  white-space: nowrap;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--color-fog);
  border-radius: var(--border-radius-pill);
  color: var(--color-text-muted);
  cursor: pointer;
  background: transparent;
  transition: border-color var(--transition-quick), color var(--transition-quick), background var(--transition-quick);
}
.tf-chip:hover { border-color: var(--color-ink-soft); color: var(--color-ink); }
.tf-chip.is-on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }
.tf-more-wrap { position: relative; display: inline-flex; }
.tf-more { display: inline-flex; align-items: center; gap: 5px; color: var(--color-ink-soft); }
.tf-more .tf-caret { font-size: 0.55rem; line-height: 1; opacity: 0.7; }
/* `display: grid` below would otherwise override the `hidden` attribute. */
.tf-menu[hidden] { display: none; }
.tf-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 95;
  background: var(--color-white);
  border: 1px solid var(--color-fog);
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-lift);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 12rem;
}
.tf-menu-item {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.45rem 0;
  border-radius: var(--border-radius-sm);
  color: var(--color-ink-soft);
  cursor: pointer;
  border: 0;
  background: transparent;
  transition: background var(--transition-quick), color var(--transition-quick);
}
.tf-menu-item:hover { background: var(--color-bone); color: var(--color-ink); }
.tf-menu-item.is-on { background: var(--color-ink); color: var(--color-white); }

/* ----- minimal duration field (modal variant): bare value, presets on focus ----- */
.mtf { position: relative; }
/* Triple selector outranks base.css's input/input:hover/input:focus chrome. */
.mtf-input,
.mtf-input:hover,
.mtf-input:focus {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  width: 76px;
  padding: 1px 0;
  font-size: 1rem;
  color: var(--color-ink);
  font-feature-settings: 'tnum' 1;
  transition: border-color .12s, color .12s;
}
.mtf-input::placeholder { color: var(--color-stone); }
.mtf-input:hover { border-bottom-color: var(--color-mist); }
.mtf.is-focused .mtf-input { border-bottom-color: var(--color-accent-soft); }

/* `display: flex` below would otherwise override the `hidden` attribute. */
.mtf-presets[hidden] { display: none; }
.mtf-presets {
  position: absolute;
  bottom: calc(100% + 9px);
  left: -6px;
  z-index: 6;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  width: max-content;
  max-width: 250px;
  padding: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--border-radius-base);
  box-shadow: 0 14px 30px -18px rgba(26, 24, 21, 0.45);
}
.mtf-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  padding: 4px 9px;
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--color-mist);
  background: transparent;
  color: var(--color-graphite);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.mtf-chip:hover { color: var(--color-ink); border-color: var(--color-ink-soft); }
.mtf-chip.is-on {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  background: var(--color-accent-tint);
}
.mtf-clear { color: var(--color-stone); border-style: dashed; }
.mtf-clear:hover { color: var(--color-ink-soft); }

/* popover timer button */
.tp-timer-form { display: contents; }
.tp-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.55rem;
  border-radius: var(--border-radius-base);
  border: 1px solid var(--color-fog);
  color: var(--color-ink-soft);
  font-size: 0.78rem;
  cursor: pointer;
  background: transparent;
  transition: border-color var(--transition-quick), background var(--transition-quick), color var(--transition-quick);
}
.tp-timer svg { width: 12px; height: 12px; }
.tp-timer:hover { border-color: var(--color-ink-soft); background: var(--color-bone); }
.tp-timer.is-running {
  border-color: var(--color-accent-soft);
  color: var(--color-accent);
  background: var(--color-accent-tint);
}

/* ─── Task wrap + checklist (Phase 2a) ─────────────────────────────────
 * The .task-wrap groups a row with its inline checklist panel; the panel
 * is hidden until the pill toggles `.is-checklist-open` on the wrap.
 * Translated from docs/design/project/styles.css §checklist into repo tokens.
 *
 * display:contents is load-bearing for drag-to-reorder: it makes the wrap
 * itself box-less so the `.task` lays out as if it were a direct child of
 * `.anytime-list`, while in the DOM it stays a grandchild. working_drag
 * relies on the wrap being the list's actual row container (it inserts the
 * drop placeholder before the wrap and moves the wrap on drop). If you change
 * this to `block`/`flex` or unwrap the row, update working_drag_controller.js
 * (`#rowIn`/`#rowAfter`) or the placeholder reorder breaks silently.
 */
.task-wrap { display: contents; }

/* keep the name text ellipsised now that it shares the row with the pill */
.task .t-name .t-name-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* progress toggle on the row */
.t-check-toggle-frame { display: contents; }
.t-check-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  flex: 0 0 auto;
  padding: 1px 7px 1px 4px;
  border: 1px solid var(--color-mist);
  border-radius: var(--border-radius-pill);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em;
  color: var(--color-graphite);
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-quick), border-color var(--transition-quick), background var(--transition-quick);
}
.t-check-toggle:hover { color: var(--color-ink-soft); border-color: var(--color-ink-soft); }
.t-check-toggle svg { width: 10px; height: 10px; transition: transform .15s ease; }
.task-wrap.is-checklist-open .t-check-toggle svg { transform: rotate(90deg); }
.t-check-toggle.is-complete {
  color: var(--color-accent);
  border-color: var(--color-accent-soft);
  background: var(--color-accent-tint);
}
.task.is-completed .t-check-toggle {
  color: var(--color-graphite);
  border-color: var(--color-fog);
  background: transparent;
}

/* inline panel under the row — hidden until the pill toggles the wrap open.
 * When the task has no items the pill never renders, so the panel just stays
 * in its default hidden state. */
.t-checklist-panel {
  display: none;
  margin: -2px 0 6px 46px;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--color-fog);
  animation: clOpen .14s ease;
}
.task-wrap.is-checklist-open .t-checklist-panel { display: block; }
@keyframes clOpen {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .t-checklist-panel { animation: none; }
  .t-check-toggle svg { transition: none; }
}

/* the editor itself (shared row + modal) */
.checklist { display: flex; flex-direction: column; gap: 1px; }

.cl-item {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
  position: relative;
}
/* The dragged row becomes the placeholder gap: its content is hidden and a
   dashed slot marks where it will land, so the list height never jumps. */
.cl-item.is-placeholder > * { visibility: hidden; }
.cl-item.is-placeholder::after {
  content: ''; position: absolute; inset: 1px 0 1px 20px;
  border: 1.5px dashed var(--color-accent-soft);
  border-radius: var(--border-radius-sm);
  background: var(--color-accent-tint);
}

.cl-grip {
  flex: 0 0 auto; width: 14px; align-self: stretch;
  display: grid; place-items: center;
  color: var(--color-stone); cursor: grab;
  opacity: 0; transition: opacity .12s;
}
.cl-grip svg { width: 11px; height: 11px; }
.cl-item:hover .cl-grip,
.cl-item:focus-within .cl-grip,
.cl-grip:focus-visible { opacity: 0.7; }
.cl-grip:focus-visible {
  opacity: 1; border-radius: var(--border-radius-sm);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.cl-grip:active { cursor: grabbing; }

.cl-box {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-stone);
  background: transparent;
  display: grid; place-items: center;
  color: var(--color-cream);
  cursor: pointer;
  transition: border-color var(--transition-quick), background var(--transition-quick);
}
.cl-box:hover { border-color: var(--color-ink); }
.cl-box svg { width: 9px; height: 9px; opacity: 0; transition: opacity .12s; }
.cl-item.is-done .cl-box { background: var(--color-accent); border-color: var(--color-accent); }
.cl-item.is-done .cl-box svg { opacity: 1; color: var(--color-cream); }

.cl-text {
  background: transparent; border: 0; outline: 0;
  font-size: 13px; color: var(--color-ink-soft);
  padding: 2px 4px; border-radius: var(--border-radius-sm);
  min-width: 0;
  font-family: var(--font-sans);
}
/* display mode hugs its content so the delete X sits right beside it
 * (the edit input below grows wide instead — see .cl-item.is-editing). */
.cl-text.cl-display {
  flex: 0 1 auto;
  cursor: text;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
/* cream-soft (not bone-deep) is the app's sunken/hover surface — matches the
 * design's --paper-sunk and stays consistent with ctx-menu/topbar hovers.
 * bone-deep read too dark against the bone page. */
.cl-text.cl-display:hover { background: var(--color-cream-soft); }
.cl-text.is-input { flex: 1 1 auto; }
.cl-text.is-input:focus { background: var(--color-cream-soft); }
/* base.css styles every <input> with a border + a 3px box-shadow focus ring,
 * and its :hover/:focus rules outrank the plain `.cl-text` class. Strip that
 * chrome so checklist fields stay flat — just the sunk fill, no ring. */
.cl-text:hover,
.cl-text:focus { border: 0; box-shadow: none; }

/* Swap display ↔ input via a class on the row, not the `hidden` attribute on
 * a wrapping <form> (we removed the form to keep the editor nestable inside
 * the task modal's <form>). Default state: display visible, input hidden. */
.cl-edit-input { display: none; }
.cl-item.is-editing .cl-display { display: none; }
.cl-item.is-editing .cl-edit-input { display: block; flex: 1 1 auto; }
.cl-text::placeholder { color: var(--color-stone); }
/* graphite (not stone) keeps completed steps muted while clearing WCAG AA
 * contrast on the cream surface; line-through still signals doneness. */
.cl-item.is-done .cl-text { color: var(--color-graphite); text-decoration: line-through; }

.cl-link {
  color: var(--color-accent);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--color-accent-soft);
  cursor: pointer;
}
.cl-link:hover { text-decoration-thickness: 2px; }
.cl-item.is-done .cl-link { color: var(--color-stone); text-decoration-color: var(--color-stone); }

.cl-del {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-stone); opacity: 0;
  transition: opacity .12s, color .12s;
}
.cl-del svg { width: 10px; height: 10px; }
.cl-item:hover .cl-del,
.cl-item:focus-within .cl-del,
.cl-del:focus-visible { opacity: 1; }
.cl-del:hover { color: var(--color-error); }

/* Keyboard focus indicators. The app removes outlines globally
 * (base.css *:focus-visible), so surface focus the same way hover does —
 * a background tint for the editable text, a soft ring for the icon buttons. */
.cl-text.cl-display:focus-visible { background: var(--color-cream-soft); }
.cl-box:focus-visible,
.cl-del:focus-visible {
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.cl-del:focus-visible { border-radius: var(--border-radius-sm); }

.cl-add {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0 3px 20px;
  position: relative;
  margin: 0;
}
.cl-add-glyph {
  flex: 0 0 auto; width: 15px;
  display: grid; place-items: center;
  color: var(--color-stone);
}
.cl-add-glyph svg { width: 11px; height: 11px; }
.cl-add .cl-text { flex: 1 1 auto; }
.cl-add:focus-within .cl-add-glyph { color: var(--color-ink-soft); }

.cl-nudge {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; margin-top: 6px;
  padding: 5px 11px;
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--border-radius-pill);
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition-quick);
}
.cl-nudge svg { width: 11px; height: 11px; }
.cl-nudge:hover { background: var(--color-accent-soft); color: var(--color-cream); }

/* checklist nested under the task title — no label, every circle's center on
   the title circle's 10px gutter (16px box + 2px pad → 10px; the 20px title
   circle centers at 10px). */
.tm-checklist .checklist { gap: 1px; }
.tm-checklist .cl-text { font-size: 13.5px; }
/* grip floats into the left margin on hover so it doesn't push the circles in.
   It stays faintly visible at rest here (there's no row hover affordance in the
   modal, so an invisible handle is hard to find). */
.tm-checklist .cl-grip { position: absolute; left: -20px; width: 16px; opacity: 0.25; }
.tm-checklist .cl-item { padding-left: 2px; }
.tm-checklist .cl-add { padding-left: 1px; }
.tm-checklist .cl-item.is-placeholder::after { inset: 1px 0 1px 2px; }

/* ─── Recurring tasks: manager ──────────────────────────────────────── */
/* Repo tokens stand in for the design's --paper/--ink/--hair/--accent scale:
   bone = page, cream = lifted surface, cream-soft = sunken, mist/fog = hairs.
   The manager renders inside the Settings panel; its full-page chrome moved to
   the Settings screen, so .rec-eyebrow/.rec-title below are the shared mode-screen
   heading Settings reuses. */
.rec-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.rec-title { font-family: var(--font-display); font-size: 40px; letter-spacing: -0.025em; line-height: 1; font-weight: var(--font-weight-light); }
.rec-title em { color: var(--color-stone); font-style: italic; }

.rec-group-label { display: flex; align-items: center; gap: 12px; margin: 24px 2px 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-graphite); }
.rec-group-label .lbl-line { flex: 1; height: 1px; background: var(--color-fog); }
.rec-group-label .mono { color: var(--color-stone); font-family: var(--font-mono); }

.rec-list { display: flex; flex-direction: column; gap: 8px; }
.rec-row { display: flex; align-items: center; gap: 16px; background: var(--color-cream); border: 1px solid var(--color-fog); border-radius: var(--border-radius-lg); padding: 4px 16px 4px 4px; transition: border-color var(--transition-quick), box-shadow var(--transition-quick); }
.rec-row:hover { border-color: var(--color-mist); box-shadow: var(--box-shadow-base); }
.rec-row.is-paused { background: transparent; }
.rec-row.is-paused .rec-row-name { color: var(--color-graphite); }
.rec-row.is-paused .rec-row-meta { opacity: 0.6; }

.rec-row-main { flex: 1; min-width: 0; text-align: left; padding: 14px 12px; border-radius: var(--border-radius-base); background: transparent; border: 0; cursor: pointer; }
.rec-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rec-row-name { font-size: 15.5px; color: var(--color-ink); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--color-graphite); }
.rec-row-meta > span { white-space: nowrap; }
.rec-row-meta .rec-rule { display: inline-flex; align-items: center; gap: 5px; color: var(--color-ink-soft); }
.rec-row-meta .rec-rule svg { width: 11px; height: 11px; color: var(--color-accent); flex: 0 0 auto; }
.rec-row-meta .dot { color: var(--color-stone); }

.rec-row-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.rec-next { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-graphite); white-space: nowrap; }
.rec-next.is-paused { color: var(--color-stone); }
.rec-edit { padding: 6px 14px; border: 1px solid var(--color-mist); border-radius: var(--border-radius-pill); font-size: 12px; color: var(--color-ink-soft); background: transparent; cursor: pointer; }
.rec-edit:hover { border-color: var(--color-ink-soft); background: var(--color-cream-soft); }

.rec-switch-form { display: contents; }
.rec-switch { width: 34px; height: 20px; border-radius: 999px; flex: 0 0 auto; background: var(--color-cream-soft); border: 1px solid var(--color-mist); position: relative; cursor: pointer; padding: 0; transition: background var(--transition-quick), border-color var(--transition-quick); }
.rec-switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-stone); transition: left var(--transition-quick), background var(--transition-quick); }
.rec-switch.is-on { background: var(--color-accent); border-color: var(--color-accent); }
.rec-switch.is-on .rec-switch-knob { left: 16px; background: var(--color-cream); }

/* Keyboard focus for the manager's button-based controls. base.css strips
 * outlines globally, so surface focus with a soft ring like the checklist does. */
.rec-row-main:focus-visible,
.rec-edit:focus-visible,
.rec-switch:focus-visible {
  box-shadow: 0 0 0 2px var(--color-accent-soft);
  border-radius: var(--border-radius-base);
}

.rec-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 64px 0; color: var(--color-graphite); }
.rec-empty svg { width: 20px; height: 20px; color: var(--color-stone); }
.rec-empty p { font-size: 14px; }

/* ─── Recurring tasks: series editor + Repeat builder ───────────────── */
.rec-editor .rec-field { display: flex; flex-direction: column; gap: 8px; }
/* quiet inline confirmation line under the Repeat builder — no box */
.rec-summary { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--color-graphite); padding: 2px 0; }
.rec-summary svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--color-accent); opacity: 0.8; }

/* "‹ Back" in the head when the editor is stacked over the task modal */
.tm-head-l { display: flex; align-items: center; gap: 12px; }
.tm-back {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-graphite);
  padding: 3px 9px 3px 6px;
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--color-mist);
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-quick), border-color var(--transition-quick), background var(--transition-quick);
}
.tm-back svg { width: 11px; height: 11px; }
.tm-back:hover { color: var(--color-ink); border-color: var(--color-ink-soft); background: var(--color-cream-soft); }

/* minimalist clock field — matches .mtf-input; standalone, so it carries its
   own focus underline (no .mtf.is-focused wrapper here) */
.mtf-input.rec-clock-mini,
.mtf-input.rec-clock-mini:hover,
.mtf-input.rec-clock-mini:focus { width: 92px; }
.mtf-input.rec-clock-mini:hover { border-bottom-color: var(--color-mist); }
.mtf-input.rec-clock-mini:focus { border-bottom-color: var(--color-accent-soft); }

.rec-checklist .rec-cl-bullet { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--color-stone); margin: 0 5px; }
/* grip floats into the left margin (like the task modal) so it doesn't shift
   the bullets; faintly visible at rest since rows have no hover affordance. */
.rec-checklist .cl-grip { position: absolute; left: -18px; width: 16px; opacity: 0.25; }
.rec-checklist .cl-item.is-placeholder::after { inset: 1px 0; }
/* checklist footnote under the template steps */
.rec-cl-note { display: block; margin: 4px 0 0 2px; font-size: 11px; color: var(--color-stone); }

.repeat { display: flex; flex-direction: column; gap: 12px; background: var(--color-bone); border: 1px solid var(--color-fog); border-radius: var(--border-radius-base); padding: 14px; }
.repeat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The author `display: flex` on .repeat-row / .repeat-monthly outranks the UA
   `[hidden] { display: none }`, so the per-frequency sections wouldn't hide when
   the builder sets `hidden`. Make hidden win back (same fix as .tm-foot[hidden]). */
.repeat-row[hidden], .repeat-monthly[hidden] { display: none; }
.repeat-lbl { font-size: 13px; color: var(--color-ink-soft); }
.repeat-num { width: 52px; text-align: center; background: var(--color-cream); border: 1px solid var(--color-mist); border-radius: var(--border-radius-sm); padding: 6px; font-size: 13px; color: var(--color-ink); outline: 0; font-family: var(--font-mono); }
.repeat-num:focus { border-color: var(--color-ink-soft); box-shadow: none; }
.repeat-num:disabled { opacity: 0.4; }

.repeat-chips { display: flex; gap: 5px; }
.repeat-chip { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-mist); background: transparent; font-size: 12px; color: var(--color-graphite); font-family: var(--font-mono); cursor: pointer; transition: background var(--transition-quick), color var(--transition-quick), border-color var(--transition-quick); }
.repeat-chip:hover { border-color: var(--color-ink-soft); color: var(--color-ink-soft); }
.repeat-chip.is-on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-cream); }
.repeat-chip:focus-visible { border-color: var(--color-ink-soft); box-shadow: 0 0 0 2px var(--color-accent-soft); }

.repeat-monthly { display: flex; flex-direction: column; gap: 10px; }
.repeat-opt { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-wrap: wrap; }
.repeat-opt input[type="radio"] { accent-color: var(--color-accent); width: 15px; height: 15px; }
/* mute the inputs of whichever option isn't selected, so the active choice reads
   clearly (covers both monthly mode and the end condition) */
.repeat-opt:not(:has(input[type="radio"]:checked)) :is(.repeat-num, .repeat-date, .repeat-select) { opacity: 0.45; }
.repeat-select { background: var(--color-cream); border: 1px solid var(--color-mist); border-radius: var(--border-radius-sm); padding: 6px 8px; font-size: 13px; color: var(--color-ink); outline: 0; font-family: var(--font-sans); cursor: pointer; }
.repeat-select:focus { border-color: var(--color-ink-soft); box-shadow: none; }
.repeat-select:disabled { opacity: 0.4; }
.repeat-ends { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px dashed var(--color-fog); }
.repeat-ends legend { padding: 0; margin: 0; }
.repeat-date { background: var(--color-cream); border: 1px solid var(--color-mist); border-radius: var(--border-radius-sm); padding: 5px 8px; font-size: 12.5px; color: var(--color-ink); outline: 0; font-family: var(--font-mono); }
.repeat-date:focus { border-color: var(--color-ink-soft); box-shadow: none; }

/* edit-scope confirm (replaces the footer). The `.tm-foot { display: flex }`
   rule outranks the UA `[hidden] { display: none }`, so make hidden win back —
   covers both the foot and the confirm when series-editor toggles them. */
.tm-foot[hidden] { display: none; }
.rec-confirm { flex-direction: column; align-items: stretch; gap: 10px; }
.rec-confirm-q { font-size: 13.5px; color: var(--color-ink-soft); line-height: 1.5; }
.rec-confirm-actions { display: flex; gap: 8px; align-items: center; }
.rec-confirm-cancel { font-size: 12px; color: var(--color-graphite); margin-left: auto; background: transparent; border: 0; cursor: pointer; }
.rec-confirm-cancel:hover { color: var(--color-ink); text-decoration: underline; }

/* ─── Recurring: glyph + banner + context-menu links ────────────────── */
.t-recur { display: inline-flex; align-items: center; color: var(--color-accent); flex: 0 0 auto; }
.t-recur svg { width: 12px; height: 12px; }

/* the whole banner is one button — sunken at rest, accent on hover */
.tm-recur-banner {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 9px 12px;
  border-radius: var(--border-radius-base);
  background: var(--color-cream-soft);
  border: 1px solid var(--color-fog);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--transition-quick), background var(--transition-quick);
}
.tm-recur-banner:hover {
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  background: var(--color-accent-tint);
}
.tm-recur-banner:focus-visible { box-shadow: 0 0 0 2px var(--color-accent-soft); }
.tm-recur-banner > svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--color-accent); }
.tm-recur-text { flex: 1; min-width: 0; color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-recur-edit { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; }
.tm-recur-edit svg { width: 11px; height: 11px; }
.tm-recur-banner:hover .tm-recur-edit { text-decoration: underline; }

.ctx-menu a.ctx-link { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; width: 100%; padding: 7px 10px; border-radius: 4px; color: var(--color-ink); font-family: var(--font-sans); font-size: 0.8125rem; text-decoration: none; }
.ctx-menu a.ctx-link:hover { background: var(--color-cream-soft); }

/* ============================================================
   Google Calendar — timeline header menu, ghost blocks, gcal task
   ============================================================ */

.tl-head-r { display: inline-flex; align-items: center; gap: 0.5rem; }
.tl-head-r form.button_to { display: contents; }
/* refresh + calendar menu share one Turbo-replaceable wrapper; keep them spaced
   as if they were direct children of .tl-head-r. */
.tl-cal { display: inline-flex; align-items: center; gap: 0.5rem; }

/* manual calendar refresh button */
.tl-refresh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; padding: 0; border: 0; cursor: pointer;
  background: transparent; border-radius: var(--border-radius-pill);
  color: var(--color-graphite);
  transition: background var(--transition-quick), color var(--transition-quick);
}
.tl-refresh:hover { background: var(--color-cream); color: var(--color-ink); }
.tl-refresh svg { width: 14px; height: 14px; }
/* Turbo flags the form busy while the request is in flight — spin the icon. */
.tl-head-r form.button_to[aria-busy="true"] .tl-refresh svg { animation: tl-spin 0.7s linear infinite; }
@keyframes tl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tl-head-r form.button_to[aria-busy="true"] .tl-refresh svg { animation: none; opacity: 0.5; }
}

/* calendar visibility menu */
.cal-menu { position: relative; display: inline-flex; }
.cal-menu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border: 0; cursor: pointer; background: transparent;
  border-radius: var(--border-radius-pill);
  color: var(--color-graphite);
  font-family: var(--font-sans); font-size: 0.6875rem;
  transition: background var(--transition-quick), color var(--transition-quick);
}
.cal-menu-btn:hover, .cal-menu-btn[aria-expanded="true"] { background: var(--color-cream); color: var(--color-ink); }
.cal-menu-cap { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cal-dots { display: inline-flex; align-items: center; gap: 3px; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid; box-sizing: border-box; }

.cal-pop {
  position: absolute; top: calc(100% + 7px); right: 0; width: 224px; z-index: 30;
  background: var(--color-white); border: 1px solid var(--color-mist);
  border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow-lift);
  padding: 7px;
}
.cal-pop-head {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-stone); padding: 4px 8px 7px;
}
.cal-pop form.button_to { display: contents; }
.cal-pop-row {
  display: flex; align-items: center; gap: 9px; width: 100%; border: 0; cursor: pointer;
  padding: 7px 8px; border-radius: var(--border-radius-base); background: transparent;
  font-family: var(--font-sans); font-size: 0.8125rem; color: var(--color-ink); text-align: left;
  transition: background var(--transition-quick);
}
.cal-pop-row:hover, .cal-pop-row:focus-visible { background: var(--color-cream-soft); outline: none; }
.cal-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; transition: opacity var(--transition-quick); }
.cal-pop-row .cal-name { flex: 1; min-width: 0; transition: opacity var(--transition-quick); }
.cal-check { width: 16px; display: inline-flex; justify-content: center; color: var(--color-accent); }
.cal-pop-foot { border-top: 1px solid var(--color-fog); margin-top: 5px; padding-top: 4px; }
.cal-pop-manage {
  display: block; width: 100%; padding: 7px 8px; border-radius: var(--border-radius-base);
  font-size: 0.75rem; color: var(--color-graphite); text-decoration: none;
  transition: background var(--transition-quick), color var(--transition-quick);
}
.cal-pop-manage:hover { background: var(--color-cream-soft); color: var(--color-ink); }

/* gcal task block — keeps its calendar's color on the left accent + icon */
.tl-block.gcal { border-left-color: var(--cal, var(--gcal-tint)); }
.tl-block.gcal .b-name { padding-right: 1.125rem; }
.tl-block.gcal .b-glyph { position: absolute; top: 8px; right: 9px; color: var(--cal, var(--gcal-tint)); opacity: 0.85; display: inline-flex; }
.tl-block.gcal .b-glyph svg { width: 12px; height: 12px; }

/* calendar icon on a gcal task's list row */
.t-cal { display: inline-flex; align-items: center; flex: none; color: var(--color-stone); }
.t-cal svg { width: 14px; height: 14px; }

/* calendar ghost blocks — events that aren't tasks yet. Same geometry as a task
   block (column-aware, exactly to scale) but faded, dashed, and tinted --cal. */
.tl-ghost {
  position: absolute;
  left: calc(5.75rem + (100% - 6.25rem) * var(--b-col, 0) / var(--b-cols, 1));
  width: calc((100% - 6.25rem) / var(--b-cols, 1) - 5px);
  top: calc((var(--b-start) - var(--tl-win-start)) * var(--tl-hour-px) / 60);
  height: max(6px, calc(
    min(max(var(--b-dur), var(--tl-min-dur)), var(--tl-win-end) - var(--b-start)) * var(--tl-hour-px) / 60
  ));
  --cal: var(--gcal-tint);
  border-radius: var(--border-radius-base);
  background: color-mix(in srgb, var(--cal) 7%, var(--color-bone));
  border: 1px dashed color-mix(in srgb, var(--cal) 40%, var(--color-mist));
  border-left: 2px dashed var(--cal);
  overflow: hidden;
  z-index: 1;
  cursor: default;
  container-type: size;
  transition: background var(--transition-quick), border-color var(--transition-quick);
}
.tl-ghost:hover {
  background: color-mix(in srgb, var(--cal) 13%, var(--color-white));
  border-color: color-mix(in srgb, var(--cal) 62%, var(--color-mist));
  z-index: 7;
}
.tl-ghost form.button_to { display: contents; }
.tl-ghost .b-body { height: 100%; display: flex; flex-direction: column; gap: 3px; padding: 0.4375rem 0.75rem; }
.tl-ghost .b-time {
  font-size: 0.65rem; letter-spacing: 0.02em; white-space: nowrap;
  color: color-mix(in srgb, var(--cal) 55%, var(--color-graphite));
}
.tl-ghost .b-name {
  font-size: 0.8125rem; font-weight: var(--font-weight-medium); line-height: 1.25;
  color: var(--color-ink-soft); padding-right: 1.125rem;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tl-ghost .b-glyph { position: absolute; top: 7px; right: 9px; color: var(--cal); opacity: 0.8; display: inline-flex; }
.tl-ghost .b-glyph svg { width: 12px; height: 12px; }

/* ghost size tiers — mirror the task block thresholds */
@container (height < 44px) {
  .tl-ghost .b-body { flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.75rem; }
  .tl-ghost .b-time { flex-shrink: 0; }
  .tl-ghost .b-name { -webkit-line-clamp: 1; font-size: 0.78rem; }
}
@container (height < 22px) {
  .tl-ghost .b-body { padding: 0 0.6875rem; }
  .tl-ghost .b-time { display: none; }
  .tl-ghost .b-name { font-size: 0.625rem; line-height: 1.05; padding-right: 0; }
  .tl-ghost .b-glyph { display: none; }
}
@container (height < 8px) {
  .tl-ghost .b-body { display: none; }
}

/* add-as-task affordance — appears on ghost hover */
.ghost-add {
  position: absolute; right: 8px; bottom: 7px; z-index: 8;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border: none; cursor: pointer;
  border-radius: var(--border-radius-pill);
  background: var(--color-ink); color: var(--color-bone);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity var(--transition-quick), transform var(--transition-quick), background var(--transition-quick);
  box-shadow: var(--box-shadow-lift);
}
.tl-ghost:hover .ghost-add, .ghost-add:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.ghost-add:hover { background: var(--color-ink-soft); }
.ghost-add svg { flex: none; }

/* Touch / no-hover devices can't reveal the hover-only button — show it. */
@media (hover: none) {
  .ghost-add { opacity: 1; transform: none; pointer-events: auto; }
}

/* A converted calendar task is time-locked — not draggable. */
.task.is-locked { cursor: default; }

/* Task modal: the calendar-task lock note + the read-only fields. */
.tm-lock-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px; margin: 2px 0 4px;
  border-radius: var(--border-radius-base);
  background: color-mix(in srgb, var(--gcal-tint) 9%, var(--color-cream-soft));
  color: var(--color-ink-soft); font-size: 0.78rem; line-height: 1.4;
}
.tm-lock-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--gcal-tint); }
.tm-name[readonly] { color: var(--color-ink-soft); cursor: default; }
.tm-time-static { font-size: 0.8125rem; color: var(--color-ink-soft); padding: 0.3rem 0; }
/* on short/compact ghosts, drop the label and center the button */
@container (height < 44px) {
  .ghost-add { bottom: 50%; transform: translateY(50%); right: 6px; }
  .tl-ghost:hover .ghost-add { transform: translateY(50%); }
  .ghost-add span { display: none; }
}