/* Retrofit Twin components: nav, dividers, buttons, forms, and every page-specific piece. */

/* --- TOP NAV ------------------------------------------------------------------ */

.nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}
.nav__inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	height: var(--nav-height);
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 0 var(--s-4);
}
@media (min-width: 640px) {
	.nav__inner { padding: 0 var(--s-8); }
}

.nav__brand {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	height: var(--nav-height);
}
.nav__brand img { display: block; width: auto; height: 18px; }

/* Desktop link row. */
.nav__links { display: flex; align-items: center; gap: var(--s-1); }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }

.navlink {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	height: var(--nav-height);
	padding: 0 var(--s-3);
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--ink-2);
	border-bottom: 2px solid transparent;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.navlink:hover { color: var(--ink); }
.navlink.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.navlink--danger:hover { color: var(--bad); }

/* Account button + its dropdown on the right. */
.me__name { font-size: var(--t-sm); color: var(--ink-2); max-width: 10rem; }

.account { position: relative; }
.account__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-1) var(--s-2);
	color: var(--ink-2);
	border-radius: var(--r-field);
}
.account__btn:hover { background: var(--inset); }
/* Caret hints that the button opens a menu; flips when it's open. */
.account__caret { color: var(--ink-3); transition: transform var(--dur-fast) var(--ease); }
.account__btn[aria-expanded="true"] .account__caret { transform: rotate(180deg); }

.account__menu {
	position: absolute;
	top: calc(100% + var(--s-1));
	right: 0;
	min-width: 12rem;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: var(--s-2);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--r-field);
	box-shadow: var(--shadow-pop);
}
.account__menu .navlink {
	width: 100%;
	height: var(--tap);
	padding: 0 var(--s-3);
	border-bottom: 0;
	border-radius: var(--r-field);
}
.account__menu .navlink:hover { background: var(--inset); }
.account__menu .navlink.is-active { background: var(--accent-tint); }
.account__menu .caption { padding: var(--s-1) var(--s-3) 0; }

/* Mobile: the <picture> swaps the wordmark for the square icon; drop tab labels so the bar fits. */
@media (max-width: 767px) {
	.nav__brand img { height: 28px; }
	.nav__links .navlink__label, .account__btn .me__name { display: none; }
	.nav__links .navlink { padding: 0 var(--s-2); }
}

/* --- PAGE FRAME -------------------------------------------------------------- */

.main { padding: var(--s-2) 0; }

.page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-4);
	padding-bottom: var(--s-5);
	margin-bottom: var(--s-6);
	border-bottom: 1px solid var(--rule);
}
.page-head.hello h1 { font-size: var(--t-2xl); line-height: var(--lh-2xl); letter-spacing: var(--ls-2xl); }

/* --- DIVIDER LAYOUT -------------------------------------------------------------- */
/* No cards. A page is a stack of sections split by one hairline; a section can split into columns the same way. */

.board { display: flex; flex-direction: column; }
.board > * {
	padding: var(--s-8) 0;
	border-top: 1px solid var(--rule);
}
.board > *:first-child { padding-top: 0; border-top: 0; }
.board > *:last-child { padding-bottom: 0; }

.split {
	display: grid;
	gap: var(--s-6);
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
/* Let columns shrink below their content so charts and long text never push the page wide. */
.split > * { min-width: 0; }
.split > * + * { border-left: 1px solid var(--rule); padding-left: var(--s-6); }
@media (max-width: 767px) {
	.split { grid-template-columns: minmax(0, 1fr); }
	.split > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: var(--s-6); }
}

/* The uppercase label that opens most sections. */
.section-title { margin-bottom: var(--s-5); }

/* --- BUTTONS --------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: var(--tap);
	padding: 0 var(--s-4);
	border: 1px solid transparent;
	border-radius: var(--r-field);
	font-size: var(--t-sm);
	font-weight: 550;
	white-space: nowrap;
	transition: background-color var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease);
}
.btn:disabled, .btn.is-disabled { opacity: 0.45; pointer-events: none; }

/* The one filled control on a page. */
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--ghost { color: var(--ink-2); }
.btn--ghost:hover:not(:disabled) { background: var(--inset); color: var(--ink); }

.btn--outline { border-color: var(--rule); color: var(--ink); }
.btn--outline:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.btn--danger { border-color: var(--bad); color: var(--bad); }
.btn--danger:hover:not(:disabled) { background: var(--bad); color: var(--n-100); }

.btn--sm { min-height: 1.875rem; padding: 0 var(--s-3); font-size: var(--t-xs); }
.btn--icon { padding: 0; width: var(--tap); }
.btn--icon.btn--sm { width: 1.875rem; }
.btn--round { border-radius: var(--r-pill); }
.btn--block { width: 100%; }

/* --- FORMS --------------------------------------------------------------------- */

/* <label class="field"><span>Tilt</span><input></label> */
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field > span:first-child { font-size: var(--t-xs); font-weight: 550; color: var(--ink-2); }
.field__hint { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--ink-3); }
.field--wide { grid-column: 1 / -1; }

.fields { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields--single { grid-template-columns: 1fr; }
@media (max-width: 639px) { .fields { grid-template-columns: 1fr; } }

.config-grid { grid-column: 1 / -1; }
.config-grid:empty { display: none; }

/* --- ALERT --------------------------------------------------------------------- */

.alert {
	padding: var(--s-3) var(--s-4);
	font-size: var(--t-sm);
	line-height: var(--lh-sm);
	border: 1px solid var(--rule);
	border-radius: var(--r-field);
}
.alert--error   { background: var(--bad-bg); border-color: rgb(162 64 59 / 0.25); color: var(--bad); }
.alert--success,
.alert--ok      { background: var(--ok-bg); color: var(--ink); }
.page__alert, .settings__alert, .modal__alert { margin-bottom: var(--s-4); }

/* --- DIALOG CONTENTS ----------------------------------------------------------- */

.modal__body { position: relative; padding: var(--s-6); }
.modal__head { margin-bottom: var(--s-5); padding-right: var(--s-8); }
.modal__head p { margin-top: var(--s-1); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.modal__close { position: absolute; top: var(--s-3); right: var(--s-3); }
.modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: var(--s-2);
	margin-top: var(--s-6);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule);
}

/* --- PILL --------------------------------------------------------------------- */
/* One shape, one white glyph. The variant sets --pill and nothing else changes. */

.pill {
	--pill: var(--n-82);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--size, 1.7rem);
	height: var(--size, 1.7rem);
	border-radius: var(--r-field);
	background: var(--pill);
	color: var(--pill-on);
}
.pill--red    { --pill: var(--pill-red); }
.pill--blue   { --pill: var(--pill-blue); }
.pill--green  { --pill: var(--pill-green); }
.pill--yellow { --pill: var(--pill-amber); }
.pill--slate  { --pill: var(--pill-slate); }

/* --- AVATAR, SPINNER, STATES ------------------------------------------------------ */

.avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--size, 2rem);
	height: var(--size, 2rem);
	border-radius: var(--r-pill);
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 550;
	font-size: calc(var(--size, 2rem) * 0.42);
	line-height: 1;
}

.spinner {
	width: var(--size, 1.25rem);
	height: var(--size, 1.25rem);
	border: 2px solid var(--rule);
	border-top-color: var(--accent);
	border-radius: var(--r-pill);
	animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.loading { display: grid; place-items: center; padding: var(--s-16) 0; }

.empty { padding: var(--s-16) var(--s-4); text-align: center; color: var(--ink-3); }
.empty p + p { margin-top: var(--s-1); font-size: var(--t-xs); line-height: var(--lh-xs); }
.empty__lead { color: var(--ink-2); }

/* Empty states inside a section that hasn't got data yet. */
.kpi__empty { display: flex; align-items: center; min-height: 2.5rem; margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-3); }
.kpi__sub { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--t-xs); color: var(--ink-3); }

/* --- AUTH PAGES --------------------------------------------------------------- */

