/* ================================================================ */
/* Copious IT Blog — article styles (highlight boxes, TOC, tables)  */
/* Used by: all blog/*.html posts + blog/index.html                  */
/*                                                                   */
/* CHEAT SHEET — colors & fonts                                     */
/*   --ink          #0f172a   inline-code / table-row fill          */
/*   --text         #cbd5e1   table body text                       */
/*   --brand        #00b7e3   TOC link hover bg                    */
/*   --brand-2      #1abbe6   stat-pill / post-hero border          */
/*   --step         #006080   step box fill (muted blue)            */
/*   --note         #1e7f4f   note box fill (green)                 */
/*   --note-edge    #2eb67d   note box left border                  */
/*   --warn         #9a4b00   warn box fill (amber)                 */
/*   --warn-edge    #b55c00   warn box left border                  */
/*   --toc          #0e7490   "In this guide" box + table heads      */
/*   --toc-title    #bfeaff   TOC box title                         */
/*   --toc-link     #e8fbff   TOC box link text                     */
/*   --stat         #4dd0ff   byline read-time pill text            */
/*   --ink-ink      #1c2128   TOC drawer link text (dark on white)  */
/*   FONTS          'Inter' (Google Fonts), fallback sans-serif     */
/*                  ui-monospace/Menlo for inline code              */
/* ================================================================ */

/* ---------- Callout boxes — clean indented blocks (no color) ---------- */
.step-box,
.note-box,
.warn-box{
  background:none;
  border:none;
  border-left:2px solid #334155;   /* slate hairline indent cue */
  border-radius:0;
  padding:4px 0 4px 1.25rem;
  margin:18px 0;
  box-shadow:none;
}
.step-box, .step-box *,
.note-box, .note-box *,
.warn-box, .warn-box *{color:#cbd5e1}  /* body text, no forced white */
.step-box b, .step-box strong,
.note-box b, .note-box strong,
.warn-box b, .warn-box strong{color:#fff;font-weight:800}
.step-box ol, .step-box ul{margin-top:.5rem}
.step-box a, .note-box a, .warn-box a{color:#1abbe6;text-decoration:underline}

/* ---------- "In this guide" TOC box ---------- */
.toc-box{
  background:#0e7490;                 /* solid teal-700 */
  border-radius:14px;
  padding:22px 24px;
  margin:18px 0;
  box-shadow:0 10px 30px -8px rgba(14,116,144,.4);
}
.toc-box .toc-title{
  display:block;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#bfeaff;
  margin-bottom:14px;
}
.toc-box .article-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:0}
.toc-box .article-toc a{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:#e8fbff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;padding:10px 14px;text-decoration:none;transition:all .2s;
}
.toc-box .article-toc a::before{content:"";width:6px;height:6px;border-radius:999px;background:#a5e8ff;flex-shrink:0}
.toc-box .article-toc a:hover{background:rgba(255,255,255,.22);color:#fff}

/* ---------- Plain step/numbered lists ---------- */
.step-box ol{line-height:1.6;padding-left:1.2rem}
.step-box li{margin-bottom:.4rem}

/* ---------- Byline read-time pill ---------- */
.stat-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#4dd0ff;background:rgba(0,183,227,.15);border:1px solid #1abbe6;border-radius:9999px;padding:3px 11px;margin-left:9px;vertical-align:middle;white-space:nowrap}

/* ---------- Inline code ---------- */
code.inline-code{background:#0f172a;border:1px solid #1abbe6;color:#4dd0ff;font-family:ui-monospace,Menlo,monospace;font-size:.875em;padding:2px 7px;border-radius:6px}

/* ---------- Tables ---------- */
table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14px}
th{text-align:left;background:rgba(30,41,59,.8);color:#e2e8f0;padding:10px 12px;border:1px solid rgba(51,65,85,.5);font-weight:600}
td{padding:10px 12px;border:1px solid rgba(51,65,85,.5);vertical-align:top;color:#cbd5e1}
tr:nth-child(even) td{background:rgba(15,23,42,.5)}

/* Short Version summary — equal 50% columns so each item sits side by side.
   Override the generic dark td border: on a dark page a dark border reads
   as a flat dark-on-dark line (README design rule — must have contrast).
   Use a light slate line so cells are clearly separated. */
table.short-version{table-layout:fixed;width:100%}
table.short-version td{width:50%;border:1px solid rgba(148,163,184,.35)}

/* ---------- Hero image ---------- */
.post-hero{width:100%;height:auto;border-radius:16px;border:1px solid #1abbe6;box-shadow:0 25px 70px -20px rgba(0,183,227,.35);margin:0 0 1.5rem}

/* ============================================================
   Hamburger TOC nav — from reference on-device-ai-mac-guide.html
   Sticky cyan bar + animated hamburger + white dropdown panel
   ============================================================ */
nav.toc{
  position:sticky;
  top:64px;
  z-index:90;
  margin-top:1rem;
  overflow:visible;
}
nav.toc .nav-bar{
  width:fit-content;margin:0 0 0 auto;display:flex;align-items:center;
  height:48px;padding:0 12px 0 18px;
  gap:10px;
  background:#006077;                 /* darker accent (brand-800), only on the pill */
  border:1px solid rgba(0,154,191,.5);
  border-radius:10px;
}
nav.toc .nav-logo{margin-left:auto;height:30px;width:auto;flex-shrink:0;border-radius:6px}
nav.toc .hamburger{
  display:flex;flex-direction:column;justify-content:space-between;
  width:22px;height:16px;cursor:pointer;flex-shrink:0;
}
nav.toc .hamburger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:all .2s ease}
nav.toc .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.toc .hamburger.open span:nth-child(2){opacity:0}
nav.toc .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
nav.toc .nav-title{font-weight:700;font-size:16px;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.toc .nav-panel{
  display:none;position:absolute;top:52px;right:0;width:fit-content;min-width:440px;
  background:#ffffff;border:1px solid #cbd5e1;border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.25);max-height:calc(100vh - 64px - 48px);
  overflow-y:auto;padding:14px 20px 16px;
}
nav.toc .nav-panel.open{display:block;animation:drawerSlide .22s ease-out}
@keyframes drawerSlide{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
nav.toc .nav-panel .cat-grid{display:grid;grid-template-columns:repeat(3,auto);gap:10px 20px}
nav.toc .nav-panel .cat{margin:0}
nav.toc .nav-panel .cat h4{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:#006077;margin:0 0 4px;padding-bottom:4px;border-bottom:1px solid #cbd5e1;
}
nav.toc .nav-panel .cat ul{list-style:none;margin:0;padding:0}
nav.toc .nav-panel .cat li{margin:0}
nav.toc .nav-panel .cat a{
  display:block;color:#1e293b;text-decoration:none;font-size:13px;font-weight:500;
  padding:4px 8px;border-radius:5px;transition:background .12s ease;
}
nav.toc .nav-panel .cat a:hover{background:#e2e8f0;color:#0f172a}
nav.toc .nav-panel .cat.browsers ul{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
@media(min-width:640px){nav.toc{top:80px}}