/* FaraDars public site — FaraJob design system v3 "Balanced Professional"
   Shared public-site styles and design tokens.
   Near-white warm-gray foundation, white content cards, one equal-weight
   accent family per content category, ONE brand blue for every action
   (search, buttons, links) so brand color = "what you can do" and category
   color = "what you are looking at". Vazirmatn everywhere, short functional
   motion.

   Category color plumbing: templates put the type's whole family on a wrapper
   via the `cat_style` filter (--type-color + --c-dark/-panel/-tile/-wash/-on/
   -border/-chip/-shadow). :root carries the neutral ink/gray family, so
   anything outside a category scope stays neutral. */

@import url('fonts.css');

@counter-style fa-decimal {
  system: numeric;
  symbols: '۰' '۱' '۲' '۳' '۴' '۵' '۶' '۷' '۸' '۹';
  suffix: '. ';
}

:root {
  /* Sticky-bar clearance (F52): the logged-in admin bar publishes its
     measured height here (assets/adminbar.js; 0 for normal visitors — and
     the draft-preview indicator is a pill INSIDE the bar, F53, so this one
     variable covers everything sticky). Every anchor scroll-margin and the
     TOC scroll-spy add it so content never lands underneath the bar. */
  --admin-bar-h: 0px;
  --sticky-bars: var(--admin-bar-h);
  /* neutrals — v3 foundation: near-white warm-gray page, pure-white cards */
  --paper: #faf9f7;
  --surface: #ffffff;
  --sand: #f5f4f1;
  --line: #dedcd7;
  --line-strong: #c9c6c0;
  --line-input: var(--line-strong);
  --line-soft: #eceae6;
  /* inks — primary / body / secondary / subtle */
  --ink: #242321;
  --ink-2: #57544f;
  --ink-3: #66635f;
  --ink-4: #817d77;
  --ink-body: #3f3d39;
  --ink-placeholder: #6d6a65;
  --chev: var(--ink-4);
  /* the site's ONE action color — search, buttons, links, focus. Category
     hues never drive actions; a calm blue reads trustworthy on buttons. */
  --brand: #236ea1;
  --brand-dark: #19577f;
  --brand-ring: rgba(35, 110, 161, 0.16);
  --focus: #0b78c4;
  /* neutral category family (overridden per scope by cat_style) */
  --type-color: #242321;
  --c-dark: #111010;
  --c-panel: #f5f4f1;
  --c-tile: #eceae6;
  --c-wash: #f8f7f4;
  --c-on: #faf9f7;
  --c-border: #dedcd7;
  --c-chip: #cfccc7;
  --c-shadow: rgba(36, 35, 33, 0.1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 1.03125rem; /* 16.5px */
  line-height: 1.85;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Code: Vazir Code (fonts.css) pairs Latin code glyphs with real Persian
   forms — the OS monospace Arabic fallback stretches glyphs. */
code, kbd, samp, pre { font-family: 'Vazir Code', ui-monospace, Consolas, monospace; }

::selection { background: #cde4f4; color: var(--ink); }
input::placeholder { color: var(--ink-placeholder); opacity: 1; }

/* No underlines anywhere (they cross Persian descenders); links signal with
   the brand blue and answer hover with the darker step. */
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

/* One consistent, always-visible keyboard focus ring, everywhere. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.45; color: var(--ink); }
h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.45; margin-block: 0.5rem 0.75rem; }
h2 { font-size: 1.375rem; font-weight: 800; margin-block: 0 1rem; }
h3 { font-size: 1.03125rem; font-weight: 800; margin-block: 0 0.5rem; line-height: 1.6; }

p { margin-block: 0 1rem; }

ul, ol { padding-inline-start: 1.5rem; margin-block: 0 1rem; }
li { margin-block-end: 0.35rem; }
ol { list-style-type: fa-decimal; }

img { max-width: 100%; height: auto; }

/* The content column (padding included). Widened from the design's 1040px
   board to use more of the viewport. */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 40px;
}

/* Full-width surface band (hero / page head); pages put a .container inside. */
.band {
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

main { flex: 1; width: 100%; }
main > .container { padding-block: 24px 8px; }

/* Public glyph sizing default. */
.crumbs svg { width: 10px; height: 10px; }

/* --- Brand bar ----------------------------------------------------------
   One quiet brand-blue line (v3): the old per-category strip repeated the
   palette before any content gave it meaning. */

.brandbar { height: 3px; background: var(--brand); }

/* --- Header ------------------------------------------------------------ */

.site-header { background: var(--surface); border-block-end: 1px solid var(--line); }
.site-header .container {
  max-width: 1200px;
  padding-inline: 40px;
  padding-block: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.site-name { flex: none; font-weight: 800; font-size: 21px; color: var(--ink); }
.site-name:hover { color: var(--ink); }
.site-logo { display: block; max-height: 2.4rem; width: auto; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-inline-start: 6px;
}
.site-nav a {
  color: var(--ink-3);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.site-nav a:hover { color: var(--type-color); background: var(--c-panel); }
.site-nav a[aria-current] { color: var(--type-color); background: var(--c-panel); font-weight: 700; }

/* Round search icon-button at the far inline-end (design §10 header). */
.nav-search-btn {
  margin-inline-start: auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav-search-btn:hover { color: var(--brand); border-color: var(--brand); }
.nav-search-btn svg { width: 17px; height: 17px; }

/* --- Footer ------------------------------------------------------------ */

.site-footer {
  margin-block-start: 20px;
  border-block-start: 1px solid var(--line-strong);
  background: var(--sand);
  color: var(--ink-3);
  padding-block: 24px;
}
.footer-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-brand { font-weight: 800; font-size: 17px; color: var(--ink); }
.footer-tagline { color: var(--ink-3); font-size: 14px; }
.footer-nav { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.footer-nav a {
  color: var(--ink-3);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.18s ease;
}
.footer-nav a:hover { color: var(--type-color); }
.footer-about { color: var(--ink-3); font-size: 14px; margin-block: 12px 0; max-width: 620px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding-inline-start: 0; margin-block: 10px 0; font-size: 14px; }
.footer-copy { color: var(--ink-3); font-size: 13.5px; margin-block: 12px 0 0; }
.footer-enamad { margin-block-start: 12px; }

/* --- Buttons & chips ---------------------------------------------------- */

/* Primary button — ALWAYS the brand blue (v3): actions never wear category
   color, so "blue = something you can do" stays learnable. */
.search-btn {
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  background: var(--brand);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 12px 28px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(25, 87, 127, 0.2);
  transition: background-color 0.18s ease;
}
.search-btn:hover { background: var(--brand-dark); }
.search-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Quiet chip — «همه», copy-link, secondary actions. */
.quiet-chip,
.see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--c-chip);
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--type-color);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: border-color 0.18s ease;
}
.quiet-chip:hover,
.see-all:hover { border-color: var(--type-color); color: var(--type-color); }
.quiet-chip svg,
.see-all svg { width: 14px; height: 14px; }

/* --- Search field ------------------------------------------------------- */

.search-form {
  display: flex;
  gap: 10px;
  max-width: 620px;
  position: relative; /* anchors the suggest dropdown */
}
.search-form input[type='search'] {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-input);
  border-radius: 14px;
  padding: 12px 18px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Focus is immediate and unmistakable: brand border + soft brand halo.
   (In-category search stays brand too — search is an action, v3.) */
.search-form input[type='search']:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* --- Breadcrumb ---------------------------------------------------------- */

/* A flex row (not just the inner <ol>) so the copy-link pill toc.js appends
   after the list lands on the SAME row, pushed to the far inline-end by its
   own margin-inline-start:auto, instead of wrapping onto its own line. */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; margin: 0; }
.crumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}
.crumbs-list li { display: flex; align-items: center; gap: 8px; margin: 0; }
.crumbs a { color: var(--ink-3); transition: color 0.18s ease; }
.crumbs a:hover { color: var(--type-color); }
.crumbs svg { color: var(--chev); flex: none; }
.crumbs .crumbs-current { color: var(--ink); font-weight: 700; }

/* --- Hero (home) --------------------------------------------------------- */

.hero .container { padding-block: 46px 40px; }
.hero-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: var(--brand); }
.hero h1 { font-size: 2.25rem; line-height: 1.4; margin: 12px 0; }
.hero-sub { font-size: 18px; color: var(--ink-3); max-width: 620px; margin: 0 0 26px; }
/* Richtext hero subtitle (F70): inner paragraphs must not double the block gap. */
.hero-sub p { margin: 0 0 0.5em; }
.hero-sub p:last-child { margin-block-end: 0; }

/* Category entry tiles under the hero search — a fixed 3-per-row grid
   (2 on tablet, 1 on phones) so the six type tiles fill two even rows. */
.cat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-block-start: 24px; }
@media (max-width: 860px) { .cat-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cat-tiles { grid-template-columns: 1fr; } }
.cat-tile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cat-tile:hover {
  color: var(--ink);
  transform: translateY(-2px);
  border-color: var(--c-chip);
  box-shadow: 0 8px 20px var(--c-shadow);
}
/* Icon containers are one system: 44px, 12px radius, accent fill, near-white
   glyph (24px) — identical in the hero tiles and the section heads. */
