/* Hand-authored root kiosk. Shared fonts and house colors come from styles.css.
   Scoped here so the six independent spokes retain their own interfaces. */
html:has(body.hub-page),
body.hub-page {
  height: auto;
  min-height: 100vh;
  max-height: none;
  overflow: auto;
}
body.hub-page {
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Source Sans 3', sans-serif;
  --pink: var(--primary);
  --yellow: var(--secondary);
  padding: 32px 0 46px;
}
.hub-page a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hub-page a:focus-visible {
  outline: 3px solid #943280;
  outline-offset: 4px;
}
.hub-page {
  background:#e9e8ed;
  color:#1a1a1a;
  font:16px 'Source Sans 3',sans-serif;
}

.hub-page .kiosk {
  max-width:1000px;
  margin:6px auto 0;
  padding:25px 27px 0;
  background:linear-gradient(105deg,#f9f8f5,#fffefa 48%,#e9e9e5);
  border:1px solid #b2aeb6;
  border-right:10px solid #bbb5c1;
  border-radius:14px 12px 3px 3px;
  box-shadow:inset 2px 1px #fff,1px 5px 0 #aaa4b0,0 23px 33px #24153620;
  position:relative;
}

.hub-page .kiosk:before {
  content:'';
  position:absolute;
  left:0;
  top:20px;
  bottom:30px;
  width:7px;
  background:var(--pink);
  border-radius:0 3px 3px 0;
}

.hub-page .kiosk-header {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center;
  padding:0 10px 23px;
}

.hub-page .kiosk-sign {
  padding:13px 18px 18px;
  background:#f6d242;
  border:1px solid #bba54b;
  border-bottom:4px solid #bda644;
  box-shadow:inset 0 2px #fff6ba,0 2px 1px #ada28940;
  border-radius:3px;
}

.hub-page .sign-top {
  font:9px var(--mono);
  letter-spacing:.1em;
  color:#6b5c2b;
}

.hub-page .kiosk h1 {
  font:400 44px/.96 'Bagel Fat One',sans-serif;
  letter-spacing:-1px;
  margin:14px 0 0;
}

.hub-page .kiosk h1>span {
  color:#ca27b2;
}

.hub-page .kiosk-intro {
  padding:4px 8px 0;
}

.hub-page .information-mark {
  display:inline-grid;
  width:30px;
  height:30px;
  place-content:center;
  font:600 19px var(--sans);
  color:#fff6f9;
  border-radius:50%;
  background:#252334;
}

.hub-page .kiosk-intro p {
  font-size:17px;
  line-height:1.4;
  max-width:280px;
  margin:15px 0 20px;
  color:#514958;
}

.hub-page .language-label {
  font:8px var(--mono);
  color:#8c8094;
  letter-spacing:.06em;
}

.hub-page .kiosk-bay {
  background:#e2dde6;
  border:1px solid #a79ead;
  border-top:5px solid #91849b;
  border-left:5px solid #a89aae;
  border-radius:6px;
  padding:16px 17px 20px;
  box-shadow:inset 0 3px 7px #4127491d;
}

.hub-page .kiosk-instruction {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin:0 1px 16px;
}

.hub-page .kiosk-instruction h2 {
  font:600 17px 'Source Sans 3',sans-serif;
  margin:0;
  color:#443548;
}

.hub-page .kiosk-instruction>span {
  font:9px var(--mono);
  color:#7d6c86;
  white-space:nowrap;
}

.hub-page .question-bank {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.hub-page .dec {
  display:flex;
  flex-direction:column;
  background:#fffdfa;
  border:1px solid #b3a7b9;
  border-bottom:5px solid #a394ae;
  border-radius:4px;
  box-shadow:inset 0 1px #fff,0 3px 2px #70607730;
  transition:transform .1s,box-shadow .1s;
  position:relative;
  overflow:hidden;
}

.hub-page .dec:before {
  content:'';
  position:absolute;
  inset:2px;
  border:1px solid #fff;
  border-radius:3px;
  pointer-events:none;
}

.hub-page .question-label {
  padding:15px 18px 17px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:155px;
  background:linear-gradient(115deg,#fffefa,#faf7f9);
}

.hub-page .question-number {
  font:9px var(--mono);
  color:#a52892;
  letter-spacing:.05em;
}

.hub-page .sym {
  font:600 24px/1.12 'Source Sans 3',sans-serif;
  letter-spacing:-.4px;
  color:#28232b;
  max-width:340px;
}

.hub-page .ans {
  font:400 13px/1.4 'Source Sans 3',sans-serif;
  color:#75697c;
  max-width:340px;
}

.hub-page .go {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:auto;
  padding:8px 13px 8px 18px;
  background:linear-gradient(#f8edf8,#e9d7eb);
  border-top:1px solid #d7bdd7;
  color:#664269;
  font:600 11px 'Source Sans 3',sans-serif;
  letter-spacing:.02em;
}

.hub-page .press-arrow {
  display:grid;
  place-content:center;
  width:34px;
  height:25px;
  border:1px solid #a5639c;
  border-bottom:3px solid #ac71a8;
  background:linear-gradient(#ffd7f9,#ffa7ee);
  color:#753466;
  box-shadow:inset 0 1px #ffeefb;
  border-radius:3px;
  font:16px var(--sans);
}

.hub-page .dec:hover .question-label {
  background:#fff9fd;
}

.hub-page .dec:hover {
  border-color:#ca27b2;
  border-bottom-color:#ba70b0;
}

.hub-page .dec:active {
  transform:translateY(3px);
  box-shadow:inset 0 1px 3px #7e367d30;
  border-bottom-width:2px;
  margin-bottom:3px;
}

.hub-page .dec:active .press-arrow {
  border-bottom-width:1px;
  transform:translateY(2px);
}

.hub-page .kiosk-footer {
  padding:23px 10px 24px;
  display:flex;
  align-items:center;
  gap:20px;
  color:#847889;
}

.hub-page .kiosk-footer>span {
  font:16px 'Bagel Fat One',sans-serif;
}

.hub-page .small-dot {
  color:#ca27b2;
}

.hub-page .kiosk-footer>a {
  margin-left:auto;
  font:10px var(--mono);
}


.hub-page .kiosk-base {
  height:20px;
  margin:0 -27px;
  background:linear-gradient(#4a4152,#292431);
  border-top:1px solid #191421;
  position:relative;
}

.hub-page .kiosk-base:before,
.hub-page .kiosk-base:after {
  content:'';
  position:absolute;
  bottom:-7px;
  width:44px;
  height:7px;
  border-radius:0 0 2px 2px;
  background:#38313e;
}

.hub-page .kiosk-base:before {
  left:32px;
}

.hub-page .kiosk-base:after {
  right:32px;
}

@media (max-width:1040px){
.hub-page .kiosk {
  margin-inline:20px;
}

.hub-page .kiosk-header {
  gap:20px;
}

.hub-page .kiosk h1 {
  font-size:40px;
}

.hub-page .sym {
  font-size:23px;
}

.hub-page .question-label {
  padding-inline:15px;
  min-height:175px;
}
}

@media (max-width:700px){
.hub-page .kiosk {
  margin:2px 10px 0;
}

.hub-page .kiosk {
  padding:18px 14px 0;
  border-right-width:6px;
  border-radius:10px 8px 3px 3px;
}

.hub-page .kiosk:before {
  width:5px;
}

.hub-page .kiosk-header {
  grid-template-columns:1fr;
  gap:0;
  padding:0 4px 15px;
}

.hub-page .kiosk-sign {
  padding:12px 14px 14px;
}

.hub-page .kiosk h1 {
  font-size:43px;
  line-height:.96;
  margin-top:12px;
}

.hub-page .kiosk h1 br {
  display:none;
}

.hub-page .sign-top {
  font-size:8px;
}

.hub-page .kiosk-intro {
  display:grid;
  grid-template-columns:23px 1fr;
  gap:10px;
  align-items:center;
  padding:16px 2px 0;
}

.hub-page .information-mark {
  width:22px;
  height:22px;
  font-size:15px;
}

.hub-page .kiosk-intro p {
  font-size:13px;
  line-height:1.35;
  margin:0;
  max-width:none;
}

.hub-page .kiosk-intro p br {
  display:none;
}

.hub-page .language-label {
  display:none;
}

.hub-page .kiosk-bay {
  padding:12px 9px 12px;
  border-left-width:3px;
  border-top-width:4px;
}

.hub-page .kiosk-instruction {
  gap:12px;
  align-items:baseline;
  margin-bottom:12px;
}

.hub-page .kiosk-instruction h2 {
  font-size:15px;
  line-height:1.2;
}

.hub-page .kiosk-instruction>span {
  font-size:8px;
}

.hub-page .question-bank {
  grid-template-columns:1fr;
  gap:11px;
}

.hub-page .question-label {
  padding:13px 13px 14px;
  gap:9px;
  min-height:0;
}

.hub-page .question-number {
  font-size:8px;
}

.hub-page .sym {
  font-size:23px;
  line-height:1.08;
  letter-spacing:-.3px;
}

.hub-page .ans {
  font-size:12px;
  line-height:1.4;
}

.hub-page .go {
  padding:7px 10px 7px 13px;
  font-size:10px;
}

.hub-page .press-arrow {
  width:30px;
  height:22px;
  font-size:14px;
}

.hub-page .kiosk-footer {
  padding:20px 4px;
  gap:15px;
}

.hub-page .kiosk-footer>span {
  font-size:13px;
}

.hub-page .kiosk-footer>a {
  font-size:8px;
}


.hub-page .kiosk-base {
  margin:0 -14px;
  height:16px;
}
}

/* Keep the action labels in their authored case. */
.hub-page .go { text-transform: none; }
.hub-page .kiosk-footer > a:hover { color: var(--primary-dark); }
@media (max-width: 700px) {
  body.hub-page { padding: 14px 0 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-page *, .hub-page *::before, .hub-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Keep the maker signature quiet without making it a tiny touch target. */
.hub-page .kiosk-footer > a { min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; font-size: 11px; color: #6b5f70; }