/* Pinterest Widget Builder - tool-specific styles on top of the shared
 * tools.css primitives. */

:root { --pwb-accent: #e60023; --pwb-accent-dark: #ad081b; --pwb-accent-tint: #fff1f2; }

.page-hero h1 .pwb-hero-mark { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.4rem; color: var(--pwb-accent); }

.pwb-intro { margin: 0 0 14px; color: #475569; font-size: 0.95rem; line-height: 1.55; }

.pwb-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pwb-type {
    font: inherit; font-size: 0.88rem; font-weight: 600;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid #d7dbe0; background: #fff; color: #334155; cursor: pointer;
}
.pwb-type:hover { border-color: var(--pwb-accent); color: var(--pwb-accent-dark); }
.pwb-type.is-active { background: var(--pwb-accent); border-color: var(--pwb-accent); color: #fff; }

.pwb-panel[hidden] { display: none; }
.pwb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.pwb-field { display: flex; flex-direction: column; min-width: 0; }
.pwb-field-wide { grid-column: 1 / -1; }
.pwb-field .text-input { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
.pwb-label { display: block; font-weight: 600; font-size: 0.9rem; color: #333; margin-bottom: 6px; }
.pwb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pwb-pill {
    font: inherit; font-size: 0.82rem; font-weight: 600;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid #d7dbe0; background: #fff; color: #334155; cursor: pointer;
}
.pwb-pill.is-active { background: var(--pwb-accent-tint); border-color: var(--pwb-accent); color: var(--pwb-accent-dark); }
.pwb-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #333; }
.pwb-save-one[hidden], .pwb-save-notHover[hidden], .pwb-save-count[hidden] { display: none; }
.pwb-error { margin: 10px 0 0; color: #b91c1c; font-size: 0.9rem; }
.pwb-error[hidden] { display: none; }

.pwb-output-card {
    margin: 18px 0 4px;
    background: #fff; border: 1px solid #e6e8eb; border-radius: 14px;
    padding: 18px 20px 18px;
}
.pwb-output-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pwb-output-title { margin: 0; font-size: 1rem; font-weight: 700; color: #1f2937; }
.pwb-code {
    width: 100%; box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem; line-height: 1.5;
    padding: 12px 14px; border: 1px solid #d7dbe0; border-radius: 10px;
    background: #f8fafc; color: #1f2937; resize: vertical; white-space: pre; overflow: auto;
}
.pwb-note { margin: 8px 0 0; font-size: 0.84rem; color: #64748b; line-height: 1.5; }
.pwb-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 8px; }
.pwb-preview-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: #1f2937; }
.pwb-preview {
    min-height: 96px; padding: 16px; border: 1px dashed #d7dbe0; border-radius: 10px;
    background: #fafbfc; overflow: auto;
}
.pwb-preview-hint { margin: 0; font-size: 0.86rem; color: #94a3b8; }
.pwb-preview-link { font-size: 0.95rem; word-break: break-all; }
.pwb-preview-link a { color: var(--pwb-accent-dark); font-weight: 600; }

@media (max-width: 640px) {
    .pwb-grid { grid-template-columns: 1fr; }
}