/* ---- Help (mod/help.js) ----
   A role-aware, printable guide. Rule 8 throughout: a button name is a
   framed chip, a placeholder is a dashed frame with words in it, a search
   hit is bold + underlined — never a hue on its own. */

.help{max-width:820px; margin:0 auto; padding-bottom:40px;}
.help .lead{font-size:14.5px; line-height:1.55; margin:0 0 10px;}
.help .lead b{font-weight:650;}

/* the search row + print button */
.help .bar{display:flex; gap:8px; align-items:center; margin:8px 0 6px;}
.help .bar input, .help .bar select{flex:1; min-width:0;}
.help .bar select.help-pick{font-size:15px; min-height:40px;}   /* the topic drop-down (owner, 2026-09-04) */
.help .bar button{width:auto; flex:none; padding:0 14px;}
.help .count{font-size:12.5px; color:var(--muted); margin:0 0 12px; min-height:18px;}

/* contents: a tap list of the sections this person has */
.help .toc{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px;}
.help .toc button{width:auto; min-height:32px; padding:4px 11px; font-size:12.5px;
  border-radius:var(--r-pill); background:var(--panel);}
.help .toc button:hover{border-color:var(--accent);}

/* a section */
.help details.sec{border:1px solid var(--line); border-radius:var(--r-md); background:var(--chrome);
  margin-bottom:10px; padding:0 14px;}
.help details.sec > summary{list-style:none; cursor:pointer; padding:13px 0; display:flex;
  align-items:baseline; gap:10px;}
.help details.sec > summary::-webkit-details-marker{display:none;}
.help details.sec > summary::before{content:'+'; font-family:var(--mono); font-weight:700;
  width:18px; flex:none; color:var(--accent);}
.help details.sec[open] > summary::before{content:'\2212';}     /* minus sign */
.help details.sec > summary h3{margin:0; font-size:15px; color:var(--text); flex:1 1 auto; min-width:0;}
.help details.sec > summary .who{font-size:12px; color:var(--muted); font-family:var(--mono); flex:none;}
.help details.sec .body{padding:0 0 14px 28px;}
.help details.sec .body > p{margin:0 0 10px; font-size:14px; line-height:1.55;}

/* the steps */
.help ol.steps{margin:0 0 12px; padding-left:22px;}
.help ol.steps li{font-size:14px; line-height:1.55; margin:0 0 7px;}
.help ol.steps li::marker{font-family:var(--mono); color:var(--muted);}

/* a button name as it appears on screen */
.help kbd.b{display:inline-block; font-family:var(--mono); font-size:12.5px; font-weight:600;
  padding:1px 7px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--panel);
  color:var(--text); white-space:nowrap; vertical-align:baseline; line-height:1.5;}
/* a word the app shows (a pill, a status, a heading) */
.help i.w{font-style:normal; font-family:var(--mono); font-size:12.5px; color:var(--text);
  border-bottom:1px dotted var(--muted);}
/* something another agent is adding right now — a dashed frame with the words in it */
.help span.soon{display:inline-block; border:1.5px dashed var(--line); border-radius:var(--r-sm);
  padding:1px 8px; font-size:12.5px; color:var(--muted); font-family:var(--mono);}

/* "If it goes wrong" */
.help .wrong{border-left:3px solid var(--line); padding:6px 0 6px 12px; margin:0 0 4px;
  font-size:13.5px; line-height:1.5; color:var(--text);}
.help .wrong b{font-weight:700;}

/* a search hit inside the text: bold and underlined, not a colour */
.help mark{background:transparent; color:inherit; font-weight:700; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:2px;}

.help .none{font-size:14px; color:var(--muted); text-align:center; margin:30px 0;}
.help .foot{font-size:12px; color:var(--muted); margin-top:22px; line-height:1.5;}

@media (max-width:480px){
  .help details.sec .body{padding-left:0;}
  .help .bar{flex-wrap:wrap;}
  .help .bar button{flex:1 1 100%;}
}

/* ---- print: the guide alone, black on white, every section open ----
   The app shell fixes the page height and scrolls inside it; on paper
   everything has to flow. `html.help-open` is set by the module while it is
   mounted, so these rules never touch another screen's printout. */
@media print{
  html.help-open, html.help-open body{height:auto !important; overflow:visible !important; background:#fff !important; color:#000 !important;}
  html.help-open .screen{position:static !important; height:auto !important; overflow:visible !important; display:none;}
  html.help-open #screen-module{display:block !important;}
  html.help-open #modBar, html.help-open #toast, html.help-open .modal{display:none !important;}
  html.help-open .modroot, html.help-open .modroot > *{display:block !important; height:auto !important; overflow:visible !important;}
  html.help-open .help{max-width:none; padding:0; color:#000;}
  html.help-open .help .bar, html.help-open .help .count, html.help-open .help .toc{display:none !important;}
  html.help-open .help details.sec{border:1px solid #000; background:#fff; break-inside:avoid; page-break-inside:avoid; color:#000;}
  html.help-open .help details.sec > summary{color:#000;}
  html.help-open .help details.sec > summary::before{color:#000;}
  html.help-open .help details.sec > summary h3{color:#000;}
  html.help-open .help details.sec > summary .who{color:#333;}
  html.help-open .help kbd.b{border-color:#000; background:#fff; color:#000;}
  html.help-open .help i.w{color:#000; border-bottom-color:#000;}
  html.help-open .help span.soon{border-color:#000; color:#333;}
  html.help-open .help .wrong{border-left-color:#000; color:#000;}
  html.help-open .help .lead, html.help-open .help .foot, html.help-open .help ol.steps li, html.help-open .help .body > p{color:#000;}
  html.help-open .help .foot{color:#333;}
  html.help-open .help .print-head{display:block !important;}
}
.help .print-head{display:none; font-size:20px; font-weight:700; margin:0 0 4px;}