/* board.css — stage 4: labelled quadrants, task cards (checkbox · title · clock), the quadrant
   "…" menu, the carry-over strip, the waiting list, records of tasks pulled forward, the
   fast-organize popover and the floating timer bar. Builds on the shared .matrix / .quadrant /
   .task-card rules in base.css. */

/* ---------- Board layout ---------- */
.board {
  position: relative;
}

/* ---------- Carry-over strip (stages 2 and 4): unfinished tasks left on earlier days ---------- */
.carry-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  max-width: 680px;
  margin: 0 auto var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1.5px dashed var(--red);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--red-fill) 45%, var(--surface));
  color: var(--ink);
  font-size: var(--text-sm);
}

.carry-strip__pull {
  border-color: var(--red);
  font-weight: 700;
}

/* "×3": the task is on the plan for the third time. */
.attempt-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 18px;
  vertical-align: 1px;
}

/* A record: the task was pulled to a later day. Faded red, nothing to tick or start. */
.task-card--record {
  border-color: color-mix(in srgb, var(--red) 55%, var(--card-border));
  background: color-mix(in srgb, var(--red-fill) 55%, var(--surface));
  color: color-mix(in srgb, var(--red) 70%, var(--ink));
  opacity: 0.85;
}

.task-card__title--record {
  flex: 1;
  min-width: 0;
  padding: 2px var(--space-1);
  font-size: var(--text-sm);
  text-align: center;
  overflow-wrap: anywhere;
}

.record-label {
  flex: none;
  padding-right: var(--space-2);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* ---------- Waiting list: tasks left unplaced, on hold for the day ---------- */
.waiting {
  max-width: 720px; /* same width as the matrix above it */
  margin: var(--space-5) auto 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--hover);
}

.waiting__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
}

.waiting__label {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
}

.waiting__hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

.waiting__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.waiting-card {
  padding-right: var(--space-2);
}

/* Row of four small colour-coded glyphs that file the task into a quadrant. On a device with a
   pointer they (and the ✕) stay hidden until the card is hovered or focused, so a resting card
   reads cleanly; touch devices (no hover) always show them. */
.waiting-card__places {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
}

@media (hover: hover) {
  .waiting-card__places,
  .waiting-card .task-card__delete {
    opacity: 0;
    transition: opacity var(--dur-fast);
  }

  .waiting-card:hover .waiting-card__places,
  .waiting-card:focus-within .waiting-card__places,
  .waiting-card:hover .task-card__delete,
  .waiting-card:focus-within .task-card__delete {
    opacity: 1;
  }
}

.waiting-place {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--muted);
  transition:
    background var(--dur-fast),
    color var(--dur-fast),
    transform var(--dur-fast);
}

.waiting-place:hover,
.waiting-place:focus-visible {
  transform: translateY(-1px);
}

.waiting-place--do {
  color: var(--red);
}
.waiting-place--do:hover,
.waiting-place--do:focus-visible {
  background: var(--red-fill);
}
.waiting-place--plan {
  color: var(--yellow);
}
.waiting-place--plan:hover,
.waiting-place--plan:focus-visible {
  background: var(--yellow-fill);
}
.waiting-place--delegate {
  color: var(--blue);
}
.waiting-place--delegate:hover,
.waiting-place--delegate:focus-visible {
  background: var(--blue-fill);
}
.waiting-place--delete {
  color: var(--gray);
}
.waiting-place--delete:hover,
.waiting-place--delete:focus-visible {
  background: var(--gray-fill);
}

@media (pointer: coarse) {
  .waiting-place {
    width: var(--touch);
    height: var(--touch);
  }
}

/* Quadrants size to their own content: one long list must not stretch the other three
   (base.css's 1fr rows would give every quadrant the height of the fullest one). */
.board .matrix {
  grid-template-rows: none;
  align-items: start;
}

.board .quadrant {
  min-height: 230px;
}

/* Quadrant header: icon tile · title + subtitle · count badge (Lovable-style card head). */
.quadrant__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

/* Filled round tile in the quadrant colour with a white glyph (dark on the light amber), exactly
   like the Lovable design. */
.quadrant__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
}

.quadrant__icon--do {
  background: var(--red);
}
.quadrant__icon--plan {
  background: var(--yellow);
  color: #331b06;
}
.quadrant__icon--delegate {
  background: var(--blue);
}
.quadrant__icon--delete {
  background: var(--gray);
}

.quadrant__heading {
  flex: 1;
  min-width: 0;
  text-align: left;
}

/* Label matches the Lovable board: Outfit 600, tight tracking, tinted with the quadrant's accent. */
.board .quadrant__label {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.32px;
  text-align: left;
  margin-bottom: 0;
}

.board .quadrant--do .quadrant__label {
  color: var(--red);
}
.board .quadrant--plan .quadrant__label {
  color: var(--yellow);
}
.board .quadrant--delegate .quadrant__label {
  color: var(--blue);
}
.board .quadrant--delete .quadrant__label {
  color: var(--muted);
}

