/* Remotek landing page: the capability panels in motion (caps-anim.js).
 *
 * Every panel beside the capability list is the app's own screen drawn in markup; caps-anim.js
 * plays a short loop of that screen being used while its capability is on show, on screen, in a
 * visible tab and with no reduced-motion request. This file holds what those loops need and the
 * markup alone does not: the pointer, the confirmation dialog, the breadcrumb pills, the command
 * field, the live layouts of the terminal and the process list. It is loaded after site.css and
 * overrides it only where a panel changes while it plays.
 *
 * The same rules as the rest of the page: transform and opacity move, nothing else is transitioned
 * (test_site_caps.py reads this file like the landing test reads site.css); the positions a script
 * knows are custom properties written through the CSSOM; the endless loops (the caret, the spinner,
 * the progress bar) run only under .is-run, which the engine sets while a loop plays, so a panel
 * that is not playing keeps no animation alive.
 */

/* The app's load and temperature ramp (Theme.kt, rampColor), per theme. */
.rk-caps { --cap-g: #22C55E; --cap-y: #FACC15; --cap-o: #F97316; --cap-r: #EF4444; }
:root[data-theme="light"] .rk-caps { --cap-g: #15803D; --cap-y: #D97706; --cap-o: #EA580C; --cap-r: #B91C1C; }

/* --- the pointer -----------------------------------------------------------------------------
   One element per panel, moved by transform from where it rests. Its tip is 4px in from the top
   left; the ring under the tip is the click. --mv is the length of the current move, written with
   it, so a drag and the window it drags share one duration. */
.rk-cur {
  position: absolute; left: 0; top: 0; z-index: 6; width: 22px; height: 22px; pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0);
  transition: transform var(--mv, .8s) cubic-bezier(.5, 0, .2, 1), opacity .25s var(--rk-ease-out);
}
.rk-cur.is-on { opacity: 1; }
.rk-cur__ptr {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; transform-origin: 4px 4px;
  fill: #FFFFFF; stroke: #0B0F17; stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  transition: transform .12s var(--rk-ease-out);
}
.rk-cur.is-down .rk-cur__ptr { transform: scale(.88); }
.rk-cur__tap {
  position: absolute; left: 4px; top: 4px; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid var(--rk-accent-ink); opacity: 0;
}

/* A hovered row: one flat layer of the text colour over the row, faded - never a recoloured ground. */
[data-scene] .rk-file, [data-scene] .rk-act, [data-scene] .rk-prow { position: relative; isolation: isolate; }
[data-scene] .rk-file::before, [data-scene] .rk-act::before, [data-scene] .rk-prow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--rk-text); opacity: 0; transition: opacity .18s var(--rk-ease);
}
[data-scene] .rk-file.is-hover::before, [data-scene] .rk-act.is-hover::before, [data-scene] .rk-prow.is-hover::before { opacity: .07; }

/* --- 1. screen and input: the remote pointer, focus, a dragged window --------------------------- */
.rk-cur--desk { left: 64%; top: 56%; z-index: 4; opacity: 1; }
.rk-desk__win {
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0);
  transition: transform var(--mv, .8s) cubic-bezier(.5, 0, .2, 1);
}
.rk-desk__win.is-top { z-index: 2; }
.rk-desk__win.is-focus { border-color: color-mix(in srgb, var(--rk-accent) 45%, transparent); }
.rk-desk__win.is-focus .rk-desk__bar { background: var(--rk-highest); }
.rk-desk__task { z-index: 3; }

