@layer tokens, base, features;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg-app);
    color: var(--text-1);
    font: var(--type-ui);
    letter-spacing: var(--tracking-base);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  ::selection { background: var(--selection); color: var(--selection-ink); }
  :focus-visible { outline: var(--ring-width) solid var(--ring); outline-offset: 2px; }
}

@layer features {
  .site-topbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: var(--topbar-height);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--stroke-edge);
  }
  .site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-1);
    text-decoration: none;
    font: var(--type-ui-strong);
    letter-spacing: var(--tracking-base);
  }
  .site-mark { height: var(--icon-lg); width: auto; color: var(--brand-mark); }
  .site-brand-sep { color: var(--text-4); }
  .site-product {
    color: var(--text-2);
    text-decoration: none;
    font: var(--type-ui-strong);
    letter-spacing: var(--tracking-base);
  }
  .site-product:hover { color: var(--text-1); }
  .site-nav { margin-left: auto; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1-5) var(--space-3); }
  .site-nav a { color: var(--text-2); text-decoration: none; white-space: nowrap; }
  .site-nav a:hover { color: var(--text-1); }
  .site-nav-pending { color: var(--text-4); }
  .site-nav-user { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
  .site-nav button { white-space: nowrap; }
  .site-nav button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--text-2);
    font: var(--type-ui);
    letter-spacing: var(--tracking-base);
    cursor: pointer;
  }
  .site-nav button:hover { color: var(--text-1); }

  .site-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--thread-width);
    margin: 0 auto;
    padding: var(--space-12) var(--space-4) var(--space-16);
  }
  .site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    max-width: var(--thread-width);
    margin: 0 auto;
    padding: var(--space-4);
    border-top: 1px solid var(--stroke-edge);
    color: var(--text-3);
    font: var(--type-label);
    letter-spacing: var(--tracking-sm);
  }
  .site-footer a { color: var(--text-2); }
  .site-footer-links { display: inline-flex; gap: var(--space-2); align-items: baseline; }

  .site-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-3);
    font: var(--type-label);
    letter-spacing: var(--tracking-sm);
  }
  .site-status-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--hue-accent);
  }
  .site-title {
    margin: var(--space-4) 0 0;
    font: var(--type-display);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-medium);
  }
  .site-lede {
    margin: var(--space-3) 0 0;
    max-width: var(--home-width);
    color: var(--text-prose);
    font: var(--type-prose);
    letter-spacing: var(--tracking-lg);
  }
  .site-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
  .site-caption { margin: var(--space-3) 0 0; color: var(--text-3); }
  .site-rule { border: 0; border-top: 1px solid var(--stroke-3); margin: var(--space-8) 0; }
  .site-section-title {
    margin: 0 0 var(--space-3);
    font: var(--type-group);
    letter-spacing: var(--tracking-base);
    color: var(--text-1);
  }
  .site-meta { color: var(--text-3); font: var(--type-label); letter-spacing: var(--tracking-sm); }
  .site-meta-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
  .site-meta-list div, .site-meta-list li { display: flex; gap: var(--space-3); align-items: baseline; }
  .site-meta-list li { justify-content: space-between; }
  .site-meta-list dt { color: var(--text-3); min-width: var(--space-16); }
  .site-meta-list dd { margin: 0; color: var(--text-1); }

  .site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-lg);
    padding: 0 var(--space-5);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font: var(--type-ui-strong);
    letter-spacing: var(--tracking-base);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }
  .site-button-primary { background: var(--bg-inverse); color: var(--text-inverse); }
  .site-button-primary:hover { background: var(--bg-inverse-hover); }
  .site-button-secondary { background: var(--fill-3); color: var(--text-1); }
  .site-button-secondary:hover { background: var(--fill-2); }
  .site-button-danger { background: var(--danger-soft); color: var(--text-danger); }
  .site-button-danger:hover { background: var(--danger-soft-hover); }
  .site-button[disabled] { opacity: 0.5; cursor: default; }
  .site-button-sm { min-height: var(--control-sm); padding: 0 var(--space-3); }
  /* Author display rules beat the UA [hidden]; restate it where hidden is used. */
  .site-button[hidden], .site-invite-once[hidden] { display: none; }

  /* Landing CTAs resolve async: while pending the logged-out slot paints as a
     static skeleton (same box, no wrong text, no shift), never a flash of the
     wrong CTA. Static on purpose: nothing to disable under reduced motion. */
  .site-actions[data-auth="pending"] [data-auth-show="out"] {
    color: transparent;
    background: var(--fill-3);
    pointer-events: none;
    user-select: none;
  }

  .site-form { display: grid; gap: var(--space-4); max-width: var(--home-width); }
  .site-field { display: grid; gap: var(--space-1-5); }
  .site-field label { font: var(--type-ui-strong); letter-spacing: var(--tracking-base); }
  .site-field input {
    min-height: var(--control-lg);
    padding: 0 var(--space-3);
    border: 1px solid var(--stroke-frame);
    border-radius: var(--radius-row);
    background: var(--bg-app);
    color: var(--text-1);
    font: var(--type-ui);
    letter-spacing: var(--tracking-base);
    caret-color: var(--caret);
    transition: border-color var(--duration-focus) var(--ease-focus),
      box-shadow var(--duration-focus) var(--ease-focus);
  }
  .site-field input:hover { border-color: var(--stroke-frame-active); }
  .site-field input:focus { outline: none; border-color: var(--text-1); box-shadow: 0 0 0 var(--halo-width) var(--fill-3); }
  .site-field-hint { color: var(--text-3); font: var(--type-label); letter-spacing: var(--tracking-sm); }
  .site-error { color: var(--text-danger); min-height: var(--line-height-base); }
  .site-error:empty { display: none; }
  .site-form-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

  .site-table-wrap { overflow-x: auto; border: 1px solid var(--stroke-3); border-radius: var(--radius-xl); }
  .site-table { width: 100%; border-collapse: collapse; }
  .site-table th, .site-table td {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--stroke-3);
    vertical-align: baseline;
    white-space: nowrap;
  }
  .site-table thead th {
    border-top: 0;
    color: var(--text-3);
    font: var(--type-label);
    letter-spacing: var(--tracking-sm);
  }
  .site-table td { color: var(--text-2); }
  .site-table .site-cell-main { white-space: normal; color: var(--text-1); }
  .site-table .site-cell-quiet { color: var(--text-3); }

  .site-cards { display: grid; gap: var(--space-4); }
  .site-card {
    border: 1px solid var(--stroke-3);
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    padding: var(--space-4) var(--space-5);
  }
  .site-card h2 { margin: 0 0 var(--space-2); font: var(--type-title); letter-spacing: var(--tracking-lg); }
  .site-card p { margin: 0 0 var(--space-3); color: var(--text-2); }
  .site-card-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: baseline; }
  .site-code {
    font-family: var(--font-mono);
    font-size: var(--font-size-code-inline);
    background: var(--fill-4);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1);
  }
  .site-invite-once {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--space-3);
    border: 1px solid var(--stroke-3);
    border-radius: var(--radius-row);
    background: var(--bg-inset);
  }
  .site-invite-once code {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-1);
    word-break: break-all;
  }
  .site-toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
  .site-select {
    min-height: var(--control-md);
    padding: 0 var(--space-2);
    border: 1px solid var(--stroke-frame);
    border-radius: var(--radius-row);
    background: var(--bg-app);
    color: var(--text-1);
    font: var(--type-ui);
    letter-spacing: var(--tracking-base);
  }
  .site-steps { margin: var(--space-3) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); color: var(--text-prose); }
  .site-steps li::marker { color: var(--text-3); }
  .site-note { color: var(--text-3); font: var(--type-label); letter-spacing: var(--tracking-sm); }
  a.site-inline { color: var(--text-link); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: var(--link-offset); text-decoration-thickness: var(--link-thickness); }
  a.site-inline:hover { text-decoration-color: var(--link-underline-hover); }

  .auth-progress { display: flex; gap: var(--space-1-5); }
  .auth-progress-seg {
    flex: 1;
    height: var(--space-0-5);
    border-radius: var(--radius-full);
    background: var(--stroke-3);
    transition: background-color var(--duration-fast) var(--ease-standard);
  }
  .auth-progress-seg[data-done] { background: var(--bg-inverse); }

  .auth-step { display: grid; gap: var(--space-4); }
  .auth-step[hidden] { display: none; }
  .auth-step[data-enter="fwd"] { animation: auth-enter-fwd var(--duration-swap) var(--ease-enter); }
  .auth-step[data-enter="back"] { animation: auth-enter-back var(--duration-swap) var(--ease-enter); }
  @keyframes auth-enter-fwd { from { opacity: 0; transform: translateX(var(--space-4)); } }
  @keyframes auth-enter-back { from { opacity: 0; transform: translateX(calc(var(--space-4) * -1)); } }
  html[data-reduce-motion="on"] .auth-step[data-enter] { animation: none; }
  @media (prefers-reduced-motion: reduce) {
    .auth-step[data-enter] { animation: none; }
    .auth-progress-seg { transition: none; }
  }

  .site-button[data-state="loading"] { opacity: 0.7; cursor: wait; }
  .site-button[data-state="success"] { background: var(--hue-green); color: var(--text-inverse); opacity: 1; }

  .auth-meter { display: flex; gap: var(--space-1-5); }
  .auth-meter-seg {
    flex: 1;
    height: var(--space-0-5);
    border-radius: var(--radius-full);
    background: var(--stroke-3);
  }
  .auth-meter[data-level="1"] .auth-meter-seg:nth-child(-n+1) { background: var(--hue-red); }
  .auth-meter[data-level="2"] .auth-meter-seg:nth-child(-n+2) { background: var(--hue-yellow); }
  .auth-meter[data-level="3"] .auth-meter-seg:nth-child(-n+3) { background: var(--hue-green); }
  .auth-meter[data-level="4"] .auth-meter-seg:nth-child(-n+4) { background: var(--hue-green); }

  .auth-review div { gap: var(--space-3); }
  .auth-review dd { flex: 1; }
  .auth-edit {
    background: none;
    border: 0;
    padding: 0;
    color: var(--text-link);
    font: var(--type-ui);
    letter-spacing: var(--tracking-base);
    text-decoration: underline;
    text-decoration-color: var(--link-underline);
    text-underline-offset: var(--link-offset);
    text-decoration-thickness: var(--link-thickness);
    cursor: pointer;
  }
  .auth-edit:hover { text-decoration-color: var(--link-underline-hover); }
}