/*
 * CAPCON — shared Help system styles.
 *
 * Pairs with /assets/capcon-help.js. Two surfaces, one stylesheet:
 *   1. the in-app slide-over Help drawer (injected into every app), and
 *   2. the standalone manuals + portal under /help/ (built by build_help.py,
 *      which links this file in its page template).
 *
 * Everything is namespaced `.cc-help*` so it never collides with an app's CSS,
 * and every value comes from the design tokens in capcon-theme.css so /config
 * retunes Help along with the rest of the platform.
 */

/* ── Top-bar Help button + per-panel "?" affordance ───────────────────────── */
/* order:1001 keeps Help at the FAR RIGHT, past the identity pill. capcon-help.js
   already inserts the button after #cc-userpill in the DOM, but that is not
   enough on its own: the top bar is display:flex and the pill carries
   `order:1000` (capcon-theme.css, "Top-bar contract"), so an unordered button
   defaults to order:0 and flex pulls it back in front of the pill — it lands
   beside the application menu instead. Anything added to the bar that must sit
   right of the pill needs an order above 1000 for the same reason.
   Inert in the bottom-right floating fallback, which is not a flex child. */
.cc-help-btn{
  order:1001;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:26px;padding:0 12px;border:1px solid var(--blue3);border-radius:var(--radius-sm);
  background:var(--blue4);color:var(--blue);font-family:var(--sans);font-size:var(--fs-sm);
  font-weight:700;letter-spacing:.3px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;white-space:nowrap;
}
.cc-help-btn:hover{color:#dfeeff;border-color:var(--blue2);background:var(--blue3)}
/* While the pill is still hidden (display:none until capcon-user.js resolves
   and adds .cc-userpill-ready) its `margin-left:auto` does nothing, so Help
   would sit against the application menu and then jump right a moment later —
   both are injected async, so either can land first. Borrow the auto margin
   until the pill can take it back; the two rules are mutually exclusive, which
   matters because TWO auto margins would split the free space and strand the
   pill mid-bar instead of at the corner. */
.cc-userpill:not(.cc-userpill-ready) ~ .cc-help-btn{margin-left:auto}
.cc-help-btn .cc-help-q{
  font-weight:800;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;border:1.5px solid currentColor;font-size:10px;line-height:1;
}

/* small round "?" badge injected next to a panel heading */
.cc-help-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-left:8px;border-radius:50%;
  border:1px solid var(--line2);background:var(--bg0);color:var(--txt3);
  font-family:var(--sans);font-size:11px;font-weight:800;font-style:italic;
  cursor:help;vertical-align:middle;transition:all .15s;user-select:none;
  position:relative;top:-1px;
}
.cc-help-dot:hover{color:var(--blue);border-color:var(--blue);background:var(--blue4)}

/* ── Drawer ───────────────────────────────────────────────────────────────── */
.cc-help-overlay{
  position:fixed;inset:0;background:rgba(4,8,14,.55);z-index:99998;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.cc-help-overlay.open{opacity:1;pointer-events:auto}

.cc-help-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(96vw, max(480px, 66.67vw));
  background:var(--panel);border-left:1px solid var(--line2);
  box-shadow:-8px 0 40px rgba(0,0,0,.5);z-index:99999;
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);
  font-family:var(--sans);color:var(--txt2);
}
.cc-help-drawer.open{transform:translateX(0)}

