/* ============================================================
   CODIGOMORSE.IO — ENGLISH EDITION — content-layout components
   Same design system as ES/PT (Tailwind bundle + custom.css are loaded first:
   Space Grotesk / Inter, #faf8ff background, #ab3600 / #ff5f1f primary,
   #131b2e ink, sharp corners). This file only adds the en-* layout
   components used by theme/en/*.php. No fonts or global overrides here.
   ============================================================ */

:root{
  --en-cream:#faf8ff;
  --en-paper:#ffffff;
  --en-sand:#eaedff;
  --en-line:#dae2fd;
  --en-line-strong:#c9d2f0;
  --en-ink:#131b2e;
  --en-ink-2:rgba(19,27,46,.72);
  --en-ink-3:rgba(19,27,46,.5);
  --en-teal:#ab3600;
  --en-teal-dark:#832700;
  --en-teal-deep:#131b2e;
  --en-mint:#ffdbcf;
  --en-brass:#ff5f1f;
  --en-brass-soft:#ffdbcf;
  --en-coral:#ba1a1a;
  --en-coral-soft:#ffdad6;
  --en-radius:0;
  --en-radius-sm:0;
  --en-radius-pill:0;
  --en-shadow:0 10px 30px -14px rgba(19,27,46,.18);
  --en-shadow-sm:none;
  --en-font-display:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --en-font-body:'Inter',system-ui,-apple-system,sans-serif;
  --en-font-mono:'Space Grotesk',ui-monospace,Menlo,monospace;
  --en-wrap:1180px;
  --en-wrap-narrow:820px;
  --en-header-h:64px;
}

