/*
 * Оформление MarkovTasker.
 *
 * Значения взяты из доски «07 · UI-кит» в Penpot — она источник правды.
 * Подбирать цвета на глаз нельзя: тёмная тема там не инверсия светлой, у неё
 * свои акценты и свои *-soft подложки.
 *
 * Шрифт лежит локально в assets/fonts: по офлайн-правилу проекта ничего не
 * тянем из CDN — иначе на машине без сети приложение теряет типографику.
 */

/* ------------------------------------------------------------------ шрифт */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-cyrillic-kKAg1t7.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-Gz7AlRl.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ токены */

:root {
    color-scheme: light;

    --bg: #f4f5f7;
    --surface: #ffffff;
    --sunken: #eef0f4;

    --text: #0f172a;
    --muted: #64748b;
    --faint: #94a3b8;
    --border: #e3e8ef;
    --line: #f0f2f5;

    --brand: #4f46e5;
    --brand-soft: #eef0fe;
    --work: #2563eb;
    --work-soft: #e8f0fe;
    --home: #0d9488;
    --home-soft: #e3f5f2;
    --study: #d97706;
    --study-soft: #fdf1e0;
    --done: #16a34a;
    --done-soft: #e6f6ec;
    --danger: #dc2626;
    --danger-soft: #fdecec;

    /* Текст и иконки поверх акцентной заливки. Белый в обеих темах. */
    --on-accent: #ffffff;
    /* Обводка аватара — цвет подложки, чтобы стопка аватаров «прорезалась». */
    --ring: var(--surface);
    /* Заливка активного чипа и текст на ней. */
    --chip-on: #0f172a;
    --chip-on-text: #f4f5f7;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --gap: 8px;
    --pad: 20px;
    /* Ширина доски на десктопе. Шапка экрана канбана тянется до неё же,
       иначе колонки уезжают к левому краю относительно заголовка. */
    --board-max: 1160px;

    --shadow-fab: 0 6px 20px rgb(79 70 229 / 0.35);

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/*
 * Тёмная тема задаётся трижды намеренно:
 *  - по системной настройке, но только если пользователь не выбрал светлую;
 *  - по явному выбору через data-theme.
 * Ни один цвет не определён ТОЛЬКО внутри media-запроса — иначе переключатель
 * темы в одну из сторон не сработает.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        color-scheme: dark;

        --bg: #0b0f17;
        --surface: #151b26;
        --sunken: #1e2633;

        --text: #f1f5f9;
        --muted: #94a3b8;
        --faint: #64748b;
        --border: #253044;
        --line: #1e2633;

        --brand: #6366f1;
        --brand-soft: #20214a;
        --work: #3b82f6;
        --work-soft: #16283f;
        --home: #14b8a6;
        --home-soft: #0e302c;
        --study: #f59e0b;
        --study-soft: #3a2b10;
        --done: #22c55e;
        --done-soft: #133020;
        --danger: #f87171;
        --danger-soft: #3b1d1d;

        --chip-on: #f1f5f9;
        --chip-on-text: #0b0f17;

        --shadow-fab: 0 6px 20px rgb(0 0 0 / 0.5);
    }
}

:root[data-theme='dark'] {
    color-scheme: dark;

    --bg: #0b0f17;
    --surface: #151b26;
    --sunken: #1e2633;

    --text: #f1f5f9;
    --muted: #94a3b8;
    --faint: #64748b;
    --border: #253044;
    --line: #1e2633;

    --brand: #6366f1;
    --brand-soft: #20214a;
    --work: #3b82f6;
    --work-soft: #16283f;
    --home: #14b8a6;
    --home-soft: #0e302c;
    --study: #f59e0b;
    --study-soft: #3a2b10;
    --done: #22c55e;
    --done-soft: #133020;
    --danger: #f87171;
    --danger-soft: #3b1d1d;

    --chip-on: #f1f5f9;
    --chip-on-text: #0b0f17;

    --shadow-fab: 0 6px 20px rgb(0 0 0 / 0.5);
}

/* -------------------------------------------------------------------- база */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* iOS не увеличивает текст при повороте экрана. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    /* Телефон — основной сценарий: горизонтальной прокрутки быть не должно. */
    overflow-x: hidden;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--brand);
    text-decoration: none;
}

/* Видимый фокус нужен для клавиатуры, но не должен мешать при клике мышью. */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.3;
}

