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

html {
  height: 100%;
  overflow: hidden;
}

body {
  background: #FFFBEA;
  font-family: 'DM Mono', monospace;
  height: 100%;
  overflow: hidden;
  padding: 24px 16px 0;
  transition: background-color 0.35s ease;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(#000 1px, transparent 1px),
    linear-gradient(90deg, #000 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 680px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* overflow: visible lets the pill spring animation overshoot freely;
     body's overflow: hidden prevents any actual page scroll */
  overflow: visible;
}

/* ── Hero Header ── */
.hero {
  background: #FD5A46;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #000;
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: padding 0.35s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  max-height: 200px;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-bottom 0.35s ease;
}

.hero-title {
  font-family: 'Archivo Black', sans-serif;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.hero-right {
  text-align: right;
  flex-shrink: 0;
}

.hero-count {
  font-family: 'Archivo Black', sans-serif;
  color: #fff;
  font-size: 40px;
  line-height: 1;
}

.hero-label {
  font-family: 'DM Mono', monospace;
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Progress Card ── */
.progress-card {
  background: #fff;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.progress-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #000;
}

.progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.progress-top-label {
  font-weight: 500;
  color: #000;
}

.progress-top-stats {
  color: #552CB7;
  font-weight: 500;
}

.progress-track {
  height: 20px;
  border: 2px solid #000;
  border-radius: 4px;
  background: #f0f0f0;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background-color: #FD5A46;
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, 0.25) 6px,
      rgba(255, 255, 255, 0.25) 12px);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s;
  border-radius: 2px;
}

.progress-fill.complete {
  background-color: #00995E;
}

.progress-done-msg {
  margin-top: 8px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  color: #00995E;
  text-align: center;
  display: none;
}

.progress-done-msg.visible {
  display: block;
}

.progress-click-hint {
  margin-top: 6px;
  font-size: 11px;
  color: #888;
  text-align: center;
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .progress-click-hint {
    display: none;
  }

  #restoreDateOverlay {
    align-items: flex-start;
    overflow-y: auto;
    padding: 16px;
  }

  .restore-date-modal {
    margin: auto 0;
    width: 100%;
  }

  .restore-date-input {
    font-size: 16px;
    /* prevents iOS auto-zoom */
  }

}

@keyframes cardBlink {
  0% {
    background: #fff;
  }

  25% {
    background: #FFC567;
  }

  50% {
    background: #fff;
  }

  75% {
    background: #FFC567;
  }

  100% {
    background: #fff;
  }
}

.progress-card.blink {
  animation: cardBlink 0.7s ease-in-out;
}

@keyframes focusBlink {
  0%   { background: #fff; }
  20%  { background: #552CB7; }
  40%  { background: #fff; }
  60%  { background: #552CB7; }
  80%  { background: #fff; }
  100% { background: #fff; }
}

.progress-card.focus-blink {
  animation: focusBlink 1.2s ease-in-out;
}

.focus-mode-hint {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 10px;
  color: #552CB7;
  text-align: center;
  letter-spacing: 1px;
  font-family: 'Archivo Black', sans-serif;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
  margin-top: 0;
}

.focus-mode-hint.visible {
  max-height: 24px;
  opacity: 1;
  margin-top: 6px;
}

/* ── Compose Area ── */
/* ── Compose wrapper ── */
.compose-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(32px + var(--keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 50;
  width: min(420px, calc(100vw - 16px));
  display: grid;
  max-height: 124px;
  overflow: visible;
  padding: 8px;
  transition:
    bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.35s ease,
    opacity 0.25s ease,
    margin-top 0.35s ease;
}

/* compose-row is the only grid child */
.compose-row {
  grid-row: 1;
  grid-column: 1;
}

/* ── Resting + composing row ── */
.compose-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

/* ── Compose pill — single element that resizes from button to input ── */
.compose-pill {
  background: #FFC567;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  border-radius: 6px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  cursor: pointer;
  flex: 1;
  max-width: 68px;
  color: #000;
  -webkit-user-select: none;
  user-select: none;
  will-change: max-width;
  /* CLOSE — gentle spring (300→68px has enough range to bounce without clamping) */
  transition: max-width 0.42s cubic-bezier(0.34, 1.3, 0.64, 1),
    background-color 0.18s ease 0.14s,
    box-shadow 0.1s ease,
    transform 0.1s ease;
}

.compose-pill:hover {
  box-shadow: 6px 6px 0 #000;
  transform: translate(-2px, -2px);
}

.compose-pill:active {
  box-shadow: 2px 2px 0 #000;
  transform: translate(2px, 2px);
}

/* OPEN — spring stretch */
.compose-wrap.composing .compose-pill {
  max-width: 300px;
  background-color: #fff;
  cursor: default;
  transition: max-width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.22s ease,
    box-shadow 0.1s ease,
    transform 0.1s ease;
}

.compose-wrap.composing .compose-pill:hover,
.compose-wrap.composing .compose-pill:active {
  box-shadow: 4px 4px 0 #000;
  transform: none;
}

/* ── Pill label ("ADD") — hides fast on open, reveals after pill closes ── */
.pill-label {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
  padding: 12px 14px;
  max-width: 200px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* CLOSE: label snaps in once pill has returned to button size */
  transition: max-width 0.14s ease 0.24s,
    padding-left 0.14s ease 0.24s,
    padding-right 0.14s ease 0.24s,
    opacity 0.12s ease 0.26s;
}

/* OPEN: label collapses instantly so pill stretches clean */
.compose-wrap.composing .pill-label {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  transition: max-width 0.1s ease,
    padding-left 0.1s ease,
    padding-right 0.1s ease,
    opacity 0.06s ease;
}

/* ── Text input inside pill ── */
.c-input {
  flex: 1;
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 0;
  color: #000;
  opacity: 0;
  pointer-events: none;
  /* CLOSE: ease-out, no spring (same reason as pill) */
  transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.08s ease,
    padding 0.18s ease;
}

/* OPEN: spring expand, input fades in just after pill starts stretching */
.compose-wrap.composing .c-input {
  max-width: 300px;
  padding: 12px 8px 12px 14px;
  opacity: 1;
  pointer-events: auto;
  transition: max-width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.16s ease 0.1s,
    padding 0.18s ease;
}

/* ── Submit button inside pill ── */
.c-submit-btn {
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 0;
  padding: 12px 0;
  opacity: 0;
  pointer-events: none;
  transition: max-width 0.2s ease 0s,
    padding-left 0.2s ease 0s,
    padding-right 0.2s ease 0s,
    border-color 0.12s ease 0s,
    opacity 0.12s ease 0s;
}

.compose-wrap.composing .c-submit-btn {
  max-width: 46px;
  padding-left: 10px;
  padding-right: 12px;
  border-left-color: rgba(0, 0, 0, 0.15);
  opacity: 1;
  pointer-events: auto;
}

.c-submit-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.c-submit-btn:active {
  background: rgba(0, 0, 0, 0.12);
}


/* ── Record pill — mirrors compose-pill but for the mic/recording flow ── */
.record-pill {
  background: #A388EE;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  border-radius: 6px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  cursor: pointer;
  flex: 1;
  max-width: 50px;
  color: #000;
  -webkit-user-select: none;
  user-select: none;
  will-change: max-width;
  /* CLOSE — gentle spring */
  transition: max-width 0.42s cubic-bezier(0.34, 1.3, 0.64, 1),
    background-color 0.18s ease 0.14s,
    box-shadow 0.1s ease,
    transform 0.1s ease;
}

.record-pill:hover {
  box-shadow: 6px 6px 0 #000;
  transform: translate(-2px, -2px);
}

.record-pill:active {
  box-shadow: 2px 2px 0 #000;
  transform: translate(2px, 2px);
}

/* OPEN */
.compose-wrap.recording .record-pill,
.compose-wrap.processing .record-pill {
  max-width: 300px;
  background-color: #fff;
  cursor: default;
  transition: max-width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.22s ease,
    box-shadow 0.1s ease,
    transform 0.1s ease;
}

.compose-wrap.recording .record-pill:hover,
.compose-wrap.recording .record-pill:active,
.compose-wrap.processing .record-pill:hover,
.compose-wrap.processing .record-pill:active {
  box-shadow: 4px 4px 0 #000;
  transform: none;
}

/* ── Mic icon — collapses on open, reveals after pill closes ── */
.mic-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 13px 14px;
  max-width: 200px;
  /* CLOSE: icon fades in after pill has mostly shrunk */
  transition: max-width 0.14s ease 0.24s,
    padding-left 0.14s ease 0.24s,
    padding-right 0.14s ease 0.24s,
    opacity 0.12s ease 0.26s;
}

/* OPEN: icon collapses instantly */
.compose-wrap.recording .mic-icon,
.compose-wrap.processing .mic-icon {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  transition: max-width 0.1s ease,
    padding-left 0.1s ease,
    padding-right 0.1s ease,
    opacity 0.06s ease;
}

/* ── Waveform box (inside pill) ── */
.c-wave-box {
  flex: 1;
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  opacity: 0;
  /* CLOSE: collapses fast */
  transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.08s ease;
}

.compose-wrap.recording .c-wave-box,
.compose-wrap.processing .c-wave-box {
  max-width: 300px;
  padding: 0 14px;
  opacity: 1;
  /* OPEN: spring expand, fades in just after pill starts stretching */
  transition: max-width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    padding 0.3s ease,
    opacity 0.16s ease 0.1s;
}

.c-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FD5A46;
  flex-shrink: 0;
  animation: recPulse 1.1s ease-in-out infinite;
}

.compose-wrap.processing .c-rec-dot {
  animation: none;
  background: #bbb;
}

@keyframes recPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.c-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
}

.wave-bar {
  display: block;
  width: 3px;
  height: 4px;
  background: #000;
  border-radius: 2px;
  transition: height 0.06s ease;
}

/* ── Stop button (inside record-pill) ── */
.c-stop-btn {
  background: #FD5A46;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 0;
  padding: 12px 0;
  opacity: 0;
  pointer-events: none;
  /* CLOSE */
  transition: max-width 0.2s ease,
    padding-left 0.2s ease,
    padding-right 0.2s ease,
    border-color 0.12s ease,
    opacity 0.12s ease;
}

.compose-wrap.recording .c-stop-btn {
  max-width: 50px;
  padding-left: 14px;
  padding-right: 14px;
  border-left-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
  pointer-events: auto;
  /* OPEN: ease only — spring on max-width shifts left edge into wave-box */
  transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
    padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
    padding-right 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
    border-color 0.15s ease 0.25s,
    opacity 0.16s ease 0.18s;
}

.compose-wrap.processing .c-stop-btn {
  max-width: 50px;
  padding-left: 14px;
  padding-right: 14px;
  border-left-color: rgba(0, 0, 0, 0.2);
  opacity: 0.4;
  cursor: not-allowed;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 0.8s linear infinite;
  display: block;
}

/* ── Small phones: shrink the open pill so the spring animation fits ── */
@media (max-width: 430px) {
  .compose-wrap {
    width: 100vw;
    bottom: calc(24px + var(--keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px));
  }

  .compose-wrap.composing .compose-pill {
    max-width: 240px;
  }

  .compose-wrap.composing .c-input {
    max-width: 240px;
  }

  .compose-wrap.recording .record-pill,
  .compose-wrap.processing .record-pill {
    max-width: 200px;
  }

  .compose-wrap.recording .c-wave-box,
  .compose-wrap.processing .c-wave-box {
    max-width: 200px;
  }
}

/* ── Scroll area (task list + empty state) ── */
.scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 8px;
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.scroll-area:hover {
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
.scroll-area::-webkit-scrollbar {
  width: 4px;
}

.scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-area::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.2s;
}

.scroll-area:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}

.scroll-area:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

/* ── Task List ── */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Empty State ── */
.empty-state {
  border: 3px dashed #ddd;
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  color: #aaa;
  font-size: 13px;
  line-height: 1.8;
  display: none;
}

.empty-state.visible {
  display: block;
}

.empty-state .emoji {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}

.empty-state .line1 {
  font-weight: 500;
  font-size: 14px;
  color: #bbb;
}

/* ── Task Card ── */
.task-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  border-radius: 9px;
  animation: slideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
  position: relative;
  overflow: hidden;
}

.task-card:has(.swipe-inner) {
  padding: 0;
}

.swipe-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  box-sizing: border-box;
}

.swipe-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0;
  pointer-events: none;
}

.swipe-bg-left {
  background: #FD5A46;
  color: #fff;
  justify-content: flex-end;
  padding-right: 20px;
}

.swipe-bg-right {
  background: #A388EE;
  color: #fff;
  justify-content: flex-start;
  padding-left: 20px;
}


.task-card.long-press-active,
.task-card.drag-source {
  touch-action: none;
}

@keyframes inputSubmitPulse {
  0%   { box-shadow: 4px 4px 0 #000, 0 0 0 0 rgba(0,0,0,0.35);   transform: scale(1);     background-color: #fff;    border-color: #000; }
  30%  { box-shadow: 4px 4px 0 #000, 0 0 0 14px rgba(0,0,0,0);   transform: scale(1.058); background-color: #e8e8e8; border-color: #555; }
  65%  { transform: scale(0.993); }
  100% { box-shadow: 4px 4px 0 #000, 0 0 0 0 rgba(0,0,0,0);      transform: scale(1);     background-color: #fff;    border-color: #000; }
}

@keyframes inputSubmitPulseDark {
  0%   { box-shadow: 4px 4px 0 #000, 0 0 0 0 rgba(255,255,255,0.2);   transform: scale(1);     background-color: #252525; border-color: #000; }
  30%  { box-shadow: 4px 4px 0 #000, 0 0 0 14px rgba(255,255,255,0);  transform: scale(1.058); background-color: #3a3a3a; border-color: #777; }
  65%  { transform: scale(0.993); }
  100% { box-shadow: 4px 4px 0 #000, 0 0 0 0 rgba(255,255,255,0);     transform: scale(1);     background-color: #252525; border-color: #000; }
}

.input-pulse {
  animation: inputSubmitPulse 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: none !important;
}

[data-theme="dark"] .input-pulse {
  animation-name: inputSubmitPulseDark;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.task-card.exiting {
  animation: slideOut 0.42s ease forwards;
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
}

/* Checkbox */
.task-check {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.15s;
  border: 3px solid currentColor;
}

.task-check:hover {
  transform: scale(1.12);
}

/* Task text */
.task-text {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  flex: 1;
  word-break: break-word;
}

/* Rename input */
.rename-input {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  flex: 1;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
}

/* Edit / Archive / Delete buttons */
.task-archive,
.task-edit,
.task-delete {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s;
  flex-shrink: 0;
  padding: 0;
}

.task-archive:hover,
.task-edit:hover,
.task-delete:hover {
  transform: scale(1.15);
}

.task-delete {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
}

/* .archive-open-btn removed — now lives in HUD */

/* ── Archive modal rows ── */
.archive-card {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 9px;
  cursor: pointer;
  gap: 0;
}

.archive-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.archive-card-text {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  flex: 1;
  word-break: break-word;
}

.archive-card-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease, margin-top 0.25s ease;
  margin-top: 0;
  overflow: hidden;
}

.archive-card-detail>* {
  min-height: 0;
  overflow: hidden;
}

.archive-card.expanded .archive-card-detail {
  grid-template-rows: 1fr;
  margin-top: 10px;
}

.archive-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 0;
  border-top: 1.5px solid transparent;
  transition: border-color 0.2s ease, padding-top 0.2s ease;
}

.archive-card.expanded .archive-detail-inner {
  border-color: rgba(0, 0, 0, 0.15);
  padding-top: 8px;
}

.archive-detail-time {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  opacity: 0.6;
  padding-top: 4px;
}

.archive-detail-desc {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.85;
  white-space: pre-wrap;
  word-break: break-word;
}

.archive-detail-empty {
  opacity: 0.4;
  font-style: italic;
}

.archive-restore-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s;
  flex-shrink: 0;
  padding: 0;
}

.archive-restore-btn:hover {
  transform: scale(1.2);
}

/* ── Reset Button (lives in Completed Tasks modal footer) ── */
.completed-modal-footer {
  padding: 10px 20px 16px;
  border-top: 1.5px solid #eee;
  display: flex;
  justify-content: center;
}

.reset-btn {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: transparent;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  padding: 7px 16px;
  cursor: pointer;
  color: #bbb;
  transition: color 0.15s, border-color 0.15s;
  display: none;
}

.reset-btn.visible {
  display: block;
}

.reset-btn:hover {
  color: #FD5A46;
  border-color: #FD5A46;
}

/* ── Completed Tasks Modal ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal {
  background: #FFFBEA;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 #000;
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.93) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 2px solid #000;
}

.modal-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
}

.modal-close {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: transform 0.12s;
}

.modal-close:hover {
  transform: scale(1.2);
}

.modal-body {
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-empty {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: #aaa;
  text-align: center;
  padding: 24px 0;
}

.completed-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 9px;
  opacity: 0.88;
}

.completed-check {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.3);
  border: 3px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.completed-text {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  flex: 1;
  text-decoration: line-through;
  opacity: 0.75;
  word-break: break-word;
}

.completed-time {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  opacity: 0.6;
  flex-shrink: 0;
}

/* ── Sync icon button ── */
.sync-btn {
  width: 22px;
  height: 22px;
  background: #ccc;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, box-shadow 0.1s;
  padding: 0;
}

.sync-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
}

.sync-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #000;
}

.sync-btn.online {
  background: #90EE90;
}

.sync-btn.offline {
  background: #FD5A46;
}

/* ── Sync Modal ── */
.sync-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sync-modal-overlay.open {
  display: flex;
}

.sync-modal {
  background: #FFFBEA;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 #000;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sync-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 2px solid #000;
}

.sync-modal-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
}

.sync-modal-close {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: transform 0.12s;
}

.sync-modal-close:hover {
  transform: scale(1.2);
}

.sync-modal-body {
  padding: 16px 20px 20px;
}

/* Active room view */
.sync-active {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.sync-room-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  flex-shrink: 0;
}

.sync-room-code {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: #000;
}

.sync-copy-btn {
  background: none;
  border: 2px solid #000;
  border-radius: 5px;
  padding: 2px 8px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
  box-shadow: 2px 2px 0 #000;
  flex-shrink: 0;
}

.sync-copy-btn:hover {
  background: #FFC567;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
}

.sync-copy-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #000;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.status-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  background: #ccc;
  transition: background 0.3s;
  flex-shrink: 0;
}

.status-dot.online {
  background: #00995E;
}

.status-dot.offline {
  background: #FD5A46;
}

.status-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
}

