/* v0.38.0 additions: appearance switch, price chart, map, photo strip, search, saved tick. */

/* Appearance: Auto (match this device), Light or Dark. */
.theme-switch{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.theme-switch .theme-toggle{min-height:33px;padding:5px 10px;border:0;border-radius:9px;background:transparent;color:var(--muted);box-shadow:none;font-size:12px}
.theme-switch .theme-toggle:hover{background:#e9f2ec;color:#173f35;box-shadow:none}
.theme-switch .theme-toggle.is-current{background:#dfeee5;color:#173f35;box-shadow:inset 0 0 0 1px #b9d6c6}
.theme-switch .theme-toggle span:first-child{font-size:15px}
html[data-theme=dark] .theme-switch{background:#15272d}
html[data-theme=dark] .theme-switch .theme-toggle{background:transparent;color:var(--muted);border:0}
html[data-theme=dark] .theme-switch .theme-toggle:hover{background:#244039;color:#fff}
html[data-theme=dark] .theme-switch .theme-toggle.is-current{background:#2a4c40;color:#c1f4d8;box-shadow:inset 0 0 0 1px #4f8a72}
@media(max-width:600px){.theme-switch .theme-toggle{width:33px;padding:4px}}

/* Asking-price chart on a house report. */
.price-chart{margin:0 0 14px}
.price-chart svg{display:block;width:100%;max-width:760px;height:auto;border:1px solid var(--line);border-radius:var(--tidy-radius-inner,12px);background:var(--white)}
.price-grid{stroke:var(--line);stroke-dasharray:3 4}
.price-baseline{stroke:var(--line)}
.price-axis{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.price-line{fill:none;stroke:#2c7a63;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.price-check{fill:#2c7a63;opacity:.45}
.price-change.is-cut{fill:#c4553f;stroke:var(--white);stroke-width:2}
.price-change.is-rise{fill:#a8761c;stroke:var(--white);stroke-width:2}
.price-now{fill:#2c7a63;stroke:var(--white);stroke-width:2}
.price-chart figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:9px}
.price-chart figcaption small{flex-basis:100%;color:var(--muted);font-size:12px}
.price-legend{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.price-legend span{display:inline-block;width:10px;height:10px;border-radius:50%}
.key-cut{background:#c4553f}.key-rise{background:#a8761c;margin-left:6px}
@media(max-width:620px){.price-axis{font-size:19px}.price-line{stroke-width:4.5}.price-check{r:4}.price-change{r:9}.price-now{r:7}}
.price-table summary{cursor:pointer;font-weight:700;color:var(--green)}
.price-table[open] summary{margin-bottom:8px}
html[data-theme=dark] .price-chart svg{background:#15272d}
html[data-theme=dark] :is(.price-line){stroke:#89dcba}
html[data-theme=dark] :is(.price-check,.price-now){fill:#89dcba}
html[data-theme=dark] .price-change.is-cut{fill:#ff9c86}
html[data-theme=dark] .price-change.is-rise{fill:#f1c76b}

/* House map. */
.map-panel{padding:14px}
.map-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.map-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;font-size:12px;color:var(--muted)}
.map-legend span::before,.map-list li::before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;border-radius:50%;background:#7d8b8e;vertical-align:-1px}
.map-legend .key-positive::before,.map-list .verdict-positive::before{background:#1f8a64}
.map-legend .key-neutral::before,.map-list .verdict-neutral::before{background:#2f6fa3}
.map-legend .key-review::before,.map-list .verdict-review::before{background:#c08417}
.map-legend .key-negative::before,.map-list .verdict-negative::before{background:#b9472f}
.house-map{height:min(62vh,560px);min-height:320px;border:1px solid var(--line);border-radius:var(--tidy-radius-inner,12px);background:#e6ece8;overflow:hidden;z-index:0}
.map-panel .help{margin:10px 2px 0}
.map-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin:0 0 6px;padding:0;list-style:none}
.map-list li{display:flex;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--tidy-radius-inner,12px);background:var(--white)}
.map-list li::before{flex:none;margin-top:6px}
.map-list a{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:var(--ink)}
.map-list small{color:var(--muted)}
.map-popup{display:flex;flex-direction:column;gap:4px;font:13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.map-popup img{width:100%;height:110px;object-fit:cover;border-radius:8px;margin-bottom:4px}
.map-popup a{font-weight:700}
.leaflet-container a.leaflet-popup-close-button{min-height:0}
html[data-theme=dark] .house-map{background:#17282e}
html[data-theme=dark] .house-map .leaflet-tile-pane{filter:brightness(.78) contrast(1.05) saturate(.8)}
html[data-theme=dark] .map-list li{background:#192a31}
html[data-theme=dark] .map-list a{color:var(--ink)}
@media(max-width:620px){.map-panel{padding:10px}.house-map{height:58vh}.map-toolbar .button{width:100%}}

/* Photo strip at the top of a house report. */
.photo-strip-panel{margin:0 0 var(--tidy-gap,18px)}
.photo-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin;border-radius:var(--tidy-radius,16px)}
.photo-strip:focus-visible{outline:3px solid #6fb79a;outline-offset:3px}
.photo-strip-item{position:relative;flex:0 0 auto;width:min(420px,78vw);height:280px;scroll-snap-align:start;overflow:hidden;border-radius:var(--tidy-radius,16px);background:#dfe7e2;box-shadow:var(--tidy-shadow)}
.photo-strip-item:first-child{width:min(560px,86vw)}
.photo-strip.is-single .photo-strip-item{width:100%;max-width:760px}
.photo-strip-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.photo-strip-item:hover img{transform:scale(1.03)}
.photo-strip-tag{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:3px 10px;border-radius:999px;background:#0f2a24c4;color:#fff;font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-strip-note{margin:6px 2px 0;color:var(--muted);font-size:12px}
.photo-strip-empty{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px dashed var(--line);border-radius:var(--tidy-radius,16px);color:var(--muted)}
.photo-strip-empty img{width:36px;height:36px;object-fit:contain;opacity:.8}
.photo-strip-add{margin-top:8px;padding:0 2px}
.photo-strip-add>summary{cursor:pointer;font-weight:700;color:var(--green);font-size:14px}
.photo-strip-add form{display:grid;gap:8px;max-width:560px;margin:10px 0}
.photo-strip-add form button{justify-self:start}
.photo-strip-manage{display:grid;gap:8px;margin:8px 0;padding:0;list-style:none;max-width:560px}
.photo-strip-manage li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:10px}
.photo-strip-manage img{width:64px;height:48px;object-fit:cover;border-radius:8px}
.photo-strip-manage small{display:block;color:var(--muted)}
.photo-strip-manage form{margin:0}
html[data-theme=dark] .photo-strip-item{background:#20343a}
@media(max-width:620px){.photo-strip-item{height:220px}.photo-strip-item:first-child{width:86vw}}
@media(prefers-reduced-motion:reduce){.photo-strip-item img{transition:none}}
@media print{.photo-strip-add,.photo-strip-note{display:none}.photo-strip{overflow:visible;flex-wrap:wrap}.photo-strip-item{height:180px;width:46%!important;box-shadow:none}}

/* Bigger photos on the house list. */
.house-row{grid-template-columns:148px minmax(0,1fr) auto;gap:16px;padding:10px 14px 10px 10px}
.house-row-photo{position:relative;display:block;width:148px;height:110px}
.house-row-photo>img,.house-row-photo>.house-row-placeholder{width:100%;height:100%;object-fit:cover;border-radius:11px;display:block}
.house-row-photo .house-row-count{position:absolute;right:6px;bottom:6px;padding:1px 7px;border-radius:999px;background:#0f2a24c4;color:#fff;font-size:11px;font-weight:700}
.house-row-main strong{font-size:16px}
@media(max-width:620px){
  .house-row{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 12px;padding:8px 10px 8px 8px}
  .house-row-photo{width:104px;height:92px;grid-row:1/3}
  .house-row-nums{grid-column:2;flex-direction:row!important;flex-wrap:wrap;align-items:baseline;gap:2px 8px;text-align:left!important}
  .house-row-main strong{font-size:15px}
}
@media(min-width:1200px){
  .workbench-row{grid-template-columns:136px minmax(0,1fr)}
  .workbench-row img,.workbench-row .workbench-placeholder{width:136px;height:104px;border-radius:11px}
  .workbench-detail .detail-cover{height:230px;object-fit:cover}
}

/* Quick search. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.header-search{margin:0}
.header-search input{width:250px;min-height:39px!important;padding:7px 12px 7px 34px;border:1px solid var(--line);border-radius:10px;background:var(--white) url("search-icon.svg") no-repeat 11px 50%/15px 15px;font-size:13px}
.header-search input:focus{width:300px}
.header-search-link{display:none;place-items:center;width:39px;height:39px;border:1px solid var(--line);border-radius:10px;background:var(--white);text-decoration:none;font-size:16px}
.search-page-form{display:flex;gap:10px;margin:0 0 18px;max-width:720px}
.search-page-form input{flex:1;min-height:48px!important;font-size:16px;padding-left:40px;background:var(--white) url("search-icon.svg") no-repeat 14px 50%/17px 17px}
.search-page-form button{min-height:48px}
.search-count{color:var(--muted);margin:0 0 10px}
.search-group h2 small{display:inline;margin-left:4px;color:var(--muted);font-weight:600;font-size:13px}
.search-results{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.search-results a{display:flex;flex-direction:column;padding:10px 12px;border:1px solid var(--line);border-radius:var(--tidy-radius-inner,12px);text-decoration:none;color:var(--ink);background:var(--white)}
.search-results a:hover,.search-results a:focus-visible{border-color:#90bea9;background:#f2f8f4}
.search-results small{color:var(--muted)}
html[data-theme=dark] .header-search input{background:#102229 url("search-icon.svg") no-repeat 11px 50%/15px 15px}
html[data-theme=dark] .search-page-form input{background:#102229 url("search-icon.svg") no-repeat 14px 50%/17px 17px}
html[data-theme=dark] .header-search-link{background:#192a31}
html[data-theme=dark] .search-results a{background:#192a31;color:var(--ink)}
html[data-theme=dark] .search-results a:hover{background:#21363c}
@media(max-width:1100px){.header-search input{width:190px}.header-search input:focus{width:220px}}
@media(max-width:850px){.header-search{display:none}.header-search-link{display:grid}}
@media(max-width:620px){.search-page-form button{display:none}}

/* A clear "Saved" tick on every success message. */
.notice.success{position:relative;padding-left:48px;animation:saved-in .35s ease-out}
.notice.success::before{content:"✓";position:absolute;left:13px;top:50%;margin-top:-12px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#1f8a64;color:#fff;font-weight:800;font-size:14px;animation:saved-tick .45s .1s ease-out both}
@keyframes saved-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes saved-tick{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.notice.success,.notice.success::before{animation:none}}

/* v0.41.1: removing a receipt needs its tick box (the old pop-up was blocked), and the upload box follows dark mode. */
.receipt-remove{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.receipt-remove label.check{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
html[data-theme=dark] .receipt-upload{background:#18282e;border-color:#345057;color:#dceae4}

/* v0.42.0: Evidence to get. */
.evidence-chips{display:flex;flex-wrap:wrap;gap:8px}
.evidence-house{padding:12px 0;border-top:1px solid var(--line)}.evidence-house:first-of-type{border-top:0;padding-top:0}
.evidence-house h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;font-size:16px}
.evidence-house ul,.evidence-rents{margin:0;padding-left:18px}
.evidence-house li,.evidence-rents li{margin:4px 0;overflow-wrap:anywhere}
.evidence-rents small{display:block;color:var(--muted)}

/* v0.42.1: fixes from the November review. */

/* The house report's jump bar sticks just below the page header. It used to slide underneath the
   header, so it could never be seen; on phones the Sale / Rent / Insights bar stuck in its place. */
.report-jumps{top:61px;z-index:30;scrollbar-width:none}
.report-jumps::-webkit-scrollbar{display:none}
.report-jumps a{white-space:nowrap}
html:has(body[data-page="research.detail"]){scroll-padding-top:128px}
body[data-page="research.detail"] .report-section{scroll-margin-top:0}
@media(max-width:850px){
  body[data-page="research.detail"] .research-primary.research-mode-nav{position:relative;top:auto}
  /* Between phone and computer width the section bar was a short pill floating over the page. */
  .research-primary.research-mode-nav{max-width:none}
}
@media(max-width:620px){.report-jumps{top:57px}html:has(body[data-page="research.detail"]){scroll-padding-top:122px}}
html.android-embed .report-jumps{top:0}

/* Picking a house in the computer-width list lands on that row, not back at the top of the list. */
.workbench-row{scroll-margin-top:28px}
@media(min-width:1200px){.workbench-detail .eyebrow{margin:12px 0 0;font-size:11px;text-transform:uppercase}}

/* Tasks: "Edit" beside a long title broke into "Edi" and "t". */
.task-edit{flex:none;white-space:nowrap;overflow-wrap:normal}
/* Phones: a status label under a page title stretched across the whole screen. */
@media(max-width:520px){.page-heading>.badge{align-self:flex-start}}
/* Page links under a list sat on a white strip (an old rule gave every nav a white band). */
nav.actions{padding:0;background:transparent;border-bottom:0;overflow:visible;white-space:normal}
nav.actions a{padding:0;border-bottom:0;color:var(--green);font-weight:inherit;text-decoration:underline}
/* Folded sections: a taller line to tap. */
main details>summary{padding-block:7px}

/* Entries filtered to "flagged for review" say so, with the way back. */
.filter-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 14px;padding:10px 14px;border:1px solid #efd39c;border-radius:var(--tidy-radius-inner,12px);background:#fff3dc;font-size:14px}

/* Phones: one short card per entry (what, how much, when, status) instead of six stacked labels. */
@media screen and (max-width:600px){
  .transaction-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"desc amount" "date status" "cat cat";gap:5px 12px;align-items:start;margin:0 0 10px;padding:12px 14px;border-radius:var(--tidy-radius-inner,12px)}
  .transaction-table tr:has(td.empty){display:block}
  .transaction-table td{padding:0}
  .transaction-table td.tx-desc{grid-area:desc}
  .transaction-table td.tx-desc>a{font-size:15px;font-weight:700}
  .transaction-table td.tx-amount{grid-area:amount;justify-self:end;text-align:right;font-size:16px;font-weight:750}
  .transaction-table td.tx-none{display:none}
  .transaction-table td.tx-date{grid-area:date;align-self:center;color:var(--muted);font-size:12px;white-space:normal}
  .transaction-table td.tx-status{grid-area:status;justify-self:end}
  .transaction-table td.tx-cat{grid-area:cat;color:var(--muted);font-size:12px}
  .transaction-table td.tx-desc::before,.transaction-table td.tx-date::before,.transaction-table td.tx-status::before,.transaction-table td.tx-cat::before{display:none}
  .transaction-table td.tx-amount::before{margin-bottom:0;font-size:10px;font-weight:600}
  .transaction-table td.tx-date small,.transaction-table td.tx-cat small{display:inline;margin:0;font-size:12px}
  .transaction-table td.tx-date small::before,.transaction-table td.tx-cat small::before{content:" · "}
}

/* Dark mode: colours that were left light, or too dim to read. */
html[data-theme=dark]{--surface:#192a31;--card:#192a31;--primary:#89dcba}
html[data-theme=dark] .incoming{color:#8fe0bd}
html[data-theme=dark] .attention-row strong{background:#244039;color:#d6eee2}
html[data-theme=dark] .receipt-chip.attached{background:#1d4a3a;color:#bdf0d8}
html[data-theme=dark] .receipt-chip.missing{background:#4a3a14;color:#ffd98a}
html[data-theme=dark] .receipt-preview{background:#21363c;color:#b9e8d3}
html[data-theme=dark] .loan-avatar{background:#203f4d;color:#b5d9ea}
html[data-theme=dark] :is(.loan-card:nth-child(2),.director-card:nth-child(2)) .loan-avatar{background:#3a3553;color:#d5caf3}
html[data-theme=dark] .speed-quick{color:#8fe0bd}
html[data-theme=dark] .speed-slow{color:#ffc27a}
html[data-theme=dark] .filter-note{background:#493a23;border-color:#6a5331;color:#ffe0a6}
html[data-theme=dark] .mobile-nav a.active{box-shadow:inset 0 -3px #6fcfa6}
/* The phone toolbar's current tab was a pale box with its label invisible. */
@media(max-width:620px){html[data-theme=dark] .mobile-nav a.active{background:linear-gradient(180deg,#2f5548,#244339)!important}}
/* A red button stays red in dark mode (the dark button rule had turned "Archive transaction" green). */
html[data-theme=dark] :is(button,.button).danger{background:#a24a3f!important;border-color:#a24a3f!important;color:#fff!important}
html[data-theme=dark] :is(button,.button).danger:hover{background:#b6584c!important}
/* Phones: the four Money tabs share one row (Reports used to drop to a second line). */
@media(max-width:600px){
  .money-sections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .money-sections a{padding:.62rem .15rem;font-size:clamp(11px,3.3vw,13px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:360px){.money-sections{grid-template-columns:repeat(2,minmax(0,1fr))}.money-sections a{font-size:13px}}
/* A link beside a panel title stays on one line (it broke into "Rental" / "register →"). */
.section-heading>a{flex:none;white-space:nowrap}
/* A panel whose word explanation is open sits above the panels after it, so the box is never covered. */
:where(.panel,.card):has(.term:is(:hover,:focus)){z-index:29}