/* tools/allowable-expenses/index.html's own CSS, extracted from its inline
 * <style> (Task 11): the expense list/filter UI, the sticky category rail,
 * the pack builder checkboxes and the print-only pack layout. Entirely
 * bespoke to this page.
 *
 * The two font-weight comments inline below (the h1/h2/.faq h3 PIN and the
 * .hl-claim held-at-400 note) are this page's own hand-written weight pins,
 * the sibling of tools/corporation-tax's: see inject-chrome.js's WEIGHT_PIN
 * comment for why these two tool pages carry their own copy rather than a
 * shared mechanism.
 *
 * This page is otherwise generated by scripts/build-expenses-page.js, which
 * writes the item list and rail into marked regions of the BODY only; it
 * never touches <style>, <head> or any <link>, so this extraction does not
 * conflict with it, and re-running the generator (apply or --check) will
 * not revert or flag anything this task changed. Verified by reading the
 * script rather than assumed: it references no CSS or head content at all.
 *
 * This page now also links tools/_shared/flow.css, which it did not before:
 * *{box-sizing:border-box} and the tool-top:css:start/end block were dropped
 * here rather than kept as a second copy.
 *
 * CORRECTED 2026-09-02. The claim this comment used to carry, that the whole
 * tool-top:css:start/end block was BYTE-IDENTICAL to flow.css, was measured
 * against the WORKING-TREE copy of flow.css, which carries an unstaged hunk
 * belonging to another session. Against the COMMITTED file, read with
 * `git show HEAD:tools/_shared/flow.css`, exactly one line differs: committed
 * flow.css paints the back button's hover and keyboard focus as a solid orange
 * fill with paper-coloured text, where this page has always painted a
 * translucent orange wash with ink-coloured text. Restored below as background
 * and colour ONLY, with no transform, because flow.css sets
 * transform:translateX(-2px) on the same selector and nulls it again inside
 * @media (prefers-reduced-motion:reduce); this file loads after both, so
 * repeating the transform here would resurrect it for a reader who asked for
 * no motion.
 *
 * The three overrides below it are the same failure in a different
 * property, and the reason they are written one property at a time is that CSS
 * resolves a shared selector's declarations INDIVIDUALLY: a property flow.css
 * sets and this file's own rule never mentions paints through regardless of
 * which rule loads later.
 *
 *   :root      flow.css declares its own token block and loads AFTER
 *              /assets/tokens.css here, so it repainted --font-mono (dropping
 *              SFMono-Regular and Menlo from the fallback stack, which moved
 *              the computed font-family on 189 elements) and --ease-ink (a
 *              different easing curve, carried in flow.css under its own
 *              documented exemption). Both are put back to canon.
 *   main       flow.css:43 floors a bare main at min-height:60vh, and the main
 *              rule below never mentions min-height. This page has a live
 *              search filter, so a short filtered result set is exactly when a
 *              60vh floor would show.
 *   .sr        flow.css:284 declares the modern visually-hidden recipe
 *              (width/height/margin/overflow/clip/white-space) while this page
 *              has always used the older off-screen one, so six properties
 *              leaked into both of its visually-hidden labels. Put back by
 *              naming the values this page renders rather than by leaving the
 *              leak in place.
 */
