/* shared/styles.css
   Common card / button / table / accent-sidebar CSS used by every drill page.
   Page-specific layout rules (.layout, .wrap, prompt variants, tab styles, etc.)
   stay in each page's own <style> block, loaded AFTER this file so they can
   override or extend it. */

:root{
  --bg:#1b1f2a; --card:#252b3a; --accent:#6c8cff; --accent2:#3ecf8e;
  --text:#eef1f8; --muted:#9aa3b8; --bad:#ff6b6b; --good:#3ecf8e;
}
.back-link{display:inline-block; color:var(--muted); font-size:.85rem; text-decoration:none; margin-bottom:16px;}
.back-link:hover{color:var(--text); text-decoration:underline;}
.site-footer{text-align:center; margin-top:32px; padding:20px 16px 0; border-top:1px solid rgba(255,255,255,.08); color:var(--muted); font-size:.85rem;}
.site-footer a{color:var(--muted); text-decoration:underline;}
.site-footer a:hover{color:var(--text);}
*{box-sizing:border-box;}
body{
  margin:0; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at top, #232a3d, #14171f 70%);
  color:var(--text); min-height:100vh; padding:32px 16px;
}
.sidebar{width:280px; flex-shrink:0;}
.sidebar .card{position:sticky; top:24px;}
.sidebar h2{font-size:1rem; margin:0 0 10px; text-align:center;}
.sidebar table{width:100%; border-collapse:collapse; font-size:.82rem;}
.sidebar th, .sidebar td{padding:6px 6px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar th{color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em;}
.sidebar td.char-cell{font-weight:700; font-size:1rem; text-align:center; width:36px;}
.sidebar .note{color:var(--muted); font-size:.75rem; margin-top:10px; line-height:1.4;}
h1{font-size:1.6rem; margin:0 0 4px; text-align:center;}
.card{background:var(--card); border-radius:16px; padding:24px; box-shadow:0 8px 30px rgba(0,0,0,.35); margin-bottom:20px;}
.stats{display:flex; justify-content:space-between; font-size:.9rem; color:var(--muted); margin-bottom:16px;}
.stats b{color:var(--text); font-size:1.1rem; display:block;}
.timer{font-variant-numeric: tabular-nums; font-size:1.1rem; color:var(--accent);}
.prompt{text-align:center; margin:8px 0 20px;}
.prompt .hint{color:var(--muted); font-size:.85rem; margin-top:4px;}
form{display:flex; gap:10px;}
input[type=text]{
  flex:1; padding:14px 16px; border-radius:10px; border:2px solid #3a4160;
  background:#1c2131; color:var(--text); font-size:1.05rem; outline:none;
}
input[type=text]:focus{border-color:var(--accent);}
button{
  padding:14px 22px; border:none; border-radius:10px; background:var(--accent);
  color:#0c1a12; font-weight:700; font-size:1rem; cursor:pointer;
}
button:hover{filter:brightness(1.08);}
button.secondary{background:#333c52; color:var(--text);}
.feedback{margin-top:12px; font-size:.95rem; min-height:1.3em; text-align:center;}
.feedback.good{color:var(--good);}
.feedback.bad{color:var(--bad);}
table{width:100%; border-collapse:collapse; font-size:.95rem;}
th,td{padding:8px 10px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08);}
th{color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em;}
.empty{color:var(--muted); text-align:center; padding:16px 0;}
.skip-link{background:none; color:var(--muted); text-decoration:underline; padding:4px; font-size:.85rem;}
.log{max-height:260px; overflow-y:auto; margin-top:4px;}
.log-row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:7px 4px; border-bottom:1px solid rgba(255,255,255,.06); font-size:.88rem;}
.log-row .l-left{display:flex; flex-direction:column; gap:2px;}
.log-row .l-verb{color:var(--text); font-weight:600;}
.log-row .l-def{color:var(--muted); font-size:.78rem; font-style:italic;}
.log-row .l-answer{font-weight:600; text-align:right; white-space:nowrap;}
.log-row.correct .l-answer{color:var(--good);}
.log-row.wrong .l-answer{color:var(--bad);}
.log-empty{color:var(--muted); font-size:.85rem; text-align:center; padding:10px 0;}