/* =========================================================================
   card-db — Gaslight reskin overlay (Phase 2, surface 1: public Card Database)

   Loaded AFTER site.css (shared tokens) and php-app.css (card-db structure), so
   this file wins. It does NOT re-author card-db's layout — the full-width,
   responsive .app-grid browser and all its JS hooks are untouched. It only
   reclothes card-db's existing components in the Gaslight identity:

     1. Remap card-db's --arcana-* palette onto the shared Gaslight tokens, which
        flips the whole app off-white -> Lamp-Black in one block (the global base).
     2. Square corners, Cinzel/EB Garamond/Spline-Mono type, amber-on-near-black.
     3. Finish the public surface (header chrome, catalog browser, card detail).

   Tokens come from site.css :root (--black/--amber/--bone/--verd/--oxblood/...).
   Semantics are load-bearing: amber = the lamp/human, verdigris = the machine,
   oxblood = danger only. Square corners everywhere (--radius: 0).
   ========================================================================= */

/* ---- 1. Palette remap — the global dark base -------------------------- */
/* card-db references its theme through --arcana-* in ~57 places; pointing those
   at Gaslight tokens reskins the base everywhere without touching php-app.css. */
:root {
  color-scheme: dark;

  --arcana-bg:          var(--black);
  --arcana-panel:       var(--panel);
  --arcana-ink:         var(--bone);
  --arcana-muted:       var(--bone-2);
  --arcana-line:        var(--line);
  --arcana-line-strong: var(--line-2);
  --arcana-rust:        var(--amber);   /* warm fills / accents */
  --arcana-rust-dark:   var(--amber);   /* links / strong accents — bright on dark */
  --arcana-dark:        var(--bone);    /* was near-black body text -> bone on dark */
  --arcana-dark-strong: var(--bone);    /* heading text -> bone */
  --arcana-shadow:      0 18px 45px rgba(0, 0, 0, .5);
  --arcana-border:      var(--line);    /* admin-users-table used this undefined -> #d9d9d9 */
}

/* ---- 2. Base ---------------------------------------------------------- */
/* Neutralise site.css's 19px marketing body measure; card-db is a dense data UI.
   Keep its 15px rem base (php-app :root); restate family/size for clarity. */
html { background: var(--black); }

