/* Scordleizer site styles */

:root
{
    --graphite: #333232;   /* background */
    --olive: #778472;      /* secondary background */
    --terracotta: #d95d39; /* header text */
    --sky: #5bc0eb;        /* main text */
    --banana: #fce762;     /* accent: borders / focus / link hover (used sparingly) */
    --paper: #eef0ee;      /* soft warm off-white: field backgrounds + button text (gentler than #fff) */
    --trend-up: #5cc66f;   /* score trend: up (green, legible on the dark background) */
    --trend-down: #ff6f5e; /* score trend: down (red) */
    --trend-flat: #9aa0a0; /* score trend: no change / nothing to compare (grey) */
}

/* score trend indicator (see sdlz_trend_indicator) -- a small coloured arrow/dash next to a score */
.trend
{
    margin-left: 0.35rem;
    font-size: 0.85em;
    line-height: 1;
    white-space: nowrap;
}

.trend-up   { color: var(--trend-up); }
.trend-down { color: var(--trend-down); }
.trend-none { color: var(--trend-flat); }

/*
 * Overpass (self-hosted so content blockers can't break it). Variable fonts cover weights 100-900
 * in a single file each; the italic file only downloads when italic text is actually rendered.
 * Paths are relative to this stylesheet (view/includes/css/).
 */
@font-face
{
    font-family: 'Overpass';
    src: url('../font/Overpass/Overpass-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'Overpass';
    src: url('../font/Overpass/Overpass-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

html
{
    background-color: var(--graphite);
}

body
{
    background-color: var(--graphite);
    color: var(--sky);
    font-family: 'Overpass', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem;
}

h1, h2, h3
{
    color: var(--terracotta);
}

a
{
    color: var(--sky);
}

a:hover
{
    color: var(--banana);
}

/* ---- top bar / logo / nav (includes/topbar.php) ---- */
.topbar
{
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--olive);
}

.logo
{
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 1.5rem;
}

/* SCORD: each letter in its own olive box with paper-colored text (loosely Wordle-style) */
.logo-tiles
{
    display: inline-flex;
    gap: 4px;
}

.logo-tile
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.6em;
    height: 1.6em;
    /* uppercase letters render high in the line box (empty descender space below the baseline);
       tighten the line height and nudge down a touch to optically center. tweak padding-top to taste. */
    line-height: 1;
    padding-top: 0.14em;
    background-color: var(--olive);
    color: var(--paper);
    font-weight: 800;
    text-transform: uppercase;
    border-radius: .5em;
}

/* Wordle score rendered as digit tiles (overview Connected Accounts table). Deliberately mirrors the
   .logo-tile look so the score reads like the "SCORD" logo blocks; digits sit a touch higher than the
   caps nudge, hence the slightly smaller padding-top. */
.score-tiles
{
    display: inline-flex;
    gap: 4px;
}

.score-tile
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.6em;
    height: 1.6em;
    line-height: 1;
    padding-top: 0.08em;
    background-color: var(--olive);
    color: var(--paper);
    font-weight: 800;
    border-radius: .5em;
}

/* compact per-game score list shown inside a cell (overview Connected Accounts "Scores" column).
   Reads as a plain sub-list: overrides the global bordered/olive-header table styling so there are no
   borders and the game-name column matches the normal text colour (no header background/colour). */
.score-subtable
{
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0;
}
.score-subtable th,
.score-subtable td
{
    border: 0;
    background: none;
    color: var(--sky);
    padding: 0.12rem 0;
    vertical-align: middle;
    /* keep the score tiles and their trend arrow on one line (they're separate inline pieces; in this
       narrow cell the line would otherwise break between them, dropping the arrow below the score) */
    white-space: nowrap;
}
.score-subtable th
{
    text-align: left;
    font-weight: normal;
    white-space: nowrap;
    padding-right: 0.7rem;
}

/* leizer: italic, terracotta, sized up a touch to visually balance the all-caps tiles */
.logo-rest
{
    position: relative;
    top: 0.07em;        /* drop it to line up with the down-nudged SCORD letters (tweak to taste) */
    margin-left: 4px;
    color: var(--olive);
    font-style: italic;
    font-weight: 700;
    line-height: 1;     /* match the tiles so they sit level */
    font-size: 1.15em;  /* even out vs the taller uppercase SCORD (tweak to taste) */
    letter-spacing: 0.2em;
    padding-left: 0.2em;
}

