:root {
  color-scheme: light dark;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-muted: #f7f9fb;
  --surface-raised: #ffffff;
  --text: #172033;
  --muted: #596579;
  --subtle: #7a8799;
  --border: #d7dde5;
  --border-strong: #bdc6d2;
  --primary: #0b5cab;
  --primary-hover: #084a8b;
  --primary-soft: #eaf3fb;
  --primary-text: #ffffff;
  --success: #177245;
  --success-soft: #e9f7ef;
  --warning: #8a5200;
  --warning-soft: #fff5df;
  --danger: #b42318;
  --danger-hover: #8f1c13;
  --danger-soft: #fff0ef;
  --focus: #1d74d5;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 6%), 0 4px 14px rgb(15 23 42 / 5%);
  --shadow-lg: 0 20px 60px rgb(15 23 42 / 18%);
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --page-width: 76rem;
  --workspace-width: 52rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --surface: #111a2b;
    --surface-muted: #162136;
    --surface-raised: #18243a;
    --text: #f3f6fb;
    --muted: #a8b4c7;
    --subtle: #8391a7;
    --border: #2b384d;
    --border-strong: #415069;
    --primary: #5b9ee6;
    --primary-hover: #78b3f2;
    --primary-soft: #142f4e;
    --primary-text: #07111f;
    --success: #74d39d;
    --success-soft: #123526;
    --warning: #f1bd63;
    --warning-soft: #3a2a10;
    --danger: #ff9289;
    --danger-hover: #ffaaa3;
    --danger-soft: #3b1b1b;
    --focus: #78b7ff;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 24%), 0 4px 14px rgb(0 0 0 / 18%);
    --shadow-lg: 0 24px 70px rgb(0 0 0 / 50%);
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
}

.button:disabled {
  color: var(--subtle);
  background: var(--surface-muted);
  border-color: var(--border);
}

input:disabled {
  color: var(--muted);
  background: var(--surface-muted);
  border-color: var(--border);
}

.task-checkbox:disabled {
  opacity: 0.7;
}

button:focus-visible,
input:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--text);
  letter-spacing: -0.025em;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.04;
}

h2 {
  margin-bottom: 0;
  font-size: 1.35rem;
  line-height: 1.25;
}

h3 {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.35;
}

p {
  color: var(--muted);
  line-height: 1.58;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.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;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  color: var(--primary-text);
  background: var(--primary);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.topbar {
  position: sticky;
  z-index: 50;
  top: 0;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
}

.topbar__inner {
  display: flex;
  min-height: 4rem;
  width: min(100%, var(--page-width));
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-inline: auto;
  padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
}

.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
  text-decoration: none;
}

.brand__mark {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--primary-text);
  background: var(--primary);
  border-radius: 0.62rem;
}

.brand__mark svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke-width: 2.3;
}

.brand__name {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
}

.connection {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.45rem;
  padding-inline: 0.6rem;
  color: var(--muted);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.connection__dot {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  background: var(--warning);
  border-radius: 50%;
}

.connection[data-state="connected"] .connection__dot {
  background: var(--success);
}

.connection[data-state="signed-out"] .connection__dot {
  background: var(--subtle);
}

.connection[data-state="error"] .connection__dot {
  background: var(--danger);
}

.button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.66rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.62rem;
  font-weight: 740;
  line-height: 1.2;
  text-decoration: none;
}

.button svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 2;
}

.button--compact {
  min-height: 2.35rem;
  padding: 0.48rem 0.75rem;
  font-size: 0.86rem;
}

.button--full {
  width: 100%;
}

.button--primary {
  color: var(--primary-text);
  background: var(--primary);
  border-color: var(--primary);
}

.button--primary:not(:disabled):hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.button--quiet {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border-strong);
}

.button--quiet:not(:disabled):hover {
  background: var(--surface-muted);
  border-color: var(--primary);
}

.button--danger {
  color: #ffffff;
  background: var(--danger);
  border-color: var(--danger);
}

.button--danger:not(:disabled):hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

