/* Parallel ↔ mar-ui bridge (mar-ui 1.0, vendored in vendor/mar-ui).
   Parallel's own variables now read the shared --ds-* tokens: palette violet (or the
   user's blue / sage accent), tone cool, both themes. styles.css keeps its fallbacks
   for the boot screen; everything after the kit loads comes from here.
   Accent split: --ds-accent-text is the text-safe accent (light lilac on dark), so in
   the dark theme Parallel keeps its light-lilac fills with dark labels (its filled tab
   pill and primary buttons); the light theme fills with --ds-accent and white labels. */
:root {
  --bg: var(--ds-bg);
  --surface: var(--ds-surface-1);
  --surface-2: var(--ds-surface-2);
  --hover: var(--ds-surface-3);
  --border: var(--ds-border);
  --text: var(--ds-text);
  --muted: var(--ds-text-muted);
  --faint: var(--ds-text-disabled);
  --accent: var(--ds-accent);
  --accent-dim: var(--ds-accent-soft);
  --on-accent: var(--ds-on-accent);
  --green: var(--ds-success);
  --green-dim: color-mix(in srgb, var(--ds-success) 14%, var(--ds-surface-1));
  --red: var(--ds-danger);
  --red-dim: color-mix(in srgb, var(--ds-danger) 14%, var(--ds-surface-1));
  --orange: var(--ds-warning);
  --radius: var(--ds-radius-xl);
  --ds-font: inherit;
  --ds-shadow-float: 0 18px 44px -12px #0008;
}
:root[data-theme='light'] {
  --ds-shadow-float: 0 18px 44px -14px #2c234040;
}
/* Parallel's own character inside the violet family: the calm dusty lavender it always
   had (1.3.0), not the saturated violet Velvet uses. Product override, the kit is untouched.
   Contrast: dark #b0a6f5 on the cool background 9.7:1, dark label #171421 on it 8.7:1;
   light #6a57b0 text on white 5.6:1, white on #7562bc 4.9:1. */
:root[data-palette='violet'] {
  --ds-accent: #b0a6f5;
  --ds-accent-hover: #c0b8f8;
  --ds-accent-pressed: #9e93ea;
  --ds-accent-text: #b0a6f5;
  --ds-accent-soft: #262338;
  --ds-on-accent: #171421;
  --ds-focus: #c0b8f8;
  --ds-accent-ui: #b0a6f5;
  --ds-on-accent-ui: #171421;
}
:root[data-palette='violet'][data-theme='light'] {
  --ds-accent: #7562bc;
  --ds-accent-hover: #6a57b0;
  --ds-accent-pressed: #5f4da3;
  --ds-accent-text: #6a57b0;
  --ds-accent-soft: #f0ecfa;
  --ds-on-accent: #ffffff;
  --ds-focus: #7562bc;
  --ds-accent-ui: #7562bc;
  --ds-on-accent-ui: #ffffff;
}

/* Toasts sit above the floating tab bar and the home indicator on phones. */
@media (max-width: 760px) {
  #app.app-ready ~ #toast,
  #toast {
    bottom: calc(96px + var(--safe-bottom));
  }
}

/* ---------- Day summary under the date ---------- */
.date-weekday .day-summary {
  color: var(--muted);
}

/* ---------- Lesson: live progress and countdown ---------- */
.lesson {
  position: relative;
}
.lesson-status.live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}
.lesson-status.live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 var(--red);
  animation: ds-pulse 2s cubic-bezier(0.2, 0, 0, 1) infinite;
}
.lesson .ds-lesson__bar {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  pointer-events: none;
}
.lesson .ds-lesson__bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
.lesson.live {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent-dim) 45%, var(--surface));
}

/* ---------- Breaks between lessons, sized by length ---------- */
.lesson-list > .ds-break {
  margin-block: -3px;
  padding-inline: 18px;
}
.lesson-list > .ds-break::before {
  left: 30px;
}
.lesson-list > .ds-break .ds-break__label {
  background: var(--bg);
  margin-left: 26px;
}
.lesson-list > .ds-break.ds-break--now > .ds-break__label {
  left: 66px;
}
.lesson-list > .ds-break .ds-agenda__pill {
  background: var(--red);
  color: #fff;
}

