/* refarch-ela.css — the Enterprise Logs Analyzer Agent walkthrough
   (/architecture/enterprise-logs-analyzer-agent/).
   Loads after refarch.css and adds what this page has that the other .ra pages
   do not: the steering panel (failure + autonomy dial), the brief as it arrives
   in the incident thread with working buttons, and the dial ladder beside it.
   Everything here is page chrome, not figure, so it uses refarch.css's tokens
   and follows the light theme through the same remap. Every font-size is
   calc(<px> * var(--fs, 1)) at a 12px floor, like the rest of the site. */

  .ra-ela .drawer{width:min(440px,90vw); padding:24px 26px 40px}

/* ---- Steering panel ------------------------------------------------------ */
  .ela-steer{display:grid; gap:10px; margin:0 0 14px; padding:12px 14px;
    background:var(--panel); border:1px solid var(--line); border-radius:13px}
  .ela-row{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap}
  .ela-label{font-size:calc(12px * var(--fs, 1)); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); min-width:8.5em}
/* .seg is a single row in refarch.css (the layout toggle has two short
   buttons); four scenario names do not fit a 320px screen on one line. */
  .ela-seg{flex-wrap:wrap; gap:2px; max-width:100%}
  .ela-readout{margin:0; font-size:calc(13.5px * var(--fs, 1)); color:var(--muted); line-height:1.5}
  .ela-readout b{color:var(--ink)}
  @media (max-width:640px){ .ela-label{min-width:0; width:100%} }

