/* The row of buttons under each page's heading: what the page itself does
   (Filters & sort, Add). The page's main button goes at the right end. */
.page-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.page-bar .right { display: flex; gap: 8px; margin-left: auto; }
.action {
  display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: var(--card); color: var(--text);
}
.action svg { width: 18px; height: 18px; flex: none; }
.action[aria-expanded="true"], .action[aria-current="page"] {
  background: var(--accent); color: var(--accent-text); border-color: var(--accent);
}
@media (max-width: 420px) { .action { padding: 9px 11px; font-size: .95rem; } }

/* Phones (nav.js): a tab bar along the bottom instead of the menu. Laptops
   keep the menu. */
.tabbar { display: none; }
@media (max-width: 959px) {
  :root { --tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .menu-open, .menu { display: none !important; }
  /* A button row with nothing left in it takes no room. */
  .page-bar:not(:has(> :not(.menu-open):not(.right))) { display: none; }

  .tabbar {
    display: grid; grid-template-columns: repeat(2, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--card); border-top: 1px solid var(--line);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; padding: 0 2px; color: var(--muted); text-decoration: none;
    font-size: .68rem; font-weight: 600; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tab-icon { position: relative; display: flex; }
  .tab-icon svg { width: 24px; height: 24px; }

  /* Room at the bottom for the tab bar. */
  body { padding-bottom: calc(var(--tabbar-h) + 24px); }
}

/* The menu (nav.js): on laptops a sidebar down the left with every page, the
   current one highlighted, so the button row only holds what the page itself
   does. It stays open, and the page moves over to make room; its hide button
   tucks it away and a small button in the top left corner brings it back.
   (Phones: the tab bar.) */
.menu {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 12; width: 240px;
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--card); border-right: 1px solid var(--line);
  transform: translateX(-100%); visibility: hidden;
}
@media (min-width: 960px) {
  /* Hidden, a narrow strip stays for the button that brings it back. */
  html { --side-w: 56px; }
  html.menu-docked { --side-w: 240px; }
  body { padding-left: var(--side-w); }
  html.menu-docked .menu { transform: none; visibility: visible; }
  html.menu-docked .menu-open { display: none; }
  /* Sliding only when you press hide or show, not as each page opens. */
  html.menu-animate .menu { transition: transform .25s ease, visibility .25s; }
  html.menu-animate body { transition: padding-left .25s ease; }
}
.menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 10px 8px; font-weight: 700; font-size: 1.1rem;
}
.menu-close {
  display: inline-flex; width: auto; margin: 0; padding: 8px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer;
}
.menu-close:hover, .menu-close:focus-visible { background: var(--bg); color: var(--text); }
.menu-close svg { width: 20px; height: 20px; }
.menu .menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px;
  border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left;
  font: inherit; font-weight: 600; text-decoration: none; color: var(--text);
}
.menu .menu-item svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.menu .menu-item:hover, .menu .menu-item:focus-visible { background: var(--bg); }
.menu .menu-item[aria-current="page"] { background: var(--accent); color: var(--accent-text); }
.menu .menu-item[aria-current="page"] svg { color: inherit; }
.menu-open {
  position: fixed; top: 16px; left: 12px; z-index: 12; display: inline-flex; width: auto; margin: 0;
  padding: 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--muted); cursor: pointer;
}
.menu-open:hover, .menu-open:focus-visible { color: var(--text); }
.menu-open svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { html.menu-animate :is(.menu, body) { transition: none; } }

/* Laptops: dropdowns and date boxes follow the page's light or dark colours.
   The browser's own dropdown arrow sits hard against the right edge, so it's
   swapped for one drawn a little way in; color-scheme lets the date box's
   calendar icon turn light on the dark theme instead of staying black.
   (Phones get color-scheme from theme.css.) */
