/* ==========================================================================
   Mobily LEAP kiosk — layout & components
   ========================================================================== */

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-text);
  color: var(--mobily-white);
  background: var(--canvas);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Kiosk screens are touch-only: kill the tap flash and text selection. */
body[data-kiosk='true'] {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* The kiosk is one fixed screen — nothing about it should scroll under a
   stray swipe. Panels that genuinely need scrolling (the drawer body) set
   their own overflow. */
html:has(body[data-kiosk='true']),
body[data-kiosk='true'] {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100%;
}

img { max-width: 100%; display: block; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--mobily-bright-blue);
  outline-offset: 3px;
}

/* -------------------------------------------------------------- frame ----
   One continuous Bright Blue stroke around the screen: no gap, even width,
   one colour, smooth corners. Sized in vmin so every dimension is derived
   from the short edge and stays in proportion at any viewport — the margin X
   is 10% of the short edge (10vmin), the corner radius is half of it, and the
   stroke is 7.5% of it.

   NOTE: this is a plain brand frame, deliberately NOT the meem device. The
   meem's construction (p.12) requires a 1/2X gap and a 5% -> 10% taper, which
   is the opposite of continuous. Do not label this as the meem in anything
   that goes to the brand team.
   -------------------------------------------------------------------------- */
.frame {
  position: fixed;
  inset: 3.2vmin;
  z-index: 20;
  pointer-events: none;
  border: 0.75vmin solid var(--mobily-bright-blue);
  border-radius: 5vmin;
  opacity: 0.62;
  box-shadow:
    0 0 3.5vmin rgba(75, 245, 255, 0.16),
    inset 0 0 3.5vmin rgba(75, 245, 255, 0.10);
}
body[data-frame='off'] .frame { display: none; }

/* ------------------------------------------------------------- shell ----- */
.shell {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 40px);
  padding: var(--margin-x) clamp(28px, 5vw, 96px);
}

/* On a stage the symbol keeps its top-left corner and its clear space, but
   sits over the backdrop rather than in the header flow. */
.logo-slot--stage {
  position: absolute;
  top: var(--margin-x);
  left: clamp(28px, 5vw, 96px);
  z-index: 2;
}

/* -------------------------------------------------------------- header --- */
.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

/* English communications place the symbol in a top or bottom LEFT corner,
   at 100% of the margin in height, with clear space of 100% of the symbol on
   all four sides (p.06, p.08, p.09). */
.logo-slot {
  height: var(--margin-x);
  min-width: 40px;               /* digital minimum size, p.06 */
  display: flex;
  align-items: center;
}
.logo-slot img { height: 100%; width: auto; }

/* Shown only until the licensed symbol is dropped in. Deliberately not a
   drawing of the Mobily symbol — the guide forbids recreating it (p.10). */
.logo-slot__pending {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px dashed var(--stroke-strong);
  border-radius: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mobily-bright-blue);
  white-space: nowrap;
}

.masthead__title {
  flex: 1;
  text-align: right;
}

.eyebrow {
  margin: 0;
  font-family: var(--font-text);   /* caps never set in Mobily Headline */
  font-size: clamp(10px, 0.85vw, 13px);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mobily-bright-blue);
}

h1 {
  margin: 6px 0 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1.05;
}

/* ------------------------------------------------------- experience tabs - */
.experience {
  display: flex;
  justify-content: center;
}

.segmented {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(14px);   /* iPad Safari */
  backdrop-filter: blur(14px);
}

.segmented__btn {
  padding: clamp(12px, 1.4vh, 18px) clamp(24px, 3vw, 52px);
  border-radius: var(--radius-pill);
  font-family: var(--font-headline);
  font-size: clamp(14px, 1.15vw, 19px);
  font-weight: 700;
  color: var(--text-muted);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.segmented__btn:hover { color: var(--mobily-white); }

.segmented__btn[aria-selected='true'] {
  background: var(--gradient-1);
  color: var(--mobily-dark-blue);
}

/* ------------------------------------------------------------ landmarks -- */
.picker {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 22px);
}

.picker__label {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(15px, 1.3vw, 21px);
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
}

.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(14px, 1.6vw, 28px);
  min-height: 0;
}

.card {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(110px, 18vh, 260px);
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--stroke);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-align: left;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.3s var(--ease);
}

/* Dark Blue scrim so the card caption always clears AA over photography. */
.card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 80, 0.94) 0%, rgba(0, 0, 80, 0.55) 34%, rgba(0, 0, 80, 0.02) 72%);
  transition: opacity 0.3s var(--ease);
}

