/* making-tax-digital-exemptions: the page as one tall case file. The text is a sheet in a folder;
   each exemption is a divider whose tab sticks out of the folder's right edge and slides down with
   you while you read it, at its own height, as real dividers stand at different heights. On a phone
   the tabs stand up from the top of each divider instead. Also here: the page's own table form, the
   end-dates chart and the family tree, which are drawn by the build and need no script. */

.ex-file {
	--pad: 56px; --back: 12px; --tab: 36px;
	position: relative; isolation: isolate;
	margin: 64px calc(var(--back) + var(--tab) + 2px) 30px var(--back);
	padding: 46px var(--pad) 44px;
}
/* the folder's back cover, and the sheet on it (with two more sheets peeking out under it);
   both sit behind the text in the file's own stacking order */
.ex-file::before { content: ""; position: absolute; z-index: -2; inset: calc(-1 * var(--back)) calc(-1 * var(--back)) -18px; background: var(--wash); border: 1px solid var(--rule); border-radius: 2px; }
.ex-file::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--card); border: 1px solid var(--rule); box-shadow: 3px 3px 0 -1px var(--card), 3px 3px 0 0 var(--rule), 6px 6px 0 -1px var(--card), 6px 6px 0 0 var(--rule-2); }
/* the folder's own tab, on top at the left, with the file's name */
.ex-file-tab { position: absolute; left: calc(-1 * var(--back) - 1px); top: calc(-1 * var(--back) - 40px); z-index: -2; display: flex; align-items: baseline; gap: 12px; margin: 0; height: 41px; padding: 10px 34px 0 18px; background: var(--wash); border: 1px solid var(--rule); border-bottom: 0; border-radius: 3px 10px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.ex-file-tab small { font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--ink-3); }

/* the sheet's prose keeps a reading width; drawings use the whole sheet */
.ex-file > p, .ex-file > ul, .ex-file > ol, .ex-file > h2, .ex-file > h3, .ex-file > .src, .ex-file > .src-all,
.ex-div > p, .ex-div > ul, .ex-div > h3, .ex-div > .src, .ex-div > .src-all { max-width: 40em; }
.ex-file > h2 { font-size: 32px; margin: 66px 0 12px; scroll-margin-top: 16px; }
.ex-file > h3 { font-size: 22px; margin: 34px 0 8px; }
.ex-file .ex-lede { font-size: 20px; color: var(--ink-2); }
.ex-file > .ex-file-tab + .ex-lede { margin-top: 0; }

