/* =======================================================================
   Rules — Report View animation. Self-contained, scoped stylesheet.

   Every selector is namespaced under `.sift-rules-report`. The bundle's JS
   mounts a <div class="sift-rules-report demo-stage">…</div> root, so no
   rule here can match anything outside the widget — and nothing in the host
   page's stylesheet can override widget internals unless it ALSO scopes
   under `.sift-rules-report`.

   The host page needs to:
     1. Provide an element with id="rules-report-root" for React to mount into.
     2. Load React 18 + ReactDOM 18 BEFORE Rules_Report.js.
     3. Load IBM Plex Sans + IBM Plex Mono (imported below via Google Fonts).
     4. Make `view-in-explore.svg` and `report-icons.svg` reachable from the
        same directory as this CSS (used as mask-image for the top-bar icons).

   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");

/* Live Rule Evaluation page — global styles + animation 2 (.c1-*, .plot-*,
   .anno-*, .cursor, etc.) + animation 3 (.rpt-*) selectors. */.sift-rules-report{
    /* 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;

    /* Channels — telemetry plot lines.
       RW_Speed_X reads as red; RW_Speed_Z reads as a distinct warm orange that
       doesn't collide with the brand orange used for annotations & "live". */
    --ch-red:    #FA4D56;
    --ch-orange: #F89E37;

    /* Yellow — the "Live" chip on the rule row. We use a soft yellow ground
       with a darker yellow ink so the chip reads as a status, not as fire. */
    --yellow-15: #FFF6C4;
    --yellow-30: #FCE96A;
    --yellow-50: #FDC93B;
    --yellow-70: #8C7100;
    --yellow-bg: #FCEFA8;
    --yellow-ink:#7A6300;

    /* Recording dot — the live indicator above the plot. Slightly warmer than
       channel red so they don't read as the same swatch. */
    --rec-red: #E62325;
  }.sift-rules-report, .sift-rules-report *, .sift-rules-report *::before, .sift-rules-report *::after{ box-sizing: border-box; }

  /* ---------- Page chrome — two-column use-case lockup ---------- */
  @media (max-width: 760px) {
  }

  /* Iframe wrapper — used to host animation 1 (Rule Animation Widget) inline
     in the use-case page. Aspect-ratio matches the embedded widget's
     16:9 demo stage so the iframe is exactly tall enough. */

  /* Wrapper around the demo-stage and the floating popup for animation 3.
     position: relative makes this the popup's containing block, so the popup
     can extend BELOW the demo-stage's overflow:hidden edge and bleed off
     the page. */

  .sift-rules-report.demo-stage{
    background: #131416;
    border: 1px solid #2A2C2E;
    border-radius: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
    overflow: hidden;
    color: var(--ceramic);
    /* Container query baseline so the inner clip stack scales with the stage. */
    container-type: inline-size;
  }
  /* Dot grid behind everything — same 32px spacing as the old line grid,
     rendered as tiny dots at low opacity. */
  .sift-rules-report.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;
  }

  /* Generic clip transition wrapper — fades content groups in/out as clips swap. */
  .sift-rules-report .clip{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 480ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-report .clip.in{
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- Clip 1 — zoomed-in rule row + Live toggle ----------
     Sits at "zoom level 2" — zoomed in further so only Name + Asset + the
     Enable-Live row are visible. The expression column is hidden at this zoom. */

  /* Yellow "Live" chip — tertiary yellow ground, primary yellow ink. */

  /* Expression column suppressed at this zoom level (kept in DOM if rendered). */

  /* The "Enable Live Rule Evaluation" detail row sits underneath the rule.
     Checkbox is left-aligned with the rule title above (same indent as the
     rule's name column — 0px since the row's cell padding is 0). */

  /* ---------- Clip 2 / 3 — telemetry plot ---------- */

  /* X-axis time labels — drawn as SVG <text> inside the plot SVG, in the
     PAD_BOTTOM strip below the data plot. Mono ink, low contrast. */
  .sift-rules-report .axis-time{
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    fill: var(--gray-40);
    letter-spacing: 0.04em;
  }

  /* Plot foot — sits below the SVG; just holds the channel legend now,
     since the timestamps moved into the SVG. */

  /* Channel legend — square swatches, sits in the plot foot. */

  /* SVG plot itself — sized so it fits comfortably inside the smaller stage.
     Small radius to match animation 1's surface styling. */
  .sift-rules-report .plot-svg{
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
  }

  /* Annotation tab — a solid orange container with white mono ink, rotated
     90° clockwise. Sits inside the top-left of the box by default; flips to
     just OUTSIDE the box's left edge (still rotated) when the box gets too
     narrow on screen to fit the label. */

  /* The whole annotation — rect, tab, and label — pops in together when
     the rule's evaluator confirms the break. Keyed remount fires the run.
     The rect itself just fades in (it lives inside a transformed group,
     where extra CSS transforms compose unpredictably); the tab gets the
     scale pop because it sits outside the transform group. */

  /* Y / X axis tick text. */
  .sift-rules-report .axis-tick{
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    fill: var(--gray-50);
    letter-spacing: 0.06em;
  }
  .sift-rules-report .axis-line{
    stroke: #2A2C2E;
    stroke-width: 1;
  }
  .sift-rules-report .grid-line{
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 1;
  }

  /* X-axis bottom label strip (time range under the plot). */

  /* ---------- Demo cursor (lifted from animation 1) ---------- */
  .sift-rules-report .cursor{
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    opacity: 0;
    z-index: 50;
    pointer-events: none;
    transition: transform 760ms cubic-bezier(0.2,0,0,1),
                opacity 280ms ease-out;
  }
  .sift-rules-report .cursor.fast{
    transition: transform 420ms cubic-bezier(0.2,0,0,1),
                opacity 220ms ease-out;
  }
  .sift-rules-report .cursor.visible{ opacity: 1; }
  .sift-rules-report .cursor-icon{
    position: absolute;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.55));
  }
  .sift-rules-report .cursor-icon.arrow{
    width: 44px; height: 44px;
    top: -9.625px;
    left: -13.75px;
    display: block;
    /* Tip of the cursor is at (13.75, 9.625) inside the 44×44 box — set
       transform-origin there so click-scale pivots from the tip. */
    transform-origin: 13.75px 9.625px;
  }

  /* Click scale-down-up. Fires while .cursor has .clicking; runs once,
     200ms total. No ripple ring — the icon itself dips and returns. */
  .sift-rules-report .cursor.clicking .cursor-icon.arrow{
    animation: sift-rules-report-cursor-click 220ms cubic-bezier(0.2, 0, 0, 1);
  }@keyframes sift-rules-report-cursor-click {
    0%   { transform: scale(1); }
    45%  { transform: scale(0.82); }
    100% { transform: scale(1); }
  }

  /* ---------- Click ring removed — clicks now use a brief scale-down-up
     animation on the cursor icon itself (see .cursor.clicking above). ---------- */

  /* ========================================================================
     Animation 3 — Report view + popup overlay.
     The demo-stage is laid out as a vertical column: top bar with title +
     icons, then the plot below. The popup slides in from the left over the
     plot when the animation hits the "popup" stage.
     ====================================================================== */
  .sift-rules-report .rpt-shell{
    position: absolute;
    inset: 30px 56px 28px 56px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* Top bar — rule name on the left, icon row on the right. */
  .sift-rules-report .rpt-topbar{
    display: flex;
    align-items: center;
  }
  .sift-rules-report .rpt-title-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
  }
  .sift-rules-report .rpt-title{
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 500;
    font-size: 19px;
    color: var(--ceramic);
    letter-spacing: -0.005em;
    white-space: nowrap;
  }
  .sift-rules-report .rpt-icons{
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
  }

  /* Icons are rendered as currentColor-masked rectangles so we can resize
     and recolor them with CSS regardless of the SVG asset's intrinsic
     width/height attributes. Default ink is mid-grey; hover bumps to ceramic. */
  .sift-rules-report .rpt-icon{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Vertical padding gives the hover box height; horizontal is minimal so
       adjacent icons sit visually flush even though each icon owns its own
       hover hit-box. */
    padding: 5px 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 140ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-report .rpt-icon .icon-glyph{
    display: block;
    background-color: var(--gray-30);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    transition: background-color 140ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-report .rpt-icon.explore .icon-glyph{
    width: 18px; height: 18px;
    -webkit-mask-image: url("view-in-explore.svg");
            mask-image: url("view-in-explore.svg");
  }
  .sift-rules-report .rpt-icon.rpt-icons-group{
    cursor: default;
  }
  .sift-rules-report .rpt-icon.rpt-icons-group .icon-glyph{
    /* 41:11 aspect ratio from the source SVG, scaled up to ~22px tall. */
    width: 82px; height: 22px;
    -webkit-mask-image: url("report-icons.svg");
            mask-image: url("report-icons.svg");
  }
  .sift-rules-report .rpt-icon.hover{
    background: rgba(255,255,255,0.08);
  }
  .sift-rules-report .rpt-icon.hover .icon-glyph{
    background-color: var(--ceramic);
  }

  /* Tooltip — small dark capsule with white mono ink. Centered horizontally
     under the icon, with a small upward-pointing triangle attached to the
     top so it visually anchors to the icon. Z-index sits BELOW the icon's
     own stacking context so the icon overlaps the tooltip's top if they
     ever touch. */
  .sift-rules-report .rpt-tooltip{
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    background: #2A2C2E;
    color: var(--ceramic);
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #3A3B38;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -2px);
    pointer-events: none;
    transition: opacity 180ms cubic-bezier(0.2,0,0,1),
                transform 180ms cubic-bezier(0.2,0,0,1);
    z-index: 1;
  }
  /* Upward-pointing pointer — a small dark triangle that overlaps the
     tooltip's top border so the visible result is a tooltip with a
     pointer fused to its top edge. */
  .sift-rules-report .rpt-tooltip::before,
  .sift-rules-report .rpt-tooltip::after{
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    pointer-events: none;
  }
  /* Outer triangle = same color as the tooltip border (covers a notch in
     the top edge of the tooltip), sits 1px above the tooltip. */
  .sift-rules-report .rpt-tooltip::before{
    top: -6px;
    margin-left: -6px;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #3A3B38 transparent;
  }
  /* Inner triangle = same color as the tooltip body, sits 1px inside the
     outer triangle so the border outline is preserved. */
  .sift-rules-report .rpt-tooltip::after{
    top: -5px;
    margin-left: -5px;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent #2A2C2E transparent;
  }
  .sift-rules-report .rpt-tooltip.show{
    opacity: 1;
    transform: translate(-50%, 0);
  }

  /* Plot wrapper — same vocabulary as animation 2 (.plot-wrap).
     Uses the SVG's own aspect ratio so the SVG fills it cleanly and nothing
     inside (text, ticks) ever gets non-uniformly scaled. */
  /* Plot wrapper — square corners. */
  .sift-rules-report .rpt-plot-wrap{
    position: relative;
    width: 100%;
    aspect-ratio: 580 / 290;
    background: #0E0F11;
    border: 1px solid #2A2C2E;
    border-radius: 0;
    overflow: hidden;
  }
  .sift-rules-report .rpt-plot-wrap .plot-svg{
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Plot SVG styling — reused from animation 2, slightly tightened. */
  .sift-rules-report .grid-line{ stroke: rgba(255, 255, 255, 0.04); stroke-width: 1; }
  .sift-rules-report .axis-line{ stroke: #2A2C2E; stroke-width: 1; }
  .sift-rules-report .axis-tick{
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    fill: var(--gray-50);
    letter-spacing: 0.06em;
  }
  .sift-rules-report .threshold-line{
    stroke: var(--gray-50);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.6;
  }
  .sift-rules-report .threshold-label{
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    fill: var(--gray-40);
    letter-spacing: 0.04em;
  }
  .sift-rules-report .axis-time{
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    fill: var(--gray-40);
    letter-spacing: 0.04em;
  }

  /* End-of-loop fade — when the stage carries `.rpt-fading`, every direct
     visible child gets opacity 0 in lockstep, with no transform / motion. */
  .sift-rules-report.demo-stage.rpt-fading .rpt-shell,
  .sift-rules-report.demo-stage.rpt-fading .rpt-popup,
  .sift-rules-report.demo-stage.rpt-fading .cursor{
    opacity: 0;
    transition: opacity 480ms cubic-bezier(0.2, 0, 0, 1);
  }

  /* Build-in fade utility — used during clip 1 to introduce elements
     top-to-bottom one at a time. Each element gets `.bi-in` once its phase
     has been reached; otherwise it's invisible and ignores layout focus. */
  .sift-rules-report .bi{
    opacity: 0;
    transition: opacity 360ms cubic-bezier(0.2, 0, 0, 1);
  }
  .sift-rules-report .bi-in{
    opacity: 1;
  }
  /* Plot-line and annotation rects animate the same way but inside SVG — we
     just toggle opacity attribute on the elements directly. */
  .sift-rules-report .rpt-anno{
    fill: rgba(240, 74, 1, 0.15);
    stroke: var(--sift-orange);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    transition: fill 220ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-report .rpt-anno.selected{
    fill: rgba(240, 74, 1, 0.40);
  }

  /* Channel legend strip — sits below the plot panel, left-aligned,
     matching animation 2's foot row. */
  .sift-rules-report .rpt-foot{
    display: flex;
    align-items: center;
    padding: 6px 2px 0;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--gray-40);
  }
  .sift-rules-report .rpt-foot .ch-key{ display: inline-flex; align-items: center; gap: 7px; }
  .sift-rules-report .rpt-foot .swatch{ width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }

  /* ---------- Popup — slides in from the left over the plot ----------
     Anchored BELOW the top bar so the rule title + icon row stay visible.
     Uses an animation (not transition) on the .in state — in some embedded
     contexts the iframe pauses CSS transitions, but @keyframes still run. */
  /* Popup hugs its content vertically (no fixed bottom) and is allowed to
     overflow the demo-stage so the full rule list is visible regardless of
     stage height. Width still capped so it doesn't crowd the plot.
     Left position matches its bottom padding (12px) so the inset feels even. */
  .sift-rules-report .rpt-popup{
    position: absolute;
    top: 82px;
    left: 27px;
    /* Hug the widest piece of content (rule names, asset chip, etc.)
       instead of being clipped at a fixed width. The plot is wide enough
       that the popup growing a bit doesn't crowd it. */
    width: max-content;
    max-width: calc(100% - 54px);
    background: #1B1D1F;
    border: 1px solid #2A2C2E;
    border-radius: 0;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
    padding: 14px 14px 12px;
    color: var(--ceramic);
    font-family: "IBM Plex Sans", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Reveal: start translated 16px down + transparent. The .in state slides
       it up to its resting position while fading in. */
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    z-index: 10;
    transition: opacity 420ms cubic-bezier(0.2, 0, 0, 1),
                transform 480ms cubic-bezier(0.2, 0, 0, 1);
  }
  .sift-rules-report .rpt-popup.in{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .sift-rules-report .rpt-popup-head{
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid #2A2C2E;
  }
  .sift-rules-report .rpt-popup-eyebrow{
    font-family: "IBM Plex Mono", monospace;
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lunar);
  }
  .sift-rules-report .rpt-popup-name{
    font-weight: 500;
    font-size: 12px;
    color: var(--ceramic);
    letter-spacing: -0.005em;
  }

  .sift-rules-report .rpt-popup-section{
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .sift-rules-report .rpt-popup-field-label{
    font-family: "IBM Plex Mono", monospace;
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lunar);
  }
  .sift-rules-report .rpt-popup-field-val{
    font-size: 10px;
    color: var(--gray-20);
    line-height: 1.4;
  }
  .sift-rules-report .rpt-asset-chip{
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 9px;
    color: var(--gray-30);
    background: #2A2C2E;
    border-radius: 0;
    letter-spacing: 0.04em;
  }

  .sift-rules-report .rpt-popup-rules{ flex: 1 1 auto; min-height: 0; }

  .sift-rules-report .rpt-popup-tabs{
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
  }
  .sift-rules-report .rpt-tab{
    font-family: "IBM Plex Mono", monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
  }
  /* Each status gets a subtle tinted background + full-color text. */
  .sift-rules-report .rpt-tab.tab-open{ color: var(--sift-orange); background: rgba(240, 74, 1, 0.16); }
  .sift-rules-report .rpt-tab.tab-failed{ color: #FA4D56;          background: rgba(250, 77, 86, 0.16); }
  .sift-rules-report .rpt-tab.tab-accepted{ color: #4ED49B;          background: rgba(78, 212, 155, 0.16); }
  .sift-rules-report .rpt-tab.tab-error{ color: #FCC539;          background: rgba(252, 197, 57, 0.18); }

  .sift-rules-report .rpt-rule{
    margin-top: 8px;
    border-top: 1px solid #2A2C2E;
    padding-top: 8px;
  }
  /* Parent rule rows — same vocabulary as annotation entries: flush orange
     stroke on the left, no chevron, lighter-grey hover. */
  .sift-rules-report .rpt-rule-head{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-left: 2px solid var(--sift-orange);
    border-radius: 0;
    background: transparent;
    font-size: 10px;
    color: var(--ceramic);
    cursor: pointer;
    transition: background 140ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-report .rpt-rule-head:hover{
    background: rgba(255,255,255,0.08);
  }
  /* Chevron retired — hidden in case any markup still emits one. */
  .sift-rules-report .rpt-rule-chev{ display: none; }
  .sift-rules-report .rpt-rule-name{
    font-weight: 500;
    /* Reserve only as much space as the name needs; the asset chip pins
       to the right and never wraps to a second line. */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sift-rules-report .rpt-rule-asset{
    display: inline-flex;
    align-items: center;
    padding: 2px 5px;
    margin-left: auto;
    font-family: "IBM Plex Mono", monospace;
    font-size: 8px;
    color: var(--gray-30);
    background: #2A2C2E;
    border-radius: 0;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .sift-rules-report .rpt-rule-list{
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 16px;
  }
  /* Annotation entries inside an expanded rule. Read as rows with a flush
     orange accent on the left; no dot. Hover is a neutral lighter-grey
     tint, not an orange shade. */
  .sift-rules-report .rpt-anno-entry{
    display: flex;
    align-items: center;
    padding: 5px 8px;
    border-left: 2px solid var(--sift-orange);
    border-radius: 0;
    background: transparent;
    font-family: "IBM Plex Mono", monospace;
    font-size: 9.5px;
    color: var(--gray-30);
    cursor: pointer;
    transition: background 140ms cubic-bezier(0.2,0,0,1),
                color 140ms cubic-bezier(0.2,0,0,1);
  }
  .sift-rules-report .rpt-anno-entry:hover{
    background: rgba(255,255,255,0.08);
    color: var(--ceramic);
  }
  .sift-rules-report .rpt-anno-entry.selected{
    background: rgba(255,255,255,0.08);
    color: var(--ceramic);
  }
  /* Dot retained in CSS only so old markup doesn't fall back to default
     bullet styling; it's removed from the JSX. */
  .sift-rules-report .rpt-anno-dot{ display: none; }
  .sift-rules-report .rpt-anno-time{
    letter-spacing: 0.04em;
  }