/* PDND · Illuminated · PR A only: bridge for today's sheet.html inline <style>.
   Loaded last (after components.css). Delete this file in PR B, together with the inline <style>.

   1. The inline :root still defines the old red names (--ink, --amber, --gold, ...). tokens.css does not define
      most of them, so they are re-pointed here using the MIGRATION A table at the top of tokens.css.
      --rule is a colour in the inline styles but a width (1px) in tokens.css; nothing in components.css reads
      var(--rule) yet, so the old colour meaning is kept until PR B removes the inline styles. */
:root {
  --ink: var(--text);
  --amber: var(--text-accent);
  --cream: var(--surface);
  --card: var(--surface-raised);
  --band: var(--surface-raised);
  --gold: var(--text-accent);
  --rule: var(--border-strong);
  --green: var(--positive);
  --red: var(--danger);
  --muted: var(--text-muted);
  --soft: var(--surface-hover);
  --warn: var(--danger-bg);
}

/* 2. Inline rules that components.css does not reset, so the old red would still show. */
.strip b { color: var(--text); }                       /* header numbers: vellum, not red */
.pip, .pip.on { background: none; border: 0; }         /* the diamond is drawn by .pip::before (components.css section 8) */
.hit { color: var(--text-accent); font-weight: var(--fw-semibold); }  /* to-hit bonus: gold label, not damage red */
.warn h2 { color: var(--warning); }                    /* not-proficient attack: a caveat, so orange */
/* Ki / Hit dice sit side by side in .grid2: the nowrap taper heads made the right column spill off a 420px screen. */
.grid2 > * { min-width: 0; }
.grid2 > .card > h3 { white-space: normal; text-align: center; }

/* 3. Items screen (#22/#28 classes, added after the package was drawn): square, no pills, no gold fills.
      PR D replaces this markup with .item-list / .tog / .qty / .purse. */
.inv-badge, .inv-count, .inv-coin, .inv-qty, .inv-toggle { border-radius: 0; }
.inv-badge, .inv-count { background: none; border-color: var(--border-strong); color: var(--text-muted); font-weight: var(--fw-regular); font-style: italic; }
.inv-coin { background: var(--surface-sunken); border-color: var(--border-strong); }
.inv-coin-label, .inv-group-head { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: .12em; }
.inv-qty { background: var(--surface-sunken); border-color: var(--border-strong); }
.inv-toggle { background: transparent; border-color: var(--border-strong); color: var(--text-muted);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.inv-toggle.is-equipped, .inv-toggle.is-attuned { background: var(--brand-soft); border-color: var(--ornament); color: var(--text-accent); }
.inv-title { font-size: 19px; } .inv-sub { font-size: 15px; font-style: italic; }
.inv-weight { font-size: 15px; font-style: italic; }

/* 4. Sign-in and change-password pages (auth_base.html) until PR D moves them to .auth.
      components.css resets bare <button>s to no fill, which left "Enter" as plain text, so restyle the old markup.
      body > main only matches the auth pages; the sheet's <main> sits inside .app. */
body > main { background: var(--surface); border: 0; border-radius: 0; margin: 8vh auto; padding: var(--space-6) var(--gutter); }
body > main h1 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 30px; letter-spacing: .06em; text-align: center; color: var(--text); }
body > main p { color: var(--text-muted); }
body > main label { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); color: var(--text-accent); }
body > main input { border-radius: 0; border: 1px solid var(--border-strong); background: var(--surface-sunken); color: var(--text); font-family: var(--font-body); font-size: 18px; }
body > main button { min-height: var(--btn-h); border: 1px solid var(--brand); border-radius: 0; background: var(--brand); color: var(--text-on-brand);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
body > main button.quiet { background: transparent; border-color: transparent; color: var(--text-accent); }
body > main .bad { color: var(--text); border-left: 2px solid var(--danger); background: var(--danger-bg); padding: 10px var(--space-3); font-weight: var(--fw-regular); }
body > main .names { color: var(--text-faint); font-style: italic; text-align: center; }