/* Account — the same instrument, one plate at a time.
   The workspace's language (a machined leading-edge rule, engraved labels,
   mono for values) carries over so signing in feels like the same object. */

.account-body { background: var(--mineral-1000); color: var(--limestone-100); font-family: var(--font-ui); min-height: 100dvh; }
.account-page { display: flex; flex-direction: column; gap: var(--space-6); margin-inline: auto; max-width: 28rem; min-height: 100dvh; padding: var(--space-8) var(--space-5) max(var(--space-8), env(safe-area-inset-bottom)); position: relative; z-index: 1; }

.account-brand { align-items: center; display: flex; gap: var(--space-3); }
.account-brand .brand-mark { border-radius: var(--radius-md); }
.account-brand .wordmark { display: flex; flex-direction: column; }
.account-brand strong { font-size: var(--text-lg, 1.1rem); }
.account-brand small { color: var(--limestone-300); font-size: var(--text-xs); }

/* The plate: glass over the ground, and a rule on the side the text starts from. */
.account-card { background: linear-gradient(180deg, rgb(18 50 55 / 55%), transparent 30%), var(--surface-glass-strong); backdrop-filter: blur(18px) saturate(120%); border: 1px solid var(--border-mid); border-radius: var(--radius-xl); box-shadow: var(--shadow-float), inset 0 1px 0 rgb(255 255 255 / 6%); padding: var(--space-6); position: relative; }
.account-card::before { content: ""; position: absolute; inset-block: var(--space-6); inset-inline-start: 0; inline-size: 3px; border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); background: linear-gradient(180deg, var(--emerald-400), transparent); }
.account-card h1 { font-size: var(--text-lg, 1.35rem); font-weight: 800; margin: 0; }
.account-card h1::before { content: ""; display: block; inline-size: 2.5rem; block-size: 1px; margin-block-end: var(--space-3); background: linear-gradient(270deg, var(--gold-400), transparent); }
.account-card > p { color: var(--limestone-300); line-height: 1.8; margin-block: var(--space-3) var(--space-5); }
.account-card form { display: flex; flex-direction: column; }
.account-submit { margin-block-start: var(--space-5); width: 100%; }

/* An error is an annotation pinned to the form, not a red sentence floating under it. */
.account-error { border-inline-start: 2px solid var(--red-400); background: var(--red-wash); border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); color: var(--limestone-100); font-size: var(--text-sm); line-height: 1.7; margin-block: var(--space-3) 0; padding: var(--space-2) var(--space-3); }

.account-switch { color: var(--limestone-300); font-size: var(--text-sm); margin-block-start: var(--space-5); text-align: center; }
.link-button { background: none; border: none; color: var(--emerald-300); cursor: pointer; font: inherit; font-weight: 700; padding: 0; min-block-size: var(--touch-target); }
.account-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-5); }
.account-actions .button { flex: 1; }

/* Devices read as ledger rows: name, then the facts in mono. */
.device-list { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.device-item { align-items: center; background: var(--mineral-1000); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); display: flex; gap: var(--space-3); justify-content: space-between; padding: var(--space-3) var(--space-4); }
.device-item-name { font-weight: 700; }
.device-badge { background: var(--emerald-wash); border: 1px solid var(--emerald-glow); border-radius: var(--radius-sm); color: var(--emerald-300); font-size: var(--text-xs); font-weight: 700; margin-inline-start: var(--space-2); padding: 0.15rem 0.5rem; }
.device-item-meta { color: var(--limestone-300); font-family: var(--font-mono); font-size: var(--text-xs); margin-block-start: var(--space-1); }

.account-empty { color: var(--limestone-300); font-size: var(--text-sm); margin-block-start: var(--space-5); }
.account-status { color: var(--limestone-300); font-size: var(--text-xs); text-align: center; min-block-size: 1.2em; }
.account-subsection { border-top: 1px solid var(--border-soft); margin-block-start: var(--space-6); padding-block-start: var(--space-6); }
.account-subsection h2 { font-size: var(--text-sm); font-weight: 700; margin: 0 0 var(--space-2); }

/* An input is a replaced element with an intrinsic width; inside the grid it
   ignores the column unless told to fill it, and spills past the plate. */
.account-card .field input { inline-size: 100%; min-inline-size: 0; min-block-size: var(--touch-target); }

/* Subscription: one engraved row — label, then the plan in the value voice. */
.subscription-card { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--mineral-1000); display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-5); padding: var(--space-4); }
.subscription-row { align-items: baseline; display: flex; justify-content: space-between; gap: var(--space-3); }
.subscription-label { color: var(--limestone-300); font-size: var(--text-xs); letter-spacing: 0.02em; }
.subscription-row strong { color: var(--gold-400); }
.subscription-detail { color: var(--limestone-300); font-size: var(--text-sm); line-height: 1.7; margin: 0; }
.subscription-card .button { align-self: flex-start; margin-block-start: var(--space-2); text-decoration: none; }