/* Colours from iamrob.in: ink on paper, light only. */
:root {
  color-scheme: light;
  --text: #1a1919; /* ink */
  --muted: color-mix(in oklch, #1a1919 62%, #eae8e3);
  --line: #d2d1ca; /* inset */
  --bg: #eae8e3; /* paper */
  --surface: #f4f3f0;
  font: 18px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: 34rem;
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) 1.25rem calc(5rem + env(safe-area-inset-bottom));
}

button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible, .is-focus { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 0.25rem; }

/* .is-hover / .is-focus / .is-focused force states on /design-system */

/* ---------- header ---------- */

header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.75rem; }
header .week-meta { display: flex; flex: 1; flex-wrap: wrap; align-items: center; min-width: 0; gap: 0 0.75rem; }
.view-switch { display: flex; flex: none; gap: 0.125rem; padding: 0.125rem; border: 1px solid var(--line); border-radius: 0.375rem; }
.view-switch button { min-height: 2rem; padding: 0.25rem 0.625rem; border-radius: 0.25rem; color: var(--muted); font-size: 0.8125rem; }
.view-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; }
header .header-actions { position: relative; flex: none; margin-inline-start: auto; margin-inline-end: -0.5rem; }
#app .week-head:has(.header-menu) { position: relative; z-index: 5; }
header .header-menu {
  position: absolute;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline-end: 0;
  z-index: 5;
  display: grid;
  width: min(17rem, calc(100vw - 2.5rem));
  max-height: calc(100dvh - 7rem - env(safe-area-inset-bottom));
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background: var(--surface);
  box-shadow: 0 0.5rem 1.25rem color-mix(in oklch, var(--text) 10%, transparent);
  font-size: 0.875rem;
}
header .header-menu button { min-height: 2.5rem; padding-inline: 0.625rem; text-align: start; }
header .header-menu .menu-layout { display: grid; gap: 0.375rem; margin-bottom: 0.25rem; padding: 0.25rem 0.25rem 0.625rem; border-bottom: 1px solid var(--line); }
header .header-menu .menu-caption { padding-inline: 0.375rem; color: var(--muted); font-size: 0.75rem; }
header .header-menu .view-switch button { flex: 1; text-align: center; }
header .header-menu .view-switch button[aria-pressed="true"] { background: var(--bg); }
@media (hover: hover) and (pointer: fine) { header .header-menu button:hover { background: var(--bg); } }
.icon-btn { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; color: var(--muted); border-radius: 0.375rem; }
.icon-btn svg { width: 1.25rem; height: 1.25rem; overflow: visible; }
.icon-btn:hover, .icon-btn.is-hover { color: var(--text); }
@media (max-width: 30rem) {
  header { flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0; }
  header.week-head { flex-wrap: nowrap; }
}
h1 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.range { margin: 0; color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* ---------- footer: turn pages ---------- */

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.foot .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  min-height: 3rem;
  font-size: 0.875rem;
}
.foot button { min-height: 3rem; padding: 0 0.25rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.foot button:hover, .foot button.is-hover { color: var(--text); }
.foot .today { text-decoration: underline; text-underline-offset: 0.2em; }
.foot .mobile-nav { display: none; }

/* ---------- list ---------- */

ul { list-style: none; margin: 0; padding: 0; }
.item { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; border-bottom: 1px solid var(--line); }
.priority { position: absolute; left: -1.125rem; top: 0.875rem; width: 1rem; height: 1rem; pointer-events: none; }
.priority svg { display: block; width: 100%; height: 100%; }
.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; }

.bullet {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 3rem;
  margin-left: -0.375rem;
}
.bullet svg { width: 1.125rem; height: 1.125rem; overflow: visible; }

.text, .edit {
  flex: 1;
  min-width: 0;
  min-height: 3rem;
  padding: 0.7rem 0;
  text-align: left;
  overflow-wrap: anywhere;
}
.bullet, .text { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } /* long press = drag */
.edit { border: 0; border-bottom: 1px solid var(--text); margin-bottom: -1px; background: transparent; }
.edit:focus { outline: none; }

