:root {
  color: #eef7f0;
  background: #07130d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  line-height: 1.5;
  color-scheme: dark;
  --panel: #0d2116e8;
  --border: #8ce6aa35;
  --border-strong: #8ce6aa66;
  --mint: #9df2bd;
  --text: #eef7f0;
  --muted: #afc5b7;
  --warning: #ffc78f;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% -8%, #1a4a30 0, transparent 38rem),
    radial-gradient(circle at 92% 18%, #123622 0, transparent 34rem),
    linear-gradient(145deg, #07130d, #0a1b12 55%, #07100c);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image:
    linear-gradient(#9df2bd0a 1px, transparent 1px),
    linear-gradient(90deg, #9df2bd0a 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .1rem; font-size: clamp(1.65rem, 3vw, 2.65rem); line-height: 1; }
h2 { margin-bottom: .7rem; font-size: clamp(1.15rem, 1.8vw, 1.65rem); line-height: 1.1; }
h3 { margin: 0 0 .7rem; font-size: .82rem; font-weight: 760; color: var(--muted); }

.topbar,
.dashboard {
  width: min(1440px, calc(100% - clamp(1.5rem, 4vw, 4rem)));
  margin-inline: auto;
}

.topbar {
  display: flex;
  min-height: 8.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.35rem 0 1rem;
  border-bottom: 1px solid var(--border);
}

.brand-lockup { display: flex; align-items: center; gap: 1rem; }
.brand-mark {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  color: var(--mint);
  background: #10271a;
  box-shadow: inset 0 0 1.5rem #9df2bd0d;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.page-title { margin: 0; color: var(--muted); font-size: .9rem; }
.status-cluster { display: grid; max-width: 34rem; justify-items: end; gap: .55rem; text-align: right; }

.eyebrow {
  margin-bottom: .35rem;
  color: #8fdaa9;
  font-size: .7rem;
  font-weight: 820;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.boundary, .note, .legend, .steps span { color: var(--muted); }
.boundary { max-width: 54ch; margin: 0; font-size: .85rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: .75rem 1rem;
  border-radius: .7rem;
  color: #082013;
  background: var(--mint);
}

.dashboard {
  display: grid;
  min-height: calc(100vh - 8.25rem);
  grid-template-columns: minmax(250px, .82fr) minmax(0, 1.55fr) minmax(290px, 1fr);
  grid-template-areas:
    "site overview readiness"
    "history history readiness"
    "devices devices devices";
  align-content: start;
  gap: 1rem;
  padding: 1rem 0 3rem;
}

.dashboard:has(.overview-panel[hidden]) {
  grid-template-columns: minmax(250px, 1fr) minmax(290px, 1fr);
  grid-template-areas:
    "site readiness"
    "history readiness"
    "devices devices";
}

.panel {
  min-width: 0;
  padding: clamp(1rem, 1.7vw, 1.45rem);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--panel);
  box-shadow: 0 24px 70px #0005, inset 0 1px #ffffff08;
  backdrop-filter: blur(14px);
}
.site-panel { grid-area: site; }
.overview-panel { grid-area: overview; background: linear-gradient(135deg, #12301f, #0d2116 68%); }
.readiness-panel { grid-area: readiness; }
.history-panel { grid-area: history; }
.devices-panel { grid-area: devices; }

.row, .heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.compact-heading { align-items: start; }
.compact-heading h2 { margin-bottom: 0; }

label, legend { font-weight: 730; }
label { color: var(--muted); font-size: .78rem; }
select, input, button {
  min-height: 2.75rem;
  padding: .62rem .78rem;
  border: 1px solid #789a8b88;
  border-radius: .72rem;
  color: var(--text);
  background: #10251f;
  font: inherit;
}
select { min-width: 12rem; }
button {
  border-color: #54be7c99;
  color: #082013;
  background: var(--mint);
  box-shadow: 0 8px 24px #06150d66;
  font-weight: 800;
  cursor: pointer;
}
button.secondary { color: var(--mint); background: #183425; }
button:disabled { cursor: not-allowed; opacity: .56; }
button:focus-visible, select:focus-visible, input:focus-visible,
summary:focus-visible, a:focus-visible { outline: 3px solid #d4ffe2; outline-offset: 3px; }

.live-dot,
.readonly {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .62rem;
  border: 1px solid #8ce6aa44;
  border-radius: 999px;
  color: var(--mint);
  background: #183425cc;
  font-size: .7rem;
  font-weight: 820;
  letter-spacing: .04em;
}
.live-dot::before { width: .42rem; height: .42rem; border-radius: 50%; background: var(--mint); content: ""; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
}
.card {
  min-height: 9.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #0a1b12aa;
}
.card .value { margin-bottom: .35rem; color: var(--text); font-size: clamp(1.55rem, 2.7vw, 2.45rem); font-weight: 790; }
.card time { color: #88a393; font-size: .72rem; }
.quality { margin-bottom: .35rem; font-size: .78rem; font-weight: 780; }
.quality.stale, .quality.gap, .quality.unknown, .quality.unavailable { color: var(--warning); }
.quality.measured { color: var(--mint); }

.history {
  min-height: 5rem;
  margin-top: .9rem;
  padding: .85rem;
  overflow: auto;
  border: 1px dashed #9df2bd55;
  border-radius: .85rem;
  color: var(--muted);
  background: #07130d77;
}
.history-list { margin: 0; padding: 0; list-style: none; }
.history-list li {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto auto auto;
  gap: .75rem;
  padding: .5rem;
  border-bottom: 1px solid var(--border);
}

.readiness-details { display: grid; grid-template-columns: 1fr; gap: .55rem; }
.readiness-details div {
  padding: .6rem .7rem;
  border-left: 3px solid #6de49a88;
  border-radius: 0 .55rem .55rem 0;
  background: #07130d55;
}
.readiness-details dt { color: var(--muted); font-size: .72rem; font-weight: 720; }
.readiness-details dd { margin: .15rem 0 0; overflow-wrap: anywhere; font-size: .82rem; font-weight: 730; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: grid;
  gap: .35rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: #10251faa;
}
.steps li::before {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 50%;
  color: #082013;
  background: var(--mint);
  font-size: .72rem;
  font-weight: 850;
  content: counter(step);
  counter-increment: step;
}

details { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
summary { color: var(--mint); font-size: 1rem; font-weight: 800; cursor: pointer; }
fieldset {
  display: grid;
  gap: .65rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: #07130d55;
}
.consent { display: flex; align-items: flex-start; gap: .6rem; }
.consent input { margin-top: .2rem; }
.actions { justify-content: flex-start; }

@media (max-width: 1120px) {
  .dashboard {
    grid-template-columns: minmax(250px, .8fr) minmax(0, 1.45fr);
    grid-template-areas:
      "site readiness"
      "overview overview"
      "history history"
      "devices devices";
  }
  .dashboard:has(.overview-panel[hidden]) {
    grid-template-areas:
      "site readiness"
      "history history"
      "devices devices";
  }
  .readiness-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .topbar { display: grid; align-items: start; gap: 1rem; }
  .status-cluster { justify-items: start; text-align: left; }
  .dashboard,
  .dashboard:has(.overview-panel[hidden]) {
    grid-template-columns: 1fr;
  }
  .dashboard { grid-template-areas: "site" "overview" "readiness" "history" "devices"; }
  .dashboard:has(.overview-panel[hidden]) {
    grid-template-areas: "site" "readiness" "history" "devices";
  }
  .row { flex-direction: column; align-items: stretch; }
  .heading { align-items: start; }
  .readiness-details, .steps { grid-template-columns: 1fr; }
  .history-list li { grid-template-columns: 1fr; }
  select { width: 100%; }
}

.ota-panel { grid-column: 1 / -1; }
#configuration-state-panel { grid-column: 1 / -1; }
#settings-read-panel { grid-column: 1 / -1; }
#settings-read-panel form { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-block: 1rem; }
#settings-read-panel input, #settings-read-panel select { min-width: 0; max-width: 100%; flex: 1 1 15rem; }
#settings-read-panel [hidden] { display: none; }
#settings-read-panel dl { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: .65rem 1rem; }
#settings-read-panel dt { font-weight: 650; }
#settings-read-panel dd { margin: 0; overflow-wrap: anywhere; }
#settings-write-panel { border-top: 1px solid var(--line, #ccd5ce); margin-top: 1.5rem; padding-top: 1rem; }
#settings-write-form { align-items: flex-start !important; }
#settings-write-input, #settings-write-details, #settings-write-confirm-label { flex: 1 1 100%; }
#settings-write-input label, #settings-write-input input, #settings-write-input select { display: block; }
#settings-write-input input, #settings-write-input select { margin-top: .4rem; width: min(100%, 28rem); }
#settings-write-confirm { width: auto; }
@media (max-width: 650px) { #settings-read-panel dl { grid-template-columns: minmax(0, 1fr); } }
#configuration-state-panel[hidden] { display: none; }
#configuration-state-form { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
#configuration-device-id { min-width: 0; max-width: 100%; flex: 1 1 20rem; }
#configuration-state-details { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: .65rem 1rem; }
#configuration-state-details dt { font-weight: 650; }
#configuration-state-details dd { margin: 0; overflow-wrap: anywhere; }
.configuration-selection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.configuration-selection-grid label { display: grid; gap: .4rem; }
.configuration-selection-grid label[hidden] { display: none; }
.configuration-selection-grid select, .configuration-selection-grid input { width: 100%; min-width: 0; box-sizing: border-box; }
#configuration-editor fieldset { margin: 1rem 0; }
#configuration-editor button[hidden] { display: none; }
@media (max-width: 650px) {
  .configuration-selection-grid { grid-template-columns: minmax(0, 1fr); }
  #configuration-state-details { grid-template-columns: minmax(0, 1fr); }
  #configuration-state-details dd { margin-bottom: .4rem; }
}
.ota-panel .history-list li { display: block; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
  .panel { animation: enter .22s ease-out; }
  button, .card { transition: transform .16s ease, filter .16s ease, border-color .16s ease; }
  button:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
  @keyframes enter { from { opacity: 0; transform: translateY(5px); } }
}

#recovery-panel[hidden] { display: none; }
#recovery-panel [hidden] { display: none !important; }
#recovery-review-summary { display: grid; grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr); gap: .65rem 1rem; }
#recovery-review-summary dt { font-weight: 650; }
#recovery-review-summary dd { margin: 0; overflow-wrap: anywhere; }
#recovery-review-artifact-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow: auto; border: 1px solid var(--border); padding: 1rem; }
#recovery-review-artifact { width: 100%; min-width: 0; }
#recovery-panel .recovery-attestation { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .8rem; }
#recovery-panel .recovery-attestation input { width: auto; flex: 0 0 auto; margin-top: .3rem; }
#recovery-panel form { display: grid; grid-template-columns: minmax(11rem, 1fr) minmax(0, 3fr); gap: .7rem 1rem; align-items: center; margin-block: 1.3rem; }
#recovery-panel form input { width: 100%; min-width: 0; }
#recovery-cancellation-request { display: block; width: min(100%, 32rem); min-width: 0; margin-block: .7rem; }
#recovery-panel form button { grid-column: 2; justify-self: start; }
#recovery-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1.3rem; }
#recovery-details { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .65rem 1rem; }
#recovery-details dt { font-weight: 650; }
#recovery-details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 650px) {
  #recovery-panel form, #recovery-details, #recovery-review-summary { grid-template-columns: minmax(0, 1fr); }
  #recovery-panel form button { grid-column: 1; }
  #recovery-details dd { margin-bottom: .5rem; }
}

/* Recovery uses the same full dashboard width as settings and device updates. */
#recovery-panel { grid-column: 1 / -1; }
.recovery-heading { align-items: start; margin-bottom: 1.35rem; }
.recovery-heading > div { max-width: 52rem; }
.recovery-heading h2 { margin-bottom: .65rem; }
.recovery-heading .note { margin-bottom: 0; }
.recovery-current, .recovery-preparation, .recovery-card, .recovery-cancellation {
  min-width: 0; padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--border); border-radius: 1rem; background: #071a11aa;
}
.recovery-current { margin-bottom: 1rem; background: #12302099; }
.recovery-current h3, .recovery-card h3, .recovery-cancellation h3, .recovery-preparation h3 {
  color: var(--text); font-size: 1.08rem; margin-bottom: .8rem;
}
#recovery-panel #recovery-open { margin-block: .5rem 1rem; grid-template-columns: auto minmax(12rem, 1fr) auto; }
#recovery-panel #recovery-open button { grid-column: auto; }
#recovery-message { color: var(--mint); margin-bottom: 0; }
#recovery-details:empty, #recovery-review-summary:empty { display: none; }
.recovery-preparation { margin-bottom: 1rem; }
.recovery-preparation .note { margin: .8rem 0 0; max-width: 85ch; }
.recovery-workflow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
#recovery-actions.recovery-next-steps { display: grid; gap: 1rem; margin: 0; min-width: 0; }
.recovery-card > p:not(.eyebrow) { color: var(--muted); font-size: .85rem; }
#recovery-panel .recovery-card form { grid-template-columns: minmax(0, 1fr); margin-block: 1rem; gap: .55rem; }
#recovery-panel .recovery-card form button { grid-column: 1; }
#recovery-panel input[type="file"] { padding: .5rem; font-size: .8rem; }
#recovery-panel input::file-selector-button { padding: .45rem .6rem; margin-right: .6rem; border: 1px solid var(--border-strong); border-radius: .4rem; background: #183425; color: var(--text); }
#recovery-panel button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: .85rem; }
#recovery-panel .recovery-attestation input { min-height: 1.15rem; width: 1.15rem; margin-top: .1rem; accent-color: var(--mint); }
#recovery-panel .recovery-attestation { line-height: 1.6; }
.recovery-button-group { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: .8rem; }
.recovery-button-group button { flex: 1 1 10rem; }
.recovery-cancellation { margin-top: 1rem; border-color: #ffc78f44; }
.recovery-cancellation .eyebrow { color: var(--warning); }
.recovery-cancellation button { background: #253526; color: var(--text); box-shadow: none; }
.recovery-cancellation > .note { max-width: 100ch; margin-bottom: 0; font-size: .8rem; }
#recovery-review-artifact-text { border-radius: .7rem; font-size: .78rem; }
@media (max-width: 900px) {
  .recovery-workflow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
  #recovery-panel #recovery-open { grid-template-columns: minmax(0, 1fr); }
  #recovery-panel #recovery-open button { grid-column: 1; }
  .recovery-heading .readonly { font-size: .65rem; }
}

/* Pairing is independent of the legacy recovery panel's form state. */
#recovery-tool-pairing { grid-column: 1 / -1; }
#recovery-tool-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); gap: .5rem; }
#recovery-tool-details dd { overflow-wrap: anywhere; }
.recovery-tool-attestation { display: flex; align-items: start; gap: .7rem; margin-block: 1rem; }
.recovery-tool-attestation input { flex: 0 0 auto; width: 1.2rem; min-height: 1.2rem; margin-top: .2rem; }
#recovery-tool-login { display: inline-block; margin-block: .5rem; }
#recovery-tool-login[hidden] { display: none; }

/* A12: the normal run and human review share the dashboard width. */
.recovery-guided { display: grid; gap: 1.25rem; min-width: 0; }
.recovery-guided[hidden], .recovery-guided [hidden] { display: none !important; }
.recovery-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: 0; list-style-position: inside; }
.recovery-route li { padding: .85rem; border: 1px solid var(--border, #466554); border-radius: .75rem; }
.recovery-progress-card { padding: 1.25rem; border: 1px solid var(--border, #466554); border-radius: 1rem; }
#recovery-progress-facts { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 3fr); gap: .5rem 1rem; }
#recovery-progress-facts dd { margin: 0; overflow-wrap: anywhere; }
#recovery-guided-review .recovery-card { width: 100%; min-width: 0; }
.guided-active.automated #recovery-review-import-button { display: none; }
#recovery-fallback { min-width: 0; border-top: 1px solid var(--border, #466554); padding-top: 1rem; }
#recovery-fallback > summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }
@media (max-width: 640px) {
  .recovery-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #recovery-progress-facts { grid-template-columns: 1fr; }
}