/* ═══════════════════════════════════════════════
   shared.css — MD3 Design System
   Подключается на всех страницах сайта
═══════════════════════════════════════════════ */

/* ── Google Fonts (импортируй в HTML или здесь) ── */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&family=Google+Sans+Display:wght@400&family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0');

/* ── Tokens: Light ── */
:root {
    --bg:           #FFFBFE;
    --surface:      #FFFBFE;
    --on-surface:   #1C1B1F;
    --surf-var:     #E7E0EC;
    --on-surf-var:  #49454F;
    --shadow:       rgba(0,0,0,0.13);
    --shadow-md:    rgba(0,0,0,0.20);
    --tint:         rgba(103,80,164,0.05);
    --primary:      #6750A4;
    --on-primary:   #FFFFFF;
    --pri-con:      #EADDFF;
    --on-pri-con:   #21005D;
    --outline:      #79747E;
    --outline-var:  #CAC4D0;
    --err-con:      #F9DEDC;
    --on-err-con:   #410E0B;
    /* deadline stripe colours (используются в index.php) */
    --dl-ok-bg:     #D6F5E3; --dl-ok-on:   #0D3D22; --dl-ok-stripe:   #34A85A;
    --dl-warn-bg:   #FFF0CC; --dl-warn-on: #5C3A00; --dl-warn-stripe: #F0A500;
    --dl-past-bg:   #F9DEDC; --dl-past-on: #410E0B; --dl-past-stripe: #C0392B;
    /* moodle */
    --moodle-bg:    #C7EDD4;
    --moodle-on:    #1A3D2B;
}

/* ── Tokens: Dark ── */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:           #1C1B1F;
        --surface:      #1C1B1F;
        --on-surface:   #E6E1E5;
        --surf-var:     #49454F;
        --on-surf-var:  #CAC4D0;
        --shadow:       rgba(0,0,0,0.38);
        --shadow-md:    rgba(0,0,0,0.55);
        --tint:         rgba(208,188,255,0.05);
        --primary:      #D0BCFF;
        --on-primary:   #381E72;
        --pri-con:      #4F378B;
        --on-pri-con:   #EADDFF;
        --outline:      #938F99;
        --outline-var:  #49454F;
        --err-con:      #8C1D18;
        --on-err-con:   #F9DEDC;
        --dl-ok-bg:     #0D3D22; --dl-ok-on:   #A8E6BF; --dl-ok-stripe:   #4CAF72;
        --dl-warn-bg:   #3D2800; --dl-warn-on: #FFD680; --dl-warn-stripe: #D4900A;
        --dl-past-bg:   #5C1A17; --dl-past-on: #FFCDD2; --dl-past-stripe: #E53935;
        --moodle-bg:    #2D6A4F;
        --moodle-on:    #D8F3DC;
    }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Roboto', sans-serif;
    background: var(--bg);
    color: var(--on-surface);
    min-height: 100vh;
    padding-bottom: 56px;
}

/* ══════════════════════════════════════════════
   APP BAR
══════════════════════════════════════════════ */
.app-bar {
    position: sticky; top: 0; z-index: 10;
    height: 64px;
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    background-image: linear-gradient(var(--tint), var(--tint));
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 1px 2px var(--shadow), 0 2px 6px var(--shadow);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px 0 8px;
    gap: 4px;
}

.app-bar-title {
    font-family: 'Google Sans Display', sans-serif;
    font-size: 22px; font-weight: 400;
    color: var(--on-surface);
    flex: 1;
}

/* Icon button (назад, уведомления, etc.) */
.icon-btn {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: 50%; border: none; background: transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--on-surf-var);
    text-decoration: none;
    position: relative;
    transition: color .2s;
}
.icon-btn::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: currentColor; opacity: 0; transition: opacity .2s;
}
.icon-btn:hover::before  { opacity: .08; }
.icon-btn:active::before { opacity: .14; }
.icon-btn .material-symbols-rounded {
    font-size: 24px; line-height: 1;
    position: relative; z-index: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ══════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════ */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 20px 0;
    display: flex; flex-direction: column; gap: 16px;
}

@media (max-width: 420px) {
    .container { padding: 20px 12px 0; gap: 12px; }
}

/* ══════════════════════════════════════════════
   CARD
══════════════════════════════════════════════ */
.card {
    background: var(--surface);
    background-image: linear-gradient(var(--tint), var(--tint));
    border-radius: 20px;
    box-shadow: 0 1px 3px var(--shadow), 0 2px 6px var(--shadow);
    padding: 24px 24px 24px 28px;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 14px;
    transition: box-shadow .2s, transform .2s;
    animation: fadeUp .35s cubic-bezier(.2,0,0,1) both;
}
.card:hover {
    box-shadow: 0 2px 4px var(--shadow-md), 0 4px 12px var(--shadow-md);
    transform: translateY(-2px);
}

/* Accent stripe — цвет задаётся через --card-stripe */
.card::before {
    content: ''; position: absolute;
    left: 0; top: 0; bottom: 0; width: 4px;
    border-radius: 20px 0 0 20px;
    background: var(--card-stripe, var(--primary));
    transition: background .3s;
}

/* Stagger (до 20 карточек) */
.card:nth-child(1)  { animation-delay:   0ms; }
.card:nth-child(2)  { animation-delay:  45ms; }
.card:nth-child(3)  { animation-delay:  90ms; }
.card:nth-child(4)  { animation-delay: 135ms; }
.card:nth-child(5)  { animation-delay: 180ms; }
.card:nth-child(6)  { animation-delay: 225ms; }
.card:nth-child(7)  { animation-delay: 270ms; }
.card:nth-child(8)  { animation-delay: 315ms; }
.card:nth-child(9)  { animation-delay: 360ms; }
.card:nth-child(10) { animation-delay: 405ms; }
.card:nth-child(11) { animation-delay: 450ms; }
.card:nth-child(12) { animation-delay: 495ms; }
.card:nth-child(13) { animation-delay: 540ms; }
.card:nth-child(14) { animation-delay: 585ms; }
.card:nth-child(15) { animation-delay: 630ms; }
.card:nth-child(16) { animation-delay: 675ms; }
.card:nth-child(17) { animation-delay: 720ms; }
.card:nth-child(18) { animation-delay: 765ms; }
.card:nth-child(19) { animation-delay: 810ms; }
.card:nth-child(20) { animation-delay: 855ms; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card title (крупный заголовок внутри карточки) */
.card-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 17px; font-weight: 500;
    line-height: 1.4;
    color: var(--on-surface);
}

/* Card body text */
.card-body {
    font-size: 14px; line-height: 1.6;
    color: var(--on-surf-var);
}

/* ══════════════════════════════════════════════
   BADGE (номер вопроса/задачи)
══════════════════════════════════════════════ */
.badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 8px;
    background: var(--pri-con);
    color: var(--on-pri-con);
    font-family: 'Google Sans', sans-serif;
    font-size: 12px; font-weight: 500;
    width: fit-content;
}

/* ══════════════════════════════════════════════
   ANSWER BOX (статичный ответ)
══════════════════════════════════════════════ */
.answer-box {
    padding: 12px 16px;
    background: var(--surf-var);
    border-radius: 12px;
    border-left: 3px solid var(--primary);
    display: flex; flex-direction: column; gap: 4px;
}

.answer-label {
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .6px;
    color: var(--primary);
}

.answer-value {
    font-family: 'Google Sans', sans-serif;
    font-size: 16px; font-weight: 500;
    color: var(--on-surface);
    line-height: 1.5;
}

/* ══════════════════════════════════════════════
   MD3 TEXT FIELD
══════════════════════════════════════════════ */
.field {
    display: flex; flex-direction: column; gap: 6px;
}

.field label {
    font-size: 13px; font-weight: 500;
    color: var(--on-surf-var);
}

.field input {
    height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--outline-var);
    background: var(--bg);
    color: var(--on-surface);
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}

.field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.field input::placeholder { color: var(--outline); }

/* ══════════════════════════════════════════════
   MD3 BUTTONS
══════════════════════════════════════════════ */

/* Filled (primary action) */
.btn-filled {
    height: 44px;
    padding: 0 24px;
    border-radius: 100px;
    border: none;
    background: var(--primary);
    color: var(--on-primary);
    font-family: 'Google Sans', sans-serif;
    font-size: 15px; font-weight: 500; letter-spacing: .1px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; text-decoration: none;
    position: relative; overflow: hidden;
    transition: box-shadow .2s;
    width: 100%;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn-filled::after {
    content: ''; position: absolute; inset: 0;
    background: currentColor; opacity: 0; transition: opacity .15s;
}
.btn-filled:hover { box-shadow: 0 2px 6px var(--shadow-md); }
.btn-filled:hover::after  { opacity: .08; }
.btn-filled:active::after { opacity: .14; }

/* Tonal */
.btn-tonal {
    height: 44px;
    padding: 0 24px;
    border-radius: 100px;
    border: none;
    background: var(--pri-con);
    color: var(--on-pri-con);
    font-family: 'Google Sans', sans-serif;
    font-size: 15px; font-weight: 500; letter-spacing: .1px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; text-decoration: none;
    position: relative; overflow: hidden;
    transition: box-shadow .2s;
    width: 100%;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn-tonal::after {
    content: ''; position: absolute; inset: 0;
    background: currentColor; opacity: 0; transition: opacity .15s;
}
.btn-tonal:hover { box-shadow: 0 2px 6px var(--shadow-md); }
.btn-tonal:hover::after  { opacity: .08; }
.btn-tonal:active::after { opacity: .14; }

/* ══════════════════════════════════════════════
   RESULT BOX (вывод расчётов)
══════════════════════════════════════════════ */
.result-box {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--dl-ok-bg);
    color: var(--dl-ok-on);
    font-family: 'Google Sans', sans-serif;
    font-size: 18px; font-weight: 500;
    text-align: center;
    min-height: 52px;
    display: flex; align-items: center; justify-content: center;
    transition: background .3s, color .3s;
}
.result-box:empty { background: var(--surf-var); }

/* ══════════════════════════════════════════════
   MD3 RIPPLE
══════════════════════════════════════════════ */
.ripple {
    position: absolute; border-radius: 50%;
    transform: scale(0);
    animation: ripple-anim .5s linear;
    background: rgba(255,255,255,.28);
    pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* ══════════════════════════════════════════════
   SNACKBAR
══════════════════════════════════════════════ */
.snackbar {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #313033; color: #E6E1E5;
    padding: 14px 20px; border-radius: 4px;
    font-size: 14px;
    box-shadow: 0 3px 8px rgba(0,0,0,.4);
    z-index: 999; white-space: nowrap;
    transition: transform .25s cubic-bezier(.2,0,0,1), opacity .25s;
    opacity: 0; pointer-events: none;
}
.snackbar.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1; pointer-events: auto;
}