/* 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-current="true"]{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.aih-all[aria-current="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:9999px;
  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);
  /* flat hover (SUDS): border colour only, no lift */
}

.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; }
/* inline-block + padding lifts the link from 23px to the 24px minimum target (WCAG 2.5.8), as .crumbs a does */
.aih-back a{ display:inline-block; padding:.2rem 0; }

/* ============================================================
   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;
}
/* visible label: the placeholder vanishes on typing, so it can't be the only label (WCAG 3.3.2) */
.aih-hero-search .aih-search__label{ display:block; margin-bottom:.45rem; font-size:.9rem; font-weight:700; color:#fff; }
.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;
}
.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); }

/* ============================================================
   AI Help - flexible page format (local addition, 2026-10-06)
   For pages built by scripts/render_pages.py: grouped steps, custom
   sections and small tables. Ships with the site PR.
   ============================================================ */

/* Phone overflow (claude-power-bi step 2). .steps is display:grid, so one
   unbreakable path made the grid column wider than a 375px phone, and
   body{overflow-x:hidden} clipped every step. Let step items shrink below their
   content width, and let inline code break anywhere. */
.article__wrap .steps > li{ min-width:0; }
.article__wrap code{ overflow-wrap:anywhere; }

/* Sub-headings (### in a draft): a group name above its own list. Nothing styled
   an h3 outside .article__body and the reset zeroes margins, so it touched the
   list above. Sized under the section h2; the gap above matches .steps (1.4rem),
   and the block it introduces sits closer, so the two read as one group. */
.article__wrap section > h3{ font-size:1.15rem; margin:1.4rem 0 0; }

/* Heading-to-content rhythm. The reset left every ## flush on its content (0px)
   while a ### got .8rem, so sub-headings had more room than the headings above
   them and the page read as a stack of equal blocks. Each heading now sits tight
   on what it introduces (h2 .75rem, h3 .5rem) while sections stay far apart (the
   rule and clamp() gap above), so each section reads as one group. Steps keep the
   site's 1.4rem (the 2.4rem bubbles need it), and .8rem under a ###; the links
   list keeps its 1.2rem; the help box keeps its own spacing. A ### right under
   a ## (claude-microsoft-365's first step group) gets 1rem: a little more than
   its own gap below, so it groups with its steps, not with the ## above. */
.article__wrap > section:not(.aih-cta) > h2 + :not(.steps):not(.reslist):not(h3){ margin-top:.75rem; }
.article__wrap section > h2 + h3{ margin-top:1rem; }
.article__wrap section > h3 + *{ margin-top:.5rem; }
.article__wrap section > h3 + .steps{ margin-top:.8rem; }

/* Custom sections can mix paragraphs and bullets; the reset left them touching. */
.article__wrap section > p + p,
.article__wrap section > p + .policy-list{ margin-top:.9rem; }

/* Custom-section paragraphs had no size rule and fell back to 1rem, a step under
   the bullets beside them (.policy-list li, 1.05rem). Match the bullets. The
   Overview keeps its larger lead size and the help box its own. */
.article__wrap > section:not(.aih-overview):not(.aih-cta) > p{ font-size:1.05rem; line-height:1.6; }

/* > warning in a draft: the one thing a reader must not miss (on
   claude-enterprise-seats, signing in from a country Claude doesn't support).
   A full hairline border and a light --orange tint rather than the left stripe of
   the site's .aih-note: that one is an info notice, and a warning should read as a
   different thing. Sharp corners per SUDS (--radius:0). */
.article__wrap section > .aih-warning{
  background:rgba(247,105,0,.07);
  border:1px solid rgba(247,105,0,.45);
  border-radius:var(--radius);
  padding:1rem 1.2rem;
  margin:.9rem 0;
}
.article__wrap section > .aih-warning p{ margin:0; font-size:1.05rem; line-height:1.6; }

/* Tables: privacy.html's .comparison-table look, scoped to articles.
   No min-width (privacy.html's 640px would overflow a phone). Drafts allow at
   most 3 columns. Cells wrap at spaces, and on a phone (the 480px block below)
   the table switches to a fixed layout with overflow-wrap:break-word: three
   long unbreakable words (an email address, "administrative") added up wider
   than a 375px or 320px screen, and body{overflow-x:hidden} clipped them out
   of reach. Fixed layout gives each column its share of the width, so a word
   splits only when it is longer than its column. With nothing left to scroll,
   the wrapper is NOT a scroll region (unlike .cmp-scroll in site.css): the tab
   stop a scroll box needs for keyboard users would be a dead one. */
