/* Reforge — layout, app shell, and patterns not covered by Web Awesome Shoelace.
   Visual tokens: use WA theme variables (--wa-*) only.
   Flat surfaces: thin borders, no offset shadows. Content panels are shell-only (no outer fill/box).
   No wa-card / wa-button CE: 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 FLAT BUTTON TREATMENT
   7.  CHAT WIDGET
   8.  CONTENT PANEL (flat — aligns with chat message surface)
   8b. MEMBER TOOLS PAGE (/guild/tools/ layout)
   8c. TEAMS SVG HEX BOARD (Tools → Teams)
   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;

}

html,
body {
  margin: 0;
  min-height: 100%;
}


/* ============================================================
   2. TOKENS — Reforge fluid scale
   ============================================================ */
:root {
  /* Gutters: unified shell inset (doubled from the extra-tight test value). */
  --rf-gutter: calc(var(--wa-space-s) * 2);

  /* App-layout gutter matches the same shell edge rhythm. */
  --rf-gutter-app: var(--rf-gutter);

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

  /* Main content block pacing: smoothly balances top/bottom across viewport sizes. */
  --rf-main-block-pad: clamp(var(--rf-gutter), calc(var(--wa-space-s) + 2vw), calc(var(--rf-space-section) - var(--wa-space-s)));

  /* Member app stack lift: gradually eases from desktop lift toward zero on narrow widths. */
  --rf-app-stack-lift: clamp(calc(var(--wa-space-m) * -1), calc(-0.35rem - 0.8vw), 0rem);

  /* Header / footer bar — same height on every page */
  --rf-shell-bar-height: 3.75rem;
  /* Header brand, footer help, chat toggle — same box + blend (object-fit preserves aspect) */
  --rf-shell-raster-icon-size: 2rem;

  /* 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);
  /* Fallback icon size; JS (tools-hex-board.js) syncs --rf-tools-icon-size-sync
     from the rendered board, which overrides this via #tools-page-root below. */
  --rf-tools-icon-size: clamp(2.9rem, 2.2rem + 1.2vw, 3.45rem);
  --rf-tools-icon-gap-x: 0.00rem;
  --rf-tools-icon-gap-y: 0.02rem;
  /* Alias: tools-icon-tray.js reads --rf-tools-icon-gap for horizontal slot math */
  --rf-tools-icon-gap: var(--rf-tools-icon-gap-x);
  --rf-tools-rail-track: clamp(10.75rem, 21vw, 16.75rem);
  --rf-tools-shell-gap: clamp(var(--wa-space-s), 1.2vw, var(--wa-space-m));
  --rf-chat-edge-gap: max(var(--rf-gutter-app), calc(env(safe-area-inset-right, 0px) + var(--wa-space-xs)));

  /* Header / footer frosted bar — shared with CTAs (§6) and chat chrome */
  --reforge-shell-chrome-fill: color-mix(in oklab, var(--wa-color-surface-raised) 88%, transparent);

  /* Hover “lift” shared by header nav, Tools rail, hex faces — matches frosted chrome + brighter edge */
  --reforge-interactive-hover-fill: color-mix(
    in oklab,
    var(--reforge-shell-chrome-fill) 78%,
    var(--wa-color-surface-raised) 22%
  );
  --reforge-interactive-hover-edge: color-mix(
    in oklab,
    var(--wa-color-surface-border) 35%,
    var(--wa-color-neutral-90) 65%
  );
}


/* ============================================================
   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;
}

/* Keep the text caret in real editors only.
   This prevents blinking I-beam/caret on non-editable clickable shells. */
body {
  caret-color: transparent;
  cursor: default;
}

input,
textarea,
select,
[contenteditable="true"],
[contenteditable="plaintext-only"],
[role="textbox"] {
  caret-color: auto;
}

/* Keep I-beam cursor only on real text-entry controls. */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]):not([type="color"]):not([type="range"]),
textarea,
[contenteditable="true"],
[contenteditable="plaintext-only"],
[role="textbox"] {
  cursor: text;
}

/* Clickable controls should present pointer consistently. */
a[href],
button,
label[for],
summary,
[role="button"] {
  cursor: pointer;
}


/* ============================================================
   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: var(--reforge-shell-chrome-fill);
  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;
}

/* Raster marks on frosted shell bars — brand, help, chat share size + blend */
.reforge-brand-logo,
.reforge-footer-help-logo,
.reforge-chat-toggle-icon {
  display: block;
  mix-blend-mode: screen;
  filter: brightness(1.1);
  height: var(--rf-shell-raster-icon-size);
  width: auto;
  max-height: var(--rf-shell-raster-icon-size);
  max-width: var(--rf-shell-raster-icon-size);
  object-fit: contain;
  box-sizing: border-box;
}

.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;
}

/* Header nav: soft highlight only (no outline/border box) — fill matches hex hover tone */
.reforge-nav a.wa-link,
.reforge-nav button.wa-plain {
  border: none;
  border-radius: var(--wa-border-radius-s);
  padding-block: var(--wa-space-3xs);
  padding-inline: var(--wa-space-xs);
  box-sizing: border-box;
  transition:
    background-color var(--wa-transition-fast) var(--wa-transition-easing),
    color var(--wa-transition-fast) var(--wa-transition-easing);
}

.reforge-nav a.wa-link {
  color: var(--wa-color-text-link);
}

.reforge-nav button.wa-plain {
  color: var(--wa-color-text-link);
  text-decoration: none;
  -webkit-text-decoration: none;
}

.reforge-nav a.wa-link:focus,
.reforge-nav button.wa-plain:focus {
  outline: none;
}

.reforge-nav a.wa-link:focus-visible,
.reforge-nav button.wa-plain:focus-visible {
  background: var(--reforge-interactive-hover-fill);
  color: var(--wa-color-text-normal);
  outline: none;
  border-radius: var(--wa-border-radius-s);
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

@media (hover: hover) {
  .reforge-nav a.wa-link:hover,
  .reforge-nav button.wa-plain:hover {
    background: var(--reforge-interactive-hover-fill);
    color: var(--wa-color-text-normal);
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
  }
}

.reforge-nav a.wa-link.is-current {
  background: var(--reforge-interactive-hover-fill);
  color: var(--wa-color-text-normal);
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

/* Kill WA native.wa-plain :active/:hover fill flash on header controls (native.css
   uses --wa-color-fill-quiet for button.wa-plain — reads as a white/gray box on click). */
.reforge-nav a.wa-link:active,
.reforge-nav button.wa-plain:active {
  background-color: transparent !important;
  background: transparent !important;
}

.reforge-nav a.wa-link,
.reforge-nav button.wa-plain {
  -webkit-tap-highlight-color: transparent;
}

/* --- Main content column ---------------------------------- */
.site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Smooth top/bottom pacing across breakpoints without abrupt jumps. */
  padding-block-start: var(--rf-main-block-pad);
  padding-block-end: var(--rf-main-block-pad);
}

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

.site-main.site-main--auth {
  padding-block-start: var(--rf-main-block-pad);
  padding-block-end: calc(var(--rf-main-block-pad) + var(--rf-shell-bar-height));
}

/* Auth/help/apply shell: keep the footer visible on every device so the page
   behaves like a stable viewport frame, with only the middle content moving. */
.site-root:has(.site-main--auth) > .site-footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
}

.site-main.site-main--auth::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  block-size: calc(env(safe-area-inset-bottom, 0px) + var(--wa-space-xl));
}

/* Tools: bounded app viewport — page must not exceed viewport height so the
   flex chain forces the panel, grid, and SVG to shrink instead of overflowing. */
.site-root:has(.site-main--tools) {
  max-height: 100dvh;
  overflow: hidden;
}

.site-main.site-main--tools {
  min-height: 0;
  overflow: hidden;
}

.site-main.site-main--tools > .tools-page {
  flex: 1 1 auto;
  min-height: 0;
}

.site-main.site-main--tools .tools-page__stack {
  flex: 1 1 auto;
  min-height: 0;
}

.site-main.site-main--tools .tools-panel {
  flex: 1 1 auto;
  min-height: 0;
}

