/* ==========================================================================
   BLKLUX Food Truck — standalone operational screens (KDS, dashboard, driver,
   staff login, tracking). Tablet + phone first.
   ========================================================================== */

html, body { margin: 0; min-height: 100%; }
body.blklux-screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(212, 165, 72, 0.08), transparent 60%),
    var(--blklux-onyx);
  color: var(--blklux-ivory);
  font-family: var(--blklux-font-body);
  font-size: var(--blklux-fs-md);
  line-height: var(--blklux-lh-body);
  padding-top: env(safe-area-inset-top);
}

body.blklux-screen { --blklux-screen-measure: 1400px; }

/* One measure for the whole shell.
 *
 * The bar is full-bleed on purpose — its blurred backdrop and bottom rule
 * should reach both edges — but its *contents* belong on the same line as the
 * page beneath it. They were not: main is capped and centred while the bar
 * only had a gutter, so past 1400px the logo drifted left on its own while the
 * greeting and the cards stayed put. The padding below grows by exactly what
 * centring main takes off, so the two can never part again.
 */
.blklux-screen__bar {
  position: sticky;
  top: 0;
  z-index: var(--blklux-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--blklux-s-3);
  min-height: 60px;
  padding: 0 var(--blklux-gutter);
  padding-inline: max(var(--blklux-gutter), calc((100% - var(--blklux-screen-measure)) / 2 + var(--blklux-gutter)));
  background: rgba(8, 8, 8, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--blklux-line-soft);
}
/* The lockup, at the site header's scale: the mark carries the name, so the
   only text beside it is which screen you are on. */
.blklux-screen__brand { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: inherit; }
.blklux-screen__brand img { height: 44px; width: auto; max-width: none; display: block; }
.blklux-screen__name { font-family: var(--blklux-font-display); font-weight: 600; font-size: var(--blklux-fs-lg); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blklux-screen__title { color: var(--blklux-gold); font-size: var(--blklux-fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding-left: 12px; border-left: 1px solid var(--blklux-line); white-space: nowrap; }
.blklux-screen__actions { display: flex; align-items: center; gap: 8px; }

.blklux-screen__main { flex: 1; width: 100%; max-width: var(--blklux-screen-measure); margin: 0 auto; padding: var(--blklux-s-5) var(--blklux-gutter) calc(var(--blklux-s-7) + env(safe-area-inset-bottom)); }
.blklux-screen__main--center { display: grid; place-items: center; }
.blklux-screen__foot { padding: 12px var(--blklux-gutter) calc(12px + env(safe-area-inset-bottom)); text-align: center; font-size: var(--blklux-fs-xs); color: var(--blklux-ash-soft); }
.blklux-screen__foot a { color: inherit; text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 600px) {
  .blklux-screen__name { display: none; }
  .blklux-screen__brand img { height: 34px; }
  .blklux-screen__title { border: 0; padding: 0; font-size: var(--blklux-fs-sm); }
}

/* --- Section headings ---------------------------------------------------- */

.blklux-section { margin-top: var(--blklux-s-6); }
.blklux-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--blklux-s-3); }
.blklux-section__title { font-family: var(--blklux-font-display); font-variant-numeric: var(--blklux-nums); font-size: var(--blklux-fs-xl); font-weight: 600; letter-spacing: 0.03em; margin: 0; }
.blklux-section__count { color: var(--blklux-gold); font-weight: 700; font-variant-numeric: var(--blklux-nums); }

/* --- Order cards (KDS + dashboard lists) --------------------------------- */

