/* The landlord's keyring (making-tax-digital-for-landlords): keys on a split ring as a mind map,
   each key's rules strung beside it. White keys with ink edges, the update keys capped in the colour
   of the business they open on the street above. Site tokens only (site.css :root). */

.ll-keys { margin: 24px 0 8px; }
.ll-keys ol, .ll-keys ul { padding: 0; margin: 0; }
.kr-grid { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 30px; align-items: start; }
.kr-stage { position: relative; position: sticky; top: 24px; }
.kr-box { position: relative; aspect-ratio: 360 / 280; margin-bottom: 30px; }
.kr-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.kr-svg path, .kr-svg circle, .kr-svg rect { stroke-linejoin: round; stroke-linecap: round; }
.kr-ring { fill: none; stroke: var(--ink-3); stroke-width: 4.5; }
.kr-gap { fill: none; stroke: var(--paper); stroke-width: 1.6; }
.kb { fill: var(--card); stroke: var(--ink); stroke-width: 1.3; }
.kh { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.kl { fill: none; stroke: var(--ink-4); stroke-width: .9; }
.kc { fill: var(--wash); stroke: var(--ink); stroke-width: 1; }
.kb.kc-uk { fill: var(--ink); } .kb.kc-abroad { fill: var(--link); stroke: var(--link); } .kb.kc-trade { fill: var(--slate-3); }
.kr2 { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.kt { fill: var(--wash-2); stroke: var(--ink); stroke-width: 1; }
.kr-key { cursor: default; }
.kr-live .kr-key { cursor: pointer; }
.kr-key.on .kb { stroke-width: 2.6; }
.kr-key.on .kb:not([class*="kc-"]) { fill: var(--wash-2); }
.kr-sw { transform-origin: 0 0; }

.kr-labels { position: absolute; inset: 0; pointer-events: none; }
.kr-lab {
	position: absolute; pointer-events: auto; transform: translate(-50%, 0); min-height: 44px; min-width: 44px; padding: 3px 4px; border: 0; border-radius: 0; background: none; color: var(--ink);
	font: 700 15px/1.1 var(--cond); text-align: center; white-space: nowrap; cursor: pointer;
}
.kr-lab[disabled] { cursor: default; color: var(--ink); }
.kr-lab small { display: block; font: 400 12px/1.25 var(--mono); color: var(--ink-3); }
.kr-lab b { font-weight: 700; }
.kr-lab:hover b, .kr-lab.on b { box-shadow: inset 0 -2px var(--ink); }

.kr-note { margin: 0 0 10px; font: 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.kr-leaves { list-style: none; border-top: 2px solid var(--ink); }
.kr-item { padding: 11px 8px 12px; border-bottom: 1px solid var(--rule); transition: background 200ms var(--ease), box-shadow 200ms var(--ease); }
.kr-item.on { background: var(--wash-2); box-shadow: inset 3px 0 var(--ink); }
.kr-name { display: flex; align-items: baseline; gap: 9px; margin: 0 0 5px; font: 700 19px/1.15 var(--cond); }
.kr-n { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.3px solid var(--ink); border-radius: 50%; font: 600 12px/1 var(--mono); transform: translateY(-2px); }
.kr-item ul { list-style: none; margin: 0 0 0 10px; padding: 0 0 0 20px; border-left: 1px solid var(--ink-4); }
.kr-item li { position: relative; margin: 0 0 4px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.kr-item li::before { content: ""; position: absolute; left: -20px; top: .78em; width: 13px; border-top: 1px solid var(--ink-4); }
.kr-item li::after { content: ""; position: absolute; left: -8px; top: calc(.78em - 2.5px); width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--ink-4); background: var(--paper); }

/* the keys arrive on the ring and swing until they settle; held up, a key swings once */
@keyframes kr-drop {
	0% { transform: translateY(-40px) rotate(-26deg); opacity: 0; }
	28% { transform: translateY(0) rotate(-26deg); opacity: 1; }
	48% { transform: rotate(15deg); }
	66% { transform: rotate(-8deg); }
	82% { transform: rotate(3.5deg); }
	100% { transform: none; }
}
@keyframes kr-swing {
	0% { transform: none; }
	22% { transform: rotate(-13deg); }
	46% { transform: rotate(8deg); }
	66% { transform: rotate(-4deg); }
	84% { transform: rotate(1.5deg); }
	100% { transform: none; }
}
/* the drop rides the scroll where the browser can tie an animation to it; elsewhere the keys simply hang */
@supports (animation-timeline: view()) {
	.kr-sw { animation: kr-drop linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
}
.kr-key.swing .kr-sw { animation: kr-swing 950ms ease-out both; }

@media (max-width: 860px) {
	.kr-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.kr-stage { position: relative; top: auto; max-width: 440px; margin: 0 auto; width: 100%; }
}
@media (max-width: 480px) {
	.kr-lab { font-size: 14px; }
	.kr-lab small { font-size: 12px; }
}