/* planflow-frames.css — GROUP FRAMES: the run-mode setting, the fold and
 * the collapsed frame card (round 26, track L, 2026-10-19).
 *
 * Owner (2026-10-17): the collapsed group-frame card "like the folded
 * plan-group card BUT in its own colour, one that cannot be confused with
 * the existing families (AI green, Generate slate, Input blue, Output
 * purple, plan-group gold, red = errors) and still belongs to the design".
 *
 * THE COLOUR — swatch 1, PLUM #7D3C78 (built with; swatch 2 COPPER
 * #B4612E is proposed in the README for the veto). On the hue wheel the
 * families sit at 150° (AI sage), 200° (Input teal-blue), 215° (Generate
 * slate), 252° (Output indigo), 258° (repeat purple), 36° (plan-group
 * gold) and 349° (crimson = errors); plum at 305° is at least 47° from
 * every one of them and keeps the prototype's recipe: the deep colour on
 * the badge letters and port dots, a 24% wash on the badge card, the
 * title strip a shade warmer than the badge (the gold's own rule).
 *
 * Every selector is scoped under .aw-newblocks (flag off: inert). The
 * card is `.wf-block.wf-frame-card` and deliberately NOT `.block` — the
 * canvas's own render loop removes every `.block` it does not know
 * (canvas.js rerender) — so the card restates the card-node base rule
 * (planflow-blocks.css:88-100) here and inherits every plain
 * `.wf-block__*` rule for its layers.
 */

/* ROUND 27 (track B, 2026-10-19): the frame's colour as ONE token for every
   surface that belongs to the frame — the card, the G-badge on the header,
   the wires crossing the border and their labels' pill border. */
.aw-newblocks{
  --wf-frame-ink:#7D3C78;              /* PLUM — swatch 1 (the card's --wf-family): the badge, the dots, the chips */
  --wf-frame-wire:rgba(125,60,120,.55); /* the WIRES only, at the ordinary wire's weight (--conn is rgba(92,154,126,.65)) — owner 2026-10-19: 'too bright, in line with other wires' */
  --wf-frame-ink-hover:#5E2A5A;        /* a wire under the pointer / selected */
  --wf-frame-glow:rgba(125,60,120,.45);
}

/* ===================================================================
   1. THE COLLAPSED FRAME CARD
   =================================================================== */
