/* ============================================================
   Learn (the guides): Google four colours, bento map, a Codepad
   on every pattern and every problem. Loaded last; the :is(#gd…)
   arm outranks the earlier skins' #cm#cm#cm overrides, in both
   /tools/pg and the SolveMe frame. Hairlines only, square cards,
   round pills.
   ============================================================ */
#viewGuides {
  --gd-blue: #0077FF;   --gd-blue-x: #0062D6;   --gd-blue-t: #EEF3FE;
  --gd-red: #5AA2FF;    --gd-red-x: #2B83EC;    --gd-red-t: #F2F7FF;
  --gd-yellow: #9AD61A; --gd-yellow-x: #5E8C0A; --gd-yellow-t: #F7FDE6;
  --gd-green: #00C896;  --gd-green-x: #00866B;  --gd-green-t: #EEFBF6;
  --gd-line: var(--hairline, var(--border));
  --gd-elev: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --gd-display: var(--cmk-display, var(--lv-display, var(--font-sans)));
  --gd-pad-bg: var(--surface-2);
}
html[data-scheme='dark'] #viewGuides {
  --gd-blue: #5AA2FF;   --gd-blue-x: #5AA2FF;   --gd-blue-t: rgba(90, 162, 255, .14);
  --gd-red: #9CC6FF;    --gd-red-x: #9CC6FF;    --gd-red-t: #1D2430;
  --gd-yellow: #9AD61A; --gd-yellow-x: #9AD61A; --gd-yellow-t: #1F2519;
  --gd-green: #00C896;  --gd-green-x: #00C896;  --gd-green-t: #192724;
  --gd-elev: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .25);
}
/* Every tone is the same: ink text, a faint ink wash, one blue for bars and focus. */
#viewGuides [data-tone] { --t: var(--gd-blue); --tx: var(--text-primary); --tt: color-mix(in srgb, var(--text-primary) 6%, transparent); }