/* Builds → Teams: same bounded viewport idea as Tools (scroll lives in snapshot list). */
.site-root:has(.site-main--builds) {
  max-height: 100dvh;
  overflow: hidden;
}

/* Builds Teams lifts the snapshots scrollport slightly to align with Tools.
   Keep the viewport cap, but stop the route root from shaving the lifted top edge. */
.site-root:has(.site-main--builds:has(#builds-page-root[data-ui-tool="teams"])) {
  overflow-x: hidden;
  overflow-y: visible;
}

.site-main.site-main--builds {
  min-height: 0;
  overflow: hidden;
}

.site-main.site-main--builds > .builds-page {
  flex: 1 1 auto;
  min-height: 0;
}

.site-main.site-main--builds .builds-page__stack {
  flex: 1 1 auto;
  min-height: 0;
}

.site-main.site-main--builds .builds-panel {
  flex: 1 1 auto;
  min-height: 0;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
}

/* Builds Teams: scrollport / shell overlap may extend past strict overflow boxes.
   Keep Builds on its own route class and relax only the Builds main overflow when Teams is active. */
.site-main.site-main--builds:has(#builds-page-root[data-ui-tool="teams"]) {
  overflow-x: hidden;
  overflow-y: visible;
}

/* Builds Teams: one-column tools-shell; main column spans full panel width (no icon rail). */
.tools-shell.tools-shell--builds-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  min-block-size: 0;
  align-items: stretch;
  overflow: hidden;
}

.tools-shell.tools-shell--builds-teams > .tools-main {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* Builds Teams (active): relax overflow on this subtree so negative margins / overlap do not clip the
   scrollport; horizontal spill contained via overflow-x: hidden on shell + panel + main. */
#builds-page-root[data-ui-tool="teams"] .reforge-brutal-panel.tools-panel.builds-panel {
  overflow-x: hidden;
  overflow-y: visible;
}

/* Eat the brutal panel wa-gap-m between .tools-header-row and shell so #builds-snapshots-region starts
   under the header row; flex still fills to the same panel bottom (only the dead gap is reclaimed).
   Adjacent-sibling only: if .builds-page-copy sits between header and shell, keep normal gap there. */
#builds-page-root[data-ui-tool="teams"]
  .tools-header-row
  + .tools-shell.tools-shell--builds-teams {
  margin-block-start: calc(-1 * var(--wa-space-m));
}

#builds-page-root[data-ui-tool="teams"] .tools-shell.tools-shell--builds-teams {
  overflow-x: hidden;
  overflow-y: visible;
}

#builds-page-root[data-ui-tool="teams"] .tools-shell.tools-shell--builds-teams > .tools-main {
  overflow: visible;
}

/* --- 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: var(--reforge-shell-chrome-fill);
  backdrop-filter: blur(12px);
  position: relative; /* stacking context for .reforge-chat-corner */
  /* Above .site-header (100) and main content so the chat toggle + panel
     (which extend above the bar) are never covered by tools/pages. Below
     .skip-link (1000) so keyboard skip remains on top when focused. */
  z-index: 950;
  box-sizing: border-box;
}

.reforge-footer-links {
  margin-inline-start: 0;
  justify-content: flex-start;
}

.reforge-footer-help {
  line-height: 0;
  text-decoration: none;
}

@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;
}

/* Member app pages (news/tactics/tools/builds/dashboard): lift the content stack
   so the eyebrow/title start height matches auth/help/apply pages, while keeping
   the exact same horizontal inset and internal spacing rhythm. */
.reforge-container--app > .wa-stack {
  margin-block-start: var(--rf-app-stack-lift);
}

/* Match member-page title start rhythm on auth/help/apply/awaiting pages. */
.site-main--auth .reforge-container--narrow {
  margin-block-start: 0;
}

.reforge-card {
  width: 100%;
}

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


/* ============================================================
   6. GLOBAL FLAT BUTTON TREATMENT
   wa-accent / wa-outlined / wa-filled share --reforge-shell-chrome-fill with the
   header/footer bars, but intentionally omit backdrop-filter: blurred controls +
   border-radius often get a 1px light fringe in Chromium during full navigations.
   Shell bars (§4) keep blur; CTAs use the token fill only. wa-plain / wa-link unchanged.
   ============================================================ */
button.wa-accent,
button.wa-outlined,
button.wa-filled,
a.wa-button.wa-accent,
a.wa-button.wa-outlined,
a.wa-button.wa-filled,
input[type='file'].wa-accent::file-selector-button,
input[type='file'].wa-outlined::file-selector-button,
input[type='file'].wa-filled::file-selector-button {
  background: var(--reforge-shell-chrome-fill) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--wa-color-text-normal) !important;
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border) !important;
  border-radius: var(--wa-border-radius-m) !important;
  box-shadow: none !important;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity var(--wa-transition-fast) var(--wa-transition-easing),
    background-color var(--wa-transition-fast) var(--wa-transition-easing),
    border-color var(--wa-transition-fast) var(--wa-transition-easing) !important;
}

@media (hover: hover) {
  button.wa-accent:not(:disabled):hover,
  button.wa-outlined:not(:disabled):hover,
  button.wa-filled:not(:disabled):hover,
  a.wa-button.wa-accent:hover,
  a.wa-button.wa-outlined:hover,
  a.wa-button.wa-filled:hover,
  input[type='file'].wa-accent:not(:disabled)::file-selector-button:hover,
  input[type='file'].wa-outlined:not(:disabled)::file-selector-button:hover,
  input[type='file'].wa-filled:not(:disabled)::file-selector-button:hover {
    background: color-mix(in oklab, var(--wa-color-surface-raised) 93%, transparent) !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  button.wa-accent:not(:disabled):active,
  button.wa-outlined:not(:disabled):active,
  button.wa-filled:not(:disabled):active,
  a.wa-button.wa-accent:active,
  a.wa-button.wa-outlined:active,
  a.wa-button.wa-filled:active,
  input[type='file'].wa-accent:not(:disabled):active::file-selector-button,
  input[type='file'].wa-outlined:not(:disabled):active::file-selector-button,
  input[type='file'].wa-filled:not(:disabled):active::file-selector-button {
    opacity: 0.92;
  }
}

button.wa-accent:disabled,
button.wa-outlined:disabled,
button.wa-filled:disabled,
input[type='file'].wa-accent:disabled::file-selector-button,
input[type='file'].wa-outlined:disabled::file-selector-button,
input[type='file'].wa-filled:disabled::file-selector-button {
  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-chat-edge-gap);
  top: 0;
  bottom: 0;
}

.reforge-chat-corner--boot-hidden {
  visibility: hidden;
}

html:not(.rf-preload) .reforge-chat-corner--boot-hidden {
  visibility: visible;
}

/* Toggle pill — floats above footer at the same position as the panel */
.reforge-chat-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  inline-size: var(--rf-shell-raster-icon-size);
  block-size: var(--rf-shell-raster-icon-size);
  line-height: 0;
  text-decoration: none;
  padding: 0;
  margin: 0; /* reset button UA margin */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  user-select: none;
  transition: opacity var(--wa-transition-fast) var(--wa-transition-easing);
}

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

@media (prefers-reduced-motion: reduce) {
  .reforge-chat-toggle {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .reforge-chat-toggle:active {
    opacity: 0.92;
  }

  html.rf-chat-user-open .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(--rf-gutter-app));
  right: 0;
  width: min(calc(100vw - 2 * var(--rf-chat-edge-gap)), clamp(16rem, 20vw, 24rem));
  max-height: clamp(12rem, calc(100dvh - 25rem), 36rem);
  font-family: inherit; /* Rubik cascades into inputs and content */
  /* Match main column (html --wa-color-surface-default) */
  background-color: var(--wa-color-surface-default);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  box-shadow: none;
  overflow: hidden;
  flex-direction: column;
  z-index: 200;
}

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

.reforge-chat-corner.is-open .reforge-chat-toggle {
  display: none;
}


