/* ==========================================================================
   SAVED POSITIONS
   ==========================================================================
   Three pages load this sheet, for three different things:

     index.html     Explore with a position in it: the file bar at the head of
                    the panel (name, Save, menu), the move bar and the board's
                    controls under the moves, the Games tab - and the sign-in
                    prompt and "Saved" card a save can open
     openings.html  the Save button on the panel's heading row, same prompt
     positions.html the page itself - the grid of saved boards

   One file rather than a block in styles.css so the feature is one line to
   add or pull, and so it ships without re-versioning the stylesheet every
   page on the site carries. The prompt and the "Saved" card borrow the site's
   own modal and toast (.overlay-screen, .win-card, .toast in styles.css);
   what is here is only what they do not already say.

   It loads AFTER styles.css on all three, which the Explore rules below rely
   on: several of them refine a rule in that file at the same specificity.
   ========================================================================== */

/* ---- the Save button (Openings; Explore's is the file bar's, below) ------- */
.pos-save-ic { width: 13px; height: 13px; flex: none; fill: currentColor; }
.op-save-pos { gap: 5px; white-space: nowrap; }
.op-save-pos[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---- the "Saved" card ------------------------------------------------------
   The site toast (top right), with one thing in it to press: a link, or an
   action such as Undo. */
.pos-toast { display: flex; align-items: center; gap: 14px; }
/* It is faded out, never removed - and a card nobody can see was still
   catching every click on what it sat over: the panel's top-right corner, the
   engine switch and the gear among it. It takes the pointer only while up. */
.pos-toast { pointer-events: none; }
.pos-toast.is-up { pointer-events: auto; }
.pos-toast-link {
  margin-left: auto; flex: none; color: var(--color-accent); font-weight: 800;
  background: none; border: 0; padding: 0; font: inherit; font-weight: 800;
  cursor: pointer; text-decoration: none;
}
.pos-toast-link:hover { color: var(--color-accent-hover); }
.pos-toast-link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 3px; border-radius: 4px; }

