/* content.css V1.3 - 2026-10-08, CONV-A. Trivia's record sheet: a question's options read at body size inside the sheet (the bank card's 10px list was written for a dense card, not a dialog). */
/* content.css V1.2 - 2026-10-05, Harmony. The old list cards, chips, staff-picks strip and panel-reader chrome are retired with the bottom-sheet list (Guides and News now live in guides.css / news.css). What stays: the authored-body element rules (the HTML fallback both new modules render), the trivia block and the trivia bank. */
/* content.css V1.1
   V1.1 - 2026-09-17, Meryl. `Q-02` sweep: `.h-back` MOVED TO components.css.
   ============================================================================
   CONTENT - the question of the day, the trivia bank, and the authored body.

   T-002 BY BYTES, the same rule programs.css states: not one colour, radius,
   shadow, font or spacing value is invented here. Every declaration resolves to
   a token in tokens.css.

   THE READER'S BODY IS AUTHORED HTML. `.h-content__body` is the one block
   whose markup comes from an editor rather than from a renderer, so it styles
   BY ELEMENT (h2, p, ul, a, iframe) rather than by class - the sanitiser strips
   `class` along with every other unlisted attribute. Both `guides.js` and
   `news.js` render a row that has no blocks through this fallback.
   ========================================================================== */

/* --- the trivia bank page chrome (trivia-admin.html) --------------------- */
.h-content__title { font-family: var(--font-head); color: var(--ink); margin: var(--sp-2) 0; }
.h-content__by   { color: var(--faint); font-size: var(--fs-xs); margin-bottom: var(--sp-4); }

/* `.h-list` is a plain block list; `agentconnect.js` still emits it. */
.h-list { display: block; }

/* --- the authored body, styled by element -------------------------------- */
.h-content__body { color: var(--ink); line-height: var(--lh); }
.h-content__body h2,
.h-content__body h3,
.h-content__body h4 { font-family: var(--font-head); margin: var(--sp-5) 0 var(--sp-2); }
.h-content__body p  { margin: 0 0 var(--sp-4); }
.h-content__body ul,
.h-content__body ol { margin: 0 0 var(--sp-4) var(--sp-5); }
.h-content__body li { margin-bottom: var(--sp-1); }
.h-content__body a  { color: var(--green); }
.h-content__body blockquote {
  margin: var(--sp-4) 0; padding: var(--sp-2) var(--sp-4);
  border-left: 3px solid var(--green); color: var(--muted);
}
.h-content__body code {
  font-size: var(--fs-xs); background: var(--panel2);
  padding: 0 var(--sp-1); border-radius: var(--r-sm);
}
.h-content__body pre {
  background: var(--panel2); padding: var(--sp-4);
  border-radius: var(--r-sm); overflow-x: auto;
}
.h-content__body hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
/* IMAGES AND EMBEDS ARE CONSTRAINED BY THE COLUMN, not by whatever width the
   author typed - the sanitiser allows the attribute, so this has to survive it. */
.h-content__body img,
.h-content__body iframe { max-width: 100%; border-radius: var(--r-sm); }
.h-content__body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.h-content__body figure     { margin: var(--sp-4) 0; }
.h-content__body figcaption { color: var(--faint); font-size: var(--fs-xs); margin-top: var(--sp-1); }

/* --- question of the day -------------------------------------------------- */

.h-trivia {
  padding: var(--sp-4); margin-bottom: var(--sp-5);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-1);
}
.h-trivia__h {
  font-family: var(--font-head); color: var(--purple);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 var(--sp-2);
}
.h-trivia__q { color: var(--ink); margin: 0 0 var(--sp-4); line-height: var(--lh); }
.h-trivia__opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.h-trivia__opt {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3) var(--sp-4); text-align: left; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r-lg); color: var(--ink);
  transition: border-color var(--t-fast);
}
.h-trivia__opt:hover:not(:disabled) { border-color: var(--green); }
.h-trivia__opt:disabled { cursor: default; }
.h-trivia__l {
  flex: 0 0 auto; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: var(--panel);
  border: 1px solid var(--line2); font-size: var(--fs-xs); color: var(--muted);
}
.h-trivia__t { min-width: 0; }

/* THE VERDICT NEVER RIDES ON COLOUR ALONE. `is-right` and `is-wrong` differ in
   border WEIGHT as well as hue, and the sentence below the options says which
   in words. */
.h-trivia__opt.is-right { border: 2px solid var(--success); }
.h-trivia__opt.is-wrong { border: 2px dashed var(--danger); }
.h-trivia__r { margin: var(--sp-4) 0 0; font-family: var(--font-head); }
.h-trivia__r.is-right { color: var(--success); }
.h-trivia__r.is-wrong { color: var(--danger); }
.h-trivia__x { margin: var(--sp-2) 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh); }

/* --- the trivia question bank (manager tool, trivia-admin.html) ------------
   Same rule as the rest of this file: every value is a token from tokens.css,
   nothing invented. The bank is a manager surface with a handful of rows, so it
   is a LIST and not a grid. */

.h-tq__bar {
  display: flex; gap: var(--sp-2); align-items: center;
  margin: var(--sp-4) 0 var(--sp-5);
}
.h-tq__bar .h-input { flex: 1 1 auto; min-width: 0; }

.h-tq__list { list-style: none; margin: 0; padding: 0; }

.h-tq {
  padding: var(--sp-4); margin-bottom: var(--sp-3);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
/* TODAY'S QUESTION IS MARKED BY AN EDGE, NOT ONLY BY ITS PILL. */
.h-tq.is-live { border-left: 3px solid var(--green); }

.h-tq__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.h-tq__q { font-family: var(--font-head); color: var(--ink); }
.h-tag--live { background: var(--green); color: var(--on-green); }

.h-tq__opts {
  list-style: none; margin: 0 0 var(--sp-2); padding: 0;
  display: grid; gap: var(--sp-1);
}
.h-tq__opt { color: var(--muted); font-size: var(--fs-xs); }
.h-tq__opt b { color: var(--faint); margin-right: var(--sp-1); }
.h-tq__opt.is-right      { color: var(--ink); }
.h-tq__opt.is-right b    { color: var(--green); }

.h-tq__why {
  margin: 0 0 var(--sp-3); color: var(--faint);
  font-size: var(--fs-xs); line-height: var(--lh);
}

.h-tq__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.h-tq__acts { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.h-tq__stat { color: var(--muted); font-size: var(--fs-xs); }
/* "Not answered yet" is deliberately quieter than a real statistic, because it
   is the ABSENCE of one - `percentCorrect` is null, not zero. */
.h-tq__stat--none { color: var(--faint); font-style: italic; }

.h-tq__form {
  padding: var(--sp-4); margin-bottom: var(--sp-5);
  background: var(--panel2); border: 1px solid var(--line2);
  border-radius: var(--r-lg);
}
.h-tq__form .h-content__h { margin-top: 0; }
.h-content__h {
  font-family: var(--font-head); color: var(--muted);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  margin: var(--sp-5) 0 var(--sp-2);
}

/* 🧭 THE RECORD SHEET (2026-10-08). The options are the record's content
   there, not a footnote under a card, so they read at the sheet's size. */
.h-sheet .h-tq__opt { font-size: 13.5px; }