.card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(14px, 1.6vw, 24px);
}

.card__name {
  display: block;
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 30px);
  line-height: 1.1;
}

.card__region {
  display: block;
  margin: 5px 0 0;
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mobily-bright-blue);
}

.card__blurb {
  display: block;
  margin: 8px 0 0;
  /* One line, always — a wrapping blurb pushes the caption around and makes
     the six cards sit at different heights. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(11px, 0.85vw, 14px);
  line-height: 1.45;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

/* Selection tick. Hidden until chosen; Bright Blue on Dark Blue. */
.card__tick {
  position: absolute;
  top: clamp(12px, 1.2vw, 18px);
  right: clamp(12px, 1.2vw, 18px);
  width: clamp(30px, 2.4vw, 40px);
  height: clamp(30px, 2.4vw, 40px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mobily-bright-blue);
  color: var(--mobily-dark-blue);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.card__tick svg { width: 55%; height: 55%; }

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); border-color: rgba(75, 245, 255, 0.4); }
  .card:hover .card__img { transform: scale(1.05); }
  .card:hover .card__blurb { opacity: 1; transform: none; }
}

.card[aria-pressed='true'] {
  border-color: var(--mobily-bright-blue);
  box-shadow:
    0 0 0 4px rgba(75, 245, 255, 0.22),
    0 18px 48px rgba(0, 0, 80, 0.55);
}
.card[aria-pressed='true'] .card__tick { opacity: 1; transform: none; }
.card[aria-pressed='true'] .card__blurb { opacity: 1; transform: none; }
.card[aria-pressed='true'] .card__img { transform: scale(1.04); }

/* Unselected cards recede once a choice is made. */
.grid[data-has-selection='true'] .card:not([aria-pressed='true']) .card__img {
  filter: saturate(0.55) brightness(0.68);
}

/* --------------------------------------------------------------- actions - */
.actions {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) 3fr;
  gap: clamp(14px, 1.6vw, 28px);
  align-items: stretch;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: clamp(60px, 8vh, 92px);
  padding: 0 clamp(20px, 2vw, 40px);
  border-radius: var(--radius-card);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 22px);
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease);
}
.btn:active { transform: scale(0.985); }
.btn svg { flex: none; width: 1.35em; height: 1.35em; }

.btn--capture {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--stroke-strong);
  background: var(--surface-raised);
  color: var(--mobily-white);
}
.btn--capture:hover { border-color: var(--mobily-bright-blue); background: rgba(0, 0, 80, 0.85); }

.btn--capture[data-state='ready'] {
  border-color: var(--mobily-bright-blue);
  justify-content: flex-start;
  text-align: left;
}

.capture__thumb {
  width: clamp(42px, 4vw, 62px);
  height: clamp(42px, 4vw, 62px);
  flex: none;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid var(--mobily-bright-blue);
}

.capture__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.capture__meta small {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 400;
  color: var(--mobily-bright-blue);
}

.btn--generate {
  background: var(--gradient-1);
  color: var(--mobily-dark-blue);
  box-shadow: 0 16px 44px rgba(16, 97, 255, 0.36);
}
.btn--generate:hover:not(:disabled) { box-shadow: 0 20px 56px rgba(75, 245, 255, 0.42); }

.btn--generate:disabled {
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.42);
  box-shadow: none;
}

/* ---------------------------------------------------------------- status - */
.status {
  min-height: 1.4em;
  margin: 0 0 clamp(2px, 1vh, 10px);
  text-align: center;
  font-size: clamp(12px, 0.95vw, 15px);
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.status[data-tone='error'] { color: var(--mobily-bright-blue); }

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

/* -------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .actions { grid-template-columns: 1fr; }
  .masthead { flex-wrap: wrap; align-items: center; }
  .masthead__title { flex: 1 1 100%; order: 3; text-align: left; }
}

@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
  .segmented { width: 100%; flex-direction: column; border-radius: var(--radius-card); }
  .segmented__btn { border-radius: var(--radius-card); }
}

/* Tablet landscape, mirrored to a TV. Labels have to carry across a room, and
   every target has to be comfortable under a thumb. */
@media (min-width: 901px) and (max-width: 1400px) and (pointer: coarse) {
  .card__name   { font-size: clamp(22px, 2.2vw, 32px); }
  .card__region { font-size: clamp(12px, 1.05vw, 15px); }
  .btn          { min-height: 78px; }
  .segmented__btn { padding: 18px clamp(28px, 3.4vw, 56px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Full-screen stages — working and result

   The tablet mirrors to a TV, so both stages are read at two distances at
   once: arm's length on the tablet and across the room on the screen.
   Everything here is sized for the far one.
   ========================================================================== */

.stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 72px);
  background: var(--canvas);
  animation: stage-in 0.45s var(--ease) both;
}
.stage[hidden] { display: none; }

@keyframes stage-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The chosen landmark, blurred back, so the screen never feels like a spinner
   on a blank page. */
.stage__backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(38px) saturate(0.7) brightness(0.42);
  transform: scale(1.14);
  opacity: 0.55;
}

.stage__inner {
  position: relative;
  width: 100%;
  max-width: min(860px, 80vw);
  text-align: center;
}

.stage__title {
  margin: 10px 0 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 68px);
  line-height: 1.04;
}