.blklux-orders { display: grid; gap: var(--blklux-s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.blklux-order {
  background: var(--blklux-charcoal);
  border-radius: var(--blklux-r-lg);
  box-shadow: var(--blklux-rim);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.blklux-order--new { box-shadow: var(--blklux-glow); animation: blklux-order-in 500ms var(--blklux-ease-out); }
.blklux-order--late { box-shadow: 0 0 0 1px rgba(217, 101, 79, 0.7), 0 0 28px -8px rgba(217, 101, 79, 0.5); }
@keyframes blklux-order-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.blklux-order__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--blklux-line-soft); }
.blklux-order__num { font-family: var(--blklux-font-display); font-size: var(--blklux-fs-2xl); font-weight: 700; line-height: 1; color: var(--blklux-gold); font-variant-numeric: var(--blklux-nums); }
.blklux-order__meta { display: grid; gap: 2px; text-align: right; font-size: var(--blklux-fs-xs); color: var(--blklux-ash); }
.blklux-order__meta strong { color: var(--blklux-ivory); font-size: var(--blklux-fs-sm); }
.blklux-order__timer { font-weight: 700; font-variant-numeric: var(--blklux-nums); color: var(--blklux-ivory); }
.blklux-order--late .blklux-order__timer { color: var(--blklux-ember); }
.blklux-order__body { padding: 12px 16px; display: grid; gap: 10px; }
.blklux-order__item { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: start; }
.blklux-order__qty { font-weight: 800; color: var(--blklux-gold); font-variant-numeric: var(--blklux-nums); }
.blklux-order__name { font-weight: 600; }
.blklux-order__addons { margin: 2px 0 0; padding: 0; list-style: none; font-size: var(--blklux-fs-sm); color: var(--blklux-ash); }
.blklux-order__addons li::before { content: "+ "; color: var(--blklux-gold); }
.blklux-order__addons li.is-remove::before { content: "– "; color: var(--blklux-ember); }
.blklux-order__note { padding: 8px 12px; border-radius: 8px; background: rgba(224, 176, 74, 0.1); border: 1px solid rgba(224, 176, 74, 0.35); color: var(--blklux-warn); font-size: var(--blklux-fs-sm); font-weight: 600; }
.blklux-order__foot { display: grid; grid-auto-flow: column; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--blklux-line-soft); background: rgba(0, 0, 0, 0.2); }
.blklux-order__foot .blklux-btn { min-height: var(--blklux-touch); font-size: var(--blklux-fs-xs); }
.blklux-order__customer { font-size: var(--blklux-fs-sm); color: var(--blklux-ash); display: flex; justify-content: space-between; gap: 8px; }
.blklux-order__type { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blklux-gold); }

/* KDS columns on wide tablets */
.blklux-kds { display: grid; gap: var(--blklux-s-4); }
@media (min-width: 1025px) { .blklux-kds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blklux-kds__col { display: grid; gap: var(--blklux-s-3); align-content: start; }
.blklux-kds__col-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid var(--blklux-line); font-size: var(--blklux-fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blklux-ash); }
.blklux-kds__col-head .blklux-section__count { font-size: var(--blklux-fs-md); }

/* --- Login card --------------------------------------------------------- */

.blklux-login { width: min(100%, 420px); margin: auto; }
.blklux-login .blklux-card { padding: var(--blklux-s-6); }
.blklux-pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: var(--blklux-s-4); }
.blklux-pinpad button { min-height: 60px; font-size: var(--blklux-fs-xl); border-radius: var(--blklux-r-md); background: var(--blklux-raised); border: 1px solid var(--blklux-line-soft); color: var(--blklux-ivory); font-family: inherit; cursor: pointer; }
.blklux-pinpad button:active { background: rgba(212, 165, 72, 0.15); }
.blklux-pin-dots { display: flex; justify-content: center; gap: 12px; margin: var(--blklux-s-3) 0; }
.blklux-pin-dots span { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--blklux-line-strong); }
.blklux-pin-dots span.is-on { background: var(--blklux-gold-gradient); border-color: transparent; }

/* --- Lists -------------------------------------------------------------- */

