/* ShuttleDay site — the app's tokens (app/src/constants/theme.ts is the source; brand guide 2026-10-17,
   design/review/2026-10-16-3t-brand/brand-guide.md). Colour rules as in the app: navy for text, links (+ ›) and the one
   brand surface (the event page's band); orange fills only the one main button per page; headings and links are never
   orange. Radii: 6 tags · 12 small controls · 14 buttons and inputs · 20 cards · pill. */
:root {
  --bg: #f6f4f0;
  --surface: #ffffff;
  --surface-hi: #f2f0ec;
  --sunken: #efece7;
  --line: #e6e2dc;
  --text: #2A2C2E;
  --text2: #4a5163;
  --dim: #5f6573;
  --faint: #9aa0ad; /* decorations only (›, borders), never text */
  --accent: #1B7A4C;
  --accent-soft: #E4F0E8;
  --accent-text: #166640;
  --navy: #2A2C2E;
  --navy2: #22304f;
  --on-navy-dim: rgba(255, 255, 255, 0.78);
  --ok: #137a45;
  --ok-soft: #e3f6ec;
  --warn: #a35a00;
  --warn-soft: #fff1dd;
  --danger: #d33a3a;
  --line-green: #06c755; /* LINE's buttons only */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 20px;
  --radius: 20px;
  --shadow-card: 0 4px 12px rgba(21, 33, 59, 0.07);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: var(--text); text-underline-offset: 3px; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
header.site { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
header.site .brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 20px; letter-spacing: -0.5px; text-decoration: none; color: var(--navy); }
header.site .brand img { width: 28px; height: 28px; flex: none; }
header.site nav a { margin-left: 18px; color: var(--dim); text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.hero { padding: 56px 0 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
.hero h1 { font-size: 44px; line-height: 1.25; margin: 0 0 16px; letter-spacing: -0.5px; }
.hero p { color: var(--dim); font-size: 17px; margin: 0 0 24px; }
/* the brand line (2026-10-14): three short lines, each on one line from 320px up */
.hero h1.lines { font-size: min(30px, 6vw); line-height: 1.5; letter-spacing: 0; }
.hero h1.lines span { display: block; white-space: nowrap; }
.hero h1.lines em { font-style: normal; color: inherit; }
/* the tagline first, the statement under it (M12, owner 2026-10-17) */
.hero h1.tagline { font-size: min(40px, 8.4vw); line-height: 1.3; letter-spacing: -0.5px; }
.hero .statement { color: var(--text); font-size: 17px; font-weight: 700; line-height: 1.7; margin: 0 0 12px; }
.hero .statement span { display: block; }
.hero .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.badge { display: inline-block; background: var(--accent-soft); color: var(--accent-text); font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.cta { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 800; padding: 14px 22px; border-radius: var(--r-md); }
/* the second button: navy outline (orange fills only the main one) */
.cta.ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); margin-left: 8px; }
/* Apple's official badge (black, Apple's artwork from the App Store marketing tools; ≥ 40px high, clear space around) */
.store-badge { display: inline-block; line-height: 0; padding: 4px 0; }
.store-badge img { height: 44px; width: auto; display: block; }
/* line icons (functions/_icons.js) */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
/* the screen as a card (brand guide §7: no black 8px frame) */
.phone { background: var(--surface); border-radius: 32px; padding: 18px; box-shadow: 0 16px 36px rgba(21, 33, 59, 0.12); border: 1px solid var(--line); max-width: 300px; justify-self: center; }
.phone .card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin-bottom: 10px; display: flex; gap: 10px; }
.phone .date { background: var(--text); color: #fff; border-radius: var(--r-sm); width: 46px; text-align: center; font-weight: 800; font-size: 14px; padding: 6px 0; flex: none; }
.phone .t { font-weight: 800; font-size: 14px; }
.phone .m { color: var(--dim); font-size: 11px; }
.phone .tag { display: inline-block; background: var(--surface-hi); border-radius: var(--r-xs); font-size: 10px; font-weight: 700; padding: 1px 6px; margin-right: 4px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px 0 56px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.feature h3 { margin: 6px 0 6px; font-size: 17px; }
.feature p { margin: 0; color: var(--dim); font-size: 14px; }
.feature .icon { font-size: 26px; color: var(--navy); line-height: 1; }
.feature .icon .ic { width: 28px; height: 28px; }
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; margin: 16px 0 48px; }
.doc h1 { font-size: 28px; margin-top: 0; }
.doc h2 { font-size: 18px; margin-top: 28px; } /* no orange bar (M8) */
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc th, .doc td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: top; }
.doc th { width: 32%; color: var(--dim); font-weight: 700; }
.note { background: var(--surface-hi); color: var(--text); border-radius: var(--r-sm); padding: 12px 16px; font-size: 14px; }
footer.site { border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--dim); font-size: 13px; }
/* links 44px high (UX review 2026-10-16, B16): easy to tap */
footer.site a { color: var(--dim); margin-right: 14px; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; padding-top: 28px; }
  .hero h1 { font-size: 32px; }
  .features { grid-template-columns: 1fr; }
  header.site nav a { margin-left: 12px; }
  .doc { padding: 20px; }
}

