/* Draw on PDF (draw_on_pdf) — оформление рабочей области.
   ЧЕРНОВИК: всё на сайтовых токенах theme.css и Bootstrap-каркасе; сайтовую типографику
   и шапку не трогаем. */

.dpdf {
    --dpdf-paper: #fff;            /* фон страницы, пока pdf.js её не дорисовал */
    max-width: 980px;              /* совпадает с layout.width в manifest.json */
    margin-inline: auto;
}

/* ---------- выбор файла ---------- */
.dpdf__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
    background: var(--tls-surface);
    border: 2px dashed var(--tls-border);
    border-radius: var(--tls-item-radius);
    cursor: pointer;
}

.dpdf.is-dragover .dpdf__drop,
.dpdf.is-dragover .dpdf__pages {
    border-color: var(--tls-accent);
    background: var(--tls-menu-hover);
}

.dpdf__drop-icon {
    font-size: 44px;
    line-height: 1;
    color: var(--tls-accent);
}

.dpdf__drop-main {
    font-size: 18px;
    color: var(--tls-text);
}

.dpdf__drop-sub {
    font-size: 14px;
    color: var(--tls-text-muted);
}

.dpdf__drop-btn {
    margin-top: 6px;
}

.dpdf__file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dpdf[data-state="loading"] .dpdf__drop {
    opacity: .6;
    pointer-events: none;
}

/* ---------- панель ---------- */
.dpdf__bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 8px 0;
    background: var(--tls-bg);
}

.dpdf__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.dpdf__actions {
    margin-left: auto;
}

.dpdf__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--tls-text);
    background: var(--tls-surface);
    border: 1px solid var(--tls-border);
    border-radius: var(--tls-item-radius);
    cursor: pointer;
}

.dpdf__btn:hover:not(.is-active):not(:disabled) {
    background: var(--tls-menu-hover);
}

.dpdf__btn.is-active {
    color: var(--tls-on-accent);
    background: var(--tls-accent);
    border-color: var(--tls-accent);
}

.dpdf__btn:disabled {
    opacity: .45;
    cursor: default;
}

.dpdf__swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--dpdf-swatch);
    border: 2px solid var(--tls-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--tls-border);
    cursor: pointer;
}

.dpdf__swatch.is-active {
    box-shadow: 0 0 0 2px var(--tls-text);
}

.dpdf__width {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--tls-surface);
    border: 1px solid var(--tls-border);
    border-radius: var(--tls-item-radius);
    cursor: pointer;
}

.dpdf__width.is-active {
    border-color: var(--tls-accent);
    background: var(--tls-menu-hover);
}

.dpdf__width-dot {
    display: block;
    width: var(--dpdf-dot);
    height: var(--dpdf-dot);
    background: var(--tls-text);
    border-radius: 50%;
}

.dpdf__save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dpdf__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--tls-text-muted);
}

.dpdf__name {
    font-weight: 600;
    color: var(--tls-text);
    overflow-wrap: anywhere;
}

/* ---------- страницы ---------- */
.dpdf__pages {
    display: flex;
    flex-direction: column;
    gap: var(--dpdf-gap, 14px);
    padding: 14px;
    background: var(--tls-menu-hover);
    border: 1px solid var(--tls-border);
    border-radius: var(--tls-item-radius);
}

.dpdf__page {
    position: relative;
    width: 100%;
    background: var(--dpdf-paper);
    box-shadow: var(--tls-shadow);
}

.dpdf__base,
.dpdf__ink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dpdf__ink {
    mix-blend-mode: multiply;      /* маркер ложится «под» текст, а не замазывает его */
    touch-action: none;            /* палец рисует, а не листает */
    cursor: crosshair;
}

.dpdf__pages[data-tool="eraser"] .dpdf__ink {
    cursor: cell;
}

.dpdf__pages[data-tool="hand"] .dpdf__ink {
    touch-action: auto;            /* режим «листать»: жесты отдаём прокрутке */
    cursor: default;
}

.dpdf__error {
    margin: 10px 0 0;
    color: var(--tls-danger);
}

.dpdf__note:empty,
.dpdf__error:empty {
    display: none;
}

/* ---------- мобайл ---------- */
@media (max-width: 767.98px) {
    .dpdf__btn-txt {
        display: none;             /* на узком экране — только иконки, подписи в aria-label */
    }

    /* панель липкая — на телефоне ужимаем её до трёх невысоких рядов, чтобы не съедала страницу */
    .dpdf__bar {
        gap: 6px 8px;
        padding: 6px 0;
    }

    .dpdf__group {
        gap: 4px;
    }

    .dpdf__btn,
    .dpdf__width {
        min-height: 34px;
        width: 34px;
        height: 34px;
        justify-content: center;
        padding: 0;
    }

    .dpdf__swatch {
        width: 26px;
        height: 26px;
    }

    .dpdf__save {
        padding: 4px 12px;
    }

    .dpdf__actions {
        margin-left: 0;
    }

    .dpdf__pages {
        padding: 8px;
    }
}