/* Lane D shared styles for /checkin and /k/:key/room. Tokens (colors, fonts, motion) live in each page's :root, copied from STYLE.md. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: hidden; background: var(--espresso); color: var(--cream); font: 300 18px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.label { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
:is(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--beige); outline-offset: 2px; }
:is(.card, .cele-card, .agent, .sheet) :is(button, a):focus-visible { outline-color: var(--red); }

/* two soft glows behind everything, never over text */
.glow { position: fixed; z-index: 0; pointer-events: none; background: var(--glow); filter: blur(90px); border-radius: 50%; opacity: .55; }
.glow.g1 { width: 380px; height: 380px; top: -140px; right: -120px; }
.glow.g2 { width: 320px; height: 320px; bottom: -150px; left: -130px; opacity: .4; }
@media (min-width: 700px) {
  body { background: var(--desk); }
  .glow.g1 { width: 520px; height: 520px; top: -200px; right: -140px; }
  .glow.g2 { width: 480px; height: 480px; bottom: -220px; left: -180px; }
}

.brandrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.mark { width: 44px; height: 44px; border-radius: 50%; display: block; }
.brandrow .label, .eyebrow { color: rgba(243, 234, 223, .75); }
h1, h2 { margin: 0 0 14px; font-weight: 600; line-height: .98; letter-spacing: -0.04em; }
h1:focus, h2:focus { outline: none; }
.lead { margin: 0 0 24px; font-size: 20px; color: rgba(243, 234, 223, .75); }
.fine { margin: 16px 0 0; font-size: 15px; color: rgba(243, 234, 223, .75); }

/* buttons are pills. On the dark page the primary is beige; inside a light surface it is espresso. */
.btn, .btn-link {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; text-align: center;
  color: var(--espresso); background: var(--beige);
  transition: transform var(--t-tap) var(--ease-out), opacity var(--t-quick) var(--ease-out);
}
.btn.sec { color: var(--cream); background: transparent; box-shadow: inset 0 0 0 1px rgba(243, 234, 223, .25); }
:is(.card, .cele-card, .agent, .sheet) :is(.btn, .btn-link) { color: var(--cream); background: var(--espresso); }
:is(.card, .cele-card, .agent, .sheet) .btn.sec { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px rgba(43, 29, 21, .3); }
.btn[disabled] { cursor: progress; opacity: .65; }
:is(.btn, .btn-link, .tab, .nav-tab, .chip, .link, [data-press]):active:not([disabled]) { transform: scale(.97); }
.link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 6px; background: none; border: 0; cursor: pointer; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 234, 223, .75); text-decoration: underline; text-underline-offset: 4px; transition: transform var(--t-tap) var(--ease-out); }

.field { display: block; width: 100%; min-height: 60px; padding: 14px 18px; font: 300 20px var(--sans); color: var(--cream); background: transparent; border: 1px solid rgba(243, 234, 223, .25); border-radius: 14px; -webkit-appearance: none; appearance: none; }
textarea.field { min-height: 132px; resize: none; line-height: 1.4; }
.field::placeholder { color: rgba(243, 234, 223, .45); }
.field[aria-invalid="true"] { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }

/* footer: the three logos (STYLE.md) */
.foot { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(243, 234, 223, .22); text-align: center; color: rgba(243, 234, 223, .75); }
.foot .auto { margin: 0 0 16px; font-size: 11px; }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.lg { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.lg img { display: block; }
.lg .aa5 { width: 28px; height: 28px; border-radius: 50%; }
.lg .gs { width: 24px; height: 24px; border-radius: 6px; filter: invert(1); }
.lg .mdb { height: 16px; width: auto; filter: brightness(0) invert(1); }
.logos i { font-style: normal; opacity: .55; display: none; }
@media (min-width: 960px) { .logos i { display: inline; } }

/* ---------- motion (STYLE.md): transform and opacity only ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.rise { animation: rise var(--t-move) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }

/* shimmer skeletons: nothing at all for the first 150 ms, so fast answers never flash one */
.skel { position: relative; overflow: hidden; height: 200px; border-radius: 14px; background: rgba(243, 234, 223, .06); opacity: 0; animation: skel-in 1ms linear 150ms forwards; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(243, 234, 223, .1), transparent); transform: translateX(-100%); animation: shimmer 1.4s linear infinite; }
@keyframes skel-in { to { opacity: 1; } }
@keyframes shimmer { to { transform: translateX(100%); } }

/* banners and sheets slide from the edge they belong to; they leave faster, with ease-in */
@keyframes in-top { from { transform: translateY(-110%); } }
@keyframes out-top { to { transform: translateY(-110%); } }
@keyframes in-bottom { from { transform: translateY(110%); } }
@keyframes out-bottom { to { transform: translateY(110%); } }
@keyframes in-right { from { transform: translateX(110%); } }
@keyframes out-right { to { transform: translateX(110%); } }
[data-edge].entering { animation: var(--in, in-top) var(--t-move) var(--ease-out) both; }
[data-edge].leaving { animation: var(--out, out-top) var(--t-quick) var(--ease-in) both; }
[data-edge="bottom"] { --in: in-bottom; --out: out-bottom; }
[data-edge="right"] { --in: in-right; --out: out-right; }

/* the badge bump when something lands in it: 1 -> 1.25 -> 1 */
@keyframes bump { 40% { transform: scale(1.25); } }
.bump { animation: bump var(--t-move) var(--ease-spring); }

/* ring pulses live on a pseudo element so only transform and opacity move */
@keyframes ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }
.pulse-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--beige); display: inline-block; flex: none; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--glow); animation: ring 2.4s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .rise, [data-edge].entering, .bump { animation: fade var(--t-quick) linear both !important; animation-delay: 0s !important; }
  [data-edge].leaving { animation: fade-out var(--t-quick) linear both !important; }
  .skel::after, .pulse-dot::after { animation: none !important; display: none; }
  .skel { animation: skel-in 1ms linear 150ms forwards !important; }
  :is(.btn, .btn-link, .tab, .nav-tab, .chip, .link, [data-press]):active:not([disabled]) { transform: none; }
}