/* ══════════════════════════════════════════════════════════════════════════
   Help Center (/help, /help/category/*, /help/search, /help/article/*)
   Full redesign 2026-10-05 (owner: «مركز المساعدة… التصميم كامل… ابدع»).
   On the shared landing system: em-* tokens + home.css (hm-*), loaded first.
   Gold leads (it used to be blue); semantic colours stay only inside article
   callouts (note / tip / warning / danger). No glows, no cursor effects,
   logical properties (RTL/LTR), minmax(0,1fr) tracks, reduced-motion safe.
   Strict CSP: no style="" in markup — motion lives in help.js (CSSOM only).
   ══════════════════════════════════════════════════════════════════════════ */
.hc{
  --hc-accent:var(--em-gold); --hc-accent-strong:color-mix(in srgb,var(--em-gold) 82%,var(--em-text));
  --hc-accent-soft:color-mix(in srgb,var(--em-gold) 12%,transparent); --hc-accent-ring:color-mix(in srgb,var(--em-gold) 30%,transparent);
  --hc-ink:var(--em-gold-ink);
  --hc-bg:var(--em-bg); --hc-surface:var(--em-surface); --hc-surface-2:var(--em-surface-2);
  --hc-text:var(--em-text); --hc-text-2:var(--em-text-2); --hc-muted:var(--em-muted);
  --hc-border:var(--em-border); --hc-border-2:var(--em-border-2,var(--em-border));
  --hc-good:var(--em-good);
  /* article callouts = the identity semantic tones (2026-10-12; they follow the theme through tokens.css) */
  --hc-note:var(--ds-info); --hc-note-bg:var(--info-soft);
  --hc-tip:var(--ds-success); --hc-tip-bg:var(--success-soft);
  --hc-warn:var(--ds-warning); --hc-warn-bg:var(--warning-soft);
  --hc-danger:var(--destructive); --hc-danger-bg:var(--destructive-soft);
  --hc-r:18px; --hc-r-lg:26px; --hc-stick:calc(var(--em-nav-h,72px) + 20px);
  color:var(--hc-text); position:relative; isolation:isolate;
}
.hc *,.hc *::before,.hc *::after{ box-sizing:border-box; }
:where(.hc) a{ color:inherit; text-decoration:none; }   /* zero specificity: every .hc-* link class can set its own colour */
.hc :focus-visible{ outline:2px solid var(--hc-accent); outline-offset:2px; border-radius:8px; }
.hc-wrap{ width:100%; max-width:var(--em-container-wide,1320px); margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }
.hc-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* The landing's <main class="lp-page"> is overflow:hidden, which kills every
   position:sticky inside it; clip keeps the clipping without that (2026-10-01). */
main.lp-page{ overflow:clip; }
.hc-ico{ width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:14px; color:var(--hc-accent); background:var(--hc-accent-soft);
  transition:transform .45s cubic-bezier(.2,.9,.3,1.4), background-color .3s, color .3s; }
.hc-ico svg{ width:22px; height:22px; }

/* ══ search box (all pages) ══ */
.hc-search{ position:relative; display:flex; align-items:center; gap:10px; max-width:720px; margin-inline:auto; padding:8px; padding-inline-start:20px;
  border-radius:22px; background:var(--hc-surface); border:1px solid var(--hc-border); transition:border-color .25s, box-shadow .25s; }
.hc-search:focus-within{ border-color:var(--hc-accent); box-shadow:0 0 0 4px var(--hc-accent-ring); }
.hc-search > svg{ width:22px; height:22px; flex:none; color:var(--hc-muted); transition:color .25s; }
.hc-search:focus-within > svg{ color:var(--hc-accent); }
.hc-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--hc-text); font:inherit; font-size:14.5px; padding:12px 4px; }
.hc-search input::placeholder{ color:var(--hc-muted); }
.hc-search button{ flex:none; border:0; border-radius:16px; padding:13px 26px; font:inherit; font-size:14.5px; font-weight:800; cursor:pointer;
  color:var(--hc-ink); background:var(--hc-accent); transition:transform .2s, background-color .2s; }
.hc-search button:hover{ transform:translateY(-1px); background:var(--hc-accent-strong); }
.hc-search--sm{ max-width:none; margin:0; border-radius:16px; padding:6px; padding-inline-start:14px; }
.hc-search--sm input{ font-size:14px; padding:9px 4px; }
.hc-search--sm button{ padding:10px 18px; font-size:13.5px; border-radius:12px; }

