/* .screen (shared by every tab) is a row flex box, so each screen must hand
   it exactly one child that itself stacks vertically — otherwise a header
   plus a card would land side by side instead of one above the other. */
.memory-screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.memory-empty { padding: 20px 24px; gap: 12px; align-items: flex-start; }

/* Same shape as the login screen (css/login.css): a capped column centered in
   whatever width is left. Both boxes are mounted straight into .screen, which
   is a row flex box, so auto side margins on the item absorb the free space —
   without them the column sat against the left edge with 75% of a 2560px
   window empty beside it. */
.memory-select, .memory-summary {
  width: 100%;
  max-width: 35rem;
  margin: 0 auto;
  padding: 22px 24px;
  overflow-y: auto;
}

.memory-title { margin: 0 0 10px; font-size: 1.1875rem; }
.memory-intro { color: var(--muted); line-height: 1.55; margin: 0 0 16px; }

.memory-start { margin-top: 4px; }

.memory-summary-line { margin: 0 0 8px; line-height: 1.5; }

/* .section-filter (practice.css) ships 10px/12px padding meant for the top of
   a screen; the card/empty screens already have their own 24px horizontal
   rhythm (.memory-head, .memory-card), so this override lines the filter row
   up with them instead of sitting 12px off to the left. */
.memory-filter-row { padding: 12px 24px 0; }

.memory-switch-notice {
  margin: 10px 24px 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Замечание 1 (2026-07-28): everything below the (pinned, full-width) filter
   row centers as one column in whatever height is left — a wide window no
   longer leaves the card stranded top-left over empty space, and the two
   status lines now sit directly above the question they describe instead of
   being lost at the far top-left of a ~2000px screen. */
.memory-card-area {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 20px;
}

/* Single shared width for the status lines and the card. Дефект 2
   (2026-07-29): a flat 960px cap left a ~2000px-wide screen more than half
   empty on either side. A percentage of the available space (rather than a
   fixed pixel width) keeps narrow windows filling nearly all of it exactly
   as before, while a generous max-width caps how wide the card grows once
   the screen is wide enough for that percentage to exceed it — at ~2000px
   the 92% share alone would be ~1800px, so the cap is what actually applies,
   landing the card around 1400px, as opposed to the old 960px. */
.memory-card-inner { width: 92%; max-width: 87.5rem; }

.memory-head {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.memory-session-line { padding: 4px 24px 0; font-size: 0.6875rem; color: var(--muted); }

.memory-card { padding: 18px 24px 24px; }

.memory-question { font-size: 1rem; line-height: 1.5; margin: 0 0 16px; }

.memory-answer { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

/* Choice cards only (renderChoice adds this class alongside .memory-answer) —
   one column below ~1000px so 900/600px windows stay single-column per the
   Замечание 1 checklist, two columns above it where .memory-card-inner has
   room to actually fit them side by side. */
.memory-answer-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .memory-answer-grid { grid-template-columns: 1fr 1fr; }
}

.memory-option {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--fg);
  font: inherit;
  font-size: 0.8125rem;
  padding: 9px 12px;
  border-radius: 5px;
  cursor: pointer;
}
.memory-option:hover:not(:disabled) { background: rgba(128, 140, 160, 0.15); }
.memory-option:disabled { cursor: default; }
.memory-option-correct {
  border-color: var(--green);
  background: rgba(94, 194, 126, 0.12);
  color: var(--green);
}
.memory-option-wrong {
  border-color: var(--red);
  background: rgba(226, 104, 109, 0.12);
  color: var(--red);
}

.memory-input-hint { font-size: 0.75rem; color: var(--muted); margin-bottom: 6px; }
.memory-input {
  width: 100%;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 0.8125rem;
  padding: 8px 10px;
}
.memory-input:disabled { opacity: 0.7; }

.memory-feedback { min-height: 0; margin-bottom: 12px; line-height: 1.5; }
.memory-verdict { font-weight: 600; margin-bottom: 4px; }
.memory-feedback-good .memory-verdict { color: var(--green); }
.memory-feedback-bad .memory-verdict { color: var(--red); }

.memory-correct-form {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 8px;
  margin: 4px 0;
  display: inline-block;
}

.memory-layout-note { color: var(--red); font-size: 0.75rem; margin: 4px 0; }
.memory-why { color: var(--muted); margin-top: 6px; }

.memory-actions { display: flex; }