/* ============================================================
   LEARN — theme variables (adjust to match the rest of the site)
   ============================================================ */
.container {
    width: 1100px;
}

.learn-wrap {
  --lrn-bg:        #ffffff;
  --lrn-surface:   #f4f4f4;   /* card background */
  --lrn-surface-2: #ebebeb;   /* card hover */
  --lrn-border:    #cccccc;   /* borders */
  --lrn-text:      #121212;   /* main text */
  --lrn-muted:     #666666;   /* descriptions, labels */
  --lrn-accent:    #c70606;   /* your red */
  --lrn-accent-dim:#b16c6c;   /* dimmed variant from your palette */
  --lrn-done:      #4a9b5e;   /* green in the spirit of the "Easy" badge; ALT: use var(--lrn-accent) */
  --lrn-radius:    10px;
  --lrn-mono:      "JetBrains Mono", "Fira Code", Consolas, monospace;

    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
    color: var(--lrn-text);
}

/* ---- header ---- */
.learn-header {
    margin-bottom: 10px;
}

.learn-header h1 {
    margin: 0 0 .4rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.learn-sub {
    margin: 0;
    color: var(--lrn-muted);
    font-size: .95rem;
}

/* ---- messages ---- */
.learn-msg { margin: 0 0 1rem; font-size: .875rem; min-height: 0; }
.learn-msg:empty { display: none; }
.learn-msg.learn-err,
.learn-msg.learn-ok {
    padding: .6rem .85rem;
    border-radius: 4px;
}
.learn-msg.learn-err {
    border-left: 3px solid var(--lrn-accent);
    background: rgba(199, 6, 6, 0.08);
    color: #ff6b6b;
}
.learn-msg.learn-ok {
    border-left: 3px solid var(--lrn-done);
    background: rgba(46, 204, 113, 0.08);
    color: var(--lrn-done);
}

/* ---- sections ---- */
.learn-section {
    margin: 5px 0px 5px 0px;
}

.learn-actions {
    margin: 10px 0;
}

.learn-section-title {
    font-family: var(--lrn-mono);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--lrn-muted);
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--lrn-border);
}
.learn-section-title::before {
    content: "// ";
    color: var(--lrn-accent);
}

/* ---- loading / empty ---- */
.learn-loading, .learn-empty {
    color: var(--lrn-muted);
    font-family: var(--lrn-mono);
    font-size: .9rem;
    padding: 1rem 0;
}

/* ============================================================
   DOJO CARD GRID
   ============================================================ */
.dojos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.dojo-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem;
    background: var(--lrn-surface);
    border: 1px solid var(--lrn-border);
    border-left: 3px solid var(--lrn-accent);
    border-radius: var(--lrn-radius);
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.dojo-card:hover {
    transform: translateY(-2px);
    background: var(--lrn-surface-2);
    border-color: var(--lrn-accent);
}

.dojo-card-top {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.dojo-icon {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--lrn-text);
}

.dojo-title {
    color: var(--lrn-text);
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}
.dojo-desc {
    margin: 0;
    color: var(--lrn-muted);
    font-size: .875rem;
    line-height: 1.5;
    flex-grow: 1;
}

/* dojo progress bar */
.dojo-progress {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: auto;
}
.dojo-progress-bar {
    flex-grow: 1;
    height: 6px;
    background: var(--lrn-border);
    border-radius: 3px;
    overflow: hidden;
}
.dojo-progress-bar > span {
    display: block;
    height: 100%;
    background: var(--lrn-accent);
    transition: width .3s ease;
}
.dojo-progress-label {
    font-family: var(--lrn-mono);
    font-size: .75rem;
    color: var(--lrn-muted);
    white-space: nowrap;
}

/* ============================================================
   STANDALONE LIST
   ============================================================ */
.standalone-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.standalone-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    background: var(--lrn-surface);
    border: 1px solid var(--lrn-border);
    border-radius: var(--lrn-radius);
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, border-color .15s ease;
}
.standalone-item:hover {
    background: var(--lrn-surface-2);
    border-color: var(--lrn-accent);
}
.standalone-check {
    font-family: var(--lrn-mono);
    color: var(--lrn-muted);
}
.standalone-item.is-done .standalone-check { color: var(--lrn-done); }
.standalone-title { flex-grow: 1; font-weight: 500; }
.standalone-diff {
    font-family: var(--lrn-mono);
    font-size: .75rem;
    color: var(--lrn-muted);
    padding: .15rem .5rem;
    border: 1px solid var(--lrn-border);
    border-radius: 4px;
}