.quadrant__sub {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.2;
}

/* Plain count (no pill), aligned to the top of the header next to the icon, a touch larger. */
.quadrant__count {
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 2px;
  color: var(--muted);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Footer "+" that adds a task straight into the quadrant. */
.quadrant__add {
  width: 40px;
  height: 40px;
  color: var(--ink);
  opacity: 0.55;
  border: 1.5px dashed transparent;
  transition:
    opacity var(--dur-fast),
    border-color var(--dur-fast),
    background var(--dur-fast),
    color var(--dur-fast);
}

.quadrant__add:hover,
.quadrant__add:focus-visible {
  opacity: 1;
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

/* ---------- Task cards ---------- */
.board .task-card {
  gap: 6px;
  padding: 4px 4px 4px 4px;
  cursor: grab;
  touch-action: pan-y; /* let a vertical swipe scroll; a long press lifts the card */
}

.board .task-card--record {
  cursor: default;
}

/* Controls inside a card keep their own pointer/cursor (they never start a drag). */
.task-card__check,
.board .task-card__title,
.task-card__clock,
.task-card__forward,
.task-card__delete,
.waiting-place {
  cursor: pointer;
}

/* Red ✕ at the far right of a card: one-click delete (with Undo). */
.task-card__delete {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--red);
  opacity: 0.5;
  transition:
    opacity var(--dur-fast),
    background var(--dur-fast);
}

.task-card__delete:hover,
.task-card__delete:focus-visible {
  opacity: 1;
  background: var(--red-fill);
}

.task-card__delete svg {
  width: 15px;
  height: 15px;
}

/* Drag & drop */
.board--dragging {
  cursor: grabbing;
  user-select: none;
}

.board .task-card--lifted {
  opacity: 0.4;
}

.board-ghost {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
}

.waiting.is-drop-target {
  box-shadow: 0 0 0 3px var(--focus);
}

@media (pointer: coarse) {
  .task-card__delete {
    width: var(--touch);
    height: var(--touch);
  }
}

/* A done card keeps its normal look (no fade); only the title gets a line through it. */
.board .task-card--done {
  border-color: var(--card-border);
}

.task-card__done {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  cursor: pointer;
}

.task-card__check {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--gray);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast);
}

.task-card__check:hover {
  border-color: var(--green);
}

.task-card__check:checked {
  border-color: var(--green);
  background: var(--green) no-repeat center / 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* The title is a button here (it opens the popover); scoped so stage-3 cards keep their plain span. */
.board .task-card__title {
  flex: 1;
  min-width: 0;
  min-height: 28px;
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-align: center;
  overflow-wrap: anywhere;
  transition: background var(--dur-fast);
}

.board .task-card__title:hover {
  background: var(--hover);
}

/* A button: opens the timer picker (idle) or the task actions (timer live). */
/* The clock · ⏩ · ✕ sit together on the right with only a hair of space between them. */
.task-card__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
}

/* Priority tag before the title: the quadrant's coloured glyph; click to change the priority. */
.task-card__priority {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast);
}

.task-card__priority:hover,
.task-card__priority:focus-visible {
  background: var(--surface-2);
}

.task-card__clock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 22px;
  min-height: 28px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.task-card__clock:hover {
  background: var(--hover);
  color: var(--ink);
}

/* ⏩ between the clock and the ✕: opens the schedule picker. */
.task-card__forward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 22px;
  min-height: 28px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition:
    background var(--dur-fast),
    color var(--dur-fast);
}

.task-card__forward:hover,
.task-card__forward:focus-visible {
  background: color-mix(in srgb, var(--forward) 16%, transparent);
  color: var(--forward);
}

.task-card__clock--idle {
  opacity: 0.8;
}

.task-card__clock--running {
  color: var(--accent);
}

.task-card__clock--paused {
  color: var(--muted);
}

.task-card__clock--finished {
  color: var(--red);
  font-weight: 700;
  animation: clock-blink 1s steps(2, jump-none) infinite;
}

.task-card__clock--done {
  color: var(--muted);
}

@keyframes clock-blink {
  50% {
    opacity: 0.35;
  }
}

/* Inline "add task here" row */
.board .task-card--new {
  padding: 0;
  border-style: dashed;
}

/* While typing a new task, keep the plain box — a neutral solid border, never the green ring. */
.board .task-card--new:focus-within {
  border-style: solid;
  border-color: var(--muted);
}

.task-card__input {
  width: 100%;
  min-height: 34px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--text-sm);
  text-align: center;
}

/* No green ring inside the box — the new-task card's own neutral border shows focus. */
.task-card__input:focus-visible {
  outline: none;
}

/* ---------- Task popover ---------- */
.popover--task {
  padding: var(--space-3) var(--space-4);
}

.task-popover {
  width: 232px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}

