/* Prioritization Calculator — scoped styles */

.framework-tabs {
    display: flex;
    gap: 0.25rem;
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
    flex-wrap: wrap;
}

.tab-btn {
    background: transparent;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    color: var(--color-text-secondary, #94a3b8);
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
    border-bottom: none;
    transition: all 0.15s ease;
    font-family: inherit;
}

.tab-btn:hover {
    color: var(--color-text-primary, #f1f5f9);
}

.tab-btn.active {
    background: var(--color-surface, rgba(255, 255, 255, 0.06));
    color: var(--color-accent, #60a5fa);
    border-color: var(--color-accent, #60a5fa);
}

.framework-panel {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--color-surface, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    border-radius: 0 var(--radius-lg, 10px) var(--radius-lg, 10px) var(--radius-lg, 10px);
}

.framework-panel h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--color-text-primary, #f1f5f9);
}

.framework-desc {
    font-size: 0.92rem;
    color: var(--color-text-secondary, #94a3b8);
    line-height: 1.55;
    margin-bottom: 1rem;
}

.items-table-wrap {
    overflow-x: auto;
    background: var(--color-background, #0f1117);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
    border-radius: var(--radius-md, 8px);
    margin-bottom: 1rem;
}

.items-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--color-text-primary, #f1f5f9);
    font-size: 0.9rem;
}

.items-table thead th {
    padding: 0.7rem 0.75rem;
    text-align: left;
    font-weight: 600;
    background: var(--color-surface, rgba(255, 255, 255, 0.03));
    border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    white-space: nowrap;
}

.items-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.04));
}

.items-table input[type="text"],
.items-table input[type="number"],
.items-table select {
    background: var(--color-background, #0f1117);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    color: var(--color-text-primary, #f1f5f9);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.9rem;
    font-family: inherit;
    min-width: 100px;
}

.items-table input[type="text"] {
    min-width: 200px;
    width: 100%;
}

.items-table input:focus,
.items-table select:focus {
    outline: 2px solid var(--color-accent, #60a5fa);
    outline-offset: 1px;
    border-color: var(--color-accent, #60a5fa);
}

.score-cell {
    text-align: right;
    font-weight: 700;
    color: var(--color-accent, #60a5fa);
    font-variant-numeric: tabular-nums;
}

.remove-row-btn {
    background: transparent;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    color: var(--color-text-tertiary, #64748b);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.remove-row-btn:hover {
    border-color: var(--color-danger, #ef4444);
    color: var(--color-danger, #ef4444);
}

.add-row-btn {
    background: transparent;
    border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.2));
    color: var(--color-text-secondary, #94a3b8);
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.15s ease;
}

.add-row-btn:hover {
    border-color: var(--color-accent, #60a5fa);
    color: var(--color-accent, #60a5fa);
}

.tool-actions {
    max-width: 1100px;
    margin: 1.25rem auto;
    padding: 0 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tool-actions.compact { margin: 0.5rem auto; }

.moscow-must { background: linear-gradient(90deg, rgba(239, 68, 68, 0.06), transparent); }
.moscow-should { background: linear-gradient(90deg, rgba(250, 204, 21, 0.06), transparent); }
.moscow-could { background: linear-gradient(90deg, rgba(74, 222, 128, 0.06), transparent); }
.moscow-wont { background: linear-gradient(90deg, rgba(100, 116, 139, 0.06), transparent); }

.framework-info {
    max-width: 900px;
    margin: 3rem auto 0;
}

.framework-info h2 {
    font-size: 1.35rem;
    color: var(--color-text-primary, #f1f5f9);
    margin-bottom: 1rem;
}

.framework-info details {
    background: var(--color-surface, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 8px);
    padding: 1rem 1.2rem;
    margin-bottom: 0.5rem;
}

.framework-info summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-primary, #f1f5f9);
}

.framework-info ol {
    margin-top: 0.75rem;
    padding-left: 1.25rem;
    color: var(--color-text-secondary, #cbd5e1);
    line-height: 1.55;
}

.framework-info li { margin-bottom: 0.35rem; }

body.embed-mode .framework-info { display: none; }
body.embed-mode .tool-faq { display: none; }
body.embed-mode .related-tool-cta { display: none; }

@media (max-width: 640px) {
    .framework-panel { padding: 1rem; }
    .items-table thead th, .items-table tbody td { padding: 0.4rem 0.4rem; font-size: 0.82rem; }
    .items-table input[type="text"] { min-width: 120px; }
    .items-table input[type="number"], .items-table select { min-width: 60px; }
}