/* The street of lets (making-tax-digital-for-landlords). An architect's drawing of a street in a
   true 3D projection: hairline ink, flat tones, the reader's share of each house in solid ink (UK)
   or blue (abroad), the other owners' parts left as white paper behind dashed party lines. The kerb
   is a ruler and the bollard at the threshold is the page's one red. The controls are sentences, as
   a person would say them across a desk. Site tokens only (site.css :root). */

.ll-street { container: ll / inline-size; margin: 22px 0 8px; }
.ll-street ol, .ll-street ul { padding: 0; }
.ll-street li { margin: 0; }

/* ---------------------------------------------------------------- the sentence over the street */
.ll-say-top { margin: 0 0 4px; font-size: 16px; line-height: 2.3; color: var(--ink-2); }
.ll-say-top select, .ll-part select {
	-webkit-appearance: none; appearance: none; min-height: 44px; max-width: 100%; padding: 4px 24px 3px 2px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
	background-color: transparent; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: right 9px top 54%, right 4px top 54%; background-size: 5px 5px; background-repeat: no-repeat;
	font: 600 16px/1.2 var(--sans); color: var(--ink); cursor: pointer; text-overflow: ellipsis; field-sizing: content;
}
.ll-say-top select:hover, .ll-part select:hover { border-bottom-color: var(--link); }
.ll-say-top select[disabled] { color: var(--ink); opacity: 1; cursor: default; background-image: none; padding-right: 2px; border-bottom-color: var(--rule); }
.ll-tick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 6px; white-space: nowrap; cursor: pointer; }
.ll-tick input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }

/* ---------------------------------------------------------------- the drawing */
.ll-scene { margin: 0; }
.ll-stage { position: relative; padding: 78px 0 62px; }
.ll-box { position: relative; width: 100%; }
.ll-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.ll-svg path { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ll-svg .hx { vector-effect: none; stroke: var(--ink); stroke-width: 2.2; }
.ll-svg .hb { fill: var(--card); }
/* walls, shares, party lines */
.ll-svg .w { fill: var(--card); stroke: var(--ink); stroke-width: 1; }
.ll-svg .g { fill: var(--rule); stroke: var(--ink); stroke-width: 1; }
.ll-svg .s { fill: var(--ink); }
.ll-svg .h-ab .s { fill: var(--link); }
.ll-svg .s.st { fill: var(--slate-3); }
.ll-svg .s.sh { fill: url(#ll-hatch); }
.ll-svg .dv { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
/* windows: lit where the house is yours */
.ll-svg .wl { fill: var(--wash-2); }
.ll-svg .wn { fill: var(--wash); stroke: var(--ink-4); stroke-width: .75; }
.ll-svg .dr { fill: var(--rule); stroke: var(--ink); stroke-width: .9; }
.ll-svg .dr.ds { fill: var(--slate); stroke: var(--wash-2); }
.ll-svg .h-ab .dr.ds { fill: var(--slate); }
.ll-svg .sht { fill: var(--slate-3); }
/* roofs, chimneys, parapets */
.ll-svg .r { fill: var(--slate-3); stroke: var(--ink); stroke-width: 1; }
.ll-svg .rc { stroke: var(--slate-2); stroke-width: 1; }
.ll-svg .ch { fill: var(--rule); stroke: var(--ink); stroke-width: .9; }
.ll-svg .chs { fill: var(--mute); stroke: var(--ink); stroke-width: .9; }
.ll-svg .cht { fill: var(--ink-3); stroke: var(--ink); stroke-width: .9; }
.ll-svg .pot { fill: var(--ink-3); stroke: var(--ink); stroke-width: .7; }
.ll-svg .rt { fill: var(--rule-2); stroke: var(--ink); stroke-width: 1; }
.ll-svg .rti { fill: var(--wash-2); stroke: var(--ink-4); stroke-width: .7; }
.ll-svg .pp { fill: var(--rule); stroke: var(--ink); stroke-width: 1; }
/* a shop of your own */
.ll-svg .sw { fill: var(--wash); stroke: var(--ink); stroke-width: .9; }
.ll-svg .aw1 { fill: var(--card); stroke: var(--ink); stroke-width: .6; }
.ll-svg .aw2 { fill: var(--ink); stroke: var(--ink); stroke-width: .6; }
/* a house that does not count: drawn in outline only */
.ll-svg .ll-h.gh path, .ll-svg .cg { fill: var(--card); stroke: var(--ink-4); stroke-dasharray: 4 3; }
.ll-svg .ll-h.gh .g, .ll-svg .ll-h.gh .r { fill: var(--wash-2); }
.ll-svg .ll-h.gh .wn, .ll-svg .ll-h.gh .wl, .ll-svg .ll-h.gh .dr, .ll-svg .ll-h.gh .sht { fill: none; stroke: var(--mute); }
.ll-svg .ll-h.gh .rc, .ll-svg .ll-h.gh .dv { stroke: var(--mute); }
.ll-svg .gh { fill: none; stroke: var(--mute-line); stroke-width: 1; stroke-dasharray: 4 3; }
/* the ground */
.ll-svg .wt { fill: var(--link); fill-opacity: .13; }
.ll-svg .qy { fill: var(--rule); stroke: var(--ink-4); stroke-width: .8; }
.ll-svg .rp { stroke: var(--link); stroke-opacity: .4; stroke-width: 1; }
.ll-svg .pv { fill: var(--wash-2); stroke: var(--rule); stroke-width: 1; }
.ll-svg .fj { stroke: var(--rule); stroke-width: .8; }
.ll-svg .vp { fill: none; stroke: var(--mute-line); stroke-width: 1; stroke-dasharray: 3 3; }
.ll-svg .vpx { stroke: var(--mute-line); stroke-width: 1.2; }
.ll-svg .post { fill: var(--ink-3); }
.ll-svg .bd { fill: var(--card); stroke: var(--ink); stroke-width: .9; }
.ll-svg .bdb { fill: var(--ink); }
/* the kerb, its paint, and the bollard */
.ll-svg .kt { fill: var(--rule-2); stroke: var(--ink-4); stroke-width: .8; }
.ll-svg .kf { fill: var(--rule); stroke: var(--ink-4); stroke-width: .8; }
.ll-svg .tk { stroke: var(--ink-4); stroke-width: 1; }
.ll-svg .pk { stroke: var(--card); stroke-width: .8; }
.ll-svg .pk-uk { fill: var(--ink); }
.ll-svg .pk-abroad { fill: var(--link); }
.ll-svg .pk-trade { fill: var(--slate-3); }
.ll-svg .brk { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.ll-svg .alt { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 2; }
.ll-svg .bo { fill: var(--red); stroke: var(--red-deep); stroke-width: .8; }
.ll-svg .bo2 { fill: var(--red-deep); stroke: var(--red-deep); stroke-width: .8; }
.ll-svg .bo3 { fill: var(--red-deep); }
.ll-svg .bob { fill: var(--card); }
.ll-live .ll-svg .ll-h { cursor: pointer; }
.ll-live .ll-svg .ll-h:hover .w, .ll-svg .ll-h.on .w { stroke-width: 2.2; }

/* the words laid over the drawing: they keep their size whatever the drawing's scale */
.ll-labels { position: absolute; inset: 0; pointer-events: none; }
.ll-labels > span { position: absolute; white-space: nowrap; transform: translate(-50%, 0); }
.ll-tag {
	transform: translate(-50%, -100%) !important; min-width: 22px; height: 22px; padding: 0 5px; margin-top: -8px; border: 1.5px solid var(--ink); border-radius: 2px;
	background: var(--card); color: var(--ink); font: 700 14px/19px var(--cond); text-align: center; font-variant-numeric: tabular-nums;
}
.ll-tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px; background: var(--ink); }
.ll-tag.up { margin-top: -30px; }
.ll-tag.up::after { height: 30px; }
@container ll (min-width: 860px) { .ll-tag.up { margin-top: -8px; } .ll-tag.up::after { height: 8px; } }
.ll-live .ll-tag { pointer-events: auto; cursor: pointer; }
.ll-tag.on { background: var(--ink); color: var(--paper); }
.ll-bol, .ll-tot { margin-top: 10px; font: 12px/1.35 var(--mono); text-align: center; }
.ll-bol { color: var(--red); }
.ll-bol b, .ll-tot b { display: block; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.ll-tot { color: var(--ink-3); }
.ll-tot b { color: var(--ink); }
.ll-bol.to-l, .ll-tot.to-l { transform: translate(calc(-100% - 7px), 0) !important; text-align: right; }
.ll-bol.to-r, .ll-tot.to-r { transform: translate(7px, 0) !important; text-align: left; }
.ll-tot.to-r::before, .ll-bol.to-r::before { left: -7px; top: -10px; height: 20px; }
.ll-tot.to-l::before, .ll-bol.to-l::before { left: auto; right: -7px; top: -10px; height: 20px; }
.ll-bol::before { content: ""; position: absolute; left: 50%; top: -10px; height: 8px; width: 1px; background: var(--red); }
.ll-tot::before { content: ""; position: absolute; left: 50%; top: -10px; height: 8px; width: 1px; background: var(--ink); }
.ll-blk { transform: translate(-50%, -100%) !important; padding-bottom: 5px; font: 12px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.ll-blk.k-abroad { color: var(--link); }
.ll-gl { transform: translate(-50%, -50%) !important; font: 12px/1.3 var(--mono); color: var(--ink-3); text-align: center; }
.ll-gl small { display: block; font-size: 12px; color: var(--ink-4); }
.ll-legend { display: none; margin: -40px 0 0; font: 12.5px/1.4 var(--mono); color: var(--ink-3); flex-wrap: wrap; gap: 4px 14px; }
.ll-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ll-legend i { width: 16px; height: 6px; display: inline-block; transform: skewX(-24deg); }
.lg-out i { border: 1px dashed var(--mute-line); }
.lg-uk i { background: var(--ink); } .lg-abroad i { background: var(--link); } .lg-trade i { background: var(--slate-3); } .lg-red i { background: var(--red); width: 6px; height: 12px; transform: none; }

/* ---------------------------------------------------------------- building on the street */
.ll-build { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin: 0 0 18px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ll-build-k { flex-basis: 100%; font: 12px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ll-add { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px 8px 11px; border: 1px solid var(--ink); border-radius: 0; background: var(--card); color: var(--ink); font: 600 15px/1.2 var(--sans); cursor: pointer; transition: background 160ms var(--ease); }
.ll-add:hover { background: var(--wash-2); }
.ll-add[disabled] { opacity: .45; cursor: default; }
.ll-add i { width: 15px; height: 16px; flex: none; background: var(--ink); clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); }
.a-abroad i { background: var(--link); clip-path: polygon(0 14%, 100% 14%, 100% 100%, 0 100%); }
.a-trade i { background: repeating-linear-gradient(90deg, var(--slate-3) 0 3px, var(--card) 3px 5px); clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px var(--slate-3); }
.ll-clear { margin-left: auto; min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--link); font: 15px var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ll-full { flex-basis: 100%; margin: 2px 0 0; font-size: 15px; color: var(--ink-3); }

/* ---------------------------------------------------------------- the register and the reckoning */
.ll-desk { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.ll-reg-k, .ll-sum-k { margin: 0 0 6px; font: 12px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ll-register { list-style: none; margin: 0; border-top: 2px solid var(--ink); }
.ll-row { border-bottom: 1px solid var(--rule); transition: background 200ms var(--ease); }
.ll-row.open { background: var(--wash-2); }
.ll-rh { display: grid; grid-template-columns: 28px 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 58px; padding: 9px 4px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; }
button.ll-rh { grid-template-columns: 28px 24px minmax(0, 1fr) auto 12px; cursor: pointer; }
button.ll-rh:hover .ll-what b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ll-no { display: grid; place-items: center; width: 26px; height: 22px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--card); font: 700 14px/1 var(--cond); font-variant-numeric: tabular-nums; }
.ll-no-x { border-style: dashed; border-color: var(--mute-line); background: none; }
.ll-mini { width: 24px; height: 26px; display: block; }
.ll-mini .w { fill: var(--card); stroke: var(--ink); stroke-width: 1; }
.ll-mini .s { fill: var(--ink); } .m-abroad .s { fill: var(--link); } .ll-mini .s.st { fill: var(--slate-3); } .ll-mini .s.sh { fill: url(#ll-hatch); }
.ll-mini .r { fill: var(--slate-3); stroke: var(--ink); stroke-width: 1; } .ll-mini .pp { fill: var(--rule); stroke: var(--ink); stroke-width: 1; }
.ll-mini .dv { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 2; } .ll-mini .sw { fill: var(--wash); } .ll-mini .aw2 { fill: var(--ink); }
.ll-mini.gh * { fill: var(--paper) !important; stroke: var(--mute-line) !important; stroke-dasharray: 2 2; }
.ll-what { min-width: 0; }
.ll-what b { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.ll-what small { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.ll-amt { font-weight: 600; font-size: 15px; text-align: right; white-space: nowrap; }
.ll-chev { width: 9px; height: 9px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform 220ms var(--ease); }
[aria-expanded="true"] > .ll-chev { transform: rotate(-135deg) translateY(-2px); }
.ll-part { padding: 2px 10px 14px 42px; font-size: 16px; line-height: 2.15; color: var(--ink-2); }
.ll-part p { margin: 0 0 4px; }
.ll-part input:not([type]), .ll-part input[inputmode], .ll-part .ll-name {
	min-height: 44px; padding: 3px 4px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: var(--card); color: var(--ink); font: 600 16px/1.2 var(--mono); font-variant-numeric: tabular-nums;
}
.ll-money { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-weight: 600; color: var(--ink); }
.ll-money input { width: 8.5em; text-align: right; }
.ll-pct input { width: 4.5em; text-align: right; }
.ll-part .ll-name { width: 13em; max-width: 100%; font-family: var(--sans); font-weight: 400; }
.ll-part input[aria-invalid="true"] { border-bottom-color: var(--red); }
.ll-part .ll-tick { margin-left: 0; white-space: normal; }
.ll-hint { font-size: 15px; color: var(--ink-3); }
.ll-err { color: var(--red); font-size: 15px; line-height: 1.4; }
.ll-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px !important; }
.ll-btn { min-height: 44px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper); font: 600 15px/1.2 var(--sans); cursor: pointer; }
.ll-btn-x { background: var(--card); color: var(--ink); }
.ll-btn-x:hover { border-color: var(--red); color: var(--red-deep); }

.ll-sum { border-top: 2px solid var(--ink); padding-top: 12px; }
.ll-sum-total { margin: 0 0 2px; font: 700 52px/1 var(--cond); letter-spacing: -.01em; font-family: var(--cond); font-variant-numeric: tabular-nums lining-nums; }
.ll-sum-sc { margin: 0 0 8px; font-size: 15px; color: var(--ink-3); }
.ll-biz { list-style: none; margin: 12px 0 14px; }
.ll-biz li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--rule-2); }
.ll-biz li > i { width: 16px; height: 6px; transform: skewX(-24deg) translateY(-2px); background: var(--ink); }
.ll-biz .b-abroad > i { background: var(--link); } .ll-biz .b-trade > i { background: var(--slate-3); } .ll-biz .out > i { background: none; border: 1px dashed var(--mute-line); }
.ll-biz span b { display: block; font-weight: 600; font-size: 15.5px; }
.ll-biz span small { display: block; font-size: 13.5px; color: var(--ink-3); }
.ll-biz li > b { font-weight: 600; font-size: 15px; white-space: nowrap; }
.ll-biz .out li > b, .ll-biz .out > b { color: var(--ink-3); font-weight: 400; }
.ll-v { margin: 16px 0 6px; font: 700 26px/1.12 var(--cond); }
.ll-v-k { display: block; margin: 0 0 4px; font: 400 12px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--red); }
.ll-v .red { color: var(--red); white-space: nowrap; }
.ll-v-t, .ll-then { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.ll-notes { margin: 12px 0 0; padding-left: 16px !important; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.ll-est { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); font-style: italic; }
.ll-notes li { margin: 0 0 6px; }
.ll-sum-err { font-size: 16px; color: var(--ink-2); }
.ll-noscript { font-size: 15px; color: var(--ink-3); }

/* ---------------------------------------------------------------- the sections open beneath the street, each through a fanlight */
.entry-body:has(.ll-street) > h2::before {
	content: ""; display: block; width: 46px; height: 23px; margin: 0 0 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%23172033' stroke-width='1.4'%3E%3Cpath d='M2 19.3a18 18 0 0 1 36 0z' fill='%23fff'/%3E%3Cpath d='M20 19V4M20 19 7.3 6.3M20 19 32.7 6.3M20 19 3.5 12.3M20 19 36.5 12.3'/%3E%3Cpath d='M12 19.3a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E") left bottom / contain no-repeat;
	border-bottom: 1.5px solid var(--ink);
}

/* ---------------------------------------------------------------- narrow streets */
@container ll (max-width: 859px) {
	.ll-blk, .ll-gl, .ll-svg .brk { display: none; }
	.ll-legend { display: flex; margin: 0 0 16px; }
	.ll-stage { padding: 40px 0 50px; }
}
@container ll (max-width: 640px) {
	.ll-desk { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.ll-tag { min-width: 19px; height: 19px; font-size: 12.5px; line-height: 16px; padding: 0 3px; }
	.ll-tag.up { margin-top: -26px; }
	.ll-tag.up::after { height: 26px; }
	.ll-sum-total { font-size: 46px; }
	.ll-part { padding-left: 10px; }
}
@container ll (max-width: 380px) {
	.ll-bol b, .ll-tot b { font-size: 13px; }
	.ll-rh, button.ll-rh { grid-template-columns: 26px 22px minmax(0, 1fr) auto; gap: 8px; }
	button.ll-rh .ll-chev { display: none; }
}
.ll-nw { white-space: nowrap; }

/* ---------------------------------------------------------------- every example as a card: its street in miniature, its lets, its total */
.ll-facts { margin: 26px 0 8px; }
.ll-facts-k { margin: 0 0 10px; font: 12px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ll-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin: 0 0 12px; padding: 0 !important; }
.ll-card { margin: 0 !important; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-top: 0; }
.lc-head { position: relative; padding: 0 16px 10px; border-top: 2px solid var(--ink); }
.lc-row { display: flex; gap: 2px; margin: -1px 0 8px; padding: 10px 0 0; border-bottom: 3px solid var(--rule-2); width: max-content; }
.lc-row .ll-mini { width: 22px; height: 24px; }
.lc-who { margin: 0; font: 700 21px/1.1 var(--cond); }
.lc-ty { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ll-facts .lc-lets { list-style: none; margin: 0; padding: 4px 16px 8px !important; }
.lc-lets li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; line-height: 1.4; }
.lc-lets b { flex: none; font-weight: 600; font-size: 15px; }
.lc-lets .out { color: var(--ink-3); }
.lc-lets .out b { font-weight: 400; }
.lc-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 0; padding: 10px 16px 6px; }
.lc-total span, .lc-biz span { font: 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.lc-total b { font: 700 26px/1 var(--cond); font-variant-numeric: tabular-nums lining-nums; }
.lc-total small { flex-basis: 100%; font-size: 15px; line-height: 1.4; color: var(--ink-3); }
.lc-biz { margin: 0; padding: 0 16px 10px; font-size: 15px; line-height: 1.45; }
.lc-v { margin: auto 0 0; padding: 10px 16px 12px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.45; color: var(--ink); }
.lc-v .red { color: var(--red); white-space: nowrap; }
/* motion that shows the rule: a house rises from the pavement, a share is painted across its front from the left, the rent runs along the kerb */
@keyframes ll-rise { from { transform: scaleY(.02); } }
@keyframes ll-split { from { transform: scaleX(var(--s0, 0)); } }
@keyframes ll-late { from { opacity: 0; } }
.ll-svg .rise { transform-box: fill-box; transform-origin: 50% 100%; animation: ll-rise 560ms var(--ease) both; }
.ll-svg .split { transform-box: fill-box; transform-origin: 0 50%; animation: ll-split 640ms var(--ease) both; }
.ll-svg .late { animation: ll-late 420ms var(--ease) both; }