/* GENERATED by build/rtl.py from livebarn.css — do not edit.
   The right-to-left mirror of the stylesheet. Only physical properties are
   flipped; logical ones (flex order, grid order, text-align:start) already
   follow <html dir="rtl"> and are left alone. */
/* ==================================================================
   LIVE BARN — livebarn.html only
   Sits on top of template.css; every colour is taken from the site
   token set so the dark stage reads as part of the same system.
   Built by build/build.py — edit here, not in the generated page.
   ================================================================== */

/* ---------- 1. Hero band: photo fades into the dark stage ---------- */
.lb-hero {position: relative;isolation: isolate;overflow: hidden;background: #04101e;color: #eaf1f7;
}
.lb-hero__bg {position: absolute;inset: 0 0 auto 0;height: 78%;z-index: -2;
}
.lb-hero__bg img {width: 100%;height: 100%;object-fit: cover;object-position: 50% 44%; }
.lb-hero__bg::after {content: '';position: absolute;inset: 0;background: linear-gradient(180deg, rgba(4, 16, 30, 0.58) 0%,
                            rgba(4, 16, 30, 0.84) 44%,
                            rgba(4, 16, 30, 0.98) 78%,
                            #04101e 100%),
    linear-gradient(90deg, rgba(4, 16, 30, 0.78) 0%, rgba(4, 16, 30, 0.30) 72%);
}
.lb-hero__glow {position: absolute;right: 50%;bottom: -34%;width: 120%;height: 80%;z-index: -1;transform: translateX(-50%);background: radial-gradient(50% 60% at 50% 55%, rgba(26, 106, 255, 0.26), transparent 72%);pointer-events: none;
}
.lb-hero__inner {padding-top: clamp(2.6rem, 4.4vw, 4.4rem); }
.lb-hero .breadcrumb {margin-bottom: 1.15rem; }
.lb-hero .eyebrow {color: #86b8ff; }
.lb-hero h1 {max-width: 22ch;margin: 0 0 1rem;color: #fff;font-size: var(--fs-h1);font-weight: 800;letter-spacing: -0.055em;line-height: 1.04;
}
.lb-hero__lead {max-width: 43rem;margin: 0;color: rgba(234, 241, 247, 0.76);font-size: var(--fs-lead);
}
.lb-facts {display: flex;flex-wrap: wrap;gap: 0 2.6rem;margin: 1.7rem 0 0;padding: 0;list-style: none;
}
.lb-facts li {display: flex;flex-direction: column;gap: 0.1rem; }
.lb-facts b {color: #fff;font-size: 1.2rem;font-weight: 700;letter-spacing: -0.03em;
}
.lb-facts span {color: rgba(234, 241, 247, 0.46);font-size: 0.68rem;font-weight: 600;letter-spacing: 0.12em;text-transform: uppercase;
}

/* ---------- 2. The stage ------------------------------------------- */
.lb-stage-wrap {padding: clamp(1.6rem, 2.6vw, 2.3rem) 0 clamp(2.6rem, 4.4vw, 3.8rem); }

.lb-stage {position: relative;overflow: hidden;border: 1px solid rgba(255, 255, 255, 0.10);border-radius: var(--r-lg);background: #07182c;box-shadow: 0 0 0 1px rgba(26, 106, 255, 0.10) inset, 0 0 110px 55px rgba(26, 106, 255, 0.75), 0 50px -90px -52px rgba(0, 0, 0, 0.95);
}

.lb-bar {display: flex;align-items: center;justify-content: space-between;gap: 0.9rem;padding: 0.6rem 1rem;border-bottom: 1px solid rgba(255, 255, 255, 0.07);background: rgba(4, 16, 30, 0.78);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);
}

.lb-live {display: inline-flex;flex: none;align-items: center;gap: 0.5rem;color: rgba(234, 241, 247, 0.6);font-size: 0.68rem;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;white-space: nowrap;
}
.lb-live__dot {width: 7px;height: 7px;border-radius: 50%;background: #22c55e;animation: lbPulse 2.6s var(--ease) infinite;
}
@keyframes lbPulse {
  0%   {box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  {box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% {box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.lb-expand {display: inline-flex;flex: none;align-items: center;gap: 0.5rem;height: 34px;padding: 0 0.85rem;border: 0;border-radius: 9px;background: var(--c-accent);color: #fff;font-family: var(--f-sans);font-size: 0.69rem;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;white-space: nowrap;cursor: pointer;transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.lb-expand:hover {background: #0f57d8;transform: translateY(-1px); }
.lb-expand svg {width: 14px;height: 14px;flex: none; }

/* the plan itself — this is the simulator, not a picture of it ------- */
.lb-frame {position: relative;background: #07182c;
}
.lb-app {display: block;width: 100%;height: 300px;           /* replaced with the measured height on load */border: 0;background: #07182c;color-scheme: dark;
}

/* the readout line — four numbers, tabular so they never jitter ------ */
.lb-readout {display: flex;align-items: stretch;flex: none;min-width: 0;
}
.lb-ro {display: flex;flex-direction: column;gap: 2px;padding: 0 clamp(0.55rem, 1.1vw, 0.95rem);border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.lb-ro:first-child {padding-right: 0;border-right: 0; }
.lb-ro__k {color: rgba(234, 241, 247, 0.42);font-size: 0.58rem;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;white-space: nowrap;
}
.lb-ro__v {display: flex;align-items: baseline;gap: 0.22rem;color: #fff;font-size: 0.9rem;font-weight: 700;font-variant-numeric: tabular-nums;letter-spacing: -0.02em;white-space: nowrap;
}
.lb-ro__v i {font-style: normal;font-size: 0.6rem;font-weight: 600;letter-spacing: 0.06em;text-transform: uppercase;color: rgba(234, 241, 247, 0.45);
}

/* caption ----------------------------------------------------------- */
.lb-cap {display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: 0.4rem 1.5rem;margin-top: 0.9rem;color: rgba(234, 241, 247, 0.42);font-size: var(--fs-xs);
}
.lb-cap b {color: rgba(234, 241, 247, 0.72);font-weight: 600; }
.lb-cap kbd {display: inline-block;min-width: 20px;margin: 0 0.15rem;padding: 0.05rem 0.35rem;border: 1px solid rgba(255, 255, 255, 0.18);border-radius: 4px;color: rgba(234, 241, 247, 0.8);font-family: var(--f-sans);font-size: 0.68rem;font-weight: 700;text-align: center;
}

/* ---------- 3. Light content sections ------------------------------ */
.lb-sys {border-radius: var(--r-lg); }
.lb-sys .card__body {gap: 0.55rem; }
.lb-sys__rule {height: 3px;border-radius: 3px; }
.lb-sys__line {display: flex;align-items: center;gap: 0.45rem;margin: 0;color: var(--c-ink-mute);font-size: var(--fs-xs);font-weight: 600;letter-spacing: 0.06em;text-transform: uppercase;
}
.lb-sys__line i {width: 7px;height: 7px;border-radius: 2px;flex: none; }

/* The fourth system has no scene yet, so where "Open the … scene" would sit
   the card reports its state instead. The chip is the same one the solution
   cards use for a half-shipped family — a status stamp, not a button. */
.lb-sys__soon {display: flex;flex-wrap: wrap;align-items: center;gap: 0.45rem;margin: auto 0 0;padding-top: 0.9rem;color: var(--c-ink-mute);font-size: 0.72rem;line-height: 1.5;
}
/* nothing to click, so nothing to lift */
.lb-sys--soon:hover {transform: none;box-shadow: 0 14px -30px -26px rgba(9, 47, 87, 0.5);
}

/* The three cards double as arrival points from the grade pages
   (livebarn.html#fanpilot and friends). Land with room above the card, and
   mark the one that was asked for — six other cards look identical. */
.lb-sys {scroll-margin-top: 96px; }
.lb-sys:target {border-color: rgba(26, 106, 255, 0.42);box-shadow: 0 0 0 1px rgba(26, 106, 255, 0.18), 0 22px -46px -32px rgba(26, 106, 255, 0.75);
}
.lb-sys__open {display: inline-flex;align-items: center;gap: 0.4rem;align-self: flex-start;
  /* four cards, not three: at 269 px the longest label wraps, so every
     button holds the two-line height and the row keeps one baseline */min-height: 2.4rem;margin-top: 0.15rem;padding: 0.42rem 0.8rem;border: 1px solid rgba(26, 106, 255, 0.34);border-radius: 8px;background: rgba(26, 106, 255, 0.07);color: var(--c-accent);font-family: var(--f-sans);font-size: 0.66rem;font-weight: 700;letter-spacing: 0.09em;text-transform: uppercase;text-align: right;text-wrap: balance;cursor: pointer;transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lb-sys__open:hover {background: rgba(26, 106, 255, 0.13);border-color: rgba(26, 106, 255, 0.55);
}

.lb-list {display: grid;gap: 0;margin: 0;padding: 0;border-top: 1px solid var(--c-line);
}
.lb-list > div {display: grid;grid-template-columns: 10.5rem minmax(0, 1fr);gap: 1.4rem;padding: 1rem 0;border-bottom: 1px solid var(--c-line);
}
.lb-list dt {color: var(--c-ink);font-size: var(--fs-xs);font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;
}
.lb-list dd {margin: 0;font-size: var(--fs-sm);color: var(--c-ink-soft); }

/* the honest small print: this is a model, not a controller */
.lb-disclaimer {margin: 0;padding: 1.05rem 1.25rem;border: 1px solid var(--c-line);border-right: 3px solid var(--c-accent);border-radius: var(--r-md) 0 0 var(--r-md);background: var(--c-tint);font-size: var(--fs-xs);line-height: 1.7;color: var(--c-ink-mute);
}
.lb-disclaimer b {color: var(--c-ink); }

/* ---------- 4. Expanded: the app brings its own console ------------- */
/* .lb-hero sets isolation:solate, so a fixed child stays inside that
   stacking context — lift the hero itself to clear header + later sections */
body.lb-lock .lb-hero {z-index: 950; }
.lb-stage.is-expanded {position: fixed;inset: 0;z-index: 900;display: flex;flex-direction: column;border: 0;border-radius: 0;box-shadow: none;background: #04101e;
}
.lb-stage.is-expanded .lb-bar {display: none; }
.lb-stage.is-expanded .lb-frame {flex: 1;display: flex;min-height: 0; }
.lb-stage.is-expanded .lb-app {flex: 1;height: 100%; }
body.lb-lock {overflow: hidden; }

/* The clock. In the page's layer rather than the app's, so it survives the
   model re-fitting itself, and pinned to the top-right band beside the app's
   own EXIT rather than over the drawing. pointer-events:none keeps it from
   swallowing a click meant for the corner control. */
/* --lb-clock-gap is reused by the page script: the app's console keeps its
   physical side on the Arabic tree, so the clock has to keep its own. */
.lb-clock {display: none;--lb-clock-gap: clamp(64px, 7vw, 100px); }
.lb-stage.is-expanded .lb-clock {display: flex;flex-direction: column;align-items: flex-end;gap: 1px;position: absolute;top: 10px;left: var(--lb-clock-gap);z-index: 920;padding: 0.3rem 0.72rem 0.36rem;border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.14);background: rgba(8, 20, 36, 0.66);backdrop-filter: blur(6px);color: #eaf1f7;pointer-events: none;font-variant-numeric: tabular-nums;
}
.lb-clock__t {font-size: clamp(1.02rem, 1.45vw, 1.36rem);font-weight: 700;line-height: 1.04;letter-spacing: 0.02em;
}
.lb-clock__d {font-size: 0.68rem;letter-spacing: 0.045em;text-transform: uppercase;color: rgba(234, 241, 247, 0.62);
}
@media (max-width: 760px) {
  .lb-stage.is-expanded .lb-clock {top: 8px;left: var(--lb-clock-gap);padding: 0.24rem 0.56rem 0.3rem; }
  .lb-clock__d {display: none; }
}

/* ---------- 5. Responsive ------------------------------------------ */
.lb-readout {margin-right: auto; }
.lb-ro__v b {font-weight: 700; }
.lb-ro__v i {text-transform: none; }

@media (max-width: 1080px) {
  .lb-bar {flex-wrap: wrap;row-gap: 0.55rem; }
  .lb-expand {order: 2; }
  .lb-readout {order: 3;width: 100%;margin-right: 0;padding-top: 0.55rem;border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .lb-ro {flex: 1 1 0; }
}
@media (max-width: 860px) {
  .lb-ro__k {font-size: 0.54rem;letter-spacing: 0.1em; }
  .lb-ro__v {font-size: 0.86rem; }
  .lb-cap {justify-content: flex-start; }
  .lb-list > div {grid-template-columns: 1fr;gap: 0.3rem; }
}
@media (max-width: 640px) {
  .lb-readout {display: grid;grid-template-columns: 1fr 1fr;gap: 0.6rem 0; }
  .lb-ro {padding: 0 0.85rem; }
  .lb-ro:nth-child(odd) {padding-right: 0;border-right: 0; }
  .lb-ro:nth-child(even) {border-right: 1px solid rgba(255, 255, 255, 0.08); }
  .lb-stage-wrap {padding-top: 1rem; }
}