/* =============================================================================
   PRJCT LAZRUS — product & case-study extras
   -----------------------------------------------------------------------------
   Everything that used to live here (a second, divergent copy of the card,
   grid, hero and stat systems) now lives in main.css, where there is one of
   each. What remains is genuinely specific to a product or case-study page.
   ========================================================================== */

@layer components {

    /* The architecture diagram on the Off The Map case study. Inline SVG, ink
       on paper, no fills that assume a light background. */
    .stack-diagram {
        margin: 2rem 0 0;
        padding: clamp(1.25rem, 3vw, 2rem);
        border: 1px solid var(--rule);
        background: var(--paper-2);
        overflow-x: auto;
    }
    .stack-diagram svg { width: 100%; height: auto; min-width: 34rem; }
    .stack-diagram text {
        font-family: var(--mono);
        fill: var(--ink-2);
    }
    .stack-diagram .node { fill: var(--paper); stroke: var(--rule-2); }
    .stack-diagram .edge { stroke: var(--rule-2); fill: none; }
    .stack-diagram .accent { stroke: var(--signal); }
    .stack-diagram figcaption,
    .diagram-caption {
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
        margin-top: 0.9rem;
    }

    /* A product page opens on its own name, so the page title carries a
       standing line back to the parent index. */
    .product-page .product-hero-content > .overline { display: block; margin-bottom: 1rem; }
    .product-page .product-hero-content > .overline a { color: inherit; }

    /* Feature matrices on the platform pages: a real table, tabular figures,
       hairline rows, no zebra fill. */
    .matrix { font-size: var(--t-small); margin-top: 1.75rem; }
    .matrix th, .matrix td {
        text-align: left;
        padding: 0.9rem 1.25rem 0.9rem 0;
        border-bottom: 1px solid var(--rule);
        vertical-align: top;
        color: var(--ink-2);
    }
    .matrix thead th {
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-weight: 500;
        color: var(--ink-3);
        border-bottom-color: var(--rule-2);
    }
    .matrix tbody th { color: var(--ink); font-weight: 600; }
}

@layer components {
    /* The boundary diagram is a drawing, not a picture: hairlines, sharp
       corners, mono labels, and one accent on the system that holds authority
       over money. Colours come from the tokens so it inverts with the theme. */
    .stack-diagram svg { color: var(--ink-2); }
    .stack-diagram .node { fill: var(--paper); stroke: var(--rule-2); stroke-width: 1; }
    .stack-diagram .node.authority { stroke: var(--signal); stroke-width: 1.5; }
    .stack-diagram .edge { stroke: var(--rule-2); stroke-width: 1.25; fill: none; }
    .stack-diagram .edge.accent { stroke: var(--signal); color: var(--signal); }
    .stack-diagram .edge.dashed { stroke-dasharray: 4 4; }
    .stack-diagram .t-name {
        font-family: var(--mono); font-size: 17px; font-weight: 600;
        fill: var(--ink); letter-spacing: 0.02em;
    }
    .stack-diagram .t-role { font-family: var(--mono); font-size: 11px; fill: var(--signal); letter-spacing: 0.06em; }
    .stack-diagram .t-line { font-family: var(--mono); font-size: 11.5px; fill: var(--ink-2); }
    .stack-diagram .t-cap  { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3); letter-spacing: 0.05em; }
    .stack-diagram .t-num  { font-family: var(--mono); font-size: 10.5px; fill: var(--rule-2); }

    /* A full-bleed disclosure band. It is the first thing above the case
       study for a reason: an endorsement with a material connection has to be
       in the same view as the endorsement. */
    .disclosure-band {
        border-block: 1px solid var(--rule);
        background: var(--red-wash);
        padding-block: 1.6rem;
    }
    .disclosure-inner { max-width: var(--shell); }
    .disclosure-label {
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-weight: 600;
        color: var(--red);
        margin-bottom: 0.4rem;
    }
    .disclosure-inner p:last-child {
        font-size: var(--t-small);
        color: var(--ink-2);
        max-width: 84ch;
    }
}

/* =============================================================================
   Page-specific components that the product pages already used, restated on
   the paper-and-ink system. Everything below replaces a rule that assumed a
   dark field, a mint accent, a shadow, or a corner radius.
   ========================================================================== */

