/* Plug & Play Solar Kits: the UK-only pieces, layered over the shared framework (site.css).
   The look is the Isle of Man Solar design (Mark's decision, 26 Sept 2026): dark and cinematic
   throughout, gold accents, no daylight flip after the flight. The light "daylight tracker"
   identity that used to live here was dropped; see CLAUDE.md for why.
   What remains here is only what the UK site has and the Isle of Man site does not:
   the kit tracker, and the calculator's location and network-operator lines. */

/* Card surfaces, matching the guide-page components in site.css */
:root { --card: #FFFFFF; --line: var(--mist); }

/* Kit tracker */
.kt { margin: 2.5rem 0; }
.kt__bar { display: grid; gap: 1rem; padding: 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); position: relative; overflow: hidden; }
.kt__bar::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--sun), var(--ember)); }
.kt__filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; }
.kt__search, .kt__field { display: flex; flex-direction: column; }
.kt label { display: block; min-height: 1.1rem; font-family: var(--mono); font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; }
.kt input, .kt select { box-sizing: border-box; width: 100%; font: inherit; padding: .75rem .85rem; min-height: 48px; border: 1.5px solid #6B7C83; border-radius: 12px; background: var(--paper); color: var(--ink); }
.kt input:focus-visible, .kt select:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.kt__count { font-family: var(--mono); font-size: .85rem; color: var(--ink-soft); margin: 1.2rem 0 .8rem; }
.kt__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }
/* An author display rule beats the browser's own [hidden] rule, so filtered-out cards must be hidden explicitly. */
.kt-card[hidden] { display: none !important; }
.kt-card { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .8rem; box-shadow: 0 30px 60px -45px rgba(14,27,34,.5); }
.kt-card h3 { font-size: 1.15rem; line-height: 1.2; margin: 0 0 .3rem; color: var(--ink); text-wrap: balance; }
.kt-card__status { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.kt-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; margin: 0; }
.kt-card__specs dt { font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.kt-card__specs dd { margin: .1rem 0 0; font-weight: 500; color: var(--ink); }
.kt-card__price { margin: auto 0 0; font-size: 1.05rem; color: var(--ink); }
.kt-card__price strong { font-family: var(--display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; }
.kt-card__price span { display: block; font-size: .88rem; color: var(--ink-soft); }
.kt-card__ref { margin: 0; font-family: var(--mono); font-size: .85rem; }
.kt__none { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; text-align: center; color: var(--ink-soft); }
.kt__none button { font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; padding: .25rem; min-height: 44px; }

/* Compliance marks: colour plus words, never colour alone */
.is-compliant { color: var(--yes); font-weight: 600; }
.is-noncompliant { color: var(--no); font-weight: 600; }

/* Calculator: the location and network-operator lines sit inside the dark result panel */
.calc-out .calc-where, .calc-out .calc-dno { margin: .9rem 0 0; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.82); }
.calc-out .calc-dno { padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.18); }
.calc-out .calc-where strong, .calc-out .calc-dno strong { color: #fff; font-weight: 600; }
.calc-out .calc-where a, .calc-out .calc-dno a { color: var(--sun); }