/* 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; }