/* The lesson: the two bars over the top, the card and the word on it, the
   sentence it is used in, the box a tapped word opens, the three answers, and
   the page at the end.  Last in the head, so the wide-window rule at the foot
   of it has the final word about the shape of the page. */
/* The two bars and the round number, over the top of whatever screen she is on. */
.stats{display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:var(--card);border-bottom:1px solid var(--line)}
.stats[hidden]{display:none}
.bar{flex:1;min-width:0}
.bar .t{display:flex;justify-content:space-between;gap:6px;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.bar .t b{color:var(--ink);font-weight:700;text-transform:none;letter-spacing:0}
.track{height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.fill{height:100%;border-radius:4px;background:var(--sun);transition:width .3s}
.mem .fill{background:var(--good)}
.round{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.2;background:var(--solid)}
.round .l{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.round .n{font-size:16px;font-weight:700}

/* The card: a white sheet, nothing behind it to fight the word. */
.card{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  position:relative;padding:34px 18px 20px;text-align:center;
  display:flex;flex-direction:column;gap:14px;
  background:var(--sheet);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 6px 20px rgba(22,70,110,.10)}
/* Centred while it fits, scrolled from its top when it does not. */
.card>*{flex-shrink:0}
.card>#know+*{margin-top:auto}
.card>:last-child{margin-bottom:auto}
/* The eye ("not important") and under it the tick ("I know it"), in the corner. */
#hide,#know{position:absolute;right:4px;z-index:1;padding:6px;border-radius:12px;color:var(--dim)}
#hide{top:4px} #know{top:44px}
#hide svg,#know svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#hide:active,#know:active{background:var(--warm)}
#hide.on{color:var(--pink)}
#know.on{color:var(--good)}
/* Front: the word as it is written in kana, with its kanji small above it. */
.kanji{font-size:min(6.4vw,23px);font-weight:700;color:var(--dim);line-height:1.3;word-break:break-word}
.kana{font-size:min(13vw,46px);font-weight:700;line-height:1.25;word-break:break-word}
.kana.long{font-size:min(8.5vw,32px)}
/* Back: how it is read, then what it means. */
.back{display:flex;flex-direction:column;gap:9px}
.reading{font-size:17px;color:var(--dim);letter-spacing:.02em}
.english{font-size:19px;line-height:1.4;border-top:1px solid var(--line);padding-top:11px}
/* The word in use. Quieter than the meaning: it is there to be read, not tested. */
.ex{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px;
  font-size:16px;line-height:1.5;color:var(--dim)}
/* Each sentence is its own button: a tap says it, and does not turn the card. */
.ex button{font:inherit;color:inherit;background:none;border:0;padding:4px 0;margin:0;
  display:flex;gap:7px;align-items:flex-start;justify-content:flex-start;text-align:left;
  cursor:pointer;width:100%}
.ex button:disabled{cursor:default}
.ex button:focus:not(:focus-visible){outline:none}
.ex .lines{display:flex;flex-direction:column;gap:2px}
/* She reads kana: the kana line under the kanji, a gap between words. */
.ex .yomi{font-size:14px;word-spacing:.4em}
.ex .gloss{display:flex;flex-wrap:wrap;column-gap:12px;font-size:12px;line-height:1.45;opacity:.8}
.ex .gloss i{font-style:normal;opacity:.75}
.ex button:active:not(:disabled){opacity:.55}
.ex svg{flex:none;width:16px;height:16px;margin-top:5px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ex .ic{--s:18px;margin-top:3px}
/* Her other words in the kana line, dotted underneath, in the colour of how
   well she knows them.  Drawn as a border: an underline with a style in it
   showed on the computer and not on her phone. */
.ex .w{font-weight:600;border-bottom:1.5px dotted currentColor;padding-bottom:1px}
.ex .w.know{color:var(--w-know)}
.ex .w.learn{color:var(--w-learn)}
.ex .w.new{color:var(--w-new)}
/* How often she wants the word: small, under everything else on the back. */
.pri{display:flex;justify-content:center;gap:6px}
.pri button{border-image-width:0 15px}
.pri button:active{filter:brightness(.93)}
#pop .pri{margin-top:8px}
#pop .pri button{flex:1;padding:7px 4px}
/* Her thumb is on the word, not up in the header, so the sound is there too. */
#say{align-self:center;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--solid);color:var(--dim)}
#say .ic{--s:26px}
#say svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#say:active{background:var(--warm)}

/* The word she tapped, in a box right above it, over a clear sheet. */
#pop{position:fixed;inset:0;z-index:5}
#pop .box{position:absolute;width:min(280px,calc(100vw - 16px));padding:12px 14px;border-radius:16px;
  border:1px solid var(--line);background:var(--solid);box-shadow:0 10px 30px #0004;line-height:1.4}
#pop .top{display:flex;align-items:center;gap:8px}
#pop .top b{font-size:22px;font-weight:700}
#pop .k{color:var(--dim)}
#pop .say{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--dim)}
#pop .say svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#pop .say .ic{--s:20px}
#pop .e{margin-top:4px}
#pop .m{font-size:12px;color:var(--dim)}
#pop .acts{display:flex;gap:8px;margin-top:10px}
#pop .acts button{flex:1;padding:9px 6px;border-radius:12px;border:1px solid var(--line);
  font-size:13px;font-weight:600}
#pop .acts .on{color:var(--star);border-color:var(--star)}
/* "Which board?" - the same clear sheet, but this one belongs to no word on the
   screen, so it sits in the middle of it. */
#pop.mid{display:grid;place-items:center;padding:16px}
#pop.mid .box{position:static;width:min(340px,100%);max-height:78vh;overflow:auto}
#pop .list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
#pop .list .tile{gap:9px;padding:9px 10px}
#pop .list .ic{--s:40px}

#warn{padding:10px 16px;font-size:13px;line-height:1.4;
  background:#fdecec;color:#8a1c1c;border-bottom:1px solid #f0bcbc}
:root[data-theme="dark"] #warn{background:#3a2222;color:#f0b8b8;border-bottom-color:#5c3333}
#warn[hidden]{display:none}
/* There was a .hidden{display:none} here, used by nothing and reached by
   everything: a word row is given its state as a class, so every hidden word on
   the Hidden board was a row with display:none on it.  The board counted five
   words and drew five rows, and not one of them could be seen. */
.tap{font-size:13px;color:var(--dim)}
.meta{font-size:12px;color:var(--dim)}

/* The answers, and the wave past beside them. */
/* Her round action buttons over the label: the pink X, the green tick, the
   lamp - the same three she drew, one on each answer. */
.row{display:flex;gap:9px}
.row>button{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:10px 6px 11px;border-radius:20px;border:1px solid var(--line);
  background:var(--card);font-size:14px;font-weight:700;box-shadow:var(--shade)}
.row>button:active{transform:translateY(1px)}
.row .ic{--s:36px}
.row .s{display:block;font-size:11px;font-weight:400;color:var(--dim)}
#again{color:var(--again)} #good{color:var(--good)} #easy{color:var(--hard)}
#reveal{border:0;color:#fff;font-size:17px;border-radius:999px;padding:13px 8px;
  background:linear-gradient(180deg,#5ad2c8,#16b0a6);box-shadow:0 6px 18px rgba(22,176,166,.3)}
/* Narrow, and beside the answers: skipping is a wave past, not a fourth answer. */
#skip{flex:0 0 56px;padding:15px 0;color:var(--dim)}
#skip svg{width:20px;height:20px;margin:0 auto;display:block;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.done{text-align:center;padding:30px 18px;color:var(--dim);
  background:var(--sheet);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shade)}
.done h2{color:var(--ink);font-size:22px;margin:0 0 8px}
.done table{margin:4px 0 14px}
.done td:first-child{text-align:left}

label{display:block;margin:12px 0 4px;font-size:13px;color:var(--dim)}
input,select{padding:10px;border-radius:12px;border:1px solid var(--line);
  background:var(--solid);color:var(--ink);font:inherit}
/* Her Secondary Button, painted the same way. */
.wide{width:100%;padding:16px 22px;margin-top:10px;color:#c43d80;font-weight:700;
  border:0 solid transparent;background:none;
  border-image:url(../img/btn-soft.webp) 0 50 fill / 0 25px / 0 stretch}
.wide .ic{--s:24px;margin-right:6px}
.note{font-size:12px;color:var(--dim);margin-top:10px}
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
td{padding:5px 0;border-bottom:1px solid var(--line)}
td:last-child{text-align:right;font-weight:700}

/* It is a phone app.  A wide window is not a phone: the app stays a column of
   phone width, and the room around it is left plain white - her island belongs
   inside the phone, not spread across a monitor. */
@media (min-width:620px){
  html{background:var(--surround)}
  body{max-width:480px;margin:0 auto;box-shadow:0 0 50px rgba(8,40,70,.35);
    border-left:1px solid var(--line);border-right:1px solid var(--line)}
}