/* Smart Solar Calculator — scoped styles */
.ssc-root {
	--ssc-accent: #f59e0b;
	--ssc-ink: #1f2937;
	--ssc-muted: #6b7280;
	--ssc-line: #e5e7eb;
	--ssc-bg: #ffffff;
	--ssc-soft: #f9fafb;
	--ssc-warn-bg: #fffbeb;
	--ssc-warn-line: #fcd34d;
	--ssc-radius: 14px;
	color: var(--ssc-ink);
	font-family: inherit;
	line-height: 1.7;
	max-width: 920px;
	margin: 0 auto;
	box-sizing: border-box;
}
.ssc-root *, .ssc-root *::before, .ssc-root *::after { box-sizing: border-box; }
.ssc-root [hidden] { display: none !important; }

.ssc-card {
	background: var(--ssc-bg);
	border: 1px solid var(--ssc-line);
	border-radius: var(--ssc-radius);
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .04);
}

/* header */
.ssc-header { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.ssc-sun {
	flex: 0 0 52px; height: 52px; border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--ssc-accent) 0 38%, transparent 40%),
		repeating-conic-gradient(var(--ssc-accent) 0 8deg, transparent 8deg 30deg);
	opacity: .95;
}
.ssc-title { margin: 0 0 2px; font-size: 1.35rem; line-height: 1.4; color: var(--ssc-ink); }
.ssc-sub { margin: 0; color: var(--ssc-muted); font-size: .92rem; }

/* sections */
.ssc-section { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.ssc-section legend {
	display: flex; align-items: center; gap: 10px; padding: 0;
	font-weight: 700; font-size: 1.05rem; margin-bottom: 12px;
}
.ssc-step {
	display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--ssc-accent); color: #fff; font-size: .9rem;
}

/* system type cards */
.ssc-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ssc-type { position: relative; cursor: pointer; display: block; margin: 0; }
.ssc-type input { position: absolute; opacity: 0; pointer-events: none; }
.ssc-type-body {
	display: flex; flex-direction: column; gap: 4px; height: 100%;
	border: 2px solid var(--ssc-line); border-radius: 12px; padding: 14px;
	transition: border-color .15s, background .15s;
}
.ssc-type-body strong { font-size: 1rem; }
.ssc-type-body small { color: var(--ssc-muted); font-size: .82rem; line-height: 1.6; }
.ssc-type input:checked + .ssc-type-body {
	border-color: var(--ssc-accent);
	background: color-mix(in srgb, var(--ssc-accent) 8%, #fff);
}
.ssc-type input:focus-visible + .ssc-type-body { outline: 3px solid color-mix(in srgb, var(--ssc-accent) 40%, transparent); outline-offset: 2px; }

/* tabs */
.ssc-tabs { display: inline-flex; background: var(--ssc-soft); border: 1px solid var(--ssc-line); border-radius: 10px; padding: 4px; margin-bottom: 14px; gap: 4px; }
.ssc-root .ssc-tab {
	border: 0; background: transparent; padding: 7px 16px; border-radius: 7px; cursor: pointer;
	font: inherit; font-size: .9rem; color: var(--ssc-muted); box-shadow: none; text-transform: none; letter-spacing: 0;
}
.ssc-root .ssc-tab.is-active { background: #fff; color: var(--ssc-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* appliance rows */
.ssc-row { display: grid; grid-template-columns: 2.2fr 1fr .7fr 1fr .9fr 36px; gap: 8px; align-items: center; margin-bottom: 8px; }
.ssc-row-head { font-size: .8rem; color: var(--ssc-muted); margin-bottom: 4px; }
.ssc-row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; }
.ssc-cell { display: block; margin: 0; min-width: 0; }
.ssc-cell-l { display: none; font-size: .75rem; color: var(--ssc-muted); margin-bottom: 2px; }
.ssc-motor { display: flex; align-items: center; gap: 6px; font-size: .85rem; margin: 0; cursor: pointer; }
.ssc-motor-txt { display: none; }
.ssc-root .ssc-remove {
	width: 36px; height: 36px; border: 1px solid var(--ssc-line); border-radius: 8px; background: #fff;
	color: var(--ssc-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0;
}
.ssc-root .ssc-remove:hover { color: #dc2626; border-color: #fca5a5; }

/* inputs */
.ssc-root input[type=text], .ssc-root input[type=tel], .ssc-root select, .ssc-root textarea {
	width: 100%; min-height: 40px; padding: 8px 10px; margin: 0;
	border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: var(--ssc-ink);
	font: inherit; font-size: .95rem; box-shadow: none;
}
.ssc-root input:focus, .ssc-root select:focus, .ssc-root textarea:focus {
	outline: none; border-color: var(--ssc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ssc-accent) 25%, transparent);
}
.ssc-root input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ssc-accent); margin: 0; }
.ssc-preset { max-width: 280px; }

.ssc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.ssc-field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.ssc-label { font-size: .88rem; font-weight: 600; }
.ssc-hint { color: var(--ssc-muted); font-size: .8rem; line-height: 1.6; display: block; }
.ssc-span2 { grid-column: 1 / -1; }

