/* Plan pages (/long-stay/, /anniversary-plan/) in the activity detail grammar (owner 2026-10-16): one block per
   facility, switched by the facility tabs. Built by scripts/build-plan-pages.mjs. */
/* /long-stay/ in the activity detail grammar (owner 2026-10-16). One block per facility; the blocks are invisible
   wrappers so the activity page grid places their parts. */
.bub-site-page main.plan-blocks-app > .plan-facility-block { display: contents; }
.bub-site-page main.plan-blocks-app > .plan-facility-block[hidden] { display: none; }
.bub-site-page main.plan-blocks-app .plan-facility-switch { margin: 0 0 24px; }
/* Season cards: the season over the activity, the running one marked. */
.bub-site-page main.plan-blocks-app .long-stay-season-when { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; color: rgb(47 47 47 / 72%); }
.bub-site-page main.plan-blocks-app .long-stay-season-row .activity-c-related-card { position: relative; }
.bub-site-page main.plan-blocks-app .long-stay-season-when span { font-family: var(--font-num), var(--font-ja); }
.bub-site-page main.plan-blocks-app .long-stay-season-now { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 0 6px; border-radius: 4px; background: var(--color-muchu, #d56e59); color: #fcfcfc; font-size: 11px; line-height: 18px; font-style: normal; font-weight: 700; }
.bub-site-page main.plan-blocks-app div.activity-c-related-card { cursor: default; }
@media (min-width: 768px) {
  /* The activity grid places main's own children; here they sit one wrapper down (display: contents). */
  .bub-site-page main.plan-blocks-app > .plan-facility-block > * { grid-column: 1 / -1; min-width: 0; }
  .bub-site-page main.plan-blocks-app > .plan-facility-block > :is(.activity-c-hero, .activity-app-body) { display: contents !important; }
}
@media (min-width: 768px) {
  /* The facility switch sits at the right end of the title row; the day after check-out under the photos. */
  .bub-site-page main.plan-blocks-app .plan-facility-switch { grid-column: 2 / 5; grid-row: 2; justify-self: end; align-self: end; width: auto; margin: 0; }
}
/* Season cards: the season line right under the photo (owner 2026-10-16: the gap was too wide). */
.bub-site-page main.plan-blocks-app .long-stay-seasons .activity-c-related-copy { padding-top: 8px; }
.bub-site-page main.plan-blocks-app .long-stay-seasons .activity-c-related-copy small.long-stay-season-when { margin-top: 0; line-height: 20px; }
.bub-site-page main.plan-blocks-app .long-stay-seasons .activity-c-related-copy strong + small { margin-top: 4px; }
/* The seasons and 「…の滞在をもっと見る」 read as one ending (owner 2026-10-16: the gap between them was too wide). */
.bub-site-page main.plan-blocks-app .long-stay-seasons { padding-bottom: 0; }
.bub-site-page main.plan-blocks-app .long-stay-seasons + .activity-c-related { padding-top: 40px; }
@media (min-width: 768px) { .bub-site-page main.plan-blocks-app .long-stay-seasons + .activity-c-related { padding-top: 56px; } }
@media (max-width: 767px) {
  /* The title block starts higher on the photo than an activity's; the shade starts with it (owner 2026-10-16). */
  /* The gallery's ::after is the torn-paper edge here (18px), so the shade sits behind the title block itself. */
  /* Over the whole photo, under the title and the torn edge, so it reaches the edge without a pale band (owner 2026-10-16). */
  .bub-site-page main.plan-blocks-app.activity-app .activity-c-hero { position: relative; }
  .bub-site-page main.plan-blocks-app.activity-app .activity-c-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / 18%) 0%, rgb(0 0 0 / 0%) 18%, rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 42%) 62%, rgb(0 0 0 / 66%) 100%); pointer-events: none; }
  .bub-site-page main.plan-blocks-app.activity-app .activity-c-hero-copy :is(a, h1, p) { text-shadow: 0 1px 14px rgb(0 0 0 / 60%), 0 1px 3px rgb(0 0 0 / 45%); }
  .bub-site-page main.plan-blocks-app.activity-app .activity-frame-kinds span { background: rgb(0 0 0 / 32%); }
}
/* チェックアウト後の過ごし方 as four photographed moments (owner 2026-10-16): sideways on a phone, two by two on
   the web; the tag says which plans reach that moment. */
