/* usagiworks */

/* links are always the browser's default blue, visited or not */
A:link, A:visited { color: #0000EE; text-decoration: underline; }

/* top-right theme switcher: a plain old link */
#theme-switch { position: absolute; top: 8px; right: 8px; }
/* without JavaScript the link can't do anything, so it isn't shown (theme.js always sets data-theme) */
html:not([data-theme]) #theme-switch { display: none; }

/* in quirks mode tables don't inherit the page's text colour, which left the dark theme's tables black */
TABLE { color: inherit; }

/* the bar between the two cells, as thick as the outer edge: that edge is the table's 2px plus a
   cell's 1px, and the bar is two cells' 1px side by side, so the left cell's side gets one more */
TABLE.layout > TBODY > TR > TD:first-child { border-right-width: 2px; }

/* footer sits at the bottom of the window when the page is shorter than it, otherwise after the
   content; the body's own 8px margins are why it's 100% minus 16px */
HTML { height: 100%; }
BODY:has(#footer) { min-height: calc(100% - 16px); display: flex; flex-direction: column; }
#footer { margin-top: auto; margin-bottom: 0; padding-top: 1em; }

/* pictures in the contents cell shrink to fit it */
IMG.fit { max-width: 100%; height: auto; }

/* dark theme; light is the BODY's own BACKGROUND/BGCOLOR */
html[data-theme="classic-dark"] body { background: #0A1411 url("images/bgdark.jpg"); color: #D7E3DB; }
/* default blue disappears on the dark forest, so links there are always a lighter blue */
html[data-theme="classic-dark"] A:link,
html[data-theme="classic-dark"] A:visited { color: #99CCFF; }

/* Bongard Problems game (bongard/game.js) */
IMG.bp-image { border: 1px solid #000000; background: #FFFFFF; }
.bp-score { font-size: 2em; margin: 0.2em 0; }
.bp-table-wrap { overflow-x: auto; }

/* everything on the Bongard page is centred, tables included */
TD.bp-cell { text-align: center; }
TD.bp-cell TABLE { margin-left: auto; margin-right: auto; }
/* two blocks as wide as the picture, one under each half: the example's keywords, and the guess boxes */
.bp-halves { display: flex; gap: 16px; max-width: 515px; margin: 0 auto; }
.bp-halves > * { flex: 1 1 0; min-width: 0; margin: 0 0 1em; overflow-wrap: anywhere; }
.bp-guesses INPUT[type="text"] { width: 100%; box-sizing: border-box; margin: 4px 0; }
.bp-reset { margin-top: 2em; }

/* the game's accent: the "left/right keywords" labels and the bold left/right in the intro,
   with the example's keywords in a lighter shade of the same colour */
.bp-keywords P { color: #326A75; }
.bp-keywords B, B.bp-side { color: #054957; }
html[data-theme="classic-dark"] .bp-keywords P { color: #C4EAF2; }
html[data-theme="classic-dark"] .bp-keywords B,
html[data-theme="classic-dark"] B.bp-side { color: #89D4E3; }

/* right and wrong in the game: "✓ matched", "Yes! That matched…", "Solved!" in green;
   "✗ not found", "No, that's not it…", "Out of guesses." in red */
.bp-good { color: #1D6B2B; }
.bp-bad { color: #A3241B; }
html[data-theme="classic-dark"] .bp-good { color: #8EE39B; }
html[data-theme="classic-dark"] .bp-bad { color: #FF9E91; }