/* Shared ELM category accents. Red remains the action/selection colour. */
:root {
  --elm-tone-brand: oklch(0.68 0.19 27);
  --elm-tone-red-deep: oklch(0.55 0.2 23);
  --elm-tone-red-soft: oklch(0.76 0.13 20);
  --elm-tone-light: oklch(0.8 0.15 88);
  --elm-tone-socket: oklch(0.73 0.13 240);
  --elm-tone-appliance: oklch(0.74 0.14 155);
  --elm-tone-plan: oklch(0.74 0.12 190);
  --elm-tone-security: oklch(0.73 0.13 350);
  --elm-tile-tone: var(--elm-tone-brand);
  --elm-tile-base: oklch(0.18 0.006 25);
  --elm-tile-ink: oklch(0.97 0.002 25);
}
:is(.homegrid,.roomgrid,.servicegrid,.panelgrid,.settings-hub-grid,.new-service-types,.lp-grid,.hero-feature-cards) > :nth-child(3n+1) { --elm-tile-tone: var(--elm-tone-light); }
:is(.homegrid,.roomgrid,.servicegrid,.panelgrid,.settings-hub-grid,.new-service-types,.lp-grid,.hero-feature-cards) > :nth-child(3n+2) { --elm-tile-tone: var(--elm-tone-socket); }
:is(.homegrid,.roomgrid,.servicegrid,.panelgrid,.settings-hub-grid,.new-service-types,.lp-grid,.hero-feature-cards) > :nth-child(3n+3) { --elm-tile-tone: var(--elm-tone-appliance); }
:is(.tile,.room,.service,.panel,.settings-hub-tile,.emp,.elm-addon-tile,.worker-theme [data-job-id],.lp-grid > article,.hero-feature-cards > article,.new-service-types > button) {
  background: color-mix(in oklch, var(--elm-tile-tone) 10%, var(--elm-tile-base)) !important;
  border-color: color-mix(in oklch, var(--elm-tile-tone) 35%, var(--elm-tile-base)) !important;
  border-left: 3px solid var(--elm-tile-tone) !important;
  border-radius: 8px !important;
  color: var(--elm-tile-ink);
  transition: background-color .18s ease, border-color .18s ease;
}
/* Position is only a fallback. Known functions have stable semantic colours. */
#newquote, .tile[data-go="quotes"] { --elm-tile-tone: var(--elm-tone-brand); }
.tile[data-go="catalogue"], .settings-hub-tile:has([data-editor="catalogue"]), [data-cat="light"] { --elm-tile-tone: var(--elm-tone-light); }
.tile[data-go="settings"], .settings-hub-tile:has([data-editor="brand"]), [data-cat="socket"] { --elm-tile-tone: var(--elm-tone-socket); }
#emptile, .emp, .elm-addon-tile[data-addon="S7"], .settings-hub-tile:has([data-editor="rooms"]), [data-cat="appliance"] { --elm-tile-tone: var(--elm-tone-appliance); }
.elm-addon-tile[data-addon="S2"], .worker-theme [data-job-id] { --elm-tile-tone: var(--elm-tone-plan); }
.elm-addon-tile[data-addon="S3"] { --elm-tile-tone: var(--elm-tone-socket); }
.elm-addon-tile[data-addon="S4"], .tile:has([data-go="payments"]), .tile[data-go="payments"] { --elm-tile-tone: var(--elm-tone-appliance); }
.elm-addon-tile[data-addon="S6"], #alarm .tile, #alarm .room { --elm-tile-tone: var(--elm-tone-security); }
#panels :is(.tile,.panel,.service) { --elm-tile-tone: var(--elm-tone-socket); }
:is([data-cat="light"],[data-cat="socket"],[data-cat="appliance"]) {
  background: color-mix(in oklch, var(--elm-tile-tone) 10%, var(--elm-tile-base)) !important;
  border-left: 3px solid var(--elm-tile-tone) !important;
}
:is(.tile,.settings-hub-tile) .ico,
:is(.lp-grid,.hero-feature-cards) > article > span:first-child {
  color: var(--elm-tile-tone) !important;
  border-color: color-mix(in oklch, var(--elm-tile-tone) 40%, var(--elm-tile-base)) !important;
  background: color-mix(in oklch, var(--elm-tile-tone) 12%, var(--elm-tile-base)) !important;
}
.elm-addon-tile svg { stroke: var(--elm-tile-tone); }
.elm-addon-tile[data-selected="true"] { border-top-color: var(--elm-tone-brand) !important; border-right-color: var(--elm-tone-brand) !important; border-bottom-color: var(--elm-tone-brand) !important; }
:is(.tile,.room,.service,.panel,.settings-hub-tile,.worker-theme [data-job-id]):hover {
  background: color-mix(in oklch, var(--elm-tile-tone) 17%, var(--elm-tile-base)) !important;
}
@media (prefers-reduced-motion: reduce) { :is(.tile,.room,.service,.panel,.settings-hub-tile,.elm-addon-tile) { transition: none; } }
@media print { .lp-grid > article,.hero-feature-cards > article { background: none !important; border-left-width: 1px !important; } }
.homegrid > :nth-child(3n+1), .lp-grid > :nth-child(3n+1), .hero-feature-cards > :nth-child(3n+1) { --elm-tile-tone: var(--elm-tone-brand); }
.homegrid > :nth-child(3n+2), .lp-grid > :nth-child(3n+2), .hero-feature-cards > :nth-child(3n+2) { --elm-tile-tone: var(--elm-tone-red-deep); }
.homegrid > :nth-child(3n+3), .lp-grid > :nth-child(3n+3), .hero-feature-cards > :nth-child(3n+3) { --elm-tile-tone: var(--elm-tone-red-soft); }
#home .homegrid > .tile:nth-child(3n+1) { --elm-tile-tone: var(--elm-tone-brand); }
#home .homegrid > .tile:nth-child(3n+2) { --elm-tile-tone: var(--elm-tone-red-deep); }
#home .homegrid > .tile:nth-child(3n+3) { --elm-tile-tone: var(--elm-tone-red-soft); }
.elm-store { --elm-store-line: oklch(.32 .01 25); --elm-store-muted: oklch(.79 .006 25); }
.elm-store .elm-store-plan { background: color-mix(in oklch,var(--elm-tone-brand) 5%,var(--elm-tile-base)) !important; border-color: var(--elm-store-line) !important; border-radius: 8px !important; padding: 1.6rem !important; box-shadow: none !important; }
.elm-store .elm-addon-tile { padding: 1.25rem !important; box-shadow: none !important; }
.elm-store .elm-addon-tile p { line-height: 1.65; }
.elm-store label { line-height: 1.5; }
@media(max-width:600px) { .elm-store .elm-store-plan { padding: 1.1rem !important; width: 100% !important; } .elm-store-benefits > div { min-width:0; } }/* Product groups: same colour for every item of a group, overriding positional fallbacks. */
:is(.servicegrid,.room-service-row,button,div)[data-cat="light"]:is(*,.service) { --elm-tile-tone: var(--elm-tone-light) !important; }
:is(.servicegrid,.room-service-row,button,div)[data-cat="socket"]:is(*,.service) { --elm-tile-tone: var(--elm-tone-socket) !important; }
:is(.servicegrid,.room-service-row,button,div)[data-cat="appliance"]:is(*,.service) { --elm-tile-tone: var(--elm-tone-appliance) !important; }
:is(button,div)[data-cat="other"] { --elm-tile-tone: var(--elm-tone-brand) !important; }
[data-cat="light"],[data-cat="socket"],[data-cat="appliance"],[data-cat="other"] { background: color-mix(in oklch, var(--elm-tile-tone) 10%, var(--elm-tile-base)) !important; border-left: 3px solid var(--elm-tile-tone) !important; }
/* Financial cards and utility actions; product tiles and red/green state controls stay unchanged. */
#payments .pay-net-note { padding:.8rem 1rem; border-left:3px solid var(--elm-tone-light); background:color-mix(in oklch,var(--elm-tone-light) 9%,var(--elm-tile-base)); color:var(--elm-tile-ink); border-radius:4px; }
#payments .pay-row { border-radius:8px; border-left:3px solid var(--elm-tone-socket); background:color-mix(in oklch,var(--elm-tone-socket) 8%,var(--elm-tile-base)); color:var(--elm-tile-ink); }
#payments .pay-row.settled { border-left-color:var(--elm-tone-appliance); background:color-mix(in oklch,var(--elm-tone-appliance) 10%,var(--elm-tile-base)); }
#payments .pay-sum > div:nth-child(1), .quote-stats > div:nth-child(1) { border-top:2px solid var(--elm-tone-socket); }
#payments .pay-sum > div:nth-child(2), .quote-stats > div:nth-child(3) { border-top:2px solid var(--elm-tone-appliance); }
#payments .pay-sum > div:nth-child(3) { border-top:2px solid var(--elm-tone-brand); }
#quotes .savedrow { border-left:3px solid var(--elm-tone-socket); background:color-mix(in oklch,var(--elm-tone-socket) 6%,var(--elm-tile-base)); border-radius:8px; }
#payments #paydownload { background:color-mix(in oklch,var(--elm-tone-socket) 20%,var(--elm-tile-base)); border-color:var(--elm-tone-socket); color:var(--elm-tile-ink); }
#payments #paysend { background:color-mix(in oklch,var(--elm-tone-plan) 15%,var(--elm-tile-base)); border-color:var(--elm-tone-plan); color:var(--elm-tile-ink); }
#payments .pay-row > span { min-width:0; overflow-wrap:anywhere; }
@media(max-width:520px) { #payments .pay-row { grid-template-columns:minmax(0,1fr); } }