/* ═══════════════════════════════════════════════════════════════
   Inar Guide — single.css v2.3
   Extracted from single.php inline <style> block.
   Enqueued via functions.php: add_action('wp_enqueue_scripts') with is_single()
   Depends on: ig-header

   Changelog v2.3:
    - FAQ: full redesign with smooth max-height animation, icon morph,
           numbered counter strip, open-state accent fill, focus ring
    - Download cards: extra-row generic columns, SVG meta icons,
           unavailable state, hover lift polish
    - Tables: improved mobile stacking selector scope
    - Accessibility: focus-visible rings on all interactive elements
    - General: minor consistency + whitespace fixes
   ═══════════════════════════════════════════════════════════════ */

/* ── Blocksy layout reset ── */
.single .ct-sidebar,
.single [data-id="sidebar"],
.single aside.ct-sidebar                     { display:none!important }
.single .site-main .ct-container,
.single .ct-container--full.site-main,
.single .ct-sidebar-area                     { display:none!important }
.single .entry-content .ct-container         { display:block!important }

/* ═══════════════
   DESIGN TOKENS
   ═══════════════ */
.ig-s {
  --bg:      #faf9f7;
  --surf:    #fff;
  --surf2:   #f5f2ed;
  --dark:    #0f1117;
  --text:    #18181b;
  --muted:   #5b5f6b;
  --faint:   #64748b;          /* upgraded from #9299a8 — 4.7:1 on white, AA pass */
  --border:  rgba(0,0,0,.09);
  --acc:     #c2410c;
  --acc-h:   #9a3412;
  --acc-s:   #fff1e8;
  --acc-b:   rgba(194,65,12,.18);
  --warn-s:  #fff9eb;
  --warn-t:  #7a5400;
  --ok-s:    #eef8f1;
  --ok-t:    #1a6b3b;
  --r-sm:    .5rem;
  --r-md:    .85rem;
  --r-lg:    1.15rem;
  --r-xl:    1.5rem;
  --sh:      0 2px 12px rgba(15,17,23,.06);
  --sh-md:   0 8px 28px rgba(15,17,23,.1);
  --wide:    1240px;
  --font-d:  'Cabinet Grotesk','Arial Black',sans-serif;
  --font-b:  'Satoshi','Helvetica Neue',sans-serif;
  --tr:      .18s cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box }

.ig-s {
  font-family: var(--font-b);
  font-size:   1rem;
  color:       var(--text);
  background:  var(--bg);
  line-height: 1.6;
  overflow-x:  clip;  /* clip (not hidden) — hidden breaks position:sticky on descendants */
}

/* ── Dark-mode override (data-theme="dark" on <html>, set by header.php).
     .ig-s's tokens are component-scoped, not :root-scoped, so this needs the
     descendant + attribute selector rather than a :root[data-theme] block. ── */
