/* base.css — reset, app shell (header, stepper, day bar, banner, stage panels), shared components
   (buttons, bubbles, toast, modal, popover, menu) and the shared matrix / quadrant / task-card look. */

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

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

/* Always reserve the scrollbar's width where scrollbars actually take space (mouse/trackpad).
   Without this the header, the nav and the content jump sideways whenever a stage is tall enough
   to scroll and the next one isn't. Touch devices overlay their scrollbars, and reserving a gutter
   there would eat into the calendar's already tight cells, so it starts at the 768px breakpoint. */
@media (min-width: 768px) {
  html {
    scrollbar-gutter: stable;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
  font-weight: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

svg {
  flex-shrink: 0;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

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

:focus:not(:focus-visible) {
  outline: none;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-md);
}

.skip-link:focus {
  top: var(--space-3);
}

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

/* ---------- App layout ---------- */
.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}

.app-header__inner {
  /* Padding included, so the logo's left edge and the account's right edge land exactly on the
     content column below (the calendar grid / the matrix). */
  max-width: calc(var(--content-col) + 2 * var(--space-4));
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  min-height: var(--header-h);
  display: grid;
  /* Equal side columns keep the tabs exactly centred, whatever the logo or the account area holds. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-md);
}

.brand__mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.account-slot {
  display: flex;
  align-items: center;
}

/* ---------- Stepper (stage tabs) ---------- */
/* Real tabs: the strip sits flush on the header's bottom edge and the active tab shares the page's
   background, breaking that line so tab and page read as one card. Same on every stage. */
.stepper-nav {
  display: flex;
  justify-content: center;
  align-self: end;
  min-width: 0;
  margin-bottom: calc(-1 * var(--space-2) - 1px);
}

.stepper {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stepper__item {
  position: relative;
  display: flex;
  min-width: 0;
}

.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 9px var(--space-3);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  color: var(--muted);
  white-space: nowrap;
  transition:
    background var(--dur-fast),
    color var(--dur-fast);
}

.step__dot {
  display: grid;
  place-items: center;
  line-height: 1;
}

.step__dot svg {
  width: 17px;
  height: 17px;
}

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

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

/* The open tab: page-coloured, outlined, its top edge marked green — fused with the page below. */
.step.is-current,
.step.is-current:hover {
  background: var(--bg);
  border-color: var(--border);
  border-top: 3px solid var(--primary);
  padding-top: 7px;
  color: var(--primary);
  font-weight: 700;
}

/* ---------- Day bar ---------- */
.daybar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.daybar__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.daybar__center {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.daybar__date {
  font-size: var(--text-md);
  font-weight: 600;
  text-align: center;
}

.daybar__progress {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.daybar__today {
  gap: 6px;
}

.meter {
  width: 64px;
  height: 6px;
  border-radius: 3px;
  background: var(--tray);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  background: var(--green-fill);
  transition: width var(--dur) var(--ease);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
}

.chip--today {
  background: var(--today);
  color: #fff;
}

/* ---------- Free-mode banner ---------- */
.banner {
  background: var(--warning-bg);
  border-bottom: 1px solid var(--warning-line);
  font-size: var(--text-sm);
}

.banner__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* text and Dismiss sit together in the middle */
  gap: var(--space-2) var(--space-3);
}

.banner__text {
  text-align: center;
}

/* ---------- Stage panels ---------- */
.stage {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
  display: grid;
  overflow-x: clip; /* sliding panels must never widen the page */
}

.panel {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
}

.panel--ghost {
  pointer-events: none;
}

.panel--enter-forward {
  animation: panel-in-right var(--dur) var(--ease) both;
}

.panel--enter-back {
  animation: panel-in-left var(--dur) var(--ease) both;
}

.panel--exit-forward {
  animation: panel-out-left var(--dur) var(--ease) both;
}

.panel--exit-back {
  animation: panel-out-right var(--dur) var(--ease) both;
}

/* Stages are tabs, not wizard steps: they cross-fade in place. The old slide brought every panel in
   from 32px to one side, which read as the whole page shifting sideways on every tab change. */
@keyframes panel-in-right {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes panel-in-left {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes panel-out-left {
  to {
    opacity: 0;
  }
}

@keyframes panel-out-right {
  to {
    opacity: 0;
  }
}

.stage-header {
  text-align: center;
  margin-bottom: var(--space-5);
}

.stage-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

.stage-title:focus-visible {
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

.stage-title__accent {
  color: var(--red);
  font-weight: 700;
}

.stage-subtitle {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

.stage-body {
  position: relative;
}

.stage-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* Back · centred day switcher · Next */
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--content-col); /* align Back / Next with the content column */
  margin: 0 auto var(--space-4);
}

.stage-nav__side {
  display: flex;
  min-width: 0;
}

.stage-nav__side--end {
  justify-content: flex-end;
}

/* Centred current-day display with discreet arrows to step the day. */
.stage-nav__day {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.stage-nav__day-label {
  min-width: 96px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stage-nav__day-arrow {
  color: var(--muted);
}

.stage-nav__day-arrow:hover {
  color: var(--ink);
}

/* Narrow screens: the centre label gets its own row above Back / Next so nothing overflows. */
@media (max-width: 560px) {
  .stage-nav {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-2);
  }
  .stage-nav__day {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: center;
  }
  .stage-nav__side--start {
    grid-row: 2;
    grid-column: 1;
  }
  .stage-nav__side--end {
    grid-row: 2;
    grid-column: 2;
  }
}

.stage-nav__next {
  margin-left: auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  box-shadow: var(--shadow-sm);
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast),
    box-shadow var(--dur-fast),
    transform var(--dur-fast);
}

.btn:hover {
  background: var(--hover);
  border-color: var(--muted);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

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

.btn-primary:hover {
  background: color-mix(in srgb, var(--primary) 88%, #000);
  border-color: color-mix(in srgb, var(--primary) 88%, #000);
  color: var(--primary-fg);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  font-weight: 500;
}

.btn-ghost:hover {
  background: var(--hover);
  border-color: transparent;
}

.btn-danger {
  color: var(--red);
  border-color: var(--red);
}

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

.btn-sm {
  min-height: 34px;
  padding: 0 var(--space-4);
  font-size: var(--text-xs);
}

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

.btn-icon:hover {
  background: var(--hover);
  color: var(--ink);
}

.btn-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

.btn-google {
  gap: 10px;
  font-weight: 600;
  border-color: var(--line-strong);
}

.btn-google svg {
  width: 18px;
  height: 18px;
}

@media (pointer: coarse) {
  .btn,
  .btn-icon {
    min-height: var(--touch);
  }

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

  .bubble {
    padding-right: 52px;
  }

  .bubble__close {
    top: 0;
    right: 0;
    width: var(--touch);
    height: var(--touch);
  }
}

/* ---------- Speech bubbles ---------- */
.bubble {
  --bubble-bg: var(--bubble-khaki);
  --bubble-line: var(--bubble-khaki);
  --tail-x: 36px;
  --tail-y: 26px;
  position: relative;
  z-index: var(--z-bubble);
  display: inline-block;
  max-width: min(300px, calc(100% - 16px));
  padding: var(--space-3) var(--space-7) var(--space-3) var(--space-4);
  border: 1.5px solid var(--bubble-line);
  border-radius: var(--radius-xl);
  background: var(--bubble-bg);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.4;
  box-shadow: var(--shadow-md);
}

/* Anchored bubbles float over the stage; they must never block what they point at (a quadrant
   being dragged into, a card being tapped), so pointer input passes through everything but ✕. */
.bubble--positioned {
  position: absolute;
  pointer-events: none;
}

.bubble--positioned .bubble__close {
  pointer-events: auto;
}

/* Un-anchored tips (a stage without [data-tip-anchor]) sit centred under the stage header. */
.bubble:not(.bubble--positioned) {
  --tail-x: 50%;
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-5);
}

.bubble--khaki {
  --bubble-bg: var(--bubble-khaki);
  --bubble-line: var(--bubble-khaki);
}

.bubble--green {
  --bubble-bg: var(--bubble-green);
  --bubble-line: var(--bubble-green-border);
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.bubble--dark {
  --bubble-bg: var(--bubble-dark);
  --bubble-line: var(--bubble-dark);
  color: #fff;
}

.bubble__title {
  font-weight: 700;
}

.bubble__list {
  margin: var(--space-2) 0 0;
  padding-left: 18px;
}

.bubble__list li + li {
  margin-top: 2px;
}

.bubble strong {
  font-weight: 700;
}

.bubble__close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  color: inherit;
  opacity: 0.7;
}

.bubble__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

.bubble__close svg {
  width: 16px;
  height: 16px;
}

/* Tail: a rotated square sharing the bubble background; only the two outer edges keep a border. */
.bubble__tail {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--bubble-bg);
  border: 1.5px solid transparent;
}

.bubble--tail-bottom .bubble__tail {
  bottom: -9px;
  left: var(--tail-x);
  transform: translateX(-50%) rotate(45deg);
  border-right-color: var(--bubble-line);
  border-bottom-color: var(--bubble-line);
}

.bubble--tail-top .bubble__tail {
  top: -9px;
  left: var(--tail-x);
  transform: translateX(-50%) rotate(45deg);
  border-left-color: var(--bubble-line);
  border-top-color: var(--bubble-line);
}

.bubble--tail-left .bubble__tail {
  left: -9px;
  top: var(--tail-y);
  transform: translateY(-50%) rotate(45deg);
  border-left-color: var(--bubble-line);
  border-bottom-color: var(--bubble-line);
}

.bubble--tail-right .bubble__tail {
  right: -9px;
  top: var(--tail-y);
  transform: translateY(-50%) rotate(45deg);
  border-right-color: var(--bubble-line);
  border-top-color: var(--bubble-line);
}

/* ---------- Toasts ---------- */
.toast-root {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #fff;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in var(--dur) var(--ease) both;
}

.toast__text {
  flex: 1;
}

.toast__action {
  color: #7fe0ad;
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  min-height: 32px;
}

.toast__action:hover {
  background: rgba(255, 255, 255, 0.12);
}

.toast__close {
  color: #fff;
  opacity: 0.7;
  width: 32px;
  height: 32px;
}

.toast__close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}

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

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.38);
  animation: fade-in var(--dur-fast) both;
}

.modal {
  width: min(440px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--dur) var(--ease) both;
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

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

.modal__body p + p {
  margin-top: var(--space-2);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

body.has-modal {
  overflow: hidden;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

/* ---------- Popover & menu ---------- */
.popover-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible;
  z-index: var(--z-popover);
}

.popover {
  --tail-x: 50%;
  --tail-y: 50%;
  position: absolute;
  z-index: var(--z-popover);
  min-width: 180px;
  max-width: min(320px, calc(100vw - 16px));
  padding: var(--space-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  animation: fade-in var(--dur-fast) both;
}

.popover__tail {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border: 1.5px solid transparent;
}

.popover--tail-top .popover__tail {
  top: -8px;
  left: var(--tail-x);
  transform: translateX(-50%) rotate(45deg);
  border-left-color: var(--border);
  border-top-color: var(--border);
}

.popover--tail-bottom .popover__tail {
  bottom: -8px;
  left: var(--tail-x);
  transform: translateX(-50%) rotate(45deg);
  border-right-color: var(--border);
  border-bottom-color: var(--border);
}

.popover--tail-left .popover__tail {
  left: -8px;
  top: var(--tail-y);
  transform: translateY(-50%) rotate(45deg);
  border-left-color: var(--border);
  border-bottom-color: var(--border);
}

.popover--tail-right .popover__tail {
  right: -8px;
  top: var(--tail-y);
  transform: translateY(-50%) rotate(45deg);
  border-right-color: var(--border);
  border-top-color: var(--border);
}

.menu {
  padding: var(--space-1);
  min-width: 200px;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.menu__item:hover,
.menu__item:focus-visible {
  background: var(--hover);
}

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

.menu__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.menu__item--danger {
  color: var(--red);
}

.menu__item svg {
  width: 16px;
  height: 16px;
}

.menu__separator {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--line);
}

/* ---------- Shared matrix / quadrants / task cards ---------- */
.matrix {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--content-col);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.quadrant {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 200px;
  padding: var(--space-4);
  border: 1.5px solid var(--gray);
  border-radius: var(--radius-lg);
  background: var(--gray-fill);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--dur-fast),
    filter var(--dur-fast);
}

.quadrant--do {
  background: var(--red-fill);
  border-color: var(--red);
}

.quadrant--plan {
  background: var(--yellow-fill);
  border-color: var(--yellow);
}

.quadrant--delegate {
  background: var(--blue-fill);
  border-color: var(--blue);
}

.quadrant--delete {
  background: var(--gray-fill);
  border-color: var(--gray);
}

/* Stage 2: faded, uncoloured background matrix. */
.matrix--faded .quadrant {
  background: var(--surface);
  border: 1.5px solid var(--line);
  box-shadow: none;
}

.quadrant.is-drop-target {
  box-shadow: 0 0 0 3px var(--focus);
  filter: brightness(1.02);
}

.quadrant__label {
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

.quadrant__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.quadrant__footer {
  display: flex;
  justify-content: center;
}

.task-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.task-card__title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-card--done .task-card__title {
  text-decoration: line-through; /* just crossed out — the title keeps its normal colour */
}

.task-card--selected {
  box-shadow: 0 0 0 3px var(--focus);
}

.task-card--dragging {
  opacity: 0.9;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-popover);
}

/* ---------- Motion & responsive ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 767px) {
  /* Two header rows would keep ~130px of a phone screen pinned; stage changes start at the top
     anyway, so the header simply scrolls with the page here. */
  .app-header {
    position: static;
  }

  .app-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "stepper stepper";
    row-gap: var(--space-2);
  }

  .brand {
    grid-area: brand;
  }

  .header-actions {
    grid-area: actions;
  }

  .stepper-nav {
    grid-area: stepper;
  }

  .step {
    padding: 6px var(--space-2);
  }
}

@media (max-width: 639px) {
  .matrix {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .quadrant {
    min-height: 140px;
  }

  .daybar__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    justify-items: center;
    row-gap: var(--space-1);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }

  .daybar__center {
    flex-wrap: wrap;
    justify-content: center;
  }

  .daybar__progress {
    grid-column: 1 / -1;
  }

  .stage {
    padding: var(--space-4) var(--space-3) var(--space-8);
  }

  .stage-nav {
    margin-bottom: var(--space-3);
  }
}

@media (max-width: 479px) {
  .step__label {
    display: none;
  }

  .step.is-current .step__label {
    display: block;
  }

  .brand__name {
    font-size: var(--text-sm);
  }

  .daybar__date {
    font-size: var(--text-sm);
  }

  /* "Go to today" shrinks to its icon so the date row stays a single line. */
  .daybar__today {
    width: var(--touch);
    min-height: var(--touch);
    padding: 0;
  }

  .daybar__today-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Day bar: "· 5 waiting" after the done count when the day has tasks on hold. */
.daybar__waiting {
  margin-left: var(--space-1);
  color: var(--muted);
  white-space: nowrap;
}

/* A coloured priority glyph standing in for a menu row's icon. */
.menu__glyph {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------- Time report button (Write down + Prioritize) ---------- */
/* Always the last thing on the page, centred under every task: the stage grows (flex: 1), so on a
   short page it rests at the bottom and it moves down as tasks are added — it never covers one. */
.report-fab {
  flex: none;
  margin: 0 auto var(--space-5);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-fast), color var(--dur-fast);
}

.report-fab:hover {
  color: var(--accent);
  box-shadow: var(--shadow-lg);
}

/* Priority menus name each quadrant by its axes — "Urgent / Important" — in aligned columns. */
.menu__axes {
  display: grid;
  grid-template-columns: 5.4em auto auto;
  align-items: baseline;
  white-space: nowrap;
}

.menu__axes-slash {
  padding-inline: 0.55em;
  color: var(--muted);
  white-space: pre;
}