/* ══ chips / badges ══ */
.hc-chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:99px; font-size:13.5px; font-weight:700; color:var(--hc-text-2);
  background:var(--hc-surface); border:1px solid var(--hc-border); transition:border-color .2s, color .2s, transform .2s; }
.hc-chip svg{ width:15px; height:15px; color:var(--hc-accent); }
.hc-chip:hover{ border-color:var(--hc-accent); color:var(--hc-text); transform:translateY(-2px); }
.hc-chip.is-active{ background:var(--hc-accent-soft); border-color:transparent; color:var(--hc-accent); }
.hc-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:800; color:var(--hc-accent); background:var(--hc-accent-soft); }
.hc-badge--muted{ color:var(--hc-text-2); background:var(--hc-surface-2); }
.hc mark{ background:color-mix(in srgb,var(--em-gold) 32%,transparent); color:inherit; border-radius:3px; padding:0 2px; }

/* ══ HOME · hero ══ */
.hc-hero{ position:relative; padding-block:clamp(52px,7vw,104px) clamp(40px,5vw,72px); text-align:center; overflow:hidden; }
.hc-hero__in{ position:relative; z-index:1; }
.hc-h1{ margin:0; font-size:clamp(33px,4.97vw,69.5px); font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.hc-h1 .hm-w{ animation:hm-rise .9s cubic-bezier(.2,.8,.2,1) backwards; }
.hc-h1 > .hm-w:nth-of-type(2){ animation-delay:.08s; } .hc-h1 .hm-gold .hm-w{ animation-delay:.2s; }
.hc-hero-sub{ max-width:58ch; margin:18px auto 30px; font-size:clamp(14.5px,1.24vw,16px); line-height:1.8; color:var(--hc-muted); animation:hm-rise .9s .25s cubic-bezier(.2,.8,.2,1) backwards; }
.hc-hero .hc-search{ animation:hm-rise .9s .35s cubic-bezier(.2,.8,.2,1) backwards; }
.hc-stats{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; font-size:13.5px; color:var(--hc-muted); }
.hc-stats li{ display:inline-flex; align-items:center; gap:8px; }
.hc-stats b{ font-size:14.5px; color:var(--hc-text); font-variant-numeric:tabular-nums; }
.hc-stats svg{ width:15px; height:15px; color:var(--hc-good); }
.hc-quick{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:900px; margin:26px auto 0; }
/* real article titles floating at the sides (wide screens only) */
.hc-fl{ position:absolute; z-index:0; display:none; width:230px; padding:12px 14px; border-radius:16px; text-align:start; font-size:13.5px; font-weight:700; line-height:1.5;
  background:var(--hc-surface); border:1px solid var(--hc-border); animation:hc-float 7s ease-in-out infinite; transition:border-color .25s; }
.hc-fl:hover{ border-color:var(--hc-accent); }
.hc-fl small{ display:flex; align-items:center; gap:6px; margin-bottom:6px; font-size:11.5px; font-weight:800; color:var(--hc-accent); }
.hc-fl small svg{ width:13px; height:13px; }
@media (min-width:1240px){ .hc-fl{ display:block; } }
.hc-fl--1{ inset-block-start:12%; inset-inline-start:max(16px, calc(50% - 650px)); }
.hc-fl--2{ inset-block-start:44%; inset-inline-start:max(40px, calc(50% - 610px)); animation-delay:-2.5s; }
.hc-fl--3{ inset-block-start:14%; inset-inline-end:max(16px, calc(50% - 650px)); animation-delay:-1.2s; }
.hc-fl--4{ inset-block-start:47%; inset-inline-end:max(40px, calc(50% - 610px)); animation-delay:-4s; }
@keyframes hc-float{ 50%{ transform:translateY(-10px); } }

/* ══ HOME · sections ══ */
.hc-sec{ padding-block:clamp(48px,7vw,96px); }
.hc-sec__head{ text-align:center; max-width:46rem; margin:0 auto clamp(28px,4vw,48px); }
.hc-sec__head .hm-h2{ font-size:clamp(23px,2.98vw,38px); }
.hc-sec__head p{ margin:12px auto 0; font-size:clamp(14px,1.08vw,15px); line-height:1.8; color:var(--hc-muted); }

/* start here: numbered path cards */
.hc-path{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; counter-reset:hcp; }
@media (max-width:980px){ .hc-path{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .hc-path{ grid-template-columns:minmax(0,1fr); } }
.hc-path li{ counter-increment:hcp; }
.hc-path a{ position:relative; height:100%; display:flex; flex-direction:column; gap:10px; padding:24px 22px 22px; border-radius:var(--hc-r-lg);
  background:var(--hc-surface); border:1px solid var(--hc-border); transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.hc-path a::before{ content:counter(hcp, decimal-leading-zero); font-size:36.5px; font-weight:800; line-height:1; color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--hc-accent) 55%,transparent); transition:color .35s; font-variant-numeric:tabular-nums; }
.hc-path a:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--hc-accent) 50%,var(--hc-border)); }
.hc-path a:hover::before{ color:var(--hc-accent); }
.hc-path b{ font-size:15px; line-height:1.5; }
.hc-path p{ margin:0; font-size:13.5px; line-height:1.75; color:var(--hc-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hc-path .hc-badge{ align-self:flex-start; margin-top:auto; }

/* categories: a bento of topic cards */
.hc-cats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:1080px){ .hc-cats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .hc-cats{ grid-template-columns:minmax(0,1fr); } }
.hc-cat{ position:relative; display:flex; flex-direction:column; gap:12px; padding:22px; border-radius:var(--hc-r-lg); background:var(--hc-surface); border:1px solid var(--hc-border);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.hc-cat:hover{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--hc-accent) 50%,var(--hc-border)); }
.hc-cat:hover .hc-ico{ color:var(--hc-ink); background:var(--hc-accent); transform:rotate(-8deg) scale(1.05); }
.hc-cat-top{ display:flex; align-items:center; gap:14px; }
.hc-cat-name{ margin:0; font-size:15px; font-weight:800; line-height:1.4; }
.hc-cat-name a::after{ content:''; position:absolute; inset:0; border-radius:inherit; }   /* the whole card opens the topic */
.hc-cat-count{ display:inline-block; margin-top:3px; font-size:12.5px; font-weight:700; color:var(--hc-muted); }
.hc-cat-desc{ margin:0; font-size:13.5px; line-height:1.75; color:var(--hc-text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hc-cat-list{ position:relative; z-index:1; list-style:none; margin:0; padding:10px 0 0; display:grid; gap:2px; border-block-start:1px dashed var(--hc-border); }
.hc-cat-list a{ display:flex; align-items:baseline; gap:8px; padding:5px 0; font-size:13.5px; line-height:1.55; color:var(--hc-text-2); transition:color .2s; }
.hc-cat-list a::before{ content:''; flex:none; width:6px; height:6px; border-radius:50%; background:var(--hc-accent); opacity:.55; transform:translateY(-2px); }
.hc-cat-list a:hover{ color:var(--hc-accent); }
.hc-cat-more{ position:relative; z-index:1; margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800; color:var(--hc-accent); }
.hc-cat-more svg{ width:15px; height:15px; transition:transform .25s; }
[dir=rtl] .hc-cat-more svg{ transform:scaleX(-1); }
.hc-cat:hover .hc-cat-more svg{ transform:translateX(3px); } [dir=rtl] .hc-cat:hover .hc-cat-more svg{ transform:scaleX(-1) translateX(3px); }

/* most read: a ranked board */
.hc-rank{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; counter-reset:hcr; }
@media (max-width:760px){ .hc-rank{ grid-template-columns:minmax(0,1fr); } }
.hc-rank li{ counter-increment:hcr; }
.hc-rank a{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:16px 18px; border-radius:var(--hc-r);
  background:var(--hc-surface); border:1px solid var(--hc-border); transition:border-color .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.hc-rank a::before{ content:counter(hcr); width:44px; height:44px; display:grid; place-items:center; border-radius:14px; font-size:15px; font-weight:800;
  color:var(--hc-accent); background:var(--hc-accent-soft); transition:background-color .3s, color .3s; }
.hc-rank li:nth-child(-n+3) a::before{ color:var(--hc-ink); background:var(--hc-accent); }
.hc-rank a:hover{ border-color:color-mix(in srgb,var(--hc-accent) 50%,var(--hc-border)); transform:translateX(calc(-4px * var(--hc-x,1))); }
[dir=rtl] .hc{ --hc-x:-1; }
.hc-rank b{ display:block; font-size:14.5px; line-height:1.5; }
.hc-rank small{ display:block; margin-top:3px; font-size:12.5px; color:var(--hc-muted); }
.hc-rank svg{ width:16px; height:16px; color:var(--hc-muted); }
[dir=rtl] .hc-rank svg{ transform:scaleX(-1); }

/* recently updated: a timeline */
.hc-recent{ position:relative; list-style:none; margin:0 auto; padding:0; max-width:860px; display:grid; gap:12px; }
.hc-recent::before{ content:''; position:absolute; inset-block:20px; inset-inline-start:21px; width:2px; border-radius:2px; background:linear-gradient(var(--hc-accent), var(--hc-border)); }
.hc-recent li{ position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; align-items:center; }
.hc-recent__dot{ position:relative; z-index:1; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:var(--hc-accent); background:var(--hc-surface); border:2px solid var(--hc-accent); }
.hc-recent__dot svg{ width:18px; height:18px; }
.hc-recent a{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px; padding:14px 18px; border-radius:var(--hc-r);
  background:var(--hc-surface); border:1px solid var(--hc-border); transition:border-color .3s; }
.hc-recent a:hover{ border-color:color-mix(in srgb,var(--hc-accent) 50%,var(--hc-border)); }
.hc-recent b{ font-size:14.5px; line-height:1.5; }
.hc-recent small{ font-size:12.5px; color:var(--hc-muted); }

/* still need help? */
.hc-cta{ position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:22px; align-items:center; padding:clamp(24px,3vw,36px);
  border-radius:var(--hc-r-lg); border:1px solid color-mix(in srgb,var(--hc-accent) 40%,var(--hc-border));
  background:linear-gradient(120deg, color-mix(in srgb,var(--hc-accent) 10%,var(--hc-surface)), var(--hc-surface) 60%); }
.hc-cta__ico{ width:64px; height:64px; display:grid; place-items:center; border-radius:20px; color:var(--hc-ink); background:var(--hc-accent); animation:hc-bob 4s ease-in-out infinite; }
.hc-cta__ico svg{ width:28px; height:28px; }
@keyframes hc-bob{ 50%{ transform:translateY(-4px) rotate(-5deg); } }
.hc-cta h2{ margin:0 0 6px; font-size:clamp(16.5px,1.66vw,21.5px); font-weight:800; }
.hc-cta p{ margin:0; font-size:14px; line-height:1.75; color:var(--hc-text-2); }
.hc-cta-acts{ display:flex; flex-wrap:wrap; gap:10px; }
.hc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:14px; font:inherit; font-size:14px; font-weight:800; cursor:pointer;
  color:var(--hc-text); background:var(--hc-surface); border:1px solid var(--hc-border); transition:transform .2s, border-color .2s; }
.hc-btn:hover{ transform:translateY(-2px); border-color:var(--hc-accent); }
.hc-btn--primary{ color:var(--hc-ink); background:var(--hc-accent); border-color:var(--hc-accent); }
.hc-btn--primary:hover{ background:var(--hc-accent-strong); }
@media (max-width:820px){ .hc-cta{ grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; } .hc-cta-acts{ justify-content:center; } }

.hc-empty{ text-align:center; padding:clamp(28px,5vw,48px) 16px; border-radius:var(--hc-r-lg); background:var(--hc-surface); border:1px dashed var(--hc-border-2); }
.hc-empty h2{ margin:0 0 8px; font-size:16.5px; }
.hc-empty p{ max-width:52ch; margin:0 auto 14px; font-size:14px; line-height:1.75; color:var(--hc-text-2); }
.hc-empty ul{ display:inline-block; margin:0 0 6px; text-align:start; font-size:13.5px; line-height:1.9; color:var(--hc-text-2); }

/* ══ INNER PAGES · head ══ */
.hc-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 18px; padding:0; list-style:none; font-size:13.5px; color:var(--hc-muted); }
.hc-crumbs a:hover{ color:var(--hc-accent); }
.hc-crumbs li + li::before{ content:'/'; margin-inline-end:6px; color:var(--hc-border-2); }
.hc-crumbs [aria-current]{ font-weight:700; color:var(--hc-text-2); }
.hc-pagehead{ position:relative; padding-block:clamp(32px,4.5vw,64px) clamp(26px,3.5vw,44px); }
.hc-pagehead-row{ display:flex; align-items:center; gap:22px; }
.hc-pagehead .hc-ico{ width:84px; height:84px; border-radius:26px; color:var(--hc-ink); background:var(--hc-accent); animation:hc-bob 5s ease-in-out infinite; }
.hc-pagehead .hc-ico svg{ width:38px; height:38px; }
.hc-pagehead h1{ margin:0 0 8px; font-size:clamp(25px,3.48vw,43px); font-weight:800; line-height:1.15; letter-spacing:-.02em; }
.hc-pagehead p{ margin:0; max-width:70ch; font-size:14.5px; line-height:1.75; color:var(--hc-text-2); }
.hc-pagehead__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.hc-pagehead__search{ margin-top:26px; max-width:720px; }

/* two-column layout with a rail on the start side */
.hc-cols{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:start; padding-block:8px clamp(48px,7vw,88px); }
.hc-cols > .hc-side{ order:-1; }
.hc-side{ position:sticky; top:var(--hc-stick); display:grid; gap:16px; max-height:calc(100vh - var(--hc-stick) - 16px); overflow-y:auto;
  overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--hc-border) transparent; }
