/* One stylesheet for every page this server serves: the connection flow, the
   landing page, and the legal pages.

   They used to disagree — the landing page ran one blue, the legal pages another
   with amber callouts, the playground had its own file. A consent screen that
   looks like a different site than the page that sent you there is a phishing
   signal, not a style inconsistency, so the flow and the site share one system.

   The values below are NOT invented. They are the Global Database design system,
   taken from `src/assets/scss/helpers/_base.scss` in the platform front end, so
   these pages and platform.globaldatabase.com are recognisably the same product.

   Light only, deliberately. globaldatabase.com is a light, corporate site; a dark
   variant here would make the sign-in screen look like somewhere else at exactly
   the moment a person is deciding whether to trust it. Every colour is stated
   explicitly rather than inherited, so the pages hold on any host background.

   Inter is served from this origin. The Content-Security-Policy in main.py is
   `default-src 'self'`, which blocks Google Fonts outright — the landing page
   asked for Inter for months and never got it. The woff2 files are the same ones
   the platform ships, copied into /static/fonts. */

@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* --- Global Database design system --------------------------------- */
    /* $primary-* — the brand blue, unchanged from the platform. */
    --brand:        #077be7;
    --brand-hover:  #066fd0;
    --brand-active: #0662b9;
    --brand-dark:   #055cad;
    --brand-wash:   #e6f2fd;
    --brand-wash-2: #daebfb;

    /* $ink-* — text. */
    --ink:          #1b232c;
    --ink-soft:     #4e637e;
    /* 4.96:1 on white. The previous #6b7d94 measured 4.26:1 and failed the
       4.5:1 minimum for body text — and it is the colour of every card
       subtitle on the site. */
    --ink-mute:     #5d7188;
    --ink-faint:    #afb9c5;

    /* $cloud-* — surfaces. */
    --surface:      #ffffff;
    --surface-2:    #f9fafb;
    --surface-3:    #ebeff4;
    --paper:        #f9fafb;

    /* $borders-* */
    --edge:         #ced6e1;
    --edge-soft:    #e9edf2;

    /* Semantic, used only for status — never as decoration. */
    --ok:           #1a9e73;
    --ok-wash:      #ecfbf5;
    --ok-edge:      #c3f1e1;
    --warn:         #bc8635;
    --warn-wash:    #fff7ed;
    --warn-edge:    #fde7c6;
    --stop:         #cd2a2a;
    --stop-wash:    #fceaea;
    --stop-edge:    #f7bfbf;

    /* $border-* radii. */
    /* Two-part shadows: a tight dark edge for crispness, a wider soft one
       for atmosphere. Elevation is the only thing they encode. */
    --shadow-sm:    0 1px 2px rgba(27, 35, 44, .06);
    --shadow-md:    0 1px 2px rgba(27, 35, 44, .04), 0 8px 16px -6px rgba(27, 35, 44, .10);
    --shadow-lg:    0 1px 3px rgba(27, 35, 44, .05), 0 16px 32px -12px rgba(27, 35, 44, .14);

    --radius:       12px;
    --radius-sm:    8px;
    --radius-xs:    6px;

    --shell:        1080px;
    --measure:      68ch;

    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

/* ---------- type ---------- */

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.24;
    letter-spacing: -0.018em;
    font-weight: 700;
    text-wrap: balance;
}

h1 { font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.45rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.85vw, 1.55rem); }
h3 { font-size: 1.08rem; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

:where(a, button, input, select, summary):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

strong { font-weight: 600; }

/* Mono is the product's own voice: endpoints, ids, codes, tool names. */
code, kbd, samp {
    font-family: var(--mono);
    font-size: 0.88em;
    background: var(--surface-2);
    border: 1px solid var(--edge-soft);
    border-radius: var(--radius-xs);
    padding: 0.1em 0.36em;
}

pre {
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.6;
    background: var(--surface-2);
    border: 1px solid var(--edge-soft);
    border-radius: var(--radius-sm);
    padding: 16px 16px;
    overflow-x: auto;
    margin: 0 0 1.25rem;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* Uppercase mono label. Used where a line names a category, never for flourish. */
.eyebrow {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 0.7rem;
}

.lede { font-size: 1.06rem; line-height: 1.6; color: var(--ink-soft); }
.muted { color: var(--ink-mute); }
.small { font-size: 0.86rem; }

/* ---------- layout ---------- */

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.shell-narrow { max-width: 720px; }

/* The flow's screens.
   A page, not a floating card: the same top bar and footer as the rest of the
   site, with the card centred in what is left. Without them a single small card
   sits in an empty field on a desktop screen, which reads as an unfinished page
   at exactly the moment someone is deciding whether to trust it. */
.authpage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    background-image: radial-gradient(1000px 520px at 50% 0, var(--brand-wash), transparent 62%);
    background-repeat: no-repeat;
}

.stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Breathing room top and bottom, but the card stays optically centred rather
       than pinned to the middle of a very tall viewport. */
    padding: 64px 20px;
}

