/* =====================================================================
   THE THREAD - section 01 companion diagram (index.html)
   Eight loose files converge into one project: task tree, assessments,
   registers, deliverable. "Try it" re-rates task 2.3 in SPAR-H and the
   change travels the thread: HEP onto the node, rollup up the tree,
   the report's Ready mark lapses, the package holds.
   Pure SVG built by js/ergosphere-thread.js. No libraries.
   ===================================================================== */

.est_wrap { margin: 56px 0 0; }
.est_wrap .esi_frame { background: #0b1626; }
.est_stage { position: relative; padding: 18px 18px 6px; }
.est_svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- loose files ---------- */
.est_filebox { fill: #0f1c30; stroke: rgba(255,255,255,.16); stroke-width: 1; }
.est_fname { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 500; fill: rgba(255,255,255,.72); }
.est_ficon { stroke: none; }
.est_ficon.x-docx { fill: #5b9bff; }
.est_ficon.x-xlsx { fill: #4ade80; }
.est_ficon.x-zip  { fill: #94a3b8; }

/* ---------- records ---------- */
.est_box { fill: #0f1f36; stroke: rgba(0,212,255,.28); stroke-width: 1; transition: stroke .4s ease, fill .4s ease; }
.est_chip .est_box { fill: rgba(0,212,255,.08); }
.est_stripe { fill: #4ade80; transition: fill .5s ease; }
.est_stripe.b-mod { fill: #fbbf24; }
.est_stripe.b-none { fill: rgba(255,255,255,.14); }
.est_ent.is-file .est_box { fill: #0f1c30; stroke: rgba(255,255,255,.16); }
.est_num  { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 600; fill: #00d4ff; }
.est_val  { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 10.5px; font-weight: 500; fill: rgba(255,255,255,.55); transition: fill .4s ease; }
.est_val.b-mod { fill: #fbbf24; }
.est_title { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; fill: #fff; }
.est_chipt { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 11.5px; font-weight: 600; fill: #00d4ff; letter-spacing: .5px; }
.est_kick { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 10.5px; font-weight: 500; fill: rgba(255,255,255,.5); letter-spacing: .4px; }
.est_card .est_title { font-size: 14px; font-weight: 600; }

.est_pill rect { fill: rgba(0,212,255,.1); stroke: rgba(0,212,255,.35); stroke-width: 1; transition: fill .4s ease, stroke .4s ease; }
.est_pill text { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 10.5px; font-weight: 600; fill: #00d4ff; transition: fill .4s ease; }
.est_pill.s-ok rect   { fill: rgba(74,222,128,.12); stroke: rgba(74,222,128,.45); }
.est_pill.s-ok text   { fill: #4ade80; }
.est_pill.s-warn rect { fill: rgba(251,191,36,.12); stroke: rgba(251,191,36,.5); }
.est_pill.s-warn text { fill: #fbbf24; }

/* a record the change has just reached */
.est_ent.is-hot .est_box { stroke: #00d4ff; fill: #12294a; }

/* ---------- links and the thread ---------- */
.est_link { fill: none; stroke: rgba(0,212,255,.32); stroke-width: 1.2; }
.est_thread { fill: none; stroke: rgba(0,212,255,.5); stroke-width: 1.6; }
.est_thread.is-hot, .est_link.is-hot { stroke: #00d4ff; }
.est_flow { fill: none; stroke: #00d4ff; stroke-width: 1.6; stroke-dasharray: 3 29; stroke-linecap: round; opacity: 0; }
.est_wrap.is-live .est_flow { opacity: .8; animation: est_flow 3.2s linear infinite; }
.est_wrap.is-off .est_flow { animation-play-state: paused; }
@keyframes est_flow { to { stroke-dashoffset: -64; } }
.est_pulse { fill: #bff4ff; }

/* ---------- caption and controls ---------- */
.est_foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 14px 22px 20px;
  border-top: 1px solid rgba(255,255,255,.06); }
.est_cap { flex: 1 1 360px; margin: 0; min-height: 3.2em; font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,.82); transition: opacity .3s ease; }
.est_cap.is-swap { opacity: 0; }
.est_ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.est_wrap button.est_act { appearance: none; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500;
  padding: 11px 22px; border-radius: 4px; border: 1px solid #00d4ff; background: #00d4ff !important; color: #062033 !important;
  transition: background .25s ease, color .25s ease, opacity .25s ease; }
.est_wrap button.est_act:hover:not([disabled]) { background: transparent !important; color: #00d4ff !important; }
.est_wrap button.est_act[disabled] { opacity: .35; cursor: default; }
.est_wrap button.est_replay { appearance: none; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 13px; padding: 4px 0;
  border: 0; border-bottom: 1px solid rgba(0,212,255,.4); background: transparent !important; color: #00d4ff !important; }
.est_wrap button.est_replay:hover { border-bottom-color: #00d4ff; }
.est_wrap button:focus-visible { outline: 2px solid #00d4ff; outline-offset: 3px; }
.est_note { margin: 12px 0 0; font-size: 12.5px; color: rgba(255,255,255,.45); text-align: center; }

/* portrait layout: the JS swaps to a taller viewBox, the type sits larger in it */
.est_svg.is-tall .est_fname { font-size: 15px; }
.est_svg.is-tall .est_num, .est_svg.is-tall .est_val, .est_svg.is-tall .est_kick,
.est_svg.is-tall .est_pill text { font-size: 14px; }
.est_svg.is-tall .est_title { font-size: 15px; }
.est_svg.is-tall .est_chipt { font-size: 14.5px; }
.est_svg.is-tall .est_card .est_title { font-size: 18px; }

@media (max-width: 700px) {
  .est_wrap { margin-top: 40px; }
  .est_stage { padding: 12px 8px 4px; }
  .est_foot { padding: 12px 16px 18px; }
  .est_cap { font-size: 14px; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .est_wrap.is-live .est_flow { animation: none; opacity: 0; }
  .est_cap, .est_box, .est_stripe, .est_val, .est_pill rect, .est_pill text { transition: none; }
}