.hc-card{ padding:18px; border-radius:var(--hc-r); background:var(--hc-surface); border:1px solid var(--hc-border); }
.hc-card h2, .hc-card h3{ margin:0 0 12px; font-size:14px; font-weight:800; }
.hc-side-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.hc-side-list a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; font-size:13.5px; color:var(--hc-text-2); transition:background-color .2s, color .2s; }
.hc-side-list a span{ flex:1; min-width:0; }
.hc-side-list a svg{ width:16px; height:16px; flex:none; color:var(--hc-accent); }
.hc-side-list a:hover{ background:var(--hc-surface-2); color:var(--hc-text); }
.hc-side-list a.is-active{ background:var(--hc-accent-soft); color:var(--hc-accent); font-weight:800; }
.hc-side-list small{ font-size:12px; font-weight:700; color:var(--hc-muted); }

/* article cards in lists (category / suggestions) */
.hc-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:14px; }
.hc-list--one{ grid-template-columns:minmax(0,1fr); counter-reset:hci; }
.hc-item{ position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 20px; border-radius:var(--hc-r); background:var(--hc-surface); border:1px solid var(--hc-border);
  transition:border-color .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.hc-list--one .hc-item{ counter-increment:hci; padding-inline-start:74px; }
.hc-list--one .hc-item::before{ content:counter(hci); position:absolute; inset-inline-start:18px; inset-block-start:18px; width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; font-weight:800; color:var(--hc-accent); background:var(--hc-accent-soft); transition:background-color .3s, color .3s; }
.hc-item:hover{ border-color:color-mix(in srgb,var(--hc-accent) 50%,var(--hc-border)); transform:translateY(-3px); }
.hc-list--one .hc-item:hover::before{ color:var(--hc-ink); background:var(--hc-accent); }
.hc-item-title{ margin:0; font-size:14px; font-weight:800; line-height:1.5; }
.hc-item-title a::after{ content:''; position:absolute; inset:0; border-radius:inherit; }
.hc-item-sum{ margin:0; font-size:13.5px; line-height:1.75; color:var(--hc-text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hc-item-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:2px; font-size:12.5px; color:var(--hc-muted); }
.hc-item-meta a{ position:relative; z-index:1; }
.hc-gap-top{ margin-block-start:18px; }

/* search results */
.hc-results-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-block-end:14px; }
.hc-results-count{ margin:0; font-size:14px; color:var(--hc-muted); }
.hc-results-count strong{ color:var(--hc-text); }
.hc-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:16px; }
.hc-results{ display:grid; gap:12px; }
.hc-result{ position:relative; padding:18px 20px; border-radius:var(--hc-r); background:var(--hc-surface); border:1px solid var(--hc-border); transition:border-color .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.hc-result:hover{ border-color:color-mix(in srgb,var(--hc-accent) 50%,var(--hc-border)); transform:translateY(-3px); }
.hc-result-title{ margin:0 0 6px; font-size:14.5px; font-weight:800; line-height:1.5; }
.hc-result-title a::after{ content:''; position:absolute; inset:0; border-radius:inherit; }
.hc-result-snip{ margin:0 0 10px; font-size:14px; line-height:1.8; color:var(--hc-text-2); }
.hc-result .hc-item-meta a{ position:relative; z-index:1; }

/* pagination */
.hc-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-block-start:28px; padding:0; list-style:none; }
.hc-pager a, .hc-pager span{ min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border-radius:12px;
  font-size:13.5px; font-weight:700; color:var(--hc-text-2); background:var(--hc-surface); border:1px solid var(--hc-border); }
