/* The comp diagram: one more enamel plaque, holding a drawing where the fee
   plaques hold a figure. Brass is the subject house and the distance rings,
   hardware, per The Brass Is For Doors Rule, and the rentals it is priced
   against are set in enamel lettering so the centre stays the point. */
.comp-plaque .plaque {
    padding: clamp(20px, 3vw, 30px);
    color: var(--brass);
}

.comp-plaque svg {
    display: block;
    width: 100%;
    height: auto;
}

.comp-rings {
    stroke-width: 1;
    opacity: 0.42;
}

.comp-links {
    stroke-width: 1;
    opacity: 0.3;
}

.comp-others {
    fill: var(--enamel-letter);
    opacity: 0.7;
}

.comp-subject {
    fill: var(--brass);
}

/* The one label on the drawing, and the reason the rings read as distance
   from somewhere rather than as decoration. */
.comp-subject text {
    fill: var(--enamel-letter);
    font-family: var(--serif);
    font-size: 15px;
    text-anchor: middle;
}

/* "What you get" on the rental report page: heading over a two-column grid of
   the four deliverables, instead of the 4fr/8fr side heading whose left
   column held one title and nothing else. */
.report-contents-head {
    max-width: 60ch;
}

.report-contents-head .intro {
    margin-top: 8px;
}

.report-contents-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 5vw, 72px);
}

.report-contents-list li {
    padding-block: 24px 28px;
}

@media (max-width: 720px) {
    .report-contents-list {
        grid-template-columns: 1fr;
    }
}

/* The rental report: the form rides in the owner hero's aside, a trim board
   standing on the painted door. Everything the dark hero recolors, the text,
   the white button, the white links, the white focus ring, has to come back
   to its on-trim value inside the board, or it disappears into it. */
.owner-hero.has-aside:has(.report-well) .door-hero-inner {
    align-items: start;
}

/* The invitation, the number, and the hours used to be four sentences at one
   size, separated by full stops. They are three different jobs: an offer, the
   thing a hand acts on, and metadata about when. So three roles, 15/18/13,
   400/500/400, full/full/dimmed, with the number in the middle, because it
   is the only line here anyone acts on. Sentence case and no tracking on the
   first line: it is a question addressed to the reader, not an eyebrow. */
.hero-contact {
    display: grid;
    justify-items: start;
    margin-top: 24px;
}

.hero-contact-invite {
    margin: 0;
    font-size: var(--type-ui);
    line-height: 1.5;
    color: color-mix(in srgb, var(--on-door) 84%, transparent);
}

/* Lining tabular figures, per The Serif Counts Rule, a phone number is a
   figure, and tabular keeps the three groups evenly set. The brass hairline is
   the link affordance: hardware under a figure, not a fill. */
.hero-contact-number {
    margin-top: 2px;
    font-size: var(--type-subhead);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums tabular-nums;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    text-decoration-color: color-mix(in srgb, var(--brass) 70%, transparent);
}

.hero-contact-number:hover {
    text-decoration-color: var(--brass);
}

.hero-contact-hours {
    margin: 8px 0 0;
    font-size: var(--type-label);
    line-height: 1.5;
    color: color-mix(in srgb, var(--on-door) 72%, transparent);
}

/* On the report page the form is the hero's whole job on a phone, so the copy
   column's support gives up its room. */
@media (max-width: 600px) {
    .door-hero.has-aside .hero-contact {
        display: none;
    }
}

.door-hero .report-form {
    color: var(--umber-ink);
}

.report-form a:not(.btn) {
    color: var(--door-juniper);
}

.report-form :focus-visible {
    outline-color: var(--umber-ink);
}

.door-hero .report-form .btn-primary {
    background: var(--door-juniper);
    border-color: var(--door-juniper);
    color: var(--trim-white);
}

.door-hero .report-form .btn-primary:hover {
    background: var(--door-deep);
    color: var(--trim-white);
}

/* The lamp burns against the door, not against the board standing on it. The
   conversion keeps .btn-lit so the class still names it; the halo stays out. */
.door-hero .report-form .btn-lit {
    box-shadow: none;
    animation: none;
}

/* Turbo disables the button while the submit is in flight, but the rule above
   is more specific than .btn:disabled, so nothing changed on screen and the
   visitor pressed it again. */
.door-hero .report-form .btn-primary:disabled,
.door-hero .report-form .btn-primary:disabled:hover {
    background: var(--trim-shade);
    border-color: var(--rule);
    color: var(--umber-soft);
    cursor: progress;
}

/* Both CTAs that point at the form land it clear of the sticky header. The
   well is a scroll target that takes focus, not an interactive element, so it
   does not draw a ring of its own, the field the visitor tabs to next does. */
.report-well {
    scroll-margin-top: 108px;
}

.report-well:focus {
    outline: none;
}

/* The note under the report form's submit reads as fine print: one block of
   italic micro type, the way .fine-print sets type. */
.report-form .form-note {
    font-size: var(--type-micro);
    font-style: italic;
    line-height: 1.4;
}

/* The report form is the page's whole job, so it is tuned for height: one
   screen on a laptop, and as little scrolling as the fields allow on a phone.
   Three moves, in order of what they are worth:

   1. The SMS consent, 148px of required legal type, waits for a number to
      consent about (sms_consent_controller). It ships visible and JS hides it.
   2. Rhythm instead of a flat gap: fields sit tight inside the form, and the
      things that end it get air above them. Fewer pixels and better grouping.
   3. Rails' hidden inputs are grid children and were each eating a gap. */
.report-form {
    gap: 12px;
    padding: clamp(20px, 3vw, 26px);
}

