:root {
  /* collaborate.css reads --text and --surface; alias them so both themes apply. */
  --text: var(--fg);
  --surface: var(--card);
  color-scheme: dark;
  /* The whole application reads the one warm palette declared further down: cream paper, terracotta
     for action, near-black ink, and colour only where it means something. These are aliases, so the
     appearance switch happens once, in --w-*, rather than being written out again per theme here.
     The signed-in product used to keep a green brand of its own while the landing wore this; that
     split is gone, which is what makes the two halves look like one product. */
  --bg: var(--w-paper);
  --card: var(--w-card);
  --fg: var(--w-ink);
  --muted: var(--w-ink-3);
  --border: var(--w-line);
  --sidebar-surface: var(--w-sidebar);
  --field-surface: var(--w-card);
  --surface-raised: var(--w-raised);
  --separator: var(--w-line-soft);
  --selection: var(--w-line-soft);
  /* Action, not approval. --ok carries "this is live / this went well", which used to share this
     token and would have turned terracotta with it. */
  --accent: var(--w-accent);
  --accent-fg: var(--w-accent-fg);
  --ok: var(--w-live);
  --accent-cyan: #38bdf8;
  --accent-purple: #a855f7;
  --accent-amber: #f59e0b;
  --accent-blue: #3b82f6;
  --glow-mint: none;
  --glow-cyan: none;
  --glow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.25);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) {
  /* Only the colour-scheme hint: the values themselves switch once, in --w-*. */
  :root:not([data-theme]), :root[data-theme="system"] { color-scheme: light; }
}
* { box-sizing: border-box; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 12% 82%, rgba(59, 130, 246, 0.08) 0%, rgba(168, 85, 247, 0.05) 35%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(11, 15, 25, 0.95) 0%, rgba(7, 9, 14, 1) 100%);
  background-attachment: fixed;
  color: var(--fg);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  min-height: 100vh;
  padding: 0;
}
button, select, input { font: inherit; }
button, select, summary, a.nav-item, a.route-action { min-height: 44px; }
/* Safari draws <select> as a native menu and replaces the stylesheet's padding and height with its own
   (computed min-height 18px, padding 0), so a room role picker rendered 23px tall beside 44px inputs.
   appearance: none returns the box to this stylesheet in every engine. The arrow is drawn from two
   currentColor gradients so it follows the theme; rules that colour a select must set background-color,
   not the background shorthand, or they erase it. */
