/* kb.css – TLSPilot Knowledge Base (loaded only on /supportnew/ pages by the mu-plugin tlspilot-kb).
   All colours live in custom properties. Default = dark (matches tlspilot.com);
   add class "kb-light" to a wrapper (or <body>) for the light variant. Rules below use variables only. */
:root{
  --kb-text:#e6e8eb;
  --kb-muted:#9aa4b2;
  --kb-accent:#4ea1ff;
  --kb-link:#6cb4ff;
  --kb-border:#2f3846;
  --kb-bg:transparent;
  --kb-bg-soft:#161c25;
  --kb-bg-code:#0f141b;
  --kb-th-bg:#1c2430;
  --kb-note:#4ea1ff;
  --kb-tip:#3fb950;
  --kb-caution:#d29922;
  --kb-shadow:0 1px 3px rgba(0,0,0,.4);
  --kb-radius:6px;
  --kb-font-mono:Consolas,Menlo,"DejaVu Sans Mono",monospace;
}
.kb-light{
  --kb-text:#1f2328;
  --kb-muted:#57606a;
  --kb-accent:#0b5cad;
  --kb-link:#0b5cad;
  --kb-border:#d0d7de;
  --kb-bg-soft:#f6f8fa;
  --kb-bg-code:#f6f8fa;
  --kb-th-bg:#eef1f4;
  --kb-note:#0b5cad;
  --kb-tip:#1a7f37;
  --kb-caution:#9a6700;
  --kb-shadow:0 1px 3px rgba(0,0,0,.12);
}

/* article wrapper: <div class="kb-article"> + fragment */
.kb-article{color:var(--kb-text);background:var(--kb-bg);line-height:1.6}
.kb-article a{color:var(--kb-link)}
.kb-article a.kb-xref{text-decoration:underline dotted}
.kb-article h2{margin:2em 0 .6em;font-size:1.35em}
.kb-article h3{margin:1.6em 0 .5em;font-size:1.12em}
.kb-article [id]{scroll-margin-top:90px}
.kb-article ul,.kb-article ol{margin:.4em 0 1em 1.4em;padding:0}
.kb-article li{margin:.25em 0}
.kb-article li>ul,.kb-article li>ol{margin:.25em 0 .25em 1.2em}
.kb-article .lead{font-weight:600;margin:1.2em 0 .3em}
.kb-steps>li::marker{font-weight:600;color:var(--kb-accent)}

/* figures: caption only (no "Figure N") */
.kb-article figure{margin:1.2em 0;text-align:center}
.kb-article figure img{max-width:100%;height:auto;border:1px solid var(--kb-border);border-radius:var(--kb-radius);box-shadow:var(--kb-shadow)}
.kb-article figcaption{font-size:.88em;color:var(--kb-muted);margin-top:.4em}

/* tables */
.kb-table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.93em;display:block;overflow-x:auto}
.kb-table caption{caption-side:top;text-align:left;font-weight:600;padding:.3em 0;color:var(--kb-text)}
.kb-table th,.kb-table td{border:1px solid var(--kb-border);padding:.45em .6em;vertical-align:top;text-align:left}
.kb-table th{background:var(--kb-th-bg)}

/* code */
.kb-article code{font-family:var(--kb-font-mono);font-size:.92em;background:var(--kb-bg-code);padding:.1em .3em;border-radius:3px}
.kb-article pre{font-family:var(--kb-font-mono);font-size:.88em;background:var(--kb-bg-code);border:1px solid var(--kb-border);border-radius:var(--kb-radius);padding:.8em 1em;overflow-x:auto;white-space:pre}
.kb-article pre code{background:none;padding:0}

/* callouts: <aside class="kb-note|kb-tip|kb-caution"> */
.kb-note,.kb-tip,.kb-caution,.kb-todo{border-left:4px solid var(--kb-note);background:var(--kb-bg-soft);padding:.6em 1em;margin:1em 0;border-radius:0 var(--kb-radius) var(--kb-radius) 0}
.kb-tip{border-left-color:var(--kb-tip)}
.kb-caution{border-left-color:var(--kb-caution)}
.kb-label{font-weight:700;margin:0 0 .3em}
.kb-note>p:last-child,.kb-tip>p:last-child,.kb-caution>p:last-child{margin-bottom:0}