/* ---- dialogs (sign in to save, delete) ------------------------------------ */
.pos-dialog { z-index: 130; }
.pos-dialog-card { width: min(400px, 100%); padding: 30px 28px 26px; }
.pos-dialog-card .win-title { margin: 6px 0 16px; font-size: 1.35rem; }
.pos-dialog-card .lobby-sub { margin: -6px 0 20px; line-height: 1.45; }
.pos-dialog-ico { display: flex; justify-content: center; color: #e0524a; }
.pos-dialog-card .btn.big { width: 100%; text-decoration: none; }
.pos-dialog-card .btn.pos-danger {
  background: #c0392b; border-color: transparent; color: #fff;
}
.pos-dialog-card .btn.pos-danger:hover { background: #a93226; }

/* ---- a board, drawn small --------------------------------------------------
   js/positions.js boardSvg: the real board's geometry, painted here with its
   live tokens - so a card wears the board theme, the pieces and the goal-row
   tint the player picked, the same way the board itself does. */
.pb { display: block; width: 100%; height: auto; }
.pb-edge { fill: var(--board-edge); }
.pb-l { fill: var(--cell-light); }
.pb-d { fill: var(--cell-dark); }
.pb-goal.pb-l { fill: var(--goal-light); }
.pb-goal.pb-d { fill: var(--goal-dark); }
body.goal-tint .pb-g1.pb-l { fill: color-mix(in srgb, var(--p1) 45%, var(--goal-light)); }
body.goal-tint .pb-g1.pb-d { fill: color-mix(in srgb, var(--p1) 45%, var(--goal-dark)); }
body.goal-tint .pb-g2.pb-l { fill: color-mix(in srgb, var(--p2) 45%, var(--goal-light)); }
body.goal-tint .pb-g2.pb-d { fill: color-mix(in srgb, var(--p2) 45%, var(--goal-dark)); }
.pb-w1 { fill: var(--pt1-wall-base, var(--wall1)); }
.pb-w2 { fill: var(--pt2-wall-base, var(--wall2)); }
.pb-w { stroke: rgba(0, 0, 0, .35); stroke-width: .35; }
.pb-p1 { fill: var(--pt1-pawn-base, var(--p1)); stroke: var(--pt1-pawn-rim, var(--p1-ring)); stroke-width: .9; }
.pb-p2 { fill: var(--pt2-pawn-base, var(--p2)); stroke: var(--pt2-pawn-rim, var(--p2-ring)); stroke-width: .9; }

/* ==========================================================================
   /positions
   ========================================================================== */
.pp-body { background: var(--color-bg); color: var(--color-text-primary); }
.pp-shell {
  max-width: 1240px; margin: 0 auto; box-sizing: border-box;
  padding: max(26px, env(safe-area-inset-top))
           max(28px, env(safe-area-inset-right))
           calc(40px + env(safe-area-inset-bottom))
           max(28px, env(safe-area-inset-left));
  min-height: calc(100vh - var(--promo-h, 0px));
  display: flex; flex-direction: column; gap: 22px;
}
.pp-shell [hidden] { display: none !important; }

.pp-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pp-title { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; }
.pp-sub { margin: 4px 0 0; color: var(--color-text-muted); font-size: .95rem; }
.pp-head-actions { margin-left: auto; display: flex; gap: 8px; }
.pp-head-actions .btn { text-decoration: none; height: 38px; }
.pp-head-actions .btn svg { width: 16px; height: 16px; }
/* Undo is always in the row; greyed, not gone, while there is nothing to undo. */
.pp-head-actions .pp-undo:disabled { opacity: .38; cursor: default; transform: none; box-shadow: none; }

/* ---- the grid --------------------------------------------------------------
   Big squares, as many to a row as fit at 230px or more: four beside the rail
   on a laptop, two on a phone. */
.pp-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.pp-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: border-color .15s ease, transform .15s ease, opacity .2s ease;
}
.pp-card:hover { border-color: rgba(255, 255, 255, .16); }
.pp-card.is-going { opacity: 0; transform: scale(.97); }
/* The one just saved, arriving from the "Saved" card's View link. */
.pp-card.is-new { animation: pp-new 1.8s ease-out; }
@keyframes pp-new {
  0%, 35% { box-shadow: 0 0 0 3px var(--color-accent), var(--shadow-card); }
  100%    { box-shadow: 0 0 0 3px transparent, var(--shadow-card); }
}

.pp-board {
  display: block; padding: 12px 12px 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pp-board .pb {
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .4);
  transition: transform .15s ease;
}
.pp-board:hover .pb { transform: translateY(-2px); }
.pp-board:focus-visible { outline: none; }
.pp-board:focus-visible .pb { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.pp-foot { display: flex; align-items: center; gap: 6px; padding: 10px 6px 12px 14px; min-height: 58px; }
.pp-name-wrap { flex: 1; min-width: 0; }
.pp-name {
  margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-name-input {
  width: 100%; box-sizing: border-box; margin: -3px 0 -2px -6px;
  font: inherit; font-size: 1rem; font-weight: 800; color: var(--color-text-primary);
  background: var(--color-bg); border: 1px solid var(--color-accent); border-radius: 6px;
  padding: 2px 6px; outline: none;
}
.pp-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: .8rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden;
}
.pp-turn { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.pp-turn.p1 { background: var(--p1); }
.pp-turn.p2 { background: var(--p2); }

.pp-more {
  flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px; color: var(--color-text-muted); cursor: pointer;
}
.pp-more:hover, .pp-more[aria-expanded="true"] { background: var(--color-surface-raised); color: var(--color-text-primary); }
.pp-more svg { width: 18px; height: 18px; }

/* The card's menu: under its ⋯, right-aligned to the card. */
.pp-menu {
  position: absolute; right: 8px; bottom: 52px; z-index: 20; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px;
  background: #1b1b1b; border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
}
.pp-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: 8px; padding: 9px 10px;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--color-text-primary);
  text-align: left; cursor: pointer;
}
.pp-menu button:hover, .pp-menu button:focus-visible { background: var(--color-surface-raised); outline: none; }
.pp-menu button svg { width: 16px; height: 16px; flex: none; color: var(--color-text-muted); }
.pp-menu .pp-danger { color: #e0796b; }
.pp-menu .pp-danger svg { color: #e0796b; }
.pp-menu hr { border: 0; border-top: 1px solid var(--color-border); margin: 4px 2px; }

/* ---- loading: the grid's shape, before the boards ------------------------- */
.pp-card.is-skeleton { pointer-events: none; }
.pp-skel-board, .pp-skel-line {
  background: linear-gradient(90deg, #2a2a2a 0%, #333 50%, #2a2a2a 100%);
  background-size: 200% 100%; animation: pp-shimmer 1.3s linear infinite;
}
.pp-skel-board { margin: 12px 12px 0; aspect-ratio: 1; border-radius: 8px; }
.pp-skel-line { height: 12px; border-radius: 6px; margin: 14px 14px 0; width: 55%; }
.pp-skel-line + .pp-skel-line { width: 35%; margin: 8px 14px 18px; }
@keyframes pp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .pp-skel-board, .pp-skel-line, .pp-card.is-new { animation: none; }
}

/* ---- the empty, signed-out and failed states ------------------------------ */
.pp-state {
  margin: 4vh auto 0; max-width: 460px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 34px 28px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.pp-state-art { width: 132px; }
.pp-state-art .pb { border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.pp-state-ico { color: #e0524a; }
.pp-state h2 { margin: 6px 0 0; font-size: 1.3rem; font-weight: 800; }
.pp-state p { margin: 0; color: var(--color-text-muted); line-height: 1.5; font-size: .95rem; }
.pp-state-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.pp-state-actions .btn { text-decoration: none; }

/* ---- phones --------------------------------------------------------------- */
@media (max-width: 600px) {
  .pp-shell { padding-left: max(14px, env(safe-area-inset-left));
              padding-right: max(14px, env(safe-area-inset-right)); gap: 16px; }
  .pp-title { font-size: 1.55rem; }
  .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pp-board { padding: 8px 8px 0; }
  .pp-foot { padding: 8px 2px 10px 10px; min-height: 52px; }
  .pp-name { font-size: .92rem; }
  .pp-meta { font-size: .74rem; }
  .pp-from { display: none; }
  .pp-menu { right: 4px; bottom: 46px; }
  .pp-skel-board { margin: 8px 8px 0; }
}
@media (max-width: 820px) {
  /* The rail is a drawer behind the bar along the top at this width. */
  .pp-head-actions .pp-act-label { display: none; }
}
/* Inside the app the tab bar is the navigation; the page just clears it. */
body.pp-body.has-tabbar .pp-shell { padding-top: calc(14px + env(safe-area-inset-top)); }

/* ==========================================================================
   EXPLORE WITH A POSITION IN IT  (index.html, body.learn-mode)
   ==========================================================================
   The panel beside the learning board, top to bottom:

     the file bar    what is open, where it stands, and Save      (.xf-*)
     the tabs        Moves | Games, then the engine's own controls
     the engine      its top lines                    (styles.css, unchanged)
     the list        the moves and notes, or the games            (.xg-*)
     the move bar    what can be done to the selected move        (.xm-*)
     the board bar   to move, play the engine, new board          (.learn-bar)
     the way out     Done, and the step arrows

   Each row is one job and says which. They used to be one two-row cluster
   under the moves - turn switch, Save, Note, Clear, in that order, all the
   same grey - with no name on the file and nothing to show it had changed.

   One rule of colour: green means "this will be saved if you press it". So
   Save is green only while there is something to save, and Done, which was
   green all the time, is not.

   All of it is the website's and a phone browser's. The app's analyzer is a
   different layout (css/analyzer-app.css) that moves the moves view out of
   this card; these rows travel with whichever container holds them.
   ========================================================================== */

/* ---- the file bar ----------------------------------------------------------- */
.xf-bar { display: none; }
body.learn-mode .xf-bar {
  position: relative;                 /* the menu hangs off it */
  display: flex; align-items: center; gap: 8px; flex: none;
  box-sizing: border-box; min-height: 58px; padding: 9px 8px 9px 14px;
  background: #262626;
}
/* It is the card's first child now, so the tab row under it is not - and takes
   the hairline every later section takes. Outside Explore the bar is not
   there and the tabs are the head of the card again, as they were. */
body:not(.learn-mode) .rv-card > .rv-tabs { border-top: 0; }

.xf-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.xf-name {
  max-width: 100%; margin: 0 0 0 -5px; padding: 1px 5px;
  background: none; border: 0; border-radius: 5px;
  font: inherit; font-size: 15.5px; font-weight: 800; line-height: 1.25;
  color: var(--color-text-primary); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: text;
}
.xf-name:hover:not(:disabled) { background: var(--color-surface-raised); }
.xf-name:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
/* A board nobody has saved has no name yet, and nothing to rename. */
.xf-name:disabled { cursor: default; color: var(--color-text-muted); font-weight: 700; }
.xf-name-input {
  width: 100%; box-sizing: border-box; margin: -1px 0 -1px -5px; padding: 1px 5px;
  font: inherit; font-size: 15.5px; font-weight: 800; line-height: 1.25;
  color: var(--color-text-primary); background: var(--color-bg);
  border: 1px solid var(--color-accent); border-radius: 5px; outline: none;
}
/* Where the file stands, with a dot that says it before the words do. */
.xf-status {
  display: flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: 12px; line-height: 1.3; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xf-status::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: #5c5c56;
}
.xf-status[data-state="saved"]::before { background: var(--color-accent); }
.xf-status[data-state="dirty"] { color: #e6b455; font-weight: 600; }
.xf-status[data-state="dirty"]::before { background: #e6b455; }
.xf-status[data-state="error"] { color: #e0796b; font-weight: 600; }
.xf-status[data-state="error"]::before { background: #e0796b; }
.xf-status[data-state="busy"]::before { background: #e6b455; animation: xf-pulse 1s ease-in-out infinite; }
@keyframes xf-pulse { 50% { opacity: .3; } }

/* Save. Green while there is something to save; a quiet "Saved" when there is
   not, which is a state to read rather than a button to press. */
.xf-save {
  flex: none; height: 36px; padding: 0 13px; gap: 6px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.xf-save:hover { transform: none; }
.xf-save.primary { box-shadow: none; }
.xf-save:disabled { cursor: default; }
.xf-save.is-saved {
  background: transparent; border-color: transparent; color: var(--color-text-muted);
}
.xf-save[aria-busy="true"] { opacity: .7; }

.xf-more, .xf-undo {
  flex: none; width: 34px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--color-text-muted); cursor: pointer;
}
.xf-more:hover, .xf-more[aria-expanded="true"],
.xf-undo:hover:not(:disabled) { background: var(--color-surface-raised); color: var(--color-text-primary); }
.xf-more:focus-visible, .xf-undo:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
/* Undo: the change it takes back is in its title. Greyed, not gone. */
.xf-undo { color: var(--color-text-primary); }
.xf-undo:disabled { opacity: .3; cursor: default; }

/* The menu: under the dots, right-aligned to the bar. Each row is the thing it
   does, with a line under it for what that means here - or why it cannot. */
.xf-menu {
  position: absolute; top: calc(100% - 4px); right: 8px; z-index: 40;
  width: min(264px, calc(100% - 16px)); box-sizing: border-box;
  display: flex; flex-direction: column; padding: 6px;
  background: #1b1b1b; border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
}
.xf-menu button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  background: none; border: 0; border-radius: 7px; padding: 8px 10px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--color-text-primary);
  text-align: left; cursor: pointer;
}
.xf-menu button:hover:not(:disabled), .xf-menu button:focus-visible { background: var(--color-surface-raised); outline: none; }
.xf-menu button:disabled { color: #6c6c66; cursor: default; }
.xf-menu-hint { font-size: 11.5px; font-weight: 500; color: var(--color-text-muted); }
.xf-menu button:disabled .xf-menu-hint { color: #5c5c56; }
.xf-menu .xf-danger { color: #e0796b; }
.xf-menu hr { border: 0; border-top: 1px solid var(--color-border); margin: 4px 2px; align-self: stretch; }

/* ---- the Games tab, and what it shows --------------------------------------- */
.rv-tab-games { display: none; }
body.learn-mode .rv-tab-games { display: inline-flex; }

.xg { display: none; }
body.learn-mode .review-panel.pane-games .rv-view .review-list { display: none; }
/* In the list's place, and its size: the same well, the same share of the
   panel's height, so picking the tab moves nothing around it. */
body.learn-mode .review-panel.pane-games .xg {
  display: flex; flex-direction: column; flex: 1 1 0; min-height: 120px; overflow-y: auto;
  background: #191919; padding: 10px; border-bottom: 1px solid var(--color-border);
}
.xg-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 0 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.xg-sum { font-variant-numeric: tabular-nums; }
.xg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.xg-move {
  width: 100%; display: grid; align-items: center; gap: 4px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "san games" "bar bar";
  background: #242424; border: 1px solid transparent; border-radius: 0;
  padding: 7px 10px; color: var(--color-text-primary); font: inherit; text-align: left;
  cursor: pointer;
}
.xg-move:hover { background: #2b2b2b; border-color: rgba(255, 255, 255, .16); }
.xg-move:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -1px; }
.xg-san { grid-area: san; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xg-games { grid-area: games; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* White's share and Blue's, in the pawns' own colours. There are no draws in
   Quoridor, so two segments are the whole result. */
.xg-bar {
  grid-area: bar; display: flex; height: 16px; overflow: hidden;
  font-size: 11px; font-weight: 800; line-height: 16px;
}
.xg-bar span { display: block; min-width: 0; overflow: hidden; white-space: nowrap; padding: 0 5px; }
.xg-bar .w { background: var(--p1); color: #3a3426; }
.xg-bar .b { background: var(--p2); color: #10202c; text-align: right; }
.xg-note { margin: 2px 2px 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.xg-note[hidden] { display: none; }
.xg-link {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--color-accent-hover); cursor: pointer;
}
.xg-link:hover { text-decoration: underline; }

/* ---- the move bar ------------------------------------------------------------
   Outside Explore the row is not a row at all: its one shared control (the way
   back to the main line) lays out in the foot exactly as it did before. */
.xm-bar { display: contents; }
.xm-on, .xm-btn { display: none; }
/* ONE row, whatever move is selected: the buttons never wrap, and the label
   is the one thing that gives - it was "10. e5v" pushing Main line onto a
   second line that made the row look broken. */
body.learn-mode .xm-bar {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; min-height: 28px;
}
/* Which move the buttons are about, with the dot of the side that played it. */
body.learn-mode .xm-on {
  display: block; flex: 0 1 auto; min-width: 0; margin-right: auto; padding-right: 4px;
  font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xm-on.p1::before, .xm-on.p2::before {
  content: ""; display: inline-block; vertical-align: -1px; margin-right: 7px;
  width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
}
.xm-on.p1::before { background: var(--p1); border: 1.5px solid var(--p1-ring); }
.xm-on.p2::before { background: var(--p2); border: 1.5px solid var(--p2-ring); }
body.learn-mode .xm-btn,
body.learn-mode .xm-bar > #back-to-main {
  display: inline-flex; align-items: center; gap: 5px; align-self: center; flex: none;
  height: 28px; padding: 0 8px; box-sizing: border-box;
  border: 1px solid var(--color-border); border-radius: 0;
  background: #262626; color: var(--color-text-primary);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  cursor: pointer; transition: var(--transition-fast); transform: none; box-shadow: none;
}
/* Every button in the row is a word; the arrow the analyzer's Main line
   wears is not needed here. */
body.learn-mode .xm-bar > #back-to-main .btm-arrow { display: none; }
body.learn-mode .xm-btn:hover:not(:disabled),
body.learn-mode .xm-bar > #back-to-main:hover:not(:disabled) { background: #303030; }
body.learn-mode .xm-btn:focus-visible,
body.learn-mode .xm-bar > #back-to-main:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
body.learn-mode .xm-btn:disabled,
body.learn-mode .xm-bar > #back-to-main:disabled { opacity: .38; cursor: default; }
/* The note box is open on this move... */
body.learn-mode .xm-btn.is-on { border-color: var(--color-accent); color: var(--color-accent-hover); }
/* ...and this move has a note, open or not. */
.xm-btn.has-note::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-hover);
}
body.learn-mode #xm-delete:hover:not(:disabled) { color: #e0796b; border-color: rgba(224, 121, 107, .45); }

body.learn-mode .learn-note:not(.hidden) { margin-top: 0; }
.learn-note-text { border-radius: 0; }

/* ---- the board bar -----------------------------------------------------------
   A hairline above it, edge to edge: what is over the line is about a move,
   what is under it is about the board. */
body.learn-mode .learn-bar {
  margin: 1px -10px 0; padding: 8px 10px 0;
  border-top: 1px solid var(--color-border);
}
.learn-seg { border-radius: 0; padding: 2px; }
.learn-seg .seg-btn { padding: 4px 10px; font-size: 13px; border-radius: 0; }
.learn-bar .xt-engine { margin-left: auto; }
.learn-bar .btn.small {
  height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 0;
  align-self: center; white-space: nowrap; transform: none;
}
.learn-bar .xt-engine.is-on {
  background: rgba(90, 158, 63, .2); border-color: var(--color-accent); color: var(--color-accent-hover);
}
.learn-bar .xt-engine.is-thinking { opacity: .7; }

/* ---- the list ------------------------------------------------------------- */
/* Nothing on the board yet: what the list is for, where the moves will go. */
.review-empty {
  list-style: none; padding: 8px 6px; font-size: 13px; line-height: 1.5;
  color: var(--color-text-muted);
}
.review-empty-link {
  margin-top: 6px; padding: 0; background: none; border: 0;
  font: inherit; font-weight: 700; color: var(--color-accent-hover); cursor: pointer;
}
.review-empty-link:hover { text-decoration: underline; }
/* The board the position is saved on - what its card shows, and where it
   opens - wears the bookmark the Positions row in the rail does. */
.review-move.is-key::after, .rv-move.is-key::after {
  content: ""; flex: none; width: 9px; height: 12px;
  background: #e0524a;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.rv-move.is-key::after { display: inline-block; margin-left: 5px; vertical-align: -1px; width: 7px; height: 10px; }

/* ---- the way out -------------------------------------------------------------
   Done was the panel's one green button, which made leaving the loudest thing
   on it. Save has that colour now, and only when it has a job. */
body.learn-mode .rv-card > .controls #exit-review-btn {
  background: var(--color-surface-raised); color: var(--color-text-primary);
  border-color: var(--color-border); box-shadow: none;
}
body.learn-mode .rv-card > .controls #exit-review-btn:hover { background: #383838; }

/* ---- before the scripts arrive ------------------------------------------------
   index.html puts Explore's layout on the page before its first paint when it
   was opened by a link, and holds it with `learn-boot` until the board is up
   (see the note at the top of its <body>). What is held is the SHAPE - the
   rail, the board where it will be, the panel as an empty card - and none of
   the words: the panel's markup still says "New position" and "Back to game"
   at that point, and a frame of the wrong words is the flicker this exists to
   remove. */
body.learn-boot #panel,
body.learn-boot #board-cta { display: none !important; }
body.learn-boot #review-panel.hidden { display: flex !important; }
body.learn-boot #eval-bar.hidden { display: block !important; }
body.learn-boot .rv-card > * { visibility: hidden; }
body.learn-boot .seat-bar > * { visibility: hidden; }
/* A phone's two rows either side of the board - the ticker over it and the
   arrows under it - keep their room and show nothing, so the board is drawn
   where it is going to stay. */
body.learn-boot .rv-strip,
body.learn-boot .rv-steps { visibility: hidden; }
/* The rail's wordmark is drawn by a script too (js/app-header.js), and drawn
   more than twice the height of the placeholder it replaces - so every row of
   the rail dropped 48px a moment after the page appeared. The placeholder
   holds the drawn mark's box instead: 83px is that box, measured (the lockup
   at 30px, the row's padding, its divider). If the lockup changes size this
   is a few pixels out for one frame, which is what it was fixing anyway. */
@media (min-width: 821px) {
  body.learn-boot .side-rail .rail-brand:not(.qb-host) {
    box-sizing: border-box; height: 83px; margin-left: -8px; margin-right: -8px;
  }
  body.learn-boot .side-rail .rail-brand:not(.qb-host) > * { visibility: hidden; }
}
/* ...and when the board is up, what was held back comes in over a fifth of a
   second rather than all on one frame (main.js startLearnMode sets the class
   for that long). */
body.learn-in .rv-card > *,
body.learn-in .seat-bar > *,
body.learn-in .pawns-layer,
body.learn-in .walls-layer { animation: learn-in .2s ease-out both; }
@keyframes learn-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.learn-in .rv-card > *,
  body.learn-in .seat-bar > *,
  body.learn-in .pawns-layer,
  body.learn-in .walls-layer { animation: none; }
}

/* ---- a phone ------------------------------------------------------------------ */
@media (max-width: 820px) {
  /* The analyzer drops its move list on a phone: a played game is one line,
     and the ticker over the board carries it. A position's file is not one
     line - its variations and its notes exist nowhere but the list - so on
     the learning board the list stays, in the page's own flow rather than as
     a scroll window inside it (which is what it was dropped for). */
  body.review-mode.learn-mode .rv-view .review-list {
    display: block; flex: none; min-height: 0; max-height: none; overflow: visible;
  }
  body.review-mode.learn-mode .review-panel.pane-games .rv-view .review-list { display: none; }
  body.review-mode.learn-mode .review-panel.pane-games .xg {
    flex: none; min-height: 0; overflow: visible;
  }
  body.review-mode.learn-mode .rv-moves-foot { border-top: 1px solid var(--color-border); }
  /* Thumb-sized. */
  body.learn-mode .xf-bar { padding: 10px 6px 10px 12px; }
  .xf-save { height: 40px; }
  .xf-more { width: 40px; height: 40px; }
  .learn-bar .btn.small { height: 36px; padding: 0 12px; font-size: 13.5px; }
  /* The move bar keeps its one row on a phone too: thumb-high, but no wider
     than the words need. */
  body.learn-mode .xm-btn,
  body.learn-mode .xm-bar > #back-to-main { height: 36px; padding: 0 8px; font-size: 13px; }
  body.learn-mode .xm-bar { gap: 4px; }
  .xf-undo { width: 40px; height: 40px; }
  /* Room for Undo without cutting "Unsaved changes" short: on a phone Save
     is its words alone. */
  .xf-save .pos-save-ic { display: none; }
  .learn-seg .seg-btn { padding: 8px 12px; }
  /* The label is the one thing on the board bar that can give. */
  body.review-mode.learn-mode .learn-bar-label { display: none; }
  .xf-menu { right: 6px; }
  .xf-menu button { padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .xf-status[data-state="busy"]::before { animation: none; }
}