/* Shared chrome for the direction boards. Each board owns its world; this file only
   holds the fonts, the board switcher, the tablet hardware and the toast. */
@font-face { font-family: 'Sofia Sans'; src: url('fonts/sofia-sans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Sofia Sans XC'; src: url('fonts/sofia-sans-xcond.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Anek Latin'; src: url('fonts/anek-latin.woff2') format('woff2'); font-weight: 100 800; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('fonts/lexend.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Yatra One'; src: url('fonts/yatra-one.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hind'; src: url('fonts/hind-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hind'; src: url('fonts/hind-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Hind'; src: url('fonts/hind-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Hind'; src: url('fonts/hind-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.i { flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; background: #111; color: #fff; border-radius: 6px; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Board switcher: quiet, fixed, outside every world. */
.kit-nav { position: fixed; z-index: 40; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: oklch(0.18 0.01 260 / .88); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px oklch(0.1 0 0 / .5); font: 500 13px/1 system-ui, sans-serif; }
.kit-nav a { color: oklch(0.92 0 0); text-decoration: none; padding: 10px 14px; border-radius: 999px; min-height: 36px; display: flex; align-items: center; white-space: nowrap; }
.kit-nav a:hover { background: oklch(1 0 0 / .1); }
.kit-nav a[aria-current] { background: oklch(1 0 0); color: oklch(0.18 0.01 260); }
.kit-nav a:focus-visible { outline: 2px solid oklch(1 0 0); outline-offset: 2px; }
@media (max-width: 560px) { .kit-nav .long { display: none; } }

.kit-toast { position: fixed; z-index: 50; left: 50%; bottom: 72px; translate: -50% 12px; opacity: 0; pointer-events: none; max-width: min(92vw, 520px);
  padding: 12px 16px; border-radius: 10px; background: oklch(0.2 0.01 260); color: #fff; font: 500 14px/1.4 system-ui, sans-serif;
  transition: opacity .2s, translate .3s cubic-bezier(.16, 1, .3, 1); }
.kit-toast.on { opacity: 1; translate: -50% 0; }

/* Android tablet hardware. The screen is a fixed 1000x625 canvas scaled to fit. */
.device { --fit: 1; position: relative; width: 100%; max-width: 1040px; padding: 2.2%; border-radius: clamp(14px, 3vw, 30px);
  background: linear-gradient(160deg, oklch(0.26 0.006 260), oklch(0.17 0.006 260)); box-shadow: 0 40px 80px -40px oklch(0.15 0.02 260 / .55), inset 0 0 0 1px oklch(1 0 0 / .06); }
.device::before { content: ''; position: absolute; top: 50%; left: 1%; width: 5px; height: 5px; border-radius: 50%; translate: 0 -50%; background: oklch(0.32 0.01 260); }
.device .wrap { position: relative; aspect-ratio: 1000 / 625; overflow: hidden; border-radius: clamp(4px, 1vw, 10px); }
.device .screen { position: absolute; left: 0; top: 0; width: 1000px; height: 625px; transform: scale(var(--fit)); transform-origin: 0 0; overflow: hidden; }
.statusbar { height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font: 500 12px/1 system-ui, sans-serif; }
.statusbar span { display: flex; align-items: center; gap: 6px; }

/* Reveal enhances a visible default. */
.kit-js [data-reveal] { opacity: 0; translate: 0 18px; transition: opacity .7s cubic-bezier(.16, 1, .3, 1), translate .9s cubic-bezier(.16, 1, .3, 1); }
.kit-js [data-reveal].in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}