/* practical-guides.css — RTI Wiki direct-HTML practical guides
   v2 2026-05-29: repointed to the sitewide claude-shell theme (cream surface,
   terracotta accent, Inter). Chrome (sidebar + topbar) comes from
   /static/claude-shell.{css,js}; this file styles the content column so guides
   read like native wiki articles. Loaded by every /practical-guides/* page. */

:root{
  --ink:#2b2820; --ink-soft:#4a463c; --muted:#8a8473;
  --line:#e6e1d6; --line-soft:#f0ebe0;
  --bg:#faf8f3; --soft:#f5f0e6; --card:#ffffff;
  --accent:#c94f28; --accent-soft:#fdeee5;
  --warn-bg:#fff7e6; --warn-line:#f0d9a8; --ok-bg:#eef8f0; --ok-line:#bfe3c7;
  --radius:14px; --maxw:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Background + base font come from the shell on .claude-shell pages; these are
   fallbacks so the content still reads correctly if the shell fails to load. */
body{
  margin:0;color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Breadcrumbs (mirrors the wiki-trail on native article pages) */
.breadcrumbs{font-size:14px;color:var(--muted);padding:6px 0 0}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs li:not(:last-child)::after{content:"›";margin-left:6px;color:#c2bba8}
.breadcrumbs a{color:var(--accent);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}

/* Header */
.article-header{padding:14px 0 8px}
.eyebrow{text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:700;color:var(--accent);margin:0 0 8px}
h1{font-size:30px;line-height:1.2;margin:0 0 12px;letter-spacing:-.01em;color:var(--ink)}
.lede{font-size:19px;color:var(--ink-soft);margin:0 0 12px}
.article-meta{font-size:14px;color:var(--muted);margin:0 0 4px}

/* Sections */
article h2{font-size:23px;margin:34px 0 10px;letter-spacing:-.01em;color:var(--ink)}
article h3{font-size:18px;margin:22px 0 8px;color:var(--ink)}
article p{margin:0 0 14px}
article ul,article ol{margin:0 0 16px;padding-left:22px}
article li{margin:0 0 7px}
a{color:var(--accent)}

/* Article hero media: DokuWiki/static pages emit fixed width/height
   attributes, so constrain the rendered box explicitly. */
.practical-guide,
.article-hero,
.article-hero img{
  max-width:100%;
}
.practical-guide{
  min-width:0;
  overflow-wrap:anywhere;
}
.article-hero{
  margin:18px 0 22px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--soft);
}
.article-hero img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}
.article-hero figcaption{
  margin:0;
  padding:10px 12px;
  color:var(--ink-soft);
  background:#fff;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.45;
}

/* Quick answer box */
.quick-answer{background:var(--accent-soft);border:1px solid #f6d3c2;border-radius:var(--radius);padding:18px 20px;margin:18px 0}
.quick-answer h2{margin-top:0;font-size:19px}

/* TOC */
.toc{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:20px 0}
.toc strong{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.toc ul{columns:2;column-gap:24px;margin:0;padding-left:18px;font-size:15px}
@media(max-width:560px){.toc ul{columns:1}}

/* Tables */
.table-scroll{overflow-x:auto;margin:0 0 16px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
th{background:var(--soft);font-weight:600}

/* Callouts */
.callout{border-radius:var(--radius);padding:14px 16px;margin:16px 0;font-size:16px}
.callout.warn{background:var(--warn-bg);border:1px solid var(--warn-line)}
.callout.ok{background:var(--ok-bg);border:1px solid var(--ok-line)}

/* Template box (copy-paste) */
.template-box{background:#2b2820;color:#f3eee2;border-radius:var(--radius);padding:18px 20px;margin:14px 0;font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.template-note{font-size:14px;color:var(--muted);margin:-4px 0 18px}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:12px;padding:2px 16px;margin:0 0 10px;background:var(--card)}
.faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details>p{padding-bottom:12px;margin:0}

/* Official links */
.official-links{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:22px 0}
.official-links h2{margin-top:0;font-size:19px}
.official-links ul{margin:0;padding-left:20px}

/* Related / next steps */
.related{margin:24px 0}
.related ul{padding-left:20px}

/* Ad wraps — min-height only, never clip (AdSense policy) */
.ad-wrap{max-width:100%;margin:22px 0;text-align:center;overflow:hidden}
.ad-wrap .adsbygoogle{display:block;width:100%;max-width:100%;min-height:100px}
.ad-wrap iframe{max-width:100%}

/* Footer */
.article-footer{border-top:1px solid var(--line);margin-top:34px;padding:18px 0 10px}
.disclaimer{font-size:14px;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.byline{font-size:14px;color:var(--muted);margin:14px 0}
.site-footer{border-top:1px solid var(--line);margin-top:30px;padding:24px 0;font-size:14px;color:var(--muted)}
.site-footer a{color:var(--muted);text-decoration:none;margin-right:14px}
.site-footer a:hover{color:var(--accent)}

/* Hub grid */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:18px 0}
.hub-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--ink);background:var(--card);transition:border-color .15s,transform .15s,box-shadow .15s}
.hub-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 6px 18px rgba(43,40,32,.06)}
.hub-card .cat{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:700}
.hub-card h3{margin:6px 0 4px;font-size:17px;color:var(--ink)}
.hub-card p{margin:0;font-size:14px;color:var(--muted)}
.cat-head{margin:30px 0 6px;font-size:22px;border-bottom:2px solid var(--accent-soft);padding-bottom:6px;color:var(--ink)}
.cat-head a{color:var(--ink)}

/* White reading card inside the RTI Wiki LLM shell (2026-05-29).
   When the page renders inside the cream claude-shell, lift the article
   column onto a white surface so it reads as a distinct card. Standalone
   (no-shell) render is already white, so this is shell-scoped only.
   :has() keeps it to article pages; the hub/category grids are untouched. */
body.claude-shell .claude-content > #content.wrap:has(article.practical-guide){
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  max-width:800px;
  margin:0 auto 44px;
  padding:10px 40px 36px;
  box-shadow:0 1px 2px rgba(40,38,33,.04), 0 14px 40px rgba(40,38,33,.06);
}
@media(max-width:880px){
  body.claude-shell .claude-content > #content.wrap:has(article.practical-guide){
    border-radius:16px;margin:0 auto 28px;padding:6px 18px 24px;
  }
}