.auth { display: grid; place-items: center; min-height: 100dvh; padding: var(--s-4); background: var(--bg); }
.auth__card {
	width: 100%;
	max-width: 22rem;
	padding: var(--s-8);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--r-field);
}
.auth__brand { display: block; margin-bottom: var(--s-6); }
.auth__brand img { display: block; width: auto; height: 22px; }
/* Mobile: the <picture> swaps the wordmark for the square icon, same as the nav. */
@media (max-width: 767px) {
	.auth__brand img { height: 44px; }
}
.auth__card > p { margin-top: var(--s-1); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.auth__form { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.auth__back { display: inline-block; margin-top: var(--s-5); font-size: var(--t-sm); color: var(--ink-2); }
.auth__back:hover { color: var(--ink); text-decoration: underline; }

/* --- OVERVIEW: HERO --------------------------------------------------------------- */

.hello .subtitle { font-size: var(--t-md); }

/* --- OVERVIEW: LIVE POWER DIAL ------------------------------------------------- */

.dial { position: relative; container-type: inline-size; max-width: 20rem; margin: var(--s-2) auto 0; }
.dial__svg { width: 100%; height: auto; overflow: visible; }
.dial__track { fill: none; stroke: var(--rule); stroke-width: 10; stroke-linecap: round; }
.dial__fill {
	fill: none;
	stroke: var(--accent);
	stroke-width: 10;
	stroke-linecap: round;
	transition: stroke-dasharray var(--dur) var(--ease);
}
.dial__fill[data-level="high"] { stroke: var(--d-import); }
.dial__value {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
}
.dial__scale { display: flex; justify-content: space-between; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--ink-3); }

/* Sub-labels inside a section ("Hourly", "Top appliances"). */
p.eyebrow.head { margin-top: var(--s-5); margin-bottom: var(--s-2); }

.devices { margin-top: var(--s-2); }

/* --- OVERVIEW: WEATHER ------------------------------------------------------------ */

.now { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) 0; }
.hours { display: flex; gap: var(--s-4); overflow-x: auto; padding-bottom: var(--s-1); }
.hours__col { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); flex-shrink: 0; }
.notes { margin-top: var(--s-4); }
.notes__text { margin-top: var(--s-1); }

/* --- OVERVIEW: ROOM CLIMATE (temp + humidity per room) --------------------------- */

.room-card__count { color: var(--ink-3); }
.room-card .head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.room-card .body { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.room-card .stage { flex: 1; text-align: center; min-width: 0; }
.room-card__slide { display: flex; flex-direction: column; gap: var(--s-5); }
.room-card__reading .eyebrow { margin-bottom: var(--s-2); }
.room-card__slide .name { color: var(--ink-2); }

/* Tint each reading: temperature amber, humidity green. */
.room-card__reading--temp .eyebrow, .room-card__reading--temp .metric { color: var(--pill-amber); }
.room-card__reading--hum .eyebrow, .room-card__reading--hum .metric { color: var(--pill-blue); }

/* --- OVERVIEW: SOLAR WINDOW ------------------------------------------------------- */

.solar__lead { margin: var(--s-3) 0; }
.solar__headline { font-size: var(--t-lg); line-height: var(--lh-lg); }
.solar__window { margin: var(--s-2) 0; color: var(--brand); }
.solar__note { margin-top: var(--s-1); }

/* --- OVERVIEW: INSIGHTS / ALERTS ------------------------------------------------- */

.insights { margin-top: var(--s-3); }
.insight { align-items: flex-start; }
.insight__line { font-size: var(--t-sm); font-weight: 600; }
.insight__text { display: flex; flex-direction: column; gap: 2px; }

/* --- OVERVIEW: METER DAY -------------------------------------------------------- */

.meter + .meter { margin-top: var(--s-6); }
.head__date { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-1); }
.picker { width: auto; min-height: 1.875rem; padding: var(--s-1) var(--s-2); font-size: var(--t-xs); }

/* Day totals under the chart: small uppercase label, modest number beneath it. */
.meter__metrics { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); margin-top: var(--s-5); }
.stat__val { margin-top: 2px; font-size: var(--t-lg); font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat__unit { margin-left: 0.2em; font-size: var(--t-2xs); font-weight: 500; color: var(--ink-3); }
@media (max-width: 639px) {
	.meter__metrics { gap: var(--s-3) var(--s-6); }
	.meter__metrics .stat { flex: 1 0 40%; }
}

.keys { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-3); }
.key { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--ink-2); }
.key__dot { width: 0.625rem; height: 0.625rem; border-radius: 3px; background: var(--dot, var(--rule)); }

.flow__plot { position: relative; height: 260px; margin-top: var(--s-2); }
/* Shorter on phones so the chart isn't stretched tall in a narrow column. */
@media (max-width: 639px) {
	.flow__plot { height: 200px; }
}
.flow__plot--empty {
	display: grid;
	place-items: center;
	gap: var(--s-2);
	height: 160px;
	border: 1px dashed var(--rule);
	border-radius: var(--r-field);
	color: var(--ink-3);
}

/* --- DEVICES ------------------------------------------------------------------- */
/* One row per device, built in devices.js. Split by a hairline, no fill, no shadow. */

.device { gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.device:first-child { border-top: 0; padding-top: 0; }
.device h2 { font-size: var(--t-md); }
.device__actions { gap: var(--s-2); flex-shrink: 0; }
.device__delete:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }

/* --- SETTINGS ----------------------------------------------------------------- */

.settings__note { margin-top: var(--s-2); }