/* Invoice inbox demo (prefix iv-) */
[data-demo="invoice"] .demo-body { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); }
[data-demo="invoice"] #iv-text { min-height: 400px; font: .76rem/1.5 var(--mono); white-space: pre; overflow: auto; tab-size: 4; }
.iv-fiction { font-size: .86rem; color: var(--muted); margin: 0; }
.iv-hint { font-size: .86rem; color: var(--muted); margin: 0; }
.iv-note { font-size: .9rem; color: var(--muted); margin: 0 0 .75rem; }
.iv-pad { margin-top: 1rem; }
.iv-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.iv-status { display: none; align-items: center; gap: .6rem; font: 650 .9rem/1 var(--body); color: var(--sea); }
.iv-reading .iv-status { display: flex; }
.iv-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sea-soft); border-top-color: var(--sea); animation: iv-rot .8s linear infinite; }
@keyframes iv-rot { to { transform: rotate(360deg); } }

.iv-verdict { display: flex; gap: .85rem; align-items: center; padding: .9rem 1.1rem; border-radius: var(--radius-sm); border: 1.5px solid; }
.iv-verdict b { display: block; font: 700 1.1rem/1.2 var(--display); }
.iv-verdict span { font-size: .9rem; }
.iv-vicon, .iv-cicon { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 1rem/1 var(--body); color: #fff; }
.iv-verdict.iv-ok { background: #e6f6ee; border-color: #8fd4ae; color: #11603a; }
.iv-verdict.iv-warn { background: #fff4de; border-color: #f0c777; color: #7a4b00; }
.iv-verdict.iv-bad { background: #fbe6e1; border-color: #e8a090; color: #8f2d14; }
.iv-ok .iv-vicon, .iv-pass .iv-cicon { background: #1f9d62; }
.iv-warn .iv-vicon, .iv-warn .iv-cicon { background: #d98a00; }
.iv-bad .iv-vicon, .iv-fail .iv-cicon { background: #d03a1a; }

.iv-tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); }
.iv-tabs button { font: 650 .92rem/1 var(--body); padding: .7rem 1rem; border: 0; background: none; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.iv-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--sun); }
.iv-tabs button:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
/* the bill panel is a grid only while shown; an id selector would otherwise beat [hidden] */
#iv-p-bill:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
[role="tabpanel"][hidden], [data-iv-sent][hidden] { display: none; }
/* grid children may shrink, so a long word or the JSON never widens the column */
.iv-card > *, #iv-p-bill > *, [data-iv-json] { min-width: 0; max-width: 100%; }
[data-demo="invoice"] .demo-code { overflow-x: auto; }
.iv-badge { display: inline-block; margin-left: .4rem; padding: .2rem .45rem; border-radius: 999px; background: var(--sun-soft); color: var(--sun-ink); font: 700 .66rem/1 var(--body); letter-spacing: .06em; vertical-align: middle; }

.iv-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.15rem; }
.iv-sup { display: grid; gap: .15rem; align-content: start; font-size: .92rem; color: var(--muted); overflow-wrap: anywhere; }
.iv-sup b { font: 700 1.1rem/1.25 var(--display); color: var(--ink); }
.iv-k { font: 650 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.iv-fields { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; align-content: start; }
.iv-fields dt { font: 650 .72rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.iv-fields dd { margin: .25rem 0 0; font-weight: 650; overflow-wrap: anywhere; }
.iv-fields em, .iv-sup em { font-weight: 400; color: var(--muted); }

.iv-lines { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .35rem 1rem 1rem; }
.iv-table td { font-size: .92rem; }
.iv-tax { display: block; font-size: .74rem; color: var(--muted); margin-top: .15rem; }
.iv-acct { display: flex; align-items: center; gap: .5rem; }
.iv-sel { padding: .45rem .5rem; font-size: .86rem; min-width: 11.5rem; border-radius: 8px; }
.iv-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; }
.iv-dot.iv-hi { background: #1f9d62; } .iv-dot.iv-mid { background: #e0a000; } .iv-dot.iv-lo { background: #d03a1a; }
.iv-totals { margin: .75rem 0 0 auto; display: grid; gap: .3rem; max-width: 18rem; }
.iv-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.iv-totals dt { color: var(--muted); } .iv-totals dd { margin: 0; font-weight: 650; }
.iv-grand { border-top: 2px solid var(--ink); padding-top: .4rem; margin-top: .2rem; }
.iv-grand dt, .iv-grand dd { font: 700 1.2rem/1.2 var(--display); color: var(--ink); }

.iv-checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.iv-c { display: flex; gap: .75rem; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .65rem .85rem; }
.iv-c.iv-fail { border-color: #e8a090; background: #fffafa; } .iv-c.iv-warn { border-color: #f0c777; background: #fffdf7; }
.iv-c .iv-cicon { width: 24px; height: 24px; font-size: .9rem; margin-top: .1rem; }
.iv-c b { display: block; font-size: .95rem; } .iv-c span:not(.iv-sr):not(.iv-cicon) { display: block; font-size: .88rem; color: var(--muted); }
.iv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.iv-send { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.iv-sendnote { font-size: .86rem; color: var(--muted); }
.iv-sent { display: flex; gap: .75rem; align-items: flex-start; background: #e6f6ee; border: 1.5px solid #8fd4ae; color: #11603a; border-radius: var(--radius-sm); padding: .85rem 1rem; }
.iv-sent .iv-cicon { background: #1f9d62; }
.iv-sent b { display: block; } .iv-sent span:not(.iv-cicon) { font-size: .9rem; }
[data-demo="invoice"] .demo-meta { margin-top: 0; }

/* never routine, and "Check these" */
.iv-stops { background: #fbe6e1; border: 2px solid #d03a1a; border-radius: var(--radius-sm); padding: .85rem 1.1rem; color: #6e220f; }
.iv-stops-h, .iv-review-h { margin: 0 0 .45rem; font: 700 .98rem/1.25 var(--display); }
.iv-stops ul, .iv-review ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.iv-stops li b { display: block; }
.iv-stops q { display: block; font: .8rem/1.45 var(--mono); background: #fff; border: 1px solid #e8a090; border-radius: 4px; padding: .3rem .5rem; margin: .25rem 0; overflow-wrap: anywhere; quotes: none; }
.iv-stops li span { display: block; font-size: .9rem; }
.iv-review { background: #fff4de; border: 1.5px solid #f0c777; border-radius: var(--radius-sm); padding: .8rem 1.1rem; color: #5c3900; }
.iv-review li { font-size: .92rem; }

/* reading animation */
.iv-pend { opacity: 0; transform: translateY(6px); }
.iv-in { animation: iv-fill .45s ease both; }
@keyframes iv-fill { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.iv-reading .iv-verdict, .iv-reading .iv-stops, .iv-reading .iv-review, .iv-reading .iv-tabs, .iv-reading .iv-send, .iv-reading .demo-meta { opacity: .35; }
.iv-card:not(.iv-reading) .iv-pend { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .iv-in, .iv-spin { animation: none; } .iv-pend { opacity: 1; transform: none; } }

@media (max-width: 900px) { [data-demo="invoice"] .demo-body { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .iv-head { grid-template-columns: 1fr; }
  .iv-table thead { display: none; }
  .iv-table, .iv-table tbody, .iv-table tr, .iv-table td { display: block; width: 100%; }
  .iv-table tr { padding: .7rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem .5rem; }
  .iv-table td { border: 0; padding: .1rem 0; text-align: left; }
  .iv-table td:first-child, .iv-table td:last-child { grid-column: 1 / -1; }
  .iv-table td.num { text-align: left; }
  .iv-table td.num::before { content: attr(data-label); display: block; font: 650 .68rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .iv-sel { min-width: 0; width: 100%; }
  .iv-acct { width: 100%; }
  .iv-totals { max-width: none; }
}

.iv-recon { color: #a0281c; } .iv-recon dt { color: #a0281c; font-weight: 650; } .iv-recon dd { margin: 0; font-weight: 700; }
.iv-reconnote { margin: .3rem 0 0 auto; max-width: 18rem; text-align: right; font-size: .85rem; color: #a0281c; }
.iv-override { display: flex; gap: .6rem; align-items: flex-start; margin-top: .75rem; padding: .7rem .9rem; border: 1.5px dashed #d9877f; border-radius: var(--radius-sm); background: #fdf0ee; font-size: .9rem; color: #7a1f16; cursor: pointer; }
.iv-override input { margin-top: .25rem; width: 18px; height: 18px; flex: none; accent-color: #b3261e; }
.iv-danger { background: #b3261e; border-color: #b3261e; color: #fff; }
/* a line that only exists to reach the printed total: make it obvious */
.iv-table tr.iv-adj td { background: var(--sun-soft); font-style: italic; }
.iv-table tr.iv-adj td:first-child { box-shadow: inset 3px 0 0 #a0281c; padding-left: .6rem; }
/* which engine read the bill */
.demo-meta.iv-engine { align-items: flex-start; flex-wrap: nowrap; gap: .75rem; }
.iv-engine .demo-badge { flex: none; white-space: nowrap; }
.iv-engine > span:last-child { line-height: 1.45; }
@media (max-width: 520px) { .demo-meta.iv-engine { flex-wrap: wrap; } }
.iv-override.iv-confirm { border-color: #e0b04f; background: #fffaf0; color: #5c3900; }
.iv-confirm input { accent-color: #b07400; }