/* ==========================================================================
   R1 Apps — site stylesheet
   Dark monochrome design: navy/midnight base + cyan accent + steel-tinted
   structural neutrals (borders, code chips, status bar, dl descriptions).
   Plain CSS, no framework. Mobile-first responsive.
   ========================================================================== */

/* ---------- Design tokens (all colors live here) ---------- */

:root {
    /* Layered backgrounds — depth via shading, no borders between sections */
    --bg-0: #0a0f1a;     /* page background, deepest */
    --bg-1: #0f172a;     /* header / nav / status bar / alternating sections */
    --bg-2: #15203a;     /* elevated panels, cards */
    --bg-3: #1c2a4a;     /* card hover */

    /* Borders — steel-tinted, structural not loud */
    --border: #2a2f3a;
    --border-strong: #3a4150;

    /* Text */
    --fg: #e8eef8;       /* primary */
    --fg-muted: #8a98b5; /* secondary body / descriptions */
    --fg-dim: #5b6781;   /* meta / labels / captions */

    /* Accent — cyan, the "active/signal" color
       Used for: links, [r1] brackets, status dot, active nav, dt terms,
       button hovers. Reserved so it stays meaningful. */
    --accent: #0ea5e9;
    --accent-hover: #38bdf8;
    --accent-dim: rgba(14, 165, 233, 0.15);

    /* Signal — slightly brighter cyan for status indicators */
    --signal: #22d3ee;
    --signal-glow: rgba(34, 211, 238, 0.4);

    /* Code chips — steel-tinted (cyan reserved for true accents) */
    --code-bg: rgba(148, 163, 184, 0.08);
    --code-fg: #cbd5e1;

    /* Chrome — steel for status bar text + dl description text */
    --chrome-fg: #8a8f9a;

    /* Notice — amber accent, only place not blue/cyan/steel */
    --notice-bg: rgba(245, 158, 11, 0.08);
    --notice-border: #f59e0b;
}

/* ---------- Reset / base ---------- */

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

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

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--fg);
    background: var(--bg-0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Layout container ---------- */

.container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- Header ---------- */

header.site-header {
    background: var(--bg-1);
    color: var(--fg);
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
}

header.site-header .brand {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

header.site-header h1 {
    margin: 0;
    line-height: 0;
}

header.site-header h1 a {
    display: inline-block;
    line-height: 0;
}

header.site-header .logo {
    display: block;
    height: 36px;
    width: auto;
}

header.site-header .tagline {
    color: var(--fg-dim);
    font-size: 0.92rem;
    font-style: normal;
    letter-spacing: 0.01em;
}

/* ---------- Nav ---------- */

nav.site-nav {
    background: var(--bg-1);
    padding: 0;
    border-bottom: 1px solid var(--border);
}

nav.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
}

nav.site-nav a {
    display: block;
    padding: 0.875rem 0;
    color: var(--fg-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    position: relative;
    transition: color 120ms ease;
}

nav.site-nav a:hover {
    color: var(--fg);
}

nav.site-nav a.active {
    color: var(--fg);
}

nav.site-nav a.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}

/* ---------- Main content ---------- */

main {
    padding: 3rem 0 4rem;
}

main h1 {
    font-size: 2.2rem;
    margin: 0 0 0.6rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fg);
}

main h2 {
    font-size: 1.4rem;
    margin: 2.5rem 0 0.85rem;
    padding-bottom: 0;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg);
    border-bottom: none;
}

main h3 {
    font-size: 1.05rem;
    margin: 1.5rem 0 0.5rem;
    font-weight: 600;
    color: var(--fg);
}

main p {
    margin: 0 0 1rem;
    color: var(--fg);
}

main p em {
    color: var(--fg-muted);
    font-style: normal;
}

main ul, main ol {
    margin: 0 0 1.1rem;
    padding-left: 1.5rem;
}

main li {
    margin-bottom: 0.4rem;
}

main a {
    color: var(--accent);
    text-decoration: none;
    transition: color 120ms ease;
}

main a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

main strong {
    color: var(--fg);
    font-weight: 600;
}

/* ---------- App / extension card list ---------- */

.app-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    gap: 1rem;
}