.blklux-list-rows { display: grid; gap: 1px; background: var(--blklux-line-soft); border-radius: var(--blklux-r-lg); overflow: hidden; box-shadow: var(--blklux-rim); }
.blklux-list-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; background: var(--blklux-charcoal); }
.blklux-list-row strong { font-weight: 600; }
.blklux-list-row small { color: var(--blklux-ash); }
.blklux-list-row .blklux-num { font-weight: 700; color: var(--blklux-gold); }
.blklux-list-row.is-low .blklux-num { color: var(--blklux-ember); }

/* --- Map ---------------------------------------------------------------- */

.blklux-map { width: 100%; aspect-ratio: 4 / 3; max-height: 60vh; border-radius: var(--blklux-r-lg); overflow: hidden; box-shadow: var(--blklux-rim); background: var(--blklux-charcoal); }
.blklux-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(0.2) brightness(0.72) contrast(1.15) sepia(0.25); }
.blklux-map .leaflet-control-attribution { background: rgba(8, 8, 8, 0.75); color: var(--blklux-ash-soft); font-size: 10px; }
.blklux-map .leaflet-control-attribution a { color: var(--blklux-ash); }
.blklux-map .leaflet-control-zoom a { background: var(--blklux-charcoal); color: var(--blklux-gold); border-color: var(--blklux-line); }
.blklux-pin { width: 36px; height: 44px; }
.blklux-pin svg { width: 36px; height: 44px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.blklux-pin--truck { animation: blklux-pin-pulse 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes blklux-pin-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* --- Dashboard: status band (the one bold element) ----------------------- */

.blklux-dash__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--blklux-s-4); margin-bottom: var(--blklux-s-5); }
.blklux-dash__greeting { font-size: var(--blklux-fs-2xl); text-transform: none; letter-spacing: 0.01em; }
@media (min-width: 768px) { .blklux-dash__greeting { font-size: var(--blklux-fs-3xl); } }

.blklux-band {
  position: relative;
  display: grid;
  gap: var(--blklux-s-4);
  padding: var(--blklux-s-5);
  border-radius: var(--blklux-r-xl);
  background:
    radial-gradient(600px 220px at 0% 0%, rgba(212, 165, 72, 0.16), transparent 70%),
    var(--blklux-charcoal);
  box-shadow: var(--blklux-elev-2);
  overflow: hidden;
}
.blklux-band::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blklux-gold-gradient); }
@media (min-width: 768px) {
  .blklux-band { grid-template-columns: 1fr auto; grid-template-areas: "main prep" "actions actions"; align-items: start; }
  .blklux-band__main { grid-area: main; }
  .blklux-band__prep { grid-area: prep; }
  .blklux-band__actions { grid-area: actions; }
}
.blklux-band__title { font-family: var(--blklux-font-display); font-size: var(--blklux-fs-3xl); font-weight: 600; line-height: 1.05; margin: 8px 0 6px; letter-spacing: 0.01em; }
.blklux-band__location { margin: 0; color: var(--blklux-ash); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.blklux-band__message { margin: 8px 0 0; color: var(--blklux-warn); }
.blklux-band__prep { display: grid; justify-items: center; gap: 2px; padding: var(--blklux-s-3) var(--blklux-s-4); border-radius: var(--blklux-r-lg); border: 1px solid var(--blklux-line); min-width: 160px; }
.blklux-band__prep-value { display: flex; align-items: center; gap: 10px; }
.blklux-band__prep-value strong { font-family: var(--blklux-font-display); font-variant-numeric: var(--blklux-nums); font-size: var(--blklux-fs-4xl); line-height: 1; color: var(--blklux-gold); min-width: 2ch; text-align: center; }
.blklux-band__step { appearance: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--blklux-line-strong); background: transparent; color: var(--blklux-gold); font-size: 22px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.blklux-band__step:active { background: rgba(212, 165, 72, 0.15); }
.blklux-band__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.blklux-band__actions .blklux-btn { flex: 1 1 140px; }

/* --- KDS toolbar ---------------------------------------------------------- */

.blklux-kds__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--blklux-s-3); margin-bottom: var(--blklux-s-4); }
.blklux-kds__tabs { display: none; }
.blklux-kds__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(212, 165, 72, 0.18); color: var(--blklux-gold); font-size: 12px; margin-left: 4px; }
.blklux-chip.is-selected .blklux-kds__count { background: rgba(0, 0, 0, 0.18); color: var(--blklux-gold-ink); }
.blklux-kds__list { display: grid; gap: var(--blklux-s-3); }
.blklux-kds__offline { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--blklux-r-pill); background: var(--blklux-ember); color: var(--blklux-ember-ink); font-weight: 700; z-index: var(--blklux-z-toast); }
@media (max-width: 1024px) {
  .blklux-kds { grid-template-columns: 1fr; }
  .blklux-kds__tabs { display: grid; }
  .blklux-kds__col { display: none; }
  .blklux-kds__col.is-active { display: grid; }
  .blklux-kds__col-head { display: none; }
}