.hc-pager a:hover{ border-color:var(--hc-accent); color:var(--hc-accent); }
.hc-pager [aria-current]{ color:var(--hc-ink); background:var(--hc-accent); border-color:var(--hc-accent); }
.hc-pager .is-disabled{ opacity:.45; }

/* ══ ARTICLE ══ */
.hc-progress{ position:fixed; z-index:60; inset-inline:0; inset-block-start:0; height:3px; pointer-events:none; }
.hc-progress i{ display:block; height:100%; width:var(--hc-read,0%); background:var(--hc-accent); border-start-end-radius:3px; border-end-end-radius:3px; }
.hc-art-grid{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start; padding-block:clamp(28px,4vw,48px) clamp(48px,7vw,96px); }
.hc-art-side{ order:-1; }
.hc-art{ min-width:0; max-width:820px; }
.hc-art-head{ margin-block-end:26px; padding-block-end:24px; border-block-end:1px dashed var(--hc-border); }
.hc-art-title{ margin:6px 0 14px; font-size:clamp(23px,3.15vw,38px); font-weight:800; line-height:1.22; letter-spacing:-.015em; text-wrap:balance; }
.hc-art-lead{ margin:0 0 18px; font-size:clamp(14px,1.32vw,15.5px); line-height:1.85; color:var(--hc-text-2); }
.hc-art-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.hc-art-meta span{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:99px; font-size:13px; font-weight:700; color:var(--hc-text-2);
  background:var(--hc-surface); border:1px solid var(--hc-border); }