.stage-inner { width: 100%; max-width: 456px; }

.prose { max-width: var(--measure); }
.prose h2 { margin: 2.2rem 0 0.6rem; }
.prose h2:first-of-type { margin-top: 1.4rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.prose li { margin-bottom: 0.4rem; }

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

.topbar { border-bottom: 1px solid var(--edge-soft); background: var(--surface); }

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 64px;
}

.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.wordmark img { height: 28px; width: auto; }
.wordmark span { font-weight: 600; letter-spacing: -0.012em; }

.topbar nav { display: flex; gap: 24px; font-size: 0.9rem; }
.topbar nav a { color: var(--ink-soft); text-decoration: none; }
.topbar nav a:hover { color: var(--brand); }

.sitefoot {
    border-top: 1px solid var(--edge-soft);
    margin-top: 64px;
    padding: 24px 0 40px;
    color: var(--ink-mute);
    font-size: 0.86rem;
    background: var(--surface);
}
.sitefoot a { color: var(--ink-soft); text-decoration: none; }
.sitefoot a:hover { color: var(--brand); }
.sitefoot-inner { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }

/* ---------- the signature: a connection, and its state ---------- */

/* Two marks with three dots between them. The dots are not decoration — they
   report where the connection is: waiting, in progress, joined. It is the one
   thing this flow is about, so it is the one thing that moves. */
.lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}

.lockup img { height: 38px; width: auto; }

.lockup-dots { display: flex; gap: 5px; }

.lockup-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ink-faint);
    display: block;
}

.lockup-joined .lockup-dots i { background: var(--brand); }

.lockup-working .lockup-dots i { animation: pulse 1.1s ease-in-out infinite; }
.lockup-working .lockup-dots i:nth-child(2) { animation-delay: .15s; }
.lockup-working .lockup-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes pulse {
    0%, 100% { background: var(--ink-faint); }
    50%      { background: var(--brand); }
}

/* Stands in for the other party's logo, which a strict img-src cannot fetch from
   another origin. A letter beats an empty square, and beats widening the CSP. */
.lockup-peer {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: var(--brand-wash);
    border: 1px solid var(--brand-wash-2);
    color: var(--brand);
    font-size: 1.12rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* ---------- surfaces ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--edge-soft);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow-md);
}

.card > :last-child { margin-bottom: 0; }
.card h1 { font-size: 1.5rem; margin-bottom: 8px; }
.card .subtitle { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 24px; }

.panel {
    background: var(--surface);
    border: 1px solid var(--edge-soft);
    border-radius: var(--radius);
    padding: 24px;
}

/* ---------- controls ---------- */

.actions { display: flex; flex-direction: column; gap: 10px; }
.actions-row { flex-direction: row; flex-wrap: wrap; }
.actions-row .btn { width: auto; }

.btn {
    width: 100%;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); color: #fff; }
.btn-primary:active { background: var(--brand-active); }

.btn-secondary { background: var(--surface); color: var(--ink-soft); border-color: var(--edge); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--ink-faint); color: var(--ink); }

.btn svg { transition: transform .15s ease; }
.btn-primary:hover svg { transform: translateX(2px); }

/* ---------- messages ---------- */

.banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin: 0 0 24px;
    font-size: 0.9rem;
    line-height: 1.55;
    background: var(--stop-wash);
    border: 1px solid var(--stop-edge);
    color: var(--stop);
}
.banner svg { flex-shrink: 0; margin-top: 2px; }
.banner-note { background: var(--warn-wash); border-color: var(--warn-edge); color: var(--warn); }

