:root {
  --purple: #5146d9;
  --purple-dark: #3930b5;
  --purple-soft: #efedff;
  --ink: #171a2c;
  --muted: #686b7b;
  --line: #e2e3ec;
  --surface: #ffffff;
  --background: #f5f6fb;
  --success: #1eaa77;
  --danger: #e5484d;
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--background);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, #eceaff 0, var(--background) 42%); }
html:has(dialog[open]) {
  overflow: hidden;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(81,70,217,.25); outline-offset: 2px; }
#startStudyBtn { width:100% }
#nextReferenceDetailBtn, #previousReferenceDetailBtn{}
.app-shell { width: min(100%, 760px); margin: 0 auto; min-height: 100vh; padding: env(safe-area-inset-top) 18px calc(92px + env(safe-area-inset-bottom)); }
.app-header { display: flex; align-items: center; gap: 14px; padding: 14px 4px 14px; }
.app-header h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(135deg, var(--purple), #776df0); font-size: 1.55rem; }
.app-header .install-btn { margin-left: auto; }
.eyebrow {
  width: 100%;
  margin: 0px;
  padding: 2px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.view {
  display: none;
}

.view.active {
  display: block;
}

.view.view-enter {
  animation: view-up-in .22s ease both;
}

@keyframes view-up-in {
  from {
    opacity: .25;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.panel, .hero-panel { background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.hero-panel { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; background: linear-gradient(135deg, #f0efff, #fbfbff); }
.hero-panel .primary-btn { grid-column: 2; justify-self: start; }
.hero-panel h2, .section-heading h2, .page-heading h2 { margin: 0; }
.hero-panel p:not(.eyebrow) { margin: 6px 0 0; color: var(--ink); font-family: Calibri, 'Trebuchet MS', sans-serif;}
.hero-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: white; font-size: 2rem; grid-row: span 2; }
.section-heading { margin-bottom: 14px; }
.section-heading.row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.segment { border: 0; background: white; padding: 14px 10px; color: var(--ink); }
.segment.active { background: var(--purple); color: white; }
.primary-btn, .secondary-btn, .text-btn { border: 0; border-radius: 14px; padding: 13px 18px; font-weight: 750; align-items: center;}
.primary-btn { background: var(--purple); color: white; }
.primary-btn:hover { background: var(--purple-dark); }
.primary-btn.compact { padding: 10px 14px; }
.secondary-btn { display: inline-flex; justify-content: center; background: white; color: var(--ink); border: 1px solid var(--line); }
.text-btn { padding: 8px; color: var(--purple); background: transparent; }
.full { width: 100%; margin-top: 12px; text-align: center; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.stat-card { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 16px 10px; text-align: center; }
.stat-card span { display: block; color: var(--muted); font-size: .82rem; }
.stat-card strong { display: block; margin-top: 5px; font-size: 1.6rem; }
.category-manager-list{ padding-top: 16px }
.category-list, .term-list, .category-manager-list, .category-stats, .category-page-list { display: grid; gap: 10px; }
.term-list { padding-top: 12px }
.category-page-list { margin-top: 12px; }
.category-row, .term-row, .manager-row, .category-stat-row { display: flex; gap: 10px; align-items: center; border: 0px; border-radius: 16px; padding: 14px; background: white; }
.category-row label { display: flex; gap: 12px; align-items: center; flex: 1; cursor: pointer; }
.category-row input { width: 20px; height: 20px; accent-color: var(--purple); }
.category-icon { width: 40px; height: 40px; display: grid; place-items: center; background: var(--purple-soft); border-radius: 12px; }
.category-meta, .term-main { min-width: 0; flex: 1; }
.category-meta strong, .term-main strong { display: block; }
.category-meta strong, .term-category-label { font-size: .8em;}
.category-meta small, .term-main p { color: var(--muted); margin: 3px 0 0; font-family: Calibri, 'Trebuchet MS', sans-serif; font-weight: 400;}
.term-main p { text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 
  font-family: Calibri, 'Trebuchet MS', sans-serif;}
.category-page-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: white;
}
.category-page-main { min-width: 0; display: grid; gap: 7px; }
.category-page-title-line { min-width: 0; display: block; font-size: clamp(.8rem, 2.2vw, 1em);}
.category-page-title-line strong { min-width: 0; overflow-wrap: anywhere; }
.category-page-main > small { color: var(--muted); font-family: Calibri, 'Trebuchet MS', sans-serif;}
.category-page-mastery { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.category-page-mastery .mastery-badge { width: max-content; max-width: 100%; justify-self: start; white-space: nowrap; }
.category-page-mastery-bar { flex: 1 1 auto; min-width: 48px; width: auto; }
.category-page-mastery-bar > span { background: var(--category-color, var(--purple)); }
.category-page-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 520px) {
  .category-page-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; }
  .category-page-actions { grid-column: 3; }
  .category-page-mastery { grid-column: 1 / -1; }
}

/* Common Tests selection: mirrors the selected-tubes summary with test chips. */
#commonTestsOptionsPanel:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.common-test-selection-summary {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.selected-tests-summary-heading {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.selected-common-tests-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 12px 12px;
  overflow: scroll;
  max-height: 234px;
}

.selected-common-test-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  gap: 8px;
  background: #fff;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.15;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}

.selected-common-test-chip > span:last-child {
  display: inline-block;
  line-height: 1;
  transform: translateY(-1px);
}

#openCommonTestsPickerBtn {
  align-self: flex-start;
  margin-top: 10px;
}

.search-field {
  position: relative;
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
}

.search-field input[type="search"] {
  width: 100%;
  margin: 0;
  padding-right: 48px;
}

.search-field input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.search-clear-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.search-clear-btn > i {
  line-height: 1;
}

.search-clear-btn:hover {
  background: var(--soft);
  color: var(--ink);
}

.search-clear-btn:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.search-clear-btn[hidden] {
  display: none;
}

.common-tests-picker-list {
  display: grid;
  gap: 8px;
  padding-right: 4px;
}

.common-test-picker-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.common-test-picker-choice input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--purple);
}

.common-test-picker-choice input:disabled,
.common-test-picker-choice:has(input:disabled) {
  cursor: default;
  opacity: .52;
}

.common-test-picker-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  width: 100%;
}

.common-test-picker-copy strong,
.common-test-picker-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.common-test-picker-copy small {
  color: var(--muted);
}

.common-test-picker-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  font-size: .8em ;
}

.common-test-picker-title > span:last-child {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  transform: translateY(-1px);
}

.common-test-tube-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 0;
  border-radius: 50%;
  background: var(--test-tube-color, var(--purple));
}

.common-tests-picker-sort {
  flex: 0 0 auto;
  margin: 0 0 12px;
}

.common-test-picker-mastery {
  width: 100%;
  height: 7px;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #ececf2;
}

.common-test-picker-mastery > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--test-tube-color, var(--purple));
}

.needle-picker-choice .common-test-picker-mastery > span {
  background: var(--needle-color, var(--purple));
}

.needle-picker-choice .common-test-picker-mastery.mastered > span {
  background: #86d69a;
}

.category-chip { display: inline-block; margin-top: 8px; padding: 4px 8px; border-radius: 999px; 
  background: color-mix(in srgb, var(--category-color, var(--purple)) 12%, transparent); color: var(--purple-dark); font-size: .75rem; }
.icon-btn {   min-width: 42px; width: 42px; height: 42px; border: 1px solid var(--line); background: white; border-radius: 13px; display: grid; place-items: center; color: var(--ink); }
.icon-btn.mini { border-radius: 8px;}
.page-heading { margin: 10px 0 16px; }
.search-field input, .field-label input, .field-label select, .field-label textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; background: white; color: var(--ink); }
.field-label { display: block; color: var(--ink); font-weight: 700; margin-bottom: 12px; }
.field-label input, .field-label select, .field-label textarea { display: block; margin-top: 7px; font-weight: 400; }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%,760px); display: grid; grid-template-columns: repeat(5,1fr); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.nav-item { border: 0; background: transparent; color: var(--muted); display: grid; gap: 3px; justify-items: center; padding: 7px; font-size: .78rem !important; font-family: Calibri, 'Trebuchet MS', sans-serif; font-weight: 400 !important;}
.nav-item span { font-size: 1.35rem;}
.nav-item.active { color: var(--purple); }
.study-toolbar { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.progress-track { height: 6px; background: #e8e8ef; border-radius: 999px; overflow: hidden; margin: 18px 0 28px; }
.progress-bar { height: 100%; background: var(--purple); width: 0; transition: width .2s ease; }
.side-label { color: var(--purple); font-weight: 800; letter-spacing: .12em; font-size: .78rem; }
.flashcard { 
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard syntax */ 
  width: 100%; min-height: 340px; border: 1px solid var(--line); border-radius: 24px; background: white; padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; color: var(--ink); box-shadow: 0 18px 42px rgba(37,39,70,.08); }
.flashcard span { font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 750; line-height: 1.3; }
.flashcard small { color: var(--muted); }
.study-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 22px; }
.study-action { border: 1px solid var(--line); background: white; border-radius: 16px; padding: 13px 6px; display: grid; gap: 5px; }
.study-action span { font-size: 1.4rem; }
.study-action.danger { color: var(--danger); }
.study-action.success { color: var(--success); }
.study-action:disabled { opacity: .42; cursor: not-allowed; }
.modal { border: 0; background: transparent; padding: 0px;}
.modal-card { background: var(--background); border-radius: 24px; padding: 20px; max-height: calc(100vh - 36px); overflow: auto; min-width: min(calc(100vw - 36px),500px); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.inline-add { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-bottom: 10px;}
.inline-add .field-label { margin-bottom: 0; }
.manager-row button { margin-left: auto; }
.category-stat-row { display: grid; grid-template-columns: 1fr auto; }
.stat-bar { grid-column: 1 / -1; height: 9px; border-radius: 999px; background: #ececf2; overflow: hidden; }
.stat-bar > span { display: block; height: 100%; background: var(--purple); }
.danger-text { color: var(--danger); }
.file-btn { cursor: pointer; }
.empty-state { text-align: center; color: var(--muted); padding: 28px 14px; border: 1px dashed var(--line); border-radius: 16px; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: white; padding: 11px 15px; border-radius: 999px; transition: .2s ease; }
.toast.show {
  display: block;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 520px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .hero-panel { grid-template-columns: auto 1fr; }
  .stats-grid { gap: 7px; }
  .stat-card strong { font-size: 1.25rem; }
  .study-actions { gap: 7px; }
  .inline-add { grid-template-columns: 1fr; }
}

/* Study mode: keep the complete game surface inside the visible viewport. */
body.study-mode { overflow: hidden; }
body.study-mode .app-header { display: none; }
body.study-mode .app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom));
}
body.study-mode main { height: 100%; min-height: 0; }
#studyView.active {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: clamp(6px, 1.3vh, 14px);
  overflow: visible;
}
#studyView .study-toolbar { margin: 0; min-height: 42px; }
#studyView .progress-track { margin: 0; }
#studyView .side-label { margin: 0; }
#studyView .flashcard {
  min-height: 0;
  height: 100%;
  padding: clamp(16px, 3.5vh, 30px);
  gap: clamp(10px, 2vh, 24px);
  overflow: hidden;
  will-change: transform, opacity;
  touch-action: manipulation;
  max-height: 300px;
  margin: auto;
  max-width: max(50vw,400px);
}
#studyView .flashcard-copy {
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  font-size: clamp(1.15rem, min(5vw, 4vh), 2.2rem);
}
#studyView .study-actions { margin: 0; }

/* Directional card transitions. */
.flashcard.card-exit-left { animation: cardExitLeft 180ms ease-in forwards; pointer-events: none; }
.flashcard.card-exit-right { animation: cardExitRight 180ms ease-in forwards; pointer-events: none; }
.flashcard.card-enter-right { animation: cardEnterRight 230ms cubic-bezier(.2,.75,.25,1) both; }
.flashcard.card-enter-left { animation: cardEnterLeft 230ms cubic-bezier(.2,.75,.25,1) both; }
@keyframes cardExitLeft {
  to { opacity: 0; transform: translateX(-18%) scale(.97); }
}
@keyframes cardExitRight {
  to { opacity: 0; transform: translateX(18%) scale(.97); }
}
@keyframes cardEnterRight {
  from { opacity: 0; transform: translateX(18%) scale(.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes cardEnterLeft {
  from { opacity: 0; transform: translateX(-18%) scale(.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-height: 650px) {
  #studyView.active { gap: 6px; }
  #studyView .study-toolbar { min-height: 38px; }
  #studyView .icon-btn { width: 38px; height: 38px; }
  #studyView .study-action { padding: 8px 4px; gap: 2px; font-size: .78rem; }
  #studyView .study-action span { font-size: 1.1rem; }
  #studyView .flashcard small { font-size: .75rem; }
}

@media (min-width: 760px) and (min-height: 700px) {
  body.study-mode .app-shell { width: min(100%, 920px); padding-left: 28px; padding-right: 28px; }
  #studyView .flashcard { justify-self: center; }
  #studyView .study-actions { width: min(100%, 760px); justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .flashcard.card-exit-left,
  .flashcard.card-exit-right,
  .flashcard.card-enter-right,
  .flashcard.card-enter-left { animation-duration: 1ms; }
  .progress-bar, .view.view-enter, .toast { transition-duration: 1ms; animation-duration: 1ms; }
}

/* The primary navigation is never shown while a study session is active. */
body.study-mode .bottom-nav,
.bottom-nav[hidden] {
  display: none !important;
}

/* True 3D card flip. The outer button owns slide-in/out motion; the complete inner card shell flips. */
.flashcard {
  perspective: 1200px;
  -webkit-perspective: 1200px;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 24px;
  box-shadow: none;
}
#studyView .flashcard {
  padding: 0;
  gap: 0;
  overflow: visible;
}
.flashcard-inner {
  border-radius: 16px; 
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: visible;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.2,.72,.2,1);
  transform-origin: center center;
  will-change: transform;
}
.flashcard.is-flipped .flashcard-inner {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}
/* Disable the 3D transition while a new card is being prepared off-screen. */
.flashcard.suppress-flip-animation .flashcard-inner,
.flashcard.suppress-flip-animation .flashcard-face {
  transition: none !important;
}
.flashcard-face {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard syntax */ 
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vh, 24px);
  padding: clamp(16px, 3.5vh, 30px);
  border: 1px solid var(--line);
  border-radius: inherit;
  background: white;
  box-shadow: 0 18px 42px rgba(37,39,70,.08);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: visibility 0s linear 260ms;
}
.flashcard-front {
  z-index: 2;
  visibility: visible;
  transform: rotateY(0deg) translateZ(1px);
  -webkit-transform: rotateY(0deg) translateZ(1px);
}
.flashcard-back {
  z-index: 1;
  visibility: hidden;
  transform: rotateY(-180deg) translateZ(1px);
  -webkit-transform: rotateY(-180deg) translateZ(1px);
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.flashcard.is-flipped .flashcard-front {
  visibility: hidden;
}
.flashcard.is-flipped .flashcard-back {
  visibility: visible;
}

.face-kicker {
  position: absolute;
  top: clamp(14px, 2.5vh, 24px);
  left: clamp(16px, 3vw, 28px);
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em;
  color: var(--purple);
  background: var(--purple-soft);
  border-radius: 999px;
  padding: 5px 9px;
}

.flashcard-copy {
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  font-size: clamp(1.15rem, min(5vw, 4vh), 2.2rem);
  font-weight: 500 !important;
  line-height: 1.3;
  padding:20px;
}

@media (prefers-reduced-motion: reduce) {
  .flashcard-inner { transition-duration: 1ms; }
}

/* Multi-category term selection */
.category-fieldset { border: 0; padding: 0; min-width: 0; }
.category-fieldset legend { padding: 0; font-weight: 700; }
.field-help { margin: 5px 0 9px; color: var(--muted); font-size: .84rem; font-weight: 400; font-family: Calibri, 'Trebuchet MS', sans-serif;}
.term-category-choices, .category-list, .category-manager-list, .category-color-picker, .tube-picker, .activity-options{ display: grid; gap: 8px; max-height: 210px; overflow-y: auto; padding: 3px; border: 1px solid var(--line); border-radius: 18px;}
.category-manager-list {
  max-height: 400px;
  background: white;
}

.category-list,.category-manager-list{
  padding: 0px;
  gap: 0px;
}

.category-list{
  max-height: 400px;
}

.category-row, .manager-row{
  border: none;
  border-radius: 0px;
  border-bottom: 1px solid var(--line);
}

.no-scroll{
  overflow: visible;
  border: 0px;
  max-height: none;
}



.term-category-option { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: white; cursor: pointer; font-weight: 600; }
.term-category-option:has(input:checked) { /*border-color: var(--purple); background: var(--purple-soft); color: var(--purple-dark); */}
.term-category-option input { width: 19px; height: 19px; margin: 0; accent-color: var(--purple); flex: 0 0 auto; }
.category-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.category-chips .category-chip { margin-top: 0; }
.term-mastery-row { display:flex; align-items:center; gap:10px; margin-top:8px; width:100%; }
.term-mastery-row .mastery-badge { white-space:nowrap; }
.term-mastery-bar { flex:1 1 auto; min-width:52px; height:7px; overflow:hidden; border-radius:999px; background:#e8e8ef; }
.term-mastery-bar > span { display:block; height:100%; border-radius:inherit; background:var(--purple); }
.term-mastery-bar.mastered > span { background:#86d69a; }
.term-category-option input[type="checkbox"] { width: 19px; height: 19px; padding: 0; border: 0; border-radius: 0; background: transparent; appearance: auto; display: block; margin: 0; }

/* Game type selector */
.activity-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.activity-option { min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: white; color: var(--ink); }
.activity-option.active { border-color: var(--purple); background: var(--purple-soft); }
.activity-option > span:last-child { display: grid; gap: 3px; min-width: 0; }
.activity-option small { color: var(--muted); line-height: 1.3; }
.activity-icon { width: 38px; height: 38px; flex: 0 0 auto; display: flex; place-items: center; border-radius: 12px; background: var(--purple-soft); color: var(--purple); font-weight: 800; }
.activity-option.active .activity-icon { background: var(--purple); color: white; }

/* Definition match game */
body.match-mode { overflow: hidden; }
body.match-mode .app-header { display: none; }
body.match-mode .app-shell { width: min(100%, 1180px); height: 100vh; height: 100dvh; min-height: 0; padding: max(10px, env(safe-area-inset-top)) 18px max(10px, env(safe-area-inset-bottom)); }
body.match-mode main { height: 100%; min-height: 0; }
body.match-mode .bottom-nav { display: none !important; }
body.results-mode .app-shell {
  padding: 0;
}
body.results-mode main { overflow: visible; }
#matchView.active { height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; overflow: hidden; }
.match-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
.match-toolbar p { margin: 0; font-weight: 700; }
.match-progress-track { margin: 0; }
.match-board { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: clamp(10px, 1.8vh, 20px); padding: clamp(14px, 2.2vh, 24px); background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 42px rgba(37,39,70,.07); overflow: hidden; }
.match-kicker { justify-self: start; margin: 0; padding: 6px 11px; border-radius: 999px; background: var(--purple-soft); color: var(--purple); font-size: .78rem; font-weight: 850; letter-spacing: .1em; }
.match-stage { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .62fr) minmax(0, 1.08fr); }
.match-column { position: relative; z-index: 2; display: grid; grid-template-rows: repeat(var(--match-count, 4), minmax(0, 1fr)); gap: clamp(7px, 1.2vh, 13px); min-height: 0; }
.match-terms { grid-column: 1; }
.match-definitions { grid-column: 3; }
.match-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.match-connector { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.match-connector.animate-in { animation: drawConnector .35s ease both; }
@keyframes drawConnector { from { stroke-dasharray: 8 8; opacity: .25; } to { stroke-dasharray: none; opacity: 1; } }
.match-item { max-height: 140px; position: relative; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: white; color: var(--ink); text-align: left; box-shadow: 0 5px 14px rgba(37,39,70,.055); transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.match-item:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(37,39,70,.08); }
.term-match-item.selected { border-color: var(--match-color); background: color-mix(in srgb, var(--match-color) 8%, white); box-shadow: 0 0 0 2px color-mix(in srgb, var(--match-color) 22%, transparent); }
.match-item.matched { cursor: default; }
.match-item-text { min-width: 0; max-width: 100%; flex: 1 1 auto; overflow: auto; overflow-wrap: normal; hyphens: inherit; scrollbar-width: none; -ms-overflow-style: none; line-height: 1.35; font-weight: 650; text-align: center; padding: 10px;}
.match-item-text::-webkit-scrollbar { display: none; width: 0; height: 0; }
.definition-match-item { padding-left: clamp(20px, 3.6vh, 32px); }
.definition-match-item .match-item-text { font-weight: 500; padding: 4px; padding-right: 0px; text-align: left; font-family: Calibri, 'Trebuchet MS', sans-serif;}
.term-match-item .match-item-text { padding: 10px; font-weight: 550;}
.match-node { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: var(--match-color); border: 6px solid white; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--match-color) 55%, white); }
.term-node { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); }
.definition-node { position: absolute; left: -10px; top: 50%; transform: translateY(-50%); }
.definition-match-item:not(.matched) { --match-color: #9295a3 !important; }
.definition-match-item.incorrect { animation: matchShake .35s ease; border-color: var(--danger); }
.definition-match-item.hinted { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(81,70,217,.16); }
@keyframes matchShake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.match-footer {
  min-height: 88px;
  box-sizing: border-box;
  padding-top: 14px;
}
.match-footer .hint-btn,
.match-footer .primary-btn {
  min-width: min(220px, 42vw);
  min-height: 54px;
  justify-content: center;
}
/* Reserve the same feedback row used by the other games so revealing the
   success message never shifts the Definition Match board. */
#matchView .match-complete {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  width: 100%;
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  padding: 9px 16px;
  overflow: visible;
  font-size: 14px;
  line-height: 1.2;
}
#matchView .match-complete strong {
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}
#matchView .match-complete span {
  max-width: 100%;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}
