/*
 * YGO universe design system — "Neon/Ember" — shared components.
 *
 * This is the layer foundations.css deliberately doesn't provide: real, directly-applicable
 * CSS classes, not just custom properties. A token tells you what --accent is; a class here
 * tells you the full recipe for a button (size, padding, radius, hover, everything) so a site
 * changes ONE file to change the button on all three, instead of re-deriving the recipe from
 * tokens by hand every time — which is exactly how the three sites drifted (see the design
 * system README's audit history, 2026-08-25).
 *
 * Requires foundations.css to be loaded first (these classes reference its custom properties).
 *
 * Usage: apply these classes directly in your own markup, in whatever templating syntax your
 * stack uses (EJS/Jinja2/JSX all work identically here — these are plain CSS classes, no
 * framework-specific mechanism involved). Never re-declare the values these classes set —
 * override only site-specific *content* differences (e.g. an --accent already varies by site
 * automatically since these classes reference var(--accent), not a literal color).
 */

/* ===== Hero gabarit — eyebrow / title / intro ===== */

.ds-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--text-eyebrow-weight);
  font-size: var(--text-eyebrow-size);
  line-height: 1; /* pinned 2026-09 — without this it inherits each site's own ambient
                     body line-height (calc: normal ≈14px, proxy: 1.6 ≈17.6px, judge's
                     Tailwind preflight: 1.5 ≈16.5px), which was silently shifting the H1
                     below it by a few px per site even though .ds-h1/.ds-hero-intro were
                     byte-identical — measured with Playwright, not visible from source */
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
}

.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--text-h1-weight);
  font-size: var(--text-h1);
  line-height: var(--text-h1-line);
  letter-spacing: var(--text-h1-tracking);
  color: var(--text);
  margin: 14px 0 0;
  text-align: left;
}

.ds-hero-intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-hero-intro-size);
  line-height: var(--text-hero-intro-line);
  max-width: var(--text-hero-intro-max);
  color: var(--text-secondary);
  margin: var(--rhythm-title) 0 0;
  text-align: left;
}

.ds-hero-intro strong {
  color: var(--text);
  font-weight: 700;
}

/* ===== Buttons ===== */

.ds-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  line-height: 1; /* same fix as .ds-eyebrow (v1.7.4-eyebrow) — without this the button's
    height depends on each site's ambient line-height (calc: normal, proxy: 1.6, judge:
    1.5 via Tailwind preflight), so the same padding renders ~4-5px taller on proxy than
    calc and cascades into .ds-promo-hero/.ds-promo-shot height via align-self:stretch. */
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  border: 0;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.ds-btn:hover {
  filter: brightness(var(--btn-hover-brightness));
}

.ds-btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}

.ds-btn-secondary {
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--text);
}

.ds-btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.ds-btn-ghost:hover {
  background: var(--card);
  filter: none;
}

/* ===== Nav ===== */

.ds-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body); /* not --font-display — see foundations.css comment */
  font-weight: var(--navpill-font-weight);
  font-size: var(--navpill-font-size);
  line-height: var(--navpill-line);
  padding: var(--navpill-padding);
  border-radius: var(--navpill-radius);
  border: 1px solid transparent;
  color: var(--muted-2);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ds-nav-pill:hover {
  color: var(--text);
}
.ds-nav-pill.is-active {
  background: var(--card);
  color: var(--text);
}

/* ===== Header — edge-anchored, never capped to --content-max (see README §Chrome) ===== */

.ds-header {
  padding: var(--header-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Desktop only (pointer:fine) — phone/tactile-large already set their own explicit
   height locally per site (e.g. 56px/72px) and must stay free to do so; a min-height
   here isn't overridden by a smaller `height` elsewhere (min-height always wins), so
   scoping this to desktop avoids forcing every site's compact mobile header to 84px.
   Without this, the header row's height is driven purely by its tallest child — and
   that child differs by site: 2 of the 3 sites embed a .ds-badge inside one
   .ds-nav-pill (their "YGOJudge" link, ~38.8px tall vs ~33.6px for a plain pill),
   while judge's own nav never needs to badge itself, so its row would otherwise settle
   ~5px shorter. Same padding, different content height = the logo lands at a different
   absolute Y on judge than on calc/proxy — found 2026-09-01 by overlaying the 3 header
   screenshots. Fixed at the value calc/proxy already reach naturally, so this changes
   nothing for them and only brings judge (and any future badge-less nav) up to match. */
@media (min-width: 640px) and (pointer: fine) {
  .ds-header { min-height: 84px; }
}

.ds-header-band {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* ===== Badges ===== */

.ds-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--badge-color, var(--warn)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--warn)) 30%, transparent);
  color: var(--badge-color, var(--warn));
}

/* ===== Feature cards (grille "pourquoi cet outil") ===== */

.ds-feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
}

.ds-feature-card-icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
  margin-bottom: 14px;
}

.ds-feature-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin: 0 0 6px;
}

.ds-feature-card-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* ===== Galaxy of services — cross-promo cards linking to the other two sites' presentation
   pages (never a direct external link — see README §Galaxy). ===== */

.ds-galaxy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.ds-galaxy-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.ds-galaxy-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.ds-galaxy-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  margin: 12px 0 6px;
  transition: color 0.15s ease;
}
.ds-galaxy-card:hover .ds-galaxy-card-title {
  color: var(--galaxy-accent, var(--accent));
}

.ds-galaxy-card-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* ===== Galaxy/cross-promo PAGE (gabarit A variant) — a full page on one site presenting a
   sibling service (calc's /proxy /judge, proxy's /calculator /judge, judge's /calc /proxy).
   Eyebrow/h1/intro/CTA reuse .ds-eyebrow/.ds-h1/.ds-hero-intro/.ds-btn-primary directly — this
   block only adds the page-specific shape: a 2-col hero, a "why this tool" proof band, and a
   numbered "how it works" list. Distinct from .ds-feature-card (24px/--card/15px title, the
   homepage's OWN "why this tool" grid) — this is a deliberately denser recipe (20px/--surface/
   12px title) for a page that's already explaining someone else's product. Don't merge them. */

.ds-promo-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 36px;
  align-items: start;
}
.ds-promo-shot {
  align-self: stretch;
  min-height: 240px;
  border-radius: var(--radius-card-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
}
.ds-promo-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 759px) {
  .ds-promo-hero { grid-template-columns: 1fr; }
  .ds-promo-shot { min-height: 200px; }
}

.ds-promo-section { margin-top: var(--rhythm-section); }
.ds-promo-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 var(--rhythm-tight);
}

.ds-proof-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rhythm-tight);
}
@media (min-width: 640px) {
  .ds-proof-band { grid-template-columns: repeat(3, 1fr); }
}
.ds-proof-card {
  padding: 20px;
  border-radius: var(--radius-key); /* was a bare "12px" everywhere pre-promotion — same value,
                                        now tokenized so it can't silently diverge later */
  background: var(--surface);
  border: 1px solid var(--border);
}
.ds-proof-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--text);
}
.ds-proof-card-body {
  margin-top: 9px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}
/* Icon inside a proof card reuses .ds-feature-card-icon as-is — no new class needed. */

.ds-steps-list {
  list-style: decimal; /* explicit, not relying on browser UA defaults for <ol> — a
    Tailwind-based consumer's preflight reset strips those, silently hiding the numbers */
  padding-left: 1.25rem;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.ds-steps-list li { margin-bottom: 0.6rem; }

.ds-promo-cta { margin-top: var(--rhythm-section); text-align: center; }
/* The button inside .ds-promo-cta is .ds-btn.ds-btn-primary directly — no bespoke class. */

/* ===== Hero halo — ambient radial glow, body-level. Applies to EVERY Hero-gabarit page,
   which includes each site's galaxy/cross-promo pages, not only the single homepage (see
   README §Page gabarits — "home/landing pages only" was stale prose, not the real rule; calc
   and proxy already shipped it on all 3 of their Hero pages before this promotion). Exact
   values verified against proxy in prod at 1440/1920/3330px + phone — this is the ONE
   canonical formula; ygo-calc-online had independently drifted to different ellipse
   size/offset/opacity before converging here. ===== */
body.ds-has-hero {
  background:
    radial-gradient(1000px 460px at calc(max((100vw - var(--content-max)) / 2, 0px) + 173px) 90px,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--bg);
}
@media (max-width: 639px) {
  body.ds-has-hero {
    background:
      radial-gradient(560px 340px at 78px 70px,
        color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
      var(--bg);
  }
}

/* ===== Simple content page (gabarit B) — crédits/privacy/cookies/pricing/changelog: any pure
   marketing/legal page, no interactive tool. Promoted from ygo-calc-online's .gabarit-simple
   and ygoproxy's .page-simple, which had already independently converged on an identical
   recipe — proof this one was worth promoting rather than a one-off. ===== */

/* 960px, not the original 680px — widened 2026-09-01. 680px was inherited from proxy's
   2026-08-23 "3 gabarits" pass (a prose-column width) and calc/judge converged onto it
   independently; Bobby had repeatedly pushed back on it since without it actually being
   reconsidered, and asked for a middle ground between that and the site's full
   --content-max (1440px) rather than a pure-readability-optimized narrow column. */
.ds-simple-page { max-width: 960px; }

.ds-simple-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--text-eyebrow-weight);
  font-size: var(--text-eyebrow-size);
  line-height: 1; /* same ambient-inheritance fix as .ds-eyebrow, see its comment */
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent); /* matches .ds-eyebrow — simple content pages (credits, privacy,
                            cookies, changelog) use the same accent-colored eyebrow as hero
                            pages, per the 2026-09 header-consistency feedback pass */
  margin-bottom: 10px;
}

