/* Booking (/reservar): one question per screen, after the Rui dos Pregos booking, in The Parq's ink.
   The espinha on top repeats what is answered and is the way back; the stage below holds one question.
   One vocabulary for every option (people, day, hour, zone): a 1 px carvão filet on paper, the filet doubled
   under a mouse, carvão filled once chosen or tapped. Square corners like the menu boards, no shadows.
   The confirmation and /a-minha-reserva share the rows at the end of this file. */
.bk { padding: var(--s5) 0 var(--s9); overflow-x: clip; }
.reserva, .bk-loading { max-width: 960px; }

/* ---------- espinha ---------- */
.espinha { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.elo { min-width: 0; }
.elo > a, .elo > span { position: relative; display: block; min-height: var(--tap); padding: var(--s3) var(--s4); border-left: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.elo:first-child > a, .elo:first-child > span { border-left: 0; padding-left: 0; }
.elo > a::after, .elo > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; transition: background-color var(--t-hover) var(--ease-out); }
.elo-agora > span::after { background: var(--carvao); }
.elo b { margin-right: var(--s2); font: 600 var(--fs-label)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.elo-t { font: 600 var(--fs-label)/1 var(--sans); font-stretch: var(--wide); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); }
.elo-agora b, .elo-agora .elo-t { color: var(--ink); }
.elo-v { display: block; margin-top: var(--s2); font: 700 1.125rem/1.2 var(--display); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-curto { display: none; }
.elo > a:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .elo > a:hover::after { background: var(--cinza); } }
.elo > a:active::after { background: var(--carvao); }

/* ---------- the question ---------- */
.palco { padding-top: clamp(32px, 4vw, 56px); }
.pergunta { outline-offset: 6px; }
.sob-pergunta { margin: var(--s3) 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.palco > .pergunta + :not(.sob-pergunta), .palco > .sob-pergunta + * { margin-top: clamp(28px, 3.6vw, 48px); }
.palco > .alert + * { margin-top: var(--s5); }
.nota-palco { margin: var(--s5) 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.conc-nome { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s3); font: 600 var(--fs-label)/1 var(--sans); font-stretch: var(--wide); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); }
.conc-nome::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.continuar { margin: var(--s6) 0 0; }
.voltar-palco { margin: var(--s5) 0 0; }
.voltar .icon { transform: scaleX(-1); }
.voltar:active .icon { transform: scaleX(-1) translateX(3px); }
@media (hover: hover) and (pointer: fine) { .voltar:hover .icon { transform: scaleX(-1) translateX(3px); } }
.aviso { display: flex; gap: var(--s3); align-items: flex-start; max-width: 60ch; margin: 0; padding: var(--s4); border: 1px solid var(--carvao); background: var(--papel); font-weight: 600; }
.aviso .icon, .palco .alert .icon { margin-top: 1px; }
.servicos > .btn { margin-top: var(--s4); }

/* ---------- the option ---------- */
.opc {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: var(--tap);
  padding: var(--s2); border: 1px solid var(--carvao); border-radius: 0; background: var(--papel); color: var(--carvao);
  font: inherit; text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.opc:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .opc:hover { box-shadow: inset 0 0 0 1px var(--carvao); } }
.opc[aria-pressed="true"], .opc.opc-a-carregar { background: var(--carvao); color: var(--marmore); }
.opc[aria-pressed="true"] em, .opc[aria-pressed="true"] i, .opc[aria-pressed="true"] span,
.opc.opc-a-carregar em, .opc.opc-a-carregar i, .opc.opc-a-carregar span { color: var(--veio); }
.opc:disabled, .opc.opc-off { border-style: dashed; border-color: var(--metal); background: transparent; color: var(--metal); cursor: not-allowed; box-shadow: none; transform: none; }
.opc:disabled em, .opc.opc-off em, .opc:disabled span { color: var(--metal); }

/* 1 · people */
.numeros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); max-width: 600px; }
.opc-num { min-height: 64px; }
.opc-num b { font: 700 1.75rem/1 var(--display); font-variant-numeric: tabular-nums lining-nums; }