/* ============================================================
   Practical Guides search (practical-guides-search.js)
   v4 2026-05-29: added client-side search/filter UI.
   Reuses --ink/--line/--card/--accent tokens + .hub-grid/.hub-card.
   ============================================================ */
.pg-search{margin:18px 0 6px}
.pg-search.pg-mini{position:relative;margin:10px 0 4px}

.pg-toprow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pg-inputwrap{position:relative;flex:1 1 320px;display:flex;align-items:center}
.pg-ico{position:absolute;left:14px;display:flex;color:var(--muted);pointer-events:none}
.pg-search-input{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 40px 12px 42px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.pg-search-input::placeholder{color:var(--muted)}
.pg-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pg-search-input::-webkit-search-cancel-button{-webkit-appearance:none}
.pg-clear{
  position:absolute;right:8px;border:0;background:transparent;cursor:pointer;
  font-size:22px;line-height:1;color:var(--muted);padding:4px 8px;border-radius:8px;display:none;
}
.pg-clear:hover{color:var(--accent);background:var(--accent-soft)}
.pg-count{font-size:14px;color:var(--muted);font-weight:600;white-space:nowrap}

/* theme chips */
.pg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px}
.pg-chip{
  font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;color:var(--ink-soft);transition:all .12s;
}
.pg-chip:hover{border-color:var(--accent)}
.pg-chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.pg-chipn{font-size:12px;font-weight:700;opacity:.7}
.pg-chip.is-active .pg-chipn{opacity:.9}

/* more filters disclosure */
.pg-morebtn{
  font:inherit;font-size:14px;cursor:pointer;background:transparent;border:0;
  color:var(--accent);padding:8px 0 0;display:inline-flex;align-items:center;gap:4px;font-weight:600;
}
.pg-caret{transition:transform .15s;display:inline-block}
.pg-morebtn.is-open .pg-caret{transform:rotate(180deg)}
.pg-filters{margin:10px 0 2px;padding:14px 16px;background:var(--soft);border:1px solid var(--line);border-radius:12px}
.pg-filters-row{margin-bottom:10px}
.pg-filters-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:8px}
.pg-sort{
  font:inherit;font-size:14px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;color:var(--ink);cursor:pointer;
}
.pg-tagcloud{display:flex;flex-wrap:wrap;gap:6px}
.pg-tag{
  font:inherit;font-size:13px;cursor:pointer;background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:4px 9px;color:var(--ink-soft);transition:all .12s;
}
.pg-tag:hover{border-color:var(--accent);color:var(--accent)}
.pg-tag.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}

/* results */
.pg-resultswrap[hidden]{display:none}
.pg-results.hub-grid{margin-top:16px}
.pg-empty{color:var(--ink-soft);background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:14px 0}
.pg-results .hub-card mark,.pg-empty mark{background:var(--accent-soft);color:var(--accent);padding:0 1px;border-radius:3px}
.pg-results .hub-card.is-sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* mini (guide/category pages): results as a dropdown panel */
.pg-search.pg-mini .pg-dropdown{
  position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:8px;
  max-height:min(70vh,560px);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 40px rgba(43,40,32,.14);padding:10px;
  display:grid;grid-template-columns:1fr;gap:8px;
}
.pg-search.pg-mini .pg-dropdown .hub-card{border-color:var(--line-soft)}
.pg-search.pg-mini .pg-resultswrap{position:absolute;left:0;right:0;top:100%}
.pg-search.pg-mini .pg-empty{position:absolute;left:0;right:0;top:100%;margin-top:8px;z-index:40}

/* selftest banner */
.pg-selftest{font-size:13px;border-radius:10px;padding:10px 14px;margin:0 0 14px;line-height:1.5}
.pg-selftest.ok{background:var(--ok-bg);border:1px solid var(--ok-line)}
.pg-selftest.fail{background:#fdecea;border:1px solid #f5b5ad}

@media(max-width:560px){
  .pg-toprow{flex-direction:column;align-items:stretch}
  .pg-count{align-self:flex-end}
}

/* ============================================================
   v5 2026-05-30: readability and visual refresh for the
   Practical Guides hub, category pages, and every guide slug.
   ============================================================ */
:root{
  --pg-blue:#123c69;
  --pg-green:#176b57;
  --pg-gold:#946315;
  --pg-red:#b6422c;
  --pg-surface:#fffdf8;
  --pg-tint:#f7f3ea;
  --pg-shadow:0 16px 42px rgba(43,40,32,.08);
  --pg-soft-shadow:0 8px 24px rgba(43,40,32,.06);
}

body.claude-shell{
  color:var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(250,248,243,0) 260px),
    var(--bg);
}

body.claude-shell .claude-content{
  padding-top:82px;
}

body.claude-shell #content.wrap{
  width:min(100%, 1180px);
  max-width:1180px;
}

body.claude-shell #content.wrap:not(:has(article.practical-guide)){
  padding-left:28px;
  padding-right:28px;
}

.breadcrumbs{
  margin:0 0 12px;
  padding:0;
}

.article-header{
  position:relative;
  margin:0 0 26px;
  padding:30px 32px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,253,248,.88)),
    radial-gradient(circle at 88% 14%, rgba(23,107,87,.13), transparent 28%),
    radial-gradient(circle at 5% 0%, rgba(201,79,40,.11), transparent 24%);
  box-shadow:var(--pg-soft-shadow);
  overflow:hidden;
}

.article-header::after{
  content:"";
  position:absolute;
  inset:auto 28px 0;
  height:4px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,var(--accent),var(--pg-green),var(--pg-blue));
  opacity:.9;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:5px 10px;
  border:1px solid rgba(201,79,40,.22);
  border-radius:999px;
  background:rgba(253,238,229,.74);
  letter-spacing:.04em;
}

h1{
  max-width:930px;
  font-size:clamp(34px, 4.6vw, 58px);
  line-height:1.03;
  letter-spacing:0;
  text-wrap:balance;
}

.lede{
  max-width:880px;
  font-size:20px;
  line-height:1.55;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-weight:600;
}

/* Hub and category browse pages */
.pg-cats{
  position:relative;
  top:auto;
  z-index:1;
  margin:14px 0 34px !important;
  padding:12px !important;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,253,248,.92);
  box-shadow:0 10px 28px rgba(43,40,32,.08);
  backdrop-filter:blur(10px);
}

.pg-cats a{
  min-height:36px;
  border-radius:9px !important;
  background:#fff !important;
}

.pg-cats a:hover,
.pg-cats a:focus{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(43,40,32,.07);
}

.pg-intent,
.pg-featured,
.pg-faq{
  border-radius:16px !important;
  box-shadow:var(--pg-soft-shadow);
}

.pg-intent{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:8px;
  background:linear-gradient(180deg,#fff,#fffaf2) !important;
}

.pg-intent ol{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:0 !important;
  list-style:none;
}

.pg-intent li{
  margin:0;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink-soft);
}

