/* Recon Web Brief — Brutalist, screen-optimized.
 * Mirrors design/brief.css (PDF) but adapted for a shareable HTML page.
 * Mobile-first; max width caps at print-equivalent column.
 */

:root {
    --ink: #1a1a1a;
    --paper: #fafaf7;
    --rule: #1a1a1a;
    --soft: #f0ede5;
    --soft-line: #d8d4ca;
    --accent: #d4471a;
    --muted: #999;
    --crit-fg: #b91c1c;
    --crit-bg: #fef2f2;
    --high-fg: #c2410c;
    --high-bg: #fff7ed;
    --med-fg: #a16207;
    --med-bg: #fefce8;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body {
    padding: 0 1.2rem 4rem;
}

main, .container {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 0 0;
}

/* ─── TOPBAR ─── */

.topbar {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.2rem 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.topbar a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.topbar a:hover {
    border-bottom-color: var(--accent);
}

.topbar .brand::before {
    content: "▎";
    color: var(--accent);
    margin-right: 0.4em;
}

/* ─── HEADINGS ─── */

h1 {
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0.2em 0 0.4em;
    padding-bottom: 0.4em;
    border-bottom: 2px solid var(--rule);
}

h1::before {
    content: "▎";
    color: var(--accent);
    margin-right: 0.2em;
}

h2 {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 2.2rem 0 0.7rem;
    padding: 0.5rem 0 0.5rem 0.7rem;
    border-left: 4px solid var(--ink);
    background: var(--soft);
}

h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.5rem 0 0.4rem;
}

p {
    margin: 0.6rem 0;
}