/* --- Rows as links / buttons ---------------------------------------------- */

a.blklux-list-row, button.blklux-list-row { appearance: none; width: 100%; border: 0; color: inherit; text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
a.blklux-list-row:hover, button.blklux-list-row:hover { background: var(--blklux-raised); }
.blklux-list-row .blklux-status { justify-self: end; }

/* --- Analytics ---------------------------------------------------------- */

.blklux-analytics__grid { display: grid; gap: var(--blklux-s-4); margin-top: var(--blklux-s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.blklux-chart__plot { height: 160px; }
.blklux-chart__plot svg { width: 100%; height: 100%; display: block; }
.blklux-chart__ticks { position: relative; height: 18px; margin-top: 6px; font-size: 11px; color: var(--blklux-ash); font-variant-numeric: var(--blklux-nums); }
.blklux-chart__ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* ==========================================================================
   Interaction polish — one hover language for every operational screen
   (dashboard, kitchen, driver, analytics, feedback, tracking).

   Rule: hover changes the surface, never the text. No underlines appearing
   under a card title, no weight or size change, no reflow — only the gold
   rim, a raised surface and a 2px lift, all of which live outside the text.
   ========================================================================== */

body.blklux-screen a { text-decoration: none; }
body.blklux-screen a:hover,
body.blklux-screen a:focus { text-decoration: none; }
/* Inline text links inside prose keep their underline, clear of the type. */
body.blklux-screen p > a:not([class]),
body.blklux-screen .blklux-textlink {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--blklux-line-strong);
  color: var(--blklux-gold);
}
body.blklux-screen p > a:not([class]):hover,
body.blklux-screen .blklux-textlink:hover { color: var(--blklux-gold-light); text-decoration-color: var(--blklux-gold); }

/* --- Rows that act as links ----------------------------------------------- */

a.blklux-list-row, button.blklux-list-row { transition: background-color var(--blklux-dur) var(--blklux-ease-out), box-shadow var(--blklux-dur) var(--blklux-ease-out); }
a.blklux-list-row:hover, button.blklux-list-row:hover { background: var(--blklux-raised); box-shadow: inset 3px 0 0 0 var(--blklux-gold); }
a.blklux-list-row:focus-visible, button.blklux-list-row:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: -2px; }
a.blklux-list-row:active, button.blklux-list-row:active { background: rgba(212, 165, 72, 0.1); }

/* --- Small round controls (prep time stepper, pin pad) --------------------- */

.blklux-band__step, .blklux-pinpad button {
  transition: background-color var(--blklux-dur-fast) var(--blklux-ease-out), border-color var(--blklux-dur-fast) var(--blklux-ease-out), color var(--blklux-dur-fast) var(--blklux-ease-out);
}
.blklux-band__step:hover { background: rgba(212, 165, 72, 0.12); border-color: var(--blklux-gold); color: var(--blklux-gold-light); }
.blklux-band__step:focus-visible, .blklux-pinpad button:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 2px; }
.blklux-pinpad button:hover { background: rgba(212, 165, 72, 0.1); border-color: var(--blklux-line-strong); }