.cat-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  /* F74: tinted tile + accent glyph (the dashboard type-card treatment) —
     the solid accent fill put a white stroke icon on dark hues that don't
     all carry it well. Same swap on every icon tile below. */
  background: var(--c-tile);
  color: var(--type-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.cat-tile-icon svg { width: 24px; height: 24px; }
.cat-tile-text { flex: 1; min-width: 0; }
.cat-tile-name { display: block; font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.5; }
.cat-tile-count { font-size: 14px; color: var(--ink-3); }
.cat-tile-chevron { width: 17px; height: 17px; flex: none; color: var(--type-color); }

/* --- Category panel + content cards (home & listings) -------------------- */

.home-section { margin-block-end: 20px; }
.home-section:target { scroll-margin-block-start: calc(16px + var(--sticky-bars)); }

/* White card everywhere (home sections and listing pages alike) — a tinted
   panel on just one section/page read as a different, heavier design than
   the rest of the system, so every category panel now shares one flat,
   white, bordered surface. */
.category-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px;
}

.panel-head { display: flex; align-items: center; gap: 14px; margin-block-end: 18px; }
.panel-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c-tile);
  color: var(--type-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.panel-head-icon svg { width: 24px; height: 24px; }
.panel-head-text { flex: 1; min-width: 0; }
.panel-head h2 { margin: 0; line-height: 1.45; }
.panel-sub { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* Taxonomy term descriptions (F68): under the section heading on grouped
   overviews, and under the title block on a term's own filter page. */
.panel-desc { margin: -8px 0 16px; max-width: 70ch; font-size: 14.5px; color: var(--ink-2); }
.panel-desc p, .listing-desc p { margin: 0 0 0.5em; }
.panel-desc p:last-child, .listing-desc p:last-child { margin-block-end: 0; }
.listing-desc { margin-block-start: 10px; max-width: 70ch; font-size: 15px; color: var(--ink-2); line-height: 1.9; }

/* The trailing "uncategorized" bucket is a content gap (a doc missing its
   grouping field), not a real category — dashed border + neutral ink icon
   (never the type's own accent color) so it reads as "needs attention"
   rather than sitting as an equally legitimate section next to real ones. */
.category-panel--uncategorized { border: 1px dashed var(--line-strong); }
.panel-head-icon--muted { background: var(--sand); color: var(--ink-3); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 14px;
}

/* Content card — the workhorse doorway card. */
.card-grid .relation-card,
.listing .relation-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 17px 18px 13px;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, background-color 0.18s ease;
}
/* Hover = clearer tinted border + gentle lift; the text stays ink (v3: no
   dramatic color flips) and only the chevron carries the accent. */
.relation-card:hover {
  border-color: var(--c-chip);
  box-shadow: 0 8px 20px var(--c-shadow);
  transform: translateY(-2px);
  color: var(--ink);
}
.relation-card-head { min-width: 0; }
.relation-card-title { display: block; font-weight: 800; font-size: 16.5px; line-height: 1.5; margin: 0; color: inherit; }
/* English caption under a card title — lower weight, hugs the RTL edge. */
.relation-card-latin {
  display: block;
  text-align: right;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.relation-card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* F78: quieter than before (was 14px/--ink-3, 3 lines) — the summary is a
     scent, not the content; it must not compete with the card title. */
  color: var(--ink-4);
  font-size: 13px;
  line-height: 1.7;
}
.relation-card-foot { display: flex; justify-content: flex-end; margin-block-start: auto; padding-block-start: 4px; }
.relation-card-chevron { width: 14px; height: 14px; color: var(--type-color); }

/* --- Listing page --------------------------------------------------------- */

.listing-head .container { padding-block: 24px 30px; }
.listing-title-row { display: flex; align-items: center; gap: 16px; margin-block-start: 20px; }
.listing-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--c-tile);
  color: var(--type-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.listing-icon svg { width: 25px; height: 25px; }
.listing-title-text { flex: 1; min-width: 0; }
.listing-title-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.listing-head h1 { font-size: 30px; margin: 0; }
.count-chip {
  background: var(--c-tile);
  color: var(--type-color);
  border-radius: 999px;
  padding: 3px 13px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.listing-head .search-form { max-width: 560px; margin-block-start: 22px; }

.listing-body { padding-block: 24px 8px; }
.listing-section { margin-block-end: 20px; }
.listing-section .panel-head h2 { font-size: 20px; }

/* Filter bar (per-field value listings). */
.filter-groups { display: flex; flex-direction: column; gap: 8px; margin-block-start: 18px; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-label { font-size: 13.5px; font-weight: 700; color: var(--ink-3); margin-inline-end: 2px; }
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 700;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.filter-pill:hover { color: var(--type-color); border-color: var(--type-color); }
.filter-pill.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter-pill.active:hover { color: var(--paper); }
/* No opacity and ≥11.5px: counts inherit the pill's ink-3, which is the
   lightest ink that still clears WCAG AA on surface. */
.filter-count { font-size: 0.86em; font-weight: 400; }
.filter-clear { border-style: dashed; }

/* --- Pagination ----------------------------------------------------------- */

.pager, .search-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 24px;
}
.pager a, .pager span, .search-pagination a, .search-pagination span {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-inline: 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.pager a, .search-pagination a {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-3);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.pager a:hover, .search-pagination a:hover { color: var(--type-color); border-color: var(--type-color); }
.pager .pager-cur { background: var(--ink); border: 1px solid var(--ink); color: var(--paper); }
.pager .pager-gap { color: var(--ink-4); min-width: auto; padding-inline: 4px; }
.pager svg, .search-pagination svg { width: 13px; height: 13px; }

/* --- Document (detail) pages ---------------------------------------------- */

.doc-head .container { padding-block: 24px 30px; }

.doc-title-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-block-start: 14px; }
.doc-title-text { flex: 1; min-width: 0; }
.doc-head h1.doc-title { margin: 0; }
/* Full container width — the sidebar column only exists below, in the grid. */

/* Copy-link quiet chip (injected by toc.js on the breadcrumb row, pushed to
   the far inline-end — the physical LEFT on this RTL site). */
.doc-title-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  vertical-align: middle;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--c-chip);
  padding: 4px 13px;
  border-radius: 999px;
  color: var(--type-color);
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.doc-title-copy:hover { border-color: var(--type-color); }
.doc-title-copy svg { width: 14px; height: 14px; }
.doc-title-copy.copied { border-color: var(--type-color); }

/* Grid: 280px sticky sidebar (right, in RTL) + article. */
.doc-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding-block: 26px 8px;
}
.doc-layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }

/* Tool logo beside the title. */
.doc-logo { margin: 6px 0 0; flex: none; }
.doc-logo img { max-height: 72px; width: auto; border-radius: 13px; display: block; background: var(--surface); }

/* Sidebar type scale (T2): one tier set for every sidebar component —
   values/TOC links 14 · labels/badges/EN title 12.5 · notes/overline 12;
   the card title (15) is the single deliberate step up. New sidebar
   components take a variable instead of hand-picking a size. */
.doc-sidebar {
  --sb-value: 14px;
  --sb-label: 12.5px;
  --sb-note: 12px;
  --sb-title: 15px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
@media (min-width: 64rem) {
  .doc-sidebar {
    position: sticky;
    /* Stick BELOW the logged-in admin bar (F52): without the offset the
       sidebar's top slid underneath the sticky bar while scrolling. The
       height cap shrinks by the same amount so the bottom stays on-screen. */
    top: calc(24px + var(--sticky-bars));
    max-height: calc(100dvh - 48px - var(--sticky-bars));
    overflow-y: auto;
  }
  /* F79: scrolling the WHOLE column cut the TOC card (and its bottom border)
     at the viewport cap. Instead the cards keep their natural height and the
     TOC's LIST scrolls inside its own bordered card: min-height:0 lets the
     card compress within the flex column, the ul takes the scrollbar. The
     container's overflow-y:auto stays only as a fallback for the extreme
     case of a glance card alone exceeding the viewport. */
  .doc-sidebar > * { flex: none; }
  .doc-sidebar > .doc-toc { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .doc-sidebar > .doc-toc > * { flex: none; }
  .doc-sidebar > .doc-toc > ul { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
}

/* Sidebar fact card (alternative names, learning time, tool facts). */
.glance {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 19px;
}
.glance-rows { margin-block-start: 0; }
.glance-row { border-block-start: 1px solid var(--line-soft); padding-block: 10px; }
.glance-row:first-child { border-block-start: 0; padding-block-start: 2px; }
.glance-row:last-child { padding-block-end: 2px; }
.glance-label { display: block; font-size: var(--sb-label); font-weight: 700; color: var(--ink-3); }
.glance-value { display: block; font-size: var(--sb-value); font-weight: 700; color: var(--ink); margin-block-start: 1px; }
/* Multiple values in one row (alternative names): one per line. */
.glance-value + .glance-value { margin-block-start: 3px; }
.glance-value.glance-latin { text-align: left; letter-spacing: 0.01em; }
/* Clarifying footnote under a value («زمان تقریبی یادگیری» = total learning
   and practice time, not the length of the recommended courses). */
.glance-note { display: block; font-size: var(--sb-note); color: var(--ink-3); line-height: 1.8; margin-block-start: 4px; }
/* An emphasized numeric value (learning hours, …) is a STAT, not a link, so
   it takes the category accent inside a tinted pill rather than plain
   colored text — plain accent text next to real `<a>` pills in this same
   sidebar reads as another link. Linked values are actions → brand blue (v3). */
.glance-value-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--c-tile);
  color: var(--type-color);
  font-size: var(--sb-value);
  font-weight: 800;
}
.glance-value a { color: var(--brand); }
/* GlanceTag: plain inline text, one value per line — the sidebar's own
   role for a multi-value fact (alternative names, platform list), distinct
   from the filled pill `.badge` wears in the article body, so one class
   name doesn't carry two unrelated looks depending on where it lands. */
.glance-tag { display: inline; }
a.glance-tag { color: var(--brand); }
a.glance-tag:hover { color: var(--brand-dark); }

/* PageToc — «در این صفحه» (scroll-spy adds .active) */
.doc-toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 12px;
}
.doc-toc-overline {
  font-size: var(--sb-note);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  padding: 0 7px 8px;
  margin: 0;
}
.doc-toc ul { list-style: none; padding-inline-start: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-toc li { margin: 0; }
.doc-toc a {
  display: block;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: var(--sb-value);
  line-height: 1.6;
  color: var(--ink-3);
  transition: color 0.18s ease, background-color 0.18s ease;
}
.doc-toc a:hover { color: var(--type-color); }
.doc-toc a.active { background: var(--c-panel); color: var(--type-color); font-weight: 700; }
.doc-toc .toc-sub a { padding-inline-start: 26px; font-size: 13px; }

/* Entity identity at the top of the FIRST sidebar card: the type pill as an
   eyebrow, the short content title under it at full card width, the English
   name last — always visible (the H1 carries the descriptive SEO title
   instead). column-reverse: the pill is LAST in the shared markup but reads
   first; a side-by-side layout crushed long guide titles against the pill. */
.sidebar-id {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 7px;
  border-block-end: 1px solid var(--line-soft);
  padding-block-end: 10px;
  margin-block-end: 8px;
}
.sidebar-id:last-child { border-block-end: 0; padding-block-end: 2px; margin-block-end: 0; }
.doc-toc .sidebar-id { padding-inline: 7px; }
.sidebar-id-text { min-width: 0; align-self: stretch; }
.sidebar-title { font-size: var(--sb-title); font-weight: 800; color: var(--ink); line-height: 1.6; margin: 0; }
/* Right-aligned: in the identity block there are only the two titles (fa + en),
   so the English one hugs the same edge as the Persian title. (The career
   page's multi-name English list uses .glance-latin and stays left-aligned.) */
.sidebar-title-en {
  font-size: var(--sb-label);
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  text-align: right;
  line-height: 1.6;
  margin: 2px 0 0;
}
/* Content-type pill: the eyebrow above the title (see .sidebar-id). */
.sidebar-type {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--c-tile);
  color: var(--type-color);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.8;
  white-space: nowrap;
}
.sidebar-type-icon { width: 1.05em; height: 1.05em; flex: none; }

