/* Mainline Hub — the Handbook renderer's styles (v0.85.78, Hub Guides).
   Linked by handbook.html (the reader) and admin.html (the editor's live
   preview), because both run hbmd.js and "exactly what employees see" is only
   true while both also wear the same CSS. Palette from tokens.css only.
   hb-*  = blocks the renderer mints (:::steps, :::rules, tables, …).
   hbx-* = the drawn-screen vocabulary an author may use inside :::screen.
   Sizes lean large on purpose: the guides are written for readers whose
   first language may not be English, on a phone, at arm's length. */

/* ---- headings with anchors clear the sticky bar ----------------------- */
.prose h2[id],.prose h3[id]{scroll-margin-top:72px}
.prose h4{font-size:15.5px;font-weight:700;margin:18px 0 6px;color:var(--text-1)}

/* ---- tables ------------------------------------------------------------ */
.hb-table{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-md);margin:6px 0 18px}
.hb-table:focus-visible{outline:3px solid var(--flame);outline-offset:2px}
.hb-table table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.5}
.hb-table th,.hb-table td{text-align:left;vertical-align:top;padding:10px 13px;border-bottom:1px solid var(--hairline)}
.hb-table tr:last-child th,.hb-table tr:last-child td{border-bottom:none}
.hb-table thead th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;background:var(--ink-1)}
.hb-table td{color:var(--text-2)}
.hb-table tbody th{color:var(--text-1);font-weight:700}
.hb-table table.hb-kv tbody th{width:34%;white-space:nowrap;background:var(--ink-1)}

/* ---- callouts and boxes ------------------------------------------------ */
.hb-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hb-callout{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-md);padding:13px 15px;margin:6px 0 16px;
  border:1px solid transparent}
.hb-callout>.hb-ic{margin-top:2px}
.hb-callout>div>p:last-child{margin-bottom:0}
.hb-callout>div{min-width:0;color:var(--text-1)}
.hb-callout>div>p{color:var(--text-1)}
.hb-callout .hb-callout-t{display:block;color:var(--text-1);margin-bottom:3px}
.hb-callout.hb-info{background:var(--blue-subtle);border-color:var(--blue-subtle)}
.hb-callout.hb-info>.hb-ic{color:var(--blue)}
.hb-callout.hb-ok{background:var(--pass-subtle)}
.hb-callout.hb-ok>.hb-ic{color:var(--pass)}
.hb-callout.hb-warn,.hb-callout.hb-safety{background:var(--warn-subtle);border-color:var(--warn-subtle)}
.hb-callout.hb-warn>.hb-ic,.hb-callout.hb-safety>.hb-ic{color:var(--warn)}
.hb-callout.hb-fail{background:var(--fail-subtle)}
.hb-callout.hb-fail>.hb-ic{color:var(--fail)}
.hb-box{background:var(--ink-1);border:1px solid var(--hairline-strong);border-radius:var(--r-lg);padding:14px 16px 4px;margin:10px 0 18px}
.hb-box-h{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:6px}

/* ---- steps ------------------------------------------------------------- */
.prose ol.hb-steps{list-style:none;margin:12px 0 10px;padding:0;counter-reset:hbs}
.hb-steps li{counter-increment:hbs;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;
  padding:0 0 16px;margin:0;position:relative;color:var(--text-2)}
.hb-steps li::before{content:counter(hbs);width:34px;height:34px;border-radius:99px;border:1.5px solid var(--flame);
  color:var(--flame-text);font-family:var(--font-mono);font-weight:700;font-size:14px;display:flex;
  align-items:center;justify-content:center;background:var(--ink-0);position:relative;z-index:1}
.hb-steps li::after{content:"";position:absolute;left:16.5px;top:36px;bottom:2px;width:1px;background:var(--hairline-strong)}
.hb-steps li:last-child::after{display:none}
.hb-steps li>div{padding-top:5px}
.hb-steps li>div>strong:first-child{display:block;color:var(--text-1);font-size:16.5px;margin-bottom:2px}

/* ---- rule cards -------------------------------------------------------- */
.hb-rules{display:grid;gap:8px;margin:10px 0 18px}
.hb-rule{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;background:var(--ink-1);
  border:1px solid var(--hairline);border-radius:var(--r-md);padding:12px 14px;color:var(--text-2);font-size:15px;line-height:1.5}
.hb-rule>div>strong:first-child{display:block;color:var(--text-1);font-size:16px;margin-bottom:2px;line-height:1.35}
.hb-rule-ic{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center}
.hb-rule.hb-ok .hb-rule-ic{background:var(--pass-subtle);color:var(--pass)}
.hb-rule.hb-info .hb-rule-ic{background:var(--blue-subtle);color:var(--blue)}
.hb-rule.hb-warn .hb-rule-ic{background:var(--warn-subtle);color:var(--warn)}
.hb-rule.hb-fail .hb-rule-ic{background:var(--fail-subtle);color:var(--fail)}

