/* Issues page: "Get help with a problem" landing and single-column issue page (guide.js). */
.ig-landing, .ig-issue { padding-block: var(--s6) var(--s7); }
.ig-hero { max-width: 760px; }
.ig-hero h1, .ig-issue__head h1 { font-size: var(--fs-3xl); line-height: 1.12; margin-top: var(--s2); overflow-wrap: anywhere; text-wrap: balance; }
.ig-lede { color: var(--ink-2); font-size: var(--fs-lg); margin-top: var(--s3); max-width: 62ch; }

.ig-search { margin-top: var(--s5); }
.ig-search label { display: block; font-weight: 700; font-size: var(--fs-lg); margin-bottom: var(--s2); }
.ig-search__field {
  display: flex; gap: var(--s2); align-items: center; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 6px 6px 6px 18px; box-shadow: var(--shadow-2);
}
.ig-search__field:focus-within { border-color: var(--accent-bright); box-shadow: var(--focus); }
.ig-search__field input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-lg);
  padding: 12px 0; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none;
}
.ig-search__field input::placeholder { color: #857e6c; }
.ig-search__field .btn { min-height: 48px; border-radius: 12px; }

.ig-jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.ig-jump[hidden] { display: none; }

.ig-results { margin-top: var(--s6); display: grid; gap: var(--s7); }
.ig-count, .ig-empty { color: var(--ink-2); font-size: var(--fs-lg); }
.ig-area { scroll-margin-top: 80px; }
.ig-area__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); margin-bottom: var(--s4); }
.ig-area__head h2 { font-size: var(--fs-xl); }
.ig-area__head p { color: var(--ink-3); font-size: var(--fs-sm); }
.ig-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--s3); }
.ig-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s3); min-height: 92px;
  padding: var(--s4); background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--lvl, var(--line-2));
  border-radius: var(--radius); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ig-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--lvl, var(--line-2)); }
.ig-card:focus-visible { outline: none; box-shadow: var(--focus); }
.ig-card__title { font-weight: 650; font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere; }
.ig-level {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--lvl, var(--ink-2));
  background: color-mix(in srgb, var(--lvl, var(--ink-2)) 11%, var(--card)); padding: 2px 10px; border-radius: var(--radius-pill);
}
.ig-more { margin-top: var(--s4); }
.ig-more > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: var(--s2) 0; min-height: 44px; display: flex; align-items: center; }
.ig-more > .ig-cards, .ig-more > .ig-stages { margin-top: var(--s3); }

/* Issue page: one full-width column, readable measure */
.ig-issue { max-width: 820px; }
.ig-crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s4); }
.ig-crumbs a { color: var(--ink-2); }
.ig-issue__level { margin-bottom: var(--s2); }
.ig-section { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.ig-section h2 { font-size: var(--fs-xl); margin-bottom: var(--s3); }
.ig-section h3 { font-size: var(--fs-md); margin: var(--s4) 0 var(--s2); }
.ig-section p { color: var(--ink-2); max-width: 66ch; overflow-wrap: anywhere; }
.ig-section p + p, .ig-section p + .btn { margin-top: var(--s3); }
.ig-who { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ig-who > div { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--lvl); border-radius: var(--radius); padding: var(--s4); display: grid; gap: var(--s1); align-content: start; }
.ig-who__label { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.ig-who strong { font-size: var(--fs-lg); }
.ig-rep { margin: 0; color: var(--ink); }
.ig-note { background: var(--paper-2); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); color: var(--ink-2); }
.ig-fine { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s3); }
.ig-branches, .ig-stages, .ig-sources, .ig-list { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.ig-list { list-style: disc; padding-left: 1.2em; gap: var(--s1); color: var(--ink-2); }
.ig-branches li, .ig-stages li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); }
.ig-branches p, .ig-stages p { margin-top: var(--s1); }
.ig-stages span { color: var(--ink-3); }
.ig-step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-top: var(--s3); }
.ig-step h3 { margin-top: 0; }
.ig-step--rep { border-left: 5px solid var(--lvl); }
.ig-sources li { display: grid; gap: 2px; }
.ig-sources a { font-weight: 600; overflow-wrap: anywhere; }
.ig-sources span { color: var(--ink-3); font-size: var(--fs-sm); }
.ig-learning, .ig-issue .contextual-learning-teaser { margin-top: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5); }
.ig-issue .contextual-learning-teaser > span { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); display: block; }
.ig-issue .contextual-learning-teaser button, .ig-learning button { margin-top: var(--s3); min-height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: var(--card); padding: 0 18px; font: inherit; font-weight: 600; cursor: pointer; }

@media (max-width: 600px) {
  .ig-landing, .ig-issue { padding-block: var(--s5) var(--s6); }
  .ig-search__field { padding-left: 14px; }
  .ig-search__field .btn { padding: 0 16px; }
  .ig-step { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) { .ig-card { transition: none; } .ig-card:hover { transform: none; } }
.ig-fullname { color: var(--ink-3); font-size: var(--fs-md); margin-top: var(--s2); max-width: 60ch; }
.ig-more > summary { list-style: none; }
.ig-more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--accent); font-weight: 700; line-height: 1; }
.ig-more[open] > summary::before { content: "−"; }
.ig-chip-note { color: var(--ink-3); }
.ig-jump .chip { font-size: var(--fs-sm); color: var(--ink); }
.ig-area__head p { color: var(--ink-2); }
.ig-card__meta { margin-top: auto; }
.ig-section .btn { white-space: normal; text-align: center; height: auto; min-height: 44px; padding-block: 10px; max-width: 100%; line-height: 1.3; }
.ig-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.ig-sources a { display: inline-block; padding-block: 4px; }