/* Страница /leetcode/ — решения задач LeetCode на flang.
   Своя раскладка, но чужих классов не занимает: всё под префиксом .lc-,
   цвета берутся из токенов портала, поэтому светлая тема работает без правок. */

.lc-page {
  display: grid;
  gap: 88px;
  margin-inline: auto;
  max-width: 1240px;
  min-width: 0;
  padding: 34px 20px 64px;
  width: 100%;
}

.lc-page > * { min-width: 0; }
.lc-page code, .lc-page pre { font-family: var(--course-mono); }

/* Шапка */

.lc-hero {
  align-items: start;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.lc-eyebrow, .lc-kicker {
  color: var(--course-cyan);
  font-family: var(--course-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.lc-eyebrow {
  align-items: center;
  display: flex;
  gap: 9px;
  margin: 0 0 18px;
}

.lc-eyebrow span {
  background: var(--course-cyan);
  border-radius: 50%;
  box-shadow: 0 0 18px color-mix(in srgb, var(--course-cyan) 72%, transparent);
  height: 7px;
  width: 7px;
}

.lc-hero h1 {
  color: var(--course-text);
  font-size: clamp(34px, 4.4vw, 58px);
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0;
}

.lc-hero__lead {
  color: var(--course-muted);
  font-size: 17px;
  line-height: 1.65;
  margin: 24px 0 0;
  max-width: 760px;
}

.lc-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 30px 0 0;
}

.lc-metrics div { display: grid; gap: 3px; }

.lc-metrics dt {
  color: var(--course-text);
  font-family: var(--course-mono);
  font-size: 22px;
  font-weight: 800;
}

.lc-metrics dd { color: var(--course-subtle); font-size: 11px; margin: 0; }

.lc-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px;
}

.lc-button {
  align-items: center;
  background: var(--course-control);
  border: 1px solid var(--course-line-strong);
  border-radius: 9px;
  color: var(--course-text);
  display: inline-flex;
  font-size: 13px;
  font-weight: 750;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 0 17px;
  text-decoration: none;
}

.lc-button:hover { border-color: var(--course-cyan); color: var(--course-text); text-decoration: none; }
.lc-button--primary { background: var(--course-cyan); border-color: var(--course-cyan); color: #041014; }
.lc-button--primary:hover { background: var(--course-focus); color: #041014; }

.lc-text-link {
  align-items: center;
  color: var(--course-muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
}

.lc-text-link:hover { color: var(--course-text); }

.lc-hero__board {
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  border-radius: 14px;
  display: grid;
  gap: 16px;
  padding: 20px;
}

.lc-hero__board > header {
  border-bottom: 1px solid var(--course-line);
  display: grid;
  gap: 5px;
  padding-bottom: 13px;
}

.lc-hero__board header span {
  color: var(--course-cyan);
  font-family: var(--course-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.lc-hero__board header small {
  color: var(--course-muted);
  font-family: var(--course-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.lc-hero__board dl { display: grid; gap: 12px; margin: 0; }
.lc-hero__board dt { color: var(--course-text); font-family: var(--course-mono); font-size: 11.5px; font-weight: 700; }
.lc-hero__board dd { color: var(--course-muted); font-size: 12px; line-height: 1.5; margin: 4px 0 0; }

.lc-hero__categories {
  border-top: 1px solid var(--course-line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
}

.lc-hero__categories li {
  align-items: center;
  background: var(--course-control);
  border-radius: 999px;
  color: var(--course-muted);
  display: flex;
  font-size: 11px;
  gap: 6px;
  padding: 6px 11px;
}

.lc-hero__categories span { color: var(--course-cyan); font-family: var(--course-mono); font-weight: 800; }

/* Секции */

.lc-section { display: grid; gap: 26px; }
.lc-section__head { max-width: 880px; }
.lc-kicker { margin: 0 0 11px; }

.lc-section__head h2, .lc-cta h2 {
  color: var(--course-text);
  font-size: clamp(27px, 3.4vw, 40px);
  letter-spacing: -0.038em;
  line-height: 1.07;
  margin: 0;
}

.lc-section__head > p:last-child, .lc-cta > div > p:last-child {
  color: var(--course-muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 15px 0 0;
}

.lc-section__head code, .lc-cta code {
  background: var(--course-control);
  border-radius: 5px;
  color: var(--course-text);
  font-size: 0.88em;
  padding: 2px 5px;
}

.lc-flow {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.lc-flow li {
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  display: grid;
  min-height: 215px;
  padding: 22px;
}

.lc-flow li:first-child { border-radius: 13px 0 0 13px; }
.lc-flow li:last-child { border-radius: 0 13px 13px 0; }
.lc-flow span { color: var(--course-cyan); font-family: var(--course-mono); font-size: 11px; }
.lc-flow strong { align-self: end; color: var(--course-text); font-size: 16px; line-height: 1.25; margin-top: 40px; }
.lc-flow small { color: var(--course-muted); font-size: 12px; line-height: 1.55; margin-top: 9px; }
.lc-flow code { color: var(--course-text); font-size: 11px; }

/* Что гарантирует тотальность */

.lc-guarantees { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.lc-guarantees article {
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  border-radius: 13px;
  padding: 22px;
}

.lc-guarantees h3 { color: var(--course-text); font-size: 16px; margin: 0 0 12px; }
.lc-guarantees ul { color: var(--course-muted); display: grid; gap: 9px; font-size: 13px; line-height: 1.55; margin: 0; padding-left: 18px; }

.lc-partial {
  background: color-mix(in srgb, var(--course-orange) 7%, var(--course-surface));
  border: 1px solid color-mix(in srgb, var(--course-orange) 45%, var(--course-line));
  border-radius: 13px;
  padding: 22px;
}

.lc-partial h3 { color: var(--course-orange); font-family: var(--course-mono); font-size: 12px; margin: 0 0 8px; text-transform: uppercase; }
.lc-partial > p { color: var(--course-muted); font-size: 13px; line-height: 1.6; margin: 0 0 16px; max-width: 820px; }
.lc-partial ul { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }

.lc-partial li {
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.lc-partial li a { color: var(--course-text); font-size: 14px; font-weight: 700; text-decoration: none; }
.lc-partial li a:hover { color: var(--course-cyan); }
.lc-partial li a b { color: var(--course-cyan); font-family: var(--course-mono); margin-right: 6px; }
.lc-partial li span { color: var(--course-muted); font-size: 12px; line-height: 1.5; }
.lc-partial li small { color: var(--course-subtle); font-family: var(--course-mono); font-size: 10px; }

/* Каталог решений */

.lc-cards { display: grid; gap: 8px; }

.lc-card {
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  border-radius: 12px;
  min-width: 0;
  overflow: hidden;
}

.lc-card[open] { border-color: var(--course-line-strong); }

.lc-card > summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: 58px minmax(160px, 1.1fr) 170px minmax(0, 1.5fr);
  list-style: none;
  padding: 16px 18px;
}

.lc-card > summary::-webkit-details-marker { display: none; }
.lc-card > summary:hover { background: var(--course-control); }

.lc-card__number {
  color: var(--course-cyan);
  font-family: var(--course-mono);
  font-size: 17px;
  font-weight: 800;
}

.lc-card__name { display: grid; gap: 3px; min-width: 0; }
.lc-card__name strong { color: var(--course-text); font-size: 15px; line-height: 1.25; }
.lc-card__name small { color: var(--course-subtle); font-size: 11px; }

.lc-badge {
  background: color-mix(in srgb, var(--course-orange) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--course-orange) 50%, var(--course-line));
  border-radius: 999px;
  color: var(--course-orange);
  font-family: var(--course-mono);
  font-size: 10px;
  font-weight: 800;
  justify-self: start;
  padding: 6px 10px;
  white-space: nowrap;
}

.lc-badge--total {
  background: color-mix(in srgb, var(--course-green) 16%, transparent);
  border-color: color-mix(in srgb, var(--course-green) 50%, var(--course-line));
  color: var(--course-green);
}

.lc-card__facts { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }

.lc-card__facts code {
  background: var(--course-control);
  border-radius: 999px;
  color: var(--course-muted);
  font-size: 10px;
  padding: 5px 9px;
  white-space: nowrap;
}

.lc-card__body {
  border-top: 1px solid var(--course-line);
  display: grid;
  gap: 16px;
  padding: 20px 18px;
}

.lc-card__technique { color: var(--course-muted); font-size: 13.5px; line-height: 1.6; margin: 0; max-width: 900px; }

.lc-card__guarantee { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }

.lc-card__guarantee > div {
  background: var(--course-control);
  border-radius: 10px;
  padding: 14px 16px;
}

.lc-card__guarantee dt { color: var(--course-cyan); font-family: var(--course-mono); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.lc-card__guarantee dd { color: var(--course-muted); font-size: 12.5px; line-height: 1.55; margin: 7px 0 0; }

.lc-functions { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }

.lc-functions li {
  align-items: center;
  background: var(--course-control);
  border: 1px solid var(--course-line);
  border-radius: 8px;
  color: var(--course-text);
  display: flex;
  font-size: 12px;
  gap: 7px;
  padding: 7px 11px;
}

.lc-functions li span { font-family: var(--course-mono); font-weight: 800; }
.lc-functions li.is-total span { color: var(--course-green); }
.lc-functions li.is-partial span { color: var(--course-orange); }
.lc-functions li small { color: var(--course-subtle); font-size: 10px; }

.lc-code {
  background: var(--course-code-bg);
  border: 1px solid var(--course-line);
  border-radius: 11px;
  margin: 0;
  overflow: hidden;
}

.lc-code figcaption {
  align-items: center;
  border-bottom: 1px solid var(--course-line);
  color: var(--course-subtle);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--course-mono);
  font-size: 10px;
  gap: 10px;
  justify-content: space-between;
  padding: 11px 14px;
}

.lc-code pre {
  background: transparent;
  border: 0;
  color: var(--course-code-text);
  font-size: 12px;
  line-height: 1.68;
  margin: 0;
  max-height: 540px;
  overflow: auto;
  padding: 18px;
}

/* Граница честности */

.lc-limits { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lc-limits article {
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.lc-limits article > header { align-items: baseline; display: flex; gap: 9px; margin-bottom: 10px; }
.lc-limits header span { color: var(--course-cyan); font-family: var(--course-mono); font-size: 12px; font-weight: 800; }
.lc-limits header strong { color: var(--course-text); font-size: 14px; line-height: 1.25; }
.lc-limits p { color: var(--course-muted); font-size: 12.5px; line-height: 1.6; margin: 0; }

.lc-limits footer {
  border-top: 1px solid var(--course-line);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
  padding-top: 12px;
}

.lc-limits footer code {
  background: var(--course-control);
  border-radius: 999px;
  color: var(--course-muted);
  font-size: 9.5px;
  padding: 5px 8px;
}

.lc-gaps {
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  border-radius: 12px;
  padding: 16px 20px;
}

.lc-gaps > summary { color: var(--course-text); cursor: pointer; font-size: 14px; font-weight: 700; }
.lc-gaps dl { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 0; }
.lc-gaps dt { color: var(--course-cyan); font-family: var(--course-mono); font-size: 11.5px; font-weight: 800; }
.lc-gaps dd { color: var(--course-muted); font-size: 12.5px; line-height: 1.55; margin: 6px 0 0; }

/* Переход дальше */

.lc-cta {
  align-items: center;
  background: linear-gradient(120deg, color-mix(in srgb, var(--course-cyan) 9%, var(--course-surface)), var(--course-surface));
  border: 1px solid color-mix(in srgb, var(--course-cyan) 45%, var(--course-line));
  border-radius: 18px;
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 32px;
}

.lc-cta__links { display: grid; gap: 8px; }

@media (max-width: 1100px) {
  .lc-hero { grid-template-columns: minmax(0, 1fr); }
  .lc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-flow li, .lc-flow li:first-child, .lc-flow li:last-child { border-radius: 10px; }
  .lc-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-card > summary { grid-template-columns: 48px minmax(0, 1fr); }
  .lc-badge, .lc-card__facts { grid-column: 2; justify-content: flex-start; }
}

@media (max-width: 760px) {
  .lc-page { gap: 58px; padding: 24px 14px 44px; }
  .lc-hero h1 { font-size: 32px; }
  .lc-metrics { display: grid; grid-template-columns: repeat(2, 1fr); }
  .lc-flow, .lc-guarantees, .lc-limits, .lc-cta { grid-template-columns: minmax(0, 1fr); }
  .lc-flow li { min-height: 0; }
  .lc-flow strong { margin-top: 22px; }
  .lc-partial ul, .lc-card__guarantee, .lc-gaps dl { grid-template-columns: minmax(0, 1fr); }
  .lc-actions .lc-button, .lc-cta__links .lc-button { width: 100%; }
  .lc-code pre { font-size: 10.5px; padding: 14px; }
}