/* Puzzles, Today drills and Endgames. A 48px strip on top, the board left (with the eval bar), the task right. */

.puzzles-page {
    --pad: 24px;
    --bar: 10px;
    --bar-gap: 10px;
    --col-gap: 48px;
    --side-min: 400px;
    --strip: 48px;
    --sidebar: 232px;
    --top: 0px;
    /* Small SVG icons, used as masks so they take the colour of the text around them */
    --icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5L14 13H2z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.5' fill='black'/%3E%3C/svg%3E");
    /* Board: as tall as the screen allows under the strip, never wider than what is left beside the panel and the sidebar */
    --board-size: min(900px, calc(100vh - var(--top) - var(--strip) - 2 * var(--pad) - 112px), calc(100vw - var(--sidebar) - 2 * var(--pad) - var(--bar) - var(--bar-gap) - var(--col-gap) - var(--side-min)));
    padding: 0;
}

/* Top strip: breadcrumb left, session or mode tabs in the middle, shortcuts hint right */
.keys-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--fs-xs);
    color: var(--ink-3);
    cursor: pointer;
}

.keys-toggle:hover { color: var(--ink); }

/* Small shortcuts sheet, opened with ? */
.keys-sheet {
    position: absolute;
    top: calc(100% + 4px);
    right: var(--pad);
    z-index: 50;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: var(--rule);
    border-radius: var(--radius-card);
    background: var(--surface-2);
    font-size: var(--fs-xs);
    color: var(--ink-2);
}

.keys-sheet dt { white-space: nowrap; }
.keys-sheet dd { margin: 0; }

/* Mode tabs and the theme filter, compact */
.mode-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mode-row .chip {
    min-height: 28px;
    padding: 4px 12px;
    font-size: var(--fs-sm);
}

.mode-row .fc-select {
    flex: 0 0 160px;
}

.mode-row .fc-select-button {
    min-height: 28px;
    padding: 4px 10px;
    font-size: var(--fs-sm);
}

