/* The hidden attribute must beat every component rule below. Without this,
   .kiosk .kdone { display:flex } wins over the UA [hidden] rule and the
   result panel (plus all three state icons) render on page load. */
[hidden] { display: none !important; }

/* =====================================================================
   SHARED CHECK-IN KIOSK — Draig Goch + Tribe PT
   Loaded after ../tribe/assets/css/style.css. It only re-points the
   existing design tokens at a dark, full-viewport, fixed wall-tablet
   layout — no new token names are invented.
   Target hardware: cheap 10" Android tablet, 768x1024 and 1024x768.
   ===================================================================== */

body.kiosk-body {
  /* dark chrome, expressed through the shared token names */
  --paper:      #0d0f13;
  --paper-2:    #101216;
  --surface:    #181b21;
  --edge:       #2b2f37;
  --text:       #ffffff;
  --dim:        #5b6069;
  --dim-2:      #9aa0aa;
  --brand:      #5a7160;   /* Tribe sage — the confirm colour */
  --brand-dark: #435548;
  --brand-light:#8fa896;
  --accent:     #e6b422;   /* Draig Goch gold — the caret */
  --ok:         #2f9e5c;
  --warn:       #a9552f;
  --danger:     #b3121b;
  --tap:        56px;      /* wall tablet in gloves: bigger than the 48px app default */
  --radius:     12px;

  font-family: var(--font-body);
  background: var(--paper);
  color: var(--text);

  /* fixed full viewport, nothing scrolls, nothing is selectable */
  position: fixed;
  inset: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;          /* no pull-to-refresh */
  touch-action: manipulation;         /* no double-tap zoom */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
}
html { overscroll-behavior: none; touch-action: manipulation; }

body.kiosk-body * { -webkit-user-select: none; user-select: none; }
body.kiosk-body button { font: inherit; touch-action: manipulation; }

/* ---------------------------------------------------------------- shell */
.kiosk {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ------------------------------------------------------------- top bar */
.kiosk .kbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--edge);
  background: var(--paper-2);
}
.kiosk .kbar .l {
  font-family: 'Barlow Condensed', var(--font-body), sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: clamp(1rem, 2.4vmin, 1.35rem);
  color: var(--text);
}
.kiosk .kbar .l.t {
  font-family: 'Fraunces', Georgia, serif;
  text-transform: none;
  letter-spacing: -.01em;
  font-weight: 600;
}
.kiosk .kbar .mid {
  font-size: clamp(.72rem, 1.5vmin, .9rem);
  color: var(--dim);
  letter-spacing: .16em;
  font-weight: 700;
}

/* --------------------------------------------------------- entry state */
.kiosk .kbody {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1rem, 3vmin, 2rem) clamp(1rem, 4vmin, 2.5rem) clamp(1.2rem, 3vmin, 2rem);
}
.kiosk .kentry {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: center;
  justify-content: center;
}
.kiosk .prompt {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.7rem, 5vmin, 3rem);
  text-align: center;
  line-height: 1.15;
  font-weight: 600;
}

