/* Training hub (route /training). Reuses .nl-sel (news-admin.css) + .bf-table
   (battlefield.css). */

.training-screen { width: 100%; box-sizing: border-box; }
.tr-page { display: flex; flex-direction: column; gap: 20px; }
/* The row carries the divider, not the tab strip; the strip must NOT redraw it. */
.tr-tabbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}
/* .tr-tabs / .tr-tab: THE shared page-tab component (layout.css). */
.tr-tabbar .tr-tabs { padding-bottom: 0; border-bottom: 0; margin: 0; }
.tr-tabbar .page-tabs-dropdown { margin: 0; flex: 1 1 220px; }
/* At ≤768 .tr-tabbar is a column, where the dropdown's 220px basis becomes a HEIGHT. */
@media (max-width: 768px) {
  .tr-tabbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .tr-tabbar .page-tabs-dropdown { flex: 0 0 auto; }
}

.tr-hero {
  display: flex; justify-content: space-between; align-items: stretch;
  gap: 16px; flex-wrap: wrap;
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-1); padding: 18px 20px;
}
/* The eyebrow owns the hero's first line; the stats row follows on its own. */
.tr-hero > .tr-eyebrow { flex: 1 1 100%; }
.tr-hero-main { display: flex; align-items: stretch; gap: 20px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.tr-hero-stats {
  display: grid; grid-template-columns: repeat(4, minmax(96px, 1fr)); gap: 10px;
  flex: 1 1 320px; min-width: 0;
}
/* One shape — icon stacked over the figure, centred column. */
.tr-hstat,
.tr-badge {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  padding: 14px 6px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--bg-2);
}
.tr-hstat-ico { font-size: 1.4rem; color: var(--bronze-2); }
.tr-hstat-body { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
/* The display serif defaults to OLD-STYLE figures, so 4 and 3 drop below the baseline. */
.tr-hstat-v {
  font-family: var(--font-display); font-size: 1.4rem; line-height: 1.05; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.tr-hstat-l { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); white-space: nowrap; }

.tr-modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
/* Areas rather than a column, so the icon shares the title's line while description and meta
   still span the card; the 1fr middle row keeps meta on the floor of every card. */
.tr-mode-card {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  grid-template-areas: "ico title" "desc desc" "meta meta";
  column-gap: 8px; row-gap: 5px; align-items: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 13px 14px; box-shadow: var(--shadow-1);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.tr-mode-card:hover { border-color: var(--bronze); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tr-mode-card:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 2px; }
.tr-mode-ico { grid-area: ico; font-size: 1.3rem; color: var(--bronze-2); }
.tr-mode-title { grid-area: title; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.2; color: var(--ink); }
.tr-mode-desc {
  grid-area: desc; align-self: start;
  color: var(--ink-2); font-size: 0.78rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tr-mode-meta {
  grid-area: meta; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--bronze-2); margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) { .tr-mode-card { transition: none; } }

.tr-panel {
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-1); padding: 18px 20px;
}

.tr-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; }
.tr-badge.locked { opacity: 0.4; }
.tr-badge-ico { font-size: 1.4rem; }
.tr-badge-l { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.tr-badge-s { font-size: 0.68rem; color: var(--ink-3); }

/* The puzzle library is the battlefield's framed table: .bf-open skin, .bf-table rows,
   .bf-open-foot pager. Only the columns are its own. Every rule below carries the table
   class twice over so it out-ranks .bf-table's own (0,1,2) base — battlefield.css links
   after this sheet. */
.tr-lib-table th.tr-col-num,   .tr-lib-table td.tr-col-num,
.tr-lib-table th.tr-col-theme, .tr-lib-table td.tr-col-theme,
.tr-lib-table th.tr-col-diff,  .tr-lib-table td.tr-col-diff,
.tr-lib-table th.tr-col-status, .tr-lib-table td.tr-col-status { width: 1%; white-space: nowrap; }
.tr-lib-table td.tr-col-num { color: var(--ink-3); font-size: 0.8rem; }
.tr-lib-table th.tr-col-status, .tr-lib-table td.tr-col-status { text-align: center; }
/* The solved bar mirrors .bf-table tr.is-mine's bronze one — same cue, the laurel meaning.
   It rides td:first-child, which is why no breakpoint may hide .tr-col-num: :first-child is
   structural, so a hidden first cell keeps the shadow and the row loses its mark. */
.tr-lib-table tbody tr.is-solved td:first-child { box-shadow: inset 3px 0 0 var(--laurel-2); }
.tr-lib-table tbody tr.is-solved .na-title-link { color: var(--ink-2); }
/* (0,3,2) beats the shared .na-title-link:hover at (0,2,0), so the hover cue is restated. */
.tr-lib-table tbody tr.is-solved .na-title-link:hover { color: var(--bronze-2); }
.tr-lib-pips { color: var(--bronze-2); font-size: 0.7rem; letter-spacing: 1px; }
.tr-lib-pips-off { opacity: 0.25; }
.tr-lib-solved { color: var(--laurel-2); font-weight: 700; }
/* Compact drops theme and difficulty; the number, title, status and Play always stay. */
.tr-lib-table.is-compact th.tr-col-theme, .tr-lib-table.is-compact td.tr-col-theme,
.tr-lib-table.is-compact th.tr-col-diff,  .tr-lib-table.is-compact td.tr-col-diff { display: none; }
@media (max-width: 480px) {
  .tr-lib-table th.tr-col-theme, .tr-lib-table td.tr-col-theme { display: none; }
}

/* Ancestor selector (0,2,0) beats .bf-table's min-width:640px (0,1,0). */
.training-screen .tr-lib-table { min-width: 420px; }
/* Drop the floor on a phone rather than force it to scroll sideways. Ties the rule above at
   (0,2,0) and wins on order, so it must stay after it. */
@media (max-width: 480px) { .training-screen .tr-lib-table { min-width: 0; } }
.tl-table tbody tr.tr-lb-you td { border-bottom: 2px solid var(--bronze); }
/* .tl-who is a plain cell, so the pill's clearance from the name lives here. */
.tl-who .nl-you-pill { margin-left: 6px; }

.tl-kpis { width: 100%; margin-bottom: 16px; }
/* Ancestor selector (0,2,0) beats .bf-table's min-width:640px (0,1,0). */
.training-screen .tl-table { min-width: 320px; }
.tl-table .tl-rank { width: 52px; font-family: var(--font-display); color: var(--ink-2); }
.tl-table td.tl-rating, .tl-table th:nth-child(3) { text-align: right; }
.tl-table tbody tr.me td { background: color-mix(in srgb, var(--lapis-2) 8%, transparent); }
.tl-table tbody tr.me:hover td { background: color-mix(in srgb, var(--lapis-2) 14%, transparent); }
/* Own row blue, top ten gold, and the overlap named outright at (0,4,2) so the pair does not
   rest on source order. Each tint out-ranks layout.css's .tr-lb-link:hover, so the hover cue is
   restated or it never fires. */
.tl-table tbody tr.me .tr-lb-link { color: var(--lapis-2); }
.tl-table tbody tr.is-top .tr-lb-link { color: var(--gold); }
.tl-table tbody tr.me.is-top .tr-lb-link { color: var(--gold); }
.tl-table tbody tr.me .tr-lb-link:hover,
.tl-table tbody tr.is-top .tr-lb-link:hover { color: var(--bronze-2); }
.tl-table.is-compact td, .tl-table.is-compact th { padding-top: 4px; padding-bottom: 4px; }

/* 1200: four mode cards beside the sidebar; below it three, then two at 768. Card width. */
@media (max-width: 1200px) { .tr-modes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .tr-modes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .tr-hero { flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px) {
  .tr-page { gap: 16px; }
  .tr-hero { padding: 14px; }
  .tr-hero-main { gap: 12px; }
  .tr-hero-stats { grid-template-columns: repeat(2, 1fr); flex-basis: 100%; }
  .tr-modes { grid-template-columns: 1fr; }
  .tr-mode-desc { -webkit-line-clamp: 3; }
  .tr-badges { grid-template-columns: repeat(2, 1fr); }
  .tr-panel { padding: 14px; }
}
/* 380: matches app-topbar.css — the small-phone floor, below the documented 480. */
@media (max-width: 380px) {
  .tr-hero-stats { gap: 8px; }
  .tr-hstat { padding: 12px 4px; }
}