.mode-note {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.mode-note:empty { display: none; }

.puzzles-layout {
    display: grid;
    grid-template-columns: auto minmax(var(--side-min), 440px);
    gap: var(--col-gap);
    align-items: start;
    justify-content: center;
    padding: var(--pad);
}

.board-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.navtext {
    margin-left: auto;
    padding: 0 var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
}

.navtext:hover { color: var(--ink); }

.puzzle-board {
    width: var(--board-size);
    max-width: none;
}

/* Status pop, side panel enter and streak tick. JS restarts them by removing and re-adding the class. */
.status-pop {
    animation: status-pop 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.side-enter {
    animation: side-enter 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.streak-tick {
    transform-origin: left center;
    animation: streak-tick 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes status-pop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: none; }
}

@keyframes side-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes streak-tick {
    from { transform: scale(1); }
    50% { transform: scale(1.08); }
    to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .status-pop,
    .side-enter,
    .streak-tick { animation: none; }
}

/* The value shows in the hover tip; the number under the bar is not drawn */
.eval-num { display: none; }

/* The panel is as tall as the board, so "Up next" sits at the bottom */
.side-col {
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.puzzle-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.layout--list {
    grid-template-columns: minmax(0, 760px);
}

.layout--list .board-col {
    display: none;
}

/* Sign-in banner: one quiet line */
.signin-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--hair);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.signin-banner span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signin-banner .btn {
    flex-shrink: 0;
    min-height: 32px;
    padding: 4px var(--space-3);
    font-size: var(--fs-sm);
}

/* Kind tag and context line */
.context-line {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
    line-height: 24px;
    color: var(--ink-2);
}

.kind-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 2px;
    padding: 1px 8px 1px 6px;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    vertical-align: middle;
}

.kind-tag:has(.mark-sq) { background: rgba(248, 113, 113, 0.12); color: var(--red); }
.kind-tag:has(.mark-tri) { background: rgba(251, 191, 36, 0.12); color: var(--yellow); }
.kind-tag:has(.mark-ci) { background: var(--blue-soft); color: var(--blue); }
.kind-tag:has(#puzzle-kicker-text:empty) { display: none; }

/* Marks as small icons: the status line, the kind tag, and dots in "Up next" and Done */
.status [class*="mark-"],
.kind-tag [class*="mark-"],
.queue-list [class*="mark-"],
.done-list [class*="mark-"] {
    width: 12px;
    height: 12px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: var(--icon-dot) center / contain no-repeat;
    mask: var(--icon-dot) center / contain no-repeat;
}

.kind-tag .mark-sq { -webkit-mask-image: var(--icon-cross); mask-image: var(--icon-cross); }
.kind-tag .mark-tri { -webkit-mask-image: var(--icon-triangle); mask-image: var(--icon-triangle); }

.queue-list [class*="mark-"],
.done-list [class*="mark-"] {
    width: 8px;
    height: 8px;
}

.queue-list .mark-sq,
.done-list .mark-sq { background: var(--red); }
.queue-list .mark-tri,
.done-list .mark-tri { background: var(--yellow); }
.queue-list .mark-ci,
.done-list .mark-ci { background: var(--blue); }

/* The task: heading, rating, what was played */
.heading-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}

.heading-row h2 {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--fs-2xl);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* The kind tag already says what this is */
#puzzle-mark { display: none; }

.rating-tag {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
}

.played-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.played-line .eval-chip {
    padding: 1px 6px;
    font-size: var(--fs-xs);
}

.played-line .eval-chip.bad {
    border-color: transparent;
    background: rgba(248, 113, 113, 0.14);
    color: var(--red);
}

.eval-arrow {
    position: relative;
    width: 12px;
    height: 1px;
    background: var(--ink-3);
}

.eval-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -2px;
    width: 5px;
    height: 5px;
    border-top: 1px solid var(--ink-3);
    border-right: 1px solid var(--ink-3);
    transform: rotate(45deg);
}

/* Status: an inline icon, colour and text. No box. */
.status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--hair);
}

.status [class*="mark-"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.status .mark-tri { background: var(--blue); -webkit-mask-image: var(--icon-chevron); mask-image: var(--icon-chevron); }
.status .mark-sq { background: var(--red); -webkit-mask-image: var(--icon-cross); mask-image: var(--icon-cross); }
.status .mark-ci { background: var(--green); -webkit-mask-image: var(--icon-check); mask-image: var(--icon-check); }

.status-text {
    flex: 1;
    min-width: 0;
}

.status-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.5;
}

.status-detail {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.delta-chip {
    flex-shrink: 0;
    font-size: var(--fs-sm);
}

.rating-line {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.note-text,
.prep-line,
.solution-text {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-md);
    line-height: 1.5;
}

.note-text:empty { display: none; }
.prep-line { font-weight: 600; }
.solution-text {
    font-family: var(--font-mono);
    font-weight: 500;
}

.tactic-line {
    margin: var(--space-3) 0 0;
    font-weight: 500;
}

.themes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
}

.themes span {
    padding: 1px var(--space-2);
    border: 1px solid var(--hair-strong);
    border-radius: 4px;
    font-size: var(--fs-xs);
    color: var(--ink-2);
}

/* Actions: Hint, Solution, Next with their keys. Cyan only for the obvious next step (JS sets .primary). */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--hair);
}

.actions .btn {
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    font-size: var(--fs-sm);
}

.actions .btn::after {
    content: attr(data-key);
    min-width: 18px;
    padding: 0 5px;
    border: 1px solid var(--hair-strong);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
}

.actions .btn.primary::after {
    border-color: rgba(6, 20, 22, 0.35);
    background: transparent;
    color: var(--on-accent);
}

.actions .btn[data-key=""]::after,
.actions #endgame-all::after { content: none; }