.stage__note {
  margin: clamp(20px, 3vh, 34px) 0 0;
  font-size: clamp(14px, 1.3vw, 20px);
  color: var(--text-muted);
}

/* Indeterminate bar — generation gives us no real progress to report, so it
   says "working", not "63%". */
.progress {
  position: relative;
  overflow: hidden;
  height: 6px;
  margin-top: clamp(24px, 4vh, 44px);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
}
.progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: var(--gradient-1);
  animation: progress-sweep 1.5s var(--ease) infinite;
}
@keyframes progress-sweep {
  from { transform: translateX(-105%); }
  to   { transform: translateX(240%); }
}

/* ------------------------------------------------------------ handoff ----
   What the visitor sees the instant they submit: their own QR code. Nobody
   waits at the kiosk for a model to finish.
   -------------------------------------------------------------------------- */
.handoff {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  width: 100%;
  max-width: 1400px;
  padding-top: calc(var(--margin-x) * 1.5);
}

.handoff__title {
  margin: 8px 0 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 60px);
  line-height: 1.05;
}

.handoff__lede {
  margin: clamp(14px, 2vh, 24px) 0 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--text-muted);
}

.handoff__live {
  margin: clamp(14px, 2vh, 22px) 0 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 19px);
  color: var(--mobily-bright-blue);
}

.handoff__done {
  position: absolute;
  left: 50%;
  bottom: calc(var(--margin-x) * 1.2);
  transform: translateX(-50%);
  min-width: clamp(220px, 24vw, 320px);
}

/* ----------------------------------------------------------------- QR ---- */
.qr {
  padding: clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  text-align: center;
}

.qr__label {
  margin: 0 0 12px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 21px);
}

/* White quiet zone around the code — scanners need the contrast, and the
   code itself is Mobily Dark Blue on white. */
.qr__code {
  width: 100%;
  height: auto;
  max-width: 240px;
  margin: 0 auto;
  border-radius: 10px;
  background: var(--mobily-white);
  padding: 8px;
}

.qr--large { padding: clamp(18px, 2vw, 28px); }
.qr--large .qr__code { max-width: clamp(220px, 26vw, 380px); }

.qr__hint {
  margin: 12px 0 0;
  font-size: clamp(11px, 0.9vw, 14px);
  color: var(--text-muted);
}

/* Portrait / narrow: stack the handoff, code underneath the copy. */
@media (max-width: 900px), (orientation: portrait) {
  .handoff {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .handoff__lede { margin-inline: auto; }
  .qr--large .qr__code { max-width: 220px; }
  .camera__controls .btn { min-width: clamp(150px, 42vw, 240px); }
}


/* ==========================================================================
   Camera stage

   Live capture only — the visitor takes their picture at the kiosk, so there
   is no file-upload path anywhere in the flow.
   ========================================================================== */

.camera {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vh, 30px);
  width: 100%;
  max-width: min(1100px, 92vw);
  height: 100%;
  justify-content: center;
  /* Clear the symbol in the top-left corner: its own height plus the clear
     space the guide requires around it (p.06). */
  padding-top: calc(var(--margin-x) * 2);
}

.camera__viewport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border: 2px solid var(--stroke-strong);
  border-radius: var(--radius-card);
  background: rgba(0, 0, 80, 0.6);
}

.camera__viewport video,
.camera__viewport img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Only the LIVE feed is flipped, so it behaves like a mirror. The captured
   still already has its pixels mirrored in the canvas, so flipping it here
   too would reverse it back and show the visitor the opposite of what they
   just posed for. */
