/* My properties (#38, #152): a property dashboard. Tokens and components of app.css (web/DESIGN.md): one cool-grey
   panel (radius 48) holding white cards (radius 28), photoreal building images on --stage, Instrument Serif for the
   title, big numbers and status lines, Inter for everything else, navy as the one accent, status colours only for
   status (green limit/protection, amber an open question, blue starts later, grey none). */

.mp-root { --mp-gap: 20px; }
.mp-small { font-size: var(--fs-s); color: var(--label-2); margin-top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn.danger { --edge: #7d150f; background: var(--danger); color: #fff; box-shadow: 0 3px 0 var(--edge); }
.btn.sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn .ico { width: 18px; height: 18px; }
.mp-root .btn { transition: transform .32s var(--spring), box-shadow .12s var(--ease-std), background-color .2s; }
.mp-root .btn:active { transform: translateY(3px) scale(.97); transition-duration: .08s; }
.gsi { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; color: #1f1f1f; border: 1px solid #747775; font: 500 15px/1 Roboto, var(--font); text-decoration: none; white-space: nowrap; transition: transform .3s var(--spring), background-color .2s; }
.gsi svg { width: 18px; height: 18px; flex: none; }
.gsi:hover { background: #f8f9fa; text-decoration: none; }
.gsi:active { transform: scale(.97); }
.gsi.sm { min-height: 38px; font-size: 14px; }
.mp-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }

/* ------------------------------------------------------------------ dashboard */
.mp-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.mp-title { min-width: 0; }
.mp-title h1 { font: 700 var(--fs-l)/.98 var(--display); letter-spacing: -.03em; }
.mp-lead { color: var(--label-2); margin-top: 10px; font-size: 17px; max-width: 60ch; }
.mp-acct { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.mp-exbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 22px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--sep-2); font-size: var(--fs-s); color: var(--label-2); max-width: 100%; }
.mp-exbar b { color: var(--label); font-weight: 600; }
.mp-exbar > span:not(.mp-exdot) { flex: 1 1 auto; min-width: 0; }
.mp-exbar .gsi { margin-left: auto; }
.mp-exdot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px rgb(10 107 68 / .1); }
.mp-panel { background: var(--bg); border-radius: var(--r-card); box-shadow: var(--shadow-card); }

/* summary strip */
.mp-stat-l { font-size: 15px; font-weight: 600; margin-top: 8px; }
.mp-stat-s { font-size: 13.5px; color: var(--label-2); overflow-wrap: anywhere; }

/* coming up: one line across all buildings */
.mp-coming { margin-top: var(--mp-gap); padding: 26px 0 22px; }
.mp-coming > .mp-small { padding: 0 28px 6px; }
.mp-stop-d { display: grid; height: var(--d-h, 44px); align-content: end; padding-bottom: 6px; }
.mp-stop-d b { font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-stop-d span { font-size: 12.5px; color: var(--label-3); }
.mp-stop-dot { position: relative; z-index: 1; width: 16px; height: 16px; margin-top: 6px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 4px var(--c, var(--st-muted)); animation: mp-pop .5s var(--spring) both; animation-delay: calc(240ms + var(--i) * 70ms); }
.mp-stop-c { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 8px; padding: 8px 10px 8px 8px; border-radius: 16px; color: var(--label); text-decoration: none; transition: background-color .2s, transform .3s var(--spring); }
.mp-stop-c:hover { background: var(--fill); text-decoration: none; }
.mp-stop-c:active { transform: scale(.97); }
.mp-stop-c > span { display: grid; min-width: 0; }
.mp-stop-c b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.mp-stop-c span span { font-size: 12.5px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-stop-img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; background: var(--stage); }

/* one row that scrolls (wide screens): the edge with more fades and an arrow scrolls on */

/* buildings */
.mp-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--bg); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 10px; animation: mp-rise .6s var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 80ms); transition: transform .45s var(--spring), box-shadow .3s var(--ease-out); }
.mp-card.is-new { animation: mp-flash .7s var(--spring) both; }
.mp-body { display: flex; flex-direction: column; padding: 16px 12px 8px; min-width: 0; flex: 1; }
.mp-name { font-size: 18px; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; }
.mp-name a { color: var(--label); text-decoration: none; }
.mp-name a:hover { color: var(--accent); }
.mp-addr { font-size: var(--fs-s); color: var(--label-2); margin-top: 2px; overflow-wrap: anywhere; }
.mp-s-ok { --c: var(--applies); --tint: var(--ok-tint); }
.mp-s-unk { --c: var(--unknown); --tint: var(--unk-tint); }
.mp-s-soon { --c: var(--soon); --tint: var(--soon-tint); }
.mp-s-none { --c: #8a919c; --tint: var(--mut-tint); }

/* topic dots */

/* one-tap question */
.mp-q { margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: var(--unk-tint); }
.mp-q p { font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.mp-q p span { color: var(--unknown); font-weight: 600; }
.mp-q-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mp-q-b .btn { min-height: 34px; padding: 0 16px; }
.mp-q-b .btn.is-on { background: var(--ink-btn); color: #fff; --edge: var(--ink-btn-edge); }

/* #152 next raise */
.mp-raise { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: var(--cool); }
.mp-raise-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--label-2); }
.mp-ex { font-size: 11.5px; font-weight: 600; color: var(--label-3); padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / .8); white-space: nowrap; }
.mp-raise-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; }
.mp-raise-l b { font: 700 26px/1.1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.mp-raise-a { font-size: 15px; font-weight: 600; }
.mp-raise-a i { font-style: normal; font-weight: 500; color: var(--label-2); }
.mp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--unk-tint); color: var(--unknown); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mp-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mp-raise.mp-s-unk .mp-raise-l b { color: var(--label-2); }
.mp-raise-w { font-size: 13.5px; color: var(--label-2); margin-top: 4px; line-height: 1.4; }
.mp-raise-n { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; font-weight: 500; margin-top: 8px; }
.mp-raise-n .ico { width: 16px; height: 16px; flex: none; color: var(--accent); margin-top: 1px; }
.mp-draft { width: 100%; margin-top: 12px; }
.mp-cal-btn + .mp-cal-btn { margin-top: 8px; }
.mp-raise-acts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13.5px; }
.mp-raise.is-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mp-raise.is-empty .mp-raise-k { font-size: 14.5px; color: var(--label); }

