/* Fukuro — "mural manga".
 *
 * The look comes from the restaurant's own wall art: stencilled owls, maneki-neko
 * and skulls in yellow, blue and magenta over a near-black panel. The collage
 * photograph fills the screen behind everything; a dark scrim and a central panel are what
 * keep the type readable over it.
 *
 * Covers the landing page, the reservation modal, the guest's reservation page
 * and the admin area, in that order.
 */

:root {
  /* Straight off the murals. Only ever a highlight, never body text. */
  --mural-yellow: #f5c518;

  /* Brand darks and papers. */
  --panel: #15110f;
  --panel-2: #241d19;
  --panel-3: #342a24;

  --ink: #1b1715;
  --ink-soft: #574e48;
  /* Deep enough to clear 4.5:1 on cream — it carries hints and field labels,
     which are small, so it cannot be the usual washed-out grey. */
  --ink-faint: #746860;
  --cream: #f7f1e4;
  --paper: #fffdf8;
  --card: #fffdf8;
  --line: #e3d8c6;

  /* On dark panels. */
  --on-dark: #f7f1e4;
  --on-dark-soft: rgba(247, 241, 228, .74);
  --on-dark-line: rgba(247, 241, 228, .2);

  /* The mural orange, taken one step deeper than the design reference so white
     button text and the card headings both clear 4.5:1. */
  --accent: #cc4420;
  --accent-ink: #ffffff;
  --accent-dark: #a93418;
  --accent-soft: #fbeade;

  --ok: #2f6b45;
  --ok-soft: #e9f3ec;
  --warn: #8a5a16;
  --warn-soft: #fbf1df;
  --err: #a3281f;
  --err-soft: #fbeceb;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow: 0 1px 2px rgba(21, 17, 15, .06), 0 10px 34px rgba(21, 17, 15, .12);
  --shadow-panel: 0 24px 70px rgba(0, 0, 0, .55);
  --focus: #1f6feb;
  --focus-dark: var(--mural-yellow);

  /* Barlow Condensed for display, DM Sans for reading. Noto Sans JP closes both
     stacks so フクロウ never falls back to a font without kana. */
  --font-display: "Barlow Condensed", "Avenir Next Condensed", "Helvetica Neue Condensed",
    "Arial Narrow", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "Meiryo", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

}

* { box-sizing: border-box; }

/* `hidden` must win over any `display` a component sets, or a closed overlay
   stays on the page and swallows every click behind it. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Visible focus everywhere, never removed. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Over the mural a blue ring disappears into the photographs; yellow does not.
   Inside the white hero panel the opposite is true, so it reverts to blue. */
