/* The public planting guide.
 *
 * The page is a tool wearing GreenInside's clothes, so it is built on a fixed
 * type and space scale rather than the editorial page's fluid one: the console
 * has to read the same on a phone in a garden and on a desktop, and a heading
 * that shrinks with its container makes a form look broken rather than
 * responsive. The two closing sections are editorial and keep a fluid scale.
 *
 * Colour is restrained: ivory paper, moss for structure and selection, and clay
 * used only twice, on the submit button and on the first action a gardener is
 * asked to take. Every token falls back to a standalone value so the guide
 * still styles itself under a theme that does not publish the GreenInside
 * palette.
 */

.gi-pg {
    /* Surfaces */
    --gi-pg-paper: var(--gi-ivory-50, oklch(98.7% .008 95));
    --gi-pg-sheet: oklch(99.4% .005 96);
    --gi-pg-wash: var(--gi-sage-100, oklch(94% .02 113));
    --gi-pg-wash-soft: color-mix(in oklch, var(--gi-pg-wash) 45%, var(--gi-pg-paper));

    /* Ink */
    --gi-pg-ink: var(--gi-ink, oklch(29% .035 151));
    --gi-pg-muted: var(--gi-muted, oklch(48% .033 134));
    --gi-pg-forest: var(--gi-moss-900, oklch(34% .052 152));
    --gi-pg-forest-bright: var(--gi-moss-800, oklch(40% .059 149));
    --gi-pg-olive: var(--gi-moss-700, oklch(49% .065 125));

    /* Accent, used twice */
    --gi-pg-clay: oklch(52% .12 43);
    --gi-pg-clay-dark: oklch(44% .11 42);

    /* Lines, states */
    --gi-pg-line: var(--gi-border, oklch(88.5% .024 123));
    --gi-pg-line-strong: color-mix(in oklch, var(--gi-pg-line) 62%, var(--gi-pg-muted));
    --gi-pg-danger: oklch(43% .16 27);
    --gi-pg-danger-wash: oklch(96% .018 27);
    --gi-pg-focus: var(--gi-focus, oklch(47% .09 126));
    --gi-pg-lift: 0 1px 2px color-mix(in oklch, var(--gi-pg-forest) 7%, transparent),
                  0 12px 32px -18px color-mix(in oklch, var(--gi-pg-forest) 28%, transparent);

    /* Fixed type scale, ratio ~1.2. Nothing below 13px. */
    --gi-pg-xs: .8125rem;
    --gi-pg-sm: .875rem;
    --gi-pg-base: .9375rem;
    --gi-pg-md: 1.0625rem;
    --gi-pg-lg: 1.375rem;
    --gi-pg-xl: 1.75rem;
    --gi-pg-2xl: 2.25rem;

    /* Space scale */
    --gi-pg-1: .25rem;
    --gi-pg-2: .5rem;
    --gi-pg-3: .75rem;
    --gi-pg-4: 1rem;
    --gi-pg-5: 1.5rem;
    --gi-pg-6: 2rem;
    --gi-pg-7: 3rem;
    --gi-pg-8: 4.5rem;

    --gi-pg-r-sm: .5rem;
    --gi-pg-r-md: .875rem;
    --gi-pg-r-lg: 1.25rem;

    --gi-pg-ease: cubic-bezier(.2, .8, .3, 1);
    --gi-pg-fast: 150ms;
    --gi-pg-mid: 220ms;

    box-sizing: border-box;
    color: var(--gi-pg-ink);
    container-type: inline-size;
    font-family: var(--gi-font-interface, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
    font-size: var(--gi-pg-base);
    inline-size: 100%;
    line-height: 1.6;
    max-inline-size: 84rem;
    overflow-wrap: break-word;
}

/* Declared outright rather than inherited: a <details> slots its content into a
   UA shadow tree, and box-sizing: inherit resolves to the initial value across
   that boundary, which silently gave every control in the console its padding
   on top of a 100% width. */
.gi-pg *,
.gi-pg *::before,
.gi-pg *::after { box-sizing: border-box; }
.gi-pg :is(button, input, select, textarea) { font: inherit; }
.gi-pg :is(h2, h3, h4, p, ul, ol, dl) { margin-block-start: 0; }
.gi-pg :is(h2, h3, h4) { color: var(--gi-pg-forest); letter-spacing: -.02em; line-height: 1.16; text-wrap: balance; }
.gi-pg a { color: var(--gi-pg-forest-bright); text-decoration-thickness: .07em; text-underline-offset: .2em; }
.gi-pg a:hover { color: var(--gi-pg-clay-dark); }
.gi-pg :is(a, button, summary):focus-visible,
.gi-pg :is(input, select, textarea):focus-visible { outline: 3px solid var(--gi-pg-focus); outline-offset: 3px; }
.gi-pg [tabindex="-1"]:focus { outline: none; }

.gi-pg-eyebrow {
    color: var(--gi-pg-olive);
    font-size: var(--gi-pg-xs);
    font-weight: 800;
    letter-spacing: .1em;
    margin-bottom: var(--gi-pg-3);
    text-transform: uppercase;
}

/* A caret that turns with its disclosure. */
.gi-pg-chevron {
    block-size: .45rem;
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    flex: 0 0 auto;
    inline-size: .45rem;
    transform: translateY(-.12em) rotate(45deg);
    transition: transform var(--gi-pg-mid) var(--gi-pg-ease);
}
.gi-pg details[open] > summary .gi-pg-chevron { transform: translateY(.1em) rotate(-135deg); }

/* ---------- Section opening ---------- */

.gi-pg-intro { max-inline-size: 56ch; padding-block-end: var(--gi-pg-5); }
.gi-pg-intro h2 { font-size: var(--gi-pg-xl); margin-bottom: var(--gi-pg-2); }
.gi-pg-intro__lead { color: var(--gi-pg-muted); font-size: var(--gi-pg-md); margin-bottom: 0; }

/* ---------- The console ---------- */

.gi-pg-console {
    background: var(--gi-pg-sheet);
    border: 1px solid var(--gi-pg-line);
    border-radius: var(--gi-pg-r-lg);
    box-shadow: var(--gi-pg-lift);
    scroll-margin-top: 6rem;
}

.gi-pg-console__summary {
    align-items: center;
    color: var(--gi-pg-forest);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gi-pg-2) var(--gi-pg-4);
    list-style: none;
    min-block-size: 3.75rem;
    padding: var(--gi-pg-3) var(--gi-pg-5);
}
.gi-pg-console__summary::-webkit-details-marker { display: none; }
.gi-pg-console[open] > .gi-pg-console__summary { border-block-end: 1px solid var(--gi-pg-line); }

