/*
  The whole stylesheet for this host, served from its own wwwroot. Element selectors almost
  throughout, so pages carry markup rather than class vocabulary; the two class hooks that do appear
  are the ones the framework generates for a form (.validation-message) and the single refusal line a
  page can show (.rejection).

  Nothing is fetched from a CDN. An admin sign-in page that reaches a third party to render tells that
  third party when the operator signs in, and stops rendering properly when they have an outage — for
  two forms, neither is worth it. System fonts for the same reason: no request leaves this host.
*/

/*
  Palette drawn from the RelayRobin mark, sampled from the artwork rather than transcribed:
  dark brown #521607 is 53% of it, light brown #79210B 22%, orange #DC491E 13%, red #CA3411 9%.
  The interface uses the dark brown and the red only. Orange and light brown are left to the mark
  itself, so it stays the most saturated thing on the page — the role it plays in the artwork.

  --accent is only ever FILLED (button background, link, focus ring); --alarm only ever OUTLINED
  or set as text. That split is what lets a warm accent sit beside a warm alarm without a
  destructive action ever resembling a routine one: they differ in shape before they differ in
  hue. Preserve it if you add a rule — a filled alarm would undo the whole arrangement.
*/
:root {
    --page: #fdfbfa;
    --ink: #23120c;
    --muted: #6b5a53;
    --line: #e0d5d0;
    --field: #ffffff;
    --accent: #521607;
    --accent-ink: #ffffff;
    --alarm: #ca3411;
}

@media (prefers-color-scheme: dark) {
    /*
      The brand browns are unreadable on a dark ground, so the accent lifts to a tint derived from
      the orange and takes dark-brown ink instead of white. The alarm lifts too, and is pushed
      further toward red so the two stay tellable apart at small sizes.
    */
    :root {
        --page: #1a1210;
        --ink: #f0e6e2;
        --muted: #a89690;
        --line: #3a2a25;
        --field: #221816;
        --accent: #e2734b;
        --accent-ink: #2a0b03;
        --alarm: #ff8a73;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

header {
    border-bottom: 1px solid var(--line);
    padding: 0.9rem 1.25rem;
}

header p {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/*
  The mark sits beside the console's own name rather than replacing it. Both hosts render the same
  mark, so they read as one product; the text beside it is what tells an operator which of the two
  they are looking at, and only one of them can drop a database.

  Height is set and width left auto so the aspect ratio comes from the file. The asset ships at
  128px tall for a 26px render, which keeps it sharp on a high-density display.
*/
.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.brand img {
    height: 26px;
    width: auto;
    display: block;
}

/*
  The full lockup, wordmark and tagline included, appears only on sign-in and first-run setup —
  the two screens with room for it and a reason to introduce the product. Every other screen gets
  the mark above.

  Sized from the viewport rather than a fixed height, capped so a wide screen does not turn the
  product mark into the whole page: 300px is roughly 4.7x the mark's old 62px-tall render, which is
  the scale a screen with nothing else competing for attention can afford. Width drives the box and
  height is left auto, same reasoning as the header mark above, just at the other end of the range.
*/
.lockup {
    display: block;
    width: min(70vw, 300px);
    height: auto;
    margin: 0 auto 1.5rem;
}

/*
  The version banner MainLayout renders once per screen, Setup and Login included — see MainLayout's
  own remarks. Fixed to the corner rather than flowing with the page, so it never reshuffles content
  above it and stays put while that content scrolls; pointer-events: none so it can never sit in
  front of a control and swallow the click meant for that control.
*/
.version-badge {
    position: fixed;
    right: 0.75rem;
    bottom: 0.5rem;
    color: var(--muted);
    font-size: 0.75rem;
    pointer-events: none;
}

/*
  Each destination gets its own padded, rounded hit target rather than sitting bare on the header's
  background — the underlined-anchor look a plain link gives by default reads as body text, not as
  navigation. flex-wrap keeps the bar from overflowing a narrow viewport: it drops to a second line
  instead of forcing a horizontal scroll.
*/
header nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.6rem;
    font-size: 0.95rem;
}

header nav a {
    border-radius: 6px;
    color: var(--muted);
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    text-decoration: none;
}

header nav a:hover,
header nav a:focus-visible {
    background: var(--line);
    color: var(--ink);
}

/* NavLink's own class, applied to whichever link matches the current URL — see the nav's remarks
   above on why each link is a NavLink rather than a plain <a>. */
header nav a.active {
    background: var(--accent);
    color: var(--accent-ink);
}

header nav span {
    margin-left: auto;
    color: var(--muted);
    padding: 0.4rem 0.2rem;
}

/* Sign out is an action, not a destination to browse to — the outline sets it apart from the links
   before it so it never reads as just one more screen to pick. */
header nav [data-testid="nav-sign-out"] {
    border: 1px solid var(--line);
}

main {
    margin: 0 auto;
    max-width: 26rem;
    padding: 2.5rem 1.25rem 4rem;
}

/* A page whose content is a table needs the wide column every console list gets — the agent list,
   the agent detail and the invites list among them — never the narrow one sized for a sign-in or
   setup form. No class hook: the table's own presence is the signal, so a page opts in by what it
   renders rather than by a marker added to it. */
main:has(table) {
    max-width: 60rem;
}

h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

p {
    color: var(--muted);
    margin: 0 0 1.25rem;
}

strong {
    color: var(--ink);
}

a {
    color: var(--accent);
}

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

th,
td {
    padding: 0.55rem 0.65rem;
    text-align: left;
}

th {
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-weight: 600;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

/* :not([type="checkbox"]) — the requests screen's own per-row/bulk select checkboxes are the first
   checkboxes this console has ever rendered; without the exclusion they would inherit width: 100% and
   stretch across their table cell. The agent console's own RoutesPage.razor has checkboxes with this
   identical, still-open problem (a whole-branch review flagged it as a minor, out of this change's own
   scope) — excluded here from the start rather than shipped the same way. */
input:not([type="checkbox"]) {
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: inherit;
    font: inherit;
    margin-bottom: 1rem;
    padding: 0.55rem 0.65rem;
    width: 100%;
}

input:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button {
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--accent-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    margin-top: 0.5rem;
    padding: 0.6rem 1rem;
}

/* Framework-generated, on every field a DataAnnotations rule rejected. */
.validation-message {
    color: var(--alarm);
    font-size: 0.85rem;
    margin: -0.75rem 0 1rem;
}

/* The one refusal a page shows. Deliberately the same treatment whatever caused it — the pages
   themselves only ever have one message to put here. */
.rejection {
    border: 1px solid var(--alarm);
    border-radius: 6px;
    color: var(--alarm);
    margin-bottom: 1.5rem;
    padding: 0.65rem 0.8rem;
}