#matchView .match-complete[hidden] {
  display: grid !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.hint-btn { border: 0; border-radius: 999px; padding: 11px 18px; background: var(--purple-soft); color: var(--purple); font-weight: 800; }
.hint-btn span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 5px; border-radius: 999px; background: var(--purple); color: white; }
.hint-btn:disabled { opacity: .45; cursor: default; }
.match-complete strong, .match-complete span { display: block; }

@media (max-width: 700px) {
  .activity-options { grid-template-columns: 1fr; }
  body.match-mode .app-shell { padding-left: 10px; padding-right: 10px; }
  .match-board { padding: 12px; gap: 9px; }
  .match-stage { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1.18fr); }
  .match-item { padding: 8px 10px; border-radius: 12px; gap: 7px; }
  .definition-match-item { padding-left: 20px; }
  .match-item-text { font-size: clamp(.68rem, 2.6vw, .88rem); line-height: 1.23; }
  .match-node { width: 16px; height: 16px; border-width: 5px; }
  .term-node { right: -8px; }
  .definition-node { left: -8px; }
  .match-footer { min-height: 76px; padding-top: 10px; justify-content: center; gap: 8px; }
  .match-footer .hint-btn, .match-footer .primary-btn {
    min-width: min(150px, 44vw);
    min-height: 54px;
  }
  .hint-btn { padding: 8px 13px; }
}

@media (max-height: 650px) {
  .match-board { padding-top: 10px; padding-bottom: 10px; gap: 7px; }
  .match-kicker { padding: 4px 8px; }
  .match-item { padding-top: 6px; padding-bottom: 6px; }
  .match-footer { min-height: 68px; }
  .match-footer .hint-btn,
  .match-footer .primary-btn { min-height: 46px; }
}


@media (max-width: 700px) {
  #matchView .match-complete {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    padding: 8px 10px;
  }
  #matchView .match-complete strong { font-size: 15px; }
  #matchView .match-complete span { font-size: 12.5px; }
}

/* Definition match results */
#matchResultsView.active,
#orderResultsView.active,
#commonResultsView.active,
#needleResultsView.active {
  --results-shadow-clearance: clamp(42px, 5vh, 48px);
  height: 100%;
  min-height: 0;
  overflow: visible;
  padding: var(--results-shadow-clearance) clamp(18px, 3vw, 32px);
}
.results-page {
  --results-page-padding: clamp(18px, 3vw, 34px);
  --results-page-radius: 24px;
  width: min(100%, 820px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--results-page-padding);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--results-page-radius);
  box-shadow: 0 12px 28px rgba(37,39,70,.12);
}
.results-page > * { flex-shrink: 0; }
.results-header { text-align: center; }
.results-header .match-kicker { display: inline-block; }
.results-header h2 { margin: 12px 0 5px; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.results-header > p:last-child { margin: 0; color: var(--muted); font-family: Calibri, 'Trebuchet MS', sans-serif;}
.results-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.results-summary div { padding: 14px 10px; text-align: center; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft, #f8f8fd); }
.results-summary span { display: block; font-size: clamp(1.25rem, 4vw, 1.8rem); font-weight: 850; color: var(--purple); }
.results-summary small { color: var(--purple-light); }
.results-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: auto; align-items: start; }
.results-page .study-options-panel, .results-groups {padding-bottom:60px;}
.results-group { min-width: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.results-group h3 { margin: 0; display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; font-size: 1rem; }
.results-group h3 b { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; font-size: .82rem; }
.correct-results h3 { color: var(--success); background: color-mix(in srgb, var(--success) 8%, white); }
.correct-results h3 b { background: color-mix(in srgb, var(--success) 15%, white); }
.incorrect-results h3 { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, white); }
.incorrect-results h3 b { background: color-mix(in srgb, var(--danger) 13%, white); }
.results-list { list-style: none; padding: 8px 14px; margin: 0; display: grid; gap: 2px; }
.results-list li { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.results-list li:last-child { border-bottom: 0; }
.results-list li > span:last-child { min-width: 0; display: grid; gap: 2px; }
.results-list strong { overflow-wrap: anywhere; }
.results-list small { color: var(--muted); line-height: 1.3; font-family: Calibri, 'Trebuchet MS', sans-serif;}

.result-term-details { min-width: 0; display: grid; gap: 3px; width: 100%; }
.result-mastery { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; margin-top: 5px; }
.result-mastery .mastery-badge { font-size: .68rem; }
.result-mastery small { font-size: .78rem; font-weight: 700; }
.result-status { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }
.result-status.success { color: var(--success); background: color-mix(in srgb, var(--success) 12%, white); }
.result-status.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, white); }
.results-empty { color: var(--muted); font-size: .9rem; font-family: Calibri, 'Trebuchet MS', sans-serif;}
.results-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 0px!important}
#studyOptionsView .results-actions,
#matchResultsView .results-actions,
#orderResultsView .results-actions,
#commonResultsView .results-actions,
#needleResultsView .results-actions {
  position: sticky;
  z-index: 8;
  bottom: 0;
  isolation: isolate;
  margin-inline: calc(-1 * var(--results-page-padding));
  margin-bottom: calc(-1 * var(--results-page-padding));
  padding: 20px var(--results-page-padding) 12px;
  border-top: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 0 18px #fff;
}
.secondary-btn { min-height: 48px; border: 1px solid var(--purple); border-radius: 14px; background: white; color: var(--purple); font-weight: 750; }
@media (max-width: 620px) {
  #matchResultsView.active,
#orderResultsView.active,
#commonResultsView.active,
#needleResultsView.active {
    --results-shadow-clearance: 42px;
    padding-right: 12px;
    padding-left: 12px;
  }
  .results-page { --results-page-padding: 12px; --results-page-radius: 18px; padding: 16px var(--results-page-padding) var(--results-page-padding); gap: 14px; }
  .results-summary { gap: 6px; }
  .results-summary div { padding: 10px 5px; }
  .results-summary small { font-size: .68rem;}
  .results-groups { grid-template-columns: 1fr; }
}

/* Flash Card completion options */
.study-options-page { max-width: 720px; }
.study-options-panel { display: grid; gap: 14px; min-height: 0; }
.study-options-panel .section-heading h3 { margin: 2px 0 0; font-size: 1.2rem; }
.study-options-summary { margin: 0; color: var(--muted); text-align: center; font-weight: 650; }
@media (max-width: 560px) {
  .study-options-page { --results-page-padding: 12px; --results-page-radius: 18px; padding: 16px var(--results-page-padding) var(--results-page-padding); gap: 14px; }
}

.term-title-line, .term-stat-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mastery-badge { flex:0 0 auto; font-size:.78rem; font-weight:800; color:#6047f5; background:#eeeaff; border-radius:999px; padding:4px 8px; }
.mastery-badge.mastered { color:#087a4d; background:#dcf8eb; }
.term-performance { display:block; margin-top:9px; font-size:.75rem; color:var(--muted); font-weight:700; }
.term-stats-list { display:grid; gap:10px; }
.term-stat-row { border:1px solid var(--line); border-radius:16px; padding:14px; background:#fff; }
.term-stat-meta { display:flex; flex-wrap:wrap; gap:6px 12px; margin:8px 0; color:var(--muted); font-size:.78rem; font-weight:700; }


/* Order of draw activity */
.activity-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tube-picker { 
  display: grid; 
  grid-template-columns: repeat(3, minmax(0,1fr)); 
  gap: 0px;
  padding: 0px;
  max-height: 400px;
  background: white;
}
.tube-choice {  display: flex; align-items: center; gap: 12px; padding: 12px; border: 0px; border-radius: 0px; background: white; cursor: pointer; }

.tube-choice input { width: 19px; height: 19px; accent-color: var(--purple); }
.tube-choice > span:last-child { display: grid; gap: 2px; min-width: 0; }
.tube-choice small { color: var(--muted); }
.mini-tube { overflow:hidden; position: relative; width: 20px; height: 45px; flex: 0 0 auto; border: 2px solid #a7a0ff; border-radius: 5px 5px 9px 9px; background: linear-gradient(90deg,#fff,#eef0f5 52%,#fff); }
.mini-tube::before {   mix-blend-mode: multiply; content:""; position:absolute; left:-3px; right:-3px; top:-4px; height:13px; border-radius:5px; background:var(--tube-cap-bg,var(--tube-cap)); }
.mini-tube i { position:absolute; left:2px; right:2px; bottom:3px; height:8px; border-radius:0 0 6px 6px; background:var(--tube-additive-color, transparent); }
.mini-tube::after { content: ""; position: absolute; left: 2px; right: 9px; top: 12px; height: 16px; border-radius: 4px; background: var(--tube-label-color,transparent); }
.tube-selection-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

body.order-mode { overflow: hidden; }
body.order-mode .app-header { display:none; }
body.order-mode .app-shell { width:min(100%,1380px); height:100vh; height:100dvh; min-height:0; padding:max(8px,env(safe-area-inset-top)) clamp(7px,1.4vw,18px) max(8px,env(safe-area-inset-bottom)); }
body.order-mode main { height:100%; min-height:0; }
body.order-mode .bottom-nav { display:none !important; }
#orderDrawView.active { height:100%; min-height:0; display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:clamp(5px,1vh,10px); overflow:hidden; }
.order-toolbar { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; min-height:42px; }
.order-toolbar p { margin:0; font-weight:700; text-align:center; }
.order-toolbar-spacer { width:44px; height:44px; }
.order-progress-track { margin:0; }
.order-board { min-height:500px; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto; gap:clamp(5px,1.25vh,14px); padding:clamp(8px,1.8vh,20px); background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 42px rgba(37,39,70,.07); overflow:hidden; }
.order-instructions { text-align:center; }
.order-instructions h2 { margin:0; font-size:clamp(.92rem,1.8vw,1.22rem); }
.order-instructions p { margin:4px 0 20px 0; color:var(--muted); font-size:clamp(.78rem,1.4vw,.95rem); }
.tube-order-list { justify-content: center; min-height:0; width:100%; display:flex; align-items:stretch; gap:var(--tube-gap); overflow:visible; padding:4px 1px 6px; margin: auto;}
.tube-card {  box-shadow:none!important; border:none!important; background: none!important; position:relative; flex:1 1 0; max-width: 100px; max-height:250px; min-width:0; width:calc((100% - (var(--tube-count) - 1) * var(--tube-gap)) / var(--tube-count)); display:grid; grid-template-rows:auto minmax(0,1fr); justify-items:center; gap:clamp(2px,.6vh,6px); padding:0px; border-radius:clamp(7px,1.2vw,15px); user-select:none; touch-action:none; cursor:grab; transition:border-color .12s,box-shadow .12s,transform .12s; }
.tube-card:active { cursor:grabbing; }
.tube-card.drag-floating { position:fixed !important; z-index:1000; flex:none; margin:0; opacity:1 !important; cursor:grabbing; pointer-events:none; transform:scale(1.02); animation: none; transition: none;}

.tube-card.drag-floating .drag-dots { visibility: hidden; }
.tube-drop-placeholder { border: none; position:relative; flex:1 1 0; max-width: 100px; max-height:300px; min-width:0; width:calc((100% - (var(--tube-count) - 1) * var(--tube-gap)) / var(--tube-count)); border-radius:clamp(7px,1.2vw,15px); background:rgba(81,70,217,.07); box-shadow:inset 0 0 0 3px rgba(81,70,217,.05); visibility: hidden;}
.tube-drop-placeholder::after { content:"Place here"; position:absolute; inset:0; display:grid; place-items:center; color:var(--purple); font-size:clamp(.35rem,.72vw,.62rem); font-weight:800; writing-mode:vertical-rl; transform:rotate(180deg); text-transform:uppercase; letter-spacing:.04em; }
.tube-card.hinted-tube { box-shadow:none!important; border:none!important; background: none!important; }
.drag-dots { color:#d9dadf; font-size:clamp(.78rem,1.8vw,1.1rem); line-height:1; }
.blood-tube {  box-shadow:none!important; border:none!important; background: none!important; position:relative; width:min(72%,62px); min-height:0; display:flex; flex-direction:column; align-items:center; padding-top:50px /*clamp(21px,5.5vh,40px)*/; filter:drop-shadow(0 5px 4px rgba(30,32,50,.11)); height: max(240px, 25vh);max-height: 300px;}
.tube-cap { position:absolute; top:0; width:88%; height: auto; aspect-ratio: 1/1.1; border-radius:clamp(4px,.8vw,8px) clamp(4px,.8vw,8px) 5px 5px; background:var(--tube-cap-bg,linear-gradient(90deg,color-mix(in srgb,var(--tube-cap) 82%,black),var(--tube-cap) 48%,color-mix(in srgb,var(--tube-cap) 78%,white))); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08), 0 8px 12px color-mix(in srgb, var(--tube-cap) 28%, transparent); z-index: 1;}
.tube-cap::after { content: ""; position: absolute; inset: 13% 4%; opacity: .3; background: repeating-linear-gradient(90deg,transparent 2px 5px,rgb(0, 0, 0) 10px 12px); mix-blend-mode: soft-light;}

/* Pearl top cap: tube-specific background only. */
.tube-cap.pearl-cap {
  background: var(--tube-cap-bg,linear-gradient(90deg,rgb(242, 222, 242),#fcf6ff 48%,color-mix(in srgb,var(--tube-cap) 78%,white)));
}

.mini-tube.pearl-mini::before {
  background: var(--tube-cap-bg,linear-gradient(90deg,rgb(242, 222, 242),#fcf6ff 48%,color-mix(in srgb,var(--tube-cap) 78%,white)));
}
.tube-neck { background: #00000006; height: auto; aspect-ratio: 2; flex:0 0 auto; border:2px solid #00000020; border-bottom:2px solid #00000016; z-index: -1; mix-blend-mode: multiply; opacity: .75; backdrop-filter: blur(10rem) !important; -webkit-backdrop-filter: blur(10rem) !important; min-height: 30px; overflow: hidden;}
.tube-spacer{ flex:0.7; };
.tube-neck::after, .tube-base::after { background-color: transparent; content: ''; backdrop-filter: blur(2px); position: absolute; inset: 3%; z-index: -1; box-shadow: inset 6px 0px 2px 2px #ffffff;
  mix-blend-mode: multiply;}
.tube-base::after, .tube-base::before{ border-radius: 0 0 24px 24px;}
.tube-neck::after {
  width: 80%;
  height: 100%;
  position: absolute;
  left: 50%;
  right: -9px;
  content: "";
  background-color: #90909005;
  transform: translateX(-50%);
  mix-blend-mode: overlay;
  box-shadow: inset 0px 14px 5px -1px #00000016;
}

.tube-base::before, .tube-neck::before {
  box-shadow: inset -6px 15px 18px -9px #A8A8A8;
  border: solid white;
  border-right: 10px;
  border-bottom: 0px;
  border-top: 0px;
  content: '';
  filter: blur(2px);
  position: absolute;
  inset: -10% 10% 10% 20%;
  z-index: -1;
  mix-blend-mode: hard-light;
}


.tube-label { position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:right; align-items:center; gap:0px; border-left:2px solid #00000010; background: linear-gradient(90deg,#f1f1f1,#fff 50%,#fafafa); writing-mode:vertical-rl; transform:rotate(180deg); text-align:center; overflow:hidden; }
.tube-label::before {  color: transparent; min-width:14%; flex: .1; content: "."; height: 100%; top: 0; background:var(--tube-label-color,var(--tube-cap)); mix-blend-mode: multiply;}
.tube-label strong,.tube-label small {   padding-top: 4px; padding-bottom: 4px; width:100%; text-overflow: ellipsis; overflow:hidden; min-height: 1em; min-width: 1.2em; display:block; max-height:100%; max-width:100%; white-space:nowrap; }
.tube-label strong {  flex: 1; font-size:clamp(.65rem,.72vw,.66rem);  }
.tube-label small {  flex: 1; font-size:clamp(.6rem,.56vw,.52rem); color:var(--muted); }
.tube-base {
  position:relative;
  background: #00000006; 
  height: auto;
  aspect-ratio: 1/1.1; flex:0 0 auto; border:2px solid #00000014; border-radius:0 0 48% 48%; z-index: -1;
  mix-blend-mode: multiply;
  opacity: .75;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); aspect-ratio: 1; 
  overflow: hidden;}
.tube-additive {  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 13%;
  height: var(--game-additive-height);
  display: block;
  border-radius: 5px 5px 100% 100%;
  background: var(--game-additive-color,transparent);
  box-shadow: inset -8px 4px 3px rgba(216, 248, 201, 0.58), inset 14px 11px 9px rgba(150, 115, 115, 0.21);
  pointer-events: none;
  mix-blend-mode: color-dodge;
}

/* Empty game tubes still show the thickness of the rounded glass base without
   suggesting that an additive is present. */
.tube-base-empty::after {  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  height: 80%;
  border-radius: 6px 6px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.56) 58%, rgba(255, 255, 255, 0.34) 100%);
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.07), inset 5px 0 5px rgba(255, 255, 255, 0.7), inset -5px 0 5px rgba(0, 0, 0, 0);
  border-bottom: 0px solid rgba(145,151,158,.22);
  pointer-events: none;
  z-index: 1;
}

.tube-base-empty .tube-additive {
  display: none;
}

.tube-label, .tube-base, .tube-neck {width: 68%;}

.order-tip { display:none; margin:0; text-align:center; color:var(--muted); font-size:clamp(.65rem,1.3vw,.88rem); }
.order-footer { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); padding-top:clamp(7px,1.2vh,12px); background:rgba(255,255,255,.97); }
.order-footer .hint-btn,.order-footer .primary-btn { min-width:min(220px,42vw); justify-content:center; }
.order-complete { position:relative; z-index:1; will-change:transform,opacity; padding:clamp(7px,1.2vh,12px) 16px; border-radius:14px; background:#ecfbf5; color:#107654; text-align:center; font-size:clamp(.78rem,1.3vw,.95rem); }
/* Keep the completion grid row reserved before Check order succeeds.
   This prevents the tube stage from resizing when the message is revealed. */
#orderDrawView .order-complete[hidden] {
  /* Override the global [hidden] !important rule so this grid row keeps its
     exact height between the active round and the completion state. */
  display:block !important;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
#orderDrawView .order-footer { min-height:var(--order-footer-height, auto); }
.order-complete strong, .order-complete span { display:block; }
.order-complete.order-incorrect-message {
  background:#fff1f2;
  color:#a8303d;
  border:1px solid #f2b8bf;
}
.incorrect-tube { border-color:#f2a1aa; background:#fffafb; }
.correct-order .tube-card { border-color:#b8e8d4; background:#fbfffd; }
@keyframes orderShake { 25%{transform:translateX(-6px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-3px)} }

@media (max-width:760px) {
  .activity-options { grid-template-columns:1fr; }
  .tube-picker { grid-template-columns:1fr; }
  .order-board { padding:8px; }
  .order-footer { justify-content:center; gap:8px; }
  .order-footer .hint-btn,.order-footer .primary-btn { min-width:min(150px,44vw); }
}
@media (max-height:700px) {
  .tube-order-list { padding-bottom:2px; margin: auto;}
  .order-tip { display:none; }
}

/* Portrait/mobile Order of Draw layout */
@media (orientation: portrait) {
  body.order-mode .app-shell {
    width: 100%;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  #orderDrawView.active {
    gap: 8px;
  }

  .order-toolbar {
    grid-template-columns: 48px 1fr 48px;
    min-height: 48px;
  }

  .order-toolbar .icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 1.25rem;
  }

  .order-progress-track {
    height: 6px;
  }

  .order-board {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: clamp(8px, 1.2vh, 14px);
    padding: clamp(12px, 2vh, 20px) clamp(10px, 2.8vw, 18px) clamp(12px, 2vh, 18px);
    border-radius: 24px;
  }

  .order-board .match-kicker {
    justify-self: start;
    margin: 0;
    padding: 7px 13px;
    font-size: clamp(.68rem, 2.9vw, .84rem);
  }

  .order-instructions {
    align-self: start;
    padding-inline: 4px;
  }

  .order-instructions h2 {
    max-width: 330px;
    margin-inline: auto;
    font-size: clamp(1.15rem, 5vw, 1.45rem);
    line-height: 1.25;
  }

  .order-instructions p {
    margin-top: 8px;
    font-size: clamp(.88rem, 3.7vw, 1.02rem);
  }

  .tube-order-list {
    align-self: center;
    align-items: center;
    padding: 0;
    min-height: 0;
  }

  .tube-card,
  .tube-drop-placeholder {
    max-height: min(43vh, 150px);
    height: min(43vh, 100px);
    min-height: 200px;
    border-radius: clamp(9px, 2.4vw, 14px);
    width: 98%;
  }

  .tube-card {
    grid-template-rows: 18px minmax(0, 1fr);
    gap: 3px;
  }

  .drag-dots {
    font-size: 1.25rem;
    margin-top: -20px;
  }

  .blood-tube {
    width: 98%;
    padding-top: 36px;
    max-width: 50px;
  }

  .tube-neck {
    height: auto;
    aspect-ratio: 1;
    margin-bottom: -10px;
  }

  .tube-cap {
    width: 98%;
    border-radius: 6px 6px 4px 4px;
    height: auto;
    aspect-ratio: 1/1.1;
  }

  .tube-neck, .tube-base, .tube-label {
    width: 74%;
  }

  .tube-base {
    height: auto;
    aspect-ratio: 1/1.1;
  }

  .tube-label {
    flex: .8 1;
    min-height: 100px;
  }

  .tube-label::before{
    content: "";
  }

  .tube-label strong {
    font-size: clamp(.6rem, 1.5vw, .58rem);
  }

  .tube-label small {
    font-size: clamp(.5rem, 1.2vw, .48rem);
  }

  .tube-drop-placeholder::after {
    font-size: clamp(.32rem, 1.45vw, .46rem);
  }

  .order-tip {
    font-size: clamp(.78rem, 3vw, .88rem);
    padding-inline: 8px;
    display:none;
  }

  .order-footer {
    display: flex;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding-top: 12px;
  }

  .order-footer .hint-btn,
  .order-footer .primary-btn {
    min-width: 0;
    width: 100%;
    min-height: 54px;
    border-radius: 18px;
  }

  .order-footer #doneOrderDrawBtn:not([hidden]) {
    grid-column: 1 / -1;
    width: min(100%, 300px);
    justify-self: center;
  }
}

@media (orientation: portrait) and (max-height: 720px) {
  .order-board {
    gap: 6px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .order-instructions p,
  .order-tip {
    display: none;
  }

  .tube-card,
  .tube-drop-placeholder {
    height: min(39vh, 300px);
    min-height: 205px;
  }

  .order-footer .hint-btn,
  .order-footer .primary-btn {
    min-height: 46px;
  }
}


.order-round-size-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.order-round-size-control label {
  display: grid;
  gap: .2rem;
}

.order-round-size-control label span {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.35;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 400;
}

.order-round-size-control select {
  flex: 0 0 auto;
  min-width: 7.5rem;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--purple-soft);
  color: var(--text);
  font: inherit;
}

@media (max-width: 560px) {
  .order-round-size-control {
    align-items: stretch;
    flex-direction: column;
  }

  .order-round-size-control select {
    width: 100%;
  }
}


.order-hide-text-control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  margin-top: .75rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
}

.order-hide-text-control > span {
  display: grid;
  gap: .2rem;
}

.order-hide-text-control small {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.35;
  font-weight: 400;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}

.order-hide-text-control input {
  order: -1;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--purple);
}

.tube-order-card.hide-tube-text .tube-copy,
.tube-order-card.hide-tube-text .tube-label,
.tube-order-card.hide-tube-text strong,
.tube-order-card.hide-tube-text p,
.tube-order-card.hide-tube-text span:not(.tube-cap):not(.tube-body):not(.tube-label-stripe) {
  display: none;
}

/* The hide-labels preference must suppress both the primary and secondary text. */
.tube-order-card.hide-tube-text strong,
.tube-order-card.hide-tube-text .tube-copy > span,
.tube-order-card.hide-tube-text .tube-copy > p {
  display: none !important;
}


/* Font Awesome Free Solid icons */
.fa-solid,
.fas {
  display: inline-block;
  /*flex: 0 0 auto;*/
  line-height: 1;
  color: currentColor;
}

button .fa-solid,
a .fa-solid,
.activity-icon .fa-solid,
.nav-icon .fa-solid {
}

.icon-only .fa-solid,
button[aria-label] > .fa-solid:only-child {
  margin-inline-end: 0;
}

.activity-card .fa-solid,
.activity-option .fa-solid {
  font-size: 2em;
}

.activity-icon i::before { 
  font-size: 60%;
  display: inherit;
}

/* Category actions on the Terms page and Add/Edit Term dialog */
.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.category-fieldset-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.category-fieldset-heading .field-help { margin: 0; }
.category-fieldset-heading .text-btn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .page-heading { align-items: flex-start; }
  .heading-actions { width: 100%; justify-content: stretch; }
  .heading-actions > button { flex: 1; }
  .category-fieldset-heading { align-items: flex-start; }
}


/* Add/Edit Term and bottom-navigation refinements (cache v42) */
#deleteTermBtn[hidden] { display: none !important; }

@media (max-width: 520px) {
  .category-fieldset-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .category-fieldset-heading .text-btn {
    width: 100%;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: white;
  }
}


/* Settings page and four-item navigation (cache v43) */
.settings-panel { display: grid; gap: 12px; }
.settings-description { margin: 0; color: var(--muted); line-height: 1.55; font-family: Calibri, 'Trebuchet MS', sans-serif;}
.settings-actions { display: grid; gap: 10px; }
.settings-actions .secondary-btn,
.settings-actions .file-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

@media (max-width: 380px) {
  .bottom-nav { padding-inline: 6px; }
  .nav-item { padding-inline: 3px; font-size: .78rem; }
}


/* Hide scrollbars while preserving scrolling */
html, body, * {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}


/* Category manager row actions */
.manager-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}


.term-category-label {
  display: inherit;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  min-width: 0;
}
.term-category-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}



/* Toasts use the Popover API so they occupy the browser top layer above dialogs. */
.toast[popover] {
  position: fixed;
  inset: auto auto calc(92px + env(safe-area-inset-bottom)) 50%;
  width: max-content;
  max-width: min(calc(100vw - 32px), 34rem);
  margin: 0;
  border: 0;
  transform: translate(-50%, 24px);
  opacity: 0;
  pointer-events: none;
  background: var(--ink);
  color: white;
  padding: 11px 15px;
  border-radius: 999px;
  z-index: 2147483647;
}

.toast[popover]:popover-open {
  display: block;
}

/* Fallback for browsers without Popover API support. */
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

dialog[open] > .toast {
  position: fixed;
  z-index: 2147483647;
}


/* The New Category action is unavailable when Add New Term is launched from Manage Categories. */
button[hidden],
[hidden] {
  display: none !important;
}


/* Category color selection */
.category-create-panel,
.category-color-field {
  display: grid;
  gap: 10px;
}

.category-create-panel {
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.category-color-label {
  display: block;
  margin-bottom: 2px;
}

.category-color-picker {
}

.category-color-swatch {
  width: 100%;
  min-width: 28px;
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--swatch-color);
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
  transition: transform .16s ease, box-shadow .16s ease;
}

.category-color-swatch:hover {
  transform: scale(1.08);
}

.category-color-swatch.selected {
  border-color: var(--surface);
  box-shadow: 0 0 0 3px var(--ink);
}

.category-icon-colored

/* Editable category color and icon */
.category-icon {
  background: color-mix(in srgb, var(--category-color, var(--purple)) 14%, transparent);
  color: var(--category-color, var(--purple));
}

.category-edit-modal {
  width: min(620px, calc(100vw - 24px));
}

.category-edit-modal .modal-card {
  max-height: min(88vh, 760px);
  overflow-y: auto;
}

.dialog-helper {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .86rem;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}

.category-edit-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.category-edit-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .9rem;
}