/* next change, as a mini timeline pill */
.mp-next-d { flex: none; padding: 7px 10px 7px 12px; font-weight: 650; color: var(--soon); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.mp-next-d::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mp-next-t { padding: 7px 14px 7px 0; min-width: 0; line-height: 1.3; }

.mp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 18px; }
.mp-acts .btn { flex: 1 1 auto; margin-bottom: 3px; padding: 0 14px; }
.mp-rm { margin-left: auto; width: 38px; height: 38px; }
.mp-rm .ico { width: 18px; height: 18px; }
.mp-rm:hover { color: var(--danger); background: var(--over-tint); }
.mp-rm:active { transform: scale(.92); }

/* add a building (signed in) */
.mp-addc { padding: 22px 22px 24px; background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1.5px var(--sep); border: 0; }
.mp-addc-art { width: 96px; height: 96px; border-radius: 24px; background: var(--stage); overflow: hidden; margin-bottom: 14px; }
.mp-addc-art img { width: 100%; height: 100%; object-fit: cover; }
.mp-search { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding: 4px 4px 4px 14px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--label); min-width: 0; }
.mp-search:focus-within { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--ring); }
.mp-search-i .ico { width: 18px; height: 18px; color: var(--label-3); display: block; }
.mp-search input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; padding: 10px 4px; color: var(--label); outline: none; }
.mp-search .btn { margin-bottom: 0; }