.text-action {
  min-height: 2.75rem;
  padding: 0.5rem 0.35rem;
  color: var(--primary);
  background: transparent;
  border: 0;
  font-weight: 740;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
  text-underline-offset: 0.22em;
}

.text-action:hover {
  text-decoration-color: currentColor;
}

.account-control {
  min-width: 0;
}

.account-trigger {
  display: inline-flex;
  min-height: 2.65rem;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.5rem 0.25rem 0.28rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.account-trigger:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.account-avatar {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--primary-text);
  background: var(--primary);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.account-avatar--large {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.9rem;
}

.account-trigger__label {
  max-width: 11rem;
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-trigger__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--subtle);
}

.account-menu[popover] {
  display: none;
}

.account-menu[popover]:popover-open,
.account-menu.is-open {
  display: block;
}

.account-menu {
  position: fixed;
  z-index: 100;
  inset: calc(env(safe-area-inset-top) + 4.35rem) max(1rem, calc((100vw - var(--page-width)) / 2 + 1rem)) auto auto;
  width: min(calc(100vw - 2rem), 20rem);
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.account-menu::backdrop {
  background: transparent;
}

.account-menu__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
}

.account-menu__copy {
  min-width: 0;
}

.account-menu__copy strong,
.account-menu__copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu__copy strong {
  font-size: 0.93rem;
}

.account-menu__copy span {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.account-menu__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--surface-muted);
  border-block: 1px solid var(--border);
  font-size: 0.76rem;
}

.account-menu__meta span {
  color: var(--muted);
}

.account-menu__meta code {
  overflow: hidden;
  color: var(--text);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu__section {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
}

.account-menu__section p {
  margin-bottom: 0.7rem;
  font-size: 0.8rem;
}

.account-menu__actions {
  padding: 0.45rem;
}

.menu-action {
  display: flex;
  width: 100%;
  min-height: 2.65rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.7rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0.55rem;
  font-size: 0.86rem;
  font-weight: 650;
  text-align: left;
}

.menu-action:hover {
  background: var(--surface-muted);
}

.menu-action svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--muted);
}

.menu-action--danger {
  color: var(--danger);
}

.menu-action--danger svg {
  color: currentColor;
}

.main {
  width: min(100%, var(--page-width));
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 3rem) max(1rem, env(safe-area-inset-right)) clamp(3rem, 8vw, 6rem) max(1rem, env(safe-area-inset-left));
}

.loading-view {
  display: grid;
  min-height: calc(100vh - 11rem);
  place-items: center;
  align-content: center;
  text-align: center;
}

.loading-view h1 {
  margin: 1rem 0 0.35rem;
  font-size: 1.45rem;
}

.loading-view p {
  margin-bottom: 0;
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

.loading-spinner--small {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.eyebrow {
  margin-bottom: 0.5rem;
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing {
  display: grid;
  min-height: calc(100vh - 12rem);
  place-items: center;
}

.landing__content {
  width: min(100%, 44rem);
  padding-block: clamp(2rem, 8vw, 5rem);
}

.landing h1 {
  max-width: 12ch;
}

.landing__lede {
  max-width: 42rem;
  margin: 1.15rem 0 0;
  font-size: clamp(1.03rem, 2vw, 1.16rem);
}

.landing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 1.6rem;
}

.prototype-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  max-width: 42rem;
  margin-top: 1rem;
  padding: 0.78rem 0.85rem;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border));
  border-radius: var(--radius-md);
}

.prototype-notice__icon {
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  margin-top: 0.05rem;
}

.prototype-notice__icon svg {
  width: 1.3rem;
  height: 1.3rem;
  stroke-width: 2;
}

.prototype-notice strong {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
}

.prototype-notice p {
  margin: 0.18rem 0 0;
  color: currentColor;
  font-size: 0.76rem;
  line-height: 1.48;
}

.disclosure {
  margin-top: clamp(2.5rem, 8vw, 5rem);
  border-top: 1px solid var(--border);
}

