/* The training library (drills.html): app-style cards on the dark section. Uses site.css's tokens; the cyan is the app's. */
.library { padding-top: 56px; }
/* On big screens the library grows (still three across): bigger cards and maps instead of wide empty margins. */
@media (min-width: 1600px) { .library > .container { max-width: 1560px; } }
.lib-tabs [role="tab"] { font-size: 1.05rem; padding: 14px 22px; }
.lib-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 22px; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-chip { font: 600 .88rem/1 var(--font-body); padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #c9d4ea; cursor: pointer; }
.lib-chip[aria-pressed="true"] { background: rgba(61, 212, 255, .14); border-color: #3dd4ff; color: #fff; }
.lib-search { font: inherit; height: 40px; box-sizing: border-box; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: #0d1a2e; color: #eef2fa; min-width: 200px; }
.lib-search::placeholder { color: #8592ad; }
.lib-count { margin: 0 0 0 auto; color: #8fa0c2; font-size: .95rem; }
@media (max-width: 680px) { .lib-search { width: 100%; } .lib-count { margin-left: 0; } }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1040px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .lib-grid { grid-template-columns: 1fr; } }
.lib-card { background: #10233a; border: 1px solid rgba(61, 212, 255, .18); border-radius: 12px; padding: 16px; color: #dfe6f3; }
.lib-card h3 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; margin: 0 0 4px; }
.lib-meta { font: 600 .74rem/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #8fa0c2; margin: 0 0 10px; }
.lib-meta .accent { color: #3dd4ff; }
.lib-map { background: #0b1620; border: 1px solid rgba(61, 212, 255, .22); border-radius: 8px; overflow: hidden; }
.lib-map svg { display: block; width: 100%; height: auto; }
.lib-rail { display: grid; grid-template-columns: auto 1fr; margin: 10px 0; border: 1px solid rgba(61, 212, 255, .18); border-radius: 8px; }
.lib-rail > div { padding: 6px 12px; min-width: 0; }
.lib-rail > div + div { border-left: 1px solid rgba(61, 212, 255, .18); }
.lib-rail span { display: block; font: 600 .66rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #8fa0c2; }
.lib-rail b { display: block; font: 700 1.1rem/1.3 var(--font-head); color: #fff; overflow-wrap: anywhere; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.lib-tags span { font: 600 .74rem/1 var(--font-body); padding: 5px 9px; border-radius: 999px; background: rgba(185, 140, 255, .14); color: #d9c6ff; }
.lib-tags .lib-space { background: rgba(61, 212, 255, .14); color: #9fe6ff; }   /* a course's space ("Fits a room") */
.lib-desc { font-size: .94rem; color: #c5d0e6; margin: 0; }
.lib-card details { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; }
.lib-card summary { cursor: pointer; color: #3dd4ff; font-weight: 600; font-size: .92rem; }
.lib-card details .lib-desc { margin-top: 8px; }
.cof-wrap { overflow-x: auto; margin-top: 8px; }
table.cof { width: 100%; border-collapse: collapse; font-size: .8rem; color: #dfe6f3; }
table.cof th, table.cof td { text-align: left; padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); vertical-align: top; }
table.cof th { color: #8fa0c2; font-weight: 600; white-space: nowrap; }
.muted { color: #8fa0c2; }
.lib-note { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); border-radius: 10px; padding: 12px 16px; font-size: .92rem; color: #c5d0e6; max-width: 900px; margin: 22px 0; }
.empty-note { color: #8fa0c2; }

/* Target Practice: drop a course into your space */
.fit { margin-bottom: 8px; }
.fit h2 { color: #fff; }
.fit-steps { list-style: none; padding: 0; margin: 26px 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .fit-steps { grid-template-columns: 1fr; } }
.fit-step svg { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid rgba(61, 212, 255, .18); }
.fit-step h3 { margin: 14px 0 6px; color: #fff; font-size: 1.35rem; }
.fit-step p { color: #c5d0e6; margin: 0; font-size: .98rem; }
.fit-note { color: #8fa0c2; font-size: .95rem; margin: 6px 0 0; max-width: 900px; }