/* =====================================================================================================================
   THE PHONE'S RESEARCH PAGES (owner ruling, 30 Oct 2026, his redesigner's comps for the agent deck on a phone).
   js/phone-research.js writes the markup; this is its look. PHONE ONLY: every rule is inside the phone query, so a desktop
   reads none of it.

   From the comps: the layout, the hierarchy, the card treatment (a drawn white card, a hairline between rows, a copper line
   icon), the spacing rhythm, the tab row with a More menu, and a sub-page with a breadcrumb. NOT from the comps: any size.
   The comps are drawn zoomed in ("i feel all of them is a bit zoomed in"), so every size here is a token of the phone
   scale (r335, declared at the end of css/mobile-media.css), the 44px tap floor holds, and nothing is a pixel the scale
   does not have. It is checked at 360, 390 and 430 (r250).
   ===================================================================================================================== */
@media (max-width:767px),(pointer:coarse) and (max-height:500px){
  :root{--m-copper:#a8743f;--m-copper-soft:#c9a27a;--m-sage:#7da08a}
  :root[data-theme$="dark"]{--m-copper:#d9a766;--m-copper-soft:#a98354;--m-sage:#6f9a7e}

  /* ---- the tab row: Property, Market, Rent, Money, More ---- */
  html body #view .m-rtabs{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap-xs);
    margin:0 0 var(--m-gap);padding:0 0 var(--m-gap-s);border-bottom:1px solid var(--line-2)}
  html body #view .m-rtab{display:inline-flex;align-items:center;justify-content:center;gap:var(--m-gap-xs);min-height:var(--m-tap);padding:0 var(--m-gap-s);
    border:0;border-radius:var(--m-radius);background:transparent;color:var(--ink-2);font:inherit;font-size:var(--m-body);font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer}
  html body #view .m-rtab[aria-current="true"]{background:color-mix(in srgb,var(--sig) 13%,var(--card));color:var(--ink);font-weight:650}
  html body #view .m-rtab svg{width:16px;height:16px;flex:none}
  html body #view .m-more{position:relative}
  html body #view .m-more-menu{position:absolute;z-index:40;top:calc(100% + var(--m-gap-xs));right:0;min-width:min(240px,calc(100vw - 2 * var(--m-page-x)));padding:var(--m-gap-xs);
    border:1px solid var(--card-edge,var(--line-2));border-radius:var(--m-radius);background:var(--card);box-shadow:0 6px 18px -6px rgba(0,0,0,.28)}
  html body #view .m-more-menu[hidden]{display:none}
  html body #view .m-more-item{display:flex;align-items:center;width:100%;min-height:var(--m-tap);padding:0 var(--m-gap);border:0;border-radius:var(--m-gap-s);
    background:transparent;color:var(--ink);font:inherit;font-size:var(--m-body);text-align:left;white-space:nowrap;cursor:pointer}
  html body #view .m-more-item[aria-current="true"]{background:color-mix(in srgb,var(--sig) 13%,var(--card));font-weight:650}

  /* the research card keeps no vertical padding of its own on a phone: the cards inside it carry theirs */
  html body #view .deck18-research-card .research-main-v5{padding-top:0;padding-bottom:0}
  /* "Checked 26 Oct" at the left, Refresh at the right with its arrow (the comps' row) */
  html body #view .research-fresh{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap);margin:0 0 var(--m-gap)}
  html body #view .research-fresh>i{display:none}
  html body #view .research-fresh>span{color:var(--ink-2)}
  html body #view .research-fresh>button{display:inline-flex;align-items:center;gap:var(--m-gap-s);color:var(--sig);text-decoration-color:var(--sig)}
  html body #view .research-fresh>button::before{content:"";width:16px;height:16px;flex:none;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4v4.5h-4.5'/%3E%3C/svg%3E") center/16px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4v4.5h-4.5'/%3E%3C/svg%3E") center/16px no-repeat}

  /* ---- the card every page is made of ---- */
  html body #view .m-stack{display:grid;gap:var(--m-gap);min-width:0}
  html body #view .m-card{min-width:0;padding:var(--m-pad);border:1px solid var(--card-edge,var(--line-2));border-radius:var(--m-radius);background:var(--card)}
  html body #view .m-card-h{display:flex;align-items:center;gap:var(--m-gap);margin:0 0 var(--m-gap-xs)}
  html body #view .m-card-h h3{flex:1;min-width:0;margin:0;font-size:var(--m-h4);font-weight:650;line-height:1.25;color:var(--ink)}
  html body #view .m-card-h>svg{flex:none;width:20px;height:20px;color:var(--ink-3)}
  html body #view .m-ico{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;color:var(--m-copper);font-style:normal}
  html body #view .m-ico svg{width:24px;height:24px}
  html body #view .m-card-h2{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--m-gap);margin:0 0 var(--m-gap-xs)}
  html body #view .m-card-h2 h3{margin:0;font-size:var(--m-h4);font-weight:650;line-height:1.25;color:var(--ink)}
  html body #view .m-card-h2 p{margin:var(--m-gap-xs) 0 0;font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-card-h2>span{flex:none;font-size:var(--m-cap);color:var(--ink-2)}
  html body #view [data-m-open][role="button"]{cursor:pointer;-webkit-tap-highlight-color:transparent}
  html body #view [data-m-open][role="button"]:active{background:color-mix(in srgb,var(--sig) 6%,var(--card))}
  html body #view [data-m-open][role="button"]:focus-visible{outline:2px solid var(--sig);outline-offset:2px}

  /* ---- Property: the record, the unit and the lease as three cards ---- */
  html body #view .property-record94.m-stack{margin-top:0}
  html body #view .m-prop .m-card-h{margin-bottom:var(--m-gap-xs)}
  html body #view .m-row{display:grid;grid-template-columns:minmax(96px,36%) minmax(0,1fr);align-items:center;gap:var(--m-gap);padding:var(--m-pad-s) 0;border-top:1px solid var(--line)}
  html body #view .m-row>span{font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-row>b{min-width:0;font-size:var(--m-body);font-weight:600;color:var(--ink);overflow-wrap:anywhere}
  html body #view .m-row>b small{display:block;margin-top:var(--m-gap-xs);font-size:var(--m-cap);font-weight:400;color:var(--ink-2)}
  html body #view .m-row .rec-field{width:100%}
  /* Floor area, bedrooms and bathrooms are three equal cells that share one set of rows (icon, label, box): the rows are the
     grid's own (subgrid), so a label that wraps to two lines on a narrow phone pushes every box down together instead of
     only its own. The box fills its cell exactly: the desktop field's negative left margin and 280px width are reset here
     (owner, 4 Nov 2026: "the boxes are not aligned"). */
  html body #view .m-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;padding-top:var(--m-pad-s);border-top:1px solid var(--line)}
  html body #view .m-stat{display:flex;flex-direction:column;align-items:center;gap:var(--m-gap-xs);min-width:0;padding:0 var(--m-gap-xs)}
  @supports (grid-template-rows:subgrid){html body #view .m-stat{display:grid;grid-template-columns:minmax(0,1fr);grid-row:span 3;grid-template-rows:subgrid;justify-items:center;align-items:start}}
  html body #view .m-stat+.m-stat{box-shadow:-1px 0 0 var(--line)} /* the divider is a shadow, not a border, so the three boxes are exactly the same width */
  html body #view .m-stat>span{font-size:var(--m-cap);color:var(--ink-2);text-align:center}
  html body #view .m-stat>b{display:block;width:100%;min-width:0;font-size:var(--m-body);font-weight:600}
  html body #view .m-stat .rec-field{width:100%}
  html body #view .m-stat .rec-field input{box-sizing:border-box;width:100%;margin:0;text-align:center;padding:0 var(--m-gap-xs)}
  /* the unit switch sits once under the whole row, label left and switch right, so no single cell carries it */
  html body #view .m-unit-row{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap);margin-top:var(--m-pad-s);padding-top:var(--m-pad-s);border-top:1px solid var(--line)}
  html body #view .m-unit-row>span{font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-unit-row .rec-unit{margin:0}
  html body #view .m-unit-row .rec-unit button{min-width:var(--m-tap);min-height:var(--m-control);font-size:var(--m-body)}
  html body #view .m-stat .rec-field i{display:none}
  html body #view .m-stat .rec-need{margin:var(--m-gap-xs) 0 0}

  /* ---- Market and Rent: the filters card, the chart card ---- */
  html body #view .mkt-card.m-stack{gap:var(--m-gap)}
  html body #view .m-card-top .mkt-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--m-gap-s)}
  html body #view .m-card-top .mkt-head h2{font-size:var(--m-h3)!important;font-weight:650;line-height:1.2}
  html body #view .m-card-top .mkt-head h2::after{display:none}
  html body #view .m-card-top .mkt-filters{flex:1 1 100%;margin:var(--m-gap-xs) 0 0}
  html body #view .m-card-top select.mkt-f{min-height:var(--m-tap);height:var(--m-tap);padding:0 var(--m-gap-s);border-radius:var(--m-gap-s);background:var(--card);font-size:var(--m-input,16px)!important;font-weight:600}
  html body #view .m-card-top>.view-bar{margin-top:var(--m-gap);border-width:1px;border-radius:var(--m-gap-s);background:color-mix(in srgb,var(--ink) 4%,var(--card))}
  html body #view .m-card-top>.view-bar .view-actions{flex:1 1 100%}
  html body #view .m-card-top>.view-bar .view-save{background:var(--sig);color:var(--on-sig);border-color:var(--sig)}
  html body #view .mkt-card.is-unsaved>.m-card-top{border-color:#c8821f}
  html body #view .mkt-card .mkt-none{margin:0;font-size:var(--m-body);color:var(--ink-2)}

  html body #view .m-card-chart{padding:var(--m-pad-s) var(--m-pad) 0}
  html body #view .m-card .mkt-chart-v72{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  html body #view .m-card .mkt-chart-head{gap:var(--m-gap);margin-bottom:var(--m-gap-xs)}
  html body #view .m-card .mkt-key{font-size:var(--m-cap)}
  html body #view .m-card .mkt-delta{font-size:var(--m-cap)}
  html body #view .m-card .mkt-chart-v72 svg text.mkt-n{display:none}
  html body #view .m-card .mkt-chart-v72 svg text{font-size:var(--m-cap-s)!important}
  html body #view .m-card .mkt-chart-v72 svg text.mkt-end{font-size:var(--m-cap)!important}
  html body #view .m-card-chart>.mkt-trend{position:relative;display:flex;align-items:center;gap:var(--m-gap);flex-wrap:nowrap;min-height:var(--m-tap);margin:var(--m-gap-xs) calc(-1 * var(--m-pad)) 0;padding:var(--m-gap-xs) var(--m-pad);border-top:1px solid var(--line)}
  html body #view .m-card-chart>.mkt-trend>small{flex:1;min-width:0;font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-card-chart>.mkt-trend .mkt-trend-tag{flex:none;font-size:var(--m-cap)}
  html body #view .m-open{flex:none;display:inline-grid;place-items:center;width:var(--m-control);height:var(--m-control);padding:0;margin:0 calc(-1 * var(--m-gap-xs)) 0 0;border:0;background:transparent;color:var(--ink-2);cursor:pointer}
  html body #view .m-open svg{width:20px;height:20px}
  /* the whole row is the button: its hit area is stretched over the row, under the chart's own tap targets above it */
  html body #view .m-open::after{content:"";position:absolute;inset:0}

  html body #view .m-card-link{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap);min-height:var(--m-tap)}
  html body #view .m-card-link h3{margin:0;font-size:var(--m-h4);font-weight:650;line-height:1.25;color:var(--ink)}
  html body #view .m-card-link p{margin:var(--m-gap-xs) 0 0;font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-card-link>svg{flex:none;width:20px;height:20px;color:var(--ink-2)}

  /* what they signed at: a bar per row, the dearest the longest */
  html body #view .m-signed{display:grid;margin:0;padding:0;list-style:none}
  html body #view .m-signed>li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:var(--m-gap);row-gap:var(--m-gap-xs);align-items:center;padding:var(--m-pad-s) 0;border-top:1px solid var(--line)}
  html body #view .m-signed>li>.m-ico{grid-row:1/span 2}
  html body #view .m-signed .m-signed-l{grid-column:2;font-size:var(--m-body);color:var(--ink)}
  html body #view .m-signed>li>b{grid-column:3;grid-row:1;font-size:var(--m-body-lg);font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}
  html body #view .m-signed .m-bar{grid-column:2/-1;grid-row:2;display:block;height:6px;border-radius:3px;background:color-mix(in srgb,var(--sig) 12%,var(--card))}
  html body #view .m-signed .m-bar>i{display:block;height:100%;border-radius:3px;background:var(--sig)}
  html body #view .m-signed>li>small{grid-column:2/-1;font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-signed>li.is-picked{background:color-mix(in srgb,var(--sig) 7%,transparent)}

  html body #view .m-card-spread{padding:0}
  html body #view .m-card-spread>.mkt-spread{margin:0;border:0;border-radius:0;background:none;box-shadow:none;padding:var(--m-pad)}
  /* css/decks-mobile.css sets these two with !important at the same weight and loads after this sheet, so the doubled id wins */
  html body #view#view .m-card-spread .mkt-spread-head h3{font-size:var(--m-h4)!important;font-weight:650;color:var(--ink)}
  html body #view#view .m-card-spread .mkt-spread-head small{font-size:var(--m-cap)!important}
  html body #view .mkt-desc{margin-top:var(--m-gap);padding-top:var(--m-gap);gap:var(--m-gap-s)}
  html body #view .mkt-desc p{font-size:var(--m-body)!important}
  html body #view .m-card-table{padding:0}
  html body #view .m-card-table>.mkt-table-v72{margin:0}
  html body #view .m-card-table>.mkt-table-v72>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap);min-height:var(--m-tap);margin:0;padding:0 var(--m-pad);border:0;border-radius:0;
    background:none;font-size:var(--m-body);font-weight:650;color:var(--ink)}
  html body #view .m-card-table>.mkt-table-v72[open]>summary{margin-bottom:var(--m-gap-s)}
  html body #view .m-card-table .data-table-wrap-v5{margin:0 var(--m-pad) var(--m-pad)}
  html body #view .mkt-card .mkt-context{margin:0;font-size:var(--m-body);color:var(--ink-2)}

  /* ---- Money ---- */
  html body #view .m-assume h3{margin:0 0 var(--m-gap-s);font-size:var(--m-h4);font-weight:650;color:var(--ink)}
  html body #view .m-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--m-gap-s);background:color-mix(in srgb,var(--ink) 4%,var(--card))}
  html body #view .m-cells>span{display:flex;align-items:center;justify-content:center;min-height:var(--m-control);padding:0 var(--m-gap-xs);font-size:var(--m-body);font-weight:600;text-align:center;color:var(--ink)}
  html body #view .m-cells>span+span{border-left:1px solid var(--line-2)}
  html body #view .m-assume>p{margin:var(--m-gap-s) 0 0;font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-fin-rows{margin:0;padding:0}
  html body #view .m-fin-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--m-gap);padding:var(--m-pad-s) 0;border-top:1px solid var(--line)}
  html body #view .m-fin-rows>div:first-child{border-top:0}
  html body #view .m-fin-rows dt{font-size:var(--m-body);color:var(--ink)}
  html body #view .m-fin-rows dt small{display:block;margin-top:var(--m-gap-xs);font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-fin-rows dd{margin:0;font-size:var(--m-h4);font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
  html body #view .m-fin-rows dd.m-big,html body #view .m-gap .m-big{font-size:var(--m-h2);font-weight:650;line-height:1.2}
  html body #view .m-fin-box{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--m-gap-xs) var(--m-gap-s);padding:var(--m-gap);border-radius:var(--m-gap-s);background:color-mix(in srgb,var(--ink) 5%,var(--card))}
  html body #view .m-fin-box>span{flex:1 1 100%;font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-fin-box>b{font-size:var(--m-h3);font-weight:650;font-variant-numeric:tabular-nums}
  html body #view .m-fin-box>small{font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-gap{border-color:var(--sig);background:color-mix(in srgb,var(--sig) 7%,var(--card))}
  html body #view .m-gap .m-big{margin:var(--m-gap-xs) 0 0}
  html body #view .m-gap-line{margin:var(--m-gap-xs) 0 var(--m-gap);font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-split{display:flex;height:var(--m-control);border-radius:var(--m-gap-s);overflow:hidden}
  html body #view .m-split>i{display:flex;align-items:center;justify-content:center;font-style:normal;font-size:var(--m-cap);font-weight:600;color:#fff}
  html body #view .m-split-a{background:var(--m-copper)}
  html body #view .m-split-b{background:var(--m-sage)}
  html body #view .m-legend{display:flex;flex-wrap:wrap;gap:var(--m-gap-xs) var(--m-gap-l);margin-top:var(--m-gap-s);font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-legend>span{display:inline-flex;align-items:center;gap:var(--m-gap-s)}
  html body #view .m-legend i{width:10px;height:10px;border-radius:50%}
  html body #view .m-dot-a{background:var(--m-copper)}
  html body #view .m-dot-b{background:var(--m-sage)}
  html body #view .m-stack>.finance-inputs-v7{padding:0;border:1px solid var(--card-edge,var(--line-2));border-radius:var(--m-radius);background:var(--card);gap:0}
  html body #view .m-stack>.finance-inputs-v7>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap);min-height:var(--m-tap);padding:0 var(--m-pad);cursor:pointer}
  html body #view#view .m-stack>.finance-inputs-v7>summary h3{margin:0;font-size:var(--m-h4)!important;font-weight:650}
  html body #view .m-stack>.finance-inputs-v7[open]>summary{border-bottom:1px solid var(--line)}
  html body #view .m-stack>.finance-inputs-v7 .finance-grid-v7{padding:var(--m-pad)}

  /* ---- the sub-page shell ---- */
  html body #view .m-subview{min-width:0;padding-top:var(--m-gap-xs)}
  html body #view .m-sub{display:grid;gap:var(--m-gap);min-width:0}
  html body #view .m-sub-crumb{display:inline-flex;align-items:center;justify-self:start;gap:var(--m-gap-s);min-height:var(--m-tap);margin:0 0 calc(-1 * var(--m-gap-xs));padding:0;border:0;background:none;
    font:inherit;font-size:var(--m-body);color:var(--ink-2);cursor:pointer}
  html body #view .m-sub-crumb svg{width:20px;height:20px;flex:none;color:var(--ink-2)}
  html body #view .m-sub-crumb i{font-style:normal;color:var(--ink-3)}
  html body #view .m-sub-head{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap);min-width:0}
  html body #view .m-sub-head h1{margin:0;min-width:0;font-size:var(--m-h2);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
  html body #view .m-sub-line{margin:calc(-1 * var(--m-gap-s)) 0 0;font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-sub-act{flex:none;min-height:var(--m-tap);padding:0 var(--m-gap);border:1px solid var(--card-edge,var(--line-2));border-radius:var(--m-radius);background:var(--card);
    font:inherit;font-size:var(--m-body);font-weight:600;color:var(--ink);white-space:nowrap;cursor:pointer}
  html body #view .m-sub-act.is-primary{background:var(--sig);border-color:var(--sig);color:var(--on-sig)}
  html body #view .m-sub-act:disabled{opacity:.6;cursor:default}
  html body #view .m-sub-saved{flex:none;display:inline-flex;align-items:center;gap:var(--m-gap-xs);min-height:var(--m-tap);padding:0 var(--m-gap);font-size:var(--m-body);font-weight:600;color:var(--sig)}
  html body #view .m-sub-saved svg{width:18px;height:18px}
  html body #view .m-sub-kicker{margin:calc(-1 * var(--m-gap-xs)) 0 calc(-1 * var(--m-gap-s));font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-sub-note{margin:calc(-1 * var(--m-gap-s)) 0 0;font-size:var(--m-body-lg);color:var(--ink-2)}
  html body #view .m-hint{margin:0;font-size:var(--m-cap);color:var(--ink-2)}

  /* ---- a summary card that opens a page: its icon and name, then a row for each group it holds ---- */
  html body #view .m-sum .m-card-h{margin-bottom:0}
  html body #view .m-sum-rows{display:grid;margin:var(--m-gap-s) 0 0;padding:0}
  html body #view .m-sum-rows>div{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap);min-height:var(--m-control);border-top:1px solid var(--line)}
  html body #view .m-sum-rows dt{font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-sum-rows dd{margin:0;font-size:var(--m-body);font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}

  /* ---- fields: a labelled box with its unit inside it. A text field is 16px (the one exception of the scale), enforced in
         css/mobile-media.css, because iOS zooms the page into any smaller one ---- */
  html body #view .m-field{display:grid;gap:var(--m-gap-xs);min-width:0}
  html body #view .m-field+.m-field,html body #view .m-form-pair+.m-field,html body #view .m-field+.m-form-pair{margin-top:var(--m-gap)}
  html body #view .m-field-l{font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-field-box{position:relative;display:flex;align-items:stretch;min-width:0;min-height:var(--m-tap);overflow:hidden;
    border:1px solid var(--line-2);border-radius:var(--m-gap-s);background:color-mix(in srgb,var(--ink) 3%,var(--card))}
  html body #view .m-field-box:focus-within{border-color:var(--sig);box-shadow:0 0 0 3px color-mix(in srgb,var(--sig) 16%,transparent)}
  html body #view .m-field-box>input,html body #view .m-field-box>select{flex:1;min-width:0;min-height:calc(var(--m-tap) - 2px);padding:0 var(--m-gap);border:0;background:transparent;color:var(--ink);outline:0}
  html body #view .m-pre,html body #view .m-suf{display:flex;align-items:center;flex:none;font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-pre{padding:0 var(--m-gap);border-right:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 5%,var(--card));color:var(--ink)}
  html body #view .m-suf{padding:0 var(--m-gap) 0 0}
  html body #view .m-select>select{appearance:none;-webkit-appearance:none;padding-right:calc(var(--m-gap) * 3)}
  html body #view .m-select>svg{position:absolute;right:var(--m-gap);top:50%;width:18px;height:18px;margin-top:-9px;color:var(--ink-2);pointer-events:none}
  html body #view .m-form-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--m-gap)}
  html body #view .m-form-pair>.m-field{margin-top:0}
  html body #view .m-radius{display:grid;gap:var(--m-gap)}
  html body #view .m-radius .m-field+.m-field{margin-top:0}

  /* ---- chips: All and the categories ---- */
  html body #view .m-chips{display:flex;flex-wrap:wrap;gap:var(--m-gap-s)}
  html body #view .m-chip{display:inline-flex;align-items:center;gap:var(--m-gap-xs);min-height:var(--m-control);padding:0 var(--m-gap);border:1px solid var(--line-2);border-radius:999px;
    background:var(--card);color:var(--ink);font:inherit;font-size:var(--m-body);font-weight:500;white-space:nowrap;cursor:pointer}
  html body #view .m-chip>span{font-variant-numeric:tabular-nums}
  html body #view .m-chip[aria-pressed="true"]{background:var(--sig);border-color:var(--sig);color:var(--on-sig)}

  /* ---- groups of places ---- */
  html body #view .m-group{display:grid;gap:var(--m-gap-s);min-width:0}
  html body #view .m-stack>.m-group{margin-top:var(--m-gap-xs)}
  html body #view .m-group-h{margin:0;font-size:var(--m-h4);font-weight:650;line-height:1.25;color:var(--ink)}
  html body #view .m-group-link{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap);width:100%;min-height:var(--m-tap);padding:0;border:0;background:none;text-align:left;cursor:pointer}
  html body #view .m-group-link>h3{margin:0;font-size:var(--m-h4);font-weight:650;color:var(--ink)}
  html body #view .m-group-link>svg{flex:none;width:20px;height:20px;color:var(--ink-2)}
  html body #view .m-seeall{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--m-tap);border:1px solid var(--line-2);border-radius:var(--m-radius);background:transparent;
    color:var(--sig);font:inherit;font-size:var(--m-body);font-weight:600;cursor:pointer}
  html body #view .m-places{display:grid;gap:var(--m-gap-s);min-width:0}

  /* ---- a place as a card: icon, name, the distances, and Walk ---- */
  html body #view .m-place{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"ic main main" "facts facts act" "bus bus bus";column-gap:var(--m-gap);row-gap:var(--m-gap-s);
    align-items:center;min-width:0;padding:var(--m-pad);border:1px solid var(--card-edge,var(--line-2));border-radius:var(--m-radius);background:var(--card)}
  html body #view .m-place>.rp-ic{grid-area:ic;width:40px;height:40px}
  html body #view .m-place>.rp-ic svg{width:20px;height:20px}
  html body #view .m-place-main{grid-area:main;min-width:0}
  html body #view .m-place-main h4{margin:0;font-size:var(--m-body-lg);font-weight:650;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
  html body #view .m-place-main>small{display:block;margin-top:var(--m-gap-xs);font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-place-main .rp-svc,html body #view .m-place-main .rp-lines{display:flex;flex-wrap:wrap;align-items:center;gap:var(--m-gap-xs);margin-top:var(--m-gap-xs)}
  html body #view .m-place-facts{grid-area:facts;display:flex;align-items:flex-start;min-width:0;margin:0}
  html body #view .m-place-facts>div{min-width:0}
  html body #view .m-place-facts>div+div{margin-left:var(--m-gap-s);padding-left:var(--m-gap-s);border-left:1px solid var(--line)}
  html body #view .m-place-facts dt{font-size:var(--m-cap);color:var(--ink-2);white-space:nowrap}
  html body #view .m-place-facts dd{margin:var(--m-gap-xs) 0 0;font-size:var(--m-body);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
  html body #view .m-place-act{display:contents}
  /* the overview's compact card: icon, name with its straight line, Walk; the bus row only for a far place */
  html body #view .m-place.is-compact{grid-template-areas:"ic main act" "bus bus bus";padding:var(--m-pad-s) var(--m-pad);row-gap:var(--m-gap-xs)}
  html body #view .m-place.is-compact>.rp-ic{width:32px;height:32px}
  html body #view .m-place.is-compact>.rp-ic svg{width:18px;height:18px}
  html body #view .m-place-line{margin:var(--m-gap-xs) 0 0;font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-place-line b{margin-left:var(--m-gap-xs);font-size:var(--m-cap);font-weight:600;color:var(--ink)}
  html body #view .m-place{column-gap:var(--m-gap-s)}
  html body #view .m-place>.rp-ic{margin-right:var(--m-gap-xs)}
  html body #view .m-walk{grid-area:act;justify-self:end;display:inline-flex;align-items:center;gap:var(--m-gap-xs);min-height:var(--m-tap);padding:0 var(--m-gap-s);
    border:1px solid color-mix(in srgb,var(--sig) 45%,var(--line-2));border-radius:var(--m-radius);background:var(--card);color:var(--sig);font:inherit;font-size:var(--m-body);font-weight:600;white-space:nowrap;cursor:pointer}
  html body #view .m-walk .m-arw{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  html body #view .m-walk .rp-est{margin-left:var(--m-gap-xs);padding:0 var(--m-gap-xs);border:1px solid var(--line-2);border-radius:var(--m-gap-xs);font-size:var(--m-cap-s)!important;font-weight:500;color:var(--ink-2)}
  html body #view .m-bus{grid-area:bus;min-width:0}
  html body #view .m-bus>summary{display:inline-flex;align-items:center;gap:var(--m-gap-s);min-height:var(--m-control);padding:0 var(--m-gap);border-radius:999px;list-style:none;cursor:pointer;
    background:color-mix(in srgb,var(--m-copper) 14%,var(--card));color:color-mix(in srgb,var(--m-copper) 85%,var(--ink));font-size:var(--m-body);font-weight:500}
  html body #view .m-bus>summary::-webkit-details-marker{display:none}
  /* the desktop's disclosure plus (css/dashboard-f27.css) is not drawn here: the chevron is the one affordance */
  html body #view .m-bus>summary::before,html body #view .m-bus>summary::after{content:none;display:none}
  html body #view .m-bus>summary svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  html body #view .m-bus>summary .m-chev{transition:transform .15s}
  html body #view .m-bus[open]>summary .m-chev{transform:rotate(180deg)}
  html body #view .m-bus .rp-legs{margin:var(--m-gap-s) 0 0;padding:0 0 0 var(--m-gap-l);display:grid;gap:var(--m-gap-xs)}
  html body #view .m-bus .rp-legs-foot{margin:var(--m-gap-s) 0 0}

  /* ---- Sources: a card each, a cream disc with its bronze line icon ---- */
  html body #view .m-disc{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--m-copper) 14%,var(--card))}
  html body #view .m-disc svg{width:22px;height:22px}
  html body #view .m-source,html body #view .m-proj{display:flex;align-items:center;gap:var(--m-gap)}
  html body #view .m-source h3,html body #view .m-proj h3{margin:0;font-size:var(--m-h4);font-weight:650;line-height:1.25;color:var(--ink)}
  html body #view .m-source p,html body #view .m-proj p{margin:var(--m-gap-xs) 0 0;font-size:var(--m-body);line-height:1.4;color:var(--ink-2)}
  /* a source is a short row, not a block: the zone ends shorter than it started (r335) */
  html body #view .m-source{padding:var(--m-pad-s) var(--m-pad)}
  html body #view .m-source .m-disc{width:36px;height:36px}
  html body #view .m-source h3{font-size:var(--m-body-lg)}
  html body #view .m-source p{margin-top:2px;font-size:var(--m-cap)}
  html body #view .m-sum-line{margin:var(--m-gap-s) 0 0;font-size:var(--m-body);color:var(--ink)}
  html body #view .m-source>div,html body #view .m-proj-main{min-width:0;flex:1}
  html body #view .m-gaps .m-fin-rows dt small{margin-top:var(--m-gap-xs)}

  /* ---- Outlook: the pipeline banner, a card a project, the works and the land sales ---- */
  html body #view .m-banner{display:flex;align-items:center;gap:var(--m-gap);padding:var(--m-pad);border-radius:var(--m-radius);background:color-mix(in srgb,var(--sig) 10%,var(--card));color:var(--ink)}
  html body #view .m-banner>svg{flex:none;width:24px;height:24px;color:var(--sig)}
  html body #view .m-banner p{margin:0;font-size:var(--m-body-lg);line-height:1.4}
  html body #view .m-proj small{display:block;margin-top:var(--m-gap-xs);font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-proj-units{flex:none;display:grid;justify-items:end;padding-left:var(--m-gap);border-left:1px solid var(--line-2)}
  html body #view .m-proj-units b{font-size:var(--m-h4);font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}
  html body #view .m-proj-units span{font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-outlook .m-item{display:grid;gap:var(--m-gap-s);padding:var(--m-pad-s) 0;border-top:1px solid var(--line)}
  html body #view .m-outlook .m-card-h+.m-item{border-top:0}
  html body #view .m-item h4{margin:0;font-size:var(--m-body-lg);font-weight:650;line-height:1.3;color:var(--ink)}
  html body #view .m-item p{margin:var(--m-gap-xs) 0 0;font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-chipmark{justify-self:start;display:inline-flex;align-items:center;gap:var(--m-gap-xs);padding:var(--m-gap-xs) var(--m-gap);border-radius:999px;
    background:color-mix(in srgb,var(--sig) 10%,var(--card));color:var(--sig);font-size:var(--m-cap);font-weight:600}
  html body #view .m-chipmark svg{width:14px;height:14px}
  html body #view .m-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--m-gap);margin:var(--m-gap-s) 0 0;padding-top:var(--m-gap-s);border-top:1px solid var(--line)}
  html body #view .m-pair dt{font-size:var(--m-cap);color:var(--ink-2)}
  html body #view .m-pair dd{margin:var(--m-gap-xs) 0 0;font-size:var(--m-body);font-weight:650;color:var(--ink)}
  html body #view .m-none{margin:0;font-size:var(--m-body);color:var(--ink-2)}

  /* ---- Top selling points: the first point open, the rest as rows, each row its own page ---- */
  html body #view .m-sp{margin-top:var(--m-gap);gap:var(--m-gap-s)}
  html body #view .m-sp .m-sp-row{display:block;padding:0}
  html body #view .m-sp-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--m-gap);width:100%;min-height:var(--m-tap);padding:var(--m-pad);
    border:0;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer}
  html body #view .m-sp-btn>svg{width:20px;height:20px;color:var(--ink-2)}
  html body #view .m-sp-text{display:grid;gap:var(--m-gap-xs);min-width:0;justify-items:start}
  html body #view .m-sp-h{font-size:var(--m-body-lg);font-weight:650;line-height:1.35;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* on a phone .sp-main is display:contents (css/dashboard-f27.css), so the note and the evidence panel take the card's whole row like the head and the body */
  html body #view :is(.m-note,.m-evidence){grid-column:1/-1}
  html body #view .m-note{display:flex;align-items:flex-start;gap:var(--m-gap-s);margin:0;padding:var(--m-gap-s) var(--m-gap);border-radius:var(--m-gap-s);
    background:color-mix(in srgb,var(--sig) 9%,var(--card));font-size:var(--m-body);line-height:1.45;color:var(--ink)}
  html body #view .m-note>svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--sig)}
  html body #view .m-evidence{margin-top:var(--m-gap-xs);padding-top:var(--m-gap-s);border-top:1px solid var(--line)}
  html body #view .m-evidence h4{display:flex;align-items:center;gap:var(--m-gap-s);margin:0 0 var(--m-gap-xs);font-size:var(--m-body);font-weight:650;color:var(--ink)}
  html body #view .m-evidence h4>svg{width:18px;height:18px;color:var(--m-copper)}
  html body #view .m-evidence p{margin:0;font-size:var(--m-body);line-height:1.5;color:var(--ink-2)}

  /* ---- Map: the client-deck toggle row, the layers card (shut until asked), the map, Quickest first ---- */
  html body #view .rp-head{margin:0 0 var(--m-gap);padding:0 var(--m-pad);border:1px solid var(--card-edge,var(--line-2));border-radius:var(--m-radius);background:var(--card)}
  html body #view .rp-head .rp-deck-toggle{width:100%;margin:0;min-height:var(--m-tap);flex-direction:row-reverse;justify-content:space-between;font-size:var(--m-body);color:var(--ink)}
  html body #view .m-layers{margin:0 0 var(--m-gap);border:1px solid var(--card-edge,var(--line-2));border-radius:var(--m-radius);background:var(--card)}
  html body #view .m-layers>summary{display:flex;align-items:center;gap:var(--m-gap);min-height:var(--m-tap);padding:0 var(--m-pad);list-style:none;cursor:pointer}
  html body #view .m-layers>summary::-webkit-details-marker{display:none}
  html body #view .m-layers>summary::before,html body #view .m-layers>summary::after{content:none;display:none}
  html body #view .m-layers>summary>svg{flex:none;width:22px;height:22px;color:var(--m-copper)}
  html body #view .m-layers>summary>b{flex:1;min-width:0;font-size:var(--m-h4);font-weight:650;color:var(--ink)}
  html body #view .m-layers-n{font-size:var(--m-body);color:var(--ink-2)}
  html body #view .m-layers>summary>.m-chev{width:20px;height:20px;color:var(--ink-2);transition:transform .15s}
  html body #view .m-layers[open]>summary>.m-chev{transform:rotate(180deg)}
  html body #view .m-layers .rp-chips{display:grid;gap:0;margin:0;padding:0 var(--m-pad) var(--m-gap-xs);overflow:visible}
  html body #view .m-layers .rp-chip{display:flex;align-items:center;gap:var(--m-gap);width:100%;min-height:var(--m-tap);padding:0;border:0;border-top:1px solid var(--line);border-radius:0;
    background:transparent!important;color:var(--ink)!important;font-size:var(--m-body);white-space:nowrap}
  html body #view .m-layers .rp-chip>svg{flex:none;width:32px;height:32px;padding:7px;border-radius:50%;background:var(--c);color:#fff;fill:none;stroke:currentColor}
  html body #view .m-layers .rp-chip>span{flex:1;min-width:0;text-align:left;font-size:var(--m-body)!important}
  html body #view .m-layers .rp-chip>em{font-style:normal;font-size:var(--m-body)!important;color:var(--ink-2)}
  html body #view .m-layers .rp-chip::after{content:"";flex:none;width:22px;height:22px;box-sizing:border-box;border:1.5px solid var(--line-2);border-radius:6px;background:var(--card)}
  html body #view .m-layers .rp-chip[aria-pressed="true"]::after{border-color:var(--sig);background:var(--sig) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
  html body #view .rp-list .rp-list-head{padding:0}
  html body #view .m-list-open{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--m-tap);padding:0 var(--m-pad);border:0;background:transparent;
    font:inherit;font-size:var(--m-h4);font-weight:650;color:var(--ink);cursor:pointer}
  html body #view .m-list-open>svg{width:20px;height:20px;fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* the tab shows the first five; the page behind the heading holds them all */
  html body #view .rp-mapwrap .rp-items>.rp-item:nth-child(n+6){display:none}
  html body #view .rp-mapwrap .rp-body{border-radius:var(--m-radius)}
  html body #view .rp-mapwrap .rp-map{height:min(380px,100vw)}
  html body #view .m-card-list{padding:0}
  html body #view .m-card-list .rp-item{width:100%}

  /* ---- the deck's head on a phone: back and Delete deck on one row, the name, the street and unit, the type ---- */
  html body #view:has(.deck17-shell) .head>.crumb button{display:inline-flex;align-items:center;gap:var(--m-gap-xs);font-size:var(--m-body)!important;color:var(--ink-2)}
  html body #view:has(.deck17-shell) .head>.crumb button::before{content:"";flex:none;width:20px;height:20px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E") center/20px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E") center/20px no-repeat}
  html body #view#view .head .tools .v26-danger-btn{display:inline-flex;align-items:center;gap:var(--m-gap-s);min-height:var(--m-tap);padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-weight:500}
  html body #view#view .head .tools .v26-danger-btn::before{content:"";flex:none;width:18px;height:18px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center/18px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center/18px no-repeat}
  html body #view#view:has(.deck17-shell) .head .who h1 .m-dh-name{display:block}
  html body #view#view:has(.deck17-shell) .head .who h1 .m-dh-line{display:block;margin-top:var(--m-gap-xs);font-size:var(--m-body)!important;font-weight:400;letter-spacing:0;color:var(--ink-2)}
  html body #view:has(.deck17-shell) .head>.sub{justify-self:start;padding:var(--m-gap-xs) var(--m-gap);border-radius:999px;background:color-mix(in srgb,var(--sig) 13%,var(--card));
    color:var(--sig);font-size:var(--m-cap)!important;font-weight:500}
}

/* Storey ladder on the Past transactions page (2 Nov 2026): the card holds the table, as the PSF comparison's card does. */
@media (max-width:767px),(pointer:coarse) and (max-height:500px){
  html body #view .m-card-ladder{padding:0}
  html body #view .m-card-ladder>.mkt-ladder{margin:0;border:0;border-radius:0;background:none;box-shadow:none;padding:var(--m-pad)}
  html body #view#view .m-card-ladder .mkt-spread-head h3{font-size:var(--m-h4)!important;font-weight:650;color:var(--ink)}
  html body #view#view .m-card-ladder .mkt-spread-head small{font-size:var(--m-cap)!important}
  html body #view .mkt-ladder-t th,html body #view .mkt-ladder-t td{font-size:var(--m-body)}
  html body #view .mkt-ladder-t thead th{font-size:var(--m-cap-s)}
  html body #view .mkt-ladder-unit{font-size:var(--m-cap-s)}
}