.disclosure summary {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 720;
  list-style: none;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary::after {
  content: "+";
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 400;
}

.disclosure[open] summary::after {
  content: "−";
}

.disclosure__body {
  padding: 0.2rem 0 1.25rem;
}

.disclosure__body > p {
  max-width: 40rem;
  margin-bottom: 1.1rem;
}

.trust-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 0;
}

.trust-list > div {
  padding: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.trust-list dt {
  margin-bottom: 0.3rem;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 760;
}

.trust-list dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.workspace {
  width: min(100%, var(--workspace-width));
  margin-inline: auto;
}

.workspace__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.workspace__heading h1 {
  font-size: clamp(2rem, 7vw, 3rem);
}

.count {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding-inline: 0.7rem;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 780;
  white-space: nowrap;
}

.guest-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: 0.8rem;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
  border-radius: var(--radius-md);
}

.guest-banner__icon {
  display: inline-grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.guest-banner__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.guest-banner__copy {
  min-width: 0;
}

.guest-banner__copy strong {
  display: block;
  font-size: 0.86rem;
}

.guest-banner__copy p {
  margin: 0.15rem 0 0;
  color: currentColor;
  font-size: 0.78rem;
  line-height: 1.4;
}

.guest-banner__action {
  min-height: 2.25rem;
  padding-inline: 0.45rem;
  color: currentColor;
  white-space: nowrap;
}

.composer {
  padding: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.composer__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.composer input,
.dialog input {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.7rem 0.85rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0.62rem;
}

.composer input::placeholder,
.dialog input::placeholder {
  color: var(--subtle);
}

.composer input:hover,
.dialog input:hover {
  border-color: var(--primary);
}

.composer__submit {
  min-width: 7.5rem;
}

.composer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.55rem;
  padding-inline: 0.15rem;
  color: var(--subtle);
  font-size: 0.72rem;
}

.task-section {
  margin-top: 1.8rem;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.section-heading h2 {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.section-heading__count {
  display: inline-grid;
  min-width: 1.65rem;
  min-height: 1.65rem;
  place-items: center;
  padding-inline: 0.4rem;
  color: var(--muted);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 760;
}

.task-state {
  display: flex;
  min-height: 7rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--muted);
  text-align: center;
}

.task-state--error {
  display: grid;
  justify-items: center;
  padding: 1.25rem;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-radius: var(--radius-md);
}

.task-state--error p {
  margin: 0.25rem 0 0.8rem;
  color: currentColor;
}

.empty-state {
  display: grid;
  min-height: 14rem;
  place-items: center;
  align-content: center;
  padding: 2rem;
  color: var(--muted);
  background: var(--surface-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
}

.empty-state__icon {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 50%;
}

.empty-state__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.empty-state h3 {
  margin: 0.8rem 0 0.25rem;
}

.empty-state p {
  margin-bottom: 0;
  font-size: 0.86rem;
}

.task-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.78rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.task-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.task-item__content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  min-width: 0;
  padding-block: 0.18rem;
  cursor: pointer;
}

.task-checkbox {
  display: inline-grid;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.02rem 0 0;
  appearance: none;
  place-items: center;
  color: var(--primary-text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: 0.38rem;
}

.task-checkbox::before {
  width: 0.75rem;
  height: 0.75rem;
  content: "";
  clip-path: polygon(14% 44%, 0 59%, 38% 100%, 100% 20%, 84% 5%, 37% 67%);
  background: currentColor;
  transform: scale(0);
  transform-origin: center;
}

.task-checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.task-checkbox:checked::before {
  transform: scale(1);
}

.task-item__title {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  line-height: 1.45;
}

.task-item__title.is-complete {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 0.1em;
}

.icon-button {
  display: inline-grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0.55rem;
}

.icon-button:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-button--small {
  width: 2rem;
  height: 2rem;
}

.task-delete {
  width: 2.35rem;
  height: 2.35rem;
  color: var(--subtle);
}

.task-delete:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.completed-section {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
}

.completed-section summary {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 720;
  list-style: none;
}

.completed-section summary::-webkit-details-marker {
  display: none;
}

.completed-section summary > span:first-child::before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.55rem;
  content: "";
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-0.08rem);
}

.completed-section[open] summary > span:first-child::before {
  transform: rotate(45deg) translateY(-0.12rem);
}

.task-list--completed {
  padding-bottom: 0.5rem;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.site-footer__inner {
  display: flex;
  width: min(100%, var(--page-width));
  min-height: 3.5rem;
  margin-inline: auto;
  padding: 0.8rem max(1rem, env(safe-area-inset-right)) max(0.8rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer__identity {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--subtle);
  font-size: 0.74rem;
}

.site-footer__identity strong {
  color: var(--muted);
  font-size: 0.76rem;
}

.site-footer__nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.76rem;
  font-weight: 700;
}

.site-footer__nav a {
  color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22rem;
}

.site-footer__nav a:hover {
  color: var(--text);
}

.dialog {
  width: min(calc(100vw - 2rem), 30rem);
  max-height: min(90vh, 42rem);
  margin: auto;
  padding: 1.2rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.dialog--compact {
  width: min(calc(100vw - 2rem), 27rem);
}

.dialog::backdrop {
  background: rgb(6 13 24 / 55%);
  backdrop-filter: blur(3px);
}

.dialog__close-form {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  margin: 0;
}

.dialog__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  padding-right: 2.5rem;
}

.dialog__header p {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
}

.dialog__icon {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 0.72rem;
}

.dialog__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.dialog__icon--danger {
  color: var(--danger);
  background: var(--danger-soft);
}

.dialog__icon--warning {
  color: var(--warning);
  background: var(--warning-soft);
}

.dialog__form {
  margin-top: 1.25rem;
}

.dialog__form label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.83rem;
  font-weight: 740;
}

.dialog__form .button {
  margin-top: 0.75rem;
}

.rate-limit-status {
  margin: 0.7rem 0 0;
  padding: 0.65rem 0.7rem;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  border-radius: var(--radius-sm);
  font-size: 0.73rem;
  line-height: 1.45;
}

.rate-limit-status[data-state="cooldown"] {
  font-weight: 700;
}

.dialog__footnote {
  margin: 0.9rem 0 0;
  color: var(--subtle);
  font-size: 0.75rem;
  text-align: center;
}

.dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.35rem;
}

