/* Reforge — layout, app shell, and patterns not covered by Web Awesome Shoelace.
   Visual tokens: use WA theme variables (--wa-*) only.
   Neubrutalist panels inspired by Uiverse "Form" (andrew-demchenk0 / afraid-cougar-9), MIT — colors from Shoelace.
   No wa-card / wa-button: native elements + WA native.css avoid upgrade flash and JS autoload cost.

   SECTION MAP
   ──────────────────────────────────────────────────────────
   1.  TOKENS — Shoelace theme tweaks
   2.  TOKENS — Reforge fluid scale
   3.  GLOBAL RESPONSIVE FOUNDATIONS
   4.  LAYOUT PRIMITIVES  (skip link, page shell)
   5.  CONTAINERS         (width caps + container-type)
   6.  GLOBAL 3D BUTTON TREATMENT
   7.  CHAT WIDGET
   8.  NEUBRUTALIST PANEL
   9.  FORMS
   10. ALERTS
   11. LANDING HERO
   12. AUTH / PANEL PATTERNS
   13. HTMX UTILITIES
   14. COMPONENT CONTAINER QUERIES
   15. PAGE-SHELL MEDIA QUERIES
   ────────────────────────────────────────────────────────── */


/* ============================================================
   1. TOKENS — Shoelace theme tweaks
   ============================================================ */
html.wa-theme-shoelace.wa-palette-shoelace {
  --wa-font-family-body:     "Rubik", ui-sans-serif, system-ui, sans-serif;
  --wa-font-family-heading:  "Rubik", ui-sans-serif, system-ui, sans-serif;
  --wa-font-family-longform: "Rubik", ui-sans-serif, system-ui, sans-serif;

  /* Brutal offset: same family as surfaces, not stark white */
  --reforge-brutal-ink:    var(--wa-color-neutral-border-loud);
  --reforge-brutal-shadow: color-mix(
    in oklab,
    var(--wa-color-neutral-30) 55%,
    var(--wa-color-surface-default)
  );
  --reforge-brutal-shift: 4px;
}


/* ============================================================
   2. TOKENS — Reforge fluid scale
   ============================================================ */
:root {
  /* Gutters: horizontal page breathing room on each side (auth, hero, footer) */
  --rf-gutter: clamp(var(--wa-space-m), 4vw, var(--wa-space-xl));

  /* App-layout gutter: deliberately tight so the dashboard panel and the
     chat toggle sit at the same distance from the screen edge.
     Both .reforge-container--app and .reforge-chat-corner use this value. */
  --rf-gutter-app: var(--wa-space-s);

  /* Vertical section rhythm — top/bottom spacing for major page regions */
  --rf-space-section: clamp(var(--wa-space-l), 5vw, var(--wa-space-2xl));

  /* Header / footer bar — same height on every page */
  --rf-shell-bar-height: 3.75rem;

  /* Panel / card internal padding */
  --rf-space-panel: clamp(var(--wa-space-m), 3vw, var(--wa-space-xl));

  /* Content width caps */
  --rf-max-content: 60rem;
  --rf-max-narrow:  26rem;
  --rf-max-wide:    80rem;

  /* Fluid heading scale */
  --rf-heading-display: clamp(3rem, 10vw, 5.5rem);
  --rf-heading-lg:      clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
  --rf-heading-md:      clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --rf-text-hero-sub:   clamp(1rem, 2.5vw, 1.25rem);
}


/* ============================================================
   3. GLOBAL RESPONSIVE FOUNDATIONS
   ============================================================ */

/* All media scales within its container; preserve aspect ratio */
img,
video,
iframe,
svg:not([data-icon]) {
  max-inline-size: 100%;
  height: auto;
}

/* Prevent long words / URLs from blowing out narrow containers */
p,
li,
dt,
dd,
figcaption,
blockquote {
  overflow-wrap: anywhere;
}

/* Flex/grid children that can shrink must opt out of implicit min-width: auto */
.reforge-chat-input-row > *,
.reforge-hero__actions > * {
  min-width: 0;
}


/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */

/* --- Skip link -------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--wa-space-m);
  z-index: 1000;
  padding: var(--wa-space-s) var(--wa-space-m);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-surface-raised);
  background: var(--wa-color-text-normal);
  border-radius: var(--wa-border-radius-m);
  text-decoration: none;
  transition: top var(--wa-transition-normal) var(--wa-transition-easing);
}

.skip-link:focus {
  top: var(--wa-space-m);
  outline: none;
}

.skip-link:focus-visible {
  outline: var(--wa-focus-ring);
  outline-offset: var(--wa-focus-ring-offset);
}

/* --- Page shell ------------------------------------------- */
.site-root {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background: color-mix(in oklab, var(--wa-color-surface-raised) 88%, transparent);
  backdrop-filter: blur(12px);
}

@media (prefers-reduced-motion: reduce) {
  .site-header { backdrop-filter: none; }
}

.header-shell {
  width: 100%;
  height: var(--rf-shell-bar-height); /* fixed bar — prevents layout shift on nav render */
  padding-inline: var(--rf-gutter);
}

.reforge-brand {
  flex-shrink: 0;
  line-height: 0; /* collapse anchor's inline spacing around the img */
  text-decoration: none;
}

.reforge-brand-logo {
  height: 3.25rem;
  width: auto;
  display: block;
  mix-blend-mode: screen;
  filter: brightness(1.1);
}

.reforge-nav {
  margin-inline-start: auto;
  justify-content: flex-end;
}

/* Normalise every nav item so <a> and <button> render identically */
.reforge-nav a,
.reforge-nav button {
  font-family: inherit;
  font-weight: var(--wa-font-weight-normal);
  font-size: var(--wa-font-size-s);
}

.reforge-nav .wa-link {
  text-decoration: none !important;
}

.nav-logout-form {
  display: inline;
  margin: 0;
}

/* Remove browser button padding so Log out sits flush with link items */
.reforge-nav button.wa-plain {
  padding-inline: 0;
}

/* --- Main content column ---------------------------------- */
.site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-block: var(--rf-space-section); /* was fixed var(--wa-space-l) */
}

.site-main:focus:not(:focus-visible) {
  outline: none;
}

.site-main.site-main--auth {
  padding-block: var(--rf-space-section);
}

/* --- Site footer ------------------------------------------ */
.site-footer {
  display: flex;
  align-items: center;
  height: var(--rf-shell-bar-height); /* matches .header-shell */
  padding-inline: var(--rf-gutter);
  border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background: color-mix(in oklab, var(--wa-color-surface-raised) 88%, transparent);
  backdrop-filter: blur(12px);
  position: relative; /* stacking context for .reforge-chat-corner */
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer { backdrop-filter: none; }
}


/* ============================================================
   5. CONTAINERS
   ============================================================ */

/* Standard content container — max-width cap + fluid gutters.
   container-type enables @container queries on all descendants. */
.reforge-container {
  width: 100%;
  max-inline-size: var(--rf-max-content);
  margin-inline: auto;
  padding-inline: var(--rf-gutter);
  container-type: inline-size;
  container-name: rf-content;
}

/* Narrow variant: auth pages, single-action views */
.reforge-container--narrow {
  max-inline-size: var(--rf-max-narrow);
}

/* App / dashboard variant: full-width, tight side gap intentionally matches
   the chat corner offset so panel edges and the chat toggle sit at the same
   distance from the screen edge. Do not widen this to --rf-gutter. */
.reforge-container--app {
  max-inline-size: 100%;
  padding-inline: var(--rf-gutter-app);
  container-name: rf-app;
}

.reforge-card {
  width: 100%;
}

.reforge-container--narrow .reforge-card {
  max-inline-size: var(--rf-max-narrow);
  margin-inline: auto;
}


/* ============================================================
   6. GLOBAL 3D BUTTON TREATMENT
   Structure adapted from UIverse levxyca/tidy-mayfly-7 (MIT) —
   border + flat-offset shadow + press translate. Shoelace tokens only.
   Applies sitewide — not scoped to panels.
   ============================================================ */