@layer components {

    .product-split-visual { min-width: 0; }
    .product-split-text + .product-split-text { margin-top: 0; }

    /* --- Buttons in a row ------------------------------------------------- */
    .cta-buttons, .product-cta-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 2rem;
    }

    /* --- Product hero fallbacks (legacy markup) --------------------------- */
    .product-tagline {
        font-family: var(--mono);
        font-size: var(--t-meta);
        color: var(--ink-3);
        margin-bottom: 0.9rem;
    }
    .product-description { font-size: var(--t-lede); color: var(--ink-2); max-width: 62ch; }

    /* --- Install options -------------------------------------------------- */
    .install-options { border-top: 1px solid var(--rule); margin-top: 0.5rem; }
    .install-option {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.6rem 1.25rem;
        padding: 0.95rem 0;
        border-bottom: 1px solid var(--rule);
    }
    .install-option code {
        font-size: var(--t-small);
        color: var(--ink);
        background: var(--paper-2);
        border: 1px solid var(--rule);
        padding: 0.1em 0.45em;
    }
    .install-option span {
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
    }

    /* --- Roadmap ---------------------------------------------------------- */
    .roadmap-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        border-top: 1px solid var(--rule);
        border-left: 1px solid var(--rule);
    }
    .roadmap-item {
        padding: 1.9rem 2rem 2.1rem;
        border-bottom: 1px solid var(--rule);
        border-right: 1px solid var(--rule);
    }
    .roadmap-item h3 { margin: 0.9rem 0 0.6rem; }
    .roadmap-item p { font-size: var(--t-small); color: var(--ink-2); }
    .roadmap-status { display: inline-block; }
    .roadmap-status.complete    { color: var(--green); }
    .roadmap-status.in-progress { color: var(--amber); }
    .roadmap-status.planned     { color: var(--ink-3); }

    /* --- Checklists ------------------------------------------------------- */
    .checklist { margin-top: 0.75rem; }
    .checklist li {
        position: relative;
        padding-left: 1.25rem;
        font-size: var(--t-small);
        color: var(--ink-2);
        margin-bottom: 0.45rem;
    }
    .checklist li::before {
        content: "\2014";
        position: absolute;
        left: 0;
        color: var(--rule-2);
    }

    /* --- Tech list -------------------------------------------------------- */
    .tech-list { border-top: 1px solid var(--rule); }
    .tech-item span {
        display: block;
        font-size: var(--t-small);
        color: var(--ink-2);
    }
    .monitoring-features { border-top: 1px solid var(--rule); margin-top: 0.5rem; }
    .monitoring-item {
        padding: 0.95rem 0;
        border-bottom: 1px solid var(--rule);
        font-size: var(--t-small);
        color: var(--ink-2);
    }
    .monitoring-item strong {
        display: block;
        font-family: var(--mono);
        font-size: var(--t-meta);
        color: var(--ink);
        margin-bottom: 0.25rem;
    }

    /* --- eXitZork acts ---------------------------------------------------- */
    .acts-timeline { border-top: 1px solid var(--rule); }
    .act {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: 1.25rem;
        align-items: baseline;
        padding: 1.45rem 0;
        border-bottom: 1px solid var(--rule);
    }
    .act-number {
        font-family: var(--mono);
        font-size: var(--t-meta);
        font-weight: 600;
        color: var(--signal);
    }
    .act-content h3, .act-content h4 {
        font-size: var(--t-h3);
        font-weight: 600;
        margin-bottom: 0.4rem;
    }
    .act-content p { font-size: var(--t-small); color: var(--ink-2); }
    .room-count {
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
        white-space: nowrap;
    }

    /* --- W33KND therapist portal mock ------------------------------------- */
    /* A mock of a real screen, drawn as a table rather than as a fake window
       with traffic-light dots. */
    .portal-mockup { border: 1px solid var(--rule); background: var(--paper-2); }
    .portal-header {
        padding: 0.6rem 0.9rem;
        border-bottom: 1px solid var(--rule);
        background: var(--paper-3);
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
    }
    .portal-content { padding: 0.25rem 0.9rem 0.6rem; }
    .client-row {
        display: grid;
        grid-template-columns: 2.25rem minmax(0, 1fr) auto;
        gap: 0.9rem;
        align-items: center;
        padding: 0.95rem 0;
        border-bottom: 1px solid var(--rule);
    }
    .client-row:last-child { border-bottom: 0; }
    .client-avatar {
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        border: 1px solid var(--rule-2);
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-2);
    }
    .client-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
    .client-name { font-family: var(--mono); font-size: var(--t-meta); color: var(--ink); }
    .client-status {
        font-family: var(--mono);
        font-size: var(--t-micro);
        color: var(--ink-3);
    }
    .client-status.good    { color: var(--green); }
    .client-status.warning { color: var(--amber); }
    .client-score {
        font-family: var(--mono);
        font-size: var(--t-micro);
        font-variant-numeric: tabular-nums lining-nums;
        color: var(--ink-2);
        white-space: nowrap;
    }

    /* --- Syntax token used by two code samples ---------------------------- */
    .code-block .class { color: var(--signal-2); font-weight: 600; }
}