/* real screenshots (2026-10-07) */
.phone.shot { padding: 0; overflow: hidden; }
.phone.shot img { display: block; width: 100%; height: auto; }
.shots { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: start; padding: 8px 0 48px; }
.shots figure { margin: 0; }
.shots img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(21, 33, 59, 0.08); }
.shots figure:first-child img { max-width: 300px; }
.shots figcaption { color: var(--dim); font-size: 14px; margin-top: 8px; }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } }

/* gallery of real screens (2026-10-07) */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; align-items: start; padding: 8px 0 56px; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(21, 33, 59, 0.08); }
.gallery figure.wide { grid-column: span 1; }
/* (2026-10-12: all shots are phone-sized now; no wide figure) */
.gallery figcaption { color: var(--dim); font-size: 14px; margin-top: 10px; }
.gallery figcaption b { display: block; color: var(--text); font-size: 16px; margin-bottom: 2px; }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } .gallery img { border-radius: 14px; } .gallery figcaption { font-size: 13px; } .gallery figcaption b { font-size: 15px; } }
.doc h3 { margin: 22px 0 6px; font-size: 16px; }

/* server-rendered pages (functions/): breadcrumb */
.crumbs { font-size: 13px; color: var(--dim); margin: 4px 0 -4px; }
.crumbs a { color: var(--dim); }
.crumbs span { color: var(--text); }

