/* properties-list.css -- session 412 (briefs/session-412-brief.md; mh-properties-mockups-v1/properties-list-round1.dc.html): the Properties list. The
   drawing's own stylesheet and inline styles, ported value for value as named tokens (tokens.css --prl-*, --mh-teal-band, and the Appointments list's
   --apl-* palette, which the drawing shares) and prl- classes. The band and the filter card are the Appointments list's (appointments-list.css B2, B3:
   the same sizes, paddings, radii and shadow) in Properties teal. Every value is the drawing's unless a comment says otherwise. */

/* ---------- the page (inside #page.core-page, the one frame: --mh-frame-max, --mh-frame-side) ---------- */
.mhprl{font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--apl-text);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;gap:16px;min-width:0}
.mhprl *{box-sizing:border-box}
.mhprl a{color:var(--apl-teal-mid);text-decoration:none}
.mhprl a:hover{text-decoration:underline;text-underline-offset:3px}
.mhprl :where(button){font:inherit}   /* no weight of its own: the prl- classes below set the drawing's type */
.mhprl :focus-visible{outline:2px solid var(--apl-sky);outline-offset:2px}
.mhprl [hidden]{display:none !important}
.prl-err:empty{display:none}

/* ---------- the title row (the Appointments list's, B1, with the Properties icon) ---------- */
.prl-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prl-isq{width:40px;height:40px;border-radius:10px;background:var(--apl-teal);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.prl-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.prl-top h1.prl-h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-0.035em;color:var(--apl-ink);line-height:1.05}
.prl-sub{font-size:12px;color:var(--apl-muted);font-weight:400}
.prl-grow{flex:1 1 auto}
.prl-btn2{border:1.5px solid var(--apl-line2);background:#ffffff;color:var(--apl-ink);font-size:13.5px;font-weight:600;border-radius:10px;padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:normal}
.mhprl a.prl-btn2{color:var(--apl-ink)}
.prl-btn2:hover,.mhprl a.prl-btn2:hover{background:var(--apl-s2);text-decoration:none}
.prl-btny{border:0;background:linear-gradient(var(--apl-yellow),var(--apl-yellow-2));color:var(--apl-ink);font-size:13.5px;font-weight:700;border-radius:10px;padding:10px 16px;cursor:pointer;box-shadow:0 6px 16px rgba(217,106,24,.28);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.prl-btny:hover{filter:brightness(.97)}

/* ---------- the band (the Appointments strip, B2, in teal) ---------- */
.prl-band{border-radius:18px;background:var(--mh-teal-band);box-shadow:var(--mh-teal-shadow);padding:12px 22px;display:flex;flex-direction:column;gap:10px;color:#ffffff}
.prl-l1{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.prl-load{font-size:13px;color:rgba(255,255,255,.78);padding:14px 0}
.prl-stats{display:flex;gap:6px;flex-wrap:wrap}
.prl-stat{border:0;background:transparent;color:#ffffff;text-align:left;padding:6px 10px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.prl-stat:hover{background:rgba(255,255,255,.10)}
.prl-stat.on{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px var(--apl-yellow)}
.prl-stat b{font-size:22px;font-weight:800;letter-spacing:-0.03em;line-height:1}
.prl-stat > span{font-size:12px;font-weight:600;color:rgba(255,255,255,.78)}
.prl-stat b.y{color:var(--apl-yellow)}
.prl-total{flex-direction:row;align-items:baseline;gap:10px;padding:4px 8px}
.prl-total b{font-size:40px;letter-spacing:-0.04em}
.prl-total > span{display:flex;flex-direction:column;gap:1px;color:#ffffff}
.prl-total .w{font-size:14px;font-weight:700}
.prl-total .d{font-size:12px;color:rgba(255,255,255,.78);font-weight:400}
.prl-vdiv{width:1px;align-self:stretch;background:rgba(255,255,255,.22)}
/* Active by region: one thin stacked bar */
.prl-rg{display:flex;flex-direction:column;gap:6px;width:340px;max-width:100%}
.prl-rbar{display:flex;width:100%;border-radius:4px;overflow:hidden;gap:2px}
.prl-seg{border:0;padding:0;height:12px;cursor:pointer;display:block;flex:none}
.prl-seg:hover{filter:brightness(1.15)}
.prl-seg.dim{opacity:.35}
.prl-seg:focus-visible{outline:2px solid #ffffff;outline-offset:1px}
.prl-rcap{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:rgba(255,255,255,.78)}
.prl-rcap b{color:#ffffff;font-weight:700;white-space:nowrap}
/* row 2: To clean up */
.prl-l2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:10px}
.prl-l2h{display:inline-flex;align-items:center;gap:8px;color:#ffffff;font-size:13px;font-weight:700;margin-right:6px}
.prl-plus{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center}
.prl-achip{border:0;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.12);color:#ffffff;text-decoration:none}
.mhprl a.prl-achip{color:#ffffff;text-decoration:none}
.prl-achip:hover,.mhprl a.prl-achip:hover{background:rgba(255,255,255,.2);text-decoration:none}
.prl-achip b{font-weight:800;color:var(--apl-yellow)}
.prl-achip .m{color:rgba(255,255,255,.72);font-weight:500}
.prl-achip.on{background:rgba(255,209,58,.22);box-shadow:inset 0 0 0 1.5px var(--apl-yellow)}

/* ---------- the menus (the Region menu, the Missing info menu): the drawing's region menu ---------- */
.prl-mw{position:relative;display:inline-flex}
.prl-menu{position:absolute;top:44px;left:0;width:280px;z-index:60;background:#ffffff;border-radius:14px;box-shadow:var(--apl-pop-shadow);padding:8px;display:flex;flex-direction:column;gap:2px;color:var(--apl-ink)}
.prl-opt{border:0;background:transparent;width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;text-align:left;font-size:13.5px;color:var(--apl-ink)}
.prl-opt:hover,.prl-opt:focus-visible{background:var(--apl-s2)}
.prl-opt.on{background:var(--apl-teal-tint);font-weight:700;color:var(--apl-teal)}
.prl-on1{flex:1 1 0%}
.prl-on2{font-size:12.5px;font-weight:700;color:var(--apl-muted);font-variant-numeric:tabular-nums}
.prl-mnote{font-size:11.5px;color:var(--apl-muted);padding:6px 10px 2px}

/* ---------- the filter card (the Appointments list's, B3) ---------- */
.prl-filters{background:#ffffff;border-radius:14px;box-shadow:var(--apl-card-shadow);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.prl-f1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.prl-tabs{display:flex;gap:4px;background:var(--apl-s2);padding:4px;border-radius:999px;flex-wrap:wrap}
.prl-tab{border:0;background:transparent;font-size:13.5px;font-weight:600;color:var(--apl-text);padding:6px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.prl-tab:hover{background:#dde2e5}
.prl-tab span{font-size:12px;font-weight:700;color:var(--apl-muted)}
.prl-tab.on{background:var(--apl-teal);color:#ffffff}
.prl-tab.on span{color:var(--prl-tab-count-on)}
.prl-fdiv{width:1px;height:26px;background:var(--apl-line);margin:0 4px}
.prl-sel{border:1.5px solid var(--apl-line2);background:#ffffff;color:var(--apl-ink);font-size:13.5px;font-weight:500;border-radius:10px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;justify-content:space-between;min-width:150px}
.prl-sel:hover{border-color:#aab4ba}
.prl-sel.on{border-color:var(--apl-teal-mid);background:var(--apl-teal-tint);color:var(--apl-teal);font-weight:700}
select.prl-sel{appearance:none;-webkit-appearance:none;padding-right:32px;background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b747b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;font-family:inherit;width:auto;max-width:240px;height:auto;margin:0;box-shadow:none;line-height:normal}
.prl-rw{display:inline-flex;align-items:center;gap:8px}
.prl-search{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--apl-line2);border-radius:999px;padding:8px 14px;min-width:340px;background:#ffffff}   /* the drawing's 300 cut the placeholder once the / key sits inside */
.prl-search input{border:0;outline:0;font:inherit;font-size:13.5px;flex:1 1 0%;background:transparent;color:var(--apl-ink);min-width:0;padding:0;margin:0;height:auto;box-shadow:none}
.prl-search kbd{font:inherit;font-size:11px;font-weight:700;color:var(--apl-muted);border:1px solid var(--apl-line2);border-radius:5px;padding:0 5px}
.prl-search:focus-within{border-color:var(--apl-sky)}
.prl-f2{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.prl-chk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--apl-ink);font-weight:500;cursor:pointer}
.prl-chk input{width:16px;height:16px;accent-color:var(--apl-teal);margin:0}
.prl-on{display:inline-flex;align-items:center;gap:6px;background:var(--prl-amber-tint);color:var(--prl-on-amber);font-size:12.5px;font-weight:700;border-radius:999px;padding:4px 6px 4px 12px}
.prl-on button{border:0;background:transparent;color:inherit;cursor:pointer;display:inline-flex;padding:2px;border-radius:999px}
.prl-on button:hover{background:rgba(122,83,18,.12)}
/* Clear filters: a link, underlined (session 333: anything clickable looks clickable) */
.prl-clear{border:0;background:transparent;font-size:12.5px;font-weight:700;color:var(--apl-teal-mid);padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.prl-count{font-size:13px;font-weight:700;color:var(--apl-ink)}

/* ---------- the table ---------- */
.prl-tcard{background:#ffffff;border-radius:14px;box-shadow:var(--apl-card-shadow)}
/* The width the table is measured by. Not on a phone: a container is the containing block of a fixed element inside it. */
@media (min-width: 761px){ .prl-tcard{container-type:inline-size;container-name:prltbl} }
.prl-scroll{min-width:0}
.prl-gr{display:grid;grid-template-columns:var(--prl-grid)}
.prl-gr > div{padding:12px;min-width:0}
.prl-gr > div:first-child{padding-left:18px}
.prl-gr > div:last-child{padding-right:28px}
.prl-th{background:var(--apl-s2);color:var(--apl-text);font-size:12.5px;font-weight:600;white-space:nowrap;position:sticky;top:calc(var(--hdrH, 0px) + var(--bandH, 0px));z-index:20;align-items:center;border-radius:14px 14px 0 0}
.prl-th > div{padding-top:10px;padding-bottom:10px}
.prl-th .r{text-align:right}
.prl-th .c{text-align:center}
.prl-sort{border:0;background:transparent;font-size:12.5px;font-weight:600;color:var(--apl-text);padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.prl-sort:hover{color:var(--apl-teal)}
.prl-sort.on{color:var(--apl-teal);font-weight:800}
.prl-arr{opacity:.45}
.prl-sort.on .prl-arr{opacity:1}
.prl-row{border-bottom:1px solid var(--apl-line);font-size:13.5px;color:var(--apl-text);align-items:start;background:#ffffff;cursor:pointer}
.prl-row:hover{background:var(--prl-row-hover)}
.prl-row:last-child{border-bottom:0;border-radius:0 0 14px 14px}
.prl-num{text-align:right;font-variant-numeric:tabular-nums}
.prl-d1{color:var(--apl-ink);font-weight:600;line-height:1.35}
.prl-d2{color:var(--apl-muted);font-size:12.5px;margin-top:3px;line-height:1.35}
.prl-soft{color:var(--apl-muted);font-weight:500}
.prl-amber{color:var(--apl-on-orange)}
.prl-nonext{color:var(--apl-on-orange);font-weight:700}
.mhprl a.prl-pname{display:block;font-weight:700;font-size:14.5px;letter-spacing:-0.01em;line-height:1.3;color:var(--apl-teal);overflow-wrap:anywhere}
.mhprl a.prl-addr{color:var(--apl-muted);text-decoration:underline;text-decoration-color:var(--apl-line2);text-underline-offset:3px}
.mhprl a.prl-addr:hover{color:var(--apl-teal-mid);text-decoration-color:currentColor}
.prl-rpill{display:inline-block;margin-left:6px;background:var(--prl-amber-tint);color:var(--prl-on-amber);font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px}
.mhprl a.prl-client{font-weight:600;line-height:1.35;display:inline;overflow-wrap:anywhere}
.prl-none1{color:var(--apl-faint)}
.prl-miss{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--prl-amber-tint);color:var(--prl-on-amber);margin-top:5px}
.prl-rgc{display:flex;gap:8px;align-items:flex-start;color:var(--apl-ink);line-height:1.35}
.prl-rdot{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none;margin-top:5px}
.prl-opt .prl-rdot{margin-top:0}
.prl-svc{color:var(--apl-ink);line-height:1.35}
.bk-ical{color:var(--apl-on-green);font-weight:600}
.bk-turno{color:var(--mh-navy);font-weight:600}
.bk-other{color:var(--apl-text)}
.bk-none{color:var(--apl-on-orange);font-weight:700}
.prl-dc{display:flex;justify-content:center}
.prl-circ{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:transparent;color:var(--apl-line2);box-shadow:inset 0 0 0 1.5px var(--apl-line)}
.prl-circ.due{background:var(--prl-deep);color:#ffffff;box-shadow:none}
.prl-st{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;margin-top:6px}
.prl-st.st-active{background:var(--apl-green-tint);color:var(--apl-on-green)}
.prl-st.st-pending{background:var(--prl-amber-tint);color:var(--prl-on-amber)}
.prl-st.st-inactive{background:var(--apl-s2);color:var(--apl-text)}
/* the tip: hover, keyboard focus and a tap */
.prl-tw{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;cursor:default;border-radius:999px}
.prl-dtw{align-items:center}
.prl-tip{display:none;position:absolute;left:0;top:30px;z-index:30;width:274px;background:var(--apl-ink);color:#ffffff;border-radius:10px;padding:10px 12px;box-shadow:var(--apl-tip-shadow);font-size:12.5px;line-height:1.45;font-weight:450;white-space:normal;text-align:left}
.prl-tip b{display:block;font-size:13px;font-weight:700;margin-bottom:3px}
.prl-dtw .prl-tip{left:auto;right:0}
.prl-tw:hover > .prl-tip,.prl-tw:focus-within > .prl-tip,.prl-tw:focus > .prl-tip,.prl-tw.tap > .prl-tip{display:block}
.prl-none{padding:40px 18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.prl-none b{font-size:17px;font-weight:700;color:var(--apl-ink)}
.prl-none span{font-size:13.5px;color:var(--apl-muted)}
.prl-empty{padding:28px 16px;text-align:center;color:var(--apl-muted)}
.prl-empty b{display:block;color:var(--apl-ink);font-size:15px;margin-bottom:4px}

/* Narrower than the columns' smallest widths (1440 with the menu open, a phone): the card scrolls sideways inside itself, the Property column stays,
   and the header is not sticky (a sideways scroller would hold it), as the Appointments list does under its own width. Between, the drawing's columns
   a little narrower (--prl-grid-mid), so Daniel's 1920 to 2000 with the menu open shows every column without scrolling. */
@container prltbl (max-width: 1519.98px){
  .prl-gr{grid-template-columns:var(--prl-grid-mid)}
}
@container prltbl (max-width: 1375.98px){
  .prl-scroll{overflow-x:auto}
  .prl-scroll > .prl-rows{width:var(--prl-grid-min);min-width:100%}
  .prl-gr > div:first-child{position:sticky;left:0;z-index:5;background:inherit;box-shadow:1px 0 0 var(--apl-line)}
  .prl-th{position:static}
  .prl-row:hover > div:first-child{background:var(--prl-row-hover)}
}

/* ---------- a phone ---------- */
@media (max-width: 760px){
  .prl-band{padding:12px 14px}
  .prl-l1{gap:10px}
  .prl-stats{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}
  .prl-stat{padding:6px 6px}
  .prl-tabs{flex-wrap:nowrap;width:100%;justify-content:space-between}
  .prl-tab{padding:6px 7px;gap:4px;font-size:12.5px}
  .prl-tab span{font-size:11px}
  .prl-total b{font-size:34px}
  .prl-vdiv{display:none}
  .prl-rg{width:100%}
  .prl-search{min-width:0;width:100%}
  .prl-f1 .prl-more{display:none;flex-direction:column;align-items:stretch;gap:8px;width:100%}
  .prl-f1.open .prl-more{display:flex}
  .prl-f1 .prl-more .prl-fdiv{display:none}
  select.prl-sel{max-width:none;width:100%}
  .prl-regw .prl-mw,.prl-regw .prl-sel{width:100%}
  .prl-top h1.prl-h1{font-size:26px}
  .prl-tip{width:220px}
  .prl-menu{width:min(280px, calc(100vw - 64px))}
  .prl-scroll{overflow-x:auto}
  .prl-scroll > .prl-rows{width:var(--prl-grid-min);min-width:100%}
  .prl-gr{grid-template-columns:var(--prl-grid-mid)}
  .prl-gr > div:first-child{position:sticky;left:0;z-index:5;background:inherit;box-shadow:1px 0 0 var(--apl-line)}
  .prl-th{position:static}
}
@media (min-width: 761px){ .prl-fbtn{display:none} .prl-f1 .prl-more{display:contents} }

/* Session 413 (briefs/session-413-brief.md D): Possible duplicates, opened from its "To clean up" chip. Each pair: the two homes side by side (stacked on a
   phone), the one to keep ringed, why in plain words, Merge (owners) and Not the same home. */
.prl-dcard{background:#ffffff;border-radius:14px;box-shadow:var(--apl-card-shadow);margin:0 0 16px;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.prl-dhead{display:flex;align-items:flex-start;gap:6px 14px;flex-wrap:wrap}
.prl-dh2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--apl-ink);flex:1 1 auto}
.prl-dsub{font-size:13px;color:var(--apl-muted);flex-basis:100%;order:3}
.prl-dacts .prl-dsub{flex-basis:auto;order:0}
.prl-dclose{order:2}
.prl-dlist{display:flex;flex-direction:column;gap:12px}
.prl-dpair{border:1.5px solid var(--apl-line2);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.prl-dsides{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prl-dside{border:1.5px solid var(--apl-line2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.prl-dside.on{border-color:var(--apl-teal-mid);background:var(--apl-teal-tint)}
.mhprl a.prl-dname{font-size:14.5px;font-weight:700;color:var(--apl-ink);text-decoration:underline;text-decoration-color:var(--apl-line2);text-underline-offset:3px;overflow-wrap:anywhere}
.mhprl a.prl-dname:hover{text-decoration-color:var(--apl-teal-mid)}
.mhprl a.prl-daddr{font-size:13px;color:var(--apl-teal-mid);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.prl-dfacts{font-size:12.5px;color:var(--apl-muted)}
.prl-dkeep{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--apl-ink);margin-top:4px;cursor:pointer;min-height:28px}
.prl-dwhy{margin:0;padding-left:18px;font-size:13px;color:var(--apl-text);display:flex;flex-direction:column;gap:2px}
.prl-dacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mhprl a.prl-dmerge{color:var(--apl-ink);text-decoration:none}
@media (max-width:760px){ .prl-dsides{grid-template-columns:1fr} .prl-dcard{padding:14px} }
.prl-btn2:disabled{opacity:.55;cursor:default}