/* The penalties page (making-tax-digital-penalties-calculator): its layout, the "instrument bench",
   the stamped notes in the margin and the points card. Loaded only on that page (data-explainer="pen-card").
   The card is the site's own ledger card (ruled lines, a red margin, red stamps), never a licence or
   any official document. */

/* ---------------------------------------------------------------- the page */
/* The bench and the drawings use the whole column; prose keeps its 40em, with notes in the margin. */
.entry-body:has(.pen-bench) { max-width: none; container: penpage / inline-size; }
.entry-body:has(.pen-bench) > figure.facts, .entry-body:has(.pen-bench) > .pen-pair { max-width: 40em; }
.entry-body:has(.pen-bench) > figure, .entry-body:has(.pen-bench) > .pen-pair, .entry-body:has(.pen-bench) > h2 { clear: both; }

.pen-bench { display: grid; gap: 40px 28px; margin: 6px 0 54px; align-items: start; }
.pen-inst { margin: 0; min-width: 0; }
.pen-kicker { margin: 0 0 6px; font: 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.pen-inst-title { margin: 0 0 4px; font-size: 27px; }
.pen-inst-lede { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pen-inst .src { font-size: 13px; }
@container penpage (min-width: 900px) {
	.pen-bench { grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr); }
	.pen-inst-head { min-height: 128px; }
}

/* The notes in the margin: a rubber stamp and a line or two. On a wide page they sit beside the
   paragraph they belong to; on a narrow one, between paragraphs. */
.pen-note { max-width: 40em; margin: 4px 0 22px; padding: 12px 14px 12px 16px; border-left: 3px solid var(--red); background: var(--card); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pen-note p { margin: 0; }
.pen-note .pen-stamp { display: inline-block; margin: 0 0 8px; padding: 3px 8px 2px; border: 2px solid var(--red); box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3px var(--red); font: 600 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--red); transform: rotate(-2deg); transform-origin: left center; }
.pen-note .pen-stamp .f { font-size: 1em; }
.pen-note:nth-of-type(2n) .pen-stamp { transform: rotate(1.5deg); }
@container penpage (min-width: 960px) {
	.pen-note { float: right; clear: right; width: 200px; margin: 6px 0 18px 24px; padding: 0 0 0 14px; background: none; border-left: 1px solid var(--rule); font-size: 14px; color: var(--ink-3); }
}

/* Two receipts side by side (the first-year example). */
.pen-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 22px 0 8px; }
.pen-pair figure.facts { margin: 0; }

/* The site styles every list in an article; the card's lists are drawings and set their own. */
.entry-body .pc-rows, .entry-body .pc-rules { margin: 0; padding: 0; }
.entry-body .pc-rows > li, .entry-body .pc-rules > li { margin: 0; }

/* The ladder of missed deadlines, drawn as a ladder: two rails, a rung for each deadline. */
.pen-ladder { max-width: 40em; }
.pen-ladder figure.facts { margin: 22px 0 28px; }
.pen-ladder .facts-table { border-collapse: separate; border-spacing: 0; border-left: 5px solid var(--ink); border-right: 5px solid var(--ink); background: var(--card); }
.pen-ladder .facts-table thead th { padding: 10px 12px; border-bottom: 5px solid var(--ink); background: var(--paper); }
.pen-ladder .facts-table td { padding: 11px 12px; border-bottom: 3px solid rgba(23, 32, 51, .72); }
.pen-ladder .facts-table tbody tr:last-child td { border-bottom-width: 5px; border-bottom-color: var(--ink); }
.pen-ladder .facts-table td:first-child { color: var(--ink-3); }
.pen-ladder .facts-table td:nth-child(3) { font-family: var(--cond); font-weight: 700; font-size: 20px; color: var(--red); }
.pen-ladder .facts-table td:last-child { font-family: var(--cond); font-weight: 700; font-size: 19px; }
.pen-ladder .facts-table caption { padding-left: 0; }
@media (max-width: 480px) {
	.pen-ladder { overflow-x: auto; }
	.pen-ladder .facts-table { border-left-width: 4px; border-right-width: 4px; }
	.pen-ladder .facts-table thead th { padding: 8px 4px; letter-spacing: 0; }
	.pen-ladder .facts-table td { padding: 9px 4px; }
	.pen-ladder .facts-table th:first-child, .pen-ladder .facts-table td:first-child { padding-left: 8px; }
	.pen-ladder .facts-table td:nth-child(3) { font-size: 18px; }
	.pen-ladder .facts-table td:last-child { font-size: 17px; }
}
/* The folded list of every source: a target a thumb can hit. */
.entry-body:has(.pen-bench) .src-all summary { min-height: 44px; }

