/* Meza.Libaneza: the booking flow and «a minha reserva» (owner: reservas-front). Loaded after tokens.css and
   site.css; every value is a token from those files, none is redefined. Markup from site/src/_partes/reserva.mjs.

   Composition, «Ementa de papel»: one question per screen on the cream paper, set like a section title of the
   menu (Poppins 800 in capitals). Above it the page title and the spine of the steps on the navy rule, the
   current step marked as the header marks the current page (red-ink word, red bar on the rule). Options share
   one vocabulary with the menu's filter: square, a navy 2 px rule, navy fill with cream type when picked. The
   calendar is set as a grid of the menu: the weekdays on a navy band, the days in cells divided by the mist
   hairline of the dishes, closed days on cream-deep like the closed days of the hours. Beside the step, from
   960 px, «A vossa mesa» sits in the navy box of the menu («Main courses»): the answers so far and the house
   rules. Flat: no shadow, no gradient, radius 0. The step swap and its motion live at the end of the file;
   reservar.js only adds the classes. */

/* ---------- the top: title and spine ---------- */

.reserva__topo { display: grid; gap: var(--space-xs); padding-top: var(--space-l); }
.reserva__titulo {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: var(--weight-heading);
  line-height: var(--leading-heading); letter-spacing: var(--tracking-display); text-transform: uppercase;
}
@media (min-width: 760px) {
  .reserva__topo { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-2xl); align-items: end; padding-top: var(--space-xl); }
  .reserva__titulo { padding-bottom: var(--space-s); }
}

/* The spine: what was answered, where you are, the way back. Columns sized by their words so five steps and
   «Esplanada» fit at 320 px. The current step is marked as the header marks the current page. */
.espinha {
  display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--space-2xs);   /* wraps only with large text */
  border-bottom: var(--rule) solid var(--color-rule);
}
.elo { position: relative; display: grid; flex: 0 0 auto; }
.elo > a, .elo__caixa {
  position: relative; display: grid; justify-items: start; align-content: start; row-gap: 6px;
  min-height: var(--tap); padding: var(--space-2xs) 0 var(--space-s);
  color: var(--color-text); text-decoration: none;
}
.elo > a::after, .elo__caixa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--rule) - 1px); height: 4px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-micro) var(--ease-out);
}
.elo--agora .elo__caixa::after { transform: scaleX(1); }
.elo__n {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: var(--rule) solid var(--color-text-muted);
  font-size: .8125rem; font-weight: var(--weight-label); line-height: 1; font-variant-numeric: var(--numeric);
  color: var(--color-text-muted);
}
.elo__n .ic { width: 15px; height: 15px; }
.elo--feito .elo__n { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.elo--agora .elo__n { border-color: var(--navy); color: var(--navy); }
.elo__t {
  font-size: .75rem; font-weight: var(--weight-label); line-height: 1.15;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted);
}
.elo--feito .elo__t { color: var(--navy); }
.elo--agora .elo__t { color: var(--color-accent-text); }
.elo__v { min-height: 1.2em; font-size: .8125rem; font-weight: var(--weight-label); line-height: 1.2; font-variant-numeric: var(--numeric); white-space: nowrap; }
.elo__v:empty { display: none; }
.elo__v-longo { display: none; }
@media (max-width: 379.98px) {
  .espinha { column-gap: 4px; }
  .elo__t { font-size: .6875rem; letter-spacing: .02em; }
  .elo__v { font-size: .75rem; }
}
@media (min-width: 760px) {
  .espinha { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); column-gap: var(--space-s); }
  .elo { min-width: 0; }
  .elo__t { overflow-wrap: anywhere; }
  .elo > a, .elo__caixa {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n t" "n v";
    column-gap: var(--space-xs); row-gap: 2px; align-items: center; padding: var(--space-xs) 0 var(--space-s);
  }
  .elo__n { grid-area: n; width: 34px; height: 34px; font-size: .9375rem; }
  .elo__t { grid-area: t; font-size: var(--step--1); }
  .elo__v { grid-area: v; font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; }
  .elo__v:empty { display: block; }
  .elo__v-longo { display: inline; }
  .elo__v-curto { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .elo > a:hover::after { transform: scaleX(1); background: var(--navy); }
  .elo > a:hover .elo__v { text-decoration: underline; text-underline-offset: .2em; }
}

