/* Shared styles for the Railway pages, copied from WeWeb's design system
   (colour tokens and classes). Page-specific styles live in each page's own
   CSS file. WeWeb's breakpoints: tablet up to 991px, phone up to 767px. */

:root {
  --cream: #FAF7F1;
  --surface: #FFFFFF;
  --accent: #E0638F;
  --accent-soft: #FCEBEE;
  --tile-pink: #FCE0E7;
  --berry-text: #B23E68;
  --overdue-red: #D2453F;  /* the red circle round something overdue (2026-10-12) */
  --charcoal: #2E2A33;
  --ink: #231F28;
  --forest: #2F5A4B;
  --mint: #D3EFDF;
  --butter: #FBE9CC;
  --sky: #DDE8F5;
  --rose: #F7CBD3;
  --lemon: #FFF1A8;
  --lilac: #EADFF5;
  --oat: #EDE6DC;
  --border: #EDE6DC;
  --text-secondary: #57515D;   /* x83 (d318): a shade darker, so second lines read on yellow, butter and mint */
  --sage-strong: #5E7355;
  --blob-1: 46% 54% 58% 42% / 55% 42% 58% 45%;
  --blob-2: 52% 48% 40% 60% / 45% 58% 42% 55%;
  --blob-3: 60% 40% 55% 45% / 50% 60% 40% 50%;
  --blob-4: 38% 62% 47% 53% / 58% 39% 61% 42%;
  /* The blob wobble for wide things (chips, buttons, tabs): each corner a
     different size, set across in px so a long one doesn't stretch into
     a thin oval, and down in % so the sides stay blobby (2026-10-12,
     Kathryn: blobs, not pills) */
  --pill-1: 30px 14px 26px 12px / 64% 40% 60% 36%;
  --pill-2: 14px 30px 12px 26px / 42% 62% 38% 58%;
  --pill-3: 24px 18px 32px 12px / 58% 38% 62% 42%;
  /* Handwriting (2026-10-11, docs/edie-design-system.md part 3): Caveat in
     the Notebook, Fredoka in Cards, Patrick Hand on the Noticeboard. The
     style class on <html> (EdieShell.setStyle) or a pop-up's look sets
     --font-hand; write var(--font-hand) / var(--hand-weight), never Caveat. */
  --font-hand-notebook: 'Caveat', cursive;
  --font-hand-cards: 'Fredoka', 'Nunito', sans-serif;
  --font-hand-board: 'Patrick Hand', 'Caveat', cursive;
  --font-hand: var(--font-hand-notebook);
  --hand-weight: 700;
  --hand-weight-light: 600;
  /* Caveat writes small: other handwriting is drawn a little smaller */
  --hand-scale: 1;
}
.style-notebook, .look-notebook { --font-hand: var(--font-hand-notebook); --hand-weight: 700; --hand-weight-light: 600; --hand-scale: 1; }
.style-cards, .look-cards { --font-hand: var(--font-hand-cards); --hand-weight: 600; --hand-weight-light: 500; --hand-scale: 0.8; }
.style-board, .look-board { --font-hand: var(--font-hand-board); --hand-weight: 400; --hand-weight-light: 400; --hand-scale: 0.92; }
/* The sign-up (login) style: no handwriting, Nunito headings */
.style-login, .look-login { --font-hand: 'Nunito', 'Jost', sans-serif; --hand-weight: 900; --hand-weight-light: 800; --hand-scale: 0.8; }

* { box-sizing: border-box; }
[hidden], [v-cloak] { display: none !important; }
body { font: 400 16px/1.5 'Jost', sans-serif; color: var(--charcoal); }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, textarea, select { font: inherit; }

