/* app/static/signal.css — SIGNAL "Terminal" theme
   Bloomberg-terminal style: near-black desk, amber accents, monospace data. */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #0c0e11;
    --panel: #101318;
    --text: #e8e6e1;
    --amber: #f5a623;
    --blue: #4da3ff;
    --gray: #6b7280;
    --gray-dim: #565d68;
    --rule: #2a2e35;
    --rule-dim: #1a1d22;
    --mono: Consolas, "SF Mono", "Courier New", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body { font-family: var(--sans); background: var(--bg); color: var(--text); }

/* ---------- Top bar ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-bottom: 2px solid var(--amber);
    background: var(--panel);
}
.tb-mark { width: 27px; height: 27px; flex: none; }
.tb-word {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.32em;
    color: #ffffff;
}
.tb-page {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--amber);
    text-align: right;
}

/* ---------- Utility row ---------- */
.utility {
    max-width: 800px;
    margin: 0 auto;
    padding: 14px 24px 0;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--gray);
}
.utility a { color: var(--gray); text-decoration: none; }
.utility a:hover { color: var(--amber); }

/* ---------- Sections ---------- */
main { max-width: 800px; margin: 0 auto; padding: 32px 24px 40px; }

.sec { margin-bottom: 46px; }
.sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 7px;
}
.sec-name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--amber);
    text-transform: uppercase;
}
.sec-aud {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--gray);
    text-transform: uppercase;
}
.sec-purpose {
    font-size: 11px;
    color: var(--gray);
    letter-spacing: 0.04em;
    padding: 6px 0 2px;
}

/* ---------- Rows ---------- */
.row { display: flex; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--rule-dim); }
.row .idx {
    font-family: var(--mono);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--amber);
    padding-top: 1px;
    flex: none;
}
.row h3 { font-size: 15.5px; font-weight: 600; line-height: 1.45; }
.row h3 a { color: var(--text); text-decoration: none; }
.row h3 a:hover { color: var(--amber); }
.row .meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--gray-dim);
    margin-top: 5px;
    text-transform: uppercase;
}

.quiet { color: var(--gray); font-size: 14px; padding: 16px 0; }
.loading, .error {
    text-align: center;
    padding: 70px 0;
    color: var(--amber);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
}
.error { color: #e06a5e; }

/* ---------- Footer ---------- */
footer {
    max-width: 800px;
    margin: 0 auto;
    padding: 16px 24px 36px;
    border-top: 1px solid var(--rule-dim);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    color: var(--gray-dim);
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 540px) {
    .topbar { padding: 12px 16px; flex-wrap: wrap; }
    .tb-page { flex-basis: 100%; margin-left: 39px; text-align: left; margin-top: 2px; }
    main, .utility, footer { padding-left: 16px; padding-right: 16px; }
    .row h3 { font-size: 14.5px; }
}