/* SunHarvest UI — design tokens. Light mode is cool slate neutrals with a sun-amber accent (2026-09-17: the warm paper-and-terracotta light set read as another product's look, a tester said); dark mode keeps its original warm charcoal and orange, which were liked as they were. The same values are copied into home.html and the Android widget (HomeWidget/*.cs, the widget_* drawables, colors.xml) — change them together. */ /* 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. */ /* Space Grotesk (SIL OFL, fonts/LICENSE-space-grotesk), the variable weights in two subsets, bundled so the phone has it offline; the paths are relative to this stylesheet, so they resolve under _content/SunHarvest.UI/ on the web and inside the app alike. swap: text paints in the system face first and switches when the file is in. The Latin range leaves out the ten digits (U+0030-0039) on purpose: figures fall through to the system face per glyph, so every number in the app — tiles, diagram, charts, prose — keeps the original numerals. */ @font-face { font-family: "Space Grotesk Variable"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk Variable"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :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(#f2f5f9, #0d0d0d); --sh-surface: light-dark(#ffffff, #1a1a19); --sh-ink: light-dark(#0f172a, #ffffff); --sh-ink-2: light-dark(#46556b, #c3c2b7); --sh-muted: light-dark(#7a889d, #898781); --sh-grid: light-dark(#e2e8f0, #2c2c2a); --sh-baseline: light-dark(#c3cdda, #383835); --sh-border: light-dark(rgba(15, 23, 42, 0.10), rgba(255, 255, 255, 0.10)); /* skeleton shimmer (placeholder blocks while a section loads) */ --sh-skel-a: light-dark(rgba(15, 23, 42, 0.07), rgba(255, 255, 255, 0.07)); --sh-skel-b: light-dark(rgba(15, 23, 42, 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(#e8940f, #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); --sh-delta-bad-text: light-dark(#b42318, #e66767); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html, body { /* A provider error can be one unbroken line of URLs and quota ids (2026-09-23, the AI widget and Control › AI status): it wraps wherever it lands instead of widening the page. */ overflow-wrap: anywhere; margin: 0; padding: 0; background: var(--sh-page); color: var(--sh-ink); font-family: "Space Grotesk Variable", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; } 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: 12px; } .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: 18px; letter-spacing: 0.2px; margin: 2px 10px; display: flex; align-items: center; gap: 8px; } .sh-logo .sun { color: var(--sh-solar); } .sh-logo .name { color: var(--sh-ink); } .sh-nav a { text-decoration: none; color: var(--sh-ink-2); padding: 8px 10px; border-radius: 8px; font-size: 15px; } .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: 13px; 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: 13px; 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: 14px; margin: 0 0 22px; } /* ── Cards & grids ─────────────────────────────────────────── */ .sh-card { background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: 12px; padding: 20px 22px; min-width: 0; /* never wider than its track for an unbreakable word */ } .sh-grid { display: grid; gap: 16px; } .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: 32px 0 12px; font-size: 13px; 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: 15px; 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: 11.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: 14px; flex-wrap: wrap; margin-bottom: 14px; } .sh-plan-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .sh-plan-tier { font-size: 14px; 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: 14.5px; margin-bottom: 16px; } .sh-plan-table th { text-align: center; font-size: 13px; 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: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--sh-grid); font-size: 14.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: 13px; 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: 13px; 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: 14px; 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: 11px; 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: 14px; } .sh-ad-cta { flex-shrink: 0; font-size: 13.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: 24px; } .sh-interstitial-card p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; } .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: 14px; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-size: 14px; 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: 15px; line-height: 1.55; } .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: 14px; 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 .ico { display: inline-flex; flex-shrink: 0; color: var(--sh-muted); } .sh-tile .ico svg { width: 16px; height: 16px; } .sh-tile .value { font-size: 28px; font-weight: 650; margin-top: 8px; } .sh-tile .value .unit { font-size: 15px; font-weight: 500; color: var(--sh-muted); margin-left: 4px; } .sh-tile .sub { font-size: 13.5px; color: var(--sh-muted); margin-top: 5px; min-height: 20px; } .sh-tile .sub.good { color: var(--sh-delta-good-text); } .sh-tile .sub.bad { color: var(--sh-delta-bad-text); } /* ── Hero + meter ──────────────────────────────────────────── */ .sh-hero-card { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .sh-hero .big { font-size: 56px; font-weight: 650; line-height: 1; } .sh-hero .big .pct { font-size: 28px; color: var(--sh-muted); font-weight: 550; } .sh-hero .cap { font-size: 14px; color: var(--sh-muted); margin-top: 6px; } /* ── Live flow diagram (Components/EnergyFlow.razor) ─────────── */ .sh-flow { max-width: 560px; margin: 0 auto; } .sh-flow-card { padding: 14px 10px; } .sh-flow svg { width: 100%; height: auto; display: block; font-family: inherit; } .sh-flow .node { fill: var(--sh-surface); stroke-width: 2; } .sh-flow .hub { fill: var(--sh-ink-2); } .sh-flow text.n { font-size: 12.5px; fill: var(--sh-ink-2); } .sh-flow text.v { font-size: 17px; font-weight: 650; fill: var(--sh-ink); font-variant-numeric: tabular-nums; } .sh-flow text.p { font-size: 15px; font-weight: 700; fill: var(--sh-battery); font-variant-numeric: tabular-nums; } .sh-flow text.s { font-size: 12px; fill: var(--sh-muted); } .sh-flow text.s.good { fill: var(--sh-delta-good-text); } .sh-flow text.s.bad { fill: var(--sh-delta-bad-text); } .sh-flow text.s.warn { fill: var(--sh-warning); font-weight: 650; } .sh-flow .flow { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 9; animation: sh-flow var(--dur, 2.5s) linear infinite; } .sh-flow .flow.back { animation-direction: reverse; } .sh-flow .flow.idle { stroke: var(--sh-grid) !important; stroke-dasharray: none; animation: none; stroke-width: 2; } /* The grid line while off grid: severed, amber, still. */ .sh-flow .broken { fill: none; stroke: var(--sh-warning); stroke-width: 2.5; stroke-linecap: round; } .sh-flow .broken.mark { stroke-width: 2; } .sh-tile .sub.warn { color: var(--sh-warning); } @keyframes sh-flow { to { stroke-dashoffset: -12; } } /* The chevrons riding the lines are SMIL, which CSS cannot pause — under reduced motion they go. */ @media (prefers-reduced-motion: reduce) { .sh-flow .flow { animation: none; } .sh-flow .arrow { display: none; } } .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: 13px; 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: 13.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: 13px; 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: 14px; flex-wrap: wrap; margin-bottom: 4px; } .sh-chart-title { font-size: 15px; font-weight: 650; } .sh-chart-title .unit { color: var(--sh-muted); font-weight: 500; } .sh-legend { display: flex; gap: 8px 14px; flex-wrap: wrap; min-width: 0; font-size: 13.5px; color: var(--sh-ink-2); } .sh-legend .key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .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; flex-shrink: 0; } .sh-legend .line.dashed { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important; } .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; } /* The pointer layer over the plot: a finger across it is the chart's (the crosshair follows), up or down is still the page's scroll. Everything inside it is pointer-transparent so the script's offsets are always the layer's own. */ .sh-hover-layer { position: absolute; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .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: 13.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); } /* Pinned on release: a firmer line and a bolder card, so the values read after the finger lifts. */ .sh-crosshair.pinned { width: 2px; margin-left: -0.5px; background: var(--sh-ink-2); } .sh-tooltip.pinned { border-color: var(--sh-ink-2); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); font-size: 14.5px; } .sh-tooltip.pinned .row .val { color: var(--sh-ink); } /* table twin */ .sh-table-twin { margin: 6px 2px 8px; } .sh-table-twin summary { font-size: 13.5px; color: var(--sh-muted); cursor: pointer; } .sh-table-twin table { border-collapse: collapse; margin-top: 8px; font-size: 13.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: 15px; } .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: 14.5px; color: var(--sh-ink-2); background: var(--sh-surface); } .sh-updated { font-size: 13px; 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: 19px; } .sh-auth-title { margin: 0 0 16px; font-size: 24px; font-weight: 600; } .sh-auth-form { display: flex; flex-direction: column; gap: 16px; } .sh-auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; 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: 13px; 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: 14px; 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: 14px; 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: 13px; 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: 13px; 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: 13px; 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: 13px; 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: 14px; 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: 16px; 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; } /* A grid item's default min-width is its content's min-content, which on a phone let the Powerwall tab's settings card grow past its track and push the whole page 16 px wider than the screen. Every grid item takes its track; content wraps inside it. */ .sh-grid > * { min-width: 0; } .sh-ctl-status { font-size: 14px; 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: 14px; 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: 12px; font-size: 14.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: 16px; } .sh-slider-row input[type="range"] { flex: 1; accent-color: var(--sh-home); } .sh-slider-value { font-size: 16px; 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: 14px; 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: 14px; 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: 18px; line-height: 1.2; } .sh-wx-strip .t { font-size: 12.5px; font-weight: 600; } .sh-wx-strip .hh { font-size: 11.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: 12px; flex-wrap: wrap; } .sh-rule-card .drag { cursor: grab; color: var(--sh-muted); font-size: 16px; 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: 15.5px; } .sh-rule-card .head .spacer { flex: 1; } .sh-rule-card .sentence { margin: 8px 0 0; font-size: 14.5px; } .sh-rule-card .meta { margin: 4px 0 0; font-size: 13px; 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: 14.5px; font-weight: 650; color: var(--sh-ink-2); margin: 12px 0 0; } .sh-editor-row { display: flex; gap: 12px; 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: 13px; 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: 14px; } .sh-changes li { display: flex; gap: 14px; padding: 9px 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: 12px; 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: 13.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: 13px; } /* Conditions-met count in the rule header. */ .sh-ready-badge { font-size: 12px; 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: 12px; flex-wrap: wrap; font-size: 14.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: 12px; flex-wrap: wrap; } .sh-tariff-card .head .name { font-size: 15.5px; } .sh-tariff-card .head .spacer { flex: 1; } .sh-tariff-card .meta { margin: 8px 0 0; font-size: 13.5px; color: var(--sh-muted); } .sh-tariff-current { margin: 0 0 4px; display: flex; align-items: baseline; gap: 12px; 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: 15px; } .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: 14px; margin: 6px 0 10px; } .sh-tariff-table th { text-align: left; color: var(--sh-muted); font-weight: 500; font-size: 13px; 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: 13.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: 14px; } /* Compact next-up strip at the top of the Automations page. */ .sh-nextup-inline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-size: 14.5px; } .sh-nextup-inline .sh-nextup-label { color: var(--sh-muted); font-size: 13px; } .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: 12px; 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: 12px; 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: 14.5px; line-height: 1.5; } .sh-ai-starters { margin-top: 8px; display: flex; align-items: baseline; gap: 12px; 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: 14px; 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: 14.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: 15.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: 12px; flex-wrap: wrap; margin-bottom: 0; } .sh-ai-rule .sentence { margin: 4px 0 0; font-size: 14.5px; } .sh-ai-rule .why { margin: 2px 0 0; font-size: 13.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: 12.5px; line-height: 1.55; 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: 12px; flex-wrap: wrap; width: 100%; padding: 8px 0; border: 0; background: none; color: var(--sh-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .sh-ai-run-row .when { color: var(--sh-muted); font-size: 13px; 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: 12px; 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: 14px; color: var(--sh-warning); } .sh-ai-banner { margin-bottom: 14px; font-size: 14.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: 16px; margin: 18px 0 8px; } .sh-ai-why { margin: 4px 0 0; font-size: 13.5px; color: var(--sh-ink-2); } /* ── Account page ─────────────────────────────────────────────────────── */ .sh-account-card { margin-bottom: 14px; } .sh-account-card .head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .sh-account-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; } .sh-account-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; 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: 14.5px; } .sh-account-form .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sh-account-range { display: flex; gap: 12px; } .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: 14px; letter-spacing: 0.5px; } .sh-2fa-setup label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; 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: 14.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 { display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; /* the build stamp may still break inside a long hash; the links never do */ margin-top: 6px; font-size: 11.5px; color: var(--sh-muted); opacity: 0.7; user-select: all; } .sh-version .links { white-space: nowrap; } /* ── 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: 18px; } .sh-modal-list { margin: 0 0 12px; padding-left: 18px; font-size: 14px; 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: 14px; color: var(--sh-ink); margin-bottom: 14px; } .sh-modal-actions { display: flex; justify-content: flex-end; gap: 12px; } /* Small auxiliary links in the nav foot (manage-at-Tesla, privacy). */ .sh-nav-aux { font-size: 12.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: 16.5px; margin: 18px 0 6px; } .sh-privacy p, .sh-privacy ul { margin: 0 0 10px; font-size: 14.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: 15px; margin: 16px 0 4px; } .sh-help table { border-collapse: collapse; margin: 0 0 12px; font-size: 14px; 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: 13.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: 14.5px; } .sh-help ol { margin: 0 0 10px; padding-left: 22px; font-size: 14.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: 14px; } .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; flex-wrap: wrap; /* on a phone the buttons drop to a second line instead of stretching the card */ align-items: center; gap: 12px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--sh-border); border-radius: 8px; background: var(--sh-page); font-size: 14.5px; flex-wrap: wrap; } .sh-provider-row .drag { cursor: grab; color: var(--sh-muted); font-size: 16px; 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: 13px; 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: 13.5px; } .sh-provider-form { margin-top: 12px; } .sh-provider-form-title { font-size: 14.5px; } .sh-provider-help { margin: -2px 0 4px; display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--sh-ink-2); } .sh-provider-help a { color: var(--sh-home); } /* The key guide callout at the top of Settings › AI providers: the way to a key before the list, louder while there is none. */ .sh-key-guide { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 18px; padding: 16px 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--sh-solar) 30%, transparent); background: color-mix(in srgb, var(--sh-solar) 8%, var(--sh-surface)); } .sh-key-guide .ico { color: var(--sh-solar); flex-shrink: 0; display: inline-flex; margin-top: 2px; } .sh-key-guide .t { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sh-key-guide strong { font-size: 17px; } .sh-key-guide .t > span:not(.links) { color: var(--sh-ink-2); font-size: 15px; } .sh-key-guide .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .sh-key-guide .links a { text-decoration: none; } /* ── 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: 14px; 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: 14px; color: var(--sh-ink-2); } .sh-demo-bar span { flex: 1 1 260px; } .sh-demo-bar .sh-btn-primary { font-size: 13.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: 12px; flex-wrap: wrap; font-size: 14.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: 12px 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: 13px; color: var(--sh-muted); } .sh-glance dd { margin: 2px 0 0; font-size: 15px; 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: 14px; 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: 13.5px; font-weight: 400; line-height: 1.55; 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: 12px; 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: 14.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: 14.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: 13.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: 12px; 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: 15px; } .sh-sentence .w { flex: 0 0 56px; color: var(--sh-muted); font-size: 14px; } .sh-sentence .word { color: var(--sh-ink-2); font-size: 14.5px; } .sh-sentence .pill { font: inherit; font-size: 14px; 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: 12px; flex-wrap: wrap; margin: 0 0 8px; font-size: 14.5px; } .sh-capture-row { margin: 10px 0 6px; align-items: center; } .sh-capture-row input { flex: 1 1 240px; font: inherit; font-size: 14.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: 12px; flex-wrap: wrap; } .sh-prow .head .name { font-size: 15px; } .sh-prow .meta { margin: 4px 0 0; font-size: 13.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: 16px; align-items: start; } .sh-settings > * { min-width: 0; } /* the section takes its track on a phone too, whatever its widest row wants */ .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: 15px; text-decoration: none; } .sh-subnav a .t { flex: 1; } .sh-subnav a .ico { display: inline-flex; flex: 0 0 18px; width: 18px; height: 18px; color: var(--sh-muted); } .sh-subnav a.active .ico { color: var(--sh-ink); } .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; } /* Settings › Site's cards, targets of settings/site#tesla etc. — clear the phone's sticky top bar. */ .sh-settings-anchor { display: block; scroll-margin-top: 64px; } @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: auto minmax(0, 1fr) auto; column-gap: 12px; 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: 15.5px; } .sh-subnav a .sh-hint { display: block; } .sh-subnav a .chev { display: inline-flex; grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--sh-muted); } .sh-subnav a .ico { grid-column: 1; grid-row: 1 / 3; align-self: center; color: var(--sh-muted); } .sh-subnav a .t, .sh-subnav a .sh-hint { grid-column: 2; } .sh-subnav a.active, .sh-subnav a:hover { background: none; } .sh-settings-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--sh-ink-2); text-decoration: none; margin-bottom: 8px; } .sh-settings-title { display: block; font-size: 22px; font-weight: 650; margin: 0 0 14px; } } /* Account as rows. */ .sh-acct-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sh-grid); font-size: 15px; } .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: 12px; } .sh-tesla .row { display: flex; align-items: center; gap: 12px; 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: 14px; 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: 14.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: 12px; 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: 14px; 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: 15px; 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: 13px; padding: 3px 8px; } .sh-setup-foot { margin: 10px 0 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; } .sh-setup-next { margin: 8px 0 0; font-size: 14px; } .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: 17px; color: var(--sh-ink); } .sh-setup-gate p { font-size: 15px; line-height: 1.55; color: var(--sh-ink-2); margin: 0 0 12px; } .sh-dash-foot { display: flex; align-items: center; gap: 14px; 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: 14px; 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: 14.5px; } .sh-rule-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; 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: 14px; 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: 14.5px; font-weight: 600; } .sh-dash-bar .spacer { flex: 1; text-align: center; font-size: 13px; color: var(--sh-muted); } .sh-dash-bar .sh-btn-primary { font-size: 13px; 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: 13.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: 13px; 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: 14px; 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: 13px; 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: 12px; 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: 12px; 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(14px * var(--sh-scale, 1)); } .sh-tile .value { font-size: calc(28px * var(--sh-scale, 1)); } .sh-tile .value .unit { font-size: calc(15px * var(--sh-scale, 1)); } .sh-tile .sub { font-size: calc(13.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(56px * var(--sh-scale, 1)); } .sh-hero .big .pct { font-size: calc(28px * var(--sh-scale, 1)); } .sh-hero .cap { font-size: calc(14px * var(--sh-scale, 1)); } .sh-glance dt { font-size: calc(13px * var(--sh-scale, 1)); } .sh-glance dd { font-size: calc(15px * var(--sh-scale, 1)); } .sh-driving { font-size: calc(14.5px * var(--sh-scale, 1)); } .sh-ai-summary { font-size: calc(15.5px * var(--sh-scale, 1)); } .sh-ai-rule .sentence { font-size: calc(14.5px * var(--sh-scale, 1)); } .sh-rule-list { font-size: calc(14.5px * var(--sh-scale, 1)); } .sh-wx-strip .ico { font-size: calc(18px * var(--sh-scale, 1)); } .sh-wx-strip .t { font-size: calc(12.5px * var(--sh-scale, 1)); } .sh-wx-strip .hh { font-size: calc(11.5px * var(--sh-scale, 1)); } .sh-chart-title { font-size: calc(15px * 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: 12px; 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: 12px 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: 12px; color: var(--sh-ink-2); } .sh-tile-tools .grp button, .sh-widget-bar .grp button { font: inherit; font-size: 15px; 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%; } } /* ── Shape (2026-09-17): the app's own silhouette ─────────────────────────────── A tester said the app's general shape felt like Claude's: flat cards with a hairline border, small tracked capitals for section labels, ghost buttons, hints everywhere. This layer sits last and reshapes those without touching the layout: cards float on a soft shadow (light mode; dark keeps its hairline, a shadow reads as nothing there) with a rounder corner, section labels are sentence-case headings, a tile's icon sits in a tinted chip, buttons and fields are pills, and the sidebar's current page is a tinted pill. */ .sh-card { border: 1px solid light-dark(transparent, var(--sh-border)); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px -14px rgba(15, 23, 42, 0.16); } /* Dark lifts the same way with light instead of black: a faint bright edge and a small, dim bloom under the card. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sh-card { box-shadow: 0 1px 2px rgba(255, 255, 255, 0.05), 0 8px 20px -12px rgba(255, 255, 255, 0.10); } } :root[data-theme="dark"] .sh-card { box-shadow: 0 1px 2px rgba(255, 255, 255, 0.05), 0 8px 20px -12px rgba(255, 255, 255, 0.10); } .sh-sec-head { font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--sh-ink); margin: 30px 0 12px; } .sh-card h2 { font-size: 17px; font-weight: 700; color: var(--sh-ink); } .sh-tile .ico { width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center; background: color-mix(in srgb, currentColor 14%, transparent); } .sh-tile .label { gap: 9px; } .sh-btn-primary { border-radius: 999px; padding: 10px 18px; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--sh-home) 75%, transparent); } .sh-btn-ghost { border-radius: 999px; padding: 5px 12px; } .sh-account-form input, .sh-account-form select { border-radius: 10px; } .sh-subnav a { border-radius: 12px; } @media (min-width: 761px) { .sh-nav { border-right: none; } .sh-nav-links a { padding: 9px 12px; border-radius: 12px; } .sh-nav-links a.active { background: color-mix(in srgb, var(--sh-home) 12%, transparent); color: var(--sh-ink); font-weight: 650; } .sh-nav-links a.active .ico { color: var(--sh-home); } } /* Settings › Site, EV charger card (docs/EV-CHARGERS.md): the state line and the charger picker. */ .sh-charger-state { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; font-size: 20px; } .sh-charger-state.on strong { color: var(--sh-battery); } .sh-radio { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 15px !important; color: var(--sh-ink) !important; } .sh-radio input { width: auto !important; margin: 0; } /* Dropdown lists are drawn by the browser from color-scheme, not from the select's own colours: a select on a translucent pill inherited nothing and Chrome painted its list light with the page's white ink on it (2026-09-18). Every select now carries the scheme the page is in, and the options carry the surface colours for the browsers that honour them. */ select { color-scheme: light dark; } :root[data-theme="light"] select { color-scheme: light; } :root[data-theme="dark"] select { color-scheme: dark; } select option, select optgroup { color: var(--sh-ink); background: var(--sh-surface); } select option:disabled { color: var(--sh-muted); } /* The Driving line's EV chip (docs/EV-CHARGERS.md): the car's state beside who is in charge. */ .sh-driving-ev { display: inline-flex; align-items: center; gap: 6px; } .sh-driving-ev .ico { display: inline-flex; color: var(--sh-muted); } .sh-driving-ev .ico svg { width: 14px; height: 14px; } /* Settings › Site, Local gateway card (docs/LOCAL-GATEWAY.md): the string readout and the three steps. */ .sh-strings { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 6px 0 4px; } .sh-string { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sh-solar) 8%, var(--sh-surface)); border: 1px solid color-mix(in srgb, var(--sh-solar) 25%, transparent); } .sh-string .name { font-size: 13px; color: var(--sh-ink-2); } .sh-string strong { font-size: 20px; } .sh-string strong .unit { font-size: 13px; font-weight: 500; color: var(--sh-muted); } .sh-gateway-steps { list-style: none; counter-reset: step; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .sh-gateway-steps li { counter-increment: step; display: flex; flex-direction: column; gap: 6px; padding-left: 34px; position: relative; } .sh-gateway-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--sh-ink-2); background: color-mix(in srgb, var(--sh-ink) 8%, transparent); } .sh-gateway-steps li.done::before { content: "✓"; color: #fff; background: var(--sh-battery); } .sh-gateway-steps .sh-btn-primary, .sh-gateway-steps .sh-btn-ghost { align-self: flex-start; } .sh-gateway-keys { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sh-gateway-keys li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }