/* Typing Hub — fonts, on-screen keyboard, and hub grid.
   Reuses the .tt-* test styles from typing-test.css. */

@font-face {
    font-family: 'KrutiDev010';
    src: url('../fonts/krutidev010.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MangalHE';
    src: url('../fonts/mangal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Apply the correct font to the reference + input for each engine */
.font-krutidev { font-family: 'KrutiDev010', serif !important; }
.font-mangal   { font-family: 'MangalHE', 'Noto Sans Devanagari', sans-serif !important; }

/* ------------------------------------------------------------------ */
/* Hub grid                                                            */
/* ------------------------------------------------------------------ */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 26px;
    margin: 40px 0;
}
.hub-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
    box-shadow: 0 10px 30px rgba(0,0,0,.03);
    position: relative;
    overflow: hidden;
}
.hub-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(99,102,241,.1); }
.hub-card-icon {
    width: 58px; height: 58px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: #fff; margin-bottom: 20px; font-weight: 700;
}
.hub-card-title { font-size: 1.3rem; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.hub-card-desc  { font-size: .95rem; color: #64748b; line-height: 1.65; flex-grow: 1; margin-bottom: 18px; }
.hub-card-exams { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.hub-exam-tag {
    font-size: .72rem; font-weight: 600; color: #475569;
    background: #f1f5f9; border-radius: 20px; padding: 4px 11px;
}
.hub-card-cta { color: #6366f1; font-weight: 600; font-size: .95rem; margin-top: auto; }

[data-theme="dark"] .hub-card { background: #1e1e2f; border-color: #2d2d44; }
[data-theme="dark"] .hub-card-title { color: #f8fafc; }
[data-theme="dark"] .hub-card-desc { color: #94a3b8; }
[data-theme="dark"] .hub-exam-tag { background: #2d2d44; color: #cbd5e1; }

/* ------------------------------------------------------------------ */
/* On-screen keyboard                                                  */
/* ------------------------------------------------------------------ */
.tt-keyboard {
    margin: 24px 0 8px;
    padding: 16px;
    background: #f1f5f9;
    border-radius: 16px;
    user-select: none;
}
[data-theme="dark"] .tt-keyboard { background: #16162a; }
.kb-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
.kb-key {
    position: relative;
    min-width: 42px; height: 46px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 1.05rem;
    color: #1e293b;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2px 6px;
    transition: all .12s ease;
    line-height: 1.1;
}
.kb-key:hover { border-color: #6366f1; background: #eef2ff; }
.kb-key.active { background: #6366f1; color: #fff; transform: translateY(2px); border-color: #6366f1; }
.kb-key.active .kb-shift { color: #e0e7ff; }
.kb-base  { font-size: 1.05rem; }
.kb-shift { font-size: .68rem; color: #94a3b8; margin-bottom: 1px; opacity: .55; }
.tt-keyboard.show-shift .kb-shift { opacity: 1; color: #6366f1; }
.tt-keyboard.show-shift .kb-base { opacity: .45; }
.kb-space { min-width: 260px; font-size: .85rem; color: #64748b; }

[data-theme="dark"] .kb-key { background: #23233a; border-color: #3a3a55; color: #e2e8f0; }
[data-theme="dark"] .kb-key:hover { background: #2d2d4a; border-color: #6366f1; }

.tt-assist-row {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 0; font-size: .9rem; color: #475569;
}
[data-theme="dark"] .tt-assist-row { color: #cbd5e1; }
.tt-assist-row input { width: 18px; height: 18px; accent-color: #6366f1; cursor: pointer; }

.kb-hint {
    font-size: .82rem; color: #94a3b8; text-align: center; margin-top: 6px;
}

@media (max-width: 640px) {
    .kb-key { min-width: 30px; height: 40px; font-size: .9rem; }
    .kb-base { font-size: .9rem; }
    .kb-space { min-width: 150px; }
}