/* Article column */
.doc { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.doc-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px 30px 28px;
  scroll-margin-block-start: calc(16px + var(--sticky-bars));
}

/* SectionTitle: 5×26 accent bar + h2. */
.doc-section > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.doc-section > h2::before {
  content: '';
  width: 5px;
  height: 26px;
  border-radius: 3px;
  background: var(--type-color);
  flex: none;
}
.doc-section > h2, .doc-section > h3 { scroll-margin-block-start: calc(16px + var(--sticky-bars)); }

.doc-section > h3 { font-size: 16.5px; margin: 0 0 10px; }
.doc-section > * + h3 { margin-block-start: 20px; }

.doc-section p { font-size: 15.5px; color: var(--ink-body); line-height: 1.95; }

.richtext { font-size: 15.5px; color: var(--ink-body); line-height: 1.95; }
.richtext :first-child { margin-block-start: 0; }
.richtext :last-child { margin-block-end: 0; }
/* Inline prose links are ACTIONS → brand blue (v3), never category-colored. */
.richtext a { color: var(--brand); font-weight: 700; }
.richtext a:hover { color: var(--brand-dark); }

.doc-cover { margin: 14px 0 0; }
.doc-cover img { border-radius: 16px; display: block; }

/* --- Item lists ------------------------------------------------------------
   The general titled-point component (duties, highlights, applications, key
   features, use cases, …): a 7px accent dot, a bold title, a quiet body.
   Column layout comes from a modifier: .cols-2 / .cols-3 (default: one
   column); all collapse to one column on narrow viewports. */
.item-list {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 26px;
}
.item-list.cols-2 { grid-template-columns: 1fr 1fr; }
.item-list.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 48rem) {
  .item-list.cols-2, .item-list.cols-3 { grid-template-columns: 1fr; }
}
.doc-section > * + .item-list { margin-block-start: 16px; }
.item-list .item {
  position: relative;
  min-width: 0;
  padding-inline-start: 17px;
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-body);
  line-height: 1.85;
}
.item-list .item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--type-color);
}
.item-title { font-size: 15.5px; font-weight: 800; margin: 0; line-height: 1.6; }
.item-body { font-size: 14px; color: var(--ink-3); margin: 2px 0 0; line-height: 1.85; }

/* Generic field-renderer content inside an .item (field.njk's object_list
   dispatch emits a plain p.item-title/p/.richtext, not real headings — a
   repeated bullet title is a list-item label, not a document subsection, so
   it stays out of the heading outline. Same visual weight as the
   hand-authored item-title/item-body classes, so a generic and a bespoke
   dot-list are indistinguishable. Scoped to the item-list-generic marker
   (not bare .item-list) so it can never out-specificity .item-title/
   .item-body on the hand-authored dot-lists. */
.item-list-generic .item .item-title { margin: 0 0 4px; }
.item-list-generic .item p, .item-list-generic .item .richtext { font-size: 14px; color: var(--ink-3); line-height: 1.85; }
.item-list-generic .item > :last-child { margin-block-end: 0; }

/* Plain string bullets (سایر پیش‌نیازها …) share the dot treatment. */
.prereq-list {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.prereq-list li {
  position: relative;
  padding-inline-start: 17px;
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-body);
  line-height: 1.85;
}
.prereq-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--type-color);
}

/* Checklists (single-text repeaters) — ✓ marks, no ordering implied. */
.checklist {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.checklist li {
  position: relative;
  padding-inline-start: 26px;
  margin: 0;
  font-size: 15px;
  color: var(--ink-body);
  line-height: 1.85;
}
.checklist li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  font-weight: 800;
  color: var(--type-color, var(--brand));
}

/* Small label over a badge/list group inside repeater items (e.g. per-stage
   skills vs tools) — distinguishes adjacent same-shaped groups. */
.field-mini-label {
  margin: 10px 0 4px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-3);
}
.learning-step .field-mini-label:first-child { margin-block-start: 0; }

/* Muted one-line intro directly under a section heading (learning-hours
   hint, legacy panel-questions intro). */
