/* The free events box other sites show (/embed/events, web/embed-widget.ts). Its own small sheet:
   nothing from the main site's styles, so it stays fast and can't be thrown off by them.
   Text floor 14px for labels, 16px+ for what people read (Wyatt 09-27: no tiny type). */
/* Suumer's own font (the same file the main site uses, so a reader who has been to suumer.com already has it). */
@font-face { font-family: "Lexend"; src: url("/fonts/lexend-latin-v26.woff2") format("woff2"); font-weight: 100 900; font-display: swap; 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; }
/* Modak only on the box title (owner 10-24: sparingly, and in color, never black). */
@font-face { font-family: "Modak"; src: url("/fonts/modak-latin-v21.woff2") format("woff2"); font-weight: 400; font-display: swap; 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; }
:root { color-scheme: normal; }
html, body { margin: 0; padding: 0; background: transparent; }
.sw {
  --bg: #fdf9ee; --ink: #272527; --muted: #5e524b; --line: #e3d8c6; --soft: #f5f0e2;
  color: var(--ink);
  font: 16px/1.4 Lexend, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.sw--dark { --bg: #201a20; --ink: #f5f0e2; --muted: #cbbfb3; --line: #3f343c; --soft: #2d252c; }
/* Default "suumer": the logo's four stripes across the top, each day in the next stripe color. The other colors are
   one color all through, for sites that want the box to match their own look. */
.sw--suumer { --accent: #b81f57; } .sw--dark.sw--suumer { --accent: #f84875; }
.sw--pink { --accent: #b81f57; } .sw--dark.sw--pink { --accent: #ff7096; }
.sw--teal { --accent: #0f6a6e; } .sw--dark.sw--teal { --accent: #35b8be; }
.sw--orange { --accent: #c2410c; } .sw--dark.sw--orange { --accent: #ff8a5c; }
.sw--purple { --accent: #6a3aa3; } .sw--dark.sw--purple { --accent: #c4a7ee; }
.sw--ink { --accent: #2a2227; } .sw--dark.sw--ink { --accent: #f5f0e2; }

.sw-box { background: var(--bg); border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: 12px; padding: 14px 14px 10px; }
.sw--suumer .sw-box { border-top: 0; padding-top: 0; overflow: hidden; }
.sw--suumer .sw-box::before { content: ""; display: block; height: 16px; margin: 0 -14px 14px; background: linear-gradient(#f84875 0 25%, #37bac1 25% 50%, #f86b44 50% 75%, #7441b6 75%); }
.sw-head { display: flex; align-items: center; gap: 12px; }
.sw-logo { flex: none; display: block; line-height: 0; }
.sw-logo img { display: block; width: 92px; height: auto; }
.sw-headtext { min-width: 0; }
.sw-heading { margin: 0; font-family: Modak, Lexend, system-ui, sans-serif; font-weight: 400; font-synthesis: none; font-size: 32px; line-height: .95; letter-spacing: .01em; color: var(--accent); }
.sw--ink .sw-heading { color: #d92968; } .sw--dark.sw--ink .sw-heading { color: #f3c13a; }
.sw-sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.sw-note { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--soft); font-size: 15px; }
.sw-day { margin-top: 14px; }
/* Each day in its own rounded chip (Wyatt 11-06: "better with the date chips"), the day name in that day's color. */
.sw-dayname { display: inline-block; margin: 0 0 4px; padding: 3px 12px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sw--suumer .sw-day:nth-of-type(4n+2) .sw-dayname { color: #12676c; } .sw--suumer.sw--dark .sw-day:nth-of-type(4n+2) .sw-dayname { color: #37bac1; }
.sw--suumer .sw-day:nth-of-type(4n+3) .sw-dayname { color: #b93a0a; } .sw--suumer.sw--dark .sw-day:nth-of-type(4n+3) .sw-dayname { color: #f86b44; }
.sw--suumer .sw-day:nth-of-type(4n) .sw-dayname { color: #7441b6; } .sw--suumer.sw--dark .sw-day:nth-of-type(4n) .sw-dayname { color: #b896ea; }
.sw-list { list-style: none; margin: 0; padding: 0; }
.sw-event + .sw-event { border-top: 1px solid var(--line); }
.sw-link { display: flex; gap: 12px; min-height: 44px; padding: 10px 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.sw-link:hover { background: var(--soft); }
.sw-link:hover .sw-title { text-decoration: underline; }
.sw-link:focus-visible, .sw a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The times in their own column on the left. */
.sw-time { flex: 0 0 6em; padding-top: 2px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
.sw-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sw-title { font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.sw-where { font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }
.sw-cat { font-size: 14px; color: var(--muted); }
.sw-status { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 4px; background: var(--accent); color: var(--bg); font-size: 14px; }
.sw-more { margin: 12px 0 0; font-size: 16px; }
.sw-more a, .sw-empty a { color: var(--accent); font-weight: 700; }
.sw-empty { margin-top: 12px; padding: 14px; border-radius: 10px; background: var(--soft); font-size: 16px; }
.sw-empty p { margin: 0 0 6px; } .sw-empty p:last-child { margin: 0; }
/* The Thursday email line (growth move 7): only in a box near a town that gets it; opens suumer.com/thursday in a new tab. */
.sw-thursday { margin: 10px 0 0; font-size: 15px; line-height: 1.35; }
.sw-thursday a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; color: var(--ink); font-weight: 700; text-decoration: none; }
.sw-thursday a:hover { text-decoration: underline; }
.sw-thursday__tag { padding: 1px 8px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sw--narrow .sw-thursday { margin-top: 8px; font-size: 14px; }
.sw-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.sw-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--muted); }
/* the main rectangle logo, not the round app icon (Wyatt 11-09, doors-build-1109) */
.sw-brand img { display: block; width: auto; height: 20px; }

/* Cards: tiles side by side when there is room, one per row in a sidebar. */
.sw--cards .sw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 6px; }
.sw--cards .sw-event, .sw--cards .sw-event + .sw-event { border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 10px; background: var(--soft); }
.sw--cards .sw-link { flex-direction: column; gap: 4px; height: 100%; padding: 12px; box-sizing: border-box; }
.sw--cards .sw-time { flex: none; padding: 0; color: var(--accent); }

/* A narrow sidebar: the time sits over the title instead of beside it. */
@media (max-width: 330px) {
  .sw-box { padding: 12px 10px 8px; }
  .sw-link { flex-direction: column; gap: 2px; }
  .sw-time { flex: none; padding: 0; }
  .sw--suumer .sw-box::before { margin: 0 -10px 12px; }
  .sw-logo img { width: 64px; }
  .sw-heading { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* The made-up sample box on /widget (web/embed-widget.ts renderSamplePage): a "Sample" tag and rows that are not links.
   Everything else is the live box. */
.sw-badge { display: inline-block; margin-bottom: 4px; padding: 1px 9px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sw--sample .sw-link { cursor: default; transition: background-color .15s ease; }

/* Narrow column (a newspaper's 300 px column): day chips, then time on the left and title beside it, one small footer link. */
.sw--narrow .sw-box { padding: 10px 12px 8px; }
.sw--narrow.sw--suumer .sw-box { padding-top: 0; }
.sw--narrow.sw--suumer .sw-box::before { height: 10px; margin: 0 -12px 10px; }
.sw--narrow .sw-logo { display: none; }
.sw--narrow .sw-heading { font-size: 26px; }
.sw--narrow .sw-sub { font-size: 14px; }
.sw--narrow .sw-day { margin-top: 10px; }
.sw--narrow .sw-dayname { padding: 2px 10px; }
.sw--narrow .sw-link { flex-direction: row; gap: 8px; padding: 8px 4px; min-height: 0; }
.sw--narrow .sw-time { flex: 0 0 5.4em; padding-top: 1px; font-size: 14px; }
.sw--narrow .sw-title { font-size: 16px; }
.sw--narrow .sw-foot { margin-top: 8px; padding-top: 8px; }
.sw--narrow .sw-more { font-size: 14px; }

/* Hide and highlight (embed.js, Wyatt 11-06). The buttons exist only when the script runs (body.sw-js), so a box without
   script never shows a dead X. Phone: the X always shows, swipe right highlights. Computer: both buttons show when the
   pointer rests on an event or the keyboard is on it (as WhatsApp's chat list does), right-click gives the same menu. */
.sw-event { position: relative; }
.sw-js:not(.sw--cards) .sw-event:not([hidden]) ~ .sw-event:not([hidden]) { border-top: 1px solid var(--line); }
.sw-js:not(.sw--cards) .sw-event + .sw-event { border-top: 0; }
.sw-js .sw-link { position: relative; z-index: 1; padding-right: 42px; background: var(--bg); touch-action: pan-y; -webkit-touch-callout: none; }
.sw-js .sw-link:hover { background: var(--soft); }
.sw-js.sw--cards .sw-link { background: var(--soft); border-radius: 10px; }
.sw-acts { position: absolute; z-index: 2; top: 50%; right: 2px; display: flex; gap: 2px; transform: translateY(-50%); border-radius: 999px; }
.sw--cards .sw-acts { top: 6px; right: 6px; transform: none; }
.sw-act { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.sw-act svg { width: 18px; height: 18px; }
.sw-act:hover { background: var(--line); color: var(--ink); }
.sw-act:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.sw-act--mark { display: none; }
.sw-act--mark[aria-pressed="true"] { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .sw-acts { opacity: 0; transition: opacity .12s ease; }
  .sw-event:hover .sw-acts, .sw-event:focus-within .sw-acts { opacity: 1; background: var(--soft); box-shadow: -10px 0 10px var(--soft); }
  .sw-act--mark { display: grid; }
}
/* A highlighted event: the accent bar on its left, a star by its name. */
.sw-event--marked .sw-link { box-shadow: inset 4px 0 0 var(--accent); background: var(--soft); }
.sw-event--marked .sw-title::before { content: "\2605\00a0"; color: var(--accent); }
/* Under the finger while swiping: left = Hide (the archive swipe), right = Highlight, the word and icon at the edge it opens from. */
.sw-under { position: absolute; inset: 0; display: none; align-items: center; justify-content: space-between; padding: 0 16px; border-radius: 8px; color: #fff; font-size: 15px; font-weight: 800; }
.sw-under > span { display: inline-flex; align-items: center; gap: 6px; transition: transform .12s ease; }
.sw-under svg { width: 20px; height: 20px; }
.sw-swiping .sw-under { display: flex; }
.sw-swiping .sw-acts { visibility: hidden; }
.sw-event[data-swipe="hide"] .sw-under { background: #5e524b; justify-content: flex-end; }
.sw-event[data-swipe="mark"] .sw-under { background: var(--accent); justify-content: flex-start; }
.sw--dark .sw-event[data-swipe="mark"] .sw-under { color: #201a20; }
.sw-event[data-swipe="hide"] .sw-under-mark, .sw-event[data-swipe="mark"] .sw-under-hide { display: none; }
.sw-armed .sw-under > span { transform: scale(1.15); }
/* The right-click menu. */
.sw-menu { position: absolute; z-index: 10; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.sw-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.sw-menu button:hover, .sw-menu button:focus-visible { background: var(--soft); outline: none; }
.sw-menu svg { width: 16px; height: 16px; color: var(--muted); }
/* After a hide: the way back, and the all-hidden note (never a blank box). */
.sw-unhide { margin: 10px 0 0; }
.sw-again { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 32px; }
.sw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }