/* Scoped to the outing preview; all type, colours and spacing are native. */
.day-plan-section {
  --day-plan-cut: 20px;
  --day-plan-control-shape: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  --day-plan-shape: polygon(var(--day-plan-cut) 0, calc(100% - var(--day-plan-cut)) 0, 100% var(--day-plan-cut), 100% calc(100% - var(--day-plan-cut)), calc(100% - var(--day-plan-cut)) 100%, var(--day-plan-cut) 100%, 0 calc(100% - var(--day-plan-cut)), 0 var(--day-plan-cut));
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center; gap: var(--gutter);
  padding: var(--section-pad-y) max(var(--gutter), calc((100% - var(--max-width-full)) / 2 + var(--gutter))) calc(var(--section-pad-y) * 1.5);
  border-top: 1px solid var(--color-border-light);
}
.day-plan-section [hidden] { display: none !important; }
.day-plan-section button { font: inherit; cursor: pointer; border: 0; border-radius: 0; }
.day-plan-section :is(button, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 4px; }
.day-plan-section button:disabled { cursor: default; }
.day-plan-copy { min-width: 0; }
.day-plan-heading { max-width: 12ch; margin: 0 0 28px; font: 500 clamp(2.75rem, 4.4vw, 4.5rem)/1.06 var(--font-serif); letter-spacing: -.02em; }
html[lang="ja"] .day-plan-heading { font-size: clamp(2.5rem, 3.2vw, 3.5rem); line-height: 1.28; letter-spacing: -.015em; }
.day-plan-description { max-width: 34ch; color: var(--color-green-muted); font-size: 1.125rem; line-height: 1.75; }
.day-plan-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 40px; }
.day-plan-step { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 8px; background: transparent; color: var(--color-green-muted); transition: color var(--transition-default); }
.day-plan-step::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-hero-bg); clip-path: var(--day-plan-control-shape); transition: background var(--transition-default); }
.day-plan-step-number { font: .625rem/1 var(--font-mono); opacity: .65; }
.day-plan-step[aria-pressed="true"] { color: var(--color-text-light); }
.day-plan-step[aria-pressed="true"]::before { background: var(--color-green-dark); }
.day-plan-step:hover:not(:disabled)::before { background: var(--color-border); }
.day-plan-step[aria-pressed="true"]:hover::before { background: var(--color-green-muted); }
.day-plan-caption { min-height: 4.8em; margin-top: 18px; max-width: 42ch; font-size: .875rem; line-height: 1.6; color: var(--color-green-muted); }
.day-plan-visual { --day-plan-surface: #f2f8f2; --day-plan-mint: #def0e4; --day-plan-hairline: #e3eee8; --day-plan-soft-green: #c9dfd4; --day-plan-paper: #fff; position: relative; isolation: isolate; min-width: 0; padding-bottom: 24px; }
.day-plan-visual :is(button, summary, [tabindex]):focus-visible { outline-color: var(--color-green-dark); }
.day-plan-visual::before, .day-plan-visual::after { content: ""; position: absolute; z-index: -2; clip-path: var(--day-plan-shape); }
.day-plan-visual::before { inset: 0; background: var(--day-plan-hairline); }
.day-plan-visual::after { inset: 1px; background: var(--day-plan-surface); z-index: -1; }
.day-plan-toolbar { position: absolute; top: 24px; left: 24px; right: 24px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.day-plan-day { font: .75rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.day-plan-views { display: flex; flex-shrink: 0; gap: 4px; }
.day-plan-view, .day-plan-tool { position: relative; isolation: isolate; color: var(--color-green-dark); background: transparent; min-height: 44px; }
.day-plan-view { white-space: nowrap; padding: 10px 16px; font-size: .75rem !important; }
.day-plan-view::before, .day-plan-tool::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--day-plan-paper); clip-path: var(--day-plan-control-shape); transition: background var(--transition-default); }
.day-plan-view[aria-pressed="true"] { color: var(--color-text-light); }
.day-plan-view[aria-pressed="true"]::before { background: var(--color-green-dark); }
.day-plan-view:hover:not(:disabled)::before, .day-plan-tool:hover:not(:disabled)::before { background: var(--day-plan-mint); }
.day-plan-view[aria-pressed="true"]:hover::before { background: var(--color-green-muted); }
.day-plan-map-view { position: relative; height: 390px; }
.day-plan-viewport { position: absolute; inset: 1px; overflow: hidden; clip-path: var(--day-plan-shape); touch-action: pan-y; }
.day-plan-viewport:focus-visible { outline-offset: -6px !important; }
.day-plan-scene { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform 300ms ease; }
[data-day-plan][data-zoomed="true"] .day-plan-viewport { cursor: grab; }
.day-plan-viewport[data-dragging="true"] { cursor: grabbing; }
.day-plan-viewport[data-dragging="true"] .day-plan-scene { transition: none; }
.day-plan-map { width: 100%; height: 100%; display: block; }
.day-plan-map-ground { fill: var(--day-plan-surface); }
.day-plan-map-blocks { fill: var(--day-plan-mint); opacity: 1; }
.day-plan-map-roads { stroke: var(--color-bg); }
.day-plan-map-river { stroke: var(--day-plan-soft-green); opacity: .75; }
.day-plan-route { stroke: var(--color-green-dark); stroke-width: 2.5px; stroke-linejoin: bevel; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms ease, opacity 300ms ease; }
.day-plan-route-mobile { display: none; }
[data-day-plan][data-stage="0"] .day-plan-route { stroke-dashoffset: 1; opacity: 0; }
.day-plan-marker { position: absolute; left: var(--stop-x); top: var(--stop-y); transform: translate(-50%, -50%); isolation: isolate; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; white-space: nowrap; background: transparent; color: var(--color-green-dark); font-size: .8125rem !important; }
.day-plan-marker[data-plan-stop="coffee"] { --stop-x: 17.727%; --stop-y: 32.667%; }
.day-plan-marker[data-plan-stop="gallery"] { --stop-x: 49.394%; --stop-y: 24.444%; }
.day-plan-marker[data-plan-stop="dinner"] { --stop-x: 78.03%; --stop-y: 50%; }
.day-plan-marker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--day-plan-paper); clip-path: var(--day-plan-control-shape); transition: background var(--transition-default); }
.day-plan-marker > span:first-child { font: .75rem/1 var(--font-mono); }
.day-plan-marker[aria-pressed="true"]::before, .day-plan-marker:hover:not(:disabled)::before { background: var(--day-plan-mint); }
.day-plan-map-tools { position: absolute; right: 24px; bottom: 68px; display: flex; gap: 5px; }
.day-plan-tool { display: grid; place-items: center; width: 44px; font-size: 1.25rem !important; }
.day-plan-tool:disabled { opacity: .45; }
.day-plan-selection { clip-path: var(--day-plan-control-shape); position: absolute; top: 83px; left: 24px; max-width: calc(100% - 116px); z-index: 2; padding: 7px 10px; background: var(--day-plan-paper); color: var(--color-green-muted); font-size: .75rem; line-height: 1.5; }
.day-plan-list-view { min-height: 390px; padding: 102px 24px 70px; }
.day-plan-list-view ol, .day-plan-stops { list-style: none; }
.day-plan-list-view li + li { border-top: 1px solid var(--day-plan-hairline); }
.day-plan-list-view button { position: relative; isolation: isolate; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 15px 12px; min-height: 58px; color: var(--color-green-dark); background: transparent; text-align: left; }
.day-plan-list-view button::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--day-plan-control-shape); background: transparent; transition: background var(--transition-default); }
.day-plan-list-view button:hover:not(:disabled)::before { background: var(--day-plan-paper); }
.day-plan-list-view button[aria-pressed="true"]::before { background: var(--day-plan-mint); }
.day-plan-route-number { font: .75rem/1.5 var(--font-mono); }
.day-plan-ticket { position: relative; isolation: isolate; margin: -38px 24px 0; padding: 24px; }
.day-plan-ticket::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--day-plan-paper); clip-path: var(--day-plan-shape); }
.day-plan-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; list-style: none; cursor: pointer; }
.day-plan-summary::-webkit-details-marker { display: none; }
.day-plan-sample { display: block; margin-bottom: 12px; color: var(--color-green-muted); font: .625rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.day-plan-ticket h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.day-plan-ticket-copy > p { margin-top: 8px; color: var(--color-green-muted); font-size: .75rem; line-height: 1.6; }
.day-plan-ticket-action { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 18px; min-height: 48px; color: var(--color-text-light); background: transparent; font: 500 .75rem/1.5 var(--font-mono) !important; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.day-plan-ticket-action::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-green-dark); clip-path: var(--day-plan-control-shape); transition: background var(--transition-default); }
.day-plan-summary:hover .day-plan-ticket-action::before, button.day-plan-ticket-action:hover:not(:disabled)::before { background: var(--color-green-muted); }
.day-plan-arrow { font-size: 1.2rem; line-height: 1; transition: transform 300ms ease; }
.day-plan-ticket-close { display: none; }
.day-plan-ticket[open] [data-plan-action] { display: none; }
.day-plan-ticket[open] .day-plan-ticket-close { display: inline; }
.day-plan-ticket[open] .day-plan-arrow { transform: rotate(180deg); }
.day-plan-ticket-body { padding-top: 22px; }
.day-plan-stops { margin-bottom: 22px; border-top: 1px solid var(--day-plan-hairline); }
.day-plan-stops li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--day-plan-hairline); font-size: .875rem; }
.day-plan-section time { font: .75rem/1.5 var(--font-mono); }
.day-plan-copy-fallback { clip-path: var(--day-plan-control-shape); width: 100%; min-height: 130px; margin-top: 16px; padding: 12px; border: 0; color: var(--color-green-dark); background: var(--day-plan-surface); font: .875rem/1.6 var(--font-sans); resize: vertical; }
.day-plan-copy-fallback:focus-visible { outline: 2px solid var(--color-green-dark); outline-offset: -3px; }
.day-plan-stops [data-selected="true"] { color: var(--color-green-dark); }
.day-plan-feedback:not(:empty) { margin-top: 16px; font-size: .75rem; line-height: 1.6; color: var(--color-green-muted); }
@media (max-width: 1100px) {
  .day-plan-section { gap: 40px; }
  .day-plan-heading { font-size: clamp(2.75rem, 4.8vw, 3.75rem); }
  html[lang="ja"] .day-plan-heading { font-size: clamp(2.375rem, 4.8vw, 3.125rem); }
  .day-plan-summary { grid-template-columns: 1fr; gap: 20px; }
  .day-plan-summary .day-plan-ticket-action { justify-self: start; }
}
@media (max-width: 767px) {
  .day-plan-section { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .day-plan-heading { max-width: 16ch; margin-bottom: 24px; font-size: clamp(2.75rem, 11vw, 3.25rem); }
  .day-plan-description { max-width: 40ch; font-size: 1rem; }
  .day-plan-stages { margin-top: 28px; }
  .day-plan-caption { min-height: 3.2em; max-width: none; }
  .day-plan-visual { padding-bottom: 16px; }
  .day-plan-toolbar { top: 16px; left: 16px; right: 16px; }
  .day-plan-map-tools { right: 16px; top: 76px; bottom: auto; display: grid; }
  .day-plan-view { padding-inline: 12px; }
  .day-plan-map-view { height: 330px; }
  .day-plan-list-view { min-height: 330px; padding: 88px 16px 60px; }
  .day-plan-marker { gap: 6px; padding-inline: 10px; font-size: .75rem !important; }
  .day-plan-marker[data-plan-stop="gallery"] { top: 46%; }
  .day-plan-marker[data-plan-stop="dinner"] { top: 78%; }
  .day-plan-route-desktop { display: none; }
  .day-plan-route-mobile { display: block; }
  .day-plan-ticket { margin-inline: 16px; padding: 20px; }
  .day-plan-summary { grid-template-columns: 1fr; }
  .day-plan-selection { top: 75px; left: 16px; }
  html[lang="ja"] .day-plan-heading { max-width: 15ch; font-size: clamp(2.25rem, 9.5vw, 2.75rem); line-height: 1.28; }
}
@media (max-width: 400px) {
  .day-plan-step { flex-direction: column; min-height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .day-plan-section *, .day-plan-section *::before { transition: none !important; }
}