/* ============================================================
   recallgym — civil service

   The look: plain type, black on white, a black header bar with
   a blue rule, blue underlined links, green primary buttons with
   a hard bottom edge, and a yellow-and-black focus state on
   anything you are currently working with — the conventions of
   government digital services, where the job is to be read
   quickly and used without thinking. No government's name,
   crest or typeface is used; only the conventions.

   Built as overrides on top of styles.css, scoped to
   html[data-theme="civil"], which index.html sets statically.
   ============================================================ */

/* The header is a full-width bar rather than a ruled column. */
[data-theme="civil"] .masthead {
  width: auto;
  max-width: none;
  padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}

:root[data-theme="civil"] {
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f2f1;
  --ink: #0b0c0c;
  --ink-soft: #0b0c0c;
  --muted: #505a5f;
  --rule: #b1b4b6;
  --rule-strong: #0b0c0c;
  --accent: #1d70b8;
  --accent-ink: #ffffff;
  --accent-wash: #fff6b3;
  --accent-soft: #5694ca;
  --correct: #00703c;
  --correct-wash: #cce2d8;
  --wrong: #d4351c;
  --wrong-wash: #f6d7d2;
  --shadow: none;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-numeric: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display-weight: 700;
  --radius: 0;
  --button-hover: #005a30;
  --danger-hover: #aa2a16;
  --card-face: #ffffff;
  --card-red: #d4351c;
  --card-shadow: none;
  --focus: #ffdd00;
  --maxw: 960px;
}

[data-theme="civil"] body { font-size: 19px; line-height: 1.32; }

