/*
 * RECAP "Highlighter" components. Builds only on tokens.css (load that first).
 * Class prefix rc- so these never collide with page or app styles.
 */

/* Highlighter mark: a hand-drawn swipe behind the text. Add .rc-mark-good,
   -bad or -info for marks that mean something. Wrapping lines keep the swipe. */
.rc-mark {
  color: var(--rc-on-hl);
  background-color: transparent;
  background-image: linear-gradient(100deg, rgba(var(--rc-hl-rgb), 0) 0, var(--rc-hl) 0.6em, var(--rc-hl) calc(100% - 0.5em), rgba(var(--rc-hl-rgb), 0.3) 100%);
  background-repeat: no-repeat; background-size: 100% 78%; background-position: 0 70%;
  padding: 0 0.12em; margin: 0 -0.12em; border-radius: 0.2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.rc-mark-good { background-image: linear-gradient(var(--rc-mark-good), var(--rc-mark-good)); }
.rc-mark-bad  { background-image: linear-gradient(var(--rc-mark-bad), var(--rc-mark-bad)); }
.rc-mark-info { background-image: linear-gradient(var(--rc-mark-info), var(--rc-mark-info)); }

/* Tag: the small ink label that names a mark ("Key quote", "Action") */
.rc-tag {
  display: inline-block; font: 800 0.66rem/1 var(--rc-font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rc-paper); background: var(--rc-ink); border-radius: 4px; padding: 0.28rem 0.4rem; white-space: nowrap; vertical-align: 0.2em;
}

/* Recap note: the yellow sticky that carries a recap */
.rc-note {
  background: var(--rc-hl); color: var(--rc-on-hl); padding: 1.1rem 1.2rem 1.2rem; transform: rotate(-2.5deg);
  box-shadow: var(--rc-shadow-note); font: 0.88rem/1.5 var(--rc-font-sans);
}
.rc-note h4 { font: 900 0.72rem var(--rc-font-sans); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.45rem; }
.rc-note ul { list-style: none; display: grid; gap: 0.3rem; margin-top: 0.55rem; padding: 0; }
.rc-note li::before { content: '\25A2  '; }

/* Buttons */
.rc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 0; cursor: pointer;
  font: 700 0.98rem/1.2 var(--rc-font-sans); padding: 0.85rem 1.45rem; border-radius: var(--rc-radius); text-decoration: none;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.rc-btn:active { transform: translateY(1px); }
.rc-btn:focus-visible { outline: 3px solid var(--rc-hl-strong); outline-offset: 3px; }
.rc-btn-primary { background: var(--rc-primary-bg); color: var(--rc-primary-fg); box-shadow: 4px 4px 0 var(--rc-primary-shadow); }
.rc-btn-primary:hover { color: var(--rc-primary-fg); box-shadow: 6px 6px 0 var(--rc-primary-shadow); transform: translate(-1px, -1px); }
.rc-btn-line { background: transparent; color: var(--rc-ink); box-shadow: inset 0 0 0 1.5px var(--rc-ink); }
.rc-btn-line:hover { color: var(--rc-ink); background: var(--rc-surface); }
.rc-btn-sm { padding: 0.55rem 1rem; font-size: 0.86rem; border-radius: 10px; }
.rc-btn-primary.rc-btn-sm { box-shadow: 3px 3px 0 var(--rc-primary-shadow); }

/* Card */
.rc-card { background: var(--rc-surface); border-radius: var(--rc-radius-lg); box-shadow: var(--rc-shadow); padding: 1.6rem; }

/* Type */
.rc-kicker { font: 700 0.78rem var(--rc-font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rc-ink-3); }
.rc-display { font-family: var(--rc-font-serif); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; color: var(--rc-ink); }
.rc-h2 { font-family: var(--rc-font-serif); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--rc-ink); }

/* Logo: the word "recap" over a highlighter swipe */
.rc-logo { position: relative; z-index: 0; display: inline-block; font: 900 1.45rem/1 var(--rc-font-sans); letter-spacing: -0.05em; color: var(--rc-ink); text-decoration: none; }
.rc-logo::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -1px; height: 0.45em; background: var(--rc-hl); z-index: -1; border-radius: 3px; transform: rotate(-1.5deg); }
/* The wordmark is always "recap". A second copy in on-hl ink sits on top,
   clipped to the bar's tilted edges, so the part of each letter on the bar
   reads in dark mode (light ink on yellow did not) and in every accent.
   The empty alt text keeps screen readers from reading "recap" twice. */
.rc-logo::before {
  content: 'recap' / ''; position: absolute; inset: 0; z-index: 1; color: var(--rc-on-hl); white-space: nowrap;
  clip-path: polygon(-10% calc(100% - 0.37em), 110% calc(100% - 0.46em), 110% calc(100% + 1px - 0.045em), -10% calc(100% + 1px + 0.045em));
  pointer-events: none;
}

/* Theme toggle: <button class="rc-theme-toggle" data-theme-toggle aria-label="Switch light or dark"> */
.rc-theme-toggle {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; display: inline-grid; place-items: center;
  background: transparent; color: var(--rc-ink-2); box-shadow: inset 0 0 0 1px var(--rc-rule);
}
.rc-theme-toggle:hover { color: var(--rc-ink); background: var(--rc-surface); }
.rc-theme-toggle svg { width: 18px; height: 18px; }
.rc-theme-toggle .rc-moon { display: none; }
:root[data-theme="dark"] .rc-theme-toggle .rc-sun, :root.dark .rc-theme-toggle .rc-sun { display: none; }
:root[data-theme="dark"] .rc-theme-toggle .rc-moon, :root.dark .rc-theme-toggle .rc-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rc-theme-toggle .rc-sun { display: none; }
  :root:not([data-theme="light"]) .rc-theme-toggle .rc-moon { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-btn { transition: none; }
}