/* Design tokens. Every color, size and offset below comes from here;
   docs/design-system.md says what each is for. */
:root {
  color-scheme: light dark;

  /* Neutrals and roles (stone grays, blue accent). */
  --bg: #fafaf9;
  --fg: #1c1917;
  --muted: #78716c;
  --line: #e7e5e4;
  --accent: #2563eb;
  --on-accent: #ffffff;
  --danger: #dc2626;

  /* Memphis pops: playful accents for direct manipulation (reordering). */
  --pop-pink: #f472b6;
  --pop-yellow: #facc15;
  --pop-cyan: #22d3ee;
  --pop-ink: #0c0a09;
  --pop-offset-sm: 3px;
  --pop-offset-lg: 4px;

  --shadow-sheet: 0 -4px 12px rgb(0 0 0 / 0.2);

  /* Spacing, on a 4px step. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-pop: 0.25rem;
  --radius-control: 0.375rem;
  --radius-panel: 0.5rem;

  --font-sans: system-ui, sans-serif;
  --text-sm: 0.875rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;

  --measure: 40rem;

  font-family: var(--font-sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1917;
    --fg: #f5f5f4;
    --muted: #a8a29e;
    --line: #44403c;
    --accent: #60a5fa;
    --danger: #f87171;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4);
}

/* The title bar: the page's own controls, then the account icon, over a
   heavy ink rule. */
header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--fg);
  margin-bottom: var(--space-4);
}
header .spacer { flex: 1; }

h1 { margin: 0; flex: 1; font-size: var(--text-xl); font-weight: 800; }

a { color: var(--accent); }

input[type="text"] {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 2px solid var(--line);
  border-radius: var(--radius-pop);
  padding: var(--space-2);
  min-width: 0;
}
input[type="text"]:focus { border-color: var(--fg); }

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

/* Buttons. The primary one is a pop: yellow, ink-outlined, with a hard
   pink shadow. Everything else is an ink outline on nothing. */
button, a.button {
  font: inherit;
  font-weight: 800;
  border: 2px solid var(--fg);
  border-radius: var(--radius-pop);
  padding: var(--space-2) var(--space-3);
  background: var(--pop-yellow);
  color: var(--pop-ink);
  box-shadow: var(--pop-offset-sm) var(--pop-offset-sm) 0 var(--pop-pink);
  cursor: pointer;
}
button:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pop-pink);
}

button:disabled { opacity: 0.3; cursor: default; }
button.secondary, a.button.secondary {
  background: transparent;
  color: var(--fg);
  font-weight: 600;
  box-shadow: none;
}
a.button {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  text-decoration: none;
}
button.secondary[aria-expanded="true"] { background: var(--fg); color: var(--bg); }
button.danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
  font-weight: 600;
  box-shadow: none;
}
button.secondary:active, button.danger:active { transform: translate(1px, 1px); box-shadow: none; }
button.icon {
  background: transparent;
  color: var(--muted);
  border: none;
  box-shadow: none;
  font-weight: 400;
  padding: var(--space-2);
  min-width: 2.25rem;
}

.back {
  font-size: var(--text-2xl);
  text-decoration: none;
  padding: 0 var(--space-2);
}

input.list-title {
  flex: 1;
  font-size: var(--text-lg) !important;
  font-weight: 800;
  border-color: transparent !important;
}

ul { list-style: none; margin: 0; padding: 0; }

/* Lists overview: each list an ink-outlined card with a thin ink bar for
   how much is done. No pops here: it's content. */
ul.lists { display: flex; flex-direction: column; gap: var(--space-3); }
.lists li a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border: 2px solid var(--fg);
  border-radius: var(--radius-pop);
  text-decoration: none;
  color: inherit;
}
.lists .title { font-weight: 700; overflow-wrap: anywhere; }
.lists .bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.lists .bar span { display: block; height: 100%; background: var(--fg); }

.progress { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.items li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border-bottom: 1px solid var(--line);
  padding: var(--space-1) 0;
}