/* ---- task cards and shortcut links ------------------------------------ */
.hb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0 10px}
.hb-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:0 0 10px}
.prose .hb-card{display:flex;flex-direction:column;gap:6px;background:var(--ink-1);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:16px;text-decoration:none;color:var(--text-1);border-bottom:1px solid var(--hairline)}
.prose .hb-card:hover{border-color:var(--hairline-strong)}
.prose .hb-card:focus-visible{outline:3px solid var(--flame);outline-offset:2px}
.hb-card b{font-size:16.5px;line-height:1.3}
.hb-card span{font-size:14.5px;color:var(--text-2);line-height:1.45}
.hb-card .hb-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-weight:600;color:var(--flame-text)}
.hb-card .hb-go .hb-ic{width:16px;height:16px}
.hb-card.hb-urgent{border-color:color-mix(in srgb,var(--fail) 40%,transparent)}
.hb-card.hb-urgent .hb-go{color:var(--fail)}
.prose .hb-links .hb-card{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:11px 14px;border-radius:var(--r-md);min-height:56px}
.hb-links .hb-card b{flex:1 1 60%;font-size:15.5px}
.hb-links .hb-card span{flex:1 1 100%;order:3;font-size:13.5px}
.hb-links .hb-card>.hb-ic{width:16px;height:16px;color:var(--text-3);order:2}

/* ---- FAQ and glossary -------------------------------------------------- */
.hb-faq{margin:4px 0 16px}
.hb-faq details{border-bottom:1px solid var(--hairline)}
.hb-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;
  min-height:52px;padding:6px 0;font-weight:600;font-size:16px;color:var(--text-1)}
.hb-faq summary::-webkit-details-marker{display:none}
.hb-faq summary::after{content:"+";font-family:var(--font-mono);color:var(--text-3);font-size:18px;flex:none}
.hb-faq details[open] summary::after{content:"\2013"}
.hb-faq summary:focus-visible{outline:3px solid var(--flame);outline-offset:2px;border-radius:4px}
.hb-gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin:8px 0 18px}
.hb-gloss div{background:var(--ink-1);border:1px solid var(--hairline);border-radius:var(--r-md);padding:11px 14px}
.hb-gloss dt{font-weight:700;color:var(--text-1);margin-bottom:2px}
.hb-gloss dd{margin:0;font-size:14.5px;color:var(--text-2)}

/* ---- the drawn screen -------------------------------------------------- */
.prose figure.hb-screen{margin:12px 0 20px}
.hb-stage{background:radial-gradient(circle at 1px 1px,var(--hairline) 1px,transparent 0) 0 0/14px 14px,var(--ink-2);
  border:1px solid var(--hairline);border-radius:var(--r-lg);padding:20px;overflow-x:auto}
.prose figure.hb-screen figcaption{font-family:var(--font-ui);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--text-3)}
.hbx-ui{background:var(--ink-1);border:1px solid var(--hairline-strong);border-radius:var(--r-lg);
  box-shadow:0 14px 40px var(--shadow,rgba(0,0,0,.35));max-width:420px;margin:0 auto;color:var(--text-1);font-size:14px;line-height:1.45}
.hbx-small{max-width:300px}
.hbx-right{margin-right:0}
.hbx-ui-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px;font-weight:700;font-size:16px}
.hbx-ui-b{padding:2px 16px 14px}
.hbx-ui-f{border-top:1px solid var(--hairline);padding:12px 16px}
.hbx-lbl{display:flex;align-items:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);margin:0 0 6px}
.hbx-pin{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:99px;
  background:var(--flame);color:#fff;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:0;
  margin-right:7px;flex:none;text-transform:none}
.hbx-seg{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px}
.hbx-chip{flex:1 1 auto;min-width:0;height:36px;padding:0 10px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid var(--hairline-strong);font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap}
.hbx-chip.hbx-on{background:var(--flame-subtle);border-color:var(--flame);color:var(--flame-text)}
.hbx-inp{height:36px;border:1px solid var(--hairline-strong);border-radius:var(--r-sm);background:var(--ink-0);
  display:flex;align-items:center;padding:0 11px;font-size:13px;color:var(--text-1);margin-bottom:13px}
.hbx-dim{color:var(--text-3)}
.hbx-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hbx-sum{background:var(--ink-0);border:1px solid var(--hairline-strong);border-radius:var(--r-md);padding:9px 12px;font-size:12.5px;color:var(--text-2)}
.hbx-r{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.hbx-r+.hbx-r{border-top:1px solid var(--hairline);margin-top:3px;padding-top:5px}
.hbx-r b{font-family:var(--font-mono);font-weight:500;color:var(--text-1)}
.hbx-btn{height:42px;border-radius:var(--r-sm);background:var(--flame);color:#fff;font-weight:600;font-size:14px;
  display:flex;align-items:center;justify-content:center}
.hbx-btn .hbx-pin{background:var(--paper);color:var(--flame-text)}
.hbx-btn-danger{background:none;border:1px solid var(--hairline-strong);color:var(--fail)}
.hbx-av{width:30px;height:30px;border-radius:99px;border:2px solid var(--flame);display:inline-flex;align-items:center;
  justify-content:center;font-weight:700;font-size:11px}
.hbx-mrow{height:40px;display:flex;align-items:center;gap:9px;padding:0 10px;border-radius:var(--r-sm);font-size:14px;color:var(--text-2)}
.hbx-mrow.hbx-dim{color:var(--text-3)}
.hbx-mrow.hbx-on{background:var(--flame-subtle);color:var(--flame-text);font-weight:600}
.hbx-urgent{border:1px solid color-mix(in srgb,var(--fail) 34%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--fail) 7%,transparent),color-mix(in srgb,var(--fail) 2%,transparent));
  border-radius:var(--r-lg);padding:14px;max-width:560px;margin:0 auto;color:var(--text-1)}