#puzzle-solution,
#puzzle-next:not(.primary),
#puzzle-retry:not(.primary),
#endgame-retry,
#endgame-all {
    border-color: transparent;
    background: transparent;
    color: var(--ink-2);
}

#puzzle-solution:hover:not(:disabled),
#puzzle-next:not(.primary):hover:not(:disabled),
#puzzle-retry:not(.primary):hover:not(:disabled),
#endgame-retry:hover:not(:disabled),
#endgame-all:hover:not(:disabled) {
    border-color: transparent;
    background: var(--surface-2);
    color: var(--ink);
}

.btn-warn {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--ink-3);
}

/* This week's focus: one quiet line; the lesson shows on hover, focus or click */
.coach-focus {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
}

.coach-focus-line {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-3);
    font: inherit;
    font-size: var(--fs-xs);
    text-align: left;
    cursor: pointer;
}

.coach-focus-line:hover,
.coach-focus-line:focus-visible { color: var(--ink-2); }

.coach-focus-more {
    display: none;
    gap: 2px;
    margin-top: var(--space-2);
}

.coach-focus:hover .coach-focus-more,
.coach-focus:focus-within .coach-focus-more,
.coach-focus.open .coach-focus-more { display: grid; }

.coach-focus-more > * { margin: 0; }
.coach-focus-more > :nth-child(2) { font-size: var(--fs-xs); color: var(--ink-3); }
.coach-focus-more > :nth-child(3) { color: var(--ink-2); }

.coach-focus-kicker {
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.coach-focus .btn {
    justify-self: start;
    margin-top: var(--space-2);
    min-height: 28px;
    padding: 3px 10px;
    font-size: var(--fs-xs);
}

/* Hidden entirely while the walkthrough is open */
.puzzle-detail:has(.walk:not(.hidden)) .coach-focus { display: none; }

/* Review state, after any drill attempt: status, then the explanation, then the actions */
.puzzle-detail.is-review > * { order: 6; }
.puzzle-detail.is-review > .drill-card { order: 0; }
.puzzle-detail.is-review > .status { order: 1; }
.puzzle-detail.is-review > .walk,
.puzzle-detail.is-review > .followup { order: 2; }
.puzzle-detail.is-review > .puzzle-why { order: 3; }
.puzzle-detail.is-review > .actions { order: 4; }
.puzzle-detail.is-review > .coach-focus { order: 7; }

/* The walkthrough already answers Why? and has the action row's Try again below it */
.puzzle-detail:has(.walk:not(.hidden)) .puzzle-why,
.puzzle-detail.is-review #walk-retry { display: none; }

/* Why?, walkthrough, follow-up: same spacing language, no rules */
.puzzle-why {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Loading state: still readable at AA */
.puzzle-why .btn:disabled {
    background: var(--surface);
    color: var(--ink-2);
    opacity: 1;
}

.why-box {
    flex-basis: 100%;
    margin-top: var(--space-2);
}

.why-text {
    margin: 0;
    line-height: 1.5;
    color: var(--ink-2);
}

.why-source {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.followup {
    margin-top: 0;
}

.followup-block {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--hair);
}

/* Every section label in the panel: "You walked into a tactic", "Best play continues", "Up next" */
.section-label {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-2);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
}

.followup-block .section-label { margin-bottom: var(--space-2); }

/* A move in running text */
.mv {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--ink);
}

.followup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}

.followup-chip {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
}

.followup-chip:hover { color: var(--blue); }
.followup-chip.active { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.followup-eval {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

/* "What went wrong?" walkthrough of a mistake card */
.walk {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--hair);
}

.walk-step {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.walk-caption {
    margin: 0 0 var(--space-1);
    font-weight: 500;
}

.walk-detail:empty { display: none; }

.walk-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.walk-buttons .btn,
.puzzle-why .btn {
    min-height: 32px;
    padding: 4px 12px;
    font-size: var(--fs-sm);
}

/* Endgames list: one row per drill */
.endgame-list {
    margin-top: var(--space-2);
}

.endgame-list h2 {
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--fs-lg);
}

.endgame-list > p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.endgame-list > p:empty { display: none; }

#endgame-groups h2:first-child {
    margin-top: var(--space-4);
}

