/* Sprouts — the style of the User's Guide and the Technical Information
   (manual.html, technical.html), taken from Backgammon's manual.css. */

:root {
    /* --- Core Colors --- */
    --bgColor: rgb(15,40,100);
    --textColor: white;

    /* --- Link Colors --- */
    --linkColor: #87CEEB;       /* Sky Blue */
    --linkHover: #FFFFFF;       /* White */
}

body {
    background-color: var(--bgColor);
    color: var(--textColor);
    font-family: Calibri, 'Carlito', sans-serif;
    font-size: 18px;
    margin: 8px;               /* Standard browser margin */
}

/* Global Link Styles */
a, a:visited {
    color: var(--linkColor);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}

a:hover {
    color: var(--linkHover);
    text-decoration: underline;
    cursor: pointer;
}

/* Lists: the marker inside the line box, so a numbered or bulleted list starts
   exactly where the paragraph text starts (as in Backgammon's manual). */
ol, ul {
    padding-inline-start: 0;
    list-style-position: inside;
}

/* Emphasis tags used in the guide text */
i {
    color: #FFD700;            /* Gold */
    font-weight: bold;
}

e {
    color: rgb(200,255,200);   /* Light green */
    font-weight: bold;
}

red {
    color: rgb(255, 0, 0);
    font-weight: bold;
}

green {
    color: rgb(0, 255, 0);
    font-weight: bold;
}

/* Section anchors clear the top edge when jumped to; the arrow back to the Table of Contents */
h1[id], h2[id], h3[id] { scroll-margin-top: 12px; }
#toc-list, #toc-list ul { padding-inline-start: 40px; list-style-position: outside; }
#toc-list li { margin-bottom: 5px; }
.to-top { text-decoration: none; font-size: 0.9em; margin-left: 8px; color: #6495ED; }
.to-top:hover { text-decoration: none; color: #FFD700; }

/* manual.html, The Control Row: each menu's subheading in white on the color of its menu's title in the
   game's menu bar (--menu, set on the heading); the heading as wide as its text, like the menu title */
h3.menu-head { display: table; color: #fff; background: var(--menu, #1b2a4a); padding: 3px 12px; border-radius: 4px; }
h3.menu-head .to-top, h3.menu-head .to-top:hover { color: #fff; }

/* manual.html (body.guide): the text indented from the headings — paragraphs, lists, tables and
   figures by 2em, the subheadings by 1em; list numbers hang to the left of their text */
body.guide > p, body.guide > ol, body.guide > ul:not(#toc-list), body.guide > table,
body.guide > .keys-cols { margin-left: 2em; margin-right: 1em; }
body.guide figure { margin-left: 2em !important; }   /* (over the figures' own inline margin) */
body.guide > ol, body.guide > ul:not(#toc-list) { padding-inline-start: 1.8em; list-style-position: outside; }
body.guide > ol > li, body.guide > ul:not(#toc-list) > li { margin-bottom: 4px; }
body.guide > h3 { margin-left: 1em; }

/* the kinds of spot: each color's name in white bold on that color, as in the game's Colors menu */
table.spot-kinds { border-collapse: collapse; }
table.spot-kinds th, table.spot-kinds td { padding: 4px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.2); }
table.spot-kinds td.swatch { background: var(--c); color: #fff; font-weight: bold; }

/* Keyboard Commands: the game's own list (index.html #keys-overlay), two columns side by side */
.keys-cols { display: flex; flex-wrap: wrap; gap: 8px 48px; align-items: flex-start; }
.keys-cols table { border-collapse: collapse; max-width: 640px; }
.keys-cols th { text-align: left; padding: 12px 0 4px; font-size: 1.1em; color: #FFD700; }
.keys-cols tr:first-child th { padding-top: 0; }
.keys-cols td { padding: 3px 16px 3px 0; vertical-align: top; }
.keys-cols td:first-child { white-space: nowrap; }
.keys-cols kbd { font: inherit; font-weight: bold; padding: 0 5px; border: 1px solid rgba(255,255,255,.6);
                 border-radius: 3px; background: rgba(255,255,255,.12); }
/* the table of games played to the end (Making Room) */
table.games { border-collapse: collapse; margin: 0.5em 0 1em 2em; }
table.games th, table.games td { padding: 4px 14px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.2); }
table.games th { color: #FFD700; }
table.games td:last-child { text-align: left; }
table.games td img { height: 60px; width: auto; vertical-align: middle; border: 1px solid #6495ED; }