/* ---- The brief in the incident thread ------------------------------------ */
  .ela-thread{margin-top:24px}
  .ela-thread-head h2{margin:0; font-size:calc(clamp(17px,2vw,21px) * var(--fs, 1)); font-weight:800; letter-spacing:-.01em}
  .ela-thread-head p{margin:4px 0 0; color:var(--muted); font-size:calc(13.5px * var(--fs, 1)); line-height:1.5; max-width:780px}
  .ela-thread-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:14px; margin-top:12px; align-items:start}
  @media (max-width:900px){ .ela-thread-grid{grid-template-columns:minmax(0,1fr)} }

  .ela-card{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--amber);
    border-radius:13px; padding:14px 16px; box-shadow:var(--glow); min-width:0}
  .ela-card-top{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
  .ela-who{font-size:calc(12px * var(--fs, 1)); color:var(--muted); font-weight:700}
/* The tier is told by its text; the colour only repeats it. */
  .ela-tier{font-size:calc(12px * var(--fs, 1)); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    padding:3px 9px; border-radius:999px; border:1px solid currentColor; white-space:nowrap}
  .ela-tier.lv-3{color:var(--mint)}
  .ela-tier.lv-2{color:var(--blue2)}
  .ela-tier.lv-1{color:var(--amber)}
  .ela-tier.lv-0{color:var(--slate)}
  .ela-card h3{margin:10px 0 2px; font-size:calc(17px * var(--fs, 1)); font-weight:800; letter-spacing:-.01em; color:var(--ink)}
  .ela-meta{margin:0; color:var(--muted); font-size:calc(12.5px * var(--fs, 1)); line-height:1.45}

  .ela-facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; margin:12px 0 0}
  .ela-facts div{min-width:0}
  .ela-facts .ela-wide{grid-column:1 / -1}
  .ela-facts dt{font-size:calc(12px * var(--fs, 1)); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:0 0 2px}
  .ela-facts dd{margin:0; font-size:calc(13.5px * var(--fs, 1)); line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
  .ela-facts code{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; font-size:calc(12.5px * var(--fs, 1));
    color:var(--ink); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:6px; padding:1px 6px; overflow-wrap:anywhere}
  .ela-facts .ela-line{display:block; padding:7px 10px; white-space:pre-wrap; line-height:1.5}
  @media (max-width:520px){ .ela-facts{grid-template-columns:minmax(0,1fr)} }

  .ela-status{margin:12px 0 0; padding:9px 12px; border-radius:10px; background:var(--panel2); border:1px solid var(--line);
    font-size:calc(13.5px * var(--fs, 1)); line-height:1.5; font-weight:600; color:var(--ink)}

  .ela-actions{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
  .ela-btn{font:inherit; font-size:calc(12.5px * var(--fs, 1)); font-weight:700; line-height:1.2; color:var(--ink);
    background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:8px 12px; min-height:34px; cursor:pointer;
    transition:border-color .2s, background .2s}
  .ela-btn:hover{border-color:var(--blue2)}
/* Same fill as the play button and the selected segments: white on it holds
   4.76:1 in the dark theme and 5.17:1 in the light one (see refarch.css). */
  .ela-btn.primary{background:var(--blue-fill); border-color:var(--blue-fill); color:#fff}
  .ela-btn[hidden]{display:none}

  .ela-ask{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line)}
  .ela-ask .ela-label{min-width:0; width:100%}
  .ela-q-btn{font:inherit; font-size:calc(12.5px * var(--fs, 1)); font-weight:600; line-height:1.25; color:var(--ink); text-align:left;
    background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 12px; min-height:32px; cursor:pointer;
    transition:border-color .2s}
  .ela-q-btn:hover{border-color:var(--teal)}

  .ela-reply{margin-top:12px; padding:10px 12px; border-radius:10px; min-height:58px;
    background:rgba(34,199,199,.07); border:1px solid rgba(34,199,199,.32)}
  .ela-reply p{margin:0; font-size:calc(13.5px * var(--fs, 1)); line-height:1.55}
  .ela-reply .ela-q{color:var(--muted); font-weight:700; margin-bottom:4px}
  .ela-reply .ela-a{color:var(--ink)}
  .ela-reply .ela-hint{color:var(--muted)}

/* ---- The dial ladder ----------------------------------------------------- */
  .ela-dial{background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:14px 16px; min-width:0}
  .ela-dial h3{margin:0; font-size:calc(15px * var(--fs, 1)); font-weight:800; color:var(--ink)}
  .ela-dial p{margin:4px 0 0; color:var(--muted); font-size:calc(13px * var(--fs, 1)); line-height:1.5}
  .ela-ladder{list-style:none; margin:12px 0 10px; padding:0; display:grid; gap:6px}
  .ela-ladder li{display:grid; grid-template-columns:minmax(0,6.5em) minmax(0,1fr); gap:2px 10px; align-items:start;
    padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.02)}
  .ela-lv{font-weight:800; font-size:calc(13.5px * var(--fs, 1)); color:var(--ink)}
  .ela-lv small{display:block; font-size:calc(12px * var(--fs, 1)); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
  .ela-do{font-size:calc(13px * var(--fs, 1)); color:var(--muted); line-height:1.45}
  .ela-marks{grid-column:2; font-size:calc(12px * var(--fs, 1)); font-weight:800; letter-spacing:.03em; color:var(--amber)}
  .ela-marks:empty{display:none}
/* State is carried by the text marks; border and fill only repeat it, and no
   row is dimmed, because dimmed text under 4.5:1 is the usual price of that. */
  .ela-ladder li.is-eff{border-color:var(--mint); box-shadow:inset 0 0 0 1px var(--mint); background:rgba(52,211,153,.08)}
  .ela-ladder li.is-capped{border-style:dashed}
  .ela-dial .ela-note{font-size:calc(12.5px * var(--fs, 1))}

/* ---- Light theme: the hard-coded translucent fills assume a dark page ----- */
  html[data-scheme="light"] .ra .ela-facts code{background:rgba(10,25,41,.04)}
  html[data-scheme="light"] .ra .ela-reply{background:rgba(10,102,117,.06); border-color:rgba(10,102,117,.35)}
  html[data-scheme="light"] .ra .ela-ladder li{background:rgba(10,25,41,.02)}
  html[data-scheme="light"] .ra .ela-ladder li.is-eff{background:rgba(15,122,85,.08)}

/* ---- 9:16 nodes: the colour cue moves to the left edge -------------------
   On a phone a node is ~58px wide and its label fills it, so the corner dot
   lands on the last letter of the first line ("Schedule•"). A left rule carries
   the same group colour without taking any of the label's width. */
  .ra-ela .vertical .node{border-left:3px solid var(--accent,#3B82F6)}
  .ra-ela .vertical .node .dot{display:none}