.on-dark :focus-visible,
.hero :focus-visible,
.modal__head :focus-visible {
  outline-color: var(--focus-dark);
}
.hero__panel :focus-visible { outline-color: var(--focus); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Katakana, wherever it appears next to Latin display type. */
.jp { font-family: var(--font-jp); font-weight: 500; }

/* Skip link, for keyboard users landing on the page. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--panel); color: var(--on-dark); padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  transition: top .15s;
}
.skip:focus { top: 0; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display);
  font-size: 1.06rem; font-weight: 600; line-height: 1.2;
  letter-spacing: .045em;
  padding: .8rem 1.6rem; min-height: 48px;
  border-radius: 999px; border: 2px solid transparent;
  background: var(--panel); color: var(--on-dark);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .15s, border-color .15s, color .15s, transform .06s;
}
.btn:hover:not(:disabled) { background: var(--panel-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--accent:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover:not(:disabled) { background: #f1e9db; }

.btn--danger { background: transparent; color: var(--err); border-color: #e5bfbb; }
.btn--danger:hover:not(:disabled) { background: var(--err-soft); }

/* The pair in the hero panel: one filled in accent, one outlined in ink. */
.btn--onpanel {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn--onpanel:hover:not(:disabled) { background: rgba(21, 17, 15, .07); }

.btn--block { width: 100%; }
.btn--sm { padding: .45rem 1rem; min-height: 38px; font-size: .95rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ------------------------------------------------------- the mural backdrop */

/* The collage photograph, shown once and scaled to fill — it does not tile
   seamlessly. Everything that sits on it gets a scrim. */
.mural {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--panel);
  background-image: url("/images/fukuro-mural.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Uneven on purpose: lighter at the edges so the murals still read as
   photographs, heaviest through the middle where the panel sits. */
.mural::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(12, 9, 8, .58) 0%,
      rgba(12, 9, 8, .34) 24%,
      rgba(12, 9, 8, .32) 76%,
      rgba(12, 9, 8, .62) 100%),
    radial-gradient(ellipse 90% 55% at 50% 50%,
      rgba(12, 9, 8, .44) 0%,
      rgba(12, 9, 8, .20) 60%,
      rgba(12, 9, 8, 0) 100%);
}


/* ----------------------------------------------------------------- landing */

.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column;
  color: var(--on-dark);
}

.hero__top {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; justify-content: flex-end; gap: 1rem;
  padding: 1.1rem 1.1rem 0;
}

/* The logo heads the panel. On white it needs no plate and no knockout — it is
   simply the logo, as drawn. */
.hero__brand { margin: 0; line-height: 0; }
.hero__logo {
  display: block; width: auto;
  height: clamp(115px, 19.2vh, 180px);
  margin: 0 auto;
}

.hero__body {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: .75rem 1rem 1.25rem;
}

/* The central panel. This, with the scrim, is what makes the type legible no
   matter which part of the collage lands behind it. */
.hero__panel {
  width: min(100%, 44rem);
  /* Centred in the hero, then lifted by half this margin. Kept small: the panel
     now carries the hours and contact too, and the whole page must fit one
     screen without scrolling. */
  margin-bottom: clamp(0rem, 1.5vh, 1.75rem);
  background: var(--paper);
  border: 1px solid rgba(21, 17, 15, .1);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  padding: 2rem 1.3rem 1.4rem;
  text-align: center;
}
@media (min-width: 640px) { .hero__panel { padding: 2.4rem 2.75rem 2.1rem; } }

/* The short accent rule, as on the mural panel (used by the notice pop-up). */
.rule {
  display: block; width: 92px; height: 3px; margin: 1.3rem auto 0;
  background: var(--accent); border-radius: 2px;
}

.hero__tagline {
  margin: .9rem auto 0; max-width: 62ch;
  font-size: clamp(1rem, 3.4vw, 1.12rem);
  color: var(--ink-soft);
}

.hero__cta {
  display: flex; flex-direction: column; gap: .7rem;
  width: min(100%, 23rem); margin: 1.2rem auto 0;
}
@media (min-width: 560px) {
  .hero__cta { flex-direction: row; width: auto; justify-content: center; }
  .hero__cta .btn { min-width: 15rem; }
}

.hero__meta {
  margin: .9rem 0 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: .95rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__meta strong { color: var(--ink); font-weight: 700; letter-spacing: .09em; }

/* Language switch */
.lang {
  display: inline-flex; flex: none;
  background: rgba(16, 12, 10, .8);
  border: 1px solid rgba(247, 241, 228, .34);
  border-radius: 999px; padding: 3px;
  backdrop-filter: blur(6px);
}
.lang button {
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .34rem 1rem; border: 0; border-radius: 999px;
  background: transparent; color: rgba(247, 241, 228, .8); cursor: pointer;
  transition: background .15s, color .15s;
}
.lang button:hover { color: var(--on-dark); }
.lang button[aria-pressed="true"] { background: var(--cream); color: var(--panel); }

/* Light placement — the guest's reservation page sits on cream, not on mural. */
.lang--light { background: var(--paper); border-color: var(--line); }
.lang--light button { color: var(--ink-soft); }
.lang--light button:hover { color: var(--ink); }
.lang--light button[aria-pressed="true"] { background: var(--panel); color: var(--on-dark); }

/* ------------------------------------------------------------ hero facts */

/* Reservations cover the first sitting only, so the note sits right under the
   buttons where the guest is deciding. */
.hero__note {
  margin: .9rem auto 0; max-width: 42ch;
  font-size: .92rem; line-height: 1.45;
  color: var(--ink-soft);
}

/* Hours, address and contact, inside the panel — the page is one screen and
   there is nothing below to scroll to. */
.hero__facts {
  margin: 1rem auto 0; padding-top: .9rem;
  border-top: 1px solid var(--line);
  max-width: 34rem;
}

/* Opening hours, as a plain two-column schedule — days left, times right. */
.hours {
  margin: 0; display: grid; gap: .22rem .9rem;
  grid-template-columns: auto auto; justify-content: center;
  font-size: .9rem;
}
.hours dt {
  text-align: right; color: var(--ink-faint);
  font-family: var(--font-display); font-weight: 600;
  font-size: .95rem; letter-spacing: .09em; text-transform: uppercase;
}
.hours dd { margin: 0; text-align: left; color: var(--ink); font-weight: 500; }

.hero__note-sub { display: block; margin-top: .15rem; color: var(--ink-faint); }

.hero__address { margin: .5rem 0 0; font-size: .95rem; }

/* The address is the map link, with a quiet underline rather than an accent
   colour, so it reads as information that happens to be clickable. */
.hero__address a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.hero__address a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* WhatsApp, Instagram and phone. 44px targets, so they are tappable. */
.social {
  list-style: none; display: flex; justify-content: center; gap: .3rem;
  margin: .5rem 0 0; padding: 0;
}
.social__link {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--ink-soft);
  transition: color .15s, background .15s;
}
.social__link:hover { color: var(--accent); background: var(--accent-soft); }
.social__link svg { width: 23px; height: 23px; display: block; }

/* ------------------------------------------------- the owner's pop-up notice */

/* Reuses .modal-backdrop and .modal, then drops the dark head band: a notice
   has one thing to say and a close button, not a flow to navigate.

   The type follows the site — a condensed display heading in caps over a body
   sans message — so a notice reads as part of the restaurant rather than as a
   browser alert. */
.modal.popup {
  position: relative;
  background: var(--paper);
  /* Extra room at the top so the content clears the close button. */
  padding: 2.6rem 1.35rem 1.6rem;
  text-align: center;
}
@media (min-width: 640px) { .modal.popup { padding: 2.8rem 2.25rem 2rem; } }

/* An image notice is allowed to be much wider than a text one.
   `.modal` caps at 32rem, which is the right measure for the booking form it
   was written for — a column of text and inputs — but it shows a 1600px poster
   at about a third of its size. The frame also tightens, because a picture does
   not need the breathing room a paragraph does. */
.popup.popup--image {
  /* Two classes on purpose: `.modal` also sets max-width and is defined later
     in this file, so a single class would lose on source order alone. */
  max-width: min(58rem, 94vw);
  padding: 2.6rem .85rem 1rem;
}
@media (min-width: 640px) { .popup.popup--image { padding: 3rem 1.1rem 1.1rem; } }

/* Where there is room, a large source grows until it reaches half the viewport
   — half the width or half the height, whichever it meets first, so the shape
   is untouched. A small source still shows at its own size.

   Only above 760px: half of a phone screen is 195px, which is not a poster.
   Below that the picture keeps the full width of the panel.

   The panel shrinks to the picture rather than staying at its maximum, or a
   portrait image would sit in a wide frame of empty paper. */
@media (min-width: 760px) {
  .popup.popup--image {
    width: fit-content;
    max-width: min(94vw, calc(50vw + 2.4rem));
  }
  .popup--image .popup__image { max-width: 50vw; max-height: 50vh; }
}

/* The only way out of the notice, so it is drawn as a real button rather than a
   bare glyph — a transparent × in a corner is easy to miss when nothing else on
   the panel is clickable. Still 40px square, the tap target used everywhere. */
.popup__close {
  position: absolute; top: .6rem; right: .6rem;
  border-color: var(--line); background: var(--cream);
  color: var(--ink);
  /* Explicit, and load-bearing. `.popup__content` follows this button in the
     DOM and animates its opacity, which gives it a stacking context and lifts
     it into the same paint layer as this positioned element — so it would
     otherwise be painted on top and swallow every click on the ×. */
  z-index: 1;
}
.popup__close:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.popup__title {
  margin: .9rem 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1.08; letter-spacing: .055em; text-transform: uppercase;
  color: var(--ink);
}

.popup__text {
  margin: .85rem auto 0; max-width: 34ch;
  font-size: 1rem; line-height: 1.55;
  color: var(--ink-soft);
}
.popup__text p { margin: 0; }
.popup__text p + p { margin-top: .6rem; }

/* An image notice is the owner's own artwork, so it is shown whole rather than
   cropped to a shape the layout would prefer. */
/* `width: auto` rather than `100%`: a poster should fill the space available,
   but a small image should not be stretched up to it and go soft. The source's
   own size is the ceiling.

   `height: auto` with only maximums set is what keeps the proportions — the
   browser scales both axes together, so whichever limit binds first decides the
   size and the shape never changes. */
.popup__image {
  display: block;
  width: auto; max-width: 100%; height: auto;
  max-height: 72svh;
  margin-inline: auto;
  border-radius: var(--radius);
}

/* The pop-up is centred on every size — unlike the booking modal, which rises
   from the bottom edge on a phone because it is a multi-step form. */
.popup-backdrop { align-items: center; padding: 1.1rem; }
.popup-backdrop .modal { border-radius: var(--radius); }

/* It should read as something arriving, not as something that was always
   there — a guest who has already looked at the page needs to notice it.

   The scrim fades while the panel overshoots very slightly past its final size
   and settles back. The overshoot is what makes it feel like a pop rather than
   a zoom; much more than this and it reads as a toy.

   Driven by `:not([hidden])` because the dialog is built hidden and unhidden to
   open, and an animation cannot run on a `display: none` element — so removing
   the attribute is what starts it. */
@keyframes popup-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* One continuous motion, with the overshoot in the easing curve rather than in
   a middle keyframe.
   
   An explicit keyframe at the peak decelerates to a stop and then starts again
   from a stop, which leaves the panel hanging at full size for about a tenth of
   a second — the thing that made it feel mechanical. A single curve whose
   control point passes above 1 overshoots and recovers without ever stopping. */
@keyframes popup-pop-in {
  from { opacity: 0; transform: scale(.74) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.popup-backdrop:not([hidden]) { animation: popup-scrim-in .3s ease-out both; }
.popup-backdrop:not([hidden]) .notice {
  animation: popup-pop-in .58s cubic-bezier(.18, 1.82, .36, 1) both;
}

/* Opacity must not ride the overshooting curve: it would reach 1, carry on past
   it and clamp, so the panel would finish fading while still growing. Its own
   shorter, ordinary ease keeps the fade ahead of the movement. */
.popup-backdrop:not([hidden]) .popup__content,
.popup-backdrop:not([hidden]) .popup__close { animation: popup-scrim-in .26s ease-out both; }

/* A field the owner has not filled in yet, shown as such rather than invented. */
.pending {
  display: inline-block; font-style: normal; color: var(--warn);
  background: var(--warn-soft); border: 1px dashed #e0c491;
  border-radius: 6px; padding: .1rem .5rem; font-size: .85rem;
}

/* ------------------------------------------------------------------- modal */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(12, 9, 8, .74);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
@media (min-width: 640px) { .modal-backdrop { align-items: center; padding: 1.5rem; } }

.modal {
  background: var(--cream); width: 100%; max-width: 32rem;
  max-height: 92svh; display: flex; flex-direction: column;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
@media (min-width: 640px) { .modal { border-radius: var(--radius); max-height: 88svh; } }

/* The modal wears the brand: a dark head band carrying the wordmark, then a
   cream body where the forms stay plainly readable. */
.modal__head {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .95rem 1rem 1rem;
  background: var(--panel); color: var(--on-dark);
  border-bottom: 3px solid var(--accent);
}
.modal__mark {
  display: block; margin: 0 0 .25rem;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: .95rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-dark-soft);
}
.modal__mark .jp {
  font-style: normal; font-size: .85em; letter-spacing: .1em; margin-left: .4em;
}
.modal__title {
  margin: 0; flex: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  line-height: 1.1; letter-spacing: .04em; text-transform: uppercase;
}
.modal__step {
  margin: .2rem 0 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-soft);
}

.icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: #f1e9db; }

/* The two in the dark head band. */
.modal__head .icon-btn {
  background: transparent; color: var(--on-dark);
  border-color: var(--on-dark-line);
}
.modal__head .icon-btn:hover { background: rgba(247, 241, 228, .16); }

.modal__body { padding: 1.2rem 1rem 1.4rem; overflow-y: auto; flex: 1; }

/* Progress rail */
.rail { display: flex; gap: 4px; padding: .8rem 1rem 0; background: var(--cream); }
.rail span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.rail span[data-done="true"] { background: var(--accent); }

.step-title {
  margin: 0 0 .35rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.65rem;
  line-height: 1.12; letter-spacing: .02em;
}
.step-help { margin: 0 0 1.2rem; color: var(--ink-soft); font-size: .95rem; }

/* Party size */
.party-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.party-grid button {
  font-family: var(--font-body); font-weight: 500;
  padding: 1.1rem .4rem; cursor: pointer;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  transition: border-color .15s, background .15s;
}
.party-grid button:hover { border-color: var(--ink-faint); }
.party-grid button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.party-grid .n {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.85rem; line-height: 1;
}
.party-grid .w { font-size: .72rem; color: var(--ink-faint); }

/* Calendar */
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.cal__month {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.cal__nav { display: flex; gap: .35rem; }

.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow div {
  text-align: center; font-family: var(--font-display); font-weight: 600;
  font-size: .78rem; letter-spacing: .12em;
  color: var(--ink-faint); padding: .3rem 0; text-transform: uppercase;
}

.cal__grid button, .cal__grid .blank { aspect-ratio: 1; min-height: 42px; }
.cal__grid .blank { visibility: hidden; }

.cal__grid button {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  cursor: pointer;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); display: grid; place-items: center; padding: 0;
  transition: border-color .15s, background .15s;
}
.cal__grid button:hover:not(:disabled) { border-color: var(--accent); }
.cal__grid button:disabled {
  cursor: not-allowed; background: #efe8da; color: #b1a79b;
  border-color: transparent; text-decoration: line-through; text-decoration-thickness: 1px;
}
.cal__grid button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.cal__grid button[data-today="true"]:not(:disabled) { box-shadow: inset 0 0 0 2px var(--ink-faint); }

.cal__legend { display: flex; gap: 1rem; margin-top: .85rem; font-size: .8rem; color: var(--ink-faint); }
.cal__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cal__legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.cal__legend .free { background: var(--paper); border: 2px solid var(--ink-faint); }
.cal__legend .busy { background: #ded4c2; border: 2px solid #cdc1ac; }

/* Sittings */
.sittings { display: grid; gap: .6rem; }
.sittings button {
  font-family: var(--font-display); font-weight: 700; font-size: 1.45rem;
  letter-spacing: .04em; cursor: pointer;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem 1.2rem; text-align: left; color: var(--ink);
  display: flex; align-items: center; gap: 1rem;
  transition: border-color .15s;
}
.sittings button:hover { border-color: var(--accent); }

/* ------------------------------------------------------------------- forms */

.field { margin-bottom: 1.05rem; }
.field label {
  display: block;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: .35rem;
}
.field .hint { font-size: .8rem; color: var(--ink-faint); margin: .3rem 0 0; }

.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: .8rem .9rem; min-height: 48px;
  background: var(--paper); border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--focus); }

.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: var(--err); background: #fffafa; }

.field .err { display: none; margin: .35rem 0 0; font-size: .84rem; color: var(--err); font-weight: 500; }
.field[data-invalid="true"] .err { display: block; }

.req { color: var(--err); font-weight: 700; }

.code-input {
  font-family: var(--font-mono);
  font-size: 1.6rem; letter-spacing: .5em; text-align: center; padding-left: .5em;
}

/* ------------------------------------------------------- notices and states */

.notice {
  border-radius: var(--radius-sm); padding: .8rem .95rem; font-size: .92rem;
  margin: 0 0 1rem; border: 1px solid transparent;
}
.notice--info { background: #eef3f8; border-color: #cfdcea; color: #1f3b57; }
.notice--warn { background: var(--warn-soft); border-color: #e6cd9e; color: var(--warn); }
.notice--err  { background: var(--err-soft); border-color: #eec4c1; color: var(--err); }
.notice--ok   { background: var(--ok-soft); border-color: #bfdcc9; color: var(--ok); }

.empty, .loading {
  text-align: center; padding: 2.2rem 1rem; color: var(--ink-faint); font-size: .95rem;
}

.spinner {
  width: 22px; height: 22px; margin: 0 auto .7rem;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.5s; }
  * { transition-duration: .01ms !important; }
  /* The notice still appears, it just does not move. A scale-and-overshoot is
     exactly the kind of motion this preference is asking us not to do, and the
     transition cap above does not touch an animation. */
  .popup-backdrop:not([hidden]),
  .popup-backdrop:not([hidden]) .notice,
  .popup-backdrop:not([hidden]) .popup__content,
  .popup-backdrop:not([hidden]) .popup__close { animation: none; }
}

/* The running summary of what the guest has chosen so far. */
.summary {
  background: var(--panel); color: var(--on-dark);
  border-radius: var(--radius-sm); padding: .75rem .95rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 1.2rem;
}

.divider {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.3rem 0; color: var(--ink-faint);
  font-family: var(--font-display); font-size: .88rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Social sign-in buttons, shown disabled until the provider is configured. */
.oauth { display: grid; gap: .55rem; }
.oauth .btn { background: var(--paper); color: var(--ink); border-color: var(--line); }
.oauth .btn:hover:not(:disabled) { background: #f1e9db; }

/* --------------------------------------------------- booking confirmation */

.done { text-align: center; padding: .5rem 0; }

/* The confirmation wears the dark panel, so finishing a booking lands on the
   same mark the guest started from. */
.done__panel {
  background: var(--panel); color: var(--on-dark);
  border-radius: var(--radius); padding: 1.8rem 1.2rem 1.6rem;
  margin: 0 0 1.2rem;
}
.done__mark {
  width: 58px; height: 58px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 1.8rem;
}
.done__panel h3 {
  margin: 0 0 .2rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.95rem; line-height: 1.08; letter-spacing: .02em; text-transform: uppercase;
}
.done__jp {
  margin: 0 0 .9rem; font-family: var(--font-jp); font-size: .9rem;
  letter-spacing: .3em; color: var(--on-dark-soft);
}
.done__panel p { margin: 0 0 .6rem; color: rgba(247, 241, 228, .88); }
.done__what {
  margin: 1rem 0 0 !important;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark) !important;
}

.token-link {
  display: block; word-break: break-all; font-size: .82rem;
  font-family: var(--font-mono);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .7rem .8rem; margin: .5rem 0 1rem; color: var(--accent);
}

/* ------------------------------------------------- the guest's reservation */

/* The reservation page keeps the mural, with the content on a cream sheet so
   the details and the change/cancel forms stay easy to read. */
.page-mural { position: relative; min-height: 100svh; }
.page-mural > .mural { position: fixed; }

.page { position: relative; z-index: 1; max-width: 36rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.page__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.2rem; color: var(--on-dark);
}
.page__brand { margin: 0; line-height: 0; }
.page__logo {
  display: block; width: auto;
  height: clamp(54px, 10vw, 74px);
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .65));
}

.page__sub {
  margin: .45rem 0 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(247, 241, 228, .85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem; margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.panel h2 {
  margin: 0 0 .9rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  letter-spacing: .04em; text-transform: uppercase;
}

/* The action row sits straight on the mural rather than inside a panel, so each
   button needs a surface of its own — an outline button over the photographs is
   unreadable, the cancel button worst of all. */
#host > .btn-row .btn,
#host > .btn { box-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
#host > .btn-row .btn--ghost,
#host > .btn-row .btn--danger { background: var(--paper); }
#host > .btn-row .btn--danger:hover:not(:disabled) { background: var(--err-soft); }

.dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.1rem; font-size: .95rem; }
.dl dt {
  font-family: var(--font-display); font-weight: 600;
  font-size: .88rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: .12rem;
}
.dl dd { margin: 0; font-weight: 500; }

/* -------------------------------------------------------------- admin area */

.admin { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.admin__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--line);
}
.admin__bar h1 {
  margin: 0; flex: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.admin__who { font-size: .85rem; color: var(--ink-faint); }

.admin__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .admin__grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }

.stat-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
.stat {
  flex: 1; min-width: 7rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .75rem .9rem;
}
.stat b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.8rem; line-height: 1.1;
}
.stat span {
  font-family: var(--font-display); font-size: .78rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .12em;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.res { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 46rem; }
table.res th, table.res td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.res td:nth-child(2) { min-width: 11rem; }
table.res th {
  font-family: var(--font-display); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint);
}
table.res tr[data-cancelled="true"] { color: var(--ink-faint); }
table.res tr[data-cancelled="true"] td:nth-child(2) { text-decoration: line-through; }

.tag {
  display: inline-block; font-family: var(--font-display);
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  padding: .1rem .5rem; border-radius: 5px; text-transform: uppercase;
  white-space: nowrap;
}
.tag--manager { background: var(--warn-soft); color: var(--warn); }
.tag--unverified { background: #efe8da; color: var(--ink-soft); }
.tag--ok { background: var(--ok-soft); color: var(--ok); }
.tag--cancelled { background: var(--err-soft); color: var(--err); }
.tag--warn { background: var(--warn-soft); color: var(--warn); }
/* A reservation the owner put in past the limits. */
.tag--special { background: var(--accent-soft); color: var(--accent-dark); }

/* A service seated past its number, which only a special reservation can do.
   Marked rather than hidden: the manager should see it and know why. */
.stat--over { border-color: var(--accent); background: var(--accent-soft); }
.stat--over b { color: var(--accent-dark); }

/* ------------------------------------------------------------- admin tabs */

.tabs {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin: 0 0 1.4rem;
  border-bottom: 1px solid var(--line);
}

.tabs__tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: .7rem 1.05rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .98rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s, background .15s;
}
.tabs__tab:hover { color: var(--ink); background: var(--accent-soft); }
.tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ------------------------------------------------- closures and notices */

.closures, .notices { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.closures__item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem .95rem;
}
.closures__reason {
  display: block; margin-top: .15rem;
  font-size: .85rem; color: var(--ink-faint);
}

.notices__item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem .95rem;
  display: grid; gap: .6rem;
}
/* The one a guest is seeing right now. */
.notices__item--live { border-color: var(--accent); border-left-width: 4px; }

.notices__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.notices__range { font-weight: 500; }
.notices__mode {
  font-family: var(--font-display); font-size: .85rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.notices__body { display: grid; gap: .2rem; font-size: .9rem; color: var(--ink-soft); }

.notice-preview {
  display: block; width: 100%; height: auto; max-height: 16rem;
  object-fit: contain; border-radius: var(--radius);
  background: var(--panel-3); margin-bottom: .5rem;
}
.notice-preview--sm { max-height: 8rem; margin: 0; }

/* The owner's limit-free booking. Set apart from the rest of the form so it is
   never ticked by accident, and tinted in the accent so it reads as a decision. */
.special {
  margin: 0 0 1rem; padding: .8rem .9rem;
  background: var(--accent-soft);
  border: 1px solid #f0cdb9; border-radius: var(--radius);
}
.special__row {
  display: flex; align-items: center; gap: .55rem;
  margin: 0; font-size: .95rem; cursor: pointer;
}
.special__row input { width: 1.1rem; height: 1.1rem; margin: 0; flex: none; accent-color: var(--accent); }
.special__note { margin: .4rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--ink-soft); }

/* The two mutually exclusive pop-up kinds. */
.modes {
  margin: 0 0 1rem; padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
}
.modes legend {
  padding: 0 .3rem; font-family: var(--font-display); font-weight: 600;
  font-size: .85rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.modes__opt { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .95rem; }
.modes__opt input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); }