.topnav
{
    margin-top: 0.6rem;
}

.topnav a
{
    margin-right: 1.1rem;
}

/* logout posts a CSRF-protected form; render its <button> so it matches the nav text links */
.nav-logout-form
{
    display: inline;
    margin: 0;
}

.topnav button.linklike,
button.linklike
{
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--sky);
    cursor: pointer;
}

.topnav button.linklike:hover,
button.linklike:hover
{
    color: var(--banana);
}

/* highlight the current page (and the connected-account dropdown when on an account page) */
.topnav a.active,
.nav-dropdown.active > summary
{
    color: var(--banana);
    font-weight: 700;
}

/* connected-account dropdown: a <details> menu of account links */
.nav-dropdown
{
    display: inline-block;
    position: relative;
    margin-right: 1.1rem;
}

.nav-dropdown > summary
{
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--sky);
}

.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::marker { content: ""; }
.nav-dropdown > summary::after { content: " \25be"; }  /* down caret */
.nav-dropdown > summary:hover { color: var(--banana); }

.nav-menu
{
    position: absolute;
    left: 0;
    margin-top: 0.4rem;
    min-width: 12rem;
    background-color: var(--graphite);
    border: 1px solid var(--banana);
    border-radius: 4px;
    padding: 0.3rem 0;
    z-index: 10;
}

.nav-menu a
{
    display: block;
    margin-right: 0;
    padding: 0.3rem 0.8rem;
    white-space: nowrap;
}

/* the connected account whose page is currently open is highlighted in the dropdown */
.nav-menu a.active
{
    color: var(--banana);
    font-weight: 700;
}

/* admin section sub-nav (admin.php) */
.admin-subnav
{
    margin: 0.25rem 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--olive);
}

.admin-subnav a
{
    margin-right: 1.1rem;
}

.admin-subnav a.active
{
    color: var(--banana);
    font-weight: 700;
}

label
{
    display: inline-block;
    margin: 0.15rem 0.5rem 0.15rem 0;
}

input, select, textarea
{
    background-color: var(--paper);
    color: var(--graphite);
    border: 1px solid var(--banana);
    border-radius: 3px;
    padding: 0.35rem 0.5rem;
    font-size: 1rem;
    font-family: inherit;
}

/* email template manager: full-width fields; monospace for the HTML/text editors */
.et-wide
{
    width: 100%;
    box-sizing: border-box;
}

.et-code
{
    width: 100%;
    box-sizing: border-box;
    font-family: monospace;
    font-size: 0.9rem;
}

button
{
    background-color: var(--terracotta);
    color: var(--paper);
    border: 1px solid var(--banana);
    border-radius: 3px;
    padding: 0.4rem 0.9rem;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
}

button:hover
{
    background-color: #c14e2d; /* darker terracotta */
}

/* an anchor styled as a call-to-action button (e.g. landing-page CTAs) */
a.btn
{
    display: inline-block;
    background-color: var(--terracotta);
    color: var(--paper);
    border: 1px solid var(--banana);
    border-radius: 3px;
    padding: 0.5rem 1.1rem;
    font-weight: 700;
    text-decoration: none;
}

a.btn:hover
{
    background-color: #c14e2d;
    color: var(--paper);
}

/* a <summary> styled to look like a button (e.g. the "Link new NYT Games Account" disclosure) */
summary.btn-link
{
    display: inline-block;
    background-color: var(--terracotta);
    color: var(--paper);
    border: 1px solid var(--banana);
    border-radius: 3px;
    padding: 0.4rem 0.9rem;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    list-style: none; /* hide the default disclosure triangle */
}

summary.btn-link::-webkit-details-marker
{
    display: none;
}

summary.btn-link::marker
{
    content: "";
}

summary.btn-link:hover
{
    background-color: #c14e2d;
}

/* link-account disclosure: separate it from the account list, hide the button while open,
   and set the form panel off using the olive secondary background */
.link-account
{
    margin-top: 1.5rem;
}

details[open] summary.btn-link
{
    display: none;
}

