/*
 * Atelier Blanc — the design system for every surface of the queuing system.
 *
 * Paper, ink, hairline rules and one bronze accent. Radius is 0 everywhere
 * except status dots and radio marks; separation is by rule or by ground
 * change, never by shadow.
 *
 * Sizing on the fluid surfaces (phone, staff desktop) is in rem so the
 * four-step text-size tray can scale the whole page from the root. The two
 * fixed-format surfaces — lobby kiosk (1080x1440) and wall board (1920x1080) —
 * are laid out at their native pixel size inside `.at-stage`, which scales
 * rather than reflows them.
 */

:root {
  --paper: #FAF8F4;
  --paper-card: #FFFFFF;
  --paper-tint: #F3EFE7;
  --ink: #1C1A17;
  --ink-muted: #6B655C;
  --rule: #E3DDD3;
  --rule-faint: #EFEBE3;
  --accent: #7A5A22;
  --accent-deep: #5C4419;
  --live: #2F5D50;
  --on-accent: #FAF8F4;

  --serif: 'EB Garamond', 'Noto Serif SC', Georgia, serif;
  --sans: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  font-size: 16px;
}

/* The serif stack follows the language: Traditional Chinese needs Noto Serif TC,
   everything else reads better with SC first. Set once on the root; inherited. */
html[lang='zh-Hant'] { --serif: 'EB Garamond', 'Noto Serif TC', serif; --sans: 'Noto Sans TC', system-ui, sans-serif; }
html[lang='zh-Hans'] { --serif: 'EB Garamond', 'Noto Serif SC', serif; --sans: 'Noto Sans SC', system-ui, sans-serif; }
html[lang='en']      { --serif: 'EB Garamond', 'Noto Serif SC', Georgia, serif; --sans: 'EB Garamond', 'Noto Sans SC', system-ui, sans-serif; }

/* Four-step text size, persisted by the accessibility tray. */
html[data-text-scale='small']  { font-size: 14px; }
html[data-text-scale='normal'] { font-size: 16px; }
html[data-text-scale='large']  { font-size: 18px; }
html[data-text-scale='xlarge'] { font-size: 20px; }

*, *::before, *::after { box-sizing: border-box; }

body.at {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body.at.at--card { background: var(--paper-card); }

/* `:where()` keeps these resets at zero specificity, so a component class —
   .at-btn, .at-field — always wins over them. Written as plain selectors they
   out-specify every single-class rule and quietly undo it. */
.at :where(input, button, select, textarea) { font: inherit; color: inherit; }
.at :where(a) { color: var(--accent); text-decoration: none; }
.at :where(a:hover) { color: var(--accent-deep); }
.at img { max-width: 100%; }

[x-cloak] { display: none !important; }

/* ---------------------------------------------------------------- layout */

.at-phone { width: 100%; max-width: 30rem; margin: 0 auto; min-height: 100vh; }
.at-gutter { padding-left: 1.375rem; padding-right: 1.375rem; }

.at-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.875rem;
  padding: 1.125rem 1.375rem;
  border-bottom: 1px solid var(--rule);
}
.at-header__brand { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.at-header__title { font-size: 1.0625rem; letter-spacing: .01em; }

.at-monogram {
  width: 1.875rem; height: 1.875rem; flex: none;
  border: 1px solid var(--ink);
  display: grid; place-items: center;
  font-size: .9375rem; line-height: 1;
  object-fit: contain; background: transparent;
}
.at-monogram--lg { width: 2.875rem; height: 2.875rem; font-size: 1.4375rem; }
.at-monogram--xl { width: 3rem; height: 3rem; font-size: 1.5rem; }

.at-back {
  border: none; background: transparent; padding: 0;
  font-size: 1.1875rem; line-height: 1; color: var(--ink); cursor: pointer;
}

/* ------------------------------------------------------------ typography */

.eyebrow {
  font-family: var(--mono);
  font-size: .65625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--tight { letter-spacing: .18em; font-size: .625rem; }

.at-section { margin-top: 1.875rem; }
.at-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid var(--ink);
}

.num { font-variant-numeric: tabular-nums; }
.at-sans { font-family: var(--sans); }
.at-mono { font-family: var(--mono); }
.at-muted { color: var(--ink-muted); }
.at-live { color: var(--live); }
.at-accent { color: var(--accent); }

.dot {
  width: .3125rem; height: .3125rem; border-radius: 999px;
  background: var(--live); display: inline-block; flex: none;
}

/* ---------------------------------------------------------------- rows */

.at-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--rule);
}
.at-row--muted, .at-row--muted * { color: var(--ink-muted); }
.at-row__name { font-size: 1.0625rem; }
.at-row__service { font-size: .8125rem; color: var(--ink-muted); font-family: var(--sans); }
.at-row__value { text-align: right; }
.at-row__number { font-size: 1.5rem; }
.at-row__status { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; }

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