/* ── header: one row: title + progress | stats | action ───────── */
html body :is(#viewGuides .gd-top, #gd#gd#gd#gd) {
  position: relative; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  align-items: center !important; gap: 14px 24px !important;
  padding: 20px 22px 18px !important; margin: 0 0 4px !important;
  border: 1px solid var(--gd-line) !important; border-radius: 0 !important;
  background: var(--surface-1) !important; box-shadow: none !important; overflow: hidden;
}
html body :is(#viewGuides .gd-top, #gd#gd#gd#gd)::before {
  content: '' !important; display: block !important; position: absolute !important;
  inset: 0 0 auto 0 !important; top: 0 !important; left: 0 !important; width: auto !important;
  height: 3px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important;
  background: linear-gradient(90deg, var(--gd-blue), var(--gd-red) 40%, var(--gd-green) 75%, var(--gd-yellow)) !important;
}
html body :is(#viewGuides .gd-top, #gd#gd#gd#gd)::after { display: none !important; }
html body :is(#viewGuides .gd-top-t, #gd#gd#gd#gd) { flex: 1 1 260px; gap: 8px; }
html body :is(#viewGuides .gd-top h1, #gd#gd#gd#gd) {
  margin: 0 !important; font: 700 clamp(26px, 2.6vw, 34px)/1.1 var(--gd-display) !important;
  letter-spacing: -.02em !important; color: var(--text-primary) !important; text-wrap: balance;
}
html body :is(#viewGuides .gd-top-m, #gd#gd#gd#gd) { font: 500 13px/1.3 var(--font-sans) !important; color: var(--text-secondary) !important; }
html body :is(#viewGuides .gd-top-bar, #gd#gd#gd#gd) {
  flex: 0 1 220px !important; height: 6px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--surface-3, var(--gd-line)) !important;
}
html body :is(#viewGuides .gd-top-bar i, #gd#gd#gd#gd) { border-radius: 999px !important; background: var(--gd-green) !important; }
html body :is(#viewGuides #gdPractice, #gd#gd#gd#gd) { border-radius: 999px !important; height: 38px; padding: 0 18px !important; font-weight: 500 !important; }

.gd-stats { display: flex; flex-wrap: wrap; gap: 8px; }
html body :is(#viewGuides .gd-stat, #gd#gd#gd#gd) {
  display: flex; align-items: baseline; gap: 6px; padding: 8px 14px;
  background: var(--tt); border: 0; border-radius: 0;
}
html body :is(#viewGuides .gd-stat b, #gd#gd#gd#gd) { font: 700 22px/1 var(--gd-display); color: var(--tx); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html body :is(#viewGuides .gd-stat span, #gd#gd#gd#gd) { font: 500 12.5px/1 var(--font-sans); color: var(--text-secondary); }

/* ── cards and section heads: a tone dot, never a grey square ─── */
html body :is(#viewGuides .gd-card, #gd#gd#gd#gd) {
  border: 1px solid var(--gd-line) !important; border-radius: 0 !important;
  background: var(--surface-1) !important; box-shadow: none !important;
}
html body :is(#viewGuides .gd-h, #gd#gd#gd#gd) {
  display: flex !important; align-items: center !important; gap: 10px !important;
  font: 700 15px/1.3 var(--gd-display) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--text-primary) !important;
}
html body :is(#viewGuides .gd-h, #gd#gd#gd#gd)::before {
  content: '' !important; display: block !important; flex: none !important;
  width: 10px !important; height: 10px !important; border: 0 !important; border-radius: 50% !important;
  transform: none !important; box-shadow: none !important; background: var(--t, var(--gd-blue)) !important;
}
html body :is(#viewGuides .gd-card[data-tone] .gd-h, #gd#gd#gd#gd) { color: var(--tx) !important; }
html body :is(#viewGuides .gd-sec, #gd#gd#gd#gd) {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 0;
  font: 700 20px/1.2 var(--gd-display); letter-spacing: -.01em; color: var(--text-primary);
}
html body :is(#viewGuides .gd-n, #gd#gd#gd#gd) {
  display: inline-grid !important; place-items: center !important; height: 22px !important; min-width: 22px; padding: 0 8px !important;
  border: 0 !important; border-radius: 999px !important; background: var(--gd-blue-t) !important;
  color: var(--gd-blue-x) !important; font: 700 12px/1 var(--font-sans) !important;
}

/* ── a pattern: text beside its Codepad, a tone rail on the left ─ */
html body :is(#viewGuides .gd-pattern, #gd#gd#gd#gd) {
  display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 18px 24px;
  border-left: 2px solid var(--t) !important; padding: 18px 20px !important;
}
html body :is(#viewGuides .gd-pattern.has-pad, #gd#gd#gd#gd) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 1100px) { html body :is(#viewGuides .gd-pattern.has-pad, #gd#gd#gd#gd) { grid-template-columns: minmax(0, 1fr); } }
.gd-pat-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gd-pat-text > * { margin: 0 !important; }
html body :is(#viewGuides .gd-pat-h, #gd#gd#gd#gd) {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font: 700 18px/1.25 var(--gd-display); letter-spacing: -.01em; color: var(--text-primary);
}
html body :is(#viewGuides .gd-pat-n, #gd#gd#gd#gd) {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--tt); color: var(--tx); font: 700 13px/1 var(--gd-display); font-variant-numeric: tabular-nums;
}
html body :is(#viewGuides .gd-cx, #gd#gd#gd#gd) {
  align-self: flex-start; padding: 5px 12px !important; border: 0 !important; border-radius: 14px !important;
  background: var(--tt) !important; color: var(--tx) !important; font: 500 11.5px/1.35 var(--font-mono) !important;
}
html body :is(#viewGuides .gd-when, #gd#gd#gd#gd) { font: 400 14px/1.55 var(--font-sans); color: var(--text-secondary); }
html body :is(#viewGuides .gd-when b, #gd#gd#gd#gd) { color: var(--tx); font-weight: 700; }
html body :is(#viewGuides .gd-pchip, #gd#gd#gd#gd) {
  height: 30px; padding: 0 12px !important; border: 1px solid var(--gd-line) !important; border-radius: 999px !important;
  background: var(--surface-1) !important; font: 500 13px/1 var(--font-sans) !important; color: var(--text-primary) !important;
}
html body :is(#viewGuides .gd-pchip:hover, #gd#gd#gd#gd) { border-color: var(--t, var(--gd-blue)) !important; background: var(--tt, var(--gd-blue-t)) !important; color: var(--tx, var(--gd-blue-x)) !important; }
html body :is(#viewGuides .gd-pchip.is-done, #gd#gd#gd#gd) { color: var(--gd-green-x) !important; }

/* ── the Codepad ─────────────────────────────────────────────── */
.gd-pad { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--gd-line); background: var(--surface-1); }
.gd-pad-bar {
  display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 10px;
  border-bottom: 1px solid var(--gd-line); background: var(--gd-pad-bg);
}
.gd-pad-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--tt, var(--gd-blue-t)); color: var(--tx, var(--gd-blue-x)); font: 700 12px/1 var(--font-sans);
}
.gd-pad-lang { font: 500 12px/1 var(--font-mono); color: var(--text-dimmed); }
.gd-pad-sp { flex: 1; }
.gd-pad-b, .gd-pad-run {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px;
  border-radius: 999px; font: 500 13px/1 var(--font-sans); cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.gd-pad-b { border: 1px solid var(--gd-line); background: var(--surface-1); color: var(--text-primary); }
.gd-pad-b:hover { border-color: var(--control, var(--gd-line)); background: var(--surface-2); }
.gd-pad-b.is-check { border-color: var(--gd-green); color: var(--gd-green-x); }
.gd-pad-b.is-check:hover { background: var(--gd-green-t); }
.gd-pad-run { border: 1px solid transparent; background: var(--gd-blue); color: #fff; font-weight: 700; }
html[data-scheme='dark'] .gd-pad-run { color: #10161E; }
.gd-pad-run:hover { box-shadow: var(--gd-elev); }
.gd-pad-run:active, .gd-pad-b:active { transform: translateY(1px); }
.gd-pad button:disabled { opacity: .55; cursor: progress; }
.gd-pad button:focus-visible { outline: 2px solid var(--gd-blue); outline-offset: 2px; }
.gd-pad .CodeMirror {
  height: auto; background: var(--surface-1);
  font: 400 13px/1.6 var(--font-mono);
}
.gd-pad .CodeMirror-scroll { min-height: 120px; max-height: 560px; }
.gd-pad .CodeMirror-gutters { background: var(--surface-1); border-right: 1px solid var(--gd-line); }
.gd-pad textarea { width: 100%; min-height: 160px; font: 400 13px/1.6 var(--font-mono); }
.gd-pad-out { border-top: 1px solid var(--gd-line); }
.gd-pad-st {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  font: 500 13px/1.3 var(--font-sans); color: var(--text-secondary);
}
.gd-pad-st span { margin-left: auto; font: 400 12px/1 var(--font-mono); color: var(--text-dimmed); }
.gd-pad-out[data-state='ok'] .gd-pad-st { background: var(--gd-green-t); color: var(--gd-green-x); }
.gd-pad-out[data-state='err'] .gd-pad-st { background: var(--err-t); color: var(--err-text); }
.gd-pad-out[data-state='run'] .gd-pad-st { background: var(--gd-blue-t); color: var(--gd-blue-x); }
.gd-pad-out[data-state='idle'] .gd-pad-st { background: var(--gd-yellow-t); color: var(--gd-yellow-x); }
.gd-pad-pre {
  margin: 0; padding: 10px 12px; max-height: 280px; overflow: auto; background: var(--gd-pad-bg);
  font: 400 12.5px/1.55 var(--font-mono); color: var(--text-primary); white-space: pre-wrap; word-break: break-word;
}
.gd-pad-wait { padding: 14px; font: 500 13px var(--font-sans); color: var(--text-dimmed); }

/* ── the problem list: a Codepad per row ─────────────────────── */
html body :is(#viewGuides .gd-q, #gd#gd#gd#gd) {
  grid-template-columns: 22px minmax(0, 1fr) auto 64px auto !important;
  align-items: center; gap: 10px !important; padding: 4px 0 !important;
}
html body :is(#viewGuides .gd-q-st.is-done, #gd#gd#gd#gd) { color: var(--gd-green) !important; }
html body :is(#viewGuides .gd-kind.is-key, #gd#gd#gd#gd) {
  padding: 3px 8px; border-radius: 999px; background: var(--gd-blue-t); color: var(--gd-blue-x) !important; font: 500 11.5px/1.2 var(--font-sans);
}
html body :is(#viewGuides .gd-diff, #gd#gd#gd#gd) {
  justify-self: end; padding: 3px 9px !important; border-radius: 999px !important; font: 500 11.5px/1.2 var(--font-sans) !important;
}
html body :is(#viewGuides .gd-diff.d-Easy, #gd#gd#gd#gd) { background: var(--gd-green-t) !important; color: var(--gd-green-x) !important; }
html body :is(#viewGuides .gd-diff.d-Medium, #gd#gd#gd#gd) { background: var(--gd-yellow-t) !important; color: var(--gd-yellow-x) !important; }
html body :is(#viewGuides .gd-diff.d-Hard, #gd#gd#gd#gd) { background: var(--gd-red-t) !important; color: var(--gd-red-x) !important; }
.gd-q-pad-b {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px;
  border: 1px solid var(--gd-line); border-radius: 999px; background: var(--surface-1);
  color: var(--text-primary); font: 500 12.5px/1 var(--font-sans); cursor: pointer;
}
.gd-q-pad-b:hover { border-color: var(--gd-blue); color: var(--gd-blue-x); }
.gd-q-pad-b.is-on { border-color: var(--gd-blue); background: var(--gd-blue-t); color: var(--gd-blue-x); }
.gd-q-pad { list-style: none; padding: 4px 0 14px 32px; }
.gd-q-pad .gd-pad { --tt: var(--gd-blue-t); --tx: var(--gd-blue-x); }
@media (max-width: 700px) {
  html body :is(#viewGuides .gd-q, #gd#gd#gd#gd) { grid-template-columns: 22px minmax(0, 1fr) auto !important; }
  html body :is(#viewGuides .gd-q .gd-kind, #gd#gd#gd#gd) { display: none; }
  .gd-q-pad-b span { display: none; }
  .gd-q-pad { padding-left: 0; }
}

/* ── Coding guide: the topic map as a bento of the four colours ─ */
html body :is(#viewGuides .gd-map, #gd#gd#gd#gd) {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important;
}
html body :is(#viewGuides .gd-map-i:last-child:nth-child(4n+3), #gd#gd#gd#gd) { grid-column: span 2; }
html body :is(#viewGuides .gd-map-i:last-child:nth-child(4n+2), #gd#gd#gd#gd) { grid-column: span 3; }
@media (max-width: 1000px) {
  html body :is(#viewGuides .gd-map, #gd#gd#gd#gd) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body :is(#viewGuides .gd-map-i:last-child, #gd#gd#gd#gd) { grid-column: auto; }
  html body :is(#viewGuides .gd-map-i:last-child:nth-child(odd), #gd#gd#gd#gd) { grid-column: 1 / -1; }
}
@media (max-width: 560px) { html body :is(#viewGuides .gd-map, #gd#gd#gd#gd) { grid-template-columns: minmax(0, 1fr) !important; } }
html body :is(#viewGuides .gd-map-i, #gd#gd#gd#gd) {
  display: flex !important; flex-direction: column; gap: 8px !important; padding: 16px 16px 14px !important;
  border: 1px solid var(--gd-line) !important; border-top: 2px solid var(--t) !important; border-radius: 0 !important;
  background: var(--surface-1) !important; color: var(--text-primary) !important; text-decoration: none !important;
  transition: background-color .12s, box-shadow .12s;
}
html body :is(#viewGuides .gd-map-i:hover, #gd#gd#gd#gd) { background: var(--surface-2) !important; box-shadow: var(--gd-elev) !important; }
html body :is(#viewGuides .gd-map-i:focus-visible, #gd#gd#gd#gd) { outline: 2px solid var(--t); outline-offset: 2px; }
.gd-map-top { display: flex; align-items: center; justify-content: space-between; }
html body :is(#viewGuides .gd-map-k, #gd#gd#gd#gd) { font: 700 26px/1 var(--gd-display); letter-spacing: -.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
html body :is(#viewGuides .gd-map-pads, #gd#gd#gd#gd) {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 7%, transparent); color: var(--text-secondary); font: 700 11.5px/1 var(--font-sans);
}
html body :is(#viewGuides .gd-map-i:hover .gd-map-pads, #gd#gd#gd#gd) { background: var(--surface-1); }
html body :is(#viewGuides .gd-map-i b, #gd#gd#gd#gd) { font: 700 16px/1.25 var(--gd-display) !important; letter-spacing: -.01em; }
html body :is(#viewGuides .gd-map-d, #gd#gd#gd#gd) { flex: 1; font: 400 13px/1.45 var(--font-sans) !important; color: var(--text-secondary) !important; }
.gd-map-f { display: flex; align-items: center; gap: 10px; min-height: 14px; }
html body :is(#viewGuides .gd-map-n, #gd#gd#gd#gd) { font: 500 12px/1 var(--font-sans) !important; color: var(--text-secondary) !important; font-variant-numeric: tabular-nums; }
html body :is(#viewGuides .gd-map-n.is-done, #gd#gd#gd#gd) { color: var(--gd-green-x) !important; }
.gd-map-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--surface-3, var(--gd-line)); overflow: hidden; }
.gd-map-bar i { display: block; height: 100%; border-radius: 999px; background: var(--t); }

/* ── chips, phases, tips ─────────────────────────────────────── */
html body :is(#viewGuides .gd-chip, #gd#gd#gd#gd) {
  border: 0 !important; border-radius: 999px !important; background: var(--surface-2) !important;
  color: var(--text-primary) !important; font: 500 12.5px/1 var(--font-sans) !important; padding: 7px 12px !important; box-shadow: none !important;
}
html body :is(#viewGuides .gd-phase, #gd#gd#gd#gd) { border: 0 !important; border-radius: 0 !important; background: var(--surface-2) !important; }
html body :is(#viewGuides .gd-phase:nth-child(4n+1) .gd-phase-p, #gd#gd#gd#gd) { color: var(--gd-blue-x) !important; }
html body :is(#viewGuides .gd-phase:nth-child(4n+2) .gd-phase-p, #gd#gd#gd#gd) { color: var(--gd-red-x) !important; }
html body :is(#viewGuides .gd-phase:nth-child(4n+3) .gd-phase-p, #gd#gd#gd#gd) { color: var(--gd-yellow-x) !important; }
html body :is(#viewGuides .gd-phase:nth-child(4n+4) .gd-phase-p, #gd#gd#gd#gd) { color: var(--gd-green-x) !important; }

/* ── the guides menu ─────────────────────────────────────────── */
html body :is(#viewGuides .gd-nav-i, #gd#gd#gd#gd) { border: 0 !important; border-radius: 999px !important; box-shadow: none !important; }
html body :is(#viewGuides .gd-nav-i.is-on, #gd#gd#gd#gd) { background: var(--gd-blue-t) !important; color: var(--gd-blue-x) !important; font-weight: 700 !important; }

@media (prefers-reduced-motion: reduce) {
  .gd-pad-b, .gd-pad-run, #viewGuides .gd-map-i { transition: none !important; }
}

/* ── "On this page" on a topic (mountGuideToc): docs.cariara.com's contents,
   strictly — Instrument Sans, a hairline guide line, the current section in
   ink with a short ink bar. Beside the topic from 1100px; hidden below. ── */
#viewGuides {
  --toc-font: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --toc-ink: #1F1F1F; --toc-text-3: #5E5E5E; --toc-line: #E1E3E1;
}
html[data-scheme='dark'] #viewGuides { --toc-ink: #E6EDF3; --toc-text-3: #9DA9B6; --toc-line: #444C56; }
html body :is(#viewGuides .gd-body.has-toc, #gd#gd#gd#gd) { grid-template-columns: minmax(0, 1fr) 248px; column-gap: 40px; align-items: start; }
#viewGuides .gd-main { min-width: 0; display: grid; gap: 16px; align-content: start; }
#viewGuides .gd-toc { position: sticky; top: 0; max-height: calc(100vh - 32px); overflow-y: auto; padding-top: 8px; scrollbar-width: thin; }
#viewGuides .gd-toc-t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--toc-ink); font: 500 14px/1 var(--toc-font); }
#viewGuides .gd-toc-t svg { color: var(--toc-text-3); }
#viewGuides .gd-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--toc-line); }
#viewGuides .gd-toc a {
  position: relative; display: block; padding: 6px 0 6px 14px;
  color: var(--toc-text-3); font: 400 13px/1.45 var(--toc-font); text-decoration: none; transition: color .15s;
}
#viewGuides .gd-toc a.is-sub { padding-left: 28px; }
#viewGuides .gd-toc a:hover { color: var(--toc-ink); }
#viewGuides .gd-toc a.is-active { color: var(--toc-ink); font-weight: 500; }
#viewGuides .gd-toc a.is-active::before { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--toc-ink); }
@media (max-width: 1099px) {
  html body :is(#viewGuides .gd-body.has-toc, #gd#gd#gd#gd) { grid-template-columns: minmax(0, 1fr); }
  #viewGuides .gd-toc { display: none; }
}
@media (prefers-reduced-motion: reduce) { #viewGuides .gd-toc a { transition: none; } }