/* The guest host's page: paper edge to edge, the orb filling it, one line of chrome (Log ud only). Colours are the design system's own tokens
   (the talk's: paper, ink, red); dark follows the system, and guest.js sets data-theme from prefers-color-scheme so the sandbox proxy and the orb follow too. */
:root {
  color-scheme: light dark;
  --paper: #F6F3EA; --field: #FFFFFF; --ink: #111214; --muted: #5F646B; --hair: rgba(21, 19, 17, .16);
  --red: #7A1C17; --red-press: #641612;
}
:root[data-theme="dark"] {
  --paper: #0B1320; --field: #141D2E; --ink: #F6F3EA; --muted: rgba(246, 243, 234, .60); --hair: rgba(246, 243, 234, .18);
  --red: #E8897F; --red-press: #F3A59C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B1320; --field: #141D2E; --ink: #F6F3EA; --muted: rgba(246, 243, 234, .60); --hair: rgba(246, 243, 234, .18);
    --red: #E8897F; --red-press: #F3A59C;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* A phone app, not a web page: the page is exactly the screen (100vh, then the dynamic 100dvh where the browser has it, so the address bar never leaves a gap or a scroll), it never rubber-bands, and it never scrolls sideways. The notch inset is the page own var(--paper), light or dark, so the status bar sits on the themed ground. */
html {
  margin: 0; height: 100vh; height: 100dvh; padding-top: env(safe-area-inset-top);
  background: var(--paper); overflow: hidden; overscroll-behavior: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0; height: 100%; max-width: 100%; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none;
  background: var(--paper); color: var(--ink);
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 23px;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-font-smoothing: antialiased;
}
/* Every control: a finger-sized target, no 300 ms wait or double-tap zoom, no grey tap flash, no text selection or iOS callout. */
.logout, .choice {
  min-height: 44px; min-width: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* The one line of chrome. It is in the flow, not over the orb, so it never covers the orb's own corner switches. It is not shown (and takes no room) until someone is signed in. */
.bar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; }
.logout { margin-left: auto; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; line-height: 20px; text-decoration: none; }
.logout:active { color: var(--ink); }
@media (hover: hover) {
  .logout:hover { color: var(--ink); text-decoration: underline; }
}
.logout:focus-visible, .choice:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

.stage { flex: 1 1 auto; min-height: 0; min-width: 0; position: relative; display: flex; overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; }
.card { margin: auto; width: 100%; max-width: 420px; padding: 24px 16px; display: flex; flex-direction: column; gap: 12px; text-align: center; overflow-wrap: anywhere; }
.card p { margin: 0; }
.choice {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 16px;
  border: 1px solid var(--hair); border-radius: 0; background: var(--field); color: var(--ink); text-decoration: none; font-size: 17px; line-height: 24px;
}
.choice:active { color: var(--red-press); border-color: var(--red-press); }
@media (hover: hover) { .choice:hover { border-color: var(--red); color: var(--red); } }
#noteAgents a { color: inherit; text-decoration: underline; }
#noteAgents a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.key { font-size: 12px; line-height: 16px; color: var(--muted); word-break: break-all; user-select: all; -webkit-user-select: all; }

/* The orb fills the stage: whatever the host's frame says its size is, it is the stage's. The host pins the width the orb reports (and its height) inline on this frame, in pixels, and the orb's window then never shrinks to report less: so the width is held here too, as the console does everywhere it frames an app (width: 100% !important). */
.orb { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; }
.orb > div { position: absolute; inset: 0; }
.orb iframe { display: block; width: 100% !important; max-width: 100%; min-width: 0; height: 100% !important; border: 0; }

/* Portrait phone: the thumb's end of the screen is the bottom. The one line of chrome (Log ud) sits under the orb, above the home bar, and the sign-in choices sit low on the screen. */
@media (max-width: 600px) {
  .bar { order: 2; }
  .stage { order: 1; }
  #chooser.card { margin-top: auto; margin-bottom: 0; padding-bottom: 32px; }
}
@media (prefers-reduced-motion: no-preference) { .choice, .logout { transition: color .12s, border-color .12s; } }