.section-intro {
  margin: -2px 0 14px;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.9;
}

/* Fact tiles (generic renderer key data). */
.fact {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  padding: 8px 16px 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-inline-end: 10px;
  margin-block-end: 12px;
}
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 18px; }
.fact-row .fact { margin: 0; }
.fact-label { font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.fact-value { font-size: 15.5px; line-height: 1.7; font-weight: 700; color: var(--ink); }
.fact-value a { color: var(--brand); }

/* Steps — accent-filled number discs on a vertical rail. */
.learning-steps {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
  counter-reset: learning-step;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.learning-step {
  counter-increment: learning-step;
  position: relative;
  padding-inline-start: 46px;
  margin: 0;
}
.learning-step::before {
  content: counter(learning-step, fa-decimal);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 2px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--type-color);
  color: var(--c-on);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--c-panel);
}
/* The rail connecting each disc to the next (spans the flex gap). */
.learning-step::after {
  content: '';
  position: absolute;
  inset-inline-start: 15px;
  inset-block-start: 40px;
  inset-block-end: -15px;
  width: 2px;
  border-radius: 999px;
  background: var(--c-border);
}
.learning-step:last-child::after { display: none; }
.learning-step h3 { font-size: 15.5px; font-weight: 800; margin: 0 0 4px; line-height: 1.6; }
.learning-step p, .learning-step .richtext { font-size: 14px; color: var(--ink-3); line-height: 1.85; }
.learning-step > :last-child { margin-block-end: 0; }

/* Hours chip on the step title row: a quiet outlined pill in the family. */
.step-hours-chip {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
  background: var(--surface);
  border: 1px solid var(--c-border);
  color: var(--c-dark);
  vertical-align: 0.12em;
  white-space: nowrap;
}
p.step-hours-chip { margin: 0 0 4px; }

.section-meta { color: var(--ink-3); font-size: 14px; margin: -6px 0 16px; }

/* --- Related groups: destination-colored panels of compact cards ---------- */

.relation-group {
  background: var(--c-panel);
  border-radius: 18px;
  padding: 14px;
}
.doc-section .relation-group + .relation-group,
.doc-section * + .relation-group { margin-block-start: 12px; }
.relation-group-head { display: flex; align-items: center; gap: 10px; margin-block-end: 10px; }
.relation-group-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--c-tile);
  color: var(--type-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.relation-group-icon svg { width: 18px; height: 18px; }
.relation-group-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.6; }

.relation-cards {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: 10px;
}
.relation-cards li { margin: 0; }
.relation-cards .relation-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.relation-cards .relation-card:hover {
  border-color: var(--c-chip);
  box-shadow: 0 8px 18px var(--c-shadow);
  transform: translateY(-2px);
  color: var(--ink);
  background: var(--surface);
}
.relation-cards .relation-card-title { font-size: 15px; font-weight: 800; line-height: 1.5; }
.relation-cards .relation-card-latin { font-size: 11.5px; }
.relation-cards .relation-card-summary { font-size: 12.5px; }
.relation-card-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--type-color);
}
.relation-card-kind-icon { width: 14px; height: 14px; flex: none; }

/* Mixed lists (backlinks): each row carries its own category family — a soft
   tile icon (`c-tile` fill + `type-color` glyph, unlike the solid-fill tiles
   above) plus a stacked kind/title/latin text block. */
.relation-rows { list-style: none; padding-inline-start: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.relation-rows li { margin: 0; }
.relation-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 14px 20px;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.relation-row:hover {
  border-color: var(--c-chip);
  box-shadow: 0 8px 18px var(--c-shadow);
  transform: translateY(-2px);
  color: var(--ink);
}
.relation-row-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c-tile);
  color: var(--type-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.relation-row-icon svg { width: 22px; height: 22px; }
.relation-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.relation-row-kind { font-size: 12.5px; font-weight: 800; line-height: 1.6; color: var(--type-color); }
.relation-row-title { font-size: 16px; font-weight: 800; line-height: 1.5; color: var(--ink); }
.relation-row-latin { align-self: stretch; font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0.02em; text-align: right; }
.relation-row-chevron { width: 17px; height: 17px; flex: none; color: var(--chev); }

/* --- External reference / resource cards ----------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14.5rem, 100%), 1fr));
  gap: 10px;
}
ul.cards { list-style: none; padding-inline-start: 0; margin: 0; }
.cards > li { margin: 0; }

.card, .ref-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
a.card:hover, a.ref-card:hover {
  border-color: var(--c-chip);
  box-shadow: 0 8px 18px var(--c-shadow);
  color: var(--ink);
}
.ref-card { display: flex; align-items: center; gap: 12px; }
.ref-card-thumb { inline-size: 72px; block-size: auto; border-radius: 8px; flex-shrink: 0; }
.ref-card-title { font-weight: 700; font-size: 14.5px; line-height: 1.7; }

/* Resource rows: kind icon in the category tile, title over a quiet meta line
   (kind · domain), external-link mark at the inline-end. */
.resource-list {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 10px;
}
.resource-list > li { margin: 0; }
.resource-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
a.resource-card:hover {
  color: var(--ink);
  border-color: var(--c-chip);
  background: var(--c-wash);
  box-shadow: 0 8px 18px var(--c-shadow);
}
.resource-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--c-tile);
  color: var(--type-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.resource-icon svg { width: 17px; height: 17px; }
.resource-text { flex: 1; min-width: 0; }
.resource-card-title {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.resource-card:hover .resource-card-title { color: var(--type-color); }
.resource-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
  min-width: 0;
}
.resource-meta > * + *::before { content: '·'; margin-inline-end: 6px; color: var(--ink-4); }
.resource-kind { flex: none; }
.resource-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.01em; }
.resource-ext-icon {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--ink-4);
  transition: color 0.18s ease;
}
a.resource-card:hover .resource-ext-icon { color: var(--type-color); }

/* --- Badges ---------------------------------------------------------------- */

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 14px; }
.badges:last-child { margin-block-end: 0; }
.badges + .badges { margin-block-start: -6px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.8;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--c-tile);
  color: var(--type-color);
  max-width: 100%;
}
.badge-icon { width: 0.95em; height: 0.95em; flex: none; }

.badge-neutral { background: var(--sand); color: var(--ink-2); }

/* Tiered scales run low → high; the hue carries the meaning (v3 families:
   green / blue / terracotta working accents on their tile tints). */
