/* ============================================================
   BulkEngine Documentation — Stylesheet
   Aligned with design-note.md tokens:
   - Primary accent: #3858e9 (WordPress admin blue)
   - Typography scale: 12 / 14 / 16 / 18 / 21 / 24 / 36 / 50
   - Base: 14px / 26.6px line-height / WP system font stack / weight 400
   - Spacing scale: 4 / 5 / 10 / 15 / 16 / 19 / 20 / 22
   - Radius: xs=2px (sharp), sm=9999px (pill)
   - Motion: instant 100ms
   - A11y: WCAG 2.2 AA, keyboard-first, focus-visible required
   ============================================================ */

:root{
  /* WordPress default font stack — matches wp-admin (since 5.7) and
     the front-end "system font" baseline. Renders instantly, no Google
     Fonts request, no CLS from font swap. */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* Surface palette (light docs theme) */
  --paper:#f7f8fa;
  --paper-2:#eef1f5;
  --paper-elev:#ffffff;

  /* Ink (text on light) */
  --ink:#1e1e1e;
  --ink-soft:#3f444d;
  --ink-faint:#828892;

  /* Lines */
  --line:#e2e6ec;
  --line-strong:#cfd5de;

  /* Brand accent — WordPress admin blue */
  --accent:#3858e9;
  --accent-deep:#2d49c4;
  --accent-wash:#e6ecfd;
  --accent-ring:rgba(56,88,233,.32);

  /* Semantic */
  --good:#2f7d4f;
  --warn:#b07400;

  /* Typography scale (px) */
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-md:16px;
  --fs-lg:18px;
  --fs-xl:21px;
  --fs-2xl:24px;
  --fs-3xl:36px;
  --fs-4xl:50px;
  --lh-base:1.9;          /* 14 * 1.9 = 26.6 */
  --lh-tight:1.25;

  /* Spacing scale (px) */
  --sp-1:4px;
  --sp-2:5px;
  --sp-3:10px;
  --sp-4:15px;
  --sp-5:16px;
  --sp-6:19px;
  --sp-7:20px;
  --sp-8:22px;

  /* Radius */
  --radius-xs:2px;
  --radius-sm:9999px;     /* pill */
  --radius-md:8px;        /* cards / blocks — derived, not a token */
  --radius-lg:12px;       /* large panels — derived */

  /* Motion */
  --motion-instant:100ms;

  /* Layout */
  --sidebar-w:296px;
  --maxread:760px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:32px;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-family);
  font-size:var(--fs-sm);              /* 14px base */
  font-weight:400;
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 14% 8%, rgba(56,88,233,.06), transparent 42%),
    radial-gradient(circle at 92% 96%, rgba(30,30,30,.045), transparent 40%);
}
/* subtle grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---------- Links ---------- */
a{color:var(--accent-deep);text-decoration:none;transition:color var(--motion-instant) ease;}
a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- Focus-visible (WCAG 2.2 AA) ----------
   Every interactive element shows a 2px accent ring on
   keyboard focus. Pointer focus does not show the ring
   (cleaner mouse UX), per :focus-visible semantics. */
:focus{outline:none;}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

/* ---------- Layout ---------- */
.shell{display:flex;min-height:100vh;position:relative;z-index:1;}

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  position:sticky;top:0;height:100vh;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,var(--paper-2),var(--paper));
  display:flex;flex-direction:column;
  padding:30px var(--sp-8) var(--sp-8);
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:6px;}
.mark{
  width:42px;height:42px;flex:0 0 42px;
  display:block;
}
.brand h1{font-family:var(--font-family);font-weight:600;font-size:var(--fs-xl);letter-spacing:-.01em;margin:0;line-height:1;}
.brand .ver{font-size:var(--fs-xs);color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;margin-top:3px;}
.tagline{font-size:var(--fs-sm);color:var(--ink-soft);margin:14px 2px var(--sp-7);line-height:1.5;}
.navlabel{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:var(--sp-3) 6px 8px;font-weight:600;}
nav ol{list-style:none;margin:0;padding:0;counter-reset:s;}
nav li{margin:0;}
nav a{
  display:flex;gap:11px;align-items:baseline;
  padding:7px var(--sp-3);border-radius:9px;
  color:var(--ink-soft);font-size:var(--fs-sm);font-weight:500;line-height:1.35;
  border:1px solid transparent;
  transition:background var(--motion-instant) ease,color var(--motion-instant) ease;
}
nav a .num{font-family:var(--font-family);font-size:var(--fs-xs);color:var(--ink-faint);min-width:18px;}
nav a:hover{background:var(--paper);color:var(--ink);text-decoration:none;}
nav a.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
nav a.active .num{color:var(--accent);}
.side-foot{margin-top:auto;padding-top:18px;font-size:var(--fs-xs);color:var(--ink-faint);border-top:1px solid var(--line);}

