/* Direction: Lumen Studio — warm and photographic, like a boutique hotel's site.
   Deep forest green, soft peach, warm cream; Instrument Serif headlines over DM Sans. */

:root {
  --canvas: #f6f1e9;
  --surface: #fffdf9;
  --surface-2: #efe7db;
  --border: #e2d8c9;
  --border-strong: #b9ab98;
  --ink: #1c2b24;
  --muted: #5a675f;
  --accent: #1f4d3a;
  --accent-hover: #173d2e;
  --accent-ink: #ffffff;
  --accent-text: #1f4d3a;
  --accent-strong: #1f4d3a;
  --accent-soft: #dce8df;
  --accent-border: #a9c4b3;
  --success: #2f7a4a;
  --success-ink: #ffffff;
  --success-soft: #dcebe0;
  --success-strong: #23603a;
  --warning: #a8590f;
  --warning-ink: #ffffff;
  --warning-soft: #f6e4cf;
  --warning-strong: #8a4a0c;
  --danger: #b4372b;
  --danger-ink: #ffffff;
  --danger-soft: #f6dcd6;
  --danger-strong: #9a2c21;
  --chart-1: #1f4d3a;
  --chart-2: #d9825b;
  --chart-3: #6f8f7c;
  --chart-4: #c9a227;
  --chart-5: #8a5a8c;
  --chart-6: #3b7a99;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-card: 20px;
  --radius-btn: 999px;
  --radius-input: 12px;
  --display-weight: 400;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.14em;

  --x-g-blue: #4285f4;
  --x-g-green: #34a853;
  --x-g-yellow: #fbbc05;
  --x-g-red: #ea4335;
  --x-peach: #f2b79a;
  --x-peach-soft: #fbe6da;
  --x-peach-ink: #7a3a1c;
  --x-band: #15271f;
  --x-band-ink: #f6f1e9;
  --x-band-muted: #b7c4bb;
}

html[data-theme="dark"] {
  --canvas: #0f1a15;
  --surface: #16241d;
  --surface-2: #1c2e25;
  --border: #2a3f34;
  --border-strong: #46604f;
  --ink: #eef1ea;
  --muted: #a6b3aa;
  --accent: #8fc9a4;
  --accent-hover: #a6d6b7;
  --accent-ink: #0f1a15;
  --accent-text: #9fd3b1;
  --accent-strong: #b5e0c4;
  --accent-soft: #1e3a2c;
  --accent-border: #2f5a44;
  --success: #4fa36b;
  --success-ink: #0f1a15;
  --success-soft: #173326;
  --success-strong: #8fd0a6;
  --warning: #d9934a;
  --warning-ink: #0f1a15;
  --warning-soft: #3a2a18;
  --warning-strong: #f0be86;
  --danger: #e07a6c;
  --danger-ink: #0f1a15;
  --danger-soft: #3a1d19;
  --danger-strong: #f2a99e;
  --chart-1: #8fc9a4;
  --chart-2: #f2b79a;
  --chart-3: #9fbfa9;
  --chart-4: #e3c460;
  --chart-5: #c79bc9;
  --chart-6: #79b4d1;

  --x-peach: #f2b79a;
  --x-peach-soft: #3a2a22;
  --x-peach-ink: #f7cdb6;
  --x-band: #0a120e;
  --x-band-ink: #eef1ea;
  --x-band-muted: #9aa89f;
}

/* ───── guards against sideways scroll ───── */
html, body { overflow-x: clip; }
.card, .input, .select { min-width: 0; max-width: 100%; }
input[type="date"], input[type="time"] { min-width: 0; max-width: 100%; }

/* ───── type: DM Sans for reading, Instrument Serif for the big moments ───── */
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.font-display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--display-tracking); }
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--display-tracking);
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.sec-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--display-tracking);
  font-size: 1.5rem;
  line-height: 1.85rem;
}
@media (min-width: 768px) { .page-title { font-size: 2.75rem; line-height: 3rem; } }

/* ───── brand pieces ───── */
.logo-tile {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--accent); color: var(--accent-ink);
}
.logo-tile-on-band { background: var(--x-peach); color: var(--x-peach-ink); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.3rem 0.8rem;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--muted);
}
.btn-peach { background: var(--x-peach); border-color: var(--x-peach); color: var(--x-peach-ink); }
.btn-peach:hover { background: color-mix(in srgb, var(--x-peach) 85%, var(--x-band-ink)); border-color: transparent; }

/* the public bar: quiet, on the page's own ground */
.site-bar { background: var(--canvas); }

