/* planflow-loops.css — round 60 (loops L2, part one): the LOOP family on the
   canvas. A loop is one card and one frame in the plan group's language
   (docs/planflow/LOOPS_DESIGN.md §2): the same anatomy, its own colour — the
   teal the owner accepted on 2026-11-02 (`--pf-family-loop`), never the gold
   of a plan group nor the purple of the legacy repeat clones. Loads AFTER
   planflow-groups.css and planflow-frames.css: it restates the gold literals
   those two use for the folded card's step sections and the frame head.
   Night mode: the same mixes planflow-night.css applies to the gold. */

/* ---- the card ------------------------------------------------------------- */
.aw-newblocks .block.wf-block[data-family="loop"]{
  --wf-family:var(--pf-family-loop);
  --wf-family-tint:#CFE6E6;
  --wf-family-line:#AFD3D3;
  --wf-family-tab:#5FA8A8;
}
.aw-newblocks .block.wf-block[data-family="loop"] .wf-block__layer--title-bar,
.aw-newblocks .block.wf-block[data-family="loop"].wf-block--grp .wf-block__layer--title-bar{
  --wf-family-tint:#D2E6E6;
}
/* the folded card's member sections and the output rows: teal numbers, not gold */
.aw-newblocks .block.wf-block[data-family="loop"] .wf-pgsec__n{background:#CFE6E6;border-color:#AFD3D3;color:#2F8F8F}
.aw-newblocks .block.wf-block[data-family="loop"] .wf-pgsec__b{color:#2F8F8F;background:#E6F2F2;border-color:#C6E0E0}
.aw-newblocks .block.wf-block[data-family="loop"] .wf-pgout__n,
.aw-newblocks .block.wf-block[data-family="loop"] .wf-pgout__more{color:#2F8F8F}

/* ---- the rounds strip on the folded card (chips 1…N) -------------------------- */
.aw-newblocks .wf-loopstrip{
  display:flex;flex-wrap:wrap;gap:calc(4px * var(--scale));
  padding:calc(2px * var(--scale)) 0 calc(4px * var(--scale));
}
.aw-newblocks .wf-loopstrip__c{
  flex:none;min-width:calc(16px * var(--scale));height:calc(16px * var(--scale));
  padding:0 calc(4px * var(--scale));border-radius:calc(5px * var(--scale));
  font:700 calc(8.5px * var(--scale)) ui-monospace,Menlo,monospace;line-height:calc(16px * var(--scale));
  text-align:center;color:#2F8F8F;background:#E6F2F2;border:1px solid #C6E0E0;
}
.aw-newblocks .wf-loopstrip__c.is-running{background:#FFF4D6;border-color:#F0D48A;color:#8A6A12}
.aw-newblocks .wf-loopstrip__c.is-done{background:#CFE6E6;border-color:#AFD3D3}
.aw-newblocks .wf-loopstrip__c.is-approved{background:#2F8F8F;border-color:#2F8F8F;color:#fff}
.aw-newblocks .wf-loopstrip__c.is-failed{background:#F6DADA;border-color:#E3A5A5;color:#9B2C2C}
.aw-newblocks .wf-loopstrip__c.is-stopped{opacity:.55}

/* ---- the frame ---------------------------------------------------------------- */
.aw-newblocks .wf-planframe[data-family="loop"]{
  background:rgba(47,143,143,.07);
  outline-color:rgba(47,143,143,.34);
}
.aw-newblocks .wf-planframe[data-family="loop"] .wf-planframe__hic{color:#2F8F8F}
.aw-newblocks .wf-planframe[data-family="loop"] .wf-planframe__round{
  flex:none;margin-left:calc(4px * var(--pf-zoom-comp, 1));
  font-size:calc(11px * var(--pf-zoom-comp, 1));color:#2F8F8F;font-weight:600;white-space:nowrap;
}
.aw-newblocks .wf-planframe[data-family="loop"] .wf-planframe__round:empty{display:none}

/* ---- round 65b (loops L4): the frame head's + Add and the round cards' row ------------- */
.aw-newblocks .wf-planframe[data-family="loop"] .wf-planframe__add{
  order:1;flex:none;
  height:calc(22px * var(--pf-zoom-comp, 1));padding:0 calc(8px * var(--pf-zoom-comp, 1));
  border:0;border-radius:calc(7px * var(--pf-zoom-comp, 1));
  background:rgba(255,255,255,.55);color:#2F8F8F;cursor:pointer;
  font:700 calc(10.5px * var(--pf-zoom-comp, 1))/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  letter-spacing:.02em;white-space:nowrap;transition:background .15s ease;
}
.aw-newblocks .wf-planframe[data-family="loop"] .wf-planframe__add:hover{background:rgba(255,255,255,.85)}
.aw-newblocks .wf-planframe.is-run-locked .wf-planframe__add{opacity:.45;cursor:not-allowed}
/* the stack sits under the first member (planflow-groups.js paintFrameRounds writes its
   left / top / width in stage units; frameBounds adds U.RGAP + n × (U.RCH + U.RGAP)) */
.aw-newblocks .wf-planframe__rounds{
  position:absolute;display:flex;flex-direction:column;
  gap:calc(12px * var(--pf-zoom-comp, 1));pointer-events:auto;
}
.aw-newblocks .wf-planframe__rounds:empty{display:none}
/* a round card in the block card's anatomy: the tinted title bar with the number chip, the
   label and the state; the result's first two lines; the three metrics in the block's order */
.aw-newblocks .wf-roundcard{
  flex:none;width:100%;height:calc(104px * var(--pf-zoom-comp, 1));box-sizing:border-box;
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  border:1px solid rgba(47,143,143,.34);border-radius:calc(14px * var(--pf-zoom-comp, 1));
  background:#fff;color:#1F2A28;text-align:left;cursor:pointer;
  box-shadow:0 1px 2px rgba(31,42,40,.06);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease;
}
.aw-newblocks .wf-roundcard:hover{box-shadow:0 3px 12px rgba(47,143,143,.22);transform:translateY(-1px);border-color:#5FA8A8}
.aw-newblocks .wf-roundcard.is-planned{opacity:.6;border-style:dashed;cursor:default;background:rgba(255,255,255,.6)}
.aw-newblocks .wf-roundcard.is-planned:hover{box-shadow:none;transform:none}
.aw-newblocks .wf-roundcard__bar{
  flex:none;display:flex;align-items:center;gap:calc(8px * var(--pf-zoom-comp, 1));min-width:0;
  height:calc(34px * var(--pf-zoom-comp, 1));padding:0 calc(12px * var(--pf-zoom-comp, 1));
  background:#D2E6E6;border-bottom:1px solid #C6E0E0;
}
.aw-newblocks .wf-roundcard__n{
  flex:none;min-width:calc(20px * var(--pf-zoom-comp, 1));height:calc(20px * var(--pf-zoom-comp, 1));
  padding:0 calc(5px * var(--pf-zoom-comp, 1));border-radius:calc(6px * var(--pf-zoom-comp, 1));
  background:#fff;border:1px solid #AFD3D3;color:#2F8F8F;text-align:center;
  font:700 calc(10px * var(--pf-zoom-comp, 1))/calc(18px * var(--pf-zoom-comp, 1)) ui-monospace,Menlo,monospace;
}
.aw-newblocks .wf-roundcard__t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:calc(13px * var(--pf-zoom-comp, 1));color:#1F2A28}
.aw-newblocks .wf-roundcard__pill{
  flex:none;font-size:calc(10px * var(--pf-zoom-comp, 1));line-height:1;padding:calc(3px * var(--pf-zoom-comp, 1)) calc(8px * var(--pf-zoom-comp, 1));
  border-radius:999px;background:#fff;color:#2F8F8F;border:1px solid #C6E0E0;white-space:nowrap;font-weight:600;
}
.aw-newblocks .wf-roundcard.is-running .wf-roundcard__pill,.aw-newblocks .wf-roundcard.is-review .wf-roundcard__pill{background:#FFF4D6;border-color:#F0D48A;color:#8A6A12}
.aw-newblocks .wf-roundcard.is-approved .wf-roundcard__pill{background:#2F8F8F;border-color:#2F8F8F;color:#fff}
.aw-newblocks .wf-roundcard.is-failed .wf-roundcard__pill{background:#F6DADA;border-color:#E3A5A5;color:#9B2C2C}
.aw-newblocks .wf-roundcard.is-stopped{opacity:.6}
.aw-newblocks .wf-roundcard__x{
  flex:none;display:block;box-sizing:border-box;
  height:calc(40px * var(--pf-zoom-comp, 1));padding:calc(6px * var(--pf-zoom-comp, 1)) calc(12px * var(--pf-zoom-comp, 1)) 0;
  font-size:calc(11px * var(--pf-zoom-comp, 1));line-height:calc(15px * var(--pf-zoom-comp, 1));color:#4A5A56;
  overflow:hidden;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.aw-newblocks .wf-roundcard__metrics{
  flex:none;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;
  height:calc(28px * var(--pf-zoom-comp, 1));padding:0 calc(14px * var(--pf-zoom-comp, 1));
  border-top:1px solid rgba(31,42,40,.08);font-variant-numeric:tabular-nums;
}
.aw-newblocks .wf-roundcard__m{display:flex;align-items:center;gap:calc(6px * var(--pf-zoom-comp, 1));font-size:calc(11px * var(--pf-zoom-comp, 1));color:#1F2A28;line-height:1;white-space:nowrap;min-width:0;overflow:hidden}
.aw-newblocks .wf-roundcard__m svg{width:calc(12px * var(--pf-zoom-comp, 1));height:calc(12px * var(--pf-zoom-comp, 1));flex:none;color:#6B7B77;display:block}
.aw-newblocks .wf-roundcard__sep{width:1px;height:calc(13px * var(--pf-zoom-comp, 1));background:rgba(31,42,40,.12);flex:none}
.aw-newblocks .wf-roundcard.is-planned .wf-roundcard__metrics{opacity:.45}
/* round 65c: a loose block carried over the open loop frame — the frame lights, + Add reads "Drop to add" */
.aw-newblocks .wf-planframe[data-family="loop"].is-drop-target{
  outline:2px solid rgba(47,143,143,.85);background:rgba(47,143,143,.14);
}
.aw-newblocks .wf-planframe[data-family="loop"].is-drop-target .wf-planframe__add{background:#2F8F8F;color:#fff}
/* the panel's Add blocks button in the section head */
.pfi-root .wf-loopadd{flex:none;margin-left:auto;height:24px;padding:0 9px;font-size:11.5px;color:#2F8F8F}
.pfi-root .wf-sec__hd .wf-sec__hint+.wf-loopadd{margin-left:6px}

/* ---- the palette entry ------------------------------------------------------ */
.palette .btn-loop{--pf-pal-family:var(--pf-family-loop)}

/* ---- night mode ------------------------------------------------------------ */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .block.wf-block[data-family="loop"] .wf-block__layer--title-bar{
  --wf-family-tint:color-mix(in srgb,#2F8F8F var(--nt-tint-pct),var(--nt-mix-base))}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-loopstrip__c{
  background:color-mix(in srgb,#2F8F8F 22%,var(--nt-mix-base));border-color:color-mix(in srgb,#2F8F8F 40%,var(--nt-mix-base));color:#9FD3D3}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-loopstrip__c.is-approved{background:#2F8F8F;color:#fff}
/* round 65b (L4): the round cards and the head's + Add at night */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-roundcard{
  background:color-mix(in srgb,#2F8F8F 8%,var(--nt-mix-base));border-color:color-mix(in srgb,#2F8F8F 35%,var(--nt-mix-base));color:#DCE6E4}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-roundcard__bar{background:color-mix(in srgb,#2F8F8F 22%,var(--nt-mix-base));border-color:color-mix(in srgb,#2F8F8F 35%,var(--nt-mix-base))}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-roundcard__t,html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-roundcard__m{color:#DCE6E4}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-roundcard__x{color:#B9C7C3}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-roundcard__metrics{border-color:rgba(220,230,228,.12)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-roundcard__sep{background:rgba(220,230,228,.18)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-roundcard__n{
  background:color-mix(in srgb,#2F8F8F 22%,var(--nt-mix-base));border-color:color-mix(in srgb,#2F8F8F 40%,var(--nt-mix-base));color:#9FD3D3}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-roundcard__pill{
  background:color-mix(in srgb,#2F8F8F 18%,var(--nt-mix-base));border-color:color-mix(in srgb,#2F8F8F 40%,var(--nt-mix-base));color:#9FD3D3}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-roundcard.is-approved .wf-roundcard__pill{background:#2F8F8F;color:#fff}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-planframe[data-family="loop"] .wf-planframe__add{
  background:color-mix(in srgb,#2F8F8F 18%,var(--nt-mix-base));color:#9FD3D3}

/* ---- round 62: a legacy repeat group's way into the new loops ----------------------- */
/* the "To a loop" action on the old repeat-group chrome exists only where the loop card
   is drawn (under the flag); the old UI keeps its three actions */
body:not(.aw-newblocks) .repeat-group .rg-act--toloop{display:none}
.aw-newblocks .repeat-group .rg-act--toloop{color:#2F8F8F;font-weight:600}
/* the legacy group's header must sit ABOVE the cards under the flag: a card's hover topbar (a
   transparent strip above its body) caught every click meant for Regen / Clean / Detach / To a
   loop (measured: elementFromPoint on the button = .wf-block__topbar). The container is a
   stacking context of its own (it carries a transform), so the whole container rises; its
   fill goes so the cards under it stay as they are (pointer-events: none lets clicks through). */
.aw-newblocks .repeat-group{z-index:21;background:transparent}
.aw-newblocks .repeat-group.rg-expanded{background:transparent}

/* ---- round 61: the legacy repeat gestures retire under the flag ------------------ */
/* the bottom repeat port (the old repeat-sequence drag source) and the old
   dashed repeat-group chrome stay for workflows that carry expanded groups
   (MASTER_PLAN 2.1.7) but no new repeat is started from the new UI */
.aw-newblocks .block > .handle.handle-repeat-out{display:none}

/* ---- round 61: the Rounds tab (planflow-inspector.js loopRoundsPanel) ------------ */
.pfi-root .wf-rounds{display:flex;flex-direction:column;gap:8px}
.pfi-root .wf-rounds__sum{font-size:12px;color:var(--pf-ink-2,#5a6b63);margin:0 0 4px}
.pfi-root .wf-round{border:1px solid #C6E0E0;border-radius:10px;background:rgba(207,230,230,.22);overflow:hidden}
.pfi-root .wf-round__hd{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;user-select:none}
.pfi-root .wf-round__n{flex:none;min-width:22px;height:22px;border-radius:7px;background:#CFE6E6;border:1px solid #AFD3D3;color:#2F8F8F;font:700 11px ui-monospace,Menlo,monospace;line-height:20px;text-align:center}
.pfi-root .wf-round__t{font-weight:600;font-size:13px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfi-root .wf-round__pill{flex:none;font-size:11px;padding:2px 8px;border-radius:999px;background:#E6F2F2;color:#2F8F8F;border:1px solid #C6E0E0}
.pfi-root .wf-round__pill.is-running{background:#FFF4D6;border-color:#F0D48A;color:#8A6A12}
.pfi-root .wf-round__pill.is-failed{background:#F6DADA;border-color:#E3A5A5;color:#9B2C2C}
.pfi-root .wf-round__pill.is-approved{background:#2F8F8F;border-color:#2F8F8F;color:#fff}
.pfi-root .wf-round__pill.is-review{background:#FFF4D6;border-color:#F0D48A;color:#8A6A12}
.pfi-root .wf-round__metaline{margin:0 0 2px;font-size:11px;letter-spacing:.01em}
/* six tabs on a loop's panel: the active one keeps its word (five tabs share the row otherwise) */
.pfi-root .wf-insp__tabs:has(.wf-tab[data-sub="rounds"]) .wf-tab.is-active{flex:1.9 1 0}
.pfi-root .wf-round__body{padding:0 10px 10px;display:flex;flex-direction:column;gap:6px}
.pfi-root .wf-round__out{font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:9.5em;overflow:hidden;position:relative}
.pfi-root .wf-round__out.is-open{max-height:none}
.pfi-root .wf-round__line{font-size:12px;color:var(--pf-ink-2,#5a6b63)}
.pfi-root .wf-round__line b{color:inherit}
.pfi-root .wf-round__more{align-self:flex-start;font-size:11.5px;color:#2F8F8F;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.pfi-root .wf-round__note{font-size:12px;border-left:3px solid #AFD3D3;padding:2px 8px;color:var(--pf-ink-2,#5a6b63)}
.pfi-root .wf-review--loop .wf-review__note{width:100%;box-sizing:border-box;margin:6px 0 2px;min-height:54px}
.pfi-root .wf-review--loop .wf-review__acts{flex-wrap:wrap}
/* the review modal's note for a loop round */
.wf-review-modal .wf-modal__loopnote{width:100%;box-sizing:border-box;margin:8px 0 0;min-height:56px;font:inherit;font-size:13px;padding:8px 10px;border:1px solid #C6E0E0;border-radius:8px;background:#fff;resize:vertical}
.wf-review-modal .wf-modal__verdict{font-size:12.5px;margin:6px 0 0;color:#2F8F8F}
.wf-review-modal .wf-modal__verdict.is-fail{color:#9B2C2C}
html:is(.wf-theme-night,.wf-theme-contrast) .pfi-root .wf-round{background:color-mix(in srgb,#2F8F8F 10%,var(--nt-mix-base));border-color:color-mix(in srgb,#2F8F8F 35%,var(--nt-mix-base))}
html:is(.wf-theme-night,.wf-theme-contrast) .pfi-root .wf-round__n{background:color-mix(in srgb,#2F8F8F 22%,var(--nt-mix-base));border-color:color-mix(in srgb,#2F8F8F 40%,var(--nt-mix-base));color:#9FD3D3}
html:is(.wf-theme-night,.wf-theme-contrast) .wf-review-modal .wf-modal__loopnote{background:color-mix(in srgb,#2F8F8F 8%,var(--nt-mix-base));color:inherit;border-color:color-mix(in srgb,#2F8F8F 35%,var(--nt-mix-base))}