.at-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  width: 100%; min-height: 3.5rem; padding: .5rem 1.25rem;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--serif); font-size: 1.125rem; letter-spacing: .02em;
  cursor: pointer; background: transparent; color: var(--ink);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.at-btn--accent { background: var(--accent); color: var(--on-accent); }
.at-btn--accent:hover:not(:disabled) { background: var(--accent-deep); }
.at-btn--outline { border-color: var(--ink); }
.at-btn--outline:hover:not(:disabled) { background: var(--paper-tint); }
.at-btn--ink { background: var(--ink); color: var(--paper); }
.at-btn--ink:hover:not(:disabled) { background: #2d2a25; }
.at-btn--quiet {
  min-height: 3rem; border: none; background: transparent;
  font-family: var(--sans); font-size: .875rem; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.at-btn--auto { width: auto; }
.at-btn--sm { min-height: 3rem; font-size: 1rem; padding: 0 1.25rem; }
.at-btn:disabled { color: var(--ink-muted); border-color: var(--rule-faint); background: transparent; cursor: not-allowed; }
.at-btn--accent:disabled { background: var(--rule-faint); color: var(--ink-muted); }
.at-btn:focus-visible, .at-lang button:focus-visible, .at-field:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.key {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  border: 1px solid currentColor; padding: 2px 6px; opacity: .65;
}

.at-actions { display: flex; flex-direction: column; gap: .625rem; }

/* Rows that are toggled by x-show keep their layout in a class, never in an
   inline style: Alpine clears the element's inline display when it shows it. */
.at-pair { display: flex; gap: 1.625rem; font-family: var(--sans); }
.at-pair__value { font-size: 1.3125rem; margin-top: .1875rem; font-family: var(--serif); }
.at-between { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.at-undo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8125rem 1rem; background: var(--paper-tint);
}

/* --------------------------------------------------------------- fields */

.at-label {
  display: block; margin-bottom: .5rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-muted);
}
.at-field {
  width: 100%; border: none; border-bottom: 1px solid var(--ink);
  background: transparent; padding: .5rem 0 .625rem;
  font-family: var(--serif); font-size: 1.1875rem; color: var(--ink);
  border-radius: 0; outline: none;
}
.at-field--soft { border-bottom-color: var(--rule); }
.at-field--code { font-family: var(--mono); font-size: 1.5rem; letter-spacing: .2em; text-transform: uppercase; }
.at-field::placeholder { color: var(--ink-muted); opacity: .7; }
.at-field:focus { border-bottom-color: var(--accent); }

.at-choice {
  display: flex; align-items: center; gap: .875rem;
  padding: .9375rem 0; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.at-choice input { position: absolute; opacity: 0; pointer-events: none; }
.at-choice__mark {
  width: 1rem; height: 1rem; flex: none; border: 1px solid var(--rule);
  border-radius: 999px; display: grid; place-items: center;
}
.at-choice__mark--box { border-radius: 0; }
.at-choice__mark::after { content: ''; width: .5rem; height: .5rem; border-radius: 999px; background: transparent; }
.at-choice__mark--box::after { border-radius: 0; }
.at-choice input:checked + .at-choice__mark { border-color: var(--accent); }
.at-choice input:checked + .at-choice__mark::after { background: var(--accent); }
.at-choice__body { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- notes */

.at-note {
  background: var(--paper-tint);
  border-left: 2px solid var(--accent);
  padding: 1rem 1.125rem;
  font-family: var(--sans); font-size: .9375rem; line-height: 1.6; color: #3a352e;
}

.at-empty {
  padding: 1.75rem 0; font-family: var(--sans); font-size: .875rem; color: var(--ink-muted);
}

/* ------------------------------------------------------- language switch */

.at-lang { display: flex; border: 1px solid var(--rule); flex: none; }
.at-lang button {
  border: none; background: transparent; color: var(--ink-muted);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  padding: 5px 9px; cursor: pointer; min-height: 1.75rem;
}
.at-lang button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.at-lang--lg button { font-size: 15px; padding: 10px 18px; min-height: 0; }

/* --------------------------------------------------- accessibility tray */

.at-tray {
  margin-top: 1.875rem; padding: 1rem 1.375rem 0;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.at-tray__steps { display: flex; gap: .375rem; }
.at-tray__steps button {
  width: 2.75rem; height: 2.75rem; flex: none;
  border: 1px solid var(--rule); background: transparent;
  font-family: var(--serif); cursor: pointer; color: var(--ink);
}
.at-tray__steps button[aria-pressed='true'] { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------- ticket / hero */

.at-hero-number {
  font-size: clamp(5.5rem, 28vw, 7.5rem);
  line-height: .84; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.at-now-number {
  font-size: 5.125rem; line-height: .86; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

.at-progress { display: flex; gap: 4px; margin-bottom: .5rem; }
.at-progress span { flex: 1; height: 3px; background: var(--rule); }
.at-progress span.is-past { background: var(--accent); }

.at-detail {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .8125rem 0; border-top: 1px solid var(--rule);
}
.at-detail__label { font-family: var(--sans); font-size: .875rem; color: var(--ink-muted); }
.at-detail__value { font-size: 1rem; text-align: right; }

/* ------------------------------------------------ fixed-format surfaces */

/* A kiosk or wall screen is designed at one size and scaled to the real
   display, never reflowed. `.at-stage` holds the native box; the wrapper
   centres it and the script sets the scale factor. */
.at-viewport {
  min-height: 100vh; width: 100vw; overflow: hidden;
  background: var(--paper);
  display: grid; place-items: center;
}
.at-stage { transform-origin: center center; flex: none; }
.at-stage--wall { width: 1920px; height: 1080px; padding: 56px 64px; display: flex; flex-direction: column; }
.at-stage--kiosk { width: 1080px; height: 1440px; padding: 64px 72px; display: flex; flex-direction: column; }

.wall-flash { animation: wall-flash 1.1s ease-in-out 3; }
@keyframes wall-flash {
  0%, 100% { background: transparent; }
  50% { background: var(--paper-tint); }
}

@media (prefers-reduced-motion: reduce) {
  .wall-flash { animation: none; }
  .at-btn { transition: none; }
}

/* --------------------------------------------------------- staff frames */

.at-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.375rem;
  padding: 1.125rem 2rem; border-bottom: 1px solid var(--ink);
  flex-wrap: wrap;
}
.at-chip {
  display: inline-flex; align-items: center; gap: .625rem;
  border: 1px solid var(--rule); padding: 7px 14px;
}
.at-split { display: grid; grid-template-columns: 1fr 30rem; }
.at-split > :first-child { border-right: 1px solid var(--rule); }
@media (max-width: 1100px) {
  .at-split { grid-template-columns: 1fr; }
  .at-split > :first-child { border-right: none; border-bottom: 1px solid var(--rule); }
}

.at-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); }
.at-stats > div { background: var(--paper); padding: 1.25rem 1.375rem; }
.at-stats__value { font-size: 2.375rem; margin-top: .375rem; font-variant-numeric: tabular-nums; }

.at-table { width: 100%; border-collapse: collapse; }
.at-table th {
  text-align: left; font-weight: 400; padding: 0 .75rem .75rem 0;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom: 1px solid var(--ink);
}
.at-table td { padding: 1.125rem .75rem 1.125rem 0; border-bottom: 1px solid var(--rule); font-size: 1.125rem; }

/* ----------------------------------------------------------- KERN credit */

.at-footer {
  margin-top: 2.5rem; padding: 1.25rem 1.375rem 1.75rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.at-footer__links { display: flex; flex-wrap: wrap; gap: 1.125rem; }
.at-footer__links a { font-family: var(--mono); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.at-footer__links a:hover { color: var(--accent); }

.kern-credit {
  display: inline-flex;
  width: 220px;
  height: 44px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  vertical-align: middle;
  border-radius: 2px;
  text-decoration: none;
}
.kern-credit img {
  display: block;
  flex: none;
  width: 220px;
  height: auto;
  max-width: none;
  filter: brightness(0);
}
.kern-credit--on-dark img { filter: brightness(0) invert(1); }
.kern-credit:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.kern-credit--on-dark { color: #f0ede5; }

/* -------------------------------------------------------------- loading */

/* Skeletons are outlines at the row's final height — a shimmer reads as noise
   in this palette. */
.at-skel { border: 1px solid var(--rule); height: 3.5rem; margin-bottom: .5rem; }
.at-skel--tall { height: 6rem; }

/* ---------------------------------------------------------------- toast */

.at-toasts {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: .5rem; width: max-content; max-width: 90vw;
}
.at-toast {
  background: var(--ink); color: var(--paper);
  padding: .875rem 1.125rem; font-family: var(--sans); font-size: .875rem;
  opacity: 0; transform: translateY(6px); transition: opacity 160ms ease, transform 160ms ease;
}
.at-toast.is-visible { opacity: 1; transform: none; }
.at-toast--error { background: #6b2318; }

/* --------------------------------------------------------------- dialog */

.qs-dialog-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(28, 26, 23, .45);
  display: grid; place-items: center; padding: 1.5rem;
  opacity: 0; transition: opacity 160ms ease;
}
.qs-dialog-overlay.is-visible { opacity: 1; }
.qs-dialog {
  background: var(--paper); border: 1px solid var(--ink);
  padding: 1.75rem; width: 100%; max-width: 26rem;
}
.qs-dialog__title { margin: 0 0 .625rem; font-size: 1.25rem; font-weight: 500; font-family: var(--serif); }
.qs-dialog__message { margin: 0; font-family: var(--sans); font-size: .9375rem; line-height: 1.6; color: var(--ink-muted); }
.qs-dialog__actions { display: flex; justify-content: flex-end; gap: .625rem; margin-top: 1.5rem; }
.qs-btn--danger { background: #6b2318; color: var(--on-accent); border-color: #6b2318; }