/* Daikin SkyportHome API Tester.
 * Layout only -- every colour, font, space and radius comes from
 * ../_shared/chipkin-tokens.css. Shared rules follow the McQuay tool. */

*, *::before, *::after { box-sizing: border-box; }

/* Author `display` rules beat the browser's [hidden] rule; restore it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--ck-font-sans);
  font-size: var(--ck-fs-base);
  line-height: var(--ck-lh-body);
  color: var(--ck-ink);
  background: var(--ck-bg-alt);
}

h1, h2, h3, h4 { font-family: var(--ck-font-head); line-height: var(--ck-lh-snug); }
code, pre, .mono { font-family: var(--ck-font-mono); }
a { color: var(--ck-blue-700); }

:focus-visible { outline: 2px solid var(--ck-focus); outline-offset: 2px; }

.icon {
  width: 1.05em; height: 1.05em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── App bar ─────────────────────────────────────────────── */
.appbar { background: var(--ck-bg-dark); color: var(--ck-on-dark); }
.appbar-inner {
  max-width: var(--ck-container); margin: 0 auto;
  padding: var(--ck-space-3) var(--ck-gutter);
  display: flex; align-items: center; gap: var(--ck-space-3); flex-wrap: wrap;
}
.appbar-logo { height: 28px; width: auto; }
.appbar-divider { width: 1px; height: 26px; background: rgba(255, 255, 255, .28); }
.appbar h1 {
  margin: 0; font-size: var(--ck-fs-lg); font-weight: var(--ck-fw-bold);
  display: flex; align-items: center; gap: var(--ck-space-2); flex-wrap: wrap;
}
.appbar-cta { margin-left: auto; }
.version-badge {
  font-family: var(--ck-font-mono); font-size: var(--ck-fs-xs);
  padding: 2px var(--ck-space-2); border-radius: var(--ck-radius-full);
  background: rgba(255, 255, 255, .14); font-weight: var(--ck-fw-normal);
}

/* ── Layout ──────────────────────────────────────────────── */
main {
  max-width: var(--ck-container); margin: 0 auto;
  padding: var(--ck-space-8) var(--ck-gutter) var(--ck-space-16);
  display: flex; flex-direction: column; gap: var(--ck-space-6);
}
.card {
  background: var(--ck-bg); border: var(--ck-border);
  border-radius: var(--ck-radius); padding: var(--ck-space-6);
  box-shadow: var(--ck-shadow-sm); min-width: 0;
}
.card h2 { font-size: var(--ck-fs-h3); margin: 0 0 var(--ck-space-3); }
.subhead { font-size: var(--ck-fs-lg); margin: var(--ck-space-6) 0 var(--ck-space-2); }
.lead { font-size: var(--ck-fs-lg); margin-top: 0; }