/* ---------- Task filters: one gliding highlight ---------- */
.filters {
  position: relative;
  isolation: isolate;
}
.filters > .ds-indicator {
  border-radius: 9px;
  background: var(--accent-dim);
}
.filters.has-indicator > .filter.active {
  background: transparent;
}
.filters > .filter {
  position: relative;
  z-index: 1;
  transition: color 0.22s cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Task rows inside swipe wrappers ---------- */
/* Rows stay transparent at rest (the panel's own surface shows); opaque only mid-swipe. */
.ds-swipe + .ds-swipe > .task-row::before {
  content: '';
  position: absolute;
  height: 1px;
  left: 22px;
  right: 22px;
  top: 0;
  background: color-mix(in srgb, var(--border) 45%, transparent);
}
.ds-swipe > .ds-swipe__bg {
  font-size: 13px;
}
.ds-swipe:is([data-dir], .is-dragging) > .ds-swipe__content {
  background: var(--surface);
}

/* ---------- Search hits ---------- */
.task-title .ds-hit {
  padding: 0 1px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--orange) 38%, transparent);
  color: inherit;
}

/* ---------- Long-press menu uses Parallel surfaces ---------- */
.ds-menu {
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}
.ds-menu__item .icon {
  width: 18px;
  height: 18px;
}
.ds-pressing {
  transform: scale(0.985);
  transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1);
}
.ds-lifted {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- Pull to refresh on the page scroller ---------- */
.ptr-indicator {
  position: absolute;
  left: 50%;
  top: 6px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  box-shadow: 0 8px 22px -8px #0007;
  opacity: 0;
  transform: translateY(calc(var(--pull, 0px) - 44px)) rotate(var(--turn, 0deg));
  pointer-events: none;
}
.ptr-indicator.is-visible {
  opacity: 1;
}
.ptr-indicator.is-armed,
.ptr-indicator.is-loading {
  color: var(--accent);
}
.ptr-indicator.is-loading .icon {
  animation: ds-spin 0.7s linear infinite;
}
.ptr-indicator:not(.is-dragging) {
  transition:
    transform 0.22s cubic-bezier(0.2, 0, 0, 1),
    opacity 0.22s;
}
@media (prefers-reduced-motion: reduce) {
  .lesson-status.live::before,
  .ptr-indicator.is-loading .icon {
    animation: none;
  }
}

/* =====================================================================
   Marmos "Depth" style (as on the test stand), layered on Parallel's layout.
   Dark: ambient accent light, layered surfaces with a top highlight, floating
   glass tab bar, lifted primary actions. Light: clean white surfaces and soft
   neutral shadows, no gradients.
   ===================================================================== */
:root:not([data-theme='light']) #app.app-ready .shell {
  background:
    radial-gradient(120% 55% at 50% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%)
      no-repeat,
    var(--bg);
}
:root:not([data-theme='light']) #app.app-ready .topbar {
  background: transparent;
}
:root:not([data-theme='light']) :is(.lesson, .panel, .weekstrip, .segmented) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 70%, var(--surface)),
    var(--surface)
  );
  border-color: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
    0 10px 30px -18px #000;
}
:root:not([data-theme='light']) .lesson.next {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 12%, var(--surface-2)),
    var(--surface)
  );
}
:root:not([data-theme='light']) .lesson.live {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 16%, var(--surface-2)),
    var(--surface)
  );
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent),
    0 14px 34px -16px var(--accent);
}
:root:not([data-theme='light']) :is(.btn.primary, .fab) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, white), var(--accent));
  box-shadow:
    inset 0 1px 0 #ffffff40,
    0 8px 22px -10px var(--accent);
}
:root[data-theme='light'] :is(.lesson, .panel, .weekstrip, .segmented) {
  border-color: transparent;
  box-shadow:
    0 1px 2px #1d14300d,
    0 8px 24px -12px #1d143026;
}
:root[data-theme='light'] .lesson.live {
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent),
    0 8px 24px -12px #1d143033;
}
:root[data-theme='light'] :is(.btn.primary, .fab) {
  box-shadow: 0 6px 16px -8px var(--accent);
}

/* One segment style app-wide (День/Неделя, search tabs): a neutral raised thumb as in
   iOS. The accent stays for the main action and the tab-bar pill only. */
.segment-highlight {
  background: var(--ds-elevated);
  box-shadow:
    0 1px 2px #0000002e,
    inset 0 0 0 1px var(--ds-border);
}
:root[data-theme='light'] .segment-highlight {
  box-shadow: 0 1px 3px #1d143024;
}
.segmented button.active {
  color: var(--ds-text);
}
.catalog-tabs .active {
  background: var(--ds-elevated);
  color: var(--ds-text);
  box-shadow:
    0 1px 2px #0000002e,
    inset 0 0 0 1px var(--ds-border);
}
:root[data-theme='light'] .catalog-tabs .active {
  box-shadow: 0 1px 3px #1d143024;
}