/* Panel header — same frosted bar as .site-header */
.reforge-chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wa-space-s);
  flex-shrink: 0;
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background: var(--reforge-shell-chrome-fill);
  backdrop-filter: blur(12px);
  color: var(--wa-color-text-normal);
}

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

/* Close control — frosted top-bar chrome (matches §6 CTAs) */
.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: var(--reforge-shell-chrome-fill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  box-shadow: none;
  font-family: inherit;
  transition: opacity var(--wa-transition-fast) 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 {
    opacity: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reforge-chat-close-btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.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);
  background-color: var(--wa-color-surface-default);
  /* Scrollbar: same tokens as Teams tool rail (§8 tools-tool-layer) */
  scrollbar-width: thin;
  scrollbar-color: var(--wa-color-surface-border) transparent;
}

.reforge-chat-messages::-webkit-scrollbar {
  width: 0.35rem;
}

.reforge-chat-messages::-webkit-scrollbar-thumb {
  background: var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
}

/* Input row — same frosted chrome as .site-header (top bar), not the message column */
.reforge-chat-input-row {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
  padding: var(--wa-space-s);
  flex-shrink: 0;
  border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background: var(--reforge-shell-chrome-fill);
  backdrop-filter: blur(12px);
}

@media (prefers-reduced-motion: reduce) {
  .reforge-chat-input-row {
    backdrop-filter: none;
  }
}

.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);
  /* Middle column tone — same as .reforge-chat-messages; row behind it is frosted top-bar chrome */
  background-color: var(--wa-color-surface-default);
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-normal);
  /* Calm focus: no WA focus ring / border flash (caret shows typing position) */
  outline: none;
}

.reforge-chat-input-row input::placeholder {
  color: var(--wa-color-text-quiet);
  opacity: 1;
}

.reforge-chat-input-row input:disabled {
  opacity: 1;
  color: var(--wa-color-text-normal);
  -webkit-text-fill-color: var(--wa-color-text-normal);
  background-color: var(--wa-color-surface-default);
  border-color: var(--wa-color-surface-border);
}

.reforge-chat-input-row input:disabled::placeholder {
  color: var(--wa-color-text-quiet);
  opacity: 1;
  -webkit-text-fill-color: var(--wa-color-text-quiet);
}

.reforge-chat-input-row input:focus,
.reforge-chat-input-row input:focus-visible {
  outline: none;
  border-color: var(--wa-color-surface-border);
  box-shadow: none;
}

.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 */
.reforge-chat-input-row button.wa-accent:disabled {
  box-shadow: none !important;
  opacity: 0.55;
  cursor: not-allowed;
}

/* Chat status bar — main-column surface when visible */
.reforge-chat-status {
  padding: var(--wa-space-2xs) var(--wa-space-l);
  text-align: center;
  background-color: var(--wa-color-surface-default);
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.reforge-chat-status.reforge-inline-feedback {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

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

/* 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. CONTENT PANEL SHELL (.reforge-brutal-panel)
   No outer box: auth, help, apply, dashboard, news, etc. sit on the main column.
   Chat popover (.reforge-chat-panel) is separate and still has its own chrome.
   ============================================================ */
.reforge-brutal-panel {
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--rf-space-panel);
  container-type: inline-size;
  container-name: rf-panel;
}

/* Member app panels use the same side pacing rhythm as shell bars/chat edges. */
.reforge-container--app .reforge-brutal-panel {
  padding-inline: 0;
  /* Collapse whitespace-only flex struts (Django/newlines between tags) so News, Tools,
     Builds, Dashboard, and Tactics share the same first-line vertical start. */
  line-height: 0;
}

.reforge-container--app .reforge-brutal-panel > * {
  line-height: normal;
}

.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-s) solid var(--wa-color-surface-border) !important;
  border-radius: var(--wa-border-radius-m);
  box-shadow: none;
  /* Same frosted fill as .site-header / .site-footer / §6 CTAs */
  background: var(--reforge-shell-chrome-fill) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--wa-transition-normal) var(--wa-transition-easing);
}

@media (prefers-reduced-motion: reduce) {
  .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 {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.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;
}

/* Checkboxes — same frosted chrome as bars / text fields (e.g. Remember me) */
.reforge-brutal-panel input[type='checkbox'] {
  --checked-icon-color: var(--wa-color-text-normal);
  background: var(--reforge-shell-chrome-fill) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--wa-color-surface-border) !important;
  border-width: var(--wa-border-width-s);
  color: var(--wa-color-text-normal) !important;
  accent-color: var(--wa-color-text-normal);
}

@media (prefers-reduced-motion: reduce) {
  .reforge-brutal-panel input[type='checkbox'] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.reforge-brutal-panel input[type='checkbox']:checked,
.reforge-brutal-panel input[type='checkbox']:indeterminate {
  background: var(--reforge-shell-chrome-fill) !important;
  border-color: var(--wa-color-surface-border) !important;
  color: var(--wa-color-text-normal) !important;
}

/* 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);
}


/* ============================================================
   8b. MEMBER TOOLS PAGE — /guild/tools/ two-column grid
   Top-row tool selector + lower reserved icons area / teams workspace split.
   ============================================================ */

/* Prefer board-synced icon size when JS has measured the rendered hex face */
#tools-page-root {
  --rf-tools-icon-size: min(
    var(--rf-tools-icon-size-sync, clamp(2.9rem, 2.2rem + 1.2vw, 3.45rem)),
    var(--rf-tools-icon-size-cap, 999rem)
  );
}

.reforge-container--app.tools-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-block-end: 0;
}

.tools-page__stack {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.reforge-brutal-panel.tools-panel {
  flex: 1;
  min-height: 0;
  margin-block-end: 0;
  overflow: hidden;
}

/* Match .tools-shell columns so “Tools” title + toolbar align with icons | workspace */
.tools-header-row {
  display: grid;
  grid-template-columns: minmax(0, var(--rf-tools-rail-track)) minmax(0, 1fr);
  gap: var(--rf-tools-shell-gap);
  /* Top-align so the eyebrow + title start at the same offset below the panel edge on
     Tools and Builds; end-align drifted when the toolbar column height differed. */
  align-items: start;
  min-width: 0;
}

.tools-header-title-col {
  min-width: 0;
}

/* Fill the workspace column so Teams can sit flush end (same inset as Maps + header nav). */
.tools-header-row > .tools-header-actions {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

/* Post | status (flex center) | Teams (margin-inline-start: auto → trailing edge) */
.tools-header-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wa-space-s);
  min-width: 0;
  padding-inline: 0;
  margin-inline: 0;
}

.tools-header-actions .tools-toolbar-nav {
  margin-inline-start: auto;
  flex-shrink: 0;
}

/* Post + status only after Teams is active (`data-ui-tool` from server + tools-page.js). */
#tools-page-root:not([data-ui-tool="teams"]) #tools-post-build-btn,
#tools-page-root:not([data-ui-tool="teams"]) .tools-post-build-status {
  display: none !important;
}

.tools-post-build-status {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 1.25em;
  overflow-wrap: anywhere;
}

.tools-post-build-status.reforge-inline-feedback {
  text-align: center;
  color: var(--wa-color-text-quiet);
}

.tools-post-build-status.tools-post-build-status--error {
  color: var(--wa-color-danger-text-normal);
}

/* Post: leading edge of workspace column (icon rail’s inline end). */
button.tools-post-build-btn {
  flex-shrink: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.tools-toolbar-tool-form {
  margin: 0;
}

/* Maps trigger + Tools header (Post / Teams): shared look (quiet label, semibold, no shell fill on hover). */
.tools-map-picker__trigger,
button.tools-toolbar-tool {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-3xs);
  border: none;
  border-radius: var(--wa-border-radius-s);
  padding-block: var(--wa-space-3xs);
  padding-inline: var(--wa-space-xs);
  margin: 0;
  min-height: 2.75rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-quiet);
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  background: transparent;
  cursor: pointer;
  transition: color var(--wa-transition-fast) var(--wa-transition-easing);
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

