/* El Trivia, base: reset, type, shared chrome and components used on every page. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Parts that only make sense once JavaScript runs. The head script adds .js. */
html:not(.js) .needs-js { display: none !important; }
html.js .no-js-only { display: none !important; }

/* Focus */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Links in running text are the only blue text. */
a { color: inherit; }
.prose a,
a.text-link {
  color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover,
a.text-link:hover { text-decoration-thickness: 2px; }

/* Layout */
.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Figures: every time, score, count and entry number */
.fig,
.entry-no,
time,
.tnum {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Label style: column heads, category tags */
.label {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Display type */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  font-optical-sizing: auto;
}

/* The identity move: "No. 01" in Plex tabular figures beside the quiz name
   in Newsreader italic. Used in Today, the index, the quiz title and the
   result dialog. */
.entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.55em;
  row-gap: 0;
  font-weight: inherit;
  margin: 0;
}
.entry-no {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  white-space: nowrap;
  flex: none;
}
.entry-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-title-m);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  color: var(--ink);
}

/* Rules */
.double-rule {
  height: 6px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 0;
}

/* Section heading line: title left, figure or control right, hairline under */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-4);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-title-s);
  line-height: var(--lh-tight);
  font-optical-sizing: auto;
}
.section-aside {
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* Buttons */
.btn {
  --btn-bg: var(--panel);
  --btn-fg: var(--ink);
  --btn-border: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--target);
  min-width: var(--target);
  padding: 0 var(--s-4);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.btn:hover { border-color: var(--ink); }
.btn--primary {
  --btn-bg: var(--signal);
  --btn-fg: var(--on-signal);
  --btn-border: var(--signal);
  font-weight: 600;
}
.btn--primary:hover { border-color: var(--ink); }
.btn--danger {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-border: var(--ink);
}
.btn--quiet {
  --btn-bg: transparent;
  --btn-border: transparent;
}
.btn--quiet:hover { border-color: var(--line-strong); }
.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--ink-2);
  border-color: var(--rule);
  background: transparent;
}
.btn .icon { width: 20px; height: 20px; flex: none; }
.btn--icon { padding: 0; width: var(--target); }

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Segmented control: theme, category filter, variants */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 2px;
  gap: 2px;
}
.segmented button {
  min-height: var(--target);
  min-width: var(--target);
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] {
  background: var(--signal-wash);
  border-color: var(--signal);
  color: var(--signal);
}

/* Category tag */
.tag {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-tag);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-2);
}

/* Status mark: open, half, filled circle plus a visible word */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.mark {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  flex: none;
}
.mark { position: relative; overflow: hidden; }
.mark--half::after {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background: var(--ink);
}
.mark--full { background: var(--ink); }

/* Masthead */
.masthead {
  padding-top: var(--s-5);
}
.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding-bottom: var(--s-3);
}
.wordmark {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-title-l);
  line-height: 1;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}
.masthead-sub {
  margin-top: 0;
}
.masthead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}
.dateline {
  min-width: min(18rem, 100%);
  text-align: right;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--ink);
  min-height: 1.4em;
}
.theme-control { display: inline-flex; align-items: center; gap: var(--s-2); }

/* Ad slots: reserved size, never shifts layout */
.ad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--s-1);
  margin-block: var(--s-8);
}
.ad-label { font-size: var(--fs-label); }
.ad-box {
  display: grid;
  place-items: center;
  width: 728px;
  max-width: 100%;
  height: 90px;
  background: var(--sunken);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: var(--fs-small);
}
@media (max-width: 767.98px) {
  .ad-box { width: 320px; height: 100px; }
}
.ad--rail .ad-box { width: 300px; height: 600px; }
.ad-size::before { content: "728 \00D7  90"; }
.ad--rail .ad-size::before { content: "300 \00D7  600"; }
@media (max-width: 767.98px) {
  .ad-size::before { content: "320 \00D7  100"; }
}

