/* Lite Series (5K BTU) additions on top of ../styles.css.
   Brand accents from the Lite manual: pale periwinkle panels (#d5dbe9) with a navy
   hairline, and the yellow NOTE chip (#ffd333). */

:root {
  --lw-panel: #eef1f8;
  --lw-line: #d5dbe9;
  --lw-yellow: #ffd333;
}

/* Content page layouts */
.lw-narrow { max-width: 900px; }
.lw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.lw-center { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lw-center .h-page { margin-bottom: 22px; }
.lw-center p { color: var(--ink-70); max-width: 60ch; }
.screen-inner p { line-height: 1.65; }
.lw-sub { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 20px; }
.lw-caps { font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.6; max-width: 72ch; }
.lw-muted { color: var(--ink-50); font-size: 14px; }
.lw-small { font-size: 13.5px; color: var(--ink-70); }
.lw-k { font-weight: 700; margin: 0 0 6px; font-size: 13.5px; letter-spacing: .02em; }
.lw-it { font-style: italic; color: var(--ink-70); }
.lw-h4 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lw-h4 span { color: var(--ink-50); letter-spacing: .04em; text-transform: none; font-weight: 600; }

/* Manual-style panels: pale periwinkle with a navy hairline */
.lw-card, .lw-box {
  background: var(--lw-panel); border: 1px solid rgba(14, 34, 64, .55); border-radius: 16px;
  padding: 20px 22px; margin: 18px 0; font-size: 14px;
}
.lw-card { display: grid; gap: 14px; }
.lw-row, .lw-box { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; }
.lw-row p, .lw-box p { margin: 0 0 8px; }
.lw-ico svg { width: 46px; height: auto; display: block; }
.lw-ico.sm svg { width: 34px; margin-left: 6px; }
.lw-list { margin: 6px 0 10px; padding-left: 18px; color: var(--ink-70); font-size: 14px; }
.lw-list li { margin-bottom: 6px; padding-left: 2px; }
.lw-list li::marker { color: var(--navy); }

.lw-table { display: grid; grid-template-columns: 1fr 180px; border: 1px solid rgba(14, 34, 64, .55); border-radius: 14px; overflow: hidden; margin: 18px 0; }
.lw-table > div { padding: 16px 20px; }
.lw-table .lw-k { background: none; }
.lw-cord { border-left: 1px solid var(--lw-line); text-align: center; }
.lw-cord img { height: 110px; width: auto; margin: 6px auto 0; }

.lw-num { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 14.5px; }
.lw-num > li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.lw-num .num, .lw-steps .num { width: 28px; height: 28px; font-size: 15px; background: var(--lw-line); }

/* Clickable numbered steps (filter, cabinet, removal) */
.lw-steps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.lw-step {
  width: 100%; display: grid; grid-template-columns: 28px 1fr 26px; gap: 14px; align-items: center;
  text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ink-08); background: #fff;
  font-size: 14px; color: var(--ink-70); transition: border-color .25s, background .25s, color .25s;
}
.lw-step:hover { border-color: var(--line); }
.lw-step.is-on { background: var(--blob); border-color: var(--line); color: var(--navy); }
.lw-step.is-on .num { background: var(--navy); color: #fff; }
.lw-step .num { transition: background .3s, color .3s; }

/* Figures from the manual + animated pointers */
.fig { margin: 0; }
.fig-frames { display: grid; max-width: 620px; margin: 0 auto; }
.frame { grid-area: 1 / 1; position: relative; opacity: 0; transition: opacity .7s var(--ease-out); align-self: center; }
.frame.on { opacity: 1; }
.frame { justify-self: center; width: fit-content; max-width: 100%; }
/* tall figures (Fig.B, Fig.2) fit the screen height; the frame hugs the image so the rings stay on target */
.frame img { display: block; width: auto; height: auto; max-width: 100%; max-height: max(260px, calc(100vh - 230px)); }
.marks { position: absolute; inset: 0; pointer-events: none; }
.mk { position: absolute; width: 0; height: 0; opacity: 0; }
.frame.on .mk { animation: mkIn .6s var(--ease-out) forwards; animation-delay: calc(.7s + var(--md)); }
@keyframes mkIn { to { opacity: 1; } }
.mk.ring::before, .mk.ring::after {
  content: ""; position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--navy); background: rgba(175, 201, 233, .28);
}
.mk.ring::after { background: none; border-color: var(--line); animation: ripple 2.2s var(--ease-out) infinite; animation-delay: var(--md); }
@keyframes ripple { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.mk.arrow svg {
  position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; padding: 6px;
  border-radius: 50%; background: var(--navy); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(var(--a)); box-shadow: 0 8px 18px -8px rgba(14, 34, 64, .6);
}
.mk.arrow { animation-name: mkIn; }
.frame.on .mk.arrow svg { animation: nudgeArrow 1.8s var(--ease-io) infinite; }
@keyframes nudgeArrow {
  0%, 100% { transform: rotate(var(--a)) translateX(-6px); }
  50% { transform: rotate(var(--a)) translateX(8px); }
}
.fig-cap { text-align: center; font-size: 12px; font-weight: 700; margin-top: 10px; color: var(--ink-70); }
.fig-tabs { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.fig-tabs button {
  border: 1px solid var(--ink-12); background: #fff; border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; color: var(--ink-70); transition: background .25s, color .25s, border-color .25s;
}
.fig-tabs button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Sub-step tweaks */
.lw-sub-title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; }
.lw-notechip { display: flex; gap: 10px; align-items: baseline; padding: 12px 16px; border-radius: 12px; background: var(--lw-panel); border: 1px solid rgba(14, 34, 64, .55); font-weight: 700; font-size: 13.5px; }
.lw-notechip span { background: var(--lw-yellow); padding: 1px 8px; border-radius: 5px; flex: none; }
.lw-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 18px; padding: 12px 16px; border-radius: 14px; background: var(--lw-panel); font-size: 13.5px; font-weight: 600; }
.lw-cond .skip-link { margin: 0; white-space: nowrap; }
.lw-cond.is-skip { background: var(--navy); color: #fff; }
.lw-cond.is-skip .skip-link { color: #fff; }

/* Level (1/3 bubble) */
.lw-level .lv-bub { animation: bubble 5s var(--ease-io) infinite; }
@keyframes bubble { 0%, 20% { transform: translateX(0); } 45%, 100% { transform: translateX(-23px); } }
.lw-level .ok { animation: okk 5s var(--ease-io) infinite; }

/* Step heroes: the manual's figure floats on the sky */
.lw-hero-title { font-size: clamp(42px, 5vw, 88px); }
.lw-lede { max-width: 46ch; margin: 18px 0 0; font-size: 15px; color: var(--ink-70); }
.lw-scene { width: min(100%, 520px); }
.lw-hero-card { background: #fff; border-radius: 26px; padding: 14px; box-shadow: 0 40px 70px -40px rgba(30, 40, 90, .45); animation: sceneIn 1.2s var(--ease-out) both .15s; }
.lw-hero-card img { width: 100%; height: auto; border-radius: 14px; }
.need-item .ni.is-img { width: 72px; height: 64px; border-radius: 14px; background: #fff; box-shadow: 0 10px 22px -16px rgba(14, 34, 64, .5); padding: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.need-item .ni.is-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.need-item { width: 108px; }
.need-row { align-items: flex-start; } /* tiles line up even when a label wraps to two lines */
.need-item .ni { height: 64px; }

/* What's in the box */
.lw-box-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.lw-items { grid-template-columns: 1fr 1fr; }
.lw-items.one { grid-template-columns: 1fr; }
.lw-item { grid-template-columns: 84px 1fr 26px; min-height: 84px; }
.lw-item .ii { height: 62px; width: 84px; border-radius: 10px; background: #fff; padding: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lw-item .ii img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.lw-item em { font-weight: 500; font-size: 11px; color: var(--ink-50); }
.lw-tools { display: flex; gap: 18px; }
.lw-box-grid .box-count { margin-top: 20px; }

/* LCDI plug test */
.plug-sim { background: var(--lw-panel); border-radius: 22px; padding: 22px; display: grid; justify-items: center; gap: 14px; position: sticky; top: 0; }
.plug-wrap { position: relative; width: 170px; }
.plug-wrap img { width: 100%; height: auto; mix-blend-mode: multiply; }
.plug-btn { position: absolute; left: 31%; width: 39%; height: 9%; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.plug-btn.reset { top: 13%; }
.plug-btn.test { top: 26.5%; }
.plug-btn:hover, .plug-btn:focus-visible { background: rgba(175, 201, 233, .45); }
.plug-sim[data-state="1"] .plug-btn.test, .plug-sim[data-state="2"] .plug-btn.reset { box-shadow: 0 0 0 3px var(--navy); animation: callout 1.4s var(--ease-io) infinite; }
@keyframes callout { 50% { box-shadow: 0 0 0 6px rgba(14, 34, 64, .25); } }
.plug-led { position: absolute; left: calc(50% - 5px); top: 46%; width: 10px; height: 10px; border-radius: 50%; background: #c9d1dc; transition: background .3s, box-shadow .3s; }
.plug-sim[data-state="1"] .plug-led, .plug-sim[data-state="3"] .plug-led { background: #34c26d; box-shadow: 0 0 10px #34c26d; }
.plug-status { margin: 0; font-weight: 700; font-size: 14px; text-align: center; min-height: 2.6em; }
.lcdi-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; font-size: 14px; color: var(--ink-70); transition: background .3s; }
.lcdi-steps li.is-cur { background: var(--lw-panel); color: var(--navy); }
.lcdi-steps li.is-on .num { background: var(--navy); color: #fff; }

/* Control panel simulator */
.ctl-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 10px; }
.ctl-panel {
  width: 116px; padding: 14px 12px 16px; border-radius: 26px; background: #fff;
  border: 1px solid var(--ink-12); box-shadow: 0 30px 60px -36px rgba(14, 34, 64, .45);
  display: grid; justify-items: center; gap: 6px; transition: opacity .8s;
}
.ctl-display { width: 100%; text-align: center; padding: 8px 0 6px; cursor: pointer; border-radius: 14px; transition: background .25s; }
.ctl-display:hover { background: var(--blob); }
.ctl-temp { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.02em; min-height: 38px; transition: opacity .4s; }
.ctl-temp.flash { animation: blink .55s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.ctl-leds { display: flex; justify-content: center; gap: 8px; }
.ctl-leds i { width: 7px; height: 7px; border-radius: 50%; background: var(--mesh); }
.ctl-panel [data-led="wifi"] { background: #5aa0ff; animation: blink 2s steps(2, end) infinite; }
.ctl-panel.pairing [data-led="wifi"] { animation-duration: .4s; }
.ctl-btn {
  position: relative; width: 50px; height: 50px; padding: 0; border: 0; background: none; border-radius: 50%;
  display: grid; place-items: center; transition: transform .2s var(--ease-out), background .25s;
}
.ctl-btn img { width: 100%; height: auto; mix-blend-mode: multiply; border-radius: 50%; }
.ctl-btn:hover { background: var(--blob); }
.ctl-btn:active { transform: scale(.92); }
.ctl-btn.is-sel { box-shadow: 0 0 0 2px var(--line); }
.ctl-rock { width: 40px; height: 70px; border-radius: 24px; border: 2px solid #3a3a3a; grid-template-rows: 1fr 1fr; font-size: 26px; font-weight: 400; line-height: 1; }
.ctl-rock span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 20px; }
.ctl-rock span:hover { background: var(--lw-panel); }
.ctl-btn.holding::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(var(--navy) calc(var(--p, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: holdRing 3s linear forwards;
}
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes holdRing { to { --p: 1; } }
.ctl-pled { position: absolute; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: #34c26d; box-shadow: 0 0 8px #34c26d; transition: opacity .4s; }
.ctl-modes { display: flex; gap: 6px; font-size: 10px; font-weight: 600; color: var(--ink-50); margin-top: -6px; }
.ctl-modes i { font-style: normal; padding: 1px 4px; border-radius: 4px; transition: background .25s, color .25s; }
.ctl-modes i.on { background: var(--navy); color: #fff; }
.ctl-speed { display: flex; gap: 3px; align-items: flex-end; height: 12px; margin-top: -6px; }
.ctl-speed i { width: 6px; border-radius: 2px; background: var(--mesh); transition: background .25s; }
.ctl-speed i:nth-child(1) { height: 5px; } .ctl-speed i:nth-child(2) { height: 8px; } .ctl-speed i:nth-child(3) { height: 12px; }
.ctl-panel[data-fan="0"] .ctl-speed i:nth-child(-n+1), .ctl-panel[data-fan="1"] .ctl-speed i:nth-child(-n+2), .ctl-panel[data-fan="2"] .ctl-speed i { background: var(--navy); }
.ctl-panel.dark .ctl-pled { opacity: 0; }
.ctl-panel.off .ctl-pled, .ctl-panel.off .ctl-leds i, .ctl-panel.off .ctl-speed i { opacity: 0; }
.ctl-panel.faded .ctl-temp, .ctl-panel.faded .ctl-leds, .ctl-panel.faded .ctl-modes, .ctl-panel.faded .ctl-speed { opacity: .12; }
.ctl-info { position: sticky; top: 0; background: var(--lw-panel); border-radius: 22px; padding: 26px 28px; font-size: 14.5px; min-height: 320px; }
.ctl-info p { margin: 0 0 12px; }
.ctl-info img { width: 120px; height: 120px; margin: 4px 0 12px; mix-blend-mode: multiply; }
.ctl-toast {
  position: absolute; right: 18px; top: -18px; padding: 8px 14px; border-radius: 999px; background: var(--navy); color: #fff;
  font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease-out); pointer-events: none;
}
.ctl-toast.show { opacity: 1; transform: none; }

/* Tips & notes */
.lw-note { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: start; background: var(--lw-panel); border: 1px solid rgba(14, 34, 64, .55); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.lw-tag { background: var(--lw-yellow); border-radius: 8px; padding: 8px 10px; font-weight: 700; font-size: 14px; line-height: 1.2; }

/* FCC */
.lw-acc { border: 1px solid var(--ink-08); border-radius: 18px; padding: 16px 20px; }
.lw-fcc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; font-size: 13px; color: var(--ink-70); }
.lw-fcc img { width: 100%; max-width: 320px; height: auto; margin: 4px 0 12px; mix-blend-mode: multiply; }

.lw-love { margin-top: 26px; text-align: left; align-self: stretch; background: var(--lw-panel); border: 1px solid rgba(14, 34, 64, .55); border-radius: 16px; padding: 18px 22px; font-size: 14px; }
.lw-love p { margin: 0; color: var(--ink-70); }
.lw-love .lw-k { color: var(--navy); margin-bottom: 8px; }
.lw-chip-col { display: flex; justify-content: center; padding-top: 60px; }

/* Back cover: the Windmill mark alone, as in the printed guide */
.lw-end { justify-items: center; text-align: center; margin: auto; }
.lw-mark svg { width: 150px; height: auto; display: block; }
.lw-mark svg path { fill: #fff; }
.cover .screen-inner, .end .screen-inner { position: relative; z-index: 1; }

@media (max-width: 1180px) {
  .lw-box-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .lw-scene .balloon { display: none; } /* no room beside the figure: it would show up cut off */
  .lw-split, .lw-fcc, .ctl-layout { grid-template-columns: 1fr; }
  .ctl-panel { width: 100%; grid-template-columns: repeat(4, 1fr); align-items: center; border-radius: 22px; }
  .ctl-display { grid-column: 1 / -1; }
  .ctl-modes, .ctl-speed { grid-column: span 1; margin: 0; }
  .lw-items { grid-template-columns: 1fr; }
  .lw-table { grid-template-columns: 1fr; }
  .lw-cord { border-left: 0; border-top: 1px solid var(--lw-line); }
  .plug-sim { position: relative; }
  .lw-note { grid-template-columns: 1fr; }
  .lw-tag { justify-self: start; }
  .lw-chip-col { padding-top: 0; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .frame.on img, .mk, .lw-level *, .ctl-temp.flash { animation: none !important; }
  .mk { opacity: 1; }
}