.tools-map-picker__trigger:hover,
.tools-map-picker__trigger:focus-visible,
.tools-map-picker.is-open .tools-map-picker__trigger,
button.tools-toolbar-tool:hover,
button.tools-toolbar-tool:focus-visible,
button.tools-toolbar-tool--active {
  color: var(--wa-color-text-normal);
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

.tools-map-picker__trigger:focus,
button.tools-toolbar-tool:focus {
  outline: none;
}

.tools-map-picker__trigger:active,
button.wa-plain.tools-toolbar-tool:active {
  background-color: transparent !important;
  background: transparent !important;
}

.tools-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--rf-tools-rail-track)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--rf-tools-shell-gap);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}

.tools-icons-area,
.tools-main {
  min-width: 0;
  min-height: 0;
}

.tools-icons-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  min-block-size: 0;
  border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--reforge-shell-chrome-fill);
}

.tools-icons-area > p {
  margin: 0;
}

/* Tool rail / workspace: stacked panels (default vs Teams). JS adds .tools-js-active; #tools-page-root carries data-ui-tool + data-server-tool. */
.tools-tool-layer-stack {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tools-icons-area .tools-tool-layer-stack {
  position: absolute;
  inset: 0;
  min-height: 0;
  min-block-size: 0;
}

.tools-page-intro {
  margin: 0;
}

/* No tool selected:
   - no-JS: hide the shell entirely and show intro copy only
   - JS / early preload: keep the shell measurable but visually hidden so Teams can finish layout
     before the user activates it */
html:not(.tools-preload-tools):not(.tools-js-active)
  #tools-page-root[data-server-tool="default"]
  .tools-shell {
  display: none !important;
}

html.tools-preload-tools:not(.tools-js-active)
  #tools-page-root[data-server-tool="default"]
  .tools-shell {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html.tools-js-active
  #tools-page-root[data-ui-tool="default"]
  .tools-shell {
  display: none !important;
}

/* Tools → Teams: keep the whole shell off-screen until hex + tray report ready (see tools-page.js data-teams-reveal). */
html.tools-js-active
  #tools-page-root[data-ui-tool="teams"]:not([data-teams-reveal="ready"])
  .tools-shell {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html:not(.tools-js-active) #tools-page-root[data-server-tool="teams"] .tools-page-copy,
html.tools-js-active #tools-page-root[data-ui-tool="teams"] .tools-page-copy {
  display: none !important;
}

html:not(.builds-preload-builds):not(.builds-js-active)
  #builds-page-root[data-server-tool="default"]
  .tools-shell {
  display: none !important;
}

html.builds-preload-builds:not(.builds-js-active)
  #builds-page-root[data-server-tool="default"]
  .tools-shell {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html.builds-js-active
  #builds-page-root[data-ui-tool="default"]
  .tools-shell {
  display: none !important;
}

/* Builds → Teams: same reveal contract as Tools (data-teams-reveal on #builds-page-root). */
html.builds-js-active
  #builds-page-root[data-ui-tool="teams"]:not([data-teams-reveal="ready"])
  .tools-shell {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html:not(.builds-js-active) #builds-page-root[data-server-tool="teams"] .builds-page-copy,
html.builds-js-active #builds-page-root[data-ui-tool="teams"] .builds-page-copy {
  display: none !important;
}

.tools-icons-tray-empty-msg {
  margin: var(--wa-space-s) 0 0;
  text-align: center;
}

/* Rail (Teams): scroll on the tool layer so the scrollbar sits at the aside edge,
   not inset with the fit-content tray. */
html.tools-js-active #tools-page-root[data-ui-tool="teams"]
  .tools-icons-area
  .tools-tool-layer[data-tool-panel="teams"],
html:not(.tools-js-active)
  #tools-page-root[data-server-tool="teams"]
  .tools-icons-area
  .tools-tool-layer[data-tool-panel="teams"] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-block-size: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wa-color-surface-border) transparent;
  align-items: stretch;
}

html.tools-js-active #tools-page-root[data-ui-tool="teams"]
  .tools-icons-area
  .tools-tool-layer[data-tool-panel="teams"]::-webkit-scrollbar,
html:not(.tools-js-active)
  #tools-page-root[data-server-tool="teams"]
  .tools-icons-area
  .tools-tool-layer[data-tool-panel="teams"]::-webkit-scrollbar {
  width: 0.35rem;
}

html.tools-js-active #tools-page-root[data-ui-tool="teams"]
  .tools-icons-area
  .tools-tool-layer[data-tool-panel="teams"]::-webkit-scrollbar-thumb,
html:not(.tools-js-active)
  #tools-page-root[data-server-tool="teams"]
  .tools-icons-area
  .tools-tool-layer[data-tool-panel="teams"]::-webkit-scrollbar-thumb {
  background: var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
}

html.tools-js-active #tools-page-root[data-ui-tool="teams"]
  .tools-icons-area
  #tools-icon-tray.tools-icons-tray,
html:not(.tools-js-active)
  #tools-page-root[data-server-tool="teams"]
  .tools-icons-area
  #tools-icon-tray.tools-icons-tray {
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  min-block-size: 0;
}

.tools-teams-pending-note {
  margin: 0 0 var(--wa-space-s);
  text-align: center;
  flex: 0 0 auto;
}

.tools-teams-pending-note.reforge-inline-feedback {
  color: var(--wa-color-text-quiet);
}

/* Hex / tray: hide until ready only when JS runs (no-JS users still see tray list + empty SVG shell) */
html.tools-js-active .tools-hex-board-svg[data-tools-hex-ready="false"] {
  visibility: hidden;
}

/* Tools Teams: cluster exists before tools-hex-maps applies is-map-hidden (defer script order).
   Keep the interactive board invisible until #tools-page-root reports map layout committed. */
html.tools-js-active
  #tools-page-root[data-ui-tool="teams"]:not([data-tools-map-ready="true"])
  #tools-hex-board-svg {
  visibility: hidden;
}

html.tools-js-active .tools-icons-tray[data-tray-ready="false"] {
  visibility: hidden;
}

/* Direct refresh on ?tool=teams: suppress pre-ready visuals before deferred JS runs.
   Removed by tools-page.js once it adds .tools-js-active and takes control. */
html.tools-preload-teams:not(.tools-js-active)
  #tools-page-root[data-server-tool="teams"]
  .tools-shell {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html.tools-preload-teams:not(.tools-js-active) #tools-icon-tray {
  visibility: hidden;
}

html.tools-preload-teams:not(.tools-js-active) #tools-hex-board-svg {
  visibility: hidden;
}

/* Teams combat icon tray — JS assigns data-row-mode and wraps items into rows once per pass.
   Tray shrink-wraps to the widest anchor (non-offset) row width and centers in the rail via
   fit-content + margin-inline auto; rows stay flex-start; offset rows keep padding-inline-start. */
.tools-icons-tray {
  list-style: none;
  margin: 0;
  margin-inline: auto;
  padding: var(--wa-space-3xs) var(--wa-space-xs) var(--wa-space-xs);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--rf-tools-icon-gap-y);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-block-size: calc(var(--rf-tools-icon-size) * 4);
}

.tools-icons-tray__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--rf-tools-icon-gap-x);
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  box-sizing: border-box;
}

.tools-icons-tray__row--offset {
  justify-content: flex-start;
  padding-inline-start: calc(
    (var(--rf-tools-icon-size) + var(--rf-tools-icon-gap-x)) / 2
  );
  box-sizing: border-box;
}

/* Tighter vertical rhythm: square slots + transparent art read looser than gap-y alone; tune within ~-0.12…-0.20 × size */
.tools-icons-tray__row + .tools-icons-tray__row {
  margin-block-start: calc(var(--rf-tools-icon-size) * -0.13);
}

.tools-icons-tray__item {
  inline-size: var(--rf-tools-icon-size);
  block-size: var(--rf-tools-icon-size);
  flex: 0 0 var(--rf-tools-icon-size);
  display: grid;
  place-items: center;
  min-width: 0;
  box-sizing: border-box;
  touch-action: none;
}

