/* ============================================================
   FORAGE RING — land cover map and season timeline on the apiary page
   ============================================================

   Two pictures of the same 5 km circle. Both are SVG the server sized, so
   everything here is colour, type and the frame around them; no layout
   arithmetic, and nothing that depends on the number of cover classes or
   fortnights the data happens to carry.

   Cover colours are set as inline fills by the presenter — one taxonomy, one
   palette, in Python — so this file deliberately has no list of greens in it.
   ============================================================ */

/* --- the map ------------------------------------------------ */

.forage-map {
    margin: 0;
}

.forage-map__canvas {
    /* Square: the ring is a circle, and a letterboxed circle floats. */
    aspect-ratio: 1;
    max-width: 34rem;
    margin-inline: auto;
}

/* Full-width variant: the section sits outside the two-column top, so the
   canvas can use the whole page width.  The square aspect ratio stays — the
   ring is a circle — but the circle is now much larger. */
.forage-ring--wide .forage-map__canvas {
    max-width: min(80vh, 100%);
    margin-inline: auto;
}

/* Card variant: the map lives inside a passport-frame--evidence, same as the
   timeline and donut.  It is visually smaller than the old full-bleed ring but
   the layout is now unified across all three data cards. */
.forage-ring--card .forage-map__canvas {
    max-width: min(60vh, 100%);
    margin-inline: auto;
}

/* Padding body for the map card — same horizontal rhythm as .forage-timeline-body. */
.forage-map-body {
    padding: 0.75rem 1.1rem 1rem;
}

.forage-map__svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The unclassified remainder of the circle. Visible on purpose — the gap
   between "classified" and "the whole ring" is part of what the map says. */
.forage-map__ground {
    fill: var(--plate-bg);
}

.forage-map__layer {
    stroke: none;
    cursor: crosshair;
    transition: fill-opacity 160ms ease-out;
}

/* Flight-range rings, one per kilometre. Thin enough to read as a scale
   rather than as a boundary. */
.forage-map__guide {
    fill: none;
    stroke: var(--text-subtle);
    stroke-width: 14;
    stroke-dasharray: 40 60;
    opacity: 0.45;
}

.forage-map__outline {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 26;
    stroke-dasharray: 90 60;
}

/* The circle an anonymized apiary is somewhere inside. Solid where the flight
   rings are dashed, so it does not read as one more kilometre marker. */
.forage-map__position {
    fill: rgba(var(--primary-rgb), 0.1);
    stroke: var(--primary-hover);
    stroke-width: 20;
}

.forage-map__stand {
    fill: var(--secondary-color);
    stroke: var(--surface-color);
    stroke-width: 50;
}

.forage-map__leader {
    stroke: var(--secondary-color);
    stroke-width: 26;
    opacity: 0.55;
}

/* Painted with a surface-coloured stroke under the fill so the label stays
   legible wherever the parcels put it. */
.forage-map__stand-label {
    fill: var(--secondary-color);
    stroke: var(--surface-color);
    stroke-width: 70;
    font-family: var(--font-ui);
    font-size: 230px;
    font-weight: 500;
}

/* --- legend and notes --------------------------------------- */

.forage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--text-color);
}