/* Checkboxes: an ink box that fills cyan with an ink tick when done. */
.items input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0 var(--space-2);
  border: 2px solid var(--fg);
  border-radius: var(--radius-pop);
  background: transparent center / 0.875rem no-repeat;
  cursor: pointer;
}
.items input[type="checkbox"]:checked {
  background-color: var(--pop-cyan);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0a09' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  box-shadow: 2px 2px 0 var(--fg);
}
.items .text { flex: 1; border-color: transparent; }
.items li.done .text { text-decoration: line-through; color: var(--muted); }

/* Pick-and-place. While moving, the gaps between rows are the targets,
   drawn over the rows' edges so the list doesn't change height, and the
   rows' own controls are out of reach. */
.items li { position: relative; }
.items li.moving {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
  border-radius: var(--radius-pop);
  box-shadow: var(--pop-offset-lg) var(--pop-offset-lg) 0 var(--pop-cyan);
}
.items .grip[aria-pressed="true"] { color: var(--accent); }
.items.moving li[data-id] > * { pointer-events: none; }
.items.moving li[data-id] > .gutter { pointer-events: auto; }
.items.moving .delete { visibility: hidden; }

.items li.end-gutter {
  height: 0;
  padding: 0;
  border: none;
}

.items .gutter {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -15px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.items li.end-gutter .gutter { top: -14px; }
.items .gutter::before {
  content: "";
  position: absolute;
  left: 0;
  right: 2.75rem;
  top: calc(50% - 1px);
  border-top: 2px dotted color-mix(in srgb, var(--fg) 45%, transparent);
}
/* Memphis arrows, their colors taking turns down the list. */
.items .gutter .arrow {
  position: absolute;
  right: 0.25rem;
  top: 0;
  width: 2.5rem;
  height: 1.75rem;
  overflow: visible;
  --face: var(--pop-pink);
  --shade: var(--pop-yellow);
}
.items li:nth-child(3n + 2) .gutter .arrow { --face: var(--pop-yellow); --shade: var(--pop-cyan); }
.items li:nth-child(3n) .gutter .arrow { --face: var(--pop-cyan); --shade: var(--pop-pink); }
.items .gutter .face { fill: var(--face); stroke: var(--fg); stroke-width: 1.5; }
.items .gutter .shadow { fill: var(--shade); }
.items .gutter:hover::before,
.items .gutter:active::before { border-top-style: solid; }
.items .gutter:hover .arrow,
.items .gutter:active .arrow { transform: translateX(-3px); }
.items .gutter:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.mover {
  position: fixed;
  /* Above the drop targets (z-index 1) of rows scrolled under it. */
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 2px solid var(--fg);
  box-shadow: var(--shadow-sheet);
}
/* A zigzag riding the sheet's top edge. */
.mover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 1.25rem;
  width: 3rem;
  height: 12px;
  background: var(--pop-pink);
  clip-path: polygon(0 85%, 12% 15%, 25% 85%, 37% 15%, 50% 85%, 62% 15%, 75% 85%, 87% 15%, 100% 60%, 100% 100%, 87% 50%, 75% 100%, 62% 50%, 50% 100%, 37% 50%, 25% 100%, 12% 50%, 0 100%);
}
.mover button.pop {
  background: var(--pop-yellow);
  color: var(--pop-ink);
  border: 2px solid var(--fg);
  border-radius: var(--radius-pop);
  box-shadow: var(--pop-offset-sm) var(--pop-offset-sm) 0 var(--pop-pink);
  font-weight: 800;
}
.mover-text { flex: 1; min-width: 0; }
.mover p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mover .moving-item { font-weight: 600; }
.mover .hint { color: var(--muted); font-size: var(--text-sm); }

form.add {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

form.add input { flex: 1; }

footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-8);
  /* Room for the add button, so the last controls scroll clear of it. */
  margin-bottom: 5.5rem;
}

/* The add button: a Memphis pebble floating at the bottom centre. Being
   narrow and centred, it only ever passes over item text, never a row's
   checkbox, grip or delete. */
.fab {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  width: 3.5rem;
  height: 3.5rem;
  margin-left: -1.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  box-shadow: none;
}
.fab:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.fab .pebble { width: 100%; height: 100%; }

/* The pebble (supp_ui::Pebble): yellow, ink-outlined, with a hard pink
   shadow; its glyph (a + or a tick) in ink. */