/* --- Screen chrome --------------------------------------------------------- */

.blklux-screen__foot a { transition: color var(--blklux-dur) var(--blklux-ease-out); }
.blklux-screen__foot a:hover { color: var(--blklux-gold); }
.blklux-screen__foot a:focus-visible, .blklux-screen__brand:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 3px; border-radius: 4px; }
.blklux-map .leaflet-control-zoom a:hover { background: var(--blklux-raised); color: var(--blklux-gold-light); border-color: var(--blklux-line-strong); }

/* --- Cards on the analytics / feedback screens ----------------------------- */

a.blklux-card, a.blklux-card:hover { color: inherit; text-decoration: none; }
.blklux-card--interactive:hover { border-color: var(--blklux-line-strong); }
.blklux-card--interactive:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 2px; }

/* --- Motion: lift only where a pointer can hover, and only if allowed ------ */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .blklux-action:hover { transform: translateY(-2px); }
  .blklux-card--interactive:hover { transform: translateY(-2px); }
}
@media (hover: none) {
  .blklux-action:hover, .blklux-card--interactive:hover { box-shadow: var(--blklux-rim); background: var(--blklux-charcoal); transform: none; }
  a.blklux-list-row:hover, button.blklux-list-row:hover { background: var(--blklux-charcoal); box-shadow: none; }
}

/* Ghost buttons are the standing control language on these screens: they read
   as quiet until the pointer arrives, then take the gold rim — never an
   underline, never a size change. */
body.blklux-screen .blklux-btn--ghost { border-color: var(--blklux-line); }
body.blklux-screen .blklux-btn--ghost:hover,
body.blklux-screen .blklux-btn--ghost:focus-visible { border-color: var(--blklux-line-strong); }
body.blklux-screen .blklux-btn:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 2px; }
body.blklux-screen .blklux-chip:focus-visible { outline: 2px solid var(--blklux-gold-light); outline-offset: 2px; }
body.blklux-screen .blklux-btn[aria-pressed="true"] { border-color: var(--blklux-gold); color: var(--blklux-gold-light); }

/* KDS: a column keeps its height when it empties, so the board never jumps. */
.blklux-kds__list { min-height: 120px; align-content: start; }
.blklux-kds__list .blklux-empty { padding: var(--blklux-s-6) var(--blklux-s-4); border: 1px dashed var(--blklux-line); border-radius: var(--blklux-r-lg); }
.blklux-kds__list .blklux-empty strong { font-size: var(--blklux-fs-md); }
.blklux-kds__list .blklux-empty p { margin: 0; font-size: var(--blklux-fs-sm); color: var(--blklux-ash-soft); }
.blklux-kds__clock { font-variant-numeric: var(--blklux-nums); }

/* Analytics + driver share the dashboard's card rhythm. */
.blklux-analytics__grid .blklux-card { background: var(--blklux-charcoal); }
.blklux-screenbar:empty, .blklux-screenbar > .blklux-row:empty { display: none; }
@media (min-width: 1025px) { .blklux-kds-app .blklux-screenbar:not(:has(select)) { display: none; } }

