/* RowFold — the plan sketch.
   Behaviour: wwwroot/js/plan-sketch.js   Markup: the .hs-* block in the marketing hero

   Kept separate from marketing.css because the sketch is a self-contained signed-out
   illustration. Authenticated signup and onboarding intentionally do not load it.

   Depends only on tokens.css, which every layout loads. Do NOT reach for
   marketing.css's local tokens (--r-lg, --t-micro, --t-fine) in this file: they do
   not exist on the auth pages and the rule would silently fall back to nothing. */

/* ---- The sketch ----
   The schema a sentence implies, drawn beside the bar as it is typed. Signed out and
   client-side: nothing is sent anywhere, nothing is created, and no AI round trip
   stands between a keystroke and the picture — which is what lets it keep up.
   It ships server-rendered in its example state, so it is complete and honest with
   JS off; the host page flips [data-state] to "live" once there is a real sentence. */
.hero-sketch {
    position: relative; min-width: 0; padding: 20px;
    border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-lg);
    background: rgba(255,255,255,.035);
}
.hs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.hs-live {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0;
    color: var(--accent); font-family: var(--font-mono); font-size: 10.5px;
    font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.hs-live i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); }
.hero-sketch[data-state="live"] .hs-live i { animation: hs-blink 1.1s infinite; }
.hs-quiet { flex: none; color: var(--ink-400); font-family: var(--font-mono); font-size: 10.5px; }
@keyframes hs-blink { 50% { opacity: .3; } }
@keyframes hs-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hs-canvas {
    position: relative; padding: 20px 12px 16px; border-radius: 14px;
    background-image: radial-gradient(rgba(255,255,255,.09) .9px, transparent .9px);
    background-size: 17px 17px;
}
.hs-row { display: flex; align-items: stretch; }
.hs-node {
    flex: 1 1 0; min-width: 0; padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.14); border-top: 3px solid var(--hs-accent, var(--violet));
    border-radius: 10px; background: #131A36;
    animation: hs-rise .45s ease both;
}
/* The link between two tables, drawn as a real object rather than a gap — and a live
   one: a glint slides along each wire (background-position only, compositor-cheap),
   reading as data moving between the tables. Reduced motion restores the solid wire. */
.hs-wire {
    flex: 0 0 20px; align-self: center; height: 1.6px; border-radius: 2px; opacity: .8;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent) 50%, var(--accent-deep));
    background-size: 240% 100%;
    animation: hs-flow 2.6s linear infinite;
}
@keyframes hs-flow { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.hs-kind {
    display: block; margin-bottom: 3px; color: var(--ink-400);
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
}
.hs-kind.accent { color: var(--accent); letter-spacing: .12em; }
.hs-node b { display: block; font-size: 13px; font-weight: 650; line-height: 1.2; color: var(--paper); }
.hs-meta { display: block; margin-top: 5px; color: var(--ink-300); font-size: 11px; }
.hs-drop {
    width: 1.6px; height: 30px; margin: 0 auto; border-radius: 2px; opacity: .8;
    background: linear-gradient(180deg, var(--violet), rgba(217,242,92,.9) 50%, var(--violet));
    background-size: 100% 240%;
    animation: hs-drip 2.6s linear infinite;
}
@keyframes hs-drip { from { background-position: 0 100%; } to { background-position: 0 0%; } }
.hs-derived {
    position: relative; max-width: 68%; margin: 0 auto; padding: 12px 14px;
    border: 1px solid rgba(217,242,92,.4); border-radius: 12px; background: rgba(217,242,92,.09);
    box-shadow: 0 0 0 4px rgba(217,242,92,.06);
    animation: hs-rise .45s ease .28s both;
}
/* The rollup is the sketch's payoff, so it breathes: glow on a pseudo, opacity-only. */
.hs-derived::after {
    content: ""; position: absolute; inset: -5px; border-radius: 14px; pointer-events: none;
    box-shadow: 0 0 26px rgba(217,242,92,.3);
    opacity: .35; animation: hs-breathe 3s ease-in-out infinite alternate;
}
@keyframes hs-breathe { to { opacity: 1; } }
.hs-derived b { display: block; font-size: 13.5px; font-weight: 650; color: var(--paper); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.hs-chips span {
    padding: 5px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
    background: rgba(255,255,255,.04); color: var(--ink-200);
    font-family: var(--font-mono); font-size: 11px;
}
.hs-chips span.on { border-color: rgba(217,242,92,.34); background: rgba(217,242,92,.09); color: var(--accent); }

/* ---- The brief state ----
   The same frame, holding the visitor's own sentence instead of a worked example. The
   quote takes the node slot the four tables had, so the wire already drawn beneath it
   carries the brief into "what happens next" with no new DOM and no second panel.

   Prose, not a table name: the display face rather than the mono one, a size that reads
   as a sentence, and a clamp — the bar takes 300 characters and an unbounded quote would
   push the payoff card off the bottom of the panel on the one screen it has to fit. */
/* The brief is shorter than a four-table example, and the panel is held to the example's
   height in JS so the page cannot drop ~130px under the cursor at the moment somebody is
   typing (measured: the section below the hero jumped from 1220 to 1086). The slack that
   leaves goes to the CANVAS, not to the quote: letting the card absorb it looked fine on
   a desktop and absurd on a phone, where the example wraps to two rows of tables and the
   card grew to 361px around two lines of text. The dotted canvas can hold empty space —
   that is what it is for — and a card cannot.

   The quote card has a floor and a ceiling — about two lines to four — so it responds a
   little as somebody writes without ever being the thing that resizes the panel. And the
   diagram is CENTRED in the canvas rather than sitting at its top: left to fall where it
   liked, it stranded 115px of empty dots under the payoff, which reads as a panel that
   failed to finish rather than one with room in it. */
.hero-sketch[data-state="brief"] { display: flex; flex-direction: column; }
.hero-sketch[data-state="brief"] .hs-canvas {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
}
.hs-node.is-quote {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 118px;
    padding: 16px 17px;
    border-top-color: var(--accent);
    background: linear-gradient(180deg, rgba(217,242,92,.05), rgba(19,26,54,0) 60%), #131A36;
}
.hs-node.is-quote b {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden;
    font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: -.005em;
    color: var(--paper); text-wrap: pretty;
}
/* Every redraw re-runs the rise. Honour the same reduced-motion contract the rest of
   the page does: the final frame carries all of the meaning here. */
@media (prefers-reduced-motion: reduce) {
    .hs-node, .hs-derived { animation: none; }
    .hero-sketch[data-state="live"] .hs-live i { animation: none; }
    /* The flowing gradients freeze mid-glint if only the animation stops — restore the
       original solid wires, and still the glow. */
    .hs-wire { animation: none; background: var(--accent-deep); }
    .hs-drop { animation: none; background: var(--violet); }
    .hs-derived::after { animation: none; }
}
/* Under ~900px the row of table cards stops being legible side by side. */
@media (max-width: 900px) {
    .hs-row { flex-wrap: wrap; gap: 8px; }
    .hs-node { flex: 1 1 140px; }
    .hs-wire { display: none; }
    .hs-derived { max-width: none; }
}