/* SPDX-License-Identifier: Unlicense */
/* Somfy-inspired palette: golden yellow + deep navy on a light surface. */
:root {
  --yellow: #FFC72C;
  --yellow-600: #E9AE00;
  --navy: #14143C;
  --navy-700: #22224F;
  --bg: #F4F5F8;
  --card: #FFFFFF;
  --line: #E3E4EC;
  --muted: #6C6C82;
  --ok: #1E9E5A;
  --danger: #C23A3A;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(20,20,60,.08), 0 6px 20px rgba(20,20,60,.06);
  /* semantic tokens (flipped for dark below) */
  --fg: var(--navy);
  --surface-alt: #FFFFFF;
  --code-bg: #EEEFF4;
  --changelog-bg: #F7F8FB;
  --callout-bg: #FFF7E0;
  --callout-line: #FCE29A;
  --disabled-bg: #EEE;
  --disabled-fg: #AAA;
  --disabled-line: #E2E2E2;
  --dot: #BBB;
}

/* dark palette: applied when the OS prefers dark and no explicit choice was
   made, or when the user forces data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #23234F;
    --navy-700: #AEAFE8;
    --bg: #0E0E1C;
    --card: #191932;
    --line: #2E2E4A;
    --muted: #9A9AB4;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --fg: #E7E8F2;
    --surface-alt: #24243F;
    --code-bg: #24243F;
    --changelog-bg: #14142A;
    --callout-bg: #2A2410;
    --callout-line: #4A3F16;
    --disabled-bg: #23233A;
    --disabled-fg: #66667E;
    --disabled-line: #2E2E4A;
    --dot: #55556E;
  }
}
:root[data-theme="dark"] {
  --navy: #23234F;
  --navy-700: #AEAFE8;
  --bg: #0E0E1C;
  --card: #191932;
  --line: #2E2E4A;
  --muted: #9A9AB4;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --fg: #E7E8F2;
  --surface-alt: #24243F;
  --code-bg: #24243F;
  --changelog-bg: #14142A;
  --callout-bg: #2A2410;
  --callout-line: #4A3F16;
  --disabled-bg: #23233A;
  --disabled-fg: #66667E;
  --disabled-line: #2E2E4A;
  --dot: #55556E;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); line-height: 1.5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 56rem; margin: 1.5rem auto; padding: 0 1rem; }
a { color: var(--navy-700); }
code { background: var(--code-bg); padding: .1em .35em; border-radius: 4px; font-size: .9em; }

/* top bar */
.topbar { background: var(--navy); color: #fff; padding: .9rem 1.25rem;
  display: flex; align-items: center; gap: .75rem; }
.brand { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.brand span { color: var(--yellow); }
.topbtn { display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.topbtn:hover { background: rgba(255,255,255,.22); }
.topbtn svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.topbtn.txt { width: auto; padding: 0 .6rem; font-size: .9rem; text-decoration: none; }
.push { margin-left: auto; }

/* language picker: a dropdown anchored under the translate button */
.langpick { margin-left: auto; position: relative; }
.langmenu { position: absolute; top: calc(100% + .4rem); right: 0; z-index: 20; margin: 0; padding: .25rem;
  list-style: none; min-width: 8rem; background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.langmenu[hidden] { display: none; }
.langmenu li { padding: .4rem .6rem; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.langmenu li:hover, .langmenu li:focus-visible { background: var(--surface-alt); outline: none; }
.langmenu li[aria-selected="true"] { font-weight: 700; color: var(--navy-700); }

.iconbtn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt);
  color: var(--fg); cursor: pointer; }
.iconbtn:hover { border-color: var(--navy); }
.iconbtn svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

/* cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem; margin: 1rem 0; }
.card h2 { margin: .1rem 0 .5rem; font-size: 1.15rem; }
.muted { color: var(--muted); font-size: .9rem; }

/* stepper — a phase icon per step (theme-colored via currentColor) */
.stepper { list-style: none; display: flex; gap: .25rem; padding: 0; margin: 1.25rem 0; }
.stepper li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--muted); position: relative; text-align: center; }
.stepico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: var(--surface-alt); border: 2px solid var(--line); color: var(--muted); }
.stepico svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.stepper li::after { content: ""; position: absolute; top: 1.375rem; left: -50%; width: 100%;
  height: 2px; background: var(--line); z-index: -1; }
