/* Handy web app, in the Feldr house style (docs/STYLE_GUIDE.md): warm paper, near-black ink,
   Fraunces for display and Newsreader for everything else (all numbers), hairlines instead of
   boxes, square corners, photos and faces, and one sakura accent for "you". */

:root {
  --paper: #FAF8F4;
  --ink: #161614;
  --muted: #6E6B66;
  --line: #D5D0CA;
  --stone: #E4E0DC;
  --stone-2: #EFECE7;
  --other: #8A867F;
  --danger: #A33A2A;
  --danger-soft: #F3E3DE;
  --positive: #2F5D4A;
  /* Sakura: your own status, your bookings, today. Nothing else. */
  --sakura: #A3456A;
  --on-photo: #FAF8F4;
  --open-day: #FFFFFF; /* bookable calendar days: an empty box waiting to be filled */
  --closed-day: #B4AFA8;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Newsreader", Georgia, "Times New Roman", serif;
  --gutter: 40px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141412; --ink: #EDEAE4; --muted: #9A968F; --line: #2E2C29; --stone: #26241F; --stone-2: #1C1B18;
    --other: #7C7870; --danger: #E0806C; --danger-soft: #3A221C; --positive: #7FB79D; --sakura: #D98AA9; --open-day: #1F1E1B; --closed-day: #5C5952;
  }
}
:root[data-theme="dark"] {
  --paper: #141412; --ink: #EDEAE4; --muted: #9A968F; --line: #2E2C29; --stone: #26241F; --stone-2: #1C1B18;
  --other: #7C7870; --danger: #E0806C; --danger-soft: #3A221C; --positive: #7FB79D; --sakura: #D98AA9; --open-day: #1F1E1B; --closed-day: #5C5952;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* No rubber-band at the ends: in Telegram's iOS webview it drags the sticky nav down and shows a gap above it. */
html { scrollbar-gutter: stable; overscroll-behavior-y: none; }
body {
  background: var(--paper); color: var(--ink);
  font: 17px/1.45 var(--font-text);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 300; }
h1 { font-size: 64px; line-height: 1; letter-spacing: -.025em; }
h2 { font-size: 34px; line-height: 1.1; letter-spacing: -.015em; }
h3 { font-size: 26px; line-height: 1.15; letter-spacing: -.005em; }
p { margin: 0 0 12px; }
strong, b { font-weight: 500; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.muted { color: var(--muted); }
.meta { color: var(--muted); font-size: 16px; }
.small { font-size: 14px; }
.error { color: var(--danger); }
.num, .amt, .tot, .code, .cal-cell, .fb-rating, .money-input input { font-family: var(--font-text); font-variant-numeric: tabular-nums lining-nums; }
.you { color: var(--sakura); }
.lede, .statement { font-family: var(--font-display); font-weight: 300; font-size: 28px; line-height: 1.2; letter-spacing: -.01em; }

.center-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- login ---------- */
/* Split, as in docs/design/screens/01-login: a photo on the left, the wordmark and button on the right. */
#login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.login-photo { background: var(--stone) center / cover no-repeat; }
.login-side { display: grid; place-items: center; padding: 40px 24px; }
.login-card { width: min(400px, 100%); display: grid; gap: 22px; }
.login-card h1 { font-size: 104px; letter-spacing: -.025em; }
.login-card .statement { margin: 0; }
.login-card p { margin: 0; }
.login-code { display: flex; gap: 8px; width: 100%; }
.login-code input[inputmode] { flex: 1; min-width: 0; text-align: center; font-size: 20px; letter-spacing: 0.15em; }

/* ---------- onboarding ---------- */
/* docs/design/screens/onboarding: on desktop a photo on the left and one step on the right; on phones
   one step per screen, the button pinned to the bottom, a photo only on the welcome and done screens. */
.ob { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ob-photo { background: var(--stone) center / cover no-repeat; }
.ob-side { display: flex; flex-direction: column; padding: 40px 64px 48px; min-width: 0; }
.ob-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; }
.ob-wm { font-family: var(--font-display); font-weight: 300; font-size: 30px; letter-spacing: -.02em; }
.ob-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; font-size: 16px; }
.ob-back svg { display: none; }
.ob-back span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ob-prog { display: grid; grid-template-columns: repeat(var(--n), 64px); gap: 6px; }
.ob-prog i { height: 2px; background: var(--line); display: block; }
.ob-prog i.on { background: var(--ink); }
.ob-ct { font-size: 15px; min-width: 44px; text-align: right; }
.ob-body { max-width: 480px; width: 100%; display: flex; flex-direction: column; gap: 16px; margin: auto 0 0; padding-top: 32px; }
.ob-body p { margin: 0; }
.ob-q { font-size: 48px; line-height: 1.05; letter-spacing: -.02em; }
.ob-q.big { font-size: 64px; }
.ob-welcome .ob-body > p, .ob-done .ob-body > p { font-size: 19px; }
.ob-eb { font-size: 15px; }
.ob-help { font-size: 17px; }
.ob-note { font-size: 15px; margin-top: -8px; }
.ob-lab { font-size: 16px; margin: 6px 0 -6px; display: block; }
.ob-ta { min-height: 180px; padding: 14px; font-size: 17px; line-height: 1.45; }
.ob-ta.s { min-height: 84px; }
.ob .chip { min-height: 44px; }
.ob .chips { gap: 6px; }
.ob-av img.avatar { display: block; }
.ob-foot { max-width: 480px; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 20px 0 auto; }
.ob-foot .btn { padding-inline: 28px; min-height: 52px; }
.ob-skip { border: 0; background: none; padding: 0; min-height: 36px; color: var(--muted); font-size: 16px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ob-dest { flex-basis: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ob-dest img { width: 56px; height: 56px; object-fit: cover; display: block; flex-shrink: 0; }
.ob-dest .meta { font-size: 15px; }
/* An admin previewing someone's onboarding (view as): same dark bar as the app's "Viewing as". */
.ob-preview { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px; background: var(--ink); color: var(--paper); font-size: 15px; }
.ob-preview .btn { min-height: 32px; padding: 4px 12px; background: transparent; color: var(--paper); border-color: var(--paper); flex-shrink: 0; }
.ob-preview + .ob { min-height: calc(100vh - 48px); }
@media (max-width: 760px) {
  .ob { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  .ob-photo { display: none; }
  .ob-welcome .ob-photo, .ob-done .ob-photo { display: block; height: 290px; flex-shrink: 0; }
  .ob-side { flex: 1; padding: 0; }
  .ob-head { min-height: 60px; padding: 0 20px 0 8px; gap: 12px; }
  .ob-head.brand-only { display: none; }
  .ob-back { width: 44px; justify-content: center; color: var(--ink); }
  .ob-back svg { display: block; }
  .ob-back span { display: none; }
  .ob-prog { flex: 1; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
  .ob-ct { font-size: 14px; }
  .ob-body { max-width: none; flex: 1; margin: 0; padding: 20px 20px 24px; gap: 14px; }
  .ob-q { font-size: 34px; line-height: 1.08; }
  .ob-q.big { font-size: 40px; }
  .ob-welcome .ob-body { padding-top: 0; gap: 12px; }
  .ob-welcome .ob-av { margin: -40px 0 4px; }
  .ob-welcome .ob-av .avatar { --s: 80px !important; border: 4px solid var(--paper); box-sizing: content-box; }
  .ob-done .ob-body { padding-top: 28px; gap: 12px; }
  .ob-welcome .ob-body > p, .ob-done .ob-body > p { font-size: 17px; }
  .ob-help { font-size: 16px; }
  .ob .chips .chip { min-height: 40px; padding: 6px 14px; font-size: 15px; }
  .ob-foot {
    position: sticky; bottom: 0; max-width: none; margin: 0; flex-direction: column; align-items: stretch; gap: 10px;
    padding: 14px 20px calc(30px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--stone-2);
  }
  .ob-foot .btn { width: 100%; }
  .ob-skip { align-self: center; font-size: 15px; }
  .ob-dest { padding: 12px 0; }
  .ob-dest img { width: 48px; height: 48px; }
}

/* ---------- shell: top text nav ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; column-gap: 44px;
  padding: 0 var(--gutter); background: var(--paper);
  /* Paper above the bar too: in-app browsers (Telegram) collapse their URL bar into a see-through strip, and the
     page would otherwise scroll through the gap between it and the stuck nav. */
  box-shadow: 0 -100vh 0 0 var(--paper);
}
.topbar > .brand, .topbar > .nav, .topbar > .me { min-height: 80px; display: flex; align-items: center; }
.brand { font-family: var(--font-display); font-weight: 300; font-size: 30px; letter-spacing: -.02em; color: var(--ink); text-decoration: none; line-height: 1; }
.nav { flex-wrap: wrap; gap: 28px; flex: 1; }
.nav a { color: var(--muted); text-decoration: none; font-size: 17px; }
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.me { position: relative; margin-left: auto; }
.me-btn { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; line-height: 0; outline-offset: 3px; }
.me-btn.active, .me-btn[aria-expanded="true"] { outline: 1px solid var(--ink); }
/* The avatar menu: hairline-edged, square, under the avatar's right edge. */
.me-menu {
  position: absolute; top: calc(50% + 28px); right: 0; z-index: 6; min-width: 240px;
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
}
.me-menu[hidden] { display: none; }
.me-menu-head { padding: 16px 20px; line-height: 1.3; }
.me-menu-head .meta { margin-top: 4px; }
.me-menu nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding: 8px 0; }
.me-menu nav[hidden] { display: none; }
.me-menu nav a, .me-menu > .link { padding: 8px 20px; color: var(--muted); text-decoration: none; text-align: left; font-size: 17px; }
.me-menu nav a:hover, .me-menu nav a.active, .me-menu > .link:hover { color: var(--ink); }
.me-menu nav a.active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.me-menu > .link { border-top: 1px solid var(--line); padding: 14px 20px; }
.me-menu > .link[hidden] { display: none; }
main { max-width: 1200px; margin: 0 auto; padding: 16px var(--gutter) 96px; }

#viewas-bar { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); background: var(--ink); color: var(--paper); font-size: 15px; }
#viewas-bar .btn { min-height: 32px; padding: 4px 12px; background: transparent; color: var(--paper); border-color: var(--paper); }

/* ---------- people ---------- */
.avatar {
  --s: 22px; width: var(--s); height: var(--s); border-radius: 50%; flex-shrink: 0; object-fit: cover;
  display: inline-grid; place-items: center; background: var(--stone); color: var(--ink);
  font: 400 calc(var(--s) * .45) / 1 var(--font-text);
}
img.avatar { display: block; }
.faces { display: inline-flex; }
.faces .avatar { border: 2px solid var(--paper); margin-left: -9px; box-sizing: content-box; }
.faces .avatar:first-child { margin-left: 0; }
.who { display: flex; align-items: center; gap: 14px; }
.who.big { margin-bottom: 14px; }
.who.big .sub { margin: 2px 0 0; }

/* ---------- page furniture ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin: 40px 0 44px; }
.page-head .meta { margin: 10px 0 0; }
.head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin: 64px 0 0; }
.sec-head .tot { color: var(--muted); font-size: 17px; }
.sec-h { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin: 64px 0 0; }
.sub-h { font-size: 24px; margin: 28px 0 12px; }
.back { margin: 24px 0 0; }
.empty, .empty-state { color: var(--muted); padding: 20px 0; }
.empty-state .statement { color: var(--ink); margin-bottom: 8px; }
.card { background: none; border: 0; }
.card.pad { padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.desc { white-space: pre-wrap; margin: 0 0 16px; }
.desc a { overflow-wrap: anywhere; }

/* ---------- buttons, links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 12px 26px;
  border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: 500 16px/1.2 var(--font-text); text-decoration: none; cursor: pointer; text-align: center;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.danger { background: var(--danger-soft); border-color: var(--danger-soft); color: var(--danger); }
.btn.wide { width: 100%; }
.btn:hover:not(:disabled) { background: var(--stone-2); }
.btn.primary:hover:not(:disabled) { background: var(--ink); opacity: .88; }
.btn.danger:hover:not(:disabled) { background: var(--danger-soft); opacity: .85; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.small-btn { min-height: 38px; padding: 6px 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.host-btns { margin: 4px 0 20px; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.btn-grid .btn.danger, .btn-grid .btn.primary { grid-column: 1 / -1; }
.row-btns { display: flex; gap: 10px; }
.link, .accent-link {
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); font-size: inherit; text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.danger-text { color: var(--danger); }
.name-link { text-decoration: none; }
.name-link:hover { text-decoration: underline; }

/* ---------- lists ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.list li.tap { cursor: pointer; }
.list li.tap:hover { background: var(--stone-2); }
.list .main { flex: 1; min-width: 0; }
.list .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .amt { white-space: nowrap; }
.list .amt.in { color: var(--positive); }
.list .empty { display: block; }
.thumb { width: 44px; height: 44px; flex-shrink: 0; background: var(--stone); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tag { display: inline-block; font-size: 13px; padding: 2px 8px; border: 1px solid var(--line); color: var(--muted); vertical-align: 2px; }
.tag.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.facts { list-style: none; padding: 0; margin: 18px 0; }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts li > :last-child { text-align: right; }

/* ---------- events: day timeline ---------- */
.timeline { max-width: 920px; margin: 0 auto; }
#view-events > .page-head { max-width: 920px; margin-left: auto; margin-right: auto; }
.tl-day { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 28px; padding: 0 0 20px 24px; }
.tl-day::before { content: ""; position: absolute; left: 4px; top: 22px; bottom: 0; border-left: 1px dashed var(--line); }
.tl-day:last-child::before { bottom: 40px; }
.tl-day::after { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.tl-day.today::after { background: var(--sakura); }
.tl-date { display: grid; align-content: start; padding-top: 1px; }
.tl-date strong { font-size: 24px; font-weight: 400; line-height: 1.2; }
.tl-date span { color: var(--muted); font-size: 16px; }
.tl-items { display: grid; }
.ev-card { display: flex; gap: 28px; align-items: flex-start; padding: 0 0 48px; cursor: pointer; }
.ev-body { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ev-card .ev-title { font-size: 30px; line-height: 1.15; }
.ev-card:hover .ev-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ev-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 16px; }
.ev-status { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 16px; margin-top: 6px; }
.cover { flex-shrink: 0; background: var(--stone); overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.thumb { width: 180px; height: 180px; }

/* ---------- event page ---------- */
.ev-page { display: grid; grid-template-columns: 420px minmax(0, 1fr); grid-template-areas: "cover main" "side main"; grid-template-rows: auto 1fr; gap: 0 64px; align-items: start; max-width: 1040px; margin: 40px auto 0; }
.ev-page.no-cover { grid-template-areas: "side main"; }
.ev-cover { grid-area: cover; width: 100%; aspect-ratio: 1; object-fit: cover; display: block; margin-bottom: 44px; }
.ev-side { grid-area: side; display: grid; gap: 40px; justify-items: start; }
.ev-main { grid-area: main; padding-top: 14px; }
.side-block { display: grid; gap: 14px; }
.face-grid { display: flex; flex-wrap: wrap; gap: 16px 22px; }
.face { display: grid; justify-items: center; gap: 6px; font-size: 15px; color: var(--muted); }
.ev-h { font-size: 64px; line-height: 1.02; letter-spacing: -.025em; margin: 22px 0 30px; }
.ev-h.long { font-size: 46px; line-height: 1.08; }
/* The public event page (/p/<id>): its application form sits in the RSVP box. */
.pub-form { margin-top: 18px; }
.pub-form input, .pub-form textarea { background: #FFFFFF; }
.pub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ww { display: grid; gap: 16px; margin-bottom: 30px; }
.ww-row { display: flex; align-items: center; gap: 16px; color: inherit; text-decoration: none; }
a.ww-row:hover .ww-place { text-decoration: underline; text-underline-offset: 4px; }
.datebox, .iconbox { width: 54px; height: 58px; flex-shrink: 0; border: 1px solid var(--line); display: grid; place-items: center; text-align: center; }
.datebox { align-content: center; gap: 0; }
.datebox span { font-size: 12px; color: var(--muted); line-height: 1; }
.datebox b { font-size: 24px; font-weight: 400; line-height: 1.1; }
.iconbox svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.daybox { width: 60px; height: 68px; flex-shrink: 0; background: var(--stone); display: grid; align-content: center; justify-items: center; }
.daybox span { font-size: 14px; color: var(--muted); line-height: 1; }
.daybox b { font-size: 30px; font-weight: 400; line-height: 1.1; }
.reg { background: var(--stone-2); padding: 22px 24px 24px; margin-bottom: 36px; }
/* The public apply form posts to #apply: land with the reply below the sticky topbar, not under it. */
#apply { scroll-margin-top: 104px; }
.reg-head { font-size: 18px; margin-bottom: 12px; }
.reg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.reg-btns p { grid-column: 1 / -1; margin: 0; }
.reg-btns .btn:only-child, .reg-btns p + .btn:last-child { grid-column: 1 / -1; }
.about .meta { margin-bottom: 10px; }
.about .desc { font-size: 18px; line-height: 1.5; }

/* ---------- manage + two-column pages ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; }
.cols.manage { grid-template-columns: 360px minmax(0, 1fr); margin-top: 32px; }
.cols .col-main > .sec-h:first-child, .cols .col-side > .sec-h:first-child, .cols .col-main > .sec-head:first-child { margin-top: 0; }
.mg-head { display: flex; align-items: center; gap: 16px; }
.mg-head h3 { font-size: 26px; }
.list.people .avatar { --s: 40px; }

/* Manage event: Overview / Messages tabs */
.etabs { display: flex; gap: 28px; margin: 22px 0 0; border-bottom: 1px solid var(--line); }
.etabs button { border: 0; background: none; padding: 0 0 12px; font: inherit; font-size: 17px; color: var(--muted); cursor: pointer; }
.etabs button.on { color: var(--ink); border-bottom: 1px solid var(--ink); margin-bottom: -1px; }

/* Messages tab: the timeline on the left, the chosen message on the right */
.mcols { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 32px; }
.cov { background: var(--stone-2); padding: 14px 16px; font-size: 15px; margin: 0 0 20px; }
.tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tl li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 12px; border-bottom: 1px solid var(--line); }
.tl li.has-preview { cursor: pointer; }
.tl li.has-preview:hover, .tl li.sel { background: var(--stone-2); }
.tl .m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tl .t { font-family: var(--font-display); font-weight: 300; font-size: 22px; line-height: 1.2; }
.tl .small { color: var(--muted); }
.tl .small.noted { color: var(--sakura); }
.tl .sw { margin-top: 4px; flex-shrink: 0; }
.msg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.msg-head h2 { margin: 4px 0 0; font-size: 34px; }
.note-field { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.note-field textarea { min-height: 84px; background: #FFFFFF; font-size: 17px; line-height: 1.45; resize: vertical; }
.note-btns { display: flex; gap: 18px; align-items: center; margin-top: 12px; }
.frame { background: var(--stone-2); padding: 8px 0; margin-top: 22px; }
.frame .bar { display: flex; justify-content: space-between; gap: 12px; padding: 6px 20px 10px; font-size: 14px; color: var(--muted); }
.frame .tgw { padding: 8px 20px 18px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.email-frame { width: 100%; height: 1200px; border: 0; background: var(--stone-2); }
/* Telegram's own look, so the preview reads as a chat message */
.bub { background: #FFFFFF; color: #161614; padding: 10px 12px 8px; max-width: 340px; font: 15px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; }
.bub b { font-weight: 600; }
.bub .tm { display: block; text-align: right; font-size: 11px; color: var(--other); margin-top: 4px; }
.kb { display: flex; gap: 4px; width: 100%; max-width: 364px; }
.kb span { flex: 1; background: rgba(22, 22, 20, .18); color: #FFFFFF; text-align: center; font: 500 14px -apple-system, "Segoe UI", Roboto, sans-serif; padding: 9px 4px; }
.tl-h { font-size: 15px; font-family: inherit; font-weight: 500; color: var(--muted); margin: 0 0 10px; }
.cm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; }
.cm-head .tl-h { margin: 0; }
.tl.cm { margin-bottom: 32px; }
.cm-body { white-space: pre-line; font-size: 16px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cm-cancelled .cm-body { color: var(--muted); text-decoration: line-through; }
.cm-empty { margin: 0 0 32px; }
#cm-body { min-height: 220px; font-size: 17px; line-height: 1.45; resize: vertical; }
.sw-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .mcols { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  .msg-head { flex-direction: column; gap: 14px; }
  .msg-head h2 { font-size: 40px; }
  .frame { margin-top: 14px; }
  .frame .bar { justify-content: center; }
  .frame .tgw { align-items: stretch; padding: 4px 12px 18px; }
  .bub, .kb { max-width: none; }
  .note-btns { flex-direction: column; align-items: stretch; gap: 14px; }
  .note-btns .link { align-self: center; }
}

/* ---------- treasury ---------- */
.pot-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; margin: 32px 0 0; }
.pot-hero.no-photo { grid-template-columns: minmax(0, 1fr); }
.pot-copy { container-type: inline-size; }
/* Sized to its column (cqi), so a long balance never runs into the photo. */
.pot-big { font-size: min(128px, 17cqi); line-height: 1; letter-spacing: -.03em; margin: 8px 0 20px; white-space: nowrap; }
.pot-links { display: flex; gap: 20px; margin-top: 16px; }
.pot-sub { font-size: 19px; max-width: 520px; margin-bottom: 26px; }
.pot-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pot-cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; align-items: start; }
.pot-side > .sec-head + .muted { margin-top: 16px; }
.thanks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 18px; }
.thanks li { display: flex; align-items: center; gap: 14px; line-height: 1.3; }
.receipt-img { width: 100%; display: block; }

/* ---------- space ---------- */
.space-hero {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px;
  min-height: 440px; padding: 44px; background: var(--stone) center / cover no-repeat; margin-top: 8px;
}
.space-hero.has-photo { color: var(--on-photo); }
.space-hero.has-photo::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.space-hero > * { position: relative; }
.sh-text { max-width: 560px; }
.sh-text h1 { font-size: 72px; margin-bottom: 14px; }
.sh-text p { font-size: 19px; margin: 0; }
.space-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; margin-top: 72px; }
.cal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cal-top .meta { font-size: 15px; }
.a-book > .sec-h:first-child { margin-top: 0; }
.a-book p { margin-top: 28px; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head div { font-size: 14px; color: var(--muted); padding-bottom: 8px; }
/* Open and closed differ in shape, not just shade: open days are boxes, closed days a faint hatch. */
.cal-cell {
  position: relative; min-height: 100px; border: 1px solid transparent; border-radius: 0; padding: 10px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 6px; color: var(--closed-day); font-size: 16px;
  background: repeating-linear-gradient(135deg, var(--stone) 0 1px, transparent 1px 8px);
}
.cal-cell:not(.open):not(.blank)::after { content: "Closed"; margin-top: auto; font-size: 13px; }
.cal-cell.open { background: var(--open-day); border-color: var(--line); color: var(--ink); font-weight: 500; }
.cal-cell.open.full { background: var(--stone-2); }
.cal-cell.open:hover { border-color: var(--ink); }
.cal-cell.today { outline: 2px solid var(--sakura); outline-offset: -2px; }
.cal-cell.blank { background: none; cursor: default; color: var(--line); }
.cal-cell .mon { position: absolute; top: 10px; right: 10px; font-size: 13px; font-weight: 400; color: var(--muted); }
.cal-cell .dots { display: none; }
.cell-items { display: grid; gap: 4px; min-width: 0; font-weight: 400; }
.ci { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; }
.ci > span { overflow: hidden; text-overflow: ellipsis; }
.ci.mine { color: var(--sakura); }
.ci.more { color: var(--muted); }

/* ---------- album + past: photo cards ---------- */

/* ---------- feedback ---------- */
.fb-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.fb-item:last-child { border-bottom: 0; }
.fb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.fb-who { display: flex; align-items: center; gap: 10px; }
.fb-rating { color: var(--muted); font-style: italic; white-space: nowrap; }
.qa { margin: 0 0 8px; }

/* ---------- chips, toggles, segmented, switch ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .toggle { border: 1px solid var(--line); background: transparent; border-radius: 0; padding: 9px 15px; font-size: 16px; cursor: pointer; white-space: nowrap; }
.chip.on, .toggle.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.toggle-row { display: flex; gap: 8px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--stone-2); max-width: 100%; overflow-x: auto; }
.seg button { border: 0; background: none; padding: 8px 16px; font-size: 16px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--ink); color: var(--paper); }
.cur-seg { align-self: flex-start; }
.sw { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; vertical-align: middle; margin: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); transition: transform .15s; }
.sw:checked { background: var(--ink); }
.sw:checked::after { transform: translateX(18px); }
.sw:disabled { opacity: .5; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-emoji { display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
label.field, .field { display: grid; gap: 6px; font-size: 16px; color: var(--muted); }
input[type=text], input[type=email], input[type=number], input[type=time], input[type=date], input[inputmode], textarea, select {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 0; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font: 16px/1.3 var(--font-text);
}
/* iOS gives date/time inputs a wide intrinsic size that ignores width: 100% and pushes the page sideways. */
label.field, .field { min-width: 0; }
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; }
input::-webkit-date-and-time-value { text-align: left; }
textarea { min-height: 100px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 1px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.money-input { position: relative; }
.money-input span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 20px; }
.money-input input { padding-left: 54px; font-size: 28px; min-height: 60px; }
.receipt-pick, .cover-pick { display: flex; align-items: center; gap: 14px; }
.receipt-pick img { width: 60px; height: 60px; object-fit: cover; }
.cover-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cover-btns .btn { min-height: 40px; padding: 8px 16px; }
.cover-field > span:first-child { color: var(--muted); }
.cover-pick .cover.thumb { width: 96px; height: 96px; }
.check { display: flex; gap: 10px; align-items: center; color: var(--ink); }
.check input, .pick input { width: 20px; height: 20px; accent-color: var(--ink); }
.pick { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; }
.pick .main { display: grid; }
.pick-list .meta { font-size: 14px; }

/* ---------- admin ---------- */
.roles-page { max-width: 1040px; margin: 0 auto; }
.roles-page > .sec-h:first-child { margin-top: 24px; }
.viewas-card { display: grid; gap: 14px; padding: 20px 0 0; }
.sec-head + input { margin-top: 20px; }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 15px; font-weight: 400; color: var(--muted); padding: 16px 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl .c { text-align: center; }
.tbl select { width: auto; min-width: 130px; min-height: 40px; padding: 6px 10px; }
.tbl.perm td.c { font-size: 16px; }
.person-cell { display: flex; align-items: center; gap: 14px; }
.notes p { margin: 0 0 12px; }
.notes p:last-child { color: var(--muted); }
.room-prev { width: 160px; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--stone); flex-shrink: 0; }
.perm-list { display: none; }
.perm-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.perm-who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.feed { padding: 16px 0; border-top: 1px solid var(--line); }
.feed-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.feed-btns .btn { min-height: 40px; padding: 8px 6px; font-size: 15px; }

/* ---------- this week ---------- */
.week-hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 600px; padding: 44px;
  background: var(--stone) center / cover no-repeat; margin-top: 8px;
}
.week-hero.has-photo { color: var(--on-photo); }
.week-hero.has-photo::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.week-hero > * { position: relative; }
.wh-when { font-size: 17px; opacity: .9; }
.week-hero h1 { font-size: 72px; margin: 10px 0 14px; }
.wh-meta { font-size: 19px; }
.wh-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.wh-going { display: flex; align-items: center; gap: 14px; }
.week-hero.has-photo .faces .avatar { border-color: #3a3530; }
.wh-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wh-btns p { margin: 0 6px 0 0; }
.week-hero.has-photo .btn { border-color: var(--on-photo); color: var(--on-photo); background: transparent; }
.week-hero.has-photo .btn.primary { background: var(--on-photo); color: #161614; }
.week-hero.has-photo .btn.danger { background: transparent; border-color: var(--on-photo); }
.week-hero.has-photo .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.week-hero.has-photo .btn.primary:hover:not(:disabled) { background: var(--on-photo); }
.week-hero.has-photo .muted { color: inherit; opacity: .85; }
.sec-head.plain { border-bottom: 0; padding-bottom: 0; margin: 96px 0 28px; }
.week-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.week-card { display: grid; gap: 10px; align-content: start; cursor: pointer; }
.week-card img, .week-card .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--stone); margin-bottom: 4px; }
.week-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.week-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 96px; }
.week-pair > .tap { display: grid; gap: 14px; align-content: start; cursor: pointer; }
.week-big { font-size: 88px; line-height: 1; letter-spacing: -.02em; margin-top: 4px; }
.week-room { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.week-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.week-strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; cursor: pointer; }

/* ---------- about ---------- */
/* Ported from 16-about (desktop) and phone/17-about, docs/design/screens on the feldr-style-guide branch. */
body:has(#view-about:not([hidden])) { overflow-x: clip; }
/* Full-bleed bands: the background spans the window, the text keeps main's column. */
.about-bleed { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
/* A fixed optical size keeps the big lines soft, as in the reference; auto picks Fraunces's high-contrast display cut. */
.about-f, .about-stop .big { font-family: var(--font-display); font-weight: 300; letter-spacing: -.02em; font-variation-settings: "opsz" 36; }
#view-about h2 { letter-spacing: -.02em; }
.about-open {
  min-height: 760px; box-sizing: border-box; padding-top: 160px; padding-bottom: 64px; margin-top: 8px; margin-bottom: 120px;
  display: flex; flex-direction: column; justify-content: flex-end; color: var(--on-photo);
  background: linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .58)), var(--photo) center / cover no-repeat;
}
.about-open p { margin: 0; max-width: 13.5em; font-size: clamp(46px, 7.2vw, 112px); line-height: 1; }
.about-mem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
.about-mem div { display: flex; flex-direction: column; gap: 14px; }
.about-mem div:nth-child(2) { margin-top: 110px; }
.about-mem div:nth-child(3) { margin-top: 220px; }
.about-mem span { color: var(--muted); font-size: 17px; font-style: italic; }
.about-mem p { margin: 0; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; }
.about-just { padding: 140px 0 180px; display: flex; justify-content: flex-end; }
.about-just p { margin: 0; font-size: clamp(40px, 5.4vw, 84px); line-height: 1.02; max-width: 9em; }
.about-stop {
  display: flex; flex-direction: column; gap: 72px; padding-top: 200px; padding-bottom: 120px; color: var(--on-photo);
  background: linear-gradient(rgba(14, 14, 13, .72), rgba(14, 14, 13, .86)), var(--photo) center / cover no-repeat;
}
.about-stop h2 { margin: 0; font-size: clamp(48px, 8vw, 128px); line-height: .98; max-width: 8em; }
.about-stop .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 1100px; margin-left: auto; }
.about-stop .cols p { margin: 0; font-size: 22px; line-height: 1.45; opacity: .92; }
.about-stop .big { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; opacity: 1 !important; }
.about-fix { padding: 180px 0 64px; }
.about-fix h2 { margin: 0; font-size: clamp(46px, 7.2vw, 112px); line-height: 1; max-width: 12em; }
.about-mos { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 8px; }
.about-mos img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--stone); }
.about-mos .a { grid-row: span 2; }
.about-what { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 120px; }
.about-what .c { display: flex; flex-direction: column; gap: 22px; }
.about-what .ph { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; display: block; background: var(--stone); }
.about-what p { margin: 0; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.18; }
.about-chain { aspect-ratio: 4 / 5; background: var(--stone-2); display: flex; align-items: center; justify-content: center; position: relative; }
.about-chain .ln { position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: var(--ink); opacity: .35; }
.about-chain .fs { position: relative; display: flex; justify-content: space-between; width: 76%; }
.about-chain img { width: clamp(44px, 4.6vw, 68px); height: clamp(44px, 4.6vw, 68px); border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--stone-2); }
.about-chain img:nth-child(even) { transform: translateY(-34%); }
.about-chain img:nth-child(odd) { transform: translateY(34%); }
.about-nots { margin-top: 180px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-nots p { margin: 0; padding: 48px 28px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; text-align: center; }
.about-nots p + p { border-left: 1px solid var(--line); }
/* The closing photo runs to the bottom of the page, over main's bottom padding. */
.about-end {
  margin-top: 180px; margin-bottom: -96px; min-height: 880px; box-sizing: border-box; padding-top: 40px; padding-bottom: 40px;
  display: flex; flex-direction: column; justify-content: flex-end; color: var(--on-photo);
  background: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .55)), var(--photo) center / cover no-repeat;
}
.about-end h2 { margin: 0; font-size: clamp(48px, 7.6vw, 120px); line-height: .98; max-width: 10em; }

