/* ========================================================
   双栏文本工作台 (textpane.css)
   编码 / 格式化 / 转换 / 加密这一族工具页共用：
   顶部工具条（模式 Tab + 选项）+ 输入、结果两栏（手机上下堆叠）
   配套脚本 textpane.js；只依赖 common.css 的设计令牌
   ======================================================== */
.tp { display: flex; flex-direction: column; gap: 1rem; }

.tp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; }
.tp-options {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem;
    font-size: 0.875rem; color: var(--color-text-secondary);
}
.tp-options label { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 36px; white-space: nowrap; cursor: pointer; }
.tp-options select, .tp-options input[type="number"], .tp-options input[type="text"] {
    min-height: 36px; padding: 0.3rem 0.6rem; font-size: 0.875rem;
}
.tp-options select { padding-right: 1.9rem; }
.tp-options input[type="number"] { width: 72px; }

.tp-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.tp-pane { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.tp-pane-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 32px; }
.tp-pane-title { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); letter-spacing: 0.06em; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.tp-pane textarea, .tp-pane pre, .tp-pane .tp-frame { height: clamp(260px, 50vh, 520px); margin: 0; }
.tp-pane textarea { background-color: var(--color-bg-card); }
.tp-out { tab-size: 4; }
.tp-out:focus-visible { outline-offset: 0; }
/* 代码类结果：不折行，在窗格内横向滚动 */
.tp-out--code { white-space: pre; word-break: normal; overflow-wrap: normal; }
.tp-out:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted); font-family: var(--font-sans); white-space: normal;
}
.tp-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem;
    min-height: 1.2rem; font-size: 0.75rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.tp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tp-pane.is-over textarea { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }

/* 只在某个模式下显示的选项：.tp 上的 data-mode 由 textpane.js 维护 */
.tp[data-mode="minify"] .fmt-only, .tp[data-mode="format"] .min-only { display: none; }

/* 预览 iframe：内容本身按白纸渲染 */
.tp-frame { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }

/* 设置区（密钥、IV 等成组字段） */
.tp-fields { display: grid; gap: 0.75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); align-items: end; }
.tp-fields .tp-span { grid-column: 1 / -1; }
.tp-inline { display: flex; gap: 0.375rem; }
.tp-inline > input { flex: 1; min-width: 0; }

/* Prism 语法高亮（跟随主题） */
.tp-out .token.comment, .tp-out .token.prolog, .tp-out .token.doctype, .tp-out .token.cdata { color: var(--color-text-muted); font-style: italic; }
.tp-out .token.punctuation, .tp-out .token.operator { color: var(--color-text-secondary); }
.tp-out .token.property, .tp-out .token.tag, .tp-out .token.selector, .tp-out .token.atrule, .tp-out .token.function { color: var(--color-info); }
.tp-out .token.string, .tp-out .token.attr-value, .tp-out .token.char, .tp-out .token.regex { color: var(--color-primary); }
.tp-out .token.number, .tp-out .token.boolean, .tp-out .token.constant, .tp-out .token.attr-name { color: var(--color-secondary); }
.tp-out .token.keyword, .tp-out .token.null, .tp-out .token.important, .tp-out .token.entity { color: var(--color-hot); }

@media (max-width: 768px) {
    .tp-panes { grid-template-columns: minmax(0, 1fr); }
    .tp-pane textarea, .tp-pane pre, .tp-pane .tp-frame { height: 220px; }
    .tp-toolbar > .tb-tabs { display: flex; width: 100%; }
    .tp-toolbar > .tb-tabs .tb-tab { flex: 1; min-height: 40px; }
    .tp-options label, .tp-options select, .tp-options input[type="number"], .tp-options input[type="text"] { min-height: 40px; }
    .tp-pane-head { align-items: flex-start; flex-direction: column; }
    .tp-actions { width: 100%; }
    .tp-actions .tb-btn { flex: 1 1 auto; min-height: 40px; }
}