/*
 * Shared styles for the army tools (inc/tools-army.php). Per-tool styles go in
 * assets/css/tools/<type>.css. Uses the site tokens only, so dark/light themes
 * follow automatically.
 */

.army-tool {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: clamp(16px, 3vw, 28px);
}
.army-tool[data-context="embed"] {
    border-radius: 12px;
}

/* A row of controls that wraps on phones */
.army-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}
.army-row + .army-row { margin-top: 12px; }

.army-label {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Status line under a control */
.army-status {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.45;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
}
.army-status[hidden] { display: none; }
.army-status--ok    { border-color: color-mix(in srgb, #22c55e 45%, var(--color-border)); }
.army-status--warn  { border-color: color-mix(in srgb, #f59e0b 50%, var(--color-border)); }
.army-status--error { border-color: color-mix(in srgb, #ef4444 50%, var(--color-border)); }

/* Verdict card: the one-line answer a test produces */
.army-verdict {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}
.army-verdict__title { font-weight: 600; color: var(--color-text-primary); }
.army-verdict__text  { font-size: 14px; color: var(--color-text-muted); margin-top: 2px; }

/* Level meter (mic test, decibel meter) */
.army-meter {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    overflow: hidden;
}
.army-meter__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--color-accent);
    transition: width 60ms linear;
}

/* The one sentence that points at the product after a result (army rule 6) */
.army-next {
    margin-top: 16px;
    font-size: 15px;
    color: var(--color-text-secondary);
}
.army-next[hidden] { display: none; }
.army-next a {
    /* the HTML minifier drops the space between the sentence and the link */
    margin-inline-start: 0.3em;
    color: var(--color-accent);
    font-weight: 500;
    white-space: nowrap;
}
.army-next a:hover { text-decoration: underline; }

/* Embed code box under the tool */
.army-embed {
    margin-top: 16px;
    font-size: 14px;
    color: var(--color-text-muted);
}
.army-embed summary {
    cursor: pointer;
    display: inline-block;
}
.army-embed__lead { margin: 10px 0 8px; }
.army-embed__code {
    width: 100%;
    font-family: var(--cine-mono, ui-monospace, monospace);
    font-size: 12px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 10px;
    color: var(--color-text-secondary);
    resize: vertical;
}
.army-embed__copy { margin-top: 8px; }

/* Embed page */
body.soz-embed {
    background: var(--color-bg-primary);
    margin: 0;
    padding: 12px;
}
.army-embed-foot {
    margin: 10px 0 0;
    font-size: 12px;
    text-align: center;
}
.army-embed-foot a { color: var(--color-text-muted); }

/* Feature page carrying an instrument: same gap under the hero as on the
   tool pages (.tool-stage padding-top) — the box must not touch the band. */
.tool-hero--feature .tool-hero__inner { padding-bottom: 8px; }

/* /audio-to-text/ reuses the WS6 widget, which already draws its own
   .tool-box — the army wrapper must not add a second frame around it. */
.army-tool[data-army-tool="audio-to-text"] {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
}

[hidden] { display: none !important; }