.gi-pg-console__label {
    font-size: var(--gi-pg-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.gi-pg-recap { display: flex; flex-wrap: wrap; gap: var(--gi-pg-2); margin-inline-end: auto; }
.gi-pg-recap__item {
    background: var(--gi-pg-wash);
    border-radius: 999px;
    font-size: var(--gi-pg-xs);
    font-weight: 700;
    padding: .2rem .6rem;
}
.gi-pg-recap__item::first-letter { text-transform: uppercase; }

.gi-pg-console__toggle {
    align-items: center;
    color: var(--gi-pg-forest-bright);
    display: inline-flex;
    font-size: var(--gi-pg-xs);
    font-weight: 750;
    gap: var(--gi-pg-2);
    margin-inline-start: auto;
}
.gi-pg-console__toggle-close,
.gi-pg-console[open] > .gi-pg-console__summary .gi-pg-console__toggle-open { display: none; }
.gi-pg-console[open] > .gi-pg-console__summary .gi-pg-console__toggle-close { display: inline; }
.gi-pg-console__summary:hover .gi-pg-console__toggle { color: var(--gi-pg-clay-dark); }

.gi-pg-console__body { padding: var(--gi-pg-6) var(--gi-pg-5) var(--gi-pg-5); }

/* ---------- Questions ---------- */

.gi-pg-form { display: grid; gap: var(--gi-pg-5); }
/* Each question is a step, so it is ruled off from the next one. The rule sits
   under a question rather than over it: a fieldset cuts a notch out of its own
   top border for the legend, which leaves the line broken across the label. */
.gi-pg-form > .gi-pg-q { border-block-end: 1px solid var(--gi-pg-line); padding-block-end: var(--gi-pg-5); }
.gi-pg-form > .gi-pg-actions { border-block-start: 1px solid var(--gi-pg-line); padding-block-start: var(--gi-pg-5); }
.gi-pg-form__pair { display: grid; gap: var(--gi-pg-5) var(--gi-pg-6); grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }

.gi-pg-q { border: 0; margin: 0; min-inline-size: 0; padding: 0; }
.gi-pg-q__legend { align-items: center; display: flex; gap: var(--gi-pg-3); padding: 0; }
.gi-pg-q__step {
    align-items: center;
    background: var(--gi-pg-wash);
    border-radius: 999px;
    block-size: 1.75rem;
    color: var(--gi-pg-olive);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    inline-size: 1.75rem;
    justify-content: center;
}
.gi-pg-q__title { color: var(--gi-pg-forest); font-size: var(--gi-pg-md); font-weight: 800; }
.gi-pg-q__help {
    color: var(--gi-pg-muted);
    font-size: var(--gi-pg-sm);
    margin: var(--gi-pg-2) 0 var(--gi-pg-4);
    max-inline-size: 62ch;
    padding-inline-start: calc(1.75rem + var(--gi-pg-3));
}
.gi-pg-q__error {
    color: var(--gi-pg-danger);
    font-size: var(--gi-pg-sm);
    font-weight: 700;
    margin: 0 0 var(--gi-pg-3);
    padding-inline-start: calc(1.75rem + var(--gi-pg-3));
}
.gi-pg-q--invalid .gi-pg-opt { border-color: color-mix(in oklch, var(--gi-pg-danger) 45%, var(--gi-pg-line)); }

.gi-pg-opts { display: grid; gap: var(--gi-pg-2); }
.gi-pg-opts--month { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gi-pg-opts--climate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gi-pg-opts--space { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gi-pg-opts--exposure { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* One control, used for all four questions. */
.gi-pg-opt {
    background: var(--gi-pg-paper);
    border: 1px solid var(--gi-pg-line-strong);
    border-radius: var(--gi-pg-r-sm);
    cursor: pointer;
    display: flex;
    margin: 0;
    min-block-size: 3.25rem;
    padding: var(--gi-pg-3) 2.25rem var(--gi-pg-3) var(--gi-pg-3);
    position: relative;
    transition: background-color var(--gi-pg-fast) var(--gi-pg-ease),
                border-color var(--gi-pg-fast) var(--gi-pg-ease),
                box-shadow var(--gi-pg-fast) var(--gi-pg-ease);
}
.gi-pg-opt input {
    block-size: 1px;
    inline-size: 1px;
    inset-block-start: var(--gi-pg-3);
    inset-inline-end: var(--gi-pg-3);
    margin: 0;
    opacity: 0;
    position: absolute;
}
.gi-pg-opt__body { display: flex; flex-direction: column; gap: .15rem; min-inline-size: 0; }
.gi-pg-opt__name { display: block; font-size: var(--gi-pg-base); font-weight: 700; line-height: 1.3; }
.gi-pg-opts--month .gi-pg-opt__name::first-letter { text-transform: uppercase; }
.gi-pg-opt__note { color: var(--gi-pg-muted); font-size: var(--gi-pg-xs); line-height: 1.4; }

.gi-pg-opt__check {
    color: var(--gi-pg-forest);
    inset-block-start: .7rem;
    inset-inline-end: .55rem;
    opacity: 0;
    position: absolute;
    transform: scale(.7);
    transition: opacity var(--gi-pg-fast) var(--gi-pg-ease), transform var(--gi-pg-fast) var(--gi-pg-ease);
}

.gi-pg-opt:hover { background: var(--gi-pg-wash-soft); border-color: var(--gi-pg-olive); }
.gi-pg-opt:has(input:focus-visible) { outline: 3px solid var(--gi-pg-focus); outline-offset: 3px; }
.gi-pg-opt:active { background: var(--gi-pg-wash); }
.gi-pg-opt:has(input:checked) {
    background: var(--gi-pg-wash);
    border-color: var(--gi-pg-forest);
    box-shadow: inset 0 0 0 1px var(--gi-pg-forest);
}
.gi-pg-opt:has(input:checked) .gi-pg-opt__name { color: var(--gi-pg-forest); }
.gi-pg-opt:has(input:checked) .gi-pg-opt__note { color: var(--gi-pg-olive); }
.gi-pg-opt:has(input:checked) .gi-pg-opt__check { opacity: 1; transform: none; }

/* The administrator's display preview renders the whole form inside a disabled
   fieldset, so the options have to read as unavailable rather than as pressable. */
.gi-pg-opt:has(input:disabled) { cursor: default; opacity: .6; }
.gi-pg-opt:has(input:disabled):hover { background: var(--gi-pg-paper); border-color: var(--gi-pg-line-strong); }
.gi-pg-opt:has(input:checked:disabled):hover { background: var(--gi-pg-wash); border-color: var(--gi-pg-forest); }

/* The "I do not know" answer is a way out, not a peer of the real answers. */
.gi-pg-opt--soft { background: transparent; border-style: dashed; grid-column: 1 / -1; min-block-size: 0; }
.gi-pg-opt--soft .gi-pg-opt__name { color: var(--gi-pg-muted); font-weight: 700; }

/* ---------- Actions ---------- */

.gi-pg-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gi-pg-4) var(--gi-pg-5);
}
.gi-pg-submit {
    align-items: center;
    background: var(--gi-pg-clay);
    border: 1px solid var(--gi-pg-clay);
    border-radius: var(--gi-pg-r-sm);
    color: var(--gi-pg-paper);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--gi-pg-md);
    font-weight: 800;
    gap: var(--gi-pg-3);
    justify-content: center;
    min-block-size: 3.25rem;
    padding: var(--gi-pg-3) var(--gi-pg-6);
    transition: background-color var(--gi-pg-fast) var(--gi-pg-ease), transform var(--gi-pg-fast) var(--gi-pg-ease);
}
.gi-pg-submit:hover { background: var(--gi-pg-clay-dark); border-color: var(--gi-pg-clay-dark); }
.gi-pg-submit:active { transform: translateY(1px); }
.gi-pg-submit:disabled { background: var(--gi-pg-muted); border-color: var(--gi-pg-muted); cursor: default; opacity: .6; transform: none; }
.gi-pg-reset {
    align-items: center;
    display: inline-flex;
    font-size: var(--gi-pg-sm);
    font-weight: 750;
    min-block-size: 2.75rem;
}
.gi-pg-actions__meta {
    color: var(--gi-pg-muted);
    font-size: var(--gi-pg-xs);
    margin: 0 0 0 auto;
    text-align: end;
}

/* ---------- Alerts and outcomes ---------- */

.gi-pg-alert {
    border: 1px solid var(--gi-pg-line);
    border-radius: var(--gi-pg-r-md);
    margin-bottom: var(--gi-pg-5);
    padding: var(--gi-pg-4) var(--gi-pg-5);
}
.gi-pg-alert h3 { font-size: var(--gi-pg-md); margin-bottom: var(--gi-pg-2); }
.gi-pg-alert ul { margin-bottom: 0; padding-inline-start: 1.1rem; }
.gi-pg-alert--error { background: var(--gi-pg-danger-wash); border-color: color-mix(in oklch, var(--gi-pg-danger) 45%, transparent); }
.gi-pg-alert--error h3 { color: var(--gi-pg-danger); }

.gi-pg-outcome {
    background: var(--gi-pg-wash-soft);
    border: 1px solid var(--gi-pg-line);
    border-radius: var(--gi-pg-r-lg);
    margin-block-start: var(--gi-pg-6);
    padding: var(--gi-pg-6);
    scroll-margin-top: 6rem;
}
.gi-pg-outcome h2 { font-size: var(--gi-pg-lg); margin-bottom: var(--gi-pg-3); }
.gi-pg-outcome p { color: var(--gi-pg-muted); margin-bottom: 0; max-inline-size: 68ch; }
.gi-pg-outcome--lead { margin-block: 0 var(--gi-pg-5); }
.gi-pg-outcome__next { display: flex; flex-wrap: wrap; gap: var(--gi-pg-2) var(--gi-pg-5); margin-block-start: var(--gi-pg-4) !important; }
.gi-pg-outcome__next a { align-items: center; display: inline-flex; font-size: var(--gi-pg-sm); font-weight: 800; gap: var(--gi-pg-2); min-block-size: 2.75rem; }
.gi-pg-outcome__month::first-letter { text-transform: uppercase; }
.gi-pg-outcome__count {
    background: var(--gi-pg-wash);
    border-radius: 999px;
    color: var(--gi-pg-olive);
    font-size: var(--gi-pg-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    padding: .1rem .5rem;
}
.gi-pg-outcome p + p { margin-block-start: var(--gi-pg-3); }

/* ---------- Results ---------- */

.gi-pg-results { margin-block-start: var(--gi-pg-7); scroll-margin-top: 6rem; }
.gi-pg-results__heading { border-block-end: 1px solid var(--gi-pg-line); margin-bottom: var(--gi-pg-5); padding-block-end: var(--gi-pg-4); }
.gi-pg-results__heading h2 { font-size: var(--gi-pg-2xl); margin-bottom: var(--gi-pg-2); }
.gi-pg-results__lead { color: var(--gi-pg-muted); font-size: var(--gi-pg-sm); margin-bottom: 0; }
.gi-pg-results__list { display: grid; gap: var(--gi-pg-4); list-style: none; margin: 0; padding: 0; }

.gi-pg-result {
    background: var(--gi-pg-sheet);
    border: 1px solid var(--gi-pg-line);
    border-radius: var(--gi-pg-r-lg);
    overflow: clip;
}

.gi-pg-result__head {
    align-items: baseline;
    column-gap: var(--gi-pg-5);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--gi-pg-5) var(--gi-pg-5) var(--gi-pg-4);
}
.gi-pg-result__head > :is(p, h3) { grid-column: 1; margin-bottom: 0; }
.gi-pg-method {
    background: var(--gi-pg-wash);
    border-radius: 999px;
    color: var(--gi-pg-olive);
    font-size: var(--gi-pg-xs);
    font-weight: 800;
    justify-self: start;
    letter-spacing: .06em;
    margin-bottom: var(--gi-pg-3) !important;
    padding: .2rem .65rem;
    text-transform: uppercase;
}
.gi-pg-result__head h3 { font-size: var(--gi-pg-xl); letter-spacing: -.03em; }
.gi-pg-result__botanical { color: var(--gi-pg-muted); font-size: var(--gi-pg-sm); margin-block-start: var(--gi-pg-1) !important; }
.gi-pg-result__review {
    color: var(--gi-pg-muted);
    font-size: var(--gi-pg-xs);
    font-variant-numeric: tabular-nums;
    grid-area: 1 / 2 / 2 / 3;
    justify-self: end;
    margin-bottom: 0;
    text-align: end;
}

.gi-pg-result__body {
    align-items: start;
    border-block-start: 1px solid var(--gi-pg-line);
    display: grid;
    gap: var(--gi-pg-5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: var(--gi-pg-5);
}

/* The one thing a gardener is asked to do, given the page's only accent. */
.gi-pg-act {
    background: color-mix(in oklch, var(--gi-pg-clay) 7%, var(--gi-pg-paper));
    border: 1px solid color-mix(in oklch, var(--gi-pg-clay) 26%, transparent);
    border-radius: var(--gi-pg-r-md);
    padding: var(--gi-pg-4);
}
.gi-pg-act__label {
    color: var(--gi-pg-clay-dark);
    font-size: var(--gi-pg-xs);
    font-weight: 800;
    letter-spacing: .1em;
    margin-bottom: var(--gi-pg-2);
    text-transform: uppercase;
}
.gi-pg-act__text { font-size: var(--gi-pg-md); margin-bottom: 0; max-inline-size: 58ch; }

.gi-pg-specs { display: flex; flex-wrap: wrap; gap: var(--gi-pg-2); margin: var(--gi-pg-4) 0 0; }
.gi-pg-specs > div {
    background: var(--gi-pg-paper);
    border: 1px solid color-mix(in oklch, var(--gi-pg-clay) 22%, transparent);
    border-radius: var(--gi-pg-r-sm);
    padding: var(--gi-pg-2) var(--gi-pg-3);
}
.gi-pg-specs dt { color: var(--gi-pg-muted); font-size: var(--gi-pg-xs); }
.gi-pg-specs dd {
    color: var(--gi-pg-forest);
    font-size: var(--gi-pg-md);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    margin: 0;
}
.gi-pg-specs__note { color: var(--gi-pg-muted); font-size: var(--gi-pg-xs); margin: var(--gi-pg-2) 0 0; }

.gi-pg-notes { display: grid; gap: var(--gi-pg-5); }
.gi-pg-notes h4 { font-size: var(--gi-pg-md); margin-bottom: var(--gi-pg-2); }
.gi-pg-notes p { margin-bottom: 0; max-inline-size: 62ch; }
.gi-pg-notes ul { margin-bottom: 0; padding-inline-start: 1.1rem; }
.gi-pg-notes li + li { margin-block-start: var(--gi-pg-2); }

.gi-pg-record {
    border-block-start: 1px solid var(--gi-pg-line);
    margin-bottom: 0;
    padding: var(--gi-pg-3) var(--gi-pg-5);
}
.gi-pg-record a { align-items: center; display: inline-flex; font-size: var(--gi-pg-sm); font-weight: 750; gap: var(--gi-pg-2); min-block-size: 2.5rem; }

.gi-pg-sources { border-block-start: 1px solid var(--gi-pg-line); }
.gi-pg-sources > summary {
    align-items: center;
    color: var(--gi-pg-forest);
    cursor: pointer;
    display: flex;
    font-size: var(--gi-pg-sm);
    font-weight: 800;
    gap: var(--gi-pg-3);
    justify-content: space-between;
    list-style: none;
    min-block-size: 3.25rem;
    padding: var(--gi-pg-2) var(--gi-pg-5);
}
.gi-pg-sources > summary::-webkit-details-marker { display: none; }
.gi-pg-sources > summary:hover { background: var(--gi-pg-wash-soft); }
.gi-pg-sources__body {
    background: var(--gi-pg-wash-soft);
    border-block-start: 1px solid var(--gi-pg-line);
    font-size: var(--gi-pg-sm);
    padding: var(--gi-pg-5);
}
.gi-pg-limits { margin-bottom: var(--gi-pg-5); padding-inline-start: 1.1rem; }
.gi-pg-limits li + li { margin-block-start: var(--gi-pg-2); }
.gi-pg-source-list {
    display: grid;
    gap: var(--gi-pg-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin-bottom: var(--gi-pg-4);
    padding: 0;
}
.gi-pg-source-list li { border-block-start: 1px solid var(--gi-pg-line); padding-block-start: var(--gi-pg-3); }
.gi-pg-source-list a { font-weight: 750; }
.gi-pg-source-list p { color: var(--gi-pg-muted); margin-block: var(--gi-pg-2); }
.gi-pg-source-list small { color: var(--gi-pg-muted); font-size: var(--gi-pg-xs); font-variant-numeric: tabular-nums; }
.gi-pg-taxonomy { color: var(--gi-pg-muted); font-size: var(--gi-pg-xs); margin-bottom: 0; }

/* ---------- Administrator-collected local context ---------- */

.gi-pg-environment {
    background: var(--gi-pg-wash-soft);
    border: 1px solid var(--gi-pg-line);
    border-radius: var(--gi-pg-r-md);
    margin-block-start: var(--gi-pg-6);
    padding: var(--gi-pg-5);
}
.gi-pg-environment h3 { font-size: var(--gi-pg-md); margin-bottom: var(--gi-pg-2); }
.gi-pg-environment > p { color: var(--gi-pg-muted); font-size: var(--gi-pg-sm); max-inline-size: 72ch; }
.gi-pg-environment dl {
    display: grid;
    gap: var(--gi-pg-2) var(--gi-pg-5);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-block: var(--gi-pg-4);
}
.gi-pg-environment dt { color: var(--gi-pg-muted); font-size: var(--gi-pg-xs); }
.gi-pg-environment dd { font-size: var(--gi-pg-base); font-variant-numeric: tabular-nums; font-weight: 750; margin: 0; }
.gi-pg-environment summary { cursor: pointer; font-size: var(--gi-pg-sm); font-weight: 750; min-block-size: 2.75rem; }

.gi-pg-scope {
    border-block: 1px solid var(--gi-pg-line);
    color: var(--gi-pg-muted);
    font-size: var(--gi-pg-sm);
    margin-block: var(--gi-pg-7) 0;
    padding-block: var(--gi-pg-4);
}
.gi-pg-scope strong { color: var(--gi-pg-forest); }

/* ---------- Editorial close: explainer, questions, orientation ---------- */

.gi-pg-explainer {
    display: grid;
    gap: var(--gi-pg-5) clamp(2rem, 6vw, 6rem);
    grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr);
    padding-block: clamp(3.5rem, 8vw, 7rem);
}
.gi-pg-explainer__heading h2,
.gi-pg-faq__heading h2 { font-size: clamp(1.6rem, 2.6vw, var(--gi-pg-2xl)); letter-spacing: -.035em; margin-bottom: var(--gi-pg-4); }
.gi-pg-explainer__heading > p:last-child,
.gi-pg-faq__heading > p:last-child { color: var(--gi-pg-muted); margin-bottom: 0; }
.gi-pg-explainer__steps { list-style: none; margin: 0; padding: 0; }
.gi-pg-explainer__steps li {
    align-items: start;
    border-block-start: 1px solid var(--gi-pg-line);
    display: grid;
    gap: var(--gi-pg-4);
    grid-template-columns: 2.5rem 1fr;
    padding-block: var(--gi-pg-5);
}
.gi-pg-explainer__steps li:last-child { border-block-end: 1px solid var(--gi-pg-line); }
.gi-pg-explainer__steps > li > span { color: var(--gi-pg-clay); font-size: var(--gi-pg-xs); font-variant-numeric: tabular-nums; font-weight: 800; }
.gi-pg-explainer__steps h3 { font-size: var(--gi-pg-md); margin-bottom: var(--gi-pg-2); }
.gi-pg-explainer__steps p { color: var(--gi-pg-muted); margin-bottom: 0; max-inline-size: 60ch; }

.gi-pg-faq {
    background: var(--gi-pg-wash-soft);
    border-radius: var(--gi-pg-r-lg);
    display: grid;
    gap: var(--gi-pg-5) clamp(2rem, 5vw, 5rem);
    grid-template-columns: minmax(15rem, .75fr) minmax(0, 1.25fr);
    padding: clamp(1.75rem, 4vw, 3.5rem);
}
.gi-pg-faq__items details { border-block-start: 1px solid var(--gi-pg-line); }
.gi-pg-faq__items details:last-child { border-block-end: 1px solid var(--gi-pg-line); }
.gi-pg-faq__items summary {
    align-items: center;
    color: var(--gi-pg-forest);
    cursor: pointer;
    display: flex;
    font-size: var(--gi-pg-md);
    font-weight: 800;
    gap: var(--gi-pg-4);
    justify-content: space-between;
    list-style: none;
    min-block-size: 3.5rem;
    padding-block: var(--gi-pg-3);
}
.gi-pg-faq__items summary::-webkit-details-marker { display: none; }
.gi-pg-faq__items details p { color: var(--gi-pg-muted); margin-bottom: var(--gi-pg-4); max-inline-size: 66ch; }

.gi-pg-evidence {
    align-items: center;
    background: oklch(93% .03 68);
    border-radius: var(--gi-pg-r-lg);
    display: grid;
    gap: var(--gi-pg-4) var(--gi-pg-6);
    grid-template-columns: minmax(0, 1fr) auto;
    margin-block-start: var(--gi-pg-4);
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.gi-pg-evidence h2 { font-size: var(--gi-pg-lg); margin-bottom: var(--gi-pg-2); }
.gi-pg-evidence p { margin-bottom: 0; max-inline-size: 68ch; }
.gi-pg-evidence > a {
    align-items: center;
    color: var(--gi-pg-forest);
    display: inline-flex;
    font-size: var(--gi-pg-sm);
    font-weight: 800;
    gap: var(--gi-pg-2);
    min-block-size: 2.75rem;
    white-space: nowrap;
}

/* ---------- Administrator presets ---------- */

.gi-pg--neutral {
    --gi-pg-forest: oklch(31% .008 120);
    --gi-pg-forest-bright: oklch(39% .01 120);
    --gi-pg-olive: oklch(45% .01 120);
    --gi-pg-wash: oklch(95% .006 95);
    --gi-pg-clay: oklch(40% .012 95);
    --gi-pg-clay-dark: oklch(32% .012 95);
}
.gi-pg--neutral .gi-pg-evidence { background: oklch(94% .006 95); }

.gi-pg--contrast {
    --gi-pg-paper: oklch(98% .002 95);
    --gi-pg-sheet: oklch(100% 0 0);
    --gi-pg-ink: oklch(17% .005 95);
    --gi-pg-muted: oklch(30% .005 95);
    --gi-pg-forest: oklch(17% .005 95);
    --gi-pg-forest-bright: oklch(22% .005 95);
    --gi-pg-olive: oklch(24% .005 95);
    --gi-pg-wash: oklch(92% .004 95);
    --gi-pg-clay: oklch(21% .005 95);
    --gi-pg-clay-dark: oklch(14% .005 95);
    --gi-pg-line: oklch(45% .005 95);
    --gi-pg-line-strong: oklch(30% .005 95);
}
.gi-pg--contrast .gi-pg-evidence { background: oklch(92% .004 95); }
.gi-pg--contrast .gi-pg-opt--soft { border-style: solid; }

.gi-pg--compact {
    --gi-pg-5: 1.125rem;
    --gi-pg-6: 1.5rem;
    --gi-pg-7: 2.25rem;
    --gi-pg-8: 3rem;
}

/* ---------- Structural response ---------- */

@container (max-width: 1000px) {
    .gi-pg-form__pair { grid-template-columns: 1fr; }
    .gi-pg-opts--month { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gi-pg-opts--climate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gi-pg-result__body { grid-template-columns: 1fr; }
    .gi-pg-explainer,
    .gi-pg-faq { grid-template-columns: 1fr; }
}

@container (max-width: 700px) {
    .gi-pg { --gi-pg-6: 1.5rem; --gi-pg-7: 2.5rem; --gi-pg-8: 3rem; }
    .gi-pg-intro h2 { font-size: var(--gi-pg-lg); }
    .gi-pg-console { border-radius: var(--gi-pg-r-md); }
    .gi-pg-console__summary { padding: var(--gi-pg-3) var(--gi-pg-4); }
    .gi-pg-console__body { padding: var(--gi-pg-5) var(--gi-pg-4); }
    .gi-pg-opts--month { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gi-pg-opts--climate,
    .gi-pg-opts--space,
    .gi-pg-opts--exposure { grid-template-columns: 1fr; }
    .gi-pg-q__help,
    .gi-pg-q__error { padding-inline-start: 0; }
    .gi-pg-actions { align-items: stretch; flex-direction: column; }
    .gi-pg-submit { inline-size: 100%; }
    .gi-pg-reset { justify-content: center; }
    .gi-pg-actions__meta { margin-inline: 0; text-align: start; }
    .gi-pg-results__heading h2 { font-size: var(--gi-pg-xl); }
    .gi-pg-result__head { grid-template-columns: 1fr; padding: var(--gi-pg-4); }
    .gi-pg-result__review { grid-area: auto; justify-self: start; margin-block-start: var(--gi-pg-3) !important; text-align: start; }
    .gi-pg-result__head h3 { font-size: var(--gi-pg-lg); }
    .gi-pg-result__body,
    .gi-pg-sources__body { padding: var(--gi-pg-4); }
    .gi-pg-sources > summary,
    .gi-pg-record { padding-inline: var(--gi-pg-4); }
    .gi-pg-source-list { grid-template-columns: 1fr; }
    .gi-pg-outcome { padding: var(--gi-pg-5) var(--gi-pg-4); }
    .gi-pg-evidence { grid-template-columns: 1fr; }
    .gi-pg-evidence > a { white-space: normal; }
}

@container (max-width: 330px) {
    .gi-pg-opts--month { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .gi-pg *,
    .gi-pg *::before,
    .gi-pg *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}