@media (min-width: 960px) {
  :root { color-scheme: light dark; }
  select:not([multiple]) {
    -webkit-appearance: none; appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  }
  input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; }
}
/* Phones: the same arrow drawn a little way in, light on the black theme. */
@media (max-width: 959px) {
  select:not([multiple]) {
    -webkit-appearance: none; appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239d99a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
  }
}
@media (min-width: 960px) and (prefers-color-scheme: dark) {
  select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* Loading: a spinning circle in front of the words (showText in nav.js adds
   .spinning). Messages spin in the accent colour; buttons in their text colour,
   so it shows on a filled button too. .spinner on its own is the circle alone. */
.spinner, .spinning::before {
  content: ""; display: inline-block; flex: none; box-sizing: border-box;
  width: 1em; height: 1em; border-radius: 50%; vertical-align: -.15em;
  border: 2px solid color-mix(in srgb, var(--accent, #8b6cf6) 30%, transparent);
  border-top-color: var(--accent, #8b6cf6);
  animation: spin .7s linear infinite;
}
.spinning::before { margin-right: .5em; }
button.spinning::before, .action.spinning::before {
  border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner, .spinning::before { animation-duration: 2s; } }

/* The round + button in the bottom right corner that adds a task or note,
   on phones only, just above the tab bar (the button row's own Add button
   is left off there). Laptops use the Add button in the row instead. */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 8;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); -webkit-tap-highlight-color: transparent;
}
.fab svg { width: 26px; height: 26px; }
.fab:hover { filter: brightness(1.08); }
.fab:active { transform: scale(.95); }
[hidden] > .fab, .fab[hidden] { display: none; }
@media (min-width: 960px) { .fab { display: none; } }
@media (max-width: 959px) {
  .fab { right: 16px; bottom: calc(var(--tabbar-h) + 16px); }
  .page-bar .add { display: none; }
}

/* Tasks and Notes in the menu open out to list their sections (nav.js). */
.menu-group { display: flex; flex-direction: column; gap: 2px; }
.menu .menu-chevron { width: 16px; height: 16px; margin-left: auto; transition: transform .15s ease; }
.menu-item[aria-expanded="true"] .menu-chevron { transform: rotate(90deg); }
.menu-sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px; }
.menu-sub[hidden] { display: none; }
.menu-sub-item {
  display: block; flex: 1; min-width: 0; padding: 7px 12px 7px 14px; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: .93rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-sub-row { position: relative; display: flex; align-items: center; border-radius: 8px; }
.menu-sub-row .menu-sub-item { padding-left: calc(14px + var(--depth, 0) * 23px); }
.menu-sub-item:hover, .menu-sub-item:focus-visible { background: var(--bg); color: var(--text); }
.menu-sub-item[aria-current="true"] { color: var(--accent); font-weight: 600; background: var(--chip); }
/* + for a subsection, shown when you point at the section. */
.menu .menu-sub-add {
  position: absolute; right: 4px; display: inline-flex; width: auto; margin: 0; padding: 4px;
  border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; opacity: 0;
}
.menu-sub-add svg { width: 15px; height: 15px; }
.menu .menu-sub-row .menu-sub-add:not(.menu-sub-more) { right: 28px; }
.menu .menu-sub-more { right: 4px; }
.menu-sub-row:hover .menu-sub-add, .menu .menu-sub-add:focus-visible { opacity: 1; }
.menu .menu-sub-add:hover { color: var(--accent); background: var(--card); }
/* Between sections: a line with a round + at its left when pointed at. */
.menu-gap { position: relative; height: 6px; margin: -2px 0 -2px calc(6px + var(--depth, 0) * 23px); }
.menu .menu-gap button {
  position: absolute; inset: 0; display: flex; align-items: center; width: 100%; margin: 0; padding: 0;
  border: 0; background: none; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.menu .menu-gap button::after { content: ""; flex: 1; height: 2px; margin-left: 4px; border-radius: 1px; background: var(--accent); }
.menu-gap button svg {
  width: 16px; height: 16px; padding: 2px; flex: none; box-sizing: border-box;
  border-radius: 50%; background: var(--accent); color: var(--accent-text); stroke-width: 3;
}
.menu .menu-gap button:hover, .menu .menu-gap button:focus-visible { opacity: 1; }
.menu-sub.reordering .menu-gap { visibility: hidden; }
.menu .menu-sub-new {
  display: flex; align-items: center; gap: 6px; width: auto; margin: 2px 0 0 8px; padding: 6px;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: .9rem;
}
.menu-sub-new svg { width: 15px; height: 15px; }
.menu .menu-sub-new:hover { color: var(--accent); background: var(--bg); }
/* Dragging a section in the menu. */
.menu-sub { -webkit-user-select: none; user-select: none; }
.menu-sub-row.moving { opacity: .4; }
.menu-sub-row.drop-inside { outline: 2px solid var(--accent); outline-offset: -2px; }
.menu-sub-row.drop-before::before, .menu-sub-row.drop-after::after {
  content: ""; position: absolute; left: calc(6px + var(--depth, 0) * 23px); right: 0; height: 2px;
  border-radius: 1px; background: var(--accent); pointer-events: none;
}
.menu-sub-row.drop-before::before { top: -1px; }
.menu-sub-row.drop-after::after { bottom: -1px; }
@media (prefers-reduced-motion: reduce) { .menu .menu-chevron { transition: none; } }
/* Naming a new section in place (section-moves.js). */
.menu .section-naming { padding: 2px 4px 2px calc(6px + var(--depth, 0) * 23px); }
.section-naming input {
  width: 100%; margin: 0; padding: 6px 8px; font: inherit; font-size: .93rem; color: var(--text);
  background: var(--card); border: 1px solid var(--accent); border-radius: 8px; outline: none;
}
/* Rename / Delete under a section in the menu. */
/* A small dropdown under the ⋯ of a section in the menu. */
.menu-sub-actions {
  position: absolute; z-index: 30; top: 100%; right: 0; margin-top: 2px; min-width: 130px;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}
.menu .menu-sub-actions button {
  width: 100%; margin: 0; padding: 7px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  text-align: left; font: inherit; font-size: .9rem; font-weight: 500; color: var(--text);
}
.menu .menu-sub-actions button:hover { background: var(--bg); }
.menu .menu-sub-actions button:last-child { color: var(--error, #c92a2a); }
.menu-sub-row[hidden] { display: none; }
/* A section's icon in the menu, and the icon picker there. */
.menu-sub-item { display: flex; align-items: center; gap: 8px; }
.menu-sub-item svg { width: 15px; height: 15px; flex: none; }
.menu .icon-picker { margin-left: calc(6px + var(--depth, 0) * 23px); }
/* The whole row (name, + and ⋯) is one button-like strip. */
.menu-sub-row .menu-sub-item { flex: 1; min-width: 0; padding-right: 56px; background: none !important; }
.menu-sub-row:hover, .menu-sub-row:focus-within { background: var(--bg); }
.menu-sub-row:has(> [aria-current="true"]) { background: var(--chip); }
.menu .menu-sub-row .menu-sub-add:hover { background: none; }

/* The box that asks before deleting (confirmDelete in nav.js). */
dialog.confirm {
  width: min(340px, calc(100% - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
dialog.confirm[open] { animation: confirm-in .18s ease; }
dialog.confirm::backdrop { background: rgba(0, 0, 0, .5); }
dialog.confirm p { margin: 0 0 18px; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.confirm-actions { display: flex; gap: 8px; }
.confirm-actions button {
  flex: 1; margin: 0; padding: 11px 12px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
}
.confirm-no { background: none; color: var(--text); border: 1px solid var(--line); }
.confirm-yes { background: var(--error); color: #fff; border: 0; }
/* Three ways to go (Delete from both, Just this list, Cancel): one under
   another, the red one on top. */
.confirm-actions:has(.confirm-also:not([hidden])) { flex-direction: column-reverse; }
.confirm-actions .confirm-plain { background: none; color: var(--error); border: 1px solid var(--line); }
@keyframes confirm-in { from { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { dialog.confirm[open] { animation: none; } }
.confirm-actions button:focus { outline: none; }
.confirm-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The page's heading when a section (or the Inbox) is picked: its icon and
   name, with the sections it's in small above it (sections.js). */
h1.section-title { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
h1.section-title svg { width: .9em; height: .9em; flex: none; }
h1.section-title .section-path {
  flex-basis: 100%; margin-bottom: 2px; font-size: .9rem; font-weight: 500; color: var(--muted);
}

/* How many tasks are still to do in a section (sectionTools.counts). In the
   menu, a section's + and ⋯ take its place when you point at it. */
.section-count {
  margin-left: auto; padding-left: 8px; flex: none;
  font-size: .82rem; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums;
}
.menu-sub-row .section-count { position: absolute; right: 12px; pointer-events: none; }
.menu-sub-row:hover .section-count, .menu-sub-row:focus-within .section-count { visibility: hidden; }
.menu-sub-item[aria-current="true"] .section-count { color: var(--accent); }
/* A line under Master on Packing lists in the menu (nav.js). */
.menu-divider { height: 1px; margin: 4px 8px 4px 14px; background: var(--line); }

/* Personal | Work (space.js, nav.js): in the laptop menu under its heading,
   and at the top of the page on phones, which have no menu. The space
   you're in is the raised one. */
.space-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px;
  border-radius: 8px; background: color-mix(in srgb, var(--text) 7%, transparent);
}
.space-switch button {
  width: auto; margin: 0; padding: 4px 8px; border: 0; border-radius: 6px;
  background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.space-switch button:hover { color: var(--text); }
.space-switch button[aria-pressed="true"] {
  background: var(--card); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
}
.space-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.menu-space { margin: 0 0 10px; }
.page-space { margin: 0 0 12px; }
@media (min-width: 960px) { .page-space { display: none; } }