/* Карточки на орбите hero: фрагменты интерфейса Double Hub.
   Все размеры в em — 1em равен 1/16 ширины карточки (см. .orbit-card в styles.css). */

.orbit-card {
  --oc-muted: #a1a1a1;
  --oc-muted-bg: #262626;
  --oc-success: oklch(.792 .209 151.711);
  --oc-warning: oklch(.828 .189 84.429);
  --oc-info: oklch(.707 .165 254.624);
  --oc-danger: oklch(.637 .237 25.331);
  --oc-tag-green: oklch(.723 .192 149.579);
}

.orbit-card:hover {
  border-color: rgba(215, 182, 255, .45);
  box-shadow:
    0 1.1111cqw 3.3333cqw rgba(0, 0, 0, .45),
    0 0 2.6em rgba(172, 119, 240, .35),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.orbit-card.is-live { animation: oc-live 1400ms ease-out; }

@keyframes oc-live {
  0%, 35% {
    border-color: rgba(215, 182, 255, .55);
    box-shadow:
      0 1.1111cqw 3.3333cqw rgba(0, 0, 0, .45),
      0 0 3em rgba(172, 119, 240, .45),
      inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}

.oc-label {
  display: flex;
  flex: none;
  align-items: center;
  gap: .5em;
  color: var(--oc-muted);
  font-size: 1em;
  line-height: 1;
}

.oc-label svg {
  width: 1.2em;
  height: 1.2em;
  margin-left: auto;
  color: #d7b6ff;
  opacity: 0;
  transform: translate(-.2em, .2em);
  transition: opacity 250ms ease, transform 250ms ease;
}

.orbit-card:hover .oc-label svg { opacity: 1; transform: none; }

.oc-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  gap: .55em;
}

.oc-body.is-swap { animation: oc-swap 520ms cubic-bezier(.16, 1, .3, 1); }

@keyframes oc-swap {
  from { opacity: .25; transform: translateY(.35em); }
}

.oc-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .8em;
}

.oc-foot {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
}

.oc-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .2em;
}

.oc-title,
.oc-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-title { font-size: 1.15em; font-weight: 500; letter-spacing: -.01em; }
.oc-sub { color: var(--oc-muted); font-size: 1em; }
.oc-green { color: var(--oc-success); }
.oc-red { color: var(--oc-danger); }

.oc-num {
  font-size: 2.1em;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.oc-cover {
  width: 3em;
  height: 3em;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: .5em;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .38), transparent 42%),
    radial-gradient(circle at 78% 82%, rgba(0, 0, 0, .35), transparent 55%),
    linear-gradient(135deg, var(--c1), var(--c2));
}

.oc-file {
  display: grid;
  width: 3em;
  height: 3em;
  flex: none;
  place-items: center;
  border: 1px solid #262626;
  border-radius: .5em;
  color: var(--oc-muted);
  background: #171717;
}

.oc-file svg { width: 1.6em; height: 1.6em; }

.oc-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .35em;
  height: 1.9em;
  padding: 0 .75em;
  border: 1px solid transparent;
  border-radius: 99em;
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.oc-badge svg { width: 1.1em; height: 1.1em; }
.oc-badge i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }

.oc-badge--success { border-color: color-mix(in oklab, var(--oc-success) 25%, transparent); color: var(--oc-success); background: color-mix(in oklab, var(--oc-success) 10%, transparent); }
.oc-badge--warning { border-color: color-mix(in oklab, var(--oc-warning) 25%, transparent); color: var(--oc-warning); background: color-mix(in oklab, var(--oc-warning) 10%, transparent); }
.oc-badge--info { border-color: color-mix(in oklab, var(--oc-info) 25%, transparent); color: var(--oc-info); background: color-mix(in oklab, var(--oc-info) 10%, transparent); }
.oc-badge--strong { color: #171717; background: #fafafa; }

.oc-bar {
  display: flex;
  height: .5em;
  flex: none;
  overflow: hidden;
  border-radius: 99em;
  background: var(--oc-muted-bg);
}

.oc-bar i {
  display: block;
  height: 100%;
  background: #fafafa;
  transition: width 900ms cubic-bezier(.16, 1, .3, 1);
}

.oc-bar i + i,
.oc-bar i.is-green { background: var(--oc-success); }

.oc-tag {
  display: inline-flex;
  height: 1.7em;
  flex: none;
  align-items: center;
  padding: 0 .6em;
  border-radius: .45em;
  color: #0a0a0a;
  background: var(--oc-tag-green);
  font-size: .95em;
  font-weight: 600;
}

.oc-chip {
  display: inline-flex;
  height: 1.8em;
  align-items: center;
  gap: .3em;
  padding: 0 .55em;
  border-radius: .45em;
  font-size: 1em;
  white-space: nowrap;
}

.oc-chip svg { width: 1.05em; height: 1.05em; }
.oc-chip--today { color: var(--oc-warning); background: color-mix(in oklab, var(--oc-warning) 15%, transparent); }
.oc-chip--done { color: var(--oc-success); background: color-mix(in oklab, var(--oc-success) 15%, transparent); }

.oc-task-title { transition: color 300ms ease; }
.oc-task-title.is-done { color: var(--oc-muted); text-decoration: line-through; }

.oc-avatars { display: flex; flex: none; }

.oc-av {
  display: grid;
  width: 2.1em;
  height: 2.1em;
  place-items: center;
  border-radius: 50%;
  color: #0a0a0a;
  background: var(--av);
  box-shadow: 0 0 0 .18em #0a0a0a;
  font-size: .85em;
  font-weight: 600;
}

.oc-av + .oc-av { margin-left: -.55em; }

.oc-steps { display: flex; gap: .35em; }

.oc-steps i {
  height: .4em;
  flex: 1;
  border-radius: 99em;
  background: var(--oc-muted-bg);
  transition: background-color 500ms ease;
}

.oc-steps i.is-on { background: #fafafa; }
.oc-steps.is-done i { background: var(--oc-success); }

.oc-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25em;
  text-align: center;
}

.oc-week span {
  position: relative;
  padding: .35em 0 .55em;
  border-radius: .4em;
  color: var(--oc-muted);
  font-size: .95em;
  font-variant-numeric: tabular-nums;
}

.oc-week span.is-dot::after {
  position: absolute;
  bottom: .15em;
  left: 50%;
  width: .35em;
  height: .35em;
  border-radius: 50%;
  content: "";
  background: #d7b6ff;
  transform: translateX(-50%);
}

.oc-week span.is-on { color: #171717; background: #fafafa; font-weight: 600; }
.oc-week span.is-on::after { background: #171717; }

.oc-spark { display: block; width: 100%; height: 2.4em; overflow: visible; }
.oc-spark path { fill: none; stroke: var(--oc-success); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.oc-spark path.oc-spark__area { fill: color-mix(in oklab, var(--oc-success) 14%, transparent); stroke: none; }

.oc-legend { display: flex; justify-content: space-between; color: var(--oc-muted); font-size: .95em; }
.oc-legend b { color: #fafafa; font-weight: 500; }

.oc-checks { display: flex; flex-direction: column; gap: .35em; }

.oc-check {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: 1.05em;
  transition: color 300ms ease;
}

.oc-check i {
  display: grid;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  place-items: center;
  border: 1px solid #404040;
  border-radius: .3em;
  color: #171717;
  transition: background-color 300ms ease, border-color 300ms ease;
}

.oc-check i svg { width: .9em; height: .9em; opacity: 0; }
.oc-check.is-on { color: var(--oc-muted); }
.oc-check.is-on i { border-color: #fafafa; background: #fafafa; }
.oc-check.is-on i svg { opacity: 1; }

.oc-count {
  color: var(--oc-muted);
  font-size: 1em;
  font-variant-numeric: tabular-nums;
}