/* making-tax-digital-deadlines: what goes into a quarterly update, as a tree. One update at the root
   (a ruled stamp, with the four rules that apply to every update beside it), one branch per kind of
   business, then HMRC's own categories as the lines of a form: name, dotted leader, a total to fill.
   The branches open and close without any script (details and summary). */

.dl-tree { margin: 30px 0 26px; padding: 26px 26px 18px; background: var(--card); border: 1px solid var(--rule); }
.tree-root { position: relative; display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 14px 30px; align-items: start; }
.tr-stamp { margin: 0; padding: 16px 12px 14px; border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--ink); font-family: var(--cond); font-weight: 700; font-size: 21px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; text-align: center; color: var(--ink); background: var(--card); }
/* the trunk runs from behind the stamp down to the bar the two branches hang from */
.tree-root::before { content: ""; position: absolute; left: 30px; top: 30px; bottom: -22px; width: 2px; background: var(--ink); }
.tr-stamp { position: relative; z-index: 1; }
.entry-body .dl-tree ol, .entry-body .dl-tree ul { margin: 0; padding: 0; list-style: none; }
.entry-body .dl-tree li { margin: 0; }
.entry-body .dl-tree .tr-rules { counter-reset: rule; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.tr-rules li { counter-increment: rule; position: relative; margin: 0; padding-left: 30px; }
.tr-rules li::before { content: counter(rule); position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border: 1px solid var(--red); border-radius: 50%; font-family: var(--mono); font-weight: 600; font-size: 12px; line-height: 19px; text-align: center; color: var(--red); }
.tr-rules b { color: var(--ink); font-weight: 600; }

.entry-body .dl-tree .tree-biz { position: relative; margin: 22px 0 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; align-items: start; }
.tree-biz::before { content: ""; position: absolute; top: 0; left: 30px; width: calc(50% + 17px); height: 2px; background: var(--ink); }
.tb { position: relative; margin: 0; }
.tb::before { content: ""; position: absolute; left: 30px; top: -22px; width: 2px; height: 22px; background: var(--ink); }
.tb-tag { position: relative; display: inline-flex; flex-direction: column; margin: 0; padding: 7px 14px 8px; border: 1px solid var(--ink); border-top-width: 4px; background: var(--card); line-height: 1.2; }
.tb-tag b { font-family: var(--cond); font-size: 19px; letter-spacing: -.005em; }
.tb-tag span { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

.entry-body .dl-tree .twigs { padding-top: 4px; }
.entry-body .twigs > li { position: relative; padding: 7px 0 7px 52px; }
.twigs > li::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.twigs > li:last-child::before { bottom: auto; height: 22px; }
.twigs > li::after { content: ""; position: absolute; left: 30px; top: 21px; width: 16px; height: 2px; background: var(--ink); }
.tw-name { font-weight: 600; font-size: 16px; }
.tw.dates .tw-name { font-weight: 400; color: var(--ink-2); }
.tw summary { display: flex; align-items: center; gap: 10px; min-height: 30px; cursor: pointer; list-style: none; }
.tw summary::-webkit-details-marker { display: none; }
.tw summary::after { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; border: 1px solid var(--ink-3); font-family: var(--mono); font-weight: 600; font-size: 14px; line-height: 1; color: var(--ink-2); transition: background 160ms var(--ease), color 160ms var(--ease); }
.tw details[open] > summary::after { content: "−"; }
.tw summary:hover::after { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tw summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.tw-n { font-size: 12px; font-weight: 600; color: var(--red); border: 1px solid var(--red); padding: 1px 6px 0; line-height: 1.3; }

.entry-body .dl-tree .leaves { margin: 4px 0 6px; }
.entry-body .leaf { position: relative; display: flex; align-items: baseline; gap: 6px; padding: 5px 0 5px 24px; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.leaf::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--mute-line); }
.leaf:last-child::before { bottom: auto; height: 15px; }
.leaf::after { content: ""; position: absolute; left: 6px; top: 15px; width: 12px; height: 1px; background: var(--mute-line); }
.leaf .nm { flex: 0 1 auto; min-width: 0; }
.leaf .dots { flex: 1 1 20px; min-width: 14px; height: 1px; border-bottom: 2px dotted var(--mute); transform: translateY(-4px); }
.leaf .amt { flex: none; width: 58px; padding: 0 0 1px 3px; border-bottom: 1px solid var(--ink-3); font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.tree-note { margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-3); }
.dl-tree .src { margin-top: 6px; }

@media (max-width: 900px) {
	.entry-body .dl-tree .tr-rules { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
	.dl-tree { padding: 18px 14px 14px; }
	.tree-root { grid-template-columns: minmax(0, 1fr); }
	.tree-root::before { display: none; }
	.tr-stamp { font-size: 19px; padding: 12px 10px; }
	.entry-body .dl-tree .tree-biz { grid-template-columns: minmax(0, 1fr); padding-top: 0; gap: 22px 0; }
	.tree-biz::before, .tb::before { display: none; }
	.entry-body .twigs > li { padding-left: 46px; }
	.twigs > li::before, .twigs > li::after { left: 24px; }
	.entry-body .leaf { font-size: 15px; }
	.leaf .amt { width: 44px; }
	.tw summary { min-height: 44px; }
	.tree-note { font-size: 15px; }
}