.stepper li:first-child::after { display: none; }
.stepper li.active { color: var(--fg); font-weight: 700; }
.stepper li.active .stepico { background: var(--navy); border-color: var(--navy); color: #fff; }
.stepper li.done .stepico { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.stepper li.done { cursor: pointer; }
.stepper li.done:hover { color: var(--fg); }
.stepper li.done:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.stepper li.done::after, .stepper li.active::after { background: var(--yellow); }

/* buttons */
.btn { font: inherit; font-weight: 600; border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem .9rem; cursor: pointer; background: var(--surface-alt); color: var(--fg); }
.btn:hover { border-color: var(--navy); }
.btn.primary { background: var(--yellow); border-color: var(--yellow-600); color: var(--navy); }
.btn.primary:hover { background: var(--yellow-600); }
.btn.danger { background: var(--surface-alt); border-color: var(--danger); color: var(--danger); }
.btn.small { padding: .32rem .6rem; font-size: .85rem; }
.btn:disabled { background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--disabled-line); cursor: not-allowed; }

/* wizard nav */
.wiznav { display: flex; justify-content: space-between; gap: .5rem; margin: 1rem 0; }
.wiznav #next { margin-left: auto; }
/* draw the eye to Next once a step's action unlocks it */
.btn.bounce { animation: bounce .7s ease 5; }
@keyframes bounce { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(11px); } 55% { transform: translateX(0); } 78% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .btn.bounce { animation: none; } }

/* connection status */
.status { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--muted); }
.dot { width: .65rem; height: .65rem; border-radius: 999px; background: var(--dot); }
.dot.on { background: var(--ok); }

/* callout */
.callout { background: var(--callout-bg); border: 1px solid var(--callout-line); border-radius: 8px;
  padding: .75rem .9rem; margin: .75rem 0; font-size: .92rem; }
.callout.bad { background: color-mix(in srgb, var(--danger) 12%, var(--card)); border-color: var(--danger); }
.callout .btn { margin: .4rem .4rem 0 0; }

/* blocking reconnect modal: blurs the whole page until the board is back */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(10,10,25,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-overlay[hidden] { display: none; }
.modal-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.75rem; max-width: 22rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.modal-card.modal-wide { max-width: 32rem; width: calc(100% - 2rem); }
.modal-wide #discoverCards { width: 100%; text-align: left; }
.spinner { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--navy-700); }
.spinner svg { width: 2.5rem; height: 2.5rem; fill: currentColor; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* tables & inputs */
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: .5rem; text-align: left; font-size: .92rem; }
th { color: var(--muted); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
input[type="text"], input.name, input.num { font: inherit; padding: .35rem .45rem;
  border: 1px solid var(--line); border-radius: 6px; width: 100%;
  background: var(--surface-alt); color: var(--fg); }
input.num { width: 7rem; }
input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--navy); }

/* per-row motor controls */
.ctrls { display: inline-flex; gap: .3rem; flex-wrap: wrap; }

/* icon-only control button (Open/Stop/Close) */
.btn.icon { display: inline-grid; place-items: center; padding: .3rem; width: 2rem; height: 2rem; }
.btn.icon svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

/* name cell: remote-link badge + name-as-disclosure button */
.namecell { display: flex; align-items: center; gap: .45rem; }
.namebtn { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; margin: 0;
  color: var(--fg); cursor: pointer; text-align: left; }
.namebtn:hover, .namebtn[aria-expanded="true"] { color: var(--navy-700); text-decoration: underline; }

/* per-shade detail row: fields wrap in a grid so the panel fits any width */
.detailrow > td { background: var(--surface-alt); padding: .75rem 1rem 1rem; }
.detailrow > td > .muted { margin: 0 0 .75rem; }
.detailgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .75rem 1rem; align-items: end; }
.detailgrid .field { display: flex; flex-direction: column; gap: .25rem; }
.detailgrid .fieldlabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.detailgrid .ctrl { display: flex; align-items: center; gap: .3rem; }
.remote-badge { flex: none; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem;
  color: var(--muted); opacity: .3; }
.remote-badge.on { color: var(--yellow-600); opacity: 1; }
.remote-badge svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

/* a switched-off shade row is greyed but still readable/editable */
tr.disabled td { color: var(--muted); }
tr.disabled .ctrls { opacity: .5; }

/* On/Thread toggle switch (a styled checkbox) */
.switch { position: relative; display: inline-block; width: 2.4rem; height: 1.3rem; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .slider { position: absolute; inset: 0; background: var(--disabled-bg);
  border: 1px solid var(--line); border-radius: 999px; transition: background .15s; }
.switch .slider::before { content: ""; position: absolute; width: 1rem; height: 1rem; left: .12rem; top: .12rem;
  background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + .slider { background: var(--ok); border-color: var(--ok); }
.switch input:checked + .slider::before { transform: translateX(1.1rem); }

/* calibration modal: gamified travel-time measurement */
#calBody { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.cal-dots { display: flex; gap: .5rem; }
.cal-dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--line); }
.cal-dot.active { background: var(--yellow); }
.cal-dot.done { background: var(--ok); }
.cal-title { margin: 0; font-size: 1.05rem; text-align: center; }
.cal-timer { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 2.6rem;
  font-weight: 800; color: var(--navy-700); line-height: 1; }
