/* ═══════════════════════════════════════════════════════════════════
   clique.agency /learn/ — BetterDocs RESIDUAL skin
   v3.1 · 2026-08-08 · COLORS/SIZES/TRANSFORMS NOW LIVE IN THE CUSTOMIZER
   (~108 native settings — reapplication map: betterdocs-customizer-brand-map.json).
   This file carries ONLY what the Customizer cannot express:
   typography families/tracking, card borders, band hairlines, the search
   pill composition, roman markers, blockquotes, hover tints, dropdown
   caret, scrollbars. Install per strategy/05 §7a.
   v3.1: prose/typography rules moved to learn-prose.css (the ported
   April article design). This file is BetterDocs CHROME only.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- base ---------- */
.betterdocs-wrapper { font-family: var(--f-body, 'Inter Tight', sans-serif); }
.betterdocs-wrapper *:focus-visible { outline: 2px solid var(--oxblood, #8A2A1E); outline-offset: 3px; }
/* single-doc OUTER wrapper: plugin hardcodes #F2F4F7 and no control exists — the
   customizer's "Content Area Background Color" only paints the INNER content
   wrapper (CSSOM-verified 2026-07-13). Transparent lets the body cream show. */
.betterdocs-wrapper.betterdocs-single-wrapper,
.betterdocs-wrapper.betterdocs-taxonomy-wrapper,
.betterdocs-wrapper.betterdocs-docs-archive-wrapper { background: transparent !important; }
/* single-doc content column: no customizer control (docs page + archive have one, set to 1180) */
.betterdocs-single-wrapper .betterdocs-content-wrapper { max-width: 1180px !important; margin-inline: auto !important; padding-inline: 32px; box-sizing: border-box; }

/* ---------- display type: families + tracking (no family controls exist) ---------- */
.betterdocs-wrapper h1.betterdocs-entry-title,
.betterdocs-wrapper .betterdocs-entry-heading,
.betterdocs-wrapper .betterdocs-category-title,
.betterdocs-wrapper .betterdocs-category-title a,
.betterdocs-wrapper .betterdocs-reactions-title-tag,
.betterdocs-wrapper .related-articles-title {
  font-family: var(--f-display, 'Fraunces', serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}
.betterdocs-wrapper h1.betterdocs-entry-title { letter-spacing: -0.025em; line-height: 1.08; }

/* ---------- mono furniture: family + tracking + caps (no controls) ---------- */
.betterdocs-wrapper .betterdocs-breadcrumb-item,
.betterdocs-wrapper .betterdocs-breadcrumb-item a,
.betterdocs-wrapper .breadcrumb-delimiter,
.betterdocs-wrapper .reading-time,
.betterdocs-wrapper .update-date,
.betterdocs-wrapper .feedback-update-form,
.betterdocs-wrapper .feedback-update-form *,
.betterdocs-wrapper .toc-title,
.betterdocs-wrapper .betterdocs-category-items-counts,
.betterdocs-wrapper .betterdocs-category-items-counts span,
.betterdocs-wrapper .betterdocs-social-share-heading,
.betterdocs-wrapper .betterdocs-social-share-title-tag {
  font-family: var(--f-mono, 'JetBrains Mono', monospace) !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.betterdocs-wrapper .betterdocs-breadcrumb-item, .betterdocs-wrapper .betterdocs-breadcrumb-item a { letter-spacing: 0.2em; }
.betterdocs-wrapper .toc-title { letter-spacing: 0.22em; }
.betterdocs-wrapper .reading-time, .betterdocs-wrapper .feedback-update-form,
.betterdocs-wrapper .feedback-update-form * { font-size: 11px !important; }

/* ---------- cards: tan border + 12px radius (no border controls) ---------- */
/* NOTE: .betterdocs-toc was in this list until v1.2.4. It was a card in the
   content column then; it is now the sticky contents RAIL, which the design
   draws bare (no border, no radius, no padding). Card chrome here beat the
   prose layer because of the !important below. */
.betterdocs-wrapper .betterdocs-sidebar-content,
.betterdocs-wrapper .betterdocs-single-category-wrapper,
.betterdocs-wrapper .betterdocs-popular-articles-wrapper {
  border: 1px solid var(--line, #C9C1AE) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
/* flatten BetterDocs' nested white shells + glow */
.betterdocs-wrapper .betterdocs-single-category-inner,
.betterdocs-wrapper .betterdocs-body,
.betterdocs-wrapper .betterdocs-articles-list { background: transparent !important; box-shadow: none !important; }
/* sidebar reuses grid-card markup: strip inner card chrome */
.betterdocs-wrapper .betterdocs-sidebar-content .betterdocs-single-category-wrapper { background: transparent !important; border: none !important; padding: 14px 16px !important; }
/* one underline per card header (header-inner only) */
.betterdocs-wrapper .betterdocs-category-header { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.betterdocs-wrapper .betterdocs-category-header-inner { border-bottom: 1px solid var(--line, #C9C1AE) !important; padding-bottom: 14px !important; margin-bottom: 14px !important; }
/* count pill ring */
.betterdocs-wrapper .betterdocs-category-items-counts { border: 1px solid var(--line, #C9C1AE) !important; border-radius: 999px !important; }
.betterdocs-wrapper .betterdocs-category-items-counts span { border: none !important; background: transparent !important; }
/* archive doc list rows: REMOVED v1.5.1. The doc_category archive now
   renders the ten-chapter index from learn-skin's chapter_index(), and
   BetterDocs' flat list is hidden in learn-prose.css. These rules carried
   `display:block !important`, which outranked that hide. */
/* hide empty sidebar shells */
.betterdocs-wrapper .betterdocs-sidebar-content:empty { display: none !important; }
.betterdocs-wrapper .betterdocs-sidebar:not(:has(.betterdocs-sidebar-content a)) { display: none !important; }

/* ---------- search: band hairlines + pill composition (no controls) ---------- */
.betterdocs-wrapper .betterdocs-search-form-wrapper,
.betterdocs-wrapper .betterdocs-search-form-wrap {
  border-top: 1px solid var(--line, #C9C1AE) !important;
  border-bottom: 1px solid var(--line, #C9C1AE) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 40px 32px !important;
}
.betterdocs-wrapper .betterdocs-searchform,
.betterdocs-wrapper .betterdocs-live-search form {
  background: var(--paper, #F5F1EC) !important;
  border: 1px solid var(--line, #C9C1AE) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  max-width: 780px !important;
  margin-inline: auto !important;
}
.betterdocs-wrapper .betterdocs-search-field { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; }
.betterdocs-wrapper .betterdocs-searchform-input-wrap { background: transparent !important; box-shadow: none !important; border: none !important; }
.betterdocs-wrapper .betterdocs-search-category { border-left: 1px solid var(--line, #C9C1AE) !important; }
/* select caret: brand chevron (bg overrides wipe the native one) */
.betterdocs-wrapper .betterdocs-search-category select,
.betterdocs-wrapper select {
  font-family: var(--f-body, 'Inter Tight', sans-serif) !important;
  border: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236F6C63' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
  padding-right: 28px !important;
}
/* button: metrics now NATIVE (padding/tracking/radius/weight/transform in customizer);
   only the family + hover transition remain */
.betterdocs-wrapper .betterdocs-search-submit, .betterdocs-wrapper .search-submit,
.betterdocs-live-search button[type="submit"] {
  font-family: var(--f-body, 'Inter Tight', sans-serif) !important;
  border: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* ---------- content conventions ---------- */
/* :not() spares the clique-blocks CTA button. Without it this rule outspecifies
   the block's own cream-on-oxblood styling and paints the label invisible. */

/* ---------- reactions: per-feeling hover tints (customizer has ONE hover color) ---------- */
/* inverted-chip hover (founder-approved 2026-07-13): circle fills with the
   feeling color, face goes cream. Rest state comes from customizer settings. */
.betterdocs-wrapper .betterdocs-feelings { transition: background-color 0.15s ease; }
.betterdocs-wrapper .betterdocs-feelings[data-feelings="happy"]:hover { background: var(--laurel, #5C6B3C) !important; }
.betterdocs-wrapper .betterdocs-feelings[data-feelings="normal"]:hover { background: var(--gold, #B0894A) !important; }
.betterdocs-wrapper .betterdocs-feelings[data-feelings="sad"]:hover { background: var(--oxblood, #8A2A1E) !important; }
.betterdocs-wrapper .betterdocs-feelings[data-feelings="happy"]:hover svg,
.betterdocs-wrapper .betterdocs-feelings[data-feelings="happy"]:hover svg *,
.betterdocs-wrapper .betterdocs-feelings[data-feelings="normal"]:hover svg,
.betterdocs-wrapper .betterdocs-feelings[data-feelings="normal"]:hover svg *,
.betterdocs-wrapper .betterdocs-feelings[data-feelings="sad"]:hover svg,
.betterdocs-wrapper .betterdocs-feelings[data-feelings="sad"]:hover svg * { fill: var(--paper, #F5F1EC) !important; }
.betterdocs-wrapper .betterdocs-article-reactions { border: 1px solid var(--line, #C9C1AE) !important; border-radius: 12px !important; }

/* ---------- share row: quiet ---------- */
.betterdocs-wrapper .betterdocs-social-share-links a { filter: grayscale(1); opacity: 0.55; transition: opacity 0.15s ease; }
.betterdocs-wrapper .betterdocs-social-share-links a:hover { opacity: 1; filter: grayscale(0.3); }

/* ---------- prev/next: card language + arrow hover ---------- */
.betterdocs-wrapper .docs-navigation a {
  background: var(--paper, #F5F1EC);
  border: 1px solid var(--line, #C9C1AE);
  border-radius: 12px;
  padding: 16px 20px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.betterdocs-wrapper .docs-navigation a:hover { border-color: var(--ink-muted, #6F6C63); }
.betterdocs-wrapper .docs-navigation a:hover svg,
.betterdocs-wrapper .docs-navigation a:hover svg path { fill: var(--oxblood, #8A2A1E) !important; }

/* ---------- instant-search dropdown extras (colors are native now) ---------- */
.betterdocs-search-result-wrap::before, .betterdocs-search-result-wrap::after { display: none !important; content: none !important; }
ul.docs-search-result { border-radius: 12px !important; box-shadow: 0 8px 24px rgba(26, 25, 21, 0.08) !important; padding: 6px !important; margin-top: 8px !important; overflow: hidden; }
ul.docs-search-result li a { border-radius: 8px; } /* row colors/padding/size now native */
ul.docs-search-result .betterdocs-search-category { font-family: var(--f-mono, 'JetBrains Mono', monospace) !important; font-size: 10px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; }
ul.docs-search-result, .betterdocs-search-result-wrap,
.betterdocs-wrapper .betterdocs-sidebar, .betterdocs-wrapper .betterdocs-toc { scrollbar-width: thin; scrollbar-color: var(--line, #C9C1AE) transparent; }
ul.docs-search-result::-webkit-scrollbar, .betterdocs-wrapper .betterdocs-sidebar ::-webkit-scrollbar { width: 8px; }
ul.docs-search-result::-webkit-scrollbar-thumb, .betterdocs-wrapper .betterdocs-sidebar ::-webkit-scrollbar-thumb { background: var(--line, #C9C1AE); border-radius: 999px; }
ul.docs-search-result::-webkit-scrollbar-track { background: transparent; }

/* ---------- misc ---------- */
.betterdocs-wrapper .betterdocs-sidebar-icon,
.betterdocs-wrapper .betterdocs-category-icon-img,
.betterdocs-wrapper .betterdocs-folder-icon { filter: grayscale(1) contrast(0.85); opacity: 0.75; }
/* sidebar accordion collapse arrows (no control; defaults slate/black) */
.betterdocs-wrapper .betterdocs-category-collapse,
.betterdocs-wrapper .betterdocs-category-collapse path,
.betterdocs-wrapper .cat-list-arrow-down, .betterdocs-wrapper .cat-list-arrow-down path {
  color: var(--ink-muted, #6F6C63) !important;
  fill: var(--ink-muted, #6F6C63) !important;
}
/* mobile category-nav toggle (no control) */
.betterdocs-wrapper .betterdocs-mobile-nav-icon-svg { background: var(--paper-2, #EDE7DD) !important; }
.betterdocs-wrapper .betterdocs-mobile-nav-icon-svg rect,
.betterdocs-wrapper .betterdocs-mobile-nav-icon-svg path { fill: var(--ink-muted, #6F6C63) !important; }
/* instant-search loader spinner (no control) */
.betterdocs-wrapper .docs-search-loader, .betterdocs-wrapper .docs-search-loader path { fill: var(--ink-muted, #6F6C63) !important; }
/* search button: plugin's generated CSS only scopes .betterdocs-live-search — the
   docs-page/single-doc form variants render WITHOUT that wrapper, so the green
   default in search.css survives all customizer settings (verified 2026-07-13) */
.betterdocs-wrapper .betterdocs-searchform .betterdocs-search-submit,
.betterdocs-wrapper input.betterdocs-search-submit {
  background: var(--oxblood, #8A2A1E) !important;
  color: var(--paper, #F5F1EC) !important;
}
.betterdocs-wrapper .betterdocs-searchform .betterdocs-search-submit:hover,
.betterdocs-wrapper input.betterdocs-search-submit:hover { background: var(--oxblood-dk, #6B1E14) !important; }
@media (prefers-reduced-motion: reduce) { .betterdocs-wrapper * { transition: none !important; } }

/* ---------- v1.0.1: icon-level stragglers from the final three-page audit ---------- */
/* search field clear (×) + loader */
.betterdocs-wrapper .docs-search-close,
.betterdocs-wrapper .docs-search-close svg,
.betterdocs-wrapper .docs-search-close path { fill: var(--ink-muted, #6F6C63) !important; color: var(--ink-muted, #6F6C63) !important; }
.betterdocs-wrapper a[class*="search-close"], .betterdocs-wrapper a[class*="clear"] { color: var(--ink-muted, #6F6C63) !important; }
/* archive breadcrumb: BetterDocs' breadcrumb color settings only emit single-doc rules */
.betterdocs-wrapper .betterdocs-breadcrumb-item,
.betterdocs-wrapper .betterdocs-breadcrumb span { color: var(--ink-muted, #6F6C63) !important; }
.betterdocs-wrapper .breadcrumb-delimiter-icon,
.betterdocs-wrapper .breadcrumb-delimiter-icon path { fill: var(--line, #C9C1AE) !important; color: var(--line, #C9C1AE) !important; }
/* misc svg rects (nav toggles) */
.betterdocs-wrapper .betterdocs-mobile-nav-icon-svg rect { fill: var(--ink-muted, #6F6C63) !important; }

/* band color runs to the page top (founder-approved 2026-07-13): no top hairline,
   and the header region above the band carries the band's cream-2 */
.betterdocs-wrapper .betterdocs-search-form-wrapper,
.betterdocs-wrapper .betterdocs-search-form-wrap { border-top: none !important; }
#wrapper > header { background-color: var(--paper-2, #EDE7DD) !important; }