/* ==========================================================================
   apps.css
   Components for the apps section. Dark, editorial, image-forward.

   Tokens, reset, .container, the site header, .eyebrow, .lede and the footer
   now come from site.css — load that FIRST. What is left here is only what is
   specific to app pages.

   Each app page still sets its own --accent (snitscanner cobalt,
   ExpressionGate oxide orange) so the pages feel like the products they
   describe. site.css ships a neutral default so nothing inherits a product
   colour by accident.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

header.page-header {
    padding: 6rem 0 3.5rem;
}

h1 {
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    max-width: 15ch;
}

.byline {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
}

.byline a {
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
}

.byline a:hover {
    color: var(--text);
}

/* --------------------------------------------------------------------------
   Status pill
   -------------------------------------------------------------------------- */

.status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    border: 1px solid var(--line-strong);
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
}

.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.status.live::before {
    background: #3fb0a0;
}

.status.wip::before {
    background: #e3cb94;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

section {
    padding: 4rem 0;
    scroll-margin-top: 5rem;
}

/* The header already ends in whitespace; don't double it up */
header.page-header + section:not(.tinted):not(.tinted-2) {
    padding-top: 0.5rem;
}

section.tinted {
    background-color: var(--surface);
}

section.tinted-2 {
    background-color: var(--surface-2);
}

.section-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.section-heading {
    font-size: 2.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.prose p {
    color: var(--text-dim);
    font-size: 1.05rem;
    max-width: 68ch;
    margin-bottom: 1.1rem;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose strong {
    color: var(--text);
    font-weight: 500;
}

/* Callouts were never included here, so a link inside one fell through to the
   browser default and came out blue against the accent border. Six of them
   across the site did that. */
.prose a,
.callout a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    align-items: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text);
    transition: all 0.3s ease;
}

.btn:hover {
    background: var(--surface-3);
    border-color: var(--line-strong);
}

.btn::after {
    content: "→";
    transition: transform 0.3s ease;
}

.btn:hover::after {
    transform: translateX(4px);
}

.btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #0d0d0f;
}

.btn.primary:hover {
    filter: brightness(1.12);
}

.btn.ghost {
    background: transparent;
}

.btn-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* A link sitting inside the note beside a download button — a second file some
   people need and most do not. `.styled-link` is underline-free by design,
   which here made it indistinguishable from the muted text around it, so this
   one is underlined and takes the page's accent. */
.btn-note a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
    transition: text-decoration-color 0.25s ease;
}

.btn-note a:hover {
    text-decoration-color: var(--accent);
}

/* --------------------------------------------------------------------------
   App list (apps/index.html)
   -------------------------------------------------------------------------- */

.app-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.app-row {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 2rem;
    align-items: start;
    padding: 2rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.app-row:hover {
    background: var(--surface-3);
    border-color: var(--line-strong);
    transform: translateY(-2px);
}

.app-icon {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--line);
}

.app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A lettered tile for a project with no icon of its own. Sized from the tile
   rather than the viewport, so it scales with the smaller mobile icon. */
.app-icon-type {
    container-type: size;
    display: grid;
    place-items: center;
    background: #f3f2ea;
    color: #20251f;
}

.app-icon-type span {
    font-size: 34cqw;
    font-weight: 600;
    letter-spacing: -0.05em;
}

.app-meta h2 {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.app-meta .app-tagline {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 1rem;
    max-width: 55ch;
}

.app-facts {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: var(--mono);
}

.app-cta {
    align-self: center;
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: transform 0.3s ease, color 0.3s ease;
}

.app-row:hover .app-cta {
    color: var(--text);
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Tech tags
   -------------------------------------------------------------------------- */

.tag-group h3 {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tags span {
    padding: 0.25rem 0.7rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */

figure {
    margin: 0;
}

.shot {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
}

.shot img {
    width: 100%;
    height: auto;
}

figcaption {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
}

.hero-shot {
    margin-top: 3rem;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Opt-in square crop, for galleries whose images are already square and want
   their captions on one line. Wide screenshots must not get this, or they lose
   whatever sits near the left and right edges. */
.gallery.square .shot {
    aspect-ratio: 1;
}

.gallery.square .shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Feature / step lists
   -------------------------------------------------------------------------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.card {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

.card .num {
    display: block;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
    letter-spacing: 0.08em;
}

/* Definition-style list: label on the left, description on the right */
.spec-list {
    list-style: none;
    margin-top: 2rem;
    border-top: 1px solid var(--line);
}

.spec-list li {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
}

.spec-list .label {
    font-weight: 500;
    font-size: 0.95rem;
}

.spec-list .label .sub {
    display: block;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.spec-list .desc {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* The signal chain, rendered as a row of stages */
.chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    font-family: var(--mono);
    font-size: 0.85rem;
}

.chain span {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.chain em {
    color: var(--text-muted);
    font-style: normal;
}

/* Zone strip: LOW / MID / HIGH */
.zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.zone {
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 3px solid var(--zone, var(--accent));
}

.zone h3 {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--zone, var(--accent));
    margin-bottom: 0.6rem;
}

.zone p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Callout (privacy, status, etc.)
   -------------------------------------------------------------------------- */

.callout {
    padding: 2rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    margin-top: 2rem;
}

.callout h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.callout p {
    color: var(--text-muted);
    font-size: 0.98rem;
    margin-bottom: 0.9rem;
    max-width: 68ch;
}

.callout p:last-child {
    margin-bottom: 0;
}

code {
    font-family: var(--mono);
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

/* Q&A pairs */
.qa {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.qa .q {
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 0.6rem;
}

.qa .a {
    color: var(--text-muted);
    font-size: 0.98rem;
    max-width: 68ch;
}

.qa .a p {
    margin-bottom: 0.8rem;
}

.qa .a p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Ko-fi tip jar, pinned bottom right.
   Styled like the rest of the site rather than using Ko-fi's own button
   image, which is bright red and fights the dark pages. Hover picks up
   whichever accent the current page sets.
   -------------------------------------------------------------------------- */

.kofi {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--text);
    background: rgba(30, 30, 36, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line-strong);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    transition: all 0.3s ease;
}

.kofi:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #0d0d0f;
    transform: translateY(-2px);
}

.kofi svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 820px) {
    .kofi {
        right: 1rem;
        bottom: 1rem;
        padding: 0.55rem 0.9rem;
        font-size: 0.8rem;
    }
}

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

@media (max-width: 820px) {

    header.page-header {
        padding: 3.5rem 0 2.5rem;
    }

    h1 {
        font-size: 2.4rem;
        max-width: none;
    }

    .lede {
        font-size: 1.1rem;
    }

    .section-heading {
        font-size: 1.7rem;
    }

    section {
        padding: 3rem 0;
    }



    .app-row {
        grid-template-columns: 64px 1fr;
        gap: 1.25rem;
        padding: 1.5rem;
    }

    .app-icon {
        width: 64px;
        height: 64px;
        border-radius: 14px;
    }

    .app-cta {
        display: none;
    }

    .app-meta h2 {
        font-size: 1.3rem;
    }

    .spec-list li {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

}