/* ── Site menu (js/nav.js): a sidebar on wide screens (or a small bar at the top, folded with the
      button at its top left), tabs along the bottom on phones. It follows the current theme. ── */
:root {
  --nav-w: 118px; --nav-h: 64px;
  /* The status bar (clock, battery) of Lexify installed on an iPad/iPhone sits over the page: room for it */
  --sat: env(safe-area-inset-top, 0px);
  --nav-top-room: calc(76px + var(--sat));
}
/* A solid strip behind the status bar, so the page doesn't scroll (blurred) underneath it. The status
   bar's text is white (index.html: black-translucent), so the strip is dark: the theme's own background
   on dark themes, Lexify's deep purple on light ones. */
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--sat); background: #0a0718; z-index: 1250; pointer-events: none; }
html[data-mode="dark"] body::before { background: var(--body-bg); }
/* Every page starts below the status bar (the unit page and Live do this themselves) */
.screen:not(#screen-main):not(#screen-live) { padding-top: var(--sat); box-sizing: border-box; }

.site-nav {
  position: fixed; z-index: 1100; display: flex; color: var(--text);
  background: var(--body-bg); font-family: var(--font-mono);
  transition: background 0.35s, color 0.35s;
}
.nav-brand { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--font-serif); font-size: 22px; font-weight: 900; }
.nav-brand-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--purple, #7c3aed), var(--blue, #1a4de8)); }
.nav-brand-mark .ico { width: 22px; height: 22px; }
.nav-items { display: flex; }
.nav-item {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-secondary); text-decoration: none;
  font: 600 11px var(--font-mono); letter-spacing: 0.02em; border: 0; background: transparent; cursor: pointer; text-align: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.nav-item:hover { color: var(--text); background: var(--card-bg); }
.nav-item.active { color: var(--blue); background: var(--card-bg); box-shadow: inset 0 0 0 1.5px var(--card-border); }
.nav-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.nav-ico { width: 24px; height: 24px; flex: none; }
.nav-badge { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #e11d48; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.nav-badge[hidden] { display: none; }
.nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-fold {
  appearance: none; display: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-secondary);
}
.nav-fold:hover { color: var(--blue); }
.nav-fold .ico { width: 18px; height: 18px; }

/* Wide screens: sidebar — items fill it top to bottom, icon over label, centred */
@media (min-width: 900px) {
  .site-nav { top: 0; left: 0; bottom: 0; width: var(--nav-w); flex-direction: column; align-items: stretch; gap: 10px; padding: calc(12px + var(--sat)) 10px 14px; box-sizing: border-box; border-right: 1px solid var(--card-border); }
  .nav-fold { display: grid; align-self: flex-start; }
  .nav-brand > span:last-child { display: none; }
  .nav-items { flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
  .nav-item { flex: 1 1 0; min-height: 48px; flex-direction: column; border-radius: 16px; padding: 6px 4px; }
  .nav-item .nav-badge { position: absolute; top: 8px; right: 12px; }
  .nav-short, .nav-more { display: none !important; }
  .nav-foot { display: flex; flex-direction: column; gap: 6px; }
  .nav-foot .nav-item { flex: none; padding: 10px 4px; }
  html.has-nav:not(.nav-off) .screen { margin-left: var(--nav-w); width: calc(100% - var(--nav-w)); box-sizing: border-box; }
  html.has-nav:not(.nav-off) .archives-overlay { left: var(--nav-w); }

  /* Folded: a small floating bar at the top, centred (like the tab bar in Apple's iPad apps) */
  html.nav-compact .site-nav {
    top: calc(10px + var(--sat)); bottom: auto; left: 50%; transform: translateX(-50%); width: auto; max-width: calc(100% - 24px);
    flex-direction: row; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--card-border); border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  html.nav-compact .nav-fold { align-self: center; border-radius: 999px; }
  html.nav-compact .nav-brand, html.nav-compact .nav-foot { display: none; }
  html.nav-compact .nav-items { flex-direction: row; gap: 2px; }
  html.nav-compact .nav-item { flex: none; min-height: 0; flex-direction: row; gap: 6px; padding: 8px 12px; border-radius: 999px; font-size: 11px; }
  html.nav-compact .nav-ico { width: 18px; height: 18px; }
  html.nav-compact .nav-item .nav-badge { position: static; }
  /* The folded bar floats at the top (10px down, about 50px tall): everything starts below it */
  html.nav-compact.has-nav:not(.nav-off) .screen { margin-left: 0; width: 100%; padding-top: var(--nav-top-room) !important; } /* every page, unit pages too */
  html.nav-compact.has-nav:not(.nav-off) .archives-overlay { left: 0; top: var(--nav-top-room); }
  html.nav-compact.in-game .site-nav { opacity: 0.35; }
  html.nav-compact.in-game .site-nav:hover { opacity: 1; }
}
@media (min-width: 900px) and (max-width: 1180px) { html.nav-compact .nav-item .nav-label { display: none; } } /* icons only when it's tight */

/* Phones and tablets: bottom tabs + "More" sheet */
@media (max-width: 899px) {
  .site-nav { left: 0; right: 0; bottom: 0; flex-direction: column; border-top: 1px solid var(--card-border); padding-bottom: env(safe-area-inset-bottom); }
  .nav-brand, .nav-label { display: none; }
  .nav-items { order: 2; height: var(--nav-h); padding: 4px; box-sizing: border-box; gap: 2px; }
  .nav-item { flex: 1; height: 100%; flex-direction: column; gap: 3px; font-size: 10px; min-width: 0; padding: 4px 2px; border-radius: 14px; }
  .nav-item.extra { display: none; }
  .nav-item .nav-badge { position: absolute; top: 4px; left: calc(50% + 6px); }
  /* More: the extra items as a sheet above the tabs */
  html.nav-more-open .nav-item.extra, html.nav-more-open .nav-foot { display: flex; }
  html.nav-more-open .nav-items { height: auto; flex-wrap: wrap; }
  html.nav-more-open .nav-item.extra { order: -1; flex: 1 1 45%; height: auto; flex-direction: row; justify-content: flex-start; gap: 12px; font-size: 13px; padding: 14px 18px; }
  html.nav-more-open .nav-item.extra .nav-short { display: none; }
  html.nav-more-open .nav-item.extra .nav-label { display: inline; }
  html.nav-more-open .nav-item.extra .nav-badge { position: static; margin-left: auto; }
  html.nav-more-open .nav-item.main, html.nav-more-open .nav-more { flex: 1 1 18%; height: calc(var(--nav-h) - 8px); }
  .nav-foot { display: none; order: 1; padding: 8px 12px 0; }
  html.has-nav:not(.nav-off) .screen { padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); }
  html.has-nav.in-game .site-nav { display: none; }               /* full screen while playing */
  html.has-nav.in-game .screen { padding-bottom: 0; }
  html.has-nav:not(.nav-off):not(.in-game) .social-toasts { bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); }
}
html.nav-off .site-nav { display: none; }
.nav-install { color: var(--blue); }

