/* pki_demo — Raidiam-branded UI styles.
   Layered on top of tokens.css (brand palette + type + spacing).
   Rules of engagement:
   - Body ink is --rd-ink, never pure black.
   - Mint (--rd-mint) is decorative: mint top bars on dark cards, single
     accent glyphs. Never mint paragraph text on light.
   - Cards are flat (4px radius, no shadow). Dark cards get the 6px mint
     top bar; light cards get a 1px border.
   - Sentence case, no emoji anywhere. */

* { box-sizing: border-box; }

html, body {
    background: var(--bg-page);
    color: var(--fg-1);
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--doc-body);
    line-height: 1.5;
}

body {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--space-8) var(--space-12);
}

/* ---- header --------------------------------------------------------- */

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-8) 0 var(--space-6);
    border-bottom: var(--border-thin);
    margin-bottom: var(--space-8);
    gap: var(--space-6);
}

header .brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

header .brand img {
    height: 40px;
    width: auto;
}

header h1 {
    font-family: var(--font-sans);
    font-size: var(--doc-h2);
    font-weight: 800;
    letter-spacing: var(--tracking-snug);
    line-height: 1.15;
    color: var(--rd-teal-900);
    margin: 0;
}

.banner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-callout);
    color: var(--rd-teal-900);
    border: 1px solid rgba(12, 63, 58, 0.12);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: var(--doc-small);
    font-weight: 600;
}

/* ---- section titles ------------------------------------------------- */

h2 {
    font-family: var(--font-sans);
    font-size: var(--doc-h3);
    font-weight: 700;
    color: var(--rd-teal-900);
    margin: 0 0 var(--space-2);
    letter-spacing: var(--tracking-snug);
}

h3 {
    font-family: var(--font-sans);
    font-size: var(--doc-h4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--rd-teal-900);
    margin: var(--space-8) 0 var(--space-3);
}

.lede {
    color: var(--fg-2);
    margin: 0 0 var(--space-8);
    font-size: var(--doc-body);
}

.hint {
    color: var(--fg-3);
    font-size: var(--doc-small);
    margin: var(--space-3) 0 0;
}

.dim {
    color: var(--fg-3);
    font-size: var(--doc-small);
}

/* ---- tabs ----------------------------------------------------------- */

nav.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: var(--border-thin);
    margin-bottom: var(--space-8);
}

.tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-3) var(--space-5);
    font: inherit;
    font-weight: 600;
    color: var(--fg-2);
    cursor: pointer;
    letter-spacing: var(--tracking-snug);
}

.tab:hover { color: var(--rd-teal-900); }

.tab.active {
    color: var(--rd-teal-900);
    border-bottom-color: var(--rd-mint);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- forms ---------------------------------------------------------- */

form label {
    display: block;
    margin-bottom: var(--space-5);
    font-size: var(--doc-small);
    font-weight: 600;
    color: var(--fg-2);
    letter-spacing: var(--tracking-snug);
}

textarea, select, input[type=text] {
    display: block;
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3);
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--fg-1);
    font-family: var(--font-mono);
    font-size: var(--doc-small);
    line-height: 1.4;
}

textarea {
    min-height: 180px;
    resize: vertical;
}

select { font-family: var(--font-sans); }

textarea:focus, select:focus, input:focus {
    outline: none;
    border-color: var(--rd-teal-700);
    box-shadow: 0 0 0 3px rgba(12, 63, 58, 0.10);
}

/* ---- buttons -------------------------------------------------------- */

button {
    background: var(--rd-teal-900);
    color: var(--rd-white);
    border: none;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease-out);
}

button:hover { filter: brightness(0.95); }
button:disabled { opacity: 0.55; cursor: wait; }

button.link {
    background: none;
    color: var(--rd-teal-900);
    padding: 0 var(--space-2);
    font-size: var(--doc-small);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--rd-mint);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

button.link:hover { filter: none; color: var(--rd-teal-700); }

/* ---- output cards --------------------------------------------------- */

.output {
    background: var(--bg-card-dark);
    color: var(--fg-on-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-6);
    margin-top: var(--space-6);
    border-top: var(--accent-bar);
}

