/* ==========================================================
   Prompt Template Builder — all selectors scoped to .ptb-
   ========================================================== */

/* ── Shell & workspace ───────────────────────────────────── */

.ptb-shell {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ptb-workspace {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Recipe banner ───────────────────────────────────────── */

.ptb-recipe-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    background: rgba(99, 91, 255, 0.08);
    border: 1px solid rgba(99, 91, 255, 0.22);
    border-radius: var(--np-radius-sm, 6px);
    font-size: 0.84rem;
    color: var(--np-text-secondary);
    line-height: 1.4;
}

.ptb-recipe-icon {
    color: var(--np-accent-light, #818cf8);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.ptb-recipe-text { flex: 1; }

.ptb-recipe-text strong {
    color: var(--np-text-primary);
    font-weight: 600;
}

.ptb-recipe-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--np-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.ptb-recipe-dismiss:hover { color: var(--np-text-primary); }

/* ── Hero ────────────────────────────────────────────────── */

.ptb-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.75rem;
    background:
        radial-gradient(ellipse at top right, rgba(99,102,241,0.09) 0%, transparent 60%),
        var(--np-bg-card);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-lg, 14px);
}

.ptb-hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 680px;
}

.ptb-eyebrow {
    color: var(--np-accent-light, #818cf8);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ptb-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--np-text-primary);
    margin: 0;
}

.ptb-subtitle {
    color: var(--np-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
}

.ptb-code-hint {
    display: inline-block;
    font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
    font-size: 0.875em;
    background: rgba(99, 102, 241, 0.12);
    color: var(--np-accent-light, #818cf8);
    border-radius: 4px;
    padding: 0.05em 0.4em;
    font-style: normal;
}

.ptb-hero-actions {
    flex-shrink: 0;
    padding-top: 0.2rem;
}

/* ── Buttons ─────────────────────────────────────────────── */

.ptb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border-radius: 9px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    outline: none;
}

.ptb-btn:focus-visible {
    outline: 2px solid var(--np-accent, #6366f1);
    outline-offset: 2px;
}

.ptb-btn--primary {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--np-accent, #6366f1), #4338ca);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(99,102,241,0.28);
}
.ptb-btn--primary:hover { background: linear-gradient(135deg, var(--np-accent-light, #818cf8), var(--np-accent, #6366f1)); }
.ptb-btn--primary:active { transform: scale(0.99); }

.ptb-btn--secondary {
    background: rgba(99,102,241,0.1);
    color: var(--np-accent-light, #818cf8);
    border-color: rgba(99,102,241,0.22);
}
.ptb-btn--secondary:hover {
    background: rgba(99,102,241,0.18);
    border-color: rgba(99,102,241,0.36);
}

.ptb-btn--ghost {
    background: transparent;
    color: var(--np-text-secondary);
    border-color: rgba(255,255,255,0.1);
}
.ptb-btn--ghost:hover {
    background: rgba(255,255,255,0.05);
    color: var(--np-text-primary);
    border-color: rgba(255,255,255,0.18);
}
.ptb-btn--ghost:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Preset bar ──────────────────────────────────────────── */

.ptb-preset-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    background: var(--np-bg-card);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-lg, 14px);
}

.ptb-preset-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--np-text-muted);
    flex-shrink: 0;
    margin-right: 0.25rem;
}

.ptb-preset-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ptb-preset-pill {
    height: 30px;
    padding: 0 0.75rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--np-text-secondary);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
    white-space: nowrap;
    outline: none;
}

.ptb-preset-pill:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: var(--np-text-primary);
}

.ptb-preset-pill:focus-visible {
    outline: 2px solid var(--np-accent, #6366f1);
    outline-offset: 2px;
}

.ptb-preset-pill.is-active {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.4);
    color: var(--np-accent-light, #818cf8);
    font-weight: 600;
}

/* ── Editor card ─────────────────────────────────────────── */

.ptb-editor-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 50%), var(--np-bg-card);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: var(--np-radius-lg, 14px);
}

/* ── Field group ─────────────────────────────────────────── */

.ptb-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ptb-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #a8b9cc;
}

