/* SteadyPlay POC — minimal warm design tokens + responsive diagnostic layout.
   No device-specific dimensions: fluid grid, safe-area insets, dynamic viewport units. */

:root {
  color-scheme: light dark;
  --bg: #fbf6ef;
  --surface: #ffffff;
  --surface-2: #f4ebe0;
  --text: #3a2a22;
  --muted: #7a6656;
  --border: #e6d8c8;
  --accent: #c8643b;
  --accent-text: #ffffff;
  --header-bg: #3a2a22;
  --header-text: #fbf3e8;
  --ok: #3f7d4e;
  --warn: #a8641a;
  --error: #b3392f;
  --radius: 12px;
  --radius-sm: 8px;
  --gap: 16px;
  --tap: 44px; /* Apple HIG minimum touch target */

  /* Safe-area insets with a minimum gutter */
  --pad-left: max(var(--gap), env(safe-area-inset-left));
  --pad-right: max(var(--gap), env(safe-area-inset-right));
  --pad-bottom: max(var(--gap), env(safe-area-inset-bottom));
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f1915;
    --surface: #2a221d;
    --surface-2: #342a23;
    --text: #f3e9dd;
    --muted: #b9a593;
    --border: #47392f;
    --accent: #e07f53;
    --accent-text: #1f1915;
    --header-bg: #140f0c;
    --ok: #7cc28d;
    --warn: #e0a560;
    --error: #ef8a7f;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* tracks Safari's collapsing toolbars */
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, h2 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.25rem; font-weight: 650; }
h2 { font-size: 1rem; font-weight: 650; margin-bottom: 12px; }

/* ---- Header: extends under the status bar (black-translucent) ---- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  color: var(--header-text);
  padding: calc(env(safe-area-inset-top) + 12px) var(--pad-right) 12px var(--pad-left);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  vertical-align: middle;
}

.chips { display: flex; gap: 8px; }

.chip {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
}
.chip[data-tone="ok"]::before,
.chip[data-tone="warn"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #8fd19e;
}
.chip[data-tone="warn"]::before { background: #f2b46b; }

/* ---- Banners ---- */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px var(--pad-right) 10px var(--pad-left);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.banner[hidden] { display: none; }

/* ---- Card grid: one column on phones, more as space allows ---- */
.cards {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap) var(--pad-right) var(--pad-bottom) var(--pad-left);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  align-items: start;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 0;
  container-type: inline-size;
}
.card-wide { grid-column: 1 / -1; }

.hint {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px dashed var(--border);
}
.hint[hidden] { display: none; }

/* ---- Key/value lists ---- */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 0.9rem;
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

@container (max-width: 300px) {
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dd { margin-bottom: 6px; }
}

.tone-ok { color: var(--ok); }
.tone-warn { color: var(--warn); }
.tone-error { color: var(--error); }

/* ---- Controls ---- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.card > h2 + .actions { margin-top: 0; margin-bottom: 12px; }

button {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: manipulation; /* no double-tap zoom delay */
}
button:active { filter: brightness(0.94); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.danger { color: var(--error); }
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Record lists ---- */
.records {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 60vh;
  max-height: 60svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.record-main { display: grid; min-width: 0; flex: 1 1 12rem; }
.record-main strong { overflow-wrap: anywhere; }
.meta { font-size: 0.8rem; color: var(--muted); }
.record-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.record-actions button { padding: 0 12px; font-size: 0.85rem; }
.empty { color: var(--muted); font-size: 0.9rem; }

/* ---- Event log ---- */
.log {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 0.8rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  max-height: 40vh;
  max-height: 40svh;
  overflow-y: auto;
}
.log li { padding: 3px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.log time { color: var(--muted); }

/* ---- Dialog ---- */
dialog {
  width: min(28rem, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 20px;
}
dialog::backdrop { background: rgb(20 15 12 / 0.45); }

dialog label {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--muted);
}

input,
select {
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* below 16px, iOS Safari zooms in on focus */
}

/* ---- Viewport probe (measurement only) ---- */
#viewport-probe {
  position: fixed;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#viewport-probe > div { position: absolute; top: 0; left: 0; width: 1px; }
.probe-svh { height: 100svh; }
.probe-dvh { height: 100dvh; }
.probe-lvh { height: 100lvh; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}