@font-face { font-family: "Nunito Sans"; src: url("/web/nunito-sans.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { font: 16px/1.5 "Avenir Next", "Nunito Sans", system-ui, sans-serif; color: #12243b; background: #f4f7f8; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: #124b72; }
:focus-visible { outline: 3px solid #b77712; outline-offset: 3px; }
.skip-link { position: absolute; z-index: 20; transform: translateY(-200%); background: #fff; padding: .6rem 1rem; }
.skip-link:focus { transform: none; }
.shell { max-width: 1440px; margin: auto; min-height: 100dvh; display: grid; grid-template-columns: 240px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100dvh; background: #0d2b46; color: #fff; padding: 1.4rem 1rem; display: flex; flex-direction: column; gap: 1.4rem; }
.brand { font-size: 1.55rem; font-weight: 750; letter-spacing: -.04em; color: inherit; text-decoration: none; padding: .15rem .7rem; }
.nav { display: grid; gap: .45rem; }
.nav button { color: inherit; border: 0; border-radius: 12px; background: transparent; padding: .75rem .8rem; text-align: left; min-height: 44px; }
.nav button[aria-current="page"] { background: #f8d980; color: #102740; font-weight: 700; }
.nav button:hover:not([aria-current]) { background: #21435e; }
.sidebar-foot { margin-top: auto; font-size: .82rem; opacity: .82; padding: .7rem; }
.mobile-nav { display: none; }
.main-wrap { min-width: 0; padding: clamp(1rem, 3vw, 2.4rem); }
.content { max-width: 1060px; margin: auto; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.15; letter-spacing: -.035em; margin: 0; }
h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; margin: 0 0 .9rem; }
h3 { font-size: 1.08rem; margin: 0 0 .45rem; }
p { margin: .35rem 0 .8rem; }
.muted { color: #536373; }
.eyebrow { font-size: .83rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #526374; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1rem; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
.card { background: #fff; border: 1px solid #dbe4e8; border-radius: 18px; box-shadow: 0 1px 5px #14324a0a; padding: clamp(1rem, 2vw, 1.4rem); min-width: 0; }
.card.tint { background: #fff8df; border-color: #f4dfa2; }
.value { font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.2; overflow-wrap: anywhere; }
.metric-label { color: #4a5d6d; margin: 0 0 .4rem; }
.pill { display: inline-block; border-radius: 999px; padding: .18rem .6rem; background: #e2f2ed; color: #155443; font-size: .85rem; font-weight: 650; }
.pill.warning { background: #fff0d2; color: #754a00; }
.pill.neutral { background: #e8eff3; color: #334b5c; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: .85rem 0; border-top: 1px solid #e6ecef; }
.list li:first-child { border-top: 0; padding-top: 0; }
.row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
button.primary, button.secondary, select { border-radius: 10px; min-height: 44px; padding: .55rem .85rem; }
button.primary { color: white; background: #0c456d; border: 1px solid #0c456d; font-weight: 650; }
button.secondary { color: #0c456d; background: white; border: 1px solid #95a9b6; }
button.link { border: 0; background: none; color: #0c456d; padding: .35rem 0; text-decoration: underline; text-underline-offset: 3px; }
select, input, textarea { max-width: 100%; border: 1px solid #8da4b1; background: #fff; color: #142d42; }
.form-field { display: grid; gap: .35rem; margin: .9rem 0; min-width: 0; }
#octopus-key-source { width: 100%; min-width: 0; }
.form-field textarea { width: 100%; padding: .65rem .75rem; border-radius: 9px; resize: vertical; }
.form-field input { padding: .65rem .75rem; border-radius: 9px; min-height: 44px; width: 100%; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }
.notice { border-left: 4px solid #b77712; background: #fff4dc; padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.error { border-left-color: #b13535; background: #fff0ef; }
.auth-layout { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-layout > .card { min-width: 0; width: min(100%, 440px); }
.auth-layout input { min-width: 0; }
.auth-card { width: min(100%, 440px); }
.auth-brand { color: #0d2b46; display: block; margin-bottom: 1.3rem; }
.details { white-space: pre-wrap; }
.insights-card { margin-top: 1rem; }
.chart-card svg { width: 100%; height: auto; display: block; }
.table-scroll { overflow-x: auto; max-height: 30rem; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; min-width: 430px; }
th,td { text-align: left; padding: .55rem; border-bottom: 1px solid #dbe4e8; }
summary { cursor: pointer; font-weight: 650; }
.legal-review { margin: 1.3rem 0; }
.legal-body { border: 1px solid #8da4b1; border-radius: 8px; padding: .8rem; max-height: 18rem; overflow: auto; }
.legal-body p, .legal-summary p { white-space: pre-wrap; margin: 0 0 .8rem; }
.legal-body .legal-heading, .legal-summary .legal-heading { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.legal-body > :first-child, .legal-summary > :first-child { margin-top: 0; }
.legal-summary .legal-heading { font-size: .98rem; }
.check-row { display: flex; gap: .6rem; align-items: flex-start; margin-top: .7rem; }
.check-row input { width: 1.2rem; height: 1.2rem; flex: none; }
@media (max-width: 800px) { .shell { grid-template-columns: 1fr; } .sidebar { display: none; } .mobile-nav { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(4,1fr); background: white; border-top: 1px solid #dbe4e8; z-index: 10; } .mobile-nav button { border: 0; background: transparent; color: #23445b; min-height: 60px; padding: .5rem .15rem; font-size: .8rem; } .mobile-nav button[aria-current="page"] { color: #0c456d; font-weight: 750; box-shadow: inset 0 3px #d49a22; } .main-wrap { padding: 1rem 1rem 1.8rem; } .span-8,.span-6,.span-4 { grid-column: span 12; } }
@media (min-width: 620px) and (max-width: 800px) { .span-6,.span-4 { grid-column: span 6; } }
@media (prefers-reduced-motion: no-preference) { button, a { transition: background-color .15s, color .15s; } }
/* Shared Wiggle visual language from WiggleTheme.swift. */
:root { font-family: "Avenir Next", "Nunito Sans", system-ui, sans-serif; color: #102d75; background: #f6f8fc; }
a,button.link { color: #102d75; }
:focus-visible { outline-color: #f5a623; }
.shell { max-width: none; grid-template-columns: 252px minmax(0,1fr); }
.sidebar { background: #102d75; padding: 1.8rem 1.15rem; gap: 2.2rem; }
.brand { padding: .3rem .65rem; display: block; }
.brand-logo { width: 132px; height: auto; display: block; }
.sidebar .brand-logo { width: 144px; }
.nav { gap: .35rem; }
.nav button { border-radius: 14px; font-size: 1rem; font-weight: 600; padding: .84rem 1rem; }
.nav button[aria-current="page"] { background: #fff; color: #102d75; }
.nav button:hover:not([aria-current]) { background: #25458c; }
.main-wrap { padding: clamp(1.2rem, 3vw, 3rem); }
.content { max-width: 1120px; }
h1 { color: #102d75; font-weight: 750; }
h2,h3 { color: #102d75; }
.muted,.metric-label { color: #58698f; }
.eyebrow { color: #58698f; letter-spacing: .09em; font-size: .72rem; }
.card { border-color: #dde3ef; border-radius: 14px; box-shadow: 0 8px 24px #102d7510; }
.card.tint { background: #fff8e9; border-color: #f5a62388; }
button.primary { background: #102d75; border-color: #102d75; }
button.secondary { color: #102d75; border-color: #aab7d1; }
.pill { background: #e8f5ef; color: #277e60; }
.pill.neutral { background: #eaf0ff; color: #102d75; }
.notice { border-left-color: #f5a623; background: #fff7e8; color: #70500a; }
.page-head { margin-bottom: 1.65rem; align-items: center; }
.page-head h1 { font-size: clamp(1.9rem,3vw,2.65rem); }
.page-head p { margin-bottom: 0; }
.today-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.today-grid .card { min-height: 194px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.today-card,.savings-hero { background: linear-gradient(125deg,#fff4d8 0%,#fffaf0 50%,#f6f8fc 100%); border-color: #f1dfb6; }
.hero-value { display: block; font-size: clamp(2.45rem,5vw,4rem); line-height: 1.08; font-weight: 750; letter-spacing: -.055em; margin: .4rem 0; color: #102d75; }
.hero-sub { font-size: 1rem; font-weight: 600; color: #102d75; }
.today-card .muted { margin-top: .5rem; font-size: .86rem; }
.actions-card .row { width: 100%; margin-bottom: .6rem; }
.action-title { font-size: 1.48rem; line-height: 1.2; }
.actions-card p { margin: .6rem 0; }
.home-refresh-notice button.link, .timeline-refresh-notice button.link, .savings-refresh-notice button.link { margin-left: .5rem; }
.home-section { margin-top: 2rem; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.section-title h2 { margin: 0; }
.rate-badge { padding: .35rem .75rem; border-radius: 99px; background: #eaf0ff; color: #102d75; font-size: .87rem; font-weight: 650; white-space: nowrap; }
.home-tiles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.home-tile { position: relative; min-width: 0; min-height: 154px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 1px solid #dde3ef; border-radius: 14px; background: #fff; padding: 1rem; box-shadow: 0 8px 24px #102d750a; color: #102d75; }
/* Touch screens keep a hover after a tap, so only a real pointer lifts a card on hover. */
@media (hover: hover) { button.home-tile:hover { border-color: #5f88e8; transform: translateY(-2px); } }
.tile-icon { font-size: 1.22rem; font-weight: 700; color: #f5a623; line-height: 1; margin-bottom: auto; }
.tile-label { color: #58698f; font-size: .89rem; margin-top: .55rem; }
.tile-value { font-size: 1.35rem; line-height: 1.2; margin: .2rem 0; overflow-wrap: anywhere; }
.tile-foot { color: #58698f; font-size: .74rem; line-height: 1.25; padding-right: 1rem; }
.tile-arrow { position: absolute; right: 1rem; bottom: .8rem; font-size: 1.45rem; color: #5f88e8; }
.insight-list { border: 1px solid #dde3ef; border-radius: 14px; overflow: hidden; background: #fff; }
.insight-row { width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 1rem; border: 0; border-bottom: 1px solid #dde3ef; background: #fff; padding: .85rem 1rem; color: #102d75; }
.insight-row:last-child { border-bottom: 0; }
.insight-row:hover { background: #f6f8fc; }
.insight-row div { display: grid; gap: .15rem; }
.insight-row span.muted { font-size: .85rem; }
.chevron { color: #5f88e8; font-size: 1.5rem; }
.urgent-insight { margin-top: 1rem; border: 1px solid #f5a623; border-radius: 14px; overflow: hidden; }
.period-picker { width: max-content; max-width: 100%; display: flex; gap: .2rem; padding: .25rem; margin-bottom: 1rem; background: #eaf0ff; border-radius: 12px; }
.period-option { min-width: 78px; min-height: 40px; padding: .35rem .8rem; border: 0; border-radius: 9px; background: transparent; color: #102d75; font-weight: 650; }
.period-option[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 8px #102d751a; }
.savings-hero { min-height: 220px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.savings-hero .pill { margin-top: .8rem; }
.savings-page .notice { margin-top: 1rem; }
.section-value { font-size: 1.65rem; }
.detail-dialog { width: min(520px,calc(100vw - 2rem)); max-height: min(85dvh,800px); overflow: auto; border: 1px solid #dde3ef; border-radius: 18px; padding: 1.4rem; color: #102d75; box-shadow: 0 24px 80px #102d7540; }
.detail-dialog::backdrop { background: #0b1020a8; }
.detail-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.detail-reading { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; }
.detail-reading strong { font-size: 2rem; }
.device-facts { border-top: 1px solid #dde3ef; }
.device-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid #dde3ef; }
.device-facts dt { color: #58698f; }.device-facts dd { margin: 0; text-align: right; }
.rename-form { margin-top: 1.4rem; }
.auth-brand .brand-logo { width: 160px; }
.flow-composite svg{display:block;width:100%;height:auto;margin:.8rem 0}.flow-legend{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.78rem;color:#58698f}.flow-legend span{display:inline-flex;align-items:center;gap:.35rem}.flow-legend i{width:.72rem;height:.72rem;border-radius:3px;display:inline-block}.flow-composite details{margin-top:.7rem}@media(prefers-color-scheme:dark){.flow-legend{color:#aab7d1}}
.timeline-layer-section .chart-card svg{cursor:crosshair;touch-action:pan-y}
.chart-card svg { color: #102d75; }
@media(max-width:800px) { .shell { grid-template-columns: 1fr; } .main-wrap { padding: 1.1rem 1rem 2rem; } .mobile-nav { border-color: #dde3ef; } .mobile-nav button { color: #58698f; } .mobile-nav button[aria-current="page"] { color: #102d75; box-shadow: inset 0 3px #f5a623; } .home-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .today-grid { grid-template-columns: 1fr; } .today-grid .card { min-height: 166px; } .home-tile { min-height: 145px; padding: .85rem; } .tile-value { font-size: 1.18rem; } .rate-badge { font-size: .77rem; } .section-title { align-items: flex-start; } }
.home-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.attention-button { min-height: 34px; border: 1px solid #f5a623; border-radius: 99px; padding: .3rem .75rem; background: #fff7e8; color: #8a5510; font-weight: 700; font-size: .83rem; }
.attention-button:hover { background: #ffebc4; }
.attention-list { display: grid; gap: .7rem; margin: 1rem 0; }
.attention-item { padding: .9rem; border: 1px solid #dde3ef; border-radius: 12px; background: #f6f8fc; }
.attention-item p { margin-bottom: 0; font-size: .88rem; }
@media(prefers-color-scheme:dark) { .attention-button { background: #3d321d; color: #ffda8e; } .attention-item { background: #202a40; border-color: #34425d; } }
.device-history { margin-top: 1.35rem; border-top: 1px solid #dde3ef; padding-top: 1.2rem; }
.device-history svg { width: 100%; height: auto; display: block; margin-top: .5rem; }
.history-axis { color: #58698f; font-size: .78rem; margin: .25rem 0 1rem; }
.device-history details { margin-top: 1rem; }.device-history table { font-size: .83rem; }
@media(prefers-color-scheme:dark) { .device-history { border-color: #34425d; } .history-axis { color: #aab7d1; } }
.reported-values { margin-top: 1rem; padding: .8rem 0; border-top: 1px solid #dde3ef; border-bottom: 1px solid #dde3ef; }
.reported-values summary { color: #102d75; }
@media(prefers-color-scheme:dark) { .reported-values { border-color: #34425d; } .reported-values summary { color: #eaf0ff; } }
.action-form h3 { margin: 1.2rem 0 .35rem; }.action-form .form-field { margin: .55rem 0; }
.action-form select,.action-form input[type="time"],.action-form input[type="number"] { width: 100%; min-height: 44px; border-radius: 9px; padding: .55rem .7rem; }
.action-form .target-field { min-height: 3.2rem; }.action-form .check-row { align-items: center; }
.action-form .check-row input { width: 1.15rem; min-height: 1.15rem; }
.action-summary { margin-top: 1rem; }.action-form .form-actions { margin-bottom: .7rem; }
.device-actions { margin-top: 1.3rem; border-top: 1px solid #dde3ef; padding-top: 1.1rem; }
.device-actions .list li button { margin-right: .6rem; }.page-actions { margin-top: 0; }
@media(prefers-color-scheme:dark) { .device-actions { border-color: #34425d; } }

[hidden] { display: none !important; }
.device-choice-list { display: grid; gap: .7rem; }
.metric-history { margin: 1.2rem 0; }.metric-history .chart-card { padding: .85rem; }
.metric-history .chart-card h2 { font-size: 1.15rem; }.metric-history .chart-card p { font-size: .82rem; }
.metric-history .table-scroll { max-height: 16rem; }
.timeline-layer-section { margin: 1.1rem 0; }.timeline-layers { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .85rem; }
.layer-chip { border: 1px solid #dde3ef; border-radius: 999px; background: #fff; color: #102d75; min-height: 40px; padding: .45rem .85rem; font-weight: 650; }
.layer-chip[aria-pressed="true"] { background: #102d75; border-color: #102d75; color: #fff; }
.layer-chip:hover:not([aria-pressed="true"]) { background: #eaf0ff; }
@media(prefers-color-scheme:dark) { .layer-chip { background: #151d30; border-color: #34425d; color: #eaf0ff; } .layer-chip[aria-pressed="true"] { background: #5f88e8; border-color: #5f88e8; color: #0b1020; } .layer-chip:hover:not([aria-pressed="true"]) { background: #202a40; } }

/* Savings detail follows the iOS comparison content while fitting narrow browsers. */
.supplier-label { color: #58698f; font-size: .82rem; font-weight: 650; }
.heat-pump-detail > p { line-height: 1.45; }
.comparison { border: 1px solid #dde3ef; border-radius: 14px; padding: 1rem; margin: 1.1rem 0; }
.comparison h3 { margin-top: 0; }
.comparison-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.comparison-row { background: #f6f8fc; border-radius: 12px; padding: .85rem; min-width: 0; }
.comparison-row h4 { margin: 0; }
.comparison-row p { font-size: .8rem; line-height: 1.4; }
.comparison-values { display: grid; gap: .65rem; }
.comparison-values div { display: flex; flex-direction: column; gap: .1rem; }
.comparison-values span { font-size: .78rem; }
.comparison-values strong { color: #102d75; }
@media(max-width:560px) { .comparison-grid { grid-template-columns: 1fr; } }
@media(prefers-color-scheme:dark) { .comparison { border-color: #34425d; } .comparison-row { background: #202a40; } .comparison-values strong { color: #eaf0ff; } .supplier-label { color: #aab7d1; } }

.cheap-window-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin: 1rem 0; }
@media(max-width:450px) { .cheap-window-fields { grid-template-columns: 1fr; } }

.device-controls { border-top: 1px solid #dde3ef; margin-top: 1.1rem; padding-top: 1rem; }
.device-controls h3 { margin-top: 0; }
.battery-mode-list { display: grid; gap: .65rem; }
.battery-mode-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border: 1px solid #dde3ef; border-radius: 12px; }
.battery-mode-row p { margin: .2rem 0; font-size: .82rem; }
.battery-mode-row button { flex: none; }
@media(max-width:450px) { .battery-mode-row { align-items: flex-start; flex-direction: column; } }
@media(prefers-color-scheme:dark) { .device-controls,.battery-mode-row { border-color: #34425d; } }

.property-choices{display:grid;gap:.75rem;margin-top:1rem}.property-choice{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem;border:1px solid #dde3ef;border-radius:14px;cursor:pointer}.property-choice:has(input:checked){border-color:#102d75;background:#f6f8fc}.property-choice:has(input:disabled){opacity:.65;cursor:not-allowed}.property-choice input{margin-top:.25rem}.property-choice span{display:grid;gap:.2rem;min-width:0}.property-choice small{color:#58698f}.import-progress{border-top:1px solid #dde3ef;margin-top:1rem;padding-top:.75rem}.import-progress .list li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.import-progress .list li strong{margin-right:auto}
@media(prefers-color-scheme:dark){.property-choice{border-color:#34425d}.property-choice:has(input:checked){background:#202a40}.property-choice small{color:#aab7d1}.import-progress{border-color:#34425d}}

.setup-details{border-top:1px solid #dde3ef;margin-top:1.1rem;padding-top:1rem}.setup-details h3{margin:.2rem 0 .3rem}.setup-detail-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.setup-detail-fields>*{min-width:0}@media(max-width:620px){.setup-detail-fields{grid-template-columns:1fr}}@media(prefers-color-scheme:dark){.setup-details{border-color:#34425d}}
.next-home-card{border-color:#f5a62377;background:#fff9ec}.next-home-card .eyebrow{display:block}.next-home-card h2{margin:.3rem 0}.next-home-card button{margin-right:.5rem}@media(prefers-color-scheme:dark){.next-home-card{background:#3d321d;border-color:#745b29}}
.setup-card{border-color:#f5a62377;background:linear-gradient(110deg,#fff9ec,#fff 55%)}.setup-card .eyebrow{display:block;margin-bottom:.35rem}.setup-states{display:flex;flex-wrap:wrap;gap:.65rem 1rem;margin:1rem 0}.setup-states>div{display:flex;align-items:center;gap:.5rem}.setup-card .form-actions{margin-top:.75rem}@media(prefers-color-scheme:dark){.setup-card{background:linear-gradient(110deg,#3d321d,#151d30 55%);border-color:#745b29}}

.support-card .receipt-id{display:block;margin:1rem 0;font-size:1.2rem}.support-card button.link{display:block;margin-top:.7rem}.support-counter{font-size:.78rem}.support-fallback{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.8rem}.support-fallback p,.support-fallback [role=status]{flex-basis:100%;margin:.2rem 0}.support-fallback a{min-height:44px;display:inline-flex;align-items:center}
.receipt-id{user-select:text;overflow-wrap:anywhere}.detail-dialog .card{margin:.75rem 0;box-shadow:none}

button.destructive{border:1px solid #ad2636;border-radius:10px;background:#ad2636;color:#fff;min-height:44px;padding:.55rem .85rem;font-weight:700}button.destructive:hover:not(:disabled){background:#8c1d2b}

.related-devices,.reported-schedule{border-top:1px solid #dde3ef;margin-top:1rem;padding-top:1rem}.related-device,.schedule-row{display:grid;gap:.1rem;padding:.7rem 0;border-top:1px solid #e6eaf2}.related-device:first-of-type,.schedule-row:first-of-type{border-top:0}.related-device p,.schedule-row p{margin:.15rem 0}.related-device span{font-size:1.2rem;font-weight:650}@media(prefers-color-scheme:dark){.related-devices,.reported-schedule,.related-device,.schedule-row{border-color:#34425d}}

.timeline-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.5rem;margin:.4rem 0 .8rem}.preset-chip{min-height:44px;border:1px solid #dde3ef;border-radius:12px;background:#fff;color:#102d75;font-weight:700;padding:.6rem}.preset-chip[aria-pressed="true"]{border-color:#102d75;background:#102d75;color:#fff}@media(prefers-color-scheme:dark){.preset-chip{background:#151d30;border-color:#34425d;color:#eaf0ff}.preset-chip[aria-pressed="true"]{background:#f5a623;color:#102d75;border-color:#f5a623}}

.choice-chip{min-height:44px;border:1px solid #dde3ef;border-radius:12px;background:#fff;color:#102d75;font-weight:700;padding:.6rem .85rem}.choice-chip[aria-pressed="true"]{border-color:#102d75;background:#102d75;color:#fff}@media(prefers-color-scheme:dark){.choice-chip{background:#151d30;border-color:#34425d;color:#eaf0ff}.choice-chip[aria-pressed="true"]{background:#f5a623;color:#102d75;border-color:#f5a623}}

.cost-detail-charts{display:grid;gap:1rem;margin-top:1rem}.cost-detail-charts .chart-card{grid-column:auto}.cost-detail-charts .card{box-shadow:none}.cost-detail-charts .table-scroll{max-height:15rem}

/* The paired Today cards follow the compact native Home hierarchy. */
.today-grid{gap:.65rem}.today-grid .card{min-height:132px;padding:1rem;justify-content:flex-start;box-shadow:0 3px 10px #102d7510}.today-card{background:linear-gradient(130deg,#fff2d6,#f6f8fc);border-color:#f5a62355}.today-label,.today-detail{color:#58698f;font-size:.8rem;line-height:1.25}.today-card .hero-value{font-size:clamp(1.65rem,2.6vw,2.1rem);margin:.2rem 0 .1rem;letter-spacing:-.04em}.today-open{min-height:30px;border:0;background:transparent;color:#102d75;font-size:.76rem;font-weight:700;padding:0;margin-top:auto;text-decoration:underline;text-underline-offset:3px}.actions-card{gap:.25rem}.activity-head{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.35rem;border-bottom:1px solid #dde3ef;padding-bottom:.4rem;font-size:.82rem}.activity-head .pill{font-size:.68rem;padding:.1rem .45rem}.activity-open{border:0;background:transparent;color:#102d75;text-align:left;font-weight:700;font-size:.91rem;line-height:1.2;padding:.35rem 0 0}.activity-detail{font-size:.76rem;line-height:1.25;color:#58698f}.actions-card .activity-detail{margin-top:auto}
@media(max-width:600px){.today-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.today-grid .card{min-height:132px;padding:.8rem}.today-card .hero-value{font-size:1.65rem}.today-open{font-size:.72rem}}
@media(max-width:350px){.today-grid{grid-template-columns:1fr}.today-grid .card{min-height:112px}}
@media(prefers-color-scheme:dark){.today-card{background:linear-gradient(130deg,#44351b,#202a40);border-color:#745b29}.activity-head{border-color:#34425d}.today-label,.today-detail,.activity-detail{color:#aab7d1}.today-open,.activity-open{color:#eaf0ff}}
.page-head h1{font-weight:600;letter-spacing:-.025em}.today-card .hero-value{font-weight:600}.section-title h2{font-weight:600}
@media(max-width:600px){.home-section>.section-title{display:grid;grid-template-columns:1fr;gap:.55rem}.home-section>.section-title h2{white-space:nowrap}.home-status{justify-content:flex-start}}

.cost-preference-detail{display:block;color:#58698f;font-size:.82rem;font-weight:400;margin-top:.2rem}@media(prefers-color-scheme:dark){.cost-preference-detail{color:#aab7d1}}
.timeline-zoom{display:flex;flex-wrap:wrap;gap:.2rem;width:max-content;max-width:100%;padding:.25rem;background:#eaf0ff;border-radius:12px}.timeline-window-nav{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.82rem;color:#58698f}.timeline-window-nav button{min-height:40px;border:1px solid #aab7d1;border-radius:9px;background:#fff;color:#102d75;padding:.35rem .65rem}.timeline-inspector{margin:1rem 0}.timeline-inspector h2{margin:0}.timeline-inspector input[type=range]{width:100%;min-height:44px;accent-color:#f5a623}.inspection-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.65rem}.inspection-values>div{display:grid;gap:.2rem;padding:.55rem;border-radius:9px;background:#f6f8fc}.inspection-values span{font-size:.75rem;color:#58698f}.inspection-values strong{font-size:.88rem}.inspection-marker{pointer-events:none}
@media(prefers-color-scheme:dark){.timeline-zoom,.inspection-values>div{background:#202a40}.timeline-window-nav,.inspection-values span{color:#aab7d1}.timeline-window-nav button{background:#151d30;border-color:#34425d;color:#eaf0ff}}

.timeline-presets{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.45rem}.timeline-presets .preset-chip{flex:0 0 auto;min-width:94px;scroll-snap-align:start}@media(max-width:800px){.shell{grid-template-columns:minmax(0,1fr)}.shell>div,.content{min-width:0}}

.pending-invitations{border-top:1px solid #dde3ef;margin-top:1.2rem;padding-top:1rem}.pending-invitations .row{align-items:flex-start}.pending-invitations p{margin-bottom:0}@media(prefers-color-scheme:dark){.pending-invitations{border-color:#34425d}}

/* The final theme pass wins over component light defaults above. Values mirror WiggleTheme.swift. */
:root {
  --chart-grid: #176586; --chart-export: #c9138d; --chart-home: #060099;
  --chart-solar: #b59b12; --chart-battery: #03620c; --chart-cars: #009a87;
  --chart-heat-pump: #a50017; --chart-rate: #8c1cc1; --chart-export-rate: #73890c;
  --chart-cost: #634505; --chart-running: #2b303d;
  --chart-indoor: #e00750; --chart-outdoor: #0777f8; --chart-target: #897304;
  --chart-hot-water: #97194e; --chart-weather: #312e81; --chart-carbon: #38b11a;
  --chart-space-heat: #d52900; --chart-hot-water-heat: #22a4ba; --chart-solar-heat: #582603;
  --chart-cop: #3c0b51; --chart-usual: #df6814; --chart-gas: #324fa6; --chart-gas-cost: #0b8c8c;
  --chart-wind-speed: #4f6d7a; --chart-sunshine: #e8740c; --chart-grid-wind: #14532d;
  --chart-grid-solar: #6b4226; --chart-supplier: #6e45af; --chart-now: #bf811b;
  --chart-selected: #102d75;
}
@media(prefers-color-scheme:dark) { :root { color: #eaf0ff; background: #0b1020; } h1,h2,h3,.hero-value,.hero-sub,.tile-value { color: #eaf0ff; } .card,.home-tile,.insight-list,.insight-row,.detail-dialog { background: #151d30; border-color: #34425d; color: #eaf0ff; box-shadow: none; } .today-card,.savings-hero { background: linear-gradient(125deg,#3d321d,#202a40); border-color: #745b29; } .muted,.metric-label,.tile-label,.tile-foot,.device-facts dt { color: #aab7d1; } .eyebrow { color: #aab7d1; } .rate-badge,.pill.neutral,.period-picker { background: #202a40; color: #eaf0ff; } .insight-row:hover { background: #202a40; } .mobile-nav { background: #151d30; border-color: #34425d; } .period-option { color: #eaf0ff; } .period-option[aria-pressed="true"] { background: #34425d; } .notice { background: #3d321d; color: #ffda8e; } }
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --chart-grid: #4cb8e6; --chart-export: #f127af; --chart-home: #5953ff;
    --chart-solar: #faf0b9; --chart-battery: #1aff31; --chart-cars: #67ffec;
    --chart-heat-pump: #ff1a39; --chart-rate: #c876f0; --chart-export-rate: #d4f43d;
    --chart-cost: #fbb521; --chart-running: #d5d9e4;
    --chart-indoor: #fe82ac; --chart-outdoor: #1e87fe; --chart-target: #ffe03f;
    --chart-hot-water: #f6bbd4; --chart-weather: #a5b4fc; --chart-carbon: #b2f4a1;
    --chart-space-heat: #ff7554; --chart-hot-water-heat: #8ce0ee; --chart-solar-heat: #fecfae;
    --chart-cop: #ad24e9; --chart-usual: #f59b5b; --chart-gas: #7790d9; --chart-gas-cost: #5fd9d9;
    --chart-wind-speed: #a9c3ce; --chart-sunshine: #ff9f43; --chart-grid-wind: #5eead4;
    --chart-grid-solar: #d9a47a; --chart-supplier: #b99aff; --chart-now: #ffb743;
    --chart-selected: #eaf0ff;
  }
  a, button.link, .today-open, .activity-open { color: #a9c1ff; }
  .skip-link { background: #1b253b; color: #eaf0ff; }
  button.primary { background: #5f88e8; border-color: #5f88e8; color: #0b1020; }
  button.secondary { background: #1b253b; border-color: #aab7d1; color: #eaf0ff; }
  select, input, textarea { background: #1b253b; border-color: #aab7d1; color: #eaf0ff; }
  .card.tint, .next-home-card { background: #3d321d; border-color: #745b29; }
  .pill { background: #17382f; color: #83e3ba; }
  .pill.warning { background: #3d321d; color: #ffda8e; }
  .pill.neutral { background: #202a40; color: #eaf0ff; }
  .notice.error { background: #4c2a2a; color: #ffd1cf; }
  .list li, th, td, .device-facts, .device-facts div { border-color: #34425d; }
  .auth-brand, .chart-card svg { color: #eaf0ff; }
  .chart-card svg text { fill: #aab7d1; }
  .chart-card svg text.now-label { fill: var(--chart-now); }
  .flow-legend, .timeline-detail-charts > summary { color: #aab7d1; }
  .mobile-nav button { color: #aab7d1; }
  .mobile-nav button[aria-current="page"] { color: #eaf0ff; box-shadow: inset 0 3px #ffb743; }
  .sidebar .nav button[aria-current="page"] { background: #eaf0ff; color: #102d75; }
}

.alert-history-list{display:grid;gap:.55rem;margin-top:1rem}.alert-history-item{display:flex;align-items:flex-start;gap:.7rem;width:100%;min-height:72px;padding:.75rem;border:1px solid #dde3ef;border-radius:12px;background:#fff;color:#102d75;text-align:left}.alert-history-item>span:last-child{display:grid;gap:.12rem}.alert-history-item small{font-size:.75rem}.alert-unread,.alert-read{flex:none;width:9px;height:9px;border-radius:50%;margin-top:.4rem;background:#bf811b}.alert-read{background:transparent}@media(prefers-color-scheme:dark){.alert-history-item{background:#151d30;border-color:#34425d;color:#eaf0ff}.alert-unread{background:#ffb743}}

.home-mini-suggestion{margin-top:.8rem;padding:1rem 1.1rem}.home-mini-suggestion .home-mini-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.home-mini-suggestion .home-mini-head strong{color:#102d75}.home-mini-suggestion .home-mini-head button{min-height:34px;font-size:.78rem}.home-mini-suggestion p{margin:.45rem 0 .65rem;font-size:.86rem}.home-mini-suggestion>a{color:#102d75;font-size:.86rem;font-weight:700;text-underline-offset:3px}button.rate-badge{border:0;cursor:pointer;min-height:34px}button.rate-badge:hover{text-decoration:underline}@media(prefers-color-scheme:dark){.home-mini-suggestion .home-mini-head strong,.home-mini-suggestion>a{color:#eaf0ff}}

.today-attention{display:flex;align-items:center;gap:.65rem;width:100%;min-height:58px;margin-top:.65rem;padding:.65rem 1rem;border:1px solid #dde3ef;border-radius:16px;background:#f6f8fc;color:#102d75;text-align:left}.today-attention-symbol{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#fff0d0;color:#9a5c00;font-weight:800}.today-attention>span:nth-child(2){display:grid;gap:.1rem;min-width:0}.today-attention strong{font-size:.82rem}.today-attention small{font-size:.76rem;color:#58698f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.today-attention-chevron{margin-left:auto;font-size:1.35rem}@media(prefers-color-scheme:dark){.today-attention{background:#202a40;border-color:#34425d;color:#eaf0ff}.today-attention small{color:#aab7d1}.today-attention-symbol{background:#4a381d;color:#ffda8e}}

.home-header-actions{display:flex;align-items:center;gap:.55rem}.home-notification{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #dde3ef;border-radius:50%;background:#f6f8fc;color:#102d75}.home-notification-count{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 3px;border:2px solid #f6f8fc;border-radius:99px;background:#f5a623;color:#102d75;font-size:.55rem;font-weight:800;line-height:13px}.home-notification-count[hidden]{display:none}@media(prefers-color-scheme:dark){.home-notification{background:#202a40;border-color:#34425d;color:#eaf0ff}.home-notification-count{border-color:#151d30}}

.thermostat-tile{grid-column:1/-1;min-height:154px}.thermostat-tile .tile-icon{margin-bottom:.4rem}.thermostat-tile .tile-label{margin-top:0}.thermostat-tile .tile-value{margin:.25rem 0 .55rem}.thermostat-readings{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-bottom:.55rem}.thermostat-readings>span{display:grid;gap:.08rem}.thermostat-readings small{font-size:.73rem;color:#58698f}.thermostat-readings strong{font-size:1.05rem;color:#102d75}.thermostat-tile .tile-foot{padding-right:1.2rem}@media(prefers-color-scheme:dark){.thermostat-readings small{color:#aab7d1}.thermostat-readings strong{color:#eaf0ff}}

.settings-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:1.25rem}.settings-group{min-width:0}.settings-group h2{font-size:.9rem;font-weight:700;margin:.4rem 0 .75rem;color:#58698f}.settings-entry{margin-bottom:.65rem;min-width:0}.settings-entry>summary{display:flex;align-items:center;gap:.8rem;min-height:70px;padding:.8rem;border:1px solid #dde3ef;border-radius:16px;background:#fff;color:#102d75;box-shadow:0 4px 16px #102d750b;cursor:pointer;list-style:none}.settings-entry>summary::-webkit-details-marker{display:none}.settings-entry[open]>summary{border-color:#aab7d1}.settings-symbol{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:#eaf0ff;color:#102d75;font-size:1.2rem;font-weight:700}.settings-entry-copy{display:grid;gap:.15rem;min-width:0}.settings-entry-copy strong{font-size:.98rem}.settings-entry-copy>span{font-size:.78rem;line-height:1.3;color:#58698f}.settings-chevron{margin-left:auto;color:#58698f;font-size:1.3rem;transition:transform .2s}.settings-entry[open] .settings-chevron{transform:rotate(90deg)}.settings-entry>.card{margin:.4rem 0 1rem;box-shadow:none}.settings-entry>.card h2{font-size:1.12rem;margin-top:0}.settings-entry>summary:focus-visible{outline:3px solid #f5a623;outline-offset:2px}@media(max-width:800px){.settings-groups{grid-template-columns:1fr;gap:.75rem}.settings-group h2{margin:1rem 0 .65rem}}@media(prefers-color-scheme:dark){.settings-group h2,.settings-entry-copy>span,.settings-chevron{color:#aab7d1}.settings-entry>summary{background:#151d30;border-color:#34425d;color:#eaf0ff}.settings-symbol{background:#202a40;color:#eaf0ff}}@media(prefers-reduced-motion:reduce){.settings-chevron{transition:none}}

.about-legal-row{display:block;width:100%;padding:.85rem 0;border:0;border-bottom:1px solid #dde3ef;background:transparent;color:#102d75;text-align:left;font-weight:650}.about-legal-row:last-of-type{border-bottom:0}.data-sources{display:grid;gap:.75rem}.data-sources section{padding:.75rem;border:1px solid #dde3ef;border-radius:10px}.data-sources h3{margin:.1rem 0 .35rem}.data-sources p{margin:.35rem 0}.data-sources a{color:#102d75}@media(prefers-color-scheme:dark){.about-legal-row{border-color:#34425d;color:#eaf0ff}.data-sources section{border-color:#34425d}.data-sources a{color:#eaf0ff}}


.timeline-activity-sections{display:grid;gap:1.1rem;margin-top:1rem}.timeline-activity-group>.section-title{margin-bottom:.55rem}.timeline-activity-group>.section-title h2{font-size:1.3rem}.timeline-activity-row{margin:.45rem 0;padding:1rem;border:1px solid #dde3ef;border-radius:15px;background:#fff;box-shadow:0 4px 12px #102d7509}.timeline-activity-row .row{align-items:center}.timeline-activity-row p{margin:.5rem 0}.timeline-activity-row small{font-size:.75rem}.timeline-activity-row .form-actions{margin-top:.7rem}@media(prefers-color-scheme:dark){.timeline-activity-row{background:#151d30;border-color:#34425d}}

.weather-band-values{margin:.7rem 0}.weather-band-values>summary{cursor:pointer;color:#102d75;font-weight:700}.weather-band-values li{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem}.chart-card svg text.weather-band-symbol,.chart-card svg text.weather-band-temperature{fill:var(--chart-weather)}@media(prefers-color-scheme:dark){.weather-band-values>summary{color:#eaf0ff}}
.thermostat-tile{display:grid;gap:.7rem;align-content:start}.thermostat-open,.thermostat-temperatures{border:0;background:transparent;color:#102d75;text-align:left;cursor:pointer}.thermostat-open{padding:0;font-size:1rem;font-weight:700}.thermostat-temperatures{padding:0;font-size:.88rem;font-weight:650}.thermostat-tile .tile-value{margin:0}.thermostat-tile .thermostat-readings{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.55rem;border-top:1px solid #dde3ef;margin:0}.thermostat-readings>span{flex:none}.thermostat-adjust{display:flex;align-items:center;gap:.4rem}.thermostat-step{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #f5a62355;border-radius:50%;background:#fff4dd;color:#102d75;font-size:1.25rem;font-weight:750}.thermostat-step:disabled{opacity:.38}.thermostat-on{padding:0;border:0;background:transparent;color:#a86600;font-size:1.05rem;font-weight:750}.thermostat-feedback{font-size:.78rem;color:#58698f}.thermostat-feedback:empty{display:none}@media(prefers-color-scheme:dark){.thermostat-open,.thermostat-temperatures,.thermostat-step{color:#eaf0ff}.thermostat-tile .thermostat-readings{border-color:#34425d}.thermostat-step{background:#4a381d;border-color:#765524}.thermostat-on{color:#ffda8e}.thermostat-feedback{color:#aab7d1}}
.weather-forecast-detail{display:grid;gap:1rem}.weather-forecast-detail>.chart-card{margin:0}.weather-hour-list{display:grid}.weather-day{margin:.8rem 0 .35rem;color:#58698f;font-size:.83rem}.weather-hour-row{display:grid;grid-template-columns:3.7rem 1.6rem 3rem minmax(0,1fr);align-items:center;gap:.65rem;min-height:58px;padding:.35rem 0;border-bottom:1px solid #dde3ef;color:#102d75;font-size:.84rem}.weather-hour-row>strong{font-size:.96rem}.weather-hour-row>span:last-child{display:grid;gap:.15rem;min-width:0}.weather-hour-row small{font-size:.73rem}.weather-hour-icon{color:var(--chart-weather);font-size:1.15rem}@media(max-width:390px){.weather-hour-row{grid-template-columns:2.5rem 1.3rem 2.3rem minmax(0,1fr);gap:.4rem;font-size:.76rem}}@media(prefers-color-scheme:dark){.weather-day{color:#aab7d1}.weather-hour-row{color:#eaf0ff;border-color:#34425d}}
.insight-detail{display:grid;gap:.7rem}.insight-detail h3{margin:0;color:#102d75}.insight-detail-message{font-size:1.1rem;line-height:1.45}.insight-detail ul{padding-left:1.15rem;color:#58698f}.insight-detail li{margin:.45rem 0}.insight-detail>.primary{justify-self:start}@media(prefers-color-scheme:dark){.insight-detail h3{color:#eaf0ff}.insight-detail ul{color:#aab7d1}}
.ev-activity{display:grid;gap:1rem}.ev-activity .card{display:grid;gap:.45rem;margin:0}.ev-activity .section-value{font-size:1.5rem;color:#102d75}.ev-activity .supplier-label{font-size:.78rem;color:#9a5c00;font-weight:700}@media(prefers-color-scheme:dark){.ev-activity .section-value{color:#eaf0ff}.ev-activity .supplier-label{color:#ffda8e}}

.mobile-nav-skip{display:none}@media(max-width:800px){.mobile-nav-skip{display:block;left:9rem}}

.octopus-secret { display: block; width: 100%; overflow-wrap: anywhere; padding: .85rem; margin: .75rem 0; border: 1px solid #dde3ef; border-radius: 12px; background: #f6f8fc; color: #102d75; font-size: .95rem; user-select: text; }
@media (prefers-color-scheme: dark) { .octopus-secret { background: #202a40; border-color: #34425d; color: #eaf0ff; } }

/* Your home cards follow native SliceMetricCard: symbol, title, value with a
   smaller unit, status and chevron in one row. Columns come from rem widths, so
   browser text enlargement drops to one card a row instead of breaking numbers. */
.home-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(10rem, 22%)), 1fr)); gap: .65rem .75rem; }
.home-tile { min-height: 76px; flex-direction: row; align-items: center; gap: .5rem; padding: .4rem .75rem; }
button.home-tile { cursor: pointer; font: inherit; }
.home-tile .tile-icon { flex: none; display: grid; place-items: center; width: 2.55rem; height: 2.55rem; margin: 0; }
.tile-icon svg { width: 100%; height: 100%; }
.home-tile .tile-text { flex: 1; min-width: 0; display: grid; gap: .05rem; }
.home-tile .tile-label { margin: 0; color: #102d75; font-size: .875rem; font-weight: 500; }
.home-tile .tile-value { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem; font-size: 1rem; }
.tile-amount { font-size: 1.56rem; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.thermostat-step { width: 44px; height: 44px; line-height: 1; }
.tile-unit { font-size: .875rem; font-weight: 500; }
.home-tile .tile-foot { padding: 0; color: #102d75d1; font-size: .75rem; font-weight: 500; }
.home-tile .tile-foot:empty { visibility: hidden; }
.home-tile .tile-foot.tint-signal { color: #986716; }
.home-tile .tile-foot.tint-danger { color: #cb3e36; }
.home-tile .tile-arrow { position: static; flex: none; font-size: 1.2rem; font-weight: 650; color: #102d75; }
.ms-line { stroke: #102d75; } .ms-fill { fill: #102d75; }
.ms-accent { fill: #f5a623; } .ms-accent-line { stroke: #f5a623; }
.ms-cloud { fill: #fff; } .ms-soft-line { stroke: #102d7580; } .ms-soft-fill { fill: #102d7580; }
.thermostat-tile { grid-column: 1 / -1; display: grid; align-items: stretch; gap: .7rem; padding: .95rem; border-radius: 18px; }
.thermostat-open { display: flex; align-items: center; gap: .7rem; width: 100%; font: inherit; }
.thermostat-open .tile-icon { width: 2.9rem; height: 2.9rem; }
.thermostat-title { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.thermostat-title strong { font-size: .97rem; font-weight: 650; }
.thermostat-status { font-size: .75rem; font-weight: 500; color: #58698f; }
.thermostat-status.tint-warning { color: #a75f13; } .thermostat-status.tint-information { color: #3170c9; } .thermostat-status.tint-navy { color: #102d75; }
.thermostat-temperatures { display: flex; gap: 1.25rem; flex: 1; font: inherit; }
.thermostat-reading { display: grid; gap: .1rem; }
.thermostat-reading small, .thermostat-set small { font-size: .66rem; font-weight: 500; color: #58698f; }
.thermostat-reading strong { font-size: 1.25rem; font-weight: 650; }
.thermostat-set { display: grid; justify-items: center; gap: .25rem; padding-left: .75rem; border-left: 1px solid #dde3ef; }
.thermostat-set strong { font-size: 1.125rem; min-width: 2.5rem; text-align: center; }
/* Inside, outside and the set point share a row as on iOS, wrapping only when text is enlarged. */
.thermostat-tile .thermostat-readings { flex-direction: row; flex-wrap: wrap; align-items: center; }
@media (prefers-color-scheme: dark) {
  .home-tile .tile-label, .home-tile .tile-arrow, .thermostat-reading strong { color: #eaf0ff; }
  .home-tile .tile-foot { color: #eaf0ffd1; }
  .home-tile .tile-foot.tint-signal { color: #ffb743; }
  .home-tile .tile-foot.tint-danger { color: #ff746c; }
  .ms-line { stroke: #eaf0ff; } .ms-fill { fill: #eaf0ff; } .ms-cloud { fill: #151d30; }
  .ms-soft-line { stroke: #eaf0ff80; } .ms-soft-fill { fill: #eaf0ff80; }
  .thermostat-status, .thermostat-reading small, .thermostat-set small { color: #aab7d1; }
  .thermostat-status.tint-warning { color: #ffad42; } .thermostat-status.tint-information { color: #78a7ff; } .thermostat-status.tint-navy { color: #eaf0ff; }
  .thermostat-set { border-color: #34425d; }
}
@media (forced-colors: active) { .ms-line, .ms-accent-line, .ms-soft-line { stroke: CanvasText; } .ms-fill, .ms-accent, .ms-soft-fill { fill: CanvasText; } .ms-cloud { fill: Canvas; } }

/* Enlarged text: the bottom tabs fold to two a row rather than running off the
   screen, and the hidden navigation skip link stays inside the viewport. */
@media (max-width: 800px) {
  .mobile-nav { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); }
  .mobile-nav button { min-width: 0; overflow-wrap: anywhere; }
  .mobile-nav-skip { left: .5rem; max-width: calc(100vw - 1rem); }
}
.thermostat-tile { grid-template-columns: minmax(0, 1fr); }
.thermostat-open, .thermostat-temperatures, .thermostat-readings > * { min-width: 0; }
.thermostat-temperatures { flex-wrap: wrap; }
.thermostat-title strong { overflow-wrap: anywhere; }
/* Controls that sized to their content now wrap within the screen when text is enlarged. */
.thermostat-temperatures { flex: 1 1 auto; }
.timeline-zoom, .period-picker { width: auto; max-width: 100%; flex-wrap: wrap; }
.timeline-zoom > *, .period-picker > * { min-width: 0; }
select, input, textarea { max-width: 100%; }
.card strong, .card h2 { overflow-wrap: anywhere; }
.setup-states { flex-wrap: wrap; } .setup-states > div { flex-wrap: wrap; min-width: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.insight-row.insight-priority { box-shadow: inset 4px 0 #f5a623; }
@media (forced-colors: active) { .insight-row.insight-priority { border-left: 4px solid CanvasText; } }
.activity-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.mode-pill { font-size: .66rem; font-weight: 650; padding: .1rem .45rem; border-radius: 999px; background: #3170c926; color: #102d75; }
@media (prefers-color-scheme: dark) { .mode-pill { background: #78a7ff26; color: #eaf0ff; } }
.home-live-status { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 650; }
.home-live-status .status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.home-live-status.tone-live { color: #277e60; } .home-live-status.tone-warning { color: #a75f13; } .home-live-status.tone-neutral { color: #58698f; }
@media (prefers-color-scheme: dark) { .home-live-status.tone-live { color: #4fc79a; } .home-live-status.tone-warning { color: #ffad42; } .home-live-status.tone-neutral { color: #aab7d1; } }
.pill.highlight-note { background: #102d75; color: #fff; }
@media (prefers-color-scheme: dark) { .pill.highlight-note { background: #eaf0ff; color: #0b1020; } }
.multiline { white-space: pre-line; }
.settings-stack { display: grid; gap: 1rem; min-width: 0; }
.appliance-card, .source-health, .home-mini-suggestion { border-top: 1px solid #dde3ef; padding-top: .8rem; margin-top: .8rem; }
.appliance-card h3 { margin: 0; } .appliance-card p, .source-health p { margin: .2rem 0; }
.source-health .row { align-items: flex-start; gap: .5rem; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { .appliance-card, .source-health, .home-mini-suggestion { border-color: #34425d; } }
.layer-help { margin: .3rem 0 1rem; padding: .55rem .75rem; border: 1px solid #dde3ef; border-radius: 12px; }
.layer-help summary { cursor: pointer; font-weight: 650; }
.layer-help h3 { font-size: .95rem; margin: .9rem 0 .3rem; }
.layer-help-list { margin: 0; } .layer-help-list dt { font-weight: 650; margin-top: .5rem; } .layer-help-list dd { margin: .1rem 0 0; color: #58698f; }
@media (prefers-color-scheme: dark) { .layer-help { border-color: #34425d; } .layer-help-list dd { color: #aab7d1; } }
.import-banner { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem 1rem; margin-bottom: 1rem; border-radius: 12px; background: #a75f131f; border: 1px solid #a75f1359; color: #102d75; }
.import-banner p { margin: .1rem 0 0; font-size: .85rem; color: #58698f; }
.import-banner-mark, .import-mark { flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-weight: 800; font-size: .8rem; }
.import-banner-mark { background: #a75f13; color: #fff; }
.import-step { display: flex; gap: .6rem; align-items: flex-start; }
.import-step.complete .import-mark { background: #277e60; color: #fff; }
.import-step.inProgress .import-mark { background: #dde3ef; color: #102d75; }
.import-step.failed .import-mark { background: #a75f13; color: #fff; }
.import-failure { color: #a75f13; margin: .1rem 0 0; }
@media (prefers-color-scheme: dark) { .import-banner { color: #eaf0ff; } .import-banner p { color: #aab7d1; } .import-failure { color: #ffad42; } .import-step.inProgress .import-mark { background: #34425d; color: #eaf0ff; } }
.maintenance-banner { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem 1rem; margin-bottom: 1rem; border-radius: 12px; background: #3170c91f; border: 1px solid #3170c959; color: #102d75; }
.maintenance-banner p { margin: .1rem 0 0; font-size: .85rem; color: #58698f; }
.maintenance-banner .import-banner-mark { background: #3170c9; }
@media (prefers-color-scheme: dark) { .maintenance-banner { color: #eaf0ff; } .maintenance-banner p { color: #aab7d1; } }
.notice.warning { background: #fff0d2; color: #5c3b00; }
.control-reconnect summary { cursor: pointer; font-weight: 650; }
.control-reconnect p { margin: .5rem 0; }
@media (prefers-color-scheme: dark) { .notice.warning { background: #3d321d; color: #ffda8e; } }
/* Touch targets of at least 44×44 CSS px, the iOS minimum hit region (scripts/check-participant-web-accessibility.mjs). */
button.link, .today-open, .activity-open, button.rate-badge, .period-option, .layer-chip, .timeline-window-nav button, .attention-button, .home-mini-suggestion .home-mini-head button { min-height: 44px; min-width: 44px; }
.today-open, .activity-open { display: inline-flex; align-items: center; }
details > summary { min-height: 44px; padding-block: .55rem; box-sizing: border-box; }
.external-link { display: inline-flex; align-items: center; min-height: 44px; }
/* A date or time field's picker button takes focus inside the field, where :focus-visible does not reach. */
input[type=date]:focus-within, input[type=time]:focus-within { outline: 3px solid #b77712; outline-offset: 3px; }
@media (prefers-color-scheme: dark) { input[type=date]:focus-within, input[type=time]:focus-within { outline-color: #f5a623; } }

.install-steps { margin: .4rem 0 0; padding-left: 1.4rem; }
.install-steps li { margin: .35rem 0; }
/* Focus rings are for keyboard focus. A tap, a click, or focus the app moves to a heading
   after one, shows none; the first key press brings them back (app.js sets data-input).
   Text fields keep theirs, since that is where typing goes. */
:root:not([data-input="keyboard"]) :focus-visible:not(input, textarea, select) { outline: none; }
:root:not([data-input="keyboard"]) input[type=date]:focus-within, :root:not([data-input="keyboard"]) input[type=time]:focus-within { outline: none; }
/* The screen fills the window in every state, loading and failed included, so the tab bar
   stays at the bottom as iOS keeps it (US-WEB-004). There is no separate header bar: each
   screen carries its own header, as on iOS. */
.shell-main { min-width: 0; min-height: 100dvh; display: flex; flex-direction: column; }
.shell-main > main { flex: 1 0 auto; }
@media (max-width: 800px) {
  .mobile-nav { margin-top: auto; padding-bottom: env(safe-area-inset-bottom); }
}
/* A pull reads the screen again; the browser's own pull-to-reload would reload the whole app. */
html { overscroll-behavior-y: contain; }
.loading-card { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.loading-spinner { width: 1.1rem; height: 1.1rem; flex: none; border: 2.5px solid #dde3ef; border-top-color: #102d75; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .loading-spinner { animation: wiggle-spin .8s linear infinite; } }
@keyframes wiggle-spin { to { transform: rotate(360deg); } }
.pull-refresh { position: fixed; z-index: 25; top: 0; left: 50%; display: flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border: 1px solid #dde3ef; border-radius: 999px; background: #fff; color: #102d75; font-size: .82rem; font-weight: 650; box-shadow: 0 6px 18px #102d7520; transform: translate(-50%, calc(var(--pull, 0px) - 100%)); pointer-events: none; }
.pull-refresh:not(.ready):not(.busy) .loading-spinner { animation: none; transform: rotate(calc(var(--pull, 0px) * 4)); }
/* Home's header, as iOS: the Wiggle symbol at top left, the home switcher and bell at top
   right, then the greeting. Desktop keeps the sidebar logo, so the symbol shows on phones. */
.home-head { position: relative; display: block; }
.home-head-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.wiggle-mark { display: block; flex: none; width: 92px; height: auto; color: #102d75; }
.header-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; margin-left: auto; min-width: 0; }
.household-switcher-slot { display: contents; }
.household-switcher { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 12rem; min-height: 44px; padding: 0 .8rem; border: 1px solid #dde3ef; border-radius: 999px; background: #f6f8fc; color: #102d75; font-size: .82rem; font-weight: 650; }
/* A long name wraps rather than being cut off, so enlarged text still shows which home this is. */
.household-switcher-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; padding: .2rem 0; }
.household-switcher svg { flex: none; }
/* Refresh is for those who cannot pull: hidden until it has keyboard focus, like a skip link. */
.page-refresh.skip-link { top: 0; right: 0; left: auto; transform: none; white-space: nowrap; min-height: 44px; border: 1px solid #aab7d1; border-radius: 999px; color: #102d75; font-weight: 650; }
.page-refresh.skip-link:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; }
@media (min-width: 801px) {
  .home-head .wiggle-mark { display: none; }
  .home-head { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 1rem; }
  .home-head-top { margin: 0; }
}
@media (max-width: 800px) {
  .home-head h1 { font-size: 1.8rem; }
  .page-head { margin-bottom: 1.1rem; }
}
@media (prefers-color-scheme: dark) {
  .wiggle-mark { color: #eaf0ff; }
  .household-switcher, .pull-refresh, .page-refresh.skip-link { background: #202a40; border-color: #34425d; color: #eaf0ff; }
  .loading-spinner { border-color: #34425d; border-top-color: #eaf0ff; }
}
/* Each insight is its own card, as iOS SliceInsightRow in a list spaced 10pt apart, so a
   priority stripe marks one insight only. Ways to save is a row of the same kind. */
.insight-list { display: grid; gap: 10px; border: 0; border-radius: 0; overflow: visible; background: none; }
.insight-row, .insight-row:last-child { position: relative; overflow: hidden; min-height: 64px; border: 1px solid #dde3ef; border-radius: 14px; background: #fff; box-shadow: 0 3px 8px #102d751f; }
.insight-list + .insight-row, .insight-notice + .insight-row { margin-top: 10px; }
.insight-notice { margin: 0; font-size: .85rem; }
.insight-row.insight-priority { box-shadow: inset 5px 0 #bf811b, 0 3px 8px #102d751f; }
.urgent-insight { border: 0; border-radius: 0; overflow: visible; }
@media (prefers-color-scheme: dark) {
  .insight-row, .insight-row:last-child { border-color: #34425d; background: #151d30; box-shadow: none; }
  .insight-row.insight-priority { box-shadow: inset 5px 0 #ffb743; }
}
/* Holding a card lifts it to be dragged over another, as on iOS. Text in a card is not
   selectable, so a hold never starts a selection or the iOS callout instead. */
.home-tiles > * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.home-tiles.reordering > :not(.lifted) { transition: transform .2s; }
.home-tile.lifted { position: relative; z-index: 5; box-shadow: 0 18px 40px #102d7540; cursor: grabbing; }
@media (prefers-reduced-motion: no-preference) { .home-tile.lifted { scale: 1.03; } }
/* Timeline, as iOS EnergyTimelineScreen: the title with "+" and the bell, the day between
   chevrons, then one card holding "Your energy day", the 6h/12h/24h picker, the chart and its
   legend, quick views in a grid below it, and the day's entries on a line. */
:root { --chart-gridline: #dde3efd9; --chart-zero: #58698f73; }
.timeline-page { display: grid; gap: 18px; }
.timeline-page > * { min-width: 0; margin: 0; }
.timeline-page > .page-head { margin: 0; flex-wrap: nowrap; }
.timeline-page .page-head h1 { font-size: clamp(1.85rem, 3vw, 2.4rem); color: #102d75; }
.timeline-page .page-head .header-actions { flex-wrap: nowrap; }
.timeline-create-action { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #f6f8fc; color: #102d75; }
.timeline-create-action svg, .timeline-day-step svg, .timeline-window-step svg { width: 20px; height: 20px; }
.timeline-create-action:disabled { opacity: .35; }
.timeline-action-slot { display: contents; }
.timeline-page .new-action-hint { margin: -10px 0 0; font-size: .8rem; text-align: right; }
.timeline-page .new-action-hint:empty, .timeline-action-hint-slot:empty { display: none; }
.timeline-day-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; color: #102d75; }
.timeline-day-step, .timeline-window-step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #102d75; }
.timeline-day-step:disabled, .timeline-window-step:disabled { opacity: .3; }
.timeline-day-picker { position: relative; display: grid; justify-items: center; min-width: 0; }
.timeline-day-title { display: grid; justify-items: center; gap: 1px; min-height: 44px; min-width: 44px; max-width: 100%; padding: .2rem .6rem; border: 0; border-radius: 12px; background: transparent; color: #102d75; text-align: center; }
.timeline-day-title strong { font-size: 1.05rem; font-weight: 650; line-height: 1.25; }
.timeline-day-date { font-size: .82rem; color: #58698f; line-height: 1.3; }
.timeline-day-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; }
.timeline-day-input.shown { position: static; opacity: 1; pointer-events: auto; width: auto; height: auto; min-height: 44px; margin-top: .4rem; padding: .3rem .6rem; border: 1px solid #aab7d1; border-radius: 9px; }
.timeline-page .timeline-backfill { border-radius: 16px; }
.timeline-series-card.card { display: grid; gap: 12px; padding: 16px; border-radius: 18px; border-color: #dde3ef; box-shadow: 0 6px 18px #102d750f; }
.timeline-series-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.timeline-series-head h2 { margin: 0; font-size: 1.15rem; font-weight: 650; color: #102d75; }
.timeline-page .timeline-zoom { display: flex; flex-wrap: nowrap; width: auto; gap: 2px; padding: 3px; border: 1px solid #dde3ef; border-radius: 999px; background: #f6f8fc; }
.timeline-zoom-option { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .55rem; border: 0; border-radius: 999px; background: transparent; color: #58698f; font-size: .8rem; font-weight: 650; }
.timeline-zoom-option[aria-pressed="true"] { background: #102d75; color: #fff; }
.flow-chart-area { min-width: 0; }
.flow-plot { position: relative; min-width: 0; }
.flow-plot-canvas { position: relative; padding-top: 24px; }
.flow-plot svg.flow-svg { display: block; width: 100%; height: 180px; margin: 0; overflow: visible; cursor: crosshair; touch-action: pan-y; }
.flow-now-label { position: absolute; top: 0; margin-left: -1px; padding: 2px 6px; border-radius: 999px; background: #f5a62338; color: #102d75; font-size: .68rem; font-weight: 700; line-height: 1.3; white-space: nowrap; pointer-events: none; }
.flow-y-label { position: absolute; left: 0; padding: 0 3px; border-radius: 4px; background: #ffffffcc; color: #58698f; font-size: .66rem; line-height: 1.4; pointer-events: none; }
.flow-y-label.top { top: 24px; } .flow-y-label.bottom { bottom: 2px; }
.flow-dispatch { position: absolute; top: 28px; height: 16px; min-width: 4px; border-radius: 7px; background: #6e45af45; display: grid; place-items: center; pointer-events: none; overflow: visible; }
.flow-dispatch.planned { background: #6e45af2e; }
.flow-dispatch-mark { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border: 2px solid #fff; border-radius: 50%; background: #6e45af; color: #fff; }
.flow-dispatch-mark svg { width: 10px; height: 10px; }
.flow-axis, .flow-weather { position: relative; pointer-events: none; }
.flow-axis { height: 20px; margin-top: 2px; }
.flow-weather { height: 30px; margin-top: 4px; }
.flow-axis-label, .flow-weather-item { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.flow-axis-label { color: #58698f; font-size: .68rem; line-height: 20px; }
.flow-weather-item { display: grid; justify-items: center; color: var(--chart-weather); line-height: 1.1; }
.flow-weather-item .weather-band-symbol { font-size: .85rem; }
.flow-weather-item .weather-band-temperature { font-size: .62rem; font-weight: 600; }
.flow-axis-label[hidden], .flow-weather-item[hidden] { display: none; }
.timeline-page .timeline-window-nav { display: flex; align-items: center; gap: .1rem; font-size: .78rem; color: #58698f; flex-wrap: nowrap; }
.timeline-page .timeline-window-nav .timeline-window-step { border: 0; background: transparent; padding: 0; }
.timeline-page .timeline-inspector-wrap { margin: 0; }
.timeline-page .inspect-time-button { margin: 0; min-height: 44px; padding: 0 .2rem; border: 0; background: transparent; color: #58698f; font-size: .78rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.timeline-page .timeline-inspector.card { margin: 0; padding: 8px 10px; border-radius: 10px; background: #f6f8fc; border-color: #dde3ef; box-shadow: none; }
.timeline-page .timeline-inspector h2 { font-size: .8rem; }
.timeline-page .timeline-inspector .row { align-items: center; font-size: .78rem; }
.timeline-page .timeline-inspector input[type=range] { min-height: 36px; margin: .1rem 0; }
.timeline-page .inspection-values { grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: 6px; }
.timeline-page .inspection-values > div { padding: 5px 7px; border-radius: 8px; background: #102d750a; gap: 1px; }
.timeline-page .inspection-values span { font-size: .66rem; } .timeline-page .inspection-values strong { font-size: .74rem; }
.timeline-page .inspection-events h3 { font-size: .78rem; }
.timeline-page .inspection-event { font-size: .8rem; }
.timeline-legend-slot:empty, .timeline-notice-slot:empty { display: none; }
.timeline-legend { display: grid; gap: 8px; font-size: .68rem; color: #58698f; }
.timeline-legend-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.8rem, 1fr)); gap: 7px 10px; }
.timeline-legend-entry { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 500; line-height: 1.25; }
.timeline-legend-entry > span { min-width: 0; overflow-wrap: anywhere; }
.timeline-legend .legend-line { flex: none; overflow: visible; }
.timeline-legend .legend-fill { flex: none; width: 12px; height: 12px; border-radius: 3px; opacity: .6; }
.timeline-legend-breakdown { display: grid; gap: 6px; }
.timeline-legend-group { font-weight: 700; }
.timeline-card-notice { margin: 0; font-size: .7rem; color: #58698f; }
.timeline-card-notice::before { content: "⚠ "; }
.timeline-empty-chart { margin: 1rem 0; }
.timeline-page .timeline-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.3em, 1fr)); gap: 0 8px; margin: -6px 0 0; padding: 0; overflow: visible; font-size: .8rem; }
.timeline-page .timeline-presets[hidden] { display: none; }
.timeline-page .timeline-presets button { display: grid; align-items: center; min-width: 0; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #102d75; font: inherit; }
.preset-surface { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: .2rem .5rem; border: 1px solid #dde3ef; border-radius: 999px; background: #f6f8fc; font-weight: 600; line-height: 1.2; transition: background-color .3s, color .3s, border-color .3s; }
.preset-title { min-width: 0; overflow-wrap: anywhere; }
.timeline-icon { flex: none; width: 15px; height: 15px; }
.timeline-page .timeline-presets button[aria-pressed="true"] .preset-surface, .timeline-layers-button.is-selected .preset-surface { background: #102d75; border-color: #102d75; color: #fff; }
.timeline-layers-dialog .layer-section h3 { margin: 1rem 0 .45rem; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #58698f; }
.timeline-layers-dialog .timeline-layers { display: grid; margin: 0; padding: 0 14px; border: 1px solid #dde3ef; border-radius: 18px; background: #fff; gap: 0; }
.timeline-layers-dialog .layer-chip { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: .4rem 0; border: 0; border-top: 1px solid #dde3ef; border-radius: 0; background: transparent; color: #102d75; font-weight: 600; text-align: left; }
.timeline-layers-dialog .layer-chip:first-child { border-top: 0; }
.timeline-layers-dialog .layer-chip:hover:not([aria-pressed="true"]) { background: transparent; }
.timeline-layers-dialog .layer-chip[aria-pressed] { background: transparent; color: #102d75; }
.timeline-layers-dialog .layer-chip::after { content: ""; margin-left: auto; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #dde3ef radial-gradient(circle at 13px 50%, #fff 10px, transparent 10.5px); transition: background .2s; }
.timeline-layers-dialog .layer-chip[aria-pressed="true"]::after { background: #277e60 radial-gradient(circle at 31px 50%, #fff 10px, transparent 10.5px); }
.layer-chip-title { min-width: 0; overflow-wrap: anywhere; }
.timeline-layers-dialog .layer-help { margin-top: 1.2rem; }
.timeline-activity { display: grid; gap: 18px; }
.timeline-activity[hidden] { display: none; }
.timeline-page .timeline-activity-sections { gap: 18px; margin: 0; }
.timeline-page .timeline-activity-group > .section-title { margin-bottom: 10px; }
.timeline-page .timeline-activity-group > .section-title h2 { margin: 0; font-size: 1.35rem; color: #102d75; }
.timeline-activity-row { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; margin: 0 0 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; --tone: #6e45af; }
.timeline-page .timeline-activity-row, .detail-dialog .timeline-activity-row { padding: 0; border: 0; background: none; box-shadow: none; }
.timeline-activity-row:last-child { margin-bottom: 0; }
.timeline-activity-group .timeline-activity-row:not(:last-child)::before { content: ""; position: absolute; left: 4.5px; top: 23px; bottom: -13px; width: 1px; background: #dde3ef; }
.timeline-entry-dot { width: 10px; height: 10px; margin-top: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--tone); box-sizing: content-box; margin-left: -2px; }
.timeline-entry { display: grid; gap: 6px; min-width: 0; padding: 14px; border: 1px solid #dde3ef; border-radius: 18px; background: #fff; box-shadow: 0 4px 12px #102d7509; }
.timeline-activity-row.is-highlighted .timeline-entry { background: #f5a62329; border: 1.5px solid #f5a623; }
.timeline-entry-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.timeline-entry-time { font-size: .8rem; font-weight: 650; color: #102d75; }
.timeline-entry-actor { padding: 2px 7px; border-radius: 999px; background: #6e45af1c; color: #6e45af; font-size: .68rem; font-weight: 650; }
.timeline-entry-state { margin-left: auto; color: var(--tone); font-size: .7rem; font-weight: 600; }
.timeline-entry-title { font-size: 1rem; font-weight: 650; color: #102d75; line-height: 1.3; }
.timeline-entry p { margin: 0; font-size: .82rem; }
.timeline-entry small { font-size: .72rem; }
.timeline-entry-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.timeline-entry-actions .form-actions { margin: 0 0 0 auto; gap: 9px; }
.timeline-entry-actions button.secondary, .timeline-entry-actions button.link { min-height: 44px; padding: .3rem .9rem; border: 1px solid #dde3ef; border-radius: 999px; background: #f6f8fc; color: #102d75; font-size: .85rem; font-weight: 650; text-decoration: none; }
.timeline-entry-actions button.link { color: #cb3e36; }
.tone-completed, .tone-confirmed { --tone: #277e60; } .tone-cancelled, .tone-corrected { --tone: #cb3e36; }
.tone-delayed { --tone: #a75f13; } .tone-estimated { --tone: #3170c9; }
.timeline-message.card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.timeline-message h2 { margin: 0 0 4px; font-size: 1.05rem; color: #102d75; }
.timeline-message p { margin: 0; font-size: .82rem; }
.timeline-message-icon { flex: none; width: 22px; height: 22px; color: #a75f13; }
@media (min-width: 801px) {
  .flow-plot svg.flow-svg { height: 240px; }
  .timeline-page .timeline-presets { grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); }
}
@media (prefers-color-scheme: dark) {
  :root { --chart-gridline: #34425dd9; --chart-zero: #aab7d173; }
  .timeline-page .page-head h1, .timeline-day-nav, .timeline-day-step, .timeline-window-step, .timeline-day-title, .timeline-series-head h2,
  .timeline-entry-time, .timeline-entry-title, .timeline-message h2, .timeline-page .timeline-activity-group > .section-title h2 { color: #eaf0ff; }
  .timeline-create-action, .timeline-page .timeline-zoom, .preset-surface, .timeline-page .timeline-inspector.card { background: #202a40; border-color: #34425d; color: #eaf0ff; }
  .timeline-page .timeline-presets button { color: #eaf0ff; }
  .timeline-zoom-option { color: #aab7d1; }
  .timeline-zoom-option[aria-pressed="true"], .timeline-page .timeline-presets button[aria-pressed="true"] .preset-surface, .timeline-layers-button.is-selected .preset-surface { background: #5f88e8; border-color: #5f88e8; color: #0b1020; }
  .timeline-day-date, .flow-axis-label, .timeline-legend, .timeline-card-notice, .timeline-page .timeline-window-nav, .timeline-page .inspect-time-button, .timeline-values-title, .timeline-layers-dialog .layer-section h3 { color: #aab7d1; }
  .flow-y-label { background: #151d30cc; color: #aab7d1; }
  .flow-now-label { background: #ffb74338; color: #eaf0ff; }
  .flow-dispatch { background: #b99aff45; } .flow-dispatch.planned { background: #b99aff2e; }
  .flow-dispatch-mark { background: #b99aff; border-color: #151d30; color: #0b1020; }
  .timeline-series-card.card, .timeline-entry, .timeline-layers-dialog .timeline-layers { background: #151d30; border-color: #34425d; }
  .timeline-layers-dialog .layer-chip { border-color: #34425d; color: #eaf0ff; }
  .timeline-layers-dialog .layer-chip[aria-pressed] { color: #eaf0ff; }
  .timeline-layers-dialog .layer-chip::after { background: #34425d radial-gradient(circle at 13px 50%, #eaf0ff 10px, transparent 10.5px); }
  .timeline-layers-dialog .layer-chip[aria-pressed="true"]::after { background: #4fc79a radial-gradient(circle at 31px 50%, #0b1020 10px, transparent 10.5px); }
  .timeline-entry-dot { border-color: #0b1020; }
  .timeline-activity-group .timeline-activity-row:not(:last-child)::before { background: #34425d; }
  .timeline-entry-actor { background: #b99aff26; color: #b99aff; }
  .timeline-activity-row { --tone: #b99aff; }
  .tone-completed, .tone-confirmed { --tone: #4fc79a; } .tone-cancelled, .tone-corrected { --tone: #ff746c; }
  .tone-delayed { --tone: #ffad42; } .tone-estimated { --tone: #78a7ff; }
  .timeline-entry-actions button.secondary, .timeline-entry-actions button.link { background: #202a40; border-color: #34425d; color: #eaf0ff; }
  .timeline-entry-actions button.link { color: #ff746c; }
  .timeline-page .inspection-values > div { background: #eaf0ff0d; }
}
@media (prefers-reduced-motion: reduce) { .preset-surface, .timeline-layers-dialog .layer-chip::after { transition: none; } }
@media (forced-colors: active) { .timeline-layers-dialog .layer-chip[aria-pressed="true"]::after { background: Highlight; } .timeline-page .timeline-presets button[aria-pressed="true"] .preset-surface { border: 2px solid Highlight; } }
.timeline-layer-section { display: grid; gap: 18px; margin: 0; min-width: 0; }
.timeline-layer-section > * { min-width: 0; }
.timeline-series-card .timeline-legend svg.legend-line, .timeline-layers-dialog svg.legend-line { width: 22px; height: 12px; flex: none; }
.timeline-page .timeline-presets { font-size: .74rem; }
.timeline-page .preset-surface { gap: 4px; padding: .2rem .3rem; }
.timeline-page .preset-title { overflow-wrap: normal; }
.timeline-page .timeline-icon { width: 13px; height: 13px; }
.timeline-create-action { border: 1px solid #dde3ef; } @media (prefers-color-scheme: dark) { .timeline-create-action { border-color: #34425d; } }

/* Tab bar, as iOS TabView: each tab's symbol above its label, filled and in the accent colour when
   selected, grey otherwise. The desktop sidebar shows the same symbols beside its labels. */
.nav-button { --tab-knockout: #fff; }
.tab-symbol { display: inline-grid; flex: none; }
.tab-icon { width: 24px; height: 24px; }
.nav-button .tab-icon-filled, .nav-button[aria-current="page"] .tab-icon-outline { display: none; }
.nav-button[aria-current="page"] .tab-icon-filled { display: block; }
.nav .nav-button { display: flex; align-items: center; gap: .7rem; }
.nav .nav-button[aria-current="page"] { --tab-knockout: #fff; }
.sidebar .nav .nav-button[aria-current="page"] { --tab-knockout: #fff; }
@media (max-width: 800px) {
  .mobile-nav { padding-bottom: env(safe-area-inset-bottom); }
  .mobile-nav .nav-button { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 56px; padding: 6px 2px 4px; box-shadow: none; color: #58698f; font-size: .66rem; font-weight: 600; line-height: 1.15; }
  .mobile-nav .nav-button[aria-current="page"] { color: #102d75; box-shadow: none; font-weight: 700; }
  .mobile-nav .nav-button .tab-icon { width: 25px; height: 25px; }
}
@media (prefers-color-scheme: dark) {
  .nav-button { --tab-knockout: #151d30; }
  .sidebar .nav .nav-button[aria-current="page"] { --tab-knockout: #eaf0ff; }
  .mobile-nav .nav-button, .mobile-nav button { color: #aab7d1; }
  .mobile-nav .nav-button[aria-current="page"], .mobile-nav button[aria-current="page"] { color: #5f88e8; box-shadow: none; }
}
@media (forced-colors: active) { .mobile-nav .nav-button[aria-current="page"] { color: Highlight; } }

/* Your home's heading, as iOS HomeScreen.sectionHeading: the rate chip and live status share the
   title's line while all of them fit, and otherwise move together to a line of their own under it,
   where the status wraps rather than being cut short. */
.home-section > .section-title, .home-section > .section-title:has(.home-status) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.home-section > .section-title h2 { white-space: nowrap; }
.home-status { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; max-width: 100%; }
.home-status .home-live-status { min-width: 0; flex: 0 1 auto; font-size: .875rem; font-weight: 500; color: #102d75; }
.home-status .home-live-status .status-dot { flex: none; width: 8px; height: 8px; }
.home-status .home-live-status.tone-live .status-dot, .home-status .home-live-status.tone-neutral .status-dot { background: #bf811b; }
.home-status .home-live-status.tone-warning .status-dot { background: #a75f13; }
button.rate-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; min-height: 44px; padding: 0 9px; border: 0; background: none; color: #7a47bd; font-size: .78rem; font-weight: 650; white-space: nowrap; text-decoration: none; }
button.rate-badge { position: relative; isolation: isolate; }
button.rate-badge::after { content: ""; position: absolute; inset: 8px 0; z-index: -1; border: 1px solid #7a47bd33; border-radius: 999px; background: #7a47bd1a; }
button.rate-badge svg { width: 11px; height: 11px; }
.rate-badge-estimated { font-size: .6rem; }
button.rate-badge:hover { text-decoration: underline; }
.today-attention-symbol { --attention-knockout: #f6f8fc; width: 20px; height: 20px; border-radius: 0; background: none; color: #a75f13; }
@media (prefers-color-scheme: dark) {
  .home-status .home-live-status { color: #eaf0ff; }
  .home-status .home-live-status.tone-live .status-dot, .home-status .home-live-status.tone-neutral .status-dot { background: #ffb743; }
  .home-status .home-live-status.tone-warning .status-dot { background: #ffad42; }
  button.rate-badge { color: #c29aff; background: none; }
  button.rate-badge::after { border-color: #c29aff33; background: #c29aff1a; }
  .today-attention-symbol { --attention-knockout: #202a40; background: none; color: #ffad42; }
}

/* Timeline chart viewport, as iOS TimelineSeriesChartView: the day is drawn once and the visible
   window scrolls and zooms over it. Sideways drags belong to the chart; upright ones scroll the page. */
.flow-plot { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; border-radius: 6px; --plot-height: 180px; }
.flow-plot.is-dragging { cursor: grabbing; }
.flow-plot:focus-visible { outline: 3px solid #3170c9; outline-offset: 3px; }
.flow-track { position: relative; width: 100%; will-change: transform; }
.flow-plot svg.flow-svg { cursor: inherit; touch-action: pan-y; height: var(--plot-height); }
.flow-now-label { top: 2px; margin-left: 0; z-index: 2; }
.flow-now-label[hidden], .flow-selection[hidden], .flow-page-hint[hidden] { display: none; }
.flow-y-label { z-index: 2; }
.flow-selection { position: absolute; top: 24px; height: var(--plot-height); width: 0; border-left: 1.5px solid #102d758c; pointer-events: none; z-index: 2; }
.flow-page-hint { position: absolute; top: 24px; left: 0; height: var(--plot-height); display: grid; place-content: center; justify-items: center; gap: 2px; overflow: hidden; color: #58698f; font-size: .72rem; text-align: center; white-space: nowrap; pointer-events: none; }
.flow-page-hint.from-right { left: auto; right: 0; }
.flow-page-hint-title { color: #102d75; font-size: .78rem; }
.timeline-activity-slot[hidden] { display: none; }
@media (min-width: 801px) { .flow-plot { --plot-height: 240px; } }
@media (prefers-reduced-motion: reduce) { .flow-track { will-change: auto; } }

/* The inspected time's values in place of the legend, as iOS TimelineSeriesScrubReadout: each value
   in a pill tinted with its line's colour, a dot of that colour, and its name. */
.timeline-readout { display: grid; gap: 7px; padding: 8px; border: 1px solid #dde3ef; border-radius: 10px; background: #f6f8fc; }
.timeline-readout-title { margin: 0; color: #102d75; font-size: .72rem; font-weight: 650; }
.timeline-readout-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(5.4rem, 28%), 1fr)); gap: 6px; }
.timeline-readout-pill { display: grid; gap: 2px; min-width: 0; padding: 5px 6px; border-radius: 8px; background: color-mix(in srgb, var(--series) 12%, transparent); border-left: 3px solid var(--series); font-size: .66rem; }
.timeline-readout-name { display: flex; align-items: baseline; gap: 4px; min-width: 0; color: #58698f; font-weight: 500; }
.timeline-readout-name > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.timeline-readout-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--series); }
.timeline-readout-pill strong { color: #102d75; font-size: .72rem; font-weight: 700; overflow-wrap: anywhere; }
.timeline-readout-events { display: grid; gap: 5px; }
.timeline-readout-event { display: flex; align-items: center; gap: 7px; min-width: 0; color: #102d75; font-size: .74rem; font-weight: 600; }
.timeline-readout-more { margin: 0; text-align: center; color: #58698f; font-size: .62rem; font-weight: 650; }

/* New action while no device can take one: it looks unavailable, as iOS, and a tap says why. */
.timeline-create-action[aria-disabled="true"] { opacity: .35; }
.alert-dialog { width: min(20rem, calc(100vw - 2rem)); text-align: center; }
.alert-dialog h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.alert-dialog p { margin: 0 0 1rem; }
.alert-dialog .form-actions { justify-content: center; }
.alert-dialog .form-actions button { min-width: 8rem; }

/* The day and its picker. On a touch screen the invisible date input lies over the day and takes
   the tap, since Safari opens its picker only from the input itself. */
.timeline-day-title { display: flex; align-items: center; justify-content: center; gap: 7px; }
.timeline-day-words { display: grid; justify-items: center; gap: 1px; }
.timeline-day-title[aria-disabled], .timeline-day-step[aria-disabled] { cursor: progress; }
.timeline-day-step[aria-disabled] { opacity: .5; }
.timeline-day-loading { flex: none; width: 14px; height: 14px; }
.timeline-day-loading[hidden] { display: none; }
.timeline-day-input { font-size: 16px; -webkit-appearance: none; appearance: none; }
@media (pointer: coarse) { .timeline-day-input:not(.shown) { pointer-events: auto; z-index: 1; } }
.timeline-day-slot { display: grid; }
.timeline-day { display: grid; gap: 18px; min-width: 0; }
.timeline-day > * { min-width: 0; margin: 0; }

@media (prefers-color-scheme: dark) {
  .flow-plot:focus-visible { outline-color: #78a7ff; }
  .flow-selection { border-left-color: #eaf0ff8c; }
  .flow-page-hint { color: #aab7d1; }
  .flow-page-hint-title { color: #eaf0ff; }
  .timeline-readout { background: #202a40; border-color: #34425d; }
  .timeline-readout-title, .timeline-readout-pill strong, .timeline-readout-event { color: #eaf0ff; }
  .timeline-readout-name, .timeline-readout-more { color: #aab7d1; }
  .timeline-readout-pill { background: color-mix(in srgb, var(--series) 18%, transparent); }
  .timeline-message-icon { color: #ffad42; }
}

/* Safe areas. The page is laid out with viewport-fit=cover, so in the Home Screen app and in
   Safari's landscape view it runs under the status bar, the rounded corners, the sensor housing
   and the home indicator. Every edge that meets the screen edge adds the matching inset, which
   is zero in a desktop browser, so the layout there is unchanged. */
:root {
  --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px);
}
.main-wrap {
  padding-top: calc(clamp(1.2rem, 3vw, 3rem) + var(--safe-top));
  padding-right: calc(clamp(1.2rem, 3vw, 3rem) + var(--safe-right));
  padding-bottom: calc(clamp(1.2rem, 3vw, 3rem) + var(--safe-bottom));
}
.sidebar {
  padding-top: calc(1.8rem + var(--safe-top)); padding-bottom: calc(1.8rem + var(--safe-bottom));
  padding-left: calc(1.15rem + var(--safe-left));
}
.auth-layout {
  padding: calc(1rem + var(--safe-top)) calc(1rem + var(--safe-right))
    calc(1rem + var(--safe-bottom)) calc(1rem + var(--safe-left));
}
.skip-link { top: var(--safe-top); margin-left: var(--safe-left); }
.pull-refresh { top: var(--safe-top); }
.detail-dialog { max-height: min(85dvh, 800px, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 1rem)); }
@media (max-width: 800px) {
  /* The tab bar sits on the home indicator's inset, as the iOS tab bar does, and its buttons keep
     clear of the corners in landscape. The page above it needs no bottom inset of its own. */
  .main-wrap {
    padding-top: calc(1.1rem + var(--safe-top)); padding-right: calc(1rem + var(--safe-right));
    padding-bottom: 2rem; padding-left: calc(1rem + var(--safe-left));
  }
  .mobile-nav { padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left); }
  .detail-dialog { width: min(520px, calc(100vw - 2rem - var(--safe-left) - var(--safe-right))); }
}
@media (min-width: 801px) {
  /* The sidebar holds the left edge on desktop; the page needs only its own padding there. */
  .main-wrap { padding-left: clamp(1.2rem, 3vw, 3rem); }
}

/* A switch, as the iOS Toggle: a checkbox drawn as a track and thumb, in the accent when on. */
input.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 51px; height: 31px; margin: 0;
  border: 0; border-radius: 999px; background: #d5dbe8; cursor: pointer; transition: background-color .2s; }
input.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px #0b102040; transition: transform .2s; }
input.switch:checked { background: #f5a623; }
input.switch:checked::before { transform: translateX(20px); }
input.switch:disabled { cursor: not-allowed; opacity: .5; }
@media (forced-colors: active) { input.switch { border: 2px solid CanvasText; } input.switch:checked { background: Highlight; } }
@media (prefers-reduced-motion: reduce) { input.switch, input.switch::before { transition: none; } }

/* Settings → Notifications, as iOS AlertsScreen.notificationSettingsScreen. */
.notification-settings > .notification-types-heading { margin: 1.3rem 0 .2rem; font-size: 1.06rem; }
.notification-settings > .notification-types-heading + p { margin-top: 0; font-size: .82rem; }
.notification-status-panel { display: grid; gap: .5rem; padding: 1rem; border: 1px solid #dde3ef; border-radius: 14px; background: #f6f8fc; }
.notification-status-panel p { margin: 0; font-size: .9rem; }
.notification-status-panel > button { justify-self: start; }
.notification-status-title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.1rem; }
.notification-status-symbol { display: inline-grid; place-items: center; flex: none; color: #102d75; }
.notification-status-symbol[data-state=enabled] { color: #bf811b; }
.notification-status-symbol[data-state=denied], .notification-status-symbol[data-state=failed] { color: #ad2636; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; margin-top: .3rem;
  padding-top: .7rem; border-top: 1px solid #dde3ef; font-weight: 600; }
.notification-types { display: grid; gap: 0; margin: .5rem 0 0; padding: .6rem 1rem .4rem; border: 1px solid #dde3ef; border-radius: 14px; min-width: 0; }
.notification-types legend { float: left; width: 100%; margin: 0 0 .3rem; padding: 0; font-weight: 700; font-size: 1rem; }
.notification-types.dimmed .alert-row { opacity: .45; }
.alert-row { display: flex; align-items: center; gap: .75rem; min-height: 52px; border-top: 1px solid #eef1f7; }
.alert-row:first-of-type { border-top: 0; }
.alert-row-copy { display: grid; gap: .1rem; min-width: 0; margin-right: auto; }
.alert-row-title { font-weight: 550; font-size: .92rem; }
.alert-row-detail { color: #58698f; font-size: .8rem; }
.alert-row-settings { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #58698f; }
.alert-row-settings:hover:not(:disabled) { background: #eaf0ff; }
/* One alert's settings, as the iOS sheets: a section header, the steppers or time, and the footer. */
.alert-tuning { display: grid; gap: .6rem; margin-top: .6rem; }
.alert-tuning .tuning-header { margin: 0; font-size: .8rem; font-weight: 650; letter-spacing: .02em; color: #58698f; text-transform: uppercase; }
.alert-tuning .tuning-footer { margin: 0; font-size: .82rem; }
.tuning-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .3rem .9rem;
  border: 1px solid #dde3ef; border-radius: 12px; }
.tuning-row input[type=time] { min-height: 40px; padding: .3rem .5rem; border-radius: 8px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .3rem .5rem .3rem .9rem;
  border: 1px solid #dde3ef; border-radius: 12px; }
.stepper-value { min-width: 0; font-weight: 550; }
.stepper-buttons { display: inline-flex; flex: none; overflow: hidden; border-radius: 9px; background: #eaf0ff; }
.stepper-step { width: 48px; height: 36px; border: 0; background: transparent; color: #102d75; font-size: 1.25rem; font-weight: 650; line-height: 1; }
.stepper-step + .stepper-step { border-left: 1px solid #c9d3e8; }
.stepper-step:disabled { opacity: .35; }

/* The notification history from the bell, as iOS AlertsScreen.notificationInboxScreen. */
.notification-inbox { display: grid; gap: .8rem; margin-top: .6rem; }
.notification-inbox-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.notification-inbox-bar select { flex: 1 1 10rem; }
.notification-settings-link { display: inline-flex; align-items: center; gap: .4rem; }
.notification-inbox .alert-history-list { margin-top: 0; }
.notification-inbox > .link { justify-self: start; }
.notification-inbox-empty { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid #dde3ef; border-radius: 14px; }

/* The notifications step, as iOS OnboardingScreen.notificationsStep. */
.onboarding-step > .card { width: min(100%, 560px); }
.onboarding-step h1 { margin: .35rem 0 .5rem; font-size: clamp(1.7rem, 6vw, 2rem); }
.onboarding-types { display: grid; margin: 1.1rem 0 .6rem; padding: .3rem .9rem; border: 1px solid #dde3ef; border-radius: 18px; min-width: 0; }
.onboarding-type { display: flex; align-items: center; gap: .9rem; min-height: 64px; padding: .55rem 0; border-top: 1px solid #eef1f7; cursor: pointer; }
.onboarding-type:first-of-type { border-top: 0; }
.onboarding-type-copy { display: grid; gap: .15rem; min-width: 0; margin-right: auto; }
.onboarding-type-copy strong { font-size: .93rem; }
.onboarding-type-copy span { color: #58698f; font-size: .8rem; line-height: 1.35; }
/* A circular tick, as iOS CircularTickToggleStyle. */
input.tick { appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border: 2px solid #aab7d1;
  border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
input.tick:checked { border-color: #f5a623; background: #f5a623; }
input.tick:checked::after { content: ""; width: 7px; height: 12px; margin-top: -3px; border: solid #102d75; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (forced-colors: active) { input.tick:checked { background: Highlight; } }
.onboarding-privacy { font-size: .8rem; }
.onboarding-actions { flex-direction: column; align-items: stretch; }
.onboarding-actions > button { width: 100%; }
.onboarding-install { display: grid; gap: .4rem; margin: 1.1rem 0 .4rem; padding: 1rem; border: 1px solid #f5a62388; border-radius: 16px; background: #fff8e9; }
.onboarding-install p { margin: 0; }
.onboarding-install button { justify-self: start; }

/* The Add to Home Screen step (US-WEB-007). */
.install-onboarding { margin: 1rem 0 .4rem; }
.install-onboarding .install-steps { display: grid; gap: .5rem; margin: 0; padding: 1rem 1rem 1rem 2.3rem; border: 1px solid #dde3ef; border-radius: 18px; }
.install-onboarding .install-steps li { margin: 0; }

/* Your homes, as iOS HouseholdSwitcherScreen: one divided list of homes, the current one ticked. */
.home-rows { list-style: none; margin: .4rem 0 1rem; padding: 0 .9rem; border: 1px solid #dde3ef; border-radius: 14px; background: #fff; }
.home-rows li { display: flex; align-items: center; gap: .3rem; border-top: 1px solid #eef1f7; }
.home-rows li:first-child { border-top: 0; }
.home-row { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; min-height: 64px; padding: .6rem 0; border: 0;
  background: transparent; color: #102d75; text-align: left; }
.home-row[aria-busy="true"] { opacity: .55; cursor: progress; }
.home-row-symbol { display: grid; place-items: center; flex: none; width: 30px; color: #102d75; }
.home-row[aria-current="true"] .home-row-symbol { color: #bf811b; }
.home-row-copy { display: grid; gap: .15rem; min-width: 0; margin-right: auto; }
.home-row-copy strong { font-size: 1rem; overflow-wrap: anywhere; }
.home-row-copy span { color: #58698f; font-size: .82rem; }
.home-row-tick { display: grid; place-items: center; flex: none; color: #102d75; }
.home-row-manage { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: #58698f; font-size: .85rem; letter-spacing: .05em; }
.home-row-manage:hover { background: #eaf0ff; }
.manage-home-actions { display: grid; gap: .6rem; margin-top: .8rem; }
.manage-home-actions > button { width: 100%; }

@media (prefers-color-scheme: dark) {
  input.switch { background: #34425d; }
  input.switch:checked { background: #ffb743; }
  .notification-status-panel, .notification-types, .tuning-row, .stepper, .notification-inbox-empty, .onboarding-types { border-color: #34425d; }
  .notification-status-panel { background: #202a40; }
  .notification-status-symbol { color: #eaf0ff; }
  .notification-status-symbol[data-state=enabled] { color: #ffb743; }
  .notification-status-symbol[data-state=denied], .notification-status-symbol[data-state=failed] { color: #ff8a80; }
  .switch-row { border-color: #34425d; }
  .alert-row, .onboarding-type, .home-rows li { border-color: #2a3550; }
  .alert-row-detail, .alert-row-settings, .alert-tuning .tuning-header, .onboarding-type-copy span,
  .home-row-copy span, .home-row-manage { color: #aab7d1; }
  .alert-row-settings:hover:not(:disabled), .home-row-manage:hover { background: #202a40; }
  .stepper-buttons { background: #202a40; }
  .stepper-step { color: #eaf0ff; }
  .stepper-step + .stepper-step { border-color: #34425d; }
  input.tick { border-color: #6b7a99; }
  input.tick:checked { border-color: #ffb743; background: #ffb743; }
  input.tick:checked::after { border-color: #0b1020; }
  .onboarding-install { background: #3d321d; border-color: #745b29; }
  .home-rows { background: #151d30; border-color: #34425d; box-shadow: none; }
  .install-onboarding .install-steps { border-color: #34425d; }
  .home-row, .home-row-symbol, .home-row-tick { color: #eaf0ff; }
  .home-row[aria-current="true"] .home-row-symbol { color: #ffb743; }
}