/* css/fiscal.css — the fiscal-printer mark ("@ A123123").
 *
 * A single body-level element, NOT a per-screen one: the venue's requirement is
 * that it stays on the glass continuously while the adóügyi nyomtató is online,
 * whatever the guest is doing — browsing, paying, or looking at the lock
 * screen. One node that no screen transition can unmount is the only way to get
 * that; a copy per screen would flicker on every slide.
 *
 * `style.css` is FROZEN (00-contracts.md §5 [A3]), so the two layout nudges the
 * mark needs from existing screens live at the bottom of this sheet, which is
 * linked after it.
 */

:root {
  /* Reserved for the mark on the screens that have a `.top-nav`. Both the
   * mark's own width cap and the nav's indent come from this one value, so the
   * title can never drift under a long AP number. */
  --fiscal-gutter: 196px;
}

/* ===== THE MARK ===== */

.fiscal-mark {
  position: fixed;
  top: 28px;
  left: 20px;
  /* Over `.overlay` (100) and `.service-lock` (200). Deliberately over the lock
   * screen too: a printer that is still online while the kiosk is shut for some
   * OTHER reason is exactly what the member of staff walking up needs to know,
   * and it keeps the tap gesture below reachable from the locked kiosk. */
  z-index: 300;
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: calc(var(--fiscal-gutter) - 28px);
  padding: 7px 14px;
  border: 1px solid rgba(20, 20, 18, 0.10);
  border-radius: 999px;
  /* Tinted rather than white: the small variant sits on the white `.top-nav`
   * bar on most screens, and a white chip on white is not a chip. */
  background: rgba(20, 20, 18, 0.055);
  color: #1b1b19;
  font-family: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.fiscal-mark[hidden] { display: none; }

.fiscal-mark-at {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.fiscal-mark-ap {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1;
  /* An unexpectedly long AP number truncates instead of pushing the mark out
   * from under the gutter and over the screen title. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The "@" alone is the online signal; the number is only its label, so an
 * empty one collapses rather than leaving a gap after the mark. */
.fiscal-mark-ap:empty { display: none; }

/* ===== LARGE VARIANT (the pink full-bleed screens) =====
 * The start screen and the service lock are the same pink brand screen with
 * nothing else in the corner, and they are what the kiosk shows while nobody is
 * ordering — which is when staff actually look at it. Bigger there, and dressed
 * to match the pink instead of the white nav bar. */

.fiscal-mark.is-large {
  top: 26px;
  left: 30px;
  gap: 12px;
  padding: 12px 26px;
  max-width: none;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px);
}

.fiscal-mark.is-large .fiscal-mark-at { font-size: 40px; }
.fiscal-mark.is-large .fiscal-mark-ap { font-size: 32px; }

/* ===== IN-HEADER VARIANT (operator.html) =====
 * Finding #7 (venue, 2026-08-11): the staff page must show the same mark as the
 * guest glass. It was only inside the health cards there (`apNumLine`), which
 * is a different thing — a field in a report you scroll to, not the at-a-glance
 * corner chip.
 *
 * Two things have to change and nothing else. The base chip is `position:
 * fixed` because on the kiosk it must outlive every screen transition; this
 * page is an ordinary scrolling document, so a fixed chip would float over the
 * transaction list. And the operator header is `background: var(--dark)`, on
 * which the base chip's `rgba(20,20,18,0.055)` tint and near-black ink are
 * invisible — the same problem `.is-large` already solves for the pink screens,
 * solved the same way rather than by a second copy of the chip in that page's
 * inline <style>.
 *
 * Kept at the small variant's SIZE deliberately: it sits beside a 19px <h1> in
 * an 18px-padded bar, and the reason the splash gets a big one (nobody is
 * standing at the kiosk) does not apply to a page an operator is reading. */
.fiscal-mark.in-header {
  position: static;
  max-width: none;
  flex-shrink: 0;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ===== MAKING ROOM =====
 * Only while the mark is actually shown (`body.fiscal-on`, set by app.js) — a
 * printer that went offline must not leave an indented title behind it. */

/* Every ordering screen's title starts at x=32, which is under the mark. */
body.fiscal-on .top-nav { padding-left: var(--fiscal-gutter); }

/* The start screen's own top bar starts at the same corner. Pushed to the right
 * as a group rather than given a fixed indent: the large mark's width follows
 * the AP number, and no magic number survives a longer one.
 *
 * Finding #5 dropped the "NAV@ | Allergének" tab, so this bar now has exactly
 * ONE child — and that changed what the base rule does. `.splash-lang-bar` is
 * `justify-content: space-between` (style.css:743, FROZEN): with two children
 * that split them left and right, but with one it parks the English hint on the
 * LEFT, directly under the mark. So the override is no longer conditional on
 * `body.fiscal-on` — the hint belongs on the right whether or not the printer
 * is online, and pinning it there also stops it jumping sides when the printer
 * drops offline mid-shift. `gap` is kept for the day a second child returns. */
#screen-splash .splash-lang-bar {
  justify-content: flex-end;
  gap: 24px;
}