/* ── Section pages (#account, #leaderboard, #friends, #play, #settings, #feedback) ── */
.page-wrap { max-width: 760px; margin: 0 auto; padding: 28px 16px 24px; box-sizing: border-box; }
#page-host .modal-overlay.as-page { position: static; inset: auto; display: block; background: none; padding: 0; backdrop-filter: none; animation: pageIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); z-index: auto; }
#page-host .modal-overlay.as-page.hidden { display: none; }
#page-host .as-page .modal { position: static; max-width: none; max-height: none; overflow: visible; border-radius: 22px !important; padding-bottom: 12px; box-shadow: none !important;
  background: var(--card-bg); border: 1px solid var(--card-border); animation: none; }
#page-host .as-page .modal-header { position: static; background: transparent; border-radius: 22px 22px 0 0; flex-wrap: wrap; gap: 8px; }
#page-host .as-page .modal-header h2 { font-size: 26px; }
#page-host .as-page .modal-close, #page-host .as-page #feedback-close, #page-host .as-page #modal-close { display: none; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }
.page-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.page-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; text-decoration: none; font: 700 12px var(--font-mono);
  color: var(--text-secondary); background: var(--card-bg); border: 1px solid var(--card-border); }
.page-tab .ico { width: 15px; height: 15px; }
.page-tab.on { color: #fff; background: var(--blue); border-color: var(--blue); }
.page-empty { text-align: center; padding: 18px 8px 8px; }
.page-empty h3 { font-family: var(--font-serif); font-size: 22px; margin: 4px 0 6px; color: var(--text); }
.page-empty p { color: var(--text-secondary); line-height: 1.5; margin: 0 auto 16px; max-width: 420px; }
.page-empty-btns, .dash-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.page-empty-btns .home-lb-btn, .play-card .home-lb-btn { color: var(--text); border-color: var(--card-border); background: var(--body-bg); }

/* Play page */
.play-card { padding: 16px; border-radius: 16px; background: var(--body-bg); border: 1px solid var(--card-border); margin-bottom: 12px; color: var(--text); }
.play-card h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 19px; margin: 0 0 4px; }
.play-card h3 .ico, .play-card h3 svg { width: 20px; height: 20px; color: var(--blue); }
.play-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.play-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.play-sub { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); margin: 12px 0 6px; }
.play-join .name-submit-row { display: flex; gap: 8px; }
.play-join .name-input { flex: 1; min-width: 0; }

