/* The app's own styles sit in a cascade layer, so the card editor's scoped
   card styles (unlayered) always win over them inside a card. See editor.js. */
@layer app {
/*
 * Studying: the shell falls away and one card sits in the dark, with the
 * answers at the thumb.
 */

.study {
  position: relative; min-height: 100dvh;
  display: grid; grid-template-rows: auto auto 1fr auto;
}
.study__loading { min-height: 100dvh; display: grid; place-items: center; }

.study__bar {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px;
  padding: 12px max(16px, env(safe-area-inset-left)) 10px;
  max-width: 1100px; width: 100%; margin: 0 auto;
}
.study__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.study__deck { font: 600 15px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study__counts { display: flex; gap: 14px; font: 650 15px/1 var(--font); font-variant-numeric: tabular-nums; }
.study__counts span { position: relative; }
.study__counts small { margin-left: 4px; font: 500 12.5px/1 var(--font); color: var(--text-muted); }
.study__counts .n { color: var(--c-new); }
.study__counts .l { color: var(--c-learn); }
.study__counts .r { color: var(--c-review); }
/* The card in hand's pile in full color; the others recede. */
.study__counts span:not(.is-current) { opacity: 0.55; }
.study__state:empty { display: none; }
.study__tools { display: flex; align-items: center; gap: 4px; }
.study__timer { font: 600 13px/1 var(--font); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.study__progress { max-width: 1100px; width: calc(100% - 32px); margin: 0 auto; }

.study__stage { display: grid; place-items: center; padding: 16px 16px 20px; min-height: 0; }
/* The card and its answers move as one block, centered together. */
.study__column { width: min(720px, 100%); display: grid; gap: 18px; }

.scard {
  position: relative; width: 100%;
  display: flex; flex-direction: column;
  /* One fixed height for question and answer, so turning the card never
     moves anything: as tall as the window allows (bar, progress and answers
     take the rest), never taller than reads comfortably. Long content
     scrolls inside the face. */
  height: clamp(300px, calc(100dvh - 230px), 600px);
  will-change: transform;
  border-radius: 20px; overflow: hidden;
  background: var(--card-ground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: default;
  transform-origin: 50% 50%;
}
.scard.is-revealed .scard__face { animation: fade-in 0.3s var(--ease); }

.scard__band { position: relative; height: 40px; flex: none; overflow: hidden; --wave-size: 30px 15px; }
.scard__emblem { position: absolute; left: 20px; bottom: 9px; font: 600 20px/1 var(--font); color: rgba(255, 255, 255, 0.92); }
.scard__emblem.is-cjk { font: 700 20px/1 var(--font-mincho); }
.scard__meta { position: absolute; top: 52px; left: 18px; right: 18px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.scard__deck { font: var(--type-caption); color: var(--text-muted); }
.scard__face {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 46px clamp(18px, 4vw, 48px) 36px; display: grid;
  /* Centered while it fits; once it doesn't, it scrolls from the top, so the beginning is never out of reach. */
  align-content: safe center;
  /* The card's content (and its deck's styling) is painted inside the face
     only: it can't cover the band, the labels or the typed-answer box. */
  position: relative; isolation: isolate; contain: paint;
}
.scard__type { flex: none; padding: 0 clamp(18px, 4vw, 48px) 28px; }
.scard__type .input { text-align: center; font-size: 18px; }
.scard:not(.is-revealed) .scard__face { cursor: pointer; }

.study__dock { display: grid; justify-items: center; min-height: 72px; }
.scard:focus { outline: none; }

.study__reveal { min-width: min(340px, 100%); }
.study__reveal kbd { margin-left: 4px; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); color: inherit; }

.rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.rates--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(480px, 100%); }
/* The four answers: one neutral surface each; the meaning is carried by a
   thin line of its color along the top and the interval in that color. */
.rate {
  --c: var(--good);
  position: relative; overflow: hidden;
  display: grid; justify-items: center; align-content: center; gap: 4px;
  height: 72px; padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: background-color var(--quick), border-color var(--quick), transform 0.12s var(--ease);
}
.rate::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c); }
.rate:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.rate:active { transform: translateY(1px); }
.rate--again { --c: var(--again); }
.rate--hard { --c: var(--hard); }
.rate--good { --c: var(--good); }
.rate--easy { --c: var(--easy); }
.rate__ivl { font: 600 12.5px/1 var(--font); color: var(--c); font-variant-numeric: tabular-nums; }
.rate__label { font: 600 15px/1.1 var(--font); }
.rate__hint { font: 500 11.5px/1.2 var(--font); color: var(--text-muted); }
.rate kbd { position: absolute; top: 8px; right: 14px; height: 18px; min-width: 18px; font-size: 10.5px; padding: 0 4px; opacity: 0.75; }
@media (hover: none) { .rate kbd, .study__reveal kbd { display: none; } }
@media (max-width: 560px) {
  .rates { gap: 8px; }
  .rate { height: auto; min-height: 60px; }
  .rate__label { font-size: 14px; }
  .rate__ivl { font-size: 12px; }
  /* The frame ends 16px above the dock (its real height, safe area included) and never moves; it gives way on short screens rather than pushing the dock off. */
  .scard { height: max(220px, calc(100dvh - 170px - max(12px, env(safe-area-inset-bottom)))); }
  .rate__hint { display: none; }
  /* Show answer takes the ratings' height, so the dock is the same size before and after. */
  .study__reveal { width: 100%; height: 60px; }
  .study__bar { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; }
  .study__title { min-width: 0; }
  .study__title .chip { height: 20px; padding: 0 7px; font-size: 10.5px; }
  .study__deck { font-size: 13px; max-width: 30vw; }
  .study__stage { padding-bottom: calc(96px + env(safe-area-inset-bottom)); align-items: start; }
  .study__dock { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 12px max(12px, env(safe-area-inset-bottom)); background: var(--bg); z-index: 5; }
  .study__counts { justify-content: center; }
  .scard__face { padding-top: 44px; }
}

.study-wait { display: grid; justify-items: center; text-align: center; gap: 12px; max-width: 460px; padding: 40px 16px; }
.study-wait__mark { color: var(--text-faint); }
.study-wait__mark .icon { width: 40px; height: 40px; }
.study-wait__title { font: var(--type-heading); font-size: 20px; }
.study-wait__title b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* No keyboard on a touch screen: no keyboard hints. */
@media (hover: none) and (pointer: coarse) {
  .rate kbd, .study__reveal kbd, .editor-actions .hint, .dialog__foot kbd { display: none; }
}
}