/* Booking program styles. Values come from design tokens (/assets/tokens.css); system dark/light only. */
* { box-sizing: border-box; }
html { background: var(--canvas); color: var(--text); font-family: var(--font-sans); font-size: var(--size-body); line-height: var(--leading-body);
  color-scheme: light dark; font-synthesis: none; }
html:lang(ko) body { font-family: var(--font-ko); }
html:lang(ja) body { font-family: var(--font-ja); }
body { margin: 0; background: var(--canvas); }
.shell { max-width: var(--layout-max); margin: 0 auto; padding: var(--top-space) var(--outer-padding) var(--space-12); }
.notice { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border: var(--line-border) solid var(--border); border-radius: var(--radius-control);
  background: var(--subtle); color: var(--label); font-size: var(--size-meta); }
.host { margin: 0 0 var(--space-2); font-size: var(--size-title); line-height: var(--leading-title); font-weight: var(--weight-strong);
  overflow-wrap: anywhere; word-break: break-word; }
.muted { color: var(--muted); font-size: var(--size-meta); margin: 0 0 var(--space-4); overflow-wrap: anywhere; }
.layout { position: relative; display: grid; grid-template-columns: repeat(var(--layout-columns), minmax(0, 1fr)); gap: var(--space-6);
  column-gap: calc(var(--space-6) + (var(--layout-columns) - 1) * var(--space-2)); align-items: start; }
/* The generated columns token owns the breakpoint: 32px/1px between two visible panels, 24px/0px on mobile; no line through management/result-only views. */
.layout:has(> .booking-form:not([hidden]) > #guest-panel:not([hidden]))::before { content: ""; position: absolute; inset-block: 0;
  left: calc(50% - var(--line-border) / 2); width: calc((var(--layout-columns) - 1) * var(--line-border)); background: var(--border); pointer-events: none; }
/* The form wrapper is transparent to the grid, so its two panels become real grid cells: side by side from 760px (columns token), one column below. */
.booking-form { display: contents; }
#result-panel, #challenge-panel { grid-column: 1 / -1; }
.field-error { margin: 0; color: var(--danger); font-size: var(--size-meta); overflow-wrap: anywhere; }
input[aria-invalid="true"] { border-color: var(--danger); }
.panel { background: var(--surface); border: var(--line-border) solid var(--border); border-radius: var(--radius-panel); padding: var(--panel-padding); margin-bottom: var(--space-4); min-width: 0; }
.section-label { margin: 0 0 var(--space-4); font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--label); font-weight: var(--weight-strong); }
html:lang(en) .section-label { font-family: var(--font-mono); font-weight: var(--weight-mono); }
html:lang(ko) .section-label, html:lang(ja) .section-label { letter-spacing: 0; text-transform: none; }
.facts dd, .summary { font-variant-numeric: tabular-nums; }
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
/* Outside the conditionally hidden form so language stays manual on every screen; the shared select rule keeps its 44px target. */
.locale-field { justify-items: start; }
.locale-field select { width: auto; }
label, legend { color: var(--label); font-size: var(--size-meta); }
input, select, button { font: inherit; color: var(--text); min-height: var(--layout-target); border-radius: var(--radius-control); border: var(--line-border) solid var(--control);
  background: var(--surface); padding: 0 var(--space-3); }
input, select { font-size: 16px; width: 100%; }
button { cursor: pointer; padding: 0 var(--space-4); min-width: var(--layout-target); }
button:hover:not(:disabled) { background: var(--hover); }
button.primary { background: var(--selected); color: var(--on-selected); border-color: var(--selected); }
button.primary:hover:not(:disabled), button.primary:active:not(:disabled) { background: var(--selected); color: var(--on-selected); }
button:disabled, select:disabled { color: var(--disabled); border-color: var(--border); cursor: not-allowed; }
:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: var(--line-offset); }
fieldset.slots { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.slot-grid { display: grid; grid-template-columns: repeat(var(--slot-columns), minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.slot span { display: flex; align-items: center; justify-content: center; min-height: var(--layout-target); border: var(--line-border) solid var(--control);
  border-radius: var(--radius-control); font-family: var(--font-mono); font-weight: var(--weight-mono); background: var(--surface); }
.slot input:checked + span { background: var(--selected); color: var(--on-selected); border-color: var(--selected); }
.slot input:checked + span::before { content: "\2713"; margin-right: var(--space-1); }
.slot input:not(:checked):not(:disabled):is(:hover, :active) + span { background: var(--hover); }
.slot input:focus-visible + span { outline: var(--line-focus) solid var(--focus); outline-offset: var(--line-offset); }
fieldset.slots:disabled .slot input:not(:checked) + span { color: var(--disabled); border-color: var(--border); }
.summary, .result { margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.result.error, #boot-status.error { color: var(--danger); background: var(--danger-bg); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); }
.result.ok { color: var(--success); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-4); }
.facts dt { color: var(--label); font-size: var(--size-meta); }
.facts dd { margin: 0; overflow-wrap: anywhere; word-break: break-word; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .slot input:checked + span { outline: 2px solid Highlight; } }