/* ═══ ENGINES — section, engine blocks, engine modal ═══
   Owned by WP2 — see docs/design-system.md §8 WP2.
   Context classes (.section--dark, .section--textured, .card--light, .engine-modal dark-context,
   .accent-*) and base components (.eyebrow, .section-title, .section-lead, .grid, .card, .badge,
   .chip, .btn) come from tokens.css/components.css (WP0) and are not redefined here. */

/* ── engines section wrapper ── */
.engines-section{padding:var(--space-24) var(--section-pad-x) var(--space-20)}

/* ── engine blocks (2x2 grid of glass tiles) ── */
.engine-row{gap:var(--space-5);margin-top:var(--space-10)}
.engine-block{display:flex;flex-direction:column;border-radius:var(--radius-xl);background:color-mix(in srgb,var(--color-navy-deep) 60%,transparent);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1.5px solid transparent;overflow:hidden;transition:transform var(--dur-slow),box-shadow var(--dur-slow),border-color var(--dur-slow);text-decoration:none;box-shadow:inset 0 1px 0 1px rgba(255,255,255,.06),0 8px 32px rgba(0,0,0,.12)}
.engine-block:hover{transform:translateY(-4px);box-shadow:var(--shadow-dark-md);border-color:var(--ec)}
.eb-text{padding:var(--space-8) var(--space-8) var(--space-5)}
.eb-row{display:flex;align-items:center;gap:var(--space-2-5);margin-bottom:var(--space-2)}
.eb-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}
.eb-tag{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-wider)}
.engine-block h3{font-family:var(--font-body);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--fg-strong);margin-bottom:var(--space-1)}
.engine-block .engine-tag{font-size:var(--fs-md);font-weight:var(--fw-regular);display:block;color:var(--fg);margin-bottom:var(--space-3)}
.eb-screen{margin:0 var(--space-6) var(--space-6);border-radius:var(--radius-md);background:rgba(0,0,0,.2);border:var(--border-w) solid rgba(255,255,255,.05);padding:var(--space-5) 1.4rem;min-height:160px;box-shadow:inset 0 2px 6px rgba(0,0,0,.15)}
.eb-screen-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:var(--border-w) solid rgba(255,255,255,.06)}
.eb-screen-title{font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--fg);text-transform:uppercase;letter-spacing:var(--ls-wide)}
.eb-screen-badge{background:var(--accent-tint);color:var(--accent)}
/* mini metric row inside screen */
.eb-mini-metrics{display:flex;gap:var(--space-4);margin-bottom:var(--space-4)}
.eb-mm{flex:1;background:var(--bg-panel);border:var(--border-w) solid rgba(255,255,255,.04);border-radius:var(--radius-sm);padding:var(--space-2-5) var(--space-3)}
.eb-mm-label{font-size:var(--fs-3xs);color:var(--fg);text-transform:uppercase;letter-spacing:var(--ls-wide);margin-bottom:var(--space-1);display:block}
.eb-mm-val{font-size:var(--fs-lg);font-weight:var(--fw-black);color:var(--fg-strong);line-height:1}
.eb-mm-delta{font-size:var(--fs-3xs);font-weight:var(--fw-bold);margin-left:var(--space-1-5)}
/* mini bars */
.eb-mini-bars{display:flex;flex-direction:column;gap:var(--space-2)}
.eb-mb{display:flex;align-items:center;gap:var(--space-2-5)}
.eb-mb-label{font-size:.65rem;color:var(--fg);min-width:70px;font-weight:var(--fw-medium)}
.eb-mb-track{flex:1;height:4px;border-radius:var(--radius-xs);background:rgba(255,255,255,.06);overflow:hidden}
.eb-mb-fill{height:100%;border-radius:var(--radius-xs)}
/* mini chart inside screen */
.eb-mini-chart{width:100%;height:40px;display:block}
.eb-video-wrap{margin:0 var(--space-6) var(--space-5);border-radius:var(--radius-md);overflow:hidden;border:var(--border-w) solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);aspect-ratio:16/9;margin-top:auto}
.eb-video-wrap iframe{width:100%;height:100%;display:block;border:0}
.eb-footer{padding:var(--space-5) var(--space-8) var(--space-6);border-top:var(--border-w) solid rgba(255,255,255,.06)}
.eb-punch{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--fg);margin-bottom:var(--space-2);line-height:var(--lh-relaxed)}
.engine-more svg{width:13px;height:13px;flex-shrink:0;transition:transform var(--dur-fast)}
.engine-block:hover .engine-more{background:var(--color-white);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.engine-block:hover .engine-more svg{transform:translateX(2px) translateY(-2px)}

/* ── engine modal ── */
.engine-modal-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:color-mix(in srgb,var(--color-navy-deep) 70%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity var(--dur-slow),visibility var(--dur-slow)}
.engine-modal-overlay.active{opacity:1;visibility:visible}
.engine-modal{position:fixed;z-index:var(--z-modal);inset:1.2rem;border-radius:var(--radius-xl);background:var(--color-navy);background-image:linear-gradient(170deg,var(--color-navy-light) 0%,var(--color-navy) 40%,var(--color-navy-deep) 100%);box-shadow:var(--shadow-dark-lg),var(--shadow-inset-top);overflow:hidden;opacity:0;visibility:hidden;transform:scale(.97) translateY(16px);transition:opacity var(--dur-slow),transform var(--dur-slower) var(--ease-out),visibility var(--dur-slow);display:flex;flex-direction:column}
.engine-modal.active{opacity:1;visibility:visible;transform:scale(1) translateY(0)}
/* top bar — close only */
.engine-modal-topbar{display:flex;align-items:center;justify-content:flex-end;padding:var(--space-3) var(--space-5);flex-shrink:0;position:absolute;top:0;right:0;z-index:var(--z-raised)}
.engine-modal-close{position:relative;width:36px;height:36px;border-radius:var(--radius-full);border:var(--border-w) solid var(--bg-card-hover);background:var(--bg-card);color:var(--fg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);flex-shrink:0}
/* hit-slop: keep the visible 36px circle unchanged, expand the tappable area to 44x44 */
.engine-modal-close:hover{background:var(--bg-card-hover);color:var(--fg-strong);border-color:var(--line-strong)}
/* scrollable body — hidden scrollbar */
.engine-modal-scroll{flex:1;overflow-y:auto;padding:var(--space-10) var(--space-12) var(--space-8);scrollbar-width:none;-ms-overflow-style:none;min-height:0}
.engine-modal-scroll::-webkit-scrollbar{display:none}
/* header inside scroll */
.engine-modal-header{text-align:center;margin-bottom:var(--space-8);max-width:640px;margin-inline:auto;padding-top:var(--space-2)}
.engine-modal-header .section-title{margin-bottom:var(--space-3)}
/* engine selector hint */
.engine-modal-tabs-label{text-align:center;margin-bottom:var(--space-3)}
/* tabs — below header */
.engine-modal-tabs{display:flex;gap:var(--space-2-5);flex-wrap:wrap;justify-content:center;margin-bottom:var(--space-8);padding:var(--space-2) var(--space-3);background:var(--bg-panel);border-radius:var(--radius-lg);border:var(--border-w) solid var(--line)}
.engine-modal-tab{padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);border:var(--border-w-ctl) solid var(--line-strong);background:var(--bg-card);font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--fg-muted);cursor:pointer;transition:border-color var(--dur-base),background-color var(--dur-base),color var(--dur-base),transform var(--dur-base);display:inline-flex;align-items:center;gap:.55rem}
.engine-modal-tab .tab-dot{width:9px;height:9px;border-radius:var(--radius-full);flex-shrink:0;opacity:.6;transition:opacity var(--dur-fast)}
.engine-modal-tab:hover{border-color:var(--line-strong);color:var(--fg-strong);background:var(--bg-card-hover);transform:translateY(-1px)}
.engine-modal-tab:hover .tab-dot{opacity:1}
.engine-modal-tab.active{border-color:transparent;color:var(--fg-strong);box-shadow:0 2px 12px rgba(0,0,0,.15)}
.engine-modal-tab.active .tab-dot{opacity:1}
.engine-modal-tab.active[data-engine="live"]{background:color-mix(in srgb,var(--color-cyan) 18%,transparent);color:var(--color-cyan);border-color:color-mix(in srgb,var(--color-cyan) 25%,transparent)}
.engine-modal-tab.active[data-engine="intent"]{background:color-mix(in srgb,var(--color-coral) 18%,transparent);color:var(--color-coral);border-color:color-mix(in srgb,var(--color-coral) 25%,transparent)}
.engine-modal-tab.active[data-engine="expansion"]{background:color-mix(in srgb,var(--color-green) 18%,transparent);color:var(--color-green);border-color:color-mix(in srgb,var(--color-green) 25%,transparent)}
.engine-modal-tab.active[data-engine="content"]{background:color-mix(in srgb,var(--color-purple) 18%,transparent);color:var(--color-purple);border-color:color-mix(in srgb,var(--color-purple) 25%,transparent)}
/* content panels */
.engine-modal-content{display:none;animation:modalFadeIn var(--dur-slow) ease}
.engine-modal-content.active{display:flex}
/* white content card */
.engine-modal-card{border-radius:var(--radius-lg);padding:var(--space-10);grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:start;width:100%}
/* ed- styles */
.ed-label[data-engine="live"]{color:var(--color-cyan)}
.ed-label[data-engine="intent"]{color:var(--color-coral)}
.ed-label[data-engine="expansion"]{color:var(--color-green)}
.ed-label[data-engine="content"]{color:var(--color-purple)}
.ed-steps{display:flex;flex-direction:column;gap:var(--space-5)}
.ed-step{position:relative;padding-left:var(--space-11)}
.ed-step-num{position:absolute;left:0;top:1px;font-size:var(--fs-xs);font-weight:var(--fw-bold);width:28px;height:28px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;border:var(--border-w-ctl) solid var(--line-strong);color:var(--fg-muted);background:var(--bg-panel)}
.ed-step h4{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--fg-strong);margin-bottom:var(--space-1)}
.ed-step p{font-size:var(--fs-md);color:var(--fg-muted);line-height:var(--lh-body)}
.ed-step .provoc{font-style:italic}
.ed-visual{background:var(--bg-panel);border:var(--border-w) solid var(--line);border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;justify-content:center}
.ed-visual-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:var(--border-w) solid var(--line)}
.ed-visual-title{font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-wider);color:var(--fg-muted)}
.ed-bars{display:flex;flex-direction:column;gap:var(--space-2-5)}
.ed-bar-row{display:flex;align-items:center;gap:var(--space-3)}
.ed-bar-label{font-size:var(--fs-base);color:var(--fg-muted);min-width:110px;font-weight:var(--fw-medium)}
.ed-bar-track{flex:1;height:8px;border-radius:var(--radius-xs);background:var(--line);overflow:hidden}
.ed-bar{height:100%;border-radius:var(--radius-xs);transition:width var(--dur-draw) var(--ease-standard)}
.ed-bar-val{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--heading);min-width:36px;text-align:right}
/* modal chart variants */
.ed-line-chart{width:100%;height:160px;display:block;margin-top:var(--space-2)}
.ed-line-chart .line-anim{stroke-dasharray:500;stroke-dashoffset:500;animation:drawLine 1.5s ease .3s forwards}
.ed-donut-wrap{display:flex;align-items:center;gap:var(--space-7);margin-top:var(--space-2)}
.ed-donut{width:140px;height:140px;flex-shrink:0;position:relative}
.ed-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.ed-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ed-donut-val{font-size:var(--fs-2xl);font-weight:var(--fw-black);color:var(--heading);line-height:1}
.ed-donut-sub{font-size:var(--fs-xs);color:var(--fg-muted);margin-top:var(--space-0-5)}
.ed-donut-legend{display:flex;flex-direction:column;gap:var(--space-2-5);flex:1}
.ed-donut-legend span{font-size:var(--fs-md);color:var(--fg-muted);display:flex;align-items:center;gap:var(--space-2)}
.ed-legend-dot{width:10px;height:10px;border-radius:var(--radius-full);display:inline-block;flex-shrink:0}
.ed-scatter{width:100%;margin-top:var(--space-2)}
.ed-scatter-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:var(--border-w) solid var(--line)}
.ed-scatter-row:last-child{border-bottom:none}
.ed-scatter-label{font-size:var(--fs-base);color:var(--fg-muted);min-width:90px;font-weight:var(--fw-medium)}
.ed-scatter-dots{flex:1;display:flex;gap:5px;align-items:center}
.ed-scatter-dot{border-radius:var(--radius-full);transition:transform var(--dur-fast)}
.ed-scatter-dot:hover{transform:scale(1.5)}
.ed-scatter-val{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--heading);min-width:36px;text-align:right}
/* modal bottom CTA — sticky footer */
.engine-modal-cta{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:var(--space-6);padding:var(--space-3) var(--space-8);border-top:var(--border-w) solid rgba(255,255,255,.08);background:linear-gradient(180deg,color-mix(in srgb,var(--color-navy-deep) 95%,transparent),var(--color-navy-deep))}
.engine-modal-cta p{font-size:var(--fs-base);color:var(--fg-muted);margin:0;line-height:var(--lh-relaxed)}
.engine-modal-cta strong{color:var(--fg-strong);font-weight:var(--fw-bold)}

