/* Habity USB Setup — styles
   Matched to the clock's built-in control panel (Tailwind v4 build): Inter /
   JetBrains Mono, #f3bb14 primary, zinc (oklch) neutrals, plain white
   rounded-2xl cards, vertical dark-pill nav, #6e6e6e toggle. Light-only. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --primary: #f3bb14;
  --primary-ring: #f3bb1433;
  --grey: #6e6e6e;

  --zinc-50: oklch(98.5% 0 0);
  --zinc-100: oklch(96.7% 0.001 286.375);
  --zinc-200: oklch(92% 0.004 286.32);
  --zinc-300: oklch(87.1% 0.006 286.286);
  --zinc-400: oklch(70.5% 0.015 286.067);
  --zinc-500: oklch(55.2% 0.016 285.938);
  --zinc-600: oklch(44.2% 0.017 285.786);
  --zinc-700: oklch(37% 0.013 285.805);
  --zinc-800: oklch(27.4% 0.006 286.033);
  --zinc-900: oklch(21% 0.006 285.885);

  --red-100: oklch(93.6% 0.032 17.717);
  --red-600: oklch(57.7% 0.245 27.325);
  --emerald-500: oklch(69.6% 0.17 162.48);

  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.15s;
}

* { box-sizing: border-box; }
*, ::before, ::after { border: 0 solid; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; line-height: 1.5; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--zinc-50);
  font-family: var(--font-sans);
  color: var(--zinc-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
input, select { font: inherit; color: inherit; }
svg { display: block; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--zinc-300); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--zinc-400); }

[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--zinc-500); font-size: 0.875rem; }

/* ── Header ─────────────────────────────────────────────────────── */
.appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--zinc-200);
  box-shadow: var(--shadow-sm);
}
.appbar-inner {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.appbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.wordmark { height: 3.25rem; width: auto; filter: brightness(0); }

.conn-slot { display: flex; align-items: center; gap: 0.5rem; }

.ctrl-site {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--zinc-100);
  border-radius: 9999px;
  padding: 0.4rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--zinc-700);
  white-space: nowrap;
}
.ctrl-site:hover { background: var(--zinc-200); }
.ctrl-site svg { width: 13px; height: 13px; flex: none; }
.ctrl-site .dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--zinc-300); flex: none; }
.ctrl-site.is-live .dot { background: var(--emerald-500); }

/* ── Nav (vertical icon pills, active = dark) ──────────────────── */
.nav {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 4.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-xl);
  color: var(--zinc-500);
  transition: all var(--dur) var(--ease);
}
.nav-item svg { width: 20px; height: 20px; }
.nav-item span { font-size: 14px; letter-spacing: 0.05em; }
.nav-item:hover { background: var(--grey); color: #ffffff; }
.nav-item.is-active { background: var(--zinc-900); color: #ffffff; box-shadow: var(--shadow-lg); }
.nav-item.is-active svg { stroke-width: 2.5; }
.nav-item:disabled { opacity: 0.4; cursor: not-allowed; }
.nav-item:disabled:hover { background: none; color: var(--zinc-500); }

/* ── Layout ────────────────────────────────────────────────────── */
.wrap {
  flex: 1;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* ── Landing (disconnected) ─────────────────────────────────────── */
.landing {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 80vh;
  padding: 2rem 1rem 0;
}
.landing-center {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}
.landing-footer {
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.75rem;
}
.landing-footer a { color: var(--zinc-400); text-decoration: none; }
.landing-footer a:hover { color: var(--zinc-700); text-decoration: underline; }
.landing-logo { height: 6.75rem; width: auto; filter: brightness(0); }
.landing-lead {
  max-width: 34rem;
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--zinc-800);
  text-wrap: balance;
}
.landing .btn-lg { font-size: 1rem; padding: 0.8rem 2.5rem; border-radius: var(--radius-xl); }
.landing-notes {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 30rem;
  color: var(--zinc-400);
  font-size: 0.6875rem;
  line-height: 1.5;
}
.landing-notes p { text-wrap: balance; }
.landing-port-hint {
  max-width: 24rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--zinc-200);
  background: var(--zinc-50);
  border-radius: var(--radius-xl);
  color: var(--zinc-600);
  font-size: 0.75rem;
  line-height: 1.55;
}
.landing-port-hint strong { color: var(--zinc-900); }
.landing-port-hint .mono { font-size: 0.6875rem; }

.card {
  background: #ffffff;
  border: 1px solid var(--zinc-200);
  border-radius: var(--radius-2xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 0.75rem; }
.card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.card-head svg { width: 20px; height: 20px; color: var(--zinc-400); flex: none; }
.card-head h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.025em; }
.card-head .head-action { margin-left: auto; }

.row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 0.75rem; }
.section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--zinc-400);
}

