/* Help guide: a pop-up with plain-English instructions, used by both the public
   site and the admin area. Colours come from theme.css only. */

/* the buttons that open it */
.nav .nav-help,
.help-btn{ font:inherit; font-weight:700; font-size:.86rem; cursor:pointer; border-radius:999px; min-height:40px; padding:.5rem .95rem;
  background:transparent; color:var(--wyho-primary); border:2px solid var(--wyho-primary); display:inline-flex; align-items:center; gap:.4rem; }
.nav .nav-help:hover,.help-btn:hover{ background:var(--wyho-accent-soft); }
.nav .nav-help .q,.help-btn .q{ display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; background:var(--wyho-primary); color:#fff; font-size:.8rem; line-height:1; }
.top .help-btn{ color:#fff; border-color:#fff; }
.top .help-btn:hover{ background:rgba(255,255,255,.14); }
.top .help-btn .q{ background:#fff; color:var(--wyho-primary); }
.linklike{ background:none; border:0; padding:0; font:inherit; color:var(--wyho-cta-hover); text-decoration:underline; cursor:pointer; text-underline-offset:3px; }
.linklike:hover{ color:var(--wyho-primary); }
.help-inline{ margin:.3rem 0 1rem; font-size:.92rem; }

/* the pop-up */
dialog.help-dialog{ padding:0; border:0; width:min(780px,94vw); max-width:94vw; max-height:92vh; border-radius:var(--wyho-radius);
  background:var(--wyho-surface); color:var(--wyho-ink); font-family:var(--wyho-font-ui); box-shadow:0 20px 60px rgba(0,0,0,.4); }
dialog.help-dialog[open]{ display:flex; flex-direction:column; }
dialog.help-dialog::backdrop{ background:rgba(43,20,32,.6); }
.help-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.4rem; border-bottom:1px solid var(--wyho-line); background:var(--wyho-surface); flex:none; border-radius:var(--wyho-radius) var(--wyho-radius) 0 0; }
.help-head h2{ margin:0; font-family:var(--wyho-font-display); font-size:1.35rem; color:var(--wyho-primary); line-height:1.25; }
.help-head .btn{ flex:none; }
.help-body{ overflow:auto; padding:1.1rem 1.4rem 1.6rem; flex:1; line-height:1.65; font-size:1rem; }
.help-intro{ margin:0 0 .9rem; color:var(--wyho-ink-soft); }
.help-now{ background:var(--wyho-accent-soft); border-left:5px solid var(--wyho-cta); border-radius:var(--wyho-radius-sm); padding:.8rem 1rem; margin:0 0 1rem; }
.help-toc{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:center; margin:0 0 .6rem; font-size:.88rem; }
.help-toc > span{ font-weight:700; color:var(--wyho-ink-soft); margin-right:.2rem; }
.help-toc a{ text-decoration:none; border:1px solid var(--wyho-line); background:var(--wyho-bg); color:var(--wyho-ink); border-radius:999px; padding:.3rem .75rem; font-weight:600; }
.help-toc a:hover{ background:var(--wyho-accent-soft); }
.help-all{ margin:0 0 .8rem; font-size:.88rem; display:flex; gap:1rem; }

details.help-sec{ border:1px solid var(--wyho-line); border-radius:var(--wyho-radius-sm); margin:.55rem 0; background:#fff; }
details.help-sec[open]{ border-color:var(--wyho-cta); box-shadow:0 2px 10px rgba(59,16,39,.08); }
details.help-sec > summary{ list-style:none; cursor:pointer; padding:.85rem 3rem .85rem 1rem; font-weight:700; color:var(--wyho-primary); position:relative; min-height:44px; display:flex; align-items:center; border-radius:var(--wyho-radius-sm); }
details.help-sec > summary::-webkit-details-marker{ display:none; }
details.help-sec > summary::after{ content:"+"; position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-size:1.5rem; line-height:1; color:var(--wyho-cta); font-weight:600; }
details.help-sec[open] > summary::after{ content:"\2013"; }
details.help-sec > summary:hover{ background:var(--wyho-bg); }
.help-sec-body{ padding:.1rem 1rem 1rem; }
.help-sec-body > :first-child{ margin-top:.2rem; }
.help-sec-body p{ margin:.6rem 0; }
.help-sec-body ul,.help-sec-body ol{ margin:.5rem 0; padding-left:1.4rem; }
.help-sec-body li{ margin:.35rem 0; }
.help-sec-body h4{ margin:1rem 0 .2rem; font-size:1rem; color:var(--wyho-primary); }
.help-sec-body dl{ margin:.5rem 0; }
.help-sec-body dt{ font-weight:700; margin-top:.7rem; }
.help-sec-body dd{ margin:.15rem 0 0 0; }
.help-sec-body table{ border-collapse:collapse; width:100%; font-size:.93rem; margin:.5rem 0; }
.help-sec-body th,.help-sec-body td{ text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--wyho-line); vertical-align:top; }
.help-sec-body th{ color:var(--wyho-ink-soft); font-weight:700; width:34%; }
.help-tip,.help-warn{ border-radius:var(--wyho-radius-sm); padding:.65rem .9rem; margin:.8rem 0; font-size:.95rem; }
.help-tip{ background:#EEF5E8; border-left:5px solid var(--wyho-fresh-deep); }
.help-warn{ background:#FFF3DA; border-left:5px solid var(--wyho-gold-deep); }
.help-foot{ margin:1.2rem 0 0; font-size:.92rem; color:var(--wyho-ink-soft); }
kbd.help-key,.help-btnname{ font-family:inherit; font-weight:700; background:var(--wyho-accent-soft); border-radius:6px; padding:.05rem .45rem; white-space:nowrap; }

@media (max-width:560px){
  dialog.help-dialog{ width:100vw; max-width:100vw; max-height:100vh; height:100vh; border-radius:0; }
  .help-head,.help-body{ padding-left:1rem; padding-right:1rem; }
  .help-head{ border-radius:0; }
  .help-sec-body th{ width:40%; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }