/* Shared depth and interaction language for the five main screens.
   Page styles own layout and accent; these opt-in classes own the surfaces. */
:root {
  --ek-control-radius: 0.75rem;
  --ek-tile-radius: 1.1rem;
  --ek-control-depth: 3px;
  --ek-tile-depth: 4px;
  --ek-edge: #dcdfd2;
  --ek-inset: #f7f6ee;
  --ek-press-duration: 120ms;
}

.app-shell .ek-button {
  --control-edge: var(--ek-edge);
  --control-depth: var(--ek-control-depth);
  min-height: 2.75rem;
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-control-radius);
  box-shadow: 0 var(--control-depth) 0 var(--control-edge), inset 0 1px 0 #ffffff30;
  transform: translateY(0);
  transition: transform var(--ek-press-duration) ease, box-shadow var(--ek-press-duration) ease, background-color 150ms ease, border-color 150ms ease;
  touch-action: manipulation;
}
.app-shell .ek-button--primary {
  --control-edge: var(--page-accent-dark);
  background: var(--page-accent);
  border-color: var(--page-accent);
  color: #fff;
}
.app-shell .ek-button--soft {
  --control-edge: color-mix(in srgb, var(--page-accent) 30%, var(--ek-surface));
  background: var(--page-accent-soft);
  border-color: color-mix(in srgb, var(--page-accent) 25%, var(--ek-surface));
  color: var(--page-accent-dark);
}
.app-shell .ek-button--neutral { background: var(--ek-surface); }
.app-shell .ek-button--inverse { --control-edge: var(--page-accent-dark); background: var(--ek-surface); color: var(--ek-ink); }
.app-shell .ek-button--on-accent {
  --control-edge: color-mix(in srgb, var(--page-accent-dark) 85%, #111827);
  background: var(--page-accent-dark);
  border-color: color-mix(in srgb, var(--page-accent) 65%, white);
  color: #fff;
}
.app-shell .ek-button--danger { --control-edge: #edc6cd; border-color: #edc6cd; color: var(--ek-red-dark); }
.app-shell .ek-button--danger-fill { --control-edge: var(--ek-red-dark); background: var(--ek-red); border-color: var(--ek-red); color: white; }
.app-shell .ek-button--row { --control-depth: 2px; }
.app-shell .ek-button--tile { border-radius: var(--ek-tile-radius); --control-depth: var(--ek-tile-depth); }
.app-shell .ek-button.is-incorrect { --control-edge: #edc6cd; }
.app-shell .ek-button[aria-pressed='true'] {
  --control-edge: var(--page-accent);
  border-color: var(--page-accent);
  background: var(--page-accent-soft);
  color: var(--page-accent-dark);
}
@media (hover: hover) {
  .app-shell .ek-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 calc(var(--control-depth) + 1px) 0 var(--control-edge), inset 0 1px 0 #ffffff45;
  }
  .app-shell .ek-button--primary:hover:not(:disabled) { background: var(--page-accent-dark); }
}
.app-shell .ek-button:active:not(:disabled) { transform: translateY(var(--control-depth)); box-shadow: 0 0 0 var(--control-edge), inset 0 1px 2px #11182718; }
.app-shell .ek-button:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 4px; }
.app-shell .ek-button:disabled { transform: none; box-shadow: none; cursor: default; opacity: 0.5; }
.app-shell .ek-button--primary:disabled { background: var(--ek-inset); border-color: var(--ek-border); color: var(--ek-muted); }

.app-shell .ek-tile {
  --tile-edge: var(--ek-edge);
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-tile-radius);
  background: var(--ek-surface);
  box-shadow: 0 var(--ek-tile-depth) 0 var(--tile-edge), inset 0 1px 0 #ffffff40;
}
.app-shell .ek-tile--accent { --tile-edge: color-mix(in srgb, var(--page-paint) 45%, white); background: var(--page-accent-soft); border-color: color-mix(in srgb, var(--page-paint) 35%, white); color: var(--page-accent-dark); }
.app-shell .ek-tile--subtle { --ek-tile-depth: 2px; }
.app-shell .ek-inset { border: 1px solid var(--ek-border); border-radius: var(--ek-control-radius); background: var(--ek-inset); box-shadow: inset 0 2px 0 #11182708; }
.app-shell .ek-mark { border-radius: 0.65rem; box-shadow: 0 2px 0 color-mix(in srgb, var(--page-accent) 22%, var(--ek-surface)); }
.app-shell .ek-dialog { border-radius: var(--ek-tile-radius); border-color: var(--ek-border); background: var(--ek-surface); box-shadow: 0 6px 0 #11182718, 0 20px 60px #11182730; }
.app-shell .ek-dialog::backdrop { background: #172b3b77; }

/* Retain semantic feedback and the compact density of the learning path. */
.app-shell .course-lesson.is-current .ek-button { --control-edge: color-mix(in srgb, var(--page-accent) 30%, var(--ek-surface)); }
.app-shell .course-lesson.is-locked .ek-button { opacity: 1; background: transparent; border-color: transparent; }
.app-shell .course-lesson.is-current .ek-mark { box-shadow: 0 2px 0 var(--page-accent-dark); }
.app-shell .daily-token--answer { --control-depth: 2px; }
.app-shell .daily-answer.ek-inset { border-style: dashed; }
.app-shell .profile-setting-toggle.is-on { background: var(--page-accent-soft); }
.app-shell .pf-row .sound-toggle { min-width: 4.5rem; }
.app-shell .learning-progress.ek-tile { margin-bottom: 1.5rem; }

/* Only the sheets that slide up to meet the bottom edge square off down there.
   This used to apply to every dialog, which cut the bottom off the ones that
   float in the middle of the screen, like the streak details. Their own page
   styles cannot do it: a bare class loses to `.app-shell .ek-dialog` above. */
@media (max-width: 540px) {
  .app-shell .tk-dialog,
  .app-shell .daily-dialog,
  .app-shell .course-unit-picker {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell .ek-button { transition: none; }
  .app-shell .ek-button:hover:not(:disabled), .app-shell .ek-button:active:not(:disabled) { transform: none; }
}