/* The database's own look (docs/website-design.md 14.2 to 14.6), kept as it was built when eremor.com took the brand kit
   (14.7): every rule below the bridge is the database's from the first site, unchanged. Loaded on the database's pages alone,
   after site.css, so its pages wear the new masthead and colophon around grids and cards of their own. */

/* ---- the bridge: the first site's names for its colours and faces, given the brand's ------------------------------------- */
:root {
  --night: #0b0f1c;
  --night-2: #111a2e;
  --night-3: #1b2a44;
  --ink: #ece4d2;
  --ink-2: #c9c1ae;
  --muted: #9c968a;
  --lantern: #f2a93b;
  --lantern-2: #f8bf5e;
  --ember: #c4572b;
  --line: rgba(236, 228, 210, 0.12);
  --radius: 6px;
  --display: "Cinzel", Georgia, serif;
  --caps: "Cinzel", Georgia, serif;
  --text: "EB Garamond", Georgia, serif;
}
.db-head, .db-page, .db-cols, .tip, .tip-float { font-variant-numeric: lining-nums tabular-nums; }
.db-head h1, .db-cats h2, .race-cards h2, .prof-cards h2 { color: var(--c-gilt); }
.db-section > h2, .tree h3, .db-cats h2 { letter-spacing: 0.06em; }

/* ---- the first site's tables, which the database's pages share ---------------------------------------------------------- */
.specs { border-collapse: collapse; width: 100%; margin: 0.4em 0 1em; }
.specs th, .specs td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.specs th { color: var(--ink-2); font-weight: 700; width: 34%; }
.specs-narrow { max-width: 360px; }
.specs td, .specs th { font-size: 1rem; }