.category-color-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.category-color-choice {
  aspect-ratio: 1;
  padding: 0;
  border-radius: 999px;
  background: var(--choice-color);
  cursor: pointer;
  width:24px;
  height:24px;
  outline: none;
  border: none;
  transition: transform .3s;
}

.category-color-choice:hover,
.category-color-choice:focus-visible {
  transform: scale(1.2);
}

.category-color-choice.selected {
}

.category-color-choice.selected::after { 
  content: "✔"; 
  color:white }

.edit-category-icon-preview {
  width: 38px;
  height: 38px;
}

.category-icon-picker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-height: 240px;
  padding: 9px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.category-icon-choice {
  display: grid;
  min-width: 0;
  min-height: 66px;
  padding: 8px 4px;
  place-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.category-icon-choice i {
  font-size: 1.15rem;
}

.category-icon-choice span {
  width: 100%;
  overflow: hidden;
  font-size: .62rem;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-icon-choice:hover,
.category-icon-choice:focus-visible,
.category-icon-choice.selected {
  border-color: var(--purple);
  background: var(--purple-soft);
  outline: none;
}

.category-icon-choice.selected {
  box-shadow: inset 0 0 0 1px var(--purple);
}

@media (max-width: 560px) {
  .category-color-picker {
  }

  .category-icon-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* v20: live Edit category preview */
.edit-category-icon-preview {
  width: 48px;
  height: 48px;
  border: 2px solid color-mix(in srgb, var(--category-color) 40%, white);
  background: color-mix(in srgb, var(--category-color) 16%, transparent);
  color: var(--category-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--category-color) 10%, transparent);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.edit-category-icon-preview i {
  font-size: 1.25rem;
}

.category-color-choice,
.category-icon-choice {
}

.category-color-choice:active,
.category-icon-choice:active {
  transform: scale(.96);
}

/* v21: saved category appearance used throughout the app */
.term-category-option {
  display: inherit;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.term-category-option input[type="checkbox"] {
  /*appearance: none;
  -webkit-appearance: none;*/
}
input[type="checkbox"]{
  outline: none;
  border: none;
}

.term-category-option .term-category-icon,
.category-icon-small {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: color-mix(in srgb, var(--category-color, var(--purple)) 30%, var(--line));
  background: color-mix(in srgb, var(--category-color, var(--purple)) 12%, transparent);
  color: var(--category-color, var(--purple));
}

.category-chip i {
  flex: 0 0 auto;
  font-size: .75rem;
}

.category-chip span {
  color: var(--ink);
}

.category-stat-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.category-stat-heading strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .8em;
}

.category-stat-bar > span {
  background: var(--category-color, var(--purple));
}

/* v22: persistent category appearance with broad browser compatibility */
.category-icon {
  color: var(--category-color, #7C3AED);
  background: #f3efff;
  border: 1px solid var(--category-color, #7C3AED);
}

.category-chip {
  color: var(--category-color, #7C3AED);
  border-color: var(--category-color, #7C3AED);
}

.category-stat-bar > span {
  background: var(--category-color, #7C3AED);
}

/* v23: all category icons match the unselected activity icon */
.category-icon,
.term-category-option .term-category-icon,
.category-icon-small,
.edit-category-icon-preview {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0 !important;
  border-radius: 12px;
  outline: 0 !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--category-color, var(--purple)) 14%, var(--surface, white));
  color: var(--category-color, var(--purple));
  font-weight: 800;
}

.category-icon i,
.term-category-option .term-category-icon i,
.category-icon-small i,
.edit-category-icon-preview i {
  display: block;
  font-size: 1rem;
  line-height: 1;
}

.category-icon-choice {
  display: grid;
  min-width: 0;
  min-height: 72px;
  padding: 7px 4px;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 0 !important;
  border-radius: 12px;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;
  color: var(--ink);
}

.category-icon-choice:hover,
.category-icon-choice:focus-visible,
.category-icon-choice.selected {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: var(--surface);
}

.category-icon-choice .category-icon {
  pointer-events: none;
}

.category-icon-choice-label {
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Prevent surrounding category components from adding an icon outline. */
.category-row .category-icon,
.manager-row .category-icon,
.term-category-option .category-icon,
.category-stat-heading .category-icon,
.category-chip .category-icon {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* v24: category chip text matches icon color */
.category-chip,
.category-chip span,
.category-chip i{
  color: var(--category-color, var(--purple)) !important;
}

/* v21: Decks Select all / Clear all controls */
.deck-selection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.deck-selection-actions .text-btn:disabled {
  cursor: default;
  opacity: .45;
}


/* v22: Flashcard Review Complete page scrolls inside study mode */
#studyOptionsView.active {
  --results-shadow-clearance: clamp(42px, 5vh, 48px);
  height: 100%;
  min-height: 0;
  overflow: visible;
  padding: var(--results-shadow-clearance) clamp(18px, 3vw, 32px);
}

#studyOptionsView .study-options-page {
  box-sizing: border-box;
}

@media (max-width: 640px) {
  #studyOptionsView.active {
    --results-shadow-clearance: 42px;
    padding-right: 12px;
    padding-left: 12px;
  }
}


/* v25: Tube selection controls match Deck selection controls */
.tube-selection-actions .text-btn:disabled {
  cursor: default;
  opacity: .45;
}


/* v26: Compact Order of Draw tube summary and modal picker */
.tube-selection-summary {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:12px; border:1px solid var(--line);
  border-radius:16px; background:#fff; padding-bottom: 0px;
}
.tube-selection-summary-copy { flex:1 1 auto; min-width:0; }
.selected-tubes-summary { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; padding: 12px; padding-top: 0px}
.selected-tube-chip,.selected-tubes-more,.selected-tubes-empty {
  display:inline-flex; align-items:center; border-radius:999px; padding:5px 8px;
  font-size:.84rem; line-height:1.15;
}
.selected-tube-chip { gap:6px; border:1px solid var(--line); background:var(--soft); }
.selected-tube-chip-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(0,0,0,.16); background:var(--tube-chip-color,#aaa); }
.selected-tube-chip-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selected-tubes-more { color:var(--purple); background:var(--purple-soft); }
.selected-tubes-empty { color:var(--muted); padding-left:0; }
.tube-picker-dialog { width:min(100%,720px); }
.tube-picker-dialog .modal-card { display:flex; flex-direction:column; max-height:calc(100vh - 36px); overflow:hidden; }
.tube-picker-dialog-list {   flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 8px; }
.tube-picker-dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top: none; }
.tube-picker-dialog-actions .tube-selection-actions { margin-top:0; }
@media (max-width:640px) {
  .tube-selection-summary { align-items:stretch; flex-direction:column; }
  .tube-selection-summary .secondary-btn { width:100%; justify-content:center; }
  .tube-picker-dialog { width:calc(100% - 20px); }
  .tube-picker-dialog .modal-card { max-height:calc(100vh - 20px); padding:16px; }
  .tube-picker-dialog-actions { align-items:stretch; flex-direction:column; }
  .tube-picker-dialog-actions .primary-btn { width:100%; justify-content:center; }
}


/* v27: Show every selected tube with the existing tube artwork */
.selected-tube-chip {
  min-height: 46px;
  padding: 5px 10px 5px 7px;
}

.selected-tube-icon.mini-tube {
  flex: 0 0 auto;
  transform: scale(.72);
  transform-origin: center;
  margin: -8px -4px;
}

.selected-tubes-summary {
  align-items: center;
}

.selected-tube-chip-name {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}


/* v28: place Choose tubes below the full selected-tube list */
.tube-selection-summary {
  align-items: stretch;
  flex-direction: column;
}

.tube-selection-summary .secondary-btn,
#openTubePickerBtn {
  align-self: flex-start;
  margin-top: 10px;
}

/* Remove the outline/border from compact selected-tube chips */
.selected-tube-chip {
  border: 0;
  outline: 0;
  box-shadow: none;
}


/* Fixed Home category selector */
#deckSelectionPanel {
  display: flex;
  flex-direction: column;
}

#deckSelectionPanel > .section-heading {
  order: 0;
  margin-bottom: 12px;
}

#deckSelectionPanel > .category-selection-summary {
  order: 1;
}

.category-selection-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-summary-shell {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.selected-category-summary-heading, .selected-tubes-summary-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.selected-category-summary-heading strong {
  font-size: .84rem;
}

.selected-category-summary-heading small {
  font-size: .68rem;
  opacity: .68;
}

.selected-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 34px;
  overflow: auto;
  padding-bottom: 12px;
  padding-top: 8px;
  max-height: 275px;
}

.tube-selection-summary {
}

.selected-category-empty {
  display: flex;
  align-items: center;
  min-height: 34px;
  font-size: .78rem;
  opacity: .65;
  margin: auto;
}

.selected-category-chip {
  display: inline-grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 9px;
  cursor: pointer;
}

.selected-category-chip .category-icon {
  width: 24px;
  height: 24px;
  margin: 0;
  transform: none;
}

.selected-category-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.selected-category-chip-text strong {
  font-size: .78rem;
  line-height: 1.14;
  white-space: normal;
  overflow-wrap: anywhere;
}

.selected-category-chip-text small {
  margin-top: 1px;
  font-size: .63rem;
  opacity: .68;
}
.selected-category-chip-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
  white-space: nowrap;
}
.selected-category-chip-meta small { margin: 0; flex: 0 0 auto; }
.selected-category-chip-text .selected-category-chip-meta small { margin: 0; }
.selected-category-mastery-bar { flex: 1 1 58px; width: clamp(44px, 12vw, 72px); height: 6px; }
.selected-category-mastery-bar > span { background: var(--category-color, var(--purple)); }

.choose-categories-btn {
  align-self: flex-start;
}

