/* dignactl's look is digna's: the tokens below are the dashboard's own
   (navy from the logo, the blue its actions wear, its status inks), so the
   two read as one product. One family, Instrument Sans, at 400/500/600;
   nothing is 700. */

@font-face {
    font-family: "Instrument Sans";
    src: url("/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --ground: #FFFFFF;
    --paper: #FFFFFF;
    --sunk: #F4F6F8;
    --text: #1A2430;
    --text-2: #5D6A7A;
    --divider: #E1E5EA;

    --primary: #002C6B;
    --action: #2563EB;
    --action-hover: #1D4FBF;
    --action-ink: #FFFFFF;
    --action-soft: #DBE7FC;

    --ok: #0F7A46;
    --warn: #9A5B00;
    --bad: #C0272D;

    --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* The sign-in page's gray is the ground; cards and inputs sit a step
           above it. */
        --ground: #222830;
        --paper: #282E37;
        --sunk: #2F3640;
        --text: #E8EDF3;
        --text-2: #8B97A6;
        --divider: #353E48;

        --primary: #8FB6F0;
        --action: #93B4FB;
        --action-hover: #7098E8;
        --action-ink: #191F25;
        --action-soft: #283957;

        --ok: #4ADE80;
        --warn: #F0B23C;
        --bad: #FF7A75;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

html { font: 400 14px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
body { margin: 0; background: var(--ground); color: var(--text); }

a { color: var(--action); text-underline-offset: 2px; }
a:hover { color: var(--action-hover); }

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

code, pre { font: 12.5px/1.45 var(--mono); }

/* ---- Buttons and fields --------------------------------------------- */

button, input, select {
    font: inherit;
    color: inherit;
    background: var(--paper);
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 6px 12px;
}
button { cursor: pointer; font-weight: 500; }
button:hover { border-color: var(--text-2); }
input:focus, select:focus { border-color: var(--action); outline: none; }

.button {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid var(--action);
    background: var(--action);
    color: var(--action-ink);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.button:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-ink); }
.button.block { display: flex; width: 100%; }
.button.small { padding: 6px 12px; font-size: 0.875rem; }

/* ---- The app's shell ------------------------------------------------- */

.topbar {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 24px;
    background: var(--ground);
    color: var(--text);
    border-bottom: 1px solid var(--divider);
}
.topbar .brand { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; }
/* The logo is white; on the light ground it goes black. */
.topbar .brand img { height: 26px; width: auto; display: block; filter: invert(1); }
@media (prefers-color-scheme: dark) {
    .topbar .brand img { filter: none; }
}
.topbar .brand span { font-weight: 500; opacity: 0.75; padding-left: 10px; border-left: 1px solid var(--divider); }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a { color: var(--text-2); text-decoration: none; padding: 6px 10px; border-radius: 6px; font-weight: 500; }
.topbar nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.topbar nav a.on { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.topbar .me { margin-left: auto; display: flex; gap: 12px; align-items: center; color: var(--text-2); }

main.page { padding: 28px 24px; max-width: 1240px; margin: 0 auto; }

h1 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.018em; margin: 0 0 6px; }
h2 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin: 24px 0 8px; }
.note { color: var(--text-2); margin: 0 0 18px; }
.muted { color: var(--text-2); }
.error { color: var(--bad); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }

/* Cards read as cards through their hairline, not a shadow. */
.scroll { overflow-x: auto; background: var(--paper); border: 1px solid var(--divider); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--divider); vertical-align: top; white-space: nowrap; }
th { color: var(--text-2); font-weight: 600; font-size: 0.75rem; background: var(--sunk); }
tr:last-child td { border-bottom: 0; }
td.wrap { white-space: normal; word-break: break-word; }

pre { background: var(--paper); border: 1px solid var(--divider); border-radius: 10px; padding: 14px;
      overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

.state-succeeded { color: var(--ok); }
.state-failed, .state-interrupted { color: var(--bad); }
.state-running, .state-queued { color: var(--warn); }

form.inline { display: inline; }
.secret-once { border: 1px solid var(--action); background: var(--action-soft); border-radius: 10px; padding: 14px; margin-bottom: 18px; }
.secret-once pre { margin: 8px 0 0; }

/* ---- Sign-in: the dashboard's split page ------------------------------ */

.split { display: flex; min-height: 100vh; }
.split .brand-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 56px 64px;
    background: var(--ground);
    color: var(--text);
}
/* The logo is white; on the light ground it goes black. */
.split .brand-panel img { height: 56px; width: auto; max-width: 100%; align-self: flex-start; object-fit: contain; display: block; filter: invert(1); }
@media (prefers-color-scheme: dark) {
    .split .brand-panel img { filter: none; }
}
.split .brand-panel .claim { font-size: 2.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; max-width: 480px; margin: 0; }
.split .brand-panel .claim span { display: block; font-size: 1.125rem; font-weight: 400; letter-spacing: 0; opacity: 0.7; margin-top: 16px; }
.split .brand-panel footer { border-top: 1px solid var(--divider); padding-top: 24px; font-size: 0.75rem; }
.split .brand-panel footer p { margin: 0; opacity: 0.6; }
.split .brand-panel footer a { color: inherit; font-weight: 600; opacity: 1; }
.split .form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--ground);
}
.split .form { width: 100%; max-width: 440px; }
.split .form h1 { font-size: 2.25rem; font-weight: 500; letter-spacing: -0.025em; margin: 0 0 8px; }
.split .form .lede { font-size: 1.125rem; color: var(--text-2); margin: 0 0 40px; }
.split .form .notice { border: 1px solid var(--divider); border-radius: 8px; padding: 10px 12px; margin: 0 0 20px; }
.split .form .notice.error { color: var(--bad); border-color: currentColor; }
.split .form .fine { color: var(--text-2); font-size: 0.8125rem; margin: 20px 0 0; }

@media (max-width: 800px) {
    .split { flex-direction: column; }
    .split .brand-panel { flex: none; padding: 28px 24px; gap: 0; }
    .split .brand-panel .claim, .split .brand-panel footer { display: none; }
    .split .brand-panel img { height: 36px; }
    .split .form-panel { align-items: flex-start; padding: 32px 24px; }
    .split .form h1 { font-size: 1.875rem; }
}