/* =============================================================================
   Joy Data Solutions — Through-line
   =============================================================================
   The drawing language (see templates/components/_line.html) and the
   components built on it: marks, the hero line, the hub diagram,
   routed cards, chips, status pills, definition rows, disclosures,
   and the homepage hero split. Split out of brand.css so the token layer
   stays a token layer.

   Depends on the tokens in brand.css. Loads after it (see layouts/base.html).
   Same scoping rules as brand.css: no Tailwind class names, element
   selectors at 0,0,1, everything under our own class names.
   ============================================================================= */

/* =============================================================================
   1. The drawing language
   =============================================================================
   Every illustration on the site is an inline SVG from
   templates/components/_line.html: ink strokes in currentColor, one weight,
   round caps, no fills, and an amber node wherever something connects or
   ends. Because the strokes inherit colour and the nodes use the token, a
   palette change never touches a drawing.

   Paths carry pathLength="1", so a dasharray of 1 covers any path exactly and
   the draw animation below needs no measurement.
   ============================================================================= */

.tl {
    display: inline-block;
    vertical-align: middle;
    color: var(--ink-900);
    overflow: visible;
}

.tl__node {
    fill: var(--amber-bright);
    stroke: none;
}

.tl-mark { width: 2.75rem; height: 2.75rem; }
.tl-icon { width: 1.5rem; height: 1.5rem; }

.tl-line {
    display: block;
    width: 100%;
    height: auto;
    color: var(--ink-900);
}

.tl__label {
    fill: var(--slate-500);
    stroke: none;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- The draw ------------------------------------------------------------
   Gated on .js-motion like every reveal, so with scripting off the line is
   simply there. The one budgeted exception to the duration tokens is the
   long hero line at 900ms; it runs once and never repeats. */
.js-motion [data-reveal] .tl__path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}

.js-motion [data-reveal] .tl__path--long { transition-duration: 900ms; }

.js-motion [data-reveal].is-revealed .tl__path { stroke-dashoffset: 0; }

.js-motion [data-reveal] .tl__node {
    opacity: 0;
    transform: scale(0.4);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
    transition-delay: calc(var(--reveal-delay, 0ms) + 420ms + var(--i, 0) * 90ms);
}

/* Nodes on the long line light as the stroke reaches them. */
.js-motion [data-reveal] .tl-line .tl__node {
    transition-delay: calc(var(--reveal-delay, 0ms) + 160ms + var(--i, 0) * 170ms);
}

.js-motion [data-reveal].is-revealed .tl__node {
    opacity: 1;
    transform: none;
}

/* Reduced motion: section 20 already zeroes durations. Delays are cleared
   here too, so a node never sits invisible waiting for a stagger. */
@media (prefers-reduced-motion: reduce) {
    .js-motion [data-reveal] .tl__path,
    .js-motion [data-reveal] .tl__node {
        transition-delay: 0ms !important;
    }
    .js-motion [data-reveal] .tl__path { stroke-dashoffset: 0; }
    .js-motion [data-reveal] .tl__node { opacity: 1; transform: none; }
}

/* --- Machine surfaces ----------------------------------------------------
   Anything a system produced is set in the mono face: tool names, readouts,
   timestamps. Mono is the honest way to say "a machine did this" without
   saying "AI-powered". */
.mono { font-family: var(--font-mono); font-size: 0.92em; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.6rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-s);
    background: var(--white);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-900);
    white-space: nowrap;
}

.chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber-bright);
    flex: none;
}

.chip--muted { color: var(--slate-500); }
.chip--muted::before { background: var(--slate-300); }

/* --- Routed offer cards --------------------------------------------------
   A card that is a link to a page, not a summary of one. Mark on top, the
   destination named at the bottom. */
.card--route {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-xs);
    text-decoration: none;
    color: inherit;
}

.card--route .tl-mark { margin-bottom: var(--space-2xs); }

.card--route .card__title { margin-top: 0; }

.card__go {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--space-s);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-900);
    transition: color var(--dur-fast) var(--ease-out);
}

.card--route:hover .card__go { color: var(--amber); }
.card--route:hover .card__go .btn__icon { transform: translateX(3px); }

/* --- Status pills (connector wall, episode list) ------------------------- */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate-500);
}

.status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--slate-300);
    flex: none;
}

.status--live::before { background: var(--amber-bright); }
.status--live { color: var(--amber); }
.status--ready::before { background: var(--ink-900); }

/* --- Definition rows: a compact k/v list without a table --------------- */
.defs { display: grid; gap: 0; border-top: 1px solid var(--rule); }

.defs__row {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: var(--space-s);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--step--1);
}

.defs__k {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-400);
    padding-top: 0.15rem;
}

.defs__v { color: var(--slate-600); }

@media (max-width: 520px) {
    .defs__row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* --- Disclosure (FAQ, timeline detail) ---------------------------------- */
.disclosure { border-top: 1px solid var(--rule); }
.disclosure:last-child { border-bottom: 1px solid var(--rule); }

.disclosure summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-s) 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--fg);
}

.disclosure summary::-webkit-details-marker { display: none; }

.disclosure summary::after {
    content: '';
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 1.5px solid var(--slate-400);
    border-bottom: 1.5px solid var(--slate-400);
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out);
}

.disclosure[open] summary::after { transform: rotate(-135deg); }

.disclosure__body {
    padding: 0 0 var(--space-s);
    color: var(--slate-600);
}

.disclosure__body p { margin: 0 0 var(--space-xs); }
.disclosure__body p:last-child { margin-bottom: 0; }

/* --- Hub diagram (pages/how-i-work/_hub.html; used on / and /how-i-work) --- */
.hub {
    display: block;
    width: 100%;
    height: auto;
    color: var(--ink-900);
    overflow: visible;
}

.hub__box { stroke: var(--rule-strong); }
.hub__box--chat { stroke: var(--ink-900); }

.hub__label {
    fill: var(--fg);
    stroke: none;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
}

.hub__label--strong {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    fill: var(--slate-400);
}

.hub__chip {
    fill: var(--ink-900);
    stroke: none;
    font-family: var(--font-mono);
    font-size: 9.5px;
}


/* The connector marks are nested as inner <svg> elements inside a scaled
   <g>. Their CSS size must be the 32-unit box the transform assumes. */
.hub .tl-icon { width: 32px; height: 32px; }

/* --- Homepage hero: text beside the welcome video or the ethos card ------ */
.hero__split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 1.5rem + 3vw, 4rem);
    align-items: center;
}

@media (max-width: 900px) {
    .hero__split { grid-template-columns: minmax(0, 1fr); }
}

.hero--home .hero__inner { max-width: none; }
.hero--home .hero__actions { margin-bottom: 0; }
.hero--home .hero__stats { margin-top: var(--space-xl); }

.ethos {
    padding: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
    border: 1px solid var(--rule);
    border-radius: var(--radius-l);
    background: var(--white);
    box-shadow: var(--shadow-m);
}

.ethos__text {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 400;
    font-variation-settings: 'SOFT' 6, 'WONK' 0, 'opsz' 28;
    line-height: 1.45;
    letter-spacing: -0.008em;
    color: var(--fg);
    margin: 0 0 var(--space-s);
    text-wrap: pretty;
}

.ethos__line { margin-top: var(--space-s); }
.ethos__line .tl__label { font-size: 30px; }