.pg-featured{
  background:linear-gradient(135deg,#f8fbff,#fffaf4) !important;
}

.pg-featured-grid{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
}

.pg-featured-grid a{
  border-radius:10px !important;
  min-height:86px;
}

section[id]{
  scroll-margin-top:150px;
}

.cat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:42px 0 14px;
  padding:0 0 12px;
  border-bottom:1px solid var(--line);
  font-size:26px;
}

.cat-head a{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.cat-head a::before{
  content:"";
  flex:0 0 12px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--pg-green));
  box-shadow:0 0 0 5px var(--accent-soft);
}

.cat-count{
  margin-left:auto;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}

.hub-grid{
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
}

.hub-card{
  position:relative;
  min-height:174px;
  border-radius:12px;
  padding:18px 18px 20px;
  border-color:#e4dccf;
  background:
    linear-gradient(180deg,#fff,#fffdf8);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}

.hub-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:12px 0 0 12px;
  background:linear-gradient(180deg,var(--accent),var(--pg-green));
  opacity:.86;
}

.hub-card:hover,
.hub-card:focus{
  border-color:#d0b69f;
  transform:translateY(-2px);
  box-shadow:var(--pg-shadow);
}

.hub-card .cat{
  display:inline-flex;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  background:var(--accent-soft);
  letter-spacing:.03em;
  white-space:normal;
}

.hub-card h3{
  margin:10px 0 8px;
  font-size:19px;
  line-height:1.28;
  text-wrap:balance;
}

.hub-card p{
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.5;
}

/* Article pages */
body.claude-shell .claude-content > #content.wrap:has(article.practical-guide){
  width:min(100%, 880px);
  max-width:880px;
  padding:14px 42px 42px;
  background:var(--pg-surface);
}

.practical-guide{
  font-size:18px;
  line-height:1.72;
}

.practical-guide section,
.practical-guide aside{
  scroll-margin-top:96px;
}

.practical-guide .article-header{
  margin-left:-12px;
  margin-right:-12px;
}

.practical-guide h1{
  font-size:clamp(32px, 4.2vw, 50px);
}

.practical-guide .lede{
  font-size:19px;
}

.quick-answer,
.facts-box,
.checklist-box,
.official-links,
.toc{
  border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.82) inset;
}

.quick-answer{
  position:relative;
  padding:20px 22px 20px 24px;
  border-color:#ecc5b2;
  background:
    linear-gradient(135deg,#fff7ef,#fffdf8);
}

.quick-answer::before{
  content:"";
  position:absolute;
  inset:16px auto 16px 0;
  width:5px;
  border-radius:0 999px 999px 0;
  background:var(--accent);
}

.quick-answer h2,
.official-links h2{
  margin-bottom:8px;
}

.toc{
  padding:16px 18px;
  background:#fff;
}

.toc ul{
  columns:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 18px;
  padding:0;
  list-style:none;
}

.toc li{
  margin:0;
}

.toc a{
  display:block;
  padding:7px 9px;
  border-radius:8px;
  color:var(--ink-soft);
  text-decoration:none;
}

.toc a:hover{
  background:var(--accent-soft);
  color:var(--accent);
}

article h2{
  margin-top:40px;
  padding-top:10px;
  border-top:1px solid var(--line-soft);
  font-size:26px;
  line-height:1.18;
  text-wrap:balance;
}

article h3{
  font-size:20px;
  line-height:1.3;
}

article p,
article li{
  color:var(--ink-soft);
}

article strong{
  color:var(--ink);
}

article ul,
article ol{
  padding-left:24px;
}

article li::marker{
  color:var(--accent);
}

#documents-checklist ul,
#documents ul,
#common-mistakes ul,
#next-action-checklist ul,
.checklist-box ul,
.facts-box ul{
  display:grid;
  gap:8px;
  padding-left:0;
  list-style:none;
}

#documents-checklist li,
#documents li,
#common-mistakes li,
#next-action-checklist li,
.checklist-box li,
.facts-box li{
  position:relative;
  margin:0;
  padding:10px 12px 10px 34px;
  border:1px solid var(--line-soft);
  border-radius:10px;
  background:#fff;
}

#documents-checklist li::before,
#documents li::before,
#common-mistakes li::before,
#next-action-checklist li::before,
.checklist-box li::before,
.facts-box li::before{
  content:"";
  position:absolute;
  left:13px;
  top:1.15em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--pg-green);
}

.template-box{
  border:0;
  box-shadow:var(--pg-soft-shadow);
}

table{
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 0 0 1px var(--line);
}

