/* Reflex Chess -- the game review page, /analyze.
 *
 * Loaded after seo.css and it never redefines a token seo.css owns. Every
 * colour here is a var() from there, so the light theme, the section accent and
 * the print rules keep working without a line of duplication. seo.css is not
 * this file's to edit, which is why a page-specific need lands here instead.
 *
 * The board is drawn with the same markup the app uses -- .cg-wrap, cg-board,
 * <piece> -- so board.css positions it and pieces.css paints it, and the one
 * thing missing is the squares underneath, which styles.css normally provides
 * and which content pages do not load. That is the gradient below.
 */

/* ---------- the form ---------- */

#analyze-form {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem;
  margin: 1.8rem 0 2.4rem;
}

.pgnlabel {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .5rem;
}

#pgn {
  width: 100%;
  display: block;
  background: var(--card-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: .7rem;
  padding: .7rem .8rem;
  font-family: var(--mono);
  font-size: .88rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 7.5rem;
}
#pgn:focus-visible { outline: 2px solid var(--sec); outline-offset: 1px; }
#pgn::placeholder { color: var(--dim); opacity: .7; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .6rem;
  margin-top: .9rem;
}
.controls label {
  font-size: .88rem;
  color: var(--dim);
}
.controls select {
  background: var(--card-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: .55rem;
  padding: .35rem .5rem;
  font: inherit;
  font-size: .9rem;
}

/* The button is seo.css's .btn, which brings the hard shelf shadow with it.
   Only the things a <button> needs and an <a> does not are set here. */
#analyze-form .btn {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  margin-left: auto;
}
#analyze-form .btn:active { transform: translateY(var(--shelf)); box-shadow: none; }

.ghost {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--dim);
  padding: .4rem .85rem;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
.ghost:hover { color: var(--ink); border-color: var(--sec); }

#analyze-form.busy .btn::after { content: " (stop)"; font-weight: 400; }

#gamepick { margin-top: .8rem; font-size: .9rem; color: var(--dim); }
#gamepick select {
  background: var(--card-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: .55rem;
  padding: .3rem .45rem; font: inherit; font-size: .88rem;
  max-width: 100%;
}

/* A bar rather than a spinner, because a spinner cannot tell you that fifty
   positions is nearly done and this can. */
#bar {
  height: 5px;
  background: var(--card-2);
  border-radius: 999px;
  margin-top: .9rem;
  overflow: hidden;
}
#bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sec);
  border-radius: 999px;
  transition: width .18s linear;
}

#status {
  margin: .6rem 0 0;
  font-size: .88rem;
  color: var(--dim);
  min-height: 1.5rem;
}

/* ---------- the verdict ---------- */

.sum { margin: 2rem 0; }
.sum h2 { margin-bottom: .5rem; }

.verdict {
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  margin: .3rem 0 1.1rem;
}

.sum .note { color: var(--dim); font-size: .95rem; }

/* ---------- one card per flagged move ---------- */

.moves h2 { margin-top: 2.6rem; }

.flag {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--dim);
  border-radius: var(--radius);
  padding: .95rem 1.05rem;
  margin: 1.1rem 0;
}
.flag.blunder { border-left-color: var(--bad); }
.flag.mistake { border-left-color: var(--sec-tactics-2); }

.flag h3 {
  margin: 0 0 .35rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: 1.05rem;
}
.flag .num { color: var(--dim); font-family: var(--mono); font-size: .92rem; font-weight: 400; }
.flag .played { font-family: var(--mono); font-weight: 600; }

.tag {
  margin-left: auto;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .12rem .5rem;
  border-radius: 999px;
}
.tag.blunder { background: var(--bad); color: #fff; }
.tag.mistake { background: var(--sec-tactics-2); color: #1a1205; }

.flag p { margin: .45rem 0; font-size: .96rem; }
.flag .swing { color: var(--dim); font-size: .86rem; font-family: var(--mono); }

.flag .line {
  display: inline-block;
  font-family: var(--mono);
  font-size: .85rem;
  background: var(--card-2);
  border-radius: .45rem;
  padding: .1rem .45rem;
  white-space: nowrap;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: bottom;
}

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem !important; }
.chip {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: var(--card-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sec);
  /* Square on the accent side. With all four corners rounded, a 3px coloured
     edge on a chip this small reads as an opening bracket rather than as a
     tab. */
  border-radius: 0 .5rem .5rem 0;
  padding: .2rem .6rem;
}
.chip:hover { border-color: var(--sec); }

.flag details { margin-top: .7rem; }
.flag summary {
  cursor: pointer;
  color: var(--sec);
  font-weight: 600;
  font-size: .9rem;
}

/* ---------- the board ----------
   board.css sizes and positions everything inside; what it does not do is paint
   the squares, because in the app that is styles.css's job and these pages do
   not load it.

   The checker is one conic-gradient, which is the same technique styles.css
   uses and it is the same technique for a reason. The obvious alternative, a
   pair of 45-degree linear gradients, draws the squares as four triangles and
   leaves a visible diagonal seam across every one of them at these sizes. It
   did, and it looked like a printing fault. */

.boardwrap { margin-top: .8rem; }

.boardwrap .cg-wrap {
  width: min(100%, 19rem);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: .55rem;
  overflow: hidden;
  background-color: var(--sq-light);
  background-image: conic-gradient(
    var(--sq-dark) 0 25%, var(--sq-light) 0 50%,
    var(--sq-dark) 0 75%, var(--sq-light) 0);
  background-size: 25% 25%;
  background-position: 0 0;
  background-repeat: repeat;
}

/* The two squares of the move that was played and the two of the move that
   should have been. Under the pieces: board.css puts <piece> at z-index 2 and
   leaves <square> below it, which is the right order for a highlight. */
.boardwrap square.mark { border-radius: 2px; }
.boardwrap square.mark.bad { background: rgb(255 77 94 / .55); }
.boardwrap square.mark.good { background: rgb(41 193 126 / .5); }

.boardwrap .turn { margin: .55rem 0 0; }

/* ---------- narrow screens ----------
   The single column is the whole layout, so there is very little to do here.
   The one thing that genuinely breaks at 390px is the control row pushing the
   button off the edge, so it takes the full width instead. */

@media (max-width: 27rem) {
  #analyze-form { padding: .9rem; }
  #analyze-form .btn { margin-left: 0; width: 100%; text-align: center; }
  .ghost { width: 100%; }
  .verdict { font-size: 1.1rem; }
  .flag { padding: .8rem .85rem; }
  .flag h3 { font-size: 1rem; }
  .tag { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #bar span { transition: none; }
}

@media print {
  #analyze-form, #bar, #status { display: none; }
  .flag { break-inside: avoid; }
  .flag details { display: none; }
}