/*
 * main.css
 * Base styles shared across the whole site (cover page and members area).
 */

/* The Duality font, used for all headings.
   "font-display: swap" shows text straight away in a fallback font, then
   swaps to the Duality font once it has downloaded, so text is never hidden. */
@font-face {
    font-family: "Duality";
    src: url("/css/fonts/duality-font.ttf?v=af3bc5e04f5adfda") format("truetype");
    font-display: swap;
}

/* Spacing values kept in one place so they are easy to change. The colours
   (--background-colour, --text-colour and the rest) are in tomeTheme.css, with
   every other colour on the site; text colours meet WCAG AA contrast on the background. */
:root {
    --page-side-padding: 16px;
    --corner-radius: 8px;
}

/* Make element sizes include their padding and borders (easier layouts). */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Guarantee that any element marked with the HTML hidden attribute is never displayed */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background-color: var(--background-colour);
    color: var(--text-colour);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

/* Every heading uses the Duality font. The font only has a regular weight,
   so bold is switched off to stop browsers faking a blurry bold version.

   SITE RULE (see CLAUDE.md): text of several words in the Duality font must
   use this spacing, because the font sets words close together and letters
   slightly apart, which is hard to read. The values were measured from the
   font itself (duality-font.ttf):
    - A space is 0.15em wide, so adding 0.15em makes every space count as two.
    - The average gap between letters is 0.078em. Bringing letters 1.2 times
      closer makes it 0.065em, i.e. 0.013em less.
   letter-spacing is also added after each space, so the word spacing gets
   that 0.013em back, keeping spaces at exactly double width.
   "em" values scale with the text size, so this works at any heading size.
   The "Duality" title (the logo) keeps the font's own spacing. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Duality", Georgia, serif;
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: -0.013em;
    word-spacing: 0.163em;
}

h1 {
    color: var(--accent-colour);
}

/* The Duality font draws lower-case letters quite small, so section
   headings (and subheadings) are enlarged to keep them easy to read. */
h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

a {
    color: var(--accent-colour);
}

/* A clearly visible outline for keyboard users (accessibility). */
:focus-visible {
    outline: 3px solid var(--accent-colour);
    outline-offset: 2px;
}

/* ---------- Frosted glass panels ---------- */

/* An almost clear panel that lightly blurs whatever is behind it, so the
   background is still visible, just softened. Used on light pages (the
   sign-in box, the members area header). Its text is dark because the
   light page shows through. */
.glass-panel {
    border: 1px solid rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(4px); /* Needed by older Safari versions */
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); /* Lifts the panel off the page */
    color: var(--plain-ink-colour);
}

/* ---------- Buttons and form fields ---------- */

.button {
    padding: 10px 20px;
    border: none;
    /* Slightly squarer than the panels, like the "Sign in" button: every
       button on the site has the same corners (owner's choice, 5 Oct 2026). */
    border-radius: 4px;
    background-color: var(--accent-colour);
    color: var(--accent-text-colour);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.button:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* A quieter button, for less important actions such as signing out. */
.button-secondary {
    background-color: transparent;
    color: var(--text-colour);
    border: 1px solid var(--border-colour);
}

.form-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.form-input {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid var(--border-colour);
    border-radius: var(--corner-radius);
    background-color: var(--background-colour);
    color: var(--text-colour);
    font: inherit;
}

/* Error messages shown under forms. */
.form-message {
    min-height: 1.5em;
    margin: 0 0 12px;
    color: var(--error-colour);
}

/* Small explanatory text under a form field. */
.form-hint {
    margin: 0 0 16px;
    color: var(--plain-muted-text-colour);
    font-size: 0.875rem;
}

/* A checkbox with its label beside it. */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.checkbox-row input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--plain-link-colour);
}

.checkbox-row label {
    font-weight: 600;
}

/* ---------- Help tips: a (?) that explains something (see /js/helpTip.js) ---------- */

.help-tip {
    position: relative; /* The explanation is positioned relative to this */
    display: inline-flex;
}

/* The circled question mark. 24px meets the WCAG 2.2 minimum target size. */
.help-tip-button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid var(--plain-link-colour);
    border-radius: 50%;
    background-color: transparent;
    color: var(--plain-link-colour);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

/* The explanation box, hidden until needed. It appears just below the (?). */
.help-tip-text {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 10;
    width: max-content;
    max-width: min(260px, 80vw);
    padding: 10px 12px;
    border-radius: var(--corner-radius);
    background-color: var(--plain-ink-colour);
    color: var(--plain-white-colour);
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, 8px);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* An invisible strip filling the 8px gap between the (?) and the box, so the
   mouse can travel from one to the other without the box disappearing. */
