/* Generated by scripts/generate-runway-bindings.mjs. */
:root {
  --bg: #FBFAF7;
  --panel: #FFFFFF;
  --ink: #16181D;
  --dim: #8A8D96;
  --hair: #E4E2DB;
  --cobalt: #2742C8;
  --cobalt-soft: #EDEFFB;
  --amber: #B97E22;
  --red: #B3402E;
  --ok: #20744F;
  --on-accent: #FFFFFF;
  --canvas: #E9E7E0;
  --flag-red: #D90012;
  --flag-blue: #0033A0;
  --flag-orange: #F2A800;
  --runway-display: Optima, Candara, 'Noto Sans', sans-serif;
  --runway-interface: 'Avenir Next', 'Segoe UI', sans-serif;
  --runway-utility: Menlo, Consolas, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #312A23;
  --panel: #3C342B;
  --ink: #F0E7DA;
  --dim: #B0A28E;
  --hair: #4C4237;
  --cobalt: #A3ACE6;
  --cobalt-soft: #454153;
  --amber: #D9A662;
  --red: #D68B75;
  --ok: #98BF97;
  --on-accent: #262330;
  --canvas: #272119;
  --flag-red: #E5464F;
  --flag-blue: #5C7FD6;
  --flag-orange: #F5B84A;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
  --bg: #312A23;
  --panel: #3C342B;
  --ink: #F0E7DA;
  --dim: #B0A28E;
  --hair: #4C4237;
  --cobalt: #A3ACE6;
  --cobalt-soft: #454153;
  --amber: #D9A662;
  --red: #D68B75;
  --ok: #98BF97;
  --on-accent: #262330;
  --canvas: #272119;
  --flag-red: #E5464F;
  --flag-blue: #5C7FD6;
  --flag-orange: #F5B84A;
    color-scheme: dark;
  }
}

/* Зарегистрированный угол заливки: без @property переменная не интерполируется, и кольцо прыгает. */
@property --runway-progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.runway-ring {
  --runway-progress: 0deg;
  width: min(20rem, 78vw);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: var(--ink);
  background: radial-gradient(closest-side, var(--bg) calc(100% - 3px), transparent calc(100% - 2px)), conic-gradient(var(--cobalt) var(--runway-progress), var(--hair) 0);
  font-family: var(--runway-interface);
  cursor: pointer;
  transition: --runway-progress 360ms cubic-bezier(.22, .61, .36, 1);
}
.runway-ring__arrow { color: var(--cobalt); font-size: 2rem; }
.runway-ring__label { font-family: var(--runway-display); font-size: 1.4rem; font-weight: 500; }
.runway-ring__hint { color: var(--dim); font-size: .82rem; }
.runway-ring__note { margin-top: -.25rem; color: var(--cobalt); font-size: .76rem; font-variant-numeric: tabular-nums; }
.runway-segmented { display: inline-flex; gap: .15rem; padding: .2rem; border: 1px solid var(--hair); border-radius: 999px; background: var(--panel); }
.runway-segmented__option { border: 0; border-radius: 999px; padding: .45rem .85rem; color: var(--dim); background: transparent; font: inherit; cursor: pointer; }
.runway-segmented__option.is-selected { color: var(--bg); background: var(--ink); font-weight: 600; }
.runway-receivers__single { display: inline-block; max-width: min(18rem, 62vw); overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.runway-theme-toggle { position: relative; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; display: inline-grid; place-items: center; color: var(--dim); background: transparent; cursor: pointer; }
.runway-theme-toggle:hover { color: var(--ink); background: var(--cobalt-soft); }
.runway-theme-toggle svg { grid-area: 1 / 1; width: 1.15rem; height: 1.15rem; transition: opacity 160ms ease, transform 220ms ease; }
.runway-theme-toggle .is-hidden-icon { opacity: 0; transform: rotate(-90deg) scale(.4); }
.runway-transfer { display: flex; align-items: baseline; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--hair); font-family: var(--runway-interface); }
.runway-transfer__copy { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.runway-transfer__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runway-transfer__detail { color: var(--dim); font-size: .8rem; }
.runway-transfer__status { margin-left: auto; white-space: nowrap; }
.runway-tone-ok .runway-transfer__status { color: var(--ok); }
.runway-tone-queued .runway-transfer__status { color: var(--amber); }
.runway-tone-error .runway-transfer__status { color: var(--red); }
.runway-tone-active .runway-transfer__status { color: var(--cobalt); }
.runway-group { padding: .75rem 0; border-bottom: 1px solid var(--hair); font-family: var(--runway-interface); }
.runway-group__head { display: flex; align-items: center; gap: .7rem; }
.runway-group__toggle { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: .5rem; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.runway-group__chevron { flex: none; color: var(--dim); font-size: .95rem; line-height: 1; transition: transform 160ms ease; }
.runway-group__toggle[aria-expanded="true"] .runway-group__chevron { transform: rotate(90deg); }
.runway-group__folder { flex: none; width: 1.05rem; height: 1.05rem; color: var(--cobalt); }
.runway-group__name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.runway-group__badge { flex: none; padding: .1rem .5rem; border-radius: 999px; color: var(--cobalt); background: var(--cobalt-soft); font: .68rem var(--runway-utility); letter-spacing: .04em; white-space: nowrap; }
.runway-group__meter { --runway-progress: 0deg; flex: none; width: 1.15rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--bg) calc(100% - 2.5px), transparent calc(100% - 2px)), conic-gradient(var(--cobalt) var(--runway-progress), var(--hair) 0); }
.runway-group__mark { width: .62rem; height: .62rem; }
.runway-tone-ok .runway-group__mark { color: var(--ok); }
.runway-tone-error .runway-group__mark { color: var(--red); }
.runway-group__status { white-space: nowrap; }
.runway-tone-ok .runway-group__status { color: var(--ok); }
.runway-tone-queued .runway-group__status { color: var(--amber); }
.runway-tone-error .runway-group__status { color: var(--red); }
.runway-tone-active .runway-group__status { color: var(--cobalt); }
.runway-group__detail { margin: .2rem 0 0 1.55rem; color: var(--dim); font-size: .8rem; }
.runway-group__note { margin: .2rem 0 0 1.55rem; color: var(--red); font-size: .8rem; }
.runway-group__files { margin: .35rem 0 0 1.55rem; }
.runway-group__files .runway-transfer:last-child { border-bottom: 0; padding-bottom: 0; }
/* Квитанция файла папки называет и подпапку, поэтому внутри группы статус переносится, а не выходит за край. */
.runway-group__files .runway-transfer__status { white-space: normal; text-align: right; }
.runway-link { border: 0; padding: 0; color: var(--dim); background: transparent; text-decoration: underline; text-underline-offset: .2rem; cursor: pointer; }
:where(.runway-ring, .runway-segmented__option, .runway-theme-toggle, .runway-group__toggle, .runway-link):focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
/* На узком экране имя папки сжималось до нечитаемого остатка: заголовок занимает всю строку, а
   агрегат, статус и отмена переходят на вторую, выровненную по подписи группы. */
@media (max-width: 34rem) {
  .runway-group__head { flex-wrap: wrap; row-gap: .3rem; }
  .runway-group__toggle { flex: 1 1 100%; }
  .runway-group__meter { margin-left: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) { .runway-theme-toggle svg, .runway-group__chevron { transition: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }