/* Moved from the retired legacy sheets (WAV-3249): declarations still in effect after the v3 sheets, in their original order. */
.brand {font-size:24px;font-weight:760;letter-spacing:-1.2px;white-space:nowrap;align-items:center;row-gap:9px;column-gap:9px}
.brand:hover {text-decoration-line:none}
.public-header {justify-content:space-between;padding-left:5.5%;padding-right:5.5%}
.footer {justify-content:space-between;align-items:center;padding-left:5.5%;padding-right:5.5%}
.sidebar .brand {font-size:22px}
.sidebar nav a:hover, .sidebar nav a.active {text-decoration-line:none}
.app-header {justify-content:space-between;align-items:center;height:76px;border-bottom:1px solid var(--line)}
.app-content {max-width:1600px}
.project-head {display:flex;align-items:center}
.project-head #page-title {white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;overflow-y:hidden}
.mobile-menu {display:none}
.skip {position:fixed;top:-100px;left:15px;z-index:200;padding-top:14px;padding-right:14px;padding-bottom:14px;padding-left:14px;border:2px solid var(--blue);background-color:var(--surface-l1)}
.skip:focus {top:10px}
@media (max-width: 1100px) {.sidebar .brand {font-size:19px}}
@media (max-width: 760px) {.public-header .brand {font-size:21px}}
@media (max-width: 760px) {.footer {flex-wrap:wrap}}
@media (max-width: 760px) {.sidebar {transform:translateX(-100%)}}
@media (max-width: 760px) {.mobile-menu {display:inline-flex}}
.public-header nav {min-width:0px}
.app-header #header-actions {min-width:0px}
.brand {font-size:27px;letter-spacing:-1.2px}
.public-header {padding-left:5.4%;padding-right:5.4%}
.footer {align-items:start;padding-left:7%;padding-right:7%}
.footer .brand {font-size:23px}
.footer > div:last-child p {text-align:right;color:var(--muted)}
.sidebar .brand {font-size:27px}
.sidebar nav .icon {width:23px;height:23px}
.app-header {height:73px}
.view-menu {position:relative}
.view-menu summary {display:flex;border:1px solid var(--line);border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;align-items:center;row-gap:20px;column-gap:20px;cursor:pointer;list-style-type:none;padding-top:12px;padding-right:16px;padding-bottom:12px;padding-left:16px}
.view-menu nav {display:grid;position:absolute;top:calc(100% + 7px);right:0px;z-index:10;border:1px solid var(--line);background-color:var(--surface-l1);border-bottom-right-radius:11px;border-top-left-radius:11px;box-shadow:rgb(9 9 11 / .1) 0px 4px 15px;padding-bottom:7px;padding-left:7px;padding-right:7px;padding-top:7px}
.view-menu nav a {padding-top:11px;padding-right:14px;padding-bottom:11px;padding-left:14px;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;color:var(--ink)}
.view-menu nav .active {background-color:var(--accent-soft);color:var(--blue)}
.share-project {margin-left:8px;padding-top:12px;padding-right:18px;padding-bottom:12px;padding-left:18px;font-size:16px}
@media (max-width: 1100px) {.sidebar .brand {font-size:23px}}
@media (max-width: 760px) {.public-header .brand {font-size:22px}}
@media (max-width: 760px) {.footer nav {flex-wrap:wrap}}
@media (max-width: 760px) {.footer > div:last-child p {text-align:left}}
@media (max-width: 760px) {.sidebar .brand {font-size:26px}}
@media (max-width: 760px) {.app-header #page-title {max-width:38vw}}
@media (max-width: 760px) {.app-header #header-actions {row-gap:6px;column-gap:6px;flex-wrap:nowrap}}
@media (max-width: 760px) {.share-project {min-height:38px;padding-top:9px;padding-right:9px;padding-bottom:9px;padding-left:9px;font-size:0px;row-gap:0px;column-gap:0px;margin-left:0px}}
@media (max-width: 760px) {.share-project .icon {width:19px}}
@media (max-width: 760px) {.view-menu summary {font-size:12px;white-space:nowrap;row-gap:7px;column-gap:7px;padding-top:9px;padding-right:9px;padding-bottom:9px;padding-left:9px}}
@media (max-width: 760px) {.view-menu summary .icon {width:13px}}
@media (min-width: 761px) {.footer .brand {font-size:21px}}
.brand {display:inline-flex;min-width:0;color:var(--ink)}
.brand-lockup {position:relative;display:block;width:174px;aspect-ratio:348/64}
.brand .brand-lockup img {width:100%;height:100%}
.brand-lockup::after {content:'';position:absolute;inset:0;background:var(--brand-ink);mask:url('/assets/wavemaker-logo.png') center/100% 100% no-repeat;mask-image:image-set(url('/assets/wavemaker-logo-174.png') 1x,url('/assets/wavemaker-logo.png') 2x);clip-path:inset(0 0 0 22%);pointer-events:none}
.brand img.brand-icon {display:none;width:32px;height:32px;object-fit:contain}
/* Public chrome (v3 Studio): one 64px row, full width with a 1200px measure. Brand left,
   section links centred, account right. The nav is a native popover so phones get a
   menu without script. Over the homepage hero the same row turns transparent and white. */
.public-header {--public-gutter:max(24px,calc((100% - 1200px) / 2));position:relative;z-index:30;display:flex;align-items:center;flex-wrap:nowrap;gap:16px;height:64px;min-height:64px;width:100%;max-width:none;margin:0;padding:0 var(--public-gutter);background:var(--canvas);border:0;border-bottom:1px solid var(--line);color:var(--ink)}
.public-header .brand {flex:1 1 0}
.public-header .brand-lockup {width:150px}
.public-header nav,.public-header nav[popover] {position:static;inset:auto;display:flex;opacity:1;transform:none;filter:none;transition:none;align-items:center;gap:2px;width:auto;height:auto;margin:0;padding:0;border:0;background:none;color:inherit;overflow:visible;font-size:14px;font-weight:450}
.public-header nav a,.public-header nav>a:first-child {position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--radius-pill);color:var(--muted);font-weight:450;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease)}
.public-header nav a:hover {color:var(--ink);background:var(--surface-hover);text-decoration:none}
/* Current section: ink text and a short bar on the header's baseline. */
.public-header nav a[aria-current=page] {color:var(--ink);font-weight:550;background:none}
.public-header nav a[aria-current=page]::after {content:'';position:absolute;left:50%;bottom:-13px;width:18px;height:2px;margin-left:-9px;border-radius:2px;background:currentColor}
.public-menu-toggle {display:none}
.public-actions {flex:1 1 0;display:flex;justify-content:flex-end;gap:8px;align-items:center}
.public-actions .public-account {display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--radius-pill);background:var(--ink);color:var(--fg-invert);font-size:14px;font-weight:500;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgb(9 9 11 / .2),inset 0 1px 0 rgb(255 255 255 / .1);transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}
.public-actions .public-account:hover {background:var(--ink-hover);border-color:var(--ink-hover);color:var(--fg-invert);text-decoration:none}
.public-actions .public-account[aria-current=page] {background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:none}
/* Over the cinematic homepage hero: transparent, white type, a white wordmark. */
body[data-page=landing] .public-header {position:absolute;inset:0 0 auto;background:transparent;border-bottom-color:rgb(255 255 255 / .08);color:var(--night-fg-1);--brand-ink:var(--night-fg-1)}
body[data-page=landing] .public-header nav a {color:var(--night-fg-2)}
body[data-page=landing] .public-header nav a:hover {color:var(--night-fg-1);background:rgb(255 255 255 / .1)}
body[data-page=landing] .public-header nav a:focus-visible,body[data-page=landing] .public-header .brand:focus-visible,body[data-page=landing] .public-actions a:focus-visible,body[data-page=landing] .public-menu-toggle:focus-visible {outline-color:var(--night-fg-1)}
body[data-page=landing] .public-actions .public-account {background:var(--night-fg-1);border-color:var(--night-fg-1);color:var(--night-base);box-shadow:none}
body[data-page=landing] .public-actions .public-account:hover {background:var(--night-fg-2);border-color:var(--night-fg-2);color:var(--night-base)}
/* Keeps the footer below the fold while a public route swaps its loading state for content. */
.public-header+#content {min-height:calc(100dvh - 64px)}
body[data-page=landing] .public-header+#content:has(>.home-page) {min-height:0}
/* Footer: brand and tagline beside three short link columns, then the legal line. */
.footer {--public-gutter:max(24px,calc((100% - 1200px) / 2));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px 48px;width:100%;margin:96px 0 0;padding:56px var(--public-gutter) 32px;background:var(--surface);border-top:1px solid var(--line);color:var(--ink)}
.footer-main {display:contents}
.footer-brand {display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer .brand-lockup {width:140px}
.footer .footer-tagline {margin:0;max-width:26ch;font-size:15px;line-height:1.5;color:var(--muted)}
.footer-columns {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px}
.footer nav,.footer-pair>div {display:flex;flex-direction:column;gap:2px;margin:0;font-size:14px;min-width:0}
.footer nav.footer-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.footer .footer-heading {margin:0 0 8px;font-size:13px;font-weight:550;line-height:1.4;color:var(--ink)}
.footer nav a {display:inline-flex;align-items:center;min-height:32px;color:var(--muted);text-decoration:none;width:max-content;max-width:100%}
.footer nav a:hover {color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.footer-legal {grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)}
.footer-legal p {margin:0;font-size:13px;line-height:1.5;color:var(--subtle)}
/* The homepage closes on the same near-black as its developer band. */
body[data-page=landing] .footer {margin-top:0;background:var(--night-base);border-top-color:var(--night-l2);color:var(--night-fg-1);--brand-ink:var(--night-fg-1);--line:var(--night-line)}
body[data-page=landing] .footer .footer-heading {color:var(--night-fg-1)}
body[data-page=landing] .footer nav a,body[data-page=landing] .footer-tagline {color:var(--night-fg-3)}
body[data-page=landing] .footer nav a:hover {color:var(--night-fg-1)}
body[data-page=landing] .footer-legal p {color:var(--night-fg-3)}
body[data-page=landing] .footer :focus-visible {outline-color:var(--night-fg-1)}
@media(max-width:900px) {
  .public-header {gap:8px}
  .public-header .brand-lockup {width:136px}
  .public-header nav a,.public-header nav>a:first-child {padding:0 10px}
  .footer {grid-template-columns:minmax(0,1fr);gap:32px;padding-block:44px 28px}
}
@media(max-width:760px) {
  .public-header {--public-gutter:16px;height:60px;min-height:60px}
  .public-header .brand-lockup {width:128px}
  .public-actions .public-account {min-height:44px;padding:0 18px}
  .public-menu-toggle {display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);box-shadow:none}
  .public-menu-toggle:hover {background:var(--surface-hover);border-color:var(--line-hover)}
  body[data-page=landing] .public-menu-toggle {background:rgb(255 255 255 / .08);border-color:rgb(255 255 255 / .18);color:var(--night-fg-1)}
  body[data-page=landing] .public-menu-toggle:hover {background:rgb(255 255 255 / .16)}
  .public-header nav[popover] {display:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),filter var(--dur-2) var(--ease-out)}
  .public-header nav[popover]:not(:popover-open) {opacity:0;transform:translateY(4px) scale(.98);filter:blur(4px)}
  @starting-style {.public-header nav[popover]:popover-open {opacity:0;transform:translateY(4px) scale(.98);filter:blur(4px)}}
  .public-header nav[popover]:popover-open {position:fixed;inset:68px 12px auto;display:grid;gap:2px;margin:0;padding:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);font-size:16px}
  .public-header nav[popover]:popover-open a,body[data-page=landing] .public-header nav[popover]:popover-open a {min-height:48px;padding:0 14px;border-radius:var(--radius-sm);color:var(--ink)}
  .public-header nav[popover]:popover-open a:hover {background:var(--surface-hover)}
  .public-header nav[popover]:popover-open a[aria-current=page] {background:var(--surface-pressed)}
  .public-header nav[popover]:popover-open a[aria-current=page]::after {display:none}
  .footer {margin-top:64px;padding:40px 16px 24px}
  .footer-columns {grid-template-columns:minmax(0,1fr);gap:28px}
  .footer nav.footer-pair {gap:16px}
  .footer nav[aria-label='Legal and support'] {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .footer nav[aria-label='Legal and support'] .footer-heading {grid-column:1/-1}
  .footer nav a {min-height:44px}
  .footer-legal {flex-direction:column;align-items:flex-start}
}
.app-shell {display:grid;grid-template-columns:var(--rail-width) minmax(0,1fr);height:100dvh;min-height:0;overflow:hidden;background:var(--canvas)}
.sidebar {position:relative;inset:auto;width:auto;height:100dvh;min-height:0;display:flex;flex-direction:column;padding:var(--rail-top) var(--rail-inset) var(--space-4);gap:0;background:var(--surface-base);border-right:1px solid var(--line);box-shadow:none;transform:none}
.rail-brand {display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);min-height:var(--rail-action-height);padding-left:.3rem;margin-bottom:var(--rail-brand-gap);flex-shrink:0}
.sidebar .brand {padding:0;margin:0}
.sidebar .brand-lockup {width:var(--rail-brand-width)}
.rail-body {min-height:0;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin}
.rail-scroll {flex:1 0 auto}
.sidebar nav {display:grid;gap:var(--rail-row-gap)}
.sidebar .shell-link {display:flex;align-items:center;justify-content:flex-start;gap:var(--rail-link-gap);padding:.63rem .8rem;min-height:46px;color:var(--muted);font-size:var(--text-label);border-radius:var(--radius-sm);line-height:1.55;min-width:0}
.sidebar .shell-link .icon,.sidebar .rail-brand .icon {width:var(--rail-icon);height:var(--rail-icon)}
.sidebar .shell-link:hover {background:var(--surface-raised);text-decoration:none}
.sidebar .shell-link.active {background:var(--accent-soft);color:var(--blue);font-weight:600}
.sidebar .new-chat {background:var(--blue);border-color:var(--blue);color:var(--surface);margin-bottom:var(--space-4);width:100%;height:var(--rail-action-height);min-height:var(--rail-action-height);padding:0 var(--space-4);font-size:var(--text-label);font-weight:650;border-radius:var(--radius-sm)}
.sidebar .new-chat:hover {background:var(--blue-dark)}
.rail-label {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-label strong,.rail-label small {display:block;overflow:hidden;text-overflow:ellipsis;font-size:var(--text-label)}
.rail-label small {font-size:var(--text-meta);margin-top:var(--space-1)}
.recent-conversations {margin-top:var(--space-6)}
.recent-conversations .shell-link {font-size:.85rem;min-height:0;padding:.65rem .8rem}
.sidebar-label {font-size:var(--text-meta);letter-spacing:.04em;color:var(--muted);font-weight:500;margin:0 .8rem var(--space-2)}
.recent-conversations>nav>p {padding:0 .8rem;white-space:normal}
.sidebar-bottom {border-top:0;padding-top:var(--space-6);margin-top:auto;flex-shrink:0}
.rail-collapse {justify-content:center;color:var(--muted);width:var(--rail-action-height);height:var(--rail-action-height);min-width:var(--rail-action-height);min-height:var(--rail-action-height);padding:var(--space-2);flex-shrink:0}
.rail-close,.mobile-menu {display:none}
.app-main {display:flex;flex-direction:column;min-height:0;min-width:0}
.app-header {min-height:var(--header-height);height:auto;flex-shrink:0;display:flex;flex-wrap:wrap;padding:var(--space-3) var(--header-inset);gap:var(--space-4);background:var(--surface);border-color:var(--line)}
.project-head {flex:1;min-width:0;gap:var(--space-5)}
.project-head #page-title {font-family:var(--font);font-size:var(--text-label);letter-spacing:0;color:var(--muted)}
.shell-workspace {min-width:0;max-width:18rem;display:grid;font-size:var(--text-label);line-height:1.4}
.shell-workspace strong {text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-weight:500}
.shell-workspace>span {font-size:var(--text-meta)}
.workspace-menu {position:relative}
.app-header {position:relative}
.app-header:has(.workspace-menu[open]) {z-index:40}
.workspace-menu>summary {display:flex;align-items:center;gap:var(--space-2);min-height:44px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.workspace-menu>summary .icon {flex-shrink:0}
.workspace-menu>summary .workspace-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px) {
 .workspace-menu {position:static}
}
.shell-creator {font-size:var(--text-label);white-space:nowrap}
/* Page layouts answer the width the page actually has (the rail takes its share), not the viewport. */
.app-content {flex:1;min-height:0;overflow:auto;width:100%;max-width:var(--content-width);padding:var(--space-8);margin:0 auto;container:content / inline-size}
.app-content>.container {padding:0}
:where(.app-content)>:where(.container) {max-width:none}
.app-content[data-chat] {overflow:hidden}
.chat-layout {max-width:1100px}
.conversation-scroll[data-welcome] {justify-content:safe center}
.conversation-scroll #agent-controls {position:sticky;bottom:0;z-index:2;background:var(--canvas)}
.composer textarea {font-family:var(--font);font-size:var(--text-body)}
.composer .send {background:var(--coral);color:var(--ink);border-color:var(--coral)}
.composer:focus-within {outline-color:var(--blue)}
.chat-welcome h1 {font-family:var(--font-display);color:var(--ink)}
.chat-message.agent-output::before,.chat-result h2::before {background-image:url('/assets/wavemaker-icon.png');background-size:contain}
.chat-welcome>img {content:url('/assets/wavemaker-icon.png');object-fit:contain;width:40px;height:40px}
.nav-scrim {display:none}
.staff-shell .app-header {border-bottom:3px solid var(--blue)}
@media(min-width:901px) {
  .rail-collapsed {grid-template-columns:var(--rail-collapsed) minmax(0,1fr)}
  .rail-collapsed .sidebar {padding-inline:var(--space-2)}
  .rail-collapsed .rail-label,.rail-collapsed .sidebar-label,.rail-collapsed .recent-conversations,.rail-collapsed .brand-lockup {display:none}
  .rail-collapsed .brand .brand-icon {display:block}
  .rail-collapsed .rail-brand {justify-content:center;flex-direction:column;padding:0;gap:var(--space-2)}
  .rail-collapsed .sidebar .brand {padding:0}
  .rail-collapsed .sidebar .shell-link,.rail-collapsed .rail-collapse {justify-content:center;padding-inline:var(--space-2)}
}
@media(max-width:900px) {
  .app-shell {display:block}
  .app-main {height:100dvh}
  .sidebar {position:fixed;inset:0 auto 0 0;width:min(300px,calc(100vw - 48px));z-index:80;transform:translateX(-100%);visibility:hidden;transition:transform var(--dur-3) var(--ease-out);box-shadow:var(--shadow)}
  .sidebar.open {transform:translateX(0);visibility:visible}
  .sidebar.open~.nav-scrim {display:block;position:fixed;inset:0;z-index:79;border:0;border-radius:0;background:var(--overlay)}
  .rail-close,.mobile-menu {display:inline-flex}
  .rail-collapse {display:none}
  .navigation-open {overflow:hidden}
  .app-header {padding:var(--space-3) var(--space-4);gap:var(--space-3)}
  .project-head {gap:var(--space-3)}
  .shell-workspace {max-width:min(45vw,18rem)}
  .project-head #page-title {display:none}
  .app-content {padding:var(--space-5) var(--space-4)}
}
@media(max-width:460px) {
  .page-heading {flex-wrap:wrap}
  .page-heading .actions {justify-content:flex-start}
  .app-header #header-actions {max-width:100%}
  .project-tabs {flex-wrap:wrap}
  .project-tabs a {flex:1;padding:var(--space-2)}
}

.project-head #page-title {margin:0;font-weight:700;line-height:1.25}

/* Signed-in rail (references 03/04/06/07): outlined New chat, plain rows, RECENT label, quiet footer. */
.app-shell .sidebar {background:var(--rail-surface);border-right:1px solid var(--line);font-family:var(--font)}
.app-shell .sidebar .new-chat {justify-content:flex-start;gap:12px;height:42px;min-height:42px;margin-bottom:10px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-l1);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgb(9 9 11 / .05)}
.app-shell .sidebar .new-chat:hover {background:var(--surface);border-color:var(--line-hover);box-shadow:var(--shadow-sm)}
/* The New chat shortcut appears on hover or keyboard focus, on pointer devices with an expanded rail. */
.rail-shortcut {margin-left:auto;font-size:11.5px;font-weight:500;letter-spacing:.04em;color:var(--subtle);opacity:0;transition:opacity var(--motion-fast) var(--motion-ease)}
.sidebar .new-chat:is(:hover,:focus-visible) .rail-shortcut {opacity:1}
@media(hover:none),(max-width:900px){.rail-shortcut {display:none}}
.rail-collapsed .rail-shortcut {display:none}
.app-shell .sidebar .shell-link {min-height:40px;padding:8px 12px;gap:12px;color:var(--ink);font-size:14px;border-radius:8px}
.app-shell .sidebar .shell-link .icon {width:18px;height:18px;color:var(--muted)}
.app-shell .sidebar .shell-link:hover {background:var(--rail-hover)}
.app-shell .sidebar .shell-link.active {background:var(--surface-pressed);color:var(--ink);font-weight:500}
.app-shell .sidebar nav[aria-label=Workspace] {padding-bottom:12px;border-bottom:1px solid var(--line)}
.app-shell .recent-conversations {margin-top:14px}
.app-shell .sidebar .sidebar-label {margin:0 12px 6px;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.app-shell .recent-conversations .shell-link {min-height:40px;padding:8px 12px;font-size:14px}
/* Account row: avatar, name and balance; the support and settings destinations open above it. */
.app-shell .sidebar-bottom {margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.app-shell .sidebar .shell-account {width:100%;height:auto;min-height:52px;margin:0;padding:8px;border:0;border-radius:10px;background:transparent;gap:10px;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.app-shell .sidebar .shell-account:hover,.app-shell .sidebar .shell-account[aria-expanded=true] {background:var(--rail-hover)}
.app-shell .sidebar .shell-account.active {background:var(--surface-pressed);font-weight:400}
.app-shell .sidebar .shell-account>.icon {flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover}
.app-shell .sidebar .shell-account>svg.icon {padding:6px;background:var(--surface-l3)}
.account-initials {display:grid;place-items:center;background:var(--surface-l3);color:var(--fg-2);font:600 12px/1 var(--font);letter-spacing:.02em}
.app-shell .sidebar .shell-account .rail-label {flex:1;line-height:1.3}
.app-shell .sidebar .shell-account .rail-label strong {font-size:14px;font-weight:500}
.app-shell .sidebar .shell-account .rail-label small {margin-top:2px;font-size:12px;color:var(--muted)}
.app-shell .sidebar .shell-account .account-meta {display:flex;gap:4px;min-width:0}
.app-shell .sidebar .shell-account .account-meta>span {flex:none;white-space:nowrap}
.app-shell .sidebar .shell-account .account-meta>.account-workspace {flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.account-menu-identity {display:flex;align-items:center;gap:10px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.account-menu-identity>.icon {flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover}
.account-menu-identity>span {display:grid;min-width:0;line-height:1.35}
.account-menu-identity strong,.account-menu-identity small {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-identity strong {font-size:14px;font-weight:550;color:var(--ink)}
.account-menu-identity small {font-size:12.5px;color:var(--muted)}
.app-shell .sidebar .account-selector {display:flex;flex:none;color:var(--muted)}
.app-shell .sidebar .account-selector .icon {width:16px;height:16px;color:inherit}
@media(min-width:901px){.rail-collapsed .sidebar nav[aria-label=Workspace] {border-bottom:0}.rail-collapsed .sidebar .shell-account {padding-inline:0;justify-content:center}.rail-collapsed .sidebar .account-selector {display:none}}
.account-menu {position:fixed;inset:auto;margin:0;width:240px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);font-family:var(--font)}
.account-menu::backdrop {background:transparent}
.sidebar .account-menu nav {gap:2px}
.account-menu-label {margin:8px 10px 4px;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.account-menu .workspace-options {display:grid;gap:2px}
.account-menu .workspace-options .account-menu-item:disabled {opacity:1;background:var(--surface-hover)}
.account-menu .workspace-options .account-menu-item .small {margin-left:auto;color:var(--muted);white-space:nowrap}
.account-menu hr {margin:4px 6px;border:0;border-top:1px solid var(--line)}
.account-menu .account-menu-item {display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:400 14px/1.4 var(--font);text-align:left;text-decoration:none}
.account-menu .account-menu-item:hover {background:var(--surface-hover);text-decoration:none}
.account-menu .account-menu-item[aria-current=page] {background:var(--surface-pressed);font-weight:500}
.account-menu .account-menu-item .icon {flex:none;width:18px;height:18px;color:var(--muted)}
.account-menu-item small {margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.account-menu-item small:empty {display:none}
@media(max-width:900px){.account-menu .account-menu-item {min-height:44px}}

/* Conversation status: a dot on each Recent row and a quiet line after the open conversation's title. */
.activity-dot {flex:none;width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.activity-dot[data-tone=live],.page-status[data-tone=live] .activity-dot {background:var(--success);animation:breathe 1.8s var(--ease-standard) infinite}
.activity-dot[data-tone=attention],.page-status[data-tone=attention] .activity-dot {background:var(--warning)}
.activity-dot[data-tone=error],.page-status[data-tone=error] .activity-dot {background:var(--error)}
.recent-conversations .shell-link .activity-dot {margin-left:auto}
/* The open conversation's state is a pill: tone colours the dot and fill, and the label always says it in words. */
.page-status {display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin:0;padding:3px 10px 3px 8px;border-radius:var(--radius-pill);background:var(--surface-raised);font-size:12.5px;font-weight:500;line-height:1.4;color:var(--muted);white-space:nowrap}
.page-status .activity-dot {width:7px;height:7px}
.page-status[hidden] {display:none}
.page-status[data-tone=none] .activity-dot {background:var(--success);animation:none}
.page-status[data-tone=stopped] .activity-dot {background:var(--line-strong)}
.page-status[data-tone=live] {background:var(--success-bg);color:var(--success)}
.page-status[data-tone=attention] {background:var(--warning-bg);color:var(--warning)}
.page-status[data-tone=error] {background:var(--error-bg);color:var(--error)}
.page-status[data-tone=attention] .page-status-label,.page-status[data-tone=error] .page-status-label {font-weight:600}
@media(max-width:760px){.page-status-elapsed {display:none}}

.app-shell:not(.staff-shell) .rail-body {overflow:hidden}
.app-shell:not(.staff-shell) .rail-scroll {display:flex;flex-direction:column;flex:1;min-height:0}
/* History: underline tabs like the Conversations page, a slim search field and dense rows. */
.app-shell .sidebar-history {display:flex;flex-direction:column;flex:1;min-height:0;margin-top:6px}
.history-tabs {display:flex;gap:16px;padding:0 12px;flex-shrink:0}
.app-shell .history-tabs button {min-height:34px;padding:0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:13px;font-weight:500}
.app-shell .history-tabs button:hover {color:var(--ink)}
.app-shell .history-tabs button[aria-pressed=true] {border-bottom-color:var(--blue);color:var(--blue);font-weight:600}
.history-search {position:relative;display:block;margin:6px 4px 4px;flex-shrink:0}
.history-search .icon {position:absolute;left:10px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.app-shell .history-search input {width:100%;min-width:0;min-height:32px;height:32px;padding:0 10px 0 31px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13px;line-height:1}
.history-search input::placeholder {color:var(--subtle)}
.history-scroll {flex:1;min-height:0;overflow:auto;scrollbar-width:thin;padding-bottom:6px}
.app-shell .history-group {margin:10px 12px 2px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.history-row {display:flex;align-items:center;min-width:0;border-radius:8px}
.history-row {transition:background-color var(--motion-fast) var(--motion-ease)}
.history-row:hover,.history-row:focus-within {background:var(--rail-hover)}
.history-row.selected {background:var(--surface-pressed)}
.app-shell .history-row .shell-link {flex:1;min-height:34px;padding:6px 4px 6px 12px;font-size:14px;background:transparent}
.app-shell .history-row .shell-link:hover {background:transparent}
.history-row.selected .shell-link {font-weight:500}
.history-row .rail-label {flex:1}
.app-shell .history-menu-trigger {flex:none;width:30px;height:30px;min-width:30px;min-height:30px;margin-right:2px;padding:6px;border:0;border-radius:6px;color:var(--muted);opacity:0}
.app-shell .history-menu-trigger:hover {background:var(--surface-pressed);color:var(--ink)}
.history-menu-trigger .icon {width:18px;height:18px}
.history-row:hover .history-menu-trigger,.history-row:focus-within .history-menu-trigger,.history-menu-trigger[aria-expanded=true] {opacity:1}
.app-shell .history-more {display:flex;justify-content:flex-start;width:100%;min-height:34px;margin-top:4px;padding:6px 12px;border:0;color:var(--blue);font-size:13px;font-weight:500}
.app-shell .history-more:hover {background:var(--rail-hover)}
.history-more[hidden] {display:none}
.history-status {margin:8px 12px;font-size:13px;line-height:1.45;color:var(--muted)}
.history-status:empty {display:none}
.history-status button {min-height:32px;margin-top:6px;padding:4px 10px;font-size:13px}
[data-history-recovery] button {width:100%;min-height:34px;margin:4px 0;font-size:13px}
[data-history-recovery]:empty {display:none}
.history-action-menu {position:fixed;inset:auto;margin:0;width:208px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}
.history-action-menu button {display:flex;justify-content:flex-start;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:6px;background:transparent;color:var(--ink);font-size:14px;font-weight:400}
.history-action-menu button:hover {background:var(--surface-raised)}
.history-action-menu [data-conversation-action=trash],.history-action-menu [data-conversation-action=delete] {color:var(--error)}
.history-action-menu::backdrop {background:transparent}
@media(hover:none){.app-shell .history-menu-trigger {opacity:1}}
@media(max-width:900px){
 .app-shell .history-tabs button,.app-shell .history-row .shell-link,.app-shell .history-more {min-height:44px}
 .app-shell .history-menu-trigger {width:40px;height:44px;min-height:44px;opacity:1}
 .app-shell .history-search input {height:40px;min-height:40px;font-size:16px}
 .history-action-menu button {min-height:44px}
}
@media(min-width:901px){.rail-collapsed .sidebar-history {display:none}}
@media(max-height:600px){
 .app-shell:not(.staff-shell) .rail-body {overflow:auto}
 .app-shell:not(.staff-shell) .rail-scroll {flex:1 0 auto}
 .sidebar-history,.history-scroll {flex:none;overflow:visible}
 .sidebar-bottom {max-height:none;overflow:visible}
}

/* Frame of reference (October 8 pass). Search lives in the rail under New chat and opens the
   command palette; pages that carry their own heading drop the duplicate title bar on desktop;
   a conversation's bar reads "Conversations / title" so readers always know where they are. */
.app-shell .sidebar .rail-search {width:100%;margin:0 0 8px;border:0;background:transparent;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.app-shell .sidebar .rail-search:hover {background:var(--rail-hover)}
.rail-key {margin-left:auto;padding:0 6px;border:1px solid var(--line);border-radius:5px;background:var(--surface);font:500 11px/18px var(--font);letter-spacing:.02em;color:var(--subtle);white-space:nowrap}
.rail-collapsed .rail-key {display:none}
@media(hover:none),(max-width:900px){.rail-key {display:none}}
.header-brand,.header-search {display:none}
@media(min-width:901px){
 .app-shell:not(.staff-shell):not([data-chat]) .app-header:not(:has(#header-actions:not(:empty))) {display:none}
 /* New chat carries its own greeting: no title bar above it (board Main). */
 .app-shell[data-welcome]:not(.staff-shell) .app-header:not(:has(#header-actions>:not([hidden]))) {display:none}
}
@media(max-width:900px){
 .app-shell .app-header {min-height:56px;height:56px;padding:8px 12px;gap:8px;flex-wrap:nowrap;align-items:center;border-bottom:1px solid var(--line)}
 .app-shell:not([data-chat]) .header-brand {display:inline-flex;align-items:center;justify-content:center;width:36px;height:44px}
 .header-brand img {width:28px;height:28px;object-fit:contain}
 .app-shell:not([data-chat]) .header-search {display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-height:44px;margin-left:auto;padding:0;border:0;background:transparent;color:var(--ink)}
 .header-search .icon {width:20px;height:20px}
}
/* Utility buttons keep their own width instead of stretching across a page's stack. */
:is([data-controlled-links],[data-shares-page],[data-share-content])>:is(button,.button) {justify-self:start;align-self:start;width:auto}
/* A page that cannot load for this sign-in says so in a quiet card, not a stray line of text. */
[data-notifications]>[role=status]:not(:empty) {margin:0;padding:20px 24px;border:1px dashed var(--line-hover);border-radius:var(--radius);background:var(--surface);color:var(--muted);font-size:14px;line-height:1.55}

/* ── v3 "Studio" shell. The rail sits on the app ground; the page is a white inset panel.
   Active rows are raised white pills, so place reads at a glance. ─────────────────────── */
.app-shell {background:var(--app-bg)}
.app-shell .sidebar {background:var(--app-bg);border-right:0;padding-inline:12px}
@media(min-width:901px){
 .app-shell .app-main {margin:8px 8px 8px 0;height:calc(100dvh - 16px);background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
 .app-shell .app-header {border-radius:var(--radius-lg) var(--radius-lg) 0 0}
}
.app-shell .sidebar .new-chat {height:40px;min-height:40px;margin-bottom:8px;border:0;border-radius:var(--radius-sm);background:var(--ink);color:var(--fg-invert);font-weight:550;box-shadow:0 1px 2px rgb(9 9 11 / .2),inset 0 1px 0 rgb(255 255 255 / .1)}
.app-shell .sidebar .new-chat:hover {background:var(--ink-hover);border-color:transparent;box-shadow:0 4px 12px -4px rgb(9 9 11 / .4)}
.app-shell .sidebar .new-chat .icon {color:var(--fg-invert)}
.app-shell .sidebar .new-chat .rail-shortcut {color:color-mix(in srgb,var(--fg-invert) 60%,transparent)}
.app-shell .sidebar .shell-link {min-height:36px;padding:7px 10px;border-radius:var(--radius-sm);font-size:14px;color:var(--fg-2)}
.app-shell .sidebar .shell-link .icon {width:17px;height:17px;color:var(--subtle)}
.app-shell .sidebar .shell-link:hover {background:var(--rail-hover)}
.app-shell .sidebar .shell-link.active,.app-shell .history-row.selected {background:var(--surface-l1);color:var(--ink);font-weight:500;box-shadow:var(--shadow-sm),0 0 0 1px rgb(9 9 11 / .04)}
.app-shell .sidebar .shell-link.active .icon {color:var(--ink)}
.app-shell .sidebar nav[aria-label=Workspace] {border-bottom-color:transparent;padding-bottom:6px}
.app-shell .sidebar .rail-search {color:var(--fg-2)}
.rail-key {background:var(--surface-l1);border-color:var(--line)}
.app-shell .history-tabs {padding:0 10px;gap:14px}
.app-shell .history-tabs button {box-shadow:none;font-size:12.5px}
.app-shell .history-tabs button[aria-pressed=true] {color:var(--ink);border-bottom-color:var(--ink)}
.app-shell .history-search input {background:var(--surface-l1);border-color:var(--line);box-shadow:none}
.app-shell .history-group {color:var(--subtle);font-size:11px;letter-spacing:.07em}
.app-shell .history-row .shell-link {font-size:13.5px;color:var(--fg-2)}
.app-shell .history-row:hover {background:var(--rail-hover)}
.app-shell .history-row.selected .shell-link {color:var(--ink)}
.app-shell .history-menu-trigger {box-shadow:none}
.app-shell .sidebar-bottom {border-top-color:transparent}
.app-shell .sidebar .shell-account {box-shadow:none}
.app-shell .sidebar .shell-account:hover {background:var(--rail-hover)}
.account-initials,.app-shell .sidebar .shell-account>svg.icon {background:var(--spark);color:var(--on-spark)}
.app-shell .app-header {background:var(--canvas);border-bottom-color:var(--line)}
@media(max-width:900px){
 .app-shell .sidebar {background:var(--app-bg)}
}
.app-shell .sidebar .shell-link.new-chat,.app-shell .sidebar .shell-link.new-chat:hover {color:var(--fg-invert)}
/* New chat in the rail is a raised white pill on every route (board AppRail). */
.app-shell .sidebar a.new-chat.button {background:var(--surface-l1);border:0;box-shadow:var(--shadow-raise);color:var(--fg-1);border-radius:12px}
.app-shell .sidebar a.new-chat.button .icon {color:var(--fg-1)}
.app-shell .sidebar a.new-chat.button .rail-shortcut {color:var(--fg-3)}
.app-shell .sidebar a.new-chat.button:hover {background:var(--surface-l1);color:var(--fg-1);box-shadow:0 0 0 1px var(--border-2),0 2px 6px -2px rgb(var(--ink-rgb) / .12)}
/* History tabs, day headings and row text share one 10px inset. */
.app-shell .history-row .shell-link {padding-left:10px}
.app-shell .history-group {margin-left:10px;margin-right:10px}
@media(max-width:900px){.app-shell .app-main {background:var(--canvas)}}
/* Menu rows are flat: a button row matches its link neighbours instead of the raised, centred button default. */
.view-menu nav>button,.account-menu .account-menu-item,.history-action-menu button {box-shadow:none}
.view-menu nav>button {justify-content:flex-start;padding:11px 14px;border-radius:6px;color:var(--ink);font-size:inherit;font-weight:400;text-align:left}
/* Menu labels stay on one line on phones; the menu still fits the screen. */
.view-menu nav {min-width:min(232px,calc(100vw - 32px))}
/* Wavemaker unreachable (deploy, restart, dropped connection): one status bar, app-wide. */
.service-reconnecting div {display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;min-width:0}
.service-reconnecting .spinner {width:14px;height:14px;margin:0;flex-shrink:0;border-color:color-mix(in srgb,var(--fg-2) 30%,transparent);border-top-color:var(--fg-1)}
.service-reconnecting button {min-height:30px;padding:4px 12px;flex-shrink:0;border-radius:999px;font-size:var(--text-13)}
.service-reconnecting div span {color:var(--fg-3)}
/* Connection pill (WAV-3297): an overlay, never in flow. Top-centre by default; inside the
   composer dock it sits in the slot just above the composer. */
.connection-pill {position:fixed;top:12px;left:50%;z-index:150;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);padding:8px 10px 8px 14px;border:1px solid var(--border-2);border-radius:999px;background:var(--surface-elevated,var(--surface-l1));color:var(--fg-1);box-shadow:var(--shadow-md);font-size:var(--text-13);transform:translateX(-50%)}
.connection-pill.docked {top:auto}
.connection-pill:not(.service-reconnecting) {padding-right:14px}
.connection-dot {width:8px;height:8px;flex:none;border-radius:50%;background:var(--fg-3)}
.connection-pill.offline .connection-dot {background:var(--warn)}
.connection-pill.online .connection-dot {background:var(--success,var(--ok))}
@starting-style {.connection-pill {opacity:0}}
.connection-pill {transition:opacity var(--dur-2,200ms) var(--ease-out,ease-out)}
.composer-footer[data-offline]::before {content:attr(data-offline);margin-right:auto;color:var(--fg-3);font-size:var(--text-13)}
@media(max-width:600px){.service-reconnecting div span {display:none}}
/* System notices (WAV-3254): one calm pattern. A floating pill while reconnecting (an overlay,
   nothing moves) and, after repeated failures, a callout with Reload. Top centre on every page. */
.system-pill,.system-callout.is-floating {position:fixed;top:12px;left:50%;z-index:150;transform:translateX(-50%);max-width:calc(100vw - 24px)}
.system-pill {display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:8px 16px 8px 14px;border-radius:var(--radius-pill);background:var(--surface-elevated);color:var(--fg-1);box-shadow:var(--shadow-pop);font-size:var(--text-14)}
.system-pill strong {font-weight:var(--weight-strong)}
.system-dot {flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn);animation:breathe 1.8s var(--ease-standard) infinite}
.system-callout {display:flex;align-items:flex-start;gap:12px;width:min(460px,calc(100vw - 24px));padding:14px 16px;border-radius:var(--radius);background:var(--surface-l2);color:var(--fg-1);font-size:var(--text-14)}
.system-callout.is-floating {background:var(--surface-elevated);box-shadow:var(--shadow-pop)}
.system-callout > div {display:flex;flex-direction:column;gap:2px;min-width:0}
.system-callout strong {font-weight:var(--weight-strong)}
.system-callout span {font-size:13px;color:var(--fg-2)}
.system-notice-icon {display:inline-flex;flex:none;margin-top:1px;color:var(--fg-2)}
.system-notice-icon .icon {width:18px;height:18px}
.system-notice-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.system-notice-actions button {min-height:34px;padding:4px 14px;border-radius:var(--radius-pill)}
/* The still-unreachable callout (WAV-3254) keeps its own layout inside the reconnect banner. */
.service-reconnecting.system-callout > div {flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.service-reconnecting.system-callout > div > span {display:block;color:var(--fg-2)}
.service-reconnecting.system-callout .system-notice-actions {display:flex}
.signed-out-notice {margin-bottom:var(--space-4,18px)}
/* WAV-3243 zero-shift app frame: the server paints the rail, header, #content and the composer
   dock at their final sizes; shell.js keeps the skeleton until the route replaces it. Static
   blocks only: nothing animates on boot. `.skeleton` is the shared primitive; these are its geometry.
   The fill outranks `.skeleton` (states.css loads later): its sweep restyled every block on every
   frame while the modules booted (WAV-3372). */
.frame-skeleton {display:contents}
.frame-skel {display:block;flex:none;height:12px;border-radius:8px}
.skeleton.frame-skel {background:var(--surface-l2,var(--surface-raised));animation:none}
.sidebar .skeleton.frame-skel {background:var(--surface-l3,var(--surface-pressed))}
.frame-skel.frame-small {height:10px}
.frame-rail .rail-scroll {display:flex;flex-direction:column}
.frame-new-chat {height:42px;margin-bottom:10px;border-radius:9px}
.frame-rail-row,.frame-history-row {display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 12px}
.frame-history-row {min-height:34px;padding:6px 10px}
.frame-history {display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--border-1,var(--line))}
.frame-icon {width:18px;height:18px;border-radius:5px}
.frame-rail-row .frame-line,.frame-history-row .frame-line {flex:none}
.frame-account {display:flex;align-items:center;gap:10px;min-height:52px;padding:8px}
.frame-avatar {width:32px;height:32px;border-radius:50%}
.frame-account-copy {display:grid;gap:6px;flex:1}
.rail-collapsed .sidebar :is(.frame-line,.frame-history,.frame-account-copy) {display:none}
.rail-collapsed .frame-rail-row,.rail-collapsed .frame-account {justify-content:center;padding-inline:var(--space-2)}
.frame-menu {display:none;width:38px;height:38px;border-radius:10px}
@media(max-width:900px){.frame-menu {display:block}}
.frame-title {display:inline-block;width:min(220px,40vw);height:16px;vertical-align:middle}
.frame-composer {display:flex;flex-direction:column;justify-content:space-between;min-height:107px}
@media(max-width:760px){.frame-composer {min-height:111px}}
.frame-composer-field {display:block;padding:8px 2px}
.frame-composer .composer-footer {display:flex;align-items:center;gap:8px}
.frame-round {width:32px;height:32px;border-radius:50%}
.frame-pill {width:96px;height:28px;border-radius:var(--radius-pill)}
.frame-gap {flex:1}
.frame-send {width:36px;height:36px;border-radius:50%}
.frame-welcome {display:flex;flex-direction:column;align-items:center}
.frame-mark {width:52px;height:52px;margin-bottom:14px;border-radius:14px}
.frame-heading {width:min(600px,80%);height:52px;margin-bottom:12px;border-radius:10px}
.frame-lede {height:16px;margin-block:5px 6px}
.frame-starters {display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;width:100%;margin-top:24px}
.frame-starter {width:172px;height:42px;border-radius:var(--radius-pill)}
.frame-starter:nth-child(2) {width:178px}.frame-starter:nth-child(3) {width:194px}.frame-starter:nth-child(4) {width:244px}.frame-starter:nth-child(5) {width:222px}
.frame-inspire {display:block;width:100%;margin-top:48px}
.frame-inspire-head {width:220px;height:20px;margin:0 2px 16px}
.frame-inspire-grid {display:block;columns:4 210px;column-gap:16px}
.frame-inspire-grid .frame-tile {margin-bottom:18px;break-inside:avoid;aspect-ratio:4/5}
.frame-inspire-grid .frame-tile:nth-child(3n+2) {aspect-ratio:16/9}
.frame-inspire-grid .frame-tile:nth-child(3n) {aspect-ratio:1}
@media(max-width:760px){.frame-inspire {margin-top:32px}.frame-inspire-grid {columns:2;column-gap:10px}}
.frame-w40 {width:40%}.frame-w56 {width:56%}.frame-w70 {width:70%}.frame-w82 {width:82%}
.frame-thread {display:grid;gap:12px;max-width:792px;margin:24px auto 0}
.frame-bubble {justify-self:end;width:46%;height:44px;border-radius:18px}
.frame-page {display:grid;gap:14px}
.frame-page-heading {width:min(280px,70%);height:32px;margin:0}
.frame-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:16px}
.frame-tile {height:auto;aspect-ratio:4/3;border-radius:var(--radius)}
.frame-rows {display:grid;gap:8px;margin-top:16px}
.frame-row {height:56px;border-radius:12px}
.frame-slow {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:24px 0 0;color:var(--muted);font-size:var(--text-label)}
/* An opening conversation assembles hidden (it takes no part in layout shift) under its skeleton. */
.chat-layout[data-opening] .conversation-scroll {position:relative}
.chat-layout[data-opening] .conversation-scroll>:not(.frame-opening) {visibility:hidden}
.frame-opening {position:absolute;inset:0 0 auto;padding-inline:inherit}
/* WAV-3246 shared public chrome (MkHeader / MkFooter / MkHomePhone). One markup source:
   public_html.py. Session variants, announcement, phone sheet, mega-footer, Appearance. */
.public-header {background:var(--surface-base);border-bottom-color:var(--border-1)}
.public-header nav a {color:var(--fg-2)}
.public-header nav a[aria-current=page] {color:var(--fg-1)}
.public-actions .public-account[hidden] {display:none}
.public-menu-close,.public-menu-account {display:none}
.public-announcement {display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px 0 4px;border:1px solid var(--border-2);border-radius:var(--radius-pill);color:var(--fg-1);font-size:13px;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-1) var(--ease-standard)}
.public-announcement:hover {background:var(--hover);text-decoration:none}
.public-announcement-label {display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:var(--radius-pill);background:var(--surface-invert);color:var(--fg-invert);font-size:12px;font-weight:550}
body[data-page=landing] .public-announcement {border-color:var(--night-line);color:var(--night-fg-1)}
body[data-page=landing] .public-announcement:hover {background:var(--night-l1)}
@media (max-width:1000px) {.public-announcement {display:none}}
/* Footer: brand column, then Explore / Learn / Legal; a rule; legal line and status link. */
.footer {grid-template-columns:minmax(0,1.15fr) minmax(0,2fr);background:var(--surface-base);border-top-color:var(--border-1)}
.footer .footer-columns {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0}
.footer .footer-group {min-width:0}
.footer .footer-group>summary {list-style:none;cursor:default;pointer-events:none}
.footer .footer-group>summary::-webkit-details-marker {display:none}
.footer .footer-links {display:flex;flex-direction:column;gap:2px}
.footer .footer-links a {display:inline-flex;align-items:center;min-height:34px;color:var(--fg-2);font-size:14px;text-decoration:none;width:max-content;max-width:100%}
.footer .footer-links a:hover {color:var(--fg-1);text-decoration:underline;text-underline-offset:3px}
.footer .footer-heading {color:var(--fg-1)}
.footer .footer-tagline {color:var(--fg-2)}
.footer-legal {border-top-color:var(--border-1)}
.footer-legal p {color:var(--fg-3)}
.footer-social {display:flex;flex-wrap:wrap;gap:2px;margin-left:-10px}
.footer-social a {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);color:var(--fg-3)}
.footer-social a:hover {color:var(--fg-1);background:var(--surface-hover)}
.footer-social svg {width:20px;height:20px}
body[data-page=landing] .footer-social a {color:var(--night-fg-3)}
body[data-page=landing] .footer-social a:hover {color:var(--night-fg-1);background:rgb(255 255 255 / .08)}
@media(max-width:760px) {.footer-social a {width:44px;height:44px}}
.footer-appearance {display:flex;align-items:center;gap:10px;margin-top:6px;font-size:13px;color:var(--fg-3)}
body[data-page=landing] .footer .footer-links a,body[data-page=landing] .footer-appearance {color:var(--night-fg-3)}
body[data-page=landing] .footer .footer-links a:hover {color:var(--night-fg-1)}
body[data-page=landing] .footer .footer-tagline {color:var(--night-fg-2)}
body[data-page=landing] .footer .segmented {--track:var(--night-l2);--segment-selected:var(--night-l1)}
body[data-page=landing] .footer .segmented [role=radio] {color:var(--night-fg-3)}
body[data-page=landing] .footer .segmented [role=radio][aria-checked=true] {color:var(--night-fg-1);box-shadow:0 0 0 1px var(--night-line)}
.footer-status {display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3);text-decoration:none}
.footer-status:hover {color:var(--fg-1)}
body[data-page=landing] .footer-status {color:var(--night-fg-3)}
body[data-page=landing] .footer-status:hover {color:var(--night-fg-1)}
.footer .footer-links a[href="/status"]::before {content:none}
@media (max-width:760px) {
  /* Phone menu: a full-height sheet with 52px rows (MkHomePhone). */
  .public-header nav[popover]:popover-open {inset:0;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;height:100dvh;max-height:none;margin:0;padding:72px 16px 24px;border:0;border-radius:0;background:var(--surface-base);box-shadow:none}
  .public-header nav[popover]:popover-open a[aria-current=page] {background:none}
  .public-header nav[popover]:popover-open>a,body[data-page=landing] .public-header nav[popover]:popover-open>a {width:auto;justify-content:space-between;min-height:52px;padding:0 4px;border-radius:0;border-bottom:1px solid var(--border-1);color:var(--fg-1);font-size:17px;font-weight:500}
  .public-header nav[popover]:popover-open>a::after {content:'';position:static;width:8px;height:8px;margin:0 4px 0 0;border:solid var(--fg-3);border-width:1.5px 1.5px 0 0;border-radius:0;background:none;transform:rotate(45deg)}
  .public-header nav[popover]:popover-open>a[aria-current=page]::after {display:block}
  .public-header nav[popover]:popover-open .public-menu-account {display:flex;flex-direction:column;margin-top:24px}
  .public-menu-account .button[hidden] {display:none}
  .public-header nav[popover]:popover-open .public-menu-account .button {min-height:48px;justify-content:center;border:0;border-radius:var(--radius-pill);background:var(--surface-invert);color:var(--fg-invert);font-weight:550}
  .public-menu-close {position:absolute;top:10px;right:16px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--border-2);border-radius:var(--radius-pill);background:var(--surface-l1);color:var(--fg-1)}
  .footer {grid-template-columns:minmax(0,1fr)}
  .footer .footer-columns {grid-template-columns:minmax(0,1fr);gap:0}
  .footer .footer-group {border-bottom:1px solid var(--border-1)}
  .footer .footer-group>summary {display:flex;align-items:center;justify-content:space-between;min-height:52px;margin:0;pointer-events:auto;cursor:pointer}
  .footer .footer-group>summary::after {content:'';width:8px;height:8px;margin-right:4px;border:solid var(--fg-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform var(--dur-2) var(--ease-standard)}
  .footer .footer-group[open]>summary::after {transform:rotate(-135deg)}
  .footer .footer-links {padding-bottom:12px}
  .footer .footer-links a {min-height:44px}
  .footer-appearance {order:3}
}

/* Account menu balance line (WAV-3330) */
.account-menu-balance {display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 6px 4px;padding:5px 10px;border-radius:var(--radius-sm);background:var(--surface-l2);font-size:var(--text-13);color:var(--fg-2)}
.account-menu-balance strong {font-weight:var(--weight-strong);color:var(--fg-1);font-variant-numeric:tabular-nums}
.account-menu .account-menu-mark {width:22px;height:22px;border-radius:6px;font-size:11px}
.account-menu-check {margin-left:auto;color:var(--fg-1)}
.account-menu .account-menu-item[aria-current] {opacity:1;color:var(--fg-1)}
.account-menu-meta {margin-left:auto;font-size:12px;color:var(--fg-3)}
.connection-pill[hidden] {display:none}