.ed-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ed-head .name{flex:1;min-width:240px}
.ed-head .name input{width:100%;font-size:var(--fs-lg);font-weight:700}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
@media (max-width:1100px){.layout{grid-template-columns:1fr}.aside{position:static!important;order:-1}}
.aside{position:sticky;top:76px;display:flex;flex-direction:column;gap:16px}
/* step rail */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.rail button{text-align:start;border:1.5px solid var(--a-hair);background:var(--a-surface);border-radius:var(--r-m);padding:10px 12px;display:flex;gap:10px;align-items:flex-start;min-height:64px}
.rail .num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--a-on-fill);background:var(--tone)}
.rail .opt .num{background:none;border:2px solid var(--tone);color:var(--tone)}
.rail .t{font-weight:800;font-size:var(--fs-sm)} .rail .s{font-size:var(--fs-xs);color:var(--a-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rail .st{margin-inline-start:auto;font-size:var(--fs-xs);font-weight:800}
.rail .ok .st{color:var(--a-ok)} .rail .todo .st{color:var(--a-muted)} .show-errors .rail .bad{border-color:var(--a-crit)} .show-errors .rail .bad .st{color:var(--a-crit)}
/* steps */
.step{margin-bottom:20px;border-top:4px solid var(--tone)}
.step>header{display:flex;gap:12px;align-items:center;margin-bottom:4px}
.step>header h2{font-size:var(--fs-lg)}
.step>.lead{color:var(--a-muted);margin:0 0 12px;font-size:var(--fs-sm)}
.pill-opt{font-size:var(--fs-xs);font-weight:700;border:1px solid var(--a-hair);border-radius:999px;padding:2px 8px;color:var(--a-muted)}
.item{border:1.5px solid var(--a-hair);border-radius:var(--r-m);background:var(--a-surface);padding:12px;position:relative}
.item.open{border-color:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 15%,transparent)}
.item .row{display:flex;gap:10px;align-items:center}
.item .sum{flex:1;font-weight:600}
.item .sum small{display:block;font-weight:400;color:var(--a-muted)}
.or{display:flex;align-items:center;gap:10px;margin:8px 0;color:var(--a-muted);font-weight:800;font-size:var(--fs-sm)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--a-hair)}
.or span{border:1.5px solid var(--a-hair);border-radius:999px;padding:2px 14px;background:var(--a-surface)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.tile{border:1.5px solid var(--a-hair);border-radius:var(--r-m);background:var(--a-surface);padding:12px;text-align:start;display:flex;flex-direction:column;gap:2px;min-height:76px}
.tile b{font-size:var(--fs-base)} .tile span{font-size:var(--fs-xs);color:var(--a-muted)}
.tile:hover{border-color:var(--tone,var(--a-primary))}
.tile[disabled]{opacity:.55;cursor:not-allowed}
.sub{margin-top:14px;padding-top:12px;border-top:1px dashed var(--a-hair)}
.sub>.flabel{display:block;margin-bottom:8px}
/* 24h time */
.time24{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.time24 .clock{direction:ltr;display:flex;align-items:center;gap:4px;border:1.5px solid var(--a-hair);border-radius:var(--r-m);padding:4px 8px;background:var(--a-surface)}
.time24 .clock input{width:3.2ch;border:0;background:none;text-align:center;font-size:var(--fs-xl);font-weight:800;padding:4px 0}
.time24 .clock b{font-size:var(--fs-xl)}
.time24 .clock input:focus{outline:2px solid var(--a-primary);border-radius:6px}
/* zman list */
.zlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.zlist button{border:1.5px solid var(--a-hair);border-radius:var(--r-m);background:var(--a-surface);padding:10px;text-align:start;display:flex;flex-direction:column}
.zlist button[aria-pressed=true]{border-color:var(--a-primary);background:var(--a-primary-soft);box-shadow:inset 0 0 0 1px var(--a-primary)}
.zlist .tm{font-size:var(--fs-lg);font-weight:800;direction:ltr;text-align:end}
.zlist small{color:var(--a-muted);font-size:var(--fs-xs)}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--a-hair);border-radius:var(--r-m);overflow:hidden;background:var(--a-surface)}
.stepper button{border:0;background:var(--a-surface2);min-width:44px;min-height:44px;font-weight:800}
.stepper input{width:5ch;border:0;text-align:center;background:none;font-weight:700;font-size:var(--fs-md)}
.stepper .u{padding:0 10px;color:var(--a-muted);font-size:var(--fs-sm)}
/* device picker */
.picked{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:var(--r-m);background:var(--tone-soft,var(--a-act-soft));margin-bottom:10px;min-height:48px;align-items:center}
.picked .chip{background:var(--a-surface);border-color:var(--a-hair)}
.picked .chip b{font-weight:800;margin-inline-start:2px}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
@media (max-width:600px){.filters{grid-template-columns:1fr}}
.dlist{max-height:300px;overflow:auto;border:1px solid var(--a-hair);border-radius:var(--r-m);margin-top:8px}
.dlist button{display:flex;width:100%;align-items:center;gap:10px;border:0;border-bottom:1px solid var(--a-hair2);background:var(--a-surface);padding:10px 12px;min-height:52px;text-align:start}
.dlist button[aria-pressed=true]{background:var(--a-act-soft)}
.box{width:22px;height:22px;border-radius:6px;border:2px solid var(--a-outline);display:grid;place-items:center;flex:none;color:#fff;font-weight:900;font-size:14px}
[aria-pressed=true]>.box{background:var(--a-act);border-color:var(--a-act)}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.ctl{border:1px solid var(--a-hair);border-radius:var(--r-m);padding:12px;margin-top:10px}
.ctl h4{margin:0 0 8px;font-size:var(--fs-sm);display:flex;gap:8px;align-items:center}
.ctl .lbl{font-size:var(--fs-xs);font-weight:700;color:var(--a-muted);margin:10px 0 4px}
.range{display:flex;align-items:center;gap:10px}
.range input{flex:1;accent-color:var(--a-act)}
.range output{min-width:5ch;font-weight:800;direction:ltr;text-align:center}
.range .ends{font-size:var(--fs-xs);color:var(--a-muted)}
/* timeline */
.tl{position:relative;padding-inline-start:28px}
.tl::before{content:"";position:absolute;inset-inline-start:11px;top:8px;bottom:8px;width:2px;background:var(--a-act-soft)}
.tl .node{position:relative;margin-bottom:6px}
.tl .node::before{content:attr(data-n);position:absolute;inset-inline-start:-28px;top:14px;width:24px;height:24px;border-radius:50%;background:var(--a-act);color:var(--a-on-fill);font-size:var(--fs-xs);font-weight:800;display:grid;place-items:center}
.tl .node.delay::before{content:"⏱";background:var(--a-surface);color:var(--a-act);border:2px solid var(--a-act)}
.delaybox{border:1.5px dashed var(--a-act);background:var(--a-act-soft);border-radius:var(--r-m);padding:8px 12px}
.handle{cursor:grab;color:var(--a-muted);border:0;background:none;font-size:18px;padding:4px;min-width:32px;min-height:40px}
.mv{display:flex;flex-direction:column}
.mv button{border:0;background:none;color:var(--a-muted);font-size:12px;padding:2px 6px}
.mv button:disabled{opacity:.3}
.node.dragging{opacity:.4}
.node.drop-before{box-shadow:0 -3px 0 var(--a-act)}
.insert{display:flex;gap:6px;margin:4px 0 10px}
.insert button{font-size:var(--fs-xs);border:1px dashed var(--a-hair);background:none;border-radius:999px;padding:4px 10px;color:var(--a-act);font-weight:700;min-height:32px}
/* aside */
.sentence{font-size:var(--fs-md);line-height:1.8}
.sp{all:unset;cursor:pointer;border-bottom:2px solid transparent;border-radius:4px}
.sp:hover,.sp:focus-visible{background:var(--a-primary-soft);border-bottom-color:var(--a-primary)}
.sp.empty{color:var(--a-muted);border-bottom:2px dashed var(--a-outline)}
.todo-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.todo-list button{all:unset;cursor:pointer;display:flex;gap:8px;font-size:var(--fs-sm);padding:4px 0}
.todo-list button::before{content:"○";color:var(--a-muted)}
.show-errors .todo-list button{color:var(--a-crit)} .show-errors .todo-list button::before{content:"!";font-weight:900}
.runs{list-style:none;margin:8px 0 0;padding:0}
.runs li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--a-hair2)}
.runs .when{font-weight:800}
.runs .date{font-size:var(--fs-xs);color:var(--a-muted)}
.runs .tag{grid-column:1/-1;font-size:var(--fs-xs);color:var(--a-muted)}
.runs .tag b{color:var(--a-primary)}
.flash{animation:flash 1.2s var(--ease-std)}
@keyframes flash{0%{box-shadow:0 0 0 6px var(--a-primary-soft)}100%{box-shadow:none}}
dialog{border:0;border-radius:var(--r-l);padding:20px;background:var(--a-surface);color:var(--a-ink);box-shadow:var(--sh-3);max-width:420px}
dialog::backdrop{background:var(--a-scrim)}