.camera__viewport video { transform: scaleX(-1); }
.camera__viewport img[hidden] { display: none; }

.camera__error {
  max-width: 40ch;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-size: clamp(14px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--mobily-bright-blue);
}
.camera__error[hidden] { display: none; }

/* Every control on this row is the same size — Capture, Retake, Cancel and
   Use all read as equal weight targets. */
.camera__controls {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
}
.camera__controls [hidden] { display: none; }
.camera__controls .btn {
  min-width: clamp(180px, 20vw, 260px);
  min-height: clamp(56px, 7vh, 78px);
}

.btn--ghost {
  min-height: clamp(52px, 6vh, 72px);
  border: 2px solid var(--stroke);
  background: var(--surface-raised);
  color: var(--mobily-white);
}
.btn--ghost:hover { border-color: var(--stroke-strong); }

.camera__hint {
  margin: 0;
  text-align: center;
  font-size: clamp(13px, 1.1vw, 17px);
  color: var(--text-muted);
}

/* ==========================================================================
   Burger menu and drawer
   ========================================================================== */

.burger {
  flex: none;
  display: grid;
  gap: 5px;
  align-content: center;
  width: clamp(48px, 5vw, 62px);
  height: clamp(48px, 5vw, 62px);
  padding: 0 clamp(10px, 1vw, 14px);
  border: 2px solid var(--stroke);
  border-radius: 14px;
  background: var(--surface-raised);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.burger:hover { border-color: var(--stroke-strong); }
.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--mobily-bright-blue);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
}
.drawer[hidden] { display: none; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 40, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.drawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 94vw);
  height: 100%;
  background: var(--canvas);
  border-left: 2px solid var(--stroke-strong);
  box-shadow: -30px 0 90px rgba(0, 0, 40, 0.6);
  animation: drawer-in 0.3s var(--ease) both;
}
@keyframes drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 3vh, 32px) clamp(20px, 3vw, 36px) 0;
}

.drawer__title {
  margin: 6px 0 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 32px);
}

.drawer__close {
  font-size: 34px;
  line-height: 1;
  padding: 0 8px;
  color: var(--text-muted);
}
.drawer__close:hover { color: var(--mobily-white); }

.drawer__tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: clamp(16px, 2.4vh, 26px) clamp(20px, 3vw, 36px) 0;
}

.drawer__tab {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke);
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--text-muted);
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.drawer__tab[aria-selected='true'] {
  background: var(--mobily-bright-blue);
  border-color: var(--mobily-bright-blue);
  color: var(--mobily-dark-blue);
  font-weight: 700;
}
.drawer__tab[hidden] { display: none; }

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(16px, 2.4vh, 26px) clamp(20px, 3vw, 36px);
}

.drawer__foot {
  padding: 0 clamp(20px, 3vw, 36px) clamp(20px, 3vh, 32px);
}

.panel[hidden] { display: none; }
.panel__note {
  margin: 0 0 16px;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- task list - */
.tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: var(--surface);
}

.task__main { flex: 1 1 200px; min-width: 0; }

.task__name {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 19px);
}

.task__kind {
  margin-left: 8px;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mobily-bright-blue);
}

.task__meta {
  margin: 4px 0 0;
  font-size: clamp(11px, 0.9vw, 13px);
  color: var(--text-muted);
}

.pill {
  flex: none;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}
.pill[data-status='succeeded'] { background: var(--mobily-bright-blue); color: var(--mobily-dark-blue); }
.pill[data-status='running']   { background: rgba(75, 245, 255, 0.24); color: var(--mobily-bright-blue); }
.pill[data-status='failed']    { background: var(--mobily-orange); color: var(--mobily-burgundy); }

.btn--small {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  font-size: clamp(12px, 1vw, 15px);
  border-radius: 12px;
}
.btn--small:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------------------------------------------------------------- forms -- */
.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 18px;
}
.form--row .field { flex: 1 1 160px; }
.form--row .field--narrow { flex: 0 1 130px; }
.form--row .btn { min-height: 52px; padding: 0 22px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mobily-bright-blue);
}

.field__input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--stroke);
  border-radius: 12px;
  background: rgba(0, 0, 80, 0.55);
  color: var(--mobily-white);
  font: inherit;
  font-size: clamp(14px, 1.1vw, 17px);
  transition: border-color 0.2s var(--ease);
}
.field__input:focus { border-color: var(--mobily-bright-blue); outline: none; }
.field__input::placeholder { color: rgba(255, 255, 255, 0.35); }
select.field__input { appearance: none; }
select.field__input option { color: #000; }

/* ==========================================================================
   Login
   ========================================================================== */
.login {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 80px);
}

