/* The command center's look: a signing desk. The humans sit outside the company and sign off on what the agents bring
   them, so the page is a calm, cool desk of navy ink on blue-grey paper, and the one loud thing on it is an escalation,
   marked like a red stamp waiting for a signature. Tokens and rules: knowledge/command-center-design.md. */

:root {
    color-scheme: light dark;
    --paper: #e9edf2;
    --sheet: #f7f9fb;
    --ink: #1a2238;
    --muted: #556076;
    --rule: #c3cbd7;
    --link: #2740b8;
    --stamp: #c0262e;
    --stamp-wash: #f8e4e3;
    --amber: #8a5100;
    --green: #2c6638;
    --strip: #1a2238;
    --strip-ink: #e9edf2;
    --body: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
    --sign:
        Bahnschrift,
        "DIN Alternate",
        "Roboto Condensed",
        "Nimbus Sans Narrow",
        "Arial Narrow",
        "Franklin Gothic Medium",
        sans-serif;
    --code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #131a28;
        --sheet: #1a2233;
        --ink: #dfe5ee;
        --muted: #98a3b8;
        --rule: #2f3a4f;
        --link: #9db0ff;
        --stamp: #ff7a7f;
        --stamp-wash: #3a1d24;
        --amber: #e6aa45;
        --green: #7cc98f;
        --strip: #0d1320;
        --strip-ink: #dfe5ee;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.55 var(--body);
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
}

/* ---- The strip across the top --------------------------------------------------------------------------------- */

header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.4rem;
    align-items: baseline;
    padding: 0.7rem max(1.2rem, calc((100% - 72rem) / 2 + 1.2rem));
    background: var(--strip);
    color: var(--strip-ink);
    font-family: var(--sign);
    font-size: 1.05rem;
}

header a {
    color: var(--strip-ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

header a:hover {
    border-bottom-color: color-mix(in srgb, var(--strip-ink) 50%, transparent);
}

header nav {
    display: flex;
    flex-wrap: wrap;
    gap: inherit;
}

/* The section being shown. */
header a[aria-current="page"] {
    border-bottom-color: var(--strip-ink);
    font-weight: 600;
}

header strong a {
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    margin-right: 0.6rem;
}

header .who {
    margin-left: auto;
    opacity: 0.75;
    font-family: var(--body);
    font-size: 0.95rem;
}

header form {
    display: inline;
}

header button {
    background: transparent;
    color: var(--strip-ink);
    border-color: color-mix(in srgb, var(--strip-ink) 45%, transparent);
    padding: 0.1rem 0.7rem;
    font-size: 0.9rem;
}

header button:hover {
    border-color: var(--strip-ink);
}

/* ---- Type --------------------------------------------------------------------------------------------------------- */

main {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.6rem 1.2rem 5rem;
}

h1, h2, legend, summary, th {
    font-family: var(--sign);
    font-weight: 600;
}

h1 {
    font-size: 2.1rem;
    line-height: 1.15;
    margin: 0.4rem 0 1rem;
    letter-spacing: -0.005em;
}

h2 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 2.4rem 0 0.7rem;
}

main > p, .text {
    max-width: 75ch;
}

a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 2px;
}

code {
    font-family: var(--code);
    font-size: 0.88em;
}

.muted {
    color: var(--muted);
}

.text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

/* ---- Tables: the board, agents, mail, usage ------------------------------------------------------------------ */

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 0.45rem 0.9rem 0.45rem 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 0.95rem;
    border-bottom: 2px solid var(--ink);
}

tr:hover td {
    background: color-mix(in srgb, var(--sheet) 70%, transparent);
}

/* Code in a table cell (unit names, calendars) is one token; it never breaks across lines. */
td code {
    white-space: nowrap;
}

/* Dates and times stay on one line; tables scroll sideways on phones instead. */
td.when {
    white-space: nowrap;
}

td.num, th.num {
    text-align: right;
}

/* Whether a service or agent session runs (views/operations.ts): green when up, a stamp when it failed. */
.up {
    color: var(--green);
}

.down {
    color: var(--stamp);
    font-weight: 600;
}

td:last-child, th:last-child {
    padding-right: 0;
}

details {
    margin: 1.4rem 0;
}

summary {
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--muted);
}

summary:hover {
    color: var(--ink);
}

details[open] > summary {
    margin-bottom: 0.6rem;
}

/* ---- Task states: a quiet badge for each, and a stamp for the one that needs a human ----------------------------- */

.state {
    display: inline-block;
    padding: 0 0.5rem;
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--muted);
    font-family: var(--sign);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: nowrap;
}

.state.proposed {
    border-style: dashed;
}

.state.in-progress {
    border-color: var(--link);
    color: var(--link);
}

.state.blocked {
    border-color: var(--amber);
    color: var(--amber);
}

.state.done {
    border-color: transparent;
    color: var(--green);
    padding-left: 0;
}

.state.cancelled {
    border-color: transparent;
    padding-left: 0;
    text-decoration: line-through;
}

.state.escalated {
    border: 2px solid var(--stamp);
    outline: 1px solid var(--stamp);
    outline-offset: 1px;
    color: var(--stamp);
    font-weight: 700;
    transform: rotate(-2deg);
}

/* The dashboard's first section: what waits for the humans. */
section.waiting {
    margin: 1.6rem 0 0;
    padding: 0.2rem 1.2rem 1rem;
    border-left: 6px solid var(--stamp);
    background: var(--stamp-wash);
}