.app-list li {
    margin: 0;
    padding: 1.25rem 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: background 150ms ease, border-color 150ms ease;
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

/* Card content wraps in a flex child so it doesn't fight the icon
   for width. min-width: 0 keeps long meta lines from blowing out
   the card on narrow viewports. */
.app-list .app-card-body {
    flex: 1;
    min-width: 0;
}

/* Per-app icon next to the card title — 56x56 on desktop,
   shrinks to 44x44 on small screens via the responsive block at
   the bottom of this file. Subtle border so the icon's dark navy
   doesn't blur into the card's bg-2. */
.app-list .app-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    display: block;
}

.app-list li:hover {
    background: var(--bg-3);
    border-color: var(--border-strong);
}

.app-list h3 {
    margin: 0 0 0.3rem;
    font-size: 1.06rem;
    color: var(--fg);
}

.app-list h3 a {
    color: var(--fg);
    text-decoration: none;
}

.app-list h3 a:hover {
    color: var(--accent);
    text-decoration: none;
}

.app-list .meta {
    font-family: 'JetBrains Mono', "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    color: var(--fg-dim);
    margin: 0 0 0.6rem;
    letter-spacing: 0;
}

/* Meta-line tokens — each category gets its own colour so the spec
   strip is scannable at a glance.
   Wrap individual tokens like:
     <span class="tk-platform">macOS</span>
   Separator dots stay in the dimmer base colour. */
.app-list .meta .tk-platform    { color: #0ea5e9; }   /* cyan — accent family */
.app-list .meta .tk-protocol    { color: #34d399; }   /* muted green — "data" */
.app-list .meta .tk-video       { color: #a78bfa; }   /* muted purple — video standards */
.app-list .meta .tk-integration { color: #f59e0b; }   /* amber — the thing it talks to */

.app-list .description {
    margin: 0;
    color: var(--fg-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ---------- Product hero (top of down-low pages) ---------- */

/* Sits at the top of each per-product down-low page, above the
   page heading. Larger icon (96x96) + product name as a visual
   anchor for the page. Marketing-page feel without being heavy. */
.product-hero {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: 0 0 2rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}

.product-hero .hero-icon {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    display: block;
}

.product-hero .hero-text {
    flex: 1;
    min-width: 0;
}

.product-hero .hero-text h1 {
    margin: 0 0 0.2rem;
    font-size: 1.7rem;
    line-height: 1.15;
}

.product-hero .hero-text .hero-subtitle {
    margin: 0;
    color: var(--fg-muted);
    font-size: 0.95rem;
    font-style: normal;
}

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

.notice {
    padding: 1rem 1.2rem;
    background: var(--notice-bg);
    border-left: 3px solid var(--notice-border);
    margin: 1.5rem 0;
    border-radius: 0 6px 6px 0;
    font-size: 0.95rem;
    color: var(--fg-muted);
}

.notice strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--fg);
}

/* ---------- Code / pre ---------- */

code {
    font-family: 'JetBrains Mono', "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 0.12em 0.4em;
    border-radius: 3px;
}

pre {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--fg);
    padding: 1rem 1.2rem;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.88em;
    line-height: 1.6;
}

pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ---------- Footer ---------- */

footer.site-footer {
    background: var(--bg-0);
    color: var(--fg-dim);
    padding: 1.75rem 0;
    margin-top: 4rem;
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
}

footer.site-footer .footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    align-items: center;
}

footer.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

footer.site-footer ul li::after {
    content: "·";
    margin-left: 1.25rem;
    color: var(--border-strong);
}

footer.site-footer ul li:last-child::after {
    content: "";
    margin: 0;
}

footer.site-footer a {
    color: var(--fg-muted);
    text-decoration: none;
    transition: color 120ms ease;
}

footer.site-footer a:hover {
    color: var(--accent);
    text-decoration: none;
}

footer.site-footer .copy {
    color: var(--fg-dim);
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
    body { font-size: 16px; }
    header.site-header h1 {
        font-size: 1.5rem;
    }
    main h1 {
        font-size: 1.7rem;
    }
    main h2 {
        font-size: 1.25rem;
        margin-top: 2rem;
    }
    footer.site-footer .footer-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .container {
        padding: 0 1.1rem;
    }
    /* Card icon shrinks on small screens to keep cards readable */
    .app-list li {
        gap: 0.85rem;
        padding: 1rem 1.1rem;
    }
    .app-list .app-icon {
        width: 44px;
        height: 44px;
    }
    /* Hero icon stacks above text on narrow screens — easier to read */
    .product-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }
    .product-hero .hero-icon {
        width: 72px;
        height: 72px;
    }
}