/* six code boxes */
.kiosk .code {
  display: flex;
  justify-content: center;
  gap: clamp(.4rem, 1.4vmin, .8rem);
  margin: .2rem 0 .1rem;
}
.kiosk .code span {
  width: clamp(46px, 9vmin, 76px);
  height: clamp(60px, 12vmin, 100px);
  border-radius: var(--radius);
  background: var(--surface);
  border: 2px solid var(--edge);
  display: grid;
  place-items: center;
  font-size: clamp(1.6rem, 5vmin, 2.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: border-color .12s ease, background .12s ease;
}
.kiosk .code span.f { border-color: var(--brand); background: #1a2320; }
.kiosk .code span.cur { border-color: var(--accent); }

.kiosk .hint {
  text-align: center;
  font-size: clamp(.72rem, 1.6vmin, .95rem);
  color: var(--dim);
  letter-spacing: .07em;
  font-weight: 700;
}
.kiosk .msg {
  min-height: 1.4em;
  text-align: center;
  font-size: clamp(.8rem, 1.7vmin, 1rem);
  color: var(--dim-2);
}

/* ---------------------------------------------------------- the keypad */
.kiosk .pad {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(.5rem, 1.4vmin, 1rem);
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}
.kiosk .pad button {
  font-size: clamp(1.6rem, 4.4vmin, 2.4rem);
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--edge);
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: var(--tap);
  transition: transform .06s ease, background .1s ease;
}
.kiosk .pad button:active { transform: scale(.97); background: #22262e; }
.kiosk .pad button.act {
  background: var(--brand);
  border-color: var(--brand);
  font-size: clamp(.9rem, 2.2vmin, 1.25rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 800;
}
.kiosk .pad button.act:active { background: var(--brand-dark); }
.kiosk .pad button.del {
  background: transparent;
  border-color: transparent;
  font-size: clamp(.9rem, 2.2vmin, 1.25rem);
  color: var(--dim-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 800;
}
.kiosk .pad button.del:active { background: var(--surface); }

/* -------------------------------------------------------- result state */
.kiosk .kdone {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.4rem, 5vmin, 3rem);
  gap: .4rem;
  background: linear-gradient(165deg, #12301f, var(--paper) 70%);
}
.kiosk .kdone .tick {
  width: clamp(88px, 16vmin, 140px);
  height: clamp(88px, 16vmin, 140px);
  border-radius: 99px;
  background: var(--ok);
  display: grid;
  place-items: center;
  margin-bottom: .7rem;
  box-shadow: 0 0 0 clamp(10px, 2vmin, 18px) rgba(47, 158, 92, .14);
}
.kiosk .kdone .tick svg {
  width: 48%;
  height: 48%;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kiosk .kdone h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.7rem, 5vmin, 3rem);
  font-weight: 600;
  line-height: 1.15;
}
.kiosk .kdone .sub {
  color: var(--dim-2);
  font-size: clamp(.95rem, 2.2vmin, 1.25rem);
  max-width: 32ch;
}
.kiosk .kdone .pts {
  margin-top: .7rem;
  background: #1a2320;
  border: 1px solid #2f4a38;
  color: #7fd6a0;
  border-radius: 99px;
  padding: .45rem 1.2rem;
  font-size: clamp(.85rem, 2vmin, 1.1rem);
  font-weight: 800;
}
.kiosk .kdone .rem {
  margin-top: 1rem;
  background: #33200f;
  border: 1px solid #6b4520;
  color: #f0c79e;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: clamp(.8rem, 1.9vmin, 1.05rem);
  line-height: 1.45;
  max-width: 34ch;
}
.kiosk .kdone .cd {
  margin-top: 1.1rem;
  font-size: clamp(.68rem, 1.5vmin, .85rem);
  color: var(--dim);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* state colours -------------------------------------------------------- */
.kiosk.state-in   .kdone { background: linear-gradient(165deg, #12301f, var(--paper) 70%); }

.kiosk.state-out  .kdone { background: linear-gradient(165deg, #16222b, var(--paper) 70%); }
.kiosk.state-out  .kdone .tick { background: #4a6472; box-shadow: 0 0 0 clamp(10px, 2vmin, 18px) rgba(74, 100, 114, .16); }
.kiosk.state-out  .kdone .pts  { background: #16222b; border-color: #33505f; color: #9ec8dc; }

.kiosk.state-err  .kdone { background: linear-gradient(165deg, #3a0d11, var(--paper) 70%); }
.kiosk.state-err  .kdone .tick { background: var(--danger); box-shadow: 0 0 0 clamp(10px, 2vmin, 18px) rgba(179, 18, 27, .18); }
.kiosk.state-err  .kdone h4 { font-family: 'Barlow Condensed', var(--font-body), sans-serif; text-transform: uppercase; letter-spacing: .03em; font-weight: 800; }

/* ------------------------------------------------- 1024x768 landscape  */
@media (orientation: landscape) and (min-width: 820px) {
  .kiosk .kbody {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(1.5rem, 4vmin, 3rem);
  }
  .kiosk .kentry {
    flex: 1 1 46%;
    justify-content: center;
  }
  .kiosk .pad {
    flex: 1 1 54%;
    max-width: 520px;
    margin: 0;
  }
  .kiosk .kdone .sub,
  .kiosk .kdone .rem { max-width: 46ch; }
}

/* short landscape phones / small tablets: keep the pad reachable */
@media (orientation: landscape) and (max-height: 520px) {
  .kiosk .kbar { padding: .5rem 1rem; }
  .kiosk .code span { height: clamp(44px, 14vmin, 70px); }
  .kiosk .kdone .tick { width: 72px; height: 72px; margin-bottom: .3rem; }
  .kiosk .kdone .rem { margin-top: .5rem; }
}

/* very tall portrait (768x1024): let the keypad breathe */
@media (orientation: portrait) and (min-height: 900px) {
  .kiosk .kentry { gap: 1rem; padding: 1.5rem 0 .5rem; }
  .kiosk .pad { max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .kiosk .pad button, .kiosk .code span { transition: none; }
}