.report-form > input[type="hidden"] {
    display: none;
}

.report-form .form-more {
    margin-top: 6px;
}

.report-form [type="submit"] {
    margin-top: 6px;
}

/* Below 960px the section-tab row stops being sticky, so nothing on ~6,900px
   of page leads back to the form in the hero. This bar does, in the thumb
   zone, and only while the form is off screen (report_recall_controller). It
   sits under the toast stack, which has to be able to speak over it. */
.report-recall {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--door-deep);
    color: var(--on-door);
    border-top: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
}

.report-recall p {
    margin: 0;
    font-size: var(--type-label);
    line-height: 1.35;
    color: var(--on-door);
    text-wrap: pretty;
}

.report-recall .btn {
    white-space: nowrap;
}

.report-recall[hidden] {
    display: none;
}

@media (min-width: 961px) {
    .report-recall {
        display: none;
    }
}

/* The switch page's bar holds the checkup form and shows at every width, since
   that page has no tab row to lead back up. It is an enamel plaque, not another
   strip of the door: the hero is already Door Juniper, and a juniper bar
   disappeared into it. The rental-report bar stays .report-recall alone. */
.report-recall-capture {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "message dismiss"
        "form form";
    gap: 6px 12px;
    padding: 16px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--enamel-slate);
    color: var(--enamel-letter);
    border-top: 0;
    box-shadow:
        inset 0 0 0 1px var(--brass),
        inset 0 0 0 4px var(--enamel-slate),
        inset 0 0 0 5px rgba(217, 181, 116, 0.45),
        0 -18px 40px -14px rgba(51, 22, 32, 0.62);
    animation: report-recall-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.report-recall-capture > p {
    grid-area: message;
    font-weight: 500;
    color: var(--enamel-letter);
}

.report-recall-capture .report-recall-dismiss {
    color: var(--enamel-letter);
}

.report-recall-capture .report-recall-dismiss:hover {
    color: var(--brass);
}

.report-recall-capture > .recall-form {
    grid-area: form;
}

.report-recall-dismiss {
    grid-area: dismiss;
    justify-self: end;
    width: 44px;
    height: 44px;
    margin: -8px -10px -8px 0;
    border: 0;
    background: none;
    color: var(--on-door);
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.report-recall-dismiss:hover {
    color: var(--trim-white);
}

.report-recall :focus-visible {
    outline-color: var(--trim-white);
}

.recall-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    align-items: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--on-door);
}

.recall-form > :not(.field, [type="submit"]) {
    grid-column: 1 / -1;
}

/* The bar's message names what the field is for; the label stays for screen
   readers. */
.recall-form .field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The field and its button stand side by side, so they share one height. */
.recall-form .field input,
.recall-form .btn {
    min-height: 46px;
    padding-block: 9px;
}

.recall-form .field-error {
    color: color-mix(in srgb, var(--danger) 30%, var(--trim-white));
}

/* White hardware on the enamel, with the porch lamp catching once the bar has
   landed. A juniper button on this slate would be another dark shape. */
.report-recall-capture .recall-form .btn-primary {
    background: var(--trim-white);
    border-color: var(--trim-white);
    color: var(--door-juniper);
    box-shadow: 0 -8px 22px -6px rgba(var(--lamp), 0.72), 0 0 0 1px rgba(217, 181, 116, 0.4);
    animation: recall-lamp-on 900ms 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.report-recall-capture .recall-form .btn-primary:hover {
    background: var(--trim-shade);
    color: var(--door-deep);
    box-shadow: 0 -14px 32px -6px rgba(var(--lamp), 0.9), 0 0 0 1px var(--brass);
    animation: none;
}

.report-recall-capture .recall-form .btn-primary:disabled,
.report-recall-capture .recall-form .btn-primary:disabled:hover {
    background: var(--trim-shade);
    border-color: var(--rule);
    color: var(--umber-soft);
    box-shadow: none;
    animation: none;
    cursor: progress;
}

.report-recall-capture .recall-form .form-note {
    margin: 0;
    font-size: var(--type-micro);
    line-height: 1.4;
    color: var(--enamel-letter);
}

.report-recall-capture .recall-form .form-note a {
    color: var(--brass);
}

@keyframes report-recall-in {
    from {
        transform: translateY(100%);
    }
}

/* The shared lamp-on keyframe throws its light downward, which a bottom bar
   hides under the viewport. This one blooms up onto the enamel and keeps the
   brass ring in the same shadow, so the fill mode cannot drop it. */
@keyframes recall-lamp-on {
    0% { box-shadow: 0 -6px 16px -8px rgba(var(--lamp), 0), 0 0 0 1px rgba(217, 181, 116, 0); }
    12% { box-shadow: 0 -10px 24px -6px rgba(var(--lamp), 0.55), 0 0 0 1px rgba(217, 181, 116, 0.75); }
    18% { box-shadow: 0 -4px 10px -8px rgba(var(--lamp), 0.08), 0 0 0 1px rgba(217, 181, 116, 0.15); }
    100% { box-shadow: 0 -8px 22px -6px rgba(var(--lamp), 0.72), 0 0 0 1px rgba(217, 181, 116, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
    .report-recall-capture,
    .report-recall-capture .recall-form .btn-primary {
        animation: none;
    }
}

/* On a wide screen the bar is one row: message, form, dismiss. */
@media (min-width: 961px) {
    .report-recall.report-recall-capture:not([hidden]) {
        display: grid;
        grid-template-columns: auto minmax(0, 32rem) auto;
        grid-template-areas: "message form dismiss";
        justify-content: center;
        align-items: center;
        gap: 12px 28px;
        padding-block: 18px;
    }
}