/* ---------- the body: the stage, and «A vossa mesa» beside it ---------- */

.reserva__corpo { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl) var(--space-2xl); }
.reserva__lado { display: none; }
/* From 960 px, the site's 12 columns (site.css, .grelha): the step on 7 and the box on 5; from 1440 px the box
   keeps 4, after an empty column, as the asymmetric layouts of the other pages. */
@media (min-width: 960px) {
  .reserva__corpo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 48px); align-items: start; padding-block: var(--space-2xl) var(--space-3xl); }
  .reserva__palco { grid-column: 1 / span 7; }
  .reserva__corpo--inteiro > .reserva__palco { grid-column: 1 / -1; }
  .reserva__lado { display: block; grid-column: 8 / span 5; position: sticky; top: var(--space-l); }
}
@media (min-width: 1440px) { .reserva__lado { grid-column: 9 / span 4; } }

.reserva__palco > * + * { margin-top: var(--space-l); }
.reserva__palco > .pergunta + .pergunta__sub { margin-top: var(--space-s); }
.reserva__palco > .aviso + * { margin-top: var(--space-m); }

/* The question: set like a section title of the menu. */
.pergunta {
  max-width: 18ch;
  font-family: var(--font-display); font-size: var(--step-4); font-weight: var(--weight-display);
  line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-transform: uppercase;
  outline-offset: 6px; scroll-margin-top: var(--space-m);
}
.pergunta:focus:not(:focus-visible) { outline: none; }
.pergunta__sub { max-width: 46ch; font-size: var(--step-1); line-height: 1.45; }

.nota-palco {
  display: flex; gap: var(--space-2xs); align-items: flex-start; max-width: 60ch;
  font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-muted);
}
.nota-palco .ic { margin-top: -.05em; color: var(--navy); }
.nota-palco a, .aviso a { color: var(--navy); font-weight: var(--weight-label); }

/* ---------- options: one vocabulary for people, days, times and zones ---------- */

.opc {
  position: relative; display: grid; place-items: center; min-width: 0;
  color: var(--navy); background: transparent; text-decoration: none;
  border: var(--rule) solid var(--navy); border-radius: var(--radius);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
a.opc:not(.is-off):active { transform: scale(.97); }
.opc.is-posta, .opc[aria-pressed="true"], .opc.is-tocada { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.opc.is-tocada { transition: none; }
.opc.is-off { cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  a.opc:not(.is-off):not(.is-posta):not([aria-pressed="true"]):not(.is-tocada):hover { background: var(--color-ghost-hover); }
}

/* 1: how many people. Square tiles, as the menu's allergen letters grown to a tap: four to a row on a phone,
   eight from 760 px. */
.pessoas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); max-width: 26rem; }
.opc--pessoas {
  aspect-ratio: 1;
  font-size: var(--step-3); font-weight: var(--weight-label); line-height: 1; font-variant-numeric: var(--numeric);
}
@media (min-width: 760px) { .pessoas { grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 44rem; gap: var(--space-xs); } }

/* «Mais de 8 pessoas?»: a disclosure that opens the navy box with WhatsApp, phone and email. */
.grupo { max-width: 44rem; }
.grupo__abrir {
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--tap);
  font-weight: var(--weight-label); cursor: pointer; list-style: none;
}
.grupo__abrir::-webkit-details-marker { display: none; }
.grupo__abrir .ic:last-child { width: 1em; height: 1em; transition: transform var(--dur-micro) var(--ease-out); }
.grupo[open] .grupo__abrir .ic:last-child { transform: rotate(180deg); }
.grupo__abrir span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color var(--dur-hover) ease; }
@media (hover: hover) and (pointer: fine) { .grupo__abrir:hover span { text-decoration-color: currentColor; } }
.grupo__caixa { display: grid; gap: var(--space-m); margin-top: var(--space-xs); }
.grupo__caixa > p { max-width: 52ch; }
.grupo__caixa .acoes { gap: var(--space-xs); }
.grupo__caixa .acoes .btn { flex: 1 1 15rem; }
.ficha__acoes-onde .btn { flex: 1 1 11rem; }
.grupo__email { font-size: var(--step--1); color: var(--color-text-muted); }
.grupo__email a { color: var(--color-text); font-weight: var(--weight-label); overflow-wrap: anywhere; }

