/* The palette lives in custom properties so the dark scheme below only has
   to swap values; every rule further down refers to these. */
:root {
    color-scheme: light dark;
    --page-bg: #FFFFF0;
    --panel-bg: #FFFFFF;
    --border: #c0c0c0;
    --text: #000000;
    --link: #C69500;
    --link-hover: #000000;
    --menu-active-bg: #c0c0c0;
    --menu-active-border: #000000;
    --offline: #c0c0c0;
    --offline-link: #707070;
    --unique: #be9256;
    --gain: #2e8b1e;
    --loss: #c8102e;
}

/* Dark scheme: the same warm cast as the ivory page, just dark, with the
   accents lifted enough to keep their contrast. It applies when the
   browser/OS prefers dark and the toggle (theme.js) has not been set to
   light, or whenever the toggle has been set to dark. CSS has no way to
   share a block between a media query and a selector, so the palette is
   written out twice; keep the two copies identical. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --page-bg: #1b1a16;
        --panel-bg: #24231f;
        --border: #4a4842;
        --text: #e8e6df;
        --link: #e0b23c;
        --link-hover: #ffffff;
        --menu-active-bg: #4a4842;
        --menu-active-border: #8a877e;
        --offline: #6b695f;
        --offline-link: #9a978c;
        --unique: #d9a86a;
        --gain: #62c94f;
        --loss: #ff6b7a;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #1b1a16;
    --panel-bg: #24231f;
    --border: #4a4842;
    --text: #e8e6df;
    --link: #e0b23c;
    --link-hover: #ffffff;
    --menu-active-bg: #4a4842;
    --menu-active-border: #8a877e;
    --offline: #6b695f;
    --offline-link: #9a978c;
    --unique: #d9a86a;
    --gain: #62c94f;
    --loss: #ff6b7a;
}
:root[data-theme="light"] {
    color-scheme: light;
}

/* The logo is an opaque PNG: ivory letters with a dark outline on white.
   In the dark scheme, inverting it gives a light outline on black, and
   screen blending drops that black onto the header's own background,
   leaving just the outlined wordmark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) div.head img {
        filter: invert(1);
        mix-blend-mode: screen;
    }
}
:root[data-theme="dark"] div.head img {
    filter: invert(1);
    mix-blend-mode: screen;
}

body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: 10px;
    text-align: justify;
}

h1 { margin-bottom: 0; margin-top: 0; }
h2 { margin-bottom: 0; }

a { text-decoration: none; color: var(--link); }
a:hover { text-decoration: underline; color: var(--link-hover); }

div.head {
    border: 1px solid var(--border);
    margin-bottom: 10px;
    background: var(--panel-bg);
}

/* The left column is a stack of boxes: the page menu (#menu) and, below
   it, the light/dark toggle (#theme). Each floats left and clears the one
   above so they stack; div.content's margin-left leaves room for them. */
.menu {
    width: 120px;
    float: left;
    clear: left;
    border: 1px solid var(--border);
    background: var(--panel-bg);
}
#theme {
    margin-top: 10px;
}
.menu a,
.menu button {
    text-align: center;
    margin: 0;
    display: block;
    border: 1px solid var(--panel-bg);
}
.menu a.home { color: var(--text); background: var(--menu-active-bg); border: 1px solid var(--menu-active-border); }
.menu a:hover,
.menu button:hover { border: 1px solid var(--menu-active-border); background: var(--menu-active-bg); text-decoration: none; }

/* The toggle button is dressed as a menu entry. */
.menu button {
    width: 100%;
    padding: 0;
    font: inherit;
    color: var(--link);
    background: none;
    cursor: pointer;
}
.menu button:hover { color: var(--link-hover); }

div.content {
    border: 1px solid var(--border);
    margin-left: 130px;
    margin-top: 0;
    padding: 10px;
    background: var(--panel-bg);
}

table.uniques {
    border: 1px solid var(--border);
    padding: 5px;
    text-align: left;
}
table.uniques td {
    padding-left: 10px;
}

/* Formulas on the Game Info page. A displayed formula is a block set off
   from the prose: monospaced so operators and names line up, centred,
   inset from both margins, and boxed on the page background so it reads
   as a different kind of content from the paragraphs around it. The
   accent stripe uses the link colour so it follows the theme. */
.formula {
    display: block;
    margin: 1em 2em;
    padding: 0.6em 1em;
    font-family: "DejaVu Sans Mono", Consolas, Menlo, monospace;
    font-size: 0.95em;
    line-height: 1.5;
    text-align: center;
    white-space: pre-wrap;
    overflow-x: auto;
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--link);
}
/* Multi-line pseudo-code formulas read better left-aligned, with their
   indentation kept. */
