/* The minimum of CSS. Inflating this part is the likeliest way to spend time building the system
   instead of using it. */

:root {
    --bg: #14161a;
    --fg: #e6e6e6;
    --muted: #8b93a1;
    --line: #2a2f38;
    --accent: #7fb2ff;
    --warn: #e0a458;
    --err: #e06c75;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--bg);
}

nav a { color: var(--accent); margin-right: 1rem; text-decoration: none; }
nav a:hover { text-decoration: underline; }

/* The full width of the window, because the feed is a table whose last column is the transcript and
   every pixel of it goes there. Capping the page would only move that width into empty margins.
   The individual controls are capped instead — see .card and the inputs below — so a password box does
   not become a metre long on the same page. */
main { max-width: none; margin: 0; padding: 1rem 1.5rem; }

h1 { font-size: 1.25rem; margin: 0 0 1rem; }
h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }

.card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background: #181b21;
    max-width: 44rem;
}

.tag {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.tag.human { color: var(--accent); border-color: var(--accent); }
.tag.private { color: var(--warn); border-color: var(--warn); }
.tag.error { color: var(--err); border-color: var(--err); }
.tag.label { color: var(--muted); }

input[type=text], input[type=password] {
    width: 100%;
    max-width: 28rem;
    background: #10131a;
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.5rem;
    font: inherit;
}

button {
    background: #222833;
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    font: inherit;
}

button:hover { border-color: var(--accent); }
button.link { background: none; border: none; color: var(--accent); padding: 0; }

form.inline { display: inline; }

.searchbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
th { color: var(--muted); font-weight: normal; }

/* Only the feed earns the whole window. The gate's few columns and the device list would just be
   sparse if they took it. */
table:not(.feed) { max-width: 60rem; }

/* ---------------------------------------------------------------------------------------------------
   The feed.

   table-layout: fixed is what makes this work: the four narrow columns take exactly the widths named
   here and the transcript column takes everything left over. Without it the browser would size every
   column by its content, and one long recording would squeeze the timestamps into two lines.
   --------------------------------------------------------------------------------------------------- */
.feed { table-layout: fixed; }

.feed td { vertical-align: top; padding: 0.35rem 0.5rem; }
.feed tr:hover { background: #181b21; }
.feed tr.redacted { opacity: 0.45; }

/* tabular-nums keeps the timestamps in a straight column, which is most of what makes a list of a
   hundred of them scannable. */
.feed .when {
    width: 9.5rem;
    white-space: nowrap;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.feed .source { width: 5.5rem; color: var(--muted); }

.feed .len {
    width: 4rem;
    white-space: nowrap;
    text-align: right;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.feed .play { width: 2.75rem; text-align: center; }

/* Wrapping by words, and NOT white-space: pre-wrap.
   The transcript comes back from a model and may carry line breaks of its own; honouring them would
   break a sentence in the middle of the column for reasons that have nothing to do with the reader.
   Collapsed to spaces, the text simply flows. overflow-wrap catches the one case words cannot cover:
   a token longer than the column, which would otherwise push the table sideways. */
.feed .text {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.feed .text .tag { margin-right: 0.4rem; }

.playbtn {
    padding: 0.1rem 0.4rem;
    min-width: 2rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

.playbtn.playing { border-color: var(--accent); color: var(--accent); }

/* Driven by the buttons above and never seen. */
#player { display: none; }

.verdict { font-size: 1.05rem; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--line); }
.verdict.pass { border-color: #5fa96b; }
.verdict.fail { border-color: var(--err); }

.bar { background: var(--accent); height: 0.6rem; border-radius: 3px; display: inline-block; vertical-align: middle; }

.qr { background: #fff; padding: 0.75rem; border-radius: 8px; display: inline-block; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; letter-spacing: 0.15em; }
.muted { color: var(--muted); }
.pager { display: flex; gap: 1rem; margin-top: 1rem; }