/* Gina & Jarrid — Wedding Decor & Aesthetic Guide
   Palette + mood pulled from the couple's moodboard. */

:root {
  --brown: #4a2c20;
  --action: #633526;       /* everything clickable: buttons, toggles, active chips */
  --action-hover: #4a2c20;
  --blue: #6699cc;
  --lavender: #c9a0d9;
  --coral: #f4a077;
  --gold: #f8c86b;
  --cream: #f3e6cf;
  --sky: #b7d3ee;
  --sage: #93b34a;
  --berry: #c85c66;
  --blush: #f7b8c4;
  --berry-text: #b04c57;   /* berry for small text: 4.5:1 on paper */
  --berry-deep: #8a3640;   /* darker berry for schedule times: 7:1 on paper */
  --muted: #7a6656;        /* secondary text: 5:1 on paper */

  --ink: #3a2a22;
  --paper: #fffaf3;
  --paper-alt: #f8efe1;
  --line: #e7d9c4;

  --radius: 16px;
  --shadow: 0 8px 32px rgba(74, 44, 32, 0.08);
  --shadow-lg: 0 20px 48px rgba(74, 44, 32, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
}
*, *::before, *::after { line-height: round(nearest, 1.5em, 4px); }
h1, h2, h3 { line-height: 1.2; line-height: round(nearest, 1.2em, 4px); }

h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; margin: 0 0 8px; font-weight: 600; }
h1 { font-size: clamp(32px, 5vw, 48px); letter-spacing: 0.01em; }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 20px; }
p { margin: 0 0 16px; }
a { color: inherit; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 250, 243, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-nav .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
  flex-wrap: wrap; gap: 12px;
}
.site-nav .brand { font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-nav .brand span { color: var(--berry-text); }
.nav-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.nav-links a, .nav-drop-btn { text-decoration: none; padding: 8px 8px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-links > a:hover, .nav-links > a.active, .nav-drop-btn:hover, .nav-drop-btn.active { border-bottom-color: var(--berry-text); }
/* Events and For vendors: a button that drops down its pages (site.js builds them from the page menu) */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 4px; border-top: 0; border-left: 0; border-right: 0;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.nav-drop-btn::after {
  content: ""; width: 6px; height: 6px; margin: -4px 0 0 4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.nav-drop-btn[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
.nav-drop-btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.nav-drop-list {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 200px; padding: 8px;
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.nav-drop-list[hidden] { display: none; }
.nav-drop-list a { padding: 8px 12px; border: 0; border-radius: 8px; color: var(--ink); }
.nav-drop-list a:hover { background: var(--paper-alt); color: var(--action); }
.nav-drop-list a.active { color: var(--action); font-weight: 600; }
.nav-group-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-right: 4px; }
.tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.tag {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #fff;
}

/* ---------- Sections ---------- */
section { padding: 52px 0; }
section.alt { background: var(--paper-alt); }

/* ---------- Palette ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.swatch { width: 96px; text-align: center; font-size: 12px; color: #6b5644; }
.swatch .chip {
  width: 96px; height: 96px; border-radius: 12px; margin-bottom: 8px;
  box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,0.06);
}
.swatch .hex { font-family: "SF Mono", Menlo, monospace; font-size: 12px; color: var(--muted); }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 24px; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--paper-alt); }
.card .card-body { padding: 20px 20px 24px; }
.card .card-body h3 { margin-bottom: 8px; }
.card .card-body .time { font-size: 12px; color: var(--berry-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.card .card-body p { color: #6b5644; font-size: 16px; margin-top: 8px; margin-bottom: 0; }

/* ---------- Photo blocks ---------- */
.photo-block { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 20px; }
.photo-block img { width: 100%; height: auto; display: block; }
.photo-caption {
  background: #fff; padding: 12px 20px; font-size: 14px; color: #6b5644;
  border-top: 1px solid var(--line);
}
.photo-caption strong { color: var(--ink); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.photo-grid.crop img { aspect-ratio: 4 / 5; object-fit: cover; }
/* Side-by-side cards stay the same height: the caption fills any spare space */
.photo-block, .pano-block { display: flex; flex-direction: column; }
.photo-block .photo-caption { flex: 1; }

/* ---------- Event pages: The look (per spot: today, what we want, inspiration) ---------- */
.spot { scroll-margin-top: calc(var(--nav-h) + 24px); }
.spot + .spot { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.spot > p { max-width: 760px; }
.look-label {
  font: 600 12px/16px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 0 0 8px;
}
.look-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; }
.look-pair .pano-block { margin-bottom: 0; }
.look-empty {
  display: flex; align-items: center; justify-content: center; flex: 1; min-height: 160px;
  border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--muted);
  font: 500 14px/20px "Montserrat", sans-serif; text-align: center; padding: 16px;
}
.look-empty-short { min-height: 96px; }
.look-col { display: flex; flex-direction: column; }
.look-inspo { margin-top: 32px; }
.look-inspo .stage-head { grid-template-columns: 1fr auto; margin-bottom: 12px; }
.look-inspo .stage-head .look-label { grid-column: 1; margin: 0; }
.look-inspo .stage-controls { grid-column: 2; }
.stage-controls[hidden] { display: none; }
.look-inspo .stage-card:not(.is-active) .vibe-body { opacity: 0; }
.vibe-body .vibe-cap { display: block; font: 500 14px/20px "Montserrat", sans-serif; color: #fff; text-align: left; }
.area-schedule { margin-top: 16px; }

/* ---------- 360 embeds ---------- */
.pano-block { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 20px; background: #000; }
.pano-frame { position: relative; width: 100%; padding-top: 66.6%; }
.pano-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Area page layout ---------- */
.area-hero {
  padding: 40px 0 12px;
}
.area-hero .breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.area-hero .breadcrumb a { text-decoration: none; color: var(--berry-text); }
.area-meta-row { display: flex; gap: 24px; flex-wrap: wrap; margin: 20px 0 8px; }
.area-meta-row .item { font-size: 14px; }
.area-meta-row .item .label { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

.status-pill {
  display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.status-locked { background: #e5efd9; color: #4c6023; }
.status-progress { background: #fdeacb; color: #8a5a1b; }
.status-tbd { background: #f1e6e6; color: #8a4a4a; }

.note-box {
  background: var(--cream); border-left: 4px solid var(--gold); border-radius: 12px;
  padding: 16px 20px; margin: 20px 0; font-size: 14px;
}
.note-box.open-question { background: #fdeceb; border-left-color: var(--berry-text); }
.note-box strong { display: block; margin-bottom: 4px; }
/* Vendor pages: the questions we need answered, out of the header pop-ups and in one visible list */
.ask-box { max-width: 800px; margin: 24px 0 8px; padding: 16px 20px; background: #fdeceb; border-left: 4px solid var(--berry-text); border-radius: 12px; }
.ask-title { margin: 0 0 4px; font-weight: 600; color: var(--berry-text); }
.ask-list { margin: 0; }
.ask-list > div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px dashed #f3c5cb; }
.ask-list > div:last-child { border-bottom: none; }
.ask-list dt { font-weight: 600; color: var(--ink); }
.ask-list dd { margin: 0; color: #6b5644; }
.ask-list dd p { margin: 0; }
.ask-list dd p + p { margin-top: 8px; }
.ask-list a, .ask-more a { color: var(--berry-text); }
.ask-more { margin: 8px 0 0; font-size: 14px; color: #6b5644; }
@media (max-width: 640px) {
  .ask-box { padding: 12px 16px; }
  .ask-list > div { grid-template-columns: 1fr; gap: 4px; }
}

.vendor-tasks { list-style: none; padding: 0; margin: 0; }
.vendor-tasks li {
  padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); position: relative; font-size: 16px;
}
.vendor-tasks li:before {
  content: "✓"; position: absolute; left: 0; top: 12px; color: var(--sage); font-weight: 700;
}
.vendor-tasks li:last-child { border-bottom: none; }

/* ---------- Timeline ---------- */
.timeline { position: relative; margin: 0 auto; max-width: 720px; }
.timeline:before {
  content: ""; position: absolute; left: 89px; /* centred under the 12px dot */ top: 0; bottom: 0; width: 2px; background: var(--line);
}
.t-row { display: flex; gap: 20px; position: relative; padding: 16px 0; }
.t-time { width: 92px; flex-shrink: 0; text-align: right; padding-right: 20px; font-weight: 700; font-size: 14px; color: var(--berry-deep); position: relative; white-space: nowrap; }
.t-time:after {
  content: ""; position: absolute; right: -4px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--berry); border: 2px solid var(--paper);
}
.t-body h3 { margin: 0 0 4px; font-size: 16px; }
.t-body p { margin: 0; font-size: 14px; color: #6b5644; }
.t-body .tag-mini {
  display: inline-block; margin-top: 4px; font-size: 12px; padding: 4px 8px; border-radius: 999px;
  background: var(--paper-alt); color: #6b5644; border: 1px solid var(--line);
}

.guest-count-bar { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin: 24px 0 8px; }
.guest-count-bar .gc {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 24px; text-align: center; min-width: 152px;
  box-shadow: var(--shadow);
}
.guest-count-bar .gc .num { font-size: 24px; font-weight: 700; color: var(--berry-text); }
.guest-count-bar .gc .lbl { font-size: 12px; color: #6b5644; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Footer ---------- */
footer { padding: 40px 0; text-align: center; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
footer a { color: var(--berry-text); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 12px 24px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 700; background: var(--action); border: 1.5px solid var(--action); color: #fff; cursor: pointer;
}
.btn.secondary { background: transparent; color: var(--action); border: 1.5px solid var(--action); }
.btn:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

@media (max-width: 640px) {
  .site-nav .container { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 12px; padding-bottom: 0; }
  /* one swipeable row instead of three wrapped rows */
  .nav-links { flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 20px; padding-bottom: 8px; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a, .nav-group-label { flex-shrink: 0; white-space: nowrap; }
  .timeline:before { left: 69px; }
  .t-time { width: 72px; font-size: 12px; padding-right: 16px; }
}

/* ---------- Overview (home) page ---------- */
.home {
  --h-yellow: #ffd382;
  --h-brown: #633526;
  --h-blue: #3e75b7;
  --h-berry: #b04c57;
  --h-olive: #6a8700;
  --h-paper: #fff8ee;
  --h-paper-alt: #f5eadc;
  --h-muted: #7a6656;
  font-family: "Montserrat", system-ui, sans-serif;
  background: var(--h-paper);
  color: var(--h-brown);
}
.home h1, .home h2, .home h3, .home .brand, .home .btn, .home .time {
  font-family: "Playfair Display", Georgia, serif;
}
.home h2 { font-size: clamp(24px, 2.6vw, 28px); font-weight: 700; text-align: center; margin-bottom: 12px; }
.home section { padding: 64px 0; }
.home .sub { text-align: center; color: var(--h-muted); font-size: 14px; margin: 0 auto 28px; max-width: 620px; }

.home .site-nav { background: rgba(255, 211, 130, 0.94); border-bottom: none; }
.home .site-nav { position: relative; } /* the overview's header scrolls away with the page */
.home .nav-links a { color: var(--h-brown); }
.home .nav-links a:hover, .home .nav-links a.active { border-bottom-color: var(--berry-text); }

.home-hero { background: var(--h-yellow); text-align: center; padding: 56px 0 72px; }
.home-hero .arc-title { width: min(320px, 80vw); height: auto; display: block; margin: 0 auto -4px; overflow: visible; }
.home-hero .arc-title text { font-family: "Montserrat", sans-serif; font-weight: 400; font-size: 26px; fill: var(--h-blue); letter-spacing: 0.5px; }
.home-hero h1 { font-size: clamp(40px, 8vw, 64px); font-weight: 800; line-height: 1.1; line-height: round(nearest, 1.1em, 4px); margin-bottom: 16px; }
.home-hero .date { font-weight: 400; font-size: 24px; color: var(--h-blue); margin-bottom: 20px; }
.home-hero .address { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.home .btn { font-size: 12px; padding: 8px 24px; }

/* "Where would you like to start?" — one card per kind of reader */
.home-hero .lede { font-size: 16px; color: var(--h-brown); margin: 12px auto 0; }
/* One row of three cards keeps the hero slim; the vendor card gets the wider column for its tiles */
.start-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; max-width: 1000px; margin: 24px auto 0; text-align: left; }
.start-card {
  display: flex; flex-direction: column; gap: 4px; padding: 20px 20px 24px; background: #fff; border-radius: 8px;
  text-decoration: none; color: var(--h-brown); box-shadow: 0 6px 18px rgba(99, 53, 38, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.start-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(99, 53, 38, 0.16); }
.home .start-title { margin: 0; text-align: left; font-family: "Playfair Display", Georgia, serif; font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--action); }
a.start-card .start-title::after { content: "\00a0→"; }
/* "Continue where you left off" (site.js), above the cards once you've opened another page */
.home-hero .resume { margin: 24px auto 0; }
.resume a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 20px; box-sizing: border-box; border-radius: 999px;
  background: var(--action); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none;
}
.resume a::after { content: "→"; margin-left: 4px; }
.resume a:hover { background: var(--action-hover); }
.resume a:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.resume strong { font-weight: 700; }
/* The vendor card isn't one link: it lists each vendor's page, so a vendor is one tap from their own page */
.start-vendors:hover { transform: none; box-shadow: 0 6px 18px rgba(99, 53, 38, 0.1); }
/* A compact mini schedule: one row per team (emoji, name, start time), two columns, in the order they start; tap area 44px */
.vendor-tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; margin: 8px 0 0; padding: 0; }
.vendor-tiles li { margin: 0; }
.vendor-tiles a {
  position: relative; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; box-sizing: border-box;
  color: var(--action); text-decoration: none; background: var(--h-paper); border: 1px solid var(--line); border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vendor-tiles a::after { content: ""; position: absolute; inset: -8px 0; }
.vt-icon { flex: none; font-size: 14px; line-height: 1; }
.vt-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-time { flex: none; font-size: 12px; color: var(--h-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-tbc { flex: none; padding: 0 4px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--h-muted); box-shadow: inset 0 0 0 1px var(--line); }
.vendor-tiles a:hover { background: var(--action); border-color: var(--action); color: #fff; }
.vendor-tiles a:hover .vt-time, .vendor-tiles a:hover .vt-tbc { color: #fff; }
.vendor-tiles a:focus-visible, .start-text a:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
/* The page you opened last time (site.js): that row is filled in */
.vendor-tiles a.is-last { background: var(--action); border-color: var(--action); color: #fff; }
.vendor-tiles a.is-last .vt-time, .vendor-tiles a.is-last .vt-tbc { color: #fff; }
.vt-last { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.start-text a { color: var(--action); text-underline-offset: 3px; }
.start-text { font-size: 14px; color: var(--h-muted); }
.home-hero .start-note { font-size: 12px; color: #6b5644; margin: 20px auto 0; }
@media (max-width: 760px) {
  .start-grid { grid-template-columns: 1fr; max-width: 440px; }
  .start-card { padding: 16px 16px 20px; }
  .vendor-tiles { grid-template-columns: 1fr; gap: 8px; }
  .vendor-tiles a { height: 40px; }
  .vendor-tiles a::after { inset: -4px 0; }
}

.event-body .place { display: block; font-size: 12px; color: var(--h-muted); margin-top: 4px; }

.home .tags { margin: 0 0 32px; gap: 8px; }
.home .tag { font-size: 12px; padding: 4px 12px; }

.palette-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 24px 12px; margin: 0 auto; }
.palette-grid .swatch { width: auto; font-size: 12px; color: var(--h-muted); }
.palette-grid .swatch .chip { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; box-shadow: 0 2px 6px rgba(99, 53, 38, 0.1); }
.palette-grid .swatch .hex { font-size: 12px; }
/* Brand-guide columns: flush colour blocks (saturated on top, lighter below), details underneath */
.palette-note { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.home-palette .palette-note { text-align: center; }
.spec .spec-main, .spec .spec-light { display: flex; align-items: flex-end; padding: 8px; }
.spec .spec-main { aspect-ratio: 1 / 1; }
.spec .spec-light { height: 64px; }
.spec .hex { display: block; font-size: 12px; font-weight: 500; color: inherit; }
.spec .spec-label { padding-top: 12px; text-align: left; }
.spec .tone { font-size: 12px; font-weight: 600; color: var(--ink); }
@media (max-width: 860px) {
  .spec .spec-light { height: 48px; }
}

.home-florals { background: var(--h-paper-alt); }

.event-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.event-card {
  background: #fff; border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--h-brown);
  box-shadow: 0 6px 18px rgba(99, 53, 38, 0.1); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.event-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(99, 53, 38, 0.16); }
.event-card img { width: 100%; aspect-ratio: 193 / 150; object-fit: cover; display: block; }
.event-body { padding: 16px 12px 20px; }
.event-body .time { display: block; font-size: 12px; color: var(--berry-text); margin-bottom: 4px; }
.event-body h3 { font-size: 16px; font-weight: 700; margin: 0; }


.home footer { border-top: none; color: var(--berry-text); font-size: 12px; }

@media (max-width: 860px) {
  .palette-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .event-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; }
  .event-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- New look (area pages being moved to the overview's type) ---------- */
.new-look {
  font-family: "Montserrat", system-ui, sans-serif;
  background: #fff8ee;
  color: #3a2a22;
}
.new-look h1, .new-look h2, .new-look h3,
.new-look .brand, .new-look .t-time, .new-look .status-pill {
  font-family: "Playfair Display", Georgia, serif;
}
.new-look h1 { font-size: clamp(40px, 6vw, 56px); font-weight: 800; margin-bottom: 20px; }
.new-look h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; margin-bottom: 24px; }
.new-look h3 { font-size: 20px; font-weight: 700; }
.new-look .site-nav { background: rgba(255, 248, 238, 0.94); }
.new-look .area-hero { padding-top: 48px; }
.new-look .area-hero .lede { color: #6b5644; max-width: 680px; font-size: 16px; }
/* Key facts: an aligned fact sheet, every cell the same width with a hairline above it */
.new-look .area-meta-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); column-gap: 32px; row-gap: 0; margin: 24px 0 8px; border-bottom: 1px solid var(--line); }
.new-look .area-meta-row .item { font-size: 16px; line-height: 24px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.new-look .area-meta-row .item .label { line-height: 16px; }
.new-look .area-meta-row .pending { color: var(--muted); font-style: italic; }
/* Four facts: two by two, or one row of four when there's room (never three and a stray) */
.new-look .area-hero > .container { container: hero / inline-size; }
@container hero (min-width: 480px) {
  .new-look .area-meta-row:has(> .item:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container hero (min-width: 800px) {
  .new-look .area-meta-row:has(> .item:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The rest of the facts, one tap away */
.new-look .meta-more { margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.new-look .meta-more > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; min-height: 44px; padding: 12px 32px 12px 0; position: relative; font-size: 16px; line-height: 20px; color: var(--action); font-weight: 600; }
.new-look .meta-more > summary::-webkit-details-marker { display: none; }
.new-look .meta-more > summary::after { content: ""; position: absolute; right: 8px; top: 16px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
.new-look .meta-more[open] > summary::after { transform: rotate(-135deg); top: 20px; }
.new-look .meta-more > summary:hover { color: var(--action-hover); }
.new-look .meta-more > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; border-radius: 4px; }
.new-look .meta-more-list { font-size: 14px; font-weight: 400; color: var(--muted); }
.new-look .meta-more[open] .meta-more-list { display: none; }
.new-look .meta-more .area-meta-row { margin: 0; border-bottom: 0; }
.new-look .area-meta-row:has(+ .meta-more) { margin-bottom: 0; }
@media (max-width: 640px) {
  /* Phones: one list, label on the left, value on the right */
  .new-look .area-meta-row { grid-template-columns: 1fr; }
  .new-look .area-meta-row .item { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; align-items: baseline; }
  .new-look .area-meta-row .item .label { margin-bottom: 0; }
  .new-look .area-meta-row .item > * { justify-self: start; }
}
.new-look section { padding: 64px 0; }
.new-look .area-hero + section { padding-top: 32px; }
.new-look section.alt { background: #f8ede0; }
.new-look .timeline { margin: 0 0 0 20px; }
.new-look .t-row { padding: 16px 0; }
.new-look .t-time { font-size: 12px; top: 4px; }
.new-look .t-body h3 { font-size: 20px; font-weight: 700; }
.new-look .t-body .tag-mini { margin-top: 12px; padding: 4px 12px; font-size: 12px; background: #f3e6d4; }
.new-look .card { border-color: #eadfcf; }
.new-look .card .card-body { padding: 24px 24px 28px; }
.new-look .card .card-body > p { color: #6b5644; margin: 12px 0 0; font-size: 16px; }
.new-look .card a { color: inherit; }
.new-look .vendor-tasks li { padding: 16px 0 16px 32px; font-size: 16px; }
.new-look .vendor-tasks li:before { top: 16px; }
.new-look footer { color: var(--muted); font-size: 16px; }

/* ---------- Photography: day timeline with inline inspo ---------- */
:root { --nav-h: 60px; }
.day-bar {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: rgba(255, 248, 238, 0.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.day-bar .container { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; }
.day-bar .container::-webkit-scrollbar { display: none; }
.day-bar a {
  flex-shrink: 0; text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.day-bar a span { color: var(--berry-text); font-size: 12px; margin-left: 4px; }
.day-bar a.active { background: var(--action); border-color: var(--action); color: #fff; }
.day-bar a.active span { color: #fff; }

.shot-day .shot-area { padding: 44px 0 12px; scroll-margin-top: calc(var(--nav-h) + 36px); }
.shot-area h2 { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 8px; }
.shot-area-time { font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; color: var(--berry-text); }

.shot-row { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px dashed var(--line); scroll-margin-top: calc(var(--nav-h) + 64px); }
.shot-row:last-child { border-bottom: none; }
.shot-time { font-family: "Playfair Display", Georgia, serif; font-weight: 700; color: var(--berry-text); font-size: 16px; padding-top: 4px; }
.shot-body { min-width: 0; }
.shot-body h3 { font-size: 20px; margin: 0 0 4px; }
.shot-body > p { color: #6b5644; margin: 0; font-size: 16px; }
.shot-list { margin: 8px 0 0; padding-left: 20px; color: #6b5644; font-size: 16px; }
.shot-list li { margin-bottom: 4px; }

.shot-inspo { margin-top: 16px; scroll-margin-top: calc(var(--nav-h) + 64px); }
.shot-inspo-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; }
.thumb { flex-shrink: 0; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; scroll-snap-align: start; box-shadow: 0 4px 12px rgba(74, 44, 32, 0.12); transition: transform 0.15s ease; }
.thumb:hover { transform: translateY(-2px); }
.thumb img { display: block; height: 152px; width: auto; }
.shot-caption { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.shot-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.shot-tags .tag-mini { display: inline-block; font-size: 12px; padding: 4px 12px; border-radius: 999px; background: #f3e6d4; color: #6b5644; border: 1px solid var(--line); }
.shot-day.wide-time .shot-row { grid-template-columns: 84px 1fr; }
.shot-day .palette-grid { margin: 0 0 8px; }
.shot-day .palette-grid .swatch { color: #7a6656; }
.new-look .area-hero .guest-count-bar { justify-content: flex-start; margin-top: 20px; }
.inspo-empty { color: var(--muted); font-style: italic; margin: 0; font-size: 14px; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(20, 12, 8, 0.88); }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 56px 24px; box-sizing: border-box; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 8px; }
.lightbox figcaption { color: #f3e6cf; font-size: 14px; margin-top: 12px; text-align: center; }
.lightbox button { position: absolute; background: rgba(255,255,255,0.12); color: #fff; border: 0; border-radius: 999px; width: 44px; height: 44px; font-size: 24px; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,0.25); }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }

.inline-link { margin-left: 12px; font-size: 14px; font-weight: 600; color: var(--berry-text); text-decoration: none; white-space: nowrap; }
.inline-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  /* The site nav wraps to several lines on phones; let it scroll away and keep only the day bar pinned */
  body:has(.day-bar) .site-nav { position: static; }
  .shot-row { grid-template-columns: 48px 1fr; gap: 12px; }
  .shot-day.wide-time .shot-row { grid-template-columns: 64px 1fr; }
  .shot-day.wide-time .shot-time { font-size: 12px; }
  .shot-day .palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 8px; }
  .guest-count-bar { flex-wrap: nowrap; gap: 8px; }
  .guest-count-bar .gc { min-width: 0; flex: 1; padding: 12px 8px; }
  .guest-count-bar .gc .num { font-size: 20px; }
  .guest-count-bar .gc .lbl { font-size: 12px; }
  .thumb img { height: 120px; }
  .lightbox figure { padding: 56px 12px 24px; }
}

/* ---------- Wedding party page ---------- */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 24px; max-width: 800px; }
.glance > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow); }
.glance-time { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 700; color: var(--berry-text); font-size: 20px; }
.glance-what { display: block; font-size: 12px; color: #6b5644; }
.shot-link { margin: 12px 0 0; font-size: 14px; }
.shot-link a { color: var(--berry-text); text-decoration: none; font-weight: 600; }
.shot-link a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .glance { grid-template-columns: repeat(2, 1fr); }
}
.know-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.know-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; box-shadow: var(--shadow); }
.know-card h3 { font-size: 20px; margin: 0 0 8px; }
@media (max-width: 640px) {
  .know-grid { grid-template-columns: 1fr; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Label / detail lists (logistics) ---------- */
.facts { display: grid; grid-template-columns: 240px 1fr; margin: 16px 0 0; }
.facts dt, .facts dd { padding: 12px 0; border-bottom: 1px dashed var(--line); margin: 0; }
.facts dt { font-weight: 600; padding-right: 24px; }
.facts dd { color: #6b5644; }
.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: none; }
/* Open items (logistics): what each owner still has to answer, as plain bullets, not ticks */
.open-list { margin: 0; padding-left: 20px; }
.open-list li + li { margin-top: 4px; }
.know-card p { margin: 0; color: #6b5644; }

/* The team (wedding-party.html#team): who to message, then one card per team */
.team-chain { --gap: 16px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px var(--gap); list-style: none; margin: 16px 0 0; padding: 0; counter-reset: chain; }
.team-chain li {
  position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 56px; margin: 0;
  padding: 8px 16px 8px 44px; background: var(--paper-alt); border-radius: 12px; counter-increment: chain;
}
.team-chain li::before {
  content: counter(chain); position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 12px; font-weight: 700;
}
.team-chain li + li::after {
  content: "→"; position: absolute; left: calc(var(--gap) / -2); top: 50%; transform: translate(-50%, -50%); font-size: 12px; color: var(--muted);
}
.chain-who { font-size: 14px; font-weight: 600; line-height: 1.2; }
.chain-note { font-size: 12px; color: var(--muted); }
#team .section-note { margin-top: 12px; }

.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.team-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.team-hub { grid-column: 1 / -1; background: var(--cream); border-color: transparent; box-shadow: none; }
.team-hub .team-jobs { columns: 2; column-gap: 32px; }
.team-hub .team-jobs li { break-inside: avoid; }
.team-head { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; column-gap: 8px; }
.team-emoji { grid-row: span 2; font-size: 24px; line-height: 1; }
.team-head h3 { margin: 0; font-size: 20px; line-height: 1.2; }
.team-when { font-size: 12px; font-weight: 600; color: var(--berry-text); }
.team-about { margin: 0; font-size: 14px; color: #6b5644; }
.team-people { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.team-people li {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px; border-radius: 999px;
  font-size: 14px; background: var(--paper-alt); color: var(--ink);
}
.team-people .is-lead { background: #f3e6d4; font-weight: 600; }
.lead-tag { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.team-people .is-tbc { background: none; border: 1px dashed var(--muted); color: var(--muted); font-weight: 400; padding: 3px 11px; }
.team-jobs { margin: 0; padding-left: 20px; font-size: 14px; color: #6b5644; }
.team-jobs li { margin: 0 0 4px; }
.team-head h3 { grid-column: 2; }
.team-when { grid-column: 2; }
/* "Steps →" sits at the top right of each card and shows that team's steps */
.team-steps {
  grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px 0 12px;
  font-size: 14px; font-weight: 600; color: var(--action); text-decoration: none; white-space: nowrap;
}
.team-steps::after { content: "→"; margin-left: 8px; transition: transform 0.15s ease; }
.team-steps:hover { text-decoration: underline; }
.team-steps:hover::after { transform: translateX(4px); }
/* Your team, once you've picked your role in "Show steps for" (or signed in) */
.team-card.is-mine { border: 2px solid var(--action); padding: 15px 19px 19px; }
.team-card.is-mine::before {
  content: "Your team"; position: absolute; top: -12px; right: 16px; padding: 2px 12px; border-radius: 999px;
  background: var(--action); color: #fff; font-size: 12px; font-weight: 600;
}
:lang(zh) .team-card.is-mine::before { content: "你的團隊"; }
@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-hub .team-jobs { columns: 1; }
  .team-card { gap: 8px; padding: 12px 16px 16px; }
  .team-card.is-mine { padding: 11px 15px 15px; }
  /* The chain becomes a 2 × 2 grid; arrows only between items on the same row */
  .team-chain { display: grid; grid-template-columns: 1fr 1fr; }
  .team-chain li:nth-child(3)::after { content: none; }
}
.know-card a { color: var(--berry-text); }
/* Wedding party "Good to know": three short lists instead of a wall of cards */
.know-group { margin-top: 24px; }
.know-group h3 { font-size: 20px; margin: 0 0 8px; }
.know-list { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; box-shadow: var(--shadow); }
.know-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.know-row:last-child { border-bottom: none; }
.know-row dt { font-weight: 600; }
.know-row dd { margin: 0; color: #6b5644; }
.know-row dd p { margin: 0; }
.know-row dd p + p { margin-top: 8px; }
.know-row dd.inspo-empty { color: var(--muted); }
.know-row a { color: var(--berry-text); }
@media (max-width: 640px) {
  .know-list { padding: 4px 16px; }
  .know-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: none; }
  .facts dd { padding-top: 4px; }
}
.section-note { margin: 8px 0 0; font-size: 14px; color: #6b5644; }

/* ---------- Language switch + Chinese type ---------- */
.site-nav .container { position: relative; }
.lang-toggle { display: inline-flex; }
.lang-toggle a {
  font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  text-decoration: none; color: #7a6656; white-space: nowrap;
}
.lang-toggle a[href]:hover { color: var(--action); }
/* Only the other language shows: one tap to switch */
.lang-toggle a[aria-current], .site-nav.has-menu .lang-toggle a[aria-current] { display: none; }
.lang-toggle a[href] { color: var(--action); text-decoration: underline; text-underline-offset: 4px; font-size: 14px; padding: 8px; }
.lang-toggle a:focus-visible { outline: 2px solid var(--berry); outline-offset: 2px; }
@media (max-width: 640px) {
  .lang-toggle { position: absolute; top: 8px; right: 24px; }
}
:lang(zh) body, body:lang(zh) { font-family: "Montserrat", "Noto Sans TC", system-ui, sans-serif; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) .brand, :lang(zh) .btn, :lang(zh) .shot-time,
:lang(zh) .t-time, :lang(zh) .glance-time, :lang(zh) .status-pill, :lang(zh) .home .time {
  font-family: "Playfair Display", "Noto Serif TC", Georgia, serif;
}
:lang(zh) .shot-area-time { font-family: "Montserrat", "Noto Sans TC", sans-serif; }

/* ---------- Overview: the vibe ---------- */
.home-vibe { background: var(--h-paper-alt); }
.home-vibe, .home-florals { overflow-x: clip; }
/* Looping stage (The vibe, florals): the active card is larger and shows any caption; stage-carousel.js positions every card. */
.stage-carousel { position: relative; }
/* Heading centred with the arrows at the right, on one line. */
.stage-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 12px; }
.stage-head h2 { grid-column: 2; margin-bottom: 0; }
.stage-controls { grid-column: 3; justify-self: end; display: flex; gap: 8px; }
.stage-btn {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--action); background: #fff;
  color: var(--action); font-size: 16px; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.stage-btn:hover { background: var(--action); color: #fff; }
.stage-btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.stage-track { position: relative; height: 464px; touch-action: pan-y; }
.stage-card {
  position: absolute; top: 0; left: 0; width: 300px; height: 312px; border-radius: 8px; overflow: hidden;
  background: var(--h-brown); box-shadow: 0 6px 18px rgba(99, 53, 38, 0.1); cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), width 0.6s cubic-bezier(0.22, 1, 0.36, 1), height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage-card.is-active { cursor: default; box-shadow: 0 14px 30px rgba(99, 53, 38, 0.18); }
.stage-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage-card.thumb { padding: 0; border: 0; }
.stage-card.thumb.is-active { cursor: zoom-in; }
.vibe-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 16px; color: #fff;
  background: linear-gradient(to top, rgba(49, 32, 27, 0.85), rgba(49, 32, 27, 0.55) 60%, rgba(49, 32, 27, 0));
}
.vibe-body h3 { font-size: 16px; margin: 0; color: #fff; }
.vibe-body p {
  font-size: 14px; color: #fff; margin: 0; max-height: 0; opacity: 0; overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease;
}
.stage-card.is-active .vibe-body { padding: 64px 20px 20px; }
.stage-card.is-active .vibe-body h3 { font-size: 20px; }
.stage-card.is-active .vibe-body p { max-height: 120px; opacity: 1; margin-top: 4px; transition-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
  .stage-card, .vibe-body p { transition: none; }
}

/* ---------- Who does what (decor split) ---------- */
.who-card.current { border: 2px solid var(--berry); }
.who-you { display: block; margin: -4px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--berry-text); }
.who-list { margin: 0; padding-left: 20px; color: #6b5644; font-size: 14px; }
.who-list li { margin: 4px 0; }

/* ---------- Full timeline: steps with when / where / who, filter by person ---------- */
.tl [hidden], .tl-tools [hidden] { display: none !important; }
.tl-tools { margin-top: 32px; }
.tl-tools-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  font: 500 14px "Montserrat", sans-serif; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink); white-space: nowrap;
}
.filter-chip:hover { border-color: var(--action); }
.filter-chip:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.filter-chip[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.chip-count { font-size: 12px; color: var(--berry-text); margin-left: 8px; }
.filter-chip[aria-pressed="true"] .chip-count { color: #fff; }
.tl-status { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.tl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.tl-legend .tl-tools-label { display: inline; margin: 0 4px 0 0; }
.day-bar a.is-empty { color: var(--muted); border-style: dashed; }

/* Labels: flat and square-cornered so they never read as buttons */
.flag {
  display: inline-block; font: 600 12px "Montserrat", sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0 8px; border-radius: 4px; white-space: nowrap;
}
.flag-hard { background: #fbe3e6; color: #9c3a45; }
.flag-check { background: #e6efd3; color: #4f6320; }
.flag-key { background: #fdefcf; color: #7a4f12; }
.flag-tbc { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

.tl-area h2 { margin-bottom: 0; }
.area-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 16px 0 8px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.area-facts dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.area-facts dd { margin: 0; font-size: 16px; }
.area-facts .inline-link { margin-left: 0; font-size: 16px; }

.slot { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.slot:last-of-type { border-bottom: none; }
.slot-time { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 16px; color: var(--berry-deep); padding-top: 12px; }
.slot-count { display: block; margin-top: 4px; font: 600 12px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.slot-steps { display: grid; gap: 8px; min-width: 0; }
.slot.is-multi .slot-steps { border-left: 2px solid var(--line); padding-left: 8px; }
.slot:not(.is-multi) .slot-count { display: none; }
.step { padding: 12px 16px; border-radius: 12px; min-width: 0; }
.step .shot-list, .step .shot-link { margin-top: 12px; }
.step.is-key { background: #fcf1dc; }
.step.is-hard { background: #fcefed; box-shadow: inset 4px 0 0 var(--berry); }
.step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px; }
.step h3 { font-size: 20px; margin: 0 0 4px; }
.step-head h3 { margin: 0; }
.step-head .flags { display: flex; gap: 8px; }
.step > p { margin: 0; color: #6b5644; font-size: 16px; }
.step-checklist { list-style: none; margin: 8px 0 0; padding: 0; font-size: 16px; }
.step-checklist li { position: relative; padding-left: 28px; margin-top: 4px; }
.step-checklist li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; box-sizing: border-box;
  border: 1.5px solid var(--muted); border-radius: 4px; background: var(--paper);
}
/* Live: real checkboxes, shared through assets/js/checklist.js */
.step-checklist.is-live li { padding-left: 0; }
.step-checklist.is-live li::before { display: none; }
.step-checklist label { display: flex; align-items: baseline; gap: 8px; position: relative; padding-left: 28px; cursor: pointer; }
.step-checklist .check-text { flex: 1; min-width: 0; }
.step-checklist .check-time { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-checklist .check-time:empty { display: none; }
.step-checklist input {
  appearance: none; -webkit-appearance: none; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; margin: 0;
  border: 1.5px solid var(--muted); border-radius: 4px; background: var(--paper); cursor: pointer;
}
.step-checklist label:hover input:not(:disabled) { border-color: var(--action); }
.step-checklist input:checked {
  border-color: var(--action); background: var(--action) no-repeat center / 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fffaf3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.step-checklist input:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.step-checklist li.is-done .check-text { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(122, 102, 86, 0.5); }
.step-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; font-size: 14px; }
.step-meta > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.step-meta dt { font: 600 12px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.step-meta dd { margin: 0; }
.step-meta .meta-who dd { display: flex; flex-wrap: wrap; gap: 4px; }
.step-meta .meta-heads { flex-basis: 100%; }
.step-meta .tag-mini { font-size: 12px; padding: 0 8px; border-radius: 999px; background: #f3e6d4; color: #6b5644; border: 1px solid var(--line); }
.tl-empty { margin: 12px 0 0; font-size: 14px; font-style: italic; color: var(--muted); }
@media (max-width: 640px) {
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 0 24px 4px; scrollbar-width: none; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .area-facts { gap: 12px 24px; padding: 12px 16px; }
  .slot { grid-template-columns: 1fr; gap: 0; }
  .slot-time { padding-top: 4px; font-size: 16px; }
  .slot-count { display: inline; margin: 0 0 0 8px; }
  .slot.is-multi .slot-steps { border-left: none; padding-left: 0; }
  .step { padding: 8px 12px; margin: 0 -12px; }
}
:lang(zh) .slot-time { font-family: "Playfair Display", "Noto Serif TC", Georgia, serif; }

/* ---------- Phone polish ---------- */
/* Sideways rows fade at the edge that has more to scroll (site.js sets the classes) */
.nav-links.more-right, .day-bar .container.more-right, .filter-chips.more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.nav-links.more-left, .day-bar .container.more-left, .filter-chips.more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
}
.nav-links.more-left.more-right, .day-bar .container.more-left.more-right, .filter-chips.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

/* Day bar chip that shows the timeline filter and jumps back to it */
.day-bar a.filter-jump {
  position: sticky; left: 0; z-index: 1; color: var(--action); border-color: var(--action); font-weight: 600; margin-right: 8px;
  box-shadow: -24px 0 0 #fff8ee, 8px 0 0 #fff8ee; /* covers chips sliding underneath */
}
/* With the pinned chip, only the right edge fades */
.day-bar .container:has(.filter-jump).more-left {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.day-bar .container:has(.filter-jump).more-left:not(.more-right) { -webkit-mask-image: none; mask-image: none; }
.day-bar a.filter-jump:hover { background: var(--action); color: #fff; }
.tl-tools { scroll-margin-top: calc(var(--nav-h) + 80px); }

/* 360 views on touch screens: a cover so page scrolling isn't captured by the embed */
.pano-cover {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(49, 32, 27, 0.32); color: #fff;
  font: 600 14px "Montserrat", sans-serif; z-index: 1; isolation: isolate;
}
.pano-cover::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 224px; height: 44px;
  transform: translate(-50%, -50%); border-radius: 999px; background: var(--action); z-index: -1;
}

@media (max-width: 640px) {
  /* Nav links: 44px-tall tap targets at a readable size */
  .site-nav .container { gap: 0; }
  .nav-links { font-size: 14px; gap: 16px; padding-bottom: 0; }
  .nav-links a { padding: 12px 4px; }
  .nav-group-label { align-self: center; }

  /* Overview hero buttons: bigger to tap */
  .home .btn { font-size: 14px; padding: 12px 24px; }

  /* Guest counts: one row each, so long labels don't squeeze into narrow cards */
  .guest-count-bar { flex-direction: column; }
  .guest-count-bar .gc { display: flex; align-items: baseline; gap: 12px; text-align: left; padding: 12px 16px; }
  .guest-count-bar .gc .num { width: 32px; flex-shrink: 0; }

  /* Photo viewer: arrows below the photo so they don't cover it (swipe works too) */
  .lightbox figure { padding-bottom: 80px; }
  .lightbox img { max-height: calc(100vh - 184px); }
  .lb-prev, .lb-next { top: auto; bottom: 20px; transform: none; }
  .lb-prev { left: calc(50% - 56px); }
  .lb-next { right: calc(50% - 56px); }
}

/* ---------- Phone menu: header button + full list of pages (site.js adds the button) ---------- */
.menu-btn, .nav-menu { display: none; }
@media (max-width: 640px) {
  /* One compact row, pinned on every page: name, language, menu */
  .site-nav.has-menu .container { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .site-nav.has-menu .brand { margin-right: auto; }
  .site-nav.has-menu .nav-links { display: none; }
  .site-nav.has-menu .lang-toggle { position: static; }
  body:has(.day-bar) .site-nav.has-menu { position: sticky; }

  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--action); background: #fff; color: var(--action); font: 600 14px "Montserrat", sans-serif; cursor: pointer;
  }
  .menu-btn[aria-expanded="true"] { background: var(--action); color: #fff; }
  .menu-btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
  .menu-icon { position: relative; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .menu-btn[aria-expanded="true"] .menu-icon { box-shadow: none; transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-icon::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: rotate(90deg); }

  .nav-menu:not([hidden]) {
    display: block; position: absolute; left: 0; right: 0; top: calc(100% + 1px);
    height: calc(100dvh - 61px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 24px 40px; background: #fff8ee; border-top: 1px solid var(--line);
  }
  .nav-menu-label { margin: 24px 0 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
  .nav-menu-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .nav-menu-links a {
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 0;
    border-bottom: 1px solid var(--line); text-decoration: none; font-size: 16px; color: var(--ink);
  }
  .nav-menu-links a[aria-current] { color: var(--action); font-weight: 700; }
  .nav-menu-links a[aria-current]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--berry); flex-shrink: 0; }
  html.menu-lock { overflow: hidden; }
}

/* Sub-headings inside a section (wedding party setup) */
.shot-area h3.sub-head { margin: 40px 0 8px; scroll-margin-top: calc(var(--nav-h) + 80px); }
.shot-area .section-note + h3.sub-head { margin-top: 24px; }
/* Group labels in the decor checklist (logistics) */
.shot-area h4.check-head { margin: 32px 0 0; font-family: inherit; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.shot-area .section-note + h4.check-head { margin-top: 16px; }

/* ---------- Phone day bar: "Steps for" and "Jump to" pickers (day-page.js, timeline-filter.js) ---------- */
.day-bar .day-select { display: none; }
@media (max-width: 640px) {
  .day-bar .day-chips { display: none; }
  .day-bar .day-select { display: flex; gap: 8px; padding: 8px 16px; }
  .dsel {
    position: relative; flex: 1 1 0; min-width: 0; height: 48px; padding: 0 28px 0 12px;
    display: flex; flex-direction: column; justify-content: center;
    background: #fff; border: 1px solid var(--action); border-radius: 12px; cursor: pointer;
  }
  .dsel + .dsel { flex-grow: 1.2; } /* the section name and time need more room than the role */
  .dsel:focus-within { outline: 2px solid var(--action); outline-offset: 2px; }
  .dsel-label { font: 600 12px/16px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
  .dsel-value { font: 600 14px/20px "Montserrat", sans-serif; color: var(--action); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dsel::after {
    content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px;
    border-right: 2px solid var(--action); border-bottom: 2px solid var(--action); transform: translateY(-75%) rotate(45deg);
  }
  /* The real select sits on top, invisible, so a tap opens the phone's own picker */
  .dsel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
}
:lang(zh) .dsel-label, :lang(zh) .dsel-value { font-family: "Montserrat", "Noto Sans TC", sans-serif; }

/* ---------- Filter: status + share, matching tags, empty sections ---------- */
.tl-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.tl-status-row .tl-status { margin: 0; flex: 1 1 240px; }
.share-view { flex-shrink: 0; }
/* The chosen role's tag on each step: a stronger tint, still a flat label */
.step-meta .tag-mini.is-match { background: #fbe3e6; border-color: #f3c5cb; color: #9c3a45; font-weight: 600; }
/* Full timeline: where and who to message, under the lede; one line per part of the day saying what happens */
.area-hero .tl-note { color: var(--muted); font-size: 14px; max-width: 680px; margin: 8px 0 0; }
.area-lede { max-width: 680px; margin: 12px 0 0; color: #6b5644; font-size: 16px; }
/* A part of the day with nothing for the chosen role folds down to its heading and one line */
.tl-area.is-empty .area-facts { display: none; }
.shot-day .tl-area.is-empty { padding-bottom: 0; }
.tl-area.is-empty .tl-empty { margin-bottom: 0; }
@media (max-width: 640px) {
  /* The "Steps for" picker in the day bar just below is the filter on phones, so the chips and the
     labels legend (the flags are words already) step aside; only the status line and Share stay */
  .tl-tools .tl-filter, .tl-tools .tl-legend { display: none; }
  .tl-tools { margin-top: 16px; }
  .tl-status-row { margin-top: 0; flex-wrap: nowrap; }
  .tl-status-row .tl-status { flex: 1 1 auto; }
  .share-view { padding: 8px 16px; }
  .tl-status-more { display: none; }
}

/* An address links to the map: Google Maps, or Apple Maps on iPhone and iPad (site.js) */
.address-link { color: var(--berry-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.address-link:hover { text-decoration-thickness: 2px; }

/* ---------- Event pages: previous / next event ---------- */
.event-pager { padding: 32px 0 48px; border-top: 1px solid var(--line); }
.event-pager .container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.event-pager-link {
  display: block; padding: 16px 20px; border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); text-decoration: none;
}
.event-pager-link:hover { border-color: var(--action); }
.event-pager-link.next { grid-column: 2; text-align: right; }
.event-pager-label { font-size: 14px; font-weight: 700; color: var(--action); }
.event-pager-title { margin-top: 4px; font-size: 20px; font-weight: 700; }
.event-pager-time { margin-top: 4px; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) {
  .event-pager .container { grid-template-columns: 1fr; gap: 12px; }
  .event-pager-link.next { grid-column: auto; }
}


/* Notes by vendor (event pages): laid out like the Details list (.facts), vendor on the left, tasks on the right */
.vnotes { margin: 16px 0 0; }
.vnote { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px dashed var(--line); }
.vnote:last-child { border-bottom: none; }
.vnote-head, .vnote-body { padding: 12px 0; }
.vnote-head { padding-right: 24px; }
.vnote-head h3 { font-family: inherit; font-size: inherit; font-weight: 600; line-height: inherit; margin: 0; }
.vnote-head .shot-link { margin: 4px 0 0; font-size: 14px; }
.vnote-body { color: #6b5644; }
.vnote-body .note-box { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 8px; font-size: inherit; }
.vnote-body .note-box strong { display: inline; margin: 0; color: var(--berry-text); }
.vnote-body .note-box strong::after { content: ": "; }
.vnote-body .note-box strong:lang(zh)::after { content: "："; }
.vnote .vendor-tasks li, .new-look .vnote .vendor-tasks li { padding: 0 0 4px 16px; border: 0; font-size: inherit; }
.vnote .vendor-tasks li:last-child { padding-bottom: 0; }
.vnote .vendor-tasks li:before, .new-look .vnote .vendor-tasks li:before { content: ""; top: 10px; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
@media (max-width: 640px) {
  .vnote { grid-template-columns: 1fr; }
  .vnote-head { padding-bottom: 0; }
  .vnote-body { padding-top: 4px; }
}

/* Maps choice (site.js): on iPhone and iPad an address link asks Apple Maps or Google Maps, as a sheet from the bottom */
.map-sheet {
  border: 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); margin: auto auto 0; width: 100%; max-width: 480px;
  border-radius: 16px 16px 0 0; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg);
}
.map-sheet::backdrop { background: rgba(20, 12, 8, 0.48); }
.map-sheet-title { margin: 4px 0 12px; font-size: 14px; color: var(--muted); text-align: center; }
.map-sheet-btn, .map-sheet-cancel {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 8px;
  border-radius: 999px; font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.map-sheet-btn { background: var(--action); color: #fff; border: 1px solid var(--action); }
.map-sheet-btn:hover { background: var(--action-hover); }
.map-sheet-cancel { background: #fff; color: var(--action); border: 1px solid var(--line); margin-top: 16px; }

/* ---------- Phone-first fixes: no sideways scroll, every tap target at least 44px ---------- */
/* Carousels slide cards past the screen edge; clip them at the section so the page never scrolls sideways */
section { overflow-x: clip; }
.stage-btn { width: 44px; height: 44px; }
.share-view { min-height: 44px; }
@media (max-width: 640px) {
  .site-nav .brand { padding: 10px 0; }
  .site-nav.has-menu .lang-toggle { padding: 0; }
  .site-nav.has-menu .lang-toggle a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 14px; }
  /* Small text links get a taller tap area without moving the text around them */
  .area-hero .breadcrumb a, footer a { display: inline-block; padding: 12px 8px; margin: -12px -8px; }
}
@media (max-width: 640px) {
  .menu-btn { white-space: nowrap; flex-shrink: 0; }
}
/* Narrow phones: tighter header so name, language, and menu stay on one row */
@media (max-width: 380px) {
  .site-nav.has-menu .container { padding-left: 16px; padding-right: 16px; gap: 4px; }
  .site-nav.has-menu .lang-toggle a { padding: 0 8px; }
  .menu-btn { width: 44px; padding: 0; justify-content: center; }
  .menu-btn .menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Phones: key times read as one compact list (time, then what) instead of a ragged grid of cards */
@media (max-width: 640px) {
  .glance { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 4px 16px; }
  .glance > div { display: grid; grid-template-columns: 88px 1fr; align-items: baseline; gap: 12px; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 12px 0; }
  .glance > div + div { border-top: 1px solid var(--line); }
  .glance-time { font-size: 16px; }
  .glance-what { font-size: 14px; }
  .area-hero .tags .tag { padding: 4px 12px; font-size: 12px; }
}
/* Event pages: the "Show info for" filter under the header hides steps, empty time slots, and other vendors' notes */
.area-schedule [hidden], .vnote[hidden], section[hidden] { display: none !important; }
section.role-bar, .new-look section.role-bar { padding: 16px 0 24px; }
.area-empty { margin: 0; color: var(--muted); font-style: italic; }
.role-bar .tl-tools { margin: 0; }
/* Event pages: on phones the chips give way to the pinned bar's "Steps for" and "Jump to" pickers, as on the full
   timeline (day-page.js adds the bar); wider screens keep the chips and have no bar */
@media (min-width: 641px) {
  .day-bar.is-event { display: none; }
}
@media (max-width: 640px) {
  .event-part { scroll-margin-top: calc(var(--nav-h) + 72px); }
  section.role-bar, .new-look section.role-bar { padding: 12px 0; }
}

/* Header facts on event pages: a short value you can tap for the full note (site.js keeps one open and in view) */
.area-meta-row .tip { position: relative; display: inline-block; }
.area-meta-row .tip > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; margin: -12px 0; color: var(--action); text-decoration: underline dotted; text-underline-offset: 4px; }
.area-meta-row .tip > summary::-webkit-details-marker { display: none; }
.area-meta-row .tip > summary::after { content: "i"; flex-shrink: 0; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 600; line-height: 14px; text-align: center; font-style: normal; }
.area-meta-row .tip > summary:hover { color: var(--action-hover); }
.area-meta-row .tip > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; border-radius: 4px; }
.area-meta-row .tip[open] > summary { text-decoration-style: solid; }
.tip-body { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: max-content; max-width: min(360px, calc(100vw - 32px)); padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 14px; line-height: 1.5; color: #6b5644; }
.tip-body p { margin: 0 0 8px; }
.tip-body p:last-child { margin-bottom: 0; }
.tip-body strong { color: var(--ink); }
.tip-body .proc-list { margin: 0; padding-left: 20px; }
.tip-body .proc-list li { margin: 0 0 4px; }

/* ---------- Wiki layout on wide screens (site.js): every page in a left sidebar, "On this page" on the right ---------- */
.wiki-side, .wiki-toc { display: none; }
@media (min-width: 1024px) {
  :root { --side-w: 240px; }
  html.wiki body { position: relative; padding-left: var(--side-w); }
  /* The header spans the full width, name on the far left above the sidebar; the sidebar replaces its row of links */
  html.wiki .site-nav { margin-left: calc(-1 * var(--side-w)); }
  html.wiki .site-nav .container { max-width: none; flex-wrap: nowrap; }
  html.wiki .site-nav .nav-links { display: none; }
  html.wiki .site-nav .lang-toggle { margin-left: auto; }
  /* Section links land just under the header */
  html.wiki body > section[id], html.wiki main > section[id]:not(.shot-area) { scroll-margin-top: var(--wiki-top, 61px); }

  .wiki-side {
    display: block; position: fixed; z-index: 45; left: 0; bottom: 0; top: var(--wiki-top, 61px); width: var(--side-w);
    overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 40px;
    background: var(--paper); border-right: 1px solid var(--line);
    font-family: "Montserrat", sans-serif;
  }
  .wiki-group { margin: 24px 12px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
  .wiki-links a {
    display: block; position: relative; padding: 8px 12px; border-radius: 8px;
    font-size: 14px; color: var(--ink); text-decoration: none;
  }
  .wiki-links a:hover { background: var(--paper-alt); }
  .wiki-links a[aria-current] { background: #f3e6d4; color: var(--action); font-weight: 600; }
  .wiki-links a[aria-current]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--action); }
  .wiki-links a:focus-visible, .wiki-toc a:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
}
@media (min-width: 1280px) {
  /* "On this page" sits inside the page, on the right of the content; the content beside it makes room */
  html.has-toc { --toc-w: 184px; }
  html.has-toc .wiki-flow .container, html.has-toc .container.wiki-flow { padding-right: calc(24px + var(--toc-w) + 48px); }
  /* Carousels stop at the content's right edge instead of sliding under the list */
  html.has-toc .wiki-flow .stage-track { clip-path: inset(-48px 0 -48px -100vw); }
  .wiki-rail {
    position: absolute; z-index: 20; left: var(--side-w); right: 0; pointer-events: none;
  }
  .wiki-toc {
    display: block; position: sticky; top: calc(var(--toc-top, 61px) + 32px);
    width: var(--toc-w); margin: 16px 0 32px auto; margin-right: max(24px, calc((100% - 1080px) / 2 + 24px));
    max-height: calc(100vh - var(--toc-top, 61px) - 64px); overflow-y: auto; pointer-events: auto;
    font-family: "Montserrat", sans-serif;
  }
  /* The list replaces the day bar's jump chips, and the role chips become its dropdown */
  html.has-toc .day-bar { display: none; }
  html.has-rail-filter .tl-tools .tl-filter { display: none; }
  html.has-rail-filter .tl-tools .tl-status-row { margin-top: 0; }
  /* the filter's status line and Share button line up with the content, not under the list */
  html.has-toc .area-hero .tl-status-row { margin-right: calc(var(--toc-w) + 48px); }
  .wiki-filter { display: block; margin-bottom: 32px; }
  .wiki-filter .wiki-toc-label { display: block; }
  .wiki-filter select {
    width: 100%; min-height: 44px; padding: 8px 40px 8px 12px; border: 1px solid var(--action); border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23633526' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
    appearance: none; color: var(--action); font: 600 14px "Montserrat", sans-serif; cursor: pointer;
  }
  .wiki-filter select:hover { border-color: var(--action-hover); }
  .wiki-filter select:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
  .wiki-toc-time { margin-left: 8px; font-size: 12px; color: var(--berry-text); font-weight: 500; }
  .wiki-toc-label { margin: 0 0 8px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
  .wiki-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
  .wiki-toc a {
    display: block; margin-left: -1px; padding: 4px 12px; border-left: 2px solid transparent;
    font-size: 14px; color: var(--muted); text-decoration: none;
  }
  .wiki-toc-sub a { padding-left: 24px; }
  .wiki-toc a:hover { color: var(--ink); }
  .wiki-toc a[aria-current] { border-left-color: var(--action); color: var(--action); font-weight: 600; }
}
@media print { .wiki-side, .wiki-rail { display: none !important; } html.wiki body { padding: 0 !important; } html.wiki .site-nav { margin: 0 !important; } }

/* ---------- Page-to-page transitions (browsers with cross-document view transitions) ----------
   The header and sidebar stay still; only the page content fades across with a small rise. */
@view-transition { navigation: auto; }
html:not(:has(body.home)) .site-nav { view-transition-name: site-nav; }
.wiki-side { view-transition-name: wiki-side; }
::view-transition-group(site-nav), ::view-transition-group(wiki-side) { animation-duration: 0s; }
::view-transition-old(root) { animation: 160ms ease-in both page-out; }
::view-transition-new(root) { animation: 280ms cubic-bezier(0.2, 0, 0, 1) 80ms both page-in; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; animation-delay: 0s; }
  @keyframes page-in { from { opacity: 0; } }
}

/* ---------- Sign in and the to-do side sheet (assets/js/todo.js, on every page) ---------- */
.todo-row { display: flex; gap: 8px; }
.todo-row input {
  flex: 1; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 16px; font: inherit; font-size: 16px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.todo-row input:focus { outline: none; border-color: var(--action); }
.todo-row .btn { flex: none; min-height: 44px; }
.todo-row .btn:disabled { opacity: 0.6; cursor: default; }
.todo-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.todo-head h3 { margin: 0; font-size: 20px; }
.todo-switch {
  min-height: 44px; padding: 0; margin: -12px 0; border: 0; background: none; font: inherit; font-size: 14px;
  color: var(--berry-text); text-decoration: underline; cursor: pointer;
}
.todo-count { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.todo-items { margin: 12px 0 16px; }
.todo-items li { display: flex; align-items: center; gap: 8px; margin: 0; border-bottom: 1px solid var(--line); }
.todo-items li:first-child { border-top: 1px solid var(--line); }
.todo-items label { flex: 1; min-width: 0; padding-top: 12px; padding-bottom: 12px; overflow-wrap: anywhere; }
.todo-items input { top: 16px; }
.todo-remove {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; border-radius: 12px;
  font-size: 24px; line-height: 44px; color: var(--muted); cursor: pointer;
}
.todo-remove:hover { color: var(--action); background: var(--paper-alt); }
.todo-remove:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.todo-group { margin: 16px 0 8px; font: 600 12px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.todo-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
.todo-person {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 44px; padding: 8px 16px; text-align: left;
  font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
}
.todo-person:hover { border-color: var(--action); }
.todo-person:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.todo-person-name { font-weight: 600; font-size: 16px; color: var(--action); }
.todo-person-role { font-size: 14px; color: var(--muted); }
.todo-hint { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.todo-hi { margin: 0; font-size: 20px; }
.todo-pin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 16px; }
.todo-pin-field { display: flex; flex-direction: column; gap: 4px; }
.todo-pin-field label { font-size: 14px; font-weight: 600; }
.todo-pin-field input {
  width: 128px; height: 44px; box-sizing: border-box; padding: 0 16px; font: inherit; font-size: 20px; letter-spacing: 0.4em;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.todo-pin-field input:focus { outline: none; border-color: var(--action); }
.todo-pin-actions { display: flex; align-items: center; gap: 16px; flex-basis: 100%; }
.todo-pin-actions .todo-switch { margin: 0; }
.todo-pin .btn { min-height: 44px; }
.todo-error { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; color: var(--berry-text); }
.todo-error:empty, .todo-pin .todo-hint { margin: 0; }
.todo-from {
  display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; vertical-align: 2px;
  font-size: 12px; font-weight: 500; text-decoration: none; background: #f3e6d4; color: #6b5644; border: 1px solid var(--line);
}
.todo-notes { margin-top: 24px; }
.todo-notes-label { display: block; margin: 0; font-size: 16px; font-weight: 600; }
.todo-notes textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 12px 16px; font: inherit; font-size: 16px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; resize: vertical;
}
.todo-notes textarea:focus { outline: none; border-color: var(--action); }
.todo-saved { min-height: 20px; margin-top: 4px; }
.todo-notes-read { margin: 8px 0 16px; padding: 12px 16px; white-space: pre-wrap; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.todo-reset { padding: 8px 20px; }
/* Done to-dos fold away under the list */
.todo-done { margin-top: 8px; }
.todo-done summary {
  display: flex; list-style: none; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--action); cursor: pointer;
}
.todo-done summary::-webkit-details-marker { display: none; }
.todo-done summary::before {
  content: ""; width: 8px; height: 8px; margin: 0 12px 0 4px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.todo-done[open] summary::before { transform: rotate(45deg); }
.todo-done summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 4px; }
.todo-done .todo-items { margin-top: 0; }
.todo-add + .todo-items, .todo-add + .todo-done { margin-top: 12px; }
.account-body .todo-add { margin-top: 12px; }

/* The couple's budget (admins only): a summary card, then one short row per line that opens to edit */
.budget-notice { margin: 0 0 12px; }
.budget-card { padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.budget-big { margin: 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.budget-bar { position: relative; height: 8px; margin-top: 8px; overflow: hidden; background: var(--paper-alt); border-radius: 999px; }
.budget-bar span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; }
.budget-bar-planned { background: #d4b896; }
.budget-bar-paid { background: var(--action); }
.budget-sub { margin: 8px 0 0; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.budget-card.is-over .budget-sub, .budget-card.is-over .budget-big { color: var(--berry-text); }
.budget-card.is-over .budget-bar-planned { background: var(--berry); }
.budget-change { margin: 0; }
.budget-top { display: flex; gap: 12px; margin-top: 12px; }
.budget-top[hidden] { display: none; }
.budget-top .budget-field:first-child { flex: 1; min-width: 0; }
.budget-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.budget-field label { font-size: 14px; font-weight: 600; }
.budget-field input, .budget-field select {
  width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; font: inherit; font-size: 16px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.budget-field input { font-variant-numeric: tabular-nums; }
.budget-currency select { width: 96px; }
.budget-field input:focus, .budget-field select:focus { outline: none; border-color: var(--action); }
.budget-empty { margin-top: 16px; }
.budget-items { list-style: none; margin: 16px 0 0; padding: 0; }
.budget-item { margin: 0; border-bottom: 1px solid var(--line); }
.budget-item:first-child { border-top: 1px solid var(--line); }
.budget-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px 4px;
  font: inherit; color: var(--ink); text-align: left; background: none; border: 0; cursor: pointer;
}
.budget-row:hover { background: var(--paper-alt); }
.budget-row:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; border-radius: 4px; }
.budget-row-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.budget-row-name.is-untitled { color: var(--muted); font-weight: 400; }
.budget-row-nums { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-variant-numeric: tabular-nums; }
.budget-row-planned { font-size: 16px; }
.budget-row-paid { font-size: 12px; color: var(--muted); }
.budget-item.is-open { padding: 12px 0 16px; }
.budget-amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.budget-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.budget-actions .btn { min-height: 44px; padding: 8px 20px; }
.budget-actions .todo-switch { margin: 0; }
.budget-add { margin-top: 16px; padding: 8px 20px; min-height: 44px; }
.budget-addform { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.budget-addform .budget-amounts { margin-top: 0; }
/* Header button: "Sign in", or your first name once signed in */
.account-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 8px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--action); background: #fff; color: var(--action); font: 600 14px "Montserrat", sans-serif; white-space: nowrap; cursor: pointer;
}
.account-btn:hover, .account-btn[aria-expanded="true"] { background: var(--action); color: #fff; }
.account-btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.account-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 700; line-height: 1;
}
/* Signed out: a person outline */
.account-btn:not(.is-signed-in) .account-icon::before {
  content: ""; position: absolute; top: 4px; left: 8px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box;
}
.account-btn:not(.is-signed-in) .account-icon::after {
  content: ""; position: absolute; bottom: 4px; left: 4px; width: 16px; height: 8px; border-radius: 8px 8px 0 0; border: 1.5px solid currentColor; border-bottom: 0; box-sizing: border-box;
}
/* Signed in: your initial in a filled circle */
.account-btn.is-signed-in .account-icon { background: var(--action); color: #fff; }
.account-btn.is-signed-in:hover .account-icon, .account-btn.is-signed-in[aria-expanded="true"] .account-icon { background: #fff; color: var(--action); }
html.wiki .site-nav .account-btn { margin-left: 8px; }
@media (min-width: 641px) and (max-width: 1023px) {
  .site-nav .lang-toggle { margin-left: auto; }
  /* The header stays one row: a few links and two drop-down lists (site.js), so nothing needs to scroll */
  .site-nav .container { flex-wrap: nowrap; gap: 16px; }
  .site-nav .brand, .site-nav .lang-toggle, .site-nav .account-btn { flex-shrink: 0; }
  .nav-links { flex-wrap: nowrap; gap: 4px; }
  /* Sign in is a round button here, its label kept for screen readers */
  .account-btn { width: 36px; padding: 0; justify-content: center; }
  .account-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Small tablets: tighter spacing so the whole row still fits */
@media (min-width: 641px) and (max-width: 799px) {
  .site-nav .container { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .nav-links { gap: 0; }
  .nav-links a, .nav-drop-btn { padding-left: 4px; padding-right: 4px; }
  .site-nav .search-btn + .lang-toggle, html.wiki .site-nav .account-btn { margin-left: 0; }
}
/* Overview on wide screens (it keeps its row of links): the sign-in button stays on the same row */
@media (min-width: 1024px) {
  .home .site-nav .container { flex-wrap: nowrap; }
  .home .site-nav .lang-toggle { margin-left: auto; }
  .home .site-nav .brand, .home .site-nav .lang-toggle { flex-shrink: 0; }
  .home .nav-links { flex-wrap: nowrap; gap: 8px; }
}
@media (max-width: 640px) {
  /* Phones: a round 44px button, the label kept for screen readers */
  .account-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .account-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* The side sheet */
html.sheet-lock { overflow: hidden; }
.account-backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(58, 42, 34, 0.4); opacity: 0; transition: opacity 0.2s ease;
}
.account-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201; display: flex; flex-direction: column;
  width: min(420px, calc(100vw - 32px)); background: var(--paper); box-shadow: -8px 0 32px rgba(58, 42, 34, 0.2);
  transform: translateX(100%); transition: transform 0.24s ease; outline: none;
}
html.sheet-open .account-backdrop { opacity: 1; }
html.sheet-open .account-sheet { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .account-backdrop, .account-sheet { transition: none; }
}
.account-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--line);
}
.account-title { margin: 0; font-size: 24px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.account-close {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none;
  font-size: 28px; line-height: 44px; color: var(--muted); cursor: pointer;
}
.account-close:hover { color: var(--action); background: var(--paper-alt); }
.account-close:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.account-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px calc(32px + env(safe-area-inset-bottom)); }
/* Sign out sits in the header, beside × */
.account-head .account-signout { flex: none; margin: 0 0 0 auto; padding: 0 8px; }
.account-head .account-signout[hidden] { display: none; }
/* The couple's tabs: My list / Everyone / Budget */
.account-tabs { display: flex; gap: 4px; padding: 8px 24px; border-bottom: 1px solid var(--line); }
.account-tabs[hidden] { display: none; }
.account-tab {
  flex: 1; min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: none;
  font: 600 14px "Montserrat", sans-serif; color: var(--muted); cursor: pointer;
}
.account-tab:hover { color: var(--action); background: var(--paper-alt); }
.account-tab[aria-pressed="true"] { background: var(--action); color: #fff; }
.account-tab:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.account-intro { margin-top: 0; }
.todo-who-head { margin: 16px 0 0; font-size: 20px; }
.todo-back { display: block; margin: -8px 0 8px; }
.account-body .todo-count:first-child { margin-top: 0; }
.account-body .todo-items { margin-top: 12px; }
@media (max-width: 380px) {
  .account-head { padding-left: 16px; }
  .account-body { padding-left: 16px; padding-right: 16px; }
  .account-tabs { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Timeline editor (timeline-edits.js): Gina and Jarrid edit, add, and delete steps ---------- */
.tl-edit-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin-top: 16px; padding: 12px 16px; background: #fff; border: 1.5px dashed var(--action); border-radius: 12px;
}
.tl-edit-bar[hidden] { display: none; }
.tl-edit-text { flex: 1 1 240px; margin: 0; font-size: 14px; }
.tl-edit-actions { display: flex; align-items: center; gap: 16px; }
.tl-edit-actions .todo-switch { margin: 0; }
.tl-edit-actions .btn { min-height: 44px; padding: 8px 20px; }
html.tl-editing .tl-edit-bar { border-style: solid; background: var(--paper-alt); }
.step.is-editable { position: relative; }
.tl-edit-step {
  position: absolute; top: 8px; right: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--action); background: #fff; color: var(--action); font: 600 14px "Montserrat", sans-serif; cursor: pointer;
}
a.tl-edit-step { display: inline-flex; align-items: center; text-decoration: none; }
.tl-edit-step:hover { background: var(--action); color: #fff; }
.tl-edit-step:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.step > .tl-edited { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.step.is-flash { animation: tl-flash 1.6s ease; }
@keyframes tl-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--action); } 100% { box-shadow: 0 0 0 0 transparent; } }
.tl-add {
  display: block; width: 100%; min-height: 48px; margin: 12px 0 0; border: 1.5px dashed var(--action); border-radius: 12px;
  background: none; color: var(--action); font: 600 14px "Montserrat", sans-serif; cursor: pointer;
}
.tl-add:hover { background: #fff; border-style: solid; }
.tl-add:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.tl-edit-pill {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 150; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 20px; border-radius: 999px;
  background: var(--action); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(58, 42, 34, 0.25); white-space: nowrap;
}
.tl-edit-pill[hidden] { display: none; }
.tl-edit-pill button.tl-pill-changes { background: none; color: #fff; padding: 0 8px; text-decoration: underline; }
.tl-edit-pill button {
  min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: var(--action);
  font: 600 14px "Montserrat", sans-serif; cursor: pointer;
}
.tl-edit-pill button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tl-toast {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 300; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px 16px 12px 20px;
  border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: 0 4px 16px rgba(58, 42, 34, 0.3);
}
.tl-toast[hidden] { display: none; }
.tl-toast button {
  flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--gold);
  font: 600 14px "Montserrat", sans-serif; text-decoration: underline; cursor: pointer;
}
/* The editor: a centred panel; full screen on phones */
.tl-dialog {
  width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 16px;
  background: var(--paper); color: var(--ink); box-shadow: 0 16px 48px rgba(58, 42, 34, 0.3);
}
.tl-dialog[open] { display: flex; }
.tl-dialog::backdrop { background: rgba(58, 42, 34, 0.4); }
.tl-form { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.tl-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--line);
}
.tl-dialog-head h2 { margin: 0; font-size: 24px; }
.tl-dialog-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; outline: none; }
.tl-dialog-foot { padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.tl-dialog-foot .todo-error:not(:empty) { margin-bottom: 8px; }
.tl-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.tl-dialog-actions .btn { min-height: 44px; padding: 8px 24px; }
.tl-dialog-actions .tl-delete { margin: 0 auto 0 0; }
.tl-field { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; min-width: 0; }
.tl-field:first-child, .tl-notice + .tl-field, .tl-changed + .tl-field { margin-top: 0; }
.tl-field label, .tl-checks legend { font-size: 14px; font-weight: 600; }
.tl-field input, .tl-field select, .tl-field textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.tl-field textarea { resize: vertical; line-height: 1.5; }
.tl-field input:focus, .tl-field select:focus, .tl-field textarea:focus { outline: none; border-color: var(--action); }
.tl-hint { margin: 0; font-size: 14px; color: var(--muted); }
.tl-dialog-body > .tl-hint { margin-top: 16px; }
.tl-changed { margin-bottom: 16px; }
.tl-changed .todo-switch { margin: 0; min-height: 0; }
.tl-notice { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #fcefed; color: var(--berry-deep); font-size: 14px; font-weight: 600; }
.tl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-two .tl-field { margin-top: 16px; }
.tl-checks { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.tl-checks legend { padding: 0; margin-bottom: 8px; }
.tl-check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-check { position: relative; display: inline-flex; cursor: pointer; }
.tl-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tl-check span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 500;
}
.tl-check:hover span { border-color: var(--action); }
.tl-check input:checked + span { background: var(--action); border-color: var(--action); color: #fff; }
.tl-check input:checked + span::before { content: "✓"; margin-right: 8px; }
.tl-check input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.tl-deleted { list-style: none; margin: 0; padding: 0; }
.tl-deleted li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tl-deleted li:first-child { padding-top: 0; }
.tl-deleted strong, .tl-deleted .tl-hint { display: block; }
.tl-deleted .btn { flex: none; min-height: 44px; padding: 8px 20px; }
@media (max-width: 640px) {
  .tl-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .tl-dialog-head { padding-left: 16px; }
  .tl-dialog-body { padding: 16px; }
  .tl-dialog-foot { padding-left: 16px; padding-right: 16px; }
  .tl-dialog-actions .btn { padding: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) { .step.is-flash { animation: none; outline: 3px solid var(--action); } }

/* Editor controls: Bold / Link, time nudges, checklist rows, places, someone else, part-of-day details */
.tl-edit-section {
  display: inline-flex; align-items: center; min-height: 36px; margin: 0 0 8px; padding: 0 16px; border-radius: 999px;
  border: 1px dashed var(--action); background: none; color: var(--action); font: 600 14px "Montserrat", sans-serif; cursor: pointer;
}
.tl-edit-section:hover { background: #fff; border-style: solid; }
.tl-edit-section:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.tl-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.tl-tool, .tl-place, .tl-nudge, .tl-row-btn {
  min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--action); font: 600 14px "Montserrat", sans-serif; cursor: pointer;
}
.tl-tool:hover, .tl-place:hover, .tl-nudge:hover, .tl-row-btn:hover { border-color: var(--action); }
.tl-tool:focus-visible, .tl-place:focus-visible, .tl-nudge:focus-visible, .tl-row-btn:focus-visible, .tl-add-item:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.tl-tools-row .tl-hint { font-size: 12px; }
.tl-time-row { display: flex; gap: 4px; }
.tl-time-row input { flex: 1; min-width: 0; }
.tl-nudge { flex: none; min-height: 44px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.tl-length { margin-top: 4px; }
.tl-length:empty { display: none; }
.tl-shift { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--paper-alt); font-size: 14px; font-weight: 600; cursor: pointer; }
.tl-shift[hidden] { display: none; }
.tl-shift input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--action); }
.tl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl-items li { display: flex; align-items: center; gap: 4px; margin: 0; }
.tl-items input {
  flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 16px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.tl-items input:focus { outline: none; border-color: var(--action); }
.tl-facts input:first-child { flex: 0 0 34%; }
.tl-row-btn { flex: none; width: 36px; padding: 0; font-size: 16px; }
.tl-add-item {
  display: block; min-height: 44px; margin-top: 8px; padding: 0 16px; border: 1.5px dashed var(--action); border-radius: 12px;
  background: none; color: var(--action); font: 600 14px "Montserrat", sans-serif; cursor: pointer;
}
.tl-add-item:hover { background: #fff; border-style: solid; }
.tl-list > .tl-hint { margin-top: 8px; }
.tl-list > legend + .tl-hint { margin: 0 0 8px; }
.tl-places { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.tl-places .tl-hint { font-size: 12px; }
.tl-place { min-height: 32px; font-weight: 500; color: var(--ink); }
.tl-other-add { border-style: dashed; border-color: var(--action); color: var(--action); border-radius: 999px; padding: 0 16px; }
.tl-other { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tl-other[hidden] { display: none; }
.tl-other input, .tl-other select {
  flex: 1 1 160px; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 16px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.tl-other .btn { min-height: 44px; padding: 8px 20px; }
.tl-dialog-actions .tl-duplicate { margin: 0; }
.tl-change-name {
  display: block; padding: 0; border: 0; background: none; font: 600 16px "Montserrat", sans-serif; color: var(--action);
  text-align: left; text-decoration: underline; cursor: pointer;
}
.tl-change-name:disabled { color: var(--muted); text-decoration: line-through; cursor: default; }
.tl-changes-intro { margin-bottom: 12px; }
@media (max-width: 640px) {
  .tl-two { grid-template-columns: 1fr; gap: 0; }
  .tl-dialog-actions { flex-wrap: wrap; }
  .tl-facts li { flex-wrap: wrap; }
  .tl-facts input:first-child { flex: 1 1 100%; }
}

/* ---------- The couple's budget, broken down page by page (todo.js) ---------- */
.account-body .budget-section-title { margin: 0 0 8px; font: 600 14px/20px "Montserrat", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.budget-here { margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.budget-here-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.account-body .budget-here-head .budget-section-title { margin: 0; }
.budget-here-total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.budget-here > .todo-hint { margin: 8px 0 0; }
.page-budget-line { padding: 16px 0; border-bottom: 1px solid var(--line); }
.page-budget-line-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.new-look .page-budget-line-head h3, .page-budget-line-head h3 { margin: 0; font-size: 18px; }
.page-budget-planned { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.page-budget-costs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.page-budget-costs li { display: flex; align-items: center; gap: 8px; margin: 0; }
.page-budget-costs input, .page-budget-pick select, .page-budget-new input {
  min-width: 0; min-height: 44px; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 16px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.page-budget-costs input:focus, .page-budget-pick select:focus, .page-budget-new input:focus { outline: none; border-color: var(--action); }
.page-budget-costs li > input { flex: 1; }
.page-budget-amount { display: flex; align-items: center; gap: 4px; flex: 0 0 120px; }
.page-budget-amount input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.page-budget-cur { font-size: 14px; color: var(--muted); }
.budget-line-sum { margin-top: 8px; }
.budget-line-sum.is-over { color: var(--berry-text); font-weight: 600; }
.page-budget-add { margin: 8px 0 0; }
.page-budget-addform { display: grid; gap: 12px; padding-top: 16px; }
.page-budget-addform .budget-amounts { margin-top: 0; }
.page-budget-pick-label { margin: 0; font-size: 16px; font-weight: 600; }
.page-budget-addrow { grid-template-columns: 1fr 128px; }
.page-budget-new { padding: 12px; background: var(--paper-alt); border-radius: 8px; }
.page-budget-new[hidden] { display: none; }
.page-budget-addfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.page-budget-addfoot .btn { min-height: 44px; padding: 8px 20px; }
.page-budget-addfoot .page-budget-added { margin: 0; }
@media (max-width: 640px) {
  .page-budget-costs li { flex-wrap: wrap; }
  .page-budget-costs li > input { flex: 1 1 100%; }
  .page-budget-amount { flex: 1; }
  .page-budget-addrow, .page-budget-new { grid-template-columns: 1fr; }
}
/* In the main budget: how much of a line is broken down, and on which pages */
.budget-row-parts { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.budget-breakdown { margin-top: 16px; }
.budget-breakdown-label { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.budget-page-head { margin-top: 12px; font-size: 14px; }
.budget-page-link { font-weight: 600; color: var(--action); }
.budget-breakdown .page-budget-costs { margin-top: 4px; }
.budget-use { display: block; margin: 4px 0 0; }
.budget-use[hidden] { display: none; }

/* ---------- Planning (planning.js): the couple's vendors, payments, guests, and seating ---------- */
.planning { padding: 24px 0 64px; }
.planning-locked { margin: 0 0 16px; color: var(--muted); }
.pl-tabs { display: flex; gap: 4px; margin-bottom: 24px; padding: 4px; background: var(--paper-alt); border-radius: 999px; overflow-x: auto; }
.pl-tab {
  flex: 1; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; white-space: nowrap;
  font: 600 14px "Montserrat", sans-serif; color: var(--muted); cursor: pointer;
}
.pl-tab:hover { color: var(--action); }
.pl-tab[aria-pressed="true"] { background: var(--action); color: #fff; }
.pl-tab:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.pl-panel > .todo-hint:first-child { margin: 0 0 16px; }
.pl-empty { margin: 16px 0; }
.planning .pl-group { margin: 24px 0 8px; font-size: 20px; }
.planning .pl-group.is-late { color: var(--berry-text); }
.pl-pay { list-style: none; margin: 0; padding: 0; }
.pl-pay li { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pl-pay li.is-late .pl-pay-amount .todo-hint { color: var(--berry-text); font-weight: 600; }
.pl-pay-tick { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.pl-pay-tick input, .pl-paid input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--action); }
.pl-pay-what, .pl-pay-amount { display: flex; flex-direction: column; min-width: 0; }
.pl-pay-amount { align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.pl-pay .todo-hint { margin: 0; }
.pl-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-top: 12px; }
.pl-field label { font-size: 14px; font-weight: 600; }
.pl-field input, .pl-field select, .pl-field textarea, .pl-guest input, .pl-guest select, .pl-table-head input {
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 16px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.pl-field input:focus, .pl-field select:focus, .pl-field textarea:focus, .pl-guest input:focus, .pl-guest select:focus, .pl-table-head input:focus {
  outline: none; border-color: var(--action);
}
.pl-vendor-form .budget-amounts .pl-field { margin-top: 0; }
.pl-vendor-form .budget-amounts { margin-top: 12px; }
.pl-three { grid-template-columns: repeat(3, 1fr); }
.pl-compare { margin-top: 4px; }
.pl-compare.is-over { color: var(--berry-text); font-weight: 600; }
.pl-payment { margin: 16px 0 0; padding: 12px 16px 16px; border: 1px solid var(--line); border-radius: 12px; }
.pl-payment legend { padding: 0 4px; font-weight: 600; }
.pl-payment-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.pl-payment-row .pl-field { margin-top: 0; }
.pl-paid { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; cursor: pointer; }
.pl-tools { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.pl-tools .todo-switch { margin: 0; }
.pl-import { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.pl-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pl-import:focus-within { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 4px; }
.pl-meals { margin-top: 16px; }
.pl-meals summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--action); cursor: pointer; }
.pl-meals .btn { margin-top: 8px; min-height: 44px; padding: 8px 20px; }
.pl-find { margin-top: 16px; }
.pl-guests { list-style: none; margin: 16px 0 0; padding: 0; }
.pl-guest-group { margin: 16px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pl-guest { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) 112px 44px; gap: 8px; align-items: center; margin: 0 0 8px; }
.pl-seat-tag { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-unseated { margin-top: 8px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chip-gap { flex-basis: 100%; height: 0; }
.pl-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font: 500 14px "Montserrat", sans-serif; color: var(--ink); cursor: pointer;
}
.pl-chip:hover { border-color: var(--action); }
.pl-chip.is-picked { background: var(--action); border-color: var(--action); color: #fff; }
.pl-chip:focus-visible, .pl-seat:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.pl-meal { font-size: 12px; font-weight: 600; color: var(--muted); }
.pl-chip.is-picked .pl-meal { color: #fff; }
.pl-table { margin-top: 32px; }
.pl-table-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.pl-table-head input[type=text] { flex: 1 1 200px; width: auto; font-weight: 600; }
.pl-table-head input[type=number] { width: 80px; }
.pl-table-head .todo-hint { margin: 0; }
.pl-table-head .todo-switch { margin: 0 0 0 auto; }
.pl-board { overflow-x: auto; padding-bottom: 8px; }
.pl-side { display: flex; gap: 8px; }
.pl-tabletop {
  display: flex; align-items: center; justify-content: center; min-height: 40px; margin: 8px 0; padding: 0 16px; border-radius: 8px;
  background: #e8d5b9; color: #6b5644; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  min-width: max-content;
}
.pl-seat {
  flex: 0 0 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 64px; padding: 4px;
  border: 1.5px dashed var(--line); border-radius: 12px; background: #fff; font: 500 14px "Montserrat", sans-serif; color: var(--ink); cursor: pointer;
}
.pl-seat:hover { border-color: var(--action); }
.pl-seat.is-taken { border-style: solid; }
.pl-seat.is-picked { background: var(--action); border-color: var(--action); color: #fff; }
.pl-seat.is-picked .pl-meal, .pl-seat.is-picked .pl-seat-n { color: #fff; }
.pl-seat-n { font-size: 12px; color: var(--muted); }
.pl-seat-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pl-pickbar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 150; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 4px 4px 4px 20px;
  border-radius: 999px; background: var(--action); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(58, 42, 34, 0.25);
}
.pl-pickbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pick-btn {
  flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--action);
  font: 600 14px "Montserrat", sans-serif; cursor: pointer;
}
.pl-status { margin-top: 24px; }
@media (max-width: 640px) {
  .pl-three { grid-template-columns: 1fr; }
  .pl-payment-row { grid-template-columns: 1fr 1fr; }
  .pl-paid { grid-column: 1 / -1; min-height: 32px; }
  .pl-guest { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .pl-guest input:first-child { grid-column: 1 / 3; }
  .pl-guest input:first-child + select { grid-column: 1; }
  .pl-guest .pl-seat-tag { grid-column: 1 / 3; }
  .pl-guest .todo-remove { grid-row: 1; grid-column: 3; }
}
/* Header badge: payments due within two weeks (todo.js) */
.account-btn { position: relative; }
.account-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; border-radius: 999px;
  background: var(--berry); color: #fff; font: 700 12px/20px "Montserrat", sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff;
}
/* Top of the couple's own list: what's due soon */
.due-card { margin: 0 0 16px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.due-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.due-list { list-style: none; margin: 0 0 4px; padding: 0; }
.due-list li { display: flex; flex-direction: column; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.due-what { font-weight: 600; }
.due-when { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.due-list li.is-late .due-when { color: var(--berry-text); font-weight: 600; }
.due-link { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }

/* ---------- Search everything and quick add (search.js) ---------- */
.search-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--line); background: #fff; color: var(--muted); font: 500 14px "Montserrat", sans-serif; cursor: pointer;
}
.search-btn:hover { border-color: var(--action); color: var(--action); }
.search-btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.search-btn kbd { padding: 0 4px; border-radius: 4px; background: var(--paper-alt); font: 600 12px "Montserrat", sans-serif; color: var(--muted); }
.search-icon { position: relative; width: 14px; height: 14px; }
.search-icon::before { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.search-icon::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 6px; height: 1.5px; background: currentColor; transform: rotate(45deg); transform-origin: right; }
.site-nav .search-btn { margin-left: auto; }
.site-nav .search-btn + .lang-toggle { margin-left: 8px; }
/* Icon only: the ⌘K hint is in its tooltip */
.search-btn { width: 36px; padding: 0; justify-content: center; }
.search-btn .search-text, .search-btn kbd { display: none; }
@media (max-width: 640px) { .search-btn { display: none; } }
/* Phones: Search at the top of the menu, and a + for quick add */
.search-menu-btn {
  display: flex; align-items: center; width: 100%; min-height: 48px; margin-bottom: 16px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted); font: 500 16px "Montserrat", sans-serif; text-align: left; cursor: pointer;
}
.quick-add-btn {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 140; width: 56px; height: 56px; border-radius: 50%;
  border: 0; background: var(--action); color: #fff; font: 400 32px/56px "Montserrat", sans-serif; box-shadow: 0 4px 16px rgba(58, 42, 34, 0.3); cursor: pointer;
}
.quick-add-btn[hidden] { display: none; }
.quick-add-btn:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
@media (min-width: 641px) { .quick-add-btn { display: none; } }
html.tl-editing .quick-add-btn { display: none; }
.search-dialog {
  width: min(640px, calc(100vw - 32px)); max-height: min(640px, calc(100dvh - 96px)); margin-top: 64px; padding: 0; border: 0; border-radius: 16px;
  background: var(--paper); color: var(--ink); box-shadow: 0 16px 48px rgba(58, 42, 34, 0.3);
}
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog::backdrop { background: rgba(58, 42, 34, 0.4); }
.search-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.search-tab {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 600 14px "Montserrat", sans-serif; color: var(--muted); cursor: pointer;
}
.search-tab[aria-pressed="true"] { background: var(--action); color: #fff; }
.search-tab:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.search-tabs .account-close { margin-left: auto; }
.search-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.search-input {
  display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: 8px 16px; font: inherit; font-size: 16px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; resize: vertical;
}
.search-input:focus { outline: none; border-color: var(--action); }
.search-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.search-results { list-style: none; margin: 8px 0 0; padding: 0; }
.search-result { margin: 0; }
.search-link {
  display: flex; flex-direction: column; gap: 0; width: 100%; padding: 8px 12px; box-sizing: border-box; border: 0; border-radius: 12px;
  background: none; color: var(--ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer;
}
.search-result.is-active .search-link, .search-link:hover { background: var(--paper-alt); }
.search-link:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.search-title { font-weight: 600; color: var(--action); }
.search-title.is-done { text-decoration: line-through; color: var(--muted); }
.search-where { font-size: 12px; color: var(--muted); }
.search-snippet { margin-top: 4px; font-size: 14px; color: #6b5644; }
.search-link mark { background: #fdefcf; color: inherit; border-radius: 2px; }
.search-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.search-add-row .btn { min-height: 44px; padding: 8px 20px; }
@media (max-width: 640px) {
  .search-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
}

/* ---------- To-do categories and subtasks (todo.js) ---------- */
.todo-add-cat, .todo-cat-select {
  min-height: 44px; max-width: 100%; box-sizing: border-box; padding: 0 12px; font: inherit; font-size: 14px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.todo-add-cat { margin-top: 8px; }
.todo-add-cat:focus, .todo-cat-select:focus { outline: none; border-color: var(--action); }
.todo-cat { margin-top: 16px; }
.todo-cat summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer;
  border-bottom: 1.5px solid var(--action);
}
.todo-cat summary::-webkit-details-marker { display: none; }
.todo-cat summary::before {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px; border: solid var(--action); border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.todo-cat[open] summary::before { transform: rotate(45deg); }
.todo-cat summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 4px; }
.todo-cat-name { font-weight: 600; font-size: 16px; color: var(--action); }
.todo-cat-count { font-size: 12px; color: var(--muted); }
.account-body .todo-cat .todo-items { margin-top: 0; }
.todo-cat-rename { margin: 0 0 0 auto; min-height: 44px; font-size: 12px; }
.todo-fold {
  flex: none; align-self: center; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: none;
  color: var(--muted); font: 600 12px "Montserrat", sans-serif; cursor: pointer;
}
.todo-fold::after { content: " ▾"; }
.todo-fold.is-folded::after { content: " ▸"; }
.todo-fold:hover { color: var(--action); border-color: var(--action); }
.todo-fold:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.todo-under { display: block; font-size: 12px; color: var(--muted); }

/* ---------- To-do rows: tick on the left, tap the words to edit (todo.js) ---------- */
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 4px; border-bottom: 1px solid var(--line); }
.todo-check { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; cursor: pointer; }
.todo-checkbox {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none;
  border: 1.5px solid var(--muted); border-radius: 6px; background: #fff; cursor: pointer;
}
.todo-check:hover .todo-checkbox:not(:disabled) { border-color: var(--action); }
.todo-checkbox:checked {
  border-color: var(--action); background: var(--action) no-repeat center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fffaf3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.todo-checkbox:disabled { opacity: 0.4; cursor: default; }
.todo-checkbox:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.todo-text {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 8px 10px 0; border: 0; background: none; text-align: left;
  font: inherit; font-size: 16px; line-height: 24px; color: var(--ink); overflow-wrap: anywhere; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.todo-text:hover .todo-text-main { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.todo-text:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; border-radius: 8px; }
.todo-text:disabled { color: var(--muted); cursor: default; }
.todo-item.is-done > .todo-text .todo-text-main { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(122, 102, 86, 0.5); }
.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.todo-meta .todo-from { margin-left: 0; vertical-align: 0; }
.todo-meta .todo-under { display: inline; }
.todo-item.is-editing { margin: 0 -12px; padding: 8px 12px 0; background: var(--paper-alt); border-radius: 12px; border-bottom-color: transparent; }
.todo-item.is-editing > .todo-text[hidden] { display: none; }
.todo-item.is-editing > .todo-fold { display: none; }
.todo-editor { flex-basis: 100%; padding: 0 0 12px 34px; }
.todo-edit-text {
  display: block; flex: 1; min-width: 0; margin: 0 0 8px; width: 100%; min-height: 44px; box-sizing: border-box; padding: 9px 12px; resize: none; overflow: hidden;
  font: inherit; font-size: 16px; line-height: 24px; color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.todo-edit-text:focus { outline: none; border-color: var(--action); }
.todo-editor-note { margin: 0 0 8px; }
.todo-subadd { display: flex; gap: 8px; margin-top: 8px; }
.todo-subadd input {
  flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0 12px; font: inherit; font-size: 16px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.todo-subadd input:focus { outline: none; border-color: var(--action); }
.todo-subadd .btn { min-height: 44px; padding: 0 16px; }
.todo-sub-added { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; color: var(--muted); }
.todo-sub-added li::before { content: "+ "; }
.todo-editor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.todo-editor-row:empty { display: none; }
.todo-editor-row .todo-switch, .todo-editor-foot .todo-switch { margin: 0; }
.todo-editor-cat { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.todo-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.todo-editor-done { min-height: 44px; padding: 0 24px; margin-left: auto; }
.todo-sub { flex-basis: 100%; margin: 0 0 8px 34px; padding-left: 8px; border-left: 2px solid var(--line); }
.todo-sub .todo-item { border-bottom: 0; }
.todo-sub .todo-text { padding-top: 10px; padding-bottom: 10px; }
.todo-cat .todo-list, .todo-done .todo-list { margin-top: 0; }
.account-body > .todo-list { margin-top: 12px; border-top: 1px solid var(--line); }
.todo-cat-select { font-size: 16px; }

/* How far along: n to do, n done, and a bar */
.todo-progress { margin: 0 0 8px; }
.todo-progress .todo-count { margin: 0; }
.todo-bar { height: 6px; margin-top: 8px; overflow: hidden; background: var(--paper-alt); border-radius: 999px; }
.todo-bar span { display: block; height: 100%; background: var(--action); border-radius: 999px; transition: width 0.3s ease; }
.todo-progress .todo-hint { margin-top: 8px; }

/* The add bar, pinned to the bottom of the sheet; the category picker shows while adding */
.todo-composer {
  position: relative; flex: none; padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(58, 42, 34, 0.06);
}
.todo-composer[hidden] { display: none; }
.todo-composer-cat { display: none; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.todo-composer:focus-within .todo-composer-cat, .todo-composer.has-text .todo-composer-cat { display: flex; }
.todo-composer-slot { flex: 1; min-width: 0; }
.todo-composer-slot select { width: 100%; }
.todo-composer .todo-row input { font-size: 16px; }
/* "Done: … · Undo", floating above the add bar */
.todo-toast {
  position: absolute; left: 16px; right: 16px; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 12px;
  padding: 4px 4px 4px 16px; background: var(--ink); color: var(--paper); border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 14px;
}
.todo-toast[hidden] { display: none; }
.todo-toast-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-toast-undo {
  flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: none;
  font: 600 14px "Montserrat", sans-serif; color: #fff; text-decoration: underline; cursor: pointer;
}
.todo-toast-undo:hover { background: rgba(255, 255, 255, 0.12); }
.todo-toast-undo:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (max-width: 480px) {
  /* On a phone the sheet takes the whole screen: more room for the list */
  .account-sheet { width: 100vw; }
  .todo-composer { padding-left: 16px; padding-right: 16px; }
}
/* ---------- The list as a task manager: views, due dates, stars, notes (todo.js) ---------- */
.todo-meta .todo-due {
  display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px;
  color: var(--muted); background: var(--paper-alt); border: 1px solid var(--line);
}
.todo-meta .todo-due.is-today { color: var(--action); border-color: var(--action); background: #fff; }
.todo-meta .todo-due.is-late { color: var(--berry-text); border-color: #f3c5cb; background: #fbe3e6; }
.todo-note-badge { font-size: 12px; color: var(--muted); }
.todo-note-badge::before { content: "✎ "; }
.todo-star {
  flex: none; align-self: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: none;
  font-size: 20px; line-height: 40px; color: var(--line); cursor: pointer;
}
.todo-star[aria-pressed="true"] { color: var(--action); }
.todo-star:hover:not(:disabled) { color: var(--action); background: var(--paper-alt); }
.todo-star:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.todo-star:disabled { opacity: 0.4; cursor: default; }
/* Phone: All / Today / Upcoming / Important */
.todo-views { display: flex; gap: 8px; overflow-x: auto; margin: 12px -24px 4px; padding: 0 24px 4px; scrollbar-width: none; }
.todo-views::-webkit-scrollbar { display: none; }
.todo-view-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font: 600 14px "Montserrat", sans-serif; color: var(--ink); cursor: pointer;
}
.todo-view-chip[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.todo-view-chip:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.todo-view-count { font-size: 12px; font-weight: 600; color: var(--berry-text); }
.todo-view-chip[aria-pressed="true"] .todo-view-count { color: #fff; }
.todo-view-empty { margin: 16px 0; }
.todo-day-head { margin: 20px 0 4px; font: 600 12px/16px "Montserrat", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.todo-day-head.is-late { color: var(--berry-text); }
@media (max-width: 380px) { .todo-views { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } }
/* Due date, important, the to-do's own note */
.todo-plan { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-top: 12px; }
.todo-field { margin-top: 12px; }
.todo-plan .todo-field { margin-top: 0; }
.todo-field-label { display: block; margin-bottom: 4px; font: 600 12px/16px "Montserrat", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.todo-due-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.todo-date {
  min-height: 40px; box-sizing: border-box; padding: 0 12px; font: inherit; font-size: 16px; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.todo-date:focus { outline: none; border-color: var(--action); }
.todo-quick {
  min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: 600 12px "Montserrat", sans-serif; color: var(--action); cursor: pointer;
}
.todo-quick:hover { border-color: var(--action); }
.todo-quick:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.todo-imp.is-on { background: var(--action); border-color: var(--action); color: #fff; }
.todo-item-note {
  display: block; width: 100%; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 16px; line-height: 24px; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; resize: vertical;
}
.todo-item-note:focus { outline: none; border-color: var(--action); }
.todo-field .todo-subadd { margin-top: 0; }

/* Buttons in the sheet always use the body font, whatever page it opens on */
.account-sheet .btn { font-family: "Montserrat", sans-serif; }
/* Reordering: the ⠿ handle, and the row being dragged */
.todo-drag {
  flex: none; align-self: center; width: 32px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: none;
  font-size: 18px; line-height: 40px; color: var(--muted); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
}
.todo-drag:hover { color: var(--action); background: var(--paper-alt); }
.todo-drag:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.todo-item.is-dragging { position: relative; z-index: 5; pointer-events: none; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); }
html.is-sorting, html.is-sorting * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* Everyone tab: one task onto several people's lists (todo.js assignForm) */
.assign { margin: 12px 0 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.assign-summary {
  display: flex; align-items: center; min-height: 48px; padding: 0 16px; list-style: none; cursor: pointer;
  font-weight: 600; color: var(--action);
}
.assign-summary::-webkit-details-marker { display: none; }
.assign-summary::before {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 12px 0 0; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
.assign[open] .assign-summary::before { transform: rotate(45deg); }
.assign-summary:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; border-radius: 12px; }
.assign-form { padding: 0 16px 16px; }
.assign-text {
  display: block; width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; font: inherit; font-size: 16px; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.assign-text:focus, .assign-cat:focus { outline: none; border-color: var(--action); }
.assign-who { margin-top: 16px; }
.assign-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.assign-group, .assign-person {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font: 600 14px "Montserrat", sans-serif; color: var(--ink); cursor: pointer;
}
.assign-group { color: var(--action); border-style: dashed; border-color: var(--action); }
.assign-group.is-everyone { border-style: solid; }
.assign-group[aria-pressed="true"], .assign-person[aria-pressed="true"] { background: var(--action); border-color: var(--action); border-style: solid; color: #fff; }
.assign-group:focus-visible, .assign-person:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.assign-extra { margin-top: 16px; }
.assign-cat { width: 180px; }
.assign-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.assign-foot .btn { min-height: 44px; padding: 0 20px; font-family: "Montserrat", sans-serif; }
.assign-foot .btn:disabled { opacity: 0.5; cursor: default; }
.assign-status { flex: 1 1 200px; margin: 0; }
.assign-status:empty { display: none; }

/* Shared to-dos: "With Jarrid" on the row, people to share with in the editor */
.todo-meta .todo-shared {
  display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px;
  color: #3f5f80; background: #e8f0f8; border: 1px solid #c9dcef;
}
.todo-share-people { display: flex; flex-wrap: wrap; gap: 8px; }
.todo-share-note { margin: 8px 0 0; }
.assign-mode { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.assign-mode-opt { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; cursor: pointer; }
.assign-mode-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--action); }

/* Budget tab: "Add a cost" on top, then the whole budget kept small (todo.js renderBudget) */
.budget-quick { margin: 0 0 24px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.account-body .budget-quick-title { margin: 0 0 8px; font-size: 18px; line-height: 24px; }
.budget-quick input, .budget-quick select {
  height: 44px; box-sizing: border-box; padding: 0 12px; font: inherit; font-size: 16px; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.budget-quick input:focus, .budget-quick select:focus { outline: none; border-color: var(--action); }
.budget-quick-name { display: block; width: 100%; }
.budget-quick-row { display: flex; gap: 8px; margin-top: 8px; }
.budget-quick-amount {
  display: flex; align-items: center; gap: 4px; flex: 0 0 120px; padding-left: 12px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.budget-quick-amount:focus-within { border-color: var(--action); }
.budget-quick .budget-quick-amount input { width: 100%; min-width: 0; padding: 0 12px 0 0; border: 0; text-align: right; font-variant-numeric: tabular-nums; }
.budget-quick-line { flex: 1; min-width: 0; }
.budget-quick .btn { flex: none; min-height: 44px; padding: 0 20px; }
.budget-quick-note { margin: 8px 0 0; }
.budget-quick-note:empty { display: none; }
.budget-quick-note.is-added { color: var(--action); font-weight: 600; }
.budget-quick-note.is-added::before { content: "✓ "; }
@media (max-width: 380px) {
  .budget-quick-row { flex-wrap: wrap; }
  .budget-quick-line { flex-basis: calc(100% - 128px); }
  .budget-quick .btn { flex: 1 1 100%; }
}
/* This page's costs: one short row each */
.budget-cost-list { list-style: none; margin: 8px 0 0; padding: 0; }
.budget-cost-list li { display: flex; align-items: center; gap: 8px; margin: 0; border-bottom: 1px solid var(--line); }
.budget-cost-name { flex: 1; min-width: 0; padding: 8px 0; overflow-wrap: anywhere; }
.budget-cost-cat { display: block; font-size: 12px; color: var(--muted); }
.budget-cost-amount { flex: none; font-variant-numeric: tabular-nums; }
/* Whole budget: a one-line summary, then a short row per category */
.budget-card.is-compact { padding: 12px 16px; }
.budget-card.is-compact .budget-big { font-size: 14px; }
.budget-card.is-compact .budget-bar { height: 6px; }
.budget-card.is-compact .budget-sub { margin-top: 4px; font-size: 12px; }
.budget-card.is-compact .budget-change { min-height: 0; margin: 0; font-size: 12px; }
.budget-cats { list-style: none; margin: 8px 0 0; padding: 0; }
.budget-cat { margin: 0; border-bottom: 1px solid var(--line); }
.budget-cat-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%;
  min-height: 44px; padding: 8px 0; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
}
.budget-cat-row:hover .budget-cat-name { color: var(--action); }
.budget-cat-row:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; border-radius: 4px; }
.budget-cat-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.budget-cat-name.is-untitled { color: var(--muted); font-weight: 400; }
.budget-cat-count { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); }
.budget-cat-nums { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.budget-cat-bar { grid-column: 1 / -1; height: 4px; overflow: hidden; background: var(--paper-alt); border-radius: 999px; }
.budget-cat-bar span { display: block; height: 100%; background: var(--action); border-radius: 999px; }
.budget-cat.is-over .budget-cat-nums { color: var(--berry-text); font-weight: 600; }
.budget-cat.is-over .budget-cat-bar span { background: var(--berry); }
.budget-cat.is-open { padding-bottom: 16px; }
.budget-cat-body .page-budget-costs { margin-top: 0; }
.budget-cat-body .page-budget-costs li { flex-wrap: wrap; }
.budget-cat-body .budget-page-link { flex-basis: 100%; order: 3; font-size: 12px; color: var(--berry-text); }
.budget-cat-fields { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.budget-add-cat { display: block; margin: 8px 0 0; min-height: 44px; }

/* ---------- Less scrolling in the sheet (todo.js): a shorter header, the list right under the chips,
   and a to-do that opens as one row of small buttons ---------- */
.account-head { padding-top: 8px; padding-bottom: 8px; }
.account-title { font-size: 20px; line-height: 28px; }
.account-tabs { padding-top: 4px; padding-bottom: 8px; }
.account-tab { min-height: 40px; }
.account-body { padding-top: 12px; }
.todo-bar.is-top { height: 4px; margin: 0 0 4px; }
.todo-views { margin-top: 4px; margin-bottom: 0; }
.todo-search-toggle { padding: 0 12px; font-size: 14px; }
.todo-search-toggle[aria-expanded="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.todo-tip { margin: 8px 0 0; font-size: 12px; line-height: 16px; }
.account-body > .todo-cat:first-of-type, .todo-views + .todo-cat, .todo-tip + .todo-cat, .todo-search + .todo-cat { margin-top: 8px; }
/* The open to-do: words, one row of small buttons, and the one panel that's open */
.todo-editor { padding: 0 0 8px; }
.todo-sub .todo-editor { padding-left: 0; }
.todo-editor-foot { flex-wrap: nowrap; }
.todo-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.todo-pill {
  display: inline-flex; align-items: center; max-width: 100%; min-height: 36px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 12px "Montserrat", sans-serif; color: var(--action);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.todo-pill { gap: 4px; }
.todo-pill:hover { border-color: var(--action); }
.todo-pill:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.todo-pill.is-set { border-color: var(--action); }
.todo-pill[aria-expanded="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.todo-pill[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.todo-panel { margin-top: 8px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.todo-panel .todo-subadd { margin-top: 0; }
.todo-panel .todo-item-note { border: 0; padding: 0; min-height: 48px; }
.todo-panel .todo-share-note { margin: 8px 0 0; font-size: 12px; line-height: 16px; }
.todo-editor-foot { flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.todo-editor-foot .todo-editor-done { order: 9; }
.todo-editor-done { min-height: 40px; padding: 0 20px; }
/* Notes fold at the bottom of the list */
details.todo-notes { margin-top: 16px; border-top: 1px solid var(--line); }
details.todo-notes > summary {
  display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding-top: 12px; list-style: none; cursor: pointer;
  color: var(--action);
}
details.todo-notes > summary::-webkit-details-marker { display: none; }
details.todo-notes > summary::before { content: "▸"; font-size: 12px; }
details.todo-notes[open] > summary::before { content: "▾"; }
.todo-notes-peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 400; color: var(--muted); }
.todo-reset { display: block; margin: 0; }
.budget-planning { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }

/* Shared categories: "With Jarrid" and Share · Rename in the header, the people panel under it */
.todo-cat summary { flex-wrap: wrap; }
.todo-cat summary .todo-shared {
  display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px;
  color: #3f5f80; background: #e8f0f8; border: 1px solid #c9dcef;
}
.todo-cat-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.todo-cat-actions .todo-cat-rename { margin: 0; }
.todo-cat-share { margin: 8px 0 12px; }
.todo-cat-share-done { display: block; margin: 4px 0 -8px auto; }

/* A to-do on the timeline: "🕒 10:30 AM · Hair and makeup", from the timeline itself */
.todo-meta .todo-step {
  display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px;
  color: var(--action); background: var(--paper-alt); border: 1px solid var(--line);
}
.todo-meta .todo-step.is-gone { color: var(--berry-text); border-color: #f3c5cb; background: #fbe3e6; }
.todo-step-select {
  display: block; width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; font: inherit; font-size: 16px; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.todo-step-select:focus { outline: none; border-color: var(--action); }
.todo-step-note { margin: 8px 0 0; font-size: 12px; line-height: 16px; }
.todo-step-note .todo-switch { min-height: 0; margin: 0; font-size: 12px; }

/* A linked to-do opened: its step, from the timeline */
.todo-stepcard p { margin: 0; }
.todo-stepcard-when { font: 600 12px/16px "Montserrat", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.todo-stepcard-title { margin-top: 4px !important; font-size: 16px; font-weight: 600; }
.todo-stepcard-text { margin-top: 4px !important; font-size: 14px; color: #6b5644; }
.todo-stepcard-where { margin-top: 8px !important; font-size: 14px; }
.todo-stepcard-items { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: #6b5644; }
.todo-stepcard-items li { margin: 0; }
.todo-stepcard-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.todo-stepcard-foot .todo-switch { margin: 0; min-height: 40px; }
/* On the timeline and event pages: your to-dos for a step */
.step-todos { margin-top: 12px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--action); border-radius: 8px; }
.step-todos-head { margin: 0; font: 600 12px/16px "Montserrat", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--action); }
.step-todos-list { list-style: none; margin: 4px 0 0; padding: 0; }
.step-todos-list li { margin: 0; }
.step-todos-list label { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; cursor: pointer; }
.step-todos-list li.is-done span { color: var(--muted); text-decoration: line-through; }
.step-todos .step-todos-open { margin: 0; min-height: 32px; font-size: 12px; }
/* "Show on the timeline": the step being pointed to */
@keyframes step-pointed { 0%, 60% { box-shadow: 0 0 0 3px var(--action); } 100% { box-shadow: 0 0 0 3px transparent; } }
.step.is-pointed { animation: step-pointed 2.4s ease-out; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .step.is-pointed { animation: none; box-shadow: 0 0 0 3px var(--action); } }

/* ---------- Calmer to-do rows (todo.js): the words, the time or date on the right, one quiet line under ---------- */
.todo-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.todo-text-main { grid-column: 1; }
.todo-when { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.todo-when.is-today { color: var(--action); }
.todo-when.is-late { color: var(--berry-text); }
.todo-line2 {
  grid-column: 1 / -1; display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.todo-line2 > span + span::before { content: " · "; color: var(--muted); font-weight: 400; }
.todo-line2 .is-shared { color: #3f5f80; font-weight: 600; }
.todo-line2 .is-late { color: var(--berry-text); font-weight: 600; }
.todo-line2-note { font-style: italic; }
.todo-item.is-done .todo-line2 { opacity: 0.8; }
.todo-star { width: 28px; height: 40px; font-size: 14px; line-height: 40px; color: var(--action); }
/* Subtasks fold with a small arrow; their count is in the quiet line */
.todo-fold { height: 40px; min-width: 28px; padding: 0 4px; border: 0; border-radius: 8px; font-size: 12px; color: var(--muted); }
.todo-fold::after { content: none; }
.todo-fold:hover { border: 0; background: var(--paper-alt); }
/* The ⠿ handle stays faint until you're on the row */
.todo-drag { width: 24px; opacity: 0.35; transition: opacity 0.15s ease; }
.todo-item:hover > .todo-drag, .todo-drag:focus-visible { opacity: 1; }
@media (hover: none) { .todo-drag { opacity: 0.5; } }
/* Category headers: name, how many left, who it's shared with, and ⋯ */
.todo-cat summary { gap: 8px; border-bottom-width: 1px; }
.todo-cat-name { font-size: 14px; letter-spacing: 0.02em; }
.todo-cat-with { font-size: 12px; font-weight: 600; color: #3f5f80; }
.todo-cat-more {
  margin-left: auto; width: 40px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none;
  font: 600 16px "Montserrat", sans-serif; color: var(--muted); cursor: pointer;
}
.todo-cat-more:hover, .todo-cat-more[aria-expanded="true"] { color: var(--action); background: var(--paper-alt); }
.todo-cat-more:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.todo-cat-menu { padding: 8px 0; }

/* Search, with a keyboard and mouse (todo.js) */
.todo-search {
  display: block; width: 100%; height: 40px; box-sizing: border-box; margin: 8px 0 4px; padding: 0 12px; font: inherit; font-size: 14px;
  color: inherit; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
}
.todo-search:focus { outline: none; border-color: var(--action); }

/* Round tables: seats around a circle (planning.js roundBoard) */
.pl-round-wrap { padding: 8px 0 16px; }
.pl-round { position: relative; margin: 0 auto; aspect-ratio: 1; }
@media (max-width: 640px) { .pl-seat.is-round { width: 64px; min-height: 52px; } }
.pl-round-top {
  position: absolute; left: 50%; top: 50%; width: 54%; height: 54%; transform: translate(-50%, -50%); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; text-align: center;
  background: #e8d5b9; color: #6b5644; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.pl-seat.is-round { position: absolute; width: 72px; min-height: 56px; transform: translate(-50%, -50%); }
.pl-add-tables { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pl-add-tables .btn { min-height: 44px; padding: 8px 20px; }
.pl-table-head select {
  min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: inherit; background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px;
}

/* ---------- Editing the words on any page (page-edits.js): Gina and Jarrid, like a wiki ---------- */
html:not(.page-editing) .pe-hidden { display: none !important; }
html.page-editing [data-edit], .pe-draft { cursor: text; border-radius: 4px; transition: box-shadow 0.15s, background-color 0.15s; }
html.page-editing .step[data-step] h3, html.page-editing .step[data-step] > p:not(.tl-edited), html.page-editing .step[data-step] .step-checklist li,
html.page-editing .step[data-step] .step-meta dd, html.page-editing .tl-area .area-lede, html.page-editing .tl-area .area-facts dt,
html.page-editing .tl-area .area-facts dd { cursor: text; border-radius: 4px; transition: box-shadow 0.15s, background-color 0.15s; }
html.page-editing .step[data-step] { cursor: pointer; }
html.page-editing .step[data-step] h3:hover, html.page-editing .step[data-step] > p:not(.tl-edited):hover, html.page-editing .step[data-step] .step-checklist li:hover,
html.page-editing .step[data-step] .step-meta dd:hover, html.page-editing .tl-area .area-lede:hover, html.page-editing .tl-area .area-facts dt:hover,
html.page-editing .tl-area .area-facts dd:hover,
html.page-editing [data-edit]:hover { box-shadow: 0 0 0 2px rgba(99, 53, 38, 0.3); background-color: rgba(255, 255, 255, 0.7); }
html.page-editing .pe-changed { background-color: rgba(248, 200, 107, 0.2); }
html.page-editing .pe-added { background-color: rgba(147, 179, 74, 0.16); }
html.page-editing .pe-hidden { opacity: 0.5; text-decoration: line-through; }
.pe-active, html.page-editing .pe-active:hover { box-shadow: 0 0 0 2px var(--action); background-color: #fff; }
[contenteditable="true"] { outline: none; caret-color: var(--action); }
.pe-draft:empty::before, .pe-draft > .check-text:empty::before { content: attr(data-placeholder); color: var(--muted); }
.pe-draft { min-height: 24px; }
.pe-flash { animation: tl-flash 1.6s ease; }
/* While editing, every tip and "More details" is open and its words sit in the page */
html.page-editing .area-meta-row .tip { display: block; }
html.page-editing .tip-body { position: static; width: auto; max-width: none; margin: 8px 0 0; box-shadow: none; }
html.page-editing .meta-more .meta-more-list { display: none; }
/* The toolbar over the block being edited */
.pe-tools {
  position: absolute; z-index: 400; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: min(640px, calc(100vw - 16px));
  padding: 4px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 0 8px 24px rgba(58, 42, 34, 0.3);
  font: 600 14px "Montserrat", sans-serif;
}
.pe-tools button {
  min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: #fff; font: inherit; cursor: pointer;
}
.pe-tools button:hover { background: rgba(255, 255, 255, 0.16); }
.pe-tools button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pe-tools .pe-bold { font-weight: 800; }
.pe-tools .pe-save { background: #fff; color: var(--ink); }
.pe-tools .pe-save:hover { background: var(--cream); }
.pe-sep { width: 1px; align-self: stretch; margin: 4px; background: rgba(255, 255, 255, 0.24); }
.pe-note { padding: 0 8px; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.76); }
.pe-wide { flex-basis: 100%; padding-bottom: 4px; }
/* Edit page: always at the bottom left, as the switch and, while editing, as the pill */
.pe-pill {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 150;
  display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 20px; border-radius: 999px;
  background: var(--action); color: #fff; font: 600 14px "Montserrat", sans-serif; box-shadow: 0 4px 16px rgba(58, 42, 34, 0.25); white-space: nowrap;
}
.pe-pill[hidden] { display: none; }
.pe-pill button {
  min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: var(--action); font: inherit; cursor: pointer;
}
.pe-pill button.tl-pill-changes { background: none; color: #fff; padding: 0 8px; text-decoration: underline; }
.pe-pill button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pe-pill.is-idle { padding: 4px; }
.pe-pill.is-idle button { background: none; color: #fff; padding: 0 16px; }
.pe-pill.is-idle button:hover { background: rgba(255, 255, 255, 0.16); }
.pe-pill.is-idle { gap: 0; }
.pe-pill.is-idle .pe-pill-plus { padding: 0 16px; font-size: 20px; font-weight: 400; }
.pe-pill-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.32); }
html.wiki .pe-pill { left: calc(var(--side-w, 0px) + 16px); }
@media (max-width: 640px) {
  .pe-tools { right: 8px; }
  html.pe-typing .pe-toast { bottom: calc(144px + env(safe-area-inset-bottom)); }
  /* the toolbar sits at the bottom while typing on a phone */
  html.pe-typing .pe-pill { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pe-flash { animation: none; outline: 3px solid var(--action); } }