.toast-region {
  position: fixed;
  z-index: 200;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(calc(100vw - 2rem), 24rem);
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.7rem;
  padding: 0.8rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
}

.toast[data-state="success"] {
  border-color: color-mix(in srgb, var(--success) 55%, var(--border));
}

.toast[data-state="error"] {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
}

.toast__icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 50%;
}

.toast[data-state="success"] .toast__icon {
  color: var(--success);
  background: var(--success-soft);
}

.toast[data-state="error"] .toast__icon {
  color: var(--danger);
  background: var(--danger-soft);
}

.toast__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.toast__copy {
  min-width: 0;
}

.toast__copy strong {
  display: block;
  font-size: 0.84rem;
}

.toast__copy p {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 42rem) {
  .connection__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .connection {
    width: 2rem;
    justify-content: center;
    padding: 0;
  }

  .account-trigger__label {
    display: none;
  }

  .account-trigger {
    padding-right: 0.28rem;
  }

  .account-trigger__chevron {
    display: none;
  }

  .trust-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .guest-banner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .guest-banner__action {
    grid-column: 2;
    justify-self: start;
    padding-left: 0;
  }
}

@media (max-width: 34rem) {
  .main {
    padding-top: 1.5rem;
  }

  .landing__content {
    padding-block: 1.5rem 3rem;
  }

  .workspace__heading {
    align-items: center;
  }

  .composer__controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .composer__submit {
    width: 100%;
  }

  .composer__meta span:first-child {
    display: none;
  }

  .composer__meta {
    justify-content: flex-end;
  }

  .dialog__actions--stack-mobile {
    flex-direction: column;
  }

  .dialog__actions--stack-mobile .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .text-action,
  .account-trigger,
  .menu-action,
  .task-item,
  .icon-button,
  input {
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
  }

  .task-checkbox::before {
    transition: transform 120ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation-duration: 1.8s;
  }
}