/* Ruled index rows, shared by the home index and "More in" lists */
.index-heads,
.index-link {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 7rem 9.5rem 4.5rem 9rem;
  column-gap: var(--s-4);
  align-items: baseline;
}
.index-heads {
  padding: 0 var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--ink);
}
.num { text-align: right; }

.index-list {
  list-style: none;
  margin: 0;
}
.index-row { border-bottom: 1px solid var(--rule); }
.index-link {
  padding: var(--s-3) var(--s-2);
  color: var(--ink);
  text-decoration: none;
  line-height: var(--lh-index);
  font-size: var(--fs-small);
  border-radius: 2px;
}
a.index-link:hover { background: var(--panel); }
a.index-link:hover .entry-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a.index-link:focus-visible { outline-offset: var(--focus-offset); background: var(--panel); }

.ix-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ix-name .entry-name { font-size: var(--fs-title-s); line-height: 1.15; }
.ix-desc { color: var(--ink-2); font-size: var(--fs-small); }
.ix-cat,
.ix-format { color: var(--ink-2); }
.ix-time,
.ix-best { text-align: right; white-space: nowrap; }
.ix-best { font-weight: 500; }
.ix-best-label { display: none; }
[data-best].is-empty { color: var(--ink-2); font-weight: 400; }

.is-soon .entry-name,
.is-soon .ix-no { color: var(--ink-2); }
.soon {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 719.98px) {
  .index-heads { display: none; }
  .index-list { border-top: 1px solid var(--ink); }
  .index-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--s-3);
    row-gap: var(--s-1);
    position: relative;
    padding: var(--s-3) var(--s-1) var(--s-3) 3.75rem;
  }
  .ix-no { position: absolute; left: var(--s-1); top: calc(var(--s-3) + 6px); }
  .ix-name { flex: 1 0 100%; margin-bottom: var(--s-1); }
  .ix-time,
  .ix-best,
  .ix-cat,
  .ix-format { text-align: left; }
  .ix-cat + .ix-format::before,
  .ix-format + .ix-time:not(:empty)::before {
    content: "\00B7";
    margin-right: var(--s-3);
    color: var(--ink-2);
  }
  .ix-best { margin-left: auto; }
  .ix-best-label { display: inline; color: var(--ink-2); font-weight: 400; }
  .ix-time:empty { display: none; }
}

/* Colophon */
.colophon {
  margin-top: var(--s-12);
  padding-block: var(--s-6) var(--s-10);
  border-top: 1px solid var(--ink);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.colophon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4) var(--s-8);
  align-items: start;
}
.colophon-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lead);
  color: var(--ink);
  margin-bottom: var(--s-1);
}
.colophon p { max-width: 60ch; }
.colophon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-4);
  list-style: none;
}
.colophon-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target);
  min-height: var(--target);
  color: var(--ink);
  text-underline-offset: 0.2em;
}
@media (max-width: 599.98px) {
  .colophon-grid { grid-template-columns: 1fr; }
}

/* Dialogs */
dialog {
  width: min(480px, calc(100vw - 2 * var(--s-4)));
  max-height: calc(100vh - 2 * var(--s-6));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-dialog);
}
dialog::backdrop { background: var(--scrim); }
.dialog-inner { padding: var(--s-6); }
.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--ink);
}
.dialog-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-title-s);
  line-height: var(--lh-tight);
  padding-top: var(--s-2);
}
.dialog-close { margin: -6px -10px 0 0; }
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-6);
}
.dialog-actions .btn { flex: 1 1 auto; }

/* Toast: bottom centre, one at a time */
.toast-host {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
  padding-inline: var(--s-4);
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  padding-left: var(--s-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-size: var(--fs-ui);
  font-weight: 500;
  pointer-events: auto;
  box-shadow: var(--shadow-dialog);
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--dur-toast) var(--ease), opacity var(--dur-toast) var(--ease);
}
.toast.is-entering { transform: translateY(12px); opacity: 0; }
.toast .btn { --btn-bg: transparent; --btn-fg: var(--paper); --btn-border: transparent; }
.toast .btn:focus-visible { outline-color: var(--paper); outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 719.98px) {
  .dateline { text-align: left; min-width: 0; }
}