/* HouseIndex — property photo intake. All rules scoped to .hi-pi. */
.hi-pi{
  --hi-marine:#0B3045;--hi-cobalt:#145BDE;--hi-cobalt-dk:#0F47B0;--hi-mist:#F7FAFC;
  --hi-line:#CBD6DF;--hi-field:#71879A;--hi-ink2:#3B5366;--hi-ink3:#4E6474;
  --hi-tint:#EDF3FD;--hi-err:#B42318;--hi-err-bg:#FDF3F2;--hi-track:#DCE4EA;
  container-type:inline-size;position:relative;
  font:400 16px/1.5 'Heebo',system-ui,sans-serif;color:var(--hi-marine);
  border-top:2px solid var(--hi-marine);padding:24px 0 8px;text-align:start;
}
.hi-pi:lang(en){font-family:'Manrope',system-ui,sans-serif}
.hi-pi *,.hi-pi *::before,.hi-pi *::after{box-sizing:border-box}
.hi-pi :focus-visible{outline:3px solid var(--hi-cobalt);outline-offset:2px}
.hi-pi__sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}

/* Heading */
.hi-pi__title{margin:0;font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.hi-pi__lead{margin:10px 0 0;font-size:17px;line-height:1.55;color:var(--hi-ink2);max-width:52ch;text-wrap:pretty}

/* Structure */
.hi-pi__body,.hi-pi__mode,.hi-pi__panel{border:0;margin:0;padding:0;min-width:0}
.hi-pi__body{margin-top:24px;display:grid;gap:24px}
.hi-pi__panel{display:grid;gap:16px}
.hi-pi__panel[hidden]{display:none}
.hi-pi__body[inert]{opacity:.6}
.hi-pi__label{display:block;padding:0;margin:0 0 8px;font-size:15px;font-weight:600}

/* Files / link choice */
.hi-pi__seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hi-marine);border-radius:2px}
.hi-pi__seg-opt{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 12px;text-align:center;font-weight:500;line-height:1.25;cursor:pointer}
.hi-pi__seg-opt+.hi-pi__seg-opt{border-inline-start:1px solid var(--hi-marine)}
.hi-pi__seg-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.hi-pi__seg-opt:has(input:checked){background:var(--hi-marine);color:#fff}
.hi-pi__seg-opt:has(input:focus-visible){outline:3px solid var(--hi-cobalt);outline-offset:2px;z-index:1}

/* Picker */
.hi-pi__picker{position:relative;display:grid;gap:14px;justify-items:start;padding:20px;background:var(--hi-mist);border:1px solid var(--hi-line)}
.hi-pi__file{position:absolute;top:20px;inset-inline-start:20px;width:1px;height:1px;opacity:0;overflow:hidden}
.hi-pi__btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:2px;background:var(--hi-cobalt);color:#fff;font-weight:600;cursor:pointer;transition:background-color .15s}
.hi-pi__btn:hover{background:var(--hi-cobalt-dk)}
.hi-pi__file:focus-visible+.hi-pi__btn{outline:3px solid var(--hi-cobalt);outline-offset:3px}
.hi-pi__picker.is-full .hi-pi__btn{background:#fff;color:var(--hi-marine);box-shadow:inset 0 0 0 1px var(--hi-marine)}
.hi-pi__rules{margin:0;font-size:14px;color:var(--hi-ink3);text-wrap:pretty}
.hi-pi__gauge{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:12px;border-top:1px solid var(--hi-line)}
.hi-pi__g{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 8px}
.hi-pi__g-k{font-size:13px;color:var(--hi-ink3)}
.hi-pi__g-v{justify-self:end;font:600 14px/1.2 'Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums;direction:ltr}
.hi-pi__meter{grid-column:1/-1;height:4px;background:var(--hi-track);overflow:hidden}
.hi-pi__meter i{display:block;height:100%;width:0;background:var(--hi-cobalt);transition:width .2s}
.hi-pi__summary{margin:0;font-weight:500;text-wrap:pretty}
.hi-pi__hint{margin:0;font-size:14px;color:var(--hi-ink3)}
.hi-pi__hint[hidden]{display:none}

/* Per-file feedback */
.hi-pi__rejected{display:grid;gap:8px;justify-items:start;padding:14px 16px;border:1px solid var(--hi-err);background:var(--hi-err-bg)}
.hi-pi__rejected[hidden]{display:none}
.hi-pi__rej-t{margin:0;font-weight:700;color:var(--hi-err)}
.hi-pi__rej-l{margin:0;padding:0;list-style:none;display:grid;gap:6px;width:100%}
.hi-pi__rej-l li{display:grid;gap:0;font-size:14px}
.hi-pi__rej-l b{font:600 14px/1.4 'Manrope',system-ui,sans-serif;overflow-wrap:anywhere}
.hi-pi__rej-h{margin:0;font-size:14px;color:var(--hi-ink2)}

/* Photo list */
.hi-pi__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hi-line)}
.hi-pi__list:empty{display:none}
.hi-pi__item{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"num head" "thumb thumb" "fields fields" "acts acts";gap:12px;align-items:center;padding:20px 0;border-bottom:1px solid var(--hi-line);transition:background-color .6s}
.hi-pi__item.is-moved{background:var(--hi-tint)}
.hi-pi__num{grid-area:num;min-width:2ch;font:600 24px/1 'Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hi-pi__head{grid-area:head;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.hi-pi__item-t{margin:0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.hi-pi__badge{display:inline-block;padding:3px 9px;background:var(--hi-marine);color:#fff;font-size:13px;font-weight:600;line-height:1.4;border:1px solid transparent}
.hi-pi__fname{font:500 13px/1.4 'Manrope',system-ui,sans-serif;color:var(--hi-ink3);overflow-wrap:anywhere}
.hi-pi__thumb{grid-area:thumb;position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:#E6EDF2}
.hi-pi__item--main .hi-pi__thumb{outline:2px solid var(--hi-marine);outline-offset:3px}
.hi-pi__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.hi-pi__thumb-msg{position:absolute;inset:0;display:none;place-items:center;font-size:13px;color:var(--hi-ink2)}
.hi-pi__thumb.is-loading img{opacity:0}
.hi-pi__thumb.is-loading .hi-pi__thumb-msg,.hi-pi__thumb.is-broken .hi-pi__thumb-msg{display:grid}
.hi-pi__thumb.is-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:hi-pi-sweep 1.3s linear infinite}
.hi-pi__ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2px;text-align:center;
  background:linear-gradient(var(--hi-line),var(--hi-line)) center/1px 100% no-repeat,linear-gradient(var(--hi-line),var(--hi-line)) center/100% 1px no-repeat}
.hi-pi__ph span{padding:2px 8px;background:#E6EDF2;font-size:13px;color:var(--hi-ink2)}
.hi-pi__ph .hi-pi__fname{font-size:12px}
.hi-pi__fields{grid-area:fields;display:grid;gap:12px}
.hi-pi__field label{display:block;margin-bottom:4px;font-size:14px;font-weight:600}
.hi-pi__opt{font-weight:400;color:var(--hi-ink3)}
.hi-pi__fhint{margin:4px 0 0;font-size:13px;color:var(--hi-ink3)}
.hi-pi__input{display:block;width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--hi-field);border-radius:2px;background:#fff;color:inherit;font:inherit;font-size:16px}
.hi-pi__input:focus-visible{outline-offset:1px;border-color:var(--hi-cobalt)}
.hi-pi__input[aria-invalid="true"]{border-color:var(--hi-err);box-shadow:inset 0 0 0 1px var(--hi-err)}
.hi-pi__acts{grid-area:acts;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.hi-pi__act{min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--hi-marine);border-radius:2px;background:#fff;color:var(--hi-marine);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s}
.hi-pi__act:hover:not(:disabled){background:var(--hi-tint)}
.hi-pi__act:disabled{color:#8496A4;border-color:#D5DEE5;cursor:not-allowed}
.hi-pi__act--remove{color:var(--hi-err);border-color:var(--hi-err)}
.hi-pi__act--remove:hover:not(:disabled){background:var(--hi-err-bg)}

/* Rights + errors */
.hi-pi__check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;font-weight:500;cursor:pointer}
.hi-pi__check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--hi-cobalt);cursor:pointer}
.hi-pi__check input[aria-invalid="true"]{outline:2px solid var(--hi-err);outline-offset:2px}
.hi-pi__err{margin:4px 0 0;font-size:14px;font-weight:600;color:var(--hi-err)}
.hi-pi__err[hidden]{display:none}

/* Submission state */
.hi-pi__state{display:grid;gap:10px;margin-top:20px;padding:14px 16px;border:1px solid var(--hi-line);background:var(--hi-mist);font-weight:500}
.hi-pi__state:empty{display:none}
.hi-pi__state p{margin:0}
.hi-pi__state[data-state="sent"]{border-color:var(--hi-marine);border-width:1px 1px 1px 1px;background:#fff;box-shadow:inset 0 3px 0 var(--hi-marine)}
.hi-pi__state[data-state="failed"]{border-color:var(--hi-err);background:var(--hi-err-bg);color:var(--hi-err)}
.hi-pi__bar{position:relative;display:block;height:3px;background:var(--hi-track);overflow:hidden}
.hi-pi__bar::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:35%;background:var(--hi-cobalt);animation:hi-pi-run 1.4s ease-in-out infinite}

/* Desktop / wide container */
@container (min-width:620px){
  .hi-pi__title{font-size:36px}
  .hi-pi__lead{font-size:18px}
  .hi-pi__seg{max-width:480px}
  .hi-pi__picker{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:24px;padding:24px}
  .hi-pi__picker>.hi-pi__btn{grid-row:1}
  .hi-pi__gauge,.hi-pi__summary{grid-column:1/-1}
  .hi-pi__item{grid-template-columns:48px 220px minmax(0,1fr);grid-template-areas:"num thumb head" "num thumb fields" "num thumb acts";gap:12px 24px;align-items:start;padding:24px 0}
  .hi-pi__num{font-size:28px;padding-top:2px}
  .hi-pi__fields{grid-template-columns:3fr 2fr}
  .hi-pi__acts{grid-template-columns:repeat(3,max-content)}
}

@keyframes hi-pi-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes hi-pi-run{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.hi-pi[dir="rtl"] .hi-pi__bar::after{animation-name:hi-pi-run-rtl}
@keyframes hi-pi-run-rtl{0%{transform:translateX(100%)}100%{transform:translateX(-300%)}}

@media (prefers-reduced-motion:reduce){
  .hi-pi *,.hi-pi *::before,.hi-pi *::after{animation:none!important;transition:none!important}
  .hi-pi__bar::after{width:100%;opacity:.45}
}
@media (forced-colors:active){
  .hi-pi__seg-opt:has(input:checked){outline:2px solid CanvasText;outline-offset:-4px}
  .hi-pi__meter i,.hi-pi__bar::after{background:Highlight}
}

.hi-photo-intake{grid-column:1/-1}
.hi-photo-intake .hi-photo-picker{display:block;background:var(--hi-mist);border:1px solid var(--hi-line);padding:18px;margin:20px 0 8px;min-height:48px}
.hi-photo-intake #listing-photos{display:block;width:100%;max-width:100%;font-size:16px;min-height:48px;margin:12px 0 0;padding:8px;background:white;color:var(--hi-marine)}
.hi-photo-intake #listing-photos::file-selector-button{font:inherit;min-height:44px;padding:8px 12px;background:var(--hi-cobalt);color:white;border:0;margin-inline-end:12px}
.hi-photo-intake #listing-photo-limits{font-size:14px;line-height:1.6}
.hi-photo-intake .hi-pi__fields{grid-template-columns:1fr}
.hi-photo-intake .hi-pi__acts button{width:auto;white-space:normal;line-height:1.4;min-height:44px}
.hi-photo-intake input[type=checkbox]{width:24px;height:24px;min-height:24px;flex:none}
.hi-photo-intake .trust-checkbox{display:flex;align-items:flex-start;gap:12px;min-height:44px}
.hi-photo-intake .hi-photo-status{font-weight:600;min-height:24px}
.hi-photo-intake .hi-pi__acts button{background:#fff;color:#0b3045;border:1px solid #0b3045;font-size:14px;padding:10px 8px}.hi-photo-intake .hi-pi__acts button:disabled{color:#667b89;background:#f7fafc;border-color:#cbd6df}.hi-photo-intake .hi-pi__acts .hi-pi__act--remove{color:#b42318;border-color:#b42318}