.article__wrap .comparison-wrapper{ margin:1.2rem 0 1.25rem; }
.article__wrap .comparison-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.article__wrap .comparison-table th,
.article__wrap .comparison-table td{ text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.article__wrap .comparison-table thead th,
.article__wrap .comparison-table thead td{ color:var(--navy); border-bottom:2px solid var(--orange); }
.article__wrap .comparison-table tbody th{ font-weight:600; color:var(--navy); }
/* A table under a step or bullet belongs to that item. It sits inside the <li>
   but takes back the list's left indent (the step bubble's 3.4rem, the bullet
   list's 1.3rem), so it gets the full article width: at 375px the indent alone
   pushed a 3-column table with long words past the screen edge. */
.article__wrap li > .comparison-wrapper{ margin:.7rem 0 0; }
.article__wrap .steps > li > .comparison-wrapper{ margin-left:-3.4rem; }
.article__wrap .policy-list > li > .comparison-wrapper{ margin-left:-1.3rem; }
@media (max-width:480px){
  .article__wrap .comparison-table{ table-layout:fixed; }
  .article__wrap .comparison-table th,
  .article__wrap .comparison-table td{ padding:.6rem .5rem; overflow-wrap:break-word; }
}

/* Download button: a draft link to downloads/<file> (page 4's setup script).
   The site's own .btn (orange, navy text at 5.6:1, sharp corners) plus a
   download glyph, with the file's name and size on a second line, so it reads
   as "this saves a file", not "this opens a page". Two lines because one line
   ("Download Install-DevTools.ps1 54 KB") split mid-name and mid-size at 375px.
   display:flex makes it block-level, so it sits on its own line under the
   step it belongs to, only as wide as its text. The meta line stays
   full-strength navy (no opacity: a faded label would drop below AA). */
.article__wrap .aih-download{ display:flex; width:fit-content; max-width:100%; margin-top:.75rem; padding:.7rem 1.2rem; }
.article__wrap .aih-download__icon{ flex:none; }
.article__wrap .aih-download__text{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.article__wrap .aih-download__meta{ font-weight:400; font-size:.8rem; letter-spacing:0; overflow-wrap:anywhere; }

/* > [!NOTE] in a draft: a quieter box for reassurance or context worth setting
   apart (page 19: nobody reviews your chats, you own your content), as opposed to
   the orange .aih-warning for a risk. A light --navy tint and a thin full border
   in the same shape as the warning, so the two read as one family with
   different meanings. No side stripe (that is the site's .aih-note). */
.article__wrap section > .aih-info{
  background:rgba(0,14,84,.045);
  border:1px solid rgba(0,14,84,.2);
  border-radius:var(--radius);
  padding:1rem 1.2rem;
  margin:.9rem 0;
}
.article__wrap section > .aih-info p{ margin:0; font-size:1.05rem; line-height:1.6; }

/* #### in a draft: a dropdown (<details class="aih-details">) for steps a reader
   may not need right away (page 20's Project setup and sharing). Native
   <details>, so it opens from the keyboard and screen readers announce it with
   no script. A thin full border like the note and warning boxes, a bold navy
   label, and an orange chevron that turns down when open (transform only, and
   not at all under reduced motion). Stacked dropdowns share one border line. */
.article__wrap section > .aih-details{ border:1px solid var(--line); border-radius:var(--radius); margin:.9rem 0; }
.article__wrap section > .aih-details:has(+ .aih-details){ margin-bottom:0; }
.article__wrap section > .aih-details + .aih-details{ margin-top:-1px; }
.article__wrap .aih-details > summary{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1.1rem;
  font-weight:700; font-size:1.05rem; color:var(--navy); cursor:pointer; list-style:none; }
.article__wrap .aih-details > summary::-webkit-details-marker{ display:none; }
.article__wrap .aih-details > summary::before{ content:""; flex:none; width:.5rem; height:.5rem;
  border-right:2px solid var(--orange-dk); border-bottom:2px solid var(--orange-dk);
  transform:rotate(-45deg); transition:transform .25s var(--ease); }
.article__wrap .aih-details[open] > summary::before{ transform:rotate(45deg); }
.article__wrap .aih-details > summary:hover{ background:rgba(0,14,84,.04); }
.article__wrap .aih-details[open] > summary{ border-bottom:1px solid var(--line); }
.article__wrap .aih-details > :not(summary){ margin:1rem 1.1rem 1.1rem; }
.article__wrap .aih-details > p{ font-size:1.05rem; line-height:1.6; }
/* The rule above sets a list's left margin to 1.1rem, and lists have no padding
   (site.css resets it), so bullets would touch the border. Indent the text to
   line up with the label, which leaves the bullets under the chevron. */
.article__wrap .aih-details > ul{ margin-left:2.4rem; }
@media (prefers-reduced-motion:reduce){ .article__wrap .aih-details > summary::before{ transition:none; } }

/* ```prompt in a draft (decision Y): a prompt to copy, such as page 8's chat
   export. A light navy tint and thin full border like the note box; the text
   keeps its line breaks and wraps on a phone. The Copy prompt button is hidden
   until ai-help.js finds the browser can copy, so without script people select
   the text instead. Inside a #### dropdown it takes the dropdown's margins. */
.article__wrap .aih-prompt{ background:rgba(0,14,84,.03); border:1px solid var(--line); border-radius:var(--radius); margin:.9rem 0; }
.article__wrap .aih-prompt__text{ margin:0; padding:1rem 1.1rem; white-space:pre-wrap; overflow-wrap:anywhere;
  font:inherit; font-size:1rem; line-height:1.55; }
.article__wrap .aih-prompt__copy{ display:block; margin:0 1.1rem 1rem auto; padding:.45rem 1rem; font:inherit;
  font-size:.95rem; font-weight:700; color:var(--navy); background:#fff; border:1px solid var(--navy);
  border-radius:var(--radius); cursor:pointer; }
.article__wrap .aih-prompt__copy[hidden]{ display:none; }
/* ai-help.js un-hides the status only when a copy fails (success is shown on the button) */
.article__wrap .aih-prompt__status--shown{ display:block; margin:0 1.1rem 1rem; font-size:.9rem; color:var(--gray-dk); text-align:right; }
/* ```code (Aaron, 2026-10-16): the same box in a code font, e.g. a config file to paste. */
.article__wrap .aih-code__text{ font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; font-size:.88em; line-height:1.5; }
.article__wrap .aih-prompt__copy:hover{ background:rgba(0,14,84,.06); }
.article__wrap .aih-prompt__copy:focus-visible{ outline:2px solid var(--orange-dk); outline-offset:2px; }