@import url('../assets/external/fonts.googleapis.com/css2.47211c30.css');

/* =====================================================================
   Palette: custom primary/accent for every scheme
   ===================================================================== */
:root {
  --cw-gold: #d9b45a;
  --cw-gold-dim: #a8893f;
  --cw-violet: #6d4ab8;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #2a1f4d;
  --md-primary-fg-color--light: #3f3270;
  --md-primary-fg-color--dark: #1c1535;
  --md-primary-bg-color: #f3ecd9;
  --md-primary-bg-color--light: #e3d9bf;
  --md-accent-fg-color: #8a5a00;
  --md-accent-fg-color--transparent: rgba(138, 90, 0, .1);
  --md-default-bg-color: #faf6ee;
  --md-default-fg-color: #241f33;
  --md-default-fg-color--light: #5a5370;
  --md-default-fg-color--lighter: #8c86a0;
  --md-default-fg-color--lightest: #d9d3e6;
  --md-code-bg-color: #f0e9da;
  --md-typeset-a-color: #6b3fa0;
  --cw-surface: #ffffff;
  --cw-surface-2: #f3eee2;
  --cw-border: #e2dac6;
  --cw-head-grad: linear-gradient(90deg, #2a1f4d 0%, #4a2d6a 60%, #6b3fa0 100%);
}

/* Dark mode is OLED black: pure-black backgrounds, violet and gold accents */
[data-md-color-scheme="slate"] {
  --md-hue: 262;
  --md-primary-fg-color: #000000;
  --md-primary-fg-color--light: #141414;
  --md-primary-fg-color--dark: #000000;
  --md-primary-bg-color: #efe6cf;
  --md-primary-bg-color--light: #cfc6ad;
  --md-accent-fg-color: #e0bd63;
  --md-accent-fg-color--transparent: rgba(224, 189, 99, .12);
  --md-default-bg-color: #000000;
  --md-default-bg-color--light: #000000;
  --md-default-bg-color--lighter: #000000;
  --md-default-bg-color--lightest: #000000;
  --md-default-fg-color: #e9e4f2;
  --md-default-fg-color--light: #b9b2cc;
  --md-default-fg-color--lighter: #8d86a3;
  --md-default-fg-color--lightest: #1f1b2a;
  --md-code-bg-color: #0f0d14;
  --md-code-fg-color: #e9e4f2;
  --md-typeset-a-color: #c9a7ff;
  --md-typeset-table-color: #1f1b2a;
  --md-admonition-bg-color: #0a0910;
  --md-footer-bg-color: #000000;
  --md-footer-bg-color--dark: #000000;
  --cw-surface: #0a0910;
  --cw-surface-2: #110f18;
  --cw-border: #221e2e;
  --cw-head-grad: linear-gradient(90deg, #000000 0%, #0d0a1a 60%, #1a1030 100%);
}
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs { background: #000; border-bottom: 1px solid #1f1b2a; }
[data-md-color-scheme="slate"] .md-search__form { background: #111; }
[data-md-color-scheme="slate"] .md-search__output { background: #0a0910; }
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap { background: #000; }

/* =====================================================================
   Header, typography
   ===================================================================== */
.md-header { background: var(--cw-head-grad); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.md-tabs { background: var(--md-primary-fg-color--dark); }
.md-header__topic, .md-header__title { font-family: 'Cinzel', serif; letter-spacing: .04em; }
.md-tabs__link { font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .06em; opacity: .85; }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--cw-gold); opacity: 1; }

.md-typeset h1 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--md-default-fg-color);
  letter-spacing: .02em;
  margin-bottom: .6em;
}
.md-typeset h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: .45rem;
  background: linear-gradient(90deg, var(--cw-gold), transparent);
  border-radius: 2px;
}
.md-typeset h2 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.25em;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--cw-border);
  padding-bottom: .25rem;
  clear: both;
}
.md-typeset h3 { font-weight: 600; color: var(--md-default-fg-color--light); font-size: .95em; text-transform: uppercase; letter-spacing: .08em; }
.md-typeset { font-size: .78rem; line-height: 1.65; }
.md-typeset a { text-decoration-color: transparent; transition: text-decoration-color .15s; }
.md-typeset a:hover { text-decoration-color: currentColor; }

/* =====================================================================
   Tables
   ===================================================================== */
.md-typeset table:not([class]) {
  border: 1px solid var(--cw-border);
  border-radius: .4rem;
  overflow: hidden;
  font-size: .72rem;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background: var(--cw-surface-2);
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--cw-border);
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--cw-border); vertical-align: top; }
.md-typeset table:not([class]) tbody tr:nth-child(even) { background: color-mix(in srgb, var(--cw-surface-2) 55%, transparent); }
.md-typeset table:not([class]) tbody tr:hover { background: var(--md-accent-fg-color--transparent); }

ul.cell-list { margin: 0 !important; padding-left: .9rem !important; list-style: disc !important; }
ul.cell-list li.cw-more-li { list-style: none; margin-left: -.9rem !important; }
.md-typeset a.cw-more-toggle { color: var(--cw-gold-dim); font-size: .9em; text-decoration: underline dotted; }
ul.cell-list li { margin: 0 !important; padding: 0; line-height: 1.45; }
ul.cell-list li::marker { color: var(--cw-gold-dim); }

