/* ucal.css — one booking calendar for every tour (#book, lp/ucal.js).
   Prototype of plan A (2026-10-21). Sits inside the dark .book section;
   the calendar itself is a white panel like .widget-col. */

.ucal { --grp: oklch(0.47 0.11 155); --grp-tint: oklch(0.945 0.04 155); --low: oklch(0.48 0.12 60); }
.ucal[hidden] { display: none !important; }
.ucal-head { margin: 8px 0 26px; }

.ucal-panel {
  background: white; color: var(--ink); border-radius: 10px; padding: 26px;
  box-shadow: 0 30px 80px -30px oklch(0.1 0.03 255 / 0.6);
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas: "cal guests" "cal side"; grid-template-rows: auto 1fr;
  gap: 18px 36px; align-items: start;
}
.ucal-panel.is-handoff { grid-template-areas: "cal side"; grid-template-rows: auto; }
.ucal-panel.is-handoff .ucal-guests,
.ucal-panel.is-handoff .ucal-cal,
.ucal-panel.is-handoff .ucal-card { display: none; }
.ucal-loading { grid-column: 1 / -1; color: var(--mid); font-size: 14px; display: flex; align-items: center; gap: 10px; min-height: 420px; justify-content: center; }

/* guests */
.ucal-guests { grid-area: guests; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; }
.ucal-guests b { display: block; font-size: 15.5px; }
.ucal-guests span { font-size: 12.5px; color: var(--mid); }
.ucal-step { display: flex; align-items: center; flex: 0 0 auto; }
/* 16px or larger: iOS Safari zooms the page when a smaller select gets focus */
.ucal-step select {
  height: 44px; min-width: 128px; border-radius: 10px; border: 1px solid var(--hair-strong);
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23333b48' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none; -webkit-appearance: none; padding: 0 34px 0 12px;
  font: inherit; font-weight: 700; font-size: 16px; color: var(--ink); cursor: pointer;
}
/* no double-tap zoom on the calendar's controls (iPhone) */
.ucal button, .ucal select, .ucal a, .ucal input, .ucal label { touch-action: manipulation; }
/* any touch screen (an iPad held sideways is wider than 880px): selects at 16px, so iOS does not zoom */
@media (pointer: coarse) { .ucal select { font-size: 16px; } }

/* months + grids */
.ucal-cal { grid-area: cal; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ucal-months { display: flex; align-items: center; gap: 8px; }
.ucal-months select {
  flex: 1; min-width: 0; height: 44px; border-radius: 10px; border: 1px solid var(--hair-strong);
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23333b48' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none; -webkit-appearance: none; padding: 0 38px 0 14px;
  font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer;
}
.ucal-nav { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair-strong); background: white; font: inherit; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; }
.ucal-nav:disabled { opacity: .3; cursor: default; }
.ucal-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ucal-grids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ucal-month h3 { font-family: var(--font-body); font-size: 16px; font-weight: 700; text-align: center; margin: 0 0 8px; }
.ucal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ucal-dow { font-size: 11.5px; font-weight: 700; color: var(--mid); text-align: center; padding: 2px 0 4px; }
.ucal-dow.w { color: var(--grp); }
.ucal-day {
  appearance: none; border: 1px solid transparent; background: transparent; border-radius: 9px;
  min-height: 58px; padding: 6px 0 5px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: inherit; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums;
}
.ucal-day .dn { font-size: 15.5px; font-weight: 600; line-height: 1.15; }
.ucal-day .dt { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; min-height: 12px; }
.ucal-day .dp { font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; }
.ucal-day .dp.long { font-size: 9.5px; letter-spacing: -0.02em; }
.ucal-day.priv { background: var(--ai-tint); }
.ucal-day.grp { background: var(--grp-tint); }
.ucal-day.grp .dt, .ucal-day.grp .dp { color: var(--grp); }
/* group tour and private tour both open: green and blue, split by a 45° line (2026-10-23, option A).
   Deeper than --grp-tint / --ai-tint so the two halves read apart on a phone; --grp text keeps 4.5:1 on both
   (do not darken the blue). The two have about the same lightness, so a thin white line marks the split
   for anyone who cannot tell green from blue. */
