/* ==========================================================================
   CocoSeller — Procedural crop growth (Phase 5C, all seven crops)
   Loaded only where a procedural plant is rendered.

   This file paints the plant and reserves its space. It does not move it: all
   motion is GSAP writing transforms, stroke offsets and one colour per fruit.
   There is deliberately not a single transition or keyframe below, because a
   CSS transition on a scrubbed property fights the scrub and turns growth back
   into the stepped cross-fade this system replaced.

   Colour here is botanical rather than diagrammatic: four foliage greens per
   crop so a leaf has an upper and a lower face, a pale twine that sits behind
   the crop, veins at a third opacity, and a fruit whose only recoloured part is
   its body. Nothing is a flat brand green filling a flat brand shape.

   The foliage greens themselves are NOT here. Each crop declares its own four
   tones in its blueprint and the component writes them onto the leaflets,
   because a blueberry is bluer than a capsicum and a rose is darker than both —
   and that difference is one of the things that makes seven drawings read as
   seven crops rather than as one plant recoloured.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The plant
   Two instances exist and only one is ever displayed: the sticky rail on
   desktop, the contained figure below it. Both fit by HEIGHT and anchor to the
   BOTTOM — preserveAspectRatio="xMidYMax meet" in the markup — so the grow bag
   sits on the floor of its box at every viewport, and resizing the window can
   never move the base. That attribute and this box are the whole root contract.
   -------------------------------------------------------------------------- */

.c-plant {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    /*
     * No overflow: visible. Every point of the drawing is inside the viewBox by
     * some margin — every blueprint keeps its drawing inside its own viewBox —
     * so there is nothing to let out, and the SVG's own clip is the last
     * guarantee that a plant can never widen the page.
     */
}

/*
 * Stroke defaults for everything that draws. Set here rather than per element
 * so the SVG carries geometry and the stylesheet carries appearance — and so a
 * weight can be re-valued for the whole plant in one place. Widths that vary
 * along the plant (the leader's taper, petiole thickness by leaf size) are
 * authored per path in PHP, because they are geometry.
 */
.c-plant [data-grow] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c-plant__stem {
    stroke: #2A5F3C;
}

.c-plant__stem--collar {
    stroke: #1D4A2E;
}

/* The lit side of the stem. See the note beside it in the component. */
.c-plant__stem-sheen {
    stroke: #56986A;
    opacity: 0.5;
}

/* The leaf petiole and rachis: one stalk, lighter than the leader it leaves. */
.c-plant__petiole {
    stroke: #2E6B44;
}

/* The truss rachis. Greener and thinner — it is a season's growth, not wood. */
.c-plant__rachis {
    stroke: #34754B;
}

/*
 * The support string the crop is trained up. Pale and thin on purpose: it is
 * the thing that says "greenhouse" rather than "plant", and it has to do that
 * from behind the drawing rather than in front of it.
 */
.c-plant__twine {
    stroke: #BEB5A3;
    stroke-width: 1.8;
    opacity: 0.62;
}

/*
 * Venation. Drawn inside the leaflet symbols, so these widths are in SYMBOL
 * units and are divided by the leaf's own scale — roughly 0.45 — when placed.
 * A vein is what stops a filled blade reading as a sticker.
 */
.c-plant__vein {
    stroke: #1B472E;
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: 0.3;
}

/* Flower and fruit stalks, and the abscission knuckle on the fruit pedicel. */
.c-plant__pedicel {
    stroke: #2F7A4C;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.c-plant__knuckle {
    fill: #2A6B43;
}

.c-plant__calyx {
    fill: #2E7A4B;
}

.c-plant__sepal {
    stroke: #2F7A4C;
    stroke-width: 1.4;
    stroke-linecap: round;
}

/* Coir particles behind the root mat, seen through the film. */
.c-plant__substrate ellipse {
    fill: #C7A87C;
}

/*
 * Roots. Pale, fine, numerous and clipped inside the bag window: the root zone
 * is the argument the prose makes, and the drawing supports it rather than
 * shouting it. Nothing here is ever transformed.
 */