.cc-help-head{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg2);
}
.cc-help-head .cc-help-logo{
  width:22px;height:22px;border-radius:4px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue3),var(--blue2));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:12px;
}
.cc-help-head .cc-help-title{font-size:var(--fs-lg);font-weight:700;color:var(--txt);flex:1;min-width:0}
.cc-help-head .cc-help-title small{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--txt3);letter-spacing:.3px}
.cc-help-head .cc-help-open{
  display:inline-flex;align-items:center;height:28px;padding:0 14px;white-space:nowrap;
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;letter-spacing:.3px;
  color:var(--blue);background:var(--blue4);border:1px solid var(--blue3);
  border-radius:var(--radius-sm);text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
.cc-help-head .cc-help-open:hover{color:#dfeeff;background:var(--blue3);border-color:var(--blue2)}
.cc-help-head .cc-help-close{
  background:none;border:none;color:var(--txt3);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;
}
.cc-help-head .cc-help-close:hover{color:var(--txt)}

.cc-help-body{flex:1;display:flex;min-height:0}
.cc-help-toc{
  flex:0 0 auto;width:fit-content;max-width:38%;overflow-y:auto;
  border-right:1px solid var(--line);background:var(--bg1);padding:8px 0;
}
.cc-help-toc button{
  display:block;width:100%;text-align:left;background:none;border:none;white-space:nowrap;
  color:var(--txt2);font-family:var(--sans);font-size:var(--fs-md);font-weight:700;
  padding:7px 14px;cursor:pointer;border-left:2px solid transparent;transition:all .12s;
}
.cc-help-toc button:hover{color:var(--txt);background:var(--bg2)}
.cc-help-toc button.active{color:var(--blue);border-left-color:var(--blue);background:var(--blue4)}

.cc-help-content{flex:1;overflow-y:auto;padding:18px 22px 40px}

/* ── Rendered help content (shared by drawer + standalone manuals) ─────────── */
.cc-help-md{font-size:var(--fs-md);line-height:1.6;color:var(--txt2)}
.cc-help-md h1{font-size:var(--fs-2xl);color:var(--txt);margin:0 0 6px;font-weight:700}
.cc-help-md h2{font-size:calc(var(--font-base) + 4px);color:var(--txt);margin:22px 0 8px;font-weight:700;
  padding-bottom:5px;border-bottom:1px solid var(--line)}
.cc-help-md h3{font-size:calc(var(--font-base) + 1px);color:var(--txt);margin:18px 0 6px;font-weight:700}
.cc-help-md h4{font-size:var(--fs-md);color:var(--txt2);margin:14px 0 4px;font-weight:700;letter-spacing:.3px}
.cc-help-md p{margin:0 0 11px}
.cc-help-md ul,.cc-help-md ol{margin:0 0 12px;padding-left:22px}
.cc-help-md li{margin:3px 0}
.cc-help-md a{color:var(--blue);text-decoration:none}
.cc-help-md a:hover{text-decoration:underline}
.cc-help-md strong{color:var(--txt);font-weight:700}
.cc-help-md code{font-family:var(--mono);font-size:.88em;background:var(--bg0);
  border:1px solid var(--line);border-radius:3px;padding:1px 5px;color:var(--blue)}
.cc-help-md pre{background:var(--bg0);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;overflow-x:auto;margin:0 0 13px}
.cc-help-md pre code{background:none;border:none;padding:0;color:var(--txt2);font-size:.86em}
.cc-help-md blockquote{margin:0 0 13px;padding:10px 14px;border-left:3px solid var(--blue3);
  background:var(--blue4);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--txt2)}
.cc-help-md blockquote p:last-child{margin:0}
.cc-help-md hr{border:none;border-top:1px solid var(--line);margin:20px 0}
.cc-help-md img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius-sm);margin:6px 0}
.cc-help-md table{border-collapse:collapse;width:100%;margin:0 0 14px;font-size:var(--fs-sm)}
.cc-help-md th,.cc-help-md td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.cc-help-md th{background:var(--bg2);color:var(--txt);font-weight:700}
.cc-help-md tr:nth-child(even) td{background:var(--bg1)}
.cc-help-empty{color:var(--txt3);font-style:italic;padding:20px 0}
.cc-help-md .cc-help-steps{counter-reset:sgstep;list-style:none;padding-left:0}
.cc-help-md .cc-help-steps>li{position:relative;padding-left:34px;margin:10px 0}
.cc-help-md .cc-help-steps>li::before{counter-increment:sgstep;content:counter(sgstep);
  position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--blue3);color:#fff;font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center}

/* ── Standalone manual / portal page chrome (built pages only) ─────────────── */
.cc-help-page{max-width:920px;margin:0 auto;padding:0 24px 80px}
.cc-help-pagehead{display:flex;align-items:center;gap:12px;padding:20px 0 14px;margin-bottom:18px;
  border-bottom:1px solid var(--line)}
.cc-help-pagehead .cc-help-logo{width:30px;height:30px;font-size:15px}
.cc-help-pagehead h1{font-size:var(--fs-2xl);color:var(--txt);margin:0;font-weight:700}
.cc-help-pagehead .tl{font-size:var(--fs-sm);color:var(--txt3)}
.cc-help-pagenav{margin:0 0 26px;padding:14px 18px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius)}
.cc-help-pagenav h2{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:1px;color:var(--txt4);
  margin:0 0 8px;border:none;padding:0}
.cc-help-pagenav ul{columns:2;margin:0;padding-left:18px}
.cc-help-portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:8px}
.cc-help-portal-card{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;transition:border-color .15s,transform .15s}
.cc-help-portal-card:hover{border-color:var(--blue3);transform:translateY(-2px)}
.cc-help-portal-card .nm{font-size:var(--fs-lg);font-weight:700;color:var(--txt)}
.cc-help-portal-card .tg{font-size:var(--fs-sm);color:var(--txt3);margin-top:3px}
.cc-help-portal-card .ct{font-size:var(--fs-xs);color:var(--txt4);margin-top:10px}