.ds-simple-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.125rem); /* deliberately smaller than .ds-h1's
                                                 clamp(1.75rem, 4vw, 3rem) — a different scale,
                                                 not a drifted copy of it */
}

.ds-simple-page p { line-height: 1.7; }

/* Filet accent (repères visuels) — promoted from credits.html/credits.ejs's local
   .credits-section, which independently reinvented this exact recipe on calc/proxy
   (round 2 of the Neon/Ember rollout, 2026-09-01/03). Legal pages (privacy/cookies/
   changelog) used a plain border-top hairline divider until 2026-09-06, when Bobby
   asked to harmonize them onto the same treatment as credits rather than keep two
   different section styles within the same gabarit. */
.ds-simple-section {
  margin-top: 2rem;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
}

/* ===== Footer — no class existed before this; only README prose, independently and
   inconsistently re-approximated by all 3 sites (hardcoded font-family strings, coincidental
   Tailwind-scale numbers instead of shared values). <footer> stays a direct child of <body>,
   outside .wrapper/.ygo-page's padded gabarit — it spans full width. Each site's own link set
   (which pages it points to) is legitimate content and stays site-specific; only the recipe
   below is shared. ===== */

.ds-footer {
  margin-top: 64px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.ds-footer-links {
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
}
.ds-footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
}
.ds-footer-links a:hover { color: var(--text); }

.ds-footer-disclaimer {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ===== Language segmented toggle (FR/EN) — promoted from a byte-identical local recipe
   already present on all 3 sites (found via check-drift.js's cross-repo-duplicate check,
   2026-09-01). Uses .is-active, the same active-state class already shared by .ds-nav-pill,
   rather than a bespoke modifier name. ===== */

.ds-lang-seg {
  display: inline-flex;
  background: var(--card);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  margin-left: 6px;
}
.ds-lang-seg a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.ds-lang-seg a:hover { color: var(--text); }
.ds-lang-seg a.is-active { background: var(--raised); color: var(--text); }

/* ===== Family card — the image-bearing variant of .ds-galaxy-card, used on each site's own
   homepage "family of tools" cross-promo (screenshots of the other 2 services). Same
   promotion story as .ds-lang-seg: calc and proxy already had this byte-identical, judge's
   own version inlined the image inset inside the card's 24px padding instead of full-bleed —
   converges to the calc/proxy shape, the one 2 of 3 sites already agreed on. Compose with
   .ds-galaxy-card/.ds-galaxy-card-title/.ds-galaxy-card-body: the card itself gets BOTH
   .ds-galaxy-card and .ds-family-card, the image is a direct child, and the text sits in a
   .ds-family-card-body wrapper (not directly in the card) so its own 24px padding can be
   independent of the now-zeroed card padding. ===== */

.ds-family-card { padding: 0; overflow: hidden; }
.ds-family-card img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top;
  background: var(--bg);
}
.ds-family-card-body { padding: 24px; }
.ds-family-card-body .ds-galaxy-card-title { margin-top: 0; }