/* ── Home dashboard (#screen-home) ── */
#screen-home { position: relative; min-height: 100vh; }
.dash { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 32px 20px 24px; box-sizing: border-box; color: #fff; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dash-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #a78bfa; margin-bottom: 4px; }
.dash-hello { font-family: var(--font-serif); font-size: clamp(28px, 4.4vw, 42px); font-weight: 900; margin: 0; line-height: 1.1; }
.dash #home-announcement.home-announcement { position: relative; inset: auto; max-width: none; margin: 0 0 14px; }
.dash #next-test-card { margin-bottom: 14px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 760px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card {
  padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(10px); animation: cardSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; min-width: 0;
}
.dash-card[hidden] { display: none; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.dash-card-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #c4b5fd; }
.dash-card-head h2 .ico { width: 16px; height: 16px; }
.dash-link { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.65); text-decoration: none; }
.dash-link:hover { color: #fff; }
.dash-muted { color: rgba(255, 255, 255, 0.65); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.dash-btns { justify-content: flex-start; }
.dash-btns .home-lb-btn { color: #fff; }
.dash-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.dash-tile { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 2px; }
.dash-tile span { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.6); }
.dash-tile strong { font-size: 22px; }
.dash-bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.dash-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.dash-bar span { width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.dash-bar em { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.55); }
.dash-friends { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: #86efac; text-decoration: none; }
.dash-friends i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
.dash-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.dash-unit {
  appearance: none; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-left: 4px solid var(--c); color: #fff; font: inherit;
  transition: transform 0.15s, background 0.15s;
}
.dash-unit:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.dash-unit strong { font-family: var(--font-serif); font-size: 18px; }
.dash-unit span { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.dash-misses { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-misses li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.dash-misses strong { font-size: 15px; }
.dash-misses span { font-size: 13px; color: rgba(255, 255, 255, 0.65); }
.dash-misses em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: #fda4af; }
.dash #wotd-card { margin: 0; }
.dash .home-notifs { margin-bottom: 14px; }
.dash-grid > .dash-card.wide { grid-column: 1 / -1; }
#screen-unit-select .unit-select-header .logo { font-size: clamp(34px, 5vw, 52px); margin-top: 4px; }

/* Christmas: the big tree stands at the right on wide screens; keep the dashboard clear of it */
@media (min-width: 1180px) {
  html[data-theme="christmas"] #screen-home, html[data-theme="christmas"] #screen-unit-select, html[data-theme="christmas"] #screen-page { padding-right: calc(clamp(200px, 19vw, 280px) + 24px); }
}

/* ── Study (#study): four cards side by side, then each subject's cards in a grid ── */
#screen-unit-select .unit-select-container { max-width: 1120px; position: relative; }
#screen-unit-select .unit-select-header { margin-bottom: 32px; }
.study-back { position: absolute; top: 22px; left: 24px; font: 700 12px var(--font-mono); color: rgba(255, 255, 255, 0.7); text-decoration: none; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); }
.study-back:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.study-back[hidden] { display: none; }
.study-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.study-card {
  appearance: none; cursor: pointer; font: inherit; text-align: left; color: #fff; display: flex; flex-direction: column; gap: 8px;
  min-height: 220px; padding: 22px; border-radius: 22px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 32%, transparent), rgba(255, 255, 255, 0.04) 70%);
  background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.13);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.25s;
  animation: cardSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.study-card:nth-child(2) { animation-delay: 0.06s; } .study-card:nth-child(3) { animation-delay: 0.12s; } .study-card:nth-child(4) { animation-delay: 0.18s; }
.study-card:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.study-card:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }
.study-card-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c); box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 45%, transparent); }
.study-card-icon .ico { width: 26px; height: 26px; }
.study-card-title { font-family: var(--font-serif); font-size: 26px; font-weight: 700; margin-top: 8px; }
.study-card-desc { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.72); flex: 1; }
.study-card-meta { font: 700 11px var(--font-mono); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); }
@media (min-width: 700px) {
  /* Centred rows: a row that isn't full sits in the middle instead of leaning left */
  #screen-unit-select .unit-cards:not(:has(.study-cards)) { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; align-items: stretch; }
  #screen-unit-select .unit-cards > .unit-card, #screen-unit-select .unit-cards > .pub-card { flex: 0 1 340px; min-width: 300px; margin: 0; box-sizing: border-box; }
  #screen-unit-select .unit-cards > .mylist-new-row, #screen-unit-select .unit-cards > .mylists-signin,
  #screen-unit-select .unit-cards > .pub-empty, #screen-unit-select .unit-cards > .pub-loading, #screen-unit-select .unit-cards > p,
  #screen-unit-select .unit-cards > .pub-card.open { flex: 0 0 100%; } /* full-width rows of their own */
}

