/* ══════════════════════════════════════════════════════════════════════════
   Device Check — what is specific to /device-check only.

   Everything structural is student-pages.css: the column, .stu-card, the
   44px-tile card head, the hairline, label/value pairs, pills and the 40-high
   outline buttons. This sheet adds only the page's own arrangement — the map,
   its pins, the compact device rows and the compact summary strip — and reads
   the same --stu-* tokens so it cannot drift from the system.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The summary strip: one muted line, no card chrome ──────────────────── */

[data-role="3"] #main-content .dc-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: -4px 0 0;
    padding: 0 2px;
}
[data-role="3"] #main-content .dc-strip-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--stu-muted);
}
[data-role="3"] #main-content .dc-strip-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── The simulation map ─────────────────────────────────────────────────── */

[data-role="3"] #main-content .dc-map {
    position: relative;
    height: 420px;
    margin-top: 14px;
    background: var(--stu-neutral-bg);
    z-index: 0;
}
[data-role="3"] #main-content .dc-map-empty { height: auto; min-height: 160px; }
[data-role="3"] #main-content .dc-map-empty .map-empty-note {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 160px;
    justify-content: center;
    padding: 0 20px;
    font-size: 13px;
    color: var(--stu-muted);
    text-align: center;
}

[data-role="3"] #main-content .dc-sim-body {
    border-top: 1px solid var(--stu-hair);
    padding-top: 14px;
}

/* ── Rows inside a card: the shared label/value pair, wrapped into columns ── */

[data-role="3"] #main-content .dc-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 20px;
}
[data-role="3"] #main-content .dc-rows .stu-field-v { overflow-wrap: anywhere; }

/* ── The camera / Face ID rows ──────────────────────────────────────────── */

[data-role="3"] #main-content .dc-rows-list {
    display: flex;
    flex-direction: column;
}
[data-role="3"] #main-content .dc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 0;
}
[data-role="3"] #main-content .dc-row + .dc-row { border-top: 1px solid var(--stu-hair); }
[data-role="3"] #main-content .dc-row-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: var(--stu-neutral-bg);
    color: var(--stu-muted);
    font-size: 14px;
}
[data-role="3"] #main-content .dc-row-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}
[data-role="3"] #main-content .dc-row-text .stu-field-v {
    margin: 0;
    font-size: 13px;
    color: var(--stu-muted);
    overflow-wrap: anywhere;
}
[data-role="3"] #main-content .dc-row .stu-pill { margin-left: auto; }

/* ── The action row: 40 high, from the shared .stu-btn ──────────────────── */

[data-role="3"] #main-content .dc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

/* A live preview while the camera test or the self-test runs. */
[data-role="3"] #main-content .dc-preview { padding: 0 0 12px; }
[data-role="3"] #main-content .dc-preview video {
    display: block;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    background: var(--stu-text);
    object-fit: cover;
}

/* ── The live Face ID preview: video, the detected-face box, a state badge ── */

[data-role="3"] #main-content .dc-live { padding: 0 0 12px; }
[data-role="3"] #main-content .dc-live-frame {
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--stu-text);
}
[data-role="3"] #main-content .dc-live-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
[data-role="3"] #main-content .dc-live-box {
    position: absolute;
    border: 2px solid var(--stu-primary);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(15, 27, 45, .18);
    pointer-events: none;
    transition: left .12s linear, top .12s linear, width .12s linear, height .12s linear;
}
[data-role="3"] #main-content .dc-live-box[data-state="success"] { border-color: #6EE7A8; }
[data-role="3"] #main-content .dc-live-box[data-state="danger"]  { border-color: #FCA5A5; }
[data-role="3"] #main-content .dc-live-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 27, 45, .78);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
}

/* ── The punch verdict: one band, one tone ──────────────────────────────── */

[data-role="3"] #main-content .dc-verdict {
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
}
[data-role="3"] #main-content .dc-verdict.is-success { background: var(--stu-success-bg); color: var(--stu-success); }
[data-role="3"] #main-content .dc-verdict.is-warning { background: var(--stu-warning-bg); color: var(--stu-warning); }
[data-role="3"] #main-content .dc-verdict.is-danger  { background: var(--stu-danger-bg);  color: var(--stu-danger); }

/* ── Lines: notes and the read-only promise ─────────────────────────────── */

[data-role="3"] #main-content .dc-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--stu-muted);
}
[data-role="3"] #main-content .dc-note.dc-readonly {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
[data-role="3"] #main-content .dc-note.dc-readonly i { margin-top: 3px; color: var(--stu-success); }

/* ── The two map pins ───────────────────────────────────────────────────── */

[data-role="3"] #main-content .dc-pin,
body .dc-pin {
    background: none;
    border: 0;
}
.dc-pin .dc-pin-dot {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--stu-primary);
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(15, 27, 45, .35);
}
.dc-pin .dc-pin-ring {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(10, 102, 168, .25);
    border: 3px solid #FFFFFF;
    box-shadow: 0 0 0 2px var(--stu-primary);
}
.dc-pin-tip {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--stu-text);
    background: #FFFFFF;
    border: 1px solid var(--stu-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 27, 45, .12);
    padding: 3px 8px;
}
.dc-pin-tip::before { display: none; }

/* ── Responsive: a shorter map, stacked rows, full-width buttons at 640 ─── */

@media (max-width: 900px) {
    [data-role="3"] #main-content .dc-map { height: 340px; }
}

@media (max-width: 640px) {
    [data-role="3"] #main-content .dc-map { height: 300px; margin-top: 12px; }
    [data-role="3"] #main-content .dc-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
    [data-role="3"] #main-content .dc-row { flex-wrap: wrap; row-gap: 10px; }
    [data-role="3"] #main-content .dc-row .stu-pill { margin-left: 46px; }
    [data-role="3"] #main-content .dc-row .dc-row-btn,
    [data-role="3"] #main-content .dc-actions .stu-btn.btn { flex: 1 1 100%; }
    [data-role="3"] #main-content .dc-strip { gap: 6px 8px; }
}