/* tinted and dark bands */
.tint { background: var(--surface-2); }
.band { background: var(--x-band); color: var(--x-band-ink); }
.band-muted { color: var(--x-band-muted); }
.band-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--x-band-muted); }
.band-rule { border-top: 1px solid color-mix(in srgb, var(--x-band-ink) 14%, transparent); }
.brand-band { background: var(--accent); color: var(--accent-ink); }
.hero-glow { background: var(--canvas); }

/* ───── homepage ───── */
.hero-photo { border-radius: 32px; box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--ink) 55%, transparent); }
.float-card {
  position: absolute; z-index: 2; width: min(15rem, 70%);
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface); padding: 1rem 1.1rem;
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--ink) 45%, transparent);
}
.float-card-accent { border-left: 4px solid var(--x-peach); }
.live-dot { display: inline-block; height: 0.5rem; width: 0.5rem; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }

.menu-list { border-top: 1px solid var(--border); }
.menu-row {
  display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem 0.25rem;
  border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; transition: background 0.2s, padding 0.2s;
}
.menu-row:hover { background: var(--surface); padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .menu-row { flex-direction: row; align-items: center; justify-content: space-between; } }
.menu-go {
  display: inline-flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 999px;
  border: 1px solid var(--border-strong); transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.menu-row:hover .menu-go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.step-card { border-radius: 24px; background: var(--surface); border: 1px solid var(--border); padding: 1.5rem; }
.illus { border-radius: 16px; background: var(--canvas); border: 1px solid var(--border); padding: 1rem; min-height: 9.5rem; }
.illus-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; font-weight: 500;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface); padding: 0.55rem 0.75rem;
}
.illus-row + .illus-row { margin-top: 0.4rem; }
.illus-row.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.illus-price { font-weight: 700; white-space: nowrap; }
.illus-chip { display: block; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); padding: 0.55rem 0; text-align: center; font-size: 0.8rem; font-weight: 600; }
.illus-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.illus-tick { display: inline-flex; height: 2.25rem; width: 2.25rem; flex: none; align-items: center; justify-content: center; border-radius: 999px; background: var(--success-soft); color: var(--success-strong); }
.illus-bar { display: block; height: 0.5rem; border-radius: 999px; background: var(--surface-2); }

.team-card { display: flex; flex-direction: column; border-radius: 24px; border: 1px solid var(--border); background: var(--surface); padding: 0.75rem 0.75rem 1.25rem; }
.team-card > :not(.team-photo):not(a) { margin-left: 0.75rem; margin-right: 0.75rem; }
.team-card > a { margin-left: 0; margin-top: auto; align-self: flex-start; }
.team-card > .team-services { padding-bottom: 1.25rem; }
.team-photo { position: relative; }
.team-photo .media { border-radius: 18px; overflow: hidden; }
.team-av { position: absolute; left: 0.75rem; bottom: -1.75rem; border-radius: 9999px; border: 3px solid var(--surface); background: var(--surface); display: inline-flex; line-height: 0; }
.stat-figure { font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--accent-text); }
@media (min-width: 768px) { .stat-figure { font-size: 5rem; } }
.quote-card { position: relative; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--x-peach); padding: 2.5rem 2rem 2rem; }
.quote-mark { position: absolute; top: -0.5rem; right: 1.5rem; font-family: var(--font-display); font-size: 7rem; line-height: 1; color: var(--accent-text); }

.browser-frame { box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--ink) 40%, transparent), 0 0 0 1px var(--border); }
details.faq summary { cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] .faq-chev { transform: rotate(180deg); }
.faq-chev { transition: transform 0.2s; }

/* ───── sign in ───── */
.login-shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.65) 100%); }
.login-copy { color: var(--x-band-ink); }
.login-sub { color: color-mix(in srgb, var(--x-band-ink) 82%, transparent); }

/* ───── admin shell ───── */
.side { background: var(--surface); border-right: 1px solid var(--border); }
.nav-link {
  display: flex; align-items: center; gap: 0.75rem; border-radius: 12px; padding: 0.6rem 0.75rem;
  font-size: 0.9rem; font-weight: 500; color: var(--muted); transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.demo-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--x-band); color: var(--x-band-ink); padding: 0.55rem 1rem; font-size: 0.875rem;
}
.step-num {
  display: inline-flex; height: 2.25rem; width: 2.25rem; flex: none; align-items: center; justify-content: center;
  border-radius: 9999px; font-size: 0.85rem; font-weight: 700; background: var(--accent); color: var(--accent-ink);
}