button.wa-accent,
button.wa-outlined,
a.wa-button.wa-accent,
a.wa-button.wa-outlined {
  border: var(--wa-border-width-l) solid var(--reforge-brutal-ink) !important;
  border-radius: var(--wa-border-radius-m) !important;
  box-shadow: var(--reforge-brutal-shift) var(--reforge-brutal-shift) 0 0 var(--reforge-brutal-shadow) !important;
  transition:
    transform var(--wa-transition-normal) var(--wa-transition-easing),
    box-shadow var(--wa-transition-normal) var(--wa-transition-easing),
    background-color var(--wa-transition-fast) var(--wa-transition-easing) !important;
}

@media (prefers-reduced-motion: no-preference) {
  button.wa-accent:not(:disabled):active,
  button.wa-outlined:not(:disabled):active,
  a.wa-button.wa-accent:active,
  a.wa-button.wa-outlined:active {
    transform: translate(3px, 3px) !important;
    box-shadow: 0 0 0 0 transparent !important;
  }
}

button.wa-accent:disabled,
button.wa-outlined:disabled {
  box-shadow: none !important;
  opacity: 0.5;
}


/* ============================================================
   7. CHAT WIDGET — JS-driven open/close (.reforge-chat-corner.is-open)
   .reforge-chat-corner anchors to footer bottom-right (position: absolute).
   Closed: toggle pill visible. Open: toggle hidden, panel floats above.
   ============================================================ */

/* Corner anchor: spans full footer height so 100% = footer height.
   Both toggle and panel use position:absolute with the same bottom value,
   placing them above the footer at the same spot. */
.reforge-chat-corner {
  position: absolute;
  right: var(--rf-gutter-app); /* matches .reforge-container--app side padding */
  top: 0;
  bottom: 0;
}

/* Toggle pill — floats above footer at the same position as the panel */
.reforge-chat-toggle {
  position: absolute;
  bottom: calc(100% + var(--wa-space-s));
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
  cursor: pointer;
  white-space: nowrap;
  padding: var(--wa-space-s) var(--wa-space-m);
  margin: 0; /* reset button UA margin */
  background-color: var(--wa-color-surface-raised);
  border: var(--wa-border-width-l) solid var(--reforge-brutal-ink);
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--reforge-brutal-shift) var(--reforge-brutal-shift) 0 0 var(--reforge-brutal-shadow);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
  font-family: inherit;
  color: var(--wa-color-text-normal);
  user-select: none;
  transition:
    transform var(--wa-transition-normal) var(--wa-transition-easing),
    box-shadow var(--wa-transition-normal) var(--wa-transition-easing);
}

.reforge-chat-toggle svg {
  flex-shrink: 0;
  display: block;
}

.reforge-chat-toggle:hover,
.reforge-chat-toggle:focus-visible {
  outline: var(--wa-border-width-l) solid var(--wa-color-brand-500);
  outline-offset: 2px;
}

/* Hide toggle when panel is open — corner keeps its space */
.reforge-chat-corner.is-open .reforge-chat-toggle {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .reforge-chat-toggle:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 0 transparent;
  }

  .reforge-chat-corner.is-open .reforge-chat-panel {
    animation: reforge-chat-open var(--wa-transition-fast) var(--wa-transition-easing);
  }

  @keyframes reforge-chat-open {
    from { opacity: 0; transform: translateY(var(--wa-space-xs)); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Panel: hidden by default; shown above the toggle when open.
   width uses min() + clamp() so it scales naturally from phone to desktop
   without any breakpoints — full-width minus margins on the narrowest phones,
   capped at 24rem on wide screens.
   max-height uses clamp() with dvh so the panel never overflows the viewport. */
.reforge-chat-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + var(--wa-space-s));
  right: 0;
  width: min(calc(100vw - 2 * var(--wa-space-s)), clamp(16rem, 20vw, 24rem));
  max-height: clamp(12rem, calc(100dvh - 25rem), 36rem);
  font-family: inherit; /* Rubik cascades into inputs and content */
  background-color: var(--wa-color-surface-raised);
  border: var(--wa-border-width-l) solid var(--reforge-brutal-ink);
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--reforge-brutal-shift) var(--reforge-brutal-shift) 0 0 var(--reforge-brutal-shadow);
  overflow: hidden;
  flex-direction: column;
  z-index: 200;
}

.reforge-chat-corner.is-open .reforge-chat-panel {
  display: flex;
}

