/* ============================================================
   A2Z Device Health Check
   ============================================================

   Built on the A-to-Z homepage tokens rather than a palette of
   its own, so the workspace reads as part of the same site.
   Where a token exists it is used; the fallbacks after each
   var() are the same values, so this file still renders
   correctly if it loads before home-atoz.css.

   THE A-TO-Z IDEA, USED QUIETLY. Progress runs from the blue and
   purple of the "A" to the coral and orange of the "Z", and the
   report's completion state lands in the warm end. The giant
   letters from the homepage are deliberately NOT repeated here -
   a diagnostic workspace somebody is concentrating in is the
   wrong place for a decorative headline.

   RESULT COLOUR IS NEVER THE ONLY SIGNAL. Every status carries a
   word and, where it matters, a shape. Mint for passed, an
   accessible red for failed, and a deliberately neutral grey for
   "not supported" and "not tested" - those two are not bad news
   and must not be coloured as though they were.

   Everything is responsive from 320px with no horizontal
   scrolling; wide content scrolls inside its own container.
   ============================================================ */

:root {
    --dhc-bg:        var(--az-bg, #fbf9f7);
    --dhc-surface:   var(--az-surface, #ffffff);
    --dhc-ink:       var(--az-ink, #10162b);
    --dhc-ink-2:     var(--az-ink-2, #454d63);
    --dhc-ink-3:     var(--az-ink-3, #5f677d);
    --dhc-line:      var(--az-line, #e8e6e3);
    --dhc-line-2:    var(--az-line-2, #f0eeeb);

    /* The journey: A (blue/purple) -> Z (coral/orange) */
    --dhc-a-1:       var(--az-a-1, #5b8def);
    --dhc-a-2:       var(--az-a-2, #7b5bf0);
    --dhc-mid:       var(--az-mid, #c05ad9);
    --dhc-z-1:       var(--az-z-1, #f0655f);
    --dhc-z-2:       var(--az-z-2, #f89a4d);

    --dhc-pass:      var(--az-mint, #22b06b);
    --dhc-pass-bg:   #eaf7f0;

    /* Not the homepage coral: that is a brand accent and this is
       an error state, and it has to clear 4.5:1 on white. */
    --dhc-fail:      #c62f2f;
    --dhc-fail-bg:   #fdecec;

    /* Neutral, on purpose. Not-supported and not-tested are not
       failures and must not read as them. */
    --dhc-none:      #6b7280;
    --dhc-none-bg:   #f3f4f6;

    --dhc-shadow-sm: var(--az-shadow-sm, 0 1px 2px rgba(16, 22, 43, .05));
    --dhc-shadow:    var(--az-shadow, 0 4px 16px rgba(16, 22, 43, .06));
    --dhc-shadow-lg: var(--az-shadow-lg, 0 10px 34px rgba(16, 22, 43, .10));

    --dhc-r:         var(--az-r, 14px);
    --dhc-r-lg:      var(--az-r-lg, 18px);
}

.dhc {
    background: var(--dhc-bg);
    color: var(--dhc-ink-2);
    padding: 8px 0 48px;
}

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

.dhc h1, .dhc h2, .dhc h3 { color: var(--dhc-ink); }

.dhc h1 {
    font-size: clamp(1.6rem, 4.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 10px;
}

.dhc-lede {
    font-size: clamp(.98rem, 2.4vw, 1.08rem);
    max-width: 68ch;
    margin: 0 auto 28px;
    color: var(--dhc-ink-2);
}

/* ---------- Step 1: choose a device ---------- */

.dhc-devices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 14px;
    margin: 0 0 28px;
}

.dhc-device {
    background: var(--dhc-surface);
    border: 1px solid var(--dhc-line);
    border-radius: var(--dhc-r-lg);
    box-shadow: var(--dhc-shadow-sm);
    padding: 20px 16px;
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;

    /* 44px is the floor for a touch target; these are far above
       it, but the rule is stated so a future tightening keeps it. */
    min-height: 132px;
}

.dhc-device:hover {
    transform: translateY(-2px);
    box-shadow: var(--dhc-shadow);
    border-color: var(--dhc-a-1);
}

.dhc-device-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
    background: #eef1fd;
    color: var(--dhc-a-1);
}

.dhc-device:nth-child(2n) .dhc-device-icon { background: #f1eefc; color: var(--dhc-a-2); }
.dhc-device:nth-child(3n) .dhc-device-icon { background: #fdeeea; color: var(--dhc-z-1); }
.dhc-device:nth-child(5n) .dhc-device-icon { background: #fdf3e5; color: var(--dhc-z-2); }

.dhc-device-name {
    display: block;
    font-weight: 700;
    color: var(--dhc-ink);
    margin-bottom: 4px;
}

.dhc-device-meta {
    display: block;
    font-size: .84rem;
    color: var(--dhc-ink-3);
}

/* ---------- The workspace ---------- */

.dhc-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 900px) {
    .dhc-workspace { grid-template-columns: 288px 1fr; align-items: start; }
}

.dhc-panel {
    background: var(--dhc-surface);
    border: 1px solid var(--dhc-line);
    border-radius: var(--dhc-r-lg);
    box-shadow: var(--dhc-shadow-sm);
    padding: 18px;
}

/* ---------- Progress ---------- */

/* THE SITE STYLESHEET SETS `section { overflow: hidden }`, and an
   ancestor with any non-visible overflow silently disables
   position:sticky on every descendant. The progress bar did not stick
   at all - it scrolled away with the page - and nothing about that is
   visible from reading this file, because the rule that breaks it is
   in another stylesheet entirely. Found by scrolling the real page in
   headless Chrome and reading the bar's bounding box.

   Scoped to this feature's own sections so no other page changes. */
#dhc-step-device,
#dhc-step-details,
#dhc-step-tests,
#dhc-step-done { overflow: visible; }

.dhc-progress-head {
    position: sticky;

    /* CLEARS THE SITE'S FIXED HEADER, which is 76px on mobile and
       81px above it, at z-index 1030. Sticking at top:0 would park
       the progress bar underneath it, permanently hidden - which
       looks identical to it not sticking, and is why both faults had
       to be fixed together. The variable lets a header change be made
       in one place rather than hunted for. */
    top: var(--dhc-header-h, 76px);

    /* Above the workspace content, deliberately below the site
       header's 1030 so the navigation still wins. */
    z-index: 20;

    background: var(--dhc-bg);
    padding: 10px 0;
    border-bottom: 1px solid var(--dhc-line-2);
}

@media (min-width: 900px) {
    /* On desktop the side panel carries navigation, so the sticky
       header would only take vertical space from the workspace. */
    .dhc-progress-head { position: static; border-bottom: 0; }
}

.dhc-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--dhc-line-2);
    overflow: hidden;
}

.dhc-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    /* A to Z, left to right. */
    background: linear-gradient(90deg,
        var(--dhc-a-1) 0%, var(--dhc-a-2) 35%,
        var(--dhc-mid) 60%, var(--dhc-z-1) 85%, var(--dhc-z-2) 100%);
    transition: width .3s ease;
}

.dhc-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .85rem;
    color: var(--dhc-ink-3);
    margin-top: 8px;
}

/* ---------- Step list ---------- */

.dhc-steps { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }

.dhc-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: .9rem;
    cursor: pointer;
    color: var(--dhc-ink-2);
}

.dhc-step:hover { background: var(--dhc-line-2); }
.dhc-step.is-current { background: #eef1fd; color: var(--dhc-ink); font-weight: 600; }

/* The dot is a shape cue as well as a colour one; the text label
   beside it is what actually carries the state. */
.dhc-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--dhc-none); flex: 0 0 auto;
}
.dhc-step.is-pass .dhc-dot { background: var(--dhc-pass); }
.dhc-step.is-fail .dhc-dot { background: var(--dhc-fail); border-radius: 2px; }
.dhc-step.is-none .dhc-dot { background: transparent; border: 2px solid var(--dhc-none); }

/* ---------- Test surface ---------- */

.dhc-test-title { font-size: 1.25rem; margin: 0 0 8px; }
.dhc-test-title:focus-visible { outline: 3px solid var(--dhc-a-1); outline-offset: 3px; }

.dhc-instruction { margin: 0 0 12px; }

.dhc-caveat {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-left: 3px solid var(--dhc-a-2);
    background: #f7f5ff;
    border-radius: 0 8px 8px 0;
    font-size: .88rem;
    color: var(--dhc-ink-2);
}

.dhc-status {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--dhc-ink);
    margin: 12px 0;
}

.dhc-readout {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.1rem;
    color: var(--dhc-ink);
}

/* ---------- Buttons ---------- */

.dhc-btn {
    appearance: none;
    border: 1px solid var(--dhc-line);
    background: var(--dhc-surface);
    color: var(--dhc-ink);
    border-radius: 999px;
    padding: 11px 20px;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.dhc-btn:hover { border-color: var(--dhc-ink-3); }
.dhc-btn:active { transform: translateY(1px); }

.dhc-btn:focus-visible {
    outline: 3px solid var(--dhc-a-1);
    outline-offset: 2px;
}

.dhc-btn-primary {
    background: linear-gradient(135deg, var(--dhc-a-1), var(--dhc-a-2));
    border-color: transparent;
    color: #fff;
}

.dhc-btn-pass { background: var(--dhc-pass-bg); border-color: #bfe6d2; color: #14663f; }
.dhc-btn-fail { background: var(--dhc-fail-bg); border-color: #f3c9c9; color: #8d1f1f; }
.dhc-btn-neutral { background: var(--dhc-none-bg); border-color: #e2e5ea; color: #3f4552; }

.dhc-btn[disabled] { opacity: .5; cursor: not-allowed; }

.dhc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
}

/* ---------- Form controls ---------- */

.dhc-label {
    display: block;
    font-weight: 600;
    color: var(--dhc-ink);
    margin: 14px 0 6px;
    font-size: .9rem;
}

.dhc-input, .dhc-select, .dhc-textarea {
    width: 100%;
    border: 1px solid var(--dhc-line);
    border-radius: 10px;
    padding: 11px 13px;
    font: inherit;
    color: var(--dhc-ink);
    background: var(--dhc-surface);
    min-height: 44px;
}

.dhc-input:focus-visible, .dhc-select:focus-visible, .dhc-textarea:focus-visible {
    outline: 3px solid var(--dhc-a-1);
    outline-offset: 1px;
    border-color: var(--dhc-a-1);
}

.dhc-textarea { min-height: 72px; resize: vertical; }

.dhc-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 16px;
}

@media (min-width: 640px) {
    .dhc-form-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Full-screen colour tests ---------- */

.dhc-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 max(24px, env(safe-area-inset-bottom));
}

.dhc-fullscreen-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);

    /* The exit must stay visible on a white field too, so the bar
       carries its own contrast rather than relying on the colour
       behind it. */
    box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}

.dhc-fullscreen-bar.dhc-on-dark { background: rgba(255, 255, 255, .95); }

.dhc-noscroll { overflow: hidden !important; touch-action: none; }

/* ---------- Touch grid ---------- */

.dhc-grid {
    display: grid;
    gap: 2px;
    height: 58vh;
    min-height: 260px;
    background: var(--dhc-line-2);
    border-radius: 12px;
    padding: 2px;
    touch-action: none;
}

.dhc-cell {
    background: #e5e7eb;
    border-radius: 3px;
    transition: background .1s linear;
}

.dhc-cell.is-hit { background: var(--dhc-pass); }

.dhc-multipad {
    height: 46vh;
    min-height: 220px;
    border-radius: 12px;
    border: 2px dashed var(--dhc-line);
    background: #fafafa;
    touch-action: none;
}

/* ---------- Pointer / keyboard ---------- */

.dhc-pad {
    height: 220px;
    border: 2px dashed var(--dhc-line);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dhc-ink-3);
    background: #fafafa;
    user-select: none;
}

.dhc-pad:focus-visible { outline: 3px solid var(--dhc-a-1); outline-offset: 2px; }

/* The keyboard map is the one genuinely wide thing here, so it
   scrolls inside its own box rather than the page. */
.dhc-keyboard-map {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.dhc-key-row { display: flex; gap: 4px; margin-bottom: 4px; min-width: max-content; }

.dhc-key {
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border-radius: 6px;
    background: #eef0f4;
    border: 1px solid var(--dhc-line);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem;
    color: var(--dhc-ink-2);
}

.dhc-key.is-hit { background: var(--dhc-pass); border-color: var(--dhc-pass); color: #fff; }

@media (max-width: 640px) {
    /* A full keyboard picture is unreadable at this width. It
       still scrolls, but the counters above it are the interface. */
    .dhc-key { min-width: 28px; height: 28px; font-size: .64rem; }
}

/* ---------- Media ---------- */

.dhc-video {
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    background: #000;
    display: block;
}

.dhc-audio { width: 100%; max-width: 480px; margin-top: 12px; }

.dhc-meter {
    height: 16px;
    border-radius: 999px;
    background: var(--dhc-line-2);
    overflow: hidden;
}

.dhc-meter-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--dhc-a-1), var(--dhc-a-2));
    transition: width .08s linear;
}

/* ---------- Cosmetic severity ---------- */

.dhc-severity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.dhc-severity-btn {
    text-align: left;
    background: var(--dhc-surface);
    border: 1px solid var(--dhc-line);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    min-height: 44px;
}

.dhc-severity-btn:focus-visible { outline: 3px solid var(--dhc-a-1); outline-offset: 2px; }

.dhc-severity-btn.is-chosen {
    border-color: var(--dhc-a-2);
    background: #f7f5ff;
    box-shadow: 0 0 0 1px var(--dhc-a-2) inset;
}

.dhc-severity-label { display: block; font-weight: 700; color: var(--dhc-ink); }
.dhc-severity-hint { display: block; font-size: .8rem; color: var(--dhc-ink-3); margin-top: 2px; }

/* ---------- Result badges ---------- */

.dhc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.dhc-badge-auto,
.dhc-badge-confirmed { background: var(--dhc-pass-bg); color: #14663f; }
.dhc-badge-failed    { background: var(--dhc-fail-bg); color: #8d1f1f; }
.dhc-badge-none      { background: var(--dhc-none-bg); color: #3f4552; }

/* The two kinds of pass are distinguished by more than colour,
   because that distinction is the point of the whole product. */
.dhc-badge-confirmed::before { content: "\2713"; }
.dhc-badge-auto::before      { content: "\2713\2713"; letter-spacing: -2px; }
.dhc-badge-failed::before    { content: "\2715"; }
.dhc-badge-none::before      { content: "\2013"; }

/* ---------- Report ---------- */

.dhc-grade {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px; height: 96px;
    border-radius: 50%;
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    /* The Z end of the journey: the report is the destination. */
    background: linear-gradient(135deg, var(--dhc-z-1), var(--dhc-z-2));
    box-shadow: var(--dhc-shadow);
}

.dhc-grade-incomplete {
    background: linear-gradient(135deg, #8b93a5, #6b7280);
    font-size: 1rem;
    text-align: center;
    line-height: 1.2;
}

.dhc-report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.dhc-kv { display: grid; grid-template-columns: 1fr; gap: 0; }

@media (min-width: 560px) {
    .dhc-kv { grid-template-columns: minmax(140px, 200px) 1fr; }
}

.dhc-kv dt { font-weight: 600; color: var(--dhc-ink); padding: 7px 0; }
.dhc-kv dd { margin: 0; padding: 7px 0; color: var(--dhc-ink-2); }

@media (min-width: 560px) {
    .dhc-kv dt, .dhc-kv dd { border-bottom: 1px solid var(--dhc-line-2); }
}

.dhc-results-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.dhc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dhc-results-table th, .dhc-results-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--dhc-line-2);
    font-size: .9rem;
}

.dhc-results-table th { color: var(--dhc-ink); font-weight: 700; }

.dhc-limits {
    margin-top: 28px;
    padding: 16px 18px;
    border-radius: var(--dhc-r);
    background: #fff8ee;
    border: 1px solid #f6e2c6;
    font-size: .89rem;
    color: #6b4b18;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .dhc *, .dhc *::before, .dhc *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Print ---------- */

@media print {
    .dhc { background: #fff; padding: 0; }
    .dhc-noprint, .dhc-actions, .dhc-progress-head { display: none !important; }

    .dhc-panel {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    /* Badges lose their background in most print paths, so the
       glyph prefixes above are what survive onto paper. */
    .dhc-badge { border: 1px solid #999; }

    .dhc-results-table { min-width: 0; font-size: 11pt; }
    .dhc-table-scroll { overflow: visible; }

    a[href]::after { content: ""; }   /* no URL noise on the printout */
}