/* Review screen. Phone-first: a single column sized to the viewport, and every
   control is a touch target before it is a keyboard one.

   Design tokens, the reset and the tab bar come from shell.css, which this is
   loaded after. They used to be copied in here and had already drifted from
   the map's copy. */
#app{
  display:flex; flex-direction:column; margin:0 auto; max-width:640px;
  /* The nav bar is part of the page, so the card column is the viewport minus
     it — at the top on desktop, at the bottom on a phone. Getting this wrong
     pushes the grade buttons under the tab bar, where they cannot be pressed. */
  height:calc(100dvh - var(--top-h));
}
@media (max-width:760px){
  #app{height:calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom))}
}
body{overscroll-behavior:none; padding-top:env(safe-area-inset-top)}

/* ---- header ------------------------------------------------------------- */
header{
  display:flex; align-items:center; gap:14px; flex:none;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
header .counts{display:flex; gap:14px; font-size:13px; font-variant-numeric:tabular-nums}
header .counts b{font-weight:600}
.k-due b{color:var(--easy)} .k-new b{color:var(--good)} .k-done b{color:var(--muted)}
header .sp{flex:1}
a.plain,button.plain{
  background:none; border:1px solid var(--line); border-radius:8px;
  color:var(--ink-2); font:inherit; font-size:13px; padding:6px 10px;
  text-decoration:none; cursor:pointer; min-height:34px;
}
a.plain:hover,button.plain:hover{background:var(--surface-2)}

/* ---- card --------------------------------------------------------------- */
main{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:20px 16px; gap:18px; min-height:0; overflow-y:auto;
}
.word{
  font:600 clamp(34px, 11vw, 56px)/1.15 "IBM Plex Sans", system-ui, sans-serif;
  text-align:center; word-break:break-word; letter-spacing:-0.01em;
}
/* The prompt word is a link to its word page, but must not READ as one: a
   blue underlined answer-side word would look like part of the card. */
.word a.wlink{color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent}
.word a.wlink:hover{text-decoration:underline; text-decoration-color:var(--line);
                    text-underline-offset:6px}
.sub{text-align:center; color:var(--faint); font-size:13px; margin-top:8px}
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line-2);
  color:var(--muted); font-size:12px; margin:0 3px;
}
.badge.warn{color:var(--hard); border-color:var(--hard)}
.answer{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; box-shadow:var(--shadow);
}
.gloss{font-size:clamp(19px,5.5vw,24px); font-weight:500; line-height:1.35}
.gloss .sep{color:var(--faint); font-weight:400; padding:0 7px}
.gloss-en{margin-top:4px; font-size:15px; line-height:1.4; color:var(--muted)}
.word .art{color:var(--faint); font-weight:400}
.senses{margin:12px 0 0; padding:0 0 0 18px; color:var(--ink-2); font-size:14.5px}
.senses li{margin:5px 0}

/* ---- usage example -------------------------------------------------------- */
/* One real sentence, with its translation under it. Quieter than the gloss:
   it is evidence for the answer, not the answer. */
.eg{
  margin:16px 0 0; padding:11px 13px; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--line-2);
}
.eg .fi{margin:0; font-size:15.5px; line-height:1.45; color:var(--ink)}
/* The target word, in whatever form the sentence actually used it. */
.eg .fi b{font-weight:600; color:var(--good); font-style:normal}
.eg .en{margin:5px 0 0; font-size:13px; line-height:1.4; color:var(--muted)}
.tapme{
  text-align:center; color:var(--faint); font-size:13.5px;
  border:1px dashed var(--line); border-radius:12px; padding:14px; cursor:pointer;
}

/* ---- grades ------------------------------------------------------------- */
footer{flex:none; padding:12px 16px 16px; border-top:1px solid var(--line)}
/* The set is 2, 3 or 4 buttons wide depending on the mode and the settings, so
   the column count is set by the screen (`--cols`) rather than fixed here.
   auto-fit is not good enough: at 375px it packs four buttons as 3 + 1, which
   puts Easy directly under Again and makes the odd one out look like the
   important one. Four wraps to a 2x2 block instead. */
.grades{display:grid; grid-template-columns:repeat(var(--cols,2),1fr); gap:10px}
@media (max-width:480px){
  .grades{grid-template-columns:repeat(var(--cols-narrow,var(--cols,2)),1fr)}
}
.grades button{
  font:inherit; cursor:pointer; border-radius:12px; padding:12px 4px 10px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-height:62px;                      /* comfortably above the 44px iOS target */
  -webkit-tap-highlight-color:transparent;
}
.grades button:active{transform:translateY(1px)}
.grades button .g{font-weight:600; font-size:14.5px}
.grades button .i{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
/* Coloured by TONE, not by grade. The same colour has to mean "this went
   badly" whether the button under it writes grade 1, or writes nothing at all
   and schedules the word three weeks out -- and in binary practice the button
   labelled Hard writes grade 1 while in four-button practice it writes 2. Tone
   is the only thing that is stable across all six sets. */
.grades button[data-tone="bad"]{border-color:var(--again)}
.grades button[data-tone="bad"] .g{color:var(--again)}
.grades button[data-tone="mid"]{border-color:var(--hard)}
.grades button[data-tone="mid"] .g{color:var(--hard)}
.grades button[data-tone="good"]{border-color:var(--good)}
.grades button[data-tone="good"] .g{color:var(--good)}
/* The sub-label under a sorting button says where the word goes, not when it
   is next due, so it needs room for a phrase rather than "1.0 d". */
.grades button .i{text-align:center; line-height:1.25}
.reveal{
  width:100%; font:600 16px/1 inherit; cursor:pointer; min-height:62px;
  border-radius:12px; border:1px solid var(--focus);
  background:var(--focus); color:#fff;
}
.hint{text-align:center; color:var(--faint); font-size:11.5px; margin-top:9px}
@media (pointer:coarse){ .hint{display:none} }   /* no keyboard to hint at */

/* ---- empty / settings --------------------------------------------------- */
.done{text-align:center; padding:24px 8px}
.done h2{font-size:22px; margin:0 0 8px}
.done p{color:var(--muted); margin:6px 0}
.settings{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; color:var(--muted); font-size:13.5px; margin-top:18px;
}
.settings input{
  width:64px; font:inherit; padding:5px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
/* ---- the mode picker ------------------------------------------------------ */
.modes{display:flex; flex-direction:column; gap:12px; max-width:420px;
       margin:18px auto 0; text-align:left}
.mode{
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  padding:14px 16px; display:flex; flex-direction:column; gap:7px;
}
.mode .mhead{display:flex; align-items:baseline; gap:10px}
.mode .mhead b{font-size:16px; font-weight:600; letter-spacing:-.01em}
/* How many the mode could actually offer right now. A mode that would open on
   an empty queue should say so before it is tapped, not after. */
.mode .avail{margin-left:auto; font-size:12px; color:var(--faint);
             font-variant-numeric:tabular-nums; white-space:nowrap}
.mode .blurb{margin:0; color:var(--muted); font-size:13px; line-height:1.45}
.mode .mgo{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
           color:var(--muted); font-size:13.5px; margin-top:2px}
.mode .mgo input{
  width:66px; font:inherit; padding:6px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
}
.mode .go{
  margin-left:auto; font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  border:1px solid var(--focus); background:var(--focus); color:#fff;
  border-radius:10px; padding:9px 20px; min-height:44px;
}
.mode .go:disabled{background:var(--surface-2); border-color:var(--line);
                   color:var(--faint); cursor:not-allowed}
.mode.empty{opacity:.62}
/* Between rounds there are two equal choices, so neither takes the margin-left
   that makes a single Start button sit right. */
#roundBox .mgo{justify-content:flex-start}
#roundBox .go{margin-left:0; flex:1}
#roundBox .go#againHard{background:var(--surface); color:var(--again);
                        border-color:var(--again)}
@media (max-width:420px){ .mode .go{width:100%; margin-left:0} }

.err{
  margin:16px; padding:12px 14px; border-radius:10px; font-size:14px;
  border:1px solid var(--again); color:var(--again); background:var(--surface);
}

/* ---- the end-of-session screen ------------------------------------------- */
/* "Session complete." on its own told you nothing: not what you did, not what
   tomorrow costs. These two blocks answer both, and they sit inside the
   existing #empty panel so nothing new appears mid-session. */
.k-learn{color:var(--k-learning)}

.summary{margin:18px auto 0; max-width:420px; text-align:left}
.srow{display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap}
.srow div{display:flex; flex-direction:column; align-items:flex-start; gap:1px}
.srow b{font-size:19px; font-weight:600; letter-spacing:-.01em}
.srow u{font-size:9.5px; text-transform:uppercase; letter-spacing:.09em;
        color:var(--faint); text-decoration:none; font-weight:500}

/* One bar, four segments, in grade order. The SHAPE is the message: a wall of
   red is a session that needs fewer new words per day, not more effort. */
.sbar{display:flex; height:8px; margin:12px 0 8px; border-radius:999px; overflow:hidden;
      background:var(--surface-2)}
.sbar .seg{font-size:0; min-width:3px}
.sbar .again{background:var(--again)}
.sbar .hard{background:var(--hard)}
.sbar .good{background:var(--good)}
.sbar .easy{background:var(--easy)}
.snote{margin:0; color:var(--muted); font-size:12.5px; line-height:1.45}

.forecast{margin:20px auto 0; max-width:420px; text-align:left}
.forecast .lbl{font-size:9.5px; text-transform:uppercase; letter-spacing:.09em;
               color:var(--faint); font-weight:500; margin-bottom:8px}
.fbars{display:flex; gap:6px; align-items:flex-end}
.fbar{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
      justify-content:flex-end; min-height:74px}
.fbar b{font-size:11px; font-weight:600; color:var(--ink-2); min-height:14px}
.fbar i{display:block; width:100%; background:var(--focus); border-radius:3px 3px 0 0}
/* Already overdue is not a future day, so it is coloured as a backlog. */
.fbar.over i{background:var(--again)}
.fbar u{font-size:9.5px; color:var(--faint); text-decoration:none; white-space:nowrap}