/* One dark navy look on every page, whatever the device's light or dark setting:
   the page colour is the welcome page chalkboard's own navy, with lighter navy panels */
:root {
  color-scheme: dark;
  /* Midnight blue, with lighter panels */
  --bg: #06122a;
  --surface: #0d1a35;
  --surface-2: #142441;
  --border: #233457;
  --text: #eef1f6;
  --text-2: #c0c8d6;
  --muted: #8f9bb0;
  --accent: #3a8ae8;
  --accent-text: #ffffff;
  --accent-soft: #132a50;
  --chart: #3a8ae8;
  --good: #1f7a45;
  --good-text: #5cc489;
  --bad: #b8322c;
  --bad-text: #ee8080;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.35);
  /* The app name: beige-gold */
  --brand: #e8cc8f;
  /* Flashcards are light against the dark page: a yellow front and a blue back, with dark text */
  --card-front: #fff7d6;
  --card-back: #e3f0ff;
  --card-border: #d9cfa8;
  --card-text: #1d2433;
  --card-label: #6b6658;
  --brand-font: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  overflow-x: clip; /* a swiped card flies off-screen without causing sideways scroll */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.25;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

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

/* ---------------- Layout ---------------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  /* Full width, so the name sits in the top-left corner of the window */
  width: 100%;
  padding: 20px 20px 16px;
}

/* Top-right: the photo above the name, which opens the profile menu */
.account {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-left: auto;
  font-size: 0.95rem;
}

.profile-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 140px;
  padding: 2px 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.account-name {
  max-width: 100%;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-btn:hover .avatar,
.profile-btn[aria-expanded="true"] .avatar {
  border-color: var(--accent);
}

/* After logging in, the name and slogan lead back to studying */
body[data-stage="app"] .brand {
  cursor: pointer;
}

/* Drop-down menus: the profile menu, and the + menu on phones */
.popup-menu {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}

.profile-menu {
  right: 0;
}

.menu-user,
.menu-guest {
  display: flex;
  flex-direction: column;
}

.profile-menu .menu-guest,
.profile-menu.for-guest .menu-user {
  display: none;
}

.profile-menu.for-guest .menu-guest {
  display: flex;
}

.popup-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  cursor: pointer;
}

/* Buttons that add a card, create a deck or import one: the same icon before the text,
   everywhere */
button.with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.popup-menu button.with-icon {
  justify-content: flex-start;
}

/* "Soon" stays on the right of an item with an icon */
.popup-menu button.with-icon .soon {
  margin-left: auto;
}

.action-icon,
.action-icon svg {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}

.popup-menu button:hover:not(:disabled),
.popup-menu button:focus-visible {
  background: var(--surface-2);
}

.popup-menu button:disabled {
  color: var(--muted);
  cursor: default;
}

/* Log Out is set apart from the rest */
#logoutItem,
#guestLeaveItem {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
}

.soon {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.72rem;
}

/* A profile photo, a ready-made avatar, or the name's first letter */
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--brand);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

/* The photo in the top-right corner */
.profile-btn .avatar {
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
}

.avatar svg,
.avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar .avatar-person {
  width: 70%;
  height: 70%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.avatar-large {
  width: 88px;
  height: 88px;
  font-size: 2.4rem;
}

/* ---------------- Pages: My Account ---------------- */

.page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

.back-link {
  align-self: flex-start;
  padding-inline: 0;
}

/* The privacy policy (privacy.html): a page of its own, outside the app */
.legal-page {
  gap: 6px;
  padding-top: 24px;
}

.legal-page h2 {
  margin: 22px 0 2px;
  font-size: 1.15rem;
}

.legal-page h3 {
  margin: 12px 0 0;
  font-size: 1rem;
}

.legal-page p,
.legal-page ul {
  margin: 4px 0;
}

.legal-page li + li {
  margin-top: 4px;
}

.legal-page a {
  color: var(--accent);
}

/* Parts of the draft still to be filled in */
.legal-page mark {
  padding: 0 3px;
  border-radius: 3px;
  background: #f6d860;
  color: #1d2433;
}

.legal-link {
  color: var(--text-2);
  font-size: 0.85rem;
}

.page-title {
  font-size: 1.4rem;
}

.page .panel {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.page-wide {
  max-width: 1100px;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------------- My Dashboard ---------------- */

/* Phones have a + beside the title; larger screens the three buttons, and tiles without
   descriptions */
.dash-add,
.deck-tile-description {
  display: none;
}

/* Phones: the decks in a list. The icon on the left; beside it the name, the description on
   one line (cut short with "…"), and the number of cards. */
@media (max-width: 760px) {
  #dashboardView .page-head {
    flex-wrap: nowrap;
  }
  #dashboardView .page-actions {
    display: none;
  }
  #dashboardView .dash-add {
    display: block;
  }
  #dashboardView .dash-add .add-btn {
    width: 48px;
    height: 48px;
  }
  #dashboardView .dash-add .add-btn svg {
    width: 28px;
    height: 28px;
  }
  .dash-add .add-menu {
    left: auto;
    right: 0;
  }
  #dashboardView .deck-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  #dashboardView .deck-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon name" "icon description" "icon meta";
    align-items: center;
    align-content: center;
    column-gap: 14px;
    row-gap: 1px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    text-align: left;
  }
  #dashboardView .deck-tile.no-description {
    grid-template-areas: "icon name" "icon meta";
  }
  #dashboardView .deck-tile .deck-icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    margin: 0;
  }
  #dashboardView .deck-tile-name {
    grid-area: name;
    -webkit-line-clamp: 1;
    font-size: 1.05rem;
  }
  #dashboardView .deck-tile-description {
    grid-area: description;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.85rem;
    color: var(--text-2);
  }
  #dashboardView .deck-tile-meta {
    grid-area: meta;
  }
  #dashboardView .deck-tile-due {
    display: none;
  }
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.deck-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 18px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: center;
  cursor: pointer;
}