@media (forced-colors: active) {
  .brand__mark,
  .account-avatar,
  .button--primary,
  .button--danger,
  .task-checkbox:checked {
    forced-color-adjust: none;
  }

  .connection__dot {
    border: 1px solid CanvasText;
  }
}


/* Policy pages */
.legal-main {
  width: min(100%, 58rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) max(1rem, env(safe-area-inset-right)) clamp(4rem, 8vw, 7rem) max(1rem, env(safe-area-inset-left));
}

.legal-hero {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.legal-hero h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.legal-hero__lede {
  max-width: 68ch;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.policy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  margin-top: 1rem;
  color: var(--subtle);
  font-size: 0.78rem;
}

.policy-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  margin: 1.5rem 0 0;
  padding: 1rem;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 36%, var(--border));
  border-radius: var(--radius-md);
}

.policy-notice svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.08rem;
}

.policy-notice strong {
  display: block;
  color: var(--text);
}

.policy-notice p {
  margin: 0.28rem 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
}

.policy-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

.policy-summary__item {
  min-width: 0;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.policy-summary__item strong {
  display: block;
  font-size: 0.85rem;
}

.policy-summary__item span {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.legal-layout {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--topbar-height) + 1rem);
  padding: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.legal-toc strong {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-toc a {
  display: block;
  padding: 0.38rem 0;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.35;
  text-decoration: none;
}

.legal-toc a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.policy-article {
  min-width: 0;
}

.policy-section {
  scroll-margin-top: calc(var(--topbar-height) + 1.25rem);
  padding: 0 0 1.85rem;
}

.policy-section + .policy-section {
  padding-top: 1.85rem;
  border-top: 1px solid var(--border);
}

.policy-section h2 {
  margin: 0 0 0.8rem;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.policy-section h3 {
  margin: 1.2rem 0 0.45rem;
  font-size: 0.96rem;
}

.policy-section p,
.policy-section li,
.policy-section dd {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.policy-section p {
  margin: 0.65rem 0 0;
}

.policy-section ul {
  margin: 0.7rem 0 0;
  padding-left: 1.2rem;
}

.policy-section li + li {
  margin-top: 0.38rem;
}

.policy-section a {
  color: var(--primary);
  overflow-wrap: anywhere;
}

.policy-table {
  width: 100%;
  margin-top: 0.8rem;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.policy-table th,
.policy-table td {
  padding: 0.75rem;
  vertical-align: top;
  border: 1px solid var(--border);
  text-align: left;
}

.policy-table th {
  color: var(--text);
  background: var(--surface-muted);
}

.policy-table td {
  color: var(--muted);
  line-height: 1.55;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 720;
  text-decoration: none;
}

.legal-back svg {
  width: 1rem;
  height: 1rem;
}

.legal-back:hover {
  color: var(--text);
}

@media (max-width: 48rem) {
  .site-footer__inner {
    align-items: flex-start;
  }

  .site-footer__identity {
    flex-direction: column;
    gap: 0.15rem;
  }

  .policy-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-toc {
    position: static;
  }

  .legal-toc nav {
    columns: 2;
    column-gap: 1.2rem;
  }
}

@media (max-width: 34rem) {
  .site-footer__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .site-footer__nav {
    justify-content: flex-start;
  }

  .legal-toc nav {
    columns: 1;
  }

  .policy-table {
    display: block;
    overflow-x: auto;
    white-space: normal;
  }
}

@media print {
  .topbar,
  .site-footer,
  .legal-toc,
  .policy-notice {
    display: none !important;
  }

  .legal-main {
    width: auto;
    padding: 0;
  }

  .legal-layout {
    display: block;
  }

  .policy-section {
    break-inside: avoid;
  }
}