/* 2: the month, set as a grid of the menu. Seven columns from Monday, six weeks from this one. */
.calendario { max-width: 46rem; }
.calendario__mes {
  margin-bottom: var(--space-xs);
  font-size: var(--step-1); font-weight: var(--weight-heading); line-height: var(--leading-ui);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.calendario__semana, .calendario__grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario__semana { background: var(--navy); color: var(--cream); }
.calendario__semana abbr {
  padding-block: var(--space-2xs); text-align: center; text-decoration: none;
  font-size: .75rem; font-weight: var(--weight-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.calendario__grelha {
  border: var(--rule) solid var(--navy); border-top: 0;
  background: var(--mist); gap: var(--rule-soft);   /* the hairline between dishes, here between days */
}
.calendario__grelha > li { min-width: 0; display: flex; background: var(--cream); }
.dia {
  flex: 1; display: grid; grid-template-rows: 14px auto 2.2em; align-content: center; justify-items: center; row-gap: 3px;   /* two lines kept for the word, so the numbers of a week line up */
  min-height: 64px; padding: 6px 1px; border: 0; text-align: center;
}
.dia:focus-visible { z-index: 1; outline-offset: -4px; }
.dia__marca { font-size: .6875rem; line-height: 14px; font-weight: var(--weight-heading); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.dia__n { font-size: 1.1875rem; font-weight: var(--weight-label); line-height: 1; font-variant-numeric: var(--numeric); }
.dia__p { font-size: .6875rem; line-height: 1.1; font-weight: var(--weight-label); text-wrap: balance; }
/* today: the number in the colour of today in the hours, and the red bar of the now */
.dia.is-hoje .dia__n { color: var(--color-today); font-weight: var(--weight-display); }
.dia.is-hoje::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--red); }
.dia.is-hoje.is-posta .dia__n, .dia.is-hoje[aria-pressed="true"] .dia__n, .dia.is-hoje.is-tocada .dia__n { color: var(--cream); }
.dia.is-almost .dia__p, .dia.is-filling .dia__p { color: var(--navy); }
.dia.is-off { background: var(--color-closed-surface); color: var(--color-closed-text); }
.dia.is-off .dia__n { font-weight: var(--weight-text); }
.calendario__grelha > .is-fora { display: grid; place-items: center; min-height: 64px; background: var(--cream); }
.is-fora .dia__n { font-weight: var(--weight-text); color: var(--mist); }
.calendario__grelha > .calendario__linha-nota {
  grid-column: 1 / -1; display: block; padding: var(--space-xs) var(--space-s);
  background: var(--navy); color: var(--cream);
  font-size: var(--step--1); font-weight: var(--weight-label); line-height: var(--leading-ui);
}
.calendario__nota { min-height: 1.3em; margin-top: var(--space-xs); font-weight: var(--weight-label); line-height: var(--leading-ui); max-width: 60ch; }
.calendario__nota:empty { min-height: 0; margin: 0; }
@media (max-width: 479.98px) {
  /* nearly edge to edge on a phone, so seven columns keep 44 px at 320 */
  .calendario__semana, .calendario__grelha { margin-inline: calc(-1 * var(--space-gutter) + 4px); }
}
@media (max-width: 479.98px) {
  /* the longest word («Fechado») has to fit a seventh of the screen: the size follows the width (about 9 px at
     320) and the weight drops to the regular, which is narrower; the number above stays the strong mark */
  .dia { padding-inline: 0; }
  .dia__p, .dia__marca { font-size: min(.6875rem, calc((100vw - 46px) / 31)); letter-spacing: 0; }
  .dia__p { font-weight: var(--weight-text); }
}
@media (min-width: 760px) {
  .dia, .calendario__grelha > .is-fora { min-height: 84px; }
  .dia__n { font-size: 1.5rem; }
  .dia__marca, .dia__p { font-size: .75rem; }
  .dia { grid-template-rows: 14px auto 1.2em; }
  .calendario__semana abbr { font-size: var(--step--1); padding-block: var(--space-xs); }
}

/* «Outra data» */
.outra-data { max-width: 30rem; }
.outra-data__linha { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.outra-data__linha .controlo__campo { flex: 1 1 11rem; width: auto; min-width: 0; }
input[type="date"].controlo__campo { -webkit-appearance: none; appearance: none; }

/* 3: the times, grouped by service; the service titled like a box title of the menu, the rule running on */
.servicos { max-width: 46rem; }
.servico + .servico { margin-top: var(--space-xl); }
.servico__titulo {
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-s); row-gap: 2px;
  margin-bottom: var(--space-s);
  font-size: var(--step-2); font-weight: var(--weight-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display); text-transform: uppercase;
}
.servico__titulo::after { content: ""; flex: 1 0 var(--space-xl); align-self: center; height: var(--rule); background: var(--color-rule); }
.servico__intervalo { font-size: var(--step--1); font-weight: var(--weight-text); letter-spacing: 0; text-transform: none; color: var(--color-text-muted); }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--space-2xs); }
.horas > li { display: flex; }
.hora { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: var(--space-2xs) 4px; text-align: center; }
.hora__t { font-size: var(--step-0); font-weight: var(--weight-label); line-height: 1.1; font-variant-numeric: var(--numeric); white-space: nowrap; }
.hora__p { font-size: .75rem; line-height: 1.1; font-weight: var(--weight-label); text-wrap: balance; }
.hora.is-esgotado { background: var(--color-disabled-surface); border-color: var(--color-disabled-surface); color: var(--color-disabled-text); }
.hora.is-esgotado .hora__t { font-weight: var(--weight-text); text-decoration: line-through; text-decoration-thickness: var(--rule); }
@media (min-width: 760px) { .horas { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-xs); } }
.servico__fechado { display: flex; gap: var(--space-2xs); align-items: flex-start; color: var(--color-text-muted); font-weight: var(--weight-label); }

