/* Angel Cloud web front: landing, sign-in, Connect your Mac, account. Follows the Angel Cloud design system
   (tokens.css; components SkyBackdrop, Button, TextField, ListItem, Modal): the sky is the ground, text sits on
   islands (color-background) or glass, one accent (color-primary), sentence-case pill buttons. */

@font-face { font-family: "Roboto"; src: url("fonts/Roboto-Regular-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/Roboto-Medium-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 500;
  --ease-layer: cubic-bezier(0.33, 1, 0.68, 1);
  --page-max: 72rem;
  --gutter: 1rem;
  --sky-image: url("sky-light.jpg");
}
@supports (font: -apple-system-body) { :root { --font-weight-semibold: 600; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sky-image: url("sky-dark.jpg"); } }
:root[data-theme="dark"] { --sky-image: url("sky-dark.jpg"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-background-secondary);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--color-links); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: var(--font-weight-semibold); }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- the sky (SkyBackdrop: the rendered art; still, never under bare text) ---- */
.sky {
  position: relative;
  background-color: var(--color-background-sidebar);
  background-image: var(--sky-image);
  background-size: cover;
  background-position: 50% 70%;
}

/* ---- top bar: a glass pill floating on the sky ---- */
.topbar {
  position: sticky;
  top: 0.75rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(var(--page-max), calc(100% - 2 * var(--gutter)));
  min-height: 3.5rem;
  margin: 0.75rem auto 0;
  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
  border-radius: var(--border-radius-modal);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: var(--shadow-pane);
}
.brand { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--color-text); font-weight: var(--font-weight-semibold); font-size: 1.0625rem; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { width: 2rem; height: 2rem; border-radius: 0.5rem; }
.topbar nav { display: flex; gap: 0.25rem; margin-left: 1rem; }
.topbar nav a { padding: 0.375rem 0.75rem; border-radius: var(--border-radius-button); color: var(--color-text-secondary); font-size: 0.9375rem; }
.topbar nav a:hover { background: var(--color-interactive-element-hover); color: var(--color-text); text-decoration: none; }
.topbar .actions { display: flex; gap: 0.375rem; margin-left: auto; align-items: center; }

/* ---- buttons (Button: 3 / 2.5 rem pills, sentence case like the Spaces pages) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--border-radius-button);
  font: inherit;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms, color 150ms, opacity 150ms;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-shade); }
.btn-secondary { background: var(--color-primary-tint); color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary-opacity-hover); }
.btn-text { background: transparent; color: var(--color-primary); padding: 0 1rem; }
.btn-text:hover { background: var(--color-interactive-element-hover); }
.btn-danger { background: transparent; color: var(--color-error); }
.btn-danger:hover { background: var(--color-interactive-element-hover); }
.btn-small { height: 2.5rem; padding: 0 1rem; font-size: 0.9375rem; }
.btn-tiny { height: 2.25rem; padding: 0 0.875rem; font-size: 0.875rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn .spinner { width: 1.125rem; height: 1.125rem; }

.spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- islands ---- */
.island {
  background: var(--color-background);
  border-radius: var(--border-radius-island);
  box-shadow: var(--shadow-island);
}
.glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
}
@media (prefers-reduced-transparency: reduce) {
  .topbar, .glass { background: var(--color-background); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- text fields (TextField: 3rem outlined, the label floats onto the border) ---- */
.field { position: relative; margin-bottom: 1.125rem; }
.field input {
  display: block;
  width: 100%;
  height: 3rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-borders-input);
  border-radius: var(--border-radius-default);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
  line-height: 1.25rem;
  caret-color: var(--color-primary);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.field input::placeholder { color: transparent; }
.field input:hover { border-color: var(--color-primary); }
.field input:focus { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.field label {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0 0.25rem;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-placeholders);
  background: var(--color-background);
  pointer-events: none;
  transform-origin: left center;
  transition: transform 150ms var(--ease-layer), color 150ms;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label { transform: translateY(-1.5rem) scale(0.75); color: var(--color-text-secondary); }
.field input:focus + label { color: var(--color-primary); }
.field.error input { border-color: var(--color-error); box-shadow: none; }
.field.error label { color: var(--color-error) !important; }
.field.success label { color: var(--color-text-green) !important; }
.field .suffix {
  position: absolute;
  right: 0.875rem;
  top: 0.75rem;
  color: var(--color-text-secondary);
  pointer-events: none;
}
.field.has-suffix input { padding-right: 9.5rem; }
.hint { margin: -0.625rem 0 1.125rem 0.875rem; color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.25rem; }
.hint.ok { color: var(--color-text-green); }
.hint.bad { color: var(--color-error); }

/* ---- messages ---- */
.notice { padding: 0.75rem 1rem; border-radius: var(--border-radius-default); background: var(--color-background-secondary); color: var(--color-text); font-size: 0.9375rem; }
.notice.error { color: var(--color-error); }
.notice.warning { color: var(--color-text); box-shadow: inset 3px 0 0 var(--color-warning); }
.muted { color: var(--color-text-secondary); }
.small { font-size: 0.875rem; line-height: 1.25rem; }

/* ---- status: a dot and its word ---- */
.status { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--color-text-secondary); }
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-gray); }
.status.online::before { background: var(--color-green); }
.status.offline::before { background: var(--color-error); }
.status.waiting::before { background: var(--color-warning); }