.deck-tile:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.deck-tile .deck-icon {
  margin-bottom: 6px;
}

/* At most 2 lines; the whole name is in the tooltip and on the deck page */
.deck-tile-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.deck-tile-meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.deck-icon {
  display: block;
  flex: none;
  width: 64px;
  height: 64px;
}

.deck-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.deck-icon-large {
  width: 88px;
  height: 88px;
}

/* Phones: just the icons with their names below, three to a row */
@media (max-width: 760px) {
  .deck-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 8px;
  }
  .deck-tile {
    padding: 4px 2px;
    border: 0;
    background: none;
    font-size: 0.85rem;
  }
  .deck-tile:hover {
    background: none;
  }
  .deck-tile .deck-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 2px;
  }
  .deck-tile-meta {
    font-size: 0.72rem;
  }
}

/* ---------------- The deck page ---------------- */

.deck-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 20px;
}

/* The deck's icon */
.deck-page-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* The bottom row: the bin and download on the left, away from the buttons people tap often;
   edit, hidden cards and statistics on the right */
.deck-page-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 100%;
}

.deck-page-bottom-left,
.deck-page-bottom-right {
  display: flex;
  gap: 8px;
}

/* The deck page's icon buttons, each in its own square */
:is(#deckPage, #deckPanel) .icon-btn {
  width: 38px;
  height: 38px;
  border-color: var(--border);
  background: var(--surface-2);
}

:is(#deckPage, #deckPanel) .icon-btn svg {
  width: 22px;
  height: 22px;
}

:is(#deckPage, #deckPanel) .icon-btn:hover {
  border-color: var(--text-2);
}

:is(#deckPage, #deckPanel) .icon-btn.danger:hover {
  border-color: var(--bad);
}

:is(#deckPage, #deckPanel) .icon-btn.confirming {
  width: auto;
}

.deck-field-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 10px;
}

.deck-field-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Study, New card and the card list: their own part under the deck's, side by side, in
   blue, green and yellow. The page's main actions, so big enough to tap easily on a phone. */
:is(.page, .deck-panel) .deck-page-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 16px;
}

:is(#deckPage, #deckPanel) .action-btn {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border-color: transparent;
}

:is(#deckPage, #deckPanel) .action-btn svg {
  width: 32px;
  height: 32px;
}

:is(#deckPage, #deckPanel) .action-btn:hover {
  border-color: transparent;
  filter: brightness(1.1);
}

:is(#deckPage, #deckPanel) .action-btn.blue {
  background: var(--accent);
  color: #fff;
}

:is(#deckPage, #deckPanel) .action-btn.green {
  background: var(--good);
  color: #fff;
}

/* Dark icon on yellow: white wouldn't stand out enough */
:is(#deckPage, #deckPanel) .action-btn.yellow {
  background: #e8b931;
  color: #1d2433;
}

/* The deck is already chosen on the deck page */
.new-card-panel label:has(#newCardDeck) {
  display: none;
}

/* ---------------- Card list page ---------------- */

