/* Extracted from ops-guide.html inline <style> for CSP hardening */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;600&family=Cinzel:wght@700&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.7;color:#1a1a2e;background:#f8f9fc;}
.print-bar{position:fixed;top:0;left:0;right:0;background:#0c1109;color:#fff;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;z-index:9999;font-size:12px;border-bottom:1px solid rgba(240,200,50,.2);}
.print-bar span{color:#a0a0b8;}
.back-btn{color:#a0a0b8;font-size:11px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid rgba(255,255,255,.12);border-radius:7px;white-space:nowrap;transition:.2s;}
.back-btn:hover{border-color:rgba(240,200,50,.4);color:#f0c832;}
.page{max-width:900px;margin:60px auto 40px;padding:0 16px;}
.hub-cover{background:#0c1109;color:#fff;padding:48px 48px 40px;border-radius:12px 12px 0 0;border-bottom:3px solid #f0c832;margin-top:0;}
.cover-label{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#f0c832;margin-bottom:12px;font-family:'IBM Plex Mono',monospace;}
.cover-title{font-size:30px;font-weight:700;line-height:1.2;margin-bottom:8px;}
.cover-sub{font-size:14px;color:#a0a0b8;margin-bottom:28px;}
.cover-meta{display:flex;gap:12px;flex-wrap:wrap;}
.cover-pill{background:rgba(240,200,50,.12);border:1px solid rgba(240,200,50,.25);color:#f0c832;font-size:11px;font-weight:600;padding:5px 14px;border-radius:20px;letter-spacing:.5px;}
.hub-body{background:#fff;border-radius:0 0 12px 12px;padding:40px 48px 48px;box-shadow:0 4px 24px rgba(0,0,0,.08);}
.hub-intro{font-size:13px;color:#374151;margin-bottom:32px;line-height:1.7;}
.guides-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#6b7280;margin-bottom:20px;font-family:'IBM Plex Mono',monospace;}
.guides-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.guide-card{border:1px solid #e8eaf0;border-radius:12px;padding:24px;cursor:pointer;text-decoration:none;transition:.2s;display:flex;flex-direction:column;gap:10px;background:#fff;}
.guide-card:hover{border-color:rgba(240,200,50,.5);box-shadow:0 4px 20px rgba(240,200,50,.1);transform:translateY(-1px);}
.guide-card-icon{width:40px;height:40px;background:#0c1109;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.guide-card-title{font-size:15px;font-weight:700;color:#1a1a2e;margin-top:2px;}
.guide-card-desc{font-size:12px;color:#6b7280;line-height:1.6;}
.guide-card-meta{display:flex;align-items:center;gap:8px;margin-top:4px;}
.guide-card-count{font-size:10px;font-weight:600;background:rgba(240,200,50,.1);border:1px solid rgba(240,200,50,.25);color:#b58900;padding:2px 8px;border-radius:5px;font-family:'IBM Plex Mono',monospace;}
.guide-card-arrow{margin-left:auto;color:#d1d5db;font-size:14px;transition:.2s;}
.guide-card:hover .guide-card-arrow{color:#f0c832;}
.hub-note{background:rgba(240,200,50,.05);border:1px solid rgba(240,200,50,.2);border-radius:10px;padding:16px 20px;margin-top:28px;font-size:12px;color:#374151;}
.hub-note strong{color:#b58900;}
.doc-footer{background:#0c1109;color:#6b7280;font-size:11px;padding:16px 48px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 12px 12px;}
.doc-footer span{color:#f0c832;font-weight:600;}
@media(max-width:700px){.guides-grid{grid-template-columns:1fr;}.hub-cover,.hub-body{padding:28px 22px;}.doc-footer{padding:14px 22px;flex-direction:column;gap:6px;text-align:center;}}

/* ── Premium-light polish (2026-06-08) — keeps the light reading theme; richer paper cards ── */
.page{border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.22),0 2px 10px rgba(0,0,0,.05);border:1px solid #eceef4;}
.picker-card{box-shadow:0 6px 20px -10px rgba(0,0,0,.12);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s;}
.picker-card:hover{transform:translateY(-3px);border-color:rgba(240,200,50,.55);box-shadow:0 16px 36px -14px rgba(0,0,0,.22);}
.stage-card{box-shadow:0 4px 14px -8px rgba(0,0,0,.1);}

/* ════════════════════════════════════════════════════════════════════
   CALLOUTS  (2026-08-03)

   .note, .warn and .info are used 36 times across ops-guide.html and were
   defined in NONE of the five stylesheets this page loads. Every one of
   them rendered as plain unstyled text: transparent background, no border,
   no padding. Confirmed by measuring the computed style, not by reading.

   They exist in css/hr-guide-inline.css, which this page does not load,
   which is presumably how it was missed. The values here are that file's,
   so the two guides read identically, but they are declared HERE rather
   than by adding this page to a shared sheet (LESSONS.md #3).

   Font size is 13px, not the 12px the HR guide uses, because the portal
   floor is 13px and the HR guide predates it.
   ════════════════════════════════════════════════════════════════════ */
.note, .warn, .info{
  border-radius:0 8px 8px 0;
  padding:10px 14px;
  margin:12px 0;
  font-size:13px;
  line-height:1.65;
  color:#374151;
}
.note{ background:rgba(240,200,50,.06); border-left:3px solid #f0c832; }
.warn{ background:rgba(239,68,68,.05);  border-left:3px solid #ef4444; }
.info{ background:rgba(99,102,241,.05); border-left:3px solid #6366f1; }
.note strong, .warn strong, .info strong{ color:#111827; }
.note p, .warn p, .info p{ margin:6px 0 0; }
.note p:first-of-type, .warn p:first-of-type, .info p:first-of-type{ margin-top:4px; }

/* ════════════════════════════════════════════════════════════════════
   THE SHARED GUIDE FURNITURE, which this sheet was missing

   hr-guide-inline.css and it-guide-inline.css both define these; this one
   never did, so the part headings, their numbers and titles, the content
   padding and the cover accent have been rendering unstyled on every ops
   topic, not only on the new one. Fifty-nine existing occurrences across this
   page were affected. Copied verbatim from hr-guide-inline.css rather than
   reinvented, so the three guides cannot drift.

   .guide-section carries display:none the same way, and js/guide-token.js
   already sets display with !important on both show and hide precisely because
   of this rule, so revealing a topic still wins.
   ════════════════════════════════════════════════════════════════════ */
.guide-section{display:none;}
.content{padding:0 48px 48px;}
/* .cover-accent is absolutely positioned; without this it would anchor to
   the nearest positioned ancestor instead of the cover it belongs to. */
.cover{position:relative;overflow:hidden;}
.cover-accent{position:absolute;bottom:0;right:0;width:200px;height:140px;background:radial-gradient(circle at 80% 80%,rgba(240,200,50,.1),transparent 70%);pointer-events:none;}
.part-header{margin:36px 0 18px;padding-bottom:10px;border-bottom:2px solid #f0c832;display:flex;align-items:center;gap:12px;}
.part-num{background:#f0c832;color:#1a1a2e;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:1px;white-space:nowrap;}
.part-title{font-size:16px;font-weight:700;color:#1a1a2e;}

/* Callout, matching hr-guide-inline.css so the two guides read alike.
   Added 2026-09-16 with the President Domain topic: the pattern was copied
   from the HR guide, which defines it, and this guide did not. A class with no
   rule renders in normal flow with no error, so the warning would have looked
   like an ordinary paragraph rather than a warning. */
.callout{border-radius:10px;padding:14px 18px;margin:14px 0;font-size:13px;line-height:1.65;
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);color:#4a3a12;}
.callout-icon{font-size:16px;flex-shrink:0;margin-top:1px;}