/* Fill the fixed slot so flex gap (incl. 0) is the real icon-to-icon rhythm; 98% looked like extra gutter */
.tools-icons-tray__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.tools-main {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tools-main > .tools-tool-layer-stack {
  position: absolute;
  inset: 0;
  min-height: 0;
  min-block-size: 0;
}

/* Builds main column uses the same stack → layer → workspace chain as Tools (see builds_workspace_teams.html). */

.tools-main .tools-tool-layer[data-tool-panel="teams"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ============================================================
   8c. TEAMS SVG HEX BOARD — Reforge tokens only; cluster from HexBoard.html
   ============================================================ */

.tools-workspace--teams {
  position: relative;
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  box-sizing: border-box;
  /* No workspace “mat” — only the SVG grid shows; panel chrome is the brutal panel */
  background: transparent;
}

.tools-hex-board-host {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: transparent;
}

/* Map-sized SVG: container-fit, not viewport-fit. The host flex-grows to fill
   the workspace; the SVG takes the host height and preserveAspectRatio scales
   the hex content uniformly. No viewport-based cap needed — the flex chain
   (site-root 100dvh → tools-main absolute stack → workspace → host) already
   constrains the available height. */
.tools-hex-board-svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  display: block;
  font-family: var(--wa-font-family-body);
  background: transparent;
}

/* Gentle taper: narrow viewports trim horizontal fit slightly */
@media (max-width: 70rem) {
  .tools-hex-board-svg {
    max-width: 98%;
    margin-inline: auto;
  }
}

@media (max-width: 56rem) {
  .tools-hex-board-svg {
    max-width: 96.5%;
  }
}

.tools-hex-board-svg .tools-hex-cell {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none;
}

.tools-hex-board-svg,
.tools-hex-board-svg * {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

.tools-hex-board-svg:focus,
.tools-hex-board-svg:focus-visible,
.tools-hex-board-svg .tools-hex-cell:focus,
.tools-hex-board-svg .tools-hex-cell:focus-visible,
.tools-hex-board-svg .tools-hex-placed-icon:focus,
.tools-hex-board-svg .tools-hex-placed-icon:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Second polygon kept for DOM parity with prototype; border is only on .tools-hex-face
   (same rule as .site-header /.site-footer /.reforge-chat-* : width-s + surface-border). */
.tools-hex-board-svg .tools-hex-outline {
  fill: none;
  stroke: none;
  pointer-events: none;
}

/* Hex fill: header/footer chrome; stroke: chat toggle / panel border (§7) */
.tools-hex-board-svg .tools-hex-face {
  fill: var(--reforge-shell-chrome-fill);
  stroke: var(--wa-color-surface-border);
  stroke-width: var(--wa-border-width-s);
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition:
    fill 0.15s ease,
    stroke 0.15s ease,
    transform 0.15s ease,
    filter 0.15s ease;
  transform-box: fill-box;
  transform-origin: center;
  shape-rendering: geometricPrecision;
  /* fill then stroke — stroke on top so hairline matches visible chat / panel borders */
  paint-order: fill stroke;
}

.tools-hex-board-svg .tools-hex-label {
  fill: var(--wa-color-text-quiet);
  font-family: var(--wa-font-family-body);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-bold);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  text-rendering: geometricPrecision;
  transition: fill 0.15s ease;
}

/* Builds: read-only boards — same tools-hex-board-svg sizing; hide until JS ready. */
html.builds-js-active .tools-hex-board-svg[data-readonly-hex][data-tools-hex-ready="false"] {
  visibility: hidden;
}

html.builds-preload-teams:not(.builds-js-active) .tools-hex-board-svg[data-readonly-hex] {
  visibility: hidden;
}

html.builds-preload-teams:not(.builds-js-active)
  #builds-page-root[data-server-tool="teams"]
  .tools-shell {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Posted list: scroll container (fragment swaps children only).
   Use block flow here, not flex + direction:rtl on the workspace — Chromium still adds ~--wa-space-m
   block-start inset when the scroll box itself is a flex column + RTL; Builds keeps block flow + rtl here. */
#builds-snapshots-region.builds-snapshots-region {
  display: block;
  /* Kill anonymous whitespace strut between this block and first child (avoids ~1em gap on full-page
     render; innerHTML map swaps often collapse it, which made Teams toolbar activation look lower). */
  line-height: 0;
  /* Grow like the tray column: basis 0 + min-height 0 fills tools-workspace--teams reliably. */
  flex: 1 1 0%;
  min-height: 0;
  min-block-size: 0;
  min-width: 0;
  align-self: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  /* Put the vertical scrollbar on the physical left (Maps picker stays bottom-right like Tools). */
  direction: rtl;
  /* Match .reforge-chat-messages + Teams tool rail (§7 / §8): thin track, border thumb. */
  scrollbar-width: thin;
  scrollbar-color: var(--wa-color-surface-border) transparent;
  /* Keep the outer box/position unchanged; only add a little internal headroom so the
     topmost visible snapshot UI clears the scrollport edge without shifting the container. */
  padding-block-start: var(--wa-space-2xs);
  padding-inline-end: var(--wa-space-2xs);
  padding-block-end: calc(var(--wa-space-xl) + 2.75rem);
  scrollbar-gutter: auto;
}

html.builds-preload-teams:not(.builds-js-active) #builds-snapshots-region,
html.builds-preload-teams:not(.builds-js-active) #builds-map-picker {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.builds-teams-empty {
  margin-block-end: 0;
}

.builds-teams-cap-note {
  margin-block-end: var(--wa-space-s);
}

#builds-snapshots-region.builds-snapshots-region > :first-child {
  margin-block-start: 0;
}

#builds-snapshots-region.builds-snapshots-region > * {
  direction: ltr;
  line-height: normal;
}

#builds-snapshots-region.builds-snapshots-region::-webkit-scrollbar {
  width: 0.35rem;
}

#builds-snapshots-region.builds-snapshots-region::-webkit-scrollbar-thumb {
  background: var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
}

.builds-snapshot-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  margin-block-start: 0;
  padding-block-end: var(--wa-space-l);
  margin-block-end: var(--wa-space-m);
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.builds-snapshot-card:last-child {
  border-bottom: none;
  margin-block-end: 0;
  padding-block-end: 0;
}

/* Snapshot card keeps list spacing/border; the direct child host is the single fixed-size board box.
   Fallback: dvh clamp. With @supports: fill the snapshots region height (100cqh), not min(dvh,cqh). */
.builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  --rf-builds-board-h: clamp(20rem, calc(100dvh - 12rem), min(56rem, 85dvh));
  height: var(--rf-builds-board-h);
  min-height: 0;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
}

.builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot > .builds-snapshot-meta {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--wa-space-s);
  text-align: left;
  min-width: 0;
  max-width: min(calc(100% - 4.5rem), 28rem);
  padding: var(--wa-space-xs) 0 0 var(--wa-space-2xs);
  pointer-events: none;
}

.builds-snapshot-meta__author {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 11rem;
  line-height: var(--wa-line-height-normal);
  overflow-wrap: anywhere;
}

.builds-snapshot-meta__secondary {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 16rem;
}

.builds-snapshot-meta__secondary time {
  overflow-wrap: anywhere;
}

.builds-snapshot-map-line {
  margin: 0;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: var(--wa-line-height-normal);
}

.builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot > .tools-hex-board-svg[data-readonly-hex] {
  flex: 1 1 auto;
  min-height: 0;
  min-block-size: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
}

.tools-hex-board-svg[data-readonly-hex] .tools-hex-cell {
  pointer-events: none;
  cursor: default;
}

.tools-hex-board-svg[data-readonly-hex] .tools-hex-cell:hover .tools-hex-face {
  fill: var(--reforge-shell-chrome-fill);
  stroke: var(--wa-color-surface-border);
  filter: none;
  transform: none;
}

@media (max-width: 56rem) {
  .builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot {
    width: 100%;
    max-width: 100%;
    --rf-builds-board-h: clamp(17rem, calc(100dvh - 10.5rem), min(42rem, 80dvh));
  }
}