/* settings: calendar feed + email, one compact card */
.mp-settings { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.mp-set-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 22px 26px; align-content: start; min-width: 0; }
.mp-set-row + .mp-set-row { border-left: 1px solid var(--sep-2); }
.mp-set-i { width: 40px; height: 40px; border-radius: 12px; background: var(--cool); display: grid; place-items: center; color: var(--accent); }
.mp-set-i .ico { width: 20px; height: 20px; }
.mp-set-t { display: grid; gap: 2px; min-width: 0; }
.mp-set-t b { font-size: 15px; font-weight: 650; }
.mp-set-t > span, .mp-set-t span span { font-size: 13.5px; color: var(--label-2); }
.mp-set-a { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mp-set-f { grid-column: 2; font-size: 12.5px; color: var(--label-3); margin-top: 4px; }
.mp-switch { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; cursor: pointer; }
.mp-switch > span { display: grid; gap: 2px; min-width: 0; }
.mp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mp-knob { position: relative; width: 51px; height: 31px; border-radius: 16px; background: #e3e6ea; transition: background .2s ease; flex: none; }
.mp-knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / .2); transition: transform .35s var(--spring); }
.mp-switch input:checked + .mp-knob { background: var(--applies); }
.mp-switch input:checked + .mp-knob::after { transform: translateX(20px); }
.mp-switch input:focus-visible + .mp-knob { outline: 3px solid var(--ring); outline-offset: 2px; }
.mp-switch input:disabled + .mp-knob { opacity: .5; }

/* account menu */
.mp-menu { position: relative; flex: none; max-width: 100%; }
.mp-menu > summary { list-style: none; max-width: 100%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--sep-2); }
.mp-menu > summary::-webkit-details-marker { display: none; }
.mp-menu > summary .chev { transform: rotate(90deg); display: inline-flex; }
.mp-menu > summary .chev .ico { width: 14px; height: 14px; }
.mp-email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mp-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; background: var(--bg); border-radius: 18px; box-shadow: var(--shadow-float); padding: 6px; display: grid; animation: mp-pop .3s var(--spring) both; transform-origin: top right; }
.mp-pop button, .mp-pop a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border: 0; background: none; border-radius: 12px; text-align: left; font-size: 15px; color: var(--label); cursor: pointer; }
.mp-pop button:hover, .mp-pop a:hover { background: var(--fill); text-decoration: none; }
.mp-pop .danger { color: var(--danger); }

/* ------------------------------------------------------------------ one building */
.mp-back { margin: 0 0 14px; font-size: var(--fs-s); }
.mp-back a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--cool); color: var(--label); font-weight: 600; text-decoration: none; transition: transform .3s var(--spring); }
.mp-back a:active { transform: scale(.96); }
.mp-back .ico { width: 16px; height: 16px; }
.mp-dhead { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; align-items: center; padding: 16px; border-radius: 48px; background: linear-gradient(180deg, var(--cool), #f4f7f5); }
.mp-dphoto { aspect-ratio: 4 / 3; border-radius: 36px; overflow: hidden; background: var(--stage); position: relative; }
.mp-dphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.mp-dtitle { min-width: 0; padding: 8px 16px 8px 0; }
.mp-dtitle h1 { font: 700 var(--fs-l)/.98 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.mp-dtitle .mp-addr { font-size: 17px; margin-top: 10px; }
.mp-dmeta { font-size: var(--fs-s); color: var(--label-3); margin-top: 4px; }
.mp-dtitle .mp-acts { padding-top: 20px; }
.mp-dtitle .mp-rm { margin-left: 0; }
.mp-dtitle .mp-acts .btn { flex: 0 1 auto; }
.mp-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; margin-top: 32px; align-items: start; }
.mp-dmain { min-width: 0; }
.mp-dside { position: sticky; top: calc(var(--nav-h) + 16px); min-width: 0; }
.mp-raise.full { margin: 0; padding: 24px 24px 20px; border-radius: 28px; }
.mp-raise-big { font: 700 clamp(44px, 5vw, 64px)/1 var(--display); letter-spacing: -.02em; margin-top: 6px; }
.mp-raise.full .mp-raise-a { font-size: 19px; display: block; margin-top: 8px; }
.mp-due { display: flex; gap: 12px; align-items: center; background: var(--bg); border-radius: 18px; padding: 10px 14px 10px 10px; margin: 16px 0 14px; }
.mp-due-img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--stage); flex: none; }
.mp-due b { display: block; font-size: 16px; }
.mp-due span { font-size: 13.5px; color: var(--label-2); }
.mp-cal-btn { width: 100%; }
.mp-raise-from { font-size: 13.5px; color: var(--label-2); margin-top: 12px; }
.mp-raise-from .linkish { margin-left: 8px; font-size: 13.5px; }
.mp-facts { padding: 22px 24px; }
.mp-facts h2 { font-size: 15px; font-weight: 650; margin-bottom: 8px; }
.mp-facts .kv dd.miss { color: var(--label-3); }
.mp-hintline { font-size: var(--fs-s); color: var(--unknown); margin-top: 12px; }
.mp-hintline.ok { color: var(--applies); }
.mp-tl { max-width: var(--col); }
.mp-ev { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; }
.mp-ev.none { display: block; }
.mp-ev.none .mp-small { margin: 0; }
.mp-when b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.mp-when span { font-size: var(--fs-s); color: var(--label-2); }
.mp-what { display: grid; gap: 10px; min-width: 0; }
.mp-ev-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 10px; overflow-wrap: anywhere; }
.mp-ev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-top: 8px; }
.mp-ev-t { font-weight: 500; }
.mp-ev-s { grid-column: 2; font-size: var(--fs-s); color: var(--label-2); }
.mp-pending { margin-top: 24px; }
.mp-pending h3 { font-size: var(--fs-s); font-weight: 600; color: var(--label-2); }
.mp-pending .mp-small { margin: 2px 0 8px; }
.mp-pending .mp-ev { grid-template-columns: minmax(0, 1fr); }
.mp-answers { margin-top: 32px; }