.two-up { display: grid; gap: 0 .7rem; grid-template-columns: 1fr 1fr; }

/* The optional second language, folded away so the common case is one form. */
.more { margin: 0 0 1rem; }
.more summary {
  cursor: pointer; font-size: .88rem; color: var(--ink-soft);
  padding: .35rem 0;
}
.more summary:hover { color: var(--accent); }
.more[open] summary { margin-bottom: .5rem; }

.admin__login { max-width: 25rem; margin: 10vh auto; padding: 0 1rem; }

/* Short windows — a laptop at 1280x720, a browser window dragged to 700px, a
   small phone. The page is one screen with nothing below it, so anything that
   does not fit is simply lost; these two tiers take the height back out of
   vertical rhythm rather than out of content.
   Nothing here touches a full-height screen.

   The logo is the first thing trimmed: it is the tallest single item in the
   panel. */
@media (max-height: 820px) {
  .hero__body { padding-top: .5rem; padding-bottom: .75rem; }
  .hero__panel { margin-bottom: 0; padding-top: 1.6rem; padding-bottom: 1.1rem; }
  .hero__tagline { margin-top: .7rem; }
  .hero__cta { margin-top: .95rem; }
  .hero__note { margin-top: .7rem; }
  .hero__facts { margin-top: .8rem; padding-top: .7rem; }
  .hero__address { margin-top: .4rem; }
  .social { margin-top: .3rem; }
  .social__link { width: 40px; height: 40px; }
  .hero__logo { height: clamp(101px, 16.8vh, 132px); }
}