@supports (height: min(1rem, 1cqh)) {
  #builds-snapshots-region.builds-snapshots-region {
    container-type: size;
    container-name: builds-snapshots;
  }

  /* Match list viewport height so the hex host fills the snapshots region (safe: cqh is the region). */
  .builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot {
    height: 100cqh;
    min-height: min(20rem, 100cqh);
  }

  @media (max-width: 56rem) {
    .builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot {
      min-height: min(17rem, 100cqh);
    }
  }
}

.tools-hex-board-svg .tools-hex-face,
.tools-hex-board-svg .tools-hex-label {
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .tools-hex-board-svg .tools-hex-face,
  .tools-hex-board-svg .tools-hex-label {
    transition:
      fill 0.15s ease,
      stroke 0.15s ease,
      transform 0.15s ease,
      filter 0.15s ease;
  }

  .tools-hex-board-svg .tools-hex-cell:hover .tools-hex-face {
    fill: var(--reforge-interactive-hover-fill);
    stroke: var(--reforge-interactive-hover-edge);
    filter: url(#tools-hex-hover-glow);
    transform: scale(1.02);
  }

  .tools-hex-board-svg .tools-hex-cell:hover .tools-hex-label {
    fill: var(--wa-color-text-normal);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .tools-hex-board-svg .tools-hex-face,
  .tools-hex-board-svg .tools-hex-label {
    transition: none;
  }

  .tools-hex-board-svg .tools-hex-cell:hover .tools-hex-face {
    transform: none;
    filter: none;
    fill: var(--reforge-interactive-hover-fill);
    stroke: var(--reforge-interactive-hover-edge);
  }
}

/* ── 8c-ii. MAP PICKER (dropup) + VARIANT ARROWS ────────────── */

.tools-map-picker {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

.tools-map-picker__controls,
.tools-map-picker__menu {
  pointer-events: auto;
}

/* Bottom row: variant bar (arrows + label) sits left of the Maps trigger */
.tools-map-picker__controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wa-space-3xs);
  min-width: 0;
}

/* .tools-map-picker__trigger base + states live with button.tools-toolbar-tool above */

/* ── Variant bar (left/right arrows + label) ───────────────── */

.tools-map-picker__variant-bar {
  display: flex;
  align-items: center;
  gap: var(--wa-space-3xs);
}

.tools-map-picker__variant-bar[hidden],
.tools-map-picker:not(.is-open) .tools-map-picker__variant-bar {
  display: none;
}

.tools-map-picker__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--wa-border-radius-s);
  background: transparent;
  color: var(--wa-color-text-quiet);
  cursor: pointer;
  transition: color var(--wa-transition-fast) var(--wa-transition-easing);
  appearance: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  box-shadow: none;
}

.tools-map-picker__arrow svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

.tools-map-picker__arrow:hover,
.tools-map-picker__arrow:focus-visible {
  color: var(--wa-color-text-normal);
}

.tools-map-picker__arrow:focus {
  outline: none;
}

.tools-map-picker__arrow:focus-visible,
.tools-map-picker__trigger:focus-visible,
.tools-map-picker__option:focus-visible {
  outline: none;
  box-shadow: none;
}

.tools-map-picker__variant-label {
  display: inline-block;
  font-family: inherit;
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
  user-select: none;
  /* min-width set by JS per group so arrows never shift */
  text-align: center;
}

/* ── Dropdown menu ─────────────────────────────────────────── */

.tools-map-picker__menu {
  min-width: 0;
  max-height: 20rem;
  overflow-y: auto;
  flex-shrink: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--wa-color-surface-border) transparent;
  border: none;
  background: transparent;
  padding: 0;
}

.tools-map-picker__menu::-webkit-scrollbar {
  width: 0.35rem;
}

.tools-map-picker__menu::-webkit-scrollbar-thumb {
  background: var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
}

.tools-map-picker__option {
  padding: var(--wa-space-3xs) var(--wa-space-xs);
  font-family: inherit;
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-normal);
  color: var(--wa-color-text-quiet);
  cursor: pointer;
  white-space: nowrap;
  text-align: right;
  transition: color var(--wa-transition-fast) var(--wa-transition-easing);
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

.tools-map-picker__option:hover,
.tools-map-picker__option:focus {
  color: var(--wa-color-text-normal);
  outline: none;
}

.tools-map-picker__option[aria-selected="true"] {
  color: var(--wa-color-text-normal);
  font-weight: var(--wa-font-weight-semibold);
}

/* Hidden hex cells: fade out smoothly, disable pointer events */
.tools-hex-cell.is-map-hidden .tools-hex-face {
  fill: transparent;
  stroke: transparent;
  filter: none;
  transform: none;
}

.tools-hex-cell.is-map-hidden .tools-hex-label {
  fill: transparent;
}

.tools-hex-cell.is-map-hidden .tools-hex-icon-layer {
  opacity: 0;
}

.tools-hex-cell.is-map-hidden {
  pointer-events: none;
}

/* ── 8d. TEAMS DRAG-AND-DROP ────────────────────────────────── */

.tools-icons-tray__item.is-dragging {
  opacity: 0.35;
}

.tools-icons-tray__item.is-empty img {
  visibility: hidden;
}


.tools-hex-cell.is-drop-target .tools-hex-face {
  fill: var(--reforge-interactive-hover-fill);
  stroke: var(--reforge-interactive-hover-edge);
  stroke-width: calc(var(--wa-border-width-s) * 2);
}

.tools-hex-cell.is-occupied {
  cursor: pointer;
}

.tools-hex-placed-icon {
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}

.tools-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: var(--rf-tools-icon-size, 3rem);
  height: var(--rf-tools-icon-size, 3rem);
  object-fit: contain;
  opacity: 0.85;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

body.rf-tools-dragging,
body.rf-tools-dragging .site-main.site-main--tools,
body.rf-tools-dragging #tools-page-root,
body.rf-tools-dragging #tools-page-root .tools-shell {
  touch-action: none;
  overscroll-behavior: none;
}

/* Portrait orientation (width < height): stack icons above map.
   Layout-only — no icon-size or spacing overrides (the 30rem query
   adds those for truly narrow screens). */
@media (orientation: portrait) {
  #tools-page-root .tools-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, min(10rem, 20svh)) minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }

  #tools-page-root .tools-icons-area {
    height: auto;
    block-size: auto;
    align-self: start;
    max-block-size: min(10rem, 20svh);
  }

  #tools-page-root .tools-icons-area .tools-tool-layer-stack {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    width: 100%;
  }

  #tools-page-root .tools-hex-board-host {
    justify-content: flex-start;
  }

  #tools-page-root .tools-hex-board-svg {
    margin-inline: 0;
  }
}

@media (orientation: portrait) and (min-width: 48.0625rem) {
  #tools-page-root .tools-shell {
    grid-template-rows: minmax(0, min(12rem, 24svh)) minmax(0, 1fr);
  }

  #tools-page-root .tools-icons-area {
    max-block-size: min(12rem, 24svh);
  }
}

/* Tablet balance: keep the board/tray scale closer to the surrounding controls so
   hexes do not dominate medium touch layouts that otherwise scale well on phone/desktop. */
@media (min-width: 48.0625rem) and (max-width: 64rem) {
  #tools-page-root[data-ui-tool="teams"] {
    --rf-tools-icon-size-cap: 3.15rem;
  }

  #tools-page-root[data-ui-tool="teams"] .tools-main .tools-workspace--teams {
    min-height: clamp(17rem, 50svh, 30rem);
  }

  #tools-page-root[data-ui-tool="teams"] .tools-main .tools-hex-board-host {
    min-height: clamp(15rem, 42svh, 26rem);
    align-items: center;
  }

  #tools-page-root[data-ui-tool="teams"] .tools-main .tools-hex-board-svg {
    width: min(100%, 38rem);
    height: auto;
    max-height: 100%;
    margin-inline: auto;
  }
}

@media (max-width: 64rem) {
  :root {
    --rf-tools-rail-track: clamp(9.25rem, 24vw, 13rem);
    --rf-tools-shell-gap: var(--wa-space-s);
  }

  .tools-map-picker__controls {
    max-width: min(100%, 20rem);
  }

  .tools-map-picker__menu {
    max-width: min(100%, 20rem);
  }
}