/* no time on the day: the nearest days that have one */
.alternativas__titulo { font-weight: var(--weight-label); }
.reserva__palco > .alternativas { margin-top: var(--space-s); }
.alternativas, .zonas { display: grid; gap: var(--space-2xs); max-width: 32rem; }
.alternativa {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-s);
  min-height: 56px; padding: var(--space-xs) var(--space-m); font-weight: var(--weight-label); text-align: left;
}

/* 4: the zone, as rows: the name, and under it what it is or why it cannot be picked */
.zona {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome ico" "sub ico";
  justify-items: start; align-items: center; column-gap: var(--space-s); row-gap: 2px;
  min-height: 72px; padding: var(--space-xs) var(--space-m); text-align: left;
}
.zona__nome { grid-area: nome; font-size: var(--step-1); font-weight: var(--weight-heading); line-height: 1.2; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.zona__sub { grid-area: sub; font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-muted); }
.zona > .ic { grid-area: ico; }
.zona.is-posta .zona__sub, .zona[aria-pressed="true"] .zona__sub, .zona.is-tocada .zona__sub { color: var(--mist); }
.zona.is-off { background: var(--color-disabled-surface); border-color: var(--color-disabled-surface); color: var(--color-disabled-text); }
.zona.is-off .zona__sub { color: var(--color-disabled-text); font-weight: var(--weight-label); }

.voltar { margin-top: var(--space-m); }

/* ---------- notices ---------- */

.aviso {
  display: flex; gap: var(--space-xs); align-items: flex-start; max-width: 44rem;
  padding: var(--space-s) var(--space-m); border: var(--rule) solid var(--navy); background: var(--cream-light);
  outline-offset: 4px;
}
.aviso > .ic { margin-top: .12em; color: var(--navy); }
.aviso p { line-height: var(--leading-ui); }
.aviso--erro { border-color: var(--color-error); }
.aviso--erro > .ic { color: var(--color-error); }
.aviso__acao { margin-top: var(--space-s); }
.aviso:focus:not(:focus-visible) { outline: none; }

/* ---------- «A vossa mesa»: the navy box of the menu ---------- */