@media (max-height: 720px) {
  .hero__panel { padding-top: 1.25rem; padding-bottom: .9rem; }
  .hero__tagline { margin-top: .55rem; font-size: 1rem; }
  .hero__cta { margin-top: .8rem; }
  .hero__note { margin-top: .55rem; font-size: .88rem; }
  .hero__facts { margin-top: .65rem; padding-top: .6rem; }
  .hours { gap: .14rem .8rem; font-size: .86rem; }
  .hours dt { font-size: .9rem; }
  .hero__address { font-size: .9rem; }
  .social__link { width: 38px; height: 38px; }
  .social__link svg { width: 21px; height: 21px; }
  .hero__logo { height: 101px; }
}

/* A small phone — 375x667 is an iPhone SE or 8, still in plenty of pockets.
   The tap targets deliberately do NOT shrink below 40px here: a small screen is
   where they matter most. The height comes out of the logo and the padding. */
@media (max-height: 700px) {
  .hero__body { padding: .35rem 1rem .5rem; }
  .hero__panel { padding-top: 1.05rem; padding-bottom: .8rem; }
  .hero__tagline { margin-top: .45rem; font-size: .95rem; }
  .hero__cta { margin-top: .7rem; gap: .5rem; }
  .hero__note { margin-top: .5rem; font-size: .85rem; }
  .hero__facts { margin-top: .5rem; padding-top: .5rem; }
  .hours { gap: .1rem .75rem; font-size: .84rem; }
  .hours dt { font-size: .88rem; }
  .hero__address { margin-top: .3rem; font-size: .88rem; }
  .social { margin-top: .2rem; }
  .social__link { width: 40px; height: 40px; }
  .hero__logo { height: 86px; }
}