/* Housing form patterns (TAN3-1075): visible labels, required/optional in words, hints, errors,
   44 px targets and 3:1 borders. Shared by every Housing form and dialog. */

.hz-form { max-width: 760px; margin: 0; }
.hz-wiz { max-width: 1100px; margin: 0; }
.hz-fgrid { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

.hz-f { display: flex; flex-direction: column; gap: 5px; margin: 0 0 16px; min-width: 0; }
.hz-f > label, .hz-fs > legend { font-size: 14px; font-weight: 700; color: var(--mud-palette-text-primary); }
.hz-req, .hz-opt { font-weight: 500; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.hz-fh { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mud-palette-text-secondary); }
.hz-fh a, .hz-panel a, .hz-review a, .hz-notice a { color: var(--mud-palette-primary); font-weight: 600; text-underline-offset: 3px; }
.hz-fe { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--mud-palette-error); }

.hz-input {
    width: 100%; min-height: 44px; padding: 9px 12px; box-sizing: border-box;
    border: 1.5px solid var(--mud-palette-text-secondary); border-radius: 10px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; font-size: 15px;
}
textarea.hz-input { min-height: 96px; resize: vertical; line-height: 1.5; }
.hz-input:hover { border-color: var(--mud-palette-text-primary); }
.hz-input:focus-visible, .hz-opt-row input:focus-visible, .hz-errsum:focus, .hz-photo button:focus-visible {
    outline: 3px solid var(--mud-palette-primary); outline-offset: 2px;
}
.hz-f.has-err { padding-left: 12px; border-left: 4px solid var(--mud-palette-error); }
.hz-f.has-err .hz-input { border-color: var(--mud-palette-error); border-width: 2px; }

.hz-affix { display: flex; align-items: stretch; }
.hz-affix .hz-input { flex: 1; min-width: 0; border-radius: 0 10px 10px 0; }
.hz-afx {
    display: inline-flex; align-items: center; padding: 0 11px; font-weight: 700;
    border: 1.5px solid var(--mud-palette-text-secondary); border-right: 0; border-radius: 10px 0 0 10px;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary);
}

.hz-fs { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.hz-fs > legend { padding: 0; margin: 0 0 4px; }
.hz-fs.has-err { padding-left: 12px; border-left: 4px solid var(--mud-palette-error); }
.hz-opts { display: grid; gap: 6px; margin-top: 4px; }
.hz-opts--cols { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.hz-opt-row {
    display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 12px; box-sizing: border-box;
    border: 1.5px solid var(--mud-palette-lines-inputs); border-radius: 10px; background: var(--mud-palette-surface); cursor: pointer;
}
.hz-opt-row:hover { border-color: var(--mud-palette-text-secondary); }
.hz-opt-row:has(input:checked) { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.hz-opt-row input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mud-palette-primary); }
.hz-ot { display: block; font-size: 14.5px; font-weight: 600; color: var(--mud-palette-text-primary); }
.hz-od { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.hz-fs.has-err .hz-opt-row { border-color: var(--mud-palette-error); }

.hz-errsum { margin: 0 0 18px; padding: 12px 16px; border: 2px solid var(--mud-palette-error); border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface)); }
.hz-errsum h2 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--mud-palette-error); }
.hz-errsum ul { margin: 0; padding-left: 20px; }
.hz-errsum a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 700; color: var(--mud-palette-error); text-underline-offset: 3px; }

.hz-notice { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border: 1px solid; border-radius: 12px;
    font-size: 14px; line-height: 1.55; color: var(--mud-palette-text-primary); }
.hz-notice p { margin: 0 0 4px; }
.hz-notice ul { margin: 4px 0; padding-left: 20px; }
.hz-notice--ok { border-color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface)); }
.hz-notice--warn { border-color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface)); }
.hz-notice--bad { border-color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface)); }
.hz-notice--primary { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)); }
.hz-nic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid currentColor; font-size: 13px; font-weight: 900; background: var(--mud-palette-surface); }