/* The search bar with its magnifier, and Both / Front / Back under it */
.card-search {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.search-bar {
  display: flex;
  gap: 6px;
  width: 100%;
}

.search-bar input {
  flex: 1;
  min-width: 0;
}

.search-bar .icon-btn {
  flex: none;
  width: 40px;
  height: auto;
  border-color: var(--border);
  background: var(--surface-2);
}

.search-bar .icon-btn svg {
  width: 20px;
  height: 20px;
}

.search-sides {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.search-sides button {
  padding: 6px 12px;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
}

.search-sides button + button {
  border-left: 1px solid var(--border);
}

.search-sides button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.deck-page-info {
  flex: 1;
  min-width: min(260px, 100%);
}

.deck-page-info .page-title {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.deck-page-info .deck-description,
.deck-page-info .deck-stats {
  display: block;
  margin: 6px 0 0;
}

.deck-page-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
}

.deck-page-head .daily-limit {
  flex-basis: 100%;
  margin: 0;
}

/* Phones: the icon stays beside the name */
@media (max-width: 760px) {
  .deck-page-head {
    gap: 14px;
  }
  .deck-page-head .deck-icon-large {
    width: 56px;
    height: 56px;
  }
  .deck-page-head .deck-page-info {
    min-width: 0;
  }
}

.account-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.account-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  flex: 1;
  min-width: 200px;
  margin: 0;
}

.account-details dt {
  color: var(--muted);
}

.account-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.account-details .btn-link {
  margin-left: 6px;
  font-size: 0.85rem;
}

.account-details .field-hint {
  display: block;
}

/* Opens under the details, across the whole panel */
.username-form {
  flex-basis: 100%;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-form .panel-title,
.account-form p {
  margin: 0;
}

.account-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-form .btn {
  align-self: flex-start;
}

/* ---------------- Photo and avatar window ---------------- */

.avatar-dialog {
  width: min(440px, calc(100% - 32px));
}

.avatar-current {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 16px 0 20px;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.avatar-upload {
  position: relative;
}

.avatar-upload:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.avatar-upload.busy {
  opacity: 0.6;
  pointer-events: none;
}

.avatar-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.avatar-choice {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.avatar-choice svg {
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-choice:hover {
  border-color: var(--border);
}

.avatar-choice[aria-pressed="true"] {
  border-color: var(--brand);
}

/* ---------------- Name and slogan ----------------
   In the top-left corner on every screen except the welcome page, where they are centred
   and animated: the name fades in (4s), then the slogan appears letter by letter (3s),
   and as it finishes the Log in / Sign up button. A tap or key press skips to the end (.intro-done). */

/* The welcome page's chalkboard background, shown as it is, without darkening.
   Landscape screens use the wide picture and upright phones the tall one, each stretched
   to fill the screen exactly, so all the writing is visible with no empty sides; screen
   shapes are close to the pictures', so the stretch is slight. It fades away when the page
   moves on to the login screen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #050c1a url("images/home-2x.webp") center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.8s;
  pointer-events: none;
}

@media (max-width: 760px) {
  body::before {
    background-image: url("images/home-1x.webp");
  }
}

/* Portrait screens use the tall picture: the sharper copy on high-density (2x) screens */
@media (max-aspect-ratio: 1/1) {
  body::before {
    background-image: image-set(
      url("images/home-portrait-1x.webp") 1x,
      url("images/home-portrait-2x.webp") 2x
    );
  }
}

/* Portrait screens much wider than a phone (tablets) would distort the tall picture, so
   there it fills the screen and is cut off at the top and bottom instead */
@media (min-aspect-ratio: 3/5) and (max-aspect-ratio: 1/1) {
  body::before {
    background-size: cover;
  }
}

/* A soft dark patch behind the name, slogan and button so they stand out. It fades to
   nothing well before the edges, so the rest of the writing keeps its full brightness. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 34% 30% at 50% 52%,
    rgba(5, 12, 26, 0.92) 0%,
    rgba(5, 12, 26, 0.75) 45%,
    rgba(5, 12, 26, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.8s;
  pointer-events: none;
}

/* Upright phones: wider across, as the group fills most of the width */
@media (max-aspect-ratio: 1/1) {
  body::after {
    background: radial-gradient(
      ellipse 75% 22% at 50% 53%,
      rgba(5, 12, 26, 0.92) 0%,
      rgba(5, 12, 26, 0.75) 45%,
      rgba(5, 12, 26, 0) 100%
    );
  }
}

body[data-stage="home"]::before,
body[data-stage="home"]::after {
  opacity: 1;
}

/* When the Log in / Sign up button appears, the chalkboard behind goes soft (the same
   layer blurs whatever is behind it, so the picture's edges stay clean) */
body[data-stage="home"]::after {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

body[data-stage="home"]:not(.intro-done)::after {
  animation: blur-in 0.8s ease-out 7s both;
}

@keyframes blur-in {
  from {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

.brand-name,
.brand-slogan {
  /* app.js slides them from the centre to the corner by scaling from this point */
  transform-origin: top left;
}

.brand-name {
  font-family: var(--brand-font);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--brand);
}

.brand-slogan {
  margin: 0;
  font-family: var(--brand-font);
  font-size: 1rem;
  font-style: italic;
  color: var(--text-2);
}

/* In the corner the name is the welcome page's shiny gold, with smaller 3D edges, and the
   same light sweeping across it (the shine animation, still for people who ask for less motion) */
body:not([data-stage="home"]) .brand-name {
  padding: 0 0.04em 0.06em; /* room for the shadows */
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 251, 230, 0.95) 50%, transparent 58%) 100% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #f7e2a0 0%, #e8c260 35%, #c99630 70%, #dcae4c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s ease-in-out 1s infinite;
  filter:
    drop-shadow(0 1px 0 #8a6516)
    drop-shadow(0 2px 0 #4f380a)
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-stage="home"]) .brand-name {
    animation: none;
  }
}

@media (max-width: 760px) {
  .brand-name {
    font-size: 1.7rem;
  }
  .brand-slogan {
    font-size: 0.9rem;
  }
  .profile-btn .avatar {
    width: 40px;
    height: 40px;
  }
}

.slogan-letter {
  white-space: pre;
}

.enter-btn {
  display: none;
}

/* Sizes of the name and slogan on the welcome page; also used to centre them on the screen */
body {
  /* Limited by height too, so a phone held sideways doesn't get an oversized name */
  --home-name-size: clamp(3rem, min(15vw, 18vh), 6rem);
  --home-slogan-size: clamp(1.1rem, min(4.2vw, 5vh), 1.7rem);
}

body[data-stage="home"] .topbar {
  position: relative;
  min-height: 100dvh;
  max-width: none;
  padding: 0;
}

/* The name and slogan together sit at the centre of the screen, with the button below.
   Their height is 1.18 x the name size (line height plus padding) plus 1.5 x the slogan
   size (its line height); the group moves up by half of that. */
body[data-stage="home"] .hero {
  position: absolute;
  inset: 50% 16px auto;
  transform: translateY(calc(var(--home-name-size) * -0.59 - var(--home-slogan-size) * 0.75));
  align-items: center;
  text-align: center;
}

/* Metallic gold, with a beam of light that sweeps across the letters from left to right,
   and stacked shadows underneath for a raised, slightly 3D look on the busy background */
body[data-stage="home"] .brand-name {
  font-size: var(--home-name-size);
  line-height: 1.1;
  padding: 0 0.06em 0.08em; /* room for the shadows */
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 251, 230, 0.95) 50%, transparent 58%) 100% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #f7e2a0 0%, #e8c260 35%, #c99630 70%, #dcae4c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Each sweep takes 1.8s (30% of 6s). The first starts at 2.2s so it ends just as the
     name finishes appearing at 4s; then one every 6 seconds */
  animation: shine 6s ease-in-out 2.2s infinite;
  filter:
    drop-shadow(0 1px 0 #8a6516)
    drop-shadow(0 2px 0 #6b4d0f)
    drop-shadow(0 3px 0 #4f380a)
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.85));
}

/* Directly on the line beneath the name */
body[data-stage="home"] .brand-slogan {
  margin-top: 0;
  font-size: var(--home-slogan-size);
  line-height: 1.5;
  color: #ece7da;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

body[data-stage="home"] .enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* One empty line (a slogan line's height) between the slogan and the button */
  margin-top: calc(var(--home-slogan-size) * 1.5);
  padding: 12px 26px 12px 20px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #111318;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

body[data-stage="home"] .enter-btn:hover {
  background: #f1efe9;
}

body[data-stage="home"] .enter-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.enter-icon {
  width: 20px;
  height: 20px;
}

body[data-stage="home"]:not(.intro-done) .brand-name {
  animation: name-in 4s ease-in-out both, shine 6s ease-in-out 2.2s infinite;
}

/* After skipping the intro the sweeps start right away */
body[data-stage="home"].intro-done .brand-name {
  animation-delay: 0.5s;
}

@keyframes shine {
  0% { background-position: 100% 0, 0 0; }
  30%, 100% { background-position: 0% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-stage="home"] .brand-name {
    animation: none !important;
  }
}

body[data-stage="home"]:not(.intro-done) .slogan-letter {
  opacity: 0;
  animation: letter-in 0.12s ease-out forwards;
  /* --i is the letter's position and --step the time per letter, both set by app.js */
  animation-delay: calc(4s + var(--i) * var(--step));
}

/* Right as the slogan finishes: 4s name + 3s slogan */
body[data-stage="home"]:not(.intro-done) .enter-btn {
  visibility: hidden;
  animation: show-now 0s 7s forwards;
}

@keyframes name-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes letter-in {
  to { opacity: 1; }
}

@keyframes show-now {
  to { visibility: visible; }
}

/* ---------------- Log in / create account ---------------- */

/* Name, form and guest option fit on one screen without scrolling */
body[data-stage="auth"] {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* While the welcome page (or the lock screen) stands in for the app, the app stays as it was
   underneath, out of sight; an open window too */
body.away > .layout,
body.away > main:not(#lockView),
body.away #account {
  display: none !important;
}

body.away dialog[open] {
  visibility: hidden;
}

body.away dialog::backdrop {
  background: transparent;
}

/* My Account's lock setting: the box beside its words, the note under them */
.lock-setting label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.lock-setting .field-hint {
  margin: 6px 0 0 26px;
}

body:not([data-stage="app"]) > .message {
  display: none !important;
}

.auth {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px;
  animation: fade-in 0.5s 0.25s both;
}

@keyframes fade-in {
  from { opacity: 0; }
}

.auth-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 20px;
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(400px, 100%);
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.auth-intro {
  margin: 0;
  color: var(--text-2);
}

.auth-card .message {
  margin: 0;
}

/* Keep me logged in, Remember my email */
.login-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: -4px;
  font-size: 0.88rem;
  color: var(--text-2);
}

.auth-card .login-options .check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.login-options input {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

.auth-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.forgot-link {
  align-self: flex-end;
  margin-top: -6px;
  font-size: 0.82rem;
}

.guest {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 12px;
  width: min(640px, 100%);
  margin: 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  text-align: center;
}

.guest-note {
  margin: 0;
  color: var(--muted);
}

.guest-hint {
  margin-top: 16px;
}

/* Short screens: tighter spacing keeps everything visible without scrolling */
@media (max-height: 700px) {
  body[data-stage="auth"] .topbar {
    padding-block: 12px 8px;
  }
  .auth-center {
    padding: 4px 0 12px;
  }
  .auth-card {
    gap: 8px;
    padding: 16px 18px;
  }
  .guest {
    padding-top: 8px;
  }
}

.auth-card h2 {
  font-size: 1.2rem;
}

.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-2);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* A password box with the show/hide eye inside its right end */
.password-box {
  position: relative;
  display: flex;
}

.password-box input {
  flex: 1;
  padding-right: 42px;
}

/* Edge adds its own eye to password boxes; this one works in every browser */
.password-box input::-ms-reveal,
.password-box input::-ms-clear {
  display: none;
}

.password-eye {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.password-eye:hover {
  color: var(--text);
}

.password-eye svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Each rule turns green with a tick once the password meets it */
.password-rules {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  font-size: 0.8rem;
  color: var(--muted);
}

.password-rules li::before {
  content: "○ ";
}

.password-rules li.met {
  color: var(--good-text);
}

.password-rules li.met::before {
  content: "✓ ";
}

.field-hint {
  font-size: 0.8rem;
  color: var(--muted);
}

.delete-account {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.delete-account p,
.delete-account .panel-title {
  margin: 0;
}

.delete-account label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.delete-account .btn-danger {
  align-self: flex-start;
}

.form-error {
  color: var(--bad-text);
  font-size: 0.9rem;
}

.layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 48px;
  align-items: start;
}

.sidebar,
.main > * {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}

@media (max-width: 760px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px 32px;
  }
  .topbar {
    padding-inline: 16px;
  }
  /* A narrow bar after logging in */
  body[data-stage="app"] .topbar {
    flex-wrap: nowrap;
    padding-block: 8px;
  }
  .page {
    padding-inline: 16px;
  }
}

/* ---------------- Controls ---------------- */

input,
textarea {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

/* A side of a card: looks like a one-line box, and grows when the text has several lines */
.side-text {
  display: block;
  line-height: 1.4;
  resize: none;
  overflow: hidden;
}

select {
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
.flashcard:focus-visible,
.box-col:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  filter: brightness(0.97);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.btn-correct,
.btn-wrong,
.btn-danger {
  min-width: 130px;
  color: #ffffff;
  font-weight: 600;
}

.btn-correct {
  background: var(--good);
  border-color: var(--good);
}

.btn-wrong,
.btn-danger {
  background: var(--bad);
  border-color: var(--bad);
}

.btn-danger {
  min-width: 0;
}

.btn-link {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
}

.btn-link:hover {
  text-decoration: underline;
}

.btn-link.danger {
  color: var(--bad-text);
}

.inline-form {
  display: flex;
  gap: 8px;
}

.inline-form input {
  flex: 1;
}

/* ---------------- Message ---------------- */

.message {
  max-width: 1060px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.message.success {
  border-color: var(--good);
}

.message.error {
  border-color: var(--bad);
  color: var(--bad-text);
}

/* A message with more words behind its "i" button: one line until the button opens it */
.message-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message.open .message-text {
  white-space: normal;
}

.message-info {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--text-2);
  border-radius: 50%;
  background: none;
  color: var(--text-2);
  font: italic 700 0.8rem/1 Georgia, serif;
  cursor: pointer;
}

.message-info:hover,
.message-info[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* A bigger target for fingers, without a bigger circle */
@media (pointer: coarse) {
  .message-info {
    position: relative;
  }
  .message-info::after {
    content: "";
    position: absolute;
    inset: -11px;
  }
}

.message-detail {
  margin: 6px 0 0;
  color: var(--text-2);
}

@media (max-width: 1100px) {
  .message {
    margin-inline: 20px;
  }
}

@media (max-width: 760px) {
  .message {
    margin-inline: 16px;
  }
}

/* ---------------- The desktop page (from 761px wide) ---------------- */
/* The sidebar, the chosen deck's panel and the main area side by side */

.deck-panel,
.deck-views > *,
.sidebar-top,
.sidebar .sidebar-pin,
.sidebar-divider,
#sidebarDashboard {
  display: none;
}

@media (min-width: 761px) {
  .layout {
    grid-template-columns: auto minmax(240px, 300px) minmax(0, 1fr);
    max-width: none;
    gap: 20px;
  }
  body:not(.desktop) .layout {
    grid-template-columns: auto minmax(0, 1fr);
  }

  /* The sidebar: icons only, or opened over the page, or (from 1200px) pinned open */
  .sidebar-slot {
    position: relative;
    width: 64px;
    align-self: stretch;
  }
  .sidebar {
    position: sticky;
    top: 12px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 64px;
    max-height: calc(100vh - 110px);
    padding: 10px;
    overflow: hidden;
  }
  .sidebar-top {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
  }
  .sidebar-actions {
    gap: 4px;
    margin: 0;
  }
  .sidebar .sidebar-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
  }
  .sidebar .sidebar-item:hover {
    background: var(--surface-2);
  }
  .sidebar-item .action-icon,
  .sidebar-item .action-icon svg {
    width: 22px;
    height: 22px;
  }
  .sidebar-divider {
    display: block;
    width: 100%;
    margin: 8px 0;
    border: 0;
    border-top: 1px solid var(--border);
  }
  #sidebarDashboard {
    display: flex;
    font-weight: 600;
  }
  .sidebar-label,
  .sidebar .deck-list,
  .sidebar .guest-hint {
    display: none;
  }

  body.sidebar-open .sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    max-height: calc(100vh - 110px);
    box-shadow: var(--shadow);
  }
  body.sidebar-open .sidebar-label {
    display: inline;
  }
  body.sidebar-open .sidebar .deck-list {
    display: flex;
    flex: 1;
    min-height: 0;
    margin: 4px 0 0;
    overflow-y: auto;
  }
  body.sidebar-open .sidebar .guest-hint:not([hidden]) {
    display: block;
  }

  /* The deck panel: the deck's information above its buttons */
  .deck-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 12px;
  }
  .deck-panel > .panel {
    margin: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
  }
  .deck-panel .deck-page-head {
    padding-bottom: 18px;
  }
  .deck-panel .deck-page-actions {
    padding: 16px;
  }

  /* The main area: one of the five views */
  .deck-views {
    display: contents;
  }
  body.desktop:not([data-view="study"]) #deckView,
  body.desktop:not([data-view="study"]) #emptyState,
  body.desktop:not([data-view="study"]) .study-hint {
    display: none !important;
  }
  body.desktop[data-view="add"] #newCardPanel,
  body.desktop[data-view="cards"] #cardListPanel,
  body.desktop[data-view="hidden"] #hiddenContent,
  body.desktop[data-view="stats"] #statsView {
    display: block;
  }
  .deck-views > * {
    margin: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
  }
  .deck-views .stats-body {
    padding: 0;
  }
  /* The deck panel already shows the deck: no name or deck page link over the study session,
     no close button on the statistics */
  body.desktop #deckView .deck-header,
  body.desktop #statsClose {
    display: none;
  }
  /* Not needed on the desktop page: the sidebar lists the decks */
  #dashboardItem {
    display: none;
  }
}

/* 761–1199px: a narrower deck panel, with smaller icons, so the study area gets more room */
@media (min-width: 761px) and (max-width: 1199px) {
  body.desktop .layout {
    grid-template-columns: auto 220px minmax(0, 1fr);
  }
  .deck-panel > .panel {
    padding: 14px;
  }
  .deck-panel .deck-page-head {
    gap: 12px;
    padding-bottom: 14px;
  }
  .deck-panel .deck-icon-large {
    width: 56px;
    height: 56px;
  }
  .deck-panel .deck-page-bottom-left,
  .deck-panel .deck-page-bottom-right {
    gap: 6px;
  }
  #deckPanel .icon-btn {
    width: 34px;
    height: 34px;
  }
  #deckPanel .icon-btn svg {
    width: 19px;
    height: 19px;
  }
  .deck-panel .deck-page-actions {
    gap: 12px;
    padding: 14px;
  }
  #deckPanel .action-btn {
    width: 52px;
    height: 52px;
  }
  #deckPanel .action-btn svg {
    width: 28px;
    height: 28px;
  }
}