/* ---------------------------------------------------------------- dividers */
.ex-div { position: relative; margin: 30px calc(-1 * var(--pad)) 0; padding: 24px var(--pad) 6px; border-top: 1px solid var(--rule); }
.ex-div > h3 { margin: 0 0 8px; font-size: 23px; }
.ex-file > .ex-div-h2 { margin-top: 66px; padding-top: 30px; }
.ex-div-h2 > h2 { max-width: 40em; margin: 0 0 12px; font-size: 32px; scroll-margin-top: 16px; }
.ex-file > h2 + .ex-div, .ex-file > p + .ex-div { margin-top: 26px; }
/* the tab's rail runs the divider's full height outside the folder edge; the tab sticks inside it */
.ex-tab { position: absolute; top: -1px; bottom: 0; right: calc(-1 * (var(--back) + var(--tab) + 1px)); width: var(--tab); margin: 0; pointer-events: none; }
.ex-tab > span {
	--o: 0px;
	position: sticky; top: calc(84px + var(--o)); display: block; margin-top: var(--o);
	writing-mode: vertical-rl; text-orientation: sideways; width: var(--tab); padding: 16px 0 18px; box-sizing: border-box;
	background: var(--card); border: 1px solid var(--ink-3); border-left: 0; border-radius: 0 8px 8px 0;
	font-family: var(--cond); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .01em; color: var(--ink); white-space: nowrap;
	box-shadow: 2px 1px 0 var(--rule-2);
}
.ex-tab b { margin-inline-end: 6px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
/* five heights, over and over, the way a set of dividers is cut */
.ex-div:nth-of-type(4n+2) .ex-tab > span { --o: 34px; }
.ex-div:nth-of-type(4n+3) .ex-tab > span { --o: 68px; }
.ex-div:nth-of-type(4n+4) .ex-tab > span { --o: 102px; }
/* kinds: automatic in ink; the one that ends with a red foot; apply in red; announced in dashes; not one at all on the folder colour */
.ex-temp .ex-tab > span { border-bottom: 4px solid var(--red); padding-bottom: 15px; }
.ex-apply .ex-tab > span { background: var(--red-wash); border-color: var(--red); color: var(--red-deep); }
.ex-apply .ex-tab b { color: var(--red); }
.ex-ann .ex-tab > span { background: var(--paper); border-style: dashed; color: var(--ink-3); box-shadow: none; }
.ex-none .ex-tab > span { background: var(--wash); color: var(--ink-3); }
.ex-div.ex-ann { border-top-style: dashed; }

/* ---------------------------------------------------------------- the page's tables: an index card */
.entry-body .ex-file figure.facts { margin: 20px 0 26px; }
.ex-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.ex-table caption { text-align: left; caption-side: top; padding: 0 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.ex-table thead th { text-align: left; vertical-align: bottom; padding: 0 14px 7px 0; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); border-bottom: 3px double var(--ink-3); }
.ex-table td { padding: 11px 14px 11px 0; vertical-align: top; border-bottom: 1px dotted var(--mute); }
.ex-table td.fig { font-weight: 600; white-space: nowrap; }
.ex-table ul { margin: 0; padding: 0; list-style: none; }
.ex-table li { margin: 0 0 6px; }
.ex-when { max-width: 30em; }

/* worked examples drop themselves through the sieve */
.ex-load { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; margin: 2px 0 8px; padding: 9px 18px 9px 14px; background: var(--wash-2); border: 1px solid var(--ink-3); border-radius: 0 0 8px 8px; border-top: 3px solid var(--ink); font: 600 15px/1.2 var(--sans); color: var(--ink); cursor: pointer; transition: background 200ms var(--ease), transform 200ms var(--ease); }
.ex-load[hidden] { display: none; }
.ex-load:hover { background: var(--card); }
.ex-load:active { transform: translateY(2px); }
/* three screens, drawn small */
.ex-load-tab { width: 20px; height: 16px; background: linear-gradient(var(--ink), var(--ink)) 0 2px / 14px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 3px 7px / 14px 2px no-repeat, linear-gradient(var(--red), var(--red)) 6px 12px / 14px 2px no-repeat; }

/* ---------------------------------------------------------------- end dates: a bar per exemption across the tax years */
.ex-ends { margin: 26px 0 28px; }
.exe { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.exe caption { text-align: left; caption-side: top; padding: 0 0 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.exe th, .exe td { padding: 0; }
.exe-axis th { position: sticky; top: 0; z-index: 1; background: var(--card); padding: 6px 0 7px 8px; text-align: left; font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--ink); }
.exe-axis th:first-child { width: 38%; padding-left: 0; font-weight: 400; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.exe-axis th:last-child { width: 11%; font-weight: 400; color: var(--ink-3); }
.exe-gh th { padding: 24px 0 6px; text-align: left; font-family: var(--cond); font-weight: 700; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--rule); }
.exe-gh th span { display: block; margin-top: 3px; font-family: var(--sans); font-weight: 400; font-size: 15px; color: var(--ink-3); }
.exe tbody tr:not(.exe-gh) th { padding: 9px 12px 9px 0; text-align: left; font-weight: 400; vertical-align: middle; border-bottom: 1px dotted var(--rule); }
.exe-n { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.exe-d { display: block; margin-top: 2px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.exe-annt { display: block; margin-top: 3px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.exe-c { position: relative; height: 46px; border-left: 1px solid var(--rule-2); border-bottom: 1px dotted var(--rule); }
.exe-bar { position: absolute; left: 0; right: 0; top: 50%; height: 10px; margin-top: -5px; transform-origin: 0 50%; }
.exe-on .exe-bar { background: var(--ink); }
.exe-apply .exe-bar { border: 1.5px solid var(--ink); background: var(--card); }
.exe-role .exe-bar { height: 3px; margin-top: -1.5px; background: var(--ink); }
.exe-nino .exe-bar { background: repeating-linear-gradient(90deg, var(--ink) 0 9px, transparent 9px 13px); }
.exe-ann .exe-bar { height: 0; margin-top: -1px; border-top: 2px dashed var(--ink-3); background: none; }
/* where it ends: the bar stops short, and a red stop marks the last day of the tax year */
.exe-end .exe-bar { right: 6px; }
.exe-end::after { content: ""; position: absolute; right: 2px; top: 50%; width: 3px; height: 24px; margin-top: -12px; background: var(--red); }
.exe-end.exe-ann::after { display: none; }
/* where it runs on: an arrow out of the chart */
.exe-run .exe-bar { right: 12px; }
.exe-run .exe-bar::after { content: ""; position: absolute; right: -9px; top: 50%; width: 9px; height: 9px; margin-top: -5.5px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.exe-ann.exe-run .exe-bar::after { border-color: var(--ink-3); margin-top: -6.5px; }
.exe-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); }
.exe-key li { display: inline-flex; align-items: center; gap: 8px; }
.exe-key i { display: inline-block; width: 26px; height: 10px; }
.exe-key .k-on { background: var(--ink); }
.exe-key .k-apply { border: 1.5px solid var(--ink); }
.exe-key .k-ann { height: 0; border-top: 2px dashed var(--ink-3); }
.exe-key .k-end { width: 3px; height: 18px; background: var(--red); }
.exe-key .k-run { width: 9px; height: 9px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); margin: 0 4px; }
/* the bars ink in from the left, year by year, when the chart comes into view */
.ex-armed .exe-bar { transition: transform 800ms var(--ease); }
.ex-armed:not(.seen) .exe-bar { transform: scaleX(0); }
.exe tr > :nth-child(3) .exe-bar { transition-delay: 140ms; }
.exe tr > :nth-child(4) .exe-bar { transition-delay: 280ms; }
.exe tr > :nth-child(5) .exe-bar { transition-delay: 420ms; }

/* ---------------------------------------------------------------- the family tree */
.ex-tree { margin: 26px 0 30px; container-type: inline-size; }
.ex-tree figcaption { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.ext-svg { display: none; width: 100%; height: auto; overflow: visible; }
.tg-line { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.tg-dot { fill: var(--card); stroke: var(--ink); stroke-width: 1.2; }
.tg-dot.tg-apply { stroke: var(--red); }
.tg-dot.tg-ann { stroke: var(--ink-3); stroke-dasharray: 2 1.6; }
.tg-dot.tg-agreed { fill: var(--ink); }
.tg-gen { font-family: var(--mono); font-size: 12px; fill: var(--ink-4); letter-spacing: .06em; }
.tg-root { font-family: var(--cond); font-weight: 700; font-size: 25px; fill: var(--ink); }
.tg-rsub { font-family: var(--sans); font-size: 15px; fill: var(--ink-3); }
.tg-head { font-family: var(--cond); font-weight: 700; font-size: 19px; fill: var(--ink); }
.tg-h-apply { fill: var(--red-deep); }
.tg-h-ann { fill: var(--ink-3); }
.tg-hsub { font-family: var(--sans); font-size: 13px; fill: var(--ink-3); }
.tg-name { font-family: var(--cond); font-weight: 700; font-size: 16px; fill: var(--ink); }
.tg-date { font-family: var(--sans); font-size: 13px; fill: var(--ink-3); }
.tg-ann { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 6 4; }
.tg-agree { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-dasharray: .5 4; stroke-linecap: round; }
.ext-key { display: none; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); }
.ext-key li { display: inline-flex; align-items: center; gap: 8px; }
.ext-key i { display: inline-block; width: 30px; height: 0; border-top: 1px solid var(--ink-3); }
.ext-key .k-ann { border-top: 1.5px dashed var(--ink-3); }
.ext-key .k-agree { border-top: 2px dotted var(--red); }
/* the register: the same family as a numbered list, the form a family history prints it in */
.entry-body .ex-tree .ext-reg, .entry-body .ex-tree .ext-reg ol { margin: 0; padding: 0; list-style: none; }
.ext-reg > li { padding: 14px 0 12px; border-top: 1px solid var(--rule); }
.ext-reg > li:first-child { border-top: 1px solid var(--ink); }
.ext-reg > li > b { font-family: var(--cond); font-size: 21px; }
.ext-reg > li > .ext-num { display: inline-block; min-width: 34px; font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--ink-3); }
.ext-sub { font-size: 15px; color: var(--ink-3); }
.entry-body .ext-reg ol { margin-top: 8px; }
.entry-body .ext-reg ol li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; margin: 0; padding: 6px 0; font-size: 16px; line-height: 1.4; }
.ext-reg ol .ext-num { grid-row: span 3; padding-top: 2px; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.ext-name { font-weight: 600; }
.ext-d { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.ext-x { font-size: 15px; color: var(--ink-2); }
.ext-x::before { content: "↳ "; color: var(--ink-4); }
.ext-ann .ext-name { font-weight: 400; color: var(--ink-2); }
.ext-apply > b { color: var(--red-deep); }
@container (min-width: 740px) {
	.ext-svg, .ext-key { display: flex; }
	.ext-svg { display: block; }
	.ext-reg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* the tree draws itself: lines first, from the root down, then the names */
.ex-armed .tg-line[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms var(--ease); }
.ex-armed:not(.seen) .tg-line[pathLength] { stroke-dashoffset: 1; }
.ex-armed .tg-kid, .ex-armed .tg-ann, .ex-armed .tg-agree { transition: opacity 700ms var(--ease) 700ms; }
.ex-armed:not(.seen) .tg-kid, .ex-armed:not(.seen) .tg-ann, .ex-armed:not(.seen) .tg-agree { opacity: 0; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1099px) {
	.ex-file { --pad: 40px; }
}
@media (max-width: 700px) {
	/* the sheet runs to the edges of the phone; the folder shows at its top and its tabs stand up */
	.ex-file { --pad: 16px; margin: 58px -16px 20px; padding: 26px var(--pad) 30px; }
	.ex-file::before { inset: -9px 0 auto; height: 10px; border-left: 0; border-right: 0; border-radius: 0; }
	.ex-file::after { border-left: 0; border-right: 0; box-shadow: 0 3px 0 -1px var(--card), 0 3px 0 0 var(--rule); }
	.ex-file-tab { left: 16px; top: -50px; height: 42px; padding: 10px 26px 0 14px; }
	.ex-file-tab small { display: none; }
	.ex-file > h2 { font-size: 26px; margin-top: 52px; }
	.ex-file .ex-lede { font-size: 18px; }
	.ex-div { margin-top: 54px; padding-top: 18px; }
	.ex-file > h2 + .ex-div, .ex-file > p + .ex-div { margin-top: 50px; }
	.ex-div > h3 { font-size: 21px; }
	.ex-file > .ex-div-h2 { margin-top: 64px; padding-top: 22px; }
	.ex-div-h2 > h2 { font-size: 26px; }
	.ex-tab { top: 0; bottom: auto; right: var(--pad); width: auto; }
	.ex-tab > span { position: absolute; right: 0; bottom: 0; top: auto; margin: 0; writing-mode: horizontal-tb; width: auto; height: 32px; line-height: 31px; padding: 0 14px; border: 1px solid var(--ink-3); border-bottom: 0; border-radius: 7px 7px 0 0; font-size: 15px; box-shadow: none; }
	.ex-temp .ex-tab > span { border-bottom: 0; padding-bottom: 0; box-shadow: inset 0 -3px 0 var(--red); }
	.ex-table { font-size: 15px; }
	.ex-load { width: 100%; }
	/* the chart: each exemption on its own lines, the years in a row beneath */
	.exe, .exe thead, .exe tbody, .exe tr, .exe caption { display: block; }
	.exe tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .55fr); }
	.exe-axis th:first-child { display: none; }
	.exe-axis th, .exe-axis th:last-child { width: auto; padding-left: 4px; font-size: 12px; }
	.exe-gh th { grid-column: 1 / -1; display: block; }
	.exe tbody tr:not(.exe-gh) th { grid-column: 1 / -1; display: block; padding: 10px 0 2px; border-bottom: 0; }
	.exe-c { display: block; height: 30px; }
}
@media (max-width: 380px) {
	.ex-file-tab { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.ex-armed:not(.seen) .exe-bar { transform: none; }
	.ex-armed:not(.seen) .tg-line[pathLength] { stroke-dashoffset: 0; }
	.ex-armed:not(.seen) .tg-kid, .ex-armed:not(.seen) .tg-ann, .ex-armed:not(.seen) .tg-agree { opacity: 1; }
}
@media print {
	.ex-tab { display: none; }
	.ex-file { box-shadow: none; margin: 0; }
}