/* ══════════════════════════════════════════════════════════════
   The library — categories, row tags, related problems, the coach.

   Loaded after layout.css. Everything is drawn from tokens (surfaces,
   hairlines, the four hues and their tints), so dark.css and the SolveMe
   skin restyle it without a rule here. Square corners, hairline borders,
   tints for colour: the Prepare look the rest of the list already wears.
   ══════════════════════════════════════════════════════════════ */

/* A category's hue: the four Google tones, each with its tint. */
.tone-blue   { --ct: var(--g-blue, #0077FF);   --ct-text: var(--g-blue-text, #0062D6);   --ct-t: var(--cmk-blue-t, var(--pz-blue-t, #EEF3FE)); }
.tone-red    { --ct: var(--g-red, #5AA2FF);    --ct-text: var(--g-red-text, #2B83EC);    --ct-t: var(--cmk-red-t, var(--pz-red-t, #F2F7FF)); }
.tone-yellow { --ct: var(--g-yellow, #9AD61A); --ct-text: var(--g-yellow-text, #5E8C0A); --ct-t: var(--cmk-yellow-t, var(--pz-yellow-t, #F7FDE6)); }
.tone-green  { --ct: var(--g-green, #00C896);  --ct-text: var(--g-green-text, #00866B);  --ct-t: var(--cmk-green-t, var(--pz-green-t, #EEFBF6)); }

/* ── the category grid ────────────────────────────────────── */
.plv-cats { margin-bottom: 16px; }
.plv-cats:empty, .plv-cats.is-hidden { display: none; }
.cat-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}
.cat-card {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 36px; grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 10px; align-items: start;
  padding: 12px 12px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--surface-1); color: var(--text-primary);
  transition: border-color .12s, background-color .12s, transform .12s;
}
.cat-card:hover { border-color: var(--ct); background: color-mix(in oklab, var(--ct-t) 45%, var(--surface-1)); }
.cat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat-card:active { transform: translateY(1px); }
.cat-card.is-done { border-color: color-mix(in oklab, var(--success) 50%, var(--hairline)); }
.cat-mark {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  background: var(--ct-t); color: var(--ct-text);
  font: 800 12.5px/1 var(--lv-display, var(--font-sans)); letter-spacing: .02em;
}
.cat-mark.is-lg { width: 52px; height: 52px; font-size: 17px; }
.cat-body { display: grid; gap: 3px; min-width: 0; }
.cat-name { font: 600 14px/1.25 var(--lv-display, var(--font-sans)); color: var(--text-primary); }
.cat-blurb {
  font: 400 12px/1.4 var(--font-sans); color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-ring {
  --pct: 0;
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: conic-gradient(var(--ct) calc(var(--pct) * 1%), var(--hairline) 0);
}
.cat-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface-1); }
.cat-ring b { position: relative; font: 700 10.5px/1 var(--font-mono); color: var(--text-primary); display: inline-flex; align-items: baseline; }
.cat-ring b i { font-style: normal; font-size: 8px; color: var(--text-dimmed); }
.cat-ring.is-lg { width: 64px; height: 64px; }
.cat-ring.is-lg::before { inset: 6px; }
.cat-ring.is-lg b { font-size: 15px; }
.cat-ring.is-lg b i { font-size: 10px; }
.cat-card.is-done .cat-ring { background: var(--success); }
.cat-card.is-done .cat-ring b { color: var(--success); }
.cat-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.cat-n { font: 500 12px/1 var(--font-mono); color: var(--text-dimmed); white-space: nowrap; }
.cat-n b { font-weight: 700; color: var(--text-primary); }
.cat-n small { font-size: 11px; color: var(--text-dimmed); }
/* Easy / Medium / Hard as one bar, each tier as wide as its share of the
   category: the faint track is the tier, the solid part what is solved. */
.cat-split { flex: 1; display: flex; gap: 2px; height: 5px; }
.cat-split i { display: block; height: 100%; overflow: hidden; background: color-mix(in oklab, currentColor 22%, transparent); }
.cat-split i.d-Easy-bg { color: var(--easy); } .cat-split i.d-Medium-bg { color: var(--medium); } .cat-split i.d-Hard-bg { color: var(--hard); }
.cat-split i b { display: block; height: 100%; background: currentColor; }

/* ── one category in full ─────────────────────────────────── */
.cat-hero {
  border: 1px solid var(--hairline); background: var(--surface-1);
  border-top: 2px solid var(--ct);
}
.cat-hero-top { display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 12px; }
.cat-hero-copy { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cat-kicker { font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ct-text); }
.cat-hero-t { margin: 0; font: 700 22px/1.15 var(--lv-display, var(--font-sans)); letter-spacing: -.01em; color: var(--text-primary); }
.cat-hero-b { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--text-secondary); max-width: 68ch; }
.cat-x {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 10px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); cursor: pointer;
  font: 500 12.5px var(--font-sans);
}
.cat-x:hover { border-color: var(--text-dimmed); color: var(--text-primary); }
.cat-hero-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--hairline);
}
.cat-hero-cell { display: grid; align-content: start; gap: 8px; padding: 14px 16px; border-right: 1px solid var(--hairline); }
.cat-hero-cell:last-child { border-right: 0; }
.cat-k { font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dimmed); margin-top: 4px; }
.cat-k:first-child { margin-top: 0; }
.cat-prog { display: flex; align-items: center; gap: 14px; }
.cat-tiers { flex: 1; display: grid; gap: 7px; min-width: 0; }
.cat-tier { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 8px; }
.cat-tier > span:first-child { font: 600 12px var(--font-sans); }
.cat-tier-bar { height: 5px; background: var(--hairline); overflow: hidden; }
.cat-tier-bar i { display: block; height: 100%; }
.cat-tier-n { font: 400 11.5px var(--font-mono); color: var(--text-dimmed); }
.cat-next { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-done { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--font-sans); color: var(--success); }
.cat-pats { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-pat {
  padding: 4px 9px; border: 1px solid var(--hairline); background: var(--ct-t); color: var(--text-primary);
  font: 500 12px/1.2 var(--font-sans);
}
.cat-prereqs { display: grid; gap: 6px; }
.cat-prereq { display: grid; gap: 1px; font: 400 12.5px/1.4 var(--font-sans); color: var(--text-secondary); }
.cat-prereq b { font-weight: 600; color: var(--text-primary); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 4px;
  border: 1px solid var(--hairline); background: var(--surface-1); color: var(--text-primary); cursor: pointer;
  font: 500 12.5px var(--font-sans);
}
.cat-chip:hover { border-color: var(--ct); background: var(--ct-t); }
.cat-chip small { font: 400 11px var(--font-mono); color: var(--text-dimmed); }
.cat-chip.is-done small { color: var(--success); }
.cat-chip-m {
  display: grid; place-items: center; width: 20px; height: 20px; background: var(--ct-t); color: var(--ct-text);
  font: 800 9px/1 var(--lv-display, var(--font-sans)); letter-spacing: .02em;
}
.cat-links { display: grid; gap: 4px; }
.cat-link {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; margin: 0 -8px;
  border: 0; background: transparent; color: var(--accent-text); cursor: pointer; text-decoration: none; text-align: left;
  font: 500 13px var(--font-sans);
}
.cat-link:hover { background: var(--accent-subtle); }

/* ── the table: section marks, row tags, Prepare rows ────── */
.plv-sec-mark {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  background: var(--ct-t); color: var(--ct-text);
  font: 800 9.5px/1 var(--lv-display, var(--font-sans)); letter-spacing: .02em;
}
/* The mark replaces the Prepare skin's tilted square before the title. */
.plv-sec-mark + .plv-sec-t::before { display: none; }
.plv-sec-sub {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 12px var(--font-sans); color: var(--text-dimmed);
}
.plv-sec-h.is-static { cursor: default; }
.plv-sec-h.is-static:hover { background: var(--surface-2, var(--surface-1)); }
.plv-tags { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; }
.plv-tags:empty { display: none; }
.plv-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; white-space: nowrap;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface-1);
  font: 500 10.5px/1 var(--font-sans); color: var(--text-dimmed);
}
.plv-tag.is-lc { font-family: var(--font-mono); letter-spacing: 0; }
.plv-tag.is-kind { background: var(--cmk-blue-t, var(--pz-blue-t, #EEF3FE)); color: var(--g-blue-text); border-color: transparent; }
.plv-tag.is-langs { background: var(--cmk-green-t, var(--pz-green-t, #EEFBF6)); color: var(--g-green-text); border-color: transparent; }
.plv-row.is-read { color: var(--text-secondary); }
.plv-row.is-read .plv-st { color: var(--text-dimmed); }
.plv-row.is-read .plv-title { font-weight: 400; }
.plv-sec-read { grid-column: 1 / -1; }
.plv-more { margin: 0; padding: 10px 14px; font: 400 12.5px var(--font-sans); color: var(--text-dimmed); border-top: 1px solid var(--hairline); }
.plv-read { border-top: 1px solid var(--hairline); }
.plv-read summary {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; cursor: pointer; list-style: none;
  font: 500 12.5px var(--font-sans); color: var(--text-secondary);
}
.plv-read summary::-webkit-details-marker { display: none; }
.plv-read summary:hover { background: var(--surface-2); color: var(--accent-text); }
.plv-read-k { display: grid; place-items: center; width: 40px; margin-left: -14px; color: var(--text-dimmed); }
.plv-read-c { margin-left: auto; display: grid; place-items: center; transform: rotate(90deg); transition: transform .14s; color: var(--text-dimmed); }
.plv-read[open] .plv-read-c { transform: rotate(-90deg); }
.plv-read-list { border-top: 1px solid var(--hairline); background: var(--surface-2); }
.plv-read-list .plv-row:first-child { border-top: 0; }
.plv-read-all {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px;
  font: 500 12.5px var(--font-sans); color: var(--accent-text); text-decoration: none;
}
.plv-read-all:hover { text-decoration: underline; }

/* ── the problem page: where it sits, what comes next ────── */
.rel-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.rel-k { font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dimmed); margin-right: 2px; }
.rel-cat {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 3px;
  border: 1px solid var(--hairline); background: var(--surface-1); color: var(--text-primary); cursor: pointer;
  font: 500 12.5px var(--font-sans);
}
.rel-cat:hover { border-color: var(--ct); background: var(--ct-t); }
.rel-sub, .rel-list, .rel-lc {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 500 11.5px var(--font-sans); color: var(--text-secondary); border: 1px solid var(--hairline);
}
.rel-list { background: var(--cmk-yellow-t, var(--pz-yellow-t, #F7FDE6)); color: var(--g-yellow-text); border-color: transparent; }
.rel-lc { font-family: var(--font-mono); color: var(--text-dimmed); }
.rel-list-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.rel-p {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px; border: 1px solid var(--hairline); background: var(--surface-1);
  color: var(--text-primary); text-decoration: none;
}
.rel-p:hover { border-color: var(--accent); background: var(--accent-subtle); }
.rel-p-st { display: grid; place-items: center; color: var(--text-disabled, var(--text-dimmed)); }
.rel-p.is-done .rel-p-st { color: var(--success); }
.rel-p-t { font: 500 13px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-p-d { font: 700 11px var(--font-mono); text-align: center; }

/* ── the coach: hints, review, a failing test explained ─── */
.coach { display: grid; gap: 14px; }
.coach-intro { margin: 0; font: 400 13.5px/1.5 var(--font-sans); color: var(--text-secondary); }
.coach-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-act {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); cursor: pointer;
  font: 500 13px var(--font-sans);
}
.coach-act:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); background: var(--accent-subtle); }
.coach-act:disabled { opacity: .55; cursor: default; }
.coach-act .ico { color: var(--accent-text); }
.coach-card { border: 1px solid var(--hairline); background: var(--surface-1); }
.coach-card-h {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border-bottom: 1px solid var(--hairline); background: var(--surface-2);
  font: 600 12.5px var(--font-sans); color: var(--text-primary);
}
.coach-card-h small { margin-left: auto; font: 400 11.5px var(--font-mono); color: var(--text-dimmed); }
.coach-card-b { padding: 12px; font: 400 13.5px/1.55 var(--font-sans); color: var(--text-primary); }
.coach-card-b p { margin: 0 0 8px; }
.coach-card-b p:last-child { margin-bottom: 0; }
.coach-card-b code { font: 500 12.5px var(--font-mono); padding: 1px 4px; background: var(--surface-2); }
.coach-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: hint; }
.coach-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.coach-step::before {
  counter-increment: hint; content: counter(hint);
  display: grid; place-items: center; width: 22px; height: 22px;
  background: var(--accent-subtle); color: var(--accent-text); font: 700 11px/1 var(--font-mono);
}
.coach-step.is-locked { color: var(--text-dimmed); }
.coach-step.is-locked::before { background: var(--surface-2); color: var(--text-dimmed); }
.coach-sec { display: grid; gap: 4px; margin-top: 10px; }
.coach-sec > span { font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dimmed); }
.coach-list { margin: 0; padding-left: 18px; }
.coach-list li { margin: 3px 0; }
.coach-verdict { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font: 600 12px var(--font-sans); border-radius: 999px; }
.coach-verdict.is-ok { background: var(--success-bg); color: var(--success); }
.coach-verdict.is-warn { background: var(--warning-bg); color: var(--warning); }
.coach-verdict.is-bad { background: var(--danger-bg); color: var(--danger); }
.coach-cx { display: flex; flex-wrap: wrap; gap: 6px; }
.coach-cx span { padding: 3px 8px; border: 1px solid var(--hairline); font: 500 12px var(--font-mono); color: var(--text-secondary); }
.coach-wait { display: flex; align-items: center; gap: 8px; color: var(--text-dimmed); font: 400 13px var(--font-sans); }
.coach-wait i { width: 14px; height: 14px; border: 2px solid var(--hairline); border-top-color: var(--accent); border-radius: 50%; animation: coach-spin .8s linear infinite; }
@keyframes coach-spin { to { transform: rotate(360deg); } }
.coach-err { color: var(--danger); }
.coach-note { font: 400 12px/1.45 var(--font-sans); color: var(--text-dimmed); margin: 0; }

@media (max-width: 760px) {
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .cat-card { grid-template-columns: 32px minmax(0, 1fr); }
  .cat-card .cat-ring { display: none; }
  .cat-blurb { display: none; }
  .cat-hero-top { padding: 12px; }
  .cat-hero-cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .plv-tags { display: none; }
}

/* The Coach tab's button wears the spark. */
.docnav-b.is-coach { display: inline-flex; align-items: center; gap: 5px; }
.docnav-b.is-coach .ico { color: var(--accent-text); }
.coach .doc-h { display: inline-flex; align-items: center; gap: 6px; }
.coach .doc-h .ico { color: var(--accent-text); }
.cat-next { text-decoration: none; }

/* ── Review Masters: the problem's questions and notes (masters.js) ── */
.rm { display: grid; gap: 12px; }
.rm-compose { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--hairline); background: var(--surface-1); }
.rm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rm-chip {
  height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-secondary); font: 600 12.5px var(--font-sans); cursor: pointer;
}
.rm-chip:hover { color: var(--text-primary); }
.rm-chip.is-on { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-1); }
.rm-pick { height: 28px; margin-left: auto; padding: 0 8px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); font: 500 12.5px var(--font-sans); }
.rm-input {
  width: 100%; min-height: 72px; resize: vertical; padding: 8px 10px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary);
  font: 400 13.5px/1.5 var(--font-sans);
}
.rm-input:focus { outline: none; border-color: var(--g-blue); }
.rm-ctx { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-left: 2px solid var(--g-blue); background: var(--surface-2); font: 400 12.5px var(--font-sans); color: var(--text-secondary); }
.rm-ctx span { flex: 1; min-width: 0; }
.rm-x { border: 0; background: none; color: var(--text-dimmed); font-size: 16px; line-height: 1; cursor: pointer; }
.rm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.rm-err { margin-right: auto; color: var(--err-text); font: 400 12.5px var(--font-sans); }
.rm-list { display: grid; }
.rm-thread { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.rm-thread:last-child { border-bottom: 0; }
.rm-item { display: grid; gap: 6px; }
.rm-item.is-reply { margin: 10px 0 0 12px; padding-left: 12px; border-left: 1px solid var(--hairline); }
.rm-item.is-ai.is-reply { border-left-color: var(--g-blue); }
.rm-wait { display: flex; align-items: center; gap: 8px; color: var(--text-dimmed); font: 400 12.5px var(--font-sans); }
.rm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 400 12.5px var(--font-sans); }
.rm-ava {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--surface-2); color: var(--text-secondary);
  font: 700 12px/1 var(--font-sans); object-fit: cover;
}
.rm-ava.is-ai { border-color: transparent; background: var(--g-blue); color: #fff; }
.rm-name { color: var(--text-primary); font-weight: 700; }
.rm-time { color: var(--text-dimmed); font-size: 12px; }
.rm-kind { padding: 1px 8px; border-radius: 999px; font: 700 12px var(--font-sans); }
.rm-kind.is-question { color: var(--g-blue-text); background: color-mix(in srgb, var(--g-blue) 12%, transparent); }
.rm-kind.is-note { color: var(--g-green-text); background: color-mix(in srgb, var(--g-green) 12%, transparent); }
.rm-kind.is-answer { color: var(--g-yellow-text); background: color-mix(in srgb, var(--g-yellow) 16%, transparent); }
.rm-anchor { padding: 1px 8px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--text-secondary); font: 500 12px var(--font-sans); }
.rm-body { position: relative; font: 400 13.5px/1.55 var(--font-sans); color: var(--text-primary); overflow-wrap: anywhere; }
.rm-body .md p { margin: 0 0 6px; }
.rm-body .md p:last-child { margin-bottom: 0; }
.rm-body.is-spoiler .rm-text { filter: blur(6px); user-select: none; pointer-events: none; }
.rm-reveal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 4px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--text-primary); font: 700 12.5px var(--font-sans); cursor: pointer;
}
.rm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.rm-ask { margin: 10px 0 0 24px; }
.rm-act { padding: 0; border: 0; background: none; color: var(--text-dimmed); font: 700 12px var(--font-sans); cursor: pointer; }
.rm-act:hover:not(:disabled) { color: var(--text-primary); }
.rm-act:disabled { opacity: .6; cursor: default; }
.rm-act.is-on { color: var(--g-blue-text); }
.rm-act.is-danger:hover { color: var(--err-text); }
.rm-filters { padding-top: 4px; }
.rm-input.is-short { min-height: 38px; }
.rm-code {
  margin: 6px 0 0; padding: 10px 12px; max-height: 360px; overflow: auto;
  border: 1px solid var(--hairline); background: var(--surface-2);
  font: 400 12.5px/1.5 var(--font-mono); color: var(--text-primary); white-space: pre;
}
.rm-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: 400 12.5px var(--font-sans); color: var(--text-secondary); }
.rm-verdict b { padding: 1px 9px; border-radius: 999px; font: 700 12px var(--font-sans); }
.rm-verdict.is-ok b { color: var(--g-green-text); background: color-mix(in srgb, var(--g-green) 14%, transparent); }
.rm-verdict.is-bad b { color: var(--err-text); background: color-mix(in srgb, var(--err) 12%, transparent); }
.rm-verdict.is-checking { color: var(--text-dimmed); gap: 8px; }
.rm-verdict.is-checking i { width: 12px; height: 12px; border: 2px solid var(--hairline); border-top-color: var(--g-blue); border-radius: 50%; animation: coach-spin .8s linear infinite; }
.rm-fail summary { cursor: pointer; font: 600 12px var(--font-sans); color: var(--text-secondary); }
.rm-fail dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 6px 0 0; font: 400 12px var(--font-sans); }
.rm-fail dt { color: var(--text-dimmed); }
.rm-fail dd { margin: 0; overflow-wrap: anywhere; }
.rm-fail code { font: 400 12px var(--font-mono); }
.rm-copies { margin: 0; font: 400 12px var(--font-sans); color: var(--text-dimmed); }
.rm > :not(.doc-h) { margin-inline: 24px; }
.rm-kind.is-solution { color: var(--text-primary); border: 1px solid var(--hairline); }
.rm-input.is-mono { font: 400 12.5px/1.5 var(--font-mono); }
.rm-line {
  height: 32px; padding: 0 10px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-primary); font: 400 13.5px var(--font-sans); min-width: 0; width: 100%;
}
.rm-line.is-mono { font: 400 12.5px var(--font-mono); }
.rm-line:focus { outline: none; border-color: var(--g-blue); }
.rm-idea { flex-wrap: nowrap; }
.rm-idea .rm-line { flex: 1 1 auto; }
.rm-idea .btn { flex: 0 0 auto; }
.rm-vform { display: grid; gap: 10px; }
.rm-field { display: grid; gap: 4px; }
.rm-field > span { font: 600 12px var(--font-sans); color: var(--text-secondary); }
.rm-field .rm-pick { margin-left: 0; }
.rm-grow { flex: 1 1 auto; }
.rm-vtitle { margin: 0; font: 700 15px/1.3 var(--font-sans); color: var(--text-primary); }
.rm-vstatement { max-height: 220px; overflow: auto; }
.rm-act.is-go { color: var(--g-blue-text); }
.rm-kind.is-variant { color: var(--g-blue-text); border: 1px solid color-mix(in srgb, var(--g-blue) 40%, transparent); }
.rm-kind.is-breaker { color: var(--err-text); border: 1px solid color-mix(in srgb, var(--err) 40%, transparent); }
.uc-chip.is-community { border-style: dashed; }
.rm-level { padding: 0 8px; border: 1px solid var(--hairline); border-radius: 999px; font: 700 12px var(--font-sans); color: var(--text-secondary); }
.rm-kind.is-correction { color: var(--err-text); background: color-mix(in srgb, var(--err) 10%, transparent); }
.rm-state { font: 700 12px var(--font-sans); color: var(--text-dimmed); }
.rm-state.is-merged { color: var(--g-green-text); }
.rm-state.is-declined { color: var(--err-text); }
.rm-fix { display: grid; gap: 2px; margin: 0; padding: 6px 10px; border-left: 2px solid var(--err); background: var(--surface-2); overflow-wrap: anywhere; }
.rm-fix del { color: var(--err-text); }
.rm-fix ins { color: var(--g-green-text); text-decoration: none; }
.rm-fix em { color: var(--text-dimmed); }
.rm-input.is-fix { border-left: 2px solid var(--g-green); }
mark.rm-fixed { background: color-mix(in srgb, var(--g-green) 14%, transparent); color: inherit; border-bottom: 1px dashed var(--g-green-text); padding: 0 1px; }
.rm-digest { margin: -6px 0 0; font: 400 12.5px var(--font-sans); color: var(--text-secondary); }
.rm-top { padding: 0 8px; border-radius: 999px; font: 700 12px var(--font-sans); color: var(--g-yellow-text); background: color-mix(in srgb, var(--g-yellow) 16%, transparent); }