.ptb-required-mark {
    color: var(--np-error, #f87171);
    margin-left: 0.2rem;
}

.ptb-field-hint {
    font-size: 0.8125rem;
    color: var(--np-text-muted);
    margin: 0;
    line-height: 1.5;
}

.ptb-code-token {
    display: inline-block;
    font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
    background: rgba(99,102,241,0.1);
    color: var(--np-accent-light, #818cf8);
    border-radius: 3px;
    padding: 0.05em 0.35em;
    font-style: normal;
}

/* ── Textarea ────────────────────────────────────────────── */

.ptb-textarea {
    width: 100%;
    background: var(--np-bg-input);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 10px;
    color: var(--np-text-primary);
    font: inherit;
    font-size: 0.9rem;
    padding: 0.75rem 0.9rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.32);
    line-height: 1.65;
}

.ptb-textarea::placeholder {
    color: var(--np-text-muted);
    font-size: 0.85rem;
}

.ptb-textarea:hover:not(:focus) {
    border-color: rgba(255,255,255,0.22);
}

.ptb-textarea:focus {
    border-color: var(--np-border-focus, rgba(99,102,241,0.5));
    box-shadow: 0 0 0 3px rgba(99,102,241,0.14), inset 0 1px 4px rgba(0,0,0,0.28);
}

.ptb-textarea[aria-invalid="true"] {
    border-color: var(--np-error-border, #f87171);
    box-shadow: 0 0 0 3px var(--np-error-dim, rgba(248,113,113,0.12));
}

.ptb-template-area {
    min-height: 220px;
    font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
}

/* ── Error box ───────────────────────────────────────────── */

.ptb-error-box {
    padding: 0.65rem 0.85rem;
    background: rgba(248,113,113,0.08);
    border: 1px solid rgba(248,113,113,0.22);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #fca5a5;
    line-height: 1.5;
}

.ptb-error-box p { margin: 0; }

/* ── Generate row (full-width primary CTA) ───────────────── */

.ptb-generate-row {
    padding-top: 0.75rem;
    border-top: 1px solid var(--np-border);
}

/* ── Output section ──────────────────────────────────────── */

.ptb-output-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Explicit [hidden] guard — prevents display:flex overriding UA stylesheet */
.ptb-output-section[hidden] { display: none !important; }

/* ── Stats bar ───────────────────────────────────────────── */

.ptb-stats-bar {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--np-bg-card);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-sm, 8px);
    flex-wrap: wrap;
}

.ptb-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ptb-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--np-text-muted);
}

.ptb-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--np-text-primary);
}

/* ── Variables card ──────────────────────────────────────── */

.ptb-vars-card {
    background: var(--np-bg-card);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-lg, 14px);
    overflow: hidden;
}

/* Inline variant — sits inside the editor card, always visible */
.ptb-vars-card--inline {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.09);
}

/* ── Add-variable control ────────────────────────────────── */

.ptb-var-add {
    display: flex;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem 0.35rem;
}

.ptb-add-var-input {
    flex: 1;
    min-width: 0;
    background: var(--np-bg-input);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 9px;
    color: var(--np-text-primary);
    font: inherit;
    font-size: 0.86rem;
    padding: 0 0.8rem;
    min-height: 40px;
    outline: none;
    transition: border-color 0.13s, box-shadow 0.13s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.24);
}

.ptb-add-var-input::placeholder { color: var(--np-text-muted); }

.ptb-add-var-input:hover:not(:focus) { border-color: rgba(255,255,255,0.22); }

.ptb-add-var-input:focus {
    border-color: var(--np-border-focus, rgba(99,102,241,0.5));
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

.ptb-add-var-input[aria-invalid="true"] {
    border-color: var(--np-error-border, #f87171);
    box-shadow: 0 0 0 3px var(--np-error-dim, rgba(248,113,113,0.12));
}

.ptb-var-add .ptb-btn { min-height: 40px; flex-shrink: 0; }

.ptb-inline-error {
    margin: 0;
    padding: 0 1.25rem 0.35rem;
    font-size: 0.8rem;
    color: #fca5a5;
    line-height: 1.4;
}

.ptb-vars-empty {
    font-size: 0.82rem;
    color: var(--np-text-muted);
    padding: 0.5rem 0;
    margin: 0;
}

.ptb-vars-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--np-border);
}

.ptb-vars-title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--np-text-muted);
}

.ptb-vars-summary {
    font-size: 0.8125rem;
    color: var(--np-text-secondary);
}

.ptb-vars-list {
    padding: 0.5rem 1.25rem;
    min-height: 2rem;
}

/* ── Variable row ────────────────────────────────────────── */

.ptb-var-row {
    display: grid;
    grid-template-columns: minmax(120px, 150px) 1fr auto;
    gap: 0.75rem;
    align-items: start;   /* top-align badge/controls with textarea */
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ptb-var-row:last-child { border-bottom: none; }

.ptb-var-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
    padding-top: 0.15rem;
}

/* ── Variable controls (reorder / remove) ────────────────── */

.ptb-var-ctrls {
    display: flex;
    gap: 0.25rem;
    padding-top: 0.15rem;
}

.ptb-var-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    background: rgba(255,255,255,0.03);
    color: var(--np-text-secondary);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
    outline: none;
}