/* ---------- Main ---------- */
.main{flex:1 1 auto;min-width:0;}
.topbar{display:none;}
.content{
  max-width:calc(var(--maxread) + 80px);
  margin:0 auto;padding:64px 40px 120px;
  font-size:var(--fs-md);              /* 16px reading size in the main column */
}
/* Bump body text inside the main reading column from the global 14px to
   16px for comfortable long-form reading. Headings keep their own scale. */
.content p,
.content ul li,
.content ol.steps>li,
.content .note,
.content .tablewrap,
.content table,
.content td,
.content th{
  font-size:var(--fs-md);
}

/* ---------- Hero ---------- */
.hero{margin-bottom:54px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:700;
  background:var(--accent-wash);
  padding:6px var(--sp-3);
  border-radius:var(--radius-sm);
  border:1px solid #c0d0fb;
}
.hero h2{
  font-family:var(--font-family);font-weight:700;
  font-size:clamp(var(--fs-3xl),5vw,var(--fs-4xl));
  line-height:1.04;letter-spacing:-.03em;
  margin:18px 0 0;color:var(--ink);
}
.hero h2 em{font-style:normal;color:var(--accent);}
.hero p.lead{
  font-size:var(--fs-lg);line-height:1.55;color:var(--ink-soft);
  max-width:var(--maxread);margin:var(--sp-7) 0 0;
}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.pill{
  font-size:var(--fs-xs);font-weight:600;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line-strong);
  padding:5px 13px;border-radius:var(--radius-sm);
}
.pill b{color:var(--accent-deep);}

/* ---------- Sections ---------- */
section{margin-bottom:30px;scroll-margin-top:30px;}
section.block{
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  border-radius:14px;
  padding:34px 38px;margin-bottom:26px;
  backdrop-filter:blur(2px);
}
h3.sec{
  font-family:var(--font-family);font-weight:700;
  font-size:var(--fs-2xl);letter-spacing:-.02em;
  margin:0 0 4px;display:flex;align-items:baseline;gap:14px;
  color:var(--ink);
}
h3.sec .idx{
  font-family:var(--font-family);
  font-size:var(--fs-sm);color:var(--accent);font-weight:500;
  border:1.5px solid var(--accent);border-radius:8px;
  padding:2px 9px;line-height:1.2;
}
h4{
  font-family:var(--font-family);font-weight:600;
  font-size:var(--fs-xl);letter-spacing:-.01em;
  margin:30px 0 8px;color:var(--ink);
}
h5{
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;
  margin:var(--sp-8) 0 6px;color:var(--ink);
}
p{margin:12px 0;font-size:var(--fs-sm);line-height:var(--lh-base);}
.muted{color:var(--ink-soft);}
strong{font-weight:700;}

/* ---------- Lists ---------- */
ul,ol.steps{margin:14px 0;padding-left:0;}
ul{list-style:none;}
ul li{position:relative;padding-left:26px;margin:9px 0;font-size:var(--fs-sm);line-height:var(--lh-base);}
ul li::before{
  content:"";position:absolute;left:6px;top:11px;
  width:7px;height:7px;
  background:var(--accent);border-radius:var(--radius-xs);
  transform:rotate(45deg);
}
ol.steps{counter-reset:step;list-style:none;padding-left:0;}
ol.steps>li{
  position:relative;padding:4px 0 14px 50px;margin:0;
  border-left:2px solid var(--line);margin-left:15px;
  font-size:var(--fs-sm);line-height:var(--lh-base);
}
ol.steps>li:last-child{border-left-color:transparent;}
ol.steps>li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:-16px;top:0;
  width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-family);
  font-size:var(--fs-xs);font-weight:500;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Tables ---------- */
.tablewrap{
  overflow-x:auto;margin:18px 0;
  border:1px solid var(--line);border-radius:12px;
}
table{
  width:100%;border-collapse:collapse;
  font-size:var(--fs-sm);min-width:420px;
}
th,td{
  text-align:left;padding:11px var(--sp-5);
  border-bottom:1px solid var(--line);vertical-align:top;
}
thead th{
  background:var(--paper-2);font-weight:700;
  font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(56,88,233,.05);}