/* Public Lists page */
.pub-card { padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.11); color: #fff; animation: cardSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; display: flex; flex-direction: column; }
.pub-card-top { display: flex; justify-content: flex-end; }
.pub-card .unit-badge { color: #93c5fd; border-color: rgba(147, 197, 253, 0.4); }
.pub-card h2 { font-family: var(--font-serif); font-size: 26px; margin: 6px 0 2px; }
.pub-by { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.6); margin: 0 0 8px; }
.pub-preview { font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; margin: 0 0 14px; flex: 1; }
.pub-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-btns .home-lb-btn { color: #fff; }
.pub-btns .name-submit-btn { white-space: nowrap; }
.pub-words { margin: 0 0 14px; }
.pub-words[hidden] { display: none; }
.pub-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pub-table th { text-align: left; font: 700 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #c4b5fd; padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.pub-table td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); vertical-align: top; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }
.pub-table td:first-child { width: 38%; }
.pub-table em { color: rgba(255, 255, 255, 0.55); font-size: 12px; }
.pub-faint { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.pub-empty { text-align: center; color: rgba(255, 255, 255, 0.65); line-height: 1.6; }
.pub-loading { display: flex; justify-content: center; padding: 30px 0; }
.pub-card .acct-error:empty { display: none; }
.pub-add-btn { appearance: none; cursor: pointer; border: 0; border-radius: 12px; padding: 10px 16px; font: 700 12px var(--font-mono); color: #fff; background: #2563eb; box-shadow: 0 3px 0 #1d4ed8; white-space: nowrap; }
.pub-add-btn:hover:not(:disabled) { background: #1d4ed8; }
.pub-add-btn:disabled { cursor: default; background: rgba(34, 197, 94, 0.18); color: #86efac; box-shadow: none; }

/* Home: every box the same — one gap between them, same corners, padding and look; cards side by side match heights */
.dash { display: flex; flex-direction: column; gap: 14px; }
.dash > *, .dash .dash-grid > *, .dash #next-test-card > *, .dash .home-notifs { margin: 0 !important; }
.dash-head { margin-bottom: 4px !important; }
.dash #next-test-card:not([hidden]) { display: flex; flex-direction: column; gap: 14px; }
.dash #home-announcement:empty, .dash #home-announcement[hidden] { display: none; }
.dash-grid { align-items: stretch; }
.dash #wotd-card { display: flex; }
.dash #wotd-card[style*="none"] { display: none !important; }
.dash .wotd-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dash .dash-card, .dash .wotd-inner, .dash .next-test, .dash #home-announcement.home-announcement, .dash .home-notif {
  border-radius: 20px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.dash .dash-card, .dash .wotd-inner { padding: 20px 22px !important; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.11); box-sizing: border-box; }
.dash .next-test { padding: 16px 22px; }
.dash .dash-card { display: flex; flex-direction: column; }
.dash .dash-card > .dash-bars, .dash .dash-units { margin-top: auto; }
.dash #wotd-card:not([style*="none"]) { display: flex !important; }
.dash .wotd-inner { margin: 0 !important; }
.dash .dash-card[hidden] { display: none !important; }
.dash .dash-units { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* buttons share the full width */

/* Custom Lists: the two buttons (New list, Add a shared list) side by side, centred */
#screen-unit-select .mylist-new-row { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; width: 100%; margin: 0; }
@media (max-width: 560px) { #screen-unit-select .mylist-new-row { grid-template-columns: 1fr; } #screen-unit-select .mylist-new-row .mylist-new:first-child { grid-column: auto; } }
#screen-unit-select .mylists-signin { max-width: 560px; margin: 0 auto; box-sizing: border-box; }

/* Unit header: just the title now (back, theme and settings buttons removed — use the menu or the browser) */
.main-header { justify-content: center; text-align: center; }
/* Keep studying: when the card stretches to match its neighbour, the unit buttons grow to fill it evenly */
.dash #dash-continue .dash-units { flex: 1 1 auto; margin-top: 0; grid-auto-rows: 1fr; align-content: stretch; min-height: 0; }
.dash #dash-continue .dash-unit { height: 100%; justify-content: center; box-sizing: border-box; }
.dash #dash-continue:not(.wide) .dash-units { grid-template-columns: 1fr; } /* half width: one column, buttons split the height evenly */
#dash-practice { white-space: nowrap; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
#dash-practice .ico { width: 15px; height: 15px; }