.mesa { display: grid; align-content: start; }
.mesa__titulo {
  font-size: var(--step-2); font-weight: var(--weight-heading); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display); text-transform: uppercase;
}
.mesa__lista { margin-top: var(--space-s); border-top: var(--rule) solid var(--color-rule); }
.mesa__linha {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; column-gap: var(--space-s); align-items: baseline;
  padding-block: var(--space-2xs); border-bottom: var(--rule-soft) solid var(--color-rule-soft);
}
.mesa__linha dt { font-size: var(--step--1); font-weight: var(--weight-label); color: var(--color-text-muted); }
.mesa__linha dd { margin: 0; }
.mesa__linha dd:not(.mesa__mudar) { font-weight: var(--weight-label); }
@media (max-width: 419.98px) {
  .mesa__linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dt mudar" "dd dd"; row-gap: 0; }
  .mesa__linha dt { grid-area: dt; }
  .mesa__linha dd:not(.mesa__mudar) { grid-area: dd; }
  .mesa__mudar { grid-area: mudar; }
}
.mesa__mudar a {
  display: inline-flex; align-items: center; min-height: var(--tap); margin-block: calc((1.6em - var(--tap)) / 2);
  font-size: var(--step--1); font-weight: var(--weight-label); text-underline-offset: .2em;
}
.mesa__subtitulo {
  margin-top: var(--space-l);
  font-size: var(--step--1); font-weight: var(--weight-label); line-height: var(--leading-ui);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.mesa__titulo + .mesa__subtitulo { margin-top: var(--space-m); }
.mesa__titulo + .mesa__regras { margin-top: var(--space-s); }
.mesa__regras {
  display: grid; gap: var(--space-2xs); margin-top: var(--space-xs);
  font-size: var(--step--1); line-height: 1.5;
}
.mesa__regras li { position: relative; padding-left: 1.1em; }
.mesa__regras li::before {   /* the square of the pattern, as in .lista */
  content: ""; position: absolute; left: 0; top: .6em; width: .42em; height: .42em; background: var(--red);
}
.mesa__nota, .dados__demo {
  display: flex; gap: var(--space-2xs); align-items: flex-start; margin-top: var(--space-s);
  font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-muted);
}
.mesa__nota .ic, .dados__demo .ic { margin-top: .1em; color: var(--color-text); }
.mesa__contacto {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-s);
  margin-top: var(--space-m); padding-top: var(--space-s); border-top: var(--rule-soft) solid var(--color-rule-soft);
}
.mesa__rotulo { font-size: var(--step--1); font-weight: var(--weight-label); color: var(--color-text-muted); }
.mesa__contacto a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: var(--step-1); font-weight: var(--weight-label); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .mesa__contacto a:hover, .mesa__mudar a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
}

/* ---------- 5: the details, the box and the button ---------- */

.dados > * + * { margin-top: var(--space-xl); }
.dados > .dados__enviar { margin-top: var(--space-m); }
.dados__cabeca > * + * { margin-top: var(--space-l); }
.dados__cabeca > .pergunta + .pergunta__sub { margin-top: var(--space-s); }
.dados__mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dados__campos > * + * { margin-top: var(--space-m); }
.dados__campos .controlo, .dados__fim .controlo { max-width: 32rem; }

/* fields: label above, cream-light well with the navy 2 px rule; errors in red-ink with the icon, beside the field */
.controlo { display: grid; gap: 6px; }
.controlo__rotulo { font-weight: var(--weight-label); line-height: var(--leading-ui); }
.controlo__opcional { font-weight: var(--weight-text); color: var(--color-text-muted); }
.controlo__campo {
  width: 100%; min-height: var(--button-h); padding: 10px 14px;
  border: var(--rule) solid var(--navy); border-radius: var(--radius);
  background: var(--color-surface-raised); color: var(--navy);
  font-size: max(16px, var(--step-0)); line-height: 1.4;
}
textarea.controlo__campo { min-height: 6.5rem; resize: vertical; }
.controlo__campo:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.controlo__campo::placeholder { color: var(--color-text-muted); }
.is-erro .controlo__campo { border-color: var(--color-error); }
.controlo__ajuda { font-size: var(--step--1); line-height: var(--leading-ui); color: var(--color-text-muted); }
.controlo__contador { white-space: nowrap; }
.controlo__erro { display: flex; gap: 6px; align-items: flex-start; font-size: var(--step--1); font-weight: var(--weight-label); line-height: var(--leading-ui); color: var(--color-error); }
.controlo__erro .ic { margin-top: .05em; }
.controlo__erro[hidden], .controlo__contador[hidden] { display: none; }
.controlo__tel { display: flex; }
.controlo__prefixo {
  display: grid; place-items: center; flex: none; padding-inline: var(--space-xs);
  background: var(--navy); color: var(--cream); font-weight: var(--weight-label);
}
.controlo__tel.is-internacional .controlo__prefixo { display: none; }
.controlo--check { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xs); align-items: start; }
.controlo--check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--navy); border-radius: 0; }
.controlo--check label { line-height: var(--leading-ui); }
.controlo--check .controlo__erro { grid-column: 1 / -1; }
.controlo--check input[aria-invalid="true"] { outline: var(--rule) solid var(--color-error); outline-offset: 2px; }
.dados__privacidade { margin-top: var(--space-2xs); padding-left: calc(24px + var(--space-xs)); font-size: var(--step--1); }
.dados__privacidade a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--weight-label); }
.dados__demo { margin-top: var(--space-2xs); max-width: 32rem; }

