/* Base rules the Claude artifact wrapper used to supply. */
:root { color-scheme: light dark; box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Karla and Lora, embedded directly as base64 woff2 rather than loaded from Google Fonts.
     This removes any dependency on that network request succeeding or finishing before the
     page's shrink-to-fit sizing runs — the exact font is guaranteed present and used from the
     very first paint, on every device and network, with nothing to race or fall back from. */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/karla-400.woff2) format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/karla-500.woff2) format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/karla-600.woff2) format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/karla-700.woff2) format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/lora-500.woff2) format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/lora-600.woff2) format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/lora-500-italic.woff2) format('woff2');
}

  :root {
    --bg: #faf8f4;
    --surface: #ffffff;
    --surface-sunken: #f2efe8;
    --text: #312e2f;
    --muted: #756f68;
    --accent: #5f95c2;
    --accent-strong: #3f6f97;
    --accent-tint: #eaf2f8;
    --border: #e2ddd1;
    --good: #4c8c6b;
    --good-tint: #e8f3ec;
    --warn: #b8863a;
    --warn-tint: #faf1e2;
    --shadow: 0 1px 2px rgba(49,46,47,0.06), 0 8px 24px -12px rgba(49,46,47,0.12);
    --header-band: #4a7fa8;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #1c1b19; --surface: #252321; --surface-sunken: #2c2a27;
      --text: #eee9e2; --muted: #a79f93; --accent: #7bafdd; --accent-strong: #a8cdec;
      --accent-tint: #26333d; --border: #3c3833; --good: #7ec19d; --good-tint: #1f2f27;
      --warn: #d9a75e; --warn-tint: #33291b; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
      --header-band: #2d4a63;
    }
  }
  :root[data-theme="dark"] {
    --bg: #1c1b19; --surface: #252321; --surface-sunken: #2c2a27;
    --text: #eee9e2; --muted: #a79f93; --accent: #7bafdd; --accent-strong: #a8cdec;
    --accent-tint: #26333d; --border: #3c3833; --good: #7ec19d; --good-tint: #1f2f27;
    --warn: #d9a75e; --warn-tint: #33291b; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
    --header-band: #2d4a63;
  }

  * { box-sizing: border-box; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Karla', ui-sans-serif, system-ui, sans-serif;
    padding-inline: 20px;
    padding-block: 28px 60px;
  }
  h1, h2, h3, .display { font-family: 'Lora', ui-serif, Georgia, serif; text-wrap: balance; }
  .wrap { max-width: 940px; margin-inline: auto; }

  /* ---- top bar (screen only) ---- */
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
  }
  .topbar .brand { display: flex; align-items: baseline; gap: 10px; }
  .topbar .brand .prop { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
  .topbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }

  button, .btn {
    font-family: 'Karla', sans-serif; font-weight: 600; font-size: 14px;
    border-radius: 9px; padding: 9px 16px; border: 1px solid transparent;
    cursor: pointer; transition: transform 0.08s ease, filter 0.15s ease;
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  }
  button:active, .btn:active { transform: translateY(1px); }
  button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn-primary { background: var(--accent-strong); color: #fff; }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
  .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
  .btn-secondary:hover { background: var(--surface-sunken); }
  .btn-ghost { background: transparent; color: var(--muted); border-color: transparent; padding: 9px 10px; }
  .btn-ghost:hover { color: var(--text); }

  [hidden] { display: none !important; }

  /* ---- the schedule sheet: real Canva design as background art, live text overlaid ---- */
  .sheet { display: flex; flex-direction: column; gap: 18px; }
  .canva-page {
    position: relative;
    width: 100%;
    aspect-ratio: 1056 / 816;
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    container-type: size;
  }
  .cv-page1-bg { background-image: url("../assets/rhinebeck-page1.jpg"); }
  .cv-page2-bg { background-image: url("../assets/rhinebeck-page2.jpg"); }

  .cv-beacon-page1-bg { background-image: url("../assets/beacon-page1.jpg"); }
  .cv-beacon-page2-bg { background-image: url("../assets/beacon-page2.jpg"); }
  .cv-skaneateles-page1-bg { background-image: url("../assets/skaneateles-page1.jpg"); }
  .cv-skaneateles-page2-bg { background-image: url("../assets/skaneateles-page2.jpg"); }
  .cv-albany-page1-bg { background-image: url("../assets/albany-page1.jpg"); }
  .cv-albany-page2-bg { background-image: url("../assets/albany-page2.jpg"); }
  .cv-plymouth-page1-bg { background-image: url("../assets/plymouth-page1.jpg"); }
  .cv-plymouth-page2-bg { background-image: url("../assets/plymouth-page2.jpg"); }

  /* Beacon-specific position overrides (own Canva template copy; same master template as
     Rhinebeck but measured slightly differently) — higher specificity wins over the globals. */
  .cv-beacon-page1-bg .cv-title { left: 5.014%; top: 10.01%; width: 50.12%; }
  .cv-beacon-page1-bg .cv-date { left: 5.087%; top: 16.57%; width: 37.15%; }
  .cv-beacon-page1-bg .cv-day { top: 31.86%; }
  .cv-beacon-page1-bg .day-slot { height: 7.286cqh; }
  .cv-beacon-page1-bg .cv-day.day-monday { left: 6.292%; }
  .cv-beacon-page1-bg .cv-day.day-tuesday { left: 18.960%; }
  .cv-beacon-page1-bg .cv-day.day-wednesday { left: 31.808%; }
  .cv-beacon-page1-bg .cv-day.day-thursday { left: 45.061%; }
  .cv-beacon-page1-bg .cv-day.day-friday { left: 57.741%; }
  .cv-beacon-page1-bg .cv-day.day-saturday { left: 70.640%; }
  .cv-beacon-page1-bg .cv-day.day-sunday { left: 83.502%; }
  /* Beacon's Class Descriptions page uses the exact same master template art as Rhinebeck
     (same source design element geometry): column 3 sits above a "Please Note" + Mirbeau
     Balanced/hours-of-operation box baked into the background art, which the source design
     confirms starts at 521.367 / 816 ≈ 63.9% of the page height. There was no override for
     this column before, so it silently fell back to the generic 80% cap and could render
     text straight into that box with no warning. */
  .cv-beacon-page2-bg .cv-desc-col.col-3 { max-height: 51.5%; padding-bottom: 0.3em; }

  /* Rhinebeck-specific: this property uses the plain/master .cv-page1-bg / .cv-page2-bg
     template (it's the only one with theme "canva" — see CANVA_BG_CLASSES), and Beacon's
     template above is a copy of it, so the same "Please Note" box sits in the same place
     on column 3 here too (~63.9% of the page height, confirmed the same way). Same missing
     cap, same fix. This column's real content runs close to that ceiling even at the full
     51.5% this template can spare (63.9% box top minus the 12.3% default column top), so
     it's given the smallest possible bottom padding rather than the 1.6em breathing room
     used on the other properties' col-3 — every fraction of a percent here goes to fitting
     the actual class descriptions instead of clipping the last one. */
  .cv-page2-bg .cv-desc-col.col-3 { max-height: 51.5%; padding-bottom: 0.3em; }

  /* Skaneateles-specific position overrides (own Canva template: a black-and-white portrait
     photo band across the top with the month title/date overlaid directly on its blank left
     side, then the printed grid card below) — calibrated against the real exported artwork. */
  .cv-skaneateles-page1-bg .cv-title {
    left: 4.515%; top: 3.1%; width: 37%; font-size: 2.55cqw; color: #3f3e3f;
  }
  .cv-skaneateles-page1-bg .cv-date {
    left: 4.515%; top: 9.1%; width: 37%; color: #6f9acb;
  }
  .cv-skaneateles-page1-bg .cv-day { top: 24.15%; }
  .cv-skaneateles-page1-bg .day-slot { height: 7.061cqh; }
  .cv-skaneateles-page1-bg .cv-day.day-monday { left: 6.326%; }
  .cv-skaneateles-page1-bg .cv-day.day-tuesday { left: 18.644%; }
  .cv-skaneateles-page1-bg .cv-day.day-wednesday { left: 31.238%; }
  .cv-skaneateles-page1-bg .cv-day.day-thursday { left: 43.845%; }
  .cv-skaneateles-page1-bg .cv-day.day-friday { left: 56.436%; }
  .cv-skaneateles-page1-bg .cv-day.day-saturday { left: 69.023%; }
  .cv-skaneateles-page1-bg .cv-day.day-sunday { left: 81.610%; }
  /* Skaneateles' page-2 template (like Albany's) is blank below the title in columns 1 and 2
     all the way to the bottom of the card. Column 3 sits above a "Please Note" box and the
     Mirbeau Balanced QR panel baked into the background art, confirmed by pixel measurement
     to start at ~60.6% of the page height — lower than Albany's, so column 3 gets more room
     here before it needs to stop. */
  .cv-skaneateles-page2-bg .cv-desc-col.col-1 { left: 5.57%; top: 10%; max-height: 86%; }
  .cv-skaneateles-page2-bg .cv-desc-col.col-2 { left: 35.87%; top: 10%; max-height: 86%; }
  .cv-skaneateles-page2-bg .cv-desc-col.col-3 { left: 68.02%; top: 10%; max-height: 49%; padding-bottom: 1.6em; }

  /* Albany-specific position overrides (own Canva template: black-and-white photo band
     across the top with the title overlaid top-right and the date under the logo top-left,
     then the printed grid card below) — calibrated against the masked/exported artwork. */
  .cv-albany-page1-bg .cv-title {
    /* The new template photo has "Wellness Class Schedule" baked directly into the artwork,
       so the overlay title is hidden here to avoid printing it twice on top of itself. */
    display: none;
  }
  .cv-albany-page1-bg .cv-date {
    left: 4.17%; top: 12%; width: 42.9%; color: #7f9cbf;
  }
  .cv-albany-page1-bg .cv-day { top: 25.767%; }
  .cv-albany-page1-bg .day-slot { height: 7.096cqh; }
  .cv-albany-page1-bg .cv-day.day-monday { left: 5.604%; }
  .cv-albany-page1-bg .cv-day.day-tuesday { left: 18.022%; }
  .cv-albany-page1-bg .cv-day.day-wednesday { left: 30.609%; }
  .cv-albany-page1-bg .cv-day.day-thursday { left: 43.126%; }
  .cv-albany-page1-bg .cv-day.day-friday { left: 55.713%; }
  .cv-albany-page1-bg .cv-day.day-saturday { left: 68.449%; }
  .cv-albany-page1-bg .cv-day.day-sunday { left: 80.909%; }
  /* Albany's page-2 template is blank below the title in columns 1 and 2 all the way to the
     bottom of the card, so those columns can use the same extra vertical room as Plymouth's.
     Column 3 sits above a real "Please Note" box and the Mirbeau Balanced QR panel that are
     part of the background art (confirmed by pixel measurement: they start at ~53.7% of the
     page height), so its usable height is capped well short of the other two columns. */
  .cv-albany-page2-bg .cv-desc-col.col-1 { left: 5.57%; top: 10.36%; max-height: 86%; }
  .cv-albany-page2-bg .cv-desc-col.col-2 { left: 35.87%; top: 10.36%; max-height: 86%; }
  .cv-albany-page2-bg .cv-desc-col.col-3 { left: 68.02%; top: 10.36%; max-height: 42%; padding-bottom: 1.6em; }

  /* Plymouth-specific position overrides (own Canva template: black-and-white photo band
     across the top with the title/date overlaid top-left, then the printed grid card below,
     plus a static "Daily Guided Meditation" callout box in the bottom-right of the grid
     which is part of the background art and never overlaid) — calibrated against the
     masked/exported artwork. */
  .cv-plymouth-page1-bg .cv-title {
    left: 4.17%; top: 2%; width: 62%;
  }
  .cv-plymouth-page1-bg .cv-date {
    left: 4.17%; top: 8.9%; width: 42.9%;
  }
  .cv-plymouth-page1-bg .cv-day { top: 20.664%; }
  .cv-plymouth-page1-bg .day-slot { height: 7.109cqh; }
  .cv-plymouth-page1-bg .cv-day.day-monday { left: 6.326%; }
  .cv-plymouth-page1-bg .cv-day.day-tuesday { left: 18.644%; }
  .cv-plymouth-page1-bg .cv-day.day-wednesday { left: 31.241%; }
  .cv-plymouth-page1-bg .cv-day.day-thursday { left: 43.848%; }
  .cv-plymouth-page1-bg .cv-day.day-friday { left: 56.436%; }
  .cv-plymouth-page1-bg .cv-day.day-saturday { left: 69.023%; }
  .cv-plymouth-page1-bg .cv-day.day-sunday { left: 81.610%; }
  /* Plymouth's page-2 "Class Descriptions" background is otherwise blank below the title
     row and the "Please note" box (which sits above ~7.9% and only spans the middle-right
     of the page) all the way to the bottom of the card, unlike the other properties' printed
     templates. So its columns can use far more vertical room than the 80% cap calibrated
     against those templates' visible card boundary — this is what was silently forcing
     Plymouth's shared description font size down near the overflow-prevention floor. */
  .cv-plymouth-page2-bg .cv-desc-col.col-1 { left: 5.53%; top: 9.91%; max-height: 86%; }
  .cv-plymouth-page2-bg .cv-desc-col.col-2 { left: 35.95%; top: 10.0%; max-height: 86%; }
  .cv-plymouth-page2-bg .cv-desc-col.col-3 { left: 68.02%; top: 10.0%; max-height: 86%; }

  .cv-title {
    position: absolute; left: 5.014%; top: 9.4%; width: 67.17%;
    font-family: 'Lora', ui-serif, Georgia, serif; font-weight: 600;
    font-size: 3.7cqw; line-height: 1.05; color: #3f3e3f; letter-spacing: 0.002em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cv-date {
    position: absolute; left: 5.099%; top: 15.55%; width: 55%;
    font-family: 'Karla', ui-sans-serif, sans-serif; font-weight: 700;
    font-size: 1.05cqw; line-height: 1.2; color: #7ab1e8; text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .cv-week { position: absolute; inset: 0; --day-fs: 1.1cqw; }
  .cv-day {
    position: absolute; top: 31.55%; width: 11.7%;
    display: flex; flex-direction: column;
    font-family: 'Karla', ui-sans-serif, sans-serif; font-size: var(--day-fs); line-height: 1.08;
    color: #2e2e2f;
  }
  /* A fixed "invisible box" per printed row-line gap, sized in cqh (a fixed % of the page's own
     height) rather than as a fraction of each day's total space — so the box is always exactly
     the size of the real card's ruled-line spacing, whether a day has 3 classes or 7. A day with
     fewer classes just ends short of the last ruled line, same as the blank rows on the real card.
     A small top padding keeps the time from sitting flush against the ruled line above it; it's in
     em so it shrinks along with the text if fitWeekUniform (below) has to shrink a busy day to fit —
     it never eats into the headroom a wrapped class name needs to avoid clipping. */
  .day-slot {
    height: 7.26cqh; flex: 0 0 auto; min-height: 0; overflow: hidden; padding-top: 0.3em;
  }
  .day-slot .time { display: block; font-weight: 400; color: #2e2e2f; }
  .day-slot .name { display: block; font-weight: 700; font-size: 0.9em; color: #2e2e2f; margin-top: 0.02em; }
  .day-slot .who { display: block; font-weight: 400; color: #6f9acb; margin-top: 0.01em; }
  .cv-day.day-monday { left: 5.82%; }
  .cv-day.day-tuesday { left: 18.56%; }
  .cv-day.day-wednesday { left: 31.29%; }
  .cv-day.day-thursday { left: 44.02%; }
  .cv-day.day-friday { left: 56.75%; }
  .cv-day.day-saturday { left: 69.48%; }
  .cv-day.day-sunday { left: 82.22%; }

  .cv-desc { position: absolute; inset: 0; }
  .cv-desc-col {
    position: absolute; top: 12.3%; width: 28.4%; max-height: 80%;
    font-family: 'Karla', ui-sans-serif, sans-serif; font-size: var(--desc-fs, 0.98cqw); line-height: 1.28;
    color: #1c1a1a; overflow: hidden;
  }
  .cv-desc-col.col-1 { left: 4.92%; }
  .cv-desc-col.col-2 { left: 35.99%; }
  .cv-desc-col.col-3 { left: 69.89%; }
  .desc-item { margin-bottom: 0.9em; break-inside: avoid; }
  .desc-item .cname { font-weight: 700; margin: 0 0 0.15em; color: #6f9acb; text-transform: uppercase; letter-spacing: 0.01em; }
  .desc-item .cdesc { font-weight: 400; margin: 0; }

  .meta-row {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted);
  }
  .meta-row a.link, button.link {
    color: var(--accent-strong); cursor: pointer; text-decoration: underline;
    background: none; border: none; padding: 0; font: inherit;
  }

  .history-panel {
    margin-top: 6px; font-size: 12.5px; color: var(--muted);
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 14px;
  }
  .history-panel div { padding: 4px 0; border-bottom: 1px dashed var(--border); }
  .history-panel div:last-child { border-bottom: none; }
  .history-panel .history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .history-panel .history-row .link { flex: 0 0 auto; font-size: 12.5px; white-space: nowrap; }

  /* ---- edit form ---- */
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
  .section { padding: 20px 24px; border-bottom: 1px solid var(--border); }
  .section:last-child { border-bottom: none; }
  .section h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--text); }
  .section .hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
  label.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
  input[type="text"], textarea {
    width: 100%; font-family: 'Karla', sans-serif; font-size: 14.5px; color: var(--text);
    background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px; line-height: 1.5; resize: vertical;
  }
  textarea { min-height: 108px; font-variant-numeric: tabular-nums; }
  input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
  .edit-week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
  .edit-day-card { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
  .edit-day-card .day-name { font-family: 'Lora', serif; font-size: 14px; font-weight: 600; margin: 0 0 8px; color: var(--accent-strong); }
  .edit-day-card textarea { background: var(--surface); min-height: 120px; font-size: 13.5px; }
  .edit-desc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  @media (max-width: 700px) { .edit-desc-grid { grid-template-columns: 1fr; } }

  /* ---- one field-set per class / per description, so nobody has to remember a text format ---- */
  .class-item, .desc-item-edit {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px; margin-bottom: 8px;
  }
  .class-list .class-item:last-child, .desc-list .desc-item-edit:last-child { margin-bottom: 0; }
  .class-item .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
  .class-item input[type="text"], .desc-item-edit input[type="text"] { font-size: 13.5px; padding: 8px 10px; margin-bottom: 8px; }
  .class-item .cls-name {
    margin-bottom: 4px; min-height: 0; height: auto; resize: vertical;
    padding: 8px 10px; font-size: 13.5px; line-height: 1.35; overflow: hidden;
  }
  .class-item .cls-name-error {
    display: none; color: #b3261e; font-size: 12px; margin: -2px 0 8px; font-weight: 600;
  }
  .class-item .cls-name-error.show { display: block; }
  .desc-col-error {
    display: none; color: #b3261e; font-size: 12.5px; font-weight: 600;
    margin-top: 8px; padding: 8px 10px; background: #fbeceb; border: 1px solid #eec9c6; border-radius: 8px;
  }
  .desc-col-error.show { display: block; }
  .field-error {
    display: none; color: #b3261e; font-size: 12.5px; margin: 6px 0 0; font-weight: 600;
  }
  .field-error.show { display: block; }
  #f-updated-by.input-error { border-color: #b3261e; }
  /* Per-description character count, shown under every description field. This is a plain
     length check — independent of whether the text happens to still fit visually — because a
     column with generous room on its own printed template (Plymouth's, say) can swallow a much
     longer paste than a tighter one before the layout check ever notices anything wrong. A flat
     character cap catches "someone pasted way too much" consistently everywhere, rather than
     only where the page geometry happens to be tight enough to catch it. */
  .desc-len-note { margin: -4px 0 8px; font-size: 11.5px; color: var(--muted); }
  .desc-len-note.over { color: #b3261e; font-weight: 600; }
  .desc-len-note.col-total { margin: 8px 0 0; font-size: 12px; font-weight: 600; }
  .class-item .row3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .class-item .live-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 400; }
  .desc-item-edit textarea { min-height: 76px; font-size: 13px; margin-bottom: 8px; }
  .field-label.mini { margin-bottom: 4px; }
  .btn-remove {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    font-size: 12px; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  }
  .btn-remove:hover { color: #b6473f; border-color: #b6473f; }
  .btn-add {
    width: 100%; margin-top: 4px; background: transparent; border: 1px dashed var(--border);
    color: var(--accent-strong); font-size: 13px; font-weight: 600; padding: 9px; border-radius: 8px; cursor: pointer;
  }
  .btn-add:hover { background: var(--accent-tint); }

  /* ---- preview panel: the real rendered sheet, before anything is published ---- */
  .preview-note {
    background: var(--accent-tint); border: 1px solid var(--border); color: var(--text);
    padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px;
  }
  .actions-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; flex-wrap: wrap; }
  .actions-bar .note { color: var(--muted); font-size: 13px; }
  .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--good); color: #fff; padding: 10px 18px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); z-index: 10;
  }

  footer.credit { text-align: center; color: var(--muted); font-size: 12px; margin-top: 22px; }

  /* ---- print ---- */
  @media print {
    @page { size: letter landscape; margin: 0; }
    body { background: #fff !important; padding: 0 !important; }
    .topbar, .meta-row, footer.credit, #view-edit, #view-preview, #view-history, #view-landing, .history-panel { display: none !important; }
    .wrap { max-width: none; }
    .sheet { gap: 0; }
    .canva-page { box-shadow: none !important; border-radius: 0 !important; width: 100vw; height: 100vh; page-break-after: always; }
    .canva-page:last-child { page-break-after: auto; }
    .desc-item { break-inside: avoid; }
  }

  /* ---- landing page: pick a property ---- */
  .landing-hero { text-align: center; margin: 8px 0 30px; }
  .landing-hero h1 { font-size: 30px; margin: 0 0 8px; color: var(--text); }
  .landing-hero p { color: var(--muted); font-size: 15px; margin: 0; }
  .landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
  .landing-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow); padding: 22px 20px; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px; font-family: inherit; width: 100%;
  }
  .landing-card:hover { border-color: var(--accent); filter: brightness(1.02); }
  .landing-card .lc-name { font-family: 'Lora', serif; font-size: 18.5px; font-weight: 600; color: var(--text); }
  .landing-card .lc-sub { font-size: 12.5px; color: var(--muted); }
  .landing-card .lc-go { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--accent-strong); }

  /* ---- generic on-brand theme (used until each property has its own Canva-matched design) ---- */
  .gp-logo { position: absolute; display: none; top: 3.4%; right: 5%; width: 11%; z-index: 2; }
  .gp-band-name {
    position: absolute; display: none; top: 4%; left: 5.014%;
    font-family: 'Karla', ui-sans-serif, sans-serif; font-weight: 700; font-size: 0.85cqw;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--header-band, #4a7fa8);
  }
  .gp-page1 .gp-logo, .gp-page2 .gp-logo, .gp-page1 .gp-band-name, .gp-page2 .gp-band-name { display: block; }
  .gp-page1 { background: linear-gradient(180deg, #2e4b63 0%, #2e4b63 29%, #fdfbf6 29%, #fdfbf6 100%); }
  .gp-page1 .cv-title { color: #ffffff; }
  .gp-page1 .cv-date { color: #cdbb8e; }
  .gp-page1 .gp-band-name { color: #cdbb8e; }
  .gp-page2 { background: #fdfbf6; }
  .gp-page2-heading {
    position: absolute; display: none; top: 8.6%; left: 5.014%;
    font-family: 'Lora', ui-serif, Georgia, serif; font-weight: 600; font-size: 2.4cqw; color: #2e4b63;
  }
  .gp-page2 .gp-page2-heading { display: block; }

  .week-empty-note, .desc-empty-note {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 0 14%; font-family: 'Karla', ui-sans-serif, sans-serif;
    font-style: italic; font-size: 1.05cqw; color: #8b8377;
  }