/* =========================================================================
   Rock Creek Hunting Club — PINOUT KIOSK
   Touch-first, fullscreen screen for the shared display at the old pinout board.
   Same look as the members' site (club-design.css): bark, bone, moss, brass, blaze,
   signage type. Everything is SCOPED under .rck so it can't collide with the site CSS.

   rck-*   real kiosk UI, keep
   mock-*  design-review helpers, remove on integration

   The MAP is not styled here. .rck-mapslot only reserves space; the existing live map
   mounts inside it unchanged.
   ========================================================================= */

.rck {
  /* Tokens (same values as club-design.css, re-declared so the kiosk stands alone) */
  --bark: #231E19; --bark-deep: #1A1612; --bark-lift: #2C2620; --bark-line: #423A31;
  --bone: #ECE4D2; --stone: #A89F8F;
  --moss: #3A4A2B; --moss-deep: #2C3920;
  --brass: #C9A04B; --brass-lo: #A9822F;
  --blaze: #FF6B1A; --blaze-lo: #E2560B;
  --alert: #FF8A73;         /* errors: text/icons (7.1:1 on bark) */
  --alert-bg: #3A211B;      /* errors: panel fill */
  --ok: #9CCB6B;            /* connected dot, success check */

  --f-sign: "Bahnschrift", "DIN Condensed", "DIN Alternate", "Roboto Condensed", "Arial Narrow",
            "DejaVu Sans Condensed", sans-serif-condensed, system-ui, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Kiosk scale: everything is in rem, and rem follows the screen's short side.
     1080p panel → ~21px base · 1280x800 → ~17px · never below 16px. */
  --touch: 4.25rem;          /* minimum control height (~90px on 1080p) */
  --touch-xl: 5.5rem;        /* primary actions */
  --gap: 1rem;
  --ring: 0 0 0 3px var(--bark-deep), 0 0 0 7px var(--blaze);

  position: fixed; inset: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bark); color: var(--bone);
  font: 400 1rem/1.45 var(--f-body);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
html:has(.rck) { font-size: clamp(16px, 1.55vmin + 4px, 23px); color-scheme: dark; }
body:has(.rck) { margin: 0; background: #231E19; }

.rck *, .rck *::before, .rck *::after { box-sizing: border-box; }
.rck img, .rck svg { display: block; max-width: 100%; }
.rck h1, .rck h2, .rck h3 { margin: 0; font-family: var(--f-sign); font-weight: 700; line-height: 1.08; }
.rck p { margin: 0; }
:where(.rck) button { font: inherit; color: inherit; cursor: pointer; }
.rck :focus { outline: none; }
.rck :focus-visible { box-shadow: var(--ring); }
.rck [hidden] { display: none !important; }
.rck-ico { width: 1.5em; height: 1.5em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rck-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- header */
.rck-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  min-height: 5rem; padding: .5rem 1.25rem; background: var(--bark-deep); border-bottom: 1px solid var(--bark-line);
}
.rck-brand { display: flex; align-items: center; gap: .9rem; }
.rck-brand img { height: 3.6rem; width: auto; }
.rck-brand b { display: block; font: 700 1.6rem/1 var(--f-sign); }
.rck-brand small { display: block; margin-top: .2rem; color: var(--stone); font-size: .95rem; }

.rck-steps { display: flex; justify-content: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.rck-steps li {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .9rem .45rem .45rem; border-radius: 999px;
  color: var(--stone); font: 600 1.05rem/1 var(--f-sign); white-space: nowrap;
}
.rck-steps em { font-style: normal; }
.rck-steps li span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--bark-line); font-size: 1rem; }
.rck-steps li[aria-current="step"] { color: var(--bone); background: var(--bark-lift); }
.rck-steps li[aria-current="step"] span { background: var(--blaze); border-color: var(--blaze); color: var(--bark); }
.rck-steps li.is-done span { background: var(--moss); border-color: var(--moss); color: var(--bone); }
.rck-who { justify-self: center; color: var(--stone); font-size: 1.1rem; }
.rck-who b { color: var(--bone); font: 700 1.35rem/1 var(--f-sign); }