.sync-change-btn {
  background: none;
  border: 2px solid #ddd;
  border-radius: 5px;
  padding: 3px 10px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  color: #aaa;
  transition: color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}

.sync-change-btn:hover {
  color: #552CB7;
  border-color: #552CB7;
}

/* Setup view */
.sync-setup {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.sync-setup-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #888;
  flex-shrink: 0;
}

.sync-create-btn {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  padding: 6px 14px;
  background: #552CB7;
  color: #fff;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow 0.1s, transform 0.1s;
  flex-shrink: 0;
}

.sync-create-btn:hover {
  box-shadow: 4px 4px 0 #000;
  transform: translate(-1px, -1px);
}

.sync-create-btn:active {
  box-shadow: 1px 1px 0 #000;
  transform: translate(1px, 1px);
}

.sync-join-input {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 10px;
  width: 90px;
  border: 2px solid #000;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #000;
  width: 110px;
  outline: none;
  background: #FFFBEA;
}

.sync-join-input:focus {
  box-shadow: 3px 3px 0 #000;
  transform: translate(-1px, -1px);
}

.sync-join-btn {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  padding: 6px 14px;
  background: #FFC567;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow 0.1s, transform 0.1s;
  flex-shrink: 0;
}

.sync-join-btn:hover {
  box-shadow: 4px 4px 0 #000;
  transform: translate(-1px, -1px);
}

