:root{font:16px system-ui,sans-serif;color-scheme:light;--page:#f1f5f4;--surface:#fff;--ink:#183431;--muted:#526b67;--border:#b5c8c4;--accent:#145e59;--button:#fff;--error:#a1292e;--quiet:#dde3e2}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink)}body.dark{color-scheme:dark;--page:#101010;--surface:#1d1d1d;--ink:#f2f2f2;--muted:#bfbfbf;--border:#737373;--accent:#e3e3e3;--button:#161616;--error:#ffb2b4;--quiet:#303030}
[hidden]{display:none!important}button,input,select,textarea{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid var(--border);border-radius:8px;padding:9px 13px;background:var(--surface);color:var(--ink)}button:disabled{opacity:.55;cursor:wait}.primary{background:var(--accent);color:var(--button);font-weight:650}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}input,select,textarea{width:100%;padding:10px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:6px;min-height:44px}input[type=checkbox]{width:22px;min-height:22px;margin-right:8px}textarea{min-height:80px}label{display:block;margin:12px 0}h1,h2,h3,p{overflow-wrap:anywhere}h1{font-size:1.8rem}h2{font-size:1.3rem}small{color:var(--muted)}main{max-width:none;margin:auto;padding:70px 12px 24px}.card{padding:20px;margin:12px 0;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.centered{text-align:center;max-width:430px;margin:12vh auto}.centered button{width:100%}
#menu-button{background:var(--surface);font-size:1.3rem}aside{position:fixed;inset:0 auto 0 0;width:min(90vw,330px);overflow:auto;z-index:20;background:var(--surface);border-right:1px solid var(--border);padding:20px;box-shadow:5px 0 30px #0004}aside h1{text-align:center}aside button{display:block;width:100%;text-align:left;margin:8px 0}aside nav{padding-left:14px}summary{cursor:pointer;padding:14px 0;min-height:44px;font-weight:650}details{border-top:1px solid var(--border);margin-top:12px}
#dashboard{display:grid;grid-template-columns:1fr;gap:12px}.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;min-height:64px}.tile h2{font-size:1rem;margin:0 0 9px}.tile .value{font-size:clamp(1.35rem,7vw,2.5rem);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile.stale{background:var(--quiet);color:var(--muted)}.tile svg{width:100%;min-height:0;flex:1}.tile.compact{flex-direction:row;justify-content:space-between;align-items:center;gap:12px}.tile.compact h2{margin:0;flex:1;min-width:0}.tile.compact .value{font-size:1.4rem}.tile.compact small{font-size:.75rem}.tile .legend{display:flex;flex-wrap:wrap;gap:8px;max-height:44px;overflow:hidden;font-size:.75rem}.tile .legend span{display:inline-flex;align-items:center;gap:4px}.swatch{width:10px;height:10px;border-radius:50%;display:inline-block}.tile.align-Center{text-align:center}.tile.align-Right{text-align:right}.tile.align-Left{text-align:left}.tile.heading{display:block;align-content:center}.tile.heading h2{margin:0;font-size:1.15rem}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.row>*{flex:1}.alert-row{padding:14px 0;border-bottom:1px solid var(--border)}.alert-row h3{margin:0 0 6px}#notice,#error{padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}#error,#editor-error{color:var(--error)}dialog{color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:12px;max-width:min(96vw,600px);width:600px;max-height:90dvh;padding:20px}dialog::backdrop{background:#0008}dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}dialog footer{display:flex;gap:10px;padding-top:16px}dialog header h2{margin:0}.placement{padding:12px;border:1px solid var(--border);border-radius:8px;margin:12px 0}.placement .row button{flex:initial}.placement small{display:block}svg text{fill:var(--ink);font:12px system-ui}progress{width:100%;accent-color:var(--accent);height:22px}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .15s}}
.tile.tile-box-hidden{background:transparent;border-color:transparent;box-shadow:none}.tile-box-choice{display:flex;align-items:center;gap:8px;cursor:pointer}.tile-box-choice input[type=checkbox]{flex:none;margin:0}.tile.tile-box-hidden.stale{filter:grayscale(1)}

/* Phone navigation keeps the available dashboards and default controls visible. */
aside h1{margin:12px 38px 28px;font-size:1.6rem}aside>button,aside .dashboard-menu-row button{border:0;border-radius:4px;background:transparent;padding-left:4px}aside>button:hover,aside .dashboard-menu-row button:hover{background:var(--quiet)}aside nav{padding:0}#close-menu{position:absolute;--corner-gap:max(4px,env(safe-area-inset-top),env(safe-area-inset-right));right:var(--corner-gap);top:var(--corner-gap);width:44px;height:44px;margin:0;padding:0;text-align:center;font-size:1.6rem;line-height:1}aside #close-menu:focus-visible{outline:3px solid var(--accent)}.dashboard-menu-group>summary{font-size:.75rem;color:var(--muted);margin-left:14px;padding:12px 0}.dashboard-menu-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-left:14px}.dashboard-menu-row button{margin:0;overflow-wrap:anywhere}.dashboard-menu-row button[aria-current=page]{font-weight:700;color:var(--accent)}.dashboard-menu-row input{margin:0;justify-self:center;width:22px;height:22px;cursor:pointer}.dashboard-menu-row input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.menu-empty{font-size:.85rem;color:var(--muted);margin:4px 0 12px 18px}.field-note{font-size:.85rem;color:var(--muted)}#save-feedback{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);margin-bottom:12px}#save-feedback #notice{border:0;padding:8px 0;margin:0;flex:1}#dismiss-feedback{flex:0 0 44px;border:0;background:transparent;font-size:1.3rem}.default-choice{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-height:44px;margin:0;cursor:pointer;white-space:nowrap;font-size:.75rem;color:var(--muted)}
#save-feedback.is-saving{position:fixed;top:max(20px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:9;max-width:calc(100vw - 88px);margin:0;padding:0;border:0;border-radius:0;background:transparent;text-align:right;color:var(--muted);font-size:.875rem;pointer-events:none}#save-feedback.is-saving #notice{padding:0;background:transparent}

aside details{border:0;margin:0}.menu-section>summary{font-size:1.05rem;font-weight:650;padding:12px 4px}.menu-section>button{border:0;border-radius:4px;background:transparent;margin:0;padding-left:24px}.menu-section>button:hover{background:var(--quiet)}.menu-section>button[aria-current=page]{font-weight:700;color:var(--accent)}
.remember-choice{display:flex;align-items:flex-start;gap:8px;text-align:left;margin:18px 0 0}.remember-choice input{flex:0 0 22px;margin:3px 0 0}
.signed-in-account{display:flex;flex-direction:column;gap:4px;margin:16px 4px 4px;overflow-wrap:anywhere;font-size:.9rem}.signed-in-account small{color:var(--muted)}

/* The remote client uses the saved TV placement on a monitor and stacks on phones. */
.tile{min-width:0}.tile.compact h2{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tile.compact .value{flex:0 1 auto;min-width:0}
#alerts,#error{max-width:900px;margin-left:auto;margin-right:auto}.remote-view{margin:-18px 0 20px;text-align:center;color:var(--muted);font-size:.8rem}.remote-access-note{font-size:.8rem;color:var(--muted);line-height:1.4}
@media(min-width:924px){main{padding-left:24px;padding-right:24px}}

/* Tile content overrides never affect editor buttons or source-health colors. */
.custom-tile-font :is(h2,h3,.widget-value,.widget-unit,.value,.legend,.legend-label,.chart-legend,svg text){font-family:var(--tile-font)!important}
.custom-tile-size :is(h2,h3,.widget-value,.widget-unit,.value,.value small,.legend,.legend-label,.chart-legend,svg text){font-size:var(--tile-font-size)!important;letter-spacing:normal}
.layout-display-title{margin:8px 0 16px;font-size:clamp(22px,2.2vw,36px);text-align:center;overflow-wrap:anywhere;line-height:1.2}
.pie-remainder{fill:var(--border,#aab5b5);stroke:var(--surface,#fff);stroke-width:1}

/* A real header row reserves space for navigation, including phone safe areas. */
#view-header{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;position:sticky;top:0;z-index:10;padding:calc(4px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));min-height:56px;background:var(--page)}
#view-header:has(#menu-button[hidden]){display:none}
#view-header #menu-button{position:static;width:44px;height:44px;min-height:44px;padding:0;line-height:1;border-radius:9px;box-shadow:0 2px 6px #0001}
#view-header #dashboard-title{margin:0;min-height:44px;align-content:center;line-height:1.2;font-size:clamp(21px,2.2vw,32px)}
#main{padding-top:12px}
.placement-note{font-size:14px;overflow-wrap:anywhere}

/* Shared hierarchy for expandable headings and direct destinations. */
#menu{padding:20px 16px max(20px,env(safe-area-inset-bottom));border-right:1px solid var(--border);box-shadow:12px 0 40px #0004}
#menu>.menu-section>summary,#menu>button:not(#close-menu),#menu>label{font-weight:700;font-size:1rem;line-height:1.4}
#menu>.menu-section{margin:4px 0}
#menu>.menu-section>summary,#menu>button:not(#close-menu){min-height:44px;padding:11px 12px;margin:2px 0;border-radius:8px}
#menu summary{display:flex;align-items:center;gap:8px;list-style:none;border-radius:8px}
#menu summary::-webkit-details-marker{display:none}
#menu summary::after{content:'';flex:none;margin-left:auto;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
#menu details[open]>summary::after{transform:rotate(45deg)}
#menu summary:hover,#menu>.menu-section[open]>summary,#menu button:hover{background:var(--quiet)}
#menu .dashboard-menu-group{margin-left:14px;border-left:1px solid var(--border);padding-left:8px}
#menu .dashboard-menu-group>summary{margin:0;padding:10px 12px;font-size:.85rem}
#menu .dashboard-menu-row{margin-left:8px}
#menu .dashboard-menu-row button{padding:10px 8px;border-radius:6px}
#menu .dashboard-menu-row button[aria-current=page],#menu .menu-section>button[aria-current=page]{background:var(--quiet);box-shadow:inset 3px 0 var(--accent)}
#menu>label{display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 12px;margin:2px 0;cursor:pointer}
#menu>label input{margin:0;flex:none}
#menu .signed-in-account{margin:18px 12px 4px;padding-top:18px;border-top:1px solid var(--border)}
#menu .remote-access-note{margin:12px;line-height:1.5}

.tile .chart-gridline{stroke:var(--border);stroke-width:1}

.tile .chart-data-label{fill:var(--ink);stroke:var(--surface);stroke-width:3px;paint-order:stroke;stroke-linejoin:round;font-weight:600}
/* Hollow percentage gauges share the palette and never scroll within tiles. */
.gauge-svg{display:block;max-width:100%;max-height:100%;margin-inline:auto;aspect-ratio:1;overflow:hidden}
.gauge-track,.gauge-rim{stroke:var(--border,#cbd5d2)}
.gauge-svg text.gauge-value{font-size:inherit;fill:var(--ink);font-weight:700;stroke:none}
.tile .value.text-value{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;line-height:1.25}
:root{--brand-height:170px;--brand-width:100%;--brand-fit:contain}
.brand{text-align:center;margin:0 auto 18px;overflow-wrap:anywhere}
.brand .app-logo{display:block;width:var(--brand-width);height:var(--brand-height);max-width:100%;object-fit:var(--brand-fit);margin:0 auto 12px}
.brand .brand-company{display:block;font-size:24px;line-height:1.25}
.brand>span{display:block;font-size:12px;letter-spacing:.12em;margin-top:6px}
#menu .brand{margin-top:16px}

/* Tag display defaults never replace unavailable-data styling or chart series colors. */
.tag-color-light:not(.stale) :is(h2,h3,.widget-value,.widget-unit,.value,.value small){color:var(--tag-text-light)}
.tag-color-light:not(.stale) svg text{fill:var(--tag-text-light)}
body.dark .tag-color-light:not(.stale) :is(h2,h3,.widget-value,.widget-unit,.value,.value small){color:var(--ink)}
body.dark .tag-color-light:not(.stale) svg text{fill:var(--ink)}
body.dark .tag-color-dark:not(.stale) :is(h2,h3,.widget-value,.widget-unit,.value,.value small){color:var(--tag-text-dark)}
body.dark .tag-color-dark:not(.stale) svg text{fill:var(--tag-text-dark)}