/* --- 2. terminal: seven lines of transcript that scroll, and the command field ------------------ */
.rk-term__screen { height: calc(7 * 1.75em); overflow: hidden; }
.rk-term__roll {
  transform: translate3d(0, calc(var(--roll, 0) * -1.75em), 0);
  transition: transform .24s var(--rk-ease-out);
}
.rk-term__roll.is-snap { transition: none; }
/* One row per line at every width, or the scroll by whole lines would be wrong. */
.rk-term__roll > p { white-space: pre; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.rk-term__input {
  display: flex; align-items: center; gap: 8px; height: 36px; margin-top: 10px; padding: 0 4px 0 12px;
  border-radius: var(--rk-r-pill); background: var(--rk-high); border: 1px solid var(--rk-line);
  line-height: 1;
}
.rk-term__chev { width: 14px; height: 14px; color: var(--rk-accent-ink); }
.rk-term__field {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 100%;
  white-space: pre; overflow: hidden; color: var(--rk-text);
}
.rk-term__hint {
  position: absolute; left: 0; top: 50%; translate: 0 -50%;
  font-family: var(--rk-sans); color: var(--rk-muted); opacity: .8; transition: opacity .12s linear;
}
.rk-term__field.has-text .rk-term__hint { opacity: 0; }
.rk-term__icaret { display: inline-block; width: 2px; height: 1.25em; margin-left: 1px; background: var(--rk-accent-ink); opacity: 0; }
.rk-term__field.is-focus .rk-term__icaret { opacity: 1; }
.is-run .rk-term__field.is-focus .rk-term__icaret { animation: rk-caps-blink 1.06s steps(1) infinite; }
@keyframes rk-caps-blink { 50% { opacity: 0; } }
.rk-term__send {
  position: relative; isolation: isolate; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: var(--rk-muted);
}
.rk-term__send .rk-i { width: 15px; height: 15px; }
.rk-term__send.is-armed { color: var(--rk-accent-ink); background: color-mix(in srgb, var(--rk-accent) 16%, transparent); }

/* --- 3. files: the breadcrumb pills and a list that keeps its height --------------------------- */
.rk-crumbs { overflow: hidden; }
.rk-crumbs__row {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; width: max-content;
  transform: translate3d(var(--shift, 0px), 0, 0); transition: transform .35s var(--rk-ease-out);
}
.rk-crumbs__row > * { flex: none; }
.rk-crumb {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--rk-r-pill); background: var(--rk-high); border: 1px solid var(--rk-line);
  font-size: .74rem; font-weight: 600; color: var(--rk-muted);
}
.rk-crumb .rk-i { width: 13px; height: 13px; }
.rk-crumb.is-on {
  color: var(--rk-accent-text); border-color: color-mix(in srgb, var(--rk-accent) 40%, transparent);
  background: color-mix(in srgb, var(--rk-accent) 12%, var(--rk-high));
}
.rk-crumbs__sep { width: 13px; height: 13px; color: var(--rk-muted); opacity: .6; }
.rk-files__list { display: grid; gap: 8px; align-content: start; min-height: 216px; }