/* ---------- album ---------- */
.album-group + .album-group .sec-head.plain, .album-group .sec-head.plain { margin: 72px 0 24px; }
.page-head + .album-group .sec-head.plain { margin-top: 24px; }
/* Justified rows: each photo keeps its own shape (--r = width / height, set once it loads); a row shares one
   height and grows to fill the width. The filler keeps a short last row from being stretched. */
.mosaic { --row: 260px; display: flex; flex-wrap: wrap; gap: 10px; }
.mosaic::after { content: ""; flex: 999 1 0; }
.mosaic-item { --r: 1.333; flex: var(--r) 1 calc(var(--r) * var(--row)); aspect-ratio: var(--r); max-width: calc(var(--r) * var(--row) * 2); border: 0; padding: 0; background: var(--stone); cursor: pointer; overflow: hidden; }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-full { width: 100%; max-height: 70vh; object-fit: contain; display: block; background: var(--stone-2); margin: 4px 0 14px; }
.photo-cap { font-size: 18px; }

/* ---------- space availability (admin), free times ---------- */
.legend { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-top: 14px; }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend span::before { content: ""; width: 16px; height: 16px; box-sizing: border-box; flex-shrink: 0; }
.legend .l-open::before { background: var(--open-day); border: 1px solid var(--line); }
.legend .l-full::before { background: var(--stone-2); border: 1px solid var(--line); }
.legend .l-closed::before { background: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 4px); }
.legend .l-today::before { outline: 2px solid var(--sakura); outline-offset: -2px; }
.legend .l-mine { display: none; }
.legend .l-mine::before { border-radius: 50%; background: var(--stone); border: 1.5px solid var(--sakura); }
.free-times { margin: 0 0 16px; padding: 12px 14px; background: var(--stone-2); }
.avail .avail-h { margin: 24px 0 4px; font-family: var(--font-display); font-weight: 300; font-size: 22px; }
.avail .avail-h + p { margin: 0 0 10px; }
.avail-horizon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avail-horizon input { width: 80px; min-height: 42px; text-align: center; }
.avail-row { display: grid; grid-template-columns: 124px 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.avail-day { display: flex; align-items: center; gap: 10px; min-height: 42px; cursor: pointer; white-space: nowrap; }
.avail-day input { width: 18px; height: 18px; accent-color: var(--ink); }
.avail-slots { display: grid; gap: 6px; align-content: start; min-height: 42px; align-items: center; }
.avail-slots > .muted { line-height: 42px; }
.slot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.slot input[type=time] { width: 128px; min-height: 42px; padding: 4px 8px; }
.avail-actions { display: flex; gap: 4px; }
.icon-btn { min-width: 38px; min-height: 38px; border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.icon-btn:hover { background: var(--stone-2); color: var(--ink); }
.avail-add { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.avail-add input { width: auto; flex: 1 1 160px; }
@media (max-width: 520px) { .avail-row { grid-template-columns: 112px 1fr auto; } .avail-row:has(.slot) { grid-template-columns: 1fr auto; } .avail-row:has(.slot) .avail-slots { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- login code, donations, pay details ---------- */
.login-code { display: flex; gap: 8px; width: 100%; }
.login-code input[inputmode] { flex: 1; min-width: 0; text-align: center; font-size: 22px; letter-spacing: .15em; }
.nowrap { white-space: nowrap; }
.linkish { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0 4px; }
.wait-row { flex-wrap: wrap; }
.wait-btns { display: flex; gap: 8px; }
.wait-btns .btn { min-height: 38px; padding: 6px 14px; }
.pay-seg { margin-top: 6px; }
.copy-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 8px 0; border: 1px solid var(--line); }
.copy-row .main { flex: 1; min-width: 0; }
.copy-row .meta { font-size: 14px; }
.copy-row .copy-val { font-size: 18px; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.copy-row .btn { min-height: 38px; padding: 6px 14px; }
.verify { padding: 12px 14px; background: var(--stone-2); margin-bottom: 4px; }

/* ---------- sheet (dialog on desktop), toast ---------- */
#sheet-backdrop { position: fixed; inset: 0; background: rgba(20, 20, 18, .35); z-index: 20; }
#sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 90vh; overflow-y: auto;
  /* iOS measures vh with the toolbars hidden, so 90vh ran off the top of the screen (and took the close button with it). */
  max-height: calc(100dvh - env(safe-area-inset-top) - 24px);
  background: var(--paper); color: var(--ink); border-radius: 12px 12px 0 0;
  padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; animation: up .18s ease-out;
}
@keyframes up { from { transform: translateY(24px); opacity: .6; } }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 16px; }
/* Stays in the corner while a long form scrolls. */
#sheet-close { position: sticky; top: 0; float: right; z-index: 1; margin: 0 -6px 0 8px; min-width: 44px; min-height: 44px; font-size: 22px; color: var(--ink); background: var(--paper); }
#sheet h3 { font-size: 26px; margin-bottom: 6px; }
#sheet .sub { color: var(--muted); margin-bottom: 18px; }
#sheet .mg-head + .facts { margin-top: 20px; }
/* Pinned to the bottom of the sheet while the content above scrolls; the negative margins cancel the sheet's padding. */
.sheet-foot {
  position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px -20px calc(-24px - env(safe-area-inset-bottom)); padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--line);
}
.sheet-foot .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-foot .btn { flex: none; }
.pick-tabs { margin-bottom: 16px; }
#toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 30;
  max-width: 440px; margin: 0 auto; padding: 14px 18px; background: var(--ink); color: var(--paper); text-align: center;
}
#toast.err { background: var(--danger); color: #fff; }

/* ---------- desktop ---------- */
@media (min-width: 960px) {
  #sheet {
    top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
    width: min(600px, 92vw); max-height: 86vh; border-radius: 0; border: 1px solid var(--line); padding: 28px 30px 30px; animation: pop .16s ease-out;
  }
  @keyframes pop { from { opacity: 0; transform: translate(-50%, -48%); } }
  .sheet-grip { display: none; }
  .sheet-foot { bottom: -30px; margin: 18px -30px -30px; padding: 14px 30px; }
  #toast { left: auto; right: 32px; bottom: 32px; margin: 0; }
  .cols .col-side { position: sticky; top: 112px; }
}