.hz-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; counter-reset: hzst; }
.hz-steps li { counter-increment: hzst; display: flex; }
.hz-steps a, .hz-steps .hz-st {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px; border-radius: 999px;
    border: 1.5px solid var(--mud-palette-lines-inputs); color: var(--mud-palette-text-secondary); font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.hz-steps a::before, .hz-steps .hz-st::before {
    content: counter(hzst); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); font-size: 12.5px;
}
.hz-steps a:hover { border-color: var(--mud-palette-text-secondary); color: var(--mud-palette-text-primary); }
.hz-steps .done::before { content: "\2713"; background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent); }
.hz-steps [aria-current="step"] { border-color: var(--mud-palette-secondary); color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent); }
.hz-steps [aria-current="step"]::before { background: var(--mud-palette-secondary); color: var(--mud-palette-secondary-text); }

.hz-wizhead { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--mud-palette-text-secondary); }
.hz-wst { margin: 0 0 14px; font-size: 21px; font-weight: 800; color: var(--mud-palette-text-primary); }
.hz-wst:focus, .hz-wst:focus-visible { outline: none; }
.hz-factions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--mud-palette-lines-default); }
.hz-factions .hz-sp { flex: 1; }
.hz-cnt { margin: -10px 0 16px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }

.hz-panel { min-width: 0; margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface); }
.hz-panel h2 { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--mud-palette-text-primary); }

.hz-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px; margin: 0 0 16px; }
.hz-facts > div { padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-background-gray); }
.hz-facts dt { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.hz-facts dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; color: var(--mud-palette-text-primary); }
.hz-facts dd.hz-small { font-size: 14px; }

.hz-costs { margin: 0; display: grid; }
.hz-costs > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--mud-palette-lines-default); font-size: 14px; }
.hz-costs > div:first-child { border-top: 0; }
.hz-costs dt { color: var(--mud-palette-text-secondary); }
.hz-costs dd { margin: 0; font-weight: 700; text-align: right; }
.hz-costs .hz-tot { border-top: 2px solid var(--mud-palette-text-secondary); font-size: 15px; }
.hz-costs .hz-tot dt, .hz-costs .hz-tot dd { font-weight: 800; color: var(--mud-palette-text-primary); }

.hz-review { margin: 0 0 16px; display: grid; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface); }
.hz-review > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: 6px 14px; padding: 10px 14px; border-top: 1px solid var(--mud-palette-lines-default); align-items: start; }
.hz-review > div:first-child { border-top: 0; }
.hz-review dt { font-size: 13.5px; font-weight: 700; }
.hz-review dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; white-space: pre-line; }
.hz-nsup { font-weight: 800; color: var(--mud-palette-error); }
@media (max-width: 600px) { .hz-review > div { grid-template-columns: minmax(0, 1fr); } }

.hz-drop { position: relative; padding: 16px; border: 2px dashed var(--mud-palette-lines-inputs); border-radius: 12px; background: var(--mud-palette-background-gray); text-align: center; }
.hz-drop:focus-within { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
/* The file input covers the drop area so a click anywhere or a dropped file both work; the label is what people see. */
.hz-dropinput { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hz-dropinput:disabled { cursor: not-allowed; }
.hz-filebtn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 8px;
    border: 1.5px solid var(--mud-palette-text-primary); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-weight: 700; }
.hz-drop p { margin: 6px 0 0; font-size: 13px; color: var(--mud-palette-text-secondary); }
.hz-photos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.hz-photo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1.5px solid var(--mud-palette-lines-inputs); border-radius: 12px; background: var(--mud-palette-surface); }
.hz-photo .hz-f { margin: 0; }
.hz-thumb { width: 96px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--mud-palette-background-gray); }
.hz-phf { display: grid; gap: 8px 12px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.hz-cover { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-secondary); }
.hz-phsay { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; background: var(--mud-palette-background-gray); }
.hz-pctl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (max-width: 600px) { .hz-photo { grid-template-columns: minmax(0, 1fr); } }

/* ---- section heading and attention-style lists ---- */
.hz-sec { margin: 22px 0 10px; font-size: 17px; font-weight: 800; color: var(--mud-palette-text-primary); }
.hz-att { list-style: none; margin: 0; padding: 0; }
.hz-att li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.hz-att li:first-child { border-top: 0; }
.hz-aw { font-size: 14px; font-weight: 700; }
.hz-aw a { color: var(--mud-palette-primary); }
@media (max-width: 600px) { .hz-att li { grid-template-columns: minmax(0, 1fr); } }