/* 2 · the day: a month calendar, Monday first; number on one line for the whole row, the state in words under it */
.calendario { max-width: 720px; }
.cal-mes { margin: 0 0 var(--s4); font: 600 var(--fs-label)/1 var(--sans); font-stretch: var(--wide); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); }
.cal-cab, .cal-grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); }
.cal-cab { margin-bottom: var(--s2); }
.cal-cab span { font: 600 .6875rem/1 var(--sans); font-stretch: var(--wide); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--ink-2); }
.opc-dia { display: grid; grid-template-rows: auto auto auto; align-content: start; justify-items: center; row-gap: 4px; min-height: 80px; padding: var(--s2) 2px; }
.opc-dia i { min-height: 1em; font: 600 .625rem/1 var(--sans); font-style: normal; font-stretch: var(--wide); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.opc-dia b { font: 700 1.5rem/1 var(--display); font-variant-numeric: tabular-nums lining-nums; }
.opc-dia em { max-width: 100%; font: 500 .6875rem/1.15 var(--sans); font-style: normal; color: var(--ink-2); }
.opc-hoje i { color: var(--carvao); }
.opc-dia.opc-off b { text-decoration: line-through; text-decoration-thickness: 1px; }
/* past days and days beyond the window hold their place in the grid, dimmed and out of the way */
.opc-fora, .opc.opc-fora { border-color: transparent; background: transparent; color: var(--cinza); cursor: default; box-shadow: none; transform: none; }
/* why a day cannot be booked, written when it is tapped (there is no tooltip on a phone) */
.cal-nota { margin: var(--s3) 0 0; color: var(--ink); }
.cal-nota:empty { margin: 0; }
.outra-data { display: grid; gap: var(--s2); justify-items: start; max-width: 720px; margin-top: var(--s6); }
.outra-data label { font-weight: 600; font-size: .9375rem; }
.outra-data input { min-height: 48px; padding: var(--s2) var(--s4); border: 1px solid var(--carvao); border-radius: 0; background: var(--papel); color: var(--carvao); font: 400 1rem/1.4 var(--sans); }
.outra-data input:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.outra-data .nota-palco { margin: 0; }

/* 3 · the hour, by service */
.servico + .servico { margin-top: var(--s6); }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s3); max-width: 760px; }
.opc-hora { min-height: 56px; }
.opc-hora b { font: 600 1rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.opc-hora em { font: 500 .6875rem/1.1 var(--sans); font-style: normal; }
.opc-poucos em { color: var(--verde); }
.opc-hora:disabled b { text-decoration: line-through; text-decoration-thickness: 1px; }
.perto { display: grid; gap: var(--s3); margin-top: var(--s5); }
.perto[hidden] { display: none; }
.perto .nota-palco { margin: 0; }
.perto-dias { display: flex; flex-wrap: wrap; gap: var(--s3); }
.opc-perto { min-height: 48px; padding: 0 var(--s4); font-weight: 500; }

/* 4 · the zone */
.zonas { display: grid; gap: var(--s3); max-width: 760px; }
@media (min-width: 640px) { .zonas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opc-zona { align-items: flex-start; justify-content: flex-start; gap: var(--s2); min-height: 88px; padding: var(--s4); text-align: left; }
.opc-zona b { font: 700 1.25rem/1.15 var(--display); }
.opc-zona span { font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }

/* 5 · the details: the same form every time; on phones the button stays at the foot of the screen */
.quem { max-width: 640px; }
.quem .op { font-weight: 400; color: var(--ink-2); }
.quem .form > .hint { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.quem .nota-palco { margin-top: var(--s6); }
.bk-submit { display: grid; gap: var(--s3); justify-items: start; margin-top: var(--s5); }
.bk-submit .alert { width: 100%; }
@media (max-width: 767px) {
  .bk-submit {
    position: sticky; bottom: 0; z-index: 5; justify-items: stretch; margin: var(--s5) calc(var(--bk-edge, var(--gutter)) * -1) 0;
    padding: var(--s3) var(--bk-edge, var(--gutter)) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); background: var(--marmore); border-top: 1px solid var(--rule);
  }
  .bk-submit .btn { width: 100%; }
  /* a field focused after an error scrolls clear of the bar, not under it */
  html { scroll-padding-bottom: 160px; }
}

/* loading: the shape of the first step, not a spinner */
.bk-loading > div { display: grid; gap: var(--s6); }
.sk { display: block; background: var(--veio); opacity: .5; }
.sk-espinha { height: 60px; }
.sk-q { height: 48px; width: min(420px, 80%); }
.sk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); max-width: 600px; }
.sk-grid .sk { height: 64px; }
.sk-label { height: 12px; width: 96px; margin-bottom: var(--s3); }
.sk-hora { height: 56px; }
@media (prefers-reduced-motion: no-preference) { .sk { animation: pulse 1.2s var(--ease-move) infinite alternate; } }
@keyframes pulse { to { opacity: .2; } }

/* ---------- motion: changing step ----------
   Only when the script swaps steps: forward comes in from the right, back from the left, so the direction is the
   information. The exit begins on the tap and stops at a trace of the old step, so there is no blank between the
   two. Options come in in reading order, 11 ms apart, capped at 240 ms so the 42 days do not take half a second. */
