/* Раздел языка /flang/: песочница, справочник, практикум.
   Цвета — токены портала (--course-*), второй палитры здесь нет. Подсветка
   кода в заборах — css/fts.css. */

/* ---------------------------------------------------------- песочница */
.tool-page--flang .tool-wizard__panel[data-tool-panel="try"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 12px;
}

.flang-sandbox {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.flang-sandbox__bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flang-sandbox__pick {
  background: var(--course-panel);
  border: 1px solid var(--course-line-strong);
  border-radius: var(--course-radius);
  color: var(--course-text);
  font: inherit;
  max-width: 100%;
  min-height: 36px;
  padding: 0 10px;
}

.flang-sandbox__version {
  color: var(--course-muted);
  font-family: var(--course-mono);
  font-size: 12px;
  margin-left: auto;
}

.flang-sandbox__body {
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  min-height: 0;
}

.flang-sandbox__editor,
.flang-result {
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  min-height: 0;
}

.flang-sandbox__editor {
  background: var(--course-surface);
  color: var(--course-text);
  font-family: var(--course-mono);
  font-size: 13.5px;
  line-height: 1.5;
  padding: 12px 14px;
  resize: none;
  tab-size: 2;
  white-space: pre;
}

.flang-result {
  background: var(--course-panel);
  overflow: auto;
  padding: 12px 14px;
}

.flang-result__idle,
.flang-result__status {
  color: var(--course-muted);
  margin: 0;
}

.flang-result__head {
  align-items: baseline;
  border-left: 4px solid var(--course-line-strong);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 4px 0 4px 10px;
}

.flang-result__head--proved { border-color: var(--course-green); }
.flang-result__head--unproved { border-color: var(--course-orange); }
.flang-result__head--error,
.flang-result__head--refuted { border-color: var(--course-red); }

.flang-result__time {
  color: var(--course-muted);
  font-family: var(--course-mono);
  font-size: 12px;
}

.flang-result .flang-result__label {
  font-size: 13px;
  margin: 12px 0 6px;
}

.flang-result__detail {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px;
  white-space: pre-line;
}

.flang-result__head strong { font-size: 16px; }

.flang-result__errors,
.flang-result__claims {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flang-result__errors li {
  font-size: 13.5px;
  line-height: 1.45;
}

.flang-result__errors code {
  color: var(--course-red);
  font-family: var(--course-mono);
}

.flang-result__where { color: var(--course-muted); }

.flang-claim {
  align-items: baseline;
  display: grid;
  font-size: 13.5px;
  gap: 8px;
  grid-template-columns: auto 1fr;
}

.flang-claim__mark {
  border-radius: 999px;
  font-size: 11.5px;
  padding: 1px 8px;
  white-space: nowrap;
}

.flang-claim--proved .flang-claim__mark { background: color-mix(in srgb, var(--course-green) 18%, transparent); color: var(--course-text); }
.flang-claim--unproved .flang-claim__mark,
.flang-claim--grid .flang-claim__mark,
.flang-claim--assumed .flang-claim__mark { background: color-mix(in srgb, var(--course-orange) 20%, transparent); color: var(--course-text); }
.flang-claim--refuted .flang-claim__mark { background: color-mix(in srgb, var(--course-red) 20%, transparent); color: var(--course-text); }

.flang-result__raw {
  margin-top: 12px;
}

.flang-result__raw summary {
  color: var(--course-muted);
  cursor: pointer;
  font-size: 13px;
}

.flang-result__raw pre {
  font-family: var(--course-mono);
  font-size: 12px;
  line-height: 1.45;
  margin: 8px 0 0;
  overflow-x: auto;
  white-space: pre;
}

.flang-note {
  background: color-mix(in srgb, var(--course-orange) 12%, transparent);
  border-radius: var(--course-radius);
  font-size: 13.5px;
  margin: 0 0 10px;
  padding: 8px 10px;
}

@media (max-width: 899px) {
  .tool-page--flang .tool-wizard__panel[data-tool-panel="try"] { overflow: auto; }
  .flang-sandbox__body { grid-template-columns: 1fr; }
  .flang-sandbox__editor { min-height: 260px; }
  .flang-result { min-height: 160px; }
}

/* ------------------------------------------------- проза и установка */
.flang-prose {
  max-width: 78ch;
}

.flang-prose p,
.flang-prose li {
  line-height: 1.6;
}

.flang-prose ul {
  list-style: disc;
  margin: 0 0 12px;
  padding-left: 22px;
}

.flang-prose li { margin: 0 0 4px; }

.flang-cmd {
  margin: 0 0 12px;
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  font-family: var(--course-mono);
  font-size: 13px;
  overflow-x: auto;
  padding: 10px 12px;
}

.flang-commands {
  border-collapse: collapse;
  font-size: 14px;
}

.flang-commands td {
  border-top: 1px solid var(--course-line);
  padding: 6px 12px 6px 0;
  vertical-align: top;
}

.flang-commands code { font-family: var(--course-mono); white-space: nowrap; }

/* ------------------------------------------------------- куда дальше */
.flang-links {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.flang-link {
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  color: var(--course-text);
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  text-decoration: none;
}

.flang-link:hover,
.flang-link:focus-visible { border-color: var(--course-cyan); }

.flang-link span {
  color: var(--course-muted);
  font-size: 13.5px;
  line-height: 1.45;
}

/* -------------------------------------------- справочник и практикум */
/* Код карточек печатает partials/flang-code.html со своей панелью (css/fts.css);
   здесь только отступ и предел высоты, второй рамки вокруг неё нет. */
.flang-card .flang-code {
  margin: 0 0 10px;
  max-height: 460px;
  overflow: auto;
}

.flang-page {
  margin: 0 auto;
  max-width: 1040px;
  padding: 24px 16px 48px;
}

.flang-page h1 { margin: 0 0 6px; }

.flang-page__lead {
  color: var(--course-muted);
  margin: 0 0 18px;
  max-width: 78ch;
}

.flang-page__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 20px;
}

.flang-group > h2 {
  border-bottom: 1px solid var(--course-line);
  font-size: 20px;
  margin: 28px 0 12px;
  padding-bottom: 6px;
}

.flang-card {
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  margin: 0 0 14px;
  padding: 14px 16px;
}

.flang-card h3 {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 17px;
  gap: 4px 10px;
  margin: 0 0 6px;
}

.flang-card__form {
  color: var(--course-muted);
  font-family: var(--course-mono);
  font-size: 12.5px;
  font-weight: 400;
}

.flang-card p { line-height: 1.55; margin: 0 0 10px; }

.flang-card pre:not(.flang-code) {
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  font-family: var(--course-mono);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
  max-height: 420px;
  overflow: auto;
  padding: 10px 12px;
}

.flang-card__open {
  font-size: 14px;
}

.flang-task__editor {
  background: var(--course-surface);
  border: 1px solid var(--course-line);
  border-radius: var(--course-radius);
  box-sizing: border-box;
  color: var(--course-text);
  font-family: var(--course-mono);
  font-size: 13px;
  line-height: 1.5;
  min-height: 220px;
  padding: 10px 12px;
  resize: vertical;
  tab-size: 2;
  white-space: pre;
  width: 100%;
}

.flang-page .tool-button {
  background: var(--course-panel);
  border: 1px solid var(--course-line-strong);
  border-radius: var(--course-radius);
  color: var(--course-text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  min-height: 34px;
  padding: 0 14px;
}

.flang-page .tool-button--primary {
  background: var(--course-cyan);
  border-color: var(--course-cyan);
  color: var(--course-on-accent);
  font-weight: 600;
}

.flang-page .tool-button:disabled { cursor: progress; opacity: 0.7; }

.flang-task__bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.flang-task__state {
  color: var(--course-muted);
  font-size: 13.5px;
}

.flang-task[data-solved="true"] { border-color: var(--course-green); }

.flang-task details { margin: 0 0 10px; }
.flang-task details summary { cursor: pointer; font-size: 14px; }

.flang-task .flang-result { margin-top: 8px; max-height: 420px; }

/* «Язык за минуту»: на широком экране пояснение слева, пример справа —
   иначе раздел не помещается в экран 1280×720 (замер: 671 px при 518). */
@media (min-width: 900px) {
  .tool-page--flang [data-tool-panel="what"] .flang-prose {
    column-gap: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: none;
  }
  .tool-page--flang [data-tool-panel="what"] .flang-prose > * { grid-column: 1; margin-top: 0; }
  .tool-page--flang [data-tool-panel="what"] .flang-prose > pre,
  .tool-page--flang [data-tool-panel="what"] .flang-prose > .highlight {
    align-self: start;
    grid-column: 2;
    grid-row: 1 / span 4;
  }
}

.flang-source { margin: 12px 0; }
.flang-source summary { cursor: pointer; font-size: 14px; }

@media (min-width: 900px) {
  .tool-page--flang [data-tool-panel="install"] .flang-cmd { margin: 6px 0; }
  .tool-page--flang [data-tool-panel="install"] .flang-prose > p { margin: 8px 0; }
}