/* 761–999px: the deck panel is a strip above the study area (its information on the left, its
   three buttons on the right), so the study area has the full width beside the sidebar */
@media (min-width: 761px) and (max-width: 999px) {
  body.desktop .layout {
    grid-template-columns: auto minmax(0, 1fr);
  }
  body.desktop .sidebar-slot {
    grid-row: 1 / span 2;
  }
  .deck-panel:not([hidden]) {
    position: static;
    flex-direction: row;
    align-items: stretch;
  }
  .deck-panel .deck-page-head {
    flex: 1;
    min-width: 0;
  }
  .deck-panel .deck-page-actions {
    flex: none;
    align-items: center;
  }
}

@media (min-width: 1200px) {
  body.sidebar-open .sidebar .sidebar-pin {
    display: grid;
  }
  body.sidebar-pinned .sidebar-slot {
    width: clamp(200px, 18vw, 280px);
  }
  body.sidebar-pinned .sidebar {
    position: sticky;
    width: 100%;
    box-shadow: none;
  }
  .sidebar-pin[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
  }
}

/* ---------------- Sidebar ---------------- */

.sidebar-title {
  font-size: 1rem;
  margin-bottom: 12px;
}

.deck-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* A deck in the sidebar: its name and counts, and the deck icon that opens its page */
.deck-row {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
}

