/* ==========================================================================
   Personal OS V2 — navigation shell and UI primitives
   Loaded AFTER style.css. Owns the app frame, the 5-destination navigation,
   the More sheet, and the button/form/card/list primitives that pages
   migrate onto milestone by milestone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Frame
   -------------------------------------------------------------------------- */
.app-frame {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface-page);
}

.app-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: calc(var(--sp-3) + var(--safe-area-top)) var(--sp-4) var(--sp-3);
  background: var(--surface-page);
}

.app-topbar-title {
  flex: 1;
  min-width: 0;
}

.app-topbar-title h1 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-topbar-title p {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  display: none;
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--content-max-wide);
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-4) calc(var(--tabbar-height) + var(--sp-6) + var(--safe-area-bottom));
}

.app-notice-stack {
  width: 100%;
  max-width: var(--content-max-wide);
  margin: 0 auto;
  padding: 0 var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 200;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--elev-2);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

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

/* --------------------------------------------------------------------------
   Phone: bottom tab bar (5 destinations, last one opens More)
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: grid;
  /* Today + up to four owner-chosen shortcuts + More. The column count follows
     the pinned set rather than being fixed at five, so pinning a fourth
     shortcut widens the bar's rhythm instead of overflowing it. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  padding-bottom: var(--safe-area-bottom);
  background: var(--surface);
  box-shadow: 0 -1px 0 var(--line), var(--elev-2);
}

.tabbar-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--tabbar-height);
  padding: var(--sp-2) var(--sp-1);
  border: none;
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-3);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease);
}

.tabbar-item svg,
.rail-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.7;
}

.tabbar-item span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Blue marks position. The label alone was the only signal for the active
   destination; the bar reads faster with a weight change and a short rule. */
.tabbar-item.is-active {
  color: var(--accent);
  font-weight: var(--fw-semibold);
}

.tabbar-item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 2px;
  border-radius: 0 0 var(--r-full) var(--r-full);
  background: var(--accent);
  transform: translateX(-50%);
}

.nav-icon {
  position: relative;
  display: inline-flex;
}

.nav-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--positive);
  box-shadow: 0 0 0 2px var(--surface);
}

/* --------------------------------------------------------------------------
   Desktop: compact rail with the same 5 destinations
   -------------------------------------------------------------------------- */
.rail {
  display: none;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}

.rail-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
}

.rail-brand svg {
  width: 20px;
  height: 20px;
}

.rail-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2) var(--sp-1);
  border: none;
  border-radius: var(--r-md);
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.rail-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.7;
}

.rail-item:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.rail-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.rail-spacer {
  flex: 1;
}

/* --------------------------------------------------------------------------
   More sheet
   -------------------------------------------------------------------------- */
.sheet[hidden] {
  display: none;
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-scrim {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: var(--overlay);
  cursor: pointer;
  animation: sheet-fade var(--dur) var(--ease);
}

.sheet-panel {
  position: relative;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--safe-area-bottom));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface);
  box-shadow: var(--elev-3);
  animation: sheet-rise var(--dur) var(--ease);
}

@keyframes sheet-fade {
  from { opacity: 0; }
}

@keyframes sheet-rise {
  from { transform: translateY(6%); opacity: 0; }
}

.sheet-grabber {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-full);
  background: var(--line-strong);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.sheet-header h2 {
  font-size: var(--fs-lg);
}

.sheet-header-title p {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.sheet-group + .sheet-group {
  margin-top: var(--sp-4);
}

.sheet-group-label {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
}

/* Each destination carries its own pin control. The control has to be
   discoverable without permanently decorating every tile, so it fades in on
   hover and on keyboard focus, and stays visible on touch — where there is no
   hover to reveal it — through the coarse-pointer rule below. */
.sheet-tile {
  position: relative;
}

.sheet-pin-form {
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  transform: translateY(-50%);
}

.sheet-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.sheet-pin svg {
  width: 17px;
  height: 17px;
}

.sheet-tile:hover .sheet-pin,
.sheet-pin:focus-visible,
.sheet-tile.is-pinned .sheet-pin {
  opacity: 1;
}

.sheet-pin:hover {
  background: var(--surface);
  color: var(--ink);
}

.sheet-tile.is-pinned .sheet-pin {
  color: var(--accent);
}

/* Full: the control stays focusable so it can still say why, but it reads as
   unavailable rather than as one more thing to press. */
.sheet-pin[aria-disabled="true"] {
  color: var(--ink-3);
}

.sheet-tile:hover .sheet-pin[aria-disabled="true"] {
  opacity: 0.5;
}

.sheet-pin[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--ink-3);
}

