/* ========================================
   Stack Theme (Layer 2) — Scoped to .stack-themed
   Ported from anki-templates/styling.css and
   addons/axolotl_theme_manager/colors.py

   All color values reference Open Props custom
   properties (--pink-*, --gray-*, etc.).
   ======================================== */

/* Rose preset defaults (light)
   surface-1 = page bg (lightest), surface-4 = hover (deeper)
   Matches the Rose preset in presets.js so no flash-of-wrong-theme. */
.stack-themed {
  --theme: var(--pink-7);
  --cloze: var(--yellow-3);
  --link: var(--indigo-7);
  --link-visited: var(--purple-7);
  --text-1: var(--gray-9);
  --text-2: var(--gray-7);
  --surface-1: var(--pink-0);
  --surface-2: var(--pink-1);
  --surface-3: var(--pink-2);
  --surface-4: var(--pink-3);
  --error: var(--red-7);
  --success: var(--green-7);
}

/* Dark mode defaults (Rose)
   surface-1 = deepest bg, surface-4 = hover (lighter) */
[data-mode="dark"] .stack-themed {
  --theme: var(--pink-3);
  --cloze: var(--yellow-3);
  --link: var(--indigo-3);
  --link-visited: var(--purple-3);
  --text-1: var(--gray-3);
  --text-2: var(--gray-5);
  --surface-1: var(--pink-12);
  --surface-2: var(--pink-11);
  --surface-3: var(--pink-10);
  --surface-4: var(--pink-9);
  --error: var(--red-5);
  --success: var(--green-5);
}

/* ========================================
   Study Stack Wrapper
   ======================================== */
.study-stack {
  position: relative;
  padding-top: var(--size-5);
}

.study-stack__mascot {
  position: absolute;
  top: calc(var(--size-px-3) * -1);
  left: var(--size-px-2);
  width: 80px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* ========================================
   Axolotually Expandable Card
   ======================================== */
.axolotually-card {
  background: transparent;
  border: none;
  overflow: visible;
}

.axolotually-card__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--size-2);
  width: 100%;
  padding: var(--size-3) var(--size-4) var(--size-3) 6rem;
  border: var(--border-size-2) solid var(--surface-3);
  border-radius: var(--radius-2);
  background: var(--surface-2);
  color: var(--text-1);
  font-family: var(--site-font);
  font-size: var(--font-size-fluid-0);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-3);
  transition:
    background 0.15s var(--ease-2),
    border-color 0.25s var(--ease-2),
    box-shadow 0.2s var(--ease-2);
}

@media (hover: hover) {
  .axolotually-card__header:hover {
    border-color: var(--theme);
  }
}

.axolotually-card__header:active {
  border-color: var(--theme);
}

.axolotually-card__header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
}

.axolotually-card__title {
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-fluid-1);
  color: var(--theme);
  transition: color 0.25s var(--ease-2);
}

.axolotually-card__subtitle {
  font-size: var(--font-size-fluid-0);
  color: var(--text-1);
  overflow: hidden;
  max-height: var(--subtitle-h, 6em);
  transition:
    opacity 0.1s var(--ease-2),
    max-height 0.1s var(--ease-2);
}

.anki-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
  fill: currentColor;
  margin-right: 0.1em;
}

.anki-trigger {
  color: var(--theme);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition:
    text-decoration-color 0.2s var(--ease-2),
    color 0.2s var(--ease-2);
}

@media (hover: hover) {
  .anki-trigger:hover {
    text-decoration-color: var(--theme);
  }
}

.anki-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + var(--size-2));
  z-index: 100;
  background: var(--surface-2);
  border: var(--border-size-1) solid var(--surface-3);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  padding: var(--size-2) var(--size-3);
  opacity: 0;
  transform: translateY(var(--size-px-1));
  transition:
    opacity 0.2s var(--ease-2),
    transform 0.2s var(--ease-2);
  pointer-events: none;
  white-space: nowrap;
}

.anki-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.anki-tooltip__close {
  position: absolute;
  top: var(--size-1);
  right: var(--size-1);
  background: none;
  border: none;
  color: var(--text-2);
  font-size: var(--font-size-1);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--size-1);
}

.anki-tooltip__label {
  display: block;
  font-size: var(--font-size-0);
  color: var(--text-2);
  margin-bottom: var(--size-1);
}

.anki-tooltip__link {
  font-size: var(--font-size-0);
  color: var(--theme);
  text-decoration: none;
}

@media (hover: hover) {
  .anki-tooltip__link:hover {
    text-decoration: underline;
  }
}