/* ---- the database (docs/website-design.md 14.2): grids like a game's own database, cards like its tooltips --------------- */
:root { --q-common: #e3dccb; --q-uncommon: #6fdc76; --q-rare: #5aa9ff; --q-epic: #c084ff; --q-legendary: #ffa23a; --q-mythic: #ff6a52; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.q-common { color: var(--q-common); } .q-uncommon { color: var(--q-uncommon); } .q-rare { color: var(--q-rare); }
.q-epic { color: var(--q-epic); } .q-legendary { color: var(--q-legendary); } .q-mythic { color: var(--q-mythic); }
.q-rank-elite, .rank-elite { color: #e8c25a; } .q-rank-rare, .rank-rare { color: #c9d3e2; } .q-rank-boss, .rank-boss { color: #ff8a4c; } .q-rank-world, .rank-world { color: #ff5e7a; }
.good { color: #8fe39a; } .bad { color: #ff9a85; }
.db-head { padding: 40px 0 18px; background: radial-gradient(ellipse 50% 100% at 15% 0%, rgba(242, 169, 59, 0.1), transparent 70%); border-bottom: 1px solid var(--line); }
.db-head h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin: 0.2em 0 0.15em; }
.db-sub { color: var(--ink-2); margin: 0; font-size: 1.05rem; }
.crumbs { font-family: var(--caps); font-size: 0.95rem; color: var(--muted); letter-spacing: 0.03em; }
.crumbs a { text-decoration: none; }
.db-page { padding-top: 28px; padding-bottom: 24px; }
.narrow-page { max-width: 880px; }
.lede-s { color: var(--ink-2); font-size: 1.1rem; max-width: 46em; }
.db-cols { display: grid; gap: 28px; padding-top: 28px; padding-bottom: 24px; }
@media (min-width: 900px) { .db-cols { grid-template-columns: 340px minmax(0, 1fr); gap: 40px; } .db-aside { position: sticky; top: 84px; align-self: start; } }
.db-section { margin: 0 0 34px; }
.db-section > h2 { font-family: var(--caps); font-size: 1.35rem; color: var(--lantern-2); letter-spacing: 0.03em; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 12px; }
.db-list { padding-left: 1.2em; margin: 0 0 1em; color: var(--ink-2); }
.db-list li { margin-bottom: 0.45em; }
.db-list li::marker { color: var(--lantern); }
.facts { display: grid; gap: 0; margin: 14px 0 26px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.facts > div:last-child { border-bottom: 0; }
.facts > div:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.specs-narrow { max-width: 360px; }
.specs td, .specs th { font-size: 1rem; }
.greeting { margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--lantern); background: var(--night-2); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--ink); }
.lore { font-style: italic; color: var(--ink); }
.steps-list { padding-left: 1.3em; color: var(--ink-2); }
.steps-list li { margin-bottom: 0.7em; }
.steps-list p { margin: 0; }
.kit { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* references: an icon and a name, coloured by rarity or rank */
.ref { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; vertical-align: middle; }
.ref:hover span { text-decoration: underline; }
.ref:not([class*="q-"]):not([class*="rank-"]) { color: var(--lantern-2); }
.ico { width: 40px; height: 40px; border-radius: 6px; background: radial-gradient(circle at 50% 40%, #222b4a, #10152a); box-shadow: inset 0 0 0 1px rgba(236, 228, 210, 0.16); flex: none; object-fit: contain; }
.ico-s { width: 24px; height: 24px; border-radius: 4px; padding: 1px; }
.ico-l { width: 48px; height: 48px; padding: 3px; }
.ico-none { display: inline-block; }
.q-uncommon .ico { box-shadow: inset 0 0 0 1px rgba(111, 220, 118, 0.55); }
.q-rare .ico { box-shadow: inset 0 0 0 1px rgba(90, 169, 255, 0.6); }
.q-epic .ico { box-shadow: inset 0 0 0 1px rgba(192, 132, 255, 0.6); }
.q-legendary .ico { box-shadow: inset 0 0 0 1px rgba(255, 162, 58, 0.7); }
.q-mythic .ico { box-shadow: inset 0 0 0 1px rgba(255, 106, 82, 0.75); }
.count { color: var(--muted); font-size: 0.95em; margin-right: 6px; }

/* the grids */
.grid-block { margin: 6px 0 18px; }
.grid-tools { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 10px; }
.grid-tools input, .grid-tools select { min-height: 40px; border-radius: 8px; border: 1px solid rgba(236, 228, 210, 0.22); background: #0a0e1a; color: var(--ink); font: 400 1rem var(--text); padding: 0 12px; }
.grid-tools input { flex: 1 1 220px; max-width: 360px; }
.grid-tools input:focus, .grid-tools select:focus { outline: none; border-color: var(--lantern); box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.22); }
.grid-count { color: var(--muted); font-size: 0.95rem; margin-left: auto; }
.grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(17, 24, 48, 0.55); }
.grid-wrap .specs { margin: 0; }
table.grid { border-collapse: collapse; width: 100%; font-size: 1rem; }
table.grid th, table.grid td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tbody tr:hover { background: rgba(242, 169, 59, 0.06); }
table.grid tbody tr:target { background: rgba(242, 169, 59, 0.12); }
table.grid th { background: var(--night-3); color: var(--ink-2); font-weight: 700; white-space: nowrap; padding: 0; }
table.grid td.col-name { min-width: 190px; }
table.grid tr[hidden] { display: none; }
table.grid a:not(.ref), .specs a, .facts a { text-decoration: none; }
table.grid a:not(.ref):hover, .specs a:hover, .facts a:hover { text-decoration: underline; }
.sort { all: unset; display: block; padding: 9px 12px; cursor: pointer; width: 100%; box-sizing: border-box; }
.sort:hover { color: var(--ink); }
.sort:focus-visible { outline: 2px solid var(--lantern); outline-offset: -2px; }
th[aria-sort="ascending"] .sort::after { content: " \25B2"; color: var(--lantern); font-size: 0.75em; }
th[aria-sort="descending"] .sort::after { content: " \25BC"; color: var(--lantern); font-size: 0.75em; }

/* the cards: an item's, a creature's, an ability's, on its page and floating over a link */
.tip { background: linear-gradient(180deg, #121a33, #0b1022); border: 1px solid rgba(236, 228, 210, 0.2); border-radius: 10px; padding: 14px 16px 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); font-size: 0.98rem; line-height: 1.45; margin-bottom: 18px; }
.tip.q-uncommon { border-color: rgba(111, 220, 118, 0.4); } .tip.q-rare { border-color: rgba(90, 169, 255, 0.45); } .tip.q-epic { border-color: rgba(192, 132, 255, 0.45); }
.tip.q-legendary { border-color: rgba(255, 162, 58, 0.5); } .tip.q-mythic { border-color: rgba(255, 106, 82, 0.55); }
.tip-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.tip-name { font-weight: 700; font-size: 1.12rem; margin: 0; color: inherit; }
.tip-name a { color: inherit; text-decoration: none; }
.tip-kind { margin: 0; color: var(--muted); font-size: 0.92rem; }
.tip-lines { list-style: none; padding: 0; margin: 0; color: var(--ink); }
.tip-lines li { margin: 2px 0; }
.tip-lines .tip-row { display: flex; justify-content: space-between; gap: 12px; }
.tip-lines .use { color: #8fe39a; }
.tip-lines .need { color: #ffcf73; }
.tip-lines .set { color: #e8c25a; }
.tip-lines .muted { color: var(--muted); }
.tip-lines .desc { color: #f2d48a; margin-top: 6px; }
.tip-float { position: absolute; z-index: 20; width: 320px; max-width: calc(100vw - 16px); pointer-events: none; }
.tip-float .tip { margin: 0; }

/* the hub */
.db-search { position: relative; max-width: 620px; margin-top: 1.2em; }
.db-search input { width: 100%; min-height: 54px; padding: 0 18px; border-radius: 12px; border: 1px solid rgba(236, 228, 210, 0.25); background: #0a0e1a; color: var(--ink); font: 400 1.15rem var(--text); }
.db-search input:focus { outline: none; border-color: var(--lantern); box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.25); }
.db-results { list-style: none; margin: 6px 0 0; padding: 6px; position: absolute; left: 0; right: 0; z-index: 6; background: #0d1326; border: 1px solid rgba(236, 228, 210, 0.2); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); max-height: 60vh; overflow-y: auto; }
.db-results a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.db-results a:not([class*="q-"]) { color: var(--ink); }
.db-results a:hover, .db-results a:focus { background: rgba(242, 169, 59, 0.1); }
.db-results li.muted { padding: 8px 12px; }
.db-results-cat { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.db-cats { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.db-cats a { display: block; height: 100%; text-decoration: none; color: var(--ink); background: linear-gradient(160deg, var(--night-3), var(--night-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 8px; transition: border-color 0.15s ease, transform 0.15s ease; }
.db-cats a:hover { border-color: rgba(242, 169, 59, 0.5); transform: translateY(-1px); }
.db-cats h2 { font-family: var(--caps); font-size: 1.3rem; color: var(--lantern-2); margin: 0.1em 0 0.25em; }
.db-cats p { color: var(--ink-2); font-size: 0.98rem; }
.db-count { float: right; font-family: var(--display); font-size: 1.6rem; color: var(--lantern); line-height: 1; }
.db-note { margin-top: 28px; }
.race-cards, .prof-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.race-cards a, .prof-cards a { display: block; height: 100%; text-decoration: none; color: var(--ink); background: var(--night-2); border: 1px solid var(--line); border-top: 2px solid var(--lantern); border-radius: 0 0 var(--radius) var(--radius); padding: 16px 18px 6px; }
.prof-cards a { display: flex; gap: 14px; align-items: flex-start; border-top-width: 1px; border-radius: var(--radius); }
.race-cards a:hover, .prof-cards a:hover { border-color: rgba(242, 169, 59, 0.5); }
.race-cards h2, .prof-cards h2 { font-family: var(--display); font-size: 1.4rem; margin: 0 0 0.3em; }
.race-cards p, .prof-cards p { color: var(--ink-2); font-size: 1rem; }

/* the ability trees: each a grid of five tiers and three columns, laid out by the rules' own 'at <row> <col>' */
.trees { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); margin-bottom: 34px; }
.tree { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 12px 12px; }
.tree h3 { font-family: var(--caps); color: var(--lantern-2); font-size: 1.2rem; margin: 0 0 10px 4px; }
.tree-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(76px, auto); gap: 6px; }
.node a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; text-decoration: none; color: var(--ink); font-size: 0.85rem; line-height: 1.15; padding: 4px 2px; border-radius: 8px; }
.node a:hover, .node a:focus { background: rgba(242, 169, 59, 0.1); }
.node.major .ico { box-shadow: inset 0 0 0 2px rgba(192, 132, 255, 0.75), 0 0 14px rgba(192, 132, 255, 0.35); }
.node.r1 { grid-row: 1; } .node.r2 { grid-row: 2; } .node.r3 { grid-row: 3; } .node.r4 { grid-row: 4; } .node.r5 { grid-row: 5; }
.node.c2 { grid-column: 1; } .node.c3 { grid-column: 2; } .node.c4 { grid-column: 3; }
.attr h2 .small { font-family: var(--text); }