/* ---------- Whole board: Left book (where the games leave opening theory) ----------
   Prefix ob-. The lookup, story and filters share the My games look (pf-
   classes in profile.css); what is new here is the "when you leave" bars,
   the openings table, and the trouble-spot cards with a small diagram each.
   Two fixed meanings never change job: orange is the move the player keeps
   playing, green is the book's first choice. */

.ob-body .pf-story { margin-top: 12px; }
.ob-more {
  margin-top: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
}

/* ----- Stage: first screen ----- */

.ob-empty {
  max-width: 560px;
  margin: 8vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.ob-empty-title { margin: 0; font-size: 1.5rem; }
.ob-empty-text { margin: 0; color: var(--muted); line-height: 1.45; }

/* ----- Stage: head, filters, headline ----- */

.ob-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ob-kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

.ob-dash > .pf-chart { grid-column: auto; width: 100%; }
.ob-card { width: 100%; }

/* ----- The "when you leave" bars ----- */

.ob-bar { opacity: 0.92; }
.ob-bar-white { fill: #dfe3ea; }
.ob-bar-black { fill: var(--accent); }
.ob-bar-n { font-size: 10px; fill: var(--muted); }
.ob-swatch-white { background: #dfe3ea; }
.ob-swatch-black { background: var(--accent); }

/* ----- The score bar: wins, draws, losses ----- */

.ob-score {
  display: inline-flex;
  width: 84px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--control);
  vertical-align: middle;
  flex: 0 0 auto;
}
.ob-score > span { display: block; height: 100%; flex-basis: 0; }
.ob-score-w { background: #4fd1b0; }
.ob-score-d { background: #8a8d96; }
.ob-score-l { background: #e66767; }

/* ----- The openings table ----- */

.ob-openings { display: flex; flex-direction: column; margin-top: 8px; }
.ob-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 150px 72px 64px;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.ob-opening-head { border-top: 0; color: var(--label); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ob-op-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-op-n, .ob-op-left, .ob-op-move { text-align: right; }
.ob-op-score { display: inline-flex; align-items: center; gap: 8px; }
.ob-op-pct { min-width: 3ch; text-align: right; }
.ob-eco { color: var(--muted); font-size: 0.75rem; }
.ob-side { font-size: 0.8em; line-height: 1; }
.ob-side-white { color: #dfe3ea; }
.ob-side-black { color: var(--accent); }
.ob-weak .ob-op-pct { color: #f2a2a2; font-weight: 600; }

/* ----- The trouble spots ----- */

.ob-spots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.ob-spot {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.ob-spot-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ob-spot-title { margin: 0; font-size: 0.92rem; font-weight: 600; display: flex; gap: 6px; align-items: baseline; }
.ob-spot-line { margin: 0; font-size: 0.86rem; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ob-spot-book { display: block; }
.ob-spot-book strong { color: #7fe0c0; font-weight: 600; }
.ob-spot-actions { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: auto; }
.ob-open { font-size: 0.82rem; }
.ob-link { font-size: 0.82rem; color: var(--accent); }

/* The small diagram: eight by eight, from the player's side, a fixed size so it reads without a hover. */
.ob-mini {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 128px;
  height: 128px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  align-self: start;
}
.ob-mini .square { cursor: default; position: relative; }
.ob-mini .square:hover::after { content: none; }
.ob-mini .piece { position: absolute; inset: 0; display: block; pointer-events: none; }
.ob-mini .piece svg { width: 100%; height: 100%; display: block; }
.ob-mini .ob-from { box-shadow: inset 0 0 0 100px rgba(251, 140, 0, 0.45); }
.ob-mini .ob-to { box-shadow: inset 0 0 0 100px rgba(251, 140, 0, 0.7); }
.ob-mini .ob-book { box-shadow: inset 0 0 0 100px rgba(79, 209, 176, 0.65); }
.ob-mini .ob-to.ob-book { box-shadow: inset 0 0 0 2px rgba(79, 209, 176, 0.95), inset 0 0 0 100px rgba(251, 140, 0, 0.55); }

/* Spots seen once, in a closed drawer under the cards. */
.ob-once { margin-top: 10px; }
.ob-once-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.ob-once-item { display: flex; gap: 8px; align-items: baseline; }
.ob-once-text { flex: 1 1 auto; min-width: 0; }
.ob-once-res { flex: 0 0 auto; font-size: 0.78rem; }
.ob-res-w { color: #4fd1b0; }
.ob-res-d { color: #8a8d96; }
.ob-res-l { color: #f2a2a2; }

/* ----- The games ----- */

.ob-games { margin-top: 8px; }
.ob-game-opening { color: var(--muted); }

/* ----- Narrow screens ----- */

@media (max-width: 760px) {
  .ob-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ob-kpis .pf-kpi { padding: 8px 10px; }
  .ob-kpis .pf-kpi-value { font-size: 1.4rem; }
  .ob-kpis .pf-kpi-label { font-size: 0.68rem; }
  .ob-opening { grid-template-columns: minmax(0, 1fr) 34px 60px 58px; gap: 6px; font-size: 0.84rem; }
  .ob-opening-head { font-size: 0.62rem; letter-spacing: 0; }
  .ob-opening-head > span { white-space: nowrap; }
  .ob-op-move, .ob-opening-head .ob-op-move, .ob-op-pct, .ob-eco { display: none; }
  .ob-score { width: 56px; }
  .ob-spots { grid-template-columns: 1fr; }
  .ob-spot { grid-template-columns: 104px minmax(0, 1fr); }
  .ob-mini { width: 104px; height: 104px; }
  .ob-empty { margin-top: 4vh; }
}