section.waiting h2 {
    margin-top: 0.8rem;
    color: var(--stamp);
}

section.waiting.empty {
    border-left-color: var(--rule);
    background: none;
}

section.waiting.empty h2 {
    color: var(--muted);
}

section.waiting tr:hover td {
    background: none;
}

/* ---- Notices --------------------------------------------------------------------------------------------------- */

.alert, .ok {
    margin: 1.2rem 0;
    padding: 0.7rem 1rem;
    border-left: 6px solid var(--stamp);
    background: var(--stamp-wash);
    max-width: 75ch;
}

.ok {
    border-left-color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, var(--paper));
}

.alert ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.alert > :first-child, .ok > :first-child {
    margin-top: 0;
}

.alert > :last-child, .ok > :last-child {
    margin-bottom: 0;
}

/* ---- Threads and mail -------------------------------------------------------------------------------------------- */

.entry {
    margin: 1.1rem 0;
    padding: 0.1rem 0 0.1rem 1rem;
    border-left: 3px solid var(--rule);
    max-width: 80ch;
}

.entry .meta {
    color: var(--muted);
    font-size: 0.92rem;
    margin-bottom: 0.15rem;
}

.entry .meta strong {
    color: var(--ink);
}

/* What the humans themselves said stands out from the agents' talk. */
.entry.human {
    border-left-color: var(--link);
    background: var(--sheet);
    padding: 0.5rem 1rem;
}

.entry.human .meta strong {
    color: var(--link);
}

/* ---- Markdown from the records (views/markdown.ts wraps it in .md) ----------------------------------------------- */

.md {
    overflow-wrap: anywhere;
    max-width: 80ch;
}

.md > :first-child {
    margin-top: 0;
}

.md > :last-child {
    margin-bottom: 0;
}

.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
    font-family: var(--sign);
    font-size: 1.05rem;
    margin: 1.1rem 0 0.4rem;
}

.md h1 {
    font-size: 1.25rem;
}

.md h2 {
    font-size: 1.15rem;
}

.md p, .md ul, .md ol, .md pre, .md blockquote, .md table {
    margin: 0.55rem 0;
}

.md ul, .md ol {
    padding-left: 1.5rem;
}

.md li + li {
    margin-top: 0.15rem;
}

.md code {
    padding: 0.05rem 0.3rem;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.md pre {
    overflow-x: auto;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--rule);
    background: var(--sheet);
}

.md pre code {
    padding: 0;
    background: none;
    overflow-wrap: normal;
}

.md blockquote {
    margin-left: 0;
    padding: 0 1rem;
    border-left: 3px solid var(--rule);
    color: var(--muted);
}

.md table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

.md th, .md td {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--rule);
}

.md th {
    border-bottom-width: 2px;
}

.md hr {
    border: 0;
    border-top: 1px solid var(--rule);
}

details > .md {
    margin-top: 0.4rem;
}

/* ---- Forms --------------------------------------------------------------------------------------------------- */

form.stack {
    display: grid;
    gap: 0.9rem;
    max-width: 44rem;
}

form.stack label {
    display: grid;
    gap: 0.25rem;
}

fieldset {
    border: 1px solid var(--rule);
    padding: 0.5rem 0.9rem 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
}

fieldset label, form.stack fieldset label {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

legend {
    padding: 0 0.3rem;
}

input[type="text"], input[type="password"], select, textarea {
    font: inherit;
    color: var(--ink);
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 0.35rem 0.55rem;
}

input[type="text"]:hover, input[type="password"]:hover, select:hover, textarea:hover {
    border-color: var(--muted);
}

textarea {
    width: 100%;
    min-height: 8rem;
    resize: vertical;
}

/* A whole Markdown file being edited (governance): monospace and wide enough for its 120-column lines, unwrapped. */
textarea.source {
    font: 0.85rem/1.5 var(--code);
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

form.stack:has(textarea.source) {
    max-width: calc(122ch * 0.85);
}

input[type="checkbox"] {
    accent-color: var(--link);
    width: 1rem;
    height: 1rem;
}

button {
    font: 600 1rem var(--sign);
    color: var(--paper);
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 2px;
    padding: 0.4rem 1.2rem;
    cursor: pointer;
    justify-self: start;
}

button:hover {
    background: var(--link);
    border-color: var(--link);
}

td button {
    font-size: 0.9rem;
    padding: 0.1rem 0.7rem;
    color: var(--stamp);
    background: transparent;
    border-color: var(--stamp);
}

td button:hover {
    color: var(--paper);
    background: var(--stamp);
    border-color: var(--stamp);
}

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

nav.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.2rem;
    margin: 1rem 0 1.2rem;
    font-family: var(--sign);
    color: var(--muted);
}

nav.tabs strong {
    color: var(--ink);
    border-bottom: 2px solid var(--ink);
}

/* ---- Phones --------------------------------------------------------------------------------------------------- */

@media (max-width: 40rem) {
    body {
        font-size: 15px;
    }

    header {
        gap: 0.2rem 1rem;
        padding: 0.6rem 0.9rem;
        font-size: 0.98rem;
    }

    header strong a {
        font-size: 1.1rem;
    }

    header .who {
        margin-left: 0;
    }

    main {
        padding: 1.1rem 0.9rem 4rem;
    }

    h1 {
        font-size: 1.7rem;
    }

    table {
        display: block;
        overflow-x: auto;
    }

    section.waiting {
        padding: 0.1rem 0.8rem 0.8rem;
        margin-left: -0.9rem;
        margin-right: -0.9rem;
    }
}