.sheet-tile .sheet-link {
  padding-right: calc(var(--sp-6) + var(--sp-1));
}

/* On touch there is no hover to reveal the control, so it is always visible —
   and at a full 44px target, which the tile's own row height already allows.
   The link's padding grows with it so a long label never runs under the pin. */
@media (hover: none) {
  .sheet-pin {
    width: var(--tap-min);
    height: var(--tap-min);
    opacity: 1;
  }

  .sheet-tile .sheet-link {
    padding-right: calc(var(--sp-7) + var(--sp-2));
  }
}

.sheet-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap-min);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}

.sheet-link:hover {
  background: var(--surface-3);
}

.sheet-link.is-active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.sheet-link svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
  color: var(--ink-3);
}

.sheet-link.is-active svg {
  color: var(--accent);
}

.sheet-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Primitives — buttons
   -------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.btn svg,
.btn-primary svg,
.btn-secondary svg,
.btn-ghost svg,
.btn-danger svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: var(--accent-strong);
}

.btn-secondary,
.btn {
  background: var(--surface-2);
  color: var(--ink);
}

.btn-secondary:hover,
.btn:hover {
  background: var(--surface-3);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.btn-danger {
  background: var(--critical-soft);
  color: var(--critical-ink);
}

.btn-danger:hover {
  background: var(--critical);
  /* The dark theme's critical is a light salmon, so white-on-it fails the same
     way white-on-accent does. --ink-inverse flips with the theme. */
  color: var(--ink-inverse);
}

.btn-sm {
  min-height: 36px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
}

.btn-lg {
  min-height: 54px;
  padding: 0 var(--sp-5);
  font-size: var(--fs-base);
  border-radius: var(--r-lg);
}

.btn-block {
  width: 100%;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
}

/* --------------------------------------------------------------------------
   Primitives — forms
   -------------------------------------------------------------------------- */
.form-group {
  display: grid;
  gap: var(--sp-2);
}

.form-group + .form-group {
  margin-top: var(--sp-4);
}

.form-group label,
.form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  scroll-margin-top: 6rem;
  scroll-margin-bottom: 8rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--ink-3);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.form-textarea {
  resize: vertical;
  min-height: 96px;
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  min-height: 48px;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   Primitives — surfaces
   -------------------------------------------------------------------------- */
.surface {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.surface-quiet {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.section {
  margin-top: var(--sp-5);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.section-head h2 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}

.section-head a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.muted {
  color: var(--ink-3);
}

.empty-note {
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-align: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.chip-accent { background: var(--accent-soft); color: var(--accent-ink); }
/* Coral, for the one thing on a surface that is new energy rather than state.
   Kept to a single chip on purpose — spread across a page it stops meaning
   anything. */
.chip-energy { background: var(--energy-soft); color: var(--energy-ink); }
.chip-positive { background: var(--positive-soft); color: var(--positive-ink); }
.chip-caution { background: var(--caution-soft); color: var(--caution-ink); }
.chip-critical { background: var(--critical-soft); color: var(--critical-ink); }

.notice-banner {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.notice-info { background: var(--accent-soft); color: var(--accent-ink); }
.notice-success { background: var(--positive-soft); color: var(--positive-ink); }
.notice-warning { background: var(--caution-soft); color: var(--caution-ink); }
.notice-error { background: var(--critical-soft); color: var(--critical-ink); }

.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Undo snackbar (V2.3)
   One compact, non-blocking bar: what happened, and one way back. It sits on
   the inverse surface so it reads as system feedback rather than as another
   card in the page, and it inverts with the theme rather than being painted
   dark in both. Never full width on desktop, never over the tab bar on phone.
   -------------------------------------------------------------------------- */
.undo-toast {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(var(--tabbar-height) + var(--sp-3) + var(--safe-area-bottom));
  z-index: 160;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-inverse);
  color: var(--ink-inverse);
  box-shadow: var(--elev-3);
  animation: undo-toast-in var(--dur) var(--ease);
}

@keyframes undo-toast-in {
  from { transform: translateY(8px); opacity: 0; }
}

.undo-toast[hidden] {
  display: none;
}

.undo-toast-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.undo-toast-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.undo-toast-detail {
  font-size: var(--fs-xs);
  opacity: 0.78;
  overflow-wrap: anywhere;
}

/* A light chip on the inverse surface: the one shape that stays high-contrast
   in both themes without hard-coding a colour the theme cannot re-point. */
.undo-toast-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border: none;
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.undo-toast-action:hover {
  background: var(--surface-2);
}

.undo-toast-action:disabled {
  opacity: 0.55;
  cursor: default;
}

.undo-toast-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  border: none;
  border-radius: var(--r-full);
  background: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.undo-toast-dismiss:hover {
  opacity: 1;
}

.undo-toast :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .undo-toast {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Install banner (PWA) — behaviour and JS hooks unchanged from V1
   -------------------------------------------------------------------------- */
.install-banner {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(var(--tabbar-height) + var(--sp-3) + var(--safe-area-bottom));
  z-index: 150;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--elev-3);
}

.install-banner[hidden] {
  display: none;
}

.install-banner-copy strong {
  display: block;
  font-size: var(--fs-sm);
}

.install-banner-copy p {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.install-banner-actions {
  display: flex;
  gap: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Tablet and up
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  .app-topbar-title p {
    display: block;
  }

  .app-main {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
  }

  .app-notice-stack {
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
  }
}

@media (min-width: 900px) {
  .app-frame {
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
  }

  .rail {
    display: flex;
  }

  .tabbar {
    display: none;
  }

  .app-topbar {
    min-height: 68px;
    padding-inline: var(--sp-6);
  }

  .app-topbar-title h1 {
    font-size: var(--fs-xl);
  }

  .app-main {
    padding: var(--sp-3) var(--sp-6) var(--sp-8);
  }

  .app-notice-stack {
    padding-inline: var(--sp-6);
  }

  .install-banner {
    left: auto;
    right: var(--sp-5);
    bottom: calc(var(--sp-5) + var(--safe-area-bottom));
    max-width: 460px;
  }

  /* No tab bar to clear here, and a full-width snackbar on a 1440 desktop
     would be a banner, not a snackbar. */
  .undo-toast {
    left: auto;
    right: var(--sp-5);
    bottom: calc(var(--sp-5) + var(--safe-area-bottom));
    width: min(28rem, calc(100vw - var(--rail-width) - var(--sp-6)));
  }

  .sheet {
    align-items: center;
  }

  .sheet-panel {
    max-width: 720px;
    max-height: 80vh;
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    animation: sheet-pop var(--dur) var(--ease);
  }

  .sheet-grabber {
    display: none;
  }

  @keyframes sheet-pop {
    from { transform: scale(0.98); opacity: 0; }
  }
}

/* --------------------------------------------------------------------------
   Auth screens
   -------------------------------------------------------------------------- */
.auth-body {
  background: var(--surface-page);
}

.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + var(--safe-area-bottom));
}

.auth-layout {
  width: 100%;
  max-width: 26rem;
  display: grid;
  gap: var(--sp-4);
}

.auth-panel {
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--elev-2);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.auth-brand .brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.auth-brand h1 {
  font-size: var(--fs-lg);
}

.auth-brand p {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.auth-form {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.auth-submit {
  width: 100%;
  min-height: 50px;
}

.auth-secondary-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.auth-secondary-actions a {
  color: var(--ink-2);
  text-decoration: none;
}

.auth-secondary-actions a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Recovery screens have one secondary link, not a link plus the install
   button, so it sits at the start rather than pushed to the far edge. */
.auth-secondary-actions-single {
  justify-content: flex-start;
}

.auth-note {
  margin-top: var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.auth-quote {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.auth-quote cite {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-style: normal;
  color: var(--ink-3);
}