/* puzzles/trainer/trainer.css — вкладка «Дебюты». Классы .tr-* ; цвета — из shared/theme.css. */
.ptabs { display: flex; gap: 8px; margin: 8px 0 12px; }
.ptabs button[aria-selected="true"] { border-color: var(--accent-active-line, #5fe07c); font-weight: 700; }
.tr-modes, .tr-lines { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tr-modes button[aria-pressed="true"] { border-color: var(--accent-active-line, #5fe07c); font-weight: 700; }
.tr-layout { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 16px; align-items: start; }
.tr-board { display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; max-width: 420px; aspect-ratio: 1; border: 2px solid var(--border-color, #888); border-radius: 6px; overflow: hidden; }
.tr-sq { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; font-size: clamp(18px, 5vw, 34px); line-height: 1; cursor: pointer; background: none; }
.tr-light { background: #ecd9b0; } .tr-dark { background: #a97b50; }
.tr-sel { outline: 3px solid var(--accent-gold, #ffd23f); outline-offset: -3px; }
.tr-w { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; } .tr-b { color: #151515; text-shadow: 0 0 1px #fff; }
.tr-sq:focus-visible, .tr-drop:focus-visible { outline: 3px solid var(--accent-info, #3ba7ff); outline-offset: -3px; }
.tr-pocket { display: flex; gap: 4px; min-height: 40px; margin: 6px 0; }
.tr-drop { font-size: 26px; padding: 2px 8px; border: 1px solid var(--border-color, #888); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.tr-msg { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--border-color, #888); min-height: 1.4em; }
.tr-msg.ok { border-color: var(--accent-success, #2ecc71); } .tr-msg.bad { border-color: var(--accent-danger, #ff6e7c); }
.tr-q { font-weight: 600; } .tr-opt { display: block; margin: 6px 0; text-align: left; }
@media (max-width: 760px) { .tr-layout { grid-template-columns: 1fr; } }