/* ============================================================================
   Team Arc Creators - v2 brand theme
   Maps the Arc palette onto the shared --gsc-* creator-kit contract (so the
   dashboard, login and application form are branded with zero per-component
   CSS) and defines the shared landing utility classes (.arcv2-*) used by the
   landing page + arc-v2 chrome components.

   Palette:  red #ED1D26 · deep maroon #420003 · signal yellow #FFEA00 · black
   Shape:    sharp corners (0 radius) - the angular GGST look.
   ========================================================================== */

/* ── Creator-kit token bridge (unlayered → beats @layer variables) ───────── */
html.arc:root {
  /* Surfaces - near-black grounds with a hair of warmth toward the maroon */
  --gsc-surface: #08070a;
  --gsc-panel: #17070a;
  --gsc-panel-raised: #240a0e;
  --gsc-border: rgba(237, 29, 38, 0.28);
  --gsc-border-strong: rgba(237, 29, 38, 0.6);

  /* Text */
  --gsc-text: #ffffff;
  --gsc-text-muted: rgba(255, 255, 255, 0.68);
  --gsc-text-subtle: rgba(255, 255, 255, 0.45);

  /* Accent - Arc red, with the signal-yellow reserved for hovers/links */
  --gsc-accent: #ed1d26;
  --gsc-accent-hover: #ae1c1c;
  --gsc-accent-text: #ffffff;

  /* Status (kept, tuned to sit on dark) */
  --gsc-success: #1c8d12;
  --gsc-danger: #fc522c;
  --gsc-warn: #ffce21;

  /* Header / nav chrome - deep maroon bar */
  --gsc-header-bg: #420003;
  --gsc-header-border: rgba(237, 29, 38, 0.35);
  --gsc-nav-link: rgba(255, 255, 255, 0.75);
  --gsc-nav-link-active: #ffea00;

  /* Typography */
  --gsc-font-display: 'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif;
  --gsc-font-body: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gsc-font-brand: var(--gsc-font-display);

  /* Shape / depth - sharp corners, brand-red glow */
  --gsc-radius: 0px;
  --gsc-radius-sm: 0px;
  --gsc-radius-lg: 0px;
  --gsc-focus-ring: #ed1d26;
  --gsc-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  --gsc-transition: 0.2s ease-in-out;

  /* Form fields - light plates (Arc's forms use white fields on dark) */
  --gsc-field-bg: #ffffff;
  --gsc-field-border: rgba(0, 0, 0, 0.2);
  --gsc-field-text: #111111;
  --gsc-field-placeholder: rgba(0, 0, 0, 0.45);
  --gsc-field-focus: #ed1d26;
  --gsc-field-panel-bg: #ffffff;
  --gsc-field-option-hover: #f2d9da;
  --gsc-field-option-active: #ed1d26;
  --gsc-field-tag-bg: #ed1d26;
  --gsc-field-tag-text: #ffffff;

  /* Overlays */
  --gsc-overlay-backdrop: rgb(0 0 0 / 0.78);
  --gsc-modal-bg: #420003;
  --gsc-modal-border: #ed1d26;

  /* Brand decoration hooks read by shared components */
  --gsc-gradient-primary: linear-gradient(120deg, #ed1d26 0%, #7a0208 100%);
  --gsc-header-rail: linear-gradient(90deg, transparent, #ed1d26, transparent);
  --gsc-footer-rail: linear-gradient(90deg, transparent, #ed1d26, transparent);

  /* Login background - branded key-visual with a maroon wash + top red glow */
  --gsc-login-bg:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(237, 29, 38, 0.22), rgba(237, 29, 38, 0) 55%),
    linear-gradient(180deg, rgba(8, 7, 10, 0.32) 0%, rgba(8, 7, 10, 0.68) 100%),
    url('/images/arcsystemworks/opti/ggs-01-dark-10.webp');

  /* Legacy _shared.css tokens - keep any non-kit `button:not(.nui)` and
     rounded surfaces on-brand (sharp corners + Arc red). */
  --corner-rounding-s: 0;
  --corner-rounding-m: 0;
  --corner-rounding-l: 0;
  --corner-rounding-xl: 0;
  --color--accent: 237 29 38;
  --color-palette-branding-normal: 237 29 38;
  --input-buttons-primary-bg-default: #ed1d26;
  --input-buttons-primary-bg-hover: #ae1c1c;
  --input-buttons-primary-text-default: #ffffff;
  --input-buttons-primary-text-hover: #ffffff;

  /* Local brand tokens (used by .arcv2-* below + scoped component styles) */
  --arc-red: #ed1d26;
  --arc-red-deep: #7a0208;
  --arc-maroon: #420003;
  --arc-yellow: #ffea00;
  --arc-ink: #08070a;
}

/* Smooth anchor scrolling for the in-page nav */
html.arc { scroll-behavior: smooth; }

/* ── Shared landing utilities ────────────────────────────────────────────
   Consumed by the landing page sections and the arc-v2 Header/Footer so the
   button + display-heading treatment stays identical everywhere. */

.arcv2-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Display heading - heavy, uppercase, slight forward shear for the fighting
   game energy, with a hard red drop to echo the GGST logo block-shadow. */
.arcv2-display {
  font-family: var(--gsc-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: #fff;
}

.arcv2-eyebrow {
  font-family: var(--gsc-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 1.25rem;
  color: var(--arc-red);
}

/* Primary CTA - angular red slab with a yellow shift on hover. The wrapper
   provides a clipped notched corner (top-left / bottom-right) for the
   arcade-panel silhouette. */
.arcv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2.2rem;
  border: 0;
  cursor: pointer;
  font-family: var(--gsc-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem;
  color: #fff;
  background: var(--arc-red);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background var(--gsc-transition), color var(--gsc-transition), transform var(--gsc-transition);
}
.arcv2-btn:hover {
  background: var(--arc-yellow);
  color: #111;
  transform: translateY(-1px);
}
.arcv2-btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--arc-red);
}
.arcv2-btn--ghost:hover {
  background: var(--arc-red);
  color: #fff;
}
.arcv2-btn--sm { padding: 0.5rem 1.2rem; font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
  html.arc { scroll-behavior: auto; }
  .arcv2-btn { transition: none; }
}

/* ── Dashboard header overrides ──────────────────────────────────────────
   These live here (a render-blocking <link>) rather than in the dashboard
   layout's <style scoped>, because scoped-CSS chunks can land AFTER first
   paint - which made the header bar briefly fall back to the kit's default
   `max-width: 1680px`, insetting the logo/login from the page edges. */
html.arc.dashboard .creator-header__bar {
  max-width: none;
  padding: 1rem 2.75rem;
}
html.arc.dashboard .creator-header__logo { height: 52px; }
html.arc.dashboard .creator-header__link {
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 0.95rem;
}

@media (max-width: 820px) {
  html.arc.dashboard .creator-header__bar { padding: 0.8rem 1.25rem; }
  html.arc.dashboard .creator-header__logo { height: 42px; }
}

/* ── Dashboard home: Arc display treatment ──────────────────────────────
   Brings the kit's plain headings + flat panels in line with the landing
   page (angular notched corners, red accents, sheared display type). */
/* Every dashboard page title shares one treatment, so Home / My Keys /
   Requests / Quests / Account all read identically. */
html.arc.dashboard .creator-home__hero-title,
html.arc.dashboard .creator-keys__page-title,
html.arc.dashboard .creator-requests__page-title,
html.arc.dashboard .creator-quests__title,
html.arc.dashboard .creator-account__title,
html.arc.dashboard .creator-home__next-title,
html.arc.dashboard .creator-home__how-title,
html.arc.dashboard .creator-home__section-title {
  font-family: var(--gsc-font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 2px 2px 0 var(--arc-red);
}
/* Page-level titles: one shared size (smaller than before). */
html.arc.dashboard .creator-home__hero-title,
html.arc.dashboard .creator-keys__page-title,
html.arc.dashboard .creator-requests__page-title,
html.arc.dashboard .creator-quests__title,
html.arc.dashboard .creator-account__title {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
}
/* Section-level titles sit a step below the page title. */
html.arc.dashboard .creator-home__next-title,
html.arc.dashboard .creator-home__how-title {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
}
/* Eyebrows ("Creator Hub") - identical red caps on every page. */
html.arc.dashboard .creator-home__hero-eyebrow,
html.arc.dashboard .creator-keys__eyebrow,
html.arc.dashboard .creator-requests__eyebrow,
html.arc.dashboard .creator-quests__eyebrow,
html.arc.dashboard .creator-account__eyebrow {
  font-family: var(--gsc-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--arc-red);
}
/* Page subtitles / descriptions - one muted treatment. */
html.arc.dashboard .creator-home__hero-subtitle,
html.arc.dashboard .creator-keys__desc,
html.arc.dashboard .creator-requests__desc,
html.arc.dashboard .creator-account__desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
}
html.arc.dashboard .creator-home__hero-tenure {
  font-family: var(--gsc-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
}

/* Panels: angular notch + red edge, matching the perks box / modal.
   The element itself IS the border (a red gradient clipped to the notch) and
   ::after paints the inset fill. A plain `border` can't be used here: clip-path
   slices it off along the diagonals. A drop-shadow outline doesn't work either -
   clip-path is applied AFTER filters, so the shadow gets clipped away too.
   ::after (not ::before) because negative z-index paints it above the element's
   own background but below the panel content. */
html.arc.dashboard .gsc-application .gsc-card,
html.arc.dashboard .creator-home__next,
html.arc.dashboard .creator-home__how,
html.arc.dashboard .creator-home__article {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  /* Edge colour: a VERTICAL gradient, dim at the top and brightening toward the
     bottom. (The top rail is drawn separately by ::before - baking it in here
     would force an uneven inset on the fill, see the note on ::after.) */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--arc-red) 22%, transparent) 0%,
    color-mix(in srgb, var(--arc-red) 45%, transparent) 40%,
    var(--arc-red) 100%
  );
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

/* The kit card ships 16px all round, which reads cramped against the notched
   corners - give the application fields more horizontal room. */
html.arc.dashboard .gsc-application .gsc-card {
  padding: 1.25rem 1.75rem;
}

/* Top rail: horizontal gradient fading out at both ends (same treatment as the
   header/footer rails). Drawn as an overlay so it doesn't affect fill geometry;
   the parent's clip-path trims it at the top-left notch. */
html.arc.dashboard .gsc-application .gsc-card::before,
html.arc.dashboard .creator-home__next::before,
html.arc.dashboard .creator-home__how::before,
html.arc.dashboard .creator-home__article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--arc-red) 50%, transparent 100%);
  pointer-events: none;
}
html.arc.dashboard .gsc-application .gsc-card::after,
html.arc.dashboard .creator-home__next::after,
html.arc.dashboard .creator-home__how::after,
html.arc.dashboard .creator-home__article::after {
  content: "";
  position: absolute;
  /* Inset MUST be uniform. With an uneven inset the inner notch diagonal shifts
     relative to the outer one by (left+bottom) vs (left+top), so one corner ends
     up with a 0px-wide border - that's what removed the bottom-right edge.
     Border width along a 45deg diagonal = (n + 2*inset - N) / sqrt(2),
     so 17 + 4 - 18 = 3  ->  ~2.1px, matching the 2px straight edges. */
  inset: 2px;
  z-index: -1;
  background: color-mix(in srgb, var(--arc-maroon) 46%, black);
  clip-path: polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px);
  pointer-events: none;
}
/* Field labels: small red caps, like the landing eyebrows. */
html.arc.dashboard .gsc-application__heading {
  font-family: var(--gsc-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  color: var(--arc-red);
}

/* Announcement date: lift it out of the eyebrow row and pin it to the card's
   top-right. Done here (CSS-only, Arc-scoped) rather than by restructuring the
   shared kit markup, which would move the date for every other program too.
   The card already has `position: relative` from the panel rules above. */
html.arc.dashboard .creator-home__article-date {
  position: absolute;
  top: 1.5rem;              /* matches .creator-home__article-content padding */
  right: 1.5rem;
  z-index: 1;
  font-family: var(--gsc-font-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  white-space: nowrap;
}
/* Reserve room so a long title can't run under the date. */
html.arc.dashboard .creator-home__article-head {
  padding-right: 9rem;
}
/* Narrow screens: not enough width to sit alongside, so put it back inline. */
@media (max-width: 720px) {
  html.arc.dashboard .creator-home__article-date {
    position: static;
    top: auto;
    right: auto;
  }
  html.arc.dashboard .creator-home__article-head { padding-right: 0; }
}

/* ── Dashboard full-page load states ────────────────────────────────────
   Every kit module's "whole page is still loading" wrapper: fill the empty
   page body and centre the loader both axes. Deliberately does NOT target a
   bare `.loader`, so small inline spinners (content lists, email verify,
   ~20-32px) keep their size. */
html.arc.dashboard .creator-home__loading,
html.arc.dashboard .creator-keys__loading,
html.arc.dashboard .creator-requests__loading,
html.arc.dashboard .creator-account__loading,
html.arc.dashboard .creator-quests__loading,
html.arc.dashboard .creator-request-detail > .loader.block,
html.arc.dashboard .creator-key-claim__page-wrapper > .loader.block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60vh;
}

/* 3x scale-up of the branded loader on those states. The kit modules pass
   size 40-64, which ArcV2Loader applies as an inline width/height, so an
   !important override is needed to beat it. */
html.arc.dashboard .creator-home__loading .arcv2-loader,
html.arc.dashboard .creator-keys__loading .arcv2-loader,
html.arc.dashboard .creator-requests__loading .arcv2-loader,
html.arc.dashboard .creator-account__loading .arcv2-loader,
html.arc.dashboard .creator-quests__loading .arcv2-loader,
html.arc.dashboard .creator-request-detail > .loader.block .arcv2-loader,
html.arc.dashboard .creator-key-claim__page-wrapper > .loader.block .arcv2-loader {
  width: 190px !important;
  height: 190px !important;
}

/* ── Account: social link buttons ───────────────────────────────────────
   TikTok and X ship #000000 as their brand colour in lib/getNetworkUrls.ts,
   which the kit applies as the icon colour - correct on a light page, invisible
   on Arc's near-black panels. Recoloured here rather than in the shared lib so
   light-background programs keep the real brand marks. Matched on the icon class
   because the kit renders no per-network hook on the anchor. */
html.arc.dashboard .creator-account__link:has(.fa-tiktok),
html.arc.dashboard .creator-account__link:has(.fa-x-twitter) {
  color: #fff;
}