/* The homepage's signed-out promo card is painted from the STATIC markup in
   index.html, before this stylesheet loads, so the rules it needs are mirrored
   into that file's <style id="dcHomeCriticalCss"> block. That mirror is
   GENERATED from the regions marked `@home-critical` below — run
   `python3 tools/build_home_critical_css.py` after touching any of them (CI
   runs it with --check). Never hand-edit the copy in index.html. */
/* DentCast Plus - workbench + login modal styles.
   The workbench inherits the site's typography (no font-family is set here, so
   it uses the page's own body font). Colors reference the site's CSS variables
   with safe fallbacks. Everything is prefixed .dcp- to avoid collisions. RTL. */

/* Bind to the site's real theme tokens (defined in dc-theme.css for both light
   and [data-theme="dark"]), so the workbench inherits the site's colors, radii,
   shadows and typography and follows dark mode automatically (spec 2.1). */
/* @home-critical */
:root {
  --dcp-accent: var(--ac, #0b5fff);
  --dcp-ink: var(--txt, #0a1a33);
  --dcp-muted: var(--txt2, #4a5f85);
  --dcp-surface: var(--card-bg, #ffffff);
  --dcp-surface-2: var(--surface2, #f4f6fb);
  --dcp-line: var(--border, rgba(2, 35, 96, .12));
  --dcp-radius: var(--r-md, 14px);
  --dcp-radius-pill: var(--r-f, 999px);
  --dcp-shadow: var(--card-sh2, 0 8px 30px rgba(0, 0, 0, .15));
  --dcp-chip-bg: var(--chip-bg, rgba(11, 95, 255, .08));
  /* Bundle "type" accent (amber) — kept distinct from --dcp-accent (blue),
     which the pathway UI already uses for STATE (ادامه / اینجا هستید). A
     second hue lets a bundle read as its own kind of thing at a glance,
     never confused with a state pill. Not in dc-theme.css: unique to the
     bundle surfaces (pathways catalog/detail + the homepage rail), not a
     site-wide token. */
  --dcp-gold: #b7791f;
  --dcp-gold-bg: rgba(183, 121, 31, .10);
  /* Reference-pin accent (Collections «رفرنس» pins) — a second hue beside
     --dcp-gold so a reference pin reads as its own kind of thing next to a
     text pin, never confused with it. */
  --dcp-ref: #6d28d9;
  --dcp-ref-bg: rgba(109, 40, 217, .07);
  /* قلبِ مقاله. Unlike the two above this IS a site-wide token (dc-theme.css
     defines --heart for the article chip row); the fallbacks are here because
     the desktop shell is index.html, which loads no shared stylesheet. */
  --dcp-heart-idle: var(--heart-idle, #ff7a68);
  --dcp-heart-idle-bg: var(--heart-idle-bg, rgba(255, 122, 104, .09));
  --dcp-heart-idle-bd: var(--heart-idle-bd, rgba(255, 122, 104, .40));
  --dcp-heart: var(--heart, #d92b52);
  --dcp-heart-bg: var(--heart-bg, rgba(217, 43, 82, .11));
  --dcp-heart-bd: var(--heart-bd, rgba(217, 43, 82, .34));
}
/* @end-home-critical */
[data-theme="dark"] {
  --dcp-gold: #e2b366;
  --dcp-gold-bg: rgba(226, 179, 102, .12);
  --dcp-ref: #b79df5;
  --dcp-ref-bg: rgba(183, 157, 245, .10);
  --dcp-heart-idle: var(--heart-idle, #ff9585);
  --dcp-heart-idle-bg: var(--heart-idle-bg, rgba(255, 149, 133, .13));
  --dcp-heart-idle-bd: var(--heart-idle-bd, rgba(255, 149, 133, .36));
  --dcp-heart: var(--heart, #ff6b8a);
  --dcp-heart-bg: var(--heart-bg, rgba(255, 107, 138, .16));
  --dcp-heart-bd: var(--heart-bd, rgba(255, 107, 138, .38));
}

/* Sprite icon reference — assets/icons/icons.svg is the site's single source
   of truth for every icon (see assets/icons/README.md); plus/js/util.js's
   icon() helper builds `<svg class="dc-icon"><use href="…"/></svg>` against
   this class. Unprefixed (not .dcp-) because the icon library itself is
   site-wide, not plus-specific — this file just happens to be the one
   confirmed loaded on every surface that currently uses it (all /plus/*
   pages via a static <link>, and index.html via dc-nav.js's dynamic
   injection — see the "DentCast Plus loader" in dc-nav.js). Color comes from
   currentColor (never set fill/stroke here); size from width/height on the
   call site, never a class-level default, so one icon can be a 14px eyebrow
   glyph in one place and a 32px hero glyph in another. */
.dc-icon { display: inline-block; flex-shrink: 0; color: currentColor; }

/* ---- the article's action row -------------------------------------------- *
   ONE row above the prose, replacing the four bands that used to live there
   (dc-nav.js's chip row, votes.js's heart line, plus.js's میز کار bar, each
   inserted independently before the first prose box — so their order was an
   accident of script load order, and their alignments and button sizes agreed
   with nothing).

   Two groups, and the split is the whole design: the MAIN group is what you can
   DO with this page (میز کار, کالکشن, پسندیدم), the AUX group is what the page
   tells you about itself (reading time) plus one courtesy (اشتراک‌گذاری). One
   is why you are here; the other you glance at.

   These rules live in plus.css and not dc-article.css because the row exists on
   two surfaces — the standalone article page and the desktop shell — and the
   shell strips dc-nav.js and dc-article.css out of the article it fetches while
   keeping this file. One row may not have two stylesheets. */
/* Framed as one surface, not a loose scatter of pills — the same
   surface+line+radius+shadow the rest of this design system already uses for
   any self-contained block (.dcp-card, .dcp-invite, …). Before this the row
   was a bare flex line directly on the page background, so its 6-8 buttons
   had nothing tying them together and read as clutter rather than one
   toolbar (founder feedback, 2026-08-21). Purely visual: the two group
   elements, their classes and every button inside keep the exact same
   markup and behaviour. */
.dc-actions {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 16px;
  margin: 16px 0 20px;
  padding: 12px 14px;
  background: var(--dcp-surface);
  border: 1px solid var(--dcp-line);
  border-radius: var(--dcp-radius);
  box-shadow: var(--dcp-shadow);
}
.dc-actions-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dc-actions-aux {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-inline-start: auto; /* holds the far edge even when the row wraps */
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--dcp-line); /* a quiet seam between "what you do" and "what this page says about itself" */
}

/* One button vocabulary for the whole row. Every control is the same height and
   the same shape; only weight and colour say which one matters more. That is
   what «متناسب» has to mean here — three different pill sizes in one row is
   exactly what made it read as clutter. */
.dc-act {
  font: inherit; font-weight: 600; font-size: .9rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 15px; border-radius: 999px; cursor: pointer;
  color: var(--dcp-ink); background: transparent; border: 1px solid transparent;
  transition: color .17s, background .17s, border-color .17s, transform .17s;
  -webkit-tap-highlight-color: transparent;
}
.dc-act:active { transform: scale(.97); }
.dc-act:focus-visible { outline: 2px solid var(--dcp-accent); outline-offset: 2px; }

/* میز کار — the one filled button on the page, because it is the one thing this
   row is really offering. */
.dc-act-primary {
  font-weight: 700; padding: 0 18px;
  color: #fff; background: var(--dcp-accent); border-color: var(--dcp-accent);
}
.dc-act-primary.is-active { background: transparent; color: var(--dcp-accent); }

/* افزودن به کالکشن — the same act, one step smaller: outlined, not filled. */
.dc-act-outline { font-weight: 700; color: var(--dcp-accent); border-color: var(--dcp-accent); }

/* اشتراک‌گذاری — a courtesy, so it wears the line colour and nothing else. */
.dc-act-quiet { font-size: .85rem; color: var(--dcp-muted); border-color: var(--dcp-line); }
.dc-act-quiet:hover { color: var(--dcp-ink); border-color: var(--dcp-muted); }

/* پسندیدم — coral at rest, red once pressed. The only warm thing in a row of
   blues, on purpose: a grey heart sitting among grey metadata is precisely what
   nobody recognised as a control (user report, 2026-08-12). */
.dc-act-heart {
  font-weight: 800;
  color: var(--dcp-heart-idle); background: var(--dcp-heart-idle-bg);
  border-color: var(--dcp-heart-idle-bd);
}
.dc-act-heart .dcp-heart-icon {
  width: 1.3em; height: 1.3em; display: block; flex: none;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.dc-act-heart .dcp-heart-num { font-variant-numeric: tabular-nums; }
.dc-act-heart .dcp-heart-num:empty { display: none; }
.dc-act-heart:hover { border-color: var(--dcp-heart-idle); }
.dc-act-heart.is-voted {
  color: var(--dcp-heart); background: var(--dcp-heart-bg); border-color: var(--dcp-heart-bd);
}
.dc-act-heart.is-voted .dcp-heart-icon path { fill: var(--dcp-heart); stroke: var(--dcp-heart); }
.dc-act-heart.is-pop .dcp-heart-icon { transform: scale(1.28); }
.dc-act-heart:focus-visible { outline: 2px solid var(--dcp-heart); outline-offset: 2px; }

/* زمان مطالعه — NOT a button. It was a .dc-meta-chip, identical to the share
   pill next to it, and a reader had to try it to discover it did nothing. */
.dc-act-time { font-size: .8rem; font-weight: 600; color: var(--dcp-muted); white-space: nowrap; }

/* The heart ships wrapped (button + spelled-out count). Inside this row the
   wrapper is just a flex item; the sentence beside it is worth its width on a
   wide screen and is the first thing to go on a narrow one — the button already
   carries both the word and the number. */
.dc-actions .dcp-like { display: inline-flex; align-items: center; gap: 8px; }
.dc-actions .dcp-like-count { font-size: .78rem; font-weight: 600; color: var(--dcp-muted); }
.dc-actions .dcp-like-count:empty { display: none; }
@media (max-width: 719px) {
  .dc-actions .dcp-like-count { display: none; }
}
/* Phones: the aux group takes its own line, spread edge to edge, so the main
   group keeps a full row to itself instead of being broken across two. The
   buttons tighten by a few pixels for the same reason — at the desktop padding
   the three of them overflow 390px by about ten pixels, which costs a whole
   extra line and leaves پسندیدم dangling alone on it. */
@media (max-width: 559px) {
  .dc-actions { gap: 8px 10px; }
  .dc-actions-main { gap: 6px; }
  .dc-act { font-size: .85rem; min-height: 36px; padding: 0 12px; }
  .dc-act-primary { padding: 0 14px; }
  .dc-actions-aux {
    flex: 0 0 100%; margin-inline-start: 0;
    justify-content: space-between;
    /* The seam moves from the side to the top once aux drops to its own
       line — a vertical line with nothing to its right would float. */
    border-inline-start: none; padding-inline-start: 0;
    border-top: 1px solid var(--dcp-line); padding-top: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dc-act, .dc-act-heart .dcp-heart-icon { transition: none; }
  .dc-act-heart.is-pop .dcp-heart-icon { transform: none; }
  .dc-act:active { transform: none; }
}

/* The end-of-article twin (plus.js's mountBottomActions) — same card, same
   button vocabulary, so it reads as the same row met a second time rather
   than a different control. No aux group here: there is no share/زمان
   مطالعه/دس chip to repeat, only the two acts a finished reader wants. */
.dc-actions-end { margin-top: 28px; justify-content: flex-start; }
.dc-actions-end-lead { flex: 0 0 100%; margin: 0 0 2px; font-weight: 700; color: var(--dcp-ink); }

/* «؟» reveal, reused by both the کالکشن button in this row and the workbench
   toolbar's own — hidden by default, toggles a plain caption line. */
.dcp-wb-info {
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem; line-height: 1;
  color: var(--dcp-muted); background: transparent; border: 1px solid var(--dcp-line); cursor: pointer;
}
.dcp-wb-info:hover { color: var(--dcp-ink); border-color: var(--dcp-muted); }
.dcp-wb-cap { flex: 0 0 100%; font-size: .82rem; color: var(--dcp-muted); line-height: 1.8; margin: 6px 0 0; }

.dcp-invite {
  margin: 8px 0; padding: 12px 14px; border: 1px solid var(--dcp-line);
  border-radius: var(--dcp-radius); background: var(--dcp-surface);
  max-width: 520px;
}
.dcp-invite-line { margin: 0 0 10px; line-height: 1.8; }
.dcp-invite-actions { display: flex; gap: 8px; }

/* ---- landing-page card-archive entry point (logged-in only) -------------- */
.dcp-cards-entry { margin: 12px 0; }
.dcp-cards-entry-btn {
  font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; text-decoration: none;
  color: #fff; background: var(--dcp-accent); border: 1px solid transparent;
}

/* ---- header additions (streak flame + person) ---------------------------- */
.dcp-flame-btn { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; color: inherit; }
.dcp-flame-ico { filter: grayscale(1); opacity: .5; }
.dcp-flame-btn.is-active .dcp-flame-ico { filter: none; opacity: 1; }
/* The flame is a passive indicator, not a control: no pointer cursor and no
   press feedback (override the interactive .dc-topbar-btn affordances). */
.dc-topbar-btn.dcp-flame-btn { cursor: default; }
.dc-topbar-btn.dcp-flame-btn:active { transform: none; background: var(--surface2, #f4f6fb); }

/* ---- first-visit welcome / sign-up promo (guests) ------------------------ */
/* Dims the whole page EXCEPT the fixed header (topbar is z-index 200), so the
   pulsing person icon stays bright as the obvious next step. */
.dcp-welcome-overlay {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  display: flex; align-items: center; justify-content: center;
  padding: 84px 16px 24px; /* clear the fixed header so the box never sits under it */
}
.dcp-welcome-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 420px; }
.dcp-welcome-card {
  width: 100%; box-sizing: border-box; text-align: center;
  background: var(--dcp-surface, #fff); color: var(--dcp-ink, #1a2233);
  border: 1px solid var(--dcp-line, rgba(0,0,0,.08)); border-radius: 18px;
  padding: 22px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.32);
}
.dcp-welcome-ico { font-size: 2.4rem; line-height: 1; margin-bottom: 6px; }
.dcp-welcome-title { margin: 0 0 8px; font-size: 1.25rem; }
.dcp-welcome-lead { margin: 0 0 10px; line-height: 1.9; }
.dcp-welcome-streak { margin: 0 0 16px; font-size: .9rem; opacity: .82; line-height: 1.9; }
.dcp-welcome-cta { width: 100%; }
.dcp-welcome-close { min-width: 130px; background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); }
.dcp-welcome-close:hover { background: rgba(255,255,255,.24); }

/* Notification nudge (notif-prompt.js) — reuses the welcome card, plus a status
   line under the lead (activation progress / browser-blocked guidance) and an
   optional secondary hint (the iOS install path). */
.dcp-notif-hint { margin: 0 0 10px; font-size: .85rem; line-height: 1.9; opacity: .8; }
.dcp-notif-prompt .dcp-notif-msg { display: block; margin: 0 0 10px; line-height: 1.8; }
.dcp-notif-prompt .dcp-notif-msg:empty { display: none; }

/* ---- first-visit premium offer (premium-popup.js) ------------------------ */
/* Unlike the welcome box this one sits ABOVE the topbar (z 200) and takes the
   whole viewport: it has no companion element in the header to leave lit, and
   an aria-modal dialog with a live navigation bar behind it is a lie to a
   screen reader. Backdrop clicks are not wired — closing is the × alone. */
.dcp-pp-overlay {
  /* Above the transient toast (10001), which is fixed near the bottom of the
     viewport and otherwise lands exactly on the buy button. Below the dashboard
     overlay (10050) and the league sheet (10090), neither of which can be opened
     while this is up — the header they are reached from is behind it. */
  position: fixed; inset: 0; z-index: 10005;
  background: rgba(15, 23, 42, .58);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
/* The card is a fixed-height flex column, not a growing block: the list runs to
   eight items and on a short phone the buy button would otherwise be pushed
   below the fold of a card that itself cannot scroll. Body scrolls, footer
   stays. */
.dcp-pp-card {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 440px; max-height: min(88vh, 720px);
  box-sizing: border-box; overflow: hidden;
  background: var(--dcp-surface, #fff); color: var(--dcp-ink, #1a2233);
  border: 1px solid var(--dcp-line, rgba(0,0,0,.08)); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.38);
}
.dcp-pp-close {
  position: absolute; top: 6px; inset-inline-end: 10px; z-index: 2;
  background: none; border: none; padding: 4px 8px;
  font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--dcp-ink, #1a2233);
  opacity: .6;
}
.dcp-pp-close:hover { opacity: 1; }
.dcp-pp-close:focus-visible { outline: 2px solid var(--dcp-accent, #0b5fff); outline-offset: 2px; border-radius: 8px; }
.dcp-pp-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 20px 14px; -webkit-overflow-scrolling: touch; }
.dcp-pp-card:focus { outline: none; } /* focused on open for screen readers only */
/* Room for the ×, on whichever side it is. The button is placed with
   inset-inline-end, which on this RTL site is the LEFT — a physical margin here
   reserved the gutter on the right and let the title run under the button. */
.dcp-pp-title { margin: 0 0 12px; padding-inline-end: 34px; font-size: 1.06rem; line-height: 1.75; }
.dcp-pp-sub { margin: 0 0 10px; font-size: .95rem; opacity: .85; }
.dcp-pp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.dcp-pp-list li { display: flex; flex-direction: column; gap: 2px; }
.dcp-pp-list strong { font-size: .97rem; font-weight: 700; }
.dcp-pp-list span { font-size: .87rem; line-height: 1.75; color: var(--txt2, #4a5f85); }
.dcp-pp-foot {
  flex: 0 0 auto; padding: 12px 20px 16px;
  border-top: 1px solid var(--dcp-line, rgba(0,0,0,.08));
  background: var(--dcp-surface, #fff);
}
.dcp-pp-cta { display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; }
/* Hold the page still underneath, so a scroll gesture aimed at the card's list
   does not drag the article behind it once the list hits its end. */
html.dcp-pp-open, html.dcp-pp-open body { overflow: hidden; }

/* Header person icon pulse while the welcome box is up. */
@keyframes dcp-person-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
.dcp-person-attention { animation: dcp-person-pulse 1.05s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dcp-person-attention { animation: none; } }
.dcp-flame-n { font-weight: 800; font-size: .9rem; }

.dcp-person-wrap { position: relative; display: inline-flex; }
.dcp-person-btn { position: relative; }
.dcp-person-btn svg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dcp-person-btn.is-guest svg { stroke: var(--dcp-muted, #8a93a6); }   /* gray before login */
.dcp-person-btn.is-user svg { stroke: var(--dcp-accent, #0b5fff); }   /* blue after login */

/* The unread mark. A DOT, never a recolouring of the icon: the person icon is
   the identity indicator (gray = guest, blue = signed in) and repainting it red
   would cost the reader the ability to tell at a glance whether they are logged
   in, while reading as "something is wrong with your account" rather than "you
   have news". The ring is painted in the header's own background so the dot
   stays legible on top of the icon's strokes in either theme. */
.dcp-person-dot {
  position: absolute; top: 2px; inset-inline-end: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #e5484d; box-shadow: 0 0 0 2px var(--dcp-surface, #fff);
  pointer-events: none;
}
[data-theme="dark"] .dcp-person-dot { background: #ff6f61; box-shadow: 0 0 0 2px var(--surface, #17212b); }

.dcp-person-menu { position: absolute; top: 100%; inset-inline-end: 0; margin-top: 6px; min-width: 150px;
  background: var(--dcp-surface, #fff); color: var(--dcp-ink, #1c1c1c);
  border: 1px solid var(--dcp-line, rgba(0,0,0,.12)); border-radius: 12px;
  box-shadow: var(--dcp-shadow, 0 8px 30px rgba(0,0,0,.15)); padding: 6px; z-index: 10060; }
.dcp-person-item { display: block; width: 100%; text-align: start; font: inherit; background: none; border: none;
  cursor: pointer; padding: 10px 12px; border-radius: 8px; color: inherit; text-decoration: none; }
.dcp-person-item:hover { background: color-mix(in srgb, var(--dcp-accent, #0b5fff) 12%, transparent); }

/* The same count, spelled out, where the menu has room for it. Must come AFTER
   .dcp-person-item above: same specificity, so the later rule wins, and its
   `display: block` would otherwise cancel this flex row. */
.dcp-person-item-notices { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dcp-person-pill {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: .72rem; font-weight: 800;
  background: #e5484d; color: #fff; text-align: center; line-height: 1.6;
}
[data-theme="dark"] .dcp-person-pill { background: #ff6f61; color: #17212b; }

/* ---- homepage personal card (variant-1 redesign, 2026-08-11) --------------
   Flat, Examine-language card: full-bleed rows separated by hairlines —
   stat strip / league row / continue row / tinted channels bar. */
/* @home-critical */
.dc-plus-home-card { margin: 0 0 14px; }
/* @end-home-critical */
.dc-plus-home-inner {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; border: 1px solid var(--dcp-line); border-radius: var(--dcp-radius);
  background: var(--dcp-surface); overflow: hidden;
}
/* One hairline BETWEEN rows, whatever the order is (the row order is inverted
   in home-card.js — channels, continue, league, numbers — and may change
   again; per-row border-tops made that a two-file edit and left a stray line
   on whichever row happened to be first). */
.dc-plus-home-inner > * + * { border-top: 1px solid var(--dcp-line); }
/* stat strip: three equal columns, hairline-divided */
.dc-plus-statrail { display: flex; align-items: stretch; padding: 13px 6px 11px; }
.dc-plus-stat {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: inherit; text-decoration: none;
}
.dc-plus-stat + .dc-plus-stat::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 58%; background: var(--dcp-line);
}
.dc-plus-stat-v {
  display: flex; align-items: center; gap: 5px;
  font-size: 1.08rem; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.dc-plus-stat-v svg { width: 15px; height: 15px; display: block; }
.dc-plus-stat-k { font-size: .68rem; color: var(--dcp-muted); font-weight: 600; }
/* row 2: league on its own hairline row, «؟» at the far end */
.dc-plus-leaguerow {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
}
.dc-plus-leaguerow .dcp-lg-chip {
  background: none; border: none; box-shadow: none; padding: 0;
  font-size: .84rem; gap: 7px; cursor: pointer;
}
.dc-plus-info { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--dcp-line);
  background: transparent; color: var(--dcp-muted); font-weight: 700; font-size: .78rem; line-height: 1;
  cursor: pointer; margin-inline-start: auto; flex: 0 0 auto; }
.dc-plus-info:hover { color: var(--dcp-ink); border-color: var(--dcp-muted); }
.dc-plus-scorecap { margin: 0; font-size: .82rem; color: var(--dcp-muted); line-height: 1.8;
  padding: 8px 14px 10px; }
/* one caption line per topic (score, then سپر) — a paragraph each, not a wall */
.dc-plus-capline { display: block; }
.dc-plus-capline + .dc-plus-capline { margin-top: 5px; }
/* row 4: channels on a tinted bottom bar with a quiet label */
.dc-plus-connrow {
  display: flex; align-items: center; gap: 8px;
  background: var(--dcp-chip-bg);
  padding: 8px 14px;
}
.dc-plus-conn-lbl { font-size: .72rem; color: var(--dcp-muted); font-weight: 600; flex: 0 0 auto; }
.dc-plus-connrow .dc-plus-chips { margin-top: 0; flex: 1 1 auto; gap: 6px; }
.dc-plus-connrow .dc-plus-chip { font-size: .74rem; padding: 2px 10px; background: var(--dcp-surface); }
.dc-plus-anon { justify-content: space-between; }
.dc-plus-anon-line { margin: 0; line-height: 1.9; flex: 1 1 240px; }
/* @home-critical */
/* ---- signed-out promo card (login teaser, "variant B") ------------------- */
.dc-plus-promo {
  position: relative; overflow: hidden;
  color: var(--dcp-ink); background: var(--dcp-surface);
  border: 1px solid var(--dcp-line); border-radius: var(--dcp-radius);
  box-shadow: var(--dcp-shadow); padding: 20px 22px;
  background-image:
    radial-gradient(140% 120% at 92% 0%, rgba(255, 94, 58, .13), transparent 55%),
    radial-gradient(120% 130% at 0% 100%, rgba(var(--ac-rgb, 11, 95, 255), .10), transparent 55%);
}
.dc-plus-promo-top { display: flex; align-items: center; gap: 14px; }
.dc-plus-promo-h { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.dc-plus-promo-sub { margin: 3px 0 0; color: var(--dcp-muted); font-size: .9rem; line-height: 1.7; }
.dc-plus-promo-rule { height: 1px; background: var(--dcp-line); margin: 16px 0; }
.dc-plus-promo-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }

/* warm flame medallion (the one bold, on-brand-for-streaks focal point) */
.dc-plus-medal {
  position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 191, 71, .35), transparent 60%),
    conic-gradient(from 210deg, #ff5e3a, #ffbf47, #ff5e3a);
  box-shadow: 0 6px 18px rgba(255, 94, 58, .35), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.dc-plus-medal-fl { font-size: 1.35rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(255, 94, 58, .5)); }

/* feature chips */
.dc-plus-feats { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.dc-plus-feat {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: var(--dcp-radius-pill); font-size: .82rem; font-weight: 600;
  color: var(--dcp-ink); background: var(--dcp-chip-bg); border: 1px solid var(--dcp-line);
}
.dc-plus-feat-ico { display: inline-flex; color: var(--dcp-muted); }
.dc-plus-feat-ico svg { width: 15px; height: 15px; display: block; }
.dc-plus-feat-ico.t-fl { color: #ff6a3d; }
.dc-plus-feat-ico.t-st { color: #f5a300; }
.dc-plus-feat-ico.t-bell { color: var(--dcp-accent); }

/* CTA (own gradient so it never depends on --primary specificity) */
.dcp-btn.dc-plus-cta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: inherit; font-weight: 800; cursor: pointer; color: #fff; border: none;
  padding: 11px 20px; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dcp-accent) 82%, #fff), var(--dcp-accent));
  box-shadow: 0 8px 20px rgba(var(--ac-rgb, 11, 95, 255), .30);
  transition: transform .12s ease, box-shadow .12s ease;
}
.dcp-btn.dc-plus-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(var(--ac-rgb, 11, 95, 255), .42); }
.dcp-btn.dc-plus-cta:active { transform: translateY(0); }
.dc-plus-cta-arrow { opacity: .9; font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .dc-plus-medal { animation: dc-plus-pulse 3.2s ease-in-out infinite; }
  @keyframes dc-plus-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(255, 94, 58, .35), inset 0 0 0 1px rgba(255, 255, 255, .35); }
    50% { box-shadow: 0 8px 26px rgba(255, 94, 58, .6), inset 0 0 0 1px rgba(255, 255, 255, .4); }
  }
}
@media (max-width: 420px) {
  .dc-plus-promo-bottom { align-items: stretch; }
  .dcp-btn.dc-plus-cta { width: 100%; justify-content: center; }
}
/* @end-home-critical */
/* flame follows currentColor now (line icon): muted when cold, ember when lit */
.dc-plus-flame { display: inline-flex; color: var(--dcp-muted); opacity: .55; }
.dc-plus-flame.is-active { color: #c2410c; opacity: 1; }
[data-theme="dark"] .dc-plus-flame.is-active { color: #fb923c; }
.dc-plus-streak-n { font-size: inherit; }
/* continue row: label over a one-line title, chevron at the end */
.dc-plus-material {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  color: inherit; text-decoration: none;
}
.dc-plus-material-txt { flex: 1; min-width: 0; }
.dc-plus-material-lead {
  display: block; font-size: .68rem; font-weight: 800;
  color: var(--dcp-accent); letter-spacing: .2px; opacity: 1;
}
.dc-plus-material-title {
  display: block; font-size: .9rem; font-weight: 700; line-height: 1.8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-plus-material-chev { display: inline-flex; color: var(--dcp-muted); flex: 0 0 auto; }
.dc-plus-material-chev svg { width: 15px; height: 15px; display: block; }
.dc-plus-due { color: var(--dcp-accent); font-weight: 700; text-decoration: none; }
.dc-plus-premium-line { margin-inline-start: auto; color: inherit; opacity: .6; font-size: .88rem; text-decoration: none; }
/* «قطب‌نمای مطالعه» homepage entry (home-card.js) — same shape as دc-plus-due,
   plus a locked variant reusing the dashboard's own 🔒 badge + «؟» reveal. */
.dc-plus-compass-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-plus-compass { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; color: var(--dcp-accent); }
.dc-plus-compass.is-locked { color: inherit; opacity: .8; font-weight: 600; }

/* score badge (inline beside the streak) */
.dc-plus-score-ico { display: inline-flex; color: var(--dcp-muted); }
.dc-plus-score-n { font-size: inherit; }

/* streak shields (سپر) — identical typography to the streak/score badges beside
   it (same color, weight and label opacity); only the ICONS carry the
   filled/empty state, never the text, so the rail reads as one row. */
.dc-plus-shield-icos { display: inline-flex; color: var(--dcp-muted); }
.dc-plus-shield-icos.is-empty { opacity: .35; }
.dc-plus-shield-n { font-size: inherit; }

/* ---- homepage premium section (home-features.js) ------------------------- */
/* Sits under the Spot card, in the homepage's OWN card grammar. The list-card
   shell (.dc-list-card / -main / -title / -sub) is index.html's and is reused on
   purpose, so these rows stay visually identical to «تولید اختصاصی دنت‌کست»
   above them. Only the pieces that shell does not have live here.
   The section header is NOT reused from index.html: those rules are scoped
   #panel-studio, and the second copy of this section renders in the desktop
   column-C feed, outside that panel. Same look, written once, works in both. */
.dcp-hf { margin: 1.125rem 0 0; }
.dcp-hf-sec { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .7rem; }
.dcp-hf-label {
  font-size: .95rem; font-weight: 800; color: var(--txt, #0a1a33);
  border-right: 4px solid var(--ac, #0b5fff); padding-right: .625rem;
  margin: 0; line-height: 1.4;
}
.dcp-hf-more { font-size: .72rem; font-weight: 700; color: var(--ac, #0b5fff); text-decoration: none; }
.dcp-hf-card { text-decoration: none; color: inherit; gap: .6rem; }
.dcp-hf-ico {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 9px;
  display: grid; place-items: center; color: var(--pr, #022360);
  background: rgba(var(--ac-rgb, 11, 95, 255), .09);
  border: 1px solid rgba(var(--ac-rgb, 11, 95, 255), .16);
}
.dcp-hf-ico svg {
  width: 1rem; height: 1rem; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The state chip: a lock for a reader who does not have the feature, the
   feature's own live value for a subscriber. One element, two states — never
   two different components that could drift apart. */
.dcp-hf-state {
  flex: 0 0 auto; font-size: .7rem; font-weight: 800; line-height: 1.7;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--surface2, #f4f6fb); color: var(--txt2, #4a5f85);
}
.dcp-hf-state.is-live { background: var(--chip-bg, rgba(11, 95, 255, .08)); color: var(--ac, #0b5fff); }
/* The desktop column-C feed has no page padding of its own around this block. */
.dcd-welcome-feed .dcp-hf { margin-top: .8rem; }

/* ===== weekly league =================================================== */
/* tier shield badge — material gradient per tier, low (acrylic) to high (titanium) */
.dcp-tier {
  position: relative; display: grid; place-items: center; flex: 0 0 auto; color: #20303f;
  clip-path: polygon(50% 0, 100% 20%, 100% 64%, 50% 100%, 0 64%, 0 20%);
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .28));
}
.dcp-tier::before { content: ""; position: absolute; inset: 0; clip-path: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%); }
.dcp-tier::after { content: ""; position: absolute; inset: 0; clip-path: inherit;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 0 0 3px rgba(0, 0, 0, .06); }
.dcp-tier.is-dark { color: #f4f8ff; }
.dcp-tier-ord { position: relative; z-index: 1; font-weight: 900; line-height: 1; text-shadow: 0 1px 1px rgba(255, 255, 255, .4); }
.dcp-tier.is-dark .dcp-tier-ord { text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.dcp-tier-tooth { position: absolute; z-index: 1; opacity: .5; }
.dcp-tier-xs { width: 22px; height: 24px; } .dcp-tier-xs .dcp-tier-ord { font-size: .8rem; } .dcp-tier-xs .dcp-tier-tooth { display: none; }
.dcp-tier-sm { width: 34px; height: 38px; } .dcp-tier-sm .dcp-tier-ord { font-size: 1.05rem; } .dcp-tier-sm .dcp-tier-tooth { width: 11px; height: 11px; top: 5px; }
.dcp-tier-md { width: 56px; height: 62px; } .dcp-tier-md .dcp-tier-ord { font-size: 1.6rem; } .dcp-tier-md .dcp-tier-tooth { width: 15px; height: 15px; top: 9px; }
.dcp-tier-lg { width: 74px; height: 82px; } .dcp-tier-lg .dcp-tier-ord { font-size: 2rem; } .dcp-tier-lg .dcp-tier-tooth { width: 18px; height: 18px; top: 12px; }
.dcp-tier-t1 { background: linear-gradient(155deg, #f7d9dd, #dd9aa2); }
.dcp-tier-t2 { background: linear-gradient(155deg, #eef2f7, #93a0af); }
.dcp-tier-t3 { background: linear-gradient(155deg, #fdfbf2, #ddceb0); }
.dcp-tier-t4 { background: linear-gradient(155deg, #fbe9bd, #cf9f3f); }
.dcp-tier-t5 { background: linear-gradient(155deg, #e9fbff, #7fcbe0); }
.dcp-tier-t6 { background: linear-gradient(155deg, #ffffff, #c4d0dd); }
.dcp-tier-t7 { background: linear-gradient(150deg, #6a7d90, #1f2630); }

/* home-card league chip */
.dcp-lg-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px;
  border-radius: var(--dcp-radius-pill); border: 1px solid var(--dcp-line); background: var(--dcp-chip-bg);
  cursor: pointer; font: inherit; color: var(--dcp-ink); }
.dcp-lg-chip b { font-weight: 800; } .dcp-lg-chip-r { opacity: .8; font-weight: 600; font-size: .9rem; }
.dcp-lg-chip-r.is-muted { opacity: .6; font-weight: 500; }

/* dashboard / profile entry button */
.dcp-lg-entry { display: flex; align-items: center; gap: 12px; width: 100%; text-align: right; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--dcp-line); border-radius: var(--dcp-radius); background: var(--dcp-surface); font: inherit; color: var(--dcp-ink); }
.dcp-lg-entry-txt { display: flex; flex-direction: column; }
.dcp-lg-entry-txt b { font-weight: 800; } .dcp-lg-entry-sub { font-size: .82rem; color: var(--dcp-muted); }
.dcp-lg-entry-arrow { margin-inline-start: auto; font-size: 1.4rem; opacity: .5; }

/* overlay card */
.dcp-lg-card { background: var(--dcp-surface); color: var(--dcp-ink); border: 1px solid var(--dcp-line);
  border-radius: 20px; box-shadow: var(--dcp-shadow); overflow: hidden; width: min(440px, 94vw); max-height: 90vh;
  display: flex; flex-direction: column; position: relative; }
.dcp-lg-head { display: flex; align-items: center; gap: 14px; padding: 20px 18px 16px;
  padding-inline-end: 46px; /* reserve the top corner for the × so nothing sits under it */
  background: radial-gradient(120% 130% at 90% 0, rgba(245, 163, 0, .13), transparent 55%); }
.dcp-lg-card .dcp-modal-close { top: 12px; inset-inline-end: 14px; z-index: 2; }
.dcp-lg-head-txt h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.dcp-lg-head-sub { margin: 2px 0 0; font-size: .82rem; color: var(--dcp-muted); }
/* league timer bar */
.dcp-lg-timebar { display: flex; align-items: center; gap: 7px; padding: 9px 18px;
  font-size: .84rem; border-top: 1px solid var(--dcp-line); border-bottom: 1px solid var(--dcp-line);
  background: color-mix(in srgb, var(--dcp-accent) 6%, transparent); }
.dcp-lg-timebar-lbl { color: var(--dcp-muted); }
.dcp-lg-timebar b { font-weight: 800; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.dcp-lg-body { overflow-y: auto; }
.dcp-lg-zone { display: flex; align-items: center; gap: 8px; padding: 7px 18px; font-size: .72rem; font-weight: 700; }
.dcp-lg-zone.is-up { color: #12a06b; } .dcp-lg-zone.is-down { color: #e0533d; }
.dcp-lg-zone-ln { flex: 1; height: 1px; background: currentColor; opacity: .25; }
.dcp-lg-row { display: flex; align-items: center; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--dcp-line); }
.dcp-lg-rk { width: 22px; text-align: center; font-weight: 800; opacity: .8; font-variant-numeric: tabular-nums; }
.dcp-lg-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--dcp-accent); font-weight: 800; font-size: .8rem; flex: 0 0 auto; }
.dcp-lg-nm { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcp-lg-xp { font-weight: 800; font-variant-numeric: tabular-nums; } .dcp-lg-xp small { font-weight: 500; opacity: .6; font-size: .72rem; margin-inline-start: 3px; }
.dcp-lg-row.is-up { background: linear-gradient(90deg, rgba(18, 160, 107, .08), transparent); }
.dcp-lg-row.is-down { background: linear-gradient(90deg, rgba(224, 83, 61, .08), transparent); }
.dcp-lg-row.is-me { background: color-mix(in srgb, var(--dcp-accent) 12%, transparent); border-inline-start: 3px solid var(--dcp-accent); }
.dcp-lg-row.is-me .dcp-lg-nm { font-weight: 800; }
.dcp-lg-foot { padding: 12px 18px; font-size: .78rem; color: var(--dcp-muted); border-top: 1px solid var(--dcp-line); text-align: center; }
.dcp-lg-empty { padding: 22px 20px; text-align: center; } .dcp-lg-empty p { margin: 0 0 8px; }
/* "how to earn XP" (collapsible, subtle) */
.dcp-lg-howto { border-top: 1px solid var(--dcp-line); padding: 10px 18px; font-size: .82rem; }
.dcp-lg-howto summary { cursor: pointer; font-weight: 700; color: var(--dcp-ink); list-style: none; }
.dcp-lg-howto summary::-webkit-details-marker { display: none; }
.dcp-lg-howto summary::before { content: '؟ '; opacity: .55; }
.dcp-lg-howto p { margin: 8px 0 0; color: var(--dcp-muted); line-height: 1.9; }
.dcp-lg-howto-list { margin: 8px 0 0; padding-inline-start: 18px; color: var(--dcp-muted); line-height: 2; }
.dcp-lg-howto-list li { list-style: disc; }

/* the league overlay must sit ABOVE the dashboard/profile header panel (10050).
   Two classes (specificity 0,2,0) so it beats .dcp-modal-overlay regardless of
   source order. */
.dcp-modal-overlay.dcp-lg-overlay { z-index: 10090; }

/* finalized-outcome announcement */
.dcp-lg-announce { align-items: center; text-align: center; padding: 26px 22px; gap: 6px; }
.dcp-lg-announce > * { margin: 0; }
.dcp-lg-announce-face { font-size: 2.4rem; }
.dcp-lg-announce .dcp-tier { margin: 8px auto 4px; }
.dcp-lg-announce h3 { font-size: 1.3rem; font-weight: 800; margin: 6px 0 2px; }
.dcp-lg-announce p { color: var(--dcp-muted); line-height: 1.8; }
.dcp-lg-announce-rank { font-size: .85rem; }
.dcp-lg-announce .dcp-btn { margin-top: 14px; min-width: 140px; }
/* "stayed" outcome's premium teaser — right-aligned against the rest of the
   card's centered text, since a bullet list reads better started than centered. */
.dcp-lg-announce .dcp-lg-stay-teaser { width: 100%; text-align: start; padding-top: 14px; margin-top: 4px; border-top: 1px dashed var(--dcp-line); }
.dcp-lg-announce .dcp-lg-stay-line { font-weight: 700; color: var(--dcp-ink); }

/* connection chips — their own line under the streak/score */
.dc-plus-chips { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.dc-plus-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border: 1px solid var(--dcp-line); border-radius: 999px;
  font: inherit; font-size: .85rem; line-height: 1.6; color: inherit;
  background: transparent; text-decoration: none; cursor: pointer;
}
.dc-plus-chip:disabled { opacity: .6; cursor: default; }
.dc-plus-chip-ico { font-weight: 800; opacity: .45; }
.dc-plus-chip.is-on { border-color: color-mix(in srgb, #22a06b 45%, var(--dcp-line)); background: color-mix(in srgb, #22a06b 10%, transparent); }
.dc-plus-chip.is-on .dc-plus-chip-ico { color: #22a06b; opacity: 1; }

/* deep-link highlight: arriving at a section via #hash (e.g. #connect from the
   homepage chips) briefly tints it so the eye lands in the right place. */
.dcp-flash { animation: dcp-flash 1.8s ease-out; border-radius: var(--dcp-radius); }
@keyframes dcp-flash {
  0%, 12% { background: color-mix(in srgb, var(--dcp-accent) 16%, transparent); }
  100% { background: transparent; }
}

/* ---- "seen" ticks on landing-page links (Plus, logged-in only) ----------- */
/* The unseen tick is deliberately very faint — the green "seen" state must read
   as an obvious change at a glance, so the grey sits far below it in contrast. */
.dcp-seen-tick { display: inline-block; margin-inline-end: 6px; font-weight: 800; color: var(--dcp-muted, #9aa4b2); opacity: .28; }
.dcp-seen-tick.is-seen { color: #22a06b; opacity: 1; }

/* ---- highlight marks (in the prose) -------------------------------------- */
mark.dcp-hl { background: transparent; color: inherit; border-radius: 3px; padding: 0 1px; cursor: pointer; }
mark.dcp-hl[data-color="yellow"] { background: #ffe08a; }
mark.dcp-hl[data-color="green"] { background: #b7e4b0; }
mark.dcp-hl[data-color="blue"] { background: #a9d3f5; }
mark.dcp-hl[data-color="pink"] { background: #f6b8cf; }
mark.dcp-hl[data-color="red"] { background: #ff8080; }
/* Dark theme: the pastel fills above stay the same, but the inherited text
   colour is white there — unreadable on a light fill. Force dark ink on FILLED
   marks only; underline/cloze have transparent fills and must keep the theme's
   light text. */
[data-theme="dark"] mark.dcp-hl[data-color]:not(.dcp-underline):not(.dcp-cloze) { color: #0a1a33; }
/* Underline & cloze are transparent-fill marks that carry the chosen colour on
   the line / dotted border. Base is red (also covers older colourless marks);
   the per-colour rules below override it with the selected colour. */
mark.dcp-hl.dcp-underline { background: transparent; text-decoration: underline; text-decoration-color: #ff8080; text-decoration-thickness: 2px; text-underline-offset: 3px; }
mark.dcp-hl.dcp-cloze { background: transparent; border-bottom: 2px dotted #ff8080; }
mark.dcp-hl.dcp-underline[data-color="yellow"] { text-decoration-color: #ffe08a; } mark.dcp-hl.dcp-cloze[data-color="yellow"] { border-bottom-color: #ffe08a; }
mark.dcp-hl.dcp-underline[data-color="green"]  { text-decoration-color: #b7e4b0; } mark.dcp-hl.dcp-cloze[data-color="green"]  { border-bottom-color: #b7e4b0; }
mark.dcp-hl.dcp-underline[data-color="blue"]   { text-decoration-color: #a9d3f5; } mark.dcp-hl.dcp-cloze[data-color="blue"]   { border-bottom-color: #a9d3f5; }
mark.dcp-hl.dcp-underline[data-color="pink"]   { text-decoration-color: #f6b8cf; } mark.dcp-hl.dcp-cloze[data-color="pink"]   { border-bottom-color: #f6b8cf; }
mark.dcp-hl.dcp-underline[data-color="red"]    { text-decoration-color: #ff8080; } mark.dcp-hl.dcp-cloze[data-color="red"]    { border-bottom-color: #ff8080; }

/* Arrived here from a ?dcphl=<id> link (the highlight library / the dashboard's
   recent list / a collection): the mark is scrolled to and pulsed for a moment,
   so on a screen of prose you can see WHICH one you came for. A ring, never a
   colour change — the highlight's own colour is the user's. */
mark.dcp-hl.dcp-hl-focus { animation: dcp-hl-pulse 1.1s ease-in-out 2; border-radius: 4px; }
@keyframes dcp-hl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11, 95, 255, 0); }
  50% { box-shadow: 0 0 0 4px rgba(11, 95, 255, .35); }
}
@media (prefers-reduced-motion: reduce) {
  mark.dcp-hl.dcp-hl-focus { animation: none; box-shadow: 0 0 0 3px rgba(11, 95, 255, .35); }
}

/* ---- floating toolbar (bottom, ergonomic, avoids the fixed header) -------- */
.dcp-toolbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 9000;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--dcp-surface); border-top: 1px solid var(--dcp-line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
}
/* Static instruction line: full width so it sits on its own row above the tools. */
.dcp-wb-hint { flex: 0 0 100%; text-align: center; font-size: .82rem; font-weight: 800; color: var(--dcp-muted); margin-bottom: 2px; }
.dcp-tool-group { display: inline-flex; gap: 6px; align-items: center; padding-inline-end: 8px; border-inline-end: 1px solid var(--dcp-line); }
.dcp-tool-group:last-of-type { border-inline-end: none; }
.dcp-tool-glabel { font-size: .72rem; color: var(--dcp-muted); font-weight: 700; margin-inline-end: 2px; }
.dcp-editor-label { display: block; font-size: .8rem; font-weight: 700; color: var(--dcp-muted); margin: 8px 0 4px; }
.dcp-editor-label:first-child { margin-top: 0; }
.dcp-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--dcp-line); background: var(--sw, #ccc); cursor: pointer; }
.dcp-swatch.is-active { border-color: var(--dcp-ink); box-shadow: 0 0 0 2px var(--dcp-surface), 0 0 0 4px var(--dcp-accent); }
.dcp-tool, .dcp-chip {
  font: inherit; font-size: .9rem; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--dcp-line); color: var(--dcp-ink);
}
.dcp-tool.is-active, .dcp-chip.is-active { background: var(--dcp-accent); color: #fff; border-color: transparent; }
.dcp-exit { margin-inline-start: 6px; border-color: var(--dcp-accent); color: var(--dcp-accent); }

/* body gets bottom room for the toolbar while in study mode */
body.dcp-study { padding-bottom: 90px; }

/* ---- side panels (desktop) / sheets (mobile) ----------------------------- */
.dcp-toc-panel, .dcp-notes-panel {
  position: fixed; top: 90px; z-index: 8000; width: 260px; max-height: 70vh; overflow: auto;
  background: var(--dcp-surface); border: 1px solid var(--dcp-line); border-radius: var(--dcp-radius);
  box-shadow: var(--dcp-shadow); padding: 12px;
}
.dcp-toc-panel { inset-inline-start: 14px; }   /* start side (right in RTL) */
.dcp-notes-panel { inset-inline-end: 14px; }    /* end side (left in RTL) */
.dcp-panel-head { font-weight: 700; margin-bottom: 8px; }
.dcp-toc-item { margin: 2px 0; }
.dcp-toc-link { display: flex; justify-content: space-between; gap: 8px; text-decoration: none; color: var(--dcp-ink); padding: 4px 2px; line-height: 1.7; }
.dcp-toc-link.dcp-toc-h3, .dcp-toc-link.dcp-toc-h4 { padding-inline-start: 14px; opacity: .9; font-size: .95em; }
.dcp-toc-count { color: var(--dcp-accent); font-weight: 700; }
.dcp-toc-count.is-empty { display: none; }

.dcp-notes-list { display: flex; flex-direction: column; gap: 8px; }
.dcp-note-card { border: 1px solid var(--dcp-line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.dcp-note-quote { font-size: .82rem; opacity: .7; margin-bottom: 4px; }
.dcp-note-text { line-height: 1.7; white-space: pre-wrap; }
.dcp-notes-empty { opacity: .6; }
/* A multi-line note (renderNoteLines in util.js) becomes a real bulleted list
   instead of lines just running one after another with no marker. */
.dcp-note-list { margin: 0; padding-inline-start: 1.3em; line-height: 1.8; }
.dcp-note-list li { margin: 2px 0; }

/* ---- editor popover ------------------------------------------------------ */
/* Docked just ABOVE the workbench toolbar (never under it) and viewport-fixed, so
   the note editor is always visible. `--dcp-editor-dock` is the live offset JS keeps
   in sync: the measured toolbar height normally, or the on-screen keyboard height
   while the note field is focused on mobile — so the editor sits above the keyboard
   like a search bar, keyboard below. `!important` makes the stylesheet the single
   source of truth for placement, immune to the article page's own layout and to any
   stale cached JS. The dock var has a 96px fallback so it works even before JS sets it. */
.dcp-editor {
  position: fixed !important;
  top: auto !important;
  bottom: var(--dcp-editor-dock, 96px) !important; /* sits directly on the toolbar's top edge */
  /* left+right+margin:auto centring can never overflow either edge (unlike a
     translateX(-50%), which clipped by a few px against the scrollbar). */
  left: 8px !important;
  right: 8px !important;
  margin-inline: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 420px !important;
  /* Height is relative to the window: never more than the space between the top of
     the screen and the dock (toolbar, or keyboard when typing), so it can't overflow
     the viewport; content scrolls inside instead. Capped at 60vh so it isn't huge. */
  max-height: min(60vh, calc(100dvh - var(--dcp-editor-dock, 96px) - 16px)) !important;
  overflow: auto !important;
  z-index: 9500; padding: 12px;
  background: var(--dcp-surface); border: 1px solid var(--dcp-line); border-radius: var(--dcp-radius); box-shadow: var(--dcp-shadow);
}
.dcp-editor-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.dcp-note-input { box-sizing: border-box; width: 100%; min-height: 70px; font: inherit; padding: 8px; border: 1px solid var(--dcp-line); border-radius: 8px; resize: vertical; }
.dcp-editor-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ---- card archive / flashcards (works on /plus AND folder landing pages) -- */
.dcp-archive-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.dcp-back { color: var(--dcp-muted) !important; font-size: .9rem; }
.dcp-archive-title { font-size: 1.3rem; font-weight: 800; margin: 0; flex: 1 1 auto; }
.dcp-archive-count { color: var(--dcp-muted); font-size: .9rem; }
.dcp-archive-note { color: var(--dcp-muted); font-size: .92rem; margin: 4px 2px 18px; }
.dcp-card-list { display: flex; flex-direction: column; gap: 12px; }
.dcp-card { position: relative; background: var(--dcp-surface); border: 1px solid var(--dcp-line); border-radius: var(--dcp-radius); padding: 14px 16px; box-shadow: var(--dcp-shadow); }
.dcp-card-del { position: absolute; top: 8px; inset-inline-start: 8px; width: 26px; height: 26px; line-height: 22px; text-align: center; font-size: 1.2rem; border-radius: 50%; border: 1px solid var(--dcp-line); background: var(--dcp-surface); color: var(--dcp-muted); cursor: pointer; }
.dcp-card-del:hover { color: #c0392b; border-color: #c0392b; }
.dcp-card-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--dcp-line); }
.dcp-btn-danger { background: #c0392b; color: #fff; border-color: transparent; }
.dcp-card.is-reviewed { opacity: .7; border-color: var(--dcp-accent); }
.dcp-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-inline-start: 32px; color: var(--dcp-muted); font-size: .82rem; }
.dcp-card-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dcp-card-label { background: var(--dcp-chip-bg); border: 1px solid var(--dcp-line); color: var(--dcp-accent); border-radius: 999px; padding: 1px 10px; }
.dcp-card-src { margin-inline-start: auto; }
.dcp-card-text { font-size: 1.05rem; line-height: 2.2; }
.dcp-card-note { margin-top: 10px; padding: 8px 10px; background: var(--dcp-surface-2); border-radius: 10px; white-space: pre-wrap; }
.dcp-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.dcp-blank { font: inherit; background: var(--dcp-chip-bg); border: 1px dashed var(--dcp-accent); color: var(--dcp-accent); border-radius: 6px; padding: 0 10px; cursor: pointer; letter-spacing: .12em; }
.dcp-blank.is-open { background: transparent; border-style: solid; color: inherit; cursor: default; letter-spacing: normal; }

/* ---- premium review (Leitner), /plus/cards.html ---------------------------
   Highlights show IN FULL, marked exactly like they are in the article
   (mark.dcp-hl above) — never cloze-hidden; that treatment is reserved for a
   later, visually distinct card source (AI-authored key points). */
.dcp-rv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.dcp-rv-title { font-size: 1.3rem; font-weight: 800; margin: 0; }
.dcp-rv-count { flex: 0 0 auto; font-size: .84rem; font-weight: 700; color: var(--dcp-accent); background: var(--dcp-chip-bg); padding: 5px 13px; border-radius: 999px; }
.dcp-rv-list { display: flex; flex-direction: column; gap: 14px; }
.dcp-rv-card { background: var(--dcp-surface); border: 1px solid var(--dcp-line); border-radius: 20px; padding: 18px 20px; box-shadow: var(--dcp-shadow); transition: opacity .25s ease; }
.dcp-rv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dcp-rv-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--dcp-muted); }
.dcp-rv-badge-dot { width: 10px; height: 10px; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent); }
.dcp-rv-badge-dot[data-color="yellow"] { background: #ffe08a; }
.dcp-rv-badge-dot[data-color="green"]  { background: #b7e4b0; }
.dcp-rv-badge-dot[data-color="blue"]   { background: #a9d3f5; }
.dcp-rv-badge-dot[data-color="pink"]   { background: #f6b8cf; }
.dcp-rv-badge-dot[data-color="red"]    { background: #ff8080; }
.dcp-rv-label { font-size: .74rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: var(--dcp-chip-bg); color: var(--dcp-accent); }
.dcp-rv-text { margin: 0; font-size: 1.08rem; line-height: 2.3; color: var(--dcp-ink); }
.dcp-rv-src { margin-top: 10px; font-size: .84rem; color: var(--dcp-muted); }
.dcp-rv-src a { color: var(--dcp-accent); text-decoration: none; font-weight: 600; }
.dcp-rv-src a:hover { text-decoration: underline; }
.dcp-rv-note { margin-top: 12px; padding: 10px 14px; background: var(--dcp-surface-2); border-radius: 12px; font-size: .92rem; color: var(--dcp-muted); white-space: pre-wrap; }
.dcp-rv-actions { display: flex; gap: 10px; margin-top: 16px; }
.dcp-rv-btn { flex: 1; font: inherit; font-weight: 700; padding: 13px 10px; border-radius: 14px; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, opacity .15s ease; }
.dcp-rv-btn:active { transform: scale(.97); }
.dcp-rv-btn:disabled { opacity: .55; cursor: default; transform: none; }
.dcp-rv-btn-again { background: var(--dcp-surface-2); color: var(--dcp-ink); border-color: var(--dcp-line); }
.dcp-rv-btn-good { background: linear-gradient(180deg, color-mix(in srgb, #22a06b 85%, #fff), #22a06b); color: #fff; box-shadow: 0 6px 18px rgba(34, 160, 107, .3); }
.dcp-rv-graded-tag { display: none; margin-top: 14px; font-size: .86rem; font-weight: 700; color: #22a06b; }
.dcp-rv-card.is-graded { opacity: .55; }
.dcp-rv-card.is-graded .dcp-rv-actions { display: none; }
.dcp-rv-card.is-graded .dcp-rv-graded-tag { display: block; }

/* AI review cards ("نکته هوش مصنوعی") — amber accent via the existing
   --dcp-gold token pair, so nothing AI-generated is ever shown without a
   visible label distinguishing it from the reader's own highlight cards. */
.dcp-rv-card-ai {
  border-color: color-mix(in srgb, var(--dcp-gold) 45%, var(--dcp-line));
  background: linear-gradient(150deg, var(--dcp-gold-bg), var(--dcp-surface) 55%);
}
.dcp-rv-badge-ai { color: var(--dcp-gold); }
.dcp-rv-reveal {
  display: block; width: 100%; margin-top: 14px; font: inherit; font-weight: 700;
  padding: 13px 10px; border-radius: 14px; cursor: pointer;
  background: var(--dcp-gold-bg); color: var(--dcp-gold);
  border: 1px solid color-mix(in srgb, var(--dcp-gold) 35%, transparent);
  transition: transform .15s ease, opacity .15s ease;
}
.dcp-rv-reveal:active { transform: scale(.97); }
.dcp-rv-ai-back {
  margin-top: 14px; padding-top: 14px; font-size: 1.08rem; line-height: 2.3; color: var(--dcp-ink);
  border-top: 1px dashed color-mix(in srgb, var(--dcp-gold) 35%, transparent);
}

/* ---- learning pathways (Phase 3), /plus/pathways.html + /plus/pathway.html --
   Progress is derived server-side from the user's own highlights/reading —
   there is no manual "mark step complete"; see plus-api/src/pathways.ts. The
   card grid stays a single column on mobile (plus-desktop.css takes it to
   two columns from tablet up, matching .dcp-pw-grid there). */
.dcp-pw-top { margin-bottom: 4px; }
.dcp-pw-heading { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; }

.dcp-pw-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
a.dcp-pw-card {
  display: block; background: var(--dcp-surface); border: 1px solid var(--dcp-line);
  border-radius: var(--dcp-radius); padding: 16px 18px; box-shadow: var(--dcp-shadow);
  color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.dcp-pw-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
/* The whole card is one <a> (site convention makes anchor text blue by
   default, see body.dcp-page a) — a directly specified color always wins over
   an inherited one, so this plain rule is enough to keep the title ink-colored
   while the state tag still reads as the link affordance (same trick
   dashboard.js's .dcp-recent-link uses for its own whole-row link). */
.dcp-pw-card-title { font-size: 1.05rem; font-weight: 800; margin: 0; line-height: 1.6; color: var(--dcp-ink); }
.dcp-pw-tag { flex: 0 0 auto; font-size: .74rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; white-space: nowrap; background: var(--dcp-chip-bg); color: var(--dcp-accent); }
/* Filled (not tinted) so the text stays readable in both themes, same reasoning
   as the solid dcp-btn-primary / dcp-rv-btn-good fills. */
.dcp-pw-tag.is-done { background: #22a06b; color: #fff; }
.dcp-pw-card-desc {
  margin: 0 0 12px; color: var(--dcp-muted); font-size: .9rem; line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dcp-pw-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: .82rem; color: var(--dcp-muted); }
.dcp-pw-card-ms { white-space: nowrap; }

.dcp-pw-detail-head { margin-bottom: 6px; }
.dcp-pw-detail-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 6px; }
.dcp-pw-detail-progress { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.dcp-pw-detail-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .88rem; color: var(--dcp-muted); }

.dcp-pw-enroll { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 16px 0 24px; }
.dcp-pw-enrolled-tag { font-weight: 700; color: #22a06b; font-size: .92rem; }
.dcp-pw-enroll-hint { margin: 0; font-size: .82rem; color: var(--dcp-muted); line-height: 1.7; max-width: 46em; }

/* Step "timeline": a plain divided list (not a connected rail) — robust at any
   step count (some pathways run 30+ steps) without fragile absolute-position
   math. State reads from the marker fill + the inline-start accent border. */
.dcp-pw-steps { display: flex; flex-direction: column; border-top: 1px solid var(--dcp-line); }
.dcp-pw-step {
  display: flex; align-items: center; gap: 14px; padding: 14px 6px;
  border-bottom: 1px solid var(--dcp-line); border-inline-start: 3px solid transparent;
  text-decoration: none; color: inherit; transition: background .15s ease, border-color .15s ease;
}
.dcp-pw-step:hover { background: var(--dcp-surface-2); }
.dcp-pw-step-marker {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: .82rem;
  color: var(--dcp-muted); background: var(--dcp-surface-2); border: 1px solid var(--dcp-line);
}
.dcp-pw-step-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dcp-pw-step-top { display: flex; align-items: center; gap: 8px; }
.dcp-pw-step-kind { font-size: .72rem; font-weight: 700; color: var(--dcp-muted); letter-spacing: .02em; }
/* Same whole-row-is-a-link fix as .dcp-pw-card-title above. */
.dcp-pw-step-title { font-weight: 600; line-height: 1.7; color: var(--dcp-ink); transition: color .15s ease; }
.dcp-pw-step-here {
  flex: 0 0 auto; font-size: .74rem; font-weight: 800; color: var(--dcp-accent);
  background: var(--dcp-chip-bg); padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.dcp-pw-step.is-done { border-inline-start-color: #22a06b; }
.dcp-pw-step.is-done .dcp-pw-step-marker { background: #22a06b; border-color: #22a06b; color: #fff; }
.dcp-pw-step.is-done .dcp-pw-step-title { color: var(--dcp-muted); }
.dcp-pw-step.is-current { border-inline-start-color: var(--dcp-accent); background: color-mix(in srgb, var(--dcp-accent) 8%, transparent); }
.dcp-pw-step.is-current .dcp-pw-step-marker { background: var(--dcp-accent); border-color: var(--dcp-accent); color: #fff; }
.dcp-pw-steps .dcp-pw-step:last-child { border-bottom: none; }

/* ---- starter bundles (curated subset of a pathway's steps), same catalog +
   detail pages as pathways above — see .dentcast/bundles-handoff.md. Bundle
   cards stay visually smaller than a pathway card (glyph + title + step
   count, no description) on purpose: the name is the whole pitch. */
.dcb-sec-head { display: flex; align-items: center; gap: 8px; margin: 22px 0 2px; }
.dcb-sec-title { font-size: 1.05rem; font-weight: 800; margin: 0; }
.dcb-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 800;
  color: var(--dcp-gold); background: var(--dcp-gold-bg);
  border: 1px solid color-mix(in srgb, var(--dcp-gold) 35%, transparent);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.dcb-chip .dc-icon { width: 12px; height: 12px; }
/* NOTE: the catalog's bundle section is the same .dcb-band + .dcb-railwrap
   strip as the homepage (below) — there is deliberately no separate grid/card
   shape for it. The earlier .dcb-grid/.dcb-card pair died twice over: ten
   stacked cards buried «مسیرهای کامل» below the fold, and putting
   .dcp-progress-track inside a stretched flex COLUMN blew its
   `flex: 0 0 100%` basis (meant for the dashboard's flex-row progress rows)
   up to the card's full height — the giant gray pill of 2026-08-09. Keep
   progress tracks out of flex-column layouts. */

/* bundle chip on the detail page, and its two referral cards */
.dcp-pw-detail-head .dcb-chip { margin-bottom: 8px; }
.dcb-prereq {
  display: flex; align-items: center; gap: 8px; font-size: .84rem;
  background: var(--dcp-surface-2); border: 1px solid var(--dcp-line); border-radius: var(--dcp-radius);
  padding: 10px 14px; margin-top: 14px; color: var(--dcp-muted);
}
.dcb-prereq .dc-icon { width: 18px; height: 18px; flex: none; color: var(--dcp-gold); }
.dcb-prereq b { color: var(--dcp-ink); font-weight: 700; }
.dcb-continue {
  margin: 18px 0 0; border-radius: var(--dcp-radius); padding: 14px 16px; font-size: .88rem;
  background: color-mix(in srgb, var(--dcp-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--dcp-accent) 22%, transparent);
  color: var(--dcp-muted);
}
.dcb-continue b { display: block; margin-bottom: 3px; color: var(--dcp-ink); }
.dcb-continue a { color: var(--dcp-accent); font-weight: 800; text-decoration: none; }

/* ---- bundle band + rail — shared by the homepage's "از کجا شروع کنم؟"
   strip (plus/js/home-bundles.js) AND the catalog's «باندل‌های شروع» section
   (plus/js/pathways.js) —
   the one deliberate warm moment on an otherwise cool/blue homepage. Its
   classes are entirely self-contained (not the homepage's own .dc-rail /
   .dc-home-sec-*): plus.css is injected by dc-nav.js on every page including
   index.html, which already defines those names scoped under #panel-studio —
   reusing them here would fight that scope's specificity depending on
   injection order, so this rail gets its own names instead. */
.dcb-band {
  border-radius: 20px; padding: 14px 14px 4px; margin: 18px 0;
  background: linear-gradient(150deg, var(--dcp-gold-bg), transparent 60%);
  border: 1px solid color-mix(in srgb, var(--dcp-gold) 26%, transparent);
}
.dcb-band[hidden] { display: none; }
.dcb-band-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dcb-band-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--dcp-ink); }
.dcb-band-title .dc-icon { width: 20px; height: 20px; flex: none; color: var(--dcp-gold); }
.dcb-band-count {
  font-size: .68rem; font-weight: 800; color: var(--dcp-gold); background: var(--dcp-gold-bg);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.dcb-band-more { font-size: .8rem; font-weight: 700; color: var(--dcp-gold); text-decoration: none; white-space: nowrap; }
.dcb-band-hint { margin: 4px 0 0; font-size: .8rem; color: var(--dcp-muted); }

/* overscroll-behavior-x keeps a rail swipe from chaining to the page once the
   rail hits its edge. Snap is PROXIMITY, deliberately not the homepage rails'
   mandatory: with only ~2.2 of these heavier cards in view, mandatory snap
   yanks every sub-half-card drag straight back to where it started — on an
   RTL touch screen that reads as "the rail won't move at all" (founder
   report, 2026-08-09). Proximity keeps the tidy card alignment on a real
   fling but never fights a small drag. The tab-swipe protection itself is
   JS: index.html's touchstart exclusion + the rail's own stopPropagation
   guard in home-bundles.js — CSS alone cannot stop those listeners. */
.dcb-railwrap {
  display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px 14px;
  scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
}
.dcb-railwrap::-webkit-scrollbar { display: none; }
a.dcb-railcard {
  flex: 0 0 168px; scroll-snap-align: start; border-radius: 16px; padding: 13px;
  display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--dcp-surface), var(--dcp-surface)) padding-box,
    linear-gradient(165deg, var(--dcp-gold) 0%, color-mix(in srgb, var(--dcp-gold) 25%, transparent) 45%, var(--dcp-accent) 100%) border-box;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--dcp-gold) 14%, transparent);
  transition: transform .15s ease;
}
.dcb-railcard-glyph { color: var(--dcp-gold); }
.dcb-railcard-glyph .dc-icon { width: 24px; height: 24px; }
.dcb-railcard-title { font-size: .88rem; font-weight: 800; line-height: 1.6; margin: 0; min-height: 2.85em; color: var(--dcp-ink); }
.dcb-railcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.dcb-railcard-meta { font-size: .7rem; color: var(--dcp-muted); font-weight: 600; }
.dcb-railcard-tag { font-size: .68rem; font-weight: 800; color: var(--dcp-gold); }

/* ---- collections (Phase 3), Pinterest-shaped: boards -> pins, localized to
   the site's own tokens/RTL. /plus/collections.html (board grid) +
   /plus/collection.html (one board's pin masonry) + the "افزودن به کالکشن"
   bottom sheet (the two workbench buttons, dashboard recent-highlight rows).
   Entirely user-made — no founder curation, no taxonomy coupling. The catalog
   reuses .dcp-pw-top/.dcp-pw-heading and the detail view reuses
   .dcp-pw-detail-head/.dcp-pw-detail-title from the pathways module above;
   only what's specific to collections lives here. */
.dcp-cl-picknew { display: flex; gap: 8px; margin: 14px 0; }
.dcp-cl-picknew .dcp-input { flex: 1 1 auto; }

.dcp-cl-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.dcp-cl-title-wrap { flex: 1 1 260px; min-width: 0; }
.dcp-cl-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* board cover: a small collage of up to 3 items (Pinterest's own board-cover
   shape) — one big + two stacked when there are 3, an even split for 1-2,
   and a plain folder glyph while empty. Shared by the catalog's board tiles
   AND the picker sheet's board rows (there at a smaller fixed size). */
.dcp-cl-cover { display: grid; gap: 2px; overflow: hidden; border-radius: var(--dcp-radius) var(--dcp-radius) 0 0; }
.dcp-cl-cover-0 { display: flex; align-items: center; justify-content: center; background: var(--dcp-surface-2); }
.dcp-cl-cover-empty { font-size: 1.6rem; opacity: .5; }
.dcp-cl-cover-1 { grid-template-columns: 1fr; }
.dcp-cl-cover-2 { grid-template-columns: 1fr 1fr; }
.dcp-cl-cover-3 { grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; }
.dcp-cl-cover-3 .dcp-cl-cover-tile:first-child { grid-row: 1 / 3; }
.dcp-cl-cover-tile { display: block; min-height: 54px; }
.dcp-cl-cover-tile-page { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }

/* the board grid itself (catalog page) */
.dcp-cl-board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
a.dcp-cl-board {
  display: block; background: var(--dcp-surface); border: 1px solid var(--dcp-line);
  border-radius: var(--dcp-radius); overflow: hidden; box-shadow: var(--dcp-shadow);
  color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.dcp-cl-board .dcp-cl-cover { height: 120px; border-radius: 0; }
.dcp-cl-board-meta { padding: 10px 12px 12px; }
.dcp-cl-board-title { font-weight: 800; font-size: .92rem; margin: 0 0 2px; color: var(--dcp-ink); }
.dcp-cl-board-count { font-size: .78rem; color: var(--dcp-muted); margin: 0; }

/* pin masonry (one board's contents). A pin is a CARD, not a link: it carries
   the highlight, its note, its label and its own actions, so the chrome that
   used to live on the (now removed) inner <a> belongs to the pin itself. One
   column on a phone — two columns of full cards is a wall, not a board. */
.dcp-cl-pin-grid { column-count: 1; column-gap: 12px; margin-top: 16px; }
@media (min-width: 620px) { .dcp-cl-pin-grid { column-count: 2; } }
.dcp-cl-pin {
  break-inside: avoid; margin-bottom: 12px; position: relative;
  background: var(--dcp-surface); border: 1px solid var(--dcp-line);
  border-radius: var(--dcp-radius); overflow: hidden; box-shadow: var(--dcp-shadow);
}
.dcp-cl-pin-band { padding: 14px 12px; }
.dcp-cl-pin-band .dcp-hl { display: block; line-height: 1.9; font-size: .92rem; padding: 0; }
.dcp-cl-pin-page { color: #fff; text-align: center; padding: 26px 12px; font-weight: 700; line-height: 1.7; }
.dcp-cl-pin-ico { display: block; font-size: 1.5rem; margin-bottom: 8px; }
.dcp-cl-pin-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 12px; font-size: .72rem; color: var(--dcp-muted);
  border-top: 1px solid var(--dcp-line);
}

/* the "افزودن به کالکشن" bottom sheet (Pinterest's own save-to-board shape).
   Mobile-first: slides up from the bottom; plus-desktop.css turns it into a
   centered dialog from tablet width up. */
.dcp-sheet-overlay {
  position: fixed; inset: 0; z-index: 10100; background: rgba(0, 0, 0, 0); pointer-events: none;
  transition: background .25s ease; display: flex; align-items: flex-end; justify-content: center;
}
.dcp-sheet-overlay.is-open { background: rgba(0, 0, 0, .45); pointer-events: auto; }
.dcp-sheet {
  width: 100%; max-width: 480px; background: var(--dcp-surface); border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .2); padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow: auto; transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .3, 1);
}
.dcp-sheet.is-open { transform: translateY(0); }
.dcp-sheet-handle { width: 40px; height: 4px; border-radius: 4px; background: var(--dcp-line); margin: 8px auto 14px; }
.dcp-sheet-card { display: flex; flex-direction: column; }
.dcp-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.dcp-sheet-title { font-size: 1.15rem; font-weight: 800; margin: 0; }
.dcp-sheet-sub { margin: 8px 0 0; color: var(--dcp-muted); font-size: .92rem; line-height: 1.8; }
.dcp-sheet-cap { font-size: .84rem; color: var(--dcp-muted); line-height: 1.8; margin: 10px 0 0; padding: 10px 12px; background: var(--dcp-surface-2); border-radius: 12px; }

.dcp-cl-picklist { display: flex; flex-direction: column; gap: 8px; max-height: 44vh; overflow: auto; margin: 14px 0; }
.dcp-cl-pick-empty { margin: 4px 0 10px; color: var(--dcp-muted); font-size: .9rem; }
.dcp-cl-pick-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font: inherit; text-align: start; padding: 8px; border-radius: 14px;
  border: 1px solid var(--dcp-line); background: var(--dcp-surface); color: var(--dcp-ink); cursor: pointer;
}
.dcp-cl-pick-row:hover { border-color: var(--dcp-accent); }
.dcp-cl-pick-row .dcp-cl-cover { width: 46px; height: 46px; flex: none; border-radius: 10px; }
.dcp-cl-pick-row .dcp-cl-cover-tile { min-height: 0; }
.dcp-cl-pick-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dcp-cl-pick-name { font-weight: 700; }
.dcp-cl-pick-count { font-size: .78rem; color: var(--dcp-muted); }

/* saved-confirmation toast (Pinterest's own "Saved" pip) */
.dcp-cl-toast {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; z-index: 10200;
  transform: translate(-50%, 16px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
  background: var(--dcp-ink); color: var(--dcp-surface); padding: 11px 18px; border-radius: var(--dcp-radius-pill);
  font-size: .88rem; font-weight: 700; display: flex; align-items: center; gap: 8px;
  box-shadow: var(--dcp-shadow); white-space: nowrap;
}
.dcp-cl-toast.is-shown { transform: translate(-50%, 0); opacity: 1; }
.dcp-cl-toast-check { width: 18px; height: 18px; border-radius: 50%; background: #22a06b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .68rem; flex: none; }

/* folder-landing flashcard section (collapsible, at the top of the page) */
.dcp-flash-section { margin: 14px 0; border: 1px solid var(--dcp-line); border-radius: var(--dcp-radius); background: var(--dcp-surface); overflow: hidden; }
.dcp-flash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; cursor: pointer; font-weight: 700; }
.dcp-flash-head:hover { background: var(--dcp-chip-bg); }
.dcp-flash-body { padding: 0 16px 14px; }
.dcp-flash-chevron { transition: transform .2s; }
.dcp-flash-section.is-open .dcp-flash-chevron { transform: rotate(180deg); }

/* ---- login modal --------------------------------------------------------- */
.dcp-modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dcp-modal-card { position: relative; width: 100%; max-width: 380px; background: var(--dcp-surface); color: var(--dcp-ink); border-radius: 16px; box-shadow: var(--dcp-shadow); padding: 22px; }
.dcp-modal-close { position: absolute; top: 10px; inset-inline-end: 12px; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--dcp-ink); }
.dcp-modal-close.is-hidden { display: none; }
.dcp-modal-title { margin: 0 0 6px; font-size: 1.25rem; }
.dcp-modal-sub { margin: 0 0 16px; opacity: .8; line-height: 1.8; font-size: .92rem; }
.dcp-modal-step { display: flex; flex-direction: column; gap: 10px; }
.dcp-label { font-size: .9rem; font-weight: 600; }
.dcp-input { font: inherit; padding: 10px 12px; border: 1px solid var(--dcp-line); border-radius: 10px; }
.dcp-input-code { letter-spacing: .4em; text-align: center; font-size: 1.3rem; }
.dcp-modal-msg { min-height: 1.2em; font-size: .88rem; color: var(--dcp-accent); }
.dcp-modal-devhint { font-size: .82rem; opacity: .7; }

/* Telegram Login block (shown above the phone step on .org). */
.dcp-tg-step { margin-bottom: 14px; }
.dcp-tg-caption { font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
.dcp-tg-holder { min-height: 40px; display: flex; }
.dcp-tg-holder iframe { margin: 0 !important; }
/* "or with your phone number" divider between Telegram and OTP. */
.dcp-modal-or { display: flex; align-items: center; text-align: center; gap: 10px; opacity: .6; font-size: .82rem; margin-top: 6px; }
.dcp-modal-or::before, .dcp-modal-or::after { content: ""; flex: 1; height: 1px; background: var(--dcp-line); }
/* Profile: "Telegram connected" confirmation. */
.dcp-tg-linked { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #1f9d55; }
.dcp-tg-linked-ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #1f9d55; color: #fff; font-size: .8rem; }
/* Profile: messenger-connection rows (Telegram live + Bale coming soon). */
.dcp-messenger { display: flex; flex-direction: column; gap: 14px; }
.dcp-messenger-provider { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--dcp-line); border-radius: 12px; }
.dcp-messenger-provider.is-soon { opacity: .7; }
.dcp-messenger-name { display: flex; align-items: center; gap: 8px; font-weight: 700; }

/* box-sizing is stated, not inherited from the browser: .dcp-btn is worn by
   both <button> and <a>, and the UA stylesheet gives border-box to form
   controls only. So `width: 100%` on a .dcp-btn produced two different boxes —
   an <a> kept the CSS default content-box and rendered 100% PLUS its 32px of
   padding and 2px of border. On /plus/pricing.html that anchor exists only off
   .ir («پرداخت ریالی در dentcast.ir», where the rial gateway is not), which is
   why the same page was 392px wide inside a 358px column on .org and exactly
   358px on .ir: 18px of horizontal document overflow, and in RTL that shifts
   the whole page so every box reads as out of register. */
/* @home-critical */
.dcp-btn { box-sizing: border-box; font: inherit; font-weight: 600; padding: 10px 16px; border-radius: 10px; cursor: pointer; border: 1px solid var(--dcp-line); background: transparent; color: var(--dcp-ink); }
/* @end-home-critical */
.dcp-btn-primary { background: var(--dcp-accent); color: #fff; border-color: transparent; }
.dcp-btn-ghost { background: transparent; }

/* ---- toast --------------------------------------------------------------- */
.dcp-toast { position: fixed; bottom: 100px; inset-inline: 0; margin: 0 auto; width: max-content; max-width: 90vw; z-index: 10001;
  background: var(--dcp-ink); color: #fff; padding: 10px 16px; border-radius: 999px; opacity: 0; transform: translateY(8px); transition: .3s; }
.dcp-toast.is-in { opacity: 1; transform: translateY(0); }

/* ---- responsive: panels become toggled bottom sheets --------------------- */
@media (max-width: 1099px) {
  .dcp-toc-panel, .dcp-notes-panel {
    inset-inline: 0; top: auto; bottom: 78px; width: auto; max-height: 55vh;
    border-radius: 16px 16px 0 0; transform: translateY(110%); transition: transform .25s; margin: 0 8px;
  }
  .dcp-toc-panel.is-open, .dcp-notes-panel.is-open { transform: translateY(0); }
  .dcp-only-mobile { display: inline-block; }
}
@media (min-width: 1100px) {
  .dcp-only-mobile { display: none; }
}

/* ---- site tour (guided walkthrough; mobile homepage) --------------------- */
/* Freeze the scroll body while the tour drives it programmatically. */
html.dcp-touring #mobile-body { overflow: hidden; }

/* Full-screen layer above everything (header 200, bottom nav 300, person menu
   10060): it swallows all interaction so the tour can't be broken mid-step. */
.dcp-tour-layer { position: fixed; inset: 0; z-index: 20000; overscroll-behavior: contain; touch-action: none; }

/* The spotlight mask: FOUR opaque strips around the hole (a giant box-shadow
   spread silently fails to paint on some phone GPUs — plain divs cannot) plus
   a transparent ring for the highlight border. */
.dcp-tour-dim {
  position: fixed; background: rgba(3, 8, 18, .72);
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
}
.dcp-tour-ring {
  position: fixed; pointer-events: none; border-radius: 14px;
  outline: 2px solid color-mix(in srgb, var(--dcp-accent, #0b5fff) 70%, #fff);
  outline-offset: 2px;
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
}

.dcp-tour-card {
  position: fixed; width: min(92vw, 340px); box-sizing: border-box;
  background: var(--dcp-surface, #fff); color: var(--dcp-ink, #1a2233);
  border: 1px solid var(--dcp-line, rgba(0, 0, 0, .1)); border-radius: 16px;
  padding: 14px 16px 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
  transition: top .3s ease, left .3s ease;
}
.dcp-tour-kicker { margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .4px; color: var(--dcp-accent, #0b5fff); }
.dcp-tour-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; }
.dcp-tour-text { margin: 0 0 12px; font-size: .92rem; line-height: 1.9; }
.dcp-tour-foot { display: flex; align-items: center; gap: 8px; }
.dcp-tour-next { min-width: 96px; }
.dcp-tour-progress { margin-inline-start: auto; font-size: .8rem; opacity: .65; font-variant-numeric: tabular-nums; }

/* First-login invite (reuses the welcome overlay look). */
.dcp-tour-offer-hint { margin: 0 0 14px; font-size: .85rem; opacity: .8; line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  .dcp-tour-dim, .dcp-tour-ring, .dcp-tour-card { transition: none; }
}

/* The compass explainer ends with a way to act on it, not just a description. */
.dc-plus-caplink {
  display: inline-block; margin-top: 8px; font-weight: 700; font-size: .86rem;
  color: var(--ac, #0b5fff); text-decoration: none;
  border-bottom: 1px solid rgba(var(--ac-rgb, 11,95,255), .35);
}
.dc-plus-caplink:hover { border-bottom-color: currentColor; }


/* ── گفت‌وگوی زیر مطلب ────────────────────────────────────────────────────
   The conversation block under an article (plus/js/article-threads.js).

   It lives HERE rather than in dc-article.css, where an article-surface class
   would normally go, because the block renders on both surfaces and only this
   stylesheet reaches both: dc-nav.js injects plus.css on every page, while
   dc-article.css is linked by article pages alone — and the desktop shell
   (index.html) loads no shared CSS at all, fetching the article as a fragment
   into column C. Styling this in dc-article.css would have left the block
   unstyled for every desktop reader, the same gap buildShareButton() closes.

   Two things it deliberately is NOT: it is not amber (that colour means «this
   is what a subscription buys» site-wide, and a published thread is free to
   read), and — since 2026-08-18 — the heading is never hidden even when
   nothing is published and the reader cannot write: a block that only ever
   existed for readers who already had a reason to look for it was invisible
   to everyone else. What non-premium readers still cannot do is write
   without being asked first: .dc-th-ask is a plain reply button carrying no
   mention of a subscription, and only pressing it swaps in .dc-th-gate.

   Every colour is a theme token, so the block follows light/dark with the rest
   of the article instead of carrying its own palette. */
.dc-threads{
  margin:2.5rem 0 1rem;
  padding-top:1.5rem;
  border-top:1px solid var(--border, rgba(2,35,96,.10));
}
.dc-th-skel{ min-height:1px; }
.dc-th-title{
  font-size:1.05rem;
  font-weight:800;
  margin:0 0 .25rem;
  color:var(--txt, #0a1a33);
}
.dc-th-count{
  font-size:.82rem;
  color:var(--txt2, #4a5f85);
  margin-bottom:.875rem;
}
.dc-th-pub,
.dc-th-mine{
  background:var(--surface2, #f4f6fb);
  border:1px solid var(--border2, rgba(2,35,96,.06));
  border-radius:14px;
  padding:.875rem 1rem;
  margin-bottom:.75rem;
}
.dc-th-mine{
  background:transparent;
  border-style:dashed;
}
.dc-th-mine-head{
  font-size:.8rem;
  font-weight:700;
  color:var(--txt2, #4a5f85);
  margin-bottom:.5rem;
}
.dc-th-msg + .dc-th-msg{
  margin-top:.75rem;
  padding-top:.75rem;
  border-top:1px solid var(--border2, rgba(2,35,96,.06));
}
.dc-th-who{
  font-size:.76rem;
  color:var(--txt2, #4a5f85);
  margin-bottom:.25rem;
}
.dc-th-msg-founder .dc-th-who{
  color:var(--ac, #0b5fff);
  font-weight:700;
}
.dc-th-body{
  font-size:.92rem;
  line-height:1.9;
  color:var(--txt, #0a1a33);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.dc-th-compose{ margin-top:1rem; }
.dc-th-input{
  width:100%;
  box-sizing:border-box;
  background:var(--surface, #fff);
  color:var(--txt, #0a1a33);
  border:1px solid var(--border, rgba(2,35,96,.10));
  border-radius:12px;
  padding:.7rem .85rem;
  font:inherit;
  font-size:.92rem;
  line-height:1.8;
  resize:vertical;
}
.dc-th-row{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:.5rem;
}
.dc-th-send{
  background:var(--ac, #0b5fff);
  color:var(--txt-inv, #fff);
  border:0;
  border-radius:999px;
  padding:.5rem 1.35rem;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.dc-th-send:disabled{ opacity:.55; cursor:default; }
.dc-th-note{
  font-size:.78rem;
  line-height:1.8;
  color:var(--txt2, #4a5f85);
  margin-top:.5rem;
}
.dc-th-gate{
  background:var(--surface2, #f4f6fb);
  border:1px solid var(--border2, rgba(2,35,96,.06));
  border-radius:14px;
  padding:.875rem 1rem;
  margin-top:1rem;
}
.dc-th-gate p{ margin:0 0 .625rem; font-size:.9rem; color:var(--txt2, #4a5f85); }
/* Scoped under .dc-threads (two classes), not just `.dc-th-cta` (one) — dc-theme.css's
   "content area links" rule (`body:has(.dc-topbar) main a`) outranks a single class on
   specificity alone and was repainting this button's white text the same blue as its
   own background, so the CTA read as a blank pill (2026-08-19). */
.dc-threads .dc-th-cta{
  display:inline-block;
  background:var(--ac, #0b5fff);
  color:var(--txt-inv, #fff);
  border-radius:999px;
  padding:.45rem 1.15rem;
  font-size:.86rem;
  font-weight:800;
  text-decoration:none;
}
.dc-th-ask{
  margin-top:1rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--surface, #fff);
  color:var(--txt, #0a1a33);
  border:1px solid var(--border, rgba(2,35,96,.10));
  border-radius:999px;
  padding:.55rem 1.1rem;
  font:inherit;
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
}
.dc-th-ask:hover{ border-color:rgba(var(--ac-rgb, 11,95,255),.4); color:var(--ac, #0b5fff); }
.dc-th-ask-ic{ width:16px; height:16px; flex:none; }

/* ============================================================================
   DentCast Evidence Score (DES) — chip + evaluation card
   Rendered by plus/js/des.js from plus/des-scores.json. NO PAGE CARRIES THIS
   MARKUP, same rule as the action row above, which is why this lives here in
   plus.css and not in dc-article.css: the desktop shell keeps the former and
   strips the latter, and one feature may not be defined in two stylesheets.

   Colour is its own third scale — grey → dark green, never through red. E is
   grey rather than red because a low band is not a failing grade and must not
   read as «رد شده»; it is never amber (that means «this is what a subscription
   buys») and never brand blue.

   TWO COLOUR SYSTEMS LIVE HERE, and keeping them apart is the point.
   --des-A…E is the BAND: it carries meaning and only ever paints the five
   blocks and the band's own name. --des-chrome is the CARD: it carries no
   meaning at all, and its whole job is to say "a machine wrote this panel, the
   author did not". It has to be a fourth colour because the other three are
   taken — amber is premium, brand blue is the site's own content (which is
   exactly what made this card read as section 9 of the article), and the
   grey→green scale belongs to the band, so chroming the card in it would give
   a band-E page green chrome above a grey band. Indigo-violet is the modern
   convention for computed-not-authored, and it collides with nothing here.
   ========================================================================= */
:root {
  --des-E: #78808f; --des-D: #5f8a63; --des-C: #3f9a49; --des-B: #2f8f3f; --des-A: #1f7a34;
  --des-chrome: #6455a6; --des-chrome-rgb: 100, 85, 166;
}
[data-theme="dark"] {
  --des-E: #8b93a3; --des-D: #89a68c; --des-C: #6fae74; --des-B: #4f9d5c; --des-A: #2f8f52;
  --des-chrome: #a99ce0; --des-chrome-rgb: 169, 156, 224;
}
.dc-des-band-A { --des-cur: var(--des-A); } .dc-des-band-B { --des-cur: var(--des-B); }
.dc-des-band-C { --des-cur: var(--des-C); } .dc-des-band-D { --des-cur: var(--des-D); }
.dc-des-band-E { --des-cur: var(--des-E); }

/* the chip — in .dc-actions-aux, because the band is something the page says
   ABOUT ITSELF (like زمان مطالعه), not an action you take on it. */
.dc-act-des { font-size: .85rem; font-weight: 700; color: var(--des-cur); border-color: var(--des-cur); }
.dc-act-des .dc-des-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--des-cur); color: #fff; font-size: .74rem; font-weight: 800;
}
.dc-act-des .dc-des-chip-txt { font-weight: 700; }

/* the card — deliberately NOT an article box.
   It used to be `--dcp-surface` + `--dcp-line` + a blue accent bar on its
   heading, which is character-for-character the vocabulary of a section box in
   the prose, so readers took it for a section the author had written called
   «ارزیابی شواهد» (reported 2026-08-15). Every signal below exists to break
   that reading: a tinted fill the article never uses, a chrome-coloured border
   in a hue nothing else on the page wears, one solid edge, and a real gap plus
   a rule above it so the article visibly ENDS first. */
.dc-des-card {
  background: rgba(var(--des-chrome-rgb), .045);
  border: 1px solid rgba(var(--des-chrome-rgb), .22);
  border-inline-start: 3px solid var(--des-chrome);
  border-radius: var(--dcp-radius); padding: 15px 17px 17px;
  margin: 2.25rem 0 1rem; position: relative;
}
/* the seam — a hairline in the gap ABOVE the card, not inside it. The article
   has to visibly end before the apparatus starts; a margin alone reads as
   paragraph spacing. */
.dc-des-card::before {
  content: ""; position: absolute; inset-inline: 0; top: -1.15rem;
  height: 1px; background: var(--dcp-line);
}
.dc-des-card-h {
  font-size: .95rem; font-weight: 700; color: var(--des-chrome);
  margin: 0; text-align: right; letter-spacing: -.1px;
}
/* provenance, ABOVE the content rather than in a footnote — by the time a
   reader reaches the bottom of the card they have already misread the top. */
.dc-des-prov-note {
  margin: 5px 0 14px; font-size: .76rem; line-height: 1.8;
  color: var(--dcp-muted);
}
.dc-des-src + .dc-des-src { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dcp-line); }
.dc-des-srctitle { font-size: .82rem; color: var(--dcp-muted); margin-bottom: 8px; line-height: 1.7; }
.dc-des-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }

/* five discrete blocks, only the current one coloured — never a gauge: the
   output is not continuous and a needle would give a two-point difference a
   meaning it does not have. */
.dc-des-bar { display: inline-flex; direction: ltr; border-radius: 7px; overflow: hidden; border: 1px solid var(--dcp-line); flex: none; }
.dc-des-blk {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; background: var(--dcp-surface-2); color: var(--dcp-muted);
  border-left: 1px solid var(--dcp-line);
}
.dc-des-blk:first-child { border-left: 0; }
.dc-des-b-A.is-on { background: var(--des-A); color: #fff; }
.dc-des-b-B.is-on { background: var(--des-B); color: #fff; }
.dc-des-b-C.is-on { background: var(--des-C); color: #fff; }
.dc-des-b-D.is-on { background: var(--des-D); color: #fff; }
.dc-des-b-E.is-on { background: var(--des-E); color: #fff; }

.dc-des-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-des-bandname { font-weight: 700; font-size: .95rem; color: var(--des-cur); }
/* welded to the band: bands compare only inside one question type */
.dc-des-qtype { font-size: .78rem; color: var(--dcp-muted); }
/* the audit layer — small and quiet, never the headline */
.dc-des-score {
  margin-inline-start: auto; font-size: .8rem; color: var(--dcp-muted);
  background: var(--dcp-surface-2); border: 1px solid var(--dcp-line);
  border-radius: 7px; padding: 3px 9px; font-variant-numeric: tabular-nums;
}
/* The COMMENTARY badge is the apparatus's own label, so it wears the card's
   chrome. It was brand blue, which is the one colour this card had to stop
   using — a blue pill inside the panel put the "site content" signal straight
   back into the object we had just taken it out of. */
.dc-des-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--des-chrome-rgb), .10);
  border: 1px solid rgba(var(--des-chrome-rgb), .30);
  color: var(--des-chrome); border-radius: 999px; padding: 5px 14px;
  font-weight: 700; font-size: .9rem;
}
/* abstract-only: hatched, not solid — the uncertainty is visible, not a footnote */
.dc-des-prov {
  display: inline-block; font-size: .74rem; color: #a67a1f; margin-bottom: 10px;
  background: repeating-linear-gradient(45deg, rgba(227,184,73,.13), rgba(227,184,73,.13) 4px, transparent 4px, transparent 8px);
  border: 1px dashed rgba(227,184,73,.5); border-radius: 999px; padding: 3px 11px;
}
.dc-des-calc { border: 1px solid var(--dcp-line); border-radius: 9px; background: var(--dcp-surface-2); overflow: hidden; }
.dc-des-calc > summary { cursor: pointer; padding: 8px 12px; font-size: .82rem; font-weight: 600; color: var(--dcp-muted); }
.dc-des-calc-body { padding: 2px 12px 11px; font-size: .78rem; color: var(--dcp-muted); line-height: 1.85; }
.dc-des-calc-line { padding: 2px 0; }
.dc-des-doms { margin: 5px 0; padding-inline-start: 18px; }
.dc-des-doms li { margin: 2px 0; }
.dc-des-calc-final { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--dcp-line); font-weight: 700; color: var(--dcp-ink); }
/* the interpretation is separated by a rule and never sits inside the article
   body — a reader must not read it as the article's own voice */
.dc-des-rule { border: 0; border-top: 1px solid var(--dcp-line); margin: 13px 0 10px; }
/* the interpretation was the longest thing in the card and was set in the
   article's own typography (--dcp-ink at .88rem), which made it the single
   biggest contributor to the "this is the next section" reading. It is now
   labelled and set apart: smaller, muted, on a chrome-tinted ground. */
.dc-des-interp-lbl {
  display: block; margin: 0 0 5px;
  font-size: .7rem; font-weight: 800; letter-spacing: .2px;
  color: var(--des-chrome);
}
.dc-des-interp {
  margin: 0; font-size: .82rem; color: var(--dcp-muted); line-height: 1.9;
  background: rgba(var(--des-chrome-rgb), .05);
  border-radius: 9px; padding: 9px 11px;
}
.dc-des-foot { margin: 14px 0 0; font-size: .74rem; color: var(--dcp-muted); line-height: 1.8; }

/* A cited source with no method to appraise (a textbook). It wears the card's
   chrome like the COMMENTARY badge, but hollow — there is no score behind it. */
.dc-des-badge-na {
  background: transparent;
  border-style: dashed;
}

/* ══════════════════════════════════════════════════════════════════════
   ارزیاب DES — the homepage tool panel (plus/js/des-scorer.js).
   The tab + drawer shell is static markup in index.html (a formal twin of
   the DES explainer box), where --destool-amber* is declared locally —
   index.html loads no shared CSS, so those tokens are NOT redeclared here;
   they reach every rule below by ordinary DOM inheritance, since the panel
   is a descendant of the wrapper that defines them.

   The answer card's body reuses .dc-des-* wholesale via des.js's exported
   sourceBlock() — band bar, "محاسبه", "تفسیر امتیاز" — the same DOM an
   article's own DES card renders. Nothing here draws a second band; only
   the outer .dc-destool-answer shell and its heading are this tool's own,
   because the framing differs ("مقاله‌ی تو", not a cited source).

   Gate states (signed-out / locked / unreachable) are plain .dcp-gate /
   .dcp-btn / .dcp-muted, already defined above for every other /plus surface.
   ========================================================================= */
#dcDesToolPanel {
  border: 1px solid var(--destool-amber-bd); border-top: 0; border-right: 3px solid var(--destool-amber);
  border-radius: 0 0 .875rem .875rem; background: var(--destool-amber-wash);
  box-shadow: var(--dcp-shadow); padding: .85rem 1rem 1.05rem;
  font-size: .8rem; color: var(--dcp-ink); line-height: 1.85;
}
#dcDesToolPanel .dcp-gate { padding: .4rem 0 .2rem; background: none; border: 0; box-shadow: none; }

.dc-destool-byline {
  display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .85rem; padding: .55rem .7rem;
  border-radius: .6rem; background: var(--dcp-surface); border: 1px solid var(--dcp-line);
  font-size: .73rem; color: var(--dcp-muted); line-height: 1.8;
}
.dc-destool-byline b { color: var(--dcp-ink); font-weight: 800; }
.dc-destool-av {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--destool-amber-wash-2); border: 1px solid var(--destool-amber-bd);
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
}

.dc-destool-quota { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  font-size: .7rem; color: var(--dcp-muted); margin-bottom: .65rem; }
.dc-destool-quota-ticks { display: flex; gap: .28rem; }
.dc-destool-qt { width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid var(--destool-amber); }
.dc-destool-qt.on { background: var(--destool-amber); }

.dc-destool-titlerow { margin-bottom: .5rem; }
.dc-destool-titlerow input, .dc-destool-linkrow input {
  width: 100%; font: inherit; color: var(--dcp-ink); background: var(--dcp-surface);
  border: 1px solid var(--dcp-line); border-radius: .6rem; outline: none;
  transition: border-color .18s ease;
}
.dc-destool-titlerow input { font-size: .8rem; font-weight: 600; padding: .55rem .7rem; }
.dc-destool-titlerow input:focus, .dc-destool-linkrow input:focus { border-color: var(--destool-amber); }

.dc-destool-pdfrow {
  display: flex; align-items: center; gap: .5rem; margin: .55rem 0; padding: .5rem .65rem;
  border-radius: .6rem; cursor: pointer; background: var(--dcp-surface); border: 1px solid var(--dcp-line);
  transition: border-color .18s ease;
}
.dc-destool-pdfrow.on { border-color: rgba(42, 159, 214, .5); background: rgba(42, 159, 214, .06); }
.dc-destool-pdfrow input { width: 1rem; height: 1rem; accent-color: #2a9fd6; flex: none; margin: 0; }
.dc-destool-pdfrow span { font-size: .75rem; color: var(--dcp-muted); }
.dc-destool-pdfrow.on span { color: var(--dcp-ink); }
.dc-destool-pdfrow em { font-style: normal; color: var(--dcp-muted); font-size: .7rem; }

.dc-destool-field { position: relative; }
.dc-destool-field textarea {
  width: 100%; min-height: 7.5rem; resize: vertical; display: block; font: inherit;
  font-size: .82rem; line-height: 1.95; color: var(--dcp-ink); background: var(--dcp-surface);
  border: 1px solid var(--dcp-line); border-radius: .75rem; padding: .75rem .8rem 1.6rem; outline: none;
  transition: border-color .18s ease, opacity .18s ease;
}
.dc-destool-field textarea:focus { border-color: var(--destool-amber); }
.dc-destool-field.dim textarea { opacity: .6; min-height: 4.5rem; }
.dc-destool-count {
  position: absolute; bottom: .5rem; left: .7rem; font-size: .64rem; color: var(--dcp-muted);
  font-variant-numeric: tabular-nums; pointer-events: none;
}

.dc-destool-linkrow { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; }
.dc-destool-linkrow input { flex: 1; min-width: 0; font-size: .72rem; padding: .42rem .6rem; direction: ltr; text-align: left; border-radius: .55rem; }
.dc-destool-linkrow input::placeholder { text-align: right; direction: rtl; }
.dc-destool-auto {
  flex: none; font-size: .62rem; font-weight: 800; color: #1f7a34;
  background: rgba(31, 122, 52, .1); border: 1px solid rgba(31, 122, 52, .28); border-radius: 999px;
  padding: .15rem .5rem; opacity: 0; transition: opacity .2s ease;
}
.dc-destool-auto.on { opacity: 1; }
[data-theme="dark"] .dc-destool-auto { color: #6fae74; background: rgba(111, 174, 116, .12); border-color: rgba(111, 174, 116, .3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc-destool-auto { color: #6fae74; background: rgba(111, 174, 116, .12); border-color: rgba(111, 174, 116, .3); } }

.dc-destool-chips { display: flex; align-items: center; gap: .35rem; margin-top: .55rem; flex-wrap: wrap; }
.dc-destool-chips > span { font-size: .68rem; color: var(--dcp-muted); margin-inline-end: .15rem; }
.dc-destool-chip {
  font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; border-radius: 999px;
  padding: .28rem .75rem; color: var(--dcp-muted); background: var(--dcp-surface); border: 1px solid var(--dcp-line);
}
.dc-destool-chip.on { background: var(--destool-amber-wash-2); border-color: var(--destool-amber-bd); color: var(--destool-amber-ink); }

.dc-destool-issues { margin-top: .6rem; display: flex; flex-direction: column; gap: .35rem; }
.dc-destool-issue { display: flex; gap: .45rem; align-items: flex-start; font-size: .71rem; line-height: 1.8; border-radius: .55rem; padding: .42rem .6rem; }
.dc-destool-issue b { font-weight: 800; }
.dc-destool-issue-stop { color: #9a2b2b; background: rgba(154, 43, 43, .07); border: 1px solid rgba(154, 43, 43, .22); }
.dc-destool-issue-warn { color: var(--destool-amber-ink); background: var(--destool-amber-wash); border: 1px dashed var(--destool-amber-bd); }
[data-theme="dark"] .dc-destool-issue-stop { color: #f0a3a3; background: rgba(240, 163, 163, .09); border-color: rgba(240, 163, 163, .26); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc-destool-issue-stop { color: #f0a3a3; background: rgba(240, 163, 163, .09); border-color: rgba(240, 163, 163, .26); } }

.dc-destool-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
.dc-destool-go {
  font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; border-radius: 999px;
  padding: .55rem 1.35rem; border: 1px solid transparent; background: var(--destool-amber); color: #fff;
}
[data-theme="dark"] .dc-destool-go { color: #1a1405; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc-destool-go { color: #1a1405; } }
.dc-destool-go:disabled { background: var(--dcp-line); color: var(--dcp-muted); cursor: not-allowed; }

.dc-destool-linkbtn {
  background: none; border: 0; font: inherit; font-size: .7rem; font-weight: 700; color: var(--dcp-muted);
  cursor: pointer; padding: .2rem 0; text-decoration: underline; text-underline-offset: 3px;
}
.dc-destool-linkbtn:hover { color: var(--dcp-ink); }

.dc-destool-whisper { margin-top: .6rem; }
.dc-destool-whisper summary {
  cursor: pointer; font-size: .7rem; color: var(--dcp-muted); font-weight: 600; list-style: none;
  display: inline-flex; align-items: center; gap: .3rem;
}
.dc-destool-whisper summary::-webkit-details-marker { display: none; }
.dc-destool-whisper summary::before {
  content: "؟"; width: 1.05rem; height: 1.05rem; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dcp-line);
  font-size: .62rem; font-weight: 800; color: var(--dcp-muted);
}
.dc-destool-whisper p { font-size: .72rem; color: var(--dcp-muted); line-height: 1.9; margin: .45rem 0 0; }

.dc-destool-view { display: none; }
.dc-destool-view.is-on { display: block; }

.dc-destool-receipt { text-align: center; padding: .3rem 0 .1rem; }
.dc-destool-receipt-ico { font-size: 1.5rem; margin-bottom: .4rem; }
.dc-destool-receipt h4 { margin: 0 0 .3rem; font-size: .95rem; font-weight: 800; color: var(--dcp-ink); }
.dc-destool-receipt p { margin: 0 0 .85rem; font-size: .77rem; color: var(--dcp-muted); line-height: 1.95; }
.dc-destool-refcode {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; direction: ltr;
  color: var(--dcp-ink); background: var(--dcp-surface); border: 1px dashed var(--dcp-line);
  border-radius: .6rem; padding: .45rem 1rem; margin-bottom: .2rem;
}
.dc-destool-refnote { font-size: .68rem; color: var(--dcp-muted); line-height: 1.85; margin: .35rem 0 0; }
.dc-destool-tgbtn {
  text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font: inherit;
  font-size: .82rem; font-weight: 800; cursor: pointer; border-radius: 999px; padding: .55rem 1.3rem;
  color: #fff; background: #2a9fd6; border: none;
}
[data-theme="dark"] .dc-destool-tgbtn { color: #06202b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc-destool-tgbtn { color: #06202b; } }

.dc-destool-flight { display: flex; flex-direction: column; gap: .5rem; }
.dc-destool-fitem {
  display: flex; gap: .6rem; align-items: flex-start; background: var(--dcp-surface);
  border: 1px solid var(--dcp-line); border-radius: .6rem; padding: .6rem .7rem;
}
.dc-destool-fdot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--destool-amber); margin-top: .42rem; }
.dc-destool-fbody { flex: 1; min-width: 0; }
.dc-destool-ftitle { font-size: .76rem; font-weight: 700; color: var(--dcp-ink); line-height: 1.6; }
.dc-destool-fmeta { font-size: .66rem; color: var(--dcp-muted); margin-top: .2rem; }
.dc-destool-fmeta code { font-family: ui-monospace, Menlo, monospace; direction: ltr; }

/* the answer — everything past this heading is des.js's own sourceBlock() DOM */
.dc-destool-answer {
  background: rgba(var(--des-chrome-rgb), .05); border: 1px solid rgba(var(--des-chrome-rgb), .22);
  border-right: 3px solid var(--des-chrome); border-radius: .8rem; padding: .9rem 1rem 1rem;
}
.dc-destool-answer-h { font-size: .95rem; font-weight: 700; color: var(--des-chrome); margin: 0 0 .3rem; }
.dc-destool-answer-note { margin: 0 0 .75rem; font-size: .76rem; color: var(--dcp-muted); line-height: 1.8; }

.dc-destool-after-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .75rem; }

.dc-destool-spent { display: flex; gap: .6rem; align-items: flex-start; font-size: .76rem; color: var(--dcp-muted); line-height: 1.95; }
.dc-destool-spent b { color: var(--destool-amber-ink); }