.link-account-panel
{
    position: relative;
    background-color: var(--olive);
    color: var(--graphite);
    border: 1px solid var(--banana);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

/* reusable "Tips to improve your NYT Games score" callout (includes/score_tips.php) */
.score-tips
{
    background-color: var(--olive);
    color: var(--graphite);
    border: 1px solid var(--banana);
    border-radius: 4px;
    padding: 0.5rem 1.25rem 1rem;
    margin-top: 1.5rem;
}

.score-tips h2
{
    /* the default heading colour (terracotta) clashes on the olive panel -- use the panel's dark text
       colour so the title reads calmly */
    color: var(--graphite);
    margin-bottom: 0.4rem;
}

.score-tips ul
{
    margin: 0.5rem 0;
}

.score-tips li
{
    margin-bottom: 0.35rem;
}

.score-tips-note
{
    margin-bottom: 0;
    font-style: italic;
}

/* the "x" close control pinned to the panel's top-right corner */
.panel-close
{
    position: absolute;
    top: 0.25rem;
    right: 0.4rem;
    background: transparent;
    border: none;
    color: var(--graphite);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}

.panel-close:hover
{
    color: var(--terracotta);
    background: transparent;
}

input:focus, select:focus, button:focus
{
    outline: 2px solid var(--banana);
    outline-offset: 1px;
}

/* keyboard focus ring for links too (keyboard-only via :focus-visible), matching the controls above, so
   tabbing through the nav/links is clearly visible once Safari/macOS keyboard navigation is enabled. */
a:focus-visible
{
    outline: 2px solid var(--banana);
    outline-offset: 2px;
    border-radius: 2px;
}

/* data tables: olive header (secondary bg), sky body text on the graphite surface, banana grid lines */
table
{
    border-collapse: collapse;
    margin: 0.5rem 0;
}

th, td
{
    border: 1px solid var(--banana);
    padding: 0.4rem 0.6rem;
    text-align: left;
}

th
{
    background-color: var(--olive);
    color: var(--graphite);
}

td
{
    color: var(--sky);
}

/* status / error messages (rendered with role attributes in the views) */
[role="status"] strong
{
    color: var(--banana);
}

[role="alert"] strong
{
    color: var(--terracotta);
}

/*
 * Hide the reCAPTCHA badge. Permitted by Google's terms ONLY because the
 * "protected by reCAPTCHA ... Privacy Policy / Terms of Service" text is shown
 * on the page (see register.php / login.php). If that text is ever removed,
 * the badge must be made visible again.
 */
.grecaptcha-badge
{
    visibility: hidden;
}

/* the "protected by reCAPTCHA ..." disclosure text under the forms */
.recaptcha-disclosure
{
    font-size: smaller;
    color: var(--olive);
}

/* a bordered card for grouping account content (reusable) */
.connected-account
{
    border: 1px solid var(--banana);
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
}

/* forms shown side by side (e.g. Sync / Disconnect buttons) */
.inline-form
{
    display: inline;
}

/* ---- admin Site Stats ---- */
.stat-period-form
{
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    margin: 0 0 0.75rem 0;
}

.stat-range
{
    color: var(--paper);
    font-size: 0.9rem;
    margin: 0 0 1.25rem 0;
}

.stat-swatch
{
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    margin-right: 0.3rem;
    vertical-align: baseline;
}

/* responsive grid of charts: one column on narrow screens, two when there's room */
.stat-charts
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
}

.stat-chart
{
    margin: 0;
    padding: 0.75rem;
    background: var(--graphite);
    border: 1px solid var(--olive);
    border-radius: 6px;
}

.stat-chart figcaption
{
    color: var(--terracotta);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.stat-chart svg
{
    display: block;
    width: 100%;
    height: auto;
}

.stat-legend
{
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--paper);
}

.stat-legend-item
{
    margin-right: 1rem;
    white-space: nowrap;
}

/* ---- connected-account management actions ---- */
.account-actions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

button:disabled,
.account-actions button:disabled
{
    opacity: 0.5;
    cursor: not-allowed;
}

.sync-cooldown
{
    color: var(--banana);
    font-size: 0.9rem;
    margin: 0.5rem 0 0 0;
}

/* ---- connected-account share controls ----
   neutral class names (no "share"/"social") so content/ad blockers don't cosmetically hide them.
   Compact, lightweight "ghost" pills so the (many) options read as a tidy set rather than a wall. */

/* per-game "Share..." popover in the scores table's Social column.
   Neutral class names (no "share"/"social") so content/ad blockers don't cosmetically hide the control. */
.score-pop
{
    position: relative;
    display: inline-block;
}

