/* =========================================
   LeetKode — site-specific styles
   Loaded via layouts/partials/docs/inject/head.html
   ========================================= */

:root {
  --diff-easy-fg:   #00876a;
  --diff-easy-bg:   rgba(0, 184, 163, 0.12);
  --diff-medium-fg: #b88200;
  --diff-medium-bg: rgba(255, 192, 30, 0.16);
  --diff-hard-fg:   #d12553;
  --diff-hard-bg:   rgba(255, 55, 95, 0.12);
}

html[data-theme="dark"] {
  --diff-easy-fg:   #4dd4b8;
  --diff-easy-bg:   rgba(0, 184, 163, 0.18);
  --diff-medium-fg: #ffd460;
  --diff-medium-bg: rgba(255, 192, 30, 0.18);
  --diff-hard-fg:   #ff6b8a;
  --diff-hard-bg:   rgba(255, 55, 95, 0.20);
}

/* =========================================
   leetcode_info — problem header card
   ========================================= */
.leetcode-info {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--lc-accent, var(--color-link));
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
  box-shadow: var(--card-shadow);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.leetcode-info[data-difficulty="easy"]   { --lc-accent: var(--diff-easy-fg); }
.leetcode-info[data-difficulty="medium"] { --lc-accent: var(--diff-medium-fg); }
.leetcode-info[data-difficulty="hard"]   { --lc-accent: var(--diff-hard-fg); }

.leetcode-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.leetcode-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--meta-color);
  background: var(--gray-200);
  padding: 2px 8px;
  border-radius: 4px;
}

.leetcode-title {
  margin: 0 !important;
  font-size: 1.25rem;
  font-weight: 600;
  flex-grow: 1;
  line-height: 1.3;
}

.leetcode-title a {
  color: var(--body-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.leetcode-title a:hover {
  color: var(--color-link);
  text-decoration: none;
}

.leetcode-title a::after {
  content: "↗";
  font-size: 0.85em;
  color: var(--meta-color);
  transition: transform 0.15s ease;
}

.leetcode-title a:hover::after {
  transform: translate(2px, -2px);
  color: var(--color-link);
}

.leetcode-badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.leetcode-badge[data-difficulty="easy"] {
  color: var(--diff-easy-fg);
  background: var(--diff-easy-bg);
}
.leetcode-badge[data-difficulty="medium"] {
  color: var(--diff-medium-fg);
  background: var(--diff-medium-bg);
}
.leetcode-badge[data-difficulty="hard"] {
  color: var(--diff-hard-fg);
  background: var(--diff-hard-bg);
}

.leetcode-info details {
  margin-top: 0.5rem;
}

.leetcode-info details > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--meta-color);
  font-weight: 500;
  padding: 0.25rem 0;
  user-select: none;
}

.leetcode-info details > summary:hover {
  color: var(--color-link);
}

.leetcode-content {
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px dashed var(--gray-300);
  color: var(--body-text);
  line-height: 1.6;
}

.leetcode-content > :first-child { margin-top: 0; }
.leetcode-content > :last-child  { margin-bottom: 0; }

/* =========================================
   Approach details blocks ({{% details %}})
   ========================================= */
.markdown details {
  margin: 1rem 0;
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--color-link);
  border-radius: 6px;
  background: var(--gray-100);
  padding: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.markdown details[open] {
  box-shadow: var(--card-shadow);
}

.markdown details > summary {
  cursor: pointer;
  padding: 0.6rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--body-text);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.markdown details > summary::-webkit-details-marker { display: none; }

.markdown details > summary::before {
  content: "▸";
  font-size: 0.8em;
  color: var(--color-link);
  transition: transform 0.2s ease;
  display: inline-block;
}

.markdown details[open] > summary::before {
  transform: rotate(90deg);
}

.markdown details > summary:hover {
  color: var(--color-link);
}

.markdown details > .markdown-inner {
  padding: 0 1rem 0.75rem;
  border-top: 1px dashed var(--gray-300);
  padding-top: 0.75rem;
}

.markdown details > .markdown-inner > :first-child { margin-top: 0.5rem; }
.markdown details > .markdown-inner > :last-child  { margin-bottom: 0; }

/* =========================================
   Category landing — problem grid
   ========================================= */
.lc-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.6rem;
  margin: 1.5rem 0;
}

.lc-problem-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--lc-accent, var(--gray-300));
  border-radius: 6px;
  text-decoration: none !important;
  color: var(--body-text) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.lc-problem-card[data-difficulty="easy"]   { --lc-accent: var(--diff-easy-fg); }
.lc-problem-card[data-difficulty="medium"] { --lc-accent: var(--diff-medium-fg); }
.lc-problem-card[data-difficulty="hard"]   { --lc-accent: var(--diff-hard-fg); }

.lc-problem-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-shadow);
  text-decoration: none !important;
}

.lc-problem-card .lc-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--meta-color);
  background: var(--gray-200);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.lc-problem-card .lc-name {
  flex-grow: 1;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lc-problem-card .lc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lc-accent);
  flex-shrink: 0;
}