/* app.8.css — SPLIT THE BILL styles, split out of app.6.css to keep both stylesheets under
   the 800-line CI guard (the same move app.7.css made for the STAFF section). Loaded LAST,
   after app.6.css; this is an isolated component domain (the split overlay + the split-pay
   screen) that no other sheet targets, so the cascade is unchanged in effect. */

/* =====================================================================================
   SPLIT THE BILL (R8b) — the split overlay (pick N ways) + the N-QR split-pay screen
   ===================================================================================== */

/* "Split the bill" action in the white Checkout footer: a touch more prominent than the quiet
   "Back to register" beneath it. Full navy, not light-blue: light-blue TEXT on white is 4.16:1,
   under AA at 14px, and blue is a surface color in this brand rather than a text color (rule 20).
   Navy against the muted "Back to register" keeps the same hierarchy. */
.checkout-split {
  align-self: center;
  margin-top: 0; /* #50: the two secondary actions now share one .checkout-actions row */
  color: var(--nimiq-blue);
}
@media (hover: hover) {
  .checkout-split:hover {
    color: var(--nimiq-blue);
  }
}
.checkout-split:disabled {
  color: var(--muted-text);
  opacity: 0.5;
  cursor: default;
}

/* ---- split overlay (reuses .manager-gate-overlay / .manager-gate-card) ---- */
.split-card {
  text-align: center;
  align-items: center;
  max-width: 320px;
}
.split-title {
  margin: 0;
}
.split-lead {
  color: var(--muted-text);
  margin: 0;
}

/* way-count stepper: [-] N ways [+] */
.split-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 8px 0;
}
.split-ways {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
}
.split-ways-n {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--nimiq-blue);
}
.split-ways-label {
  font-size: 1.5rem;
  color: var(--muted-text);
  margin-top: 2px;
}
/* Per-share preview readback. Navy, not light-blue: rule 20 makes blue a SURFACE color, and
   light-blue TEXT on white is only 4.16:1 (the live contrast finding this reads back). The one
   calculated break on this overlay is the light-blue "Create requests" pill. */
.split-preview {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--nimiq-blue);
}
.split-cancel {
  align-self: center;
}

/* ---- split-pay screen (#38) ----
   The buyer-pays surface is the SAME payment-request composition as the single-sale pay screen:
   .payment-info-line, .pay-qr-row and .merchant-fingerprint are all styled once in app.2.css and
   reused verbatim here. Everything below is only what the split adds: the progress strip, the
   per-share paid state, and the bill-complete success. */
.split-progress,
.split-share-paid,
.split-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.split-progress {
  gap: 8px;
  margin-bottom: 12px;
}
.split-progress-text {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--muted-text);
}
.split-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
/* One chip per share. Unpaid = a quiet neutral disc with its number. Focused = the light-blue
   radial SURFACE with a white numeral (rule 20's canonical pair). Paid = the green radial disc
   carrying the status-screen check, an ICON so green never holds small white text. No colored
   ring on any state: an inset light-blue shadow is what the glow lint flags. 36px clears the
   tap-target floor at every breakpoint. */
.split-chip {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(31, 35, 72, 0.08);
  color: var(--muted-text-strong);
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s var(--nimiq-ease), color 0.15s var(--nimiq-ease);
}
.split-chip-n {
  font-size: 1.75rem;
  font-weight: 700;
}
.split-chip-mark {
  display: inline-flex;
}
.split-chip-mark .nq-icon {
  width: 15px;
  height: 15px;
}
.split-chip.focused {
  background-color: var(--nimiq-light-blue);
  background-image: var(--nimiq-light-blue-bg);
  color: #fff;
}
.split-chip.paid {
  background-color: var(--nimiq-green);
  background-image: var(--nimiq-green-bg);
  color: #fff;
}
/* No focus rule here on purpose: the app-wide :focus-visible outline in app.6.css already gives
   the chip a light-blue keyboard ring OUTSIDE the disc. An outline is not a box-shadow, so it is
   not the colored glow the lint flags. Never bring back an inset colored ring. */

/* A settled share the merchant navigated back to, and the whole bill paid: the brand's success
   pattern, the verbatim status-screen check on the green bottom-right radial. The disc carries the
   green, so the caption under it stays navy instead of repeating it as small green text. */
.split-paid-check,
.split-done-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--nimiq-green);
  background-image: var(--nimiq-green-bg);
  color: #fff;
}
.split-paid-check {
  width: 64px;
  height: 64px;
}
.split-paid-check .nq-icon {
  width: 26px;
  height: 26px;
}
.split-done-check {
  width: 88px;
  height: 88px;
}
.split-done-check .nq-icon {
  width: 36px;
  height: 36px;
}
.split-share-paid {
  gap: 12px;
  margin: 24px 0;
}
.split-paid-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.split-paid-amount .amount {
  font-size: 3.75rem;
  font-weight: 700;
  color: var(--nimiq-blue);
}
.split-paid-amount .fiat-amount {
  font-size: 2rem;
  color: var(--muted-text);
}
.split-paid-line {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  color: var(--nimiq-blue);
}
/* Share nav: Previous, the focused share's name, Next — one row, no extra stack element. */
.split-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.split-nav-label {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--muted-text);
}

