/*
 * Shared styles of the device checks (mic-test, webcam-test, speaker-test,
 * decibel-meter). Pulled in by each tool's own stylesheet with @import until
 * the theme enqueues it directly. Site tokens only — dark and light follow.
 */

.sm { --sm-ok: #22a06b; --sm-warn: #d98e04; --sm-bad: #e5484d; }

/* Top control row: primary button + pickers */
.sm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
}
.sm-start svg { width: 20px; height: 20px; flex: none; }
.sm-start[aria-busy="true"] { opacity: .75; cursor: progress; }
.sm-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 200px;
    max-width: 340px;
}
.sm-field .tool-select { width: 100%; text-overflow: ellipsis; }
.sm-field--narrow { flex: 0 1 150px; }
.sm-hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Inline toggle (checkbox + text) */
.sm-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
}
.sm-check input { width: 16px; height: 16px; accent-color: var(--color-accent); }

/* Secondary panels under the main readout */
.sm-cards {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.sm-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    min-width: 0;
}
.sm-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 6px;
}
.sm-card__text {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0 0 12px;
}
.sm-card audio { width: 100%; margin-top: 12px; }
.sm-out {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.sm-out p { margin: 0 0 6px; }
.sm-out p:last-child { margin-bottom: 0; }

/* Key/value facts (settings, resolution, …) */
.sm-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 14px;
}
.sm-facts dt { color: var(--color-text-muted); }
.sm-facts dd {
    margin: 0;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.sm-facts dd small { color: var(--color-text-muted); font-size: 12.5px; }

/* Verdict card variants (army-verdict carries the box) */
.sm-verdict { margin-top: 16px; }
.sm-verdict__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 7px;
    background: var(--color-text-muted);
}
.sm-verdict--ok   { border-color: color-mix(in srgb, var(--sm-ok) 45%, var(--color-border)); }
.sm-verdict--warn { border-color: color-mix(in srgb, var(--sm-warn) 50%, var(--color-border)); }
.sm-verdict--bad  { border-color: color-mix(in srgb, var(--sm-bad) 50%, var(--color-border)); }
.sm-verdict--ok .sm-verdict__dot   { background: var(--sm-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sm-ok) 20%, transparent); }
.sm-verdict--warn .sm-verdict__dot { background: var(--sm-warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sm-warn) 20%, transparent); }
.sm-verdict--bad .sm-verdict__dot  { background: var(--sm-bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sm-bad) 20%, transparent); }
.sm-verdict__body { min-width: 0; }
.sm-steps-head {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.sm-steps {
    margin: 4px 0 0;
    padding-inline-start: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.sm-steps li + li { margin-top: 4px; }
ol.sm-steps { list-style: decimal; }
ul.sm-steps { list-style: disc; }
/* The page minifier drops the space between the sentence and its link */
.sm .army-next a { margin-inline-start: .35em; }
.sm-tech {
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: var(--cine-mono, ui-monospace, monospace);
}
.sm-retry { margin-top: 12px; }

/* Cross-links between the four device checks */
.sm-links {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-size: 14px;
}
.sm-links__label { color: var(--color-text-muted); margin-inline-end: 4px; }
.sm-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: border-color 160ms var(--ease-out, ease), color 160ms var(--ease-out, ease);
}
.sm-links a:hover { color: var(--color-text-primary); border-color: var(--color-accent); }
.sm-links svg { width: 16px; height: 16px; }

/* Visually hidden but read by screen readers */
.sm-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .sm-head { align-items: stretch; }
    .sm-head .sm-start { width: 100%; }
    .sm-field, .sm-field--narrow { flex: 1 1 130px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sm *, .sm *::before, .sm *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.sm-gap { margin-top: 12px; }
.sm-card__text--after { margin: 10px 0 0; }

/* Numeric readouts read left to right in every language */
.sm .sm-num, .mt-read dd, .dbm-stats dd, .dbm-big, .dbm-fs, .sp-freq, .sm-facts dd {
    unicode-bidi: isolate;
}
.mt-read dd, .dbm-stats dd, .dbm-big, .dbm-fs, .sp-freq { direction: ltr; }
[dir="rtl"] .mt-read dd, [dir="rtl"] .dbm-stats dd, [dir="rtl"] .dbm-fs, [dir="rtl"] .sp-freq { text-align: right; }
[dir="rtl"] .dbm-big { justify-content: flex-end; }

/* A row that mixes a labelled field (label above a select) with buttons:
   line the buttons up with the select, not with the middle of label+select,
   and give them the select's height. */
.sm .army-row:has(> .sm-field) { align-items: flex-end; }
.sm .army-row:has(> .sm-field) > .tool-btn-sm,
.sm .army-row:has(> .sm-field) > .tool-btn-primary {
    min-height: 2.6rem;
    padding-inline: 1rem;
    font-size: 0.875rem;
}
/* Focus ring for keyboard users only — a mouse click left a double frame. */
.sm .tool-btn-sm:focus:not(:focus-visible) { outline: none; box-shadow: none; }