/* --- 4. power: the computer's row, the confirmation, the restart -------------------------------- */
.rk-pcrow {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 11px; padding: 10px 12px; border-radius: var(--rk-r-sm); overflow: hidden;
  background: var(--rk-high); border: 1px solid var(--rk-line);
}
.rk-pcrow__tile { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--rk-bg); color: var(--rk-accent-ink); }
.rk-pcrow__tile .rk-i { width: 18px; height: 18px; }
.rk-pcrow__id { display: grid; min-width: 0; }
.rk-pcrow__id b { font-size: .86rem; font-weight: 700; letter-spacing: -.01em; }
.rk-pcrow__id small { font-size: .72rem; color: var(--rk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pcrow__st { position: relative; width: 18px; height: 18px; display: grid; place-items: center; }
.rk-pcrow__st .rk-dot { transition: opacity .2s linear; }
.rk-pcrow__spin {
  position: absolute; left: 1px; top: 1px; width: 16px; height: 16px;
  fill: none; stroke: var(--rk-accent-ink); stroke-width: 2.6; stroke-linecap: round;
  opacity: 0; transition: opacity .2s linear;
}
.rk-pcrow.is-wait .rk-pcrow__st .rk-dot { opacity: 0; }
.rk-pcrow.is-wait .rk-pcrow__spin { opacity: 1; }
.is-run .rk-pcrow.is-wait .rk-pcrow__spin { animation: rk-caps-spin .8s linear infinite; }
@keyframes rk-caps-spin { to { transform: rotate(360deg); } }
.rk-pcrow__busy { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; opacity: 0; transition: opacity .2s linear; }
.rk-pcrow__busy i { position: absolute; left: 0; top: 0; width: 40%; height: 100%; border-radius: 1px; background: var(--rk-accent-ink); }
.rk-pcrow.is-busy .rk-pcrow__busy { opacity: 1; }
.is-run .rk-pcrow.is-busy .rk-pcrow__busy i { animation: rk-caps-busy 1s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes rk-caps-busy { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(250%, 0, 0); } }

.rk-dlg {
  position: absolute; inset: 0; z-index: 5; border-radius: inherit;
  display: grid; place-items: center; background: rgba(4, 7, 12, .56);
  opacity: 0; visibility: hidden; transition: opacity .2s linear, visibility 0s linear .2s;
}
:root[data-theme="light"] .rk-dlg { background: rgba(15, 23, 42, .18); }
.rk-dlg.is-open { opacity: 1; visibility: visible; transition: opacity .2s linear, visibility 0s; }
.rk-dlg__box {
  width: min(272px, 86%); padding: 18px 18px 14px; border-radius: var(--rk-r-card);
  background: var(--rk-high); border: 1px solid var(--rk-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
  transform: scale(.94); transition: transform .28s var(--rk-ease-out);
}
:root[data-theme="light"] .rk-dlg__box { background: var(--rk-surface); box-shadow: 0 18px 40px rgba(15, 23, 42, .16); }
.rk-dlg.is-open .rk-dlg__box { transform: none; }
.rk-dlg__t { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.rk-dlg__b { margin-top: 6px; font-size: .84rem; color: var(--rk-muted); }
.rk-dlg__btns { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 16px; }
.rk-dlg__no, .rk-dlg__yes {
  position: relative; isolation: isolate; display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px; border-radius: var(--rk-r-pill); font-size: .82rem; font-weight: 600;
}
.rk-dlg__no { color: var(--rk-muted); }
/* The app's error button: onError on error - dark ink on the dark theme's red, white on the light one's. */
.rk-dlg__yes { background: var(--rk-red); color: #2A0606; }
:root[data-theme="light"] .rk-dlg__yes { color: #FFFFFF; }
.rk-dlg__yes::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #FFFFFF; opacity: 0; transition: opacity .18s var(--rk-ease);
}
:root[data-theme="light"] .rk-dlg__yes::before { background: #000000; }
.rk-dlg__yes.is-hover::before { opacity: .16; }

/* --- 5. sensors: the ring, the scrolling line, the memory bar ---------------------------------- */
.rk-ring__fill[data-sn-arc] { stroke-dashoffset: var(--off, 98); }
:root .rk-ring__fill.has-c { stroke: var(--c); }
[data-sn-line] { vector-effect: non-scaling-stroke; }
/* The line slides as a box (a composited transform) inside its clip, and draws past its own edges
   into it: a transform on the path itself would be laid out again on every frame. */
.rk-spark__clip { display: block; overflow: hidden; }
.rk-spark__clip > .rk-spark { display: block; overflow: visible; }
[data-sn] { font-variant-numeric: tabular-nums; }
/* A narrow tile breaks between the value and its unit, never inside either ("144 / КБ/с"). */
[data-scene] .rk-metrics b { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; }
[data-scene] .rk-metrics b > span { white-space: nowrap; }
/* The memory line, in a narrow side column: the value goes under its label whole ("11,4 / 32 ГБ"),
   never pressed against it with its unit on a line of its own. */
[data-scene] .rk-bar__label { flex-wrap: wrap; column-gap: 8px; }
[data-scene] .rk-bar__label b { white-space: nowrap; }
.rk-bar__fill.is-live {
  width: 100%;
  transform: translate3d(calc((var(--v, 36) - 100) * 1%), 0, 0);
  transition: transform .9s var(--rk-ease-out);
}
.rk-bar__fill.is-live.is-snap { transition: none; }

/* --- 6. processes: sorted by CPU, rows that slide to their place ------------------------------- */
.rk-sortpill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 6px 0 9px;
  border-radius: var(--rk-r-pill); background: var(--rk-highest);
  font-family: var(--rk-mono); font-size: .7rem; font-weight: 600; color: var(--rk-text);
}
.rk-sortpill .rk-i { width: 12px; height: 12px; }
.rk-proc__list { display: grid; gap: 8px; --slots: 5; }
.rk-proc .rk-prow__n small { font-family: var(--rk-mono); }
.rk-prow__cpu { font-family: var(--rk-mono); font-size: .75rem; font-weight: 700; text-align: right; min-width: 3.2em; color: var(--rk-muted); }
.rk-prow__cpu.has-c { color: var(--c); }
:root[data-theme="light"] .rk-prow__cpu.has-c { color: color-mix(in srgb, var(--c) 76%, #000000); }
.rk-prow__cpu.is-idle { font-weight: 400; opacity: .7; }
/* Live, the rows are laid out by slot: --row is one row's height, measured by the script. */
.rk-proc__list.is-live { position: relative; display: block; height: calc(var(--slots) * var(--row, 44px) + (var(--slots) - 1) * 8px); overflow: hidden; }
.rk-proc__list.is-live .rk-prow {
  position: absolute; left: 0; right: 0; top: 0;
  transform: translate3d(var(--gx, 0px), calc(var(--slot, 0) * (var(--row, 44px) + 8px)), 0);
  transition: transform .55s var(--rk-ease-out), opacity .35s linear;
}
.rk-proc__list.is-live .rk-prow.is-snap { transition: none; }
.rk-proc__list.is-live .rk-prow.is-out, .rk-proc__list.is-live .rk-prow.is-new { opacity: 0; }

/* --- tablets and phones: the reading column (site.css, .rk-caps-flow) ---------------------------
   Every panel sits under its own description at its own height, so nothing here stretches a panel
   to match another. What keeps a panel compact is only what the app's screen can spare: the power
   sheet without its grab handle (a sheet's handle means nothing outside a sheet), the files list
   three rows deep, and on a phone its actions a little tighter and the process list four rows deep
   (the loop reads --slots). The files list keeps a fixed height so the page under it never moves:
   three rows is what the drives and every folder of the walk fill (abdul's fourth row, report.pdf,
   is below the fold of the list; C:\Users has two), where the stage's four-row height left a band
   of nothing above the actions. A row is its 30px tile and 9px padding above and below. The alert
   rule under the sensors, which the pinned stage once had no room for, is back. */
.rk-caps-flow .rk-panel .rk-sheet__grab { display: none; }
.rk-caps-flow .rk-panel .rk-files__list { min-height: calc(3 * 48px + 2 * 8px); }
.rk-caps-flow .rk-panel .rk-files__list > :nth-child(n+4) { display: none; }
@media (max-width: 760px) {
  .rk-caps-flow .rk-panel [data-scene] .rk-act { padding-block: 6px; }
  .rk-caps-flow .rk-panel .rk-proc__list { --slots: 4; }
  .rk-caps-flow .rk-panel .rk-proc__list:not(.is-live) > .rk-prow:nth-child(n+5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rk-cur, .rk-desk__win, .rk-term__roll, .rk-crumbs__row, .rk-dlg, .rk-dlg__box, .rk-bar__fill.is-live,
  .rk-proc__list.is-live .rk-prow, .rk-term__hint, .rk-pcrow__spin, .rk-pcrow__busy, .rk-pcrow__st .rk-dot { transition: none; }
}