.hbx-top{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:12px}
.hbx-top .hbx-ic{color:var(--fail)}
.hbx-acts{display:flex;gap:8px;flex-wrap:wrap}
.hbx-act{flex:1 1 130px;height:40px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:600;border:1px solid var(--hairline-strong);color:var(--text-2);padding:0 12px;text-align:center}
.hbx-act.hbx-red{color:var(--fail)}
.hbx-act.hbx-quiet{flex:0 1 auto;color:var(--text-3)}
.hbx-act.hbx-hl{border-color:var(--flame);color:var(--flame-text);box-shadow:0 0 0 3px var(--flame-subtle)}
.hbx-taps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center}
.hbx-tap{background:var(--ink-1);border:1px solid var(--hairline-strong);border-radius:var(--r-md);padding:12px;text-align:center;min-width:0;color:var(--text-1)}
.hbx-tap .hbx-lbl{justify-content:center;margin-bottom:8px}
.hbx-tap .hbx-seg{margin:0;justify-content:center}
.hbx-tap .hbx-chip{flex:0 1 auto}
.hbx-eta{font-size:24px;font-weight:700;line-height:1.1}
.hbx-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;color:var(--text-1)}
.hbx-fork{display:flex;flex-direction:column;gap:14px}
.hbx-node{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;max-width:190px}
.hbx-node small{font-size:13.5px;color:var(--text-2);line-height:1.4}
.hbx-st{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.hbx-st.hbx-pend{background:var(--state-pending-subtle);color:var(--state-pending)}
.hbx-st.hbx-ok{background:var(--pass-subtle);color:var(--pass)}
.hbx-st.hbx-no{background:var(--fail-subtle);color:var(--fail)}
.hbx-balgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;max-width:560px;margin:0 auto}
.hbx-bal{background:var(--ink-1);border:1px solid var(--hairline-strong);border-radius:var(--r-lg);padding:14px;color:var(--text-1)}
.hbx-cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.hbx-big{display:flex;align-items:center;font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.1;margin:6px 0 2px}
.hbx-big small{font-size:13px;color:var(--text-3);font-weight:600;margin-left:6px;letter-spacing:0}
.hbx-of{font-size:12px;color:var(--text-3)}
.hbx-track{height:6px;border-radius:9px;background:var(--ink-3);margin:11px 0 10px;overflow:hidden;display:flex}
.hbx-track span{display:block;height:100%}
.hbx-used{background:var(--flame)}
.hbx-held{background:var(--warn);opacity:.6}
.hbx-sick .hbx-used{background:var(--blue)}
.hbx-w10{width:10%}.hbx-w20{width:20%}.hbx-w30{width:30%}.hbx-w40{width:40%}.hbx-w50{width:50%}
.hbx-w60{width:60%}.hbx-w70{width:70%}.hbx-w80{width:80%}.hbx-w90{width:90%}
.hbx-foot{display:flex;align-items:center;font-size:12px;color:var(--text-3);line-height:1.6}
.hbx-out{display:flex;align-items:center;font-size:12px;color:var(--text-2);border-top:1px solid var(--hairline);margin-top:9px;padding-top:7px}
.hbx-band{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-md);font-size:14px;line-height:1.5}
.hbx-band.hbx-warnband{background:var(--warn-subtle);color:var(--warn)}
.hbx-band b{font-weight:700}

/* drawn icons: CSS masks over data: SVGs (img-src data: is allowed), so an
   author names an icon with a class and never writes SVG */
.hbx-ic{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--hbx-m) center/contain no-repeat;mask:var(--hbx-m) center/contain no-repeat}
.hbx-ic-alert{--hbx-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.hbx-ic-arrow{--hbx-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");color:var(--text-3)}
.hbx-ic-x{--hbx-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");color:var(--text-3);width:14px;height:14px}
.hbx-ic-cal{--hbx-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M16 3v3M8 3v3M3 10h18'/%3E%3C/svg%3E");width:16px;height:16px}

@media (max-width:640px){
  .hbx-taps{grid-template-columns:1fr}
  .hbx-taps>.hbx-ic-arrow{transform:rotate(90deg);justify-self:center}
  .hb-stage{padding:14px 10px}
  .hb-table table.hb-kv tbody th{white-space:normal}
}