.hc-art-meta svg{ width:14px; height:14px; color:var(--hc-accent); }
.hc-notice{ display:flex; gap:10px; align-items:flex-start; margin-block-end:18px; padding:12px 14px; border-radius:12px; font-size:13.5px; line-height:1.7; color:var(--hc-note); background:var(--hc-note-bg); }
.hc-notice--warn{ color:var(--hc-warn); background:var(--hc-warn-bg); }
.hc-cover{ margin:0 0 26px; border-radius:var(--hc-r-lg); overflow:hidden; border:1px solid var(--hc-border); background:var(--hc-surface-2); }
.hc-cover img{ display:block; width:100%; height:auto; max-height:440px; object-fit:cover; }

/* article body typography */
.hc-prose{ font-size:14.5px; line-height:2; color:var(--hc-text); }
.hc-prose[lang="en"]{ font-size:14px; line-height:1.85; }
.hc-prose > *:first-child{ margin-block-start:0; }
.hc-prose p{ margin:0 0 16px; }
.hc-prose h2{ position:relative; margin:40px 0 14px; padding-inline-start:16px; font-size:clamp(17.5px,1.99vw,21.5px); font-weight:800; line-height:1.4; scroll-margin-top:var(--hc-stick); }
.hc-prose h2::before{ content:''; position:absolute; inset-inline-start:0; inset-block:.3em; width:4px; border-radius:4px; background:var(--hc-accent); }
.hc-prose h3{ margin:28px 0 10px; font-size:15.5px; font-weight:800; line-height:1.45; scroll-margin-top:var(--hc-stick); }
.hc-prose h4{ margin:20px 0 8px; font-size:14.5px; font-weight:800; }
.hc-prose a{ color:var(--hc-accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.hc-prose a:hover{ color:var(--hc-accent-strong); }
.hc-prose strong, .hc-prose b{ font-weight:800; }
.hc-prose ul, .hc-prose ol{ margin:0 0 18px; padding-inline-start:26px; }
.hc-prose li{ margin-block-end:8px; }
.hc-prose li::marker{ color:var(--hc-accent); }
.hc-prose ol > li::marker{ font-weight:800; }
.hc-prose blockquote{ margin:0 0 18px; padding:14px 18px; border-inline-start:4px solid var(--hc-accent); border-radius:0 12px 12px 0; color:var(--hc-text-2); background:var(--hc-surface-2); }
[dir="rtl"] .hc-prose blockquote{ border-radius:12px 0 0 12px; }
.hc-prose hr{ margin:30px 0; border:0; border-block-start:1px dashed var(--hc-border); }
.hc-prose img{ max-width:100%; height:auto; margin-block:6px 16px; border-radius:14px; border:1px solid var(--hc-border); }
.hc-prose code, .hc-prose kbd{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em; direction:ltr; unicode-bidi:isolate; }
.hc-prose :not(pre) > code{ padding:1px 6px; border-radius:6px; background:var(--hc-surface-2); border:1px solid var(--hc-border); }
.hc-prose kbd{ padding:1px 6px; border-radius:6px; background:var(--hc-surface); border:1px solid var(--hc-border-2); border-block-end-width:2px; }
.hc-prose pre{ direction:ltr; text-align:left; overflow-x:auto; margin:0 0 18px; padding:14px 16px; border-radius:14px; font-size:13.5px; line-height:1.7; color:#e2e8f0; background:#0f172a; }
.hc-prose pre code{ padding:0; border:0; background:none; color:inherit; font-size:inherit; }
.hc-table-wrap{ overflow-x:auto; margin:0 0 18px; border-radius:14px; border:1px solid var(--hc-border); }
.hc-table-wrap table{ width:100%; min-width:480px; border-collapse:collapse; font-size:14px; }
.hc-table-wrap th, .hc-table-wrap td{ padding:11px 14px; text-align:start; vertical-align:top; line-height:1.65; border-block-end:1px solid var(--hc-border); }
.hc-table-wrap th{ font-weight:800; background:var(--hc-surface-2); }
.hc-table-wrap tr:last-child td{ border-block-end:0; }
/* Phones: a 2-column table (field | what it does) was forced to 480px and had to be swiped
   sideways, cutting words mid-cell. Two columns fit and wrap; wider tables keep the scroll. (2026-10-05) */
@media (max-width:560px){
  .hc-table-wrap table:not(:has(tr > :nth-child(3))){ min-width:0; }
  .hc-table-wrap th, .hc-table-wrap td{ padding:10px 11px; font-size:13.5px; overflow-wrap:anywhere; }
}
/* callouts: <div class="hc-callout hc-note|hc-tip|hc-warning|hc-danger"> */
.hc-callout{ --hc-c:var(--hc-note); --hc-c-bg:var(--hc-note-bg); margin:0 0 18px; padding:14px 18px; border-radius:14px; border-inline-start:4px solid var(--hc-c); background:var(--hc-c-bg); font-size:14.5px; }
.hc-callout > *:last-child{ margin-block-end:0; }
.hc-callout.hc-tip{ --hc-c:var(--hc-tip); --hc-c-bg:var(--hc-tip-bg); }
.hc-callout.hc-warning{ --hc-c:var(--hc-warn); --hc-c-bg:var(--hc-warn-bg); }
.hc-callout.hc-danger{ --hc-c:var(--hc-danger); --hc-c-bg:var(--hc-danger-bg); }
.hc-callout > p:first-child > strong:first-child{ color:var(--hc-c); }
/* numbered steps: <ol class="hc-steps"> … or <div class="hc-steps"><ol>… */
.hc-prose ol.hc-steps, .hc-prose .hc-steps > ol{ position:relative; list-style:none; counter-reset:hcstep; padding-inline-start:0; }
.hc-prose ol.hc-steps::before, .hc-prose .hc-steps > ol::before{ content:''; position:absolute; inset-block:18px; inset-inline-start:17px; width:2px; background:var(--hc-border); }
.hc-prose ol.hc-steps > li, .hc-prose .hc-steps > ol > li{ position:relative; counter-increment:hcstep; min-height:36px; margin-block-end:16px; padding-inline-start:52px; }
.hc-prose ol.hc-steps > li::before, .hc-prose .hc-steps > ol > li::before{ content:counter(hcstep); position:absolute; inset-inline-start:0; top:0; width:36px; height:36px; display:grid; place-items:center;
  border-radius:12px; font-size:13.5px; font-weight:800; color:var(--hc-ink); background:var(--hc-accent); }

.hc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-block:30px 0; }
/* feedback */
.hc-feedback{ margin-block-start:34px; padding:26px; border-radius:var(--hc-r-lg); text-align:center; background:var(--hc-surface); border:1px solid var(--hc-border); }
.hc-feedback h2{ margin:0 0 14px; font-size:15px; font-weight:800; }
.hc-feedback form{ display:flex; justify-content:center; gap:10px; margin:0; }
.hc-feedback button{ display:inline-flex; align-items:center; gap:8px; min-width:120px; justify-content:center; padding:11px 20px; border-radius:14px; font:inherit; font-size:14px; font-weight:800; cursor:pointer;
  color:var(--hc-text); background:var(--hc-bg); border:1px solid var(--hc-border-2); transition:transform .25s cubic-bezier(.2,.9,.3,1.4), border-color .2s, background-color .2s; }
.hc-feedback button:hover{ transform:translateY(-2px) scale(1.03); border-color:var(--hc-accent); }
.hc-feedback button[aria-pressed="true"]{ color:var(--hc-ink); background:var(--hc-accent); border-color:var(--hc-accent); }
.hc-feedback-msg{ margin:14px 0 0; font-size:13.5px; color:var(--hc-good); }
.hc-feedback-msg a{ color:var(--hc-accent); text-decoration:underline; }
/* prev / next */
.hc-pn{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-block-start:22px; }
.hc-pn a{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:var(--hc-r); background:var(--hc-surface); border:1px solid var(--hc-border); transition:border-color .3s, transform .3s; }
.hc-pn a:hover{ border-color:var(--hc-accent); transform:translateY(-3px); }
.hc-pn small{ font-size:12.5px; font-weight:800; color:var(--hc-accent); }
.hc-pn strong{ font-size:14px; line-height:1.55; }
.hc-pn .is-next{ text-align:end; }
/* on-page nav */
.hc-toc{ list-style:none; margin:0; padding:0; display:grid; gap:2px; border-inline-start:2px solid var(--hc-border); }
.hc-toc a{ display:block; margin-inline-start:-2px; padding:6px 12px; border-inline-start:2px solid transparent; font-size:13.5px; line-height:1.55; color:var(--hc-text-2); transition:color .2s, border-color .2s; }
.hc-toc a:hover{ color:var(--hc-accent); }
.hc-toc a.is-current{ border-inline-start-color:var(--hc-accent); color:var(--hc-accent); font-weight:800; }
.hc-toc .lvl-3 a{ padding-inline-start:24px; font-size:13px; }
.hc-mtoc{ display:none; margin-block-end:18px; }
.hc-mtoc summary{ cursor:pointer; list-style:none; font-size:14px; font-weight:800; }
.hc-mtoc summary::-webkit-details-marker{ display:none; }
.hc-mtoc[open] summary{ margin-block-end:10px; }
.hc-preview-bar{ position:sticky; top:0; z-index:50; padding:10px 16px; text-align:center; font-size:13.5px; font-weight:700; color:#fff; background:#b45309; }

@media (max-width:1080px){ .hc-cols{ grid-template-columns:240px minmax(0,1fr); } }
@media (max-width:920px){
  .hc-art-grid, .hc-cols{ grid-template-columns:minmax(0,1fr); }
  .hc-side, .hc-art-side{ position:static; order:0; max-height:none; overflow:visible; }
  .hc-art-side .hc-toc-card{ display:none; }
  .hc-mtoc{ display:block; }
  .hc-pagehead .hc-ico{ width:64px; height:64px; border-radius:20px; } .hc-pagehead .hc-ico svg{ width:30px; height:30px; }
}
@media (max-width:560px){
  .hc-search{ padding-inline-start:14px; } .hc-search button{ padding:11px 16px; font-size:13.5px; }
  .hc-pn{ grid-template-columns:minmax(0,1fr); } .hc-pn .is-next{ text-align:start; }
  .hc-pagehead-row{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hc-list--one .hc-item{ padding-inline-start:20px; } .hc-list--one .hc-item::before{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .hc *, .hc *::before, .hc *::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media print{
  .hc-side, .hc-feedback, .hc-pn, .hc-hero .hc-search, .hc-mtoc, .hc-progress{ display:none!important; }
  .hc-art-grid{ grid-template-columns:minmax(0,1fr); }
  .hc, .hc *{ color:#000!important; background:transparent!important; }
}