.axolotually-card__header--expanded {
  position: sticky;
  top: var(--sticky-top, 3.5rem);
  z-index: 51;
  box-shadow: var(--shadow-1);
}

.axolotually-card__header--stuck .axolotually-card__subtitle {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
}

.axolotually-card__header--stuck + .axolotually-card__content {
  padding-top: var(--header-shrink, 0px);
}

.axolotually-card__header--stuck .axolotually-card__title {
  color: var(--theme);
}

.axolotually-card__chevron {
  flex-shrink: 0;
  font-size: var(--font-size-fluid-2);
  color: var(--text-2);
  transition: transform 0.25s var(--ease-elastic-out-3), color 0.2s var(--ease-2);
  transform: rotate(90deg);
}

.axolotually-card__chevron--open {
  transform: rotate(-90deg);
}

.axolotually-card__content {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.2s var(--ease-4),
    padding-top 0.1s var(--ease-2);
}

.axolotually-card__tiles {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  padding: var(--size-3);
  position: relative;
}

/* ========================================
   Stack Connectors (SVG overlay)
   ======================================== */
.stack-connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* ========================================
   Study Tiles — Stepping-Stone Layout
   ======================================== */
.stack-themed .study-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: var(--border-size-1) solid var(--surface-3);
  border-radius: var(--radius-2);
  padding: var(--size-3);
  color: var(--text-1);
  font-size: var(--font-size-fluid-0);
  line-height: var(--font-lineheight-3);
  box-shadow: var(--shadow-2);
  opacity: 0;
  width: 70%;
  aspect-ratio: var(--ratio-golden);
  position: relative;
  z-index: 1;
}

.study-tile__number {
  position: absolute;
  top: var(--size-2);
  left: var(--size-2);
  font-size: var(--font-size-fluid-0);
  font-weight: var(--font-weight-7);
  font-variant-numeric: tabular-nums;
  color: var(--theme);
  opacity: 0.5;
  line-height: 1;
  pointer-events: none;
}

.stack-themed .study-tile:nth-of-type(odd) {
  align-self: flex-start;
}

.stack-themed .study-tile:nth-of-type(even) {
  align-self: flex-end;
}

/* ========================================
   Study Tile Group — feature tile + card preview
   ======================================== */
.stack-themed .study-tile-group {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  width: 85%;
  position: relative;
  z-index: 1;
  opacity: 0;
}

.stack-themed .study-tile-group:nth-of-type(odd) {
  align-self: flex-start;
}

.stack-themed .study-tile-group:nth-of-type(even) {
  align-self: flex-end;
}

.stack-themed .study-tile-group > .study-tile {
  width: 100%;
  opacity: 1;
  align-self: stretch;
  aspect-ratio: var(--ratio-golden);
}

/* Card preview inside a tile group */
.stack-themed .card-preview--tile {
  padding: 0;
  justify-content: stretch;
}

.stack-themed .card-preview--tile .card-preview__kard {
  max-width: none;
  width: 100%;
  box-shadow: var(--shadow-3);
  border-radius: var(--radius-2);
}

.stack-themed .study-tile__body {
  flex: 1;
  min-width: 0;
  padding-top: var(--size-3);
}

.study-tile__action {
  align-self: flex-start;
  background: none;
  border: none;
  outline: none;
  padding: 0.45em 0.85em;
  margin-top: auto;
  font-family: var(--site-font);
  font-size: var(--font-size-fluid-0);
  color: var(--theme);
  cursor: pointer;
  border-radius: var(--radius-2);
  transition:
    box-shadow 0.15s var(--ease-2),
    transform 0.1s var(--ease-2);
}

.study-tile__action:hover {
  box-shadow: var(--shadow-3);
}

.study-tile__action:active {
  box-shadow: var(--shadow-1);
  transform: scale(0.97);
}

.stack-themed .study-tile h3 {
  color: var(--theme);
  margin: 0 0 var(--size-1);
  font-size: var(--font-size-fluid-1);
}

.stack-themed .study-tile p {
  color: var(--text-1);
  font-size: var(--font-size-fluid-0);
  margin: 0 0 var(--size-2);
}

/* ========================================
   Quiz-style staggered tile animation
   ======================================== */
@keyframes chevronPop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes quizOptionAppear {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.tiles-visible .study-tile,
.tiles-visible .study-tile-group {
  animation: quizOptionAppear 0.35s var(--ease-elastic-out-1) forwards;
}

.tiles-visible .study-tile-group > .study-tile {
  animation: none;
  opacity: 1;
}

.tiles-visible > :nth-of-type(1) { animation-delay: 0.05s; }
.tiles-visible > :nth-of-type(2) { animation-delay: 0.12s; }
.tiles-visible > :nth-of-type(3) { animation-delay: 0.19s; }
.tiles-visible > :nth-of-type(4) { animation-delay: 0.26s; }
.tiles-visible > :nth-of-type(5) { animation-delay: 0.33s; }
.tiles-visible > :nth-of-type(6) { animation-delay: 0.40s; }

/* ========================================
   Anki .kard Showcase (faithful replica)
   ======================================== */
.stack-themed .kard {
  background-color: var(--surface-1);
  box-shadow: var(--shadow-4);
  padding: clamp(var(--size-3), 3vw, var(--size-7));
  border-radius: var(--radius-2);
  max-width: 55ch;
  margin: var(--size-3) 0;
}

.stack-themed .kard .title {
  font-size: var(--font-size-fluid-2);
  font-weight: var(--font-weight-7);
  color: var(--theme);
  margin-bottom: var(--size-2);
}

.stack-themed .kard .text {
  font-size: var(--font-size-fluid-0);
  font-weight: var(--font-weight-5);
  color: var(--text-1);
  line-height: var(--font-lineheight-3);
}

.stack-themed .kard .cloze {
  border-radius: var(--radius-1);
  color: var(--gray-9);
  font-weight: var(--font-weight-7);
  background: var(--cloze);
  padding: 0 0.35em;
}

/* ========================================
   Theme Sampler
   ======================================== */
.theme-sampler {
  font-size: var(--font-size-fluid-0);
  color: var(--text-1);
}

.theme-sampler--mini {
  padding: var(--size-1) 0;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.theme-sampler__row {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-2) 0;
  flex-wrap: wrap;
}

.theme-sampler__label {
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-fluid-0);
  color: var(--text-1);
  white-space: nowrap;
}

.theme-sampler__presets {
  display: flex;
  gap: var(--size-1);
  flex-wrap: wrap;
}

.theme-sampler__dot {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-round);
  border: var(--border-size-2) solid transparent;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-2), transform 0.1s var(--ease-2);
  padding: 0;
}

.theme-sampler__dot:hover {
  transform: scale(1.15);
}

.theme-sampler__dot--active {
  border-color: var(--text-1);
}

.theme-sampler__customize {
  margin-left: auto;
  background: none;
  border: var(--border-size-1) solid var(--surface-3);
  border-radius: var(--radius-2);
  padding: 0.2em 0.6em;
  font-family: var(--site-font);
  font-size: var(--font-size-fluid-0);
  color: var(--theme);
  cursor: pointer;
}

.theme-sampler__customize:hover {
  border-color: var(--theme);
}

/* Expanded picker area */
.theme-sampler__picker {
  padding: var(--size-2) 0;
}

.theme-sampler__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--size-1);
}

.theme-sampler__tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-2);
  padding: var(--size-1) var(--size-2);
  border: var(--border-size-1) solid var(--surface-3);
  border-radius: var(--radius-2);
  background: var(--surface-1);
  cursor: pointer;
  font-family: var(--site-font);
  font-size: var(--font-size-fluid-0);
  color: var(--text-1);
  transition: border-color 0.15s var(--ease-2);
}

.theme-sampler__tile:hover {
  border-color: var(--theme);
}

.theme-sampler__tile--active {
  border-color: var(--theme);
  box-shadow: 0 0 0 var(--border-size-1) var(--theme);
}

.theme-sampler__tile-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-sampler__tile-swatches {
  display: flex;
  gap: var(--size-1);
  flex-shrink: 0;
}

.theme-sampler__swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-round);
  border: var(--border-size-1) solid color-mix(in srgb, var(--text-1) 20%, transparent);
}

/* Token buttons */
.theme-sampler__tokens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1);
  margin-top: var(--size-2);
}

.theme-sampler__token {
  display: flex;
  align-items: center;
  gap: var(--size-px-1);
  padding: 0.2em 0.5em;
  border: var(--border-size-1) solid var(--surface-3);
  border-radius: var(--radius-1);
  background: none;
  cursor: pointer;
  font-family: var(--site-font);
  font-size: var(--font-size-fluid-0);
  color: var(--text-1);
  transition: border-color 0.15s var(--ease-2);
}

.theme-sampler__token:hover {
  border-color: var(--theme);
}

.theme-sampler__token--active {
  border-color: var(--theme);
  color: var(--text-1);
}

.theme-sampler__token-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  border: var(--border-size-1) solid color-mix(in srgb, var(--text-1) 15%, transparent);
  flex-shrink: 0;
}

