/* Nestinel sensor demo: a one-page test bench. Colours, type and rules from the dashboard's
   design language (web/dashboard/docs/design-language): paper and pine, square corners,
   hairline rules, Marauder for panel titles, Arial for everything else, no transitions.
   Dense like an instrument, not like the marketing site. Light only, as the site is. */

@font-face {
  font-family: Marauder;
  src: url("fonts/Marauder-Display-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f4ebd8;
  --surface: #faf8f0;
  --pine: #30463b;
  --pine-dark: #20372b;
  --status: #315c47;
  --clay: #a44b34;
  --ink: #292d35;
  --rule: #c9c1af;
  --muted: #545c4b;
  --tint: #ece4d0;
  --frame: #a6aea1;
  --empty: #665d4e;
  --serif: Marauder, Georgia, serif;
  --sans: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; }
a { color: var(--ink); text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .5; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
::selection { background: var(--pine); color: var(--paper); }
h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.1; }
p { margin: 0; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
[hidden] { display: none !important; }
* { transition: none !important; animation: none !important; }

/* Top bar */
.bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 5; }
.brand { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--pine); text-decoration: none; }
.bar-title { font-weight: bold; padding-left: 14px; border-left: 1px solid var(--rule); }
.bar-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bar-status { display: flex; align-items: center; gap: 8px; min-width: 220px; font-weight: bold; }
.btn { min-height: 36px; padding: 6px 14px; border: 1px solid var(--pine); background: transparent; font-weight: 600; }
.btn:hover:not(:disabled) { background: var(--tint); }
.btn.pri { background: var(--pine); color: var(--paper); }
.btn.pri:hover:not(:disabled) { background: var(--pine-dark); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--status); flex: 0 0 auto; }
.dot.replay { background: transparent; border: 2px solid var(--status); }
.dot.off { background: var(--rule); }

.error { border-left: 3px solid var(--clay); background: var(--surface); padding: 10px 14px; margin: 12px 16px 0; }