/* ---- progress of a record (application stages) ---- */
.hz-steps .hz-st.done::before { content: "\2713"; background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent); }

/* ---- detail tabs kept in the address ---- */
.hz-tabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 14px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.hz-tabs button { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--mud-palette-text-secondary);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.hz-tabs button[aria-selected="true"] { color: var(--mud-palette-text-primary); border-bottom-color: var(--mud-palette-primary); }
.hz-tabs button:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.hz-tabs .hz-tn { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--mud-palette-background-gray); font-size: 12px; }
.hz-met { font-weight: 800; color: var(--mud-palette-success); }
.hz-notmet { font-weight: 800; color: var(--mud-palette-error); }
.hz-waiting { font-weight: 800; color: var(--mud-palette-warning); }
.hz-timeline { list-style: none; margin: 0 0 16px; padding: 0; }
.hz-timeline li { padding: 9px 0 9px 14px; border-left: 2px solid var(--mud-palette-lines-default); }

/* ---- renter pages: phone first, one column ---- */
.hz-renter { max-width: 760px; margin: 0 auto; padding: 24px 16px 60px; color: var(--mud-palette-text-primary); }

/* ---- inquiries inbox ---- */
.hz-inbox { display: grid; gap: 18px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .hz-inbox { grid-template-columns: minmax(0, 1fr); } }
.hz-qside { display: grid; gap: 10px; min-width: 0; }
.hz-qside > .hz-f { margin: 0; }
.hz-qbulk { display: grid; gap: 8px; margin: 0; }
.hz-qbulkbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-background-gray); }
.hz-chk { display: flex; align-items: center; gap: 9px; min-height: 24px; margin-right: auto; font-size: 14px; cursor: pointer; }
.hz-chk input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--mud-palette-primary); }
.hz-input--sm { width: auto; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.hz-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hz-qrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; }
.hz-qck { display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 44px; cursor: pointer; }
.hz-qchk { width: 20px; height: 20px; margin: 0; accent-color: var(--mud-palette-primary); }
.hz-qitem { position: relative; display: block; padding: 12px 14px; border: 1.5px solid var(--mud-palette-lines-inputs); border-radius: 12px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); text-decoration: none; }
.hz-qitem:hover { border-color: var(--mud-palette-text-secondary); }
.hz-qitem:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.hz-qitem[aria-current="true"] { border-color: var(--mud-palette-secondary); background: color-mix(in srgb, var(--mud-palette-secondary) 10%, var(--mud-palette-surface)); }
.hz-qt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hz-qn { font-size: 14.5px; font-weight: 800; }
.hz-qw { margin-left: auto; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.hz-ql { display: block; margin-top: 2px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.hz-qx { display: -webkit-box; margin-top: 6px; overflow: hidden; font-size: 13.5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hz-qstatus { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 0 0 4px; }
.hz-qstatus .hz-f { margin: 0; }
.hz-thread { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.hz-msg { max-width: min(620px, 100%); padding: 12px 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-background-gray); }
.hz-msg.us { margin-left: auto; border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)); }
.hz-msg p { margin: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.hz-msg .hz-mh { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 4px; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.hz-msg .hz-mh b { color: var(--mud-palette-text-primary); }
.hz-tpl { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }

/* ---- listing page: two panels of definition lists ---- */
.hz-grid2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); align-items: start; }
.hz-dl { margin: 0; display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 8px 14px; font-size: 14px; }
.hz-dl dt { font-weight: 700; color: var(--mud-palette-text-secondary); }
.hz-dl dd { margin: 0; overflow-wrap: anywhere; }
.hz-dl a { color: var(--mud-palette-primary); font-weight: 600; }

/* ---- toolbar: view switch (radio group) and inline filters ---- */
.hz-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 0 0 16px; }
.hz-toolbar .hz-f { margin: 0; }
.hz-f--inline { min-width: min(220px, 100%); }
.hz-seg { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hz-seg > legend { float: left; padding: 0; margin: 0 10px 0 0; font-size: 12.5px; font-weight: 800; color: var(--mud-palette-text-secondary); }
.hz-seg-opts { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--mud-palette-text-secondary); border-radius: 12px; overflow: hidden; background: var(--mud-palette-surface); }
.hz-segopt { position: relative; display: inline-flex; }
.hz-segopt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hz-segopt label { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px; font-size: 13.5px; font-weight: 700; color: var(--mud-palette-text-secondary); }
.hz-segopt + .hz-segopt label { border-left: 1px solid var(--mud-palette-lines-inputs); }
.hz-segopt label:hover { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); }
.hz-segopt input:checked + label { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.hz-segopt input:focus-visible + label { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }

/* ---- tables ---- */
.hz-tsearch { display: grid; gap: 4px; max-width: 520px; margin: 0 0 12px; }
.hz-tsearch label { font-size: 14px; font-weight: 700; }
.hz-tw { max-width: 100%; overflow-x: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; }
.hz-tw:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.hz-table { border-collapse: collapse; width: 100%; font-size: 13.5px; background: var(--mud-palette-surface); }
.hz-table caption { caption-side: top; text-align: left; padding: 10px 12px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.hz-table th, .hz-table td { padding: 8px 12px; border-top: 1px solid var(--mud-palette-lines-default); text-align: left; vertical-align: top; line-height: 1.4; }
.hz-table thead th { background: var(--mud-palette-background-gray); font-size: 12px; font-weight: 800; color: var(--mud-palette-text-secondary); vertical-align: bottom; }
.hz-table tbody th { font-weight: 700; min-width: 14em; }
.hz-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hz-table a { display: inline-flex; align-items: center; min-height: 24px; color: var(--mud-palette-primary); font-weight: 700; }
.hz-table td.hz-empty { text-align: center; color: var(--mud-palette-text-secondary); padding: 18px; }
.hz-sortbtn { display: inline-flex; align-items: flex-end; gap: 5px; min-height: 24px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.hz-sortbtn:hover { color: var(--mud-palette-primary); }
.hz-sortbtn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.hz-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--mud-palette-text-secondary); }
.hz-tdl { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }

/* ---- listing tiles ---- */
.hz-rc { margin: 0 0 10px; font-weight: 700; }
.hz-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }
.hz-lcard { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface); }
.hz-lph { display: block; width: 100%; height: 150px; object-fit: cover; }
.hz-lph--none { background: linear-gradient(160deg, color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface)), var(--mud-palette-background-gray)); }
.hz-lbody { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px 14px 14px; }
.hz-lbody p { margin: 0; }
.hz-price { font-size: 19px; font-weight: 800; }
.hz-price small { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.hz-lt { margin: 0; font-size: 15.5px; font-weight: 800; line-height: 1.35; }
.hz-lt a { color: var(--mud-palette-text-primary); text-decoration: none; }
.hz-lt a::after { content: ""; position: absolute; inset: 0; }
.hz-lt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hz-lt a:focus-visible { outline: none; }
.hz-lcard:has(.hz-lt a:focus-visible) { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.hz-lfacts { font-size: 13.5px; color: var(--mud-palette-text-secondary); }
.hz-addr { font-size: 13.5px; }
.hz-lfoot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.hz-lstat { margin-top: 4px !important; font-size: 12.5px; color: var(--mud-palette-text-secondary); }

/* ---- board ---- */
.hz-kan { list-style: none; margin: 0 0 8px; padding: 0 0 6px; display: grid; gap: 12px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.hz-kcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-background-gray); }
.hz-kcol.is-over { outline: 3px dashed var(--mud-palette-secondary); outline-offset: -3px; }
.hz-kcol > .hz-fh { margin: 0; }
.hz-kh { display: flex; align-items: center; gap: 8px; }
.hz-kh h2 { margin: 0; font-size: 14.5px; font-weight: 800; }
.hz-kn { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); font-size: 12.5px; font-weight: 800; }
.hz-none { margin: 0; font-size: 13px; color: var(--mud-palette-text-secondary); }
.hz-kcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hz-kcard { min-width: 0; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 12px; background: var(--mud-palette-surface); font-size: 13.5px; }
.hz-kcard[draggable="true"] { cursor: grab; }
.hz-kcard p { margin: 4px 0 0; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.hz-kt { display: inline-flex; align-items: center; min-height: 24px; font-size: 14.5px; font-weight: 800; color: var(--mud-palette-primary); }
.hz-kmove { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.hz-kmove .hz-input { flex: 1 1 auto; min-width: 0; min-height: 34px; padding: 4px 8px; font-size: 13px; }

/* ---- map with its numbered list ---- */
.hz-mapgrid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; }
@media (max-width: 900px) { .hz-mapgrid { grid-template-columns: minmax(0, 1fr); } }
.hz-maplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hz-maplist li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface); }
.hz-maplist a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 800; color: var(--mud-palette-primary); }
.hz-map { height: 420px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; }
.hz-mk { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: #a8325e; color: #fff; font-size: 12px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.hz-amk { background: none; border: 0; }

/* Leases */
.hz-neg { color: var(--mud-palette-error); font-weight: 700; }
.hz-plede { margin: 0 0 12px; max-width: 72ch; color: var(--mud-palette-text-secondary); }
.hz-lhist { list-style: none; margin: 0 0 16px; padding: 0; }
.hz-lhist li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.hz-lhist li:first-child { border-top: 0; }
.hz-lhist li[aria-current="true"] { background: var(--mud-palette-background-gray); padding-left: 8px; border-radius: 8px; }
.hz-sign { max-width: 760px; margin: 32px auto; padding: 0 16px; }
.hz-sign h1 { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.hz-dlg-h { margin: 0; font-size: 20px; font-weight: 800; }
.hz-room { margin: 0 0 14px; padding: 12px 16px 4px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; }
.hz-room > legend { padding: 0 6px; font-size: 16px; font-weight: 800; }

/* Finance: bars with their values written next to them */
.hz-legend { display: flex; gap: 16px; margin: 0 0 10px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.hz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hz-bi { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--mud-palette-primary); }
.hz-bi--exp { background: #7c3aed; }
.hz-bchart { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hz-bchart li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; }
.hz-bw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.hz-bb { display: block; height: 12px; min-width: 2px; border-radius: 3px; background: var(--mud-palette-primary); }
.hz-bb--exp { background: #7c3aed; }
.hz-bv { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Reports */
.hz-pinval { display: inline-block; transform: translate(-50%, -100%); white-space: nowrap; padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 700;
    background: #fff; color: #1b1b1b; border: 2px solid var(--mud-palette-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.hz-pinval.is-loss { border-color: #b3261e; color: #b3261e; }
.hz-cards { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.hz-cards li { padding: 16px 18px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface); }
.hz-cards a { font-size: 16px; font-weight: 800; color: var(--mud-palette-primary); }
.hz-cards p { margin: 6px 0 0; font-size: 14px; color: var(--mud-palette-text-secondary); }
.hz-rmsplit { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 1100px) { .hz-rmsplit { grid-template-columns: minmax(0, 1fr); } }
.hz-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--mud-palette-primary); text-decoration: underline; cursor: pointer; min-height: 24px; }
.hz-qlist { margin: 0 0 8px; padding-left: 22px; }
.hz-qlist li { padding: 10px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.hz-qlist li:first-child { border-top: 0; }
.hz-qlist li > div:first-child { margin-bottom: 6px; }
.hz-qctl { display: flex; flex-wrap: wrap; gap: 6px; }
.hz-wflist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.hz-wfstep { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; }
.hz-wfn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary); font-weight: 800; }
.hz-wfb h2 { margin: 0 0 2px; font-size: 15px; font-weight: 800; }
.hz-wfb .hz-qctl { margin-top: 8px; }
.hz-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.hz-provcards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.hz-provcards li { margin: 0; }
.hz-provcards a { font-size: inherit; font-weight: inherit; }
.hz-provcards .hz-dl { margin-top: 10px; }
.hz-needlist { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.hz-copyrow { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 0 0 12px; }
.hz-copyrow label { flex-basis: 100%; font-weight: 700; }
.hz-copyrow input { flex: 1 1 320px; }

/* Public: Find a home and one home for rent */
/* Sortable column headers */
.hz-sortbtn { display: inline-flex; align-items: flex-end; gap: 5px; min-height: 24px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; text-align: inherit; cursor: pointer; line-height: 1.3; }
.hz-table thead th.num .hz-sortbtn { flex-direction: row-reverse; text-align: right; }
.hz-sortbtn:hover { color: var(--mud-palette-primary); }
.hz-sortbtn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.hz-sarr { font-size: 10px; color: var(--mud-palette-text-disabled); }
.hz-table th[aria-sort] .hz-sarr { color: var(--mud-palette-primary); }

/* A hint sits between label and input, so fields side by side line up on their inputs. */
.hz-fgrid { align-items: end; }
.hz-fgrid > .hz-f { display: flex; flex-direction: column; }
.hz-fgrid > .hz-f > .hz-fh, .hz-fgrid > .hz-f > .hz-fe { margin: 0 0 4px; }

.hz-renter.hz-renter--wide { max-width: none; width: 100%; padding: 24px 24px 60px; }
.hz-renter.hz-renter--page { max-width: 1280px; width: 100%; }
.hz-segset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hz-segset > legend { float: left; padding: 0; margin: 0 10px 0 0; font-size: 12.5px; font-weight: 800; color: var(--mud-palette-text-secondary); }
.hz-seg { display: inline-flex; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 999px; background: var(--mud-palette-surface); overflow: hidden; }
.hz-segopt { position: relative; display: inline-flex; }
.hz-segopt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hz-segopt label { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px; font-size: 14px; font-weight: 700; color: var(--mud-palette-text-secondary); cursor: pointer; }
.hz-segopt + .hz-segopt label { border-left: 1px solid var(--mud-palette-lines-inputs); }
.hz-segopt label:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); }
.hz-segopt input:checked + label { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.hz-segopt input:checked + label::before { content: "\2713"; font-weight: 900; }
.hz-segopt input:focus-visible + label { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.hz-fbar { align-items: flex-end; }
.hz-fbar .hz-rc { align-self: center; font-size: 15px; font-weight: 800; }
.hz-fbar .hz-sp { flex: 1 1 auto; }
.hz-fbar .hz-f--inline { display: flex; flex-direction: column; gap: 4px; }
.hz-fbar .hz-f--inline label { font-size: 12.5px; font-weight: 800; color: var(--mud-palette-text-secondary); }
.hz-fsearch { align-items: flex-end; }
.hz-fsearch .hz-f { display: flex; flex-direction: column; gap: 4px; }
.hz-fsearch .hz-f .hz-fh { margin: 0; }
.hz-fmore { border-top: 1px solid var(--mud-palette-lines-default); padding-top: 8px; }
.hz-fmore summary { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--mud-palette-lines-inputs); border-radius: 999px; font-size: 14px; list-style: none; }
.hz-fmore summary::-webkit-details-marker { display: none; }
.hz-fmore[open] summary { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.hz-fmore summary:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.hz-fmore-b { display: grid; gap: 12px; margin-top: 12px; }
.hz-fmapctl { justify-content: space-between; padding: 6px 10px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; }
@media (max-width: 640px) { .hz-seg { flex-wrap: wrap; border-radius: 12px; } .hz-segopt + .hz-segopt label { border-left: 0; } }
.hz-gallery { display: grid; gap: 6px; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 150px; margin: 0 0 18px; border-radius: 14px; overflow: hidden; }
.hz-gbtn { position: relative; padding: 0; border: 0; background: var(--mud-palette-background-gray); cursor: zoom-in; min-height: 44px; }
.hz-gbtn:first-child { grid-row: span 2; }
.hz-gbtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hz-gbtn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.hz-gn { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 13px; font-weight: 700; }
@media (max-width: 640px) { .hz-gallery { grid-template-columns: 1fr 1fr; } .hz-gbtn:first-child { grid-column: span 2; } }
.hz-hsplit { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; }
@media (max-width: 900px) { .hz-hsplit { grid-template-columns: minmax(0, 1fr); } }
.hz-stick { position: sticky; top: 16px; }
.hz-bigprice { margin: 0; font-size: 28px; font-weight: 800; }
.hz-bigprice small { font-size: 15px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.hz-costh { margin: 14px 0 4px; font-size: 14px; font-weight: 800; }
.hz-stack { display: grid; gap: 8px; margin-top: 14px; }
.hz-contact { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mud-palette-lines-default); }
.hz-contact p { margin: 0; }
.hz-hmap { height: 280px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); margin: 8px 0; z-index: 0; }
.hz-hmap--tall { height: min(70vh, 640px); }
.hz-nearh { margin: 14px 0 6px; font-size: 15px; font-weight: 800; }
.hz-near { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.hz-amen { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.hz-amen h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.hz-amen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hz-amen li { display: flex; gap: 8px; }
.hz-mk { flex: none; width: 1.2em; font-weight: 800; }
.hz-indent { margin-left: 24px; }
.hz-viewer { margin: 0; }
.hz-viewer img { width: 100%; max-height: 70vh; object-fit: contain; display: block; background: var(--mud-palette-background-gray); }
.hz-viewer figcaption { margin-top: 8px; }
.hz-fsearch { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; padding: 14px 16px; margin: 0 0 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface); }
.hz-fsearch .hz-f { flex: 1 1 160px; margin: 0; }
.hz-fsearch .hz-f--wide { flex: 2 1 260px; }
.hz-fmore { flex-basis: 100%; }
.hz-fmore summary { cursor: pointer; font-weight: 700; min-height: 32px; padding: 4px 0; }
.hz-fmore-b { padding-top: 8px; }
.hz-fset { border: 0; margin: 0 0 8px; padding: 0; }
.hz-fset legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.hz-fbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 12px; }
.hz-fbar .hz-f { margin: 0; }
.hz-rc { margin: 0; font-weight: 700; }
.hz-fsplit { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
.hz-flist { min-width: 0; }
.hz-fcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.hz-fcard { border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; overflow: hidden; background: var(--mud-palette-surface); }
.hz-fcard img { width: 100%; height: 160px; object-fit: cover; display: block; }
.hz-fcard-b { padding: 12px 14px; }
.hz-fcard-b h2 { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.hz-fcard-b h2 a { color: var(--mud-palette-primary); }
.hz-fcard-b p { margin: 0 0 4px; }
.hz-fprice { font-size: 17px; font-weight: 800; }
.hz-fmapcol { position: sticky; top: 16px; }
.hz-fmapctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.hz-fphone { display: none; }
@media (max-width: 900px) {
    .hz-fsplit { grid-template-columns: minmax(0, 1fr); }
    .hz-fphone { display: block; }
    .hz-fsplit[data-view="list"] .hz-fmapcol { display: none; }
    .hz-fsplit[data-view="map"] .hz-flist { display: none; }
    .hz-fmapcol { position: static; }
}
/* Renter app */
.hz-rhero { margin: 0 0 16px; padding: 20px 22px; border-radius: 16px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.hz-rhero p { margin: 0; }
.hz-rhero-s { font-size: 14px; opacity: .92; }
.hz-rhero-big { font-size: 34px; font-weight: 800; line-height: 1.2; margin: 2px 0 4px !important; }
.hz-rhero .hz-rhero-btn { margin-top: 12px; background: var(--mud-palette-surface); color: var(--mud-palette-primary); font-weight: 800; }
.hz-qa { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.hz-qa a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface); font-weight: 800; color: var(--mud-palette-text-primary); text-decoration: none; }
.hz-qa a:hover { border-color: var(--mud-palette-primary); }
.hz-qa a:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.hz-qa .mud-icon-root { color: var(--mud-palette-primary); }
.hz-attn { border-left: 4px solid var(--mud-palette-warning); }

.hz-pindot { display: inline-block; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--mud-palette-primary); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.hz-fpop { min-width: 200px; max-width: 240px; }
.hz-fpop img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 6px; }
.hz-fpop p { margin: 0 0 4px; }
.hz-fpop-t a { font-weight: 800; }