@property --portfolio-download-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes portfolio-download-spin {
  to {
    --portfolio-download-angle: 360deg;
  }
}

/* Compact file tile. Each public theme supplies its own light palette. */
[data-public-theme] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #f8fafc;
  --portfolio-download-hover-bg: #f1f5f9;
  --portfolio-download-c1: #64748b;
  --portfolio-download-c2: #94a3b8;
  --portfolio-download-text: #172033;
  --portfolio-download-border: rgba(100, 116, 139, 0.24);
  --portfolio-download-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  --portfolio-download-radius: 10px;

  position: relative;
  isolation: isolate;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  inline-size: auto;
  min-inline-size: 118px;
  max-inline-size: 100%;
  min-block-size: 50px;
  padding: 4px 12px 4px 7px;
  overflow: visible;
  border: 0;
  border-radius: var(--portfolio-download-radius);
  background: transparent;
  color: var(--portfolio-download-text);
  box-shadow: var(--portfolio-download-shadow);
  box-sizing: border-box;
  text-decoration: none;
  transform: translateY(0);
  transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

[data-public-theme] .method-card__files .portfolio-file-link::before,
[data-public-theme] .method-card__files .portfolio-file-link::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

[data-public-theme] .method-card__files .portfolio-file-link::before {
  z-index: -1;
  inset: 0;
  border: 1px solid var(--portfolio-download-border);
  border-radius: inherit;
  background: var(--portfolio-download-bg);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-public-theme] .method-card__files .portfolio-file-link::after {
  z-index: -2;
  inset: -1px;
  border-radius: calc(var(--portfolio-download-radius) + 1px);
  background: conic-gradient(
    from var(--portfolio-download-angle),
    var(--portfolio-download-c1),
    var(--portfolio-download-c2),
    var(--portfolio-download-c1)
  );
  opacity: 0;
  filter: blur(2px);
  animation: portfolio-download-spin 2.8s linear infinite paused;
  transition: opacity 0.2s ease;
}

[data-public-theme] .method-card__files .portfolio-file-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 42px;
}

[data-public-theme] .method-card__files .portfolio-file-link small {
  color: var(--portfolio-download-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

[data-public-theme] .method-card__files .portfolio-file-link:focus-visible {
  outline: 3px solid var(--portfolio-download-c1);
  outline-offset: 3px;
}

[data-public-theme] .method-card__files .portfolio-file-link:focus-visible::before {
  border-color: var(--portfolio-download-c1);
  background: var(--portfolio-download-hover-bg);
}

[data-public-theme] .method-card__files .portfolio-file-link:focus-visible::after {
  opacity: 0.48;
  animation-play-state: running;
}

@media (hover: hover) and (pointer: fine) {
  [data-public-theme] .method-card__files .portfolio-file-link:hover {
    color: var(--portfolio-download-text);
    transform: translateY(-2px);
  }

  [data-public-theme] .method-card__files .portfolio-file-link:hover::before {
    border-color: var(--portfolio-download-c1);
    background: var(--portfolio-download-hover-bg);
  }

  [data-public-theme] .method-card__files .portfolio-file-link:hover::after {
    opacity: 0.42;
    animation-play-state: running;
  }
}

/* Classic - warm terracotta. */
[data-public-theme="classic"] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #faf2ee;
  --portfolio-download-hover-bg: #f3e2da;
  --portfolio-download-c1: #b85c38;
  --portfolio-download-c2: #c9942a;
  --portfolio-download-text: #2a211b;
  --portfolio-download-border: rgba(184, 92, 56, 0.24);
  --portfolio-download-shadow: 0 4px 12px rgba(31, 24, 19, 0.08);
  --portfolio-download-radius: 10px;
}

/* DocuArt - clear teal. */
[data-public-theme="docuart"] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #e6f0f2;
  --portfolio-download-hover-bg: #d9eaed;
  --portfolio-download-c1: #2f7c83;
  --portfolio-download-c2: #4e91a3;
  --portfolio-download-text: #20343d;
  --portfolio-download-border: rgba(47, 124, 131, 0.26);
  --portfolio-download-shadow: 0 6px 18px rgba(33, 68, 74, 0.1);
  --portfolio-download-radius: 6px;
}

/* Mentor - calm green teal. */
[data-public-theme="mentor"] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #e6f4f1;
  --portfolio-download-hover-bg: #d7ebe7;
  --portfolio-download-c1: #176b68;
  --portfolio-download-c2: #d6a34a;
  --portfolio-download-text: #172033;
  --portfolio-download-border: #cce7e2;
  --portfolio-download-shadow: 0 5px 16px rgba(23, 32, 51, 0.08);
  --portfolio-download-radius: 12px;
}

/* Modern - restrained navy and gold. */
[data-public-theme="modern"] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #f4f6f9;
  --portfolio-download-hover-bg: #e9eef3;
  --portfolio-download-c1: #36516e;
  --portfolio-download-c2: #c9a224;
  --portfolio-download-text: #132437;
  --portfolio-download-border: rgba(54, 81, 110, 0.2);
  --portfolio-download-shadow: 0 4px 14px rgba(54, 81, 110, 0.1);
  --portfolio-download-radius: 12px;
}

/* Node - soft coral and sky. */
[data-public-theme="node"] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #fff5f3;
  --portfolio-download-hover-bg: #ffe8e2;
  --portfolio-download-c1: #ff8a71;
  --portfolio-download-c2: #5ec2d9;
  --portfolio-download-text: #2b2d42;
  --portfolio-download-border: #ffe0d8;
  --portfolio-download-shadow: 0 4px 12px rgba(43, 45, 66, 0.12);
  --portfolio-download-radius: 12px;
}

/* Prima - light berry. */
[data-public-theme="prima"] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #fdf2f8;
  --portfolio-download-hover-bg: #fce7f3;
  --portfolio-download-c1: #ec4899;
  --portfolio-download-c2: #d946ef;
  --portfolio-download-text: #2a211b;
  --portfolio-download-border: rgba(236, 72, 153, 0.24);
  --portfolio-download-shadow: 0 4px 14px rgba(236, 72, 153, 0.13);
  --portfolio-download-radius: 12px;
}

/* Prime - warm amber. */
[data-public-theme="prime"] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #fffaf3;
  --portfolio-download-hover-bg: #ffedd5;
  --portfolio-download-c1: #d97706;
  --portfolio-download-c2: #b45309;
  --portfolio-download-text: #1f1f1f;
  --portfolio-download-border: rgba(217, 119, 6, 0.25);
  --portfolio-download-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
  --portfolio-download-radius: 6px;
}

/* Spark - coral with a compact hard shadow. */
[data-public-theme="spark"] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #fff1ed;
  --portfolio-download-hover-bg: #ffe1da;
  --portfolio-download-c1: #ff755d;
  --portfolio-download-c2: #5ec2d9;
  --portfolio-download-text: #27344b;
  --portfolio-download-border: rgba(39, 52, 75, 0.28);
  --portfolio-download-shadow: 3px 3px 0 rgba(39, 52, 75, 0.14);
  --portfolio-download-radius: 12px;
}

/* Teacher - clear blue. */
[data-public-theme="teacher"] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #eff6ff;
  --portfolio-download-hover-bg: #dbeafe;
  --portfolio-download-c1: #3b82f6;
  --portfolio-download-c2: #ec4899;
  --portfolio-download-text: #1a1a2e;
  --portfolio-download-border: #dbeafe;
  --portfolio-download-shadow: 0 5px 16px rgba(59, 130, 246, 0.1);
  --portfolio-download-radius: 12px;
}

/* Vibe - soft gold. */
[data-public-theme="vibe"] .method-card__files .portfolio-file-link {
  --portfolio-download-bg: #fdf7ea;
  --portfolio-download-hover-bg: #f8edd3;
  --portfolio-download-c1: #e2a843;
  --portfolio-download-c2: #c0701d;
  --portfolio-download-text: #171717;
  --portfolio-download-border: rgba(226, 168, 67, 0.3);
  --portfolio-download-shadow: 0 4px 14px rgba(226, 168, 67, 0.14);
  --portfolio-download-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  [data-public-theme] .method-card__files .portfolio-file-link,
  [data-public-theme] .method-card__files .portfolio-file-link::before,
  [data-public-theme] .method-card__files .portfolio-file-link::after {
    animation: none;
    transition: none;
  }

  [data-public-theme] .method-card__files .portfolio-file-link:hover,
  [data-public-theme] .method-card__files .portfolio-file-link:focus-visible {
    transform: none;
  }
}

@media (forced-colors: active) {
  [data-public-theme] .method-card__files .portfolio-file-link {
    border: 2px solid LinkText;
    background: Canvas;
    color: LinkText;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  [data-public-theme] .method-card__files .portfolio-file-link::before,
  [data-public-theme] .method-card__files .portfolio-file-link::after {
    display: none;
  }

  [data-public-theme] .method-card__files .portfolio-file-link small {
    color: LinkText;
  }

  [data-public-theme] .method-card__files .portfolio-file-link:focus-visible {
    outline: 3px solid Highlight;
  }
}