.bub-site-page main.plan-blocks-app .long-stay-scene-rail { display: flex; align-items: flex-start; gap: 12px; margin: 0 calc(var(--gutter, 20px) * -1); padding: 0 var(--gutter, 20px) 4px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 20px); scrollbar-width: none; }
.bub-site-page main.plan-blocks-app .long-stay-scene-rail::-webkit-scrollbar { display: none; }
.bub-site-page main.plan-blocks-app .long-stay-scene-rail li { flex: 0 0 72%; min-width: 0; scroll-snap-align: start; }
.bub-site-page main.plan-blocks-app .long-stay-scenes .long-stay-scene-rail figure { aspect-ratio: 4 / 3; }
.bub-site-page main.plan-blocks-app .long-stay-scene-rail li > div { padding-top: 10px; }
.bub-site-page main.plan-blocks-app .long-stay-scene-time { display: flex; align-items: center; gap: 8px; margin: 0; }
.bub-site-page main.plan-blocks-app .long-stay-scene-time time { font: 700 15px/22px var(--font-num), var(--font-ja); color: var(--ink); }
.bub-site-page main.plan-blocks-app .long-stay-scene-time span { padding: 0 8px; border-radius: 999px; background: var(--surface-subtle, #f3f4f4); color: rgb(47 47 47 / 80%); font-size: 11px; line-height: 20px; font-weight: 700; }
.bub-site-page main.plan-blocks-app .long-stay-scene-rail strong { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; }
.bub-site-page main.plan-blocks-app .long-stay-scene-rail li > div > p:not(.long-stay-scene-time) { margin: 2px 0 0; color: rgb(47 47 47 / 72%); font-size: 13px; line-height: 20px; }
@media (min-width: 768px) {
  .bub-site-page main.plan-blocks-app .long-stay-scene-rail { display: grid; align-items: stretch; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin: 0; padding: 0; overflow: visible; }
}
/* Facility tabs pinned under the header while scrolling (long-stay-seasons.js). */
.bub-site-page main.plan-blocks-app .plan-facility-switch-sentinel { height: 0; }
.bub-site-page main.plan-blocks-app .plan-facility-switch.is-pinned { position: fixed; z-index: 36; top: var(--plan-switch-top, 0px); left: 0; right: 0; width: auto; margin: 0; padding: 0 var(--gutter, 20px); background: var(--paper, #fcfcfc); }
@media (min-width: 768px) {
  .bub-site-page main.plan-blocks-app .plan-facility-switch.is-pinned { justify-self: auto; padding: 0 max(32px, calc((100% - 1200px) / 2)); grid-template-columns: repeat(3, 160px); }
  .bub-site-page main.plan-blocks-app .plan-facility-switch-spacer { grid-column: 2 / 5; grid-row: 2; }
  /* On the activity grid: the start line sits on the tabs' own cell, the end line after the last section. */
  .bub-site-page main.plan-blocks-app .plan-facility-switch + .plan-facility-switch-sentinel,
  .bub-site-page main.plan-blocks-app .activity-app-side > .plan-facility-switch-sentinel { grid-column: 2 / 5; grid-row: 2; align-self: end; }
  .bub-site-page main.plan-blocks-app .plan-facility-block > .plan-facility-switch-sentinel { grid-column: 1 / -1; }
}
/* The phone's app bar (plan-blocks.js), as on room pages: over the photo, then solid with the plan's name. */
.plan-appbar { display: none; }
@media (max-width: 767px) {
  body.has-plan-appbar.bub-site-page > :is(#header, #mnav) { display: none !important; }
  .bub-site-page main.plan-blocks-app .plan-appbar { position: fixed; z-index: 100; inset: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; height: calc(56px + env(safe-area-inset-top)); padding: calc(6px + env(safe-area-inset-top)) 12px 6px; background: transparent; border-bottom: 1px solid transparent; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
  .bub-site-page main.plan-blocks-app .plan-appbar-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(252 252 252 / 92%); color: var(--ink); text-decoration: none; cursor: pointer; }
  .bub-site-page main.plan-blocks-app .plan-appbar-button .ic { width: 22px; height: 22px; }
  .bub-site-page main.plan-blocks-app .plan-appbar-title { overflow: hidden; color: var(--ink); opacity: 0; font: 700 16px/22px var(--font-ja); text-overflow: ellipsis; white-space: nowrap; text-align: center; transition: opacity 150ms ease-out; }
  .bub-site-page main.plan-blocks-app .plan-appbar.is-scrolled { background: var(--paper, #fcfcfc); border-bottom-color: var(--line); }
  .bub-site-page main.plan-blocks-app .plan-appbar.is-scrolled .plan-appbar-title { opacity: 1; }
  .bub-site-page main.plan-blocks-app .plan-appbar.is-scrolled .plan-appbar-button { background: transparent; }
  /* The bar carries back and share; the photo's own pair would sit under it. */
  .bub-site-page main.plan-blocks-app .activity-c-gallery-shell :is(.activity-reference-back, .page-share) { visibility: hidden; }
  /* Pinned facility tabs: no line of their own under the solid bar. */
  .bub-site-page main.plan-blocks-app .plan-facility-switch.is-pinned { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .bub-site-page main.plan-blocks-app :is(.plan-appbar, .plan-appbar-title) { transition: none; } }
@media (max-width: 767px) {
  /* Under the promo bar while it shows, as the room pages' bar (promo-bar.css). */
  /* The promo bar stays put here (activity pages let it scroll away), so the bar never floats off it. */
  body.bub-site-page:has(main.plan-blocks-app) > .promo-bar { position: fixed; }
  body.bub-site-page:has(> .promo-bar) main.plan-blocks-app .plan-appbar { top: var(--promo-h, 48px); }
}
@media (min-width: 768px) {
  /* アニバーサリー has two more parts in its story column; they follow the photos down the left. */
  .bub-site-page main.plan-blocks-app.activity-app[data-activity-frame] .activity-frame-facts.anniversary-includes { grid-column: 2; grid-row: 5; margin-top: 56px; }
  .bub-site-page main.plan-blocks-app.activity-app[data-activity-frame] .activity-frame-flow.anniversary-why { grid-column: 2; grid-row: 6; margin-top: 56px; }
}
.bub-site-page main.plan-blocks-app .anniversary-includes { margin-top: 40px; }
.bub-site-page main.plan-blocks-app .anniversary-why p { margin: 0; color: rgb(47 47 47 / 80%); font-size: 15px; line-height: 26px; }
.bub-site-page main.plan-blocks-app .anniversary-why p + p { margin-top: 12px; }
/* 乳幼児・わんちゃん (owner 2026-10-17: same tone as ロングステイ・アニバーサリー). The story column has three parts,
 * each in its own form (three alike panels were hard to read): a photo per place, the two ages side by side (or the
 * numbered conditions), then a plain list. They run down the left in that order. */
@media (min-width: 768px) {
  .bub-site-page main.plan-blocks-app.activity-app[data-activity-frame]:is(.baby-reference-detail, .pets-reference-detail) .activity-frame-story > * { grid-column: 2; align-self: start; margin-top: 56px; }
  .bub-site-page main.plan-blocks-app.activity-app[data-activity-frame]:is(.baby-reference-detail, .pets-reference-detail) .activity-frame-story > :nth-child(1) { grid-row: 3; }
  .bub-site-page main.plan-blocks-app.activity-app[data-activity-frame]:is(.baby-reference-detail, .pets-reference-detail) .activity-frame-story > :nth-child(2) { grid-row: 4; }
  .bub-site-page main.plan-blocks-app.activity-app[data-activity-frame]:is(.baby-reference-detail, .pets-reference-detail) .activity-frame-story > :nth-child(3) { grid-row: 5; }
}
.bub-site-page main.plan-blocks-app .plan-place { margin: 0; color: rgb(47 47 47 / 60%); font-size: 12px; line-height: 18px; font-weight: 700; }
.bub-site-page main.plan-blocks-app .plan-age-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bub-site-page main.plan-blocks-app .plan-age-grid figure { margin: 0 0 10px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--surface, #f3f4f4); }
.bub-site-page main.plan-blocks-app .plan-age-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bub-site-page main.plan-blocks-app .plan-age-grid strong { display: block; margin-top: 2px; font-size: 15px; line-height: 22px; }
.bub-site-page main.plan-blocks-app .plan-age-grid p:not(.plan-place) { margin: 2px 0 0; color: rgb(47 47 47 / 72%); font-size: 13px; line-height: 20px; }
/* Allergy in a box of the 目安 panel's grey under the two ages (owner 2026-10-17). */
.bub-site-page main.plan-blocks-app .plan-allergy { margin: 16px 0 0; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--surface-subtle, #f3f5f5); color: rgb(47 47 47 / 80%); font-size: 13px; line-height: 21px; }
.bub-site-page main.plan-blocks-app .plan-allergy b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 14px; }
/* 滞在中のお願い: the rule itself as a short headline, its reason in one line under it; no marks, cards or lines. */
.bub-site-page main.plan-blocks-app .plan-rule-list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.bub-site-page main.plan-blocks-app .plan-rule-list strong { display: block; color: var(--ink); font-size: 17px; line-height: 26px; }
.bub-site-page main.plan-blocks-app .plan-rule-list p { margin: 4px 0 0; color: rgb(47 47 47 / 72%); font-size: 14px; line-height: 22px; }
@media (min-width: 768px) { .bub-site-page main.plan-blocks-app .plan-rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; } }
/* Two facilities only (わんちゃん): the tabs split in two. */
.bub-site-page main.plan-blocks-app .plan-facility-switch[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .bub-site-page main.plan-blocks-app .plan-facility-switch[data-count="2"] { grid-template-columns: repeat(2, 160px); } }
/* The rules pair is plain text, not the numbered steps it shares a class with. */
.bub-site-page main.activity-app .activity-frame-flow.plan-rules li { display: block; }
.bub-site-page main.activity-app .activity-frame-flow.plan-rules li::after { content: none; display: none; }
.bub-site-page main.activity-app .activity-frame-flow.plan-ages .plan-age-grid > div { display: block; }
.bub-site-page main.plan-blocks-app .activity-frame-flow.plan-rules .plan-rule-list li::before { content: none; display: none; }
/* Plan panels carry two-line notes (owner 2026-10-17: rows read cramped and 「ドッグラン」 broke): rows breathe and
 * the label column fits five characters. A panel in the story column keeps the gap the other parts have. */
.bub-site-page main.plan-blocks-app .activity-app-cells :is(li, li > a, li > button) { grid-template-columns: 20px 64px minmax(0, 1fr) auto; padding-top: 12px; padding-bottom: 12px; }
.bub-site-page main.plan-blocks-app .activity-app-cells li:has(> a) { padding-top: 0; padding-bottom: 0; }
.bub-site-page main.plan-blocks-app .activity-frame-story > .plan-facts { margin-top: 40px; }
/* On phones the tabs stick at the bar's foot before the script pins them: iPhone Safari runs the script a frame or
 * more behind its scrolling, so the tabs slid under the bar and popped back (owner iPhone, 2026-10-19). */
@media (max-width: 1023px) { .bub-site-page main.plan-blocks-app .plan-facility-switch:not(.is-pinned) { position: sticky; z-index: 36; top: var(--plan-switch-top, 56px); background: var(--paper, #fcfcfc); } }
/* Past the facility block the pinned tabs slide up out of sight; their spacer stays, so the page keeps its length. */
.bub-site-page main.plan-blocks-app .plan-facility-switch.is-pinned { transition: transform .2s ease, visibility 0s linear 0s; }
.bub-site-page main.plan-blocks-app .plan-facility-switch.is-pinned.is-gone { transform: translateY(-120%); visibility: hidden; pointer-events: none; transition: transform .2s ease, visibility 0s linear .2s; }
@media (prefers-reduced-motion: reduce) { .bub-site-page main.plan-blocks-app .plan-facility-switch.is-pinned { transition: none; } }

/* 目安 rows: the same space above and below every row's text and room at the sides, as on the room pages
   (owner, 2026-10-17). */
.bub-site-page main.plan-blocks-app .activity-app-cells :is(li, li > a, li > button) { min-height: 0; padding: 14px 20px; box-sizing: border-box; }
.bub-site-page main.plan-blocks-app .activity-app-cells li:has(> :is(a, button)) { padding: 0; }
.bub-site-page main.plan-blocks-app .activity-app-cells li + li::before { left: 20px; right: 20px; }
.bub-site-page main.plan-blocks-app .activity-app-cells span { gap: 2px; }