.deck-row:hover {
  background: var(--surface-2);
}

.deck-row.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.deck-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 4px 10px 12px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.deck-page-btn {
  flex: none;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.deck-page-btn .deck-icon {
  width: 30px;
  height: 30px;
  transition: transform 0.15s;
}

.deck-page-btn:hover .deck-icon {
  transform: scale(1.12);
}

.deck-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.deck-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-2);
}

.badge {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.78rem;
  font-weight: 600;
}

.badge-new {
  background: var(--good);
}

.import-link {
  margin-top: 10px;
  padding-inline: 0;
  font-size: 0.9rem;
}

.deck-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

/* ---------------- Phones: the + button and the deck switcher ---------------- */

.home-bar {
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.add-wrap {
  position: relative;
  flex: none;
}

.add-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.add-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: transform 0.2s;
}

.add-btn[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.add-menu {
  left: 0;
}

/* One row that scrolls sideways, however many decks there are; the edges fade out */
.deck-switcher {
  flex: 1;
  display: flex;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 4px 2px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 24px), transparent);
}

.deck-switcher::-webkit-scrollbar {
  display: none;
}

.deck-switcher li {
  flex: none;
  scroll-snap-align: start;
  scroll-margin-left: 10px;
}

.deck-switcher li:last-child {
  margin-right: 20px;
}