@keyframes palco-frente { from { opacity: 0; transform: translateX(30px); } }
@keyframes palco-tras { from { opacity: 0; transform: translateX(-30px); } }
@keyframes opc-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes elo-escreve { from { opacity: 0; transform: translateY(6px); } }
.palco-frente { animation: palco-frente 320ms var(--ease-out) backwards; }
.palco-tras { animation: palco-tras 320ms var(--ease-out) backwards; }
.palco-sai { opacity: .14; transform: translateX(-14px); pointer-events: none; transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
.palco-sai-tras { transform: translateX(14px); }
.palco-frente .opc, .palco-tras .opc { animation: opc-entra 320ms var(--ease-out) backwards; animation-delay: min(calc(var(--i, 0) * 11ms), 240ms); }
.elo-escreve .elo-v { animation: elo-escreve 320ms var(--ease-out) 100ms backwards; }
@media (prefers-reduced-motion: reduce) {
  .palco-frente, .palco-tras, .palco-frente .opc, .palco-tras .opc, .elo-escreve .elo-v { animation: none; }
  .palco-sai { opacity: .4; transform: none; transition: none; }
}

/* ---------- phones ---------- */
@media (max-width: 639px) {
  /* the espinha keeps the numbers and the short answers; the step names stay for screen readers */
  .espinha { grid-template-columns: repeat(5, minmax(0, auto)); }
  .elo > a, .elo > span { padding: var(--s2) var(--s2) var(--s3); }
  .elo b { margin-right: 0; }
  .elo-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .elo-v { margin-top: var(--s1); font-size: .9375rem; }
  .v-longo { display: none; }
  .v-curto { display: inline; }
  .numeros { gap: var(--s2); }
  .opc-num { min-height: 56px; }
  .cal-cab, .cal-grelha { gap: var(--s1); }
  .cal-cab span { font-size: .625rem; letter-spacing: .04em; }
  /* the state word keeps at least 2 px of paper inside the filet: weight 400, 10 px, 9 px under 390 px, so
     «Fechado» never touches the edge; the two-word states stack one word a line (min-content), and the cell is
     tall enough for two lines in every row. Unhinted, so 9 px keeps even spacing («Quase», not «Quas e»). */
  .opc-dia { min-height: 70px; padding: 6px 2px; row-gap: 3px; }
  .opc-dia i { font-size: .5625rem; letter-spacing: .04em; }
  .opc-dia b { font-size: 1.25rem; }
  .opc-dia em { width: min-content; font-weight: 400; font-size: .625rem; line-height: 1.1; text-rendering: geometricPrecision; }
  .horas { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s2); }
}
@media (max-width: 389px) { .opc-dia em { font-size: .5625rem; } }
/* seven columns at 320: the calendar takes back some of the page edge and the gaps, cells stay at about 41 x 70 px */
@media (max-width: 359px) {
  .bk { --bk-edge: 12px; }
  .bk .wrap { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .elo > a, .elo > span { padding-left: 6px; padding-right: 6px; }
  .elo-v { font-size: .875rem; }
  .cal-cab, .cal-grelha { gap: 2px; margin-inline: -4px; }   /* the grid alone reaches 4 px into the page edge */
  .opc-dia i { font-stretch: 100%; letter-spacing: 0; }
}
@media (min-width: 1024px) { .bk { padding-top: var(--s7); } }

/* ---------- confirmation and the manage page ---------- */
.sum-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--s6) 0 0; }
.sum-list div { display: flex; justify-content: space-between; gap: var(--s3); min-width: 0; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.sum-list dt { font-size: .75rem; color: var(--ink-2); }
.sum-list dd { margin: 0; font-weight: 600; font-size: .9375rem; text-align: right; overflow-wrap: anywhere; }
.sum-list .code { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.bk-done { max-width: 720px; }

/* ---------- spacing pass, 2026-10-06 (kept for the confirmation and manage page; the steps above carry the
   same intent: legends and fields with their own room, 12 px between controls, sections well apart) ---------- */
.bk-done h2 { margin-top: var(--s3); }
.bk-done .address { margin-top: var(--s6); }
.bk-done > p { margin-top: var(--s4); }
.quem .form { gap: var(--s6); }
.quem .field { gap: var(--s2); align-content: start; }   /* Nome beside Telemóvel and its hint: the input keeps its height */
.quem .check { gap: var(--s4); }
@media (max-width: 479px) {
  /* confirmation and manage page: the two actions stacked, full width, one line each */
  .bk-done .actions, [data-state=found] .actions { flex-direction: column; align-items: stretch; }
  .bk-done .actions .btn, [data-state=found] .actions .btn { width: 100%; }
}
@media (max-width: 379px) {
  .done { padding: var(--s6) var(--s4); }
  .bk-done .actions .btn, [data-state=found] .actions .btn { padding: 0 var(--s3); }
}