.c-plant__root {
    stroke: #EADDC9;
    stroke-width: 1.7;
    opacity: 0.7;
}

.c-plant__root--fine {
    stroke-width: 1.0;
    opacity: 0.44;
}

/* --------------------------------------------------------------------------
   1b. Phase 5C organs
   Six more crops brought six more kinds of part. Every one of them is painted
   here rather than in the markup, for the same reason the tomato's are: the SVG
   carries geometry and the stylesheet carries appearance, so a weight or a tone
   can be re-valued for the whole system in one place.

   Nothing below is animated. Tendrils, runners, thorns, posts and wires all
   draw on the same [data-grow] stroke-dash mechanism the stems use, so they
   inherit their motion and need only their colour.
   -------------------------------------------------------------------------- */

/* Woody stems: blueberry canes, cane fruit, rose bent shoots. Browner and
   duller than a season's green growth, which is what makes a bush read as a
   perennial rather than as a large annual. */
.c-plant__stem--wood {
    stroke: #6B5334;
}

/* The cucumber tendril. Thin, pale and slightly translucent: it is a detail
   that identifies the crop, not a structural member. */
.c-plant__tendril {
    stroke: #6FAE73;
    opacity: 0.8;
}

/* The single strawberry runner. Paler still — it is the newest growth on the
   plant and the one part a fruiting crop would have removed. */
.c-plant__runner {
    stroke: #79B27C;
    opacity: 0.72;
}

/* Rose prickles. Deliberately the same tone as the stem so they read as part of
   it rather than as attached objects. */
.c-plant__thorn {
    stroke: #2A5F3C;
}

/* The cane-fruit trellis: posts and wires. Grey, thin, and behind everything —
   greenhouse hardware, not plant. */
.c-plant__post {
    stroke: #A9A292;
    stroke-width: 5;
    opacity: 0.7;
}

.c-plant__wire {
    stroke: #B7B0A0;
    stroke-width: 1.6;
    opacity: 0.6;
}

/* The strawberry table frame. Painted, galvanised steel. */
.c-plant__frame rect {
    fill: #B3AC9E;
}

/* Green parts of a flower or fruit that must never take the ripening colour:
   sepals drawn as fills, the cucumber ovary, the calyx behind a rose bud. */
.c-plant__calyx-fill,
.c-plant__ovary {
    fill: #2E7A4B;
}

/* Surface detail inside a fruit body: pepper lobe creases, cucumber ribbing. */
.c-plant__ribs path {
    stroke: #14320F;
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.22;
}

/* Strawberry achenes. Pale pits in the surface rather than seeds on it, which
   is what they look like at the size this drawing is ever displayed. */
.c-plant__achenes ellipse {
    fill: #F6EFD8;
    opacity: 0.62;
}

/* --------------------------------------------------------------------------
   2. The rail instance
   The mount is already absolutely positioned over the rail canvas by crop.css
   section 13. All that is left is to let the drawing use the whole of it and to
   keep the progress line clear of the plant's right-hand foliage.
   -------------------------------------------------------------------------- */

.c-crop-rail--procedural .c-crop-rail__mount {
    /*
     * Take the lean. crop.css gives the photographic canvas the 32px column gap
     * to grow into; the mount is inset:0 and would not have it, which would cost
     * the plant that width for no reason. Matching the canvas keeps the two
     * systems interchangeable.
     */
    inset-inline-start: calc(var(--crop-rail-lean) * -1);

    /*
     * Head room. The SVG fits by height, so with no padding the topmost leaf
     * lands on the rail's top caption and the current-stage label. This is the
     * procedural equivalent of --crop-plant-fill in the photographic system: the
     * mature plant takes roughly 88-93% of the rail rather than all of it.
     */
    padding-block-start: 2.5rem;
}

/* --------------------------------------------------------------------------
   3. The contained instance
   Below the rail breakpoint there is no rail, no pinning and no scrub. The same
   plant appears once, in the reading flow, at a contained size — a figure, not
   a scroll sequence. It is sized by aspect ratio so nothing shifts as it grows.
   -------------------------------------------------------------------------- */