.forage-legend__row {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.forage-legend__swatch {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    flex: 0 0 auto;
}

.forage-legend__value {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.forage-map__note,
.forage-disclosure {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* The numbers are a demonstration. This is the sentence that says so, and it is
   styled to be read, not skipped. */
.forage-disclosure {
    padding: 0.6rem 0.75rem;
    border-inline-start: 3px solid var(--primary-color);
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    color: var(--text-color);
}

/* --- the timeline ------------------------------------------- */

.forage-timeline {
    margin: 0;
}

/* Padding wrapper: sits between the frame heading and all timeline content.
   Matches the horizontal rhythm of the heading's own padding so the axis
   numbers and controls line up with the heading text above them. */
.forage-timeline-body {
    padding: 0 1.1rem 1rem;
}

.forage-timeline__note {
    margin: 0 0 0.9rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.forage-timeline__chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.forage-timeline__grid {
    stroke: var(--hairline);
    stroke-width: 1;
}

.forage-timeline__axis {
    fill: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.forage-timeline__footnote {
    fill: var(--text-subtle);
    font-family: var(--font-ui);
    font-size: 10px;
}

.forage-timeline__harvest-band {
    fill: rgba(42, 119, 50, 0.14);
}

.forage-timeline__harvest-edge {
    fill: none;
    stroke: var(--verified-color);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.forage-timeline__nectar {
    fill: var(--primary-color);
}

.forage-timeline__honeydew {
    fill: var(--secondary-color);
}

.forage-timeline__bar {
    transition: opacity 160ms ease-out;
}

/* Measured gain, over the ceiling it rarely reaches. */
.forage-timeline__gain {
    stroke: var(--verified-color);
    stroke-width: 2.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.forage-timeline__harvest {
    fill: var(--accent-color);
    stroke: var(--surface-color);
    stroke-width: 1.5;
}

.forage-timeline__harvest-count {
    fill: var(--secondary-color);
    font-family: var(--font-ui);
    font-size: 8px;
    font-weight: 600;
}

/* Only clickable once the script has claimed the columns. */
.forage-timeline__hit--active {
    cursor: pointer;
}

.forage-timeline__key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--text-color);
}

.forage-timeline__key li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.forage-timeline__key-swatch {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    flex: 0 0 auto;
}

.forage-timeline__key-swatch--nectar {
    background: var(--primary-color);
}

.forage-timeline__key-swatch--honeydew {
    background: var(--secondary-color);
}

.forage-timeline__key-swatch--gain {
    width: 0.2rem;
    height: 0.8rem;
    border-radius: 1px;
    background: var(--verified-color);
}

/* --- season controls ---------------------------------------- */

.forage-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.forage-controls__button {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--text-color);
    background: var(--gray-100);
    border: var(--border-width) solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}

.forage-controls__button:hover {
    border-color: var(--primary-color);
}

.forage-controls__button[aria-pressed='true'] {
    background: var(--pill-bg);
    border-color: var(--pill-bg);
    color: var(--pill-text);
}

.forage-controls__range {
    flex: 1 1 11rem;
    min-width: 8rem;
    accent-color: var(--primary-color);
}

.forage-status {
    margin: 0.7rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.forage-bloom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.forage-bloom__item {
    color: var(--text-color);
}

/* --- tooltip ------------------------------------------------ */

.forage-tip {
    position: fixed;
    top: 0;
    left: -9999px;
    z-index: 60;
    pointer-events: none;
    max-width: 17rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--secondary-color);
    color: var(--text-on-dark);
    font-size: 0.75rem;
    line-height: 1.45;
    box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .forage-map__layer,
    .forage-timeline__bar {
        transition: none;
    }
}

/* ── Cover donut ─────────────────────────────────────────────────────────── */

.forage-donut {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.5rem;
    align-items: center;
    padding-block: 0.25rem;
}

/* On very narrow viewports stack the SVG above the legend. */
@media (max-width: 28rem) {
    .forage-donut {
        grid-template-columns: 1fr;
    }

    .forage-donut__svg {
        width: 60%;
        margin-inline: auto;
    }
}

.forage-donut__svg {
    display: block;
    width: clamp(7rem, 25vw, 11rem);
    height: auto;
}

.forage-donut__slice {
    /* Individual slices need no transition — the donut is purely informational
       and is not wired to the selection state. */
}

.forage-donut__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.forage-donut__row {
    display: grid;
    grid-template-columns: 1rem 1fr auto auto;
    column-gap: 0.55rem;
    align-items: baseline;
    font-size: 0.82rem;
    line-height: 1.4;
}

.forage-donut__swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: center;
}

.forage-donut__name {
    color: var(--text-default);
    font-weight: 500;
}

.forage-donut__pct {
    color: var(--text-default);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.forage-donut__ha {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}