/* What a page adds on top of the components: where things sit on one kind of page. Only tokens (tokens.css). */

/* ----- the community home, a player's page, the wiki ----- */
/* the community home */
.splash { padding: var(--s-6) 0 var(--s-5); text-align: center; }
.splash h1 { margin: var(--s-4) 0; }
.splash .input-group { margin: 0 auto; }

/* a player's page */
/* the reference leaves 16 px under the bio well, and under the facts once the two stack */
.bio-well { margin-bottom: var(--well-gap); }
@media (max-width: 991px) { .col-5 > .table--facts { margin-bottom: var(--well-gap); } }
.bio-well { font-size: var(--t-h4); font-weight: var(--w-bold); text-align: center; white-space: pre-line; overflow-wrap: anywhere; }
.bio-well--empty { min-height: var(--s-6); }

/* the wiki: content, and the navigation down the right, sized as the reference's: a 20 px header line, 26 px search,
   links 2 px 20 px with 2 px between */
.wiki-side {
    h4 { margin: 0; font-size: var(--t-small); line-height: var(--lh); font-weight: var(--w-bold); color: var(--c-muted); text-transform: uppercase; }
    .form-control { height: var(--ctl-h-xs); padding: 0 var(--cell); }
    form { margin-bottom: var(--s-0); }
    ul { margin: 0; padding: 0; list-style: none; }
    ul ul { padding-left: var(--s-2); }
    li { margin-top: var(--s-0); }
    li a, summary { display: block; padding: var(--s-0) var(--s-4); line-height: var(--lh); border-radius: var(--radius); }
    li a:hover, summary:hover { background: var(--c-surface); text-decoration: none; }
    li.is-on > a { font-weight: var(--w-bold); }
    summary { color: var(--c-muted); cursor: pointer; }
}
/* an item's or enemy's sections: bold 24 px headings between rules, as the reference's */
.wiki-body h3, .wiki-body h4 { font-weight: var(--w-bold); }
/* what an enemy drops: the group in a narrow first column (the reference's holds a bag picture; ours is the group's
   name, so the column fits the name), then the items three to a row in equal columns */
.wiki-drops {
    th { width: 1%; text-align: center; vertical-align: middle; }
    td { width: 33%; white-space: normal; }
    /* a phone keeps the reference's width and scrolls the table sideways in its wrap */
    @media (max-width: 767px) { min-width: var(--drops-min); }
}
/* an item's or enemy's page: its sprite top left, the line about it beside */
.wiki-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.wiki-head img { flex: none; }
.wiki-head p { margin: 0; }
/* the wiki's navigation starts 20 px below its page and 5 px in, as the reference's */
.wiki-side { margin-top: var(--s-4); padding-left: var(--s-1); }
.wiki-art { display: flex; justify-content: center; gap: var(--s-2); }
.wiki-art + hr + h4 { margin: 0; padding: var(--s-2) 0; }
/* the current version: two equal centred columns, as the reference's */
.wiki-version { table-layout: fixed; text-align: center; }
.wiki-version th, .wiki-version td { text-align: center; white-space: normal; }
.wiki-table {
    /* a heading lines up with its column: names left, sprites and tiers centred, numbers right */
    th.num { text-align: right; }
    abbr { text-decoration: none; cursor: help; }
    /* names stay on one line while there is room; only a narrow screen lets them wrap */
    @media (max-width: 991px) { td { white-space: normal; } }
}
.contents { margin: 0 0 var(--s-3); padding-left: calc(var(--s-4) + var(--s-1)); }
.contents li { margin: 0; }
.back-top { display: block; margin: 0 0 var(--s-2); }
.drops { margin: 0; padding: 0; list-style: none; }
.drops li { margin: var(--s-0) 0; }
.quest {
    padding: var(--s-2) 0;
    border-top: var(--line) solid var(--c-rule);
    &:first-child { border-top: 0; }
    h4 { margin: 0 0 var(--s-1); }
    ul { margin: 0 0 var(--s-1); padding-left: var(--s-4); }
    li { display: flex; align-items: center; gap: var(--s-1); margin: var(--s-0) 0; }
}


/* ----- the shop: one row per item, the price at the right edge ----- */
.shop { max-width: var(--list-w); margin: var(--s-4) 0; padding: 0; list-style: none; background: var(--c-white); border: var(--line) solid var(--c-rule); border-radius: var(--radius); }
.shop__row { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "name price go" "desc price go"; align-items: center; gap: var(--s-0) var(--s-4); padding: var(--s-2) var(--s-3); }
.shop__row + .shop__row { border-top: var(--line) solid var(--c-rule); }
.shop__name { grid-area: name; font-weight: var(--w-bold); }
.shop__desc { grid-area: desc; color: var(--c-muted); }
.shop__price { grid-area: price; font-size: var(--t-h4); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.shop__go { grid-area: go; }
@media (max-width: 480px) {
    .shop__row { grid-template-columns: 1fr auto; grid-template-areas: "name price" "desc desc" "go go"; }
    .shop__go { margin-top: var(--s-2); }
}
.price { font-size: var(--t-h2); font-weight: var(--w-bold); line-height: var(--lh-heading); }
/* a purchase's state in the purchases table */
.state { font-weight: var(--w-bold); }
.state-Pending { color: var(--c-warn-text); }
.state-Fulfilled { color: var(--c-ok-text); }
.state-Refunded { color: var(--c-muted); }
.state-Failed { color: var(--c-bad-text); }

/* ----- long text: legal pages, updates and blog posts ----- */
.prose, .post-body, .discord { max-width: var(--measure); }
.prose li, .post-body li { margin: var(--s-1) 0; }
.post { padding: var(--s-4) 0; border-top: var(--line) solid var(--c-rule-light); }
.post > h2 { margin-top: 0; }
.post > h2 a { color: inherit; }
.post-body h3 { margin-top: var(--s-3); font-size: var(--t-h4); }
.post-body ul ul { margin: var(--s-1) 0; }
.discord { margin-top: var(--s-3); }
.discord summary { color: var(--c-link); }
.discord-part { margin-top: var(--s-2); }
.discord-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-1); color: var(--c-muted); }
.discord-part textarea { width: 100%; padding: var(--cell); font: var(--t-small)/var(--lh-text) var(--c-mono); color: var(--c-input-text); background: var(--c-white); border: var(--line) solid var(--c-input); border-radius: var(--radius); }

