/* Daily Trivia inside a publisher's page: the same game, cut to fit a column.
   hub.css + ../styles.css do the work; this trims the chrome and tightens the type. */
html[data-embed], html[data-embed] body { background: var(--paper); min-height: 0; }
html[data-embed] body { display: block; }
html[data-embed] .wrap { width: min(100% - 32px, 1180px); }
.em-head { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 16px; background: var(--navy); color: #dbe3ee; font: 500 13px/1 var(--sans); }
.em-plate { font: 800 19px/1 var(--display); font-stretch: 75%; letter-spacing: -.012em; color: #fff; text-decoration: none; white-space: nowrap; }
.em-plate .stop { color: #e8412f; }
.em-name { padding-left: 14px; border-left: 1px solid #ffffff2e; color: #fff; font-weight: 600; white-space: nowrap; }
.em-name b { color: #a9b6c9; font-weight: 500; margin-left: 4px; }
.em-out { margin-left: auto; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.em-out:hover { text-decoration: underline; text-underline-offset: 3px; }
.em-foot { padding: 10px 16px 14px; border-top: 1px solid var(--rule-soft); font-size: 12.5px; color: var(--ink-soft); }
.em-foot a { color: var(--ink); }
/* the game, tighter */
html[data-embed] .qt .screen { padding: 18px 0 20px; }
html[data-embed] .qt h1 { font-size: clamp(24px, 4.2vw, 34px); max-width: none; }
html[data-embed] .qt .how { font-size: 14px; margin-top: 8px; }
html[data-embed] .steps { margin-bottom: 12px; }
/* answers as rows of words: letter, the answer, a line beneath it */
html[data-embed] .options { margin-top: 16px; gap: 8px; grid-template-columns: 1fr; }
html[data-embed] .opt-text { flex-direction: row; align-items: stretch; gap: 0; padding: 0; background: #fff; }
html[data-embed] .opt-text .letter { position: static; flex: none; width: 36px; display: grid; place-items: center; font-size: 13px; padding: 0; background: var(--paper-deep); color: var(--ink); }
html[data-embed] .opt-text .text { flex: 1; border-top: 0; padding: 11px 12px; }
html[data-embed] .opt-text .name { font-size: 17px; }
html[data-embed] .opt-text .sub { margin-top: 2px; }
html[data-embed] .opt-text .mark { margin-top: 4px; }
html[data-embed] .reveal .opt.is-right .letter { background: var(--ink); color: #fff; }
html[data-embed] .reveal .opt.is-wrong .letter { background: var(--red); color: #fff; }
html[data-embed] .opt .name { font-size: 15px; }
html[data-embed] .opt .text { padding: 8px 10px 10px; }
html[data-embed] .pic-figure b { font-size: clamp(28px, 5vw, 48px); }
html[data-embed] .pic-doc .title { font-size: 17px; }
html[data-embed] .pic-doc .line { font-size: 9.5px; }
html[data-embed] .pic-word b { font-size: clamp(16px, 2.6vw, 22px); }
html[data-embed] .lede { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; }
html[data-embed] .lede .subject { width: 120px; }
html[data-embed] .verdict { margin-top: 18px; padding-top: 14px; grid-template-columns: 1fr; gap: 10px; }
html[data-embed] .verdict .answer { font-size: 20px; }
html[data-embed] .story { font-size: 15.5px; }
html[data-embed] .source { font-size: 12.5px; }
html[data-embed] .scorehead { grid-template-columns: 1fr; gap: 10px; padding-bottom: 16px; }
html[data-embed] .score .scored { font-size: 44px; }
html[data-embed] .result { grid-template-columns: 1fr; gap: 0; padding: 16px 0; }
html[data-embed] .result .hed { font-size: 20px; }
html[data-embed] .result .story { font-size: 14.5px; }
@media (max-width: 640px) { html[data-embed] .lede { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .em-name { display: none; } }

/* the score, compact: the tally on one line, a row per question, stories folded away */
.em-score .em-tally { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.em-score .scored { margin: 0; font-size: 34px; line-height: 1; white-space: nowrap; }
.em-score .scored small { font-size: 13.5px; }
.em-score .em-line { margin: 0; flex: 1 1 180px; font-size: 14px; color: var(--ink-soft); }
.em-score #share-note { margin: 4px 0 0; font-size: 13px; min-height: 0; }
.em-score #share-note:empty { display: none; }
.em-results { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.em-results li { border-bottom: 1px solid var(--rule-soft); }
.em-results summary { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: baseline; gap: 0 10px; padding: 9px 0; cursor: pointer; list-style: none; font-size: 14.5px; }
.em-results summary::-webkit-details-marker { display: none; }
.em-mark { font: 700 12px/1 var(--sans); }
.em-results .is-right .em-mark { color: #1b6b3a; } .em-results .is-wrong .em-mark { color: var(--red); }
.em-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.em-a { font-weight: 600; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.em-results details[open] .em-q { white-space: normal; color: var(--ink); }
.em-results .story { margin: 0 0 6px 56px; font-size: 14.5px; }
.em-results .source { margin: 0 0 10px 56px; font-size: 12.5px; }
.em-more { margin: 10px 0 0; font-size: 13.5px; }
html[data-embed] .qt .screen.em-score { padding: 14px 0 14px; }
@media (max-width: 480px) { .em-results summary { grid-template-columns: 46px minmax(0, 1fr); } .em-a { grid-column: 2; max-width: none; white-space: normal; } .em-results .story, .em-results .source { margin-left: 56px; } }

/* every screen stays short: no instructions line, answers one line each with the
   detail at the right, and after the reveal only the answer, the story and Next */
html[data-embed] .qt .screen { padding: 14px 0 14px; }
html[data-embed] .qt .how { display: none; }
html[data-embed] .steps { margin-bottom: 8px; }
html[data-embed] .kicker { margin-bottom: 6px; font-size: 12.5px; }
html[data-embed] .qt h1 { font-size: clamp(21px, 3.6vw, 28px); line-height: 1.08; }
html[data-embed] .options { margin-top: 12px; gap: 6px; }
html[data-embed] .opt-text .text { display: flex; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; padding: 8px 12px; }
html[data-embed] .opt-text .name { flex: 1 1 auto; font-size: 16px; }
html[data-embed] .opt-text .sub { margin: 0; font-size: 12.5px; }
html[data-embed] .opt-text .mark { margin: 0; }
html[data-embed] .action { margin-top: 12px; }
html[data-embed] .btn { padding: 10px 14px; font-size: 14px; }
html[data-embed] .verdict { margin-top: 10px; padding-top: 0; border-top: 0; gap: 8px; }
html[data-embed] .verdict .answer, html[data-embed] .verdict .source, html[data-embed] .verdict .side .muted { display: none; }
html[data-embed] .verdict .story { margin: 0; font-size: 15px; line-height: 1.45; }