.sync-join-btn:active {
  box-shadow: 1px 1px 0 #000;
  transform: translate(1px, 1px);
}

/* ── Description Modal ── */
.desc-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.desc-modal-overlay.open {
  display: flex;
}

.desc-modal {
  background: #FFFBEA;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 #000;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.desc-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 2px solid #000;
  gap: 12px;
}

.desc-modal-task-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  flex: 1;
  word-break: break-word;
  line-height: 1.3;
}

.desc-modal-close {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: transform 0.12s;
  flex-shrink: 0;
}

.desc-modal-close:hover {
  transform: scale(1.2);
}

.desc-modal-body {
  padding: 16px 20px 20px;
}

.desc-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}

.desc-textarea {
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  padding: 10px 12px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  border-radius: 8px;
  background: #fff;
  outline: none;
  min-height: 110px;
  transition: box-shadow 0.15s, transform 0.15s;
  cursor: text;
  white-space: pre-wrap;
  overflow-y: auto;
  line-height: 1.5;
  word-break: break-word;
}

.desc-textarea:focus {
  box-shadow: 6px 6px 0 #000;
  transform: translate(-2px, -2px);
}

.desc-textarea:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
}

.desc-ghost-inline {
  color: #bbb;
  font-style: italic;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}


/* ── Prioritise ghost button ── */
.prioritise-btn {
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: transparent;
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  color: #bbb;
  transition: color 0.15s, border-color 0.15s;
  display: none;
}

