/* /dead-pixel-test/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts).
   The pure test colours (black, white, red, green, blue, grey) are test content, set by app.js on the overlay. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
@media(max-width:520px){.dp-head h1{margin-bottom:0.25rem}.dp-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}

.dp-grid{display:grid;gap:1rem}
@media(min-width:860px){.dp-grid{grid-template-columns:1.35fr 1fr;align-items:start}}
.dp-stage,.dp-helper{padding:1.125rem;min-width:0}
@media(max-width:520px){.dp-stage,.dp-helper{padding:0.875rem}}

/* the six test colours as a strip: a preview of what Start shows */
.dp-swatches{display:grid;grid-template-columns:repeat(6,1fr);height:3.25rem;border:1px solid var(--line-2);border-radius:0.625rem;overflow:hidden;margin:0 0 0.875rem}
.dp-swatches i{display:block}
.dp-swatches .k{background:#000}.dp-swatches .w{background:#fff}.dp-swatches .r{background:#f00}
.dp-swatches .g{background:#0f0}.dp-swatches .b{background:#00f}.dp-swatches .y{background:#808080}
@media(min-width:860px){.dp-swatches{height:5.5rem}}

.dp-start{width:100%;justify-content:center;font-size:1.0625rem;padding:0.875rem 1rem}
.dp-keys{margin:0.625rem 0 0.75rem;font-size:0.8125rem;color:var(--muted);line-height:1.6}
.dp-chips{gap:0.375rem}
.dp-chips .chip{padding:0.375rem 0.75rem;font-size:0.8125rem}
.chip:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
kbd{font-family:var(--mono);font-size:0.8125em;background:var(--surface-2);border:1px solid var(--line);border-radius:0.25rem;padding:0 0.25rem}
.dp-status{margin:0.5rem 0 0;font-size:0.8125rem;color:var(--muted)}
.dp-status:empty{display:none}

.dp-nofs{margin:0.875rem 0 0;padding:0.75rem 0.875rem;border:1px solid var(--line);border-left:0.25rem solid var(--warn);border-radius:0.5rem;background:var(--surface-2);font-size:0.875rem;line-height:1.55}
.dp-nofs p{margin:0 0 0.375rem}
.dp-nofs ol{margin:0;padding-left:1.25rem}
.dp-nofs li{margin:0.125rem 0}

.dp-sec{font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 0.5rem}
.dp-help{margin:0 0 0.75rem;font-size:0.9rem;color:var(--ink-2);line-height:1.55}
.dp-rm{margin:0.75rem 0 0;font-size:0.875rem;line-height:1.55;color:var(--ink-2)}
.dp-warn{margin:0.875rem 0 0;padding:0.875rem 1rem;border:2px solid var(--bad);border-radius:0.625rem;background:var(--surface)}
.dp-warn h3{margin:0 0 0.375rem;font-size:1rem;color:var(--bad)}
.dp-warn p{margin:0 0 0.75rem;font-size:0.9rem;line-height:1.55}
.dp-row{display:flex;flex-wrap:wrap;gap:0.5rem}

.dp-tablewrap{overflow-x:auto}
.dp-table{width:100%;border-collapse:collapse;font-size:0.9rem;margin:0 0 1rem}
.dp-table th{text-align:left;font-family:var(--mono);font-weight:500;font-size:0.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line-2);padding:0.375rem 0.5rem}
.dp-table td{border-bottom:1px solid var(--line);padding:0.4375rem 0.5rem;vertical-align:top}

/* ------------------------------------------------------------- the test overlay */
.dp-screen{position:fixed;inset:0;z-index:1000;background:#000;cursor:none;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;overflow:hidden}
.dp-screen[hidden]{display:none}
.dp-gridc{position:absolute;inset:0;width:100%;height:100%;display:none}
.dp-screen[data-name="grid"] .dp-gridc{display:block}
.dp-hud{position:absolute;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(34rem,calc(100% - 1.5rem));padding:0.625rem 0.75rem;border:1px solid var(--line-2);border-radius:0.75rem;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);cursor:default;transition:opacity .35s}
.dp-hud.idle{opacity:0;pointer-events:none}
.dp-hud-tip{margin:0 0 0.5rem;font-size:0.8125rem;line-height:1.5;color:var(--ink-2)}
.dp-hud-tip:empty{display:none}
.dp-hud-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.5rem}
.dp-hud-name{flex:1 1 auto;font-size:0.875rem}
.dp-hud-name span{font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.dp-hud .chip{padding:0.375rem 0.75rem;font-size:0.8125rem}
/* on the dark-room screen the bar dims itself so it does not light the room */
.dp-screen[data-name="bleed"] .dp-hud{opacity:.8}
.dp-screen[data-name="bleed"] .dp-hud.idle{opacity:0}

.dp-sq{position:absolute;left:0;top:0;width:64px;height:64px;cursor:grab;touch-action:none;box-shadow:0 0 0 1px #000}
.dp-sq:active{cursor:grabbing}
.dp-stuck{cursor:default}

@media(prefers-reduced-motion:reduce){.dp-hud{transition:none}}