/* ---- the card pages (sign-in, sign-up, connect, device) ---- */
.card-page { display: flex; flex-direction: column; min-height: 100vh; }
.card-page main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem var(--gutter) 3rem; }
.card { width: min(27rem, 100%); padding: 2rem; }
.card .logo { display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 0.875rem; }
.card h1 { font-size: 1.5rem; text-align: center; margin-bottom: 0.5rem; }
.card .lead { text-align: center; color: var(--color-text-secondary); margin-bottom: 1.5rem; }
.card form { margin: 0; }
.card .stack { display: flex; flex-direction: column; gap: 0.75rem; }
.card .foot { margin-top: 1.25rem; text-align: center; color: var(--color-text-secondary); font-size: 0.9375rem; }
.divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--color-text-secondary); font-size: 0.875rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-dividers); }
.code-box {
  margin: 0.5rem auto 1.25rem;
  padding: 0.75rem 1rem;
  width: fit-content;
  border-radius: var(--border-radius-default);
  background: var(--color-background-secondary);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
}
.steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.steps li { display: flex; gap: 0.875rem; align-items: flex-start; }
.steps .num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
}
.steps li.done .num { background: var(--color-primary); color: var(--color-on-primary); }
.steps .step-title { font-weight: var(--font-weight-medium); }
.steps .step-text { color: var(--color-text-secondary); font-size: 0.9375rem; }

.site-foot { padding: 1.5rem var(--gutter) 2rem; text-align: center; font-size: 0.875rem; }
.site-foot .island { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; padding: 0.5rem 1.25rem; border-radius: var(--border-radius-modal); }
.site-foot a { color: var(--color-text-secondary); }

@media (max-width: 600px) {
  .topbar nav { display: none; }
  .topbar .actions .btn-text { padding: 0 0.625rem; }
  .card { padding: 1.5rem 1.25rem; }
  .card h1 { font-size: 1.375rem; }
}
@media (max-width: 380px) {
  .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; }
}

/* ---- landing ---- */
.icon { width: 1.5rem; height: 1.5rem; fill: currentColor; flex: none; }
.hero { padding-bottom: 4rem; }
.hero-inner { width: min(var(--page-max), calc(100% - 2 * var(--gutter))); margin: 0 auto; padding-top: clamp(3rem, 10vh, 7rem); }
.hero-card { max-width: 38rem; padding: 2rem 2rem 1.75rem; }
.hero-card .avatar { width: 4rem; height: 4rem; border-radius: 50%; margin-bottom: 1rem; box-shadow: var(--shadow-sun); }
.eyebrow { color: var(--color-primary); font-weight: var(--font-weight-medium); font-size: 0.9375rem; margin-bottom: 0.5rem; }
.hero-card h1 { font-size: clamp(1.875rem, 4.5vw, 2.75rem); letter-spacing: -0.01em; margin-bottom: 1rem; }
.hero-card .lead { font-size: 1.125rem; color: var(--color-text-secondary); margin-bottom: 1.5rem; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.cta-note { margin-top: 1rem; }
.sections { width: min(var(--page-max), calc(100% - 2 * var(--gutter))); margin: -2rem auto 0; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.section { padding: 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; scroll-margin-top: 5rem; }
.section h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; }
.section .text p + p { margin-top: 0.75rem; }
.section .text p { color: var(--color-text-secondary); font-size: 1.0625rem; }
.points { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.points li { display: flex; gap: 0.75rem; align-items: flex-start; }
.points li .icon { color: var(--color-primary); margin-top: 0.125rem; }
.points strong { display: block; font-weight: var(--font-weight-medium); }
.points span { color: var(--color-text-secondary); font-size: 0.9375rem; }
.visual { border-radius: var(--border-radius-island); overflow: hidden; min-height: 16rem; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.chat-demo { width: min(22rem, 100%); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; border-radius: var(--border-radius-island); box-shadow: var(--shadow-island); }
.chat-demo .who { display: flex; align-items: center; gap: 0.625rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-dividers); margin-bottom: 0.25rem; }
.chat-demo .who img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.chat-demo .who b { display: block; font-weight: var(--font-weight-semibold); }
.bubble { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: var(--border-radius-messages); font-size: 0.9375rem; line-height: 1.35; }
.bubble.in { align-self: flex-start; background: var(--color-background-secondary); border-bottom-left-radius: var(--border-radius-messages-small); }
.bubble.out { align-self: flex-end; background: var(--color-background-own); border-bottom-right-radius: var(--border-radius-messages-small); }
.apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; width: min(24rem, 100%); padding: 0.75rem; border-radius: var(--border-radius-island); box-shadow: var(--shadow-island); }
.app-tile { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0.75rem 0.25rem; border-radius: var(--border-radius-default); text-align: center; }
.app-tile:hover { background: var(--color-chat-hover); }
.app-tile svg { width: 3.5rem; height: 3.5rem; color: var(--color-text-secondary); }
.app-tile:hover svg { color: var(--color-primary); }
.app-tile .name { font-size: 0.875rem; font-weight: var(--font-weight-medium); line-height: 1.25; }
.app-tile .meta { font-size: 0.75rem; color: var(--color-text-secondary); }
.how { padding: 2rem; }
.how h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.25rem; }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.how li { padding: 1.25rem; border-radius: var(--border-radius-default); background: var(--color-background-secondary); }
.how li .num { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--font-weight-semibold); margin-bottom: 0.75rem; }
.how li b { display: block; font-weight: var(--font-weight-medium); margin-bottom: 0.25rem; }
.how li p { color: var(--color-text-secondary); font-size: 0.9375rem; }
.address { font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-text); background: var(--color-background); padding: 0.0625rem 0.375rem; border-radius: 0.375rem; }
.final { margin-top: 1rem; padding: 4rem var(--gutter); }
.final .island { max-width: 34rem; margin: 0 auto; padding: 2rem; text-align: center; }
.final h2 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.final p { color: var(--color-text-secondary); margin-bottom: 1.25rem; }
.final .cta { justify-content: center; }