.h-display {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.h-title {
    font-size: 19px;
    font-weight: 700;
}

.muted {
    color: var(--muted);
}

.faint {
    color: var(--faint);
}

.overline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ----------------------------------------------------------------- каркас */

.app {
    /* Учитываем «чёлку» и системную полосу жестов на iOS. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    min-height: 100dvh;
}

.container {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 var(--pad);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --------------------------------------------------------------- элементы */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.field {
    display: block;
}

.field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.field__input {
    width: 100%;
    /* 48px — палец попадает без промаха; минимум по гайдлайнам 44px. */
    min-height: 48px;
    padding: 12px 16px;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
}

.field__input::placeholder {
    color: var(--faint);
}

.field__input:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 1px var(--brand);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.btn--primary {
    background: var(--brand);
    color: var(--on-accent);
}

.btn--ghost {
    background: var(--surface);
    border-color: var(--border);
    color: var(--muted);
}

.btn--danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.btn--block {
    width: 100%;
}

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
}

.alert--error {
    background: var(--danger-soft);
    color: var(--danger);
}

/* ------------------------------------------------------------------- вход */

.auth {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    padding: 40px 0;
}

.auth__logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    background: var(--brand);
    border-radius: 20px;
    color: var(--on-accent);
    font-size: 30px;
    font-weight: 700;
}

.auth__title {
    text-align: center;
}

.auth__subtitle {
    margin: 8px 0 32px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.auth__note {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--faint);
    font-size: 12px;
    line-height: 1.55;
}

.auth__forgot {
    display: block;
    margin-top: 12px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
}

/*
 * Десктоп вторичен, но растянутая на весь экран форма выглядит сломанной.
 * Ширину ограничивает .container, здесь только вертикальный ритм.
 */
@media (min-width: 900px) {
    .auth {
        padding: 64px 0;
    }
}

/* ----------------------------------------------------------------- экраны */

.screen {
    /* Отступ снизу больше обычного: под FAB, иначе кнопка накрывает
       последнюю карточку списка и по ней невозможно попасть. */
    padding-top: 24px;
    padding-bottom: 120px;
}

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.topbar__date {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}

.navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.navbar__back {
    display: grid;
    place-items: center;
    /* 44px — минимальная зона нажатия; визуально шеврон меньше. */
    width: 44px;
    height: 44px;
    margin-left: -12px;
    color: var(--text);
    font-size: 30px;
    line-height: 1;
}

/* --------------------------------------------------------------- аватары */

.avatar {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--ring);
    border-radius: var(--radius-pill);
    background: var(--avatar-bg, var(--brand));
    color: var(--on-accent);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.avatar--button {
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.avatar--sm {
    width: 26px;
    height: 26px;
    font-size: 11px;
}

.avatar--rest {
    background: var(--sunken);
    color: var(--muted);
}

.avatar-stack {
    display: flex;
    margin-top: 12px;
}

/* Наложение аватаров друг на друга; обводка цветом подложки их разделяет. */
.avatar-stack .avatar + .avatar {
    margin-left: -8px;
}

/* ------------------------------------------------------------ карточка зоны */

.zone-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 16px 16px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.zone-card__accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent);
}

.zone-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: var(--radius);
    /* Подложка — тот же акцент с низкой непрозрачностью: одна переменная
       вместо шести *-soft значений, и работает для любого цвета зоны. */
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
    font-size: 19px;
    font-weight: 700;
}

.zone-card__body {
    min-width: 0;
}

