/* Shared help stays inside its own component. Page styling applies only to guide.html. */
.task-help { color:var(--ink); line-height:1.6; }
.task-help .help-intro { margin:0 0 16px; color:var(--muted); }
.task-help .help-search-bar > label { display:block; margin-bottom:6px; font-size:12px; font-weight:650; }
.task-help .help-search-field { display:flex; align-items:center; gap:9px; padding:0 11px; border:1px solid var(--border); border-radius:9px; background:var(--panel); }
.task-help .help-search-field > .icon { width:18px; height:18px; color:var(--muted); flex-shrink:0; }
.task-help .help-search { flex:1; min-width:0; width:100%; min-height:44px; border:0; border-radius:6px; background:transparent; padding:9px 0; font:inherit; color:var(--ink); }
.task-help .help-search::placeholder { color:var(--muted); opacity:1; }
.task-help .help-search-field:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.task-help .help-search:focus { outline:0; }
.task-help .help-clear { min-height:32px; padding:4px 7px; border:0; border-radius:5px; background:var(--surface); color:var(--ink); font:inherit; font-size:12px; cursor:pointer; }
.task-help .help-search-status { margin:7px 0 16px; color:var(--muted); font-size:12px; }
.task-help .help-empty { padding:20px 16px; border:1px dashed var(--border); border-radius:8px; color:var(--muted); }
.task-help .help-topic { border:1px solid var(--border); border-radius:9px; margin:9px 0 0; overflow:hidden; }
.task-help .help-topic > summary { display:flex; align-items:center; gap:10px; min-height:46px; padding:11px 14px; background:var(--surface); font-size:13px; font-weight:650; cursor:pointer; list-style:none; }
.task-help .help-topic > summary::-webkit-details-marker { display:none; }
.task-help .help-topic > summary::after { content:'+'; flex-shrink:0; margin-left:auto; color:var(--muted); font:18px var(--mono); }
.task-help .help-topic[open] > summary::after { content:'−'; }
.task-help .help-topic > summary > .icon { width:17px; height:17px; flex-shrink:0; color:var(--muted); }
.task-help .help-topic > summary:hover { background:var(--hover); }
.task-help .help-topic > summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.task-help .help-topic-body { padding:4px 18px 12px; }
.task-help .help-topic-body > p { margin:12px 0 4px; }
.task-help .help-steps { display:grid; gap:16px; margin:16px 0 4px; padding-left:21px; }
.task-help .help-steps > li { padding-left:5px; }
.task-help .help-steps > li::marker { color:var(--muted); font-size:12px; font-weight:600; }
.task-help .help-steps strong { font-size:13px; font-weight:650; }
.task-help .help-steps p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.task-help .help-note { color:var(--muted); font-size:12px; }
.task-help .shortcut-guide h3 { font-size:14px; margin:12px 0 6px; }
.task-help .shortcut-guide dl { margin:12px 0; }
.task-help .shortcut-guide dl > div { display:grid; grid-template-columns:minmax(150px,.9fr) minmax(0,1.2fr); gap:14px; padding:10px 0; border-bottom:1px solid var(--border); }
.task-help .shortcut-guide dt, .task-help .shortcut-guide dd { margin:0; min-width:0; }
.task-help .shortcut-guide dd { color:var(--muted); font-size:12px; }
.task-help .shortcut-guide kbd { padding:0; border:0; background:transparent; white-space:normal; font:11px/1.6 var(--mono); color:var(--ink); overflow-wrap:anywhere; }
.task-help .help-options { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin:0 0 16px; padding:0 0 14px; border-bottom:1px solid var(--border); }
.task-help .help-context-choice { display:flex; align-items:center; gap:10px; cursor:pointer; }
.task-help .help-context-choice input { width:17px; height:17px; flex-shrink:0; accent-color:var(--accent); }
.task-help .help-context-choice span { display:grid; gap:2px; }
.task-help .help-context-choice strong { font-size:12px; font-weight:650; }
.task-help .help-context-choice small { max-width:34ch; color:var(--muted); font-size:11px; }
.task-help .help-guide-link { display:inline-flex; align-items:center; gap:5px; min-height:36px; font-size:12px; color:var(--accent); text-underline-offset:3px; }
.task-help .help-guide-link .icon { width:14px; height:14px; }
.task-help [hidden] { display:none !important; }
.task-help button:focus-visible, .task-help a:focus-visible, .task-help input[type=checkbox]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.guide-page {
  color-scheme:light dark;
  --bg:#eeede8; --panel:#f6f5f0; --surface:#e7e9e2; --hover:#dfe4db;
  --ink:#303632; --muted:#606c63; --border:#cbd1c6; --accent:#45695d;
  --sans:Segoe UI Variable,Segoe UI,system-ui,sans-serif;
  --mono:Cascadia Code,SFMono-Regular,Consolas,monospace;
  margin:0; background:var(--bg); color:var(--ink); font:15px/1.65 var(--sans);
}
.guide-page *, .guide-page *::before, .guide-page *::after { box-sizing:border-box; }
.guide-page .icon { width:18px; height:18px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.guide-page a { color:var(--accent); text-underline-offset:4px; }
.guide-header { display:flex; align-items:center; gap:24px; max-width:1000px; min-height:86px; margin:auto; padding:20px 32px; border-bottom:1px solid var(--border); }
.guide-brand { color:var(--ink) !important; font-size:27px; font-weight:750; letter-spacing:-1.3px; text-decoration:none; }
.guide-brand span { color:var(--accent); }
.guide-header-label { color:var(--muted); font-size:13px; }
.guide-back { margin-left:auto; font-size:13px; text-decoration:none; }
.guide-back span { margin-left:4px; }
.guide-main { max-width:800px; margin:0 auto; padding:46px 32px 56px; }
.guide-intro h1 { margin:0 0 8px; font-size:clamp(25px,4.5vw,38px); font-weight:650; line-height:1.2; letter-spacing:-1.1px; }
.guide-intro > p:last-child { margin:0; max-width:52ch; color:var(--muted); }
.guide-controls { display:flex; align-items:center; gap:10px; margin:28px 0 18px; }
.guide-controls label { color:var(--muted); font-size:13px; }
.guide-controls select { min-height:40px; padding:6px 30px 6px 12px; background:var(--panel); color:var(--ink); border:1px solid var(--border); border-radius:8px; font:inherit; font-size:13px; }
.guide-page .task-help .help-intro { font-size:13px; }
.guide-page .task-help .help-topic > summary { min-height:52px; font-size:14px; }
.guide-page .task-help .help-steps strong { font-size:14px; }
.guide-page .task-help .help-steps p, .guide-page .task-help .help-topic-body > p { font-size:14px; }
.guide-page .task-help .help-topic-body { padding:6px 22px 16px; }
.guide-footer { max-width:800px; margin:auto; padding:0 32px 28px; color:var(--muted); font-size:11px; }
.guide-page a:focus-visible, .guide-page select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media(prefers-color-scheme:dark) {
  .guide-page { --bg:#252a27; --panel:#2d332f; --surface:#303831; --hover:#3b453d; --ink:#e7e8de; --muted:#b0bbae; --border:#4b574b; --accent:#b2ccbb; }
}
@media(max-width:520px) {
  .task-help .shortcut-guide dl > div { grid-template-columns:minmax(0,1fr); gap:3px; }
  .task-help .help-topic-body { padding-inline:12px; }
  .guide-header { gap:14px; min-height:70px; padding:16px 20px; }
  .guide-header-label { font-size:11px; }
  .guide-back { font-size:12px; }
  .guide-main { padding:32px 20px 40px; }
  .guide-page .task-help .help-topic-body { padding-inline:14px; }
  .guide-footer { padding-inline:20px; }
}
@media(max-width:360px) { .guide-header-label { display:none; } }