/* Reuse Manage categories modal structure */
.category-picker-dialog .modal-card {
  display: flex;
  flex-direction: column;
  width: min(94vw, 620px);
  max-height: min(88vh, 760px);
  overflow: hidden;
}

.category-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.category-picker-toolbar > p {
  margin: 0;
}

.category-picker-toolbar-actions {
  display: flex;
  gap: 12px;
}

.category-picker-list {
  flex: 1 1 auto;
  min-height: 150px;
  max-height: none !important;
  margin-top: 12px;
  padding: 0 !important;
  overflow-y: auto;
}

.category-picker-list .category-row + .category-row {
  border-top: 1px solid var(--line);
}

.category-picker-list .category-row label {
  display: grid !important;
  grid-template-columns: 18px 28px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
}

.category-picker-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.category-picker-list .category-icon {
  width: 26px;
  height: 26px;
  margin: 0;
  transform: none;
}

.category-picker-list .category-meta {
  min-width: 0;
}

.category-picker-list .category-meta strong {
  display: block;
  font-size: .8rem;
  line-height: 1.17;
  white-space: normal;
  overflow-wrap: anywhere;
}

.category-picker-list .category-meta small {
  display: block;
  margin-top: 2px;
  font-size: .66rem;
  opacity: .68;
}

.category-picker-list .category-row:has(input:checked) {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.category-picker-dialog-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex:0 0 auto;
  margin-top:12px;
}
.category-picker-dialog-actions .manage-categories-modal-btn{margin-right:auto;}
.category-picker-dialog-actions .primary-btn{margin-left:auto;}

@media (max-width: 600px) {
  .category-picker-dialog .modal-card {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 16px;
  }

  .category-picker-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .selected-category-chip {
    flex: 1 1 145px;
  }
}


/* Category controls matched to Choose tubes */
.category-picker-dialog .category-picker-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  margin-top: 12px;
}

.category-picker-dialog .tube-selection-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Remove grey selected backgrounds from modal list rows. */
.category-picker-list .category-row:has(input:checked),
.category-picker-list .category-row.selected,
.category-picker-list .category-row[aria-selected="true"] {
  background: transparent !important;
}

/* Preserve selection visibility through checkbox state only. */
.category-picker-list .category-row:has(input:checked) label {
  background: transparent !important;
}

/* Prevent inherited card fills on category summary/list items. */
.category-summary-shell .selected-category-chip,
.category-picker-dialog .category-row,
.category-picker-dialog .category-row label {
  box-shadow: none !important;
}

@media (max-width: 600px) {
  .category-picker-dialog .category-picker-dialog-actions {
    align-items: center;
  }
}


/* Choose categories list matches Manage categories */
.category-picker-dialog .category-picker-list {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  overflow-y: auto;
  background: #fff !important;
}

.category-picker-dialog .category-picker-list .category-row {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.category-picker-dialog .category-picker-list .category-row + .category-row {
  border-top: 1px solid var(--line) !important;
}

.category-picker-dialog .category-picker-list .category-row label {
  display: grid !important;
  grid-template-columns: 18px 28px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Keep the row white regardless of selection, hover, focus, or active state. */
.category-picker-dialog .category-picker-list .category-row:hover,
.category-picker-dialog .category-picker-list .category-row:focus-within,
.category-picker-dialog .category-picker-list .category-row:active,
.category-picker-dialog .category-picker-list .category-row:has(input:checked),
.category-picker-dialog .category-picker-list .category-row.selected,
.category-picker-dialog .category-picker-list .category-row[aria-selected="true"],
.category-picker-dialog .category-picker-list .category-row:hover label,
.category-picker-dialog .category-picker-list .category-row:focus-within label,
.category-picker-dialog .category-picker-list .category-row:active label,
.category-picker-dialog .category-picker-list .category-row:has(input:checked) label {
  background: #fff !important;
}

/* Match Manage categories typography and spacing. */
.category-picker-dialog .category-picker-list .category-icon {
  width: 28px;
  height: 28px;
  margin: 0;
  transform: none;
}

.category-picker-dialog .category-picker-list .category-meta {
  min-width: 0;
}

.category-picker-dialog .category-picker-list .category-meta strong {
  display: block;
  margin: 0;
  font-size: .8rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.category-picker-dialog .category-picker-list .category-meta small {
  display: block;
  margin-top: 2px;
  font-size: .66rem;
  line-height: 1.15;
  opacity: .68;
}


/* Choose categories item layout matches Manage categories */
.category-picker-dialog .category-picker-list .category-picker-manager-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.category-picker-dialog .category-picker-list .category-picker-manager-row:last-child {
  border-bottom: 0 !important;
}

.category-picker-dialog .category-picker-list .category-picker-manager-label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  cursor: pointer;
  grid-template-columns: none !important;
}

.category-picker-dialog .category-picker-list .category-picker-manager-label > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--purple);
}

.category-picker-dialog .category-picker-list .category-picker-manager-content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.category-picker-dialog .category-picker-list .category-picker-manager-content .category-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin: 0;
  transform: none;
}

.category-picker-dialog .category-picker-list .category-picker-manager-content .category-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.category-picker-dialog .category-picker-list .category-picker-manager-content .category-meta strong {
  display: block;
  margin: 0;
  font-size: .82rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.category-picker-dialog .category-picker-list .category-picker-manager-content .category-meta small {
  display: block;
  margin-top: 3px;
  font-size: .68rem;
  line-height: 1.15;
  opacity: .68;
}

.category-picker-dialog .category-picker-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-top: 3px;
  white-space: nowrap;
}

.category-picker-dialog .category-picker-list .category-picker-card-meta small {
  flex: 0 0 auto;
  margin: 0;
}

.category-picker-dialog .category-picker-mastery-bar {
  flex: 1 1 80px;
  width: auto;
  min-width: 48px;
  max-width: 160px;
  height: 6px;
}

.category-picker-dialog .category-picker-mastery-bar > span {
  background: var(--category-color, var(--purple));
}

.category-picker-dialog .category-picker-list .category-picker-manager-row,
.category-picker-dialog .category-picker-list .category-picker-manager-row:hover,
.category-picker-dialog .category-picker-list .category-picker-manager-row:focus-within,
.category-picker-dialog .category-picker-list .category-picker-manager-row:has(input:checked),
.category-picker-dialog .category-picker-list .category-picker-manager-label,
.category-picker-dialog .category-picker-list .category-picker-manager-label:hover {
  background: #fff !important;
}


/* Selected category chip overlap fix and modal Manage button */
.selected-category-chip {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  padding: 7px 9px;
}

.selected-category-chip .category-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  transform: none;
}

.selected-category-chip-text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
}

.selected-category-chip-text strong {
  display: block;
  min-width: 0;
  margin: 0;
  font-size: .78rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.selected-category-chip-text small {
  display: block;
  margin-top: 2px;
  font-size: .64rem;
  line-height: 1.15;
  opacity: .68;
}

.category-picker-dialog .category-picker-dialog-actions {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.category-picker-dialog .manage-categories-modal-btn {
  justify-self: start;
}

@media (max-width: 600px) {
  .category-picker-dialog .category-picker-dialog-actions {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .category-picker-dialog .tube-selection-actions {
    grid-column: 1 / -1;
  }

  .category-picker-dialog .manage-categories-modal-btn {
    justify-self: start;
  }
}


/* Custom modal layer: one persistent overlay for the entire modal series */
#modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;
  background: rgba(24, 25, 42, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}

#modalOverlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 120ms ease;
}

html.modal-layer-open,
body.modal-layer-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/*
 * dialog.show() does not use the browser's modal top layer. Explicitly make
 * every open dialog a fixed, centered layer so it remains visible above the
 * shared overlay in every browser.
 */
dialog[open] {
  display: block !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10002 !important;
  overflow: auto;
  visibility: visible;
  opacity: 1;
}

dialog::backdrop,
.modal::backdrop {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

dialog.modal-layer-top[open] {
  display: block !important;
  z-index: 10002 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

dialog.modal-layer-under[open] {
  display: block !important;
  z-index: 10001 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}




/* Choose Categories sort controls. A–Z / Mastery use the same compact
   action-button treatment as Select all / Clear all. */
.category-picker-sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.9rem;
}

.category-picker-sort > span:first-child {
  margin-right: 2px;
  opacity: 0.7;
}

.category-sort-link,
.category-picker-sort .category-sort-link {
  appearance: none;
  min-height: 28px;
  padding: 4px 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--purple);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}

.category-sort-link:hover {
  background: rgba(96, 71, 245, 0.08);
}

.category-sort-link:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.category-sort-link.is-active {
  background: rgba(96, 71, 245, 0.12);
  color: var(--purple-dark);
  font-weight: 800;
}




/* Manage Categories search spacing */
.manage-category-search-field {
  display: block;
  margin: 0.9rem 0 0.85rem;
}


/* Manage Categories footer */
.category-manager-footer {
  margin-top: 1rem;
}

/* Keep modal content usable on short screens and mobile devices. */
.modal-card,
.tube-picker-dialog .modal-card,
.category-picker-dialog .modal-card {
  box-sizing: border-box;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* Keep every X icon button in the modal card's top-right corner.
   Close buttons are nested inside modal headers, so use a descendant selector. */
.modal-card {
  position: relative;
}

.modal-card .icon-btn[data-close-dialog] {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  margin: 0;
}

/* Reserve room for the overlaid close button so headings never sit beneath it. */
.modal-card > .section-heading:first-child {
  padding-right: 50px;
}


/* v51: Put Select all / Clear all directly below the list they control. */
.modal-list-selection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex: 0 0 auto;
  width: 100%;
  margin: 4px 0 0;
  padding: 6px 0 2px;
}

.modal-list-selection-actions .compact-selection-btn {
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 9px;
  font-size: .78rem;
  line-height: 1.1;
}

.tube-picker-footer-actions {
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .tube-picker-dialog-actions.tube-picker-footer-actions {
    align-items: flex-end;
    flex-direction: row;
  }

  .tube-picker-dialog-actions.tube-picker-footer-actions .primary-btn {
    width: auto;
  }
}

.manage-categories-modal-btn{display:inline-flex;align-items:center;gap:.4rem;}
.manage-categories-modal-btn .fa-solid{font-size:.95em;}


/* v55: category form cancellation and remove-category text action */
.category-form-actions {
  align-items: center;
}

/* Keep this heading identical to the other category-edit section headings. */
.remove-category-section .category-edit-section-title {
  color: inherit;
}

.remove-category-section .dialog-helper {
  margin: 0;
}

.delete-category-text-btn {
  appearance: none;
  justify-self: start;
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-weight: 750;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.delete-category-text-btn:hover {
  text-decoration: underline;
}

.delete-category-text-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* v57: Anchor the Edit category action bar to the true bottom edge of the modal.
   Only the content area scrolls, so content cannot pass beneath the buttons. */
#categoryEditDialog .modal-card {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 760px);
  padding: 0;
  overflow: hidden !important;
}

#categoryEditDialog .category-edit-scroll-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#categoryEditDialog .category-form-actions {
  position: relative;
  flex: 0 0 auto;
  z-index: 15;
  width: 100%;
  margin: 0;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--line);
  background: var(--background);
  box-shadow: 0 -8px 18px rgba(37, 39, 70, .06);
}

@media (max-width: 640px) {
  #categoryEditDialog .category-edit-scroll-content {
    padding: 16px;
  }

  #categoryEditDialog .category-form-actions {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  }
}



/* v58: Keep the Edit Category close button inside the scrolling header.
   The header is its positioning context, so the X scrolls away with the content
   while the bottom action bar remains anchored to the modal. */
#categoryEditDialog .category-edit-scroll-content > .section-heading:first-child {
  position: relative !important;
  padding-right: 50px;
}

#categoryEditDialog .category-edit-scroll-content > .section-heading:first-child .icon-btn[data-close-dialog] {
  position: absolute !important;
  top: 0;
  right: 0;
  z-index: 1;
  margin: 0;
}


/* Category deletion choices */
.category-delete-choice-modal .modal-card {
  max-width: 540px;
}

.category-delete-options {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.category-delete-option {
  width: 100%;
  min-height: 76px;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

.category-delete-option span {
  display: grid;
  gap: 4px;
}

.category-delete-option small {
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.8;
}

.primary-btn.danger-action {
  background: var(--danger);
  border-color: var(--danger);
}


/* Uncategorized study category */
.category-icon[data-category-id="uncategorized"],
[data-category-id="uncategorized"] .category-icon,
.category-chip[data-category-id="uncategorized"] .category-icon,
.category-card[data-category-id="uncategorized"] .category-icon {
  --category-color: #777777 !important;
  color: #777777 !important;
  background: color-mix(in srgb, #777777 14%, var(--surface, white)) !important;
}


/* Drag-only optical distortion lenses.
   These sit behind the floating tube, so the existing tube artwork remains
   unchanged while the page content beneath the glass is softly refracted. */
.tube-drag-distortion-lens {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  overflow: hidden;
  background: rgba(255,255,255,.025);
  -webkit-backdrop-filter: blur(4px) saturate(1.2) contrast(1.2) hue-rotate(0deg);
  backdrop-filter: blur(4px) saturate(1.2) contrast(1.2) hue-rotate(0deg);
  transform: translateZ(0);
  will-change: left, top, width, height;
}
.tube-drag-distortion-lens::after {
  content: "";
  position: absolute;
  inset: -8% -5%;
  background: linear-gradient(100deg,
    rgba(255,255,255,.08),
    transparent 38%,
    rgba(180,205,255,.055) 58%,
    transparent 78%);
  mix-blend-mode: soft-light;
}
.tube-drag-distortion-lens.is-neck {
  border-radius: 3px;
}
.tube-drag-distortion-lens.is-base {
  border-radius: 0 0 48% 48%;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tube-drag-distortion-lens {
    background: rgba(230,238,248,.12);
  }
}

/* v70: Smooth Order of Draw translation and position-switching motion. */
.tube-order-list .tube-card:not(.drag-floating) {
  will-change: transform;
}
.tube-card.drag-floating {
  will-change: left, top;
}
@media (prefers-reduced-motion: reduce) {
  .tube-order-list .tube-card,
  .tube-card.drag-floating {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* v75: Staggered Order of Draw round entrance and exit motion. */
#orderDrawView .tube-order-list .tube-card:not(.drag-floating) {
  will-change: transform;
}


/* Common Tests game */
body.common-tests-mode { overflow:hidden; }
body.common-tests-mode .app-header { display:none; }
body.common-tests-mode .app-shell { width:min(100%,760px);height:100dvh;min-height:0;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom)); }
body.common-tests-mode main {height:100%;min-height:0;}
body.common-tests-mode .bottom-nav{display:none!important;}
#commonTestsView.active{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;overflow:hidden;}
.common-tests-toolbar{display:grid;grid-template-columns:48px 1fr 48px;align-items:center}.common-tests-toolbar p{text-align:center;font-weight:800;margin:0}.common-tests-toolbar>span{width:48px}
.common-tests-progress-track{margin:0}.common-tests-board{min-height:0;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(18px,3vw,28px);padding-bottom:0;display:flex;flex-direction:column;gap:20px;box-shadow:0 18px 42px rgba(37,39,70,.07)}
.common-tests-board>.match-kicker{align-self:flex-start;width:max-content;max-width:100%;margin-right:auto}
.common-test-heading{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:110px 1fr;align-items:center;gap:20px;margin-inline:calc(clamp(18px,3vw,28px) * -1);padding:12px clamp(18px,3vw,28px);background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 14px rgba(37,39,70,.05);isolation:isolate}.common-test-heading h2{margin:0;color:var(--purple);font-size:clamp(1.5rem,7vw,2rem)}

.common-test-icon{
  width: 2em;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0edff;
  color: var(--purple);
  font-size: 2em;
  margin: auto;
}
  
.common-purpose-prompt{margin:0 0 -8px!important;text-align:center;font-size:1.05rem!important}
.common-purpose-options{display:grid;gap:8px}.common-purpose-choice{box-sizing:border-box;border:2px solid transparent;box-shadow:none;background:transparent;min-height:60px;border-radius:18px;padding:12px 18px;display:flex;align-items:center;gap:16px;text-align:left;font:inherit;color:var(--text);font-family: Calibri, 'Trebuchet MS', sans-serif;}.common-purpose-choice.selected{border-color:var(--purple);background:#faf9ff}.common-radio{box-sizing:border-box;width:36px;height:36px;border:2px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.common-tests-board hr{width:100%;border:0;border-top:1px solid var(--line);margin:0}.common-tests-board h3{text-align:center;margin:0 0 8px;font-size:1.05rem}
.common-tube-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;min-height:300px}.common-tube-choice{border:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;padding:0;min-width:0;color:inherit}.common-tube-choice .blood-tube{height:250px;max-height:250px;width:min(74%,62px);padding-top:50px}.common-tube-choice .common-radio{width:34px;height:34px}.common-tests-feedback{padding:12px;border-radius:14px;text-align:center}.common-tests-feedback strong,.common-tests-feedback span{display:block}.common-tests-feedback.correct{background:#ecfbf5;color:#107654}.common-tests-feedback.incorrect{background:#fff1f2;color:#a8303d}.common-tests-footer{position:sticky;bottom:0;z-index:12;margin:2px calc(clamp(18px,3vw,28px) * -1) 0;padding:14px clamp(18px,3vw,28px) max(14px,env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.common-tests-footer .hint-btn,.common-tests-footer .primary-btn{flex:1;min-width:180px}.common-round-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.common-round-options label{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;gap:8px;align-items:center;justify-content:center;font-weight:700}
@media(max-width:520px){.common-test-heading{grid-template-columns:72px 1fr;gap:12px;margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}.common-test-icon{width:70px;font-size:1.8rem}.common-tests-board{padding:16px 12px 0;gap:15px}.common-purpose-prompt{margin-bottom:-6px!important}.common-purpose-choice{min-height:54px;padding:9px 10px}.common-tube-options{gap:2px;min-height:260px}.common-tube-choice .blood-tube{height:220px;padding-top:44px}.common-tests-footer{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}.common-round-options{grid-template-columns:repeat(2,1fr)}}


/* Common Tests round feedback and motion refinements. */
.common-tests-feedback{position:relative;z-index:11;will-change:transform,opacity}
.common-purpose-choice.wrong-flash{border-color:transparent;box-shadow:none;outline:0;animation:none}.common-purpose-choice.wrong-flash .common-radio{display:flex;align-items:center;justify-content:center}.common-purpose-choice.wrong-flash .common-radio i,.common-tube-choice.wrong-radio-flash .common-radio i{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.common-tube-choice .blood-tube{will-change:transform,opacity}
.common-tube-choice .common-radio{will-change:opacity}


/* Common Tests: definitive sticky header and feedback clearance fix. */
#commonTestsView .common-tests-board {
  --ct-board-pad: clamp(18px, 3vw, 28px);
  --ct-footer-height: 88px;
  padding: 0 var(--ct-board-pad);
  isolation: isolate;
  scroll-padding-top: 0;
  scroll-padding-bottom: calc(var(--ct-footer-height) + 28px);
  position: relative;
}
#commonTestsView .common-tests-board > .match-kicker {
  margin-top: var(--ct-board-pad);
}
#commonTestsView .common-test-heading {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  align-self: stretch;
  margin-inline: calc(var(--ct-board-pad) * -1);
  padding-inline: var(--ct-board-pad);
  background: var(--surface) !important;
  background-clip: padding-box;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}
#commonTestsView .common-test-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface);
  pointer-events: none;
}
#commonTestsView .common-tests-board > :not(.common-test-heading):not(.common-tests-footer) {
  position: relative;
  z-index: 0;
}
#commonTestsView .common-tests-footer {
  z-index: 60;
  margin-inline: calc(var(--ct-board-pad) * -1);
  padding-inline: var(--ct-board-pad);
}
#commonTestsView .common-tests-feedback-slot {
  position: relative;
  z-index: 11;
  flex: 0 0 auto;
  width: 100%;
  min-height: 78px;
  height: 78px;
  overflow: visible;
  scroll-margin-bottom: calc(var(--ct-footer-height) + 24px);
}
#commonTestsView .common-tests-feedback-slot .common-tests-feedback {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}
@media (max-width: 520px) {
  #commonTestsView .common-tests-board {
    --ct-board-pad: 12px;
    --ct-footer-height: 96px;
    padding-top: 0;
    padding-bottom: 0;
  }
  #commonTestsView .common-tests-board > .match-kicker {
    margin-top: 16px;
  }
  #commonTestsView .common-tests-feedback-slot {
    min-height: 86px;
    height: 86px;
  }
}