/* the event page (functions/run/[id].js + js/guest.js): facts, joining without an account */
.event .kicker { color: var(--dim); font-weight: 800; margin: 0; }
/* whose event (UX review 2026-10-15), and a time that moved since it was posted */
.event .host-line { color: var(--dim); font-weight: 700; margin: 0 0 4px; }
.event .changed, .guest .changed { background: var(--warn-soft); color: var(--warn); border-radius: var(--r-sm); padding: 8px 12px; font-weight: 800; margin: 4px 0; }
/* the guest notice, right above the join buttons */
/* before joining: what this page does for you (S#2 / S#10); after joining: no notifications without the app */
.guest #g-notice { color: var(--text2); font-size: 14px; margin: 0 0 12px; }
.guest #g-notice-after { margin: 12px 0; }
.made-with .legal { font-size: 13px; }
.made-with .legal a { color: var(--dim); display: inline-block; padding: 10px 2px; }
.event h1 { overflow-wrap: anywhere; }
.event p { overflow-wrap: anywhere; }
.event .notes { white-space: pre-wrap; }
.event .state { color: var(--danger); font-weight: 800; }
.guest h2 { font-size: 20px; margin: 0 0 8px; }
.guest form { display: grid; gap: 8px; margin: 12px 0; }
.guest label, .guest .label { font-size: 14px; font-weight: 700; margin: 0; }
.guest input { width: 100%; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); }
.guest input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.guest textarea { width: 100%; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); resize: vertical; }
.guest fieldset.g-questions { border: 0; padding: 0; margin: 8px 0 4px; display: grid; gap: 14px; min-width: 0; }
.guest fieldset.g-questions legend { font-size: 15px; font-weight: 800; padding: 0; margin-bottom: 8px; }
.guest .g-q { display: grid; gap: 6px; }
.guest .g-q.missing .label { color: var(--danger); }
.guest .g-q .req { color: var(--dim); font-size: 12px; }
.guest label.choice { display: flex; align-items: center; gap: 10px; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
.guest label.choice input { width: 20px; height: 20px; padding: 0; margin: 0; flex: none; accent-color: var(--accent); }
.guest .g-birth { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.guest .g-birth input { width: 6.5em; flex: none; }
.guest .g-birth #g-birth-month { width: 4.5em; }
.event .conds { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.event .conds .cond { border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 800; background: var(--surface-hi); color: var(--text); }
.guest button.cta { border: none; font: inherit; font-weight: 800; cursor: pointer; width: 100%; }
.guest button.cta.ghost { margin-left: 0; width: auto; flex: none; border: 1.5px solid var(--navy); }
.guest button.cta[disabled] { opacity: 0.6; cursor: default; }
.guest .cta.line { background: var(--line-green); }
.guest .cta.danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); margin-top: 8px; }
.guest .error { color: var(--danger); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.guest .or { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 13px; margin: 12px 0; }
.guest .or::before, .guest .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.guest .linkbox { background: var(--surface-hi); border-radius: var(--r-sm); padding: 12px 14px; margin: 12px 0; }
.guest .linkbox .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
/* narrow screen or large text: コピー goes under the link instead of squeezing it to a few px */
.guest .linkbox input { flex: 1 1 12em; font-size: 14px; padding: 10px 12px; }
.guest .linkbox p { margin: 0; }
.guest .linkbox .row.actions { flex-wrap: wrap; margin-top: 10px; }
.guest .linkbox .row.actions:empty { display: none; }
.guest .linkbox .row.actions .cta { flex: 1 1 auto; padding: 10px 14px; }
.guest h2[tabindex='-1']:focus { outline: none; }
.guest #g-head { scroll-margin-top: 16px; }
/* cancelled / ended / members only: the status box has nothing to say, so no empty white box */
.guest:has(> #g-status[hidden]:only-child) { display: none; }
.guest .confirm { margin-top: 8px; }
.guest .confirm p { margin: 0 0 8px; font-weight: 700; }
.guest .confirm .row { display: flex; flex-direction: column; gap: 8px; }
.guest .confirm .row .cta { width: 100%; margin: 0; }
.guest details.upgrade { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.guest details.upgrade summary { cursor: pointer; font-weight: 800; color: var(--text); }
.guest [hidden] { display: none !important; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.actions .cta.ghost { margin-left: 0; }
@media (max-width: 360px) { .wrap { padding: 0 12px; } .doc { padding: 16px; } }

/* the organizers' page (hosts.html, en/hosts.html), mobile first */
.hosts .kicker { color: var(--dim); font-weight: 800; margin: 0 0 6px; font-size: 14px; }
.hosts-hero { padding: 20px 0 8px; }
.hosts-hero h1 { font-size: 28px; line-height: 1.35; margin: 0 0 20px; letter-spacing: -0.3px; overflow-wrap: anywhere; }
.hosts .actions { gap: 10px; }
.hosts .actions .cta { flex: 1 1 200px; text-align: center; margin-left: 0; }
.hosts-points { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
.hosts .point { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.hosts .point h2 { font-size: 17px; margin: 0 0 4px; line-height: 1.5; }
.hosts .point p { margin: 0; color: var(--dim); font-size: 15px; }
.hosts-shots { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 20px; }
.hosts-shots figure { margin: 0; flex: 0 0 62%; scroll-snap-align: start; }
.hosts-shots img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(21, 33, 59, 0.08); }
.hosts-shots figcaption { color: var(--dim); font-size: 13px; margin-top: 8px; text-align: center; }
.hosts-steps { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 8px 0 48px; }
.hosts-steps h2 { font-size: 20px; margin: 0 0 8px; }
.hosts-steps ol { margin: 0 0 20px; padding-left: 1.4em; font-size: 16px; font-weight: 700; }
.hosts-steps li { padding: 4px 0; }
@media (min-width: 720px) {
  .hosts-hero { padding: 48px 0 16px; }
  .hosts-hero h1 { font-size: 40px; }
  .hosts .actions .cta { flex: 0 0 auto; }
  .hosts-points { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hosts-shots { overflow: visible; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .hosts-shots figure { flex: none; }
  .hosts-steps { padding: 28px 32px; }
}

/* the event page's quiet footer (functions/run/[id].js) and the short line after joining (js/guest.js) */
.made-with { border-top: 1px solid var(--line); margin: 8px 0 40px; padding-top: 16px; color: var(--dim); font-size: 13px; }
.made-with p { margin: 0 0 4px; }
.guest .made-with-short { color: var(--dim); font-size: 12px; margin: 14px 0 0; }

/* /map (functions/map.js, js/map.js): the app's さがす map on the web — pins per court, floating cards */
.mapPage .lead { color: var(--dim); margin-top: -6px; }
.mapPage .map { position: relative; height: min(62vh, 520px); min-height: 320px; border-radius: var(--r-lg); overflow: hidden; margin: 12px 0 20px; background: var(--sunken); }
.mapPage .pin { display: flex; align-items: center; gap: 5px; background: var(--surface); color: var(--text); border-radius: var(--r-sm); padding: 4px 8px; font-size: 12px; font-weight: 800; white-space: nowrap; max-width: 170px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); cursor: pointer; }
.mapPage .pin .name { overflow: hidden; text-overflow: ellipsis; }
.mapPage .pin .count { background: var(--accent); color: #fff; border-radius: var(--r-xs); min-width: 18px; padding: 0 5px; text-align: center; font-size: 11px; line-height: 16px; }
.mapPage .pin .count.dim { background: var(--dim); }
.mapPage .pin.ended { opacity: 0.6; }
.mapPage .pin.on { background: var(--accent); color: #fff; opacity: 1; }
.mapPage .pin.on .count { background: #fff; color: var(--accent); }
.pinCards { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 10; }
.pinCards .row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 12px; scrollbar-width: none; }
.pinCards .row::-webkit-scrollbar { display: none; }
.pinCards .mini { flex: 0 0 min(360px, calc(100% - 60px)); min-width: 0; scroll-snap-align: start; scroll-margin-left: 12px; display: flex; align-items: center; gap: 12px; background: var(--surface); color: var(--text); text-decoration: none; border-radius: var(--r-lg); padding: 12px; box-shadow: 0 3px 12px rgba(21, 33, 59, 0.2); line-height: 1.4; }
.pinCards .row .mini:only-child { flex-basis: 100%; }
.pinCards .date { flex: none; width: 46px; border-radius: var(--r-sm); background: var(--text); color: #fff; text-align: center; padding: 5px 0; }
.pinCards .date.dim { background: var(--dim); }
.pinCards .date small { display: block; font-size: 11px; font-weight: 700; color: var(--on-navy-dim); }
.pinCards .date b { font-size: 14px; }
.pinCards .body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pinCards .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.pinCards .time { font-weight: 700; color: var(--dim); }
.pinCards .tag { flex: none; border-radius: var(--r-xs); padding: 1px 7px; font-size: 11px; font-weight: 700; background: var(--surface-hi); color: var(--dim); }
.pinCards .tag.open { background: var(--accent-soft); color: var(--accent-text); }
.pinCards .title { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinCards .court { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinCards .nth { flex: none; color: var(--dim); }
@media (max-width: 720px) { .mapPage .map { margin: 12px -20px 20px; border-radius: 0; height: min(66vh, 520px); } }
.maplink { display: inline-block; margin-top: 14px; font-weight: 800; color: var(--text); }
.mapPage .cluster { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 17px; background: var(--accent); color: #fff; font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); cursor: pointer; }
header.site nav a { white-space: nowrap; }
@media (max-width: 380px) { header.site .brand { font-size: 18px; } header.site nav a { margin-left: 10px; font-size: 13px; } }
.hero .hint { font-size: 14px; margin-top: 16px; }
/* narrow screens: the header keeps the main links (the rest are in the footer) */
@media (max-width: 480px) { header.site nav a.wide-only { display: none; } }

/* the event page from a LINE link (2026-10-14): 「LINEで参加」 first inside LINE, the status after joining */
.guest #g-line-block p { margin: 6px 0 0; }
.guest #g-join.in-line #g-line { font-size: 19px; padding: 18px 20px; border-radius: var(--r-md); box-shadow: 0 6px 16px rgba(6, 199, 85, 0.25); }
.guest #g-name-block h3 { font-size: 16px; margin: 0 0 4px; }
/* 「① 参加の前に」 then 「② 参加のしかた」 (2026-10-14): two clearly separate steps when the event asks something */
.guest h3.g-step-title { font-size: 17px; font-weight: 800; color: var(--text); margin: 16px 0 8px; }
.guest .g-step + .g-step { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--line); }
.guest #g-before-error { margin: 10px 0 0; }
.guest .cta { overflow-wrap: anywhere; }
.guest h2.g-done-head { font-size: 26px; line-height: 1.35; margin-bottom: 4px; }
.guest h2.g-done-head.joined, .guest h2.g-done-head.invited { color: var(--ok); }
.guest .g-when { font-size: 18px; font-weight: 800; margin: 0; }
.guest .g-where { margin: 0 0 8px; overflow-wrap: anywhere; display: flex; gap: 6px; align-items: baseline; }
.guest .g-where .ic { color: var(--dim); align-self: center; }
.guest .g-actions { display: grid; gap: 8px; margin: 14px 0; }
.guest .g-actions .cta { display: block; width: 100%; margin: 0; text-align: center; padding: 12px 14px; }
.guest .g-actions .cta:first-child { background: var(--accent); color: #fff; border-color: var(--accent); }
.guest .g-actions #g-line-save { border-color: var(--line-green); color: var(--ok); }
.guest #g-app #app-links { margin-top: 10px; }
.guest #g-app .actions .cta { flex: 1 1 auto; text-align: center; }

/* the contact form (functions/contact.js, js/contact.js) */
.contact form { display: grid; gap: 6px; margin: 16px 0 8px; }
.contact label { font-size: 14px; font-weight: 700; margin-top: 8px; }
.contact input, .contact select, .contact textarea { width: 100%; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); }
.contact textarea { resize: vertical; }
.contact input:focus, .contact select:focus, .contact textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.contact .count { margin: 0; text-align: right; }
.contact .count.over { color: var(--danger); font-weight: 700; }
.contact button.cta { border: none; font: inherit; font-weight: 800; cursor: pointer; width: 100%; margin-top: 8px; }
.contact button.cta[disabled] { opacity: 0.6; cursor: default; }
.contact .error { color: var(--danger); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.contact .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact #c-done h2 { color: var(--ok); }
.contact #c-done h2:focus { outline: none; }
.contact [hidden] { display: none !important; }
.contact p, .contact a { overflow-wrap: anywhere; }
#hosts-contact { margin: 16px 0 0; font-size: 14px; }
/* very large text (accessibility sizes): the header wraps instead of scrolling sideways (2026-10-14) */
header.site { flex-wrap: wrap; gap: 4px 0; }
header.site nav { display: flex; flex-wrap: wrap; justify-content: flex-end; }
header.site .brand { min-width: 0; overflow-wrap: anywhere; }
.guest form, .contact form { grid-template-columns: minmax(0, 1fr); }

/* the Android release date under the store buttons (2026-10-14) */
.android-note, #android-note, .hero p.android-note { font-size: 12px; line-height: 1.5; margin: 8px 0 0; color: var(--dim); }

/* the event page's first screen (UX review 2026-10-16, F6): the facts as a labelled list, 「アプリをお持ちの方は アプリで開く」
   as one line, and the join bar fixed at the bottom until the join block is on screen (functions/run/[id].js barHtml) */
.event dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; row-gap: 8px; margin: 12px 0; }
.event dl.facts dt { color: var(--dim); font-weight: 700; font-size: 14px; padding-top: 2px; }
.event dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.event dl.facts dd small { color: var(--dim); font-size: 14px; }
.event dl.facts [hidden] { display: none; }
.event .host-line #ev-hosted { white-space: nowrap; }
.open-line { margin: 0 0 12px; font-size: 15px; }
.open-line a { font-weight: 800; display: inline-block; padding: 10px 0; }
.join-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.join-bar[hidden] { display: none; }
.join-bar-in { max-width: 560px; margin: 0 auto; display: grid; gap: 2px; }
.join-bar .cta { display: block; width: 100%; text-align: center; margin: 0; padding: 14px 16px; font-size: 17px; overflow-wrap: anywhere; }
.join-bar .cta.line { background: var(--line-green); }
.join-bar .bar-name { display: block; text-align: center; color: var(--dim); font-size: 14px; font-weight: 700; text-decoration: none; padding: 10px 0 2px; }
.join-bar .bar-name[hidden] { display: none; }
body:has(> #join-bar:not([hidden])), body.has-bar { padding-bottom: 120px; }
/* … in rem too: with larger text (320 px, 1.5×) the fixed bar is taller and hid the end of the page (round 5 B-16) */
body:has(> #join-bar:not([hidden])), body.has-bar { padding-bottom: max(120px, calc(7.5rem + env(safe-area-inset-bottom))); }

/* the home page's 「近日の募集」 (functions/_home.js, E4): up to 3 real upcoming events */
.upcoming { padding: 0 0 32px; }
.upcoming h2 { font-size: 20px; margin: 0 0 12px; }
.upcoming .up-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.upcoming .up-card { display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; color: var(--text); text-decoration: none; line-height: 1.5; min-height: 44px; }
.upcoming .up-when { font-weight: 800; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.upcoming .up-title { font-size: 16px; overflow-wrap: anywhere; }
.upcoming .up-where, .upcoming .up-facts { color: var(--dim); font-size: 14px; overflow-wrap: anywhere; }
.upcoming .up-where .ic { margin-right: 4px; }

/* ---- the event page (M6 / S#9, 2026-10-17): the app's look — the navy band with faint court lines, the date and the
   big white time, the three numbers (レベル / 参加費 / 人数) overlapping the band, the host and the court as list rows.
   functions/run/[id].js bandHtml + render, functions/_icons.js */
.wrap.narrow { max-width: 640px; }
.navy-top { background: var(--navy); color: #fff; }
.band-bg { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding-bottom: 56px; }
.band-bg .court-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.08; pointer-events: none; }
.band-bg .wrap { position: relative; }
header.site.on-navy .brand { color: #fff; }
header.site.on-navy nav a { color: var(--on-navy-dim); }
.band { padding: 4px 0 0; display: grid; gap: 4px; }
.band .kicker { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--on-navy-dim); font-weight: 700; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.band .kicker .ic { width: 18px; height: 18px; }
.band .when { margin: 0; display: grid; gap: 2px; }
.band .when .day { color: var(--on-navy-dim); font-size: 17px; font-weight: 600; line-height: 1.4; }
.band .when .sep { display: none; }
.band .when .time { color: #fff; font-size: clamp(34px, 11vw, 48px); font-weight: 900; line-height: 1.1; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.band.struck .when .time { color: var(--on-navy-dim); text-decoration: line-through; }
.band h1 { color: #fff; font-size: 21px; line-height: 1.4; font-weight: 700; margin: 4px 0 0; overflow-wrap: anywhere; }
.band .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.band .chips p { margin: 0; }
.band .conds { display: flex; flex-wrap: wrap; gap: 6px; }
.band .conds .cond { border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 800; background: var(--navy2); color: #fff; }
.band .state { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 14px; font-weight: 800; background: #fff; color: var(--danger); }
.band .changed { display: flex; align-items: center; gap: 6px; background: var(--warn-soft); color: var(--warn); border-radius: var(--r-sm); padding: 8px 12px; font-weight: 800; margin: 0 0 6px; font-size: 14px; }
main.event .ev-main { display: grid; gap: 12px; margin-top: -36px; margin-bottom: 16px; position: relative; }
main.event .ev-main:empty { display: none; }
main.event { margin-bottom: 16px; }
main.event .card, .ev-page .guest.doc { background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
main.event .card { padding: 4px 16px; }
main.event .nums-card { padding: 16px 0 12px; }
main.event dl.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
main.event .num { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; text-align: center; min-width: 0; }
main.event .num + .num { border-left: 1px solid var(--line); }
main.event .num dt { color: var(--dim); font-size: 12px; font-weight: 700; }
main.event .num dd { margin: 0; display: grid; gap: 0; min-width: 0; overflow-wrap: anywhere; }
/* round 5 B-16: Japanese words stay whole (「エンジョイ〜ミド／ル」 broke inside the word); breaks at 〜 (<wbr>) and spaces.
   overflow-wrap: break-word only for a word longer than the card */
:lang(ja) main.event .num dd, :lang(ja) .band h1, :lang(ja) .band .kicker { word-break: keep-all; overflow-wrap: break-word; }
main.event .num dd b { font-size: 18px; line-height: 1.35; font-weight: 800; font-variant-numeric: tabular-nums; }
main.event .num dd small { color: var(--dim); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
main.event .spots { margin: 12px 16px 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--text2); font-size: 14px; text-align: center; overflow-wrap: anywhere; }
main.event .spots[hidden] { display: none; }
main.event ul.list { list-style: none; margin: 0; }
main.event .row + .row { border-top: 1px solid var(--line); }
main.event .row, main.event .row-link { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; line-height: 1.45; }
main.event .row-link { flex: 1; min-width: 0; color: var(--text); text-decoration: none; padding: 0; }
main.event .row-text { display: grid; flex: 1; min-width: 0; overflow-wrap: anywhere; }
main.event .row-text b { font-size: 16px; font-weight: 700; }
main.event .row-text small { color: var(--dim); font-size: 13px; }
main.event .lead { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--dim); }
main.event .lead .ic { width: 22px; height: 22px; }
main.event .lead.avatar { border-radius: 50%; background: var(--surface-hi); color: var(--navy); font-weight: 800; font-size: 15px; }
main.event .lead.pin { border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
main.event .lead.pin .ic { width: 18px; height: 18px; }
main.event .chev { color: var(--faint); width: 16px; height: 16px; }
main.event .notes { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0; }
.ev-page .guest.doc { padding: 20px; margin: 0 0 24px; }
.ev-page .guest h2 { margin-top: 0; }
.ev-page #app-links { margin: 0 0 8px; }
@media (min-width: 720px) {
  .band-bg { padding-bottom: 64px; }
  .band .when .time { font-size: 52px; }
}
main.event .num dd b.lv { font-size: 16px; }
.hosts-hero .statement { color: var(--text2); font-weight: 700; line-height: 1.7; margin: -8px 0 20px; }
.hosts-hero .statement span { display: block; }
/* the small line above a title on the area / court / group pages: navy-dim with a line icon, not orange (M7/M8/M11) */
.kicker-line, .doc > .kicker { display: flex; align-items: center; gap: 6px; color: var(--dim); font-weight: 800; }
.warn-line { display: flex; align-items: center; gap: 6px; color: var(--warn); font-weight: 700; margin: 0 0 4px; }
/* the level's names are the longest value (「エンジョイ〜ミドル」, "Casual–Intermediate"): a wider column, smaller type */
main.event dl.nums { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
main.event .num dd b.lv { font-size: 15px; line-height: 1.3; hyphens: auto; -webkit-hyphens: auto; }
.hero h1.tagline span { display: inline-block; }
.band-bg.alone { padding-bottom: 24px; }

/* home stories (2026-10-17): the store's order, people first — a headline, a line, one or two real screens */
.stories { padding: 8px 0 24px; }
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 32px 0; border-top: 1px solid var(--line); }
.story:nth-child(even) .story-text { order: 2; }
.story h2 { font-size: min(34px, 7.4vw); line-height: 1.3; letter-spacing: -0.3px; margin: 0 0 12px; }
.story h2 span { display: block; }
.story h2 em { font-style: normal; color: var(--accent); }
.story p { color: var(--text2); font-size: 16px; margin: 0 0 10px; }
.story .maplink { font-weight: 700; }
.story-shots { display: flex; gap: 18px; justify-content: center; align-items: flex-start; }
.story-shots figure { margin: 0; flex: 0 1 180px; min-width: 0; }
.story-shots img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 16px 36px rgba(21, 33, 59, 0.12); }
.story-shots figure + figure { margin-top: 24px; }
.story-shots figcaption { color: var(--dim); font-size: 13px; margin-top: 8px; text-align: center; }
.more h2 { font-size: 22px; margin: 32px 0 0; }
.more .features { padding-top: 16px; }
@media (max-width: 760px) {
  .story { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .story:nth-child(even) .story-text { order: 0; }
  .story-shots { gap: 12px; }
  .story-shots figure { flex-basis: 46%; max-width: 170px; }
  .story-shots figure + figure { margin-top: 16px; }
}
/* who is going, as initial circles (round 9 decision 6): no names, dashed circles for the empty places */
main.event .faces, .guest .faces { display: flex; flex-wrap: wrap; justify-content: center; margin: 10px 16px 0; padding-left: 6px; }
main.event .faces .face, .guest .faces .face { width: 30px; height: 30px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--surface, #fff); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; box-sizing: border-box; }
main.event .faces .face.more, .guest .faces .face.more { background: var(--sunken, #EFECE7); color: var(--text2); font-size: 11px; }
main.event .faces .face.open, .guest .faces .face.open { background: transparent; border: 2px dashed #CFC9BF; }
main.event .faces .face.you, .guest .faces .face.you { box-shadow: 0 0 0 2px var(--accent, #1B7A4C); position: relative; z-index: 1; }
/* after joining (round 9 decision 5): you count, with the faces; then pass it on */
.guest .g-you { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; margin: 4px 0 8px; }
.guest .g-you .faces { margin: 0; justify-content: flex-start; }
.guest .g-you p { margin: 0; font-weight: 800; }
.guest .g-invite { margin-top: 14px; background: var(--sunken); border-radius: 14px; padding: 12px 14px; }
.guest .g-invite .label { margin: 0 0 8px; font-weight: 800; }
.guest .g-invite .cta { margin: 0; }

/* ShuttleDay: not in the stores yet (scripts/site-build.mjs) */
.store-badge { display: none !important; }