/* containers/page-wrapper */
.page-wrapper { display: flex; flex-direction: column; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
/* containers/page-hero */
.page-hero { position: relative; padding: 8px 4px 4px; }

/* text */
.text-hero-title { font: 900 38px/1.08 'Nunito', sans-serif; color: var(--forest); margin: 0; text-wrap: balance; }
.text-hero-sub { font: 500 15px/1.45 'Jost', sans-serif; color: var(--ink); }
.text-label-caps { font: 500 12px/1.4 'Jost', sans-serif; color: var(--text-secondary); letter-spacing: 0.12em; text-transform: uppercase; }
.text-body { font: 400 16px/1.5 'Jost', sans-serif; color: var(--charcoal); }
.text-muted { font: 400 14px/1.5 'Jost', sans-serif; color: var(--text-secondary); }
.text-card-title { font: 700 17px/1.35 'Nunito', sans-serif; color: var(--charcoal); }
.text-section-title { font: 700 22px/1.3 'Nunito', sans-serif; color: var(--charcoal); }
.empty-state { font: italic 400 14px/1.5 'Jost', sans-serif; color: var(--text-secondary); padding: 8px 2px; }

/* chips/chip, chip-hover, chip-active */
.chip { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 9999px;
  background-color: var(--surface); cursor: pointer; transition: background-color 0.2s ease, border 0.2s ease, transform 0.2s ease; }
.chip:hover { transform: translateY(-1px); background-color: var(--accent-soft); }
.chip.selected, .chip.selected:hover { border: 1px solid var(--forest); box-shadow: none; background-color: var(--forest); }
/* Anything selected is dark green with light text (2026-10-08, Kathryn) */
.chip.selected, .chip.selected .chip-text, .chip.selected .text-body { color: var(--cream); }
.chip.selected .person-dot { box-shadow: 0 0 0 1.5px var(--cream); }
.chips { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
/* media/person-dot */
.person-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 9999px; }

/* accents/badge */
.badge { font: 600 12px/1.4 'Jost', sans-serif; color: var(--sage-strong); padding: 3px 10px; border-radius: 9999px; background-color: var(--mint); }

/* lists/check-blob (+ hover) */
.check-blob { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 17px; border: none; cursor: pointer;
  border-radius: var(--blob-2); background-color: transparent; box-shadow: inset 0 0 0 2px var(--forest);
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.check-blob:hover { transform: scale(1.15); background-color: var(--mint); }

/* buttons/btn-icon (+ hover) */
.btn-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 9999px;
  background-color: var(--surface); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; }
.btn-icon:hover { transform: scale(1.06); background-color: var(--accent-soft); }

/* buttons/btn-primary, btn-secondary, btn-danger-text (+ hovers) */
.btn-primary { font: 500 15px/1.45 'Jost', sans-serif; color: var(--cream); padding: 10px 20px; border-radius: 9999px; background-color: var(--forest);
  cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(224,99,143,0.25); transform: translateY(-1px); background-color: var(--accent); }
.btn-secondary { font: 500 15px/1.45 'Jost', sans-serif; color: var(--charcoal); padding: 10px 20px; border: 1px solid var(--border); border-radius: 9999px;
  background-color: var(--surface); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; }
.btn-secondary:hover:not(:disabled) { transform: translateY(-1px); background-color: var(--accent-soft); }
.btn-danger-text { font: 500 15px/1.45 'Jost', sans-serif; color: var(--berry-text); padding: 10px 12px; border-radius: 9999px; background-color: transparent;
  cursor: pointer; transition: background-color 0.2s ease; }
.btn-danger-text:hover:not(:disabled) { background-color: var(--accent-soft); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger-text:disabled { opacity: 0.6; cursor: wait; }

/* buttons/add-chip (+ hover) */
.add-chip { font: 500 15px/1.45 'Jost', sans-serif; color: var(--charcoal); display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px dashed var(--border); border-radius: 9999px; background-color: var(--cream); cursor: pointer;
  transition: background-color 0.2s ease, border 0.2s ease, transform 0.2s ease; }
.add-chip:hover { border: 1px dashed var(--accent); transform: translateY(-1px); background-color: var(--accent-soft); }

/* buttons/fab-blob: the floating + */
.fab-blob { position: fixed; right: 28px; bottom: 28px; z-index: 41; display: flex; align-items: center; justify-content: center; width: 62px; height: 58px;
  border-radius: var(--blob-1); background-color: var(--forest); color: #FFFFFF; box-shadow: 0 8px 18px rgba(47,90,75,0.3); cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
.fab-blob:hover { box-shadow: 0 8px 22px rgba(46,42,51,0.28); transform: scale(1.06); }
.fab-backdrop { position: fixed; inset: 0; z-index: 39; background-color: rgba(46,42,51,0.08); }
.fab-menu { position: fixed; right: 28px; bottom: 96px; z-index: 41; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab-option { padding: 12px 22px; border: 0 solid transparent; box-shadow: 0 6px 14px rgba(46,42,51,0.14); }
.fab-option:hover { border: 0 solid transparent; }

/* inputs */
.field-group { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.field-label { font: 500 15px/1.45 'Jost', sans-serif; color: var(--charcoal); }
.input-field { font: 400 16px/1.5 'Jost', sans-serif; color: var(--charcoal); width: 100%; padding: 10px 12px; border: 1.5px solid #E2DACE; border-radius: 12px;
  background-color: #FFFFFF; outline: none; transition: border 0.15s ease, box-shadow 0.15s ease; }
.input-field:focus { border: 1.5px solid var(--forest); box-shadow: 0 0 0 3px var(--mint); }

/* Pop-ups: an index card (2026-10-09, Kathryn's pick, option B on the
   paper pop-ups mock-up): white, washi tape, a slight tilt, a x to close,
   labels written in the pink margin and every line of writing on a ruled
   line. The frame is EdieUi.Modal / EdieUi.confirm (ui.js); fitLabels there
   decides which labels go in the margin (.paper-margin/.paper-label). */
.modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px;
  background-color: rgba(46,42,51,0.4); }
.modal-paper { position: relative; display: flex; max-width: 100%; transform: rotate(-0.4deg); will-change: transform; }
.paper-tape { position: absolute; z-index: 7; top: -11px; left: calc(50% - 60px); width: 120px; height: 24px; transform: rotate(-2deg);
  background-color: rgba(247,203,211,0.92); box-shadow: 0 1px 2px rgba(46,42,51,0.08); pointer-events: none; }
.modal-close { position: absolute; z-index: 8; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background-color: rgba(46,42,51,0.06); color: var(--charcoal); transition: background-color 0.15s ease, transform 0.15s ease; }
.modal-close:hover { background-color: var(--accent-soft); transform: rotate(6deg); }
.modal-close:focus-visible, .modal-card button:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.modal-card { --paper-rule: #DCEAF2; --paper-line: #F0A3B5; --paper-x: 44px; --pitch: 34px;
  display: flex; flex-direction: column; gap: 14px; width: 560px; max-width: calc(100vw - 32px); max-height: 90vh; overflow-y: auto;
  padding: 30px 26px 24px var(--paper-x); border-radius: 4px; background-color: #FFFFFF; box-shadow: 0 18px 44px rgba(46,42,51,0.26);
  background-image: linear-gradient(var(--paper-line), var(--paper-line)); background-repeat: repeat-y; background-attachment: local;
  background-size: 2px 100%; background-position: calc(var(--paper-x) - 16px) 0; }
.modal-card.paper-margin { --paper-x: 124px; }
/* No headings to line up with (2026-10-19, tracker x54): no side line; the top line stays */
.modal-card.paper-plain { --paper-x: 26px; background-image: none; }
.modal-form { display: flex; flex-direction: column; gap: 10px; }
/* Fields follow one another line by line, like writing down a card */
.modal-card.paper-lined :is(.modal-form, .event-fields) { gap: 0; }
.modal-card.paper-lined :is(.modal-form, .event-fields) > :not(.field-group, .toggle-row, .field-row, .modal-float-actions, .event-fields) { margin: 8px 0; }
.modal-card.paper-lined .field-group > .text-muted { padding: 2px 0 6px; }
/* 2026-10-14 (Kathryn: the berry words were "very close/scrunched up"):
   in the Notebook, a little air before each field's handwritten label */
.look-notebook .modal-card :is(.modal-form, .event-fields) > :is(.field-group, .toggle-row, .field-row) + :is(.field-group, .toggle-row, .field-row) { margin-top: 14px; }
.look-notebook .modal-card .field-group { gap: 6px; }
/* The title: handwritten, on the card's pink header line, clear of the x */
.modal-card > h2, .modal-card > .meal-editor-header h2, .modal-card .modal-form > h2:first-of-type, .modal-card .runs-plan-title {
  font: var(--hand-weight) 34px/1.05 var(--font-hand); color: var(--charcoal); margin-right: 34px; text-wrap: balance; }
.modal-card > h2 { padding-bottom: 8px; margin-left: calc(-1 * var(--paper-x) + 12px); padding-left: calc(var(--paper-x) - 12px);
  margin-right: -26px; padding-right: 60px; border-bottom: 2px solid var(--paper-line); }
/* Simpler edie, phase 1 (Kathryn, 9 Nov, Workbook d288, d287): every editor ends with a
   strip along the bottom of the pop-up, Cancel (an outline pill) and Save (a forest pill
   with the word, no tick blob). It stays there as the form scrolls above it, so it never
   covers a field. The strip reaches the card's edges: EdieUi.Modal sets --mp-l/-r/-b to the
   card's own padding. A pop-up with a Cancel has no x (Cancel asks "Save your changes?" as
   the x did); one with nothing to save keeps its x. */
.modal-float-actions { position: sticky; bottom: calc(-1 * var(--mp-b, 24px)); z-index: 5; order: 99; align-self: stretch; display: flex; align-items: center;
  justify-content: flex-end; gap: 10px; margin: 16px calc(-1 * var(--mp-r, 26px)) calc(-1 * var(--mp-b, 24px)) calc(-1 * var(--mp-l, 44px));
  padding: 12px var(--mp-r, 26px) 14px var(--mp-l, 44px); background-color: #FFFFFF; border-top: 1.5px solid var(--border);
  box-shadow: 0 -6px 14px rgba(46,42,51,0.06); }
.modal-float-actions .modal-cancel { display: inline-flex; align-items: center; padding: 9px 20px; border: 1.5px solid #E7E0D5; border-radius: 9999px;
  background-color: #FFFFFF; }
.modal-paper:has(.modal-float-actions .modal-cancel) > .modal-close { display: none; }
.modal-card button[type="submit"].btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 9999px;
  font-weight: 600; font-size: 16px; }
.modal-card button[type="submit"].btn-primary:hover:not(:disabled) { background-color: var(--forest); box-shadow: 0 4px 12px rgba(47,90,75,0.3); }
.modal-delete-row { order: 98; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 18px 0 0 0; padding: 10px 0 0 0; border-top: 0; }
.modal-delete-row .btn-danger-text { padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.modal-delete-row .btn-danger-text:hover:not(:disabled) { background-color: transparent; color: var(--accent); }

/* Writing on the lines. Every line is --pitch tall: a typed line sits on
   its own rule, chips wrap onto ruled lines, notes are lined paper. */
.modal-card .field-label { font: var(--hand-weight) 20px/22px var(--font-hand); color: var(--berry-text); }
.modal-card .field-group { position: relative; gap: 2px; }
.modal-card .field-group.paper-label { gap: 0; min-height: var(--pitch); }
.modal-card .paper-label > .field-label, .modal-card .paper-label > * > .field-label, .modal-card .toggle-row.paper-label > .field-label {
  position: absolute; top: 0; left: calc(12px - var(--paper-x) - var(--label-shift, 0px)); width: calc(var(--paper-x) - 12px);
  height: var(--pitch); padding: 10px 22px 0 0; text-align: right; white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--paper-rule); }
.modal-card .paper-beside { flex-direction: row; align-items: flex-end; gap: 10px; }
.modal-card .paper-beside > .field-label { flex: none; height: var(--pitch); padding-top: 10px; border-bottom: 1px solid var(--paper-rule); }
.modal-card .paper-beside > .input-field { flex: 1 1 auto; min-width: 0; }
.modal-card .input-field:not(textarea), .modal-card select.input-field {
  height: var(--pitch); padding: 11px 2px 1px; font: 400 16px/21px 'Jost', sans-serif; border: 0; border-bottom: 1px solid var(--paper-rule); border-radius: 0;
  background-color: transparent; box-shadow: none; }
.modal-card .input-field:focus { border: 0; border-bottom: 2px solid var(--forest); box-shadow: none;
  background-color: rgba(211,239,223,0.35); }
.modal-card .input-field::placeholder { color: #A9A2AC; }
.modal-card textarea.input-field { --notes-pad: 4px; padding: var(--notes-pad) 2px 0; border: 0; border-radius: 0; font: 400 16px/var(--pitch) 'Jost', sans-serif;
  min-height: calc(var(--pitch) * 3); background-color: transparent; box-shadow: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--pitch) - 1.5px), var(--paper-rule) calc(var(--pitch) - 1.5px) var(--pitch));
  background-attachment: local; background-position: 0 0; }
.modal-card textarea.input-field:focus { border: 0; background-color: rgba(211,239,223,0.25); }
.modal-card textarea.input-field.tall { min-height: calc(var(--pitch) * 6); }
.modal-card .chips { gap: 4px 6px; padding: 3px 0 1px; background-image: linear-gradient(180deg, transparent calc(var(--pitch) - 1px), var(--paper-rule) calc(var(--pitch) - 1px));
  background-size: 100% var(--pitch); }
.modal-card .chip { min-height: 30px; padding: 3px 12px; border: 1.5px solid #E7E0D5; border-radius: var(--pill-1); gap: 6px; }
.modal-card .chip:nth-child(3n+2) { border-radius: var(--pill-2); }
.modal-card .chip:nth-child(3n) { border-radius: var(--pill-3); }
.modal-card .chip .chip-text, .modal-card .chip .text-body { font-size: 15px; line-height: 22px; }
.modal-card .chip.selected { border: 1.5px solid var(--forest); }
.modal-card .toggle-row { position: relative; min-height: var(--pitch); border-bottom: 1px solid var(--paper-rule); }
.modal-card .toggle-row.paper-label { justify-content: flex-start; }
.modal-card .toggle { width: 42px; height: 24px; }
.modal-card .toggle::after { width: 18px; height: 18px; }
.modal-card .toggle:checked::after { transform: translateX(18px); }
.modal-card .add-row .btn-secondary { padding: 4px 14px; border-radius: var(--pill-2); }
/* Edie's notes and boxes inside a card are paper too */
.modal-card .edie-note { border-radius: 2px; transform: rotate(0.5deg); box-shadow: 0 3px 8px rgba(46,42,51,0.1); }
.modal-card .modal-error { border-radius: 2px; }

/* Edie's confirm pop-up (EdieUi.confirm), above any open pop-up */
.confirm-overlay { z-index: 300; }
.confirm-card { width: 430px; gap: 10px; }
.confirm-title { margin: 0; font: var(--hand-weight) 32px/1.05 var(--font-hand); color: var(--charcoal); text-wrap: balance; }
.confirm-text p { font: 400 15px/1.5 'Jost', sans-serif; color: var(--text-secondary); margin: 0 0 10px 0; }
.confirm-text p:last-child { margin: 0; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin: 12px 0 0 0; }
.confirm-actions .btn-primary { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--pill-1); font-weight: 600; }
.confirm-actions .btn-primary svg { width: 18px; height: 18px; color: #FFFFFF; }
.btn-primary.btn-danger { background-color: var(--berry-text); }
.btn-primary.btn-danger:hover:not(:disabled) { background-color: var(--accent); }
.modal-error { font: 400 14px/1.5 'Jost', sans-serif; color: var(--berry-text); padding: 8px 12px; border-radius: 12px; background-color: var(--accent-soft); }
textarea.input-field { resize: vertical; min-height: 96px; }

/* Form pieces shared by the pop-ups */
.field-row { display: grid; gap: 12px; }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
textarea.input-field.tall { min-height: 180px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.toggle { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 52px; height: 30px; margin: 0; border-radius: 999px;
  background-color: var(--oat); cursor: pointer; transition: background-color 0.2s ease; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(46,42,51,0.25); transition: transform 0.2s ease; }
.toggle:checked { background-color: var(--forest); }
.toggle:checked::after { transform: translateX(22px); }
.import-box, .scale-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 18px;
  background-color: var(--cream); }
.scale-box { border: 0; }
.import-row { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.import-row .input-field { flex: 1 1 auto; min-width: 0; }
.import-row .scale-input { flex: 0 0 120px; }
.import-row .btn-secondary { flex: none; white-space: nowrap; }
.file-input { padding: 8px 10px; }
.paste-input { resize: vertical; min-height: 48px; }
.or-divider { text-align: center; }
.scaled-list { margin: 0; padding-left: 20px; font: 400 15px/1.5 'Jost', sans-serif; }

/* accents/edie-note */
.edie-note { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background-color: var(--mint); }
/* W05 (3 Nov, d211): someone who can only look: a mint note naming who to
   ask, then each detail written out with nothing to tap */
.look-only-note { margin: 4px 0 14px; padding: 10px 14px; border-radius: 16px; background-color: var(--mint); color: var(--forest); font: 500 15px/1.4 'Jost', sans-serif; }
.look-only-value { margin: 2px 0 12px; font: 500 17px/1.4 'Jost', sans-serif; color: var(--ink); overflow-wrap: anywhere; }
.look-only-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

@media (max-width: 767px) {
  .page-wrapper { padding: 0 16px; }
  .page-hero { padding: 6px 2px 2px; }
  .text-hero-title { font: 900 30px/1.1 'Nunito', sans-serif; }
  .fab-blob { right: 20px; bottom: 20px; }
  .fab-menu { right: 20px; bottom: 88px; }
  .modal-card { padding: 28px 18px 20px var(--paper-x); }
  .modal-card { --paper-x: 34px; }
  .modal-card > h2 { margin-right: -18px; }
  .modal-paper { transform: rotate(-0.3deg); }
}

/* The Event Editor's fields, and its Reminders and Tasks blocks */
.event-fields { display: flex; flex-direction: column; gap: 18px; min-width: 0; margin: 0; padding: 0; border: 0; }
.event-fields:disabled .chip { cursor: default; }
.read-only-note { padding: 10px 12px; border-radius: 12px; background-color: var(--sky); color: var(--charcoal); }
.linked-block { gap: 8px; }
.linked-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; background-color: var(--butter); }
.linked-row.edie { background-color: var(--mint); }
.linked-tick { margin: 3px 0 0 0; background-color: #FFFFFF; }
.linked-tick.pending { cursor: wait; opacity: 0.45; pointer-events: none; }
.linked-row-text { flex: 1; min-width: 0; font-size: 15px; }
.linked-row.task { border: 1px solid var(--border); background-color: #FFFFFF; }
.add-row { display: grid; grid-template-columns: minmax(0, 1fr) 156px auto; align-items: center; gap: 8px; }
@media (max-width: 767px) {
  .add-row { grid-template-columns: minmax(0, 1fr) auto; }
  .add-row .input-field:first-child { grid-column: 1 / -1; }
}

/* The loading blob (2026-10-08): changes shape and blends between Edie's
   colours while something takes a while. Stays still for anyone who has
   asked their device for less motion. */
.edie-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px 8px; text-align: center; }
.edie-loader.small { flex-direction: row; gap: 10px; padding: 8px 0; text-align: left; }
.edie-loader-blob { position: relative; display: block; width: 72px; height: 66px; border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%;
  background-color: #9FDCBD; animation: edieBlobShape 6s ease-in-out infinite, edieBlobColour 8s ease-in-out infinite; }
.edie-loader.small .edie-loader-blob { width: 34px; height: 31px; flex: 0 0 auto; }
.edie-loader-text { font: 500 15px/1.45 'Jost', sans-serif; color: var(--charcoal, #231F28); max-width: 320px; }
.edie-loader.small .edie-loader-text { font-size: 14px; }
/* Floating: the blob alone in the middle of the screen, no card (Kathryn),
   under the side menu (z-index 55-60). Taps go through it, so the page can
   still be used. The words sit on a small cream pill so they can be read. */
.edie-loader.floating { position: fixed; left: 50%; top: 50%; z-index: 50; transform: translate(-50%, -50%); gap: 14px; padding: 0;
  width: min(320px, calc(100vw - 48px)); pointer-events: none; animation: edieLoaderIn 0.3s ease-out; }
.edie-loader.floating .edie-loader-blob { width: 104px; height: 96px; }
.edie-loader.floating .edie-loader-text { padding: 6px 14px; border-radius: 999px; background-color: rgba(250,247,241,0.94);
  box-shadow: 0 4px 14px rgba(46,42,51,0.12); font-weight: 600; color: var(--forest, #2F5A4B); }
/* 2026-10-12: the blob is now Edie's face, thinking, bobbing gently, with the hopping dots beside her */
.edie-loader-edie { position: relative; display: inline-flex; align-items: flex-start; }
.edie-loader-face { display: block; line-height: 0; animation: edieBob 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
.edie-loader-edie .edie-dots { position: absolute; top: -2px; right: -26px; }
.edie-loader.small .edie-loader-edie .edie-dots { top: -8px; right: -18px; transform: scale(0.8); }
.edie-loader.small .edie-loader-edie { margin-right: 14px; }
.edie-loader.floating .edie-loader-edie .edie-dots { right: -30px; top: 0; }
.edie-face-wrap { display: inline-flex; line-height: 0; }
@keyframes edieBob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-3px); } }
@keyframes edieLoaderIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } to { opacity: 1; transform: translate(-50%, -50%); } }
/* Three hopping blobs: for a button or a line while something saves or is read */
.edie-dots { display: inline-flex; align-items: flex-end; gap: 5px; height: 1.45em; vertical-align: middle; }
.edie-dots i { display: block; width: 8px; height: 7.5px; border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%; animation: edieDotHop 1.2s ease-in-out infinite; }
.edie-dots i:nth-child(1) { background-color: #9FDCBD; }
.edie-dots i:nth-child(2) { background-color: #F6D08E; animation-delay: 0.15s; }
.edie-dots i:nth-child(3) { background-color: #EE9DB4; animation-delay: 0.3s; }
button:disabled:has(.edie-dots) { opacity: 1; }
.edie-dots-line { display: flex; align-items: center; gap: 10px; }
@keyframes edieDotHop { 0%, 60%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(-7px) scale(0.92, 1.08); } 40% { transform: translateY(0) scale(1.12, 0.86); } }
@keyframes edieBlobShape {
  0%, 100% { border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%; transform: rotate(0deg) scale(1); }
  25% { border-radius: 60% 40% 45% 55% / 40% 60% 40% 60%; transform: rotate(8deg) scale(1.06); }
  50% { border-radius: 38% 62% 55% 45% / 58% 38% 62% 42%; transform: rotate(-6deg) scale(0.96); }
  75% { border-radius: 55% 45% 38% 62% / 45% 55% 60% 40%; transform: rotate(4deg) scale(1.03); }
}
@keyframes edieBlobColour {
  0%, 100% { background-color: #9FDCBD; }
  25% { background-color: #F6D08E; }
  50% { background-color: #EE9DB4; }
  75% { background-color: #A9C6EA; }
}
@media (prefers-reduced-motion: reduce) {
  .edie-loader-blob, .edie-loader.floating, .edie-dots i, .edie-loader-face { animation: none; }
}

/* On touchscreens a tapped button keeps its "hover" colour until you tap
   somewhere else, so dark green buttons stayed pink (2026-10-09). Devices
   without a mouse keep each button's own colour instead. */
@media (hover: none) {
  .btn-primary:hover:not(:disabled), .btn-primary.btn-danger:hover:not(:disabled) { box-shadow: none; transform: none; }
  .btn-primary:hover:not(:disabled) { background-color: var(--forest); }
  .btn-primary.btn-danger:hover:not(:disabled) { background-color: var(--berry-text); }
  .btn-secondary:hover:not(:disabled), .btn-icon:hover, .chip:not(.selected):hover { transform: none; background-color: var(--surface); }
  .btn-danger-text:hover:not(:disabled) { background-color: transparent; }
  .add-chip:hover { transform: none; border: 1px dashed var(--border); background-color: var(--cream); }
}

/* 2026-10-09: a small hint under a field */
.member-hint { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }

/* Edie's own icons (edie-icons.js): one pen, round ends */
.edie-doodle { display: inline-block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* Edie's "plan it for me" / "re-plan" buttons, everywhere (2026-10-10, Kathryn):
   a small pink blob with her doodle and a word beside it */
.edie-act { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 14px/1.2 'Jost', sans-serif; color: #2E2A33; text-align: left; }
.edie-act:disabled { opacity: .5; cursor: wait; }
.edie-act-blob { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px;
  border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%; background: #F7CBD3; color: #B23E68; }
.edie-act.small { font-size: 13px; gap: 5px; }
.edie-act.small .edie-act-blob { width: 24px; height: 24px; }
@media (hover: hover) { .edie-act:not(:disabled):hover .edie-act-blob { background: #F2B6C3; } }

/* A Google/Apple sign-in that has stopped working (2026-10-10; Account page and Family cards) */
.needs-reconnect { margin: 4px 0 0; padding: 8px 12px; border: 1.5px dashed #E58BA6; border-radius: 12px; background: #FDEEF2;
  color: #7A2340; font-size: 13px; line-height: 1.4; }

/* What a reminder is for, in the One-off Reminder pop-up (2026-10-10) */
.rem-link { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--sky, #CFE6F2); font-size: 14px; }
.rem-link + .rem-link { margin-top: 4px; }
.rem-link-kind { font: 600 12px/1.4 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #1F5774; }
.rem-link-title { flex: 1; min-width: 0; }
.rem-link-title small { color: #6B6B6B; }
.rem-link-x { border: 0; background: none; font-size: 20px; line-height: 1; color: #6B6B6B; cursor: pointer; padding: 0 4px; }
.rem-link-adds { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.rem-picker { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1.5px solid #E8DDE6; border-radius: 12px; background: #fff; max-height: 260px; overflow-y: auto; }
.rem-pick { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border: 0; border-bottom: 1px dashed #E8DDE6; background: none; text-align: left; font: 400 14px/1.35 'Jost', sans-serif; color: var(--charcoal); cursor: pointer; }
.rem-pick:last-child { border-bottom: 0; }
.rem-pick small { color: #6B6B6B; white-space: nowrap; }

/* The Reminder Editor's "This week" / "Just one week" box (moved from
   reminders.css 2026-10-10 so the Planner and Calendar get it too) */
.week-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 18px;
  background-color: var(--accent-soft); }
.week-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.week-actions .input-field { width: auto; flex: 1 1 160px; }
.week-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.week-changes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* "Start again" inside a sentence, after every swap idea has been offered */

/* Tips (2026-10-11, tips.js): Edie's note pointing at part of the page.
   Always mint (Kathryn); only the shape follows the page's style:
   .tip-postit (Notebook), .tip-rounded (Cards, and any other page),
   .tip-pinned (Noticeboard). */
.tip-card { position: fixed; z-index: 400; width: min(320px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 16px 12px;
  background: var(--mint); color: #1F3F34; box-shadow: 0 10px 26px rgba(46,42,51,0.2);
  display: flex; flex-direction: column; gap: 6px; }
.tip-card.tip-rounded { border-radius: 22px; }
.tip-card.tip-postit { border-radius: 2px; transform: rotate(-1deg); padding-top: 20px; }
.tip-card.tip-postit::before { content: ''; position: absolute; top: -9px; left: 50%; width: 76px; height: 20px; margin-left: -38px;
  background: rgba(247,203,211,0.85); transform: rotate(-3deg); }
.tip-card.tip-pinned { border-radius: 4px; transform: rotate(-1.2deg); padding-top: 22px; }
.tip-card.tip-pinned::before { content: ''; position: absolute; top: 7px; left: 50%; width: 16px; height: 16px; margin-left: -8px;
  background: var(--accent); border-radius: var(--blob-1); box-shadow: 0 2px 3px rgba(46,42,51,0.25); }
.tip-card.floating { left: 50%; bottom: 96px; transform: translateX(-50%); }
.tip-card.floating.tip-postit { transform: translateX(-50%) rotate(-1deg); }
.tip-card.floating.tip-pinned { transform: translateX(-50%) rotate(-1.2deg); }
.tip-card p { margin: 0; }
.tip-count { font: 600 12px/1.4 'Jost', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #4F7566; }
.tip-head { display: flex; align-items: center; gap: 8px; }
.tip-blob { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px;
  border-radius: var(--blob-2); background: #FFFFFF; color: var(--berry-text); }
.tip-title { font: var(--hand-weight) calc(26px * var(--hand-scale))/1.1 var(--font-hand); color: var(--forest); }
.tip-text { font: 400 14px/1.45 'Jost', sans-serif; }
.tip-actions { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 6px; }
.tip-actions .tip-next { margin-left: auto; }
.tip-skip .small-action-blob { background-color: #FFFFFF; color: var(--forest); }
.tip-card .tip-next { padding: 7px 18px; }
.tip-lit { outline: 3px dashed #E0638F; outline-offset: 4px; border-radius: 12px; }

/* Delete (2026-10-11, docs/edie-design-system.md part 7): a pale pink blob
   holding a berry blob with the white bin doodle, then the word in berry.
   <button class="delete-blob">Delete</button> — the same in every style. */
.delete-blob { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 7px; border: 0; border-radius: var(--pill-2);
  background-color: var(--accent-soft); color: var(--berry-text); font: 600 15px/1.2 'Jost', sans-serif; cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease; }
.delete-blob::before { content: ''; flex: none; width: 28px; height: 26px; border-radius: var(--blob-1);
  background: var(--berry-text) no-repeat center / 20px 20px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23FFFFFF' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 19 C26 18 38 18 50 19'/%3E%3Cpath d='M26 18 C26 14 28 12.5 32 12.5 C36 12.5 38 14 38 18'/%3E%3Cpath d='M18 19 L21 51 C21.5 54 23 55.5 26 55.5 L38 55.5 C41 55.5 42.5 54 43 51 L46 19'/%3E%3Cpath d='M27 28 L28 46'/%3E%3Cpath d='M37 28 L36 46'/%3E%3C/svg%3E"); }
.delete-blob:disabled { opacity: 0.6; cursor: wait; }
.delete-blob:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
@media (hover: hover) { .delete-blob:not(:disabled):hover { background-color: var(--tile-pink); transform: translateY(-1px); } }

/* Small actions (docs/edie-design-system.md parts 4 and 10): a blob with a
   word underneath, a smaller .rb-blob. Put a doodle inside the blob:
   <button class="small-action mint"><span class="small-action-blob">…doodle…</span>Put back</button>
   Colours: mint (default), butter, pink, sky, forest. */
.small-action { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; padding: 0; border: 0;
  background: none; color: var(--charcoal); font: 600 12px/1.2 'Jost', sans-serif; text-align: center; text-decoration: none; cursor: pointer; }
.small-action-blob { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; border-radius: var(--blob-1);
  background-color: var(--mint); color: var(--forest); transition: transform 0.15s ease; }
.small-action:nth-child(3n+2) .small-action-blob { border-radius: var(--blob-2); }
.small-action:nth-child(3n) .small-action-blob { border-radius: var(--blob-3); }
.small-action.butter .small-action-blob { background-color: var(--butter); color: #8A5A12; }
.small-action.pink .small-action-blob { background-color: var(--rose); color: var(--berry-text); }
.small-action.sky .small-action-blob { background-color: var(--sky); color: #2D5F86; }
.small-action.forest .small-action-blob { background-color: var(--forest); color: #FFFFFF; }
.small-action:disabled { opacity: 0.5; cursor: default; }
.small-action:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; border-radius: 8px; }
@media (hover: hover) { .small-action:not(:disabled):hover .small-action-blob { transform: scale(1.07) rotate(-3deg); } }
.small-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.small-action small { display: block; font-weight: 400; color: var(--text-secondary); }
a.small-action { color: var(--charcoal); }

/* Pop-ups in the Cards style (docs/edie-design-system.md part 7, "blob
   corner"): a white rounded card with a soft colour blob behind the title's
   top-left corner (--modal-tint: the day's or person's colour), the title in
   Fredoka, small capital labels above rounded boxes and a small cream blob x.
   EdieUi.Modal adds .look-cards to the overlay. */
.look-cards .modal-paper, .look-board .modal-paper { transform: none; }
.look-cards .paper-tape, .look-board .paper-tape { display: none; }
.look-cards .modal-card { isolation: isolate; position: relative; padding: 24px 24px 22px; border-radius: 24px; background-image: none;
  box-shadow: 0 16px 40px rgba(46,42,51,0.22); }
.look-cards .modal-card::before { content: ''; position: absolute; z-index: -1; top: -56px; left: -44px; width: 170px; height: 132px;
  border-radius: var(--blob-1); background-color: var(--modal-tint, var(--mint)); opacity: 0.9; pointer-events: none; }
.look-cards .modal-close, .look-board .modal-close { top: 12px; right: 12px; width: 36px; height: 34px; border-radius: var(--blob-2);
  background-color: var(--cream); }
.look-board .modal-close { top: 10px; right: 10px; background-color: rgba(46,42,51,0.06); }
.look-cards .modal-card > h2, .look-cards .modal-card > .meal-editor-header h2, .look-cards .modal-card .modal-form > h2:first-of-type,
.look-cards .modal-card .runs-plan-title, .look-cards .confirm-title {
  font-size: 26px; line-height: 1.15; margin-left: 0; padding-left: 0; margin-right: 0; padding-right: 44px; border-bottom: 0; padding-bottom: 2px; }
.look-cards .modal-card .field-label, .look-board .modal-card .field-label {
  font: 600 12px/1.4 'Jost', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.look-cards .modal-card .input-field:not(textarea), .look-cards .modal-card select.input-field {
  height: auto; padding: 9px 12px; font: 400 16px/1.4 'Jost', sans-serif; border: 1.5px solid #E7E0D5; border-radius: 12px; background-color: #FFFFFF; }
.look-cards .modal-card textarea.input-field { padding: 9px 12px; font: 400 16px/1.5 'Jost', sans-serif; border: 1.5px solid #E7E0D5;
  border-radius: 12px; background-image: none; }
.look-cards .modal-card .input-field:focus {
  border: 1.5px solid var(--forest); box-shadow: 0 0 0 3px var(--mint); }
.look-cards .modal-card .chips, .look-board .modal-card .chips { padding: 2px 0; background-image: none; }
.look-cards .modal-card .toggle-row { border-bottom: 0; }
.look-cards .modal-card .edie-note, .look-board .modal-card .edie-note { transform: none; border-radius: 18px; box-shadow: none; }
.look-cards .modal-card .modal-error { border-radius: 12px; }

/* Pop-ups in the Noticeboard style ("pinned note"): a white note held by a
   blob pin, slightly tilted, the title in Patrick Hand, small capital labels
   on the left and rows split by dotted mint lines. */
.look-board .modal-paper { transform: rotate(-0.8deg); }
.look-board .modal-paper::before { content: ''; position: absolute; z-index: 9; top: -10px; left: calc(50% - 11px); width: 22px; height: 21px;
  border-radius: var(--blob-2); background-color: var(--accent); box-shadow: 0 2px 4px rgba(0,0,0,0.22); pointer-events: none; }
.look-board .modal-card { padding: 24px 22px 20px; border-radius: 3px; background-image: none; box-shadow: 0 14px 34px rgba(46,42,51,0.26); }
.look-board .modal-card > h2, .look-board .modal-card > .meal-editor-header h2, .look-board .modal-card .modal-form > h2:first-of-type,
.look-board .modal-card .runs-plan-title, .look-board .confirm-title {
  font-size: 30px; line-height: 1.05; margin-left: 0; padding-left: 0; margin-right: 0; padding-right: 44px; border-bottom: 0; padding-bottom: 2px; }
.look-board .modal-card .field-group { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 6px 10px;
  padding: 6px 0; border-bottom: 2px dotted #B9D9C6; }
.look-board .modal-card .field-group > :not(.field-label) { grid-column: 2; }
.look-board .modal-card .field-group > .field-label { grid-column: 1; align-self: start; padding-top: 9px; }
.look-board .modal-card .toggle-row { padding: 6px 0; border-bottom: 2px dotted #B9D9C6; }
.look-board .modal-card .input-field:not(textarea), .look-board .modal-card select.input-field {
  height: auto; padding: 7px 2px; font: 400 16px/1.4 'Jost', sans-serif; border: 0; border-radius: 0; background: transparent; }
.look-board .modal-card textarea.input-field { padding: 7px 2px; font: 400 16px/1.5 'Jost', sans-serif; border: 0; border-radius: 0;
  background-image: none; background-color: rgba(211,239,223,0.25); }
.look-board .modal-card .input-field:focus { border: 0; box-shadow: inset 0 -2px 0 var(--forest); }
@media (max-width: 767px) {
  .look-cards .modal-card { padding: 22px 18px 18px; }
  .look-board .modal-card { padding: 22px 16px 18px; }
  .look-board .modal-card .field-group { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .look-board .modal-card .field-group > .field-label { padding-top: 0; }
}

/* "Are you sure?" (EdieUi.confirm): the danger choice is the Delete blob */
.confirm-actions .delete-blob { font-size: 15px; }

/* Cards (2026-10-11, docs/edie-design-system.md parts 6 and 9): a card's
   heading (EdieUi.CardHead: the doodle in a coloured blob, the title in the
   style's handwriting, a small blob + on the right), a soft colour blob
   tucked behind the card's top corner (.corner-blob, colour --corner), and
   rows as soft tiles (.soft-tiles: each row on a pale, slightly wobbly tile). */
.card-head { position: relative; display: flex; align-items: center; gap: 9px; min-height: 32px; }
.card-head-title { flex: 1; min-width: 0; margin: 0; font: var(--hand-weight) calc(24px * var(--hand-scale))/1.15 var(--font-hand); color: var(--charcoal); }
.card-head-blob { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px;
  border-radius: var(--blob-3); background-color: var(--mint); color: var(--forest); }
.card-head-blob.butter { background-color: var(--butter); color: #8A5A12; }
.card-head-blob.sky { background-color: var(--sky); color: #2D5F86; }
.card-head-blob.rose { background-color: var(--rose); color: var(--berry-text); }
.card-head-blob.lilac { background-color: var(--lilac); color: #5B3E8A; }
.card-head-blob.peach { background-color: #FAD9C4; color: #9A4A1E; }
.card-add { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0;
  border: 0; border-radius: var(--blob-2); background-color: var(--mint); color: var(--forest); cursor: pointer; transition: transform 0.15s ease; }
.card-add:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
@media (hover: hover) { .card-add:hover { transform: scale(1.08) rotate(-4deg); } }
.corner-blob { position: relative; isolation: isolate; overflow: hidden; }
.corner-blob::before { content: ''; position: absolute; z-index: -1; top: -34px; right: -36px; width: 110px; height: 84px;
  border-radius: var(--blob-2); background-color: var(--corner, var(--mint)); opacity: 0.6; pointer-events: none; }
.corner-blob.mint { --corner: var(--mint); }
.corner-blob.butter { --corner: var(--butter); }
.corner-blob.sky { --corner: var(--sky); }
.corner-blob.rose { --corner: var(--rose); }
.corner-blob.lilac { --corner: var(--lilac); }
.corner-blob.peach { --corner: #FAD9C4; }
/* each row a pale tint of its card's own colour (2026-10-11, Kathryn: not the beige cream) */
.soft-tiles > .soft-tile, .soft-tiles > :not(p):not(.card-head):not(.soft-skip) { background-color: #FBF7EF; background-color: color-mix(in srgb, var(--corner, var(--butter)) 38%, #fff); border-radius: 12px 14px 11px 13px; padding: 7px 10px; }
.soft-tiles > :nth-child(2n):not(p):not(.card-head):not(.soft-skip) { border-radius: 14px 10px 16px 11px; }
.soft-tiles > :nth-child(3n):not(p):not(.card-head):not(.soft-skip) { border-radius: 11px 15px 12px 14px; }
.small-action.link-button { align-self: flex-start; }

/* The sign-up (login) style (2026-10-11, Kathryn): Family, Account and Edie
   settings, /app/setup, and their pop-ups. White rounded cards like the
   login card, forest Nunito headings, plain labels above plain boxes. */
.style-login :is(.card, .settings-card) { border: 0; border-radius: 24px; box-shadow: 0 14px 40px rgba(46,42,51,0.08); }
.style-login :is(.card, .settings-card) :is(.text-section-title, .settings-food-title) { font: 900 20px/1.25 'Nunito', sans-serif; color: var(--forest); }
.look-login .modal-paper { transform: none; }
.look-login .paper-tape { display: none; }
.look-login .modal-card { padding: 26px 24px 22px; border-radius: 24px; background-image: none; box-shadow: 0 20px 50px rgba(46,42,51,0.18); }
.look-login .modal-close { top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background-color: var(--cream); }
.look-login .modal-card > h2, .look-login .modal-card > .meal-editor-header h2, .look-login .modal-card .modal-form > h2:first-of-type,
.look-login .modal-card .runs-plan-title, .look-login .confirm-title {
  font: 900 24px/1.2 'Nunito', sans-serif; color: var(--forest); margin: 0; padding: 0 44px 2px 0; border-bottom: 0; }
.look-login .modal-card .field-label { font: 600 14px/1.4 'Jost', sans-serif; color: var(--charcoal); }
.look-login .modal-card .input-field:not(textarea), .look-login .modal-card select.input-field {
  height: auto; padding: 10px 12px; font: 400 16px/1.4 'Jost', sans-serif; border: 1.5px solid #E2DACE; border-radius: 12px; background-color: #FFFFFF; }
.look-login .modal-card textarea.input-field { padding: 10px 12px; font: 400 16px/1.5 'Jost', sans-serif; border: 1.5px solid #E2DACE; border-radius: 12px; background-image: none; }
.look-login .modal-card .input-field:focus { border: 1.5px solid var(--forest); box-shadow: 0 0 0 3px var(--mint); }
.look-login .modal-card .chips { padding: 2px 0; background-image: none; }
.look-login .modal-card .toggle-row { border-bottom: 0; }
.look-login .modal-card .edie-note { transform: none; border-radius: 18px; box-shadow: none; }
.look-login .modal-card .modal-error { border-radius: 12px; }
@media (max-width: 767px) { .look-login .modal-card { padding: 22px 18px 18px; } }
.style-login .text-section-title { color: var(--forest); font-weight: 900; }

/* "Put Edie on your Home Screen" (2026-10-11, install.js): the sign-up
   style's pop-up, whatever page it's on. */
.install-pop { display: flex; flex-direction: column; gap: 12px; }
.install-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0 40px 0 0; padding: 9px 12px; border: 1.5px dashed var(--accent);
  border-radius: 14px; background-color: #FFFFFF; font: 500 14px/1.4 'Jost', sans-serif; color: var(--charcoal); }
.install-warn > span:first-child { color: var(--berry-text); flex: 0 0 auto; }
.install-blob { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 48px; border-radius: var(--blob-1);
  background-color: var(--mint); color: var(--forest); }
.install-pop .install-title { margin: 0; padding-right: 40px; font: 900 24px/1.15 'Nunito', sans-serif; color: var(--forest); border: 0; }
.install-why { margin: 0; font: 400 15px/1.45 'Jost', sans-serif; color: var(--charcoal); }
.install-how { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background-color: var(--cream); }
.install-how-title { margin: 0; font: 800 14px/1.3 'Nunito', sans-serif; color: var(--forest); }
.install-step { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 14px/1.4 'Jost', sans-serif; color: var(--charcoal); }
.install-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px;
  border-radius: var(--blob-2); background-color: var(--forest); color: #FFFFFF; font: 800 12px 'Nunito', sans-serif; }
.install-sys { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; margin: 0 2px; vertical-align: middle;
  border: 1px solid var(--oat); border-radius: 6px; background-color: #FFFFFF; color: #2D6CDF; font-weight: 800; }
.install-go { display: flex; width: 100%; justify-content: center; text-align: center; }
.install-later { align-self: center; }

/* The feedback pop-up (feedback.js; opened from the side menu since d292, 9 Nov) */
.feedback-form .feedback-shot-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feedback-thumb { width: 64px; height: 86px; object-fit: cover; object-position: top; border-radius: 8px; border: 1.5px solid var(--oat); }
.feedback-small { margin: 0; font-size: 13px; }

/* Rows of filters and tabs never wrap onto a second line: they're one line
   you swipe across, with no scroll bar showing (2026-10-12, Kathryn). Used
   by the Planner's Day / Week / Month, the Recipe book's kinds of recipe,
   the lists, the who-filter, the reminder categories and lift filters. */
.swipe-row, .pl-vtabs, .rb-tabs, .ls-tabs, .ar-cats, .chips.pl-who, .pl-booktabs, .hp-tabs, .rb-sidetabs, .stk-sets, .chat-sugg, .main-nav {
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.swipe-row::-webkit-scrollbar, .pl-vtabs::-webkit-scrollbar, .rb-tabs::-webkit-scrollbar, .ls-tabs::-webkit-scrollbar, .ar-cats::-webkit-scrollbar, .chips.pl-who::-webkit-scrollbar, .pl-booktabs::-webkit-scrollbar, .hp-tabs::-webkit-scrollbar, .rb-sidetabs::-webkit-scrollbar, .stk-sets::-webkit-scrollbar, .chat-sugg::-webkit-scrollbar, .main-nav::-webkit-scrollbar { display: none; }
.swipe-row { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.swipe-row > * { flex: 0 0 auto; }

/* The week's Food shopping check (shop-check.js, 2026-10-12): one list,
   crosses to take things off, staples last */
.sc-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 2px; font: 600 12px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6E6873; }
.sc-all { border: 0; background: none; padding: 4px 0; color: var(--berry-text); font: 600 13px/1 'Jost', sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
.sc-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 5px; border-radius: 12px 14px 11px 13px; background: #FFF6DE; }
.sc-item:nth-child(even) { border-radius: 14px 10px 16px 11px; }
.sc-item.old { background: #F1EEF6; }
.sc-item.staple { background: #EEF5F1; }
.sc-item.off { background: transparent; outline: 1.5px dashed #E3DBCF; outline-offset: -1.5px; }
.sc-item.off .sc-what { color: #9A93A0; text-decoration: line-through; }
.sc-what { flex: 1; min-width: 0; font: 400 15px/1.35 'Jost', sans-serif; color: #2E2A33; }
.sc-what small { display: block; color: #6E6873; font-size: 12px; }
.sc-x { flex: none; width: 30px; height: 28px; border: 0; border-radius: var(--blob-1); display: grid; place-items: center; background: var(--accent-soft); color: var(--berry-text); cursor: pointer; }
.sc-undo { flex: none; border: 0; background: none; padding: 4px 2px; color: var(--forest); font: 600 14px/1 'Jost', sans-serif; cursor: pointer; }
.sc-note { margin: 4px 0 0; padding: 10px 12px; border-radius: 16px; background: var(--mint); color: #1F3F34; font: 400 13px/1.4 'Jost', sans-serif; }
.sc h2 { padding-right: 40px; }

/* edie's bouncy balls (2026-10-12, Kathryn's picks, slowed down): the big
   loader's four plays. --s is edie's size; everything scales from it. */
.edie-play { position: relative; display: block; width: calc(var(--s) * 2.6); height: calc(var(--s) * 1.9); }
.ep-face { position: absolute; left: 50%; bottom: 0; margin-left: calc(var(--s) / -2); line-height: 0; }
.ep-ball { position: absolute; display: block; width: calc(var(--s) * .2); height: calc(var(--s) * .19); border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%; }
.ep-ball.b1 { background: #9FDCBD; } .ep-ball.b2 { background: #F6D08E; } .ep-ball.b3 { background: #EE9DB4; }
/* bonk: they drop on her head one by one, bounce and roll off; she squishes */
.play-bonk .ep-ball { left: 50%; top: 0; margin-left: calc(var(--s) * -.1); opacity: 0; animation: epDrop 3.2s cubic-bezier(.3,0,.7,1) infinite; }
.play-bonk .b1 { margin-left: calc(var(--s) * -.34); } .play-bonk .b2 { animation-delay: 1.05s; } .play-bonk .b3 { margin-left: calc(var(--s) * .14); animation-delay: 2.1s; }
.play-bonk .ep-face { animation: epSquish 1.05s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes epDrop { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; }
  45% { transform: translateY(calc(var(--s) * .75)) scale(1.2, .8); } 65% { transform: translateY(calc(var(--s) * .4)); }
  80% { transform: translateY(calc(var(--s) * .75)) scale(1.1, .9); } 100% { transform: translate(calc(var(--s) * .55), calc(var(--s) * 1.6)); opacity: 0; } }
@keyframes epSquish { 0%, 60%, 100% { transform: scale(1, 1); } 40% { transform: scale(1.06, .92); } }
/* think: they float up from her head, grow and pop */
.play-think .ep-ball { left: 50%; bottom: calc(var(--s) * .85); margin-left: calc(var(--s) * .25); opacity: 0; animation: epFloat 4s ease-out infinite; }
.play-think .b2 { margin-left: calc(var(--s) * .4); animation-delay: 1.33s; } .play-think .b3 { margin-left: calc(var(--s) * .32); animation-delay: 2.66s; }
.play-think .ep-face { animation: edieBob 4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes epFloat { 0% { transform: scale(.4); opacity: 0; } 15% { opacity: 1; }
  80% { transform: translate(calc(var(--s) * .18), calc(var(--s) * -.75)) scale(1.5); opacity: 1; }
  100% { transform: translate(calc(var(--s) * .18), calc(var(--s) * -.85)) scale(2.4); opacity: 0; } }
/* roll: they roll past along the ground */
.play-roll .ep-face { bottom: calc(var(--s) * .22); animation: edieBob 5s ease-in-out infinite; transform-origin: 50% 80%; }
.play-roll .ep-ball { bottom: 0; left: calc(var(--s) * -.2); animation: epRoll 5s linear infinite; }
.play-roll .b2 { animation-delay: -.42s; } .play-roll .b3 { animation-delay: -.84s; }
@keyframes epRoll { 0% { transform: translateX(0) rotate(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(calc(var(--s) * 2.8)) rotate(720deg); opacity: 0; } }
/* stack: they pile up on her head, she wobbles, and they tumble off */
.play-stack .ep-ball { left: 50%; margin-left: calc(var(--s) * -.1); bottom: calc(var(--s) * .9); opacity: 0; animation-duration: 6s; animation-timing-function: ease-in; animation-iteration-count: infinite; }
.play-stack .b1 { animation-name: epStack1; } .play-stack .b2 { animation-name: epStack2; } .play-stack .b3 { animation-name: epStack3; }
.play-stack .ep-face { animation: epBalance 6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes epStack1 { 0% { transform: translateY(calc(var(--s) * -1.1)); opacity: 0; } 8% { opacity: 1; } 18%, 70% { transform: translateY(0); opacity: 1; } 100% { transform: translate(calc(var(--s) * -.9), calc(var(--s) * .8)); opacity: 0; } }
@keyframes epStack2 { 0%, 18% { transform: translateY(calc(var(--s) * -1.2)); opacity: 0; } 24% { opacity: 1; } 36%, 70% { transform: translateY(calc(var(--s) * -.17)); opacity: 1; } 100% { transform: translate(calc(var(--s) * .6), calc(var(--s) * .7)); opacity: 0; } }
@keyframes epStack3 { 0%, 36% { transform: translateY(calc(var(--s) * -1.3)); opacity: 0; } 42% { opacity: 1; } 54%, 66% { transform: translateY(calc(var(--s) * -.34)); opacity: 1; } 100% { transform: translate(calc(var(--s) * 1.1), calc(var(--s) * .6)); opacity: 0; } }
@keyframes epBalance { 0%, 56% { transform: rotate(0); } 62% { transform: rotate(-4deg); } 68% { transform: rotate(4deg); } 76%, 100% { transform: rotate(0); } }
/* the small hop, a little calmer */
.edie-dots i { animation-duration: 1.8s; }
.edie-dots i:nth-child(2) { animation-delay: .25s; } .edie-dots i:nth-child(3) { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .edie-play *, .edie-play { animation: none !important; } .edie-play .ep-ball { opacity: 1; } }

/* edie's little treats (EdieUi.BallPlay, 2026-10-12) */
.edie-treat { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 8px 0; }
.treat-stage { position: relative; width: 300px; max-width: 100%; height: 140px; touch-action: none; }
.treat-face { position: absolute; left: 50%; bottom: 0; margin-left: -32px; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer;
  transition: transform .35s cubic-bezier(.2,1.6,.4,1); transform-origin: 50% 100%; }
.treat-ball { position: absolute; display: block; width: 18px; height: 17px; padding: 0; border: 0; border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%; cursor: pointer; }
.treat-ball.b1 { background: #9FDCBD; } .treat-ball.b2 { background: #F6D08E; } .treat-ball.b3 { background: #EE9DB4; }
.treat-ball.caught { opacity: .25; }
.treat-line { margin: 0; font: 500 13px/1.3 'Jost', sans-serif; color: var(--forest); }
.treat-tap .treat-ball, .treat-tickle .treat-ball { bottom: 0; transition: transform .8s cubic-bezier(.2,1.4,.4,1); }
.treat-tap .b1 { left: calc(50% + 44px); } .treat-tap .b2 { left: calc(50% + 66px); } .treat-tap .b3 { left: calc(50% + 88px); }
.treat-tap.jump .b1 { transform: translate(-70px, -100px) rotate(200deg); }
.treat-tap.jump .b2 { transform: translate(-44px, -118px) rotate(-160deg); }
.treat-tap.jump .b3 { transform: translate(-16px, -92px) rotate(240deg); }
.treat-tap.jump .treat-face { transform: translateY(-8px) scale(1.04); }
.treat-tickle .b1 { left: calc(50% - 70px); } .treat-tickle .b2 { left: calc(50% + 46px); } .treat-tickle .b3 { left: calc(50% + 68px); }
.treat-tickle.giggle .treat-face { transform: scale(1.1, .9) rotate(-4deg); }
.treat-tickle.giggle .treat-ball { transform: translateY(calc(var(--hop) * -1)) rotate(180deg); }
.treat-fling .treat-ball, .treat-catch .treat-ball { left: 0; top: 0; transition: none; will-change: transform; }
.treat-fling .treat-ball { cursor: grab; }

/* Hands-free (2026-10-13, Kathryn's mock-up): cook mode and shop / focus mode */
.hf-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 12px; border: 0; cursor: pointer;
  border-radius: 22px 18px 20px 16px; background: var(--rose, #F7CBD3); color: #6A2440; font: 600 14px/1 'Jost', sans-serif; }
.hf-btn.on { background: var(--forest, #2F5A4B); color: #FFFFFF; }
.hf-btn span { display: inline-flex; }
.hf-intro-wrap { position: fixed; inset: 0; z-index: 400; background: rgba(46,42,51,.35); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.hf-intro { width: 100%; max-width: 440px; box-sizing: border-box; background: #FFFFFF; border-radius: 26px 22px 28px 24px; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 12px 30px rgba(46,42,51,.18); font: 400 15px/1.5 'Jost', sans-serif; color: #2E2A33; }
.hf-intro p { margin: 0; }
.hf-intro-head { display: flex; align-items: center; gap: 12px; }
.hf-intro-head h2 { margin: 0; font: 600 22px/1.2 'Fredoka', 'Nunito', sans-serif; color: var(--forest, #2F5A4B); }
.hf-intro-blob { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 46% 54% 58% 42% / 55% 42% 58% 45%; background: var(--mint, #D3EFDF);
  display: inline-flex; align-items: center; justify-content: center; color: var(--forest, #2F5A4B); }
.hf-intro-blob svg { width: 26px; height: 26px; }
.hf-phrases, .hf-hints { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-phrase { padding: 6px 12px; border-radius: 999px; background: var(--butter, #FBE9CC); font-size: 14px; }
.hf-small { font-size: 13px; line-height: 1.45; color: #6E6873; }
.hf-intro-acts { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.hf-not { padding: 10px 16px; border: 0; background: none; font: 600 15px 'Jost', sans-serif; color: #2E2A33; cursor: pointer; }
.hf-panel { padding: 14px 16px; background: #FFFFFF; border-radius: 22px 18px 24px 20px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 4px 16px rgba(46,42,51,.07); font: 400 15px/1.4 'Jost', sans-serif; color: #2E2A33; }
.hf-panel-top { display: flex; align-items: center; gap: 10px; }
.hf-on { font-weight: 600; color: var(--forest, #2F5A4B); }
.hf-heard { margin-left: auto; font-size: 13px; color: #6E6873; text-align: right; }
.hf-reply { margin: 0; padding: 10px 12px; border-radius: 18px 18px 18px 4px; background: var(--mint, #D3EFDF); color: #1F3F34;
  font: 500 19px/1.3 'Fredoka', 'Nunito', sans-serif; }
.hf-hint { padding: 5px 11px; border-radius: 999px; background: var(--cream, #FAF7F1); border: 1px solid var(--oat, #EDE6DC); font-size: 13px; }
.hf-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.hf-bars i { width: 4px; height: 8px; border-radius: 2px; background: var(--forest, #2F5A4B); animation: hf-bar 1.1s ease-in-out infinite; }
.hf-bars i:nth-child(2) { animation-delay: .15s; } .hf-bars i:nth-child(3) { animation-delay: .3s; } .hf-bars i:nth-child(4) { animation-delay: .45s; } .hf-bars i:nth-child(5) { animation-delay: .6s; }
@keyframes hf-bar { 0%, 100% { height: 6px; } 50% { height: 19px; } }
@media (prefers-reduced-motion: reduce) { .hf-bars i { animation: none; height: 12px; } }
.ls-hf { position: sticky; bottom: 12px; margin: 12px 16px 16px; }
.cm-foot .hf-panel { margin-bottom: 10px; }

/* A choice from a list (EdieUi.PickSelect, 2026-10-13): a pill showing the
   choice; tapping opens a pop-up of chips, never the phone's own list. */
.pick-select-wrap { display: inline-flex; min-width: 0; max-width: 55%; flex: 0 1 auto; }
.pick-select { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 8px 14px; border: 1.5px solid #D6CFC4; border-radius: 999px;
  background: #FFFFFF; color: #231F28; font: 500 14px/1.2 'Jost', sans-serif; cursor: pointer; text-align: left; }
.pick-select:hover { border-color: var(--forest, #2F5A4B); }
.pick-select.unsure { border-color: #E0638F; background: #FCE0E7; }
.pick-select:disabled { opacity: .6; cursor: default; }
.pick-select-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-select svg { flex: 0 0 auto; color: #6E6873; }
.pick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pick-list .pick-chip { justify-content: space-between; width: 100%; padding: 13px 18px; font-size: 15px; text-align: left; }
.pick-chip:disabled { opacity: .5; cursor: default; transform: none; }
.pick-note { font: 400 12.5px/1.2 'Jost', sans-serif; color: #6E6873; }
.chip.selected .pick-note { color: var(--cream); }

/* Show password (2026-10-13): an eye inside every password box */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input-field { padding-right: 48px; width: 100%; box-sizing: border-box; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: none;
  color: #6E6873; display: grid; place-items: center; cursor: pointer; }
.pw-eye:hover, .pw-eye.on { color: var(--forest, #2F5A4B); }
.pw-eye .pw-slash { display: none; }
.pw-eye.on .pw-slash { display: inline; }

/* edie's date and time pickers (EdieUi.DatePick / TimePick, 2026-10-14):
   a pill like PickSelect, and a pop-up above any pop-up it's opened from */
.date-pick-wrap { max-width: 100%; }
.date-pick { gap: 8px; padding: 8px 15px 8px 11px; font-size: 15px; }
.date-pick .pick-doodle { display: inline-flex; color: var(--forest); }
.date-pick.empty { color: var(--text-secondary); }
.modal-overlay.picker-overlay { z-index: 260; }
.picker-overlay .modal-card { display: flex; flex-direction: column; gap: 12px; }
.picker-picked { margin: -6px 0 0; font: 600 15px/1.3 'Jost', sans-serif; color: var(--ink); }
.picker-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-quick .chip, .picker-years .chip { padding: 7px 12px; font-size: 13.5px; }
.picker-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.picker-month { margin: 0; font: var(--hand-weight) calc(25px * var(--hand-scale)) / 1 var(--font-hand); color: var(--charcoal); }
.picker-month.as-button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 2px; cursor: pointer; }
.picker-down { display: inline-flex; color: var(--berry-text); transform: rotate(-90deg); }
.picker-nav { display: flex; gap: 6px; }
.picker-nav button { width: 38px; height: 38px; border: 0; border-radius: var(--blob-1); background: var(--mint); color: var(--forest); display: grid; place-items: center; cursor: pointer; }
.picker-nav button + button { border-radius: var(--blob-3); }
.picker-nav button + button svg { transform: scaleX(-1); }
.picker-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 2px; text-align: center; }
.picker-wd { font: 600 12px/1 'Jost', sans-serif; letter-spacing: .1em; color: var(--text-secondary); padding: 4px 0 6px; }
.picker-day { position: relative; aspect-ratio: 1; width: 100%; max-width: 44px; margin: 0 auto; border: 0; background: none; color: var(--ink);
  font: 500 15px/1 'Jost', sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; display: grid; place-items: center; border-radius: var(--blob-2); }
.picker-day:nth-of-type(4n) { border-radius: var(--blob-1); } .picker-day:nth-of-type(4n+1) { border-radius: var(--blob-3); } .picker-day:nth-of-type(4n+2) { border-radius: var(--blob-4); }
.picker-day:hover { background: var(--accent-soft); }
.picker-day.out { color: #C9C2B8; }
.picker-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.picker-day.sel { background: var(--forest); color: var(--cream); font-weight: 600; box-shadow: none; }
.picker-day.busy::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--berry-text); }
.picker-day.sel.busy::after { background: var(--cream); }
.picker-day:disabled { color: #D9D3CA; cursor: default; background: none; }
.picker-years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-height: 250px; overflow-y: auto; padding: 2px; }
.picker-years .chip { justify-content: center; }
/* a birthday's month (2026-10-16): twelve month blobs, the day blobs' look */
.picker-which { font-size: calc(21px * var(--hand-scale)); }
.picker-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
.picker-months .picker-day { aspect-ratio: auto; max-width: none; height: 46px; font-size: 15px; background: var(--cream); }
.picker-months .picker-day:hover { background: var(--accent-soft); }
.picker-months .picker-day.sel { background: var(--forest); }
.picker-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 4px; }
.picker-save { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 10px; border: 0; border-radius: 999px; background: var(--forest); color: var(--cream);
  font: 600 15px/1 'Jost', sans-serif; cursor: pointer; }
.picker-save span { width: 30px; height: 30px; border-radius: var(--blob-1); background: rgba(255,255,255,.16); display: grid; place-items: center; }
.picker-save:disabled { opacity: .5; cursor: default; }
.clock-readout { display: flex; align-items: center; justify-content: center; gap: 4px; }
.clock-part { min-width: 84px; padding: 8px 10px; border: 0; border-radius: var(--blob-1); background: var(--oat); color: var(--ink);
  font: 800 44px/1 'Nunito', 'Jost', sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.clock-part + .clock-colon + .clock-part { border-radius: var(--blob-3); }
.clock-part.on { background: var(--forest); color: var(--cream); }
.clock-colon { font: 800 40px/1 'Nunito', sans-serif; color: var(--text-secondary); }
.clock-dial { width: 100%; max-width: 280px; align-self: center; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.clock-face { fill: var(--mint); }
.clock-hand { stroke: var(--forest); stroke-width: 3; stroke-linecap: round; }
.clock-hub, .clock-knob { fill: var(--forest); }
.clock-knob-dot { fill: var(--cream); }
.clock-n { font: 500 17px/1 'Jost', sans-serif; fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.clock-n.inner { font-size: 13.5px; fill: var(--text-secondary); }
.clock-n.sel { fill: var(--cream); font-weight: 600; }
.clock-hint { margin: -4px 0 0; text-align: center; font-size: 13px; color: var(--text-secondary); }

/* A link or a file (2026-10-14, Kathryn: "Or" between them, and the file
   chosen in a box like the link's field, not a pill button) */
.or-line { display: flex; align-items: center; gap: 12px; margin: 2px 0; font: 600 12px/1 'Jost', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-secondary); }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1.5px; background: #E2DACE; }
.file-field { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1.5px dashed #D6CFC4; border-radius: 12px;
  background: #FFFFFF; color: var(--text-secondary); font: 400 16px/1.5 'Jost', sans-serif; text-align: left; cursor: pointer; }
.file-field:hover, .file-field:focus-visible { border-color: var(--forest); outline: none; box-shadow: 0 0 0 3px var(--mint); }
.file-field .edie-doodle { color: var(--forest); flex: 0 0 auto; }
.file-field-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-field.chosen { border-style: solid; color: var(--charcoal); }
.file-field-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--blob-4);
  background: var(--cream); color: var(--text-secondary); }

/* Who's it for? after a calendar file (2026-10-14, calendar-who.js) */
.cw-sub { margin: 4px 0 8px; }
.cw-edie { display: flex; gap: 8px; align-items: flex-start; color: var(--berry-text); font-size: 14.5px; line-height: 1.45; margin: 6px 0 10px; }
.cw-edie-doodle { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.cw-list { display: flex; flex-direction: column; gap: 8px; }
.cw-row { background: #F3F8FD; border-radius: 14px 18px 12px 16px; padding: 10px 12px; }
.cw-row:nth-child(even) { border-radius: 18px 12px 16px 14px; }
.cw-row.out { opacity: .55; }
.cw-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cw-title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cw-when { font-size: 13px; }
.cw-chips { margin-top: 8px; flex-wrap: wrap; gap: 6px; }
.cw-ini { width: 20px; height: 20px; flex: 0 0 auto; display: inline-grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; border-radius: var(--blob-4); }
.chip.selected .cw-ini { box-shadow: 0 0 0 1.5px var(--cream); }
.chip.cw-leave.on, .chip.cw-leave.on:hover { background: var(--accent-soft); border-color: var(--accent); }
.chip.cw-leave.on .chip-text { color: var(--berry-text); }
/* edie's guess is mint with "My guess:" (decision d76, 2026-10-20) */
.cw-guess { display: inline-block; font-size: 12.5px; color: var(--forest); background: var(--mint); margin-top: 8px; padding: 3px 10px; border-radius: 10px 12px 9px 13px; }
/* 2026-10-20, redesign piece 4: the one Who's it for? shape (calendar-who.js) */
.who-for { display: flex; flex-direction: column; gap: 8px; }
.wf-tabs { flex-wrap: wrap; gap: 6px; justify-content: center; }
.wf-tabnote { text-align: center; font-size: 13px; margin: -2px 0 2px; }
.cw-row.unsure { background: var(--surface); border: 2px dashed var(--berry-text); }
.wf-why { font-size: 13px; color: var(--berry-text); margin-top: 4px; }
.wf-title-tap { padding: 0; border: 0; background: none; text-align: left; font: inherit; font-weight: 600; color: inherit; cursor: text; }
.wf-words { margin-top: 2px; }
.wf-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }   /* W29: words, day and time together */
.wf-when { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cw-top .wf-change { flex: none; }
.cw-top:has(.wf-change) { align-items: flex-start; }
.who-for .date-pick, .who-for .pick-pill { margin-top: 6px; }
.wf-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 4px; }
.wf-then { text-align: center; font: 700 14px/1.2 'Nunito', sans-serif; color: var(--forest); margin: 0; }

/* The invite pop-up (invite-pop.js, 2026-10-16): the link in the same dashed
   box as Home's Forward me an email address, then Copy / Share as in
   EdieUi.confirm's buttons */
.invite-pop { display: flex; flex-direction: column; gap: 10px; }
.invite-pop p { margin: 0; }
/* an address or link to copy, in a dashed box (2026-10-17: one for the invite link, Home's and Account's addresses) */
.addr-box { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px dashed var(--oat); border-radius: 12px; font: 600 14px/1.4 'Jost', sans-serif; color: var(--forest); }
.addr-box span { flex: 1; min-width: 0; overflow-wrap: anywhere; user-select: all; }
.invite-making { display: flex; align-items: center; gap: 8px; font: 400 14px/1.5 'Jost', sans-serif; color: var(--text-secondary); }
.invite-pop .confirm-actions { margin-top: 2px; }
.wf-moved .cw-chips { margin-top: 6px; }

/* One note, the same everywhere (simpler edie phase 3, d305 to d312; EdieUi.NoteRow).
   Yours the yellow sticky, edie's mint with her face; the arrow and the x
   centred on the first line, and the words never under them. */
.note-row { position: relative; display: block; margin: 0 0 8px; padding: 10px 74px 10px 12px; border-radius: 16px 20px 14px 18px; background: var(--lemon); text-align: left; }
.note-row.edie { background: var(--mint); }
.note-main { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.note-face { flex: none; margin-top: 1px; }
.note-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.note-line { font-weight: 500; line-height: 1.3; }
.note-for { color: var(--text-secondary); font-size: 13px; }
.note-ends { position: absolute; top: 3px; right: 6px; display: flex; align-items: center; gap: 2px; height: 36px; }
.note-more-mark { display: flex; align-items: center; justify-content: center; width: 26px; height: 30px; color: var(--text-secondary); pointer-events: none; }
.note-more-mark svg { display: block; transition: transform .2s; }
.note-more-mark.up svg { transform: rotate(180deg); }
.note-x { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: none; color: var(--text-secondary); font-size: 20px; line-height: 1; cursor: pointer; }
.note-x:hover { background: rgba(255,255,255,.5); }
.note-more { margin-right: -62px; padding: 8px 12px 0 36px; }
.note-row:not(.edie) .note-more { padding-left: 0; }
.note-why { margin: 0 0 8px; font-size: 14px; color: var(--charcoal); }
.note-acts { display: flex; gap: 14px; flex-wrap: wrap; }
.note-ask h3 { margin: 0 0 6px; }
.note-ask-line { margin: 0 0 12px; color: var(--text-secondary); }
.note-ask .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.note-ask-hint { margin: 12px 0; font-size: 14px; color: var(--text-secondary); }
.note-ask-strip { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
html.style-notebook .note-row { border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.08); transform: rotate(-.4deg); }
html.style-notebook .note-row:nth-child(even) { transform: rotate(.5deg); }
html.style-notebook .note-line { font-family: var(--font-hand); font-weight: var(--hand-weight); font-size: calc(21px * var(--hand-scale)); line-height: 1.15; }
/* a clash (d279): dashed pink on both its events, with what it clashes with */
.pl-cev.clash, .pl-bline.clash { outline: 2px dashed var(--berry-text); outline-offset: 2px; border-radius: 12px; }
.pl-clash-line { display: block; color: var(--berry-text); font-size: 13px; }

/* Easier to tap and read (Tracker x83, 2026-11-10, Workbook d318). Small round
   buttons and every row get a bigger invisible tap area (about 44px) without
   looking bigger or making rows taller: the space round them takes it. A tick's
   area stops before the words, so tapping the words still opens the thing. */
.pl-tick, .ls-tick, .rb-heartbtn, .pl-rq-chip, .ar-cat, .note-main, .pl-btext, .pl-check-text, .pl-line,
.pl-coming, .rb-row-open, .ls-title-btn, .ls-text { position: relative; }
.pl-tick::before, .ls-tick::before { content: ''; position: absolute; top: -10px; bottom: -10px; left: -10px; right: 0; }
.note-x::before { content: ''; position: absolute; inset: -4px; }
.rb-heartbtn::before { content: ''; position: absolute; inset: -6px; }
.pl-rq-chip::before, .ar-cat::before { content: ''; position: absolute; top: -4px; bottom: -4px; left: 0; right: 0; }
.note-main::before, .pl-btext::before, .pl-check-text::before, .pl-line::before, .pl-coming::before,
.rb-row-open::before, .ls-title-btn::before, .ls-text::before { content: ''; position: absolute; top: -6px; bottom: -6px; left: 0; right: 0; }
/* white words only where they stand out (EdieUi.inkCheck marks the rest) */
.ink-dark { color: #2E2A33 !important; }