/* Floating glass tab bar on phones; the selected tab sits in a filled pill. */
@media (max-width: 760px) {
  /* No opaque strip under the floating bar: the page scrolls behind the glass,
     the clearance lives inside the scroller instead of the shell. */
  #app.app-ready .shell {
    padding-bottom: 0;
  }
  #app.app-ready .page-scroll {
    padding-bottom: calc(92px + var(--safe-bottom));
    scroll-padding-bottom: calc(92px + var(--safe-bottom));
  }
  #app.app-ready .page-scroll .settings-footer {
    bottom: calc(80px + var(--safe-bottom));
  }
  #app.app-ready .bottomnav {
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--safe-bottom));
    min-height: 0;
    padding: 4px;
    gap: 8px;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 16px 40px -12px #000a;
  }
  :root[data-theme='light'] #app.app-ready .bottomnav {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 10px 30px -12px #1d143040;
  }
  .nav-highlight {
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc((100% - 8px - 16px) / 3);
    border-radius: 20px;
    background: var(--accent);
    box-shadow: none;
  }
  .bottomnav button.active {
    color: var(--on-accent);
  }
}

/* ======================================================================
   One schedule for every university (P-02, P-13). Built on --ds-* only.
   ====================================================================== */

/* ---------- University chip: shown next to the group, never as «· ГУУ» ---------- */
.uni-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 20px;
  padding: 0 var(--ds-space-2);
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-accent-soft);
  color: var(--ds-accent-text);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.02em;
  line-height: 1;
}
.group-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-width: 0;
}
/* The phone-only group line keeps its own visibility rules from styles.css. */
.mobile-group {
  gap: var(--ds-space-2);
  min-width: 0;
}
.group-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-group .group-chip__name {
  white-space: normal;
}
.source-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
.source-line > span:not(.uni-chip) {
  flex: 1 1 12ch;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- Study week (template providers): compact stepper + «Не знаю» ---------- */
.study-week {
  display: grid;
  gap: var(--ds-space-2);
  margin: var(--ds-space-3) 0 var(--ds-space-6);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  min-width: 0;
}
.study-week__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-space-2) var(--ds-space-3);
  min-width: 0;
}
.study-week__title {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: 13px;
  font-weight: 620;
}
.study-week__title .icon {
  width: 16px;
  height: 16px;
  color: var(--ds-text-muted);
}
.study-week__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  min-width: 0;
}
.week-stepper {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 2px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-2);
}
.week-stepper__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: calc(var(--ds-radius-md) - 2px);
  color: var(--ds-text-2);
}
.week-stepper__btn:hover:not(:disabled) {
  background: var(--ds-surface-3);
}
.week-stepper__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.week-stepper__btn .icon {
  width: 16px;
  height: 16px;
}
.week-stepper__value .control-trigger {
  min-height: 36px;
  width: 100px;
  padding: 0 var(--ds-space-1);
  justify-content: center;
  gap: var(--ds-space-1);
  background: transparent;
  border-radius: calc(var(--ds-radius-md) - 2px);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.week-stepper__value .control-trigger .icon {
  width: 14px;
  height: 14px;
}
.week-stepper__value .control-trigger.placeholder {
  color: var(--ds-text-muted);
}
.study-week__unknown {
  flex: none;
  min-height: 40px;
  padding-inline: var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-2);
}
.study-week__unknown[aria-pressed='true'] {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-text);
}
.study-week__status {
  color: var(--ds-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 360px) {
  .week-stepper__btn {
    width: 32px;
  }
}

/* ---------- Template lesson: same card, honest tags, expandable source cell ---------- */
.lesson-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  padding: 0 18px 12px;
}
.lesson-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 var(--ds-space-2);
  border-radius: var(--ds-radius-sm, 8px);
  background: var(--ds-accent-soft);
  color: var(--ds-accent-text);
  font-size: 11px;
  font-weight: 560;
}
.lesson-tag .icon {
  width: 13px;
  height: 13px;
}
.lesson-tag--muted {
  background: var(--ds-surface-2);
  color: var(--ds-text-2);
}
.lesson-tag--warn {
  background: color-mix(in srgb, var(--ds-warning) 16%, var(--ds-surface-1));
  color: var(--ds-text);
}
.source-cell {
  margin: 0 18px 14px;
  border-top: 1px solid var(--ds-border);
  padding-top: var(--ds-space-2);
}
.source-cell summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--ds-text-muted);
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}
.source-cell summary::-webkit-details-marker {
  display: none;
}
.source-cell summary .icon {
  width: 14px;
  height: 14px;
}
.source-cell[open] summary {
  color: var(--ds-text-2);
}
.source-cell__body {
  display: grid;
  gap: var(--ds-space-1);
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-2);
}
.source-cell__body p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.5;
}
.source-cell__body small {
  color: var(--ds-text-muted);
  font-size: 11px;
}
.week-lesson.template {
  border-style: dashed;
}

