/* Paragon, the public site. The designer's palette, laid out for reading rather than for work:
   one column, wider measure, no chrome competing with the page. */

:root {
    color-scheme: dark;

    --accent: #60a5fa;
    --accent-ink: #93c5fd;
    --accent-soft: rgba(96, 165, 250, .14);
    --gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #38bdf8 100%);

    --page-bg: #0a0b12;
    --surface: #151725;
    --surface-2: #191c2c;
    --sunken: #10121d;
    --border: rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .16);

    --ink: #e9ebf7;
    --ink-muted: #a2a7c0;
    --ink-faint: #767c96;

    --pdf: #ff5449;
    --word: #41a5ee;
    --powerpoint: #ed6c47;

    --radius: .75rem;
    --radius-lg: 1rem;

    --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --display: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
    --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--ink);
    font: 16px/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.shell { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }

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

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(13, 14, 24, .82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.topbar-inner { display: flex; align-items: center; gap: 2rem; height: 60px; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--ink);
    font: 600 1.05rem/1 var(--display);
    letter-spacing: -.01em;
}

.brand:hover { text-decoration: none; }

.topbar nav { margin-left: auto; display: flex; gap: 1.5rem; }
.topbar nav a { color: var(--ink-muted); font-size: .94rem; }
.topbar nav a:hover, .topbar nav a.current { color: var(--ink); text-decoration: none; }

.footer { border-top: 1px solid var(--border); margin-top: 5rem; padding: 2rem 0; }

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    color: var(--ink-faint);
    font-size: .87rem;
}

.footer nav { display: flex; gap: 1.25rem; }

/* ---------------------------------------------------------------- landing */

.hero { padding: 5rem 0 3.5rem; }

.hero h1 {
    margin: 0 0 1.25rem;
    max-width: 18ch;
    font: 600 clamp(2.2rem, 5vw, 3.4rem)/1.1 var(--display);
    letter-spacing: -.025em;
}

.hero p {
    margin: 0 0 2rem;
    max-width: 58ch;
    font-size: 1.15rem;
    color: var(--ink-muted);
}

.cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .95rem;
}

.button:hover { text-decoration: none; }
.button--primary { background: var(--gradient); color: #fff; }
.button--primary:hover { filter: brightness(1.08); }

.button--quiet {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--ink);
}

.button--quiet:hover { border-color: var(--accent); }

.section { padding: 3.5rem 0; }

.section > h2 {
    margin: 0 0 .5rem;
    font: 600 1.6rem/1.2 var(--display);
    letter-spacing: -.02em;
}

.section > .lede { margin: 0 0 2rem; max-width: 62ch; color: var(--ink-muted); }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.card {
    padding: 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.card h3 { margin: 0 0 .5rem; font: 600 1.02rem/1.3 var(--display); }
.card p { margin: 0; color: var(--ink-muted); font-size: .93rem; }

/* Code samples carry the landing page's argument, so they are given room. */

pre.code {
    margin: 0;
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: .875rem/1.6 var(--mono);
    color: #d6d9ea;
}

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }

/* ---------------------------------------------------------------- catalogue */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.report-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: inherit;
}

.report-card:hover { border-color: var(--accent); text-decoration: none; }
.report-card h3 { margin: 0; font: 600 1.02rem/1.3 var(--display); }
.report-card .meta { display: flex; gap: .5rem; align-items: center; }

.tag {
    display: inline-block;
    padding: .18rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.tag--pdf { color: var(--pdf); border-color: color-mix(in srgb, var(--pdf) 45%, transparent); }
.tag--word { color: var(--word); border-color: color-mix(in srgb, var(--word) 45%, transparent); }
.tag--powerpoint { color: var(--powerpoint); border-color: color-mix(in srgb, var(--powerpoint) 45%, transparent); }

.report-card .code { color: var(--ink-faint); font: .8rem var(--mono); }

/* ---------------------------------------------------------------- one report */

.page-head { padding: 3rem 0 1.5rem; }
.page-head h1 { margin: .35rem 0 .6rem; font: 600 2rem/1.15 var(--display); letter-spacing: -.02em; }
.page-head p { margin: 0; max-width: 62ch; color: var(--ink-muted); }
.crumb { color: var(--ink-faint); font-size: .88rem; }

.source {
    margin: 0 0 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.source > summary {
    padding: .8rem 1.1rem;
    background: var(--surface-2);
    cursor: pointer;
    font-weight: 600;
    font-size: .93rem;
}

.source > summary::marker { color: var(--ink-faint); }
.source pre { margin: 0; border: 0; border-radius: 0; max-height: 32rem; }

.notice {
    padding: .9rem 1.1rem;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--radius);
    color: var(--ink-muted);
    font-size: .9rem;
}

.notice--warn { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .35); }

/* ---------------------------------------------------------------- docs */

.docs-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 3rem; padding: 2.5rem 0; }

@media (max-width: 860px) {
    .docs-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

.docs-nav { align-self: start; position: sticky; top: 76px; font-size: .92rem; }
.docs-nav h4 { margin: 1.25rem 0 .5rem; color: var(--ink-faint); font: 600 .74rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.docs-nav h4:first-child { margin-top: 0; }
.docs-nav a { display: block; padding: .3rem 0; color: var(--ink-muted); }
.docs-nav a:hover, .docs-nav a.current { color: var(--ink); text-decoration: none; }

.doc-body { max-width: 74ch; }
.doc-body h1 { margin: 0 0 1.5rem; font: 600 2.1rem/1.15 var(--display); letter-spacing: -.02em; }
.doc-body h2 { margin: 2.75rem 0 .9rem; font: 600 1.4rem/1.25 var(--display); letter-spacing: -.015em; }
.doc-body h3 { margin: 2rem 0 .6rem; font: 600 1.08rem/1.3 var(--display); }
.doc-body p, .doc-body li { color: #cdd2e6; }
.doc-body code { padding: .1rem .35rem; background: var(--sunken); border-radius: .3rem; font: .875em var(--mono); }
.doc-body pre { padding: 1.1rem 1.25rem; overflow-x: auto; background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius); }
.doc-body pre code { padding: 0; background: none; font-size: .875rem; line-height: 1.6; }
.doc-body blockquote { margin: 1.5rem 0; padding: .1rem 1.1rem; border-left: 3px solid var(--border-strong); color: var(--ink-muted); }
.doc-body table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.doc-body th, .doc-body td { padding: .55rem .75rem; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }
.doc-body th { color: var(--ink-faint); font-weight: 600; }
.doc-table-scroll { overflow-x: auto; margin: 1.25rem 0; }

.doc-around { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .93rem; }