.ref { color: var(--muted); font-size: 0.875rem; }

.s-done .text, .s-moved .text, .s-scheduled .text, .s-cancelled .text { color: var(--muted); }
.s-moved .bullet, .s-scheduled .bullet, .s-cancelled .bullet { color: var(--muted); }
.s-cancelled .label-text { text-decoration: line-through; }

/* ---------- drag (logic in drag.js) ---------- */

body.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.item.dragging {
  position: relative;
  z-index: 1;
  pointer-events: none;
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  background: var(--surface);
  border-bottom-color: transparent;
  border-radius: 0.375rem;
  box-shadow: 0 0 0 0.5rem var(--surface), 0 0.5rem 1rem color-mix(in oklch, var(--text) 12%, transparent);
}
.group.drop-target { background: var(--surface); box-shadow: 0 0 0 0.75rem var(--surface); border-radius: 0.25rem; }

/* ---------- task context card ---------- */

#app .item:has(.task-card) { z-index: 2; }
.task-card {
  position: absolute;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline-start: var(--card-x, 0px);
  z-index: 3;
  display: grid;
  gap: 0.375rem;
  width: min(17rem, 100%);
  max-height: calc(100dvh - 7rem - env(safe-area-inset-bottom));
  overflow-y: auto;
  padding: 0.875rem;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background: var(--surface);
  box-shadow: 0 0.5rem 1.25rem color-mix(in oklch, var(--text) 10%, transparent);
  font-size: 0.875rem;
}
.task-card.above { inset-block-start: auto; inset-block-end: calc(100% + 0.25rem); }
/* Above the task, put the icons at the lower edge so they stay close to the trigger. */
.task-card.above .card-rest { order: 1; padding-top: 0; border: 0; }
.task-card.above .card-icons { order: 2; padding-top: 0.625rem; border-top: 1px solid var(--line); }
#app .task-card.is-sheet {
  position: fixed;
  inset-block-start: auto;
  inset-block-end: calc(3.5rem + env(safe-area-inset-bottom));
  inset-inline-start: var(--card-viewport-x, 1.25rem);
  width: min(17rem, calc(100vw - 2.5rem));
}
.task-card .card-icons { display: flex; gap: 0.25rem; padding-block: 0.375rem; }
.task-card .card-icons .icon-btn { width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); border-radius: 0.25rem; }
.task-card .icon-btn svg { width: 1.125rem; height: 1.125rem; }
.task-card .card-icons .icon-btn:hover, .task-card .card-icons .icon-btn[aria-pressed="true"] { color: var(--text); border-color: var(--muted); }
.task-card .danger-icon { margin-inline-start: auto; }
.task-card .card-rest { padding-top: 0.375rem; border-top: 1px solid var(--line); }
.task-card .card-rest select, .task-card .card-rest button { width: 100%; min-height: 2.5rem; padding: 0.375rem 0.5rem; border: 0; background: transparent; text-align: start; font-size: inherit; }
.task-card .card-rest select:hover, .task-card .card-rest button:hover { background: var(--bg); }

/* ---------- section and migration actions ---------- */

.actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0 0 0.875rem 1.875rem; }
.actions button, .actions select {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background: var(--surface);
  font-size: 0.875rem;
}
.actions select { appearance: none; cursor: pointer; }
.actions button:hover, .actions select:hover, .actions .is-hover { border-color: var(--muted); }
.actions .danger { margin-left: auto; border-color: transparent; background: none; color: var(--muted); }

/* ---------- desktop board ---------- */

#app.is-board {
  display: flex;
  flex-direction: column;
  max-width: 90rem;
  min-height: 100vh;
  min-height: 100dvh;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
