/* PTR PORTAL APP SHELL (portal.peopletechrevolution.com)
   One stylesheet for the signed-in application and its sign-in screens.
   Brand values are the ones ptr-core.css transplants from peopletechrevolution.com
   (ramp #80EDEF #41BBF5 #6D57FF #A567F1 #D16BFF, base #050507, smoked glass,
   light volumes). Typography stays Outfit (the portal's existing choice).
   Light theme: same ramp, darker accent inks so text keeps 4.5:1 (light brand inks from PR #360).
   D8: primary buttons wear the PTR rainbow (#F00EF9 #A567F1 #80EDEF #41BBF5) with #0B0B12 text: 5.4:1 at its
   darkest stop (#A567F1), so AA holds in both themes. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ptr-cyan: #80EDEF; --ptr-blue: #41BBF5; --ptr-indigo: #6D57FF; --ptr-violet: #A567F1; --ptr-orchid: #D16BFF;
  /* dark (default) */
  --bg: #050507;
  --surface: #0e0f16;
  --surface-2: #151723;
  --surface-3: #1d2030;
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,.74);
  --ink-3: rgba(255,255,255,.56);
  --hair: rgba(255,255,255,.12);
  --hair-2: rgba(255,255,255,.2);
  --accent: #80EDEF;
  --accent-ink: #061012;
  --accent-soft: rgba(128,237,239,.14);
  --indigo: #8f7dff;
  --indigo-soft: rgba(109,87,255,.2);
  --violet: #A567F1;
  --danger: #ff8a80; --danger-soft: rgba(255,138,128,.14);
  --ok: #7be8a8; --ok-soft: rgba(123,232,168,.14);
  --warn: #ffc48c; --warn-soft: rgba(255,196,140,.14);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --focus: #80EDEF;
  --bar-bg: rgba(6,6,9,.72);
  --radius: 14px;
  --gutter: 16px;
  --topbar: 56px;
  --rail: 104px;
  --rail-bg: rgba(14,15,22,.82);
  --rail-shadow: 0 10px 30px rgba(0,0,0,.35);
  --rail-active: #ffffff;
  --rail-active-ink: #0b0b12;
  --scan: rgba(255,255,255,.03);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f3f4f8;
  --surface: #ffffff;
  --surface-2: #f6f7fb;
  --surface-3: #eceef5;
  --ink: #0b0b12;
  --ink-2: rgba(11,11,18,.74);
  --ink-3: rgba(11,11,18,.58);
  --hair: rgba(11,11,18,.12);
  --hair-2: rgba(11,11,18,.22);
  --accent: #0B6B75;
  --accent-ink: #ffffff;
  --accent-soft: rgba(13,111,120,.12);
  --indigo: #5343d9;
  --indigo-soft: rgba(109,87,255,.14);
  --violet: #7a3fd0;
  --danger: #b3261e; --danger-soft: rgba(179,38,30,.1);
  --ok: #1b7f4a; --ok-soft: rgba(27,127,74,.12);
  --warn: #8a5300; --warn-soft: rgba(255,196,140,.25);
  --shadow: 0 10px 30px rgba(20,24,40,.12);
  --focus: #6A3FC9;
  --bar-bg: rgba(255,255,255,.82);
  --rail-bg: rgba(255,255,255,.9);
  --rail-shadow: 0 10px 30px rgba(20,24,40,.10);
  --rail-active: #0b0b12;
  --rail-active-ink: #ffffff;
  --scan: rgba(11,11,18,.025);
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 22px; --topbar: 60px; } }
@media (min-width: 1024px) { :root { --gutter: 28px; } }

html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body {
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Focus moved by the page (a new screen's heading or main) is for screen readers; it draws no ring. */
h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1, h2, h3, h4, p { margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 16px; font-weight: 600; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }
.mono { font-family: ui-monospace, Consolas, monospace; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ------------------------------------------------------------------ backdrop (dark only) */
.ptr-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #050507; }
#cinBg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ptr-field > .lv { position: absolute; mix-blend-mode: screen; will-change: transform; border-radius: 50%; }
#lvCyan { left: -18%; top: -24%; width: 58%; height: 70%; background: radial-gradient(closest-side, rgba(128,237,239,.85), rgba(65,187,245,.45) 48%, transparent 72%); filter: blur(90px); opacity: .14; animation: lvA 14s ease-in-out infinite; }
#lvViolet { right: -20%; top: -10%; width: 54%; height: 74%; background: radial-gradient(closest-side, rgba(109,87,255,.9), rgba(109,87,255,.4) 50%, transparent 74%); filter: blur(95px); opacity: .13; animation: lvB 12s ease-in-out infinite; }
#lvPink { left: 14%; bottom: -30%; width: 60%; height: 64%; background: radial-gradient(closest-side, rgba(165,103,241,.85), rgba(209,107,255,.4) 48%, transparent 72%); filter: blur(85px); opacity: .1; animation: lvC 16s ease-in-out infinite; }
#caus1, #caus2 { display: none; }
.ptr-vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.42) 100%); }
@keyframes lvA { 0%,100% { transform: translate3d(-6%,-4%,0) scale(1); } 50% { transform: translate3d(7%,5%,0) scale(1.12); } }
@keyframes lvB { 0%,100% { transform: translate3d(5%,6%,0) scale(1.08); } 50% { transform: translate3d(-7%,-5%,0) scale(.96); } }
@keyframes lvC { 0%,100% { transform: translate3d(3%,-6%,0) scale(.98); } 50% { transform: translate3d(-5%,6%,0) scale(1.1); } }
html.ptr-motion-paused .ptr-field * { animation-play-state: paused !important; }
html[data-theme="light"] .ptr-field, html[data-theme="light"] .ptr-vignette { display: none; }

/* ------------------------------------------------------------------ app frame */
.app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 60; height: var(--topbar);
  display: flex; align-items: center; gap: 8px; padding: 0 var(--gutter);
  background: var(--bar-bg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hair);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; min-height: 44px; margin-right: auto; }
.brand img { width: 34px; height: 34px; object-fit: contain; flex: none; }
html[data-theme="light"] .brand img.mark-light, html:not([data-theme="light"]) .brand img.mark-dark { display: none; }
.brand .lockup { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand .lockup b { font-weight: 600; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.brand .lockup span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 379px) { .brand .lockup span { display: none; } }
.topbar .org-switch { max-width: 180px; }
.icon-btn {
  width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; border-radius: 12px;
  border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--hair); transform: translateY(-1px); }
.icon-btn svg { width: 20px; height: 20px; }
.topbar .only-wide { display: none; }
@media (min-width: 1024px) { .topbar .only-wide { display: inline-flex; } .topbar .only-narrow { display: none; } }
.topbar .only-tablet { display: none; }
@media (min-width: 768px) { .topbar .only-tablet { display: flex; } .topbar .only-phone { display: none; } }
.skip { position: absolute; left: 8px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: var(--surface); color: var(--ink); }
.skip:focus { top: 8px; }
.avatar-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 4px; border-radius: 22px; border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer; }
.avatar-btn:hover { background: var(--surface-2); border-color: var(--hair); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: linear-gradient(135deg, var(--ptr-cyan), var(--ptr-indigo)); color: #061012; flex: none; }
.avatar-btn .name { font-size: 14px; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.frame { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
/* Desktop navigation = a slim floating pill rail (Playground feel): icon over a small label, the active item a filled
   pill. Same navigation definition as the phone drawer. */
@media (min-width: 1024px) {
  .frame { grid-template-columns: var(--rail) minmax(0, 1fr); }
}
/* Home: the rooftop's bottom dock is the navigation, so the rail steps aside and the scene takes the full width. */
@media (min-width: 1024px) {
  .frame.home-mode { grid-template-columns: minmax(0, 1fr); }
  .frame.home-mode .side { display: none; }
}
.side { display: none; }
@media (min-width: 1024px) {
  .side {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
    position: sticky; top: calc(var(--topbar) + 12px); align-self: start; margin: 12px 0 12px 12px;
    max-height: calc(100vh - var(--topbar) - 24px); max-height: calc(100dvh - var(--topbar) - 24px); overflow-y: auto; scrollbar-width: none;
    border-radius: 24px; background: var(--rail-bg); border: 1px solid var(--hair); box-shadow: var(--rail-shadow);
  }
  .side .nav { align-items: stretch; gap: 2px; width: 100%; }
  .side .nav a {
    flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 2px; border-radius: 18px;
    font-size: 11px; font-weight: 500; line-height: 1.15; text-align: center; letter-spacing: .01em;
  }
  .side .nav a span { max-width: 100%; overflow-wrap: anywhere; }
  .side .nav a svg { width: 22px; height: 22px; }
  .side .nav a[aria-current="page"] { background: var(--rail-active); color: var(--rail-active-ink); }
  .side .nav a[aria-current="page"] svg { color: var(--rail-active-ink); }
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav button {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px;
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%;
}
.nav a:hover, .nav button:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }
.nav a[aria-current="page"] svg { color: var(--accent); }
.nav svg { width: 20px; height: 20px; flex: none; }
.nav .sub { display: flex; flex-direction: column; gap: 2px; padding-left: 32px; }
.nav .sub a { min-height: 40px; font-size: 14px; }
.nav .divider { height: 1px; background: var(--hair); margin: 8px 4px; }

.main { min-width: 0; padding: 20px var(--gutter) 56px; }
/* Kim: no extra empty space. A page uses the whole content area; only the gutter rule pads it; grids add columns. */
.page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.page-head h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 650; letter-spacing: -.025em; }
.page-head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; justify-content: space-between; }
.page-head .lead { color: var(--ink-2); margin-top: 4px; max-width: 64ch; }
.crumbs { display: flex; gap: 6px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------------ drawer (mobile nav) */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.5); }
.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 90; width: min(320px, 88vw); background: var(--surface); border-right: 1px solid var(--hair);
  display: flex; flex-direction: column; overflow-y: auto; padding: 12px 12px 24px; box-shadow: var(--shadow);
}
@keyframes drawerIn { from { transform: translateX(-100%); } to { transform: none; } }
.drawer.open { animation: drawerIn .22s ease; }
.drawer .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 10px; }
html.drawer-open, html.drawer-open body { overflow: hidden; }
.seg { display: inline-flex; border: 1px solid var(--hair-2); border-radius: 12px; padding: 3px; gap: 2px; background: var(--surface-2); }
.seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.nav .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; color: var(--ink-2); font-size: 14px; min-height: 44px; }