/* Open Props palette grid */
.theme-sampler__palette {
  margin-top: var(--size-2);
  max-height: 240px;
  overflow-y: auto;
  border: var(--border-size-1) solid var(--surface-3);
  border-radius: var(--radius-2);
  padding: var(--size-2);
}

.theme-sampler__family {
  display: flex;
  align-items: center;
  gap: var(--size-1);
  margin-bottom: var(--size-1);
}

.theme-sampler__family-label {
  font-size: var(--font-size-fluid-0);
  color: var(--text-2);
  width: 5ch;
  flex-shrink: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-sampler__shades {
  display: flex;
  gap: var(--size-1);
}

.theme-sampler__shade {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  border: var(--border-size-1) solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s var(--ease-2);
}

.theme-sampler__shade:hover {
  transform: scale(1.3);
}

.theme-sampler__shade--active {
  border-color: var(--text-1);
  box-shadow: 0 0 0 var(--border-size-1) var(--surface-1);
}

/* ========================================
   Mini Theme Tile (detail pages)
   ======================================== */
.mini-theme-tile {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  background: none;
  border: none;
  border-radius: var(--radius-2);
  padding: var(--size-1) var(--size-3);
  margin-bottom: var(--size-3);
}

.mini-theme-tile__body {
  flex: 1;
  min-width: 0;
}

.mini-theme-tile__title {
  display: none;
}

.mini-theme-tile__row {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  flex-wrap: nowrap;
}

/* ========================================
   Theme Manager Card (full, theme-manager page)
   ======================================== */
.theme-manager-card {
  background: transparent;
  border: var(--border-size-1) solid var(--surface-3);
  border-radius: var(--radius-2);
  padding: var(--size-3) var(--size-4);
  margin-bottom: var(--size-5);
}

.theme-manager-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--size-2);
}

.theme-manager-card__title {
  font-weight: var(--font-weight-7);
  font-size: var(--font-size-fluid-0);
  color: var(--theme);
}

/* ========================================
   Card Preview (Anki card mock)
   ======================================== */
.card-preview {
  display: flex;
  justify-content: center;
  padding: var(--size-5) var(--size-4);
}

.card-preview__kard {
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: var(--surface-1);
  box-shadow: var(--shadow-3);
  padding: clamp(var(--size-3), 3vw, var(--size-7));
  border-radius: var(--radius-2);
}

.card-preview__title {
  font-size: clamp(var(--font-size-2), 4vw, var(--font-size-6));
  font-weight: var(--font-weight-7);
  line-height: var(--font-lineheight-3);
  color: var(--theme);
  background-color: var(--surface-1);
  border-radius: var(--radius-2);
  padding: var(--size-1) clamp(var(--size-2), 2vw, var(--size-3));
  box-shadow: var(--shadow-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--size-px-2);
  min-height: 38px;
}

.card-preview__title-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.card-preview__paren {
  color: var(--text-1);
}

.card-preview__text {
  margin-top: 0;
  max-inline-size: var(--size-content-3);
  text-align: left;
  font-size: var(--font-size-fluid-0);
  font-weight: var(--font-weight-5);
  line-height: var(--font-lineheight-3);
  color: var(--text-1);
}

.card-preview__text b {
  font-weight: var(--font-weight-7);
  color: var(--theme);
}

.card-preview__bullet {
  color: var(--text-2);
}

.card-preview__text b.card-preview__bullet-label {
  color: var(--text-2);
}

.card-preview__cloze {
  border-radius: var(--radius-1);
  color: var(--gray-9);
  font-weight: var(--font-weight-7);
  background: var(--cloze);
  padding: 0 0.35em;
  transition: opacity 0.2s var(--ease-2);
}

.card-preview__cloze--fading {
  opacity: 0;
}

.card-preview__cloze--hidden {
  background: var(--cloze);
}

.card-preview__cloze--inactive {
  background: none;
  color: inherit;
  font-weight: inherit;
  padding: 0;
}

.card-preview__indicator {
  position: absolute;
  bottom: var(--size-2);
  right: var(--size-2);
  display: flex;
  align-items: center;
  gap: var(--size-1);
  color: var(--text-2);
  font-size: var(--font-size-0);
  user-select: none;
}

.card-preview__cloze-num {
  font-weight: var(--font-weight-6);
  font-variant-numeric: tabular-nums;
}

.card-preview__status-icon {
  position: relative;
  width: 14px;
  height: 14px;
}

.card-preview__timer-ring,
.card-preview__pause-icon {
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
}

.card-preview__pause-icon {
  fill: var(--text-2);
  visibility: hidden;
}

.card-preview__status-icon--paused .card-preview__timer-ring {
  visibility: hidden;
}

.card-preview__status-icon--paused .card-preview__pause-icon {
  visibility: visible;
}

.card-preview__timer-track {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 2;
}

.card-preview__timer-fill {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 37.7;
  stroke-dashoffset: 37.7;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: clozeTimer 2s linear forwards;
}

@keyframes clozeTimer {
  to { stroke-dashoffset: 0; }
}

/* ========================================
   Stack Shell (single-column layout)
   ======================================== */
.stack-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: var(--size-3);
}

/* ========================================
   Stack Tabs
   ======================================== */
.stack-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
  margin-bottom: var(--size-3);
}

.stack-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1);
  padding: var(--size-1) var(--size-2);
  border-radius: var(--radius-2);
  border: var(--border-size-1) solid var(--surface-3);
  background: var(--surface-2);
  font-family: var(--site-font);
  font-size: var(--font-size-fluid-0);
  font-weight: var(--font-weight-5);
  color: var(--text-1);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition:
    background-color 0.15s var(--ease-2),
    color 0.15s var(--ease-2),
    border-color 0.15s var(--ease-2),
    box-shadow 0.15s var(--ease-2),
    transform 0.1s var(--ease-2);
}

@media (hover: hover) {
  .stack-tab:hover {
    border-color: var(--theme);
  }
}

.stack-tab:active {
  transform: scale(0.97);
}

.stack-tab--active {
  color: var(--surface-3);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.stack-content {
  background: var(--surface-2);
  border-radius: var(--radius-2);
  padding: var(--size-4);
  min-height: 20rem;
}

.stack-card {
  background: var(--surface-2);
  border-radius: var(--radius-2);
  padding: var(--size-4);
  position: relative;
  z-index: 1;
}

.stack-page-header {
  display: flex;
  align-items: center;
  gap: var(--size-3);
  margin-bottom: var(--size-3);
}

.stack-page-header__mascot {
  flex-shrink: 0;
}

.stack-page-header__title {
  font-size: var(--font-size-fluid-2);
  color: var(--theme);
  margin: 0;
}

.stack-page-content {
  line-height: var(--font-lineheight-3);
  color: var(--text-1);
}

.stack-page-content h2 {
  color: var(--theme);
  margin-top: var(--size-7);
  margin-bottom: var(--size-2);
  font-size: var(--font-size-fluid-1);
}

.stack-page-content h3 {
  color: var(--text-1);
  margin-top: var(--size-4);
  margin-bottom: var(--size-1);
  font-size: var(--font-size-fluid-0);
}

.stack-page-content p {
  color: var(--text-1);
  font-size: var(--font-size-fluid-0);
  margin-bottom: var(--size-2);
}

.stack-page-content ul,
.stack-page-content ol {
  padding-left: 1.25em;
  margin-bottom: var(--size-3);
}

.stack-page-content li {
  font-size: var(--font-size-fluid-0);
  color: var(--text-1);
  margin-bottom: var(--size-1);
}

/* ========================================
   Card Diagram (template page annotation)
   ======================================== */
.card-diagram {
  position: relative;
  padding: var(--size-5) 0;
}

.card-diagram .card-preview {
  padding: var(--size-5) 0;
}

.card-diagram .card-preview__kard {
  max-width: min(55%, 500px);
}

.card-diagram__connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* Tooltip-style overlay notes — positioned by JS */
.card-diagram__note {
  position: absolute;
  max-width: 22%;
  background: var(--surface-2);
  border: var(--border-size-1) solid var(--surface-3);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  padding: var(--size-2) var(--size-3);
  opacity: 0;
  transform: translateY(var(--size-px-1));
  transition:
    opacity 0.2s var(--ease-2),
    transform 0.2s var(--ease-2);
  z-index: 2;
  pointer-events: none;
}

.card-diagram__note--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.card-diagram__label {
  display: block;
  color: var(--theme);
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-7);
  margin-bottom: var(--size-1);
}

.card-diagram__note p {
  color: var(--text-2);
  font-size: var(--font-size-0);
  margin: 0;
  line-height: var(--font-lineheight-3);
}

@media (max-width: 768px) {
  .card-diagram {
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
  }

  .card-diagram .card-preview {
    order: 5;
    margin: var(--size-3) 0;
  }

  .card-diagram .card-preview__kard {
    max-width: none;
  }

  .card-diagram__note {
    position: static;
    max-width: 65%;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}