.resumo-erros {
  max-width: 32rem; padding: var(--space-s) var(--space-m);
  border: var(--rule) solid var(--color-error); background: var(--cream-light); outline-offset: 4px;
}
.resumo-erros:focus:not(:focus-visible) { outline: none; }
.resumo-erros__titulo { display: flex; gap: var(--space-2xs); align-items: center; font-weight: var(--weight-heading); color: var(--color-error); }
.resumo-erros ul { display: grid; gap: 2px; margin-top: var(--space-2xs); }
.resumo-erros a { display: inline-flex; align-items: center; min-height: 36px; color: var(--navy); font-weight: var(--weight-label); }
.resumo-erros li:not(:has(a)) { padding-block: var(--space-2xs); }

/* The one button of the flow says what it does in a sentence, so it keeps sentence case («20h00» keeps its h).
   On a phone it stays at the bottom of the screen; this page has no action bar. */
.dados__enviar {
  position: sticky; bottom: 0; z-index: 2;
  margin: var(--space-m) calc(-1 * var(--space-gutter)) 0;
  padding: var(--space-xs) var(--space-gutter) calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
  background: var(--cream); border-top: var(--rule) solid var(--navy);
}
.dados__botao {
  width: 100%; justify-content: space-between; gap: var(--space-s);
  min-height: 56px; padding-block: var(--space-xs); white-space: normal; text-align: left;
  font-size: var(--step-0); line-height: 1.3; letter-spacing: 0; text-transform: none;
}
.dados__botao .ic { flex: none; }
.dados__botao[aria-busy="true"] { cursor: progress; }
.dados__botao:disabled { background: var(--navy); border-color: var(--navy); color: var(--cream); opacity: .8; pointer-events: none; }
@media (max-width: 959.98px) {
  /* a field that takes focus is never left under the button pinned to the bottom */
  html:has(.dados__enviar) { scroll-padding-bottom: 120px; }
}
@media (min-width: 960px) {
  .dados__enviar { position: static; margin: var(--space-l) 0 0; padding: 0; background: none; border: 0; }
  .dados__botao { width: auto; max-width: 100%; padding-inline: var(--space-m); }
  /* the box stands beside the fields, where «A vossa mesa» stood on the steps before */
  .dados {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 48px);
    grid-template-rows: auto auto auto 1fr; align-items: start;
  }
  .dados > * + * { margin-top: 0; }
  .dados > :not(.mesa) { grid-column: 1 / span 7; }
  .dados__cabeca { grid-row: 1; }
  .dados__campos { grid-row: 2; margin-top: var(--space-xl); }
  .dados__fim { grid-row: 3; margin-top: var(--space-l); }
  .dados > .dados__enviar { grid-row: 4; }
  .dados > .mesa { grid-column: 8 / span 5; grid-row: 1 / span 4; position: sticky; top: var(--space-l); }
}
@media (min-width: 1440px) { .dados > .mesa { grid-column: 9 / span 4; } }

/* ---------- «a minha reserva» ---------- */

.ficha__topo { display: grid; gap: var(--space-m); padding-block: var(--space-xl) var(--space-l); }
.ficha__titulo { max-width: 16ch; }
.ficha__lead { max-width: 40ch; }
.ficha__ate { font-size: var(--step-2); font-weight: var(--weight-heading); line-height: var(--leading-heading); }
.ficha__faixa { margin-bottom: var(--space-xl); }
@media (min-width: 760px) { .ficha__topo { padding-block: var(--space-2xl) var(--space-xl); } }

.ficha { padding-bottom: var(--space-section); }
.ficha > * + * { margin-top: var(--space-xl); }
.ficha__grelha { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); align-items: start; }
@media (min-width: 960px) {
  .ficha__grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 48px); }
  .ficha__resumo { grid-column: 1 / span 6; }
  .ficha__lado { grid-column: 8 / span 5; }
}
.ficha__resumo { max-width: 40rem; }
.ficha__lado > * + * { margin-top: var(--space-xl); }
.ficha__acoes { margin-top: var(--space-l); }

.talao__lista { margin-top: var(--space-s); border-top: var(--rule) solid var(--color-rule); }
.talao__linha {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--space-s); align-items: baseline;
  padding-block: var(--space-xs); border-bottom: var(--rule-soft) solid var(--color-rule-soft);
}
.talao__linha dt { font-size: var(--step--1); font-weight: var(--weight-label); color: var(--color-text-muted); }
.talao__linha dd { margin: 0; font-size: var(--step-1); line-height: 1.3; font-weight: var(--weight-label); overflow-wrap: anywhere; }
/* the code is read out over the phone: one line, never split at its hyphen */
.talao__codigo { letter-spacing: .06em; white-space: nowrap; }
@media (max-width: 379.98px) {
  .talao__linha { grid-template-columns: 5.25rem minmax(0, 1fr); }
  .talao__codigo { letter-spacing: .02em; }
}
.talao__estado.is-cancelada, .talao__estado.is-nao_apareceu { color: var(--color-text-muted); }
.talao__acoes { margin-top: var(--space-l); }
.talao__acoes .btn { max-width: 100%; white-space: normal; text-align: left; }

.ficha__subtitulo {
  font-size: var(--step--1); font-weight: var(--weight-label); line-height: var(--leading-ui);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding-top: var(--space-xs); border-top: var(--rule) solid var(--color-rule);
}
.ficha__morada { margin-top: var(--space-xs); font-size: var(--step-1); line-height: 1.35; font-weight: var(--weight-label); }
.ficha__acoes-onde { margin-top: var(--space-m); gap: var(--space-xs) var(--space-s); }
.ficha__guardar { max-width: 40ch; }
.ficha__copiar { margin-top: var(--space-3xs); padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.ficha__copiar[hidden] { display: none; }
.ficha__cancelar { margin-top: var(--space-m); }
.cancelar .acoes { gap: var(--space-s); }

/* ---------- motion: the step swap ----------
   Only the script adds these classes, so a page that arrives from the server is always fully visible.
   Forward comes in from the right, back from the left: the direction is the information. */
@keyframes reserva-frente { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes reserva-tras { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes reserva-opcao { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes reserva-escreve { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes reserva-esqueleto { from { opacity: .45; } to { opacity: 1; } }
.palco-frente { animation: reserva-frente 320ms var(--ease-out) both; }
.palco-tras { animation: reserva-tras 320ms var(--ease-out) both; }
/* the exit starts on the tap, in parallel with the request; the stage dims, it never blanks */
.palco-sai { opacity: .25; transform: translateX(-12px); transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); pointer-events: none; }
.palco-sai--tras { transform: translateX(12px); }
.palco-frente [data-opcoes] .opc, .palco-tras [data-opcoes] .opc {
  animation: reserva-opcao 280ms var(--ease-out) both;
  animation-delay: min(calc(var(--i, 0) * 11ms), 240ms);
}
.elo--escreve .elo__v, .mesa__linha.is-nova { animation: reserva-escreve 380ms var(--ease-out) 100ms both; }
.esqueleto__hora { display: block; flex: 1; min-height: 56px; border: var(--rule) solid var(--mist); }
.esqueleto__barra { display: inline-block; width: 7rem; height: .8em; background: var(--mist); }
.esqueleto .servico__titulo::after { background: var(--mist); }
.esqueleto { animation: reserva-esqueleto 900ms ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .palco-frente, .palco-tras, .palco-frente [data-opcoes] .opc, .palco-tras [data-opcoes] .opc,
  .elo--escreve .elo__v, .mesa__linha.is-nova, .esqueleto { animation: none; }
  .palco-sai, .palco-sai--tras { opacity: .5; transform: none; transition: opacity var(--dur-fade-reduced) ease; }
  .opc, .elo > a::after, .elo__caixa::after, .grupo__abrir .ic:last-child { transition: none; }
  a.opc:not(.is-off):active { transform: none; }
}

@media print {
  .espinha, .reserva__lado, .ficha__copiar, .ficha__cancelar, .talao__acoes, .dados__enviar, .ficha__faixa { display: none !important; }
}