/* ------------------------------------------------------------------ menus */
.menu { position: absolute; right: var(--gutter); top: calc(var(--topbar) - 6px); z-index: 70; min-width: 220px; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; font-size: 15px; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--surface-2); }
.menu .divider { height: 1px; background: var(--hair); margin: 6px 4px; }
.menu .who { padding: 8px 12px 4px; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ cards, grids */
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; padding: 18px; min-width: 0; }
.card.tight { padding: 14px; }
.card h2, .card h3 { margin-bottom: 4px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 10px 16px; font-size: 15px; align-items: start; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; }
.action-card { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink); text-decoration: none; min-height: 72px; }
.action-card:hover { border-color: rgba(128,237,239,.55); background: var(--surface-2); color: var(--ink); transform: translateY(-2px); box-shadow: 0 0 28px rgba(109,87,255,.22); }
.action-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.action-card .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.action-card .ic svg { width: 22px; height: 22px; }
.action-card b { display: block; font-weight: 600; }
.action-card span { color: var(--ink-2); font-size: 14px; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink);
  font-weight: 500; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
}
.btn:hover:not(:disabled):not(.btn-primary) { background: var(--surface-2); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(165,103,241,.55), 0 6px 22px rgba(240,14,249,.22), 0 0 28px rgba(65,187,245,.28); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px) scale(1.02); }
/* A primary LINK keeps its dark ink on hover too (a:hover would otherwise win and put white on cyan). */
.btn.btn-primary:hover, .btn.btn-primary:focus-visible { color: #0B0B12; }
.drawer .org-row .select { width: 100%; min-height: 44px; }
/* Rainbow text + underline on hover, as the main site's nav links (portal-nav.css .ptrNavLink). */
a:not(.btn):not(.brand):not(.action-card):not(.pill-cta):not(.nav a):not(.tabs a):not(.menu a):hover,
.link-btn:hover {
  background-image: linear-gradient(90deg, #80EDEF, #6D57FF, #A567F1, #D16BFF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #6D57FF;
  text-decoration-color: #A567F1; text-shadow: none;
}
/* Light theme: the same hover, in the darker brand inks (4.5:1 on white, PR #360). */
html[data-theme="light"] a:not(.btn):not(.brand):not(.action-card):not(.pill-cta):not(.nav a):not(.tabs a):not(.menu a):hover,
html[data-theme="light"] .link-btn:hover { background-image: linear-gradient(90deg, #0B6B75, #0A62A0, #6A3FC9, #A1009B); color: #6A3FC9; text-decoration-color: #6A3FC9; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  border-color: transparent; color: #0B0B12; font-weight: 600; text-shadow: none;
  background: linear-gradient(100deg, #F00EF9 0%, #A567F1 34%, #80EDEF 72%, #41BBF5 100%);
  background-size: 160% 100%; background-position: 0% 50%;
  transition: transform .15s ease, box-shadow .2s ease, background-position .4s ease;
}
.btn-primary:hover:not(:disabled) { background-position: 100% 50%; box-shadow: 0 0 0 1px rgba(165,103,241,.55), 0 6px 22px rgba(240,14,249,.22), 0 0 28px rgba(65,187,245,.28); }
.btn-primary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html[data-theme="light"] .btn:hover:not(:disabled):not(.btn-primary), html[data-theme="light"] .btn-primary:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(106,63,201,.45), 0 6px 22px rgba(161,0,155,.16), 0 0 24px rgba(10,98,160,.18); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; min-height: 44px; }
.link-btn:hover { color: var(--ink); }

/* ------------------------------------------------------------------ forms */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field .label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hair-2); background: var(--surface-2); color: var(--ink);
}
.textarea { padding: 12px 14px; min-height: 110px; resize: vertical; line-height: 1.5; }
.select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.input, .select, .textarea { transition: border-color .18s ease, box-shadow .18s ease; }
.input:hover:not(:focus):not([readonly]), .select:hover:not(:focus), .textarea:hover:not(:focus) { border-color: rgba(128,237,239,.55); box-shadow: 0 0 0 1px rgba(128,237,239,.25), 0 8px 26px rgba(65,187,245,.16); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
select.pm-field option { background: var(--surface); color: var(--ink); }
.input[readonly], .input.locked { background: var(--surface-3); color: var(--ink-2); cursor: default; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.field .hint { font-size: 13px; color: var(--ink-3); }
.field .err { font-size: 13px; color: var(--danger); }
.field .err:empty { display: none; }
.pw { position: relative; }
.pw .input { padding-right: 84px; }
.pw .toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 10px; border-radius: 9px; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; cursor: pointer; font-size: 15px; color: var(--ink-2); }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.form-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .form-2 { grid-template-columns: 1fr 1fr; } }
.form-2 .span { grid-column: 1 / -1; }
.lock-list { display: grid; gap: 10px; }
.lock-list .item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--hair); }
.lock-list { margin: 0; }
.lock-list .item dt { color: var(--ink-2); font-size: 13px; }
.lock-list .item dd { margin: 0; display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 13px; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.lock-list svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }

/* ------------------------------------------------------------------ status, badges, states */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em; border: 1px solid var(--hair); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.badge.xr { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.ai { background: var(--indigo-soft); color: var(--indigo); border-color: transparent; }
.badge.blended { background: linear-gradient(90deg, var(--accent-soft), var(--indigo-soft)); color: var(--ink); border-color: transparent; }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.lib-tools .input { flex: 1 1 240px; max-width: 360px; }
.chip { white-space: nowrap; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-2); background: transparent; color: var(--ink-2); cursor: pointer; font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--surface-2); font-size: 15px; }
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert.info { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); }
.alert.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.alert.danger { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); }
.alert.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); }
.owner-view-banner { margin: 0 0 16px; align-items: center; }
.bleed > .owner-view-banner { margin: 12px 16px; position: relative; z-index: 2; }
.status { font-size: 14px; color: var(--ink-2); min-height: 20px; }
.status.err { color: var(--danger); }
.empty { padding: 28px 18px; text-align: center; border: 1px dashed var(--hair-2); border-radius: 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.empty p { color: var(--ink-2); max-width: 46ch; }
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 12px; min-height: 18px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--hair-2); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ tables (stack on phones) */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--hair); }
.table td { padding: 12px 10px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.actions-cell { text-align: right; white-space: nowrap; }
/* Headsets: Rename and Unlink, and the in-place label form, are 44 px targets in both themes (theme tokens only). */
#headsetList .actions-cell .btn + .btn { margin-left: 8px; }
#headsetList .actions-cell .btn, .label-edit .btn { min-height: 44px; }
/* Pending invitations: Resend and Withdraw side by side, 44 px targets (customer-ready-2). */
.invite-actions .btn + .btn { margin-left: 8px; }
.invite-actions .btn { min-height: 44px; }
.label-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.label-edit .input { flex: 1 1 220px; width: auto; min-height: 44px; }
/* A table stacks into labelled rows when ITS CARD is narrow (the sidebar takes width at 1024), not only the screen. */
.card.tight { container-type: inline-size; }
@container (max-width: 720px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .table td { padding: 3px 0; border: 0; }
  .table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
  .table td.actions-cell { text-align: left; padding-top: 8px; }
}

/* ------------------------------------------------------------------ library cards */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { flex: none; min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tabs a[aria-current="page"], .tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ dialogs, toast */
dialog.dlg { border: 1px solid var(--hair); border-radius: 18px; background: var(--surface); color: var(--ink); padding: 20px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: var(--shadow); }
dialog.dlg::backdrop { background: rgba(0,0,0,.55); }
dialog.dlg h2 { margin-bottom: 8px; }
.dlg .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); z-index: 120; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ auth (signed-out) */
.auth { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 var(--gutter) 24px; }
.auth-bar { align-self: stretch; margin: 0 calc(-1 * var(--gutter)) 28px; width: auto; }
.auth-bar .brand { margin-right: auto; }
.lang-switch { width: auto; min-height: 40px; padding: 0 32px 0 10px; font-size: 13px; background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%; }
.auth-card { margin-top: 8px; }
.auth-card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--hair); border-radius: 20px; padding: 26px 22px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow); }
@media (min-width: 480px) { .auth-card { padding: 32px 30px; } }
.auth-card .logo { display: flex; justify-content: center; }
.auth-card .logo img { height: 44px; width: auto; }
.auth-card .logo img { height: 56px; width: 56px; }
html[data-theme="light"] .auth-card .logo img.mark-light, html:not([data-theme="light"]) .auth-card .logo img.mark-dark { display: none; }
.auth-card .title { text-align: center; }
.auth-card .title h1 { font-size: 24px; }
.auth-card .title p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.auth-foot { display: flex; justify-content: center; gap: 18px; padding: 4px 16px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.auth-foot a { color: var(--ink-3); }
.auth-theme { position: fixed; top: 12px; right: 12px; z-index: 2; }

/* ------------------------------------------------------------------ device pairing */
.code-box { font-family: ui-monospace, Consolas, monospace; font-size: 28px; letter-spacing: .14em; text-align: center; padding: 14px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--hair); }
.code-input { font-family: ui-monospace, Consolas, monospace; font-size: 22px; letter-spacing: .16em; text-align: center; text-transform: uppercase; min-height: 56px; }
.steps { display: grid; gap: 10px; counter-reset: s; padding: 0; margin: 0; list-style: none; }
.steps li { display: flex; gap: 12px; align-items: flex-start; counter-increment: s; }
.steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--accent-soft); color: var(--accent); }