/* ───── avatars, pills ───── */
.av {
  display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: 9999px;
  font-weight: 700; letter-spacing: 0.02em; line-height: 1;
}
.av-0 { background: color-mix(in srgb, var(--chart-1) 18%, var(--surface)); color: color-mix(in srgb, var(--chart-1) 60%, var(--ink)); }
.av-1 { background: color-mix(in srgb, var(--chart-2) 22%, var(--surface)); color: color-mix(in srgb, var(--chart-2) 55%, var(--ink)); }
.av-2 { background: color-mix(in srgb, var(--chart-3) 22%, var(--surface)); color: color-mix(in srgb, var(--chart-3) 55%, var(--ink)); }
.av-3 { background: color-mix(in srgb, var(--chart-4) 22%, var(--surface)); color: color-mix(in srgb, var(--chart-4) 50%, var(--ink)); }
.av-4 { background: color-mix(in srgb, var(--chart-5) 20%, var(--surface)); color: color-mix(in srgb, var(--chart-5) 55%, var(--ink)); }
.av-5 { background: color-mix(in srgb, var(--chart-6) 20%, var(--surface)); color: color-mix(in srgb, var(--chart-6) 55%, var(--ink)); }
.pill {
  display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; border-radius: 9999px;
  padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; line-height: 1.25rem;
}
.pill-money { background: var(--x-peach-soft); color: var(--x-peach-ink); }
.pill-dur { background: var(--accent-soft); color: var(--accent-strong); }
.pill-plain { background: var(--surface-2); color: var(--muted); }
.meta { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }

/* ───── calendar ───── */
.cal-hour { height: 72px; }
.cal-ghost {
  position: absolute; left: 2px; right: 2px; z-index: 20; pointer-events: none; border-radius: 6px;
  border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent);
  padding: 2px 6px; font-size: 0.75rem; font-weight: 700; color: var(--accent-text);
}
[data-bk][draggable="true"] { cursor: grab; }
[data-bk].dragging { opacity: 0.45; }
[data-cell][data-over="true"] { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; }
.month-cell { min-height: 7.5rem; }

/* ───── messages and field errors ───── */
.msg-error {
  border: 1px solid color-mix(in srgb, var(--danger-strong) 45%, transparent);
  background: var(--danger-soft); color: var(--danger-strong);
  border-radius: 12px; padding: 0.625rem 0.875rem; font-size: 0.875rem;
}
.field-error { color: var(--danger-strong); font-size: 0.8125rem; margin-top: 0.375rem; }
[aria-invalid="true"] { border-color: var(--danger-strong) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-strong) 20%, transparent); }

/* ───── loading: lists fade while a skeleton takes their place ───── */
.results { transition: opacity 0.15s; }
.skel-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); }
.skel-row:last-child { border-bottom: 0; }

/* ───── upload control ───── */
[data-upload] [hidden] { display: none !important; }
.upload-drop {
  display: flex; align-items: center; gap: 1rem; padding: 1rem; cursor: pointer;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--surface-2);
  transition: border-color 0.15s, background 0.15s;
}
.upload-drop:hover, .upload-drop[data-over="true"], [data-upload-input]:focus-visible + .upload-drop {
  border-color: var(--accent); background: var(--accent-soft);
}
.upload-preview {
  display: inline-flex; height: 4rem; width: 4rem; flex: none; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.upload-preview img { height: 100%; width: 100%; object-fit: contain; }

/* ───── tables ───── */
.dtable { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.dtable th {
  padding: 0.8rem 1rem; text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dtable td { padding: 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--surface-2); }
.dtable .cell, .dtable td > a { display: block; padding: 0.85rem 1rem; color: inherit; text-decoration: none; }
.dtable .r { text-align: right; }
.dtable .nowrap { white-space: nowrap; }
.dtable .clip { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtable tfoot td { padding: 0.75rem 1rem; font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--border); }

.dtable .clip { max-width: 12rem; }

/* ───── card section titles: DM Sans, with a muted hint, the same on every card ───── */
.card-head { min-width: 0; }
.card-heading { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.card-hint { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.35rem; color: var(--muted); }

/* ───── time fields wear a clock, date fields keep the calendar ───── */
input[type="time"].input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>");
}

/* ───── checkboxes and radios in the brand (switches keep the .toggle look) ───── */
input[type="checkbox"]:not(.sr-only):not([role="switch"]),
input[type="radio"]:not(.sr-only) {
  appearance: none; -webkit-appearance: none; accent-color: var(--accent);
  position: relative; display: inline-grid; place-content: center; flex: none; margin: 0;
  width: 18px; height: 18px; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
input[type="checkbox"]:not(.sr-only):not([role="switch"]) { border-radius: 5px; }
input[type="radio"]:not(.sr-only) { border-radius: 9999px; }
input[type="checkbox"]:not(.sr-only):not([role="switch"])::after {
  content: ""; width: 5px; height: 9px; margin-top: -2px; opacity: 0;
  border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="radio"]:not(.sr-only)::after { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--accent-ink); opacity: 0; }
input[type="checkbox"]:not(.sr-only):not([role="switch"]):checked,
input[type="radio"]:not(.sr-only):checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:not(.sr-only):not([role="switch"]):checked::after,
input[type="radio"]:not(.sr-only):checked::after { opacity: 1; }
input[type="checkbox"]:not(.sr-only):not([role="switch"]):hover,
input[type="radio"]:not(.sr-only):hover { border-color: var(--accent); }
input[type="checkbox"]:not(.sr-only):not([role="switch"]):focus-visible,
input[type="radio"]:not(.sr-only):focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.toggle > span { min-width: 0; }
.pick-row {
  display: flex; align-items: center; gap: 0.75rem; min-width: 0; cursor: pointer; font-size: 0.875rem;
  border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.85rem; transition: border-color 0.15s, background 0.15s;
}
.pick-row:hover { border-color: var(--accent); }
.pick-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* ───── phone drawer: a dark backdrop behind the menu ───── */
.scrim { background: rgba(0, 0, 0, 0.55); animation: scrim-in 0.2s ease-out; }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* ───── bookings: day headings and the pager ───── */
.day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.875rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border);
  font-family: var(--font-body) !important; font-size: 0.95rem !important; line-height: 1.4 !important;
  font-weight: 600 !important; letter-spacing: 0 !important; color: var(--ink);
}
.day-head > span { font-family: var(--font-body) !important; letter-spacing: 0 !important; }
.day-count { font-size: 0.8125rem !important; font-weight: 400 !important; color: var(--muted); white-space: nowrap; }