.cal-timer svg { width: 2.6rem; height: 2.6rem; fill: currentColor; color: var(--ok); display: block; }
.cal-hint { margin: 0; text-align: center; color: var(--muted); min-height: 2.6em; }
.cal-hint b { color: var(--fg); }
.btn.cal-tap { font-size: 1.15rem; padding: .8rem 1.6rem; min-width: 12rem; }

/* save confirmation toast: brief bottom-center status after a setter lands */
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 200; background: var(--ok); color: #fff; padding: .6rem 1rem;
  border-radius: 999px; box-shadow: var(--shadow); font-size: .9rem; font-weight: 600; }
.toast[hidden] { display: none; }
.toast.bad { background: var(--danger); }

/* discovery: a card per newly heard remote */
.dcard { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; margin: .5rem 0;
  background: var(--surface-alt); }
.dcard-addr { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; margin-bottom: .4rem; }

/* Matter QR label — mirrors the CSA device-label layout: brand row, QR, code.
   Always rendered on white with a dark border/ink so it reads as a physical
   label regardless of the page theme. */
.matter-label { display: flex; flex-direction: column; align-items: center; gap: .55rem;
  width: max-content; max-width: 100%; margin: 1rem auto; padding: 1.1rem 1.4rem 1rem;
  background: #fff; color: #111; border: 2.5px solid #111; border-radius: 20px; }
.matter-label[hidden] { display: none; }
.matter-brand { display: flex; align-items: center; gap: .45rem; font-size: 1.7rem;
  font-weight: 300; line-height: 1; color: #111; }
.matter-mark { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; color: #111; }
.matter-mark svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }
.matter-label .qrimg { background: none; padding: 0; margin: .1rem 0; width: 220px; }
/* pairing code — plain dark digits under the QR, grouped 4-3-4 */
.paircode { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.5rem; font-weight: 500;
  letter-spacing: .05em; color: #111; margin: 0; }
.paircode[hidden], .qrimg[hidden] { display: none; }

/* onboarding progress tracker (Thread + Matter layers) */
.progress-steps { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: .55rem; }
.progress-steps[hidden] { display: none; }
.progress-steps li { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .92rem; }
.progress-steps li[hidden] { display: none; }
.progress-steps li.active { color: var(--fg); font-weight: 600; }
.progress-steps li.done { color: var(--fg); }
.pstep-dot { flex: none; width: .8rem; height: .8rem; border-radius: 999px; background: var(--line); }
.progress-steps li.active .pstep-dot { background: var(--yellow); }
.progress-steps li.done .pstep-dot { background: var(--ok); }
.adv { margin-top: 1rem; }
.adv summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.advrow { display: flex; align-items: center; gap: .6rem; margin: .7rem 0 .3rem; }
.advrow input { width: 8rem; }
.qrimg { display: block; width: 260px; height: auto; margin: .75rem auto; border-radius: 8px;
  background: #fff; padding: .5rem; image-rendering: pixelated; }
.pinout { display: block; width: 100%; max-width: 40rem; height: auto; margin: 1rem auto; border-radius: 8px; }

/* install page */
.bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .75rem 0; }
select { font: inherit; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt); color: var(--fg); }
#changelog { background: var(--changelog-bg); border: 1px solid var(--line); border-radius: 8px; padding: .6rem;
  white-space: pre-wrap; max-height: 20rem; overflow: auto; font-size: .85rem; }
.wipe { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; cursor: pointer; }
.modal-card .progress-track { width: 100%; }
.progress-track { height: 10px; border-radius: 6px; background: var(--disabled-bg); overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--yellow); transition: width .2s ease; }

/* serial log */
.log-wrap { margin-top: 1.5rem; }
.log-wrap summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
#log { background: #0E0E22; color: #7CFC9B; padding: .6rem; border-radius: 8px; height: 11rem;
  overflow: auto; white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .78rem; margin-top: .5rem; }

/* footer */
.sitever { text-align: center; color: var(--muted); font-size: .75rem; margin: 2rem 0 1rem;
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.sitever .disclaimer { margin: .4rem auto 0; max-width: 34rem; font-family: inherit; opacity: .85; }