/* ── Steps: a step the user cannot act on yet is dimmed and inert ── */
.step .hd {
  display: flex; align-items: center; gap: var(--ck-space-3);
  margin-bottom: var(--ck-space-4); flex-wrap: wrap;
}
.step .hd h2 { margin: 0; flex: 1 1 auto; }
.step-number {
  flex: none; width: 2rem; height: 2rem; border-radius: var(--ck-radius-full);
  background: var(--ck-blue-700); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--ck-fw-bold); font-size: var(--ck-fs-sm);
}
.step-status { font-size: var(--ck-fs-sm); color: var(--ck-muted); text-align: right; }
.step-status.ok { color: var(--ck-success); font-weight: var(--ck-fw-bold); }
.step-status.err { color: var(--ck-error); font-weight: var(--ck-fw-bold); }
.card.locked { opacity: .45; }
.card.locked .bd { pointer-events: none; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ck-space-2);
  padding: var(--ck-space-2) var(--ck-space-4);
  border-radius: var(--ck-radius-sm); border: 1px solid transparent;
  font-family: inherit; font-size: var(--ck-fs-sm); font-weight: var(--ck-fw-bold);
  cursor: pointer; text-decoration: none;
  transition: background var(--ck-transition), border-color var(--ck-transition);
}
.btn--sm { padding: var(--ck-space-1) var(--ck-space-3); font-size: var(--ck-fs-xs); }
.btn--primary { background: var(--ck-blue-700); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--ck-blue-900); }
.btn--secondary { background: var(--ck-bg); color: var(--ck-blue-700); border-color: var(--ck-line); }
.btn--secondary:hover:not(:disabled) { border-color: var(--ck-blue-500); }
.btn--conversion { background: var(--ck-accent); color: #fff; }
.btn--conversion:hover:not(:disabled) { background: var(--ck-accent-700); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.button-row {
  display: flex; flex-wrap: wrap; gap: var(--ck-space-2);
  margin-top: var(--ck-space-4); align-items: center;
}

/* ── Forms ───────────────────────────────────────────────── */
.form-grid {
  display: grid; gap: var(--ck-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  margin-top: var(--ck-space-4);
}
.form-grid--tight { gap: var(--ck-space-3); }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid label, .paste {
  display: flex; flex-direction: column; font-size: var(--ck-fs-sm);
  font-weight: var(--ck-fw-bold); gap: var(--ck-space-1);
}
input[type=text], input[type=number], select, textarea {
  font: inherit; font-size: var(--ck-fs-sm);
  padding: var(--ck-space-2); border: var(--ck-border);
  border-radius: var(--ck-radius-sm); background: var(--ck-bg);
  color: var(--ck-ink); font-weight: var(--ck-fw-normal); min-width: 0;
}
textarea { font-family: var(--ck-font-mono); resize: vertical; width: 100%; }
.paste { margin-top: var(--ck-space-4); }
.help-text, .cfg-help, .field-help {
  color: var(--ck-muted); font-size: var(--ck-fs-sm); font-weight: var(--ck-fw-normal);
}
.help-text { margin: var(--ck-space-3) 0 0; }
.cfg-help { margin: 0 0 var(--ck-space-4); }
.field-help { display: block; line-height: var(--ck-lh-snug); }

.shell-pick {
  border: 0; padding: 0; margin: var(--ck-space-4) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--ck-space-4); font-size: var(--ck-fs-sm);
}
.shell-pick legend { font-weight: var(--ck-fw-bold); margin-bottom: var(--ck-space-2); }

details.settings { margin-top: var(--ck-space-4); border-top: var(--ck-border); padding-top: var(--ck-space-3); }
details summary { cursor: pointer; font-weight: var(--ck-fw-bold); font-size: var(--ck-fs-sm); padding: var(--ck-space-2) 0; }

/* ── Commands ────────────────────────────────────────────── */
.cmd { position: relative; }
.cmd pre, .preview {
  margin: 0; padding: var(--ck-space-3); padding-right: 6rem;
  background: var(--ck-bg-dark); color: var(--ck-on-dark);
  border-radius: var(--ck-radius-sm); font-size: var(--ck-fs-xs);
  white-space: pre-wrap; word-break: break-all; max-height: 18rem; overflow: auto;
}
.preview { padding-right: var(--ck-space-3); max-height: 28rem; }
.cmd .btn { position: absolute; top: var(--ck-space-2); right: var(--ck-space-2); }

/* ── Alerts and verdicts ─────────────────────────────────── */
.alert {
  display: flex; gap: var(--ck-space-3); align-items: flex-start;
  padding: var(--ck-space-3) var(--ck-space-4);
  border-radius: var(--ck-radius-sm); border-left: 4px solid var(--ck-line);
  background: var(--ck-bg); font-size: var(--ck-fs-sm);
  margin-top: var(--ck-space-4); min-width: 0;
}
.alert > div { min-width: 0; }
.alert--error { border-left-color: var(--ck-error); background: #FDF3F2; }
.alert--warning { border-left-color: var(--ck-warning); background: #FDF8E9; }
.alert--ok { border-left-color: var(--ck-success); background: #F1F9F4; }
.alert--note { border-left-color: var(--ck-accent, var(--ck-line)); background: var(--ck-bg-alt); }
.alert .icon { margin-top: .2rem; }
.alert pre {
  white-space: pre-wrap; word-break: break-all; font-size: var(--ck-fs-xs);
  max-height: 10rem; overflow: auto; margin: var(--ck-space-2) 0 0;
}
.alert ul { margin: 0; padding-left: var(--ck-space-4); }

/* ── Tables ──────────────────────────────────────────────── */
.scrollbox {
  margin-top: var(--ck-space-4); max-height: 26rem; overflow: auto;
  border: var(--ck-border); border-radius: var(--ck-radius-sm);
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--ck-fs-sm); }
.data-table th, .data-table td {
  text-align: left; padding: var(--ck-space-2) var(--ck-space-3);
  border-bottom: 1px solid var(--ck-line); white-space: nowrap;
}
.data-table thead th {
  position: sticky; top: 0; background: var(--ck-bg-alt); z-index: 1;
  font-size: var(--ck-fs-xs); text-transform: uppercase;
  letter-spacing: var(--ck-ls-kicker); color: var(--ck-muted);
}
.data-table td.mono { font-family: var(--ck-font-mono); }
.data-table input[type=text] { width: 6.5rem; font-family: var(--ck-font-mono); }
.data-table tr.off td { color: var(--ck-muted); }

/* ── Thermostat cards ────────────────────────────────────── */
.device-list {
  display: grid; gap: var(--ck-space-3); margin-top: var(--ck-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.device {
  border: var(--ck-border); border-radius: var(--ck-radius-sm);
  padding: var(--ck-space-3) var(--ck-space-4); background: var(--ck-bg);
}
.device h3 { margin: 0 0 var(--ck-space-2); font-size: var(--ck-fs-base); }
.device .big { font-size: var(--ck-fs-h2); font-weight: var(--ck-fw-bold); line-height: 1; }
.device dl {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--ck-space-3);
  margin: var(--ck-space-3) 0 0; font-size: var(--ck-fs-sm);
}
.device dt { color: var(--ck-muted); }
.device dd { margin: 0; font-family: var(--ck-font-mono); }
.device.failed { border-color: var(--ck-error); }

/* ── Protocol switches ───────────────────────────────────── */
.protocols {
  display: grid; gap: var(--ck-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.protocol {
  border: var(--ck-border); border-radius: var(--ck-radius-sm);
  padding: var(--ck-space-3) var(--ck-space-4);
}
.protocol.on { border-color: var(--ck-blue-500); background: var(--ck-blue-50); }
.protocol > label { font-weight: var(--ck-fw-bold); display: flex; gap: var(--ck-space-2); align-items: center; }
.protocol .form-grid { margin-top: var(--ck-space-3); grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }

.extras { display: flex; flex-wrap: wrap; gap: var(--ck-space-4); font-size: var(--ck-fs-sm); }
.extras label { display: flex; gap: var(--ck-space-2); align-items: center; }