/* Opening Trainer — catur.org/openings */

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f4f1ea;
  color: #2b2b2b;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: #3d3a34;
  color: #f4f1ea;
  flex-wrap: wrap;
}
.topbar h1 { font-size: 1.15rem; margin: 0; }
.topbar nav { display: flex; gap: 0.3rem; }
.nav-btn {
  background: transparent;
  color: #d8d3c6;
  border: none;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
}
.nav-btn.active { background: #6b654f; color: #fff; }

.view { display: none; padding: 1rem; max-width: 980px; margin: 0 auto; }
.view.active { display: block; }

.panel {
  background: #fff;
  border: 1px solid #e0dbcd;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.rep-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.btn {
  background: #6b654f;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn:hover { background: #58523f; }
.btn.primary { background: #4e6e58; }
.btn.primary:hover { background: #3f5a48; }
.btn.small { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn.danger { background: #8c4a43; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.muted { color: #8a8578; }
.small-text { font-size: 0.8rem; display: block; margin-bottom: 0.25rem; }

/* study home */
.due-hero { font-size: 1.4rem; margin-bottom: 0.6rem; }
.due-hero span { font-weight: 700; color: #4e6e58; }
.mode-pick { display: flex; gap: 1.4rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.due-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.due-list li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0; border-top: 1px solid #eee;
}
.due-list .line-name { flex: 1; }
.due-list em { color: #8a8578; font-style: normal; font-size: 0.85rem; }
.due-n { font-variant-numeric: tabular-nums; color: #4e6e58; font-weight: 600; }
.tag-w, .tag-b {
  font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 4px;
}
.tag-w { background: #ece7da; color: #555; }
.tag-b { background: #3d3a34; color: #f4f1ea; }
.tag-custom { background: #d9e6dd; color: #3f5a48; font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: 4px; }

/* drill layout */
.drill-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.6rem; margin-bottom: 0.6rem; font-weight: 600;
}
.drill-body { display: flex; gap: 1rem; flex-wrap: wrap; }
.board-wrap { width: min(480px, 100%); flex-shrink: 0; }
.side-panel { flex: 1; min-width: 220px; }

#studyBoard, #builderBoard { width: 100% !important; }

/* click-to-move square highlight */
[data-square].sq-sel::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 4px rgba(78, 110, 88, 0.85);
}
[data-square] { position: relative; }

.flash-ok #studyBoard { box-shadow: 0 0 0 4px #4e6e58; border-radius: 2px; }
.flash-bad #studyBoard { box-shadow: 0 0 0 4px #a0524a; border-radius: 2px; }

.feedback {
  padding: 0.7rem 0.9rem; border-radius: 8px; background: #f4f1ea;
  min-height: 3rem; font-size: 0.95rem;
}
.feedback.ok { background: #e2efe6; }
.feedback.bad { background: #f4e0de; }

.grade-row { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.grade-row button {
  flex: 1; padding: 0.5rem 0; border: 1px solid #cfcabb; background: #fff;
  border-radius: 6px; cursor: pointer; font-size: 0.9rem;
}
.grade-row button:hover { background: #f0ede4; }
.grade-row button.pre { background: #4e6e58; color: #fff; border-color: #4e6e58; }

.big-ok { font-size: 1.3rem; font-weight: 700; color: #4e6e58; }

/* repertoire list */
.line-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 0; border-top: 1px solid #eee;
}
.line-info { flex: 1; min-width: 0; }
.line-title { font-weight: 600; }
.line-title em { color: #8a8578; font-style: normal; font-size: 0.85rem; }
.line-meta { font-size: 0.83rem; color: #8a8578; margin: 0.15rem 0; }
.mastery-bar { height: 5px; background: #eee7d8; border-radius: 3px; max-width: 260px; }
.mastery-bar i { display: block; height: 100%; background: #4e6e58; border-radius: 3px; }
.line-actions { display: flex; flex-direction: column; gap: 0.3rem; }
.toggle input { width: 1.15rem; height: 1.15rem; cursor: pointer; }

/* builder */
.builder-controls { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.7rem; }
.builder-controls label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.builder-controls input[type="text"], .builder-controls select {
  padding: 0.35rem 0.5rem; border: 1px solid #cfcabb; border-radius: 6px; flex: 1;
}
.moves-list { font-family: ui-monospace, Menlo, monospace; font-size: 0.9rem; }

/* stats */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.7rem; margin-bottom: 1.2rem; }
.stat { background: #f4f1ea; border-radius: 8px; padding: 0.8rem; text-align: center; }
.stat b { font-size: 1.6rem; display: block; color: #4e6e58; }
.stat span { font-size: 0.8rem; color: #8a8578; }
.hist-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.hist-table th, .hist-table td { text-align: left; padding: 0.4rem 0.5rem; border-top: 1px solid #eee; }
.hist-table .g-0 { color: #a0524a; font-weight: 600; }
.hist-table .g-1 { color: #a07c2e; }
.hist-table .g-2 { color: #4e6e58; }
.hist-table .g-3 { color: #3f5a48; font-weight: 600; }
.file-label { position: relative; overflow: hidden; display: inline-block; }
.file-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* promotion dialog */
#promoDialog {
  display: none; position: fixed; z-index: 50; top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff; border: 1px solid #cfcabb; border-radius: 10px;
  padding: 0.7rem; box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
#promoDialog.show { display: flex; gap: 0.5rem; }
.promo-btn { background: #f4f1ea; border: 1px solid #cfcabb; border-radius: 8px; padding: 0.3rem; cursor: pointer; }
.promo-btn img { width: 52px; height: 52px; display: block; }
.promo-btn:hover { background: #e2efe6; }

@media (max-width: 700px) {
  .drill-body { flex-direction: column; }
  .board-wrap { width: 100%; }
  .line-row { flex-wrap: wrap; }
  .line-actions { flex-direction: row; }
}

.js-error {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
  background: #a0524a; color: #fff; padding: 0.4rem 1rem; font-size: 0.85rem;
}