/* ---------- Base (scoped to the English templates; zero-specificity so component classes always win) ---------- */
html{scroll-padding-top:calc(var(--en-header-h) + 16px)}
body.en-body main{padding-top:var(--en-header-h);display:block}
:where(body.en-body main) a{color:var(--en-teal)}
:where(body.en-body main) a:hover{text-decoration:underline}
:where(body.en-body main) h1,:where(body.en-body main) h2,:where(body.en-body main) h3{font-family:var(--en-font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;color:var(--en-ink);margin:0 0 .4em}
:where(body.en-body main) h1{font-size:clamp(2.1rem,4.8vw,3.75rem)}
:where(body.en-body main) h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
:where(body.en-body main) h3{font-size:1.15rem;letter-spacing:.02em}
:where(body.en-body main) h4{font-family:var(--en-font-display);font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 .4em}
:where(body.en-body main) p{margin:0 0 1em}
:where(body.en-body main) button{font:inherit;cursor:pointer}
.en-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Layout ---------- */
.en-wrap{width:100%;max-width:var(--en-wrap);margin:0 auto;padding:0 20px}
.en-wrap--narrow{max-width:var(--en-wrap-narrow)}
.en-section{padding:56px 0}
.en-section--tight{padding:32px 0}
.en-section--band{background:var(--en-paper);border-top:1px solid var(--en-line);border-bottom:1px solid var(--en-line)}
.en-section--sand{background:var(--en-sand)}
.en-section--ink{background:var(--en-ink);color:#f3efe4}
.en-section--ink a{color:#9fd8d3}
.en-section--teal{background:var(--en-teal-deep);color:#e9f4f2}
.en-section--teal a{color:#bfe8e3}
.en-section__head{max-width:720px;margin-bottom:28px}
.en-section__head p{color:var(--en-ink-2);font-size:1.05rem}
.en-grid{display:grid;gap:18px}
.en-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.en-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.en-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.en-grid--auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.en-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.en-split--rev{grid-template-columns:300px minmax(0,1fr)}
.en-flex{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.en-stack>*+*{margin-top:18px}
.en-mt-0{margin-top:0}.en-mt-1{margin-top:8px}.en-mt-2{margin-top:16px}.en-mt-3{margin-top:28px}.en-mt-4{margin-top:44px}
.en-mb-0{margin-bottom:0}.en-mb-1{margin-bottom:8px}.en-mb-2{margin-bottom:16px}.en-mb-3{margin-bottom:28px}
.en-center{text-align:center}
.en-muted{color:var(--en-ink-3)}
.en-small{font-size:.875rem}
.en-hide-mobile{display:block}
.en-show-mobile{display:none}

/* ---------- Typography helpers ---------- */
.en-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--en-font-display);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--en-teal)}
.en-kicker::before{content:"";width:18px;height:2px;background:var(--en-brass);border-radius:0}
.en-kicker--plain::before{display:none}
.en-lede{font-size:1.05rem;line-height:1.65;color:var(--en-ink-2);max-width:720px}
.en-display{font-family:var(--en-font-display)}
.en-em{font-style:normal;color:var(--en-teal)}
.en-mono{font-family:var(--en-font-mono);letter-spacing:.08em}

/* ---------- Buttons ---------- */
.en-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:0;font-family:var(--en-font-display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;line-height:1;border:1px solid transparent;text-decoration:none;transition:transform .12s,background .15s,color .15s,border-color .15s,box-shadow .15s;white-space:nowrap;cursor:pointer}
.en-btn:hover{text-decoration:none;transform:translateY(-1px)}
.en-btn:active{transform:translateY(0)}
.en-btn svg{width:18px;height:18px;flex-shrink:0}
.en-btn--primary{background:linear-gradient(135deg,#ab3600 0%,#ff5f1f 100%);color:#fff}
.en-btn--primary:hover{opacity:.9;color:#fff}
.en-btn--ink{background:var(--en-ink);color:#fff}
.en-btn--ink:hover{background:#000;color:#fff}
.en-btn--brass{background:var(--en-brass);color:#fff}
.en-btn--brass:hover{background:#a86f0f;color:#fff}
.en-btn--ghost{background:var(--en-paper);color:var(--en-ink);border-color:var(--en-line-strong)}
.en-btn--ghost:hover{border-color:var(--en-ink);color:var(--en-ink)}
.en-btn--soft{background:var(--en-mint);color:var(--en-teal-dark)}
.en-btn--soft:hover{background:#d2e9e4;color:var(--en-teal-dark)}
.en-btn--sm{padding:9px 14px;font-size:.68rem}
.en-btn--sm svg{width:15px;height:15px}
.en-btn--lg{padding:17px 30px;font-size:.85rem}
.en-btn--icon{padding:10px}
.en-btn[disabled],.en-btn.is-busy{opacity:.55;pointer-events:none}
.en-btn.is-playing{background:var(--en-coral);color:#fff}
.en-btn--light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
.en-btn--light:hover{background:rgba(255,255,255,.2);color:#fff}
.en-btn--white{background:#fff;color:var(--en-teal-deep)}
.en-btn--white:hover{background:#f3efe4;color:var(--en-teal-deep)}

/* ---------- Cards ---------- */
.en-card{background:var(--en-paper);border:1px solid var(--en-line);border-radius:var(--en-radius);padding:22px;box-shadow:var(--en-shadow-sm)}
.en-card--flat{box-shadow:none}
.en-card--hover{transition:transform .15s,box-shadow .15s,border-color .15s;color:inherit;text-decoration:none;display:block}
.en-card--hover:hover{transform:translateY(-2px);box-shadow:var(--en-shadow);border-color:var(--en-line-strong);text-decoration:none}
.en-card--ink{background:var(--en-ink);color:#f3efe4;border-color:transparent}
.en-card--teal{background:var(--en-teal-deep);color:#e9f4f2;border-color:transparent}
.en-card--mint{background:var(--en-mint);border-color:#cfe4df}
.en-card--sand{background:var(--en-sand);border-color:var(--en-line-strong)}
.en-card__icon{width:40px;height:40px;border-radius:0;background:var(--en-mint);color:var(--en-teal);display:grid;place-items:center;margin-bottom:14px}
.en-card__icon svg{width:20px;height:20px}
.en-card h3{font-size:1.35rem;margin-bottom:6px}
.en-card p:last-child{margin-bottom:0}
.en-card__meta{font-size:.8rem;color:var(--en-ink-3)}
.en-link-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:var(--en-paper);border:1px solid var(--en-line);border-radius:0;color:var(--en-ink);text-decoration:none;transition:border-color .15s,background .15s}
.en-link-card:hover{border-color:var(--en-teal);background:#fff;text-decoration:none}
.en-link-card strong{font-weight:600}
.en-link-card .en-mono{color:var(--en-teal);font-size:.85rem;white-space:nowrap}
.en-link-card svg{width:16px;height:16px;color:var(--en-ink-3);flex-shrink:0}

/* ---------- Hero ---------- */
.en-hero{padding:48px 0 32px}
.en-hero--tool{padding-bottom:16px}
.en-hero h1{margin:12px 0 16px;max-width:900px}
.en-hero h1 .en-em{font-style:normal}
.en-hero .en-lede{margin-bottom:24px}
.en-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.en-hero--center{text-align:center}
.en-hero--center h1,.en-hero--center .en-lede,.en-hero--center .en-hero__actions{margin-left:auto;margin-right:auto;justify-content:center}
.en-hero__glyph{font-family:var(--en-font-display);font-size:clamp(6rem,18vw,13rem);line-height:.9;color:var(--en-ink)}

/* Breadcrumbs */
.en-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:var(--en-ink-3);margin:0;padding:0;list-style:none}
.en-crumbs li{display:flex;align-items:center;gap:8px}
.en-crumbs li+li::before{content:"/";color:var(--en-line-strong)}
.en-crumbs a{color:var(--en-ink-3)}
.en-crumbs a:hover{color:var(--en-teal)}
.en-crumbs [aria-current]{color:var(--en-teal);font-weight:600}

/* ---------- Tool workbench ---------- */
.en-tool{background:#f2f3ff;border:1px solid var(--en-line);overflow:hidden}
.en-tool__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--en-line);background:var(--en-sand)}
.en-tool__body{display:grid;grid-template-columns:1fr 1fr}
.en-tool__pane{padding:18px;min-width:0}
.en-tool__pane+.en-tool__pane{border-left:1px solid var(--en-line);background:var(--en-cream)}
.en-tool__label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;font-family:var(--en-font-display);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--en-ink-3)}
.en-tool__label .en-flex{gap:6px}
.en-tool textarea{width:100%;min-height:190px;resize:vertical;border:1px solid var(--en-line);border-radius:0;padding:14px;background:#fff;font-size:1.05rem;line-height:1.5;outline:none;transition:border-color .15s,box-shadow .15s}
.en-tool textarea:focus{border-color:var(--en-teal);box-shadow:0 0 0 3px rgba(171,54,0,.15)}
.en-tool textarea::placeholder{color:#a3aab3}
.en-tool__out{min-height:190px;border:1px solid var(--en-line);padding:16px;background:#fff;background-image:radial-gradient(circle,#dae2fd 1px,transparent 1px);background-size:24px 24px;font-family:var(--en-font-display);font-weight:700;font-size:1.6rem;letter-spacing:.14em;line-height:1.5;word-break:break-word;overflow-wrap:anywhere;color:var(--en-ink)}
.en-tool__out.is-empty{color:#a3aab3;font-family:var(--en-font-body);font-size:1rem;letter-spacing:0}
.en-tool__out--text{font-size:2rem;letter-spacing:.04em;text-transform:uppercase}
.en-tool__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--en-line);background:#fff;font-size:.85rem;color:var(--en-ink-3)}
.en-tool__controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.en-range{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--en-ink-2)}
.en-range input[type=range]{accent-color:var(--en-teal);width:120px}
.en-range output{font-family:var(--en-font-mono);min-width:3.5em;letter-spacing:0;color:var(--en-ink)}
.en-tabs{display:inline-flex;background:var(--en-sand);border:1px solid var(--en-line);padding:3px;gap:2px}
.en-tab{padding:8px 14px;font-family:var(--en-font-display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--en-ink-2);border:0;background:transparent;cursor:pointer;transition:background .15s,color .15s}
.en-tab[aria-selected="true"],.en-tab.is-active{background:var(--en-paper);color:var(--en-ink);box-shadow:var(--en-shadow-sm)}
.en-panel[hidden]{display:none}
.en-keypad{display:flex;flex-wrap:wrap;gap:8px}
.en-key{min-width:48px;height:44px;padding:0 14px;border-radius:0;border:1px solid var(--en-line-strong);background:#fff;font-family:var(--en-font-mono);font-size:1.1rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.en-key:hover{border-color:var(--en-teal);background:var(--en-mint)}
.en-key:active{transform:scale(.97)}

/* ---------- Morse visuals ---------- */
.en-morse{font-family:var(--en-font-mono);letter-spacing:.18em;color:var(--en-teal);font-weight:600}
.en-morse--xl{font-size:clamp(1.6rem,4.5vw,3rem);line-height:1.4;word-break:break-word}
.en-morse--lg{font-size:1.5rem}
.en-signal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;row-gap:10px}
.en-signal__dot{width:12px;height:12px;border-radius:50%;background:var(--en-ink)}
.en-signal__dash{width:34px;height:12px;border-radius:0;background:var(--en-ink)}
.en-signal__gap{width:10px}
.en-signal__word{width:22px}
.en-signal--lg .en-signal__dot{width:18px;height:18px}
.en-signal--lg .en-signal__dash{width:52px;height:18px;border-radius:0}
.en-signal--lg .en-signal__gap{width:16px}
.en-signal--teal .en-signal__dot,.en-signal--teal .en-signal__dash{background:var(--en-teal)}
.en-signal--brass .en-signal__dot,.en-signal--brass .en-signal__dash{background:var(--en-brass)}
.en-signal--light .en-signal__dot,.en-signal--light .en-signal__dash{background:#fff}
/* Timing strip: proportional bars (dot=1u, dash=3u) rendered as a timeline */
.en-strip{display:flex;align-items:center;gap:2px;height:22px;padding:6px;background:var(--en-sand);border-radius:var(--en-radius-pill);overflow-x:auto}
.en-strip span{display:block;height:100%;border-radius:0;flex:0 0 auto}
.en-strip .on{background:var(--en-teal)}
.en-strip .off{background:transparent}
/* Letter glyph tile */
.en-glyph{display:grid;place-items:center;justify-items:center;min-width:0;background:rgba(255,255,255,.9);border:1px solid var(--en-line);padding:32px;text-align:center;background-image:radial-gradient(circle,#dae2fd 1px,transparent 1px);background-size:24px 24px}
.en-glyph>*{max-width:100%;min-width:0}
.en-glyph__char{font-family:var(--en-font-display);font-weight:700;font-size:clamp(5rem,16vw,11rem);line-height:.9}
.en-glyph__morse{font-family:var(--en-font-mono);font-size:clamp(1.6rem,5vw,3rem);letter-spacing:.3em;color:var(--en-teal);margin:8px 0 18px}
/* Alphabet / number tiles */
.en-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.en-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;background:var(--en-paper);border:1px solid var(--en-line);border-radius:0;color:var(--en-ink);text-decoration:none;transition:border-color .15s,transform .15s,background .15s;cursor:pointer;text-align:center}
.en-tile:hover{border-color:var(--en-teal);transform:translateY(-2px);text-decoration:none;background:#fff}
.en-tile.is-active{border-color:var(--en-brass);background:var(--en-brass-soft)}
.en-tile__char{font-family:var(--en-font-display);font-size:2.2rem;line-height:1}
.en-tile__morse{font-family:var(--en-font-mono);font-size:.95rem;letter-spacing:.14em;color:var(--en-teal);font-weight:700}
.en-tile__sub{font-size:.72rem;color:var(--en-ink-3)}
/* Lamp (light / flashlight simulator) */
.en-lamp{width:160px;height:160px;border-radius:50%;margin:0 auto;background:#2a2f36;box-shadow:inset 0 0 0 10px #1c2026,0 0 0 1px #000;transition:background .05s,box-shadow .05s}
.en-lamp.is-on{background:#ffe27a;box-shadow:inset 0 0 0 10px #ffd34d,0 0 60px 20px rgba(255,210,77,.65)}
.en-lamp-stage{background:#0f1317;border-radius:0;padding:40px 20px;text-align:center;color:#cfd6de}

/* ---------- Tables ---------- */
.en-table-wrap{overflow-x:auto;border:1px solid var(--en-line);border-radius:var(--en-radius);background:var(--en-paper)}
.en-table{width:100%;border-collapse:collapse;font-size:.95rem}
.en-table th,.en-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--en-line);vertical-align:top}
.en-table th{font-family:var(--en-font-display);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--en-ink-3);background:var(--en-sand)}
.en-table tr:last-child td{border-bottom:0}
.en-table td.en-mono,.en-table .en-morse{font-size:1rem}
.en-table--compact th,.en-table--compact td{padding:8px 12px}
.en-table tbody tr:hover td{background:#fff}

/* ---------- Prose (long-form content) ---------- */
.en-prose{font-size:1.05rem;line-height:1.75;color:var(--en-ink-2);max-width:var(--en-wrap-narrow)}
.en-prose>*+*{margin-top:1.1em}
.en-prose h2{color:var(--en-ink);margin-top:2.2em;font-size:clamp(1.7rem,3vw,2.3rem)}
.en-prose h3{color:var(--en-ink);margin-top:1.8em;font-size:1.45rem}
.en-prose h2:first-child,.en-prose h3:first-child{margin-top:0}
.en-prose p{margin:0}
.en-prose strong{color:var(--en-ink);font-weight:600}
.en-prose ul,.en-prose ol{padding-left:1.4em;margin:0}
.en-prose li{margin:.35em 0}
.en-prose li::marker{color:var(--en-brass);font-weight:700}
.en-prose code,.en-prose .en-morse{font-family:var(--en-font-mono);background:var(--en-sand);padding:.1em .4em;border-radius:0;font-size:.92em;color:var(--en-teal-dark);letter-spacing:.08em}
.en-prose blockquote{margin:0;padding:16px 22px;border-left:4px solid var(--en-teal);background:#f1eefa;font-family:var(--en-font-display);font-weight:700;font-size:1.15rem;line-height:1.4;color:var(--en-ink)}
.en-prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.en-prose th,.en-prose td{padding:10px 12px;border-bottom:1px solid var(--en-line);text-align:left}
.en-prose th{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--en-ink-3)}
.en-prose img{border-radius:0}
.en-prose hr{border:0;border-top:1px solid var(--en-line);margin:2em 0}
.en-prose a{text-decoration:underline;text-decoration-color:rgba(11,110,106,.35);text-underline-offset:3px}
.en-prose a:hover{text-decoration-color:var(--en-teal)}

/* Callouts */
.en-callout{display:flex;gap:14px;padding:18px 20px;border-radius:0;background:var(--en-mint);border:1px solid #cfe4df;color:var(--en-teal-deep)}
.en-callout svg{width:22px;height:22px;flex-shrink:0;margin-top:2px}
.en-callout--brass{background:var(--en-brass-soft);border-color:#ecd9b0;color:#5a3d07}
.en-callout--coral{background:var(--en-coral-soft);border-color:#f5c7bb;color:#7a2413}
.en-callout p{margin:0}
.en-callout strong{display:block;margin-bottom:2px}

/* Steps */
.en-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:14px}
.en-steps li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start;padding:18px;background:var(--en-paper);border:1px solid var(--en-line);border-radius:0}
.en-steps li::before{content:counter(step);grid-column:1;grid-row:1/span 20;width:44px;height:44px;background:var(--en-teal);color:#fff;display:grid;place-items:center;font-family:var(--en-font-display);font-size:1.4rem}
.en-steps li>*{grid-column:2;min-width:0}
.en-steps strong{display:block;font-size:1.05rem;margin-bottom:4px;color:var(--en-ink)}
.en-steps p{margin:0;color:var(--en-ink-2)}

/* Stats */
.en-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.en-stat{padding:16px;border-radius:0;background:var(--en-paper);border:1px solid var(--en-line)}
.en-stat__n{font-family:var(--en-font-display);font-weight:700;font-size:2.2rem;line-height:1;color:var(--en-teal)}
.en-stat__l{font-size:.78rem;color:var(--en-ink-3);margin-top:6px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}

/* Chips & badges */
.en-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--en-sand);font-family:var(--en-font-display);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--en-ink-2);border:1px solid transparent;text-decoration:none}
a.en-chip:hover,button.en-chip:hover{border-color:var(--en-teal);color:var(--en-teal);text-decoration:none}
.en-chip.is-active{background:var(--en-ink);color:#fff}
.en-chip--teal{background:var(--en-mint);color:var(--en-teal-dark)}
.en-chip--brass{background:var(--en-brass-soft);color:#7a5209}
.en-chip--coral{background:var(--en-coral-soft);color:#9b2e17}
.en-badge{display:inline-block;padding:3px 9px;font-family:var(--en-font-display);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--en-ink);color:#fff}
.en-badge--teal{background:var(--en-teal)}
.en-badge--brass{background:var(--en-brass)}

/* FAQ */
.en-faq{display:grid;gap:10px;max-width:var(--en-wrap-narrow)}
.en-faq details{background:var(--en-paper);border:1px solid var(--en-line);border-radius:0;padding:0 20px;transition:border-color .15s}
.en-faq details[open]{border-color:var(--en-line-strong)}
.en-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-weight:600;font-size:1.02rem;color:var(--en-ink)}
.en-faq summary::-webkit-details-marker{display:none}
.en-faq summary svg{width:20px;height:20px;flex-shrink:0;color:var(--en-teal);transition:transform .2s}
.en-faq details[open] summary svg{transform:rotate(45deg)}
.en-faq__a{padding:0 0 18px;color:var(--en-ink-2);line-height:1.7}
.en-faq__a p:last-child{margin-bottom:0}

/* Table of contents (sticky side) */
.en-toc{position:sticky;top:calc(var(--en-header-h) + 20px);padding:18px;background:var(--en-paper);border:1px solid var(--en-line);border-radius:0}
.en-toc__title{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--en-ink-3);margin-bottom:10px}
.en-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.en-toc a{display:block;padding:6px 10px;border-radius:0;font-size:.9rem;color:var(--en-ink-2);text-decoration:none;border-left:2px solid transparent}
.en-toc a:hover,.en-toc a.is-active{background:var(--en-mint);color:var(--en-teal-dark);border-left-color:var(--en-teal)}

/* CTA band */
.en-cta{padding:44px 36px;background:#131b2e;border-left:6px solid #ff5f1f;color:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.en-cta::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.07)}
.en-cta h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:8px;color:#fff}
.en-cta p{margin:0;color:rgba(255,255,255,.82);max-width:560px}
.en-cta__actions{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:1}
.en-cta--ink{background:var(--en-ink)}
.en-cta--brass{background:linear-gradient(135deg,#ab3600 0%,#ff5f1f 100%);border-left-color:#131b2e}

/* Author / meta line for posts */
.en-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.85rem;color:var(--en-ink-3);align-items:center}
.en-meta svg{width:15px;height:15px;vertical-align:-3px;margin-right:4px}

/* Post cards */
.en-post{display:flex;flex-direction:column;gap:10px;background:var(--en-paper);border:1px solid var(--en-line);border-radius:0;padding:24px;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
.en-post:hover{transform:translateY(-2px);box-shadow:var(--en-shadow);text-decoration:none}
.en-post h2,.en-post h3{font-size:1.5rem}
.en-post p{color:var(--en-ink-2);margin:0}
.en-post .en-badge{align-self:flex-start}

/* Forms */
.en-field{display:flex;flex-direction:column;gap:6px}
.en-field label{font-size:.8rem;font-weight:600;color:var(--en-ink-2)}
.en-input{width:100%;padding:12px 14px;border:1px solid var(--en-line-strong);border-radius:0;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.en-input:focus{border-color:var(--en-teal);box-shadow:0 0 0 3px rgba(171,54,0,.15)}
.en-input.field-error{border-color:var(--en-coral)}
select.en-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7684' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}

/* Code blocks (API docs) */
.en-code{background:#131a21;color:#e6edf3;border-radius:0;padding:18px 20px;font-family:var(--en-font-mono);font-size:.88rem;line-height:1.6;overflow-x:auto;letter-spacing:0}
.en-code .c{color:#8b949e}.en-code .k{color:#7ee787}.en-code .s{color:#a5d6ff}.en-code .n{color:#ffa657}
.en-code-tabs{display:flex;gap:4px;border-bottom:1px solid var(--en-line);margin-bottom:12px;overflow-x:auto}
.en-code-tab{padding:8px 14px;font-size:.85rem;font-weight:600;color:var(--en-ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.en-code-tab.is-active{color:var(--en-teal);border-bottom-color:var(--en-teal)}
.en-endpoint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--en-font-mono);font-size:.9rem;letter-spacing:0}
.en-method{padding:3px 8px;border-radius:0;font-weight:700;font-size:.72rem;background:var(--en-mint);color:var(--en-teal-dark)}

/* Status indicators */
.en-status{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.en-status::before{content:"";width:10px;height:10px;border-radius:50%;background:#2fa36b;box-shadow:0 0 0 4px rgba(47,163,107,.2);animation:en-pulse 2s infinite}
@keyframes en-pulse{0%{box-shadow:0 0 0 0 rgba(47,163,107,.35)}70%{box-shadow:0 0 0 8px rgba(47,163,107,0)}100%{box-shadow:0 0 0 0 rgba(47,163,107,0)}}
.en-bar{height:8px;border-radius:0;background:var(--en-sand);overflow:hidden}
.en-bar span{display:block;height:100%;background:var(--en-teal);border-radius:0}

/* Toast */
.en-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--en-ink);color:#fff;padding:12px 24px;font-family:var(--en-font-display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;box-shadow:var(--en-shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:500;max-width:calc(100vw - 32px);text-align:center}
.en-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ---------- Print ---------- */
@media print{.en-toast,.no-print{display:none!important}body.en-body{background:#fff}.en-card,.en-tool{box-shadow:none}}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .en-split,.en-split--rev{grid-template-columns:1fr}
  .en-toc{position:static;order:-1}
}
@media (max-width:820px){
  .en-grid--3,.en-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .en-tool__body{grid-template-columns:1fr}
  .en-tool__pane+.en-tool__pane{border-left:0;border-top:1px solid var(--en-line)}
  .en-section{padding:40px 0}
  .en-cta{padding:32px 24px}
  .en-hide-mobile{display:none}
  .en-show-mobile{display:block}
}
@media (max-width:560px){
  .en-grid--2,.en-grid--3,.en-grid--4{grid-template-columns:1fr}
  .en-wrap{padding:0 16px}
  .en-hero{padding:32px 0 20px}
  .en-tool__out{font-size:1.2rem}
  .en-tool textarea{min-height:140px}
  .en-tiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .en-steps li{grid-template-columns:36px 1fr;gap:12px;padding:14px}
  .en-steps li::before{width:36px;height:36px;font-size:1.1rem}
  .en-btn{padding:11px 16px}
  .en-hero__actions .en-btn{flex:1 1 auto}
}