/* Common Tests: ordered incorrect-answer review and sticky-state shadow. */
#commonTestsView .common-test-heading {
  box-shadow: none !important;
  transition: box-shadow 180ms ease;
}
#commonTestsView .common-test-heading.is-stuck {
  box-shadow: 0 8px 14px rgba(37,39,70,.08) !important;
}
/* Common Tests: tube review positioning and final radio/header refinements. */
#commonTestsView .common-test-heading {
  border-bottom: 0 !important;
}
#commonTestsView .common-tube-options + * {
  scroll-margin-top: 0;
}

/* Common Tests: deliberate, persistent correct-answer review. */
#commonTestsView .common-purpose-choice {
  transition: background-color 520ms ease, border-color 520ms ease, color 520ms ease;
}
#commonTestsView .common-purpose-choice.correct-reveal {
  background: color-mix(in srgb, #22c55e 16%, var(--surface, #fff)) !important;
  border-color: #22c55e !important;
  box-shadow: none;
}
/* Common Tests: flat quiz-length radios and stable result presentation. */
#commonTestsOptionsPanel .common-round-options input[type="radio"],
#tubeSelectionPanel .common-round-options input[type="radio"],
#needleSelectionPanel .common-round-options input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  flex: 0 0 22px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
#commonTestsOptionsPanel .common-round-options input[type="radio"]:checked,
#tubeSelectionPanel .common-round-options input[type="radio"]:checked,
#needleSelectionPanel .common-round-options input[type="radio"]:checked {
  border-color: var(--purple);
  background: var(--purple);
}
#commonTestsOptionsPanel .common-round-options input[type="radio"]:focus-visible,
#tubeSelectionPanel .common-round-options input[type="radio"]:focus-visible,
#needleSelectionPanel .common-round-options input[type="radio"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--purple) 28%, transparent);
  outline-offset: 2px;
}
#commonTestsView .common-tests-feedback-slot {
  min-height: 86px;
  height: 86px;
  contain: layout paint;
}
#commonTestsView .common-tests-feedback {
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  transform: translateY(calc(var(--ct-footer-height, 88px) + 12px));
  opacity: 0;
}
#commonTestsView .common-tests-footer {
  min-height: var(--ct-footer-height, 88px);
  box-sizing: border-box;
}

/* Common Tests UI stability and radio refinements (v-next). */
#commonTestsView .common-tests-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  flex-wrap: nowrap;
}
#commonTestsView .common-tests-footer .hint-btn,
#commonTestsView .common-tests-footer .primary-btn {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#commonTestsView #checkCommonTestBtn:disabled,
#commonTestsView #checkCommonTestBtn:disabled:hover {
  background: #e8e8ef;
  color: #fff;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}
#commonTestsView .common-tests-footer .ct-reserved-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep hint counters compact and perfectly centered. */
.hint-btn > span,
#commonTestsHintCount {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  line-height: 1;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
}

/* Match the native checkmark shape used by Manage Categories. */
#commonTestsOptionsPanel .common-round-options,
#tubeSelectionPanel .common-round-options,
#needleSelectionPanel .common-round-options {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
#commonTestsOptionsPanel .common-round-options label,
#tubeSelectionPanel .common-round-options label,
#needleSelectionPanel .common-round-options label {
  min-width: 132px;
  white-space: nowrap;
}
#commonTestsOptionsPanel .common-round-options input[type="radio"],
#tubeSelectionPanel .common-round-options input[type="radio"],
#needleSelectionPanel .common-round-options input[type="radio"] {
  position: relative;
  display: grid;
  place-items: center;
}
#commonTestsOptionsPanel .common-round-options input[type="radio"]:checked::after,
#tubeSelectionPanel .common-round-options input[type="radio"]:checked::after,
#needleSelectionPanel .common-round-options input[type="radio"]:checked::after {
  content: "";
  box-sizing: border-box;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

@media (max-width: 520px) {
  #commonTestsView .common-tests-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Common Tests: one radio fade system for every text and tube state. */
#commonTestsView {
  --ct-radio-purple: var(--purple);
  --ct-radio-green: #22c55e;
  --ct-radio-red: #e77f88;
  --ct-radio-color-fade: 180ms;
  --ct-radio-grey-fade: 120ms;
  --ct-radio-ease: ease;
}
#commonTestsView .common-radio {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--line);
  outline: 0;
  box-shadow: none;
  background-color: transparent;
  background-clip: border-box;
  transition: none;
}
#commonTestsView .common-purpose-choice.selected .common-radio,
#commonTestsView .common-tube-choice.selected .common-radio,
#commonTestsView .common-tube-choice.selected.wrong-attempt .common-radio {
  background-color: var(--ct-radio-purple);
  border-color: transparent;
}
#commonTestsView .common-purpose-choice.correct-reveal .common-radio,
#commonTestsView .common-tube-choice.correct-reveal .common-radio {
  background-color: var(--ct-radio-green);
  border-color: transparent;
}
#commonTestsView .common-radio > .fa-check,
#commonTestsView .common-radio > .fa-xmark {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--fa-width, 1.25em);
  height: 1em;
  margin: 0;
  padding: 0;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  transform: none;
}
#commonTestsView .common-purpose-choice.wrong-flash {
  animation: commonTextOptionWrongFade 1800ms ease-in-out both;
}
#commonTestsView .common-purpose-choice.wrong-flash .common-radio {
  color: #fff;
  animation: commonTextRadioWrongFade 1800ms ease-in-out both;
}
@keyframes commonTextOptionWrongFade {
  0%, 12% {
    background-color: transparent;
  }
  20%, 80% {
    background-color: rgba(220, 38, 38, .18);
  }
  88%, 100% {
    background-color: transparent;
  }
}
@keyframes commonTextRadioWrongFade {
  0% {
    background-color: transparent;
    border-color: var(--line);
  }
  12% {
    background-color: transparent;
    border-color: transparent;
  }
  20%, 80% {
    background-color: var(--ct-radio-red);
    border-color: transparent;
  }
  88% {
    background-color: transparent;
    border-color: transparent;
  }
  100% {
    background-color: transparent;
    border-color: var(--line);
  }
}
#commonTestsView .common-tube-choice.wrong-radio-flash .common-radio {
  color: #fff;
  animation: commonTubeRadioWrongFade 1800ms ease-in-out both;
}
@keyframes commonTubeRadioWrongFade {
  0% {
    background-color: transparent;
    border-color: var(--line);
  }
  12% {
    background-color: transparent;
    border-color: transparent;
  }
  20%, 80% {
    background-color: var(--ct-radio-red);
    border-color: transparent;
  }
  88% {
    background-color: transparent;
    border-color: transparent;
  }
  100% {
    background-color: transparent;
    border-color: var(--line);
  }
}
@media (prefers-reduced-motion: reduce) {
  #commonTestsView .common-radio {
    transition-duration: 1ms;
  }
}

/* Shared tube and test reference */
.reference-intro {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.5;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.reference-tabs {
  margin-bottom: 14px;
}
.reference-tabs .segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.reference-tabs .segment:not(.active) {
  background: #fff;
}
.reference-search {
  position: relative;
  display: block;
}
.reference-search input {
  margin-bottom: 12px;
}

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
.reference-test-controls {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 10px;
  margin: 2px 0 12px;
}
.reference-test-controls[hidden] {
  display: none;
}
.reference-test-controls label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: .73rem;
  font-weight: 700;
}
.reference-test-controls select {
  width: 100%;
  min-width: 0;
  padding: 11px 34px 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: var(--ink);
  font-weight: 400;
}
.reference-sort-row {
  min-height: 34px;
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
}
#referenceView .reference-sort-row > span:first-child,
#referenceView .reference-sort-row > button[data-reference-sort],
#referenceView .reference-sort-row > #referenceCount {
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  margin-top: 0;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#referenceView .reference-sort-row > #referenceCount {
  margin-left: auto;
  white-space: nowrap;
  color: var(--muted);
  font-size: .84rem;
}
.reference-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.reference-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 0px;
  border-radius: 17px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
  place-items: stretch;
}

.reference-row.reference-tube-row {
  grid-template-columns: 30px minmax(0,1fr) auto !important;
}

.reference-row-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.reference-row-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reference-row-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
}
.reference-row-subtitle {
  font-family: Calibri, 'Trebuchet MS', sans-serif !important;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.38;
  overflow: hidden;
  display: block;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-bottom: 2px;
}
.reference-row-meta {
  font-family: Calibri, 'Trebuchet MS', sans-serif ;
  color: var(--purple-dark);
  font-size: .8rem;
  font-weight: 400;
  padding-left: 0px;
  padding-bottom: 4px;
}
.reference-tube-row .reference-row-meta {
  font-family: Calibri, 'Trebuchet MS', sans-serif ;
  color: var(--purple-dark);
  font-size: .78rem;
  font-weight: 400;
  padding-left: 0;
}

.reference-test-row .reference-row-meta {
  color: var(--reference-tube-color,var(--reference-tube-color));
}

.reference-tube-row .reference-row-copy {
  align-self: stretch;
}
.reference-tube-row .reference-row-subtitle {
  padding-bottom: 0;
}
.reference-tube-row .reference-row-mastery {
  grid-column: auto;
  margin-top: 0;
}
.reference-row-mastery {
  grid-column: 1 / -2;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
}
.reference-row-mastery .mastery-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  font-size: .68rem;
}
.reference-mastery-bar {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #ececf2;
}
.reference-mastery-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--reference-mastery-color,var(--purple));
}
.reference-row-mastery.is-mastered,
.reference-fact-mastery.is-mastered {
  --reference-mastery-color: #86dcae !important;
}
.reference-mastery-bar.mastered > span,
.reference-row-mastery.is-mastered .reference-mastery-bar > span,
.reference-fact-mastery.is-mastered .reference-mastery-bar > span {
  background: #86dcae !important;
}
.reference-order-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--purple-soft);
  color: var(--purple-dark);
  font-size: .68rem;
  font-weight: 800;
}
.reference-chevron {
  color: #a3a5b2;
  font-size: .8rem;
}
.reference-tube-art.mini-tube {
  width: 20px;
  height: 58px;
  justify-self: center;
  margin-left: 0px;
}
.reference-test-icon {
  width: 42px;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 1.15rem;
}
.reference-test-row .reference-test-icon,
.reference-test-detail-hero .reference-test-icon {
  color: var(--reference-tube-color,var(--purple));
  background: color-mix(in srgb,var(--reference-tube-color,var(--purple)) 13%,white);
  border: 1px solid color-mix(in srgb,var(--reference-tube-color,var(--purple)) 34%,var(--line));
}
.reference-test-icon.large {
  width: 64px;
  height: 64px;
  border-radius: 19px;
  font-size: 1.65rem;
}
.reference-detail-card {
  width: min(calc(100vw - 28px),600px);
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  overflow: hidden;
  padding-bottom: 0;
}
.reference-detail-card > .section-heading {
  margin-bottom: 14px;
}
#referenceDetailContent {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 2px 18px;
}
.reference-detail-hero {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: linear-gradient(135deg,white,white);
  overflow: hidden;
}
.reference-detail-hero > div {
  min-width: 0;
}
.reference-detail-hero strong,
.reference-detail-hero span {
  display: block;
}
.reference-detail-hero strong {
  font-size: 1.08rem;
}
.reference-detail-hero div > span {
  margin-top: 5px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.reference-test-detail-hero {
}
.reference-test-detail-hero > div {
  width: 100%;
}
.reference-test-detail-hero .reference-test-icon.large {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.reference-test-detail-hero .reference-test-icon.large i {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.reference-detail-tube {
  position: relative;
  width: 74px;
  height: 60px;
  display: block;
  justify-self: center;
  overflow: visible;
}
.reference-detail-tube.small {
  width: 31px;
  height: 68px;
}
.reference-detail-tube .reference-detail-game-tube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  height: 250px;
  min-height: 250px;
  max-height: 250px;
  padding-top: 50px;
  display: flex;
  transform: translate(-50%,-50%) scale(.4);
  transform-origin: center;
}
.reference-detail-tube:not(.small) .reference-detail-game-tube {
  top: 0;
  transform: translateX(-50%) scale(.78);
  transform-origin: top center;
}
.reference-detail-tube.small .reference-detail-game-tube {
  transform: translate(-50%,-50%) scale(.272);
}
.reference-detail-hero .reference-detail-game-tube .tube-label {
  min-height: 180px;
  display: flex;
}
.reference-facts {
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
}
.reference-fact {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.reference-fact dt {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}
.reference-fact dd {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .83rem;
  font-weight: 400;
  line-height: 1.45;
}
.reference-mastery-fact {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.reference-fact-mastery {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  height: 100%;
}
.reference-fact-mastery .mastery-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}
.reference-fact-mastery .reference-mastery-bar {
  flex: 0 0 auto;
  width: 100%;
  min-width: 48px;
}
.reference-detail-section {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.reference-detail-section h3 {
  margin: 0 0 9px;
  font-size: 1rem;
}
.reference-detail-section p,
.reference-detail-section ul {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .9rem;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.reference-detail-section ul {
  padding-left: 20px;
}
.reference-additive-list {
  display: grid;
  gap: 6px;
}
.reference-additive-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 7px;
  padding: 8px 10px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--reference-additive-color, var(--purple)) 14%, white);
  line-height: 1.35;
}
.reference-additive-item strong {
  color: var(--ink);
  font-size: .78rem;
}
.reference-additive-item span {
  color: var(--muted);
  font-size: .86rem;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.reference-related-list {
  display: grid;
  gap: 7px;
}
.reference-related-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--muted);
  text-align: left;
  font-size: .8rem;
}
.reference-related-list i {
  color: var(--muted);
  font-size: .75rem;
}
.reference-muted {
  color: var(--muted);
  font-size: .88rem;
}
.reference-linked-tube {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  color: var(--ink);
  text-align: left;
}
.reference-linked-tube > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.reference-linked-tube small,
.reference-linked-tube em {
  color: var(--muted);
  font-size: .8rem;
  font-style: normal;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.reference-linked-tube > i {
  color: var(--muted);
  font-size: .75rem;
}
.reference-detail-actions {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.reference-detail-actions .primary-btn {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  gap: 9px;
}
#referenceDetailContent {
  touch-action: pan-y;
}

.reference-modal-footer {
  margin: 0 -20px;
  padding: 12px 20px max(15px,env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.98);
  box-shadow: 0 -10px 24px rgba(37,39,70,.05);
}
.reference-detail-pager {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
}
.reference-detail-pager .secondary-btn {
  position: relative;
  min-width: 0;
  height: 48px;
  padding: 0;
  white-space: nowrap;
}
.reference-pager-button-content {
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0 12px;
  text-align: center;
}
.reference-detail-pager .secondary-btn:last-child {
  justify-self: stretch;
}
.reference-detail-pager #referenceDetailPosition {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
.reference-modal-protocol {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
  text-align: center;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.reference-modal-protocol i {
  margin-right: 4px;
  color: var(--purple);
}
@media(max-width:520px) {
  .bottom-nav {
    padding-inline: 6px;
  }
  .nav-item {
    padding-inline: 2px;
    font-size: .66rem;
  }
  .reference-facts {
    grid-template-columns: 1fr;
  }
  .reference-test-controls {
    grid-template-columns: 1fr;
  }
  .reference-detail-card {
    width: calc(100vw - 18px);
    padding: 16px;
    padding-bottom: 0;
  }
  .reference-modal-footer {
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .reference-detail-pager .secondary-btn {
    font-size: .78rem;
    padding-inline: 9px;
  }
}

.category-cards-dialog .modal-card,
.existing-cards-dialog .modal-card {
  width: min(94vw, 650px);
  max-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.category-cards-list {
  min-height: 160px;
  flex: 1 1 auto;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
}

.category-cards-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.category-cards-list-item:last-child {
  border-bottom: 0;
}

.category-cards-list-copy {
  min-width: 0;
}

.category-cards-list-item strong {
  display: block;
  font-size: .84rem;
  line-height: 1.3;
}

.category-cards-list-item p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.2;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}

.category-cards-list-item .icon-btn.mini {
  width: 34px;
  min-width: 34px;
  height: 34px;
}

.category-card-row-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-cards-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 14px;
}
.category-cards-actions[hidden] { display: none; }

.category-cards-actions .primary-btn,
.category-cards-actions .secondary-btn {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
}

.existing-cards-search-field {
  flex: 0 0 auto;
}


.existing-cards-category-filter {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.existing-cards-category-filter > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}

.existing-cards-category-filter select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 6px 34px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
}

.existing-cards-toolbar .compact-selection-btn {
  min-height: 26px;
  padding: 3px 6px;
  font-size: .68rem;
  line-height: 1.05;
}

.existing-cards-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px;
}

.existing-cards-toolbar > span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
}

.existing-cards-toolbar > div {
  display: flex;
  align-items: center;
  gap: 3px;
}

.existing-cards-list {
  min-height: 180px;
  flex: 1 1 auto;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
}

.existing-card-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.existing-card-option:last-child {
  border-bottom: 0;
}

.existing-card-option > input {
  margin: 2px 0 0;
}

.existing-card-option > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.existing-card-option strong {
  font-size: .82rem;
  line-height: 1.25;
}

.existing-card-option p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.existing-card-option small {
  color: var(--purple);
  font-size: .66rem;
  line-height: 1.25;
}

.existing-cards-actions {
  flex: 0 0 auto;
  padding-top: 12px;
}

.existing-cards-actions .primary-btn,
.existing-cards-actions .secondary-btn {
  flex: 1;
  justify-content: center;
}

@media (max-width: 520px) {
  .category-cards-dialog .modal-card,
  .existing-cards-dialog .modal-card {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
  }

  .category-cards-actions {
    grid-template-columns: 1fr;
  }
}

.reference-fact-line{display:block}.reference-fact-line+.reference-fact-line{margin-top:.35rem}

.reference-fact-line{font-family: Calibri, 'Trebuchet MS', sans-serif;}

/* Tiger-top cap: organic mottling, with the same cap overlay and bottom shadow as every other tube. */
.tube-cap.tiger-cap {
  overflow: hidden;
  isolation: isolate;
  background: #ffeefa;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.08), 0 8px 12px color-mix(in srgb, var(--tube-cap) 28%, transparent);
}
.tube-cap.tiger-cap::after {
  content: "";
  position: absolute;
  inset: 13% 4%;
  z-index: 3;
  opacity: .3;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,transparent 2px 5px,rgb(0, 0, 0) 10px 12px);
  mix-blend-mode: soft-light;
}
.tiger-cap-svg {
  position: absolute;
  inset: 0;
  width: 101%;
  height: 101%;
  display: block;
  z-index: 1;
  mix-blend-mode: multiply;
}
.tube-cap.tiger-cap::before {
  display: none;
}

.mini-tube.tiger-mini::before { display: none; }
.mini-tube.tiger-mini { overflow: hidden; }
.tiger-mini-svg {
  position: absolute;
  left: -3px;
  right: -3px;
  top: -4px;
  width: calc(100% + 6px);
  height: 13px;
  z-index: 2;
  display: block;
  border-radius: 5px;
}
/* Mini Tiger-top icons keep the mottled pattern but omit the cylindrical cap shadow. */
.tiger-mini-svg .tiger-cap-rounding {
  display: none;
}
.mini-tube.tiger-mini::after {
  z-index: 1;
}


/* Clear discard tube: translucent specialty cap and compact reference label. */
.tube-cap.clear-cap {
  border: 0;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 245, 216, 0.34) 0%, rgba(230, 219, 255, 0.54) 48%, rgba(255, 251, 246, 0.84) 100%), rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(7px) saturate(.8);
  backdrop-filter: blur(7px) saturate(.8);
}
.tube-cap.clear-cap::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 10%;
  height: 40%;
  border-radius: 0;
  background: #ff0024;
  filter: blur(1px);
  opacity: 1;
  z-index: 2;
  mix-blend-mode: soft-light;
}

.tube-cap.clear-cap{
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.08), 0 8px 12px color-mix(in srgb, #e9aeff 15%, transparent);
}

.tube-cap.clear-cap::after {
  background: repeating-linear-gradient(90deg,#fff 2px 5px,rgb(58, 5, 5) 10px 12px);
}
.mini-tube.clear-mini::before {
  border: 0;
  -webkit-backdrop-filter: blur(4px) saturate(.8);
  backdrop-filter: blur(4px) saturate(.8);
  box-shadow: none;
}
.mini-tube.reference-tube-art.clear-mini::after, .mini-tube.clear-mini::after, .mini-tube.selected-tube-icon.clear-mini::after{
  visibility: hidden;
}
.mini-tube.clear-mini .clear-cap-mark {
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 4px;
  background: #ffc5c5;
  filter: blur(.15px);
  z-index: 4;
  pointer-events: none;
}
.reference-specialty-badge {
  display:inline-flex;
  align-items:center;
  margin-left:.5rem;
  padding:.18rem .48rem;
  border:1px solid #cfd6dd;
  border-radius:999px;
  background:#f4f6f8;
  color:#59636d;
  font-size:.67rem;
  font-weight:800;
  line-height:1;
  vertical-align:middle;
}

/* Order of Draw quiz-length spacing. */
#tubeSelectionPanel .order-rounds-heading { margin-top: 8px; }


.single-results-group { grid-template-columns: 1fr; }
.compact-results-list li { padding-block: 9px; }
.compact-result-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.compact-result-heading > strong { min-width:0; }
.compact-result-metrics { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.result-point-delta { min-width:46px; padding:3px 7px; border-radius:999px; text-align:center; font-size:.68rem; font-weight:850; }
.result-point-delta.positive { color:var(--success); background:color-mix(in srgb,var(--success) 12%,white); }
.result-point-delta.negative { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,white); }
.result-point-delta.neutral { color:var(--muted); background:var(--surface-soft,#f3f3f7); }
.result-mastery-bar { display:block; width:100%; height:7px; margin-top:5px; overflow:hidden; border-radius:999px; background:#e8e8ef; }
.result-mastery-bar > span { display:block; height:100%; border-radius:inherit; background:var(--purple); }
.result-mastery-bar.mastered > span { background:#86d69a; }
.compact-session-mastery { width:100%; display:grid; gap:4px; }
.compact-session-mastery .compact-result-metrics { justify-content:flex-start; }
@media (max-width:520px){
  .compact-result-heading { align-items:flex-start; }
  .compact-result-metrics { gap:4px; }
  .result-point-delta { min-width:42px; padding-inline:5px; }
}

/* Session result mastery: chip stays immediately left of the bar. */
.result-mastery-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.result-mastery-inline .mastery-badge {
  flex: 0 0 auto;
  font-size: .68rem;
}
.result-mastery-inline .result-mastery-bar {
  flex: 1 1 auto;
  min-width: 64px;
  margin-top: 0;
}
.compact-session-mastery {
  display: grid;
  grid-template-columns: auto minmax(110px, 1fr);
  align-items: center;
  gap: 7px 10px;
  width: 100%;
}
.compact-session-mastery .compact-result-metrics {
  grid-column: 1;
  grid-row: 1;
}
.compact-session-mastery .result-mastery-inline {
  grid-column: 2;
  grid-row: 1;
}
@media (max-width: 430px) {
  .compact-session-mastery {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
  }
  .result-mastery-inline { gap: 5px; }
}

/* Shared game action panels: Order of Draw, Common Tests, and Definition Match. */
.game-button-panel {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 16px clamp(12px, 2vw, 20px) !important;
  margin: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: rgba(255,255,255,.97) !important;
}

.game-button-panel .hint-btn,
.game-button-panel .primary-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(220px, 42vw);
  min-height: 50px;
  height: 50px;
  margin: 0;
  line-height: 1.1;
}

#commonTestsView .game-button-panel {
  position: sticky;
  bottom: 0;
  z-index: 12;
  grid-template-columns: none !important;
}

#matchView .match-board {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.2vh, 12px);
  padding-bottom: 0;
}

#matchView .match-stage { min-height: 0; }

#matchView .match-footer {
  position: relative;
  z-index: 10;
  align-self: end;
  flex: 0 0 auto !important;
}

#matchView .match-complete {
  position: absolute;
  z-index: 9;
  left: clamp(10px, 2vw, 20px);
  right: clamp(10px, 2vw, 20px);
  bottom: 92px;
  width: auto;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  padding: 7px 12px;
  overflow: hidden;
  pointer-events: none;
}

#matchView .match-complete[hidden] { display: none !important; }

@media (max-width: 700px) {
  .game-button-panel {
    gap: 8px !important;
    padding: 16px 10px !important;
  }
  .game-button-panel .hint-btn,
  .game-button-panel .primary-btn {
    min-width: min(150px, 44vw);
    min-height: 48px;
    height: 48px;
  }
  #matchView .match-complete { bottom: 88px; }
}

@media (max-height: 650px) {
  .game-button-panel {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .game-button-panel .hint-btn,
  .game-button-panel .primary-btn {
    min-height: 46px;
    height: 46px;
  }
  #matchView .match-complete {
    bottom: 84px;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
  }
}

/* Unified game spacing and flat answer feedback. */
:root {
  --game-area-padding: clamp(12px, 2vw, 20px);
  --game-button-panel-padding: 16px;
  --game-button-panel-gap: 12px;
}

/* Keep the primary game surfaces on one shared spacing scale. */
#matchView .match-board,
#orderDrawView .order-board {
  padding: var(--game-area-padding) !important;
}

/* Common Tests keeps its sticky header structure, but shares the same
   horizontal content inset as the other game surfaces. */
#commonTestsView .common-tests-board {
  --ct-board-pad: var(--game-area-padding) !important;
}
#commonTestsView .common-tests-board > .match-kicker {
  margin-top: var(--game-area-padding) !important;
}

/* One compact, consistent action-panel treatment for every scored game. */
#matchView .match-footer,
#orderDrawView .order-footer,
#commonTestsView .common-tests-footer {
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: var(--game-button-panel-padding) !important;
  padding-bottom: var(--game-button-panel-padding) !important;
  gap: var(--game-button-panel-gap) !important;
  align-items: center !important;
}

#matchView .match-footer {
  padding-inline: 0 !important;
}
#orderDrawView .order-footer {
  padding-inline: 0 !important;
}
#commonTestsView .common-tests-footer {
  padding-inline: var(--ct-board-pad, var(--game-area-padding)) !important;
}

/* Answer feedback should read as flat messaging, not a raised card. */
#matchView .match-complete,
#orderDrawView .order-complete,
#commonTestsView .common-tests-feedback,
#matchView .match-complete.correct,
#matchView .match-complete.incorrect,
#orderDrawView .order-complete.order-incorrect-message,
#commonTestsView .common-tests-feedback.correct,
#commonTestsView .common-tests-feedback.incorrect {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 700px), (max-height: 700px) {
  :root {
    --game-area-padding: 12px;
    --game-button-panel-padding: 16px;
    --game-button-panel-gap: 8px;
  }
}

/* Common Tests sticky action panel: match shared game panels and size to buttons. */
#commonTestsView .common-tests-footer.game-button-panel {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 60 !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  flex: 0 0 auto !important;
  min-height: calc(50px + (var(--game-button-panel-padding, 16px) * 2)) !important;
  height: auto !important;
  padding: var(--game-button-panel-padding, 16px) var(--ct-board-pad, var(--game-area-padding, 16px)) !important;
  gap: var(--game-button-panel-gap, 12px) !important;
  overflow: visible !important;
}

#commonTestsView .common-tests-footer.game-button-panel > button:not([hidden]) {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

#commonTestsView .common-tests-footer.game-button-panel > button[hidden] {
  display: none !important;
}

@media (max-width: 700px), (max-height: 700px) {
  #commonTestsView .common-tests-footer.game-button-panel {
    min-height: calc(48px + (var(--game-button-panel-padding, 16px) * 2)) !important;
    gap: var(--game-button-panel-gap, 8px) !important;
  }
  #commonTestsView .common-tests-footer.game-button-panel > button:not([hidden]) {
    min-height: 48px !important;
    height: 48px !important;
  }
}

/* Preserve a gutter around each scored-game board so its full drop shadow
   remains visible instead of being clipped by the full-screen game view. */
:root {
  --game-board-shadow-gutter-x: 22px;
  --game-board-shadow-gutter-bottom: 28px;
}

body.match-mode .app-shell,
body.order-mode .app-shell,
body.common-tests-mode .app-shell,
body.match-mode main,
body.order-mode main,
body.common-tests-mode main {
  overflow: visible !important;
}

#matchView.active,
#orderDrawView.active,
#commonTestsView.active {
  box-sizing: border-box !important;
  overflow: visible !important;
  padding-inline: var(--game-board-shadow-gutter-x) !important;
  padding-bottom: var(--game-board-shadow-gutter-bottom) !important;
}

/* Keep each board inside its grid track while allowing its shadow to paint
   into the reserved gutter. */
#matchView .match-board,
#orderDrawView .order-board,
#commonTestsView .common-tests-board {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 700px), (max-height: 700px) {
  :root {
    --game-board-shadow-gutter-x: 14px;
    --game-board-shadow-gutter-bottom: 22px;
  }
}

/* Keep the Common Tests picker stable. The clear button alignment is defined
   once alongside the search field above. */

#commonTestsPickerDialog .modal-card {
  height: min(760px, calc(100dvh - 36px));
  min-height: min(560px, calc(100dvh - 36px));
}

@media (max-width: 640px) {
  #commonTestsPickerDialog .modal-card {
    height: calc(100dvh - 20px);
    min-height: calc(100dvh - 20px);
  }
}

/* Order of Draw: keep the play area stable while the action bar sizes to its
   visible controls. The board reserves a fixed footer slot, while the footer
   itself is positioned at the bottom and may shrink when Hint disappears. */
#orderDrawView .order-board {
  --order-footer-slot-height: calc(50px + (var(--game-button-panel-padding, 16px) * 2));
  position: relative !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto var(--order-footer-slot-height) !important;
}

#orderDrawView .order-footer.game-button-panel {
  position: absolute !important;
  inset-inline: var(--game-area-padding) !important;
  bottom: var(--game-area-padding) !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  align-content: center !important;
}

@media (max-width: 700px), (max-height: 700px) {
  #orderDrawView .order-board {
    --order-footer-slot-height: calc(48px + (var(--game-button-panel-padding, 16px) * 2));
  }
}


/* Needle Match -----------------------------------------------------------
   Reuses the Order of Draw shell, toolbar, progress, board and action panel.
   Needle colors are declared with the needle data in app.js. */
body.needle-match-mode {
  overflow: hidden;
}
body.needle-match-mode .app-header,
body.needle-match-mode .bottom-nav {
  display: none !important;
}
body.needle-match-mode .app-shell {
  width: min(100%, 1380px);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: max(8px, env(safe-area-inset-top)) clamp(7px, 1.4vw, 18px) max(8px, env(safe-area-inset-bottom));
  overflow: visible;
}
body.needle-match-mode main {
  height: 100%;
  min-height: 0;
  overflow: visible;
}

#needleMatchView.active {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(5px, 1vh, 10px);
  overflow: visible;
  padding-inline: var(--game-board-shadow-gutter-x);
  padding-bottom: var(--game-board-shadow-gutter-bottom);
}

/* The HTML also carries order-board, so only the Needle Match-specific grid
   tracks need to be declared here. */
#needleMatchView .needle-match-board {
  --needle-footer-slot-height: calc(50px + (var(--game-button-panel-padding) * 2));
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto var(--needle-footer-slot-height);
}
#needleMatchView .needle-match-board > .match-kicker {
  justify-self: start;
  margin: 0;
  text-align: left;
  margin: 6px;
}

.needle-match-instructions {
  text-align: center;
}
.needle-match-instructions h2 {
  margin: 0;
  font-size: clamp(.92rem, 1.8vw, 1.22rem);
}
.needle-match-instructions p {
  margin: 4px 0 clamp(10px, 1.5vh, 18px);
  color: var(--muted);
  font-size: clamp(.8rem, 1.4vw, .95rem);
  font-family: Calibri, 'Trebuchet MS', sans-serif;
}

#needleMatchView .needle-match-stage {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: clamp(5px, 1vh, 10px);
  overflow: visible;
}

.needle-match-stage{
  overflow: visible!important;

}

#needleMatchView {
  --needle-slot-width: clamp(60px, 8.2vw, 96px);
  --needle-slot-height: clamp(76px, 22vh, 112px);
}
#needleMatchView .needle-target-grid,
#needleMatchView .needle-card-grid {
  display: grid;
  grid-template-columns: repeat(var(--needle-count, 8), var(--needle-slot-width));
  grid-auto-rows: var(--needle-slot-height);
  justify-content: center;
  justify-items: center;
  align-content: start;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  gap: clamp(3px, .8vw, 8px);
}
#needleMatchView .needle-target-wrap {
  box-sizing: border-box;
  width: var(--needle-slot-width);
  display: grid;
  grid-template-rows: auto var(--needle-slot-height);
  justify-items: center;
  align-items: center;
  align-self: start;
  gap: 3px;
  padding: 0;
  border: 1px solid var(--purple-soft);
  border-radius: clamp(10px, 1.6vw, 16px);
  text-align: center;
  overflow: visible;
}
#needleMatchView .needle-target-wrap > strong {
  box-sizing: border-box;
  padding-top: 8px;
  color: var(--purple);
  font-size: clamp(.665rem, 1.54vw, .875rem);
  font-weight: 400;
  line-height: 1.1;
}
#needleMatchView .needle-target,
#needleMatchView .needle-card {
  box-sizing: border-box;
  width: var(--needle-slot-width);
  height: var(--needle-slot-height);
  min-width: var(--needle-slot-width);
  min-height: var(--needle-slot-height);
  max-width: var(--needle-slot-width);
  max-height: var(--needle-slot-height);
  display: grid;
  place-items: center;
  border-radius: clamp(9px, 1.6vw, 16px);
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
}
#needleMatchView .needle-target {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--purple-soft);
  font-size: 1.4rem;
  font-weight: 400;
}
#needleMatchView .needle-target > i {
  display: grid;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  place-items: center;
  color: inherit;
  line-height: 1;
}
#needleMatchView .needle-target.is-filled {
  border: 0;
  outline: 0;
  box-shadow: none;
}
#needleMatchView .needle-target.is-incorrect {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
  animation: orderShake .35s ease;
}
#needleMatchView .needle-card {
  border: 1px solid var(--border);
  outline: 0;
  box-shadow: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#needleMatchView .needle-card:active,
#needleMatchView .needle-target[data-needle-instance]:active {
  cursor: grabbing;
}
#needleMatchView .needle-card.is-selected {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -2px;
}
#needleMatchView .needle-card.is-assigned {
  visibility: hidden;
  pointer-events: none;
}
#needleMatchView .needle-card.needle-drag-placeholder {
  visibility: hidden;
}
#needleMatchView .needle-target[data-needle-instance] {
  cursor: grab;
  touch-action: none;
}

/* Locked needle geometry everywhere in the project. */
.needle-visual {
  position: relative;
  display: block;
  aspect-ratio: 9 / 32;
  width: auto;
  height: var(--needle-visual-height, 100%);
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  margin-inline: auto;
  --needle-color: #2270dc;
}
.needle-shaft {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 3px;
  height: 56%;
  transform: translateX(-50%);
  border-radius: 3px 3px 0 0;
  background:linear-gradient(90deg, #303030 0%, #f8f8f8 18%, #eaeaea 34%, #fff 48%, #f8f8f8 54%, #d5d5d5 70%, #fff 100%);
  background-blend-mode: multiply;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.45),
    inset -1px 0 0 rgba(0,0,0,.18);
}
.needle-hub {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 70%;
  height: 44%;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--needle-color) 68%, white);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--needle-color) 62%, black) 0%,
      color-mix(in srgb, var(--needle-color) 82%, black) 13%,
      var(--needle-color) 38%,
      color-mix(in srgb, var(--needle-color) 72%, white) 58%,
      var(--needle-color) 76%,
      color-mix(in srgb, var(--needle-color) 68%, black) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 7px 0 10px rgba(0, 0, 0, .12),
    inset -5px 0 8px rgba(255, 255, 255, .14),
    inset 0 -6px 0 color-mix(in srgb, var(--needle-color) 74%, black);
}
.needle-hub::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: -1px;
  height: 30%;
  border-radius: 5px 5px 1px 1px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--needle-color) 72%, black),
      var(--needle-color) 42%,
      color-mix(in srgb, var(--needle-color) 76%, white));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 3px 0 5px rgba(0, 0, 0, .14);
  mix-blend-mode: multiply;
}
.needle-hub::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .3) 0%,
      transparent 24%,
      rgba(255, 255, 255, .36) 48%,
      transparent 68%,
      rgba(0, 0, 0, .18) 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .22),
      transparent 32%,
      rgba(0, 0, 0, .16) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.needle-hub > span {
  position: absolute;
  inset: 10% 19% 10%;
  border-radius: 4px 4px 0 0;
  border-inline: 2px solid rgba(255, 255, 255, .5);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .22),
    transparent 34%,
    rgba(255, 255, 255, .34) 52%,
    transparent 72%);
  mix-blend-mode: hard-light;
  opacity: .72;
}
.needle-hub > span::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 10%;
  width: 18%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .55), transparent);
  mix-blend-mode: soft-light;
}
.needle-hub > span::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: rgba(0, 0, 0, .18);
  mix-blend-mode: multiply;
}
#needleMatchView .needle-target .needle-visual,
#needleMatchView .needle-card .needle-visual,
#needleMatchView .needle-card.needle-drag-floating .needle-visual {
  --needle-visual-height: min(88%, 96px);
}

/* Dragged needles stay fully visible and snap from their live pointer position. */
.needle-card.needle-drag-floating {
  position: fixed !important;
  z-index: 10000 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: clamp(9px, 1.4vw, 15px) !important;
  background: var(--panel) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  touch-action: none !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
}
.needle-card.needle-drag-floating .needle-visual {
  opacity: 1 !important;
  visibility: visible !important;
}
#needleMatchView .needle-drag-origin .needle-visual,
#needleMatchView .needle-drag-origin .needle-color-name {
  visibility: hidden;
}

.needle-match-tip {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 20px;
  border-top: 0;
  color: var(--purple);
  font-size: clamp(.62rem, 1.25vw, .82rem);
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}
.needle-match-tip i {
  margin-right: 5px;
  color: var(--purple);
}
#needleMatchView .needle-match-feedback {
  position: absolute;
  z-index: 2;
  inset-inline: var(--game-area-padding);
  bottom: calc(var(--needle-live-footer-height, var(--needle-footer-slot-height)) + var(--game-area-padding) + 8px);
  margin: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Reuse the Order of Draw content-sized footer inside a reserved board slot. */
#needleMatchView .needle-match-footer.game-button-panel {
  position: absolute !important;
  z-index: 4;
  inset-inline: var(--game-area-padding) !important;
  bottom: var(--game-area-padding) !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  align-content: center !important;
  background: #fff;
}
#needleMatchView .needle-match-footer.game-button-panel > button[hidden] {
  display: none !important;
}