/* ------------------------------------------------------------------ embedded tools (studio, practice) */
.embed-frame { width: 100%; height: calc(100vh - var(--topbar) - 150px); height: calc(100dvh - var(--topbar) - 150px); min-height: 520px; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); display: block; }
.embed-wrap { flex: 1; }

/* ------------------------------------------------------------------ wiki */
.wiki { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .wiki { grid-template-columns: 260px minmax(0, 1fr); } .wiki-side { position: sticky; top: calc(var(--topbar) + 16px); max-height: calc(100vh - var(--topbar) - 32px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-right: 4px; } }
.wiki-side { display: flex; flex-direction: column; gap: 12px; }
.wiki-toc details { border-top: 1px solid var(--hair); }
.wiki-toc summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 15px; list-style: none; }
.wiki-toc summary::-webkit-details-marker { display: none; }
.wiki-toc summary::after { content: "+"; margin-left: auto; color: var(--ink-3); }
.wiki-toc details[open] summary::after { content: "\2212"; }
.wiki-toc a { display: block; padding: 8px 10px; margin: 0 0 2px; border-radius: 8px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.wiki-toc a.top { font-weight: 600; color: var(--ink); min-height: 40px; display: flex; align-items: center; }
.wiki-toc summary a { color: inherit; text-decoration: none; padding: 0; margin: 0; flex: 1; }
.wiki-toc .sub { padding-left: 12px; border-left: 2px solid var(--hair); margin: 0 0 6px 10px; }
.wiki-results[hidden] { display: none; }
.wiki-results { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.wiki-results a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; }
.wiki-results a:hover { background: var(--surface-2); }
.wiki-page .crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.wiki-page .stamp { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.wiki-page .chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12px; }
.wiki-page details.toc { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface-2); }
.wiki-page details.toc summary { cursor: pointer; font-weight: 600; }
.wiki-page details.toc ul { margin: 8px 0 0; }
.wiki-page nav.inpage ul { columns: 2; column-gap: 24px; padding-left: 18px; }
.wiki-page .table-wrap { overflow-x: auto; }
.wiki-page .banner { padding: 10px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 14px; }
.wiki-page .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.wiki-page .facts > * { padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; }
.wiki-toc a:hover { background: var(--surface-2); color: var(--ink); }
.wiki-toc a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }
.wiki-page { padding: clamp(16px, 2.4vw, 28px); line-height: 1.6; font-size: clamp(16px, 0.86rem + 0.3vw, 18px); }
.wiki-page h1 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 12px; }
.wiki-page h2 { font-size: 22px; margin: 28px 0 10px; }
.wiki-page h3 { font-size: 17px; margin: 20px 0 8px; }
.wiki-page p, .wiki-page li { margin: 0 0 10px; }
.wiki-page ul, .wiki-page ol { padding-left: 22px; }
.wiki-page table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 15px; display: table; }
.wiki-page th, .wiki-page td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.wiki-page th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wiki-page img { border-radius: 12px; margin: 8px 0; height: auto; max-width: 100%; }
.wiki-page figcaption { font-size: 13px; color: var(--ink-3); }
.wiki-page blockquote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; }
.wiki-page .version, .wiki-page .meta { font-size: 13px; color: var(--ink-3); }
.wiki-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--hair); }
@media print { .topbar, .side, .drawer, .scrim, .wiki-side, .wiki-foot, .ptr-field { display: none !important; } .wiki { display: block; } .wiki-page { border: 0; padding: 0; } }

/* ------------------------------------------------------------------ shell additions (V4 on dev) */
.auth-main { width: 100%; display: flex; justify-content: center; }
.auth-bar { position: sticky; }
.auth-nav { display: flex; align-items: center; gap: 8px; margin-right: 4px; }
.auth-nav .btn { min-height: 40px; }
.auth-nav a[aria-current="page"]:not(.btn-primary) { border-color: var(--accent); }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.center { text-align: center; }
.mt { margin-top: 12px; } .mb { margin-bottom: 10px; } .pad { padding: 4px 10px 10px; }
.narrow { max-width: 520px; }
.plain { list-style: none; padding: 0; margin: 8px 0 0; }
.share { margin: 8px 0; user-select: all; overflow-wrap: anywhere; }
.menu-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; }
.status.ok { color: var(--ok); }
.link-check { font-size: 20px; font-weight: 600; margin: 4px 0 12px; overflow-wrap: anywhere; }
.nav .row label { color: var(--ink-2); }
.nav .row .select { width: auto; min-height: 40px; }
.drawer .nav a, .drawer .nav button { min-height: 44px; }
.check input[type="checkbox"] { min-width: 22px; }
.field .err { min-height: 0; }
.action-card { text-align: left; font: inherit; cursor: pointer; width: 100%; }
.btn-ghost { min-height: 40px; }
@media (max-width: 767px) { .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; max-width: 100%; } .lib-tools .input { max-width: none; } }
/* Every control is a 44px target (PRD 11). */
.chip, .btn-sm, .seg button, .pw .toggle, .nav .sub a, .auth-nav .btn, .btn-ghost, .lang-switch, .nav .row .select { min-height: 44px; }
.pw .toggle { min-width: 44px; }
.wiki-toc a { min-height: 44px; display: flex; align-items: center; }
.wiki-results a { min-height: 44px; justify-content: center; }

/* ------------------------------------------------------------------ Playground feel (Kim 2026-10-19), PTR brand */
/* Scanline texture, CSS only, about 3% (both themes). Fixed, behind content, never interactive. */
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 4px); }
.app, .auth { isolation: isolate; }

/* HOME: a full-bleed hero, the greeting and one pill button. #homeHero is the slot a rooftop scene mounts into later;
   until then it is the theme background. Its box is fixed by CSS, so a later scene causes no layout shift. */
.main.bleed { padding: 0; }
.home { position: relative; min-height: calc(100vh - var(--topbar)); min-height: calc(100dvh - var(--topbar)); display: grid; }
.home-hero { position: absolute; inset: 0; overflow: hidden; background: transparent; }
@supports not (inset: 0) { .home-hero { top: 0; right: 0; bottom: 0; left: 0; } }
.home-copy { position: relative; z-index: 1; align-self: end; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0 var(--gutter) clamp(40px, 9vh, 96px); max-width: 100%; }
/* Kim's opaque-panel rule applies only once a scene is behind the text. */
/* Over the rooftop (Kim 2026-10-19: no panel, no button, the scene is the experience): the greeting sits on the sky,
   top left, white with a soft shadow for legibility on the always-sunset scene, and never takes a pointer. */
