/*
Self-hosted, unmodified published font files. Full accompanying font notices:

Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"

This Font Software is licensed under the SIL Open Font License, Version 1.1.

This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.


Copyright 2022 The Instrument Serif Project Authors (https://github.com/Instrument/instrument-serif)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
*/
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/landing-door/ibm-plex-mono-500-latin-a76f53ca6612e7b3828eec2311098675b7f9849ae4169a8bcef6302aec02a6c0.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/landing-door/instrument-serif-400-italic-latin-6ee678c33f388dd7ba59700ebea635deb98821baafd817b09891f7927177f702.woff2") format("woff2")}

:root {
  color-scheme: dark;
  --page: #050506;
  --paper: #0c0c0f;
  --surface-2: #131317;
  --surface-3: #1a1a1f;
  --ink: #f2f1ee;
  --muted: #a3a3ab;
  --faint: #8a8a93;
  --line: #1f1f25;
  --line-2: #2c2c33;
  --line-strong: #6b6b75;
  --accent: #7fd1ff;
  --accent-hover: #b3e4ff;
  --success: #6fcf97;
  --warning: #e6b85c;
  --danger: #ff7a70;
  --radius: 12px;
  --radius-sm: 8px;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 8rem; }
body { min-width: 320px; margin: 0; background: var(--page); color: var(--ink); font-size: 1rem; line-height: 1.6; }
.app-body { font-size: 0.9375rem; }
button, input, select, textarea { font: inherit; }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a, button { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea, a { touch-action: manipulation; }
a, button, input, select, textarea, summary {
  transition: color 150ms, background-color 150ms, border-color 150ms, opacity 150ms;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Programmatic focus moves screen readers to a view; it is not a control. */
[tabindex="-1"]:focus { outline: none; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
[hidden], .is-hidden { display: none !important; }
.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); background: var(--ink); color: var(--page); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 1rem; }
.shell { width: min(1120px, calc(100% - 4rem)); margin-inline: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-sans); font-style: normal; font-weight: 600; color: var(--ink); }
h1 { margin-bottom: 0.5rem; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.02em; }
h2 { margin-bottom: 0.75rem; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; }
h3 { margin-bottom: 0.5rem; font-size: 1rem; line-height: 1.4; letter-spacing: -0.01em; }
p { margin-bottom: 1rem; }
.eyebrow { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.lede { max-width: 36rem; margin-bottom: 2rem; color: var(--muted); font-size: 1.125rem; line-height: 1.6; }

/* Literal values an agent or person copies verbatim. */
code, pre, kbd, .endpoint, #space-contact-token, #space-contact-code,
#space-invite-result input {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
code, pre, .endpoint { font-size: 0.875em; }
:not(pre) > code { border-radius: 4px; padding: 0.1em 0.35em; background: var(--surface-2); }
.metric-value, .cost-value, .credit-value, .wallet-balance, .wallet-entry, .usage-period, .agent-list-meta { font-variant-numeric: tabular-nums; }
.wallet-entry strong, .agent-list .button strong { font-weight: 500; }

/* Shared navigation and controls */
/* The public header rule spans the page, like the workspace header and the footer. */
.site-header { border-bottom: 1px solid var(--line); }
.topbar { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 0.85rem; color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.mark { display: inline-block; flex: 0 0 auto; color: var(--ink); font-size: 1.5rem; font-weight: 750; line-height: 1; letter-spacing: -0.09em; }
.utility-links, .actions, .inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.utility-links { justify-content: flex-end; font-size: 0.875rem; }
.utility-links a:not(.button) { color: var(--muted); text-decoration: none; }
.utility-links a:not(.button):hover, .utility-links a[aria-current="page"] { color: var(--ink); }
.quiet-link { color: var(--muted); font-size: 0.875rem; text-decoration: none; }
.quiet-link:hover { color: var(--ink); }
.button, button.button { display: inline-flex; min-height: 2.5rem; max-width: 100%; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid var(--ink); border-radius: var(--radius-sm); padding: 0.5rem 1rem; background: var(--ink); color: var(--page); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; line-height: 1.3; text-align: center; text-decoration: none; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.button:hover { border-color: #ffffff; background: #ffffff; }
.button.secondary { border-color: var(--line-2); background: transparent; color: var(--ink); }
.button.secondary:hover { border-color: var(--line-strong); background: var(--surface-2); }
.button.danger { border-color: var(--line-2); background: transparent; color: var(--danger); }
.button.danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.button.small { min-height: 2.25rem; padding: 0.35rem 0.75rem; font-size: 0.8125rem; }

/* Public first visit */
.welcome { padding-block: clamp(4rem, 9vw, 7rem) 2rem; }
.welcome-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 7vw, 6rem); }
.welcome-copy { min-width: 0; }
.welcome-copy h1, .privacy-hero h1 { max-width: 16ch; margin-bottom: 1.5rem; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.05; letter-spacing: -0.02em; }
.welcome-copy .lede { max-width: 32rem; }
.welcome-copy .actions { margin-top: 2rem; }
.welcome-copy .button { min-height: 2.75rem; padding-inline: 1.25rem; }
.welcome-note { margin: 1rem 0 0; color: var(--muted); font-size: 0.875rem; }
.welcome-session-status { margin: 0.9rem 0; color: var(--muted); font-size: 0.875rem; }
.welcome-session-status:empty { margin: 0; }
.welcome-session-status[data-tone="error"] { color: var(--danger); }
.welcome-session-status[data-tone="warning"] { color: var(--warning); }
.prompt-label { margin-bottom: 0.75rem; color: var(--muted); font-size: 1rem; }
.prompt-box { margin-bottom: 1.5rem; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 1.25rem 1.25rem 1rem; background: var(--paper); }
.prompt-box .copyable { display: block; border: 0; padding: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.5; }
.prompt-box .copy-row { margin: 0.75rem 0 0; }
.connect-card { min-width: 0; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 1.5rem; background: var(--paper); }
.connect-card h2, .connect-card h3 { margin-bottom: 0.75rem; color: var(--muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; }
.connect-card p { color: var(--muted); font-size: 0.9375rem; }
.connect-card .endpoint { margin-bottom: 1rem; }
.connect-card .endpoint .copyable { font-size: 0.8125rem; }
.connect-card p:last-child { margin-bottom: 0; }
.install-list { margin: 0 0 0.25rem; padding: 0; list-style: none; }
.install-list li { display: grid; justify-items: start; gap: 0.375rem; padding-bottom: 1rem; color: var(--muted); font-size: 0.9375rem; }
.endpoint .copyable { display: block; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 0.75rem 1rem; background: var(--page); color: var(--ink); font-size: 0.9375rem; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; }
/* One click selects the whole value as a fallback to /start's copy helper. */
.copyable { user-select: all; -webkit-user-select: all; cursor: text; overflow-wrap: anywhere; }
/* A prompt is words to say, not a literal value, so it reads in sans. */
blockquote .copyable { display: block; border: 0; padding: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.6; }
.step { display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; margin-right: 0.75rem; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font-size: 0.8125rem; font-weight: 500; vertical-align: 0.2em; }
.privacy-section .env-note { color: var(--warning); font-size: 0.875rem; }
.client-list { display: grid; margin: 1.5rem 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.client-list li { display: grid; grid-template-columns: minmax(11rem, 0.35fr) minmax(0, 1fr); align-items: first baseline; gap: 0.25rem 1.5rem; border-bottom: 1px solid var(--line); padding-block: 0.875rem; color: var(--muted); font-size: 0.9375rem; }
.client-names { color: var(--ink); font-weight: 500; }
.client-names a { font-weight: 500; }
.client-list .button { justify-self: start; }
.privacy-section h3 { margin-top: 2rem; }

/* Public documents */
.notice p { margin-bottom: 0; color: var(--muted); }
.notice { max-width: 52rem; margin-top: 2rem; border-left: 2px solid var(--accent); padding: 0.2rem 0 0.2rem 1rem; }
.privacy-document { width: min(68ch, calc(100% - 4rem)); margin-inline: auto; padding-block: clamp(3rem, 7vw, 5.5rem); }
.privacy-hero { margin-bottom: 0.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.privacy-hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.privacy-updated { color: var(--faint); font-size: 0.875rem; }
.privacy-section { padding-block: 2rem; border-bottom: 1px solid var(--line); }
.privacy-section:last-child { border-bottom: 0; }
.privacy-section h2 { font-size: 1.375rem; }
.privacy-section p, .privacy-section li { color: var(--muted); overflow-wrap: anywhere; }
.privacy-list { display: grid; gap: 0.6rem; padding-left: 1.25rem; }
.privacy-section .endpoint { margin-block: 1rem; }
.privacy-section blockquote { margin: 1rem 0; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 0.75rem 1rem; background: var(--paper); }
.privacy-section blockquote p { margin: 0; color: var(--ink); }
footer { padding-block: 2rem 2.5rem; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.8125rem; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }

/* Signed-in workspace; the hidden attribute owns visibility. */
.app-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); }
.app-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.app-nav a { display: inline-flex; min-height: 2.75rem; flex: 0 0 auto; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.app-nav a:hover { color: var(--ink); }
.app-nav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }
.network-banner { border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.network-banner .shell { display: flex; min-height: 2.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; font-size: 0.875rem; }
.network-banner[data-tone="error"] { background: color-mix(in srgb, var(--danger) 10%, var(--page)); border-bottom-color: color-mix(in srgb, var(--danger) 35%, var(--page)); color: var(--danger); }
.network-banner[data-tone="warning"] { background: color-mix(in srgb, var(--warning) 10%, var(--page)); border-bottom-color: color-mix(in srgb, var(--warning) 35%, var(--page)); color: var(--warning); }
.app-main { min-width: 0; padding-block: 2.5rem 4rem; overflow-wrap: anywhere; }
.account-actions { display: flex; align-items: center; gap: 0.75rem; }
.account-actions form { margin: 0; }
/* Install app appears only when the browser offers it; it stays as quiet as its header neighbours. */
.account-actions .button, #install-app { border-color: transparent; background: transparent; color: var(--muted); }
.account-actions .button:hover, #install-app:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--ink); }
.account-email { max-width: 16rem; overflow: hidden; color: var(--muted); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-view h1 { max-width: none; margin-bottom: 0.25rem; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.01em; }
.app-panel { grid-column: span 6; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; background: var(--paper); }
.app-panel.wide { grid-column: 1 / -1; }
.app-panel h2 { font-size: 1.0625rem; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 0.875rem; }
.workspace-view { min-width: 0; }
.space-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
/* On wide screens the list takes the full width until a Space's detail opens beside it. */
@media (min-width: 961px) { .space-layout:has(> #space-content:not([hidden])) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.space-layout > * { min-width: 0; }
.space-layout > .app-panel { grid-column: auto; }
.space-list-panel { padding: 1rem; }
.space-members h3, .contact-recovery h3 { font-size: 0.875rem; color: var(--muted); font-weight: 500; }
.space-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.space-table th, .space-table td { border-bottom: 1px solid var(--line); padding: 0.5rem 0.4rem; font-weight: 400; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }
.space-table th:first-child { width: 100%; padding-left: 0; text-align: left; font-weight: 500; overflow-wrap: anywhere; }
.space-table thead th { color: var(--muted); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.space-table tbody th > .space-name { display: block; padding-block: 0.1rem; }
.space-table tbody td { padding-top: 0.6rem; white-space: nowrap; }
.space-table .space-since { display: block; color: var(--faint); font-size: 0.75rem; white-space: nowrap; }
.space-table .space-pending td, .space-table .space-pending th[colspan] { color: var(--muted); font-weight: 400; text-align: left; }
.space-pending .button { margin-left: 0.75rem; }
/* Personal's amounts while it opens: a still bar, never a spinner. */
.space-table .skeleton { display: block; width: min(12rem, 60%); height: 0.75rem; margin-block: 0.2rem; border-radius: 999px; background: var(--surface-3); }
.space-total { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.space-total .space-since { margin-left: 0.5rem; color: var(--faint); font-size: 0.75rem; white-space: nowrap; }
/* The list ends at the Get invited rule, not a second line. */
.space-table tbody tr:last-child > * { border-bottom: 0; }
/* A selectable name lines up with the plain names around it; only its hover and selection show. */
.space-list .space-choice { width: calc(100% + 0.5rem + 2px); min-height: 0; justify-content: flex-start; margin: calc(-0.35rem - 1px) 0 calc(-0.35rem - 1px) calc(-0.5rem - 1px); border-color: transparent; padding: 0.35rem 0.5rem; background: transparent; color: var(--ink); font-size: inherit; font-weight: 500; text-align: left; }
.space-list .space-choice:hover { background: var(--surface-2); }
.space-list [aria-current="true"] { border-color: var(--line-strong); background: var(--surface-3); color: var(--ink); }
#space-list-more { margin-top: 0.75rem; }
.agent-layout { display: grid; grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; margin-top: 1.5rem; }
.agent-layout > .app-panel { grid-column: auto; }
.agent-sidebar { padding: 1rem; }
.agent-sidebar select { width: auto; max-width: 7rem; padding-block: 0.35rem; }
.history-drawer { position: sticky; inset: auto; top: 8rem; width: auto; max-width: none; max-height: calc(100dvh - 9.5rem); margin: 0; color: var(--ink); overflow-y: auto; }
.history-drawer:not([open]) { display: none; }
.history-drawer::backdrop { background: rgb(0 0 0 / 65%); }
.history-heading h2 { margin: 0; font-size: 0.875rem; color: var(--muted); font-weight: 500; }
.button.history-open, .button.history-close { display: none; }
.history-group { margin-top: 1.25rem; }
.history-group + .history-group { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.history-group h3 { margin-bottom: 0.5rem; font-size: 0.8125rem; color: var(--muted); font-weight: 500; }
.history-group .section-heading { margin-bottom: 0.5rem; }
.history-group .section-heading h3 { margin: 0; }
.history-group .field { margin-bottom: 0.5rem; }
.history-group > .button { margin-top: 0.5rem; }
.agent-list { display: grid; gap: 0.25rem; max-height: 28rem; overflow-y: auto; }
.agent-list .button { display: grid; gap: 0.2rem; width: 100%; justify-content: stretch; border-color: transparent; background: transparent; padding: 0.6rem 0.75rem; color: var(--ink); text-align: left; white-space: normal; }
.agent-list .button:hover { background: var(--surface-2); }
.agent-list .button[aria-pressed="true"] { border-color: var(--line-strong); background: var(--surface-3); }
/* Full-width rows sit inside scrolling lists, which would clip an outside focus ring. */
.agent-list .button:focus-visible, .space-list .space-choice:focus-visible { outline-offset: -2px; }
.agent-list .agent-list-meta { color: var(--faint); font-size: 0.75rem; font-weight: 400; }
.agent-conversation { min-height: 32rem; }
.agent-scope { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.agent-scope span { border: 1px solid var(--line-2); border-radius: 999px; padding: 0.15rem 0.6rem; color: var(--muted); font-size: 0.75rem; }
.space-id-hint { color: var(--muted); font-weight: 400; }
.agent-messages { display: grid; gap: 1.25rem; min-height: 10rem; margin-block: 1.5rem; }
.agent-messages:empty, .agent-messages.is-empty { min-height: 2rem; margin-block: 0.75rem; }
#agent-scope-hint:empty, .agent-scope:empty { display: none; }
.agent-message { min-width: 0; max-width: 46rem; }
.agent-message[data-role="user"] { justify-self: end; border-radius: var(--radius); padding: 0.75rem 1rem; background: var(--surface-3); }
.agent-message strong { color: var(--faint); font-size: 0.75rem; font-weight: 500; }
.agent-message p { margin: 0.35rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; }
.agent-message ul, .agent-message ol { margin: 0.35rem 0 0; padding-left: 1.25rem; font-size: 0.9375rem; }
.agent-message li { margin-top: 0.2rem; overflow-wrap: anywhere; }
.agent-message .answer-heading { margin: 0.75rem 0 0; font-size: 1rem; font-weight: 600; }
.agent-message pre.answer-code { margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; overflow-x: auto; border-radius: var(--radius); background: var(--surface-3); font-size: 0.8125rem; }
.agent-message code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.875em; overflow-wrap: anywhere; }
.agent-message strong.sr-only + p { margin-top: 0; }
/* Blocks inside an answer keep the paragraph breaks the plain-text rendering had. */
.agent-message[data-role="assistant"] > :is(p, ul, ol, pre) + :is(p, ul, ol, pre) { margin-top: 0.75em; }
.agent-composer { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.agent-composer textarea { min-height: 6rem; }
/* Spaces sits left of Send; Send keeps the right edge whether or not Spaces is shown. */
.composer-settings { position: relative; display: flex; align-items: center; gap: 0.75rem; }
.composer-settings > .button { flex: 0 0 auto; margin-left: auto; min-height: 2.75rem; }
.composer-label { flex: 0 0 auto; margin-right: -0.25rem; color: var(--muted); font-size: 0.8125rem; }
/* The Spaces summary stays one line at any width: a long title ends in an ellipsis. */
.composer-settings > .disclosure-menu { min-width: 0; }
#agent-sources-value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Activity and Spaces are small menus. Each panel floats over the pane, anchored to its row (the conversation
   header or the composer), so it never widens the page; the row, not the menu, is the positioned ancestor. */
.agent-heading { position: relative; }
/* Stop and Activity stay one compact row, so an open Activity never pushes Stop aside. */
.agent-heading > .inline-actions { flex-wrap: nowrap; gap: 0.5rem; }
.disclosure-menu > summary { list-style: none; }
.disclosure-menu > summary::-webkit-details-marker { display: none; }
.disclosure-menu > summary::after { content: ""; width: 0.35rem; height: 0.35rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15rem) rotate(45deg); }
.disclosure-menu[open] > summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.disclosure-menu[open] > summary { border-color: var(--line-strong); background: var(--surface-2); }
.disclosure-panel { position: absolute; z-index: 20; display: grid; gap: 0.5rem; min-width: 0; max-width: 100%; overflow-y: auto; margin: 0; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 0.75rem 1rem; background: var(--paper); box-shadow: 0 16px 40px rgb(0 0 0 / 50%); }
.disclosure-panel > * { min-width: 0; margin: 0; }
.disclosure-panel > .button { justify-self: start; }
.activity-panel { top: calc(100% + 0.5rem); right: 0; width: min(30rem, 100%); max-height: min(32rem, 70dvh); }
.activity-panel .item-card:last-child { border-bottom: 0; }
.source-panel { bottom: calc(100% + 0.5rem); left: 0; width: min(22rem, 100%); max-height: min(20rem, 55dvh); }
.source-options { display: grid; }
.source-option { display: flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; color: var(--ink); font-size: 0.875rem; cursor: pointer; overflow-wrap: anywhere; }
.source-option input { width: 1rem; height: 1rem; flex: 0 0 1rem; margin: 0; padding: 0; accent-color: var(--accent); }
.source-option input:disabled, .source-option input:disabled ~ * { color: var(--faint); cursor: not-allowed; }
.source-option .space-id-hint { margin-left: auto; font-size: 0.75rem; white-space: nowrap; }
.agent-empty p { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.usage-overview { margin-block: 2rem; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.coverage-meter { display: block; width: 100%; height: 0.375rem; margin-block: 0.75rem 0.5rem; border: 0; border-radius: 999px; background: var(--surface-3); overflow: hidden; appearance: none; -webkit-appearance: none; }
.coverage-meter::-webkit-progress-bar { border-radius: 999px; background: var(--surface-3); }
.coverage-meter::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.coverage-meter::-moz-progress-bar { border-radius: 999px; background: var(--accent); }
.usage-breakdown h2 { margin: 2rem 0 0.25rem; font-size: 1.0625rem; }
.plan-panels { display: grid; grid-template-columns: minmax(0, 1fr); margin-block: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.plan-panels > .app-panel { grid-column: auto; border: 0; border-radius: 0; background: transparent; }
.plan-panels > .app-panel + .app-panel { border-top: 1px solid var(--line); }
.plan-pitch { color: var(--ink); }
.plan-pitch, .plan-terms { max-width: 42rem; }
.plan-terms { display: grid; gap: 0.35rem; margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.8125rem; }
#wallet-refresh, #usage-history-refresh { min-height: 1.75rem; white-space: nowrap; border-color: transparent; padding-inline: 0.5rem; color: var(--muted); }
#wallet-refresh:hover, #usage-history-refresh:hover { color: var(--ink); }
.metric-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; background: var(--paper); }
.metric-card > .credit-details { margin-top: auto; padding-top: 0.25rem; }
#credit-policy > div > p.field-hint { max-width: 72ch; }
.metric-card p { margin: 0; }
.metric-label { display: block; color: var(--muted); font-size: 0.8125rem; font-weight: 500; }
.metric-value { display: block; margin-block: 0.4rem 0.25rem; font-size: 1.875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.metric-detail { display: block; color: var(--faint); font-size: 0.8125rem; }
.metric-detail > span { display: block; }
.usage-breakdown { margin-block: 1rem; }
.usage-breakdown > * { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 1rem; border-bottom: 1px solid var(--line); padding-block: 0.75rem; font-size: 0.875rem; }
.cost-row { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; border-bottom: 1px solid var(--line); padding-block: 0.875rem; }
.usage-breakdown .cost-row { align-items: flex-start; }
.cost-main { min-width: 0; flex: 1 1 12rem; }
.cost-main .field-hint { display: block; }
.cost-main p, .cost-row p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.8125rem; }
.cost-row .button { width: auto; min-height: 0; justify-content: flex-start; border: 0; padding: 0; background: transparent; color: var(--ink); font-weight: 500; text-align: left; }
.cost-row .button:hover { color: var(--accent); }
.cost-value { color: var(--ink); font-size: 0.9375rem; font-weight: 500; overflow-wrap: anywhere; }
.usage-period { display: grid; min-width: 0; gap: 0.15rem; align-content: start; justify-items: end; overflow-wrap: anywhere; text-align: right; }
.usage-period > p { margin-bottom: 0.35rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.selected-space-panel > .panel-heading { align-items: center; margin-bottom: 0.25rem; }
.selected-space-panel > .panel-heading h2 { margin: 0; }
.space-members { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.space-usage { display: grid; gap: 0.6rem; padding-block: 0.25rem 1rem; }
.space-usage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.space-usage h3 { margin: 0; font-size: 0.875rem; color: var(--muted); font-weight: 500; }
.space-usage-by { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.875rem; }
.space-usage-by select { width: auto; padding-block: 0.35rem; }
.space-usage .space-total, .space-usage .field-hint { margin: 0; }
.space-table td.space-usage-empty { text-align: left; color: var(--muted); white-space: normal; }
#space-invite-form { margin-top: 1.25rem; }
.invitation-panel { margin-bottom: 1.5rem; }
#credit-policy { display: block; border: 0; padding: 0; }
.compact-details { margin-block: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.compact-details > summary { width: fit-content; max-width: 100%; color: var(--muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.compact-details > summary:hover { color: var(--ink); }
.compact-details[open] > summary { margin-bottom: 1rem; color: var(--ink); }
.app-panel.compact-details { border-top: 1px solid var(--line); padding-block: 1rem; }
.app-panel.compact-details > summary { width: auto; margin-block: -0.75rem; padding-block: 0.75rem; }
.app-panel.compact-details[open] > summary { margin-bottom: 0.25rem; }
.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.field label { color: var(--ink); font-size: 0.875rem; font-weight: 500; }
.field-hint { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
input, select, textarea { min-width: 0; width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; background: var(--surface-2); color: var(--ink); }
#funding-amount { max-width: 14rem; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--accent); }
textarea { min-height: 7rem; resize: vertical; }
.form-message, .empty-state { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.form-message:empty { margin: 0; }
.form-message[data-tone="error"] { color: var(--danger); }
.form-message[data-tone="success"] { color: var(--success); }
.form-message[data-tone="warning"] { color: var(--warning); }
.wallet-balance { margin-bottom: 0.25rem; color: var(--ink); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.wallet-balance-unit { margin-left: 0.25rem; color: var(--muted); font-size: 0.45em; font-weight: 500; white-space: nowrap; }
#funding-title, .wallet-columns + h3 { margin-top: 1.5rem; }
.wallet-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.wallet-columns > section { min-width: 0; }
.wallet-history { max-height: 25rem; overflow-y: auto; }
.wallet-entry { padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; overflow-wrap: anywhere; }
.wallet-entry p { margin: 0.2rem 0 0; color: var(--muted); }
.wallet-entry[data-direction="credit"] strong { color: var(--success); }
.wallet-entry[data-direction="debit"] strong { color: var(--ink); }
.wallet-entry.wallet-entry-unknown strong { color: var(--ink); }
.wallet-entry[data-posting-type="hold"], .wallet-entry[data-posting-type="release"] { color: var(--muted); }
.wallet-entry[data-posting-type="hold"] strong, .wallet-entry[data-posting-type="release"] strong { color: var(--muted); font-weight: 400; }
.cost-row > .usage-period { margin-left: auto; }
.credit-details { min-width: 0; max-width: 100%; margin-top: 0.25rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.credit-details > summary { display: inline-flex; min-height: 1.5rem; align-items: center; width: fit-content; max-width: 100%; color: var(--faint); font-size: 0.75rem; list-style: none; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 0.2em; }
.credit-details > summary::-webkit-details-marker { display: none; }
.credit-details > summary:hover { color: var(--muted); }
.credit-exact { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.credit-exact p { margin: 0.25rem 0; white-space: pre-wrap; }
.item-list { display: grid; }
.item-card { min-width: 0; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); padding: 0.875rem 0; }
.item-card p { margin: 0.3rem 0; color: var(--muted); font-size: 0.875rem; }
.partial-work-body { margin: 0.3rem 0; max-height: 16rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.875rem; }
.item-card strong { font-size: 0.9375rem; font-weight: 600; }
/* Member and request rows keep their actions beside the label, wrapping under it on narrow screens. */
#space-members .item-card, #space-owner-invitations .item-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
#space-members .item-card > p, #space-owner-invitations .item-card > p { flex: 1 1 14rem; margin: 0; }
#space-members .item-card:first-child { padding-top: 0; }
.result-text { white-space: pre-wrap; }
#space-invite-result:not(:empty) { display: grid; gap: 0.5rem; justify-items: start; margin-top: 1rem; }
#space-invite-result p { margin: 0; }
.account-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
#billing-portal { margin-top: 0.75rem; }
.confirmation { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1rem 0; color: var(--muted); font-size: 0.875rem; }
.confirmation input { width: 1rem; height: 1rem; flex: 0 0 1rem; margin-top: 0.2rem; accent-color: var(--accent); }
.account-row form { margin: 0; }
.app-note { color: var(--muted); font-size: 0.875rem; }
.app-note:empty { margin: 0; }
noscript .notice { margin: 2rem auto; }

/* Wider than the History drawer breakpoint: the sidebar needs no visible drawer title, and the header actions keep one row.
   The title stays in the heading outline, as .sr-only does, so "Conversations" never follows "Agents" a level down. */
@media (min-width: 721px) {
  .history-heading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .history-heading + .history-group { margin-top: 0; }
  .panel-heading > .inline-actions { flex-shrink: 0; }
}
@media (max-width: 1100px) {
  /* The address card narrows here; the smaller address keeps QA and Production on one line instead of breaking mid-domain. */
  .endpoint .copyable { padding-inline: 0.75rem; font-size: 0.8125rem; }
}
@media (max-width: 960px) {
  .welcome-hero { grid-template-columns: 1fr; gap: 3rem; }
  .agent-layout { grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.6fr); gap: 1rem; }
}
@media (max-width: 720px) {
  .shell, .privacy-document { width: calc(100% - 2.5rem); }
  .topbar { flex-wrap: wrap; padding-block: 0.75rem; }
  .welcome { padding-top: 3.5rem; }
  .client-list li { grid-template-columns: 1fr; }
  .app-panel { grid-column: 1 / -1; padding: 1.25rem; }
  .wallet-columns { grid-template-columns: 1fr; gap: 2rem; }
  .space-layout { gap: 1.25rem; }
  .agent-layout { grid-template-columns: minmax(0, 1fr); }
  .agent-list { max-height: 28dvh; }
  .agent-conversation { min-height: 0; }
  .button.history-open, .button.history-close { display: inline-flex; }
  /* Once History joins the header actions, the buttons stay on one row and the setup link wraps below them. */
  .panel-heading .inline-actions .quiet-link { order: 1; }
  .history-drawer { position: fixed; inset: 0 auto 0 0; top: 0; width: min(23rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0 var(--radius) var(--radius) 0; padding: 1.25rem; overflow-y: auto; }
  .metric-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .metric-card { padding: 1rem; }
}
@media (max-width: 440px) {
  .shell, .privacy-document { width: calc(100% - 2rem); }
  .topbar { gap: 0.75rem; }
  .brand { gap: 0.6rem; }
  .account-email { display: none; }
  .utility-links { gap: 0.5rem 1rem; }
  .welcome { padding-top: 3rem; }
  .welcome-copy .actions { gap: 0.75rem; }
  .app-nav { gap: 0 1.25rem; }
  .app-main { padding-top: 1.75rem; }
  .panel-heading { flex-wrap: wrap; }
  .space-table th, .space-table td { padding-inline: 0.3rem; }
  /* Amounts and headers may wrap at their space ("3.63" over "Credits") so names keep a readable column. A name column
     breaks anywhere, so one long word can't widen the page, but never narrower than its minimum width. */
  .space-table thead th, .space-table tbody td { white-space: normal; overflow-wrap: normal; }
  .space-table th:first-child, .space-table .space-choice { min-width: 6.5rem; overflow-wrap: anywhere; }
  .network-banner .shell { flex-wrap: wrap; gap: 0.35rem; }
}
#usage-banner { margin-block: 0 1.5rem; }
.contact-recovery { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
#space-contact-result { margin-top: 1rem; }
#space-contact-copy { justify-self: start; }
/* Touch screens keep 44px targets; pointer layouts stay compact. */
@media (pointer: coarse) {
  .button, button.button, .button.small { min-height: 2.75rem; }
  /* Ghost refresh buttons line up with the text around them; touch has no hover pill to pad. */
  #wallet-refresh, #usage-history-refresh { min-height: 2.75rem; padding-inline: 0; }
  .utility-links a:not(.button), .brand, .quiet-link { display: inline-flex; min-height: 2.75rem; align-items: center; }
  /* The whole consent row is the label, so it takes the tap. */
  .confirmation { min-height: 2.75rem; }
  /* iOS Safari zooms into fields under 16px on focus. */
  input, select, textarea { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, button, input, select, textarea, summary { transition: none; }
}