.prioritise-btn.visible {
  display: block;
}

.prioritise-btn:hover {
  color: #552CB7;
  border-color: #552CB7;
}

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

/* .summarise-btn removed — now lives in HUD */

/* ── Prioritise modal ── */
.priority-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.priority-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: #fff;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 9px;
}

.priority-rank {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  color: #aaa;
}

.priority-task-text {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  color: #000;
}

.priority-reason {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #888;
  line-height: 1.5;
  margin: 0;
}

.priority-footer {
  padding: 0 20px 20px;
  display: flex;
  justify-content: center;
}

.priority-apply-btn {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  padding: 11px 28px;
  background: #FFC567;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 0.1s, transform 0.1s;
}

.priority-apply-btn:hover {
  box-shadow: 6px 6px 0 #000;
  transform: translate(-2px, -2px);
}

.priority-apply-btn:active {
  box-shadow: 2px 2px 0 #000;
  transform: translate(2px, 2px);
}

.priority-apply-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ── Summarise modal ── */
.summarise-text {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.75;
  color: #333;
  padding: 8px 0;
}

/* ── Summarise retry button ── */
.summarise-retry-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px auto 0;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #aaa;
  background: none;
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.summarise-retry-btn:hover {
  color: #552CB7;
  border-color: #552CB7;
}

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

/* ── Restore-date picker modal ── */
.restore-date-modal {
  max-width: 360px;
  max-height: none;
  overflow: visible;
}

.restore-date-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.restore-date-hint {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: #555;
  line-height: 1.5;
  margin: 0;
}

.restore-date-hint span {
  font-family: 'Archivo Black', sans-serif;
  color: #000;
}

.restore-date-input-wrap {
  position: relative;
  width: 100%;
}

.restore-date-input {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  padding: 12px 44px 12px 14px;
  border: 3px solid #000;
  border-radius: 8px;
  background: #fff;
  outline: none;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  color: transparent;
}

.restore-date-input-wrap.has-value .restore-date-input {
  color: #000;
}

.restore-date-input:focus {
  border-color: #552CB7;
}

.restore-date-input::-webkit-calendar-picker-indicator {
  display: none;
}

.restore-date-placeholder {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.restore-date-input-wrap.has-value .restore-date-placeholder {
  display: none;
}

.restore-date-cal-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #777;
  display: flex;
  align-items: center;
}