/* Panel header with close button (X label) */
.reforge-chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wa-space-s);
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background-color: var(--wa-color-surface-raised);
  color: var(--wa-color-text-normal);
}

/* Close button — compact square (slightly smaller than input-row controls), centered icon */
.reforge-chat-close-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  color: var(--wa-color-text-normal);
  margin: 0;
  appearance: none;
  background-color: var(--wa-color-surface-raised);
  border: var(--wa-border-width-l) solid var(--reforge-brutal-ink);
  border-radius: var(--wa-border-radius-s);
  box-shadow: var(--reforge-brutal-shift) var(--reforge-brutal-shift) 0 0 var(--reforge-brutal-shadow);
  font-family: inherit;
  transition:
    transform var(--wa-transition-normal) var(--wa-transition-easing),
    box-shadow var(--wa-transition-normal) var(--wa-transition-easing);
}

.reforge-chat-close-btn svg {
  display: block;
  flex-shrink: 0;
}

.reforge-chat-close-btn:hover,
.reforge-chat-close-btn:focus-visible {
  outline: var(--wa-border-width-l) solid var(--wa-color-brand-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .reforge-chat-close-btn:active {
    transform: translate(var(--reforge-brutal-shift), var(--reforge-brutal-shift));
    box-shadow: 0 0 0 0 transparent;
  }
}

.reforge-chat-messages {
  /* flex: 1 fills whatever height the panel's clamp() leaves after header +
     input row. min-height: 0 lets flex shrink below content size correctly.
     The panel's max-height drives everything — no fixed heights here. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--wa-space-s);
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

/* Input row — both children locked to the same explicit height so
   the brutal border on the button (box-sizing: content-box) can't
   inflate its rendered height above the input.
   Horizontal padding matches the panel header so elements line up. */
.reforge-chat-input-row {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
  padding: var(--wa-space-s);
}

.reforge-chat-input-row input {
  flex: 1;
  min-width: 0;
  height: 2.25rem;
  padding-inline: var(--wa-space-s);
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--wa-font-size-s);
}

.reforge-chat-input-row button {
  height: 2.25rem;
  padding-inline: var(--wa-space-m);
  box-sizing: border-box !important;
  flex-shrink: 0;
  font-size: var(--wa-font-size-s) !important;
  line-height: 1 !important;
}

/* Disabled Send button while connecting — keep brutal shadow, dim opacity */
.reforge-chat-input-row button.wa-accent:disabled {
  box-shadow: var(--reforge-brutal-shift) var(--reforge-brutal-shift) 0 0 var(--reforge-brutal-shadow) !important;
  opacity: 0.55;
  cursor: not-allowed;
}

/* Chat status bar (connection / error notices) */
.reforge-chat-status {
  padding: var(--wa-space-2xs) var(--wa-space-l);
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-text-quiet);
  text-align: center;
}

.reforge-chat-status--error {
  color: var(--wa-color-danger-600);
}

/* Chat message bubbles
   All messages: name centered, bubble expands symmetrically from center.
   Mine vs theirs distinguished by body background only. */
.reforge-chat-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wa-space-2xs);
  margin-block-end: var(--wa-space-m);
}

.reforge-chat-msg:last-child {
  margin-block-end: 0;
}

.reforge-chat-msg-author {
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-quiet);
  line-height: 1;
  text-align: center;
}

.reforge-chat-msg-body {
  display: inline-block;
  max-width: 88%;
  font-size: var(--wa-font-size-s);
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
  text-align: center;
  color: var(--wa-color-text-normal);
}

.reforge-chat-empty {
  margin: 0;
  text-align: center;
  line-height: 1.45;
  padding-block: var(--wa-space-xl);
  padding-inline: var(--wa-space-s);
}


/* ============================================================
   8. NEUBRUTALIST PANEL
   ============================================================ */
.reforge-brutal-panel {
  background-color: var(--wa-color-surface-raised);
  border: var(--wa-border-width-l) solid var(--reforge-brutal-ink);
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--reforge-brutal-shift) var(--reforge-brutal-shift) 0 0 var(--reforge-brutal-shadow);
  padding: var(--rf-space-panel); /* was fixed var(--wa-space-l) — now fluid */
  container-type: inline-size;
  container-name: rf-panel;
}