/* buttons */
.ssc-root .ssc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; min-height: 50px; padding: 12px 20px; border: 0; border-radius: 10px;
	background: var(--ssc-accent); color: #fff; font: inherit; font-weight: 700; font-size: 1.02rem;
	cursor: pointer; text-transform: none; letter-spacing: 0; transition: filter .15s;
}
.ssc-root .ssc-btn:hover { filter: brightness(1.06); }
.ssc-root .ssc-btn:disabled { opacity: .75; cursor: progress; }
.ssc-root .ssc-btn.is-loading::before {
	content: ""; width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; animation: ssc-spin .8s linear infinite;
}
@keyframes ssc-spin { to { transform: rotate(360deg); } }
.ssc-root .ssc-btn-ghost {
	padding: 8px 14px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #fff;
	color: var(--ssc-ink); font: inherit; font-size: .9rem; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.ssc-root .ssc-btn-ghost:hover { border-color: var(--ssc-accent); }

.ssc-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; font-size: .92rem; }
.ssc-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 8px; padding: 14px; margin: 0; }
.ssc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* results */
.ssc-out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.ssc-out-head h3 { margin: 0; font-size: 1.2rem; }
.ssc-badge { background: color-mix(in srgb, var(--ssc-accent) 14%, #fff); color: var(--ssc-ink); border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 600; }

.ssc-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ssc-stat { background: var(--ssc-soft); border: 1px solid var(--ssc-line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ssc-stat.is-accent { border-color: color-mix(in srgb, var(--ssc-accent) 45%, #fff); background: color-mix(in srgb, var(--ssc-accent) 6%, #fff); }
.ssc-stat-label { font-size: .8rem; color: var(--ssc-muted); }
.ssc-stat-value { font-size: 1.15rem; font-weight: 700; line-height: 1.5; }
.ssc-stat-sub { font-size: .8rem; color: var(--ssc-muted); }

.ssc-block { margin-top: 18px; }
.ssc-block h4 { margin: 0 0 8px; font-size: 1rem; }
.ssc-block ul { margin: 0; padding-inline-start: 20px; }
.ssc-block li { margin-bottom: 4px; font-size: .93rem; }
.ssc-warn { background: var(--ssc-warn-bg); border: 1px solid var(--ssc-warn-line); border-radius: 10px; padding: 12px 16px; }

.ssc-table-wrap { overflow-x: auto; }
.ssc-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0; }
.ssc-table th, .ssc-table td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--ssc-line); vertical-align: top; }
.ssc-table th { font-size: .82rem; color: var(--ssc-muted); font-weight: 600; background: var(--ssc-soft); }
.ssc-table tr.is-total td { font-weight: 700; border-bottom: 0; }
.ssc-note { display: block; color: var(--ssc-muted); font-size: .8rem; margin-top: 2px; }

.ssc-changes strong { font-weight: 600; }

.ssc-details { margin-top: 18px; font-size: .88rem; color: var(--ssc-muted); }
.ssc-details summary { cursor: pointer; font-weight: 600; }
.ssc-details ul { margin: 8px 0 0; padding-inline-start: 20px; }
.ssc-disclaimer { font-size: .82rem; color: var(--ssc-muted); margin: 14px 0; }
.ssc-muted { color: var(--ssc-muted); font-size: .9rem; margin-top: 16px; }
.ssc-lead h3 { margin: 0 0 14px; font-size: 1.1rem; }
.ssc-lead .ssc-grid { margin-bottom: 14px; }

/* mobile */
@media (max-width: 680px) {
	.ssc-card { padding: 16px; }
	.ssc-types { grid-template-columns: 1fr; }
	.ssc-grid { grid-template-columns: 1fr; }
	.ssc-row-head { display: none; }
	.ssc-row {
		grid-template-columns: 1fr 1fr 1fr; padding: 10px; border: 1px solid var(--ssc-line); border-radius: 10px; position: relative;
	}
	.ssc-row input[data-k=name] { grid-column: 1 / -1; padding-inline-end: 44px; }
	.ssc-row .ssc-motor { grid-column: 1 / -1; }
	.ssc-motor-txt { display: inline; }
	.ssc-cell-l { display: block; }
	.ssc-row .ssc-remove { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; }
	.ssc-preset { max-width: none; }
}

/* summary, recommendations */
.ssc-summary { font-size: 1.02rem; line-height: 1.9; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--ssc-accent) 7%, #fff); border-inline-start: 4px solid var(--ssc-accent); }
.ssc-subhead { margin: 18px 0 10px; font-size: 1rem; }
.ssc-adv { margin-top: 22px; border: 1px solid var(--ssc-line); border-radius: 12px; padding: 4px 18px 16px; background: var(--ssc-soft); }
.ssc-call { font-weight: 700; margin: 0 0 14px; }
.ssc-table td .ssc-note:first-child { margin: 0 0 2px; }
.ssc-table td.ssc-num { white-space: nowrap; }
@media (max-width: 680px) {
	.ssc-table th, .ssc-table td { padding: 8px 6px; font-size: .85rem; }
	.ssc-table .ssc-unit { display: none; }
	.ssc-table td.ssc-span { white-space: nowrap; }
}