pre.formula {
    text-align: left;
    white-space: pre;
}
/* A formula quoted inside a sentence: same face, italic, no box. */
.formula-inline {
    font-family: "DejaVu Sans Mono", Consolas, Menlo, monospace;
    font-size: 0.95em;
    font-style: italic;
    white-space: nowrap;
}
/* The penalty table is a set of formulas with labels, so it gets the same
   box as a displayed formula. The event names stay in the body face,
   right-aligned against their formulas, which are set like .formula. */
table.penalty {
    margin: 1em 2em;
    padding: 0.6em 1em;
    border-spacing: 0;
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--link);
}
table.penalty th {
    text-align: right;
    font-weight: normal;
    padding: 0.15em 1em 0.15em 0;
    white-space: nowrap;
}
table.penalty td {
    font-family: "DejaVu Sans Mono", Consolas, Menlo, monospace;
    font-size: 0.95em;
    line-height: 1.5;
    text-align: left;
    white-space: nowrap;
}

/* Styles for the userlist */
li.offline { color: var(--offline); }
a.offline { color: var(--offline-link); }

/* Named unique items on the player page. */
.unique { color: var(--unique); }

/* Character modifiers on the player pages, coloured by what the event did
   to the player's own clock: green took time off, red added it. */
.mod-gain { color: var(--gain); }
.mod-loss { color: var(--loss); }

/* Rank history page. The window presets are a row of links above the
   chart, the current one dressed like the active menu entry. The chart is
   an SVG sized to its snapshots (its own colours and hover rules live in
   its inline stylesheet, see templates/ranks_svg.html), so a long window
   scrolls sideways inside its box rather than stretching the page. */
.rank-windows a {
    display: inline-block;
    padding: 0 0.6em;
    border: 1px solid var(--border);
    margin-right: 0.3em;
}
.rank-windows a.active {
    color: var(--text);
    background: var(--menu-active-bg);
    border-color: var(--menu-active-border);
}
.chart-scroll {
    overflow-x: auto;
    max-width: 100%;
}
.chart-scroll svg {
    display: block;
}
/* The movement table: rank now, name, rank then, and the change coloured
   the same way as the line it belongs to. */
table.rank-table {
    border: 1px solid var(--border);
    border-spacing: 0;
    text-align: left;
}
table.rank-table th,
table.rank-table td {
    padding: 2px 10px;
    border-bottom: 1px solid var(--border);
}
table.rank-table td.change { text-align: right; }
table.rank-table tr.rank-up td.change { color: var(--gain); }
table.rank-table tr.rank-down td.change { color: var(--loss); }
table.rank-table tr.rank-flat td.change { color: var(--offline-link); }
table.rank-table .rank-left { color: var(--offline-link); font-size: 0.85em; }

#map {
    width: 500px;
    height: 500px;
    background-image: url(newmap.png);
}
/* On /playerview the map <div> follows its <h2> directly with no <p> in
   between, unlike every other section (whose <p> supplies the gap via its
   own default top margin) — so it needs an explicit one here. /worldmap and
   /quest already have a <p> between their heading and #map, so this rule
   doesn't match (and doesn't affect) either of those. */
h2 + #map {
    margin-top: 1em;
}

/* Keeps the wide, tall player-db table from stretching div.content (and the
   rest of the page layout) past the viewport; it scrolls within its own box
   instead. The box must scroll vertically as well as horizontally: a sticky
   header row only sticks relative to its nearest scrolling ancestor, so
   without a max-height the header would just move with the page. */
.table-scroll {
    overflow: auto;
    max-height: calc(100vh - 3em);
}

/* Sortable player DB table (db.php), sorted client-side by tablesort. The
   border rules stand in for the legacy border="1" cellpadding="2"
   cellspacing="2" attributes the table used to carry. */
#player-db {
    border: 1px solid var(--border);
    border-spacing: 2px;
}
#player-db th,
#player-db td {
    border: 1px solid var(--border);
    padding: 2px;
}
#player-db th {
    cursor: pointer;
    white-space: nowrap;
}
#player-db td.nowrap {
    white-space: nowrap;
}
#player-db th::after {
    content: "\00A0\2195";  /* up/down arrow: column is sortable */
    opacity: 0.4;
}
#player-db th[aria-sort="ascending"]::after {
    content: "\00A0\2191";  /* sorted ascending */
    opacity: 1;
}
#player-db th[aria-sort="descending"]::after {
    content: "\00A0\2193";  /* sorted descending */
    opacity: 1;
}

/* Freezes the User column so it stays visible while the rest of the table
   scrolls horizontally inside .table-scroll. User is always the first
   column, so :first-child covers both the header and every row without
   needing any change to the table-generating code. */
#player-db th:first-child,
#player-db td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel-bg);
}

/* Freezes the header row the same way while the table scrolls vertically.
   Header cells sit above the frozen column's body cells, and the corner
   cell (the User header) is sticky on both axes and sits above everything,
   so neither frozen edge ever scrolls over the other. */
#player-db thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel-bg);
}
#player-db thead th:first-child {
    z-index: 3;
}