.aw-newblocks .wf-block.wf-frame-card{
  --ease:cubic-bezier(.32,.72,0,1);
  --dur:.24s;
  --wf-family:#7D3C78;                 /* PLUM — swatch 1 (= --wf-frame-ink; the literal so the token reads back) */
  --wf-family-tint:#E6CFE3;            /* badge card wash (24% deep over white, hand-tuned) */
  --wf-family-line:#D4B3D0;            /* badge card stroke */
  --wf-family-tab:#A672A2;             /* corner tab */
  --frame-card-glow:rgba(125,60,120,.28);
  transform:scale(var(--pf-zoom-comp, 1));
  transform-origin:0 0;
  --scale:0.72;
  position:absolute;
  width:calc(414px * var(--scale));
  color:var(--text);font-family:inherit;z-index:3;
  transition:filter var(--dur) var(--ease);
  filter:drop-shadow(var(--shadow-rest));
  pointer-events:none;
}
.aw-newblocks .wf-block.wf-frame-card:hover{filter:drop-shadow(var(--shadow-hover))}
.aw-newblocks .wf-block.wf-frame-card.is-dragging{filter:drop-shadow(var(--shadow-drag));z-index:50;transition:none}
/* the title strip a shade warmer / lighter than the badge — the gold's rule */
.aw-newblocks .wf-block.wf-frame-card .wf-block__layer--title-bar{--wf-family-tint:#E9D3E5}
/* the card body is the drag surface (canvas.js _bindFrameCardGestures) */
.aw-newblocks .wf-block.wf-frame-card .wf-block__card{pointer-events:auto;cursor:grab}
.aw-newblocks .wf-block.wf-frame-card.is-dragging .wf-block__card{cursor:grabbing}
/* not a runnable block: no output fold, no provider logo, no repeat / delete
   in the hover toolbar; the ports stay as wire ANCHORS (portAnchor reads
   their chips) but take no pointer. ROUND 27 (track B): the drag handle,
   the two VIEW buttons (collapse / engineering) and the connector panel
   in engineering view are the block family's own — the owner's "support
   the engineering view and the collapsed view", "drag icon on the
   collapsed states is missing". */
.aw-newblocks .wf-block.wf-frame-card .wf-block__output,
.aw-newblocks .wf-block.wf-frame-card .wf-block__layer--gpt,
.aw-newblocks .wf-block.wf-frame-card .wf-block__topbar [data-action="repeat"],
.aw-newblocks .wf-block.wf-frame-card .wf-block__topbar [data-action="delete"],
.aw-newblocks .wf-block.wf-frame-card .pfb-pills{display:none !important}
.aw-newblocks .wf-block.wf-frame-card:not(.is-eng) .wf-block__cb{display:none !important}
.aw-newblocks .wf-block.wf-frame-card .wf-block__port{pointer-events:none !important}
/* round 27e (owner: "where is the wire connected to the block?"): the card's port chips are
   its wire anchors and the block pipeline never marks them is-connected - paint them, so a
   wire visibly meets the card (the plan group's folded card shows its chips the same way) */
.aw-newblocks .wf-block.wf-frame-card:hover .wf-block__port{opacity:1}   /* round 27j: the block rule - a connected chip stays (is-connected, round 27f), the others show on hover */
/* the numbers row: duration · cost · tokens, the last run's totals over the
   members (planflow-groups.js PlanFlowFrames.memberTotals) */
.aw-newblocks .wf-block.wf-frame-card .wf-block__metrics{opacity:1;pointer-events:none}
.aw-newblocks .wf-block.wf-frame-card .wf-block__metrics.pfb-empty{opacity:.55}
/* "N blocks · <models>" needs the width the title bar has; it starts in the logo-less column
   (63 units) like "N planned steps" on the plan-group card - that rule is planflow-blocks.js's
   injected .block[data-pfb-glyph="0"] sheet, which the card (not a .block) never met (round 27r) */
.aw-newblocks .wf-block.wf-frame-card .wf-block__provider-name{left:calc(63px * var(--scale, 0.72));max-width:calc(200px * var(--scale))}
/* the drag handle (planflow-blocks.css .wf-block__drag): the grip shows on
   hover as on a block card; the whole zone is the frame's drag surface
   (canvas.js _bindFrameCardGestures) */
.aw-newblocks .wf-block.wf-frame-card .wf-block__drag{pointer-events:auto}
.aw-newblocks .wf-block.wf-frame-card:hover .wf-block__drag-handle{opacity:.55}
.aw-newblocks .wf-block.wf-frame-card .wf-block__drag:hover .wf-block__drag-handle{opacity:.9;color:var(--cta)}
.aw-newblocks .wf-block.wf-frame-card.is-dragging .wf-block__drag-handle{opacity:.9;color:var(--cta)}
/* the hover toolbar — planflow-blocks.css keys its reveal on .block.wf-block,
   which this card deliberately is not; restated for the card */
.aw-newblocks .wf-block.wf-frame-card .wf-block__topbar{pointer-events:auto}
.aw-newblocks .wf-block.wf-frame-card:hover .wf-block__topbar,
.aw-newblocks .wf-block.wf-frame-card .wf-block__topbar:hover{opacity:1;transform:translateY(0)}
.aw-newblocks .wf-block.wf-frame-card:hover .wf-block__top-btn,
.aw-newblocks .wf-block.wf-frame-card .wf-block__topbar:hover .wf-block__top-btn{pointer-events:auto}
.aw-newblocks .wf-block.wf-frame-card.is-dragging .wf-block__topbar{opacity:0;pointer-events:none}
.aw-newblocks .wf-block.wf-frame-card.is-eng .wf-block__top-btn[data-action="engineering"]{background:var(--cta);color:#fff;border-color:var(--cta)}
/* ENGINEERING VIEW on the card. ROUND 28 (owner, 2026-10-19: "It should have
   input and output per block inside and user should be able to add more in
   case needed"): the two columns are THE MEMBERS' PORTS - one muted heading
   per block inside, then that block's own rows in the block family's own
   markup (PlanFlowFrames.renderFrameColumns <- PlanFlowBlocks.subportRowHtml),
   its own "+ Add port"; rename / remove / add act on the member block. */
.aw-newblocks .wf-block.wf-frame-card.is-eng .wf-block__metrics{opacity:1 !important}
/* the panel's own display rules are keyed on .block.wf-block:has(port open)
   (planflow-blocks.css 441-466); the engineering view opens both ports */
.aw-newblocks .wf-block.wf-frame-card.is-eng .wf-block__cb{display:block;top:calc(158px * var(--scale))}
.aw-newblocks .wf-block.wf-frame-card.is-eng .wf-block__cb-box--in,
.aw-newblocks .wf-block.wf-frame-card.is-eng .wf-block__cb-box--out{display:flex}
.aw-newblocks .wf-block.wf-frame-card.is-eng .wf-block__cb-box--in{border-right:1px solid var(--panel-stroke, #D9DED9)}
.aw-newblocks .wf-block.wf-frame-card.is-eng .wf-block__cb-col--out .wf-block__cb-head{flex-direction:row-reverse}
.aw-newblocks .wf-block.wf-frame-card.is-eng .wf-block__cb-col--out .wf-block__cb-head__label{text-align:right}
.aw-newblocks .wf-block.wf-frame-card.is-eng .wf-block__cb-boxes{border-top:1px solid var(--panel-stroke, #D9DED9);padding-top:calc(7px * var(--scale))}
/* zero members: the one muted line */
.aw-newblocks .wf-block.wf-frame-card .wf-frame-card__none{pointer-events:none}
.aw-newblocks .wf-block.wf-frame-card .wf-frame-card__none .wf-block__subport__name{color:var(--label,#5D7466);font-style:italic}
/* the member heading: the plan-group step rows' look (planflow-groups.css
   .wf-pgsec), the badge letters in the frame's own colour */
.aw-newblocks .wf-block.wf-frame-card .wf-pgsec{cursor:default}
.aw-newblocks .wf-block.wf-frame-card .wf-block__cb-head + .wf-pgsec{margin-top:2px;border-top:0}
.aw-newblocks .wf-block.wf-frame-card .wf-block__cb-head + .wf-pgsec::before{display:none}
.aw-newblocks .wf-block.wf-frame-card .wf-pgsec:not(.is-first)::before{background:var(--wf-family-line)}
.aw-newblocks .wf-block.wf-frame-card .wf-frame-card__member .wf-pgsec__n{width:auto;min-width:15px;padding:0 4px;letter-spacing:.04em;background:var(--wf-family-tint);border-color:var(--wf-family-line);color:var(--wf-frame-ink)}
.aw-newblocks .wf-block.wf-frame-card .wf-frame-card__member .wf-pgsec__t{color:var(--text)}
/* a plan group's steps sit under their group, a shade lighter, indented */
.aw-newblocks .wf-block.wf-frame-card .wf-frame-card__step{margin-left:10px;margin-top:4px}
/* the rows' dots in the frame's colour: a wire that crosses the frame's border
   is plum, and these are the dots it meets (planflow-blocks.css .wf-block__cb
   .wf-block__subport__dot is the shape) */
.aw-newblocks .wf-block.wf-frame-card .wf-block__cb .wf-block__subport__dot{border-color:var(--wf-frame-ink)}
.aw-newblocks .wf-block.wf-frame-card .wf-block__cb .wf-block__subport__dot:hover{box-shadow:0 0 0 2px #F4F7F4,0 0 0 4px var(--wf-frame-glow)}
.aw-newblocks .wf-block.wf-frame-card .wf-block__cb .wf-block__subport__dot.is-connected{background:var(--wf-frame-ink);border-color:var(--wf-frame-ink)}
.aw-newblocks .wf-block.wf-frame-card .wf-block__cb-add:hover::before{border-color:var(--wf-frame-ink);background:var(--wf-frame-ink)}
.aw-newblocks .wf-block.wf-frame-card .wf-block__cb-add:hover{color:var(--wf-frame-ink)}
/* the rows' pencil / cross / dot carry the block family's data-tip; on this card (not
   .block.wf-block, so planflow-blocks.css's CSS tooltip is silent) the topbar's .wf-tip
   engine shows it, ONE tooltip, as on the card's toolbar buttons (round 27g) */
/* COLLAPSED VIEW on the card: the 78 x 82 mini tile with the G letters, the
   whole tile the drag handle — planflow-blocks.css lines 715-760 restated */
.aw-newblocks .wf-block.wf-frame-card.is-collapsed{width:78px}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__mini{opacity:1}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__layer,
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__title,
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__provider-name,
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__statusbox,
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__metrics{opacity:0;pointer-events:none}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__layer--outer{height:82px}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__card{height:82px}
.aw-newblocks .wf-block.wf-frame-card.is-collapse-anim{transition:filter var(--dur) var(--ease),width var(--dur) var(--ease)}
.aw-newblocks .wf-block.wf-frame-card.is-collapse-anim .wf-block__layer,
.aw-newblocks .wf-block.wf-frame-card.is-collapse-anim .wf-block__title,
.aw-newblocks .wf-block.wf-frame-card.is-collapse-anim .wf-block__provider-name,
.aw-newblocks .wf-block.wf-frame-card.is-collapse-anim .wf-block__statusbox,
.aw-newblocks .wf-block.wf-frame-card.is-collapse-anim .wf-block__metrics,
.aw-newblocks .wf-block.wf-frame-card.is-collapse-anim .wf-block__mini{transition:opacity var(--dur) var(--ease)}
.aw-newblocks .wf-block.wf-frame-card.is-collapse-anim .wf-block__layer--outer{transition:opacity var(--dur) var(--ease),height var(--dur) var(--ease)}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__topbar{right:auto;left:50%;transform:translateX(-50%) translateY(4px)}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed:hover .wf-block__topbar,
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__topbar:hover{transform:translateX(-50%) translateY(0)}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__cb{display:none !important}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__drag{left:0;top:0;width:100%;height:100%;z-index:3;padding:0}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__drag-handle{display:none}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__port{top:50%}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__title-spinner{display:none}
.aw-newblocks .wf-block.wf-frame-card.is-collapsed .wf-block__mini .wf-block__mini-step{display:none}
/* selection halo in the frame's colour (the frame is selected, the card shows it) */
.aw-newblocks .wf-block.wf-frame-card.is-selected{filter:drop-shadow(0 0 0 2px var(--frame-card-glow)) drop-shadow(var(--shadow-hover))}
/* the running state the journey paints (planflow-blocks.js _applyJourneyPhase):
   the amber comet dot and the title spinner, as on a block card */
.aw-newblocks .wf-block.wf-frame-card.is-running .wf-block__statuspill__dot{
  background:conic-gradient(from 0deg,rgba(224,163,65,0) 0%,rgba(224,163,65,.22) 30%,#E0A341 92%,#E0A341 100%);
  -webkit-mask:radial-gradient(closest-side,#0000 54%,#000 55%);
          mask:radial-gradient(closest-side,#0000 54%,#000 55%);
  border:0;box-shadow:none;
  animation:wf-block-spin .7s linear infinite;
}
.aw-newblocks .wf-block.wf-frame-card.is-running .wf-block__title-spinner{opacity:1;animation:wf-block-spin .7s linear infinite}
.aw-newblocks .wf-block.wf-frame-card.is-failed .wf-block__statuspill__dot{background:var(--dot-black);box-shadow:0 0 0 calc(1.5px * var(--scale)) rgba(43,51,46,.18)}
.aw-newblocks .wf-block.wf-frame-card.is-idle .wf-block__statuspill__dot{background:#B9C4BD;box-shadow:none}
/* the resting word of a frame that skipped / passed through: muted */
.aw-newblocks .wf-block.wf-frame-card.is-frame-run-skip .wf-block__statuspill__text,
.aw-newblocks .wf-block.wf-frame-card.is-frame-run-passthrough .wf-block__statuspill__text{color:var(--label,#5D7466)}

/* ===================================================================
   2. A BLOCK SKIPPED BY ITS FRAME — the card's pill says so plainly
   (planflow-groups.js PlanFlowFrames.markSkipped writes is-frame-skipped
   on the block node; the pill's own word is "Skipped")
   =================================================================== */
.aw-newblocks .block.wf-block.is-frame-skipped .wf-block__statuspill__text::after{content:" (frame)"}
/* REVIEW (round 26): a plan group's ROOT — its folded card's pill rests on
   the word "Group" (planflow-groups.js decorate), so the suffix alone read
   "Group (frame)". The whole word is written here instead, at the pill's own
   size (planflow-blocks.css .wf-block__statuspill: 13.5px x --scale), and
   the card's text is sized away: "Skipped (frame)", as on its steps. */
.aw-newblocks .block.wf-block.is-frame-skipped.is-frame-skipped-root .wf-block__statuspill__text{font-size:0}
.aw-newblocks .block.wf-block.is-frame-skipped.is-frame-skipped-root .wf-block__statuspill__text::before{content:"Skipped";font-size:calc(13.5px * var(--scale))}
.aw-newblocks .block.wf-block.is-frame-skipped.is-frame-skipped-root .wf-block__statuspill__text::after{content:" (frame)";font-size:calc(13.5px * var(--scale))}

/* ===================================================================
   3. THE FRAME ITSELF — the run-mode word on the title chip, the fold
   =================================================================== */
/* the group-mode chip reads "· group"; a run mode adds its word.
   REVIEW (round 26): every rule of this section is scoped to the flag
   (.aw-newblocks) — the chevron, the run-mode word and the folded box are
   PlanFlow chrome; the legacy app is untouched (canvas.js _pfFramesOn). */
.aw-newblocks .canvas-item.is-simple-frame.is-group-mode[data-frame-run="skip"] .canvas-item__handle::after{content:'\00B7 group \00B7 skip'}
.aw-newblocks .canvas-item.is-simple-frame.is-group-mode[data-frame-run="passthrough"] .canvas-item__handle::after{content:'\00B7 group \00B7 pass through'}

/* ROUND 27 (track B): the fold control is a CHIP in the chip row, right
   after Convert (canvas.js _ensureFrameFoldButton) — the chip look is
   topbar.css's; only the lock state is ours */
.aw-newblocks .canvas-item.is-simple-frame .canvas-item__chip--fold[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.aw-newblocks .canvas-item.is-simple-frame .canvas-item__chip--fold svg{width:15px;height:15px}
/* the G-badge at the header's LEFT end, screen-stable like the title chip:
   the plan-group family's corner letters, in the frame's colour */
.aw-newblocks .canvas-item.is-simple-frame .canvas-item__gbadge{
  position:absolute;
  top:calc(5px * var(--aw-canvas-ui-screen-px, 1));
  left:calc(8px * var(--aw-canvas-ui-screen-px, 1));
  height:22px;padding:0 7px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;
  background:var(--wf-frame-ink);
  color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1;
  transform:scale(var(--aw-canvas-ui-inverse-scale, 1));
  transform-origin:0 0;
  pointer-events:none;user-select:none;
  z-index:3;
}
/* the title chip moves right to make room for the badge */
.aw-newblocks .canvas-item.is-simple-frame.has-frame-badge .canvas-item__handle{left:calc(46px * var(--aw-canvas-ui-screen-px, 1));max-width:calc(100% - 54px)}

/* FOLDED: the frame's box shrinks to the card's footprint (canvas.js
   applyCanvasItemNode writes the size) and paints nothing of its own —
   the card is the frame now; the chip row above it stays */
.aw-newblocks .canvas-item.is-simple-frame.is-folded-frame{
  background:none;border-color:transparent;
}
.aw-newblocks .canvas-item.is-simple-frame.is-folded-frame .canvas-item__handle,
.aw-newblocks .canvas-item.is-simple-frame.is-folded-frame .canvas-item__edge,
.aw-newblocks .canvas-item.is-simple-frame.is-folded-frame .canvas-item__resize,
.aw-newblocks .canvas-item.is-simple-frame.is-folded-frame .canvas-item__resize-handle{display:none !important}
.aw-newblocks .canvas-item.is-simple-frame.is-folded-frame .canvas-item__gbadge{display:none}
/* ROUND 27 (track B): the folded card's frame controls (the colours,
   Convert, the fold chip, Copy, the grip, Close) stay at hand — the chip row
   is shown while folded, UNDER the card's left edge: the card is a sibling
   on the stage (a hover on it cannot reveal the row), and the card's own
   hover toolbar (Collapse / Engineering) owns the space above its right
   edge, where the row sat (measured: a click on Collapse landed on the
   frame's grip chip). */
/* owner 2026-10-19 (round 27b): NO chip row under the folded card - the card opens by its
   own toolbar button like the plan group's folded card (data-frameexpand) */
.aw-newblocks .canvas-item.is-simple-frame.is-folded-frame > .canvas-item__chip-row{
  display:none !important;
  opacity:1;pointer-events:auto;
  top:auto;bottom:calc(-10px * var(--aw-canvas-ui-screen-px, 1) - 32px);
  right:auto;left:0;
  transform:translateY(0) scale(var(--aw-canvas-ui-inverse-scale, 1));
  transform-origin:0 0;
}
.aw-newblocks .canvas-item.is-simple-frame.is-folded-frame.is-selected,
.aw-newblocks .canvas-item.is-simple-frame.is-folded-frame.is-multi-selected{outline:none;box-shadow:none}

/* ===================================================================
   4. THE WIRES THAT CROSS A GROUP FRAME'S BORDER — the frame's own colour
   in every state (open, folded, folded + collapsed, engineering, during a
   run, selected), the label's pill border too (round 27, track B;
   planflow-blocks.js renderWires writes .wf-conn--frame and
   .wf-conn-label.is-frame)
   =================================================================== */
.aw-newblocks .wf-conn.wf-conn--frame{stroke:var(--wf-frame-wire)}
.aw-newblocks .wf-conn.wf-conn--frame:hover,
.aw-newblocks .wf-conn-hit:hover ~ .wf-conn.wf-conn--frame{stroke:var(--wf-frame-ink-hover)}
.aw-newblocks .wf-conn-group.is-flowing .wf-conn.wf-conn--frame{
  stroke:var(--wf-frame-ink-hover);
  filter:drop-shadow(0 0 calc(4px * var(--pf-wire-u, 1)) var(--wf-frame-glow))
         drop-shadow(0 0 calc(8px * var(--pf-wire-u, 1)) rgba(125,60,120,.22));
}
.aw-newblocks .wf-conn-group.is-selected .wf-conn.wf-conn--frame{stroke:var(--wf-frame-ink-hover)}
.aw-newblocks .wf-conn-label.is-frame .wf-conn-label__pill{stroke:var(--wf-frame-wire)}
.aw-newblocks .wf-conn-label.is-frame:hover .wf-conn-label__pill,
.aw-newblocks .wf-conn-label.is-frame.is-dragging .wf-conn-label__pill,
.aw-newblocks .wf-conn-label.is-frame.is-selected .wf-conn-label__pill{stroke:var(--wf-frame-ink-hover)}

/* ===================================================================
   5. NIGHT MODE / HIGH CONTRAST (planflow-night.css tokens on the body)
   =================================================================== */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card{
  --wf-family-tint:color-mix(in srgb,#7D3C78 var(--nt-tint-pct, 40%),var(--nt-mix-base, #1b231f));
  --wf-family-line:color-mix(in srgb,#7D3C78 var(--nt-line-pct, 55%),var(--nt-mix-line-base, #2a3530));
  --frame-card-glow:rgba(201,133,196,.4);
}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card .wf-block__layer--title-bar{
  --wf-family-tint:color-mix(in srgb,#9A5A95 var(--nt-tint-pct, 40%),var(--nt-mix-base, #1b231f))}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card .wf-block__card svg path[fill="#FBFCFA"][fill-opacity]{fill:var(--nt-card-fill-outer);fill-opacity:var(--nt-card-outer-alpha)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card .wf-block__card svg path[fill="#FBFCFA"]:not([fill-opacity]){fill:var(--nt-card-fill)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card .wf-block__card svg path[fill="#F4F7F4"]{fill:var(--nt-panel-fill)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card .wf-block__card svg :is(path[stroke="#D6DCD6"],path[stroke="#D9DED9"]){stroke:var(--nt-card-stroke)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card .wf-block__card svg line[stroke="#3C5247"]{stroke:var(--nt-card-line)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card .wf-block__card svg path[fill="#E2E3E5"]{fill:var(--nt-card-stroke)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card .wf-block__statuspill{color:var(--nt-text)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card.is-frame-run-skip .wf-block__statuspill__text,
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card.is-frame-run-passthrough .wf-block__statuspill__text{color:var(--nt-label, #9fb3a8)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card .wf-block__metrics{color:var(--nt-text)}
/* the night palette mapped onto the card's own tokens — the night sheet's one
   mapping rule (planflow-night.css §1) is keyed on .block.wf-block, which this
   card deliberately is not; generated from that rule's token list verbatim */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .wf-block.wf-frame-card{
  --surface:var(--nt-surface);
  --surface-solid:var(--nt-surface-solid);
  --sticky-bg:var(--nt-surface-solid);
  --substuck-bg:var(--nt-surface-solid);
  --border:var(--nt-border);
  --divider:var(--nt-divider);
  --label:var(--nt-label);
  --label-hover:var(--nt-label-hover);
  --header-hover:var(--nt-header-hover);
  --text:var(--nt-text);
  --icon:var(--nt-icon);
  --icon-hover:var(--nt-icon-hover);
  --muted:var(--nt-muted);
  --row-hover:var(--nt-row-hover);
  --active-bg:var(--nt-active-bg);
  --active-text:var(--nt-active-text);
  --accent:var(--nt-accent);
  --accent-line:var(--nt-accent-line);
  --dot-black:var(--nt-dot-black);
  --dot-gray:var(--nt-dot-gray);
  --search-bd-focus:var(--nt-field-bd-focus);
  --search-bg-focus:var(--nt-field-bg-focus);
  --focus:var(--nt-focus-ring);
  --tooltip-bg:var(--nt-tooltip-bg);
  --tooltip-fg:var(--nt-tooltip-fg);
  --field-bg:var(--nt-field-bg);
  --well-bg:var(--nt-well-bg);
  --well-line:var(--nt-well-line);
  --well-shadow:var(--nt-well-shadow);
  --field-bg-focus:var(--nt-field-bg-focus);
  --field-bd-focus:var(--nt-field-bd-focus);
  --focus-ring:var(--nt-focus-ring);
  --track-off:var(--nt-track-off);
  --cta:var(--nt-cta);
  --cta-hover:var(--nt-cta-hover);
  --danger:var(--nt-danger);
  --scroll-thumb:var(--nt-scroll-thumb);
  --pop-bg:var(--nt-pop-bg);
  --blur:var(--nt-blur);
  --shadow:var(--nt-shadow);
  --shadow-rest:var(--nt-shadow-rest);
  --shadow-hover:var(--nt-shadow-hover);
  --shadow-drag:var(--nt-shadow-drag);
  --shadow-pop:var(--nt-shadow-pop);
  --port-bg:var(--nt-port-bg);
  --port-stroke:var(--nt-port-stroke);
  --conn:var(--nt-conn);
  --panel-fill:var(--nt-panel-fill);
  --panel-stroke:var(--nt-panel-stroke);
  /* the planning widget's second vocabulary (planflow-inspector.css ~1160+) */
  --ink:var(--nt-text);
  --ink-soft:var(--nt-muted-strong);
  --well:var(--nt-well-bg);
  --wf-ink:var(--nt-text);
  /* the pages' aliases (planflow-pages.css §0) */
  --pf-text:var(--nt-text);
  --pf-border:var(--nt-border);
  --pf-accent:var(--nt-accent);
  --pf-danger-text:var(--nt-danger-text);
  --pf-badge-green:var(--nt-ok-text);
  --pf-badge-amber:var(--nt-warn-text);
}
/* the folded frame paints nothing of its own at night either (topbar.css's night
   border rule outranks the day rule above) */
html.wf-theme-night .aw-newblocks .canvas-item.is-simple-frame.is-folded-frame{border-color:transparent;background:none}
html.wf-theme-night .aw-newblocks{--wf-frame-ink:#C985C4;--wf-frame-ink-hover:#E0A9DC;--wf-frame-glow:rgba(201,133,196,.45)}
html.wf-theme-night .aw-newblocks .canvas-item.is-simple-frame .canvas-item__gbadge{color:#1c2420}

/* ===================================================================
   5. THE FRAME'S CHIP ROW IN THE BLOCK TOOLBAR'S DESIGN (round 27k, the owner:
   "these buttons should be the same as the block's toolbar buttons - overall
   design, hover design and hints") - the declarations of planflow-blocks.css
   .wf-block__top-btn, token for token; the row keeps its own reveal on hover.
   =================================================================== */
.aw-newblocks .canvas-item.is-simple-frame > .canvas-item__chip-row > .canvas-item__chip{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--muted);
  cursor:pointer;padding:0;margin:0;
  box-shadow:var(--shadow-pop);
  transition:background .15s var(--ease),color .15s var(--ease),
             border-color .15s var(--ease),transform .12s var(--ease);
}
.aw-newblocks .canvas-item.is-simple-frame > .canvas-item__chip-row > .canvas-item__chip svg{width:14px;height:14px;display:block;stroke-width:1.7}
.aw-newblocks .canvas-item.is-simple-frame > .canvas-item__chip-row > .canvas-item__chip:hover{
  background:var(--cta);color:#fff;border-color:var(--cta);transform:translateY(-2px);
}
.aw-newblocks .canvas-item.is-simple-frame > .canvas-item__chip-row > .canvas-item__chip--delete:hover,
.aw-newblocks .canvas-item.is-simple-frame > .canvas-item__chip-row > .canvas-item__chip--close:hover{background:#b85454;border-color:#b85454}
.aw-newblocks .canvas-item.is-simple-frame > .canvas-item__chip-row > .canvas-item__chip:active{transform:translateY(0) scale(.96)}
.aw-newblocks .canvas-item.is-simple-frame > .canvas-item__chip-row{gap:5px}

/* ===================================================================
   6. THE FRAME HEADER (round 27r, the owner: "a bit messy and not aligned with
   the overall design ... we also need to adjust the simple frame header").
   One header strip across the frame's top, in the frame's own tint, for GROUP
   frames (plum) and SIMPLE frames (their colour preset) alike; the badge
   (group) and the title sit on it, vertically centred; the chip row sits above
   the frame (section 5 / 27p). The strip is a hover surface: the frame's body
   lets the pointer through to the blocks, the strip keeps the chip row
   reachable. Screen-stable sizes (--aw-canvas-ui-screen-px).
   =================================================================== */
.aw-newblocks .canvas-item.is-simple-frame:not(.is-folded-frame){
  --fh:calc(34px * var(--aw-canvas-ui-screen-px, 1));
}
.aw-newblocks .canvas-item.is-simple-frame.is-group-mode:not(.is-folded-frame){
  border-width:1.5px;
  border-color:rgba(125,60,120,.42);
}
.aw-newblocks .canvas-item.is-simple-frame:not(.is-folded-frame)::before{
  content:'';position:absolute;left:0;right:0;top:0;
  height:var(--fh);
  background:color-mix(in srgb, var(--frame-tint-chip-bg, rgba(125,60,120,.14)) 55%, white);   /* opaque: the hatch stays below the strip */
  border-bottom:1px solid color-mix(in srgb, var(--frame-tint-chip-fg, #7D3C78) 22%, transparent);
  border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;
  pointer-events:auto;cursor:default;z-index:1;
}
.aw-newblocks .canvas-item.is-simple-frame.is-group-mode:not(.is-folded-frame)::before{
  background:#F5ECF3;   /* plum 8 % on white, opaque */
  border-bottom-color:rgba(125,60,120,.22);
}
/* the badge (group frames) and the title, centred on the strip */
.aw-newblocks .canvas-item.is-simple-frame.is-group-mode:not(.is-folded-frame) .canvas-item__gbadge{
  top:calc((var(--fh) - 20px * var(--aw-canvas-ui-screen-px, 1)) / 2);
  left:calc(10px * var(--aw-canvas-ui-screen-px, 1));
  height:20px;padding:0 6px;border-radius:6px;font-size:10.5px;
}
.aw-newblocks .canvas-item.is-simple-frame:not(.is-folded-frame) .canvas-item__handle{
  top:calc((var(--fh) - 20px * var(--aw-canvas-ui-screen-px, 1)) / 2);
  left:calc(12px * var(--aw-canvas-ui-screen-px, 1));
  height:20px;line-height:20px;padding:0 6px;z-index:2;   /* above the opaque strip */
  background:transparent;
  font-size:13px;font-weight:700;letter-spacing:.01em;
  transform:scale(var(--aw-canvas-ui-inverse-scale, 1));transform-origin:0 0;
  max-width:calc(60% - 60px * var(--aw-canvas-ui-screen-px, 1));
}
.aw-newblocks .canvas-item.is-simple-frame.is-group-mode.has-frame-badge:not(.is-folded-frame) .canvas-item__handle{
  left:calc(46px * var(--aw-canvas-ui-screen-px, 1));
  color:#5E2A5A;
}
.aw-newblocks .canvas-item.is-simple-frame.is-group-mode:not(.is-folded-frame) .canvas-item__handle::after{
  color:#7D3C78;opacity:.7;font-size:10.5px;font-weight:500;margin-left:8px;
}
/* the chip row ON the band, at the right */
.aw-newblocks .canvas-item.is-simple-frame.is-group-mode:not(.is-folded-frame) > .canvas-item__chip-row{
  /* round 27p (owner): ABOVE the frame, touching its top border - the band below is a
     hover surface, so the pointer never loses the frame on its way up to a chip */
  top:auto;bottom:calc(100% + 4px * var(--aw-canvas-ui-screen-px, 1));   /* round 27t: a card's toolbar sits 4 units above its card */
  right:calc(8px * var(--aw-canvas-ui-screen-px, 1));
  left:auto;margin-bottom:0;
  transform-origin:100% 100%;
  z-index:9;
}
.aw-newblocks .canvas-item.is-simple-frame.is-group-mode:not(.is-folded-frame):hover > .canvas-item__chip-row,
.aw-newblocks .canvas-item.is-simple-frame.is-group-mode:not(.is-folded-frame).is-selected > .canvas-item__chip-row{
  transform:translateY(0) scale(var(--aw-canvas-ui-inverse-scale, 1));
}

/* round 27t: the gap under the row is a pointer bridge, so the pointer rising from the header
   strip never leaves the frame on its way into a chip */
.aw-newblocks .canvas-item.is-simple-frame:not(.is-folded-frame) > .canvas-item__chip-row::after{
  content:'';position:absolute;left:0;right:0;top:100%;
  height:calc(6px * var(--aw-canvas-ui-screen-px, 1));
  pointer-events:inherit;
}
/* round 27t (owner): the frame header at night - the strip, the title, the mode word */
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-item.is-simple-frame:not(.is-folded-frame)::before{
  background:color-mix(in srgb, var(--frame-tint-chip-fg, #7D3C78) 16%, #151b17);
  border-bottom-color:color-mix(in srgb, var(--frame-tint-chip-fg, #7D3C78) 38%, transparent);
}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-item.is-simple-frame.is-group-mode:not(.is-folded-frame)::before{
  background:#2A1F29;
  border-bottom-color:rgba(201,133,196,.32);
}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-item.is-simple-frame:not(.is-folded-frame) .canvas-item__handle{color:var(--nt-text, #E6ECE8)}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-item.is-simple-frame.is-group-mode.has-frame-badge:not(.is-folded-frame) .canvas-item__handle{color:#E9D3E5}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-item.is-simple-frame.is-group-mode:not(.is-folded-frame) .canvas-item__handle::after{color:#C985C4}
html:is(.wf-theme-night,.wf-theme-contrast) body.aw-newblocks .canvas-item.is-simple-frame.is-group-mode:not(.is-folded-frame){border-color:rgba(201,133,196,.45)}