/* ==========================================================================
   THE ANGELS OF BAAL — angelsofbaal.com.

   Fable's own gothic-baal.css, verbatim from the handoff of 2026-09-19, with
   this header and nothing else added. Owner: "downloads has an angles of baal
   theme in it. check it made from fable for this site."

   It is served as /chapter.css by core/hosted.ts and loads LAST -- after
   ledger.css and gothic.css -- which is the order the sheet itself asks for.
   The url(assets/baal-sigil.png) references resolve against the site root,
   where ui/app/assets is served, exactly as gothic.css's do.
   ========================================================================== */

/* ==========================================================================
   gothic-baal.css — the Angels of Baal layer (a Blood Angels successor).
   Load AFTER ledger.css and gothic.css: ledger → gothic → gothic-baal.
   Everything is scoped to .ledger; nothing in the markup changes.

   The rule of the theme: GOLD is what is done (credited, the seal, rank).
   CRIMSON is the Red Thirst — what wants your word. BONE waits on someone
   else. DEATH COMPANY black with a white saltire is a refusal. The winged
   drop replaces the winged sword. Eight blocks; delete any you don't want.
   ========================================================================== */

/* 1 · BAAL — black ground with blood in it, a red sky, the twin moons top-right */
html{background:#0E0607}
.ledger{
  --blood:#9E1B1B;--blood-lit:#D8433F;--blood-ink:#E8625E;--blood-deep:#5A0C10;--blood-line:rgba(216,67,63,.42);
  --bone:#EDE3D6;--bone-2:#CDBFAE;--bone-line:rgba(237,227,214,.35);
  --bg:#120709;--bg-deep:#0B0405;--row-alt:#1A0B0D;--pop:#1A0B0E;--panel-on:#2A1114;
  --ink:#EDE3D6;--ink-2:#C9BBAC;--ink-3:#A89A8C;--ink-4:#857868;--ink-5:#6E6255;--ink-6:#574C42;
  --gold:#D4AD5C;--gold-lit:#E6BE55;--gold-warm:#F0D08A;--gold-dim:#8F6E2E;--gold-ash:#A08653;--gold-line:rgba(212,173,92,.4);
  --good:#D4AD5C;--good-2:#B89249;--glow-read:rgba(212,173,92,.35);
  --warn:#B9A587;--warn-2:#D9C9A8;--glow-owed:rgba(217,201,168,.22);
  --bad:#0B0506;--bad-lit:#EDE3D6;
  --esc:#7C90B8;--esc-lit:#B7C6E6;
  --lift:rgba(158,27,27,.16);--glow-live:rgba(216,67,63,.45);
  --ember-rgb:216,67,63;
  --glow:0 0 80px -16px rgba(216,67,63,.55);--glow-sm:0 0 24px -6px rgba(216,67,63,.55);
  --catch-lit:inset 0 1px 0 rgba(240,208,138,.35);
  --line:#2A1114;--line-2:#3A1A1E;--line-3:rgba(230,200,190,.13);--hair:rgba(230,200,190,.10);--hair-2:rgba(230,200,190,.16);
  --rule:rgba(230,200,190,.10);--rule-head:rgba(212,173,92,.35);
  --recess-bg:linear-gradient(180deg,rgba(0,0,0,.3),rgba(26,7,9,.4) 40%,rgba(0,0,0,.32));
  --recess-line:rgba(230,200,190,.07);--raise-line:rgba(230,200,190,.2);--edge-line:rgba(230,200,190,.06);
  --tile:linear-gradient(150deg,rgba(120,30,34,.45),rgba(26,7,9,.85));--tile-edge:rgba(230,200,190,.2);
  --sink:inset 0 1px 6px rgba(0,0,0,.55),inset 0 -1px 0 rgba(240,208,138,.05);
  background:#120709;
  background-image:
    radial-gradient(ellipse 46% 52% at 50% 0,rgba(158,27,27,.30),transparent 62%),
    radial-gradient(circle at calc(100% - 180px*var(--ui)) calc(72px*var(--ui)),rgba(240,208,138,.09) 0 calc(26px*var(--ui)),transparent calc(27px*var(--ui))),
    radial-gradient(circle at calc(100% - 112px*var(--ui)) calc(120px*var(--ui)),rgba(240,208,138,.06) 0 calc(13px*var(--ui)),transparent calc(14px*var(--ui))),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(90,12,16,.35),transparent 60%)}

/* 2 · THE WINGED DROP — the chapter's mark stands on every section rule, and ghosts behind the page */
.ledger .plate-head{background:
    radial-gradient(ellipse calc(40px*var(--ui)) calc(16px*var(--ui)) at 50% calc(100% - 29px*var(--ui)),rgba(216,67,63,.35),transparent 70%),
    linear-gradient(90deg,transparent,var(--gold-line) 12%,var(--gold) 34%,transparent 35%,transparent 65%,var(--gold) 66%,var(--gold-line) 88%,transparent) center bottom calc(29px*var(--ui))/calc(220px*var(--ui)) 1px no-repeat}