@media (max-height: 44rem) {
  .tools-icons-area {
    max-block-size: clamp(6.5rem, 18svh, 9rem);
  }

  .tools-workspace--teams {
    min-height: clamp(14rem, 48svh, 24rem);
  }

  .tools-hex-board-host {
    min-height: clamp(13rem, 40svh, 21rem);
  }

  .builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot {
    --rf-builds-board-h: clamp(14rem, 44svh, 22rem);
  }
}

@media (max-width: 30rem) {
  .tools-header-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: var(--wa-space-s);
  }

  .tools-header-actions {
    width: 100%;
    min-width: 0;
  }

  .tools-toolbar-nav {
    margin-inline-end: 0;
    width: auto;
    min-width: 0;
  }

  .tools-toolbar-tool-form {
    width: auto;
  }

  button.tools-toolbar-tool {
    width: auto;
    justify-content: center;
  }

  .tools-shell {
    grid-template-columns: 1fr;
    /* Stacked rail + workspace: first row auto, second fills remaining (desktop uses single 1fr row) */
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    align-items: start;
    overflow: hidden;
  }

  .tools-icons-area {
    height: auto;
    block-size: auto;
    align-self: start;
    max-block-size: min(12rem, 32vh);
    --rf-tools-icon-size: 2.65rem;
  }

  .tools-icons-area .tools-tool-layer-stack {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    width: 100%;
  }

  .tools-workspace--teams {
    min-height: 0;
    padding: var(--wa-space-xs) var(--wa-space-3xs);
  }

  .tools-hex-board-host {
    max-width: 100%;
  }

  .tools-hex-board-svg {
    max-width: 95%;
    margin-inline: auto;
  }

}

@media (max-width: 24rem) {
  .tools-hex-board-svg {
    max-width: 93%;
  }
}


/* ============================================================
   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);
}

/* Field help / hints (Django helptext, signup rules region) */
form.reforge-form-stack .helptext {
  display: block;
  margin-top: var(--wa-space-3xs);
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
  color: var(--wa-color-text-quiet);
  text-align: start;
}

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;
}

/* When password1/password2 validation fails, match .errorlist / .reforge-alert--error treatment */
#signup-password-rules.reforge-password-rules--error {
  padding: var(--wa-space-s) var(--wa-space-m);
  border-radius: var(--wa-border-radius-m);
  border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal);
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-text-normal);
  box-sizing: border-box;
}

#signup-password-rules.reforge-password-rules--error li {
  color: inherit;
}

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

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


/* ============================================================
   10. FEEDBACK & ALERTS (Django messages, validation, live regions)
   ============================================================ */

/* Shared live / inline status copy (Post save, chat bar, empty states, workspace notes).
   Pair with layout-specific selectors (.tools-post-build-status, .reforge-chat-status, …). */
.reforge-inline-feedback {
  font-family: inherit;
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
  margin: 0;
  box-sizing: border-box;
}

.reforge-inline-feedback--quiet {
  color: var(--wa-color-text-quiet);
}

.reforge-inline-feedback--align-start {
  text-align: start;
}

.reforge-inline-feedback--align-center {
  text-align: center;
}

/* Django form validation — same border/fill language as .reforge-alert--error, start-aligned */
.reforge-brutal-panel ul.errorlist,
form.reforge-form-stack ul.errorlist {
  margin: 0 0 var(--wa-space-s);
  padding: var(--wa-space-s) var(--wa-space-m);
  list-style: none;
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
  text-align: start;
  color: var(--wa-color-danger-text-normal);
  border-radius: var(--wa-border-radius-m);
  border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal);
  background: var(--wa-color-danger-fill-quiet);
  box-sizing: border-box;
  width: 100%;
}

.reforge-brutal-panel ul.errorlist li,
form.reforge-form-stack ul.errorlist li {
  margin: 0;
}

.reforge-brutal-panel ul.errorlist li + li,
form.reforge-form-stack ul.errorlist li + li {
  margin-top: var(--wa-space-3xs);
}

/* Django messages (flash) — block alerts in auth/apply/help panels */
.reforge-alert {
  margin: 0;
  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-family: inherit;
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
  text-align: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--wa-color-text-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-brutal-alert: legacy second class — chrome is flat like .reforge-alert */


/* ============================================================
   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 {
  display: inline-block;
  inline-size: fit-content;
  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.
   ============================================================ */

/* Touch-device shell lock: applies to phones in portrait and landscape.
   Keep header/footer fixed by layout and let only the middle region scroll,
   so browser address-bar mode does not take over page scrolling. */
@media (hover: none) and (pointer: coarse) {
  .site-root {
    position: fixed;
    inset: 0;
    width: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100svh;
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }

  .site-header {
    position: relative;
    top: auto;
  }

  .site-root > .site-main {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .site-root > .site-main.rf-main-no-scroll-y {
    overflow-y: hidden;
    overscroll-behavior-y: none;
    touch-action: manipulation;
  }

  .site-root > .site-footer,
  .site-root:has(.site-main--auth) > .site-footer {
    position: relative;
    left: auto;
    right: auto;
    inset-inline: auto;
    bottom: auto;
    width: auto;
    transform: none;
    backface-visibility: visible;
  }

  .site-main {
    padding-bottom: calc(var(--rf-main-block-pad) + var(--rf-shell-bar-height));
  }

  /* Tools / Builds now follow the same locked shell behavior as other pages
     on coarse pointers, so vertical scrolling stays in <main> and the page
     itself does not rubber-band drag behind the header/footer chrome. */

  /* Tools/Builds Teams on touch devices can be wider than the narrow-phone
     breakpoint, especially in landscape. Keep the workspace chain in normal
     flow there too so page height is measured to the real end of the board /
     snapshots, not to the raw viewport bottom behind the fixed footer. */
  .site-main.site-main--tools > #tools-page-root.tools-page,
  #tools-page-root[data-ui-tool="teams"] .tools-page__stack,
  #tools-page-root[data-ui-tool="teams"] .reforge-brutal-panel.tools-panel,
  #tools-page-root[data-ui-tool="teams"] .tools-shell,
  #tools-page-root[data-ui-tool="teams"] .tools-main {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
  }

  #tools-page-root[data-ui-tool="teams"] .reforge-brutal-panel.tools-panel,
  #tools-page-root[data-ui-tool="teams"] .tools-shell,
  #tools-page-root[data-ui-tool="teams"] .tools-main {
    overflow: visible;
  }

  #tools-page-root[data-ui-tool="teams"] .tools-shell {
    grid-template-rows: auto;
  }

  #tools-page-root[data-ui-tool="teams"] .tools-shell {
    align-items: stretch;
  }

  #tools-page-root[data-ui-tool="teams"] .tools-icons-area {
    align-self: stretch;
    min-block-size: clamp(8rem, 24svh, 12rem);
  }

  #tools-page-root[data-ui-tool="teams"] .tools-main > .tools-tool-layer-stack {
    position: relative;
    inset: auto;
    width: 100%;
  }

  #tools-page-root[data-ui-tool="teams"] .tools-workspace--teams {
    height: auto;
    min-height: clamp(18rem, 56svh, 34rem);
  }

  /* Tools Teams on touch devices: vertical swipes over the board should scroll
     the page just like swipes over the icon rail/header, instead of feeling
     trapped inside the hex workspace. Icon drag still starts from tray items. */
  .tools-main,
  .tools-workspace--teams,
  .tools-hex-board-host,
  .tools-hex-board-svg,
  .tools-hex-board-svg .tools-hex-cell,
  .tools-hex-placed-icon {
    touch-action: pan-y pinch-zoom;
  }

  /* Keep the Teams map picker pinned to the viewport on all touch devices,
     including wider tablets in landscape, instead of letting it fall back to
     the old absolute-in-content positioning. */
  .tools-map-picker {
    position: fixed;
    top: auto;
    right: calc(var(--rf-gutter-app) + var(--wa-space-2xs));
    bottom: calc(var(--rf-shell-bar-height) + var(--wa-space-s));
    left: auto;
    z-index: 900;
    padding-inline: 0;
    padding-block-end: 0;
  }

  .tools-map-picker__controls {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: var(--wa-space-2xs);
    max-width: min(calc(100vw - 2 * var(--rf-gutter-app)), 22rem);
  }

  .tools-map-picker__variant-bar {
    min-width: 0;
    max-width: 100%;
  }

  .tools-map-picker__variant-label {
    min-width: 0 !important;
    max-width: min(48vw, 14rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tools-map-picker__menu {
    max-width: min(calc(100vw - 2 * var(--rf-gutter-app)), 22rem);
    max-height: min(20rem, calc(100dvh - var(--rf-shell-bar-height) * 2 - var(--wa-space-l)));
  }

  .site-root:has(.site-main--tools) .tools-workspace--teams {
    padding-bottom: calc(
      var(--rf-shell-bar-height) +
      env(safe-area-inset-bottom, 0px) +
      4rem
    );
  }

  .site-root:has(.site-main--builds) #builds-snapshots-region.builds-snapshots-region {
    padding-block-end: calc(
      var(--rf-shell-bar-height) +
      env(safe-area-inset-bottom, 0px) +
      var(--wa-space-2xl)
    );
  }
}

