@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/poppins-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/poppins-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/poppins-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/poppins-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/fonts/poppins-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/fonts/poppins-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("/fonts/montserrat-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("/fonts/montserrat-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("/fonts/montserrat-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("/fonts/montserrat-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Brand kit. */
:root {
  --brand: #9900cc;
  --brand-dark: #7a00a3;
  --brand-tint: #f6e9fb;
  --ink: #1f1a24;
  --muted: #6b6475;
  --line: #e4dfe8;
  --bg: #faf8fb;
  --card: #ffffff;
  --warn-bg: #fff6e0;
  --warn-line: #e5b84a;
  --ok-bg: #e8f6ec;
  --ok-line: #5fb97a;
  --error: #b42318;
}

* { box-sizing: border-box; }
/* The hidden attribute always wins over a component's own display rule. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Montserrat", system-ui, sans-serif; font-size: 15px; line-height: 1.55; }
h1, h2, h3, legend, .brand span, nav a, .btn, .pill, .pills a, .stat-num, .ev-cal, .ev-more summary, .chip { font-family: "Poppins", "Montserrat", system-ui, sans-serif; }
h1 { font-size: 26px; margin: 0 0 6px; font-weight: 600; line-height: 1.25; }
h2 { font-size: 19px; margin: 28px 0 12px; font-weight: 600; }
h3 { font-size: 15px; margin: 0 0 10px; font-weight: 600; }
a { color: var(--brand-dark); }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Admin shell ---------- */
.shell { display: flex; min-height: 100vh; }
/* A slim rail: the logo and the app name at the top, then icon-over-label items, Sign out at the bottom. */
.side { width: 88px; flex: none; background: var(--card); border-right: 1px solid var(--line); padding: 14px 6px; position: sticky; top: 0; height: 100vh; align-self: flex-start; display: flex; flex-direction: column; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; padding: 2px 0 16px; text-align: center; }
.brand img { width: 100%; max-width: 70px; height: auto; display: block; }
.brand span { display: block; font-weight: 600; font-size: 11.5px; line-height: 1.2; color: var(--brand); }
.side nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.side nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; padding: 9px 2px 8px; border-radius: 10px; color: var(--ink); font-weight: 500; font-size: 12px; line-height: 1.2; text-align: center; }
.side nav a:hover { background: var(--brand-tint); }
.side nav a.active { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
.side nav a.signout { margin-top: auto; color: var(--muted); }

main { flex: 1; min-width: 0; max-width: 1120px; padding: 36px 40px 72px; }
main.flush { max-width: none; padding: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0 0 4px; }
.page-head p { margin: 0; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; }
.card h2:first-child { margin-top: 0; }

.btn { display: inline-block; white-space: nowrap; border: 1px solid var(--brand); background: var(--brand); color: #fff; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; line-height: 1.4; }
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.ghost { background: #fff; color: var(--brand-dark); border-color: var(--brand); }
.btn.ghost:hover { background: var(--brand-tint); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.copied { background: var(--ok-bg); border-color: var(--ok-line); color: #1e6b37; }

.notice { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin: 14px 0; background: #fff; }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice.ok { background: var(--ok-bg); border-color: var(--ok-line); transition: opacity .6s ease; }
.notice.ok.fading { opacity: 0; }
.notice.ok.gone { display: none; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.pills a { padding: 7px 16px; border: 1px solid #b9b2c2; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; background: #fff; white-space: nowrap; }
.pills a:hover { background: var(--brand-tint); }
.pills a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); font-size: 12px; font-weight: 600; white-space: nowrap; }
.empty { color: var(--muted); padding: 24px 0; }

/* Event list */
.ev-list { display: flex; flex-direction: column; gap: 10px; }
.ev-rows { list-style: none; margin: 0; padding: 0; }
.ev-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--line); }
.ev-row:hover { background: var(--bg); }
.ev-row-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 14px; text-decoration: none; color: inherit; }
.ev-row-main .dot { width: 10px; height: 10px; margin-top: 9px; }
.ev-row-what { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ev-row-title { font-size: 18px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-row-main:hover .ev-row-title { text-decoration: underline; }
.ev-row-when { font-size: 14px; color: var(--muted); }
.ev-row-stats { font-size: 13px; color: var(--muted); white-space: nowrap; flex: none; }
.ev-row-cal { display: flex; align-items: center; gap: 7px; width: auto; max-width: 260px; flex: none; min-width: 0; font-size: 14px; color: var(--muted); }
.ev-row-cal .icon { flex: none; }
.ev-row-cal-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }

.kebab { position: relative; display: inline-block; flex: none; }
.kebab > summary { list-style: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.kebab > summary::-webkit-details-marker { display: none; }
.kebab > summary:hover { background: var(--brand-tint); }
.kebab-menu { position: absolute; right: 0; top: 40px; z-index: 5; min-width: 150px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(31,26,36,.15); padding: 6px; }
.kebab-menu a, .menu-button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer; }
.kebab-menu a:hover, .menu-button:hover { background: var(--brand-tint); }
.kebab-menu form { margin: 0; }
.inline-form { display: inline; margin: 0; }
.notice-line { margin: 0; }
.notice-line + .notice-line { margin-top: 6px; }
.copy-status { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Month calendar (the admin's default view): edge to edge with thin lines, small grey weekdays and day numbers,
   today as a filled circle behind its number, neighbouring months hatched, and events as lines of text. */
.cal-bar { display: flex; align-items: center; gap: 12px; margin: 0; min-width: 0; }
.cal-nav { display: flex; align-items: center; gap: 2px; }
.cal-nav a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding-bottom: 3px; border-radius: 8px; text-decoration: none; font-size: 26px; line-height: 1; color: var(--ink); }
.cal-nav a:hover { background: var(--brand-tint); }
.cal-title { margin: 0; font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
table.mcal { table-layout: fixed; width: 100%; border-collapse: collapse; background: #fff; }
.mcal th { text-align: center; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 0; border-bottom: 1px solid var(--line); }
.mcal .dow-short { display: none; }
.mcal td { position: relative; height: 128px; padding: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; background: #fff; }
.mcal td:last-child { border-right: 0; }
/* Each cell's content box is a size container, so the event lines adapt to the cell's own width (table cells can't be containers). */
.mcal .cell { position: relative; container-type: inline-size; min-height: 128px; padding: 6px 6px 8px; }
/* Neighbouring months: a light diagonal hatch. */
.mcal td.out { background: repeating-linear-gradient(135deg, #fff 0 7px, #eef1f4 7px 8px); }
.mcal td.future:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.mcal .num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0 auto 4px; border-radius: 50%; font-size: 13px; color: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.mcal td.is-today .num { background: var(--brand); color: #fff; font-weight: 600; }
.cell-new, .cell-jump { position: absolute; inset: 0; z-index: 0; }
.cell-new:focus-visible, .cell-jump:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* The event lines are the links on a computer; the whole-cell jump is for phones only. */
.cell-jump { display: none; }
.cell-add { position: absolute; top: 5px; right: 5px; z-index: 2; width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 18px; line-height: 1; color: var(--brand-dark); opacity: 0; }
.mcal td:hover .cell-add, .cell-add:focus-visible { opacity: 1; }
.cell-add:hover, .cell-add:focus-visible { background: #fff; box-shadow: inset 0 0 0 1px var(--brand); }
.chips { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; pointer-events: none; }
.chips > *, .more[open] > * { min-width: 0; max-width: 100%; }
.chips a, .chips summary { pointer-events: auto; }
/* One event: a dot in its calendar's color, the time in grey, the title in dark text, cut short with an ellipsis. */
.chip-ev { display: flex; align-items: center; gap: 5px; padding: 2px 4px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 12.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; }
.chip-ev:hover, .chip-ev:focus-visible { background: var(--brand-tint); }
.chip-ev .dot { width: 7px; height: 7px; }
.chip-time { font-variant-numeric: tabular-nums; color: var(--muted); flex: none; }
.chip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
/* Past events: the title in the muted grey (5.8:1) and a paler dot. */
.chip-ev.past .chip-title { color: var(--muted); font-weight: 400; }
.chip-ev.past .dot { background: color-mix(in srgb, var(--chip) 45%, #fff); }
/* Always one line. In narrow cells the time goes (it stays in the line's label and tooltip), so the title keeps the room. */
@container (max-width: 120px) {
  .chip-ev .chip-time { display: none; }
}
.more summary { list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--brand-dark); padding: 2px 4px; width: max-content; }
.more summary::-webkit-details-marker { display: none; }
/* Open, the extra events come first and "Show fewer" goes under them (the summary is ordered after the details' content). */
.more[open] { display: flex; flex-direction: column; gap: 1px; }
.more[open] > summary { order: 1; }
.more .more-open, .more[open] .more-closed { display: none; }
.more[open] .more-open { display: inline; }
.mcal .day-count { display: none; }
.agenda { display: none; padding: 0 16px 24px; }
.agenda-day h3 { margin: 18px 0 6px; font-size: 15px; scroll-margin-top: 16px; }
.agenda-day h3.is-today { color: var(--brand-dark); }
.agenda-day h3:target { color: var(--brand-dark); }
.agenda-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.agenda-item:hover { background: var(--brand-tint); }
.agenda-item.past .agenda-title { color: var(--muted); }
.agenda-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--chip); flex: none; }
.dot.past { background: color-mix(in srgb, var(--chip) 45%, #fff); }
.arrow-off { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 26px; line-height: 1; color: var(--line); }
main.wide { max-width: none; }
@media (min-width: 761px) and (max-width: 1180px) {
  main.wide { padding: 28px 14px 64px; }
}
@media (max-width: 640px) {
  /* Phones: a compact grid with a dot per event (a day with events jumps to its agenda entry), and the agenda underneath. */
  .mcal td { height: 52px; text-align: center; }
  .mcal .cell { min-height: 52px; padding: 4px 2px; }
  .mcal .num { width: 24px; height: 24px; margin-bottom: 2px; }
  .mcal .dow-long { display: none; }
  .mcal .dow-short { display: inline; }
  .mcal .chips, .cell-add { display: none; }
  .cell-jump { display: block; }
  .mcal .day-count { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; pointer-events: none; }
  .mcal .day-count .dot { width: 6px; height: 6px; }
  .cal-bar { gap: 6px; }
  .cal-nav a, .arrow-off { width: 30px; }
  .cal-title { font-size: 16px; }
  .agenda { display: block; }
}

/* Event details: facts and sharing on the left, image, analytics and IDs on the right. */
.btn.small { padding: 5px 12px; font-size: 13px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; text-decoration: none; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--brand-tint); color: var(--brand-dark); }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-dark); text-decoration: underline; }
/* Event and calendar details: about 110px wider than other pages, and a thin line under the title row. */
main:has(.detail-grid) { max-width: 1230px; }
.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.detail-head h1 { margin: 0; font-size: 21px; font-weight: 400; }
.dot.big { width: 14px; height: 14px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.facts { list-style: none; margin: 0 0 20px; padding: 0 0 4px; }
.facts li { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0; }
.facts .icon { flex: none; color: var(--muted); margin-top: 1px; }
.facts-desc { white-space: pre-line; }
.lp-card-wrap { padding: 0; overflow: hidden; }
.lp-frame { border-bottom: 1px solid var(--line); background: #f3f4f7; }
.lp-bar { display: flex; align-items: center; gap: 14px; padding: 9px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.lp-dots { display: flex; gap: 6px; }
.lp-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.lp-dots i + i { background: #febc2e; }
.lp-dots i + i + i { background: #28c840; }
.lp-url { flex: 1; min-width: 0; padding: 4px 12px; border-radius: 6px; background: #f3f4f7; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-page { max-width: 360px; margin: 0 auto; padding: 16px 0 0; }
.lp-banner { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 5px; margin-bottom: 8px; }
.lp-card { background: #fff; border-radius: 5px 5px 0 0; padding: 14px 16px 12px; box-shadow: 0 2px 10px rgba(29, 48, 84, .08); }
.lp-title { margin: 0 0 6px; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500; color: #1d3054; }
.lp-when { margin: 0 0 6px; font-size: 10.5px; color: #333; }
.lp-desc { margin: 0 0 8px; font-size: 10px; color: #444; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lp-btn { display: inline-block; padding: 5px 10px; border-radius: 3px; background: var(--btn); color: var(--btn-ink, #fff); font-size: 10px; font-weight: 600; }
/* The calendar preview: about 320px tall, the calendar's card and the top of its Upcoming events card, on grey-blue. */
.lp-frame:has(.lp-page-cal) { background: #f2f4f8; }
.lp-page-cal { height: 280px; overflow: hidden; padding-top: 14px; }
.lp-card-cal { border-radius: 5px; }
.lp-upcoming { margin-top: 8px; padding: 10px 16px; }
.lp-up-title { margin: 0 0 6px; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 500; color: #1d3054; }
.lp-up-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 0; border-top: 1px solid #eceef2; font-size: 10px; color: #222; }
.lp-up-row:first-of-type { border-top: 0; }
.lp-up-row .dot { width: 6px; height: 6px; }
.lp-up-date { display: flex; flex-direction: column; align-items: center; width: 22px; flex: none; font-size: 8px; text-transform: uppercase; color: #5b6170; line-height: 1.1; }
.lp-up-date b { font-size: 12px; color: #1d3054; }
.lp-up-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--line); }
.lp-row:first-of-type { border-top: 0; }
.lp-label { width: 64px; flex: none; color: var(--muted); font-size: 14px; }
.lp-design { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; font-weight: 500; }
.lp-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.lp-link input { flex: 1; min-width: 0; max-width: none; background: var(--bg); font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
details.acc-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
details.acc-card > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 500; }
details.acc-card > summary::-webkit-details-marker { display: none; }
details.acc-card > summary .acc-toggle { margin-left: auto; color: var(--brand); transition: transform .15s; }
details.acc-card[open] > summary .acc-toggle { transform: rotate(180deg); }
.acc-icon.mail { color: #d93025; }
.acc-icon.link { color: #c58a00; }
.acc-icon.tag { color: #1e8e3e; }
.acc-card-body { padding: 0 20px 18px; }
.snippet-preview { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 26px 16px; background: #fff; margin-bottom: 8px; }
.snippet-copy { position: absolute; top: 8px; right: 8px; background: #f3f4f7; }
.view-html { margin: 0 0 12px; }
.view-html summary { cursor: pointer; font-size: 13px; color: var(--brand-dark); width: max-content; }
.view-html textarea { margin: 8px 0; max-width: none; font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--bg); }
.styles { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.styles a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; text-decoration: none; color: var(--ink); font-weight: 600; }
.styles a.on { background: var(--brand); color: #fff; }
.styles a:not(.on):hover { background: var(--brand-tint); }
.direct-links { list-style: none; margin: 0; padding: 0; }
.direct-links li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.direct-links img { flex: none; }
.direct-name { width: 128px; flex: none; font-weight: 500; white-space: nowrap; }
.direct-links input { flex: 1; min-width: 0; max-width: none; background: var(--bg); font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; padding: 6px 9px; }
.side-card { padding: 16px 18px; }
.side-card h2 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; }
.side-head a { font-size: 14px; text-decoration: none; }
.side-banner { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 6px; }
.side-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.side-stats dt { font-size: 12px; color: var(--muted); }
.side-stats dd { margin: 0; font-family: "Poppins", sans-serif; font-size: 22px; font-weight: 600; }
.ids { margin: 0; }
.ids div { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.ids dt { width: 92px; flex: none; font-size: 13px; color: var(--muted); }
.ids dd { margin: 0; min-width: 0; }
.ids code { display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 6px; background: var(--off, #f1eef4); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
@media (max-width: 1000px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .direct-links li { flex-wrap: wrap; }
  .direct-links input { flex-basis: 100%; order: 3; }
  .lp-row { flex-wrap: wrap; padding: 12px 14px; }
  .lp-link { flex-basis: 100%; }
}

/* Forms */
form .field { margin-bottom: 16px; }
label, legend { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=date], input[type=time], select, textarea {
  width: 100%; max-width: 560px; padding: 9px 11px; border: 1px solid #cfc8d6; border-radius: 8px; font: inherit; background: #fff; color: var(--ink);
}
textarea { max-width: 720px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-tint); border-color: var(--brand); }
.form-card { padding: 24px 28px; max-width: 820px; }
.form-card h2 { margin: 0 0 16px; font-size: 18px; }
.grid-when { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; max-width: 720px; }
.grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.grid-two.cards { gap: 16px; }
.grid-two.cards .card { margin: 0; }
.field-error { color: var(--error); font-size: 13px; margin: 4px 0 0; }
.hint { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.preset-tiles { display: flex; gap: 14px; flex-wrap: wrap; }
.preset-tile { position: relative; width: 240px; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; margin: 0; font-weight: 500; background: #fff; }
.preset-tile:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.preset-tile input { position: absolute; top: 10px; left: 10px; accent-color: var(--brand); }
.preset-tile img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.preset-name { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-family: "Poppins", sans-serif; }
.swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.design-section { margin: 0 0 28px; }
.design-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.design-head h2 { margin: 0; font-size: 18px; font-weight: 500; }
.design-grid { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.design-card { width: 240px; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.design-card:hover { border-color: var(--brand); }
.design-card.archived { opacity: .6; }
.design-card a { display: block; color: inherit; text-decoration: none; }
.design-card img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.design-archive { margin: 14px 0 0; }
.ev-pop { position: fixed; z-index: 30; width: 520px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; padding: 8px 20px 18px; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(31, 26, 36, .22), 0 2px 8px rgba(31, 26, 36, .1); }
.ev-pop[hidden] { display: none; }
.ev-pop-bar { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: 0 -10px 4px; }
.ev-pop-title { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 4px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.ev-pop-title .dot { margin-top: 7px; }
.ev-pop-when { margin: 0 0 14px 26px; font-size: 14px; color: var(--muted); }
.ev-pop-row { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 12px; font-size: 14.5px; }
.ev-pop-row > svg { flex: none; color: var(--muted); margin-top: 1px; }
.ev-pop-adds { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 16px; background: #f1f4f6; }
.ev-pop-adds svg { color: #2e9e6a; }
.ev-pop-desc { color: var(--muted); }
.ev-pop .kebab-menu { right: 0; }

/* The event form: a big title, one row for the dates and times, then a line per setting. */
.ef { max-width: 820px; padding: 36px 44px 32px; }
.ef-head { margin-bottom: 22px; }
.ef-title { display: flex; align-items: center; gap: 14px; }
.ef-title input[type=color].swatch { width: 30px; height: 30px; }
.ef-title-input { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; font-size: 26px; padding: 4px 0; }
.ef-title-input:focus { outline: 0; border-bottom-color: var(--brand); }
.ef .use-cal-color { margin: 6px 0 0 44px; font-size: 13px; }
.ef-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 30px 0 16px; }
.ef-when input { width: auto; background: #f1f4f6; border: 0; border-radius: 8px; padding: 14px 16px; font: inherit; }
body.admin .ef .ef-when input { border: 0; }
.ef-to { color: var(--muted); }
.ef-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 26px 0; }
.ef-line label, .ef-line .ef-label { display: inline; margin: 0; font-size: inherit; font-weight: 400; }
.ef-check { display: inline-flex !important; align-items: center; gap: 8px; margin-right: 12px !important; }
.ef-check input { width: 18px; height: 18px; }
.ef-when.all-day input[type=time], .ef-when.all-day .ef-to { display: none; }
.ef-line > svg { color: var(--muted); flex: none; }
.ef-line select { width: auto; max-width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1em; font-weight: 500; padding: 4px 4px; cursor: pointer; }
.ef-description { display: block; width: 100%; min-height: 190px; margin: 28px 0; border: 1px solid var(--color-border, var(--line)); border-radius: 10px; padding: 18px; font: inherit; line-height: 1.55; resize: vertical; box-sizing: border-box; }
/* Light lines: the admin's default control borders are a dark slate, so the form lightens them. */
body.admin .ef :is(input[type=text], input[type=email], input[type=date], input[type=time], select, textarea) { border-color: var(--color-border, #dbe3e8); }
body.admin .ef :is(input, select, textarea):focus { border-color: var(--color-border-focus); outline: 0; box-shadow: 0 0 0 3px rgba(2, 127, 132, .14); }
body.admin .ef .btn.ghost { border-color: var(--color-border, #dbe3e8); }
body.admin .ef .ef-title-input { border-color: transparent; }
body.admin .ef .ef-title-input:focus { box-shadow: none; border-color: transparent transparent var(--color-border-focus); }
body.admin .ef .ef-line select { border: 0; }
body.admin .ef .ef-line select:focus { box-shadow: none; outline: 0; background: #f1f4f6; border-radius: 6px; }
.ef-float { position: relative; }
.ef-float label { position: absolute; top: -9px; left: 12px; z-index: 1; background: #fff; padding: 0 4px; font-size: 12px; color: var(--muted); }
.ef-float input { width: 100%; box-sizing: border-box; padding: 16px 14px; border: 1px solid var(--color-border, var(--line)); border-radius: 10px; font: inherit; }
.ef-grow { flex: 1; min-width: 200px; }
.ef-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 30px 0 12px; }
.ef-pin-wrap { position: relative; flex: none; }
.ef-pin { display: inline-flex; align-items: center; gap: 2px; padding: 14px 12px; border: 1px solid var(--color-border, var(--line)); border-radius: 10px; background: #fff; color: #d9480f; cursor: pointer; }
.loc-pop { position: absolute; right: 0; top: 54px; z-index: 20; width: 420px; max-width: 86vw; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(31, 26, 36, .22), 0 2px 8px rgba(31, 26, 36, .1); }
.loc-pop[hidden] { display: none; }
.loc-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.loc-title { flex: 1; font-weight: 500; }
.loc-create { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; border-radius: 8px; background: #eef2f6; font: inherit; cursor: pointer; }
.loc-new { display: grid; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.loc-new[hidden] { display: none; }
.loc-new input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.loc-list { list-style: none; margin: 0; padding: 6px; max-height: 260px; overflow: auto; }
.loc-list li { display: flex; align-items: center; }
.loc-pick { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 10px 12px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; }
.loc-pick:hover { background: var(--brand-tint); }
.loc-name { font-weight: 500; }
.loc-text { font-size: 13px; color: var(--muted); }
.loc-empty { margin: 0; padding: 44px 20px; text-align: center; color: var(--muted); }
.loc-empty[hidden] { display: none; }
.ef-bar { position: sticky; bottom: 0; z-index: 10; display: flex; gap: 12px; margin: 36px -44px -32px; padding: 18px 44px; background: #fff; border-top: 1px solid var(--color-border, var(--line)); border-radius: 0 0 14px 14px; }
/* The detail pages (event and calendar): a white page, roomier, with light lines. */
body.admin:has(main.plain) { background: #fff; }
main.plain { max-width: 1240px; padding: 34px 44px 72px; }
main.plain .crumbs { margin-bottom: 12px; font-size: 13.5px; }
main.plain .detail-head { gap: 14px; margin-bottom: 24px; padding-bottom: 18px; border-bottom-color: var(--color-border, #dbe3e8); }
main.plain .detail-head h1 { font-size: 24px; }
main.plain .detail-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; }
main.plain .facts { margin-bottom: 26px; }
main.plain .facts li { gap: 18px; padding: 8px 0; font-size: 15.5px; line-height: 1.55; }
main.plain .card { margin-bottom: 18px; border-color: var(--color-border, #dbe3e8); border-radius: 12px; box-shadow: 0 1px 3px rgba(31, 41, 55, .04); }
main.plain .side-card { padding: 20px 22px; }
main.plain .side-card h2 { margin-bottom: 14px; font-size: 15.5px; }
main.plain .lp-row { gap: 16px; padding: 13px 20px; border-top-color: var(--color-border, #dbe3e8); }
main.plain .lp-frame, main.plain .lp-bar { border-color: var(--color-border, #dbe3e8); }
main.plain .acc-card-body { padding: 0 22px 20px; }
main.plain .acc-card > summary { padding: 16px 22px; }
@media (max-width: 1000px) {
  main.plain { padding: 24px 20px 64px; }
  main.plain .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* One line only: the dropdown has the border; its form wrapper has none (the older .lp-design rule drew a second box around it). */
.lp-design { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; }
.lp-design select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; background: #fff; cursor: pointer; }
@media (max-width: 640px) {
  .ef-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ev-pop { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; }
}
.slug-input { display: flex; align-items: center; max-width: 560px; border: 1px solid #cfc8d6; border-radius: 8px; background: #fff; overflow: hidden; }
.slug-input span { padding: 9px 4px 9px 11px; color: var(--muted); background: var(--bg); border-right: 1px solid var(--line); white-space: nowrap; }
.slug-input input { border: 0; border-radius: 0; }

/* Share panel */
.share-block { padding: 16px 0; border-top: 1px solid var(--line); }
.share-block:first-of-type { border-top: 0; padding-top: 4px; }
.copy-row { display: flex; gap: 10px; max-width: 720px; }
.copy-row input { flex: 1; max-width: none; background: var(--bg); }
.source-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.source-row input { width: 200px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.chip:hover, .chip.on { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.snippet-preview { border: 1px dashed #cfc8d6; border-radius: 10px; padding: 10px 16px; background: #fff; max-width: 720px; margin-bottom: 12px; }

/* Analytics */
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; }
.stat-num { font-size: 28px; font-weight: 600; line-height: 1.2; }
.stat-label { color: var(--muted); font-size: 13px; white-space: nowrap; }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.legend { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.key-views, .chart-views { background: #c99ae0; fill: #c99ae0; }
.footnote { margin: -4px 0 16px; max-width: 760px; }
.key-adds, .chart-adds { background: var(--brand); fill: var(--brand); }
.chart { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
/* Axis labels are HTML over the SVG, positioned by percentage, so they keep a real 11px size at any chart width. */
.chart-wrap { position: relative; }
.chart-labels { position: absolute; inset: 0; pointer-events: none; }
.chart-axis { position: absolute; color: var(--muted); font-size: 11px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-y { left: 0; text-align: right; transform: translateY(-50%); }
.chart-x { transform: translateX(-50%); }
.chart-hit { fill: transparent; }
.chart g:hover .chart-hit { fill: #f6e9fb80; }
table.bars { width: 100%; border-collapse: collapse; }
table.bars th { text-align: left; font-weight: 500; padding: 6px 10px 6px 0; white-space: nowrap; width: 1%; }
table.bars td { padding: 6px 0 6px 10px; }
.bar-cell { width: 100%; }
.bar { display: block; height: 10px; border-radius: 5px; background: var(--brand); min-width: 0; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .grid-two, .grid-two.cards { grid-template-columns: 1fr; }
  .grid-when { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  /* Phones: the rail becomes a top bar, the brand on one line and the four items in a row under it. */
  .side { width: auto; height: auto; position: static; align-self: stretch; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px 6px; }
  .brand { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 4px 8px; }
  .brand img { max-width: 96px; }
  .brand span { font-size: 15px; }
  .side nav { flex-direction: row; gap: 2px; }
  .side nav a { flex: 1; padding: 7px 2px 6px; }
  .side nav a.signout { margin-top: 0; }
  main { padding: 22px 16px 56px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .copy-row { flex-wrap: wrap; }
}

/* ---------- Public event page (phone first) ---------- */
/* The event page: a rounded banner card on light grey, then a white card with a soft shadow. */
body.public { background: var(--pg-bg); font-family: var(--pg-page-font, Montserrat, system-ui, sans-serif); --btn: var(--brand); --btn-dark: var(--brand-dark); --navy: var(--pg-title); }
.ev { max-width: 800px; margin: 0 auto; padding: 16px 16px 48px; flex: none; }
.ev-banner { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 8px; margin-bottom: 14px; background: var(--brand); }
.ev-card { background: var(--card); border-radius: 8px; padding: 30px 24px 18px; box-shadow: 0 4px 22px var(--pg-shadow); color: var(--pg-ink); }
.ev-title { font-size: 30px; line-height: 1.22; margin: 0 0 18px; color: var(--navy); font-family: var(--pg-title-font, "Poppins", "Montserrat", system-ui, sans-serif); font-weight: 500; }
.ev-dateline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
/* The date takes the line it needs; the share button and zone chip sit beside it when there's room, otherwise under it. */
.ev-when { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.5; flex: 1 1 300px; }
.ev-when .icon { flex: none; margin-top: 1px; color: var(--pg-ink); }
.ev-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ev-share { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--pg-icon); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ev-share:hover, .ev-share:focus-visible { background: var(--pg-hover); }
.ev-tzchip { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; border: 1px solid var(--pg-line2); border-radius: 6px; background: var(--pg-card); box-shadow: 0 1px 3px rgba(29, 48, 84, .08); font: inherit; color: var(--pg-chip-ink); text-align: left; cursor: pointer; }
.ev-tzchip:disabled { cursor: default; }
.ev-tzchip:not(:disabled):hover, .ev-tzchip:focus-visible { border-color: var(--btn); }
.ev-tzchip .icon { flex: none; }
.ev-tzchip-label { display: block; font-size: 11px; color: var(--pg-label); line-height: 1.2; }
.ev-tzchip-zone { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.ev-status { min-height: 0; margin: 6px 0 0 30px; font-size: 13px; color: var(--muted); }
.ev-status:empty { margin: 0; }
.ev-desc { white-space: pre-line; margin: 22px 0 0; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.ev-ended { margin: 22px 0 0; padding: 12px 16px; border-radius: 8px; background: var(--pg-soft); color: var(--muted); }

.ev-add { margin: 24px 0 6px; }
.ev-auto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; padding: 12px 14px; border-radius: 8px; background: var(--brand-tint); font-weight: 500; }
.ev-auto-cancel { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--pg-link-strong); text-decoration: underline; cursor: pointer; white-space: nowrap; }
/* One "Add to Calendar" button; its menu is a <details> disclosure, so it works without the script. */
.atc { position: relative; display: inline-block; }
.atc-btn { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 5px; background: var(--btn); color: var(--btn-ink, #fff); font-family: "Poppins", "Montserrat", system-ui, sans-serif; font-weight: 500; font-size: 15px; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 6px rgba(29, 48, 84, .12); user-select: none; }
.atc-btn::-webkit-details-marker { display: none; }
.atc-btn:hover, .atc-btn:focus-visible { background: var(--btn-dark); }
.atc-btn:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: 2px; }
/* Compact: about 230px tall. It opens below the button, or above it (.up) when there's no room below. */
.atc-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; min-width: 230px; padding: 5px; background: var(--pg-menu); border-radius: 8px; box-shadow: 0 10px 34px rgba(29, 48, 84, .2), 0 1px 3px rgba(29, 48, 84, .1); }
.atc-menu.up { top: auto; bottom: calc(100% + 4px); }
.atc-list { list-style: none; margin: 0; padding: 0; }
.atc-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; color: var(--pg-menu-ink); text-decoration: none; font-size: 14px; font-weight: 400; white-space: nowrap; }
.atc-item img { flex: none; width: 20px; height: 20px; }
.atc-item:hover, .atc-item:focus-visible { background: var(--pg-menu-hover); outline: none; }
.atc-item:focus-visible { box-shadow: inset 0 0 0 2px var(--btn); }
/* The remembered calendar: semibold with a small check, nothing louder. */
.atc-item.chosen .atc-name { font-weight: 600; }
.atc-item .atc-check { display: none; color: var(--btn); }
.atc-item.chosen .atc-check { display: block; margin-left: 10px; }
.atc-online { color: var(--pg-online); font-style: italic; font-size: 12px; font-weight: 400; }
.atc-remember { display: flex; align-items: center; gap: 8px; margin: 3px 0 0; padding: 7px 10px 4px; border-top: 1px solid var(--pg-line); font-weight: 400; font-size: 12.5px; color: var(--pg-muted); cursor: pointer; }
.atc-remember input { width: 16px; height: 16px; accent-color: var(--btn); margin: 0; }
.ev-hint { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--warn-bg); border: 1px solid var(--warn-line); font-size: 14px; }

.ev-meta { margin-top: 22px; }
.ev-meta-row { display: flex; align-items: center; gap: 14px; margin: 0; padding: 15px 0; border-top: 1px solid var(--pg-line); font-size: 15px; overflow-wrap: anywhere; }
.ev-meta-row .icon { flex: none; color: var(--pg-ink); }
.ev-meta-row a { color: var(--pg-link); }
.ev-message { text-align: center; margin-top: 10vh; }
.ev-logo { width: 140px; height: auto; margin-bottom: 16px; }

@media (max-width: 559px) {
  /* Phones: the tools go under the date, zone chip on the left and share on the right. */
  .ev-tools { flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
  .ev-tzchip { order: 1; }
  .ev-share { order: 2; }
}
@media (min-width: 560px) {
  .ev { padding-top: 20px; }
  .ev-card { padding: 38px 38px 22px; }
  .ev-title { font-size: 34px; }
}

/* ---------- Calendars and images (admin) ---------- */
.cal-panel-list { list-style: none; margin: 0; padding: 0; }
.cal-tick { flex: none; display: inline-flex; text-decoration: none; border-radius: 5px; }
.cal-tick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tick-box { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--chip); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: #fff; font-weight: 700; }
.cal-tick.on .tick-box { background: var(--chip); }
.cal-panel-name { min-width: 0; color: var(--ink); text-decoration: none; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-panel-name:hover { color: var(--brand-dark); text-decoration: underline; }
.stats.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Long tile labels wrap inside their tile instead of running into its edge. */
.stats .stat-label { white-space: normal; overflow-wrap: break-word; }
@media (max-width: 760px) {
  .stats.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.image-card .side-banner { margin-bottom: 8px; }
.side-image { position: relative; margin-bottom: 8px; }
.side-image .side-banner { margin-bottom: 0; }
.side-banner[hidden] { display: none; }
.side-banner-empty { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--color-border, var(--line)); background: #f6f8fa; color: var(--muted); font-size: 14px; }
.trash-form { position: absolute; top: 8px; right: 8px; margin: 0; }
.trash-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #f1c5c5; border-radius: 50%; background: #fff; color: #c0392b; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.trash-btn:hover { background: #fdeeee; }
.image-form { display: inline-flex; gap: 8px; align-items: center; margin: 4px 8px 6px 0; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.file-btn:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.js [data-no-js] { display: none; }
.btn.danger { color: #b42318; border-color: #b42318; background: #fff; }
.btn.danger:hover { background: #fdecea; }
.cropper { margin: 10px 0; }
.crop-canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; border-radius: 6px; background: var(--bg); cursor: grab; touch-action: none; }
.crop-canvas:active { cursor: grabbing; }
.crop-zoom { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-weight: 500; font-size: 13px; }
.crop-zoom input { flex: 1; accent-color: var(--brand); }

/* ---------- Calendar page (public) ---------- */
.ev-sub-note { margin: 10px 0 0; font-size: 13px; color: var(--pg-muted); }
.yahoo-panel { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--pg-line); border-radius: 8px; background: var(--pg-yahoo); font-size: 14px; }
.yahoo-panel p { margin: 0 0 8px; }
/* The calendar page: light grey-blue behind two white cards. */
body.public.cal-page { --pg-bg: #f2f4f8; }
/* No overflow clipping on card 1: the Follow Calendar menu opens over the cards below it. */
.cal-card { padding-bottom: 0; position: relative; z-index: 2; }
.cal-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cal-card-head .ev-title { margin-bottom: 12px; min-width: 0; overflow-wrap: anywhere; }
.cal-card-head .ev-share { margin: -4px -8px 0 0; flex: none; }
.cal-count { margin: 0; }
.cal-card .ev-add { margin: 22px 0 22px; }
.cal-card .ev-add:last-child { margin-bottom: 0; padding-bottom: 22px; }
/* The footer strip: a light band across the bottom of card 1. */
/* flow-root keeps the open text's last margin inside the strip, off the card's edge. */
.cal-about { display: flow-root; margin: 0 -24px; padding: 0 24px; background: var(--pg-strip); border-top: 1px solid var(--pg-line); border-radius: 0 0 8px 8px; font-size: 14px; color: var(--pg-about-ink); }
.cal-about summary { list-style: none; cursor: pointer; padding: 14px 0; font-weight: 500; display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.cal-about summary::-webkit-details-marker { display: none; }
.cal-about summary .icon { flex: none; color: var(--pg-about-ink); }
.cal-about-label { text-decoration: underline; text-underline-offset: 3px; }
.cal-about .cal-about-chev { transition: transform .15s; }
.cal-about[open] .cal-about-chev { transform: rotate(180deg); }
.cal-about p { margin: 0 0 12px 30px; line-height: 1.6; }
.cal-about p:last-child { margin-bottom: 16px; }
@media (min-width: 560px) {
  .cal-about { margin: 0 -38px; padding: 0 38px; }
}
.cal-upcoming { margin-top: 24px; padding-top: 24px; }
.cal-upcoming-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 8px; }
.cal-upcoming h2 { margin: 0; font-size: 20px; color: var(--navy); font-weight: 500; }
.cal-tzchip { cursor: default; }
.cal-empty { color: var(--pg-muted); font-size: 15px; }
.cal-events { list-style: none; margin: 0; padding: 0; }
.cal-event { display: flex; gap: 16px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--pg-line); color: var(--pg-ink); text-decoration: none; }
.cal-events li:first-child .cal-event { border-top: 0; }
.cal-event:hover .cal-event-title { color: var(--pg-link-strong); text-decoration: underline; }
.cal-event > .dot { width: 10px; height: 10px; }
.cal-event-date { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.cal-event-day { font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 600; color: var(--navy); }
.cal-event-month { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--pg-muted); font-weight: 600; }
.cal-event-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-event-title { font-weight: 500; font-size: 16px; }
.cal-event-when { font-size: 14px; color: var(--pg-when); }

/* ---------- Page themes (event and calendar pages) ----------
   The pages' colors are variables. These are the light ones (a page's design can set --pg-bg, --pg-link and the fonts inline on the
   body); .pg-dark and .pg-auto (dark when the visitor's device is) replace them. Kept after the calendar page's rules on purpose. */
body.public { --pg-bg: #fff; --pg-card: #fff; --pg-ink: #111; --pg-title: #1d3054; --pg-muted: #5b6170; --pg-line: #eceef2; --pg-line2: #d7dae1; --pg-soft: #f3f4f7; --pg-hover: #f0f1f4; --pg-strip: #f6f7fa; --pg-shadow: rgba(29, 48, 84, .09); --pg-menu: #fff; --pg-menu-hover: #f2f3f7; --pg-link: var(--pg-link-set, var(--btn)); --pg-link-strong: var(--pg-link-set, var(--btn-dark)); --pg-desc-link: var(--pg-link-set, var(--brand-dark)); --pg-menu-ink: #1f2430; --pg-icon: #333; --pg-chip-ink: #222; --pg-about-ink: #3d4350; --pg-label: #555; --pg-when: #4a5060; --pg-yahoo: #fafbfc; --pg-online: #8a8f99; }
body.public.cal-page { --pg-bg: #f2f4f8; }
.ev-desc a, .cal-desc a { color: var(--pg-desc-link); }
body.public.pg-dark { --pg-bg: #14161a; --pg-card: #1e2227; --pg-ink: #f2f3f5; --pg-title: #ffffff; --pg-muted: #aab1bc; --pg-line: #2e343b; --pg-line2: #3d444d; --pg-soft: #272c33; --pg-hover: #2b3139; --pg-strip: #232830; --pg-shadow: rgba(0, 0, 0, .45); --pg-menu: #262b32; --pg-menu-hover: #333a43; --pg-foot: #aab1bc; --pg-link: var(--pg-link-set, color-mix(in srgb, var(--btn) 40%, white)); --pg-link-strong: var(--pg-link); --pg-desc-link: var(--pg-link); --pg-menu-ink: #f2f3f5; --pg-icon: #f2f3f5; --pg-chip-ink: #f2f3f5; --pg-about-ink: #f2f3f5; --pg-label: #aab1bc; --pg-when: #aab1bc; --pg-yahoo: #232830; --pg-online: #aab1bc; --card: var(--pg-card); --muted: var(--pg-muted); --line: var(--pg-line); --brand-tint: #2a2f38; --warn-bg: #3a2e1c; --warn-line: #8a6a2a; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  body.public.pg-auto { --pg-bg: #14161a; --pg-card: #1e2227; --pg-ink: #f2f3f5; --pg-title: #ffffff; --pg-muted: #aab1bc; --pg-line: #2e343b; --pg-line2: #3d444d; --pg-soft: #272c33; --pg-hover: #2b3139; --pg-strip: #232830; --pg-shadow: rgba(0, 0, 0, .45); --pg-menu: #262b32; --pg-menu-hover: #333a43; --pg-foot: #aab1bc; --pg-link: color-mix(in srgb, var(--btn) 40%, white); --pg-link-strong: var(--pg-link); --pg-desc-link: var(--pg-link); --pg-menu-ink: #f2f3f5; --pg-icon: #f2f3f5; --pg-chip-ink: #f2f3f5; --pg-about-ink: #f2f3f5; --pg-label: #aab1bc; --pg-when: #aab1bc; --pg-yahoo: #232830; --pg-online: #aab1bc; --card: var(--pg-card); --muted: var(--pg-muted); --line: var(--pg-line); --brand-tint: #2a2f38; --warn-bg: #3a2e1c; --warn-line: #8a6a2a; color-scheme: dark; }
}

body.public.pg-dark .atc-item .cal-kind, body.public.pg-dark .atc-item .atc-check { color: var(--pg-link); }
body.public.pg-dark .atc-item:focus-visible { box-shadow: inset 0 0 0 2px var(--pg-link); }
body.public.pg-dark .copy-row input { background: var(--pg-card); color: var(--pg-ink); border-color: var(--pg-line2); }
body.public.pg-dark .btn.ghost { background: var(--pg-card); color: var(--pg-ink); border-color: var(--pg-line2); }
@media (prefers-color-scheme: dark) {
  body.public.pg-auto .atc-item .cal-kind, body.public.pg-auto .atc-item .atc-check { color: var(--pg-link); }
  body.public.pg-auto .atc-item:focus-visible { box-shadow: inset 0 0 0 2px var(--pg-link); }
  body.public.pg-auto .copy-row input { background: var(--pg-card); color: var(--pg-ink); border-color: var(--pg-line2); }
  body.public.pg-auto .btn.ghost { background: var(--pg-card); color: var(--pg-ink); border-color: var(--pg-line2); }
}
/* A browser without color-mix gets a plain light link on the dark cards. */
@supports not (color: color-mix(in srgb, red, blue)) {
  body.public.pg-dark { --pg-link: var(--pg-link-set, #d9b8ff); }
  @media (prefers-color-scheme: dark) { body.public.pg-auto { --pg-link: #d9b8ff; } }
}

/* ---------- The admin frame: design tokens ----------
   The admin is staff UI, so it uses the shared admin frame: semantic color tokens
   named like the decision's, and Figtree. Customer-facing things inside the admin keep the business's colors: calendar chips
   (each event's preset color) and the previews of the public page and the email snippet. Moving to the real design system later
   is a rename of these variables, not a rewrite. */
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("/fonts/figtree-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("/fonts/figtree-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url("/fonts/figtree-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url("/fonts/figtree-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("/fonts/figtree-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("/fonts/figtree-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body.admin {
  /* Semantic tokens (light mode), from the decision's palette. */
  --color-canvas: #F6F9FA;          /* neutral.50 */
  --color-surface: #FFFFFF;
  --color-surface-sunken: #EDF1F4;  /* neutral.100 */
  --color-hover: #EDF1F4;           /* neutral.100 */
  --color-selected: #EEFBFB;        /* teal.50 */
  --color-fg: #36454F;              /* brand charcoal, 8.7:1 or more on every surface */
  --color-fg-muted: #505F68;        /* neutral.700, 5.8:1 */
  --color-fg-link: #00686D;         /* teal.700, 5.8:1 */
  --color-fg-accent: #00686D;
  --color-fg-on-primary: #FFFFFF;
  --color-fg-on-brand: #20282D;     /* neutral.950, on brand teal or orange */
  --color-fg-danger: #B42323;       /* red.700 */
  --color-fg-success: #0B6C31;      /* green.700 */
  --color-fg-warning: #914A03;      /* orange.700 */
  --color-border: #DBE3E8;          /* neutral.200, decorative dividers */
  --color-border-control: #C9D3D9;  /* light (was brand slate #6B8488, 3.5:1; no heavy lines in the admin) */
  --color-border-focus: #027F84;    /* teal.600 */
  --color-border-selected: #027F84;
  --color-primary: #027F84;         /* teal.600 under white text, 4.8:1 */
  --color-primary-hover: #00686D;   /* teal.700 */
  --color-primary-pressed: #045255; /* teal.800 */
  --color-danger: #D13935;          /* red.600 under white text */
  --color-danger-hover: #B42323;
  --color-danger-subtle: #FEEEEC;   /* red.100 */
  --color-success-subtle: #E1F7E5;  /* green.100 */
  --color-warning-subtle: #FFEEE3;  /* orange.100 */
  --color-brand-teal: #00ADB5;
  --color-brand-orange: #F6841D;    /* attention badges only, behind neutral.950 text */
  --color-chart-1: #82939D;         /* neutral.500, 3.2:1: views */
  --color-chart-2: #00686D;         /* teal.700, 6.6:1: adds */

  /* The stylesheet's older names, pointed at the tokens, so every admin rule follows the frame. */
  --brand: var(--color-primary);
  --brand-dark: var(--color-fg-link);
  --brand-tint: var(--color-selected);
  --ink: var(--color-fg);
  --muted: var(--color-fg-muted);
  --line: var(--color-border);
  --bg: var(--color-canvas);
  --card: var(--color-surface);
  --off: var(--color-surface-sunken);
  --warn-bg: var(--color-warning-subtle);
  --warn-line: #B25A00;             /* orange.600: a visible edge for warnings */
  --ok-bg: var(--color-success-subtle);
  --ok-line: #258344;               /* green.600 */
  --error: var(--color-fg-danger);

  background: var(--color-canvas);
  color: var(--color-fg);
}
body.admin,
body.admin :is(h1, h2, h3, legend, .brand span, nav a, .btn, .pill, .pills a, .stat-num, .chip, .ev-item-day, .preset-name, .side-stats dd, details.acc-card > summary, .cal-title) {
  font-family: "Figtree", system-ui, sans-serif;
}
body.admin h1, body.admin h2, body.admin h3 { font-weight: 600; }
body.admin .detail-head h1 { font-weight: 400; }
body.admin .brand span { color: var(--color-fg); font-weight: 600; }
body.admin a { color: var(--color-fg-link); }
/* Links that are rows, menu items or chips keep their own text color. */
body.admin :is(.ev-row-main, .agenda-item, .kebab-menu a, .cal-panel-name, .chip-ev, .select-all, .seg a) { color: var(--color-fg); }
body.admin :is(.btn, .side nav a, .pills a, .seg a, .ev-row-main, .kebab-menu a, .menu-button, .cal-panel-name, .chip-ev, .agenda-item, .crumbs a, .text-button, .select-all) { text-decoration: none; }
body.admin .side nav a { color: var(--color-fg); }
body.admin .side nav a.active { color: var(--color-fg-link); }
body.admin .side nav a.signout { color: var(--color-fg-muted); }
body.admin .btn { color: var(--color-fg-on-primary); background: var(--color-primary); border-color: var(--color-primary); font-weight: 500; }
body.admin .btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
body.admin .btn:active { background: var(--color-primary-pressed); }
body.admin .btn.ghost { background: var(--color-surface); color: var(--color-fg-link); border-color: var(--color-border-control); }
body.admin .btn.ghost:hover { background: var(--color-selected); border-color: var(--color-primary); }
body.admin .btn.danger { color: var(--color-fg-danger); border-color: var(--color-fg-danger); background: var(--color-surface); }
body.admin .btn.danger:hover { background: var(--color-danger-subtle); }
body.admin .btn.copied { background: var(--color-success-subtle); border-color: var(--ok-line); color: var(--color-fg-success); }
body.admin :is(input[type=text], input[type=email], input[type=date], input[type=time], select, textarea), body.admin .slug-input { border-color: var(--color-border-control); color: var(--color-fg); }
body.admin .slug-input input { border: 0; }
body.admin :is(input, select, textarea, button, a, summary):focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
body.admin :is(input, select, textarea):focus { border-color: var(--color-border-focus); outline: 2px solid var(--color-border-focus); outline-offset: 0; }
body.admin .pills a { border-color: var(--color-border-control); color: var(--color-fg); }
body.admin .pills a.on { background: var(--color-fg); border-color: var(--color-fg); color: var(--color-surface); }
body.admin .pill { background: var(--color-selected); color: var(--color-fg-link); }
body.admin .field-error { color: var(--color-fg-danger); }
body.admin .chip:hover, body.admin .chip.on { color: var(--color-fg-link); }
body.admin .styles a.on { background: var(--color-primary); color: var(--color-fg-on-primary); }
body.admin .key-views, body.admin .chart-views { background: var(--color-chart-1); fill: var(--color-chart-1); }
body.admin .key-adds, body.admin .chart-adds { background: var(--color-chart-2); fill: var(--color-chart-2); }
body.admin .chart g:hover .chart-hit { fill: rgba(130, 147, 157, .12); }
body.admin .preset-tile input, body.admin .crop-zoom input, body.admin input[type=checkbox] { accent-color: var(--color-primary); }
body.admin .acc-icon.mail { color: var(--color-fg-danger); }
body.admin .acc-icon.link { color: var(--color-fg-warning); }
body.admin .acc-icon.tag { color: var(--color-fg-success); }
body.admin .acc-icon.button, body.admin .acc-icon.embed { color: var(--color-fg-link); }
/* The calendar grid: neutral surfaces from the frame; today is the frame's selected tint with a teal outline. */
/* The calendar grid: thin frame dividers, the hatch in the frame's sunken grey, today's circle in the primary teal (4.8:1 under white). */
body.admin .mcal td.out { background: repeating-linear-gradient(135deg, var(--color-surface) 0 7px, var(--color-surface-sunken) 7px 8px); }
body.admin .mcal td.future:hover { box-shadow: inset 0 0 0 1px var(--color-border-focus); }
body.admin .mcal td.is-today .num { background: var(--color-primary); color: var(--color-fg-on-primary); }
/* The customer-facing previews keep the business's look, including its fonts. */
body.admin .lp-title { font-family: "Poppins", sans-serif; }
body.admin .lp-page, body.admin .snippet-preview { font-family: "Montserrat", system-ui, sans-serif; }
@font-face { font-family: "Mulish"; font-weight: 400; font-display: swap; src: url("/fonts/mulish-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mulish"; font-weight: 400; font-display: swap; src: url("/fonts/mulish-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mulish"; font-weight: 700; font-display: swap; src: url("/fonts/mulish-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mulish"; font-weight: 700; font-display: swap; src: url("/fonts/mulish-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Merriweather"; font-weight: 400; font-display: swap; src: url("/fonts/merriweather-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Merriweather"; font-weight: 400; font-display: swap; src: url("/fonts/merriweather-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Merriweather"; font-weight: 700; font-display: swap; src: url("/fonts/merriweather-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Merriweather"; font-weight: 700; font-display: swap; src: url("/fonts/merriweather-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Calendars panel details, calendar colors, confirmations ---------- */
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-dark); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.kebab-menu { min-width: 170px; }

/* ---------- The events dashboard (month and list views) ----------
   Beside the rail: a full-height Calendars panel and the Events area, no gaps and no cards. Two bands run across both, the
   header (80px) and the toolbar (60px, thin lines above and below), so their dividers line up. */
/* Wider than 900px the dashboard is exactly the window's height: the bands stay put, and the panel's rows and the events scroll
   inside, so the toolbar never shifts when one view needs a scrollbar and the other doesn't. */
.dash { display: flex; height: 100vh; background: var(--card); }
.dash-panel { position: relative; width: 304px; flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--card); }
.dash-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
main.flush { background: var(--card); }
.dash-head { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; }
.dash-head h1, .dash-head h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; }
.dash-tool { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dash-tool-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.dash-panel .dash-head { padding-right: 34px; }  /* room for the collapse handle on the divider */
.text-button { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; margin-right: -8px; border-radius: 8px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--brand-dark); white-space: nowrap; }
.text-button:hover { background: var(--brand-tint); }
.dash-notice { padding: 12px 24px 0; }
.dash-notice .notice { margin: 0; }
.dash-empty { margin: 16px 24px; }
.dash-body { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }

/* The panel: "Select all", then each calendar as a row (its check box in its color, its name, a quiet line of counts). */
.select-all { display: inline-flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; color: var(--ink); border-radius: 6px; }
.cal-tick.some .tick-box { background: var(--chip); }
.dash-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 24px; }
.cal-panel-list li { display: flex; align-items: flex-start; gap: 14px; padding: 11px 24px; }
.cal-panel-list .cal-tick { margin-top: 3px; }
.cal-panel-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cal-panel-name { font-size: 16px; font-weight: 500; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.cal-panel-counts { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-archived { margin: 8px 24px 0; font-size: 14px; }
.cal-archived summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.cal-archived ul { list-style: none; margin: 2px 0 0; padding: 0; }
.cal-archived li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.cal-archived li a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The handle on the panel's divider, in the header band (shown by the script; the choice is remembered, and early.js puts
   .panel-closed on <html> before the first paint). Collapsed, only the divider is left, and the handle sits just inside the events
   area, clear of the rail. */
.dash-collapse { position: absolute; top: 26px; right: -14px; z-index: 4; width: 28px; height: 28px; padding: 0 0 3px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(32, 40, 45, .12); }
.dash-collapse:hover { color: var(--brand-dark); border-color: var(--brand); }
.panel-closed .dash-panel { width: 0; }
.panel-closed .dash-panel > :not(.dash-collapse) { display: none; }
.panel-closed .dash-collapse { right: -40px; }
.panel-closed .dash-main .dash-head { padding-left: 60px; }
.panel-closed .dash-main .dash-tool { padding-left: 24px; }

/* Calendar view / List view: two icons; the active one on white with a light border and the primary color. */
.view-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--off, #f1eff3); flex: none; }
.view-switch a { width: 38px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid transparent; color: var(--muted); }
.view-switch a:hover { color: var(--brand-dark); }
.view-switch a.on { background: var(--card); border-color: var(--line); color: var(--brand); box-shadow: 0 1px 2px rgba(32, 40, 45, .08); }

/* Upcoming / Past / Archived: one compact segmented control. */
.seg { display: inline-flex; border: 1px solid var(--color-border-control, #b9b2c2); border-radius: 8px; overflow: hidden; flex: none; }
.seg a { padding: 5px 14px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink); white-space: nowrap; }
.seg a + a { border-left: 1px solid var(--color-border-control, #b9b2c2); }
.seg a:hover { background: var(--brand-tint); }
.seg a.on { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); }

/* Mid widths: a slimmer panel. Under 900px the panel stacks above the events (its rows side by side) and the handle goes. */
@media (max-width: 1180px) {
  .dash-panel { width: 264px; }
  .ev-row-cal { max-width: 170px; }
  .ev-row-stats { display: none; }
}
@media (max-width: 900px) {
  /* Stacked, the page scrolls as a whole, and the white events area still runs to the bottom of the window. */
  .dash { flex-direction: column; height: auto; flex: 1; }
  main.flush { display: flex; flex-direction: column; }
  .dash-panel { width: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .dash-body, .dash-panel-body { overflow: visible; }
  .panel-closed .dash-panel { width: auto; }
  .panel-closed .dash-panel > :not(.dash-collapse) { display: revert; }
  .panel-closed .dash-main .dash-head { padding-left: 24px; }
  .dash-collapse { display: none; }
  .dash-panel .dash-head { height: 60px; }
  .dash-panel .dash-tool { height: 48px; border-bottom: 0; }
  .dash-panel-body { padding: 0 0 10px; }
  .cal-panel-list { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 0 8px; }
  .cal-panel-list li { padding: 6px 16px; }
}
@media (max-width: 640px) {
  .dash-head, .dash-tool { padding: 0 12px; }
  .dash-main .dash-head { height: 64px; }
  .dash-tool { height: auto; min-height: 56px; }
  .cal-panel-list { padding: 0 4px; }
  .cal-panel-list li { padding: 5px 8px; align-items: center; }
  .cal-panel-list .cal-tick { margin-top: 0; }
  .cal-panel-name { font-size: 15px; }
  .cal-panel-counts { display: none; }
  .cal-archived { margin: 4px 12px 0; }
  .ev-row { flex-wrap: wrap; gap: 4px 12px; padding: 12px; }
  .ev-row-main { flex-basis: 100%; }
  .ev-row-title { font-size: 16px; white-space: normal; }
  .ev-row-cal { width: auto; margin: 0 auto 0 24px; }
  .dash-empty { margin: 16px 12px; }
}

/* ---------- The embeddable event (/e/<slug>/embed, in an iframe on the business's own site) ---------- */
body.public.embed { background: transparent; }
.embed .atc-btn { background: #fff; color: #111; border: 1px solid #d9dbe0; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.embed .atc-btn:hover, .embed .atc-btn:focus-visible { background: #f7f7f8; }
.emb { padding: 4px 6px 12px; }
.emb .ev-banner { margin-bottom: 10px; }
.emb-card { padding: 20px 20px 18px; box-shadow: 0 2px 12px rgba(29, 48, 84, .1); }
.emb-card .ev-title { font-size: 22px; margin-bottom: 12px; }
.emb-card .ev-title a { color: inherit; text-decoration: none; }
.emb-card .ev-title a:hover { text-decoration: underline; }
.emb-where { border-top: 0; padding: 10px 0 0; }
.emb-card .ev-add { margin: 16px 0 0; }
@media (min-width: 560px) {
  .emb-card { padding: 24px 26px 22px; }
  .emb-card .ev-title { font-size: 24px; }
}

/* The website snippets' previews in event details: the real button, and the embed in a frame. */
.code-preview { display: flex; justify-content: center; align-items: center; min-height: 120px; padding: 28px 16px; }
.embed-preview { display: block; width: 100%; max-width: 640px; border: 0; background: transparent; }
.styles a.wide { width: auto; padding: 0 12px; border-radius: 15px; }

/* ---------- Icons (the icons-v2 set, inline in currentColor) ----------
   16 px in dense rows, 18–20 px in menus and toolbars, 20–24 px in the rail. Centred on the text beside them. */
.icon { display: inline-block; flex: none; vertical-align: middle; }
.cal-nav a .icon, .arrow-off .icon { display: block; }
.cal-nav a { padding-bottom: 0; }
.cell-add .icon { display: block; }
.kebab > summary .icon { display: block; }
.tick-box .icon { display: block; stroke-width: 2.5; }
.tick-dash { display: block; width: 8px; height: 2px; border-radius: 1px; background: currentColor; }
.dash-collapse { padding: 0; }
.dash-collapse .icon { display: block; transition: transform .15s; }
.panel-closed .dash-collapse .icon { transform: rotate(180deg); }
.see-more { display: inline-flex; align-items: center; gap: 2px; }
.see-more .icon { margin-right: -3px; }
/* Calendar-kind icons in the menus and link lists take the design's color on public pages, the frame's link color in admin. */
.atc-item .cal-kind { color: var(--btn-dark, var(--brand-dark)); }
body.admin .cal-kind { color: var(--color-fg-link); }
.direct-links .cal-kind { flex: none; }
.icon-text { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Colors: calendars and events (src/lib/colors.ts) ---------- */
/* The round swatch: a native color input, 40px, no border, inline left of the name. */
.name-row { display: flex; align-items: center; gap: 12px; max-width: 560px; }
.name-row .name-input { flex: 1; min-width: 0; }
input[type=color].swatch.head-swatch { width: 28px; height: 28px; }
input[type=color].swatch { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; flex: none; overflow: hidden; -webkit-appearance: none; appearance: none; }
input[type=color].swatch::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color].swatch::-webkit-color-swatch { border: 0; border-radius: 50%; }
input[type=color].swatch::-moz-color-swatch { border: 0; border-radius: 50%; }
body.admin input[type=color].swatch:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 3px; }
.use-cal-color { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0 52px; font-weight: 400; font-size: 14px; color: var(--muted); }
.color-hint { margin: 6px 0 0 52px; }
/* A check mark on a calendar's filled tick box: white or near-black, whichever reads on that color. */
.tick-box { color: var(--chip-ink, #fff); }
/* A very light color (under 1.5:1 on white) still shows: dots get a thin darker outline. */
.dot.light { box-shadow: 0 0 0 1px rgba(32, 40, 45, .45); }
.cal-tick.on .tick-box { border-color: var(--chip); }
.cal-tick.light .tick-box { box-shadow: 0 0 0 1px rgba(32, 40, 45, .45); }

/* Analytics overview: two summary cards, then a list per kind that links into each event's or calendar's own page */
.stats.stats-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
.analytics h2 { margin: 28px 0 4px; }
.analytics h2:first-child { margin-top: 0; }
table.an-list { width: 100%; border-collapse: collapse; }
table.an-list th { text-align: left; font-weight: 500; color: var(--muted); font-size: 13px; padding: 4px 0 8px; }
table.an-list th.num, table.an-list td.num { text-align: right; width: 1%; white-space: nowrap; padding-left: 24px; font-variant-numeric: tabular-nums; }
table.an-list td { padding: 10px 0; border-top: 1px solid var(--line); vertical-align: top; }
.an-name { display: inline-flex; align-items: flex-start; gap: 10px; text-decoration: none; color: inherit; font-weight: 600; }
.an-name .dot { margin-top: 7px; }
.an-name:hover .an-title { text-decoration: underline; }
.an-when { display: block; margin-left: 20px; }
.vis-tag { align-self: center; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: #5f6672; white-space: nowrap; }
.an-pick { margin: 0 0 18px; display: flex; gap: 10px; align-items: center; }
.an-pick select { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font: inherit; background: #fff; cursor: pointer; width: 100%; max-width: 440px; }

/* Privacy link under public pages, and the privacy page */
.pub-foot { text-align: center; margin: 18px 0 30px; font-size: 12px; }
.pub-foot a { color: var(--pg-foot, #5f6672); }
body.public.embed .pub-foot { margin: 8px 0 12px; }
.priv h2 { font-size: 17px; margin: 24px 0 6px; }
.priv p { line-height: 1.55; margin: 0 0 10px; }
.priv .priv-date { color: #5f6672; font-size: 13px; margin-bottom: 4px; }
.priv .ev-logo { margin-bottom: 28px; }
.priv h1 { margin-top: 0; }
.priv-optout { margin: 22px 0 22px; display: flex; flex-direction: column; align-items: flex-start; }
.priv-optout .priv-status { font-weight: 500; margin: 0 0 22px; }


/* ---------- Embeddable events list and calendar (/c/<slug>/embed/list, /embed/month) ----------
   --emb-bg and --emb-fg are set inline only when the owner chose them; otherwise the theme's colors apply. --btn, --btn-dark and
   --btn-ink (the Follow button) and --emb-accent come from the calendar's embed settings. */
body.public.cemb { --cb: var(--emb-bg, #ffffff); --cf: var(--emb-fg, #36454f); margin: 0; background: var(--cb); color: var(--cf); }
body.public.cemb.cemb-theme-dark { --cb: var(--emb-bg, #14161a); --cf: var(--emb-fg, #f2f3f5); }
@media (prefers-color-scheme: dark) {
  body.public.cemb.cemb-theme-auto { --cb: var(--emb-bg, #14161a); --cf: var(--emb-fg, #f2f3f5); }
}
body.cemb { --cm: color-mix(in srgb, var(--cf) 62%, var(--cb)); --cl: color-mix(in srgb, var(--cf) 16%, var(--cb)); }
body.public.cemb { font-family: var(--emb-page-font, Montserrat, system-ui, sans-serif); }
.cemb-more { font-family: inherit; }
.cemb-main { box-sizing: border-box; padding: 16px 18px 6px; }
.cemb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cemb-title { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--cf); }
.cemb-title { font-family: var(--emb-title-font, inherit); }
.cemb-follow { display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--btn, #027f84); color: var(--btn-ink, #fff); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.cemb-follow:hover { background: var(--btn-dark, #00686d); }
.cemb-follow:focus-visible, .cemb a:focus-visible, .cemb-more:focus-visible, .cemb-ev:focus-visible { outline: 2px solid var(--cf); outline-offset: 2px; }
.cemb-events { list-style: none; margin: 0; padding: 0; }
.cemb-ev { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--cl); }
.cemb-ev:first-child { border-top: 0; }
.cemb-main.ready .cemb-extra { display: none; }
.cemb-ev .dot { flex: none; width: 10px; height: 10px; margin-top: 7px; }
.cemb-ev-body { min-width: 0; }
.cemb-ev-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--cf); text-decoration: none; overflow-wrap: anywhere; }
a.cemb-ev-title:hover, a.cemb-ev-title:focus-visible { text-decoration: underline; }
.cemb-ev-when { margin: 2px 0 0; font-size: 14px; color: var(--cm); }
.cemb-ev-meta { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: 14px; color: var(--cm); }
.cemb-ev-meta svg { flex: none; margin-top: 2px; }
.cemb-ev-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--cf); overflow-wrap: anywhere; }
.cemb-ev-desc.full { white-space: pre-line; }
.cemb-empty { margin: 20px 0; color: var(--cm); }
.cemb-more { display: block; margin: 8px auto 4px; padding: 9px 18px; border: 1px solid var(--cl); border-radius: 8px; background: transparent; color: var(--cf); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cemb-more:hover { background: var(--cl); }
.cemb-zone { margin: 14px 0 6px; font-size: 13px; color: var(--cm); }
body.cemb .pub-foot a { color: var(--cm); }
body.cemb .pub-foot { margin: 6px 0 12px; }
.cemb-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cemb-nav-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--cl); border-radius: 8px; color: var(--cf); font-size: 14px; font-weight: 600; text-decoration: none; }
.cemb-nav-btn:hover { background: var(--cl); }
.cemb-arrow { padding: 0; }
.cemb-month-name { margin-left: 6px; font-size: 17px; font-weight: 600; }
.cemb-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cemb-month th { padding: 6px 4px; font-size: 12px; font-weight: 600; color: var(--cm); text-align: center; }
.cemb-day { height: 84px; padding: 4px 5px; border: 1px solid var(--cl); vertical-align: top; }
.cemb-day.out { background: color-mix(in srgb, var(--cf) 4%, var(--cb)); }
.cemb-daynum { display: inline-block; min-width: 22px; height: 22px; line-height: 22px; border-radius: 11px; font-size: 12px; text-align: center; color: var(--cm); }
.cemb-day.today .cemb-daynum { background: var(--emb-accent, var(--btn, #9900cc)); color: var(--btn-ink, #fff); font-weight: 600; }
.cemb-dow { display: none; }
.cemb-day-events { list-style: none; margin: 2px 0 0; padding: 0; }
.cemb-day-events li { margin: 4px 0; font-size: 12px; line-height: 1.3; }
.cemb-day-events li.cemb-past { opacity: .5; }
.cemb-day-events .dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; vertical-align: middle; }
.cemb-time { color: var(--cm); }
.cemb-day-events .cemb-ev-title { display: block; font-size: 12px; font-weight: 600; overflow-wrap: break-word; }
@media (max-width: 640px) {
  /* A narrow frame can't hold seven columns: only the days with events, one under the other. */
  .cemb-month, .cemb-month tbody, .cemb-month tr, .cemb-month td { display: block; width: 100%; }
  .cemb-month thead { display: none; }
  .cemb-month .cemb-day { height: auto; border: 0; border-top: 1px solid var(--cl); padding: 10px 0; }
  .cemb-month .cemb-day.empty, .cemb-month .cemb-day.out { display: none; }
  .cemb-month .cemb-dow { display: inline; margin-left: 6px; font-size: 12px; color: var(--cm); }
  .cemb-day-events li { font-size: 14px; }
  .cemb-day-events .cemb-ev-title { font-size: 14px; }
}

/* Embed settings on a calendar's page */
.embed-form { display: grid; gap: 14px; margin: 6px 0 4px; }
.embed-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.embed-row > label:first-child { flex: 0 0 140px; margin: 0; font-weight: 500; }
.embed-row input[type=text] { flex: 1; min-width: 200px; }
.embed-row select { width: auto; min-width: 180px; }
.embed-row .check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.embed-checks { gap: 10px 24px; padding-left: 152px; }
@media (max-width: 640px) { .embed-checks { padding-left: 0; } }
.embed-preview.wide { max-width: 100%; }
.designer-name { display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; font-size: 26px; padding: 8px 0; margin: 0 0 18px; color: var(--ink); }
.designer-body { display: grid; grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); gap: 28px; align-items: start; }
.designer-controls h2 { font-size: 16px; font-weight: 500; margin: 22px 0 10px; }
.designer-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); }
.designer-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 0; font: inherit; color: var(--muted); cursor: pointer; }
.designer-tabs button[aria-selected="true"] { color: var(--brand-dark); border-bottom-color: var(--brand); }
.theme-tiles { display: flex; gap: 14px; flex-wrap: wrap; }
.theme-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.theme-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-pic { display: block; width: 110px; height: 76px; box-sizing: border-box; border: 2px solid var(--line); border-radius: 10px; background: #fff; }
.theme-dark .theme-pic { background: #4b5560; }
.theme-auto .theme-pic { background: linear-gradient(90deg, #fff 50%, #4b5560 50%); }
.theme-tile input:checked + .theme-pic { border-color: var(--brand); }
.theme-tile input:focus-visible + .theme-pic { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.radio-list { display: grid; gap: 10px; }
.radio-list .check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.designer-preview { position: sticky; top: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--off); overflow: hidden; min-width: 0; }
.designer-preview-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.designer-toggles { display: inline-flex; gap: 14px; flex-wrap: wrap; text-transform: none; letter-spacing: 0; }
.designer-toggles [role=group] { display: inline-flex; gap: 2px; }
.designer-toggles button { border: 0; border-radius: 6px; padding: 6px 10px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.designer-toggles button[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-dark); }
.designer-frame { padding: 16px; display: flex; justify-content: center; }
.designer-frame iframe { width: 100%; height: 720px; border: 0; background: #fff; border-radius: 8px; }
.designer-frame[data-width="phone"] iframe { width: 375px; max-width: 100%; }
.designer-bar { position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center; padding: 14px 0; margin-top: 18px; background: var(--bg); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .designer-body { grid-template-columns: 1fr; } .designer-preview { position: static; } }
.host-tiles { list-style: none; margin: 12px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.host-tile { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 8px; background: var(--off); color: var(--ink); font-size: 14px; line-height: 1.4; }
.host-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.host-x:hover { background: var(--line); color: var(--ink); }
.host-x:focus-visible { outline: 2px solid var(--color-border-focus, var(--brand)); outline-offset: 1px; }
.host-add { display: flex; align-items: center; gap: 8px; max-width: 460px; }
.host-add input { flex: 1; min-width: 0; }
.designer-image { max-width: 460px; margin: 8px 0 40px; }
.category-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.category-card { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.category-card:hover { border-color: var(--brand); }
.category-card a { display: flex; flex-direction: column; gap: 6px; padding: 22px; color: inherit; text-decoration: none; min-height: 150px; justify-content: flex-end; }
.category-icon { color: var(--brand); margin-bottom: auto; }
.category-title { font-size: 18px; font-weight: 500; }
.look-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; box-sizing: border-box; width: 100%; aspect-ratio: 3 / 1; padding: 0 22px; border-bottom: 1px solid var(--line); }
.look-aa { font-size: 26px; font-weight: 600; }
.look-btn { width: 56px; height: 22px; border-radius: 6px; }
.embed-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.embed-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.embed-dialog { box-sizing: border-box; width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 24px; border: 1px solid var(--color-border, #ddd); border-radius: 14px; background: var(--color-surface, Canvas); color: inherit; }
.embed-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.embed-dialog h2 { margin: 0 0 16px; font-size: 18px; }
.embed-buttons { justify-content: flex-end; }
.embed-thumb { width: 100%; height: 220px; overflow: hidden; border-radius: 8px; }
.embed-thumb .embed-preview { pointer-events: none; }
.embed-dialog-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.embed-dialog-body.stacked { grid-template-columns: minmax(0, 1fr); }
.embed-dialog-preview { min-width: 0; border: 1px dashed var(--color-border, #ddd); border-radius: 10px; overflow: hidden; }
@media (max-width: 820px) { .embed-dialog-body { grid-template-columns: 1fr; } }