.runs li.skip .when{text-decoration:line-through;color:var(--a-muted)}
.runs .verdict{grid-column:1/-1;font-size:var(--fs-xs);font-weight:700}
.runs li.run .verdict{color:var(--a-ok)} .runs li.skip .verdict{color:var(--a-crit)}
.cnow li{font-size:var(--fs-sm);padding:2px 0} .cnow li.ok{color:var(--a-ok)} .cnow li.no{color:var(--a-muted)}
.cnow{gap:0}

/* phone wizard (<760px): one step at a time */
.wz-prog,.wz-nav,.wz-review{display:none}
@media (max-width:759px){
 .wizard .wz-prog{display:block;margin-bottom:12px}
 .wz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
 .wz-dots{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
 .wz-dots button{all:unset;cursor:pointer;font-size:var(--fs-2xs);color:var(--a-muted);text-align:center;display:flex;flex-direction:column;gap:4px;min-height:32px}
 .wz-dots span{height:6px;border-radius:999px;background:var(--a-hair)}
 .wz-dots .done span{background:var(--a-ok)} .wz-dots .cur span{background:var(--a-primary)} .wz-dots .cur{color:var(--a-ink);font-weight:800}
 .wizard .step,.wizard .aside{display:none}
 .wizard[data-cur=when] #step-when,.wizard[data-cur=if] #step-if,.wizard[data-cur=then] #step-then{display:block}
 .wizard[data-cur=review] .wz-review{display:block;margin-bottom:12px}
 .wizard[data-cur=review] .aside{display:flex}
 .wizard .wz-nav{display:flex;justify-content:space-between;gap:8px;position:fixed;bottom:0;inset-inline:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--a-surface);border-top:1px solid var(--a-hair);z-index:var(--z-sticky)}
 .wizard .wz-nav .btn{flex:1}
 .wizard{padding-bottom:84px}
 .wizard .ed-head #saveBtn,.wizard .ed-head .name{display:none}
 .wizard .layout{display:block}
 .tl{padding-inline-start:22px}
}
@media (max-width:759px){#toasts{bottom:96px}}