select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 50%, calc(100% - 0.7rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
#app { width: 100%; min-height: 100vh; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Render a stable shell immediately while the Bonsai bundle downloads and parses. It is inert and
   aria-hidden, but avoids the blank-screen interval that dominated perceived startup time. */
.app-placeholder {
  pointer-events: none;
  user-select: none;
}
.app-placeholder .shell-main {
  grid-column: 1;
  grid-row: 1;
  width: min(100%, 46rem);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.placeholder-main { min-height: 24rem; }
.boot-placeholder { min-height: 19rem; }
.boot-line {
  display: block; height: 0.8rem; width: min(100%, 29rem); border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  animation: inetgarden-boot-pulse 1.2s ease-in-out infinite alternate;
}
.boot-line.title { width: min(55%, 15rem); height: 1.6rem; margin-bottom: 0.9rem; }
.boot-line.short { width: min(72%, 21rem); margin-top: 0.55rem; }
.boot-actions { display: flex; gap: 0.75rem; margin-top: 2.2rem; }
.boot-action { width: 7.5rem; height: 2.75rem; border-radius: 999px; }
@keyframes inetgarden-boot-pulse { to { opacity: 0.42; } }
@media (prefers-reduced-motion: reduce) { .boot-line { animation: none; } }
.skip-link {
  position: fixed; z-index: 1000; left: 0.75rem; top: 0.75rem; padding: 0.65rem 0.85rem;
  border-radius: 8px; background: var(--fg); color: var(--bg); font-weight: 700;
  transform: translateY(-200%); transition: transform 0.12s;
}
.skip-link:focus { transform: translateY(0); }

.app-shell {
  --sidebar-width: 15rem;
  width: 100%; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 0;
  display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: 0 auto 1fr auto; background-color: var(--bg);
  background-image: linear-gradient(to right, var(--sidebar-surface) var(--sidebar-width), transparent var(--sidebar-width));
}
.workspace-sidebar {
  grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100dvh; min-width: 0; overflow-y: auto;
  display: flex; flex-direction: column; padding: 1.2rem 0.85rem;
  background: var(--sidebar-surface); scrollbar-width: thin;
  border-right: 1px solid var(--separator);
}
.workspace-sidebar .brand { margin: 0 0.5rem 1.4rem; flex: 0 0 auto; }
.brand {
  display: inline-flex; align-items: center; gap: 0.75rem; border: 0; background: transparent;
  color: var(--fg); padding: 0.35rem 0.25rem; font-weight: 700; font-size: 1.12rem; letter-spacing: -0.025em; cursor: pointer;
}
.brand-logo-img {
  width: 28px; height: 28px; flex: 0 0 auto;
  filter: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.brand:hover .brand-logo-img {
  transform: scale(1.08);
  filter: none;
}
.sidebar-status-indicator {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem;
  margin-top: 0.85rem; border-radius: 8px; font-size: 0.76rem; color: var(--muted);
  border-top: 1px solid var(--separator);
}
/* Green only for a live session. Every other state is neutral, amber or red, and there is no
   indicator at all without a session: the dot must never claim more than the session proves. */
.status-indicator-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.status-live .status-indicator-dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
  animation: pulse-online 2s infinite ease-in-out;
}
.status-backoff .status-indicator-dot { background: #f59e0b; }
.status-failed .status-indicator-dot { background: #ef4444; }
@media (prefers-reduced-motion: reduce) { .status-live .status-indicator-dot { animation: none; } }
@keyframes pulse-online {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
.nav-caption { margin: 1rem 0.75rem 0.45rem; color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.sidebar-bottom { margin-top: auto; padding-top: 2rem; }
.sidebar-help { display: flex; align-items: center; min-height: 44px; padding: 0.4rem 0.75rem; color: var(--muted); font-size: 0.84rem; text-decoration: none; border-radius: 8px; }
.sidebar-help:hover { background: var(--card); color: var(--fg); }
.sidebar-appearance { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.4rem 0.65rem 0.85rem; color: var(--muted); font-size: 0.78rem; }
.sidebar-sign-in { display: grid; gap: 0.4rem; padding: 0.4rem 0.65rem; font-size: 0.82rem; }
.sidebar-sign-in .identity-provider { display: flex; align-items: center; min-height: 44px; width: 100%; margin: 0; font-size: inherit; }
.workspace-context { display: flex; align-items: center; gap: 0.85rem; font-size: 0.85rem; }
.workspace-label, .workspace-divider { color: var(--muted); }
.workspace-current { color: var(--fg); font-weight: 600; }
.navigation-toggle { display: none; align-items: center; gap: 0.5rem; padding: 0.4rem 0.65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--fg); cursor: pointer; }
.shell-head {
  grid-column: 2; grid-row: 1; min-width: 0; display: none; align-items: center;
  gap: 1rem; padding: 0 2.5rem; border-bottom: 1px solid var(--separator);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem; border: 0; background: transparent;
  color: var(--fg); padding: 0.35rem 0; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.025em; cursor: pointer;
}
.shell-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; }
/* Symbols scale with their labels; navigation keeps a stable optical slot. */
.portal-icon {
  width: 1.2em; height: 1.2em; flex: 0 0 auto; vertical-align: -0.2em; pointer-events: none;
  stroke-width: var(--icon-stroke, 1.75);
}
.nav-item .portal-icon, .account-menu-item .portal-icon { width: 20px; height: 20px; }
.connect, .route-action, .setting-title, .collaboration-region-title, h1, h2 { --icon-stroke: 1.9; }
.provider-icon-zoom { width: 2.5rem; }
.icon-label { display: inline-flex; align-items: center; gap: 0.45em; }
.nav-item .portal-icon { margin-inline-end: 0; }
.connect:not(.icon-label) .portal-icon, .host-setup-trigger .portal-icon { margin-inline-end: 0.4em; }
.nav-item {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left;
  border: 0; border-radius: 9px; padding: 0.6rem 0.75rem; background: transparent;
  color: var(--fg); cursor: pointer; font-size: 0.88rem; font-weight: 400;
}
.nav-item:hover { background: color-mix(in srgb, var(--selection) 60%, transparent); }
.nav-item.active { background: var(--selection); color: var(--fg); font-weight: 600; }
.shell-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.theme-control select {
  border: 1px solid var(--border); border-radius: 999px; padding: 0.38rem 1.8rem 0.38rem 0.7rem;
  background-color: var(--card); color: var(--fg); font-size: 0.8rem; cursor: pointer;
}
.account-dot {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
  font-size: 0.78rem; font-weight: 750;
}
.account-menu, .account-chip { display: flex; align-items: center; gap: 0.45rem; }
.account-chip {
  border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--fg);
  padding: 0.16rem 0.55rem 0.16rem 0.16rem; cursor: pointer;
}
.account-chip:hover { border-color: var(--accent); }
.sidebar-bottom .account-menu { flex-direction: column; align-items: stretch; gap: 0.25rem; border-top: 1px solid var(--border); padding-top: 0.85rem; }
.sidebar-bottom .account-chip { width: 100%; border: 0; border-radius: 10px; padding: 0.5rem; background: transparent; text-align: left; gap: 0.65rem; }
.sidebar-bottom .account-chip:hover { background: var(--card); }
.account-caption { display: grid; min-width: 0; gap: 0.12rem; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; }
.sidebar-bottom .account-dot { flex: 0 0 auto; }
.sidebar-bottom .account-logout { align-self: flex-start; color: var(--muted); padding: 0.35rem 0.65rem; }
.account-plan { color: var(--muted); font-size: 0.72rem; text-transform: capitalize; }
.account-logout { border: 0; background: transparent; cursor: pointer; }

/* The account menu. It rises from the chip pinned to the bottom of the sidebar, so it opens upward:
   anchored at the bottom, growing away from the edge it sits on. */
.sidebar-bottom .account-menu { position: relative; }
.account-chip.open { background: var(--card); }
.account-popover {
  position: absolute; bottom: calc(100% + 0.4rem); left: 0; right: 0; z-index: 40;
  display: grid; gap: 0.1rem; padding: 0.35rem;
  border: 1px solid var(--separator); border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 18px 40px rgb(0 0 0 / 28%);
}
.account-menu-identity {
  margin: 0; padding: 0.4rem 0.55rem 0.5rem; border-bottom: 1px solid var(--separator);
  color: var(--muted); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-menu-item {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.5rem 0.55rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--fg); font: inherit; font-size: 0.82rem;
  text-align: left; text-decoration: none; cursor: pointer;
}
.account-menu-item:hover, .account-menu-item:focus-visible { background: var(--card); }
.account-menu-appearance {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.4rem 0.55rem; border-top: 1px solid var(--border); margin-top: 0.15rem;
  color: var(--muted); font-size: 0.78rem;
}
.account-menu-note { margin: 0; padding: 0.5rem 0.55rem; color: var(--muted); font-size: 0.78rem; }
.sidebar-bottom .account-popover .account-logout {
  border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-top: 0.15rem;
  color: var(--muted); align-self: stretch;
}
.shell-main { grid-column: 2; grid-row: 3; width: min(100%, 108rem); min-width: 0; margin: 0 auto; padding: 2rem 2.5rem 3rem; }
/* Route focus announces the noninteractive landmark, not a selected panel. All interactive
   controls retain the global :focus-visible ring, including the skip link and menu button. */
.shell-main:focus { outline: none; }
.shell-main > .portal:not(.connect-screen), .shell-main > .account-route-host > .portal { padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.shell-main .portal-head h1 { font-size: clamp(1.8rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.025em; }
.shell-foot { grid-column: 2; grid-row: 4; padding: 1rem 1.5rem; color: var(--muted); font-size: 0.72rem; text-align: center; }
.shell-foot a { color: inherit; margin-inline-start: 0.75rem; }
.notification-region { grid-column: 2; grid-row: 2; width: min(calc(100% - 3rem), 66rem); margin: 0.8rem auto 0; }
.notice {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-raised); color: var(--fg); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  font-size: 0.84rem;
}
.notice.success { border-color: color-mix(in srgb, var(--ok) 58%, var(--border)); }
.notice.error { border-color: #c0392b; }
.notice-close {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 0.1rem 0.3rem; font-size: 1.15rem; line-height: 1;
}
.notice-close:hover { color: var(--fg); }

.portal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}
header h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }
.tagline { margin: 0.15rem 0 0; color: var(--muted); }
.portal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }

/* Share hero: the prominent QR + short link + copy, above the data columns. */
.hero {
  display: flex; gap: 1.25rem; align-items: center;
  padding: 1rem 1.1rem; margin-bottom: 1.25rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
}
.hero-qr svg {
  display: block; width: 176px; height: 176px;
  border: 1px solid var(--border); border-radius: 10px; background: #ffffff;
}
.hero-info { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.hero-title { font-weight: 700; font-size: 1.05rem; }
.hero-hint { color: var(--muted); font-size: 0.82rem; }
.hero-info .copy { margin-top: 0.35rem; align-self: flex-start; }

/* Default path: one primary connection control beside plain-language status. */
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); gap: 1rem 1.25rem; align-items: start; }
.col { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.col-title {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 0.3rem;
}
.col > .connect, .col > .copy { margin-top: 0.35rem; }
.connection-advanced, .tools-disclosure {
  grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--border); padding-top: 0.35rem;
}
.connection-advanced > summary, .tools-disclosure > summary {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0;
  color: var(--muted); font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.connection-advanced > summary::before, .tools-disclosure > summary::before { content: "▸"; }
.connection-advanced[open] > summary::before, .tools-disclosure[open] > summary::before { content: "▾"; }
.advanced-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem 1rem;
  padding: 0.5rem 0 0.25rem;
}
.advanced-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.advanced-actions .copy { margin-top: 0; }
.tools-disclosure { margin-top: 1rem; }
.tools-disclosure > .tools { margin-top: 0; border-top: 0; padding-top: 0.4rem; }
@media (max-width: 56rem) {
  .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 4.25rem auto auto 1fr auto; background-image: none; }
  .shell-head { display: flex; grid-column: 1; grid-row: 1; gap: 1rem; padding: 0.5rem 1rem; }
  .navigation-toggle { display: inline-flex; }
  .workspace-sidebar { display: none; grid-column: 1; grid-row: 2; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .app-shell[data-sidebar-open="true"] .workspace-sidebar { display: flex; }
  .workspace-sidebar .brand { margin-bottom: 0; }
  .shell-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-caption { grid-column: 1 / -1; }
  .sidebar-bottom { padding-top: 1rem; }
  .sidebar-appearance { justify-content: flex-start; gap: 1rem; }
  .workspace-label, .workspace-divider { display: none; }
  .notification-region { grid-column: 1; grid-row: 3; }
  .shell-main { grid-column: 1; grid-row: 4; padding: 1.5rem 1.25rem 2rem; }
  .shell-foot { grid-column: 1; grid-row: 5; }
  .cols { grid-template-columns: 1fr; }
  .advanced-grid { grid-template-columns: 1fr; }
  .hero { flex-direction: column; text-align: center; }
  .hero-info { align-items: center; }
  .hero-info .copy { align-self: center; }
}

.form { display: grid; gap: 0.9rem; }
.field { display: grid; gap: 0.3rem; }
.field .label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.field input, .field select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--fg);
  background-color: var(--field-surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.field select { padding-right: 2rem; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field input.mono { font-family: var(--mono); font-size: 0.85rem; }
.field input.invalid { border-color: #c0392b; }
.field input.invalid:focus { box-shadow: 0 0 0 3px #c0392b33; }
.field-hint { font-size: 0.72rem; color: #c0392b; }

.recents { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.9rem; }
.recents-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.chip {
  font: inherit; font-size: 0.78rem; padding: 0.2rem 0.6rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--fg); cursor: pointer;
  max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color 0.12s;
}
.chip:hover { border-color: var(--accent); }

/* "Open in the desktop app": a quiet secondary action beneath the primary Connect button.
   It stays subordinate to Connect and collapses to a disclosure until a local alias is known,
   so the default home screen keeps exactly one prominent action. */
.open-in-app { margin-top: 0.75rem; font-size: 0.85rem; }
.open-in-app summary {
  cursor: pointer; color: var(--muted); list-style: none;
  padding: 0.15rem 0; border-radius: 4px;
}
.open-in-app summary::-webkit-details-marker { display: none; }
.open-in-app summary:hover { color: var(--fg); }
.open-in-app summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.open-in-app .hint { color: var(--muted); margin: 0.4rem 0 0.5rem; }
.open-in-app .field { margin-bottom: 0.4rem; }
.app-link {
  color: var(--accent); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid transparent;
}
.app-link:hover { border-bottom-color: var(--accent); }
.app-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.linkish {
  font: inherit; font-size: 0.85rem; background: none; border: 0; padding: 0.15rem 0;
  margin-left: 0.6rem; color: var(--muted); cursor: pointer; text-decoration: underline;
}
.linkish:hover:not(:disabled) { color: var(--fg); }
.linkish:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.remember { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem; font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.remember input { width: auto; margin: 0; }

.actions { display: flex; gap: 0.6rem; align-items: stretch; }
/* A class that sets `display` beats the user agent's [hidden] rule, so any element given both a
   component class and `hidden` stays on screen. Two rules below already patch this one element at
   a time (.availability-notice, the QR video); this is the general form, so the next component
   does not have to discover it again. */
[hidden] { display: none !important; }

.actions .connect { flex: 1; margin-top: 0; }
.actions .copy { margin-top: 0; }
.copy {
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.12s;
}
.copy:hover { border-color: var(--accent); }

.qr-link { font-family: var(--mono); font-size: 0.72rem; word-break: break-all; color: var(--muted); }

.status { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 1.25rem 0 0.5rem; }
.badge { font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.badge.secure { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge.plain { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.hint { color: var(--muted); font-size: 0.85rem; }

.session { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin: 1.25rem 0 0.25rem; }
.session .meta { color: var(--muted); font-size: 0.8rem; font-family: var(--mono); }
.connection-state { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.45rem 0; }
.connection-state > span:last-child { display: grid; gap: 0.1rem; }
.connection-state-dot { width: 0.7rem; height: 0.7rem; margin-top: 0.35rem; border-radius: 50%; background: var(--muted); }
.connection-state-hint { color: var(--muted); font-size: 0.78rem; }
.connection-state.status-resolving .connection-state-dot,
.connection-state.status-connecting .connection-state-dot,
.connection-state.status-backoff .connection-state-dot { background: #b47700; animation: wv-pulse 1.1s ease-in-out infinite; }
.connection-state.status-live .connection-state-dot { background: var(--ok); }
.connection-state.status-failed .connection-state-dot { background: #c0392b; }
.session-details { margin-top: 0.35rem; border-top: 1px solid var(--border); }
.session-details > summary { padding: 0.5rem 0; color: var(--muted); cursor: pointer; font-size: 0.76rem; font-weight: 650; }
.session-details .session { margin: 0.1rem 0 0.35rem; }
.head-actions { display: flex; align-items: center; gap: 0.65rem; }
.auth-link { color: var(--accent); font-size: 0.82rem; font-weight: 650; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.sidebar-bottom button.auth-link {
  width: 100%; padding: 0.5rem 0.75rem; border: 0; border-radius: 9px;
  background: transparent; text-align: left; cursor: pointer;
}
.sidebar-bottom button.auth-link:hover { background: var(--card); }
.badge.status-idle, .badge.status-stopped { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.badge.status-connecting, .badge.status-backoff {
  background: #b4770022; color: #b47700;
  animation: wv-pulse 1.1s ease-in-out infinite;
}
.badge.status-connecting::before, .badge.status-backoff::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.35em;
  border-radius: 50%; background: currentColor; vertical-align: middle;
  animation: wv-pulse 1.1s ease-in-out infinite;
}
@keyframes wv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.badge.status-live { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.badge[class*="status-error"], .badge.status-failed { background: #c0392b22; color: #c0392b; }

.log {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.7rem;
  max-height: 9rem;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.log li { padding: 0.05rem 0; }
.log li.log-resumed { color: var(--ok); font-weight: 600; }

.connect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.65rem 1.4rem;
  text-align: center;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--w-ink) 12%, transparent);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.connect:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.connect:active:not(:disabled) {
  transform: translateY(0);
}
.connect.stop { background: #c0392b; color: #ffffff; box-shadow: 0 0 16px rgba(192, 57, 43, 0.4); }
.connect.disabled, .connect:disabled {
  background: #182235;
  color: #64748b;
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
}

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

@media (max-width: 22rem) {
  html, body, #app { max-width: 100%; overflow-x: hidden; }
  .portal { padding: 1rem; }
  .shell-nav { gap: 0; }
  .nav-item { padding-inline: 0.4rem; font-size: 0.78rem; }
  .shell-actions { gap: 0.25rem; }
  .theme-control select { padding-inline: 0.5rem; }
  .account-chip { padding-right: 0.25rem; }
  .account-plan { display: block; }
  .hero-qr svg { width: min(176px, 100%); height: auto; }
}

/* SSH access & tools panel, below the columns. */
.tools { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.1rem; display: flex; flex-direction: column; gap: 1rem; }
.tools-row { display: flex; flex-direction: column; gap: 0.5rem; }
.tools-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.tools-head .col-title { border: none; padding: 0; }
.feat-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; }
.feat-toggle input { width: auto; margin: 0; }
.feat-toggle.disabled { color: var(--muted); cursor: not-allowed; }
.feat-note { font-size: 0.76rem; color: var(--muted); }
.feat-lock { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent);
  padding: 0.1rem 0.45rem; border-radius: 999px; }
.cmd { display: flex; align-items: stretch; gap: 0.5rem; }
.cmd code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: pre; padding: 0.55rem 0.7rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  font-family: var(--mono); font-size: 0.78rem; color: var(--fg);
}
.cmd .copy { margin-top: 0; padding: 0.4rem 0.7rem; font-size: 0.78rem; white-space: nowrap; }
.cmd-hint { font-size: 0.76rem; color: var(--muted); font-family: var(--mono); }
.downloads { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.downloads a.dl {
  font-size: 0.78rem; padding: 0.3rem 0.7rem; text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--fg);
  transition: border-color 0.12s;
}
.downloads a.dl:hover { border-color: var(--accent); }
.host-setup-check { align-self: flex-start; margin-top: 0; }
.host-setup-result:empty { display: none; }
.host-setup-result {
  display: grid; gap: 0.45rem; padding: 0.7rem 0.8rem;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
}
.host-setup-result strong { font-size: 0.86rem; }
.host-setup-result p, .host-setup-result ol { margin: 0; color: var(--muted); font-size: 0.76rem; }
.host-setup-result ol { padding-left: 1.25rem; }
.host-setup-result .cmd { margin-top: 0.2rem; }
.host-setup-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.host-setup-actions .copy { margin-top: 0; font-size: 0.76rem; padding: 0.45rem 0.7rem; }

/* Web terminal */
.webterm { display: flex; flex-direction: column; gap: 0.5rem; }
.webterm-form { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }
.webterm-form .field { flex: 1; min-width: 8rem; gap: 0.2rem; }
.webterm-form .connect { margin-top: 0; padding: 0.55rem 0.9rem; white-space: nowrap; }
.term-host {
  height: 20rem; border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
  background: #0f1216; padding: 0.4rem;
}
.term-host.hidden { display: none; }
.term-err { font-size: 0.76rem; color: #c0392b; }

:root .availability-notice { margin: 24px auto; padding: 20px; max-width: 760px; border: 1px solid currentColor; border-radius: 14px; }
.availability-notice[hidden] { display: none; }
#workspace-unavailable { position: fixed; z-index: 30; inset: auto 16px 16px; margin: 0 auto; max-height: calc(100vh - 32px); overflow: auto; background: var(--card); box-shadow: 0 12px 40px #0003; }
.availability-notice button, .availability-notice a { margin-inline-end: 16px; }

/* Connect prioritizes the invite and its action. Secondary controls share one disclosure. */
.connect-screen {
  width: min(100%, 68rem);
  margin: 1.5rem auto 3rem;
  background: rgba(14, 21, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 48px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 2.25rem 2.5rem;
}
.connect-screen .portal-head { margin-bottom: 0.75rem; }
.connect-screen .tagline { margin-top: .45rem; font-size: 0.95rem; color: var(--muted); }

/* Hero split layout */
/* Two columns above 62rem, as the mockup lays it out: the sentence on the left, the thing the
   sentence is about on the right. The decorative network image that used to sit there was removed
   for describing the product rather than doing anything, and that still holds -- what is there now
   is the session surface itself, in the words the running product uses. One column below the
   breakpoint, words first. */
.hero-split-layout { margin-bottom: 1.5rem; }
@media (min-width: 62rem) {
  /* Only when the preview is actually there. A grid track with nothing in it still takes its
     27rem, and that is what squeezed the signed-in join panel into a sliver on CQA: the node is
     absent for a signed-in person, the column was not. */
  .hero-split-layout:has(> .session-preview) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
    gap: 2.5rem;
    align-items: start;
  }
  .hero-split-layout:has(> .session-preview) > .session-preview { margin-top: 2.6rem; }
}
.join-section { margin-top: 0; padding-top: 0; border-top: 0; }
.join-section .portal-head h2 { margin: 0; font-size: 1.05rem; }
.customer-head { display: block; margin-bottom: 1rem; }
.customer-head .tagline { margin-top: .4rem; max-width: 40rem; }
.hero-left-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.connection-form { display: grid; gap: .75rem; }
.connection-primary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .85rem; align-items: end; }
.connection-primary .field { min-width: 0; }
.connection-primary .field input {
  min-height: 48px; padding: .65rem .85rem; border-radius: 12px; font-size: 1rem;
  background: var(--field-surface); border: 1px solid var(--border);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.connection-primary .field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.connection-primary > .connect {
  margin: 0; min-height: 48px; min-width: 130px; align-self: end; border-radius: 999px;
}
.connect-screen .connection-state { padding: 0.25rem 0; gap: .5rem; font-size: .84rem; }
.connect-screen .connection-state > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .65rem; }
.connect-screen .connection-state strong { font-weight: 600; color: var(--fg); }
.connect-screen .connection-state-dot { width: .6rem; height: .6rem; flex-shrink: 0; margin-top: .35rem; }
.connect-screen .connection-state-hint { font-size: inherit; }
.connect-screen .connection-advanced { border-top: 0; padding-top: 0; margin-top: .5rem; }
.connect-screen .connection-advanced > summary { min-height: 44px; font-weight: 500; }
.connect-screen .advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .4rem 0; }
.connect-screen .session-details > summary, .connect-screen .tools-disclosure > summary { min-height: 44px; }
.connect-screen > .hero, .connect-screen > .open-in-app { margin-top: 1.5rem; }


.connect-auth {
  margin: 0 0 0.95rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(10, 15, 26, 0.5);
  backdrop-filter: blur(14px);
  display: grid;
  gap: 0.75rem;
}
.connect-auth-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.connect-auth .identity-provider {
  min-height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--fg);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.15s ease;
}
.connect-auth .identity-provider:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.invite-qr-actions button,
.invite-qr-actions label.invite-qr-file,
.invite-qr-capture-actions button,
.invite-qr-capture-actions label.invite-qr-file {
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--fg);
  backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  transition: all 0.15s ease;
}
.invite-qr-actions button:hover,
.invite-qr-actions label.invite-qr-file:hover,
.invite-qr-capture-actions button:hover,
.invite-qr-capture-actions label.invite-qr-file:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.route-note {
  color: var(--muted);
  font-size: 0.82rem;
}
.identity-provider-actions {
  display: grid;
  gap: 0.45rem;
}
.identity-provider-actions .identity-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  margin: 0;
}
.home-provider {
  justify-content: center;
}
/* Room content fills the workspace; the invite form keeps a readable width. */
.shell-main:has(.workspace-surface) { width: 100%; }
.workspace-surface { display: flex; flex-direction: column; width: 100%; margin: 1rem auto; }

/* Signed in, the first screen is one heading and two things a person can want: start support, or
   join with a link they were sent. They sit side by side, the first larger, because they are two
   intentions and not two modes of one page (~/Downloads/ui-step.md). Every colour here is a theme
   token, so the same layout is correct in light and dark. */
.workspace-signed-in {
  display: grid;
  /* Join sits beside the heading, where the mockup keeps its secondary actions, so the work below
     -- Start support and the rooms board -- runs the full width instead of being boxed into a
     column by a panel that only needed to be a card. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  grid-template-areas: "head join" "start start";
  column-gap: 1.75rem;
  row-gap: .75rem;
  align-items: start;
  max-width: none;
}
/* Below this the panel stops being a column and becomes the row under the action, rather than
   squeezing both into half a phone. */
@media (max-width: 70rem) {
  .workspace-signed-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "start" "join"; }
}
.workspace-signed-in .workspace-customer-slot { grid-area: head; }
.workspace-signed-in .workspace-collaborate-slot { grid-area: start; min-width: 0; }
.workspace-signed-in .workspace-join { grid-area: join; min-width: 0; }
/* The collaborate screen is a column here, not a page section: no rule above it, no extra top. */
.workspace-signed-in .collaborate-screen { margin-top: 0; padding-top: 0; border-top: 0; }
.workspace-signed-in .workspace-join .portal { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.15rem; }
.workspace-signed-in .workspace-join h2 { font-size: 1.05rem; margin: 0 0 .15rem; }
.workspace-signed-in .workspace-join .tagline { font-size: .9rem; color: var(--muted); margin: 0 0 .6rem; }

/* A session in progress is the whole screen: the invite field and the second column would be two
   more things to read while the one thing that matters is preparing. */
.workspace-signed-in:has(.in-focus-mode) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "start" "join"; max-width: none; }
.workspace-signed-in:has(.in-focus-mode) .workspace-join { display: none; }

/* The page already says Support once, in the heading. A region title and an empty-state line above
   the one action repeat it and push the action down; both stay in the document for the checks that
   read them, and neither competes with the thing a person came to press. */
.workspace-signed-in #journey-root > .collaboration-region > .collaboration-region-title,
.workspace-signed-in #journey-root > .collaboration-region > .room-empty { display: none; }

@media (max-width: 62rem) {
  .workspace-signed-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "start" "join"; row-gap: .75rem; }
}
.workspace-surface .portal { width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.workspace-surface .collaborate-screen { max-width: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--separator); }
.workspace-surface h1 { font-size: 2rem; letter-spacing: -.035em; }
.workspace-surface .collaboration-region-title { font-size: 1.2rem; font-weight: 600; }
.workspace-surface .placeholder-panel { border-top: 0; padding-top: 0.5rem; }
/* #journey-root is capped at 52rem for its own page, where it is a column of prose. Inside the
   workspace it holds the rooms board, and that cap is what kept the board at 832px on a 1440px
   screen while the window sat empty beside it. */
.workspace-surface #journey-root,
.workspace-surface .placeholder-panel,
.workspace-surface .collaboration-region { max-width: none; }
.workspace-surface .room-empty { border: 0; padding: 0; margin: .75rem 0; border-radius: 0; }
.workspace-surface .meeting-accounts > summary { grid-column: 1 / -1; cursor: pointer; min-height: 44px; padding: .65rem 0; color: var(--muted); font-weight: 500; }
.workspace-surface .meeting-accounts > summary::before { content: "▸"; margin-right: .5rem; }
.workspace-surface .meeting-accounts[open] > summary::before { content: "▾"; }
.workspace-surface .meeting-accounts:not([open]) > :not(summary) { display: none; }
.workspace-surface .meeting-accounts { padding: .25rem 0; }
.workspace-surface .collaboration-more > summary, .workspace-surface .existing-room > summary { font-weight: 500; color: var(--muted); }
.invite-qr-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: start; }
.invite-qr-actions .copy { margin: 0; color: var(--fg); background: transparent; min-height: 44px; padding: .5rem .65rem; font-size: .85rem; }
.room-consent { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: .1rem 0 .5rem; }
.room-consent .remember { margin-top: 0; }
.room-consent .copy { margin: 0; color: var(--fg); background: transparent; min-height: 44px; padding: .5rem .65rem; font-size: .85rem; }
.room-consent .term-err { flex-basis: 100%; margin: 0; }
inetgarden-qr-capture { display: block; flex: 1 1 22rem; min-width: 0; border-radius: 9px; }
.invite-qr-capture-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.invite-qr-drop-hint { color: var(--muted); font-size: .78rem; }
inetgarden-qr-capture.drag-over { outline: 2px solid var(--accent); outline-offset: 4px; background: var(--selected-surface, var(--field-surface)); }
.invite-qr-status { margin: .4rem 0 0; font-size: .82rem; color: var(--muted); }
.invite-qr-status:empty { display: none; }
inetgarden-qr-capture video { display: block; width: min(100%, 24rem); max-height: 16rem; object-fit: contain; margin-top: .65rem; border-radius: 9px; background: #000; }
inetgarden-qr-capture video[hidden] { display: none; }
.invite-qr-header .copy { margin-top: 0; }
.invite-qr-dialog, .room-terminal-confirmation { width: min(28rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.5rem; border: 1px solid var(--separator); border-radius: 18px; background: var(--surface-raised); color: var(--fg); box-shadow: 0 16px 60px #0004; }
.invite-qr-dialog::backdrop, .room-terminal-confirmation::backdrop { background: #0008; }
.invite-qr-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.invite-qr-header h2 { margin: 0; font-size: 1.25rem; }
.invite-qr-dialog p, .room-terminal-confirmation p { font-size: .9rem; line-height: 1.5; }
.invite-qr-code { display: block; width: min(100%, 260px); height: auto; margin: 1.25rem auto; }
.invite-qr-link { overflow-wrap: anywhere; user-select: all; }
.invite-qr-file { position: relative; display: inline-flex; align-items: center; max-width: 14rem; min-width: 0; cursor: pointer; }
.invite-qr-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-qr-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.invite-qr-file:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 40rem) {
  .connection-primary { grid-template-columns: minmax(0, 1fr); }
  .connection-primary > .connect { width: 100%; margin-top: 0; }
  .connect-screen .advanced-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The signed-out hero. Built from Jorge's mockup: a small coloured eyebrow, one large headline, a
   calm subhead, then the three things the product promises. It uses the theme tokens rather than the
   mockup's fixed light palette, so the same markup is the white page in light mode and stays legible
   when the person has chosen dark. */
.landing-hero { max-width: 52rem; }

.landing-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.landing-eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.landing-headline {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

.landing-subhead {
  margin: 0 0 1.5rem;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 32rem;
}

/* The assurances read as one sentence of guarantees, wrapping to a column on a phone rather than
   collapsing into an unreadable run of separators. */
.landing-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--muted);
}
.landing-assurances li { display: flex; align-items: center; gap: 0.75rem; }
/* The separator trails its item rather than leading the next one. When the line wraps -- and at this
   column width it does -- a trailing dot ends a line, where a leading one would start the next line
   with a stray mark. The mockup places them the same way. */
.landing-assurances li:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.landing-assurances li:first-child { color: var(--ok); font-weight: 600; }

@media (max-width: 40rem) {
  .landing-assurances { flex-direction: column; gap: 0.375rem; }
  .landing-assurances li:not(:last-child)::after { display: none; }
}


/* The session preview. The mockup's panel chrome -- a dark rounded card with a quiet title bar, a
   row of people, and a footer of what is shared -- carrying Inetgarden's own surface. It is dark in
   both themes on purpose: a terminal is dark, and the panel is a picture of one. */
.session-preview {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #1e293b;
  background: #020617;
  color: #e2e8f0;
  box-shadow: 0 24px 48px -24px rgb(2 6 23 / 55%);
  font-size: 0.8125rem;
  user-select: none;
}

.session-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: #0b1120;
  border-bottom: 1px solid #1e293b;
  flex-wrap: wrap;
}
.session-preview-seal {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.session-preview-seal::before { content: "\1f512"; font-size: 0.6875rem; color: #34d399; }
.session-preview-sep { color: #334155; font-size: 0.75rem; }
.session-preview-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: #f8fafc;
  font-weight: 600;
}
.session-preview-room {
  color: #94a3b8;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.session-preview-toggle {
  display: inline-flex;
  background: #020617;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid #1e293b;
  margin-left: auto;
}
.session-preview-tab {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.725rem;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}
.session-preview-tab.active {
  background: #2563eb;
  color: #ffffff;
}
.session-preview-latency {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  white-space: nowrap;
}

.session-preview-people {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.875rem;
  background: #080d1a;
  border-bottom: 1px solid #1e293b;
}
.session-preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #1e293b;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.75rem;
}
.session-preview-chip.is-host { border-color: #065f46; color: #a7f3d0; }
.session-preview-chip.is-you.active { border-color: #15803d; }
.session-preview-avatar {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
}
.session-preview-avatar.host { background: #065f46; color: #a7f3d0; }
.session-preview-avatar.guest { background: #1e3a8a; color: #bfdbfe; }
.session-preview-avatar.you { background: #15803d; color: #86efac; }
.session-preview-role-tag {
  font-size: 0.6875rem;
  padding: 1px 4px;
  border-radius: 3px;
  background: #1e293b;
  color: #94a3b8;
}
.session-preview-role-tag.owner { background: #7c2d12; color: #fed7aa; }
.session-preview-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.session-preview-dot.online { background: #34d399; }
.session-preview-dot.idle { background: #94a3b8; }
.session-preview-epoch-group {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.session-preview-epoch-label {
  font-size: 0.725rem;
  color: #86efac;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.session-preview-control-btn {
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid #2563eb;
  color: #60a5fa;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.725rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.session-preview-control-btn:hover { background: rgba(37, 99, 235, 0.35); }

.session-preview-terminal-body {
  padding: 0.875rem 1rem;
  background: #020617;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}
.session-preview-provenance {
  color: #64748b;
  border-left: 2px solid #334155;
  padding-left: 0.65rem;
  margin-bottom: 0.75rem;
  font-size: 0.725rem;
  white-space: pre-line;
}
.session-preview-cmd-line {
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.session-preview-prompt { color: #34d399; font-weight: 600; }
.session-preview-cmd-text { color: #f8fafc; }
.session-preview-author { color: #60a5fa; font-size: 0.725rem; }

.session-preview-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4rem 0 0.75rem;
  font-size: 0.74rem;
  color: #cbd5e1;
}
.session-preview-table th {
  text-align: left;
  color: #64748b;
  font-weight: 600;
  padding: 0.2rem 0.4rem;
  border-bottom: 1px solid #1e293b;
}
.session-preview-table td { padding: 0.25rem 0.4rem; }
.session-preview-table .status-running { color: #34d399; }
.session-preview-table .status-crash { color: #f87171; font-weight: 500; }
.session-preview-table .row-crash td { background: rgba(248, 113, 113, 0.04); }

.session-preview-pre {
  margin: 0.4rem 0 0.75rem;
  padding: 0.5rem 0.65rem;
  background: #090e1a;
  border: 1px solid #1e293b;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 0.725rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
}

.session-preview-diag {
  margin: 0.6rem 0;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: rgba(88, 28, 135, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.35);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: #f3e8ff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.75rem;
  line-height: 1.4;
}
.session-preview-diag-icon { font-size: 1rem; flex-shrink: 0; }
.session-preview-diag-content { flex: 1; }
.session-preview-diag-content strong { color: #e9d5ff; }
.session-preview-diag-content p { margin: 0.2rem 0; color: #d8b4fe; }
.session-preview-diag-btn {
  margin-top: 0.25rem;
  background: #7e22ce;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
  transition: background 0.15s ease;
}
.session-preview-diag-btn:hover { background: #9333ea; }

.session-preview-qc {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid #1e293b;
  flex-wrap: wrap;
}
.session-preview-qc-label {
  color: #64748b;
  font-size: 0.7rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.session-preview-qc-pill {
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.session-preview-qc-pill:hover {
  background: #334155;
  color: #ffffff;
  border-color: #60a5fa;
}

.session-preview-steps {
  margin: 0;
  padding: 1rem 0.875rem;
  list-style: none;
  display: grid;
  gap: 0.625rem;
}
.session-preview-steps li { display: flex; align-items: center; gap: 0.5rem; color: #94a3b8; }
.session-preview-steps li::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid #334155;
  flex: none;
}
.session-preview-steps li.is-done { color: #e2e8f0; }
.session-preview-steps li.is-done::before {
  content: "\2713";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  color: #022c22;
  background: #34d399;
  border-color: #34d399;
}
.session-preview-steps li.is-live { color: #f1f5f9; }
.session-preview-steps li.is-live::before { border-color: #38bdf8; box-shadow: inset 0 0 0 3px #38bdf8; }

.session-preview-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-top: 1px solid #1e293b;
  background: #0f172a;
}
.session-preview-tag {
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  background: #1e293b;
  color: #cbd5e1;
  font-size: 0.75rem;
}
.session-preview-stop { margin-left: auto; color: #fca5a5; font-size: 0.75rem; }


/* ---- The visitor landing, signed out ---- */

/* The sign-in block was a translucent dark card holding translucent white pills: a dark-theme
   drawing that on the light page became a grey slab with three grey buttons. The mockup puts no
   box around its call to action, so neither does this. */
.landing-visitor .connect-auth {
  margin: 0.25rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  gap: 0.625rem;
}
.connect-auth-lead { margin: 0; font-weight: 650; font-size: 1rem; color: var(--fg); }
.landing-visitor .connect-auth-note { font-size: 0.8125rem; }
.landing-visitor .identity-provider-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.625rem;
}
.landing-visitor .identity-provider-actions .identity-provider {
  width: auto;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  transform: none;
}
.landing-visitor .identity-provider-actions .identity-provider:hover {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-color: var(--border);
  transform: none;
}
/* The first choice is the action, in the green the signed-in Start support button already wears. */
.landing-visitor .identity-provider-actions .identity-provider:first-child {
  padding: 0.6rem 1.35rem;
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.28);
}
.landing-visitor .identity-provider-actions .identity-provider:first-child:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--ok) 0%, #059669 100%); }

/* The join path is the second path: the same controls, quieter. */
.landing-join-lead { margin: 0.5rem 0 -0.5rem; font-size: 0.9375rem; color: var(--muted); }
.landing-join-lead strong { color: var(--fg); font-weight: 650; }
.landing-visitor .connection-primary .field input { min-height: 44px; font-size: 0.95rem; box-shadow: none; }
.landing-visitor .connection-primary > .connect { min-height: 44px; min-width: 0; padding-inline: 1.1rem; font-size: 0.9rem; }
.landing-visitor .invite-qr-actions button,
.landing-visitor .invite-qr-actions label.invite-qr-file {
  background: transparent; border: 0; backdrop-filter: none; padding: 0.35rem 0.25rem;
  font-size: 0.85rem; color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em;
}
.landing-visitor .invite-qr-actions button:hover,
.landing-visitor .invite-qr-actions label.invite-qr-file:hover { transform: none; color: var(--fg); background: transparent; }
.landing-visitor .connection-state { font-size: 0.8125rem; }

/* The sidebar repeated the same three sign-in links a few centimetres from the call to action.
   On the landing they are the call to action; twice on one screen weakens both. */
.app-shell:has(.landing-visitor) .sidebar-sign-in { display: none; }

/* A disabled action was a near-black pill on the light page. Tokens, so it is quiet in both themes. */
.connect.disabled, .connect:disabled {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
  border-color: transparent;
}

/* ---- Visitor landing v1, from ui-mock-landing.md ---- */

/* A visitor on the landing gets a top bar, not the application sidebar. The grid loses its first
   column and the sidebar tint; the main column takes the page. */
.app-shell[data-visitor="true"] { grid-template-columns: minmax(0, 1fr); background-image: none; }
/* Every child moves to the single column. A child left in column 2 makes the browser create an
   implicit second track, which silently narrowed the whole page to 1137px of 1440. */
.app-shell[data-visitor="true"] .shell-main { grid-column: 1; width: min(100%, 76rem); padding-top: 1.5rem; }
.app-shell[data-visitor="true"] .shell-foot,
.app-shell[data-visitor="true"] .notification-region { grid-column: 1; }
.visitor-bar {
  grid-column: 1; grid-row: 2; position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 3rem; min-height: 4rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--separator);
}
.visitor-bar .brand { padding: 0.25rem 0; }
.visitor-nav { display: flex; gap: 1.5rem; font-size: 0.9rem; font-weight: 600; }
.visitor-nav a { color: var(--fg); text-decoration: none; opacity: 0.85; }
.visitor-nav a:hover { opacity: 1; color: var(--accent); }
.visitor-actions { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; font-weight: 600; }
.visitor-actions a { color: var(--fg); text-decoration: none; white-space: nowrap; }
.visitor-actions .visitor-start { margin: 0; min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.9rem; }
@media (max-width: 64rem) {
  .visitor-bar { padding: 0.6rem 1rem; gap: 1rem; }
  /* Join a room goes too: the hero's own button is immediately below it, and with the theme
     control added the row no longer fits a phone. */
  .visitor-nav, .visitor-signin, .visitor-join { display: none; }
  .visitor-bar .theme-control select { padding: 0.35rem 1.6rem 0.35rem 0.6rem; font-size: 0.8125rem; }
}

/* The brief's proportions: words at 45%, the room at 55%, top-aligned. */
@media (min-width: 62rem) {
  .hero-split-layout:has(> .session-preview) { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 3rem; }
  .hero-split-layout:has(> .session-preview) > .session-preview { margin-top: 2.25rem; }
}
.landing-start { margin: 0; min-height: 48px; padding: 0.75rem 1.6rem; font-size: 1rem; }
.landing-visitor .identity-provider-actions { gap: 0.25rem 1rem; }
.landing-visitor .identity-provider-actions .identity-provider,
.landing-visitor .identity-provider-actions .identity-provider:first-child {
  min-height: 0; padding: 0.15rem 0; border: 0; background: transparent; box-shadow: none;
  color: var(--muted); font-weight: 500; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 0.2em;
}
.landing-visitor .identity-provider-actions .identity-provider:hover { color: var(--fg); background: transparent; filter: none; }

/* The room panel: a title, the people, three surfaces, and a footer that names the call's provider. */
.session-preview-bar > div { display: grid; gap: 0.125rem; }
.session-preview-title { font-weight: 650; color: #f1f5f9; font-size: 0.9375rem; }
.session-preview-sub { color: #94a3b8; font-size: 0.75rem; }
.session-preview-chip strong { color: #f1f5f9; font-weight: 650; }
.session-preview-tabs { display: flex; gap: 0.25rem; padding: 0.5rem 0.875rem 0; border-bottom: 1px solid #1e293b; }
.session-preview-tab {
  min-height: 36px; padding: 0.4rem 0.8rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: #94a3b8; font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.session-preview-tab.is-active { color: #f1f5f9; border-bottom-color: #34d399; }
.session-preview-body { display: grid; gap: 0.75rem; padding: 0.875rem; }
.session-preview-control {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.625rem 0.75rem; border: 1px solid #1e293b; border-radius: 0.625rem; background: #0f172a;
}
.session-preview-control > div { display: grid; gap: 0.125rem; }
.session-preview-control strong { color: #f1f5f9; font-size: 0.875rem; }
.session-preview-control-hint { color: #94a3b8; font-size: 0.75rem; }
.session-preview-control-btn {
  min-height: 36px; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid #334155;
  background: transparent; color: #e2e8f0; font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.session-preview-control-btn:hover { border-color: #64748b; }
.session-preview-source {
  display: inline-block; margin-bottom: 0.375rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #64748b;
}
.session-preview-remote { padding: 0.625rem 0.75rem; border: 1px solid #1e293b; border-radius: 0.625rem; background: #020617; }
.session-preview-pre {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; line-height: 1.5;
  color: #cbd5e1; white-space: pre; overflow-x: auto;
}
.session-preview-files { padding: 0.875rem; }
.session-preview-files ul { margin: 0 0 0.5rem; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.session-preview-files li {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.625rem; border-radius: 0.5rem;
  background: #0f172a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: #e2e8f0;
}
.session-preview-files li span { color: #94a3b8; }
.session-preview-files p, .session-preview-note { margin: 0; color: #94a3b8; font-size: 0.75rem; }
.session-preview-external { color: #cbd5e1; font-size: 0.75rem; }
.session-preview-stop {
  margin-left: auto; padding: 0; border: 0; background: transparent; color: #fca5a5; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.session-preview { position: relative; }
.session-preview-dialog {
  position: absolute; inset: auto 0.875rem 0.875rem; padding: 0.875rem; display: grid; gap: 0.5rem;
  border: 1px solid #334155; border-radius: 0.75rem; background: #0f172a; box-shadow: 0 16px 40px -12px rgb(2 6 23 / 80%);
}
.session-preview-dialog strong { color: #f1f5f9; }
.session-preview-dialog p { margin: 0; color: #cbd5e1; font-size: 0.8125rem; }
.session-preview-dialog > div { display: flex; gap: 0.5rem; justify-content: flex-end; }
.session-preview-dialog .copy { min-height: 36px; padding: 0.4rem 0.9rem; font-size: 0.8125rem; }
.session-preview-stop.is-confirm { margin: 0; min-height: 36px; padding: 0.4rem 0.9rem; border-radius: 999px; background: #c0392b; color: #fff; }

/* The sections after the hero. Anchors sit below the sticky bar. */
.landing-sections { display: grid; gap: 3.5rem; margin: 3.5rem 0 2rem; }
.landing-section { scroll-margin-top: 5rem; max-width: 52rem; }
.landing-section h2 { margin: 0 0 1rem; font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; }
.landing-section p { color: var(--muted); max-width: 40rem; }
.landing-final { padding: 2rem 0 0; border-top: 1px solid var(--separator); }
.landing-final > div { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.landing-final .connect { margin: 0; }
#join { scroll-margin-top: 5rem; }

/* A grid item's default min-width is its content's width, so the preformatted remote output was
   pushing the whole card past its column and the card's own overflow:hidden then clipped the
   button and the table's last column. Every box between the column and the <pre> may shrink; the
   <pre> alone scrolls. */
.hero-split-layout > * { min-width: 0; }
.session-preview, .session-preview-body, .session-preview-remote, .session-preview-control, .session-preview-control > div { min-width: 0; }
.session-preview-control-hint { white-space: normal; }
.session-preview-remote { overflow-x: auto; }
/* One button, its own width, as the brief draws it. The sign-in block is a grid, which stretches
   its items unless told otherwise. */
.landing-visitor .connect-auth { justify-items: start; }
.landing-start { width: max-content; max-width: 100%; }

/* On a phone the one action takes the width, as the brief draws the narrow layout. */
@media (max-width: 40rem) { .landing-start { width: 100%; } }

/* Plus Jakarta Sans, served from this origin. The mockup loads it and Cabinet Grotesk from Google
   Fonts; the landing test forbids any cross-origin request, and Cabinet Grotesk is not an open font
   in any case. This is one variable file covering 400-800, so the display weight costs no second
   download. Provenance, licence and hashes: third_party/web-fonts.VENDORED.md. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ======================================================================
   The mockup's visual system, on the visitor landing
   ======================================================================
   Taken from mockmock-main: slate neutrals, a blue-600 primary, emerald kept
   for status only, and a dark slate-950 product surface on a bright page. The
   brief asks for exactly that split ("blue primary actions, restrained green
   status accents"), so green stops being the action colour here and becomes the
   colour of a promise being kept.

   Scoped to [data-visitor="true"]. The signed-in product keeps Inetgarden's
   green brand: this is a landing-page brief, and restyling every button behind
   the sign-in would be a different decision than the one asked for.

   Tailwind's palette, written out because there is no Tailwind here:
     slate  200 #e2e8f0  300 #cbd5e1  400 #94a3b8  500 #64748b  600 #475569
            700 #334155  800 #1e293b  900 #0f172a  950 #020617
     blue   400 #60a5fa  500 #3b82f6  600 #2563eb  700 #1d4ed8
     emerald 400 #34d399  600 #059669

   No webfonts: the landing test asserts zero cross-origin requests, and nothing
   is self-hosted. Plus Jakarta Sans and Cabinet Grotesk are therefore taken as a
   treatment -- heavier display weights, tighter tracking, balanced wrapping --
   rather than as files. */

/* ---- The warm palette, declared once ---------------------------------------------------------
   Cream paper, terracotta for action, near-black ink, and colour used only where it means
   something. Both surfaces that wear it -- the rooms board and the signed-out landing -- read
   these tokens rather than carrying their own copies, because two copies of a palette are two
   palettes as soon as one of them is edited.

   Dark is the default here, matching the rest of the visitor styles; the two light blocks below
   are the pair this file already uses everywhere for an appearance switch. */
:root {
  --w-paper: #14161a;
  --w-sidebar: #101216;
  --w-sidebar-line: #232831;
  --w-card: #1b1f26;
  --w-raised: #232831;
  --w-line: #2b313b;
  --w-line-soft: #232831;
  --w-line-strong: #3a4250;
  --w-ink: #f2ede4;
  --w-ink-2: #c3bcb0;
  --w-ink-3: #9a9285;
  --w-ink-4: #7d7669;
  --w-accent: #d9865a;
  --w-accent-hover: #e89a70;
  --w-accent-fg: #1b1005;
  --w-accent-soft: #2a1f19;
  --w-deep: #e9e3d8;
  --w-deep-fg: #14161a;
  --w-live: #5cc47e;
  --w-live-soft: #16241b;
  --w-wait: #d9a441;
  --w-wait-soft: #251d10;
}
:root[data-theme="light"] {
  --w-paper: #f6f1e7;
  --w-sidebar: #efe8da;
  --w-sidebar-line: #e0d6c3;
  --w-card: #ffffff;
  --w-raised: #faf6ee;
  --w-line: #e6ddcc;
  --w-line-soft: #efe8db;
  --w-line-strong: #d6cab3;
  --w-ink: #17212e;
  --w-ink-2: #34404f;
  --w-ink-3: #6f6759;
  --w-ink-4: #8b8375;
  --w-accent: #a85426;
  --w-accent-hover: #8d431c;
  --w-accent-fg: #ffffff;
  --w-accent-soft: #f7ede6;
  --w-deep: #1e2b3a;
  --w-deep-fg: #f6f1e7;
  --w-live: #3f8f5f;
  --w-live-soft: #e7f3eb;
  --w-wait: #b8761f;
  --w-wait-soft: #fbf1e0;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]), :root[data-theme="system"] {
    --w-paper: #f6f1e7;
    --w-sidebar: #efe8da;
    --w-sidebar-line: #e0d6c3;
    --w-card: #ffffff;
    --w-raised: #faf6ee;
    --w-line: #e6ddcc;
    --w-line-soft: #efe8db;
    --w-line-strong: #d6cab3;
    --w-ink: #17212e;
    --w-ink-2: #34404f;
    --w-ink-3: #6f6759;
    --w-ink-4: #8b8375;
    --w-accent: #a85426;
    --w-accent-hover: #8d431c;
    --w-accent-fg: #ffffff;
    --w-accent-soft: #f7ede6;
    --w-deep: #1e2b3a;
    --w-deep-fg: #f6f1e7;
    --w-live: #3f8f5f;
    --w-live-soft: #e7f3eb;
    --w-wait: #b8761f;
    --w-wait-soft: #fbf1e0;
  }
}

.app-shell[data-visitor="true"] {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The landing wears the same palette as the rooms board. It used to carry its own blue-on-slate
     set, declared three times over for the three appearances; all of that is now one declaration
     above, and this block only says which of its names each surface token takes. */
  --ig-primary: var(--w-accent);
  --ig-primary-hover: var(--w-accent-hover);
  --ig-primary-fg: var(--w-accent-fg);
  --ig-status: var(--w-live);
  --ig-panel: var(--w-paper);
  --ig-panel-raised: var(--w-card);
  --ig-panel-line: var(--w-line);
  --bg: var(--w-paper);
  --card: var(--w-card);
  --fg: var(--w-ink);
  --muted: var(--w-ink-3);
  --border: var(--w-line);
  --separator: var(--w-line);
  --field-surface: var(--w-card);
  /* Landing surfaces and inks. Every panel below the hero is written against these rather than
     against a hex, so the one set of rules serves both appearances. */
  --ld-surface: var(--w-card);
  --ld-surface-2: var(--w-raised);
  --ld-surface-3: var(--w-line-soft);
  --ld-line: var(--w-line);
  --ld-line-soft: var(--w-line-soft);
  --ld-line-strong: var(--w-line-strong);
  --ld-ink: var(--w-ink);
  --ld-ink-2: var(--w-ink-2);
  --ld-ink-3: var(--w-ink-3);
  --ld-ink-4: var(--w-ink-4);
}

/* The hero's faint blue wash, then white. The mockup's from-blue-50/50 via-white. */
.app-shell[data-visitor="true"] {
  background-color: var(--bg);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--ig-primary) 7%, transparent) 0%, transparent 34rem);
}

/* Type. The display face is carried by weight and tracking rather than a font file. */
.app-shell[data-visitor="true"] .landing-headline {
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.06;
  font-size: clamp(2.125rem, 4.4vw, 3rem);
}
.app-shell[data-visitor="true"] .landing-section h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.app-shell[data-visitor="true"] .landing-subhead {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
}
/* The kicker: blue words, an emerald dot. Status is the only thing that is green. */
.app-shell[data-visitor="true"] .landing-eyebrow { color: var(--ig-primary); letter-spacing: 0.09em; }
.app-shell[data-visitor="true"] .landing-eyebrow::before { background: var(--ig-status); }

/* One primary action, in the mockup's blue, with its softer corner and lifted shadow. */
.app-shell[data-visitor="true"] .connect {
  background: var(--ig-primary);
  color: var(--ig-primary-fg);
  border: 0;
  border-radius: 0.625rem;
  box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--ig-primary) 45%, transparent);
  letter-spacing: -0.01em;
}
.app-shell[data-visitor="true"] .connect:hover:not(:disabled) {
  background: var(--ig-primary-hover);
  filter: none;
  box-shadow: 0 6px 20px -2px color-mix(in srgb, var(--ig-primary) 55%, transparent);
}
.app-shell[data-visitor="true"] .connect:disabled,
.app-shell[data-visitor="true"] .connect.disabled {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
  box-shadow: none;
}
.app-shell[data-visitor="true"] .visitor-nav a:hover,
.app-shell[data-visitor="true"] .landing-section a.copy { color: var(--ig-primary); }

/* Green survives as the colour of the promise, not of the button. */
.app-shell[data-visitor="true"] .landing-assurances li:first-child { color: var(--ig-status); }

/* Cards: slate-200 hairlines and a shadow you notice only by its absence. */
.app-shell[data-visitor="true"] .visitor-bar {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color: var(--border);
}
.app-shell[data-visitor="true"] .connection-primary .field input {
  border-radius: 0.625rem;
  border-color: var(--border);
  box-shadow: none;
}
.app-shell[data-visitor="true"] .connection-primary .field input:focus {
  border-color: var(--ig-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ig-primary) 22%, transparent);
}

/* The product surface keeps its own dark palette in both appearances, as the mockup does:
   a dark panel is what makes a bright marketing page read as a product page. Its active
   surface tab moves to blue so the panel agrees with the page about which colour means
   "this is the thing selected". */
.app-shell[data-visitor="true"] .session-preview-tab.is-active { border-bottom-color: var(--ig-primary); }
.app-shell[data-visitor="true"] .session-preview-control-btn:hover { border-color: var(--ig-primary); color: #ffffff; }
.app-shell[data-visitor="true"] .session-preview {
  box-shadow: 0 28px 56px -28px rgb(2 6 23 / 55%), 0 0 0 1px rgb(255 255 255 / 10%);
}
:root[data-theme="light"] .app-shell[data-visitor="true"] .session-preview,
:root:not([data-theme]) .app-shell[data-visitor="true"] .session-preview {
  box-shadow: 0 28px 56px -28px rgb(2 6 23 / 40%), 0 0 0 1px rgb(2 6 23 / 8%);
}

/* ---- The sections the mockup carries, in Inetgarden's terms ---- */

/* Some sections want the page's width rather than a reading measure. */
.landing-section-wide { max-width: none; }


/* What changes. A table, because it is one: two named alternatives per row. */
.landing-shift { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.landing-shift th, .landing-shift td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; }
.landing-shift thead th { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.landing-shift tbody tr { border-top: 1px solid var(--separator); }
.landing-shift tbody th { font-weight: 650; width: 11rem; }
.landing-shift td { color: var(--muted); }
.landing-shift td.is-ours { color: var(--fg); font-weight: 550; }
@media (max-width: 48rem) {
  .landing-shift, .landing-shift tbody, .landing-shift tr, .landing-shift th, .landing-shift td { display: block; width: auto; }
  .landing-shift thead { display: none; }
  .landing-shift tbody tr { padding: 0.75rem 0; }
  .landing-shift tbody th { padding: 0 0 0.2rem; }
  .landing-shift td { padding: 0.1rem 0; }
  .landing-shift td.is-ours::before { content: "\2192\00a0"; color: var(--accent); }
}

/* Plan cards: the mockup's composition, the catalog's numbers. */
.landing-plans {
  margin: 1.75rem 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
  align-items: stretch;
}
.landing-plan {
  position: relative; display: grid; align-content: start; gap: 0;
  padding: 1.75rem 1.5rem; border-radius: 1rem;
  border: 1px solid var(--ld-line); background: var(--ld-surface);
}
/* The one card that is lifted, the way a pricing table lifts one. */
.landing-plan.is-featured {
  border-color: var(--ig-primary); border-width: 2px; padding: 1.7rem 1.45rem;
  box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--ig-primary) 55%, transparent);
}
.landing-plan-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 0.3rem 0.85rem; border-radius: 999px; white-space: nowrap;
  background: var(--ig-primary); color: var(--ig-primary-fg);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.landing-plan h3 {
  margin: 0; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ld-ink-3); font-weight: 700;
}
.landing-plan.is-featured h3 { color: var(--ig-primary); }
/* The amount carries the weight; the interval sits on its baseline, small. */
.landing-plan-price {
  margin: 0.6rem 0 0 !important; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
}
.landing-plan-price strong {
  font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ld-ink);
}
.landing-plan-price span { font-size: 0.875rem; color: var(--ld-ink-3); }
.landing-plan-audience {
  margin: 0.75rem 0 0 !important; font-size: 0.875rem; color: var(--ld-ink-3); line-height: 1.5;
}
.landing-plan-features {
  margin: 1.25rem 0 0; padding: 1.25rem 0 0; list-style: none; display: grid; gap: 0.6rem;
  font-size: 0.875rem; color: var(--ld-ink-2); border-top: 1px solid var(--ld-line);
}
.landing-plan-features li { display: flex; gap: 0.6rem; line-height: 1.4; }
.landing-plan-features li::before { content: "\2713"; color: var(--ig-status); flex: none; font-weight: 700; }
/* The button sits on the floor of the card, so three cards of different lengths still line up. */
.landing-plan { grid-template-rows: auto auto auto 1fr auto; }
.landing-plan-cta {
  margin-top: 1.5rem; justify-content: center; width: 100%; min-height: 48px; text-decoration: none;
}
.landing-plan-cta:hover { text-decoration: none; }
@media (max-width: 60rem) {
  .landing-plans { grid-template-columns: minmax(0, 1fr); }
  .landing-plan.is-featured { margin-top: 0.75rem; }
}
.landing-plans-fallback { font-size: 0.9375rem; }

/* In the mockup's system the cards sit on hairlines with a shadow you notice by its absence. */
.app-shell[data-visitor="true"] .landing-plan { box-shadow: 0 1px 2px rgb(15 23 42 / 6%); }
.app-shell[data-visitor="true"] .landing-plan-features li::before,
.app-shell[data-visitor="true"] .landing-shift td.is-ours::before { color: var(--ig-status); }


/* ---- The brand's own surface treatment ----
   Inetgarden App UI Assets, page 3 "Backgrounds": a soft radial wash, a quarter-circle arc and a
   dotted field. Drawn in CSS rather than shipped as the PNG, so it costs nothing and follows the
   theme. The mockup contributed the palette; this is the part that was Inetgarden's already. */
.app-shell[data-visitor="true"] {
  background-image:
    radial-gradient(60rem 32rem at 82% -8%, color-mix(in srgb, var(--ig-primary) 13%, transparent), transparent 70%),
    radial-gradient(44rem 26rem at 6% 4%, color-mix(in srgb, var(--ig-status) 9%, transparent), transparent 68%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ig-primary) 6%, transparent) 0%, transparent 36rem);
  background-repeat: no-repeat;
}
/* The dotted field, top left, as the sheet places it. */
.app-shell[data-visitor="true"] .shell-main { position: relative; }
.app-shell[data-visitor="true"] .shell-main::before {
  content: ""; position: absolute; top: 1.5rem; left: 1.5rem; width: 7rem; height: 4.5rem;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 14px 14px; color: var(--muted); opacity: 0.28; pointer-events: none;
}
@media (max-width: 62rem) { .app-shell[data-visitor="true"] .shell-main::before { display: none; } }

/* ---- The session, stage by stage ---- */
.landing-walk-section { position: relative; }
.landing-walk-section > .landing-eyebrow { margin-bottom: 0.5rem; }
.landing-walk {
  margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 1.25rem;
  background:
    radial-gradient(38rem 20rem at 100% 0%, color-mix(in srgb, var(--ig-primary) 10%, transparent), transparent 70%),
    var(--card);
}
.landing-walk-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.landing-walk-step {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px;
  padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 0.625rem;
  background: transparent; color: var(--muted); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.landing-walk-step:hover { color: var(--fg); }
.landing-walk-num {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--muted) 18%, transparent); font-size: 0.75rem; font-weight: 700;
}
.landing-walk-step.is-done { color: var(--fg); }
.landing-walk-step.is-done .landing-walk-num { background: color-mix(in srgb, var(--ig-status) 22%, transparent); color: var(--ig-status); }
.landing-walk-step.is-active { color: var(--ig-primary-fg); background: var(--ig-primary); border-color: transparent; }
.landing-walk-step.is-active .landing-walk-num { background: rgb(255 255 255 / 25%); color: inherit; }

.landing-walk-screens { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.landing-screen {
  display: flex; flex-direction: column; min-height: 17rem; min-width: 0;
  border: 1px solid var(--border); border-radius: 0.875rem; background: var(--bg); overflow: hidden;
}
.landing-screen-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--separator);
  background: color-mix(in srgb, var(--muted) 7%, transparent); font-size: 0.75rem;
}
.landing-screen-who { font-weight: 650; color: var(--fg); }
.landing-screen-url { font-family: var(--mono); color: var(--muted); }
.landing-screen-body {
  flex: 1; display: grid; gap: 0.5rem; justify-items: start; align-content: center;
  padding: 1.25rem; text-align: left;
}
.landing-screen-body strong { font-size: 1.0625rem; }
.landing-screen-body p { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.landing-glyph { width: 2.25rem; height: 2.25rem; color: var(--ig-primary); }
.landing-screen-btn {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0.45rem 1rem;
  border-radius: 0.625rem; background: var(--ig-primary); color: var(--ig-primary-fg);
  font-size: 0.875rem; font-weight: 700;
}
.landing-screen-btn.is-small { min-height: 32px; padding: 0.3rem 0.7rem; font-size: 0.8125rem; }
.landing-screen-note { font-size: 0.8125rem !important; }
.landing-screen-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.875rem; }
.landing-screen-list li { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.landing-screen-list li::before {
  content: ""; width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 1px solid var(--border); flex: none;
}
.landing-screen-list li.is-done { color: var(--fg); }
.landing-screen-list li.is-done::before {
  content: "\2713"; display: grid; place-items: center; font-size: 0.6rem;
  background: var(--ig-status); border-color: var(--ig-status); color: var(--bg);
}
.landing-screen-list li.is-live::before { border-color: var(--ig-primary); box-shadow: inset 0 0 0 3px var(--ig-primary); }
.landing-screen-link {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; width: 100%;
  padding: 0.4rem 0.4rem 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 0.625rem;
  background: var(--field-surface);
}
.landing-screen-linktext { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; min-width: 0; }
.landing-screen-pre {
  margin: 0; width: 100%; padding: 0.6rem 0.7rem; border-radius: 0.5rem;
  background: color-mix(in srgb, var(--w-ink) 92%, #000);
  color: #cbd5e1; font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; white-space: pre; overflow-x: auto;
}

/* Each screen closes with a status line, as a real one does: what is being shared on the left, and
   on the right the thing the reader is most likely to be wondering. */
.landing-screen-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.8rem; border-top: 1px solid var(--separator);
  background: color-mix(in srgb, var(--muted) 5%, transparent);
  font-family: var(--mono); font-size: 0.6875rem; color: var(--muted);
}
.landing-screen-btn.is-stop { background: transparent; border: 1px solid var(--border); color: #c0392b; font-weight: 600; }
.landing-walk-section .landing-section-lead { max-width: 46rem; }

/* The use-case panel. A dark slab on the bright page, copy left and the stats right, as sent.
   It stays dark in both appearances for the same reason the session panel does: it is the part of
   the page that is about the product rather than about the page. */
.landing-usecase {
  display: grid; gap: 2rem; padding: 2.25rem; border-radius: 1.25rem;
  background:
    radial-gradient(40rem 22rem at 100% 0%, color-mix(in srgb, var(--ig-primary) 16%, transparent), transparent 70%),
    var(--ld-surface);
  color: var(--ld-ink-2); border: 1px solid var(--ld-line);
}
@media (min-width: 62rem) {
  .landing-usecase { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
}
.landing-usecase-copy > .landing-eyebrow { color: var(--ig-primary); margin-bottom: 0.75rem; }
.landing-usecase-copy > .landing-eyebrow::before { background: #34d399; }
.landing-usecase h2 { margin: 0 0 0.9rem; color: var(--ld-ink); font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: 800; letter-spacing: -0.028em; line-height: 1.12; }
.landing-usecase p { margin: 0; color: var(--ld-ink-3); line-height: 1.6; }
/* Two paragraphs make the turn from the problem to the answer; without space between them the
   turn is invisible and they read as one block. */
.landing-usecase-copy p + p { margin-top: 0.9rem; }
.landing-usecase-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.landing-usecase-actions .connect { margin: 0; }
.landing-usecase-note { color: var(--ld-ink-4); font-size: 0.875rem; }
.landing-usecase-stats { display: grid; gap: 0.75rem; align-content: start; }
.landing-usecase-statlabel {
  margin: 0 !important; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ld-ink-4) !important;
}
.landing-stat { padding: 1.1rem 1.25rem; border-radius: 0.875rem; background: var(--ld-surface-2); border: 1px solid var(--ld-line); }
.landing-stat-figure { display: block; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ig-status); line-height: 1.05; }
.landing-stat p { margin-top: 0.35rem !important; font-size: 0.875rem; }
.landing-stat.is-list strong { color: var(--ld-ink); font-size: 0.9375rem; }
.landing-stat.is-list ul { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; font-size: 0.875rem; color: var(--ld-ink-3); }
.landing-stat.is-list li { display: flex; gap: 0.5rem; }
.landing-stat.is-list li::before { content: "\2713"; color: var(--ig-status); flex: none; }

/* ---- How it works, in the mockup's own treatment ----
   The reference screens are dark in both appearances, because the panes are a picture of software
   rather than part of the page. Step pills are monospace and numbered, the active one solid blue,
   a finished one marked with a green check. Pane bodies are centred under a tinted icon tile. */
.landing-walk {
  padding: 1.5rem;
  border: 1px solid var(--ld-line);
  background:
    radial-gradient(42rem 22rem at 100% 0%, color-mix(in srgb, var(--ig-primary) 12%, transparent), transparent 70%),
    var(--ld-surface);
}
.landing-walk-steps { gap: 0.625rem; margin-bottom: 1.5rem; }
.landing-walk-step {
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.01em;
  min-height: 44px; padding: 0.5rem 1rem; border-radius: 0.5rem;
  border-color: var(--ld-line); background: var(--ld-surface-3); color: var(--ld-ink-3);
}
.landing-walk-step:hover { color: var(--ld-ink-2); border-color: var(--ld-line-strong); }
.landing-walk-step .landing-walk-num {
  display: inline; background: none; width: auto; height: auto; border-radius: 0;
  font-family: inherit; font-weight: 500; color: inherit;
}
.landing-walk-step .landing-walk-num::after { content: "."; }
.landing-walk-step.is-done {
  color: var(--ig-status);
  border-color: color-mix(in srgb, #34d399 34%, var(--ld-line));
  background: color-mix(in srgb, #34d399 11%, var(--ld-surface));
}
.landing-walk-step.is-done::after { content: "\2713"; margin-left: 0.35rem; color: #34d399; }
.landing-walk-step.is-active {
  background: var(--ig-primary); border-color: var(--ig-primary); color: var(--ig-primary-fg); font-weight: 600;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--ig-primary) 60%, transparent);
}

.landing-screen {
  border-color: var(--ld-line); background: var(--ld-surface-2); color: var(--ld-ink-2);
  box-shadow: 0 10px 30px -18px rgb(2 6 23 / 80%);
}
.landing-screen-bar { background: transparent; border-bottom-color: var(--ld-line-soft); padding: 0.7rem 1rem; }
.landing-screen-who { color: var(--ld-ink); }
.landing-screen-url { color: var(--ld-ink-4); }
/* Centred, as the reference draws it: the pane is a screenshot, not a column of prose. */
.landing-screen-body { justify-items: center; text-align: center; gap: 0.6rem; padding: 1.75rem 1.25rem; }
.landing-screen-body strong { color: var(--ld-ink); }
.landing-screen-body p { color: var(--ld-ink-3); }
.landing-screen-list { justify-self: center; text-align: left; }
.landing-screen-list li { color: var(--ld-ink-3); }
.landing-screen-list li.is-done { color: var(--ld-ink-2); }
.landing-screen-list li::before { border-color: #334155; }
.landing-screen-list li.is-done::before { background: #34d399; border-color: #34d399; color: #04170f; }
.landing-screen-foot {
  background: transparent; border-top-color: var(--ld-line-soft); color: var(--ld-ink-4); padding: 0.65rem 1rem;
}
.landing-screen-link { background: var(--ld-surface-2); border-color: var(--ld-line); width: auto; max-width: 100%; }
.landing-screen-linktext { color: var(--ld-ink-3); }
.landing-screen-btn { box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--ig-primary) 55%, transparent); }
.landing-screen-btn.is-stop { border-color: #3f1d21; background: #1b1113; color: #fca5a5; box-shadow: none; }

/* The icon tile: a rounded square, tinted to the thing it stands for, holding the brand glyph. */
.landing-tile {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 0.875rem;
  background: color-mix(in srgb, var(--ig-primary) 16%, transparent); color: var(--ig-primary);
}
.landing-tile.is-gear { background: rgb(245 158 11 / 16%); color: #fbbf24; }
.landing-tile.is-avatar { background: rgb(148 163 184 / 14%); color: var(--ld-ink-3); }
.landing-tile .landing-glyph { width: 1.75rem; height: 1.75rem; color: inherit; }

/* ---- The walkthrough holds still ----
   The stages were a wrapping flex row, so the moment a stage finished and grew a checkmark the
   pills reflowed onto two lines and the panes below changed height. A fixed five-column track and
   a reserved slot for the mark mean pressing a stage changes the contents and nothing else. */
.landing-walk-steps {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
}
.landing-walk-step { justify-content: center; text-align: center; }
/* Always present, so the label does not shift sideways when the stage is marked done. */
.landing-walk-step::after {
  content: "\2713"; margin-left: 0.35rem; color: #34d399; visibility: hidden; flex: none;
}
.landing-walk-step.is-done::after { visibility: visible; }
/* The floor is the tallest stage (22.1rem at every width down to the breakpoint below), with a
   little headroom, so the panes keep one height instead of settling to whatever the stage holds. */
.landing-walk-screens { align-items: stretch; min-height: 23rem; }
.landing-walk .landing-screen { min-height: 0; }
@media (max-width: 52rem) {
  .landing-walk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-walk-screens { min-height: 0; }
}

/* ---- Two ways in, and they are not equal ----
   Someone who needs help creates the room; the expert they invited joins one. So the page offers
   one filled button and one quiet link, rather than a text field competing with the button. */
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.landing-join-action {
  min-height: 48px; padding: 0.75rem 1.25rem; font-size: 0.9375rem; text-decoration: none;
}
.landing-join-action:hover { text-decoration: none; }

/* ---- Connection topology ----
   Four parties on one line: the expert outside, Inetgarden between, the person being helped, and
   the organisation they are already inside. The colours carry the meaning - violet for outside,
   blue for the carrier, green for the computer the session lands on, amber for the boundary the
   expert never crosses. */
.landing-topo {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr) 4.5rem minmax(0, 0.8fr) 4.5rem minmax(0, 1.05fr) 5rem minmax(0, 1.5fr);
  align-items: stretch; gap: 0.4rem; margin-top: 1.75rem;
}
.landing-topo-node,
.landing-topo-cloud,
.landing-topo-org {
  display: grid; align-content: start; gap: 0.2rem; min-width: 0;
  padding: 1rem 1.1rem; border-radius: 0.875rem;
  border: 1px solid var(--border); background: var(--ld-surface-2);
}
.landing-topo-node strong,
.landing-topo-cloud strong { font-size: 1rem; letter-spacing: -0.01em; color: var(--ld-ink); }
.landing-topo-sub { font-size: 0.6875rem; font-family: var(--mono); color: var(--ld-ink-4); line-height: 1.35; }
.landing-topo-node ul {
  margin: 0.7rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem;
  font-size: 0.8125rem; color: var(--ld-ink-3);
}
.landing-topo-node li { display: flex; gap: 0.45rem; line-height: 1.35; }
.landing-topo-node li::before { content: "\2022"; flex: none; }
.landing-topo-glyph {
  width: 2rem; height: 2rem; border-radius: 0.5rem; margin-bottom: 0.35rem;
  display: grid; place-items: center;
}
/* A laptop, drawn rather than fetched: a lid and a base. */
.landing-topo-glyph::before {
  content: ""; width: 1.05rem; height: 0.7rem;
  border: 1.5px solid currentColor; border-radius: 0.15rem; border-bottom-width: 3px;
}
.landing-topo-node.is-expert {
  border-color: color-mix(in srgb, #a78bfa 34%, var(--ld-line));
  background: color-mix(in srgb, #a78bfa 10%, var(--ld-surface));
}
.landing-topo-node.is-expert .landing-topo-glyph { background: rgb(167 139 250 / 16%); color: #a78bfa; }
.landing-topo-node.is-expert li::before { color: #a78bfa; }
.landing-topo-node.is-user {
  border-color: color-mix(in srgb, #34d399 34%, var(--ld-line));
  background: color-mix(in srgb, #34d399 10%, var(--ld-surface));
}
.landing-topo-node.is-user .landing-topo-glyph { background: rgb(52 211 153 / 16%); color: #34d399; }
.landing-topo-node.is-user li::before { color: #34d399; }

.landing-topo-cloud {
  align-content: center; justify-items: center; text-align: center;
  border-color: var(--ig-primary); border-radius: 2.5rem;
  background:
    radial-gradient(12rem 8rem at 50% 0%, color-mix(in srgb, var(--ig-primary) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--ig-primary) 12%, var(--ld-surface));
}
.landing-topo-cloud { align-self: center; padding: 1.4rem 1.1rem; }
.landing-topo-cloud strong { color: var(--ld-ink); }
.landing-topo-cloud .landing-topo-sub { color: color-mix(in srgb, var(--ig-primary) 62%, var(--ld-ink-3)); }

/* The connectors. Two-way to Inetgarden, one-way into the organisation. */
.landing-topo-arrow {
  display: grid; align-content: center; justify-items: center; gap: 0.3rem; min-width: 0;
}
.landing-topo-arrow::before {
  content: "\2194"; font-size: 1.125rem; line-height: 1; color: var(--ig-primary);
}
.landing-topo-arrow.is-one-way::before { content: "\2192"; color: #34d399; }
.landing-topo-arrow span {
  font-size: 0.625rem; font-family: var(--mono); color: var(--ld-ink-4); text-align: center; line-height: 1.25;
}

/* The boundary the expert never crosses, dashed the way the drawing has it. */
.landing-topo-org {
  border: 1px dashed color-mix(in srgb, #f59e0b 55%, var(--ld-line));
  background: color-mix(in srgb, #f59e0b 8%, var(--ld-surface));
}
.landing-topo-orgname { margin: 0 !important; font-size: 1rem; font-weight: 700; color: color-mix(in srgb, #f59e0b 72%, var(--ld-ink)); }
.landing-topo-org > .landing-topo-sub { color: color-mix(in srgb, #f59e0b 55%, var(--ld-ink-4)); }
.landing-topo-orgbody {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem;
  margin-top: 0.8rem;
}
.landing-topo-bastion {
  display: grid; justify-items: center; text-align: center; gap: 0.1rem;
  padding: 0.7rem 0.6rem; border-radius: 0.625rem;
  border: 1px solid color-mix(in srgb, #a78bfa 40%, var(--ld-line));
  background: color-mix(in srgb, #a78bfa 13%, var(--ld-surface)); color: #7c3aed;
}
.landing-topo-bastion strong { font-size: 0.8125rem; color: color-mix(in srgb, #a78bfa 60%, var(--ld-ink)); }
.landing-topo-bastion span { font-size: 0.625rem; font-family: var(--mono); color: color-mix(in srgb, #a78bfa 45%, var(--ld-ink-4)); }
.landing-topo-resources {
  margin: 0; padding: 0 0 0 0.9rem; list-style: none; display: grid; gap: 0.35rem; min-width: 0;
  position: relative;
}
.landing-topo-resources::before {
  content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; border-left: 1px solid #4c1d95;
}
.landing-topo-resources li::before {
  content: ""; position: absolute; left: -0.9rem; top: 50%; width: 0.9rem; border-top: 1px solid #4c1d95;
}
.landing-topo-resources li {
  position: relative; display: grid; gap: 0.05rem; padding: 0.4rem 0.6rem; border-radius: 0.5rem;
  border: 1px solid var(--border); background: var(--ld-surface-2); border-left-width: 3px;
}
.landing-topo-resources strong { font-size: 0.8125rem; color: var(--ld-ink-2); }
.landing-topo-resources span { font-size: 0.625rem; font-family: var(--mono); color: var(--ld-ink-4); }
.landing-topo-resources span:empty { display: none; }
.landing-topo-resources li.is-app { border-left-color: #f59e0b; }
.landing-topo-resources li.is-data { border-left-color: #3b82f6; }
.landing-topo-resources li.is-svc { border-left-color: #10b981; }

p.landing-topo-deny {
  max-width: none; margin: 0.9rem 0 0 !important; padding: 0.7rem 1rem;
  border-radius: 0.625rem; font-size: 0.875rem; text-align: center;
  border: 1px solid color-mix(in srgb, #34d399 34%, var(--ld-line));
  background: color-mix(in srgb, #34d399 11%, var(--ld-surface)); color: var(--ig-status);
}

@media (max-width: 64rem) {
  .landing-topo { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the arrow and its label sit together rather than at opposite edges. */
  .landing-topo-arrow { min-height: 2.75rem; grid-auto-flow: column; justify-content: center; gap: 0.5rem; }
  .landing-topo-arrow::before { content: "\2195"; }
  .landing-topo-arrow.is-one-way::before { content: "\2193"; }
  .landing-topo-cloud { border-radius: 0.875rem; }
}
@media (max-width: 30rem) {
  .landing-topo-orgbody { grid-template-columns: minmax(0, 1fr); }
}

/* The invite field waits until it is asked for.
   Creating a room is what the person who needs help does, so that is the one filled button. The
   person joining already has a link, so their path is a quiet second button that reveals the field
   rather than a text input sitting open beside the first. `:not(:target)` rather than a `display`
   on the shown state, so the form keeps whatever display its own rule gives it. Only visitors:
   signed in, this same form is the join panel and stays open. */
/* The lead sits inside a .hero-slot now, so it is no longer the form's sibling and `~` no longer
   reaches it. The slot is what the sibling combinator can see, and :has() asks it about its own
   child. Without this the invite field stopped being hidden for visitors at all. */
.app-shell[data-visitor="true"] .hero-slot:has(> .landing-join-lead:not(:target)) > .landing-join-lead,
.app-shell[data-visitor="true"] .hero-slot:has(> .landing-join-lead:not(:target)) ~ .connection-form { display: none; }
.landing-join-action::after { content: " \2192"; }

/* The theme control sits in the visitor bar as well as the account menu, so a visitor with no
   account can still choose an appearance. It is quieter here than in the menu. */
.visitor-bar .theme-control { margin: 0; }
.visitor-bar .theme-control select {
  min-height: 40px; font-size: 0.875rem; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--fg);
}

/* ---------------------------------------------------------------------------------------------
   Moved here from collaborate.css on 2026-09-28. Nothing links or imports that file: app.html
   loads workspace.css only, and a check in the browser confirmed neither its rules nor mine were
   in any loaded stylesheet. Rules added there are dead, which is how the participant rows shipped
   restyled in markup and unstyled on screen.
   --------------------------------------------------------------------------------------------- */

/* Identity, room role, capabilities and who holds the keyboard are four facts, so the row gives
   each one its own place instead of a single pill that answered none of them. */
.room-member-who { flex: 1 1 16rem; min-width: 0; display: grid; gap: 0.15rem; }
.room-member-who .room-member-email { flex: none; font-weight: 600; }
.room-member-standing { font-size: 0.8125rem; font-weight: 600; color: var(--fg); }
.room-member-caps { font-size: 0.8125rem; color: var(--muted); }
/* Control moves during a session while the role does not, so it reads as a live state. */
.room-member-control {
  flex: none; align-self: center; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok);
}

/* ---- The rooms board ------------------------------------------------------------------------
   A warm paper palette, kept in its own token set so it can be judged on one surface before it is
   taken anywhere else. Terracotta is the action colour, ink is near-black on cream, and the state
   colours are the only other hues: green for a room someone is working in, amber for one that is
   waiting, slate for setup, grey for ended. */
.rooms-board {
  container-type: inline-size;
  container-name: rooms-board;
  --rb-paper: var(--w-paper);
  --rb-card: var(--w-card);
  --rb-line: var(--w-line);
  --rb-line-soft: var(--w-line-soft);
  --rb-ink: var(--w-ink);
  --rb-ink-2: var(--w-ink-2);
  --rb-ink-3: var(--w-ink-3);
  --rb-accent: var(--w-accent);
  --rb-accent-ink: var(--w-accent-fg);
  --rb-accent-soft: var(--w-accent-soft);
  --rb-deep: var(--w-deep);
  --rb-live: var(--w-live);
  --rb-live-soft: var(--w-live-soft);
  --rb-wait: var(--w-wait);
  --rb-wait-soft: var(--w-wait-soft);
  --rb-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  display: grid; gap: 1.25rem;
  padding: 1.5rem; border-radius: 1rem;
  background: var(--rb-paper); color: var(--rb-ink);
  border: 1px solid var(--rb-line);
}
.rooms-board-live[data-live="no"] { background: var(--rb-line-soft); color: var(--rb-ink-3); border-color: var(--rb-line); }
.rooms-board-sub { margin: 0.4rem 0 0; max-width: 46rem; font-size: 0.9375rem; color: var(--rb-ink-2); line-height: 1.55; }
.rooms-board-create { margin: 0; background: var(--rb-accent); border-color: var(--rb-accent); color: var(--rb-accent-ink); }
.rooms-board-create:hover { background: color-mix(in srgb, var(--rb-accent) 84%, #000); }

.rooms-board-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; }
.rooms-board-stat {
  display: grid; gap: 0.15rem; padding: 0.9rem 1rem; border-radius: 0.75rem;
  background: var(--rb-card); border: 1px solid var(--rb-line);
}
.rooms-board-statlabel { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--rb-ink-3); }
.rooms-board-statvalue { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--rb-ink); }
.rooms-board-stat[data-stat="active"] .rooms-board-statvalue { color: var(--rb-live); }
.rooms-board-stat[data-stat="waiting"] .rooms-board-statvalue { color: var(--rb-wait); }
.rooms-board-statnote { font-size: 0.75rem; color: var(--rb-ink-3); line-height: 1.35; }

.rooms-board-bar { display: grid; gap: 0.75rem; padding: 1rem; border-radius: 0.875rem; background: var(--rb-card); border: 1px solid var(--rb-line); }
.rooms-board-queryrow { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.rooms-board-search {
  flex: 1 1 18rem; min-width: 0; min-height: 44px; padding: 0.55rem 0.8rem;
  border-radius: 0.625rem; border: 1px solid var(--rb-line);
  background: var(--rb-paper); color: var(--rb-ink); font: inherit; font-family: var(--rb-mono); font-size: 0.875rem;
}
.rooms-board-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.rooms-board-presetlabel { font-size: 0.75rem; font-weight: 700; color: var(--rb-ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.rooms-board-preset {
  min-height: 36px; padding: 0.35rem 0.75rem; border-radius: 0.5rem; cursor: pointer;
  border: 1px solid var(--rb-line); background: var(--rb-paper); color: var(--rb-ink-2);
  font-size: 0.8125rem; font-weight: 600;
}
.rooms-board-preset:hover { color: var(--rb-ink); border-color: var(--rb-ink-3); }
.rooms-board-preset[data-current="yes"] { background: var(--rb-accent); border-color: var(--rb-accent); color: var(--rb-accent-ink); }

.rooms-board-tokens { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.rooms-board-tokenlabel { font-size: 0.75rem; font-weight: 700; color: var(--rb-ink-3); }
.rooms-board-token {
  min-height: 32px; padding: 0.25rem 0.6rem; border-radius: 0.5rem; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--rb-accent) 32%, transparent);
  background: var(--rb-accent-soft); color: var(--rb-accent);
  font-family: var(--rb-mono); font-size: 0.75rem; font-weight: 600;
}
.rooms-board-token::after { content: " \00d7"; }
.rooms-board-clear { border: 0; background: none; color: var(--rb-accent); font-size: 0.75rem; font-weight: 700; cursor: pointer; padding: 0.25rem 0.4rem; }

.rooms-board-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; }
.rooms-board-builder-toggle {
  min-height: 36px; padding: 0.35rem 0.75rem; border-radius: 0.5rem; cursor: pointer;
  border: 1px solid var(--rb-line); background: var(--rb-paper); color: var(--rb-ink-2); font-size: 0.8125rem; font-weight: 600;
}
.rooms-board-builder-toggle[data-open="yes"] { background: var(--rb-deep); border-color: var(--rb-deep); color: var(--rb-paper); }
.rooms-board-tabs { display: flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.2rem; border-radius: 0.625rem; background: var(--rb-paper); border: 1px solid var(--rb-line); }
.rooms-board-tab {
  min-height: 34px; padding: 0.3rem 0.75rem; border-radius: 0.45rem; cursor: pointer;
  border: 0; background: none; color: var(--rb-ink-2); font-size: 0.8125rem; font-weight: 600;
}
.rooms-board-tab[data-current="yes"] { background: var(--rb-card); color: var(--rb-ink); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.rooms-board-layout { display: flex; gap: 0.2rem; padding: 0.2rem; border-radius: 0.625rem; background: var(--rb-paper); border: 1px solid var(--rb-line); }
.rooms-board-layoutbtn { min-height: 34px; min-width: 38px; display: grid; place-items: center; border: 0; border-radius: 0.45rem; background: none; color: var(--rb-ink-3); cursor: pointer; }
.rooms-board-layoutbtn[data-current="yes"] { background: var(--rb-card); color: var(--rb-ink); box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }

.rooms-board-builder { padding: 0.9rem; border-radius: 0.625rem; background: var(--rb-paper); border: 1px dashed var(--rb-line); }
.rooms-board-builderrow { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rooms-board-where, .rooms-board-is { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rb-ink-3); }
.rooms-board-select {
  min-height: 40px; padding: 0.4rem 2rem 0.4rem 0.6rem; border-radius: 0.5rem;
  border: 1px solid var(--rb-line); background: var(--rb-card); color: var(--rb-ink); font: inherit; font-size: 0.875rem;
}
.rooms-board-apply { margin: 0; min-height: 40px; background: var(--rb-deep); border-color: var(--rb-deep); color: var(--rb-paper); }

/* Results beside the open room, the way the mockup arranges them. The detail column only exists
   when a room is open, so the list keeps the full width until then. */
.rooms-board-body { display: grid; gap: 1rem; align-items: start; }
.rooms-board-body:has(> .rooms-board-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
@container rooms-board (min-width: 64rem) {
  .rooms-board-body:has(> .rooms-board-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
}
.rooms-board-results { min-width: 0; display: grid; gap: 0.6rem; align-content: start; }
.rooms-board-count { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rb-ink-3); }
.rooms-board-list { display: grid; gap: 0.5rem; }
.rooms-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }

.rooms-row {
  display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 0.7fr) auto auto;
  gap: 0.75rem; align-items: center; text-align: left; cursor: pointer;
  padding: 0.85rem 1rem; border-radius: 0.75rem;
  background: var(--rb-card); border: 1px solid var(--rb-line); color: var(--rb-ink); font: inherit;
}
.rooms-row:hover { border-color: var(--rb-ink-3); }
.rooms-row[data-selected="yes"] { border-color: var(--rb-accent); background: var(--rb-accent-soft); }
.rooms-row-name { display: grid; gap: 0.15rem; min-width: 0; }
.rooms-row-name strong { font-size: 0.9375rem; overflow-wrap: anywhere; }
.rooms-row-target, .rooms-tile-target { font-family: var(--rb-mono); font-size: 0.75rem; color: var(--rb-ink-3); overflow-wrap: anywhere; }
.rooms-row-people, .rooms-tile-people, .rooms-row-expiry { font-size: 0.8125rem; color: var(--rb-ink-2); }
.rooms-row-expiry { font-family: var(--rb-mono); font-size: 0.75rem; color: var(--rb-ink-3); }

/* State is the only place the board uses colour to mean something. */
.rooms-row-state {
  flex: none; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em;
  background: var(--rb-line-soft); color: var(--rb-ink-2); border: 1px solid var(--rb-line);
}
.rooms-row-state.is-active { background: var(--rb-live-soft); color: var(--rb-live); border-color: color-mix(in srgb, var(--rb-live) 28%, transparent); }
.rooms-row-state.is-waiting { background: var(--rb-wait-soft); color: var(--rb-wait); border-color: color-mix(in srgb, var(--rb-wait) 28%, transparent); }
.rooms-row-computer { font-size: 0.75rem; font-weight: 600; color: var(--rb-ink-3); white-space: nowrap; }
.rooms-row-computer.is-linked { color: var(--rb-live); }

.rooms-tile {
  display: grid; gap: 0.4rem; align-content: start; text-align: left; cursor: pointer;
  padding: 1rem; border-radius: 0.875rem; min-height: 9rem;
  background: var(--rb-card); border: 1px solid var(--rb-line); color: var(--rb-ink); font: inherit;
}
.rooms-tile:hover { border-color: var(--rb-ink-3); }
.rooms-tile[data-selected="yes"] { border-color: var(--rb-accent); background: var(--rb-accent-soft); }
.rooms-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rooms-tile-name { font-size: 0.9375rem; overflow-wrap: anywhere; }
.rooms-tile-foot { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--rb-line-soft); }

.rooms-board-empty {
  display: grid; gap: 0.4rem; justify-items: center; text-align: center;
  padding: 3rem 1.5rem; border-radius: 0.875rem;
  background: var(--rb-card); border: 1px dashed var(--rb-line);
}
.rooms-board-empty strong { font-size: 1rem; }
.rooms-board-empty p { margin: 0; font-size: 0.875rem; color: var(--rb-ink-2); max-width: 26rem; }
.rooms-board-reset { margin-top: 0.5rem; }

.rooms-board-detail {
  display: grid; gap: 0.85rem; align-content: start; min-width: 0;
  padding: 1.1rem; border-radius: 0.875rem;
  background: var(--rb-card); border: 1px solid var(--rb-line);
  position: sticky; top: 1rem;
}
.rooms-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.rooms-detail-titles { display: grid; gap: 0.35rem; min-width: 0; justify-items: start; }
.rooms-detail-name { font-size: 1.0625rem; overflow-wrap: anywhere; }
.rooms-detail-close { border: 0; background: none; color: var(--rb-ink-3); cursor: pointer; min-height: 32px; min-width: 32px; display: grid; place-items: center; border-radius: 0.4rem; }
.rooms-detail-close:hover { background: var(--rb-line-soft); color: var(--rb-ink); }
.rooms-detail-open { margin: 0; width: 100%; justify-content: center; background: var(--rb-accent); border-color: var(--rb-accent); color: var(--rb-accent-ink); }
.rooms-detail-open:hover { background: color-mix(in srgb, var(--rb-accent) 84%, #000); }
.rooms-detail-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 0.9rem; font-size: 0.8125rem; }
.rooms-detail-facts dt { color: var(--rb-ink-3); font-weight: 600; }
.rooms-detail-facts dd { margin: 0; color: var(--rb-ink); overflow-wrap: anywhere; }
.rooms-detail-shared { display: grid; gap: 0.35rem; padding-top: 0.75rem; border-top: 1px solid var(--rb-line-soft); }
.rooms-detail-sharedlabel { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rb-ink-3); }
.rooms-detail-sharedlist { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; font-size: 0.8125rem; color: var(--rb-ink-2); }

/* Everything below asks the board how wide IT is, not the window. */
@container rooms-board (max-width: 56rem) {
  .rooms-board-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rooms-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.4rem; }
  .rooms-row-people, .rooms-row-expiry { display: none; }
}
@container rooms-board (max-width: 34rem) {
  .rooms-board-stats { grid-template-columns: minmax(0, 1fr); }
  .rooms-row { grid-template-columns: minmax(0, 1fr); }
  .rooms-row-state { justify-self: start; }
  .rooms-board-grid { grid-template-columns: minmax(0, 1fr); }
  .rooms-board-queryrow, .rooms-board-controls { flex-direction: column; align-items: stretch; }
  /* `flex: 1 1 18rem` grows down the cross axis once the row becomes a column, which turned the
     search box into a tall empty panel. */
  .rooms-board-search { flex: none; }
  .rooms-board-tabs, .rooms-board-layout { justify-content: center; }
}
@media (max-width: 56rem) { .rooms-board { padding: 1rem; } }

/* ---- Room labels ----------------------------------------------------------------------------
   One badge for every label, whatever produced it. The mockup states the rule and it is the whole
   point: a label the system derived and a label a person typed are drawn identically, so no label
   looks more official than another. Colour comes from the name, never from the kind.

   The palette is Apple's system colours, light and dark pairs, as appleLabelTheme.ts defines them. */
.room-label {
  display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%;
  padding: 0.1rem 0.45rem; border-radius: 0.375rem;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.5;
  border: 1px solid transparent; overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--label-dot) 9%, transparent);
  color: var(--label-ink);
  border-color: color-mix(in srgb, var(--label-dot) 26%, transparent);
}
.room-label[data-size="sm"] { font-size: 0.625rem; padding: 0.05rem 0.35rem; gap: 0.3rem; }
.room-label::before {
  content: ""; flex: none; width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--label-dot);
}
button.room-label { cursor: pointer; }
button.room-label:hover { background: color-mix(in srgb, var(--label-dot) 16%, transparent); }
button.room-label[data-active="yes"] {
  font-weight: 650;
  background: color-mix(in srgb, var(--label-dot) 18%, transparent);
  border-color: var(--label-dot);
  box-shadow: 0 0 0 1px var(--label-dot);
}

.room-label[data-label-colour="blue"] { --label-dot: #007AFF; --label-ink: #0062cc; }
.room-label[data-label-colour="purple"] { --label-dot: #AF52DE; --label-ink: #8929b8; }
.room-label[data-label-colour="indigo"] { --label-dot: #5856D6; --label-ink: #4341b5; }
.room-label[data-label-colour="green"] { --label-dot: #34C759; --label-ink: #207d39; }
.room-label[data-label-colour="orange"] { --label-dot: #FF9500; --label-ink: #b86200; }
.room-label[data-label-colour="red"] { --label-dot: #FF3B30; --label-ink: #c92117; }
.room-label[data-label-colour="teal"] { --label-dot: #5AC8FA; --label-ink: #02779e; }
.room-label[data-label-colour="pink"] { --label-dot: #FF2D55; --label-ink: #c2183b; }
.room-label[data-label-colour="yellow"] { --label-dot: #FFCC00; --label-ink: #946c00; }
.room-label[data-label-colour="gray"] { --label-dot: #8E8E93; --label-ink: #545459; }

:root[data-theme="dark"] .room-label, :root:not([data-theme="light"]) .room-label { --label-ink: var(--label-ink-dark); }
:root[data-theme="dark"] .room-label[data-label-colour="blue"],
:root:not([data-theme="light"]) .room-label[data-label-colour="blue"] { --label-dot: #0A84FF; --label-ink: #6cb4ff; }
:root[data-theme="dark"] .room-label[data-label-colour="purple"],
:root:not([data-theme="light"]) .room-label[data-label-colour="purple"] { --label-dot: #BF5AF2; --label-ink: #d388f7; }
:root[data-theme="dark"] .room-label[data-label-colour="indigo"],
:root:not([data-theme="light"]) .room-label[data-label-colour="indigo"] { --label-dot: #5E5CE6; --label-ink: #8b89f0; }
:root[data-theme="dark"] .room-label[data-label-colour="green"],
:root:not([data-theme="light"]) .room-label[data-label-colour="green"] { --label-dot: #30D158; --label-ink: #55e079; }
:root[data-theme="dark"] .room-label[data-label-colour="orange"],
:root:not([data-theme="light"]) .room-label[data-label-colour="orange"] { --label-dot: #FF9F0A; --label-ink: #ffb74d; }
:root[data-theme="dark"] .room-label[data-label-colour="red"],
:root:not([data-theme="light"]) .room-label[data-label-colour="red"] { --label-dot: #FF453A; --label-ink: #ff7870; }
:root[data-theme="dark"] .room-label[data-label-colour="teal"],
:root:not([data-theme="light"]) .room-label[data-label-colour="teal"] { --label-dot: #64D2FF; --label-ink: #78dcff; }
:root[data-theme="dark"] .room-label[data-label-colour="pink"],
:root:not([data-theme="light"]) .room-label[data-label-colour="pink"] { --label-dot: #FF375F; --label-ink: #ff6e8a; }
:root[data-theme="dark"] .room-label[data-label-colour="yellow"],
:root:not([data-theme="light"]) .room-label[data-label-colour="yellow"] { --label-dot: #FFD60A; --label-ink: #ffe043; }
:root[data-theme="dark"] .room-label[data-label-colour="gray"],
:root:not([data-theme="light"]) .room-label[data-label-colour="gray"] { --label-dot: #8E8E93; --label-ink: #aeafb4; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .room-label, :root[data-theme="system"] .room-label { --label-ink: var(--label-ink-light); }
  :root:not([data-theme]) .room-label[data-label-colour="blue"],
  :root[data-theme="system"] .room-label[data-label-colour="blue"] { --label-dot: #007AFF; --label-ink: #0062cc; }
  :root:not([data-theme]) .room-label[data-label-colour="purple"],
  :root[data-theme="system"] .room-label[data-label-colour="purple"] { --label-dot: #AF52DE; --label-ink: #8929b8; }
  :root:not([data-theme]) .room-label[data-label-colour="indigo"],
  :root[data-theme="system"] .room-label[data-label-colour="indigo"] { --label-dot: #5856D6; --label-ink: #4341b5; }
  :root:not([data-theme]) .room-label[data-label-colour="green"],
  :root[data-theme="system"] .room-label[data-label-colour="green"] { --label-dot: #34C759; --label-ink: #207d39; }
  :root:not([data-theme]) .room-label[data-label-colour="orange"],
  :root[data-theme="system"] .room-label[data-label-colour="orange"] { --label-dot: #FF9500; --label-ink: #b86200; }
  :root:not([data-theme]) .room-label[data-label-colour="red"],
  :root[data-theme="system"] .room-label[data-label-colour="red"] { --label-dot: #FF3B30; --label-ink: #c92117; }
  :root:not([data-theme]) .room-label[data-label-colour="teal"],
  :root[data-theme="system"] .room-label[data-label-colour="teal"] { --label-dot: #5AC8FA; --label-ink: #02779e; }
  :root:not([data-theme]) .room-label[data-label-colour="pink"],
  :root[data-theme="system"] .room-label[data-label-colour="pink"] { --label-dot: #FF2D55; --label-ink: #c2183b; }
  :root:not([data-theme]) .room-label[data-label-colour="yellow"],
  :root[data-theme="system"] .room-label[data-label-colour="yellow"] { --label-dot: #FFCC00; --label-ink: #946c00; }
  :root:not([data-theme]) .room-label[data-label-colour="gray"],
  :root[data-theme="system"] .room-label[data-label-colour="gray"] { --label-dot: #8E8E93; --label-ink: #545459; }
}

.rooms-board-labels { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.rooms-board-alllabels {
  min-height: 26px; padding: 0.1rem 0.55rem; border-radius: 0.375rem; cursor: pointer;
  border: 1px solid var(--rb-line); background: var(--rb-paper); color: var(--rb-ink-2);
  font-size: 0.6875rem; font-weight: 600;
}
.rooms-board-alllabels[data-active="yes"] { background: var(--rb-deep); border-color: var(--rb-deep); color: var(--rb-paper); }
.rooms-row-labels { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.rooms-row-labelmore { font-size: 0.625rem; font-weight: 600; color: var(--rb-ink-3); align-self: center; }
.rooms-board-detail .rooms-row-labels { margin-top: 0; }

/* Holds a child position in the hero column whether or not it has anything in it. A block that
   disappears takes its slot with it, every later sibling shifts up, and the diff replaces nodes it
   would otherwise have patched -- which is how an invite someone was typing lost its focus when
   their account resolved. */
/* display:contents keeps the element in the DOM - which is all the diff needs to hold a child
   position - without giving it a box. The earlier `:empty { display: block }` gave each empty slot
   a box after all, and with it a share of the column's row-gap: two of them left a 70px void under
   the heading on the workspace. */
.hero-slot { display: contents; }

/* ---- The workspace header is an action bar, not a column ---------------------------------------
   Joining is one field and one button. As a tall card it set the height of the header row, and the
   heading beside it sat above 400px of nothing on a 1440px screen. The mockup's header is a title
   with its actions on the right and the work full width beneath, so this is that: the panel keeps
   everything it had, with the parts that are not the action folded away. */
@media (min-width: 70rem) {
  .workspace-signed-in .workspace-join .portal { padding: 0.85rem 1rem; }
  .workspace-signed-in .workspace-join h2 { font-size: 0.95rem; }
  .workspace-signed-in .workspace-join .tagline { display: none; }
  /* Field and button on one line. */
  .workspace-signed-in .workspace-join .connection-primary { display: flex; align-items: flex-end; gap: 0.5rem; }
  .workspace-signed-in .workspace-join .connection-primary .field { flex: 1 1 auto; min-width: 0; }
  .workspace-signed-in .workspace-join .connect { margin: 0; white-space: nowrap; }
  /* Everything that is not the action: still present, not taking the header's height. */
  /* The QR paths, the ambient status line and the four advanced fields are all still one click
     away in Connection options; none of them is the action, and together they were most of the
     panel's height. */
  /* Nothing is hidden here. Two attempts tried that and both were caught: "landing QR controls stay
     direct and compact" wants Scan QR code on screen, and "both first-screen actions are visible
     together" wants the connection status. The panel is made short by laying it out, not by
     removing what it offers. */
  .workspace-signed-in .workspace-join .invite-qr-actions {
    margin-top: 0.5rem; font-size: 0.8125rem;
  }
  .workspace-signed-in .workspace-join .invite-qr-capture-actions { gap: 0.5rem; }
  /* The panel inherits the landing hero's spacing, which is built for a column that fills a
     screen. In a header card it is most of the height. One rhythm, set once, on whatever the
     children happen to be. */
  .workspace-signed-in .workspace-join .hero-left-column > * { margin-block: 0; }
  .workspace-signed-in .workspace-join .hero-left-column > * + * { margin-top: 0.5rem; }
  .workspace-signed-in .workspace-join .portal-head { margin: 0; }
  .workspace-signed-in .workspace-join .portal > * + * { margin-top: 0.5rem; }
  .workspace-signed-in .workspace-join .connection-advanced { margin-top: 0.35rem; }
  /* The connection status stays: "signed in, both first-screen actions are visible together"
     checks for it, and it is the one line in the panel that reports something rather than offering
     something. It reads as one compact line instead of a two-line block. */
  .workspace-signed-in .workspace-join .ambient-connection-status {
    display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
    margin: 0.5rem 0 0; font-size: 0.78rem; line-height: 1.35;
  }
  .workspace-signed-in .workspace-join .connection-advanced > summary { font-size: 0.8125rem; padding: 0.35rem 0; }
  .workspace-signed-in .workspace-join .hero-split-layout,
  .workspace-signed-in .workspace-join .hero-left-column { display: block; }
}

/* ---- The header holds both entry actions; the rooms run under them --------------------------
   Start support and Join are the two things a person can want on this screen, so they belong side
   by side; the rooms board belongs under both, at full width. They were in one subtree - the hero
   and the board sit seven wrappers deep inside the collaborate slot - so the grid could only ever
   place them together, which is what left a tall panel beside a one-line heading and 340px of
   nothing under it.
   The wrappers carry no layout of their own here, so they become display:contents and the hero and
   the board become grid items in their own right. Scoped to the signed-in workspace and to widths
   where there are two columns at all. */
@media (min-width: 70rem) {
  .workspace-signed-in .workspace-collaborate-slot,
  .workspace-signed-in .workspace-collaborate-slot > .account-route-host,
  .workspace-signed-in .workspace-collaborate-slot .route-view,
  /* #journey-root carries an id, so a class selector cannot flatten it. */
  .workspace-signed-in .workspace-collaborate-slot #collaborate-workspace,
  .workspace-signed-in .workspace-collaborate-slot #journey-root,
  .workspace-signed-in .workspace-collaborate-slot .placeholder-panel,
  .workspace-signed-in .workspace-collaborate-slot .collaboration-region,
  .workspace-signed-in .workspace-collaborate-slot .room-management { display: contents; }

  .workspace-signed-in { grid-template-areas: "head head" "start join"; }
  /* The two entry actions are a pair, so the cards match rather than one sitting in a short box
     beside a tall one. The action stays centred in whatever height the row turns out to be. */
  .workspace-signed-in .support-intent-hero {
    grid-area: start; align-self: stretch;
    display: flex; flex-direction: column; justify-content: center;
  }
  /* Everything the slot held after the hero spans both columns, under the two actions. */
  /* Not `.workspace-collaborate-slot ~ *`: the join section is a later sibling, so that spanned
     the panel across both columns too. Named, so it only reaches what it means. */
  .workspace-signed-in .room-directory-disclosure,
  .workspace-signed-in .existing-room,
  .workspace-signed-in .collaboration-more,
  .workspace-signed-in .meeting-accounts,
  .workspace-signed-in .restore-dismissed-row { grid-column: 1 / -1; }
}