/* ---------- Search: one layout for every university ---------- */
.search-head h1 {
  margin: 0;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  min-width: 0;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-height: 40px;
  max-width: 100%;
  padding-left: var(--ds-space-3);
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-border);
  min-width: 0;
}
.filter-pill.is-set {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--ds-border));
}
.filter-pill__label {
  color: var(--ds-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.filter-pill .control-shell {
  min-width: 0;
}
.filter-pill .control-trigger {
  min-height: 38px;
  width: auto;
  max-width: 220px;
  padding: 0 var(--ds-space-3) 0 var(--ds-space-1);
  background: transparent;
  border-radius: var(--ds-radius-pill, 999px);
  font-weight: 560;
  gap: var(--ds-space-1);
}
.filter-pill .control-trigger .control-value {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-pill .control-trigger.placeholder {
  color: var(--ds-text);
}
.search-hint {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
/* The frame keeps one height for skeleton, empty, error and the first results. */
.search-results {
  display: grid;
  align-content: start;
  gap: var(--ds-space-3);
  min-height: 420px;
}
.search-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: 300px;
  padding: var(--ds-space-6) var(--ds-space-5);
  text-align: center;
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface-1);
  color: var(--ds-text-muted);
}
.search-state strong {
  color: var(--ds-text);
  font-size: 15px;
}
.search-state p {
  margin: 0;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.5;
}
.search-state .btn {
  margin-top: var(--ds-space-2);
}
.search-state--error .empty-icon {
  color: var(--ds-danger);
}
.result-skeleton {
  cursor: default;
  /* A result row with three meta lines at 375 px. */
  min-height: 110px;
}
.result-skeleton .grow {
  display: grid;
  gap: var(--ds-space-2);
}
.result-skeleton .ds-skeleton {
  display: block;
  height: 12px;
  border-radius: 6px;
}
.result-skeleton .sk-title {
  height: 16px;
  width: 62%;
}
.result-skeleton .sk-line {
  width: 44%;
}
.result-skeleton .sk-line.short {
  width: 30%;
}

/* ---------- University picker ---------- */
.university-list {
  display: grid;
  gap: var(--ds-space-2);
}
.university-pick {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  text-align: left;
}
.university-pick > .grow {
  display: grid;
  min-width: 0;
}
.university-pick .uni-chip {
  height: 28px;
  min-width: 52px;
  justify-content: center;
  font-size: 12px;
}
.university-pick > .icon {
  color: var(--ds-text-muted);
  flex: none;
}

/* ---------- Search field: a real surface, 44 px ---------- */
.catalog-searchbox input {
  min-height: 44px;
  padding: 10px 14px 10px 42px;
  font-size: 15px;
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
}
.catalog-searchbox input:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 1px;
}
.catalog-searchbox > .icon {
  top: 13px;
}

/* ---------- Filters: one scrollable row with edge fade, like the chip rows ---------- */
.filter-bar {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--ds-space-4) * -1);
  padding-inline: var(--ds-space-4);
  scroll-padding-inline: var(--ds-space-4);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--ds-space-4),
    #000 calc(100% - var(--ds-space-6)),
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--ds-space-4),
    #000 calc(100% - var(--ds-space-6)),
    transparent
  );
}
.filter-bar::-webkit-scrollbar {
  display: none;
}
.filter-pill {
  flex: none;
}

/* ---------- Error / empty action: secondary, readable ---------- */
.search-state__action {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-text);
  border-color: transparent;
}

/* ---------- Group line on phones: chip + name on one line ---------- */
.mobile-group {
  max-width: 100%;
  flex-wrap: nowrap;
}
.mobile-group .group-chip__name,
.page-head .source-line > span:not(.uni-chip) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-head .source-line {
  flex-wrap: nowrap;
}

/* ---------- «Сегодня»: a ghost button on the title line ---------- */
.page-head .today-btn {
  align-self: flex-start;
  margin-top: 4px;
  min-height: 36px;
  padding-inline: var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: transparent;
  color: var(--ds-accent-text);
}
.page-head .today-btn:hover {
  background: var(--ds-accent-soft);
}

/* ---------- Desktop: the floating «+» never covers the right column ---------- */
@media (min-width: 761px) {
  #app.app-ready:has(> .fab) .page-content {
    padding-right: 104px;
  }
}