.help-tip-text::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 8px;
}

/* Shown on hover, on keyboard focus, or when opened by a click/tap... */
.help-tip:hover .help-tip-text,
.help-tip:focus-within .help-tip-text,
.help-tip.is-open .help-tip-text {
    visibility: visible;
    opacity: 1;
}

/* ...unless the user has just closed it (Escape or a second click). */
.help-tip.is-dismissed:not(.is-open) .help-tip-text {
    visibility: hidden;
    opacity: 0;
}

/* Respect users who ask their device for reduced motion (WCAG 2.3.3).
   Site-wide, so no page's hover lifts, fades or slides are missed: every
   transition and CSS animation stops, and changes happen at once. Every page
   loads this file. The game's canvas animations (pings, the turn flame, the
   selected tokens' frame) check the same setting in their own code. Nothing
   in the site waits for a transition or animation to end, so stopping them
   changes no behaviour, only the look. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* A list of problems shown when a form could not be saved. */
.form-problems {
    margin-bottom: 16px;
}

.form-problems:empty {
    display: none;
}

.form-problems p,
.form-problems ul {
    margin: 0;
}

/* Live feedback on a new password (see /js/shared/passwordFeedback.js). */
.password-feedback {
    margin: 0 0 16px;
    padding-left: 20px;
    font-size: 0.875rem;
}

.password-feedback:empty {
    display: none;
}

/* ---------- Forms on light "glass" panels ---------- */

/* Headings on glass panels are dark, like their text. */
.glass-panel h1,
.glass-panel h2 {
    color: var(--plain-black-colour);
}

/* Links inside glass panels in the page content are dark blue: the site's
   usual light purple is too faint on a light background (WCAG AA contrast).
   "main" limits this to the page content, so the site header (also a glass
   panel, but outside <main>) keeps its own colours. */
main .glass-panel a {
    color: var(--plain-link-colour);
}

/* Light input boxes with dark text. The mid-grey border keeps each box's
   outline visible enough for low-vision users (WCAG non-text contrast 3:1). */
.glass-panel .form-input {
    border-color: var(--plain-grey-border-colour);
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--plain-ink-colour);
}

/* Darker reds and greens, readable on the light background. */
.glass-panel .form-message,
.glass-panel .form-problems,
.glass-panel .password-feedback {
    color: var(--plain-error-colour);
}

.glass-panel .password-feedback.is-acceptable {
    color: var(--plain-success-colour);
}

/* Secondary buttons with dark text and a mid-grey outline. */
.glass-panel .button-secondary {
    border-color: var(--plain-grey-border-colour);
    color: var(--plain-ink-colour);
}

/* The light blue main button used on light pages, with dark text. */
.button-light-blue {
    background-color: var(--plain-light-blue-colour);
    color: var(--plain-light-blue-ink-colour);
}

/* Text that is hidden visually but still read out by screen readers.
   Pinned to the top left of whatever contains it (31 Oct 2026): without that it sat where it would
   have been in the text, and inside a scrolling list (the roll log's words for each roll) it could
   escape the list's scroll box, so a long log made the whole game page taller, with empty space
   below. Where it sits makes no difference to screen readers. */
.visually-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Danger buttons and pop-ups (used by My Account and the forums) ---------- */

/* A red button for actions that can't be undone, such as deleting. */
.button-danger {
    background-color: var(--plain-error-colour);
    color: var(--plain-white-colour);
}

/* A frosted glass pop-up in the middle of the screen. */
.glass-dialog {
    width: min(420px, calc(100vw - 32px));
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--corner-radius);
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--plain-ink-colour);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.glass-dialog h2 {
    margin-top: 0;
    color: var(--plain-black-colour);
}

/* Dark blue links: the site's usual light purple is too faint on the light
   pop-up (WCAG AA contrast), as on the glass panels. */
.glass-dialog a {
    color: var(--plain-link-colour);
}

/* Dims the page behind the pop-up. */
.glass-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

.glass-dialog .form-input {
    border-color: var(--plain-grey-border-colour);
    background-color: var(--plain-white-colour);
    color: var(--plain-ink-colour);
}

.glass-dialog .form-problems {
    color: var(--plain-error-colour);
}

/* Dark text on secondary buttons, readable on the light pop-up. */
.glass-dialog .button-secondary {
    border-color: var(--plain-grey-border-colour);
    color: var(--plain-ink-colour);
}