/* =================================================================
   COMPONENTS — reusable UI pieces that appear across multiple pages
   -----------------------------------------------------------------
   The language notice banner, the ad popup, and the share-count
   indicator — small, self-contained pieces of UI, as opposed to
   full-page layouts (see pages.css) or the site's structural chrome
   (see layout.css).
================================================================= */

/* ---------------------------------------------------------------
   Language notice banner
--------------------------------------------------------------- */
.lang-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-warning-bg);
  border-bottom: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  font-size: 0.88rem;
  font-weight: 500;
  text-align: center;
  padding: 10px 16px;
}
.lang-notice a { margin-left: 6px; font-weight: 700; color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------
   Ad popup
--------------------------------------------------------------- */
.ad-popup {
  position: fixed;
  inset: 0;
  background: rgba(15, 16, 19, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.ad-popup[hidden] { display: none; }
.ad-popup__box {
  position: relative;
  background: var(--surface);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.ad-popup__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.ad-popup__close:hover { background: var(--bg); }
.ad-popup__square {
  width: 250px;
  height: 250px;
  margin: 0;
}

/* ---------------------------------------------------------------
   Home page course cards: stats row + skeleton
--------------------------------------------------------------- */
.home__course-card {
  position: relative;
  overflow: hidden;
}
/* Positioning only — the shimmer background/animation itself comes
   from the shared .skeleton-block rule below, so this card's
   skeleton and every other component's skeleton look identical. */
.home__course-card-skeleton { position: absolute; inset: 0; }
.home__course-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.home__course-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 18px;
}
.home__course-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.home__course-stat .icon { color: var(--accent); flex: 0 0 auto; }

/* ---------------------------------------------------------------
   Generic skeleton loader (data-skeleton components)
--------------------------------------------------------------- */
[data-skeleton] .skeleton-block {
  display: none;
  background: linear-gradient(90deg, var(--bg) 25%, var(--border) 37%, var(--bg) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
[data-skeleton].is-loading .skeleton-block { display: block; }
[data-skeleton].is-loading > *:not(.skeleton-block) { visibility: hidden; }

/* Scroll-to-top button removed per explicit request — its JS (app.js)
   and .scroll-top* rules both removed together as dead code. */

/* ---------------------------------------------------------------
   Mobile/tablet sidebar drawer + hamburger toggle
--------------------------------------------------------------- */
.topbar-content-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* Same reasoning as .topbar-hamburger above — invisible on desktop
     unconditionally, so sized to the standard 44x44 touch target
     from the start rather than the smaller 36x36 this used to be. */
  width: 44px;
  height: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 16, 19, 0.45);
  z-index: 70;
}
.sidebar-backdrop.is-open { display: block; }
.sidebar__close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  /* 44x44 rather than 32x32 — like the hamburger/chapters-toggle
     buttons, this is display:none unconditionally on desktop (only
     ever shown once the mobile drawer is open), so there's no
     desktop-density tradeoff in sizing it to the standard minimum
     touch target from the start. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

/* .code-edit-btn's actual visual styling is defined above, shared
   with .code-copy and .code-preview-btn, so it matches the rest of
   the code block toolbar rather than needing its own rule here. */

/* ---------------------------------------------------------------
   Standalone code editor / "Try it" page
--------------------------------------------------------------- */
.editor-page {
  display: flex;
  flex-direction: column;
  /* Was 100vh when this page had no site header/footer; now shares
     the viewport with both, so it sizes to what's left instead of
     overflowing past the footer. */
  min-height: calc(100vh - 64px);
  /* Full-bleed, edge-to-edge — left/right margin and the 1280px
     max-width/100% width cap all removed per explicit request (this
     used to match the site's shared 1280px container, same as
     .editor-page--tool below already was). */
  max-width: none;
  margin: 0;
}
/* Full-bleed, edge-to-edge width — per explicit request (previous
   round had this at a narrower 1280px with a 20px top/bottom margin;
   now reverted to no cap and no margin at all). Was scoped to Bug
   Checker, Compare Code, and Character Count specifically, distinct
   from the shared .editor-page rule above which the main "Try It"
   code editor also uses — now redundant now that .editor-page itself
   is also edge-to-edge, but left in place rather than removed since
   nothing asked for this selector itself to go away. */
.editor-page--tool {
  max-width: none;
  margin: 0;
}
.editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.editor-topbar__label { font-weight: 700; color: var(--ink); }
.editor-topbar__actions { display: flex; gap: 10px; align-items: center; }
/* File tabs — one tab per open file (HTML, CSS, SCSS, Sass, Less,
   JavaScript, jQuery, PHP, XML), each closable, plus a "+" at the end
   to add more. Pill-shaped and sitting on a pale tray rather than
   attached to the pane below, since a separate filebar (with the
   active file's name and the Run button) now sits between this row
   and the code/preview split, so there's no shared edge for an
   attached-tab look to land on. */
.editor-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
/* Only the tab buttons themselves scroll horizontally when they
   overflow — scoped here rather than on .editor-tabs, since setting
   overflow-x on a container also makes its overflow-y computed value
   "auto" (per spec, when only one axis is set to something other than
   visible), which would clip the add-file dropdown menu below, an
   absolutely-positioned sibling that needs to overflow this row. */
.editor-tabs__list { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.editor-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.editor-tab:hover { color: var(--ink); border-color: var(--ink-soft); }
.editor-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.editor-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  flex: 0 0 auto;
}
.editor-tab__icon--html { background: #E34C26; }
.editor-tab__icon--css { background: #2965F1; }
.editor-tab__icon--scss { background: #CC6699; font-size: 0.55rem; }
.editor-tab__icon--sass { background: #A53F94; font-size: 0.55rem; }
.editor-tab__icon--less { background: #1D365D; }
.editor-tab__icon--js { background: #D9A404; font-size: 0.6rem; }
.editor-tab__icon--jquery { background: #0868AC; font-size: 0.55rem; }
.editor-tab__icon--php { background: #777BB4; font-size: 0.55rem; }
.editor-tab__icon--xml { background: #E37933; font-size: 0.55rem; }
.editor-tab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.editor-tab__close:hover { background: var(--border); color: var(--ink); }
/* Add-file button and its language-picker menu. The menu is a plain
   absolutely-positioned list toggled by JS via the [hidden] attribute
   — no separate open/close animation, matching the rest of this
   page's deliberately minimal chrome. */
.editor-tabs__add-wrap { position: relative; flex: 0 0 auto; }
.editor-tab-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.editor-tab-add:hover { background: var(--surface); border-style: solid; color: var(--ink); }
.editor-add-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 150px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.editor-add-menu li { margin: 0; }
.editor-add-menu button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.editor-add-menu button:hover { background: var(--bg); }
.editor-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.editor-btn:hover { background: var(--bg); text-decoration: none; }
/* A subtle press state — one step further than hover, the same
   direction (darker), giving buttons a genuine "pressed" feel on
   click rather than jumping straight from hover to whatever the
   click's result is. */
.editor-btn:active { background: var(--border); }
.editor-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.editor-btn--primary:hover { background: var(--primary-dark); }
.editor-btn--primary:active { background: var(--primary-dark); filter: brightness(0.92); }
/* A second, brighter "forward action" button color — pixel-sampled
   from the quiz Level page reference's "Next question" button
   (#4F46E5, this site's own former --accent, before that was
   replaced site-wide with dark navy). Reintroduced here specifically
   for this one button rather than reverting the site-wide change,
   since the reference clearly shows it as a distinct color from the
   dark "Check answer" button beside it, not the same accent twice. */
.editor-btn--cta { background: #4F46E5; border-color: #4F46E5; color: #fff; }
.editor-btn--cta:hover { background: #4338CA; }
.editor-btn--cta:active { background: #4338CA; filter: brightness(0.92); }
/* Run's own color — a distinct green rather than reusing the primary/
   accent buttons above, so "run my code" reads as its own action
   separate from "copy" or "download". */
.editor-btn--run { background: #16A34A; border-color: #16A34A; color: #fff; }
.editor-btn--run:hover { background: #15803D; }
.editor-btn--run:active { background: #15803D; filter: brightness(0.92); }
/* A slim bar between the file tabs and the code/preview split,
   showing which file is currently active and holding the Run button
   — Run lives here rather than in the topbar since it's an action on
   *this* file, not the page as a whole. */
.editor-filebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.editor-filebar__name {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}
/* A small "this preview updates as you type" indicator next to the
   Preview pane's own label — purely informational, since the preview
   already auto-updates on a short debounce; this just surfaces that
   behavior instead of leaving it implicit. (.editor-pane__label
   itself gains display:flex/justify-content below, next to its other
   rules, to lay the label text and this badge out side by side.) */
.editor-live-sync {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: #16A34A;
}
.editor-live-sync__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  animation: editor-live-sync-pulse 1.6s ease-in-out infinite;
}
@keyframes editor-live-sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.editor-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 6px 1fr;
  min-height: 0;
}
.editor-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.editor-resize-handle {
  position: relative;
  cursor: col-resize;
  background: var(--bg);
  touch-action: none;
}
/* The visible track is only 6px wide (the actual grid column), which
   is hard to grab precisely — this invisible ::before extends the
   real clickable/touchable hit area well beyond it without changing
   the track's own width or shifting the panes either side of it. */
.editor-resize-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  right: -10px;
  cursor: col-resize;
  z-index: 5;
}
.editor-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 36px;
  border-radius: 2px;
  background: var(--border);
}
.editor-resize-handle:hover::after,
.editor-resize-handle.is-dragging::after { background: var(--accent); }
body.is-resizing-editor { cursor: col-resize; user-select: none; }
.editor-pane__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.editor-textarea-wrap {
  flex: 1;
  display: flex;
  min-height: 0;
  background: var(--surface);
}
.editor-gutter {
  flex: 0 0 auto;
  padding: 16px 10px 16px 0;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0.6;
  text-align: right;
  background: var(--bg);
  border-right: 1px solid var(--border);
  overflow: hidden;
  user-select: none;
  min-width: 2.6em;
}
.editor-gutter > div { white-space: pre; }
.editor-textarea {
  flex: 1;
  border: none;
  resize: none;
  padding: 16px;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  tab-size: 2;
  overflow: auto;
  white-space: pre;
}
.editor-textarea:focus {
  outline: none;
  /* An inset box-shadow rather than a border-color change, since the
     textarea has no border to begin with (border: none above) and a
     new border would shift its layout within the flex panel. This
     gives keyboard users the same clear "focus landed here" signal
     the rest of the site's inputs already have, just without
     disturbing sizing. */
  box-shadow: inset 0 0 0 2px var(--accent);
}
.editor-preview-frame { flex: 1; border: none; background: #fff; }
/* No border-right here anymore — the draggable resize handle itself
   (its own grid column, styled above) now visually separates the
   two panes instead of a static border. */
/* Shown instead of the preview iframe for languages with no
   in-browser runtime (PHP, XML) — there's nothing to render, so a
   plain explanatory message fills the pane rather than an empty or
   broken-looking iframe. */
.editor-preview-unavailable {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
  background: var(--bg);
}
.editor-preview-unavailable p { margin: 0; max-width: 32ch; }

/* Console panel — full width beneath the code/preview split, showing
   console.log/warn/error output (and thrown errors) forwarded up
   from inside the sandboxed preview iframe via postMessage, since
   the sandbox's own devtools console isn't visible to the visitor.
   Fixed height with its own scroll, rather than growing with output,
   so a chatty script can't push the editor itself out of view. */
.editor-console {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  max-height: 160px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.editor-console.is-collapsed { max-height: 0; }
.editor-console.is-collapsed .editor-console__head { border-bottom: none; }
.editor-console.is-collapsed .editor-console__body { display: none; }
.editor-console__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
}
.editor-console__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.editor-console__caret {
  display: inline-block;
  transition: transform 0.15s ease;
}
.editor-console.is-collapsed .editor-console__caret { transform: rotate(-90deg); }
/* A running count of the lines currently in the console — hidden via
   [hidden] whenever it's empty rather than showing a "0" badge. */
.editor-console__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--border);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
}
.editor-console__clear {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.editor-console__clear:hover { background: var(--bg); color: var(--ink); }
.editor-console__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 20px 12px;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.6;
}
.editor-console__empty { margin: 0; color: var(--ink-soft); font-family: var(--sans); }
.editor-console__line { white-space: pre-wrap; word-break: break-word; padding: 2px 0; color: var(--ink); }
.editor-console__line--error { color: var(--color-error-text); }
.editor-console__line--warn { color: var(--color-warning-text); }



/* ---------------------------------------------------------------
   Compare Checker: diff results view
--------------------------------------------------------------- */
.diff-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.diff-results__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.diff-results__summary { font-size: 0.88rem; color: var(--ink-soft); font-weight: 600; }
.diff-results__panes {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
  overflow: hidden;
}
.diff-pane {
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.6;
}
.diff-pane[data-diff-pane="a"] { border-right: 1px solid var(--border); }
.diff-line { display: flex; }
.diff-line__num {
  flex-shrink: 0;
  width: 44px;
  text-align: right;
  padding-right: 10px;
  color: var(--ink-soft);
  opacity: 0.6;
  user-select: none;
}
.diff-line__text { flex: 1; white-space: pre; padding-right: 12px; }
.diff-line--removed { background: var(--color-error-bg); }
.diff-line--removed .diff-line__text { color: var(--color-error-text); }
.diff-line--added { background: var(--color-success-bg); }
.diff-line--added .diff-line__text { color: var(--color-success-text); }
.diff-line--empty { background: var(--bg); }

/* ---------------------------------------------------------------
   Character Count tool: a word-density side panel (matching the
   site's existing sidebar-card look, .sidebar__progress) next to a
   plain textarea, with a running stats bar underneath — same
   .editor-page/.editor-topbar shell as Bug Checker/Compare Code
   above, not a resizable two-pane .editor-body (nothing here needs
   resizing).
--------------------------------------------------------------- */
.charcount-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  min-height: 0;
  overflow-y: auto;
}
.charcount-side { flex: 0 0 260px; min-width: 0; }
.charcount-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.charcount-textarea {
  flex: 1;
  min-height: 360px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  resize: vertical;
}
.charcount-textarea:focus { outline: none; border-color: var(--accent); }
.charcount-stats {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.charcount-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 8px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.charcount-stat:last-child { border-right: none; }
.charcount-stat__num { font-size: 1.3rem; font-weight: 800; color: #0e172b; }
.charcount-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* Word density card — white background per explicit request (was the
   same tinted #f2f5fa recipe as the lesson sidebar's own
   .sidebar__progress widget; still bordered/rounded like that card,
   just no longer tinted). Now the first item in .charcount-side (the
   ad slot moved below it), so the gap between the two is this card's
   own margin-bottom rather than a margin-top on the item that used
   to follow it. */
.charcount-density {
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.charcount-density__heading {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.charcount-density__empty { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.charcount-density__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 30px;
  margin-bottom: 6px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
  font-size: 0.82rem;
}
.charcount-density__row:last-child { margin-bottom: 0; }
.charcount-density__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-primary-subtle);
  transition: width 0.2s ease;
}
.charcount-density__word, .charcount-density__meta {
  position: relative;
  z-index: 1;
}
.charcount-density__word { font-weight: 600; color: var(--ink); text-transform: lowercase; }
.charcount-density__meta { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.charcount-density__count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-primary-subtle);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.74rem;
  text-align: center;
}
.charcount-density__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.charcount-density__footer strong { color: var(--ink); }