.rck-headend { display: flex; align-items: center; gap: 1.1rem; }
.rck-clock { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rck-clock b { display: block; font: 700 1.7rem/1 var(--f-sign); }
.rck-clock small { color: var(--stone); font-size: .9rem; }
.rck-net { display: inline-flex; align-items: center; gap: .45rem; color: var(--stone); font-size: .9rem; }
.rck-net i { width: .75rem; height: .75rem; border-radius: 50%; background: var(--ok); }
.rck-net--off i { background: var(--alert); }
.rck-net--off { color: var(--alert); font-weight: 700; }

/* The one always-there exit. Big, labelled, top-right on every member screen. */
.rck-exit {
  display: inline-flex; align-items: center; gap: .55rem; min-height: var(--touch); padding: 0 1.4rem;
  border-radius: .7rem; border: 2px solid var(--bone); background: transparent;
  font: 700 1.35rem/1 var(--f-sign) !important;
}
.rck-exit:active { background: var(--bark-lift); }

/* ---------------------------------------------------------------- banner (offline) */
.rck-banner {
  display: flex; align-items: center; gap: .8rem; padding: .75rem 1.25rem;
  background: var(--alert-bg); color: var(--bone); border-bottom: 2px solid var(--alert); font-size: 1.1rem;
}
.rck-banner .rck-ico { color: var(--alert); }
.rck-banner b { color: var(--alert); }

/* ---------------------------------------------------------------- main stage */
.rck-main, .rck-verify { flex: 1 1 auto; }
.rck-main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 34%); }
.rck-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr; border-right: 1px solid var(--bark-line); }

/* Layer toggles live ABOVE the map (outside it), wired to the map's existing toggles */
.rck-layers { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; background: var(--bark-deep); border-bottom: 1px solid var(--bark-line); }
.rck-layers > span { color: var(--stone); font-size: 1rem; margin-right: .3rem; }
.rck-toggle {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 3.6rem; padding: 0 1.1rem 0 .8rem;
  border-radius: .7rem; border: 2px solid var(--bark-line); background: var(--bark);
  font: 600 1.2rem/1 var(--f-sign); color: var(--stone);
}
.rck-toggle svg { width: 2rem; height: 2rem; }
.rck-toggle .rck-check { width: 1.4rem; height: 1.4rem; border-radius: .3rem; border: 2px solid var(--stone); display: grid; place-items: center; }
.rck-toggle[aria-pressed="true"] { color: var(--bone); border-color: var(--moss); background: var(--moss-deep); }
.rck-toggle[aria-pressed="true"] .rck-check { background: var(--bone); border-color: var(--bone); }
.rck-toggle[aria-pressed="true"] .rck-check::after { content: ""; width: .45rem; height: .8rem; border: solid var(--moss-deep); border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }

.rck-mapslot { position: relative; min-height: 0; overflow: hidden; background: #2E2A24; }
.mock-map {
  position: absolute; inset: 0; width: 100%; border: 0; display: grid; place-content: center; gap: .5rem; text-align: center; padding: 2rem;
  background: repeating-linear-gradient(135deg, #2E2A24 0 18px, #29251F 18px 36px); color: var(--stone); font-size: 1.1rem;
}
.mock-map b { font: 700 2rem/1.1 var(--f-sign); color: var(--bone); }
.mock-map em { font-style: normal; color: #B9AEE8; font-size: .95rem; margin-top: .4rem; }
.mock-map .mock-pin {
  margin: .9rem auto 0; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px;
  background: rgba(255,107,26,.16); border: 2px dashed var(--blaze); color: var(--bone); font-weight: 700;
}
.mock-map .mock-pin--bad { background: rgba(255,138,115,.14); border-color: var(--alert); }

/* ---------------------------------------------------------------- side panel */
.rck-panel { min-height: 0; display: grid; grid-template-rows: 1fr auto; background: var(--bark); }
.rck-panel__body { min-height: 0; overflow-y: auto; padding: 1.4rem 1.4rem 1rem; display: grid; align-content: start; gap: 1.1rem; }
.rck-panel__foot { padding: 1rem 1.4rem 1.4rem; display: grid; gap: .8rem; border-top: 1px solid var(--bark-line); background: var(--bark-deep); }
.rck-panel h2 { font-size: 2.1rem; }
.rck-lede { color: var(--stone); font-size: 1.2rem; }
.rck-lede b { color: var(--bone); }

/* Big buttons */
.rck-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
  min-height: var(--touch); padding: 0 1.4rem; border-radius: .8rem; border: 0;
  font: 700 1.5rem/1.05 var(--f-sign) !important; letter-spacing: .01em; text-align: center;
}
.rck-btn--go { background: var(--blaze); color: var(--bark); min-height: var(--touch-xl); font-size: 1.9rem !important; }
.rck-btn--go:active { background: var(--blaze-lo); }
.rck-btn--go:disabled { background: var(--bark-lift); color: var(--stone); cursor: not-allowed; }
.rck-btn--line { background: transparent; border: 2px solid var(--stone); color: var(--bone); }
.rck-btn--line:active { background: var(--bark-lift); }
.rck-btn--quiet { background: var(--bark-lift); color: var(--bone); }
.rck-hint { color: var(--stone); font-size: 1rem; text-align: center; }

/* Out now list (idle and map screens) */
.rck-out__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.rck-out__head span { color: var(--stone); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.rck-out { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bark-line); }
.rck-out li { display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--bark-line); font-variant-numeric: tabular-nums; }
.rck-out li b { font: 700 1.5rem/1.1 var(--f-sign); }
.rck-out li small { color: var(--stone); font-size: 1.05rem; white-space: nowrap; }
.rck-out li.is-me b { color: var(--blaze); }
.rck-empty { padding: 1.5rem; border: 2px dashed var(--bark-line); border-radius: .8rem; text-align: center; color: var(--stone); font-size: 1.2rem; }

/* Brass stand tag (from the site's pinout board), sized for the kiosk */
.rck-tag {
  position: relative; display: grid; place-items: center; width: 3.6rem; height: 3.9rem; padding-top: .55rem;
  background: linear-gradient(170deg, #D9B35E, var(--brass) 45%, var(--brass-lo)); color: var(--bark);
  clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); border-radius: 0 0 .35rem .35rem;
  font: 700 1.6rem/1 var(--f-sign); font-variant-numeric: tabular-nums;
}
.rck-tag::before { content: ""; position: absolute; top: .35rem; left: 50%; width: .5rem; height: .5rem; margin-left: -.25rem; border-radius: 50%; background: var(--bark); }
.rck-tag--me { background: linear-gradient(170deg, #FF8A45, var(--blaze) 45%, var(--blaze-lo)); }
.rck-tag--xl { width: 7rem; height: 7.8rem; font-size: 3.4rem; padding-top: 1rem; }
.rck-tag--xl::before { top: .6rem; width: .8rem; height: .8rem; margin-left: -.4rem; }
.rck-tag--ghost { background: none; border: 3px dashed var(--blaze); clip-path: none; border-radius: .5rem; color: var(--blaze); }
.rck-tag--ghost::before { display: none; }

/* Selected stand / summary cards */
.rck-card { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; padding: 1.2rem; background: var(--bark-lift); border-radius: .9rem; border: 1px solid var(--bark-line); }
.rck-card h3 { font-size: 2rem; }
.rck-card p { color: var(--stone); font-size: 1.1rem; margin-top: .25rem; }
.rck-facts { display: grid; grid-template-columns: auto 1fr; gap: .1rem 1.2rem; margin: 0; padding: 1.1rem 1.2rem; background: var(--bark-lift); border-radius: .9rem; font-size: 1.25rem; }
.rck-facts dt { color: var(--stone); padding: .45rem 0; }
.rck-facts dd { margin: 0; padding: .45rem 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.rck-facts dt + dd, .rck-facts dt { border-bottom: 1px solid var(--bark-line); }
.rck-facts dt:last-of-type, .rck-facts dd:last-of-type { border-bottom: 0; }

/* Tap-the-map prompt */
.rck-tapme { display: grid; justify-items: center; text-align: center; gap: .8rem; padding: 1.8rem 1rem; border: 2px dashed var(--bark-line); border-radius: .9rem; }
.rck-tapme svg { width: 4.2rem; height: 4.2rem; color: var(--blaze); }
.rck-tapme b { font: 700 1.7rem/1.1 var(--f-sign); }
.rck-tapme span { color: var(--stone); font-size: 1.1rem; }

/* Errors — plain language, icon + bold first line + what to do next */
.rck-alert { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.2rem; border-radius: .9rem; background: var(--alert-bg); border: 2px solid var(--alert); }
.rck-alert > svg { width: 2.4rem; height: 2.4rem; color: var(--alert); }
.rck-alert h3 { font-size: 1.7rem; color: var(--bone); }
.rck-alert p { margin-top: .4rem; font-size: 1.2rem; color: var(--bone); }
.rck-alert p + p { color: var(--stone); font-size: 1.05rem; }

/* ---------------------------------------------------------------- verification */
.rck-verify { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 34%); }
.rck-names { min-height: 0; display: grid; grid-template-rows: auto auto 1fr; gap: 1rem; padding: 1.4rem 1.4rem 0; border-right: 1px solid var(--bark-line); }
.rck-names h2 { font-size: 2.3rem; }
.rck-letters { display: flex; flex-wrap: wrap; gap: .6rem; }
.rck-letters button { min-height: 3.6rem; min-width: 5.2rem; padding: 0 1rem; border-radius: .7rem; border: 2px solid var(--bark-line); background: var(--bark); font: 700 1.3rem/1 var(--f-sign); color: var(--stone); }
.rck-letters button[aria-pressed="true"] { background: var(--bone); color: var(--bark); border-color: var(--bone); }
.rck-namegrid { min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0 0 1.4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .7rem; align-content: start; }
.rck-name {
  width: 100%; min-height: var(--touch); padding: .6rem 1rem; text-align: left; border-radius: .8rem;
  border: 2px solid var(--bark-line); background: var(--bark-lift); font: 700 1.45rem/1.1 var(--f-sign) !important;
}
.rck-name[aria-pressed="true"] { background: var(--bone); color: var(--bark); border-color: var(--bone); }

.rck-pinpad { min-height: 0; display: grid; grid-template-rows: 1fr auto; }
.rck-pinpad .rck-panel__body { gap: .9rem; }
.rck-pin {
  width: 100%; min-height: 5rem; padding: 0 1.2rem; border-radius: .8rem; border: 3px solid var(--bark-line);
  background: var(--bark-deep); color: var(--bone); font: 700 2.4rem/1 var(--f-body); letter-spacing: .5em; text-align: center;
  caret-color: transparent;
}
.rck-pin:focus-visible { border-color: var(--blaze); box-shadow: none; }
.rck-pin.is-bad { border-color: var(--alert); }
.rck-pinmsg { display: flex; align-items: center; gap: .6rem; min-height: 2rem; font-size: 1.15rem; color: var(--alert); font-weight: 700; }
.rck-pinmsg svg { width: 1.6rem; height: 1.6rem; }
.rck-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.rck-keys button {
  min-height: 4.4rem; border-radius: .8rem; border: 0; background: var(--bark-lift);
  font: 700 2rem/1 var(--f-sign) !important; font-variant-numeric: tabular-nums;
}
.rck-keys button:active { background: var(--bark-line); }
.rck-keys .rck-key--fn { font-size: 1.2rem !important; color: var(--stone); }
.rck-pinpad[data-ready="false"] .rck-keys, .rck-pinpad[data-ready="false"] .rck-pin { opacity: .35; pointer-events: none; }
.rck-choose { display: flex; align-items: center; gap: .8rem; color: var(--stone); font-size: 1.2rem; }
.rck-choose b { color: var(--bone); font: 700 1.8rem/1.1 var(--f-sign); }

/* ---------------------------------------------------------------- full-screen sheets */
.rck-sheet {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 2rem;
  background: rgba(20, 17, 13, .86); backdrop-filter: blur(4px);
}
.rck-sheet__box { width: min(46rem, 100%); display: grid; justify-items: center; text-align: center; gap: 1.2rem; padding: 2.4rem; background: var(--bark); border: 1px solid var(--bark-line); border-radius: 1.2rem; box-shadow: 0 2rem 4rem rgba(0,0,0,.5); }
.rck-sheet__box h1 { font-size: 3rem; }
.rck-sheet__box p { font-size: 1.35rem; color: var(--stone); max-width: 32ch; }
.rck-sheet__box p b { color: var(--bone); }
.rck-sheet__acts { width: 100%; display: grid; gap: .8rem; margin-top: .6rem; }

.rck-success .rck-tag--xl { margin-bottom: .4rem; }
@media (prefers-reduced-motion: no-preference) {
  .rck-success .rck-tag--xl { transform-origin: 50% -1rem; animation: rck-swing 1s cubic-bezier(.3,.7,.3,1); }
  @keyframes rck-swing { 0% { transform: rotate(-18deg); } 35% { transform: rotate(10deg); } 65% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
}
.rck-nail { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #E9E4DA, #8C877E 60%, #5E5A53); box-shadow: 0 2px 2px rgba(0,0,0,.55); }
.rck-string { width: 3px; height: 1.2rem; background: rgba(236,228,210,.7); margin: -.2rem 0 -1.2rem; }
.rck-autoreturn { width: 100%; display: grid; gap: .5rem; color: var(--stone); font-size: 1.05rem; }
.rck-bar { height: .5rem; border-radius: 999px; background: var(--bark-lift); overflow: hidden; }
.rck-bar i { display: block; height: 100%; width: 60%; background: var(--stone); }

/* Timeout prompt */
.rck-count { position: relative; width: 9rem; height: 9rem; display: grid; place-items: center; }
.rck-count svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rck-count circle { fill: none; stroke-width: 8; }
.rck-count .bg { stroke: var(--bark-lift); }
.rck-count .fg { stroke: var(--blaze); stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 106; }
.rck-count b { font: 700 3.6rem/1 var(--f-sign); font-variant-numeric: tabular-nums; }

/* Out of service: whole screen, no controls */
.rck-oos { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; text-align: center; padding: 2rem; background: var(--bark-deep); }
.rck-oos__in { display: grid; justify-items: center; gap: 1.3rem; max-width: 40rem; }
.rck-oos img { width: min(22rem, 60vw); opacity: .55; }
.rck-oos h1 { font-size: 3.4rem; }
.rck-oos p { color: var(--stone); font-size: 1.4rem; }
.rck-oos .rck-sign { padding: .5rem 1.1rem; border: 2px solid var(--alert); border-radius: .5rem; color: var(--alert); font: 700 1.2rem/1 var(--f-sign); }

/* Idle: welcome block above the list */
.rck-welcome { display: grid; gap: .3rem; }
.rck-welcome h2 { font-size: 2.6rem; }

/* ---------------------------------------------------------------- portrait / small displays */
@media (orientation: portrait), (max-aspect-ratio: 5/4) {
  .rck-head { grid-template-columns: auto 1fr; grid-template-areas: "brand end" "mid mid"; row-gap: .5rem; }
  .rck-brand { grid-area: brand; } .rck-headend { grid-area: end; justify-self: end; }
  .rck-steps, .rck-who { grid-area: mid; }
  .rck-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 52%) minmax(0, 1fr); }
  .rck-stage { border-right: 0; border-bottom: 1px solid var(--bark-line); }
  .rck-verify { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .rck-names { border-right: 0; border-bottom: 1px solid var(--bark-line); }
  .rck-pinpad .rck-panel__body { grid-template-columns: 1fr 1fr; align-items: start; column-gap: 1.4rem; }
  .rck-pinpad .rck-keys { grid-column: 2; grid-row: 1 / span 4; }
}
@media (max-width: 900px) {
  .rck-steps li { padding-right: .45rem; }
  .rck-steps li:not([aria-current="step"]) em { display: none; }
  .rck-layers > span { display: none; }
  .rck-toggle { padding: 0 .8rem 0 .6rem; font-size: 1.05rem; }
}

/* ---------------------------------------------------------------- mockup-only (remove) */
.mock-nav { position: fixed; left: .5rem; bottom: .5rem; z-index: 100; font: 600 13px/1.2 system-ui, sans-serif; }
.mock-nav > button { padding: 8px 12px; border-radius: 999px; border: 1px solid #9C8BE0; background: #3A2F5C; color: #E7E0FF; }
.mock-nav__list { position: absolute; left: 0; bottom: calc(100% + 6px); width: 270px; max-height: 70vh; overflow-y: auto; padding: 8px; border-radius: 10px; background: #3A2F5C; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.mock-nav__list a { display: block; padding: 7px 10px; border-radius: 6px; color: #E7E0FF; text-decoration: none; }
.mock-nav__list a:hover, .mock-nav__list a[aria-current="true"] { background: #E7E0FF; color: #3A2F5C; }
.mock-nav__list p { margin: 8px 10px 4px; color: #B9AEE8; font-size: 11px; }