.task-popover__title {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* The popover title doubles as the rename control: click it to edit in place. */
.task-popover__title--edit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: var(--space-1) var(--space-2) var(--space-2);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--ink);
  cursor: text;
  transition: background var(--dur-fast);
}

.task-popover__title--edit:hover {
  background: var(--hover);
}

.task-popover__pencil {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0.7;
}

.task-popover__title--edit:hover .task-popover__pencil {
  color: var(--primary);
  opacity: 1;
}

.task-popover__hint {
  font-size: var(--text-xs);
  color: var(--muted);
}

.task-popover__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.action-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-fast),
    filter var(--dur-fast);
}

.action-btn:hover {
  transform: scale(1.06);
  filter: brightness(1.05);
}

.action-btn:active {
  transform: scale(0.97);
}

.action-btn--play {
  background: var(--play);
  border: 3px solid color-mix(in srgb, var(--play) 78%, #000);
}

.action-btn--play svg {
  margin-left: 3px; /* optically centre the triangle */
}

.action-btn--calendar {
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--blue);
  color: var(--blue);
}

.action-btn--forward {
  border-radius: 10px;
  background: var(--forward);
  border: 2px solid color-mix(in srgb, var(--forward) 82%, #000);
}

.task-popover__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.task-popover__input {
  width: 100%;
  min-height: 36px;
  padding: 4px 10px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: var(--text-sm);
}

.task-popover__buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ▶ picker */
.timer-picker__stopwatch,
.timer-picker__continue {
  width: 100%;
}

.timer-picker__continue {
  gap: var(--space-1);
}

/* A plain block fieldset (NOT display:flex — that would demote the <legend> to a normal child) so
   the "Countdown" legend sits centred on the top border and cuts the line around the word. */
.timer-picker {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
}

.timer-picker__legend {
  margin: 0 auto;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
}

.timer-picker__presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.timer-picker__preset {
  min-width: 36px;
  padding: 0 var(--space-2);
}

.timer-picker__unit {
  padding-left: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
}

.timer-picker__custom-row {
  display: flex;
  gap: var(--space-1);
}

.timer-picker__custom {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 0 var(--space-2);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

/* ---------- Schedule picker (⏩): mirrors the timer picker ---------- */
.schedule-picker__nextday {
  width: 100%;
}

.schedule-picker {
  margin: 0;
  padding: var(--space-2);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.schedule-picker__legend {
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
}

.schedule-picker__row {
  display: flex;
  gap: var(--space-1);
}

.schedule-picker__date {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 0 var(--space-2);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

/* ---------- Floating timer bar ---------- */
.timer-bar {
  position: fixed;
  left: 50%;
  bottom: var(--space-4);
  z-index: 35; /* above tips, below popovers and toasts */
  width: min(560px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  animation: timer-bar-in var(--dur) var(--ease) both;
}

.timer-bar > svg {
  color: var(--accent);
}

.timer-bar--paused > svg {
  color: var(--muted);
}

.timer-bar__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.timer-bar__title {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timer-bar__status {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--red);
}

.timer-bar__status:empty {
  display: none;
}

.timer-bar__time {
  min-width: 3.4em;
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.timer-bar--paused .timer-bar__time {
  color: var(--muted);
}

.timer-bar__actions {
  display: flex;
  gap: var(--space-1);
}

.timer-bar__actions .btn {
  gap: 6px;
  padding: 0 10px;
}

.timer-bar--finished {
  border-color: var(--red);
  background: var(--red-fill);
}

.timer-bar--flash {
  animation: timer-bar-flash 0.5s ease-in-out 6;
}

@keyframes timer-bar-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes timer-bar-flash {
  50% {
    background: var(--red);
    color: #fff;
  }
}

/* Keep the stage footer and toasts clear of the bar. */
body.has-timer-bar {
  padding-bottom: 80px;
}

body.has-timer-bar .toast-root {
  bottom: calc(var(--space-4) + 84px);
}

/* ---------- Responsive ---------- */
@media (max-width: 639px) {
  .board .quadrant {
    min-height: 150px;
  }
}

/* Touch targets ≥ 44px (SPEC §3): the done mark, the title, the clock, the … menu and the
   popover's text actions all grow to the full touch size. */
@media (pointer: coarse) {
  .board .task-card {
    min-height: var(--touch);
  }

  .task-card__done {
    width: var(--touch);
    height: var(--touch);
  }

  .board .task-card__title {
    min-height: var(--touch);
  }

  .task-card__clock,
  .task-card__forward {
    min-width: var(--touch);
    min-height: var(--touch);
  }

  .quadrant__add {
    width: var(--touch);
    height: var(--touch);
  }

  .task-popover__link {
    min-height: var(--touch);
  }
}

@media (max-width: 479px) {
  .timer-bar {
    padding: var(--space-2);
  }

  .timer-bar__label {
    display: none;
  }

  .timer-bar__actions .btn {
    min-width: 36px;
    padding: 0 var(--space-2);
  }

  .timer-bar__time {
    font-size: var(--text-md);
  }
}