/* Without JavaScript (layout.html sets the class "js") */
html:not(.js) .js-only {
  display: none !important;
}

/* Bootstrap's display utilities (d-flex) would override the hidden attribute */
[hidden] {
  display: none !important;
}

/* The page's width for the boards (cqw units) */
main {
  container-type: inline-size;
}

/* The boards: at least their old size (phones: the screen's width); with room, up to 75% of
   the page's width or of the window's height under the navbar, the smaller of the two */
.board {
  --board-min: 360px;
  --board-share: 0.75;   /* of the page's width / the window's height */
  --board-room: 100cqw;  /* less where the side column is beside the board */
  width: max(var(--board-min), min(100cqw * var(--board-share), (100vh - 4.5rem) * var(--board-share),
                                   var(--board-room)));
  max-width: 100%;
}

/* The pages with the position editor below the board (endgames, new puzzle) */
.board-editor {
  --board-share: 0.6;
}

/* Side by side (endgames from md, the others from lg): the side column keeps 20rem + the gutter */
@media (min-width: 768px) {
  .board {
    --board-room: calc(100cqw - 21.5rem);
  }
}

@media (max-width: 991.98px) {
  .board-explorer {
    --board-room: 100cqw;
  }
}

/* Beside a board: below it rather than squeezed */
.side-column {
  min-width: min(20rem, 100%);
}

/* The explorer's moves beside the board: as tall as the board with its buttons (the column
   doesn't add its own height: the list scrolls in it) */
@media (min-width: 992px) {
  .move-column {
    display: flex;
    flex-direction: column;
  }

  .move-column > #part-table {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .move-column .move-table {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
  }
}

/* White to move / Black to move */
.side-dot {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.35rem;
  border: 1px solid #6c757d;
  border-radius: 50%;
  vertical-align: -0.05em;
}

.side-dot-white {
  background-color: #fff;
}

.side-dot-black {
  background-color: #000;
}

/* The new puzzle page's buttons with an icon */
.button-icon {
  width: 1em;
  height: 1em;
  margin-right: 0.35rem;
  vertical-align: -0.125em;
}

.board > svg {
  display: block;
  width: 100%;
  height: auto;
}

.editor {
  max-width: 400px;  /* the side to move and en passant on one line */
}

/* Piece buttons in the board's square colours, so that both piece colours show in dark mode too:
   the dark square's, the chosen one the light square's (user's wish 2026-10-19) */
.piece-button,
.piece-button:hover {
  padding: 0.125rem 0.25rem;
  background-color: #c5a076;
}

.piece-button.active,
.piece-button:focus-visible {
  background-color: #ecdab9;
  border-color: var(--bs-primary);
  box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.piece-button svg {
  display: block;
  width: 2rem;
  height: 2rem;
}

/* The promotion pieces under the board: over what is below (absolute, at the place where it
   would be), so that nothing moves when it shows */
.promotion-picker {
  position: absolute;
  z-index: 10;
  padding: 0.375rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background-color: var(--bs-body-bg);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}

.promotion-picker .piece-button svg {
  width: 3rem;
  height: 3rem;
}

.bin-button {
  --bs-btn-color: #212529;
  --bs-btn-hover-color: #212529;
  --bs-btn-active-color: #212529;
}

.bin-button svg {
  padding: 0.25rem;
}

/* Grey buttons in dark mode: Bootstrap's grey (#6c757d) on the dark background is hard to read
   (about 3:1); a lighter one (about 7:1). Hover and the chosen state stay Bootstrap's. Not the
   piece buttons: their own colours on the board's square colour */
[data-bs-theme="dark"] .btn-outline-secondary:not(.piece-button) {
  --bs-btn-color: #adb5bd;
}

/* Fixed width: it mustn't change when its options are filled in (static/endgames.js) */
.ep-select {
  width: 4rem;
}

/* A piece or the bin is chosen: clicks on squares place or remove pieces */
.board.placing .square {
  cursor: pointer;
}

.moves {
  max-width: 28rem;
}

/* Main page */
.board-explorer {
  --board-min: 400px;
  position: relative;  /* for the arrows */
}

/* The arrows over the live board (static/explorer.js) */
.arrow-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The last move, also in app.py (LAST_MOVE_RGB, LAST_MOVE_OPACITY) for the server's board */
.cm-chessboard .markers .marker.marker-last-move {
  fill: rgb(155, 199, 0);
  opacity: 0.41;
}

/* Puzzles: a wrong move's square, the feedback line, the comment */
.cm-chessboard .markers .marker.marker-wrong-move {
  fill: rgb(220, 53, 69);
  opacity: 0.5;
}

.puzzle-panel {
  max-width: 34rem;
}

/* The puzzle page: the heading (and Create puzzle) in the board's column; beside the board the
   side column starts level with the board */
.board-heading {
  min-height: 2.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .puzzle-side {
    padding-top: 3.5rem;
  }
}

.puzzle-feedback {
  min-height: 1.5em;
  font-weight: 500;
}

.puzzle-comment {
  overflow-wrap: anywhere;  /* long links on phones */
}

/* New puzzle: the lines, the one on the board and its move */
.puzzle-lines {
  padding-left: 1.75rem;
}

.puzzle-line {
  display: flex;
  align-items: flex-start;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.puzzle-line.current-line {
  background-color: var(--bs-tertiary-bg);
}

.move-link {
  padding: 0 0.15rem;
  border: 0;
  border-radius: 0.2rem;
  background: none;
  color: inherit;
}

.move-link:hover {
  background-color: var(--bs-secondary-bg);
}

.move-link.current {
  background-color: var(--bs-primary);
  color: #fff;
}

.nav-buttons .btn {
  width: 3.5rem;
}

.nav-buttons svg,
.tab-icon {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.2em;
}

.move-table {
  max-height: min(max(75vh, 470px), 580px);
  overflow-y: auto;
  max-width: 30rem;
}

.move-table thead th {
  position: sticky;
  top: 0;
}

.notation {
  max-width: 50rem;
}

/* The Opening Explorer: who wins the opening */
.result-square {
  display: inline-block;
  width: 1.5rem;
  height: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.2rem;
  vertical-align: middle;
}

.result-square-white {
  background-color: #fff;
}

.result-square-black {
  background-color: #000;
}

.team-battles,
.titles {
  max-width: 1000px;
}

.ratings {
  max-width: 1140px;
}

.puzzle-ratings {
  max-width: 40rem;
}

/* The ratings: rating system / type / year / month */
.selector-label {
  width: 7.5rem;
}

.selector {
  --bs-nav-link-padding-x: 0.5rem;
  --bs-nav-link-padding-y: 0.125rem;
}

.table-icon {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
}

/* The Lichess flags */
.flag {
  font-size: 1.1rem;
  line-height: 1;
  margin-right: 0.5rem;
}

.flag-image {
  height: 1.1rem;
  vertical-align: -0.2em;
}

.flag-unsure {
  font-size: 0.85rem;
}

.flag-unsure .flag-image {
  height: 0.85rem;
  opacity: 0.8;
}

.bot-title {
  color: #cd63d9;
}

.notation-label {
  width: 6.5rem;
}

/* New puzzle: the moves of a pasted game (the start: after one of them), the check's status */
.pgn-moves {
  max-height: 8rem;
  overflow-y: auto;
}

.puzzle-check-status {
  overflow-wrap: anywhere;
}

.rating-input {
  max-width: 8rem;
}