td code{white-space:nowrap;}

/* ---------- Callouts ---------- */
.note{
  display:flex;gap:14px;
  padding:var(--sp-5) 18px;
  border-radius:12px;margin:18px 0;
  font-size:var(--fs-sm);line-height:1.6;border:1px solid;
}
.note .ic{flex:0 0 22px;font-weight:700;font-family:var(--font-family);}
.note.tip{background:#eef6f0;border-color:#bfe0cb;color:#214d33;}
.note.tip .ic{color:var(--good);}
.note.warn{background:#fbf3e2;border-color:#ecd9a8;color:#5f4500;}
.note.warn .ic{color:var(--warn);}
.note.info{background:var(--accent-wash);border-color:#c0d0fb;color:#1f2d6e;}
.note.info .ic{color:var(--accent-deep);}

/* ---------- Code / kbd ---------- */
code,kbd{font-family:var(--font-family);font-size:.86em;}
:not(pre)>code{
  background:var(--paper-2);border:1px solid var(--line);
  padding:1px 6px;border-radius:5px;color:var(--accent-deep);
}
kbd{
  background:var(--ink);color:var(--paper);
  padding:2px 8px;border-radius:6px;font-size:.82em;
  border:1px solid #000;box-shadow:0 2px 0 #000;
}

/* ---------- Ability cards ---------- */
.ability{
  border:1px solid var(--line);border-radius:13px;
  padding:24px 26px;margin:18px 0;
  background:var(--paper-elev);
  position:relative;overflow:hidden;
}
.ability::after{
  content:attr(data-n);position:absolute;right:18px;top:6px;
  font-family:var(--font-family);
  font-size:80px;font-weight:600;
  color:rgba(30,30,30,.05);line-height:1;
}
.ability h4{margin-top:0;display:flex;align-items:center;gap:var(--sp-3);}
.ability .badge{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--radius-sm);
  background:var(--ink);color:var(--paper);
}
.ability .badge.wc{background:#7b3fb0;}
.ability .badge.seo{background:var(--accent);}
.ability .badge.img{background:#c2410c;}
.ability .badge.lang{background:#0d9488;}

.req{
  font-size:var(--fs-xs);color:var(--ink-faint);margin-top:14px;
  border-top:1px dashed var(--line-strong);padding-top:var(--sp-3);
}
.req b{color:var(--ink-soft);}

hr{border:none;border-top:1px solid var(--line);margin:30px 0;}
.endnote{
  font-size:var(--fs-xs);color:var(--ink-faint);
  text-align:center;margin-top:50px;font-style:italic;
}

/* ---------- Mobile ---------- */
.menu-btn{display:none;}
.scrim{display:none;}
@media (max-width:980px){
  .sidebar{
    position:fixed;left:0;top:0;z-index:60;
    transform:translateX(-100%);
    transition:transform 220ms ease;
    box-shadow:0 0 50px rgba(0,0,0,.25);
  }
  .sidebar.open{transform:translateX(0);}
  .scrim.show{
    display:block;position:fixed;inset:0;
    background:rgba(30,30,30,.45);z-index:50;
  }
  .topbar{
    display:flex;align-items:center;gap:14px;
    position:sticky;top:0;z-index:40;
    background:rgba(247,248,250,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    padding:12px 18px;
  }
  .menu-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--ink);color:var(--paper);border:none;
    padding:9px 14px;border-radius:9px;
    font-family:inherit;font-weight:600;font-size:var(--fs-sm);
    cursor:pointer;
    transition:background var(--motion-instant) ease;
  }
  .menu-btn:hover{background:#000;}
  .topbar .tb-title{font-family:var(--font-family);font-weight:600;font-size:var(--fs-lg);}
  .content{padding:36px var(--sp-8) 100px;}
  section.block{padding:24px var(--sp-7);}
  h3.sec{font-size:var(--fs-xl);}
}
@media (max-width:640px){
  .ability{padding:var(--sp-8) var(--sp-7);}
  .ability h4{flex-direction:column;align-items:flex-start;gap:9px;width:100%;}
  .ability .badge{align-self:flex-start;}
  .ability::after{font-size:48px;top:10px;right:14px;}
  .hero h2{font-size:var(--fs-3xl);}
  th,td{padding:var(--sp-3) 12px;}
}

/* ---------- Reduced motion (a11y) ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}