/* ============================================================
   GP Team Hub - training.css
   Training page only. Split out of pages.css to keep every
   stylesheet comfortably under the size limit.

   COLOR RULE: no literal color values. Tokens only.
   ============================================================ */

/* ---------------- Today's lesson ----------------
   The whole page exists to make this one block get done. It is the
   only thing above the fold and it carries a single action, because
   a person at capacity cannot be asked to pick from a catalog. */
.lesson{
  background:var(--accent-wash);
  border:1px solid var(--accent-edge);
  border-radius:var(--radius);
  padding:17px 19px;
}
.lesson-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.lesson-label{
  font-size:.68rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink);
  flex:1;
}
.lesson-streak{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:700;
  color:var(--ink-soft);
  white-space:nowrap;
}

.lesson-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px;}
.lesson-type{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface-high);
  border-radius:var(--radius-pill);
  padding:4px 11px;
  font-size:.74rem;font-weight:700;
  color:var(--ink-soft);
}
.lesson-type i{font-size:.78rem;}
.lesson-mins{color:var(--ink-faint);font-size:.79rem;font-weight:600;}

.lesson-title{
  font-size:1.42rem;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.3px;
  margin-top:9px;
}
.lesson-why{color:var(--ink-soft);font-size:.92rem;line-height:1.6;margin-top:8px;max-width:64ch;}

.lesson-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:15px;}
.lesson-go{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:.95rem;
  padding:12px 17px;
  border-radius:var(--radius-sm);
}
.lesson-go:hover{background:var(--accent-hover);text-decoration:none;}

/* Some lessons point at a file rather than a URL, so they say exactly
   where it sits instead of pretending to be a link. */
.lesson-local{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  font-size:.85rem;
  line-height:1.5;
  color:var(--ink-soft);
  flex:1 1 260px;
}
.lesson-local i{color:var(--ink-faint);font-size:.95rem;line-height:1.5;flex-shrink:0;}
.lesson-local b{color:var(--ink);font-weight:600;}

.lesson-done{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  font-size:.92rem;
  font-weight:700;
  color:var(--ink);
}
.lesson-done:hover{background:var(--surface-high);}
.lesson-done i{font-size:1.02rem;color:var(--ink-faint);}
.lesson-done[data-on="true"]{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.lesson-done[data-on="true"] i{color:var(--ink-inverse);}

.lesson-skip{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink-faint);
  font-size:.84rem;
  font-weight:600;
  padding:12px 6px;
}
.lesson-skip:hover{color:var(--ink);}
.lesson-skip i{font-size:.76rem;}

.lesson-after{
  color:var(--ink-soft);
  font-size:.86rem;
  line-height:1.55;
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid var(--accent-edge);
  max-width:64ch;
}

/* ---------------- Courses ---------------- */
.course-list{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.course{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px 17px;
}
.course-head{display:flex;align-items:flex-start;gap:13px;}
.course-ic{font-size:1.15rem;line-height:1.4;width:23px;flex-shrink:0;text-align:center;color:var(--ink-faint);}
.course-main{min-width:0;flex:1;}
.course-name{
  display:inline-flex;align-items:center;gap:8px;
  font-size:1.02rem;font-weight:700;line-height:1.35;
  color:var(--ink);
}
.course-name:hover{color:var(--accent);text-decoration:none;}
.course-ext{font-size:.72rem;color:var(--ink-faint);}
.course-note{color:var(--ink-soft);font-size:.87rem;line-height:1.55;margin-top:4px;max-width:70ch;}

.course-topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.course-topic{
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  padding:6px 13px;
  font-size:.82rem;
  font-weight:600;
  color:var(--ink-soft);
}
.course-topic:hover{color:var(--ink);border-color:var(--accent-edge);background:var(--surface-high);text-decoration:none;}

/* ---------------- The shelf ---------------- */
.shelf{margin-top:14px;}
.shelf-search{position:relative;}
.shelf-ic{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:.9rem;pointer-events:none;
}
#shelfInput{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  padding:11px 13px 11px 36px;
  font-size:.94rem;
  outline:none;
}
#shelfInput::placeholder{color:var(--ink-faint);}
#shelfInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

.shelf-groups{margin-top:16px;}
.shelf-group{margin-bottom:24px;}
.shelf-group-head{
  display:flex;align-items:center;gap:10px;
  font-size:1.02rem;font-weight:700;letter-spacing:-.1px;
  color:var(--ink);
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
  margin-bottom:11px;
}
.shelf-group-head i{color:var(--accent);font-size:.9rem;}
.shelf-items{display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));}

.shelf-item{
  display:flex;align-items:center;gap:11px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  color:var(--ink);
  font-size:.88rem;
  line-height:1.45;
}
a.shelf-item:hover{background:var(--surface-high);border-color:var(--accent-edge);text-decoration:none;}
.shelf-item-ic{font-size:.95rem;width:18px;text-align:center;flex-shrink:0;color:var(--ink-faint);}
a.shelf-item:hover .shelf-item-ic{color:var(--accent);}
.shelf-item-name{font-weight:600;}

.shelf-empty{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  color:var(--ink-soft);
  font-size:.89rem;
  line-height:1.6;
}
.shelf-empty[hidden]{display:none;}