/* ── Key/value grid ────────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem 1.5rem; }
.kv > div { display: flex; flex-direction: column; gap: 0.125rem; }
.kv dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zinc-400); }
.kv dd { font-size: 0.875rem; font-weight: 600; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--zinc-200);
  background: #ffffff;
  color: var(--zinc-900);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-xl);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--zinc-50); border-color: var(--zinc-300); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primary-ring); }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; border-radius: var(--radius-lg); }
.btn-primary { background: var(--primary); border-color: transparent; color: var(--zinc-900); }
.btn-primary:hover:not(:disabled) { background: var(--primary); filter: brightness(0.96); }
.btn-dark { background: var(--zinc-900); border-color: transparent; color: #ffffff; }
.btn-dark:hover:not(:disabled) { background: var(--grey); }
.btn-danger { color: var(--red-600); border-color: var(--zinc-200); }
.btn-danger:hover:not(:disabled) { background: var(--red-600); color: #fff; border-color: transparent; }
.linkish { color: var(--zinc-500); font-size: 0.75rem; text-decoration: underline; }
.linkish:hover { color: var(--zinc-900); }

/* ── Fields ────────────────────────────────────────────────────── */
.field { display: block; position: relative; }
.field > span { display: block; font-size: 0.75rem; font-weight: 600; color: var(--zinc-600); margin-bottom: 0.375rem; }
.field input, .field select {
  width: 100%;
  font-size: 0.875rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--zinc-200);
  border-radius: var(--radius-xl);
  background: #ffffff;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-ring);
}
.field .reveal { position: absolute; right: 2px; top: 0; }

#btn-sound-preview svg { width: 13px; height: 13px; }

/* ── Toggle switch ────────────────────────────────────────────── */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  width: 2.75rem;
  border-radius: 9999px;
  background: var(--zinc-200);
  transition: background-color var(--dur) var(--ease);
  flex: none;
}
.switch[aria-checked="true"] { background: var(--grey); }
.switch-thumb {
  position: absolute;
  left: 0.25rem;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
}
.switch[aria-checked="true"] .switch-thumb { transform: translateX(1.25rem); }