/* A deck in the switcher: its name and cards due, and the deck icon that opens its page */
.deck-chip-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.deck-chip-wrap.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

.deck-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 170px;
  padding: 6px 2px 6px 12px;
  border: 0;
  background: none;
  white-space: nowrap;
  cursor: pointer;
}

.deck-chip-wrap .deck-page-btn {
  padding: 3px 8px 3px 4px;
}

.deck-chip-wrap .deck-page-btn .deck-icon {
  width: 24px;
  height: 24px;
}

.deck-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------- Add New Card and Add New Deck windows ---------------- */

.dialog-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.dialog-form p {
  margin: 0;
}

.dialog-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dialog-form select {
  align-self: stretch;
}

.optional {
  font-weight: 400;
  color: var(--muted);
}

.description-text {
  resize: vertical;
}

.form-done {
  color: var(--good-text);
  font-size: 0.9rem;
}

/* ---------------- Deck view ---------------- */

.empty-state {
  text-align: center;
  color: var(--text-2);
  padding: 48px 18px !important;
}

.deck-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.deck-header h2 {
  font-size: 1.3rem;
  overflow-wrap: anywhere;
}

.deck-header .inline-form {
  flex: 1;
  min-width: 240px;
}

.deck-actions {
  display: flex;
  gap: 8px;
}

/* "New cards arrive each day…": each word rises into place, one after the other */
.arriving-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: arrive 0.5s ease-out forwards;
  animation-delay: calc(0.4s + var(--i) * 0.12s);
}

@keyframes arrive {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arriving-word {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* The end of a session: drawn over everything, but clicks go through */
.fireworks {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
}

.deck-description {
  margin: 4px 0 0;
  color: var(--text-2);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.deck-stats {
  margin: 4px 0 20px;
  color: var(--text-2);
}

#studyTab {
  margin-top: 16px;
}

.empty-state .btn {
  margin-top: 4px;
}

/* Phones: the home screen fits on one screen. The sidebar's place is taken by the + button
   and the deck switcher, and the card takes the room that is left. */
@media (max-width: 760px) {
  .sidebar {
    display: none;
  }
  .home-bar {
    display: flex;
  }
  body[data-page="home"] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  body[data-page="home"] > .message {
    flex: none;
    margin-bottom: 8px;
  }
  body[data-page="home"] .layout {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding-bottom: 12px;
  }
  body[data-page="home"] .main,
  body[data-page="home"] #deckView,
  body[data-page="home"] #studyTab {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body[data-page="home"] #deckView {
    padding: 12px 14px;
  }
  /* The name and "Deck page ›" share one line; a name too long for it ends in "…" (the deck
     page shows it whole), so it never pushes the card down */
  .deck-header {
    flex-wrap: nowrap;
  }
  .deck-header h2 {
    flex: 1;
    min-width: 0;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .deck-header #deckPageLink {
    flex: none;
  }
  .deck-stats {
    margin: 2px 0 10px;
    font-size: 0.85rem;
  }
  #studyTab {
    margin-top: 10px;
  }
  /* Long content (the edit form, the summary) scrolls inside, not the page */
  body[data-page="home"] .review {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  body[data-page="home"] .flashcard {
    flex: 1 1 260px;
    height: auto;
    min-height: 160px;
    max-height: 440px;
  }
  body[data-page="home"] .review-controls {
    margin-top: 12px;
  }
  /* The page scrolls only far enough to read the shortcuts below the screen */
  body[data-page="home"] {
    overflow: hidden auto;
  }
  body[data-page="home"] .main > .study-hint {
    flex: none;
    height: 0;
    margin: 20px 0 -20px;
    overflow: visible;
  }
  body[data-page="home"] .study-hint::after {
    content: "";
    display: block;
    height: 16px;
  }
}

.daily-limit {
  margin: -12px 0 16px;
  font-size: 0.9rem;
  color: var(--text-2);
}

.daily-limit .per-day-input {
  padding: 3px 6px;
}

.per-day-input {
  width: 6em;
}

/* "[ 3 ] new cards/day", on one line */
.per-day-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.daily-limit .per-day-line .per-day-input {
  width: 4.5em;
}

.per-day-range {
  margin-left: 4px;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------------- Import window ---------------- */

.import-form,
.import-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.import-form p {
  margin: 0;
}

/* How to write cards with several lines, commas or quote marks; opened on request */
.import-help {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 0.88rem;
  color: var(--text-2);
}

.import-help summary {
  color: var(--accent);
  cursor: pointer;
}

.import-help[open] summary {
  margin-bottom: 8px;
}

.import-help p + p,
.import-help ul {
  margin-top: 8px;
}

.import-help ul {
  margin-bottom: 0;
  padding-left: 20px;
}

.import-help code,
.import-example {
  font-family: ui-monospace, Consolas, monospace;
}

.import-example {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.82rem;
  white-space: pre;
  overflow-x: auto;
}

.import-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.import-form label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.import-form select {
  align-self: flex-start;
}

.skipped-row td {
  color: var(--muted);
  text-decoration: line-through;
}

.panel-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  margin-bottom: 12px;
}

/* ---------------- Box chart ---------------- */

.box-chart-wrap {
  position: relative;
  margin-bottom: 28px;
}

.box-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  border-bottom: 1px solid var(--border);
}

