/* ============================================================
   gdocs.css — вкладки, связанные с Google-документами
   Лист повторяет страницу документа: ширина, поля, шрифты и отступы — из документа.
   ============================================================ */

.gd-sheet-host { display: flex; justify-content: center; }

.gd-sheet {
    --gd-bg: #ffffff;
    width: 100%;
    max-width: var(--gd-page, 595pt);
    padding: 54pt min(var(--gd-mr, 72pt), 6vw) 64pt min(var(--gd-ml, 72pt), 6vw);
    background: var(--gd-bg);
    color: #000;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 12px 40px rgba(0, 0, 0, 0.35);
    font: 11pt/1.2 Arial, sans-serif;
    text-align: left;
    overflow-wrap: break-word;
    -webkit-font-smoothing: auto;
}

/* Документ «без страниц»: лист во всю ширину, как в Docs с полной шириной текста */
.gd-sheet.gd-pageless { --gd-ml: 56px; --gd-mr: 56px; max-width: 1120px; padding: 40px 56px 56px; }

/* Тёмная страница: инверсия листа, картинки и видео — в исходных цветах */
.gd-sheet.gd-dark { filter: invert(0.9) hue-rotate(180deg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.gd-sheet.gd-dark .gd-img img,
.gd-sheet.gd-dark .gd-embed { filter: invert(1) hue-rotate(180deg); }

.gd-block { position: relative; scroll-margin-top: 30px; }
.gd-body { position: relative; }

/* Абзацы: отступы и межстрочный — из стиля документа, браузерные сбрасываем */
.gd-sheet .gd-p { margin: 0; padding: 0; color: inherit; font-size: 11pt; font-weight: 400; letter-spacing: normal; text-transform: none; white-space: pre-wrap; min-height: 1.2em; }
.gd-sheet h1.gd-p, .gd-sheet h2.gd-p, .gd-sheet h3.gd-p, .gd-sheet h4.gd-p, .gd-sheet h5.gd-p, .gd-sheet h6.gd-p { font-family: inherit; border: 0; background: none; }
.gd-sheet .gd-p::before, .gd-sheet .gd-p::after { content: none; }
.gd-sheet .gd-li { position: relative; }
.gd-sheet .gd-bullet {
    position: absolute;
    left: var(--gd-bullet, 18pt);
    display: inline-block;
    min-width: 12pt;
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
}
.gd-sheet [data-hid] { scroll-margin-top: 30px; }
.gd-sheet .gd-flash { animation: gdFlash 1.6s ease-out; }
@keyframes gdFlash { 0%, 30% { background-color: rgba(255, 214, 0, 0.45); } 100% { background-color: transparent; } }

/* Ссылки — как в документе: цвет и подчёркивание задаёт сам документ */
.gd-sheet a.gd-link { color: inherit; text-decoration: none; cursor: pointer; }
.gd-sheet a.gd-link:hover > span { text-decoration-thickness: 2px; filter: brightness(1.25); }
.gd-sheet a.gd-link:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; border-radius: 2px; }
.gd-chip { display: inline-block; padding: 0 6pt; border-radius: 10pt; background: #e8eaed; color: #1a1a1a; font-size: 0.92em; line-height: 1.5; text-decoration: none; }
a.gd-chip:hover { background: #d2e3fc; text-decoration: none; }
.gd-hr { display: block; height: 0; margin: 6pt 0; border-top: 1px solid #a0a0a0; }
.gd-pb { display: block; height: 0; margin: 8pt 0; border-top: 1px dashed #bbb; }

/* Картинки: размер в пунктах, обрезка — как в документе */
.gd-sheet .gd-img {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 0;
    cursor: zoom-in;
}
.gd-sheet .gd-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.gd-sheet .gd-img img[style*="left"] { inset: auto; }
.gd-sheet .gd-img-missing { display: inline-flex; align-items: center; justify-content: center; background: #f1f3f4; color: #5f6368; font: 10pt Arial, sans-serif; line-height: 1.2; cursor: default; }

/* Видео по ссылке — плеер под абзацем */
.gd-embed { position: relative; width: 100%; max-width: 640px; margin: 6pt 0 10pt; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.gd-embed iframe, .gd-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Таблицы: рамки документа по умолчанию — тонкие чёрные */
.gd-table-wrap { max-width: 100%; overflow-x: auto; margin: 0 0 2pt; }
.gd-sheet .gd-table { max-width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; background: none; font-size: inherit; }
.gd-sheet .gd-table td {
    border: 1px solid #000;
    padding: 5pt;
    vertical-align: top;
    background-clip: padding-box;
    color: inherit;
    text-align: left;
    overflow-wrap: break-word;
}
.gd-sheet .gd-table td > .gd-p:last-child { margin-bottom: 0; }


/* Полоса состояния связи */
.gd-status {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1120px;
    margin: 0 auto 18px;
    padding: 10px 14px;
    border: 1px solid var(--line-2);
    border-left: 3px solid #31c48b;
    border-radius: 10px;
    background: var(--bg-2);
}
.gd-status.wait { border-left-color: #ecd547; }
.gd-status.err { border-left-color: var(--accent); }
.gd-status-ico { flex: none; width: 22px; height: 22px; fill: none; stroke: #4c8bf5; stroke-width: 1.8; }
.gd-status-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gd-status-text b { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.gd-status-text span { font-size: 12.5px; color: var(--text-dim); overflow-wrap: anywhere; }
.gd-status.err .gd-status-text span { color: #ff8a80; }
.gd-status-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.gd-status-actions .tb-btn { text-decoration: none; white-space: nowrap; }

/* Кнопки блока — справа от листа, видны при наведении */
.gd-block-tools {
    position: absolute;
    top: 0;
    right: calc(-1 * min(var(--gd-mr, 72pt), 6vw) + 4px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    filter: none;
}
.gd-block:hover > .gd-block-tools, .gd-block-tools:focus-within { opacity: 1; }
.gd-block-tools .icon-btn { width: 30px; height: 30px; background: #fff; border: 1px solid #dadce0; color: #3c4043; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.gd-block-tools .icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.gd-block-tools .icon-btn:hover { background: #f1f3f4; color: #1a73e8; }
.gd-block-tools .icon-btn.danger:hover { color: #d93025; }
.gd-sheet.gd-dark .gd-block-tools { filter: invert(1) hue-rotate(180deg); }

/* Редактор */
.gd-block.gd-editing { margin: 0 calc(-1 * min(var(--gd-ml, 72pt), 6vw) + 8px); padding: 0 calc(min(var(--gd-ml, 72pt), 6vw) - 8px); background: #fff; outline: 2px solid #1a73e8; border-radius: 4px; }
.gd-area { outline: none; min-height: 3em; padding: 8pt 0 14pt; caret-color: #1a73e8; }
.gd-area .gd-p { cursor: text; }
.gd-area .gd-img { cursor: pointer; }
.gd-area .gd-img.sel { outline: 2px solid #1a73e8; outline-offset: 1px; }
.gd-area a { color: inherit; text-decoration: inherit; }
.gd-area a:not([data-l]) { color: #1155cc; text-decoration: underline; }
.gd-area .gd-locked { padding: 6pt; border: 1px dashed #9aa0a6; color: #5f6368; font-style: italic; user-select: none; }
.gd-area .gd-sb { height: 0; margin: 6pt 0; border-top: 2px dotted #9aa0a6; }
.gd-area .gd-table td:focus-within { box-shadow: inset 0 0 0 2px rgba(26, 115, 232, 0.5); }

.gd-tb {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 calc(-1 * min(var(--gd-ml, 72pt), 6vw) + 8px) 6px;
    padding: 6px 8px;
    border-bottom: 1px solid #dadce0;
    border-radius: 4px 4px 0 0;
    background: #edf2fa;
    font: 13px Arial, sans-serif;
    color: #3c4043;
    line-height: 1;
}
.gd-tb > button, .gd-tb-pop > button, .gd-tb-table > button, .gd-tb-img > button {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: 600 12px Arial, sans-serif;
    cursor: pointer;
}
.gd-tb button:hover { background: rgba(60, 64, 67, 0.1); }
.gd-tb button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: middle; }
.gd-tb .gd-tb-style { flex: none; width: auto; min-width: 0; max-width: 170px; margin: 0; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; font: 13px Arial, sans-serif; cursor: pointer; }
.gd-tb .gd-tb-style:hover { background: rgba(60, 64, 67, 0.1); }
.gd-tb .gd-tb-style option { color: #000; background: #fff; }
.gd-tb-sep { width: 1px; height: 20px; margin: 0 4px; background: #c7c7c7; }
.gd-tb-grow { flex: 1; }
.gd-tb .btn-primary.mini, .gd-tb .btn-outline.mini { height: 30px; margin-left: 4px; }
.gd-tb .btn-outline.mini { color: #3c4043; border-color: #9aa0a6; background: #fff; }
.gd-tb-table, .gd-tb-img { display: none; align-items: center; gap: 2px; padding: 0 4px; border-left: 1px solid #c7c7c7; }
.gd-tb.in-table .gd-tb-table, .gd-tb.img-sel .gd-tb-img { display: inline-flex; }
.gd-tb-pop { position: relative; display: inline-flex; }
.gd-pal {
    position: absolute;
    top: 32px;
    left: 0;
    z-index: 6;
    display: none;
    grid-template-columns: repeat(8, 20px);
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.gd-pal.open { display: grid; }
.gd-pal button { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; cursor: pointer; }
.gd-pal button:hover { transform: scale(1.15); }
.gd-pal .gd-pal-none { background: #fff; color: #d93025; font: 700 13px/1 Arial, sans-serif; }

/* Окно связей и журнал */
.gd-link-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.gd-link-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gd-link-main b { color: var(--text); overflow-wrap: anywhere; }
.gd-link-main small { color: var(--text-dim); }
.gd-link-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.gd-link-actions a { text-decoration: none; }
.gd-warn { color: #ff8a80; }
.gd-log { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.gd-log-row { display: grid; grid-template-columns: 150px 130px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.gd-log-time { color: var(--text-mute); font-family: var(--font-mono); font-size: 12px; }
.gd-log-kind { font-weight: 700; color: var(--text-dim); }
.gd-log-row.conflict .gd-log-kind, .gd-log-row.error .gd-log-kind { color: #ff8a80; }
.gd-log-row.push .gd-log-kind { color: #5aa9ff; }
.gd-log-row.pull .gd-log-kind { color: #31c48b; }
.gd-log-msg { color: var(--text); overflow-wrap: anywhere; }
.gd-log-text { width: 100%; min-height: 50vh; font: 13px/1.5 var(--font-mono); white-space: pre-wrap; }

/* Оглавление: заголовки документа по уровням */
.doc-nav-toc a.gd-toc-2 { padding-left: 22px; }
.doc-nav-toc a.gd-toc-3 { padding-left: 36px; font-size: 0.94em; }
.doc-side-tab.gd-depth-1 { padding-left: 28px; }
.doc-side-tab.gd-depth-2 { padding-left: 44px; }
.doc-side-tab.gd-depth-3 { padding-left: 60px; }

@media (max-width: 760px) {
    .gd-sheet, .gd-sheet.gd-pageless { padding: 24pt 14pt 36pt; border-radius: 0; }
    .gd-block-tools { right: -10px; opacity: 1; flex-direction: row; top: -14px; }
    .gd-block.gd-editing, .gd-tb { margin-left: -6px; margin-right: -6px; }
    .gd-block.gd-editing { padding: 0 6px; }
    /* Узкий экран: таблица сохраняет ширину из документа и прокручивается вбок */
    .gd-table-wrap .gd-table { max-width: none; }
    .gd-status { flex-wrap: wrap; }
    .gd-status-actions { width: 100%; justify-content: flex-start; }
    .gd-log-row { grid-template-columns: 1fr; gap: 2px; }
    .gd-link-row { flex-direction: column; align-items: stretch; }
}

/* Скрытие элементов оболочки во вкладках документа */
.gd-hide { display: none !important; }