/* =======================================================================
   Rules — Make A Rule animation. Self-contained, scoped stylesheet.

   Every selector is namespaced under `.sift-rules-makearule`. The bundle's
   JS mounts a <div class="sift-rules-makearule demo-stage">…</div> root,
   so no rule here can leak out or be overridden unless the host scopes
   under `.sift-rules-makearule` too.

   The host page needs to:
     1. Provide an element with id="rules-makearule-root" for React to mount into.
     2. Load React 18 + ReactDOM 18 BEFORE Rules_MakeARule.js.
     3. Load IBM Plex Sans + IBM Plex Mono (imported below via Google Fonts).

   No other dependencies. No shared CSS. No other animation files referenced.
   ======================================================================= */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* Animation 1 — "Make a rule" widget. Extracted CSS. */.sift-rules-makearule{
    /* Brand */
    --sift-orange:        #F04A01;
    --sift-orange-bright: #FF5722;
    --sift-orange-deep:   #EE4120;
    --rubber-black:       #1B1D1F;
    --vanta:              #000000;
    --steel:              #726E6E;
    --titanium:           #E1D7D0;
    --ceramic:            #EEEFEC;
    --lunar:              #848582;

    /* Gray scale */
    --gray-100: #111111;
    --gray-90:  #222222;
    --gray-80:  #353534;
    --gray-70:  #4B4C4A;
    --gray-60:  #6A6B68;
    --gray-50:  #848582;
    --gray-40:  #9E9F9C;
    --gray-30:  #BABAB6;
    --gray-20:  #D4D4D0;
    --gray-10:  #EEEFEC;

    /* Data viz accents */
    --mint-30:  #58D6B5;
    --yellow-50:#FFC131;
    --cyan-40:  #239BF7;
  }.sift-rules-makearule, .sift-rules-makearule *, .sift-rules-makearule *::before, .sift-rules-makearule *::after{ box-sizing: border-box; }

  /* ---------- Widget root — fills the iframe; no max-width here. */
  .sift-rules-makearule #root{ width: 100%; }

  /* ---------- 16:9 demo stage — the framed artifact embedded in the page ---------- */
  .sift-rules-makearule.demo-stage{
    background: #131416;
    border: 1px solid #2A2C2E;
    border-radius: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    display: grid;
    place-items: center;
    padding: 28px;
    position: relative;
    overflow: hidden;
  }
  /* Dot grid behind the form — same 32px spacing as the old line grid,
     rendered as tiny dots at low opacity. Barely perceptible. */
  .sift-rules-makearule.demo-stage::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: center center;
    pointer-events: none;
  }
  /* Tiny product-chrome eyebrow in the corner so the stage reads as a product surface. */
  .sift-rules-makearule .stage-chrome{
    position: absolute;
    top: 16px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5C5D5A;
    pointer-events: none;
  }
  .sift-rules-makearule .stage-chrome .crumbs{ display: flex; gap: 14px; }
  .sift-rules-makearule .stage-chrome .crumbs span:not(:last-child)::after{ content: " /"; color: #3A3B38; margin-left: 14px; }

  /* ---------- Intro "New Rule" button (clip 1) ----------
     Same look as the in-card Cancel button (dark grey ground, ceramic ink)
     but with a steel-grey outline so it reads as a primary CTA at this scale.
     Plays "zoomed in" — oversized, fills the stage feel. */
  .sift-rules-makearule .intro-btn{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, calc(-50% + 18px)) scale(1.04);
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 44px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #2A2C2E;
    color: var(--ceramic);
    border: 2px solid var(--steel);
    border-radius: 0;
    cursor: pointer;
    z-index: 2;
    pointer-events: none;
    transition: opacity 480ms cubic-bezier(0.2,0,0,1),
                transform 620ms cubic-bezier(0.2,0,0,1),
                background 140ms cubic-bezier(0.2,0,0,1),
                color 140ms cubic-bezier(0.2,0,0,1),
                border-color 140ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-makearule .intro-btn.show{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }
  /* Hover — same lighter-grey treatment as Cancel:hover, plus a brighter rim. */
  .sift-rules-makearule .intro-btn.is-hovered{
    background: #4B4C4A;
    color: var(--ceramic);
    border-color: #8E8A89;
  }
  .sift-rules-makearule .intro-btn.is-pressed{
    transform: translate(-50%, calc(-50% + 2px)) scale(0.99);
  }
  /* Disappear: smooth fade with a slight shrink. */
  .sift-rules-makearule .intro-btn.gone{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    pointer-events: none;
    transition: opacity 420ms cubic-bezier(0.2,0,0,1),
                transform 460ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-makearule .intro-btn svg{ display: block; }

  /* ---------- Demo cursor ----------
     Two icons live inside the cursor wrapper; we toggle which is visible by
     class. Each icon is positioned with negative offsets so its "tip"
     (arrow point / I-beam center) sits at (0, 0) of the wrapper.
     CSS phases handle the BIG-button approach/hover/click; explicit JS positions
     (.cursor.has-pos with inline style) handle text-field hovers. */
  .sift-rules-makearule .cursor{
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    opacity: 0;
    z-index: 4;
    pointer-events: none;
    transform: translate(420px, 260px);
    transition: transform 760ms cubic-bezier(0.2,0,0,1),
                opacity 280ms ease-out;
  }
  .sift-rules-makearule .cursor-icon{
    position: absolute;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.55));
    transition: transform 480ms cubic-bezier(0.2,0,0,1);
  }
  /* Arrow tip in this SVG (viewBox 32, group translated 10,7) is at (10,7).
     At 56px size that's (17.5, 12.25) — negate to anchor tip at wrapper origin. */
  .sift-rules-makearule .cursor-icon.arrow{
    width: 56px; height: 56px;
    top: -12.25px;
    left: -17.5px;
    transform-origin: 17.5px 12.25px;
    display: block;
  }
  /* I-beam center is around (16, 16) of a 32-viewBox. At 44px size: (22, 22). */
  .sift-rules-makearule .cursor-icon.text{
    width: 44px; height: 44px;
    top: -22px;
    left: -22px;
    transform-origin: 22px 22px;
    display: none;
  }
  /* Clip 1 the cursor matches the BIG zoomed-in button — ~2x scale. */
  .sift-rules-makearule .cursor.big .cursor-icon.arrow{ transform: scale(2.0); }
  .sift-rules-makearule .cursor.big .cursor-icon.text{ transform: scale(2.0); }
  .sift-rules-makearule .cursor.kind-text .cursor-icon.arrow{ display: none; }
  .sift-rules-makearule .cursor.kind-text .cursor-icon.text{ display: block; }

  /* Snappier transitions during clip 1 so the cursor zips up to the button. */
  .sift-rules-makearule .cursor[data-phase="approach"],
  .sift-rules-makearule .cursor[data-phase="hover"],
  .sift-rules-makearule .cursor[data-phase="click"]{
    transition: transform 480ms cubic-bezier(0.2,0,0,1),
                opacity 220ms ease-out;
  }
  .sift-rules-makearule .cursor[data-phase="approach"],
  .sift-rules-makearule .cursor[data-phase="hover"]{
    opacity: 1;
    transform: translate(0px, 0px);
  }
  .sift-rules-makearule .cursor[data-phase="click"]{
    opacity: 1;
    transform: translate(0px, 4px);
  }
  /* Cursor is fully removed from the page during the post-save hold.
     display:none is non-animated and unambiguous — no opacity races, no
     stray translate transitions can drift the cursor back into view. */
  .sift-rules-makearule .cursor.gone{ display: none; }
  /* Fade-in-place (used at the end of clip 2 — cursor dissolves on save). */
  .sift-rules-makearule .cursor.fading{
    opacity: 0;
    transition: opacity 420ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-makearule .cursor[data-phase="leave"]{
    opacity: 0;
    transform: translate(260px, 170px);
  }
  /* JS-driven positions for the text-field hovers — inline style sets transform. */
  .sift-rules-makearule .cursor.has-pos{ opacity: 1; }

  /* ---------- Rule list (clip 3 — after save) ----------
     Padding matches the card's 22px L/R so the title's alignment is clean.
     The first row's name cell is the persistent element: when the card fades,
     the name visually stays put because the cell is displaced via transform
     to sit on top of the card's input value, then glides into its natural
     row position. Other cells/rows stagger in after the title settles. */
  .sift-rules-makearule .rule-list{
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 720px;
    /* Full stage height so the inner scroller has a definite container. */
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 320ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-makearule .rule-list.in{
    opacity: 1;
    pointer-events: auto;
  }

  .sift-rules-makearule .list-grid{
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    /* Scrollable so visitors can browse the full rule list. Slim scrollbar
       so it doesn't clash with the demo aesthetic. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4B4C4A transparent;
  }
  .sift-rules-makearule .list-grid::-webkit-scrollbar{ width: 6px; }
  .sift-rules-makearule .list-grid::-webkit-scrollbar-track{ background: transparent; }
  .sift-rules-makearule .list-grid::-webkit-scrollbar-thumb{ background: #3A3B38; border-radius: 3px; }
  .sift-rules-makearule .list-grid::-webkit-scrollbar-thumb:hover{ background: #6A6B68; }

  /* Each row is its own grid item that spans all parent columns, then uses
     subgrid to share the parent's column tracks. This way the row is a real
     layout element (one element fade/stagger affects the whole row, not
     individual cells) and column widths still align across rows. */
  .sift-rules-makearule .list-header,
  .sift-rules-makearule .list-row{
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
  }

  /* Header label spans — sticky at top so they stay visible while rows scroll.
     Reveal via .phase-fillTable; the whole header fades in as one unit. */
  .sift-rules-makearule .list-header{
    background: transparent;
    border-bottom: 1px solid #2A2C2E;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 380ms cubic-bezier(0.2,0,0,1),
                transform 380ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-makearule .list-header > span{
    padding: 60px 0 24px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lunar);
  }
  .sift-rules-makearule .list-header > span:first-child{ padding-left: 60px; padding-right: 36px; }
  .sift-rules-makearule .list-header > span:nth-child(2){ padding-right: 36px; }
  .sift-rules-makearule .list-header > span:last-child{ padding-right: 60px; }
  .sift-rules-makearule .rule-list.phase-fillTable .list-header{
    opacity: 1;
    transform: translateY(0);
  }

  /* Body rows — each row fades/slides in as a single unit. The inline
     transition-delay on the row element gives the row-by-row cascade. */
  .sift-rules-makearule .list-row{
    border-bottom: 1px solid #1f2123;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 380ms cubic-bezier(0.2,0,0,1),
                transform 380ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-makearule .rule-list.phase-fillTable .list-row{
    opacity: 1;
    transform: translateY(0);
  }

  /* Cells. No per-cell transitions — the row owns the fade. Padding-right
     on each cell creates the inter-column gutter. */
  .sift-rules-makearule .list-cell{
    padding: 24px 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--ceramic);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sift-rules-makearule .list-cell.name{ font-weight: 500; padding-left: 60px; padding-right: 36px; }
  .sift-rules-makearule .list-cell.asset{ padding-right: 36px; }
  /* Let expressions run off the right edge of the page without being trimmed
     to an ellipsis. The demo-stage's overflow: hidden clips them at the
     stage boundary instead. */
  .sift-rules-makearule .list-cell.expr{
    padding-right: 60px;
    overflow: visible;
    text-overflow: clip;
  }

  /* Row 0 — the just-saved rule. Visible immediately (no stagger) so the
     title can persist from the card position. Snap pins its name cell to
     the card's input position for one frame, then the row glides into place. */
  .sift-rules-makearule .list-row.r0{
    opacity: 1;
    transform: none;
  }
  .sift-rules-makearule .list-row.r0 .list-cell.name{
    transition: transform 680ms cubic-bezier(0.2,0,0,1);
    transform-origin: left center;
  }
  .sift-rules-makearule .list-row.r0.snap .list-cell.name{
    transition: none;
    transform: var(--title-displaced);
  }

  .sift-rules-makearule .chip{
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #BABAB6;
    background: #2A2C2E;
    border-radius: 4px;
    letter-spacing: 0.04em;
  }

  .sift-rules-makearule .list-cell.expr{
    font-family: "IBM Plex Mono", monospace;
    font-size: 12.5px;
    line-height: 20px;
    color: var(--ceramic);
  }
  .sift-rules-makearule .list-cell.expr .tok-var{ color: #FFAB70; }
  .sift-rules-makearule .list-cell.expr .tok-num{ color: #79B8FF; }
  .sift-rules-makearule .list-cell.expr .tok-op{ color: #F97583; }
  .sift-rules-makearule .list-cell.expr .tok-txt{ color: var(--ceramic); }

  /* (Card exit rule defined after .in so it wins when both classes apply.) */

  /* Click ring removed. Clicks are now expressed as a scale-down-up of the
     cursor icon itself — triggered when data-phase="click" matches below. */
  .sift-rules-makearule .cursor[data-phase="click"] .cursor-icon.arrow,
  .sift-rules-makearule .cursor[data-phase="click"] .cursor-icon.text{
    animation: sift-rules-makearule-cursor-click-normal 220ms cubic-bezier(0.2, 0, 0, 1);
  }
  .sift-rules-makearule .cursor.big[data-phase="click"] .cursor-icon.arrow,
  .sift-rules-makearule .cursor.big[data-phase="click"] .cursor-icon.text{
    animation: sift-rules-makearule-cursor-click-big 220ms cubic-bezier(0.2, 0, 0, 1);
  }@keyframes sift-rules-makearule-cursor-click-normal {
    0%   { transform: scale(1); }
    45%  { transform: scale(0.82); }
    100% { transform: scale(1); }
  }@keyframes sift-rules-makearule-cursor-click-big {
    0%   { transform: scale(2.0); }
    45%  { transform: scale(1.64); }
    100% { transform: scale(2.0); }
  }

  .sift-rules-makearule .rule-card{
    background: var(--rubber-black);
    color: var(--ceramic);
    padding: 18px 20px 16px;
    width: 100%;
    max-width: 440px;
    border: 1px solid #2A2C2E;
    border-radius: 0;
    position: relative;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
    z-index: 1;
    /* Card "zooms out" into view once the intro button is clicked:
       starts slightly larger (as if the camera is still pulled in) and
       eases down to its resting size. */
    opacity: 0;
    visibility: hidden;
    transform: scale(1.18);
    transition: opacity 420ms cubic-bezier(0.2,0,0,1),
                transform 620ms cubic-bezier(0.2,0,0,1);
    pointer-events: none;
  }
  .sift-rules-makearule .rule-card.in{
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
  }
  /* Card exit — declared AFTER .in so it wins when both classes are present. */
  .sift-rules-makearule .rule-card.in.out,
  .sift-rules-makearule .rule-card.out{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }

  .sift-rules-makearule .card-eyebrow{
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lunar);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
  }
  .sift-rules-makearule .card-eyebrow .pip{
    width: 6px; height: 6px; background: var(--sift-orange);
    border-radius: 999px;
    flex: 0 0 auto;
    transition: background 200ms ease, box-shadow 200ms ease;
  }
  .sift-rules-makearule .card-eyebrow.is-armed .pip{
    background: var(--sift-orange);
    animation: sift-rules-makearule-pulse 1.6s infinite;
  }@keyframes sift-rules-makearule-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(240,74,1,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(240,74,1,0); }
    100% { box-shadow: 0 0 0 0 rgba(240,74,1,0); }
  }

  .sift-rules-makearule .field{ margin-bottom: 10px; }

  .sift-rules-makearule .field-label{
    font-family: "IBM Plex Mono", monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lunar);
    display: block;
    margin: 0 0 4px;
  }

  .sift-rules-makearule .input-wrap{ position: relative; }

  .sift-rules-makearule .input{
    display: block;
    width: 100%;
    height: 30px;
    background: #131416;
    border: 1px solid #2A2C2E;
    border-radius: 0;
    color: var(--ceramic);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 13px;
    line-height: 20px;
    padding: 0 10px;
    outline: none;
    caret-color: var(--sift-orange);
    transition: border-color 120ms cubic-bezier(0.2,0,0,1), background 120ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-makearule .input::placeholder{ color: #6A6B68; }
  .sift-rules-makearule .input:hover:not(:disabled):not(:focus){
    background: #0C0D0F;
    border-color: #3A3B38;
  }
  .sift-rules-makearule .input:focus{ border-color: var(--sift-orange); background: #0E0F11; }
  .sift-rules-makearule .input:disabled{ opacity: 0.7; cursor: not-allowed; }
  .sift-rules-makearule .input.mono{ font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.01em; }
  /* Expression input gets transparent text — the colored overlay paints it. */
  .sift-rules-makearule .input.syntax{
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--sift-orange);
  }
  /* Placeholder must stay visible even with transparent text-fill-color. */
  .sift-rules-makearule .input.syntax::placeholder{
    color: #6A6B68;
    -webkit-text-fill-color: #6A6B68;
    opacity: 1;
  }
  .sift-rules-makearule .input.syntax::selection{ background: rgba(240, 74, 1, 0.32); }

  /* Syntax overlay sits exactly on top of the input. Same padding + border
     width so the glyphs land on the same baseline as the (transparent) input text. */
  .sift-rules-makearule .syntax-overlay{
    position: absolute;
    inset: 0;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.01em;
    line-height: 30px;
    white-space: pre;
    pointer-events: none;
    color: var(--ceramic);
    overflow: hidden;
  }
  .sift-rules-makearule .tok-var{ color: #FFAB70; } /* yellow/amber — $1, $2, … */
  .sift-rules-makearule .tok-num{ color: #79B8FF; } /* blue        — numbers     */
  .sift-rules-makearule .tok-op{ color: #F97583; } /* red         — glyphs      */
  .sift-rules-makearule .tok-txt{ color: var(--ceramic); }

  /* Colorized placeholder overlay for the expression input.
     Only shown when the input is empty + unfocused. */
  .sift-rules-makearule .expr-placeholder{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    padding: 0 10px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    line-height: 30px;
    white-space: pre;
    color: #6A6B68;
  }
  .sift-rules-makearule .expr-placeholder .t-fn{ color: #C99A3A; }
  .sift-rules-makearule .expr-placeholder .t-str{ color: var(--mint-30); }
  .sift-rules-makearule .expr-placeholder .t-op{ color: var(--lunar); }
  .sift-rules-makearule .expr-placeholder .t-num{ color: #79B8FF; }

  /* Buttons */
  .sift-rules-makearule .buttons{
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
  }

  .sift-rules-makearule .btn{
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 14px;
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: 0;
    transition: background 120ms cubic-bezier(0.2,0,0,1),
                color 120ms cubic-bezier(0.2,0,0,1),
                border-color 120ms cubic-bezier(0.2,0,0,1),
                transform 100ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-makearule .btn:active{ transform: translateY(1px); }
  .sift-rules-makearule .btn:focus-visible{ outline: 2px solid var(--sift-orange); outline-offset: 2px; }

  .sift-rules-makearule .btn-save{
    background: var(--sift-orange);
    color: #fff;
    border-color: var(--sift-orange);
  }
  .sift-rules-makearule .btn-save:disabled{
    opacity: 0.4;
    cursor: not-allowed;
  }
  .sift-rules-makearule .btn-save.ready{
    background: var(--sift-orange);
    color: #fff;
    border-color: var(--sift-orange);
    opacity: 1;
  }
  .sift-rules-makearule .btn-save.ready:disabled{ cursor: not-allowed; }
  .sift-rules-makearule .btn-save:hover:not(:disabled){
    filter: brightness(1.08);
  }

  .sift-rules-makearule .btn-cancel{
    background: transparent;
    color: var(--gray-30);
    border-color: #2A2C2E;
    padding: 7px 12px;
  }
  .sift-rules-makearule .btn-cancel:hover{
    background: rgba(255,255,255,0.05);
    border-color: #3A3B38;
    color: var(--ceramic);
  }

  /* Examples row removed */

  /* .big click-ring rule removed alongside the ring itself. */

  /* Saved / armed footer strip */
  .sift-rules-makearule .armed-strip{
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #2A2C2E;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: opacity 280ms cubic-bezier(0.2,0,0,1),
                max-height 320ms cubic-bezier(0.2,0,0,1),
                padding-top 280ms cubic-bezier(0.2,0,0,1),
                margin-top 280ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-makearule .armed-strip.show{
    opacity: 1;
    max-height: 80px;
  }
  .sift-rules-makearule .armed-strip .live-dot{
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--sift-orange);
    box-shadow: 0 0 0 0 rgba(240,74,1,0.55);
    animation: sift-rules-makearule-pulse 1.6s infinite;
    flex: 0 0 auto;
  }
  .sift-rules-makearule .armed-strip .armed-label{
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lunar);
  }
  .sift-rules-makearule .armed-strip .armed-name{
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 13px;
    color: var(--ceramic);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sift-rules-makearule .armed-strip .spark{
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* Right column — side note */
  .sift-rules-makearule .side-note{
    padding-top: 8px;
    max-width: 360px;
  }
  .sift-rules-makearule .side-note h3{
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
    margin: 0 0 10px;
  }
  .sift-rules-makearule .side-note p{
    font-size: 15px;
    line-height: 1.55;
    color: var(--gray-70);
    margin: 0 0 14px;
    text-wrap: pretty;
  }
  .sift-rules-makearule .side-note .kbd{
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    background: #fff;
    border: 1px solid var(--gray-20);
    padding: 2px 6px;
    color: var(--gray-80);
  }

  /* Focus-ring polish for the inputs */
  .sift-rules-makearule .input::-webkit-input-placeholder{ transition: opacity 120ms; }
  .sift-rules-makearule .input:focus::-webkit-input-placeholder{ opacity: 0.5; }