/* ---------------------------------------------------------------- choices as segments (shared by the card) */
.pen-seg { display: flex; min-width: 0; margin: 0; padding: 0; border: 0; }
.pen-seg label { position: relative; flex: 1 1 0; min-width: 0; }
.pen-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pen-seg span { display: block; height: 100%; padding: 7px 8px; border: 1px solid var(--ink); background: var(--card); color: var(--ink); text-align: center; line-height: 1.2; transition: background 160ms, color 160ms; }
.pen-seg label + label span { border-left: 0; }
.pen-seg input:hover + span { background: var(--wash-2); }
.pen-seg input:checked + span { background: var(--ink); color: var(--paper); }
.pen-seg input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; position: relative; z-index: 1; }

.pen-years { margin: 0 0 4px; font-size: 15px; color: var(--ink-2); }
.pen-years-set, .pc-set { min-width: 0; margin: 0; padding: 0; border: 0; }
.pen-years-set legend { margin: 0 0 6px; padding: 0; font: 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
/* The start date as a line on a paper form: a box for each April, ticked in red ink. */
.pen-ticks { display: flex; flex-wrap: wrap; gap: 4px 26px; padding: 2px 0 8px; border-bottom: 1px solid var(--rule); }
.pen-ticks label { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.pen-ticks input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pen-box { position: relative; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--ink); background: var(--card); transition: background 160ms; }
.pen-ticks input:hover ~ .pen-box { background: var(--wash); }
.pen-ticks input:checked ~ .pen-box::after { content: ""; position: absolute; left: 6px; top: -7px; width: 9px; height: 21px; border: solid var(--red); border-width: 0 3px 3px 0; border-radius: 0 0 2px 0; transform: rotate(38deg); }
.pen-ticks input:focus-visible ~ .pen-box { outline: 2px solid var(--link); outline-offset: 3px; }
.pen-tick-text b { display: block; font: 600 15px/1.2 var(--mono); color: var(--ink-2); }
.pen-tick-text small { display: block; font-size: 13px; line-height: 1.3; color: var(--ink-3); }
.pen-ticks input:checked ~ .pen-tick-text b { color: var(--ink); text-decoration: underline 2px var(--red); text-underline-offset: 4px; }

/* ---------------------------------------------------------------- the card, and turning it over */
.pen-flip { position: relative; margin: 14px 0 0; }
.pen-live .pen-flip { margin-top: 54px; }
.pen-face + .pen-face { margin-top: 18px; }
.pen-live .pen-flip { perspective: 1900px; }
.pen-live .pen-flip-inner { display: grid; transform-style: preserve-3d; transition: transform 950ms cubic-bezier(.45, .05, .2, 1); }
.pen-live .pen-face { grid-area: 1 / 1; min-width: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pen-live .pen-face + .pen-face { margin-top: 0; }
.pen-live .pen-back { transform: rotateY(180deg); }
.pen-live .pen-flip.over .pen-flip-inner { transform: rotateY(180deg); }
.pen-live .pen-back .pc-card { height: 100%; }

.pc-card { position: relative; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule), 0 24px 44px -30px rgba(23, 32, 51, .5); color: var(--ink); }
/* A second card behind, as in a box of index cards: the next sheet, a little askew. */
.pen-front .pc-card::before { content: ""; position: absolute; z-index: -1; inset: 6px -6px -6px 6px; background: var(--wash-2); border: 1px solid var(--rule); }
.pc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 14px 18px 10px; border-bottom: 3px double var(--ink); }
.pc-title { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.pc-sub { margin: 0; font-size: 13px; color: var(--ink-3); }
.pc-sub b { font-family: var(--mono); font-weight: 600; color: var(--ink); }

.pc-cols, .pc-row { display: grid; grid-template-columns: 124px minmax(0, 1fr) 54px 86px; column-gap: 12px; padding: 0 14px 0 14px; }
.pc-cols { padding-top: 8px; padding-bottom: 6px; font: 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid rgba(23, 32, 51, .16); }
.pc-cols span:nth-child(2) { padding-left: 8px; }
.pc-cols span:nth-child(3) { text-align: center; }
.pc-rows { position: relative; list-style: none; margin: 0; padding: 0; }
/* The red margin of a ledger sheet, down the left of the "sent" column. */
.pc-rows::before { content: ""; position: absolute; top: 0; bottom: 0; left: 143px; width: 3px; border-left: 1px solid rgba(179, 38, 30, .55); border-right: 1px solid rgba(179, 38, 30, .55); pointer-events: none; }
.pc-row { position: relative; align-items: center; min-height: 58px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(23, 32, 51, .12); }
.pc-row > * { min-width: 0; }
.pc-due b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.pc-due span { display: block; font-size: 13px; line-height: 1.3; color: var(--ink-3); }
.pc-due .pc-ty { display: inline; white-space: nowrap; }
.pc-sent { padding-left: 8px; font-size: 14px; color: var(--ink-2); }
.pc-sent b { font-family: var(--mono); font-weight: 600; font-size: 13px; }
.pc-unsent { color: var(--red); font-weight: 600; }
.pc-ontime { color: var(--ink-3); }
.pc-mark { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; }
.pc-goes { font: 13px/1.3 var(--mono); color: var(--ink-3); }
.pc-goes b { display: block; font-weight: 600; font-size: 13px; color: var(--ink); }
.pc-quiet, .pc-stays { display: block; font-family: var(--sans); font-size: 13px; line-height: 1.3; color: var(--ink-3); }
.pc-stays { color: var(--red); }
.pc-late, .pc-m-late .pc-due b, .pc-m-none .pc-due b { color: var(--ink); }
.pc-row.pc-r-point, .pc-row.pc-r-fine { background: linear-gradient(90deg, transparent 0 146px, rgba(179, 38, 30, .04) 146px); }

/* The stamps: red ink, a double ring, never quite straight, the ruled line showing through. */
.pc-stamp, .pc-fine { display: inline-flex; align-items: center; justify-content: center; color: var(--red); mix-blend-mode: multiply; transform: rotate(var(--tilt, -3deg)); }
.pc-stamp { position: relative; width: 44px; height: 44px; border: 2px solid var(--red); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3px var(--red); opacity: .93; }
.pc-stamp b { font-family: var(--cond); font-weight: 700; font-size: 22px; line-height: 1; }
.pc-stamp i { display: none; }
.pc-stamp sup { position: absolute; right: -9px; top: -6px; font: 600 14px/1 var(--mono); color: var(--ink-2); transform: rotate(calc(var(--tilt, -3deg) * -1)); }
.pc-fine { position: relative; z-index: 1; margin-top: -7px; padding: 3px 6px 2px; border: 2px solid var(--red); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--card), inset 0 0 0 2px var(--red); transform: rotate(calc(var(--tilt, -3deg) * -1.6)); }
.pc-fine b { font-family: var(--cond); font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: .01em; }
.pc-fine-solo { margin-top: 0; transform: rotate(var(--tilt, -3deg)); }
.pc-nil { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1.5px dashed var(--mute-line); border-radius: 50%; font: 12px/1 var(--mono); color: var(--ink-3); transform: rotate(var(--tilt, -3deg)); }
.pc-tick { display: block; width: 8px; height: 15px; margin-top: -4px; border: solid var(--mute-line); border-width: 0 2px 2px 0; transform: rotate(42deg); opacity: .8; }

