/* Handmade: pencil-on-paper tokens first. Everything below uses these. */
:root {
  --shell-switcher-size: 48px;
  --shell-switcher-inset: 16px;
  --shell-switcher-gap: 16px;
  --shell-slot: 80px; /* inset + size + gap: the corner the shell owns */

  --paper: #f6f9fc;
  --grid: #d9e6f2;
  --card: #ffffff;
  --ink: #1d3557;
  --ink-deep: #152a45;
  --graphite: #4a4a52;
  --muted: #5c5c66;
  --red: #b3342e;
  --line: #2f4a73;
  --shadow: #c3cfdd;
  --margin-red: #e3b6b3;

  --font-body: 'Karla', 'Trebuchet MS', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;

  --corner-1: 9px 4px 10px 5px / 5px 10px 4px 9px;
  --corner-2: 4px 9px 5px 10px / 10px 4px 9px 5px;
  --corner-3: 8px 5px 11px 4px / 4px 9px 5px 10px;
  --corner-4: 5px 10px 4px 9px / 9px 5px 10px 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--paper); }
body {
  min-height: 100dvh;
  font: 16px/1.5 var(--font-body);
  color: var(--ink-deep);
  /* The page paints its own background edge to edge: a white base (the same
     white the cards are) with the paper tint and the grid ruled over it, so
     the colour behind the phone's bars is the page's own wherever the cards
     are not. */
  background-color: var(--card);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--paper), var(--paper));
  background-size: 26px 26px, 26px 26px, auto;
}

/* The page is the phone-first floor. Wide windows grow it, never shrink it. */
.page {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 20px 40px 52px;
  padding-right: calc(20px + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px)));
  /* The corner below is the shell's when it keeps its button: exactly
     --shell-slot, the way the starter keeps it. The page's own breathing room
     lives on the last section, not here. */
  padding-bottom: calc(max(var(--shell-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)) + var(--shell-slot));
  padding-left: calc(52px + max(var(--shell-safe-left, 0px), env(safe-area-inset-left, 0px)));
}
.page::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 34px;
  width: 1.5px;
  background: var(--margin-red);
  pointer-events: none;
}

.top-bar {
  position: sticky; top: 0; z-index: 1;
  background: transparent;
  display: flex; align-items: flex-end; gap: 12px;
  margin: 0; padding-bottom: 4px;
  padding-top: calc(24px + max(var(--shell-safe-top, 0px), env(safe-area-inset-top, 0px)));
  padding-right: calc(20px + max(var(--shell-safe-right, 0px), env(safe-area-inset-right, 0px)));
  padding-left: calc(20px + max(var(--shell-safe-left, 0px), env(safe-area-inset-left, 0px)));
}
.top-bar .page-heading { flex: 1; min-width: 0; margin: 0; }
@media (min-width: 760px) {
  .top-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr); gap: 0; align-items: start; }
  .top-bar .page-heading { grid-column: 2; }
  .top-bar .note-trigger { grid-column: 3; justify-self: end; }
}
@media (min-width: 900px) {
  /* The page grows to 1100px here; the heading keeps to the content's column:
     1100px less the page's side padding (52px + 20px) and the tab row's own
     2px offset, centred like the page, so both boxes start together. */
  .top-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 992px) minmax(0, 1fr); }
}
.page-heading {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--ink);
  transform: rotate(-1.2deg);
  margin: 0;
}
.page-sub {
  font-size: 0.78rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 0;
  transform: rotate(-0.4deg);
}

