/* hiphop.id — hand-written stylesheet (thin docroot; no Tailwind build step here).
   Violet brand (hue 270), dark, mobile-first (320px), WCAG-AA contrast, visible focus, reduced-motion. */

:root {
  --color-brand: #8b5cf6;          /* violet-500, ~4.6:1 on --color-bg for large text/links */
  --color-brand-strong: #7c3aed;
  --color-brand-light: #ddd6fe;
  --color-bg: #0b0b0f;
  --color-bg-elevated: #17171f;    /* depth via elevation, not shadow (network rubric) */
  --color-fg: #f4f2ff;
  --color-fg-muted: #b9b6c9;       /* ~5.4:1 on --color-bg */
  --color-border: #ffffff1f;
  --radius: 12px;
  --space: 1rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-fg);
}
img { max-width: 100%; height: auto; }
a { color: var(--color-brand-light); }

/* Visible keyboard focus everywhere (a11y). */
:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Skip-to-content link — visually hidden until keyboard focus (a11y skip-nav). */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  padding: .6rem 1rem; background: var(--color-brand-strong, #7c3aed); color: #fff;
  border-radius: 0 0 8px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

.brandbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}
.brandbar strong { color: var(--color-brand-light); }

/* Forms / buttons */
input, textarea, select {
  width: 100%;
  padding: .6rem .7rem;
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font: inherit;
}
input:focus, textarea:focus, select:focus { border-color: var(--color-brand); }
label { display: block; margin-bottom: .35rem; color: var(--color-fg-muted); }

button, .support-btn, .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                 /* touch target */
  padding: .6rem 1rem;
  background: var(--color-brand-strong);
  color: #fff;                      /* white on violet — AA */
  border: 0; border-radius: 10px;
  font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
button:hover, .support-btn:hover, .cta:hover { background: var(--color-brand); }
button:active, .support-btn:active, .cta:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* Support-me block */
.support { margin-top: 2rem; padding: 1rem; background: var(--color-bg-elevated); border-radius: var(--radius); }
.support-note { color: var(--color-fg-muted); font-size: .9rem; }
.support-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.support-item { display: flex; align-items: center; gap: .5rem; }
.support-crypto { flex-basis: 100%; flex-wrap: wrap; }
.support-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; background: #0000004d; padding: .3rem .45rem; border-radius: 6px; }
.support-copy { padding: .35rem .7rem; }

/* Passport / editor layout — mobile-first; content is already max-width-constrained inline. */
main { width: 100%; }

/* Passport body (hiphop.id-owned violet render) */
.passport-head { text-align: center; margin-bottom: 1.5rem; }
.passport-avatar { border-radius: 50%; object-fit: cover; border: 2px solid var(--color-brand); }
.passport-name { margin: .5rem 0 .25rem; font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.02em; } /* TODO(tracking-token) */
.passport-handle { color: var(--color-fg-muted); margin: 0; }
.passport-tier { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; font-size: .8rem; color: #fff; background: var(--color-brand-strong); border-radius: 999px; }
.passport-bio { margin: .75rem auto 0; max-width: 46ch; }
.passport-private { text-align: center; color: var(--color-fg-muted); padding: 2rem 0; }
.passport-links ul { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.passport-link {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;                 /* touch target */
  text-align: center; padding: .8rem 1rem;
  background: var(--color-bg-elevated); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: 10px; text-decoration: none;
}
.passport-link:hover { border-color: var(--color-brand); }
.passport-worldlink { text-align: center; margin-top: 1.5rem; }
.passport-worldlink a { color: var(--color-fg-muted); }
.passport-worldlink a:hover { color: var(--color-brand-light); }

/* Layout containers — mobile-first, single-column, token-driven. */
.container { width: 100%; max-width: 640px; margin-inline: auto; padding: 1.5rem; }
.container--wide { max-width: 720px; padding: 3rem 1.5rem; }
.container--narrow { max-width: 560px; padding: 3rem 1.5rem; }

/* Utilities */
.text-center { text-align: center; }
.muted { color: var(--color-fg-muted); }
.brand-accent { color: var(--color-brand); }

/* Card / field */
.card { border: 1px solid var(--color-brand, #8b5cf6); border-radius: var(--radius); padding: 1.25rem; }
.field { margin-bottom: 1rem; }   /* wraps one label+input; replaces <br><br> */
.editor section { margin-top: 2rem; }   /* restores section rhythm after inline margins removed */

/* Hero (landing) */
.hero-title { font-size: clamp(1.75rem, 6vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; } /* TODO(tracking-token) */
.hero-lead { font-size: clamp(1rem, 4vw, 1.15rem); color: var(--color-fg-muted); max-width: 52ch; margin: 0; }
.hero-list { margin-top: 2rem; color: var(--color-fg-muted); line-height: 1.8; }

/* Footer */
.sitefoot { padding: 1.25rem; border-top: 1px solid var(--color-border); color: var(--color-fg-muted); font-size: .85rem; }

/* Status messages */
.status-error { color: #fca5a5; }
.status-note { color: var(--color-brand-light, #ddd6fe); }

/* ---- Wave 3 shared classes (single-owner: added by orchestrator; agents must not edit app.css) ---- */
/* Accessible error affordance — pairs with the visible status message, not a bare red border. */
:root { --color-danger: #fca5a5; }   /* light red on dark bg — AA */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--color-danger);
}
/* Visually-hidden but screen-reader-available text. */
.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;
}
/* Support (tip-handle) editor rows — mobile-first: wraps to a single column at 320px. */
.support-editor-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .6rem; margin-bottom: .6rem;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 10px;
}
.support-editor-row .grow { flex: 1 1 8rem; min-width: 0; }   /* label input grows; never overflows */
.reorder-btn { min-width: 44px; padding: .4rem .6rem; }        /* touch target (min-height via button rule) */
/* is_public switch — native checkbox, escapes the input{width:100%} rule. */
.toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--color-fg-muted); }
.toggle input[type="checkbox"] { width: auto; min-height: auto; }
.support-qr { display: inline-block; }   /* QR slot; real SVG deferred to Phase 3 (raw address is the text alt) */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  button:active, .support-btn:active { transform: none; }
}