/* ── Network list ─────────────────────────────────────────────── */
.net-list { list-style: none; display: flex; flex-direction: column; gap: 0.375rem; }
.net {
  display: flex; align-items: center; gap: 0.625rem;
  width: 100%; text-align: left;
  border: 1px solid var(--zinc-200); background: #ffffff;
  border-radius: var(--radius-xl); padding: 0.625rem 0.75rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.net:hover { background: var(--zinc-50); border-color: var(--zinc-300); }
.net-name { flex: 1; font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-meta { display: flex; align-items: center; gap: 0.5rem; color: var(--zinc-400); }
.net-meta svg { width: 14px; height: 14px; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.bars i { width: 3px; background: var(--zinc-300); border-radius: 1px; }
.bars i:nth-child(1) { height: 4px; }
.bars i:nth-child(2) { height: 7px; }
.bars i:nth-child(3) { height: 10px; }
.bars i:nth-child(4) { height: 13px; }
.bars.l1 i:nth-child(-n + 1), .bars.l2 i:nth-child(-n + 2),
.bars.l3 i:nth-child(-n + 3), .bars.l4 i:nth-child(-n + 4) { background: var(--primary); }

.manual { border-top: 1px solid var(--zinc-100); padding-top: 0.75rem; }
.manual summary { cursor: pointer; font-size: 0.8125rem; color: var(--zinc-500); }

/* ── Result / provisioning ────────────────────────────────────── */
.result { border-top: 1px solid var(--zinc-100); padding-top: 1rem; text-align: center; }
.spinner {
  width: 1.625rem; height: 1.625rem; margin: 0 auto 0.625rem;
  border: 3px solid var(--zinc-200); border-top-color: var(--primary);
  border-radius: 9999px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.badge-icon {
  width: 2.75rem; height: 2.75rem; margin: 0 auto 0.625rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-size: 1.25rem; font-weight: 700;
}
.badge-icon.ok { background: color-mix(in oklab, var(--emerald-500) 15%, #fff); color: var(--emerald-500); }
.badge-icon.err { background: var(--red-100); color: var(--red-600); }

/* ── Progress bar ────────────────────────────────────────────── */
.bar { height: 0.5rem; background: var(--zinc-100); border-radius: 9999px; overflow: hidden; margin: 0.5rem 0 0.75rem; }
.bar > span { display: block; height: 100%; width: 0%; background: var(--primary); transition: width 0.3s var(--ease); }

.save-msg { font-size: 0.8125rem; font-weight: 600; }
.save-msg.ok { color: var(--emerald-500); }
.save-msg.err { color: var(--red-600); }
.inline-error { color: var(--red-600); font-size: 0.8125rem; }
.inline-ok { color: var(--emerald-500); font-size: 0.8125rem; }
.hdr-msg { max-width: 56rem; margin: 0 auto; padding: 0.5rem 1rem 0; font-size: 0.8125rem; }

.notice {
  border: 1px solid color-mix(in oklab, var(--primary) 35%, #fff);
  background: color-mix(in oklab, var(--primary) 8%, #fff);
  border-radius: var(--radius-xl);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--zinc-700);
}

/* ── Sub-tabs (sound folders) ─────────────────────────────────── */
.subtabs { display: flex; gap: 0.25rem; background: var(--zinc-100); border-radius: var(--radius-xl); padding: 0.25rem; }
.subtab { flex: 1; font-size: 0.8125rem; font-weight: 600; color: var(--zinc-500); padding: 0.4rem 0.5rem; border-radius: var(--radius-lg); }
.subtab.is-active { background: #ffffff; color: var(--zinc-900); box-shadow: var(--shadow-sm); }

/* ── Item list (sounds, scenes, areas) ───────────────────────── */
.item-list { list-style: none; display: flex; flex-direction: column; }
.item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.25rem;
  border-bottom: 1px solid var(--zinc-100);
}
.item:last-child { border-bottom: 0; }
.item .name { flex: 1; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .tag {
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--zinc-400); border: 1px solid var(--zinc-200);
  border-radius: 9999px; padding: 1px 6px;
}

/* ── Hue ────────────────────────────────────────────────────── */
.cfg-block {
  border: 1px solid var(--zinc-100);
  border-radius: var(--radius-xl);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
.cfg-block + .cfg-block { margin-top: 0.75rem; }
.cfg-label { font-size: 0.8125rem; font-weight: 700; }

.hue-bridge-line { display: flex; flex-direction: column; gap: 0.15rem; }
.hue-bridge-line .mono { font-size: 0.875rem; font-weight: 600; }
.hue-badge {
  align-self: center;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: var(--zinc-200);
  color: var(--zinc-600);
}
.hue-badge.is-paired { background: var(--primary); color: var(--zinc-900); }

.hue-pair-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.5rem;
  background: var(--zinc-50);
  border: 1px solid var(--zinc-100);
  border-radius: var(--radius-2xl);
  text-align: center;
}
.hue-pair-prompt img { width: 7rem; height: 7rem; object-fit: contain; }
.hue-pair-prompt p {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--zinc-900);
  max-width: 22rem;
}

/* ── Firmware "available" badge ─────────────────────────────── */
.fw-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: middle;
}
.fw-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex: none; }
.fw-badge.avail { color: var(--zinc-700); }
.fw-badge.avail .fw-dot { background: var(--primary); }
.fw-badge.uptodate { color: var(--zinc-400); }
.fw-badge.uptodate .fw-dot { background: transparent; border: 1.5px solid var(--zinc-300); }

/* ── Tab panels ──────────────────────────────────────────────── */
.tabpanel { display: none; }
.tabpanel.is-active { display: block; }