.reforge-brutal-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="image"]):not([type="reset"]),
.reforge-brutal-panel textarea,
.reforge-brutal-panel select {
  width: 100%;
  box-sizing: border-box;
  border: var(--wa-border-width-l) solid var(--reforge-brutal-ink) !important;
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--reforge-brutal-shift) var(--reforge-brutal-shift) 0 0 var(--reforge-brutal-shadow);
  background-color: var(--wa-color-surface-default) !important;
  transition:
    border-color var(--wa-transition-normal) var(--wa-transition-easing),
    box-shadow var(--wa-transition-normal) var(--wa-transition-easing);
}

.reforge-brutal-panel input:focus-visible,
.reforge-brutal-panel textarea:focus-visible,
.reforge-brutal-panel select:focus-visible {
  outline: none;
  border-color: var(--wa-color-brand-60) !important;
  box-shadow: calc(var(--reforge-brutal-shift) / 2) calc(var(--reforge-brutal-shift) / 2) 0 0 var(--reforge-brutal-shadow);
}

/* Suppress placeholder text — labels already identify every field */
.reforge-brutal-panel input::placeholder,
.reforge-brutal-panel textarea::placeholder {
  color: transparent;
}

/* Long-form text (help / apply): no drag resize — fixed min/max height only */
.reforge-brutal-panel textarea {
  resize: none;
  min-height: 10rem;
  max-height: min(70vh, 32rem);
}


/* ============================================================
   9. FORMS (Django / allauth + WA native field styles)
   ============================================================ */
form.reforge-form-stack > p {
  margin: 0;
}

form.reforge-form-stack label {
  display: block;
  margin-bottom: var(--wa-space-2xs);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
}

/* Error messages from Django form validation */
form.reforge-form-stack .errorlist {
  margin: 0 0 var(--wa-space-xs);
  padding: 0;
  list-style: none;
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-danger-text-normal);
}

button.reforge-submit,
a.reforge-submit {
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* Password rules (validators HTML)
   Left-aligned, no indent — same left/right edges as the input above. */
#signup-password-rules {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
  width: 100%;
}

#signup-password-rules ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-3xs);
  width: 100%;
}

#signup-password-rules li {
  margin-inline-start: 0; /* override WA native li { margin-inline-start: 1.125em } */
  text-align: start;
}

.reforge-panel-copy {
  margin: 0;
}

.reforge-panel-actions {
  display: flex;
  justify-content: flex-start;
}


/* ============================================================
   10. ALERTS (Django messages)
   ============================================================ */
.reforge-alert {
  padding: var(--wa-space-m);
  border-radius: var(--wa-border-radius-m);
  border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal);
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
}

.reforge-alert--success {
  border-color: var(--wa-color-success-border-normal);
  background: var(--wa-color-success-fill-quiet);
}

.reforge-alert--error {
  border-color: var(--wa-color-danger-border-normal);
  background: var(--wa-color-danger-fill-quiet);
}

.reforge-alert--info,
.reforge-alert--debug,
.reforge-alert--warning {
  border-color: var(--wa-color-neutral-border-normal);
  background: var(--wa-color-neutral-fill-quiet);
}

.reforge-alert.reforge-brutal-alert {
  border-width: var(--wa-border-width-l);
  border-color: var(--reforge-brutal-ink);
  border-style: solid;
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--reforge-brutal-shift) var(--reforge-brutal-shift) 0 0 var(--reforge-brutal-shadow);
}

.reforge-alert.reforge-brutal-alert.reforge-alert--success {
  border-color: var(--wa-color-success-border-loud);
}

.reforge-alert.reforge-brutal-alert.reforge-alert--error {
  border-color: var(--wa-color-danger-border-loud);
}

.reforge-alert.reforge-brutal-alert.reforge-alert--info,
.reforge-alert.reforge-brutal-alert.reforge-alert--debug,
.reforge-alert.reforge-brutal-alert.reforge-alert--warning {
  border-color: var(--reforge-brutal-ink);
}


/* ============================================================
   11. LANDING HERO
   ============================================================ */
.reforge-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: var(--rf-gutter); /* was inline clamp() — now uses shared token */
  text-align: center;
}