.home:has(> .home-hero:not(:empty)) > .home-copy { align-self: start; justify-self: start; align-items: flex-start; text-align: left; padding: clamp(16px, 4vh, 40px) var(--gutter) 0; gap: 6px; pointer-events: none; color: #ffffff; text-shadow: 0 2px 18px rgba(20, 8, 30, .45), 0 1px 3px rgba(20, 8, 30, .35); }
.home:has(> .home-hero:not(:empty)) > .home-copy .home-greet { font-size: clamp(30px, 4vw, 54px); color: #ffffff; }
.home:has(> .home-hero:not(:empty)) > .home-copy .home-org { color: rgba(255, 255, 255, .92); }
.home-greet { font-size: clamp(44px, 8vw, 96px); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.home-org { font-size: clamp(15px, 1.6vw, 18px); color: var(--ink-2); }
.pill-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: #ffffff; color: #0b0b12; font-weight: 600; font-size: 16px; text-decoration: none; box-shadow: 0 8px 28px rgba(0,0,0,.28); transition: transform .2s ease, box-shadow .2s ease; }
html[data-theme="light"] .pill-cta { background: #0b0b12; color: #ffffff; box-shadow: 0 8px 28px rgba(20,24,40,.18); }
.pill-cta:hover { transform: translateY(-2px); color: #0b0b12; }
html[data-theme="light"] .pill-cta:hover { color: #ffffff; }
.pill-cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* TRAINING LIBRARY: rows by collection, big media cards (image fills the card, format tag top left, title and one line
   on a translucent panel). Phone: each row scrolls sideways with snap. Desktop: rows wrap into a full-width grid. */
.lib-rows { display: flex; flex-direction: column; gap: 30px; }
.lib-row h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 650; letter-spacing: -.02em; margin: 2px 0 12px; }
.media-row { display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: min(72vw, 280px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding: 0 var(--gutter); }
.media-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .media-row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); overflow: visible; margin: 0; padding: 0; }
}
.media-card { scroll-snap-align: start; min-width: 0; }
.media-hit { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; background: var(--surface-3); color: #fff; text-align: left; font: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.media-hit:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 14px 36px rgba(0,0,0,.28); }
.media-hit:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.media-card.open .media-hit { box-shadow: 0 0 0 3px var(--focus); }
.media-art { position: absolute; inset: 0; display: block; }
.media-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-art.fallback { display: grid; place-items: center; background: linear-gradient(135deg, #F00EF9 0%, #A567F1 34%, #6D57FF 60%, #41BBF5 100%); }
.media-art.fallback img { width: 72px; height: 72px; object-fit: contain; opacity: .95; }
.tag-pill { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0b0b12; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.media-panel { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(5,5,7,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.media-title { font-size: 17px; font-weight: 650; line-height: 1.2; color: #fff; }
.media-line { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.ptr-motion-paused .media-hit, html.ptr-motion-paused .pill-cta { transition: none; }
html.ptr-motion-paused .media-hit:hover, html.ptr-motion-paused .pill-cta:hover { transform: none; }
.lib-detail { margin-top: 16px; padding: clamp(16px, 2.4vw, 28px); border-radius: 20px; background: var(--surface); border: 1px solid var(--hair); box-shadow: var(--shadow); }
.lib-detail:focus { outline: none; }
.lib-detail-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.lib-detail-head h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 650; letter-spacing: -.02em; }
.lib-detail-head .lead { margin-top: 6px; }
.lib-detail-body { display: grid; gap: 22px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.lib-detail h3 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* WIKI: the article uses the content width; only its text runs keep a readable measure. Pictures keep their ratio. */
/* WIKI V2 (Kim 2026-10-19, "a lot of right padding"): no max-width on prose. The text runs to the article's edge at
   every width; the reading size comes from the font size above, never from a cap that leaves an empty column. */
.wiki-page figure { margin: 14px 0; }
.wiki-page figure img { display: block; width: auto; height: auto; max-width: 100%; border: 1px solid var(--hair); }
/* Never upscaled: portal-app.js caps each picture at its own pixel width (inline max-width: min(100%, <w>px)). */
.wiki-page figure.fig-small { display: inline-block; vertical-align: top; margin: 10px 16px 10px 0; max-width: 220px; }
.wiki-page figcaption { margin-top: 6px; }
.wiki-page .render-tag { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); border: 1px solid var(--hair); border-radius: 6px; padding: 0 6px; margin-right: 6px; }
.wiki-page .lead { font-size: 18px; color: var(--ink-2); }
.wiki-page .small, .wiki-page .src { font-size: 14px; color: var(--ink-2); }
.wiki-page .muted { color: var(--ink-3); }
.wiki-page .kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.wiki-page .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; margin: 12px 0 18px; }
.wiki-page .cards.two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.wiki-page .card { background: var(--surface-2); border: 1px solid var(--hair); border-top: 3px solid var(--tone, var(--violet)); border-radius: 16px; padding: 14px 16px; }
.wiki-page .card.support { border-top-color: #F00EF9; } .wiki-page .card.stem { border-top-color: var(--ptr-blue); }
.wiki-page .card h4 { margin: 2px 0 4px; }
.wiki-page .ic { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 10px; background: var(--indigo-soft); margin-right: 6px; vertical-align: middle; }
.wiki-page .script { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 14px 14px 0; padding: 12px 16px; margin: 14px 0; }
.wiki-page .note { border-left: 3px solid var(--violet); background: var(--indigo-soft); border-radius: 0 14px 14px 0; padding: 10px 16px; margin: 14px 0; font-size: 15px; }
.wiki-page .script .label, .wiki-page .note .label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.wiki-page .note .label { color: var(--violet); }
.wiki-page .callout.warn { border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); border-radius: 16px; padding: 6px 18px 12px; margin: 16px 0; }
.wiki-page .inpage { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 16px; padding: 6px 18px 12px; margin: 16px 0; }
.wiki-page .inpage .small-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 10px 0 4px; }
.wiki-page .table-wrap { margin: 10px 0 18px; border: 1px solid var(--hair); border-radius: 14px; }
.wiki-page .table-wrap table { margin: 0; display: table; }
.wiki-page td.t { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wiki-page .timeline { display: flex; gap: 3px; margin: 8px 0 4px; border-radius: 12px; overflow: hidden; min-height: 52px; }
.wiki-page .timeline .seg { background: var(--tone, var(--violet)); color: #fff; padding: 6px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.wiki-page .timeline .seg span { font-size: 12px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.wiki-page .prompts .q { font-weight: 600; margin: 16px 0 6px; }
.wiki-page .q .n, .wiki-page .prompts .n { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; align-items: center; justify-content: center; font-size: 13px; margin-right: 8px; }
.wiki-page .answer { min-height: var(--h, 64px); border: 1px dashed var(--hair-2); border-radius: 12px; margin: 4px 0 12px; }
.wiki-page .cbx::before, .wiki-page .ticks li::before { content: ""; display: inline-block; width: 15px; height: 15px; border: 1.5px solid var(--ink-2); border-radius: 3px; margin-right: 7px; vertical-align: -2px; }
.wiki-page .ticks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.wiki-page .kitdoc .row, .wiki-page .raw .row { display: flex; gap: 12px; flex-wrap: wrap; }
.wiki-page .grid2, .wiki-page .grid3, .wiki-page .kitdoc .two { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.wiki-page .kitdoc figure[style], .wiki-page .kitdoc .row > div[style] { width: auto !important; }
.wiki-page code { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 6px; padding: 0 5px; font-size: .9em; }
.wiki-page .chip { min-height: 0; line-height: 1.6; }
/* ------------------------------------------------------------------ wiki v2: one card, workbook, audio */
/* No card inside the article card: a workbook part is a section with a rule above it, not a second boxed card. */
.wiki-page section.card { background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 6px 0 0; margin: 18px 0 0; }
.wiki-page .table-wrap { width: 100%; max-width: 100%; }
/* Workbook fields (portal-workbook.js; contract in its header). Full width, real controls, 44 px targets. */
.wiki-page .wb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 14px; }
.wiki-page .wb-status { font-size: 13px; color: var(--ink-3); min-height: 1em; }
.wiki-page .wb-field { margin: 6px 0 16px; }
.wiki-page .wb-field .wb-label { display: block; font-weight: 600; margin: 0 0 6px; }
.wiki-page .wb-input { display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--hair-2); border-radius: 12px; }
.wiki-page textarea.wb-input { min-height: 112px; resize: vertical; line-height: 1.5; }
.wiki-page .wb-input:focus-visible, .wiki-page .wb-option input:focus-visible, .wiki-page .wb-tick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiki-page .wb-tick { width: 22px; height: 22px; margin: 0 10px 0 0; vertical-align: middle; accent-color: var(--violet); }
.wiki-page .wb-field.wb-check .wb-label { display: inline; font-weight: 500; }
.wiki-page .wb-field.wb-check { display: flex; align-items: center; min-height: 44px; }
.wiki-page .wb-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.wiki-page .wb-group legend { padding: 0; }
.wiki-page .wb-scale, .wiki-page .wb-options { display: flex; flex-wrap: wrap; gap: 8px; }
.wiki-page .wb-option { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 6px 14px; border: 1px solid var(--hair-2); border-radius: 999px; cursor: pointer; }
.wiki-page .wb-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--violet); }
.wiki-page .wb-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
/* Spoken lines: a small round play/pause before the line; the line playing in a scene is marked. */
.wiki-page .wb-audio { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 2px 6px 2px 0; }
.wiki-page .wb-audio.wb-current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.wiki-page .wb-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink); font-size: 13px; cursor: pointer; }
.wiki-page .wb-play[aria-pressed="true"] { background: var(--accent); color: #05060a; border-color: var(--accent); }
.wiki-page .wb-play.wb-failed { opacity: .5; }
.wiki-page .wb-play:focus-visible, .wiki-page .wb-scene:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiki-page .wb-audio-scene { margin: 10px 0; }
/* Wiki 3.0 (portal-workbook.js). One speed control per page; play the whole part; language buttons; folds. */
.wiki-page .wb-speed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 14px; }
.wiki-page .wb-speed-label { font-size: 13px; color: var(--ink-3); margin-right: 4px; }
.wiki-page .wb-rate, .wiki-page .wb-lang-tab { min-height: 44px; min-width: 52px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.wiki-page .wb-rate[aria-pressed="true"], .wiki-page .wb-lang-tab[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.wiki-page .wb-rate:focus-visible, .wiki-page .wb-lang-tab:focus-visible, .wiki-page .wb-part:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiki-page .wb-audio-part { margin: 10px 0 16px; }
.wiki-page .wb-part[aria-pressed="true"], .wiki-page .wb-scene[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.wiki-page .wb-lang-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.wiki-page [data-lang][hidden] { display: none; }
.wiki-page .wb-audio.wb-current { scroll-margin-top: calc(var(--topbar, 64px) + 16px); scroll-margin-bottom: 24px; }
.wiki-page .wb-caption { color: var(--ink-3); font-style: italic; }
.wiki-page details.for-trainers, .wiki-page details.choice-outcome { margin: 12px 0 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface-2); }
.wiki-page details.for-trainers { border-left: 3px solid var(--violet); }
.wiki-page details.for-trainers > summary, .wiki-page details.choice-outcome > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-weight: 600; list-style: none; }
.wiki-page details.for-trainers > summary::-webkit-details-marker, .wiki-page details.choice-outcome > summary::-webkit-details-marker { display: none; }
.wiki-page details.for-trainers > summary::after, .wiki-page details.choice-outcome > summary::after { content: "+"; margin-left: auto; color: var(--ink-3); }
.wiki-page details.for-trainers[open] > summary::after, .wiki-page details.choice-outcome[open] > summary::after { content: "\2212"; }
.wiki-page details.for-trainers > summary { color: var(--violet); }
.wiki-page details.for-trainers > summary:focus-visible, .wiki-page details.choice-outcome > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.wiki-page details.for-trainers > :not(summary), .wiki-page details.choice-outcome > :not(summary) { margin-left: 14px; margin-right: 14px; }
.wiki-page details.for-trainers[open], .wiki-page details.choice-outcome[open] { padding-bottom: 6px; }
/* Wiki 3.0 builder markup (CONTRACT.md section 12). */
.wiki-page .wb-script { margin: 8px 0 20px; }
.wiki-page .wb-part-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 12px; }
.wiki-page .wb-part-head .wb-audio-part, .wiki-page .wb-part-head .wb-speed { margin: 0; }
.wiki-page .wb-scene-time { font-size: 13px; color: var(--ink-3); }
.wiki-page section.wb-scene { margin: 18px 0 8px; }
.wiki-page .wb-line { margin: 0 0 10px; }
.wiki-page .wb-speaker { font-weight: 600; margin-right: 4px; }
.wiki-page .wb-text { overflow-wrap: anywhere; }
/* Read mode: one speaker's sentence over several clips is one paragraph; each clip's button sits inside the sentence. */
.wiki-page .wb-line.wb-joined { display: block; line-height: 1.9; }
.wiki-page .wb-joined .wb-audio.wb-seg { display: inline; padding: 2px 2px; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.wiki-page .wb-joined .wb-audio.wb-seg.wb-current { box-shadow: none; }
.wiki-page .wb-joined .wb-seg .wb-play { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 4px 0 0; padding: 0; vertical-align: -6px; font-size: 11px; position: relative; }
/* The visible button is 30 px inside running text; its touch target is still 44 px. */
.wiki-page .wb-joined .wb-seg .wb-play::before { content: ""; position: absolute; inset: -7px; }
.wiki-page .wb-line.wb-sound, .wiki-page .wb-sound .wb-text { color: var(--ink-3); font-style: italic; }
.wiki-page .wb-onscreen { padding: 6px 12px; border-left: 3px solid var(--hair-2); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.wiki-page .wb-onscreen-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.wiki-page section.wb-choicept { margin: 16px 0 20px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 14px; background: var(--accent-soft); }
.wiki-page .wb-choice { margin: 0 0 8px; }
.wiki-page .wb-choice-head { margin: 0 0 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.wiki-page .wb-choice-prompt { margin: 0 0 8px; font-weight: 600; }
.wiki-page .wb-choice-prompt q { quotes: "\201C" "\201D"; }
.wiki-page ul.wb-choice-options { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.wiki-page ul.wb-choice-options li { margin: 0; padding: 6px 12px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--surface); }
.wiki-page .wb-option { font-weight: 600; }
.wiki-page section.wb-choicept details.choice-outcome { background: var(--surface); margin-bottom: 0; }
.wiki-page ul.wb-outcome-list { list-style: none; padding: 0; margin: 4px 0 8px; }
.wiki-page ul.wb-outcome-list > li { padding: 8px 0; border-top: 1px solid var(--hair); }
.wiki-page ul.wb-outcome-list > li:first-child { border-top: 0; }
.wiki-page .wb-goto { display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px; font-size: 14px; }
.wiki-page .wb-branch { margin: 6px 0 0; padding-left: 12px; border-left: 2px solid var(--hair); }
.wiki-page details.wb-branch-scene > summary.wb-verbatim { font-weight: 500; }
.wiki-page .wb-choice-notes { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--hair-2); font-size: 15px; }
.wiki-page section.wb-reflect { margin: 20px 0; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface-2); }
.wiki-page .for-trainers-body { padding: 4px 0 6px; }
.wiki-page sup.wb-cite { font-size: .72em; line-height: 0; margin-left: 2px; }
.wiki-page sup.wb-cite a { text-decoration: none; padding: 0 2px; }
.wiki-page sup.wb-cite a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.wiki-page section.wiki-sources { margin: 32px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--ink-2); }
.wiki-page section.wiki-sources h2 { font-size: 17px; margin-top: 0; }
.wiki-page section.wiki-sources ol { padding-left: 22px; }
.wiki-page section.wiki-sources li:target, .wiki-page section.wb-scene:target { background: var(--accent-soft); border-radius: 8px; }
.wiki-page [id^="source-"], .wiki-page section.wb-scene, .wiki-page section.wb-choicept { scroll-margin-top: calc(var(--topbar, 64px) + 16px); }
/* Interactive wiki (CONTRACT.md section 14): choose, quiz, practice, poll. Every control is a 44 px target. */
.wiki-page .wb-choose, .wiki-page .wb-quiz, .wiki-page .wb-practice, .wiki-page .wb-poll { margin: 16px 0 20px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface-2); }
.wiki-page .wb-choose { border-color: var(--accent); }
.wiki-page .wb-choose-head { margin: 0 0 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.wiki-page .wb-choose-prompt, .wiki-page .wb-quiz-q, .wiki-page .wb-quiz-question, .wiki-page .wb-poll-q, .wiki-page .wb-poll-question { margin: 0 0 8px; font-weight: 600; }
.wiki-page .wb-choose-prompt q { quotes: "\201C" "\201D"; }
.wiki-page .wb-choose-picked { margin: 0 0 6px; color: var(--ink-3); }
.wiki-page ul.wb-choose-options { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 8px; }
.wiki-page ul.wb-choose-options li { margin: 0; }
.wiki-page .wb-choose-option, .wiki-page .wb-poll-option { min-height: 44px; min-width: 44px; padding: 8px 16px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.wiki-page .wb-choose-option[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.wiki-page .wb-choose-option:disabled { opacity: .55; cursor: default; }
.wiki-page .wb-choose-option:focus-visible, .wiki-page .wb-poll-option:focus-visible, .wiki-page .wb-choose-outcome:focus-visible, .wiki-page .wb-rec button:focus-visible, .wiki-page .wb-choose-reset:focus-visible, .wiki-page .wb-poll-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiki-page .wb-choose-outcome { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.wiki-page .wb-choose details.choice-outcome { background: var(--surface); }
.wiki-page .wb-practice-record { margin: 0; }
.wiki-page .wb-choose-reset, .wiki-page .wb-poll-reset, .wiki-page .wb-rec .btn { min-height: 44px; }
.wiki-page .wb-choose-reset { margin-top: 8px; }
.wiki-page .wb-choose-status:empty, .wiki-page .wb-quiz-status:empty, .wiki-page .wb-rec-status:empty { display: none; }
.wiki-page .wb-choose-status, .wiki-page .wb-quiz-status, .wiki-page .wb-rec-status { margin: 8px 0 0; }
.wiki-page .wb-quiz .wb-option.wb-right { background: var(--accent-soft); border-color: var(--accent); }
.wiki-page .wb-quiz .wb-option.wb-wrong { border-style: dashed; color: var(--ink-3); }
.wiki-page .wb-quiz-status { font-weight: 600; }
.wiki-page .wb-quiz-result { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--hair); }
.wiki-page .wb-quiz-result > * { margin: 0 0 6px; }
.wiki-page .wb-practice .wb-audio { margin: 0 0 10px; }
.wiki-page .wb-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.wiki-page .wb-rec-start[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.wiki-page .wb-rec-start[aria-pressed="true"]::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #e5484d; }
.wiki-page .wb-rec-status { flex-basis: 100%; }
.wiki-page .wb-rec-privacy { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--ink-3); }
.wiki-page .wb-poll-options { display: flex; flex-wrap: wrap; gap: 8px; }
.wiki-page .wb-poll-option { display: inline-flex; align-items: center; gap: 10px; }
.wiki-page .wb-poll-count { min-width: 2ch; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.wiki-page .wb-poll-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.wiki-page .wb-poll-total { margin: 0; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .wiki-page, .wiki-page * { scroll-behavior: auto !important; transition: none !important; } }
/* A statue on the rooftop opens /library#row-<collection>: the heading lands below the sticky bar, not under it. */
.lib-row h2[id] { scroll-margin-top: calc(var(--topbar) + 16px); }

/* ------------------------------------------------------------------ round 2 (Kim 2026-10-19) */
/* No empty space on any signed-in page: grids stretch their cards to the gutter (auto-fit), whatever the width. */
.grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.narrow { max-width: none; }
.narrow .form { max-width: 560px; }

/* Language: one button in the bar (globe + EN / DE / FR) with a small menu of the four choices. */
.lang-ctl { position: relative; display: inline-flex; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.lang-btn:hover { background: var(--surface-2); border-color: var(--hair); }
.lang-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--hair-2); }
.lang-btn svg { width: 18px; height: 18px; flex: none; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 75; min-width: 220px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.lang-menu[hidden] { display: none; }
.lang-menu button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: 15px; text-align: left; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: var(--surface-2); }
.lang-menu button[aria-checked="true"] { background: var(--accent-soft); }
.lang-menu .lang-abbr { min-width: 48px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
@media (max-width: 379px) { .lang-btn { padding: 0 6px; gap: 4px; } }

/* Library header: compact and sticky under the bar; filters, search and count on ONE row from 768 px. */
.lib-page { gap: 14px; }
.lib-head { position: sticky; top: var(--topbar); z-index: 30; margin: -20px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) 10px; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; }
.lib-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.lib-title h1 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 650; letter-spacing: -.02em; }
.lib-title .lead { font-size: 14px; color: var(--ink-2); }
.lib-title .lib-store { font-size: 14px; margin: 0; flex-basis: 100%; }
.lib-title .lib-store a { color: var(--accent, inherit); text-decoration: underline; text-underline-offset: 2px; }
.lib-head .lib-tools { flex-wrap: nowrap; gap: 10px; justify-content: flex-start; min-width: 0; }
.lib-head .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 0 1 auto; }
.lib-head .chips::-webkit-scrollbar { display: none; }
.lib-head .chip { flex: none; }
.lib-head .lib-tools .input { flex: 0 1 280px; max-width: 280px; min-height: 44px; }
.lib-head .lib-count { margin-left: auto; white-space: nowrap; }
.lib-search-btn { display: none; }
@media (max-width: 767px) {
  .lib-title .lead { display: none; }
  .lib-search-btn { display: inline-grid; flex: none; }
  .lib-head .lib-tools .input { display: none; }
  .lib-head .lib-count { display: none; }
  .lib-head .lib-tools.search-open .chips { display: none; }
  .lib-head .lib-tools.search-open .input { display: block; flex: 1 1 auto; max-width: none; }
}
.lib-rows { gap: 26px; }
.lib-row h2 { margin-top: 0; }

/* Cards: round language badges (DE, FR) on the image; the module name above a scenario's title. */
.lang-badges { position: absolute; top: 12px; right: 12px; z-index: 1; display: flex; gap: 4px; }
.lang-dot { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.92); color: #0b0b12; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.lang-dot.draft { background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1.5px rgba(11,11,18,.45); }
.lib-detail .lang-badges { position: static; }
.lib-detail .lang-dot { background: var(--surface-3); color: var(--ink); }
.media-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.detail-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }

/* Kim 2026-10-19: the PTR rainbow glow on hover and keyboard focus for every button, in BOTH themes (it was cyan only
   in dark). Brand F00EF9 A567F1 80EDEF 41BBF5. Motion (the lift) is dropped under reduced motion; the glow stays. */
.btn:hover:not(:disabled), .btn:focus-visible, .chip:hover, .chip:focus-visible, .lang-btn:hover, .lang-btn:focus-visible, .icon-btn:hover, .icon-btn:focus-visible, .pill-cta:hover, .pill-cta:focus-visible {
  box-shadow: 0 0 0 1px rgba(165,103,241,.55), 0 6px 22px rgba(240,14,249,.22), 0 0 28px rgba(65,187,245,.28);
}
html[data-theme="light"] .btn:hover:not(:disabled), html[data-theme="light"] .btn:focus-visible, html[data-theme="light"] .chip:hover, html[data-theme="light"] .chip:focus-visible, html[data-theme="light"] .lang-btn:hover, html[data-theme="light"] .icon-btn:hover {
  box-shadow: 0 0 0 1px rgba(106,63,201,.45), 0 6px 22px rgba(161,0,155,.16), 0 0 24px rgba(10,98,160,.18);
}
@media (prefers-reduced-motion: reduce) { .btn:hover, .icon-btn:hover, .pill-cta:hover, .media-hit:hover { transform: none !important; } }

/* Kim 2026-10-19: library cards are 16:9. The picture (16:9 box, cover, never stretched) carries the format tag and the
   language circles; the title and one line sit on a panel under it. More cards per row on desktop; a phone row shows
   one card at about 85% width so the next one peeks. */
.media-row { grid-auto-columns: 85%; }
@media (min-width: 768px) { .media-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); } }
.media-hit { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hair); }
.media-art { position: relative; inset: auto; aspect-ratio: 16 / 9; width: 100%; flex: none; overflow: hidden; }
.media-art img { position: absolute; inset: 0; }
.media-art.fallback { display: grid; }
.media-art.fallback img { position: static; }
.media-panel { position: static; inset: auto; margin: 0; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 12px 14px 14px; flex: 1; }
.media-title { color: var(--ink); font-size: 16px; }
.media-line { color: var(--ink-2); }
.media-eyebrow { color: var(--ink-3); }

/* ------------------------------------------------------------------ wiki 3.1: Facilitate steps and present mode */
/* CONTRACT.md section 13 (portal-workbook.js hydratePresent). On the page: steps, the words to say, the questions. */
.wiki-page .wb-step { border-top: 1px solid var(--hair); margin: 22px 0 0; padding: 4px 0 0; scroll-margin-top: calc(var(--topbar, 56px) + 16px); }
.wiki-page .wb-step h2 .wb-step-min, .wiki-page .wb-steps-total { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; vertical-align: middle; }
.wiki-page .wb-step h2 .wb-step-min { margin-left: 8px; }
.wiki-page .wb-say { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; font-size: 1.08em; }
.wiki-page .wb-say-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--accent); margin: 0 0 4px; }
.wiki-page .wb-say-body > p:last-child, .wiki-page .wb-say > p:last-child { margin-bottom: 0; }
.wiki-page .wb-ask { font-weight: 600; }
.wiki-page .wb-present-entry { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.wiki-page .wb-present-open { min-height: 44px; }
/* Present mode: one step on the room screen. Full screen when the browser allows it, else fixed over the page. */
html.wb-present-lock { overflow: hidden; }
.wiki-page .wb-present { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--bg); color: var(--ink); padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.wiki-page .wb-present[hidden] { display: none; }
.wiki-page .wb-present:focus { outline: none; }
.wiki-page .wb-present::backdrop { background: var(--bg); }
.wiki-page .wb-present-top, .wiki-page .wb-present-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px clamp(16px, 3vw, 40px); }
.wiki-page .wb-present-top { border-bottom: 1px solid var(--hair); }
.wiki-page .wb-present-foot { border-top: 1px solid var(--hair); justify-content: space-between; }
.wiki-page .wb-present-progress { font-weight: 600; font-size: clamp(16px, 1.4vw, 22px); }
.wiki-page .wb-present-total { color: var(--ink-3); font-size: clamp(14px, 1.1vw, 18px); margin-right: auto; }
.wiki-page .wb-present-langs { margin: 0; }
.wiki-page .wb-present-notes, .wiki-page .wb-timer-go, .wiki-page .wb-timer-reset { min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.wiki-page .wb-present-notes[aria-pressed="true"], .wiki-page .wb-timer-go[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.wiki-page .wb-present button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiki-page .wb-present-exit, .wiki-page .wb-present-back, .wiki-page .wb-present-next { min-height: 48px; }
.wiki-page .wb-present-next, .wiki-page .wb-present-back { min-width: 120px; font-size: clamp(16px, 1.3vw, 20px); }
.wiki-page .wb-present-track { height: 4px; background: var(--hair); }
.wiki-page .wb-present-fill { height: 100%; width: 0; background: var(--accent); }
.wiki-page .wb-present-stage { overflow-y: auto; overscroll-behavior: contain; padding: clamp(16px, 4vw, 64px) clamp(16px, 6vw, 96px); font-size: clamp(20px, 1rem + 1vw, 30px); line-height: 1.45; }
.wiki-page .wb-present-stage > .wb-step { margin: 0; padding: 0; border: 0; }
.wiki-page .wb-present-stage .wb-step > h2 { font-size: clamp(32px, 1.6rem + 2.6vw, 72px); line-height: 1.1; margin: 0 0 .6em; }
.wiki-page .wb-present-stage .wb-say { font-size: clamp(26px, 1.2rem + 2.2vw, 56px); line-height: 1.3; margin: .5em 0 .7em; padding: .5em .8em; border-left-width: 6px; }
.wiki-page .wb-present-stage .wb-say-label { font-size: max(13px, .4em); margin-bottom: .3em; }
.wiki-page .wb-present-stage .wb-step h2 .wb-step-min { font-size: max(14px, .3em); }
.wiki-page .wb-present-stage .wb-ask { font-size: clamp(24px, 1.1rem + 1.8vw, 48px); line-height: 1.3; margin: .6em 0; }
.wiki-page .wb-present-stage .wb-play { width: 64px; height: 64px; font-size: 20px; }
.wiki-page .wb-present-stage .wb-joined .wb-seg .wb-play, .wiki-page .wb-present-stage .wb-audio.wb-seg .wb-play { width: 56px; height: 56px; }
.wiki-page .wb-present .wb-say-off { display: none; }
.wiki-page .wb-present-stage .wb-speed { display: none; }
.wiki-page .wb-present:not(.wb-notes-on) details.for-trainers { display: none; }
.wiki-page .wb-timer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wiki-page .wb-timer[hidden], .wiki-page .wb-present-mins[hidden], .wiki-page .wb-present-total[hidden], .wiki-page .wb-present-langs[hidden] { display: none; }
.wiki-page .wb-present-mins { color: var(--ink-3); font-size: 15px; }
.wiki-page .wb-present-stage:has(.wb-step-min) ~ .wb-present-foot .wb-present-mins { display: none; }
.wiki-page .wb-timer-clock { font-variant-numeric: tabular-nums; font-weight: 600; font-size: clamp(28px, 1.2rem + 2vw, 52px); min-width: 4.2ch; text-align: center; transition: color .6s ease; }
.wiki-page .wb-timer.wb-timer-done .wb-timer-clock { color: var(--warn); }
.wiki-page .wb-present-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .wiki-page .wb-present-foot { justify-content: center; } .wiki-page .wb-timer { order: -1; width: 100%; justify-content: center; } .wiki-page .wb-present-next, .wiki-page .wb-present-back { flex: 1 1 0; min-width: 0; } }
@media (prefers-reduced-motion: no-preference) { .wiki-page .wb-present-stage > .wb-step { animation: wbStepIn .28s ease both; } .wiki-page .wb-present-fill { transition: width .3s ease; } }
@media (prefers-reduced-motion: reduce) { .wiki-page .wb-timer-clock { transition: none; } }
@keyframes wbStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media print { .wiki-page .wb-present-entry { display: none !important; } }

/* customer-ready 2026-10-21 -------------------------------------------------------------------------------------
 * A statue on Home opens /library#row-...: the row heading clears the topbar AND the sticky library header.
 * Every wiki heading a link can target clears the topbar. A card shows a quiet block while its picture loads.
 * The wiki menu folds on a phone (portal-app.js screenWiki); from 900 px its summary is not shown.
 * Two actions in an empty state sit centred, side by side. */
.lib-row h2[id] { scroll-margin-top: calc(var(--topbar, 64px) + 148px); }
.wiki-page h2[id], .wiki-page h3[id] { scroll-margin-top: calc(var(--topbar, 64px) + 16px); }
.media-art { background: var(--hair); }
.wiki-menu { display: flex; flex-direction: column; gap: 12px; }
.wiki-menu > summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--hair-2); border-radius: 12px; font-weight: 600; cursor: pointer; }
.wiki-menu[open] > summary { margin-bottom: 12px; }
.wiki-menu > summary { list-style: none; }
.wiki-menu > summary::-webkit-details-marker { display: none; }
.wiki-menu > summary::after { content: '+'; margin-left: auto; font-weight: 400; font-size: 20px; }
.wiki-menu[open] > summary::after { content: '-'; }
@media (min-width: 900px) { .wiki-menu > summary { display: none; } }
.empty .row { justify-content: center; }
.embed-lang-note { margin: 0; }
/* The Home greeting kept for screen readers (.home-copy.sr-only): .home-copy above sets position and padding with the
 * same weight as .sr-only and comes later, so on a slow phone, before the rooftop arrived, the 1px-wide heading spilled
 * one giant letter per line into its padding (customer-ready 2026-10-21, 390 px, slow 4G). Two classes win. */