body {
  background: var(--black);
  background-image: radial-gradient(80% 50% at 50% 0%, rgba(228, 160, 74, .07), transparent 60%);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

/* Bare links pick up the site-wide amber affordance (component links set their own). */
a { color: var(--amber); }
a:hover { color: #fff; }

/* ---- 3. Type — Cinzel headings, mono labels --------------------------- */
.sidebar-head h2,
.table-panel__header h2,
.panel h1, .panel h2, .panel h3,
.page-title {
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .03em;
}

/* Mono is for labels only: eyebrows, meta, keys, badges, button/chip text. */
.eyebrow,
.card-meta dt,
.ability-type-badge,
.ability-section-badge,
.filter-search,
.filter-language,
.filter-language__label,
.filter-option--parent,
.table-panel__count,
.table-panel__active-meta,
.card-table thead th,
.comment-form__field > span,
.issue-form__field > span,
.issue-form__readonly dt,
.card-issue__type,
.card-issue__label,
.admin-reference-stat span,
.reply-summary,
.button,
.filter-chip {
  font-family: var(--font-mono);
}

.eyebrow { color: var(--amber); font-weight: 600; letter-spacing: .18em; }

/* ---- 4. Square corners (Gaslight is hard-edged, --radius: 0) ----------- */
.filter-panel, .panel, .table-panel, .panel--nested,
.card-image, .hero-image, .card-image-toggle,
.comment-card, .comment-compose, .card-issue,
.card-ability, .card-meta div, .issue-dialog,
.admin-repeater-item, .admin-reference-stat, .admin-command,
.markdown-body pre, .markdown-body code, .markdown-body img,
.button, .filter-chip, .filter-chip__remove,
.filter-option, .table-panel__count, .table-panel__active-link,
.ability-type-badge, .ability-section-badge,
.filter-search input, .filter-search select, .filter-language select,
.comment-form input, .comment-form textarea, .comment-form select,
.issue-form input, .issue-form select, .issue-form textarea,
.sidebar-collapsed-tools__search, .sidebar-collapsed-tools__language,
.form-error-banner, .form-success-banner,
.social-icon-link {
  border-radius: 0;
}

/* ---- 5. Header chrome — unified with the marketing header -------------- */
/* Phase 2 header/nav unification: card-db's header now shares the marketing
   chrome — the same emblem logo on the left + mono nav links + small ghost CTAs
   (the .btn family comes straight from site.css). This overrides php-app.css's
   dark gradient bar (transparent + a bottom hairline, like .site-header in
   site.css) but stays FULL-WIDTH (no .wrap) per the card-db layout constraint. */
.site-header {
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
}
.brand img { display: block; height: 40px; width: auto; }
/* Logo + context breadcrumb, grouped so the space-between header still pins the
   app nav to the right edge. */
.site-header__lead {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
/* Breadcrumb beside the logo — the one bit the marketing header lacks, telling
   the visitor which face of the Forge they're on and offering a route back up.
   The page you're on is a plain (amber) label; ancestors are muted links. */
.brand-crumb {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-left: .85rem;
  border-left: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.brand-crumb__link { color: var(--bone-2); text-decoration: none; }
.brand-crumb__link:hover,
.brand-crumb__link:focus-visible { color: var(--amber); }
.brand-crumb__current { color: var(--amber); }
.brand-crumb__sep { color: var(--bone-2); opacity: .5; }
.app-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.app-nav__link {
  display: inline-flex;
  align-items: center;
  color: var(--bone-2);
  text-decoration: none;
}
.app-nav__link:hover,
.app-nav__link:focus-visible { color: var(--amber); }
.app-nav__dot {
  width: .45rem;
  height: .45rem;
  margin-left: .45rem;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(228, 160, 74, .7);
}
.app-nav .inline-form { margin: 0; }

/* ---- 6. Panels & surfaces --------------------------------------------- */
.filter-panel, .panel, .table-panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.panel--nested {
  background: var(--black-2);
  border: 1px solid var(--line);
}
.card-image, .hero-image {
  background: linear-gradient(180deg, var(--black-2), var(--black));
  border: 1px solid var(--line-2);
}

/* ---- 7. Public Card Database landing --------------------------------- */
.card-landing {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-landing-hero,
.card-landing-section,
.card-landing-forge {
  position: relative;
  overflow: hidden;
}

.card-landing-hero {
  padding: clamp(1.25rem, 3vw, 2rem);
  background:
    radial-gradient(60% 42% at 18% 0%, rgba(228, 160, 74, .2), transparent 70%),
    linear-gradient(180deg, var(--panel), var(--black-2));
}

.card-landing-hero::before,
.card-landing-forge::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-landing-hero::before {
  background: linear-gradient(135deg, rgba(228, 160, 74, .08), transparent 34%, rgba(124, 38, 32, .08));
}

.card-landing-hero > *,
.card-landing-forge > * {
  position: relative;
}

.card-landing-hero__copy,
.card-landing-section,
.card-landing-forge {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-landing-hero .page-title,
.card-landing-section h2,
.card-landing-forge h2 {
  margin: 0;
}

.card-landing-hero .lead,
.card-landing-section__head p,
.card-landing-forge p {
  margin: 0;
  color: var(--bone-2);
}

.card-landing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem;
}

.card-landing-hero__media {
  display: grid;
  gap: .55rem;
  margin: .25rem 0 0;
}

.card-landing-hero__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.card-landing-hero__media figcaption {
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.card-landing-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.card-landing-stat,
.card-landing-feature,
.card-landing-type,
.card-landing-forge__list li {
  border-radius: 0;
  border: 1px solid var(--line);
  background: rgba(232, 221, 198, .04);
}

.card-landing-stat {
  min-height: 8.2rem;
  padding: .95rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-landing-stat strong {
  display: block;
  color: var(--amber);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.45rem);
  font-weight: 500;
  line-height: .95;
}

.card-landing-stat--cold strong {
  color: var(--verd);
  text-shadow: 0 0 24px rgba(86, 168, 143, .26);
}

.card-landing-stat span,
.card-landing-feature > span,
.card-landing-type span {
  color: var(--bone-2);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.45;
  text-transform: uppercase;
}

.card-landing-section__head {
  display: grid;
  gap: .5rem;
}

.card-landing-section__head h2,
.card-landing-forge h2,
.card-landing-feature h3 {
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .03em;
}

.card-landing-feature-grid {
  display: grid;
  gap: .75rem;
}

.card-landing-feature {
  padding: .95rem;
  border-left-color: rgba(228, 160, 74, .6);
  border-left-width: 3px;
}

.card-landing-feature:nth-child(even) {
  border-left-color: rgba(86, 168, 143, .62);
}

.card-landing-feature h3 {
  margin: .35rem 0 .35rem;
  font-size: 1.08rem;
}

.card-landing-feature p {
  margin: 0;
  color: var(--bone-2);
}

.card-landing-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .65rem;
}

.card-landing-type {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .85rem;
}

.card-landing-type strong {
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}

.card-landing-forge {
  padding: clamp(1.25rem, 2.5vw, 1.65rem);
  border-color: rgba(86, 168, 143, .36);
  background:
    radial-gradient(70% 55% at 20% 0%, rgba(86, 168, 143, .16), transparent 72%),
    linear-gradient(180deg, var(--panel), var(--black));
}

.card-landing-forge::before {
  background:
    linear-gradient(90deg, rgba(86, 168, 143, .12), transparent 40%),
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(86, 168, 143, .045) 36px 37px);
  opacity: .8;
}

.card-landing-forge__copy {
  display: grid;
  gap: .55rem;
}

.card-landing-forge__list {
  display: grid;
  gap: .65rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.card-landing-forge__list li {
  display: grid;
  gap: .25rem;
  padding: .85rem .95rem;
  background: rgba(0, 0, 0, .18);
}

.card-landing-forge__list strong {
  color: var(--verd);
  font-family: var(--font-mono);
  font-size: .73rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.card-landing-forge__list span {
  color: var(--bone-2);
}

@media (max-width: 36rem) {
  .card-landing-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 899px) {
  .app-grid--home:not(.app-grid--selected-card) .content-column {
    display: none;
  }
}

@media (min-width: 56rem) {
  .card-landing-feature-grid,
  .card-landing-forge__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- 8. Buttons ------------------------------------------------------- */
.button { color: var(--bone); font-weight: 500; }
.button--primary {
  background: var(--amber);
  border-color: var(--amber-d);
  color: var(--black);
  box-shadow: var(--glow);
}
.button--primary:hover { box-shadow: var(--glow-strong); }
.button--ghost { color: var(--bone); border-color: var(--line-2); }
.button--ghost:hover { background: rgba(228, 160, 74, .08); border-color: var(--bone); }
/* Explicit transparent fill: as a <button> (rail/detail discard) the danger
   button would otherwise show the UA button-face grey, unlike --ghost which
   already sets its own transparent background. */
.button--danger { background: transparent; color: var(--oxblood-l); border-color: rgba(124, 38, 32, .5); }
.button--danger:hover { background: rgba(124, 38, 32, .14); }

/* ---- 9. Filter sidebar ------------------------------------------------ */
.filter-option {
  background: rgba(232, 221, 198, .04);
  border-color: var(--line);
}
.filter-option--child { background: rgba(232, 221, 198, .02); }
.filter-option.is-active {
  background: rgba(228, 160, 74, .16);
  border-color: rgba(228, 160, 74, .5);
}
.filter-option input { accent-color: var(--amber); }
.filter-section--separated { border-top-color: var(--line-2); }

.filter-chip {
  background: rgba(228, 160, 74, .12);
  border-color: rgba(228, 160, 74, .4);
  color: var(--bone);
  font-weight: 500;
}
.filter-chip__remove { background: rgba(228, 160, 74, .14); color: var(--amber); }
.filter-chip__remove:hover { background: rgba(228, 160, 74, .26); }

.sidebar-reveal { background: var(--black-2); }
.social-icon-link {
  background: rgba(0, 0, 0, .25);
  border-color: var(--line-2);
  color: var(--amber);
}
.social-icon-link:hover { background: rgba(228, 160, 74, .1); border-color: var(--amber); }

/* Inputs / selects / textareas */
.filter-search input, .filter-search select, .filter-language select,
.comment-form input, .comment-form textarea, .comment-form select,
.issue-form input, .issue-form select, .issue-form textarea,
.sidebar-collapsed-tools__search, .sidebar-collapsed-tools__language {
  background: rgba(0, 0, 0, .28);
  color: var(--bone);
  border-color: var(--line-2);
}

/* ---- 10. Catalog tables ------------------------------------------------ */
.card-table th, .card-table td { border-top-color: var(--line); }
.card-table thead th { color: var(--bone-2); }
.card-table tbody tr:hover { background: rgba(228, 160, 74, .08); }
.card-table tbody tr.is-active { background: rgba(228, 160, 74, .16); }
.table-link { color: var(--bone); }
.table-link:hover { color: var(--amber); }
/* Cards with an open translation issue read in danger oxblood. */
.table-link.is-flagged,
.table-panel__active-name.is-flagged { color: var(--oxblood-l); }

.table-panel__count { background: rgba(232, 221, 198, .08); color: var(--bone-2); }
.table-panel__toggle:hover, .table-panel__toggle:focus-visible {
  background: linear-gradient(180deg, rgba(228, 160, 74, .09), transparent);
}
.table-panel.is-collapsed { border-color: rgba(228, 160, 74, .3); }
.table-panel__active-link {
  background: var(--black-2);
  border-color: var(--line-2);
  box-shadow: none;
}
.table-panel__active-name { color: var(--bone); }

/* ---- 11. Card detail -------------------------------------------------- */
.card-meta div { background: var(--black-2); border: 1px solid var(--line); }
.card-meta dt { color: var(--bone-2); }

.card-ability { background: var(--black-2); border-color: var(--line); }
.card-ability--enters_play { border-left-color: var(--amber); }       /* the lamp */
.card-ability--passive     { border-left-color: var(--verd); }         /* the machine */
.card-ability--active      { border-left-color: var(--bone-2); }
.ability-type-badge { background: rgba(232, 221, 198, .08); color: var(--bone); }
/* STARTING/FLIPPED + grouped section markers read as the cold "machine" accent. */
.ability-section-badge { background: rgba(86, 168, 143, .16); color: var(--verd); }
.card-ability-group.is-active { border-left-color: var(--amber); }

.card-lore {
  color: var(--bone);
  border-left-color: var(--amber-d);
}
.card-image-toggle {
  background: rgba(20, 16, 11, .85);
  color: var(--bone);
  border-color: var(--line-2);
}
.card-image-toggle:hover, .card-image-toggle:focus-visible {
  background: rgba(20, 16, 11, .96);
  border-color: var(--amber);
}

/* ---- 12. Comments & markdown ------------------------------------------ */
.comment-card { background: var(--black-2); border-color: var(--line); }
.comment-card__body { color: var(--bone); }
.comment-card.is-new {
  background: rgba(228, 160, 74, .1);
  border-color: rgba(228, 160, 74, .5);
  box-shadow: 0 0 0 3px rgba(228, 160, 74, .12);
}
.comment-compose { background: var(--black-2); border-color: var(--line); }
.comment-card__replies, .reply-details { border-color: rgba(228, 160, 74, .3); }
.reply-summary { color: var(--amber); }

.markdown-body pre, .admin-command {
  background: #0e0b07;
  color: var(--bone);
  border: 1px solid var(--line);
}
.markdown-body code { background: rgba(232, 221, 198, .08); color: var(--bone); }
.markdown-body blockquote { border-left-color: var(--amber-d); color: var(--bone-2); }

/* ---- 13. Banners, issues & dialogs (semantic colors) ------------------ */
.field-error { color: var(--oxblood-l); }
.form-error-banner {
  border-color: rgba(124, 38, 32, .4);
  background: rgba(124, 38, 32, .14);
  color: var(--oxblood-l);
}
.form-success-banner {
  border-color: rgba(86, 168, 143, .35);
  background: rgba(86, 168, 143, .12);
  color: var(--verd);
}
.is-invalid {
  border-color: rgba(124, 38, 32, .6) !important;
  background: rgba(124, 38, 32, .12) !important;
}

/* Accounts (surface 2): the standing caveat on /register ("no password recovery")
   reads as a quiet amber note. Auth/account panels otherwise reuse
   the themed form components above. */
.form-notice {
  margin: 0;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-d);
  background: rgba(228, 160, 74, .06);
  color: var(--bone-2);
  font-size: .95rem;
}

.card-issue { background: var(--black-2); border-color: var(--line); }
.card-issue__snapshot blockquote {
  background: rgba(0, 0, 0, .3);
  border-left-color: var(--line-2);
}
.issue-form__readonly { background: rgba(0, 0, 0, .3); }
.issue-dialog { border-color: var(--line-2); }

/* ---- 14. Admin CMS (surface 4) — functional reskin -------------------- */
/* Admin renders through layout.php with php-app.css only (no forge.css), so its
   panels/forms/inputs/comment tools already inherit the surface-1 theming. These
   are the last admin-only surfaces that still carried light fills/borders. This
   is a token reskin, not the admin redesign (deferred to a later phase). */
.admin-repeater-item {
  background: var(--black-2);
  border-color: var(--line);
}
.admin-reference-stat { background: var(--black-2); }
.admin-command {
  background: #0e0b07;
  color: var(--bone);
  border: 1px solid var(--line);
}
.admin-callout { border-color: rgba(228, 160, 74, .28); }
.admin-users-table th,
.admin-users-table td { border-bottom-color: var(--line); }
.admin-preview,
.admin-comment-card__meta { border-top-color: var(--line); }