/* --- order tracking: the map, only while the order is on the road --------- */
.blklux-track__map { margin: 18px 0 4px; }
.blklux-track__map .blklux-map { aspect-ratio: 16 / 10; max-height: 300px; }
.blklux-track__map-note { margin: 8px 0 0; }
.blklux-trackpin span { display: block; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(8, 8, 8, 0.55); }
.blklux-trackpin--driver span { background: var(--blklux-gold-gradient); animation: blklux-trackpulse 2s ease-in-out infinite; }
.blklux-trackpin--home span { background: var(--blklux-ivory); }
@keyframes blklux-trackpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .blklux-trackpin--driver span { animation: none; } }
/* the driver's signal paused: keep the last pin, stop pretending it is live */
.blklux-track__map.is-stale .blklux-trackpin--driver span { animation: none; background: var(--blklux-ash); }
.blklux-track__map.is-stale .blklux-track__map-note { color: var(--blklux-warn); }
.blklux-driver__gps { margin: 10px 0 0; }
.blklux-driver__gps.is-live { color: #8fd39a; }
.blklux-driver__gps.is-warn { color: var(--blklux-warn); }

/* --- Join the crew, and the crew's own profile ----------------------------- */
/* Two long forms on a black screen. They are set in one column of readable
   width, grouped under quiet headings, so a phone in a car park and a tablet in
   the truck both read the same way. */
.blklux-apply, .blklux-staffprofile { display: block; padding: clamp(16px, 4vw, 40px) 16px 64px; }
.blklux-apply__card, .blklux-staffprofile__card { max-width: 720px; margin: 0 auto; padding: clamp(20px, 4vw, 36px); }

.blklux-apply__head { text-align: center; margin-bottom: 26px; }
.blklux-apply__title { font-size: clamp(28px, 5vw, 38px); margin: 0; }
.blklux-apply__lede { max-width: 48ch; margin: 10px auto 0; font-size: var(--blklux-fs-md); line-height: 1.55; }

.blklux-apply__set, .blklux-staffprofile__set { border: 0; margin: 0 0 26px; padding: 0; }
.blklux-apply__legend, .blklux-staffprofile__legend {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--blklux-line-soft);
  font-family: var(--blklux-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blklux-gold);
}
.blklux-apply__grid, .blklux-staffprofile__grid { display: grid; gap: 14px 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .blklux-apply__grid, .blklux-staffprofile__grid { grid-template-columns: 1fr 1fr; }
}
.blklux-field { margin: 0; display: grid; gap: 6px; }
.blklux-apply textarea.blklux-input, .blklux-staffprofile textarea.blklux-input { min-height: 104px; padding-top: 12px; line-height: 1.5; resize: vertical; }

/* The job is a choice, so it is cards rather than a dropdown nobody reads. */
.blklux-apply__roles { display: grid; gap: 10px; }
.blklux-apply__role {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 14px 16px 14px 48px;
  border: 1px solid transparent;
  border-radius: var(--blklux-r-lg);
  background: linear-gradient(var(--blklux-raised), var(--blklux-raised)) padding-box, var(--blklux-edge) border-box;
  cursor: pointer;
  transition: background-image var(--blklux-dur) var(--blklux-ease-out);
}
.blklux-apply__role input { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; accent-color: var(--blklux-gold); }
.blklux-apply__role-name { font-weight: 600; color: var(--blklux-ivory); }
.blklux-apply__role-note { font-size: 13px; line-height: 1.45; color: var(--blklux-ash); }
.blklux-apply__role:hover, .blklux-apply__role.is-picked { background-image: linear-gradient(var(--blklux-charcoal), var(--blklux-charcoal)), var(--blklux-edge-lit); }
.blklux-apply__role.is-picked .blklux-apply__role-name { color: var(--blklux-gold-light); }

.blklux-apply__consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font-size: 14px; line-height: 1.5; color: var(--blklux-ash); }
.blklux-apply__consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--blklux-gold); }
.blklux-apply__actions, .blklux-staffprofile__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.blklux-apply__actions .blklux-btn--lg { flex: 1 1 220px; }
body.blklux-theme .blklux-apply__msg, body.blklux-theme .blklux-staffprofile__msg { margin: 0 0 14px; font-size: 14px; }
body.blklux-theme .blklux-apply__msg.is-ok, body.blklux-theme .blklux-staffprofile__msg.is-ok { color: var(--blklux-open); }