.note {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ink-soft);
    background: var(--brand-wash);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin: 0 0 24px;
}

.identity {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--edge-soft);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 0.92rem;
    color: var(--ink-soft);
    word-break: break-word;
}
.identity svg { color: var(--ink-faint); flex-shrink: 0; }

/* The generated client mark. Boxed so it reads as a mark rather than as loose
   squares, at the same size as the icon it sits beside. */
.identity .mark {
    width: 22px;
    height: 22px;
    padding: 2px;
    border-radius: var(--radius-xs);
    background: var(--surface);
    border: 1px solid var(--edge-soft);
    box-sizing: content-box;
}

/* Stacked rows join into one block: the shared border reads as a single panel of
   facts rather than a stack of unrelated boxes. */
.identity + .identity {
    margin-top: -24px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}
.identity:has(+ .identity) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 24px;
}
.identity strong { color: var(--ink); font-weight: 600; }

/* ---------- lists ---------- */

.grants { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.grants li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.91rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.grants svg { color: var(--brand); flex-shrink: 0; margin-top: 3px; }

/* ---------- status, in the registry sense ---------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.pill-ok   { background: var(--ok-wash);   color: var(--ok);   border-color: var(--ok-edge); }
.pill-flag { background: var(--warn-wash); color: var(--warn); border-color: var(--warn-edge); }

/* ---------- status screens ---------- */

.status { text-align: center; }
.status-mark {
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    color: #fff;
    background: var(--brand);
}
.status-mark-quiet { background: var(--surface-2); color: var(--ink-faint); border: 1px solid var(--edge-soft); }
.status h1 { font-size: 1.18rem; }
.status p { color: var(--ink-mute); font-size: 0.93rem; }
.status .actions { margin-top: 24px; }

.progress { height: 3px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 20px; }
.progress i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left; animation: fill 1.6s ease-out forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- legal / footer text ---------- */

/* ---------- form fields ---------- */

label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}

.field { margin-bottom: 16px; }

.field input {
    width: 100%;
    padding: 12px 16px;
    font: inherit;
    font-size: 0.97rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field input::placeholder { color: var(--ink-faint); }

.field input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-wash);
}

/* A verification code is read off one screen and typed on another, so it gets the
   widest, most unambiguous setting on the page: tabular figures so no digit is
   narrower than its neighbour, and enough tracking that a mistyped character is
   visible before Submit rather than after. */
.field input.code {
    font-family: var(--mono);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.42em;
    /* Tracking adds space after the last glyph too; the padding compensates so the
       digits sit centred rather than pushed left. */
    text-indent: 0.42em;
    text-align: center;
    padding: 14px 16px;
}

/* The second way in, under the primary action and separated from it, so the two
   read as a choice rather than as one button with an afterthought. */
.alt-action {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--edge-soft);
    position: relative;
}

/* "or" sitting on the divider — the two actions are alternatives, and a bare rule
   reads as a section break instead. */
.alt-action::before {
    content: "or";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 8px;
    background: var(--surface);
    color: var(--ink-faint);
    font-size: 0.78rem;
}

.aside {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-mute);
}

.legal {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--edge-soft);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--ink-mute);
}
.legal a { color: var(--ink-soft); text-decoration: underline; }
.legal a:hover { color: var(--brand); }

.byline { text-align: center; margin: 24px 0 0; font-size: 0.82rem; color: var(--ink-faint); }
.byline a { color: var(--ink-mute); text-decoration: none; }
.byline a:hover { color: var(--brand); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--edge-soft); border-radius: var(--radius-sm); margin: 0 0 1.25rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--edge-soft); vertical-align: top; }
thead th {
    background: var(--surface-2);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- motion + small screens ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .progress i { transform: scaleX(1); }
    .lockup-working .lockup-dots i { background: var(--brand); }
}

@media (max-width: 480px) {
    .stage { padding: 24px 16px; }
    .card { padding: 24px 20px; }
    .shell { padding: 0 16px; }
    .topbar nav { gap: 16px; font-size: 0.85rem; }
}


/* The footer on a flow page carries no margin: the stage above it already owns
   the space, and a margin would push it off a short viewport. */
.authpage .sitefoot { margin-top: 0; padding: 20px 0; background: transparent; border-top-color: var(--edge-soft); }
.authpage .topbar { background: transparent; border-bottom-color: transparent; }