/* How do you look on Google.

   Four era themes over one set of markup. Nothing here changes structure,
   order or wording: an era is colour, type, border and spacing only. Every
   era keeps real text contrast and a visible focus ring, because a period
   joke is not a reason to lock somebody out. */

/* ------------------------------------------------------- shared skeleton */

.g-page {
  position: relative;
}

.g-eras {
  margin: 0 0 var(--s-6);
  padding: 0;
  border: 0;
}

.g-eras__legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0 0 var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
}

.g-eras__pills {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.g-era {
  position: relative;
  display: inline-flex;
}

.g-era input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.g-era span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-control);
  border-radius: var(--r-pill);
  color: var(--text-1);
  font-size: var(--t-sm);
  font-weight: 500;
}

.g-era input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.g-era input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.g-quiz {
  margin: 0;
}

.g-q {
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

/* A legend is normally painted straddling the top border, half of it
   outside the card. That is invisible when the card and the page are the
   same colour and unreadable when they are not, so the legend is floated
   into ordinary flow instead and the choices clear it. */
.g-q__legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
  color: var(--text-1);
  font-weight: 600;
  line-height: 1.45;
}

.g-q__choices {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-block-start: var(--s-3);
}

.g-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  color: var(--text-1);
  cursor: pointer;
}

.g-radio input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.g-radio:hover {
  background: var(--bg-2);
}

.g-quiz__actions {
  margin-block-start: var(--s-5);
}

/* The submit error sits on the page background, which is a different colour
   in every era, so it carries its own surface and keeps one known pair. */
.g-quiz .c-error:not(:empty) {
  display: block;
  margin-block-start: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--fail);
  border-radius: var(--r-control);
  color: var(--fail);
}

/* ---------------------------------------------------------- the result */

.g-result {
  margin-block: var(--s-6);
}

.g-result > * + * {
  margin-block-start: var(--s-5);
}

.g-result__head {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.g-result__gradeText {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
}

.g-result__verdict {
  font-size: var(--t-lg);
  color: var(--text-1);
}

.g-result__gapsTitle {
  margin-block-end: calc(var(--s-5) * -1 + var(--s-3));
}

.g-gaps {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-1);
}

.g-gaps > li + li {
  border-block-start: 1px solid var(--line);
}

.g-gap {
  padding: var(--s-4) var(--s-5);
}

.g-gap__q {
  color: var(--text-1);
  font-weight: 600;
}

.g-gap__advice {
  margin-block-start: var(--s-2);
  color: var(--text-2);
}

.g-gap__more {
  margin-block-start: var(--s-3);
  font-size: var(--t-sm);
}

.g-gap__more > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  cursor: pointer;
}

.g-gap__more > summary:hover {
  color: var(--text-1);
}

.g-gap__list {
  margin: var(--s-2) 0 0;
  padding-inline-start: var(--s-5);
  color: var(--text-2);
}

.g-gap__list li + li {
  margin-block-start: var(--s-1);
}

.g-gap__foot {
  margin-block-start: var(--s-3);
  color: var(--text-1);
}

.g-principles {
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card);
  color: var(--text-2);
}

.g-result__share,
.g-result__clear {
  color: var(--text-2);
}

/* ------------------------------------------------------------ art slots */

/* Decoration only. Absolutely positioned so a missing file cannot leave a
   hole, and a background image never shows a broken image icon. Each slot
   paints only in its own era, so nothing is fetched for eras nobody picks.
   Files arrive later per project 09 CONFIG C1. */
.g-art {
  display: none;
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}

[data-era="1995"] .g-art--1995 {
  display: block;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  background-image: url("/assets/img/grader/1995-corner.png");
}

[data-era="2005"] .g-art--2005 {
  display: block;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background-image: url("/assets/img/grader/2005-header.png");
  background-position: center;
}

[data-era="2015"] .g-art--2015 {
  display: block;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background-image: url("/assets/img/grader/2015-hero.png");
  background-position: center;
}

[data-era="today"] .g-art--today {
  display: block;
  top: 0;
  right: calc(var(--gutter) * -1);
  width: 120px;
  height: 240px;
  background-image: url("/assets/img/grader/today-side.png");
}

@media (max-width: 768px) {
  .g-art--today,
  [data-era="today"] .g-art--today {
    display: none;
  }
}

/* The period visitor counter. Nineteen ninety five only, decorative, and
   hidden from assistive technology because it means nothing. */
.g-counter {
  display: none;
}

[data-era="1995"] .g-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: none;
  margin: 12px auto 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  color: #000000;
}

[data-era="1995"] .g-counter__digits {
  display: inline-flex;
  gap: 2px;
  padding: 3px 6px;
  border: 2px inset #808080;
  background: #000000;
  color: #33FF33;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  letter-spacing: 2px;
}

/* The dark theme's status colours are tuned for a dark surface and go to
   pieces on white or silver. These four are the light era equivalents, and
   they clear 4.5 to 1 on both #FFFFFF and #C0C0C0. */