.endgame-items {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hair);
}

.endgame-items li + li {
    border-top: 1px solid var(--hair);
}

.endgame-row {
    display: grid;
    grid-template-columns: 18px minmax(150px, 1fr) 130px 200px;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-ctl);
    background: transparent;
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-md);
    text-align: left;
    cursor: pointer;
}

.endgame-row:hover { background: var(--surface-2); }
.endgame-row:focus-visible { outline-offset: -3px; }

.endgame-name { font-weight: 600; }

.endgame-goal,
.endgame-last {
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.endgame-last.is-due {
    color: var(--ink);
    font-weight: 600;
}

.endgame-row .mark-sq,
.endgame-row .mark-ci,
.endgame-row .mark-new {
    justify-self: center;
}

/* Done for today: a calm summary, the numbers large and mono */
.puzzle-done {
    max-width: 520px;
    margin-top: var(--space-6);
}

.puzzle-done h2 {
    margin: 0 0 var(--space-5);
    font-size: var(--fs-2xl);
}

.done-list {
    display: grid;
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.done-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: 500;
}

.done-list li .eval-chip {
    font-size: var(--fs-sm);
}

.done-streak {
    margin: 0 0 var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--fs-3xl);
    font-weight: 500;
    color: var(--blue);
}

.done-streak:empty { display: none; }

.muted { color: var(--ink-2); }

/* Up next: quiet rows at the bottom of the panel */
.queue {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--hair);
}

.queue summary {
    display: flex;
    min-height: 32px;
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-2);
    list-style: none;
    cursor: pointer;
}

.queue summary::-webkit-details-marker { display: none; }

.queue-count { display: none; }

.queue-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.queue-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--hair);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.queue-label {
    flex: 1;
    min-width: 0;
}

