.page-invoicing-system h1 { max-width:13ch; }
.page-invoicing-system .bk-rail::after { animation-name:iv-rail-travel; }
@keyframes iv-rail-travel { 0% { top:-44%; } 100% { top:100%; } }

.iv-hero-board { background:color-mix(in srgb,var(--bk-dark-2) 91%,transparent); border:1px solid color-mix(in srgb,var(--bk-accent) 27%,transparent); border-radius:17px; box-shadow:0 30px 70px color-mix(in srgb,var(--bk-dark) 65%,transparent); padding:25px; }
.iv-hero-invoice { background:var(--bk-dark); border:1px solid var(--bk-rail); border-radius:12px; overflow:hidden; padding:18px; position:relative; }
.iv-hero-invoice > span { align-items:center; background:color-mix(in srgb,var(--bk-accent) 13%,transparent); border-radius:9px; color:var(--bk-accent); display:flex; height:43px; justify-content:center; position:absolute; right:17px; top:17px; width:43px; }
.iv-hero-invoice small, .iv-hero-invoice strong, .iv-hero-invoice b { display:block; }
.iv-hero-invoice small { color:var(--bk-muted); font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
.iv-hero-invoice strong { color:var(--bk-accent); font-family:var(--awd-font-display); font-size:37px; font-weight:300; margin-top:15px; }
.iv-hero-invoice p { color:var(--bk-inv); font-size:11px; margin:2px 0 11px; }
.iv-hero-invoice b { border-top:1px solid var(--bk-rail); color:var(--bk-dim); font-size:9px; padding-top:10px; }
.iv-hero-states { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:17px 0; position:relative; }
.iv-hero-states::before { background:var(--bk-rail); content:""; height:1px; left:10%; position:absolute; right:10%; top:6px; }
.iv-hero-states span { color:var(--bk-muted); font-size:7.5px; position:relative; text-align:center; }
.iv-hero-states i { background:var(--bk-rail); border:2px solid var(--bk-dark-2); border-radius:50%; display:block; height:12px; margin:0 auto 6px; position:relative; width:12px; z-index:2; }
.iv-hero-states .is-done { color:var(--bk-accent); }
.iv-hero-states .is-done i { background:var(--bk-accent); }
.iv-hero-board > p { color:var(--bk-dim); display:flex; font-size:9.5px; gap:8px; margin:0; }
.iv-hero-board > p span { color:var(--bk-accent); }

.iv-work, .iv-owner { min-height:690px; }
.iv-work-card { border:1px solid var(--bk-edge); border-radius:11px; margin-top:18px; padding:16px; position:relative; }
.iv-work-card > span { align-items:center; background:var(--bk-warm-2); border-radius:9px; color:var(--bk-accent-ink); display:flex; height:43px; justify-content:center; position:absolute; right:15px; top:15px; width:43px; }
.iv-work-card > small { color:var(--bk-muted); display:block; font-size:8px; letter-spacing:.1em; max-width:70%; text-transform:uppercase; }
.iv-work-card h3 { font-size:17px; margin:5px 58px 17px 0; }
.iv-work-card dl { border-top:1px solid var(--bk-edge); margin:0; padding-top:7px; }
.iv-work-card dl > div { border-bottom:1px solid var(--bk-edge); display:grid; gap:12px; grid-template-columns:77px 1fr; padding:8px 0; }
.iv-work-card dl > div:last-child { border-bottom:0; }
.iv-work-card dt { color:var(--bk-muted); font-size:8.5px; }
.iv-work-card dd { color:var(--bk-body); font-size:9.5px; margin:0; text-align:right; }
.iv-checks { display:grid; gap:6px; margin:13px 0; }
.iv-checks p { align-items:center; background:var(--bk-warm); border-radius:7px; color:var(--bk-body); display:flex; font-size:9px; gap:7px; margin:0; padding:7px 9px; }
.iv-checks span { color:var(--bk-accent-ink); }
.iv-work > .btn { width:100%; }
.iv-empty { align-items:center; display:flex; flex-direction:column; justify-content:center; min-height:520px; text-align:center; }
.iv-empty > span { align-items:center; background:color-mix(in srgb,var(--bk-accent) 13%,transparent); border-radius:13px; color:var(--bk-accent); display:flex; height:60px; justify-content:center; width:60px; }
.iv-empty h3 { color:var(--bk-inv); margin-top:18px; }
.iv-empty p { color:var(--bk-dim); font-size:10.5px; max-width:28ch; }
.iv-document { padding-top:17px; }
.iv-document:focus { outline:3px solid color-mix(in srgb,var(--bk-accent) 34%,transparent); outline-offset:4px; }
.iv-document-head { align-items:start; border-bottom:1px solid var(--bk-rail); display:flex; justify-content:space-between; padding-bottom:12px; }
.iv-document-head small { color:var(--bk-muted); display:block; font-size:7.5px; }
.iv-document-head h3 { color:var(--bk-inv); font-size:23px; margin:2px 0 0; }
.iv-document-head > span { text-align:right; }
.iv-document-head > span b { color:var(--bk-accent); display:block; font-size:9.5px; }
.iv-document-to { border-bottom:1px solid var(--bk-rail); padding:10px 0; }
.iv-document-to small, .iv-document-to b, .iv-document-to span { display:block; }
.iv-document-to small { color:var(--bk-muted); font-size:7.5px; text-transform:uppercase; }
.iv-document-to b { color:var(--bk-inv); font-size:10.5px; }
.iv-document-to span { color:var(--bk-dim); font-size:8px; }
.iv-line { align-items:start; border-bottom:1px solid var(--bk-rail); display:grid; gap:12px; grid-template-columns:1fr auto; padding:12px 0; }
.iv-line small, .iv-line b { display:block; }
.iv-line small { color:var(--bk-muted); font-size:7.5px; text-transform:uppercase; }
.iv-line b { color:var(--bk-inv); font-size:9.5px; }
.iv-line strong { color:var(--bk-inv); font-size:10.5px; }
.iv-totals { margin:8px 0; }
.iv-totals > div { display:grid; gap:10px; grid-template-columns:1fr auto; padding:4px 0; }
.iv-totals dt { color:var(--bk-muted); font-size:8.5px; }
.iv-totals dd { color:var(--bk-inv); font-size:9px; margin:0; text-align:right; }
.iv-totals > div:nth-child(2) { border-bottom:1px solid var(--bk-rail); border-top:1px solid var(--bk-rail); margin:4px 0; padding:7px 0; }
.iv-totals > div:nth-child(2) dt, .iv-totals > div:nth-child(2) dd { color:var(--bk-accent); font-size:11px; font-weight:600; }
.iv-actions { display:grid; gap:6px; grid-template-columns:1fr 1fr; }
.iv-actions button { background:transparent; border:1px solid var(--bk-rail); border-radius:7px; color:var(--bk-dim); cursor:pointer; font-family:var(--awd-font-body); font-size:8.5px; min-height:44px; padding:7px; }
.iv-actions button:first-child { background:var(--bk-accent); border-color:var(--bk-accent); color:var(--bk-dark); grid-column:1 / -1; }
.iv-actions button:hover:not(:disabled) { border-color:var(--bk-accent); color:var(--bk-accent); }
.iv-actions button:first-child:hover:not(:disabled) { color:var(--bk-dark); }
.iv-actions button:disabled { cursor:default; opacity:.42; }
.iv-event { background:color-mix(in srgb,var(--bk-accent) 10%,transparent); border-radius:7px; color:var(--bk-inv); font-size:8.5px; margin:9px 0 0; min-height:40px; padding:9px; }
.iv-reset { background:transparent; border:0; border-bottom:1px solid var(--bk-accent); color:var(--bk-accent); cursor:pointer; font-family:var(--awd-font-body); font-size:9px; min-height:44px; padding:7px 0; }

.iv-rules-grid, .iv-digital-grid, .iv-reminder-grid { align-items:center; display:grid; gap:70px; grid-template-columns:.88fr 1.12fr; }
.iv-rules-list { display:grid; gap:9px; }
.iv-rules-list article { align-items:center; background:var(--bk-card); border:1px solid var(--bk-edge); border-radius:10px; display:grid; gap:12px; grid-template-columns:45px 1fr; padding:12px; }
.iv-rules-list article > span { align-items:center; background:var(--bk-warm-2); border-radius:8px; color:var(--bk-accent-ink); display:flex; font-family:var(--awd-font-display); font-size:9px; height:45px; justify-content:center; }
.iv-rules-list small, .iv-rules-list b { display:block; }
.iv-rules-list small { color:var(--bk-muted); font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.iv-rules-list b { color:var(--bk-ink); font-size:11.5px; }
.iv-rules-list > p { border-left:2px solid var(--bk-accent); color:var(--bk-body); font-size:10.5px; margin:8px 0 0; padding-left:14px; }
.iv-digital-grid > div:first-child p:not(.kicker) { color:var(--bk-clay-body); font-size:11.5px; }
.iv-boundary-card { background:color-mix(in srgb,var(--bk-clay-ink) 7%,transparent); border:1px solid color-mix(in srgb,var(--bk-clay-ink) 17%,transparent); border-radius:15px; padding:25px; }
.iv-boundary-card > span { align-items:center; background:var(--bk-clay-ink); border-radius:10px; color:var(--bk-clay); display:flex; height:50px; justify-content:center; margin-bottom:15px; width:50px; }
.iv-boundary-card small { color:var(--bk-clay-kicker); display:block; font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.iv-boundary-card h3 { color:var(--bk-clay-ink); font-size:17px; margin:5px 0; }
.iv-boundary-card p { color:var(--bk-clay-body); font-size:10.5px; margin:0; }
.iv-boundary-card i { border-bottom:1px solid color-mix(in srgb,var(--bk-clay-ink) 17%,transparent); border-top:1px solid color-mix(in srgb,var(--bk-clay-ink) 17%,transparent); color:var(--bk-clay-kicker); display:block; font-size:8px; font-style:normal; margin:14px 0; padding:8px 0; text-align:center; text-transform:uppercase; }
.iv-reminder-list { list-style:none; margin:0; padding:0; }
.iv-reminder-list li { align-items:center; background:var(--bk-card); border:1px solid var(--bk-edge); border-radius:10px; display:grid; gap:14px; grid-template-columns:85px 1fr; margin-bottom:8px; padding:13px; }
.iv-reminder-list span { color:var(--bk-accent-ink); font-size:9px; text-transform:uppercase; }
.iv-reminder-list b { color:var(--bk-ink); font-size:11px; }
.iv-reminder-list .is-stop { background:var(--bk-dark); border-color:var(--bk-dark); }
.iv-reminder-list .is-stop span { color:var(--bk-accent); }
.iv-reminder-list .is-stop b { color:var(--bk-inv); }
.iv-proof-card { background:color-mix(in srgb,var(--bk-clay-ink) 7%,transparent); border:1px solid color-mix(in srgb,var(--bk-clay-ink) 17%,transparent); border-radius:15px; padding:27px; }
.iv-proof-card small { color:var(--bk-clay-kicker); display:block; font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.iv-proof-card strong { color:var(--bk-clay-ink); display:block; font-family:var(--awd-font-display); font-size:70px; font-weight:300; line-height:1; margin-top:18px; }
.iv-proof-card b { color:var(--bk-clay-ink); display:block; font-size:15px; }
.iv-proof-card p { border-top:1px solid color-mix(in srgb,var(--bk-clay-ink) 16%,transparent); color:var(--bk-clay-body); font-size:11px; margin:20px 0 13px; padding-top:16px; }
.iv-proof-card > span { color:var(--bk-clay-kicker); font-size:9px; }
.iv-test-grid { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:35px; }
.iv-test-grid article { background:var(--bk-card); border:1px solid var(--bk-edge); border-radius:11px; padding:16px; }
.iv-test-grid span { color:var(--bk-accent-ink); font-family:var(--awd-font-display); font-size:10px; }
.iv-test-grid b { color:var(--bk-ink); display:block; font-size:12px; margin-top:8px; }
.iv-test-grid small { color:var(--bk-body); display:block; font-size:9.5px; margin-top:2px; }

@media(max-width:900px) {
	.iv-hero-board { max-width:620px; }
	.iv-rules-grid, .iv-digital-grid, .iv-reminder-grid { gap:42px; grid-template-columns:minmax(0,1fr); }
}
@media(max-width:700px) {
	.iv-work, .iv-owner { min-height:0; }
	.iv-test-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:440px) {
	.iv-hero-board { padding:18px; }
	.iv-actions, .iv-test-grid { grid-template-columns:1fr; }
	.iv-actions button:first-child { grid-column:auto; }
	.iv-document-head { gap:12px; }
	.iv-reminder-list li { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
	.page-invoicing-system .bk-rail::after { animation:none; }
}