.ledger .plate-head::after{content:"";width:calc(72px*var(--ui));height:calc(40px*var(--ui));margin-top:var(--s2);box-shadow:none;text-shadow:none;
  background:linear-gradient(180deg,var(--blood-lit),var(--blood) 60%,var(--blood-deep));
  -webkit-mask:url(assets/baal-sigil.png) center/contain no-repeat;mask:url(assets/baal-sigil.png) center/contain no-repeat}
.ledger :is(.a-head,.r-head,.s-head) .plate-head{background:none}
.ledger::before{background-image:url(assets/baal-sigil.png);background-position:center calc(-67px*var(--ui));background-size:min(160vw,calc(1500px*var(--ui))) auto;opacity:.05}

/* 3 · THE RED THIRST — what wants your word burns crimson */
.ledger .heading{text-shadow:0 0 30px rgba(216,67,63,.3)}
.ledger .heading::first-letter{color:var(--blood-ink)}
.ledger .mark-live{color:var(--blood-ink);border-color:var(--blood-line);background:rgba(158,27,27,.14);box-shadow:0 0 14px -6px var(--glow-live)}
.ledger .plate-lit,.ledger .a-team.plate-lit{border-color:var(--blood-line);border-top-color:var(--blood-lit);box-shadow:0 0 40px -14px var(--glow-live)}
.ledger .crew-mine{border-color:var(--blood-lit);background:linear-gradient(180deg,rgba(158,27,27,.22),rgba(18,7,9,.92) 32%,rgba(11,4,5,.98))}
.ledger .crew-mine .avatar{border-color:var(--blood-lit)}
.ledger .crew-mine::before{color:var(--blood-ink)}
.ledger .crew-mine .crew-name,.ledger .crew-you .crew-name{color:var(--bone);text-shadow:0 0 18px rgba(216,67,63,.45)}
.ledger .rail-you{background:linear-gradient(90deg,rgba(158,27,27,.18),transparent 60%);box-shadow:inset 3px 0 0 var(--blood-lit),0 0 40px -10px var(--glow-live)}
.ledger .rail-you .avatar{border-color:var(--blood-lit)}
.ledger .rail-you .roll-name{color:var(--bone)}
.ledger .rail-on{box-shadow:inset 3px 0 0 var(--blood-lit),0 0 20px -12px var(--glow-live)}
.ledger .rail-owed{box-shadow:inset 3px 0 0 var(--blood)}
.ledger .rail-act:hover{box-shadow:inset 3px 0 0 var(--blood)}
.ledger .chip-you{background:var(--blood);border-color:var(--blood-lit);color:var(--bone);text-shadow:none}
.ledger .tiles-hero .tile-hot{background:linear-gradient(180deg,rgba(158,27,27,.18),transparent 70%);box-shadow:inset 0 1px 0 rgba(216,67,63,.4)}
.ledger .tiles-hero .tile-hot .tile-n,.ledger .tiles-hero .tile-hot .label{color:var(--blood-ink);text-shadow:0 0 26px rgba(216,67,63,.5)}
.ledger .tiles-hero .tile:hover{background:rgba(216,67,63,.06)}
.ledger .worth-n,.ledger .pts{color:var(--blood-ink);text-shadow:0 0 22px rgba(216,67,63,.35)}
.ledger .cmp .cmp-diff{background:linear-gradient(90deg,rgba(158,27,27,.12),transparent 55%);box-shadow:inset 2px 0 0 var(--blood-lit)}
.ledger .discrep{border-left-color:var(--blood-lit)}
.ledger .radio-on{background:var(--blood-lit);border-color:var(--blood-lit);box-shadow:0 0 10px var(--glow-live)}
.ledger .toggle-on::after{background:var(--blood-lit);box-shadow:0 0 8px var(--glow-live)}
.ledger .bar-fill{background:var(--blood-lit);box-shadow:0 0 8px var(--blood-lit)}

/* 4 · THE DEATH COMPANY — a refusal is black armour and a white saltire */
.ledger .mark-bad{color:var(--bone);border-color:var(--bone-line);background:#0B0506}
.ledger .mark-bad.mark-lamp::before{content:"\2715";width:auto;height:auto;border-radius:0;background:none;box-shadow:none;font-size:var(--fs-2);line-height:1;color:var(--bone)}
.ledger .btn-bad{border-color:var(--bone-line);color:var(--bone);background:linear-gradient(180deg,#1A0F10,#050203)}
.ledger .btn-bad:hover{border-color:var(--bone);color:#fff}
.ledger .chip-bad{color:var(--bone);border-color:var(--bone-line);background:#0B0506}
.ledger .no-named{border-color:var(--bone)}
.ledger .tally-bad{--lamp:var(--bone-2)}
.ledger .crew-refused{border-color:var(--bone-line);background:linear-gradient(180deg,rgba(0,0,0,.55),#050203);filter:saturate(.25)}
.ledger .crew-refused .crew-state .mark{color:var(--bone);border-color:var(--bone-line);background:#0B0506}

/* 5 · SANGUINARY GILT — gold is honour: the wax is blood, the impression gold; officers wear a gold ring */
.ledger .crew-credited .crew-state .mark{border-color:var(--gold);color:var(--gold-warm);text-shadow:0 1px 0 rgba(0,0,0,.6);
  background:radial-gradient(circle at 35% 30%,#E0524E,#9E1B1B 45%,#5A0C10 82%,#3A0608);
  box-shadow:0 4px 10px rgba(0,0,0,.7),inset 0 0 0 4px rgba(240,208,138,.3),inset 0 0 0 5px rgba(90,12,16,.7)}
.ledger .avatar-officer{border-color:var(--gold);box-shadow:var(--catch),var(--cast-sm),0 0 12px -3px rgba(212,173,92,.5)}
.ledger .avatar-sgt{border-color:var(--blood)}
.ledger .honour-name,.ledger .rank-top,.ledger .stat-total .stat-v{color:var(--gold-warm)}
.ledger a.rail:hover .roll-name{color:var(--gold-warm)}

/* 6 · BLACK CERAMITE, RED LACQUER — the raised things are black plate with a red sheen */
.ledger .crew-card{border-color:var(--raise-line);background:linear-gradient(180deg,rgba(158,27,27,.10),rgba(18,7,9,.92) 30%,rgba(11,4,5,.98))}
.ledger :is(.honour,.post){background:linear-gradient(180deg,rgba(158,27,27,.10),rgba(18,7,9,.92) 30%,rgba(11,4,5,.98))}
.ledger .shot,.ledger .thumb{background:#0B0405}
.ledger .a-evidence .shot{border-color:var(--raise-line)}
.ledger .field,.ledger .field-n{background:rgba(11,4,5,.8)}
.ledger .filing-foot{background:rgba(14,6,7,.94)}

/* 7 · THE ARX — the nav is black lacquer with a gilt edge; the wordmark in bone */
.ledger .topbar{background:linear-gradient(180deg,rgba(26,7,9,.95),rgba(14,6,7,.9))}
.ledger .topbar,.ledger .filing-bar{border-bottom-color:var(--gold-dim);box-shadow:0 2px 0 rgba(0,0,0,.7),0 3px 0 rgba(212,173,92,.2)}
.ledger .wordmark{color:var(--bone)}

/* 8 · THE RED ROOM — the fire stays; the console glass reflects blood */
.ledger .console-glass{background:radial-gradient(ellipse at 30% 20%,rgba(216,67,63,.16),rgba(0,0,0,.75) 60%)}
.ledger .candle::before{box-shadow:0 0 22px 8px rgba(226,110,58,.36)}

/* ==========================================================================
   9 · THE SERVO-SKULL'S VOICE, which is not inside the ledger.

   Owner, looking at the Baal box: "the servo skull still has green chat
   bubbles". It did, and no chapter sheet could have reached it: the panel is
   appended to <body> (ui/app/skull-chat.js), so it stands OUTSIDE `.ledger`
   and not one token declared there is inherited by it. Every colour it drew
   came from the `var(--x, <green>)` fallbacks in ui/app/skull-chat.css.

   So the tokens it reads are set here on `html`, where the whole document
   inherits them -- and inside `.ledger` the declarations on the element
   itself still win, because a value set ON an element always beats an
   inherited one. That is inheritance, not specificity, so this cannot
   disturb a single rule of the sheet above it.
   ========================================================================== */
html{
  --ink:#EDE3D6;--ink-2:#C9BBAC;--ink-3:#A89A8C;--ink-4:#857868;
  --gold:#D4AD5C;--gold-line:rgba(212,173,92,.4);--line-2:#3A1A1E;
  --good:#D4AD5C;--good-2:#B89249;--bad-lit:#EDE3D6;
  --chat-ground:linear-gradient(145deg,rgba(34,12,14,.98),rgba(11,4,5,.99));
  --chat-them:rgba(90,12,16,.36);--chat-them-soft:rgba(90,12,16,.26);
  --chat-them-lit:rgba(158,27,27,.3);--chat-them-line:rgba(216,67,63,.42);
  --chat-glow:rgba(216,67,63,.38);--chat-focus:rgba(216,67,63,.28);
}