.pebble { overflow: visible; }
.pebble .shadow { fill: var(--pop-pink); }
.pebble .face { fill: var(--pop-yellow); stroke: var(--fg); stroke-width: 3; stroke-linejoin: round; }
.pebble .glyph { fill: none; stroke: var(--pop-ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

/* Adding items: a sheet over the list that stays open between items. */
dialog.add-sheet {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  border: none;
  border-top: 2px solid var(--fg);
  background: var(--bg);
  color: var(--fg);
}
dialog.add-sheet::backdrop { background: rgb(12 10 9 / 0.45); }
.add-sheet form.add { flex-direction: column; gap: var(--space-3); margin: 0; }
.add-head, .add-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.add-foot { align-items: center; }
.add-head h2 { margin: 0; font-size: 1.125rem; font-weight: 800; overflow-wrap: anywhere; }
.add-row { display: flex; gap: var(--space-2); }
.add-row input { flex: 1; }
.add-sheet .hint { margin: 0; color: var(--muted); font-size: var(--text-sm); }

.status { color: var(--muted); }
.status.error { color: var(--danger); }

/* The account icon: an avatar whose badge says how syncing is going. */
.account { position: relative; flex: none; }
.account-icon {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: var(--fg);
}
.account-icon:active:not(:disabled) { transform: none; box-shadow: none; }
.account-icon svg { width: 100%; height: 100%; overflow: visible; }
.account-icon .ink { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; }
.account-icon .dashed { stroke-dasharray: 5 3.5; }
.account-icon text { fill: var(--fg); font: 800 14px var(--font-sans); }
.account-icon .halo { fill: var(--bg); }
.account-icon .cloud { fill: var(--pop-cyan); stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; }
.account-icon .tick { fill: none; stroke: var(--pop-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.account-icon .offline { fill: var(--bg); stroke: var(--danger); stroke-width: 2; }
.account-icon .warn { fill: var(--pop-yellow); stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; }
.account-icon .warn-mark { stroke: var(--pop-ink); stroke-width: 2; stroke-linecap: round; }
.account-icon .warn-dot { fill: var(--pop-ink); }

.account-scrim { position: fixed; inset: 0; z-index: 19; }
.account-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(16rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg);
  border: 2px solid var(--fg);
  border-radius: var(--radius-pop);
  box-shadow: var(--pop-offset-lg) var(--pop-offset-lg) 0 var(--fg);
  font-size: var(--text-sm);
}
.account-panel[hidden] { display: none; }
.account-panel p { margin: 0; }
.account-panel .who { font-weight: 800; font-size: 1rem; }
.account-panel .muted { color: var(--muted); }
.account-panel button { align-self: flex-start; }

/* Notes that need attention sit under the title bar as outlined boxes. */
.notices { display: flex; flex-direction: column; gap: var(--space-2); }
.notices:not(:empty) { margin-bottom: var(--space-4); }
.notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 2px solid var(--fg);
  border-radius: var(--radius-pop);
  font-size: var(--text-sm);
}
.notice p { margin: 0; }
.notice button { align-self: flex-start; }
.notice .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }


.sync-status { color: var(--muted); }
.sync-status[data-status="Offline"] { color: var(--danger); }

select {
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 2px solid var(--fg);
  border-radius: var(--radius-pop);
  padding: var(--space-2);
}

.share {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 2px solid var(--fg);
  border-radius: var(--radius-pop);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.share p { margin: 0; }
.share .hint { color: var(--muted); font-size: var(--text-sm); }

form.share-new {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

form.share-new label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
}

.share-created { display: flex; gap: var(--space-2); }
.share-created input { flex: 1; }

.share-links li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}

.share-links button { font-size: var(--text-sm); padding: var(--space-1) var(--space-2); }

/* The server's sign-in pages (crates/server/src/auth/page.rs), which
   compile this stylesheet in. */
main.auth {
  max-width: 26rem;
  padding-block: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
main.auth header { margin-bottom: 0; }
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 800;
}
.brand .mark { width: 2.5rem; height: 2.5rem; }
.auth-form { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
}
.auth-form input[type="text"] { font-size: 1rem; color: var(--fg); }
.auth-form button { align-self: flex-start; }
.auth .notice code { font-size: 0.8125rem; }