.reforge-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-inline-size: var(--rf-max-wide); /* prevents ultra-wide sprawl */
  text-align: center;
}

.reforge-hero__eyebrow {
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wa-color-text-quiet);
  margin: 0;
}

.reforge-hero__title {
  font-size: var(--rf-heading-display); /* was inline clamp() — now fluid token */
  font-weight: var(--wa-font-weight-bold);
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0;
}

.reforge-hero__sub {
  font-size: var(--rf-text-hero-sub); /* was inline clamp() — now fluid token */
  color: var(--wa-color-text-quiet);
  max-width: 40ch;
  line-height: var(--wa-line-height-normal);
  margin: 0;
}

.reforge-hero__actions {
  display: flex !important; /* override wa-cluster's display if needed */
  flex-wrap: wrap;
  justify-content: center !important;
  width: 100%;
}


/* ============================================================
   12. AUTH / PANEL PATTERNS
   ============================================================ */

/* Eyebrow label (auth + app pages) — left-aligned, matches dashboard */
.reforge-auth-eyebrow,
.reforge-panel-eyebrow {
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wa-color-text-quiet);
  margin: 0;
}


/* ============================================================
   13. HTMX UTILITIES
   ============================================================ */
button.htmx-request,
a.wa-button.htmx-request {
  opacity: 0.75;
  pointer-events: none;
}


/* ============================================================
   14. COMPONENT CONTAINER QUERIES
   @container rules adapt components based on their own available
   width, not the viewport. The container ancestors are:
     rf-content → .reforge-container (content width cap)
     rf-panel   → .reforge-brutal-panel (panel's own content box)
   ============================================================ */

/* When the outer content container is narrower than ~24rem
   (approximately phones < ~420px viewport after gutters):
   - Compress panel padding so content has breathing room
   - Reduce eyebrow text so it doesn't wrap awkwardly */
@container rf-content (inline-size < 24rem) {
  .reforge-brutal-panel {
    padding: var(--wa-space-m);
  }

  .reforge-auth-eyebrow,
  .reforge-panel-eyebrow {
    font-size: var(--wa-font-size-xs);
    letter-spacing: 0.08em;
  }
}

/* When an individual panel's content box is very narrow
   (e.g. a panel used in a multi-column grid at narrow column width):
   compress form label text to keep labels and inputs from fighting for space */
@container rf-panel (inline-size < 18rem) {
  form.reforge-form-stack label {
    font-size: var(--wa-font-size-xs);
  }

  .reforge-panel-copy {
    font-size: var(--wa-font-size-s);
  }
}


/* ============================================================
   15. PAGE-SHELL MEDIA QUERIES
   Only for structural page-shell changes that container queries
   cannot handle (because they require viewport context).
   Breakpoints in rem, not device-targeted px.
   ============================================================ */

/* Nav wrap: at very narrow viewports (≤ 30rem / ~480px), allow the
   header row to wrap so brand sits above nav rather than overflowing.
   min-height instead of height so the bar grows when nav wraps. */
@media (max-width: 30rem) {
  .header-shell {
    height: auto;
    min-height: var(--rf-shell-bar-height);
    flex-wrap: wrap;
    align-content: center;
    gap: var(--wa-space-2xs);
    padding-block: var(--wa-space-xs);
  }

  .site-footer {
    height: auto;
    min-height: var(--rf-shell-bar-height);
    padding-block: var(--wa-space-xs);
  }

  .reforge-nav {
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
  }
}

/* Chat corner: on 320px phones the toggle + panel can clip the left edge.
   Pull it flush with the container so nothing overflows. */
@media (max-width: 24rem) {
  .reforge-chat-corner {
    right: var(--wa-space-2xs);
  }
}


/* ============================================================
   FLASH PREVENTION
   The rf-preload class is added to <html> by an inline <script>
   in <head> before any CSS is parsed, then removed after two
   animation frames once the first paint is complete.
   This stops CSS transitions (box-shadow, transform, etc.) from
   running during initial render and causing the "shadow flash".
   Must be last in the file so nothing overrides it.
   ============================================================ */
.rf-preload *,
.rf-preload *::before,
.rf-preload *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}