/* pages/trainer/cards.css — stat tiles, kana grid, flashcard, lists, grammar, plan.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
/* ---- stat tiles ---- */
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tile .n{font-size:26px;font-weight:680;letter-spacing:-.5px;line-height:1.1}
.tile .l{font-size:12px;color:var(--dim);margin-top:3px}

.bar{height:7px;background:var(--panel2);border-radius:99px;overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--good);border-radius:99px}

/* ---- kana grid ---- */
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px}
.kcell{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 4px;text-align:center;cursor:pointer
}
.kcell:hover{border-color:var(--accent)}
.kcell .c{font:400 25px/1.1 var(--jp)}
.kcell .r{font-size:11px;color:var(--dim);margin-top:3px}
.kcell.known{border-color:var(--good)}
.kcell.empty{visibility:hidden}

/* ---- flashcard ---- */
.fc{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:38px 24px;text-align:center;min-height:230px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px
}
.fc .big{font:400 62px/1.15 var(--jp);letter-spacing:2px}
.fc .mid{font:400 30px/1.2 var(--jp);color:var(--ink)}
.fc .read{font:400 20px/1.3 var(--jp);color:var(--accent2)}
.fc .mean{font-size:17px;color:var(--dim)}
.fc .hint{font-size:12px;color:var(--dim)}
.fc input{
  font:400 22px var(--jp);text-align:center;background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:9px 14px;width:220px;outline:none
}
.fc input:focus{border-color:var(--accent)}
.fc.right{border-color:var(--good)}
.fc.wrong{border-color:var(--bad)}

.gradebar{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.gradebar button{flex:1;min-width:92px;max-width:150px}
.gr0{background:var(--bad)!important}
.gr1{background:var(--warn)!important}
.gr2{background:var(--accent2)!important}
.gr3{background:var(--good)!important}

/* ---- lists ---- */
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);
  padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg)
}
table.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl tr:hover td{background:var(--panel)}
.jp{font-family:var(--jp)}
.jpbig{font:400 22px var(--jp)}
.tbl .rd{color:var(--accent2);font-family:var(--jp);font-size:13px}

.srchrow{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.srchrow input,.srchrow select{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px 11px;font-size:13.5px;outline:none
}
.srchrow input{flex:1;min-width:170px}
.srchrow input:focus{border-color:var(--accent)}

/* ---- grammar ---- */
.gitem{background:var(--panel);border:1px solid var(--line);border-radius:11px;margin-bottom:9px;overflow:hidden}
.gitem>summary{padding:12px 15px;cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline}
.gitem>summary::-webkit-details-marker{display:none}
.gitem summary .pat{font:600 16px var(--jp)}
.gitem summary .en{color:var(--dim);font-size:13px;flex:1}
.gitem .body{padding:0 15px 14px;border-top:1px solid var(--line);padding-top:12px}
.ex{background:var(--panel2);border-radius:8px;padding:9px 12px;margin-top:8px}
.ex .j{font:400 17px var(--jp)}
.ex .r{font:400 12.5px var(--jp);color:var(--accent2);margin-top:2px}
.ex .e{font-size:13px;color:var(--dim);margin-top:2px}

/* ---- plan ---- */
.wk{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:9px}
.wk.now{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.wk.past{opacity:.55}
.wk .num{font-size:11px;color:var(--dim);width:78px;flex:none;padding-top:2px}
.wk .num b{display:block;font-size:16px;color:var(--ink)}
.wk .ttl{font-weight:600;margin-bottom:3px}
.wk .det{font-size:13px;color:var(--dim)}
.wk .goals{font-size:12.5px;color:var(--dim);margin-top:6px}
.wk .goals code{background:var(--panel2);padding:1px 6px;border-radius:5px;font-family:var(--jp)}

.note{border-left:3px solid var(--warn);background:var(--panel);padding:11px 14px;border-radius:0 9px 9px 0;margin-bottom:14px;font-size:13.5px}
.note b{color:var(--warn)}

.empty{text-align:center;color:var(--dim);padding:46px 20px}
.empty .big{font-size:40px;margin-bottom:10px}

kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:11px;font-family:inherit;color:var(--dim)}
/* Inside a button the shortcut chip is a TOOLTIP, not label text (#157):
   printed on the face, the bare digit reads as part of the label ("Again 1"
   scores like a difficulty). Hidden at rest, floated above the control on
   hover — and on keyboard focus, because the people the shortcut serves are
   exactly the ones not using the pointer. Touch never sees it at all
   (views.css masks kbd at hover:none). The .keyhint legend keeps its inline
   chips — this styles only kbd inside .btn. */
.btn{position:relative}
.btn kbd{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .12s;
}
.btn:hover kbd,.btn:focus-visible kbd{opacity:1}

@media (max-width:640px){
  main{padding:16px 13px 30px}
  .fc .big{font-size:48px}
  .wk{flex-direction:column;gap:6px}
  .wk .num{width:auto}
}