/* "Bill paid in full" (split-pay complete state) — rendered in the body, NOT the absolute
   status-screen overlay, which would cover the New sale footer button. */
.split-done {
  justify-content: center;
  gap: 8px;
  padding: 48px 16px;
}
.split-done-title {
  margin: 8px 0 0;
  font-size: 3rem;
  font-weight: 700;
  color: var(--nimiq-blue);
}
.split-done-sub {
  margin: 0;
  font-size: 1.75rem;
  color: var(--muted-text);
}

/* ---- split overlay: mode toggle + custom per-share amounts (R8c) ---- */
.split-mode {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.split-custom-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.split-custom-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.split-custom-label {
  flex: 0 0 auto;
  min-width: 64px;
  text-align: left;
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--muted-text);
}
.split-custom-row .price-field {
  flex: 1 1 auto;
}
.split-custom-indicator {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--muted-text);
}
/* balanced (sum == total): green confirms the split is ready to mint */
.split-custom-indicator.balanced {
  color: var(--nimiq-green);
}

/* =====================================================================================
   ITEM PHOTOS (#39) — the Review row affordance + the sell-tile thumb
   =====================================================================================
   A merchant can put a photo on a menu item, the way a real QSR menu board does. The bytes are
   served from /api/photos/<content-hash>, which the service worker treats as network-only, so a
   photo never enters the cached shell. Every rule below is scoped to an item that HAS a photo:
   a photo-less item renders exactly the markup and the exact tile it always did. */

/* ---- Review screen: the per-row photo affordance ---- */

/* Positioning context for the corner remove control. Fixed 40px so the row's rhythm is unchanged
   whether or not a photo is attached. */
.row-photo-cell {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

/* EMPTY state: a round neutral add-chip, the same small-control shape the pin/star and the stock
   steppers already wear (a small square control is a real nq lint finding; round is the brand's
   answer). No shadow, no border (rule 1). */
.row-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 500px;
  background: rgba(31, 35, 72, 0.06);
  color: rgba(31, 35, 72, 0.4);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s var(--nimiq-ease), color 0.15s var(--nimiq-ease), opacity 0.15s var(--nimiq-ease);
}

@media (hover: hover) {
  .row-photo:hover {
    background: rgba(5, 130, 202, 0.1);
    color: var(--nimiq-light-blue);
  }
}

/* SET state: the photo IS the surface, so the control drops its own fill and takes the same 8px
   rounded-square shape as the sell-tile thumb. With no fill and no border there is no empty shape
   left to round, which is why this one is legitimately square. */
.row-photo.has-photo {
  border-radius: 8px;
  background: none;
}

@media (hover: hover) {
  .row-photo.has-photo:hover {
    background: none;
    opacity: 0.85;
  }
}

.row-photo .nq-icon {
  width: 16px;
  height: 16px;
}

.row-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Remove control, present only once a photo is attached. Sits on the tile's corner as its own hit
   area (the JS stopPropagation()s so it never opens the picker underneath). Same size family as the
   .pin-toggle star on the Sell screen. */
.row-photo-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 500px;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.08);
  color: var(--muted-text);
  font-family: inherit;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s var(--nimiq-ease), box-shadow 0.15s var(--nimiq-ease);
}

@media (hover: hover) {
  .row-photo-remove:hover {
    color: var(--nimiq-blue);
    box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.2);
  }
}

/* ---- Sell screen: the tile thumb ---- */

/* Fixed box so the tile keeps its dimensions even when the image is still loading, fails to load
   (offline) or is not square. Same 8px radius and neutral fill as the Review swatch. A two-up tile
   is only ~150px wide (and the pin/star already owns 44px of that), so a thumb BESIDE the name
   would leave the name almost no width: the photo is a strip across the top of the tile instead and
   the name/price keep the full width beneath it, which is how a real menu board reads anyway. */
.tap-thumb {
  display: block;
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  height: 32px;
  border-radius: 8px;
  background: rgba(31, 35, 72, 0.06);
  overflow: hidden;
}

.tap-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A tile with a photo trades side padding for the strip, so the photo runs the tile's own width and
   the name/price sit under it on the same rail. Photo-less tiles are untouched: `has-photo` only
   ever ADDS a class, so the clean text tile IS the fallback rather than a special case. Grid cells
   stretch, so a photo tile and its text-only row-mate always share a height. */