.queue-when {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

/* Work mode (the 56px rail) is set on body by index.js on every board screen */
@media (min-width: 1209px) {
    body.work-mode .puzzles-page,
    body.rail-collapsed .puzzles-page { --sidebar: 56px; }
}

/* Narrow laptop and tablet: the sidebar is the 56px rail (nav-rail.css); phone has the bottom tab bar */
@media (min-width: 761px) and (max-width: 1208px) {
    .puzzles-page {
        --sidebar: 56px;
        --top: 0px;
    }
}

@media (max-width: 1208px) {

    .strip { padding-left: var(--space-5); }
}

/* Not enough room for two columns: board on top, task below */
@media (max-width: 900px) {
    .puzzles-layout {
        grid-template-columns: minmax(0, 720px);
    }

    .puzzle-board {
        width: 100%;
        max-width: min(720px, 78vh);
    }

    .layout--list {
        grid-template-columns: minmax(0, 760px);
    }
}

/* Stacked tablet: keep the board short enough that the status shows in a 768px viewport */
@media (min-width: 761px) and (max-width: 900px) {
    .puzzle-board {
        max-width: min(720px, 52vh);
    }
}

@media (max-width: 760px) {
    .puzzles-page {
        --pad: 0px;
        --bar: 8px;
        --bar-gap: 4px;
        --top: 0px;
        --sidebar: 0px;
        padding: 0 0 88px;
    }

    /* Compact strip: breadcrumb and count on one row, the tabs or the session segments under them */
    .strip {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--strip);
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2) var(--space-3);
    }

    .strip-crumb { flex: 1 1 auto; }

    .strip-mid:has(.steps.hidden) { justify-content: stretch; }

    .mode-row { flex: 1 1 100%; }

    .mode-row .segmented {
        display: flex;
        flex: 1 1 100%;
    }

    .mode-row .chip {
        flex: 1;
        min-height: 36px;
        padding: 6px 4px;
        font-size: var(--fs-sm);
        white-space: nowrap;
    }

    /* Board first at full width, the status under it, the action bar pinned over the tab bar */
    .puzzles-layout:not(.layout--list) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-3);
    }

    .puzzles-layout:not(.layout--list) .side-col,
    .puzzles-layout:not(.layout--list) .puzzle-detail {
        display: contents;
    }

    .puzzles-layout:not(.layout--list) .board-col { order: 0; }
    /* Keep the left gutter only when the eval bar is there */
    .board-wrap { padding-left: 0; }
    .player-strip,
    .navrow { margin-left: 0; }
    .board-col:has(.has-eval) .player-strip,
    .board-col:has(.has-eval) .navrow { margin-left: calc(var(--bar) + var(--bar-gap)); }
    .board-wrap.has-eval { padding-left: calc(var(--bar) + var(--bar-gap)); }
    .puzzles-layout:not(.layout--list) .status { order: 1; margin-top: var(--space-3); }
    .puzzles-layout:not(.layout--list) .rating-line { order: 3; }
    .puzzles-layout:not(.layout--list) .note-text { order: 3; }
    .puzzles-layout:not(.layout--list) .heading-row { order: 4; margin-top: var(--space-4); }
    .puzzles-layout:not(.layout--list) .context-line { order: 5; margin: 0 0 var(--space-2); }
    .puzzles-layout:not(.layout--list) .played-line { order: 6; }
    .puzzles-layout:not(.layout--list) .tactic-line { order: 1; }
    .puzzles-layout:not(.layout--list) .prep-line { order: 7; }
    .puzzles-layout:not(.layout--list) .solution-text { order: 8; }
    .puzzles-layout:not(.layout--list) .themes { order: 9; }
    .puzzles-layout:not(.layout--list) .puzzle-why { order: 10; }
    .puzzles-layout:not(.layout--list) .coach-focus { order: 10; margin-top: var(--space-4); }
    .puzzles-layout:not(.layout--list) .followup { order: 11; }
    .puzzles-layout:not(.layout--list) .walk { order: 1; }
    .puzzles-layout:not(.layout--list) .drill-card { order: 4; margin-top: var(--space-4); }
    .puzzles-layout:not(.layout--list) .is-review > .drill-card { order: 1; margin-top: var(--space-3); }
    .puzzles-layout:not(.layout--list) .is-review > .status { order: 2; margin-top: var(--space-2); }
    .puzzles-layout:not(.layout--list) .is-review > .walk,
    .puzzles-layout:not(.layout--list) .is-review > .followup { order: 3; }
    .puzzles-layout:not(.layout--list) .queue { order: 12; margin-top: var(--space-3); padding-top: 0; }
    .queue-count { display: inline; }
    .puzzles-layout:not(.layout--list) .signin-banner { order: 11; margin-top: var(--space-4); }
    .puzzles-layout:not(.layout--list) .mode-note { order: 14; }

    .actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom));
        z-index: 800;
        flex-wrap: nowrap;
        margin: 0;
        padding: var(--space-2);
        background: var(--surface);
        border-top: 1px solid var(--hair);
    }

    .actions .btn {
        flex: 1;
        min-height: 48px;
        padding: 4px var(--space-1);
        font-size: var(--fs-sm);
        line-height: 1.15;
    }

    .actions .btn::after { content: none; }

    .actions .act-solution { flex: 2.2; flex-direction: column; gap: 0; }
    .actions .btn.primary { flex: 1.4; }
    .btn-warn { display: block; font-size: var(--fs-xs); }

    .keys-hint,
    .keys-sheet { display: none; }

    .endgame-row {
        grid-template-columns: 18px 1fr auto;
        row-gap: 0;
        min-height: 64px;
    }

    .endgame-name { grid-column: 2 / 4; }
    .endgame-goal { grid-column: 2; }
    .endgame-last { grid-column: 3; text-align: right; }
}

@media (pointer: coarse) {
    .keys-hint,
    .keys-sheet { display: none; }

    .actions .btn::after { content: none; }
}