/* ============================================================
   style/pdf-text-editor-plus.css — the Edit PDF Text launcher page.

   The page is a launcher, like Fill PDF Forms: choose a PDF, then
   "Start editing" opens the editor in its own tab
   (/frontend/pdf-text-editor-plus-app.html, styled by
   pdf-text-editor-plus-app.css).

   Every rule is scoped to body.tep-page or a tep- id or class, so
   nothing here can reach another page. Shared structure (navbar, tool
   area, upload box, upload error, footer) comes from main.css, untouched.
   ============================================================ */

body.tep-page .tnd { width: 100%; }

.tep-hidden { display: none !important; }

/* ── File bar ──────────────────────────────────────────────── */
#tep-file-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 14px;
    text-align: left;
}
#tep-file-bar > i { color: #dc2626; }
#tep-file-name { flex: 1; overflow-wrap: anywhere; }
#tep-file-meta { flex-shrink: 0; font-size: 12px; color: #94a3b8; }
#tep-file-open {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #c2410c;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
#tep-file-open:hover { background: #fff7ed; border-color: #fdba74; }
#tep-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #ef4444;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
@media (max-width: 560px) {
    #tep-file-open { min-width: 44px; padding: 0 11px; }
    #tep-file-open span { display: none; }
}

/* ── Ready to edit ─────────────────────────────────────────── */
#tep-ready {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    margin-top: 16px;
    padding: 18px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff7ed;
    text-align: left;
}
body.tep-page #tep-ready p {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: #7c2d12;
}
#tep-start {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff7a1a 0%, #ff6600 100%);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
#tep-start:hover { background: #f25c00; transform: translateY(-2px); }
#tep-start:focus-visible { outline: 2px solid #ff6600; outline-offset: 3px; }
#tep-start:disabled { opacity: .55; cursor: not-allowed; transform: none; }

#tep-status {
    min-height: 1.4em;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
    text-align: left;
}
#tep-status.tep-status-error { color: #dc2626; }
#tep-status.tep-status-success { color: #059669; }

/* ── Explanatory content ───────────────────────────────────── */
/* main.css sets every paragraph in a tool area to 20px serif for the
   page's introduction; in the guide, text is ordinary reading size. */
body.tep-page .tep-guide p,
body.tep-page .tep-guide li {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
}
.tep-guide {
    margin-top: 28px;
    text-align: left;
    color: #334155;
    line-height: 1.6;
}
.tep-guide h2 { margin: 22px 0 8px; font-size: 20px; color: #0f172a; }
.tep-guide h3 { margin: 16px 0 6px; font-size: 16px; color: #0f172a; }
.tep-guide ul, .tep-guide ol { padding-left: 22px; }