/* ─────────────────────────────────────────────────────────────────────
   Abeir Toril — player site skin.

   The Keep is gold, Cinzel and candlelight. This corner is not. It loads
   shared/theme.css for structure and then overrides the palette wholesale.

   The tokens below are deliberately IDENTICAL to the abeir-chrome Foundry
   module (modules/abeir-chrome/styles/abeir-chrome.css). A player reading
   these rules and then opening their character sheet should not feel a
   seam. If you change one, change both.
   ──────────────────────────────────────────────────────────────────── */

:root {
  --void:   #0b0f14;
  --deep:   #070a0e;
  --panel:  #121a23;
  --line:   #24303d;

  --hi:     #fcee0a;   /* the accent. 2077 yellow */
  --cyan:   #00f0ff;
  --mag:    #ff003c;
  --amber:  #ff9e00;
  --dim:    #64798a;
  --text:   #d7e4ea;

  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --disp: "Chakra Petch", "Rajdhani", system-ui, sans-serif;

  --wide: 1140px;
  --measure: 780px;
}

/* Hard override of the Keep's fantasy tokens so shared components come
   through in this palette instead of gold-on-parchment. */
:root {
  --gold: var(--hi);
  --gold-bright: var(--hi);
  --gold-line: var(--line);
  --bg: var(--void);
  --bg-deep: var(--deep);
  --muted: var(--dim);
  --f-display: var(--disp);
  --f-ui: var(--disp);
  --f-body: var(--mono);
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--void);
  background-image:
    /* scanlines */
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px),
    radial-gradient(120% 70% at 50% -10%, rgba(252,238,10,.07), transparent 62%),
    radial-gradient(90% 60% at 105% 100%, rgba(255,0,60,.06), transparent 60%),
    linear-gradient(rgba(11,15,20,.55), rgba(11,15,20,.55)),
    url("board.svg");
  background-size: 100% 3px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.2rem 5rem; }
.narrow { max-width: var(--measure); }

/* ── type ────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--disp); font-weight: 700; letter-spacing: .04em; }

h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  text-transform: uppercase;
  color: var(--void);
  background: var(--hi);
  display: inline-block;
  padding: .28em .6em;
  margin: 0 0 .2em;
  line-height: 1;
}

h2 {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  text-transform: uppercase;
  color: var(--hi);
  border-bottom: 1px solid var(--line);
  padding-bottom: .35rem;
  margin: 3rem 0 1rem;
}

h3 { font-size: 1.02rem; text-transform: uppercase; color: var(--amber); margin: 1.8rem 0 .5rem; }

a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--cyan); }

.kicker {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .22em;
  font-size: .72rem; color: var(--dim); margin: 0 0 2rem;
}
.lede { font-size: 1.1rem; color: var(--text); }
strong { color: var(--hi); font-weight: 700; }
em { color: var(--text); }

/* ── panels ──────────────────────────────────────────────────────── */
.panel {
  background: linear-gradient(180deg, rgba(252,238,10,.045), transparent 70%), var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--hi);
  padding: 1rem 1.15rem;
  margin: 1.4rem 0;
}
.panel.warn { border-left-color: var(--mag); }
.panel.note { border-left-color: var(--cyan); }
.panel h3 { margin-top: 0; }
.panel .label {
  display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hi); margin-bottom: .45rem;
}
.panel.warn .label { color: var(--mag); }
.panel.note .label { color: var(--cyan); }

/* ── tables ──────────────────────────────────────────────────────── */
/* The board art is busiest exactly where the long tables land, and its
   traces were reading straight through the text. A flat wash lifts the
   rows off it without boxing them in. */
table {
  width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: .92rem;
  background: rgba(7, 10, 14, .62);
}
th {
  text-align: left; font-family: var(--disp); text-transform: uppercase;
  font-size: .72rem; letter-spacing: .14em; color: var(--dim);
  border-bottom: 1px solid var(--line); padding: .5rem .6rem;
}
td { border-bottom: 1px solid rgba(36,48,61,.6); padding: .55rem .6rem; vertical-align: top; }
td.k { color: var(--hi); font-weight: 700; white-space: nowrap; }
tbody tr:hover td { background: rgba(252,238,10,.03); }
.scroll-x { overflow-x: auto; }

/* ── the big number callouts (Load / Capacity / Overload) ────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin: 1.4rem 0; }
.stat { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--hi); padding: .85rem 1rem; }
.stat .k { display: block; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.stat .v { display: block; font-family: var(--disp); font-size: 1.5rem; font-weight: 700; color: var(--hi); line-height: 1.3; }
.stat .s { display: block; font-size: .76rem; color: var(--dim); }
.stat.bad { border-left-color: var(--mag); }
.stat.bad .v { color: var(--mag); }

/* ── cards ───────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  padding: 1rem 1.1rem; color: inherit; transition: border-color .15s, transform .15s;
}
a.card:hover { border-color: var(--hi); transform: translateY(-2px); border-bottom-color: var(--hi); }
.card h3 { margin: 0 0 .3rem; color: var(--hi); }
.card p { margin: 0; color: var(--dim); font-size: .88rem; }
.card .tag { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }

/* ── step list for character creation ────────────────────────────── */
ol.steps { list-style: none; counter-reset: s; padding: 0; }
ol.steps > li { counter-increment: s; position: relative; padding-left: 3.2rem; margin-bottom: 2rem; }
ol.steps > li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: -.15rem;
  font-family: var(--disp); font-weight: 700; font-size: 1.5rem; color: var(--hi);
  opacity: .55;
}
ol.steps > li > h3 { margin-top: 0; color: var(--hi); }

/* ── misc ────────────────────────────────────────────────────────── */
.rule { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }
code { font-family: var(--mono); color: var(--cyan); background: rgba(0,240,255,.07); padding: .05em .35em; }
.eddie { color: var(--amber); }
footer.foot { color: var(--dim); font-size: .8rem; border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1rem; }

@media (max-width: 620px) {
  body { font-size: 14px; }
  ol.steps > li { padding-left: 2.4rem; }
}