/* Function guide. It shares one design with the legal pages: ../legal/legal.css, loaded first, carries the
   fonts, the light and dark colours, the top bar, the cards, the tables, the footer and the print rules.
   This file only places what the guide has and the legal pages do not: the search, the function list
   and the parts of a function article. Every colour, radius and shadow comes from legal.css. */

/* Top bar: brand, search, print and the way back, in the legal pages' bar */
.guide-search { flex: 1 1 260px; max-width: 460px; margin-left: auto; }
.guide-search input { width: 100%; height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.guide-search input::placeholder { color: var(--muted); }
.guide-search input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 0; border-color: var(--accent); }
#guidePrint { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* Function list beside the article, like the legal contents */
.guide-layout { grid-template-columns: 300px minmax(0, 1fr); }
.guide-sidebar { top: calc(var(--bar-h) + 24px); max-height: calc(100vh - var(--bar-h) - 48px); padding-right: 8px; }
.guide-sidebar-intro { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.guide-nav-group { margin: 0 0 22px; }
.guide-nav-group > h2 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.guide-nav-group > a { display: grid; gap: 2px; padding: 8px 10px 8px 14px; border-left: 2px solid var(--line); color: var(--text-2); text-decoration: none; line-height: 1.4; }
.guide-nav-group > a:hover { border-left-color: var(--accent); color: var(--accent); }
.guide-nav-group > a.active { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); border-radius: 0 8px 8px 0; }
.guide-nav-group span { font-size: 14px; font-weight: 600; }
.guide-nav-group small { color: var(--muted); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.guide-empty { margin: 18px 0; color: var(--muted); }

/* Article: the title as in the legal hero, each part as a legal section card */
#guideArticle { outline: none; }
.guide-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.guide-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 24px; }
.guide-version { padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; }
#guideArticle > section { margin: 0 0 16px; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
#guideArticle > section > h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.3; letter-spacing: -.015em; }
#guideArticle p { margin: 0 0 12px; max-width: 78ch; }
#guideArticle p:last-child { margin-bottom: 0; }
#guideArticle ul, #guideArticle ol { margin: 0; padding-left: 22px; max-width: 78ch; }
#guideArticle li { margin: 4px 0; }
#guideArticle li::marker { color: var(--accent); }
#guideArticle .purpose-detail, #guideArticle .section-intro { color: var(--muted); }
/* Purpose: the accent bar of the legal "at a glance" cards */
#guideArticle > .guide-purpose { position: relative; overflow: hidden; }
#guideArticle > .guide-purpose::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
/* The control that opened the guide: the About page's highlighted card */
#guideArticle > .selected-action { background: linear-gradient(135deg, var(--surface) 0%, var(--accent-soft) 100%); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.selected-action > span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
#guideArticle > .selected-action > h2 { margin: 6px 0 10px; color: var(--accent-strong); font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.02em; }
.selected-action-summary { font-size: 17px; color: var(--text); }
.selected-action-details { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 20px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.selected-action-details dt { color: var(--text); font-weight: 700; }
.selected-action-details dd { margin: 0; color: var(--text-2); }
/* Practical example: a quiet card, as the legal callouts */
#guideArticle > .practical-example { background: var(--surface-2); box-shadow: none; }
/* Steps: numbered like the legal sections */
.guide-steps { display: grid; gap: 16px; margin-top: 18px; }
.guide-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.guide-step-number { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
#guideArticle .guide-step h3 { margin: 4px 0 4px; font-size: 16px; }
#guideArticle .guide-step p { color: var(--muted); font-size: 14.5px; }
.guide-table-wrap { margin-top: 4px; }
.guide-table-wrap:focus-visible { outline-offset: 2px; }
/* The legal tables have no <thead>; this one does. Its first body row is a function, not a header. */
.guide-table-wrap tbody tr:first-child > th { font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--text); }
@media (min-width: 641px) {
  /* One table, so the head and the body share their column widths */
  .guide-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
  .guide-table-wrap table { display: table; margin: 0; border: 0; border-radius: 0; overflow: visible; }
  .guide-table-wrap table > thead, .guide-table-wrap table > tbody { display: table-row-group; }
  .guide-table-wrap tbody th { width: 24%; }
}
/* Related functions: pills like the version facts */
.related-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.related-links a { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.related-links a:hover { border-color: var(--accent); color: var(--accent); }
.guide-article-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.guide-article-footer p { color: var(--muted); }
.guide-article-footer a { display: inline-block; margin-top: 10px; font-weight: 600; }
.guide-noscript { max-width: 1240px; margin: 24px auto; }

@media (max-width: 900px) {
  /* Brand, print and the way back on the first row, the search under them, so the brand never wraps */
  .guide-page .legal-bar-inner { height: auto; min-height: var(--bar-h); flex-wrap: wrap; row-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .guide-page .legal-brand { margin-right: auto; }
  .guide-search { order: 2; flex: 1 0 100%; max-width: none; margin-left: 0; }
}
@media (max-width: 1023px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  /* The function list becomes a card above the article, scrolled on its own so the article stays near */
  .guide-sidebar { position: static; max-height: 46vh; overflow: auto; }
}
@media (max-width: 640px) {
  /* Brand on the first row, the search on the second, print and the way back on the third */
  .guide-search { order: 2; flex: 1 0 100%; max-width: none; margin-left: 0; }
  .guide-search input { height: 44px; font-size: 16px; }
  .guide-page .legal-back { order: 3; flex: 1 1 0; justify-content: center; }
  .guide-sidebar { max-height: 42vh; }
  .guide-nav-group > a { min-height: 44px; }
  #guideArticle > section { padding: 20px 18px; border-radius: 12px; }
  #guideArticle > section > h2 { font-size: 19px; }
  .selected-action-details { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .selected-action-details dd { margin-bottom: 10px; }
}
@media (forced-colors: active) {
  #guideArticle > section, .guide-search input, .related-links a { border: 1px solid CanvasText; }
  #guideArticle > .guide-purpose::before { background: CanvasText; }
  .guide-nav-group > a.active { border-left: 3px solid Highlight; }
}
@media print {
  .guide-sidebar, .legal-foot, #guidePrint { display: none !important; }
  #guideArticle > section { box-shadow: none; border: 0; padding: 0; margin: 0 0 14pt; background: none; }
  #guideArticle > section > h2 { break-after: avoid; }
}

/* 1.7.1: the article is drawn by script; the column holds the screen until it is, so the footer does not jump (CLS). */
.guide-main { min-height: calc(100vh - var(--bar-h, 64px)); }