.restore-date-footer {
  display: flex;
  gap: 10px;
  padding: 12px 20px 20px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.restore-date-skip-btn {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 2px solid #ddd;
  border-radius: 6px;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.restore-date-skip-btn:hover {
  color: #555;
  border-color: #555;
}

.restore-date-set-btn {
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  padding: 8px 20px;
  background: #552CB7;
  color: #fff;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow 0.1s, transform 0.1s;
}

.restore-date-set-btn:hover:not(:disabled) {
  box-shadow: 5px 5px 0 #000;
  transform: translate(-2px, -2px);
}

.restore-date-set-btn:active:not(:disabled) {
  box-shadow: 1px 1px 0 #000;
  transform: translate(1px, 1px);
}

.restore-date-set-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Archive card restore badge ── */
.archive-restore-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  opacity: 0.75;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Notification toggle (inside sync modal) ── */
.sync-notif-section {
  border-top: 2px solid #000;
  margin-top: 16px;
  padding-top: 14px;
}

.sync-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sync-notif-label {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: #555;
}

.sync-notif-hint {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #aaa;
  margin-top: 6px;
}

.sync-divider {
  border: none;
  border-top: 2px solid #000;
  margin: 14px 0;
}

.notif-toggle-btn {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 6px;
  border: 2px solid #ddd;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.notif-toggle-btn.active {
  border-color: #00995E;
  color: #00995E;
}

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

/* ── Archive footer ── */
.archive-footer {
  padding: 10px 20px 14px;
  border-top: 2px solid #000;
  display: flex;
  justify-content: center;
}

.archive-clear-btn {
  background: none;
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  color: #bbb;
  display: flex;
  align-items: center;
  transition: color 0.15s, border-color 0.15s;
}

.archive-clear-btn:hover {
  color: #FD5A46;
  border-color: #FD5A46;
}

/* ── Daily Summary Modal ── */
.daily-summary-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.daily-summary-overlay.open {
  display: flex;
}

.daily-summary-modal {
  background: #FFFBEA;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 #000;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ds-header {
  display: flex;
  align-items: center;
  padding: 14px 16px 12px;
  border-bottom: 2px solid #000;
  gap: 8px;
}

.ds-nav-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.ds-nav-btn {
  font-size: 24px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  color: #555;
  font-family: 'Archivo Black', sans-serif;
  transition: color 0.12s;
}

.ds-nav-btn:hover:not(:disabled) {
  color: #00995E;
}

.ds-nav-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.ds-date {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  text-align: center;
  min-width: 160px;
}

.ds-close {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: transform 0.12s;
  flex-shrink: 0;
}

.ds-close:hover {
  transform: scale(1.2);
}

.ds-body {
  padding: 20px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  line-height: 1.75;
  color: #333;
  min-height: 90px;
}

.ds-body.no-summary {
  color: #aaa;
  font-style: italic;
}

.ds-footer {
  padding: 12px 20px 16px;
  border-top: 2px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ds-gen-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #aaa;
  background: none;
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.ds-gen-btn:hover:not(:disabled) {
  color: #00995E;
  border-color: #00995E;
}

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

/* ── Daily Summary: sentiment / tone line ── */
.ds-summary-text {
  margin: 0 0 10px;
  line-height: 1.6;
  font-size: 15px;
  color: #000;
}

.ds-tone-line {
  font-size: 11px;
  font-style: italic;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.5;
  margin: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 8px;
}

/* ── Weekly Retrospective button ── */
.ds-weekly-btn {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  background: none;
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ds-weekly-btn:hover:not(:disabled) {
  color: #552CB7;
  border-color: #552CB7;
}

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

/* ── Weekly retro body styles ── */
.ds-back-btn {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #888;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
  transition: color 0.12s;
  display: block;
}

.ds-back-btn:hover {
  color: #000;
}

.ds-retro-heading {
  font-family: 'Archivo Black', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #552CB7;
  margin: 0 0 10px;
}

.ds-retro-text {
  font-size: 14px;
  line-height: 1.75;
  color: #333;
  margin: 0;
}

/* ── Focus Mode ── */
body.focus-mode {
  background-color: #c5c1b4;
}

/* Hero morphs smaller — collapse the top bar */
body.focus-mode .hero-top {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  margin-bottom: -16px;
}

body.focus-mode .hero {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Collapse the compose area so it takes no space */
body.focus-mode .compose-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  margin-top: -16px;
}

/* Progress bar turns purple to signal focus state */
body.focus-mode .progress-fill {
  background-color: #552CB7;
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, 0.15) 6px,
      rgba(255, 255, 255, 0.15) 12px);
}

/* Hint text: FOCUS MODE · tap to exit */
body.focus-mode .progress-click-hint {
  display: block !important;
  color: #552CB7;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  animation: focusHintFade 0.35s ease forwards;
}

/* Fade out remaining UI chrome */
body.focus-mode .prioritise-btn,
body.focus-mode .summarise-btn,
body.focus-mode .reset-btn,
body.focus-mode .archive-open-btn,
body.focus-mode .empty-state,
body.focus-mode .hud {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Give blur room so it isn't clipped by the scroll-area overflow boundary */
body.focus-mode .task-list {
  padding: 0 6px;
  margin: 0 -6px;
}

/* Dim tasks beyond the top 3 */
body.focus-mode .task-list .task-card:nth-child(n+4) {
  opacity: 0.07;
  pointer-events: none;
  filter: blur(3px);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Blur the background grid */
body.focus-mode::before {
  filter: blur(3px);
  opacity: 0.07;
}

@keyframes focusHintFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ── Drag handle ── */
.task-handle {
  cursor: grab;
  opacity: 0.35;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 2px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.task-handle:active {
  cursor: grabbing;
}

@media (pointer: coarse) {
  .task-handle {
    display: none;
  }
  .task-archive,
  .task-delete {
    display: none;
  }
}

.task-card.long-press-active {
  transform: scale(1.02) translate(-1px, -1px);
  box-shadow: 6px 6px 0 #000;
}

.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  border: 3px solid #000;
  border-radius: 9px;
  box-shadow: 8px 8px 0 #000 !important;
  animation: none !important;
}

.drag-placeholder {
  border: 3px dashed #ccc;
  border-radius: 9px;
  background: transparent;
  flex-shrink: 0;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .hero-title {
    font-size: 24px;
  }

  .hero-count {
    font-size: 26px;
  }

  .sync-active {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sync-room-label,
  .sync-room-code {
    flex-shrink: 0;
  }

  .sync-copy-btn {
    flex-shrink: 0;
  }

  .sync-status {
    margin-left: 0;
    flex-shrink: 0;
  }

  .sync-change-btn {
    width: 100%;
    text-align: center;
    margin-top: 2px;
  }

  .sync-setup {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sync-setup-label {
    width: 100%;
  }

  .sync-join-input {
    width: 100%;
  }

  .sync-create-btn,
  .sync-join-btn {
    flex: 1;
  }
}

/* ── Theme Toggle Button ── */
.theme-toggle {
  background: none;
  border: 2px solid #ddd;
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
  line-height: 1;
}

.theme-toggle:hover {
  color: #552CB7;
  border-color: #552CB7;
}

/* ── Dark Theme ── */
@keyframes cardBlinkDark {
  0% {
    background: #252525;
  }

  25% {
    background: #FFC567;
  }

  50% {
    background: #252525;
  }

  75% {
    background: #FFC567;
  }

  100% {
    background: #252525;
  }
}

[data-theme="dark"] body {
  background: #1a1a1a;
}

[data-theme="dark"] body::before {
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  opacity: 0.025;
}

[data-theme="dark"] .hero {
  background: #1e1e1e;
  border-color: #000;
  box-shadow: 6px 6px 0 #000;
}

[data-theme="dark"] .hero-title-it,
[data-theme="dark"] .hero-count {
  color: #FD5A46;
}

[data-theme="dark"] .progress-card {
  background: #252525;
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .progress-card:hover {
  box-shadow: 6px 6px 0 #000;
}

[data-theme="dark"] .progress-card.blink {
  animation: cardBlinkDark 0.7s ease-in-out;
}

@keyframes focusBlinkDark {
  0%   { background: #252525; }
  20%  { background: #552CB7; }
  40%  { background: #252525; }
  60%  { background: #552CB7; }
  80%  { background: #252525; }
  100% { background: #252525; }
}

[data-theme="dark"] .progress-card.focus-blink {
  animation: focusBlinkDark 1.2s ease-in-out;
}

[data-theme="dark"] .progress-track {
  background: #252525;
  border-color: #000;
}

[data-theme="dark"] .progress-fill {
  background-color: #ff7a63;
}

[data-theme="dark"] .progress-fill.complete {
  background-color: #4ecb8f;
}

[data-theme="dark"] .progress-done-msg {
  color: #4ecb8f;
}

[data-theme="dark"] .progress-click-hint {
  color: #6e6e6e;
}

[data-theme="dark"] .compose-pill {
  background: #FD5A46;
  color: #fff;
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .compose-pill:hover {
  box-shadow: 6px 6px 0 #000;
}

[data-theme="dark"] .compose-pill:active {
  box-shadow: 2px 2px 0 #000;
}

[data-theme="dark"] .compose-wrap.composing .compose-pill {
  background: #252525;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .compose-wrap.composing .compose-pill:hover,
[data-theme="dark"] .compose-wrap.composing .compose-pill:active {
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .c-input {
  color: #efefef;
}

[data-theme="dark"] .c-submit-btn {
  color: #efefef;
  border-left-color: transparent;
}

[data-theme="dark"] .compose-wrap.composing .c-submit-btn {
  border-left-color: #444;
}

[data-theme="dark"] .record-pill {
  background: #6b5db8;
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
  color: #efefef;
}

[data-theme="dark"] .record-pill:hover {
  box-shadow: 6px 6px 0 #000;
}

[data-theme="dark"] .record-pill:active {
  box-shadow: 2px 2px 0 #000;
}

[data-theme="dark"] .compose-wrap.recording .record-pill,
[data-theme="dark"] .compose-wrap.processing .record-pill {
  background: #1a1a1a;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .c-wave-box {
  background: transparent;
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .wave-bar {
  background: #efefef;
}

[data-theme="dark"] .c-stop-btn {
  background: #ff7a63;
}

[data-theme="dark"] .empty-state {
  border-color: #000;
  color: #6e6e6e;
}

[data-theme="dark"] .empty-state .line1 {
  color: #4d4d4d;
}

[data-theme="dark"] .task-card {
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .drag-ghost {
  border-color: #000;
  box-shadow: 8px 8px 0 #000 !important;
}

[data-theme="dark"] .drag-placeholder {
  border-color: #000;
}

[data-theme="dark"] .archive-open-btn {
  border-color: #000;
  color: #4d4d4d;
}

[data-theme="dark"] .archive-open-btn:hover {
  color: #8b6dd8;
  border-color: #8b6dd8;
}

[data-theme="dark"] .archive-card {
  border-color: #000;
  box-shadow: 3px 3px 0 #000;
}

[data-theme="dark"] .archive-card-text {
  color: #111;
}

[data-theme="dark"] .archive-detail-time {
  color: #333;
}

[data-theme="dark"] .archive-detail-desc {
  color: #111;
}

[data-theme="dark"] .reset-btn {
  border-color: #000;
  color: #4d4d4d;
}

[data-theme="dark"] .reset-btn:hover {
  color: #ff7a63;
  border-color: #ff7a63;
}

[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .modal {
  background: #252525;
  border-color: #000;
  box-shadow: 8px 8px 0 #000;
  color: #efefef;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: #000;
}

[data-theme="dark"] .modal-close {
  color: #efefef;
}

[data-theme="dark"] .modal-empty {
  color: #6e6e6e;
}

[data-theme="dark"] .completed-card {
  border-color: #000;
  box-shadow: 3px 3px 0 #000;
}

[data-theme="dark"] .sync-btn {
  background: #333333;
  border-color: #000;
  box-shadow: 2px 2px 0 #000;
}

[data-theme="dark"] .sync-btn:hover {
  box-shadow: 3px 3px 0 #000;
}

[data-theme="dark"] .sync-btn:active {
  box-shadow: 1px 1px 0 #000;
}

[data-theme="dark"] .sync-btn.online {
  background: #4ecb8f;
}

[data-theme="dark"] .sync-btn.offline {
  background: #ff7a63;
}

[data-theme="dark"] .sync-modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .sync-modal {
  background: #252525;
  border-color: #000;
  box-shadow: 8px 8px 0 #000;
}

[data-theme="dark"] .sync-modal-header {
  border-bottom-color: #000;
}

[data-theme="dark"] .sync-modal-title {
  color: #efefef;
}

[data-theme="dark"] .sync-modal-close {
  color: #efefef;
}

[data-theme="dark"] .sync-room-label {
  color: #6e6e6e;
}

[data-theme="dark"] .sync-room-code {
  color: #efefef;
}

[data-theme="dark"] .sync-copy-btn {
  border-color: #000;
  box-shadow: 2px 2px 0 #000;
  color: #efefef;
}

[data-theme="dark"] .sync-copy-btn:hover {
  box-shadow: 3px 3px 0 #000;
}

[data-theme="dark"] .sync-copy-btn:active {
  box-shadow: 1px 1px 0 #000;
}

[data-theme="dark"] .status-dot {
  border-color: #000;
  box-shadow: 2px 2px 0 #000;
  background: #333333;
}

[data-theme="dark"] .status-dot.online {
  background: #4ecb8f;
}

[data-theme="dark"] .status-dot.offline {
  background: #ff7a63;
}

[data-theme="dark"] .status-label {
  color: #6e6e6e;
}

[data-theme="dark"] .sync-change-btn {
  border-color: #000;
  color: #6e6e6e;
}

[data-theme="dark"] .sync-change-btn:hover {
  color: #8b6dd8;
  border-color: #8b6dd8;
}

[data-theme="dark"] .sync-setup-label {
  color: #6e6e6e;
}

[data-theme="dark"] .sync-create-btn {
  background: #8b6dd8;
  border-color: #000;
  box-shadow: 3px 3px 0 #000;
}

[data-theme="dark"] .sync-create-btn:hover {
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .sync-create-btn:active {
  box-shadow: 1px 1px 0 #000;
}

[data-theme="dark"] .sync-join-input {
  border-color: #000;
  box-shadow: 2px 2px 0 #000;
}

[data-theme="dark"] .sync-join-input:focus {
  box-shadow: 3px 3px 0 #000;
}

[data-theme="dark"] .sync-join-btn {
  border-color: #000;
  box-shadow: 3px 3px 0 #000;
}

[data-theme="dark"] .sync-join-btn:hover {
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .sync-join-btn:active {
  box-shadow: 1px 1px 0 #000;
}

[data-theme="dark"] .sync-notif-section {
  border-top-color: #000;
}

[data-theme="dark"] .sync-notif-label {
  color: #999999;
}

[data-theme="dark"] .sync-notif-hint {
  color: #6e6e6e;
}

[data-theme="dark"] .notif-toggle-btn {
  border-color: #000;
  color: #6e6e6e;
}

[data-theme="dark"] .notif-toggle-btn.active {
  border-color: #4ecb8f;
  color: #4ecb8f;
}

[data-theme="dark"] .theme-toggle {
  border-color: #000;
  color: #999999;
}

[data-theme="dark"] .theme-toggle:hover {
  color: #b5a0f0;
  border-color: #b5a0f0;
}

[data-theme="dark"] .desc-modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .desc-modal {
  background: #252525;
  border-color: #000;
  box-shadow: 8px 8px 0 #000;
}

[data-theme="dark"] .desc-modal-header {
  border-bottom-color: #000;
}

[data-theme="dark"] .desc-modal-task-title {
  color: #efefef;
}

[data-theme="dark"] .desc-modal-close {
  color: #efefef;
}

[data-theme="dark"] .desc-label {
  color: #6e6e6e;
}

[data-theme="dark"] .desc-textarea {
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .desc-textarea:focus {
  box-shadow: 6px 6px 0 #000;
}

[data-theme="dark"] .desc-textarea:empty::before {
  color: #4d4d4d;
}

[data-theme="dark"] .desc-ghost-inline {
  color: #4d4d4d;
}

[data-theme="dark"] .prioritise-btn,
[data-theme="dark"] .summarise-btn {
  border-color: #000;
  color: #4d4d4d;
}

[data-theme="dark"] .prioritise-btn:hover {
  color: #8b6dd8;
  border-color: #8b6dd8;
}

[data-theme="dark"] .summarise-btn:hover {
  color: #4ecb8f;
  border-color: #4ecb8f;
}

[data-theme="dark"] .priority-item {
  background: #1e1e1e;
  border-color: #000;
  box-shadow: 3px 3px 0 #000;
}

[data-theme="dark"] .priority-rank {
  color: #6e6e6e;
}

[data-theme="dark"] .priority-task-text {
  color: #efefef;
}

[data-theme="dark"] .priority-reason {
  color: #999999;
}

[data-theme="dark"] .priority-apply-btn {
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .priority-apply-btn:hover {
  box-shadow: 6px 6px 0 #000;
}

[data-theme="dark"] .priority-apply-btn:active {
  box-shadow: 2px 2px 0 #000;
}

[data-theme="dark"] .summarise-text {
  color: #cccccc;
}

[data-theme="dark"] .summarise-retry-btn {
  border-color: #000;
  color: #6e6e6e;
}

[data-theme="dark"] .summarise-retry-btn:hover {
  color: #8b6dd8;
  border-color: #8b6dd8;
}

[data-theme="dark"] .restore-date-hint {
  color: #999999;
}

[data-theme="dark"] .restore-date-hint span {
  color: #efefef;
}

[data-theme="dark"] .restore-date-input {
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .restore-date-input:focus {
  box-shadow: 6px 6px 0 #000;
}

[data-theme="dark"] .restore-date-skip-btn {
  border-color: #000;
  color: #6e6e6e;
}

[data-theme="dark"] .restore-date-skip-btn:hover {
  color: #999999;
  border-color: #999999;
}

[data-theme="dark"] .restore-date-set-btn {
  background: #8b6dd8;
  border-color: #000;
  box-shadow: 3px 3px 0 #000;
}

[data-theme="dark"] .restore-date-set-btn:hover:not(:disabled) {
  box-shadow: 5px 5px 0 #000;
}

[data-theme="dark"] .restore-date-set-btn:active:not(:disabled) {
  box-shadow: 1px 1px 0 #000;
}

[data-theme="dark"] .archive-footer {
  border-top-color: #000;
}

[data-theme="dark"] .completed-modal-footer {
  border-top-color: #333;
}

[data-theme="dark"] .archive-clear-btn {
  border-color: #000;
  color: #4d4d4d;
}

[data-theme="dark"] .archive-clear-btn:hover {
  color: #ff7a63;
  border-color: #ff7a63;
}

[data-theme="dark"] .archive-restore-btn {
  color: #999999;
}

[data-theme="dark"] .daily-summary-overlay {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .daily-summary-modal {
  background: #252525;
  border-color: #000;
  box-shadow: 8px 8px 0 #000;
}

[data-theme="dark"] .ds-header {
  border-bottom-color: #000;
}

[data-theme="dark"] .ds-nav-btn {
  color: #999999;
}

[data-theme="dark"] .ds-nav-btn:hover:not(:disabled) {
  color: #4ecb8f;
}

[data-theme="dark"] .ds-date {
  color: #efefef;
}

[data-theme="dark"] .ds-close {
  color: #efefef;
}

[data-theme="dark"] .ds-body {
  color: #cccccc;
}

[data-theme="dark"] .ds-body.no-summary {
  color: #6e6e6e;
}

[data-theme="dark"] .ds-footer {
  border-top-color: #000;
}

[data-theme="dark"] .ds-gen-btn {
  border-color: #000;
  color: #6e6e6e;
}

[data-theme="dark"] .ds-gen-btn:hover:not(:disabled) {
  color: #4ecb8f;
  border-color: #4ecb8f;
}

[data-theme="dark"] .ds-summary-text {
  color: #efefef;
}

[data-theme="dark"] .ds-tone-line {
  color: rgba(239, 239, 239, 0.4);
  border-top-color: rgba(239, 239, 239, 0.08);
}

[data-theme="dark"] .ds-weekly-btn {
  border-color: #000;
  color: #999999;
}

[data-theme="dark"] .ds-weekly-btn:hover:not(:disabled) {
  color: #8b6dd8;
  border-color: #8b6dd8;
}

[data-theme="dark"] .ds-back-btn {
  color: #999999;
}

[data-theme="dark"] .ds-back-btn:hover {
  color: #efefef;
}

[data-theme="dark"] .ds-retro-heading {
  color: #8b6dd8;
}

/* ── Reduced motion: skip spring animations ── */
@media (prefers-reduced-motion: reduce) {
  .compose-pill {
    transition: max-width 0.1s ease;
  }

  .pill-label {
    transition: max-width 0.1s ease, padding 0.1s ease;
  }

  .c-input {
    transition: opacity 0.1s ease;
  }

  .c-submit-btn {
    transition: max-width 0.1s ease, opacity 0.1s ease;
  }
}

[data-theme="dark"] .ds-retro-text {
  color: #cccccc;
}

/* ────────────────────────────────────────────
   Bottom utility HUD pill
   ──────────────────────────────────────────── */
.hud {
  position: fixed;
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  /* translateZ(0) promotes to GPU layer, preventing subpixel shake
     as translateX(-50%) recalculates during the width animation */
  transform: translateX(-50%) translateZ(0);
  z-index: 50;
  height: 40px;
  display: flex;
  align-items: center;
  background: #FFFBEA;
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 4px 4px 0 #000;
  /* overflow: hidden removed — icons use opacity/pointer-events,
     no clipping needed, and hidden recalculates per frame causing glitch */
  width: 60px;
  will-change: width;
  transition: width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hud[data-state="open"] {
  width: 124px;
  transition: width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.container > .hud {
  position: fixed;
  left: 50%;
  bottom: calc(98px + var(--keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateZ(0);
  z-index: 49;
  align-self: auto;
  flex-shrink: 0;
  margin-top: 0;
  transition:
    bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease,
    width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.compose-active .container > .hud {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 430px) {
  .container > .hud {
    bottom: calc(90px + var(--keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px));
  }
}

/* Trigger (three dots) */
.hud-trigger {
  position: absolute;
  /* 27px = half of inner content width (60px total − 6px border = 54px → 27px)
     fixed pixel so it never recalculates during the width animation */
  left: 27px;
  top: 0;
  bottom: 0;
  width: 60px;
  transform: translateX(-50%) translateZ(0);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 1;
  /* slow fade-in when pill closes (destination = this state) */
  transition: opacity 0.45s ease;
  z-index: 2;
}

.hud[data-state="open"] .hud-trigger {
  opacity: 0;
  pointer-events: none;
  /* fast fade-out when pill opens (destination = this state) */
  transition: opacity 0.15s ease;
}

.hud-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.hud-dots span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #777;
  transition: background 0.15s;
}

.hud-trigger:hover .hud-dots span {
  background: #111;
}

/* Icons container */
.hud-icons {
  position: absolute;
  /* fixed size matching the open width — decoupled from the pill's
     width animation so the icon layout never reflows mid-spring.
     Centred over the pill via left 50% / translateX so it stays
     visually centred as the pill springs open. */
  /* 62px = half of the open width (124px) — a fixed pixel value
     so it never recalculates during the width animation */
  left: 62px;
  top: 0;
  bottom: 0;
  width: 124px;
  transform: translateX(-50%) translateZ(0);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  opacity: 0;
  pointer-events: none;
  /* fast fade-out when closing (destination = this state) */
  transition: opacity 0.08s ease;
}

.hud[data-state="open"] .hud-icons {
  opacity: 1;
  pointer-events: auto;
  /* faster, smoother fade-in when opening (destination = this state) */
  transition: opacity 0.12s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

/* Individual icon buttons */
.hud-icon {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s,
    transform 0.18s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.hud-icon:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: scale(1.12);
}

.hud-archive:hover {
  color: #552CB7;
}

.hud-summary:hover {
  color: #00995E;
}

/* Archive badge */
.hud-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #552CB7;
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  display: none;
}

.hud-badge.visible {
  display: block;
}

/* Dark mode overrides */
[data-theme="dark"] .hud {
  background: #252525;
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
}

[data-theme="dark"] .hud-dots span {
  background: #888;
}

[data-theme="dark"] .hud-trigger:hover .hud-dots span {
  background: #eee;
}

[data-theme="dark"] .hud-icon {
  color: #999;
}

[data-theme="dark"] .hud-icon:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .hud-archive:hover {
  color: #9b75e8;
}

[data-theme="dark"] .hud-summary:hover {
  color: #4ac98a;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .hud,
  .hud-trigger,
  .hud-icons,
  .hud-icon {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}