/* ----- the admin site (Pages/Admin) ----- */
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.admin-search { display: flex; flex: 1 1 var(--field-w); gap: var(--s-1); max-width: var(--field-w); }
.admin-search input { flex: 1; min-width: 0; }
.admin-qr { padding: var(--cell); background: var(--c-white); border: var(--line) solid var(--c-rule); border-radius: var(--radius); }
/* item slots (_AdminIcon), each with its tooltip on hover or focus */
.admin-grid { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-2) 0; }
.admin-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--admin-tile); height: var(--admin-tile); color: var(--c-muted); background: var(--c-surface); border: var(--line) solid var(--c-rule); border-radius: var(--radius); text-decoration: none; }
.admin-icon__none { font-weight: var(--w-bold); }
a.admin-icon:hover, .admin-icon:focus-visible { border-color: var(--c-hover-rule); outline: none; text-decoration: none; }
.admin-icon.is-picked { border-color: var(--c-link); box-shadow: 0 0 0 var(--line) var(--c-link); }
.admin-icon.is-dropped { border-style: dashed; border-color: var(--c-warn-text); }
.admin-icon.is-gained { border-color: var(--c-ok); }
.admin-icon.is-lost { border-color: var(--c-danger); }
.admin-icon.is-changed { border-color: var(--c-focus); }
/* a count or a stat's points in the tile's corner, as the game's tiles draw it */
.admin-icon__badge { position: absolute; right: var(--s-0); bottom: 0; font-size: var(--t-small); font-weight: var(--w-bold); color: var(--c-text); pointer-events: none; }
.admin-icon.is-gained .admin-icon__badge { color: var(--c-ok-text); }
.admin-icon.is-lost .admin-icon__badge { color: var(--c-bad-text); }
.admin-tip { display: none; position: absolute; left: 0; bottom: calc(100% + var(--ctl-pad-y)); z-index: 20; width: max-content; max-width: var(--tip-w); padding: var(--ctl-pad-y) var(--s-2); font-size: var(--t-small); line-height: var(--lh-text); color: var(--c-tip-text); text-align: left; white-space: normal; background: var(--c-tip); border-radius: var(--radius); pointer-events: none; }
.admin-icon:hover .admin-tip, .admin-icon:focus-visible .admin-tip { display: block; }
.admin-tip strong, .admin-tip span { display: block; }
.admin-tip span { color: var(--c-input); }
.admin-tip .admin-tip__line { margin-top: var(--s-0); color: var(--c-tip-text); }
/* a ledger event (_AdminEvent) */
.admin-event { padding-block: var(--s-3); border-top: var(--line) solid var(--c-rule); }
.admin-event:first-child { padding-top: 0; border-top: 0; }
.admin-event h3 { margin: 0 0 var(--s-1); font-size: var(--t-lead); }
.admin-event p { margin: var(--s-1) 0; }
.admin-event__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.admin-event__row .admin-grid { margin: var(--s-1) 0; }
.admin-event__label { min-width: var(--label-w); color: var(--c-muted); }
.admin-money { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.admin-gain { font-weight: var(--w-bold); color: var(--c-ok-text); }
.admin-loss { font-weight: var(--w-bold); color: var(--c-bad-text); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: var(--s-0); margin-bottom: var(--s-3); }
.admin-tab { padding: var(--ctl-pad-y) var(--ctl-pad-x); color: var(--c-link); border-radius: var(--radius); }
.admin-tab:hover { background: var(--c-rule-light); text-decoration: none; }
.admin-tab.is-on { color: var(--c-white); background: var(--c-link); }
.admin-item-search { margin-bottom: var(--s-1); }
.admin-picked { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; }
.admin-picked strong, .admin-picked span { display: block; }
.admin-give { margin-bottom: var(--s-4); padding-top: var(--s-1); border-top: var(--line) solid var(--c-rule); }
.admin-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--s-3); }
.admin-inline .field { flex: 1 1 var(--field-min); }
.admin-wrap { min-width: var(--menu-w); white-space: normal; }
.admin-audit { max-width: none; }
.admin-grants { margin: 0 0 var(--s-3); padding: 0; border: 0; }
.admin-grants legend { margin-bottom: var(--s-1); font-weight: var(--w-bold); color: var(--c-muted); }
.admin-grants .field { margin-bottom: var(--s-1); }
.admin-grants .field label { margin-bottom: 0; font-weight: var(--w-normal); }
.admin-grants .field .fine { display: block; padding-left: var(--s-4); }