[data-theme="civil"] .masthead {
  background: #0b0c0c;
  border-bottom: 10px solid #1d70b8;
  padding-top: 14px;
  padding-bottom: 12px;
  align-items: center;
}
[data-theme="civil"] .masthead__mark { color: #fff; font-size: 1.5rem; letter-spacing: 0; }
[data-theme="civil"] .masthead__mark span { color: #fff; font-weight: 400; }
[data-theme="civil"] .masthead__nav a {
  color: #fff; text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 700;
  border-bottom: 0; text-decoration: none;
}
[data-theme="civil"] .masthead__nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
[data-theme="civil"] .masthead__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
[data-theme="civil"] .account { border-left-color: #505a5f; }
[data-theme="civil"] .account__name { color: #fff; font-weight: 400; }
[data-theme="civil"] .account__out { color: #fff; text-transform: none; letter-spacing: 0; font-size: 1rem; text-decoration: underline; }
[data-theme="civil"] .masthead__nav .account__signin { color: #fff; }

/* Links are blue and underlined, always. */
[data-theme="civil"] main a:not(.button):not(.game) { color: #1d70b8; text-decoration: underline; text-underline-offset: .15em; }
[data-theme="civil"] main a:not(.button):not(.game):hover { color: #003078; text-decoration-thickness: 3px; }

/* The yellow-and-black focus state, everywhere. */
[data-theme="civil"] :focus-visible { outline: 3px solid var(--focus); outline-offset: 0; box-shadow: 0 4px 0 #0b0c0c; }
[data-theme="civil"] a:focus-visible { background: var(--focus); color: #0b0c0c !important; text-decoration: none; }
[data-theme="civil"] .field:focus, [data-theme="civil"] .recall__input:focus, [data-theme="civil"] .nameform__input:focus {
  outline: 3px solid var(--focus); outline-offset: 0; box-shadow: inset 0 0 0 2px #0b0c0c;
}

[data-theme="civil"] .display { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0; line-height: 1.04; margin-bottom: 20px; }
[data-theme="civil"] .kicker { color: #505a5f; font-size: 1.15rem; font-weight: 400; letter-spacing: 0; text-transform: none; margin-bottom: 4px; }
[data-theme="civil"] .lede { color: #0b0c0c; font-size: 1.2rem; max-width: 40em; }
[data-theme="civil"] .note { color: #505a5f; font-size: 1rem; }
[data-theme="civil"] .control__label, [data-theme="civil"] .gamebar__label {
  color: #0b0c0c; text-transform: none; letter-spacing: 0; font-size: 1.05rem; font-weight: 700;
}
[data-theme="civil"] .backlink { color: #0b0c0c !important; font-size: 1rem; }

/* Buttons: green primary with a hard bottom edge; grey secondary. */
[data-theme="civil"] .button {
  font-size: 1.05rem; font-weight: 400; padding: 9px 14px 8px;
  background: #f3f2f1; color: #0b0c0c; border: 2px solid transparent; border-radius: 0;
  box-shadow: 0 2px 0 #929191; text-decoration: none !important;
}
[data-theme="civil"] .button:hover { background: #dbdad9; border-color: transparent; }
[data-theme="civil"] .button--primary { background: #00703c; color: #fff; box-shadow: 0 2px 0 #002d18; }
[data-theme="civil"] .button--primary:hover { background: #005a30; }
[data-theme="civil"] .button--danger { background: #d4351c; color: #fff; box-shadow: 0 2px 0 #55150b; }
[data-theme="civil"] .button:focus-visible { background: var(--focus); color: #0b0c0c; box-shadow: 0 2px 0 #0b0c0c; outline: none; }

[data-theme="civil"] .field, [data-theme="civil"] .recall__input, [data-theme="civil"] .nameform__input,
[data-theme="civil"] .control__number, [data-theme="civil"] .span__input {
  border: 2px solid #0b0c0c; border-radius: 0; background: #fff;
}

/* Choices look like the radio/tile options of a form, not like pills. */
[data-theme="civil"] .chip, [data-theme="civil"] .level, [data-theme="civil"] .segment {
  border: 2px solid #0b0c0c; border-radius: 0; background: #fff; color: #0b0c0c; font-weight: 400;
}
[data-theme="civil"] .chip--active, [data-theme="civil"] .level--active, [data-theme="civil"] .segment--active {
  background: #0b0c0c; color: #fff; font-weight: 700;
}
[data-theme="civil"] .level--cleared { background: #cce2d8; border-color: #00703c; }
[data-theme="civil"] .level--active .level__count { color: #b1b4b6; }
[data-theme="civil"] .segmented { border: 0; gap: 10px; }
[data-theme="civil"] .segment { border-right: 2px solid #0b0c0c; }

/* Hub: a plain list of links under bold section headings. */
[data-theme="civil"] .hub { border-top: 0; }
[data-theme="civil"] .hub__section { border-bottom: 1px solid #b1b4b6; }
[data-theme="civil"] .hub__heading { font-size: 1.6rem; letter-spacing: 0; }
[data-theme="civil"] .hub__blurb { color: #505a5f; font-size: 1rem; line-height: 1.4; }
[data-theme="civil"] .game__title { color: #1d70b8; text-decoration: underline; text-underline-offset: .15em; font-size: 1.15rem; }
[data-theme="civil"] .game:hover .game__title { color: #003078; text-decoration-thickness: 3px; }
[data-theme="civil"] .game__line { color: #0b0c0c; font-size: 1rem; }
[data-theme="civil"] .game__best {
  justify-self: start; margin-top: 4px; padding: 2px 8px;
  background: #cce2d8; color: #005a30; font-size: .85rem; font-weight: 700;
}
[data-theme="civil"] .game__best--none { background: #f3f2f1; color: #505a5f; }

/* Play */
[data-theme="civil"] .gamebar__time { font-weight: 700; }
[data-theme="civil"] .gamebar__rule { height: 6px; background: #b1b4b6; }
[data-theme="civil"] .gamebar__rule span { background: #1d70b8; }
[data-theme="civil"] .digit { font-weight: 400; }
[data-theme="civil"] .digit--on, [data-theme="civil"] .wordcol__w--on {
  background: var(--focus); color: #0b0c0c; box-shadow: inset 0 -4px 0 #0b0c0c;
}
[data-theme="civil"] .digit--cursor { background: var(--focus); border-bottom: 4px solid #0b0c0c !important; }
[data-theme="civil"] .slot--cursor { border: 3px solid #0b0c0c; background: var(--focus); }
[data-theme="civil"] .pcard { border: 2px solid #0b0c0c; border-radius: 6px; }
[data-theme="civil"] .photo, [data-theme="civil"] .face { border-radius: 0; box-shadow: none; }
[data-theme="civil"] .pager__dot { border-radius: 0; }
[data-theme="civil"] .tile { border-radius: 0; background: #f3f2f1; }
[data-theme="civil"] .tile--lit { background: #0b0c0c !important; }
[data-theme="civil"] .tile--hit { background: #1d70b8 !important; }
[data-theme="civil"] .tile--missed { box-shadow: inset 0 0 0 4px #1d70b8; color: #1d70b8; }
[data-theme="civil"] .life { border-radius: 0; background: #0b0c0c; }

/* Results: the green confirmation panel. */
[data-theme="civil"] .scoreline {
  background: #00703c; color: #fff; text-align: center;
  padding: 28px 24px 30px; border-bottom: 0; margin-bottom: 30px;
}
[data-theme="civil"] .scoreline .kicker,
[data-theme="civil"] .scoreline__detail,
[data-theme="civil"] .scoreline .savenote,
[data-theme="civil"] .scoreline .savenote a { color: #fff !important; }
[data-theme="civil"] .scoreline__pct { font-size: clamp(3.5rem, 10vw, 5rem); letter-spacing: 0; }
[data-theme="civil"] .savenote--best strong { color: #fff; }

[data-theme="civil"] .scores th, [data-theme="civil"] .trials th {
  color: #0b0c0c; text-transform: none; letter-spacing: 0; font-size: 1rem; border-bottom: 1px solid #b1b4b6;
}
[data-theme="civil"] .scores__game { color: #1d70b8; text-decoration: underline; }
[data-theme="civil"] .spark polyline { stroke: #1d70b8; }
[data-theme="civil"] .spark circle { fill: #1d70b8; }
[data-theme="civil"] .setup-card { border-top: 0; border-left: 10px solid #b1b4b6; padding: 4px 0 4px 18px; }
[data-theme="civil"] .tier--active { background: #f3f2f1; border-left-color: #1d70b8; }
[data-theme="civil"] .entry--missed { background: #f3f2f1; border-left-color: #d4351c; }

/* Blue means "link" here, so a near-miss gets amber rather than the accent. */
[data-theme="civil"] .entry__mark--typo { color: #a35200; }

/* Where a guest would otherwise hit gated face photos. */
.locknote { margin-top: 24px; padding: 16px 0 0 18px; border-left: 10px solid var(--rule); }
.locknote p { margin: 0 0 14px; max-width: 34em; }

/* The account line sits directly under the intro, not a full paragraph gap away. */
.lede + .home__status { margin: -16px 0 30px; }