.blklux-apply__done { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 20px 0 8px; }
.blklux-apply__seal { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blklux-gold-gradient); color: var(--blklux-gold-ink); font-size: 26px; box-shadow: inset 0 0 0 1px rgba(26, 19, 5, 0.22), 0 8px 20px -10px rgba(212, 165, 72, 0.65); }
.blklux-apply__done h2 { margin: 0; font-size: 26px; }
.blklux-apply__done p { margin: 0; max-width: 42ch; }

/* Profile */
.blklux-staffprofile__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--blklux-line-soft); }
.blklux-staffprofile__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px var(--blklux-line); }
.blklux-staffprofile__name { margin: 0; font-size: clamp(24px, 4vw, 30px); line-height: 1.1; }
.blklux-staffprofile__role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.blklux-staffprofile__back { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 640px) {
  .blklux-staffprofile__head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .blklux-staffprofile__back { grid-column: auto; justify-self: end; }
}
.blklux-staffprofile__pin { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--blklux-line-soft); }
.blklux-staffprofile__pinnote { margin: -6px 0 14px; max-width: 54ch; }
.blklux-staffprofile__pinform { display: grid; gap: 12px; justify-items: start; max-width: 280px; }
.blklux-staffprofile__pinform .blklux-field { width: 100%; }
.blklux-staffprofile__foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--blklux-line-soft); }
/* the avatar link back to one's own profile, in every screen's header */
.blklux-screen__me { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--blklux-line); overflow: hidden; flex: 0 0 auto; }
.blklux-screen__me img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blklux-screen__me:hover, .blklux-screen__me:focus-visible { box-shadow: inset 0 0 0 1px var(--blklux-gold); }

/* --- Who is bringing it ---------------------------------------------------- */
/* On the road, the customer wants three things: a face, how far away, and a way
   to ring. The card sits above the map and leaves with it on delivery. */
.blklux-track__driver {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--blklux-r-lg);
  background: linear-gradient(var(--blklux-raised), var(--blklux-raised)) padding-box, var(--blklux-edge) border-box;
}
.blklux-track__driver-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px var(--blklux-line); }
.blklux-track__driver-who { display: grid; gap: 3px; min-width: 0; }
.blklux-track__driver-name { font-size: var(--blklux-fs-md); line-height: 1.25; color: var(--blklux-ivory); }
.blklux-track__driver-call { grid-column: 1 / -1; justify-self: stretch; gap: 8px; }
.blklux-track__driver-call .blklux-icon { width: 16px; height: 16px; }
@media (min-width: 560px) {
  .blklux-track__driver { grid-template-columns: auto minmax(0, 1fr) auto; }
  .blklux-track__driver-call { grid-column: auto; justify-self: end; }
}

/* --- A new order, in full, before anyone accepts it ------------------------ */
.blklux-list-row--action { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.blklux-list-row--action.is-waiting { border-color: var(--blklux-gold); }
.blklux-badge--wait { background: var(--blklux-gold-gradient); color: var(--blklux-gold-ink); border-color: transparent; margin-left: 8px; }
.blklux-dashorder__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0 0 18px; }
.blklux-dashorder__fact dt { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blklux-ash); margin: 0 0 2px; }
.blklux-dashorder__fact dd { margin: 0; font-size: var(--blklux-fs-sm); color: var(--blklux-ivory); }
.blklux-dashorder__items { display: grid; gap: 12px; margin: 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--blklux-line-soft); }
.blklux-dashorder__items li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.blklux-dashorder__qty { color: var(--blklux-gold); font-weight: 700; }
.blklux-dashorder__note { color: var(--blklux-gold-light); }
.blklux-dashorder__msg { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--blklux-line-soft); font-size: var(--blklux-fs-sm); color: var(--blklux-ash); }
/* The footer is a decision, not a call to action: three ordinary-sized
   controls reading left to right from the quietest to the one that commits.
   The 56px hero button that was here made a routine "yes" look like a launch. */
