/* The Flat Rate VAT checker and the Tools page (LEDG-1227, concept A "Big figure card").
   Loaded by the pages under /tools/ alone; the header's "Free tools" menu is in the site sheet.
   The checker's own markup keeps the c-* names flat-rate-vat.js writes to. */
.xa [hidden]{display:none!important}
.xa :focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.xa .f-link{display:inline;min-height:0}
.c-money{display:flex;align-items:center;gap:10px}
.c-money span{flex:none;font:600 18px/1 var(--mono)}
.c-hint{max-width:60ch}
.c-msg{border-left:3px solid;line-height:1.45}
.c-msg:empty{display:none}
.c-bar{display:block;width:100%;max-width:420px;height:auto;margin-top:16px}
.c-track,.c-in{stroke-width:1.5}
.c-out{fill:none;stroke-width:1.5;stroke-dasharray:4 3}
.c-tick{stroke-width:2.5;stroke-linecap:round}
.c-row,.c-work{overflow-wrap:anywhere}
.c-figure{font:800 44px/1.05 "Red Hat Display",sans-serif}
.c-sum{font:500 16px/1.5 var(--mono)}
.xa{background:radial-gradient(90% 80% at 85% -10%,#1d3052 0,#0e1a2e 55%,#0a1424 100%);color:#fff}
.xa-wrap{max-width:1040px;margin:0 auto;padding:10px 24px 28px}
.xa-top{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:20px;row-gap:0;margin-bottom:10px}
.xa-top .x-back{grid-column:1/-1}
.x-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-right:12px;font-weight:600;color:#c5cdd8;border-radius:8px}
.x-back svg{width:18px;height:18px}
.x-back:hover{color:#fff}
.xa-top h1{font:800 clamp(30px,3.4vw,40px)/1.05 "Red Hat Display",sans-serif;letter-spacing:-.03em}
.xa-lede{color:#c5cdd8;font-size:16px;line-height:1.4;max-width:46ch}
.xa-card{border-radius:28px;background:linear-gradient(180deg,#15243d 0,#101c31 100%);box-shadow:0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.07),0 50px 90px -40px rgba(0,0,0,.8);padding:22px 28px 26px}
.xa-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:24px;align-items:start;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.09)}
.xa-cap{font-weight:600;font-size:14px;letter-spacing:.02em;color:#a8b4cb}
.xa-total{margin:0}
.x-figwrap{min-height:clamp(70px,9vw,118px);display:flex;align-items:center}
.x-fig,.x-ph{font:800 clamp(56px,9.2vw,118px)/1 "Red Hat Display",sans-serif;letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin:0}
.x-fig{color:var(--mint)}
.x-ph{color:rgba(255,255,255,.14)}
.x-figwrap:has(#total-figure:not([hidden])) .x-ph{display:none}
.x-pop{animation:xa-pop .45s var(--ease)}
@keyframes xa-pop{from{transform:translateY(8px);opacity:.35}to{transform:none;opacity:1}}
.x-sum{font:500 14px/1.4 var(--mono);color:#a8b4cb;margin-top:6px;overflow-wrap:anywhere}
.x-note{font-size:14px;color:#a8b4cb;margin-top:6px;max-width:52ch}
.xa-side{position:relative;display:grid;gap:10px;justify-items:end;padding-top:2px}
.xa-lc{width:100%;justify-self:stretch;padding-right:52px;min-height:44px}
.c-verdict{display:block}
.xa-lc .c-verdict{display:flex;align-items:center;gap:8px}
.x-pointer{font-size:14px;color:#c5cdd8;margin-top:8px}
.x-pointer a{color:#fff;text-decoration:underline;font-weight:600}
.xa-card:has(#lc-chip.plain) .xa-ans{display:none}
.xa-card:has(#lc-chip.plain) .xa-side{grid-column:1/-1}
.xa-lc .c-bar{max-width:100%;margin-top:6px}
.xa-lc .c-track{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.3)}
.xa-lc .c-in{fill:var(--mint);stroke:var(--mint)}
.xa-lc .c-out{stroke:#ffd84a}
.xa-lc .c-tick{stroke:#fff;opacity:.8}
.xa-lc .c-dot{fill:#fff}
.xa-lc .v-chip{background:var(--mint);color:var(--ink);box-shadow:none}
.xa-lc .v-chip.plain{background:#ffd84a}
.xa-lc .v-chip:empty{display:none}
/* the ? */
.x-help{position:absolute;top:0;right:0}
.x-help>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;font:700 18px/1 "Red Hat Display",sans-serif;color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.x-help>summary::-webkit-details-marker{display:none}
.x-help>summary:hover,.x-help[open]>summary{background:var(--mint);color:var(--ink)}
.x-panel{position:absolute;right:0;top:52px;z-index:40;width:min(460px,86vw);max-height:min(60vh,520px);overflow:auto;border-radius:18px;background:#fbfaf6;color:var(--ink);padding:20px 22px;font-size:15px;line-height:1.5;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.x-close{position:sticky;top:0;float:right;min-width:88px;min-height:44px;margin:-8px -8px 8px 12px;padding:0 18px;border-radius:12px;font-weight:700;color:var(--ink);background:var(--mint);cursor:pointer}
.x-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.x-panel h3{font:800 17px/1.2 "Red Hat Display",sans-serif;margin:16px 0 4px}
.x-panel h3:first-child{margin-top:0}
.x-panel p{margin:6px 0;color:#2b3445}
.x-panel ul{margin:8px 0;display:grid;gap:8px}
.x-panel li{border-left:2px solid var(--hair);padding-left:12px;color:#2b3445}
.xa .x-panel .c-hint{color:#2b3445;font-size:15px;margin:6px 0}
.x-panel a{text-decoration:underline;font-weight:600}
/* keys */
.xa-keys{padding-top:18px;display:grid;gap:14px}
.xa-row1{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.x-seg{border:0;margin:0;padding:3px;display:inline-flex;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);align-self:end;min-height:50px}
.x-seg label{position:relative;display:grid;place-items:center;min-width:88px;min-height:44px;border-radius:11px;cursor:pointer;font-weight:600;color:#c5cdd8}
.x-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.x-seg label:has(:checked){background:var(--mint);color:var(--ink)}
.x-seg label:has(:focus-visible){outline:2px solid #fff;outline-offset:2px}
.xa .e-field label{color:#a8b4cb;font-size:13.5px;font-weight:600;margin-bottom:6px;letter-spacing:.01em}
.xa .e-field input{background:#0b1526;border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#fff;min-height:48px;font-size:17px;color-scheme:dark;font-variant-numeric:tabular-nums}
.xa .e-field input:focus{border-color:var(--mint);outline:2px solid rgba(191,235,214,.35);outline-offset:0}
.xa .e-field input[aria-invalid=true]{border-color:#ff8f87}
.xa .e-field .c-money input{max-width:none}
.xa .c-money span{color:#a8b4cb}
.xa .c-msg{border-left-color:#ff8f87;color:#ffd7d3;font-size:13.5px;margin-top:6px;padding-left:10px}
.xa .c-hint{color:#a8b4cb;font-size:13.5px;margin:6px 0 0}
.xa-invhead{display:flex;gap:16px;align-items:end;margin-bottom:6px}
.xa-invhead .x-reg{width:230px}
.xa-invhead .x-reg input{max-width:230px}
.x-add{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:12px;font-weight:600;color:var(--mint);background:rgba(191,235,214,.1);box-shadow:inset 0 0 0 1px rgba(191,235,214,.4);cursor:pointer;transition:background-color .2s,transform .15s var(--ease)}
.x-add:hover{background:rgba(191,235,214,.2)}
.x-add:active{transform:translateY(1px)}
.x-add svg{width:18px;height:18px}
.xa-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px;border:0}
.xa-rows .c-row{border:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;grid-template-areas:"d a r" "w w w";gap:6px 16px;align-items:end}
.xa-rows .x-fd{grid-area:d}.xa-rows .x-fa{grid-area:a}.xa-rows .c-remove{grid-area:r}.xa-rows .c-work{grid-area:w}
.xa-rows .c-row:not(:first-child) label{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;margin:-1px}
.c-remove{display:grid;place-items:center;width:44px;height:48px;border-radius:12px;color:#c5cdd8;background:transparent;cursor:pointer}
.c-remove:hover{background:rgba(255,255,255,.08);color:#fff}
.c-remove svg{width:18px;height:18px}
.x-rm{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.xa-rows .c-work{display:flex;align-items:center;gap:8px;font:500 13px/1.4 var(--mono);color:#a8b4cb;margin:0;padding-left:2px}
.xa-rows .c-work .v-chip{height:24px;font-size:12.5px;background:rgba(191,235,214,.14);color:var(--mint);box-shadow:none}
.xa .c-row .c-msg{margin-top:4px}
.x-noscript{padding:16px;color:#fff}
/* motion */
@media (prefers-reduced-motion:reduce){.x-pop{animation:none}.x-add{transition:none}}

/* ---- tools page ---- */
.xa-top-big{display:block;padding-top:28px;margin-bottom:28px}
.xa-top-big h1{font-size:clamp(48px,7vw,88px);letter-spacing:-.04em;line-height:.95}
.xa-top-big .xa-lede{margin-top:14px;font-size:19px}
.xa-bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:16px;min-height:380px}
.xa-tile{border-radius:24px;background:linear-gradient(180deg,#15243d,#101c31);box-shadow:0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;position:relative}
.xa-tile-live{grid-row:1/3}
.xa-tile-live>a{display:grid;grid-template-rows:1fr auto;height:100%;color:#fff;min-height:44px;transition:background-color .3s}
.xa-tile-live>a:hover{background:rgba(191,235,214,.05)}
.xa-demo{display:grid;align-content:center;gap:6px;padding:28px 36px;background:radial-gradient(70% 90% at 30% 0,rgba(191,235,214,.14),transparent 70%)}
.xa-demo-cap{font-weight:600;font-size:14px;color:#a8b4cb}
.xa-demo-fig{font:800 clamp(56px,8vw,104px)/1 "Red Hat Display",sans-serif;letter-spacing:-.045em;color:var(--mint);font-variant-numeric:tabular-nums}
.xa-demo svg{width:min(380px,100%);margin-top:8px}
.xa-live-body{display:flex;align-items:center;gap:16px;padding:20px 28px;border-top:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.14)}
.xa-tic{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.07);color:#dbe3f0}
.xa-tic svg{width:22px;height:22px}
.xa-tic-live{background:var(--mint);color:var(--ink)}
.xa-live-text{flex:1}
.xa-live-text h2,.xa-tile-soon h2{font:800 21px/1.15 "Red Hat Display",sans-serif;letter-spacing:-.01em}
.xa-live-text p,.xa-tile-soon p{color:#a8b4cb;margin-top:4px;font-size:15px}
.xa-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:99px;background:#fff;color:var(--ink);font-weight:600;transition:background-color .2s,transform .2s var(--ease)}
.xa-open svg{width:18px;height:18px}
.xa-tile-live>a:hover .xa-open{background:var(--mint);transform:translateX(2px)}
.xa-tile-soon{padding:24px;display:grid;align-content:space-between;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 10px,transparent 10px 20px),linear-gradient(180deg,#121f35,#0f1a2d);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12);border:0}
.xa-tile-soon .xa-tic{margin-bottom:14px}
.xa-tile-soon .x-soon{justify-self:start;margin-top:14px}
@media (max-width:860px){
  .xa-hero{grid-template-columns:minmax(0,1fr)}
  .xa-side{justify-items:stretch;padding-top:0}
  .xa-lc{padding-right:0}
  .x-help{top:-4px}
  .xa-cap{padding-right:52px}
  .xa-row1{grid-template-columns:minmax(0,1fr)}
  .xa-bento{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .xa-tile-live{grid-row:auto}
}
@media (max-width:600px){
  .xa-wrap{padding:6px 14px 28px}
  .xa-top{grid-template-columns:minmax(0,1fr)}
  .xa-card{padding:18px 16px 22px;border-radius:22px}
  .xa-invhead{flex-direction:column;align-items:stretch}
  .xa-invhead .x-reg,.xa-invhead .x-reg input{width:100%;max-width:none}
  .x-add{justify-content:center}
  .xa-rows .c-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d d" "a a" "w r";padding-top:14px;border-top:1px solid rgba(255,255,255,.09);align-items:center}
  .xa-rows .c-row:not(:first-child) label{position:static;clip-path:none;width:auto;height:auto;margin:0 0 6px}
  .xa-rows .c-remove{justify-self:end}
  .xa-live-body{flex-wrap:wrap}
  .xa-open{width:100%;justify-content:center}
  .x-seg{justify-self:stretch}
  .x-seg label{flex:1}
  .x-panel{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:70vh}
  .xa-demo{padding:22px}
}

.xa .xa-total{border:0;padding:0;margin:0}
.xa .c-total p:last-child{color:#a8b4cb;margin-top:6px}
.xa .x-fig{color:var(--mint)}
.xa .c-row .c-remove{margin:0}
.xa .c-figure{font-size:clamp(56px,8vw,100px)}
.xa .x-ph{font-size:clamp(56px,8vw,100px)}
.xa .x-figwrap{min-height:clamp(60px,8vw,100px)}
.xa .xa-top{margin-bottom:6px}
.xa .xa-hero{padding-bottom:16px}
.xa .xa-keys{padding-top:14px;gap:10px}
.xa .xa-wrap{padding-top:4px;padding-bottom:20px}
.xa .xa-card{padding:18px 28px 20px}
.xa .c-total .x-figwrap .x-fig{color:var(--mint)}
.xa .c-total .x-figwrap .x-ph{color:rgba(255,255,255,.14)}
.xa-demo-bars{display:flex;align-items:flex-end;gap:10px;height:clamp(56px,8vw,104px)}
.xa-demo-bars i{display:block;flex:none;width:clamp(28px,4vw,52px);height:100%;border-radius:10px;background:var(--mint)}
.xa-demo-bars i:nth-child(2){height:62%}.xa-demo-bars i:nth-child(3){height:82%}.xa-demo-bars i:nth-child(4){height:48%}
/* The closing band follows the dark page without a seam. */
.g-close{margin-top:0;background:#0a1424;color:#fff}
.g-perf{border-top-color:rgba(255,255,255,.22)}
.g-sub,.f-note,.g-early{color:#c5cdd8}
.g-close .f-link{color:#fff}