/* Grid */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; padding: 12px 16px; }
.panel { background: var(--surface); border: 1px solid var(--rule); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.head { display: flex; flex-direction: column; gap: 3px; }
.head p { color: var(--muted); font-size: 12px; }
.chart { position: relative; flex: 1 1 auto; min-height: 0; }
canvas { display: block; width: 100%; height: 100%; }

.strip { grid-column: 1 / -1; display: grid; grid-template-columns: 2.2fr repeat(8, 1fr); background: var(--surface); border: 1px solid var(--rule); }
.tile { padding: 10px 14px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile:first-child { border-left: 0; }
.lab { font-size: 11px; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.big { font-family: var(--serif); font-size: 38px; line-height: 1.05; color: var(--pine); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#occ { color: var(--status); }
#occ.empty { color: var(--empty); }
#occ #glyph { font-family: var(--sans); font-size: .55em; vertical-align: .15em; }
.mid { font-size: 22px; font-weight: bold; line-height: 1.25; }
.num.stale { color: var(--frame); }
.sub { color: var(--muted); font-size: 12px; }

.p-wave { grid-column: 1 / 9; height: 250px; }
.p-heart { grid-column: 1 / 9; height: 230px; }
.p-connect { grid-column: 9 / -1; grid-row: span 3; }
.p-spec { grid-column: 1 / 9; height: 380px; }
.p-specline, .p-map, .p-score, .p-rate, .p-echo, .p-health { grid-column: span 4; height: 290px; }
.p-health { height: auto; }
.p-state { grid-column: span 8; }
.p-log { grid-column: span 4; }
.p-log .log { max-height: 420px; }
.head-row { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; }
.seg { display: flex; flex: 0 0 auto; }
.seg button { min-height: 32px; padding: 4px 12px; border: 1px solid var(--pine); background: transparent; font-size: 12px; }
.seg button + button { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--pine); color: var(--paper); font-weight: 600; }
.btn.small { min-height: 30px; padding: 3px 10px; font-size: 12px; flex: 0 0 auto; }
.exp { font-family: var(--sans); font-size: 10px; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; color: var(--clay); border: 1px solid var(--clay); padding: 0 4px; vertical-align: middle; margin-left: 4px; }
#spec { cursor: pointer; }

/* Connection checklist */
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.checks li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.ck { width: 16px; height: 16px; border: 1.5px solid var(--frame); border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: bold; line-height: 1; }
.checks li.ok .ck { background: var(--status); border-color: var(--status); color: var(--paper); }
.checks li.ok .ck::after { content: "✓"; }
.checks li.bad .ck { border-color: var(--clay); color: var(--clay); }
.checks li.bad .ck::after { content: "!"; }
.checks li.wait .ck { border-style: dashed; }
.cv { color: var(--muted); text-align: right; font-size: 12px; max-width: 220px; overflow-wrap: anywhere; }
.checks li.bad .cv { color: var(--clay); font-weight: bold; }
.howto { border-top: 1px solid var(--rule); padding-top: 8px; }
.howto summary { cursor: pointer; font-weight: bold; min-height: 28px; display: flex; align-items: center; }
.howto ol { margin: 6px 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.howto p { margin-top: 6px; font-size: 12px; }
.howto code { overflow-wrap: anywhere; }

/* Key-value lists */
.kv { display: grid; grid-template-columns: auto 1fr; margin: 0; }
.kv dt, .kv dd { padding: 5px 0; border-bottom: 1px solid var(--rule); }
.kv dt { color: var(--muted); padding-right: 12px; }
.kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.kv dd.bad { color: var(--clay); font-weight: bold; }
.kv.two { grid-template-columns: auto 1fr auto 1fr; column-gap: 0; }
.kv.two dd { padding-right: 18px; }
.kv.two dd.span { grid-column: 2 / -1; padding-right: 0; }
.kv dt.group { grid-column: 1 / -1; font-size: 11px; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; padding-top: 10px; }

/* Log */
.log { list-style: none; margin: 0; padding: 0; overflow: auto; max-height: 360px; font-size: 12px; }
.log li { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.log time { color: var(--muted); }
.log li.bad span { color: var(--clay); font-weight: bold; }

/* Legend keys */
.key { display: inline-block; vertical-align: middle; margin: 0 2px; }
.dot-key { width: 8px; height: 8px; border-radius: 50%; background: var(--frame); }
.line-key { width: 16px; height: 2px; background: var(--pine); }

/* Footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 16px 16px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--rule); }

/* Tooltip */
.tip { position: fixed; z-index: 20; pointer-events: none; background: var(--surface); border: 1px solid var(--frame); padding: 6px 8px; font-size: 12px; line-height: 1.35; box-shadow: 0 4px 14px #34443930; white-space: nowrap; }

/* Laptop screens: same layout, tighter. */
@media (max-width: 1680px), (max-height: 1000px) {
  body { font-size: 12px; }
  .grid { gap: 10px; padding: 10px 12px; }
  .panel { padding: 10px 12px; gap: 6px; }
  h2 { font-size: 18px; }
  .big { font-size: 30px; }
  .mid { font-size: 19px; }
  .tile { padding: 8px 10px; }
  .sub, .head p { font-size: 11px; }
  .p-wave { height: 210px; }
  .p-heart { height: 190px; }
  .p-spec { height: 320px; }
  .p-specline, .p-map, .p-score, .p-rate, .p-echo { height: 250px; }
}
@media (max-width: 1200px) {
  .strip { grid-template-columns: repeat(4, 1fr); }
  .tile.wide { grid-column: 1 / -1; border-left: 0; border-bottom: 1px solid var(--rule); }
  .tile:nth-child(6) { border-left: 0; }
  .tile:nth-child(n+6) { border-top: 1px solid var(--rule); }
  .p-wave, .p-heart, .p-spec, .p-map { grid-column: 1 / -1; }
  .p-connect { grid-column: 1 / -1; grid-row: auto; }
  .p-specline, .p-score, .p-rate, .p-echo, .p-health { grid-column: span 6; }
  .p-state, .p-log { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .grid { padding: 10px; gap: 10px; }
  .strip { grid-template-columns: 1fr 1fr; }
  .tile { border-left: 0; }
  .tile:nth-child(even) { border-left: 1px solid var(--rule); }
  .tile:nth-child(n+2) { border-top: 1px solid var(--rule); }
  .p-specline, .p-score, .p-rate, .p-echo, .p-health { grid-column: 1 / -1; }
  .head-row { flex-direction: column; }
  .bar-actions { margin-left: 0; width: 100%; }
  .bar-actions .btn { flex: 1 1 auto; }
  .bar-status { min-width: 0; }
  .p-wave, .p-heart, .p-map { height: 240px; }
  .p-spec { height: 340px; }
}