.ucal { --both-g: oklch(0.89 0.075 155); --both-p: oklch(0.89 0.055 250); }
.ucal-day.both { background: linear-gradient(135deg, var(--both-g) 0 calc(50% - 1px), white calc(50% - 1px) calc(50% + 1px), var(--both-p) calc(50% + 1px) 100%); }
.ucal-day.low .dt { color: var(--low); }
/* a request day: closed online, but the van can be asked for (FST_不在日のリクエスト予約_設計書_20261025.md §4).
   Quieter than an open day (2026-10-26 牧野さん: it stood out more than the open days): a paler fill than
   --ai-tint, no edge, a grey price. "Request" is longer than the other tags, so it is smaller, in plain case
   and tightly set, and clipped to the cell, so it never touches the edge (a 320px phone's cell is ~38px). */
.ucal { --req-tint: oklch(0.977 0.01 250); }
.ucal-day.req { background: var(--req-tint); }
.ucal-day.req .dt { color: var(--ai); font-weight: 600; font-size: 8.5px; text-transform: none; letter-spacing: -0.01em;
  max-width: 100%; overflow: hidden; white-space: nowrap; }
.ucal-day.req .dp { color: var(--mid); }
.ucal-day.full .dt { color: var(--mid); }
.ucal-day.off { color: var(--mid); }
.ucal-day.off .dn { font-weight: 400; text-decoration: line-through; text-decoration-color: var(--hair-strong); text-decoration-thickness: 1.5px; }
.ucal-day.past, .ucal-day.pad { color: oklch(0.82 0.01 245); cursor: default; }
.ucal-day.pad { visibility: hidden; }
.ucal-day.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) {
  .ucal-day:not(:disabled):not(.sel):hover { border-color: var(--hair-strong); }
}
.ucal button:focus-visible, .ucal a:focus-visible, .ucal input:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; }

.ucal-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-soft); }
.ucal-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ucal-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.ucal-legend .lg-p { background: var(--ai-tint); border: 1px solid var(--ai); }
.ucal-legend .lg-g { background: var(--grp-tint); border: 1px solid var(--grp); }
.ucal-legend .lg-b { background: linear-gradient(135deg, var(--both-g) 0 calc(50% - 1px), white calc(50% - 1px) calc(50% + 1px), var(--both-p) calc(50% + 1px) 100%); border: 1px solid var(--grp); }
.ucal-legend .lg-both-row { display: none; }
.ucal-legend.both-1 .lg-both-row, .ucal-legend.both-2 .lg-both-row { display: inline-flex; }
.ucal-legend .lg-r { background: var(--req-tint); border: 1px solid var(--hair); }
.ucal-legend .lg-req-row { display: none; }
.ucal-legend.req-1 .lg-req-row, .ucal-legend.req-2 .lg-req-row { display: inline-flex; }
.ucal-legend s { color: var(--mid); text-decoration-color: var(--hair-strong); text-decoration-thickness: 1.5px; }
.ucal-note { font-size: 12px; color: var(--mid); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ucal-cur { display: inline-flex; align-items: center; gap: 6px; }
.ucal-cur select { height: 32px; border-radius: 8px; border: 1px solid var(--hair-strong); background: white; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); padding: 0 6px; cursor: pointer; }
.ucal-month-note { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); background: var(--hair-soft); border-radius: 8px; padding: 8px 10px; }
.ucal-month-note a { font-weight: 700; }

/* day card */
.ucal-side { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ucal-card { border: 1px solid var(--hair); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.ucal-card.empty { border-style: dashed; color: var(--ink-soft); font-size: 14px; }
.ucal-when { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.ucal-pill { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.ucal-pill.p { background: var(--ai-tint); color: var(--ai); }
.ucal-pill.g { background: var(--grp-tint); color: var(--grp); }
.ucal-pill.x { background: var(--hair-soft); color: var(--ink-soft); }
.ucal-pill.r { background: var(--req-tint); color: var(--ai); border: 1px solid var(--hair); }
.ucal-card h4 { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.2; font-weight: 600; }
.ucal-card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.ucal-card p.ucal-key { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ucal-card p.ucal-sub { margin-top: -5px; }
.ucal-more { align-self: flex-start; font-size: 13px; color: var(--ai); text-underline-offset: 3px; }
.ucal-tot { font-size: 13.5px; color: var(--ink-soft); }
.ucal-tot strong { font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 5px; }
.ucal-checks { border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px 6px; margin: 2px 0 0; }
.ucal-checks legend { font-weight: 700; font-size: 12.5px; padding: 0 4px; }
.ucal-checks label { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; padding: 5px 0; cursor: pointer; }
.ucal-checks input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--grp); flex-shrink: 0; }
.ucal-alts { display: flex; flex-direction: column; gap: 6px; }
.ucal-alts button { display: flex; justify-content: space-between; gap: 8px; min-height: 44px; align-items: center; border: 1px solid var(--hair-strong); background: white; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left; }
.ucal-alts .aw { color: var(--ai); font-weight: 700; white-space: nowrap; }
/* a nearest day with both tours: one line per tour, the group tour first */
.ucal-alts .aw span { display: block; text-align: right; }
/* a day with both tours: the private tour's part of the card starts under a line */
.ucal-card h4.ucal-also { font-family: var(--font-body); font-size: 14px; font-weight: 700; border-top: 1px solid var(--hair); padding-top: 14px; margin-top: 6px; }
.ucal-ask { font-size: 13.5px; font-weight: 700; padding: 8px 0; }
.ucal-cta { min-height: 50px; width: 100%; border: 0; border-radius: 10px; background: var(--cta); color: white; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; }
.ucal-cta:hover { background: var(--cta-deep); }
.ucal-cta:disabled { background: var(--hair); color: var(--ink-soft); cursor: default; }
.ucal-hint { font-size: 12px; color: var(--low); min-height: 0; }

/* request form */
.ucal-req { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ucal-req label { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.ucal-req label .opt { font-weight: 400; color: var(--mid); }
.ucal-req input, .ucal-req textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--hair-strong); border-radius: 9px;
  padding: 10px 12px; font: inherit; font-size: 15px; color: var(--ink); background: white;
}
.ucal-req textarea { resize: vertical; min-height: 64px; }
.ucal-req input:focus-visible, .ucal-req textarea:focus-visible { outline: 2px solid var(--ai); outline-offset: 1px; }
.ucal-req .ucal-cta { margin-top: 10px; }
/* always in the page (not display:none when empty), so screen readers announce it when it fills in */
.ucal-req-err { font-size: 13px; color: var(--low); min-height: 0; margin: 2px 0 0; }
.ucal-req-err:empty { margin: 0; }
/* the field people never see (api/request.js turns away anything typed into it) */
.ucal-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ucal-req-done { background: var(--ai-tint); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ucal-req-done b { font-size: 17px; }
.ucal-req-done:focus { outline: none; }
/* any touch screen (a large iPhone held sideways is wider than 880px): 16px, so iOS does not zoom */
@media (pointer: coarse) { .ucal-req input, .ucal-req textarea { font-size: 16px; } }

/* hand-off to Bókun */
.ucal-handoff { display: flex; flex-direction: column; gap: 12px; }
.ucal-handoff[hidden] { display: none; }
.ucal-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--hair); border-radius: 12px; padding: 8px 8px 8px 12px; }
.ucal-sum b { display: block; }
.ucal-sum span { font-size: 13px; color: var(--ink-soft); }
.ucal-link { background: none; border: 0; color: var(--ai); font: inherit; font-weight: 700; font-size: 13.5px; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 4px; }
.ucal-tip { background: var(--ai-tint); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
.ucal-tip b { display: block; font-size: 19px; line-height: 1.3; color: var(--ink); }
.ucal-tip b em { font-style: normal; color: var(--ai); white-space: nowrap; }
.ucal-tip > span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.ucal-bokun { grid-area: cal; min-width: 0; min-height: 520px; position: relative; }
.ucal-bokun[hidden] { display: none; }
.ucal-bokun .bokun-loading { position: absolute; inset: 0 0 auto; padding-top: 40px; }

/* below 1100px two months no longer fit beside the card: one month */
@media (max-width: 1099px) {
  .ucal-grids { grid-template-columns: minmax(0, 1fr); }
  .ucal-month + .ucal-month { display: none; }
  /* only the first month shows here, so a green-and-blue day in the hidden second month does not count */
  .ucal-legend.both-2:not(.both-1) .lg-both-row { display: none; }
  .ucal-legend.req-2:not(.req-1) .lg-req-row { display: none; }
}

/* mobile: sticky action bar */
.ucal-bar { display: none; }
@media (max-width: 880px) {
  /* iOS Safari zooms into a select under 16px when it gets focus */
  .ucal select { font-size: 16px; }
  /* the floating Ask AI button hides while the calendar is on screen (lp/styles.css) */
  /* the site-wide "From USD 159 / person" bar would contradict the calendar's own totals */
  html.ucal-onscreen .sticky-bar { transform: translateY(110%) !important; }
  .ucal-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "guests" "cal" "side"; grid-template-rows: auto; padding: 16px 12px 18px; gap: 14px; }
  .ucal-panel.is-handoff { grid-template-areas: "side" "cal"; }
  .ucal-day { min-height: 54px; }
  .ucal-day .dt { font-size: 9px; }
  .ucal-day.req .dt { font-size: 8px; }
  .ucal-day .dp { font-size: 11px; }
  .ucal-card .ucal-cta, .ucal-card .ucal-hint { display: none; }
  /* a day with both tours: the bar only says "Choose a tour", so each tour's Continue stays in the card */
  .ucal-card.is-both .ucal-cta, .ucal-card.is-both .ucal-hint { display: block; }
  /* a request day has no bar: its Send button is in the card */
  .ucal-card.is-req .ucal-cta { display: block; }
  /* (the form's fields are 16px on any touch screen: see the (pointer: coarse) rule below the form) */
  .ucal-bar:not([hidden]) {
    /* above Bókun's floating cart bubble (z-index 30); raised over Ask AI just below. The site's
       own sticky bar (60) is moved off screen while the calendar is on screen (see above). */
    position: sticky; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 12px;
    margin: 12px -4px 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: white; color: var(--ink); border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 20px -6px oklch(0.1 0.03 255 / 0.35);
  }
  /* At the end of the calendar the bar scrolls away with the page and passes under the fixed
     Ask AI button (lp/styles.css .chatbot-toggle, z-index 9999), which then takes taps meant for
     Continue. While the chat is closed, keep the bar on top; with the chat open, the chat window
     (9998) stays above the bar. Browsers without :has() skip this rule and keep z-index 50. */
  html:not(:has(.chatbot-toggle.active)) .ucal-bar:not([hidden]) { z-index: 10000; }
  .ucal-bar .b-t { flex: 1; min-width: 0; }
  .ucal-bar .b-t b { display: block; font-size: 14.5px; }
  .ucal-bar .b-t span { display: block; font-size: 13px; color: var(--ink-soft); }
  .ucal-bar .b-t small { display: block; font-size: 11.5px; color: var(--low); }
  .ucal-bar .ucal-cta { width: auto; padding: 0 18px; white-space: nowrap; }
  .ucal-bar .ucal-cta.is-blocked { background: var(--hair); color: var(--ink-soft); }
}
@media (prefers-reduced-motion: reduce) { .ucal * { scroll-behavior: auto !important; } }

/* 320px phones (iPhone SE with display zoom): smaller ‹ › and less padding so the month name is not
   cut off. Last in the file so it wins over .ucal-nav and .ucal-months select above. */
@media (max-width: 360px) {
  .ucal-day.req .dt { font-size: 7.5px; letter-spacing: -0.02em; }   /* a 320px phone's cell is ~33px */
  .ucal-months { gap: 6px; }
  .ucal-nav { flex-basis: 36px; width: 36px; height: 36px; }
  .ucal-months select { padding: 0 24px 0 8px; background-position: right 8px center; }
}