:root{--font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--ease-ink:cubic-bezier(0.22, 1, 0.36, 1)}
.tool-back:hover,.tool-back:focus-visible{background:var(--orange-wash,rgba(223,89,17,0.18));color:var(--ink,#141414)}
main{min-height:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;line-height:1.6}
main{max-width:52rem;margin:0 auto;padding:4rem 1.5rem}
/* font-weight:600 is PINNED on the three heading rules below. It is the weight these headings already painted, back when this page loaded a Newsreader that stopped at 600 and the browser resolved bold down to it. The shared font URL now carries 700 for the tool results screens, so without the pin these headings would silently get heavier. The rules are named one by one rather than pinned as a group, because .pp-title and .tool-what on this page set the same family with no weight and land on body text computing 400, where the same pin would MOVE the page rather than preserve it. */h1{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1.13;margin:0 0 1rem;letter-spacing:-.015em}
a{color:var(--orange)}
.byline{color:var(--ink-muted);font-size:.95rem;margin:0 0 2rem}
.lede{font-size:1.06rem;color:var(--ink-2);margin:0 0 1.75rem}
h2.section{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:1.5rem;margin:2.5rem 0 .75rem}
.tests{display:grid;gap:1rem;margin:0 0 2rem}
@media(min-width:640px){.tests{grid-template-columns:1fr 1fr}}
.test{background:var(--paper-2);border-radius:6px;padding:1.1rem 1.2rem}
.test .n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);font-weight:600;margin:0 0 .35rem}
.test p{margin:0;font-size:.92rem;color:var(--ink-muted)}
.test strong{color:var(--ink-2)}
.controls{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--rule-soft);padding:.9rem 0;margin:0 0 .5rem}
.controls-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.controls input[type=search]{flex:1;min-width:200px;padding:.55rem .8rem;border:1px solid var(--rule-soft);border-radius:4px;background:#fff;font-size:.95rem;font-family:inherit}
.controls select{padding:.55rem .8rem;border:1px solid var(--rule-soft);border-radius:4px;background:#fff;font-size:.95rem;font-family:inherit;color:var(--ink)}
.count{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.74rem;letter-spacing:.03em;color:var(--ink-muted);margin:.6rem 0 0;line-height:1.5}
.count b{color:var(--orange-deep)}
.cat{margin:2.25rem 0 0}
.cat-head{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);font-weight:600;display:flex;align-items:center;gap:.5rem;margin:0 0 .9rem;padding-top:.6rem;border-top:1px solid var(--rule-soft)}
.cat-head::before{content:"";width:.6rem;height:.6rem;background:var(--orange);flex:none}
.cat.cannot .cat-head{color:var(--ink-2)}
.cat.cannot .cat-head::before{background:var(--ink-faded)}
.item{padding:.75rem 0;border-bottom:1px solid rgba(179,168,135,.4)}
.item:last-child{border-bottom:none}
.item h3{font-size:.98rem;font-weight:700;margin:0 0 .2rem;font-family:inherit;color:var(--ink);display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.item p{margin:0 0 .3rem;font-size:.92rem;color:var(--ink-muted)}
.catch{display:block;font-size:.88rem;color:var(--orange-deep);margin:0 0 .3rem}
.catch b{font-weight:600}
.trade-tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;background:var(--orange-soft);color:#3A2410;padding:.12rem .4rem;border-radius:3px;font-weight:600;white-space:nowrap}
.ref{font-size:.78rem;font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.02em}
.ref a{color:var(--ink-faded);text-decoration:none;border-bottom:1px solid rgba(139,130,112,.4)}
.ref a:hover{color:var(--orange);border-bottom-color:var(--orange)}
.empty{padding:2rem 0;color:var(--ink-muted);font-size:.95rem}
.faq{border-top:1px solid var(--rule-soft);padding-top:1.25rem;margin-top:1.25rem}
.faq h3{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:1.15rem;margin:0 0 .4rem}
.faq p{margin:0;color:var(--ink-muted);font-size:.95rem}
footer{max-width:52rem;margin:3rem auto 0;padding:2rem 1.5rem;border-top:1px solid var(--rule-soft);color:var(--ink-muted);font-size:.9rem}
.footer-wordmark-link{display:inline-flex;margin-bottom:.75rem}
.footer-wordmark{height:22px;width:auto}
.cta{background:var(--paper-2);border-radius:6px;padding:1.3rem 1.4rem;margin:2.5rem 0 0}
.cta p{margin:0 0 .6rem;color:var(--ink-2)}
/* drawn: .btn-drawn in the markup */
.sr{position:absolute;left:-9999px;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
/* ---- pack builder ---- */
.builder{display:grid;grid-template-columns:1fr}
.rail{display:flex;font-size:.85rem}
.rail a{display:flex;align-items:baseline;gap:.45rem;color:var(--ink-2);text-decoration:none;line-height:1.35}
.rail a .c{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.66rem;color:var(--ink-muted);margin-left:auto;padding-left:.5rem}
.rail a:hover{color:var(--orange-deep)}
.rail a.rail-hl{font-weight:600}
.rail .star{color:var(--orange)}
@media(min-width:820px){
  .builder{grid-template-columns:190px minmax(0,1fr);column-gap:1.75rem}
  .rail{grid-column:1;flex-direction:column;position:sticky;top:8.2rem;align-self:start;max-height:calc(100vh - 9.5rem);overflow-y:auto;padding:.25rem 0}
  .rail a{padding:.4rem .6rem .4rem .7rem;border-left:3px solid transparent}
  .rail a[aria-current="true"]{border-left-color:var(--orange);color:var(--ink);font-weight:600;background:rgba(223,89,17,.14)}
  .list{grid-column:2}
}
@media(max-width:819.98px){
  .controls{position:static}
  .rail{position:sticky;top:0;z-index:20;flex-direction:row;gap:.2rem;overflow-x:auto;background:var(--paper);border-bottom:1px solid var(--rule-soft);padding:.55rem 0;-webkit-overflow-scrolling:touch}
  .rail a{flex:none;border-bottom:2px solid transparent;padding:.25rem .55rem;white-space:nowrap;font-size:.8rem}
  .rail a[aria-current="true"]{border-bottom-color:var(--orange);color:var(--ink);font-weight:600}
  .rail a .c{margin-left:.3rem;padding-left:0}
}
.cat{scroll-margin-top:8.5rem}
@media(max-width:819.98px){.cat{scroll-margin-top:3.6rem}}
.item{position:relative}
.hl-row{position:relative;border-top:1px solid rgba(179,168,135,.4)}
.hl-row:first-of-type{border-top:none}
.hl-row label{display:flex;align-items:baseline;gap:.7rem;padding:.7rem 0;cursor:pointer}
.hl-row .box{align-self:flex-start;margin-top:.15rem}
/* font-weight is held at 400 rather than the 500 this rule used to declare, because 400 is what it paints live: the page loaded Newsreader at 400 and 600 only, so CSS font matching resolved the declared 500 down to 400. The consolidated URL carries a real 500, and honouring it grows this page by 23px, so that improvement is logged as a follow-up snag rather than shipped here. */.hl-claim{font-family:Newsreader,Georgia,serif;font-weight:400;font-size:1.12rem;line-height:1.3}
.hl-tag{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.68rem;color:var(--orange-deep);white-space:nowrap;padding-left:.6rem}
.hl-sub{font-size:.85rem;color:var(--ink-muted);margin:0 0 .6rem}
@media(max-width:640px){.hl-tag{display:none}}
.tick{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.box{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--orange-deep);background:var(--paper);font-size:13px;line-height:1;color:#fff;transition:background .15s,border-color .15s}
.tick:checked ~ label .box,.tick:checked ~ h3 label .box{background:var(--ok);border-color:var(--ok)}
.tick:checked ~ label .box::before,.tick:checked ~ h3 label .box::before{content:'\2713'}
.tick:focus-visible ~ label .box,.tick:focus-visible ~ h3 label .box{outline:2px solid var(--orange);outline-offset:2px}
.item h3 label{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer}
.item h3 label .box{margin-top:.1rem}
.packbar{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;gap:1rem;background:var(--paper);border-top:1px solid var(--ink);padding:.7rem 0;margin-top:1.5rem}
.pack-count{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.78rem;color:var(--ink-muted)}
.pack-count b{color:var(--ink);font-weight:500}
.pack-msg{font-size:.8rem;color:var(--orange-deep)}
/* .pack-pdf is a .btn-drawn.is-quiet in the markup */ .pack-pdf{margin-left:auto}

.pack-pdf:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* ---- the printed pack ---- */
#pack-print{display:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pp-head{display:flex;align-items:flex-end;gap:1rem;border-bottom:2px solid #141414;padding-bottom:.7rem;margin-bottom:1rem}
.pp-head img{height:26px;width:auto;display:block}
.pp-tagline{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:#5A5347;margin:.3rem 0 0}
.pp-meta{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.68rem;color:#5A5347;text-align:right}
.pp-meta span{display:block}
.pp-title{font-family:Newsreader,Georgia,serif;font-size:1.6rem;margin:.2rem 0}
.pp-sub{font-size:.85rem;color:#5A5347;margin:0 0 .8rem}
.pp-cat{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#B8431A;font-weight:600;border-top:1px solid #B3A887;padding-top:.5rem;margin:1.1rem 0 .4rem}
.pp-item{page-break-inside:avoid;margin:0 0 .75rem}
.pp-item h3{font-size:.95rem;margin:0 0 .15rem}
.pp-item p{margin:0 0 .2rem;font-size:.85rem;color:#2A2724}
.pp-catch{font-size:.8rem;color:#B8431A}
.pp-ref{font-size:.7rem;font-family:'IBM Plex Mono',ui-monospace,monospace;color:#5A5347}
.pp-cta{display:flex;align-items:center;gap:1.2rem;margin-top:1.4rem;border-top:2px solid #141414;padding-top:.9rem;page-break-inside:avoid}
.pp-cta p{margin:0;font-size:.88rem;color:#2A2724;max-width:30rem}
.pp-btn{margin-left:auto;flex:none;display:inline-block;border:2px solid #DF5911;background:none;color:#DF5911;font-weight:700;font-size:.9rem;text-decoration:none;padding:.55rem 1.1rem;border-radius:4px}
@media print{.pp-btn{color:#DF5911;background:none}}
.pp-cta-url{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.68rem;color:#5A5347;margin:.35rem 0 0}
.pp-foot{margin-top:1.2rem;border-top:1px solid #B3A887;padding-top:.5rem;font-size:.7rem;color:#5A5347}
@media print{
  .controls{position:static}
  body.pack-printing{background:#fff}
  body.pack-printing main>*{display:none!important}
  body.pack-printing footer{display:none!important}
  body.pack-printing main>#pack-print{display:block!important}
}



/* Snag 34. A select takes its intrinsic width from its longest option, so this
   one measured 317px inside a 320px viewport with nothing to cap it. */
.controls select { max-width: 100%; }