.login__card {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 26px);
  width: min(440px, 100%);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  box-shadow: 0 30px 90px rgba(0, 0, 40, 0.5);
}

.login__logo {
  width: clamp(64px, 8vw, 96px);
  height: auto;
  margin-inline: auto;   /* centred over the left-aligned form below */
}

.login__title {
  margin: 6px 0 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
}

/* ==========================================================================
   Visitor result page — what a scanned QR opens on a phone
   ========================================================================== */
.visitor {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vh, 32px);
  padding: clamp(24px, 6vw, 64px) clamp(18px, 5vw, 48px);
}

.visitor__logo { width: clamp(56px, 12vw, 88px); height: auto; }

.visitor__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vh, 24px);
  width: 100%;
  max-width: 720px;
  text-align: center;
}

.visitor__title {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(26px, 7vw, 44px);
  line-height: 1.05;
}

.visitor__media {
  width: 100%;
  border-radius: var(--radius-card);
  border: 2px solid var(--stroke-strong);
}

.visitor__save {
  width: 100%;
  text-decoration: none;
}

.visitor__hint {
  margin: 0;
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 1.5;
  color: var(--text-muted);
}

.visitor .progress { width: min(320px, 80%); }

/* ---------------------------------------------------- inline row actions -
   Password entry and delete confirmation live in the row. Kiosk browsers
   refuse window.prompt / window.confirm, so those dialogs cannot be relied on.
   -------------------------------------------------------------------------- */
.task--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.task__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.task__row .task__main { flex: 1 1 160px; min-width: 0; }

.row-action {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--stroke);
}
.row-action[hidden] { display: none; }
.row-action .field { flex: 1 1 200px; }
.row-action .btn--small { min-height: 50px; }

.row-action__ask {
  flex: 1 1 200px;
  margin: 0;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.45;
  color: var(--text-muted);
}

/* Destructive action — Mobily Orange paired tone-on-tone with Burgundy,
   per the secondary-palette pairing rule (p.04). */
.btn--danger {
  border: 2px solid var(--mobily-orange);
  background: var(--mobily-orange);
  color: var(--mobily-burgundy);
  font-weight: 700;
}
.btn--danger:hover { filter: brightness(1.08); }

/* -------------------------------------------------- credential form bits - */
.form__legend {
  margin: 12px 0 -2px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 18px);
}
.form__legend span {
  margin-left: 8px;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
}
.form__legend:first-child { margin-top: 0; }

.form__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form__actions .btn { flex: 1 1 140px; }

.panel__note code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.95em;
}

/* Visitor page: landmark in full, city beneath. */
.visitor__place { text-align: center; }
.visitor__landmark {
  margin: 0 0 2px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(19px, 5vw, 28px);
  line-height: 1.15;
}

/* ==========================================================================
   Insights
   ========================================================================== */

.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.panel__head .panel__note { flex: 1 1 240px; }
.panel__head .btn { flex: none; text-decoration: none; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 4px 0 24px;
}

/* Solid tiles, as in the reference dashboard. Each carries its own gradient
   so the figure reads at a glance rather than needing the label. */
.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  color: var(--mobily-white);
}
.stat[data-tone='blue']   { background: linear-gradient(135deg, #3E7BFA, #2D5FE0); }
.stat[data-tone='indigo'] { background: linear-gradient(135deg, #5B6BEF, #4351D6); }
.stat[data-tone='orange'] { background: linear-gradient(135deg, #FF8A3C, var(--mobily-orange)); }
.stat[data-tone='green']  { background: linear-gradient(135deg, #2FD8A8, #17B58B); }
.stat[data-tone='red']    { background: linear-gradient(135deg, #FF5A7A, #E8375C); }

.stat__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.stat__icon svg { width: 22px; height: 22px; }

.stat__body { display: flex; flex-direction: column; min-width: 0; }

.stat__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.92;
}

.stat__value {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
}

/* ---------------------------------------------------------------- table -- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--stroke);
  border-radius: 14px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(12px, 1vw, 14px);
}

.table caption {
  padding: 16px;
  color: var(--text-muted);
  text-align: left;
}

.table th,
.table td {
  padding: 11px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--stroke);
}

.table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mobily-bright-blue);
  background: rgba(0, 0, 80, 0.5);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }