/* Публичная страница учителя (/t/<username>) — см. templates/teacher_public.html.
   Токены (--bg, --accent, --text*, --radius, шрифты) берутся из base.css,
   здесь только вёрстка самой страницы, отдельным файлом — как pinyin.css. */

.tp-shell {
    max-width: 820px;
    margin: 0 auto;
    padding: calc(var(--site-nav-h, 60px) + 56px) 24px 100px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.tp-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 56px;
}

.tp-avatar {
    width: 72px;
    height: 72px;
    flex: none;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
    font-size: 26px;
    font-weight: 500;
}

.tp-name {
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--text);
    line-height: 1.2;
}

.tp-subjects {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--accent);
    letter-spacing: 0.02em;
    margin-top: 6px;
}

.tp-meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: 0.03em;
    margin-top: 8px;
}

/* ── Заметка «это ваша страница» ─────────────────────────────────────────
   Показывается только владельцу (JS сверяет username из localStorage-JWT
   с USERNAME страницы, см. teacher_public.js) — обычный гость её не видит.
   Обычная строка в колонке контента, без цветной плашки — на этой странице
   и так достаточно фона, лишний блок в шапке был бы просто визуальным шумом. */

.tp-owner-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: 0.02em;
    margin-bottom: 24px;
}

.tp-owner-note a {
    color: var(--accent);
    text-decoration: none;
    margin-left: 6px;
}
.tp-owner-note a:hover { text-decoration: underline; }

/* ── О себе ───────────────────────────────────────────────────────────── */

.tp-bio { margin-bottom: 40px; }
.tp-bio-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-2);
    max-width: 560px;
}

/* ── Как это работает ─────────────────────────────────────────────────── */

.tp-howto { margin-bottom: 48px; }
.tp-howto-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tp-howto-list li {
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.5;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.tp-howto-num {
    flex: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    color: var(--accent);
    min-width: 14px;
}

/* ── Расписание ───────────────────────────────────────────────────────── */

.tp-section-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
}

.tp-section-hint {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 24px;
}

.tp-empty-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-3);
    padding: 40px 0 18px;
    text-align: center;
}

.tp-empty-cta {
    text-align: center;
    padding-bottom: 40px;
}

/* Сама таблица — переиспользованные 1-в-1 классы .fs-* из base.css (тот же
   компонент, что «Расписание преподавателя» → «Свободное расписание» в
   кабинете учителя, static/js/free-schedule.js). Здесь только обёртка под
   контекст страницы без модалки: у неё был свой фон/паддинги (.fs-body),
   которые вне #freeScheduleModal не применяются сами по себе. */
.tp-fs-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.tp-fs-body {
    background: #fff;
    padding: 20px 20px 26px;
    border-radius: var(--radius-lg);
    transition: opacity .15s ease;
}
.tp-fs-body.tp-fs-loading { opacity: .4; pointer-events: none; }
[data-theme="dark"] .tp-fs-body { background: var(--bg); }

/* .fs-time-cell тащит свой кремовый фон из base.css (там компонент живёт
   внутри кремовой модалки #freeScheduleModal) — здесь страница белая. */
.tp-fs-body .fs-time-cell { background: #fff; }

.tp-loading, .tp-empty, .tp-error {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--text-3);
    padding: 24px 0;
}
.tp-error { color: var(--err); }
.tp-empty a { color: var(--accent); text-decoration: none; margin-left: 2px; }
.tp-empty a:hover { text-decoration: underline; }

/* ── Модалка заявки ───────────────────────────────────────────────────── */

.tp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(26, 23, 20, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tp-modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    padding: 36px 30px 28px;
}

.tp-modal h3 {
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 6px;
}

.tp-modal-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    color: var(--text-3);
    margin-bottom: 22px;
}

.tp-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-3);
    cursor: pointer;
    padding: 4px;
}
.tp-modal-close:hover { color: var(--text); }

.tp-field { margin-bottom: 16px; }
.tp-field label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}
.tp-field input, .tp-field textarea {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 2px;
    outline: none;
    resize: none;
    box-sizing: border-box;
}
.tp-field input:focus, .tp-field textarea:focus { border-bottom-color: var(--accent); }

.tp-time-select { width: 100%; max-width: none; box-sizing: border-box; }

.tp-modal-msg {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--err);
    min-height: 16px;
    margin-top: 4px;
}

.tp-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.tp-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 11px 22px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.tp-btn-primary { background: var(--accent); color: #fff; }
.tp-btn-primary:hover { background: var(--accent-dark); }
.tp-btn-primary:disabled { opacity: 0.5; cursor: default; }
.tp-btn-ghost { background: transparent; border-color: var(--border); color: var(--text-2); }
.tp-btn-ghost:hover { border-color: var(--text-3); }

.tp-modal-done-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .tp-shell { padding-top: calc(var(--site-nav-h, 56px) + 40px); }
    .tp-hero { gap: 16px; margin-bottom: 40px; }
    .tp-avatar { width: 60px; height: 60px; font-size: 22px; }
    .tp-name { font-size: 26px; }
}