/* SerpDad v5 page kit: styles for app figures, specs, limits, receipts, the overlap matrix,
   decisions, the sorter, document previews and sourced fact tables. Loads after pages.css. */
.app-fig { margin: 0; display: grid; gap: 10px; min-width: 0; }
.app-cap { margin: 0; font-size: 13px; color: var(--ink-4); }
.app-cap a { color: var(--ink-3); }

.spec { background: #fff; border: 1px solid var(--hairline); }
.spec-title { margin: 0; padding: 16px 20px; font: 600 16px/1.2 var(--sans); color: var(--ink); border-bottom: 1px solid var(--hairline); }
.spec dl { margin: 0; }
.spec-row { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--hairline); }
.spec-row dt { font-size: 14px; color: var(--ink-4); }
.spec-row dd { margin: 0; font-size: 15px; color: var(--ink); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spec-docs { margin: 0; padding: 12px 20px; font-size: 14px; }
.spec-docs a { color: var(--ink); text-underline-offset: 3px; }

.limit { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: end; background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 28px; }
.limit-dad { position: relative; }
.limit-dad .dad-btn { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.limit-body { display: grid; gap: 10px; font-size: 16px; color: var(--ink-2); }
.limit-body h3 { margin: 0; font: 600 20px/1.25 var(--sans); color: var(--ink); }
.limit-body p { margin: 0; }

.receipt { display: grid; gap: 20px; }
.receipt.annotated { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.rc-card { background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 18px; display: grid; gap: 12px; }
.rc-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rc-head b { font: 600 17px/1.3 var(--sans); color: var(--ink); }
.rc-k { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; background: var(--ink); color: #fff; padding: 5px 7px; }
.rc-rule { font-size: 14px; color: var(--ink-3); }
.rc-meta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: 13px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.rc-meta div { display: flex; gap: 8px; }
.rc-meta dt { color: var(--ink-4); }
.rc-meta dd { margin: 0; color: var(--ink); }
.rc-notes { margin: 0; padding-left: 22px; display: grid; gap: 14px; font-size: 15px; color: var(--ink-2); }

.price-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ps-band { background: #fff; border: 1px solid var(--hairline); padding: 18px; display: grid; gap: 6px; align-content: start; }
.ps-band.open { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.ps-name { font-size: 14px; color: var(--ink-3); }
.ps-band b { font: 600 34px/1 var(--sans); color: var(--ink); letter-spacing: -.02em; }
.ps-unit { font-size: 13px; color: var(--ink-4); }
.ps-band .chip { justify-self: start; }
.ps-free { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }

.omx { display: grid; gap: 14px; }
.omx-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--hairline); }
.omx table { border-collapse: collapse; min-width: 640px; width: 100%; font-size: 13px; }
.omx th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 6px 10px; white-space: nowrap; }
.omx thead th { text-align: center; font: 500 11px/1 var(--mono); color: var(--ink-4); }
.omx tbody th { font-size: 13px; color: var(--ink); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.omx-n { display: inline-block; width: 22px; font: 500 11px/1 var(--mono); color: var(--ink-4); }
.omx td { padding: 2px; text-align: center; }
.omx td.self { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--hairline) 4px 5px); }
.omx td button { width: 100%; min-width: 34px; height: 32px; border: 1px solid transparent; font: 600 13px/1 var(--mono); cursor: pointer; color: var(--ink); }
.omx td button.on { outline: 2px solid var(--ink); outline-offset: -2px; }
.omx .s0 { background: #fff; color: var(--ink-4); border-color: var(--hairline); }
.omx .s1 { background: var(--orange-tint); }
.omx .s2 { background: var(--periwinkle-tint); }
.omx .s3 { background: var(--periwinkle); }
.omx-key { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-3); }
.omx-key span { display: inline-flex; gap: 6px; align-items: center; }
.omx-key i { width: 14px; height: 14px; border: 1px solid var(--hairline); display: inline-block; }
.omx-pair { display: grid; gap: 12px; }

.decide { background: #fff; border: 1px solid var(--hairline); padding: 20px; display: grid; gap: 12px; }
.dc-q { margin: 0; font: 600 18px/1.3 var(--sans); color: var(--ink); }
.dc-ev { font-size: 14px; color: var(--ink-3); }
.dc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-opts .mini-btn { cursor: pointer; }
.dc-opts .mini-btn.on { background: var(--ink); color: #fff; }
.decide.js .dc-out { display: none; }
.decide.done .dc-out { display: block; }
.dc-out { font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--hairline); padding-top: 12px; }
.dc-you { font-weight: 600; color: var(--ink); }
.decide.right { border-color: var(--periwinkle); }
.decide.wrong { border-color: var(--orange); }

.sorter { display: grid; gap: 16px; }
.so-pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 12px; background: #fff; border: 1px dashed var(--ink-4); }
.so-chip { font: 500 13px/1 var(--mono); padding: 9px 10px; background: var(--paper); border: 1px solid var(--ink); cursor: pointer; color: var(--ink); }
.so-chip.picked { background: var(--ink); color: #fff; }
.so-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.so-bucket { min-height: 120px; background: #fff; border: 1px solid var(--hairline); padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; cursor: pointer; }
.so-bucket:focus { outline: 2px solid var(--ink); }
.so-label { width: 100%; font-size: 13px; color: var(--ink-4); }
.so-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.sorter.js .so-answer { display: none; }
.sorter.checked .so-answer { display: grid; }
.so-answer { gap: 10px; }
.sorter:not(.js) .so-pool, .sorter:not(.js) .so-buckets, .sorter:not(.js) .so-acts { display: none; }
.so-group { display: grid; gap: 4px; background: var(--periwinkle-tint); border: 1px solid var(--ink); padding: 12px 14px; }
.so-group b { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.so-group span { font-size: 14px; color: var(--ink-2); }
.so-group em { font-style: normal; font-size: 13px; color: var(--ink-3); }

.doc-fig { margin: 0; display: grid; gap: 10px; }
.doc-sheet { overflow: auto; background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 32px 36px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.doc-sheet h3, .doc-sheet h4 { color: var(--ink); margin: 18px 0 6px; }
.doc-sheet table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 8px 0; }
.doc-sheet th, .doc-sheet td { border: 1px solid var(--hairline); padding: 6px 8px; text-align: left; vertical-align: top; }
.doc-title { margin: 0 0 12px; font: 600 22px/1.2 var(--sans); color: var(--ink); }

.facts td.win { background: var(--periwinkle-tint); }
.facts .src { margin-left: 8px; font-size: 12px; color: var(--ink-4); }

@media (max-width: 1080px) {
    .receipt.annotated { grid-template-columns: 1fr; }
    .price-strip { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .limit { grid-template-columns: 1fr; }
    .spec-row { grid-template-columns: 1fr; gap: 4px; }
    .doc-sheet { padding: 20px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Chapters on inner pages: give the product screen the wider column, on either side. */
.chapter .split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); }
.chapter .split.flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
.chapter .split.flip > .sticky { order: 2; }
.chapter .ch-visual .p-table tbody th { width: auto; }
@media (max-width: 1080px) {
    .chapter .split, .chapter .split.flip { grid-template-columns: 1fr; }
    .chapter .split.flip > .sticky { order: 0; }
}
.ch-visual .shell { grid-template-columns: 56px minmax(0, 1fr); }
.ch-visual .sh-side { display: none; }

/* A receipt laid out as a client slide. */
.slide { background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 28px; display: grid; gap: 14px; aspect-ratio: auto; }
.slide-k { margin: 0; font-size: 13px; color: var(--ink-4); }
.slide-h { margin: 0; font: 600 22px/1.25 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.slide-f { margin: 0; font-size: 15px; color: var(--ink-2); }

/* Small calculators: inputs on the left, results on the right. No form element. */
.calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.calc-in { display: grid; gap: 16px; padding: 24px; border-right: 1px solid var(--hairline); align-content: start; }
.calc-in label { display: grid; gap: 6px; font-size: 14px; color: var(--ink-3); }
.calc-in input[type=number] { height: 44px; padding: 0 12px; border: 1px solid var(--ink); font: 600 18px/1 var(--sans); color: var(--ink); background: var(--paper); width: 100%; }
.calc-check { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px !important; color: var(--ink) !important; }
.calc-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.calc-out { padding: 24px; display: grid; gap: 4px; align-content: start; }
.calc-out > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.calc-out span { font-size: 15px; color: var(--ink-3); }
.calc-out b { font: 600 24px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-out .app-cap { margin-top: 10px; }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } .calc-in { border-right: 0; border-bottom: 1px solid var(--hairline); } }
.p-hero-visual .shell { grid-template-columns: 56px minmax(0, 1fr); }
.p-hero-visual .sh-side { display: none; }
.p-prose .btn { text-decoration: none; } .p-prose .btn-primary { color: #fff; } .p-prose .btn-secondary { color: var(--ink); }

/* Need picker and alternative cards. */
.need { display: grid; gap: 16px; }
.need-q { margin: 0; font: 600 18px/1.3 var(--sans); color: var(--ink); }
.need-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.need-chips .mini-btn { cursor: pointer; }
.need-chips .mini-btn.on { background: var(--ink); color: #fff; }
.need-cards { display: grid; gap: 14px; }
.alt { background: #fff; border: 1px solid var(--hairline); padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px 32px; transition: opacity .2s; }
.alt.dim { opacity: .55; }
.alt.ours { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.alt-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.alt-head h3 { margin: 0; font: 600 20px/1.2 var(--sans); color: var(--ink); }
.alt-head .chip { align-self: center; }
.alt p { margin: 0; font-size: 15px; color: var(--ink-2); }
.alt dl { margin: 0; display: grid; gap: 8px; font-size: 14px; }
.alt dt { color: var(--ink-4); }
.alt dd { margin: 0 0 4px; color: var(--ink); }
.alt dd a { color: var(--ink-4); font-size: 12px; margin-left: 6px; }
.need-why { grid-column: 1 / -1; margin: 4px 0 0 !important; padding: 10px 12px; background: var(--periwinkle-tint); font-size: 14px !important; color: var(--ink) !important; }
@media (max-width: 760px) { .alt { grid-template-columns: 1fr; } }
.chapter .app-fig { gap: 34px; }
@media (max-width: 640px) { .p-hero-visual .shell, .ch-visual .shell { grid-template-columns: minmax(0, 1fr); } }