/* One screen: the head fills it, the design tabs sit top left, the panel on the right. On a phone the panel moves below. */

:root {
  --bg: #c9cfd6; --bg-hi: #eef1f4; --panel: rgb(249 250 251 / 0.9); --ink: #16212b; --muted: #566676; --rule: #c5ced6;
  --accent: #b8235a; --ok: #1e7f5c; --warn: #a86a00; --bad: #c0392b;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12171d; --bg-hi: #36414d; --panel: rgb(20 27 34 / 0.88); --ink: #e4eaf0; --muted: #94a4b3; --rule: #2d3b48;
    --accent: #ff7fae; --ok: #5fd3a6; --warn: #f0b34a; --bad: #ff7a6b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.5 var(--sans); color: var(--ink); background: var(--bg); overflow: hidden; }

#stage { position: fixed; inset: 0 340px 0 0; background: radial-gradient(ellipse at 50% 40%, var(--bg-hi), var(--bg) 75%); }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#stage canvas:active { cursor: grabbing; }
#status { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--muted); }
[hidden] { display: none !important; }

header { position: fixed; top: 16px; left: 16px; right: 356px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; pointer-events: none; }
h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
nav { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: auto; }
#views { position: fixed; left: 16px; bottom: 16px; }

button {
  font: 500 13px var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 4px;
  padding: 6px 11px; cursor: pointer; backdrop-filter: blur(8px);
}
button:hover { border-color: var(--ink); }
button[aria-selected="true"] { background: var(--ink); color: var(--bg-hi); border-color: var(--ink); }
#views button { font-size: 12px; padding: 4px 9px; color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

aside {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; overflow-y: auto; padding: 20px 20px 24px;
  background: var(--panel); border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 22px;
}
section { display: flex; flex-direction: column; gap: 12px; }
h2 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
p { margin: 0; }
#verdict { color: var(--muted); }
#verdict.chosen { color: var(--accent); font-weight: 500; }
dl { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; margin: 0; font-size: 13px; }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

#controls { display: flex; flex-direction: column; gap: 11px; }
.control { display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; align-items: baseline; }
.control label { font-size: 13px; }
.control output { font: 12px var(--mono); font-variant-numeric: tabular-nums; }
.control input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--accent); }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }

#checks { list-style: none; margin: 0; padding: 0; }
#checks li { display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13px; }
#checks li:last-child { border-bottom: 1px solid var(--rule); }
.mark { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); align-self: center; }
.value { font: 12px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ok .mark { background: var(--ok); } .ok .value { color: var(--ok); }
.warn .mark { background: var(--warn); border-radius: 2px; } .warn .value { color: var(--warn); }
.bad .mark { background: var(--bad); border-radius: 0; transform: rotate(45deg); } .bad .value { color: var(--bad); }
#note, footer { font-size: 12px; color: var(--muted); }
footer { border-top: 1px solid var(--rule); padding-top: 14px; }

@media (max-width: 820px) {
  body { overflow: auto; }
  #stage { position: relative; inset: auto; height: 62vh; }
  header { position: absolute; right: 16px; }
  #views { position: absolute; top: calc(62vh - 44px); bottom: auto; }
  aside { position: static; width: auto; border-left: 0; border-top: 1px solid var(--rule); }
}