.box-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 120px;
  padding-inline: 4px;
  border-radius: 6px 6px 0 0;
  cursor: default;
}

.box-col:hover {
  background: var(--surface-2);
}

.box-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.box-bar {
  width: 100%;
  max-width: 48px;
  background: var(--chart);
  border-radius: 4px 4px 0 0;
}

.box-labels {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin-top: 6px;
  text-align: center;
}

.box-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text);
}

/* ---------------- Statistics window & deck menu ---------------- */

.stats-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.stats-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.stats-body {
  padding: 20px;
}

.stats-kicker,
.stats-deck-name {
  display: block;
}

/* Statistics: space between the counts and the chart, and a line above the chart's heading */
:is(#statsDialog, #statsView) .box-chart-wrap {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Statistics: a line between the deck's name and its counts */
:is(#statsDialog, #statsView) .stats-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.stats-kicker {
  margin-bottom: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.stats-header h2 {
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}

.stats-header .btn-link {
  font-size: 1.1rem;
  color: var(--text-2);
}

.stats-dialog .box-chart-wrap {
  margin-bottom: 0;
}

.sidebar-hint {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.box-tip {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, calc(-100% - 6px));
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.82rem;
  /* Messages can be long: wrap onto a few lines instead of running off a phone screen */
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: min(260px, 100%);
  pointer-events: none;
}

.box-tip-title {
  font-weight: 600;
}

/* ---------------- Review ---------------- */

/* "Would you like to see your progress?" with Yes and No beside it, wrapping on phones */
.progress-question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
}

.progress-answers {
  display: flex;
  gap: 8px;
}

.review {
  max-width: 560px;
  margin: 0 auto;
}

.progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--text-2);
  font-size: 0.9rem;
  white-space: nowrap;
}

.nav-btn {
  min-width: 40px;
  padding: 4px 10px;
  font-size: 1.15rem;
  line-height: 1.2;
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Phones: ‹ and › in the row above the card, which keeps the card's full width */
.nav-side {
  display: none;
}

.card-row {
  display: contents;
}

/* A wide enough study area: ‹ and › beside the card, which keeps its width by widening the
   review. Measured on the main area, which shares the screen with the sidebar and deck panel. */
.main {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .review:has(.card-row) {
    max-width: 664px;
  }
  .review > .progress,
  .review > .answer-note,
  .review > .review-controls {
    margin-inline: 52px;
  }
  .nav-top {
    display: none;
  }
  .nav-side {
    display: inline-block;
    flex: none;
    min-width: 40px;
    height: 64px;
  }
  .card-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .card-row > .flashcard,
  .card-row > .review-edit {
    flex: 1;
    min-width: 0;
  }
}

/* On a card answered earlier: the answer given, which can be changed */
.answer-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-2);
}

.review-controls.answered .btn:not(.chosen) {
  opacity: 0.55;
}

.review-controls .btn.chosen {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}

.progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s;
}

.flashcard {
  --swipe: 0;
  position: relative;
  height: 240px;
  perspective: 1200px;
  cursor: pointer;
  border-radius: 16px;
  /* Let the page scroll vertically; horizontal moves are swipes. Also stops double-tap zoom */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Repeat on children: the scrollable text box would otherwise let the browser claim the swipe */
.flashcard * {
  touch-action: pan-y;
}

.flashcard.flipped {
  cursor: grab;
}

.swipe-stamp {
  position: absolute;
  top: 14px;
  z-index: 2;
  padding: 2px 10px;
  border: 2px solid currentColor;
  border-radius: 8px;
  background: var(--surface);
  font-weight: 700;
  pointer-events: none;
}

.swipe-correct {
  right: 18px;
  color: var(--good);
  transform: rotate(8deg);
  opacity: clamp(0, var(--swipe), 1);
}

.swipe-wrong {
  left: 18px;
  color: var(--bad-text);
  transform: rotate(-8deg);
  opacity: clamp(0, calc(var(--swipe) * -1), 1);
}

/* Show touch or keyboard hints depending on the device */
.hint-touch {
  display: none;
}

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

.review-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.review-edit .panel-title {
  margin: 0;
}

/* Editing a card: each side looks like the card's face in a review, with room to write */
.edit-faces {
  display: grid;
  gap: 12px;
}

.card-edit .edit-faces {
  grid-template-columns: 1fr 1fr;
}

.edit-face {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: var(--card-front);
  color: var(--card-text);
}

.edit-face-back {
  background: var(--card-back);
  border-color: #b9cde6;
}

.edit-face {
  position: relative;
}

.edit-face .face-label {
  position: static;
  line-height: 26px;
}

/* The picture button sits in the corner, by the label, so the text gets the full width */
.edit-face .picture-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 4px 7px;
  border-color: rgba(29, 36, 51, 0.25);
  background: rgba(255, 255, 255, 0.7);
  color: var(--card-text);
}