.badge-tone-good { background: #d1f1e3; color: #16775a; }
.badge-tone-mid { background: #d2ecff; color: #1a6d9e; }
.badge-tone-attn { background: #ffe0d7; color: #a74932; }
a.badge-tone-good:hover { color: #066148; }
a.badge-tone-mid:hover { color: #0c5983; }
a.badge-tone-attn:hover { color: #8b3925; }

.badge-outline { background: transparent; color: var(--ink-3); border: 1px solid var(--line-strong); font-weight: 700; }

a.badge { transition: color 0.18s ease, background-color 0.18s ease; }
a.badge:hover { color: var(--c-dark); }

.badge-link {
  background: var(--surface);
  border: 1px solid var(--c-chip);
  color: var(--type-color);
  font-weight: 700;
  transition: border-color 0.18s ease;
}
.badge-link:hover { border-color: var(--type-color); color: var(--type-color); }

.badge-hours { background: var(--c-tile); color: var(--type-color); }

/* CategoryChip on search rows & suggest items — a flat tile pill, no dot. */
.badge-type {
  background: var(--c-tile);
  color: var(--type-color);
  font-size: 11.5px;
  padding: 2px 10px;
  flex: none;
}

/* --- Search page ------------------------------------------------------------ */

.search-head .container { padding-block: 30px 26px; }
.search-head h1 { font-size: 26px; letter-spacing: -0.01em; margin: 0 0 16px; }
.search-meta { font-size: 15px; color: var(--ink-3); margin: 16px 0 0; }
.search-meta .muted { color: var(--ink-3); }

.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 12px; }
.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  background: var(--surface);
  color: var(--ink-3);
  border: 1px solid var(--line-strong);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.filter-tab:hover { color: var(--type-color); border-color: var(--type-color); }
.filter-tab .tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--type-color); flex: none; }
.filter-tab .tab-count { color: var(--ink-3); font-weight: 400; }
.filter-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-tab.active:hover { color: var(--paper); }
.filter-tab.active .tab-dot { display: none; }
.filter-tab.active .tab-count { color: var(--line-strong); }

.search-body { padding-block: 24px 8px; }
.search-results {
  list-style: none;
  padding: 0 6px 6px;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.search-result { margin: 0; border-block-start: 1px solid var(--line-soft); }
.search-result:first-child { border-block-start: 0; }
.search-result-link {
  display: block;
  padding: 15px 16px 14px;
  border-radius: 10px;
  color: inherit;
  transition: background-color 0.15s ease;
}
.search-result-link:hover { background: var(--sand); color: inherit; }
.search-result-top { display: flex; align-items: center; gap: 10px; }
.search-result-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.search-result-title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.search-result-latin { font-size: 12.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0.02em; flex: none; }
.search-result-chevron { width: 13px; height: 13px; flex: none; color: var(--chev); }
.search-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 3px 0 0;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.75;
  max-width: 920px;
}
/* Flat highlight: category tile + accent, never an underline. */
.search-result mark, .search-suggest mark {
  background: var(--c-tile);
  color: var(--type-color);
  border-radius: 4px;
  padding: 0 2px;
}

/* Empty state — always offers a next step. */
.empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
.empty-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.empty-icon svg { width: 24px; height: 24px; }
.empty-title { font-size: 17.5px; font-weight: 800; color: var(--ink); }
.empty-body { font-size: 14px; color: var(--ink-3); max-width: 420px; line-height: 1.85; }
.empty-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin-block-start: 6px; }
.empty-links-label { font-size: 13px; color: var(--ink-3); }
.empty-links a {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  color: var(--ink-body);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.empty-links a:hover { border-color: var(--type-color); color: var(--type-color); }

/* --- Search suggest dropdown (site.js) -------------------------------------- */

.search-suggest {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline: 0;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 28px 60px rgba(36, 35, 33, 0.14);
  padding: 8px;
}
/* Header variant (icon button opens /search) has no in-place form; the home
   hero and the search page anchor it to the form width. */
.search-suggest ul { list-style: none; margin: 0; padding: 0; max-height: min(26rem, 65vh); overflow-y: auto; }
.search-suggest li { margin: 0; }

.suggest-group {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 14px 3px;
}
.suggest-group ~ .suggest-group { border-block-start: 1px solid var(--line-soft); margin-block-start: 6px; padding-block-start: 11px; }
.suggest-group-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--type-color); }
.suggest-group-count { font-size: 11.5px; color: var(--ink-3); }

.suggest-item a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-radius: 11px;
  color: var(--ink);
  transition: background-color 0.15s ease;
}
.suggest-item a:hover, .suggest-item a.active { background: var(--c-wash); color: var(--ink); }