/* page parts provided by the theme / shortcodes */
.kb-version{display:inline-block;font-size:.85em;color:var(--kb-muted);border:1px solid var(--kb-border);border-radius:12px;padding:.1em .7em}
.kb-video{margin:0 0 1.5em}
.kb-video video{width:100%;height:auto;border-radius:var(--kb-radius);background:var(--kb-bg-code)}
.kb-prevnext{display:flex;justify-content:space-between;gap:1em;margin-top:2.5em;border-top:1px solid var(--kb-border);padding-top:1em}
.kb-prevnext a{color:var(--kb-link)}

@media (max-width:640px){.kb-table{font-size:.85em}.kb-prevnext{flex-direction:column}}

/* ===== tlspilot-kb 1.1.0: section switch bar + version pill removal (Della 20.10.2026) =====
   Markup comes from the mu-plugin (tlspilot_kb_switchbar_markup), inserted directly after the title band <header class="cp-page-head">. Self-contained: does not rely on
   the inline kb-site-css of the KB pages, because /supportnew/tutorials/ (a copy of /support/) has none.
   Theme variables are used with fallbacks (certpilot 0.5.220). */
.kb-switch{background:var(--cp-navy,#0A2642);padding:1rem 0 0}
.kb-switch__in{max-width:var(--cp-max,68rem);margin:0 auto;padding:0 var(--cp-space,1.25rem)}
.kb-switch__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.kb-switch__list li{margin:0;padding:0;min-width:0;display:flex}
.kb-switch__tile{flex:1 1 auto;width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.55rem .9rem;border:1px solid rgba(234,240,246,.18);border-top:3px solid transparent;border-radius:var(--cp-radius,14px);background:var(--cp-card,#123f70);color:var(--cp-text,#EAF0F6);font-weight:650;font-size:.98rem;line-height:1.2;text-decoration:none;transition:background-color .15s,border-color .15s}
.kb-switch__tile:hover{background:var(--cp-card-head,#0e3766);border-color:rgba(138,212,198,.55);border-top-color:rgba(138,212,198,.55);color:var(--cp-white,#fff);text-decoration:none}
.kb-switch__tile:focus-visible{outline:3px solid var(--cp-teal-soft,#8ad4c6);outline-offset:2px}
.kb-switch__tile[aria-current]{background:var(--cp-blue,#144D87);border-color:var(--cp-teal-soft,#8ad4c6);border-top-color:var(--cp-teal-soft,#8ad4c6);color:var(--cp-white,#fff)}
.kb-switch__tile[aria-current] .kb-switch__ico{color:var(--cp-teal-soft,#8ad4c6)}
.kb-switch__ico{width:1.4rem;height:1.4rem;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--cp-teal-soft,#8ad4c6);opacity:.95}
.kb-switch__label{min-width:0;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:640px){
  .kb-switch{padding:.75rem 0 0}
  .kb-switch__in{padding:0 .75rem}
  .kb-switch__list{gap:.4rem}
  .kb-switch__tile{flex-direction:column;gap:.25rem;min-height:3.6rem;padding:.45rem .3rem;font-size:.8rem;text-align:center;border-radius:10px}
  .kb-switch__ico{width:1.3rem;height:1.3rem}
}
@media (max-width:380px){.kb-switch__tile{font-size:.76rem}}
@media (prefers-reduced-motion:reduce){.kb-switch__tile{transition:none}}
@media print{.kb-switch{display:none}}
/* version pill removed (André 20.10.2026 10:28): [kb_version] renders nothing; a .kb-meta row
   that held only the pill is now empty and must not leave spacing. */
.kb-meta:empty{display:none}
.kb-version{display:none}
/* whole-tile links (André 10:49): one <a> per tile, visible keyboard focus on the whole tile */
.kb-tile:focus-visible,.kb-cat:focus-visible,.kb-list a.row:focus-visible,.kb-box li a:focus-visible,.kb-tut:focus-visible,
.kb-links a:focus-visible,.kb-prevnext a:focus-visible,a.kb-search__hit:focus-visible{outline:3px solid var(--cp-teal-soft,#8ad4c6);outline-offset:2px}
/* search hits (kb-search.js 1.1.0): the whole hit is the link */
a.kb-search__hit{display:block;text-decoration:none;color:var(--cp-text,#EAF0F6);cursor:pointer;transition:border-color .15s,background-color .15s}
a.kb-search__hit:hover{border-color:var(--cp-teal-soft,#8ad4c6);background:var(--cp-card-head,#0e3766)}
.kb-search__cat{display:block;font-size:.76rem;font-weight:650;letter-spacing:.03em;color:var(--cp-teal-soft,#8ad4c6);margin:0 0 .1rem}
.kb-search__hit .kb-search__title{display:block;color:var(--cp-white,#fff);font-weight:650;font-size:1.02rem}
.kb-search__hit mark{background:rgba(138,212,198,.32);color:var(--cp-white,#fff);border-radius:3px;padding:0 2px}
/* ===== tlspilot-kb 1.1.0: hanging indent for numbered lists (André 11:00) =====
   Markup (unchanged, from gen.py): <li><a><span class="n">6.10</span>Title text[ <svg class="kb-ico">][<span class="cnt">4</span>]</a></li>
   The title is a bare text node; as a grid child it becomes its own anonymous grid item, so CSS alone is enough.
   One shared number column per list (subgrid) = width of the widest number in THAT list; continuation lines sit under the title,
   number and count top-aligned. Prefix .cp-kb beats the inline kb-site.css rules that come later in the document. */
.cp-kb .kb-box :is(ol,ul):has(> li > a > .n){display:grid;grid-template-columns:max-content minmax(0,1fr) auto;column-gap:0}
.cp-kb .kb-box :is(ol,ul):has(> li > a > .n) > li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}
.cp-kb .kb-box :is(ol,ul):has(> li > a > .n) > li > a{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:start}
.cp-kb .kb-box li > a > .n{grid-column:1;min-width:0;padding-right:.55rem;display:block}
.cp-kb .kb-box li > a > .n:empty{padding-right:0}
.cp-kb .kb-box li > a > .kb-ico,.cp-kb .kb-box li > a > .cnt{grid-column:3;float:none;justify-self:end;margin-left:.4rem}
.cp-kb .kb-box li > a > .kb-ico{margin-top:.15em}
/* fallback (browsers without :has/subgrid): classic hanging indent with a fixed number column */
@supports not (grid-template-columns:subgrid){
  .cp-kb .kb-box li > a{padding-left:calc(.5rem + 2.6rem);text-indent:-2.6rem}
  .cp-kb .kb-box li > a > .n{display:inline-block;width:2.6rem;min-width:0;text-indent:0;padding:0}
}
/* category cards on KB home: badge top-aligned, wrapped title stays right of the badge */
.cp-kb .kb-cat-head{align-items:flex-start}
.cp-kb .kb-cat-head h3{padding-top:calc((30px - 1.25em) / 2);min-width:0}
/* category article list (.kb-list a.row): number column fits «15.10» also on mobile */
.cp-kb .kb-list a.row{grid-template-columns:3.4rem minmax(0,1fr) auto}
@media (max-width:600px){.cp-kb .kb-list a.row{grid-template-columns:3rem minmax(0,1fr)}.cp-kb .kb-list a.row .n{font-size:.92rem}}

/* ===== KB 1.0.15 (Maggy 26.10.2026): flow diagram styles appended from out/1.0.15/kb.css ===== */
/* flow diagrams from the manual: <div class="flow [flow-v|flow-h|flow-grid]"> with <div class="st [st-now|st-plan]"> steps */
.kb-article .flow{display:flex;flex-direction:column;gap:.5em;margin:1em 0;text-align:left}
.kb-article .flow .st{border:1px solid var(--kb-border);border-left:4px solid var(--kb-accent);background:var(--kb-bg-soft);border-radius:var(--kb-radius);padding:.5em .8em}
.kb-article .flow .st b{display:block;margin-bottom:.2em}
.kb-article .flow .st .n{display:inline-block;min-width:1.5em;margin-right:.4em;color:var(--kb-accent)}
.kb-article .flow-v{gap:1.3em}
.kb-article .flow-v .st{position:relative}
.kb-article .flow-v .st:not(:last-child)::after{content:"\2193";position:absolute;left:50%;bottom:-1.25em;transform:translateX(-50%);color:var(--kb-muted);line-height:1}
.kb-article .flow-h{flex-direction:row;flex-wrap:wrap}
.kb-article .flow-h .st{flex:1 1 9em}
.kb-article .flow-grid .st-now{border-left-color:var(--kb-caution)}
.kb-article .flow-grid .st-plan{border-left-color:var(--kb-tip)}