.edit-face .picture-btn:hover {
  background: #fff;
}

.edit-face .side-text::placeholder {
  color: var(--card-label);
}

.edit-face .side-text {
  min-height: 96px;
  padding: 10px;
  border: 1px dashed rgba(29, 36, 51, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--card-text);
  font-size: 1.2rem;
  text-align: center;
}

.edit-face .picture-status {
  color: var(--card-label);
}

/* The deck page: the card being edited takes the whole row */
.card-table td.edit-cell {
  padding: 12px 0;
}

.card-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Kept apart from Save and Cancel, so it isn't pressed by mistake */
.review-edit-actions .review-delete {
  margin-right: auto;
}

.flashcard-inner {
  position: relative;
  height: 100%;
  transition: transform 0.45s;
  transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard.has-picture {
  height: 360px;
}

.face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 24px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: var(--card-front);
  color: var(--card-text);
  box-shadow: var(--shadow);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.face-back {
  transform: rotateY(180deg);
  background: var(--card-back);
  border-color: #b9cde6;
}

.face-label {
  position: absolute;
  top: 14px;
  left: 18px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--card-label);
}

.face-picture {
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  pointer-events: none;
  -webkit-user-drag: none;
}

.face-text {
  flex-shrink: 0;
  margin: 0;
  max-height: 100%;
  overflow: auto;
  font-size: 1.6rem;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: pre-line; /* imported cards may have line breaks */
}

@media (prefers-reduced-motion: reduce) {
  .flashcard-inner,
  .progress-fill {
    transition: none;
  }
}

.review-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

/* "I know this": on its own line, under the answer buttons */
.review-controls .know-btn {
  flex-basis: 100%;
  padding: 2px 0;
  font-size: 0.9rem;
}

/* The question asked before hiding a card */
.confirm-dialog {
  max-width: 420px;
}

.confirm-dialog .stats-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.confirm-dialog h2,
.confirm-dialog p {
  margin: 0;
}

@media (max-width: 760px) {
  .hidden-actions .btn-link {
    display: block;
    margin: 4px 0 4px auto;
  }
}

.hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

/* The study shortcuts: under the review box, not in it */
.main > .study-hint {
  padding: 0 18px;
  border: 0;
  background: none;
}

#deckView[hidden] + .study-hint {
  display: none;
}

kbd {
  padding: 0 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.78rem;
}

.summary {
  text-align: center;
  padding: 24px 0 8px;
}

.summary-title {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 600;
}

.summary p {
  margin: 4px 0;
}

.summary .btn {
  margin-top: 12px;
}

.score-good {
  color: var(--good-text);
  font-weight: 600;
}

.score-bad {
  color: var(--bad-text);
  font-weight: 600;
}


/* ---------------- Pictures on cards ---------------- */

.side-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* The picture button keeps its size when the text box grows */
.side-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.side-row .side-text {
  flex: 1;
}

.picture-btn {
  display: inline-grid;
  place-items: center;
  padding: 6px 9px;
  line-height: 1;
}

.picture-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Table cells are narrow: the picture button goes under the text box */
.picture-preview {
  position: relative;
  align-self: flex-start;
}

.picture-thumb {
  display: block;
  max-width: 120px;
  max-height: 80px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.picture-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
}

/* "… characters left" under a text box with a limit */
.char-count {
  display: block;
  margin-top: 3px;
  text-align: right;
  font-size: 0.75rem;
  color: var(--muted);
}

.char-count.low {
  color: var(--bad-text);
  font-weight: 600;
}

.edit-face .char-count {
  margin-top: 0;
  color: var(--card-label);
}

.edit-face .char-count.low {
  color: #b3261e;
}

.picture-status:empty {
  display: none;
}

.picture-status {
  font-size: 0.82rem;
  color: var(--text-2);
}

.picture-status.error {
  color: var(--bad-text);
}

.table-picture {
  display: block;
  max-width: 64px;
  max-height: 48px;
  margin-bottom: 4px;
  border-radius: 4px;
}

/* ---------------- Cards tab ---------------- */

.table-wrap {
  overflow-x: auto;
}

.card-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.card-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  padding: 8px;
}

.card-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.card-table td input {
  width: 100%;
}

.card-table .side-cell {
  white-space: pre-line; /* a side can have several lines */
}

.card-table .nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
}

.row-actions {
  white-space: nowrap;
  text-align: right;
}

.row-tools-compact {
  display: none;
}

/* Phones: no Box column; the box number, ✎ and ✕ stacked in the last cell */
@media (max-width: 760px) {
  .card-table .box-cell,
  .row-tools-wide {
    display: none;
  }
  .card-table td.row-actions {
    width: 1%;
    padding-inline: 4px;
  }
  .card-table .side-cell {
    width: 50%;
  }
  .row-tools-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .card-edit .edit-faces {
    grid-template-columns: 1fr;
  }
}

.box-badge {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: default;
}

.box-badge.learned {
  background: var(--accent-soft);
  color: var(--accent);
}

.box-badge.waiting {
  color: var(--muted);
}

/* Small square buttons with an icon (✎, ✕); 32px to be easy to tap */
.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.icon-btn:hover {
  border-color: var(--border);
  background: var(--surface-2);
}

.icon-btn.danger {
  color: var(--bad-text);
}

/* "Sure?" while a ✕ waits for its second tap */
.icon-btn.confirming {
  width: auto;
  padding: 0 6px;
  border-color: var(--bad);
  font-size: 0.75rem;
  font-weight: 600;
}

.pill {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.8rem;
  white-space: nowrap;
}

.pill-waiting {
  color: var(--muted);
}

.pill-learned {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}