#app.is-board > .pending { max-width: 34rem; }
#app.is-board .board-scroller { display: flex; flex: 1; }
.board-scroller { overflow-x: auto; overflow-y: auto; overscroll-behavior-x: contain; padding: 0.125rem 0.125rem 1rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.board { display: flex; flex: 1; align-items: stretch; gap: 0.875rem; min-width: min-content; }
#app.is-board .board .group, .board-new {
  flex: 0 0 18rem;
  min-height: 14rem;
  padding: 0.75rem;
}
#app.is-board .board .group,
#app.is-board .board .group + .group,
#app.is-board .board .group:has(> .quick-add):last-of-type { margin: 0; }
#app.is-board .board .group.drop-target { box-shadow: none; }
#app.is-board .board .group > .quick-add { position: static; margin-top: 0.25rem; }
#app.is-board .board .quick-add svg, #app.is-board .board .quick-add-hint { opacity: 0.75; }
.board-new .section-form { margin: 0; }
#app.is-board .board .task-card.board-fixed {
  position: fixed;
  inset-block-start: var(--card-viewport-y, 0px);
  inset-block-end: auto;
  inset-inline-start: var(--card-viewport-x);
  width: min(17rem, calc(100vw - 2.5rem));
}

/* ---------- sections ---------- */

