/**
 * Iternal Feedback Hub — hub landing + shared hub error-page styles, PLUS the
 * per-product accent theming used by both the hub cards and the product form
 * pages (Multi-Product-Feedback-Hub.md §0 L1/L7/L14).
 *
 * Loads AFTER /assets/styles.css on every SSR public page (hub landing, every
 * product form, the 404/410 hub error page) and reuses its design tokens
 * (--azure, --hairline, --s-*, --r-*, --font-*, etc. — see styles.css §1).
 * Kept as its own file (rather than editing styles.css) so this build's hub
 * work never collides with the v1 form-styles file.
 *
 * ---------------------------------------------------------------------------
 * Per-product accent theming (no inline `style=` anywhere — the public CSP,
 * form-shell.publicPageCsp(), is `style-src 'self' https://fonts.googleapis.com`
 * with NO 'unsafe-inline' and no nonce, so a `style="--fb-accent:#…"` custom
 * property would be silently dropped by the browser). Instead:
 *   - The SSR shell stamps `data-accent="<hex-without-#>"` (registry
 *     brandAccent, already load-time-validated as #rrggbb) on the element
 *     that should carry the product's accent — the whole <main> for a
 *     product form, one <a class="hub-card"> per card on the hub landing.
 *   - ONE rule per distinct accent hex sets the single source color (--azure);
 *     every derived token (hover/strong/tint/ring/border) is computed
 *     generically from it via color-mix(), so adding a product with an
 *     ALREADY-LISTED accent needs zero CSS changes, and a genuinely new hex
 *     needs exactly one line here (documented at the registry entry too).
 *   - An unrecognized accent hex simply falls back to the default --azure
 *     already set in styles.css :root — never a hard failure.
 * ---------------------------------------------------------------------------
 *
 * NOTE: styles.css independently introduced `--fb-accent` (aliased to
 * `var(--azure)` at :root) for a subset of affordances (focus-visible
 * outline, .btn-primary, the select focus ring, the list-radio checked
 * state), while most other affordances (input/textarea focus, the dropzone,
 * category-radio checked state, the upload progress bar, priority-medium
 * color) still key off `--azure` directly. Setting BOTH tokens below keeps
 * every affordance correctly accented regardless of which one a given rule
 * uses, without this file depending on styles.css's specific aliasing choice.
 * ---------------------------------------------------------------------------
 */

/* One rule per distinct registry brandAccent in use today (L8/L9/L10/L13). */
[data-accent='007ec7'] {
  --azure: #007ec7;
  --fb-accent: #007ec7;
} /* AirgapAI — Azure (the styles.css default) */
[data-accent='4f46e5'] {
  --azure: #4f46e5;
  --fb-accent: #4f46e5;
} /* Blueprint Builder — Indigo */
[data-accent='0e9f6e'] {
  --azure: #0e9f6e;
  --fb-accent: #0e9f6e;
} /* Iternal Websites — Emerald */

[data-accent] {
  --azure-hover: color-mix(in srgb, var(--azure) 82%, black);
  --azure-strong: color-mix(in srgb, var(--azure) 65%, black);
  --border-brand: color-mix(in srgb, var(--azure) 55%, transparent);
  --tint-azure: color-mix(in srgb, var(--azure) 8%, white);
  --ring: 0 0 0 3px color-mix(in srgb, var(--azure) 30%, transparent);
}

/* ---------------------------------------------------------------------- */
/* Shared: back-to-hub link + product name chip (form pages + hub cards)  */
/* ---------------------------------------------------------------------- */

.hub-back-link {
  margin: 0;
}

.hub-back-link a,
.fb-back {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.hub-back-link a:hover,
.fb-back:hover {
  color: var(--azure);
}

/* ---------------------------------------------------------------------- */
/* New form control: <select> (the Application dropdown, L9). styles.css  */
/* only styles text/email inputs + textareas — add the missing control    */
/* here rather than editing that file.                                    */
/* ---------------------------------------------------------------------- */

.fb-select {
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-field);
  background: var(--surface-alt);
  color: var(--text-strong);
  font-size: 1rem;
  font-family: inherit;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.fb-select:focus {
  outline: none;
  border-color: var(--azure);
  box-shadow: var(--ring);
  background: var(--surface);
}

/* ---------------------------------------------------------------------- */
/* Hub landing page                                                        */
/* ---------------------------------------------------------------------- */

/* Full-bleed Engineered Navy hero band. Sits OUTSIDE the .hub-page reading
   column so the navy runs edge-to-edge; its own inner wrapper re-centers the
   copy to the same measure. */
.hub-hero {
  background: linear-gradient(135deg, var(--navy-950), var(--navy-mid));
  border-bottom: 1px solid var(--hairline-on-dark);
  color: var(--text-invert);
  padding: var(--s-8) var(--s-4);
}

.hub-hero-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.hub-hero .fb-logo {
  color: #fff;
}

.hub-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
}

.hub-hero .fb-sub {
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.05rem;
  max-width: 52ch;
}

.hub-page {
  max-width: 1040px;
  padding-top: var(--s-7);
  gap: var(--s-5);
}

.hub-filter {
  display: flex;
}

.hub-filter-input {
  max-width: 360px;
}

/* Distinct Engineered Navy cards: flat hairline surface, squared, with a 3px
   product-accent left edge (the answer-box motif) carrying per-product colour
   — no top bar. Hover = brand border + light tint, no lift, no shadow. */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}

.hub-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--azure);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.hub-card:hover,
.hub-card:focus-visible {
  border-color: var(--border-brand);
  border-left-color: var(--azure);
  background: var(--tint-azure);
  text-decoration: none;
}

.hub-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  flex: 1;
}

.hub-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.hub-card-blurb {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0;
  flex: 1;
}

.hub-card-cta {
  margin-top: var(--s-2);
  color: var(--azure);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--s-6) 0;
}

.hub-empty-strong {
  color: var(--text-strong);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Hub error / closed-form page (404 unknown slug, 410 retired)            */
/* ---------------------------------------------------------------------- */

.hub-error-card {
  text-align: center;
  align-items: center;
  gap: var(--s-3);
}

.hub-error-card h1 {
  font-size: 1.4rem;
}

@media (max-width: 640px) {
  .hub-hero {
    padding: var(--s-7) var(--s-4);
  }

  .hub-grid {
    grid-template-columns: 1fr;
  }
}