/* Local extension: the shared set has no to-scale area drawing, and the card
   has no internal flow. Shared components supply every appearance value
   (card, fields, controls, stats, callouts, metric); local rules cover
   arrangement, the select chevron, the drawing and its legend, and the
   footnote. Every selector is rooted at the block class. Sizing uses container
   queries: the block sits in a ~810px content column on any screen width. */

/* The shared card has no internal flow; stack its sections on a shared gap.
   The card is the query context so the block reflows to its embedded width. */
.acre-size-calculator-block .acre-size-calculator__card {
    container-type: inline-size;
    display: grid;
    gap: var(--clvr-space-6);
}

/* Decorative Lucide glyph before the heading text. */
.acre-size-calculator-block .acre-size-calculator__heading {
    display: flex;
    align-items: center;
    gap: var(--clvr-space-3);
    margin: 0;
}

.acre-size-calculator-block .acre-size-calculator__heading-icon {
    color: var(--clvr-color-primary);
}

/* Lot size beside its unit when there is room; the unit is the narrower one. */
.acre-size-calculator-block .acre-size-calculator__fields {
    display: grid;
    gap: var(--clvr-space-4);
    align-items: start;
}

@container (min-width: 32.5rem) {
    .acre-size-calculator-block .acre-size-calculator__fields {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* Native select: the host theme strips the browser arrow, so the shared
   chevron glyph marks it as a dropdown. */
.acre-size-calculator-block .acre-size-calculator__select {
    appearance: none;
    padding-inline-end: var(--clvr-space-8);
    cursor: pointer;
}

.acre-size-calculator-block .acre-size-calculator__chevron {
    position: absolute;
    inset-inline-end: var(--clvr-space-3);
    color: var(--clvr-color-text-muted);
    pointer-events: none;
}

/* Results region: filled by script-view.js; collapses before the first
   render so the card gap does not open around an empty box. */
.acre-size-calculator-block .acre-size-calculator__results {
    display: grid;
    gap: var(--clvr-space-4);
}

.acre-size-calculator-block .acre-size-calculator__results:empty {
    display: none;
}

/* Two or three headline figures. In a row on their own; one column when
   they sit beside the drawing. Shared stat grids are a fixed four-up. */
.acre-size-calculator-block .acre-size-calculator__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--clvr-space-3);
}

/* Icon-led stat labels: the filled stat has no icon slot, so the label row
   holds the decorative Lucide glyph in the primary colour. */
.acre-size-calculator-block .acre-size-calculator__stats dt {
    display: flex;
    align-items: center;
    gap: var(--clvr-space-2);
}

.acre-size-calculator-block .acre-size-calculator__stats dt .clvr-icon {
    color: var(--clvr-color-primary);
}

/* The sentence is body copy, not callout small print: shared callout
   paragraphs are muted 0.875rem. */
.acre-size-calculator-block .acre-size-calculator__payoff p {
    color: var(--clvr-color-text);
    font-size: inherit;
}

/* Drawing on the left, every figure and sentence stacked on the right, so the
   square drawing does not claim a whole row. */
.acre-size-calculator-block .acre-size-calculator__readout {
    display: grid;
    gap: var(--clvr-space-4);
}

@container (min-width: 35rem) {
    .acre-size-calculator-block .acre-size-calculator__readout {
        grid-template-columns: 16.25rem minmax(0, 1fr);
        align-items: start;
    }

    .acre-size-calculator-block .acre-size-calculator__readout:not(.acre-size-calculator__readout--no-diagram) .acre-size-calculator__stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .acre-size-calculator-block .acre-size-calculator__readout--no-diagram {
        grid-template-columns: minmax(0, 1fr);
    }
}

.acre-size-calculator-block .acre-size-calculator__readout-side {
    display: grid;
    gap: var(--clvr-space-3);
    min-width: 0;
}

/* The drawing panel: a quiet ground so the dashed acre outline reads. */
.acre-size-calculator-block .acre-size-calculator__diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--clvr-space-3);
    padding: var(--clvr-space-4);
    border: 1px solid var(--clvr-color-border-subtle);
    border-radius: var(--clvr-radius-md);
    background: var(--clvr-color-surface-muted);
}

/* Drawing geometry, not block width: the SVG's own 220-unit square. */
.acre-size-calculator-block .acre-size-calculator__svg {
    display: block;
    width: 13.75rem;
    max-inline-size: 100%;
    height: auto;
}

.acre-size-calculator-block .acre-size-calculator__svg-acre {
    fill: none;
    stroke: var(--clvr-color-text);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.acre-size-calculator-block .acre-size-calculator__svg-shape,
.acre-size-calculator-block .acre-size-calculator__svg-tile {
    fill: color-mix(in srgb, var(--clvr-color-primary) 22%, transparent);
    stroke: var(--clvr-color-primary);
    stroke-width: 1;
}

/* Legend swatches repeat the drawing's own fill and stroke, so the two shapes
   differ by the dashed outline as well as by colour. */
.acre-size-calculator-block .acre-size-calculator__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--clvr-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.acre-size-calculator-block .acre-size-calculator__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--clvr-space-2);
}

.acre-size-calculator-block .acre-size-calculator__legend-item::before {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--clvr-radius-sm);
    content: "";
}

.acre-size-calculator-block .acre-size-calculator__legend-item--shape::before {
    border: 1px solid var(--clvr-color-primary);
    background: color-mix(in srgb, var(--clvr-color-primary) 22%, transparent);
}

.acre-size-calculator-block .acre-size-calculator__legend-item--acre::before {
    border: 1.5px dashed var(--clvr-color-text);
}

/* Footnote: editor-supplied rich text under a divider. The shared
   description class sets its size and colour; the host theme's paragraph
   rules would otherwise restyle the rich-text <p>. */
.acre-size-calculator-block .acre-size-calculator__footnote {
    padding-top: var(--clvr-space-4);
    border-top: 1px solid var(--clvr-color-border-subtle);
}

.acre-size-calculator-block .acre-size-calculator__footnote p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Host-theme conflict: LWC's content link colour is a light blue with no
   underline; rich-text footnote links use the shared link token instead. */
.acre-size-calculator-block .acre-size-calculator__footnote a {
    color: var(--clvr-color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.acre-size-calculator-block .acre-size-calculator__footnote a:hover {
    color: var(--clvr-color-link-hover);
}