.suggest-tile {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--c-tile);
  color: var(--type-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.suggest-tile svg, .suggest-tile-icon { width: 16px; height: 16px; }

.suggest-text { flex: 1; min-width: 0; }
.suggest-title {
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggest-summary {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
}
.suggest-latin { flex: none; font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: 0.02em; }
.suggest-chevron { width: 12px; height: 12px; flex: none; color: var(--chev); }

.suggest-empty { padding: 12px 14px; color: var(--ink-3); font-size: 14px; }

.suggest-item .suggest-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px 8px;
  margin-block-start: 6px;
  border-block-start: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  color: var(--brand);
  font-weight: 700;
  font-size: 14px;
  transition: background-color 0.15s ease;
}
.suggest-item .suggest-footer:hover, .suggest-item .suggest-footer.active { background: var(--sand); color: var(--brand); }

/* --- Empty listing / generic states ---------------------------------------- */

.empty-note { color: var(--ink-3); text-align: center; padding-block: 40px; }

/* --- Error pages (404/410) --------------------------------------------------- */

.error-page {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  padding-block: 56px 40px;
}
.error-code { font-size: 56px; font-weight: 800; color: var(--type-color); margin: 0; line-height: 1.2; }
.error-page h1 { font-size: 26px; margin-block: 8px 10px; }
.error-page p { color: var(--ink-3); }

/* --- Heading anchors (toc.js) ------------------------------------------------ */

.heading-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  margin-inline-start: 4px;
  vertical-align: middle;
  color: var(--ink-4);
  border-radius: 7px;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
/* Inside the flex section heading the 12px gap already separates it — pull it
   back so the anchor sits right beside the text. */
.doc-section > h2 > .heading-anchor { margin-inline-start: -8px; }
.doc-section > h2:hover .heading-anchor,
.doc-section > h3:hover .heading-anchor,
.heading-anchor:focus-visible { opacity: 0.7; }
.heading-anchor:hover { opacity: 1; color: var(--type-color); background: var(--c-wash); }
.heading-anchor svg { width: 0.75em; height: 0.75em; }
.heading-anchor.copied { opacity: 1; color: var(--type-color); }
/* Hover tooltip: tells the reader the anchor copies the section link.
   Pure CSS (::after over the anchor), so it needs no JS and never blocks
   the click. Hidden again while .copied so it does not fight the feedback
   state, and suppressed on touch-only devices where hover is sticky. */
.heading-anchor { position: relative; }
.heading-anchor::after {
  content: 'کپی لینک این بخش';
  position: absolute;
  bottom: calc(100% + 7px);
  inset-inline-start: 50%;
  translate: 50% 0; /* RTL page: physical +x shift centers the bubble */
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease 0.15s;
  z-index: 5;
}
.heading-anchor.copied::after { content: 'کپی شد!'; }
@media (hover: hover) {
  .heading-anchor:hover::after,
  .heading-anchor:focus-visible::after,
  .heading-anchor.copied::after { opacity: 1; visibility: visible; }
}

/* --- Return-to-top (site.js) -------------------------------------------------- */

.to-top {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-3);
  box-shadow: 0 6px 20px rgba(36, 35, 33, 0.12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}
.to-top.visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.to-top:hover { border-color: var(--brand); color: var(--brand); }
.to-top svg { width: 20px; height: 20px; }

/* --- Generic field renderer leftovers ---------------------------------------- */

.field-row { margin-block: 0 0.5rem; }
.field-label { color: var(--ink-3); font-weight: 700; margin-inline-end: 0.25rem; }

.obj-group {
  border-inline-start: 3px solid var(--line-strong);
  padding-inline-start: 1rem;
  margin-block: 0.75rem 1rem;
}
.obj-group > :last-child { margin-block-end: 0; }

.swatch {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  vertical-align: -0.15em;
  margin-inline-end: 0.25rem;
}

.field-figure { margin: 0 0 1rem; }
.field-figure img { border-radius: 12px; display: block; }
.field-figure figcaption { color: var(--ink-3); font-size: 0.85rem; margin-block-start: 0.35rem; }
.field-video video { width: 100%; height: auto; border-radius: 12px; display: block; background: #000; }

.gallery { margin-block-end: 1rem; }
.gallery .field-figure { margin: 0; }
.gallery img { inline-size: 100%; object-fit: cover; }

.embed-frame { aspect-ratio: 16 / 9; margin-block-end: 1rem; border-radius: 12px; overflow: hidden; background: var(--ink); }
.embed-frame iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.embed-caption { color: var(--ink-3); font-size: 0.9rem; margin-block: -0.5rem 1rem; }

.field-file .file-link { font-weight: 700; color: var(--brand); }
.file-size { color: var(--ink-3); font-size: 0.85rem; }

/* Unified content patterns ------------------------------------------------ */
/* A plain emphasis box, not a quotation — flat solid background, one plain
   border, no accent bar, no shadow, no quote mark. */
.richtext blockquote {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink-body);
}
.richtext blockquote > :last-child { margin-block-end: 0; }

.checklist { gap: 10px; }
.checklist li {
  padding: 12px 46px 12px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.checklist li::before {
  inset-inline-start: 14px;
  inset-block-start: 13px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--c-tile);
  font-size: 13px;
}

.doc-section > .relation-rows + .prereq-list,
.doc-section > .relation-rows + .badges { margin-block-start: 26px; }

.learning-path-unified { gap: 22px; }
.learning-path-unified .learning-step {
  position: relative;
  padding: 0;
  padding-inline-start: 58px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.learning-path-unified .learning-step::before { content: none; display: none; }
.learning-path-unified .learning-step::after {
  inset-inline-start: 19px;
  inset-block-start: 58px;
  inset-block-end: -28px;
  width: 2px;
  background: var(--c-border);
}
/* The circled number is the ONLY step indicator — no repeated "step N" text
   alongside it, and no shadow at rest (flat, in line with the rest of the
   system); only a plain ring keeps it legible against the card edge. */
.learning-step-marker {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0;
  inset-block-start: 17px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 4px solid var(--paper);
  border-radius: 50%;
  background: var(--type-color);
  color: var(--c-on);
  box-shadow: 0 0 0 3px var(--c-panel);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.learning-step-card {
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  background: var(--surface);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.learning-step-card:hover {
  border-color: var(--c-chip);
  box-shadow: 0 8px 20px var(--c-shadow);
  transform: translateY(-2px);
}
.learning-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 14px;
  border-block-end: 1px solid var(--c-border);
}
.learning-step-heading { min-width: 0; }
.learning-path-unified .learning-step h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.55;
}
.learning-step-time {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex: none;
  padding: 5px 11px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-3);
  font-size: 12px;
  white-space: nowrap;
}
.learning-step-content { padding: 16px 20px 18px; }
.learning-step-content > :first-child { margin-block-start: 0; }
.learning-step-content > :last-child { margin-block-end: 0; }
.learning-step-content .richtext { color: var(--ink-body); }
.learning-step-content .field-mini-label {
  margin-block: 14px 5px;
  color: var(--ink-2);
  font-size: 12.5px;
}
.learning-step-content .relation-pills { margin-block: 4px 10px; }

.relation-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-block: 8px 12px; }
.relation-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-tile);
  color: var(--type-color);
  font-size: 12.5px;
  font-weight: 800;
}
.relation-pill:hover { background: var(--c-panel); color: var(--c-dark); }

.direct-relation-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-tile);
  /* Size inherits the sidebar value tier via .glance-value (--sb-value). */
  font-weight: 800;
  transition: border-color 0.18s ease;
}
/* Beats `.glance-value a { color: var(--brand) }` (two classes vs one) so the
   pill keeps its own type's accent at rest instead of falling back to the
   brand link blue. */
.glance-value .direct-relation-pill,
.glance-value .direct-relation-pill:hover { color: var(--type-color); }
.glance-value .direct-relation-pill:hover { border-color: var(--type-color); }
.direct-relation-pill-icon { width: 14px; height: 14px; flex: none; }
/* One value per line (same rule as the direct-relation .glance-value rows
   above) — side-by-side wrapping made a multi-value fact (platforms, work
   modes, alternative names) hard to scan as a list of distinct values. */
