/* COPIED from src/content.css by scripts/sync-engine.py -- do not edit here. */
/* RootScroll injected styles — scoped under rs- classes to avoid clashing with host pages */

/* ---- Design refresh tokens + fonts (2026-09-23) ----
   The @tokens block is a byte-for-byte copy of src/tokens.css's (this file
   can't @import it: content-script CSS resolves relative urls against the
   host page); tests/design-tokens.test.js fails on drift. The fonts load by
   absolute extension URL for the same reason, and are web-accessible for
   exactly that (manifest.json). They are only fetched when an element that
   uses them renders -- the word card, not the highlight -- so a page nobody
   clicks on never downloads a font. build-safari.sh rewrites the scheme. */
@font-face{font-family:"RS Fraunces C";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/fraunces-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"RS Fraunces C";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"RS Fraunces C";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/fraunces-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"RS Fraunces C";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/fraunces-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"RS Inter C";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/inter-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"RS Inter C";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"RS Inter C";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"RS Inter C";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"RS Inter C";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-latin-700-normal.woff2") format("woff2")}
/* @tokens */
:root{
  /* light surfaces */
  --rsd-bg:#E8DDCC;--rsd-paper:#F1E9DC;--rsd-paper-hover:#F6F0E6;
  --rsd-ink:#5A3820;--rsd-ink2:rgba(90,56,32,.68);--rsd-ink3:rgba(90,56,32,.45);
  /* ink2 as SMALL text is 3.6:1 on --rsd-bg; this is the same ink at 80%,
     4.8:1 -- used for secondary copy under 18px. ink2/ink3 stay for large
     text, placeholders and decoration. */
  --rsd-ink-soft:rgba(90,56,32,.8);
  --rsd-line:rgba(90,56,32,.16);--rsd-line-strong:rgba(90,56,32,.28);
  /* dark cards (word popup, flashcards, toolbar menu) */
  --rsd-bark:#3A2A1F;--rsd-bark-deep:#2A1E16;--rsd-bark-inset:rgba(0,0,0,.18);
  --rsd-sage:#BFD4AA;--rsd-sage-deep:#6F8C58;--rsd-sage-wash:#D2DFC3;
  --rsd-cream:#E8DDCC;--rsd-cream85:rgba(232,221,204,.85);--rsd-cream70:rgba(232,221,204,.7);
  --rsd-cream60:rgba(232,221,204,.6);--rsd-cream45:rgba(232,221,204,.45);
  --rsd-cream-line:rgba(232,221,204,.12);--rsd-cream-wash:rgba(232,221,204,.06);--rsd-cream-wash2:rgba(232,221,204,.12);
  --rsd-rust:#A2553A;
  /* text-safe variants on light (>= 4.5:1 on --rsd-bg; the fills above are
     for dots, bars and lines, where 3:1 is the bar) */
  --rsd-sage-text:#4F6A3C;--rsd-rust-text:#8E4630;--rsd-gold-text:#7A5A1C;
  /* ratings: Don't know / Still fuzzy, Learning / Getting there, Got it / Know it, new */
  --rsd-rate-dk:#C0694B;--rsd-rate-learn:#D4A94F;--rsd-rate-got:#9DB785;--rsd-rate-new:#A8998A;
  /* type */
  --rsd-serif:"RS Fraunces","RS Fraunces C",Fraunces,Georgia,"Times New Roman",serif;
  --rsd-sans:"RS Inter","RS Inter C",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* shape */
  --rsd-r-popup:22px;--rsd-r-card:26px;--rsd-r-panel:16px;--rsd-r-btn:12px;--rsd-r-chip:10px;--rsd-r-pill:99px;
  --rsd-shadow-dark:0 30px 80px rgba(40,25,15,.45),0 0 0 1px rgba(232,221,204,.08);
  --rsd-shadow-card:0 26px 60px rgba(90,56,32,.35),0 0 0 1px rgba(90,56,32,.12);
  --rsd-shadow-soft:0 10px 30px rgba(90,56,32,.12);
  --rsd-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* @end-tokens */

/* ---- Light/dark theme tokens ----
   Primarily scoped to .rs-ui (every floating/card element this file's JS
   creates already carries that class — see content.js's/roots-content.js's/
   rootshelf.js's own comments on rsUiClass()/rsLightClass()) rather than
   :root, because this file runs in two contexts: loaded normally on
   RootScroll's own extension pages (dashboard.html/rootshelf.html), and
   injected straight into arbitrary host pages by content.js/roots-content.js.
   :root on a host page is that site's real <html> element — content.js
   never touches it (see this file's header comment on defending against
   host-page CSS; the same caution applies in the other direction, don't
   leak INTO the host page's own root either), so a host-injected .rs-ui
   element's light/dark state is decided once in JS at creation time and
   expressed purely as a class suffix, immune to whatever that host page's
   :root does.

   The :root block right below exists for a narrower reason: a few classes
   here (.rs-rootmap-*, .rs-check-*, .rs-teach-empty, .rs-familiarity) are
   used UNWRAPPED — not inside a .rs-ui element — by RootMap/RootCheck cards
   that live directly in the dashboard/RootShelf page's own DOM, styled
   alongside dashboard.css's .card. Without a fallback source, var(--rs-*)
   would resolve to nothing there. This :root block is always safe to ship
   into a host page too (unused custom properties are inert, and the
   selectors above only ever match elements this extension's own pages
   create, never anything a host page has) — .rs-ui's own explicit
   redeclaration below still wins over anything inherited from :root
   regardless, so host-injected chrome stays fully governed by the class
   suffix as before.

   Dark values are UNCHANGED from before this feature existed -- this
   file's original hardcoded hex, just renamed. Light values are new;
   accent colors used as text/borders (not solid-fill badges/buttons/dots,
   which keep their own fixed high-contrast pairing regardless of page
   theme — see e.g. .rs-tk-count, .rs-sb-badge,
   .rs-tk-dot below) are deepened enough to clear 4.5:1 against both light
   surfaces (validated with the dataviz skill's validate_palette.js
   contrast() — not eyeballed). rgba(0,0,0,...) box-shadows are left as
   literals throughout this file on purpose: shadows read as "dark" in both
   light and dark UI, they don't need a per-theme value. */
:root, .rs-ui{
  /* Design refresh (2026-09-23): the brand palette from tokens.css. This
     block and .rs-ui.rs-light are the LIGHT page values (ink on cream/paper),
     used by the unwrapped RootMap/RootCheck cards on the dashboard and by
     onboarding. Dark page values follow. The on-page cards themselves (word
     card, toast, video tracker, stats bar) are dark "bark" cards in BOTH
     themes -- see the last block below, which is why it comes last. */
  --brand-cream:#E8DDCC;--brand-sage:#C1C8AA;--brand-brown:#603820;
  --rs-bg: #E8DDCC; --rs-card: #F1E9DC; --rs-card2: #EDE3D2;
  --rs-line: rgba(90,56,32,.16); --rs-line2: rgba(90,56,32,.12); --rs-line3: rgba(90,56,32,.12);
  --rs-hover: rgba(90,56,32,.06); --rs-tab-hover: rgba(90,56,32,.06);
  --rs-tkhead-g1: #D2DFC3; --rs-tkhead-g1-hover: #C8D8B6;
  --rs-sb-bg: rgba(241,233,220,.97);
  --rs-wash-03: rgba(90,56,32,.03); --rs-wash-04: rgba(90,56,32,.04);
  --rs-wash-06: rgba(90,56,32,.05); --rs-wash-08: rgba(90,56,32,.07);
  --rs-wash-14: rgba(90,56,32,.1); --rs-wash-16: rgba(90,56,32,.12);
  --rs-text: #5A3820; --rs-text2: #765942; --rs-text3: #5A3820;
  --rs-mute: #765942; --rs-mute2: #7E614B; --rs-mute3: #765942; --rs-mute4: #765942;
  --rs-mute5: #6B4E37; --rs-mute6: #765942; --rs-mute7: #5A3820; --rs-mute8: rgba(90,56,32,.3);
  --rs-green: #4F6A3C; --rs-yellow: #7A5A1C; --rs-red: #9A3F2B; --rs-blue: #5A3820; --rs-purple: #8E4630;
}
:root[data-theme="dark"], .rs-ui.rs-dark{
  --rs-bg: #2A1E16; --rs-card: #3A2A1F; --rs-card2: #43322A;
  --rs-line: rgba(232,221,204,.14); --rs-line2: rgba(232,221,204,.1); --rs-line3: rgba(232,221,204,.1);
  --rs-hover: rgba(232,221,204,.06); --rs-tab-hover: rgba(232,221,204,.06);
  --rs-tkhead-g1: #3A2A1F; --rs-tkhead-g1-hover: #43322A;
  --rs-sb-bg: rgba(42,30,22,.97);
  --rs-wash-03: rgba(232,221,204,.03); --rs-wash-04: rgba(232,221,204,.04);
  --rs-wash-06: rgba(232,221,204,.06); --rs-wash-08: rgba(232,221,204,.08);
  --rs-wash-14: rgba(232,221,204,.14); --rs-wash-16: rgba(232,221,204,.16);
  --rs-text: #E8DDCC; --rs-text2: #CEC2B2; --rs-text3: #E8DDCC;
  --rs-mute: #B4A798; --rs-mute2: #A29587; --rs-mute3: #B4A798; --rs-mute4: #B4A798;
  --rs-mute5: #CEC2B2; --rs-mute6: #B4A798; --rs-mute7: #E8DDCC; --rs-mute8: rgba(232,221,204,.25);
  --rs-green: #BFD4AA; --rs-yellow: #D4A94F; --rs-red: #E07A62; --rs-blue: #E8DDCC; --rs-purple: #E09A78;
}
/* Light values, three ways to reach the same tokens depending on context:
   - .rs-ui.rs-light: host-injected elements — content.js/roots-content.js
     add this class explicitly per element (see the big comment above).
   - :root[data-theme="light"]: a manual override synced from Settings
     (see theme.js).
   Secondary text is ink at 80% (#765942, 4.8:1 on cream) rather than the
   design's 68%, which is 3.6:1 as small text. */
.rs-ui.rs-light {
  --rs-bg: #E8DDCC; --rs-card: #F1E9DC; --rs-card2: #EDE3D2;
  --rs-line: rgba(90,56,32,.16); --rs-line2: rgba(90,56,32,.12); --rs-line3: rgba(90,56,32,.12);
  --rs-hover: rgba(90,56,32,.06); --rs-tab-hover: rgba(90,56,32,.06);
  --rs-tkhead-g1: #D2DFC3; --rs-tkhead-g1-hover: #C8D8B6;
  --rs-sb-bg: rgba(241,233,220,.97);
  --rs-wash-03: rgba(90,56,32,.03); --rs-wash-04: rgba(90,56,32,.04);
  --rs-wash-06: rgba(90,56,32,.05); --rs-wash-08: rgba(90,56,32,.07);
  --rs-wash-14: rgba(90,56,32,.1); --rs-wash-16: rgba(90,56,32,.12);
  --rs-text: #5A3820; --rs-text2: #765942; --rs-text3: #5A3820;
  --rs-mute: #765942; --rs-mute2: #7E614B; --rs-mute3: #765942; --rs-mute4: #765942;
  --rs-mute5: #6B4E37; --rs-mute6: #765942; --rs-mute7: #5A3820; --rs-mute8: rgba(90,56,32,.3);
  --rs-green: #4F6A3C; --rs-yellow: #7A5A1C; --rs-red: #9A3F2B; --rs-blue: #5A3820; --rs-purple: #8E4630;
}
:root[data-theme="light"] {
  --rs-bg: #E8DDCC; --rs-card: #F1E9DC; --rs-card2: #EDE3D2;
  --rs-line: rgba(90,56,32,.16); --rs-line2: rgba(90,56,32,.12); --rs-line3: rgba(90,56,32,.12);
  --rs-hover: rgba(90,56,32,.06); --rs-tab-hover: rgba(90,56,32,.06);
  --rs-tkhead-g1: #D2DFC3; --rs-tkhead-g1-hover: #C8D8B6;
  --rs-sb-bg: rgba(241,233,220,.97);
  --rs-wash-03: rgba(90,56,32,.03); --rs-wash-04: rgba(90,56,32,.04);
  --rs-wash-06: rgba(90,56,32,.05); --rs-wash-08: rgba(90,56,32,.07);
  --rs-wash-14: rgba(90,56,32,.1); --rs-wash-16: rgba(90,56,32,.12);
  --rs-text: #5A3820; --rs-text2: #765942; --rs-text3: #5A3820;
  --rs-mute: #765942; --rs-mute2: #7E614B; --rs-mute3: #765942; --rs-mute4: #765942;
  --rs-mute5: #6B4E37; --rs-mute6: #765942; --rs-mute7: #5A3820; --rs-mute8: rgba(90,56,32,.3);
  --rs-green: #4F6A3C; --rs-yellow: #7A5A1C; --rs-red: #9A3F2B; --rs-blue: #5A3820; --rs-purple: #8E4630;
}
/* The on-page cards: bark, whatever the theme (the design's dark card).
   Same specificity as .rs-ui.rs-light / .rs-ui.rs-dark and later in the
   file, so it wins on the element that carries it. */
.rs-ui.rs-popup, .rs-ui.rs-toast, .rs-ui.rs-tracker, .rs-ui.rs-stats-bar {
  --rs-bg: #3A2A1F; --rs-card: rgba(232,221,204,.06); --rs-card2: rgba(0,0,0,.18);
  --rs-line: rgba(232,221,204,.12); --rs-line2: rgba(232,221,204,.1); --rs-line3: rgba(232,221,204,.1);
  --rs-hover: rgba(232,221,204,.08); --rs-tab-hover: #43322A;
  --rs-tkhead-g1: #3A2A1F; --rs-tkhead-g1-hover: #43322A;
  --rs-sb-bg: rgba(58,42,31,.97);
  --rs-wash-03: rgba(232,221,204,.03); --rs-wash-04: rgba(232,221,204,.04);
  --rs-wash-06: rgba(232,221,204,.06); --rs-wash-08: rgba(232,221,204,.09);
  --rs-wash-14: rgba(232,221,204,.14); --rs-wash-16: rgba(232,221,204,.16);
  --rs-text: #BFD4AA; --rs-text2: #CEC2B2; --rs-text3: #E8DDCC;
  --rs-mute: #B4A798; --rs-mute2: #A29587; --rs-mute3: #B4A798; --rs-mute4: #B4A798;
  --rs-mute5: #CEC2B2; --rs-mute6: #B4A798; --rs-mute7: #E8DDCC; --rs-mute8: rgba(232,221,204,.25);
  --rs-green: #BFD4AA; --rs-yellow: #D4A94F; --rs-red: #E0896B; --rs-blue: #E8DDCC; --rs-purple: #BFD4AA;
}

/* ---- Highlighted words (word-markup.js builds every one) ----
   V3 + brush wash (shipped 2026-09-23, chosen in design/highlight-lab.html):
     A SWAPPED WORD (.rs-word) sits on a watercolour brush stroke, in the
       host page's own text colour and weight. The stroke's colour IS the
       word's rating: brown = not rated yet, rust = Don't know, gold =
       Learning, sage = Got it. No line under the word.
     ROOTS (.rs-hw-seg) are bold brown, on their own letters only, inside
       everyday and SAT words alike. A rated root gets the ONE line: Don't
       know wavy, Learning dotted, Got it solid (word-markup.js's UNDERLINE),
       directly under its letters -- inside a swap too, since the word
       itself no longer draws a line.
   Colour-blind: the four strokes were tuned with a Machado-2009 check
   composited on the page (each pair >= 11 dE light / 15 dE dark under
   deuteranopia and protanopia; brown vs sage is carried by lightness), and
   the root lines differ by style as well as colour.
   The stroke is a ::before behind the word: a brush-shaped mask (an inline
   SVG, noise-roughened edges + grain, three shapes -- word-markup.js puts
   .rs-hw-v0/1/2 on each word so neighbours differ) filled with the wash
   colour. A single word never wraps, so one box per word is enough.
   Themed from the HOST background (word-markup.js adds .rs-hw-light on a
   light page), not RootScroll's own theme. Every colour / weight /
   decoration property is !important -- host resets target span/a/b and
   there is no shadow root between us and them. */
.rs-hw {
  --rs-hw-sat: #9DB785; --rs-hw-root: #E0B58A;
  --rs-hw-wash: rgba(170,130,90,.30); --rs-hw-wash-red: rgba(215,95,70,.55);
  --rs-hw-wash-yellow: rgba(245,210,105,.50); --rs-hw-wash-green: rgba(190,220,160,.48);
  --rs-hw-red: #F0A088; --rs-hw-yellow: #F2CF73; --rs-hw-green: #BFD4AA;
  --rs-hw-off: 3px; --rs-hw-noff: 10px;
}
.rs-hw.rs-hw-light {
  --rs-hw-sat: #6F8C58; --rs-hw-root: #6A3A1A;
  --rs-hw-wash: rgba(135,90,50,.38); --rs-hw-wash-red: rgba(150,50,30,.62);
  --rs-hw-wash-yellow: rgba(232,190,60,.60); --rs-hw-wash-green: rgba(180,212,150,.55);
  --rs-hw-red: #8E3B26; --rs-hw-yellow: #8F6A12; --rs-hw-green: #4F6A3C;
}
.rs-word {
  color: inherit !important;
  font-weight: inherit !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 4px !important;
  position: relative !important;
  z-index: 0 !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rs-word::before {
  content: "" !important; position: absolute !important; z-index: -1 !important;
  top: -0.06em !important; bottom: -0.06em !important; left: -2px !important; right: -2px !important;
  pointer-events: none !important;
  background-color: var(--rs-hw-wash, rgba(135,90,50,.38)) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-8%25' y='-30%25' width='116%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.22' numOctaves='3' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='9' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -0.55 1.05' result='ga'/%3E%3CfeComposite in='d' in2='ga' operator='in'/%3E%3C/filter%3E%3Crect x='6' y='7' width='228' height='34' rx='8' fill='black' filter='url(%23f)'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-8%25' y='-30%25' width='116%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.22' numOctaves='3' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='9' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -0.55 1.05' result='ga'/%3E%3CfeComposite in='d' in2='ga' operator='in'/%3E%3C/filter%3E%3Crect x='6' y='7' width='228' height='34' rx='8' fill='black' filter='url(%23f)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: filter .15s ease;
}
.rs-word.rs-hw-v1::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-8%25' y='-30%25' width='116%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.22' numOctaves='3' seed='10' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='9' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -0.55 1.05' result='ga'/%3E%3CfeComposite in='d' in2='ga' operator='in'/%3E%3C/filter%3E%3Crect x='6' y='7' width='228' height='34' rx='8' fill='black' filter='url(%23f)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-8%25' y='-30%25' width='116%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.22' numOctaves='3' seed='10' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='9' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -0.55 1.05' result='ga'/%3E%3CfeComposite in='d' in2='ga' operator='in'/%3E%3C/filter%3E%3Crect x='6' y='7' width='228' height='34' rx='8' fill='black' filter='url(%23f)'/%3E%3C/svg%3E"); }
.rs-word.rs-hw-v2::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-8%25' y='-30%25' width='116%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.22' numOctaves='3' seed='17' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='9' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='18' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -0.55 1.05' result='ga'/%3E%3CfeComposite in='d' in2='ga' operator='in'/%3E%3C/filter%3E%3Crect x='6' y='7' width='228' height='34' rx='8' fill='black' filter='url(%23f)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 48' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-8%25' y='-30%25' width='116%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.22' numOctaves='3' seed='17' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='9' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='18' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -0.55 1.05' result='ga'/%3E%3CfeComposite in='d' in2='ga' operator='in'/%3E%3C/filter%3E%3Crect x='6' y='7' width='228' height='34' rx='8' fill='black' filter='url(%23f)'/%3E%3C/svg%3E"); }
.rs-word:hover::before { filter: saturate(1.3) brightness(.94); }
/* The word's rating is its wash (and only its wash). */
.rs-word.rs-red::before { background-color: var(--rs-hw-wash-red, rgba(150,50,30,.62)) !important; }
.rs-word.rs-yellow::before { background-color: var(--rs-hw-wash-yellow, rgba(232,190,60,.60)) !important; }
.rs-word.rs-green::before { background-color: var(--rs-hw-wash-green, rgba(180,212,150,.55)) !important; }
.rs-hw-seg {
  color: var(--rs-hw-root, #6A3A1A) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.rs-hw-lead { color: inherit !important; }

/* A rated root: its one line. */
.rs-hw-seg.rs-hw-seg-red {
  text-decoration-line: underline !important; text-decoration-style: wavy !important;
  text-decoration-thickness: 2.2px !important; text-decoration-color: var(--rs-hw-red, #8E3B26) !important;
  text-underline-offset: var(--rs-hw-off, 3px) !important; text-decoration-skip-ink: none !important;
}
.rs-hw-seg.rs-hw-seg-yellow {
  text-decoration-line: underline !important; text-decoration-style: dotted !important;
  text-decoration-thickness: 2.2px !important; text-decoration-color: var(--rs-hw-yellow, #8F6A12) !important;
  text-underline-offset: var(--rs-hw-off, 3px) !important; text-decoration-skip-ink: none !important;
}
.rs-hw-seg.rs-hw-seg-green {
  text-decoration-line: underline !important; text-decoration-style: solid !important;
  text-decoration-thickness: 2.2px !important; text-decoration-color: var(--rs-hw-green, #4F6A3C) !important;
  text-underline-offset: var(--rs-hw-off, 3px) !important; text-decoration-skip-ink: none !important;
}

/* Vocab only: the stroke, no root letters or lines (roots-content.js is off). */
.rs-word.rs-hw-m-vocab .rs-hw-seg { color: inherit !important; font-weight: inherit !important; text-decoration: none !important; }
/* Roots only: words are still swapped but show only their roots -- no stroke. */
.rs-word.rs-hw.rs-hw-m-roots { color: inherit !important; font-weight: inherit !important; text-decoration: none !important; padding: 0 !important; }
.rs-word.rs-hw-m-roots::before { display: none !important; }
.rs-word.rs-hw-m-roots .rs-hw-lead { color: inherit !important; }

/* ---- popup ----
   Design refresh (2026-09-23): the word card is a bark card, ~420px, with
   the rs mark, the level/frequency pills and the save toggle along the top,
   the headword large and centred in Fraunces, then the definition, the root
   chips (word-markup.js buildRootChips) over the root tendril, the original
   sentence, the rating buttons and quiet text links. content.js still
   builds the same elements in the same order; the layout is all here
   (flex-wrap + order on the head). The mark and the tendril are CSS
   backgrounds from icons/brand (web-accessible for exactly this). */
.rs-popup {
  position: absolute !important;
  z-index: 2147483647;
  width: min(420px, calc(100vw - 24px)) !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain;
  background: var(--rsd-bark, #3A2A1F) !important;
  color: var(--rs-text);
  border: none !important;
  border-radius: var(--rsd-r-popup, 22px) !important;
  padding: 18px 22px 16px !important;
  box-shadow: var(--rsd-shadow-dark, 0 30px 80px rgba(40,25,15,.45), 0 0 0 1px rgba(232,221,204,.08)) !important;
  font-family: var(--rsd-sans, system-ui, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  animation: rs-pop-in .18s ease-out;
}
/* The design's faint paper grain on dark cards. */
.rs-popup::before {
  content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important;
  border-radius: inherit !important; pointer-events: none !important;
  opacity: .08 !important; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
}
@keyframes rs-pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rs-popup { animation: none; } }
/* Head: row 1 = mark, level pill, frequency pill ... save; row 2 = the
   headword, full width, centred; row 3 = part of speech + speaker, centred. */
.rs-pop-head { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 0 6px !important; }
.rs-pop-head::before {
  content: "" !important; order: 0; display: block !important; flex: 0 0 auto !important;
  width: 22px !important; height: 24px !important; margin-right: 3px !important;
  background: url("../icons/brand/mark-sage.png") center / contain no-repeat !important;
}
.rs-pop-head > .rs-pop-level { order: 1; }
.rs-pop-head > .rs-pop-freq { order: 2; }
.rs-pop-head > .rs-pop-diff { order: 2; }
.rs-pop-head > .rs-pop-save { order: 3; }
.rs-pop-head > .rs-pop-word { order: 4; flex: 1 0 100% !important; text-align: center !important; justify-content: center !important; }
.rs-pop-head > .rs-pop-pos { order: 5; }
.rs-pop-head > .rs-speak-btn { order: 6; }
/* white-space/word-break/overflow-wrap pinned defensively: without these,
   a host page's own global word-breaking rules (Reddit's redesign does this)
   leak into this unstyled span and can split the title itself mid-word
   ("chastis"/"e") instead of wrapping at a word boundary — see this file's
   header comment on host-page CSS leaking into injected elements. */
.rs-pop-word {
  font-family: var(--rsd-serif, Georgia, serif) !important;
  font-size: 46px !important; font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.04 !important;
  color: var(--rsd-sage, #BFD4AA) !important;
  white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important;
  margin: 8px 0 2px !important;
}
/* Save/bookmark toggle: pinned to the top row's right edge. The 🔖 stays in
   the DOM (and the aria-label says what it does); what shows is a drawn
   bookmark, since the design keeps emoji for roots only. */
.rs-pop-save {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; min-width: 30px !important; height: 30px !important;
  padding: 0 !important; margin: 0 0 0 auto !important;
  border: none !important; border-radius: 50% !important;
  background: var(--rsd-cream-wash2, rgba(232,221,204,.12)) !important;
  color: var(--rsd-cream, #E8DDCC) !important;
  font-size: 0 !important; line-height: 1 !important;
  cursor: pointer !important; flex-shrink: 0 !important;
  transition: background 0.15s ease;
}
.rs-pop-save::before {
  content: "" !important; display: block !important; width: 12px !important; height: 15px !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M1.5 1h9v12.2L6 10.4 1.5 13.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M1.5 1h9v12.2L6 10.4 1.5 13.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rs-pop-save:hover { background: rgba(232,221,204,.2) !important; }
.rs-pop-save.active { background: var(--rsd-sage, #BFD4AA) !important; color: var(--rsd-bark, #3A2A1F) !important; }
.rs-pop-save.active::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M1.5 1h9v12.2L6 10.4 1.5 13.2z' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M1.5 1h9v12.2L6 10.4 1.5 13.2z' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* A card's headword, as a link to its flashcard (word-markup.js buildHeadword). */
.rs-pop-word-link {
  background: none !important; border: none !important; padding: 0 !important;
  font: inherit !important;
  font-family: var(--rsd-serif, Georgia, serif) !important; font-size: 46px !important; font-weight: 600 !important;
  letter-spacing: -.02em !important; color: var(--rsd-sage, #BFD4AA) !important;
  cursor: pointer !important; line-height: 1.04 !important;
  display: inline-flex !important; align-items: flex-start !important; gap: 6px !important;
  text-decoration: none !important; box-shadow: none !important; min-width: 0 !important; height: auto !important;
}
.rs-pop-word-link:hover { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 6px !important; }
.rs-pop-word-link:focus-visible { outline: 2px solid var(--rsd-sage-deep, #6F8C58) !important; outline-offset: 3px !important; border-radius: 6px !important; }
.rs-root-tree-study {
  display: block !important; margin: 6px 0 2px !important; padding: 0 !important; background: none !important;
  border: none !important; font: inherit !important; font-size: 12px !important; font-weight: 600 !important;
  color: var(--rsd-sage, #BFD4AA) !important; cursor: pointer !important; text-decoration: underline !important;
  text-underline-offset: 2px !important; text-align: left !important; line-height: 1.3 !important;
}
/* The "open in Study" arrow, as the design's small round button beside the word. */
.rs-pop-word-go {
  font-family: var(--rsd-sans, system-ui, sans-serif) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 26px !important; height: 26px !important; border-radius: 50% !important; margin-top: 4px !important;
  background: var(--rsd-cream-wash2, rgba(232,221,204,.12)) !important; color: var(--rsd-cream, #E8DDCC) !important;
}
.rs-pop-word-link:hover .rs-pop-word-go { background: rgba(232,221,204,.22) !important; }
/* Pronunciation button — reset defensively against host-page button styles
   like every other injected control in this file (see this file's header).
   The 🔊 stays in the DOM; a drawn speaker shows (emoji are for roots). */
.rs-speak-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; min-width: 30px !important; height: 30px !important;
  padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 50% !important;
  background: rgba(191,212,170,.16) !important; color: var(--rsd-sage, #BFD4AA) !important;
  font-size: 0 !important; line-height: 1 !important; white-space: nowrap !important; overflow: visible !important;
  cursor: pointer;
}
.rs-speak-btn::before {
  content: "" !important; display: block !important; width: 15px !important; height: 15px !important; background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z' fill='black'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z' fill='black'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rs-speak-btn:hover { background: rgba(191,212,170,.28) !important; }
/* Level ("SAT" / "GRE" / "FOUNDATIONS" / "ROOT") and frequency: the design's outlined pills. */
.rs-pop-level, .rs-pop-freq, .rs-pop-diff {
  font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .02em !important;
  padding: 3px 9px !important; border-radius: 99px !important; white-space: nowrap !important;
  color: var(--rsd-cream, #E8DDCC) !important; background: transparent !important;
  border: 1px solid rgba(232,221,204,.3) !important; margin: 0 !important; line-height: 1.2 !important;
}
.rs-lvl-sat, .rs-lvl-gre, .rs-lvl-foundations, .rs-lvl-root { color: var(--rsd-cream, #E8DDCC) !important; }
.rs-pop-pos {
  font-family: var(--rsd-serif, Georgia, serif) !important; font-style: italic !important; font-weight: 400 !important;
  font-size: 17px !important; color: var(--rsd-cream85, rgba(232,221,204,.85)) !important; white-space: nowrap !important; margin: 0 !important;
}
.rs-pop-orig { font-size: 13px !important; color: var(--rsd-cream70, rgba(232,221,204,.7)) !important; text-align: center !important; margin: 4px 0 0 !important; }
.rs-pop-orig s { color: var(--rsd-cream70, rgba(232,221,204,.7)) !important; text-decoration-thickness: 2px !important; text-decoration-color: rgba(191,212,170,.8) !important; }
.rs-pop-orig b { color: var(--rsd-sage, #BFD4AA) !important; font-weight: 600 !important; }
.rs-pop-def { overflow: visible !important; white-space: normal !important;
  font-size: 19px !important; font-weight: 700 !important; font-style: normal !important; line-height: 1.3 !important;
  color: var(--rsd-sage, #BFD4AA) !important; text-align: center !important; text-wrap: balance;
  padding: 0 2px !important; margin: 14px 0 0 !important; border: none !important;
}
.rs-pop-q { font-size: 13.5px !important; color: var(--rsd-cream70, rgba(232,221,204,.7)) !important; text-align: center !important; margin: 14px 0 9px !important; }
.rs-pop-actions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 4px 10px !important; margin-top: 14px !important; justify-content: center !important; }
.rs-pop-link {
  background: none !important; border: none !important; box-shadow: none !important;
  color: var(--rsd-cream70, rgba(232,221,204,.7)) !important; font: inherit !important; font-size: 13px !important;
  cursor: pointer !important; padding: 2px 2px !important; text-decoration: none !important;
}
.rs-pop-link:hover { color: var(--rsd-cream, #E8DDCC) !important; text-decoration: underline !important; }
.rs-pop-link-sep { color: rgba(232,221,204,.3) !important; font-size: 12px !important; }
.rs-pop-btns { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 9px !important; width: 100% !important; }
/* The rating buttons: the design's quiet tiles, a solid sage tile once chosen.
   Each button's 🔴🟡🟢 stays in its text (and in tests) but is drawn as a
   plain dot (font-size 0 on the button, sizes restored on its spans). */
.rs-rate {
  min-width: 0 !important; box-sizing: border-box !important;
  background: var(--rsd-cream-wash, rgba(232,221,204,.06)) !important; border: 1px solid var(--rsd-cream-line, rgba(232,221,204,.12)) !important;
  border-radius: 14px !important;
  padding: 11px 4px 9px !important; cursor: pointer !important; color: var(--rsd-cream, #E8DDCC) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 6px !important; font-size: 0 !important; line-height: 1 !important;
  height: auto !important; min-height: 44px !important; max-height: none !important; overflow: visible !important;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.rs-rate::before { content: "" !important; display: block !important; width: 12px !important; height: 12px !important; border-radius: 50% !important; order: -1; }
.rs-rate[data-c="red"]::before { background: var(--rsd-rate-dk, #C0694B) !important; }
.rs-rate[data-c="yellow"]::before { background: var(--rsd-rate-learn, #D4A94F) !important; }
.rs-rate[data-c="green"]::before { background: var(--rsd-rate-got, #9DB785) !important; }
.rs-rate span {
  display: block !important; font-size: 14px !important; font-weight: 700 !important; color: inherit !important;
  white-space: normal !important; text-align: center !important; line-height: 1.15 !important;
  overflow-wrap: break-word !important; word-break: normal !important; max-width: 100% !important;
  height: auto !important; max-height: none !important; overflow: visible !important;
  text-transform: none !important; letter-spacing: normal !important; font-family: var(--rsd-sans, system-ui, sans-serif) !important;
}
.rs-rate:hover { background: var(--rsd-cream-wash2, rgba(232,221,204,.12)) !important; }
.rs-rate:active { transform: scale(.97); }
.rs-rate.rs-active { background: var(--rsd-sage, #BFD4AA) !important; border-color: var(--rsd-sage, #BFD4AA) !important; color: var(--rsd-bark, #3A2A1F) !important; }
.rs-rate.rs-active::before { background: var(--rsd-bark, #3A2A1F) !important; }
/* Each rating button previews the underline it draws on the page. */
.rs-rate .rs-rate-prev {
  display: block !important; width: 60% !important; height: 9px !important; margin: 0 auto !important;
  font-size: 9px !important; line-height: 1 !important; white-space: pre !important; overflow: visible !important;
  color: transparent !important; text-decoration-line: underline !important; text-underline-offset: 1px !important;
}
.rs-rate .rs-rate-prev-red    { text-decoration-style: wavy !important;   text-decoration-thickness: 2.2px !important; text-decoration-color: #C0694B !important; }
.rs-rate .rs-rate-prev-yellow { text-decoration-style: dotted !important; text-decoration-thickness: 2.2px !important; text-decoration-color: #D4A94F !important; }
.rs-rate .rs-rate-prev-green  { text-decoration-style: solid !important;  text-decoration-thickness: 2.2px !important; text-decoration-color: #9DB785 !important; }
/* The word card's OWN rating row previews what rating the word does on the
   page -- its wash colour -- not a line (the root card's row keeps the
   line: rating a root draws one). */
.rs-popup:not(:has(.rs-lvl-root)) > .rs-pop-btns .rs-rate .rs-rate-prev {
  text-decoration: none !important; height: 7px !important; width: 55% !important; border-radius: 3px !important;
}
.rs-popup:not(:has(.rs-lvl-root)) > .rs-pop-btns .rs-rate .rs-rate-prev-red { background: rgba(215,95,70,.75) !important; }
.rs-popup:not(:has(.rs-lvl-root)) > .rs-pop-btns .rs-rate .rs-rate-prev-yellow { background: rgba(245,210,105,.75) !important; }
.rs-popup:not(:has(.rs-lvl-root)) > .rs-pop-btns .rs-rate .rs-rate-prev-green { background: rgba(190,220,160,.75) !important; }
.rs-rate.rs-active .rs-rate-prev { text-decoration-color: var(--rsd-bark, #3A2A1F) !important; }

/* Root rows ("rated separately"): still exported by word-markup.js and
   styled here, though the word cards now use the chips below. */
.rs-pop-rootin { margin-top: 12px !important; padding-top: 10px !important; border-top: 1px solid var(--rs-line) !important; }
.rs-pop-rootin-title { font-size: 11px !important; font-weight: 700 !important; color: var(--rs-mute) !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-bottom: 6px !important; }
.rs-pop-rootin-item + .rs-pop-rootin-item { margin-top: 8px !important; }
.rs-pop-rootin-head { display: flex !important; align-items: baseline !important; gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 4px !important; }
.rs-pop-rootin-name { color: var(--rs-purple) !important; font-family: var(--rsd-serif, Georgia, serif) !important; font-size: 15px !important; font-weight: 800 !important; }
.rs-pop-rootin-mean { color: var(--rs-mute) !important; font-size: 12px !important; flex: 1 1 auto !important; }
.rs-pop-rootin-head .rs-pop-clear { margin-left: auto !important; }
.rs-pop-btns-compact .rs-rate { min-height: 34px !important; padding: 5px 2px !important; }
.rs-pop-btns-compact .rs-rate span { font-size: 12px !important; }

/* Root chips (word-markup.js buildRootChips), inside the dark inset box:
   emoji, the root in Fraunces, its meaning, three dots, the rating in words.
   Tap cycles not rated -> Don't know -> Learning -> Got it. The dots fill
   one / two / three in that rating's colour. */
.rs-pop-roots { margin: 16px 0 0 !important; padding: 14px 12px 12px !important; border: none !important;
  background: var(--rsd-bark-inset, rgba(0,0,0,.18)) !important; border-radius: 16px !important; text-align: center !important; }
.rs-rootchips { display: flex !important; flex-direction: column !important; align-items: center !important; }
.rs-rootchips-row { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: flex-start !important; gap: 8px !important; }
.rs-rootchips::after {
  content: "" !important; order: 1; display: block !important; width: 26px !important; height: 33px !important; margin: 10px auto 2px !important; opacity: .85;
  background: url("../icons/brand/tendril-cream.png") center / contain no-repeat !important;
}
.rs-rootchips-note { order: 2; font-size: 11.5px !important; color: var(--rsd-cream60, rgba(232,221,204,.6)) !important; margin-top: 4px !important; }
.rs-rootchip-plus { font-family: var(--rsd-serif, Georgia, serif) !important; font-size: 24px !important; color: rgba(232,221,204,.5) !important; margin-top: 34px !important; line-height: 1 !important; }
.rs-rootchip {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
  min-width: 96px !important; max-width: 150px !important; height: auto !important; margin: 0 !important;
  padding: 10px 10px 9px !important; border-radius: 12px !important;
  background: transparent !important; border: 1px solid rgba(191,212,170,.22) !important; box-shadow: none !important;
  color: var(--rsd-sage, #BFD4AA) !important; font: inherit !important; font-family: var(--rsd-sans, system-ui, sans-serif) !important;
  line-height: 1.2 !important; text-align: center !important; cursor: pointer !important; white-space: normal !important;
  transition: background .15s, border-color .15s;
}
.rs-rootchip:hover { background: rgba(191,212,170,.08) !important; border-color: rgba(191,212,170,.45) !important; }
.rs-rootchip:focus-visible { outline: 2px solid var(--rsd-sage-deep, #6F8C58) !important; outline-offset: 2px !important; }
.rs-rootchip-emoji { font-size: 24px !important; line-height: 1 !important; margin-bottom: 6px !important; }
.rs-rootchip-name { font-family: var(--rsd-serif, Georgia, serif) !important; font-weight: 800 !important; font-size: 26px !important; line-height: 1.05 !important; color: var(--rsd-sage, #BFD4AA) !important; }
.rs-rootchip-mean { font-size: 13px !important; color: var(--rsd-cream85, rgba(232,221,204,.85)) !important; margin-top: 3px !important; }
.rs-rootchip-dots { display: flex !important; gap: 5px !important; margin-top: 8px !important; }
.rs-rootchip-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: rgba(232,221,204,.18) !important; transition: background .2s; }
.rs-rootchip[data-c="red"] .rs-rootchip-dot:nth-child(-n+1) { background: var(--rsd-rate-dk, #C0694B) !important; }
.rs-rootchip[data-c="yellow"] .rs-rootchip-dot:nth-child(-n+2) { background: var(--rsd-rate-learn, #D4A94F) !important; }
.rs-rootchip[data-c="green"] .rs-rootchip-dot { background: var(--rsd-rate-got, #9DB785) !important; }
.rs-rootchip-label { font-size: 11px !important; color: var(--rsd-cream60, rgba(232,221,204,.6)) !important; margin-top: 5px !important; }

/* ---- toast ---- */
.rs-toast {
  position: fixed !important; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(10px);
  z-index: 2147483647;
  background: var(--rsd-bark, #3A2A1F) !important; color: var(--rsd-cream, #E8DDCC) !important; border: 1px solid var(--rs-line);
  border-radius: 30px; padding: 10px 20px;
  font-family: var(--rsd-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 13px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; white-space: nowrap !important;
}
.rs-toast b { color: var(--rs-green); }
.rs-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- sentence contrast (v0.2) ----
   The design's quiet centred "Show original sentence" link, then the two
   sentences in italic cream with the word picked out. */
.rs-contrast { margin: 12px 0 0 !important; padding: 0 !important; border: none !important; text-align: center !important; }
.rs-contrast-toggle {
  background: none !important; border: none !important; box-shadow: none !important; color: var(--rs-mute) !important; cursor: pointer;
  font: inherit !important; font-size: 13px !important; font-weight: 500 !important; padding: 2px 4px !important;
}
.rs-contrast-toggle:hover { color: var(--rs-text3) !important; text-decoration: underline; }
.rs-contrast-body { margin-top: 8px; flex-direction: column; gap: 8px; text-align: left; }
.rs-cs {
  font-size: 14px; line-height: 1.5; color: var(--rs-text2); font-style: italic;
  background: var(--rs-card2); border: none; border-radius: 12px; padding: 9px 12px;
}
.rs-cs-lbl {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; font-style: normal;
  color: var(--rs-green); background: rgba(191,212,170,.14); border-radius: 99px;
  padding: 1px 7px; margin-right: 6px; text-transform: none;
}
.rs-cs-lbl.rs-cs-orig { color: var(--rs-mute); background: rgba(168,153,138,.16); }
.rs-hl { color: var(--rs-green); font-style: normal; font-weight: 600; }
.rs-hl-orig { color: var(--rs-text3); font-style: normal; font-weight: 600; }

/* ---- in-video word tracker (v0.4.2) ---- */
.rs-tracker {
  position: fixed; top: 84px; right: 16px; width: 244px; max-height: 64vh;
  z-index: 2147483646; display: flex; flex-direction: column;
  background: var(--rs-bg); border: 1px solid var(--rs-line); border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55); overflow: hidden;
  font-family: var(--rsd-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.rs-tk-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid var(--rs-line3); background: linear-gradient(180deg,var(--rs-tkhead-g1),var(--rs-bg));
  cursor: pointer; user-select: none;
}
.rs-tk-head:hover { background: linear-gradient(180deg,var(--rs-tkhead-g1-hover),var(--rs-bg)); }
.rs-tk-head.rs-tk-collapsed { border-bottom: none; }
.rs-tk-title { font-size: 12px; font-weight: 800; color: var(--rs-text); letter-spacing: .2px; }
/* Fixed brand-mark pairing (bright green pill + near-black numeral) — not
   themed. Its own internal contrast doesn't depend on the page's theme, the
   same way .rs-sb-badge/.rs-tk-dot below don't. */
.rs-tk-count { font-size: 11px; font-weight: 800; color: #09090F; background: #9DB785; border-radius: 20px; padding: 1px 8px; }
.rs-tk-toggle { margin-left: auto; background: none; border: none; color: var(--rs-mute); cursor: pointer; font-size: 13px; padding: 0 2px; }
.rs-tk-list { overflow-y: auto; padding: 6px; }
.rs-tk-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; }
.rs-tk-row:hover { background: var(--rs-hover); }
.rs-tk-w { display: flex !important; flex-direction: column !important; min-width: 0; flex: 1;
  background: none !important; border: none !important; padding: 0 !important; margin: 0 !important;
  text-align: left !important; font: inherit !important; color: inherit !important; cursor: pointer !important; }
.rs-tk-w:hover .rs-tk-sat { text-decoration: underline; }
.rs-tk-sat { font-size: 13px; font-weight: 700; color: var(--rs-green); line-height: 1.2; }
.rs-tk-orig { font-size: 10px; color: var(--rs-mute2); text-decoration: line-through; }
.rs-tk-rate { display: flex; gap: 4px; flex-shrink: 0; }
/* Small color swatches, not text — same "fine as a fixed vivid mark
   regardless of theme" reasoning as .rs-tk-count, so these stay literal. */
.rs-tk-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid; background: transparent; cursor: pointer; padding: 0; opacity: .45; transition: opacity .12s, background .12s; }
.rs-tk-dot:hover { opacity: 1; }
.rs-tk-dot.r { border-color: #C0694B; } .rs-tk-dot.r.on { background: #C0694B; opacity: 1; }
.rs-tk-dot.y { border-color: #D4A94F; } .rs-tk-dot.y.on { background: #D4A94F; opacity: 1; }
.rs-tk-dot.g { border-color: #9DB785; } .rs-tk-dot.g.on { background: #9DB785; opacity: 1; }
.rs-tk-foot { font-size: 9.5px; color: var(--rs-mute2); padding: 8px 12px; border-top: 1px solid var(--rs-line3); }

/* ---- page stats bar ----
   Resting state is a literal bookmark tab: a slim ribbon clipped flush to
   the right edge of the viewport. It only becomes a full card, inset a few
   px from the edge with full corner rounding, while the user has actually
   opened it — content.js closes it back to the tab on any click outside
   it, the same way any browser flyout would, so the "affects the page"
   window is only ever the moment it's actually open.
   Three rounds of real-world correction got here (see content.js's own
   comment on this feature for the full history): full-width top bar ->
   top-right corner card shown by default -> a top-right (25vh) tab ->
   this. The first two put page-covering pixels in the exact spot a lot of
   real sites keep their own header controls (Reddit's own account menu
   lives in that same top-right corner). The third fixed that, but landed
   in the same vertical band as .rs-tracker (the in-video word tracker,
   also right-anchored, top: 84px) — on YouTube, opening this card could
   overlap the tracker directly, which read as a bug ("these two counts
   don't match") when really it was two unrelated widgets fighting for the
   same few hundred pixels. Anchored from the BOTTOM instead (still a
   quarter of the viewport's height in, still never the very corner) so it
   shares no vertical range with anything top-anchored, .rs-tracker
   included, on any page. */
.rs-stats-bar {
  position: fixed !important; bottom: 25vh !important; right: 0 !important; left: auto !important; top: auto !important;
  z-index: 2147483647 !important;
  font-family: var(--rsd-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  max-width: min(90vw, 340px) !important;
}
.rs-sb-inner {
  display: flex !important; flex-direction: column !important; gap: 10px !important;
  margin-right: 10px !important;
  padding: 12px 14px !important;
  background: var(--rs-sb-bg) !important; border: 1px solid var(--rs-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rs-sb-head { display: flex !important; align-items: center !important; gap: 10px !important; }
.rs-sb-brand { display: flex !important; align-items: center !important; gap: 7px !important; flex: 1 !important; }
/* Fixed brand mark, same reasoning as .rs-tk-count above. */
.rs-sb-badge {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 20px !important; height: 20px !important; border-radius: 6px !important;
  background: #9DB785 !important; color: #04231A !important; font-size: 10px !important; font-weight: 800 !important;
}
.rs-sb-brand-text { display: flex !important; flex-direction: column !important; gap: 0 !important; min-width: 0 !important; }
.rs-sb-name { font-size: 12px !important; font-weight: 700 !important; color: var(--rs-text) !important; white-space: nowrap !important; line-height: 1.25 !important; }
/* Scopes the metrics row below to "this page" — see content.js's own
   comment on why this exists (disambiguating from .rs-tk-title's "this
   video" scope, not decoration). */
.rs-sb-sub { font-size: 9.5px !important; font-weight: 600 !important; color: var(--rs-mute2) !important; white-space: nowrap !important; line-height: 1.15 !important; }
.rs-sb-metrics { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px 14px !important; }
.rs-sb-metric { font-size: 12px !important; color: var(--rs-mute) !important; white-space: nowrap !important; }
.rs-sb-metric b { color: var(--rs-text) !important; font-weight: 800 !important; }
.rs-sb-metric-swap b { color: var(--rs-green) !important; }
.rs-sb-metric-root b { color: var(--rs-purple) !important; }
.rs-sb-metric-rated b { color: var(--rs-yellow) !important; }

/* Vocab/Both/Roots — same rs_settings.rootDisplayMode this app's Settings
   tab already writes, just reachable without leaving the page. Active-state
   color matches each mode's own layer (green = SAT swaps, purple = roots)
   so the button doubles as a reminder of what it's currently showing;
   "Both" gets a neutral white active state since it isn't one layer. */
.rs-sb-modes {
  display: flex !important; align-items: center !important; gap: 2px !important;
  padding: 2px !important; border-radius: 8px !important;
  background: var(--rs-wash-04) !important; border: 1px solid var(--rs-line) !important;
}
.rs-sb-mode-btn {
  flex: 1 !important; background: none !important; border: none !important; cursor: pointer !important;
  color: var(--rs-mute2) !important; font-size: 11px !important; font-weight: 700 !important;
  padding: 5px 9px !important; border-radius: 6px !important;
}
.rs-sb-mode-btn:hover { color: var(--rs-text) !important; }
.rs-sb-mode-btn.active { background: var(--rs-wash-08) !important; }
.rs-sb-mode-vocab.active { color: var(--rs-green) !important; }
.rs-sb-mode-roots.active { color: var(--rs-purple) !important; }
.rs-sb-mode-both.active { color: var(--rs-text) !important; }

/* The collapse toggle: was plain small text at the end of a long row,
   which read as one more label, not a button — fixed by giving it an
   actual button shape (bordered box, background, real tap target) in the
   card's own header row, the same way .rs-tk-toggle already reads clearly
   as clickable inside .rs-tk-head below. */
.rs-sb-toggle {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 26px !important; height: 26px !important; flex-shrink: 0 !important;
  background: var(--rs-wash-06) !important; border: 1px solid var(--rs-line) !important;
  border-radius: 8px !important; color: var(--rs-mute7) !important; cursor: pointer !important; font-size: 13px !important;
}
.rs-sb-toggle:hover { background: var(--rs-wash-14) !important; border-color: var(--rs-green) !important; color: var(--rs-text) !important; }

/* The tab itself — flush against the viewport edge (no right-side radius,
   no right margin) so it reads as clipped to the edge of the browser
   window, the same visual grammar as an actual paper bookmark tab or a
   browser reading-list ribbon, not a floating chip that happens to sit
   near the edge. */
.rs-sb-tab {
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important;
  padding: 10px 7px !important;
  background: var(--rs-bg) !important; border: 1px solid var(--rs-line) !important; border-right: none !important;
  border-radius: 10px 0 0 10px !important;
  box-shadow: -6px 0 20px rgba(0,0,0,.4) !important;
  cursor: pointer !important;
}
.rs-sb-tab:hover { background: var(--rs-tab-hover) !important; border-color: var(--rs-green) !important; }
.rs-sb-tab-badge { font-size: 10px !important; font-weight: 800 !important; color: var(--rs-green) !important; writing-mode: vertical-rl !important; letter-spacing: .5px !important; }
.rs-sb-tab-chevron { font-size: 9px !important; color: var(--rs-mute2) !important; }

/* Keyboard accessibility: visible focus ring when tabbing to a swapped word */
.rs-word:focus-visible { outline: 2px solid var(--rs-hw-sat, #6F8C58); outline-offset: 2px; }

/* ---- Root word highlighting (passive, page-wide) ----
   The .rs-root-word wrapper is the clickable word; it takes no colour of its
   own. Only the root letters inside it (.rs-hw-seg, above) turn brown, and
   each carries its own rating line -- see the highlighted-words block near
   the top of this file. */
.rs-root-word {
  color: inherit !important;
  font-weight: inherit !important;
  cursor: pointer !important;
  border-radius: 2px;
  padding: 0 1px;
  transition: background 0.12s ease;
}
.rs-root-word:hover { background: rgba(135, 90, 50, 0.12) !important; }
.rs-root-word:focus-visible { outline: 2px solid #6A3A1A; outline-offset: 2px; }

/* Badge used in the reused .rs-popup shell when it's showing root info
   instead of a SAT-word definition. */
.rs-lvl-root { background: rgba(111,140,88, 0.15); color: var(--rs-green); }

/* Harder-word chips inside the on-page root card, with a hover/click
   definition tooltip (CSS-only, no positioning JS needed). */
.rs-pop-hard-label { font-size: 10.5px !important; color: var(--rs-mute); margin: 2px 0 6px; }
.rs-pop-hard-list { display: flex !important; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rs-chip-def {
  position: relative;
  background: var(--rs-card); border: 1px solid var(--rs-line); border-radius: 7px;
  padding: 4px 9px; font-size: 11px; font-weight: 600; color: var(--rs-text);
  cursor: help;
}
.rs-chip-def:hover, .rs-chip-def.rs-tt-open { border-color: var(--rs-green); color: var(--rs-green); }
.rs-chip-inline-def {
  width: 100%; margin: 2px 0 2px; padding: 7px 10px;
  background: var(--rs-bg); color: var(--rs-text); border: 1px solid var(--rs-line);
  border-radius: 8px; font-size: 11px; font-weight: 400; line-height: 1.4;
  box-sizing: border-box !important;
}

/* Belt-and-suspenders: reset box-sizing on every descendant of the injected
   popup so hostile host-page rules (e.g. *{box-sizing:content-box}) can't
   push the rating buttons outside the card. */
.rs-popup, .rs-popup * { box-sizing: border-box !important; }

/* Root card: make the root itself the visual anchor (the point of the
   feature is the root, not the individual word). */
.rs-pop-root-hero { display: flex !important; align-items: baseline; justify-content: center; gap: 8px; margin: 2px 0 10px; flex-wrap: wrap; }
.rs-pop-root-token { font-family: var(--rsd-serif, Georgia, serif) !important; font-size: 26px !important; font-weight: 800; color: var(--rs-purple); letter-spacing: 0; line-height: 1.1; }
.rs-pop-root-arrow { color: var(--rs-mute2); font-size: 13px !important; }
.rs-pop-root-meaning { font-size: 15px !important; font-weight: 600; color: var(--rs-text2); }

/* Root-level Apple-emoji mnemonic (root-emojis.js) — a small supplemental
   glyph beside the root token, never a replacement for the token/meaning
   text. Relative font-size (1.25em) so it scales with whichever heading it
   sits in (root-hero, rootmap-head, root-tree-head, etc)
   without needing a per-context override. aria-hidden on every instance —
   the surrounding root token + meaning text already says the same thing. */
.rs-root-emoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25em !important;
  line-height: 1 !important;
  margin-right: 6px !important;
}
/* The clicked word's OWN definition (distinct from the root meaning). */
.rs-pop-worddef { overflow: visible !important; white-space: normal !important; font-size: 14px !important; color: var(--rs-text2); font-style: normal; line-height: 1.45 !important; margin-bottom: 10px; text-align: center; }
.rs-pop-worddef b { color: var(--rs-text); font-style: normal; }

/* Word breakdown: segments the clicked word around its literal root
   substring so the connection is SHOWN, not just claimed. */
.rs-pop-word-breakdown { white-space: normal !important; font-size: 13px !important; font-weight: 700; letter-spacing: .02em; margin-bottom: 4px; }
.rs-pop-word-part { color: var(--rs-mute3); }
.rs-pop-root-inword { color: var(--rs-purple); text-decoration: underline; text-decoration-color: rgba(162,85,58,.5); text-underline-offset: 2px; }

/* Morpheme chip strip: prefix/root/suffix boxes with a tiny meaning label
   under each, joined by "+". Fed by root-teach.js's morphemeParts(), which
   prefers the human/AI-reviewed breakdown when this word has one and falls
   back to the heuristic prefix/suffix guess otherwise — renders identically
   either way, both are normalized to the same shape before reaching here. */
.rs-pop-morphemes { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
.rs-pop-morpheme-chip { display: flex !important; flex-direction: column; align-items: center; min-width: 0; }
.rs-pop-morpheme-text { font-size: 13px !important; font-weight: 800; padding: 2px 7px !important; border-radius: 6px !important; white-space: nowrap !important; }
.rs-pop-morpheme-meaning { font-size: 9px !important; color: var(--rs-mute4); text-align: center; line-height: 1.25 !important; margin-top: 2px !important; max-width: 88px !important; }
.rs-pop-morpheme-plus { color: var(--rs-mute2); font-size: 12px !important; align-self: center; padding-top: 1px; }
.rs-pop-morpheme-prefix .rs-pop-morpheme-text { color: var(--rs-blue); background: rgba(168,153,138,.14); }
.rs-pop-morpheme-root .rs-pop-morpheme-text { color: var(--rs-purple); background: rgba(162,85,58,.14); }
.rs-pop-morpheme-suffix .rs-pop-morpheme-text { color: var(--rs-yellow); background: rgba(212,169,79,.14); }

/* Root-teaching block inside the green SAT popup — visually set off from the
   word's own definition so the "this teaches a whole family" idea reads. */
.rs-pop-roots { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--rs-line2); }
/* family-word chips tinted by the learner's own rating of that word */
.rs-chip-def.rs-chip-green { border-color: rgba(111,140,88,.45) !important; color: var(--rs-green) !important; }
.rs-chip-def.rs-chip-yellow { border-color: rgba(212,169,79,.45) !important; color: var(--rs-yellow) !important; }
.rs-chip-def.rs-chip-red { border-color: rgba(192,105,75,.45) !important; color: var(--rs-red) !important; }

/* Bridge sentence: explicit "definition <- root meaning" connector. */
.rs-pop-bridge { overflow: visible !important; white-space: normal !important; font-size: 14px !important; line-height: 1.45 !important; color: var(--rs-text2); margin: 8px 4px 2px; text-align: center; text-wrap: balance; }

/* Leech remediation block (repeatedly-missed word) -- yellow like every other
   "needs work" signal in this file (rs-chip-yellow, confidence dots), never
   red: this is "still learning," not a failure state. */
.rs-pop-leech { overflow: visible !important; white-space: normal !important; background: rgba(212,169,79,0.1); border: 1px solid rgba(212,169,79,0.35); border-radius: 14px; padding: 10px 12px; margin: 12px 0 2px; text-align: center; }
.rs-pop-leech-label { font-size: 12px !important; font-weight: 600; color: var(--rs-yellow); margin-bottom: 4px; }
.rs-pop-leech-hint { font-size: 14px !important; line-height: 1.45 !important; color: var(--rs-text3); }

/* ---- Root family tree: branching, indented, connector-lined list, replaces
   the flat wrapped chip row so a family of any size stays scannable and each
   member's own definition is visible (not just the clicked word's). ---- */
.rs-root-tree { margin-top: 4px; }
.rs-root-tree-branch { margin-top: 10px; }
.rs-root-tree-label { font-size: 11px; font-weight: 700; color: var(--rs-mute); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.rs-root-tree-items { position: relative; margin-left: 4px; padding-left: 14px; }
.rs-root-tree-items::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 10px; width: 1px; background: var(--rs-line); }
.rs-root-tree-item { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; padding: 3px 0 3px 12px; font-size: 12px; }
.rs-root-tree-item::before { content: ""; position: absolute; left: -14px; top: 12px; width: 12px; height: 1px; background: var(--rs-line); }
.rs-root-tree-word { font-weight: 700; color: var(--rs-text); }
.rs-root-tree-word.rs-chip-green { color: var(--rs-green); }
.rs-root-tree-word.rs-chip-yellow { color: var(--rs-yellow); }
.rs-root-tree-word.rs-chip-red { color: var(--rs-red); }
.rs-root-tree-def { color: var(--rs-mute4); font-size: 11px; line-height: 1.4; }

/* Compact family tree (on-page cards only — these MUST stay short enough
   that the rating buttons are visible without scrolling, since they open
   mid-reading). Word-only pills in a wrapped row, no per-word definition
   text (still reachable via native title tooltip), no tree connector
   lines — those only make sense for the dashboard's full-page tree. */
.rs-root-tree.compact .rs-root-tree-branch { margin-top: 8px; }
.rs-root-tree.compact .rs-root-tree-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding-left: 0; margin-left: 0; }
.rs-root-tree.compact .rs-root-tree-items::before { display: none; }
.rs-root-tree.compact .rs-root-tree-item {
  display: inline-flex; padding: 2px 0; margin-bottom: 2px;
  background: none; border: none; border-bottom: 1px dashed rgba(168,153,138,.5); cursor: help;
}
.rs-root-tree.compact .rs-root-tree-item::before { display: none; }
.rs-root-tree.compact .rs-root-tree-item.rs-chip-green { border-bottom-color: rgba(111,140,88,.55); }
.rs-root-tree.compact .rs-root-tree-item.rs-chip-yellow { border-bottom-color: rgba(212,169,79,.55); }
.rs-root-tree.compact .rs-root-tree-item.rs-chip-red { border-bottom-color: rgba(192,105,75,.55); }
.rs-root-tree.compact .rs-root-tree-word { font-size: 13px; font-weight: 600; color: var(--rs-text); }
.rs-root-tree.compact .rs-root-tree-word.rs-chip-green { color: var(--rs-green); }
.rs-root-tree.compact .rs-root-tree-word.rs-chip-yellow { color: var(--rs-yellow); }
.rs-root-tree.compact .rs-root-tree-word.rs-chip-red { color: var(--rs-red); }

/* Expandable related-word rows (compact family tree only, via
   branch.expandable in buildFamilyTree) — click a "SAT words in this
   family" sibling to peek at its own morpheme chips + gloss inline,
   without leaving the popup. Rows with nothing to expand into (no gloss,
   no breakdown) never get this class, so they stay plain hover-tooltip
   pills as before. */
.rs-root-tree-chevron { font-size: 8px !important; margin-left: 3px; display: inline-block !important; transition: transform .12s ease; }
.rs-root-tree-item.rs-root-tree-open .rs-root-tree-chevron { transform: rotate(180deg); }
.rs-root-tree.compact .rs-root-tree-item.rs-root-tree-expandable { cursor: pointer; }
.rs-root-tree-expand-panel {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px;
  flex-basis: 100% !important; width: 100% !important;
  margin: 4px 0 2px; padding: 8px 9px !important; border-radius: 8px !important;
  background: var(--rs-wash-03); border: 1px solid var(--rs-line2); cursor: auto;
}
.rs-root-tree-expand-panel .rs-pop-morphemes { margin-bottom: 0 !important; }
.rs-root-tree-expand-gloss { color: var(--rs-mute5); font-size: 11px !important; font-style: italic; white-space: normal !important; }

/* ---- RootMap (root-teach.js's buildRootMapView(), used by both the
   dashboard's My progress tab and RootShelf's RootMap tab) ---- */
.rs-teach-empty { color: var(--rs-mute); font-size: 12.5px; line-height: 1.6; padding: 18px 4px; text-align: center; }
.rs-rootmap-card { margin-bottom: 14px; }
.rs-rootmap-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rs-rootmap-token { font-size: 16px; font-weight: 900; color: var(--rs-purple); letter-spacing: .3px; }
.rs-rootmap-meaning { font-size: 13px; font-weight: 700; color: var(--rs-green); }
.rs-rootmap-count { margin-left: auto; font-size: 10.5px; color: var(--rs-mute2); text-transform: uppercase; letter-spacing: .04em; }
.rs-familiarity { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 20px; letter-spacing: .04em; text-transform: uppercase; }
.rs-familiarity.new { background: rgba(168,153,138,.15); color: var(--rs-mute); }
.rs-familiarity.developing { background: rgba(212,169,79,.15); color: var(--rs-yellow); }
.rs-familiarity.familiar { background: rgba(111,140,88,.15); color: var(--rs-green); }

/* ---- RootCheck (rootcheck.js's buildRootCheckView(), used by the dashboard
   entry card and RootShelf's Review tab) ---- */
.rs-check-card { background: var(--rs-card); border: 1px solid var(--rs-line2); border-radius: 14px; padding: 18px 20px; }
.rs-check-entry-title { font-size: 15px; font-weight: 800; color: var(--rs-text); margin-bottom: 4px; }
.rs-check-entry-sub { font-size: 12.5px; color: var(--rs-mute); }
.rs-check-entry-btns { display: flex; gap: 8px; margin-top: 14px; }
.rs-check-btn { flex: 1 1 0; background: var(--rs-card2); border: 1px solid var(--rs-line2); color: var(--rs-text); border-radius: 9px; padding: 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.rs-check-btn:hover { border-color: var(--rs-purple); }
.rs-check-btn.primary { background: rgba(162,85,58,.15); border-color: rgba(162,85,58,.4); color: var(--rs-purple); }
.rs-check-progress { font-size: 10.5px; color: var(--rs-mute2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.rs-check-prompt { font-size: 14px; font-weight: 600; color: var(--rs-text); line-height: 1.5; margin-bottom: 14px; white-space: normal; }
.rs-check-options { display: flex; flex-direction: column; gap: 7px; }
.rs-check-opt { text-align: left; background: var(--rs-card2); border: 1px solid var(--rs-line2); color: var(--rs-text); border-radius: 9px; padding: 10px 12px; font-size: 13px; cursor: pointer; transition: border-color .12s, background .12s; }
.rs-check-opt:hover { border-color: var(--rs-blue); }
.rs-check-opt.correct { border-color: var(--rs-green); background: rgba(111,140,88,.12); }
.rs-check-opt.wrong { border-color: var(--rs-red); background: rgba(192,105,75,.12); }
.rs-check-opt.dim { opacity: .5; }

/* prefix highlight in the word breakdown (e.g. "ad-" in "advent") — distinct
   from the root color so the two tracked parts don't visually compete */
.rs-pop-word-breakdown .rs-pop-prefix { color: var(--rs-blue); font-weight: 800; border-bottom: 1px dashed rgba(168,153,138,.5); cursor: help; position: relative !important; }
.rs-pop-word-breakdown .rs-pop-suffix { color: var(--rs-yellow); font-weight: 800; border-bottom: 1px dashed rgba(212,169,79,.5); cursor: help; position: relative !important; }

/* Instant CSS hover tooltips — positioned ABOVE the element, not below where
   they could cover rating buttons. pointer-events:none ensures they never
   intercept clicks. Replaces the broken native title-attribute approach
   (Chrome title tooltips have a ~1 second delay, which feels like nothing
   happens at all). */
.rs-pop-prefix:hover::after, .rs-pop-suffix:hover::after {
  content: attr(title); position: absolute !important; left: 0; bottom: 100%; margin-bottom: 6px;
  width: 170px !important; white-space: normal !important; text-align: left;
  background: var(--rs-bg); color: var(--rs-text); border: 1px solid var(--rs-line);
  border-radius: 8px; padding: 6px 9px; font-size: 11px !important; font-weight: 400; font-style: normal;
  line-height: 1.4 !important; box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 2147483647;
  pointer-events: none;
}

/* Compact-mode family word chips — instant hover tooltip showing the definition */
.rs-root-tree.compact .rs-root-tree-item { position: relative; }
.rs-root-tree.compact .rs-root-tree-item[title]:hover::after {
  content: attr(title); position: absolute; left: 0; bottom: 100%; margin-bottom: 6px;
  width: 190px; white-space: normal; text-align: left;
  background: var(--rs-bg); color: var(--rs-text); border: 1px solid var(--rs-line);
  border-radius: 8px; padding: 7px 10px; font-size: 11px; font-weight: 400;
  line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 2147483647;
  pointer-events: none;
}

/* frequency-tier badge -- how common the word is among SAT vocabulary.
   The design's outlined pill, same as the level pill; the label (Core / Mid
   / Advanced) carries the tier. */
.rs-pop-freq { font-size: 11.5px !important; font-weight: 700 !important; padding: 3px 9px !important; border-radius: 99px !important; margin: 0 !important; letter-spacing: .02em !important; white-space: nowrap !important; }
.rs-pop-freq.rs-freq-tier1, .rs-pop-freq.rs-freq-tier2, .rs-pop-freq.rs-freq-tier3 { color: var(--rsd-cream, #E8DDCC) !important; background: transparent !important; }

/* The stats bar's "RS" badge draws the rs mark (text kept in the DOM). */
.rs-sb-badge { font-size: 0 !important; width: 18px !important; height: 20px !important; border-radius: 0 !important;
  background: url("../icons/brand/mark-sage.png") center / contain no-repeat !important; }

/* The root-word card (roots-content.js) has the word card's shape; the
   part the reader tapped on the page is marked among the chips. */
.rs-popup .rs-pop-word-breakdown, .rs-popup .rs-root-tree.compact { text-align: center; }
.rs-popup .rs-pop-morphemes { justify-content: center; }
/* One row, whatever the part count: chips share the width, and the root
   text steps down for three and four parts (a wrapped row left a lone
   chip under a dangling "+"). */
.rs-rootchips-row { flex-wrap: nowrap !important; gap: 6px !important; width: 100% !important; }
.rs-rootchip { flex: 1 1 0 !important; min-width: 0 !important; padding: 10px 6px 9px !important; }
.rs-rootchips-row:has(> :nth-child(5)) .rs-rootchip-name { font-size: 21px !important; }
.rs-rootchips-row:has(> :nth-child(7)) .rs-rootchip-name { font-size: 18px !important; }
.rs-rootchips-row:has(> :nth-child(5)) .rs-rootchip-mean { font-size: 12px !important; }
.rs-rootchip-plus { flex: none !important; }
.rs-rootchip.rs-rootchip-picked { border-color: rgba(191,212,170,.6) !important; background: rgba(191,212,170,.08) !important; }