/*
 * a11y.css — presentation layer for the accessible build of Universal Paperclips.
 *
 * Loaded AFTER interface.css so these rules win. Nothing here changes game logic;
 * it only (a) un-hides the game on small screens, (b) provides the screen-reader
 * helpers, and (c) gives the added header/status/footer a plain, legible look.
 */

/* --- 1. Neutralise the "not designed for phones" block ------------------- *
 * interface.css hides #page and shows #mobile below 700px. We want the real
 * game on every width (iOS/VoiceOver included), so we reverse that. */
@media only screen and (max-width: 700px) {
    #mobile { display: none !important; }
    #page   { display: block !important; }
}

/* --- 2. Screen-reader-only content --------------------------------------- *
 * Present to assistive tech, removed from the visual layout. Standard clip
 * pattern (kept off-screen rather than display:none so SRs still read it). */
.a11y-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- 3. Skip link: invisible until focused ------------------------------- */
.a11y-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 0.5em 1em;
    background: #000;
    color: #fff;
    text-decoration: underline;
}
.a11y-skip:focus {
    left: 0;
}

/* --- 4. Always-visible focus ring (helps low-vision keyboard users) ------ */
a:focus, button:focus, summary:focus, [tabindex]:focus {
    outline: 3px solid #1a73e8 !important;
    outline-offset: 2px;
}

/* --- 5. Added regions: plain, legible, high-contrast --------------------- */
#a11y-header,
#a11y-status,
#a11y-footer {
    font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
    line-height: 1.5;
    color: #111;
    background: #f4f4f4;
    border-bottom: 1px solid #ccc;
    padding: 0.75em 1em;
    max-width: 60em;
}

#a11y-header h1 { font-size: 1.4em; margin: 0 0 0.25em; }
#a11y-header .a11y-sub { font-weight: normal; color: #555; }
#a11y-help summary { cursor: pointer; font-weight: bold; }
#a11y-help .a11y-help-body { margin-top: 0.5em; }
#a11y-help kbd {
    border: 1px solid #999; border-radius: 3px;
    padding: 0 0.3em; background: #fff; font-size: 0.9em;
}

#a11y-status h2 { font-size: 1.1em; margin: 0 0 0.5em; }

/* The live status figures, rendered as a row of focusable readouts. */
#a11y-status-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}
.a11y-stat {
    font: inherit;
    text-align: left;
    padding: 0.35em 0.6em;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    color: #111;
    cursor: pointer;
}
.a11y-stat .a11y-stat-label { font-weight: bold; }
.a11y-stat .a11y-stat-value { font-variant-numeric: tabular-nums; }

#a11y-footer {
    font-size: 0.85em;
    color: #444;
    border-top: 1px solid #ccc;
    border-bottom: none;
}
#a11y-footer a { color: #1a5fb4; }