.glance-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

@media (max-width: 36rem) {
  .learning-path-unified .learning-step { padding-inline-start: 48px; }
  .learning-step-marker { width: 34px; height: 34px; inset-block-start: 18px; border-width: 3px; }
  .learning-path-unified .learning-step::after { inset-inline-start: 16px; inset-block-start: 55px; }
  .learning-step-header { align-items: flex-start; flex-direction: column; gap: 9px; }
  .learning-step-time { align-self: flex-start; }
}

.item-list-routes { gap: 14px; }
.item-list-routes .item {
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.item-list-routes .item::before { display: none; }
.item-list-routes .field-labeled:last-child {
  display: inline-flex;
  margin-block-start: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--c-tile);
  color: var(--c-dark);
  font-size: 12.5px;
}

.item-list-questions .item {
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.item-list-questions .item::before { display: none; }
.item-list-questions .fact { inline-size: fit-content; margin-block-end: 12px; }
.item-list-questions .field-mini-label {
  margin-block: 14px 5px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}
.item-list-questions .field-key-answer-guidance,
.item-list-questions .field-key-model-answer {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.item-list-questions .field-key-model-answer {
  border-color: var(--c-border);
  background: var(--c-wash);
}
.legacy-question-list > ul {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.legacy-question-list > ul > li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.legacy-question-list > ul > li::before { display: none; }
.legacy-question-list em {
  display: block;
  margin-block-start: 8px;
  color: var(--ink-3);
  font-style: normal;
}

/* Interview question cards: category → question → short caption stay in
   view; the longer answer guidance / model answer fold into a native
   <details> disclosure so a list of questions doesn't read as a wall of
   text. Flat, no resting shadow. */
.qa-list { list-style: none; padding-inline-start: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.qa-item { padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.qa-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qa-category { flex: none; }
.qa-question { flex: 1; min-width: 0; margin: 0; font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.7; }
.qa-caption { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.8; }
/* The toggle is an ACTION (expand/collapse), so it takes the brand action
   color, not the page's category accent (v3: category color = what you're
   looking at, brand blue = what you can do). */
.qa-details { margin-block-start: 10px; }
.qa-details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  padding: 4px 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand);
}
.qa-details summary:hover { color: var(--brand-dark); }
.qa-details summary::-webkit-details-marker { display: none; }
.qa-details summary::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.qa-details[open] summary::before { transform: rotate(45deg); }
.qa-details-body { margin-block-start: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
/* Accordion parts (answer guidance / model answer) carry no mini-labels —
   the <summary> names them (T10); a hairline separates the two. */
.qa-detail-part + .qa-detail-part {
  border-block-start: 1px solid var(--line-soft);
  margin-block-start: 12px;
  padding-block-start: 12px;
}
/* Question level badge (T9) — neutral, so the colored category badge stays
   the primary scent. */
.qa-level { flex: none; background: var(--sand); color: var(--ink-3); }

/* FAQ accordion (T16): reuses the qa-details disclosure (chevron caret,
   hidden marker, folding body). Unlike the qa toggle, the summary here IS
   the question — content, not an action — so it reads ink-colored at body
   size and only takes the brand color on hover/open. */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item.qa-details { margin-block-start: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.faq-item summary { display: flex; width: 100%; padding: 12px 16px; font-size: 15px; color: var(--ink); }
.faq-item summary:hover, .faq-item[open] summary { color: var(--brand); }
.faq-item .qa-details-body { margin: 0 16px 14px; }
.faq-item .qa-details-body p { margin: 0; line-height: 1.9; }

/* External resources deliberately use one neutral visual family. */
.resource-card, .ref-card { --resource-accent: #626872; }
.resource-icon { background: #eef0f2; color: var(--resource-accent); }
a.resource-card:hover, a.ref-card:hover { border-color: #aeb3ba; background: #f7f7f6; box-shadow: 0 8px 18px rgba(31, 36, 48, 0.08); }
a.resource-card:hover .resource-card-title,
a.resource-card:hover .resource-ext-icon { color: var(--resource-accent); }

/* Static (URL-less) resource entries carry no click affordance, so they must
   not wear the same solid card chrome as a real link — a dashed, unfilled
   treatment signals "reference only" before a reader tries to click it. */
.resource-card-static { border-style: dashed; background: transparent; }
.resource-card-static .resource-icon { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }

.related-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-block-end: 14px; }
.related-filter {
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-3);
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.related-filter:hover { border-color: var(--ink-3); color: var(--ink); }
.related-filter.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.related-items-list > li[hidden],
.faradars-list > li[hidden] { display: none; }

.doc-tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.doc-tag {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-3);
  font-size: 12px;
}
.doc-tag:hover { border-color: var(--line-strong); color: var(--ink); }

/* --- Motion & responsiveness -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .relation-card:hover, .cat-tile:hover, .relation-cards .relation-card:hover, .relation-row:hover { transform: none; }
}

/* Must complement the sticky-sidebar query above (min-width: 64rem) exactly —
   an overlap would leave the STACKED sidebar sticky and viewport-capped. */
@media (max-width: 63.99rem) {
  .doc-layout { grid-template-columns: 1fr; gap: 18px; }
  /* Content before chrome: on phones/tablets the article renders first and
     the at-a-glance/TOC sidebar follows, instead of forcing a scroll past
     both cards before any real content appears. */
  .doc-layout > .doc-sidebar { order: 2; }
  .doc-layout > .doc { order: 1; }
}

@media (max-width: 48rem) {
  .container, .site-header .container { padding-inline: 20px; }
  h1, .doc-head h1.doc-title { font-size: 1.75rem; }
  .hero h1 { font-size: 1.85rem; }
  .listing-head h1 { font-size: 1.75rem; }
  .hero .container { padding-block: 30px 26px; }
  .category-panel { padding: 18px; border-radius: 20px; }
  .doc-section { padding: 18px 20px 20px; border-radius: 18px; }
  .relation-row { gap: 12px; padding: 12px 14px; border-radius: 14px; }
  .relation-row-icon { width: 38px; height: 38px; border-radius: 11px; }
  .relation-row-icon svg { width: 19px; height: 19px; }
  .relation-row-title { font-size: 15px; }
  .site-nav { order: 3; flex-basis: 100%; margin-inline-start: 0; }
  .listing-icon { width: 44px; height: 44px; }
  .listing-icon svg { width: 23px; height: 23px; }
}