.group + .group { margin-top: 1.75rem; }
.group:not(.is-empty) + .group.is-empty { margin-top: 2.25rem; }
/* Reserve one shared gap for the quick-add hit area, not an extra row. */
#app .group:has(> .quick-add) { position: relative; }
#app .group:has(> .quick-add) + .group { margin-top: 2.5rem; }
#app .group:has(> .quick-add):not(.is-empty) + .group.is-empty { margin-top: 2.75rem; }
#app .group:has(> .quick-add):last-of-type { margin-bottom: 2.5rem; }
.group.is-empty .section { font-weight: 500; }
.group.is-empty .section .name { color: var(--muted); }
.group.is-empty .section .name:hover { color: var(--text); }
.section { position: relative; display: flex; flex-wrap: wrap; align-items: center; margin: 0; font-size: 0.875rem; font-weight: 600; }
.section .name { flex: 1; min-width: 0; min-height: 2.5rem; padding: 0.375rem 0; text-align: left; overflow-wrap: anywhere; }
.section > .icon-btn { margin-right: -0.5rem; }
.section .section-controls { display: flex; align-items: center; flex: none; }
.section .section-controls .icon-btn:disabled { opacity: 0.3; }
.section > .more-section, .section-menu { display: none; }
#app .group:has(.section-menu) { position: relative; z-index: 3; }
@media (hover: hover) and (pointer: fine) {
  .section .section-controls, .section > .icon-btn { opacity: 0; }
  .section:hover .section-controls, .section:focus-within .section-controls,
  .section:hover > .icon-btn, .section:focus-within > .icon-btn, .section.is-hover > .icon-btn { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  header .header-menu .menu-layout, header .header-menu .mobile-duplicate, .foot .week-nav { display: none; }
  .foot .mobile-nav { display: flex; padding-inline: 0.75rem; }
  .foot .mobile-nav button { flex: none; width: 2.5rem; min-height: 3rem; padding: 0; white-space: nowrap; }
  .foot .mobile-nav .today { font-size: 0.8125rem; }
  #app .group > .quick-add { display: none; }
  #app .group:has(> .quick-add) + .group { margin-top: 1.75rem; }
  #app .group:has(> .quick-add):not(.is-empty) + .group.is-empty { margin-top: 2.25rem; }
  #app .group:has(> .quick-add):last-of-type { margin-bottom: 0; }
  .section .section-controls { display: none; }
  .section > .icon-btn:not(.more-section) { margin-right: 0; }
  .section > .more-section { display: grid; }
  .section-menu {
    position: absolute;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-end: 0;
    z-index: 4;
    display: grid;
    width: min(17rem, 100%);
    max-height: calc(100dvh - 7rem - env(safe-area-inset-bottom));
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    background: var(--surface);
    box-shadow: 0 0.5rem 1.25rem color-mix(in oklch, var(--text) 10%, transparent);
    font-size: 0.875rem;
    font-weight: 400;
  }
  .section-menu.above { inset-block-start: auto; inset-block-end: calc(100% + 0.25rem); }
  .section-menu.is-sheet { position: fixed; inset-block-start: auto; inset-block-end: calc(3.5rem + env(safe-area-inset-bottom)); inset-inline-end: max(1.25rem, calc(50% - 17rem)); }
  .section-menu button { min-height: 2.5rem; padding-inline: 0.625rem; text-align: start; }
  .section-menu button:not(:disabled):hover { background: var(--bg); }
  .section-menu button:disabled { opacity: 0.4; }
  .section-menu .danger { margin-top: 0.25rem; border-top: 1px solid var(--line); color: var(--muted); }
}
@media (max-width: 18rem) { .foot .mobile-nav { padding-inline: 0.25rem; } }
.section .edit { flex: 1; min-height: 2.25rem; padding: 0.375rem 0; font-weight: 600; }
.section .actions { padding: 0 0 0.25rem; font-weight: 400; align-items: center; }
.section .actions .note { color: var(--muted); font-size: 0.875rem; margin-right: 0.375rem; }
.section-form { margin-top: 1.75rem; }
.section-form input { padding-left: 0; font-size: 0.875rem; font-weight: 600; }

/* ---------- add ---------- */

.quick-add { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.5rem; padding-inline: 0.35rem; text-align: start; color: var(--muted); }
#app .group > .quick-add { position: absolute; inset-block-start: 100%; inset-inline: 0; }
.quick-add svg { flex: none; width: 1.125rem; height: 1.125rem; opacity: 0.65; }
.quick-add-hint { opacity: 0; font-size: 0.8125rem; }
.quick-add:hover svg, .quick-add:focus-visible svg,
.quick-add:hover .quick-add-hint, .quick-add:focus-visible .quick-add-hint { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .quick-add svg { opacity: 0; } }

.add input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0 0.7rem 1.875rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.add input:focus, .add.is-focused input { border-bottom-color: var(--text); }
.add input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
::placeholder { color: var(--muted); opacity: 1; }

/* ---------- migration ---------- */

.pending { margin-bottom: 2rem; padding: 0.875rem 1rem 0.375rem; background: var(--surface); border-radius: 0.5rem; }
.pending h2 { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.pending p { margin: 0.25rem 0; }
.priority-inline { margin-right: 0.375rem; font-weight: 700; }
.pending .actions { padding-left: 0; }
.pending .actions button { background: var(--bg); }

.status { color: var(--muted); font-size: 0.875rem; margin-top: 1.25rem; }

/* ---------- settings ---------- */

.settings { display: grid; gap: 0.75rem; }
.settings label { font-size: 0.875rem; color: var(--muted); }
.settings textarea {
  width: 100%;
  min-height: 8rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background: var(--surface);
  font: inherit;
  color: inherit;
  resize: vertical;
}
.settings textarea:focus { outline: none; border-color: var(--muted); }
.settings .save { justify-self: start; padding: 0.5rem 1rem; border-radius: 0.375rem; background: var(--text); color: var(--bg); font-weight: 600; }
.settings .status { margin: 0; }
.backup { display: grid; justify-items: start; gap: 0.75rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.backup h2 { margin: 0; font-size: 0.875rem; font-weight: 600; }
.backup p { margin: 0; font-size: 0.875rem; color: var(--muted); }
.backup label { margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; }
.backup button, .backup input::file-selector-button { padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 0.375rem; background: var(--surface); cursor: pointer; }
.backup button:disabled { opacity: 0.5; cursor: default; }
.backup input { max-width: 100%; font-size: 0.875rem; }
.backup input::file-selector-button { margin-inline-end: 0.75rem; color: var(--text); font: inherit; }
.backup .status { color: var(--text); }

/* ---------- login ---------- */

.login { display: grid; gap: 0.75rem; max-width: 18rem; margin: 20vh auto 0; text-align: center; }
.login input { padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 0.375rem; background: var(--surface); }
.login input:focus, .login input.is-focused { outline: none; border-color: var(--muted); }
.login button { padding: 0.6rem; border-radius: 0.375rem; background: var(--text); color: var(--bg); font-weight: 600; }