.note-trigger {
  appearance: none; flex: none;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1.8px solid var(--line); border-radius: var(--corner-2);
  background: var(--card); color: var(--ink);
  transform: rotate(0.6deg);
  box-shadow: 2px 3px 0 var(--shadow);
}
.note-trigger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.squiggle { display: block; margin: 8px 0 18px 2px; }
.week-label {
  font-family: var(--font-hand);
  font-size: 1.3rem; font-weight: 600;
  color: var(--graphite);
  margin: 0 0 8px 2px;
  transform: rotate(-0.6deg);
}
.week { display: flex; gap: 6px; margin-bottom: 22px; padding-left: 4px; }
.day {
  flex: 1 1 0;
  background: var(--card);
  border: 1.8px solid var(--line);
  padding: 7px 0 5px;
  text-align: center;
  box-shadow: 2px 3px 0 var(--shadow);
  min-width: 0;
}
.day:nth-child(1) { border-radius: var(--corner-1); transform: rotate(-1deg); }
.day:nth-child(2) { border-radius: var(--corner-2); transform: rotate(0.8deg) translateY(1px); }
.day:nth-child(3) { border-radius: var(--corner-3); transform: rotate(-0.5deg); }
.day:nth-child(4) { border-radius: var(--corner-4); transform: rotate(1.1deg); }
.day:nth-child(5) { border-radius: var(--corner-1); transform: rotate(-1.3deg) translateY(1px); }
.day:nth-child(6) { border-radius: var(--corner-2); transform: rotate(0.6deg); }
.day:nth-child(7) { border-radius: var(--corner-4); transform: rotate(-0.8deg); }
.day .dl { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.day .dn { display: block; font-family: var(--font-hand); font-size: 1.25rem; font-weight: 600; color: var(--ink-deep); line-height: 1.1; }
.day.today .dn { text-decoration: underline wavy var(--line) 1.4px; text-underline-offset: 3px; }
.day .ring { display: block; margin: 2px auto 0; }

.sect { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px 2px; transform: rotate(-0.5deg); flex-wrap: wrap; }
.sect h2 { font-family: var(--font-hand); font-size: 1.6rem; font-weight: 700; color: var(--ink); margin: 0; }
.sect .count { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.8px; }
.facts {
  font-size: 0.9rem; color: var(--graphite);
  background: var(--card);
  border: 1.8px dashed var(--line);
  border-radius: var(--corner-3);
  padding: 8px 12px;
  margin: 0 0 16px 2px;
  transform: rotate(0.3deg);
}

.tabs { display: flex; gap: 8px; margin: 0 0 16px 2px; flex-wrap: wrap; }
.tab {
  appearance: none;
  font-family: var(--font-hand); font-size: 1.15rem; font-weight: 600;
  color: var(--graphite);
  background: var(--card);
  border: 1.8px solid var(--line);
  border-radius: var(--corner-2);
  padding: 4px 14px 5px;
  cursor: pointer;
  box-shadow: 2px 3px 0 var(--shadow);
}
.tab:nth-child(odd) { transform: rotate(-0.8deg); }
.tab:nth-child(even) { transform: rotate(0.7deg); }
.tab.on { color: var(--ink); text-decoration: underline wavy var(--red) 1.5px; text-underline-offset: 5px; }
.tab:focus-visible, .button:focus-visible, .btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.note {
  background: var(--card);
  border: 2px solid var(--line);
  box-shadow: 3px 4px 0 var(--shadow);
  padding: 14px 16px 13px 14px;
  margin-bottom: 16px;
  display: flex;
  gap: 13px;
  position: relative;
}
.note:nth-of-type(1) { border-radius: 14px 5px 16px 6px / 6px 15px 5px 14px; transform: rotate(-0.7deg); }
.note { border-radius: 12px 6px 15px 5px / 5px 13px 6px 15px; }
.note:nth-of-type(2n) { transform: rotate(0.6deg); }
.note:nth-of-type(3n) { transform: rotate(-0.4deg); }
.note h3 { font-family: var(--font-hand); font-size: 1.4rem; font-weight: 600; line-height: 1.15; color: var(--ink-deep); margin: 0; }
.note .who { font-size: 0.9rem; color: var(--graphite); margin: 1px 0 0; }
.note .when { font-size: 0.8rem; color: var(--muted); margin: 5px 0 0; letter-spacing: 0.4px; }
.note .body { flex: 1; min-width: 0; }
.note .thumb { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; border: 1.6px solid var(--line); border-radius: var(--corner-1); }
.picture-missing {
  flex: none;
  display: block;
  width: 64px; height: 64px;
  border: 1.6px dashed var(--line);
  border-radius: var(--corner-1);
  background: var(--paper);
  color: var(--muted);
  font-family: var(--font-hand); font-size: 1.6rem;
  display: grid; place-items: center;
}
.tag {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 1rem; font-weight: 600; line-height: 1;
  padding: 3px 9px 4px;
  border: 1.6px solid var(--graphite);
  border-radius: 10px 4px 11px 4px / 4px 10px 4px 11px;
  color: var(--graphite);
  transform: rotate(-1.5deg);
  margin-top: 7px;
  margin-right: 6px;
}
.tag.red { border-color: var(--red); color: var(--red); }
.tag.solid { background: var(--ink); border-color: var(--ink-deep); color: #fff; }
.row-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn {
  appearance: none;
  font-family: var(--font-hand); font-size: 1.05rem; font-weight: 600;
  padding: 2px 12px 3px;
  border: 1.6px solid var(--line);
  border-radius: var(--corner-4);
  background: var(--card); color: var(--ink);
  cursor: pointer;
  min-height: 36px;
}
.btn.primary { background: var(--ink); border-color: var(--ink-deep); color: #fff; }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.starred { border-color: var(--red); color: var(--red); }
.quiet { color: var(--muted); margin: 0; }
.empty {
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: var(--corner-1);
  box-shadow: 2px 3px 0 var(--shadow);
  padding: 18px 16px;
  margin-bottom: 16px;
  transform: rotate(-0.4deg);
}
.empty p { margin: 0 0 10px; color: var(--graphite); }
.empty h3 { font-family: var(--font-hand); font-size: 1.4rem; color: var(--ink); margin: 0 0 6px; }

.new {
  display: block;
  width: 100%;
  font-family: var(--font-hand);
  font-size: 1.45rem; font-weight: 700; letter-spacing: 0.5px;
  color: #ffffff;
  background: var(--ink);
  border: 2px solid var(--ink-deep);
  border-radius: 16px 6px 18px 7px / 7px 16px 6px 17px;
  box-shadow: 3px 4px 0 var(--shadow);
  padding: 10px 0 11px;
  text-align: center;
  text-decoration: none;
  transform: rotate(-0.5deg);
  cursor: pointer;
  margin-bottom: 12px;
}
.new.secondary { background: var(--card); color: var(--ink); }
.in-nav {
  display: flex; gap: 26px;
  margin-top: 30px;
  margin-bottom: 36px;
  padding: 12px 0 4px 6px;
  border-top: 1.8px solid var(--line);
  transform: rotate(-0.3deg);
  flex-wrap: wrap;
}
.in-nav span { font-family: var(--font-hand); font-size: 1.05rem; color: var(--muted); }

dialog.app-dialog {
  border: 2px solid var(--line);
  border-radius: var(--corner-1);
  background: var(--card);
  color: var(--ink-deep);
  box-shadow: 4px 5px 0 var(--shadow);
  width: min(480px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  font-family: var(--font-body);
}
dialog.app-dialog::backdrop { background: rgba(21, 42, 69, 0.35); }
dialog.app-dialog h2 { font-family: var(--font-hand); font-size: 1.7rem; color: var(--ink); margin: 0 0 10px; }
dialog.app-dialog label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--graphite); margin-bottom: 10px; }
dialog.app-dialog input, dialog.app-dialog select, dialog.app-dialog textarea {
  font: inherit; color: var(--ink-deep);
  border: 1.6px solid var(--line); border-radius: var(--corner-2);
  background: var(--paper); padding: 8px 10px; width: 100%;
}
dialog.app-dialog .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-preview { width: 100%; max-height: 180px; object-fit: cover; border: 1.6px solid var(--line); border-radius: var(--corner-3); }
.form-err { color: var(--red); font-size: 0.9rem; min-height: 1.4em; margin: 0 0 6px; }
.pieces-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.price { font-weight: 600; color: var(--ink); }

button, input, select, textarea { font: inherit; }
.button {
  appearance: none; border: 2px solid var(--ink-deep); border-radius: var(--corner-2); padding: 12px 18px;
  background: var(--ink); color: #fff; cursor: pointer;
  font-family: var(--font-hand); font-size: 1.2rem; font-weight: 700;
}

#toast {
  position: fixed; left: 16px; right: var(--shell-slot);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--shell-switcher-inset));
  pointer-events: none;
  z-index: 5;
}
#toast:empty { display: none; }
#toast > * { background: var(--ink-deep); color: var(--paper); border-radius: 12px; padding: 12px 16px; }

/* Wide window: a real layout, never a stranded strip. */
@media (min-width: 900px) {
  .page { max-width: 1100px; padding-top: 26px; }
  .columns { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
  .pieces-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
}