/* Needle picker and resource visuals. */
.needle-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.needle-option {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  text-align: center;
  cursor: pointer;
}
.needle-option input {
  position: absolute;
  inset: 8px auto auto 8px;
}
.needle-option .needle-visual {
  --needle-visual-height: 74px;
}
.needle-option span { display: grid; }
.needle-option small { color: var(--muted); }
.needle-option.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.needle-selection-count { margin-bottom: 0; }
.reference-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reference-needle-icon {
  width: 52px;
  height: 74px;
  display: grid;
  place-items: center;
  flex: 0 0 52px;
}
.reference-needle-icon .needle-visual { --needle-visual-height: 68px; }
.reference-detail-needle {
  width: 84px;
  height: 130px;
  display: grid;
  place-items: center;
  flex: 0 0 84px;
}
.reference-detail-needle .needle-visual { --needle-visual-height: 120px; }
.reference-needle-row { --reference-tube-color: var(--needle-color); }

@media (orientation: portrait) {
  body.needle-match-mode .app-shell {
    width: 100%;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }
  #needleMatchView.active { gap: 8px; }
  #needleMatchView .needle-match-board {
    --needle-footer-slot-height: calc(48px + (var(--game-button-panel-padding) * 2));
    gap: clamp(8px, 1.2vh, 14px);
    padding: var(--game-area-padding);
    border-radius: 24px;
  }
  #needleMatchView .needle-match-board > .match-kicker {
    padding: 7px 13px;
    font-size: clamp(.78rem, 2.9vw, .84rem);
  }
  #needleMatchView {
    --needle-slot-width: clamp(64px, 20vw, 88px);
    --needle-slot-height: clamp(82px, 12vh, 104px);
  }
  #needleMatchView .needle-target-grid,
  #needleMatchView .needle-card-grid {
    grid-template-columns: repeat(var(--needle-portrait-columns, 4), var(--needle-slot-width));
    grid-template-rows: repeat(2, var(--needle-slot-height));
  }
  #needleMatchView .needle-match-stage {
    grid-template-rows: minmax(0, 1.08fr) minmax(0, .92fr);
  }
}

@media (max-width: 480px) {
  .needle-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Needle Match viewport fit and target treatment. */
#needleMatchView .needle-target {
  color: var(--purple-soft);
  font-weight: 400;
}

body.needle-match-mode .app-shell {
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}

#needleMatchView.active {
  padding-bottom: 10px;
  overflow: hidden;
}

#needleMatchView .needle-match-board,
#needleMatchView .needle-match-stage {
  min-height: 0;
  overflow: hidden;
}

#needleMatchView .needle-match-stage {
  height: 100%;
}

#needleMatchView .needle-target-grid,
#needleMatchView .needle-card-grid {
  max-height: 100%;
}

/* Portrait uses two rows for each set. Target rows include the gauge label in
   their measured height, preventing the labels and drop areas from overlapping. */
@media (orientation: portrait) {
  #needleMatchView {
    --needle-slot-width: clamp(52px, 18.5vw, 82px);
    --needle-slot-height: clamp(62px, 10.2dvh, 92px);
    --needle-target-label-height: 1.45rem;
    --needle-target-row-height: calc(
      var(--needle-target-label-height) + var(--needle-slot-height) + 5px
    );
  }

  #needleMatchView .needle-match-board {
    gap: clamp(4px, .75dvh, 8px);
    padding: clamp(8px, 1.2dvh, 12px);
  }

  #needleMatchView .needle-match-instructions p {
    margin-bottom: clamp(6px, 1dvh, 10px);
  }

  #needleMatchView .needle-match-stage {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3px, .65dvh, 7px);
  }

  #needleMatchView .needle-target-grid,
  #needleMatchView .needle-card-grid {
    grid-template-columns: repeat(
      var(--needle-portrait-columns, 4),
      var(--needle-slot-width)
    );
    gap: clamp(3px, .8vw, 7px);
  }

  #needleMatchView .needle-target-grid {
    grid-template-rows: repeat(var(--needle-portrait-rows, 2), var(--needle-target-row-height));
    grid-auto-rows: var(--needle-target-row-height);
    align-content: center;
  }

  #needleMatchView .needle-card-grid {
    grid-template-rows: repeat(var(--needle-portrait-rows, 2), var(--needle-slot-height));
    grid-auto-rows: var(--needle-slot-height);
    align-content: start;
    margin-top: -10px;
  }

  #needleMatchView .needle-target-wrap {
    height: var(--needle-target-row-height);
    grid-template-rows: var(--needle-target-label-height) var(--needle-slot-height);
    gap: 5px;
  }

  #needleMatchView .needle-target-wrap > strong {
    align-self: center;
    font-size: clamp(1rem, 4vw, 1.22rem);
  }

  .needle-match-tip {
    padding-bottom: clamp(4px, .8dvh, 8px);
  }
}

/* Landscape uses one centered row for each set. */
@media (orientation: landscape) {
  #needleMatchView {
    --needle-slot-width: clamp(48px, 7.2vw, 88px);
    --needle-slot-height: clamp(66px, 18dvh, 106px);
  }

  #needleMatchView .needle-target-grid,
  #needleMatchView .needle-card-grid {
    grid-template-columns: repeat(var(--needle-count, 8), var(--needle-slot-width));
    grid-template-rows: var(--needle-slot-height);
    grid-auto-rows: var(--needle-slot-height);
  }

  #needleMatchView .needle-match-stage {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3px, .8dvh, 8px);
  }
}

@media (max-height: 620px) {
  #needleMatchView .needle-match-instructions h2 {
    font-size: .9rem;
  }

  #needleMatchView .needle-match-instructions p {
    margin-top: 2px;
    font-size: .7rem;
  }

  #needleMatchView .needle-match-board > .match-kicker {
    padding-block: 4px;
  }

  .needle-match-tip {
    padding-bottom: 3px;
    font-size: .62rem;
  }
}


/* Needle Match close button uses the same base icon-button dimensions as the rest of the app. */
#needleMatchView .order-toolbar .icon-btn {
  min-width: 42px;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 1rem;
}


/* Needle Match options reuse the Common Tests dot and quiz-length patterns. */
#needleSelectionPanel .common-round-options label,
#needleSelectionPanel .common-round-options span {
  white-space: nowrap;
}
#needleSelectionPanel .needle-summary-chip {
  gap: 8px;
}

/* Needle Match option summary. */
#needleSelectionPanel .needle-selection-summary {
  margin-bottom: 16px;
}
.needle-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.needle-summary-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--needle-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--needle-color) 72%, black);
}

/* Live-height feedback positioning for Order of Draw. */
#orderDrawView .order-board { position: relative; }
#orderDrawView .order-complete.order-incorrect-message {
  position: absolute;
  z-index: 1;
  inset-inline: var(--game-area-padding, 16px);
  bottom: calc(var(--order-live-footer-height, 88px) + var(--game-area-padding, 16px) + 8px);
  margin: 0;
  pointer-events: none;
}


/* Needle Match results: show the gauge's data-driven color beside its label. */
.needle-result-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.needle-result-dot {
  transform: none;
}

/* Keep the Order of Draw play area fixed while feedback is shown. The
   feedback row always has the same height, even when the incorrect message is
   absolutely positioned above the live button panel. */
#orderDrawView .order-board {
  --order-feedback-slot-height: 58px;
  grid-template-rows: auto auto minmax(0, 1fr) var(--order-feedback-slot-height) var(--order-footer-slot-height) !important;
}
#orderDrawView .order-complete {
  box-sizing: border-box;
  min-height: var(--order-feedback-slot-height);
}
@media (max-width: 700px), (max-height: 700px) {
  #orderDrawView .order-board {
    --order-feedback-slot-height: 56px;
  }
}

.needle-cap{
  position:absolute;
  left:50%;
  top:-2%;
  transform:translateX(-50%);
  width:14px;
  height:18px;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.65),
    rgba(255,255,255,.35) 55%,
    rgba(230,230,235,.25));
  border:1px solid rgba(255,255,255,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 4px rgba(0,0,0,.06);
  backdrop-filter: blur(1px);
  mix-blend-mode:screen;
  pointer-events:none;
}

.needle-picker-choice .reference-needle-icon {
  transform: scale(75%) rotate(52deg);
}
/* Let staggered Needle Match round transitions travel fully beyond the board. */
#needleMatchView.needle-round-motion,
#needleMatchView.needle-round-motion .needle-match-board,
#needleMatchView.needle-round-motion .needle-match-stage,
#needleMatchView.needle-round-motion .needle-target-grid,
#needleMatchView.needle-round-motion .needle-card-grid {
  overflow: visible;
}

#needleMatchView.needle-round-motion .needle-target,
#needleMatchView.needle-round-motion .needle-card {
  position: relative;
  z-index: 6;
}

/* Exit clones preserve the on-screen needle and optional color label as one unit. */
.needle-round-exit-clone {
  position: fixed;
  overflow: visible;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  pointer-events: none;
}
.needle-round-exit-clone .needle-visual,
.needle-round-exit-clone .needle-color-name {
  position: absolute;
  margin: 0;
}


/* Needle Match no longer uses the instructional tip row. Keep the two play
   regions in normal flow so round, shake, drag, and exit animations use stable
   geometry without a layout pop. */
#needleMatchView .needle-match-stage {
  grid-template-rows: minmax(0, 1.06fr) minmax(0, .94fr);
  row-gap: clamp(2px, .55vh, 6px);
}

/* Optional Needle Match color labels. These are overlaid so needle and card geometry never changes. */
#needleSelectionPanel .needle-color-name-control {
  margin-top: 14px;
}
#needleMatchView .needle-card,
#needleMatchView .needle-target {
  position: relative;
}
#needleMatchView .needle-color-name {
  position: absolute;
  left: 50%;
  bottom: 3px;
  z-index: 2;
  max-width: calc(100% - 6px);
  transform: translateX(-50%);
  overflow: hidden;
  color: var(--muted);
  font-size: .5rem;
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.needle-card.needle-drag-floating .needle-color-name {
  font-size: .5rem;
  font-weight: 400;
}

/* Preserve the exact rendered needle size and keep one color label during pointer dragging. */
.needle-card.needle-drag-floating .needle-visual {
  margin-inline: auto;
  flex: 0 0 auto;
}
.needle-card.needle-drag-floating .needle-color-name {
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  max-width: calc(100% - 6px);
  margin: 0;
  padding: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* Needle color-label spacing: reserve room without resizing the needle artwork. */
#needleMatchView {
  --needle-color-label-space: 12px;
  --needle-card-height: calc(var(--needle-slot-height) + var(--needle-color-label-space));
}

#needleMatchView .needle-target-grid,
#needleMatchView .needle-card-grid {
  grid-auto-rows: var(--needle-card-height);
}

#needleMatchView .needle-target-wrap {
  grid-template-rows: auto var(--needle-card-height);
}

#needleMatchView .needle-target,
#needleMatchView .needle-card {
  height: var(--needle-card-height);
  min-height: var(--needle-card-height);
  max-height: var(--needle-card-height);
}

#needleMatchView .needle-target .needle-visual,
#needleMatchView .needle-card .needle-visual,
#needleMatchView .needle-card.needle-drag-floating .needle-visual {
  --needle-visual-height: min(calc(var(--needle-slot-height) - 8px), 96px);
  transform: translateY(-4px);
}

#needleMatchView .needle-color-name,
.needle-card.needle-drag-floating .needle-color-name {
  bottom: 5px;
  font-size: .6rem;
  line-height: 1.05;
  overflow: visible;
}

@media (orientation: portrait) {
  #needleMatchView {
    --needle-target-row-height: calc(
      var(--needle-target-label-height) + var(--needle-card-height) + 5px
    );
  }

  #needleMatchView .needle-card-grid {
    grid-template-rows: repeat(var(--needle-portrait-rows, 2), var(--needle-card-height));
    grid-auto-rows: var(--needle-card-height);
  }

  #needleMatchView .needle-target-wrap {
    grid-template-rows: var(--needle-target-label-height) var(--needle-card-height);
  }
}

@media (orientation: landscape) {
  #needleMatchView .needle-target-grid,
  #needleMatchView .needle-card-grid {
    grid-template-rows: var(--needle-card-height);
    grid-auto-rows: var(--needle-card-height);
  }
}

/* Needle Match mobile viewport fit ---------------------------------------
   Keep the portrait game shell fixed to the visual viewport, reduce only
   the outer side gutters, and size the two target/needle rows so the full
   board remains visible without page scrolling. */
@media (orientation: portrait) and (max-width: 700px) {
  body.needle-match-mode {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.needle-match-mode .app-shell {
    width: 100%;
    max-width: none;
    height: 100dvh;
    padding-top: max(5px, env(safe-area-inset-top));
    padding-right: 2px;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
    padding-left: 2px;
    overflow: hidden;
  }

  body.needle-match-mode main,
  #needleMatchView.active {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #needleMatchView.active {
    padding-inline: 3px;
    padding-bottom: 7px;
    gap: 4px;
  }

  #needleMatchView {
    --needle-slot-width: clamp(50px, 18.2vw, 78px);
    --needle-slot-height: clamp(54px, 8.4dvh, 78px);
  }

  #needleMatchView .needle-match-board {
    min-height: 0;
    padding: 6px;
    gap: 3px;
    overflow: hidden;
  }

  #needleMatchView .needle-match-stage {
    min-height: 0;
    gap: 2px;
  }

  #needleMatchView .needle-target-grid,
  #needleMatchView .needle-card-grid {
    max-width: 100%;
    max-height: 100%;
    gap: 3px;
  }
}


/* Compact category chips in Add Existing Cards / Choose Cards. */
.existing-card-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.existing-card-category-chips .category-chip {
  margin: 0;
  padding: 2px 6px;
  gap: 4px;
  font-size: .62rem;
  line-height: 1.15;
}

.existing-card-category-chips .category-chip i {
  font-size: .58rem;
}


/* Choose Cards: align selection controls and use the app purple for checks. */
#existingCardsDialog .existing-card-option {
  align-items: center;
}

#existingCardsDialog .existing-card-option > input[type="checkbox"] {
  align-self: center;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--purple);
}

/* Category Terms search uses the shared search-field/clear-button behavior. */
#categoryCardsDialog .category-cards-search-field {
  flex: 0 0 auto;
  margin: 10px 0 12px;
}


.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* Activity-first home setup flow. */
#homeView {
  overflow-x: hidden;
}

.home-flow-step[hidden] {
  display: none;
}

.home-flow-step.active {
  display: grid;
  gap: 16px;
}

.home-flow-step.flow-enter-forward {
  animation: home-flow-in-forward 260ms cubic-bezier(.22,.78,.24,1) both;
}

.home-flow-step.flow-enter-back {
  animation: home-flow-in-back 260ms cubic-bezier(.22,.78,.24,1) both;
}

@keyframes home-flow-in-forward {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes home-flow-in-back {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}

.home-flow-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin: 20px 0;
}

.home-flow-back {
  width: auto;
  min-height: 38px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--purple);
  font: inherit;
  font-weight: 500;
}

.home-flow-actions {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 4px;
}

.home-flow-actions .primary-btn {
  min-width: 132px;
}

.home-flow-message {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--muted);
  font-size: .86rem;
}

.home-flow-message[hidden] {
  display: none;
}



@media (prefers-reduced-motion: reduce) {
  .home-flow-step.flow-enter-forward,
  .home-flow-step.flow-enter-back {
    animation: none;
  }
}



#readyStep.active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 70vh;
}

#readyStep .hero-panel {
  align-self: center;
  margin: 0;
}

.small-btn {
  padding: 6px 12px;
  font-size: .9rem;
}

.home-flow-back i,.small-btn i{margin:0 .35rem;}




#directionPanel > .flashcard-category-options{
  border-top:0;
  padding-top:12px;
}




/* Share only the selected-categories element between Flashcards and Definition Match. */
#directionPanel #flashcardCategorySlot {
  margin-top: 18px;
}

#directionPanel #flashcardCategorySlot .category-selection-summary {
  margin-top: 0;
}


/* Portrait game-stage alignment:
   Definition Match and Order of Draw use Needle Match's exact outer spacing. */
@media (orientation: portrait) {
  body.match-mode .app-shell,
  body.order-mode .app-shell {
    width: min(100%, 1380px);
    padding-left: clamp(7px, 1.4vw, 18px) !important;
    padding-right: clamp(7px, 1.4vw, 18px) !important;
    overflow: visible !important;
  }

  body.match-mode main,
  body.order-mode main,
  body.needle-match-mode main {
    min-width: 0;
    overflow: visible !important;
  }

  #matchView.active,
  #orderDrawView.active,
  #needleMatchView.active {
    box-sizing: border-box;
    min-width: 0;
    padding-left: var(--game-board-shadow-gutter-x) !important;
    padding-right: var(--game-board-shadow-gutter-x) !important;
    padding-bottom: var(--game-board-shadow-gutter-bottom) !important;
    overflow: visible !important;
  }

  #matchView .match-board,
  #orderDrawView .order-board,
  #needleMatchView .needle-match-board {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Keep Needle Match's padding unchanged while extending only its shadow
     through the existing gutter to the edge of the game view. */
  #needleMatchView .needle-match-board {
    box-shadow:
      0 18px 42px var(--game-board-shadow-gutter-x)
      rgba(37, 39, 70, .07) !important;
  }
}


/* The view owns the outer gutter; these ancestors must not clip its shadow. */
body.needle-match-mode .app-shell,
#needleMatchView.active {
  overflow: visible !important;
}


/* Reduced portrait outer padding for scored game stages. */
@media (orientation: portrait) {
  :root {
    --portrait-scored-game-gutter-x: 5px;
    --portrait-scored-game-gutter-bottom: 16px;
  }

  body.match-mode .app-shell,
  body.order-mode .app-shell,
  body.common-tests-mode .app-shell,
  body.needle-match-mode .app-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  #matchView.active,
  #orderDrawView.active,
  #commonTestsView.active,
  #needleMatchView.active {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-left: var(--portrait-scored-game-gutter-x) !important;
    padding-right: var(--portrait-scored-game-gutter-x) !important;
    padding-bottom: var(--portrait-scored-game-gutter-bottom) !important;
    overflow: visible !important;
  }

  #matchView .match-board,
  #orderDrawView .order-board,
  #commonTestsView .common-tests-board,
  #needleMatchView .needle-match-board {
    width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* Activities are grouped into full-width labeled sections. */
.activity-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.activity-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
}

.activity-group-heading {
  width: 100%;
  margin: 0;
  padding: 0 4px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.activity-group-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.activity-group-buttons .activity-option {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .activity-group-buttons {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Keep Definition Match progress centered after removing the Shuffle button. */
#matchView .match-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
}

#matchView .match-toolbar #matchProgress {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  margin: 0;
}

#matchView .match-toolbar > :first-child {
  grid-column: 1;
  justify-self: start;
}


/* Activity setup supports horizontal swipe navigation without blocking vertical scrolling. */
#homeView .home-flow-step {
  touch-action: pan-y;
}






/* Keep mobile modals inside the actually visible browser viewport. */
.app-restoring body {
  visibility: hidden;
}

@media (max-width: 760px) {
  dialog {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px) !important;
  }

  dialog[open] {
    inset-block-start: max(6px, env(safe-area-inset-top)) !important;
    inset-block-end: max(6px, env(safe-area-inset-bottom)) !important;
    margin-block: auto !important;
  }

  dialog .modal-card {
    box-sizing: border-box;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px) !important;
    overflow: hidden;
  }

  dialog .modal-body,
  dialog .modal-content,
  dialog .modal-list,
  dialog [data-modal-scroll] {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Preserve browser pinch/zoom and other multi-touch gestures. */
#homeView {
  touch-action: pan-x pan-y pinch-zoom;
}


/* Vertically center open modals while respecting visible viewport */
@media (max-width:760px){
  dialog[open]{
    position:fixed;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 0px) !important;
  }
}