/* why sheet */
.mp-why .mp-small { margin: 0 0 4px; }
.mp-src { padding: 16px 0; border-top: 1px solid var(--sep-2); }
.mp-src:first-of-type { border-top: 0; }
.mp-src h3 { font-size: 15px; font-weight: 650; margin-bottom: 8px; }
.mp-src > p { font-size: 15px; color: var(--label-2); margin-bottom: 10px; }
.mp-src .quote { font: 700 19px/1.35 var(--display); }
.mp-cite { font-size: 13px; color: var(--label-3); margin-top: 8px; overflow-wrap: anywhere; }
.mp-ics { display: flex; gap: 14px; align-items: center; background: var(--cool); border-radius: 18px; padding: 14px 16px; margin-top: 6px; color: var(--label); text-decoration: none; transition: transform .3s var(--spring); }
.mp-ics:hover { text-decoration: none; background: var(--cool-2); }
.mp-ics:active { transform: scale(.98); }
.mp-ics-cal { width: 52px; height: 56px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-card); text-align: center; overflow: hidden; flex: none; display: grid; grid-template-rows: auto 1fr; }
.mp-ics-cal i { display: block; background: var(--danger); color: #fff; font: 600 11px/1.6 var(--font); font-style: normal; letter-spacing: .04em; }
.mp-ics-cal b { font-size: 24px; line-height: 1.5; }
.mp-ics > span:last-child { display: grid; gap: 2px; min-width: 0; }
.mp-ics > span:last-child span { font-size: 13px; color: var(--label-2); }

/* sheet (add / edit / confirm), inside app.js #modal */
.mp-sheet .modal-card { max-width: 600px; }
.mp-form { display: grid; gap: 16px; }
.mp-form + .mp-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--sep-2); }
.mp-field { display: grid; gap: 6px; font-size: var(--fs-s); font-weight: 500; color: var(--label-2); min-width: 0; }
.mp-field > span { display: flex; align-items: center; gap: 8px; }
.mp-field i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--unknown); }
.mp-field i:empty { display: none; }
.mp-field input { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--sep); border-radius: 12px; background: var(--bg); font-size: 16px; color: var(--label); }
.mp-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.mp-inline { display: flex; gap: 8px; }
.mp-inline .btn { flex: none; margin-bottom: 0; }
.mp-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mp-fgrid > .mp-field:nth-child(3) { grid-column: 1 / -1; }
.mp-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: 12px; background: #eeeef0; }
.mp-seg button { min-height: 36px; border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 500; color: var(--label); cursor: pointer; transition: transform .25s var(--spring); }
.mp-seg button:active { transform: scale(.96); }
.mp-seg button[aria-checked="true"] { background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.mp-preview { min-height: 24px; font-size: var(--fs-s); }
.mp-preview.stale { opacity: .5; }
.mp-preview .sum-row { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mp-resolve:empty { display: none; }
.mp-wait { color: var(--label-2); }
.mp-msg { font-size: var(--fs-s); color: var(--unknown); }
.mp-found { font-size: var(--fs-s); color: var(--label-2); }
.mp-found b { display: block; color: var(--label); font-size: var(--fs-m); font-weight: 600; }
.mp-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0; }
.mp-stack span.on { color: var(--label); }
.mp-stack i { font-style: normal; color: var(--label-3); }
.mp-confirm { color: var(--label-2); }
.mp-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mp-row.end { justify-content: flex-end; }
.mp-skel { padding: 40px; border-radius: 48px; background: var(--cool); margin-top: 8px; }
.mp-skel .sk { background: rgb(17 22 20 / .06); }
.mp-skel-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }

@keyframes mp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mp-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes mp-flash { 0% { transform: scale(.98); box-shadow: 0 0 0 3px var(--ring); } 100% { transform: none; } }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .mp-settings { grid-template-columns: minmax(0, 1fr); }
  .mp-set-row + .mp-set-row { border-left: 0; border-top: 1px solid var(--sep-2); }
  .mp-dgrid { grid-template-columns: minmax(0, 1fr); }
  .mp-dside { position: static; }
}
@media (max-width: 860px) {
  .mp-dhead { grid-template-columns: minmax(0, 1fr); gap: 8px; border-radius: 36px; }
  .mp-dtitle { padding: 8px 8px 12px; }
  .mp-dphoto { border-radius: 28px; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .mp-root { --mp-gap: 14px; }
  .mp-top { padding: 0 6px; }
  .mp-exbar { margin-left: 6px; margin-right: 6px; border-radius: 22px; padding: 12px 12px 12px 16px; }
  .mp-exbar .gsi { flex: 1 1 100%; justify-content: center; }
  .mp-stat-l { font-size: 14px; }
  .mp-stat-s { font-size: 12.5px; }
  .mp-coming { padding: 20px 0 14px; }
  .mp-coming > .mp-small { padding: 0 18px; } /* fade edge: there is more to the right */ /* the last stop can scroll clear of the fade */
  .mp-settings { margin-top: 28px; }
  .mp-set-row { padding: 18px 16px; grid-template-columns: 36px minmax(0, 1fr); }
  .mp-set-i { width: 36px; height: 36px; }
  .mp-set-a, .mp-set-f { grid-column: 1 / -1; }
  .mp-cta > * { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  .mp-ev { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mp-when b { display: inline; margin-right: 8px; }
  .mp-inline { flex-direction: column; }
  .mp-pop button, .mp-pop a { min-height: 44px; }
  .mp-dhead { margin: 0 calc(-1 * max(var(--inset), env(safe-area-inset-left)) + 8px); padding: 8px; }
  .mp-raise.full { padding: 20px 18px 16px; }
  .mp-skel { padding: 20px 12px; }
}
/* phones: the notice is the card's one button (persona round 1: phones had no "Draft the notice"); the check stays as a quiet link */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  html .mp-card .mp-raise-n { font-size: 15px; font-weight: 500; color: var(--label); margin-top: 6px; }
  html .mp-card .mp-raise-n .ico { margin-top: 2px; }
  html .mp-card .mp-draft { width: 100%; margin-top: 14px; padding: 0 16px; min-height: 44px; justify-content: center; color: var(--accent); background: none; box-shadow: inset 0 0 0 1px var(--sep) !important; }
  html .mp-dtitle .mp-acts .btn.mp-share { display: inline-flex; flex: 0 0 auto; gap: 8px; padding: 0 !important; min-height: 44px; }
  html .mp-dtitle .mp-acts .btn.mp-share[hidden] { display: none; }
  html .mp-card.has-notice .mp-acts { padding-top: 4px; }
  html .mp-card.has-notice .mp-acts .btn.primary { width: auto; flex: 0 0 auto; min-height: 44px; padding: 0 !important; box-shadow: none !important; background: none; color: var(--accent); text-decoration: underline; text-decoration-color: rgb(7 90 57 / .3); text-underline-offset: 3px; }
}
@media (max-width: 380px) {
  .mp-acts .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-card, .mp-stop-dot, .mp-pop, .mp-card.is-new { animation: none !important; }
  .mp-card, .mp-root .btn, .mp-stop-c, .mp-knob::after, .gsi, .mp-ics, .mp-back a { transition: none !important; }
}

/* add a building: the typeahead (shares .suggest / .opt with the home search) and the undo toast */
.mp-ta { position: relative; }
.mp-ta .mp-search { margin-top: 16px; }
.mp-ta-list { left: 0; right: 0; top: calc(100% + 8px); z-index: 40; animation: mp-pop-in .22s var(--ease-out) both; transform-origin: top center; }
.mp-ta-list .grp { padding: 8px 14px 4px; font-size: 12px; font-weight: 600; color: var(--label-3); list-style: none; }
.mp-ta-list .opt { list-style: none; transition: background-color .15s; }
.mp-ta-list .opt mark { background: none; color: inherit; font-weight: 700; }
.mp-ta-list .opt .arrow .ico { width: 18px; height: 18px; }
.mp-ta-list .opt.is-wait .addr { color: var(--label-2); }
.mp-ta-list .opt.is-added { background: var(--ok-tint); }
.mp-ta-list .opt.is-added .arrow { color: var(--applies); animation: mp-pop .45s var(--spring) both; }
.mp-ta-list .opt.is-added .arrow .ico { stroke-width: 2.6; }
.mp-addc { overflow: visible; z-index: 2; align-self: start; }
.mp-undo { position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: calc(24px + var(--tabbar-h, 0px) + var(--dock-h, 0px) + env(safe-area-inset-bottom)); z-index: 140; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 10px; border-radius: 999px; background: var(--label); color: #fff; font-size: 14.5px; box-shadow: var(--shadow-float); animation: mp-undo-in .45s var(--spring) both; }
.mp-undo > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.mp-undo.out { animation: mp-undo-out .3s var(--ease-out) both; }
.mp-undo-c { width: 28px; height: 28px; border-radius: 50%; background: var(--applies); display: grid; place-items: center; flex: none; animation: mp-pop .5s var(--spring) .1s both; }
.mp-undo-c .ico { width: 16px; height: 16px; stroke-width: 2.6; color: #fff; }
.mp-undo .linkish { color: #fff; font-weight: 650; text-decoration-color: rgb(255 255 255 / .5); padding: 6px 8px; flex: none; }
@keyframes mp-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mp-undo-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mp-undo-out { to { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .mp-ta-list, .mp-ta-list .opt.is-added .arrow, .mp-undo, .mp-undo.out, .mp-undo-c { animation: none !important; }
}
.acct-b { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; border-radius: 50%; background: var(--ink-btn); color: #fff; font-size: 14px; font-weight: 650; text-decoration: none; flex: none; }
.acct-b:hover { text-decoration: none; background: var(--accent-hover); }
.mp-leave { min-height: 44px; font-size: 14px; }
.mp-small a { color: var(--label-2); text-decoration: underline; text-decoration-color: var(--sep); text-underline-offset: 3px; }
.mp-top .mp-lead { margin-top: 12px; font-size: 13px; color: var(--label-3); }

/* ===== Your buildings (the landlord home, docs/product/journeys.md mock ll1/d2) */
.ll { max-width: 1120px; margin: 0 auto; padding: 18px 0 24px; }
.ll-top h1 { font: 700 clamp(2.6rem, 2rem + 2.4vw, 4rem)/1 var(--display); letter-spacing: -.02em; margin: 0; }
.ll-sub { margin: 6px 0 0; font-size: 17px; color: var(--label-2); }
.ll-ex { margin: 14px 0 0; padding: 12px 16px; border-radius: 16px; background: var(--soon-tint); color: var(--label); font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.ll-ex a { font-weight: 650; }
.ll-ex .mp-leave { font-size: 15px; margin-left: auto; }
.ll-cols { display: grid; gap: 34px; margin-top: 28px; }
.ll-h { font: 700 clamp(1.6rem, 1.4rem + .7vw, 2rem)/1.1 var(--display); margin: 0 0 6px; }
.ll-hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ll-next { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sep-2); }
.ll-next li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sep-2); }
.ll-day { flex: none; width: 64px; height: 64px; border-radius: 16px; background: var(--cool); display: grid; place-items: center; align-content: center; gap: 0; }
.ll-day small { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label-2); }
.ll-day b { font: 700 30px/1 var(--display); color: var(--label); }
.ll-ev { flex: 1; min-width: 0; display: grid; gap: 2px; color: var(--label); text-decoration: none; }
.ll-ev b { font-weight: 650; font-size: 17px; letter-spacing: -.01em; }
.ll-ev > span { color: var(--label-2); font-size: 15px; }
.ll-ev:hover b { color: var(--link); }
.ll-draft { flex: none; min-height: 40px; padding: 0 18px; }
.ll-law { margin-top: 24px; padding: 20px 22px; border-radius: 22px; background: var(--soon-tint); }
.ll-law-h { margin: 0; font-weight: 650; color: var(--soon); }
.ll-law p + p { margin: 6px 0 0; font-size: 17px; color: var(--label); }
.ll-law a { display: inline-block; margin-top: 8px; font-weight: 650; text-decoration: none; }
.ll-th { display: none; }
.ll-b { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--sep-2); }
.ll-b li a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n t" "r r"; gap: 2px 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--sep-2); color: var(--label); text-decoration: none; }
.ll-bn { grid-area: n; display: grid; gap: 2px; min-width: 0; }
.ll-bn b { font-weight: 650; font-size: 16.5px; }
.ll-bn span { font-size: 15px; color: var(--label-2); }
.ll-br { grid-area: r; font-size: 15px; color: var(--label-2); }
.ll-tag { grid-area: t; white-space: nowrap; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 650; }
.ll-tag.t-ok { background: var(--ok-tint); color: var(--applies); }
.ll-tag.t-soon { background: var(--soon-tint); color: var(--soon); }
.ll-tag.t-unk { background: var(--unk-tint); color: var(--unknown); }
.ll-b li a:hover .ll-bn b { color: var(--link); }
.ll-add { width: 100%; justify-content: center; min-height: 54px; margin-top: 22px; font-size: 17px; }
.ll-add-d { display: none; }
.ll-add-s { margin: 10px 0 0; text-align: center; font-size: 14.5px; color: var(--label-3); }
.ll-addp { margin-top: 16px; padding: 18px; border-radius: 22px; box-shadow: inset 0 0 0 1.5px var(--sep); display: grid; gap: 10px; }
.ll-addp .mp-addc { display: grid; gap: 6px; }
.ll-addp .mp-addc-art { display: none; }
.ll-set { margin-top: 20px; }
.ll-set > summary { cursor: pointer; list-style: none; font-size: 15px; color: var(--label-2); padding: 8px 0; }
.ll-set > summary::-webkit-details-marker { display: none; }
.ll-set > summary:hover { color: var(--link); }
.ll-acct { margin-top: 28px; }
.ll-save { max-width: 520px; margin: 24px auto; display: grid; gap: 14px; }
.ll-save h1 { font: 700 clamp(2.2rem, 1.8rem + 1.6vw, 3rem)/1.05 var(--display); margin: 0; }
.ll-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ll-checks li { display: flex; gap: 12px; align-items: center; font-size: 17px; }
.ll-checks .ico { color: var(--applies); width: 22px; height: 22px; }
.ll-save .btn { width: 100%; justify-content: center; min-height: 54px; }
@media (min-width: 900px) {
  .ll-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .ll-add-d { display: inline-flex; }
  .ll-add, .ll-add-s { display: none; }
  .ll-th { display: grid; grid-template-columns: 1fr 1.3fr 118px; gap: 12px; margin: 16px 0 0; padding-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--label-3); }
  .ll-b { margin-top: 0; }
  .ll-b li a { grid-template-columns: 1fr 1.3fr 118px; grid-template-areas: "n r t"; align-items: start; gap: 12px; }
  .ll-tag { justify-self: end; }
  .ll-br { font-size: 16px; color: var(--label); }
}