:root {
    color-scheme: light;
    font-family: system-ui, sans-serif;
    color: #2a2f20;
    background: #eaecdf;
    --paper: #f8f9f1;
    --line: #ccd1ba;
    --olive: #4f5c34;
}

* { box-sizing: border-box; }

body { margin: 0; padding: clamp(1rem, 3vw, 2.5rem); }

.panel {
    max-width: 64rem;
    min-height: min(44rem, calc(100svh - 5rem));
    margin: 0 auto;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
}

.progress-label {
    padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--line);
    text-align: right;
    font-size: .9rem;
    font-weight: 700;
}

.content {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem) 3rem;
}

.content-wide { max-width: 59rem; }
.eyebrow { margin: 0 0 .65rem; color: var(--olive); text-transform: uppercase; font-size: .85rem; font-weight: 750; }
h1 { margin: 0; font-size: clamp(1.65rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
p { max-width: 43ch; margin: .7rem 0 1.4rem; line-height: 1.5; }
a { color: var(--olive); text-underline-offset: .18em; }
.back { display: inline-block; margin-bottom: 1rem; }

.details { display: grid; gap: 1.1rem; }
.details label { display: grid; gap: .25rem; font-weight: 700; }
.details input {
    width: 100%;
    padding: .45rem 0;
    border: 0;
    border-bottom: 1px solid #858c73;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 400;
}

button, .button {
    display: inline-block;
    justify-self: start;
    padding: .72rem 1rem;
    border: 1px solid transparent;
    border-radius: .65rem;
    color: #fff;
    background: var(--olive);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

button:disabled { opacity: .58; cursor: default; }
:focus-visible { outline: 2px solid #647246; outline-offset: 3px; }
fieldset { margin: 0; padding: 0; min-inline-size: 0; border: 0; }
.progress { display: block; font-weight: 700; }
progress { width: 100%; height: .55rem; margin: .4rem 0 1rem; accent-color: var(--olive); }
.proposals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.proposal { display: grid; align-content: start; min-width: 0; border: 1px solid var(--line); border-radius: .65rem; background: #fff; }
.proposal.chosen, .proposal:has(:checked) { border-color: var(--olive); background: #f0f2e6; }
.proposal .document { display: grid; gap: .3rem; width: 100%; padding: .55rem .65rem; background: transparent; color: inherit; text-align: left; overflow-wrap: anywhere; }
.document span { color: var(--olive); font-size: .72rem; font-weight: 500; }
.document strong { font-size: .88rem; }
.pick { display: flex; align-items: center; min-height: 2.4rem; gap: .35rem; padding: 0 .65rem; font-size: .85rem; cursor: pointer; }
.pick input { margin: 0; accent-color: var(--olive); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 1rem; }
.notice, .summary { max-width: none; padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; background: #fff; }
.error { border-color: #a04434; color: #862c1e; }
.summary p { margin-top: 0; overflow-wrap: anywhere; }
.summary p:last-child { margin-bottom: 0; }
.pdf { width: 100%; height: min(65vh, 52rem); margin-bottom: 1rem; border: 1px solid var(--line); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 48rem) {
    .proposals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
    .proposals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}