/* Remove the browser tap-highlight flash on touch devices. */
@media (hover: none) and (pointer: coarse) {
  html,
  body,
  button,
  a,
  input,
  select,
  textarea,
  label,
  summary,
  [role="button"],
  [tabindex],
  .activity-option,
  .category-row,
  .match-item,
  .common-purpose-choice,
  .common-tube-choice,
  .needle-card,
  .needle-target {
    -webkit-tap-highlight-color: transparent;
  }

  #studyView {
    touch-action: pan-y pinch-zoom;
  }
}


/* Beta label immediately beside the MedicaLingo brand text. */
.brand-title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.brand-title-row h1 {
  margin: 0;
}

.brand-title-row .beta-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.42rem 2px 0.42rem;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 6px;
  opacity: .5;
}


/* The selected-category summary belongs only to vocabulary activity options. */
#categorySelectionSummary[hidden] {
  display: none !important;
}


/* ==========================================================================
   MedicaLingo playful learning rebrand
   Visual-only overrides. Existing layout, flow, and interaction behavior stay intact.
   ========================================================================== */

:root {
  --purple: #5146d9;
  --purple-dark: #4036b8;
  --purple-deep: #332a9f;
  --purple-light: #776fe8;
  --purple-soft: #efedff;
  --purple-pale: #f7f6ff;
  --ink: #29264a;
  --muted: #77738f;
  --line: #dddaf3;
  --surface: #ffffff;
  --background: #f8f7ff;
  --success: #665de3;
  --danger: #e45767;
  --warning: #f3b63f;
  --radius: 22px;
  font-family: "Nunito", "Avenir Next Rounded", "Arial Rounded MT Bold",
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

html,
body {
  background: var(--background);
  color: var(--ink);
}

body {
  background-image:
    radial-gradient(circle at 8% -4%, rgba(81, 70, 217, .13), transparent 28rem),
    radial-gradient(circle at 96% 14%, rgba(119, 111, 232, .1), transparent 24rem);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.app-header h1,
.hero-panel h2,
.section-heading h2,
.page-heading h2,
.modal-card h2,
.modal-card h3,
.game-stage h2 {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.025em;
}

.brand-mark {
  background: linear-gradient(145deg, #6f66ea, var(--purple));
  box-shadow:
    0 5px 0 var(--purple-dark),
    0 10px 22px rgba(81, 70, 217, .22);
  font-weight: 950;
}

.beta-pill,
.eyebrow,
.activity-section-subheader {
  color: var(--purple);
  font-weight: 950;
}

.panel,
.hero-panel,
.modal-card,
.stat-card,
.reference-card,
.category-card,
.term-card,
.game-stage,
.match-board,
.common-tests-board,
.needle-match-board,
.order-board {
  background: var(--surface);
  border-color: var(--line);
  /*box-shadow:0 4px 0 rgba(70, 59, 173, .12), 0 10px 3px rgba(51, 42, 159, .07);*/
}

.hero-panel {
  background:
    linear-gradient(145deg, rgba(239, 237, 255, .96), rgba(255, 255, 255, .98));
  border: 2px solid #d8d4fb;
}

.hero-icon,
.activity-icon,
.reference-icon,
.icon-badge {
  color: var(--purple);
  background: var(--purple-soft);
  border: 1px solid #dcd8fb;
  font-weight: 950;
}

.primary-btn,
.secondary-btn,
.text-btn,
.icon-btn,
.segment,
.activity-option,
.study-action,
.hint-btn,
.bottom-nav button,
.game-choice,
.match-card,
.test-option,
.needle-option,
.order-tube,
button {
  -webkit-tap-highlight-color: transparent;
}

.primary-btn {
  background: var(--purple);
  color: #fff;
  border: 0;
  box-shadow:
    0 5px 0 var(--purple-dark),
    0 8px 18px rgba(81, 70, 217, .18);
  font-weight: 950;
  letter-spacing: .01em;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease;
}

.primary-btn:hover {
  background: #5d53df;
}

.primary-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--purple-dark),
    0 3px 8px rgba(81, 70, 217, .15);
}

.primary-btn:disabled {
  background: #c8c4ec;
  color: #fff;
  box-shadow: 0 4px 0 #aaa5d4;
}

.secondary-btn,
.hint-btn,
.icon-btn {
  color: var(--purple-dark);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 0 #d1cee8;
  font-weight: 900;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    background-color .12s ease;
}

.secondary-btn:hover,
.hint-btn:hover,
.icon-btn:hover {
  background: var(--purple-pale);
  border-color: #c9c4f2;
}

.secondary-btn:active,
.hint-btn:active,
.icon-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #d1cee8;
}

.text-btn {
  color: var(--purple);
  font-weight: 900;
}

.segmented {
  background: #f2f0ff;
  border: 1px solid var(--line);
}

.segment {
  color: var(--muted);
  font-weight: 900;
  box-shadow: inset 0 -3px 0 var(--line);
}

.segment:not(:last-child){
  border-right: 1px solid var(--line);
}


.segment.active {
  color: #fff;
  background: var(--purple);
  box-shadow: inset 0 -3px 0 var(--purple-dark);
}

.activity-option {
  border-color: var(--line);
  box-shadow: 0 4px 0 #dedbf0;
  font-weight: 850;
}

.activity-option small {
  font-family: Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 500;
}

.activity-option:hover {
  background: var(--purple-pale);
  border-color: #cfcaf5;
}

.activity-option.active {
  color: var(--purple-dark);
  background: var(--purple-soft);
  border-color: var(--purple);
  box-shadow:
    0 4px 0 #bdb7ed,
    0 8px 18px rgba(81, 70, 217, .1);
}

.activity-option.active .activity-icon {
  color: #fff;
  background: var(--purple);
  border-color: var(--purple);
}

.field-label,
label,
legend {
  color: var(--ink);
  font-weight: 850;
}

input,
select,
textarea {
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  box-shadow: inset 0 2px 0 rgba(55, 43, 150, .025);
}

input:hover,
select:hover,
textarea:hover {
  border-color: #ccc7f0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(81, 70, 217, .13);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--purple);
}

.category-row,
.manager-row,
.term-category-option,
.reference-list-item,
.test-list-item {
  background: #fff;
  border-color: var(--line);
}

.category-row:hover,
.manager-row:hover,
.term-category-option:hover,
.reference-list-item:hover,
.test-list-item:hover {
  background: var(--purple-pale);
}

.mastery-badge,
.status-pill,
.filter-chip {
  color: var(--purple-dark);
  background: var(--purple-soft);
  border-color: #d7d2fa;
  font-weight: 900;
}

.progress-track,
.stat-bar,
.term-mastery-bar {
  background: var(--line);
}

.progress-bar,
.stat-bar > span,
.term-mastery-bar > span {
  background: linear-gradient(90deg, var(--purple), var(--purple-light));
}

.bottom-nav {
  background: rgba(255, 255, 255, .97);
  border-color: var(--line);
  box-shadow: 0 -8px 28px rgba(42, 35, 112, .09);
}

.bottom-nav button {
  color: var(--muted);
  font-weight: 900;
}

.bottom-nav button.active,
.bottom-nav button[aria-current="page"] {
  color: var(--purple);
}

.flashcard-face,
.match-card,
.game-choice,
.test-option,
.needle-option,
.order-tube {
  border-color: var(--line);
  box-shadow: 0 4px 0 #d9d6ec;
}

.flashcard-face {
  background: #fff;
}

.flashcard-face-back {
  background: linear-gradient(145deg, var(--purple-soft), #fff);
}

.match-card:hover,
.game-choice:hover,
.test-option:hover,
.needle-option:hover,
.order-tube:hover {
  border-color: #c8c3ef;
  background: var(--purple-pale);
}

.match-card.selected,
.game-choice.selected,
.test-option.selected,
.needle-option.selected,
.order-tube.selected {
  color: var(--purple-dark);
  background: var(--purple-soft);
  border-color: var(--purple);
  box-shadow: 0 4px 0 #bcb6ec;
}

.correct,
.is-correct,
.answer-correct,
.match-card.matched,
.game-choice.correct,
.test-option.correct,
.needle-option.correct {
  color: var(--purple-deep) !important;
  background: #e8e5ff !important;
  border-color: #8178e9 !important;
}

.incorrect,
.is-incorrect,
.answer-incorrect,
.game-choice.incorrect,
.test-option.incorrect,
.needle-option.incorrect {
  color: #9f3143 !important;
  background: #fff0f2 !important;
  border-color: #ef8898 !important;
}

.game-button-panel {
  background: rgba(255, 255, 255, .98) !important;
  border-color: var(--line) !important;
}

.modal::backdrop,
dialog::backdrop {
  background: rgba(31, 25, 75, .52);
  backdrop-filter: blur(3px);
}

.modal-card {
  border: 2px solid var(--line);
}

.toast {
  color: #fff;
  background: var(--purple-deep);
  box-shadow:
    0 5px 0 #221a78,
    0 12px 28px rgba(30, 22, 99, .25);
  font-weight: 900;
}

.empty-state {
  color: var(--muted);
  background: var(--purple-pale);
  border: 2px dashed #cbc6ef;
}

hr,
.divider {
  border-color: var(--line);
}

a {
  color: var(--purple);
}

::selection {
  color: #fff;
  background: var(--purple);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 4px solid rgba(81, 70, 217, .22);
  outline-offset: 3px;
}

/* Preserve compact game geometry while giving game surfaces the same tactile style. */
body.study-mode .game-stage,
body.study-mode .match-board,
body.study-mode .common-tests-board,
body.study-mode .needle-match-board,
body.study-mode .order-board {
  border-color: #d8d4ee;
  box-shadow:
    0 5px 0 rgba(64, 54, 184, .18),
    0 12px 28px rgba(51, 42, 159, .08);
}

/* Keep native list and modal sizing unchanged; only refresh their visual treatment. */
.category-list,
.category-manager-list,
.activity-options {
  border-color: var(--line);
  background: #fff;
}

/* Mobile feedback remains immediate and prevents blue browser tap flashes. */
@media (hover: none) and (pointer: coarse) {
  .primary-btn:hover {
    background: var(--purple);
  }

  .secondary-btn:hover,
  .hint-btn:hover,
  .icon-btn:hover,
  .activity-option:hover,
  .match-card:hover,
  .game-choice:hover,
  .test-option:hover,
  .needle-option:hover,
  .order-tube:hover {
    background: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primary-btn,
  .secondary-btn,
  .hint-btn,
  .icon-btn,
  .activity-option {
    transition: none;
  }
}


/* Home activity cards: match the app's tactile push-down button motion. */
#homeView .activity-option,
#homeView .activity-btn,
#homeView .activity-button,
#homeView button[data-activity],
#homeView [data-activity].activity-option {
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease !important;
  transform: translateY(0);
  will-change: transform;
}

#homeView .activity-option:active,
#homeView .activity-btn:active,
#homeView .activity-button:active,
#homeView button[data-activity]:active,
#homeView [data-activity].activity-option:active {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 #d1cee8 !important;
}

@media (prefers-reduced-motion: reduce) {
  #homeView .activity-option,
  #homeView .activity-btn,
  #homeView .activity-button,
  #homeView button[data-activity],
  #homeView [data-activity].activity-option {
    transition: none !important;
  }
}


/* Flashcards game controls: tactile Duolingo-style treatment. */
#studyView .study-action {
  color: var(--purple-dark);
  background: #fff;
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 #d1cee8;
  font-weight: 900;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease;
  transform: translateY(0);
  -webkit-tap-highlight-color: transparent;
}

#studyView .study-action:hover:not(:disabled) {
  background: var(--purple-pale, #f7f6ff);
  border-color: #c9c4f2;
}

#studyView .study-action:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #d1cee8;
}

/* Flip is the primary Flashcards action. */
#studyView #flipBtn {
  color: #fff;
  background: var(--purple);
  border-color: var(--purple);
  box-shadow:
    0 4px 0 var(--purple-dark),
    0 7px 15px rgba(81, 70, 217, .16);
}

#studyView #flipBtn:hover:not(:disabled) {
  background: #5d53df;
  border-color: #5d53df;
}

#studyView #flipBtn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 var(--purple-dark),
    0 3px 8px rgba(81, 70, 217, .13);
}

#studyView .study-action:disabled {
  opacity: .42;
  box-shadow: 0 3px 0 #d8d5e9;
}

@media (hover: none) and (pointer: coarse) {
  #studyView .study-action:hover:not(:disabled) {
    background: #fff;
    border-color: var(--line);
  }

  #studyView #flipBtn:hover:not(:disabled) {
    color: #fff;
    background: var(--purple);
    border-color: var(--purple);
  }
}

@media (prefers-reduced-motion: reduce) {
  #studyView .study-action {
    transition: none;
  }
}


/* Definition Match: keep the round-complete banner fully above the bottom action bar. */
#matchView .match-complete {
  z-index: 13;
  bottom: 116px !important;
}

@media (max-width: 700px) {
  #matchView .match-complete {
    bottom: 112px !important;
  }
}

@media (max-height: 650px) {
  #matchView .match-complete {
    bottom: 106px !important;
  }
}

@media (max-width: 700px) and (max-height: 650px) {
  #matchView .match-complete {
    bottom: 104px !important;
  }
}


/* All game Next buttons: stay visually pressed down while inactive. */
#studyView #nextCardBtn:disabled,
#matchView #nextMatchBtn:disabled,
#orderDrawView #nextOrderDrawBtn:disabled,
#commonTestsView #nextCommonTestBtn:disabled,
#needleMatchView #nextNeedleMatchBtn:disabled {
  background: #eceaf8 !important;
  border-color: #ddd9ef !important;
  color: #aaa5c2 !important;
  box-shadow: 0 1px 0 #d4d0e6 !important;
  transform: translateY(3px) !important;
  opacity: 1 !important;
  cursor: default !important;
  pointer-events: none;
}

#studyView #nextCardBtn:disabled span,
#studyView #nextCardBtn:disabled i {
  color: #aaa5c2 !important;
}


/* ==========================================================================
   Unified game feedback + flat inactive Next controls
   ========================================================================== */

/* Toasts are flat and always clear the app's bottom navigation/action areas. */
.toast,
.toast[popover] {
  box-shadow: none !important;
  bottom: calc(118px + env(safe-area-inset-bottom)) !important;
  inset-block-end: calc(118px + env(safe-area-inset-bottom)) !important;
}

body.study-mode .toast,
body.match-mode .toast,
body.order-mode .toast,
body.common-tests-mode .toast,
body.needle-match-mode .toast,
body.study-mode .toast[popover],
body.match-mode .toast[popover],
body.order-mode .toast[popover],
body.common-tests-mode .toast[popover],
body.needle-match-mode .toast[popover] {
  bottom: calc(126px + env(safe-area-inset-bottom)) !important;
  inset-block-end: calc(126px + env(safe-area-inset-bottom)) !important;
}

/* Every in-game Next button uses the same completely flat disabled treatment
   as Common Tests' disabled Check Answer button, while remaining depressed. */
#studyView #nextCardBtn:disabled,
#matchView #nextMatchBtn:disabled,
#orderDrawView #nextOrderDrawBtn:disabled,
#commonTestsView #nextCommonTestBtn:disabled,
#needleMatchView #nextNeedleMatchBtn:disabled {
  background: #e8e8ef !important;
  border-color: #e8e8ef !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: 0 !important;
  opacity: 1 !important;
  transform: translateY(3px) !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Common Tests is the canonical feedback appearance. Apply that same flat,
   compact correct/incorrect message treatment to all scored games. */
#matchView .match-complete,
#orderDrawView .order-complete,
#needleMatchView .needle-match-feedback,
#commonTestsView .common-tests-feedback {
  box-sizing: border-box !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 14px !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: clamp(.78rem, 1.3vw, .95rem) !important;
  line-height: 1.25 !important;
  pointer-events: none !important;
  will-change: transform, opacity;
}

#matchView .match-complete strong,
#orderDrawView .order-complete strong,
#needleMatchView .needle-match-feedback strong,
#commonTestsView .common-tests-feedback strong,
#matchView .match-complete span,
#orderDrawView .order-complete span,
#needleMatchView .needle-match-feedback span,
#commonTestsView .common-tests-feedback span {
  display: block !important;
}

/* Unified correct message palette. */
#matchView .match-complete.correct,
#orderDrawView .order-complete:not(.order-incorrect-message),
#needleMatchView .needle-match-feedback.correct,
#commonTestsView .common-tests-feedback.correct {
  background: #ecfbf5 !important;
  color: #107654 !important;
  border: 0 !important;
}

/* Unified incorrect message palette. */
#matchView .match-complete.incorrect,
#orderDrawView .order-complete.order-incorrect-message,
#needleMatchView .needle-match-feedback.order-incorrect-message,
#needleMatchView .needle-match-feedback.incorrect,
#commonTestsView .common-tests-feedback.incorrect {
  background: #fff1f2 !important;
  color: #a8303d !important;
  border: 0 !important;
}

/* Needle Match: incorrect targets may shake/highlight their needle, but the
   target/card background itself remains its normal unscored color. */
#needleMatchView .needle-target.is-incorrect {
  background: var(--surface, #fff) !important;
}

/* Ensure feedback never paints over the live bottom action panels. */
#matchView .match-complete {
  bottom: calc(var(--match-live-footer-height, 88px) + var(--game-area-padding, 16px) + 8px) !important;
}
#orderDrawView .order-complete.order-incorrect-message {
  bottom: calc(var(--order-live-footer-height, 88px) + var(--game-area-padding, 16px) + 8px) !important;
}
#needleMatchView .needle-match-feedback {
  bottom: calc(var(--needle-live-footer-height, var(--needle-footer-slot-height, 88px)) + var(--game-area-padding, 16px) + 8px) !important;
}


/* Final toast/game-control refinements. */

/* Toasts sit well above every game's bottom action region, including Needle Match. */
body.study-mode .toast,
body.match-mode .toast,
body.order-mode .toast,
body.common-tests-mode .toast,
body.needle-match-mode .toast,
body.study-mode .toast[popover],
body.match-mode .toast[popover],
body.order-mode .toast[popover],
body.common-tests-mode .toast[popover],
body.needle-match-mode .toast[popover] {
  bottom: calc(172px + env(safe-area-inset-bottom)) !important;
  inset-block-end: calc(172px + env(safe-area-inset-bottom)) !important;
  box-shadow: none !important;
}

/* Flashcards Next is intentionally special: visually match Previous exactly.
   Do not inherit the shared in-game disabled/depressed Next styling. */
#studyView #nextCardBtn,
#studyView #previousCardBtn {
  color: var(--purple-dark);
  background: #fff;
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 #d1cee8;
  transform: translateY(0);
  opacity: 1;
}

#studyView #nextCardBtn:active:not(:disabled),
#studyView #previousCardBtn:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #d1cee8 !important;
}

/* Override the shared disabled-Next rule for Flashcards only, so Next behaves
   like Previous rather than becoming the game's flat depressed Next state. */
#studyView #nextCardBtn:disabled {
  background: #fff !important;
  border-color: var(--line) !important;
  color: var(--purple-dark) !important;
  box-shadow: 0 3px 0 #d8d5e9 !important;
  transform: translateY(0) !important;
  opacity: .42 !important;
  pointer-events: none !important;
}

#studyView #nextCardBtn:disabled span,
#studyView #nextCardBtn:disabled i {
  color: inherit !important;
}


/* Feedback dismissal is non-interruptible: prevent button presses from
   producing :active visual pops or invoking handlers until the exit ends. */
.view.feedback-dismiss-active button,
.view.feedback-dismiss-active [role="button"] {
  pointer-events: none !important;
}

.view.feedback-dismiss-active button:active,
.view.feedback-dismiss-active [role="button"]:active {
  transform: inherit !important;
}


/* Duplicate options navigation at the bottom of long option lists. */
#optionsStep .home-flow-toolbar-bottom {
  margin-top: 6px;
  margin-bottom: 40px;
}