@media (max-width: 860px) {
  .section { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; gap: 1.5rem; }
  .how ol { grid-template-columns: minmax(0, 1fr); }
  .how { padding: 1.5rem; }
}
@media (max-width: 600px) {
  .hero-card { padding: 1.5rem 1.25rem; }
  .hero-card .lead { font-size: 1.0625rem; }
  .cta .btn { flex: 1 1 auto; }
  .visual { min-height: 0; padding: 1rem; }
  .final .island { padding: 1.5rem 1.25rem; }
}
.app-tile .glyph { fill: none; stroke: var(--color-background); stroke-width: 1.75px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.node-card { width: min(22rem, 100%); padding: 0.5rem; border-radius: var(--border-radius-island); box-shadow: var(--shadow-island); display: flex; flex-direction: column; }
.node-row { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem; border-radius: var(--border-radius-default); }
.node-row + .node-row { border-top: 1px solid var(--color-dividers); border-radius: 0; }
.node-row .icon { color: var(--color-primary); }
.node-row b { display: block; font-weight: var(--font-weight-medium); }

/* ---- modal (Modal: a dialog island over a scrim) ---- */
dialog.modal { width: min(24rem, calc(100% - 2rem)); padding: 1.5rem; border: 0; color: var(--color-text); box-shadow: var(--shadow-dialog); }
dialog.modal::backdrop { background: rgba(5, 9, 15, 0.45); }
.modal-title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }

/* ---- account ---- */
.page { width: min(48rem, calc(100% - 2 * var(--gutter))); margin: 1.5rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
.page-head { padding: 1.5rem 1.5rem 1.25rem; display: flex; gap: 1rem; align-items: center; }
.page-head .avatar-letter { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-on-primary); font-size: 1.5rem; font-weight: var(--font-weight-semibold); }
.page-head h1 { font-size: 1.5rem; overflow-wrap: anywhere; }
.page-head .meta { color: var(--color-text-secondary); font-size: 0.9375rem; overflow-wrap: anywhere; }
.panel { padding: 1.25rem 1rem 1rem; }
.panel > h2 { font-size: 1.0625rem; padding: 0 0.5rem; margin-bottom: 0.5rem; }
.panel > .panel-text { padding: 0 0.5rem; color: var(--color-text-secondary); font-size: 0.9375rem; margin-bottom: 0.75rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 0.875rem; min-height: 3.5rem; padding: 0.5rem; border-radius: var(--border-radius-default); }
.row:hover { background: var(--color-chat-hover); }
.row > .icon { color: var(--color-text-secondary); }
.row .body { flex: 1; min-width: 0; }
.row .title { font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.row .sub { color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.25rem; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 0 0.5rem; align-items: center; }
.row .row-actions { display: flex; gap: 0.25rem; flex: none; }
.empty { padding: 0.75rem 0.5rem; color: var(--color-text-secondary); font-size: 0.9375rem; }
.panel .panel-actions { padding: 0.5rem 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.inline-form { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem; }
.inline-form .field { flex: 1; margin-bottom: 0; }
.tag { display: inline-block; padding: 0 0.5rem; border-radius: 0.75rem; background: var(--color-primary-tint); color: var(--color-primary); font-size: 0.75rem; line-height: 1.25rem; font-weight: var(--font-weight-medium); }
@media (max-width: 600px) {
  .row { flex-wrap: wrap; }
  .row .row-actions { width: 100%; justify-content: flex-end; }
  .inline-form { flex-direction: column; align-items: stretch; }
}
.account-sky { padding-bottom: 3rem; }
.account-sky .page { margin-top: 2.5rem; }
.account-page > main.page { margin-top: -2rem; position: relative; }
.account-sky { background-image: linear-gradient(to bottom, transparent 55%, var(--color-background-secondary) 100%), var(--sky-image); }
@media (max-width: 600px) {
  .account-page .brand span { display: none; }
  .row .row-actions:empty { display: none; }
}