/* ============================================================
   PATHWAY CARDS (dojo view)
   ============================================================ */
.pathways-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.pathway-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.1rem 1.25rem;
  background: var(--lrn-surface);
  border: 1px solid var(--lrn-border);
  border-left: 3px solid var(--lrn-accent);
  border-radius: var(--lrn-radius);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.pathway-card:hover {
  transform: translateY(-2px);
  background: var(--lrn-surface-2);
  border-color: var(--lrn-accent);
}

.pathway-card.is-done:hover {
  transform: translateY(-2px);
  background: var(--lrn-surface-2);
  border-color: var(--lrn-done);
}

/* card header: check + title + difficulty badge */
.pathway-card-top {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.pathway-check {
  font-family: var(--lrn-mono);
  color: var(--lrn-muted);
  flex-shrink: 0;
}
.pathway-card.is-done
.pathway-check {
    color: var(--lrn-done);
}

.pathway-card.is-done {
    border-left: 3px solid var(--lrn-done);
}

.pathway-title {
  font-weight: 600;
  font-size: 1.05rem;
  flex-grow: 1;
}

.pathway-desc {
  margin: 0;
  color: var(--lrn-muted);
  font-size: .875rem;
  line-height: 1.5;
}

.pathway-meta {
  display: flex;
  gap: .75rem;
  margin-top: auto;
}
.pathway-min {
  font-family: var(--lrn-mono);
  font-size: .75rem;
  color: var(--lrn-muted);
}

/* difficulty badge — in the style of challenge-cards */
.pathway-diff {
  font-family: var(--lrn-mono);
  font-size: .72rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  color: #fff;
  background: var(--lrn-muted);   /* fallback for unknown difficulty level */
}
.pathway-diff.diff-beginner,
.pathway-diff.diff-easy         { background: #4a9b5e; }   /* green like "Easy" */
.pathway-diff.diff-intermediate,
.pathway-diff.diff-medium       { background: #e0a12b; }   /* yellow like "Medium" */
.pathway-diff.diff-advanced,
.pathway-diff.diff-hard         { background: #c0392b; }   /* red like "Hard" */

/* ============================================================
   PATHWAY — progress bar (header)
   ============================================================ */
.pathway-progress {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 420px;
}
.pathway-progress-bar {
  flex-grow: 1;
  height: 8px;
  background: var(--lrn-border);
  border-radius: 4px;
  overflow: hidden;
}
.pathway-progress-bar > span {
  display: block;
  height: 100%;
  background: var(--lrn-done);
  transition: width .3s ease;
}
.pathway-progress-label {
  font-family: var(--lrn-mono);
  font-size: .78rem;
  color: var(--lrn-muted);
  white-space: nowrap;
}

p + .learn-back {
  margin: 10px 0;
}

/* ============================================================
   PATHWAY — step cards (steps-list) — GRID
   ============================================================ */
.steps-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4rem;
}

.step-card {
  flex: 1 1 260px;
  max-width: 100%;
  background: var(--lrn-surface);
  border: 1px solid var(--lrn-border);
  border-left: 3px solid var(--lrn-accent);
  border-radius: var(--lrn-radius);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.step-card:hover {
  transform: translateY(-2px);
  background: var(--lrn-surface-2);
  border-color: var(--lrn-accent);
}

.step-card.is-done:hover {
  transform: translateY(-2px);
  background: var(--lrn-surface-2);
  border-color: var(--lrn-done);
}

.step-card.is-done {
  border-left-color: var(--lrn-done);
}

.step-card-link {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem 1.15rem;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.step-card-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.step-check {
  font-family: var(--lrn-mono);
  color: var(--lrn-muted);
  flex-shrink: 0;
}
.step-card.is-done .step-check { color: var(--lrn-done); }

.step-index {
  font-family: var(--lrn-mono);
  font-size: .8rem;
  color: var(--lrn-muted);
  flex-shrink: 0;
}

.step-type {
  font-family: var(--lrn-mono);
  font-size: .68rem;
  color: var(--lrn-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .12rem .5rem;
  border: 1px solid var(--lrn-border);
  border-radius: 4px;
}

.step-optional {
  font-family: var(--lrn-mono);
  font-size: .68rem;
  color: var(--lrn-muted);
  padding: .12rem .5rem;
  border: 1px solid var(--lrn-border);
  border-radius: 4px;
  margin-left: auto;
}

.step-title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
}

.step-arrow {
  margin-top: auto;
  align-self: flex-end;
  color: var(--lrn-muted);
  transition: transform .15s ease, color .15s ease;
}
.step-card:hover .step-arrow {
  color: var(--lrn-accent);
  transform: translateX(3px);
}

/* ============================================================
   markdown-body (overview + content detail)
   ============================================================ */
.markdown-body { line-height: 1.6; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  margin: 1.2em 0 .5em;
  line-height: 1.3;
}

.markdown-body ul, .markdown-body ol { margin: 0 0 1em; padding-left: 1.5em; }
.markdown-body code {
  font-family: var(--lrn-mono);
  font-size: .875em;
  background: var(--lrn-surface-2);
  padding: .15em .4em;
  border-radius: 4px;
}
.markdown-body pre {
  background: var(--lrn-surface-2);
  border: 1px solid var(--lrn-border);
  border-radius: var(--lrn-radius);
  padding: 1rem;
  overflow-x: auto;
}
.markdown-body pre code { background: none; padding: 0; }
.markdown-body a { color: var(--lrn-accent); }

#steps-list { position: relative; }   /* jeśli jeszcze nie masz */

.pathway-spline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;   /* linia nie przechwytuje klików w karty */
}
.step-card { position: relative; }    /* żeby karty były NAD splajnem (z-index auto > -1) */

/* ============================================================
   STEP DETAIL (widok pojedynczego kroku)
   ============================================================ */
.step-detail-action {
    display: flex;
    justify-content: flex-end;
    margin: 1.5rem 0;
}

.step-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid #d9534f;
    background: transparent;
    color: #d9534f;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.step-link:hover {
    background: #d9534f;
    color: #f4f4f4;
}

.step-link:active {
    background: #0a0a0a;
}

/* przycisk mark as complete / undo */
.step-complete-btn {
    font-family: var(--lrn-mono);
    font-size: .9rem;
    padding: .6rem 1.4rem;
    border: 1px solid var(--lrn-done);
    border-radius: var(--lrn-radius);
    background: var(--lrn-done);
    color: #fff;
    cursor: pointer;
    transition: opacity .15s ease, background .15s ease;
}
.step-complete-btn:hover { opacity: .88; }
.step-complete-btn:disabled { opacity: .5; cursor: default; }
/* wariant "undo" (już ukończone) — obrys zamiast wypełnienia */
.step-complete-btn.undo {
    background: transparent;
    color: var(--lrn-done);
}

/* nota dla kroków auto (ctf_task / quiz) — bez przycisku */
.step-auto-note {
    font-family: var(--lrn-mono);
    font-size: .85rem;
    color: var(--lrn-muted);
}
.step-auto-note a { color: var(--lrn-accent); }

/* nawigacja prev / next */
.step-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lrn-border);
}
.step-nav-btn {
    font-family: var(--lrn-mono);
    font-size: .85rem;
    padding: .5rem 1rem;
    border: 1px solid var(--lrn-border);
    border-radius: var(--lrn-radius);
    background: var(--lrn-surface);
    color: var(--lrn-text);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.step-nav-btn:hover {
    background: var(--lrn-surface-2);
    border-color: var(--lrn-accent);
}
/* gdy widoczny jest tylko "next", ma zostać dosunięty do prawej */
#step-next { margin-left: auto; }

/* typ kroku obok tytułu */
.learn-header .step-type {
    display: inline-block;
    margin-top: .35rem;
    font-family: var(--lrn-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--lrn-muted);
    padding: .12rem .5rem;
    border: 1px solid var(--lrn-border);
    border-radius: 4px;
}

@media (max-width: 640px) {
    .learn-wrap { padding: 1.5rem 1rem 2rem; }
    .dojos-grid { grid-template-columns: 1fr; }
    .learn-header h1 { font-size: 1.6rem; }
}