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

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

/* ─── Hero band ─────────────────────────────────────────────────────── */
/* Warm editorial wash from the design — a cream gradient that clearly sets
   the hero band apart from the white work surface below. */
.work-hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 0% 0%, oklch(0.972 0.020 85) 0%, transparent 55%),
    linear-gradient(180deg, oklch(0.974 0.013 85) 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);
}

.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;
  grid-template-columns: 62fr 38fr;
  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 {
  /* The 0.25rem of top breathing room lives here (not on .tl-grid) so the
     grid's top edge — the origin for absolutely-placed blocks, the now-line,
     and the drop ghost — coincides with the first hour line. */
  padding: 1.625rem 1.75rem 5rem;
  background: var(--color-bone);
}

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

.group-label:first-child { margin-top: 0; }

.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; }

.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);
}
.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;
}

.tm-name {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
.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. Lexxy ships the editor/toolbar styles; we just frame it. */
.tm-card lexxy-editor {
  display: block;
  min-height: 4.5rem;
  border: 1px solid var(--color-bone-deep);
  border-radius: var(--border-radius-base);
  background: var(--color-cream);
}
.tm-card lexxy-editor:focus-within { border-color: var(--color-stone); }

/* Tagging the editor content `.lexxy-content` (see lexxy_content_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;
  flex-direction: column;
  gap: 1rem;
  padding: 0.125rem 0;
}
.tm-time-field { display: flex; flex-direction: column; gap: 0.5rem; }
.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: 8px;
  font-size: 0.875rem;
  color: var(--color-accent);
  padding: 0.25rem 0;
}

.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 ──────────────────────────────────────────────────────── */
.tl-grid {
  position: relative;
  padding-left: 5.25rem;
}

.tl-hour {
  position: relative;
  height: 72px;
  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;
}

.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) - 4px);
  border-radius: var(--border-radius-base);
  padding: 0.5rem 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-mist);
  border-left: 3px solid var(--color-ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--box-shadow-thin);
  transition: box-shadow var(--transition-base);
  z-index: 2;
}

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

.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;
}

.tl-block.is-short {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
}

.tl-block.is-short .b-time { flex-shrink: 0; }
.tl-block.is-short .b-name { -webkit-line-clamp: 1; font-size: 0.78rem; }

.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 */
.tl-now {
  position: absolute;
  left: 5.25rem;
  right: 0.5rem;
  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 ─────────────────────────────────────────────── */
/* Custom drag image: a small pill with the task title (set in working_drag). */
.drag-ghost {
  position: absolute;
  top: -9999px;
  left: -9999px;
  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;
  box-shadow: 0 16px 32px -16px rgba(26, 24, 21, 0.3);
  pointer-events: none;
}

.task { cursor: grab; }
.tl-block { cursor: grab; }
.task:active,
.tl-block:active { cursor: grabbing; }

.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); }

/* "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. */
.task.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));
}

/* warm 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%, oklch(0.975 0.013 85) 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: grab;
  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:active { cursor: grabbing; }
.bk-row.is-dragging { 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; }
.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;
}
.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); }

/* ─── 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); }

/* 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.
 */
.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;
}
.cl-item.is-dragging { opacity: 0.35; }
.cl-item.is-drop-before::before,
.cl-add.is-drop-before::before {
  content: ''; position: absolute; left: 20px; right: 0; top: -1px;
  height: 2px; background: var(--color-accent-soft); border-radius: 2px;
}

.cl-grip {
  flex: 0 0 auto; width: 12px;
  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 { opacity: 0.65; }
.cl-grip:active { cursor: grabbing; }

.cl-box {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  padding: 0;
  border-radius: var(--border-radius-sm);
  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);
  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 inside the task modal */
.tm-checklist {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.tm-checklist .checklist { gap: 1px; }
.tm-checklist .cl-text { font-size: 13.5px; }