/* Contract test controller (controller-test.html).
   Deliberately self-contained rather than built on theme.css: this stands in for
   a GAME controller, not for a site page.

   The page's own look follows the §4 theme picked in controller-test.js (a class on
   <html>), so the status bar can be judged against the band it sits over. The
   color-scheme itself comes from the meta, not from CSS — the meta is what the
   launcher reads. */

:root {
  --bg: #101014; --fg: #f3f3f5; --muted: #9a9aa4; --surface: #17171b;
  --control: #26262c; --control-active: #32323a; --line: #35353d; --rule: #26262c;
  --accent: #f2555a; --on-accent: #14090a;
  accent-color: var(--accent);
}
:root.t-forest { --bg: #0d1a12; --surface: #13241a; --accent: #3ddc84; --on-accent: #06140c; }
:root.t-light, :root.t-bare {
  --bg: #f2f2f5; --fg: #17171b; --muted: #5d5d66; --surface: #ffffff;
  --control: #e2e2e8; --control-active: #d4d4dc; --line: #c9c9d2; --rule: #dcdce3;
  --accent: #7a4dff; --on-accent: #ffffff;
}
/* The light palette again — a media query can't share t-light's rule. */
@media (prefers-color-scheme: light) {
  :root.t-system {
    --bg: #f2f2f5; --fg: #17171b; --muted: #5d5d66; --surface: #ffffff;
    --control: #e2e2e8; --control-active: #d4d4dc; --line: #c9c9d2; --rule: #dcdce3;
  }
}
:root.t-system { --accent: #e0a020; --on-accent: #1a1204; }
/* No accent-color at all: the name sheet must fall back to the launcher's own. */
:root.t-bare { accent-color: auto; --accent: #5d5d66; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  /* CONTRACT §5: interactive UI inside the platform's own insets. */
  padding:
    env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

main { padding: 12px 14px 40px; }
h1 { font-size: 17px; margin: 0 0 2px; padding-right: 48px; }
h2 {
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 8px;
}
section { border-top: 1px solid var(--rule); margin-top: 18px; }
p { margin: 0 0 14px; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.shell { background: #1d3a24; color: #7ee69a; }
.badge.browser { background: #3a2a1d; color: #f0b464; }

/* 16px: iOS zooms the page into any focused field set smaller. */
input[type="text"] {
  font: inherit; font-size: 16px; color: var(--fg); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; width: 100%;
}
input[type="range"] { flex: 1; min-width: 120px; }

.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gap-top { margin-top: 10px; }

button {
  font: inherit; font-weight: 600; color: var(--fg); background: var(--control);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
button:active { background: var(--control-active); }
button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* §3: the page's own close, kept inside the safe area like any control. */
#leave {
  position: fixed; z-index: 6;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 17px;
}

/* Held buzz: no long-press callout or touch gestures while held. */
#vhold { -webkit-touch-callout: none; touch-action: none; }

dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
dd, #log, output { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

#log {
  height: 160px; overflow: auto; background: var(--surface);
  border-radius: 10px; padding: 8px 10px; margin: 0; white-space: pre-wrap;
}

/* The safe area drawn exactly as env() reports it — the frame should hug the
   status bar, cutout, home indicator and any shown navigation bar. */
#zone { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#zone i {
  position: absolute;
  inset:
    env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  border: 1px dashed var(--accent);
  border-radius: 6px;
}

/* Padding-only probe: lets the script read the resolved env() values, which are
   not otherwise observable from JS. */
#envprobe {
  position: fixed; top: 0; left: 0; width: 0; height: 0; visibility: hidden;
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

dialog {
  background: var(--surface); color: var(--fg); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; max-width: 300px;
}
dialog::backdrop { background: rgba(0, 0, 0, .67); }