@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes dotAppear{to{opacity:1}}
@keyframes donutDraw{from{stroke-dashoffset:var(--dash-total)}to{stroke-dashoffset:var(--dash-offset)}}

@media(max-width:1024px){
  .engine-row{grid-template-columns:1fr 1fr;gap:var(--space-5)}
  .engine-modal{inset:.6rem}
  .engine-modal-scroll{padding:var(--space-8) var(--space-8) var(--space-10)}
  .engine-modal-card{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-8)}
}
@media(max-width:640px){
  .engine-modal{inset:.4rem;border-radius:var(--radius-lg)}
  .engine-modal-scroll{padding:var(--space-6) var(--space-5) var(--space-8)}
  .engine-modal-card{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-6)}
  .engine-modal-tabs{gap:var(--space-1);padding:var(--space-1-5) var(--space-2)}
  .engine-modal-tab{padding:var(--space-3-5) var(--space-4);font-size:var(--fs-sm)}
  .engine-modal-tabs-label{font-size:var(--fs-xs);margin-bottom:var(--space-2)}
  .ed-donut-wrap{flex-direction:column;align-items:center;gap:1.1rem}
  .ed-donut-legend{align-items:center;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-3-5)}
  .engine-modal-cta{flex-direction:column;gap:var(--space-2-5);padding:var(--space-3-5) var(--space-5);text-align:center}
  .engine-row{grid-template-columns:1fr}
}
@media(max-width:480px){
  .eb-mini-metrics{flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
  .eb-mm{flex:0 0 calc(50% - .25rem);max-width:calc(50% - .25rem)}
  .engine-modal-tabs{flex-direction:column;gap:var(--space-1-5);padding:var(--space-2) var(--space-3)}
  .engine-modal-tab{width:100%;justify-content:center;padding:var(--space-2-5) var(--space-4);font-size:var(--fs-md)}
  /* engine-modal-card: no white card any more, content sits directly on navy. Rather than
     restating the dark palette, the .card--light island is dropped so every token inherits the
     surrounding .engine-modal dark context again -- including the accent/focus tokens, which the
     old hand-written copy left on their light values. */
  .engine-modal-card{background:transparent;padding:0;box-shadow:none;border-radius:0;gap:var(--space-6);
    --bg:inherit;--bg-card:inherit;--bg-card-hover:inherit;--bg-panel:rgba(255,255,255,.05);
    --fg-strong:inherit;--fg:inherit;--fg-muted:inherit;--fg-faint:inherit;
    --line:inherit;--line-strong:inherit;
    --accent-fg:inherit;--accent-tint:inherit;--btn-outline:inherit;--focus-ring:inherit;--error:inherit;--heading:inherit;
    color:var(--fg)}
}
@media(max-width:380px){
  .eb-screen{margin:0 var(--space-4) var(--space-4);padding:var(--space-4) var(--space-4);min-height:auto}
  .eb-video-wrap{margin:0 var(--space-4) var(--space-3-5)}
  .eb-mm{padding:var(--space-2) var(--space-2)}
  .eb-mm-val{font-size:var(--fs-base)}
  .eb-mb-label{min-width:60px;font-size:var(--fs-3xs)}
  .eb-text{padding:var(--space-6) var(--space-6) var(--space-4)}
}
@media(max-width:320px){
  .eb-text{padding:var(--space-5) var(--space-5) var(--space-3-5)}
  .eb-screen{margin:0 var(--space-2-5) var(--space-2-5);padding:var(--space-3) var(--space-3);min-height:auto}
  .eb-screen-head{margin-bottom:var(--space-2-5);padding-bottom:var(--space-2)}
  .eb-mini-metrics{gap:var(--space-1);margin-bottom:var(--space-2-5)}
  .eb-mm{padding:var(--space-1-5) var(--space-1-5);flex:0 0 calc(50% - .15rem);max-width:calc(50% - .15rem)}
  .eb-mm-val{font-size:var(--fs-md)}
  .eb-mm-label{font-size:.52rem}
  .eb-mm-delta{font-size:.52rem;margin-left:var(--space-1)}
  .eb-mb-label{min-width:50px;font-size:var(--fs-3xs)}
  .eb-mini-chart{height:32px}
  .eb-punch{font-size:.75rem;line-height:1.4}
  .eb-footer{padding:var(--space-3-5) var(--space-5) var(--space-4)}
}