/* ── jwt-y — a JWT claims lens (Experiments) ────────────────────────────────
 *
 * Tokens only; no hardcoded colours, sizes or font stacks (inspector-ui-patterns §2).
 * Every selector here is emitted by js/jwty/jwtyView.js, and every class that module
 * emits is defined here or in main.css — a rule referencing a class nothing defines
 * fails SILENTLY, which is how 14 undefined classes once left a stepper below the fold.
 */

/* ── input ──────────────────────────────────────────────────────────────── */

.jwty-hint {
    margin: var(--spacing-xs) 0 var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-body-sm);
}

.jwty-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    line-height: var(--line-height-body-sm);
    resize: vertical;
    word-break: break-all;     /* a JWT is one unbroken word */
}

.jwty-input:focus {
    outline: none;
    border-color: var(--accent-main);
}

/* ── results ────────────────────────────────────────────────────────────── */

.jwty-results {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.jwty-kind {
    display: flex;
    gap: var(--spacing-sm);
}

.jwty-section-title {
    margin: 0 0 var(--spacing-sm);
    color: var(--text-primary);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
}

.jwty-error {
    margin: 0;
    color: var(--accent-danger);
    font-size: var(--font-size-body-sm);
}

/* ── the claims table ───────────────────────────────────────────────────── */

.jwty-claims {
    width: 100%;
    table-layout: fixed;
}

.jwty-claims__label {
    width: 34%;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
    font-weight: 500;
    text-align: left;
    vertical-align: top;
}

/* The schema-URI footnote. It is the whole reason a raw decode is unreadable, so it is
 * present but subordinate — the label is what you scan, the note is what you check. */
.jwty-claims__note {
    display: block;
    margin-top: var(--spacing-xs);
    color: var(--text-muted);
    font-size: var(--font-size-body-xs);
    font-weight: 400;
}

.jwty-claims__value {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
    word-break: break-word;
}

.jwty-mono {
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
}

/* ── chips ──────────────────────────────────────────────────────────────── */

.jwty-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.jwty-chip {
    display: inline-block;
    padding: 2px var(--spacing-sm);
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
}

/* ── the verdict badge ──────────────────────────────────────────────────── */

/* Binary by request, and the colours stay sober on purpose: this says "well-formed and in date",
 * not "this will work". A green that reads as a success state would over-claim. */
.jwty-chip--verdict {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.jwty-chip--verdict-valid {
    background: var(--success-900);
    border-color: var(--accent-confirm);
    color: var(--accent-confirm);
}

.jwty-chip--verdict-invalid {
    background: var(--destructive-900);
    border-color: var(--accent-danger);
    color: var(--accent-danger);
}

.jwty-verdict-note {
    margin: calc(-1 * var(--spacing-xs)) 0 0;
    color: var(--text-secondary);
    font-size: var(--font-size-body-xs);
    line-height: var(--line-height-body-sm);
}

/* ── role chips ─────────────────────────────────────────────────────────────
 *
 * Colour answers "what KIND of role is this", which is not the same question as "how much can
 * it do" — `magnopus-agent` is tier 1 and still reads as Magnopus-internal. The `*` flag and the
 * chip's title attribute carry that distinction so the colour cannot silently imply a tier. */

.jwty-chip--role-magnopus {
    background: var(--destructive-900);
    border-color: var(--accent-danger);
    color: var(--accent-danger);
}

.jwty-chip--role-elevated {
    background: var(--warning-900);
    border-color: var(--accent-caution);
    color: var(--accent-caution);
}

/* Tier 1 keeps the default chip: the common case should not shout. Declared explicitly rather
 * than left to fall through, because "every class the JS emits exists in the CSS" is a rule you
 * can only check by grepping — and a class with no rule anywhere is indistinguishable from the
 * typo it is meant to catch. */
.jwty-chip--role-standard {
    /* intentionally the base .jwty-chip appearance */
}

.jwty-chip--role-custom {
    background: var(--bg-muted);
    border-color: var(--color-running);
    color: var(--color-running);
}

.jwty-chip__flag {
    margin-left: 2px;
    opacity: 0.8;
    font-weight: 700;
}

.jwty-chip--kind {
    background: transparent;
    border-color: var(--border-default);
    color: var(--text-secondary);
}

/* ── the findings ledger ────────────────────────────────────────────────── */

.jwty-findings {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.jwty-finding {
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
    background: var(--bg-muted);
    border-left: 3px solid var(--border-default);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.jwty-finding--error { border-left-color: var(--accent-danger); }
.jwty-finding--warn { border-left-color: var(--accent-caution); }
.jwty-finding--info { border-left-color: var(--accent-main); }

.jwty-finding__title {
    color: var(--text-primary);
    font-size: var(--font-size-body-sm);
    font-weight: 600;
}

.jwty-finding__detail {
    margin-top: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: var(--font-size-body-xs);
    line-height: var(--line-height-body-sm);
}

/* ── raw JSON ───────────────────────────────────────────────────────────── */

.jwty-raw > summary {
    cursor: pointer;
    margin-bottom: 0;
}

.jwty-raw__heading {
    margin: var(--spacing-md) 0 var(--spacing-xs);
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
}

.jwty-pre {
    margin: 0;
    padding: var(--spacing-sm);
    overflow-x: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
}