/* ───── bookings filters: a bottom sheet on phones, one row on desktop ───── */
[data-fcount][hidden] { display: none !important; }
.bk-filters { display: grid; gap: 1.25rem; }
.bk-top { display: flex; align-items: flex-start; gap: 0.75rem; }
.bk-search { flex: 1 1 auto; min-width: 0; }
.q-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (min-width: 768px) {
  .bk-filters {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto;
    gap: 0.75rem 1rem; align-items: start;
  }
  .bk-top { display: contents; }
  .bk-filters .field, .bk-filters .field + .field, .bk-filters .fsheet > .field { margin-top: 0; }
  .bk-filters [data-fsheet-open] { display: none !important; }
  .q-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .bk-filters .input, .bk-filters .select { height: 2.5rem; min-height: 2.5rem; }
  .bk-filters .bk-seg { height: 2.5rem; box-sizing: border-box; align-items: stretch; }
  .bk-filters .bk-seg span { padding-block: 0; }
}
@media (min-width: 1280px) { .bk-filters { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; } }
.fsheet-back { display: none; }
.fsheet-head, .fsheet-foot { display: none; }
@media (max-width: 767.98px) {
  .fsheet-back {
    display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .fsheet-back.is-open { opacity: 1; pointer-events: auto; }
  .fsheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 88vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1.25rem;
    background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-bottom: 0;
    border-radius: 20px 20px 0 0; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
    transform: translateY(105%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
  }
  .fsheet.is-open { transform: none; visibility: visible; }
  .fsheet-head { display: flex; align-items: center; justify-content: space-between; }
  .fsheet-foot { display: block; position: sticky; bottom: -0.1rem; }
  html.reduced-motion .fsheet, html.reduced-motion .fsheet-back { transition: none; }
}
@media (min-width: 768px) { .fsheet { display: contents; } }
.pager { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
@media (min-width: 640px) { .pager { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ───── confirmation page: a calm note, not an error ───── */
.note-calm { display: flex; gap: 0.75rem; align-items: flex-start; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); padding: 1rem 1.1rem; }
.note-calm-ic { flex: none; margin-top: 0.1rem; color: var(--accent-text); }

/* ───── calendar tooltip ───── */
.cal-tip {
  position: fixed; z-index: 90; max-width: min(18rem, calc(100vw - 16px)); pointer-events: none;
  border-radius: 12px; background: var(--x-band); color: var(--x-band-ink); padding: 0.6rem 0.8rem;
  font-size: 0.8rem; line-height: 1.35; box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.45);
}
.cal-tip p + p { margin-top: 0.15rem; opacity: 0.85; }
.cal-tip .cal-tip-title { font-size: 0.875rem; font-weight: 700; opacity: 1; }
.cal-tip p + p.cal-tip-title { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .menu-row, .menu-go { transition: none; }
  .scrim { animation: none; }
}