/* Narrow-width alignment sync: keep member pages and auth/support pages starting at the same vertical rhythm. Member pages retain the app-stack lift, so auth/support pages need the same narrower-width compensation here to prevent drift. */
@media (max-width: 48rem) {
  .site-main.site-main--tools .tools-panel,
  .site-main.site-main--builds .builds-panel,
  #builds-page-root[data-ui-tool="teams"] .reforge-brutal-panel.tools-panel.builds-panel,
  #builds-page-root[data-ui-tool="teams"] .tools-shell.tools-shell--builds-teams,
  #builds-page-root[data-ui-tool="teams"] .tools-shell.tools-shell--builds-teams > .tools-main {
    overflow: visible;
  }

  .tools-header-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--wa-space-s);
  }

  .tools-header-actions {
    width: auto;
    justify-self: end;
  }

  #tools-page-root[data-ui-tool="teams"] .tools-header-row {
    grid-template-columns: 1fr;
  }

  #tools-page-root[data-ui-tool="teams"] .tools-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "status status"
      "post nav";
    align-items: center;
    gap: var(--wa-space-xs);
    width: 100%;
    justify-self: stretch;
  }

  #tools-page-root[data-ui-tool="teams"] .tools-header-actions .tools-toolbar-nav {
    grid-area: nav;
    margin-inline-start: 0;
    justify-self: end;
  }

  #tools-page-root[data-ui-tool="teams"] button.tools-post-build-btn {
    grid-area: post;
    justify-self: start;
  }

  #tools-page-root[data-ui-tool="teams"] .tools-post-build-status {
    grid-area: status;
    min-height: 0;
    text-align: left;
  }

  .tools-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--wa-space-s);
    align-items: start;
    overflow: visible;
  }

  .tools-shell.tools-shell--builds-teams {
    grid-template-rows: auto;
    gap: 0;
  }

  .tools-icons-area {
    height: auto;
    block-size: auto;
    align-self: start;
    max-block-size: clamp(8rem, 24svh, 12rem);
  }

  .tools-icons-area .tools-tool-layer-stack,
  .tools-main > .tools-tool-layer-stack {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .tools-main {
    overflow: visible;
  }

  .tools-workspace--teams {
    min-height: clamp(18rem, 56svh, 34rem);
    padding: var(--wa-space-s) 0 calc(
      var(--rf-shell-bar-height) +
      env(safe-area-inset-bottom, 0px) +
      4rem
    );
  }

  .tools-hex-board-host {
    min-height: clamp(16rem, 46svh, 30rem);
    justify-content: flex-start;
    align-items: center;
  }

  .tools-hex-board-svg,
  .builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot > .tools-hex-board-svg[data-readonly-hex] {
    width: min(100%, 34rem);
    height: auto;
    max-height: 100%;
    margin-inline: auto;
  }

  .tools-map-picker {
    position: fixed;
    top: auto;
    right: calc(var(--rf-gutter-app) + var(--wa-space-2xs));
    bottom: calc(var(--rf-shell-bar-height) + var(--wa-space-s));
    left: auto;
    z-index: 900;
    padding-inline: 0;
    padding-block-end: 0;
  }

  .tools-map-picker__controls {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: var(--wa-space-2xs);
    max-width: min(calc(100vw - 2 * var(--rf-gutter-app)), 18rem);
  }

  .tools-map-picker__variant-bar {
    min-width: 0;
    max-width: 100%;
  }

  .tools-map-picker__variant-label {
    min-width: 0 !important;
    max-width: min(40vw, 10rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tools-map-picker__menu {
    max-width: min(calc(100vw - 2 * var(--rf-gutter-app)), 18rem);
    max-height: min(20rem, calc(100dvh - var(--rf-shell-bar-height) * 2 - var(--wa-space-l)));
  }

  #builds-snapshots-region.builds-snapshots-region {
    overflow: visible;
    direction: ltr;
    padding-block-start: 0;
    padding-inline-end: 0;
    padding-block-end: calc(
      var(--rf-shell-bar-height) +
      env(safe-area-inset-bottom, 0px) +
      var(--wa-space-2xl)
    );
  }

  .builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot {
    height: auto;
    min-height: clamp(15rem, 42svh, 24rem);
    aspect-ratio: 38 / 33;
  }

  .builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot > .builds-snapshot-meta {
    max-width: min(calc(100% - 2rem), 20rem);
    gap: var(--wa-space-xs);
  }

  .builds-snapshot-meta__author,
  .builds-snapshot-meta__secondary {
    max-width: 100%;
  }

  .reforge-container--app .reforge-brutal-panel,
  .site-main--auth .reforge-brutal-panel {
    padding-block-start: var(--wa-space-m);
    padding-block-end: var(--wa-space-m);
  }

  .site-main--auth .reforge-container--narrow {
    margin-block-start: var(--rf-app-stack-lift);
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 40rem) {
  #builds-page-root[data-ui-tool="teams"] .builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot {
    min-height: clamp(18rem, 48svh, 28rem);
  }

  #builds-page-root[data-ui-tool="teams"] .builds-snapshot-card > .tools-hex-board-host.builds-hex-board-host--snapshot > .builds-snapshot-meta {
    max-width: min(calc(100% - 2rem), 26rem);
    gap: var(--wa-space-s);
  }

  #builds-page-root[data-ui-tool="teams"] .builds-snapshot-meta__author {
    max-width: 14rem;
  }

  #builds-page-root[data-ui-tool="teams"] .builds-snapshot-meta__secondary {
    flex: 1 1 14rem;
    max-width: 18rem;
  }
}

@media (max-width: 30rem) {
  /* On very narrow phones, footer gets extra vertical padding.
     Compensate so Maps keeps the same visual inset from footer-top. */
  .tools-map-picker {
    bottom: calc(
      var(--rf-shell-bar-height) +
      (2 * var(--wa-space-xs)) +
      var(--wa-space-s)
    );
  }
}

/* Narrow header: keep brand + nav on one row when possible, even on phones like
   iPhone 12 Pro widths. Let the nav wrap inside its own area first; only drop it
   below the brand at truly tiny widths. */
@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: auto;
    min-width: 0;
    margin-inline-start: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    row-gap: var(--wa-space-2xs);
  }

  .reforge-nav:has(.nav-logout-form) {
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-end;
    align-content: flex-start;
    align-items: center;
    column-gap: var(--wa-space-2xs);
  }

  .reforge-nav:has(.nav-logout-form) > a.wa-link {
    order: 1;
    flex: 0 0 auto;
  }

  .reforge-nav:has(.nav-logout-form) .nav-logout-form {
    flex: 1 0 100%;
    display: flex;
    justify-content: flex-end;
    order: -1;
  }
}

/* Ultra-narrow fallback: if the viewport is truly tiny, let nav drop to its own row
   so links stay readable instead of being crushed beside the brand. */
@media (max-width: 22rem) {
  .reforge-nav {
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
  }
}

/* ============================================================
   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;
}