/* aero-logs — the palette is the one phase 1's status page established. */
:root {
    --bg:        #0b1220;
    --panel:     #111a2e;
    --panel-2:   #0e1526;
    --line:      #1a2540;
    --text:      #e2e8f7;
    --muted:     #667799;
    --accent:    #4d8ef7;
    --debug:     #667799;
    --info:      #4d8ef7;
    --warn:      #d79a2b;
    --error:     #e0574f;
    --untrusted: #b06a3b;
}

* { box-sizing: border-box; }

body {
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    /* Room for the fixed bottom bar, plus a little, so the last row of a
       100-row table is not pinned underneath it. */
    padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px) + .5rem);
}

a { color: var(--accent); }
a:hover { color: #7fb0ff; }

/* --- chrome --------------------------------------------------------------- */

header.top {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .85rem 1.25rem;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
}
header.top h1 { font-size: 1rem; margin: 0; letter-spacing: .01em; }
header.top .env {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
}
header.top nav { margin-left: auto; display: flex; gap: 1rem; align-items: baseline; }
header.top nav form { display: inline; }

main { padding: 1.25rem; max-width: 1500px; margin: 0 auto; }

/* --- panels, notices ------------------------------------------------------ */

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.notice, .error, .banner {
    border-radius: 6px;
    padding: .6rem .85rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.notice { background: #12253d; border-color: #1d3c61; }
.error  { background: #33191b; border-color: #5c2a2c; color: #f2c3c0; }
.banner { background: #2b1f13; border-color: #52381f; color: #e8c79b; }

/* --- filters -------------------------------------------------------------- */

form.filters {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
form.filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

input, select, button {
    font: inherit;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: .4rem .55rem;
}
input:focus, select:focus, button:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button { cursor: pointer; background: #1b2942; }
button:hover { background: #24365a; }
button.primary { background: var(--accent); border-color: var(--accent); color: #05101f; font-weight: 600; }
button.primary:hover { background: #6ba0f9; }
button.link { background: none; border: none; color: var(--accent); padding: 0; }
button.danger { background: #3a1d1f; border-color: #5c2a2c; }

/* --- table ---------------------------------------------------------------- */

table.entries { width: 100%; border-collapse: collapse; }
table.entries th, table.entries td {
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.entries th {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}
table.entries th a { color: var(--muted); text-decoration: none; }
table.entries th a:hover, table.entries th a.on { color: var(--text); }
table.entries tr:hover td { background: #131e34; }
td.when { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
td.src  { white-space: nowrap; }
td.msg  { max-width: 0; width: 60%; }

.title { font-weight: 600; }
.body  { color: #c3cde4; margin-top: .2rem; overflow-wrap: anywhere; }
.body pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-2);
    border: 1px solid var(--line); border-radius: 5px; padding: .5rem; margin: .35rem 0; }
.body code { background: var(--panel-2); border-radius: 3px; padding: .05rem .3rem; }

.badge {
    display: inline-block;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
    padding: .12rem .4rem;
    border-radius: 3px;
    border: 1px solid currentColor;
}
.lv-debug { color: var(--debug); }
.lv-info  { color: var(--info); }
.lv-warn  { color: var(--warn); }
.lv-error { color: var(--error); }
.untrusted { color: var(--untrusted); }

.meta { color: var(--muted); font-size: .75rem; }
.drift { color: var(--warn); }

/* --- pager ---------------------------------------------------------------- */

.pager { display: flex; gap: .75rem; align-items: center; margin-top: 1rem; }
.pager .spacer { flex: 1; }

/* --- narrow forms (login, setup, security) -------------------------------- */

.narrow { max-width: 26rem; margin: 3.5rem auto; }
.narrow.wide { max-width: 44rem; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.field label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hint { color: var(--muted); font-size: .78rem; }

.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; margin: .75rem 0; }
.codes span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel-2);
    border: 1px solid var(--line); border-radius: 4px; padding: .35rem .5rem; letter-spacing: .06em; }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem;
    letter-spacing: .12em; background: var(--panel-2); border: 1px solid var(--line);
    border-radius: 5px; padding: .5rem .6rem; display: inline-block; }


/* --- bottom bar ----------------------------------------------------------- */

/* Fixed rather than trailing the content: the version has to be readable
   without paging to the end of a long table, and it is what a deploy is
   verified by. body reserves the height above. */
footer.strip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: .8rem;
    height: calc(2.25rem + env(safe-area-inset-bottom, 0px));
    padding: 0 1.25rem env(safe-area-inset-bottom, 0px);
    background: var(--panel-2);
    border-top: 1px solid var(--line);
}

footer.strip .version {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem;
    letter-spacing: .04em;
    color: var(--muted);
}

/* Only rendered off production, so it is meant to be noticed. */
footer.strip .env {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--warn);
}