/* SunHarvest UI — design tokens per the dataviz reference palette (validated). */ /* Every token carries its light and dark value; which one is used follows the colour scheme. The scheme is the device's own (color-scheme: light dark) unless Settings › Appearance has stamped data-theme on , which sunharvest.js keeps in sync with localStorage. */ :root { --sh-tabbar-h: 64px; /* the phone's bottom tab bar, without the safe-area inset */ color-scheme: light dark; /* surfaces & ink */ --sh-page: light-dark(#f9f9f7, #0d0d0d); --sh-surface: light-dark(#fcfcfb, #1a1a19); --sh-ink: light-dark(#0b0b0b, #ffffff); --sh-ink-2: light-dark(#52514e, #c3c2b7); --sh-muted: #898781; --sh-grid: light-dark(#e1e0d9, #2c2c2a); --sh-baseline: light-dark(#c3c2b7, #383835); --sh-border: light-dark(rgba(11, 11, 11, 0.10), rgba(255, 255, 255, 0.10)); /* skeleton shimmer (placeholder blocks while a section loads) */ --sh-skel-a: light-dark(rgba(11, 11, 11, 0.07), rgba(255, 255, 255, 0.07)); --sh-skel-b: light-dark(rgba(11, 11, 11, 0.13), rgba(255, 255, 255, 0.14)); /* entity colors (categorical slots, fixed) */ --sh-home: light-dark(#2a78d6, #3987e5); /* slot 1 blue */ --sh-solar: light-dark(#eb6834, #d95926); /* slot 2 orange */ --sh-battery: light-dark(#1baf7a, #199e70); /* slot 3 aqua */ /* diverging pair (grid flow) */ --sh-export: light-dark(#2a78d6, #3987e5); /* blue pole */ --sh-import: light-dark(#e34948, #e66767); /* red pole */ /* battery meter ramp (aqua on lighter aqua) */ --sh-meter-track: light-dark(#d3f0e4, #123a2c); /* status */ --sh-good: #0ca30c; --sh-warning: #fab219; --sh-serious: #ec835a; --sh-critical: #d03b3b; --sh-delta-good-text: light-dark(#006300, #0ca30c); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--sh-page); color: var(--sh-ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.45; } a { color: inherit; } /* ── App shell ─────────────────────────────────────────────── */ .sh-shell { display: flex; min-height: 100vh; } .sh-nav { width: 208px; flex-shrink: 0; padding: 20px 14px; border-right: 1px solid var(--sh-border); display: flex; flex-direction: column; gap: 4px; } .sh-nav-top { display: flex; align-items: center; margin-bottom: 18px; } /* The five destinations: a list in the sidebar, a tab bar on phones (below). */ .sh-nav-links { display: flex; flex-direction: column; gap: 4px; } .sh-nav-links a { display: flex; align-items: center; gap: 10px; } .sh-nav-links .ico { display: inline-flex; color: var(--sh-muted); } .sh-nav-links a.active .ico { color: var(--sh-ink); } .sh-nav-foot { margin-top: auto; display: flex; flex-direction: column; } /* Mobile-only chrome; inert on desktop. */ .sh-conn-mini { display: none; } .sh-logo { color: inherit; text-decoration: none; font-weight: 650; font-size: 17px; letter-spacing: 0.2px; margin: 2px 10px; display: flex; align-items: center; gap: 8px; } .sh-logo .sun { color: var(--sh-solar); } .sh-nav a { text-decoration: none; color: var(--sh-ink-2); padding: 8px 10px; border-radius: 8px; font-size: 14px; } .sh-nav a:hover { background: color-mix(in srgb, var(--sh-ink) 5%, transparent); } .sh-nav a.active { background: color-mix(in srgb, var(--sh-ink) 8%, transparent); color: var(--sh-ink); font-weight: 600; } .sh-nav .spacer { flex: 1; } .sh-conn { font-size: 12px; color: var(--sh-muted); padding: 8px 10px; display: flex; align-items: center; gap: 7px; } .sh-conn .dot, .sh-conn-mini { width: 8px; height: 8px; border-radius: 50%; background: var(--sh-muted); } .sh-conn .dot.ok, .sh-conn-mini.ok { background: var(--sh-good); } .sh-conn .dot.bad, .sh-conn-mini.bad { background: var(--sh-critical); } .sh-main { flex: 1; min-width: 0; padding: 26px 32px 48px; max-width: 1060px; } @media (max-width: 760px) { .sh-shell { flex-direction: column; } /* Sticky top bar: logo + connection dot. The destinations move to a bottom tab bar. */ .sh-nav { width: auto; border-right: none; border-bottom: 1px solid var(--sh-border); padding: 10px 14px; position: sticky; top: 0; z-index: 40; background: var(--sh-page); } .sh-nav-top { margin-bottom: 0; } .sh-logo { margin: 0; } .sh-nav-top .sh-conn-mini { display: block; margin-left: auto; } .sh-nav-foot { display: none; } .sh-nav-links { position: fixed; height: calc(var(--sh-tabbar-h) + env(safe-area-inset-bottom)); box-sizing: border-box; left: 0; right: 0; bottom: 0; z-index: 40; flex-direction: row; gap: 0; background: var(--sh-surface); border-top: 1px solid var(--sh-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } .sh-nav-links a { flex: 1; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 4px; min-height: 44px; font-size: 11px; font-weight: 500; color: var(--sh-muted); } .sh-nav-links a.active { background: none; color: var(--sh-ink); font-weight: 600; } .sh-main { padding: 18px 16px 96px; } .sh-main .sh-dash-bar { bottom: calc(var(--sh-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: 10px; } } /* Pages carry no heading of their own (the menu says where you are); this is the loading placeholder. */ .sh-page-sub { color: var(--sh-muted); font-size: 13px; margin: 0 0 22px; } /* ── Cards & grids ─────────────────────────────────────────── */ .sh-card { background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: 12px; padding: 18px 20px; } .sh-grid { display: grid; gap: 14px; } .sh-grid.kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .sh-section { margin-top: 22px; } /* Label splitting the dashboard into its "live state" and "day so far" groups. */ .sh-sec-head { margin: 28px 0 10px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sh-muted); } .sh-sec-head + .sh-section { margin-top: 0; } .sh-section h2, .sh-card h2 { font-size: 14px; font-weight: 650; color: var(--sh-ink-2); margin: 0 0 10px; text-transform: none; } /* refetch: hold previous render, no skeleton flash */ .sh-refreshing { opacity: 0.55; transition: opacity 0.2s ease; } /* ── Pro (docs/BILLING.md): the tile a Pro figure leaves behind, and Settings › Plan ── */ .sh-pro-tile { text-decoration: none; color: inherit; border-style: dashed; } .sh-pro-tile:hover { border-color: var(--sh-solar); } .sh-pro-tile .value { color: var(--sh-muted); display: flex; align-items: center; height: 31px; margin-top: 6px; } .sh-pro-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; padding: 3px 6px; border-radius: 999px; text-decoration: none; vertical-align: middle; color: var(--sh-solar); background: color-mix(in srgb, var(--sh-solar) 14%, transparent); } .sh-plan-preview { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .sh-plan-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .sh-plan-tier { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .sh-plan-tier.free { color: var(--sh-ink-2); background: color-mix(in srgb, var(--sh-ink) 7%, transparent); } .sh-plan-tier.trial, .sh-plan-tier.paid { color: var(--sh-solar); background: color-mix(in srgb, var(--sh-solar) 14%, transparent); } .sh-plan-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 16px; } .sh-plan-table th { text-align: center; font-size: 12px; color: var(--sh-muted); font-weight: 600; padding: 6px 8px; } .sh-plan-table th:first-child, .sh-plan-table td:first-child { text-align: left; padding-left: 0; } .sh-plan-table td { padding: 8px; border-top: 1px solid var(--sh-grid); text-align: center; color: var(--sh-muted); width: 64px; } .sh-plan-table td:first-child { width: auto; color: var(--sh-ink); } .sh-plan-tick { color: var(--sh-good); font-weight: 700; } .sh-admin-list { margin-top: 12px; } .sh-admin-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--sh-grid); font-size: 13.5px; } .sh-admin-row .who { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sh-admin-row .who strong { overflow: hidden; text-overflow: ellipsis; } .sh-admin-grant { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sh-admin-grant label { font-size: 12px; color: var(--sh-muted); display: flex; gap: 6px; align-items: center; } .sh-admin-grant input[type="text"] { min-width: 160px; } /* Settings › Suggestions: the text keeps its line breaks; the footer holds the counter, the allowance and Send. */ .sh-suggest-text { white-space: pre-wrap; overflow-wrap: anywhere; } .sh-suggest-foot { margin-top: 8px; align-items: center; } .sh-suggest-foot .grow { flex: 1 1 160px; } .sh-invite-link { display: inline-block; margin-top: 4px; font-size: 12px; word-break: break-all; user-select: all; } /* ── Ads (docs/BILLING.md §5): the discreet slot and the between-screens card ── */ .sh-ad { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 10px 14px; border: 1px dashed var(--sh-border); border-radius: 12px; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--sh-solar) 4%, var(--sh-surface)); } .sh-ad:hover { border-color: var(--sh-solar); } .sh-ad-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sh-muted); border: 1px solid var(--sh-border); border-radius: 4px; padding: 1px 5px; } .sh-ad-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .sh-ad-cta { flex-shrink: 0; font-size: 12.5px; font-weight: 650; color: var(--sh-solar); } /* With a network unit in the slot the house creative waits underneath, shown only when Google reports the unit unfilled (it stamps data-ad-status on the ). */ .sh-ad-slot { margin-bottom: 18px; } .sh-ad-slot .sh-ad { margin-bottom: 0; } .sh-ad-net .sh-ad { display: none; } .sh-ad-net:has(ins[data-ad-status="unfilled"]) .sh-ad { display: flex; } .sh-ad-net:has(ins[data-ad-status="unfilled"]) ins { display: none !important; } .sh-interstitial { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--sh-page) 88%, transparent); backdrop-filter: blur(4px); } .sh-interstitial-card { width: min(440px, 100%); background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: 16px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .sh-interstitial-card h2 { margin: 10px 0 8px; font-size: 22px; } .sh-interstitial-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; } .sh-interstitial-card .sh-editor-row { margin-top: 16px; } .sh-interstitial-card a.sh-btn-primary { text-decoration: none; display: inline-block; } /* The standing upgrade line (Components/UpgradeStrip.razor): top of every screen, free and trial only. */ .sh-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-size: 13px; color: var(--sh-ink); background: color-mix(in srgb, var(--sh-solar) 10%, var(--sh-surface)); border: 1px solid color-mix(in srgb, var(--sh-solar) 35%, transparent); } .sh-upgrade:hover { border-color: var(--sh-solar); } .sh-upgrade-state { color: var(--sh-ink-2); } .sh-upgrade-cta { display: inline-flex; align-items: center; gap: 2px; font-weight: 650; color: var(--sh-solar); white-space: nowrap; } .sh-wall { max-width: 560px; margin: 40px auto; } .sh-wall h2 { margin-top: 0; } .sh-wall p { font-size: 14px; line-height: 1.45; } .sh-wall a.sh-btn-primary, .sh-wall a.sh-btn-ghost { text-decoration: none; display: inline-block; } /* ── Skeletons (Components/Skeleton.razor) ───────────────────── A section that is still loading draws its own shape in shimmer blocks, so the page paints at once and each part fills in as its call lands. */ .sh-skel { display: inline-block; vertical-align: middle; height: 13px; border-radius: 6px; background: linear-gradient(90deg, var(--sh-skel-a) 0%, var(--sh-skel-b) 50%, var(--sh-skel-a) 100%); background-size: 200% 100%; animation: sh-shimmer 1.4s ease-in-out infinite; } .sh-skel.big { height: 24px; border-radius: 7px; } .sh-skel.huge { height: 48px; border-radius: 9px; } .sh-skel.bar { display: block; width: 100%; height: 22px; border-radius: 8px; } .sh-skel.plot { display: block; width: 100%; height: 220px; border-radius: 8px; margin: 10px 0 6px; } .sh-skel-rows .sh-skel, .sh-skel-lines .sh-skel { display: block; margin: 13px 0; } .sh-skel-rows .sh-skel:first-child { margin-top: 2px; } .sh-skel-rows .sh-skel:last-child { margin-bottom: 2px; } .sh-skel-lines .sh-skel:first-child { margin-top: 0; } .sh-skel-lines .sh-skel:last-child { margin-bottom: 0; } .sh-tile .label .sh-skel { height: 13px; } .sh-tile .value .sh-skel { margin: 3px 0 1px; } .sh-driving .sh-skel { width: min(320px, 60%); } @keyframes sh-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .sh-skel { animation: none; background: var(--sh-skel-a); } } /* ── Stat tile ─────────────────────────────────────────────── */ .sh-tile .label { font-size: 13px; color: var(--sh-ink-2); display: flex; align-items: center; gap: 7px; } .sh-tile .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .sh-tile .value { font-size: 26px; font-weight: 650; margin-top: 6px; } .sh-tile .value .unit { font-size: 14px; font-weight: 500; color: var(--sh-muted); margin-left: 4px; } .sh-tile .sub { font-size: 12.5px; color: var(--sh-muted); margin-top: 3px; min-height: 18px; } .sh-tile .sub.good { color: var(--sh-delta-good-text); } /* ── Hero + meter ──────────────────────────────────────────── */ .sh-hero-card { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .sh-hero .big { font-size: 54px; font-weight: 650; line-height: 1; } .sh-hero .big .pct { font-size: 26px; color: var(--sh-muted); font-weight: 550; } .sh-hero .cap { font-size: 13px; color: var(--sh-muted); margin-top: 6px; } .sh-meter { flex: 1; min-width: 220px; } .sh-meter .track { height: 14px; border-radius: 7px; background: var(--sh-meter-track); overflow: hidden; } .sh-meter .fill { height: 100%; background: var(--sh-battery); border-radius: 7px; } .sh-meter .legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--sh-muted); margin-top: 6px; } /* ── Status chips ──────────────────────────────────────────── */ .sh-chips { display: flex; gap: 8px; flex-wrap: wrap; } .sh-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--sh-border); border-radius: 999px; color: var(--sh-ink-2); background: var(--sh-surface); } .sh-chip .ico { font-size: 12px; line-height: 1; } .sh-chip.good .ico { color: var(--sh-good); } .sh-chip.warning .ico { color: var(--sh-warning); } .sh-chip.critical .ico { color: var(--sh-critical); } /* ── Charts ────────────────────────────────────────────────── */ .sh-chart-card { padding: 16px 18px 10px; } .sh-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .sh-chart-title { font-size: 14px; font-weight: 650; } .sh-chart-title .unit { color: var(--sh-muted); font-weight: 500; } .sh-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--sh-ink-2); } .sh-legend .key { display: inline-flex; align-items: center; gap: 6px; } .sh-legend button.key { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } .sh-legend .key.off { opacity: 0.45; text-decoration: line-through; } .sh-legend .line { width: 14px; height: 2px; border-radius: 1px; } .sh-legend .rect { width: 10px; height: 10px; border-radius: 3px; } .sh-chart-wrap { position: relative; } .sh-chart-wrap svg { width: 100%; height: auto; display: block; } .sh-hover-layer { position: absolute; display: flex; } .sh-hover-layer .slot { flex: 1; height: 100%; } .sh-crosshair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--sh-baseline); pointer-events: none; } .sh-tooltip { position: absolute; min-width: 132px; background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); padding: 8px 10px; font-size: 12.5px; pointer-events: none; z-index: 5; } .sh-tooltip .when { color: var(--sh-muted); margin-bottom: 5px; } .sh-tooltip .row { display: flex; align-items: center; gap: 7px; margin-top: 2px; } .sh-tooltip .row .key { width: 12px; height: 2px; border-radius: 1px; flex-shrink: 0; } .sh-tooltip .row .val { font-weight: 650; margin-left: auto; padding-left: 10px; } .sh-tooltip .row .name { color: var(--sh-ink-2); } /* table twin */ .sh-table-twin { margin: 6px 2px 8px; } .sh-table-twin summary { font-size: 12.5px; color: var(--sh-muted); cursor: pointer; } .sh-table-twin table { border-collapse: collapse; margin-top: 8px; font-size: 12.5px; width: 100%; } .sh-table-twin th, .sh-table-twin td { text-align: right; padding: 4px 10px; border-bottom: 1px solid var(--sh-grid); font-variant-numeric: tabular-nums; } .sh-table-twin th:first-child, .sh-table-twin td:first-child { text-align: left; } .sh-table-twin th { color: var(--sh-ink-2); font-weight: 600; } /* ── Detail rows (site page) ───────────────────────────────── */ .sh-rows { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; row-gap: 9px; font-size: 14px; } .sh-rows dt { color: var(--sh-muted); } .sh-rows dd { margin: 0; } .sh-error { border: 1px solid var(--sh-border); border-left: 3px solid var(--sh-critical); border-radius: 8px; padding: 12px 14px; font-size: 13.5px; color: var(--sh-ink-2); background: var(--sh-surface); } .sh-updated { font-size: 12px; color: var(--sh-muted); } /* ── Auth pages ────────────────────────────────────────────── */ .sh-auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--sh-page); } .sh-auth-card { width: 100%; max-width: 380px; background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: 10px; padding: 32px; } .sh-auth-logo { margin-bottom: 20px; font-size: 18px; } .sh-auth-title { margin: 0 0 16px; font-size: 22px; font-weight: 600; } .sh-auth-form { display: flex; flex-direction: column; gap: 14px; } .sh-auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sh-ink-2); } .sh-auth-form input { font: inherit; color: var(--sh-ink); background: var(--sh-page); border: 1px solid var(--sh-baseline); border-radius: 6px; padding: 9px 11px; } .sh-auth-form input:focus { outline: 2px solid var(--sh-home); outline-offset: 1px; border-color: transparent; } .sh-hint { font-size: 12px; color: var(--sh-muted); } .sh-btn-primary { font: inherit; font-weight: 600; color: #ffffff; background: var(--sh-home); border: none; border-radius: 6px; padding: 10px 14px; cursor: pointer; margin-top: 4px; } .sh-btn-primary:disabled { opacity: 0.6; cursor: default; } .sh-auth-alt { margin: 18px 0 0; font-size: 13px; color: var(--sh-ink-2); } .sh-auth-alt a { color: var(--sh-home); } /* A button that reads as a link inside running text ("send it again"). */ .sh-link { background: none; border: none; padding: 0; font: inherit; color: var(--sh-home); cursor: pointer; text-decoration: underline; } .sh-link:disabled { color: var(--sh-muted); cursor: default; text-decoration: none; } /* ── Nav: user + Tesla connect ─────────────────────────────── */ .sh-btn-connect { font: inherit; font-size: 13px; font-weight: 600; color: #ffffff; background: var(--sh-home); border: none; border-radius: 6px; padding: 8px 12px; margin: 8px 16px 0; cursor: pointer; } .sh-btn-connect:disabled { opacity: 0.6; cursor: default; } /* Disconnect: deliberately quiet next to the connect CTA; arms red for the confirm tap. */ .sh-btn-disconnect { font: inherit; font-size: 12px; color: var(--sh-ink-2); background: transparent; border: 1px solid var(--sh-baseline); border-radius: 6px; padding: 5px 10px; margin: 4px 16px 0; cursor: pointer; align-self: flex-start; } .sh-btn-disconnect:hover { color: var(--sh-ink); } .sh-btn-disconnect:disabled { opacity: 0.6; cursor: default; } .sh-btn-disconnect.arm { color: #ffffff; background: var(--sh-critical); border-color: var(--sh-critical); } .sh-nav-error { margin: 8px 16px 0; font-size: 12px; color: var(--sh-critical); } .sh-user { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--sh-border); margin-top: 10px; font-size: 12px; color: var(--sh-ink-2); } .sh-user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .sh-btn-ghost { font: inherit; font-size: 12px; color: var(--sh-ink-2); background: transparent; border: 1px solid var(--sh-baseline); border-radius: 6px; padding: 4px 8px; cursor: pointer; } .sh-btn-ghost:hover { color: var(--sh-ink); } .sh-loading { padding: 40px; color: var(--sh-muted); } /* Battery ETA line in the dashboard hero (charging → full / discharging → reserve) */ .sh-eta { font-size: 13px; color: var(--sh-muted); margin-top: 10px; } .sh-eta.good { color: var(--sh-good); } /* Settings page */ .sh-settings-form { max-width: 480px; } .sh-settings-ok { color: var(--sh-good); } .sh-settings-error { color: var(--sh-critical); } /* PV array rows on the settings page */ .sh-settings-heading { font-size: 15px; font-weight: 600; margin: 10px 0 0; } .sh-array-row { display: flex; gap: 8px; align-items: flex-end; } .sh-array-row label { flex: 0 0 84px; } .sh-array-row label.grow { flex: 1 1 auto; } .sh-array-row input { width: 100%; box-sizing: border-box; } .sh-array-remove { flex: 0 0 auto; padding-bottom: 8px; } /* Narrow screens: name takes its own line, the numeric fields share the next. */ @media (max-width: 760px) { .sh-array-row { flex-wrap: wrap; } .sh-array-row label { flex: 1 1 70px; min-width: 0; } .sh-array-row label.grow { flex: 1 1 100%; } } /* ── Controls page ─────────────────────────────────────────── */ .sh-grid.controls { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; } .sh-ctl-status { font-size: 13px; margin: -12px 0 14px; } /* Segmented choice (operation mode, export rule) */ .sh-seg { display: flex; gap: 6px; flex-wrap: wrap; } .sh-seg button, .sh-seg a { font: inherit; font-size: 13px; color: var(--sh-ink-2); background: transparent; border: 1px solid var(--sh-baseline); border-radius: 8px; padding: 8px 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; } .sh-seg button:hover:not(:disabled), .sh-seg a:hover { color: var(--sh-ink); } .sh-seg button.active, .sh-seg a.active { background: color-mix(in srgb, var(--sh-home) 12%, transparent); border-color: var(--sh-home); color: var(--sh-ink); font-weight: 600; } .sh-seg button:disabled { opacity: 0.55; cursor: default; } /* Toggle switch (storm watch, grid charging) */ .sh-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; position: relative; } .sh-switch-spaced { margin-top: 14px; } .sh-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .sh-switch .track { width: 38px; height: 22px; border-radius: 11px; background: var(--sh-baseline); position: relative; transition: background 0.15s ease; flex-shrink: 0; } .sh-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--sh-surface); transition: transform 0.15s ease; } .sh-switch input:checked + .track { background: var(--sh-good); } .sh-switch input:checked + .track::after { transform: translateX(16px); } .sh-switch input:disabled + .track { opacity: 0.55; } /* Apply-on-release slider (backup reserve) */ .sh-slider-row { display: flex; align-items: center; gap: 14px; } .sh-slider-row input[type="range"] { flex: 1; accent-color: var(--sh-home); } .sh-slider-value { font-size: 15px; font-weight: 650; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; } /* Day navigation (Forecast + History): chips, arrows, and the date picker */ .sh-day-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; } .sh-date-nav { display: inline-flex; gap: 6px; align-items: center; } .sh-date-nav input[type="date"], .sh-date-nav select { font: inherit; font-size: 13px; color: var(--sh-ink); background: var(--sh-page); border: 1px solid var(--sh-baseline); border-radius: 6px; padding: 5px 8px; } .sh-date-nav .sh-btn-ghost { padding: 6px 9px; } /* Hourly weather-symbol strip on the Forecast page */ .sh-wx-strip { padding: 12px 14px 10px; } .sh-wx-strip .cells { display: flex; overflow-x: auto; } .sh-wx-strip .cell { flex: 1 0 34px; min-width: 34px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .sh-wx-strip .ico { font-size: 17px; line-height: 1.2; } .sh-wx-strip .t { font-size: 11.5px; font-weight: 600; } .sh-wx-strip .hh { font-size: 10.5px; color: var(--sh-muted); font-variant-numeric: tabular-nums; } /* Automations page */ .sh-rule-card { margin-bottom: 14px; } .sh-rule-card.off { opacity: 0.62; } .sh-rule-card .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sh-rule-card .drag { cursor: grab; color: var(--sh-muted); font-size: 15px; user-select: none; padding: 2px 4px; } .sh-rule-card .drag:active { cursor: grabbing; } .sh-rule-card.drag-target { border-color: var(--sh-home); box-shadow: 0 0 0 1px var(--sh-home) inset; } .sh-rule-card .head .name { font-size: 14.5px; } .sh-rule-card .head .spacer { flex: 1; } .sh-rule-card .sentence { margin: 8px 0 0; font-size: 13.5px; } .sh-rule-card .meta { margin: 4px 0 0; font-size: 12px; color: var(--sh-muted); } .sh-rule-card .runs { margin-top: 10px; border-top: 1px solid var(--sh-grid); padding-top: 8px; } .sh-rule-editor h2 { margin-top: 0; } .sh-editor-heading { font-size: 13.5px; font-weight: 650; color: var(--sh-ink-2); margin: 12px 0 0; } .sh-editor-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .sh-editor-row label { flex: 0 1 auto; min-width: 90px; } .sh-editor-row label.grow { flex: 1 1 220px; } .sh-editor-row select, .sh-editor-row input { font: inherit; color: var(--sh-ink); background: var(--sh-page); border: 1px solid var(--sh-baseline); border-radius: 6px; padding: 8px 10px; width: 100%; box-sizing: border-box; } .sh-daypick { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .sh-daypick .pick { font-size: 12px; color: var(--sh-ink-2); border: 1px solid var(--sh-baseline); border-radius: 999px; padding: 3px 9px; cursor: pointer; user-select: none; } .sh-daypick .pick.on { background: color-mix(in srgb, var(--sh-home) 12%, transparent); border-color: var(--sh-home); color: var(--sh-ink); } .sh-daypick .pick input { display: none; } /* Settings change log */ .sh-changes { list-style: none; margin: 0; padding: 0; font-size: 13px; } .sh-changes li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--sh-grid); } .sh-changes li:last-child { border-bottom: none; padding-bottom: 0; } .sh-changes .when { color: var(--sh-muted); flex: 0 0 92px; font-variant-numeric: tabular-nums; } .sh-changes .what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .sh-changes .line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } /* Attribution chips: which automation, a manual SunHarvest action, or an outside change. */ .sh-src { font-size: 11px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; } .sh-src.auto { color: var(--sh-home); background: color-mix(in srgb, var(--sh-home) 12%, transparent); } .sh-src.manual { color: var(--sh-battery); background: color-mix(in srgb, var(--sh-battery) 14%, transparent); } .sh-src.ext { color: var(--sh-muted); background: color-mix(in srgb, var(--sh-ink) 7%, transparent); } /* Automation readiness: live standing under each rule + the dashboard next-up card. */ .sh-ready { margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--sh-grid); border-radius: 8px; background: color-mix(in srgb, var(--sh-ink) 2%, transparent); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; } .sh-ready .line { display: flex; align-items: baseline; gap: 7px; } .sh-ready .mark { flex: 0 0 14px; text-align: center; } .sh-ready .line.ok .mark { color: var(--sh-good); } .sh-ready .line.wait { color: var(--sh-ink-2); } .sh-ready .line.wait .mark { color: var(--sh-warning); } .sh-ready .line.spent { color: var(--sh-muted); } .sh-ready .line.note { color: var(--sh-muted); font-size: 12px; } /* Conditions-met count in the rule header. */ .sh-ready-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; } .sh-ready-badge.ok { color: var(--sh-good); background: color-mix(in srgb, var(--sh-good) 12%, transparent); } .sh-ready-badge.part { color: color-mix(in srgb, var(--sh-warning) 72%, var(--sh-ink)); background: color-mix(in srgb, var(--sh-warning) 16%, transparent); } .sh-ready-badge.none { color: var(--sh-muted); background: color-mix(in srgb, var(--sh-ink) 7%, transparent); } .sh-nextup-line { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; } .sh-nextup-line .why { color: var(--sh-ink-2); } /* Tariff presets page */ .sh-tariff-now { margin-bottom: 14px; } .sh-tariff-card { margin-bottom: 14px; } .sh-tariff-card .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sh-tariff-card .head .name { font-size: 14.5px; } .sh-tariff-card .head .spacer { flex: 1; } .sh-tariff-card .meta { margin: 8px 0 0; font-size: 12.5px; color: var(--sh-muted); } .sh-tariff-current { margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sh-tariff-editor { margin-top: 10px; border-top: 1px solid var(--sh-grid); padding-top: 10px; } .sh-tariff-scroll { overflow-x: auto; } /* Real-tariff source editors sit side by side, stacking on narrow screens. */ .sh-real-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 800px) { .sh-real-grid { grid-template-columns: 1fr; } } .sh-real-grid h3 { margin: 0 0 8px; font-size: 14px; } .sh-real-enabled { display: flex; align-items: center; gap: 6px; align-self: end; } .sh-window-row { align-items: end; } .sh-window-row button { align-self: end; } .sh-tariff-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 10px; } .sh-tariff-table th { text-align: left; color: var(--sh-muted); font-weight: 500; font-size: 12px; padding: 4px 10px 4px 0; white-space: nowrap; } .sh-tariff-table td { padding: 4px 10px 4px 0; border-top: 1px solid var(--sh-grid); } .sh-tariff-table td.when { color: var(--sh-ink-2); font-size: 12.5px; } .sh-tariff-table input { width: 92px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--sh-baseline); background: var(--sh-surface); color: var(--sh-ink); font: inherit; font-size: 13px; } /* Compact next-up strip at the top of the Automations page. */ .sh-nextup-inline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13.5px; } .sh-nextup-inline .sh-nextup-label { color: var(--sh-muted); font-size: 12px; } .sh-nextup-inline .why { color: var(--sh-ink-2); } /* ── AI mode (shadow planner) ─────────────────────────────────────────── */ .sh-ai-goal, .sh-ai-status, .sh-ai-plan, .sh-ai-history { margin-bottom: 14px; } .sh-ai-goal .head, .sh-ai-status .head, .sh-ai-plan .head, .sh-ai-history .head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .sh-ai-goal .row, .sh-ai-status .row, .sh-ai-run-detail .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .sh-goal-text { width: 100%; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sh-baseline); background: var(--sh-surface); color: var(--sh-ink); font: inherit; font-size: 13.5px; line-height: 1.5; } .sh-ai-starters { margin-top: 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sh-ai-starters .sh-chip { cursor: pointer; } .sh-ai-versions { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--sh-baseline); } .sh-ai-versions-toggle { border: 0; background: none; padding: 0; color: var(--sh-ink-2); font: inherit; font-size: 13px; cursor: pointer; } .sh-ai-versions-toggle:hover { color: var(--sh-ink); } .sh-ai-versions > .sh-hint { margin: 6px 0 4px; } .sh-ai-version { border-top: 1px solid var(--sh-baseline); } .sh-ai-version-detail { padding: 0 0 10px; outline: none; } .sh-ai-version-text { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .sh-ai-goal-link { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline dotted; cursor: pointer; } .sh-ai-goal-link:hover { color: var(--sh-ink); } .sh-ai-summary { margin: 4px 0 10px; font-size: 14.5px; color: var(--sh-ink); } .sh-ai-rule { border-top: 1px solid var(--sh-baseline); padding: 8px 0; } .sh-ai-rule .head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 0; } .sh-ai-rule .sentence { margin: 4px 0 0; font-size: 13.5px; } .sh-ai-rule .why { margin: 2px 0 0; font-size: 12.5px; color: var(--sh-ink-2); } .sh-ai-json { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sh-baseline); background: var(--sh-surface); color: var(--sh-ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45; max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; } .sh-ai-run { border-top: 1px solid var(--sh-baseline); } .sh-ai-run-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; width: 100%; padding: 8px 0; border: 0; background: none; color: var(--sh-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .sh-ai-run-row .when { color: var(--sh-muted); font-size: 12px; white-space: nowrap; } .sh-ai-run-row .what { flex: 1 1 240px; min-width: 200px; } .sh-ai-run-detail { padding: 0 0 10px; } /* AI1: the switch, live/fallback banners, and the generated-set section. */ .sh-ai-switch { margin-bottom: 14px; } .sh-ai-switch .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 0; } .sh-ai-switch .sh-hint, .sh-ai-switch p { margin: 8px 0 0; } .sh-ai-fallback { margin: 8px 0 0; font-size: 13px; color: var(--sh-warning); } .sh-ai-banner { margin-bottom: 14px; font-size: 13.5px; border-left: 3px solid var(--sh-good); } .sh-ai-banner.fallback { border-left-color: var(--sh-warning); } .sh-ai-banner a { margin-left: 6px; } .sh-ai-set-title { font-size: 15px; margin: 18px 0 8px; } .sh-ai-why { margin: 4px 0 0; font-size: 12.5px; color: var(--sh-ink-2); } /* ── Account page ─────────────────────────────────────────────────────── */ .sh-account-card { margin-bottom: 14px; } .sh-account-card .head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .sh-account-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; } .sh-account-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sh-ink-2); } .sh-account-form input, .sh-account-form select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--sh-baseline); background: var(--sh-surface); color: var(--sh-ink); font: inherit; font-size: 13.5px; } .sh-account-form .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sh-account-range { display: flex; gap: 10px; } .sh-account-range label { flex: 1; } .sh-account-check { flex-direction: row !important; align-items: center; gap: 8px !important; } .sh-account-check input { width: auto; } .sh-2fa-setup { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .sh-2fa-qr { width: 168px; height: 168px; border-radius: 10px; background: #fff; padding: 6px; } .sh-2fa-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: 0.5px; } .sh-2fa-setup label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sh-ink-2); } .sh-2fa-setup input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--sh-baseline); background: var(--sh-surface); color: var(--sh-ink); font: inherit; } .sh-2fa-recovery { margin-top: 10px; } .sh-danger { border-left: 3px solid var(--sh-critical); } .sh-btn-danger { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--sh-critical); background: none; color: var(--sh-critical); font: inherit; font-size: 13.5px; cursor: pointer; } .sh-btn-danger:hover { background: color-mix(in srgb, var(--sh-critical) 12%, transparent); } .sh-btn-danger:disabled { opacity: 0.6; cursor: default; } /* Discreet build stamp at the foot of the nav. */ .sh-version { margin-top: 6px; font-size: 10.5px; color: var(--sh-muted); opacity: 0.7; user-select: all; } /* ── Consent modal & compliance surfaces ───────────────────── */ .sh-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 60; } .sh-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 61; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: 12px; padding: 20px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); } .sh-modal h2 { margin: 0 0 10px; font-size: 17px; } .sh-modal-list { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--sh-ink-2); display: flex; flex-direction: column; gap: 7px; } .sh-modal-list a { color: var(--sh-home); } .sh-modal .sh-account-check { display: flex; font-size: 13px; color: var(--sh-ink); margin-bottom: 14px; } .sh-modal-actions { display: flex; justify-content: flex-end; gap: 10px; } /* Small auxiliary links in the nav foot (manage-at-Tesla, privacy). */ .sh-nav-aux { font-size: 11.5px; color: var(--sh-muted); text-decoration: underline; text-underline-offset: 2px; } .sh-nav-aux:hover { color: var(--sh-ink-2); } /* The privacy policy re-uses the auth shell but needs a reading column, not a login card. */ .sh-auth-card:has(.sh-privacy) { max-width: 720px; } .sh-privacy h2 { font-size: 15.5px; margin: 18px 0 6px; } .sh-privacy p, .sh-privacy ul { margin: 0 0 10px; font-size: 13.5px; color: var(--sh-ink-2); } .sh-privacy ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .sh-privacy a { color: var(--sh-home); } .sh-privacy strong { color: var(--sh-ink); } /* The user guide: the same reading column, a little wider, with the guide's tables, code and quotes. */ .sh-auth-card:has(.sh-help) { max-width: 820px; } .sh-help h3 { font-size: 14px; margin: 16px 0 4px; } .sh-help table { border-collapse: collapse; margin: 0 0 12px; font-size: 13px; width: 100%; } .sh-help th, .sh-help td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--sh-border); vertical-align: top; color: var(--sh-ink-2); } .sh-help th { color: var(--sh-ink); font-weight: 600; } .sh-help code { font-size: 12.5px; padding: 1px 4px; border-radius: 4px; background: var(--sh-surface-2, rgba(127,127,127,.12)); } .sh-help blockquote { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--sh-home); color: var(--sh-ink-2); font-size: 13.5px; } .sh-help ol { margin: 0 0 10px; padding-left: 22px; font-size: 13.5px; color: var(--sh-ink-2); display: flex; flex-direction: column; gap: 6px; } .sh-help hr { border: 0; border-top: 1px solid var(--sh-border); margin: 20px 0; } .sh-help-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; font-size: 13px; } .sh-help-back { margin-bottom: 4px; } .sh-help h2 { scroll-margin-top: 12px; } .sh-help h3 { scroll-margin-top: 12px; } /* ── AI provider chain (priority list, drag to reorder) ───────── */ .sh-provider-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--sh-border); border-radius: 8px; background: var(--sh-page); font-size: 13.5px; flex-wrap: wrap; } .sh-provider-row .drag { cursor: grab; color: var(--sh-muted); font-size: 15px; user-select: none; } .sh-provider-row .drag:active { cursor: grabbing; } .sh-provider-row.drag-target { border-color: var(--sh-home); box-shadow: 0 0 0 1px var(--sh-home) inset; } .sh-provider-row.editing { border-color: var(--sh-solar); } .sh-provider-row .pos { min-width: 20px; text-align: center; font-size: 12px; color: var(--sh-muted); border: 1px solid var(--sh-border); border-radius: 999px; padding: 1px 6px; } .sh-provider-row .name { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; min-width: 0; } .sh-provider-row .spacer { flex: 1; } .sh-provider-row button { padding: 5px 10px; font-size: 12.5px; } .sh-provider-form { margin-top: 12px; } .sh-provider-form-title { font-size: 13.5px; } .sh-provider-help { margin: -2px 0 2px; } /* ── Five-destination shell and the pieces it introduced (2026-09) ──────────── */ /* Notices at the top of the page (Tesla callback outcome). */ .sh-notice { margin-bottom: 16px; } /* The demo strip (docs/UI.md, "Demo mode"): one line above every screen while the session is the pretend one. */ .sh-demo-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--sh-home) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sh-home) 35%, transparent); font-size: 13px; color: var(--sh-ink-2); } .sh-demo-bar span { flex: 1 1 260px; } .sh-demo-bar .sh-btn-primary { font-size: 12.5px; padding: 6px 12px; text-decoration: none; } .sh-error.ok { border-left-color: var(--sh-good); } /* Card headings that carry a tip or an action on the right. */ .sh-h2-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sh-h2-row .spacer, .sh-list-head .spacer, .sh-driving .spacer, .sh-tariff-current .spacer, .sh-prow .spacer, .sh-editor-row .spacer, .sh-ai-goal .head .spacer, .sh-ai-switch .head .spacer { flex: 1; } .sh-btn-link { text-decoration: none; } /* A title and its (i) wrap as one unit, never the icon alone on the next line. */ .sh-title-tip { display: inline-flex; align-items: center; gap: 4px; } /* The Driving line: who is in charge, what fires next. */ .sh-driving { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; } .sh-driving .why { color: var(--sh-ink-2); } /* Home: the Powerwall settings at a glance under the Driving line (read-only; Control › Powerwall changes them). */ .sh-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 16px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--sh-grid); } .sh-glance > div { min-width: 0; } .sh-glance dt { font-size: 12px; color: var(--sh-muted); } .sh-glance dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--sh-ink); overflow-wrap: anywhere; } .sh-driving-card { padding: 14px 20px; } /* Sub-tabs (Control) sit level with the Driving line. */ .sh-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } /* The (i) tip: a native details element styled as an icon with a floating panel. */ .sh-tip { display: inline-block; position: relative; vertical-align: middle; } .sh-tip summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; color: var(--sh-muted); padding: 2px; border-radius: 50%; } .sh-tip summary::-webkit-details-marker { display: none; } .sh-tip summary:hover, .sh-tip[open] summary { color: var(--sh-ink); } .sh-tip-panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(320px, calc(100vw - 48px)); background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); padding: 8px 10px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--sh-ink-2); text-transform: none; letter-spacing: 0; white-space: normal; } .sh-tip-panel a { color: var(--sh-home); } /* Folded-away sections. */ .sh-disc-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--sh-border); border-radius: 12px; background: var(--sh-surface); color: var(--sh-ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; } .sh-disc-head:hover { border-color: var(--sh-baseline); } .sh-disc-head .chev { display: inline-flex; color: var(--sh-muted); transition: transform 0.15s ease; } .sh-disc.open .sh-disc-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .sh-disc.open .sh-disc-head .chev { transform: rotate(90deg); } .sh-disc-body { border: 1px solid var(--sh-border); border-top: none; border-radius: 0 0 12px 12px; padding: 14px; background: color-mix(in srgb, var(--sh-ink) 1.5%, transparent); } .sh-disc-body > * + * { margin-top: 14px; } .sh-disc-body > .sh-card { border: none; padding: 0; background: transparent; } .sh-disc-body > .sh-chart-card { border: 1px solid var(--sh-border); padding: 16px 18px 10px; background: var(--sh-surface); } .sh-disc.danger .sh-disc-head { border-left: 3px solid var(--sh-critical); } /* Settings-style rows (Control › Powerwall). */ .sh-set { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--sh-grid); } .sh-set:first-child { padding-top: 0; } .sh-set:last-child { border-bottom: none; padding-bottom: 0; } .sh-set .l { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; } .sh-set .l .n { display: inline-flex; align-items: center; gap: 6px; } .sh-set .sh-slider-row { padding-right: 6px; } /* Lazy history boxes (the change log, the plan history): the box scrolls back through the whole history a page at a time; the end marker is what the script watches (sunharvest.js). */ .sh-scroll { max-height: min(60vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } .sh-scroll-end { min-height: 8px; padding: 10px 0 2px; text-align: center; font-size: 12.5px; color: var(--sh-muted); } .sh-scroll-end button { background: none; border: 0; padding: 0; font: inherit; color: var(--sh-muted); text-decoration: underline dotted; cursor: pointer; } .sh-scroll-end button:hover { color: var(--sh-ink); } /* The plan history fold-down inside the current plan card (same shape as the goal history). */ .sh-ai-plan-history > .sh-hint { margin: 6px 0 4px; } /* Password box: the eye sits inside the box on the right and shows or hides what is typed. */ .sh-pw { position: relative; display: block; width: 100%; } .sh-pw input { width: 100%; padding-right: 38px; box-sizing: border-box; } .sh-pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--sh-muted); cursor: pointer; } .sh-pw-eye:hover { color: var(--sh-ink); } /* Rules list header + the paused line. */ .sh-list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; } .sh-list-head .sh-sec-head { margin: 0; } .sh-paused { margin: 0 0 12px; } .sh-rule-editor { margin-bottom: 14px; } /* The rule editor as a sentence: pills for every choice, plain words between them. */ .sh-sentence { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .sh-sentence .line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 34px; font-size: 14px; } .sh-sentence .w { flex: 0 0 56px; color: var(--sh-muted); font-size: 13px; } .sh-sentence .word { color: var(--sh-ink-2); font-size: 13.5px; } .sh-sentence .pill { font: inherit; font-size: 13px; color: var(--sh-ink); background: color-mix(in srgb, var(--sh-home) 10%, transparent); border: 1px solid var(--sh-home); border-radius: 999px; padding: 3px 10px; max-width: 100%; } .sh-sentence input.pill.num { width: 84px; text-align: right; } .sh-sentence .sh-daypick { display: inline-flex; } .sh-sentence .sh-btn-ghost { padding: 3px 8px; } .sh-sentence-preview { margin: 12px 0 0; } .sh-rule-card .drag { display: inline-flex; } /* Prices: the current-tariff line, the capture row, preset rows. */ .sh-tariff-current { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13.5px; } .sh-capture-row { margin: 10px 0 6px; align-items: center; } .sh-capture-row input { flex: 1 1 240px; font: inherit; font-size: 13.5px; color: var(--sh-ink); background: var(--sh-page); border: 1px solid var(--sh-baseline); border-radius: 6px; padding: 7px 10px; } .sh-prow { padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--sh-grid); } .sh-prow .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sh-prow .head .name { font-size: 14px; } .sh-prow .meta { margin: 4px 0 0; font-size: 12.5px; color: var(--sh-muted); } /* Settings: section list beside the section; on phones the list is the page. */ .sh-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; } .sh-subnav { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: 12px; } .sh-subnav a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; color: var(--sh-ink-2); font-size: 14px; text-decoration: none; } .sh-subnav a .t { flex: 1; } .sh-subnav a .sh-hint, .sh-subnav a .chev { display: none; } .sh-subnav a:hover { background: color-mix(in srgb, var(--sh-ink) 5%, transparent); } .sh-subnav a.active { background: color-mix(in srgb, var(--sh-ink) 8%, transparent); color: var(--sh-ink); font-weight: 600; } .sh-settings-back, .sh-settings-title { display: none; } @media (max-width: 760px) { .sh-settings { grid-template-columns: 1fr; } .sh-settings.open .sh-subnav { display: none; } .sh-settings.root .sh-settings-body { display: none; } .sh-subnav { padding: 4px 16px; gap: 0; } .sh-subnav a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; padding: 13px 0; border-radius: 0; border-bottom: 1px solid var(--sh-grid); color: var(--sh-ink); } .sh-subnav a:last-child { border-bottom: none; } .sh-subnav a .t { font-weight: 600; font-size: 14.5px; } .sh-subnav a .sh-hint { display: block; } .sh-subnav a .chev { display: inline-flex; grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--sh-muted); } .sh-subnav a.active, .sh-subnav a:hover { background: none; } .sh-settings-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--sh-ink-2); text-decoration: none; margin-bottom: 8px; } .sh-settings-title { display: block; font-size: 20px; font-weight: 650; margin: 0 0 14px; } } /* Account as rows. */ .sh-acct-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sh-grid); font-size: 14px; } .sh-acct-row:last-child { border-bottom: none; } .sh-acct-row .k { flex: 0 0 96px; font-weight: 600; } .sh-acct-row .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sh-acct-form { padding: 4px 0 14px; border-bottom: 1px solid var(--sh-grid); } .sh-acct-form .sh-account-form { margin-top: 6px; } /* The Tesla link block. */ .sh-tesla { display: flex; flex-direction: column; gap: 10px; } .sh-tesla .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sh-tesla .sh-btn-disconnect { margin: 0; } .sh-tesla p { margin: 0; } /* Energy: day chips and the date nav together. */ .sh-day-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Goal-history toggle chevron turns when open. */ .sh-ai-versions-toggle .chev { display: inline-flex; vertical-align: middle; transition: transform 0.15s ease; } .sh-ai-versions-toggle .chev.open { transform: rotate(90deg); } .sh-ai-rule-name { font-size: 13.5px; } /* The dashboard as a list of widgets (docs/UI.md, "Customising the dashboard"): alerts, then each widget in the account's order, then the foot (Updated … and Customise). Nothing sits above the widgets, so entering or leaving edit mode never pushes the page down; while editing, Done and Reset ride in a bar stuck to the bottom of the screen (above the phone's tab bar) with the width of the page between them. */ .sh-dash-intro { margin: -4px 0 10px; } /* The getting-started checklist on Home (docs/UI.md, "Getting started"), and the "Next:" line a screen shows once its step is done. */ .sh-setup { margin-bottom: 16px; } .sh-setup-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sh-setup-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-top: 1px solid var(--sh-border); } .sh-setup-steps li:first-child { border-top: none; } .sh-setup-steps .mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--sh-border); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--sh-muted); margin-top: 1px; } .sh-setup-steps li.done .mark { border-color: var(--sh-good); background: var(--sh-good); color: #fff; } .sh-setup-steps li.todo .mark { border-color: var(--sh-home); } .sh-setup-steps .body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sh-setup-steps .t { font-size: 14px; font-weight: 600; color: var(--sh-ink); } .sh-setup-steps a.t { color: var(--sh-home); text-decoration: none; } .sh-setup-steps a.t:hover { text-decoration: underline; } .sh-setup-steps li.done .t, .sh-setup-steps li.skipped .t { color: var(--sh-muted); font-weight: 500; } .sh-setup-steps li.done .t { text-decoration: line-through; } .sh-setup-steps .sh-btn-ghost { flex: 0 0 auto; font-size: 12px; padding: 3px 8px; } .sh-setup-foot { margin: 10px 0 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; } .sh-setup-next { margin: 8px 0 0; font-size: 13px; } .sh-setup-next a { font-weight: 600; } .sh-notice .sh-setup-next { margin: 4px 0 0; color: inherit; } .sh-setup-gate { max-width: 560px; } .sh-setup-gate h2 { font-size: 16px; color: var(--sh-ink); } .sh-setup-gate p { font-size: 14px; line-height: 1.45; color: var(--sh-ink-2); margin: 0 0 12px; } .sh-dash-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .sh-dash-foot .spacer { flex: 1; } .sh-dash-foot .sh-btn-ghost { display: inline-flex; align-items: center; gap: 5px; } .sh-dash-bar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--sh-page); border-top: 1px solid var(--sh-border); } .sh-dash-bar .sh-btn-ghost.armed { border-color: var(--sh-critical); color: var(--sh-critical); } .sh-chips + .sh-dash-grid { margin-top: 12px; } .sh-widget > .sh-section:first-child, .sh-widget > .sh-sec-head:first-child { margin-top: 0; } .sh-wx-widget h2 { margin-bottom: 6px; } .sh-wx-widget .cell.next-day { opacity: 0.8; } .sh-wx-widget .cell.next-day .hh { font-style: italic; } .sh-rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; } .sh-rule-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .sh-rule-list .n { font-weight: 600; } .sh-dash-list { list-style: none; margin: 14px 0 0; padding: 0; } .sh-dash-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sh-grid); } .sh-dash-list li:last-child { border-bottom: none; } .sh-dash-list .txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sh-dash-list .txt .n { font-size: 13.5px; font-weight: 600; } .sh-dash-bar .spacer { flex: 1; text-align: center; font-size: 12px; color: var(--sh-muted); } .sh-dash-bar .sh-btn-primary { font-size: 12px; padding: 5px 10px; } .sh-widget.editing { border: 1px dashed var(--sh-baseline); border-radius: 12px; padding: 8px; } /* A widget with nothing to show renders nothing outside Customise: its slot goes too. */ .sh-widget:not(.editing):empty { display: none; } .sh-widget-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12.5px; } .sh-widget-bar .n { font-weight: 650; color: var(--sh-ink-2); } .sh-widget-bar .spacer { flex: 1; } .sh-widget-bar button { font: inherit; font-size: 12px; padding: 0 7px; height: 26px; display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--sh-baseline); border-radius: 6px; color: var(--sh-ink-2); cursor: pointer; } .sh-widget-bar button:hover:not(:disabled) { color: var(--sh-ink); } .sh-widget-bar button:disabled { opacity: 0.3; cursor: default; } .sh-dash-add .add { width: 100%; padding: 12px; font-size: 13px; border-style: dashed; } .sh-dash-list li .sh-btn-primary { flex-shrink: 0; } .sh-widget-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; } .sh-widget-parts label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--sh-baseline); color: var(--sh-ink-2); cursor: pointer; user-select: none; } .sh-widget-parts label.on { background: var(--sh-good); border-color: var(--sh-good); color: #fff; } .sh-widget-parts input { position: absolute; opacity: 0; width: 0; height: 0; } .sh-ai-widget-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .sh-ai-widget .sh-ai-summary { margin: 4px 0 6px; } .sh-ai-widget-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; } .sh-ai-rules-widget .sh-ai-rule:first-of-type { border-top: none; padding-top: 0; } .sh-ai-rules-widget > .sh-hint:last-child { margin: 10px 0 0; } /* Sizes (docs/UI.md, "Customising the dashboard"): the page is a 12-column grid; a widget spans all of it, half or a third, and each tile inside a widget spans a quarter, third, half or all of its row. Heights are a scale step (s / m / l) on the figures. Container queries fold the spans on narrow widgets and phones. */ .sh-dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px 16px; } .sh-dash-grid > .sh-widget, .sh-dash-grid > .sh-dash-add { grid-column: span 12; min-width: 0; container-type: inline-size; } .sh-dash-grid > .sh-widget.w-half { grid-column: span 6; } .sh-dash-grid > .sh-widget.w-third { grid-column: span 4; } @media (max-width: 640px) { .sh-dash-grid > .sh-widget.w-third { grid-column: span 6; } } .sh-widget .sh-grid.kpis { grid-template-columns: repeat(12, minmax(0, 1fr)); } .sh-widget .sh-grid.kpis > * { grid-column: span 3; min-width: 0; } .sh-widget .sh-grid.kpis > .w-third { grid-column: span 4; } .sh-widget .sh-grid.kpis > .w-half { grid-column: span 6; } .sh-widget .sh-grid.kpis > .w-wide { grid-column: span 8; } .sh-widget .sh-grid.kpis > .w-full { grid-column: span 12; } @container (max-width: 640px) { .sh-widget .sh-grid.kpis > *, .sh-widget .sh-grid.kpis > .w-third { grid-column: span 6; } .sh-widget .sh-grid.kpis > .w-half, .sh-widget .sh-grid.kpis > .w-wide { grid-column: span 12; } } @container (max-width: 340px) { .sh-widget .sh-grid.kpis > *, .sh-widget .sh-grid.kpis > .w-third, .sh-widget .sh-grid.kpis > .w-half, .sh-widget .sh-grid.kpis > .w-wide { grid-column: span 12; } } .h-s { --sh-scale: 0.82; } .h-l { --sh-scale: 1.3; } .sh-tile .label { font-size: calc(13px * var(--sh-scale, 1)); } .sh-tile .value { font-size: calc(26px * var(--sh-scale, 1)); } .sh-tile .value .unit { font-size: calc(14px * var(--sh-scale, 1)); } .sh-tile .sub { font-size: calc(12.5px * var(--sh-scale, 1)); } .sh-tile.h-l { padding: 22px 22px; } .sh-tile.h-s { padding: 10px 12px; } .sh-hero .big { font-size: calc(54px * var(--sh-scale, 1)); } .sh-hero .big .pct { font-size: calc(26px * var(--sh-scale, 1)); } .sh-hero .cap { font-size: calc(13px * var(--sh-scale, 1)); } .sh-glance dt { font-size: calc(12px * var(--sh-scale, 1)); } .sh-glance dd { font-size: calc(14px * var(--sh-scale, 1)); } .sh-driving { font-size: calc(13.5px * var(--sh-scale, 1)); } .sh-ai-summary { font-size: calc(14.5px * var(--sh-scale, 1)); } .sh-ai-rule .sentence { font-size: calc(13.5px * var(--sh-scale, 1)); } .sh-rule-list { font-size: calc(13.5px * var(--sh-scale, 1)); } .sh-wx-strip .ico { font-size: calc(17px * var(--sh-scale, 1)); } .sh-wx-strip .t { font-size: calc(11.5px * var(--sh-scale, 1)); } .sh-wx-strip .hh { font-size: calc(10.5px * var(--sh-scale, 1)); } .sh-chart-title { font-size: calc(14px * var(--sh-scale, 1)); } .sh-tile { position: relative; } .sh-tile-tools { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 8px; } .sh-tile-tools button, .sh-widget-bar button.size { font: inherit; font-size: 11px; padding: 0 6px; height: 22px; display: inline-flex; align-items: center; gap: 3px; background: var(--sh-surface); border: 1px solid var(--sh-baseline); border-radius: 6px; color: var(--sh-ink-2); cursor: pointer; } .sh-tile-tools button:hover, .sh-widget-bar button.size:hover { color: var(--sh-ink); } .sh-panel { position: relative; min-width: 0; } .sh-hero-card .sh-grid.kpis.hero { width: 100%; align-items: center; } .sh-hero-card .sh-panel .sh-meter { min-width: 0; } .sh-widget .sh-glance.sh-grid.kpis { display: grid; gap: 10px 16px; } .sh-widget .sh-driving-card .sh-panel.driving { margin-bottom: 4px; } .sh-ai-widget .sh-grid.kpis { gap: 6px 16px; } .sh-ai-widget .sh-panel > p { margin: 0; } .sh-tile-tools .grp, .sh-widget-bar .grp { display: inline-flex; align-items: stretch; height: 26px; border: 1px solid var(--sh-baseline); border-radius: 6px; background: var(--sh-surface); overflow: hidden; font-size: 11px; color: var(--sh-ink-2); } .sh-tile-tools .grp button, .sh-widget-bar .grp button { font: inherit; font-size: 14px; line-height: 1; width: 28px; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--sh-ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .sh-tile-tools .grp button:hover:not(:disabled), .sh-widget-bar .grp button:hover:not(:disabled) { background: var(--sh-grid); color: var(--sh-ink); } .sh-tile-tools .grp button:disabled, .sh-widget-bar .grp button:disabled { opacity: 0.3; cursor: default; } .sh-tile-tools .grp .lbl, .sh-widget-bar .grp .lbl { display: inline-flex; align-items: center; padding: 0 4px; border-left: 1px solid var(--sh-baseline); border-right: 1px solid var(--sh-baseline); white-space: nowrap; } .sh-widget-bar { flex-wrap: wrap; } @container (max-width: 520px) { .sh-widget-bar .n { flex-basis: 100%; } }