.output h3 {
    color: var(--rd-mint);
    margin-top: var(--space-5);
    font-size: var(--doc-caption);
}
.output h3:first-child { margin-top: 0; }

.output button.link {
    color: var(--rd-mint);
    text-decoration-color: var(--rd-mint);
}
.output button.link:hover { color: var(--rd-white); }

pre {
    background: rgba(0, 0, 0, 0.25);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--doc-caption);
    line-height: 1.4;
    color: var(--rd-white);
    margin: var(--space-2) 0 0;
    white-space: pre;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-6);
    margin: var(--space-3) 0 0;
    font-size: var(--doc-small);
}
dt { color: var(--fg-on-dark-3); font-weight: 600; }
dd { margin: 0; word-break: break-all; color: var(--fg-on-dark); font-family: var(--font-mono); font-size: var(--doc-small); }

.hidden { display: none !important; }

.error {
    background: var(--rd-danger-bg);
    border: 1px solid var(--rd-danger);
    color: var(--rd-danger);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    margin-top: var(--space-6);
    font-size: var(--doc-small);
    font-weight: 600;
}

/* ---- revocation rows ----------------------------------------------- */

.revocation-row {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    margin: var(--space-2) 0;
    font-size: var(--doc-body);
    color: var(--fg-on-dark);
}

.revocation-row strong { color: var(--fg-on-dark-2); font-weight: 700; }

.status-good { color: var(--rd-mint); font-weight: 700; }
.status-revoked { color: #ff8080; font-weight: 700; }
.status-unknown { color: #ffd166; font-weight: 700; }
.status-pending { color: var(--fg-on-dark-3); }

/* ---- openssl panel -------------------------------------------------- */

details#openssl-panel {
    margin: var(--space-5) 0 0;
    background: var(--bg-callout);
    border: 1px solid rgba(12, 63, 58, 0.12);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
}
details#openssl-panel summary {
    cursor: pointer;
    color: var(--rd-teal-900);
    font-size: var(--doc-small);
    font-weight: 700;
    letter-spacing: var(--tracking-snug);
}
details#openssl-panel ol { margin: var(--space-4) 0 0; padding-left: var(--space-6); }
details#openssl-panel li { margin-bottom: var(--space-3); }
details#openssl-panel li .label {
    font-size: var(--doc-caption);
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    font-weight: 700;
    margin-bottom: 4px;
}
details#openssl-panel li code {
    display: block;
    background: var(--rd-white);
    border: 1px solid rgba(12, 63, 58, 0.10);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--doc-small);
    color: var(--rd-ink);
    margin-top: 3px;
    overflow-x: auto;
    white-space: pre;
}

/* ---- footer --------------------------------------------------------- */

footer {
    margin-top: var(--space-12);
    padding-top: var(--space-5);
    border-top: var(--border-thin);
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    font-size: var(--doc-caption);
    color: var(--fg-3);
    font-family: var(--font-mono);
}

code {
    background: rgba(12, 63, 58, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: var(--doc-caption);
    color: var(--rd-teal-900);
}

/* ---- revoke dialog -------------------------------------------------- */

dialog {
    background: var(--bg-card);
    border: var(--border-thin);
    border-radius: var(--radius-sm);
    border-top: var(--accent-bar);
    padding: var(--space-6) var(--space-8);
    min-width: 400px;
    color: var(--fg-1);
}

dialog::backdrop {
    background: rgba(12, 63, 58, 0.55);
}

dialog h3 { margin: 0 0 var(--space-4); color: var(--rd-teal-900); }

dialog menu {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: 0;
    margin: var(--space-6) 0 0;
}

dialog menu button[value=cancel] {
    background: var(--rd-white);
    color: var(--rd-teal-900);
    border: 1px solid var(--rd-teal-900);
}

/* ---- pill "for discussion" style (unused today, kept for future) --- */

.pill {
    display: inline-flex;
    align-items: center;
    background: var(--rd-mint);
    color: var(--rd-teal-900);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: var(--doc-caption);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}