/* ---------- tablet and phone ---------- */
@media (max-width: 1100px) {
  .pot-cols, .space-grid, .cols, .cols.manage { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .space-grid .a-book { margin-top: 64px; }
  .cols.manage .col-main { margin-top: 56px; }
  .pot-big { font-size: min(96px, 17cqi); }
}
@media (max-width: 860px) {
  .ev-page, .ev-page.no-cover { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cover" "main" "side"; margin-top: 24px; }
  .ev-cover { margin-bottom: 28px; }
  .ev-main { padding-top: 0; }
  .ev-side { margin-top: 8px; }
  .pot-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
  .topbar { padding-top: 10px; column-gap: 20px; }
  .topbar > .brand, .topbar > .me { min-height: 48px; }
  .brand { font-size: 28px; }
  .topbar > .nav { order: 3; flex-basis: 100%; min-height: 0; gap: 18px; padding-bottom: 14px; overflow-x: auto; flex-wrap: nowrap; }
  .nav a { white-space: nowrap; font-size: 16px; }
  .me-menu { top: calc(50% + 24px); }
  main { padding: 0 var(--gutter) 64px; }
  .page-head { margin: 24px 0 32px; }
  .sec-head, .sec-h { margin-top: 48px; }
  #login { grid-template-columns: minmax(0, 1fr); }
  .login-photo { min-height: 320px; }
  .login-card h1 { font-size: 88px; }
  .lede, .statement { font-size: 24px; }

  .tl-day { grid-template-columns: minmax(0, 1fr); padding-left: 24px; }
  .tl-date { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
  .tl-date strong { font-size: 20px; }
  .tl-day::after { top: 8px; }
  .ev-card { gap: 16px; padding-bottom: 36px; }
  .ev-card .ev-title { font-size: 24px; }
  .cover.thumb { width: 84px; height: 84px; }
  .ev-h { font-size: 44px; margin: 14px 0 24px; }
  .ev-h.long { font-size: 34px; }
  .reg { padding: 18px 16px; }
  #apply { scroll-margin-top: 76px; }

  .pot-big { font-size: min(72px, 17cqi); }
  .space-hero { min-height: 420px; padding: 24px var(--gutter) 28px; margin: 0 calc(var(--gutter) * -1); row-gap: 28px; align-content: flex-end; }
  .sh-text h1 { font-size: 48px; }
  .space-grid { margin-top: 44px; }
  .cal-head, .cal-grid { gap: 4px; }
  .cal-head div { text-align: center; font-size: 13px; }
  .cal-top .meta { font-size: 14px; }
  .cal-cell { min-height: 54px; aspect-ratio: auto; padding: 6px 0 4px; align-items: center; justify-content: space-between; text-align: center; font-size: 15px; }
  .cal-cell:not(.open):not(.blank)::after { display: none; }
  .cal-cell.today { outline: 1px solid var(--ink); outline-offset: -1px; }
  .cal-cell .mon { top: 1px; right: 0; left: 0; text-align: center; font-size: 10px; }
  .cal-cell:has(.mon) .dnum { margin-top: 6px; }
  .cell-items { display: none; }
  .cal-cell .dots { display: flex; justify-content: center; }
  .cal-cell .dots i { display: block; border-radius: 50%; line-height: 0; }
  .cal-cell .dots i + i { margin-left: -6px; }
  .cal-cell .dots i.mine { outline: 1.5px solid var(--sakura); outline-offset: 1px; position: relative; }
  .legend .l-mine { display: flex; }
  .legend .l-today::before { outline: 1px solid var(--ink); outline-offset: -1px; }

  .week-hero { min-height: 520px; padding: 24px 16px; margin: 0 calc(var(--gutter) * -1); }
  .week-hero h1 { font-size: 44px; }
  .wh-meta { font-size: 17px; }
  .wh-btns { width: 100%; }
  .wh-btns .btn { flex: 1 1 auto; }
  .sec-head.plain { margin: 64px 0 20px; }
  .week-cards, .week-pair { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .week-card .ph { display: none; }
  .sec-head.plain { flex-wrap: wrap; row-gap: 6px; }
  .week-pair { margin-top: 64px; }
  .week-big { font-size: 64px; }
  .week-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic { --row: 150px; gap: 6px; }
  .about-open { min-height: 560px; padding-top: 88px; padding-bottom: 36px; margin-top: 0; margin-bottom: 72px; }
  .about-open p { font-size: 46px; }
  .about-mem { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about-mem div { gap: 8px; }
  .about-mem div:nth-child(2) { margin: 0 0 0 28px; }
  .about-mem div:nth-child(3) { margin: 0 0 0 56px; }
  .about-just { padding: 88px 0 110px; justify-content: flex-start; }
  .about-stop { padding-top: 120px; padding-bottom: 72px; gap: 40px; }
  .about-stop .cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .about-stop .cols p { font-size: 19px; }
  .about-fix { padding: 110px 0 40px; }
  .about-mos { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 160px 160px; margin-inline: calc(var(--gutter) * -1); }
  .about-mos .a { grid-row: auto; grid-column: span 2; }
  .about-what { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 72px; }
  .about-chain, .about-what .ph { aspect-ratio: 4 / 3; }
  .about-nots { grid-template-columns: minmax(0, 1fr); margin-top: 110px; }
  .about-nots p { padding: 26px 0; text-align: left; }
  .about-nots p + p { border-left: 0; border-top: 1px solid var(--line); }
  .about-end { margin-top: 110px; margin-bottom: -64px; min-height: 620px; padding-top: 20px; padding-bottom: 28px; }
  .btn-row .btn { flex: 1 1 auto; padding: 12px 16px; }
  .reg-btns { grid-template-columns: minmax(0, 1fr); }
  .feed-btns { grid-template-columns: repeat(2, 1fr); }

  .tbl.stack thead { display: none; }
  .tbl.stack tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .tbl.stack td { border: 0; padding: 0 !important; }
  .tbl.stack td:first-child { grid-column: 1 / -1; }
  .tbl.stack td.c { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
  .tbl.stack td.c::before { content: attr(data-label); }
  .tbl.stack.people tr { grid-template-columns: 1fr auto; align-items: end; }
  .tbl.stack.people td[data-label="Role"] { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
  .tbl.stack.people td[data-label="Role"]::before { content: attr(data-label); }
  .tbl.stack.people select { width: 100%; min-width: 0; }
  .perm-list { display: block; }
  .perm-table { display: none; }
}

/* Admin → Usage */
.u-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 32px 0 0; }
.u-me { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); cursor: pointer; }
.u-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 40px 0 0; }
.u-tile { border-top: 1px solid var(--line); padding-top: 14px; }
.u-tile b { display: block; font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1; }
.u-tile span { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; }
.u-chart { position: relative; display: flex; gap: 10px; height: 160px; margin-top: 24px; }
.u-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 13px; padding-bottom: 1px; }
.u-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.u-col { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.u-col i { display: block; width: 100%; min-height: 0; background: var(--ink); border-radius: 4px 4px 0 0; }
.u-col:hover i { opacity: .7; }
.u-tip { position: absolute; top: -8px; transform: translate(-50%, -100%); background: var(--ink); color: var(--paper); font-size: 14px; padding: 4px 10px; white-space: nowrap; pointer-events: none; }
.u-xaxis { display: flex; justify-content: space-between; font-size: 13px; margin: 6px 0 0 30px; }
.u-quiet { margin-top: 14px; }
.u-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.u-list { list-style: none; margin: 0; padding: 0; }
.u-list li { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.u-row { display: flex; justify-content: space-between; gap: 16px; }
.u-row .num { white-space: nowrap; font-size: 15px; }
.u-bar { height: 3px; margin-top: 8px; background: var(--ink); border-radius: 0 2px 2px 0; }
@media (max-width: 760px) {
  .u-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) { .u-col i, .u-bar { background: CanvasText; } }

/* "Continue with WhatsApp": the code and the wait for the message (login card and the WhatsApp sheet). */
.wa-wait { display: grid; gap: 10px; }
.wa-wait .wa-waiting::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--muted); animation: wa-pulse 1.2s ease-in-out infinite; vertical-align: middle; }
@keyframes wa-pulse { 50% { opacity: .25; } }
#sheet .wa-wait { margin-top: 18px; }

/* ---------- new version ---------- */
#update-bar {
  position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 31;
  max-width: 440px; margin: 0 auto; padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
}
#update-bar span { flex: 1; }
#update-bar .btn { min-height: 40px; padding: 8px 18px; border-color: var(--paper); color: var(--paper); }
@media (min-width: 960px) { #update-bar { left: auto; right: 32px; bottom: 32px; margin: 0; } }

/* ---------- screen sizes (STYLE_GUIDE "Screen sizes", docs/design/screens/sizes) ----------
   Phone under 761, tablet 761-1023, laptop 1024-1439 (desktop, fluid), desktop 1440-1799, wide 1800 and up.
   Reading pages keep their measure at every size; only photo-led pages widen. */
@media (min-width: 761px) and (max-width: 1023px) {
  :root { --gutter: 32px; }
  .topbar { column-gap: 28px; }
  .nav { gap: 20px; }
  .week-hero { min-height: 480px; padding: 32px; }
  .week-hero h1 { font-size: 56px; }
  .week-cards { gap: 20px; }
  .week-pair { gap: 32px; }
  .sec-head.plain { margin: 72px 0 24px; }
  #view-events .page-head h1 { font-size: 48px; }
  .tl-day { grid-template-columns: 120px minmax(0, 1fr); gap: 0 24px; }
  .cover.thumb { width: 140px; height: 140px; }
  /* The event page keeps its photo column, narrower, instead of stacking. */
  .ev-page { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "cover main" "side main"; gap: 0 40px; margin-top: 40px; }
  .ev-page.no-cover { grid-template-areas: "side main"; }
  .ev-cover { margin-bottom: 36px; }
  .ev-main { padding-top: 14px; }
  .ev-side { margin-top: 0; }
  .ev-h { font-size: 48px; }
  .ev-h.long { font-size: 38px; }
  .mosaic { --row: 180px; }
}
/* From 1600 the top bar's contents sit in the 1600px frame (the bar's paper still runs edge to edge). */
@media (min-width: 1600px) {
  .topbar { padding-left: calc((100% - 1600px) / 2 + var(--gutter)); padding-right: calc((100% - 1600px) / 2 + var(--gutter)); }
}
/* Wide: photo-led pages fill the frame (1520 of content). */
@media (min-width: 1800px) {
  body:has(#view-week:not([hidden])) main, body:has(#view-album:not([hidden])) main,
  body:has(#view-space:not([hidden])) main, body:has(#view-house:not([hidden])) main { max-width: 1600px; }
  .week-hero { min-height: 720px; padding: 56px; }
  .week-hero h1 { font-size: 88px; }
  .week-cards { gap: 36px; }
  .mosaic { --row: 300px; gap: 12px; }
}