/* Minesweeper problems page (docs/product/problems.md). style.css supplies the
   base font, the board and square look (#board, .cell), and the
   return-to-game button dress. */

body.problems-page {
  min-height: 100vh;
  padding: 0;
  background: #f3f6f8;
  color: #000000;
  text-align: left;
}

#problems-titlebar {
  padding: 11px 24px;
  border-bottom: 1px solid #dbe3e8;
  background: #ffffff;
}

#problems-titlebar-name {
  font-size: 13px;
  font-weight: bold;
}

/* Block flow, not the game page's centered flex column for main. */
#problems-layout {
  display: block;
  width: calc(100% - 48px);
  margin: 0 auto;
  padding: 30px 0 56px;
}

body.problems-page .return-to-game {
  padding: 7px 12px;
  border-color: #b9c8d2;
  background: #ffffff;
  font-size: 12px;
}

#problems-header h1 {
  margin: 34px 0 0;
  font-size: 30px;
  line-height: 1.15;
}

#problems-status {
  margin: 18px 0 0;
  font-size: 15px;
}

#problems-status.problems-error {
  border: 1px solid #d6a2a2;
  border-radius: 7px;
  background: #fff5f5;
  padding: 12px 14px;
  color: #8d3030;
  font-weight: bold;
}

.problems-card {
  margin-top: 18px;
  border: 1px solid #d9e2e8;
  border-radius: 10px;
  background: #ffffff;
  padding: 22px 26px;
}

.problems-card h2 {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.3;
}

.problems-card p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
}

.problems-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 14px;
}

.problems-actions button {
  font: inherit;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  background: #f0f6fb;
  border: 1px solid #8aa0b5;
  border-radius: 6px;
  padding: 9px 18px;
  cursor: pointer;
}

.problems-actions button:hover { background: #dcebf7; }

#problems-cell-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  border: 0;
  padding: 0;
}

#problems-cell-size legend {
  float: left;
  margin-right: 6px;
  font-size: 14px;
  font-weight: bold;
}

#problems-cell-size label {
  font-size: 15px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* While a set runs the page chrome gives its height to the board. */
body.problems-running #problems-titlebar,
body.problems-running #problems-header { display: none; }

/* The play view: head line, board, result. The instruction line keeps one
   height through every phase so the board never shifts. */
#problems-play { margin-top: 18px; }

#problems-play-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  min-height: 34px;
  margin-bottom: 10px;
}

#problems-play-head h2 {
  margin: 0;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

#problems-play-instruction {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

#problems-board-area {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
}

/* The focus box: the area where the answer lies. An outline only, so the
   squares inside and outside keep full contrast. */
#problems-focus-box {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid #e07000;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

/* The ring shows where to rest the cursor; the dot is where the original
   player's cursor was when the square opened for them. */
#problems-start-ring {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid #0057d9;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

#problems-start-ring::after {
  content: '';
  position: absolute;
  left: var(--dot-x, 50%);
  top: var(--dot-y, 50%);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #0057d9;
}

/* The pointing test's current target. */
.cell.hidden.pointing-target {
  background: #1f5fd1;
  border-color: #6f9ae8 #0d3a8f #0d3a8f #6f9ae8;
}

.pointing-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 4px 0 14px;
}

.pointing-ladders,
#problems-result-ladder {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
}

/* After a problem: the squares the new number proved. */
.cell.problems-answer-safe::after,
.cell.problems-answer-mine::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 1;
  pointer-events: none;
}

.cell.problems-answer-safe::after { border: 2px dashed #007a1f; }
.cell.problems-answer-mine::after { border: 2px dashed #d40000; }
.cell.problems-start-square { box-shadow: inset 0 0 0 2px #0057d9; }

/* Board and result side by side, the result wrapping below on narrow
   screens. The board comes first, so the result appearing never moves it. */
#problems-play-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 28px;
}

#problems-result {
  flex: 1 1 300px;
  min-width: 0;
}

#problems-result-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 14px;
}

.problems-value {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.problems-value-number {
  font-size: 28px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.problems-value-label {
  font-size: 13px;
  font-weight: bold;
}

#problems-answer-key {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: bold;
}

#problems-answer-key[hidden] { display: none; }

.problems-key-safe,
.problems-key-mine {
  display: inline-block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
}

.problems-key-safe { border: 2px dashed #007a1f; }
.problems-key-mine { border: 2px dashed #d40000; margin-left: 10px; }

.problems-help {
  font-size: 12px;
  font-weight: bold;
  cursor: help;
}

/* Ladders: the game data chart's 0-100% band as a time scale, fastest at the
   top; every mark at its exact time, labels beside it with leaders. */
#problems-profile-ladders {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
}

.problems-ladder {
  flex: 0 1 280px;
  min-width: 240px;
  margin: 0;
  color: #000000;
  font: 400 12px Arial, Helvetica, sans-serif;
}

.problems-ladder figcaption { font-size: 15px; }
.problems-ladder-title { font-weight: bold; }

.problems-ladder .problems-ladder-note {
  margin: 2px 0 8px;
  font-size: 13px;
}

.problems-ladder-stage { position: relative; }

.problems-ladder-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  border-radius: 4px;
  background: linear-gradient(#d8f0da, #d9ebfa 50%, #fad8d8);
  box-shadow: 0 0 0 1px #cad9e0;
}

.problems-ladder-tick {
  position: absolute;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.problems-ladder-tick::before,
.problems-ladder-tick::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 1px;
  background: #56798b;
}

.problems-ladder-tick::before { left: 0; }
.problems-ladder-tick::after { right: 0; }

.problems-ladder-leaders {
  position: absolute;
  top: 0;
  left: 40px;
  width: 16px;
  height: 100%;
  overflow: visible;
}

.problems-ladder-leaders line {
  stroke: #58798d;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.problems-ladder-dot {
  position: absolute;
  left: 40px;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border: 1.4px solid #355d75;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.problems-ladder-dot[data-kind="original"] { background: #355d75; }

.problems-ladder-dot[data-kind="you"] {
  width: 11px;
  height: 11px;
  border: 2px solid #ffffff;
  background: #245b8b;
  box-shadow: 0 0 0 1px #245b8b;
}

.problems-ladder-label {
  position: absolute;
  left: 58px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 1px 6px 1px 4px;
  transform: translateY(-50%);
  white-space: nowrap;
}

.problems-ladder-value {
  min-width: 44px;
  font-size: 13px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Your mark wears the game's me-row look: bold black on light blue with the
   dark blue edge. */
.problems-ladder-label[data-kind="you"] {
  font-weight: bold;
  background: #d8ebfa;
  box-shadow: inset 2px 0 #245b8b;
}

.problems-ladder-label[data-kind="original"] { font-style: italic; }

.problems-table-scroll { overflow-x: auto; }

.problems-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.problems-table th {
  padding: 6px 10px;
  border-bottom: 2px solid #9fb2c1;
  text-align: right;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
}

.problems-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #e1e8ed;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.problems-table th:first-child,
.problems-table td:first-child,
.problems-table .problems-text { text-align: left; }

.problems-table td.problems-number {
  font-size: 16px;
  font-weight: bold;
}

.problems-rule-name { font-weight: bold; }

.problems-file {
  font-size: 15px;
  font-weight: bold;
}