strong { font-weight: 700; color: #000; }
em { color: #444; }

/* ─── LISTS ─── */

ul, ol {
    margin: 0.5rem 0 0.8rem;
    padding-left: 1.5rem;
}

li { margin: 0.3rem 0; }

ul li::marker { color: var(--accent); }
ol li::marker { font-weight: 700; color: var(--ink); }

/* ─── SEVERITY TAGS ─── */

.sev {
    display: inline-block;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0.18em 0.6em;
    margin-left: 0.4em;
    border: 1.5px solid;
    vertical-align: middle;
    line-height: 1;
}

.sev-critical { color: var(--crit-fg); border-color: var(--crit-fg); background: var(--crit-bg); }
.sev-high     { color: var(--high-fg); border-color: var(--high-fg); background: var(--high-bg); }
.sev-medium   { color: var(--med-fg); border-color: var(--med-fg); background: var(--med-bg); }

/* ─── PRIORITY BADGES ─── */

.prio {
    display: inline-block;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.12em 0.5em;
    margin-right: 0.3em;
    color: #fff;
    line-height: 1.2;
    vertical-align: 1px;
}

.prio-p0 { background: var(--ink); }
.prio-p1 { background: #555; }
.prio-p2 { background: #999; }

/* ─── CALLOUTS ─── */

blockquote, blockquote.callout {
    margin: 1rem 0;
    padding: 0.8rem 1rem;
    border-left: 4px solid var(--accent);
    background: #fff;
    color: #333;
    font-size: 0.95rem;
}

blockquote p:first-child { margin-top: 0; }
blockquote p:last-child  { margin-bottom: 0; }

/* ─── TABLES ─── */

.table-wrap {
    overflow-x: auto;
    margin: 0.8rem 0 1rem;
    border: 1px solid var(--soft-line);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

th {
    text-align: left;
    font-weight: 700;
    padding: 0.55rem 0.7rem;
    border-bottom: 2px solid var(--ink);
    background: var(--soft);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--soft-line);
    vertical-align: top;
}

tr:last-child td { border-bottom: none; }

/* ─── CODE ─── */

code {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.88em;
    background: var(--soft);
    padding: 0.1em 0.35em;
    border: 1px solid var(--soft-line);
}

pre {
    background: var(--soft);
    border: 1px solid var(--soft-line);
    padding: 0.8rem 1rem;
    margin: 0.8rem 0;
    font-size: 0.85rem;
    overflow-x: auto;
}

pre code { background: none; border: none; padding: 0; }

hr {
    border: none;
    border-top: 1px solid var(--ink);
    margin: 2rem 0;
}

/* ─── SHARE BAR ─── */

.share-bar {
    margin: 2.5rem 0 0;
    padding: 1rem 1.2rem;
    border: 1px solid var(--ink);
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    align-items: center;
    justify-content: space-between;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.share-bar .meta {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.7rem;
}

.share-bar button,
.share-bar a.btn {
    appearance: none;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    padding: 0.55rem 0.9rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 80ms ease;
}

.share-bar button:hover,
.share-bar a.btn:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.share-bar button.secondary,
.share-bar a.btn.secondary {
    background: transparent;
    color: var(--ink);
}

.share-bar button.secondary:hover,
.share-bar a.btn.secondary:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.share-bar .copied {
    color: var(--accent);
    font-weight: 700;
}

/* ─── FOOTER ─── */

.page-footer, footer.site {
    max-width: 760px;
    margin: 3rem auto 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--soft-line);
    color: var(--muted);
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

footer.site a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

footer.site a:hover { border-bottom-color: var(--accent); }

/* ─── INDEX (gallery) ─── */

.briefs-list {
    margin: 1.5rem 0 2rem;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}

.briefs-list li {
    border-bottom: 1px solid var(--soft-line);
}

.briefs-list a {
    display: grid;
    grid-template-columns: 7em 1fr auto;
    gap: 0.6rem 1.2rem;
    align-items: baseline;
    padding: 1rem 0.4rem;
    color: var(--ink);
    text-decoration: none;
    transition: background 80ms ease;
}

.briefs-list a:hover {
    background: var(--soft);
}

.briefs-list .b-date {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.08em;
}

.briefs-list .b-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.briefs-list .b-role {
    color: #555;
    font-size: 0.92rem;
}

.briefs-list .b-arrow {
    color: var(--accent);
    font-weight: 800;
}

.empty-state {
    margin: 2rem 0;
    padding: 1.5rem;
    border: 1px dashed var(--soft-line);
    background: #fff;
    color: var(--muted);
    font-style: italic;
}

/* ─── BRIEF REQUEST FORM ─── */

.recon-form {
    display: grid;
    gap: 0.9rem;
    margin: 1rem 0 1.2rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--ink);
    background: #fff;
}

.recon-form label {
    display: grid;
    gap: 0.35rem;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
}

.recon-form label em {
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-left: 0.4em;
}

.recon-form input[type="text"],
.recon-form input[type="url"],
.recon-form input[type="password"],
.recon-form input[type="email"] {
    appearance: none;
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--paper);
    border: 1px solid var(--soft-line);
    border-radius: 0;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
    transition: border-color 80ms ease;
}

.recon-form input[type="text"]:focus,
.recon-form input[type="url"]:focus,
.recon-form input[type="password"]:focus,
.recon-form input[type="email"]:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.recon-form input::placeholder {
    color: #aaa;
}

.recon-form input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.recon-form select.recon-select {
    appearance: none;
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--paper);
    border: 1px solid var(--soft-line);
    border-radius: 0;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.recon-form button,
.recon-form a.btn {
    appearance: none;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    padding: 0.65rem 1.1rem;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 80ms ease, color 80ms ease;
}

.recon-form button:hover,
.recon-form a.btn:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.recon-form a.btn.secondary {
    background: transparent;
    color: var(--ink);
}

.recon-form a.btn.secondary:hover {
    background: var(--ink);
    color: var(--paper);
}

.cmd-output {
    margin: 0.4rem 0 0.4rem;
    padding: 0.9rem 1rem;
    background: var(--ink);
    color: #f7f3ea;
    border: 1px solid var(--ink);
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

.cmd-output::before {
    content: "$ ";
    color: var(--accent);
}

.cmd-help {
    margin: 0 0 1.6rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.cmd-help code {
    background: var(--soft);
    padding: 0.05em 0.3em;
    border: 1px solid var(--soft-line);
    font-size: 0.85rem;
}

/* ─── KEYS PANE ─── */

.keys-pane {
    margin: 0.4rem 0 0.2rem;
    border: 1px solid var(--soft-line);
    background: var(--paper);
    padding: 0;
}

.keys-pane > summary {
    cursor: pointer;
    padding: 0.7rem 0.9rem;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.keys-pane > summary::-webkit-details-marker { display: none; }
.keys-pane > summary::before {
    content: "▸";
    color: var(--accent);
    margin-right: 0.4em;
    display: inline-block;
    transition: transform 100ms ease;
}
.keys-pane[open] > summary::before { transform: rotate(90deg); }

.key-status {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--muted);
    font-size: 0.78rem;
}
.key-status.set { color: var(--accent); }

.keys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
    padding: 0.4rem 0.9rem 0.8rem;
}

.keys-grid label {
    display: grid;
    gap: 0.3rem;
}

.keys-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.9rem 0.9rem;
    border-top: 1px solid var(--soft-line);
    flex-wrap: wrap;
}

.keys-meta .checkbox {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 400;
    color: #444;
    font-size: 0.78rem;
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

/* ─── BRIEF STATUS + INLINE OUTPUT ─── */

.brief-status {
    margin: 0.8rem 0 0.4rem;
    padding: 0.8rem 1rem;
    border-left: 4px solid var(--accent);
    background: #fff;
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
}

.brief-output {
    margin: 1.2rem 0 2rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--ink);
    background: #fff;
}

.brief-output h1 { margin-top: 0; }

.recon-form button:disabled,
.recon-form a.btn:disabled,
.recon-form button.secondary {
    /* secondary form actions when there are multiple */
}

.recon-form button.secondary {
    background: transparent;
    color: var(--ink);
}
.recon-form button.secondary:hover {
    background: var(--ink);
    color: var(--paper);
}

.recon-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── PRINT ─── */

@media print {
    body { background: #fff; }
    .topbar, .share-bar, footer.site { display: none; }
    main { max-width: 100%; }
    h1, h2 { page-break-after: avoid; }
    .table-wrap { overflow: visible; border: none; }
}