[data-era="1995"],
[data-era="2005"],
[data-era="2015"] {
  --ok: #14572F;
  --warn: #6B4600;
  --fail: #99131B;
  --info: #14508C;
}

/* ==================================================================== */
/* 2015: flat, one bold teal, white cards, big friendly choices.        */
/* ==================================================================== */

[data-era="2015"] {
  --bg-0: #0F7A6B;
  --bg-1: #FFFFFF;
  --bg-2: #F1F7F6;
  --line: #D3E3E0;
  --line-control: #6B8C87;
  --text-1: #14231F;
  --text-2: #46605B;
  --text-3: #46605B;
  --focus: #0B3B34;
  --accent: #0B5F53;
  --accent-ink: #FFFFFF;
  --r-card: 4px;
  --r-control: 4px;
  --shadow: 0 2px 6px rgb(15 34 30 / 0.18);
  color-scheme: light;
}

[data-era="2015"] body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-era="2015"] h1,
[data-era="2015"] .l-lede,
[data-era="2015"] .c-header__wordmark,
[data-era="2015"] .c-footer,
[data-era="2015"] .c-footer a,
[data-era="2015"] .g-eras__legend {
  color: #FFFFFF;
}

[data-era="2015"] .c-header,
[data-era="2015"] .c-footer {
  border-color: rgb(255 255 255 / 0.35);
}

[data-era="2015"] .g-era span {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #14231F;
}