th{
  color:var(--ink);
  background:#f7f1e7;
}

td{
  background:#fff;
}

.guide-photo{
  border-radius:16px !important;
  box-shadow:var(--pg-shadow);
  aspect-ratio:16/9;
}

.guide-photo img{
  aspect-ratio:16/9;
  object-fit:cover;
  height:100%;
}

.site-footer{
  background:rgba(255,255,255,.48);
}

@media(max-width:900px){
  body.claude-shell .claude-content{
    padding-top:74px;
  }
  body.claude-shell #content.wrap,
  body.claude-shell #content.wrap:not(:has(article.practical-guide)),
  body.claude-shell .claude-content > #content.wrap:has(article.practical-guide){
    width:100%;
    max-width:100%;
    padding-left:18px;
    padding-right:18px;
  }
  .article-header{
    padding:24px 20px;
    border-radius:16px;
  }
  .practical-guide .article-header{
    margin-left:0;
    margin-right:0;
  }
  .pg-cats{
    position:relative;
    top:auto;
    max-height:230px;
    overflow:auto;
  }
  .pg-intent ol{
    grid-template-columns:1fr;
  }
  .toc ul{
    grid-template-columns:1fr;
  }
  .table-scroll{
    margin-left:-18px;
    margin-right:-18px;
    padding:0 18px;
  }
}

@media(max-width:560px){
  body{
    font-size:17px;
  }
  h1,
  .practical-guide h1{
    font-size:32px;
  }
  .lede,
  .practical-guide .lede{
    font-size:18px;
  }
  .hub-grid{
    grid-template-columns:1fr;
  }
  .hub-card{
    min-height:0;
  }
  .cat-head{
    font-size:22px;
  }
  .article-header{
    padding:22px 16px;
  }
}

/* ============================================================
   v6 2026-05-30: compatibility for direct static guide pages.
   The newest guide generator still emits the lean standalone markup
   (.site-header, .breadcrumb, main.wrap.article, .answer-box). Keep
   those pages readable even when they are opened from /recent instead
   of the DokuWiki shell.
   ============================================================ */
body:not(.claude-shell){
  color:var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(250,248,243,0) 300px),
    var(--bg);
}

body:not(.claude-shell) .site-header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line);
  background:rgba(255,253,248,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}

body:not(.claude-shell) .site-header .wrap{
  max-width:1120px;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

body:not(.claude-shell) .brand{
  color:var(--ink);
  font-size:19px;
  font-weight:800;
  text-decoration:none;
}

body:not(.claude-shell) .site-nav{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

body:not(.claude-shell) .site-nav a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 10px;
  border-radius:9px;
  color:var(--ink-soft);
  font-size:15px;
  font-weight:650;
  text-decoration:none;
}

body:not(.claude-shell) .site-nav a:hover,
body:not(.claude-shell) .site-nav a:focus{
  color:var(--accent);
  background:var(--accent-soft);
}

body:not(.claude-shell) main.wrap.article{
  max-width:860px;
  margin:28px auto 44px;
  padding:28px 42px 42px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--pg-surface);
  box-shadow:var(--pg-shadow);
  overflow:hidden;
}

body:not(.claude-shell) .breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 22px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

body:not(.claude-shell) .breadcrumb a{
  color:var(--accent);
  text-decoration:none;
}

body:not(.claude-shell) .breadcrumb a:hover{
  text-decoration:underline;
}

body:not(.claude-shell) main.article > article > h1:first-child{
  margin:0 0 14px;
  color:var(--ink);
  font-size:clamp(32px, 4.1vw, 50px);
  line-height:1.04;
  letter-spacing:0;
  text-wrap:balance;
}

body:not(.claude-shell) main.article .lede{
  margin:0 0 20px;
  color:var(--ink-soft);
  font-size:19px;
  line-height:1.58;
}

