/* AI Help - v3 split dashboard.
   Scoped to .aih-* classes; reuses site.css tokens (colors, sans, radius). */

.aih-section{ padding-top:clamp(2.2rem,4vw,3rem); }

/* ---------- search (base input styles; positioned in hero, see appended block) ---------- */
.aih-search__input{
  width:100%;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.85rem 1.1rem;
}
.aih-search__input::placeholder{ color:var(--gray-md); }
.aih-search__input:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }

/* ---------- dashboard grid ---------- */
.aih-dashboard{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:1.8rem;
  align-items:start;
}
@media (max-width:800px){
  .aih-dashboard{ grid-template-columns:1fr; }
}

/* ---------- sidebar ---------- */
.aih-sidebar{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.2rem;
}
.aih-sidebar__title{
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--gray-md);
  margin-bottom:.8rem;
}

.aih-all{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  width:100%;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  color:var(--navy);
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.6rem .8rem;
  margin-bottom:1rem;
  cursor:pointer;
  text-align:left;
}
.aih-all:hover{ border-color:var(--orange); }
.aih-all[aria-pressed="true"]{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.aih-all[aria-pressed="true"] .aih-count{ background:rgba(255,255,255,.18); color:#fff; }

.aih-count{
  font-size:.72rem;
  font-weight:700;
  color:var(--gray-md);
  background:var(--wash);
  border-radius:999px;
  padding:.1rem .5rem;
}

.aih-folders{ display:flex; flex-direction:column; gap:.4rem; }
.aih-folder{ border-top:1px solid var(--line-soft); padding-top:.4rem; }
.aih-folder:first-child{ border-top:0; padding-top:0; }
.aih-folder__head{ margin:0; }

.aih-folder__btn{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:700;
  color:var(--navy);
  background:transparent;
  border:0;
  border-radius:var(--radius);
  padding:.55rem .3rem;
  cursor:pointer;
  text-align:left;
}
.aih-folder__btn > span:first-child{ flex:1; }
.aih-folder__btn:hover{ color:var(--orange-dk); }
.aih-folder__btn.is-active{ color:var(--orange-dk); }

.aih-folder__caret{
  width:8px; height:8px;
  border-right:2px solid var(--gray-md);
  border-bottom:2px solid var(--gray-md);
  transform:rotate(45deg);
  transition:transform .15s var(--ease);
  flex-shrink:0;
}
.aih-folder__btn[aria-expanded="true"] .aih-folder__caret{ transform:rotate(-135deg); }

.aih-folder__list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  padding:.2rem 0 .5rem .3rem;
}
.aih-folder__list a{
  display:block;
  font-size:.88rem;
  color:var(--gray-dk);
  padding:.35rem .5rem;
  border-radius:var(--radius);
}
.aih-folder__list a:hover{
  color:var(--orange-dk);
  background:var(--wash);
  text-decoration:none;
}

/* ---------- main list ---------- */
.aih-main__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:.8rem;
  margin-bottom:1rem;
}
.aih-main__head h2{ font-size:1.3rem; }
.aih-main__count{ font-size:.85rem; color:var(--gray-md); }

.aih-rows{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }

.aih-row a{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
  color:inherit;
  text-decoration:none;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.aih-row a:hover,
.aih-row a:focus-visible{
  border-color:var(--orange);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

.aih-row__cat{
  display:block;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--orange-dk);
  margin-bottom:.3rem;
}
.aih-row__title{
  display:block;
  font-size:1.08rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:.3rem;
}
.aih-row__desc{
  display:block;
  font-size:.92rem;
  color:var(--gray-dk);
}

.aih-empty{
  text-align:center;
  color:var(--gray-md);
  padding:2.4rem 1rem;
  border:1px dashed var(--line);
}

/* ---------- article extras ---------- */
.aih-crumbs-wrap{ padding-top:1.2rem; }
.aih-overview{ margin-bottom:2.2rem; }
.aih-overview p{ font-size:1.08rem; line-height:1.75; }

.aih-cta{
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem;
  margin:2.2rem 0;
}
.aih-cta h2{ margin-bottom:.5rem; }
.aih-cta p{ margin-bottom:1rem; color:var(--gray-dk); }

.aih-back{ margin-top:1.6rem; font-weight:600; }

/* ============================================================
   AI Help - appended fixes (paste at end of ai-help.css)
   ============================================================ */

/* ---------- accordion collapse fix ----------
   ROOT CAUSE: .aih-folder__list sets `display:flex`, and a class selector
   beats the plain [hidden] attribute selector, so JS setting list.hidden=true
   never visually collapsed. Bumping specificity (class + attribute) restores it.
   The caret already flips via .aih-folder__btn[aria-expanded="true"] .aih-folder__caret. */
.aih-folder__list[hidden]{ display:none; }

/* ---------- in-hero search ----------
   The single #aih-search-input now sits in the navy page-hero, below the lead.
   White field reads on navy; full width up to a comfortable max; visible focus. */
.aih-hero-search{
  margin-top:clamp(1.1rem,2.5vw,1.6rem);
  max-width:34rem;
}
.aih-hero-search .aih-search__input{
  width:100%;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--navy);
  background:#fff;
  border:1px solid #fff;                 /* seamless on navy; no faint navy hairline */
  border-radius:var(--radius);
  padding:.9rem 1.15rem;
  box-shadow:0 1px 3px rgba(0,0,0,.22);  /* lifts the white field off the navy */
}
.aih-hero-search .aih-search__input::placeholder{ color:var(--gray-md); }
.aih-hero-search .aih-search__input:focus-visible{
  outline:3px solid var(--orange-lt);    /* orange-lt is the high-contrast accent on navy */
  outline-offset:2px;
}

/* Search no longer opens the content section, so tighten the dashboard top gap. */
.aih-section .aih-dashboard{ margin-top:0; }

/* ============================================================
   AI Help - article page rhythm (spacing, dividers, step bubbles)
   ============================================================ */

/* Breathing room under the question before "Overview" starts. */
.article__wrap h1{ margin-bottom:clamp(1.3rem,2.6vw,1.9rem); }

/* Thin rules between the article's top-level blocks. Overview is the first
   block, so it keeps a clean top edge; the CTA already has its own box. */
.article__wrap > section:not(.aih-overview):not(.aih-cta),
.article__wrap > .article__body{
  border-top:1px solid var(--line-soft);
  padding-top:clamp(1.5rem,3vw,2.1rem);
  margin-top:clamp(1.5rem,3vw,2.1rem);
}
.aih-overview{ margin-bottom:0; }

/* Space between the "Official links" heading and the first link box. */
.article__wrap .reslist{ margin-top:1.2rem; }

/* Step bubbles are 2.4rem tall while the first line of text is only ~1.6rem,
   so the circle read low against the copy. Nudging the text down by half the
   difference centers the two on each other. */
.article__wrap .steps > li{ padding-top:.4rem; }
.article__wrap .steps > li > p:last-child{ margin-bottom:0; }

/* Note callout used above the Overview on in-development topics. */
.aih-note{
  border-left:4px solid var(--orange);
  background:var(--wash);
  padding:1rem 1.2rem;
  margin:0 0 clamp(1.5rem,3vw,2.1rem);
}
.aih-note p{ margin:0; color:var(--gray-dk); }