/* 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;}
/* Required-tense / mood / negation indicator — pinned directly under the prompt on every
   drill page so it's visible without scrolling, especially on mobile. Negation (when it
   applies) is appended into the same badge rather than shown separately. */
.req-tag{
  display:inline-block; margin-top:8px; padding:4px 12px; border-radius:999px;
  background:rgba(108,140,255,.16); color:var(--accent); font-weight:700;
  font-size:.8rem; letter-spacing:.02em;
}
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;}
.log-round-divider{color:var(--muted); font-size:.72rem; text-align:center; text-transform:uppercase; letter-spacing:.04em; padding:8px 0 4px; border-bottom:1px dashed rgba(255,255,255,.12); margin-bottom:2px;}