.score-pop-trigger
{
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--sky);
    text-decoration: underline; /* signal it's clickable */
    white-space: nowrap;
    cursor: pointer;
}
.score-pop-trigger:hover { color: var(--banana); }

/* the options render as an overlay anchored to the trigger -- it does NOT push the table row open.
   right: 0 anchors to the right edge (Social is the last column) so the panel opens leftward, on-screen.
   Hidden until revealed; top:100% with no gap keeps trigger->panel hover continuous (no dead zone). */
.score-pop > .score-actions
{
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin: 0;
    z-index: 20;
    width: max-content;
    max-width: min(92vw, 26rem);
    background-color: var(--graphite);
    border: 1px solid var(--banana);
    border-radius: 6px;
    padding: 0.6rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
/* revealed by tap/click/keyboard-activate (JS toggles .is-open) */
.score-pop.is-open > .score-actions { display: flex; }
/* and revealed on hover, but only on devices that actually have a hover-capable pointer (not touch) */
@media (hover: hover)
{
    .score-pop:hover > .score-actions { display: flex; }
}

/* connected-account header meta: each key/value on its own line, value highlighted */
.account-meta
{
    margin: 0.15rem 0;
}
.account-meta-value
{
    font-weight: 700;
    color: var(--banana);
}
.account-meta-note
{
    color: var(--olive);
}

/* small muted note (e.g. the share-preview explainer under the scores table) */
.env-note
{
    margin: 0.4rem 0 0;
    max-width: 640px;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--olive);
}

/* centered modal dialog (used for Facebook / Instagram paste instructions) */
.modal
{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal[hidden] { display: none; } /* re-assert: .modal's display:flex would otherwise beat [hidden] */

.modal-backdrop
{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.modal-box
{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    background-color: var(--graphite);
    color: var(--sky);
    border: 1px solid var(--banana);
    border-radius: 8px;
    padding: 1.25rem 1.3rem 1.4rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modal-title
{
    margin: 0 0 0.6rem;
    color: var(--terracotta);
    font-size: 1.2rem;
}

.modal-body { margin: 0; line-height: 1.5; }

.modal-close
{
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    background: none;
    border: 0;
    padding: 0.2rem 0.45rem;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--sky);
    cursor: pointer;
}
.modal-close:hover { color: var(--banana); }

.score-actions
{
    display: flex;
    flex-direction: column;     /* stack the button rows */
    gap: 0.4rem;
    align-items: flex-start;
    margin: 0.5rem 0;
    max-width: 640px;
}

/* one line of share buttons; still wraps if the viewport is too narrow to fit the row */
.score-actions-row
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.score-action
{
    display: inline-block;
    background-color: transparent;
    color: var(--sky);
    border: 1px solid var(--olive);
    border-radius: 999px;            /* pill */
    padding: 0.28rem 0.8rem;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.35;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.score-action:hover,
.score-action:focus-visible
{
    background-color: var(--terracotta);
    color: var(--paper);
    border-color: var(--banana);
}

.copy-note
{
    color: var(--banana);
    font-size: 0.85rem;
    margin: 0.35rem 0 0 0;
}

/* ---- terms of service viewer + site footer ---- */
.tos-doc
{
    margin-bottom: 2rem;
}

.tos-meta
{
    color: var(--olive);
    font-size: 0.85rem;
    margin: 0 0 0.75rem 0;
}

.tos-body
{
    max-width: 760px;
    line-height: 1.55;
    /* render the (often black-on-white) document content on a paper card so it's always readable
       against the dark site theme, regardless of the source document's own colors */
    background-color: var(--paper);
    color: var(--graphite);
    border: 1px solid var(--olive);
    border-radius: 4px;
    padding: 1rem 1.25rem;
}

.tos-body a
{
    color: var(--terracotta);
}

.site-footer
{
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--olive);
    color: var(--paper);
    font-size: 0.85rem;
}

.site-footer a
{
    color: var(--sky);
}

/* ---- cookie-consent banner (Google Analytics) ---- */
.cookie-consent
{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    background-color: var(--olive);
    color: var(--graphite);
    border-top: 1px solid var(--banana);
    font-size: 0.9rem;
}

.cookie-consent a
{
    color: var(--graphite);
    text-decoration: underline;
}

.cookie-consent-actions
{
    display: inline-flex;
    gap: 0.5rem;
}