.c-crop-plant-figure {
    margin: 0;
    display: grid;
    gap: var(--space-sm);
}

.c-crop-plant-figure__stage {
    position: relative;
    display: grid;
    place-items: end center;
    /*
     * A standing plant is tall and narrow, and the box has to be too or the
     * drawing sits in a wide field of empty ground. Capped and centred so it
     * never runs the full width of a large phone and never grows past the
     * screen on a small one.
     */
    aspect-ratio: 2 / 3;
    inline-size: 100%;
    max-inline-size: 22rem;
    margin-inline: auto;
    max-block-size: 32rem;
    padding: var(--space-md) var(--space-md) 0;
    border: var(--border-hairline);
    border-radius: var(--radius-xl);
    background: linear-gradient(
        180deg,
        var(--coco-cream-50) 0%,
        var(--coco-cream-100) 64%,
        var(--coco-coir-100) 100%
    );
    overflow: hidden;
}

.c-crop-plant-figure__caption {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
}

/* The rail owns the story above 64em, so the contained figure stands down. */
@media (min-width: 64em) {
    .l-crop-story__content .c-crop-plant-figure {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   4. Current stage label
   One small line under the top caption, naming the biological stage the plant
   is actually in. Every stage is printed; the engine marks one of them current
   and the rest are laid over it at zero opacity, so the label changes without
   the box ever resizing and without a milestone card being parked on screen.

   Transitions ARE allowed here: the label is a discrete state change, not a
   scrubbed property, so there is nothing for them to fight.
   -------------------------------------------------------------------------- */

.c-crop-progress__stage {
    position: absolute;
    inset-block-start: 2.6rem;
    inset-inline-end: var(--space-md);
    display: block;
    inline-size: 12rem;
    block-size: 2.4em;
    text-align: end;
    pointer-events: none;
}

.c-crop-progress__stage-item {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    font-size: var(--text-2xs);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--coco-green-700);
    text-shadow: 0 0 6px var(--color-bg), 0 1px 3px var(--color-bg);
    opacity: 0;
    transform: translateY(0.25rem);
    transition: opacity 320ms ease, transform 320ms ease;
}

.c-crop-progress__stage-item[data-current] {
    opacity: 1;
    transform: none;
}

.c-crop-progress__stage-item i {
    font-style: normal;
    color: var(--color-text-muted);
}

/*
 * With no JavaScript nothing is ever marked current, so the first stage would
 * be the only thing the box could show — and showing "01 Establishment" beside
 * a fully grown plant would be wrong. The label is therefore hidden until the
 * engine takes over, which the story wrapper's own is-live class signals.
 */
.l-crop-story:not(.is-live) .c-crop-progress__stage {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .c-crop-progress__stage-item {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   5. Debug overlay
   ?cropdebug=1 on staging only. A tuning instrument: progress to three
   decimals, the current stage, and a slider that takes the timeline off the
   scrollbar so a single moment can be held still and looked at.
   -------------------------------------------------------------------------- */

.c-crop-debug {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-start: 1rem;
    z-index: 9999;
    inline-size: 15rem;
    padding: 0.75rem;
    border-radius: var(--radius-md, 0.5rem);
    background: rgba(8, 26, 16, 0.92);
    color: #F0F7F3;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.c-crop-debug__row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
}

.c-crop-debug__row span {
    opacity: 0.66;
}

.c-crop-debug__slider {
    inline-size: 100%;
    margin-block: 0.5rem 0.375rem;
    accent-color: #55A175;
}

.c-crop-debug__resume {
    inline-size: 100%;
    padding: 0.3125rem;
    border: 1px solid rgba(240, 247, 243, 0.28);
    border-radius: 0.25rem;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: 0.45;
}

.c-crop-debug[data-manual] .c-crop-debug__resume {
    opacity: 1;
    border-color: #55A175;
}