/* ==========================================================================
   css/rich.css — the look of formatted curriculum text and designed pages.

   Every class here is named in js/richText.js, which is what writes them; the game, the
   admin designer and the designer's preview all load this one file, so a style drawn in
   the admin is the style the learner sees. tests/test_rich_text.js checks that every size,
   colour, highlight, box, font, theme and frame the script can emit has a rule below.

   Sizes are in em, so a "large" word is large for wherever it sits — a 15px row, a 12px
   note, a 13px explanation.
   ========================================================================== */

/* ── Inline marks ─────────────────────────────────────────────────────────── */
.hv-sz-xs  { font-size: 0.75em; }
.hv-sz-sm  { font-size: 0.875em; }
.hv-sz-md  { font-size: 1em; }
.hv-sz-lg  { font-size: 1.25em; }
.hv-sz-xl  { font-size: 1.5em; line-height: 1.35; }
.hv-sz-xxl { font-size: 2em; line-height: 1.25; }

.hv-c-ink    { color: #1a1208; }
.hv-c-brown  { color: #7a3e12; }
.hv-c-red    { color: #b91c1c; }
.hv-c-orange { color: #c2410c; }
.hv-c-green  { color: #15803d; }
.hv-c-teal   { color: #0f766e; }
.hv-c-blue   { color: #1d4ed8; }
.hv-c-purple { color: #7e22ce; }
.hv-c-pink   { color: #be185d; }
.hv-c-gray   { color: #57534e; }

mark, .hv-hl-yellow { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hv-hl-green  { background: #bbf7d0; color: inherit; border-radius: 3px; padding: 0 0.12em; }
.hv-hl-blue   { background: #bfdbfe; color: inherit; border-radius: 3px; padding: 0 0.12em; }
.hv-hl-pink   { background: #fbcfe8; color: inherit; border-radius: 3px; padding: 0 0.12em; }
.hv-hl-orange { background: #fed7aa; color: inherit; border-radius: 3px; padding: 0 0.12em; }
.hv-hl-purple { background: #e9d5ff; color: inherit; border-radius: 3px; padding: 0 0.12em; }

.hv-bold   { font-weight: 800; }
.hv-italic { font-style: italic; }

/* A font chosen inside the text is the author's own decision about that phrase, so it has to
   beat the broad span/div rule at the top of game.css — which is why these are !important and
   the page-level fonts further down are not. */
.hv-f-sans,    .hv-f-sans *    { font-family: 'Noto Sans KR', 'Be Vietnam Pro', sans-serif !important; }
.hv-f-serif,   .hv-f-serif *   { font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif !important; }
.hv-f-hand,    .hv-f-hand *    { font-family: 'Gaegu', 'Noto Sans KR', cursive !important; }
.hv-f-round,   .hv-f-round *   { font-family: 'Gowun Dodum', 'Noto Sans KR', sans-serif !important; }
.hv-f-display, .hv-f-display * { font-family: 'Do Hyeon', 'Noto Sans KR', sans-serif !important; }
.hv-f-mono,    .hv-f-mono *    { font-family: 'Nanum Gothic Coding', ui-monospace, monospace !important; }

.hv-al-left    { text-align: left; }
.hv-al-center  { text-align: center; }
.hv-al-right   { text-align: right; }
.hv-al-justify { text-align: justify; }
span.hv-al-center, span.hv-al-right, span.hv-al-justify, span.hv-al-left { display: block; }

/* Formatted text keeps its own paragraphs and lists, spaced for a sentence rather than a page. */
.hv-fmt p, .hv-block-content p { margin: 0 0 0.45em; }
.hv-fmt p:last-child, .hv-block-content p:last-child { margin-bottom: 0; }
.hv-fmt ul, .hv-fmt ol, .hv-block-content ul, .hv-block-content ol { margin: 0.3em 0 0.3em 1.4em; padding: 0; }
.hv-fmt li, .hv-block-content li { margin: 0.12em 0; }
.hv-fmt blockquote, .hv-block-content blockquote {
  margin: 0.35em 0; padding: 0.15em 0 0.15em 0.8em; border-left: 3px solid #c4893a; color: #5b3412; font-style: italic;
}
.hv-fmt h3, .hv-block-content h3 { font-size: 1.2em; margin: 0.2em 0 0.35em; line-height: 1.3; }
.hv-fmt h4, .hv-block-content h4 { font-size: 1.05em; margin: 0.2em 0 0.3em; line-height: 1.3; }
.hv-fmt hr, .hv-block-content hr { border: 0; border-top: 1.5px dashed #c4893a; margin: 0.5em 0; }
ruby rt { font-size: 0.55em; color: #7a3e12; font-weight: 600; letter-spacing: 0; }

/* Pictures inside the text. */
img.hv-img-xs, img.hv-img-sm, img.hv-img-md, img.hv-img-lg, img.hv-img-xl,
.hv-fmt img, .hv-block-content img { vertical-align: middle; max-width: 100%; height: auto; border-radius: 3px; }
.hv-fmt img:not([class*="hv-img-"]), .hv-block-content img:not([class*="hv-img-"]) { height: 1.6em; width: auto; }
img.hv-img-xs { height: 1.2em; width: auto; }
img.hv-img-sm { height: 2em; width: auto; }
img.hv-img-md { height: 4em; width: auto; }
img.hv-img-lg { height: 7em; width: auto; }
img.hv-img-xl { display: block; width: 100%; height: auto; margin: 0.4em 0; }

/* A meaning written into the text. In the game the span also carries .wb-gl, like the
   automatic ones; in the admin editor it is underlined and tinted, so the author can see which
   words carry one. Either way the card below shows the meaning (HVRich.glossTips). */
.hv-gl { border-bottom: 1px dotted #a16207; cursor: help; }
.hv-gl:not(.wb-gl) { position: relative; background: rgba(254, 243, 199, 0.55); }
/* Only where the card never started (html without .hv-gtip). */
html:not(.hv-gtip) .hv-gl:not(.wb-gl):hover::after {
  content: attr(data-gl); position: absolute; left: 0; bottom: 100%; transform: translateY(-5px);
  background: #3b2410; color: #fdf6e3; font-size: 11px; font-weight: 500; font-style: normal;
  line-height: 1.4; padding: 4px 7px; border-radius: 4px; white-space: pre-line;
  width: max-content; max-width: 240px; z-index: 30; pointer-events: none;
}

/* ── The hover meaning's card (js/richText.js glossTips) ─────────────────────
   One per page, placed by script beside the word and kept inside the window. The word in
   amber, then the meaning with the line breaks it was written with; in the admin's text box,
   each language it was given, labelled. */
.hv-gtip-card {
  position: fixed; left: 0; top: 0; z-index: 2147483000; box-sizing: border-box;
  width: max-content; min-width: 104px; max-width: min(300px, calc(100vw - 12px));
  padding: 8px 12px 9px; border-radius: 10px; border: 1px solid #b7791f;
  background: linear-gradient(180deg, #47290e 0%, #2c190a 100%); color: #fdf6e3;
  box-shadow: 0 14px 32px rgba(20, 10, 2, .42), 0 2px 6px rgba(20, 10, 2, .3), inset 0 1px 0 rgba(255, 236, 179, .14);
  font: 500 12.5px/1.55 'Be Vietnam Pro', 'Noto Sans KR', system-ui, sans-serif;
  font-style: normal; letter-spacing: 0; text-align: left; text-transform: none;
  pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(5px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.hv-gtip-card.below { transform: translateY(-5px); }
.hv-gtip-card.on {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
.hv-gtip-word {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px;
  font: 700 14.5px/1.3 'Noto Sans KR', sans-serif; color: #fcd34d;
}
.hv-gtip-head { font-size: 11px; font-weight: 500; color: #e9cf9c; }
.hv-gtip-head::before { content: '· '; }
.hv-gtip-body {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(252, 211, 77, .24);
  white-space: pre-line; overflow-wrap: anywhere;
}
.hv-gtip-body + .hv-gtip-body { margin-top: 5px; border-top-style: dashed; }
.hv-gtip-tagged { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: baseline; }
.hv-gtip-lang {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.5;
  color: #2c190a; background: #fcd34d; border-radius: 4px; padding: 0 4px;
}
.hv-gtip-arrow {
  position: absolute; left: var(--hv-ax, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: #2c190a; border: solid #b7791f; border-width: 0 1px 1px 0; transform: rotate(45deg);
}
.hv-gtip-card.below .hv-gtip-arrow { top: -6px; bottom: auto; background: #47290e; border-width: 1px 0 0 1px; }
/* The same card standing still, where the admin previews a meaning as it is written. */
.hv-gtip-card.hv-gtip-static {
  position: relative; left: auto; top: auto; z-index: auto; margin: 0 auto 8px;
  max-width: 100%; visibility: visible; opacity: 1; transform: none; transition: none;
}
/* The word the card is showing. */
.wb-gl.hv-gl-on, .hv-gl.hv-gl-on { background: #fef3c7; border-bottom-style: solid; }
@media (prefers-reduced-motion: reduce) {
  .hv-gtip-card, .hv-gtip-card.below, .hv-gtip-card.on { transform: none; transition: none; }
}

/* ── Boxes ───────────────────────────────────────────────────────────────────
   One set of colours for a whole field drawn as a box (a div) and for a phrase boxed inside
   a line (a span, drawn as a tinted pill so it never breaks the line it sits in). */
.hv-box { --hv-bg: #fff3d6; --hv-bd: #c4893a; --hv-fg: inherit; }
/* Not on a question row: a row is a flex line with its own padding, and only takes the colours
   (see the end of this file). */
div.hv-box:not(.wb-row), .hv-block.hv-box {
  display: block; background: var(--hv-bg); border: 1.5px solid var(--hv-bd); color: var(--hv-fg);
  border-radius: 6px; padding: 9px 12px; margin: 2px 0;
}
span.hv-box {
  background: var(--hv-bg); box-shadow: inset 0 0 0 1px var(--hv-bd); color: var(--hv-fg);
  border-radius: 4px; padding: 0.05em 0.35em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hv-box-note    { --hv-bg: #fff3d6; --hv-bd: #c4893a; }
.hv-box-tip     { --hv-bg: #ecfdf5; --hv-bd: #10b981; --hv-fg: #064e3b; }
.hv-box-info    { --hv-bg: #eff6ff; --hv-bd: #3b82f6; --hv-fg: #1e3a8a; }
.hv-box-warn    { --hv-bg: #fffbeb; --hv-bd: #f59e0b; --hv-fg: #78350f; }
.hv-box-danger  { --hv-bg: #fef2f2; --hv-bd: #ef4444; --hv-fg: #7f1d1d; }
.hv-box-grammar { --hv-bg: #f7f0ff; --hv-bd: #a855f7; --hv-fg: #3b0764; }
.hv-box-example { --hv-bg: #eef4ff; --hv-bd: #1e3a8a; --hv-fg: #1a1208; }
.hv-box-quote   { --hv-bg: transparent; --hv-bd: transparent; --hv-fg: #5b3412; }
.hv-box-card    { --hv-bg: #fffdf7; --hv-bd: #e8d5ae; }
.hv-box-dashed  { --hv-bg: transparent; --hv-bd: #c4893a; }
div.hv-box-tip, div.hv-box-info, div.hv-box-warn, div.hv-box-danger, div.hv-box-grammar,
.hv-block.hv-box-tip, .hv-block.hv-box-info, .hv-block.hv-box-warn, .hv-block.hv-box-danger, .hv-block.hv-box-grammar {
  border-left-width: 5px;
}
div.hv-box-quote:not(.wb-row), .hv-block.hv-box-quote {
  border: 0; border-left: 4px solid #a16207; border-radius: 0; font-style: italic; padding: 4px 0 4px 14px;
}
div.hv-box-card, .hv-block.hv-box-card { box-shadow: 0 3px 10px rgba(74, 42, 13, 0.16); border-radius: 10px; }
div.hv-box-dashed, .hv-block.hv-box-dashed { border-style: dashed; border-width: 2px; }
span.hv-box-quote { font-style: italic; box-shadow: inset 2px 0 0 #a16207; border-radius: 0; }
span.hv-box-dashed { box-shadow: none; outline: 1.5px dashed #c4893a; outline-offset: -1px; }

/* A container that is a box already (the note above a page, the grammar card) steps aside
   when the field inside it asks for a box of its own, rather than drawing one inside another. */
.wb-inst-note.hv-unboxed, .wb-why-gram.hv-unboxed { background: none; border: 0; padding: 0; }

/* ── Blocks placed on a page ─────────────────────────────────────────────── */
.hv-blocks { display: flex; flex-direction: column; gap: 10px; }
.hv-blocks:empty { display: none; }
.hv-block { margin: 0; font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif; font-size: 14px; line-height: 1.6; color: #2a1a0a; }
.hv-block-text { display: flex; gap: 12px; align-items: flex-start; }
.hv-block-text.hv-side-right { flex-direction: row-reverse; }
.hv-block-text.hv-side-top { flex-direction: column; }
.hv-block-body { flex: 1 1 auto; min-width: 0; }
.hv-block-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-weight: 800; font-size: 1.05em; }
.hv-block-icon { font-size: 1.25em; line-height: 1; }
.hv-block-title { font-weight: 800; }
.hv-block-content { overflow-wrap: anywhere; }
.hv-block-pic {
  flex: 0 0 auto; width: var(--hv-w, 32%); max-width: 100%; height: auto; border-radius: 6px;
  border: 1.5px solid #e8d5ae; background: #fff8e8; object-fit: contain;
}
.hv-block-text.hv-side-top .hv-block-pic { align-self: center; }
.hv-textcols-2 .hv-block-content { column-count: 2; column-gap: 22px; }
.hv-block.hv-al-center .hv-block-head { justify-content: center; }
.hv-block.hv-al-right .hv-block-head { justify-content: flex-end; }

.hv-block-img { display: flex; flex-direction: column; margin: 0; }
.hv-block-img.hv-al-center { align-items: center; }
.hv-block-img.hv-al-left { align-items: flex-start; }
.hv-block-img.hv-al-right { align-items: flex-end; }
.hv-block-img img { display: block; width: var(--hv-w, 100%); max-width: 100%; height: auto; }
.hv-block-img figcaption {
  width: var(--hv-w, 100%); max-width: 100%; margin-top: 6px; font-size: 12.5px; color: #5b3412; font-style: italic;
}
.hv-block-img.hv-al-center figcaption { text-align: center; }
.hv-block-img.hv-al-right figcaption { text-align: right; }
/* The game's own art is pixel art: scaled up it stays crisp, the way the desk draws it. An
   uploaded photo is left to the browser's smoothing. */
.hv-block img[src^="sprites/"], .hv-fmt img[src^="sprites/"], .hv-block-content img[src^="sprites/"] {
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.hv-frame-border img { border: 2px solid #8b5a2b; border-radius: 4px; }
.hv-frame-shadow img { border-radius: 8px; box-shadow: 0 6px 18px rgba(42, 26, 10, 0.3); }
.hv-frame-polaroid img { background: #fff; padding: 8px 8px 22px; border: 1px solid #e5d3b3; box-shadow: 0 4px 12px rgba(42, 26, 10, 0.22); }
.hv-frame-round img { border-radius: 18px; }
.hv-frame-none img { border-radius: 4px; }

.hv-divider { border: 0; margin: 4px 0; height: 0; }
.hv-divider-line { border-top: 2px solid #c4893a; }
.hv-divider-dashed { border-top: 2px dashed #c4893a; }
.hv-divider-double { border-top: 4px double #8b5a2b; }
.hv-divider-dots { height: 8px; background: radial-gradient(circle, #c4893a 1.6px, transparent 2px) center / 14px 8px repeat-x; }

@media (max-width: 640px) {
  .hv-block-text { flex-direction: column; }
  .hv-block-text.hv-side-right { flex-direction: column; }
  .hv-block-pic { width: 100%; }
  .hv-textcols-2 .hv-block-content { column-count: 1; }
}

/* ── A designed workbook page ─────────────────────────────────────────────────
   Classes land on #workbook-panel (see wbApplyDesign in js/ui.js). Scoped to the panel's id
   so they out-rank game.css's own workbook rules and its broad span/div font rule without
   reaching for !important. */

/* Width. The head and foot pad themselves to the body's column, as game.css does for 900px. */
#workbook-panel.hv-w-narrow #wb-body { max-width: 720px; }
#workbook-panel.hv-w-wide #wb-body { max-width: 1140px; }
#workbook-panel.hv-w-full #wb-body { max-width: none; }
#workbook-panel.hv-w-narrow #wb-head, #workbook-panel.hv-w-narrow #wb-foot {
  padding-left: max(20px, calc((100vw - 720px) / 2)); padding-right: max(20px, calc((100vw - 720px) / 2));
}
#workbook-panel.hv-w-wide #wb-head, #workbook-panel.hv-w-wide #wb-foot {
  padding-left: max(20px, calc((100vw - 1140px) / 2)); padding-right: max(20px, calc((100vw - 1140px) / 2));
}
#workbook-panel.hv-w-full #wb-head, #workbook-panel.hv-w-full #wb-foot { padding-left: 24px; padding-right: 24px; }

/* Zoom: the whole page body, pictures and buttons with it. */
#workbook-panel.hv-scaled #wb-body { zoom: var(--hv-scale, 1); }

/* Density. */
#workbook-panel.hv-dens-compact #wb-body { gap: 7px; }
#workbook-panel.hv-dens-compact #wb-items { gap: 5px; }
#workbook-panel.hv-dens-compact .wb-row { padding: 7px 9px; }
#workbook-panel.hv-dens-airy #wb-body { gap: 20px; }
#workbook-panel.hv-dens-airy #wb-items { gap: 14px; }
#workbook-panel.hv-dens-airy .wb-row { padding: 14px 16px; }

/* Questions in columns. The paired picture match keeps its own two-column layout. */
#workbook-panel.hv-cols-2 #wb-items:not(.wb-paired) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
#workbook-panel.hv-cols-3 #wb-items:not(.wb-paired) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 760px) {
  #workbook-panel.hv-cols-2 #wb-items:not(.wb-paired),
  #workbook-panel.hv-cols-3 #wb-items:not(.wb-paired) { grid-template-columns: 1fr; }
}

/* The page's Korean in another face. Only the Korean: the pixel badges (key numbers, speaker
   chips) keep their own font, and so does the English beside each row. */
#workbook-panel.hv-font-serif :is(.wb-inst-ko, .wb-sentence, .wb-exp-line, .wb-exp-phrase, .wb-why-head, .wb-pick-form, .wb-chip, .wb-line, .wb-line-solo, .wb-left, #wb-example),
#workbook-panel.hv-font-serif :is(.wb-sentence, .wb-exp-line, .wb-why-head, .wb-line, .wb-line-solo, #wb-example, .wb-pick-form, .wb-chip) span:not(.wb-chip-key):not(.wb-spk):not(.wb-picks-tag):not(.wb-example-tag):not(.wb-n) {
  font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
}
#workbook-panel.hv-font-hand :is(.wb-inst-ko, .wb-sentence, .wb-exp-line, .wb-exp-phrase, .wb-why-head, .wb-pick-form, .wb-chip, .wb-line, .wb-line-solo, .wb-left, #wb-example),
#workbook-panel.hv-font-hand :is(.wb-sentence, .wb-exp-line, .wb-why-head, .wb-line, .wb-line-solo, #wb-example, .wb-pick-form, .wb-chip) span:not(.wb-chip-key):not(.wb-spk):not(.wb-picks-tag):not(.wb-example-tag):not(.wb-n) {
  font-family: 'Gaegu', 'Noto Sans KR', cursive; font-size: 1.08em;
}
#workbook-panel.hv-font-round :is(.wb-inst-ko, .wb-sentence, .wb-exp-line, .wb-exp-phrase, .wb-why-head, .wb-pick-form, .wb-chip, .wb-line, .wb-line-solo, .wb-left, #wb-example),
#workbook-panel.hv-font-round :is(.wb-sentence, .wb-exp-line, .wb-why-head, .wb-line, .wb-line-solo, #wb-example, .wb-pick-form, .wb-chip) span:not(.wb-chip-key):not(.wb-spk):not(.wb-picks-tag):not(.wb-example-tag):not(.wb-n) {
  font-family: 'Gowun Dodum', 'Noto Sans KR', sans-serif;
}
#workbook-panel.hv-font-display :is(.wb-inst-ko, .wb-sentence, .wb-exp-line, .wb-exp-phrase, .wb-why-head, .wb-pick-form, .wb-chip, .wb-line, .wb-line-solo, .wb-left, #wb-example),
#workbook-panel.hv-font-display :is(.wb-sentence, .wb-exp-line, .wb-why-head, .wb-line, .wb-line-solo, #wb-example, .wb-pick-form, .wb-chip) span:not(.wb-chip-key):not(.wb-spk):not(.wb-picks-tag):not(.wb-example-tag):not(.wb-n) {
  font-family: 'Do Hyeon', 'Noto Sans KR', sans-serif; font-weight: 400;
}
#workbook-panel.hv-font-mono :is(.wb-inst-ko, .wb-sentence, .wb-exp-line, .wb-exp-phrase, .wb-why-head, .wb-pick-form, .wb-chip, .wb-line, .wb-line-solo, .wb-left, #wb-example),
#workbook-panel.hv-font-mono :is(.wb-sentence, .wb-exp-line, .wb-why-head, .wb-line, .wb-line-solo, #wb-example, .wb-pick-form, .wb-chip) span:not(.wb-chip-key):not(.wb-spk):not(.wb-picks-tag):not(.wb-example-tag):not(.wb-n) {
  font-family: 'Nanum Gothic Coding', ui-monospace, monospace;
}

/* Themes. One set of variables per theme and one set of rules reading them, so a theme is a
   palette and never a second copy of the page's layout. The right/wrong colours after
   checking are left alone on purpose: green and red mean the same thing on every paper. */
#workbook-panel.hv-theme-notebook { --hv-page: #fdfcf7; --hv-head: #eef2ff; --hv-row: #ffffff; --hv-row-b: #c7d2fe; --hv-accent: #818cf8; --hv-line: #eef1fb; --hv-note: #f5f7ff; --hv-note-b: #c7d2fe; --hv-chip: #ffffff; }
#workbook-panel.hv-theme-mint     { --hv-page: #ecfdf5; --hv-head: #d1fae5; --hv-row: #f7fffb; --hv-row-b: #6ee7b7; --hv-accent: #10b981; --hv-line: transparent; --hv-note: #f0fdf4; --hv-note-b: #86efac; --hv-chip: #ffffff; }
#workbook-panel.hv-theme-sky      { --hv-page: #eff6ff; --hv-head: #dbeafe; --hv-row: #f8fbff; --hv-row-b: #93c5fd; --hv-accent: #3b82f6; --hv-line: transparent; --hv-note: #f0f7ff; --hv-note-b: #93c5fd; --hv-chip: #ffffff; }
#workbook-panel.hv-theme-blossom  { --hv-page: #fff1f5; --hv-head: #ffe4ec; --hv-row: #fffafc; --hv-row-b: #f9a8d4; --hv-accent: #ec4899; --hv-line: transparent; --hv-note: #fff5f8; --hv-note-b: #fbcfe8; --hv-chip: #ffffff; }
#workbook-panel.hv-theme-lavender { --hv-page: #f5f3ff; --hv-head: #ede9fe; --hv-row: #fbfaff; --hv-row-b: #c4b5fd; --hv-accent: #8b5cf6; --hv-line: transparent; --hv-note: #f7f5ff; --hv-note-b: #ddd6fe; --hv-chip: #ffffff; }
#workbook-panel.hv-theme-sand     { --hv-page: #faf6ee; --hv-head: #f1e7d3; --hv-row: #fffdf8; --hv-row-b: #d6c4a0; --hv-accent: #a8844f; --hv-line: transparent; --hv-note: #f7f1e4; --hv-note-b: #d6c4a0; --hv-chip: #fffdf8; }

#workbook-panel.hv-theme { background: var(--hv-page) !important; }
#workbook-panel.hv-theme #wb-head { background: linear-gradient(180deg, var(--hv-head) 0%, transparent); border-bottom-color: var(--hv-accent); }
#workbook-panel.hv-theme #wb-foot { border-top-color: var(--hv-accent); }
#workbook-panel.hv-theme .wb-row:not(.ok):not(.bad):not(.focus):not(.drop) { background: var(--hv-row); border-color: var(--hv-row-b); }
#workbook-panel.hv-theme .wb-row.focus { border-color: var(--hv-accent); }
#workbook-panel.hv-theme .wb-exp-line { background: var(--hv-note); border-color: var(--hv-note-b); }
#workbook-panel.hv-theme .wb-inst-note { background: var(--hv-note); border-color: var(--hv-note-b); }
#workbook-panel.hv-theme .wb-chip:not(.used), #workbook-panel.hv-theme .wb-pick-form:not(.on):not(.key), #workbook-panel.hv-theme .wb-pick-own:not(.on) {
  background: var(--hv-chip); border-color: var(--hv-accent); box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--hv-accent);
}
#workbook-panel.hv-theme .wb-why:not(.ok):not(.bad) { background: var(--hv-note); border-color: var(--hv-note-b); }
/* Notebook: ruled lines under the page, and a red margin. */
#workbook-panel.hv-theme-notebook #wb-body {
  background-image:
    linear-gradient(90deg, transparent 38px, rgba(239, 68, 68, 0.28) 38px, rgba(239, 68, 68, 0.28) 40px, transparent 40px),
    repeating-linear-gradient(180deg, transparent 0, transparent 27px, var(--hv-line) 27px, var(--hv-line) 28px);
}

/* A question row given a box of its own ("*" in its fmt). As specific as the theme's row rule
   and later, so a boxed row keeps its colours on a themed page; still not once it is marked. */
#workbook-panel .wb-row.hv-fmt.hv-box:not(.ok):not(.bad):not(.drop) { background: var(--hv-bg); border-color: var(--hv-bd); }
#workbook-panel .wb-row.hv-box-quote:not(.ok):not(.bad) { border-left: 4px solid #a16207; }

/* Fields an author added to a question in the designer (item.extra): on an exam page a card
   beside the clue and the rule, elsewhere a box under the grammar note. */
.wb-learn-extra { border-left: 4px solid #0f766e; background: #f0fdfa; }
.wb-learn-extra > span { color: #0f766e; }
.wb-why-extra {
  font-size: 12.5px; color: #134e4a; margin-top: 7px; line-height: 1.6;
  background: #f0fdfa; border: 1px solid #14b8a6; border-radius: 3px; padding: 6px 8px;
}
.wb-why-extra-h { display: block; font-size: 11px; letter-spacing: .04em; color: #0f766e; margin-bottom: 2px; }