/* «مسودتك الأولية» (EOX.draft), inside the result step. One column: title, prompt, rows, the summary (the one big line), actions.
   A row stacks label / choice / result; columns only when the sheet is wide enough (container query). */
.eoxd{--sf:color-mix(in srgb,var(--paper) 70%,var(--indigo));--tc:var(--mute-d);container:eoxd/inline-size;margin-top:12px;padding:clamp(14px,2.4vw,24px);background:var(--night);border:1px solid var(--line-d);border-radius:var(--r);color:var(--sf);line-height:1.7;min-width:0;overflow-wrap:anywhere}
.eoxd [data-tone=good]{--tc:var(--ok)}
.eoxd [data-tone=bad]{--tc:var(--alert)}
.eoxd [data-tone=mid]{--tc:color-mix(in srgb,var(--coffee) 65%,var(--paper))}
.eoxd-t{margin:0;font-size:clamp(1.1rem,1.6vw,1.25rem);font-weight:600;line-height:1.5;color:#fff}
.eoxd-p{margin:2px 0 12px}
/* column heads only with columns: the prompt already asks */
.eoxd-hd{display:none;margin:0 0 6px;font-size:.82rem;font-weight:700;color:var(--mute-d)}
.eoxd-rows{list-style:none;margin:0;padding:0;display:grid}
.eoxd-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0;border-top:1px solid var(--line-d);min-width:0}
.eoxd-lab{display:flex;align-items:flex-start;gap:8px;min-width:0}
.eoxd-name{flex:1;min-width:0;margin:0;font-weight:500;line-height:1.9;color:#fff}
.eoxd-name .from-you,.eoxd-name .assume{margin-inline-start:6px}
.eoxd-ed{flex:none;width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--line-d);border-radius:8px;background:transparent;color:var(--mute-d);cursor:pointer;transition:color .15s,border-color .15s}
.eoxd-ed:hover,.eoxd-ed[aria-expanded=true]{color:#fff;border-color:var(--sky)}
.eoxd-ed svg{width:14px;height:14px}
.eoxd-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--line-d);border-radius:10px;overflow:hidden;min-width:0}
.eoxd-o{font:inherit;font-size:.86rem;font-weight:500;line-height:1.3;min-height:40px;padding:6px 4px;border:0;border-inline-start:1px solid var(--line-d);background:transparent;color:var(--sf);cursor:pointer;overflow-wrap:anywhere;transition:background .15s,color .15s}
.eoxd-o:first-child{border-inline-start:0}
.eoxd-o:hover{background:rgba(169,188,255,.08);color:#fff}
/* chosen: fill, ring, weight and a check, never colour alone */
.eoxd-o[aria-checked=true]{background:color-mix(in srgb,var(--tc) 20%,transparent);color:#fff;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--tc)}
.eoxd-o[aria-checked=true]::before{content:"✓ ";content:"✓ "/""}
.eoxd-o:focus-visible{outline-offset:-4px}
.eoxd-acc{font-size:.86rem;font-weight:600;color:var(--tc);min-width:0}
.eoxd-acc:empty{display:none}
.eoxd-dot{flex:none;width:9px;height:9px;margin-top:11px;border-radius:50%;border:2px solid var(--tc);background:var(--night)}
.eoxd-row[data-tone] .eoxd-dot{background:var(--tc)}
/* flow: one rail on the inline-start edge joins the stations */
.eoxd[data-kind=flow] .eoxd-row{padding-inline-start:24px;border-top:0}
.eoxd[data-kind=flow] .eoxd-dot{position:absolute;inset-inline-start:0;top:23px;margin:0}
.eoxd[data-kind=flow] .eoxd-hd{padding-inline-start:24px}
.eoxd[data-kind=flow] .eoxd-row:not(:last-child)::after{content:"";position:absolute;inset-inline-start:4px;top:35px;bottom:-20px;width:1px;background:var(--line-d)}
/* sources: the one source stands out */
.eoxd[data-kind=sources] .eoxd-row{padding-inline:12px;border-inline-start:3px solid transparent}
.eoxd[data-kind=sources] .is-src{background:rgba(101,141,255,.1);border-inline-start-color:var(--sky)}
.eoxd[data-kind=sources] .is-src .eoxd-acc{color:var(--sky-2)}
.eoxd[data-kind=sources] .eoxd-hd{padding-inline:15px 12px}
/* tiles: each indicator is a tile with an empty value */
.eoxd[data-kind=tiles] .eoxd-rows{gap:8px}
.eoxd[data-kind=tiles] .eoxd-row{padding:12px;border:1px solid var(--line-d);border-radius:10px}
.eoxd[data-kind=tiles] .eoxd-hd{padding-inline:13px}
.eoxd[data-kind=tiles] .eoxd-lab{order:-2}
.eoxd[data-kind=tiles] .eoxd-acc{order:-1;font-family:var(--f-mono);font-size:1.5rem;line-height:1}
.eoxd[data-kind=tiles] .eoxd-sum{border:0;padding-top:6px}
.eoxd[data-kind=register] .eoxd-acc{justify-self:start;border:1px solid currentColor;border-radius:8px;padding:1px 10px}
.eoxd-swap{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px;border:1px dashed var(--line-d);border-radius:10px;min-width:0}
.eoxd-swap .chip{font-size:.86rem;text-align:start;max-width:100%}
.eoxd-own{display:flex;gap:6px;flex:1 1 12rem;min-width:0}
.eoxd-own input{flex:1;min-width:0;min-height:40px;font:inherit;color:#fff;background:var(--night-2);border:1px solid var(--line-d);border-radius:8px;padding:6px 10px}
.eoxd-own input::placeholder{color:var(--mute-d);opacity:1}
.eoxd-own .chip{flex:none}
/* the peak of step 04. line-height 0: the big digit never changes the line's height */
.eoxd-sum{position:relative;margin:4px 0 0;padding-top:16px;border-top:1px solid var(--line-d);font-size:clamp(1.4rem,2.8vw,2rem);font-weight:300;line-height:1.45;text-wrap:balance}
.eoxd-sum.on{color:#fff}
.eoxd-n{display:inline-block;margin-inline-end:.1em;font-size:1.5em;font-weight:600;line-height:0;color:var(--sky);font-variant-numeric:tabular-nums}
.eoxd-n.tick{animation:eoxd-tick .22s cubic-bezier(.2,0,0,1)}
@keyframes eoxd-tick{from{opacity:.3;transform:translateY(.18em)}}
.eoxd-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.eoxd-acts [aria-disabled=true]{opacity:.45;cursor:default;filter:none;transform:none}
.eoxd-ok{font-size:.9rem;font-weight:600;color:var(--tc)}
.eoxd-note{margin:12px 0 0;font-size:.88rem;color:var(--mute-d)}
@media (max-width:560px),(pointer:coarse){.eoxd-o{min-height:44px}.eoxd-ed{width:40px;height:40px;margin-block:-4px}}
@container eoxd (min-width:620px){
  /* columns align on the label's first line */
  .eoxd-hd,.eoxd-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem) 8.5rem;column-gap:14px;align-items:start}
  .eoxd-lab{grid-area:1/1;padding-top:5px}.eoxd-seg{grid-area:1/2}.eoxd-acc{grid-area:1/3;margin-top:8px}.eoxd-swap{grid-area:2/1/auto/-1}
  .eoxd[data-kind=flow] .eoxd-dot{top:28px}
  .eoxd[data-kind=flow] .eoxd-row:not(:last-child)::after{top:40px}
}