.item-tap-row.has-photo .item-tap {
  padding: 6px 6px 6px 6px;
}

/* The name/price sit under the strip and get the tile's full width; the leading rail is the strip's
   own left edge. Truncation still works (min-width: 0 is already set). */
.item-tap-row.has-photo .tap-name,
.item-tap-row.has-photo .tap-price {
  padding-left: 6px;
}

/* =====================================================================================
   TOUCH: kill the tap after-effect on the VENDORED registry components.

   app.1-app.8 solve this at the source by wrapping their own :hover rules in
   `@media (hover: hover)`. The registry CSS under public/js/nimiq/** cannot be edited the same
   way: those files are pixel-verified against upstream truth renders and the conformance harness
   diffs the app against them, so a local edit would register as brand drift. They are neutralised
   from here instead — app.8.css is the LAST stylesheet index.html loads, so these win the cascade.

   Two separate ghosts, both of which a phone leaves behind on the last thing you touched:
     :hover  — there is no pointer to move away, so it sticks until you tap something else.
     :focus  — a tap focuses the control, and upstream pairs :focus WITH :hover in the same rule,
               so a tapped CTA stays lifted 2px with its bigger shadow long after you let go.

   `:active` is deliberately left alone everywhere: that is the real press feedback and it
   releases with the finger. Values below restate each component's RESTING declaration verbatim.
   ===================================================================================== */
@media (hover: none) {
  /* Primary CTA: resting shadow, no lift. */
  .nq-button:hover,
  .nq-button:focus {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    transform: none;
  }
  /* The darkened gradient overlay stays hidden until a REAL press. */
  .nq-button:hover::before,
  .nq-button:focus::before {
    opacity: 0;
  }
  .nq-button:active::before {
    opacity: 1;
  }

  /* Small pills (tip presets, More, Delete, Accessibility, staff rows...). */
  .nq-button-s:hover,
  .nq-button-s:focus {
    color: inherit;
    background: rgba(31, 35, 72, 0.07);
  }
  .nq-button-s:active {
    color: var(--nimiq-blue-darkened);
    background: rgba(31, 35, 72, 0.12);
  }

  /* Header back arrow: no slide-left ghost. */
  .page-header-back-button:hover,
  .page-header-back-button:focus {
    transform: none;
  }

  /* Close button (pay screen), copyables (reference, refund link), address readback. */
  .close-button:hover .nq-icon,
  .close-button:focus .nq-icon {
    opacity: 0.2;
  }
  .copyable:hover .background,
  .copyable:focus .background {
    opacity: 0;
  }
  .copyable.copied .background {
    opacity: 0.07; /* the copied CONFIRMATION is real state, not a hover ghost */
  }

  /* Sales-history rows. */
  .transaction-list .transaction:hover {
    background: transparent;
  }
}

/* The grey box iOS/Android paint over a tapped element for ~300ms. Nothing in this app relies on
   it: every tappable surface already has its own :active state, so it is pure noise on top. */
html {
  -webkit-tap-highlight-color: transparent;
}

/* The palette lives HERE, in the last stylesheet index.html loads, and that is load-bearing.
   `.tap-thumb` above sets `background:` — the SHORTHAND, which resets background-image to none — and
   app.8.css loads after app.2.css, so a palette defined earlier lost every coloured sell tile to a
   neutral grey box at equal specificity. Defined last, it wins by order for the sell thumb, the
   Review tile and the picker swatches alike, with no specificity arms race.

   Every swatch is the framework's OWN `--nimiq-*-bg` variable, not a hand-written gradient. That is
   what fixes Andrew's "the yellow is done twice": my first pass hand-rolled gold as
   `#EC991C -> #E9B213` and orange as `#FC8702 -> #E9B213`, so both ENDED on the same stop and read as
   the same yellow. The real orange runs `#FD6216 -> #FC8702` and is plainly orange. Using the
   variables also means these can never drift from the palette again.

   Ten colours, which is the whole of the Nimiq palette that works as a fill. */
.tile-color-gold        { background-image: var(--nimiq-gold-bg); }
.tile-color-orange      { background-image: var(--nimiq-orange-bg); }
.tile-color-red         { background-image: var(--nimiq-red-bg); }
.tile-color-pink        { background-image: var(--nimiq-pink-bg); }
.tile-color-purple      { background-image: var(--nimiq-purple-bg); }
.tile-color-navy        { background-image: var(--nimiq-blue-bg); }
.tile-color-blue        { background-image: var(--nimiq-light-blue-bg); }
.tile-color-green       { background-image: var(--nimiq-green-bg); }
.tile-color-light-green { background-image: var(--nimiq-light-green-bg); }
.tile-color-brown       { background-image: var(--nimiq-brown-bg); }