/* The marks as controls (with the script): quiet until chosen, red when late. */
.pc-seg { width: 100%; max-width: 236px; }
.pc-seg span { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 4px; border-color: rgba(23, 32, 51, .26); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.pc-seg input:checked + span { background: var(--wash); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.pc-seg label:nth-child(2) input:checked + span { background: var(--red-wash); color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }
.pc-seg label:nth-child(3) input:checked + span { background: var(--red); border-color: var(--red); color: var(--card); box-shadow: none; }
.pc-when { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 13px/1.2 var(--mono); color: var(--ink-3); }
.pc-when[hidden] { display: none; }
.pc-when input { flex: 1 1 auto; min-width: 0; max-width: 168px; height: 34px; padding: 4px 8px; border: 1px solid var(--rule); border-bottom: 1px solid var(--ink); border-radius: 0; background: var(--paper); font: 600 13px/1 var(--mono); color: var(--ink); }
.pc-when input[aria-invalid="true"] { border-color: var(--red); background: var(--red-wash); }

/* The foot of the card: the tally, and what happens next. */
.pc-foot { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 12px 34px; padding: 16px 18px 18px; border-top: 2px solid var(--ink); }
.pc-tally, .pc-sum { display: flex; align-items: center; gap: 10px; }
.pc-n, .pc-money { font-family: var(--cond); font-weight: 700; font-size: 44px; line-height: .9; letter-spacing: -.02em; }
.pc-money.red { color: var(--red); }
.pc-of { font: 13px/1.35 var(--mono); color: var(--ink-3); }
.pc-next { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pc-next b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pc-annl { grid-column: 1 / -1; margin: 0; padding: 10px 0 0; border-top: 1px dashed var(--rule); font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.pc-annl span { font: 600 14px var(--mono); color: var(--ink-2); }

/* The back: the rules in words, numbered down the red margin. */
.pc-card-back { display: flex; flex-direction: column; padding: 16px 18px 18px; }
.pc-card-back .pc-rules { flex: 1 1 auto; position: relative; background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(23, 32, 51, .1) 31px 32px); }
.pc-card-back .pc-rules::before { content: ""; position: absolute; left: 32px; top: 0; bottom: 0; width: 3px; border-left: 1px solid rgba(179, 38, 30, .55); border-right: 1px solid rgba(179, 38, 30, .55); }
.pc-rules li { background: var(--card); }
.pc-back-title { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 3px double var(--ink); font-family: var(--cond); font-weight: 700; font-size: 22px; }
.pc-rules { margin: 0; padding: 0; list-style: none; counter-reset: rule; }
.pc-rules li { position: relative; margin: 0; padding: 9px 0 9px 40px; border-bottom: 1px solid rgba(23, 32, 51, .12); font-size: 15px; line-height: 1.45; color: var(--ink-2); counter-increment: rule; }
.pc-rules li::before { content: counter(rule); position: absolute; left: 0; top: 9px; width: 26px; font: 600 13px/1.45 var(--mono); color: var(--red); text-align: right; }
.pc-rules b { color: var(--ink); }

/* Turning over: a filing tab on the card's top edge. It stays put while the card turns under it. */
.pen-turn { position: absolute; z-index: 3; right: 16px; bottom: 100%; display: inline-flex; align-items: center; gap: 9px; height: 44px; margin-bottom: -1px; padding: 0 16px 0 14px; border: 1px solid var(--rule); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--card); color: var(--ink); font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 -6px 14px -12px rgba(23, 32, 51, .5); transition: color 160ms, background 160ms; }
.pen-turn::after { content: ""; position: absolute; inset: -6px -4px 0; }
.pen-turn[hidden] { display: none; }
.pen-turn::before { content: ""; width: 15px; height: 11px; border: 1.5px solid currentColor; border-radius: 1px; transform: perspective(36px) rotateY(-40deg); transition: transform 600ms var(--ease); }
.pen-turn:hover { background: var(--wash-2); }
.pen-turn[aria-pressed="true"] { color: var(--red); }
.pen-turn[aria-pressed="true"]::before { transform: perspective(36px) rotateY(40deg); }
.pen-notes { margin: 14px 0 0; min-width: 0; font-size: 14px; color: var(--ink-3); }
.pen-notes summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 13px/1.3 var(--mono); color: var(--ink-2); }
.pen-notes summary:hover { color: var(--ink); }
.pen-notes p { margin: 0 0 8px; }

/* ---------------------------------------------------------------- motion (stopped for reduced motion) */
@keyframes pc-stamp {
	0% { opacity: 0; transform: rotate(var(--tilt, -3deg)) scale(1.9) translateY(-8px); }
	55% { opacity: 1; transform: rotate(var(--tilt, -3deg)) scale(.9); }
	78% { transform: rotate(var(--tilt, -3deg)) scale(1.05); }
	100% { opacity: .93; transform: rotate(var(--tilt, -3deg)) scale(1); }
}
@keyframes pc-fine-in {
	0% { opacity: 0; transform: rotate(calc(var(--tilt, -3deg) * -1.6)) scale(2.2); }
	60% { opacity: 1; transform: rotate(calc(var(--tilt, -3deg) * -1.6)) scale(.92); }
	100% { opacity: 1; transform: rotate(calc(var(--tilt, -3deg) * -1.6)) scale(1); }
}
@keyframes pc-press { 0%, 100% { background-color: transparent; } 35% { background-color: var(--red-wash); } }
.pc-wait .pc-stamp, .pc-wait .pc-fine, .pc-wait .pc-nil { opacity: 0; }
.pc-fresh .pc-stamp { animation: pc-stamp 440ms cubic-bezier(.3, .6, .3, 1) var(--delay, 0ms) both; }
.pc-fresh .pc-fine { animation: pc-fine-in 460ms cubic-bezier(.3, .6, .3, 1) calc(var(--delay, 0ms) + 220ms) both; }
.pc-fresh .pc-fine-solo { animation-delay: var(--delay, 0ms); }
.pc-fresh .pc-nil { animation: rise 400ms var(--ease) var(--delay, 0ms) both; }
.pc-fresh { animation: pc-press 700ms var(--ease) var(--delay, 0ms); }
.pc-hint { animation: pc-press 900ms var(--ease); }

/* ---------------------------------------------------------------- narrower cards */
@container penpage (max-width: 899px) {
	.pen-inst-head { max-width: 40em; }
}
@media (max-width: 560px) {
	.pc-head { padding: 12px 14px 8px; }
	.pc-cols { display: none; }
	.pc-row { grid-template-columns: minmax(0, 1fr) 50px 92px; grid-template-areas: "due mark goes" "sent sent sent"; column-gap: 8px; row-gap: 6px; padding: 10px 12px 12px 22px; }
	.pc-due { grid-area: due; }
	.pc-mark { grid-area: mark; min-height: 40px; }
	.pc-goes { grid-area: goes; }
	.pc-sent { grid-area: sent; padding-left: 0; }
	.pc-rows::before { left: 10px; }
	.pc-row.pc-r-point, .pc-row.pc-r-fine { background: linear-gradient(90deg, transparent 0 14px, rgba(179, 38, 30, .035) 14px); }
	.pc-stamp { width: 40px; height: 40px; }
	.pc-seg { max-width: none; }
	.pc-seg span { min-height: 44px; font-size: 14px; }
	.pc-when input { height: 44px; max-width: none; }
	.pc-foot { gap: 10px 22px; padding: 14px 14px 16px; }
	.pc-n, .pc-money { font-size: 38px; }
	.pc-card-back { padding: 14px; }
	.pen-ticks { gap: 0 18px; }
}
@media (max-width: 360px) {
	.pc-row { grid-template-columns: minmax(0, 1fr) 46px 84px; }
	.pc-foot { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.pen-live .pen-flip-inner { transition: none; }
	.pc-wait .pc-stamp, .pc-wait .pc-fine, .pc-wait .pc-nil { opacity: 1; }
}
@media print {
	.pen-live .pen-flip-inner { transform: none !important; display: block; }
	.pen-live .pen-face { -webkit-backface-visibility: visible; backface-visibility: visible; }
	.pen-live .pen-back { transform: none; margin-top: 18px; }
	.pen-turn { display: none !important; }
}