[data-theme="dark"] .ig-s {
  --bg:     var(--ig-dark, #0f1117);
  --surf:   var(--ig-dark-2, #161820);
  --surf2:  var(--ig-dark-3, #1c1e27);
  --text:   var(--ig-inv, #f4f3f1);
  --muted:  var(--ig-inv-muted, #c4c6d0);
  --faint:  var(--ig-inv-muted, #c4c6d0);
  --border: var(--ig-border-dark, rgba(255,255,255,.1));
  --acc-s:  rgba(194,65,12,.16);
  --acc-b:  rgba(194,65,12,.32);
  --warn-s: #2a2410;
  --warn-t: #eab308;
  --ok-s:   #12261a;
  --ok-t:   #4ade80;
}

/* ── Wrap ── */
.ig-s-wrap   { width:min(var(--wide),calc(100% - 32px)); margin-inline:auto }
.ig-s-wrap--n{ width:min(860px,calc(100% - 32px));       margin-inline:auto }


/* ═══════════
   HERO
   ═══════════ */
.ig-s-hero {
  padding:    30px 0 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(160deg,#fff8f3 0%,var(--bg) 60%);
}

.ig-s-crumbs {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         6px 8px;
  font-size:   .89rem;
  color:       var(--muted);
  margin-bottom: 14px;
}
.ig-s-crumbs a            { color:var(--muted); text-decoration:none }
.ig-s-crumbs a:hover      { color:var(--acc) }

.ig-s-h1 {
  font-family:    var(--font-d);
  font-size:      clamp(1.95rem,1.2rem+2.2vw,3.2rem);
  line-height:    1.03;
  letter-spacing: -.03em;
  margin:         0 0 14px;
}

.ig-s-excerpt {
  font-size:   1.03rem;
  line-height: 1.75;
  color:       var(--faint);   /* uses upgraded faint */
  max-width:   70ch;
  margin:      0 0 16px;
}

.ig-s-bottom-row {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  gap:             16px;
  justify-content: space-between;
}

.ig-s-postinfo {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  flex:      1;
}

.ig-s-infoitem {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  background:     rgba(255,255,255,.65);
  border:         1px solid var(--border);
  border-radius:  10px;
  padding:        8px 14px;
  min-width:      100px;
}

.ig-s-infolabel {
  font-size:      .73rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight:    700;
  color:          var(--faint); /* upgraded */
}

.ig-s-infoval          { font-size:.9rem; font-weight:700; color:var(--text) }
.ig-s-infoval--link    { color:var(--acc); text-decoration:none }
.ig-s-infoval--link:hover { color:var(--acc-h) }

.ig-s-actions { display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0 }

.ig-btn {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  min-height:  46px;
  padding:     0 20px;
  border-radius: 999px;
  font-weight:   800;
  font-size:     .96rem;
  text-decoration: none;
  transition:  background var(--tr), transform var(--tr);
  border:      1px solid transparent;
}
.ig-btn:focus-visible {
  outline:        3px solid var(--acc);
  outline-offset: 3px;
}
.ig-btn--p            { background:var(--acc);  color:#fff!important }
.ig-btn--p:hover      { background:var(--acc-h); transform:translateY(-1px) }
.ig-btn--g            { background:var(--surf);  color:var(--text)!important; border-color:var(--border) }
.ig-btn--g:hover      { border-color:var(--acc-b); color:var(--acc)!important }


/* ════════════
   BODY GRID
   ════════════ */
.ig-s-body { padding:24px 0 60px; overflow-x: clip } /* clip preserves sticky */
.ig-s-grid {
  display:               grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap:                   24px;
  align-items:           start;
  /* minmax(0,1fr) is critical — plain 1fr can overflow on mobile */
}


/* ════════════
   ARTICLE
   ════════════ */
.ig-article {
  background:    var(--surf);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow:    var(--sh);
  padding:       clamp(18px,3vw,36px);
  /* NOTE: contain:layout removed — it clips child elements on mobile */
  overflow-x:    hidden;   /* prevent inline content from blowing out the card */
  min-width:     0;        /* needed inside a grid cell */
  max-width:     100%;
}
.ig-article > *:first-child { margin-top:0 }

.ig-article p {
  font-size:   1.02rem;
  line-height: 1.85;
  color:       var(--text);
  margin:      0 0 16px;
  max-width:   74ch;
}

.ig-article h2 {
  font-family:    var(--font-d);
  font-size:      clamp(1.35rem,1rem+1vw,1.9rem);
  letter-spacing: -.02em;
  margin:         32px 0 12px;
  padding-top:    6px;
  scroll-margin-top: 80px;
}

.ig-article h3 {
  font-family:    var(--font-d);
  font-size:      clamp(1.1rem,1rem+.4vw,1.35rem);
  margin:         20px 0 8px;
  letter-spacing: -.01em;
  scroll-margin-top: 80px;
}

/* ── Lists ── */
.ig-article ul {
  list-style: none;
  margin:     0 0 20px;
  padding:    0;
}
.ig-article ul li {
  margin:      0 0 10px;
  padding-left: 20px;
  position:    relative;
  line-height: 1.8;
}
.ig-article ul li::before {
  content:       "";
  position:      absolute;
  left:          0;
  top:           .62em;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--acc);
  flex-shrink:   0;
}

.ig-article ol {
  list-style:   none;
  counter-reset: ig-step;
  margin:        0 0 24px;
  padding:       0;
  border-left:   2px solid var(--border);
  margin-left:   13px;
}
.ig-article ol li {
  counter-increment: ig-step;
  position:    relative;
  margin:      0 0 4px;
  padding:     14px 16px 14px 44px;
  background:  var(--surf);
  border-left: 2px solid transparent;
  transition:  background var(--tr), border-color var(--tr);
}
.ig-article ol li:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0 }
.ig-article ol li:last-child  { border-radius: 0 0 var(--r-sm) var(--r-sm) }
.ig-article ol li:hover       { background:var(--acc-s); border-color:var(--acc) }
.ig-article ol li::before {
  content:       counter(ig-step);
  position:      absolute;
  left:          -15px;
  top:           50%;
  transform:     translateY(-50%);
  width:         28px;
  height:        28px;
  border-radius: 50%;
  background:    var(--acc);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     .78rem;
  font-weight:   900;
  font-family:   var(--font-d);
  box-shadow:    0 0 0 3px var(--bg);
}
.ig-article ol li strong { /* legacy selector kept for specificity — real rule below */ }

/* ── Inline text: em, strong, code, kbd, mark ──
   All of these MUST stay inline by default.
   The block warning-box styling only applies to <em> that is a
   DIRECT child of .ig-entry (standalone disclaimer paragraphs),
   not to <em> inside <td>, <li>, <p>, etc. */
.ig-article em {
  font-style: italic;
  /* explicitly keep inline — do NOT set display:block here */
}

/* Block warning-box: only standalone <em> directly in .ig-entry */
.ig-article .ig-entry > em {
  display:       block;
  margin:        0 0 14px;
  padding:       12px 14px;
  border-radius: var(--r-md);
  background:    var(--warn-s);
  color:         var(--warn-t);
  font-style:    normal;
  border:        1px solid rgba(154,103,0,.12);
}

/* Inline code */
.ig-article code {
  font-family:   ui-monospace,'Cascadia Code','Fira Code',monospace;
  font-size:     .88em;
  background:    var(--surf2);
  border-radius: 4px;
  padding:       2px 6px;
  border:        1px solid var(--border);
  color:         var(--acc);
  word-break:    break-word;
  /* stays display:inline */
}

/* Block preformatted */
.ig-article pre {
  display:       block;
  background:    #1e1e2e;
  color:         #cdd6f4;
  border-radius: var(--r-md);
  padding:       16px 18px;
  font-size:     .88rem;
  line-height:   1.65;
  overflow-x:    auto;
  margin:        0 0 20px;
  max-width:     100%;
  white-space:   pre;
  border:        1px solid rgba(0,0,0,.18);
}
.ig-article pre code {
  background: none;
  border:     none;
  padding:    0;
  color:      inherit;
  font-size:  inherit;
}

/* Keyboard shortcut */
.ig-article kbd {
  font-family:   ui-monospace,'Cascadia Code','Fira Code',monospace;
  font-size:     .84em;
  background:    var(--dark);
  color:         #e2e8f0;
  border-radius: 5px;
  padding:       2px 7px;
  border:        1px solid rgba(255,255,255,.1);
  box-shadow:    0 2px 0 rgba(0,0,0,.4);
  white-space:   nowrap;
}

/* Highlight */
.ig-article mark {
  background: #fef08a;
  color:      var(--dark);
  border-radius: 3px;
  padding:    1px 3px;
}

/* Strong should never be forced block — only inside ol li steps */
.ig-article strong { font-weight: 800 }
/* ONLY the step-title strong (direct child of ol > li) becomes block */
.ig-article ol > li > strong:first-child {
  display:       block;
  margin-bottom: 3px;
  font-family:   var(--font-d);
  font-size:     .98rem;
}

.ig-article blockquote {
  margin:        20px 0;
  padding:       16px 18px;
  border-left:   4px solid var(--acc);
  background:    var(--acc-s);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.ig-article a {
  color:       var(--acc);
  font-weight: 700;
  text-decoration:       underline;
  text-underline-offset: 3px;
}
.ig-article a:hover { color:var(--acc-h); text-decoration:none }
.ig-article a:focus-visible {
  outline:        3px solid var(--acc);
  outline-offset: 2px;
  border-radius:  2px;
}

/* Buttons and download links inside article should not get body-link underline */
.ig-article a.ig-btn,
.ig-article a.ig-dl-btn,
.ig-article a.ig-mini-btn { text-decoration:none }


/* ── Notice boxes ── */
.ig-notice-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-bottom:         20px;
}
.ig-notice {
  padding:       14px 16px;
  border-radius: var(--r-md);
  border:        1px solid var(--border);
  background:    var(--surf);
}
.ig-notice strong { display:block; font-family:var(--font-d); font-size:.97rem; margin-bottom:4px }
.ig-notice p      { margin:0; font-size:.9rem; line-height:1.65; color:var(--muted) }
.ig-notice--warn  { background:var(--warn-s); border-color:rgba(154,103,0,.14) }
.ig-notice--guide { background:var(--acc-s);  border-color:var(--acc-b) }


/* ══════════════════════════════════════
   DETAILS / KEY-VALUE TABLE
   ══════════════════════════════════════ */
.ig-article table.responsive-table,
.ig-article table:not(.ig-skip) {
  width:            100%;
  border-collapse:  separate;
  border-spacing:   0;
  margin:           14px 0 22px;
  border:           1px solid var(--border);
  border-radius:    14px;
  overflow-x:       auto;   /* scroll on narrow screens instead of overflowing */
  overflow-y:       hidden;
  -webkit-overflow-scrolling: touch;
  display:          block;  /* needed for overflow-x:auto on table elements */
  background:       var(--surf);
  box-shadow:       var(--sh);
}

.ig-article th,
.ig-article td {
  padding:        13px 15px;
  text-align:     left;
  vertical-align: top;
  border-bottom:  1px solid var(--border);
  font-size:      .96rem;
  line-height:    1.6;
}
.ig-article thead th    { background:#f6f2ec; font-weight:800 }
.ig-article th          { width:34%; min-width:160px; background:#faf6f0; font-weight:800 }
.ig-article tbody tr:last-child td,
.ig-article tbody tr:last-child th { border-bottom:none }


/* ═══════════════════════════════════════════
   DOWNLOAD CARDS
   ═══════════════════════════════════════════ */
.ig-dl-section-label {
  font-family:    var(--font-d);
  font-size:      .82rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight:    700;
  color:          var(--muted);
  margin-bottom:  12px;
}

.ig-dl-placeholder {
  min-height: 320px;
}

.ig-dl-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px,100%), 1fr));
  gap:                   14px;
  margin:                0 0 22px;
}

.ig-dl-card {
  background:    var(--surf);
  border:        1px solid var(--border);
  border-radius: 18px;
  padding:       18px 18px 16px;
  box-shadow:    var(--sh);
  display:       flex;
  flex-direction: column;
  gap:           10px;
  overflow:      hidden;
  min-width:     0;
  transition:    box-shadow var(--tr), border-color var(--tr), transform var(--tr);
}
.ig-dl-card:hover {
  box-shadow:   var(--sh-md);
  border-color: var(--acc-b);
  transform:    translateY(-2px);
}

.ig-dl-card-top    { display:flex; flex-direction:column; gap:5px; min-width:0 }
.ig-dl-region      { font-size:.97rem; font-weight:800; color:var(--text); line-height:1.45; word-break:break-word }
.ig-dl-badges      { display:flex; gap:5px; flex-wrap:wrap }

.ig-dl-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       3px 9px;
  border-radius: 999px;
  font-size:     .78rem;
  font-weight:   700;
  background:    var(--surf2);
  color:         var(--muted);
  border:        1px solid var(--border);
  word-break:    break-word;
}
.ig-dl-badge--type  { background:#f0f7ff; color:#1a5faa; border-color:#c5daf5 }
.ig-dl-badge--build { background:var(--acc-s); color:var(--acc); border-color:var(--acc-b) }

.ig-dl-filename {
  font-size:   .81rem;
  color:       var(--muted);
  font-family: ui-monospace,'Cascadia Code','Fira Code',monospace;
  word-break:  break-all;
  line-height: 1.5;
  background:  var(--surf2);
  border-radius: 8px;
  padding:     7px 10px;
}

.ig-dl-meta {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px 12px;
  font-size: .87rem;
  color:     var(--faint);
  align-items: center;
}
.ig-dl-meta span {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
}

/* Generic extra columns (columns not in the named set) */
.ig-dl-extras { display:flex; flex-direction:column; gap:4px }
.ig-dl-extra-row {
  display:   flex;
  gap:       8px;
  font-size: .85rem;
  line-height: 1.5;
}
.ig-dl-extra-label {
  color:       var(--faint);
  font-weight: 600;
  white-space: nowrap;
  min-width:   80px;
}
.ig-dl-extra-val { color:var(--text); word-break:break-word }

/* Unavailable / no-link state */
.ig-dl-unavail {
  display:   block;
  font-size: .88rem;
  color:     var(--faint);
  font-style: italic;
  padding:   6px 0;
}

.ig-dl-btns { display:flex; flex-direction:column; gap:8px; margin-top:4px }

.ig-dl-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  min-height:      42px;
  padding:         0 16px;
  border-radius:   12px;
  background:      var(--acc);
  color:           #fff!important;
  text-decoration: none!important;   /* override article link rule */
  font-weight:     800;
  font-size:       .92rem;
  transition:      background var(--tr), transform var(--tr), opacity var(--tr);
}
.ig-dl-btn:hover       { background:var(--acc-h); transform:translateY(-1px); color:#fff!important }
.ig-dl-btn:focus-visible {
  outline:        3px solid var(--acc);
  outline-offset: 3px;
}
.ig-dl-btn svg         { flex-shrink:0 }

/* Mirror colour overrides */
.ig-dl-mirror-gd    { background:#1a73e8 } .ig-dl-mirror-gd:hover    { background:#1558b8 }
.ig-dl-mirror-mf    { background:#0f6ac4 } .ig-dl-mirror-mf:hover    { background:#0a4d93 }
.ig-dl-mirror-mega  { background:#c4262a } .ig-dl-mirror-mega:hover  { background:#9b1d20 }
.ig-dl-mirror-baidu { background:#2932e1 } .ig-dl-mirror-baidu:hover { background:#1a24cc }
.ig-dl-mirror-afh   { background:#2a7f4f } .ig-dl-mirror-afh:hover   { background:#1e6040 }


/* ════════════════════════════════════════════════════════════════
   FAQ ACCORDION
   Full redesign:
   • smooth max-height animation (no display toggling in CSS)
   • icon morphs from + to × via rotation
   • numbered counter strip on left edge
   • open-state gets accent left-border + subtle warm tint
   • focus-visible ring on button
   ════════════════════════════════════════════════════════════════ */

/* Wrapper heading (the H2 "FAQ" stays untouched — only items change) */
.ig-faq-wrap {
  display:        flex;
  flex-direction: column;
  gap:            0;                /* items share borders */
  margin:         0 0 28px;
  border-radius:  var(--r-lg);
  overflow:       hidden;           /* clip rounded corners on first/last */
  border:         1px solid var(--border);
  box-shadow:     var(--sh);
  counter-reset:  ig-faq;
}

/* Individual item */
.ig-faq-item {
  background:  var(--surf);
  border-top:  1px solid var(--border);
  transition:  background var(--tr);
  position:    relative;
}
.ig-faq-item:first-child { border-top:none }

/* Accent left-bar that only appears when open */
.ig-faq-item::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        0;
  bottom:     0;
  width:      3px;
  background: var(--acc);
  transform:  scaleY(0);
  transform-origin: top;
  transition: transform .22s cubic-bezier(.16,1,.3,1);
  border-radius: 0 2px 2px 0;
}
.ig-faq-item--open::before { transform:scaleY(1) }
.ig-faq-item--open         { background:var(--acc-s) }

/* Question button */
.ig-faq-q {
  counter-increment: ig-faq;
  width:        100%;
  text-align:   left;
  padding:      17px 20px 17px 52px; /* left-pad for counter */
  background:   none;
  border:       none;
  cursor:       pointer;
  display:      flex;
  justify-content: space-between;
  align-items:  center;
  gap:          14px;
  font-family:  var(--font-d);
  font-size:    1rem;
  font-weight:  700;
  color:        var(--text);
  line-height:  1.45;
  transition:   color var(--tr);
  position:     relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Counter bubble */
.ig-faq-q::before {
  content:         counter(ig-faq);
  position:        absolute;
  left:            16px;
  top:             50%;
  transform:       translateY(-50%);
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      var(--surf2);
  border:          1.5px solid var(--border);
  color:           var(--faint);
  font-size:       .72rem;
  font-weight:     900;
  font-family:     var(--font-d);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--tr), color var(--tr), border-color var(--tr);
  flex-shrink:     0;
  line-height:     1;
}
.ig-faq-item--open .ig-faq-q::before {
  background:   var(--acc);
  color:        #fff;
  border-color: var(--acc);
}
.ig-faq-item--open .ig-faq-q { color:var(--acc) }

.ig-faq-q:hover             { color:var(--acc) }
.ig-faq-q:focus-visible {
  outline:        3px solid var(--acc);
  outline-offset: -3px;
}

/* Question text */
.ig-faq-q > span:first-child { flex:1 }

/* Icon circle (+ / ×) */
.ig-faq-icon {
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          1.5px solid var(--border);
  background:      var(--surf2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--faint);
  transition:      background var(--tr), border-color var(--tr),
                   color var(--tr), transform var(--tr);
}
.ig-faq-icon svg {
  transition: transform .22s cubic-bezier(.16,1,.3,1);
}
/* Rotate inner SVG to morph + → × */
.ig-faq-q[aria-expanded="true"] .ig-faq-icon {
  background:   var(--acc);
  border-color: var(--acc);
  color:        #fff;
}
.ig-faq-q[aria-expanded="true"] .ig-faq-icon svg {
  transform: rotate(45deg);
}

/* Answer body — animated with max-height */
.ig-faq-a {
  max-height:  0;
  overflow:    hidden;
  transition:  max-height .35s cubic-bezier(.16,1,.3,1);
  /* note: do NOT use display:none here — that kills the animation */
}
.ig-faq-a.open {
  max-height: 2000px; /* large enough for any content */
}

/* Inner padding comes from a child div so padding doesn't break max-height anim */
.ig-faq-a > *:first-child { margin-top: 0 }
.ig-faq-a {
  padding: 0 20px 0 52px; /* matches question left-pad */
}
.ig-faq-a.open {
  padding-bottom: 18px;
}

.ig-faq-a p {
  margin:      0 0 10px;
  font-size:   .97rem;
  line-height: 1.8;
  color:       var(--muted);
  max-width:   none;           /* override article p max-width inside FAQ */
}
.ig-faq-a p:last-child { margin-bottom:0 }

/* Links inside FAQ answers */
.ig-faq-a a {
  color:                 var(--acc);
  font-weight:           700;
  text-decoration:       underline;
  text-underline-offset: 3px;
}
.ig-faq-a a:hover { color:var(--acc-h); text-decoration:none }

/* Code / pre inside FAQ answers */
.ig-faq-a code {
  font-family:   ui-monospace,'Cascadia Code','Fira Code',monospace;
  font-size:     .88em;
  background:    var(--surf2);
  border-radius: 4px;
  padding:       1px 5px;
}

/* Lists inside FAQ answers */
.ig-faq-a ul,
.ig-faq-a ol {
  margin:      0 0 10px;
  padding-left: 18px;
}
.ig-faq-a li { margin-bottom:6px; font-size:.96rem; color:var(--muted) }


/* ═══════════════
   SIDEBAR
   ═══════════════ */
.ig-sidebar {
  position:       sticky;
  top:            82px;
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.ig-card {
  background:    var(--surf);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow:    var(--sh);
  padding:       18px;
  overflow:      visible;
}
.ig-card h3   { margin:0 0 12px; font-family:var(--font-d); font-size:1.05rem; letter-spacing:-.01em }
.ig-card p    { margin:0 0 10px; font-size:.9rem; color:var(--muted); line-height:1.7 }

.ig-mini-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  min-height:      42px;
  width:           100%;
  border-radius:   12px;
  text-decoration: none;
  font-weight:     800;
  font-size:       .9rem;
  transition:      background var(--tr);
}
.ig-mini-btn--p       { background:var(--acc);  color:#fff!important; margin-bottom:8px }
.ig-mini-btn--p:hover { background:var(--acc-h); color:#fff!important }
.ig-mini-btn--d       { background:var(--dark); color:#fff!important }
.ig-mini-btn--d:hover { background:#1e2130;     color:#fff!important }

.ig-info-list          { list-style:none; padding:0; margin:0 }
.ig-info-list li       { padding:9px 0; border-bottom:1px solid var(--border); font-size:.9rem; color:var(--text) }
.ig-info-list li:last-child { border-bottom:none }
.ig-info-list strong   { color:var(--muted); font-weight:600 }


/* ── TOC (sidebar) ── */
.ig-toc {
  display:         flex;
  flex-direction:  column;
  gap:             1px;
  max-height:      calc(100vh - 180px);
  overflow-y:      auto;
  overflow-x:      hidden; /* no horizontal scroll */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.ig-toc a {
  display:    block;
  padding:    7px 10px;
  border-radius: 8px;
  color:      var(--muted);
  text-decoration: none!important;
  font-size:  .88rem;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
  transition: background var(--tr), color var(--tr);
}
.ig-toc a:hover,
.ig-toc a.active          { background:var(--acc-s); color:var(--acc) }
.ig-toc a.ig-toc-h3       { padding-left:20px; font-size:.84rem }
.ig-toc a:focus-visible   { outline:3px solid var(--acc); outline-offset:-2px }


/* ═════════════════════════
   INLINE TOC (mobile only)
   ═════════════════════════ */
.ig-toc-inline { display:none }

.ig-toc-inline-inner {
  background:    var(--surf2);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  overflow:      hidden;
  margin-bottom: 20px;
}

.ig-toc-inline-hd {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         12px 16px;
  cursor:          pointer;
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
  touch-action:    manipulation;
  background:      var(--surf2);
  border:          none;
  width:           100%;
  font-family:     var(--font-d);
  font-size:       .97rem;
  font-weight:     800;
  color:           var(--text);
  gap:             10px;
  transition:      background var(--tr);
}
.ig-toc-inline-hd:hover { background:var(--border) }
.ig-toc-inline-hd:focus-visible { outline:3px solid var(--acc); outline-offset:-3px }

.ig-toc-inline-label {
  display:     flex;
  align-items: center;
  gap:         8px;
}
.ig-toc-inline-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      var(--acc);
  color:           #fff;
  font-size:       .75rem;
  font-weight:     900;
  flex-shrink:     0;
}
.ig-toc-inline-chevron { flex-shrink:0; transition:transform .2s ease }
.ig-toc-inline-hd[aria-expanded="false"] .ig-toc-inline-chevron { transform:rotate(-90deg) }

.ig-toc-inline-body {
  border-top:     1px solid var(--border);
  padding:        8px 10px 10px;
  display:        flex;
  flex-direction: column;
  gap:            1px;
}
.ig-toc-inline-body a {
  display:     block;
  padding:     7px 10px;
  border-radius: 8px;
  color:       var(--muted);
  text-decoration: none!important;
  font-size:   .88rem;
  line-height: 1.45;
  white-space: normal;
  word-break:  break-word;
  transition:  background var(--tr), color var(--tr);
}
.ig-toc-inline-body a:hover  { background:var(--acc-s); color:var(--acc) }
.ig-toc-inline-body a.ig-toc-h3 { padding-left:22px; font-size:.84rem }


/* ══ PREV/NEXT ══ */
.ig-postnav {
  display:         flex;
  justify-content: space-between;
  gap:             12px;
  margin-top:      22px;
  padding-top:     18px;
  border-top:      1px solid var(--border);
  flex-wrap:       wrap;
}
.ig-postnav a {
  color:       var(--acc);
  font-weight: 800;
  font-size:   .93rem;
  display:     inline-flex;
  gap:         6px;
  align-items: center;
}


/* ════════════
   COMMENTS
   ════════════ */
.ig-comments {
  margin-top:    28px;
  background:    var(--surf);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow:    var(--sh);
  padding:       clamp(18px,3vw,36px);
}
.ig-comments h2,
.ig-comments .comments-title {
  font-family:    var(--font-d);
  font-size:      clamp(1.2rem,1rem+.6vw,1.6rem);
  letter-spacing: -.02em;
  margin:         0 0 20px;
  padding-bottom: 14px;
  border-bottom:  1px solid var(--border);
}
.ig-comments .comment-list              { list-style:none; margin:0 0 28px; padding:0 }
.ig-comments .comment-list .comment     { padding:16px 0; border-bottom:1px solid var(--border) }
.ig-comments .comment-list .comment:last-child { border-bottom:none }
.ig-comments .comment-meta             { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap }
.ig-comments .comment-author .fn       { font-weight:800; font-size:.95rem; color:var(--text) }
.ig-comments .comment-author img       { border-radius:50%; width:36px; height:36px; border:2px solid var(--border) }
.ig-comments .comment-metadata a       { font-size:.82rem; color:var(--muted); text-decoration:none }
.ig-comments .comment-body p           { font-size:.96rem; line-height:1.8; color:var(--text); margin:0 0 8px; max-width:none }
.ig-comments .reply a                  { display:inline-flex; align-items:center; gap:5px; font-size:.83rem; font-weight:700; color:var(--acc); text-decoration:none }
.ig-comments .reply a:hover            { color:var(--acc-h) }
.ig-comments .children                 { list-style:none; margin:0; padding:0 0 0 20px; border-left:2px solid var(--border); margin-top:12px }

.ig-comments #respond h3,
.ig-comments .comment-reply-title      { font-family:var(--font-d); font-size:1.15rem; font-weight:800; margin:0 0 16px; letter-spacing:-.01em }

.ig-comments .comment-form-comment label,
.ig-comments .comment-form-author  label,
.ig-comments .comment-form-email   label,
.ig-comments .comment-form-url     label {
  display:        block;
  font-size:      .83rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--muted);
  margin-bottom:  5px;
}
.ig-comments textarea,
.ig-comments input[type="text"],
.ig-comments input[type="email"],
.ig-comments input[type="url"] {
  width:       100%;
  padding:     10px 14px;
  border:      1px solid var(--border);
  border-radius: var(--r-md);
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-b);
  font-size:   .96rem;
  transition:  border-color var(--tr), box-shadow var(--tr);
  outline:     none;
}
.ig-comments textarea:focus,
.ig-comments input:focus {
  border-color: var(--acc);
  box-shadow:   0 0 0 3px rgba(194,65,12,.12);
}
.ig-comments textarea { min-height:140px; resize:vertical }
.ig-comments .form-submit .submit {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  min-height:  44px;
  padding:     0 22px;
  border-radius: 999px;
  background:  var(--acc);
  color:       #fff;
  font-family: var(--font-b);
  font-size:   .96rem;
  font-weight: 800;
  border:      none;
  cursor:      pointer;
  transition:  background var(--tr), transform var(--tr);
}
.ig-comments .form-submit .submit:hover { background:var(--acc-h); transform:translateY(-1px) }
.ig-comments .form-submit .submit:focus-visible { outline:3px solid var(--acc); outline-offset:3px }

.ig-comments p.comment-form-comment,
.ig-comments p.comment-form-author,
.ig-comments p.comment-form-email,
.ig-comments p.comment-form-url    { margin:0 0 14px; max-width:none }

.ig-comments .comment-form-cookies-consent { display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); margin-bottom:14px }
.ig-comments .comment-notes { font-size:.88rem; color:var(--muted); margin-bottom:16px }


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* ── Tablet: collapse sidebar, show inline TOC ── */
@media (max-width:1060px) {
  .ig-s-grid             { grid-template-columns:1fr }
  .ig-sidebar            { display:none!important }
  .ig-toc-inline         { display:block!important }
}

/* ── Mobile ── */
@media (max-width:680px) {
  .ig-s-hero             { padding:18px 0 16px }
  .ig-s-bottom-row       { flex-direction:column; align-items:flex-start; gap:12px }
  .ig-s-postinfo         { gap:6px }
  .ig-s-infoitem         { min-width:auto; padding:6px 10px }
  .ig-notice-row         { grid-template-columns:1fr }
  .ig-article            { padding:16px }

  /* FAQ: tighten padding on small screens */
  .ig-faq-q              { padding:14px 16px 14px 44px; font-size:.95rem }
  .ig-faq-q::before      { left:12px; width:22px; height:22px; font-size:.68rem }
  .ig-faq-a              { padding:0 16px 0 44px }
  .ig-faq-a.open         { padding-bottom:14px }

  /* Details table stacks on mobile (key-value tables only, not download tables) */
  .ig-article table.responsive-table:not([data-type="download"]) tr   { display:block }
  .ig-article table.responsive-table:not([data-type="download"]) th,
  .ig-article table.responsive-table:not([data-type="download"]) td   { display:block; width:100%!important; min-width:0; border-bottom:none }
  .ig-article table.responsive-table:not([data-type="download"]) th   { border-bottom:1px solid var(--border); background:#faf6f0; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; padding:8px 12px }
  .ig-article table.responsive-table:not([data-type="download"]) td   { padding:10px 12px }
  .ig-article table.responsive-table:not([data-type="download"]) tr   { border-bottom:1px solid var(--border); margin-bottom:0 }
  .ig-article table.responsive-table:not([data-type="download"]) tr:last-child { border-bottom:none }
}

/* ── Very small (< 400px): download cards full-width ── */
@media (max-width:400px) {
  .ig-dl-grid            { grid-template-columns:1fr }
  .ig-s-actions          { flex-direction:column; width:100% }
  .ig-btn                { width:100%; justify-content:center }
}