.blklux-dashorder .blklux-sheet__foot .blklux-row { gap: 10px; flex-wrap: wrap; align-items: center; }
.blklux-dashorder__confirm { font-size: var(--blklux-fs-sm); color: var(--blklux-ivory); }

/* A line of the order: quantity, what it is, what it cost. */
.blklux-dashorder__items li { grid-template-columns: auto minmax(0, 1fr) auto; }
.blklux-dashorder__linetotal { color: var(--blklux-ash); font-size: var(--blklux-fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.blklux-dashorder__addons { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.blklux-dashorder__addons li { display: flex; gap: 6px; align-items: baseline; font-size: var(--blklux-fs-sm); color: var(--blklux-ash); }
.blklux-dashorder__addons li::before { content: "+"; color: var(--blklux-gold); font-weight: 700; }
/* "No pickles" is a removal, not a topping — say so instead of listing it the same way. */
.blklux-dashorder__addons li.is-remove::before { content: "−"; color: var(--blklux-ember); }
.blklux-dashorder__addons li.is-remove span { text-decoration: line-through; text-decoration-color: var(--blklux-ember); }
.blklux-dashorder__addons em { font-style: normal; font-size: var(--blklux-fs-xs); color: var(--blklux-ash-soft); }
.blklux-dashorder__note { margin: 4px 0 0; }

/* The money, itemised, so the total is something you can check rather than trust. */
.blklux-dashorder__sum { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--blklux-line-soft); display: grid; gap: 6px; }
.blklux-dashorder__sumrow { display: flex; justify-content: space-between; gap: 16px; font-size: var(--blklux-fs-sm); color: var(--blklux-ash); font-variant-numeric: tabular-nums; }
.blklux-dashorder__sumrow.is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--blklux-line-soft); color: var(--blklux-ivory); font-weight: 700; font-size: var(--blklux-fs-md); }
.blklux-dashorder__sumrow.is-total span:last-child { color: var(--blklux-gold-light); }
@media (max-width: 480px) { .blklux-dashorder__facts { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ *
 * Thank you for your feedback
 *
 * The tick inside the seal was invisible: `.blklux-seal .blklux-icon`
 * sets the dark ink for a gold fill, and `.blklux-empty .blklux-icon`
 * — same specificity, written later — repainted it gold, so the page
 * showed a plain gold disc. The seal owns its own icon wherever it is.
 * ------------------------------------------------------------------ */
.blklux-seal .blklux-icon,
.blklux-empty .blklux-seal .blklux-icon,
.blklux-thanks .blklux-seal .blklux-icon {
  width: 44px;
  height: 44px;
  color: var(--blklux-gold-ink);
  stroke-width: 2.5;
}

/* One arrival, the same as the order confirmation: the seal lands, the
   thanks follows it, then the way back to the menu. */
.blklux-thanks {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--blklux-s-3);
  text-align: center;
  padding: var(--blklux-s-6) var(--blklux-s-5) var(--blklux-s-7);
}
.blklux-thanks > *:not(.blklux-petals) { position: relative; z-index: 1; }
.blklux-thanks__title { margin: var(--blklux-s-3) 0 0; font-size: var(--blklux-fs-2xl); }
.blklux-thanks__lead { margin: 0; max-width: 42ch; color: var(--blklux-ash); font-size: var(--blklux-fs-md); }
.blklux-thanks .blklux-btn { margin-top: var(--blklux-s-3); }
.blklux-thanks .blklux-card { width: 100%; }

@keyframes blklux-thanks-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .blklux-thanks > *:not(.blklux-seal):not(.blklux-petals) { animation: blklux-thanks-rise 480ms var(--blklux-ease-out) both; }
  .blklux-thanks > .blklux-thanks__title { animation-delay: 260ms; }
  .blklux-thanks > .blklux-thanks__lead { animation-delay: 350ms; }
  .blklux-thanks > .blklux-btn { animation-delay: 440ms; }
}