.zn-panel__buttons {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 10px;
    margin-top: var(--space-4);
}

.zn-panel__buttons .zn-panel__expand {
    margin-top: 0;
}

.report-page {
    background: var(--page-alt);
}

.report {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 32rem;
    margin: 0 auto;
    padding: var(--space-4) 20px var(--space-5);
}

.report__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.report__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--ink);
    font-size: 16px;
    text-decoration: none;
}

.report__back:hover {
    text-decoration: underline;
}

.report__progress {
    color: var(--muted);
    font-size: 15px;
    line-height: 22px;
}

.report__meter {
    display: flex;
    gap: 4px;
    height: 6px;
}

.report__done,
.report__remaining {
    border-radius: var(--radius-bar);
}

.report__done {
    background: var(--accent);
}

.report__remaining {
    background: var(--line);
}

.report__intro {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.report__where {
    color: var(--muted);
    font-size: 15px;
    line-height: 22px;
}

.report__question {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 29px;
    font-stretch: 112%;
    font-weight: 800;
    line-height: 33px;
}

.report__hint {
    font-size: 16px;
    line-height: 24px;
}

.report__form {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-5);
}

.report__form .field__label {
    font-size: 17px;
    line-height: 24px;
}

.report__form .visually-hidden {
    margin: 0;
    padding: 0;
}

.report__group {
    display: grid;
    gap: var(--space-3);
}

.report__sentence {
    font-size: 15px;
    line-height: 22px;
}

.report__form .field--check .field__label {
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
}

.report__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
}

.report__actions--stacked {
    grid-template-columns: minmax(0, 1fr);
}

.report__note {
    color: var(--muted);
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.answers--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.answer__input[data-scale] ~ .answer__label {
    font-family: var(--font-display);
    font-size: clamp(16px, 5.2vw, 24px);
    line-height: 28px;
}

.answer__input[data-scale='1'] ~ .answer__label {
    font-stretch: 62%;
    font-weight: 300;
}

.answer__input[data-scale='2'] ~ .answer__label {
    font-stretch: 78%;
    font-weight: 450;
}

.answer__input[data-scale='3'] ~ .answer__label {
    font-stretch: 96%;
    font-weight: 600;
}

.answer__input[data-scale='4'] ~ .answer__label {
    font-stretch: 120%;
    font-weight: 760;
}

.answer__input[data-scale='5'] ~ .answer__label {
    font-stretch: 145%;
    font-weight: 900;
}

@media (width < 48rem) {
    .report {
        min-height: 100vh;
        min-height: 100dvh;
    }
}

@media (width >= 48rem) {
    .report {
        padding-top: var(--space-6);
    }

    .report__form {
        flex: none;
    }

    .report__actions {
        margin-top: var(--space-4);
    }
}

.zn-button--quiet {
    min-height: 44px;
    padding: 0;
    background: transparent;
    color: var(--link);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.zn-button--quiet:hover {
    color: var(--accent-hover);
}

.zn-button--danger {
    background: var(--danger);
    color: var(--on-accent);
}

.zn-button--danger:hover {
    background: color-mix(in srgb, var(--danger) 82%, var(--ink));
}

.zn-button--quiet.zn-button--danger {
    background: transparent;
    color: var(--danger);
}

.zn-button--quiet.zn-button--danger:hover {
    background: transparent;
    color: color-mix(in srgb, var(--danger) 75%, var(--ink));
}

.wide-page .page,
.wide-page .site-footer__inner {
    max-width: 72rem;
}

.my-home__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}

.my-home__line {
    margin-top: 6px;
    font-size: 17px;
    line-height: 26px;
}

.my-home__move-out {
    display: grid;
    justify-items: start;
    gap: var(--space-1);
    max-width: 22rem;
}

.my-home__help,
.my-home__note,
.my-home__status {
    color: var(--muted);
    font-size: 15px;
    line-height: 22px;
}

.my-home__columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.my-home__column {
    display: flex;
    flex: 1 1 21rem;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
    max-width: 46rem;
}

.my-home__column--wide {
    flex: 999 1 34rem;
    max-width: none;
}

.my-home__column:empty {
    display: none;
}

.my-home__card,
.my-home__empty {
    container-type: inline-size;
    padding: var(--space-5);
    border-radius: var(--radius-panel);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line);
}

.my-home__empty {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    max-width: 36rem;
    margin-top: var(--space-5);
}

.my-home__title {
    margin: 0 0 var(--space-2);
    color: var(--ink);
    font-size: 21px;
    line-height: 28px;
}

.residents__text,
.residents__band {
    margin-top: var(--space-1);
    color: var(--text);
    font-size: 15px;
    line-height: 22px;
}

.my-home__card .residents__text,
.my-home__card .residents__band {
    font-size: 16px;
    line-height: 25px;
}

.residents__note {
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: 14px;
    line-height: 20px;
}

.residents__invite {
    margin-top: var(--space-1);
}

.public-notes {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.public-notes__note {
    color: var(--ink);
    font-size: 15px;
    line-height: 22px;
    padding: var(--space-3) var(--space-4);
    background: var(--page-alt);
    border-radius: var(--radius-control);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.zn-panel__actions .zn-button--quiet {
    justify-self: start;
}

.my-home__facts {
    display: grid;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}

.my-home__data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.my-home__alerts,
.my-home__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.my-home__form {
    max-width: 32rem;
}

.my-home__form .my-home__title {
    margin: var(--space-3) 0 0;
}

.my-home__form-actions {
    display: grid;
    gap: 10px;
}

.readings__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.readings__head .my-home__title {
    margin-bottom: 0;
}

.readings__table-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
}

.readings__window {
    margin: 0 0 var(--space-4);
}

.readings__plot {
    overflow-x: auto;
    direction: rtl;
}

.readings__chart {
    display: block;
    direction: ltr;
    width: 100%;
    min-width: 34rem;
    height: auto;
}

.readings__grid,
.readings__tick {
    stroke: var(--line);
    stroke-width: 1px;
}

.readings__threshold {
    stroke: var(--muted);
    stroke-width: 1.5px;
    stroke-dasharray: 6 5;
}

.readings__alert {
    fill: var(--accent-soft);
}

.readings__axis {
    fill: var(--muted);
    font-size: 14px;
}

.readings__threshold-label {
    paint-order: stroke;
    stroke: var(--surface);
    stroke-linejoin: round;
    stroke-width: 3px;
}

.readings__alert-label {
    fill: var(--text);
    font-size: 14px;
}

.readings__line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.readings__marker,
.readings__point {
    fill: var(--ink);
}

.readings__point {
    stroke: var(--surface);
    stroke-width: 2px;
}

.readings__value {
    fill: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.readings__note {
    margin: var(--space-3) 0 0;
    font-size: 14px;
    line-height: 20px;
}

.readings__form {
    display: grid;
    gap: var(--space-4);
}

.readings__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-start;
}

.readings__fields .field {
    flex: 1 1 9rem;
}

.readings__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.readings__table caption {
    margin-bottom: var(--space-2);
    font-weight: 700;
    text-align: left;
}

.readings__table th,
.readings__table td {
    padding: var(--space-2) var(--space-3) var(--space-2) 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: baseline;
}

.readings__table thead th {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}

.readings__table tbody th {
    color: var(--text);
    font-weight: 400;
}

.readings__table td.readings__delete {
    padding-right: 0;
    text-align: right;
    vertical-align: middle;
}

.readings__delete form {
    margin: 0;
}