[data-era="2015"] .g-era input:checked + span {
  background: #0B3B34;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* Focus lands on white cards and on the bold teal in this era, and no single
   colour clears three to one against both. A dark ring with a pale halo
   does, which is the two colour indicator WCAG recommends for exactly this. */
[data-era="2015"] .g-era input:focus-visible + span,
[data-era="2015"] :focus-visible {
  outline: 2px solid #08302A;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #C8FFF4;
}

/* Big friendly radio cards. */
[data-era="2015"] .g-q {
  box-shadow: var(--shadow);
  border: 0;
}

[data-era="2015"] .g-q__choices {
  gap: var(--s-4);
}

[data-era="2015"] .g-radio {
  flex: 1 1 140px;
  justify-content: center;
  min-height: 56px;
  border: 2px solid #C7DAD7;
  font-weight: 600;
}

[data-era="2015"] .g-radio:hover {
  background: #F1F7F6;
  border-color: #0B5F53;
}

[data-era="2015"] .c-prose p,
[data-era="2015"] .c-prose h2,
[data-era="2015"] .c-faq dt,
[data-era="2015"] .c-faq dd,
[data-era="2015"] .c-crosslink,
[data-era="2015"] .c-crosslink a {
  color: #FFFFFF;
}

[data-era="2015"] .g-result,
[data-era="2015"] .g-gaps,
[data-era="2015"] .g-principles {
  background: #FFFFFF;
  box-shadow: var(--shadow);
}

[data-era="2015"] .g-result {
  padding: var(--s-5);
}

[data-era="2015"] .g-result__title,
[data-era="2015"] .g-result__verdict,
[data-era="2015"] .g-result__gapsTitle,
[data-era="2015"] .g-gap__q,
[data-era="2015"] .g-gap__foot {
  color: #14231F;
}

[data-era="2015"] .c-quiet {
  color: #46605B;
}

/* ==================================================================== */
/* 2005: glossy gradients, rounded everything, Tahoma and Verdana.      */
/* ==================================================================== */

[data-era="2005"] {
  --bg-0: #E9EEF6;
  --bg-1: #FFFFFF;
  --bg-2: #F2F6FC;
  --line: #B9C6DA;
  --line-control: #7386A1;
  --text-1: #16233A;
  --text-2: #46577A;
  --text-3: #46577A;
  --focus: #14407F;
  --accent: #1B4F9C;
  --accent-ink: #FFFFFF;
  --r-card: 10px;
  --r-control: 10px;
  --r-pill: 999px;
  color-scheme: light;
}

/* Every gloss below keeps a flat background-color underneath it. That is
   what a contrast check can measure, and what paints if the gradient does
   not. */
[data-era="2005"] body {
  font-family: Tahoma, Verdana, Geneva, sans-serif;
  background-color: #E9EEF6;
  background-image: linear-gradient(180deg, #F7FAFF 0%, #E9EEF6 220px, #E9EEF6 100%);
}

/* The reflection on the header, which is the whole point of 2005. */
[data-era="2005"] .c-header {
  background-color: #2C5FAE;
  background-image: linear-gradient(180deg, #4E85D6 0%, #2C5FAE 48%, #23509A 52%, #3B72C4 100%);
  border-block-end: 1px solid #1B3E75;
}

[data-era="2005"] .c-header__wordmark {
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
}

/* A navy focus ring disappears on the header's blue, so the header gets a
   white one. */
[data-era="2005"] .c-header :focus-visible {
  outline-color: #FFFFFF;
}

[data-era="2005"] .c-btn--primary,
[data-era="2005"] .g-era input:checked + span {
  background-color: #2C63B4;
  background-image: linear-gradient(180deg, #5F94E0 0%, #2C63B4 48%, #22509B 52%, #3D77CA 100%);
  border: 1px solid #1B3E75;
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
}

[data-era="2005"] .c-btn--ghost,
[data-era="2005"] .g-era span {
  background-color: #EDF2FA;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #EAF0F9 48%, #DCE5F3 52%, #F3F7FD 100%);
  border: 1px solid #9DAECA;
  color: #16233A;
}

[data-era="2005"] .g-q,
[data-era="2005"] .g-gaps,
[data-era="2005"] .g-principles,
[data-era="2005"] .g-radio {
  background-color: #FFFFFF;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F6F9FE 100%);
  border: 1px solid #C3D0E4;
}

[data-era="2005"] .c-grade {
  background-color: #FFFFFF;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #EDF3FC 100%);
}

/* ==================================================================== */
/* 1995: silver, Times, two pixel bevels, blue underlined links.        */
/* ==================================================================== */

[data-era="1995"] {
  --bg-0: #C0C0C0;
  --bg-1: #C0C0C0;
  --bg-2: #D4D4D4;
  --line: #808080;
  --line-control: #000000;
  --text-1: #000000;
  --text-2: #000000;
  --text-3: #000000;
  --focus: #000080;
  --accent: #000080;
  --accent-ink: #FFFFFF;
  --r-card: 0;
  --r-control: 0;
  --r-pill: 0;
  --shadow: none;
  color-scheme: light;
}

[data-era="1995"] body {
  font-family: "Times New Roman", Times, serif;
  background: #C0C0C0;
}

[data-era="1995"] h1,
[data-era="1995"] h2,
[data-era="1995"] h3 {
  font-family: "Times New Roman", Times, serif;
  letter-spacing: 0;
}

[data-era="1995"] .l-lede,
[data-era="1995"] .c-prose p,
[data-era="1995"] .c-faq dd,
[data-era="1995"] .g-gap__advice,
[data-era="1995"] .g-gap__list,
[data-era="1995"] .g-principles,
[data-era="1995"] .g-result__share,
[data-era="1995"] .g-result__clear,
[data-era="1995"] .c-quiet,
[data-era="1995"] .g-eras__legend,
[data-era="1995"] .c-footer,
[data-era="1995"] .g-result__gradeText {
  color: #000000;
}

[data-era="1995"] a,
[data-era="1995"] .c-footer a {
  color: #0000CC;
  text-decoration: underline;
  text-decoration-color: currentColor;
}

[data-era="1995"] a:visited {
  color: #660099;
}

[data-era="1995"] .c-header,
[data-era="1995"] .c-footer {
  background: #C0C0C0;
  border-color: #808080;
}

[data-era="1995"] .c-header__wordmark {
  color: #000000;
}

/* Beveled edges, the way a 1995 form control was drawn. */
[data-era="1995"] .g-q,
[data-era="1995"] .g-gaps,
[data-era="1995"] .g-principles,
[data-era="1995"] .g-result {
  background: #C0C0C0;
  border: 2px outset #DFDFDF;
  border-radius: 0;
}

[data-era="1995"] .g-gaps > li + li {
  border-block-start: 1px solid #808080;
}

[data-era="1995"] .c-btn,
[data-era="1995"] .g-era span,
[data-era="1995"] .g-radio {
  background: #C0C0C0;
  border: 2px outset #DFDFDF;
  border-radius: 0;
  color: #000000;
  font-family: "Times New Roman", Times, serif;
  text-shadow: none;
}

[data-era="1995"] .c-btn--primary,
[data-era="1995"] .g-era input:checked + span {
  border-style: inset;
  background: #A8A8A8;
  color: #000000;
  font-weight: 700;
}

[data-era="1995"] .c-btn:hover,
[data-era="1995"] .g-radio:hover {
  background: #D4D4D4;
}

[data-era="1995"] :focus-visible,
[data-era="1995"] .g-era input:focus-visible + span {
  outline: 2px solid #000080;
  outline-offset: 1px;
}

[data-era="1995"] .c-grade {
  background: #C0C0C0;
  border: 2px inset #DFDFDF;
  border-radius: 0;
  color: #000000;
  font-family: "Courier New", Courier, monospace;
}

[data-era="1995"] .skip-link {
  background: #C0C0C0;
  border: 2px outset #DFDFDF;
  color: #000000;
}

/* ------------------------------------------------------- reduced motion */

/* Switching era is a plain style swap. Nothing in this file transitions, so
   there is nothing to suppress, and this block only guards the hover lift
   the shared card rules would otherwise apply. */
@media (prefers-reduced-motion: reduce) {
  .g-radio,
  .g-era span,
  .c-btn {
    transition: none;
  }
}