.zone-card__name {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.zone-card__meta {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

/* ------------------------------------------------------------------- FAB */

.fab {
    position: fixed;
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    background: var(--brand);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-fab);
    color: var(--on-accent);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

@media (min-width: 900px) {
    /*
     * Контент живёт в колонке 560px по центру, а кнопка прибита к краю
     * монитора — на широком экране до неё метр мыши. Ставим её к краю
     * колонки: 50vw — центр, 280px — половина колонки.
     */
    .fab {
        right: max(20px, calc(50vw - 260px));
    }
}

/* --------------------------------------------------------- пустое состояние */

.empty {
    padding: 48px 0;
    text-align: center;
}

.empty__art {
    display: grid;
    gap: 8px;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
    padding: 32px 24px;
    background: var(--sunken);
    border-radius: 32px;
}

.empty__art span {
    display: block;
    height: 16px;
    background: var(--border);
    border-radius: 5px;
}

.empty__art span:last-child {
    width: 60%;
}

.empty__title {
    font-size: 20px;
    font-weight: 700;
}

.empty__text {
    margin: 12px auto 28px;
    max-width: 34ch;
    color: var(--muted);
    line-height: 1.55;
}

/* ------------------------------------------------------------ выбор цвета */

.swatches {
    margin: 0;
    padding: 0;
    border: 0;
}

.swatches legend {
    padding: 0;
}

.swatch {
    display: inline-block;
    margin: 8px 12px 0 0;
    cursor: pointer;
}

/* Радиокнопка скрыта визуально, но остаётся доступной с клавиатуры. */
.swatch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.swatch__dot {
    display: block;
    width: 40px;
    height: 40px;
    background: var(--swatch);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 0 var(--swatch);
    transition: box-shadow 0.12s ease;
}

.swatch__input:checked + .swatch__dot {
    /* Кольцо строится тенями, чтобы не менять размер и не дёргать раскладку. */
    box-shadow:
        0 0 0 3px var(--surface),
        0 0 0 5px var(--swatch);
}

.swatch__input:focus-visible + .swatch__dot {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}

/* ----------------------------------------------------------------- прочее */

.field__error {
    display: block;
    margin-top: 8px;
    color: var(--danger);
    font-size: 12px;
}

.hint {
    margin: 0;
    color: var(--faint);
    font-size: 12px;
    line-height: 1.55;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------------- шапка внутренних экранов */

.navbar__titles {
    min-width: 0;
}

.navbar__sub {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.navbar__action {
    margin-left: auto;
    padding: 12px 4px;
    font-size: 14px;
    font-weight: 600;
}

.section-label {
    margin: 24px 0 12px;
}

/* ------------------------------------------------------------- участники */

.members {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-bottom: 4px;
}

.members__text {
    min-width: 0;
    flex: 1;
}

.members__count {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.members__names {
    margin: 2px 0 0;
    font-size: 12px;
    /* Длинный список имён не должен ломать карточку. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pill {
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pill--brand {
    background: var(--brand-soft);
    color: var(--brand);
}

/* ---------------------------------------------------------- карточка проекта */

.project-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: inherit;
}

.project-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
}

.project-card__body {
    flex: 1;
    min-width: 0;
}

.project-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.project-card__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.project-card__percent {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.project-card__percent.is-done {
    color: var(--done);
}

.project-card__meta {
    margin: 4px 0 12px;
    color: var(--muted);
    font-size: 12px;
}

/* --------------------------------------------------------------- прогресс */

.progress {
    height: 6px;
    background: var(--sunken);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress__fill {
    height: 100%;
    background: var(--progress, var(--brand));
    border-radius: var(--radius-pill);
}

.progress-card {
    padding: 16px;
}

.progress-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.progress-card__label {
    font-size: 15px;
    font-weight: 600;
}

.progress-card__percent {
    font-size: 15px;
    font-weight: 700;
}

/* ------------------------------------------------------------------ чипы */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 16px;
}

.chip {
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.chip--on {
    background: var(--chip-on);
    border-color: var(--chip-on);
    color: var(--chip-on-text);
}

.col-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.col-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--sunken);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.col-chip i {
    width: 14px;
    height: 3px;
    background: var(--dot);
    border-radius: 2px;
}

/* -------------------------------------------------------------- список задач */

.task-list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.task-row + .task-row {
    border-top: 1px solid var(--line);
}

.task-row__check {
    display: flex;
}

.task-row__main {
    flex: 1;
    min-width: 0;
    color: inherit;
}

.task-row__title {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.task-row.is-done .task-row__title {
    color: var(--faint);
    text-decoration: line-through;
}

.task-row__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
}

.task-row__due {
    color: var(--faint);
    font-weight: 600;
}

.task-row__due.is-overdue,
.is-overdue {
    color: var(--danger);
    font-weight: 600;
}

.checkbox {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    /* Визуально 22px, но зона нажатия расширена паддингом формы до 44px. */
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 2px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.checkbox--on {
    background: var(--done);
    border-color: var(--done);
}

.badge {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
}

.badge--danger {
    background: var(--danger-soft);
    color: var(--danger);
}

/* -------------------------------------------------------------- карточка задачи */

.breadcrumb {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

.task-title {
    margin: 16px 0 20px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.complete {
    background: var(--surface);
    border: 1.5px solid var(--done);
    color: var(--done);
}

.complete--on {
    background: var(--done-soft);
}

.details {
    margin: 20px 0 0;
    padding: 0 16px;
}

.details__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
}

.details__row + .details__row {
    border-top: 1px solid var(--line);
}

.details dt {
    color: var(--muted);
    font-size: 13px;
}

.details dd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}

.description {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.created-at {
    margin-top: 28px;
}

/* ----------------------------------------------------------------- формы */

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.field__input--area {
    min-height: 88px;
    padding-top: 12px;
    resize: vertical;
}

select.field__input {
    /* Убираем системную стрелку Safari, чтобы поля не разъезжались по высоте. */
    appearance: none;
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%),
        linear-gradient(135deg, var(--faint) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.danger-zone {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.empty--inline {
    padding: 32px 0;
}

/* --------------------------------------------------------------- канбан */

.screen--board {
    padding-bottom: 16px;
}

.board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.segmented {
    display: inline-flex;
    padding: 4px;
    background: var(--sunken);
    border-radius: var(--radius-pill);
}

.segmented__item {
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.segmented__item--on {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 700;
}

.pill--outline {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--brand);
}

/*
 * Доска скроллится по горизонтали во всю ширину экрана.
 * scroll-snap делает свайп по колонкам на телефоне предсказуемым.
 */
.board {
    display: flex;
    gap: 12px;
    /* 20px — тот же боковой отступ, что и у .container */
    padding: 16px 20px 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.column {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: min(300px, 82vw);
    padding: 16px 12px;
    background: var(--sunken);
    border-radius: var(--radius-lg);
    scroll-snap-align: start;
}

.column__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 12px;
}

.column__accent {
    width: 20px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
}

.column__name {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.column__count {
    padding: 2px 8px;
    background: var(--border);
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.column__flag {
    margin: 0 2px 8px;
    color: var(--faint);
    font-size: 11px;
}

.column__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Минимум высоты, чтобы в пустую колонку было куда попасть пальцем. */
    min-height: 120px;
}

.column__add {
    padding: 12px 2px 2px;
    color: var(--faint);
    font-size: 13px;
    font-weight: 600;
}

.dropzone-hint {
    display: grid;
    place-items: center;
    height: 96px;
    margin: 0;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    color: var(--faint);
    font-size: 12px;
    text-align: center;
}

.dropzone-hint.is-hidden {
    display: none;
}

.kcard {
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* Жест перетаскивания не должен конкурировать с выделением текста. */
    touch-action: pan-y;
    user-select: none;
}

.kcard.is-dragging {
    border-color: var(--brand);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.18);
    opacity: 0.95;
    cursor: grabbing;
}

.kcard__title {
    display: block;
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.kcard.is-done .kcard__title {
    color: var(--faint);
    text-decoration: line-through;
}

.kcard__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    min-height: 26px;
}

.kcard__due {
    margin-left: auto;
    color: var(--faint);
    font-size: 11px;
    font-weight: 600;
}

.kcard__due.is-overdue {
    color: var(--danger);
}

.kcard-placeholder {
    border: 2px dashed var(--brand);
    border-radius: var(--radius);
    background: var(--brand-soft);
}

.board-hint {
    margin-bottom: 40px;
}

/*
 * Колесом мыши snap только мешает: доска дёргается между колонками вместо
 * плавной прокрутки. На тач-устройствах он, наоборот, и нужен — поэтому
 * отключается по типу указателя, а не по ширине экрана.
 */
@media (pointer: fine) {
    .board {
        scroll-snap-type: none;
    }
}

/*
 * Десктоп. Доска вынесена из .container и тянется во всю ширину, а шапка
 * и переключатель остаются в колонке 560px — из-за этого колонки уезжают
 * к левому краю, пока заголовок стоит посередине. Выравниваем: общая
 * максимальная ширина и общие боковые отступы.
 */
@media (min-width: 900px) {
    .screen--board {
        max-width: var(--board-max);
    }

    .board {
        max-width: var(--board-max);
        margin: 0 auto;
        gap: 16px;
        padding: 16px 20px 32px;
    }

    .column {
        /* Пока колонок мало, они делят ширину поровну; когда их становится
           много, сжиматься перестают и доска начинает прокручиваться. */
        flex: 1 1 280px;
        width: auto;
        min-width: 280px;
        max-width: 340px;
    }

    /* Заголовок колонки остаётся виден при длинном списке задач: иначе
       в прокрутке непонятно, в какую колонку смотришь. */
    .column__head {
        position: sticky;
        top: 0;
        z-index: 1;
        padding-top: 8px;
        margin-top: -8px;
        background: var(--sunken);
    }
}

/* ------------------------------------------------------------------ меню */

.menu {
    position: relative;
}

.menu__trigger {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--faint);
    cursor: pointer;
    /* Убираем системный треугольник у <summary>. */
    list-style: none;
}

.menu__trigger::-webkit-details-marker {
    display: none;
}

.menu__list {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 200px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.16);
}

.menu__list a {
    display: block;
    padding: 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
}

.menu__list a.is-danger {
    color: var(--danger);
}

/* ------------------------------------------------------- переключатель */

.toggle-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    cursor: pointer;
}

.toggle-row__text {
    flex: 1;
}

.toggle-row__title {
    display: block;
    font-size: 15px;
    font-weight: 500;
}

.toggle-row__hint {
    display: block;
    margin-top: 4px;
    color: var(--faint);
    font-size: 12px;
    line-height: 1.45;
}

.toggle-row__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.toggle {
    flex: 0 0 auto;
    position: relative;
    width: 48px;
    height: 28px;
    background: var(--border);
    border-radius: var(--radius-pill);
    transition: background 0.15s ease;
}

.toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: var(--on-accent);
    border-radius: var(--radius-pill);
    transition: transform 0.15s ease;
}

.toggle-row__input:checked ~ .toggle {
    background: var(--brand);
}

.toggle-row__input:checked ~ .toggle::after {
    transform: translateX(20px);
}

.toggle-row__input:focus-visible ~ .toggle {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* --------------------------------------------------------- подтверждение */

.confirm {
    max-width: 380px;
    margin: 24px auto 0;
    padding: 28px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    text-align: center;
}

.confirm__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: var(--danger-soft);
    border-radius: var(--radius-pill);
    color: var(--danger);
    font-size: 24px;
    font-weight: 700;
}

.confirm__title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}

.confirm__text {
    margin: 16px 0 20px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.confirm .stack {
    text-align: left;
}

/* ---------------------------------------------------------- участники */

.people {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.person + .person {
    border-top: 1px solid var(--line);
}

.person__text {
    flex: 1;
    min-width: 0;
}

.person__name {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.person__email {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar--pending {
    background: var(--sunken);
    border-color: var(--border);
    color: var(--faint);
}

.badge--role {
    white-space: nowrap;
}

.badge--owner {
    background: var(--brand-soft);
    color: var(--brand);
}

.badge--editor {
    background: var(--work-soft);
    color: var(--work);
}

.badge--viewer {
    background: var(--sunken);
    color: var(--muted);
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.link-danger {
    padding: 8px 0;
    background: transparent;
    border: 0;
    color: var(--danger);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.invite-form {
    padding: 16px;
}

.chips--tight {
    margin: 0;
}

.chip-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.chip-radio span {
    display: inline-block;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.chip-radio input:checked + span {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-accent);
}

.chip-radio input:focus-visible + span {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 44px — минимальная зона нажатия для радиокнопки с подписью. */
    min-height: 44px;
    font-size: 13px;
}

.alert--success {
    background: var(--done-soft);
    color: var(--done);
}

/* --------------------------------------------------- принятие приглашения */

.auth__logo--sm {
    width: 44px;
    height: 44px;
    margin-bottom: 28px;
    border-radius: 14px;
    font-size: 20px;
}

.invite-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.invite-role {
    display: block;
    width: fit-content;
    margin: 16px auto 0;
    padding: 8px 16px;
    background: var(--study-soft);
    border-radius: var(--radius-pill);
    color: var(--study);
    font-size: 12px;
    font-weight: 600;
}

.field__input--locked {
    background: var(--border);
    color: var(--muted);
}

/* ------------------------------------------------------------- таб-бар */

.tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* Полоса жестов на iPhone не должна накрывать подписи. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 4px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 500;
}

.tabbar__item.is-on {
    color: var(--brand);
    font-weight: 600;
}

@media (min-width: 900px) {
    /* Три подписи, растянутые на всю ширину монитора, выглядят как ошибка
       вёрстки. Держим их в середине, шириной как у контента. */
    .tabbar {
        justify-content: center;
    }

    .tabbar__item {
        flex: 0 0 auto;
        min-width: 140px;
    }
}

.tabbar__icon {
    display: block;
    width: 22px;
    height: 22px;
}

/* Иконки нарисованы средствами CSS: отдельные файлы или шрифт иконок —
   это лишние запросы и ещё одна вещь, которую надо держать офлайн. */
.tabbar__icon--zones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.tabbar__icon--zones i {
    background: currentColor;
    border-radius: 2px;
}

.tabbar__icon--today {
    border: 2px solid currentColor;
    border-radius: 5px;
    box-shadow: inset 0 3px 0 currentColor;
}

.tabbar__icon--profile {
    position: relative;
}

.tabbar__icon--profile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 12px;
    height: 12px;
    background: currentColor;
    border-radius: 50%;
}

.tabbar__icon--profile::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 22px;
    height: 9px;
    background: currentColor;
    border-radius: 5px 5px 0 0;
}

/* Экраны с таб-баром: запас снизу, иначе он накрывает последний элемент. */
.screen--tabbed {
    padding-bottom: 110px;
}

.fab--tabbed {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------- настройки */

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    /* 52px — комфортная зона нажатия для строки списка. */
    min-height: 52px;
    padding: 16px;
    background: transparent;
    border: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.settings-row + .settings-row {
    border-top: 1px solid var(--line);
}

.settings-row__value {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

.settings-row--add {
    color: var(--brand);
    font-weight: 600;
}

.settings-row--button {
    border-top: 0;
}

.column-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.column-row__dot {
    width: 14px;
    height: 3px;
    background: var(--dot);
    border-radius: 2px;
}

.badge--done {
    background: var(--done-soft);
    color: var(--done);
    font-size: 10px;
}

.form-card {
    padding: 16px;
}

.inline-form {
    display: flex;
    gap: 12px;
    padding: 12px;
}

.inline-form .field__input {
    flex: 1;
}

.inline-form .btn {
    min-height: 48px;
    white-space: nowrap;
}

.danger-text {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.theme-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    flex-wrap: wrap;
}

.theme-card__label {
    font-size: 15px;
    font-weight: 500;
}

.theme-card .chip {
    padding: 8px 16px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}

.person--wide {
    padding: 16px;
}

.logout {
    margin-top: 32px;
}

.logout__btn {
    background: transparent;
    color: var(--danger);
}

.zone-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--dot);
    border-radius: 50%;
}

/* --------------------------------------------------------------- чек-лист */

.checklist {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.checklist__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.checklist__item + .checklist__item {
    border-top: 1px solid var(--line);
}

.checklist__title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
}

.checklist__item.is-done .checklist__title {
    color: var(--faint);
    text-decoration: line-through;
}

.checklist__note {
    margin-bottom: 12px;
    color: var(--done);
}

.check-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--sunken);
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.check-badge.is-complete {
    background: var(--done-soft);
    color: var(--done);
}

/* ------------------------------------------------- управление пользователями */

.person--stacked {
    display: block;
}

.person__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.person__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-left: 56px;
}

.link-btn {
    padding: 8px 0;
    background: transparent;
    border: 0;
    color: var(--brand);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.password-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.field__input--slim {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    /* Поле не должно распирать строку на узком экране. */
    max-width: 160px;
}

.toggle-row--flat {
    padding: 0;
    background: transparent;
    border: 0;
}

/* ------------------------------------------------------------ интеграции */

.integration {
    padding: 16px;
}

.integration__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.integration__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    background: var(--work-soft);
    border-radius: var(--radius);
    color: var(--work);
    font-size: 13px;
    font-weight: 700;
}

.integration__title {
    flex: 1;
    min-width: 0;
}

.integration__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.integration__meta {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Вторая строка — перечень направлений. Вплотную к адресу она читается
   как продолжение одной фразы, поэтому чуть больше воздуха. */
.integration__meta + .integration__meta {
    margin-top: 4px;
    color: var(--faint);
}

.status-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot--ok { background: var(--done); }
.status-dot--error { background: var(--danger); }
.status-dot--off { background: var(--border); }

.integration__status {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

.integration__query {
    margin-top: 12px;
}

.integration__query summary {
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.code {
    margin: 12px 0 0;
    padding: 12px;
    background: var(--sunken);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    /* Длинный запрос не должен растягивать карточку. */
    white-space: pre-wrap;
    word-break: break-word;
}

.field__input--code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    padding-top: 12px;
}

.integration__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.link-btn--danger {
    color: var(--danger);
}