.answer-box{
  position:relative;
  margin:22px 0 26px;
  padding:20px 22px 20px 24px;
  border:1px solid #ecc5b2;
  border-radius:14px;
  background:linear-gradient(135deg,#fff7ef,#fffdf8);
  box-shadow:0 1px 0 rgba(255,255,255,.82) inset;
}

.answer-box::before{
  content:"";
  position:absolute;
  inset:16px auto 16px 0;
  width:5px;
  border-radius:0 999px 999px 0;
  background:var(--accent);
}

.answer-box h2{
  margin:0 0 8px;
  padding:0;
  border:0;
  font-size:19px;
}

.answer-box p:last-child{
  margin-bottom:0;
}

body:not(.claude-shell) details{
  margin:0 0 10px;
  padding:2px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

body:not(.claude-shell) summary{
  cursor:pointer;
  padding:12px 0;
  color:var(--ink);
  font-weight:700;
}

body:not(.claude-shell) .site-footer{
  max-width:860px;
  margin:30px auto 0;
  padding:22px 20px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
}

@media(max-width:760px){
  body:not(.claude-shell) .site-header .wrap{
    min-height:auto;
    padding-top:11px;
    padding-bottom:11px;
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  body:not(.claude-shell) .site-nav{
    width:100%;
  }

  body:not(.claude-shell) main.wrap.article{
    margin:0 auto 28px;
    padding:20px 18px 30px;
    border-left:0;
    border-right:0;
    border-radius:0;
  }

  body:not(.claude-shell) main.article > article > h1:first-child{
    font-size:32px;
  }
}

/* v6 2026-05-30: stronger hub hero, type contrast, and category/card polish. */
:root{
  --ink:#1f261f;
  --ink-soft:#384238;
  --muted:#5f675d;
  --line:#d9ded4;
  --line-soft:#edf0ea;
  --bg:#f7f8f3;
  --soft:#eef3ea;
  --accent:#9b3d22;
  --accent-soft:#f8e4d9;
  --pg-blue:#17476f;
  --pg-green:#155f4d;
  --pg-gold:#7b5b16;
}

body{
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

body.claude-shell{
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(247,248,243,0) 320px),
    radial-gradient(circle at 8% 0%, rgba(21,95,77,.10), transparent 28%),
    var(--bg);
}

body.claude-shell #content.wrap:not(:has(article.practical-guide)){
  max-width:1240px;
}

.pg-hub-hero{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(320px,.72fr);
  align-items:center;
  gap:30px;
  padding:34px;
  border-color:#d1d8cc;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,251,245,.94)),
    radial-gradient(circle at 6% 8%, rgba(155,61,34,.12), transparent 27%),
    radial-gradient(circle at 100% 100%, rgba(23,71,111,.13), transparent 32%);
}

.pg-hub-hero::after{
  inset:auto 34px 0;
}

.pg-hero-copy{
  min-width:0;
}

.pg-hub-hero h1{
  max-width:780px;
  font-size:clamp(38px,5vw,64px);
}

.pg-hub-hero .lede{
  max-width:760px;
  color:var(--ink-soft);
  font-size:21px;
  line-height:1.52;
}

.pg-help-image{
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid #cfd9cd;
  border-radius:16px;
  background:#dfe6db;
  box-shadow:0 18px 42px rgba(31,38,31,.14);
}

.pg-help-image img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  object-fit:cover;
}

.pg-help-image figcaption{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.54);
  border-radius:10px;
  color:#fff;
  background:#14201b;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  backdrop-filter:blur(8px);
}

.article-meta{
  color:#4d554c;
}

.pg-cats{
  background:rgba(255,255,255,.92);
  border-color:#d2dacd;
}

.pg-cats a{
  color:#233026 !important;
  border-color:#d8ded4 !important;
}

.pg-cats a span,
.cat-head .cat-count{
  color:#596458;
}

.pg-cats a:hover,
.pg-cats a:focus{
  color:var(--accent) !important;
  border-color:#b89480 !important;
}

.hub-card{
  border-color:#d8ded4;
  background:linear-gradient(180deg,#fff,#fbfdf8);
}

.hub-card .cat{
  color:#83341e;
  background:#f9e6dc;
}

.hub-card h3{
  color:#1f261f;
}

.hub-card p{
  color:#4b554b;
}

.pg-search-input,
.pg-sort,
.pg-chip,
.pg-tag{
  color:#233026;
  border-color:#d3dbd0;
}

.pg-search-input::placeholder{
  color:#697168;
}

.site-footer,
.disclaimer{
  color:#586257;
}

@media(max-width:980px){
  .pg-hub-hero{
    grid-template-columns:1fr;
    padding:26px;
  }
  .pg-help-image{
    max-width:720px;
  }
}

@media(max-width:560px){
  .pg-hub-hero{
    padding:22px 16px;
    gap:20px;
  }
  .pg-hub-hero h1{
    font-size:34px;
  }
  .pg-hub-hero .lede{
    font-size:18px;
  }
  .pg-help-image figcaption{
    position:static;
    border:0;
    border-top:1px solid rgba(31,38,31,.12);
    border-radius:0;
    color:#253126;
    background:#fff;
  }
}