/* =====================================================================
   Infobox card
   ===================================================================== */
.infobox {
  float: right;
  width: 21rem;
  max-width: 100%;
  margin: .2rem 0 1rem 1.5rem;
  font-size: .7rem;
  background: var(--cw-surface);
  border: 1px solid var(--cw-border);
  border-top: 3px solid var(--cw-gold);
  border-radius: .5rem;
  padding: .3rem .6rem .5rem;
}
.infobox table, .md-typeset .infobox table:not([class]) { margin: 0; border: 0; box-shadow: none; width: 100%; display: table; font-size: inherit; }
.infobox thead { display: none; }
.infobox td { padding: .3rem .3rem !important; border-top: 1px solid var(--cw-border) !important; }
.infobox tr:first-child td { border-top: 0 !important; }
.infobox td:first-child { font-family: 'Cinzel', serif; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; color: var(--md-default-fg-color--light); white-space: nowrap; width: 6.5rem; }
.infobox tbody tr:nth-child(even) { background: transparent !important; }
@media screen and (max-width: 59.9375em) {
  .infobox { float: none; width: auto; margin: 0 0 1rem 0; }
}

/* =====================================================================
   Footnotes and spoilers
   ===================================================================== */
.md-typeset .footnote { font-size: .62rem; color: var(--md-default-fg-color--light); columns: 2; column-gap: 2rem; }
.md-typeset .footnote li { break-inside: avoid; }
.md-typeset .footnote-ref { font-size: .6em; color: var(--cw-gold-dim); }
.md-typeset sup + sup { margin-left: .25em; }
.md-typeset sup + sup::before { content: "\00b7"; margin-right: .15em; color: var(--md-default-fg-color--lighter); }
@media screen and (max-width: 44.9375em) { .md-typeset .footnote { columns: 1; } }

html.cw-pending .md-content__inner { visibility: hidden; }
.cw-spoiler {
  filter: blur(6px);
  cursor: pointer;
  user-select: none;
  transition: filter .15s;
  position: relative;
}
tr.cw-spoiler { filter: none; }
tr.cw-spoiler > td { filter: blur(6px); cursor: pointer; user-select: none; }
.cw-spoiler a { pointer-events: none; }
.cw-spoiler:hover { filter: blur(4px); }

.cw-control {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 .5rem;
  font-size: .62rem;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--md-primary-bg-color);
}
.cw-control input {
  width: 3.4rem;
  padding: .12rem .35rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .25rem;
  background: rgba(0,0,0,.25);
  color: var(--cw-gold);
  font: inherit;
  font-weight: 600;
  text-align: center;
}
.cw-control input:focus { outline: 1px solid var(--cw-gold); }
.cw-control button {
  padding: .12rem .45rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .25rem;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cw-control button:hover { background: var(--cw-gold); color: #1b1530; border-color: var(--cw-gold); }
@media screen and (max-width: 44.9375em) { .cw-control .cw-label { display: none; } }

/* =====================================================================
   Home hero and index cards
   ===================================================================== */
.cw-hero {
  padding: 1.4rem 1.6rem;
  margin: 0 0 1.5rem;
  border: 1px solid var(--cw-border);
  border-radius: .6rem;
  background:
    radial-gradient(60rem 20rem at -10% -40%, rgba(109,74,184,.25), transparent 60%),
    radial-gradient(40rem 16rem at 110% 120%, rgba(217,180,90,.18), transparent 60%),
    var(--cw-surface);
}
.cw-hero { display: flex; align-items: center; gap: 1.6rem; }
.cw-hero p { margin: .4rem 0 0; color: var(--md-default-fg-color--light); }
.cw-hero > p { margin: 0; flex: none; line-height: 0; }
.cw-hero .cw-cover {
  display: block; width: 9rem; height: auto;
  border: 1px solid var(--cw-border); border-radius: .4rem;
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.45);
}
.cw-hero-text strong { font-family: 'Cinzel', serif; font-size: 1.25rem; line-height: 1.3; color: var(--md-default-fg-color); }
@media screen and (max-width: 44.9375em) {
  .cw-hero { flex-direction: column; text-align: center; gap: 1rem; }
}
.cw-hero .cw-cn { font-size: .9rem; color: var(--md-default-fg-color--lighter); letter-spacing: .2em; }
.cw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; margin: 1rem 0 1.5rem; }
.md-typeset .cw-cards a.cw-card {
  display: block;
  padding: .8rem .9rem;
  border: 1px solid var(--cw-border);
  border-radius: .5rem;
  background: var(--cw-surface);
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.md-typeset .cw-cards a.cw-card:hover { border-color: var(--cw-gold); transform: translateY(-2px); }
.cw-card strong { font-family: 'Cinzel', serif; display: block; margin-bottom: .2rem; color: var(--cw-gold-dim); }
.cw-card span { color: var(--md-default-fg-color--light); font-size: .7rem; }