.home-copy.sr-only, .home:has(> .home-hero:not(:empty)) > .home-copy.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ THE SIGNED-OUT LANDING (Kim approved 2026-10-21)
 * Round-2 design (_work/portal-signup-landing-2026-10-21, R2-D desktop dark + light, R2-MB phone, R2-SD/R2-SMB sign
 * in). portal-app.js landingFrame() sets .landing on #auth for Create account and Sign in; .ld-bar whenever the
 * landing is on (the bar's door is "Free on Meta Quest"). PORTAL_LANDING=control removes both classes.
 * Desktop (1024 px and up): ONE centred grid, content column + card column, gap 32 / 40 / 48 px and max width
 * 1200 / 1280 / 1520 at 1280 / 1440 / 1920, card 420 / 440 / 480; the scene card stretches to the row so both columns
 * end together. Below 1024 px: the fountain card with the eyebrow and headline inside it, the form, the store line. */
.auth { --ld-gline: linear-gradient(90deg, #80EDEF, #6D57FF, #A567F1, #D16BFF); }
html[data-theme="light"] .auth { --ld-gline: linear-gradient(90deg, #0B6B75, #0A62A0, #6A3FC9, #A1009B); }
/* THE DIM LAYER (dark only; light has no shader). Text on the live field must pass WCAG AA in its brightest (cyan)
 * phase: a band at the bottom for the legal links (every signed-out screen, the old landing too, whose links measured
 * 2.5 to 3.6:1 there) and, on the landing, a radial behind the headline block. The field stays visible mid-page. */
.ld-dim { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(5,5,7,.86), rgba(5,5,7,.55) 7%, rgba(5,5,7,0) 16%); }
.auth.landing .ld-dim { background:
  radial-gradient(75% 58% at 22% 24%, rgba(5,5,7,.74), rgba(5,5,7,.42) 55%, rgba(5,5,7,0) 85%),
  linear-gradient(0deg, rgba(5,5,7,.86), rgba(5,5,7,.55) 7%, rgba(5,5,7,0) 16%),
  linear-gradient(180deg, rgba(5,5,7,.25), rgba(5,5,7,.12)); }
html[data-theme="light"] .ld-dim { display: none; }
html:not([data-theme="light"]) .auth-foot a { color: rgba(255,255,255,.72); }
/* The bar's store button: white pill, dark ink (19:1) in dark; dark pill, white ink in light. */
.btn.store-btn, .btn.store-btn:hover:not(:disabled) { gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border-color: transparent; background: #ffffff; color: #0b0b12; font-weight: 600; font-size: 15px; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 6px 22px rgba(65,187,245,.22); flex: none; }
.btn.store-btn svg { width: 22px; height: 22px; flex: none; }
html[data-theme="light"] .btn.store-btn, html[data-theme="light"] .btn.store-btn:hover:not(:disabled) { background: #0b0b12; color: #ffffff; box-shadow: 0 8px 28px rgba(20,24,40,.18); }
.auth.ld-bar .auth-bar { gap: 10px; }
@media (max-width: 767px) {
  .auth.ld-bar .auth-bar .lockup, .auth.ld-bar #authLang, .auth.ld-bar .auth-bar [data-theme-toggle] { display: none; }
  .auth.ld-bar .auth-bar .brand { min-width: 44px; }
  .auth.ld-bar .btn.store-btn { font-size: 14px; padding: 0 12px 0 10px; gap: 6px; }
  .auth.ld-bar .btn.store-btn svg { width: 20px; height: 20px; }
}
.drawer .lang-row .lang-menu { right: 0; left: auto; }

/* The landing frame, every width */
.auth.landing { gap: 0; padding: 0; align-items: stretch; }
.auth.landing .auth-bar { margin: 0; }
.ld-hero { min-width: 0; }
.ld-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ld-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.ld-h1 { font-size: 42px; line-height: 1.04; letter-spacing: -.03em; font-weight: 700; margin-top: 2px; }
.ld-lead { font-size: 16px; color: var(--ink-2); max-width: 33em; }
.ld-lead-2 { color: var(--ink); margin-top: -4px; }
.ld-lead-2 b { font-weight: 600; }
.ld-gl, .ld-fade { display: none; }
.ld-scene { position: relative; margin: 8px 0 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--hair); box-shadow: 0 20px 60px rgba(0,0,0,.55); background: #241a2a; }
html[data-theme="light"] .ld-scene { border-color: rgba(11,11,18,.12); box-shadow: 0 20px 50px rgba(20,24,40,.18); }
.ld-scene picture, .ld-scene .ld-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-scene .ld-img { object-fit: cover; object-position: 50% 42%; max-width: none; }
.ld-win-gl { position: absolute; left: 0; top: 0; z-index: 1; width: 55%; height: 3px; background: var(--ld-gline); box-shadow: 0 0 16px rgba(109,87,255,.7); }
.ld-win-gl::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 150px; background: linear-gradient(180deg, #80EDEF, transparent); }
html[data-theme="light"] .ld-win-gl::after { background: linear-gradient(180deg, #0B6B75, transparent); }
/* The strip sits on the photo in both themes, so it stays dark (as the approved light render). */
.ld-strip { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 16px; background: rgba(8,9,13,.9); border: 1px solid rgba(255,255,255,.12); color: #ffffff; }
.ld-qr { flex: none; line-height: 0; padding: 4px; border-radius: 10px; background: #ffffff; }
.ld-qr img { width: 123px; height: 123px; display: block; image-rendering: pixelated; }
.ld-strip-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ld-k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #80EDEF; font-weight: 700; }
.ld-strip-t { font-size: 17px; font-weight: 600; line-height: 1.25; }
.ld-strip-s { font-size: 13px; color: rgba(255,255,255,.74); }
.btn.ld-store, .btn.ld-store:hover:not(:disabled) { flex: none; min-height: 48px; padding: 0 18px; border-color: transparent; background: #ffffff; color: #0b0b12; font-weight: 600; font-size: 16px; }
.ld-store-line { display: none; }
.auth.landing .auth-card { position: relative; overflow: hidden; margin: 0; }
.auth.landing .auth-card::before { content: ""; position: absolute; left: 0; top: 0; width: 42%; height: 3px; background: var(--ld-gline); box-shadow: 0 0 14px rgba(109,87,255,.6); }
.ld-card-title { text-align: center; }
.ld-card-title h2 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.ld-card-title p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
/* The sign-up confirmation's instruction: its own paragraph, visible at every width (Codex R1 R2). */
.ld-confirm { color: var(--ink-2); font-size: 15px; text-align: center; }
.auth.landing .form { gap: 12px; }
.auth.landing .field { gap: 5px; }
.auth.landing .check { min-height: 24px; font-size: 14px; gap: 10px; }
.auth.landing .check input { width: 20px; height: 20px; min-width: 20px; margin-top: 1px; }
.auth.landing .status:empty { display: none; }
.auth.landing .auth-foot { min-height: 52px; align-items: center; padding: 10px 16px; }
.auth.landing .auth-foot a { min-height: 24px; display: inline-flex; align-items: center; }

/* Desktop: the grid */
@media (min-width: 1024px) {
  .auth.landing { --ld-cap: 644px; }
  .auth.landing .auth-main {
    flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 32px; align-content: center; justify-content: stretch;
    grid-template-rows: minmax(min(var(--ld-cap), calc(100vh - var(--topbar) - 52px - 44px)), auto);
    width: min(100% - 80px, 1200px); margin: 0 auto; padding: 0;
  }
  .auth.landing .ld-hero { display: flex; flex-direction: column; gap: 10px; align-self: stretch; min-height: 0; }
  .auth.landing .ld-scene { flex: 1 1 auto; min-height: 280px; }
  .auth.landing .auth-card { align-self: center; width: 100%; padding: 24px 26px; gap: 14px; }
  .auth.landing .ld-pair { grid-template-columns: 1fr; gap: 12px; }
  .ld-strip { gap: 12px; padding: 10px 12px; }
  .ld-strip-t { font-size: 15px; }
  .btn.ld-store { padding: 0 14px; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .btn.ld-store { display: none; } }
@media (min-width: 1400px) {
  .auth.landing { --ld-cap: 730px; }
  .auth.landing .auth-main { grid-template-columns: minmax(0, 1fr) 440px; column-gap: 40px; width: min(100% - 112px, 1280px); }
  .ld-h1 { font-size: 48px; }
  .ld-lead { font-size: 17px; }
  .auth.landing .auth-card { padding: 28px 30px; gap: 16px; }
  .auth.landing .ld-pair { gap: 12px; }
  .ld-strip { gap: 16px; padding: 12px 14px; }
  .ld-strip-t { font-size: 17px; }
  .btn.ld-store { padding: 0 18px; }
}
@media (min-width: 1800px) {
  .auth.landing { --ld-cap: 880px; }
  .auth.landing .auth-main { grid-template-columns: minmax(0, 1fr) 480px; column-gap: 48px; width: min(100% - 112px, 1520px); }
  .ld-eyebrow { font-size: 13px; }
  .ld-h1 { font-size: 60px; }
  .ld-lead { font-size: 19px; }
  .auth.landing .auth-card { padding: 34px 36px; gap: 18px; }
  .ld-card-title h2 { font-size: 27px; }
  .auth.landing .input, .auth.landing .select, .auth.landing .btn-primary { min-height: 52px; }
}

/* Phones and tablets: the scene card with the headline inside, then the form (the card never shrinks; the scene
 * absorbs the spare height between 150 and 330 px, so a 390 x 844 phone needs no scroll). */
@media (max-width: 1023px) {
  .auth.landing { min-height: 100vh; min-height: 100dvh; }
  .auth.landing .auth-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; width: min(100%, 560px); margin: 0 auto; min-height: 0; }
  .auth.landing .ld-hero { position: relative; display: flex; flex: 1 1 0; min-height: 150px; max-height: 330px; margin: 8px 12px 0; }
  .auth.landing .ld-scene { flex: 1 1 auto; margin: 0; min-height: 0; border-radius: 18px; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
  .ld-scene .ld-img { object-position: 50% 50%; }
  .ld-strip, .ld-win-gl, .ld-lead { display: none; }
  .ld-fade { display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,5,7,0) 30%, rgba(5,5,7,.55) 62%, rgba(5,5,7,.88) 100%); }
  .ld-copy { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; gap: 3px; color: #ffffff; }
  .ld-eyebrow { color: #ffffff; font-size: 11px; }
  .ld-h1 { font-size: 24px; line-height: 1.1; letter-spacing: -.02em; color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
  .ld-gl { display: block; width: 96px; height: 3px; margin-top: 4px; border-radius: 99px; background: linear-gradient(90deg, #80EDEF, #6D57FF, #A567F1, #D16BFF); box-shadow: 0 0 18px rgba(109,87,255,.55); }
  .auth.landing .auth-card { width: auto; margin: 10px 12px 0; padding: 16px 16px 12px; gap: 10px; border-radius: 18px; }
  html:not([data-theme="light"]) .auth.landing .auth-card { background: rgba(14,15,22,.96); }
  .auth.landing .auth-card::before { display: none; }
  .auth.landing .ld-card-title { text-align: left; }
  .ld-card-title h2 { font-size: 20px; }
  .ld-card-title p { display: none; } /* the form's subtitle only; the confirmation is .ld-confirm, never hidden */
  .auth.landing .ld-confirm { text-align: left; font-size: 14px; }
  .auth.landing[data-screen="signin"] .ld-card-title { display: none; }
  .auth.landing .form { gap: 9px; }
  .auth.landing .form-2 { grid-template-columns: 1fr 1fr; gap: 9px; }
  .auth.landing .field { gap: 3px; }
  .auth.landing .field label { font-size: 13px; }
  .auth.landing .input, .auth.landing .select { min-height: 44px; padding: 0 12px; border-radius: 11px; font-size: 16px; }
  .auth.landing .select { padding-right: 32px; }
  .auth.landing .check { font-size: 13px; }
  .auth.landing .tiny { font-size: 12px; }
  .auth.landing .auth-card .small { font-size: 13px; }
  .auth.landing .btn-primary { min-height: 48px; }
  .auth.landing .link-btn { align-self: center; }
  .auth.landing .ld-store-line { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 2px 16px 0; font-size: 14px; font-weight: 500; color: var(--accent); }
  .ld-store-line svg { width: 18px; height: 18px; flex: none; }
  .auth.landing .auth-foot { min-height: 0; padding: 6px 0 10px; gap: 16px; font-size: 12px; }
  /* On a phone the dim band reaches the store line too. */
  .auth.landing .ld-dim { background: linear-gradient(0deg, rgba(5,5,7,.88), rgba(5,5,7,.7) 12%, rgba(5,5,7,0) 24%); }
}
/* Short phones (Safari with both toolbars, about 664 px tall): the scene gives up height first (down to 80 px). */
@media (max-width: 767px) and (max-height: 720px) {
  .auth.landing .ld-hero { min-height: 80px; margin-top: 6px; }
  .auth.landing .auth-card { margin-top: 8px; padding-top: 14px; padding-bottom: 10px; }
  .auth.landing .ld-store-line { margin-top: 0; }
  .auth.landing .auth-foot { padding: 2px 0 6px; }
}