.ptb-var-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.2);
    color: var(--np-text-primary);
}

.ptb-var-btn:focus-visible {
    outline: 2px solid var(--np-accent, #6366f1);
    outline-offset: 2px;
}

.ptb-var-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.ptb-var-btn--remove:hover:not(:disabled) {
    background: rgba(248,113,113,0.12);
    border-color: rgba(248,113,113,0.4);
    color: #fca5a5;
}

.ptb-var-name {
    font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--np-accent-light, #818cf8);
    background: rgba(99,102,241,0.09);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 5px;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.ptb-var-count {
    font-size: 0.75rem;
    color: var(--np-text-muted);
    white-space: nowrap;
}

/* textarea — used for all variable sample value inputs to preserve multiline content */
.ptb-var-input {
    width: 100%;
    background: var(--np-bg-input);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color: var(--np-text-primary);
    font: inherit;
    font-size: 0.86rem;
    line-height: 1.5;
    padding: 0.38rem 0.65rem;
    outline: none;
    resize: vertical;
    min-height: 2.6rem;
    transition: border-color 0.13s, box-shadow 0.13s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.24);
}

.ptb-var-input::placeholder { color: var(--np-text-muted); }

.ptb-var-input:hover:not(:focus) {
    border-color: rgba(255,255,255,0.2);
}

.ptb-var-input:focus {
    border-color: var(--np-border-focus, rgba(99,102,241,0.5));
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* ── Output card ─────────────────────────────────────────── */

.ptb-output-card {
    background: var(--np-bg-card);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-lg, 14px);
    overflow: hidden;
}

/* ── Tabs ────────────────────────────────────────────────── */

.ptb-output-header {
    border-bottom: 1px solid var(--np-border);
}

.ptb-tabs {
    display: flex;
    padding: 0 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.ptb-tabs::-webkit-scrollbar { display: none; }

.ptb-tab {
    flex-shrink: 0;
    padding: 0.75rem 0.9rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--np-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.13s, border-color 0.13s;
    outline: none;
    white-space: nowrap;
}

.ptb-tab:hover { color: var(--np-text-secondary); }

.ptb-tab:focus-visible {
    outline: 2px solid var(--np-accent, #6366f1);
    outline-offset: -2px;
    border-radius: 4px;
}

.ptb-tab.is-active {
    color: var(--np-text-primary);
    border-bottom-color: var(--np-accent, #6366f1);
    font-weight: 600;
}

/* ── Tab panels ──────────────────────────────────────────── */

.ptb-tab-panel { display: block; }
.ptb-tab-panel[hidden] { display: none; }

/* ── Output textareas ────────────────────────────────────── */

.ptb-output-textarea {
    display: block;
    width: 100%;
    background: rgba(255,255,255,0.02);
    border: none;
    color: var(--np-text-primary);
    font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
    font-size: 0.8125rem;
    line-height: 1.75;
    padding: 1.25rem 1.5rem;
    resize: vertical;
    min-height: 200px;
    outline: none;
    cursor: text;
}

.ptb-output-pre {
    display: block;
    margin: 0;
    background: rgba(255,255,255,0.02);
    color: var(--np-text-primary);
    font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
    font-size: 0.8125rem;
    line-height: 1.75;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    white-space: pre;
    min-height: 100px;
}

/* ── Output actions ──────────────────────────────────────── */

.ptb-output-actions {
    border-top: 1px solid var(--np-border);
    padding: 0.85rem 1.25rem;
}

.ptb-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Clear sits apart from the copy/download cluster */
.ptb-btn--clear { margin-left: auto; }

/* ── Status ──────────────────────────────────────────────── */

.ptb-status {
    min-height: 1.25rem;
    font-size: 0.8125rem;
    color: var(--np-text-secondary);
    text-align: right;
    padding: 0 0.25rem;
    transition: opacity 0.2s;
}

/* ── Mobile ──────────────────────────────────────────────── */

@media (max-width: 640px) {
    .ptb-hero {
        flex-direction: column;
        gap: 1rem;
    }

    .ptb-hero-actions { padding-top: 0; }

    .ptb-editor-card,
    .ptb-vars-card,
    .ptb-output-card { border-radius: 10px; }

    .ptb-var-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 0.5rem;
    }

    .ptb-var-head  { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; gap: 0.4rem; }
    .ptb-var-ctrls { grid-column: 2; grid-row: 1; justify-content: flex-end; }
    .ptb-var-input { grid-column: 1 / -1; grid-row: 2; }

    .ptb-var-add { flex-wrap: wrap; }

    .ptb-output-textarea { font-size: 0.75rem; padding: 1rem; }
    .ptb-output-pre      { font-size: 0.75rem; padding: 1rem; }
}